修改标准选择

2022-03-01 11:42:52 +08:00
parent 6b0404ceaa
commit 78a9d15bd5
4 changed files with 194 additions and 39 deletions
@@ -0,0 +1,154 @@
+<template>
+  <a-form layout="inline" @keyup.enter.native="searchQuery">
+    <a-row :gutter="24">
+      <a-col :md="12" :sm="8" v-for="(item,index) in searchList" :key="index" style="line-height: 48px">
+        <template>
+          <div class="box-title-text" v-if="item.field_show_type == '1'">
+            <div class="title-text" :title="item.db_field_txt">
+              <span>{{item.db_field_txt}}</span>
+            </div>
+            <a-input class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
+                     v-model="queryParam[item.db_field_name]"></a-input>
+          </div>
+          <div class="box-title-text" v-if="item.field_show_type == '2'">
+            <div class="title-text" :title="item.db_field_txt">
+              <span>{{item.db_field_txt}}</span>
+            </div>
+            <a-input-number class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
+                            v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
+          </div>
+          <div class="box-title-text" v-else-if="item.field_show_type == '3'">
+            <div class="title-text" :title="item.db_field_txt">
+              <span>{{item.db_field_txt}}</span>
+            </div>
+            <j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
+                                :placeholder="$t('PleaseSelect')+item.db_field_txt" :type="'select'"
+                                :triggerChange="false" :dictCode="item.dict_field"/>
+          </div>
+          <div class="box-title-text" v-else-if="item.field_show_type == '6'">
+            <div class="title-text" :title="item.db_field_txt">
+              <span>{{item.db_field_txt}}</span>
+            </div>
+            <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"
+                            :placeholder="$t('PleaseSelect')+item.db_field_txt"
+                            @change="onChange(item.db_field_name)"></a-range-picker>
+          </div>
+          <div class="box-title-text" v-else-if="item.field_show_type == '5'">
+            <div class="title-text" :title="item.db_field_txt">
+              <span>{{item.db_field_txt}}</span>
+            </div>
+            <a-date-picker class="box-input"
+                           :placeholder="$t('PleaseSelect')+item.db_field_txt"
+                           @change="dateChange(item.db_field_name)"
+                           v-model="queryParam[item.db_field_name]"/>
+          </div>
+          <div class="box-title-text" v-else-if="item.field_show_type == '4'">
+            <div class="title-text" :title="item.db_field_txt">
+              <span>{{item.db_field_txt}}</span>
+            </div>
+            <j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
+                               :placeholder="$t('PleaseSelect')+item.db_field_txt"
+                               :type="'select'"
+                               :triggerChange="false" :dictCode="item.dict_field"/>
+          </div>
+        </template>
+      </a-col>
+      <span style="float: right;overflow: hidden;margin-right: 41px;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-row>
+  </a-form>
+</template>
+
+<script>
+  import moment from 'moment'
+  import { getAction } from '@/api/manage'
+
+  export default {
+    name: 'index',
+    props: {
+      url: {
+        type: Object,
+        default: {}
+      },
+      flag: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        queryParam: {},
+        toggleSearchStatus: false,
+        searchList: []
+      }
+    },
+    mounted() {
+      this.getSeach()
+    },
+    methods: {
+      searchQuery() {
+        this.$emit('searchQuery', this.queryParam)
+      },
+      searchReset() {
+        this.queryParam = {}
+        this.$emit('searchReset', this.queryParam)
+      },
+      getSeach() {
+        let params = {
+          flag: this.flag
+        }
+        getAction(this.url.seachList, params).then((res) => {
+          if (res.success) {
+            this.searchList = res.result
+          }
+        })
+      },
+      dateChange(item) {
+        this.queryParam[item] = moment(this.queryParam[item]).format('YYYY-MM-DD')
+      },
+      onChange(item) {
+        let dateOne = moment(this.queryParam[item][0]).format('YYYY-MM-DD')
+        let dateTwo = moment(this.queryParam[item][1]).format('YYYY-MM-DD')
+        this.queryParam[item] = [dateOne, dateTwo]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .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>