feat：vue3 更新统一弹窗和列表 搜索样式

chenyao

2025-09-18 2c508597b071d0925ea4db8552ab15714f53bd99

feat：vue3 更新统一弹窗和列表 搜索样式

 src/components/commonDialog.vue

New file
@@ -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>

 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;

 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;
  }
}

 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>

 src/views/job/components/TaskTop/TaskTime.vue

@@ -69,7 +69,7 @@
            show: true,
            length: 2,
            lineStyle: {
                color: '#363636',
                color: 'red',
            },
        },
        axisLabel: {