You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
8.8 KiB
315 lines
8.8 KiB
2 years ago
|
<script>
|
||
|
|
import { save, show, index, destroy } from "@/api/system/baseForm";
|
||
|
|
import { CreateDialog } from "@/utils/createDialog"
|
||
|
|
import { deepCopy } from "@/utils";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
formInfo: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
tableName: String,
|
||
|
|
},
|
||
|
|
render(h) {
|
||
|
|
let dialog = new CreateDialog(this,[
|
||
|
|
{
|
||
|
|
key: 'id_historical_evolutions_land_id_relation',
|
||
|
|
label: '历史沿革材料',
|
||
|
|
render: h('el-button',{
|
||
|
|
props: {
|
||
|
|
type: 'primary',
|
||
|
|
size: 'small',
|
||
|
|
icon: 'el-icon-plus'
|
||
|
|
}
|
||
|
|
}, '新增')
|
||
|
|
}
|
||
|
|
])
|
||
|
|
return dialog.render()
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
id: "",
|
||
|
|
type: "add",
|
||
|
|
dialogVisible: false,
|
||
|
|
form: {},
|
||
|
|
originalForm: {},
|
||
|
|
rules: {},
|
||
|
|
file: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
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.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?.name,
|
||
|
|
url: i?.url,
|
||
|
|
response: i,
|
||
|
|
};
|
||
|
|
})
|
||
|
|
: [
|
||
|
|
{
|
||
|
|
name: res[i._relations.link_with_name]?.name,
|
||
|
|
url: res[i._relations.link_with_name]?.url,
|
||
|
|
response: res[i._relations.link_with_name],
|
||
|
|
},
|
||
|
|
])
|
||
|
|
: (this.file[i.field] = []);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.form = Object.assign({}, this.form);
|
||
|
|
this.originalForm = deepCopy(res);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
submit() {
|
||
|
|
let promiseAll = [];
|
||
|
|
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) {
|
||
|
|
let copyForm = deepCopy(this.form);
|
||
|
|
this.formInfo.forEach((info) => {
|
||
|
|
if (
|
||
|
|
info._relations?.link_relation === "newHasMany" ||
|
||
|
|
info._relations?.link_relation === "hasMany"
|
||
|
|
) {
|
||
|
|
if (this.originalForm[info._relations.link_with_name]) {
|
||
|
|
this.originalForm[info._relations.link_with_name].map((i) => {
|
||
|
|
promiseAll.push(
|
||
|
|
destroy({
|
||
|
|
id: i.id,
|
||
|
|
table_name: info._relations.link_table_name,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (copyForm[info._relations?.link_with_name]?.length > 0) {
|
||
|
|
delete copyForm[info.field];
|
||
|
|
}
|
||
|
|
if (
|
||
|
|
info._relations?.link_relation === "newHasMany" ||
|
||
|
|
info._relations?.link_relation === "hasMany"
|
||
|
|
) {
|
||
|
|
if (info.edit_input === "files") {
|
||
|
|
copyForm[info._relations.link_with_name] = this.file[
|
||
|
|
info.field
|
||
|
|
]?.map((i) => {
|
||
|
|
let copyRelation = i?.response ? deepCopy(i?.response) : "";
|
||
|
|
delete copyRelation.id;
|
||
|
|
return {
|
||
|
|
upload_id: i?.response?.id,
|
||
|
|
...copyRelation,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
copyForm[info._relations.link_with_name] = copyForm[
|
||
|
|
info.field
|
||
|
|
]?.map((i) => {
|
||
|
|
let copyRelation = info._params.find(
|
||
|
|
(param) => param[info._relations?.foreign_key] === i
|
||
|
|
)
|
||
|
|
? deepCopy(
|
||
|
|
info._params.find(
|
||
|
|
(param) => param[info._relations?.foreign_key] === i
|
||
|
|
)
|
||
|
|
)
|
||
|
|
: "";
|
||
|
|
delete copyRelation.id;
|
||
|
|
return {
|
||
|
|
[info._relations.foreign_key]: i,
|
||
|
|
...copyRelation,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
delete copyForm[info.field];
|
||
|
|
}
|
||
|
|
if (
|
||
|
|
info._relations?.link_relation === "newHasOne" ||
|
||
|
|
info._relations?.link_relation === "hasOne"
|
||
|
|
) {
|
||
|
|
if (info.edit_input === "file") {
|
||
|
|
copyForm[info._relations.link_with_name] = [
|
||
|
|
{
|
||
|
|
upload_id: this.file[info.field]?.response?.id,
|
||
|
|
...this.file[info.field],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
let copyRelation = deepCopy(
|
||
|
|
info._params.find(
|
||
|
|
(param) => param.id == this.form[info.field]
|
||
|
|
)
|
||
|
|
);
|
||
|
|
if (copyRelation) {
|
||
|
|
delete copyRelation.id;
|
||
|
|
copyForm[info._relations.link_with_name] = [
|
||
|
|
{
|
||
|
|
id: this.form[info._relations?.link_with_name]?.id,
|
||
|
|
[info.field === "shenhebumen"
|
||
|
|
? "dept_id"
|
||
|
|
: info._relations.foreign_key]: this.form[info.field],
|
||
|
|
...copyRelation,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
delete copyForm[info.field];
|
||
|
|
}
|
||
|
|
if (!copyForm[info._relations?.link_with_name]) {
|
||
|
|
delete copyForm[info._relations?.link_with_name];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
promiseAll.push(
|
||
|
|
save(Object.assign(copyForm, { table_name: this.tableName }))
|
||
|
|
);
|
||
|
|
Promise.all(promiseAll).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] = [];
|
||
|
|
}
|
||
|
|
if (i._relations) {
|
||
|
|
this.form[i._relations?.link_with_name] = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.documentElement.style.setProperty(
|
||
|
|
"--column-num",
|
||
|
|
newVal.length > 11 ? '2' : '1'
|
||
|
|
);
|
||
|
|
},
|
||
|
|
//immediate: true,
|
||
|
|
},
|
||
|
|
dialogVisible(val) {
|
||
|
|
if (val) {
|
||
|
|
if (this.type === "editor") {
|
||
|
|
this.$nextTick(() => this.getDetail());
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.id = "";
|
||
|
|
this.type = "";
|
||
|
|
this.init();
|
||
|
|
this.$refs["elForm"].clearValidate();
|
||
|
|
delete this.form.id;
|
||
|
|
for (let key in this.file) {
|
||
|
|
this.file[key] = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--column-num: 2;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.uploaded-a {
|
||
|
|
color: red;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.uploaded-a:hover {
|
||
|
|
color: red;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-body {
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 10px;
|
||
|
|
grid-template-columns: repeat(var(--column-num), 1fr);
|
||
|
|
}
|
||
|
|
</style>
|