({
@@ -139,7 +142,19 @@
return {
isShow: false,
isShowOperation: false,
- editFormItemData: {}
+ editFormItemData: {},
+ // 数据示例基于配置的value来展示值，这里需要传入一份配置的标准值
+ formConfig: {
+ val: {
+ 'string': '',
+ 'boolean': false,
+ 'array': [
+ 1,
+ 2,
+ 3
+ ]
+ }
+ }
}
},
@@ -153,8 +168,11 @@
return
}
+ this.formItemList = [...this.componentNode.children]
+
const updateCallback = _.throttle((event) => {
if (this.componentNode.componentId === event.target.componentId) {
+ this.formItemList = [...this.componentNode.children]
this.$forceUpdate()
}
}, 20)
@@ -165,6 +183,22 @@
})
},
methods: {
+ handleSort (event) {
+ if (event.moved) {
+ const {
+ element,
+ newIndex,
+ oldIndex
+ } = event.moved
+ if (newIndex === oldIndex) {
+ return
+ }
+ // 从原位置删除
+ this.componentNode.removeChild(element)
+ // 插入新位置
+ this.componentNode.insertBefore(element, this.componentNode.children[newIndex])
+ }
+ },
/**
* @desc 编辑表单项属性
* @param { Object | null } formItemNode 操作的表单节点
@@ -203,12 +237,22 @@
const setProp = node => {
const formItemPropList = ['label', 'property', 'required']
+ const propsValue = {}
formItemPropList.forEach(propName => {
- node.setProp(propName, itemData[propName])
+ propsValue[propName] = LC.utils.genPropFormatValue({
+ format: 'value',
+ code: itemData[propName],
+ renderValue: itemData[propName]
+ })
})
// 验证规则里面配有 required 规则
const hasRequired = ((itemData.validate || []).filter(item => item.required === true).length > 0)
- node.setProp('required', hasRequired)
+ propsValue['required'] = LC.utils.genPropFormatValue({
+ format: 'value',
+ code: hasRequired,
+ renderValue: hasRequired
+ })
+ node.setProp(propsValue)
}
const setDirective = node => {
@@ -222,9 +266,15 @@
}
])
}
+
+ const formPropRules = Object.assign({}, this.componentNode.prop.rules)
if (this.editFormItemNode) {
// 编辑
+ const editFormItemDataProp = this.editFormItemNode.prop
+ // 可能修改了 property，删除老数据重新收集
+ delete formPropRules[editFormItemDataProp.property]
+
let inputNode = this.editFormItemNode.children[0]
// 表单组件类型改变，删除原有组件
if (inputNode.type !== typeEnum[itemData.type]) {
@@ -233,6 +283,7 @@
inputNode = genInputNode(itemData.type)
this.editFormItemNode.appendChild(inputNode)
}
+
setDirective(inputNode)
setProp(this.editFormItemNode)
} else {
@@ -258,7 +309,15 @@
valueType: 'text',
renderValue: '提交'
})
- submitBtnNode.setProp('theme', 'primary')
+
+ submitBtnNode.setProp('theme', LC.utils.genPropFormatValue({
+ format: 'value',
+ code: 'primary',
+ renderValue: 'primary'
+ }))
+ submitBtnNode.setStyle({
+ width: '88px'
+ })
// 取消按钮
const cancelBtnNode = LC.createNode('bk-button')
cancelBtnNode.setRenderSlots({
@@ -268,7 +327,10 @@
valueType: 'text',
renderValue: '取消'
})
- cancelBtnNode.setStyle('marginLeft', '10px')
+ cancelBtnNode.setStyle({
+ width: '88px',
+ 'marginLeft': '8px'
+ })
actionFormItemNode = LC.createNode('widget-form-item')
actionFormItemNode.appendChild(submitBtnNode)
actionFormItemNode.appendChild(cancelBtnNode)
@@ -279,14 +341,29 @@
this.componentNode.insertBefore(formItemNode, actionFormItemNode)
}
- // 更新 form 的 rules prop
- this.componentNode.setProp('rules', Object.assign({}, this.componentNode.prop.rules, {
+ const newPropRules = Object.assign(formPropRules, {
[itemData.property]: itemData.validate
- }))
- // 更新 form 的 model prop
- this.componentNode.setProp('model', Object.assign({}, this.componentNode.prop.model, {
- [itemData.property]: getDefaultValFromType(itemData.type)
- }))
+ })
+ // form.prop.model 通过遍历 formItem 收集 formItem.prop.property得到
+ const newPropModel = this.componentNode.children.reduce((result, formItemNode) => {
+ const formItemProp = formItemNode.prop
+ if (formItemProp.property) {
+ result[formItemProp.property] = getDefaultValFromType(formItemNode.type)
+ }
+ return result
+ }, {})
+ this.componentNode.setProp({
+ 'rules': LC.utils.genPropFormatValue({
+ format: 'value',
+ code: newPropRules,
+ renderValue: newPropRules
+ }),
+ 'model': LC.utils.genPropFormatValue({
+ format: 'value',
+ code: newPropModel,
+ renderValue: newPropModel
+ })
+ })
this.isShowOperation = false
},
/**
@@ -302,6 +379,28 @@
*/
handleDelete (formItemNode) {
this.componentNode.removeChild(formItemNode)
+
+ // 更新 form 的 prop.rules
+ const rules = { ...this.componentNode.prop.rules }
+ delete rules[formItemNode.prop.property]
+ this.componentNode.setProp('rules', LC.utils.genPropFormatValue({
+ format: 'value',
+ code: rules,
+ renderValue: rules
+ }))
+ // form.prop.model 通过遍历 formItem 收集 formItem.prop.property得到
+ const model = this.componentNode.children.reduce((result, formItemNode) => {
+ const formItemProp = formItemNode.prop
+ if (formItemProp.property) {
+ result[formItemProp.property] = getDefaultValFromType(formItemNode.type)
+ }
+ return result
+ }, {})
+ this.componentNode.setProp('model', LC.utils.genPropFormatValue({
+ format: 'value',
+ code: model,
+ renderValue: model
+ }))
},
/**
* @desc 验证远程数据
@@ -337,6 +436,7 @@
diff --git a/lib/client/src/element-materials/modifier/component/layout/index.vue b/lib/client/src/element-materials/modifier/component/layout/index.vue
index 2c965624a..6a872e198 100644
--- a/lib/client/src/element-materials/modifier/component/layout/index.vue
+++ b/lib/client/src/element-materials/modifier/component/layout/index.vue
@@ -25,9 +25,10 @@
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/column.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/column.vue
deleted file mode 100644
index a784e6bba..000000000
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/column.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-
-
-
-
-
-
列配置:
-
-
-
每一列栅格宽度占比为
-
该列配置值占总列配置值的百分比
-
建议总列配置值为 12 或 24
-
-
-
-
- 第 {{index + 1}} 列：
-
-
-
-
-
- 添加 1 列
-
-
-
-
-
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/data-source.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/data-source.vue
index 6712f5221..bbf6d71f0 100644
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/data-source.vue
+++ b/lib/client/src/element-materials/modifier/component/props/components/strategy/data-source.vue
@@ -1,5 +1,12 @@
-
+
-
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/list.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/list.vue
new file mode 100644
index 000000000..0b668d5aa
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/component/props/components/strategy/list.vue
@@ -0,0 +1,271 @@
+
+
+
+
+
+
+ {{ item[currentConfig.displayKey] }}
+
+
+
+
+
+
{{option.name}}
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/number.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/number.vue
index d12c7f65e..33c9b8776 100644
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/number.vue
+++ b/lib/client/src/element-materials/modifier/component/props/components/strategy/number.vue
@@ -11,16 +11,30 @@
-
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/src.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/src.vue
index 6768fdc58..db2ae5926 100644
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/src.vue
+++ b/lib/client/src/element-materials/modifier/component/props/components/strategy/src.vue
@@ -7,6 +7,10 @@
SrcInput
},
props: {
+ componentType: {
+ type: String,
+ required: true
+ },
defaultValue: {
type: String,
required: true
@@ -44,6 +48,11 @@
otherProps.triggerText = '选择文件'
otherProps.placeholder = '输入或选择文件作为链接地址'
}
+
+ if (props.componentType.indexOf('image') !== -1 || props.componentType.indexOf('avatar') !== -1) {
+ otherProps.fileType = 'img'
+ }
+
return otherProps
})
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/tab-panel.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/tab-panel.vue
deleted file mode 100644
index 0f630c67d..000000000
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/tab-panel.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-
-
-
-
-
-
-
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/table-data-source.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/table-data-source.vue
index c3783fa18..1f4b18b5f 100644
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/table-data-source.vue
+++ b/lib/client/src/element-materials/modifier/component/props/components/strategy/table-data-source.vue
@@ -1,5 +1,12 @@
-
+
-
diff --git a/lib/client/src/element-materials/modifier/component/slots/components/list/vant/index.js b/lib/client/src/element-materials/modifier/component/slots/components/list/vant/index.js
index e1f957bc7..d4042c678 100644
--- a/lib/client/src/element-materials/modifier/component/slots/components/list/vant/index.js
+++ b/lib/client/src/element-materials/modifier/component/slots/components/list/vant/index.js
@@ -19,7 +19,8 @@ const vantListMap = {
label: `选项${index}`,
value: `选项${index}`,
disabled: false
- })
+ }),
+ displayKey: 'label'
},
'van-radio': {
template: [
@@ -41,7 +42,8 @@ const vantListMap = {
label: `单选项${index}`,
value: `单选项${index}`,
disabled: false
- })
+ }),
+ displayKey: 'label'
},
'van-step': {
template: [
@@ -53,7 +55,8 @@ const vantListMap = {
],
generateFunc: index => ({
text: `步骤${index}`
- })
+ }),
+ displayKey: 'text'
},
'van-tab': {
template: [
@@ -92,7 +95,8 @@ const vantListMap = {
label: `选项${index}`,
value: `选项${index}`,
disabled: false
- })
+ }),
+ displayKey: 'title'
}
}
diff --git a/lib/client/src/element-materials/modifier/component/slots/components/remote.vue b/lib/client/src/element-materials/modifier/component/slots/components/remote.vue
index a414a909b..97ac0d6bf 100644
--- a/lib/client/src/element-materials/modifier/component/slots/components/remote.vue
+++ b/lib/client/src/element-materials/modifier/component/slots/components/remote.vue
@@ -5,6 +5,7 @@
:default-value="copySlotVal.val"
:remote-validate="slotConfig.remoteValidate"
:change="remoteChange"
+ :describe="slotConfig"
/>
@@ -26,6 +27,9 @@
type: Object,
default: () => ({})
},
+ type: {
+ type: String
+ },
change: {
type: Function,
default: () => {}
@@ -45,6 +49,11 @@
}
},
+ created () {
+ // 防止响应式更新
+ this.copyType = this.type
+ },
+
methods: {
remoteChange (name, val, type, methodData) {
const slot = {
@@ -54,7 +63,7 @@
methodData
}
}
- this.change(slot)
+ this.change(slot, this.copyType)
}
}
}
diff --git a/lib/client/src/element-materials/modifier/component/slots/components/select-data-source.vue b/lib/client/src/element-materials/modifier/component/slots/components/select-data-source.vue
index 30a71579a..6c939d814 100644
--- a/lib/client/src/element-materials/modifier/component/slots/components/select-data-source.vue
+++ b/lib/client/src/element-materials/modifier/component/slots/components/select-data-source.vue
@@ -1,25 +1,34 @@
表
+ class="g-prop-sub-title g-mt8 g-mb6"
+ >数据表
+ 
+