From 77286f9747a37e4a8a8713f1b7f2195652092795 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期一, 09 九月 2024 11:09:38 +0800
Subject: [PATCH] 文件列表新增查看文件块
---
src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue | 84 ++++++++++++-----------------------------
1 files changed, 25 insertions(+), 59 deletions(-)
diff --git a/src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue b/src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue
index 53c6ee9..8cc915d 100644
--- a/src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue
+++ b/src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue
@@ -10,35 +10,23 @@
<span class="text-[24px] text-[#26244c] font-[700]">{{ state.knowledgeInfo.knowledge_title }}</span>
</div>
<div class="set-table-height">
- <div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center">
- <div class="flex-col">
- <el-input
- v-model="knowledgeFileForm.title"
- style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s"
- placeholder="鎼滅储鐭ヨ瘑搴撳悕绉�"
- clearable
- ></el-input>
- <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 鏌ヨ </el-button>
- <el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button>
- </div>
- </div>
<div class="relative transition-[opacity 0.3s]">
<div class="flex flex-wrap gap-[12px] mt-4 box-border">
<div
- class="set_slice"
v-for="(item, index) in displayTableData"
+ class="set_slice"
:key="index"
- @mouseover="mouseOver($event, item)"
+ @mouseover="mouseOver(index)"
@mouseleave="mouseLeave()"
>
- <div class="flex justify-between">
+ <!-- <div class="flex justify-between">
<div class="items-center font-[500] flex">{{ item.title }}</div>
<el-switch v-model="state.isSliceValueTime" class="ml-2" size="small" />
- </div>
- <div class="set_content">{{ item.content }}</div>
- <div :class="{ viewFileClassHover: state.selectSliceID == item.id }">
+ </div> -->
+ <div class="set_content" :class="state.selectSliceID == index ? 'h-[48px]' : 'h-[88px]'">{{ item }}</div>
+ <div :class="{ viewFileClassHover: state.selectSliceID == index }">
<el-button type="primary" link style="color: #0062be" @click="viewSliceFile(item)">{{
- item.id == state.selectSliceID ? '鏌ョ湅璇︽儏' : ''
+ state.selectSliceID == index ? '鏌ョ湅璇︽儏' : ''
}}</el-button>
</div>
</div>
@@ -46,20 +34,12 @@
</div>
</div>
</div>
- <el-dialog v-model="state.isShowSliceDetail" :title="state.knowLedgeDetailForm?.title" width="50%" :before-close="handleClose">
- <el-form :model="state.knowLedgeDetailForm" label-position="right">
- <el-form-item label="鍒囩墖鍐呭">
- <el-input v-model="state.knowLedgeDetailForm.name" />
- </el-form-item>
- <el-form-item label="鍥剧墖">
- <el-input v-model="state.knowLedgeDetailForm.region" />
+ <el-dialog v-model="state.isShowSliceDetail" title="鍒囩墖鍐呭" width="50%" :before-close="handleClose">
+ <el-form v-model="state.knowLedgeDetailForm" label-position="right">
+ <el-form-item>
+ <el-input v-model="state.knowLedgeDetailForm" readonly type="textarea" :rows="10"></el-input>
</el-form-item>
</el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="handleClose">鍙栨秷</el-button>
- </div>
- </template>
</el-dialog>
</div>
</template>
@@ -67,8 +47,8 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
+import { list_knowledge_file_vector } from '/@/api/knowledge/group';
import { useQueryTable } from '/@/hooks/useQueryTable';
-
const router = useRouter();
const route = useRoute();
// 瀹氫箟鍙橀噺鍐呭
@@ -77,7 +57,7 @@
knowledge_title: '鏌ョ湅鏂囦欢',
knowledge_id: '',
} as any,
- knowLedgeDetailForm: {},
+ knowLedgeDetailForm: '',
showKnowledgeForm: false,
knowledgeFile: {},
isSliceValueTime: true,
@@ -92,14 +72,19 @@
state.isShowSliceDetail = false;
};
//#region ====================== 鑾峰彇鍒囨崲鐨勬暟鎹� ======================
-const mouseOver = ($event, row) => {
- state.selectSliceID = row.id;
+const mouseOver = (index) => {
+ state.selectSliceID = index;
};
const mouseLeave = () => {
state.selectSliceID = null;
};
const getSliceFile = async () => {
- const res = 0;
+ const res = await list_knowledge_file_vector({
+ file_id: state.knowledgeInfo.knowledge_id,
+ });
+ if (res.json_ok) {
+ sliceFileData.value = res.values;
+ }
};
const viewSliceFile = (row) => {
state.isShowSliceDetail = true;
@@ -107,26 +92,7 @@
};
//#endregion
//#region ====================== 鎼滅储琛ㄦ牸锛屽琛ㄦ牸鎺掑簭 ======================
-const sliceFileData = ref([
- {
- content:
- 'R SHLMGE for better lifeShimge Pump Industry(Zhejiang) Co.,Ltd Headquarter address: Dayangcheng Industrial Zone, Daxi Town, Wenling City, Zhejiang Province, 317525, China Tel:+86- 576- 86331536/ 86335366/ 86333138Fax:+86- 576- 86335467Email: shichangbu@shimge.com Webite: www.shimge.comSHIMGE PUMP INDUSTRY(ZHEJIANG) CO.,LTD.VISION& MISSIONProvide leading fluid solutions andimprove the quality of life for everyone.////////SHIMGENSGW-Type Standard End Suction Centrifugal PumpNSGW TypeContents01Company Profile03Product Overview05Highlight Features07Type Chart09Standard Parameter Table',
- id: 1,
- title: '鏂囦欢1',
- },
- {
- content:
- 'NSGW pump is used for pumping clean water and liquid with physical and chemical properties similar to water, and is suitable for factories, mines, urban water supply and drainage, air conditioning, fire fighting, and agricultural irrigation. Pumps with the same specifications can have different performance due to the change of different impeller outer diameters(represented by adding A, B, C etc. after the pump model). The pump has simple structure, reliable performance, small size, light weight, good cavitation resistance, low power consumption and convenient use and maintenance. It has a wide',
- id: 2,
- title: '鏂囦欢2',
- },
- {
- content:
- 'good cavitation resistance, low power consumption and convenient use and maintenance. It has a wide range of versatil-ity. The whole series have 60 specifications, but only four types of shafts are used. The shafts, bearings, shaft sleeves, shaft seals and impeller fasteners of the same specification can be interchanged. There are only five types of suspension for the whole series of pumps too.',
- id: 3,
- title: '鏂囦欢3',
- },
-]);
+const sliceFileData = ref([]);
const knowledgeFileForm = ref({
title: '',
});
@@ -134,7 +100,6 @@
displayTableData.value = sliceFileData.value;
});
//#endregion
-
onMounted(() => {
const { id } = route.query;
state.knowledgeInfo.knowledge_id = id;
@@ -163,8 +128,10 @@
display: flex;
justify-content: space-between;
margin-top: 6px;
- padding-top: 8px;
+ height: 44px;
+ padding-top: 4px;
background-color: #fff;
+ -webkit-line-clamp: 2;
}
}
.set_content {
@@ -172,7 +139,6 @@
font-size: 12px;
line-height: 22px;
margin: 6px 0 0;
- min-height: 88px;
-webkit-line-clamp: 4;
display: -webkit-box;
overflow: hidden;
--
Gitblit v1.9.3