td_official/src/views/safety/documentSafetyMeeting/RecyclingStation/index.vue

<template>
  <div class="system-document-container">
    <el-card shadow="hover">
      <div class="system-document-search mb15">
        <el-form :model="param" ref="queryRef" :inline="true" label-width="100px">
          <el-row>
            <el-col>
              <el-button type="success" v-hasPermi="['project:project:remove']" :disabled="multiple" @click="onRecyclingStation(null)"
                ><el-icon><RefreshRight /></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" prop="fileType" min-width="100px">
          <template #default="scope">
            <span>{{ scope.row.fileType == '1' ? '文件' : '文件夹' }}</span>
          </template> </el-table-column
        ><el-table-column label="文件路径" align="center" min-width="100px">
          <template #default="scope">
            <span>{{ scope.row.filePath }}</span>
          </template>
        </el-table-column>
        <el-table-column label="删除时间" align="center" prop="deletedAt" min-width="100px"> </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding" min-width="100px" fixed="right">
          <template #default="scope">
            <el-button type="success" v-hasPermi="['project:project:remove']" link @click="onRecyclingStation(scope.row)"
              ><el-icon><RefreshRight /></el-icon>恢复</el-button
            >
          </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">
import { toRefs, reactive, ref, defineComponent, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import { useUserStoreHook } from '@/store/modules/user';

// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
import { documentRecycleBinList, completionDataRecyclingStation } from '@/api/safety/documentSafetyMeeting';
export default defineComponent({
  name: 'index',
  setup() {
    const { proxy } = <any>getCurrentInstance();
    const loading = ref(false);
    const queryRef = ref();
    // 非多个禁用
    const multiple = ref(true);
    const state = reactive({
      tableData: [],
      param: {
        type: 2,
        projectId: currentProject.value.id
      },
      total: 0,
      ids: [] //所选择的文件
    });
    // 获取资料删除的列表数据
    const getDocumentDataList = () => {
      loading.value = true;
      documentRecycleBinList(state.param).then((res: any) => {
        let list = res.rows ?? [];
        state.tableData = list;
        console.log('🚀 ~ documentRecycleBinList ~ state.tableData:', state.tableData);

        state.total = res.total;
        loading.value = false;
      });
    };
    // 多选框选中数据
    const handleSelectionChange = (selection) => {
      state.ids = selection.map((item) => item.id);
      multiple.value = !selection.length;
    };
    const onRecyclingStation = (row) => {
      let ids = [];
      if (row) {
        ids = [row.id];
      } else {
        // 批量
        ids = state.ids;
      }
      ElMessageBox.confirm('你确定要恢复所选文件或文件夹？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = ElLoading.service({
            lock: true,
            text: '正在恢复中……',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          completionDataRecyclingStation(ids).then((res) => {
            loading.close();
            if (res.code == 200) {
              getDocumentDataList();
              ElMessage.success('操作成功');
            } else {
              ElMessage.error(res.msg);
            }
          });
        })
        .catch(() => {});
    };
    return {
      proxy,
      multiple,
      loading,
      onRecyclingStation,
      handleSelectionChange,
      getDocumentDataList,
      ...toRefs(state)
    };
  }
});
</script>
<style lang="scss" scoped>
.colBlock {
  display: block;
}
.colNone {
  display: none;
}
</style>