流程

src/views/design/technicalStandard/component/bookFile.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="book_file">
+    <!-- 添加或修改公司对话框 -->
+    <el-dialog v-model="isShowDialog" width="80vw" custom-class="book_file_loading" :close-on-click-modal="false" :destroy-on-close="true">
+      <template #header>
+        <div>查看资料文件</div>
+      </template>
+      <el-form ref="queryRef" :inline="true" label-width="100px">
+        <el-row>
+          <el-col :span="8" class="colBlock">
+            <el-form-item label="文件名称" prop="fileName">
+              <el-input v-model="formData.fileName" placeholder="请输入文件名称搜索" clearable @keyup.enter.native="getDataFileQuery" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item>
+              <el-button type="primary" @click="getDataFileQuery">
+                <el-icon><Search /></el-icon>搜索
+              </el-button>
+              <el-button @click="resetQuery" type="danger">
+                <el-icon><Refresh /></el-icon>清空
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div class="content">
+        <div class="left_box" :style="treeList.length ? 'width: 70%' : 'width: 100%'">
+          <el-table v-loading="loading" :data="tableData" border height="63vh" :empty-text="emptyText">
+            <el-table-column label="序号" align="center" type="index" width="80px" />
+            <el-table-column label="文件名称" align="center" prop="fileName" min-width="100px" />
+            <el-table-column label="文件类型" align="center" prop="fileSuffix" 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" class-name="small-padding" width="250px" fixed="right">
+              <template #default="scope">
+                <el-button type="success" link @click="onExport(scope.row)">
+                  <el-icon><Download /></el-icon>下载
+                </el-button>
+                <el-button type="primary" link @click="onBook(scope.row)">
+                  <el-icon><View /></el-icon>查看
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination :total="total" v-model:page="formData.pageNum" v-model:limit="formData.pageSize" @pagination="getDataFileQuery" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { listKnowledgeDocument } from '@/api/design/technicalStandard';
+import { useUserStoreHook } from '@/store/modules/user';
+
+const emit = defineEmits(['onExport', 'onExportView', 'onBook']);
+const stores = useUserStoreHook();
+const loading = ref(false);
+const tableData = ref<any[]>([]);
+const isShowDialog = ref(false);
+const formData = reactive({
+  fileName: '',
+  projectId: stores.selectedProject.id,
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const emptyText = ref('暂无数据');
+const treeList = ref<any[]>([]);
+
+const openDialog = () => {
+  isShowDialog.value = true;
+  getDataFileQuery();
+  emptyText.value = '请输入文件名称进行搜索！';
+  resetForm();
+};
+
+const resetForm = () => {
+  tableData.value = [];
+  formData.fileName = '';
+  treeList.value = [];
+  emptyText.value = '暂无数据';
+};
+
+const getDataFileQuery = () => {
+  loading.value = true;
+  emptyText.value = '数据加载中……';
+  listKnowledgeDocument(formData).then((res: any) => {
+    loading.value = false;
+    tableData.value = [];
+    if (res.code == 200 && res.rows?.length) {
+      tableData.value = res.rows;
+      total.value = res.total;
+    } else {
+      emptyText.value = '没有查询到数据，请重新输入搜索';
+    }
+  });
+};
+
+const onBook = (row: any) => {
+  emit('onBook', row);
+};
+
+const onExport = (row: any) => {
+  emit('onExportView', row);
+};
+
+const resetQuery = () => {
+  tableData.value = [];
+  formData.fileName = '';
+  loading.value = false;
+  emptyText.value = '暂无数据';
+};
+
+const filterfilenPath = (val: string): string => {
+  return val.replace(/^.*?知识库\//, '知识库/');
+};
+
+defineExpose({ openDialog });
+</script>
+
+<style scoped lang="scss">
+.book_file {
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+</style>