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

<template>
  <el-dialog v-model="showDialog" class="add-position-dialog" title="岗位职责设置" width="800" destroy-on-close>
    <el-form :model="formData" ref="ruleFormRef" :rules="rules">
      <el-table :data="formData" border v-loading="showLoading">
        <el-table-column align="center" prop="positionLevel" width="200" label="等级" />

        <el-table-column align="center" label="岗位职责名称">
          <template #default="{ row, $index }">
            <el-form-item :prop="`[${$index}].title`" :rules="rules.title">
              <el-input class="position-title" v-model="row.title" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column align="center" width="200" label="操作">
          <template #default="{ $index }">
            <el-button v-if="$index + 1 === formData.length" @click="addRow">添加</el-button>
            <el-button v-if="formData.length > 1" @click="deleteRow($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <template #footer>
      <div v-if="!showLoading" class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
        <el-button @click="showDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

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

  const { curTeam } = storeToRefs(useTeamStore());
  const { setPositionInfo } = useTeamStore();

  const showDialog = ref(false);
  const showLoading = ref(true);
  const formData = ref<PositionType[]>([
    {
      positionLevel: 1,
      title: '',
    },
  ]);
  const ruleFormRef = ref<FormInstance>();
  const rules = ref<FormRules<PositionType>>({
    title: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
  });

  function dialogShow() {
    showDialog.value = true;
  }

  function addRow() {
    formData.value.push({ positionLevel: formData.value.length + 1, title: '' });
  }

  function deleteRow(index: number) {
    formData.value.splice(index, 1);
    formData.value.forEach((row, index) => (row.positionLevel = index + 1));
  }

  async function submitForm() {
    await ruleFormRef.value!.validate((valid) => {
      if (valid) {
        setPositionInfo(formData.value);
        showDialog.value = false;
      }
    });
  }

  watch(
    () => showDialog.value,
    async () => {
      if (showDialog.value && curTeam.value?.teamId) {
        const res = await queryTeamPositionList(curTeam.value.teamId);
        formData.value = res.map((position) => {
          return { id: position.id, positionLevel: position.positionLevel, title: position.title };
        });

        if (!formData.value.length) {
          formData.value.push({
            positionLevel: 1,
            title: '',
          });
        }

        showLoading.value = false;
      } else showLoading.value = true;
    },
  );

  defineExpose({
    dialogShow,
  });
</script>

<style scoped lang="scss"></style>

<style>
  .add-position-dialog {
    min-height: 0;

    .el-table .cell {
      overflow: visible;
    }

    .el-table__row > :nth-child(2) {
      .cell {
        height: 35px;
        margin-top: 2px;
      }
    }
  }
</style>