115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
<template>
|
|
<el-dialog :model-value="visible" :title="title" width="30%" @close="handleCancel">
|
|
<el-form :model="form" ref="formRef" label-width="80px" :rules="rules">
|
|
<slot>
|
|
<el-form-item label="审批意见" prop="auditView">
|
|
<el-input v-model="form.auditView" placeholder="请输入审批意见" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="审核状态" prop="auditStatus">
|
|
<el-radio v-model="form.auditStatus" label="1" size="large">通过</el-radio>
|
|
<el-radio v-model="form.auditStatus" label="2" size="large">不通过</el-radio>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="审核人" prop="auditUser">
|
|
<el-select v-model="form.auditUser" placeholder="请选择审核人" filterable clearable>
|
|
<el-option
|
|
v-for="item in userList"
|
|
:key="item.id"
|
|
:label="item.userNickname"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="日期" prop="auditDate">
|
|
<el-date-picker
|
|
v-model="form.auditDate"
|
|
type="date"
|
|
placeholder="请选择日期"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</slot>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, defineProps, defineEmits } from 'vue';
|
|
import type { AuditFormModel } from '../type';
|
|
import { UserItem, VersionMap } from '/@/types';
|
|
|
|
defineOptions({
|
|
name: 'AuditForm',
|
|
});
|
|
const props = defineProps<{
|
|
modelValue: boolean;
|
|
title?: string;
|
|
defaultForm?: Partial<AuditFormModel>;
|
|
}>();
|
|
const formRef = ref();
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void;
|
|
(e: 'submit', data: any): void;
|
|
}>();
|
|
const rules = ref({
|
|
auditView: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
|
|
auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
|
|
auditUser: [{ required: true, message: '请选择审核人', trigger: 'change' }],
|
|
auditDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
|
|
});
|
|
const visible = ref(props.modelValue);
|
|
const userList = ref<UserItem[]>([]);
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => (visible.value = val)
|
|
);
|
|
watch(visible, (val) => emit('update:modelValue', val));
|
|
|
|
const form = ref<AuditFormModel>({
|
|
id: '',
|
|
auditView: '',
|
|
auditStatus: '',
|
|
auditUser: '',
|
|
auditDate: '',
|
|
...(props.defaultForm || {}),
|
|
});
|
|
const open = (row: AuditFormModel, userOptions: UserItem[]) => {
|
|
visible.value = true;
|
|
row.auditStatus='1'
|
|
form.value = row;
|
|
userList.value = userOptions;
|
|
};
|
|
defineExpose({
|
|
open,
|
|
});
|
|
const handleSubmit = () => {
|
|
formRef.value.validate((valid: boolean) => {
|
|
if (valid) {
|
|
emit('submit', form.value);
|
|
handleCancel();
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
visible.value = false;
|
|
form.value = {
|
|
id: '',
|
|
auditView: '',
|
|
auditStatus: '',
|
|
auditUser: '',
|
|
auditDate: '',
|
|
};
|
|
};
|
|
</script>
|