样式优化

vue-fastapi-frontend/src/views/metadataConfig/metaclas/index.vue

@@ -2,197 +2,135 @@
   <div class="app-container">
     <el-row :gutter="10" class="mb8">
       <el-form :inline="true" :model="queryForm">
-
         <el-form-item label="归属系统">
-        <el-select v-model="queryForm.ssysCd" placeholder="请选择系统" clearable   allow-create filterable  style="width: 180px">
+          <el-select v-model="queryForm.ssysCd" placeholder="请选择系统" clearable allow-create filterable style="width: 180px">
-          <el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.name" />
+            <el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.name" />
-        </el-select>
+          </el-select>
-      </el-form-item>
+        </el-form-item>
         <el-form-item label="模式名">
-          <el-input
+          <el-input v-model="queryForm.mdlName" placeholder="请输入模式名" clearable />
-            v-model="queryForm.mdlName"
-            placeholder="请输入模式名"
-            clearable
-          />
         </el-form-item>
-
         <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleSearch"
+          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
-            >搜索</el-button
-          >
           <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
     </el-row>
-<span> 值类型参数调整</span>
+
+<el-divider content-position="center" ><span style=" font-size: 18px; font-weight: bold; ">值类型参数调整</span></el-divider>
+
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="openAddDialog1"
+        <el-button type="primary" plain icon="Plus" @click="openAddDialog1">新增</el-button>
-          >新增</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="Edit" :disabled="selectedRows1.length !== 1" @click="openEditDialog1(selectedRows1[0])">修改</el-button>
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="selectedRows1.length !== 1"
-          @click="openEditDialog1(selectedRows1[0])"
-          >修改</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="Delete" :disabled="selectedRows1.length === 0" @click="deleteSelected1">删除</el-button>
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="selectedRows1.length === 0"
-          @click="deleteSelected1"
-          >删除</el-button
-        >
       </el-col>
     </el-row>
 
-    <el-table
+    <el-table v-loading="loading" :data="configList1" @selection-change="handleSelectionChange1" style="width: 100%" height="400" border stripe>
-      v-loading="loading"
-      :data="configList1"
-      @selection-change="handleSelectionChange1"
-      style="width: 100%"
-      height="500"
-
-      border
-      stripe
-    >
       <el-table-column type="selection" width="55" />
-      <el-table-column prop="datatype" label="值类型"/>
+      <el-table-column prop="datatype" label="值类型" />
-      <el-table-column prop="ratio" label="阈值"/>
+      <el-table-column prop="ratio" label="阈值" />
-      <el-table-column prop="updBy" label="更新人"/>
+      <el-table-column prop="updBy" label="更新人" />
-
       <el-table-column prop="updTime" label="更新时间" />
     </el-table>
 
-<span> 业务类型参数调整</span>
+<el-divider content-position="center" ><span style=" font-size: 18px; font-weight: bold; ">业务类型参数调整</span></el-divider>
+
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="openAddDialog2"
+        <el-button type="primary" plain icon="Plus" @click="openAddDialog2">新增</el-button>
-          >新增</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="Edit" :disabled="selectedRows2.length !== 1" @click="openEditDialog2(selectedRows2[0])">修改</el-button>
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="selectedRows2.length !== 1"
-          @click="openEditDialog2(selectedRows2[0])"
-          >修改</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="Delete" :disabled="selectedRows2.length === 0" @click="deleteSelected2">删除</el-button>
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="selectedRows2.length === 0"
-          @click="deleteSelected2"
-          >删除</el-button
-        >
       </el-col>
     </el-row>
 
-    <el-table
+    <el-table v-loading="loading" :data="configList2" @selection-change="handleSelectionChange2" style="width: 100%" height="400" border stripe>
-      v-loading="loading"
+      <el-table-column type="selection" width="55" />
-      :data="configList2"
+      <el-table-column prop="regexName" label="业务类型" />
-      @selection-change="handleSelectionChange2"
+      <el-table-column prop="regexPattern" label="正则表达式" />
-      style="width: 100%"
+      <el-table-column prop="ratio" label="阈值" />
-      height="500"
-      border
-      stripe
-    >
-   <el-table-column type="selection" width="55" />
-      <el-table-column prop="regexName" label="业务类型"/>
-      <el-table-column prop="regexPattern" label="正则表达式"  />
-      <el-table-column prop="ratio" label="阈值"  />
       <el-table-column prop="updBy" label="更新人" />
-
+      <el-table-column prop="updTime" label="更新时间" />
-      <el-table-column prop="updTime" label="更新时间"  />
     </el-table>
 
-<span> 字段处理类型参数调整</span>  
+
-<el-form
+<el-divider content-position="center" ><span style=" font-size: 18px; font-weight: bold; ">字段处理类型参数调整</span></el-divider>
-        ref="clasFormRef3"
+
-        :model="form3"
+    <div style="margin-bottom: 10px">
-        label-width="120px"
+      <span style="display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 4px">唯一类型数值类判定条件</span>
-        size="small"
+      <el-form :inline="true" :model="form3" size="medium">
-      >
+        <el-form-item label="空值率小于">
-<span>唯一类型数值类判定条件</span>
+          <el-input v-model="form3.config1" style="width: 100px" />
-
-        <el-form-item label="空值率小于" prop="config1">
-          <el-input v-model="form3.config1" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="值长度方差小于" prop="config2">
+        <el-form-item label="值长度方差小于">
-          <el-input v-model.number="form3.config2" autocomplete="off" />
+          <el-input v-model.number="form3.config2" style="width: 100px" />
         </el-form-item>
-        <el-form-item label="重复率大于" prop="config3">
+        <el-form-item label="重复率大于">
-          <el-input v-model.number="form3.config3" autocomplete="off" />
+          <el-input v-model.number="form3.config3" style="width: 100px" />
         </el-form-item>
-        <span>唯一类型非数值类判定条件</span>
+      </el-form>
-        <el-form-item label="重复率大于" prop="config4">
+    </div>
-          <el-input v-model.number="form3.config4" autocomplete="off" />
+
+    <div style="margin-bottom: 10px">
+      <span style="display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 4px">唯一类型非数值类判定条件</span>
+      <el-form :inline="true" :model="form3" size="medium">
+        <el-form-item label="重复率大于">
+          <el-input v-model.number="form3.config4" style="width: 100px" />
         </el-form-item>
-        <span>忽略类型数值类判断条件</span>
+      </el-form>
-        <el-form-item label="空值率大于" prop="config5">
+    </div>
-          <el-input v-model.number="form3.config5" autocomplete="off" />
+<div style="border-top: 1px dashed #999; margin: 10px 0;"></div>
+
+    <div style="margin-bottom: 10px">
+      <span style="display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 4px">忽略类型数值类判断条件</span>
+      <el-form :inline="true" :model="form3" size="medium">
+        <el-form-item label="空值率大于">
+          <el-input v-model.number="form3.config5" style="width: 100px" />
         </el-form-item>
-        <span>忽略类型其他判断条件</span>
+      </el-form>
-        <el-form-item label="平均值长大于" prop="config6">
+    </div>
-          <el-input v-model.number="form3.config6" autocomplete="off" />
+
+    <div style="margin-bottom: 10px">
+      <span style="display: inline-block; font-size: 14px; font-weight: bold; margin-bottom: 4px">忽略类型其他判断条件</span>
+      <el-form :inline="true" :model="form3" size="medium">
+        <el-form-item label="平均值长大于">
+          <el-input v-model.number="form3.config6" style="width: 100px" />
+
+        </el-form-item>
+        <el-form-item >
+              <el-button type="primary" @click="submitForm3">保存</el-button>
+
         </el-form-item>
       </el-form>
-        <el-button type="primary" @click="submitForm3">保存</el-button>
+    </div>
-    <el-dialog
+
-      :title="title"
-      v-model="open1"
-      width="500px"
-      append-to-body
-      :before-close="handleClose1"
-    >
-      <el-form
-        ref="clasFormRef1"
-        :model="form1"
-        :rules="rules1"
-        label-width="120px"
-        size="small"
-      >
 
+    <el-dialog :title="title" v-model="open1" width="500px" append-to-body :before-close="handleClose1">
+      <el-form ref="clasFormRef1" :model="form1" :rules="rules1" label-width="120px" size="medium">
         <el-form-item label="值类型" prop="datatype">
           <el-input v-model="form1.datatype" autocomplete="off" />
         </el-form-item>
         <el-form-item label="阈值" prop="ratio">
           <el-input v-model.number="form1.ratio" autocomplete="off" />
         </el-form-item>
-
       </el-form>
       <template #footer>
         <el-button @click="open1 = false">取消</el-button>
         <el-button type="primary" @click="submitForm1">保存</el-button>
       </template>
     </el-dialog>
-        <el-dialog
-      :title="title"
-      v-model="open2"
-      width="500px"
-      append-to-body
-      :before-close="handleClose2"
-    >
-      <el-form
-        ref="clasFormRef2"
-        :model="form2"
-        :rules="rules2"
-        label-width="120px"
-        size="small"
-      >
 
+    <el-dialog :title="title" v-model="open2" width="500px" append-to-body :before-close="handleClose2">
+      <el-form ref="clasFormRef2" :model="form2" :rules="rules2" label-width="120px" size="small">
         <el-form-item label="业务类型" prop="regexName">
           <el-input v-model="form2.regexName" autocomplete="off" />
         </el-form-item>
@@ -202,7 +140,6 @@
         <el-form-item label="阈值" prop="ratio">
           <el-input v-model.number="form2.ratio" autocomplete="off" />
         </el-form-item>
-
       </el-form>
       <template #footer>
         <el-button @click="open2 = false">取消</el-button>
@@ -212,6 +149,7 @@
   </div>
 </template>
 
+
 <script setup>
 import { ref, reactive, onMounted } from "vue";
 import { ElMessageBox, ElMessage } from "element-plus";
@@ -390,7 +328,7 @@ function deleteSelected1() {
   ).then(async () => {
     try {
       for (const row of selectedRows1.value) {
-        await deleteDatatypeLabel(row.clasOnum);
+        await deleteDatatypeLabel(row.onum);
       }
       ElMessage.success("删除成功");
       getList1();
@@ -479,3 +417,33 @@ onMounted(() => {
   getList3();
 });
 </script>
+<style scoped>
+.app-container {
+  padding: 20px;
+  background: #fff;
+}
+.section-block {
+  margin-top: 30px;
+}
+.section-header {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.action-bar {
+  margin-bottom: 10px;
+  display: flex;
+  gap: 10px;
+}
+.filter-form {
+  margin-bottom: 10px;
+}
+.config-form {
+  max-width: 600px;
+  padding: 20px 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+</style>