sgt_ca_app/src/views/ProjectExtraUser/Index.vue

<template>
  <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="add"
    >添加人员</a-button
  >
  <a-table bordered :data-source="users" :columns="columns">
    <template
      v-for="col in columns.filter(c => c.editable !== false)"
      #[col.dataIndex]="{ text, record }"
      :key="col.id"
    >
      <div v-if="col.options">
        <a-select
          v-if="editableData[record.id]"
          v-model:value="editableData[record.id][col.dataIndex]"
        >
          <a-select-option
            v-for="option in col.options"
            :key="option"
            :value="option.value"
          >
            {{ option.label }}
          </a-select-option>
        </a-select>
        <template v-else>
          {{ col.options.find(p => p.value == text)?.label }}
        </template>
      </div>
      <div v-else>
        <a-input
          v-if="editableData[record.id]"
          :maxlength="100"
          v-model:value="editableData[record.id][col.dataIndex]"
        />
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template #opt="{ record }">
      <div v-if="record.freezed">已冻结</div>
      <div v-else class="editable-row-operations">
        <a-space v-if="editableData[record.id]">
          <a @click="save(record.id)">保存</a>
          <a-popconfirm title="确认取消？" @confirm="cancel(record.id)">
            <a>取消</a>
          </a-popconfirm>
        </a-space>
        <a-space v-else>
          <a @click="edit(record.id)">编辑</a>

          <a-popconfirm title="确认删除？" @confirm="del(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </div>
    </template>
  </a-table>
</template>
<style></style>
<script>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { get, post } from "@/services/http";
import { message } from "ant-design-vue";
import specialty from "@/services/specialty";
const duties = [
  { value: "项目负责人", label: "项目负责人" },
  { value: "专业负责人", label: "专业负责人" },
  { value: "设计人员", label: "设计人员" },
  { value: "校对人员", label: "校对人员" }
];
export default {
  setup() {
    var acceptId = new URL(location.href).searchParams.get("acceptId");
    var idx = 0;
    var users = ref([]);
    var editableData = ref({});
    var columns = [
      {
        title: "姓名",
        dataIndex: "name"
      },
      {
        title: "证件号码",
        dataIndex: "idCard"
      },
      {
        title: "联系电话",
        dataIndex: "phone"
      },
      {
        title: "承担工作",
        dataIndex: "duty",
        options: duties
      },
      {
        title: "从事专业",
        dataIndex: "specialtyId",
        options: specialty
      },
      {
        title: "备注说明",
        dataIndex: "remarks"
      },
      {
        title: "操作",
        dataIndex: "opt",
        editable: false,
        slots: { customRender: "opt" }
      }
    ].map(p => ({ ...p, slots: { customRender: p.dataIndex } }));
    var getUsers = async acceptId => {
      var res = await get("/api2/ProjectExtraUser/GetUsers", { acceptId });
      if (res.errorCode == 0) {
        users.value = res.data;
      }
    };
    onMounted(() => {
      getUsers(acceptId);
    });
    var edit = id => {
      editableData.value[id] = { ...users.value.find(u => u.id === id) };
    };
    var add = () => {
      var id = idx--;
      var user = {
        id,
        acceptId
      };
      users.value.push(user);
      edit(user.id);
    };
    var save = id => {
      if (id < 1) {
        addUser(id);
      } else {
        modifyUser(id);
      }
    };
    var del = id => {
      if (id < 1) {
        users.value = users.value.filter(u => u.id !== id);
      } else {
        deleteUser(id);
      }
    };
    var cancel = id => {
      delete editableData.value[id];
    };
    var addUser = async id => {
      var user = users.value.find(u => u.id == id);
      var param = { ...user, ...editableData.value[id] };
      var res = await post("/api2/projectExtraUser/AddUser", param);
      if (res.errorCode == 0) {
        Object.assign(user, editableData.value[id]);
        user.id = res.data;
        delete editableData.value[id];
      } else {
        message.error(res.errorMsg);
      }
    };
    var modifyUser = async id => {
      var user = users.value.find(u => u.id == id);
      var param = { ...user, ...editableData.value[id] };
      var res = await post("/api2/projectExtraUser/ModifyUser", param);
      if (res.errorCode == 0) {
        Object.assign(user, editableData.value[id]);
        delete editableData.value[id];
      } else {
        message.error(res.errorMsg);
      }
    };
    var deleteUser = async id => {
      var res = await post("/api2/projectExtraUser/DeleteUser", { id });
      if (res.errorCode == 0) {
        users.value = users.value.filter(u => u.id !== id);
      } else {
        message.error(res.errorMsg);
      }
    };
    return {
      users,
      columns,
      editableData,
      edit,
      add,
      save,
      cancel,
      del,
      addUser,
      modifyUser
    };
  }
};
</script>