|
|
import { domMap } from "@/const/inputType";
|
|
|
import { addPropsMap } from "@/const/addProps";
|
|
|
import { download } from "@/utils/downloadRequest";
|
|
|
export class CreateDialog {
|
|
|
replaces;
|
|
|
self;
|
|
|
$createElement;
|
|
|
options;
|
|
|
isCreateDialog;
|
|
|
constructor(self, replaces = [], options, isCreateDialog = true) {
|
|
|
/*
|
|
|
replace = [
|
|
|
{
|
|
|
key: '',
|
|
|
label: '',
|
|
|
render: () => {}
|
|
|
}
|
|
|
]
|
|
|
options: {
|
|
|
disabled: [boolean],
|
|
|
width: [string,number],
|
|
|
labelPosition: [string],
|
|
|
size: [string],
|
|
|
labelReplace: [Map] , //like [oldVal, newVal],
|
|
|
fromData: [string] , //form数据源
|
|
|
fromFile: [string], //file数据源
|
|
|
notUseRules: [boolean],
|
|
|
formRef: [string]
|
|
|
}
|
|
|
*/
|
|
|
this.self = self;
|
|
|
this.$createElement = self.$createElement;
|
|
|
this.replaces = replaces;
|
|
|
this.options = options;
|
|
|
this.isCreateDialog = isCreateDialog;
|
|
|
}
|
|
|
getEventType(info) {
|
|
|
if (info === "checkbox") {
|
|
|
return "change";
|
|
|
}
|
|
|
return "input";
|
|
|
}
|
|
|
fileRemoveHandler(file, field) {
|
|
|
let that = this.self;
|
|
|
that.file[field] = that.file[field].filter((item) => item !== file);
|
|
|
that.file = Object.assign({}, that.file);
|
|
|
that.form[field] = that.file[field].map(i => i.response?.id).filter(i => i);
|
|
|
|
|
|
}
|
|
|
extraProps(info) {
|
|
|
let that = this.self;
|
|
|
let props = {};
|
|
|
if (info.edit_input === "file" || info.edit_input === "files") {
|
|
|
if (this.options.fromFile) {
|
|
|
if (typeof this.options.fromFile === 'string') {
|
|
|
props.fileList = that[this.options.fromFile][info.field];
|
|
|
} else {
|
|
|
props.fileList = this.options.fromFile[info.field];
|
|
|
}
|
|
|
} else {
|
|
|
props.fileList = that.file[info.field]
|
|
|
}
|
|
|
props.onChange = () => that.$myLoadingClose()
|
|
|
|
|
|
props.onProgress = () => that.$myLoading("文件上传中...")
|
|
|
props.beforeUpload = (file) => {
|
|
|
if (file.size / 1000 > (50 * 1024)) {
|
|
|
that.$message({
|
|
|
type: "warning",
|
|
|
message: "上传图片大小超过50M！",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
props.onSuccess = (response, file, fileList) => {
|
|
|
that.file[info.field] = fileList;
|
|
|
that.form[info.field] = fileList.map(i => i.response?.id).filter(i => i);
|
|
|
};
|
|
|
|
|
|
props.onRemove = (file, fileList) => {
|
|
|
that.file[info.field] = fileList;
|
|
|
that.form[info.field] = fileList.map(i => i.response?.id).filter(i => i);
|
|
|
};
|
|
|
|
|
|
props.onError = (err, file, fileList) => {
|
|
|
that.file[info.field] = fileList;
|
|
|
that.$message({
|
|
|
type: "warning",
|
|
|
message: err,
|
|
|
});
|
|
|
};
|
|
|
}
|
|
|
return props;
|
|
|
}
|
|
|
optionsRender(h, info) {
|
|
|
let that = this.self;
|
|
|
if (info.edit_input === "checkbox" || info.edit_input === "radio") {
|
|
|
return info._params && info._params instanceof Array
|
|
|
? info._params.map((i) =>
|
|
|
h("el-option", {
|
|
|
props: {
|
|
|
label:
|
|
|
i.name ||
|
|
|
i.mingcheng ||
|
|
|
i.label ||
|
|
|
i.key ||
|
|
|
i.value ||
|
|
|
i.id ||
|
|
|
i.no,
|
|
|
value: i.id || i.value,
|
|
|
},
|
|
|
})
|
|
|
)
|
|
|
: [];
|
|
|
}
|
|
|
if (info.edit_input === "file" || info.edit_input === "files") {
|
|
|
return [
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
slot: "trigger",
|
|
|
props: {
|
|
|
size: "small",
|
|
|
type: "primary",
|
|
|
},
|
|
|
},
|
|
|
"选取文件"
|
|
|
),
|
|
|
// h(
|
|
|
// "el-button",
|
|
|
// {
|
|
|
// style: {
|
|
|
// "margin-left": "10px",
|
|
|
// },
|
|
|
// props: {
|
|
|
// size: "small",
|
|
|
// type: "success",
|
|
|
// },
|
|
|
// on: {
|
|
|
// ["click"]: (e) => {
|
|
|
// that.$refs[`elEdit_${info.field}`].submit();
|
|
|
// },
|
|
|
// },
|
|
|
// },
|
|
|
// "上传到服务器"
|
|
|
// ),
|
|
|
h(
|
|
|
"div",
|
|
|
{
|
|
|
class: "el-upload__tip",
|
|
|
slot: "tip",
|
|
|
},
|
|
|
"文件不超过50Mb"
|
|
|
),
|
|
|
];
|
|
|
}
|
|
|
}
|
|
|
render() {
|
|
|
let that = this.self;
|
|
|
const h = this.$createElement;
|
|
|
|
|
|
const formRender = h(
|
|
|
"el-form",
|
|
|
{
|
|
|
class: "form-body",
|
|
|
ref: this.options.formRef || "elForm",
|
|
|
style: {
|
|
|
"padding-right": "12px",
|
|
|
},
|
|
|
props: {
|
|
|
model: this.options.disabled ? that.originalForm : that.form,
|
|
|
labelWidth: this.options.labelWidth || "100px",
|
|
|
rules: this.options.notUseRules ? {} : that.rules,
|
|
|
labelPosition: this.options.labelPosition || "top",
|
|
|
size: this.options.size || "small",
|
|
|
disabled: this.options.disabled
|
|
|
},
|
|
|
},
|
|
|
(() => {
|
|
|
let dom = [];
|
|
|
(this.options?.formInfo ? this.options.formInfo : that.formInfo)
|
|
|
.filter((i) => i.form_show)
|
|
|
.forEach((i, index) => {
|
|
|
let replace = this.replaces.find((j) => j.key === i.field);
|
|
|
if (!(replace && !replace.show)) {
|
|
|
dom.push(
|
|
|
h(
|
|
|
"el-form-item",
|
|
|
{
|
|
|
ref: `elFormItem${i.field}`,
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
props: {
|
|
|
label: this.options.labelReplace ? (this.options.labelReplace.get(i.name) || i.name) : i.name,
|
|
|
prop: i.field,
|
|
|
required:
|
|
|
i.validation instanceof Array
|
|
|
? !!i.validation.find((i) => i === "required")
|
|
|
: false,
|
|
|
},
|
|
|
},
|
|
|
(replace && replace.render)
|
|
|
? [replace.render]
|
|
|
: [
|
|
|
h(
|
|
|
domMap.get(i.edit_input),
|
|
|
{
|
|
|
ref: `elEdit_${i.field}`,
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
props: {
|
|
|
...addPropsMap.get(i.edit_input),
|
|
|
...this.extraProps(i),
|
|
|
placeholder: i.help,
|
|
|
value: this.options.fromData ? (typeof this.options.fromData === 'string' ? (that[this.options.fromData][i.field]) : this.options.fromData[i.field]) : (this.options.disabled ? that.originalForm[i.field] : that.form[i.field]),
|
|
|
readonly: that.type === "show",
|
|
|
//disabled: that.type === 'show',
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: i.help || `请填写${i.name}`,
|
|
|
},
|
|
|
on: {
|
|
|
[this.getEventType(i.edit_input)]: (
|
|
|
e
|
|
|
) => {
|
|
|
if (i.field) {
|
|
|
if (this.options.fromData) {
|
|
|
that[this.options.fromData][i.field] = e;
|
|
|
that[this.options.fromData] = Object.assign(
|
|
|
{},
|
|
|
that[this.options.fromData]
|
|
|
);
|
|
|
} else {
|
|
|
that.form[i.field] = e;
|
|
|
that.form = Object.assign(
|
|
|
{},
|
|
|
that.form
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
scopedSlots:
|
|
|
i.edit_input === "file" ||
|
|
|
i.edit_input === "files"
|
|
|
? {
|
|
|
file: (scope) => {
|
|
|
let { file } = scope;
|
|
|
return [
|
|
|
h('div', {
|
|
|
style: {
|
|
|
display: 'flex',
|
|
|
'align-items': 'center'
|
|
|
}
|
|
|
},[h("div", {
|
|
|
style: {
|
|
|
'margin-right': "auto"
|
|
|
}
|
|
|
}, [
|
|
|
h("i", {
|
|
|
class: {
|
|
|
"el-icon-circle-check":
|
|
|
file.status ===
|
|
|
"success",
|
|
|
"el-icon-loading":
|
|
|
file.status ===
|
|
|
"uploading",
|
|
|
},
|
|
|
style: {
|
|
|
color:
|
|
|
file.status ===
|
|
|
"success"
|
|
|
? "green"
|
|
|
: "",
|
|
|
},
|
|
|
}),
|
|
|
h(
|
|
|
"a",
|
|
|
{
|
|
|
attrs: {
|
|
|
href: file.url,
|
|
|
download: file.name,
|
|
|
target: "_blank",
|
|
|
},
|
|
|
class: {
|
|
|
"uploaded-a":
|
|
|
file.status ===
|
|
|
"success",
|
|
|
},
|
|
|
style: {
|
|
|
padding: "0 4px",
|
|
|
color: file.status ===
|
|
|
"success"
|
|
|
? "green"
|
|
|
: "",
|
|
|
},
|
|
|
},
|
|
|
file.original_name || file.name
|
|
|
),
|
|
|
]),
|
|
|
h("div",{
|
|
|
style: {
|
|
|
"margin-right": "32px",
|
|
|
'display': file.status === 'success' ? 'block' : 'none'
|
|
|
}
|
|
|
},[
|
|
|
h("i",{
|
|
|
class: "el-icon-view",
|
|
|
style: {
|
|
|
'cursor': 'pointer',
|
|
|
'margin-right': '12px'
|
|
|
},
|
|
|
on: {
|
|
|
['click']: _ => {
|
|
|
that.$bus.$emit('online-file', file.url)
|
|
|
}
|
|
|
}
|
|
|
}),
|
|
|
h("i",{
|
|
|
class: "el-icon-download",
|
|
|
style: {
|
|
|
'cursor': 'pointer'
|
|
|
},
|
|
|
on: {
|
|
|
['click']: _ => {
|
|
|
download(file.url)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
]),
|
|
|
h("i", {
|
|
|
class: "el-icon-close",
|
|
|
style: {
|
|
|
"display": this.options.disabled ? "none" : "inline"
|
|
|
},
|
|
|
on: {
|
|
|
["click"]: () =>
|
|
|
this.fileRemoveHandler(
|
|
|
file,
|
|
|
i.field
|
|
|
),
|
|
|
},
|
|
|
})])
|
|
|
];
|
|
|
},
|
|
|
}
|
|
|
: "",
|
|
|
},
|
|
|
this.optionsRender(h, i)
|
|
|
),
|
|
|
]
|
|
|
)
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
this.replaces.forEach((replace) => {
|
|
|
let info = that.formInfo.find((i) => i.field === replace.key);
|
|
|
if (!info) {
|
|
|
if (replace.label) {
|
|
|
dom.splice(replace.sort??dom.length,0,
|
|
|
h(
|
|
|
"el-form-item",
|
|
|
{
|
|
|
ref: `elFormItem${replace.key}`,
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
...replace.rowStyle,
|
|
|
},
|
|
|
props: {
|
|
|
label: replace.label,
|
|
|
prop: replace.key,
|
|
|
},
|
|
|
},
|
|
|
[replace.render]
|
|
|
)
|
|
|
)
|
|
|
} else {
|
|
|
dom.splice(replace.sort??dom.length,0,replace.render)
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
return dom;
|
|
|
})()
|
|
|
)
|
|
|
return this.isCreateDialog ? h(
|
|
|
"el-dialog",
|
|
|
{
|
|
|
class: "dialog",
|
|
|
ref: "dialog",
|
|
|
props: {
|
|
|
top: "8vh",
|
|
|
title: that.title
|
|
|
? that.title
|
|
|
: that.type === "add"
|
|
|
? "新增"
|
|
|
: "编辑",
|
|
|
visible: that.dialogVisible,
|
|
|
width: this.options?.width ? this.options.width : "800px",
|
|
|
"close-on-click-modal": false,
|
|
|
"append-to-body": true
|
|
|
},
|
|
|
on: {
|
|
|
"update:visible": (val) => {
|
|
|
that.dialogVisible = val;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"el-scrollbar",
|
|
|
{
|
|
|
style: {
|
|
|
height: "58vh",
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
formRender,
|
|
|
]
|
|
|
),
|
|
|
h("template", { slot: "footer" }, [
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
size: "mini",
|
|
|
disabled: this.options.disabled
|
|
|
},
|
|
|
on: {
|
|
|
click: () => (that.dialogVisible = false),
|
|
|
},
|
|
|
},
|
|
|
"取 消"
|
|
|
),
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "warning",
|
|
|
plain: true,
|
|
|
size: "mini",
|
|
|
disabled: this.options.disabled
|
|
|
},
|
|
|
on: {
|
|
|
click: () => that.init(),
|
|
|
},
|
|
|
},
|
|
|
"重 置"
|
|
|
),
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
size: "mini",
|
|
|
disabled: this.options.disabled
|
|
|
},
|
|
|
on: {
|
|
|
click: that.submit,
|
|
|
},
|
|
|
},
|
|
|
"确 定"
|
|
|
),
|
|
|
]),
|
|
|
]
|
|
|
) : h('div',[
|
|
|
formRender,
|
|
|
h('div', { style: "display: flex;justify-content: center;" },[
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "warning",
|
|
|
plain: true,
|
|
|
disabled: this.options.disabled
|
|
|
},
|
|
|
on: {
|
|
|
click: () => that.init(),
|
|
|
},
|
|
|
},
|
|
|
"重 置"
|
|
|
),
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
disabled: this.options.disabled
|
|
|
},
|
|
|
on: {
|
|
|
click: that.submit,
|
|
|
},
|
|
|
},
|
|
|
"确 定"
|
|
|
)
|
|
|
])
|
|
|
]);
|
|
|
}
|
|
|
}
|
