Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi...

lxp

2025-03-12 952a20f1c005d80e9bf881287c40e6f4e4266a0b

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@
<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="[1]" :expand-on-click-node="false"
        :filter-node-method="filterNode" :props="{ children: 'children', label: 'name' }" highlight-current
        node-key="id" style="height:calc(100% - 80px);overflow-y: scroll;scrollbar-width: none;"
        @node-click="handleNodeClick">
        <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 style="width: 10px;"></div>
    <div class="main_right">
      <!-- éƒ¨é—¨ -->
      <Department ref="departRef" :clickNodeVal="clickNodeVal" :currentCompaniesList="currentCompaniesList"
        :departId="departId" :isDepartment="isDepartment" :isShowAll="isShowAll" />
    </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 Department from './Department/index.vue';
import {
  delDepartmentLims,
  addDepartmentLims,
  selectCNSAPersonTree,
} from '@/api/cnas/personnel/personnelInfo.js'

export default {
  components: {
    Department
  },
  data() {
    return {
      isShowAll: true, //  æ˜¯å¦å±•ç¤ºæ ‡ç­¾æ 
      departId: 0,
      list: [],
      addDia: false,
      addOb: {
        name: '',
        fatherId: ''
      },
      search: '',
      clickNodeVal: {},
      addUserForm: {
        name: ''
      },
      currentCompaniesList: [],
      entity: {
        name: '',
        departLimsId: '',
        orderBy: {
          field: 'id',
          order: 'asc'
        }
      },
      overallRecord: '人员列表',
      isDepartment: false,
    };
  },
  mounted() {
    this.geList();
  },
  methods: {
    remove(node, data) {
      this.$confirm("是否删除该层级", "提示", {
        type: "error"
      }).then(() => {
        this.treeLoad = true
        delDepartmentLims({
          id: data.id
        }).then(res => {
          if (res.code == 201) return
          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 => {
        if (res.code === 201) {
          return
        }
        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;
          this.departId = this.list[0].id
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    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>
.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;
}

.node_i {
  color: orange;
  font-size: 18px;
}

.main {
  display: flex;
  padding-top: 10px;
  box-sizing: border-box;
}

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

.main_right {
  width: calc(100% - 240px);
  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;
}

.search {
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 110px);
}
</style>