lxp
2025-03-12 952a20f1c005d80e9bf881287c40e6f4e4266a0b
src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelList/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,364 @@
<template>
  <div>
    <div class="search-list">
      <span class="search-input">
        <span class="search-label">
          <span style="width: 120px;font-size: 14px;line-height: 32px">人员名称:</span>
          <el-input v-model="entity.name" clearable placeholder="请输入" size="small" style="width: 100%;"
            @keyup.enter.native="refreshTable()">
          </el-input>
        </span>
        <el-button size="small" style="margin-left: 10px" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </span>
      <span>
        <el-button :loading="synchronousLoading" size="small" type="primary" @click="synchronous"
          :v-show="departId">同步第三方人员信息</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button>
        <el-button size="small" type="primary"
          @click="selectUserDia = true, getList(), queryParams.name = '', multipleSelection = []">新建</el-button>
      </span>
    </div>
    <div class="search-table">
      <el-table v-loading="tableLoading" :data="tableData" border height="calc(100vh - 20em)" style="width: 100%;">
        <el-table-column align="center" label="序号" width="60">
          <template v-slot="scope">
            <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span>
          </template>
        </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="groupTime" width="120"></el-table-column>
        <el-table-column label="籍贯" prop="nativePlace" width="120"></el-table-column>
        <el-table-column label="证件号码" prop="identityCard" show-overflow-tooltip width="300"></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 label="紧急联系人" prop="emergencyContact" width="120"></el-table-column>
        <el-table-column label="紧急联系电话" prop="emergencyContactPhone" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="downPerson(scope.row)">下载</el-button>
            <el-button size="small" type="text" @click="$emit('updatePerson', scope.row)">编辑
            </el-button>
            <el-button size="small" type="text" @click="deletePerson(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :current-page.sync="page.current" :page-size="page.size"
        :page-sizes="[10, 20, 30, 50, 100]" :total="page.total" layout="->,total, sizes, prev, pager, next, jumper"
        style="margin-top: 16px" @size-change="handleSizeChange" @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" style="display: flex;">
          <div class="search_label">用户名:</div>
          <div class="search_input">
            <el-input v-model="queryParams.name" clearable placeholder="请输入" size="small"
              @keyup.enter.native="getList()" style="width: 150px;"></el-input>
          </div>
        </div>
      </div>
      <div v-if="selectUserDia" class="body" style="height: 60vh;">
        <lims-table :tableData="personTableData" :column="column" :tableLoading="tableLoading"
          :height="'calc(100vh - 290px)'" :page="personPage" :isSelection="true"
          :handleSelectionChange="handleSelectionChange"></lims-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectUserDia = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="selectUser">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import limsTable from "@/components/Table/lims-table.vue";
import {
  getEmployees,
  basicInformationOfPersonnelSelectPage,
  delUserDepardLimsId,
  upUserDepardLimsId,
  exportPersonBasicInfo,
  exportPersonBasicInfoById,
  selectUserList,
} from '@/api/cnas/personnel/personnelInfo.js'
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 {
      entity: {},
      multipleSelection: [],
      synchronousLoading: false,
      page: {
        size: 20,
        current: 1,
      },
      outLoading: false,
      tableLoading: false,
      tableData: [], // äººå‘˜æ€»åˆ—表数据
      selectUserDia: false, // æ·»åŠ äººå‘˜å¼¹æ¡†,
      stateList: [
        {
          value: 1,
          type: 'success',
          label: '启用'
        },
        {
          value: 0,
          type: 'danger',
          label: '停用'
        }
      ],
      queryParams: {
        name: ''
      },
      personTableData: [],
      column: [
        { label: "姓名", prop: "name" },
        { label: "账号", prop: "account" },
        {
          label: "角色",
          prop: "roleName",
        },
        {
          label: "状态", prop: "state", dataType: "tag",
          formatData: (params) => {
            let index = this.stateList.findIndex(
              (item) => item.value == params
            );
            if (index > -1) {
              return this.stateList[index].label;
            } else {
              return null;
            }
          },
          formatType: (params) => {
            let index = this.stateList.findIndex(
              (item) => item.value == params
            );
            if (index > -1) {
              return this.stateList[index].type;
            } else {
              return null;
            }
          },
        },
        { label: "电话号码", prop: "phone" },
      ],
      personPage: {
        total: 0,
        size: 10,
        current: 0,
      },
      tableLoading: false,
    };
  },
  mounted() {
    this.refreshTable();
  },
  // æ–¹æ³•集合
  methods: {
    synchronous() {
      console.log('departId', this.departId);
      this.$message.warning("正在同步,请稍后...")
      this.synchronousLoading = true
      getEmployees({ departId: this.departId }).then(res => {
        this.synchronousLoading = false
        this.$message.success("同步成功")
      })
    },
    /**
     * @desc èŽ·å–è®¾å¤‡id
     */
    // é‡ç½®
    refresh() {
      this.page = {
        size: 20,
        current: 1,
      };
      this.entity.name = ''
      this.refreshTable();
    },
    // æŸ¥è¯¢äººå‘˜åˆ—表数据
    refreshTable(entity, type) {
      try {
        this.tableLoading = true;
        this.entity.departmentId = this.departId;
        let params = { ...this.page, ...this.entity }
        delete params.total
        basicInformationOfPersonnelSelectPage(params).then(res => {
          this.tableLoading = false;
          if (res.code === 201) {
            return;
          }
          this.page.total = res.data.total;
          this.tableData = res.data.records;
        });
      } catch (e) {
        this.tableLoading = false;
      }
    },
    // åˆ é™¤äººå‘˜
    deletePerson(row) {
      this.$confirm('是否删除当前数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delUserDepardLimsId({ id: row.id }).then(res => {
            if (res.code === 201) {
              return;
            }
            this.$message.success('删除成功');
            this.refreshTable();
          })
            .catch(e => {
              this.$message.error('删除失败');
            });
        })
        .catch(() => {
        });
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.refreshTable();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.refreshTable();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selectUser() {
      if (!this.currentCompaniesList.length > 0) {
        this.$message.warning("请选择部门!")
        return;
      }
      let selects = 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 + ',';
        }
      });
      this.selectUserDia = false;
      upUserDepardLimsId({
        ids: JSON.stringify(ids),
        id: str
      }).then(res => {
        if (res.code === 201) {
          return;
        }
        this.$message.success('添加成功');
        this.refreshTable();
      });
      this.$emit('refreshTree')
    },
    getList() {
      this.tableLoading = true;
      let param = { ...this.queryParams, ...this.personPage };
      delete param.total;
      selectUserList({ ...param })
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 200) {
            this.personTableData = res.data;
          }
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    pagination({ page, limit }) {
      this.personPage.current = page;
      this.personPage.size = limit;
      this.getList();
    },
    handleDown() {
      this.outLoading = true;
      let entity = this.HaveJson(this.entity)
      exportPersonBasicInfo(entity).then(res => {
        this.outLoading = false;
        if (res.code === 201) {
          return;
        }
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '人员信息.xlsx')
      });
    },
    downPerson(row) {
      exportPersonBasicInfoById({ id: row.userId }).then(res => {
        this.$download.saveAs(res.data, res.data)
        this.$message.success('下载成功')
      });
    }
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (newId) {
          this.page.current = 1
          this.refreshTable();
        }
      }
    }
  }
};
</script>
<style scoped>
.search-list {
  padding: 0 16px 16px;
  display: flex;
  justify-content: space-between;
}
.search-table {
  padding: 0 16px;
}
.search-input {
  display: flex;
}
.search-label {
  display: flex;
}
</style>