From f46584b97726459b9299cbc04b9a8b99f11261de Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期五, 26 七月 2024 15:14:42 +0800
Subject: [PATCH] 模型管理页面开发
---
src/views/dmx/knowledgeLib/index.vue | 356 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 204 insertions(+), 152 deletions(-)
diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue
index aa5d815..4465869 100644
--- a/src/views/dmx/knowledgeLib/index.vue
+++ b/src/views/dmx/knowledgeLib/index.vue
@@ -6,16 +6,22 @@
<div class="lf-container-top">
<a-input-search
:placeholder="$t('cardList.searchInput.placeholder')"
- style="width: 110px;"
+ style="width: 130px;"
/>
- <a-button type="primary" @click="add" style="margin-left: 10px">
- <template #icon>
- <icon-plus />
- </template>
- </a-button>
+ <addKnow></addKnow>
</div>
<div class="lf-container-down">
-
+ <div class="tabs">
+ <div
+ class="tab"
+ v-for="(tab, index) in tabs"
+ :key="index"
+ @click="selectTab(index)"
+ :class="{ 'active': selectedTab === index }"
+ >
+ {{ tab }}
+ </div>
+ </div>
</div>
</div>
<div class="rt-container">
@@ -38,81 +44,11 @@
style="width: 200px;margin-right: 10px"
/>
<!-- 鏂板缓-->
- <add edit="add" />
+ <add />
</a-col>
- <!-- <a-col :span="8">-->
- <!-- <a-form-item field="name" :label="$t('searchTable.form.name')">-->
- <!-- <a-input-->
- <!-- v-model="formModel.name"-->
- <!-- :placeholder="$t('searchTable.form.name.placeholder')"-->
- <!-- />-->
- <!-- </a-form-item>-->
- <!-- </a-col>-->
- <!-- <a-col :span="8">-->
- <!-- <a-form-item-->
- <!-- field="contentType"-->
- <!-- :label="$t('searchTable.form.contentType')"-->
- <!-- >-->
- <!-- <a-select-->
- <!-- v-model="formModel.contentType"-->
- <!-- :options="contentTypeOptions"-->
- <!-- :placeholder="$t('searchTable.form.selectDefault')"-->
- <!-- />-->
- <!-- </a-form-item>-->
- <!-- </a-col>-->
- <!-- <a-col :span="8">-->
- <!-- <a-form-item-->
- <!-- field="filterType"-->
- <!-- :label="$t('searchTable.form.filterType')"-->
- <!-- >-->
- <!-- <a-select-->
- <!-- v-model="formModel.filterType"-->
- <!-- :options="filterTypeOptions"-->
- <!-- :placeholder="$t('searchTable.form.selectDefault')"-->
- <!-- />-->
- <!-- </a-form-item>-->
- <!-- </a-col>-->
- <!-- <a-col :span="8">-->
- <!-- <a-form-item-->
- <!-- field="createdTime"-->
- <!-- :label="$t('searchTable.form.createdTime')"-->
- <!-- >-->
- <!-- <a-range-picker-->
- <!-- v-model="formModel.createdTime"-->
- <!-- style="width: 100%"-->
- <!-- />-->
- <!-- </a-form-item>-->
- <!-- </a-col>-->
- <!-- <a-col :span="8">-->
- <!-- <a-form-item-->
- <!-- field="status"-->
- <!-- :label="$t('searchTable.form.status')"-->
- <!-- >-->
- <!-- <a-select-->
- <!-- v-model="formModel.status"-->
- <!-- :options="statusOptions"-->
- <!-- :placeholder="$t('searchTable.form.selectDefault')"-->
- <!-- />-->
- <!-- </a-form-item>-->
- <!-- </a-col>-->
</a-row>
</a-form>
</a-col>
- <!-- <a-divider style="height: 40px" direction="vertical" />-->
- <!-- <a-col :flex="'200px'" style="text-align: right">-->
- <!-- <a-button @click="reset" style="margin-right: 20px">-->
- <!-- <template #icon>-->
- <!-- <icon-refresh />-->
- <!-- </template>-->
- <!-- {{ $t('searchTable.form.reset') }}-->
- <!-- </a-button>-->
- <!-- <a-button type="primary" @click="search">-->
- <!-- <template #icon>-->
- <!-- <icon-search />-->
- <!-- </template>-->
- <!-- {{ $t('searchTable.form.search') }}-->
- <!-- </a-button>-->
- <!-- </a-col>-->
</a-row>
<a-divider style="margin-top: 0" />
<a-row style="margin-bottom: 16px">
@@ -210,52 +146,73 @@
@page-change="onPageChange"
:scroll="{ y: 580 }"
>
- <template #contentType="{ record }">
- <a-space>
- <a-avatar
- v-if="record.contentType === 'img'"
- :size="16"
- shape="square"
- >
- <img
- alt="avatar"
- src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image"
- />
- </a-avatar>
- <a-avatar
- v-else-if="record.contentType === 'horizontalVideo'"
- :size="16"
- shape="square"
- >
- <img
- alt="avatar"
- src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77721e365eb2ab786c889682cbc721c1.svg~tplv-49unhts6dw-image.image"
- />
- </a-avatar>
- <a-avatar v-else :size="16" shape="square">
- <img
- alt="avatar"
- src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea8b09190046da0ea7e070d83c5d1731.svg~tplv-49unhts6dw-image.image"
- />
- </a-avatar>
- {{ $t(`searchTable.form.contentType.${record.contentType}`) }}
- </a-space>
+ <template #name="{ record }">
+<!-- <icon-file style="color: #0960bd;margin-right: 4px;" />-->
+ <icon-file style="margin-right: 4px;" />
+<!-- <span style="color: #0960bd;cursor: pointer" @click="fileClick">-->
+<!-- {{record.name}}-->
+<!-- </span>-->
+ {{record.name}}
</template>
- <template #filterType="{ record }">
- {{ $t(`searchTable.form.filterType.${record.filterType}`) }}
+ <template #staue="{ record }">
+ <a-switch :model-value="record.staue"/>
</template>
<template #status="{ record }">
- <span v-if="record.status === 'offline'" class="circle"></span>
- <span v-else class="circle pass"></span>
- {{ $t(`searchTable.form.status.${record.status}`) }}
+ <div style="display: flex;align-items: center;">
+ <div style="width: 100px">
+ <a-popover title="Title">
+ <a-tag :color="'blue'" border>鎴愬姛</a-tag>
+ <template #content>
+ <p>Here is the text content</p>
+ </template>
+ </a-popover>
+ <a-popover title="Title">
+ <a-tag :color="'gold'" border>鍙栨秷</a-tag>
+ <template #content>
+ <p>Here is the text content</p>
+ </template>
+ </a-popover>
+ <a-popover title="Title">
+ <a-tag :color="'green'" border>鏈惎鍔�</a-tag>
+ <template #content>
+ <p>Here is the text content</p>
+ </template>
+ </a-popover>
+ </div>
+ <div>
+ <a-button type="text" size="large">
+ <template #icon>
+ <icon-sync />
+ </template>
+ </a-button>
+ <a-button type="text" size="large">
+ <template #icon>
+ <icon-sync style="color: green" />
+ </template>
+ </a-button>
+ <a-button type="text" size="large">
+ <template #icon>
+ <icon-play-circle style="color: green" />
+ </template>
+ </a-button>
+ </div>
+ </div>
</template>
- <template #operations="{ record }">
- <add edit="edit" :record = 'record' />
+ <template #operations="{ record }" >
+ <tool/>
+ <edit/>
<a-popconfirm content="纭畾鍒犻櫎鍚楋紵" type="warning" @ok="deleteItem(record)">
<a-button v-permission="['admin']" type="text" size="small">
- {{ $t('鍒犻櫎') }}
+ <template #icon>
+ <icon-delete />
+ </template>
</a-button>
</a-popconfirm>
+ <a-button type="text" size="small">
+ <template #icon>
+ <icon-download />
+ </template>
+ </a-button>
</template>
</a-table>
</a-card>
@@ -263,15 +220,51 @@
</a-tab-pane>
<a-tab-pane key="2" title="娴嬭瘯">
<div class="rt-container-main">
-
+ <test ></test>
</div>
</a-tab-pane>
<a-tab-pane key="3" title="閰嶇疆">
<div class="rt-container-main">
-
+ <config ></config>
</div>
</a-tab-pane>
</a-tabs>
+ <div v-if="detailsShow" class="details">
+ <div class="details-header">
+ <div style="display: flex;align-items: center">
+ <span><icon-arrow-left size="20px" style="cursor: pointer;color: #0960bd;margin: 10px" @click="goBackClick" /></span>
+ <icon-file style="color: #0960bd;margin-right: 4px;" />
+ <span style="">123.docx</span>
+ </div>
+ <div style="display: flex; align-items: center;">
+ <a-radio-group v-model="position" type="button" style="margin-right: 10px">
+ <a-radio value="top">鍏ㄦ枃</a-radio>
+ <a-radio value="right">鐪佺暐</a-radio>
+ </a-radio-group>
+ <a-popover position="bottom">
+ <a-button type="outline" class="button" style="margin-right: 10px">鎵归噺 <icon-down style="margin-left: 4px" /></a-button>
+ <template #content>
+ <p>Here is the text content</p>
+ <p>Here is the text content</p>
+ </template>
+ </a-popover>
+ <a-button type="outline" class="button" style="margin-right: 10px">
+ <template #icon>
+ <icon-search />
+ </template>
+ </a-button>
+ <a-popover position="bottom">
+ <a-button type="outline" class="button" style="margin-right: 10px"><icon-sort /></a-button>
+ <template #content>
+ <p>Here is the text content</p>
+ <p>Here is the text content</p>
+ </template>
+ </a-popover>
+ <addDetails></addDetails>
+ </div>
+ </div>
+ <a-divider style="margin-top: 10px" />
+ </div>
</div>
</div>
</div>
@@ -287,7 +280,13 @@
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import cloneDeep from 'lodash/cloneDeep';
import Sortable from 'sortablejs';
- import add from '@/views/user/account/add.vue'
+ import add from '@/views/dmx/knowledgeLib/add.vue'
+ import edit from '@/views/dmx/knowledgeLib/edit.vue'
+ import addKnow from '@/views/dmx/knowledgeLib/addKnow.vue'
+ import config from '@/views/dmx/knowledgeLib/config.vue'
+ import test from '@/views/dmx/knowledgeLib/test.vue'
+ import tool from '@/views/dmx/knowledgeLib/tool.vue'
+ import addDetails from '@/views/dmx/knowledgeLib/addDetails.vue'
import { deleteAccount } from "@/api/account";
type SizeProps = 'mini' | 'small' | 'medium' | 'large';
type Column = TableColumnData & { checked?: true };
@@ -308,10 +307,16 @@
const formModel = ref(generateFormModel());
const cloneColumns = ref<Column[]>([]);
const showColumns = ref<Column[]>([]);
- const edit = ref('add');
const size = ref<SizeProps>('medium');
let visible = ref(false)
+ let detailsShow = ref(false)
+ let selectedTab = ref(0)
+ let tabs = reactive(['娉曞緥鐭ヨ瘑搴�', '鏀垮姟鐭ヨ瘑搴�', '鍖诲鐭ヨ瘑搴�', '鍏朵粬鐭ヨ瘑搴�'])
+
+ const selectTab = (index) => {
+ selectedTab.value= index;
+ }
const basePagination: Pagination = {
current: 1,
@@ -339,50 +344,43 @@
},
]);
const columns = computed<TableColumnData[]>(() => [
- // {
- // title: t('搴忓彿'),
- // dataIndex: 'index',
- // slotName: 'index',
- // },
- // {
- // title: t('searchTable.columns.number'),
- // dataIndex: 'number',
- // },
{
- title: t('鐢ㄦ埛鍚�'),
+ title: t('鍚嶇О'),
dataIndex: 'name',
+ slotName: 'name',
},
- // {
- // title: t('searchTable.columns.contentType'),
- // dataIndex: 'contentType',
- // slotName: 'contentType',
- // },
- // {
- // title: t('searchTable.columns.filterType'),
- // dataIndex: 'filterType',
- // },
- // {
- // title: t('searchTable.columns.count'),
- // dataIndex: 'count',
- // },
{
- title: t('鍒涘缓鏃堕棿'),
+ title: t('鍒嗗揩鏁�'),
+ dataIndex: 'contentType',
+ },
+ {
+ title: t('涓婁紶鏃堕棿'),
+ dataIndex: 'filterType',
+ },
+ {
+ title: t('鍒涘缓浜�'),
+ dataIndex: 'count',
+ },
+ {
+ title: t('瑙ｆ瀽鐘舵��'),
dataIndex: 'createdTime',
},
{
- title: t('鎵�灞為儴闂�'),
- dataIndex: 'filterType',
- slotName: 'filterType',
+ title: t('鍚敤'),
+ dataIndex: 'staue',
+ slotName: 'staue',
},
{
- title: t('澶囨敞'),
+ title: t('瑙ｆ瀽鐘舵��'),
dataIndex: 'status',
slotName: 'status',
},
{
- title: t('searchTable.columns.operations'),
+ title: t('鎿嶄綔'),
dataIndex: 'operations',
slotName: 'operations',
+ width: 150,
+ minWidth: 100,
},
]);
const contentTypeOptions = computed<SelectOptionData[]>(() => [
@@ -426,7 +424,7 @@
try {
const { data } = await queryPolicyList(params);
renderData.value = data.list;
- console.log(renderData);
+ console.log(renderData, 'renderData');
pagination.current = params.current;
pagination.total = data.total;
} catch (err) {
@@ -510,6 +508,16 @@
}
};
+ const fileClick = ()=>{
+ detailsShow.value = true
+
+ }
+
+ const goBackClick = ()=>{
+ detailsShow.value = false
+
+ }
+
const deleteItem = async (row)=>{
console.log(row);
// let data = await deleteAccount({id: row.number})
@@ -559,12 +567,42 @@
display: flex;
}
.lf-container-down{
- width: 80%;
+ display: flex;
+ flex-direction: column;
+ width: 90%;
height: calc(100% - 5rem);
- border: 1px solid #cccccc;
+ border: 1px solid #eeeeee;
+ overflow: auto;
+ padding: 10px;
+ .tabs .tab {
+ cursor: pointer;
+ box-sizing: border-box;
+ margin: 10px 0;
+ padding:0 10px;
+ color: rgba(0, 0, 0, 0.88);
+ font-size: 14px;
+ height: 40px;
+ line-height: 40px;
+ list-style: none;
+ position: relative;
+ background: #ffffff;
+ border: 1px solid #f0f0f0;
+ border-radius: 8px;
+ }
+ .tabs .tab:hover {
+ border: 1px solid #ffffff;
+ background: #e8e8ea;
+ box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+ }
+ .tabs .tab.active {
+ border: 1px solid #e8e8ea;
+ background: #e8e8ea;
+ cursor: pointer;
+ }
}
}
.rt-container{
+ position: relative;
//background: #626aea;
margin-left: 20px;
width: calc(100% - 200px);
@@ -572,6 +610,20 @@
.rt-container-main{
height: 76vh;
}
+ .details{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #ffffff;
+ .details-header{
+ display: flex;
+ justify-content: space-between;
+ margin-top: 10px;
+ padding-right: 20px;
+ }
+ }
}
}
}
--
Gitblit v1.8.0