parent
c5da4a58cf
commit
9da6d5e521
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
size="600px"
|
||||
title="设置清单类型"
|
||||
:visible.sync="drawer"
|
||||
direction="rtl">
|
||||
<div style="padding: 10px 20px;">
|
||||
<el-descriptions direction="vertical" :column="2" :labelStyle="{ 'font-weight': 600 }">
|
||||
<el-descriptions-item label="已选清单" :span="2">
|
||||
<div v-for="(item, index) in selections">
|
||||
<Tag closable color="primary" @on-close="selections.splice(index, 1)">
|
||||
{{ item.title }}
|
||||
</Tag>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="人员选择" :span="2">
|
||||
<Transfer
|
||||
:data="persons"
|
||||
:target-keys="selectedPersons"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
@on-change="arr => selectedPersons = arr"></Transfer>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="开始填报月份">
|
||||
<DatePicker type="month" v-model="startMonth" placeholder="请选择开始填报月份"></DatePicker>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="结束填报月份">
|
||||
<DatePicker type="month" v-model="endMonth" placeholder="请选择结束填报月份"></DatePicker>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<Button type="primary" shape="circle" style="width: 40%;margin-top: 20px;" @click="submit">确定</Button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index, assignCategoryType } from "@/api/person";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
selections: [],
|
||||
persons: [],
|
||||
selectedPersons: [],
|
||||
startMonth: '',
|
||||
endMonth: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getPersons () {
|
||||
this.persons = (await index({ page: 1, page_size: 9999 },false)).data.map(i => ({
|
||||
key: i.id,
|
||||
label: i.name
|
||||
}))
|
||||
},
|
||||
filterMethod (data, query) {
|
||||
return data.label.indexOf(query) > -1;
|
||||
},
|
||||
setSelections (arr) {
|
||||
if (arr instanceof Array) {
|
||||
this.selections = arr
|
||||
}
|
||||
},
|
||||
show () {
|
||||
this.drawer = true;
|
||||
},
|
||||
hide () {
|
||||
this.drawer = false;
|
||||
},
|
||||
submit () {
|
||||
assignCategoryType({
|
||||
person_id: this.selectedPersons.toString(),
|
||||
category_id: this.selections.map(i => i.id).toString(),
|
||||
start_year_month: this.$moment(this.startMonth).format("YYYY-MM"),
|
||||
end_year_month: this.$moment(this.endMonth).format("YYYY-MM"),
|
||||
}).then(res => {
|
||||
this.hide()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getPersons()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .ivu-tag {
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
::v-deep .ivu-tag .ivu-icon-ios-close {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,393 @@
|
||||
<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: "45%"
|
||||
})
|
||||
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: '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: {
|
||||
disabled:true,
|
||||
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",
|
||||
// edit_input: "text",
|
||||
form_show: true,
|
||||
_props: {
|
||||
'disabled':true,
|
||||
type: "year",
|
||||
"value-format": "yyyy"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "清单类型",
|
||||
field: "type_id",
|
||||
edit_input: "radio",
|
||||
form_show: true,
|
||||
_props:{
|
||||
'disabled':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() {
|
||||
this.formInfo.find(i => i.field === 'type_id')._params = []
|
||||
this.formInfo.find(i => i.field === 'form_id')._params = []
|
||||
|
||||
// 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>
|
||||
Loading…
Reference in new issue