|
|
@@ -14,7 +14,6 @@
|
|
|
:is-link="isLink"
|
|
|
:error="error"
|
|
|
:error-message="errorMessage"
|
|
|
-
|
|
|
:arrow-direction="arrowDirection"
|
|
|
:label-class="labelClass"
|
|
|
:label-width="labelWidth"
|
|
|
@@ -25,12 +24,19 @@
|
|
|
:left-icon="leftIcon"
|
|
|
:right-icon="rightIcon"
|
|
|
:icon-prefix="iconPrefix"
|
|
|
- :rules="editable?rules:null"
|
|
|
+ :rules="editable ? rules : null"
|
|
|
+ class="no-err"
|
|
|
readonly
|
|
|
@click-input="onClick"
|
|
|
>
|
|
|
<template #label>
|
|
|
- {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
|
|
|
+ {{ label
|
|
|
+ }}<van-icon
|
|
|
+ v-if="desc && descPosition === 'lableIcon'"
|
|
|
+ name="warning"
|
|
|
+ class="ibps-dialog-icon"
|
|
|
+ @click="$action.descDialog({ title: label, message: desc })"
|
|
|
+ />
|
|
|
</template>
|
|
|
<template v-if="editable" #right-icon>
|
|
|
<van-icon
|
|
|
@@ -41,29 +47,35 @@
|
|
|
/>
|
|
|
<van-icon
|
|
|
v-else
|
|
|
- :name="showPopup?'arrow-up':'arrow-down'"
|
|
|
+ :name="showPopup ? 'arrow-up' : 'arrow-down'"
|
|
|
@click.native.stop="onClick"
|
|
|
/>
|
|
|
-
|
|
|
</template>
|
|
|
<template #input>
|
|
|
<div v-if="$utils.isNotEmpty(selectedData)" class="van-field__control">
|
|
|
<van-tag
|
|
|
- v-for="(item,index) in selectedData"
|
|
|
- :key="item[valueKey]+index"
|
|
|
+ v-for="(item, index) in selectedData"
|
|
|
+ :key="item[linkValueKey] + index"
|
|
|
type="primary"
|
|
|
class="ibps-tag-span"
|
|
|
size="medium"
|
|
|
plain
|
|
|
>
|
|
|
<field-formatter
|
|
|
- :label-key="showLableKey"
|
|
|
+ :label-key="linkValueKey"
|
|
|
:data="item"
|
|
|
:template-fields="templateFields"
|
|
|
/>
|
|
|
</van-tag>
|
|
|
</div>
|
|
|
- <input v-else :placeholder="placeholder" class="van-field__control" readonly>
|
|
|
+ <!-- 关联数据审阅时回显问题 -->
|
|
|
+ <input
|
|
|
+ v-else
|
|
|
+ :placeholder="placeholder"
|
|
|
+ :value="selectedValue"
|
|
|
+ class="van-field__control"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
<!-- 数据模版对话框-->
|
|
|
<data-template-popup
|
|
|
:tem="tem"
|
|
|
@@ -72,22 +84,21 @@
|
|
|
:params="params"
|
|
|
:values="selectedValue"
|
|
|
:multiple="multiple"
|
|
|
-
|
|
|
:left-text="leftText"
|
|
|
:id-key="idKey"
|
|
|
- :value-key="valueKey"
|
|
|
- :label-key="labelKey"
|
|
|
+ :value-key="linkValueKey"
|
|
|
+ :label-key="linkLabelKey"
|
|
|
:parent-id-key="parentIdKey"
|
|
|
:is-tree="isTree"
|
|
|
:query-key="queryKey"
|
|
|
+ field-type="linkdata"
|
|
|
+ :search-placeholder="'请输入'"
|
|
|
:template-fields="templateFields"
|
|
|
:dynamic-params="dynamicParams"
|
|
|
-
|
|
|
@init-data="initData"
|
|
|
@cancel="onCancel"
|
|
|
@confirm="onConfirm"
|
|
|
/>
|
|
|
-
|
|
|
</template>
|
|
|
</van-field>
|
|
|
</template>
|
|
|
@@ -106,51 +117,52 @@ import i18n from '@/utils/i18n' // Internationalization 国际化
|
|
|
|
|
|
import { isDef } from 'vant/lib/utils'
|
|
|
import FieldMixin from '@/mixins/field'
|
|
|
-import { loadDataTemplateByKey, getDataTemplateListTemplate, buildDataTemplateFields } from '@/business/platform/data/utils'
|
|
|
+import {
|
|
|
+ loadDataTemplateByKey,
|
|
|
+ getDataTemplateListTemplate,
|
|
|
+ buildDataTemplateFields
|
|
|
+} from '@/business/platform/data/utils'
|
|
|
import DataTemplatePopup from '../../data-template/template'
|
|
|
import FieldFormatter from '../../data-template/field-formatter'
|
|
|
|
|
|
export default {
|
|
|
- name: 'ibps-linkdata',
|
|
|
+ name: 'IbpsLinkdata',
|
|
|
components: {
|
|
|
DataTemplatePopup,
|
|
|
FieldFormatter
|
|
|
},
|
|
|
mixins: [FieldMixin],
|
|
|
props: {
|
|
|
- templateKey: { // 数据模版key
|
|
|
+ templateKey: {
|
|
|
+ // 数据模版key
|
|
|
type: String,
|
|
|
required: true
|
|
|
},
|
|
|
- store: { // 存储类型 对应[多选]有效,json: json字符串,id:只存储id, array:存储数组数据 ,arrayId: 字符串类型。
|
|
|
+ store: {
|
|
|
+ // 存储类型 对应[多选]有效,json: json字符串,id:只存储id, array:存储数组数据 ,arrayId: 字符串类型。
|
|
|
type: String,
|
|
|
default: 'id',
|
|
|
- validator: function(value) {
|
|
|
+ validator: function (value) {
|
|
|
return ['json', 'id', 'array', 'arrayId'].indexOf(value) !== -1
|
|
|
}
|
|
|
},
|
|
|
- storeSeparator: { // 存储值分割符,对于设置字符串类型的分隔符
|
|
|
+ storeSeparator: {
|
|
|
+ // 存储值分割符,对于设置字符串类型的分隔符
|
|
|
type: String,
|
|
|
default: ','
|
|
|
},
|
|
|
+ fieldOptions: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
leftText: {
|
|
|
type: String,
|
|
|
default: i18n.t('cancel')
|
|
|
},
|
|
|
- multiple: { // 是否多选
|
|
|
+ multiple: {
|
|
|
+ // 是否多选
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- valueKey: { // 值key
|
|
|
- type: String
|
|
|
- },
|
|
|
- labelType: { // 文本类型
|
|
|
- type: String,
|
|
|
- default: 'first'
|
|
|
- },
|
|
|
- labelKey: { // 文本key
|
|
|
- type: [String, Function]
|
|
|
- },
|
|
|
emptyText: {
|
|
|
type: String,
|
|
|
default: '暂无数据'
|
|
|
@@ -175,10 +187,37 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
showClear() {
|
|
|
- return this.clearable && this.$utils.isNotEmpty(this.value) && isDef(this.value) && this.editable
|
|
|
+ return (
|
|
|
+ this.clearable &&
|
|
|
+ this.$utils.isNotEmpty(this.value) &&
|
|
|
+ isDef(this.value) &&
|
|
|
+ this.editable
|
|
|
+ )
|
|
|
+ },
|
|
|
+ linkValueKey() {
|
|
|
+ return this.fieldOptions['link_config']
|
|
|
+ ? this.fieldOptions['link_config'].id || ''
|
|
|
+ : ''
|
|
|
+ },
|
|
|
+ linkLabelType() {
|
|
|
+ return this.fieldOptions['link_config']
|
|
|
+ ? this.fieldOptions['link_config'].type || 'first'
|
|
|
+ : 'first'
|
|
|
+ },
|
|
|
+ linkLabelKey() {
|
|
|
+ return this.fieldOptions['link_config']
|
|
|
+ ? this.fieldOptions['link_config'].text || ''
|
|
|
+ : ''
|
|
|
+ },
|
|
|
+ linkStructure() {
|
|
|
+ return this.fieldOptions['link_config']
|
|
|
+ ? this.fieldOptions['link_config'].structure || 'list'
|
|
|
+ : 'list'
|
|
|
},
|
|
|
- showLableKey() {
|
|
|
- return this.labelKey
|
|
|
+ linkConfig() {
|
|
|
+ return this.fieldOptions['link_config']
|
|
|
+ ? this.fieldOptions['link_config'] || {}
|
|
|
+ : {}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -201,36 +240,36 @@ export default {
|
|
|
// 加载加载配置数据
|
|
|
loadData(key) {
|
|
|
const params = {}
|
|
|
- loadDataTemplateByKey(key, params).then((data) => {
|
|
|
- const template = getDataTemplateListTemplate(data)
|
|
|
- this.tem = { ...template }
|
|
|
- this.templateFields = buildDataTemplateFields(data.fields)
|
|
|
- this.buildKey(data, template)
|
|
|
- }).catch((e) => {
|
|
|
- console.error(e)
|
|
|
- })
|
|
|
+ loadDataTemplateByKey(key, params)
|
|
|
+ .then((data) => {
|
|
|
+ const template = getDataTemplateListTemplate(data)
|
|
|
+ this.tem = { ...template }
|
|
|
+ this.templateFields = buildDataTemplateFields(data.fields)
|
|
|
+ this.buildKey(data, template)
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.error(e)
|
|
|
+ })
|
|
|
},
|
|
|
buildKey(dataTemplate, template) {
|
|
|
this.idKey = dataTemplate['unique']
|
|
|
this.queryKey = this.getQueryKey(template['query_columns'])
|
|
|
const resultColumns = template['result_columns']
|
|
|
- // console.log(resultColumns, 'resultColumnsresultColumns')
|
|
|
- if (this.$utils.isEmpty(resultColumns)) { return }
|
|
|
- this.labelKey = resultColumns[0]['name']
|
|
|
- if (dataTemplate.showType === 'tree') { // 树形
|
|
|
+ console.log(resultColumns, 'resultColumnsresultColumns')
|
|
|
+ if (this.$utils.isEmpty(resultColumns)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // this.linkLabelKey = resultColumns[0]['name']
|
|
|
+ if (dataTemplate.showType === 'tree') {
|
|
|
+ // 树形
|
|
|
this.isTree = true
|
|
|
const displayColumns = template['display_columns']
|
|
|
if (this.$utils.isNotEmpty(displayColumns)) {
|
|
|
- this.labelKey = displayColumns['name_key']
|
|
|
this.idKey = displayColumns['id_key']
|
|
|
this.parentIdKey = displayColumns['pid_key']
|
|
|
}
|
|
|
} else if (dataTemplate.showType === 'list') {
|
|
|
this.isTree = false
|
|
|
- const displayColumns = template['display_columns']
|
|
|
- if (this.$utils.isNotEmpty(displayColumns)) {
|
|
|
- this.labelKey = (displayColumns[0] ? displayColumns[0]['name'] : '') || ''
|
|
|
- }
|
|
|
}
|
|
|
},
|
|
|
initSelectedData() {
|
|
|
@@ -240,56 +279,72 @@ export default {
|
|
|
if (this.$utils.isEmpty(value)) {
|
|
|
return []
|
|
|
}
|
|
|
- if (this.store === 'json') { // json
|
|
|
- const o = Object.prototype.toString.call(this.$utils.parseData(value)) === '[object Object]'
|
|
|
+ if (this.store === 'json') {
|
|
|
+ // json
|
|
|
+ const o =
|
|
|
+ Object.prototype.toString.call(this.$utils.parseData(value)) ===
|
|
|
+ '[object Object]'
|
|
|
try {
|
|
|
- const data = o ? [this.$utils.parseData(value)] : this.$utils.parseData(value)
|
|
|
+ const data = o
|
|
|
+ ? [this.$utils.parseData(value)]
|
|
|
+ : this.$utils.parseData(value)
|
|
|
return data.map((d) => {
|
|
|
- return d[this.valueKey]
|
|
|
+ return d[this.linkValueKey]
|
|
|
})
|
|
|
} catch (error) {
|
|
|
console.error(error)
|
|
|
return []
|
|
|
}
|
|
|
- } else if (this.store === 'id') { // id
|
|
|
+ } else if (this.store === 'id') {
|
|
|
+ // id
|
|
|
return value.split(this.storeSeparator)
|
|
|
- } else if (this.store === 'arrayId') { // 数组id
|
|
|
+ } else if (this.store === 'arrayId') {
|
|
|
+ // 数组id
|
|
|
return value
|
|
|
} else {
|
|
|
return value.map((d) => {
|
|
|
- return d[this.valueKey]
|
|
|
+ return d[this.linkValueKey]
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
getStoreValue(value) {
|
|
|
+ console.log('this.store==>', this.store, this.linkValueKey)
|
|
|
const res = []
|
|
|
- if (this.store === 'json') { // json
|
|
|
+ if (this.store === 'json') {
|
|
|
+ // json
|
|
|
if (this.$utils.isEmpty(value)) {
|
|
|
return ''
|
|
|
}
|
|
|
- value.forEach(v => {
|
|
|
- if (this.$utils.isEmpty(v)) { return true }
|
|
|
+ value.forEach((v) => {
|
|
|
+ if (this.$utils.isEmpty(v)) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
const o = {}
|
|
|
- o[this.valueKey] = v[this.valueKey]
|
|
|
- o[this.labelKey] = v[this.labelKey]
|
|
|
+ o[this.linkValueKey] = v[this.linkValueKey]
|
|
|
+ o[this.linkLabelKey] = v[this.linkLabelKey]
|
|
|
res.push(o)
|
|
|
})
|
|
|
return JSON.stringify(res)
|
|
|
- } else if (this.store === 'id') { // id
|
|
|
- value.forEach(v => {
|
|
|
- res.push(v[this.valueKey])
|
|
|
+ } else if (this.store === 'id') {
|
|
|
+ // id
|
|
|
+ value.forEach((v) => {
|
|
|
+ res.push(v[this.linkValueKey])
|
|
|
})
|
|
|
return res.join(this.storeSeparator)
|
|
|
- } else if (this.store === 'arrayId') { // 数组id
|
|
|
+ } else if (this.store === 'arrayId') {
|
|
|
+ // 数组id
|
|
|
return value.map((d) => {
|
|
|
- return d[this.valueKey]
|
|
|
+ return d[this.linkValueKey]
|
|
|
})
|
|
|
- } else { // 数组
|
|
|
+ } else {
|
|
|
+ // 数组
|
|
|
return value || []
|
|
|
}
|
|
|
},
|
|
|
onClick() {
|
|
|
- if (!this.editable) { return }
|
|
|
+ if (!this.editable) {
|
|
|
+ return
|
|
|
+ }
|
|
|
this.initSelectedData()
|
|
|
this.showPopup = true
|
|
|
},
|
|
|
@@ -305,8 +360,8 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
this.showPopup = false
|
|
|
-
|
|
|
this.selectedData = selectedData
|
|
|
+ console.log('selectedDataselectedDataselectedData==>', selectedData)
|
|
|
this.setInputValue(this.getStoreValue(selectedData))
|
|
|
},
|
|
|
onRightIconClick() {
|
|
|
@@ -317,6 +372,7 @@ export default {
|
|
|
},
|
|
|
setInputValue(value) {
|
|
|
const result = this.formatData(value)
|
|
|
+ console.log('result===>', result)
|
|
|
this.$emit('input', result)
|
|
|
// 处理回调
|
|
|
this.$nextTick(() => {
|
|
|
@@ -326,6 +382,7 @@ export default {
|
|
|
},
|
|
|
// 回调初始化数据
|
|
|
initData(data) {
|
|
|
+ console.log('2132132', data)
|
|
|
this.selectedData = data
|
|
|
this._setInputValue()
|
|
|
this.$nextTick(() => {
|
|
|
@@ -338,14 +395,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
formatData(data) {
|
|
|
+ console.log('222222222222222222222222222===>', data)
|
|
|
if (this.$utils.isEmpty(data)) {
|
|
|
return ''
|
|
|
}
|
|
|
- if (this.store === 'json') { // json
|
|
|
+ if (this.store === 'json') {
|
|
|
+ // json
|
|
|
const resutlList = JSON.parse(this.$utils.newData(data))
|
|
|
- resutlList.forEach(element => {
|
|
|
- element[this.dialogId] = element[this.valueKey]
|
|
|
- element[this.dialogTitle] = element[this.labelKey]
|
|
|
+ resutlList.forEach((element) => {
|
|
|
+ element[this.dialogId] = element[this.linkValueKey]
|
|
|
+ element[this.dialogTitle] = element[this.linkLabelKey]
|
|
|
})
|
|
|
return JSON.stringify(resutlList)
|
|
|
} else if (this.store === 'id') {
|
|
|
@@ -356,9 +415,9 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .ibps-tag-span {
|
|
|
- ::v-deep .ibps-data-template-data {
|
|
|
- color: #4399fb !important;
|
|
|
- }
|
|
|
+.ibps-tag-span {
|
|
|
+ ::v-deep .ibps-data-template-data {
|
|
|
+ color: #4399fb !important;
|
|
|
}
|
|
|
- </style>
|
|
|
+}
|
|
|
+</style>
|