修改参数项收集清单添加的搜索布局

jero-web/src/components/ParameterLibraryAdd/index.vue

@@ -1,94 +1,58 @@
 <template>
   <div class='diolag-area'>
     <a-spin :spinning='spinLoading'>
-      <a-form-model
-        @keyup.enter.native="searchQuery"
-        class='tag-module'
-        ref='ruleForm'
-        :model='form'
-        :rules='rules'
-        :label-col='labelCol'
-        :wrapper-col='wrapperCol'
-      >
-        <a-row :gutter='24'>
-          <a-col :span='9'>
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="8">
             <div class="box-title-text">
               <div class="title-text">
-<!--                <span class="Required">*</span>-->
+                <!--                <span class="Required">*</span>-->
                 <span class="title-text-text" :title="$t('NiONumber')">{{$t('NiONumber')}}</span>
               </div>
-              <a-form-model-item class="itemModel" :prop='region'>
-<!--                <a-input class="box-input"-->
-<!--                         :disabled="disabled"-->
-<!--                         v-model="formInline[item.db_field_name]"-->
-<!--                         :placeholder="$t('PleaseEnter')+item.db_field_txt"/>-->
+              <a-form-model-item class="itemModel">
                 <a-input class="box-input" :title="$t('pleaseEnter')+$t('ParameterName')"
-                                  v-model='form.nioNumber' :placeholder="$t('pleaseEnter')+$t('NiONumber')" />
+                         v-model='form.nioNumber' :placeholder="$t('pleaseEnter')+$t('NiONumber')"/>
               </a-form-model-item>
             </div>
-<!--            <a-form-model-item ref='region' :label="$t('NiONumber')" prop='region' >-->
-<!--                <a-input-->
-<!--                  v-model='form.nioNumber' :placeholder="$t('pleaseEnter')+$t('NiONumber')" />-->
-<!--            </a-form-model-item>-->
           </a-col>
-          <a-col :span='9'>
+          <a-col :md="12" :sm="8">
             <div class="box-title-text">
               <div class="title-text">
                 <!--                <span class="Required">*</span>-->
                 <span class="title-text-text" :title="$t('ParameterName')">{{$t('ParameterName')}}</span>
               </div>
-              <a-form-model-item class="itemModel" :prop='region'>
-                <!--                <a-input class="box-input"-->
-                <!--                         :disabled="disabled"-->
-                <!--                         v-model="formInline[item.db_field_name]"-->
-                <!--                         :placeholder="$t('PleaseEnter')+item.db_field_txt"/>-->
+              <a-form-model-item class="itemModel">
                 <a-input class="box-input"
-                  v-model='form.paramsName' :title="$t('pleaseEnter')+$t('ParameterName')" :placeholder="$t('pleaseEnter')+$t('ParameterName')" />
+                         v-model='form.paramsName' :title="$t('pleaseEnter')+$t('ParameterName')"
+                         :placeholder="$t('pleaseEnter')+$t('ParameterName')"/>
               </a-form-model-item>
             </div>
-<!--            <a-form-model-item ref='paramsTemplateName' :label="$t('ParameterName')" prop='paramsTemplateName'>-->
-<!--              <a-input-->
-<!--                v-model='form.paramsName' :placeholder="$t('pleaseEnter')+$t('ParameterName')" />-->
-<!--            </a-form-model-item>-->
           </a-col>
-          <a-col :span='6' style='margin-top: 5px'>
-            <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>
-        </a-row>
-        <a-row :gutter='24'>
-          <a-col :span='10'>
+          <a-col :md="12" :sm="8">
             <div class="box-title-text">
               <div class="title-text">
                 <!--                <span class="Required">*</span>-->
                 <span class="title-text-text" :title="$t('areaOfResponsibility')">{{$t('areaOfResponsibility')}}</span>
               </div>
-              <a-form-model-item class="itemModel" :prop='region'>
-                <!--                <a-input class="box-input"-->
-                <!--                         :disabled="disabled"-->
-                <!--                         v-model="formInline[item.db_field_name]"-->
-                <!--                         :placeholder="$t('PleaseEnter')+item.db_field_txt"/>-->
+              <a-form-model-item class="itemModel">
                 <j-dict-select-tag class="box-input" v-model='form.dutyTerritory'
-                                   style='width: 83%'
                                    :placeholder="$t('PleaseSelect')+$t('areaOfResponsibility')"
                                    :type="'select'"
                                    :title="$t('PleaseSelect')+$t('areaOfResponsibility')"
-                                   :triggerChange='false' :dictCode="'duty_territory'" />
+                                   :triggerChange='false' :dictCode="'duty_territory'"/>
               </a-form-model-item>
             </div>
-<!--            <a-form-model-item ref='region' :label="$t('areaOfResponsibility')" prop='region'>-->
-<!--              <a-form-model-item class='itemModel' prop='region'>-->
-<!--                <j-dict-select-tag class='box-input' v-model='form.dutyTerritory'-->
-<!--                                   :placeholder="$t('PleaseSelect')+$t('areaOfResponsibility')"-->
-<!--                                   :type="'select'"-->
-<!--                                   :triggerChange='false' :dictCode="'duty_territory'" />-->
-<!--              </a-form-model-item>-->
-<!--            </a-form-model-item>-->
           </a-col>
-          <a-col :span='9'>
+          <a-col :md="12" :sm="8">
+            <span style="float: right;overflow: hidden;margin-right: 16px;margin-bottom: 20px"
+                  class="table-page-search-submitButtons">
+            <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>
+            </span>
+
           </a-col>
         </a-row>
-      </a-form-model>
+      </a-form>
     </a-spin>
     <a-table
       class='table-area'
@@ -111,15 +75,15 @@
     </a-table>
     <div class='drawer-bootom-button'>
       <a-button style='margin-right: .8rem' @click='handleCancel'>{{ $t('cancel') }}</a-button>
-      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading' >{{ $t('submit') }}</a-button>
+      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>{{ $t('submit') }}</a-button>
     </div>
   </div>
 </template>
 
 <script>
-import { putAction, postAction, getAction, deleteAction } from '@/api/manage'
+  import { putAction, postAction, getAction, deleteAction } from '@/api/manage'
 
-export default {
+  export default {
     name: 'diolagArea',
     components: {},
     data() {
@@ -134,21 +98,21 @@ export default {
             title: this.$t('NiONumber'),
             dataIndex: 'nioNumber',
             align: 'center',
-          width:200,
+            width: 200,
             ellipsis: true
           },
           {
             title: this.$t('ParameterName'),
             align: 'center',
             dataIndex: 'paramsName',
-          width:200,
+            width: 200,
             ellipsis: true
           },
           {
             title: this.$t('areaOfResponsibility'),
             dataIndex: 'dutyTerritory_dictText',
             align: 'center',
-          width:200,
+            width: 200,
             ellipsis: true
           }
         ],
@@ -172,7 +136,7 @@ export default {
         spinLoading: false,
         confirmLoading: false,
         templatetitle: '',
-      selectedRowKeys: [],
+        selectedRowKeys: []
       }
     },
     props: {
@@ -218,7 +182,7 @@ export default {
       onSelectChange(selectedRowKeys, selectedRowKeysDate) {
         this.selectedRowKeysDate = selectedRowKeysDate
         this.selectedRowKeys = selectedRowKeys
-      this.$emit('addselectedRowKeys',this.selectedRowKeys)
+        this.$emit('addselectedRowKeys', this.selectedRowKeys)
       },
       handleTableChange(val) {
       },
@@ -314,16 +278,16 @@ export default {
     watch: {
       paramsManifest(val) {
         this.loadData()
-    },
+      }
     }
 
-}
+  }
 </script>
 
 <style lang='less' scoped>
-@import '~@assets/less/common.less';
+  @import '~@assets/less/common.less';
 
-.diolag-area {
+  .diolag-area {
     .table-area {
       margin: 20px 0;
 
@@ -335,18 +299,20 @@ export default {
     .table-del {
       color: red;
     }
-}
-.drawer-bootom-button{
+  }
+
+  .drawer-bootom-button {
     display: flex;
     justify-content: center;
-}
-.box-title-text {
+  }
+
+  .box-title-text {
     line-height: 1.4;
     display: flex;
     /*align-items: center;*/
-}
+  }
 
-.title-text {
+  .title-text {
     width: 114px;
     text-align: right;
     display: inline-block;
@@ -358,60 +324,60 @@ export default {
     white-space: nowrap;
     height: 42px;
     line-height: 42px;
-}
+  }
 
-.box-input {
+  .box-input {
     display: inline-block;
     height: 38px;
     width: 100%;
-}
+  }
 
-.itemModel {
+  .itemModel {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
     height: 40px;
     margin-bottom: 24px;
-}
+  }
 
-.itemModel-text {
+  .itemModel-text {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
-}
+  }
 
-.Required {
+  .Required {
     color: red;
     margin-right: 4px;
-}
+  }
 
-.title-text-text {
+  .title-text-text {
     margin-top: 9px;
-}
+  }
 
-.header-text {
+  .header-text {
     font-size: 16px;
     font-weight: bold;
     margin-left: 15px;
     /*border-bottom: 1px #d9d9d9 dashed;*/
     height: 30px;
     margin-bottom: 30px;
-}
+  }
 
-.formAdd {
+  .formAdd {
     margin-bottom: 40px;
-}
+  }
 
-.button-text {
+  .button-text {
     height: 38px;
     width: calc(100% - 100px);
     line-height: 38px;
     background: #fff;
     border: 1px #00B3BE solid;
     color: #00B3BE;
-}
+  }
 
-.button-text-text {
+  .button-text-text {
     position: absolute;
     right: -10px;
     top: -21px;
@@ -422,10 +388,13 @@ export default {
     text-align: center;
     line-height: 6px;
     color: #fff;
-}
+  }
+  .box-button {
+    height: 38px;
+  }
 </style>
 <style lang='less'>
-.area-module {
+  .area-module {
     .ant-modal-wrap {
       .ant-modal {
         .ant-modal-content {
@@ -435,58 +404,58 @@ export default {
         }
       }
     }
-}
+  }
 </style>
 <style>
-.formAdd .ant-form-item-label {
+  .formAdd .ant-form-item-label {
     width: 130px;
-}
+  }
 
-.formAdd .ant-form-item-control-wrapper {
+  .formAdd .ant-form-item-control-wrapper {
     display: inline-block;
     width: 100%;
-}
+  }
 
-/*.formAdd .ant-form-item {*/
-/*  margin-bottom: 20px;*/
-/*}*/
+  /*.formAdd .ant-form-item {*/
+  /*  margin-bottom: 20px;*/
+  /*}*/
 
-.itemModel .ant-form-item-control-wrapper {
+  .itemModel .ant-form-item-control-wrapper {
     width: 100%;
-}
+  }
 
-.itemModel-text .ant-form-item-control-wrapper {
+  .itemModel-text .ant-form-item-control-wrapper {
     width: 100% !important;
-}
+  }
 
-.box-input .ant-select-selection--single {
+  .box-input .ant-select-selection--single {
     height: 38px;
-}
+  }
 
-.box-input .ant-select-selection--multiple {
+  .box-input .ant-select-selection--multiple {
     height: 38px;
-}
+  }
 
-.box-input .ant-select-selection__rendered {
+  .box-input .ant-select-selection__rendered {
     line-height: 38px;
     height: 38px;
-}
+  }
 
-.box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
     margin-top: 6px;
-}
+  }
 
-.box-input .ant-calendar-picker {
+  .box-input .ant-calendar-picker {
     line-height: 38px;
     height: 38px;
-}
+  }
 
-.box-input .ant-calendar-picker-input {
+  .box-input .ant-calendar-picker-input {
     height: 38px;
-}
+  }
 
-.box-input .ant-input-number-input-wrap {
+  .box-input .ant-input-number-input-wrap {
     line-height: 38px;
     height: 38px;
-}
+  }
 </style>