|
|
@@ -1,6 +1,11 @@ |
|
|
|
<template> |
|
|
|
<el-dialog class="dialog-just-form" :visible="dialogVisible" @close="handleClose" :destroy-on-close="false" |
|
|
|
:close-on-click-modal="configs.clickModalToClose ?? true" :width="configs.dialogWidth ?? '50%'"> |
|
|
|
<el-dialog |
|
|
|
class="dialog-just-form" |
|
|
|
:visible="dialogVisible" |
|
|
|
@close="handleClose" |
|
|
|
:destroy-on-close="false" |
|
|
|
:close-on-click-modal="configs.clickModalToClose ?? true" |
|
|
|
:width="configs.dialogWidth ?? '50%'"> |
|
|
|
<!-- title --> |
|
|
|
<div slot="title" class="dialog-title"> |
|
|
|
<h1 class=""> |
|
|
@@ -14,45 +19,116 @@ |
|
|
|
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length"> |
|
|
|
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 --> |
|
|
|
<el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null"> |
|
|
|
<el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="IsNotAvaliable(col)" |
|
|
|
<el-input |
|
|
|
v-if="col.input" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
clearable |
|
|
|
:disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams" /> |
|
|
|
<el-input v-if="col.forceDisabled && col.eraseOnSubmit" v-model="shadowDataForm[col.prop]" disabled |
|
|
|
<el-input |
|
|
|
v-if="col.forceDisabled && col.eraseOnSubmit" |
|
|
|
v-model="shadowDataForm[col.prop]" |
|
|
|
disabled |
|
|
|
v-bind="col.elparams" /> |
|
|
|
<el-input v-if="col.forceDisabled && !col.eraseOnSubmit" v-model="dataForm[col.prop]" disabled |
|
|
|
<el-input |
|
|
|
v-if="col.forceDisabled && !col.eraseOnSubmit" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
disabled |
|
|
|
v-bind="col.elparams" /> |
|
|
|
<el-button type="" plain v-if="col.button" v-bind="col.elparams" style="width: 100%" |
|
|
|
@click="handleButtonClick(col)">{{ |
|
|
|
col.label |
|
|
|
}}</el-button> |
|
|
|
<el-cascader v-if="col.cascader" v-model="dataForm[col.prop]" :options="col.options" |
|
|
|
:disabled="IsNotAvaliable(col)" v-bind="col.elparams"></el-cascader> |
|
|
|
<el-select v-if="col.forceDisabledSelect" disabled v-model="dataForm[col.prop]" clearable |
|
|
|
<el-button |
|
|
|
type="" |
|
|
|
plain |
|
|
|
v-if="col.button" |
|
|
|
v-bind="col.elparams" |
|
|
|
style="width: 100%" |
|
|
|
@click="handleButtonClick(col)"> |
|
|
|
{{ col.label }} |
|
|
|
</el-button> |
|
|
|
<el-cascader |
|
|
|
v-if="col.cascader" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
:options="col.options" |
|
|
|
:disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams"></el-cascader> |
|
|
|
<el-select |
|
|
|
v-if="col.forceDisabledSelect" |
|
|
|
disabled |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
clearable |
|
|
|
v-bind="col.elparams"> |
|
|
|
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" |
|
|
|
<el-option |
|
|
|
v-for="(opt, optIdx) in col.options" |
|
|
|
:key="'option_' + optIdx" |
|
|
|
:label="opt.label" |
|
|
|
:value="opt.value" /> |
|
|
|
</el-select> |
|
|
|
<el-select v-if="col.select" v-model="dataForm[col.prop]" clearable :disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams" @change="handleSelectChange(col, $event)"> |
|
|
|
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" |
|
|
|
:value="opt.value" /> |
|
|
|
<el-select |
|
|
|
v-if="col.select" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
clearable |
|
|
|
:disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams" |
|
|
|
@change="handleSelectChange(col, $event)"> |
|
|
|
<el-option |
|
|
|
v-for="(opt, optIdx) in col.options" |
|
|
|
:key="'option_' + optIdx" |
|
|
|
:label="opt.label" |
|
|
|
:value="opt.value"> |
|
|
|
<span>{{ opt.label }}</span> |
|
|
|
<span |
|
|
|
v-if="col.customLabel" |
|
|
|
style="display: inline-clock; margin-left: 12px; font-size: 0.9em; color: #ccce"> |
|
|
|
{{ opt[col.customLabel] || "-" }} |
|
|
|
</span> |
|
|
|
</el-option> |
|
|
|
<!-- <el-option |
|
|
|
v-for="(opt, optIdx) in col.options" |
|
|
|
:key="'option_' + optIdx" |
|
|
|
:label="opt.label" |
|
|
|
:value="opt.value" /> --> |
|
|
|
</el-select> |
|
|
|
<el-switch v-if="col.switch" v-model="dataForm[col.prop]" :active-value="col.activeValue ?? 1" |
|
|
|
:inactive-value="col.activeValue ?? 0" @change="handleSwitchChange" :disabled="detailMode" /> |
|
|
|
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="IsNotAvaliable(col)" |
|
|
|
<el-switch |
|
|
|
v-if="col.switch" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
:active-value="col.activeValue ?? 1" |
|
|
|
:inactive-value="col.activeValue ?? 0" |
|
|
|
@change="handleSwitchChange" |
|
|
|
:disabled="detailMode" /> |
|
|
|
<el-input |
|
|
|
v-if="col.textarea" |
|
|
|
type="textarea" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
:disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams" /> |
|
|
|
<el-date-picker v-if="col.datetime" v-model="dataForm[col.prop]" :disabled="IsNotAvaliable(col)" |
|
|
|
<el-date-picker |
|
|
|
v-if="col.datetime" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
:disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams" /> |
|
|
|
<uploadBtn v-if="col.upload" :key="'upload_' + rowIndex + colIndex" :action="col.actionUrl" |
|
|
|
:file-list="dataForm['files']" :disabled="IsNotAvaliable(col)" v-bind="col.elparams" |
|
|
|
<uploadBtn |
|
|
|
v-if="col.upload" |
|
|
|
:key="'upload_' + rowIndex + colIndex" |
|
|
|
:action="col.actionUrl" |
|
|
|
:file-list="dataForm['files']" |
|
|
|
:disabled="IsNotAvaliable(col)" |
|
|
|
v-bind="col.elparams" |
|
|
|
@update-file-list="handleFilelistUpdate" /> |
|
|
|
|
|
|
|
<quillEditor v-if="col.richInput" ref="quill-editor" v-model="dataForm[col.prop]" |
|
|
|
:options="col.quillConfig ?? defaultQuillConfig" style="margin-top: 42px" :disabled="IsNotAvaliable(col)" /> |
|
|
|
<quillEditor |
|
|
|
v-if="col.richInput" |
|
|
|
ref="quill-editor" |
|
|
|
v-model="dataForm[col.prop]" |
|
|
|
:options="col.quillConfig ?? defaultQuillConfig" |
|
|
|
style="margin-top: 42px" |
|
|
|
:disabled="IsNotAvaliable(col)" /> |
|
|
|
|
|
|
|
<div class="" v-if="col.component" style="margin: 42px 0 0"> |
|
|
|
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO:后续可能会根据业务需求创建新的版本 --> |
|
|
|
<component :is="col.component" :key="'component_' + col.prop" |
|
|
|
@update:modelValue="handleComponentModelUpdate(col.prop, $event)" :modelValue="dataForm[col.prop]" |
|
|
|
<component |
|
|
|
:is="col.component" |
|
|
|
:key="'component_' + col.prop" |
|
|
|
@update:modelValue="handleComponentModelUpdate(col.prop, $event)" |
|
|
|
:modelValue="dataForm[col.prop]" |
|
|
|
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'" /> |
|
|
|
</div> |
|
|
|
<!-- add more... --> |
|
|
@@ -64,10 +140,13 @@ |
|
|
|
<!-- footer --> |
|
|
|
<div slot="footer"> |
|
|
|
<template v-for="(operate, index) in configs.form.operations"> |
|
|
|
<el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" |
|
|
|
@click="handleBtnClick(operate)">{{ |
|
|
|
operate.label |
|
|
|
}}</el-button> |
|
|
|
<el-button |
|
|
|
v-if="showButton(operate)" |
|
|
|
:key="'operation_' + index" |
|
|
|
:type="operate.type" |
|
|
|
@click="handleBtnClick(operate)"> |
|
|
|
{{ operate.label }} |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button> |
|
|
|
</div> |
|
|
@@ -125,9 +204,10 @@ export default { |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
if (this.configs.extraFields) this.configs.extraFields.forEach((cnf) => { |
|
|
|
dataForm[cnf.prop] = cnf.default ?? null; |
|
|
|
}); |
|
|
|
if (this.configs.extraFields) |
|
|
|
this.configs.extraFields.forEach((cnf) => { |
|
|
|
dataForm[cnf.prop] = cnf.default ?? null; |
|
|
|
}); |
|
|
|
|
|
|
|
return { |
|
|
|
loadingStatus: false, |
|
|
@@ -174,15 +254,29 @@ export default { |
|
|
|
promiseHistory[col.prop] = col.fetchData(param).then(({ data: res }) => { |
|
|
|
if (res.code === 0) { |
|
|
|
if ("list" in res.data) { |
|
|
|
// 填充 options |
|
|
|
this.$set( |
|
|
|
col, |
|
|
|
"options", |
|
|
|
console.log( |
|
|
|
"SdASD ", |
|
|
|
res.data.list.map((i) => ({ |
|
|
|
label: col.optionLabel ? i[col.optionLabel] : i.name, |
|
|
|
value: col.optionValue ? i[col.optionValue] : i.id, |
|
|
|
[col.customLabel]: i[col.customLabel], |
|
|
|
})) |
|
|
|
); |
|
|
|
// 填充 options |
|
|
|
this.$set( |
|
|
|
col, |
|
|
|
"options", |
|
|
|
col.customLabel |
|
|
|
? res.data.list.map((i) => ({ |
|
|
|
label: col.optionLabel ? i[col.optionLabel] : i.name, |
|
|
|
value: col.optionValue ? i[col.optionValue] : i.id, |
|
|
|
[col.customLabel]: i[col.customLabel], |
|
|
|
})) |
|
|
|
: res.data.list.map((i) => ({ |
|
|
|
label: col.optionLabel ? i[col.optionLabel] : i.name, |
|
|
|
value: col.optionValue ? i[col.optionValue] : i.id, |
|
|
|
})) |
|
|
|
); |
|
|
|
|
|
|
|
// 是否需要缓存数据列表 |
|
|
|
if ("injectTo" in col || col.cached) { |
|
|
@@ -233,10 +327,16 @@ export default { |
|
|
|
this.$set( |
|
|
|
col, |
|
|
|
"options", |
|
|
|
res.data.map((i) => ({ |
|
|
|
label: col.optionLabel ? i[col.optionLabel] : i.name, |
|
|
|
value: col.optionValue ? i[col.optionValue] : i.id, |
|
|
|
})) |
|
|
|
col.customLabel |
|
|
|
? res.data.map((i) => ({ |
|
|
|
label: col.optionLabel ? i[col.optionLabel] : i.name, |
|
|
|
value: col.optionValue ? i[col.optionValue] : i.id, |
|
|
|
[col.customLabel]: i[col.customLabel], |
|
|
|
})) |
|
|
|
: res.data.map((i) => ({ |
|
|
|
label: col.optionLabel ? i[col.optionLabel] : i.name, |
|
|
|
value: col.optionValue ? i[col.optionValue] : i.id, |
|
|
|
})) |
|
|
|
); |
|
|
|
|
|
|
|
// 是否需要缓存数据列表 |
|
|
@@ -352,24 +452,25 @@ export default { |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
if (this.configs.extraFields) this.configs.extraFields.forEach((cnf) => { |
|
|
|
if (cnf.listenTo) { |
|
|
|
console.log("set watcher for: ", cnf.prop); |
|
|
|
const unwatch = this.$watch( |
|
|
|
() => this.dataForm[cnf.listenTo.prop], |
|
|
|
(carId) => { |
|
|
|
console.log("do watcher for: ", cnf.prop); |
|
|
|
if (!carId) return; |
|
|
|
if (cnf.disableWatcherOnEdit && this.editMode) return; |
|
|
|
cnf.listenTo.handler.call(this, this.cachedList[cnf.listenTo.prop], carId); |
|
|
|
}, |
|
|
|
{ |
|
|
|
immediate: false, |
|
|
|
} |
|
|
|
); |
|
|
|
this.watchList.push(unwatch); |
|
|
|
} |
|
|
|
}); |
|
|
|
if (this.configs.extraFields) |
|
|
|
this.configs.extraFields.forEach((cnf) => { |
|
|
|
if (cnf.listenTo) { |
|
|
|
console.log("set watcher for: ", cnf.prop); |
|
|
|
const unwatch = this.$watch( |
|
|
|
() => this.dataForm[cnf.listenTo.prop], |
|
|
|
(carId) => { |
|
|
|
console.log("do watcher for: ", cnf.prop); |
|
|
|
if (!carId) return; |
|
|
|
if (cnf.disableWatcherOnEdit && this.editMode) return; |
|
|
|
cnf.listenTo.handler.call(this, this.cachedList[cnf.listenTo.prop], carId); |
|
|
|
}, |
|
|
|
{ |
|
|
|
immediate: false, |
|
|
|
} |
|
|
|
); |
|
|
|
this.watchList.push(unwatch); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
uploadHeaders() { |
|
|
@@ -557,7 +658,9 @@ export default { |
|
|
|
const { startTime, endTime } = this.dataForm; |
|
|
|
httpPayload = { |
|
|
|
...httpPayload, |
|
|
|
startTime: startTime ? moment(startTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"), |
|
|
|
startTime: startTime |
|
|
|
? moment(startTime).format("YYYY-MM-DDTHH:mm:ss") |
|
|
|
: moment().format("YYYY-MM-DDTHH:mm:ss"), |
|
|
|
endTime: endTime ? moment(endTime).format("YYYY-MM-DDTHH:mm:ss") : null, // moment().format("YYYY-MM-DDTHH:mm:ss"), |
|
|
|
}; |
|
|
|
} |
|
|
@@ -567,7 +670,9 @@ export default { |
|
|
|
const { updateTime } = this.dataForm; |
|
|
|
httpPayload = { |
|
|
|
...httpPayload, |
|
|
|
updateTime: updateTime ? moment(updateTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"), |
|
|
|
updateTime: updateTime |
|
|
|
? moment(updateTime).format("YYYY-MM-DDTHH:mm:ss") |
|
|
|
: moment().format("YYYY-MM-DDTHH:mm:ss"), |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
@@ -647,7 +752,7 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.dialog-just-form>>>.el-dialog__body { |
|
|
|
.dialog-just-form >>> .el-dialog__body { |
|
|
|
/* padding-top: 16px !important; |
|
|
|
padding-bottom: 16px !important; */ |
|
|
|
padding-top: 0 !important; |
|
|
@@ -660,7 +765,7 @@ export default { |
|
|
|
width: 100% !important; |
|
|
|
} |
|
|
|
|
|
|
|
.dialog-just-form>>>.el-dialog__header { |
|
|
|
.dialog-just-form >>> .el-dialog__header { |
|
|
|
padding: 10px 20px 10px; |
|
|
|
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */ |
|
|
|
} |
|
|
|