kd-aiot-frontend-qms/src/components/addDoc/file-table-listTemplate.vue

<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      tool-class="ele-toolbar-form"
      row-key="id"
      :selection.sync="selection"
      :toolbar="false"
    >
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="browseOpen(row)"
        >
          浏览
        </el-link>
      </template>
    </ele-pro-table>
    <browse ref="browseRef"></browse>
  </div>
</template>

<script>
  import { filePageAPI } from './api';
  import browse from './browse.vue';
  import { setFileUrl } from './util.js';

  export default {
    components: { browse },
    props: {
      // 上级
      parentData: {
        type: Object,
        default: () => {}
      },
      lcyStatus: '',
      disabledTableList: {
        //已选择列表
        default: () => []
      }
    },

    data() {
      return {
        selection: [],
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            selectable: (row, index) => {
              return !this.disabledTableList
                .map((item) => item.id)
                .includes(row.id);
            }
          },
          {
            label: '编码',
            prop: 'code',
            width: 180,
            align: 'center',
            fixed: 'left',
            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[0]?.name;
            }
          },
          {
            prop: 'version',
            label: '版本',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'checkOutUserName',
            label: '检出人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'checkOutStatus',
            label: '检出状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return cellValue == 1 ? '已检出' : '';
            }
          },
          {
            prop: 'checkOutTime',
            label: '检出时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            prop: 'updateUserName',
            label: '修改人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },
          {
            prop: 'sizeUnit',
            label: '文档大小',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ]
      };
    },
    created() {},

    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        let params = {
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          directoryId: this.parentData?.id
        };
        if (this.lcyStatus) {
          params.lcyStatus = this.lcyStatus;
        }
        return filePageAPI(params);
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ pageNum: 1, where: where });
      },

      browseOpen(row) {
        window.open(setFileUrl(row));
      },
      getTableList() {
        return JSON.parse(JSON.stringify(this.selection));
      }
    }
  };
</script>