|
|
@@ -1,41 +1,28 @@ |
|
|
|
<template> |
|
|
|
<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose"> |
|
|
|
<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose"> |
|
|
|
<el-form :model="dataForm" :rules="dataFormRules"> |
|
|
|
<!-- 如果需要更精细一点的布局,可以根据配置项实现地再复杂一点,但此处暂时全部采用一行两列布局 --> |
|
|
|
<el-row v-for="n in rows" :key="n" :gutter="20"> |
|
|
|
<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> |
|
|
|
<!-- <el-form-item |
|
|
|
v-for="field in configs.fields" |
|
|
|
:key="field.name || field" |
|
|
|
:prop="field.name || field" |
|
|
|
:label="field.label || field.name | nameFilter || field | nameFilter" |
|
|
|
> --> |
|
|
|
<!-- <el-form-item |
|
|
|
:prop=" |
|
|
|
typeof configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] === 'string' |
|
|
|
? configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] |
|
|
|
: configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].type |
|
|
|
" |
|
|
|
<el-form-item |
|
|
|
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]" |
|
|
|
:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name || configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]" |
|
|
|
:key="`${n}-col-${c}-item`" |
|
|
|
:label=" |
|
|
|
` |
|
|
|
${configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].label || |
|
|
|
(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name && defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]) || |
|
|
|
defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]} |
|
|
|
` |
|
|
|
" |
|
|
|
> --> |
|
|
|
<el-form-item :prop="`${n}-test-${c}`" :key="`${n}-col-${c}-item`" :label="'f'"> |
|
|
|
{{ n - c - JSON.stringify(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]) }} |
|
|
|
:label="getLabel(n, c)" |
|
|
|
> |
|
|
|
<!-- 暂时先不实现部分输入方式 --> |
|
|
|
<!-- <el-input></el-input> |
|
|
|
<el-radio></el-radio> |
|
|
|
<el-checkbox></el-checkbox> |
|
|
|
<el-select></el-select> |
|
|
|
<el-switch></el-switch> |
|
|
|
<el-cascader></el-cascader> |
|
|
|
<el-time-select></el-time-select> |
|
|
|
<el-date-picker></el-date-picker> --> |
|
|
|
<el-input |
|
|
|
v-if="getType(n, c) === 'input'" |
|
|
|
:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''" |
|
|
|
v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" |
|
|
|
/> |
|
|
|
<el-radio v-if="getType(n, c) === 'radio'"></el-radio> |
|
|
|
<el-checkbox v-if="getType(n, c) === 'check'"></el-checkbox> |
|
|
|
<el-select v-if="getType(n, c) === 'select'" :placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"></el-select> |
|
|
|
<el-switch v-if="getType(n, c) === 'switch'"></el-switch> |
|
|
|
<el-cascader v-if="getType(n, c) === 'tree'"></el-cascader> |
|
|
|
<el-time-select v-if="getType(n, c) === 'time'"></el-time-select> |
|
|
|
<el-date-picker v-if="getType(n, c) === 'date'"></el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
@@ -140,6 +127,14 @@ export default { |
|
|
|
// 本组件只实现了'一行两列'的表单布局 |
|
|
|
return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW) |
|
|
|
} |
|
|
|
// computedModel: { |
|
|
|
// get(n, c) { |
|
|
|
// return this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name |
|
|
|
// ? dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name] |
|
|
|
// : dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]] |
|
|
|
// }, |
|
|
|
// set() {} |
|
|
|
// } |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
@@ -226,6 +221,26 @@ export default { |
|
|
|
// } |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
getLabel(n, c) { |
|
|
|
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] |
|
|
|
if (opt) { |
|
|
|
// if opt is valid |
|
|
|
return typeof opt === 'string' ? this.defaultNames[opt] : opt.label ? opt.label : this.defaultNames[opt.name] |
|
|
|
} |
|
|
|
}, |
|
|
|
getType(n, c) { |
|
|
|
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] |
|
|
|
if (opt) { |
|
|
|
if (!opt.type || ['input', 'number' /** add more.. */].includes(opt.type)) { |
|
|
|
return 'input' |
|
|
|
} else if (['select' /** add more.. */].includes(opt.type)) { |
|
|
|
return 'select' |
|
|
|
} |
|
|
|
// add more... |
|
|
|
} else { |
|
|
|
return 'input' |
|
|
|
} |
|
|
|
}, |
|
|
|
init() { |
|
|
|
this.visible = true |
|
|
|
}, |
|
|
@@ -247,3 +262,9 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.super-flexible-dialog >>> .el-select { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |