GitBucket
Newer
<!-- 设备分组信息-编辑 -->
<script lang="ts" setup name="TaskEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import tableList from './tableList.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import { getAdminDept, getUserDept, getUserList } from '@/api/system/user'
import { addTask, cancelTask, delTask, detailTask, submitTask, updateTask, valiateTask } from '@/api/eqpt/measurementPlan/task'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { SCHEDULE } from '@/utils/scheduleDict'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string
const tableRef = ref()
// 显示标题
const textMap: { [key: string]: string } = {
update: '编辑',
create: '新增',
detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
createTime: '',
createUserId: '',
createUserName: '',
customerAddress: '',
customerId: '',
customerName: '',
customerPhone: '',
customerSampleInfoList: [],
deliverer: '',
delivererId: '',
delivererTel: '',
id: '',
isUrgent: '1',
maintainMajor: '',
measureCompany: '',
orderNo: '',
planDeliverTime: '',
receiveIllustrate: '',
receiveStatus: '',
receiveStatusName: '',
requireOverTime: '',
undertakeTime: '',
undertakerId: '',
undertakerName: '',
updateTime: '',
isOnSiteCheck: '0',
onSiteCheckTime: '',
deptId: '',
orderStatusName: '',
}) // 表单
const checkPhone = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('手机号不能为空'))
}
else if (!(/^1[3456789]\d{9}$/.test(value))) {
callback(new Error('请输入正确手机号'))
}
else {
callback()
}
}
const rules = ref<FormRules>({
deliverer: [{ required: true, message: '送检人必填', trigger: ['blur', 'change'] }],
// customerAddress: [{ required: true, message: '委托方地址必填', trigger: ['blur', 'change'] }],
// customerPhone: [{ required: true, message: '电话必填', trigger: ['blur', 'change'] }],
// maintainMajor: [{ required: true, message: '检修专业必填', trigger: ['blur', 'change'] }],
planDeliverTime: [{ required: true, message: '预计送达时间必选', trigger: ['blur', 'change'] }],
// requireOverTime: [{ required: true, message: '要求检完时间必选', trigger: ['blur', 'change'] }],
// isUrgent: [{ required: true, message: '是否加急必选', trigger: ['blur', 'change'] }],
measureCompany: [{ required: true, message: '检定(校准)单位必填', trigger: ['blur', 'change'] }],
undertakerName: [{ required: true, message: '承接人必填', trigger: ['blur', 'change'] }],
undertakeTime: [{ required: true, message: '承接时间必选', trigger: ['blur', 'change'] }],
customerId: [{ required: true, message: '委托方必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 弹窗初始化
const processId = ref()
const isAdmin = ref(false)
const companyList = ref<any[]>([]) // 单位列表
const initDialog = () => {
dialogStatus.value = $route.params.type as string
ruleFormRef.value?.resetFields()
if ($route.params.type === 'create') {
ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
ruleForm.value.createUserId = userStore.id
ruleForm.value.createUserName = userStore.name
ruleForm.value.deptId = userStore.deptId
// 获取当前用户所在单位
getUserDept().then((res) => {
console.log(res.data, '用户所在单位')
// fullName
if (res.data.fullName === '顶级' || res.data.version === '1' || res.data.version === 1) {
isAdmin.value = true
getAdminDept({}).then((res) => {
companyList.value = res.data.map((item: any) => ({ id: item.id, value: item.id, name: item.fullName }))
})
}
else {
isAdmin.value = false
ruleForm.value.customerId = res.data.id
ruleForm.value.customerName = res.data.fullName
}
})
}
else {
ruleForm.value = JSON.parse($route.query.row as string)
detailTask({ id: ruleForm.value.id }, $route.query.statusName as string).then((res) => {
ruleForm.value = res.data.data
console.log(ruleForm.value, 'rule')
ruleForm.value.isUrgent = String(res.data.data.isUrgent)
ruleForm.value.isOnSiteCheck = String(res.data.data.isOnSiteCheck)
processId.value = ruleForm.value.processId
})
}
}
onMounted(() => {
initDialog()
})
// 获取是否加急下拉列表
const isUrgentList = ref<{ id: string; value: string; name: string }[]>()
// 送检人列表
const personList = ref<any[]>()
// 检定单位
const measureCompanyList = ref<{ id: string; value: string; name: string }[]>()
const fetchListData = () => {
getDictByCode('isUrgent').then((res) => {
isUrgentList.value = res.data
})
getUserDept().then((res1) => {
getUserList({ offset: 1, limit: 99999, deptId: $route.path.includes('detail') ? '' : res1.data.id }).then((res) => {
personList.value = res.data.rows
})
})
getDictByCode('eqptmeasureCompany').then((res) => {
measureCompanyList.value = res.data
})
}
fetchListData()
// 关闭弹窗
const close = () => {
$router.back()
}
// 新增
// const add = () => {
// ruleForm.value.customerSampleInfoList = tableRef.value.list
// addTask(ruleForm.value).then((res) => {
// ElMessage.success('保存成功')
// // close()
// })
// }
// // 编辑
// const update = () => {
// ruleForm.value.customerSampleInfoList = tableRef.value.list
// updateTask(ruleForm.value).then((res) => {
// ElMessage.success('保存成功')
// // close()
// })
// }
// const savaData = () => {
// // 保存方法
// const save = () => {
// if (dialogStatus.value === 'create') {
// add()
// }
// else {
// update()
// }
// }
// valiateTask(ruleForm.value).then((res) => {
// // 调用提示信息
// if (res.data) {
// ElMessageBox.confirm(
// `${res.data}`,
// '提示',
// {
// confirmButtonText: '确认',
// cancelButtonText: '取消',
// type: 'warning',
// },
// ).then((res) => {
// save()
// })
// }
// else {
// save()
// }
// })
// }
// 保存
// const saveForm1 = async (formEl: FormInstance | undefined) => {
// if (!formEl) { return }
// await formEl.validate((valid, fields) => {
// if (valid && tableRef.value.checkCertificateList()) {
// if (!tableRef.value.list.length) {
// ElMessage.warning('请先选择设备')
// return
// }
// ElMessageBox.confirm(
// '确认保存吗？',
// '提示',
// {
// confirmButtonText: '确认',
// cancelButtonText: '取消',
// type: 'warning',
// },
// ).then((res) => {
// savaData()
// })
// }
// })
// }
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
formEl?.resetFields()
close()
}
const { proxy } = getCurrentInstance() as any
// const statusName = $route.query.statusName as string
// 同意拒绝
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
const data = JSON.parse($route.query.row as string)
approvalDialogRef.value.initDialog(type, data.taskId, data.processId, ruleForm.value.id)
}
// 编辑
const editForm = () => {
$router.push({
params: { ...$route.params, type: 'update' },
query: { ...$route.query },
})
}
// 提交
const submitId = ref('')
const submitForm = () => {
if (!submitId.value) {
ElMessage.warning('请先保存')
return false
}
ElMessageBox.confirm(
'确认提交吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then((_res) => {
submitTask({ id: submitId.value, formId: SCHEDULE.METERING_TASK_APPROVAL }).then((_res) => {
ElMessage.success('已提交')
close()
})
})
}
const save = () => {
if (submitId.value) {
ruleForm.value.id = submitId.value
}
ruleForm.value.customerSampleInfoList = tableRef.value.list
ruleForm.value.customerName = ruleForm.value.customerName ? ruleForm.value.customerName : companyList.value.filter(item => item.id === ruleForm.value.customerId)[0]?.name
updateTask(ruleForm.value).then((res) => {
submitId.value = res.data
// close()
if (statusName === '已取消' || statusName === '未通过') {
submitForm()
}
else {
ElMessage.success('保存成功')
}
})
}
const saveForm = async (formEl: FormInstance | undefined) => {
if (!formEl) { return }
await formEl.validate((valid, _fields) => {
if (valid && tableRef.value.checkCertificateList()) {
if (tableRef.value.list.length) {
ElMessageBox.confirm(
'确认保存吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then((_res) => {
valiateTask(ruleForm.value).then((res) => {
// 调用提示信息
if (res.data) {
ElMessageBox.confirm(
`${res.data}`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then((res) => {
save()
})
}
else {
save()
}
})
})
}
else {
ElMessage.warning('请先添加设备')
}
}
})
}
const cancelForm = () => {
ElMessageBox.confirm(
'确认取消此申请吗?',
'确认',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const row = JSON.parse($route.query.row as string)
cancelTask({ id: row.id, processInstanceId: row.processId, comments: '' }).then((res) => {
ElMessage.success('操作成功')
close()
// search()
})
})
}
const delForm = () => {
ElMessageBox.confirm(
'确认删除此记录吗?',
'确认',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const row = JSON.parse($route.query.row as string)
delTask(row.id).then((res) => {
ElMessage.success('操作成功')
close()
// search()
})
})
}
const activeName = ref('基本信息')
</script>
<template>
<app-container style="overflow: hidden;">
<!-- 审批弹窗 -->
<!-- <approval-dialog ref="approvalDialogRef" @on-success="search" /> -->
<approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
<detail-page :title="`任务单-${textMap[dialogStatus]}`">
<!-- <template #btns>
<el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
保存
</el-button>
<el-button type="info" @click="resetForm(ruleFormRef)">
关闭
</el-button>
</template> -->
<template #btns>
<el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
同意
</el-button>
<el-button v-if="statusName === '待审批'" type="primary" @click="apply('refuse')">
拒绝
</el-button>
<el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
编辑
</el-button>
<el-button v-if="submitBtn(statusName, dialogStatus) && statusName !== '已取消' && statusName !== '未通过'" type="primary" @click="submitForm()">
提交
</el-button>
<el-button v-if="submitBtn(statusName, dialogStatus)" type="primary" @click="saveForm(ruleFormRef)">
保存
</el-button>
<el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
取消
</el-button>
<el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
删除
</el-button>
<el-button type="info" @click="resetForm(ruleFormRef)">
关闭
</el-button>
</template>
</detail-page>
<detail-block-com v-if="!$route.path.includes('create') && statusName !== '全部' && statusName !== '草稿箱'">
<el-radio-group v-model="activeName">
<el-radio-button label="基本信息">
基本信息
</el-radio-button>
<el-radio-button label="审批详情">
审批详情
</el-radio-button>
</el-radio-group>
</detail-block-com>
<template v-if="activeName === '基本信息'">
<detail-block-com class="container">
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :class="$route.path.includes('detail') ? 'isDetail' : ''" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="任务单编号">
<el-input v-model.trim="ruleForm.orderNo" disabled placeholder="系统自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建人">
<el-input v-model.trim="ruleForm.createUserName" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">
<el-input v-model.trim="ruleForm.createTime" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="送检人" prop="deliverer">
<el-input v-model.trim="ruleForm.deliverer" placeholder="送检人" />
<!-- <el-select v-model="ruleForm.deliverer" filterable placeholder="送检人" style="width: 100%;">
<el-option
v-for="item in personList"
: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-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="委托方" prop="customerId">
<el-input v-if="!isAdmin" v-model.trim="ruleForm.customerName" placeholder="委托方" disabled />
<el-select v-else v-model="ruleForm.customerId" clearable filterable placeholder="委托方" style="width: 100%;">
<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="委托方地址" prop="customerAddress">
<el-input v-model.trim="ruleForm.customerAddress" placeholder="委托方地址" />
</el-form-item>
</el-col> -->
<!-- <el-col :span="6">
<el-form-item label="电话" prop="customerPhone">
<el-input v-model.trim="ruleForm.customerPhone" placeholder="委托方电话" />
</el-form-item>
</el-col> -->
<el-col :span="6">
<el-form-item label="是否现场检定" prop="isOnSiteCheck">
<el-radio-group v-model="ruleForm.isOnSiteCheck" class="ml-4">
<el-radio label="1">
是
</el-radio>
<el-radio label="0">
否
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<!-- 现场检定- 是 -->
<template v-if="ruleForm.isOnSiteCheck === '1'">
<el-col :span="6">
<el-form-item label="现场检定时间" prop="onSiteCheckTime">
<el-date-picker
v-model="ruleForm.onSiteCheckTime" type="date" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" placeholder="现场检定时间" class="normal-date" style="width: 100%;"
/>
</el-form-item>
</el-col>
</template>
<!-- 现场检定- 否 -->
<template v-if="ruleForm.isOnSiteCheck === '0'">
<el-col :span="6">
<el-form-item label="预计送达时间" prop="planDeliverTime">
<el-date-picker
v-model="ruleForm.planDeliverTime" type="date" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" placeholder="预计送达时间" class="normal-date" style="width: 100%;"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="要求检完时间" prop="requireOverTime">
<el-date-picker
v-model="ruleForm.requireOverTime" type="date" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" placeholder="要求检完时间" class="normal-date" style="width: 100%;"
/>
</el-form-item>
</el-col>
</template>
<!-- <el-col :span="6">
<el-form-item label="预计送达时间" prop="planDeliverTime">
<el-date-picker
v-model="ruleForm.planDeliverTime" type="date" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" placeholder="预计送达时间" class="normal-date" style="width: 100%;"
/>
</el-form-item>
</el-col> -->
<!-- <el-col :span="6">
<el-form-item label="要求检完时间" prop="requireOverTime">
<el-date-picker
v-model="ruleForm.requireOverTime" type="date" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" placeholder="要求检完时间" class="normal-date" style="width: 100%;"
/>
</el-form-item>
</el-col> -->
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="电话" prop="customerPhone">
<el-input v-model.trim="ruleForm.customerPhone" placeholder="委托方电话" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否加急" prop="isUrgent">
<!-- <el-input v-model.trim="ruleForm.isUrgent" placeholder="是否加急" /> -->
<el-select v-model="ruleForm.isUrgent" placeholder="是否加急" style="width: 100%;">
<el-option v-for="item in isUrgentList" :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="measureCompany">
<!-- <el-input v-model.trim="ruleForm.measureCompany" placeholder="检定(校准)单位" disabled /> -->
<el-select v-model="ruleForm.measureCompany" filterable placeholder="检定(校准)单位" style="width: 100%;">
<el-option v-for="item in measureCompanyList" :key="item.id" :label="item.name" :value="item.name" />
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="检修专业" prop="maintainMajor">
<el-input v-model.trim="ruleForm.maintainMajor" placeholder="检修专业" />
</el-form-item>
</el-col> -->
</el-row>
<el-row v-if="$route.path.includes('detail') && $route.query.statusName === '全部'" :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="任务单状态">
<el-input v-model.trim="ruleForm.orderStatusName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="接收说明">
<el-input v-model.trim="ruleForm.receiveIllustrate" />
</el-form-item>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="交接单" prop="undertakeTime">
<a />
</el-form-item>
</el-col> -->
</el-row>
</el-form>
</detail-block-com>
<detail-block-com>
<table-list ref="tableRef" :data="ruleForm.customerSampleInfoList" :form="ruleForm" :status="dialogStatus" />
</detail-block-com>
</template>
<approval-record-table v-if="activeName === '审批详情'" :process-id="processId" />
</app-container>
</template>
<style lang="scss" scoped>
.container {
.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;
}
}
}
.center {
display: flex;
align-items: flex-end;
}
}
</style>