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

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

@@ -1,94 +1,58 @@
 <template>
   <div class='diolag-area'>
     <a-spin :spinning='spinLoading'>
-      <a-form-model
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        @keyup.enter.native="searchQuery"
+        <a-row :gutter="24">
-        class='tag-module'
+          <a-col :md="12" :sm="8">
-        ref='ruleForm'
-        :model='form'
-        :rules='rules'
-        :label-col='labelCol'
-        :wrapper-col='wrapperCol'
-      >
-        <a-row :gutter='24'>
-          <a-col :span='9'>
             <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-form-model-item class="itemModel">
-<!--                <a-input class="box-input"-->
+                <a-input class="box-input" :title="$t('pleaseEnter')+$t('ParameterName')"
-<!--                         :disabled="disabled"-->
+                         v-model='form.nioNumber' :placeholder="$t('pleaseEnter')+$t('NiONumber')"/>
-<!--                         v-model="formInline[item.db_field_name]"-->
-<!--                         :placeholder="$t('PleaseEnter')+item.db_field_txt"/>-->
-                                <a-input class="box-input" :title="$t('pleaseEnter')+$t('ParameterName')"
-                                  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-form-model-item class="itemModel">
-                <!--                <a-input class="box-input"-->
-                <!--                         :disabled="disabled"-->
-                <!--                         v-model="formInline[item.db_field_name]"-->
-                <!--                         :placeholder="$t('PleaseEnter')+item.db_field_txt"/>-->
                 <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-col :md="12" :sm="8">
-            <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'>
             <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-form-model-item class="itemModel">
-                <!--                <a-input class="box-input"-->
-                <!--                         :disabled="disabled"-->
-                <!--                         v-model="formInline[item.db_field_name]"-->
-                <!--                         :placeholder="$t('PleaseEnter')+item.db_field_txt"/>-->
                 <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,137 +75,137 @@
     </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',
+    name: 'diolagArea',
-  components: {},
+    components: {},
-  data() {
+    data() {
-    return {
+      return {
-      title: this.$t('add'),
+        title: this.$t('add'),
-      total: 0,
+        total: 0,
-      selectedRowKeysDate: {},
+        selectedRowKeysDate: {},
-      loading: false,
+        loading: false,
-      editId: '',
+        editId: '',
-      columns: [
+        columns: [
-        {
+          {
-          title: this.$t('NiONumber'),
+            title: this.$t('NiONumber'),
-          dataIndex: 'nioNumber',
+            dataIndex: 'nioNumber',
-          align: 'center',
+            align: 'center',
-          width:200,
+            width: 200,
-          ellipsis: true
+            ellipsis: true
+          },
+          {
+            title: this.$t('ParameterName'),
+            align: 'center',
+            dataIndex: 'paramsName',
+            width: 200,
+            ellipsis: true
+          },
+          {
+            title: this.$t('areaOfResponsibility'),
+            dataIndex: 'dutyTerritory_dictText',
+            align: 'center',
+            width: 200,
+            ellipsis: true
+          }
+        ],
+        newVisible: false,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
         },
-        {
+        wrapperCol: {
-          title: this.$t('ParameterName'),
+          xs: { span: 24 },
-          align: 'center',
+          sm: { span: 14 }
-          dataIndex: 'paramsName',
-          width:200,
-          ellipsis: true
         },
-        {
+        form: {},
-          title: this.$t('areaOfResponsibility'),
+        rules: {
-          dataIndex: 'dutyTerritory_dictText',
+          // templatetitle: [
-          align: 'center',
+          //   { required: true, message: this.$t('enterTitle'), trigger: 'blur' }
-          width:200,
+          // ]
-          ellipsis: true
+        },
-        }
+        areaTable: [],
-      ],
+        flag: false,  //表单提交标识
-      newVisible: false,
+        spinLoading: false,
-      labelCol: {
+        confirmLoading: false,
-        xs: { span: 24 },
+        templatetitle: '',
-        sm: { span: 7 }
+        selectedRowKeys: []
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 14 }
-      },
-      form: {},
-      rules: {
-        // templatetitle: [
-        //   { required: true, message: this.$t('enterTitle'), trigger: 'blur' }
-        // ]
-      },
-      areaTable: [],
-      flag: false,  //表单提交标识
-      spinLoading: false,
-      confirmLoading: false,
-      templatetitle: '',
-      selectedRowKeys: [],
-    }
-  },
-  props: {
-    paramsManifest: {
-      type: Object,
-      default: {},
-      require: true
-    }
-  },
-  mounted() {
-    this.loadData()
-  },
-  methods: {
-    loadData() {
-      this.loading = true
-      let _tt = {
-        paramsManifestId: this.paramsManifest.id,
-        paramsTemplateId: this.paramsManifest.paramsTemplateId,
-        paramsTemplatePublishVersion: this.paramsManifest.paramsTemplatePublishVersion
       }
-      let params = {
-        ...this.form,
-        ..._tt
-      }
-      getAction(`params/collectManifest/paramsInfoList`, params).then(res => {
-        if (res.success) {
-          this.areaTable = [...res.result]
-        }
-      }).finally(() => {
-        this.loading = false
-      })
     },
-    searchQuery() {
+    props: {
+      paramsManifest: {
+        type: Object,
+        default: {},
+        require: true
+      }
+    },
+    mounted() {
       this.loadData()
     },
-    searchReset() {
+    methods: {
-      this.form = {}
+      loadData() {
-      this.loadData()
+        this.loading = true
-    },
+        let _tt = {
-    handleCancel() {
+          paramsManifestId: this.paramsManifest.id,
-      this.$emit('areaVisible', false)
+          paramsTemplateId: this.paramsManifest.paramsTemplateId,
-    },
+          paramsTemplatePublishVersion: this.paramsManifest.paramsTemplatePublishVersion
-    onSelectChange(selectedRowKeys, selectedRowKeysDate) {
+        }
-      this.selectedRowKeysDate = selectedRowKeysDate
+        let params = {
-      this.selectedRowKeys = selectedRowKeys
+          ...this.form,
-      this.$emit('addselectedRowKeys',this.selectedRowKeys)
+          ..._tt
-    },
+        }
-    handleTableChange(val) {
+        getAction(`params/collectManifest/paramsInfoList`, params).then(res => {
-    },
+          if (res.success) {
-    showModal() {
+            this.areaTable = [...res.result]
-      this.title = this.$t('add')
+          }
-      this.newVisible = true
+        }).finally(() => {
-      this.form = {}
+          this.loading = false
-    },
+        })
-    //新增
+      },
-    handleSubmit() {
+      searchQuery() {
-      if (this.selectedRowKeys.length == 0) {
+        this.loadData()
-        this.$message.warning(this.$t('pleaseSelectData'))
+      },
-      } else {
+      searchReset() {
-        this.$refs.ruleForm.validate(valid => {
+        this.form = {}
-          if (valid) {
+        this.loadData()
-            this.flag = true
+      },
-            this.spinLoading = true
+      handleCancel() {
-            this.confirmLoading = true
+        this.$emit('areaVisible', false)
+      },
+      onSelectChange(selectedRowKeys, selectedRowKeysDate) {
+        this.selectedRowKeysDate = selectedRowKeysDate
+        this.selectedRowKeys = selectedRowKeys
+        this.$emit('addselectedRowKeys', this.selectedRowKeys)
+      },
+      handleTableChange(val) {
+      },
+      showModal() {
+        this.title = this.$t('add')
+        this.newVisible = true
+        this.form = {}
+      },
+      //新增
+      handleSubmit() {
+        if (this.selectedRowKeys.length == 0) {
+          this.$message.warning(this.$t('pleaseSelectData'))
+        } else {
+          this.$refs.ruleForm.validate(valid => {
+            if (valid) {
+              this.flag = true
+              this.spinLoading = true
+              this.confirmLoading = true
               //新增
               let postDate = {
-                  paramsInfoPublishEOList: this.selectedRowKeysDate,
+                paramsInfoPublishEOList: this.selectedRowKeysDate,
-                  paramsManifestId: this.paramsManifest.id,
+                paramsManifestId: this.paramsManifest.id,
-                  projectId: this.$route.query.projectId
+                projectId: this.$route.query.projectId
               }
               postAction(`params/collectManifest/add`, postDate).then(res => {
                   if (res.success) {
@@ -259,234 +223,239 @@ export default {
                 this.spinLoading = false
                 this.newVisible = false
               })
-          } else {
+            } else {
-            return false
+              return false
+            }
+          })
+        }
+      },
+      cancelModel() {
+        this.newVisible = false
+        this.$refs.ruleForm.resetFields()
+      },
+      //删除按钮
+      deleteArea(val) {
+        this.$confirm({
+          title: this.$t('confirmDeletion'),
+          content: '',
+          onOk:
+            async () => {
+              getAction(`tag/onlCgformArea/delete`, { id: val }).then((res) => {
+                if (res.success) {
+                  this.$message.success(this.$t('OperationSuccessful'))
+                  if (this.areaTable.length == 1 && this.queryParams.pageNo != 1) {
+                    this.queryParams.pageNo = this.queryParams.pageNo - 1
+                  }
+                  this.loadData()
+                } else {
+                  // this.$message.warning(res.message)
+                  if (res.message == '该展示区域有关联数据，无法删除！') {
+                    this.$message.warning(this.$t('noDelete'))
+                  } else {
+                    this.$message.warning(this.$t('operationFailed'))
+                  }
+                }
+              })
+            }
+        })
+      },
+      //编辑按钮
+      editArea(val) {
+        this.title = this.$t('edit')
+        this.newVisible = true
+        let params = {
+          id: val
+        }
+        getAction(`tag/onlCgformArea/queryById`, params).then((res) => {
+          if (res.success) {
+            this.form = { ...res.result }
+            // this.$emit('updateOk',res.result)
+
           }
         })
       }
     },
-    cancelModel() {
+    watch: {
-      this.newVisible = false
+      paramsManifest(val) {
-      this.$refs.ruleForm.resetFields()
+        this.loadData()
-    },
-    //删除按钮
-    deleteArea(val) {
-      this.$confirm({
-        title: this.$t('confirmDeletion'),
-        content: '',
-        onOk:
-          async () => {
-            getAction(`tag/onlCgformArea/delete`, { id: val }).then((res) => {
-              if (res.success) {
-                this.$message.success(this.$t('OperationSuccessful'))
-                if (this.areaTable.length == 1 && this.queryParams.pageNo != 1) {
-                  this.queryParams.pageNo = this.queryParams.pageNo - 1
-                }
-                this.loadData()
-              } else {
-                // this.$message.warning(res.message)
-                if (res.message == '该展示区域有关联数据，无法删除！') {
-                  this.$message.warning(this.$t('noDelete'))
-                } else {
-                  this.$message.warning(this.$t('operationFailed'))
-                }
-              }
-            })
-          }
-      })
-    },
-    //编辑按钮
-    editArea(val) {
-      this.title = this.$t('edit')
-      this.newVisible = true
-      let params = {
-        id: val
       }
-      getAction(`tag/onlCgformArea/queryById`, params).then((res) => {
-        if (res.success) {
-          this.form = { ...res.result }
-          // this.$emit('updateOk',res.result)
-
-        }
-      })
     }
-  },
-  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 {
+    .table-area {
-    margin: 20px 0;
+      margin: 20px 0;
 
-    .action-edit {
+      .action-edit {
-      margin-right: 10px;
+        margin-right: 10px;
+      }
+    }
+
+    .table-del {
+      color: red;
     }
   }
 
-  .table-del {
+  .drawer-bootom-button {
-    color: red;
+    display: flex;
+    justify-content: center;
   }
-}
-.drawer-bootom-button{
-  display: flex;
-  justify-content: center;
-}
-.box-title-text {
-  line-height: 1.4;
-  display: flex;
-  /*align-items: center;*/
-}
 
-.title-text {
+  .box-title-text {
-  width: 114px;
+    line-height: 1.4;
-  text-align: right;
+    display: flex;
-  display: inline-block;
+    /*align-items: center;*/
-  font-weight: 500;
+  }
-  font-size: 14px;
-  margin-right: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: 42px;
-  line-height: 42px;
-}
 
-.box-input {
+  .title-text {
-  display: inline-block;
+    width: 114px;
-  height: 38px;
+    text-align: right;
-  width: 100%;
+    display: inline-block;
-}
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 42px;
+    line-height: 42px;
+  }
 
-.itemModel {
+  .box-input {
-  width: calc(100% - 130px);
+    display: inline-block;
-  display: inline-block;
+    height: 38px;
-  margin-top: 2px;
+    width: 100%;
-  height: 40px;
+  }
-  margin-bottom: 24px;
-}
 
-.itemModel-text {
+  .itemModel {
-  width: calc(100% - 130px);
+    width: calc(100% - 130px);
-  display: inline-block;
+    display: inline-block;
-  margin-top: 2px;
+    margin-top: 2px;
-}
+    height: 40px;
+    margin-bottom: 24px;
+  }
 
-.Required {
+  .itemModel-text {
-  color: red;
+    width: calc(100% - 130px);
-  margin-right: 4px;
+    display: inline-block;
-}
+    margin-top: 2px;
+  }
 
-.title-text-text {
+  .Required {
-  margin-top: 9px;
+    color: red;
-}
+    margin-right: 4px;
+  }
 
-.header-text {
+  .title-text-text {
-  font-size: 16px;
+    margin-top: 9px;
-  font-weight: bold;
+  }
-  margin-left: 15px;
-  /*border-bottom: 1px #d9d9d9 dashed;*/
-  height: 30px;
-  margin-bottom: 30px;
-}
 
-.formAdd {
+  .header-text {
-  margin-bottom: 40px;
+    font-size: 16px;
-}
+    font-weight: bold;
+    margin-left: 15px;
+    /*border-bottom: 1px #d9d9d9 dashed;*/
+    height: 30px;
+    margin-bottom: 30px;
+  }
 
-.button-text {
+  .formAdd {
-  height: 38px;
+    margin-bottom: 40px;
-  width: calc(100% - 100px);
+  }
-  line-height: 38px;
-  background: #fff;
-  border: 1px #00B3BE solid;
-  color: #00B3BE;
-}
 
-.button-text-text {
+  .button-text {
-  position: absolute;
+    height: 38px;
-  right: -10px;
+    width: calc(100% - 100px);
-  top: -21px;
+    line-height: 38px;
-  display: inline-block;
+    background: #fff;
-  padding: 6px;
+    border: 1px #00B3BE solid;
-  border-radius: 50%;
+    color: #00B3BE;
-  background: red;
+  }
-  text-align: center;
+
-  line-height: 6px;
+  .button-text-text {
-  color: #fff;
+    position: absolute;
-}
+    right: -10px;
+    top: -21px;
+    display: inline-block;
+    padding: 6px;
+    border-radius: 50%;
+    background: red;
+    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-wrap {
-    .ant-modal {
+      .ant-modal {
-      .ant-modal-content {
+        .ant-modal-content {
-        .ant-modal-footer {
+          .ant-modal-footer {
-          text-align: center;
+            text-align: center;
+          }
         }
       }
     }
   }
-}
 </style>
 <style>
-.formAdd .ant-form-item-label {
+  .formAdd .ant-form-item-label {
-  width: 130px;
+    width: 130px;
-}
+  }
 
-.formAdd .ant-form-item-control-wrapper {
+  .formAdd .ant-form-item-control-wrapper {
-  display: inline-block;
+    display: inline-block;
-  width: 100%;
+    width: 100%;
-}
+  }
 
-/*.formAdd .ant-form-item {*/
+  /*.formAdd .ant-form-item {*/
-/*  margin-bottom: 20px;*/
+  /*  margin-bottom: 20px;*/
-/*}*/
+  /*}*/
 
-.itemModel .ant-form-item-control-wrapper {
+  .itemModel .ant-form-item-control-wrapper {
-  width: 100%;
+    width: 100%;
-}
+  }
 
-.itemModel-text .ant-form-item-control-wrapper {
+  .itemModel-text .ant-form-item-control-wrapper {
-  width: 100% !important;
+    width: 100% !important;
-}
+  }
 
-.box-input .ant-select-selection--single {
+  .box-input .ant-select-selection--single {
-  height: 38px;
+    height: 38px;
-}
+  }
 
-.box-input .ant-select-selection--multiple {
+  .box-input .ant-select-selection--multiple {
-  height: 38px;
+    height: 38px;
-}
+  }
 
-.box-input .ant-select-selection__rendered {
+  .box-input .ant-select-selection__rendered {
-  line-height: 38px;
+    line-height: 38px;
-  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;
+    margin-top: 6px;
-}
+  }
 
-.box-input .ant-calendar-picker {
+  .box-input .ant-calendar-picker {
-  line-height: 38px;
+    line-height: 38px;
-  height: 38px;
+    height: 38px;
-}
+  }
 
-.box-input .ant-calendar-picker-input {
+  .box-input .ant-calendar-picker-input {
-  height: 38px;
+    height: 38px;
-}
+  }
 
-.box-input .ant-input-number-input-wrap {
+  .box-input .ant-input-number-input-wrap {
-  line-height: 38px;
+    line-height: 38px;
-  height: 38px;
+    height: 38px;
-}
+  }
 </style>