mail.vue

<template>
  <div class="mail">
    <div class="left">
      <div v-loading="orgLoading"  element-loading-text="正在加载中">
        <div class="title">组织架构</div>
        <div class="bottom">
          <div class="ty" @click="getMailList(1)">
            <div>
              <span>全部</span>
              <span class="number">（{{ allNumber }}）</span>
            </div>
          </div>
          <div class="ty" style="margin:12px 0;" @click="getNoGroupMember(1,1)">
            <div>
              <span>未分组</span>
              <span class="number">（{{ wNumber }}）</span>
            </div>
          </div>
          <div class="tree">
            <el-tree
              class="trees"
              :data="data1"
              node-key="id"
              default-expand-all
              expand-on-click-node
              @node-click="handleTreeClick"
              :highlight-current="true"
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="line">
        <span class="number">{{groupName}}</span>
      </div>
      <div class="line lines">
        <div >
          <el-button class="button button_group" size="small" @click="addChild">添加子部门</el-button>
          <el-button class="button buttondark" :disabled="groupId ? false : true" size="small" @click="editChild">编辑部门</el-button>
          <el-button class="button buttondark" :disabled="groupId ? false : true" size="small" @click="deleteChild">删除部门</el-button
          >
        </div>
        <!-- 搜索区 -->
        <el-form :inline="true"  :model="formData" style="height: 42px;">
          <el-form-item label="关键词" >
            <el-input
              size="small"
              v-model="formData.keywords"
              placeholder="请输入关键词"
            />
          </el-form-item>
          <el-button class="button buttondark" size="small" @click="handleSearch(1,1)" style="margin-top:4px;">搜索</el-button>
        </el-form>
      </div>
      <div class="line">
        <span class="number">全部（{{totalNumber}}）</span>
        <el-button class="button buttondark" size="small" style="margin-left:20px;" @click="handleMove" :disabled="idList.length>0? false:true">批量移动</el-button>
      </div>
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="tableLoading"  
        element-loading-text="正在加载中"
        height="calc(100% - 140px)"
        @selection-change="handleMemberChange"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="userId" label="企业微信ID" align="center"></el-table-column>
        <el-table-column prop="oyStallName" label="门店" align="center"></el-table-column>
        <el-table-column prop="oyStallCode" label="门店ID" align="center"></el-table-column>
        <el-table-column prop="oyStallMemberId" label="门店会员ID" align="center"></el-table-column>
        <el-table-column prop="isManager" label="角色" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSupervisor == false">普通用户</span>
            <span v-if="scope.row.isSupervisor == true">主管</span>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="synchronization" label="同步时间" align="center"></el-table-column>
        <el-table-column prop="isManager" label="操作" align="center">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.isSupervisor? true:false" @click="handleSingleMove(scope.row.id)">移动</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.size"
          layout="total, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <move-dialog
      v-if="moveDialogShow"
      :moveDialog="moveDialogShow"
      @handleCancel="moveDialogShow = false"
      @handleFinish="removeFinish"
      :idList="idList"
    ></move-dialog>
    <add-dialog
      v-if="addDialogShow"
      :addDialog="addDialogShow"
      @handleAddCancel="addDialogShow = false"
      @handleAddFinish="addFinish"
    ></add-dialog>
     <edit-dialog
      v-if="editDialogShow"
      :groupId="groupId"
      :editDialog="editDialogShow"
      @handleEditCancel="editDialogShow = false"
      @handleEditFinish="editFinish"
      
    ></edit-dialog>
    <delete-dialog
      v-if="deleteDialogShow"
      :daleteDialog="deleteDialogShow"
      @handleDeleteCancel="deleteDialogShow = false"
      @handleDeleteFinish="deleteFinish"
      :nowNode="nowNode"
    ></delete-dialog>
  </div>
</template>

<script>
import MoveDialog from "./components/move";
import AddDialog from "./components/addGroup";
import EditDialog from "./components/editGroup";
import DeleteDialog from "./components/deleteGroup";
import {
  getOrgTree,
  getAllMemberList,
  getNoGroupMember,
  getMemberById,
  storeNameChange,
  getGroupById,
  changeRole,
  search
} from "@/api/in/mail";
export default {
  data() {
   
    return {
      data1: [],
      groupName: '',
      tableData: [],
      isShow: false,
      formData: {
        keywords:""
      },
      statusList: [],
      page: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      moveDialogShow: false,
      addDialogShow: false,
      editDialogShow: false,
      deleteDialogShow: false,
      nameDialog: false,
      allNumber: "",
      wNumber: "",
      orgData: {
        label: "name",
        children: "adminStallList",
        id: "id"
      },
      type: 1,
      sType: 1,
      idList: [],
      storeId: "",
      groupId: "",
      counterId: 0,
      title: "全部",
      totalNumber: "",
      nowNode: {},
      flag: 0,
      orgLoading: false,
      tableLoading: false
    };
  },
  components: {
    MoveDialog,
    AddDialog,
    DeleteDialog,
    EditDialog
  },
  created() {
    this.getOrgTree();
    this.getMailList(1,1);
  },
  methods: {
    getOrgTree() {
      this.orgLoading = true
      getOrgTree().then(res => {
        let data = res.data;
        this.allNumber = data.numOfClerks;
        this.wNumber = data.numOfClerksArrangeNot
        this.data1 = [data.organizations];
        this.orgLoading = false
      });
    },
    handleTreeClick(data) {      
      this.flag = ''
      this.nowNode = data
      this.groupName = data.label
      this.groupId = data.id
      this.getGroupMember(1,1)
      
    },
    getGroupMember(page,ctPage) {
      this.page.currentPage = ctPage
      this.type = this.sType = 3

       let params = {
        pageNum: page,
        id: this.groupId
      };

      getGroupById(params).then(res => {
        this.tableData = res.data.pageInfo.list;
        this.page.total = this.totalNumber = Number(res.data.pageInfo.total);
      });
    },
    getStoreMember(page,ctPage) {
      this.page.currentPage = ctPage
       this.type = this.sType = 5
       let params = {
        pageNum: page,
        stallId: this.storeId
      };
      getMemberById(params).then(res => {
        this.tableData = res.data.list;
        this.page.total = Number(res.data.total);
        this.totalNumber = Number(res.data.total)
      });
    },
    synchronismMember() {
      this.isShow = true;
      this.$emit("isShow", this.isShow);
    },
    handleMove() {
      this.moveDialogShow = true;
    },
    handleSingleMove(val) {
      this.moveDialogShow = true;
      this.idList = [val]
    },
    removeFinish() {
      this.handleTypeChange(1,1)
      this.moveDialogShow = false;
    },
    handleCurrentChange(val) {
      let ctPage = val
      this.handleTypeChange(val,ctPage)
    },
    getMailList(page,ctPage) {
      this.tableLoading = true
      this.groupName = ''
      this.formData.keywords = ''
      this.groupName = "全部"
      this.type = this.sType  = 1;
      this.flag = 0
      this.page.currentPage = ctPage
      this.groupId = ''
      let params = {
        pageNum: page
      };
      getAllMemberList(params).then(res => {
        this.tableData = res.data.pageInfo.list;
        this.page.total = this.totalNumber = this.allNumber = Number(res.data.pageInfo.total);
        this.tableLoading = false
      });
    },
    handleShopowner() {},
    getNoGroupMember(page,ctPage) {
      this.groupName = ''
      this.formData.keywords = ''
      this.page.currentPage = ctPage
      this.groupName = "未分组"
       this.flag = 1
      this.type = this.sType = 2;
      this.groupId = ''
      let params = {
        pageNum: page
      };
      getNoGroupMember(params).then(res => {
        console.log(res.data)
        this.tableData = res.data.pageInfo.list;
        this.page.total = this.totalNumber = this.wNumber = Number(res.data.pageInfo.total);
      });
    },
    handleMemberChange(val) {     
      let ids = []
      val.map(function(item) {
        ids.push(item.id)
      });
      this.idList = ids
    },
    handleTypeChange(val,ctPage) {
      if(this.type == 1) {
        this.getMailList(val,ctPage)
      }else if (this.type == 2) {
        this.getNoGroupMember(val,ctPage)
      }else if (this.type == 3) {
        this.getGroupMember(val,ctPage)
      }else if (this.type == 4) {
        this.handleSearch(val,ctPage)
      }
      else {
        this.getStoreMember(val,ctPage)
      }
    },
    handleSearch(page,ctPage) {
      this.type = 4
      this.page.currentPage = ctPage
      switch (this.sType) {
        case 1:
        this.counterId = 0;
        break
        case 2:
        this.counterId = -1;
        break
        case 3:
        this.counterId = this.groupId;
        break
        case 5: 
        this.counterId = this.groupId;
      }
      let params = {
        param: this.formData.keywords,
        departmentId: this.groupId,
        flag: this.flag
      }
      search(params).then(res=>{
        console.log(res,'搜索数据')
        this.tableData = res.data
        // this.page.total = Number(res.data.total);
      })
    },
    setAdmin(user) {
      this.changeRole(1, user.d_id, user.id)
    },
    cancelAdmin(user) {
      this.changeRole(0, user.d_id, user.id)
    },
    changeRole(state, departmentId, id) {
      let params = {
        departmentId,
        flag: state,
        id
      }
      changeRole(params).then(res => {
        if(this.groupId) {
          this.getGroupMember(1,1);
        }else if(this.title === '未分组') {
          this.getNoGroupMember(1,1)
        }else if(this.formData.keywords){
          this.handleSearch(1,1)
        }else {
          this.getOrgTree();
          this.getMailList(1,1);
        }
        
      })
    },
    addChild() {
      this.addDialogShow = true
    },
    editChild() {
      this.editDialogShow = true
    },
    addFinish() {
      this.addDialogShow = false
      // this.orgLoading = true      
      this.getOrgTree();
      this.getMailList(1,1);
      this.$message.success('添加成功')
    },
    editFinish() {
      this.editDialogShow = false
      // this.orgLoading = true 
      this.getOrgTree()
      this.getMailList(1,1)
      this.$message.success('编辑成功')
    },
    deleteChild() {
      this.deleteDialogShow = true
    },
    deleteFinish() {
      this.deleteDialogShow = false
      // this.orgLoading = true 
      this.getOrgTree();
      this.getMailList(1,1)
      this.$message.success('删除成功')
    }
  }
};
</script>
<style >
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d0d0d0 !important;
  }
</style>
<style scoped>
.trees >>> .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #d0d0d0 !important;
}
.lines {
  height: 55px;
  align-items: center;
  background-color: rgba(201, 201, 201, 1);
}
.trees >>> .el-tree-node__content {
  padding: 5px;
  /*border-bottom: 1px solid #fff;*/
}
.btn >>> .el-button + .el-button {
  margin-left: 5px;
}
.mail {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.run {
  height: 34px;
  width: 100%;
  position: relative;
}
.top {
  padding-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.changeName {
  display: flex;
  align-items: center;
}
.changeName >>> .el-input {
  width: 70%;
}
.end {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
}
.add-l,
.add-r {
  width: 50%;
  height: 32px;
  border: 1px solid rgba(78, 89, 199, 1);
  width: 100%;
  text-align: center;
  line-height: 32px;
}
.add-l {
  background-color: #e8e9fe;
  color: rgba(78, 89, 199, 1);
}
.add-r {
  background-color: #4e59c7;
  color: #fff;
}
.ty {
  height: 40px;
  background: rgba(248, 248, 248, 1);
  border-radius: 26px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  justify-content: space-between;
  cursor: pointer;
}
.bottom {
  padding: 12px;
  margin-bottom: 20px;
}
.title {
  height: 48px;
  background: rgba(78, 89, 199, 1);
  line-height: 48px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.ct {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f8;
  min-height: 100%;
}
.left {
  position: relative;
  width: 20%;
  overflow: auto;
  flex-direction: column;
  justify-content: space-between;
}
.right {
  position: relative;
  padding: 10px;
  margin-left: 10px;
  width: 79%;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px 0px #ddd;
}

.number {
  font-size: 16px;
  font-weight: bold;
}
.icon {
  /* display: inline-block; */
  width: 16px;
  height: 16px;
}

.main {
  /* // border: 2px solid orange; */
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.lists {
  height: auto;
  min-height: 70%;
  width: 100%;
  margin-top: 20px;
}

.listButtonRed {
  /* // border: 2px solid green; */
  color: red;
}
.pages {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.fy {
  height: 35px;
}
.tree {
  border-radius: 10px;
  background: #f8f8f8;
}
.tree >>> .el-tree {
  background: transparent;
}
.el-icon-delete {
  color: rgba(208, 2, 27, 1);
}
.el-icon-delete,
.el-icon-edit {
  font-weight: bold;
}
.setAdmin {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.cancelAdmin {
  color: #aaa;
  text-decoration: underline;
  cursor: pointer;
}
.button_group {
    height: 32px;
    background-color: #e8e9fe;
    color: #4e59c7;
    border: 1px solid #4e59c7;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 4px;
}
</style>