kd-aiot-frontend-wt/src/views/bpm/documents/documentTemplate/components/file-table-list.vue

<template>
  <div>
    <file-search ref="file-search" @search="reload"></file-search>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(45vh)"
      tool-class="ele-toolbar-form"
      :initLoad="false"
      row-key="id"
      :current.sync="current"
      :selection.sync="selection"
      highlight-current-row
      @selection-change="selectionClick"
      @done="done"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-dropdown trigger="click">
          <el-button type="primary">
            新建<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="
                parenOpen('add', {
                  power: 'add',
                  dataKey: 'parentData',
                  isArr: false
                })
              "
              >新建文件夹</el-dropdown-item
            >
            <el-dropdown-item
              @click.native="
                openEdit('add', '', {
                  power: 'add',
                  dataKey: 'parentData',
                  isArr: false
                })
              "
              >新建文档</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown trigger="click">
          <el-button type="primary">
            编辑<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="
                parenOpen('edit', {
                  power: 'revise',
                  dataKey: 'parentData',
                  isArr: false
                })
              "
              >修改</el-dropdown-item
            >
            <el-dropdown-item
              @click.native="
                parenOpen('del', {
                  power: 'del',
                  dataKey: 'parentData',
                  isArr: false
                })
              "
              >删除</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
  
        <el-button
          :disabled="selection.length == 0"
          type="danger"
          @click.native="batchRemove"
        >
          批量删除
        </el-button>
      </template>

      <template v-slot:code="{ row }">
        <el-link type="primary" :underline="false" @click="openEdit('detail', row, {
                  power: 'detail',
                  dataKey: 'current',
                  isArr: false
                })">{{ row.code }}</el-link>
      </template>

      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="copy(row)">
          复制
        </el-link>
       
        <el-link type="primary" :underline="false" @click="openEdit('edit', row, {
                  power: 'revise',
                  dataKey: 'current',
                  isArr: false
                })">
            编辑
          </el-link>

        <el-link v-if="row.status == 0" type="primary" :underline="false" @click="changeStatus(row.id, 1)">
          启用
        </el-link>

        <el-link v-if="row.status == 1" type="primary" :underline="false" @click="changeStatus(row.id, 0)">
          停用
        </el-link>

        <el-popconfirm
          class="ele-action"
          title="确定要删除吗？"
          @confirm="
            remove(row, {
              power: 'del',
              dataKey: 'current',
              isArr: false
            })
          "
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false"> 删除 </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <copy-dialog ref="copyDialogRef" @done="reload"></copy-dialog>
    <pop-modal
      :visible.sync="delVisible"
      content="是否确定删除？"
      @done="commitBtn"
    />
  </div>
</template>

<script>
  import fileSearch from './file-search.vue';
  import popModal from '@/components/pop-modal';
  import { fileStatus } from '../util.js';
  import copyDialog from './copy-dialog.vue';

  import {
    filePageV1API,
    statusChange,
    deleteDoc,
    batchDeleteDoc
  } from '@/api/documents/doc-manage';
  export default {
    components: {
      fileSearch,
      copyDialog,
      popModal,
    },
    props: {
      // 上级
      parentData: {
        type: Object,
        default: () => {}
      },
      // 文件夹数据
      folderList: {
        type: Array,
        default: () => []
      },
  
      disabledTableList: {
        //已选择列表
        default: () => []
      }
    },

    data() {
      return {
        delVisible: false,
        selection: [],
        processSubmitDialogFlag: false,
        current: {},
        // 表格列配置
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            // selectable: (row, index) => {
            //   return (
            //     !this.disabledTableList
            //       .map((item) => item.id)
            //       .includes(row.id) &&
            //     row.reviewStatus != 1 &&
            //     row.status != 1
            //   );
            // }
          },
          {
            label: '文档位置',
            prop: 'directoryPath',
            width: 180,
            align: 'center',
            fixed: 'left',
            showOverflowTooltip: true,
            // formatter: () => {
            //   // 优先使用fullPath，如果没有则回退到name
            //   return this.parentData?.fullPath || this.parentData?.name || '';
            // }
          },
          {
            label: '编码',
            prop: 'code',
            slot: 'code',
            width: 180,
            align: 'center',
            fixed: 'left',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '范文名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return fileStatus(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 是否显示编辑弹窗
        showEditFlag: false
      };
    },
    computed: {
      seekList() {
        return [
          {
            prop: 'code:',
            label: '范文名称',
            type: 'input'
          },
          {
            prop: 'name',
            label: '创建人:',
            type: 'input'
          }
        ];
      }
    },
    created() {},

    methods: {
      commitBtn() {
        const dataId = this.selection.map((v) => v.id);
        batchDeleteDoc(dataId).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      },
      // 复制
      copy(row) {
        this.$refs.copyDialogRef.open('copy', row, this.folderList);
      },
      // 状态变更
      async changeStatus(id, status) {
        await statusChange({
          id: id,
          status: status
        });
        this.$message.success('操作成功');
        this.reload();
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
          this.current = {};
          return filePageV1API({
            ...where,
            ...order,
            pageNum: page,
            size: limit,
            directoryId: this.parentData?.id,
          });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table &&
          this.$refs.table.reload({ pageNum: 1, where: where });
      },

      selectionClick(data) {
        this.current = data.reverse()[0] || {};
        this.$refs.table.setCurrentRow(this.current);
      },

      /* 显示编辑 */
      openEdit(type, row = '', powerData) {
        const query = {};
        // if (row?.id) {
          query.id = row?.id;
          query.type = type;
          query.treeId = this.parentData?.id;
        // }
        this.$router.push({
          path: '/documents/documentTemplate/file-add',
          query
        });
      },
   
      parenOpen(type, powerData) {
    
        this.$emit('parenOpen', type);
      },

      done() {
        this.$refs.table.reRenderTable();
        this.selection = [];
      },
  
      /* 删除 */
      remove(row, powerData) {
        const loading = this.$loading({ lock: true });
        deleteDoc([row.id])
          .then((msg) => {
            loading.close();
            this.$message.success('操作成功');
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      },

      //移动
      batchRemove() {
        if (this.selection.length == 0) {
          this.$message.warning('请选择一条数据');
          return;
        }
        this.delVisible = true;
      },
      getTableList() {
        return JSON.parse(JSON.stringify(this.selection));
      }
    }
  };
</script>
<style scoped lang="scss">
  :deep(.el-tabs__content) {
    height: calc(100% - 39px);
    overflow: auto;
  }
  :deep(.ele-table-tool-title-content) {
    display: contents;
  }
</style>