人员管理,任务管理接口调试,左侧导航图标更新

hanbaoshan

2021-01-15 fb9b3e1f1fcf57d213f6f68c09445e368bb70a4e

 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue

@@ -7,6 +7,7 @@
        </el-input>
      </div>
      <el-tree
        ref="leftTreeNodes"
        :data="treeData"
        node-key="id"
        default-expand-all
@@ -65,7 +66,7 @@
          <el-table-column label="照片" prop="Surface">
            <template slot-scope="scope">
              <div class="table-cell-pic">
                <img :src="`${CLIP}${scope.row.Surface}`" alt />
                <img :src="`/httpImage/${scope.row.Surface}`" alt />
              </div>
            </template>
          </el-table-column>
@@ -102,11 +103,16 @@
      :visible="memberEditDialogVisible"
      class="member-edit-dialog"
      :append-to-body="false"
      title="添加/编辑人员"
      @close="memberEditDialogVisible=false"
    >
      <div slot="title">
        <div class="title">
          <div class="main-title">{{memberEditForm.ID?'编辑人员':'添加人员'}}</div>
          <div class="subtitle">组织结构:{{curLeftTreeNode.label}}</div>
        </div>
      </div>
      <div class="text-center">
        <el-form :model="memberEditForm">
        <el-form :model="memberEditForm" :rules="memberEditFormRule" ref="memberForm">
          <el-form-item>
            <el-upload
              class="avatar-uploader"
@@ -125,16 +131,16 @@
          <el-form-item label="工号:" prop="WorkID">
            <el-input v-model="memberEditForm.WorkID" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="照片标识:">
          <!-- <el-form-item label="照片标识:">
            <el-input v-model="memberEditForm.SurfaceName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
          </el-form-item>-->
          <el-form-item label="姓名:" prop="Name">
            <el-input v-model="memberEditForm.Name" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="用户名:">
          <el-form-item label="用户名:" prop="UserName">
            <el-input v-model="memberEditForm.UserName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
          <el-form-item label="性别:" prop="Sex">
            <el-radio v-model="memberEditForm.Sex" label="女">女</el-radio>
            <el-radio v-model="memberEditForm.Sex" label="男">男</el-radio>
          </el-form-item>
@@ -185,10 +191,20 @@
      title="批量导入"
      @close="batchImportDialogVisible=false"
    >
      <div class="text-left">
      <div>
        <p class="tip">
          *请提前根据文件模板中的要求收集人员信息，在一个文件夹中存放人员照片和EXCEL文件
          (<a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">示例</a>),点击
          <a href="javascript:;">下载模板.excel</a>
          <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt="">
        </p>
        <div class="flex-box">
          <label>上传文件:</label>
          <el-upload
          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger" >点击上传</el-button>
          <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory >
          <!-- <el-button size="mini" type="primary" @click="uploadExeclTrigger" style="margin-left:10px;">点击上传Excel</el-button>
          <input ref="excelInput" @change="importExecl" hidden type="file" accept=".xlsx"> -->
          <!-- <el-upload
            class="upload-demo batch-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
@@ -200,11 +216,7 @@
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
          <p>
            *请按照此模板填写信息，点击下载模板
            <a href="javascript:;">.excel</a>
          </p>
          </el-upload> -->
        </div>
        <el-table class="thbg" :data="batchImportTableData" fit>
          <el-table-column type="index" label="序号"></el-table-column>
@@ -228,14 +240,16 @@

<script>

import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic } from '@/api/shuohuang'
import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory } from '@/api/shuohuang'

export default {
  data () {
    return {
      publicPath: process.env.BASE_URL,
      CLIP: 'http://192.168.20.113/',
      treeWord: '',
      treeData: [],
      curLeftTreeNode: {},
      showMenu: false,
      deptId: '',
      menuTop: 0,
@@ -257,16 +271,24 @@
      batchImportDialogVisible: false,
      fileList: [],
      memberEditForm: {},
      memberEditFormRule: {
        Name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        UserName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
      },
      memberPicUrl: '',
      showDemo: false,
      batchImportTableData: [],
    }
  },
  mounted () {
    this.searchLeftTreeData();
    this.getOrganizeTreeData();
    this.renderMemberTable();
    //this.renderMemberTable();

  },
  methods: {

    checkOrgNode (a, b, c) {
      this.checkedOrg = a.id
    },
@@ -294,29 +316,34 @@
      this.multipleTableSelection = val;
    },
    memberSave () {
      if (this.memberEditForm.ID) {
        updateMemberInfo(this.memberEditForm).then(res => {
          if (res.success) {
            this.$notify({
              type: 'success',
              message: res.msg
            });
            this.memberEditDialogVisible = false;
            this.renderMemberTable();
          }
        })
      }else{
        addMember(this.memberEditForm).then(res=>{
          if(res.success){
            this.$notify({
              type:'success',
              message: res.msg
      this.$refs['memberForm'].validate((valid) => {
        if (valid) {
          if (this.memberEditForm.ID) {
            updateMemberInfo(this.memberEditForm).then(res => {
              if (res.success) {
                this.$notify({
                  type: 'success',
                  message: res.msg
                });
                this.memberEditDialogVisible = false;
                this.renderMemberTable();
              }
            })
            this.renderMemberTable();
          } else {
            addMember(this.memberEditForm).then(res => {
              if (res.success) {
                this.$notify({
                  type: 'success',
                  message: res.msg
                })
                this.renderMemberTable();
              }
            })
          }
        })
      }

        } else {
          return false;
        }
      })
    },
    delMember (member) {
      member.IsDel = true;
@@ -340,6 +367,7 @@
    },
    checkNode (a, b, c) {
      if (a.children) {
        this.curLeftTreeNode = a;
        this.deptId = a.id;
        this.renderMemberTable();
      }
@@ -358,16 +386,29 @@
        PageSize: this.PageSize
      }
      getMemberList(params).then(res => {

        _this.tableData = res.data;
      })
    },
    uploadPic () {

    },
    batchImportFiles () {

    uploadDirectoryTrigger(){
      this.$refs['directoryInput'].click();
    },
    // uploadExeclTrigger(){
    //   this.$refs['excelInput'].click();
    // },
    importDirectory () {
      //this.$refs['directoryInput'].files //文件夹map
      let formData = new FormData;
      formData.append('File',this.$refs['directoryInput'].files)
      uploadDirectory(formData).then(res=>{
        debugger
        
      })
      
    },

    handleRemove () {

    },
@@ -384,7 +425,7 @@
      let param = new FormData();
      param.append('file', params.file)
      uploadMemberPic(param).then(res => {
        this.$set(this.memberEditForm,'Surface',res.data)
        this.$set(this.memberEditForm, 'Surface', res.data)
      })
    },
    openMenuList (t, l, frame) {
@@ -443,11 +484,18 @@
          obj.Status = item.Status;
          obj.children = _this.deepNodeChildren(item);
          return obj
        });
        this.$nextTick(() => {
          _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
          _this.curLeftTreeNode = _this.treeData[0];
          _this.checkNode(_this.treeData[0]);
        })

      })
    },
    addMember () {
      this.memberEditDialogVisible = true;
      this.memberEditForm = {};
    },
    dataSearch () {

@@ -491,6 +539,21 @@
    .el-dialog {
      width: 500px;
      padding: 0 30px;
      .el-dialog__header {
        .title {
          display: flex;
          align-items: flex-end;
          justify-content: center;
          .main-title {
            font-size: 16px;
            padding-right: 10px;
          }
          .subtitle {
            font-size: 14px;
            color: #666;
          }
        }
      }
      .el-form-item {
        .el-form-item__label {
          width: 100px;
@@ -513,6 +576,23 @@
      }
    }
  }
  .batch-import-dialog{
    .el-dialog__body{
      padding: 14px 20px;
    }
    .tip{
      text-align: left;
      margin-bottom: 10px;
      position: relative;
      .tip-demo{
        position: absolute;
        width: 530px;
        z-index: 1000;
        top: -10px;
        left: 20px;
      }
    }
  }
  .menuList {
    background: #fff;
    position: absolute;