分析检索/人员管理接口联调

hanbaoshan

2021-01-13 e6758ef29bd686e894b4679edf1bd88436b84148

 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue

@@ -1,12 +1,20 @@
<template>
  <div class="member-manage">
    <div class="left">
      <div>
        <el-input placeholder="请输入" v-model="treeWord">
      <div style="margin-bottom:10px;">
        <el-input placeholder="请输入" v-model="treeWord" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-tree :data="treeData" node-key="id" default-expand-all></el-tree>
      <el-tree
        :data="treeData"
        node-key="id"
        default-expand-all
        @node-click="checkNode"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :highlight-current="true"
      ></el-tree>
      <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
        <ul>
          <li>创建同级节点</li>
@@ -32,33 +40,58 @@
      <div class="table-area">
        <div class="actions">
          <el-button type="primary" size="small" @click="addMember">添加人员</el-button>
          <el-button type="primary" size="small" @click="toggleOrganize">换组织</el-button>
          <el-button
            type="primary"
            :disabled="multipleTableSelection.length<1"
            size="small"
            @click="toggleOrganize"
          >换组织</el-button>
          <el-button type="primary" size="small" @click="batchImport">批量导入</el-button>
          <el-button type="primary" size="small" @click="uploadPic">上传照片</el-button>
          <!-- <el-button type="primary" size="small" @click="uploadPic">上传照片</el-button> -->
        </div>
        <el-table class="thbg" :data="tableData" fit ref="elTable">
        <el-table
          class="thbg"
          :data="tableData"
          fit
          ref="elTable"
          @selection-change="tableSelection"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="姓名" prop="name" sortable>
          <el-table-column label="姓名" prop="Name" sortable>
            <template slot-scope="scope">
              <div style="cursor:pointer;">{{scope.row.name}}</div>
              <div style="cursor:pointer;">{{scope.row.Name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="照片" prop="picture">
            <template>
              <div></div>
          <el-table-column label="照片" prop="Surface">
            <template slot-scope="scope">
              <div class="table-cell-pic">
                <img :src="`${CLIP}${scope.row.Surface}`" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="gender"></el-table-column>
          <el-table-column label="所属组织" prop="organization"></el-table-column>
          <el-table-column label="工号" prop="no"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="用户权限" prop="userpermission"></el-table-column>
          <el-table-column label="转储权限" prop="transferpermission"></el-table-column>
          <el-table-column label="操作">
            <template>
          <el-table-column label="性别" prop="Sex"></el-table-column>
          <el-table-column label="所属组织" prop="Org"></el-table-column>
          <el-table-column label="工号" prop="WorkID"></el-table-column>
          <el-table-column label="手机号" prop="Tel"></el-table-column>
          <el-table-column label="用户权限" prop="userpermission">
            <template slot-scope="scope">
              <div>
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
                <el-switch v-model="scope.row.UserPermissions" @change="memberUpdate(scope.row)"></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="转储权限" prop="transferpermission">
            <template slot-scope="scope">
              <div>
                <el-switch v-model="scope.row.DumpPermissions" @change="memberUpdate(scope.row)"></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <i class="el-icon-edit" @click="editMember(scope.row)"></i>
                <i class="el-icon-delete" @click="delMember(scope.row)"></i>
              </div>
            </template>
          </el-table-column>
@@ -79,41 +112,41 @@
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :http-request="uploadMemberPic"
              :http-request="uploadMemberPicture"
            >
              <img
                v-if="memberEditForm.memberPicUrl"
                :src="memberEditForm.memberPicUrl"
                v-if="memberEditForm.Surface"
                :src="`/httpImage/`+memberEditForm.Surface"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="工号:" prop="no">
            <el-input v-model="memberEditForm.no" size="mini"></el-input>
          <el-form-item label="工号:" prop="WorkID">
            <el-input v-model="memberEditForm.WorkID" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="照片标识:">
            <el-input v-model="memberEditForm.figure" size="mini"></el-input>
            <el-input v-model="memberEditForm.SurfaceName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="memberEditForm.name" size="mini"></el-input>
            <el-input v-model="memberEditForm.Name" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="用户名:">
            <el-input v-model="memberEditForm.UserName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-radio v-model="memberEditForm.gender" label="1">女</el-radio>
            <el-radio v-model="memberEditForm.gender" label="2">男</el-radio>
            <el-radio v-model="memberEditForm.Sex" label="女">女</el-radio>
            <el-radio v-model="memberEditForm.Sex" label="男">男</el-radio>
          </el-form-item>
          <el-form-item label="身份证号:">
            <el-input v-model="memberEditForm.idCard" size="mini"></el-input>
            <el-input v-model="memberEditForm.OwnerID" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="memberEditForm.phone" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="其他:">
            <el-input v-model="memberEditForm.other" size="mini"></el-input>
            <el-input v-model="memberEditForm.Tel" size="mini"></el-input>
          </el-form-item>
          <div class="btns">
            <el-button size="small">取消</el-button>
            <el-button size="small" type="primary">保存</el-button>
            <el-button size="small" @click="memberEditDialogVisible=false">取消</el-button>
            <el-button size="small" type="primary" @click="memberSave">保存</el-button>
          </div>
        </el-form>
      </div>
@@ -126,18 +159,22 @@
      @close="toggleOrganizeDialogVisible=false"
    >
      <div class="text-left">
        <div class="flex-box">
          <label>人员:</label>
          <span>lisi</span>
        </div>
        <el-input v-model="organizeKeyword" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
          <el-button slot="append" icon="el-icon-search" @clcik="getOrganizeTreeData"></el-button>
        </el-input>
        <div>默认组织</div>
        <el-tree :data="organizeData" node-key="id" default-expand-all></el-tree>
        <el-tree
          :data="organizeData"
          node-key="id"
          default-expand-all
          @node-click="checkOrgNode"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :highlight-current="true"
        ></el-tree>
        <div slot="footer" class="btns">
          <el-button size="small">取消</el-button>
          <el-button size="small" type="primary">确定</el-button>
          <el-button size="small" @click="toggleOrganizeDialogVisible=false">取消</el-button>
          <el-button size="small" type="primary" @click="updateOrg">确定</el-button>
        </div>
      </div>
    </el-dialog>
@@ -175,6 +212,15 @@
          <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>
@@ -182,21 +228,30 @@

<script>

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

export default {
  data () {
    return {
      CLIP: 'http://192.168.20.113/',
      treeWord: '',
      treeData: [],
      showMenu: false,
      deptId: '',
      menuTop: 0,
      menuLeft: 0,
      keyword: '',
      gender: '',
      genders: [{ name: '男', id: 'g0' }, { name: '女', id: 'g1' }],
      tableData: [],
      multipleTableSelection: [],
      PageIndex: 1,
      pageSizes: [2, 8, 12, 24],
      tableTotal: 0,
      PageSize: 8,
      organizeData: [],
      checkedOrg: '',
      organizeKeyword: '',
      memberEditDialogVisible: false,
      toggleOrganizeDialogVisible: false,
      batchImportDialogVisible: false,
@@ -209,9 +264,105 @@
  mounted () {
    this.searchLeftTreeData();
    this.getOrganizeTreeData();
    this.renderMemberTable();
  },
  methods: {
    uploadPic(){
    checkOrgNode (a, b, c) {
      this.checkedOrg = a.id
    },
    updateOrg () {
      let ids = this.multipleTableSelection.map(row => {
        return row.ID
      });
      let params = {
        DeptID: this.checkedOrg,
        Users: ids.join(',')
      }
      updateUnit(params).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
          });
          this.toggleOrganizeDialogVisible = false;
          this.renderMemberTable();
        }
      })

    },
    tableSelection (val) {
      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.renderMemberTable();
          }
        })
      }

    },
    delMember (member) {
      member.IsDel = true;
      this.memberUpdate(member);
    },
    editMember (member) {
      debugger
      this.memberEditDialogVisible = true;
      this.memberEditForm = member;
    },
    memberUpdate (member) {
      updateMemberInfo(member).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
          });
          this.renderMemberTable();
        }
      })
    },
    checkNode (a, b, c) {
      if (a.children) {
        this.deptId = a.id;
        this.renderMemberTable();
      }
    },
    handleTableSizeChange (size) {
      this.PageSize = size;
      this.renderMemberTable();
    },
    renderMemberTable () {
      let _this = this;
      let params = {
        DeptID: this.deptId,
        keyword: this.keyword,
        Sex: this.gender,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }
      getMemberList(params).then(res => {

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

    },
    batchImportFiles () {
@@ -229,7 +380,13 @@
    toggleOrganize () {
      this.toggleOrganizeDialogVisible = true;
    },
    uploadMemberPic () { },
    uploadMemberPicture (params) {
      let param = new FormData();
      param.append('file', params.file)
      uploadMemberPic(param).then(res => {
        this.$set(this.memberEditForm,'Surface',res.data)
      })
    },
    openMenuList (t, l, frame) {
      this.showMenu = true;
      this.menuTop = t;
@@ -326,7 +483,7 @@
    height: 178px;
    display: block;
  }
  .batch-upload{
  .batch-upload {
    text-align: left;
    margin: 0 20px 20px 10px;
  }
@@ -374,7 +531,7 @@
    background: rgba(152, 170, 190, 0.7);
  }
  .right {
    padding: 8px 0 0 20px;
    padding-left: 20px;
    .filter-bar {
      display: flex;
      margin-bottom: 20px;
@@ -386,7 +543,11 @@
      .actions {
        text-align: left;
      }
      
      .table-cell-pic {
        img {
          width: 70px;
        }
      }
    }
  }
}