From dc3fb06f6d3253ddebf35fec2d805b1750086b01 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期三, 14 八月 2024 17:31:51 +0800
Subject: [PATCH] fix: 上传组件新增删除功能，模型管理页面修改
---
src/views/dmx/model/index.vue | 351 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 181 insertions(+), 170 deletions(-)
diff --git a/src/views/dmx/model/index.vue b/src/views/dmx/model/index.vue
index 0a55621..465a8be 100644
--- a/src/views/dmx/model/index.vue
+++ b/src/views/dmx/model/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="container">
- <Breadcrumb :items="['澶фā鍨�', '澶фā鍨嬬鐞�']" />
+ <Breadcrumb :items="['澶фā鍨�', '妯″瀷绠＄悊']" />
<a-row :gutter="20" align="stretch">
<a-col :span="24">
@@ -27,70 +27,79 @@
:title="index"
:closable="Object.keys(tabData).length >= 4"
>
- <div
- style="display: flex; flex-wrap: wrap"
- class="card_content"
+ <a-scrollbar
+ style="height: calc(100vh - 320px); overflow: auto"
>
- <div class="card-wrap">
- <div class="card_wrap_box">
- <div class="card_wrap_box_img">
- <img
- :style="{
- width: '100%',
- }"
- alt="dessert"
- :src="item.logo"
- />
- </div>
- <a-card :bordered="false" hoverable>
- <div class="arco-card-body-content">
- <div
- class="arco-card-body-content-title"
- style="word-wrap: break-word"
- >
- {{ item.tags }}
- </div>
- <!-- <div class="arco-card-body-content-dec">{{
+ <div
+ style="display: flex; flex-wrap: wrap"
+ class="card_content"
+ >
+ <div class="card-wrap">
+ <div class="card_wrap_box">
+ <div class="card_wrap_box_img">
+ <img
+ :style="{
+ width: '100%',
+ }"
+ alt="鏆傛棤鍥剧墖"
+ :src="item.logo ? httpUrl + item.logo : pdfImg"
+ />
+ </div>
+ <a-card :bordered="false" hoverable>
+ <div class="arco-card-body-content">
+ <div
+ class="arco-card-body-content-title"
+ style="word-wrap: break-word"
+ >
+ {{ item.tags }}
+ </div>
+ <!-- <div class="arco-card-body-content-dec">{{
list.type
}}</div> -->
- </div>
+ </div>
+ </a-card>
<div class="arco-btn-group">
<a-space class="btn-group">
<!-- <editModel></editModel> -->
- <a-button type="primary" @click="handleEditModel">
+ <a-button @click="handleDeleteModel(item, 1)">
+ 鍒犻櫎
+ </a-button>
+ <a-button
+ type="primary"
+ @click="handleEditModel(item, 1)"
+ >
缂栬緫
</a-button>
</a-space>
</div>
- </a-card>
- </div>
- </div>
- <div
- class="card-wrap"
- v-for="(list, index) of item.llm"
- :key="index"
- >
- <div class="card_wrap_box">
- <div>
- <img
- :style="{
- width: '100%',
- transform: 'translateY(-20px)',
- }"
- alt="dessert"
- :src="list.logo"
- />
- <!-- src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp" -->
</div>
- <a-card :bordered="false" hoverable>
- <div class="arco-card-body-content">
- <div class="arco-card-body-content-title">
- {{ list.name }}
- </div>
- <div class="arco-card-body-content-dec">{{
- list.type
- }}</div>
+ </div>
+ <div
+ class="card-wrap"
+ v-for="(list, index) of item.llm"
+ :key="index"
+ >
+ <div class="card_wrap_box">
+ <div class="card_wrap_box_img">
+ <img
+ :style="{
+ width: '100%',
+ }"
+ alt="鏆傛棤鍥剧墖"
+ :src="list.logo ? httpUrl + list.logo : pdfImg"
+ />
+ <!-- src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp" -->
</div>
+ <a-card :bordered="false" hoverable>
+ <div class="arco-card-body-content">
+ <div class="arco-card-body-content-title">
+ {{ list.name }}
+ </div>
+ <div class="arco-card-body-content-dec">{{
+ list.type
+ }}</div>
+ </div>
+ </a-card>
<div class="arco-btn-group">
<a-space class="btn-group">
<a-button @click="handleDeleteModel(list)">
@@ -106,28 +115,23 @@
<!-- <editModel></editModel> -->
</a-space>
</div>
- </a-card>
+ </div>
</div>
</div>
- </div>
+ </a-scrollbar>
</a-tab-pane>
</a-tabs>
</a-col>
<div> </div>
- <div class="box_right">
- <div class="search_input">
+ <div class="box_right" v-if="Object.keys(tabData).length > 0">
+ <!-- <div class="search_input">
<a-input-search
:placeholder="$t('cardList.searchInput.placeholder')"
style="width: 240px"
/>
- </div>
+ </div> -->
<div>
- <!-- <addModel></addModel> -->
- <a-button
- type="primary"
- :loading="loading2"
- @click="handleAddModel"
- >
+ <a-button type="primary" @click="handleAddModel">
<template #icon>
<icon-plus />
</template>
@@ -139,29 +143,29 @@
</a-card>
</a-col>
</a-row>
+ <!-- 娣诲姞妯″瀷 -->
+ <addPageModel
+ v-model:show="show"
+ :task_id="task_id"
+ :type="modelType"
+ :title="title"
+ :editList="editList"
+ @refresh-parent="refreshParentMethod"
+ v-if="show"
+ ></addPageModel>
+ <!-- 娣诲姞tab妯″紡 -->
+ <addTableName
+ v-model:tabShow="tabShow"
+ :nameList="editList"
+ :title="title"
+ @refresh-parent="refreshParentMethod"
+ v-if="tabShow"
+ ></addTableName>
</div>
- <!-- 娣诲姞妯″瀷 -->
- <addPageModel
- v-model:show="show"
- :task_id="task_id"
- :type="modelType"
- :title="title"
- :editList="editList"
- @refresh-parent="refreshParentMethod"
- v-if="show"
- ></addPageModel>
- <!-- 娣诲姞tab妯″紡 -->
- <addTableName
- v-model:tabShow="tabShow"
- :nameList="editList"
- @refresh-parent="refreshParentMethod"
- v-if="tabShow"
- ></addTableName>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
- import addModel from '@/views/dmx/model/components/addModel.vue';
import editModel from '@/views/dmx/model/components/editModel.vue';
import addPageModel from './components/addPageModel.vue';
import addTableName from './components/addTableName.vue';
@@ -172,7 +176,11 @@
deleteLlmFactory,
} from '@/api/model';
import { Modal, Message } from '@arco-design/web-vue';
+ import { userModelState } from '@/store';
+ import pdfImg from '@/assets/images/icon-chart.png';
+
+ const modelStore = userModelState();
let count = 5;
const activeKey = ref(1);
const data = ref([
@@ -196,18 +204,19 @@
key: {
tags: '娣诲姞key',
id: 1,
+ live: 1,
},
});
const isDeleteDialogVisible = ref(false); //鍒犻櫎鎻愰啋
- const apiUrl = ref('http://127.0.0.1:5173');
- // const httpUrl = import.meta.env.VITE_API_BASE_URL;
- // console.log(apiUrl.value, 777);
+
const modalList = ref({});
const tabKey = ref('key');
const changeTabs = (val) => {
tabKey.value = val;
};
+
+ const httpUrl = modelStore.hrefUrl;
const show = ref(false);
const tabShow = ref(false);
const title = ref('娣诲姞妯″紡');
@@ -215,24 +224,26 @@
const modelType = ref(1);
const handleAdd = () => {
tabShow.value = true;
+ title.value = '娣诲姞妯″瀷';
editList.value.llm_factory = tabKey.value;
};
- const editList = ref({ llm_factory: '' });
+ const editList = ref<any>({ llm_factory: '' });
//澧炲姞妯″瀷瀛愮被
const handleAddModel = () => {
- if (tabKey.value == 'key') {
- tabShow.value = true;
- } else {
- modelType.value = 2;
- editList.value.llm_factory = tabKey.value;
- show.value = true;
- title.value = '娣诲姞妯″紡';
- }
+ modelType.value = 2;
+ editList.value = [{ llm_factory: '' }];
+ editList.value.llm_factory = tabKey.value;
+ show.value = true;
+ title.value = '娣诲姞妯″紡';
};
//缂栬緫妯″瀷瀛愮被
- const handleEditModel = (val) => {
- if (tabKey.value == 'key') {
+ const handleEditModel = (val, type) => {
+ console.log(val, 6766);
+ if (type == 1) {
tabShow.value = true;
+ editList.value = val;
+ title.value = '缂栬緫妯″瀷';
+ editList.value.llm_factory = tabKey.value;
} else {
modelType.value = 2;
task_id.value = val.id;
@@ -244,40 +255,51 @@
};
//鍒犻櫎妯″瀷
- const handleDeleteModel = (val) => {
- Modal.confirm({
- title: '璀﹀憡',
- content: '纭鍒犻櫎鍚�',
- okText: '纭畾',
- cancelText: '鍙栨秷',
- onOk: async () => {
- const factory = tabKey.value;
- const res = await deleteLlm({
- llm_factory: tabKey.value,
- llm_name: val.name,
- });
+ const handleDeleteModel = (val, type) => {
+ if (type == 1) {
+ handleDelete(val);
+ } else {
+ Modal.confirm({
+ title: '璀﹀憡',
+ content: '纭鍒犻櫎鍚�',
+ okText: '纭畾',
+ cancelText: '鍙栨秷',
+ onOk: async () => {
+ const factory = tabKey.value;
+ const res = await deleteLlm({
+ llm_factory: tabKey.value,
+ llm_name: val.name,
+ });
- if ((res as any).code == 0) {
- queryModel();
- tabKey.value = factory;
- } else {
- }
- },
- onCancel: () => {},
- });
+ if ((res as any).code == 0) {
+ queryModel();
+ tabKey.value = factory;
+ } else {
+ }
+ },
+ onCancel: () => {},
+ });
+ }
};
//鐖剁骇妯″瀷
const handleDelete = async (key: any) => {
- console.log(key, 45455);
- // tabData.value = tabData.value.filter((item) => item.key !== key);
- Reflect.deleteProperty(tabData.value, key);
- await deleteLlmFactory(key);
- queryModel();
+ console.log(tabData.value[key]);
+ if (tabData.value[key].llm.length > 0) {
+ Message.error('璇峰厛鍒犻櫎瀛愭ā鍨�');
+ return;
+ }
+ if (key !== 'key') {
+ const res = await deleteLlmFactory(key);
+ if ((res as any).code == 200) {
+ Reflect.deleteProperty(tabData.value, key);
+ queryModel();
+ }
+ }
};
const visible = ref(false);
- const formRef = ref(null);
+ const formRef = ref();
const form = reactive({
size: 'medium',
@@ -302,16 +324,6 @@
});
return false;
};
- // const handleCancel = () => {
- // formRef.value.resetFields();
- // visible.value = false;
- // };
- // const handleSubmit = ({ values, errors }) => {
- // this.$refs.formRef.validate().then((res, a, b) => {
- // debugger;
- // console.log('values', values);
- // });
- // };
//鑾峰彇妯″瀷鍒楄〃
const loading = ref(false);
@@ -322,6 +334,15 @@
tabData.value = Object.assign({}, tabData.value, res.data);
};
queryModel();
+ //杩斿洖婊¤冻鏉′欢鐨勫璞�
+ const filterObject = (obj, threshold) => {
+ return Object.keys(obj)
+ .filter((key) => obj[key] > threshold)
+ .reduce((result, key) => {
+ result[key] = obj[key];
+ return result;
+ }, {});
+ };
const refreshParentMethod = () => {
queryModel();
@@ -346,6 +367,7 @@
font-size: 14px;
}
}
+
:deep(.arco-list-col) {
display: flex;
flex-direction: row;
@@ -378,6 +400,10 @@
}
}
}
+ :deep(.arco-tabs-nav-tab) {
+ flex: none;
+ width: 60%;
+ }
.table_add_clore {
:deep(.arco-tabs-nav-add-btn .arco-icon-hover::before) {
top: 50%;
@@ -392,9 +418,9 @@
:deep(.arco-tabs-nav-add-btn .arco-icon-hover .arco-icon) {
color: #fff;
}
- :deep(.arco-tabs-nav) {
- max-width: 60%;
- }
+ // :deep(.arco-tabs-nav) {
+ // max-width: 60%;
+ // }
:deep(.arco-icon-hover::before) {
top: 50%;
@@ -404,6 +430,9 @@
transform: translate(-50%, -50%);
// border-radius: 0;
// background-color: #eee;
+ }
+ :deep(.arco-tabs-tab-close-btn) {
+ display: none;
}
:deep(.arco-tabs-tab-close-btn .arco-icon) {
color: #666;
@@ -427,48 +456,30 @@
}
}
.card_content {
- position: relative;
- .arco-btn-group {
- position: absolute;
- right: 10px;
- top: 100px;
- }
.card_wrap_box_img {
- min-height: 200px;
- max-height: 240px;
+ // min-height: 200px;
+ height: 200px;
+ width: 100%;
+ img {
+ width: 100%; /* 鎴栬�呭叾浠栧浐瀹氬搴� */
+ height: 100%; /* 鎴栬�呭叾浠栧浐瀹氶珮搴� */
+ object-fit: cover; /* 涓嶄細鍙樺舰锛屼絾鍙兘瑁佸壀鍥剧墖 */
+ }
+ }
+ .card_wrap_box {
+ // position: relative;
+ .arco-btn-group {
+ position: absolute;
+ right: 10px;
+ top: 87%;
+ }
}
}
.card-wrap {
width: 320px;
height: 350px;
- margin: 30px;
- transition: all 0.3s;
- border: 1px solid var(--color-neutral-3);
- border-radius: 4px;
- position: relative;
- &:hover {
- transform: translateY(-4px);
- // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
- }
- }
- .card-wrap {
- width: 320px;
- height: 350px;
- margin: 30px;
- transition: all 0.3s;
- border: 1px solid var(--color-neutral-3);
- border-radius: 4px;
- position: relative;
- &:hover {
- transform: translateY(-4px);
- // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
- }
- }
- .card-wrap {
- width: 320px;
- height: 350px;
- margin: 30px;
+ margin: 20px 30px;
transition: all 0.3s;
border: 1px solid var(--color-neutral-3);
border-radius: 4px;
--
Gitblit v1.8.0