| | |
| | | <el-input |
| | | :type="item.inputType || 'text'" |
| | | v-if="item.type === 'text'" |
| | | :placeholder="item.placeholder || ''" |
| | | :placeholder="item.placeholder || '请输入'" |
| | | @change="(e) => inputChange(e)" |
| | | :clearable="true" |
| | | v-model="val" |
| | |
| | | <el-cascader |
| | | v-model="val" |
| | | v-if="item.type === 'cascader'" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | :options="item.options" |
| | | :props="item.optionsConfig.props||{ checkStrictly: true,value: 'id' }" |
| | | :clearable="true" |
| | | :props="item.optionsConfig.props||{ checkStrictly: true,emitPath: false,value: 'id' }" |
| | | :show-all-levels="false" |
| | | filterable |
| | | clearable |
| | | style="width: 150px" |
| | | @change="(v) => this.$emit('change', v)" |
| | | > |
| | |
| | | <!-- 下拉--> |
| | | <el-select |
| | | v-if="item.type === 'select'" |
| | | :placeholder="item.placeholder || ''" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | v-model="val" |
| | | show-search |
| | | filterable |
| | | :multiple="item.multiple || false" |
| | | :collapse-tags="item.collapseTags || false" |
| | | :clearable="true" |
| | |
| | | <!--时间--> |
| | | <el-time-select |
| | | v-if="item.type === 'time-picker'" |
| | | :placeholder="item.placeholder || ''" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | v-model="val" |
| | | :clearable="true" |
| | | style="width: 150px" |
| | |
| | | v-model="val" |
| | | type="year" |
| | | :clearable="true" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | style="width: 150px" |
| | | :value-format="item.format?item.format:'yyyy'" |
| | | @change="(v) => panelChange(v, 'yyyy')" |
| | | /> |
| | | <!--月选择器--> |
| | |
| | | v-model="val" |
| | | type="month" |
| | | :clearable="true" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | style="width: 150px" |
| | | :value-format="item.format?item.format:'yyyyMM'" |
| | | @change="(v) => panelChange(v, 'yyyy-MM')" |
| | | /> |
| | | <!--日选择器--> |
| | |
| | | v-model="val" |
| | | type="date" |
| | | :clearable="true" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | style="width: 150px" |
| | | :value-format="item.format?item.format:'yyyyMMdd'" |
| | | @change="(v) => panelChange(v, 'yyyy-MM-dd')" |
| | | /> |
| | | <!--日期带时间选择器--> |
| | |
| | | v-model="val" |
| | | type="datetime" |
| | | :clearable="true" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | style="width: 150px" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | |
| | | v-if="item.type === 'datetimerange-picker'" |
| | | v-model="val" |
| | | style="width: 378px" |
| | | :placeholder="item.placeholder || ''" |
| | | :placeholder="item.placeholder || '请选择'" |
| | | type="datetimerange" |
| | | :pickerOptions='pickerOptions' |
| | | :disabled="item.disabled" |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {formatDates} from '@/utils/index'; |
| | | import request from '@/utils/request'; |
| | | |
| | | function trim(str) { |
| | |
| | | item: Object, |
| | | }, |
| | | created() { |
| | | if (this.item.type === 'select' && this.item.optionsConfig) { |
| | | if (this.$axios === undefined) { |
| | | console.error('请先配置this.$axios'); |
| | | return; |
| | | } |
| | | request({ |
| | | url: this.item.optionsConfig.url, |
| | | method: 'get', |
| | | }).then((res) => { |
| | | const data = res || []; |
| | | this.item.options = []; |
| | | data.forEach((v) => { |
| | | this.item.options.push({ |
| | | label: v[this.item.optionsConfig.label || 'label'], |
| | | value: v[this.item.optionsConfig.value || 'value'], |
| | | }); |
| | | }); |
| | | }); |
| | | } |
| | | if (this.item.type === 'cascader' && this.item.optionsConfig) { |
| | | if (this.$axios === undefined) { |
| | | console.error('请先配置this.$axios'); |
| | | return; |
| | | } |
| | | request({ |
| | | url: this.item.optionsConfig.url, |
| | | method: 'get', |
| | | }).then((res) => { |
| | | const data = res || []; |
| | | this.item.options = []; |
| | | this.item.options = data; |
| | | }); |
| | | } |
| | | if (this.item.type === 'tree-select' && this.item.optionsConfig) { |
| | | if (this.$axios === undefined) { |
| | | console.error('请先配置this.$axios'); |
| | | return; |
| | | } |
| | | if (this.item.asyncLoad) { |
| | | this.asyncLoad({value: 0}).then((res) => { |
| | | this.treeData = res; |
| | | }); |
| | | } else { |
| | | this.asyncLoad({}).then((res) => { |
| | | this.treeData = res; |
| | | }); |
| | | } |
| | | } |
| | | this.initData({}) |
| | | }, |
| | | watch: { |
| | | value(v) { |
| | |
| | | }; |
| | | }, |
| | | methods: { |
| | | panelChange(v, type) { |
| | | var info = null |
| | | if (v && this.item.type !== 'date-time-picker') { |
| | | info = formatDates(v, type) |
| | | } else { |
| | | info = v |
| | | clearData() { |
| | | this.item.options = [] |
| | | this.treeData = [] |
| | | }, |
| | | initData(params) { |
| | | this.val = this.item.defaultValue |
| | | if (this.item.type === 'select' && this.item.optionsConfig) { |
| | | if (this.$axios === undefined) { |
| | | console.error('请先配置this.$axios'); |
| | | return; |
| | | } |
| | | request({ |
| | | url: this.item.optionsConfig.url, |
| | | method: 'get', |
| | | params |
| | | }).then((res) => { |
| | | const data = res || []; |
| | | this.item.options = []; |
| | | data.forEach((v) => { |
| | | this.item.options.push({ |
| | | label: v[this.item.optionsConfig.label || 'label'], |
| | | value: v[this.item.optionsConfig.value || 'value'], |
| | | }); |
| | | }); |
| | | }); |
| | | } |
| | | this.val = info |
| | | this.$emit('change', info) |
| | | if (this.item.type === 'cascader' && this.item.optionsConfig) { |
| | | if (this.$axios === undefined) { |
| | | console.error('请先配置this.$axios'); |
| | | return; |
| | | } |
| | | request({ |
| | | url: this.item.optionsConfig.url, |
| | | method: 'get', |
| | | params |
| | | }).then((res) => { |
| | | const data = res || []; |
| | | this.item.options = []; |
| | | this.item.options = data; |
| | | }); |
| | | } |
| | | if (this.item.type === 'tree-select' && this.item.optionsConfig) { |
| | | if (this.$axios === undefined) { |
| | | console.error('请先配置this.$axios'); |
| | | return; |
| | | } |
| | | if (this.item.asyncLoad) { |
| | | params.value = 0 |
| | | this.asyncLoad(params).then((res) => { |
| | | this.treeData = res; |
| | | }); |
| | | } else { |
| | | this.asyncLoad(params).then((res) => { |
| | | this.treeData = res; |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | panelChange(v, type) { |
| | | this.$emit('change', v) |
| | | }, |
| | | filterOption(input, option) { |
| | | return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0; |