sl-sfy-safety/src/views/emergency/organization/team-management/team-info/components/PersonalInfo.vue

<template>
  <div class="person-info-title"> 人员信息 </div>

  <el-button type="primary" @click="showPositionSetting"> 职位设置 </el-button>
  <el-button type="primary" @click="showAddPerson"> 添加人员 </el-button>

  <div class="person-info-table">
    <el-table :data="tableData" border max-height="700">
      <el-table-column prop="date" label="序号">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="岗位职责" />
      <el-table-column prop="realname" label="姓名" />
      <el-table-column prop="staffNo" label="员工号" />
      <el-table-column prop="mobile" label="联系方式" />
      <el-table-column prop="department" label="部门" />
      <el-table-column prop="jobTitle" label="职务" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button class="edit-btn" link type="primary" size="small" @click.prevent="editRow(scope.row)">
            编辑
          </el-button>
          <el-button class="edit-btn" link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <PositionSetting ref="positionSettingRef" />
  <AddPerson ref="addPersonRef" :position-options="positionOptions" />
  <EditPerson ref="editPersonRef" :position-options="positionOptions" :person-info="editPersonInfo" />
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { storeToRefs } from 'pinia';
  import { TeamPersonnelInfoType } from '../../type';
  import PositionSetting from './PositionSetting.vue';
  import useTeamStore from '../../store/userTeam';
  import AddPerson from './AddPerson.vue';
  import EditPerson from './EditPerson.vue';
  import { PositionType, queryTeamPositionList, deleteTeamPersonnel } from '@/api/emergency-organization/teams';

  const { teamAndPersonInfo, loadingTeamInfo } = storeToRefs(useTeamStore());
  const { refreshCurTeamInfo } = useTeamStore();

  const tableData = ref<TeamPersonnelInfoType[]>([]);
  const positionSettingRef = ref<InstanceType<typeof PositionSetting>>();
  const addPersonRef = ref<InstanceType<typeof AddPerson>>();
  const editPersonRef = ref<InstanceType<typeof EditPerson>>();

  const positionOptions = ref<PositionType[]>([]);
  const editPersonInfo = ref({
    id: 0,
    userId: 0,
    positionId: '',
    realname: '',
    staffNo: '',
    mobile: '',
    department: '',
    jobTitle: '',
  });

  async function editRow(row) {
    if (!(await positionIsSet())) return;

    editPersonInfo.value = {
      id: row.id,
      userId: row.userId,
      positionId: row.positionId,
      realname: row.realname,
      staffNo: row.staffNo,
      mobile: row.mobile,
      department: row.department,
      jobTitle: row.jobTitle,
    };

    editPersonRef.value?.dialogShow();
  }

  function deleteRow(row) {
    ElMessageBox.confirm('是否确认删除该人员').then(async () => {
      loadingTeamInfo.value = true;
      await deleteTeamPersonnel(row.id);
      await refreshCurTeamInfo();
      loadingTeamInfo.value = false;
    });
  }

  function showPositionSetting() {
    positionSettingRef.value?.dialogShow();
  }

  async function showAddPerson() {
    if (!(await positionIsSet())) return;

    addPersonRef.value?.dialogShow();
  }

  async function positionIsSet() {
    loadingTeamInfo.value = true;
    positionOptions.value = await queryTeamPositionList(teamAndPersonInfo.value!.teamId);
    loadingTeamInfo.value = false;

    if (positionOptions.value.length === 0) {
      ElMessage({
        message: '请先设置职位',
        type: 'warning',
      });
      return false;
    }

    return true;
  }

  watch(
    () => teamAndPersonInfo.value,
    () => {
      tableData.value = teamAndPersonInfo.value?.personnelList || [];
    },
  );
</script>
<style scoped lang="scss">
  .person-info-title {
    margin-bottom: 16px;
  }
  .person-info-table {
    margin-top: 15px;

    .edit-btn {
      font-size: 14px;
    }
  }
</style>