kd-aiot-frontend-mes/src/components/addDoc/main.vue

<template>
  <ele-modal
    width="60%"
    :visible.sync="showEditFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    ref="Emodal"
    :maxable="true"
    :resizable="true"
  >
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      tool-class="ele-toolbar-form"
      :needPage="false"
      row-key="id"
    >
      <template v-slot:toolbar v-if="type != 'view'">
        <el-button type="primary" @click="fileEditOpen">本地上传</el-button>
        <el-button type="primary" @click="fileShow = true">
          关联文档库
        </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="browseOpen(row)"
        >
          浏览
        </el-link>

        <el-popconfirm
          v-if="type != 'view'"
          class="ele-action"
          title="确定要删除吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <template v-slot:footer>
      <el-button @click="showEditFlag = false">取消</el-button>
      <el-button type="primary" @click="addFile" v-if="type != 'view'">
        确认
      </el-button>
    </template>
    <fileEdit ref="fileEditRef" @done="done"></fileEdit>
    <ele-modal
      width="80%"
      :visible.sync="fileShow"
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      append-to-body
      :maxable="true"
      :resizable="true"
    >
      <doc_template
        :disabledTableList="tableList"
        ref="doc_templateRef"
      ></doc_template>
      <template v-slot:footer>
        <el-button @click="fileShow = false">取消</el-button>
        <el-button type="primary" @click="addTemplate"> 确认 </el-button>
      </template>
    </ele-modal>
    <browse ref="browseRef"></browse>
  </ele-modal>
</template>

<script>
  import doc_template from './doc_template.vue';
  import fileEdit from './file-edit.vue';
  import browse from './browse.vue';
  import { queryIds } from './api';
  import { setFileUrl } from './util.js';

  export default {
    components: { doc_template, fileEdit, browse },

    data() {
      return {
        fileId: [],
        fileShow: false,
        showEditFlag: false,
        tableList: [],
        type: 'add',
        columns: [
          {
            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: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },

          {
            prop: 'sizeUnit',
            label: '文档大小',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    created() {},

    methods: {
      open(fileId, type) {
        //查看详情:view 新增:add
        this.showEditFlag = true;
        this.fileId = fileId || [];
        if (type) {
          this.type = type;
        }
        this.init();
      },
      fileEditOpen() {
        this.$refs.fileEditRef.open();
      },
      remove(row) {
        this.tableList = this.tableList.filter((item) => item.code != row.code);
        this.fileId = this.tableList.map((item) => item.id);
      },
      async init() {
        if (this.fileId.length > 0) {
          this.tableList = await queryIds({ ids: "'" + this.fileId + "'" });
        } else {
          this.tableList = [];
        }
      },
      done(id) {
        this.fileId.push(...id);
        this.init();
      },
      browseOpen(row) {
        window.open(setFileUrl(row));
      },
      addFile() {
        this.$emit(
          'success',
          this.tableList.map((item) => item.id)
        );
        this.showEditFlag = false;
      },
      addTemplate() {
        let list = this.$refs.doc_templateRef.getTableList();
        this.fileShow = false;
        if (list.length == 0) {
          this.$message.error('请选择一条数据');
          return;
        }
        this.tableList.push(...list);
      }
    }
  };
</script>