From 0622a42af5b843fab573688bd25cb124d498b9a1 Mon Sep 17 00:00:00 2001
From: smallchill <smallchill@163.com>
Date: Fri, 31 Mar 2023 00:35:17 +0800
Subject: [PATCH] :zap: optimize param style

---
 src/option/system/param.js |  48 ----------
 src/views/system/param.vue | 179 ++++++++-----------------------------
 2 files changed, 35 insertions(+), 192 deletions(-)
 delete mode 100644 src/option/system/param.js

diff --git a/src/option/system/param.js b/src/option/system/param.js
deleted file mode 100644
index 3d64e82..0000000
--- a/src/option/system/param.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
-  height: 'auto',
-  calcHeight: 32,
-  tip: false,
-  searchShow: true,
-  searchMenuSpan: 6,
-  border: true,
-  index: true,
-  selection: true,
-  viewBtn: true,
-  dialogClickModal: false,
-  column: [
-    {
-      label: "参数名称",
-      prop: "paramName",
-      search: true,
-      span: 24,
-      rules: [{
-        required: true,
-        message: "请输入参数名称",
-        trigger: "blur"
-      }]
-    },
-    {
-      label: "参数键名",
-      prop: "paramKey",
-      search: true,
-      span: 24,
-      rules: [{
-        required: true,
-        message: "请输入参数键名",
-        trigger: "blur"
-      }]
-    },
-    {
-      label: "参数键值",
-      prop: "paramValue",
-      type: "textarea",
-      span: 24,
-      minRows: 6,
-      rules: [{
-        required: true,
-        message: "请输入参数键值",
-        trigger: "blur"
-      }]
-    }
-  ]
-};
diff --git a/src/views/system/param.vue b/src/views/system/param.vue
index 8a4f6f5..b32eae6 100644
--- a/src/views/system/param.vue
+++ b/src/views/system/param.vue
@@ -1,22 +1,19 @@
 <template>
   <basic-container>
     <div class="avue-crud">
-      <el-row :hidden="!search"
-              style="padding:5px">
+      <el-row :hidden="!search" style="padding:6px 18px">
         <!-- 查询模块 -->
-        <el-form :inline="true"
-                 :model="query">
-          <el-form-item label="参数名">
-            <el-input v-model="query.paramName"
-                      placeholder="请输入参数名"></el-input>
+        <el-form :inline="true" :model="query">
+          <el-form-item label="参数名:">
+            <el-input v-model="query.paramName" placeholder="请输入参数名"></el-input>
+          </el-form-item>
+          <el-form-item label="参数键:">
+            <el-input v-model="query.paramKey" placeholder="请输入参数键"></el-input>
           </el-form-item>
           <!-- 查询按钮 -->
           <el-form-item>
-            <el-button type="primary"
-                       icon="el-icon-search"
-                       @click="searchChange">搜索</el-button>
-            <el-button icon="el-icon-delete"
-                       @click="searchReset()">清空</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
           </el-form-item>
         </el-form>
       </el-row>
@@ -24,47 +21,27 @@
         <div class="avue-crud__menu">
           <!-- 头部左侧按钮模块 -->
           <div class="avue-crud__left">
-            <el-button type="primary"
-                       icon="el-icon-plus"
-                       @click="handleAdd">新增</el-button>
-            <el-button type="danger"
-                       icon="el-icon-delete"
-                       @click="handleDelete"
-                       plain>删除
-            </el-button>
+            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>
           </div>
           <!-- 头部右侧按钮模块 -->
           <div class="avue-crud__right">
-            <el-button icon="el-icon-refresh"
-                       @click="searchChange"
-                       circle></el-button>
-            <el-button icon="el-icon-search"
-                       @click="searchHide"
-                       circle></el-button>
+            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+            <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
           </div>
         </div>
       </el-row>
       <el-row>
         <!-- 列表模块 -->
-        <el-table ref="table"
-                  v-loading="loading"
+        <el-table ref="table" v-loading="loading"
                   @selection-change="selectionChange"
                   :data="data"
                   :height="height"
                   style="width: 100%"
                   :border="option.border">
-          <el-table-column type="selection"
-                           v-if="option.selection"
-                           width="55"
-                           align="center"></el-table-column>
-          <el-table-column type="expand"
-                           v-if="option.expand"
-                           align="center"></el-table-column>
-          <el-table-column v-if="option.index"
-                           label="#"
-                           type="index"
-                           width="50"
-                           align="center">
+          <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>
+          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
+          <el-table-column v-if="option.index" label="#" type="index" width="50" align="center">
           </el-table-column>
           <template v-for="(item,index) in option.column">
             <!-- table字段 -->
@@ -76,33 +53,19 @@
             </el-table-column>
           </template>
           <!-- 操作栏模块 -->
-          <el-table-column prop="menu"
-                           label="操作"
-                           :width="220"
-                           align="center">
+          <el-table-column prop="menu" label="操作" :width="220" align="center">
             <template #="{row}">
-              <el-button type="primary"
-                         text
-                         icon="el-icon-view"
-                         @click="handleView(row)">查看</el-button>
-              <el-button type="primary"
-                         text
-                         icon="el-icon-edit"
-                         @click="handleEdit(row)">编辑</el-button>
-              <el-button type="primary"
-                         text
-                         icon="el-icon-delete"
-                         @click="rowDel(row)">删除</el-button>
+              <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>
+              <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
+              <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-row>
       <el-row>
-        <div class="avue-crud__pagination"
-             style="width:100%">
+        <div class="avue-crud__pagination" style="width:100%">
           <!-- 分页模块 -->
-          <el-pagination class="avue-crud__pagination"
-                         align="right"
+          <el-pagination align="right"
                          background
                          @size-change="sizeChange"
                          @current-change="currentChange"
@@ -120,53 +83,35 @@
                  width="50%"
                  :before-close="beforeClose"
                  append-to-body>
-        <el-form :disabled="view"
-                 ref="form"
-                 :model="form"
-                 label-width="80px">
+        <el-form :disabled="view" ref="form" :model="form" label-width="80px">
           <!-- 表单字段 -->
-          <el-form-item label="参数名"
-                        prop="paramName">
-            <el-input v-model="form.paramName"
-                      placeholder="请输入参数名" />
+          <el-form-item label="参数名:" prop="paramName">
+            <el-input v-model="form.paramName" placeholder="请输入参数名" />
           </el-form-item>
-          <el-form-item label="参数键"
-                        prop="paramKey">
-            <el-input v-model="form.paramKey"
-                      placeholder="请输入参数键" />
+          <el-form-item label="参数键:" prop="paramKey">
+            <el-input v-model="form.paramKey" placeholder="请输入参数键" />
           </el-form-item>
-          <el-form-item label="参数值"
-                        prop="paramValue">
-            <el-input v-model="form.paramValue"
-                      placeholder="请输入参数值" />
+          <el-form-item label="参数值:" prop="paramValue">
+            <el-input v-model="form.paramValue" placeholder="请输入参数值" />
           </el-form-item>
-          <el-form-item label="备注"
-                        prop="remark">
-            <el-input v-model="form.remark"
-                      placeholder="请输入备注" />
+          <el-form-item label="备注:" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" />
           </el-form-item>
         </el-form>
         <!-- 表单按钮 -->
         <template #footer>
           <span v-if="!view"
                 class="dialog-footer">
-            <el-button type="primary"
-                       icon="el-icon-circle-check"
-                       @click="handleSubmit">提 交</el-button>
-            <el-button icon="el-icon-circle-close"
-                       @click="box = false">取 消</el-button>
+            <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit">提 交</el-button>
+            <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
           </span>
         </template>
-
       </el-dialog>
     </div>
   </basic-container>
 </template>
 
 <script>
-import {
-  getDictTree
-} from "@/api/system/dict";
 import { getList, getDetail, add, update, remove } from "@/api/system/param";
 import { mapGetters } from "vuex";
 
@@ -203,12 +148,6 @@ export default {
         border: true,
         selection: true,
         column: [
-          {
-            label: "主键",
-            prop: "id",
-            display: false,
-            hide: true,
-          },
           {
             label: "参数名",
             prop: "paramName",
@@ -225,48 +164,6 @@ export default {
             label: "备注",
             prop: "remark",
           },
-          {
-            label: "创建人",
-            prop: "createUser",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "创建部门",
-            prop: "createDept",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "创建时间",
-            prop: "createTime",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "修改人",
-            prop: "updateUser",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "修改时间",
-            prop: "updateTime",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "状态",
-            prop: "status",
-            display: false,
-            hide: true,
-          },
-          {
-            label: "是否已删除",
-            prop: "isDeleted",
-            display: false,
-            hide: true,
-          },
         ]
       },
       // 表单列表
@@ -274,7 +171,6 @@ export default {
     }
   },
   mounted () {
-    this.height = this.setPx(document.body.clientHeight - 400)
     this.init();
     this.onLoad(this.page);
   },
@@ -290,6 +186,7 @@ export default {
   },
   methods: {
     init () {
+      this.height = this.setPx(document.body.clientHeight - 340)
     },
     searchHide () {
       this.search = !this.search;
@@ -415,9 +312,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.el-pagination {
-  margin-top: 20px;
-}
-</style>