<template>
|
<el-dialog v-model="approveItemDialog" :title="title" :close-on-click-modal="false">
|
<el-form :model="approveItemForm" label-width="150px" ref="approveItemFormRef" :rules="approveItemFormRule">
|
<el-col :span="24" style="margin-bottom: 24px">
|
<el-form-item label="审批项名称" prop="itemName">
|
<el-input v-model="approveItemForm.itemName" class="input-add" placeholder="请填写审批项名称"> </el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" style="margin-bottom: 24px">
|
<el-form-item label="审批项类型" prop="type">
|
<el-select v-model="approveItemForm.type" @change="clearValue" placeholder="请选择审批项类型" class="input-add" clearable filterable>
|
<el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="24" style="margin-bottom: 24px">-->
|
<!-- <el-form-item label="措施或标准" prop="smType">-->
|
<!-- <el-select v-model="approveItemForm.smType" @change="clearValue" placeholder="请选择措施或标准" class="input-add" clearable filterable>-->
|
<!-- <el-option v-for="item in smTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option>-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<el-col v-if="(approveItemForm.type === 2 || approveItemForm.type === 3) && personType !== 3" :span="24" style="margin-bottom: 24px">
|
<el-form-item label="措施名称" prop="measureId">
|
<el-select v-model="approveItemForm.measureId" placeholder="请选择措施" class="input-add" clearable filterable>
|
<el-option v-for="item in approveTypeList" :key="item.id" :value="item.id" :label="item.context"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="approveItemForm.type === 1" :span="24" style="margin-bottom: 20px">
|
<el-form-item label="标准名称" prop="standId">
|
<el-select v-model="approveItemForm.standId" class="input-add" placeholder="选择标准" clearable filterable>
|
<el-option v-for="item in standardList" :key="item.ruleStandId" :value="item.ruleStandId" :label="item.title"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
<div align="right">
|
<el-button type="warning" @click="approveItemDialog = false" size="default" plain>取消</el-button>
|
<el-button type="primary" @click="submitApproveItem()" size="default">确认</el-button>
|
</div>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import { reactive, toRefs, ref, nextTick } from 'vue';
|
import { ElMessage } from 'element-plus/es';
|
interface dataState {
|
title: string;
|
activeName: string;
|
approveItemDialog: boolean;
|
approveItemForm: step;
|
approveItemFormRule: {};
|
actionList: Array<type>;
|
typeList: Array<type>;
|
approveTypeList: Array<type>;
|
smTypeList: Array<type>;
|
standardList: [];
|
order: number | null;
|
personType: number | null;
|
}
|
interface step {
|
itemName: string | null;
|
type: null;
|
measureId: number | null;
|
standId: number | null;
|
smType: number | null;
|
}
|
interface type {
|
id: number;
|
name: string;
|
type?:number;
|
}
|
export default {
|
name: 'approveItemDialog',
|
setup(props: any, context: any) {
|
const approveItemFormRef = ref();
|
const data = reactive<dataState>({
|
title: '',
|
activeName: 'ApproveAction',
|
approveItemDialog: false,
|
approveItemForm: {
|
itemName: null,
|
type: null,
|
measureId: null,
|
smType: 1,
|
standId: null
|
},
|
approveItemFormRule: {
|
itemName: [{ required: true, message: '请填写审批项名称', trigger: 'blur' }],
|
type: [{ required: true, message: '请选择审批项类型', trigger: 'change' }],
|
measureId: [{ required: true, message: '请选择措施', trigger: 'change' }],
|
smType: [{ required: true, message: '请选择措施或标准', trigger: 'change' }],
|
standId: [{ required: true, message: '请选择标准', trigger: 'change' }]
|
},
|
actionList: [],
|
typeList: [],
|
approveTypeList: [],
|
smTypeList: [
|
{ id: 1, name: '标准' },
|
{ id: 2, name: '措施' }
|
],
|
standardList: [],
|
order: null,
|
personType: null,
|
});
|
|
const showApproveItemDialog = (type: string, value: {}, index: number, approveLevelForm: { type: number }, standardList: [], actionList: []) => {
|
data.approveItemDialog = true;
|
data.standardList = standardList;
|
data.actionList = actionList;
|
data.order = index;
|
if (approveLevelForm.type === 3) {
|
data.personType = 3
|
data.typeList = [
|
{ id: 1, name: '数值' },
|
{ id: 3, name: '填空' }
|
];
|
} else {
|
data.personType = 2
|
data.typeList = [
|
{ id: 2, name: '选项' },
|
{ id: 3, name: '填空' }
|
];
|
}
|
nextTick(() => {
|
approveItemFormRef.value.clearValidate();
|
});
|
if (type === '新增') {
|
data.title = '新增审批项';
|
data.approveItemForm = {
|
itemName: null,
|
type: null,
|
measureId: null,
|
standId: null,
|
smType: 1
|
};
|
} else {
|
data.title = '修改审批项';
|
data.approveItemForm = JSON.parse(JSON.stringify(value));
|
}
|
};
|
|
const submitApproveItem = async () => {
|
approveItemFormRef.value.validate((valid: Boolean) => {
|
if (valid) {
|
data.approveItemForm.smType = 1;
|
context.emit('addApprovalItem', data.approveItemForm, data.title, data.order);
|
data.approveItemDialog = false;
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: '请完善审批项基本信息'
|
});
|
}
|
});
|
};
|
|
const clearValue = () => {
|
if (data.approveItemForm.type === 1) {
|
data.approveItemForm.measureId = null;
|
}else if(data.approveItemForm.type === 2){
|
data.approveItemForm.standId = null;
|
data.approveTypeList = data.actionList.filter(item => item.type === 1)
|
} else {
|
data.approveItemForm.standId = null;
|
data.approveTypeList = data.actionList.filter(item => item.type === 2)
|
}
|
};
|
|
return {
|
...toRefs(data),
|
clearValue,
|
approveItemFormRef,
|
submitApproveItem,
|
showApproveItemDialog
|
};
|
}
|
};
|
</script>
|
|
<style scoped></style>
|
