Blame view

src/views/baseSpecialAction/dynamicModel/list/Search.vue 7.57 KB
1916a5ed   “wangming”   1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
  <template>
    <el-row class="NCC-common-search-box" :gutter="16" v-if="searchList.length">
      <el-form @submit.native.prevent>
        <el-col :span="6" v-for="(item, index) in searchList" :key="index">
          <el-form-item :label="item.__config__.label" v-show="index<3 || (index>=3 && showAll)">
            <template v-if="useInputList.indexOf(item.__config__.nccKey)>-1">
              <el-input v-model="item.value" :placeholder="item.__config__.label" clearable
                class="item">
              </el-input>
            </template>
            <template v-else-if="useDateList.indexOf(item.__config__.nccKey)>-1">
              <el-date-picker v-model="item.value" value-format="timestamp" format="yyyy-MM-dd"
                start-placeholder="开始日期" end-placeholder="结束日期" class="item" type="daterange" />
            </template>
            <template v-else-if="useSelectList.indexOf(item.__config__.nccKey)>-1">
              <el-select v-model="item.value" :placeholder="'请选择'+item.__config__.label" clearable
                filterable class="item">
                <el-option :label="oItem[item.__config__.props.label]"
                  v-for="(oItem, i) in item.__slot__.options"
                  :value="oItem[item.__config__.props.value]" :key="i"></el-option>
              </el-select>
            </template>
            <template v-else>
              <template
                v-if="item.__config__.nccKey==='numInput'||item.__config__.nccKey==='calculate'">
                <num-range v-model="item.value"></num-range>
              </template>
              <template v-if="item.__config__.nccKey==='cascader'">
                <el-cascader v-model="item.value" :options="item.options" clearable
                  :show-all-levels="item['show-all-levels']" :props="item.props.props" filterable
                  :placeholder="'请选择'+item.__config__.label" class="item"></el-cascader>
              </template>
              <template
                v-if="item.__config__.nccKey==='time'|| item.__config__.nccKey==='timeRange'">
                <el-time-picker v-model="item.value" start-placeholder="开始时间" end-placeholder="结束时间"
                  clearable :value-format="item['value-format']" :format="item.format" is-range
                  class="item" />
              </template>
              <template v-if="item.__config__.nccKey==='date'">
                <el-date-picker v-model="item.value" :type="item.type+'range'"
                  :value-format="item['value-format']" :format="item.format" start-placeholder="开始日期"
                  end-placeholder="结束日期" class="item">
                </el-date-picker>
              </template>
              <template v-if="item.__config__.nccKey==='dateRange'">
                <el-date-picker v-model="item.value" :type="item.type"
                  :value-format="item['value-format']" :format="item.format" start-placeholder="开始日期"
                  end-placeholder="结束日期" class="item">
                </el-date-picker>
              </template>
              <template v-if="commonList.includes(item.__config__.nccKey)">
                <component :is="item.__config__.tag" v-model="item.value"
                  :placeholder="'请选择'+item.__config__.label" class="item" />
              </template>
              <template v-if="item.__config__.nccKey==='address'">
                <NCCAddress v-model="item.value" :placeholder="'请选择'+item.__config__.label"
                  :level="item.level" class="item" clearable />
              </template>
              <template v-if="item.__config__.nccKey==='treeSelect'">
                <NCC-TreeSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
                  :options="item.options" :multiple="item.multiple" class="item" clearable />
              </template>
              <template
                v-if="item.__config__.nccKey==='createUser'||item.__config__.nccKey==='modifyUser'">
                <userSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
                  class="item" />
              </template>
              <template v-if="item.__config__.nccKey==='currOrganize'">
                <comSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
                  class="item" />
              </template>
              <template v-if="item.__config__.nccKey==='currDept'">
                <depSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
                  class="item" />
              </template>
              <template v-if="item.__config__.nccKey==='currPosition'">
                <posSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
                  class="item" />
              </template>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">{{$t('common.search')}}
            </el-button>
            <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
            </el-button>
            <template v-if="searchList.length>3">
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">
                展开
              </el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </template>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </template>
  
  <script>
  import { deepClone } from '@/utils'
  import { dyOptionsList, useInputList, useDateList, useSelectList } from '@/components/Generator/generator/comConfig'
  import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
  import { previewDataInterface } from '@/api/systemData/dataInterface'
  export default {
    props: ['list'],
    data() {
      return {
        showAll: false,
        searchList: [],
        commonList: ['comSelect', 'depSelect', 'posSelect', 'userSelect', 'dicSelect'],
        useInputList,
        useDateList,
        useSelectList
      }
    },
    watch: {
      list: {
        handler: function (val) {
          this.searchList = deepClone(val)
          this.buildOptions(this.searchList)
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      buildOptions(componentList) {
        componentList.forEach(cur => {
          const config = cur.__config__
          if (dyOptionsList.indexOf(config.nccKey) > -1) {
            let isTreeSelect = config.nccKey === 'treeSelect' || config.nccKey === 'cascader'
            if (config.dataType === 'dictionary') {
              if (!config.dictionaryType) return
              getDictionaryDataSelector(config.dictionaryType).then(res => {
                isTreeSelect ? cur.options = res.data.list : cur.__slot__.options = res.data.list
              })
            }
            if (config.dataType === 'dynamic') {
              if (!config.propsUrl) return
              previewDataInterface(config.propsUrl).then(res => {
                isTreeSelect ? cur.options = res.data : cur.__slot__.options = res.data
              })
            }
          }
        })
      },
      search() {
        let obj = {}
        for (let i = 0; i < this.searchList.length; i++) {
          const e = this.searchList[i]
          if (e.value) {
            if (Array.isArray(e.value)) {
              if (e.value.length) obj[e.__vModel__] = e.value
            } else {
              obj[e.__vModel__] = e.value
            }
          }
        }
        let json = JSON.stringify(obj) === "{}" ? '' : JSON.stringify(obj)
        this.$emit('search', json)
      },
      reset() {
        this.searchList = deepClone(this.list)
        this.$emit('search', '')
      },
      treeReset() {
        this.searchList = deepClone(this.list)
      }
    }
  }
  </script>