td_official/src/views/safety/knowledgeDocument/component/recyclingStation.vue

<template>
  <div class="system-document-container">
    <el-card shadow="hover">
      <div class="system-document-search mb-5">
        <el-form :model="param" ref="queryRef" :inline="true" label-width="100px">
          <el-row>
            <el-col :span="2">
              <el-button
                type="success"
                v-auth="'/zm/api/v1/system/document/templateRecycleBin'"
                :disabled="multiple"
                @click="onRecyclingStation(null, true)"
              >
                <el-icon><RefreshRight /></el-icon>批量恢复
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button
                type="danger"
                v-auth="'/zm/api/v1/system/document/templateRecycleBin'"
                :disabled="multiple"
                @click="onRecyclingStation(null, false)"
              >
                <el-icon><DeleteFilled /></el-icon>批量删除
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" min-width="30px" />
        <el-table-column label="文件名称" align="center" prop="fileName" min-width="100px" />
        <el-table-column label="文件路径" align="center" min-width="100px">
          <template #default="scope">
            <span>{{ filterfilenPath(scope.row.filePath) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="删除时间" align="center" prop="createTime" min-width="100px" />
        <el-table-column label="操作" align="center" class-name="small-padding" min-width="80px" fixed="right">
          <template #default="scope">
            <div>
              <el-button type="success" v-auth="'/zm/api/v1/system/document/templateRecycleBin'" link @click="onRecyclingStation(scope.row, true)">
                <el-icon><RefreshRight /></el-icon>恢复
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="param.pageNum" v-model:limit="param.pageSize" @pagination="getDocumentDataList" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import { documentDataAllList, templateRecycleBin, dataRecyclingStation } from '@/api/safety/knowledgeDocument';
import { useUserStoreHook } from '@/store/modules/user';

const proxy = getCurrentInstance()?.proxy as any;
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);

const loading = ref(false);
const queryRef = ref();
const multiple = ref(true);

const ids = ref<string>('');
const tableData = ref<any[]>([]);
const param = reactive({
  type: 2,
  projectId: currentProject.value.id,
  pageNum: 1,
  pageSize: 10
});
const total = ref(0);
const value = ref('2');

const getDocumentDataList = () => {
  loading.value = true;
  tableData.value = [];
  value.value = '2';
  documentDataAllList(param).then((res: any) => {
    tableData.value = res.rows ?? [];
    total.value = res.total;
    loading.value = false;
  });
};

const handleSelectionChange = (selection: any[]) => {
  ids.value = selection.map((item) => item.id).join(',');
  multiple.value = !selection.length;
};

const onRecyclingStation = (row: any, flag: boolean) => {
  let type = 2;
  let selectedIds: string = '';
  let title = '删除';
  let msg = '你确定要删除所选文件或文件夹？';

  if (row) {
    selectedIds = row.id;
  } else {
    selectedIds = ids.value;
  }

  if (flag) {
    type = 1;
    title = '恢复';
    msg = '你确定要恢复所选文件或文件夹？';
  }
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const loadingInstance = ElLoading.service({
        lock: true,
        text: `正在${title}中……`,
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (flag) {
        dataRecyclingStation(selectedIds).then((res) => {
          loadingInstance.close();
          if (res.code == 200) {
            getDocumentDataList();
            ElMessage.success('操作成功');
          }
        });
      } else {
        templateRecycleBin(selectedIds).then((res) => {
          loadingInstance.close();
          if (res.code == 200) {
            getDocumentDataList();
            ElMessage.success('操作成功');
          }
        });
      }
    })
    .catch(() => {});
};

const filterfilenPath = (val: string): string => {
  return val.replace(/^.*?知识库\//, '知识库/');
};

defineExpose({
  getDocumentDataList
});
</script>

<style lang="scss" scoped>
.colBlock {
  display: block;
}
.colNone {
  display: none;
}
</style>