sifa-admin/src/views/tower/param/place/components/standard-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 === 'standard'">
          <a-space direction="vertical">
            <a-textarea
              :rows="4"
              style="width: 500px"
              :maxlength="200"
              placeholder="请输入检查/保养标准"
              v-model:value="record.standard"
            />
            <a-image :src="record.files" v-if="record.files" :width="80" />
            <a-upload
              v-else
              v-model:file-list="record.file"
              name="file"
              action="https://file.wsdns.cn/api/file/image"
              :headers="{ Authorization: token }"
              @click="onIndex(index)"
              @change="onFile1"
            >
              <a-button>
                <upload-outlined />
                上传附件
              </a-button>
            </a-upload>
          </a-space>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a class="ele-text-danger" @click="remove(record, index)">删除</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { TowerPlaceStandard } from '@/api/tower/param/standard/model';
  import { TOKEN_STORE_NAME } from '@/config/setting';
  import { removeTowerPlaceStandard } from '@/api/tower/param/standard';

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

  interface FileItem {
    uid: string;
    name?: string;
    status?: string;
    response?: Response;
    thumbUrl?: string;
    downloadUrl?: string;
    url: string;
  }

  interface FileInfo {
    file: FileItem;
    fileList: FileItem[];
  }

  // 已添加成员
  const list = ref<any[]>([]);
  // 请求状态
  const loading = ref(false);
  // token
  const token = localStorage.getItem(TOKEN_STORE_NAME);
  const file1 = ref<FileItem[]>();
  const index = ref<number>(0);

  // 列
  const columns = reactive<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 48,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '检查/保养标准',
      dataIndex: 'standard',
      key: 'standard'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 70
    }
  ]);

  /* 添加 */
  const add = () => {
    list.value.push({
      placeId: props.placeId,
      isEdit: true,
      standard: '',
      files: '',
      file: ref<FileItem[]>()
    });
  };

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

  // 保存当前id
  const onIndex = (e) => {
    index.value = e;
  };

  const onFile1 = (info: FileInfo) => {
    let resFileList = [...info.fileList];
    file1.value = resFileList.map((file) => {
      if (file.response) {
        // Component will show file.url as link
        file.url = file.response.url;
        list.value[index.value].files = file.response.url;
      }
      return file;
    });
  };

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

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