From 8d8a1802d787da68dcc3c4d30b2015595fec31b8 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Fri, 4 Mar 2022 15:09:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/views/system/DictList.vue | 222 +++++++++++++++----------
 1 file changed, 137 insertions(+), 85 deletions(-)

diff --git a/jero-web/src/views/system/DictList.vue b/jero-web/src/views/system/DictList.vue
index 2279a9eef..baa7b612f 100644
--- a/jero-web/src/views/system/DictList.vue
+++ b/jero-web/src/views/system/DictList.vue
@@ -4,40 +4,59 @@
     <!-- 左侧面板 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="12">
-          <a-col :md="7" :sm="8">
-            <a-form-item :label="$t('DictionaryName')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <a-input :placeholder="$t('enterDictionary')" v-model="queryParam.dictName"></a-input>
-            </a-form-item>
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('DictionaryName')">
+                <span>{{$t('DictionaryName')}}</span>
+              </div>
+              <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('DictionaryName')"
+                       v-model="queryParam.dictName"></j-input>
+            </div>
           </a-col>
-          <a-col :md="7" :sm="8">
-            <a-form-item :label="$t('DictionaryEnName')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <a-input :placeholder="$t('enterEnDictionary')" v-model="queryParam.dictEnName"></a-input>
-            </a-form-item>
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('DictionaryEnName')">
+                <span>{{$t('DictionaryEnName')}}</span>
+              </div>
+              <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('DictionaryEnName')"
+                       v-model="queryParam.dictEnName"></j-input>
+            </div>
           </a-col>
-          <a-col :md="7" :sm="8">
-            <a-form-item :label="$t('DictionaryNumber')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <a-input :placeholder="$t('enterDictionaryNumber')" v-model="queryParam.dictCode"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="7" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('reset')}}</a-button>
-            </span>
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('DictionaryNumber')">
+                <span>{{$t('DictionaryNumber')}}</span>
+              </div>
+              <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('DictionaryNumber')"
+                       v-model="queryParam.dictCode"></j-input>
+            </div>
           </a-col>
+          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+               </a-col>
+      </span>
         </a-row>
       </a-form>
 
-      <div class="table-operator" style="border-top: 5px">
-        <a-button @click="handleAdd" type="primary" icon="plus">{{$t('addTo')}}</a-button>
-        <a-button type="primary" icon="download" @click="handleExportXls(this.$t('DictionaryInformation'))">{{$t('export')}}</a-button>
-        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-          <a-button type="primary" icon="import">{{$t('import')}}</a-button>
-        </a-upload>
-        <a-button type="primary" icon="sync" @click="refleshCache()">{{$t('RefreshCache')}}}</a-button>
+      <div class="table-operator">
+        <!--        <a-button @click="handleAdd" type="primary" icon="plus">{{$t('addTo')}}</a-button>-->
+        <div @click="handleAdd" class="operator-text">
+          <a-icon type="plus"/>
+          {{$t('addTo')}}
+        </div>
+        <!--        <a-button type="primary" icon="download" @click="handleExportXls(this.$t('DictionaryInformation'))">-->
+        <!--          {{$t('export')}}-->
+        <!--        </a-button>-->
+        <!--        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
+        <!--                  @change="handleImportExcel">-->
+        <!--          <a-button type="primary" icon="import">{{$t('import')}}</a-button>-->
+        <!--        </a-upload>-->
+        <!--        <a-button type="primary" icon="sync" @click="refleshCache()">{{$t('RefreshCache')}}}</a-button>-->
 
-        <a-button type="primary" icon="hdd" @click="openDeleteList">{{$t('recycleBin')}}</a-button>
+        <!--        <a-button type="primary" icon="hdd" @click="openDeleteList">{{$t('recycleBin')}}</a-button>-->
       </div>
 
       <a-table
@@ -51,11 +70,10 @@
         @change="handleTableChange">
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">
-            <a-icon type="edit"/>
             {{$t('edit')}}
           </a>
           <a-divider type="vertical"/>
-          <a @click="editDictItem(record)"><a-icon type="setting"/> {{$t('DictionaryConfiguration')}}</a>
+          <a @click="editDictItem(record)"> {{$t('DictionaryConfiguration')}}</a>
           <a-divider type="vertical"/>
           <a-popconfirm :title="$t('areYouSure')" @confirm="() =>handleDelete(record.id)">
             <a>{{$t('delete')}}</a>
@@ -71,27 +89,27 @@
 </template>
 
 <script>
-  import { filterObj } from '@/utils/util';
+  import { filterObj } from '@/utils/util'
   import { JeroListMixin } from '@/mixins/JeroListMixin'
   import DictModal from './modules/DictModal'
   import DictItemList from './DictItemList'
   import DictDeleteList from './DictDeleteList'
   import { getAction } from '@/api/manage'
-  import { UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
+  import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
   import Vue from 'vue'
 
   export default {
-    name: "DictList",
-    mixins:[JeroListMixin],
-    components: {DictModal, DictItemList,DictDeleteList},
+    name: 'DictList',
+    mixins: [JeroListMixin],
+    components: { DictModal, DictItemList, DictDeleteList },
     data() {
       return {
         description: this.$t('dataDictionaryPage'),
         visible: false,
         // 查询条件
         queryParam: {
-          dictCode: "",
-          dictName: "",
+          dictCode: '',
+          dictName: ''
         },
         // 表头
         columns: [
@@ -100,15 +118,15 @@
             dataIndex: '',
             key: 'rowIndex',
             width: 120,
-            align: "center",
-            customRender: function (t, r, index) {
-              return parseInt(index) + 1;
+            align: 'center',
+            customRender: function(t, r, index) {
+              return parseInt(index) + 1
             }
           },
           {
             title: this.$t('DictionaryName'),
-            align: "left",
-            dataIndex: 'dictName',
+            align: 'left',
+            dataIndex: 'dictName'
           },
           // {
           //   title: this.$t('DictionaryEnName'),
@@ -118,80 +136,80 @@
           // },
           {
             title: this.$t('DictionaryNumber'),
-            align: "left",
-            dataIndex: 'dictCode',
+            align: 'left',
+            dataIndex: 'dictCode'
           },
           {
             title: this.$t('describe'),
-            align: "left",
-            dataIndex: 'description',
+            align: 'left',
+            dataIndex: 'description'
           },
           {
             title: this.$t('operation'),
             dataIndex: 'action',
-            align: "center",
-            width: 230,
-            scopedSlots: {customRender: 'action'},
+            align: 'center',
+            width: 430,
+            scopedSlots: { customRender: 'action' }
           }
         ],
-        dict: "",
+        dict: '',
         labelCol: {
-          xs: {span: 8},
-          sm: {span: 5},
+          xs: { span: 8 },
+          sm: { span: 5 }
         },
         wrapperCol: {
-          xs: {span: 16},
-          sm: {span: 19},
+          xs: { span: 16 },
+          sm: { span: 19 }
         },
         url: {
-          list: "/sys/dict/page",
-          delete: "/sys/dict/delete",
-          exportXlsUrl: "sys/dict/exportXls",
-          importExcelUrl: "sys/dict/importExcel",
-          refleshCache: "sys/dict/refleshCache",
-          queryAllDictItems: "sys/dict/queryAllDictItems",
-        },
+          list: '/sys/dict/page',
+          delete: '/sys/dict/delete',
+          exportXlsUrl: 'sys/dict/exportXls',
+          importExcelUrl: 'sys/dict/importExcel',
+          refleshCache: 'sys/dict/refleshCache',
+          queryAllDictItems: 'sys/dict/queryAllDictItems'
+        }
       }
     },
     computed: {
-      importExcelUrl: function () {
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      importExcelUrl: function() {
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
       }
     },
     methods: {
       getQueryParams() {
-        var param = Object.assign({}, this.queryParam, this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
+        var param = Object.assign({}, this.queryParam, this.isorter)
+        param.field = this.getQueryField()
+        param.pageNo = this.ipagination.current
+        param.pageSize = this.ipagination.pageSize
         if (this.superQueryParams) {
           param['superQueryParams'] = encodeURI(this.superQueryParams)
           param['superQueryMatchType'] = this.superQueryMatchType
         }
-        return filterObj(param);
+        return filterObj(param)
       },
       //取消选择
       cancelDict() {
-        this.dict = "";
-        this.visible = false;
-        this.loadData();
+        this.dict = ''
+        this.visible = false
+        this.loadData()
       },
       //编辑字典数据
       editDictItem(record) {
-        this.$refs.dictItemList.edit(record);
+        this.$refs.dictItemList.edit(record)
       },
       // 重置字典类型搜索框的内容
       searchReset() {
-        var that = this;
-        that.queryParam.dictName = "";
-        that.queryParam.dictEnName = "";
-        that.queryParam.dictCode = "";
-        that.loadData(this.ipagination.current);
+        var that = this
+        that.queryParam.dictName = ''
+        that.queryParam.dictEnName = ''
+        that.queryParam.dictCode = ''
+        that.loadData(this.ipagination.current)
       },
-      openDeleteList(){
+      openDeleteList() {
         this.$refs.dictDeleteList.show()
       },
-      refleshCache(){
+      refleshCache() {
         getAction(this.url.refleshCache).then((res) => {
           if (res.success) {
             //重新加载缓存
@@ -201,21 +219,55 @@
                 Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
               }
             })
-            this.$message.success(this.$t('DescriptionRefreshCache'));
+            this.$message.success(this.$t('DescriptionRefreshCache'))
           }
-        }).catch(e=>{
-          this.$message.warn(this.$t('FailedRefreshCache'));
-          console.log(this.$t('refreshFailed'),e)
+        }).catch(e => {
+          this.$message.warn(this.$t('FailedRefreshCache'))
+          console.log(this.$t('refreshFailed'), e)
         })
       }
     },
     watch: {
       openKeys(val) {
         console.log('openKeys', val)
-      },
-    },
+      }
+    }
   }
 </script>
 <style scoped>
-  @import '~@assets/less/common.less'
+  @import '~@assets/less/common.less';
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 90px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
 </style>
\ No newline at end of file