feat:联系人管理，基本信息修改

liding

10 天以前 76302992e7bcb60682ee6d3ae9de6619b477b968

feat:联系人管理，基本信息修改

 src/api/cnas/personal/personalList.js

@@ -1,5 +1,29 @@
import request from "@/utils/request";

// 新增联系人
export function addContactPerson(query) {
  return request({
    url: "/personBasicInfo/addContactPerson",
    method: "post",
    data: query,
  });
}
// 更新联系人
export function updateContactPerson(query) {
  return request({
    url: "/personBasicInfo/updateContactPerson",
    method: "post",
    data: query,
  });
}
// 删除联系人
export function deleteContactPerson(query) {
  return request({
    url: "/personBasicInfo/deleteContactPerson",
    method: "delete",
    params: query,
  });
}
// 删除人员明细所在组织架构
export function delUserDepardLimsId(query) {
  return request({

 src/views/CNAS/personnel/personnelInfo/index.vue

@@ -1,326 +1,46 @@
<template>
  <div class="main">
    <div class="main_left">
      <el-row>
        <el-col :span="20">
          <el-input
            v-model="search"
            class="div_left_input"
            clearable
            placeholder="输入关键字进行搜索"
            size="small"
            suffix-icon="el-icon-search"
            @blur="searchFilter"
            @clear="searchFilter"
            @keyup.enter.native="searchFilter"
          ></el-input>
        </el-col>
        <el-col :span="4" style="text-align: center;line-height: 30px; margin-top: 14px">
          <el-button circle icon="el-icon-plus" size="mini" type="primary" @click="handleAdd"></el-button>
        </el-col>
      </el-row>
      <el-tree
        ref="tree"
        :data="list"
        :default-expanded-keys="[22]"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :props="{ children: 'children', label: 'name' }"
        highlight-current
        node-key="id"
        style="height:calc(100% - 70px);overflow-y: scroll;scrollbar-width: none;"
        @node-click="handleNodeClick"
        @node-expand="nodeOpen"
        @node-collapse="nodeClose"
      >
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <el-row style="width: 100%;">
            <el-col :span="22" style="text-align: left;">
              <span><i
                :class="`node_i ${data.children != undefined&&data.children.length>0 ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i>
                {{ data.name }}</span>
            </el-col>
            <el-col v-if="node.level>1 && data.id !== null" :span="2" style="text-align: right;">
              <el-button size="mini" type="text" @click.stop="remove(node, data)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-tree>
    </div>
    <div class="main_right">
    <div class="main_right" style="width: 100%;">
      <el-tabs v-model="activeName" :lazy="true" type="border-card">
        <el-tab-pane label="基本信息" name="基本信息">
          <PersonnelList v-if="activeName === '基本信息' && isShowAll" ref="personnelList" :currentCompaniesList="currentCompaniesList"
                         :departId="departId" @refreshTree="refreshTree"
                         @updatePerson="updatePerson"></PersonnelList>
          <personnelInformation v-if="activeName === '基本信息' && !isShowAll" :clickNodeVal="clickNodeVal"></personnelInformation>
          <PersonnelList v-if="activeName === '基本信息'" ref="personnelList"></PersonnelList>
        </el-tab-pane>
<!--        <el-tab-pane label="培训计划" name="培训计划">-->
<!--          <PersonnelTraining v-if="activeName === '培训计划'" ref="personnelTraining"-->
<!--                             :departId="departId" :isDepartment="isDepartment"></PersonnelTraining>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="岗位职责" name="岗位职责">-->
<!--          <job-responsibilities v-if="activeName === '岗位职责'" ref="jobResponsibilities"-->
<!--                                :departId="departId"-->
<!--                                :isDepartment="isDepartment"></job-responsibilities>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="奖惩记录" name="奖惩记录">-->
<!--          <rewardPunishmentRecord v-if="activeName === '奖惩记录'"-->
<!--                                  :departId="departId" :isDepartment="isDepartment"></rewardPunishmentRecord>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="培训记录" name="培训记录">-->
<!--          <training-record v-if="activeName === '培训记录'" ref="trainingRecord"-->
<!--                           :departId="departId"-->
<!--                           :isDepartment="isDepartment"></training-record>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="任职授权记录" name="任职授权记录">-->
<!--          <Mandate v-if="activeName === '任职授权记录'" ref="manDateRef" :departId="departId" :isDepartment="isDepartment"></Mandate>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="人员能力" name="人员能力">-->
<!--          <personnel-capacity v-if="activeName === '人员能力'" ref="personnelCapacity"-->
<!--                              :departId="departId"-->
<!--                              :isDepartment="isDepartment"></personnel-capacity>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="沟通记录" name="沟通记录">-->
<!--          <Communicate v-if="activeName === '沟通记录'" ref="communicateRef" :departId="departId" :isDepartment="isDepartment"></Communicate>-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </div>
    <el-dialog :visible.sync="addDia" title="架构新增" width="400px">
      <div class="body">
        <el-row style="line-height: 50px;">
          <el-col :span="6" style="text-align: right;">
            <span class="required-span">* </span>架构名称：
          </el-col>
          <el-col :offset="1" :span="16">
            <el-input v-model="addOb.name" clearable placeholder="请输入架构名称" size="small" @keyup.enter.native="addStandardTree"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDia = false">取 消</el-button>
        <el-button type="primary" @click="addStandardTree">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PersonnelList from './tabs/personnel-list.vue'
import personnelInformation from './tabs/personnel-information.vue'
import PersonnelTraining from './tabs/personnelTraining';
import JobResponsibilities from './tabs/job-responsibilities.vue';
import rewardPunishmentRecord from "./tabs/reward-punishment-record.vue";
import TrainingRecord from './tabs/training-record.vue';
import Mandate from './tabs/mandate.vue';
import PersonnelCapacity from './tabs/personnel-capacity.vue';
import Communicate from './tabs/communicate.vue'
import {addDepartmentLims, delDepartmentLims, selectCNSAPersonTree} from "@/api/cnas/personal/personalList";
export default {
  name: 'PersonnelInfo',
  components: {
    PersonnelList, personnelInformation, PersonnelTraining, JobResponsibilities, rewardPunishmentRecord, TrainingRecord, Mandate, PersonnelCapacity, Communicate
    PersonnelList,
  },
  data() {
    return {
      isShowAll: true, //  是否展示标签栏
      activeName: '基本信息',
      departId: 1,
      list: [],
      addDia: false,
      addOb: {
        name: '',
        fatherId: ''
      },
      search: '',
      clickNodeVal: {},
      addUserForm: {
        name: ''
      },
      currentCompaniesList: [],
      entity: {
        name: '',
        departLimsId: '',
        orderBy: {
          field: 'id',
          order: 'asc'
        }
      },
      overallRecord: '人员列表',
      isDepartment: false,
    };
  },
  mounted() {
    this.activeName = this.$route.query.activeName || '基本信息'
    this.geList();
  },
  methods: {
    remove(node, data) {
      this.$confirm("是否删除该层级", "提示", {
        type: "error"
      }).then(() => {
        delDepartmentLims({
          id: data.id
        }).then(res => {
          this.$message.success('已删除')
          this.geList();
        })
      }).catch(e => {})
    },
    addStandardTree() {
      if (this.addOb.name == null || this.addOb.factory == '') {
        this.$message.error('构架名称是必填项')
        return
      }
      addDepartmentLims(this.addOb).then(res => {
        this.$message.success('添加成功')
        this.addDia = false
        this.geList();
        this.addOb.name = ''
        this.addOb.fatherId = ''
      })
    },
    handleAdd() {
      if (this.addOb.fatherId) {
        this.addDia = true;
      } else {
        this.$message.error('请选择一个架构层级')
      }
    },
    // 人员列表编辑
    updatePerson(row) {
      const node = this.findNodeById(this.list, row.name);
      if (node) {
        this.handleNodeClick(node);
      } else {
        this.$message.warning('未找到该人员');
      }
    },
    // 新建人员后刷新树
    refreshTree () {
      this.geList()
    },
    findNodeById(treeData, name) {
      for (let i = 0; i < treeData.length; i++) {
        if (treeData[i].name === name) {
          return treeData[i]; // 找到节点，返回该节点
        }
        if (treeData[i].children && treeData[i].children.length > 0) {
          const foundNode = this.findNodeById(treeData[i].children, name);
          if (foundNode) {
            return foundNode; // 在子节点中找到，返回该节点
          }
        }
      }
      return null; // 没有找到节点，返回null
    },
    searchFilter() {
      this.$refs.tree.filter(this.search);
    },
    // 获取树
    geList() {
      selectCNSAPersonTree().then(res => {
        this.list = res.data;
        if(this.list.length > 0) {
          this.isDepartment = true;
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    nodeClose(data, node, el) {
      $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder');
    },
    nodeOpen(data, node, el) {
      $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened');
    },
    handleNodeClick(val, node, el) {
      //树的值
      this.clickNodeVal = val;
      // 存储父级节点级数
      if (node) {
        this.getNodeParent(node);
        this.clickNodeVal.level = node.level;
        this.clickNodeVal.parent = node.parent.data;
      }
      this.entity.departLimsId = val.id;
      this.addOb.fatherId = val.id;
      // 是否显示设备详情
      this.isShowAll = val.id !== null;
      if (val.id) {    // 如果是实验室
        this.departId = val.id;
        this.isDepartment = true;
      }
      if (val.userId) { // 是人员
        this.departId = val.userId;
        this.isDepartment = false
      }
    },
    getNodeParent(val) {
      if (val.parent != null) {
        this.currentCompaniesList[val.level - 1] = val.data.id;
        this.selectTree += ' - ' + val.label;
        this.getNodeParent(val.parent);
      }
    }
  }
};
</script>

<style scoped>
.node_i {
  color: orange;
  font-size: 18px;
}
.custom-tree-node {
  width: 80%;
  line-height: 32px;
}
.custom-tree-node .el-icon-delete {
  color: #3A7BFA;
  opacity: 0;
  font-size: 15px;
}

.custom-tree-node:hover .el-icon-delete {
  opacity: 1;
}

.main {
  display: flex;
  padding: 15px 0;
}

.main_left {
  background: #ffffff;
  text-align: center;
  height: calc(100vh - 8em);
  width: 270px;
  border-radius: 15px;
}

.main_right {
  width: calc(100% - 288px);
  border-radius: 15px;
}

.div_left_input {
  margin: 15px 0;
  width: 90%;
}

>>> .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: 0 none;
}

>>> .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: black;
}

>>> .el-tabs--border-card > .el-tabs__header {
  border-bottom: none;
}

 src/views/CNAS/personnel/personnelInfo/tabs/personnel-list.vue

@@ -3,7 +3,7 @@
    <div style="display: flex;justify-content: space-between">
      <div style="display: flex;">
        <div style="margin-bottom: 18px;margin-right: 10px;display: flex;align-items: center;line-height: 32px;">
          <span style="width: 88px;font-size: 14px;font-weight: 700;color: #606266;">人员名称</span>
          <span style="width: 88px;font-size: 14px;font-weight: 700;color: #606266;">姓名</span>
          <el-input size="small" placeholder="请输入" clearable v-model="entity.name"
                    @keyup.enter.native="refreshTable"></el-input>
        </div>
@@ -13,8 +13,7 @@
        </div>
      </div>
      <div style="line-height: 30px;">
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button>
        <el-button size="small" type="primary" @click="openSelectUserDia">新建</el-button>
        <el-button size="small" type="primary" @click="openAddDia">新建</el-button>
      </div>
    </div>
    <div class="search-table">
@@ -22,20 +21,13 @@
                :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border
                height="calc(100vh - 21em)" style="width: 100%;">
        <el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
<!--        <el-table-column label="员工编号" prop="account" width="150"></el-table-column>-->
        <el-table-column label="姓名" prop="name" width="120"></el-table-column>
        <el-table-column label="籍贯" prop="nativePlace" width="120"></el-table-column>
        <el-table-column label="证件地址" prop="idAddress" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="手机号" prop="telephone" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="毕业院校" prop="graduatedInstitutions1" width="100"></el-table-column>
        <el-table-column label="所学专业" prop="major1" width="100"></el-table-column>
        <el-table-column label="毕业时间" prop="graduationTime1" width="100"></el-table-column>
        <el-table-column label="最高学历" prop="officialAcademicRedentials" width="100"></el-table-column>
        <el-table-column label="最高学位" prop="highestDegree" width="100"></el-table-column>
        <el-table-column label="职称" prop="professionalTitle" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
        <el-table-column label="姓名" prop="name" min-width="120"></el-table-column>
        <el-table-column label="籍贯" prop="nativePlace" min-width="120"></el-table-column>
        <el-table-column label="证件地址" prop="idAddress" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column label="手机号" prop="telephone" show-overflow-tooltip min-width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="$emit('updatePerson', scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="openEditDia(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="deletePerson(scope.row)" style="color: #f56c6c">删除</el-button>
          </template>
        </el-table-column>
@@ -46,169 +38,142 @@
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="selectUserDia" title="选择用户" width="70%">
      <div class="search" style="margin-bottom: 9px;">
        <div class="search_thing">
          <div class="search_label">用户名：</div>
          <div class="search_input">
            <el-input v-model="addUserTableInfo.name" clearable placeholder="请输入" size="small"
              @change="selectUserList"></el-input>
          </div>
          <el-button size="small" style="margin-left: 10px" type="primary" @click="selectUserList">查询</el-button>
        </div>
      </div>
      <div v-if="selectUserDia" class="body" style="height: 60vh;">
        <lims-table :tableData="tableData1" :column="column1" :isSelection="true" :handleSelectionChange="selectMethod"
          height="520" :tableLoading="tableLoading1"></lims-table>
      </div>
    <el-dialog :title="diaTitle" :visible.sync="addDia" width="450px" @close="resetForm">
      <el-form ref="addForm" :model="form" :rules="formRules" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="nativePlace">
          <el-input v-model="form.nativePlace" placeholder="请输入" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="证件地址" prop="idAddress">
          <el-input v-model="form.idAddress" placeholder="请输入" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="form.telephone" placeholder="请输入" size="small" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectUserDia = false">取 消</el-button>
        <el-button type="primary" @click="selectUser">确 定</el-button>
        <el-button @click="addDia = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectUserCondition } from "@/api/business/inspectionTask";
import limsTable from "@/components/Table/lims-table.vue";
import {
  basicInformationOfPersonnelSelectPage,
  delUserDepardLimsId,
  exportPersonBasicInfo,
  upUserDepardLimsId
  addContactPerson,
  updateContactPerson,
  deleteContactPerson
} from "@/api/cnas/personal/personalList";
import store from "@/store";
import { Message } from "element-ui";

export default {
  name: 'PersonnelList',
  // import 引入的组件需要注入到对象中才能使用
  components: { limsTable },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    },
    currentCompaniesList: {
      type: Array,
      default: []
    }
  },
  data() {
    // 这里存放数据
    return {
      page: {
        size: 20,
        current: 1,
      },
      outLoading: false,
      tableLoading: false,
      tableData: [], // 人员总列表数据
      tableData1: [],
      tableLoading1: false,
      column1: [
        { label: '姓名', prop: 'name' },
        { label: '账号', prop: 'account' },
        { label: '角色', prop: 'roleName' },
        {
          dataType: 'tag',
          label: '状态',
          prop: 'status',
          formatData: (params) => {
            if (params == 0) {
              return '启用'
            } else {
              return ''
            }
          },
          formatType: (params) => {
            if (params == 0) {
              return 'success'
            } else {
              return 'danger'
            }
          }
        },
        { label: '电话号码', prop: 'phone' },
      ],
      page1: {
        total: 0,
        size: 10,
        current: 1
      },
      selectUserDia: false, // 添加人员弹框
      tableData: [],
      entity: {
        name: '',
        orderBy: {
          field: 'id',
          order: 'asc'
        }
      },
      addUserTableInfo: {
        name: null,
        isCustom: 0,
      addDia: false,
      diaTitle: '',
      operationType: '',
      submitLoading: false,
      form: {
        id: null,
        name: '',
        nativePlace: '',
        idAddress: '',
        telephone: '',
      },
      multipleSelection: []
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    this.refreshTable();
  },
  // 方法集合
  methods: {
    /**
     * @desc 获取设备id
     */
    // 重置
    refresh() {
      this.page = {
        size: 20,
        current: 1,
      };
      this.entity.name = ''
      this.page = { size: 20, current: 1 };
      this.entity.name = '';
      this.refreshTable();
    },
    // 查询人员列表数据
    refreshTable() {
      this.tableLoading = true;
      this.entity.departLimsId = this.departId;
      const params = {
        size: this.page.size,
        current: this.page.current,
        departmentId: this.entity.departLimsId,
        name: this.entity.name,
      }
      };
      basicInformationOfPersonnelSelectPage(params).then(res => {
        this.tableLoading = false;
        this.page.total = res.data.total;
        this.tableData = res.data.records;
      }).catch(err => {
        this.tableLoading = false;
      })
      });
    },
    // 删除人员
    openAddDia() {
      this.operationType = 'add';
      this.diaTitle = '新建联系人';
      this.form = { id: null, name: '', nativePlace: '', idAddress: '', telephone: '' };
      this.addDia = true;
    },
    openEditDia(row) {
      this.operationType = 'edit';
      this.diaTitle = '编辑联系人';
      this.form = {
        id: row.id,
        name: row.name,
        nativePlace: row.nativePlace,
        idAddress: row.idAddress,
        telephone: row.telephone,
      };
      this.addDia = true;
    },
    submitForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          const api = this.operationType === 'add' ? addContactPerson : updateContactPerson;
          api(this.form).then(res => {
            this.submitLoading = false;
            if (res.code === 200) {
              this.$message.success(this.operationType === 'add' ? '新增成功' : '修改成功');
              this.addDia = false;
              this.refreshTable();
            }
          }).catch(err => {
            this.submitLoading = false;
          });
        }
      });
    },
    resetForm() {
      this.$refs.addForm && this.$refs.addForm.resetFields();
    },
    deletePerson(row) {
      this.$confirm('是否删除当前数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUserDepardLimsId({ id: row.userId }).then(res => {
        deleteContactPerson({ id: row.id }).then(res => {
          this.$message.success('删除成功');
          this.refreshTable();
          this.$emit('refreshTree')
        }).catch(e => {
          this.$message.error('删除失败');
        });
      }).catch(() => {
      });
      }).catch(() => {});
    },
    handleSizeChange(val) {
      this.page.size = val;
@@ -218,84 +183,9 @@
      this.page.current = val;
      this.refreshTable();
    },
    // 打开新增人员弹框
    openSelectUserDia() {
      this.selectUserDia = true;
      this.selectUserList()
    },
    // 查询新增弹框的人员列表
    selectUserList() {
      this.tableLoading1 = true
      selectUserCondition().then(res => {
        this.tableLoading1 = false
        this.tableData1 = res.data
      }).catch(err => {
        this.tableLoading1 = false
      })
    },
    // 表格选择方法
    selectMethod(val) {
      this.multipleSelection = val
    },
    // 提交需要添加的人员
    selectUser() {
      if (!this.currentCompaniesList.length > 0) {
        this.$message.warning("请选择部门！")
        return;
      }
      let selects = this.HaveJson(this.multipleSelection)
      if (selects.length === 0) {
        this.$message.error('未选择数据');
        return;
      }
      let ids = [];
      selects.forEach(a => {
        ids.push(a.id);
      });
      let str = '';
      this.currentCompaniesList.forEach(a => {
        if (a) {
          str += a + ',';
        }
      });
      upUserDepardLimsId({
        ids: JSON.stringify(ids),
        id: str
      }).then(res => {
        this.selectUserDia = false;
        this.$message.success('添加成功');
        this.refreshTable();
        this.$emit('refreshTree')
      });
    },
    // 导出人员信息
    handleDown() {
      this.outLoading = true;
      let entity = this.HaveJson(this.entity)
      delete entity.orderBy;
      exportPersonBasicInfo({ ...entity }).then(res => {
        this.outLoading = false;
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '人员信息.xlsx')
      })
    },
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (newId) {
          this.page.current = 1
          this.refreshTable();
        }
      }
    }
  }
};
</script>

<style scoped>
.search_thing {
  display: flex;
  align-items: center;
}
</style>