/** * @Description: * @author cxg * @date 2021/02/24 */ <template> <div class="-page"> <el-cascader v-model="cascaderData" :props="childProps" :options="options" v-bind="itemObj.component" @change="handleChange" > <template slot-scope="{ node, data }"> <span>{{ itemObj.component.onlyShowValue ? data[itemObj.component.labelWord]: data.label }}</span> </template> </el-cascader> </div> </template> <script> import _clonedeep from 'lodash.clonedeep' import _get from 'lodash.get' export default { components: {}, props: { value: { type: [Array, String, Number], default: null }, itemObj: { type: Object, default: () => {} } }, data() { return { showCascader: false, hasObjOptions: false, childProps: {}, cascaderData: '', options: [], hasGetConfigData: false } }, computed: {}, watch: { value: { immediate: true, handler: function(val) { if (val) { if (!this.itemObj.component.multiple && this.itemObj.component.emitPath) { this.$set(this, 'cascaderData', this.value) } else { if (typeof val === 'number') { this.$set(this, 'cascaderData', this.value) } else { this.$set(this, 'cascaderData', this.value.split(',')) } } } } }, itemObj: { immediate: true, deep: true, handler: function(val) { if (!this.hasGetConfigData) { this.$set(this, 'childProps', { emitPath: false, checkStrictly: this.itemObj.component.checkStrictly ? this.itemObj.component.checkStrictly : false, multiple: !!this.itemObj.component.multiple }) if (!val.component.optionsdic && !val.component.dicType) { this.options = _clonedeep(val.component.options) // console.log(val.component.options) } if (!this.hasObjOptions) { this.$set(this, 'options', []) const searverParams = { // 'open': val.component.expand, 'sortItem': [ // { // 'fieldName': 'modifyTime', // 'sortOrder': 'asc' // } ] } // 业务对象 if (!val.component.dicType || val.component.dicType === '1') { if (val.component.searchItemsParams) { try { if (val.component.searchItemsParams) { const monmnetProject = {} // if (monmnetProjectText) { // monmnetProject = JSON.parse(monmnetProjectText) // } const middleObj = { projectNumber: monmnetProject.projectNumber } const formParams = JSON.parse(this.$utils.attachTemplateDoubleToData(val.component.searchItemsParams, middleObj)) if (this.$utils.isArray(formParams)) { searverParams.searchItems = { items: formParams } } else { searverParams.searchItems = formParams } } } catch (error) { this.$utils.showMessage('过滤参数JSON配置错误', 'warning') } } this.$api.searchApi(val.component.optionsObj, searverParams).then(res => { this.hasGetConfigData = true if (res.items.content) { res.items.content.forEach((item) => { item.value = this.itemObj.component.valueWord ? item[this.itemObj.component.valueWord] : item['id'] item.label = this.itemObj.component.onlyShowValue ? (this.itemObj.component.valueWord ? item[this.itemObj.component.valueWord] : item['id']) : this.formatLael(this.itemObj.component.labelWord, item) }) this.$set(this, 'options', this.$utils.generateTree(res.items.content, { id: this.itemObj.component.selfId, pid: this.itemObj.component.pid })) // if (this.value) { // this.$set(this, 'cascaderData', this.value.split(',')) // this.cascaderData = this.value.split(',') // } this.showCascader = true } }) } // 字典optionsdic if (val.component.dicType === '0' && val.component.optionsdic && val.component.optionsdic.length) { this.getDictOptions(val.component.optionsdic) } } } } } }, mounted() {}, methods: { async getDictOptions(optionsdic) { this.hasGetConfigData = true const dictCode = Array.isArray(optionsdic) ? optionsdic[optionsdic.length - 1] : optionsdic const options = this.$store.state.dictionaries && this.$store.state.dictionaries[dictCode] ? this.$store.state.dictionaries[dictCode].default : await this.$utils.getDicListByCode(dictCode) this.$set(this, 'options', this.$utils.generateTree(JSON.parse(JSON.stringify(options)), { id: this.itemObj.component.selfId || 'id', pid: this.itemObj.component.pid || 'parentId' })) this.showCascader = true }, formatLael(label, obj) { if (label) { if (this.$utils.isArray(label)) { let resData = '' label.forEach((item, index) => { if (index > 0) { resData += `-${_get(obj, item)}` } else { resData += `${_get(obj, item)}` } }) return resData } else { return _get(obj, label) } } else { return null } }, handleChange(val) { if (!this.itemObj.component.multiple && this.itemObj.component.emitPath) { this.$emit('input', val) } else { this.$emit('input', Array.isArray(val) ? val.join(',') : val) } // this.$emit('input', this.itemObj.component.emitPath === false ? val : val.join(',')) if (this.itemObj.handler && this.itemObj.handler.change) { this.itemObj.handler.change(val) } } } } </script> <style lang='scss'> </style>