feat: 优化样式，完善LogManage页面

src/components/SearchForm/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search-form">
     <a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
-      <a-row :gutter="20" style="margin-right: 0 !important;">
+      <a-row v-if="type == 'single-line'" :gutter="20" style="margin-right: 0 !important;">
         <a-col
           class="search-form-item"
           v-for="(item, index) in items"
@@ -19,6 +19,21 @@
         </a-button>
         <slot name="additional"></slot>
       </a-row>
+      <!-- 多行自定义 -->
+      <template v-else-if="type == 'multi-line'">
+        <a-row v-for="(item, index) in items" :key="index" :gutter="20" :style="item.style">
+          <a-col
+            class="search-form-item"
+            v-for="(child, index) in item.list"
+            :key="index"
+            :style="child.style"
+          >
+            <a-form-model-item :label="child.label" :prop="child.name" :labelCol="child.labelCol">
+              <component :is="child.type" v-bind="child.props" v-model="formModel[child.name]" v-on="child.on"></component>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </template>
     </a-form-model>
   </div>
 </template>
@@ -34,6 +49,10 @@ export default {
     value: {
       type: Object,
       default: () => ({})
+    },
+    type: {
+      type: String,
+      default: 'single-line'
     }
   },
   data() {
@@ -67,7 +86,7 @@ export default {
   border-top: 1px solid rgba(12, 235, 201, 0.3);
   border-bottom: 1px solid rgba(12, 235, 201, 0.3);
   margin-bottom: 18px;
-  background-color: rgba(12, 235, 201, .05);
+  background-color: rgba(12, 235, 201, 0.05);
   &-item {
     margin-bottom: 10px;
   }
@@ -85,10 +104,12 @@ export default {
   }
   .ant-form-item-control-wrapper {
     width: 100%;
+    overflow: hidden;
   }
 }
 
 .search-btn {
+  margin-bottom: 10px;
   img {
     width: 16px;
     height: 17px;

src/components/TreeWithLine/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tree-with-line">
-    <a-tree v-bind="$attrs" :defaultExpandAll="true">
+    <a-tree v-bind="$attrs" :defaultExpandAll="true" :selected-keys="selectedKeys" @select="onSelect">
       <template slot="switcherIcon">
         <div></div>
       </template>
@@ -8,7 +8,21 @@
   </div>
 </template>
 <script>
-export default {}
+export default {
+  props: {
+    selectedKeys: {
+      type: Array
+    }
+  },
+  methods: {
+    onSelect(selectedKeys, { selected }) {
+      if (selected) {
+        this.$emit('update:selectedKeys', selectedKeys)
+        this.$emit('select')
+      }
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
 .tree-with-line {
@@ -97,6 +111,17 @@ export default {}
         z-index: 1;
       }
     }
+
+    &-node-content-wrapper {
+      display: inline-block;
+      width: calc(100% - 20px);
+    }
+    &-node-selected {
+      .ant-tree-title {
+        display: block;
+        background-color: #032d30 !important;
+      }
+    }
   }
 }
 </style>

src/components/dict/JDictSelectTag.vue

@@ -8,6 +8,7 @@
   </a-radio-group>
 
   <a-select v-else-if="tagType=='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
+    <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
     <a-select-option :value="undefined">请选择</a-select-option>
     <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
       <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">

src/style.less

@@ -61,7 +61,7 @@ body {
       }
       &:hover {
         td {
-          background-color: transparent !important;
+          background-color: #0e505f !important;
         }
       }
       &.ant-table-row-selected {

src/views/logManage/index.vue

@@ -17,7 +17,7 @@
       </template>
       <!-- 标题结束 -->
       <!-- 内容 -->
-      <tree-with-line :treeData="treeData"> </tree-with-line>
+      <tree-with-line :treeData="treeData" :selected-keys.sync="selectedKeys" @select="onSelect"> </tree-with-line>
       <!-- 内容结束 -->
     </a-card>
     <div class="log-list">
@@ -54,6 +54,7 @@
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import TreeWithLine from '@/components/TreeWithLine/index.vue'
+import { downloadFile, getAction } from '../../api/manage'
 
 const columns = [
   {
@@ -88,9 +89,11 @@ export default {
   data() {
     this.columns = columns
     return {
+      disableMixinCreated: true,
       url: {
-        list: ''
+        list: '/test'
       },
+      isGettingTreeData: false, // 正在获取左侧树信息
       treeData: [
         {
           title: 'Db',
@@ -147,17 +150,39 @@ export default {
           ]
         }
       ],
-      dataSource: [{ id: 1, name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log', date: '2022-05-13', size: '105KB' }],
+      selectedKeys: [],
+      dataSource: [{ id: 1, name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log', date: '2022-05-13', size: '105KB', fileName: 'test.txt' }],
       visible: false
     }
   },
+  created() {
+    this.getTreeData()
+  },
   methods: {
+    async getTreeData () {
+      try {
+        this.isGettingTreeData = true
+        const res = await getAction('/logManage/findFtpFolders')
+        console.log('%c [ res ]-159', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+      } catch (error) {
+        console.error(error)
+        this.$message.error('Get Tree Data Failed')
+        this.selectedKeys = ['1-1-2']
+        this.onSelect()
+      } finally {
+        this.isGettingTreeData = false
+      }
+    },
+    onSelect () {
+      this.queryParam.query = this.selectedKeys[0]
+      this.loadData()
+    },
     onOperate(record) {
       console.log('%c [  ]-147', 'font-size:13px; background:pink; color:#bf2c9f;', record)
       this.visible = true
     },
-    onDownload(record) {
+    onDownload({ fileName }) {
-      console.log('%c [  ]-151', 'font-size:13px; background:pink; color:#bf2c9f;', record)
+      downloadFile('/logManage/downloadFile', fileName, { fileName })
     }
   }
 }

src/views/system/DataBase.vue

@@ -223,7 +223,9 @@ export default {
           label: 'SampleID',
           type: 'a-input',
           name: 'sampleID',
-          span: 4
+          style: {
+            width: '19%'
+          }
         },
         {
           label: 'Station',
@@ -240,7 +242,9 @@ export default {
             showSearch: true,
             filterOption: this.filterOption
           },
-          span: 4
+          style: {
+            width: '19%'
+          }
         },
         {
           label: 'Detector',
@@ -257,7 +261,9 @@ export default {
             showSearch: true,
             filterOption: this.filterOption
           },
-          span: 4
+          style: {
+            width: '19%'
+          }
         },
         {
           label: 'From',
@@ -265,7 +271,13 @@ export default {
           name: 'from',
           props: {
             showTime: { format: 'HH:mm' },
-            format: 'YYYY-MM-DD HH:mm'
+            format: 'YYYY-MM-DD HH:mm',
+            style: {
+              minWidth: 'auto'
+            }
+          },
+          style: {
+            width: '22%'
           }
         },
         {
@@ -274,10 +286,14 @@ export default {
           name: 'to',
           props: {
             showTime: { format: 'HH:mm' },
-            format: 'YYYY-MM-DD HH:mm'
+            format: 'YYYY-MM-DD HH:mm',
+            style: {
+              minWidth: 'auto'
+            }
           },
           style: {
-            paddingRight: 0
+            paddingRight: 0,
+            width: '21%'
           }
         },
         {

src/views/system/DetectorInfo.vue

@@ -101,7 +101,39 @@ import FormMixin from '@/mixins/FormMixin'
 import { cloneDeep } from 'lodash'
 import moment from 'moment'
 
-const formItems = []
+const formItems = [
+  {
+    label: 'Detector Code',
+    type: 'a-input',
+    name: 'detectorCode',
+    style: {
+      width: '310px'
+    }
+  },
+  {
+    label: 'Type',
+    type: 'a-input',
+    name: 'type',
+    style: {
+      width: '310px'
+    }
+  },
+  {
+    label: 'Status',
+    type: 'j-dict-select-tag',
+    name: 'status',
+    props: {
+      dictCode: 'STATION_STATUS',
+      getPopupContainer: () => {
+        return document.body
+      }
+    },
+    style: {
+      width: '310px'
+    }
+  }
+]
+
 const columns = [
   {
     title: 'NO',
@@ -112,13 +144,13 @@ const columns = [
     }
   },
   {
-    title: 'DETECTOR_ID',
+    title: 'DETECTOR ID',
     align: 'center',
     dataIndex: 'detectorId',
     width: 100
   },
   {
-    title: 'DETECTOR_CODE',
+    title: 'DETECTOR CODE',
     align: 'center',
     width: 100,
     dataIndex: 'detectorCode'
@@ -126,13 +158,13 @@ const columns = [
   {
     title: 'LON',
     align: 'center',
-    width: 100,
+    width: 80,
     dataIndex: 'lon'
   },
   {
     title: 'LAT',
     align: 'center',
-    width: 100,
+    width: 80,
     dataIndex: 'lat'
   },
   {
@@ -148,17 +180,20 @@ const columns = [
     dataIndex: 'channels'
   },
   {
-    title: 'RATED_EFFICIENCY',
+    title: 'RATED EFFICIENCY',
-    width: 100,
+    align: 'center',
+    width: 120,
     dataIndex: 'ratedEfficiency'
   },
   {
-    title: 'RATED_RESOLUTION',
+    title: 'RATED RESOLUTION',
-    width: 100,
+    align: 'center',
+    width: 120,
     dataIndex: 'ratedResolution'
   },
   {
-    title: 'ECAL_RANGE_MAX',
+    title: 'ECAL RANGE MAX',
+    align: 'center',
     width: 100,
     dataIndex: 'ecalRangeMax'
   },

src/views/system/NuclearFacility.vue

@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <!-- 搜索栏 -->
     <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
-      <a-space style="float: right" class="btn-group" slot="additional">
+      <a-space style="float: right;" class="btn-group" slot="additional">
         <a-button @click="onAdd" type="primary">
           <img src="@/assets/images/global/add.png" alt="" />
           Add
@@ -85,7 +85,46 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import FormMixin from '@/mixins/FormMixin'
 import { cloneDeep } from 'lodash'
 
-const formItems = []
+const formItems = [
+  {
+    label: 'Name',
+    type: 'a-input',
+    name: 'facilityName',
+    style: {
+      width: '300px'
+    }
+  },
+  {
+    label: 'Type',
+    type: 'a-input',
+    name: 'type',
+    style: {
+      width: '300px'
+    }
+  },
+  {
+    label: 'Location',
+    type: 'a-input',
+    name: 'location',
+    style: {
+      width: '300px'
+    }
+  },
+  {
+    label: 'Status',
+    type: 'j-dict-select-tag',
+    name: 'status',
+    props: {
+      getPopupContainer: () => {
+        return document.body
+      },
+      dictCode: 'NUCLEARFACILITY_STATUS'
+    },
+    style: {
+      width: '300px'
+    }
+  }
+]
 
 const columns = [
   {

src/views/system/Scheduling.vue

@@ -812,6 +812,8 @@ export default {
         font-size: 14px;
         color: #00fdd3;
         height: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }

src/views/system/stationList.vue

@@ -92,7 +92,38 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import FormMixin from '@/mixins/FormMixin'
 import { cloneDeep } from 'lodash'
 
-const formItems = []
+const formItems = [
+  {
+    label: 'Country Code',
+    type: 'a-input',
+    name: 'countryCode',
+    style: {
+      width: '310px'
+    }
+  },
+  {
+    label: 'Type',
+    type: 'a-input',
+    name: 'type',
+    style: {
+      width: '310px'
+    }
+  },
+  {
+    label: 'Status',
+    type: 'j-dict-select-tag',
+    name: 'status',
+    props: {
+      dictCode: 'STATION_STATUS',
+      getPopupContainer: () => {
+        return document.body
+      }
+    },
+    style: {
+      width: '310px'
+    }
+  }
+]
 
 const columns = [
   {
@@ -116,7 +147,7 @@ const columns = [
     dataIndex: 'stationCode'
   },
   {
-    title: 'COUNTRY_CODE',
+    title: 'COUNTRY CODE',
     align: 'center',
     width: 100,
     dataIndex: 'countryCode'