|
|
@@ -1,56 +1,73 @@
|
|
|
<template>
|
|
|
<div
|
|
|
- class="grid grid-cols-2 gap-4 rounded-lg bg-[var(--czr-dialog-bg)] p-4"
|
|
|
- v-loading="state.loading"
|
|
|
+ class="flex flex-col rounded-lg bg-[var(--czr-dialog-bg)] p-4"
|
|
|
+ v-loading="state.query.loading"
|
|
|
>
|
|
|
- <template v-for="item in state.list">
|
|
|
- <div
|
|
|
- class="__hover relative col-span-1 flex flex-col overflow-hidden rounded-lg border-1 border-[#E6E8EA] px-6 py-4"
|
|
|
- :class="{
|
|
|
- active: state.selectedMap.has(item.id),
|
|
|
- 'border-[var(--czr-main-color)]': state.selectedMap.has(item.id),
|
|
|
- }"
|
|
|
- @click="onSelect(item)"
|
|
|
- >
|
|
|
- <div class="flex">
|
|
|
- <img
|
|
|
- src="@/assets/images/knowledge/knowledge-item-icon-2.png"
|
|
|
- class="mr-2.5 h-11 w-11"
|
|
|
- />
|
|
|
- <div class="flex flex-1 flex-col justify-around overflow-hidden">
|
|
|
- <div class="flex items-center">
|
|
|
+ <div>
|
|
|
+ {{ ids }}
|
|
|
+ {{ Array.from(state.selectedMap.keys()) }}
|
|
|
+ <CzrFormColumn
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ label-width="0px"
|
|
|
+ :span="8"
|
|
|
+ :offset="16"
|
|
|
+ v-model:param="state.text"
|
|
|
+ placeholder="按名称搜索"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-2 grid max-h-[600px] flex-1 grid-cols-2 gap-4 overflow-y-auto"
|
|
|
+ >
|
|
|
+ <template v-for="item in state.query.result.data">
|
|
|
+ <div
|
|
|
+ class="__hover relative col-span-1 flex flex-col overflow-hidden rounded-lg border-1 border-[#E6E8EA] px-6 py-4"
|
|
|
+ :class="{
|
|
|
+ active: state.selectedMap.has(item.id),
|
|
|
+ 'border-[var(--czr-main-color)]': state.selectedMap.has(item.id),
|
|
|
+ }"
|
|
|
+ @click="onSelect(item)"
|
|
|
+ >
|
|
|
+ <div class="flex">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/knowledge/knowledge-item-icon-2.png"
|
|
|
+ class="mr-2.5 h-11 w-11"
|
|
|
+ />
|
|
|
+ <div class="flex flex-1 flex-col justify-around overflow-hidden">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div
|
|
|
+ class="flex-1 text-[1.25rem] font-bold text-[#2E3238]"
|
|
|
+ v-title
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div
|
|
|
- class="flex-1 text-[1.25rem] font-bold text-[#2E3238]"
|
|
|
- v-title
|
|
|
+ class="flex items-center gap-2.5 text-[0.75rem] text-[#6F7889]"
|
|
|
>
|
|
|
- {{ item.name }}
|
|
|
+ <div>文档数:{{ item.docCount }}</div>
|
|
|
+ <div>|</div>
|
|
|
+ <div>字符:{{ item.wordCounts }}</div>
|
|
|
+ <div>|</div>
|
|
|
+ <div>创建者：{{ item.userName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="flex items-center gap-2.5 text-[0.75rem] text-[#6F7889]"
|
|
|
- >
|
|
|
- <div>文档数:{{ item.docCount }}</div>
|
|
|
- <div>|</div>
|
|
|
- <div>字符:{{ item.wordCounts }}</div>
|
|
|
- <div>|</div>
|
|
|
- <div>创建者：{{ item.userName }}</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="mt-2.5 mb-auto text-sm text-[#606266]"
|
|
|
- style="line-height: 1.4rem"
|
|
|
- v-title="{ lines: 2 }"
|
|
|
- >
|
|
|
- {{ item.description }}
|
|
|
- </div>
|
|
|
- <template v-if="state.selectedMap.has(item.id)">
|
|
|
<div
|
|
|
- class="absolute top-0 right-0 h-[2rem] w-[2rem] bg-[url('@/assets/images/knowledge/checked.png')]"
|
|
|
- ></div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ class="mt-2.5 mb-auto text-sm text-[#606266]"
|
|
|
+ style="line-height: 1.4rem"
|
|
|
+ v-title="{ lines: 2 }"
|
|
|
+ >
|
|
|
+ {{ item.description }}
|
|
|
+ </div>
|
|
|
+ <template v-if="state.selectedMap.has(item.id)">
|
|
|
+ <div
|
|
|
+ class="absolute top-0 right-0 h-[2rem] w-[2rem] bg-[url('@/assets/images/knowledge/checked.png')]"
|
|
|
+ ></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -67,6 +84,9 @@ import {
|
|
|
import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { datasetsGetAllByPage } from '@/api/modules/knowledge'
|
|
|
+import CzrFormColumn from '@/components/czr-ui/CzrFormColumn.vue'
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import { debounce } from 'lodash'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const DictionaryStore = useDictionaryStore()
|
|
|
@@ -79,28 +99,81 @@ const props = defineProps({
|
|
|
ids: { default: () => <any>[] },
|
|
|
})
|
|
|
const state: any = reactive({
|
|
|
- loading: false,
|
|
|
- list: [],
|
|
|
selectedMap: new Map(),
|
|
|
+ text: '',
|
|
|
+ query: {
|
|
|
+ init: false,
|
|
|
+ loading: false,
|
|
|
+ page: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ formReal: {},
|
|
|
+ result: {
|
|
|
+ total: 0,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
})
|
|
|
-const initDictionary = () => {
|
|
|
- state.loading = true
|
|
|
- datasetsGetAllByPage({
|
|
|
+const setText = debounce((v) => {
|
|
|
+ state.query.form.name = v
|
|
|
+}, 1000)
|
|
|
+watch(
|
|
|
+ () => state.text,
|
|
|
+ (n) => {
|
|
|
+ setText(n)
|
|
|
+ },
|
|
|
+)
|
|
|
+watch(
|
|
|
+ () => state.query.form,
|
|
|
+ (n) => {
|
|
|
+ if (state.query.init) {
|
|
|
+ onSearch()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { deep: true },
|
|
|
+)
|
|
|
+const onSearch = () => {
|
|
|
+ state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
|
|
|
+ onPage(1, 100000)
|
|
|
+}
|
|
|
+const onPage = (pageNum, pageSize) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ state.query.init = true
|
|
|
+ }, 100)
|
|
|
+ state.query.page = {
|
|
|
+ pageNum: pageNum,
|
|
|
+ pageSize: pageSize,
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
tenantId: AppStore.tenantInfo?.id,
|
|
|
- page: 1,
|
|
|
- size: 100000,
|
|
|
- })
|
|
|
+ page: state.query.page.pageNum,
|
|
|
+ size: state.query.page.pageSize,
|
|
|
+ }
|
|
|
+ // 添加表单参数
|
|
|
+ for (const [k, v] of Object.entries(state.query.formReal)) {
|
|
|
+ if (proxy.$czrUtil.isValue(v)) {
|
|
|
+ params[k] = v
|
|
|
+ }
|
|
|
+ }
|
|
|
+ state.query.loading = true
|
|
|
+ datasetsGetAllByPage(params)
|
|
|
.then(({ data }: any) => {
|
|
|
- state.list = data.content
|
|
|
- state.list.forEach((v: any) => {
|
|
|
+ state.query.result.total = data.totalElements
|
|
|
+ state.query.result.data = data.content
|
|
|
+ state.query.result.data.forEach((v) => {
|
|
|
if (props.ids.includes(v.id)) {
|
|
|
- onSelect(v)
|
|
|
+ if (!props.multiple) {
|
|
|
+ state.selectedMap.clear()
|
|
|
+ }
|
|
|
+ state.selectedMap.set(v.id, v)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
.catch(() => {})
|
|
|
.finally(() => {
|
|
|
- state.loading = false
|
|
|
+ state.query.loading = false
|
|
|
})
|
|
|
}
|
|
|
const onSelect = (row) => {
|
|
|
@@ -117,7 +190,7 @@ const getData = () => {
|
|
|
return Array.from(state.selectedMap.values())
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
- initDictionary()
|
|
|
+ onSearch()
|
|
|
})
|
|
|
defineExpose({
|
|
|
getData,
|
CzRger