<!-- 现场审核计划编辑页面 -->
<script name="QualityScenePlanHandler" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import scheduleList from './scheduleList.vue'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { AGREE, TASKNAME } from '@/views/quality/agree'
import { SCHEDULE } from '@/utils/scheduleDict'
import ApprovalDialog from '@/components/ApprovalCustom/ApprovalDialog.vue'
import { addQualityScene, approvalDelete, cancelApproval, delteQualityScene, detailQualityScene, draftDelete, getSceneList, refuseApproval, rejectApproval, submitQualityScene, updateQualityScene } from '@/api/quality/internal/scene'
import selectUser from '@/views/quality/components/selectUser.vue'
import { valiateWork } from '@/utils/valiateWork'
import quality from '/public/config/quality.json'
import { filterUser } from '@/views/quality/internal/workManage/components/filterUser'
import { getStaffList } from '@/api/resource/register'
import { getInternalPlanList, detailInternalPlan } from '@/api/quality/internal/internalPlan'
// import { getUserList } from '@/api/system/user'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const decisionItem = ref('')
// 当前审批状态名字
const approvalStatusName = $route.query.approvalStatusName as string
// 表单
const ruleForm = ref({
id: '',
taskId: '',
yearTime: '',
yearNum: '',
bizLabCode: '',
fileCode: '',
commanderName: '',
commanderId: '',
createTime: '',
auditObjective: '',
auditScope: '',
groupLeader: '',
sceneUsers: [] as any[],
divideWork: '',
requirements: '',
sceneSchedules: [] as any[],
})
// 表单验证规则
const rules = ref<FormRules>({
yearTime: [{ required: true, message: '年份必选', trigger: ['blur', 'change'] }],
yearNum: [{ required: true, message: '月份必选', trigger: ['blur', 'change'] }],
bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
groupLeader: [{ required: true, message: '内审组长必选', trigger: ['blur', 'change'] }],
})
onMounted(() => {
decisionItem.value = $route.query.decisionItem as string
if ($route.path.includes('create')) {
ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm') // 创建时间
ruleForm.value.commanderId = userStore.id
ruleForm.value.commanderName = userStore.name
// 自动填充数据
if ($route.query.data) {
const data = JSON.parse($route.query.data as string)
// console.log(data, 'data')
// 获取用户列表
ruleForm.value.yearNum = data.yearNum
ruleForm.value.yearTime = data.yearTime
ruleForm.value.bizLabCode = data.bizLabCode
getUserList({ offset: 1, limit: 99999 }).then((res) => {
ruleForm.value.groupLeader = res.data.rows.filter((item: any) => item.name === data.groupLeader)[0]?.id || ''
})
// ruleForm.value.groupLeader = data.groupLeader
ruleForm.value.sceneUsers = data.teamMembers
}
// 填充
ruleForm.value.requirements = `（1）受审核部门认证做好审核前准备，指定专人配合内审组工作；
（2）现场审核结束后，各受审部门及时提交整改计划并抓紧落实；
（3）整改验证应在3个月内（${dayjs().add(3,'month').format('YYYY-MM-DD')}前）结束，特殊情况不能完成的需经批准后才可延期。`
}
else {
rules.value.fileCode = [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }]
detailQualityScene({ id: $route.params.id as string }).then((res) => {
ruleForm.value = res.data
setInfoId(res.data.id)
if (res.data.sceneUsers.length) {
ruleForm.value.sceneUsers = ruleForm.value.sceneUsers.map((item: any) => item.userName) as any[]
}
nextTick(() => {
ruleFormRef.value?.clearValidate()
})
})
}
})
// 根据年 、次、实验室自动匹配
watch([() =>ruleForm.value.bizLabCode, () => ruleForm.value.yearNum, () => ruleForm.value.yearTime], () => {
if($route.path.includes('create')) {
if(ruleForm.value.bizLabCode && ruleForm.value.yearNum && ruleForm.value.yearTime) {
// 需要查询对应的内部审核计划
getInternalPlanList({
planStatus: '1',
bizLabCode: ruleForm.value.bizLabCode,
offset: '1',
limit: 20,
// planStatus: '1'
}).then(res => {
const data = res.data.rows
if(data.filter(item => String(item.yearNum) === ruleForm.value.yearNum && String(item.yearTime) === ruleForm.value.yearTime).length) {
// 自动填充
console.log(data[0])
detailInternalPlan({id: data[0].id}).then(res => {
console.log(res.data, '详情')
ruleForm.value.groupLeader = res.data.groupLeader
ruleForm.value.sceneUsers = (res.data.planUserList || []).map((item) => item.userName)
ruleForm.value.auditObjective = res.data.auditObjective
ruleForm.value.auditScope = res.data.auditScope
})
}
else {
ElMessage.warning('请先创建对应的内部审核计划')
}
})
}
}
},{
deep: true
})
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室+
const yearList = ref<{ id: string; value: string; name: string }[]>([])// 年度
const monthList = ref<{ id: string; value: string; name: string }[]>([])// 月份
const userList1 = ref<any[]>([])
const userList2 = ref<any[]>([])
const internalAudit = ref<any[]>([])
// 获取字典值
const fetchDict = async () => {
// 获取实验室字典
getDictByCode('bizLabCode').then((res) => {
labelList.value = res.data
})
// 循环出最近十年的year
// 获取当前年份
const year = new Date().getFullYear() + 5
for (let i = year; i > year - 10; i--) {
yearList.value?.push({
name: String(i),
value: String(i),
id: String(i),
})
}
yearList.value?.reverse()
// 月份
for (let i = 1; i < 13; i++) {
monthList.value?.push({
name: String(i),
value: String(i),
id: String(i),
})
}
// 用户
// getUserList({ offset: 1, limit: 99999 }).then((res) => {
// userList1.value = res.data.rows.filter((item: any) => item.roleName.includes('组长'))
// userList2.value = res.data.rows.filter((item: any) => item.roleName.includes('组员'))
// })
// userList1.value = [...await filterUser(quality.roleTips['质量负责人']), ...await filterUser(quality.roleTips['内审组长'])]
const res = await getUserList({ limit: 9999, offset: 1 })
const allUserList = res.data.rows
// 获取内审员
getStaffList({ limit: 9999, offset: 1 }).then((res) => {
internalAudit.value = res.data.rows.filter((item: any) => item.auditorCertificate === 1).map((item: any) => ({
deptName: item.deptName,
name: item.staffName,
id: allUserList.filter(citem => citem.account === item.account)[0]?.id,
}))
})
userList2.value = await filterUser(quality.roleTips['内审组员'])
}
fetchDict()
// ---------------------------------------------保存相关--------------------------------------
const infoId = ref('')
function setInfoId(id: string) {
infoId.value = id
}
const createRow = (data: any) => {
addQualityScene(data).then((res) => {
ElMessage.success('操作成功')
infoId.value = res.data
})
}
const updateRow = (data: any) => {
updateQualityScene(data).then((res) => {
ElMessage.success('操作成功')
// infoId.value = res.data
if (approvalStatusName === '已取消' || approvalStatusName === '未通过') {
handleSubmit()
}
if (approvalStatusName === '全部') {
close()
}
})
}
const scheduleRef = ref()
const saveForm = async (formEl: FormInstance | undefined) => {
if (!formEl) { return }
await formEl.validate(async (valid, fields) => {
if (valid && scheduleRef.value.checkCertificateList()) {
const ress = await valiateWork(ruleForm.value.yearTime, ruleForm.value.yearNum, ruleForm.value.bizLabCode, '内部审核')
if (!ress) { return }
const data = {
...ruleForm.value,
sceneSchedules: scheduleRef.value.list.map((item:any) => ({...item, scheduleHour: item.scheduleHour.join('-')})),
fileName: `${ruleForm.value.yearTime}年第${ruleForm.value.yearNum}次现场审核计划`,
}
if (ruleForm.value.sceneUsers.length) {
const newArr = ruleForm.value.sceneUsers.map((item: any) => ({
userName: item,
userId: userList2.value.filter((citem: any) => citem.name === item)[0].id,
}))
data.sceneUsers = newArr
}
if ($route.path.includes('create') && !infoId.value) {
createRow(data)
}
else if ($route.path.includes('update') || infoId.value) {
updateRow({ ...data, id: infoId.value })
}
}
})
}
// ---------------------------------------------审批--------------------------------------
const taskId = ref($route.query.taskId as string || '') // 任务id，用于同意、驳回、拒绝审批
const processId = ref($route.query.processId as string || '') // 流程实例id
const approvalDialog = ref() // 审批组件ref
const showApprovalButton = ref(true) // 是否展示审批按钮
// 审批结束回调
const approvalSuccess = () => {
showApprovalButton.value = false
}
// 审批
const handleApprove = (val: string) => {
if (val === '取消') {
const params = {
processInstanceId: processId.value!,
comments: '',
id: ruleForm.value.id,
}
ElMessageBox.confirm(
'确认取消该审批吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
)
.then(() => {
cancelApproval(params).then((res) => {
ElMessage({
type: 'success',
message: '已取消',
})
showApprovalButton.value = false
})
})
}
else if (val === '同意') {
approvalDialog.value.initDialog('agree', taskId.value, ruleForm.value.id, processId.value)
}
else if (val === '驳回') {
approvalDialog.value.initDialog('reject', taskId.value, ruleForm.value.id, processId.value!)
}
else if (val === '拒绝') {
approvalDialog.value.initDialog('refuse', taskId.value, ruleForm.value.id, processId.value)
}
}
// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
const params = {
id,
taskId, // 任务id
comments, // 拒绝原因
}
refuseApproval(params).then((res) => {
ElMessage({
type: 'success',
message: '已拒绝',
})
showApprovalButton.value = false
})
}
// 驳回
const reject = (comments: string, taskId: string, id: string) => {
const param = {
id,
taskId, // 任务id
comments, // 拒绝原因
}
rejectApproval(param).then((res) => {
if (res.code === 200) {
ElMessage.success('已驳回')
}
else {
ElMessage.error(`驳回失败：${res.message}`)
}
showApprovalButton.value = false
})
}
// 选择审批人
const userRef = ref()
// 点击提交
function handleSubmit() {
if (infoId.value || ruleForm.value.id) {
// 选择审批人
userRef.value.initDialog()
}
else {
ElMessage.warning('请先保存')
}
}
// 确认审批人
const confirmUser = (data: any) => {
// ruleForm.value.assignees = data
submitQualityScene({
formId: SCHEDULE.SITE_AUDIT_PLAN_APPROVAL,
// processId: infoId.value,
id: infoId.value || ruleForm.value.id,
assignees: data,
}).then(() => {
ElMessage.success('提交成功')
// $router.go(-1)
close()
})
}
// // 点击提交
// function handleSubmit() {
// if (infoId.value || ruleForm.value.id) {
// submitQualityScene({
// formId: SCHEDULE.SITE_AUDIT_PLAN_APPROVAL,
// // processId: infoId.value,
// id: infoId.value || ruleForm.value.id,
// }).then(() => {
// ElMessage.success('提交成功')
// close()
// })
// }
// else {
// ElMessage.warning('请先保存')
// }
// }
// 点击编辑
const handleEdit = () => {
$router.push({
path: `/preventhandle/update/${ruleForm.value.id}`,
query: { ...$route.query },
})
}
const del = () => {
if (approvalStatusName === '草稿箱') {
draftDelete({ id: ruleForm.value.id }).then(() => {
ElMessage.success('已删除')
close()
})
}
else if (approvalStatusName === '已取消') {
approvalDelete({ id: ruleForm.value.id, taskId: ruleForm.value.taskId }).then(() => {
ElMessage.success('已删除')
close()
})
}
else if (approvalStatusName === '全部') { // 全部的删除
delteQualityScene({ id: ruleForm.value.id }).then(() => {
ElMessage.success('已删除')
close()
})
}
}
// 关闭页面
function close() {
if ($route.query.data) {
$router.go(-1)
}
else {
$router.push({
path: '/internal/internalscene',
})
}
}
const showMenu = ref('基本信息')
defineExpose({
ruleForm, showMenu,
})
const { proxy } = getCurrentInstance() as any
</script>
<template>
<app-container style="overflow: hidden;">
<!-- 审批弹窗 -->
<approval-dialog ref="approvalDialog" :agree="AGREE.SITE_AUDIT_PLAN_APPROVAL" :last-name="TASKNAME.SITE_AUDIT_PLAN_APPROVAL" @on-success="approvalSuccess" @refuse="refuse" @reject="reject"/>
<!-- 选择审批人 -->
<select-user :form-id="SCHEDULE.CORRECT_MEASURE_PROCESS_SHEET_APPROVAL" :show-next-text="true" ref="userRef" @confirm="confirmUser" />
<detail-page title="现场审核计划">
<template #btns>
<el-button v-if="$route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/internal/scene/agree')" type="primary" @click="handleApprove('同意')">
同意
</el-button>
<el-button v-if="(`${decisionItem}` === '1' || `${decisionItem}` === '2') && $route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton" type="warning" @click="handleApprove('驳回')">
驳回
</el-button>
<el-button v-if="(`${decisionItem}` === '1' || `${decisionItem}` === '3') && $route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/internal/scene/reject')" type="danger" @click="handleApprove('拒绝')">
拒绝
</el-button>
<el-button v-if="$route.path.includes('detail') && approvalStatusName === '审批中' && showApprovalButton && proxy.hasPerm('/quality/internal/scene/cancel')" type="info" @click="handleApprove('取消')">
取消
</el-button>
<!-- :disabled="!infoId" -->
<el-button
v-if="($route.path.includes('create') || ($route.path.includes('update') && approvalStatusName !== '未通过' && approvalStatusName !== '已取消' && approvalStatusName !== '全部')) && proxy.hasPerm('/quality/internal/scene/submit')"
type="primary"
@click="handleSubmit"
>
提交
</el-button>
<el-button v-if="approvalStatusName !== '已审批' && $route.path.includes('detail') && approvalStatusName === '未通过' && proxy.hasPerm('/quality/internal/scene/update')" type="primary" @click="handleEdit">
编辑
</el-button>
<el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
保存
</el-button>
<el-button v-if="approvalStatusName === '已取消' && proxy.hasPerm('/quality/internal/scene/delete')" type="danger" @click="del">
删除
</el-button>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
</detail-page>
<detail-page v-if="approvalStatusName !== '草稿箱' && !$route.path.includes('create')" title="" class="info-radio">
<el-radio-group v-model="showMenu">
<el-radio-button label="基本信息" />
<el-radio-button label="审批详情" />
</el-radio-group>
</detail-page>
<el-form v-show="showMenu === '基本信息'" ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''" :rules="rules" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
<detail-block title="">
<el-row :gutter="24" class="marg">
<el-col :span="7">
<el-form-item label="工作名称" style="display: flex;">
<el-form-item label="" label-width="0px" prop="yearTime">
<el-select
v-model="ruleForm.yearTime"
placeholder="年份"
class="short-input"
filterable
style="width: 80px;"
>
<el-option v-for="item in yearList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
年第
</el-form-item>
<el-form-item label="" label-width="0px" prop="yearNum">
<el-select
v-model="ruleForm.yearNum"
placeholder="次数"
class="short-input"
filterable
style="width: 80px;"
>
<el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
次现场审核计划
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="实验室" prop="bizLabCode">
<el-select
v-model="ruleForm.bizLabCode"
placeholder="实验室"
class="short-input"
filterable
style="width: 100%;"
>
<el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="文件编号" prop="fileCode">
<el-input v-model.trim="ruleForm.fileCode" :placeholder="$route.path.includes('create') ? '系统自动生成' : ''" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="7">
<el-form-item label="创建人" prop="commanderName">
<el-input v-model.trim="ruleForm.commanderName" placeholder="创建人" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="ruleForm.createTime"
type="datetime"
placeholder="创建时间"
value-format="YYYY-MM-DD HH:mm"
format="YYYY-MM-DD HH:mm"
style="width: 100%;"
disabled
/>
</el-form-item>
</el-col>
</el-row>
</detail-block>
<detail-block title="">
<el-row :gutter="24" class="marg">
<el-col :span="20">
<el-form-item label="1.现场审核目的" prop="auditObjective">
<el-input v-model="ruleForm.auditObjective" placeholder="现场审核目的" :rows="5" show-word-limit type="textarea" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="20">
<el-form-item label="2.现场审核范围和内容" prop="auditScope">
<el-input v-model="ruleForm.auditScope" placeholder="现场审核范围和内容" :rows="7" show-word-limit type="textarea" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="3.内审组">
<el-col :span="24">
<el-form-item label="组长" prop="groupLeader" label-width="60px">
<el-select v-model="ruleForm.groupLeader" filterable clearable placeholder="组长" style="width: 200px;">
<el-option v-for="(item) in internalAudit" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left;">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" style="margin-top: 10px;">
<el-form-item label="组员" prop="planUserList" label-width="60px">
<el-tooltip
class="box-item"
effect="dark"
:content="`${ruleForm.sceneUsers ? ruleForm.sceneUsers?.join() : ''}`"
placement="bottom"
>
<el-select v-model="ruleForm.sceneUsers" multiple filterable clearable placeholder="内审组组员" style="width: 200px;">
<el-option v-for="(item) in userList2" :key="item.id" :label="item.name" :value="item.name">
<span style="float: left;">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
</el-option>
</el-select>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="20" style="margin-top: 10px;">
<el-form-item label="分工" prop="divideWork" label-width="60px">
<el-input v-model="ruleForm.divideWork" placeholder="分工" :rows="3" type="textarea" />
</el-form-item>
</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="20">
<el-form-item label="4.日程安排" prop="sceneSchedules">
<schedule-list ref="scheduleRef" style="width: 100%;" :data="ruleForm.sceneSchedules" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="20">
<el-form-item label="5.要求" prop="requirements">
<el-input v-model="ruleForm.requirements" placeholder="要求" :rows="5" type="textarea" />
</el-form-item>
</el-col>
</el-row>
</detail-block>
</el-form>
<!-- 审批详情 -->
<approval-record-table-custom v-if="showMenu === '审批详情'" :process-id="processId" />
</app-container>
</template>
<style lang="scss" scoped>
.user-container {
width: 100%;
height: 120px;
overflow-y: scroll;
border: 1px solid #dcdfe6;
border-radius: 5px;
}
.mx-1 {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
}
.info-radio {
::v-deep(.header) {
display: none !important;
}
}
.isDetail {
::v-deep {
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
content: "";
display: none;
}
}
}
</style>
