|
|
@@ -1,11 +1,48 @@ |
|
|
|
<template> |
|
|
|
<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose"> |
|
|
|
<el-form> |
|
|
|
<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 |
|
|
|
" |
|
|
|
: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)]) }} |
|
|
|
<!-- 暂时先不实现部分输入方式 --> |
|
|
|
<!-- <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-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- extra components , like Markdown or RichEdit --> |
|
|
|
<template v-if="extraComponents.length > 0"> |
|
|
|
<el-form-item v-for="ec in extraComponents" :key="ec.name" :label="ec.label"> |
|
|
|
<template v-if="configs.extraComponents && configs.extraComponents.length > 0"> |
|
|
|
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label"> |
|
|
|
<component :is="ec.component" v-model="dataForm[ec.name]"></component> |
|
|
|
</el-form-item> |
|
|
|
</template> |
|
|
@@ -61,8 +98,24 @@ export default { |
|
|
|
default: () => ({}) // 此处省去类型检查,使用者自行注意就好 |
|
|
|
} |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
nameFilter: function(name) { |
|
|
|
if (!name) return null |
|
|
|
// for i18n |
|
|
|
const defaultNames = { |
|
|
|
name: '名称', |
|
|
|
code: '编码', |
|
|
|
remark: '备注', |
|
|
|
specifications: '规格' |
|
|
|
// add more... |
|
|
|
} |
|
|
|
|
|
|
|
return defaultNames[name] |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
COLUMN_PER_ROW, |
|
|
|
title, |
|
|
|
btnName, |
|
|
|
btnType, |
|
|
@@ -71,8 +124,15 @@ export default { |
|
|
|
isDetail: false, |
|
|
|
// cached: false // 不采用缓存比较的方案了,采用 updated 方案: 如果更新了dataForm就在 confirm 时 emit(refreshDataList) |
|
|
|
isUpdated: false, |
|
|
|
dataForm: null, |
|
|
|
dataFormRules: {} |
|
|
|
dataForm: {}, |
|
|
|
dataFormRules: {}, |
|
|
|
defaultNames: { |
|
|
|
name: '名称', |
|
|
|
code: '编码', |
|
|
|
remark: '备注', |
|
|
|
specifications: '规格' |
|
|
|
// add more... |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
@@ -88,9 +148,9 @@ export default { |
|
|
|
if (typeof item === 'string') { |
|
|
|
this.$set(this.dataForm, [item], '') |
|
|
|
} else if (typeof item === 'object') { |
|
|
|
this.$set(this.dataForm, [item.name], '') |
|
|
|
if (item.api) { |
|
|
|
/** 自动请求并填充 */ |
|
|
|
this.$set(this.dataForm, [item.name], '') |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl(item.api), |
|
|
|
methods: 'get' |
|
|
@@ -137,9 +197,13 @@ export default { |
|
|
|
}) |
|
|
|
|
|
|
|
/** 检查是否需要额外的组件 */ |
|
|
|
this.configs.extraComponents.forEach(item => { |
|
|
|
this.$set(this.dataForm, [item.name], '') |
|
|
|
}) |
|
|
|
this.configs.extraComponents && |
|
|
|
this.configs.extraComponents.forEach(item => { |
|
|
|
this.$set(this.dataForm, [item.name], '') |
|
|
|
}) |
|
|
|
|
|
|
|
/** 单独设置 id */ |
|
|
|
this.$set(this.dataForm, 'id', null) |
|
|
|
|
|
|
|
// TODO:delete next lines |
|
|
|
console.log('dataform: ', this.dataForm) |
|
|
|