Bläddra i källkod

新增出单员管理模块

haizhouwang 2 år sedan
förälder
incheckning
be09dc1d63
1 ändrade filer med 682 tillägg och 0 borttagningar
  1. 682 0
      src/views/PeopleManage/Player/PlayerManage.vue

+ 682 - 0
src/views/PeopleManage/Player/PlayerManage.vue

@@ -0,0 +1,682 @@
+<template>
+    <div>
+      <el-main ref="elMain" style="padding: 0px">
+        <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+          <!-- 左侧树Start -->
+          <SplitArea :size="leftSplitWidth" :minSize="240">
+            <div>
+              <div>
+                <!-- <el-checkbox v-model="containsSubDeptChecked"
+                  >包含下级机构</el-checkbox
+                > -->
+  
+                <kt-button style="
+                    background-color: #ffc000;
+                    border: #ffc000;
+                  " icon="fa fa-plus" label="添加人员" type="primary" perms="sys:agent:add" @click="handleAddButton" />
+              </div>
+              <el-divider></el-divider>
+              <!-- 左侧树形结构 -->
+              <el-tree :data="ztreeNodes" :props="{ children: 'children', label: 'name' }" node-key="id"
+                :default-expanded-keys="['9']" @node-click="onZTreeClick"></el-tree>
+            </div>
+          </SplitArea>
+          <!-- 左侧树End -->
+  
+          <!-- 右侧列表页面Start -->
+          <SplitArea :size="rightSplitWidth">
+            <templateTable :formList="formList" :searchData.sync="queryFrom" :tableConfig="tableConfig" :btnGroup="btnGroup"
+              :data="pageResult" @getList="findPage" @handleSearchList="handleSearchList" :pagination="pageData">
+            </templateTable>
+          </SplitArea>
+          <!-- 右侧列表页面End -->
+        </Split>
+      </el-main>
+  
+      <!-- 新增修改界面 -->
+      <el-dialog :title="dialogTitle" width="60%" :visible.sync="dialogVisible" :close-on-click-modal="false"
+        :before-close="handleDialogBefore" @close="closeDialog" v-dialogDrag>
+        <el-tabs v-model="activeName"  :before-leave="beforeTabLeave" >
+          <el-tab-pane label="基本信息" name="1">
+            <el-form :model="formData" :rules="formDataRules" ref="formData" :inline="true" @keyup.enter.native="nextStep()"
+              label-width="130px" size="small">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="机构名称" prop="deptId">
+                    <el-cascader style="width:200px" :options="ztreeNodes" v-model="formData.deptId" clearable
+                    :disabled="dialogTitle == '编辑出单员'"
+                      :show-all-levels="false" :props="{
+                        value: 'id',
+                        label: 'name',
+                        checkStrictly: true,
+                      }" @change="handleChange">
+                    </el-cascader>
+                  </el-form-item></el-col>
+                <el-col :span="8">
+                  <el-form-item label="员工工号" prop="id">
+                    <el-input v-model="formData.id" disabled></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="手机号" prop="mobile">
+                    <el-input v-model="formData.mobile"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="名称" prop="name">
+                    <el-input v-model="formData.name"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item  v-if="dialogPassword" label="密码" prop="word">
+                    <el-input  v-model="formData.password" :class="isShow==true?'disc':'none'" ></el-input>
+                    <i class="el-icon-view icon" @click="isShowFun()"></i>
+                    <!-- <el-input style="width:200px"  v-model="formData.password" autocomplete="new-password"
+                      show-password></el-input> -->
+                      
+                  </el-form-item>
+                </el-col>
+               
+                <el-col :span="8">
+                  <el-form-item label="状态" prop="status">
+                    <el-select style="width:200px" v-model="formData.status" placeholder="请选择">
+                      <el-option v-for="val in user_statusoptions" :label="val.label" :value="val.value"
+                        :key="val.id"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="角色" prop="roleId">
+                    <el-select style="width:200px" v-model="formData.roleId" placeholder="请选择" disabled>
+                      <el-option v-for="val in roles" :label="val.name" :value="val.id + ''" :key="val.id"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="业务员" prop="referrerId">
+                    <el-select style="width:200px" v-model="formData.referrerId" placeholder="请选择">
+                      <el-option v-for="val in recommenderOptions" :label="val.name" :value="val.id"
+                        :key="val.id"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="业务员工号" prop="referrerName">
+                    <el-input  v-model="formData.referrerId" disabled></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+            <div style="text-align: right;">
+                <el-button size="small" type="primary" style="background-color: #ffc000; border: 1px solid #ffc000" @click="closeDialog">取消</el-button>
+                <el-button size="small" type="primary" @click="submitForm">提交</el-button>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+  
+      </el-dialog>
+  
+    </div>
+  </template>
+  
+  <script>
+  import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+  import tree from "@/components/ztree.vue"; // 机构树组件
+  import templateTable from '../../../components/TemplateTable/index.vue'
+  import peopleImage from '@/components/PeopleImage/index.vue'
+  import { validateSfz } from "../../../utils/validate.js";
+  export default {
+    components: {
+      KtButton,
+      tree,
+      templateTable,
+      peopleImage
+    },
+    data() {
+      return {
+        activeName: '1',
+        isShow:true,
+        //56个民族
+        nationalList: [
+          "汉族",
+          "壮族",
+          "满族",
+          "回族",
+          "苗族",
+          "维吾尔族",
+          "土家族",
+          "彝族",
+          "蒙古族",
+          "藏族",
+          "布依族",
+          "侗族",
+          "瑶族",
+          "朝鲜族",
+          "白族",
+          "哈尼族",
+          "哈萨克族",
+          "黎族",
+          "傣族",
+          "畲族",
+          "傈僳族",
+          "仡佬族",
+          "东乡族",
+          "高山族",
+          "拉祜族",
+          "水族",
+          "佤族",
+          "纳西族",
+          "羌族",
+          "土族",
+          "仫佬族",
+          "锡伯族",
+          "柯尔克孜族",
+          "达斡尔族",
+          "景颇族",
+          "毛南族",
+          "撒拉族",
+          "布朗族",
+          "塔吉克族",
+          "阿昌族",
+          "普米族",
+          "鄂温克族",
+          "怒族",
+          "京族",
+          "基诺族",
+          "德昂族",
+          "保安族",
+          "俄罗斯族",
+          "裕固族",
+          "乌兹别克族",
+          "门巴族",
+          "鄂伦春族",
+          "独龙族",
+          "塔塔尔族",
+          "赫哲族",
+          "珞巴族",
+        ],
+        formList: [
+          {
+            label: "工号",
+            prop: "userId",
+            type: 'input'
+          },
+          {
+            label: "姓名",
+            prop: "name",
+            type: 'input'
+          },
+          {
+            label: "手机号",
+            prop: "mobile",
+            type: 'input'
+          },
+          {
+            label: "状态",
+            prop: "status",
+            type: "select",
+            options: JSON.parse(localStorage.getItem('user_statusoptions'))
+          },
+        ],
+        btnGroup: [{
+          name: 'upload',
+          slot: true
+        },],
+        tableConfig: {
+          columns: [
+            // 数据列
+            { prop: "deptId", label: "部门编码", type: 'text' },
+            {
+              prop: "pdeptName",
+              label: "机构名称", type: 'text',
+            },
+            { prop: "deptName", label: "部门名称", type: 'text', },
+  
+            { prop: "userId", label: "工号", type: 'text', },
+            { prop: "name", label: "姓名", type: 'text', },
+            { prop: "mobile", label: "联系电话", type: 'text', },
+            {
+              prop: "roleId",
+              label: "角色", type: 'text',
+            },
+            {
+              prop: "status",
+              label: "状态", type: 'text',
+            },],
+          loading: true,
+          isPaginationShow: true,
+          isShowIndex: true,
+          optBtns: [
+            {
+              type: 'primary',
+              label: '编辑',
+              icon: "fa fa-edit",
+              click: (row, index) => { return this.handleTableEdit(row) },
+            }
+          ]
+        },
+        recommenderOptions: [],
+        pageData: {
+          pageNum: 1,
+          pageSize: 10,
+          totalSize: 0
+        },
+        deptId: JSON.parse(localStorage.getItem('user_data')).deptId,
+        formData: {
+          roleId: '19',
+        },
+        formDataDetail: {},
+        formDataRulesDetail: {
+          // accountno: [{ required: true, message: "请填写开户账号", trigger: "blur" }],
+          // address: [{ required: true, message: "请填写居住地址", trigger: "blur" }],
+          // bankName: [{ required: true, message: "请填写开户行", trigger: "blur" }],
+          // birthday: [{ required: true, message: "请填写出生日期", trigger: "blur" }],
+          // identity:
+          // [{ required: true, message: "请填写身份证号" },
+          // { validator: validateSfz }], 
+  
+          // koseki: [{ required: true, message: "请填写户籍", trigger: "blur" }],
+          // maritalStatus: [{ required: true, message: "请选择婚姻状况", trigger: "change" }],
+          // nations: [{ required: true, message: "请选择民族", trigger: "change" }],
+        },
+        formDataRules: {
+          deptId: [{ required: true, message: "请选择机构", trigger: "change" }],
+          mobile: [
+            { required: true, message: "请输入手机号", trigger: "blur" },
+            { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
+            {
+              pattern:
+                /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
+              message: "请输入正确的手机号",
+              trigger: "blur",
+            },
+          ],
+          name: [{ required: true, message: "请填写名称", trigger: "blur" }],
+          // password: [{ required: true, message: "请填写密码", trigger: "blur" }],
+          status: [{ required: true, message: "请选择状态", trigger: "change" }],
+          // roleId: [{ required: true, message: "请填写角色", trigger: "blur" }],
+          referrerId:[{ required: true, message: "请选择业务员", trigger: "change" }],
+        },
+        filterObject: {},
+        peopleid: "",
+        peopledeptid: "",
+        /**Split 开始 */
+        leftSplitWidth: 20,
+        rightSplitWidth: 80,
+        ztreeObj: null,
+        ztreeSetting: {
+          check: {
+            enable: false,
+          },
+          data: {
+            simpleData: {
+              enable: true,
+              pIdKey: "parentId",
+            },
+          },
+          view: {
+            showIcon: false,
+          },
+        },
+        ztreeNodes: [],
+        currentTreeNode: null,
+        // 右侧列表查询数据Start
+        queryFrom: {},
+        pageResult: [],
+        containsSubDeptChecked: true, //是否包含下级机构
+        dialogTitle: "",
+        dialogVisible: false, // 新增编辑界面是否显示
+        departmentList: [], // 选中公司的所有部门的集合
+        deptInfo: {}, //选中机构的基本信息
+        sexoptions: JSON.parse(localStorage.getItem('sexOptions')),
+        user_statusoptions: JSON.parse(localStorage.getItem('user_statusoptions')),
+        roles: JSON.parse(localStorage.getItem('find_all')),
+        option: [], //机构列表
+        dialogPassword:true, //密码是否显示
+      };
+    },
+    created() {
+      // this.$api.role.findAll().then((res) => {
+      //   this.roles = res.data
+      // })
+      //获取所有下拉框数据(字典)
+      // this.getDictItems("sex");
+      // this.getDictItems("user_status");
+      this.findLeftTreeData(); // 获取机构树的数据
+      this.findPage()
+    },
+    mounted() {
+      //用像素初始化左边的split的宽度
+      this.changeTreeWidth(240); // 初始化树的宽度
+    },
+    watch: {
+      containsSubDeptChecked() {
+        // 监听是否包含下级
+        // this.pageData.containsSubDept.value = this
+        //   .containsSubDeptChecked
+        //   ? "1"
+        //   : "0";
+        this.findPage();
+      },
+    },
+    methods: {
+      // excel导入
+      carfrontChange(file) {
+        const params = new FormData(); // 声明formData数据类型
+        params.append("file", file.file);
+        params.append("deptId", this.deptId);
+        this.$api.dept.newUserImport(params).then(res => {
+          if (res.code == 200) {
+            this.$message({
+              message: res.msg,
+              type: "success"
+            });
+            this.findPage();
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      },
+      identityChange(iden){
+          let sex = null;
+          let birth = null;
+          let myDate = new Date();
+          let month = myDate.getMonth() + 1;
+          let day = myDate.getDate();
+            sex = iden.substring(16,17);
+            birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14);
+            if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;
+          if(sex%2 === 0)
+            sex = '女';
+          else
+            sex = '男';
+            this.formDataDetail.birthday=birth
+            this.formDataDetail.sex=this.sexoptions.find(val=>sex==val.label).value
+      },
+      // 查询Start
+      queryStaffInfo() {
+        this.findPage();
+      },
+      sexFormatter(row) {
+        // return this.sexoptions[row.sex]
+        // return row.sex+'1'
+        // console.log(val,1)
+        // console.log(val,1)
+      },
+      changeTreeWidth(widthVal) {
+        // 初始化树的宽度
+        this.leftSplitWidth = Math.ceil(
+          (widthVal / this.$refs.elMain.$el.clientWidth) * 100
+        );
+        this.rightSplitWidth = 100 - this.leftSplitWidth;
+      },
+      findLeftTreeData() {
+        this.$api.dept.findDeptTree().then((res) => {
+          this.ztreeNodes = res.data;
+        });
+      },
+      onZTreeClick: function (evt, treeId, treeNode) {
+        // 点击事件
+        this.currentTreeNode = evt;
+        this.deptId = this.currentTreeNode.id;
+        this.pageData.pageNum = 1;
+        this.findPage();
+        // this.formData.deptId = [];
+        // this.platform(treeId);
+      },
+      platform(array) {
+        if (!array.parent) {
+          return;
+        }
+        this.formData.deptId.unshift(array.data.id);
+        this.platform(array.parent);
+      },
+      
+      //联级选择器触发事件
+      handleChange(val) {
+        if (val && val.length !== 0) {
+          this.formData.referrerId = ''
+          this.formData.deptId = val.at(-1);
+          this.$api.user.selectfindByreferrerId({ deptId: this.formData.deptId }).then((res) => {
+            this.recommenderOptions = res.data
+          });
+        }
+      },
+      // 右侧列表的方法Start
+      findPage(data) {
+        this.tableConfig.loading = true;
+        this.$api.user
+          // .findPage({dto,pageNum:this.pageData.pageNum,pageSize:this.pageData.pageSize})
+          .findPage({ ...this.pageData, dto: { ...data, roleId: '19', deptId: this.deptId } })
+          .then((res) => {
+            if (res.code == 200 && res.data.content.length > 0) {
+              res.data.content.forEach(val => {
+                if (val.sex && val.sex !== '' && val.sex !== null ) {
+                  val.sex = this.sexoptions.find(ele => ele.value == val.sex).label
+                }
+                if (val.status && val.status !== '' && val.status !== null) {
+                  val.status = this.user_statusoptions.find(ele => ele.value == val.status).label
+                }
+                if (val.roleId && val.roleId !== '' && val.roleId !== null) {
+                  val.roleId = this.roles.find(ele => ele.id == val.roleId).name
+                }
+              })
+            }
+            this.tableConfig.loading = false;
+            this.pageResult = res.data.content;
+            this.pageData.pageNum = res.data.pageNum;
+            this.pageData.pageSize = res.data.pageSize;
+            this.pageData.totalSize = res.data.totalSize;
+          })
+      },
+      isShowFun(){
+        this.isShow=!this.isShow
+      },
+      handleSearchList(data) {
+        this.findPage(data)
+      },
+      //编辑
+      async handleTableEdit(params) {
+        this.dialogPassword = false
+        this.dataForm = {
+          SFZ_01: "",
+          SFZ_02: "",
+          Z6Z_00: "",
+          LD_00: "",
+          YP_00: "",
+          DX_00: "",
+        };
+        this.activeName = '1'
+        let res = await this.$api.user.getUserDatail(params.userId)
+        if (res.code == 200) {
+          this.$api.user.selectfindByreferrerId({ deptId: res.data.sysUser.deptId }).then((res) => {
+            this.recommenderOptions = res.data
+          });
+          res.data.sysUser.status += ''
+          this.formData = res.data.sysUser
+          this.formData.password = ''
+          this.dialogTitle = "编辑出单员";
+          this.dialogVisible = true;
+        }
+        else {
+          this.$message.error(res.msg);
+        }
+      },
+      // 删除单个人员
+      handleTableDeleteFlag(data) {
+        this.$confirm("确认删除?")
+          .then(() => {
+            this.$api.user.getDeleteBatch([data.row.userId]).then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  message: "删除成功",
+                  type: "success",
+                });
+                this.findPage();
+              }
+              else {
+                this.$message.error(res.msg);
+              }
+            });
+          })
+          .catch(() => { });
+      },
+      //添加人员
+      handleAddButton() {
+        //级联渲染部门列表
+        this.$api.user.selectfindByreferrerId({ deptId: this.deptId }).then((res) => {
+          this.recommenderOptions = res.data
+        });
+        if (this.currentTreeNode == null) {
+          this.$message.info("请选择所属公司或部门");
+          return;
+        }
+        this.dialogPassword = true
+        this.formData = {
+          roleId: '19',
+          status: '',
+          referrerId:'',
+          deptId: this.deptId
+        }
+        this.formDataDetail = {}
+        this.activeName = '1'
+        this.dialogTitle = "新增出单员";
+        this.dialogVisible = true;
+  
+      },
+      // 新增或修改的弹出框Start
+      getDictItems(typeName) {
+        //--数据字典--
+        this.$api.dict
+          .findByLableName(typeName)
+          .then((response) => {
+            this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
+          })
+          .catch((error) => {
+            this[typeName + "options"] = [];
+          });
+      },
+      handleDialogBefore(done) {
+        // 退出对话框之前确认提示
+        this.$confirm("确认关闭?")
+          .then((_) => {
+            done();
+          })
+          .catch((_) => { });
+      },
+      closeDialog() {
+        // 清空数据
+        this.deptInfo = {};
+        this.dialogVisible = false;
+      },
+      // 提交
+      submitForm() {
+        this.$refs.formData.validate((valid) => {
+          if (valid) {
+            this.$confirm("确认提交吗?", "提示", {})
+              .then(() => {
+                if (this.dialogTitle == '新增出单员') {
+                  if(!this.formDataDetail.password){
+                    this.formDataDetail.password=this.formDataDetail.mobile+'@2023'
+                  }
+                  this.$api.user.saveUserInfo({sysUser: this.formData}).then((res) => {
+                    if (res.code == 200) {
+                      this.$message({
+                        message: "保存成功",
+                        type: "success",
+                      });
+                      this.dialogVisible = false;
+                      this.$refs["formData"].resetFields();
+                      this.activeName = '1'
+                      this.findPage();
+                    } else {
+                      this.$message({
+                        message: `保存失败,请重新添加,(${res.msg})`,
+                        type: "error",
+                      });
+                    }
+                  });
+                }
+                else{
+                  this.$api.user.updateUserInfo(this.formData.id,{sysUser: this.formData }).then((res) => {
+                    if (res.code == 200) {
+                      this.$message({
+                        message: "编辑成功",
+                        type: "success",
+                      });
+                      this.dialogVisible = false;
+                      this.$refs["formData"].resetFields();
+                      this.activeName = '1'
+                      this.findPage();
+                    } else {
+                      this.$message({
+                        message: `编辑失败,请重新添加,(${res.msg})`,
+                        type: "error",
+                      });
+                    }
+                  });
+                }
+  
+              })
+          }
+        });
+      },
+      beforeTabLeave(){
+        // let p = new Promise((resolve, reject) => {
+        //   this.$refs.formData.validate(async (valid) => {
+        //     valid ? resolve() : reject();
+        //     if (valid !== resolve()) {
+        //       // this.$message.error("请完善基本信息!");
+        //     }
+          
+        //   });
+        // });
+        // return p;
+      },
+      // 下一步
+       nextStep() {
+        this.$refs.formData.validate((valid) => {
+          if (valid) {
+            this.activeName = '2'
+          }
+        });
+    },
+  }
+  };
+  </script>
+  
+  <style scoped>
+  .el-divider--horizontal {
+    margin: 4px 0;
+  }
+  
+  /* 顶部查询条件样式Start */
+  .queryFrom .el-row {
+    margin: 10px 0px;
+  }
+  
+  .queryFrom .el-form-item {
+    margin-bottom: 0px;
+  
+  }
+  
+  .queryFrom .queryButton .el-form-item__content {
+    margin-left: 0px !important;
+  }
+  .disc{
+    -webkit-text-security:disc;
+    position: relative;
+  }
+  .none{
+    -webkit-text-security:none;
+    position: relative;
+  }
+  .icon{
+    color: #ccc;
+    position: absolute;
+    right: 0;
+    top:10px;
+    text-align: center
+  }
+  </style>
+