|
|
|
|
@ -0,0 +1,339 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { reactive, ref, watch } from "vue";
|
|
|
|
|
import { FormInstance, FormRules, type CheckboxValueType } from "element-plus";
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "CreateForm"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
createFlag: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
},
|
|
|
|
|
closeDrawer: {
|
|
|
|
|
type: Function
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const modalVisible = ref(false);
|
|
|
|
|
|
|
|
|
|
// 监听 props.message 的变化，并更新 modalVisible
|
|
|
|
|
watch(
|
|
|
|
|
() => props.createFlag,
|
|
|
|
|
newValue => {
|
|
|
|
|
modalVisible.value = newValue; // 更新 modalVisible
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
|
|
|
const processForm = reactive({
|
|
|
|
|
title: "",
|
|
|
|
|
sublibraryName: [],
|
|
|
|
|
dataType: "",
|
|
|
|
|
link: [
|
|
|
|
|
{
|
|
|
|
|
linkName: "",
|
|
|
|
|
directorRole: "",
|
|
|
|
|
directorName: ""
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
desc: ""
|
|
|
|
|
});
|
|
|
|
|
const checkAll = ref(false);
|
|
|
|
|
const indeterminate = ref(false);
|
|
|
|
|
const value = ref<CheckboxValueType[]>([]);
|
|
|
|
|
const cities = ref([
|
|
|
|
|
{
|
|
|
|
|
value: "Beijing",
|
|
|
|
|
label: "Beijing"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Shanghai",
|
|
|
|
|
label: "Shanghai"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Nanjing",
|
|
|
|
|
label: "Nanjing"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Chengdu",
|
|
|
|
|
label: "Chengdu"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Shenzhen",
|
|
|
|
|
label: "Shenzhen"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Guangzhou",
|
|
|
|
|
label: "Guangzhou"
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
const rules = reactive<FormRules>({
|
|
|
|
|
title: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
|
|
|
sublibraryName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择",
|
|
|
|
|
trigger: "change"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
dataType: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择",
|
|
|
|
|
trigger: "change"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
linkName: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
|
|
|
directorRole: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择",
|
|
|
|
|
trigger: "change"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
directorName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择",
|
|
|
|
|
trigger: "change"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
desc: [{ required: true, message: "请输入", trigger: "blur" }]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(value, val => {
|
|
|
|
|
if (val.length === 0) {
|
|
|
|
|
checkAll.value = false;
|
|
|
|
|
indeterminate.value = false;
|
|
|
|
|
} else if (val.length === cities.value.length) {
|
|
|
|
|
checkAll.value = true;
|
|
|
|
|
indeterminate.value = false;
|
|
|
|
|
} else {
|
|
|
|
|
indeterminate.value = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleCheckAll = (val: CheckboxValueType) => {
|
|
|
|
|
indeterminate.value = false;
|
|
|
|
|
if (val) {
|
|
|
|
|
processForm.sublibraryName = cities.value.map(_ => _.value);
|
|
|
|
|
} else {
|
|
|
|
|
processForm.sublibraryName = [];
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// const submitForm = () => {
|
|
|
|
|
// props.closeDrawer();
|
|
|
|
|
// };
|
|
|
|
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
await formEl.validate((valid, fields) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log("submit!");
|
|
|
|
|
} else {
|
|
|
|
|
console.log("error submit!", fields);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
formEl.resetFields();
|
|
|
|
|
};
|
|
|
|
|
const handleDrawerClosed = () => {
|
|
|
|
|
props.closeDrawer();
|
|
|
|
|
};
|
|
|
|
|
const addLink = () => {
|
|
|
|
|
processForm.link.push({
|
|
|
|
|
linkName: "",
|
|
|
|
|
directorRole: "",
|
|
|
|
|
directorName: ""
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-drawer
|
|
|
|
|
v-model="modalVisible"
|
|
|
|
|
modal-class="drawer_content"
|
|
|
|
|
:with-header="false"
|
|
|
|
|
@closed="handleDrawerClosed"
|
|
|
|
|
>
|
|
|
|
|
<div class="drawer_header">
|
|
|
|
|
<span>新建流程</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drawer_box">
|
|
|
|
|
<el-form
|
|
|
|
|
:model="processForm"
|
|
|
|
|
label-width="auto"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
ref="ruleFormRef"
|
|
|
|
|
>
|
|
|
|
|
<div class="text-[20px] text-[#333] font-bold mb-6">基本信息</div>
|
|
|
|
|
<el-form-item label="流程名称" prop="title">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="processForm.title"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="子库名称" prop="sublibraryName">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="processForm.sublibraryName"
|
|
|
|
|
multiple
|
|
|
|
|
clearable
|
|
|
|
|
collapse-tags
|
|
|
|
|
popper-class="custom-header"
|
|
|
|
|
:max-collapse-tags="3"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
class="w-[80%]"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in cities"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-checkbox
|
|
|
|
|
class="ml-6"
|
|
|
|
|
v-model="checkAll"
|
|
|
|
|
:indeterminate="indeterminate"
|
|
|
|
|
@change="handleCheckAll"
|
|
|
|
|
>
|
|
|
|
|
全部
|
|
|
|
|
</el-checkbox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="数据类型" prop="dataType">
|
|
|
|
|
<el-radio-group v-model="processForm.dataType">
|
|
|
|
|
<el-radio label="1">知识报送</el-radio>
|
|
|
|
|
<el-radio label="2">知识删除</el-radio>
|
|
|
|
|
<el-radio label="3">知识撤回</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div class="text-[20px] text-[#333] font-bold mb-6">流程设计</div>
|
|
|
|
|
<div v-for="(item, index) in processForm.link" :key="index">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="环节名称"
|
|
|
|
|
:prop="'link.' + index + '.linkName'"
|
|
|
|
|
:rules="{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="item.linkName"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="负责人" required>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
:prop="'link.' + index + '.directorRole'"
|
|
|
|
|
:rules="{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请选择',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="item.directorRole"
|
|
|
|
|
clearable
|
|
|
|
|
popper-class="custom-header"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
class="w-[100%]"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in cities"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="2" class="text-center" />
|
|
|
|
|
<el-col :span="14">
|
|
|
|
|
<el-form-item
|
|
|
|
|
:prop="'link.' + index + '.directorName'"
|
|
|
|
|
:rules="{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请选择',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="item.directorName"
|
|
|
|
|
clearable
|
|
|
|
|
popper-class="custom-header"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
class="w-[100%]"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in cities"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-divider
|
|
|
|
|
border-style="double"
|
|
|
|
|
v-if="index < processForm.link.length - 1"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form-item label=" ">
|
|
|
|
|
<el-button @click="addLink">+添加审批环节</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注" prop="desc">
|
|
|
|
|
<el-input v-model="processForm.desc" type="textarea" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="drawer_footer">
|
|
|
|
|
<el-button plain @click="resetForm(ruleFormRef)">重置</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
|
|
|
|
>确定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
:deep(.el-drawer__body) {
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drawer_content {
|
|
|
|
|
.drawer_header {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 96px;
|
|
|
|
|
padding: 24px;
|
|
|
|
|
line-height: 65px;
|
|
|
|
|
border-bottom: 1px solid #e9e9e9;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
border-left: 6px solid #0052d9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drawer_box {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
height: calc(100vh - 96px);
|
|
|
|
|
padding: 24px;
|
|
|
|
|
|
|
|
|
|
.drawer_footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
JINGYJ
11 months ago