kd-aiot-frontend-mes/src/views/batchRecord/components/tables/craftFilesTable.vue

<template>
  <div>
    <seek-page :seekList="seekList" @search="search"></seek-page>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      :cache-key="cacheKeyUrl"
      :needPage="false"
      height="calc(86vh - 230px)"
    >
      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="goToDetail(row)">
          详情
        </el-link>
      </template>
    </ele-pro-table>

    <fileBrowse ref="fileBrowseRef"></fileBrowse>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { batchRecordPage, filePageAPI } from '@/api/produce/workOrder.js';
  import fileBrowse from '@/views/produce/components/picking/fileBrowse.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { fileBrowse },
    props: {
      tableQuery: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            label: '编码',
            prop: 'code',
            width: 180,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'name',
            label: '文档名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },

          {
            prop: 'storagePath',
            label: '文件名称',
            align: 'center',

            showOverflowTooltip: true,
            minWidth: 200,
            formatter: (_row, _column, cellValue) => {
              return cellValue && cellValue[0]?.name;
            }
          },
          {
            prop: 'version',
            label: '版本',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },

          {
            prop: 'createTime',
            label: '创建时间',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            label: '操作',
            columnKey: 'action',
            slot: 'action',
            showOverflowTooltip: true,
            minWidth: 110,
            align: 'center',
            fixed: 'right'
          }
        ],
        cacheKeyUrl: 'mes-259231537-craft-files-table'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '工单编码：',
            value: 'workOrderCode',
            type: 'input',
            placeholder: '请输入'
          }
        ];
      }
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where,
          ...this.tableQuery
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          ...this.tableQuery
        };
        return this.getDataList(body);
      },
      // 查询数据
      async getDataList(body) {
        let data = await batchRecordPage(body);
        const fileIds = data.map((i) => i.fileId);

        if (data.length === 0 || fileIds.length === 0) {
          return data;
        }

        const files = await filePageAPI({ ids: fileIds.join(',') });

        data = data
          .map((item) => {
            const file = files.find((f) => f.id === item.fileId);
            return {
              ...file,
              ...item
            };
          })
          .filter((i) => i.id);

        console.log('data', data);

        return data;
      },
      search(where) {
        this.reload(where);
      },
      goToDetail(row) {
        // 查询文件信息
        this.$refs.fileBrowseRef.setFileUrl(row);
      }
    }
  };
</script>

<style></style>