From 2c508597b071d0925ea4db8552ab15714f53bd99 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 18 Sep 2025 16:04:25 +0800
Subject: [PATCH] feat：vue3 更新统一弹窗和列表 搜索样式
---
src/components/commonDialog.vue | 48 +++++++++
src/views/job/components/TaskTop/TaskTime.vue | 2
src/views/algorithmMange/algorithmMange.vue | 153 ++++++++++--------------------
src/styles/common.scss | 1
src/styles/element-ui.scss | 70 ++++++++++++++
5 files changed, 171 insertions(+), 103 deletions(-)
diff --git a/src/components/commonDialog.vue b/src/components/commonDialog.vue
new file mode 100644
index 0000000..ad571df
--- /dev/null
+++ b/src/components/commonDialog.vue
@@ -0,0 +1,48 @@
+<template>
+ <el-dialog class="ztzf-dialog-mange" append-to-body v-model="props.isShowView" :title="props.title"
+ :width="props.width" :close-on-click-modal="false" :destroy-on-close="true" @close="cancel">
+ <slot name="default" />
+ <template #footer v-if="props.addEditView !== 'view'">
+ <div class="dialog-footer">
+ <el-button v-if="props.addEditView === 'add'" type="primary" @click="submit" :icon="CirclePlus">保存</el-button>
+ <el-button v-else type="primary" @click="submit" :icon="CircleCheck">确认</el-button>
+ <el-button @click="cancel" :icon="CircleClose">取消</el-button>
+ </div>
+ </template>
+ </el-dialog>
+</template>
+<script setup>
+import { ElMessage } from 'element-plus'
+import { Delete, Search, CircleCheck, CircleClose, CirclePlus } from '@element-plus/icons-vue'
+import { defineEmits } from 'vue';
+
+const emit = defineEmits(['cancel', 'confirm']);
+
+const props = defineProps({
+ width: {
+ type: String,
+ default: '800'
+ },
+ isShowView: {
+ type: Boolean,
+ default: false
+ },
+ addEditView: {
+ type: String,
+ default: 'add'
+ },
+ title:{
+ type: String,
+ default: ''
+ }
+})
+
+function submit() {
+ emit('submit')
+}
+function cancel() {
+ emit('cancel')
+}
+</script>
+<style scoped lang="scss">
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index b5114eb..4464cf7 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -2,6 +2,7 @@
@import './variables.scss';
@import './base.scss';
@import './tool.scss';
+@import './element-ui.scss';
a {
text-decoration: none;
color: #333;
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 938aeb8..2a5fee7 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -138,4 +138,74 @@
}
}
}
+}
+//======以下针对表格功能 增删查改样式和弹窗=========
+.ztzf-dialog-mange {
+ .el-dialog__body {
+ padding: 2rem 2rem 4rem;
+ flex: 1;
+ overflow: scroll;
+ border-top: 0.1rem solid #f0f0f0;
+ }
+ .el-dialog__footer {
+ z-index: 2;
+ display: block;
+ padding: 1rem 1.6rem;
+ box-sizing: border-box;
+ border-top: 0.1rem solid #f0f0f0;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background-color: #fff;
+ text-align: right;
+ }
+}
+.ztzf-search-mange {
+ height: 40px;
+ .search-contain {
+ display: flex;justify-content: space-between;
+ }
+}
+.ztzf-form-mange {
+ .el-form-item {
+ width: 300px;
+ :deep(.el-form-item__label) {
+ width: 120px;
+ }
+ }
+}
+
+.ztzf-table-mange {
+ th.el-table__cell {
+ color: rgba(0, 0, 0, .85);
+ background-color: #fafafa;
+ }
+}
+
+.table-view-mange {
+ width: 100%;
+ border-top: 0.1rem solid #ebeef5;
+ border-left: 0.1rem solid #ebeef5;
+ margin-left: 0;
+ margin-right: 0;
+ .el-col {
+ padding-left: 0;
+ padding-right: 0;
+ margin-bottom: 0;
+ height: 32px;
+ line-height: 32px;
+ border-right: 0.1rem solid #ebeef5;
+ text-align: center;
+ align-items: center;
+ .el-input__wrapper {
+ box-shadow: none !important;
+ border-bottom: 0.1rem solid #ebeef5;
+ }
+ }
+ .label {
+ color: #909399;
+ box-sizing: border-box;
+ background: #fafafa;
+ }
}
\ No newline at end of file
diff --git a/src/views/algorithmMange/algorithmMange.vue b/src/views/algorithmMange/algorithmMange.vue
index 4cf0684..fa3cfce 100644
--- a/src/views/algorithmMange/algorithmMange.vue
+++ b/src/views/algorithmMange/algorithmMange.vue
@@ -1,30 +1,27 @@
<template>
<div class="algorithmMange">
- <div class="search-box">
+ <div class="ztzf-search-mange">
<el-form :model="params" inline>
- <div style="display: flex;justify-content: space-between;">
+ <div class="search-contain">
<div>
<el-form-item label="算法名称:">
- <el-input v-model="params.algName" placeholder="请输入算法名称" clearable />
- </el-form-item>
- <el-form-item label="算法类型:">
- <el-select class="ztzf-select" :teleported="false" v-model="params.algTypeCode" placeholder="请选择算法类型" clearable>
- <el-option v-for="item in sfTypes" :key="item.id" :label="item.dictValue" :value="item.dictKey" ></el-option>
- </el-select>
- </el-form-item>
- </div>
- <div>
- <el-form-item class="btns">
- <el-button type="primary" @click="getList">搜索</el-button>
- <el-button @click="cancelSearch">清空</el-button>
+ <el-input v-model="params.algName" placeholder="请输入算法名称" clearable />
+ </el-form-item>
+ <el-form-item label="算法类型:">
+ <el-select class="ztzf-select" :teleported="false" v-model="params.algTypeCode" placeholder="请选择算法类型" clearable>
+ <el-option v-for="item in sfTypes" :key="item.id" :label="item.dictValue" :value="item.dictKey" ></el-option>
+ </el-select>
</el-form-item>
</div>
+ <div class="btns">
+ <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
+ <el-button @click="cancelSearch" :icon="Delete">清空</el-button>
+ </div>
</div>
-
</el-form>
</div>
<div class="mange-table">
- <el-table border :data="tableList" class="custom-header">
+ <el-table border :data="tableList" class="ztzf-table-mange">
<el-table-column label="序号" type="index" width="60"></el-table-column>
<el-table-column prop="model_name" label="算法名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="alg_type" label="算法类型" align="center"></el-table-column>
@@ -60,40 +57,42 @@
</div>
<div class="pagination">
<el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
- :page-sizes="[10, 20, 30, 40, 50, 100]" :size="size" v-model:current-page="params.current"
+ :page-sizes="[10, 20, 30, 40, 50, 100]" :size="params.size" v-model:current-page="params.current"
v-model:page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
- <el-dialog class="ztzf-dialog" append-to-body v-model="isShowView" title="查看"
- :width="pxToRem(600)" :close-on-click-modal="false" :destroy-on-close="true">
- <div class="content">
- <table class="view-table" border>
- <tr>
- <td class="label">算法名称</td>
- <td class="value">{{ rowView.model_name }}</td>
- <td class="label">算法类型</td>
- <td class="value">{{ rowView.alg_type }}</td>
- </tr>
- <tr>
- <td class="label">最低准确率</td>
- <td class="value">{{ rowView.qua_rate }}</td>
- <td class="label">最高准确率</td>
- <td class="value">{{ rowView.pass_rate }}</td>
- </tr>
- <tr>
- <td class="label">事件生成类型</td>
- <td class="value">{{ rowView.event_type == 0 ? '常规类' : '紧急类' }}</td>
- <td class="label">算法描述</td>
- <td class="value">{{ rowView.remark }}</td>
- </tr>
- </table>
- </div>
- </el-dialog>
- <el-dialog class="ztzf-dialog" append-to-body v-model="isShowEditView" title="编辑"
- :width="pxToRem(800)" :close-on-click-modal="false" :destroy-on-close="true">
- <div class="content-edit">
- <el-form ref="ruleFormRef" :model="editParams" :rules="rules" inline>
+ <commonDialog :isShowView="isShowViewTest" width="1000" title="查看" addEditView="view" @cancel="isShowViewTest = false">
+ <template #default>
+ <el-row :gutter="0" class="table-view-mange">
+ <el-col :span="6" class="label">算法名称</el-col>
+ <el-col :span="6">{{ rowView.model_name }}</el-col>
+ <el-col :span="6" class="label">算法类型</el-col>
+ <el-col :span="6">{{ rowView.alg_type }}</el-col>
+ </el-row>
+ <el-row :gutter="0" class="table-view-mange">
+ <el-col :span="6" class="label">最低准确率</el-col>
+ <el-col :span="6">{{ rowView.qua_rate }}</el-col>
+ <el-col :span="6" class="label">最高准确率</el-col>
+ <el-col :span="6">{{ rowView.pass_rate }}</el-col>
+ </el-row>
+ <el-row :gutter="0" class="table-view-mange">
+ <el-col :span="6" class="label">事件生成类型</el-col>
+ <el-col :span="6">{{ rowView.event_type == 0 ? '常规类' : '紧急类' }}</el-col>
+ <el-col :span="6" class="label"></el-col>
+ <el-col :span="6"></el-col>
+ </el-row>
+ <el-row :gutter="0" class="table-view-mange">
+ <el-col :span="6" class="label">算法描述</el-col>
+ <el-col :span="18">
+ <el-input v-model="rowView.remark"></el-input>
+ </el-col>
+ </el-row>
+ </template>
+ </commonDialog>
+ <commonDialog :isShowView="isShowEditView" title="编辑" addEditView="edit" @submit="submit(ruleFormRef)" @cancel="isShowEditView = false">
+ <template #default>
+ <el-form class="ztzf-form-mange" ref="ruleFormRef" :model="editParams" :rules="rules" inline>
<el-form-item label="算法名称">
<el-input v-model="editParams.model_name" disabled />
</el-form-item>
@@ -117,18 +116,16 @@
<el-form-item label="算法描述">
<el-input v-model="editParams.remark" placeholder="请输入算法描述" clearable />
</el-form-item>
- <div class="btns">
- <el-button type="primary" @click="submit(ruleFormRef)">确认</el-button>
- <el-button @click="isShowEditView = false">取消</el-button>
- </div>
</el-form>
- </div>
- </el-dialog>
+ </template>
+ </commonDialog>
</template>
<script setup>
import { getAlgorithmManageList, algorithmManageEdit } from '@/api/algorithmMange/algorithmMange';
import { getDictionaryByCode } from '@/api/system/dictbiz';
+import commonDialog from '@/components/commonDialog.vue'
import { ElMessage } from 'element-plus';
+import { Delete, Search } from '@element-plus/icons-vue'
const total = ref(0)
const params = ref({
@@ -140,7 +137,7 @@
let tableList = ref([])
-let isShowView = ref(false)
+let isShowViewTest = ref(false)
let rowView = ref({})
@@ -219,7 +216,7 @@
});
}
function handleDetail(row) {
- isShowView.value = true
+ isShowViewTest.value = true
rowView.value = row
}
function handleEdit(row) {
@@ -302,52 +299,4 @@
}
}
}
-
- .content {
- padding: 20px;
-
- .view-table {
- width: 100%;
- border-collapse: collapse;
- border: 1px solid #EBEEF5;
-
- tr {
- &:not(:last-child) {
- border-bottom: 1px solid #EBEEF5;
- }
-
- td {
- padding: 12px 10px;
-
- &.label {
- width: 140px;
- text-align: right;
- // color: #909399;
- // background-color: #F5F7FA;
- border-right: 1px solid #EBEEF5;
- }
-
- &.value {
- width: 180px;
- // color: #303133;
- }
- }
- }
- }
-}
-.content-edit {
- .el-form {
- .el-form-item {
- width: 300px;
- :deep(.el-form-item__label) {
- width: 120px;
- }
-
- }
- .btns {
- display: flex;
- justify-content: center
- }
- }
-}
</style>
\ No newline at end of file
diff --git a/src/views/job/components/TaskTop/TaskTime.vue b/src/views/job/components/TaskTop/TaskTime.vue
index b90fc81..f81088e 100644
--- a/src/views/job/components/TaskTop/TaskTime.vue
+++ b/src/views/job/components/TaskTop/TaskTime.vue
@@ -69,7 +69,7 @@
show: true,
length: 2,
lineStyle: {
- color: '#363636',
+ color: 'red',
},
},
axisLabel: {
--
Gitblit v1.9.3