|
|
<script>
|
|
|
import { save, show, index } from "@/api/system/baseForm";
|
|
|
import { getparameter } from "@/api/system/dictionary";
|
|
|
import { domMap } from "@/const/inputType";
|
|
|
import { addPropsMap } from "@/const/addProps";
|
|
|
export default {
|
|
|
props: {
|
|
|
formInfo: {
|
|
|
type: Array,
|
|
|
default: () => [],
|
|
|
},
|
|
|
tableName: String,
|
|
|
},
|
|
|
render(h) {
|
|
|
return h(
|
|
|
"el-dialog",
|
|
|
{
|
|
|
props: {
|
|
|
title: "新增",
|
|
|
visible: this.dialogVisible,
|
|
|
width: "600px",
|
|
|
},
|
|
|
on: {
|
|
|
"update:visible": (val) => {
|
|
|
this.dialogVisible = val;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"el-form",
|
|
|
{
|
|
|
ref: "elForm",
|
|
|
props: {
|
|
|
model: this.form,
|
|
|
labelWidth: "80px",
|
|
|
rules: this.rules,
|
|
|
labelPosition: "right",
|
|
|
size: "small",
|
|
|
},
|
|
|
},
|
|
|
(() => {
|
|
|
let dom = [];
|
|
|
this.formInfo.filter(i => i.form_show).forEach((i, index) => {
|
|
|
dom.push(
|
|
|
h(
|
|
|
"el-form-item",
|
|
|
{
|
|
|
ref: `elFormItem${i.field}`,
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
props: {
|
|
|
label: i.name,
|
|
|
prop: i.field,
|
|
|
required:
|
|
|
i.validation instanceof Array
|
|
|
? !!i.validation.find((i) => i === "required")
|
|
|
: false,
|
|
|
},
|
|
|
},
|
|
|
this.$scopedSlots[i.field]
|
|
|
? this.$scopedSlots[i.field]({ fieldInfo: i, form: this.form })
|
|
|
: [
|
|
|
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.form[i.field],
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: i.help || `请填写${i.name}`,
|
|
|
},
|
|
|
on: {
|
|
|
[this.getEventType(i.edit_input)]: (e) => {
|
|
|
if (i.field) {
|
|
|
this.form[i.field] = e;
|
|
|
this.form = Object.assign({}, this.form);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
scopedSlots:
|
|
|
i.edit_input === "file" ||
|
|
|
i.edit_input === "files"
|
|
|
? {
|
|
|
file: (scope) => {
|
|
|
let { file } = scope;
|
|
|
return [
|
|
|
h("div", {}, [
|
|
|
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,
|
|
|
},
|
|
|
class: {
|
|
|
"uploaded-a":
|
|
|
file.status === "success",
|
|
|
},
|
|
|
style: {
|
|
|
'padding': '0 4px'
|
|
|
},
|
|
|
},
|
|
|
file.name
|
|
|
),
|
|
|
]),
|
|
|
h("i", {
|
|
|
class: "el-icon-close",
|
|
|
on: {
|
|
|
["click"]: () =>
|
|
|
this.fileRemoveHandler(
|
|
|
file,
|
|
|
i.field
|
|
|
),
|
|
|
},
|
|
|
}),
|
|
|
];
|
|
|
},
|
|
|
}
|
|
|
: "",
|
|
|
},
|
|
|
this.optionsRender(h, i)
|
|
|
),
|
|
|
]
|
|
|
)
|
|
|
);
|
|
|
});
|
|
|
return dom;
|
|
|
})()
|
|
|
),
|
|
|
h("template", { slot: "footer" }, [
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
on: {
|
|
|
click: () => (this.dialogVisible = false),
|
|
|
},
|
|
|
},
|
|
|
"取 消"
|
|
|
),
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "warning",
|
|
|
plain: true,
|
|
|
},
|
|
|
on: {
|
|
|
click: () => this.init(),
|
|
|
},
|
|
|
},
|
|
|
"重 置"
|
|
|
),
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
on: {
|
|
|
click: this.submit,
|
|
|
},
|
|
|
},
|
|
|
"确 定"
|
|
|
),
|
|
|
]),
|
|
|
]
|
|
|
);
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
id: "",
|
|
|
type: "add",
|
|
|
dialogVisible: false,
|
|
|
form: {},
|
|
|
rules: {},
|
|
|
file: {},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
fileRemoveHandler(file, field) {
|
|
|
this.file[field] = this.file[field].filter((item) => item !== file);
|
|
|
this.file = Object.assign({}, this.file);
|
|
|
},
|
|
|
//on事件类别获取
|
|
|
getEventType(info) {
|
|
|
if (info === "checkbox") {
|
|
|
return "change";
|
|
|
}
|
|
|
return "input";
|
|
|
},
|
|
|
|
|
|
//渲染一些组件内部需要选项等
|
|
|
optionsRender(h, info) {
|
|
|
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.key || i.value || i.name || i.no || i.mingcheng || i.id,
|
|
|
value: info._relations ? i[info._relations.foreign_key] : 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) => {
|
|
|
this.$refs[`elEdit_${info.field}`].submit();
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
"上传到服务器"
|
|
|
),
|
|
|
h(
|
|
|
"div",
|
|
|
{
|
|
|
class: "el-upload__tip",
|
|
|
slot: "tip",
|
|
|
},
|
|
|
"文件不超过500kb"
|
|
|
),
|
|
|
];
|
|
|
}
|
|
|
},
|
|
|
|
|
|
extraProps(info) {
|
|
|
let props = {};
|
|
|
if (info.edit_input === "file" || info.edit_input === "files") {
|
|
|
props.fileList = this.file[info.field];
|
|
|
props.beforeUpload = (file) => {
|
|
|
if (file.size / 1000 > 500) {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: "上传图片大小超过500kb！",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
props.onSuccess = (response, file, fileList) => {
|
|
|
this.file[info.field] = fileList;
|
|
|
};
|
|
|
|
|
|
props.onRemove = (file, fileList) => {
|
|
|
this.file[info.field] = fileList;
|
|
|
};
|
|
|
|
|
|
props.onError = (err, file, fileList) => {
|
|
|
this.file[info.field] = fileList;
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: err,
|
|
|
});
|
|
|
};
|
|
|
}
|
|
|
return props;
|
|
|
},
|
|
|
|
|
|
init() {
|
|
|
for (let key in this.form) {
|
|
|
if (this.form[key] instanceof Array) {
|
|
|
this.form[key] = [];
|
|
|
} else {
|
|
|
this.form[key] = "";
|
|
|
}
|
|
|
}
|
|
|
this.$refs["elForm"].clearValidate();
|
|
|
},
|
|
|
show() {
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
hidden() {
|
|
|
this.dialogVisible = false;
|
|
|
},
|
|
|
setType(type = "add") {
|
|
|
let types = ["add", "editor"];
|
|
|
if (types.includes(type)) {
|
|
|
this.type = type;
|
|
|
} else {
|
|
|
console.warn("Unknown type: " + type);
|
|
|
}
|
|
|
},
|
|
|
setId(id) {
|
|
|
if (typeof id == "number") {
|
|
|
this.id = id;
|
|
|
} else {
|
|
|
console.error("error typeof id: " + typeof id);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async getDetail() {
|
|
|
const res = await show({ id: this.id, table_name: this.tableName });
|
|
|
this.$integrateData(this.form, res);
|
|
|
this.form = Object.assign({}, this.form);
|
|
|
|
|
|
this.formInfo.forEach((i) => {
|
|
|
if (i && (i.edit_input === "file" || i.edit_input === 'files')) {
|
|
|
res[i._relations.link_with_name] ? (
|
|
|
this.file[i.field] = res[i._relations.link_with_name] instanceof Array ? res[i._relations.link_with_name].map(i => {
|
|
|
return {
|
|
|
name: i?.original_name,
|
|
|
url: i?.url,
|
|
|
response: i
|
|
|
}
|
|
|
}) : [{
|
|
|
name: res[i._relations.link_with_name]?.original_name,
|
|
|
url: res[i._relations.link_with_name]?.url,
|
|
|
response: res[i._relations.link_with_name]
|
|
|
}]
|
|
|
) : this.file[i.field] = []
|
|
|
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
submit() {
|
|
|
if (this.type === "add") {
|
|
|
if (this.form.hasOwnProperty("id")) {
|
|
|
delete this.form.id;
|
|
|
}
|
|
|
}
|
|
|
if (this.type === "editor") {
|
|
|
Object.defineProperty(this.form, "id", {
|
|
|
value: this.id,
|
|
|
enumerable: true,
|
|
|
configurable: true,
|
|
|
writable: true,
|
|
|
});
|
|
|
}
|
|
|
this.$refs["elForm"].validate((validate) => {
|
|
|
if (validate) {
|
|
|
this.formInfo.forEach((info) => {
|
|
|
if (info.edit_input === "files") {
|
|
|
this.form[info.field] = this.file[info.field].map(
|
|
|
(i) => i?.response?.id
|
|
|
);
|
|
|
}
|
|
|
if (info.edit_input === "file") {
|
|
|
this.form[info.field] = this.file[info.field][0]?.response?.id;
|
|
|
}
|
|
|
});
|
|
|
console.log(this.form);
|
|
|
save(Object.assign(this.form, { table_name: this.tableName })).then(
|
|
|
(res) => {
|
|
|
this.$Message.success({
|
|
|
content: `${this.type === "add" ? "新增" : "编辑"}成功`,
|
|
|
});
|
|
|
this.$emit("refresh");
|
|
|
this.hidden();
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {
|
|
|
formInfo: {
|
|
|
handler: function (newVal) {
|
|
|
this.form = {};
|
|
|
this.rules = {};
|
|
|
this.file = {};
|
|
|
newVal.forEach((i) => {
|
|
|
if (i.field) {
|
|
|
this.form[i.field] = "";
|
|
|
if (
|
|
|
i.validation instanceof Array &&
|
|
|
i.validation.length > 0 &&
|
|
|
!!i.validation.find((i) => i === "required")
|
|
|
) {
|
|
|
this.rules[i.field] = [
|
|
|
{ required: true, message: `请填写${i.name}` },
|
|
|
];
|
|
|
}
|
|
|
if (i.edit_input === "files") {
|
|
|
this.form[i.field] = [];
|
|
|
}
|
|
|
if (i.edit_input === "files" || i.edit_input === "file") {
|
|
|
this.file[i.field] = [];
|
|
|
}
|
|
|
if (i.edit_input === "checkbox") {
|
|
|
this.form[i.field] = [];
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//immediate: true,
|
|
|
},
|
|
|
dialogVisible(val) {
|
|
|
if (val) {
|
|
|
if (this.type === "editor") {
|
|
|
this.$nextTick(() => this.getDetail());
|
|
|
}
|
|
|
} else {
|
|
|
this.file = {};
|
|
|
this.id = "";
|
|
|
this.type = "";
|
|
|
this.init();
|
|
|
this.$refs["elForm"].clearValidate();
|
|
|
delete this.form.id;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.uploaded-a {
|
|
|
color: red;
|
|
|
text-decoration: none;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
|
|
|
.uploaded-a:hover {
|
|
|
color: red;
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
</style>
|
