281 lines
10 KiB
Vue
281 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="edit-popup">
|
||
|
|
<popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit" @close="handleClose">
|
||
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
|
||
|
|
<el-col>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="审批流名称" prop="name">
|
||
|
|
<el-input v-model="formData.name" clearable placeholder="请输入审批流名称" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="审批类型" prop="flow_cate">
|
||
|
|
<!-- <el-select v-model="formData.flow_cate" placeholder="审批类型" clearable
|
||
|
|
:style="{ width: '100%' }">
|
||
|
|
<el-option label="日常审批" :value="1"></el-option>
|
||
|
|
<el-option label="报销审批" :value="2"></el-option>
|
||
|
|
<el-option label="发票审批" :value="3"></el-option>
|
||
|
|
<el-option label="合同审批" :value="4"></el-option>
|
||
|
|
</el-select> -->
|
||
|
|
<el-select class="flex-1" v-model="formData.flow_cate" clearable placeholder="请选择所属分类">
|
||
|
|
<el-option v-for="(item, index) in dictData.flow_type" :key="index" :label="item.name"
|
||
|
|
:value="parseInt(item.value)" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="流程说明" prop="remark">
|
||
|
|
<el-input v-model="formData.remark" clearable type="textarea" placeholder="请输入流程说明" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="流程类型" prop="flow_detail.check_type" clearable :style="{ width: '100%' }">
|
||
|
|
<el-radio-group v-model="formData.check_type" @change="checkTypeFn">
|
||
|
|
<el-radio :label="1">固定审批</el-radio>
|
||
|
|
<el-radio :label="2">授权审批人</el-radio>
|
||
|
|
<el-radio :label="3">可回退审批 </el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<p v-if="formData.flow_detail.type == 1">
|
||
|
|
<el-row v-for="(item, index) in formData.flow_detail.step">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="审批流程">
|
||
|
|
<el-select v-model="formData.flow_detail.step[index].type" placeholder="审批类型" clearable
|
||
|
|
:style="{ width: '100%' }">
|
||
|
|
<el-option label="当前部门负责人" value="1"></el-option>
|
||
|
|
<el-option label="上一级部门负责人" value="2"></el-option>
|
||
|
|
<el-option label="指定用户(任意一人)" value="3"></el-option>
|
||
|
|
<el-option label="指定用户(多人会签)" value="4"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" v-if="item.type == '3' || item.type == '4'">
|
||
|
|
<el-form-item label="指定人员">
|
||
|
|
<el-input clearable v-model="item.user[0].name" placeholder="指定人员" @click="openDialog" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item prop="field126">
|
||
|
|
<el-button type="primary" @click="
|
||
|
|
formData.flow_detail.step.push({
|
||
|
|
type: '',
|
||
|
|
user: [{ id: '', name: '' }],
|
||
|
|
})
|
||
|
|
">其他联系人</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</p>
|
||
|
|
<el-row v-if="formData.flow_detail.type == 2">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="">
|
||
|
|
<span>无需审批</span>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<p v-if="formData.flow_detail.type == 3">
|
||
|
|
<el-row v-for="(item, index) in formData.flow_detail.step">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="审批流程" prop="copy_uids">
|
||
|
|
<el-input v-model="item.type" clearable placeholder="请输入流程名称">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="指定人员">
|
||
|
|
<el-input v-model="item.user[0].name" @click="openDialog" readonly clearable
|
||
|
|
placeholder="指定人员" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item prop="field126">
|
||
|
|
<el-button type="primary" @click="
|
||
|
|
formData.flow_detail.step.push({
|
||
|
|
type: '',
|
||
|
|
user: [{ id: '', name: '' }],
|
||
|
|
})
|
||
|
|
">其他联系人</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<el-form-item label="抄送人ID" prop="copy_unames">
|
||
|
|
<el-input v-model="formData.copy_to[0].name" clearable @click="openDialog" placeholder="请输入抄送人" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</popup>
|
||
|
|
<personnelSelector ref="personnel" @confirm="submituser" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup name="flowEdit">
|
||
|
|
import type { FormInstance } from "element-plus";
|
||
|
|
import Popup from "@/components/popup/index.vue";
|
||
|
|
import { apiFlowAdd, apiFlowEdit } from "@/api/flow";
|
||
|
|
import { apiFlowTypeLists } from '@/api/flow_type'
|
||
|
|
import personnelSelector from '@/components/personnelselector/index.vue'
|
||
|
|
import { ref } from "vue"
|
||
|
|
import type { PropType } from "vue";
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
dictData: {
|
||
|
|
type: Object as PropType<Record<string, any[]>>,
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const personnel = ref('')
|
||
|
|
const isCompany = ref(false);
|
||
|
|
const emit = defineEmits(["success", "close"]);
|
||
|
|
const formRef = shallowRef<FormInstance>();
|
||
|
|
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
||
|
|
const mode = ref("add");
|
||
|
|
|
||
|
|
// 弹窗标题
|
||
|
|
const popupTitle = computed(() => {
|
||
|
|
return mode.value == "edit" ? "编辑审批流程表" : "新增审批流程表";
|
||
|
|
});
|
||
|
|
|
||
|
|
// 表单数据
|
||
|
|
const formData = reactive({
|
||
|
|
id: "",
|
||
|
|
name: "",
|
||
|
|
check_type: "",
|
||
|
|
type: "",
|
||
|
|
flow_cate: "",
|
||
|
|
remark: "",
|
||
|
|
flow_detail: {
|
||
|
|
type: 1,
|
||
|
|
step: [{ type: "", user: [{ id: "", name: "" }] }],
|
||
|
|
},
|
||
|
|
copy_to: [{ id: "", name: "" }],
|
||
|
|
// "name": "",
|
||
|
|
// "flow_cate": "",
|
||
|
|
// "check_type": "",
|
||
|
|
// "remark": "",
|
||
|
|
"flow_list": [
|
||
|
|
{
|
||
|
|
"flow_step": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"flow_step": "",
|
||
|
|
"flow_user": []
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"copy_uids": []
|
||
|
|
});
|
||
|
|
|
||
|
|
//单选框改变时清空单选下的表单数据
|
||
|
|
const checkTypeFn = () => {
|
||
|
|
formData.flow_detail.step = [{ type: "", user: [{ id: "", name: "" }] }];
|
||
|
|
};
|
||
|
|
// 表单验证
|
||
|
|
const formRules = reactive<any>({
|
||
|
|
name: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入审批流名称",
|
||
|
|
trigger: ["blur"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
check_type: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入1固定审批,2授权审批人",
|
||
|
|
trigger: ["blur"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
type: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入应用模块,1假勤,2行政,3财务,4人事,5其他,6报销,7发票,8合同",
|
||
|
|
trigger: ["blur"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
flow_cate: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入应用审批类型id",
|
||
|
|
trigger: ["blur"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
remark: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入流程说明",
|
||
|
|
trigger: ["blur"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 获取详情
|
||
|
|
const setFormData = async (data: Record<any, any>) => {
|
||
|
|
// let res = await apiFlowDetil(data.id);
|
||
|
|
for (const key in formData) {
|
||
|
|
if (data[key] != null && data[key] != undefined) {
|
||
|
|
//@ts-ignore
|
||
|
|
formData[key] = res[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
formData.flow_detail.type = Number(formData.flow_detail.type);
|
||
|
|
};
|
||
|
|
|
||
|
|
const getDetail = async (row: Record<string, any>) => {
|
||
|
|
// const data = await apiFlowDetail({
|
||
|
|
// id: row.id,
|
||
|
|
// });
|
||
|
|
// setFormData(data);
|
||
|
|
};
|
||
|
|
|
||
|
|
const a = {};
|
||
|
|
// 提交按钮
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
|
||
|
|
console.log(formData)
|
||
|
|
return
|
||
|
|
await formRef.value?.validate();
|
||
|
|
// mode.value == "edit"
|
||
|
|
// ? await apiFlowCreat(formData)
|
||
|
|
// : await apiFlowCreat(formData);
|
||
|
|
popupRef.value?.close();
|
||
|
|
emit("success");
|
||
|
|
};
|
||
|
|
|
||
|
|
const submituser = (e) => {
|
||
|
|
console.log(e, "e")
|
||
|
|
}
|
||
|
|
|
||
|
|
//打开弹窗
|
||
|
|
const open = (type = "add") => {
|
||
|
|
mode.value = type;
|
||
|
|
popupRef.value?.open();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 关闭回调
|
||
|
|
const handleClose = () => {
|
||
|
|
emit("close");
|
||
|
|
};
|
||
|
|
|
||
|
|
const openDialog = () => {
|
||
|
|
personnel.value?.open()
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
open,
|
||
|
|
setFormData,
|
||
|
|
getDetail,
|
||
|
|
});
|
||
|
|
</script>
|