311 lines
12 KiB
Vue
311 lines
12 KiB
Vue
<template>
|
||
<div class="layout-padding">
|
||
<div class="layout-padding-auto layout-padding-view">
|
||
<el-row v-show="showSearch">
|
||
<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
|
||
<el-form-item label="知识库名" prop="title">
|
||
<el-select placeholder="请选择知识库" v-model="state.queryForm.datasetId">
|
||
<el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in datasetList">
|
||
{{ item.name }}
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="文件名" prop="name">
|
||
<el-input placeholder="请输入文件名" v-model="state.queryForm.name" />
|
||
</el-form-item>
|
||
<el-form-item label="内容" prop="content">
|
||
<el-input placeholder="请输入文件内容" v-model="state.queryForm.content" />
|
||
</el-form-item>
|
||
<el-form-item label="已训练" prop="fileStatus">
|
||
<el-radio-group v-model="state.queryForm.sliceStatus">
|
||
<el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{ item.label }} </el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button icon="search" type="primary" @click="getDataList"> 查询</el-button>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<div class="mb8" style="width: 100%">
|
||
<right-toolbar
|
||
v-model:showSearch="showSearch"
|
||
:export="'knowledge_aiSlice_export'"
|
||
@exportExcel="exportExcel"
|
||
class="ml10 mr20"
|
||
style="float: right"
|
||
@queryTable="getDataList"
|
||
></right-toolbar>
|
||
</div>
|
||
</el-row>
|
||
|
||
<el-scrollbar>
|
||
<div class="mx-auto mt-4">
|
||
<div class="px-4">
|
||
<div class="grid sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3">
|
||
<div
|
||
class="relative p-6 mb-6 bg-gray-100 rounded-lg border dark:border-gray-700 dark:bg-gray-800"
|
||
v-for="slice in state.dataList"
|
||
:key="slice.id"
|
||
>
|
||
<button v-if="slice.sliceStatus === '1'" class="absolute -top-2 right-0 px-3 rotate-[20deg] border bg-primary text-white font-bold">
|
||
已训练
|
||
</button>
|
||
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex relative items-center w-2/4 group">
|
||
<h3
|
||
class="text-base font-semibold text-gray-900 truncate transition-colors duration-300 dark:text-gray-100 hover:text-primary"
|
||
:title="slice.name"
|
||
>
|
||
<tip :content="slice.name" />
|
||
{{ slice.name }}
|
||
</h3>
|
||
</div>
|
||
<div class="flex items-end">
|
||
<svg
|
||
t="1710943696783"
|
||
class="mr-2 w-5 h-5 text-base text-gray-500"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="4358"
|
||
width="128"
|
||
height="128"
|
||
>
|
||
<path
|
||
d="M678.68009472 305.67806859H345.31990528c-21.80301018 0-39.64183671 17.83882651-39.64183669 39.64183669v333.31409429c0 21.80301018 17.83882651 39.64183671 39.64183669 39.6418367h333.31409429c21.80301018 0 39.64183671-17.83882651 39.6418367-39.6418367V345.31990528c0.04609516-21.80301018-17.79273135-39.64183671-39.59574155-39.64183669z"
|
||
fill="#ffffff"
|
||
p-id="4359"
|
||
></path>
|
||
<path
|
||
d="M873.6 64.4H150.4c-47.3 0-86 38.7-86 86v723.1c0 47.3 38.7 86 86 86h723.1c47.3 0 86-38.7 86-86V150.4c0.1-47.3-38.6-86-85.9-86z m56.9 778.2c0 48.3-39.6 87.9-87.9 87.9H181.4c-48.3 0-87.9-39.6-87.9-87.9V181.4c0-48.3 39.6-87.9 87.9-87.9h661.1c48.3 0 87.9 39.6 87.9 87.9v661.2z"
|
||
fill="#000000"
|
||
p-id="4360"
|
||
></path>
|
||
<path
|
||
d="M639.2 282.6l80.2-80.6c5.9-5.6 15.3-5.6 20.7 0 2.3 2.3 3.3 4.3 4 6.6V209.2l15 55.7 55.7 15 0.3 0.2h0.2c2.3 0.7 4.7 1.6 6.4 3.8 5.7 5.6 5.7 14.8 0 20.7l-80 80.2c-3.8 3.7-9 5.2-14.4 3.8l-45.1-12-23 23.3c25.1 32 39.8 72.9 39.8 117.2 0 52.5-21.4 100.7-56.2 135.5l-0.7 0.5c-35 34.8-82.4 56-135 56-52.9 0-101.1-21.6-135.7-56.5-34.8-34.8-56.4-83-56.4-135.5 0-53.1 21.6-100.9 56.4-135.9C406 346.4 454.2 325 507.1 325c44.2 0 84.9 14.8 117.3 39.8l23.1-22.8-12.2-45.4c-1.5-4.9 0.2-10.5 3.9-14z m116.7 159c-4-13.6 3.5-27 16.4-30.8 12.9-4 26.4 3.5 30.4 16.4 4.3 14.4 7.8 29.1 9.9 44.4 2.1 14.6 3.3 30.1 3.3 45.6 0 85.1-34.4 162.5-90.3 218.1-56 55.7-133.3 90.8-218.5 90.8S344.6 791 288.6 735.3C233 679.6 198 602.2 198 517.1c0-85.4 35-162.8 90.6-218.8 56-55.7 133.2-90.1 218.5-90.1 15.1 0 30.6 0.9 45.2 3.5 15.3 1.9 30.3 5.4 44.5 9.6 12.9 3.7 20.2 17.6 16.4 30.6-3.8 12.9-17.7 20.2-30.6 16.4-12.2-3.8-24.7-6.4-37.2-8.4-12.2-1.9-25.1-3-38.3-3-71.8 0-136.7 29.2-183.7 76.5-47.2 46.8-76.2 111.7-76.2 183.7 0 71.5 29.1 136.4 76.2 183.7 47 46.8 111.9 76 183.7 76 71.7 0 136.7-29.2 183.7-76 47-47.3 76.2-112.2 76.2-183.7 0-13.2-1-26.5-2.8-38.3-1.7-12.8-4.5-25-8.3-37.2z m-248.8-12.8c15.3 0 29.9 3.8 42.8 10.8l53.6-53.7c-27.1-19.7-60.4-31.1-96.4-31.1-44.9 0-85.6 17.9-114.8 47.3v-0.2 0.2c-29.6 29.4-47.7 70.1-47.7 115.2 0 44.5 18.1 85.2 47.7 114.6 29.2 29.6 69.9 47.8 114.8 47.8 44.5 0 84.9-18.1 114.1-47l0.7-0.9c29.6-29.2 47.7-70.1 47.7-114.6 0-36.4-11.5-69.8-31.3-96.4L584.4 474c7 13.2 11.1 27.3 11.1 43.1 0 24-10.1 46.3-25.9 62.3h-0.2c-16 15.7-38.1 25.9-62.3 25.9-24.4 0-46.4-10.3-62.3-25.9-16-16-26.1-37.9-26.1-62.3 0-24.5 10.1-46.6 26.1-62.3v-0.4c15.9-15.9 38-25.6 62.3-25.6z m20.4 32.7c-6.1-2.3-13.2-3.5-20.4-3.5-16.4 0-31 6.6-41.7 17.4-10.4 10.4-17.2 25.4-17.2 41.8s6.8 30.8 17.2 41.4c10.8 10.6 25.4 17.4 41.7 17.4 16.4 0 31-6.8 41.6-17v-0.4c10.6-10.6 17.2-25 17.2-41.4 0-7.5-1.2-14.4-3.5-20.5l-37.9 37.8c-9.7 9.4-25 9.4-34.8 0-9.4-9.6-9.4-25.2 0-34.6l37.8-38.4z m194.7-220.3l-56.4 56.2 8.7 31.5 56.4-56.4-8.7-31.3z m29.2 52l-56 56.5 31.3 8.4 56.4-56.2-31.7-8.7z"
|
||
fill="#000000"
|
||
p-id="4361"
|
||
></path>
|
||
</svg>
|
||
<span class="mr-1">命中次数：{{ slice.hitCount }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 双击此区域进入编辑模式，失去光标则边际结束-->
|
||
|
||
<div class="overflow-y-auto h-48 rounded hover:bg-white dark:hover:bg-gray-700">
|
||
<!-- 使用MdRenderer组件显示内容 -->
|
||
<div v-if="!editingSlice || editingSlice.id !== slice.id" @dblclick="startEditing(slice)" class="h-40">
|
||
<MdRenderer :source="slice.content" />
|
||
</div>
|
||
<!-- 编辑模式 -->
|
||
<el-input
|
||
v-else
|
||
type="textarea"
|
||
v-model="editingContent"
|
||
class="h-40"
|
||
:autosize="{ minRows: 6, maxRows: 10 }"
|
||
@blur="saveContent(slice)"
|
||
ref="editInputRef"
|
||
/>
|
||
</div>
|
||
<div class="flex justify-between items-center text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||
<div class="flex">
|
||
<svg
|
||
t="1710943778579"
|
||
class="mr-1 w-6 h-5"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="8180"
|
||
width="128"
|
||
height="128"
|
||
>
|
||
<path
|
||
d="M109.568 99.328s-17.408 15.36 0 38.912 295.936 392.192 295.936 392.192 17.408 15.36 0 35.84-288.768 323.584-288.768 323.584-20.48 32.768 3.072 32.768h733.184s27.648 0 33.792-29.696c7.168-29.696 33.792-154.624 33.792-154.624s0-12.288-10.24-17.408c-10.24-6.144-30.72 0-33.792 9.216-3.072 9.216-92.16 98.304-125.952 104.448h-471.04l237.568-273.408s17.408-12.288 17.408-29.696-23.552-45.056-23.552-45.056L276.48 169.984h458.752s88.064 47.104 146.432 136.192c7.168 9.216 40.96 9.216 40.96 0s-51.2-201.728-51.2-201.728l-761.856-5.12z"
|
||
fill="#111111"
|
||
p-id="8181"
|
||
></path>
|
||
</svg>
|
||
字符数：{{ slice.charCount }}
|
||
</div>
|
||
<div class="flex items-center">
|
||
<el-button class="!p-0" icon="refresh" @click="handleRetrain(slice)" text type="primary" v-auth="'knowledge_aiSlice_del'"
|
||
>重新训练
|
||
</el-button>
|
||
<el-button class="!p-0" icon="delete" @click="handleDelete([slice.id])" text type="primary" v-auth="'knowledge_aiSlice_del'"
|
||
>{{ $t('common.delBtn') }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
|
||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
||
</div>
|
||
|
||
<!-- 编辑、新增 -->
|
||
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="systemAiSlice">
|
||
import { BasicTableProps, useTable } from '/@/hooks/table';
|
||
import { fetchList, delObjs, putObj } from '/@/api/knowledge/aiSlice';
|
||
import { useMessage, useMessageBox } from '/@/hooks/message';
|
||
import { useDict } from '/@/hooks/dict';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { fetchDataList } from '/@/api/knowledge/aiDataset';
|
||
import MdRenderer from '/@/components/MdRenderer/MdRenderer.vue';
|
||
|
||
// 引入组件
|
||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||
// 定义查询字典
|
||
const { yes_no_type } = useDict('yes_no_type');
|
||
const route = useRoute();
|
||
|
||
// 定义变量内容
|
||
const formDialogRef = ref();
|
||
const editingSlice = ref<any>(null);
|
||
const editingContent = ref('');
|
||
const editInputRef = ref<HTMLElement | null>(null);
|
||
// 搜索变量
|
||
const queryRef = ref();
|
||
const showSearch = ref(true);
|
||
// 多选变量
|
||
const selectObjs = ref([]) as any;
|
||
const multiple = ref(true);
|
||
const { t } = useI18n();
|
||
|
||
const datasetList = ref([]);
|
||
const getDatasetList = async () => {
|
||
const { data } = await fetchDataList();
|
||
datasetList.value = data;
|
||
};
|
||
|
||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||
queryForm: {},
|
||
createdIsNeed: false,
|
||
pageList: fetchList,
|
||
pagination: {
|
||
size: 6,
|
||
pageSizes: [3, 6, 9, 12],
|
||
},
|
||
});
|
||
|
||
// table hook
|
||
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
|
||
|
||
// 清空搜索条件
|
||
const resetQuery = () => {
|
||
// 清空搜索条件
|
||
queryRef.value?.resetFields();
|
||
state.queryForm = {};
|
||
// 清空多选
|
||
selectObjs.value = [];
|
||
getDataList();
|
||
};
|
||
|
||
// 导出excel
|
||
const exportExcel = () => {
|
||
downBlobFile('/knowledge/aiSlice/export', Object.assign(state.queryForm, { ids: selectObjs }), 'aiSlice.xlsx');
|
||
};
|
||
|
||
// 多选事件
|
||
const selectionChangHandle = (objs: { id: string }[]) => {
|
||
selectObjs.value = objs.map(({ id }) => id);
|
||
multiple.value = !objs.length;
|
||
};
|
||
|
||
// 删除操作
|
||
const handleDelete = async (ids: string[]) => {
|
||
try {
|
||
await useMessageBox().confirm('此操作将永久删除');
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await delObjs(ids);
|
||
getDataList();
|
||
useMessage().success('删除成功');
|
||
} catch (err: any) {
|
||
useMessage().error(err.msg);
|
||
}
|
||
};
|
||
|
||
// 开始编辑
|
||
const startEditing = (slice: any) => {
|
||
editingSlice.value = slice;
|
||
editingContent.value = slice.content;
|
||
nextTick(() => {
|
||
editInputRef.value?.focus();
|
||
});
|
||
};
|
||
|
||
// 保存编辑内容
|
||
const saveContent = async (slice: any) => {
|
||
// 内容没有变动
|
||
if (editingContent.value === slice.content) {
|
||
editingSlice.value = null;
|
||
return;
|
||
}
|
||
|
||
// 内容为空
|
||
if (!editingContent.value.trim()) {
|
||
useMessage().error('内容不能为空');
|
||
editingContent.value = slice.content;
|
||
editingSlice.value = null;
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await putObj({
|
||
...slice,
|
||
content: editingContent.value
|
||
});
|
||
useMessage().success('修改成功');
|
||
getDataList();
|
||
} catch (err: any) {
|
||
useMessage().error(err.msg);
|
||
} finally {
|
||
editingSlice.value = null;
|
||
}
|
||
};
|
||
|
||
// 重新训练操作
|
||
const handleRetrain = async (slice: any) => {
|
||
try {
|
||
await useMessageBox().confirm('确认要重新训练该切片吗？');
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await putObj({ ...slice, sliceStatus: '0' });
|
||
useMessage().success('已提交重新训练');
|
||
getDataList();
|
||
} catch (err: any) {
|
||
useMessage().error(err.msg);
|
||
}
|
||
};
|
||
|
||
onMounted(async () => {
|
||
if (route.query.documentId) {
|
||
state.queryForm.documentId = route.query.documentId;
|
||
}
|
||
|
||
// 查询表格数据
|
||
await getDataList();
|
||
// 查询知识库列表
|
||
getDatasetList();
|
||
});
|
||
</script>
|