yxe-admin/src/views/tower/project/components/equipment-list.vue

<template>
  <a-spin :spinning="loading">
    <a-button type="primary" style="margin-bottom: 10px" @click="add">
      <span>添加</span>
    </a-button>
    <a-table
      size="middle"
      row-key="projectOrderId"
      :pagination="false"
      :data-source="list"
      :columns="columns"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'equipmentName'">
          <TowerSelectModel
            v-if="record.isEdit"
            :placeholder="`请选择设备名称`"
            v-model:value="record.equipmentName"
            :index="index"
            @done="chooseEquipmentName"
          />
          <div v-else>{{ record.equipmentName }}</div>
        </template>
        <template v-else-if="column.key === 'equipmentModel'">
          <TowerSelectModel
            v-if="record.isEdit"
            :placeholder="`请选择设备型号`"
            v-model:value="record.equipmentModel"
            @done="chooseEquipmentModel"
          />
          <div v-else>{{ record.equipmentModel }}</div>
        </template>
        <template v-else-if="column.key === 'equipmentNum'">
          <a-input
            v-if="record.isEdit"
            v-model:value="record.equipmentNum"
            placeholder="请输入预定数量"
          />
          <div v-else>{{ record.equipmentNum }}</div>
        </template>
        <template v-else-if="column.key === 'unit'">
          <a-input
            v-if="record.isEdit"
            v-model:value="record.unit"
            placeholder="请输入单位"
          />
          <div v-else>{{ record.unit }}</div>
        </template>
        <template v-else-if="column.key === 'startTime'">
          <a-date-picker
            v-if="record.isEdit"
            placeholder="预计进场时间"
            value-format="YYYY-MM-DD"
            v-model:value="record.startTime"
          />
          <div v-else>{{ record.startTime }}</div>
        </template>
        <template v-else-if="column.key === 'endTime'">
          <a-date-picker
            v-if="record.isEdit"
            placeholder="预计退场时间"
            value-format="YYYY-MM-DD"
            v-model:value="record.endTime"
          />
          <div v-else>{{ record.endTime }}</div>
        </template>
        <template v-else-if="column.key === 'year'">
          <a-input-number
            v-if="record.isEdit"
            v-model:value="record.year"
            placeholder="出厂年限"
          />
          <div v-else>{{ record.year }}</div>
        </template>
        <template v-else-if="column.key === 'documenter'">
          <SelectStaff
            v-if="record.isEdit"
            :placeholder="`对应资料员`"
            :index="index"
            v-model:value="record.documenter"
            @done="chooseDocumenter"
          />
          <div v-else>{{ record.documenter }}</div>
        </template>
        <template v-else-if="column.key === 'comments'">
          <a-input
            v-if="record.isEdit"
            v-model:value="record.comments"
            placeholder="备注"
          />
          <div v-else>{{ record.comments }}</div>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a v-if="record.isEdit" @click="done(record, index)">完成</a>
            <a v-else @click="edit(record, index)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除此记录吗？"
              @confirm="remove(record, index)"
            >
              <a class="ele-text-danger">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import { uuid } from 'ele-admin-pro/es';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { ProjectOrder } from '@/api/tower/project/order/model';
  import { removeProjectOrder } from '@/api/tower/project/order';

  const props = withDefaults(
    defineProps<{
      value?: ProjectOrder[];
      projectId?: number;
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择数据'
    }
  );

  // 已添加成员
  const list = ref<ProjectOrder[]>([]);
  // 请求状态
  const loading = ref(false);

  // 列
  const columns = reactive<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 30,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '设备名称',
      align: 'center',
      dataIndex: 'equipmentName',
      key: 'equipmentName'
    },
    {
      title: '规格型号',
      align: 'center',
      dataIndex: 'equipmentModel',
      key: 'equipmentModel'
    },
    {
      title: '签订数量',
      align: 'center',
      dataIndex: 'equipmentNum',
      key: 'equipmentNum',
      width: 80
    },
    {
      title: '单位',
      align: 'center',
      dataIndex: 'unit',
      key: 'unit',
      width: 60
    },
    {
      title: '预计进场时间',
      align: 'center',
      dataIndex: 'startTime',
      key: 'startTime'
    },
    {
      title: '预计进场时间',
      align: 'center',
      dataIndex: 'endTime',
      key: 'endTime'
    },
    {
      title: '出厂年限',
      align: 'center',
      dataIndex: 'year',
      key: 'year',
      width: 80
    },
    {
      title: '对应资料员',
      align: 'center',
      dataIndex: 'documenter',
      key: 'documenter'
    },
    {
      title: '备注',
      align: 'center',
      dataIndex: 'comments',
      key: 'comments'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 100
    }
  ]);

  /* 添加 */
  const add = () => {
    list.value.push({
      projectId: props.projectId,
      key: uuid(8),
      isEdit: true,
      equipmentNum: 1,
      unit: '台',
      startTime: undefined,
      endTime: undefined,
      year: undefined,
      documenter: undefined,
      comments: undefined
    });
  };

  const chooseEquipmentName = (data) => {
    list.value[data.index].equipmentName = data.name;
    list.value[data.index].equipmentModel = data.model;
    list.value[data.index].year = data.yearLife;
  };

  const chooseEquipmentModel = (data) => {
    list.value[data.index].equipmentName = data.name;
    list.value[data.index].equipmentModel = data.model;
    list.value[data.index].year = data.yearLife;
  };

  const chooseDocumenter = (data) => {
    list.value[data.index].documenter = data.nickname;
  };

  /* 编辑 */
  const edit = (_row: any, index: number) => {
    list.value[index].isEdit = true;
  };

  /* 完成编辑 */
  const done = (_row: any, index: number) => {
    list.value[index].isEdit = false;
  };

  /* 删除 */
  const remove = (_row: any, index: number) => {
    console.log(_row);
    removeProjectOrder(_row.projectOrderId);
    list.value.splice(index, 1);
  };

  watch(
    () => props.value,
    (value) => {
      if (value) {
        list.value = value;
      }
    }
  );
</script>