|
|
@@ -9,21 +9,20 @@ |
|
|
|
<el-form |
|
|
|
ref="form" |
|
|
|
:model="form" |
|
|
|
:rules="rules" |
|
|
|
label-width="`${labelWidth}px`" |
|
|
|
:label-width="`${labelWidth}px`" |
|
|
|
v-loading="formLoading"> |
|
|
|
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> |
|
|
|
<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> |
|
|
|
<el-form-item :label="col.label" :prop="col.prop"> |
|
|
|
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules"> |
|
|
|
<el-input |
|
|
|
v-if="col.input" |
|
|
|
v-model="form[col.prop]" |
|
|
|
@change="$emit('update', form)" |
|
|
|
rules="col.rules" |
|
|
|
v-bind="col.bind" /> |
|
|
|
<el-select |
|
|
|
v-if="col.select" |
|
|
|
v-model="form[col.prop]" |
|
|
|
@change="$emit('update', form)" |
|
|
|
v-bind="col.bind"> |
|
|
|
<el-option |
|
|
|
v-for="opt in optionListOf[col.prop]" |
|
|
@@ -42,12 +41,14 @@ |
|
|
|
* 找到最长的label |
|
|
|
* @param {*} options |
|
|
|
*/ |
|
|
|
function findMaxLabelWidth(options) { |
|
|
|
function findMaxLabelWidth(rows) { |
|
|
|
let max = 0; |
|
|
|
options.forEach((opt) => { |
|
|
|
if (opt.label.length > max) { |
|
|
|
max = opt.label.length; |
|
|
|
} |
|
|
|
rows.forEach((row) => { |
|
|
|
row.forEach((opt) => { |
|
|
|
if (opt.label.length > max) { |
|
|
|
max = opt.label.length; |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
return max; |
|
|
|
} |
|
|
@@ -61,7 +62,7 @@ export default { |
|
|
|
emits: ['update'], |
|
|
|
components: {}, |
|
|
|
props: { |
|
|
|
options: { |
|
|
|
rows: { |
|
|
|
type: Array, |
|
|
|
default: () => [], |
|
|
|
}, |
|
|
@@ -78,9 +79,10 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
labelWidth() { |
|
|
|
let max = findMaxLabelWidth(this.options); |
|
|
|
let max = findMaxLabelWidth(this.rows); |
|
|
|
// 每个汉字占20px |
|
|
|
return max * 20; |
|
|
|
// return max * 20 + 'px'; |
|
|
|
}, |
|
|
|
form: { |
|
|
|
get() { |
|
|
@@ -97,38 +99,49 @@ export default { |
|
|
|
this.handleOptions(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
/** 模拟透传 ref */ |
|
|
|
validate(cb) { |
|
|
|
return this.$refs.form.validate(cb); |
|
|
|
}, |
|
|
|
resetFields(args) { |
|
|
|
return this.$refs.form.resetFields(args); |
|
|
|
}, |
|
|
|
|
|
|
|
handleOptions() { |
|
|
|
this.formLoading = true; |
|
|
|
const promiseList = []; |
|
|
|
this.options.forEach(async (opt) => { |
|
|
|
if (opt.options) { |
|
|
|
this.optionListOf[opt.prop] = opt.options; |
|
|
|
} else if (opt.url) { |
|
|
|
promiseList.push(async () => { |
|
|
|
const response = await this.$axios(opt.url, { |
|
|
|
method: opt.method ?? 'get', |
|
|
|
this.rows.forEach((cols) => { |
|
|
|
cols.forEach(async (opt) => { |
|
|
|
if (opt.options) { |
|
|
|
this.optionListOf[opt.prop] = opt.options; |
|
|
|
} else if (opt.url) { |
|
|
|
promiseList.push(async () => { |
|
|
|
const response = await this.$axios(opt.url, { |
|
|
|
method: opt.method ?? 'get', |
|
|
|
}); |
|
|
|
console.log('[dialogForm:handleOptions:response]', response); |
|
|
|
const list = |
|
|
|
'list' in response.data ? response.data.list : response.data; |
|
|
|
this.$set( |
|
|
|
this.optionListOf, |
|
|
|
opt.prop, |
|
|
|
list.map((item) => ({ |
|
|
|
label: item[opt.labelKey ?? 'name'], |
|
|
|
value: item[opt.valueKey ?? 'id'], |
|
|
|
})) |
|
|
|
); |
|
|
|
}); |
|
|
|
console.log('[dialogForm:handleOptions:response]', response); |
|
|
|
const list = |
|
|
|
'list' in response.data ? response.data.list : response.data; |
|
|
|
this.$set( |
|
|
|
this.optionListOf, |
|
|
|
opt.prop, |
|
|
|
list.map((item) => ({ |
|
|
|
label: item[opt.labelKey ?? 'name'], |
|
|
|
value: item[opt.valueKey ?? 'id'], |
|
|
|
})) |
|
|
|
); |
|
|
|
}); |
|
|
|
try { |
|
|
|
await Promise.all(promiseList); |
|
|
|
this.formLoading = false; |
|
|
|
} catch (error) { |
|
|
|
console.log('[dialogForm:handleOptions:error]', error); |
|
|
|
this.formLoading = false; |
|
|
|
try { |
|
|
|
this.formLoading = true; |
|
|
|
await Promise.all(promiseList); |
|
|
|
this.formLoading = false; |
|
|
|
} catch (error) { |
|
|
|
console.log('[dialogForm:handleOptions:error]', error); |
|
|
|
this.formLoading = false; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
// this.formLoading = false; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|