From f46584b97726459b9299cbc04b9a8b99f11261de Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期五, 26 七月 2024 15:14:42 +0800
Subject: [PATCH] 模型管理页面开发
---
src/views/dmx/model/components/addModel.vue | 187 ++++++++++++++++++++
src/views/dmx/model/components/editModel.vue | 186 ++++++++++++++++++++
src/views/dmx/model/index.vue | 145 ++++++++++-----
3 files changed, 470 insertions(+), 48 deletions(-)
diff --git a/src/views/dmx/model/components/addModel.vue b/src/views/dmx/model/components/addModel.vue
new file mode 100644
index 0000000..eeab066
--- /dev/null
+++ b/src/views/dmx/model/components/addModel.vue
@@ -0,0 +1,187 @@
+
+<template>
+ <a-button type="primary" @click="handleClick" style="margin-left: 10px">
+ <template #icon>
+ <icon-plus />
+ </template>
+ </a-button>
+ <a-modal v-model:visible="visible" title="娣诲姞妯″紡"
+ @before-open="handleOpened"
+ @cancel="handleCancel"
+ :footer="false"
+ title-align="start"
+ width="600px"
+ >
+ <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
+ <a-form-item field="name" label="妯″瀷绫诲瀷">
+ <a-select v-model="form.section" placeholder="璇烽�夋嫨">
+ <a-option value="section one">Section One</a-option>
+ <a-option value="section two">Section Two</a-option>
+ <a-option value="section three">Section Three</a-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item field="name" label="妯″瀷鍚嶇О">
+ <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�"/>
+ </a-form-item>
+ <a-form-item field="section" label="妯″瀷鍥剧墖">
+ <a-space direction="vertical" :style="{ width: '100%' }">
+ <a-upload
+ action="/"
+ :fileList="file ? [file] : []"
+ :show-file-list="false"
+ @change="onChange"
+ @progress="onProgress"
+ >
+ <template #upload-button>
+ <div
+ :class="`arco-upload-list-item${
+ file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
+ }`"
+ >
+ <div
+ class="arco-upload-list-picture custom-upload-avatar"
+ v-if="file && file.url"
+ >
+ <img :src="file.url" />
+ <div class="arco-upload-list-picture-mask">
+ <IconEdit />
+ </div>
+ <a-progress
+ v-if="file.status === 'uploading' && file.percent < 100"
+ :percent="file.percent"
+ type="circle"
+ size="mini"
+ :style="{
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateX(-50%) translateY(-50%)',
+ }"
+ />
+ </div>
+ <div class="arco-upload-picture-card" v-else>
+ <div class="arco-upload-picture-card-text">
+ <IconPlus />
+ <div style="margin-top: 10px; font-weight: 600">涓婁紶</div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </a-upload>
+ </a-space>
+ </a-form-item>
+ <a-form-item field="name" label="鍩虹Url">
+ <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�"/>
+ </a-form-item>
+ <a-form-item field="raptor" label="鏄惁鏀寔 Vision">
+ <a-switch v-model="form.raptor" />
+ </a-form-item>
+
+ <a-form-item>
+ <div style="width: 100%;text-align: right">
+ <a-button @click="visible = false">鍙栨秷</a-button>
+ <a-button style="margin-left: 10px" type="primary" html-type="submit">纭畾</a-button>
+ </div>
+ </a-form-item>
+ </a-form>
+ </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+
+const visible = ref(false);
+const loading = ref(false);
+const form = reactive({
+ size: "medium",
+ name: "",
+ age: undefined,
+ section: "0",
+ province: "haidian",
+ options: [],
+ date: "",
+ time: "",
+ radio: "radio one",
+ slider: 5,
+ score: 5,
+ switch: false,
+ multiSelect: ["section one"],
+ treeSelect: "",
+ raptor: false,
+ prompt: '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' +
+ ' {cluster_content}\n' +
+ '浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��',
+});
+const formRef = ref(null);
+
+const rules = {
+ name: [
+ {
+ required: true,
+ message:'鍚嶇О涓嶅厑璁镐负绌�',
+ },
+ ],
+}
+
+
+const handleSubmit = ({values, errors}) => {
+ console.log('values:', values, '\nerrors:', errors)
+}
+
+const handleClick = () => {
+ visible.value = true;
+};
+const handleBeforeOk = (done) => {
+ formRef.value.validate().then(res => {
+ console.log('form:', form)
+ if (!form.name) {
+ done(false)
+ }else {
+ console.log('璇锋眰鏁版嵁');
+
+ }
+ })
+};
+const handleCancel = () => {
+ visible.value = false;
+}
+
+const handleOpened =(el) => {
+ Object.assign(form,{
+ name: '',// 鐢ㄦ埛鍚�
+ nameJoin: '',// 鏄电О
+ post: '',// 宀椾綅
+ txt: '',// 澶囨敞
+ });
+ formRef.value.resetFields();
+}
+
+const file = ref();
+
+const onChange = (_, currentFile) => {
+ file.value = {
+ ...currentFile,
+ // url: URL.createObjectURL(currentFile.file),
+ };
+};
+const onProgress = (currentFile) => {
+ file.value = currentFile;
+};
+
+onBeforeMount(()=>{
+
+})
+onMounted(()=>{
+
+
+})
+</script>
+
+<script lang="ts">
+export default {
+ name: 'add',
+ methods: {
+
+ }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/dmx/model/components/editModel.vue b/src/views/dmx/model/components/editModel.vue
new file mode 100644
index 0000000..b3fe06c
--- /dev/null
+++ b/src/views/dmx/model/components/editModel.vue
@@ -0,0 +1,186 @@
+
+<template>
+ <a-button type="primary" @click="handleClick">
+ 缂栬緫
+ </a-button>
+
+ <a-modal v-model:visible="visible" title="娣诲姞妯″紡"
+ @before-open="handleOpened"
+ @cancel="handleCancel"
+ :footer="false"
+ title-align="start"
+ width="600px"
+ >
+ <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
+ <a-form-item field="name" label="妯″瀷绫诲瀷">
+ <a-select v-model="form.section" placeholder="璇烽�夋嫨">
+ <a-option value="section one">Section One</a-option>
+ <a-option value="section two">Section Two</a-option>
+ <a-option value="section three">Section Three</a-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item field="name" label="妯″瀷鍚嶇О">
+ <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�"/>
+ </a-form-item>
+ <a-form-item field="section" label="妯″瀷鍥剧墖">
+ <a-space direction="vertical" :style="{ width: '100%' }">
+ <a-upload
+ action="/"
+ :fileList="file ? [file] : []"
+ :show-file-list="false"
+ @change="onChange"
+ @progress="onProgress"
+ >
+ <template #upload-button>
+ <div
+ :class="`arco-upload-list-item${
+ file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
+ }`"
+ >
+ <div
+ class="arco-upload-list-picture custom-upload-avatar"
+ v-if="file && file.url"
+ >
+ <img :src="file.url" />
+ <div class="arco-upload-list-picture-mask">
+ <IconEdit />
+ </div>
+ <a-progress
+ v-if="file.status === 'uploading' && file.percent < 100"
+ :percent="file.percent"
+ type="circle"
+ size="mini"
+ :style="{
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateX(-50%) translateY(-50%)',
+ }"
+ />
+ </div>
+ <div class="arco-upload-picture-card" v-else>
+ <div class="arco-upload-picture-card-text">
+ <IconPlus />
+ <div style="margin-top: 10px; font-weight: 600">涓婁紶</div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </a-upload>
+ </a-space>
+ </a-form-item>
+ <a-form-item field="name" label="鍩虹Url">
+ <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�"/>
+ </a-form-item>
+ <a-form-item field="raptor" label="鏄惁鏀寔 Vision">
+ <a-switch v-model="form.raptor" />
+ </a-form-item>
+
+ <a-form-item>
+ <div style="width: 100%;text-align: right">
+ <a-button @click="visible = false">鍙栨秷</a-button>
+ <a-button style="margin-left: 10px" type="primary" html-type="submit">纭畾</a-button>
+ </div>
+ </a-form-item>
+ </a-form>
+ </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+
+const visible = ref(false);
+const loading = ref(false);
+const form = reactive({
+ size: "medium",
+ name: "",
+ age: undefined,
+ section: "0",
+ province: "haidian",
+ options: [],
+ date: "",
+ time: "",
+ radio: "radio one",
+ slider: 5,
+ score: 5,
+ switch: false,
+ multiSelect: ["section one"],
+ treeSelect: "",
+ raptor: false,
+ prompt: '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' +
+ ' {cluster_content}\n' +
+ '浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��',
+});
+const formRef = ref(null);
+
+const rules = {
+ name: [
+ {
+ required: true,
+ message:'鍚嶇О涓嶅厑璁镐负绌�',
+ },
+ ],
+}
+
+
+const handleSubmit = ({values, errors}) => {
+ console.log('values:', values, '\nerrors:', errors)
+}
+
+const handleClick = () => {
+ visible.value = true;
+};
+const handleBeforeOk = (done) => {
+ formRef.value.validate().then(res => {
+ console.log('form:', form)
+ if (!form.name) {
+ done(false)
+ }else {
+ console.log('璇锋眰鏁版嵁');
+
+ }
+ })
+};
+const handleCancel = () => {
+ visible.value = false;
+}
+
+const handleOpened =(el) => {
+ Object.assign(form,{
+ name: '',// 鐢ㄦ埛鍚�
+ nameJoin: '',// 鏄电О
+ post: '',// 宀椾綅
+ txt: '',// 澶囨敞
+ });
+ formRef.value.resetFields();
+}
+
+const file = ref();
+
+const onChange = (_, currentFile) => {
+ file.value = {
+ ...currentFile,
+ // url: URL.createObjectURL(currentFile.file),
+ };
+};
+const onProgress = (currentFile) => {
+ file.value = currentFile;
+};
+
+onBeforeMount(()=>{
+
+})
+onMounted(()=>{
+
+
+})
+</script>
+
+<script lang="ts">
+export default {
+ name: 'add',
+ methods: {
+
+ }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/dmx/model/index.vue b/src/views/dmx/model/index.vue
index 447cf0e..7965e45 100644
--- a/src/views/dmx/model/index.vue
+++ b/src/views/dmx/model/index.vue
@@ -10,75 +10,61 @@
:active-key="activeKey"
type="line"
:editable="true"
- show-add-button
@tab-click="changeTabs"
@add="handleAdd"
@delete="handleDelete"
>
- <!-- <a-tab-pane key="1" :title="$t('cardList.tab.title.all')">-->
- <!-- <QualityInspection />-->
- <!-- <TheService />-->
- <!-- <RulesPreset />-->
- <!-- </a-tab-pane>-->
- <!-- <a-tab-pane key="2" :title="$t('cardList.tab.title.content')">-->
- <!-- <QualityInspection />-->
- <!-- </a-tab-pane>-->
- <!-- <a-tab-pane key="3" :title="$t('cardList.tab.title.service')">-->
- <!-- <TheService />-->
- <!-- </a-tab-pane>-->
- <!-- <a-tab-pane key="4" :title="$t('cardList.tab.title.preset')">-->
- <!-- <RulesPreset />-->
- <!-- </a-tab-pane>-->
-
<a-tab-pane
v-for="(item, index) of data"
:key="item.key"
:title="item.title"
:closable="index >= 4"
>
- <QualityInspection v-if="activeKey === 1" />
- <TheService v-if="activeKey === 1" />
- <RulesPreset v-if="activeKey === 1" />
-
- <QualityInspection v-if="activeKey === 2" />
-
- <TheService v-if="activeKey === 3" />
- <RulesPreset v-if="activeKey === 4" />
- <CustomSettings v-if="activeKey > 4" />
+ <div style="display: flex; flex-wrap: wrap;justify-content: space-between;">
+ <div class="card-wrap" v-for="(item, index) of data" :key="index">
+ <a-card :bordered="false" hoverable >
+ <template #cover>
+ <div
+ >
+ <img
+ :style="{ width: '100%', transform: 'translateY(-20px)' }"
+ alt="dessert"
+ src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
+ />
+ </div>
+ </template>
+ <div class="arco-card-body-content">
+ <div class="arco-card-body-content-title">
+ {{ item.title }}
+ </div>
+ </div>
+ <div style="position: absolute; bottom: 1rem; right: 1rem;">
+ <a-space>
+ <a-button>
+ 鍒犻櫎
+ </a-button>
+ <editModel></editModel>
+ </a-space>
+ </div>
+ </a-card>
+ </div>
+ </div>
</a-tab-pane>
</a-tabs>
</a-col>
<div> </div>
<a-input-search
:placeholder="$t('cardList.searchInput.placeholder')"
- style="width: 240px; position: absolute; top: 60px; right: 20px"
+ style="width: 240px; position: absolute; top: 60px; right: 60px"
/>
+ <div style="position: absolute; top: 60px; right: 20px">
+ <addModel></addModel>
+ </div>
+
</a-row>
</a-card>
</a-col>
</a-row>
-
- <a-modal v-model:visible="visible" @Ok="handleOk" @cancel="handleCancel">
- <template #title> 娣诲姞妗嗘灦 </template>
- <a-form
- ref="formRef"
- :size="form.size"
- :model="form"
- @submit="handleSubmit"
- >
- <a-form-item
- field="name"
- label="鏍囩鍚�"
- :rules="[
- { required: true, message: '涓嶈兘涓虹┖' },
- { minLength: 1, message: '鑷冲皯涓�涓瓧绗�' },
- ]"
- :validate-trigger="['change', 'input']"
- >
- <a-input v-model="form.name" placeholder="璇疯緭鍏ユ爣绛惧悕" />
- </a-form-item>
- </a-form>
- </a-modal>
</div>
</template>
@@ -89,6 +75,8 @@
import TheService from './components/the-service.vue';
import RulesPreset from './components/rules-preset.vue';
import CustomSettings from './components/custom-settings.vue';
+ import addModel from "@/views/dmx/model/components/addModel.vue";
+ import editModel from "@/views/dmx/model/components/editModel.vue";
let count = 5;
const activeKey = ref(1);
@@ -211,4 +199,65 @@
}
}
}
+ .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);
+ }
+ :deep(.arco-card) {
+ height: 100%;
+ border-radius: 4px;
+ .arco-card-body {
+ height: 100%;
+ .arco-space {
+ width: 100%;
+ height: 100%;
+ .arco-space-item {
+ height: 100%;
+ &:last-child {
+ flex: 1;
+ }
+ .arco-card-meta {
+ height: 100%;
+ display: flex;
+ flex-flow: column;
+ .arco-card-meta-content {
+ flex: 1;
+ .arco-card-meta-description {
+ margin-top: 8px;
+ color: rgb(var(--gray-6));
+ line-height: 20px;
+ font-size: 12px;
+ }
+ }
+ .arco-card-meta-footer {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ :deep(.arco-card-meta-title) {
+ display: flex;
+ align-items: center;
+
+ // To prevent the shaking
+ line-height: 28px;
+ }
+ :deep(.arco-skeleton-line) {
+ &:last-child {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0