员工分组提交

src/components/administrative/SaleGroupManagement.vue

+<style>
+  .departmentTreeStyleCont {
+    padding-top: 20px;
+    display: flex;
+    height: 100%;
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle {
+    background: #fff;
+    padding: 20px;
+    flex: 0 1 400px;
+    min-height: 800px;
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle>p {
+    font-size: 14px;
+    margin-bottom: 15px;
+    color: #333;
+    font-weight: bold;
+    height: 14px;
+    line-height: 14px;
+    border-left: 3px solid #E95252;
+    text-indent: 20px;
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle .spanIcon {
+    padding-left: 20px;
+    display: none
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content {
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px
+  }
+
+  .TreeSpan img {
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    vertical-align: sub;
+    margin-right: 3px;
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon {
+    display: inline-block
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i {
+    font-size: 14px !important;
+    color: #999;
+    margin-right: 2px;
+  }
+
+  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i:hover {
+    color: #E95252;
+  }
+
+  .departmentTreeStyleCont .departmentTreeLayer>p {
+    font-size: 14px;
+    margin-bottom: 15px;
+    color: #333;
+    font-weight: bold;
+    height: 14px;
+    line-height: 14px;
+    border-left: 3px solid #E95252;
+    text-indent: 20px;
+  }
+
+  .departmentTreeStyleCont .departmentTreeLayer {
+    background: #fff;
+    min-height: 300px;
+    padding: 20px;
+    margin-left: 20px;
+    flex: auto
+  }
+
+  .departmentTreeStyleCont .el-date-editor.el-input,
+  .departmentTreeStyleCont .el-date-editor.el-input__inner {
+    width: auto !important;
+  }
+
+</style>
+<template>
+  <div class="flexOne">
+    <div class="query-box" >
+      <ul>
+       
+        <li>
+          <span><em>分组名称 </em>
+            <el-input v-model='msg.GroupName' @keyup.enter.native="getList" :placeholder="$t('pub.pleaseImport')">
+            </el-input>
+          </span>
+        </li>
+        <li>
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
+            @click="resetPageIndex(),getList()" />
+          <input type="button" @click="outerVisible = true,dialogTitle='新增员工分组信息'" class="normalBtn" :value="$t('pub.addBtn')" />
+        </li>
+      </ul>
+    </div>
+    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading' >
+      <tr>
+        <th width="200">分组名称</th>
+        <th width="200">组长</th>
+        <th>副组长</th>
+        <th>员工</th>
+        <th>{{$t('admin.admin_operate')}}</th>
+      </tr>
+      <tr v-for="(item,index) in DataList">
+        <td>{{item.GroupName}}</td>
+        <td> {{item.BigGroupLeadersNameStr}}</td>
+        <td> {{item.GroupLeadersNameStr}}</td>
+        <td> {{item.EmployeeIdNameStr}}</td>
+        <td>
+          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
+            <el-button type="primary" icon="el-icon-edit" circle
+              @click="outerVisible = true,dialogTitle='修改员工分组信息',updateData(item)"></el-button>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
+            <el-button type="danger" icon="el-icon-delete" @click='deleteSaleGroup(item)' circle>
+            </el-button>
+          </el-tooltip>
+        </td>
+      </tr>
+    </table>
+    <el-pagination  background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
+    </el-pagination>
+    <el-dialog custom-class='w800' :title="dialogTitle" :visible.sync="outerVisible" center
+      :before-close="closeChangeMachie">
+      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
+        <table class="layerNoIcon">
+          <tr>
+            <td>
+              <el-form-item label="分组名称" prop="GroupName">
+                <el-input class='w200' type="text" maxlength='20' v-model="addMsg.GroupName"
+                  :placeholder="$t('pub.pleaseImport')"></el-input>
+              </el-form-item>
+            </td>
+            <td>
+              <el-form-item label="组长" prop="BigGroupLeaders">
+                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.BigGroupLeadersList'
+                  :placeholder="$t('pub.pleaseSel')" multiple>
+                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
+                    :key="item.EmployeeId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </td>
+           
+          </tr>
+          <tr>
+            <td>
+              <el-form-item label="副组长" prop="GroupLeaders">
+                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.GroupLeadersList'
+                  :placeholder="$t('pub.pleaseSel')" multiple>
+                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
+                    :key="item.EmployeeId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </td>
+            <td>
+              <el-form-item label="员工" prop="EmployeeId">
+                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.EmployeeIdList'
+                  :placeholder="$t('pub.pleaseSel')" multiple>
+                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
+                    :key="item.EmployeeId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </td>
+          </tr>
+        </table>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}
+        </button> &nbsp;
+        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+       
+        loading: true,
+        //分页
+        total: 0,
+        pageSize: '',
+        currentPage: 1,
+        //弹窗
+        outerVisible: false,
+        dialogTitle: '',
+        rules: { //表单验证
+         
+          GroupName: [{
+            required: true,
+            message: this.$t('rule.qsrbmmingchen'),
+            trigger: 'blur'
+          }],
+        },
+       
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          GroupName: '',
+        },
+        employeeMsg: {
+          BranchId: '-1',
+          IsLeave: 0
+        },
+        addMsg: {
+          ID: '0',
+          GroupName: '',
+          BigGroupLeadersList: [],
+          GroupLeadersList: [],
+          EmployeeIdList: [],
+        },
+        defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
+        //返回数据
+        DataList: [],
+        employeeList: [],
+        allList: []
+
+      }
+    },
+    mounted() {
+      let userInfo = this.getLocalStorage();
+      this.addMsg.RB_Group_id = userInfo.RB_Group_id; //集团
+   
+      this.getList();
+      this.getEmployee();
+   
+    },
+    filters: {
+  
+    },
+    methods: {
+      getList() { //获取数据
+        this.loading = true
+        this.apipost('admin_get_GetEmployeeSaleGroupListPage', this.msg, res => {
+          if (res.data.resultCode == 1) {
+            this.DataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+            this.loading = false
+          } else {}
+        }, err => {})
+      },
+      updateData(item){
+        this.addMsg.ID=item.ID;
+        this.addMsg.GroupName=item.GroupName;
+        this.addMsg.BigGroupLeadersList=item.BigGroupLeadersList;
+        this.addMsg.GroupLeadersList=item.GroupLeadersList;
+        this.addMsg.EmployeeIdList=item.EmployeeIdList;
+      },
+
+      deleteSaleGroup(item){
+        this.loading = true
+       
+        this.apipost('admin_get_DelEmployeeSaleGroup', {Id:item.ID}, res => {
+          if (res.data.resultCode == 1) {
+            this.$message.error("删除员工分组成功")
+            this.loading = false
+            this.getList()
+          } else { this.$message.error("删除员工分组失败")}
+        }, err => {})
+      },
+      getEmployee() { //员工
+        this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.employeeList = res.data.data;
+          } else {}
+        }, err => {})
+      },
+     
+      submitForm1(addMsg) { //提交创建、修改表单
+        this.$refs[addMsg].validate((valid) => {
+          if (valid) {
+            this.addData()
+          } else {
+            return false;
+          }
+        });
+      },
+      resetForm(formName) { //弹出框取消 初始化谈框内表单
+        this.$refs[formName].resetFields();
+        this.addMsg.ID = 0
+        this.addMsg.BigGroupLeadersList = []
+        this.addMsg.GroupLeadersList = []
+        this.addMsg.EmployeeIdList = []
+        this.addMsg.GroupName = ''
+      },
+      addData() { //新增数据
+        if (((this.addMsg.BigGroupLeadersList.length)+(this.addMsg.GroupLeadersList.length)) ==0) {
+          this.$message.error("组长/副组长不能同时为空")
+          return;
+        }
+        if ((this.addMsg.EmployeeIdList.length) ==0) {
+          this.$message.error("员工不能为空")
+          return;
+        }
+        this.apipost('admin_get_SetEmployeeSaleGroup', this.addMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.$message.success(res.data.message);
+            this.outerVisible = false;
+            this.treeLayerShow = false
+            this.getList()
+            this.resetForm('addMsg');
+
+          } else {
+            this.$message.error(res.data.message)
+          }
+        }, err => {})
+      },
+    
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.currentPage = 1
+      },
+      submitForm(addMsg) { //提交创建、修改表单
+        this.$refs[addMsg].validate((valid) => {
+          if (valid) {
+            this.addData()
+          } else {
+            return false;
+          }
+        });
+      },
+      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
+        done();
+        this.resetForm('addMsg');
+      }
+    }
+  }
+
+</script>

src/router/config.js

@@ -251,6 +251,15 @@ export default {
                 title: '员工管理'
               },
             },
+            {
+              path: '/saleGroupManagement', //员工分组管理
+              name: 'saleGroupManagement',
+              component: resolve => require(['@/components/administrative/SaleGroupManagement'], resolve),
+              meta: {
+                title: '员工管理'
+              },
+            },
+            
             {
               path: '/Temporarystaff', //员工管理
               name: 'Temporarystaff',