treee, 修复tab切换时树的选中状态.添加区域

zhangzengfei

2021-02-04 0175cda6150656bc74b34c6f6c71edd1e1fc653c

 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue

@@ -33,11 +33,12 @@
          <el-option
            v-for="item in genders"
            :key="item.id"
            :value="item.id"
            :value="item.name=='全部'?'':item.name"
            :label="item.name"
          >{{item.name}}</el-option>
        </el-select>
        <el-button type="primary" size="small" @click="renderMemberTable">查询</el-button>
        <el-button type="primary" size="small" @click="resetFilter">重置</el-button>
      </div>
      <div class="table-area">
        <div class="actions">
@@ -98,6 +99,15 @@
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleTableSizeChange"
          @current-change="renderMemberTable"
          :current-page.sync="PageIndex"
          :page-size="PageSize"
          :page-sizes="pageSizes"
          layout="total,sizes, prev, pager, next"
          :total="tableTotal"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
@@ -148,7 +158,7 @@
          <el-form-item label="身份证号:">
            <el-input v-model="memberEditForm.OwnerID" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
          <el-form-item label="手机号:" prop="Tel">
            <el-input v-model="memberEditForm.Tel" size="mini"></el-input>
          </el-form-item>
          <div class="btns">
@@ -196,29 +206,18 @@
        <p class="tip">
          *请提前根据文件模板中的要求收集人员信息，在一个文件夹中存放人员照片和EXCEL文件
          (
          <a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">示例</a>),点击
          <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>
          <label>上传文件夹:</label>
          <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"
            multiple
            :limit="3"
            :http-request="batchImportFiles"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>-->
        </div>
        <el-table class="thbg" :data="batchImportTableData" fit>
          <el-table-column type="index" label="序号"></el-table-column>
@@ -226,15 +225,6 @@
          <el-table-column prop="time" label="上传时间"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleTableSizeChange"
          @current-change="renderMemberTable"
          :current-page.sync="PageIndex"
          :page-size="PageSize"
          :page-sizes="pageSizes"
          layout="total,sizes, prev, pager, next"
          :total="tableTotal"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
@@ -242,8 +232,7 @@

<script>

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

import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile } from '@/api/shuohuang'
export default {
  data () {
    return {
@@ -258,7 +247,7 @@
      menuLeft: 0,
      keyword: '',
      gender: '',
      genders: [{ name: '男', id: 'g0' }, { name: '女', id: 'g1' }],
      genders: [{id:'g3',name:'全部'},{ name: '男', id: 'g0' }, { name: '女', id: 'g1' }],
      tableData: [],
      multipleTableSelection: [],
      PageIndex: 1,
@@ -276,7 +265,8 @@
      memberEditFormRule: {
        Name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        UserName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        Tel: [{ validator: this.isPhone, trigger: 'change' }],
      },
      memberPicUrl: '',
      showDemo: false,
@@ -290,8 +280,21 @@

  },
  methods: {
    resetFilter(){
      this.keyword = '';
      this.gender = '';
      this.renderMemberTable();
    },
    isPhone (rule, value, callback) {
      if (value.trim()) {
        var pattern = /^1[345789]\d{9}$/
        if (pattern.test(value)) {
          return callback()
        }
        return callback(new Error('输入的手机号错误'))
      }
    },
    nodeContextMenu (e, data, node, comp) {
      debugger
      this.showMenu = true;
      this.menuTop = e.pageY;
      this.menuLeft = e.pageX;
@@ -325,8 +328,9 @@
    memberSave () {
      this.$refs['memberForm'].validate((valid) => {
        if (valid) {
          let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm);
          if (this.memberEditForm.ID) {
            updateMemberInfo(this.memberEditForm).then(res => {
            updateMemberInfo(params).then(res => {
              if (res.success) {
                this.$notify({
                  type: 'success',
@@ -334,16 +338,19 @@
                });
                this.memberEditDialogVisible = false;
                this.renderMemberTable();
                this.searchLeftTreeData();
              }
            })
          } else {
            addMember(this.memberEditForm).then(res => {
            addMember(params).then(res => {
              if (res.success) {
                this.$notify({
                  type: 'success',
                  message: res.msg
                })
                this.renderMemberTable();
                this.memberEditDialogVisible = false;
                this.searchLeftTreeData();
              }
            })
          }
@@ -353,11 +360,10 @@
      })
    },
    delMember (member) {
      member.IsDel = true;
      member.IsDel = '1';
      this.memberUpdate(member);
    },
    editMember (member) {
      debugger
      this.memberEditDialogVisible = true;
      this.memberEditForm = member;
    },
@@ -369,11 +375,12 @@
            message: res.msg
          });
          this.renderMemberTable();
          this.searchLeftTreeData();
        }
      })
    },
    checkNode (a, b, c) {
      if (a.children) {
      if (a.hasOwnProperty('children')) {
        this.curLeftTreeNode = a;
        this.deptId = a.id;
        this.renderMemberTable();
@@ -387,13 +394,14 @@
      let _this = this;
      let params = {
        DeptID: this.deptId,
        keyword: this.keyword,
        Keyword: this.keyword,
        Sex: this.gender,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }
      getMemberList(params).then(res => {
        _this.tableData = res.data;
        _this.tableTotal = res.total;
      })
    },
    uploadPic () {
@@ -402,19 +410,18 @@
    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)
      debugger
      // uploadDirectory(formData).then(res=>{
      //   debugger
      for (var file in this.$refs['directoryInput'].files) {
        formData.append('files', this.$refs['directoryInput'].files[file])
      }
      //formData.append('files', this.$refs['directoryInput'].files)

      // })
      uploadDirectory(formData).then(res => {
        debugger

      })
    },

    handleRemove () {
@@ -438,8 +445,10 @@
    },

    deepNodeChildren (node) {
      var arr1 = [];
      var arr2 = [];
      if (node.ChildDept && node.ChildDept.length > 0) {
        return node.ChildDept.map(child => {
        arr1 = node.ChildDept.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
@@ -452,8 +461,9 @@
          }
          return childObj;
        });
      } else if (node.UserLst && node.UserLst.length > 0) {
        return node.UserLst.map(child => {
      }
      if (node.UserLst && node.UserLst.length > 0) {
        arr2 = node.UserLst.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
@@ -461,6 +471,7 @@
          return childObj;
        });
      }
      return arr1.concat(arr2)
    },
    getOrganizeTreeData () {
      let _this = this;
@@ -487,9 +498,13 @@
          return obj
        });
        this.$nextTick(() => {
          _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
          _this.curLeftTreeNode = _this.treeData[0];
          _this.checkNode(_this.treeData[0]);
          if (!Object.keys(_this.curLeftTreeNode).length) {
            _this.curLeftTreeNode = _this.treeData[0];
            _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
          } else {
            _this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode);
          }
          _this.checkNode(_this.curLeftTreeNode);
        })

      })
@@ -557,6 +572,9 @@
        .el-form-item__label {
          width: 100px;
        }
        .el-form-item__error {
          left: 120px;
        }
      }
    }
    .el-input {