update 改版完成
This commit is contained in:
parent
669c8f90c6
commit
5d8f537d05
@ -6,14 +6,14 @@
|
|||||||
<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
|
<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
|
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)]"
|
:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
|
||||||
:key="`${n}-col-${c}-item`"
|
:key="`${n}-col-${c}-item`"
|
||||||
:label="getLabel(n, c)"
|
:label="getLabel(n, c)"
|
||||||
>
|
>
|
||||||
<!-- 暂时先不实现部分输入方式 -->
|
<!-- 暂时先不实现部分输入方式 -->
|
||||||
<el-input
|
<el-input
|
||||||
v-if="getType(n, c) === 'input'"
|
v-if="getType(n, c) === 'input'"
|
||||||
:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"
|
:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || '...'"
|
||||||
v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
|
v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
|
||||||
/>
|
/>
|
||||||
<el-radio v-if="getType(n, c) === 'radio'"></el-radio>
|
<el-radio v-if="getType(n, c) === 'radio'"></el-radio>
|
||||||
@ -127,68 +127,64 @@ export default {
|
|||||||
// 本组件只实现了'一行两列'的表单布局
|
// 本组件只实现了'一行两列'的表单布局
|
||||||
return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
|
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() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
/** 转换 configs.fields 的结构,把纯字符串转为对象 */
|
||||||
|
this.configs.fields = this.configs.fields.map(item => {
|
||||||
|
if (typeof item === 'string') {
|
||||||
|
return { name: item }
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
|
||||||
/** 动态设置dataForm字段 */
|
/** 动态设置dataForm字段 */
|
||||||
this.configs.fields.forEach(item => {
|
this.configs.fields.forEach(item => {
|
||||||
if (typeof item === 'string') {
|
this.$set(this.dataForm, [item.name], '')
|
||||||
this.$set(this.dataForm, [item], '')
|
if (item.api) {
|
||||||
} else if (typeof item === 'object') {
|
/** 自动请求并填充 */
|
||||||
this.$set(this.dataForm, [item.name], '')
|
this.$http({
|
||||||
if (item.api) {
|
url: this.$http.adornUrl(item.api),
|
||||||
/** 自动请求并填充 */
|
methods: 'get'
|
||||||
this.$http({
|
}).then(({ data: res }) => {
|
||||||
url: this.$http.adornUrl(item.api),
|
if (data & (data.code === 0)) {
|
||||||
methods: 'get'
|
this.dataFrom[item.name] = res.data // <=== 此处需要对接口
|
||||||
}).then(({ data: res }) => {
|
}
|
||||||
if (data & (data.code === 0)) {
|
})
|
||||||
this.dataFrom[item.name] = res.data // <=== 此处需要对接口
|
} // end if (item.api)
|
||||||
}
|
|
||||||
})
|
|
||||||
} // end if (item.api)
|
|
||||||
|
|
||||||
if (item.required) {
|
if (item.required) {
|
||||||
const requiredRule = {
|
const requiredRule = {
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入必填项',
|
message: '请输入必填项',
|
||||||
trigger: 'change'
|
trigger: 'change'
|
||||||
|
}
|
||||||
|
/** 检查是否已经存在该字段的规则 */
|
||||||
|
const exists = this.dataFormRules[item.name] || null
|
||||||
|
/** 设置验证规则 */
|
||||||
|
if (exists) {
|
||||||
|
const unset = true
|
||||||
|
for (const rule of exists) {
|
||||||
|
if (rule.required) unset = false
|
||||||
}
|
}
|
||||||
/** 检查是否已经存在该字段的规则 */
|
if (unset) {
|
||||||
const exists = this.dataFormRules[item.name] || null
|
exists.push(requiredRule)
|
||||||
/** 设置验证规则 */
|
|
||||||
if (exists) {
|
|
||||||
const unset = true
|
|
||||||
for (const rule of exists) {
|
|
||||||
if (rule.required) unset = false
|
|
||||||
}
|
|
||||||
if (unset) {
|
|
||||||
exists.push(requiredRule)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
/** 不存在已有规则 */
|
|
||||||
this.$set(this.dataFormRules, [item.name], [requiredRule])
|
|
||||||
}
|
}
|
||||||
} // end if (item.required)
|
} else {
|
||||||
|
/** 不存在已有规则 */
|
||||||
|
this.$set(this.dataFormRules, [item.name], [requiredRule])
|
||||||
|
}
|
||||||
|
} // end if (item.required)
|
||||||
|
|
||||||
if (item.rules) {
|
if (item.rules) {
|
||||||
const exists = this.dataFormRules[item.name] || null
|
const exists = this.dataFormRules[item.name] || null
|
||||||
if (exists) {
|
if (exists) {
|
||||||
// 浅拷贝过去
|
// 浅拷贝过去
|
||||||
exists.push(...item.rules)
|
exists.push(...item.rules)
|
||||||
} else {
|
} else {
|
||||||
this.$set(this.dataFormRules, [item.name], [...item.rules])
|
this.$set(this.dataFormRules, [item.name], [...item.rules])
|
||||||
}
|
}
|
||||||
} // end if (item.rules)
|
} // end if (item.rules)
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
/** 检查是否需要额外的组件 */
|
/** 检查是否需要额外的组件 */
|
||||||
@ -225,7 +221,7 @@ export default {
|
|||||||
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
|
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
|
||||||
if (opt) {
|
if (opt) {
|
||||||
// if opt is valid
|
// if opt is valid
|
||||||
return typeof opt === 'string' ? this.defaultNames[opt] : opt.label ? opt.label : this.defaultNames[opt.name]
|
return opt.label ? opt.label : this.defaultNames[opt.name]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getType(n, c) {
|
getType(n, c) {
|
||||||
|
Loading…
Reference in New Issue
Block a user