Skip to content

F
ferry_web
Commit 2dc50e31 by Mr. Lan
Options

feat: 添加级联选择器静态数据。

parent 472536c2
Showing with 183 additions and 27 deletions
src/components/VueFormMaking/components/GenerateFormItem.vue
......@@ -63,6 +63,15 @@
<template v-else-if="widget.type === 'input' && widget.options.showPassword">
<input :value="dataModel" type="password" style="border: none; background-color: #ffffff; color: #303133" disabled="disabled">
</template>
<template v-else-if="widget.type === 'cascader'">
<el-cascader
v-model="dataModel"
class="preview-cascader-class"
:disabled="true"
:show-all-levels="widget.options.showAllLevels"
:options="widget.options.remote?widget.options.remoteOptions:widget.options.options"
/>
</template>
<template v-else>
<div>
{{ dataModel }}
......@@ -271,10 +280,11 @@
<el-cascader
v-model="dataModel"
:disabled="widget.options.disabled"
:show-all-levels="widget.options.showAllLevels"
:clearable="widget.options.clearable"
:placeholder="widget.options.placeholder"
:style="{width: widget.options.width}"
:options="widget.options.remoteOptions"
:options="widget.options.remote?widget.options.remoteOptions:widget.options.options"
/>
</template>
......@@ -407,4 +417,14 @@ export default {
.previewEditorDiv > p {
margin: 0;
}
.preview-cascader-class .el-input.is-disabled .el-input__inner {
background-color: #fff;
border: none;
color: #303133;
}
.preview-cascader-class .el-input.is-disabled .el-input__suffix .el-input__suffix-inner .el-input__icon.el-icon-arrow-down:before {
content: ''
}
</style>
src/components/VueFormMaking/components/WidgetConfig.vue
......@@ -120,6 +120,9 @@
<el-input v-model="data.options.props.label" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.label') }}</template>
</el-input>
<el-input v-if="data.type === 'cascader'" v-model="data.options.props.children" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.childrenOption') }}</template>
</el-input>
</div>
</template>
<template v-else>
......@@ -173,28 +176,49 @@
</draggable>
</el-checkbox-group>
</template>
<div style="margin-left: 22px;">
<el-button type="text" @click="handleAddOption">{{ $t('fm.actions.addOption') }}</el-button>
<template v-if="data.type === 'cascader'">
<el-tree
:data="data.options.options"
node-key="id"
default-expand-all
:expand-on-click-node="false"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span style="font-size: 12px;">{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => appendCascaderDialog(data)"
>
<i class="el-icon-circle-plus" style="font-size: 15px;" />
</el-button>
<el-button
type="text"
size="mini"
@click="() => editCascaderData(data)"
>
<i class="el-icon-edit-outline" style="font-size: 15px;" />
</el-button>
<el-button
type="text"
size="mini"
@click="() => removeCascaderData(node, data)"
>
<i class="el-icon-remove" style="font-size: 15px; color: #f56c6c" />
</el-button>
</span>
</span>
</el-tree>
</template>
<div :style="data.type === 'cascader'?{'margin-left': '5px'}: {'margin-left': '22px'}">
<el-button type="text" :style="data.type === 'cascader'?{'font-size': '13px'}:{}" @click="data.type === 'cascader'?handleAddCascaderTopDialog():handleAddOption()">
{{ $t('fm.actions.addOption') }}
</el-button>
</div>
</template>
</el-form-item>
<!-- 级联选择器 -->
<el-form-item v-if="data.type=='cascader'" :label="$t('fm.config.widget.remoteData')">
<div>
<el-input v-model="data.options.remoteFunc" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.remoteFunc') }}</template>
</el-input>
<el-input v-model="data.options.props.value" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.value') }}</template>
</el-input>
<el-input v-model="data.options.props.label" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.label') }}</template>
</el-input>
<el-input v-model="data.options.props.children" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.childrenOption') }}</template>
</el-input>
</div>
</el-form-item>
<!-- 默认值 -->
<el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
......@@ -379,7 +403,7 @@
</el-form-item>
</template>
<!-- 珊格 -->
<template v-if="data.type == 'grid'">
<template v-if="data.type === 'grid'">
<el-form-item :label="$t('fm.config.widget.gutter')">
<el-input v-model.number="data.options.gutter" type="number" />
</el-form-item>
......@@ -420,7 +444,7 @@
</el-form-item>
</template>
<!-- 非珊格 -->
<template v-if="data.type != 'grid'">
<template v-if="data.type !== 'grid'">
<el-form-item :label="$t('fm.config.widget.attribute')">
<el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">{{ $t('fm.config.widget.readonly') }}</el-checkbox>
<el-checkbox v-if="Object.keys(data.options).indexOf('disabled')>=0" v-model="data.options.disabled">{{ $t('fm.config.widget.disabled') }} </el-checkbox>
......@@ -430,6 +454,7 @@
<el-checkbox v-if="Object.keys(data.options).indexOf('arrowControl')>=0" v-model="data.options.arrowControl">{{ $t('fm.config.widget.arrowControl') }}</el-checkbox>
<el-checkbox v-if="Object.keys(data.options).indexOf('isDelete')>=0" v-model="data.options.isDelete">{{ $t('fm.config.widget.isDelete') }}</el-checkbox>
<el-checkbox v-if="Object.keys(data.options).indexOf('isEdit')>=0" v-model="data.options.isEdit">{{ $t('fm.config.widget.isEdit') }}</el-checkbox>
<el-checkbox v-if="Object.keys(data.options).indexOf('showAllLevels')>=0" v-model="data.options.showAllLevels">{{ $t('fm.config.widget.showAllLevels') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('fm.config.widget.validate')">
<div v-if="Object.keys(data.options).indexOf('required')>=0">
......@@ -452,6 +477,36 @@
</el-form-item>
</template>
</el-form>
<el-dialog
title="提示"
:visible.sync="cascaderDialog"
width="30%"
append-to-body
:before-close="handleClose"
>
<div>
<el-form ref="addTreeData" :model="addTreeData" label-width="80px">
<el-form-item
prop="label"
label="Label"
:rules="{ required: true, message: 'Label不能为空', trigger: 'blur' }"
>
<el-input v-model="addTreeData.label" style="width: 95%" />
</el-form-item>
<el-form-item
prop="value"
label="Value"
:rules="{ required: true, message: 'Value不能为空', trigger: 'blur' }"
>
<el-input v-model="addTreeData.value" style="width: 95%" />
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="cascaderDialog = false">取 消</el-button>
<el-button type="primary" @click="operatingStatus==='add'?appendCascaderData():cascaderDialog = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -466,6 +521,10 @@ export default {
props: ['data'],
data() {
return {
selectTreeData: {},
addTreeData: {},
cascaderDialog: false,
operatingStatus: 'add',
validator: {
type: null,
required: null,
......@@ -530,6 +589,47 @@ export default {
this.handleInitHeaders()
},
methods: {
// 级联选择器
handleAddCascaderTopDialog() {
this.selectTreeData = "top"
this.addTreeData = {}
this.cascaderDialog = true
},
handleClose() {},
appendCascaderDialog(val) {
this.operatingStatus = 'add'
this.addTreeData = {}
this.selectTreeData = val
this.cascaderDialog = true
},
appendCascaderData() {
this.$refs['addTreeData'].validate((valid) => {
if (valid) {
if (this.selectTreeData === 'top') {
this.data.options.options.push(this.addTreeData)
} else {
if (this.selectTreeData.children) {
this.selectTreeData.children.push(this.addTreeData);
} else {
this.$set(this.selectTreeData, 'children', [this.addTreeData]);
}
}
this.cascaderDialog = false
}
})
},
editCascaderData(val) {
this.operatingStatus = 'edit'
this.addTreeData = val
this.cascaderDialog = true
},
removeCascaderData(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
handleInitHeaders() {
if (this.data.options) {
for (var key in this.data.options.headers) {
......@@ -639,3 +739,14 @@ export default {
}
}
</script>
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
src/components/VueFormMaking/components/WidgetFormFields.vue
......@@ -165,10 +165,11 @@
<el-cascader
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:show-all-levels="element.options.showAllLevels"
:clearable="element.options.clearable"
:placeholder="element.options.placeholder"
:style="{width: element.options.width}"
:options="element.options.remoteOptions"
:options="element.options.remote?element.options.remoteOptions:element.options.options"
/>
</template>
......
src/components/VueFormMaking/components/componentsConfig.js
......@@ -347,8 +347,31 @@ export const advanceComponents = [
placeholder: '',
disabled: false,
clearable: false,
remote: true,
remote: false,
remoteOptions: [],
showAllLevels: true,
options: [{
value: 'lanyulei',
label: '作者',
children: [{
value: 'character',
label: '性格',
children: [{
value: 'good',
label: '好'
}, {
value: 'well',
label: '很好'
}, {
value: 'veryGood',
label: '非常好'
}]
},
{
value: 'Handsome',
label: '帅气'
}]
}],
props: {
value: 'value',
label: 'label',
......
src/components/VueFormMaking/lang/zh-CN.js
......@@ -176,7 +176,8 @@ export default {
tab: '标签页',
validatorRequired: '必须填写',
validatorType: '格式不正确',
validatorPattern: '格式不匹配'
validatorPattern: '格式不匹配',
showAllLevels: '完整路径'
}
},
upload: {
......
src/views/process/admin/template-manager.vue
......@@ -103,7 +103,7 @@
upload
generate-code
generate-json
:advance-fields="['editor', 'imgupload', 'file', 'subform']"
:advance-fields="['editor', 'imgupload', 'file', 'subform', 'cascader']"
>
<template slot="action" />
</fm-making-form>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment