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.
391 lines
9.5 KiB
391 lines
9.5 KiB
<script>
|
|
import { index as typeIndex } from "@/api/categoryType";
|
|
import { index as formIndex } from "@/api/system/customForm";
|
|
import { save, show, store, index, destroy } from "@/api/category";
|
|
import { CreateDialog } from "@/utils/createDialog"
|
|
import { deepCopy } from "@/utils";
|
|
export default {
|
|
props: {
|
|
options: [Array,Object]
|
|
},
|
|
render(h) {
|
|
let dialog = new CreateDialog(this,[
|
|
],{
|
|
width: "60%"
|
|
})
|
|
return dialog.render()
|
|
},
|
|
data() {
|
|
return {
|
|
columns: 1,
|
|
row: {},
|
|
formInfo: [
|
|
{
|
|
name: '清单名称',
|
|
field: 'title',
|
|
edit_input: 'text',
|
|
form_show: true,
|
|
_props: {
|
|
type: "textarea",
|
|
autoSize: {
|
|
minRows: 2
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: "表单",
|
|
field: "form_id",
|
|
edit_input: "radio",
|
|
form_show: true,
|
|
_params: []
|
|
},
|
|
{
|
|
name: '填报要求',
|
|
field: 'require',
|
|
edit_input: 'text',
|
|
form_show: true,
|
|
_props: {
|
|
type: "textarea",
|
|
autoSize: {
|
|
minRows: 4
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '父栏目',
|
|
field: 'pid',
|
|
_default: 0,
|
|
edit_input: 'el-cascader',
|
|
form_show: true,
|
|
_props: {
|
|
options: this.options,
|
|
props: { checkStrictly: true, value: "id", label: "title", disabled: "_disabled" }
|
|
},
|
|
_events: {
|
|
change: (e) => {
|
|
this.form.pid = e.at(-1);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: "年份",
|
|
field: "year",
|
|
edit_input: "el-date-picker",
|
|
form_show: true,
|
|
_props: {
|
|
type: "year",
|
|
"value-format": "yyyy"
|
|
}
|
|
},
|
|
{
|
|
name: "清单类型",
|
|
field: "type_id",
|
|
edit_input: "radio",
|
|
form_show: true,
|
|
_params: []
|
|
},
|
|
{
|
|
name: "考核周期",
|
|
field: "measure_duration",
|
|
edit_input: "radio",
|
|
form_show: true,
|
|
_params: [
|
|
{
|
|
value: "monthly",
|
|
label: "月度"
|
|
},
|
|
{
|
|
value: "quarterly",
|
|
label: "季度"
|
|
},
|
|
{
|
|
value: "yearly",
|
|
label: "年度"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
name: "考核方式",
|
|
field: "measure_type",
|
|
edit_input: "radio",
|
|
form_show: true,
|
|
_params: [
|
|
{
|
|
value: "check",
|
|
label: "仅回复是否执行"
|
|
},
|
|
{
|
|
value: "reply",
|
|
label: "需回复具体内容"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "考核数量",
|
|
field: "measure_reply_quantity",
|
|
edit_input: "el-input-number",
|
|
form_show: true,
|
|
_props: {
|
|
precision: 0,
|
|
controls: false
|
|
}
|
|
},
|
|
{
|
|
name: '排序值',
|
|
field: 'myindex',
|
|
edit_input: 'el-input-number',
|
|
form_show: true,
|
|
_props: {
|
|
controls: false
|
|
}
|
|
}
|
|
],
|
|
id: "",
|
|
type: "add",
|
|
dialogVisible: false,
|
|
form: {},
|
|
originalForm: {},
|
|
rules: {
|
|
title: [
|
|
{ required: true,message: "请填写清单名称" }
|
|
],
|
|
type_id: [
|
|
{ required: true,message: "请选择清单类型" }
|
|
],
|
|
measure_reply_quantity: [
|
|
{
|
|
validator:(rule,value,cb) => {
|
|
if (this.form['measure_type'] === 'reply') {
|
|
value > 0 ? cb() : cb(new Error('数量需大于0'))
|
|
} else {
|
|
cb()
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
file: {},
|
|
};
|
|
},
|
|
methods: {
|
|
setRow (row) {
|
|
this.row = row
|
|
},
|
|
init() {
|
|
for (let key in this.form) {
|
|
if (this.formInfo.find(i => i.field === key)?._default) {
|
|
this.form[key] = this.formInfo.find(i => i.field === key)._default
|
|
}
|
|
else if (this.form[key] instanceof Array) {
|
|
this.form[key] = [];
|
|
} else {
|
|
this.form[key] = "";
|
|
}
|
|
}
|
|
this.$refs["elForm"].clearValidate();
|
|
},
|
|
setForm(key = [], value = []) {
|
|
if (key instanceof Array) {
|
|
key.forEach((key, index) => {
|
|
this.form[key] = value[index] ?? "";
|
|
});
|
|
}
|
|
if (typeof key === "string") {
|
|
this.form[key] = value;
|
|
}
|
|
if (!key) {
|
|
this.init();
|
|
}
|
|
},
|
|
show() {
|
|
this.dialogVisible = true;
|
|
},
|
|
hidden() {
|
|
this.dialogVisible = false;
|
|
},
|
|
setType(type = "add") {
|
|
let types = ["add", "editor", "show"];
|
|
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 });
|
|
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() {
|
|
if (this.type === "add") {
|
|
if (this.form.hasOwnProperty("id")) {
|
|
delete this.form.id;
|
|
}
|
|
store(this.form).then(res => {
|
|
this.$Message.success({
|
|
content: `${this.type === "add" ? "新增" : "编辑"}成功`,
|
|
});
|
|
this.$emit("refresh");
|
|
this.hidden();
|
|
})
|
|
}
|
|
if (this.type === "editor") {
|
|
Object.defineProperty(this.form, "id", {
|
|
value: this.id,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true,
|
|
});
|
|
save(this.form).then(res => {
|
|
this.$Message.success({
|
|
content: `${this.type === "add" ? "新增" : "编辑"}成功`,
|
|
});
|
|
this.$emit("refresh");
|
|
this.hidden();
|
|
})
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
title () {
|
|
if (this.type === 'add') return '新增'
|
|
if (this.type === 'editor') return '编辑'
|
|
if (this.type === 'show') return '查看'
|
|
}
|
|
},
|
|
watch: {
|
|
"form.year":{
|
|
handler:function (newVal) {
|
|
this.form.year = newVal.toString()
|
|
}
|
|
},
|
|
options(val){
|
|
this.$set(this.formInfo.find(i => i.field === 'pid')._props,'options',val)
|
|
},
|
|
formInfo: {
|
|
handler: function (newVal) {
|
|
this.form = {};
|
|
this.file = {};
|
|
newVal.forEach((i) => {
|
|
if (i.field) {
|
|
this.form[i.field] = (i._default || i._default === 0)? i._default : '';
|
|
if (
|
|
i.validation instanceof Array &&
|
|
i.validation.length > 0 &&
|
|
!!i.validation.find((i) => i === "required")
|
|
) {
|
|
}
|
|
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] = [];
|
|
}
|
|
}
|
|
});
|
|
|
|
this.columns = newVal.length > 11 ? '2' : '1'
|
|
},
|
|
immediate: true,
|
|
},
|
|
dialogVisible(val) {
|
|
if (val) {
|
|
document.documentElement.style.setProperty(
|
|
"--column-num",
|
|
this.columns
|
|
);
|
|
if (this.type === "editor" || this.type === "show") {
|
|
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] = [];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
typeIndex({ page: 1,page_size: 999 }).then(res => {
|
|
this.formInfo.find(i => i.field === 'type_id')._params = res.data
|
|
})
|
|
formIndex({ page: 1,page_size: 999 }).then(res => {
|
|
this.formInfo.find(i => i.field === 'form_id')._params = res.data
|
|
})
|
|
}
|
|
};
|
|
</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);
|
|
}
|
|
|
|
::v-deep .el-input-number.is-without-controls .el-input__inner {
|
|
text-align: left;
|
|
}
|
|
|
|
</style>
|