Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 5ba0de80 by lanyulei Committed by GitHub
Options

Merge pull request #35 from lanyulei/dev 

feat: 添加级联选择器静态数据。
parents 472536c2 2dc50e31
Inline Side-by-side
Showing with 183 additions and 27 deletions
src/components/VueFormMaking/components/GenerateFormItem.vue
...@@ -63,6 +63,15 @@ ...@@ -63,6 +63,15 @@
<template v-else-if="widget.type === 'input' && widget.options.showPassword"> <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"> <input :value="dataModel" type="password" style="border: none; background-color: #ffffff; color: #303133" disabled="disabled">
</template> </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> <template v-else>
<div> <div>
{{ dataModel }} {{ dataModel }}
...@@ -271,10 +280,11 @@ ...@@ -271,10 +280,11 @@
<el-cascader <el-cascader
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
:show-all-levels="widget.options.showAllLevels"
:clearable="widget.options.clearable" :clearable="widget.options.clearable"
:placeholder="widget.options.placeholder" :placeholder="widget.options.placeholder"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
:options="widget.options.remoteOptions" :options="widget.options.remote?widget.options.remoteOptions:widget.options.options"
/> />
</template> </template>
...@@ -407,4 +417,14 @@ export default { ...@@ -407,4 +417,14 @@ export default {
.previewEditorDiv > p { .previewEditorDiv > p {
margin: 0; 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> </style>
src/components/VueFormMaking/components/WidgetConfig.vue
...@@ -120,6 +120,9 @@ ...@@ -120,6 +120,9 @@
<el-input v-model="data.options.props.label" size="mini" style=""> <el-input v-model="data.options.props.label" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.label') }}</template> <template slot="prepend">{{ $t('fm.config.widget.label') }}</template>
</el-input> </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> </div>
</template> </template>
<template v-else> <template v-else>
...@@ -173,28 +176,49 @@ ...@@ -173,28 +176,49 @@
</draggable> </draggable>
</el-checkbox-group> </el-checkbox-group>
</template> </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> </div>
</template> </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>
<!-- 默认值 --> <!-- 默认值 -->
<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')"> <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 @@ ...@@ -379,7 +403,7 @@
</el-form-item> </el-form-item>
</template> </template>
<!-- 珊格 --> <!-- 珊格 -->
<template v-if="data.type == 'grid'"> <template v-if="data.type === 'grid'">
<el-form-item :label="$t('fm.config.widget.gutter')"> <el-form-item :label="$t('fm.config.widget.gutter')">
<el-input v-model.number="data.options.gutter" type="number" /> <el-input v-model.number="data.options.gutter" type="number" />
</el-form-item> </el-form-item>
...@@ -420,7 +444,7 @@ ...@@ -420,7 +444,7 @@
</el-form-item> </el-form-item>
</template> </template>
<!-- 非珊格 --> <!-- 非珊格 -->
<template v-if="data.type != 'grid'"> <template v-if="data.type !== 'grid'">
<el-form-item :label="$t('fm.config.widget.attribute')"> <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('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> <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 @@ ...@@ -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('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('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('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>
<el-form-item :label="$t('fm.config.widget.validate')"> <el-form-item :label="$t('fm.config.widget.validate')">
<div v-if="Object.keys(data.options).indexOf('required')>=0"> <div v-if="Object.keys(data.options).indexOf('required')>=0">
...@@ -452,6 +477,36 @@ ...@@ -452,6 +477,36 @@
</el-form-item> </el-form-item>
</template> </template>
</el-form> </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> </div>
</template> </template>
...@@ -466,6 +521,10 @@ export default { ...@@ -466,6 +521,10 @@ export default {
props: ['data'], props: ['data'],
data() { data() {
return { return {
selectTreeData: {},
addTreeData: {},
cascaderDialog: false,
operatingStatus: 'add',
validator: { validator: {
type: null, type: null,
required: null, required: null,
...@@ -530,6 +589,47 @@ export default { ...@@ -530,6 +589,47 @@ export default {
this.handleInitHeaders() this.handleInitHeaders()
}, },
methods: { 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() { handleInitHeaders() {
if (this.data.options) { if (this.data.options) {
for (var key in this.data.options.headers) { for (var key in this.data.options.headers) {
...@@ -639,3 +739,14 @@ export default { ...@@ -639,3 +739,14 @@ export default {
} }
} }
</script> </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 @@ ...@@ -165,10 +165,11 @@
<el-cascader <el-cascader
v-model="element.options.defaultValue" v-model="element.options.defaultValue"
:disabled="element.options.disabled" :disabled="element.options.disabled"
:show-all-levels="element.options.showAllLevels"
:clearable="element.options.clearable" :clearable="element.options.clearable"
:placeholder="element.options.placeholder" :placeholder="element.options.placeholder"
:style="{width: element.options.width}" :style="{width: element.options.width}"
:options="element.options.remoteOptions" :options="element.options.remote?element.options.remoteOptions:element.options.options"
/> />
</template> </template>
......
src/components/VueFormMaking/components/componentsConfig.js
...@@ -347,8 +347,31 @@ export const advanceComponents = [ ...@@ -347,8 +347,31 @@ export const advanceComponents = [
placeholder: '', placeholder: '',
disabled: false, disabled: false,
clearable: false, clearable: false,
remote: true, remote: false,
remoteOptions: [], 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: { props: {
value: 'value', value: 'value',
label: 'label', label: 'label',
......
src/components/VueFormMaking/lang/zh-CN.js
...@@ -176,7 +176,8 @@ export default { ...@@ -176,7 +176,8 @@ export default {
tab: '标签页', tab: '标签页',
validatorRequired: '必须填写', validatorRequired: '必须填写',
validatorType: '格式不正确', validatorType: '格式不正确',
validatorPattern: '格式不匹配' validatorPattern: '格式不匹配',
showAllLevels: '完整路径'
} }
}, },
upload: { upload: {
......
src/views/process/admin/template-manager.vue
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
upload upload
generate-code generate-code
generate-json generate-json
:advance-fields="['editor', 'imgupload', 'file', 'subform']" :advance-fields="['editor', 'imgupload', 'file', 'subform', 'cascader']"
> >
<template slot="action" /> <template slot="action" />
</fm-making-form> </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 sign in to comment