<!-- 任务单详情 -->
<script lang="ts" setup name="OrderDetail">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { DateModelType, FormInstance, FormRules, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from './order-interface'
import { exportFile } from '@/utils/exportUtils'
import selectTestEquipment from '@/views/dialog/selectTestEquipment.vue'
import selectCustomerDialog from '@/views/dialog/selectCustomer.vue'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { addOrder, exportReceive, exportSpread, getOrderDetail, updateOrder } from '@/api/business/manager/order'
const textMap: { [key: string]: string } = {
edit: '编辑',
add: '新建',
detail: '详情',
}// 页面类型字典
const user = useUserStore() // 用户信息
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const ruleFormRef = ref() // 表单ref
const { proxy } = getCurrentInstance() as any
// 表单
const form: Ref<IForm> = ref({
createUserId: '', // 创建人id
createUserName: '', // 创建人
createTime: '', // 创建时间
orderNo: '', // 任务单编号
customerId: '', // 委托方id
customerNo: '', // 委托方代码
customerName: '', // 委托方名称
postalCode: '', // 邮政编码
customerAddress: '', // 委托方地址
deliverer: '', // 联系人
customerPhone: '', // 联系电话
certCompany: '', // 证书地址
certAddress: '', // 证书单位
isUrgent: '0', // 是否加急
measureCompany: '', // 检定地点
protectType: '', // 保障类型
undertakeTime: '', // 送检时间
requireOverTime: '', // 完成时间
undertakerName: '', // 仪器收发员
})
const onSiteCheckTimeRange = ref<[DateModelType, DateModelType]>(['', '']) // 现场检定时间范围
const exportParams = ref() // 导出按钮的入参
// 自定义校验规则--要求检完时间不能比预计送达时间大
const requireOverTimeValid = (rule: any, value: any, callback: any) => {
if (!value) {
return callback(new Error('完成时间不能为空'))
}
if (new Date(form.value.undertakeTime).getTime() >= new Date(form.value.requireOverTime).getTime()) {
return callback(new Error('完成时间应大于送检时间'))
}
callback()
}
const rules = reactive<FormRules>({ // 表单验证规则
customerNo: [{ required: true, message: '委托方代码不能为空', trigger: ['change', 'blur'] }],
deliverer: [{ required: true, message: '联系人不能为空', trigger: ['change', 'blur'] }],
customerPhone: [{ required: true, message: '联系电话不能为空', trigger: ['change', 'blur'] }],
isUrgent: [{ required: true, message: '是否加急不能为空', trigger: 'change' }],
undertakeTime: [{ required: true, message: '送检时间不能为空', trigger: ['change', 'blur'] }],
requireOverTime: [{ required: true, type: 'date', validator: requireOverTimeValid, trigger: 'change' }],
undertakerName: [{ required: true, message: '仪器收发员不能为空', trigger: ['change', 'blur'] }],
protectType: [{ required: true, message: '保障类型不能为空', trigger: ['change', 'blur'] }],
measureCompany: [{ required: true, message: '检定地点不能为空', trigger: ['change', 'blur'] }],
})
// -------------------------------------------字典------------------------------------------
const isUrgentList = ref<dictType[]>([])// 是否加急
const measureLocationList = ref<dictType[]>([])// 检定地点
const guaranteeList = ref<dictType[]>([])// 保障类型
const statusMap = ref({}) as any // 检定完成度、样品检定状态
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const businessTypeList = ref<dictType[]>([])// 业务类型
const sampleStatusList = ref<dictType[]>([])// 检定状态
const sampleStatusMap: any = ref([])// 检定状态map
const receiveMajorList = ref<dictType[]>([])// 承接专业
// 获取字典值
async function getDict() {
// 检定状态
const resSampleStatus = await getDictByCode('orderSampleStatus')
sampleStatusList.value = resSampleStatus.data
resSampleStatus.data.forEach((item: { value: any; name: any }) => {
sampleStatusMap.value[`${item.value}`] = item.name
})
// 获取用户列表
getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
userList.value = res.data.rows
})
// 是否加急
const resIsUrgent = await getDictByCode('isUrgent')
isUrgentList.value = resIsUrgent.data
// 检定地点
getDictByCode('measureLocation').then((response) => {
measureLocationList.value = response.data
})
// 保障类型
getDictByCode('guarantee').then((response) => {
guaranteeList.value = response.data
})
// 业务类型
getDictByCode('businessType').then((response) => {
businessTypeList.value = response.data
})
// 承接专业
getDictByCode('bizGroupCodeEquipment').then((response) => {
receiveMajorList.value = response.data
})
}
// -----------------------------------------路由参数----------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
pageType.value = $route.params.type as string
if ($route.params.id) {
infoId.value = $route.params.id as string
}
}
console.log('页面类型', pageType.value)
// -------------------------------------------表格(任务单列表)------------------------------------------
const list: any = ref([])// 表格数据
const selectTestEquipmentRef = ref() // 选择设备组件ref
const isMulti = ref(false) // 表格是否多选
const selectIndex = ref(0) // 选择的第几列
const checkoutList = ref([]) // 选中的内容
const columns = ref([
{ text: '委托单编号', value: 'taskNo', align: 'center', width: 180, disabled: true, required: false },
{ text: '设备名称', value: 'sampleName', align: 'center', width: 180, required: true },
{ text: '规格型号', value: 'sampleModel', align: 'center', width: 180, required: true },
{ text: '出厂编号', value: 'manufactureNo', align: 'center', width: 180, required: true },
{ text: '附件', value: 'appendixDescn', align: 'center', width: 200, required: true },
// { text: '生产厂家', value: 'manufacturer', align: 'center', required: true },
{ text: '仪器数量', value: 'measureContent', align: 'center', width: 200, required: true },
{ text: '特殊要求', value: 'specialRequire', align: 'center', width: 200, required: true },
{ text: '外观检查', value: 'appearanceInspect', align: 'center', width: 200, required: true },
{ text: '计量价格(元)', value: 'measurePrice', align: 'center', width: 200, required: true },
{ text: '业务类型', value: 'measureCategory', align: 'center', width: 200, required: true },
{ text: '承接专业', value: 'receiveMajor', align: 'center', width: 200, required: true },
{ text: '检定状态', value: 'sampleStatus', align: 'center', width: 200, required: true },
{ text: '分发时间', value: 'createTime', align: 'center', width: 200, required: false },
{ text: '完成时间', value: 'measureCompleteTime', align: 'center', width: 180, required: true },
// { text: '是否验收', value: 'sfys', align: 'center', required: true, width: 130 },
{ text: '是否现场', value: 'onSiteCheck', align: 'center', width: 130, required: true },
{ text: '备注', value: 'remark', align: 'center', width: 200, required: false },
])
// 多选发生改变时
const handleSelectionChange = (e: any) => {
checkoutList.value = e
}
// 点击从受检设备中添加
const multiAdd = () => {
isMulti.value = true
selectTestEquipmentRef.value.initDialog(isMulti.value)
}
// 选好设备
const clickConfirmTestEquipment = (val: any) => {
val.forEach((item: any) => {
// 只添加列表里不存在的
const index = list.value.findIndex((i: any) => item.id === i.sampleId)
if (index === -1) {
const param = {
// ...item,
id: '', // 主键
sampleName: item.equipmentName, // 设备名称
sampleNo: item.equipmentNo, // 设备编号
sampleId: item.id, // 样品id
sampleModel: item.model, // 型号规格
manufactureNo: item.manufactureNo, // 出厂编号
appearanceInspect: '', // 外观检查
appendixDescn: '', // 附件
createTime: '', // 分发时间
manufacturer: '', // 生产厂家
measureCategory: '', // 业务类型（检定/校准/测试/功能检查）
measureCompleteTime: '', // 完成时间
measureContent: '', // 仪器数量
measurePrice: '', // 计量价格（元）
onSiteCheck: form.value.measureCompany === '现场' ? '是' : '否', // 是否现场（是/否）
orderId: '', // 委托书id
receiveMajor: '', // 承接专业（信号源/微波/时频/电学/微波）（只能传一个，一个任务分配给多个专业前端进行拆分为多行数据）
remark: '', // 备注
sampleStatus: '', // 检定状态（字典code）
sampleStatusName: '', // 样品状态
specialRequire: '', // 特殊要求
taskNo: '', // 任务单编号
editable: pageType.value !== 'detail',
}
list.value.push(param)
}
})
}
// 删除行
const delRow = () => {
if (checkoutList.value.length <= 0) {
ElMessage({
message: '请选中要删除的行',
type: 'warning',
})
}
else {
checkoutList.value.forEach((item: any) => {
list.value.forEach((element: { sampleId: any }, index: any) => {
if (element.sampleId === item.sampleId) {
list.value.splice(index, 1)
}
})
})
}
}
// ------------------------------------------委托方-----------------------------------------------
const selectCustomerRef = ref() // 委托方组件ref
// 点击选择委托方
const selectCustomer = () => {
selectCustomerRef.value.initDialog(false)
}
// 选好委托方
const clickConfirmCustomer = (val: any) => {
// 委托方变化设备清空
if (val[0].customerNo !== form.value.customerNo) {
list.value = []
}
if (val && val.length) {
form.value.customerNo = val[0].customerNo // 委托方代码
form.value.customerId = val[0].id // 委托方id、deptId是受检设备系统里的委托方id
form.value.customerName = val[0].customerName // 委托方名称
form.value.customerPhone = val[0].mobile // 委托方电话
form.value.customerAddress = val[0].address // 委托方地址
form.value.deliverer = val[0].contacts // 联系人
form.value.postalCode = val[0].postalCode // 联系人
}
}
// ---------------------------------------------其他方法-------------------------------------------
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
$router.back()
}
/**
* 将包含receiveMajor数组的对象拆分为多条数据
* @param list 原始数据列表
* @returns 拆分后的新数据列表
*/
function splitReceiveMajor(list: any) {
const result: any = []
list.forEach((item: { receiveMajor: string | string[] }) => {
// 处理receiveMajor，确保它是一个数组
let receiveMajors: string[] = []
if (Array.isArray(item.receiveMajor)) {
receiveMajors = item.receiveMajor
}
else if (typeof item.receiveMajor === 'string' && item.receiveMajor) {
receiveMajors = [item.receiveMajor]
}
// 如果没有承接专业，至少保留一条记录
if (receiveMajors.length === 0) {
result.push({
...item,
receiveMajor: '', // 空字符串表示没有选择专业
})
return
}
// 为每个承接专业创建一条新记录
receiveMajors.forEach((major) => {
// 复制原始对象的所有属性，并将receiveMajor改为当前专业字符串
result.push({
...item,
receiveMajor: major,
})
})
})
return result
}
// 点击保存
const saveForm = (formEl: FormInstance | undefined) => {
if (!list.value.length) {
ElMessage.warning('要求任务单列表不能为空')
return
}
// 检查表格是否存在增加行信息没有完善的情况
const checkResult = useCheckList(list.value, columns.value, '任务单列表') // 检查表格
if (!checkResult) {
return
}
if (!formEl) { return }
formEl.validate((valid) => {
if (valid) {
ElMessageBox.confirm(
'确认保存吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
const params = {
...form.value,
customerPhone: form.value.customerPhone, // 委托方电话
customerSampleInfoList: list.value,
id: infoId.value,
}
console.log(params)
if (pageType.value === 'edit') { // 编辑
updateOrder(params).then(() => {
ElMessage.success('已保存')
loading.close()
getInfo()
pageType.value = 'detail'
useSetAllRowReadable(list.value) // 所有行退出编辑模式
}).catch(() => {
loading.close()
})
}
if (pageType.value === 'add') { // 新建
addOrder(params).then((res) => {
ElMessage.success('已保存')
loading.close()
form.value.orderNo = res.data.orderNo// 任务编号
infoId.value = res.data.id
getInfo()
pageType.value = 'detail'
useSetAllRowReadable(list.value) // 所有行退出编辑模式
}).catch(() => {
loading.close()
})
}
})
}
})
}
// ----------------------------------------------------------------------------------------------
// 导出流转单
const exportCirculation = () => {
const loading = ElLoading.service({
lock: true,
text: '下载中请稍后',
background: 'rgba(255, 255, 255, 0.8)',
})
exportSpread(exportParams.value).then((res) => {
const blob = new Blob([res.data])
loading.close()
exportFile(blob, '流转单.xlsx')
})
}
// 导出收发单
const exportReceiveAndDispatch = () => {
const loading = ElLoading.service({
lock: true,
text: '下载中请稍后',
background: 'rgba(255, 255, 255, 0.8)',
})
exportReceive(exportParams.value).then((res) => {
const blob = new Blob([res.data])
loading.close()
exportFile(blob, '收发单.xlsx')
})
}
const showReceiveMajorSelect = ref(false)
const selectedReceiveMajors = ref<string[]>([]) // 选中的承接专业
const allocationSampleId = ref('') // 当前分配的设备id
const allocationSampleName = ref('') // 当前分配的设备名称
const previousReceiveMajors = ref<string[]>([]) // 存储上一次的选中状态
// 点击分配
const allocation = (row: any, index: number) => {
showReceiveMajorSelect.value = true
allocationSampleId.value = row.sampleId
allocationSampleName.value = row.sampleName
const allocationSampleList = list.value.filter((item: { sampleId: any }) => (row.receiveMajor && (item.sampleId === row.sampleId))) || []
if (allocationSampleList.length) {
selectedReceiveMajors.value = allocationSampleList.map((item: { receiveMajor: any }) => item.receiveMajor)
previousReceiveMajors.value = [...selectedReceiveMajors.value]
console.log(selectedReceiveMajors.value)
}
else {
selectedReceiveMajors.value = []
previousReceiveMajors.value = []
}
}
// 多选承接专业改变
const changeMultiReceiveMajors = (current: string[]) => {
// 上一次的选中项
const prev = previousReceiveMajors.value
// 找出新增的选项（当前有，上一次没有）
const added = current.filter(item => !prev.includes(item))
// 找出删除的选项（上一次有，当前没有）
const removed = prev.filter(item => !current.includes(item))
// 处理新增的选项
if (added.length > 0) {
added.forEach((item) => {
console.log(`新增: ${item}`)
let lastIndex = -1
for (let i = list.value.length - 1; i >= 0; i--) {
if (list.value[i].sampleId === allocationSampleId.value) {
lastIndex = i
break // 找到第一个（即数组中最后一个）就退出循环
}
}
if (lastIndex !== -1) {
if (!list.value[lastIndex].receiveMajor) {
list.value.splice(lastIndex, 1, { ...list.value[lastIndex], receiveMajor: item })
}
else {
list.value.splice(lastIndex + 1, 0, { ...list.value[lastIndex], id: '', receiveMajor: item })
}
}
})
}
// 处理删除的选项
if (removed.length > 0) {
removed.forEach((item) => {
console.log(`删除: ${item}`)
const index = list.value.findIndex((e: { sampleId: string; receiveMajor: string }) => e.sampleId === allocationSampleId.value && item === e.receiveMajor)
list.value.splice(index, 1)
})
}
// 更新上一次的选中状态，用于下一次对比
previousReceiveMajors.value = [...current]
}
// --------------------------------------------------------------------------------------
// 获取详细信息
function getInfo() {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
getOrderDetail({ id: infoId.value }).then((res) => {
form.value = res.data.data
exportParams.value = res.data.data
form.value.isUrgent = `${res.data.data.isUrgent}` // 是否加急
list.value = res.data.data.customerSampleInfoList.map((item: { editable: Boolean; sampleStatus: string | number; onSiteCheckTime: string }) => {
return {
...item,
editable: pageType.value !== 'detail',
sampleStatusName: pageType.value === 'detail' && `${item.sampleStatus}` ? sampleStatusMap.value[item.sampleStatus] : item.sampleStatus,
}
})
if (res.data.data.onSiteCheckTime) {
onSiteCheckTimeRange.value = res.data.data.onSiteCheckTime.split(',')
}
loading.close()
})
}
// 编辑
const edit = () => {
pageType.value = 'edit'
useSetAllRowReadable(list.value, true) // 所有行退出编辑模式
showReceiveMajorSelect.value = false
}
const isFold = ref(true) // 是否展开状态
// 点击展开折叠切换
const trigger = () => {
isFold.value = !isFold.value
}
// 点击业务类型
const handleBusinessType = () => {
ElMessage.info('敬请期待')
}
// 点击检测分发
const distribute = () => {
ElMessage.info('敬请期待')
}
// =============================================================================
watch(() => pageType.value, (newValue) => {
if (newValue === 'detail') {
const index = columns.value.findIndex(item => item.value === 'sampleStatus')
if (index !== -1) {
columns.value[index].value = 'sampleStatusName'
}
}
else {
const index = columns.value.findIndex(item => item.value === 'sampleStatusName')
if (index !== -1) {
columns.value[index].value = 'sampleStatus'
}
}
})
onMounted(async () => {
getDict().then(() => {
// 非添加页面获取详情
if (pageType.value === 'edit' || pageType.value === 'detail') {
getInfo()
}
else { // 新建
form.value.createUserId = user.id// 创建人id
form.value.createUserName = user.name // 创建人
form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 创建时间
}
isFold.value = pageType.value === 'detail' // 详情折叠，编辑新建展开
})
})
</script>
<template>
<div class="order-detail">
<app-container>
<detail-page :title="`委托单(${textMap[pageType]})`">
<template #btns>
<el-button v-if="pageType === 'detail'" type="primary" @click="exportCirculation">
导出流转单
</el-button>
<el-button v-if="pageType === 'detail'" type="primary" @click="exportReceiveAndDispatch">
导出收发单
</el-button>
<el-button v-if="pageType === 'detail'" type="primary" @click="edit">
编辑
</el-button>
<!-- <el-button v-if="pageType === 'detail'" type="primary" @click="trigger">
展开/折叠
</el-button> -->
<el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
保存
</el-button>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
<el-form
ref="ruleFormRef"
:model="form"
:label-width="130"
label-position="right"
:rules="rules"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="委托单编号:" prop="orderNo">
<el-input
v-model="form.orderNo"
:placeholder="pageType === 'detail' ? '' : '系统自动生成'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="委托方代码" prop="customerNo">
<el-input
v-model="form.customerNo"
:placeholder="pageType === 'detail' ? '' : '请选择'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
>
<template v-if="pageType !== 'detail'" #append>
<el-button size="small" @click="selectCustomer">
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="委托方名称:" prop="customerName">
<el-input
v-model="form.customerName"
:placeholder="pageType === 'detail' ? ' ' : '委托方名称'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邮政编码:" prop="postalCode">
<el-input
v-model="form.postalCode"
:placeholder="pageType === 'detail' ? ' ' : '邮政编码'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="通信地址:" porps="customerAddress">
<el-input
v-model="form.customerAddress"
type="textarea"
:placeholder="pageType === 'detail' ? ' ' : '通信地址'"
autosize
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系人:" prop="deliverer">
<el-input
v-model="form.deliverer"
:placeholder="pageType === 'detail' ? ' ' : '联系人'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话:" prop="customerPhone">
<el-input
v-model="form.customerPhone"
:placeholder="pageType === 'detail' ? ' ' : '联系电话'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="证书单位:" prop="certCompany">
<el-input
v-model="form.certCompany"
type="textarea"
:placeholder="pageType === 'detail' ? ' ' : '证书单位'"
autosize
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="证书地址:" prop="certAddress">
<el-input
v-model="form.certAddress"
type="textarea"
:placeholder="pageType === 'detail' ? ' ' : '证书地址'"
autosize
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否加急:" prop="isUrgent">
<el-select v-model="form.isUrgent" :placeholder="pageType === 'detail' ? '' : '请选择是否加急'" :disabled="pageType === 'detail'" class="full-width-input">
<el-option
v-for="i in isUrgentList"
:key="i.value"
:label="i.name"
:value="i.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定地点:" prop="measureCompany">
<el-select v-model="form.measureCompany" :placeholder="pageType === 'detail' ? '' : '请选择检定地点'" :disabled="pageType === 'detail'" class="full-width-input">
<el-option
v-for="i in measureLocationList"
:key="i.value"
:label="i.name"
:value="i.name"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="保障类型:" prop="protectType">
<el-select v-model="form.protectType" :placeholder="pageType === 'detail' ? '' : '请选择保障类型'" :disabled="pageType === 'detail'" class="full-width-input">
<el-option
v-for="i in guaranteeList"
:key="i.value"
:label="i.name"
:value="i.name"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="送检时间:" prop="undertakeTime">
<el-date-picker
v-model="form.undertakeTime"
type="date"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="送检时间"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="完成时间:" prop="requireOverTime">
<el-date-picker
v-model="form.requireOverTime"
type="datetime"
class="full-width-input"
:placeholder="pageType === 'detail' ? '' : '请输入完成时间'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="仪器收发员:" prop="undertakerName">
<el-input
v-model="form.undertakerName"
:placeholder="pageType === 'detail' ? '' : '请输入仪器收发员'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="创建人:">
<el-input v-model="form.createUserName" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间:">
<el-date-picker
v-model="form.createTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-page>
<!-- 表格 -->
<detail-block title="任务单列表">
<template #btns>
<div style="display: inline-flex; align-items: center;">
<span v-if="showReceiveMajorSelect && pageType !== 'detail'" style="font-size: 13px;font-weight: 600;margin-right: 8px;">{{ allocationSampleName }}</span>
<!-- 承接专业多选选择器 -->
<el-select
v-if="showReceiveMajorSelect && pageType !== 'detail'"
v-model="selectedReceiveMajors"
multiple
placeholder="请选择承接专业"
style="width: 400px;margin-right: 20px;"
@change="changeMultiReceiveMajors"
>
<el-option
v-for="major in receiveMajorList"
:key="major.value"
:label="major.name"
:value="major.name"
/>
</el-select>
<el-button v-if="pageType !== 'detail' && proxy.hasPerm('/order/businessType')" type="primary" @click="handleBusinessType">
业务类型
</el-button>
<el-button v-if="pageType !== 'detail' && proxy.hasPerm('/order/distribute')" type="primary" @click="distribute">
检测分发
</el-button>
<el-button v-if="pageType !== 'detail'" type="primary" @click="multiAdd">
从受检设备中添加
</el-button>
<el-button v-if="pageType !== 'detail'" type="info" @click="delRow">
删除行
</el-button>
</div>
</template>
<el-table
:data="list"
border
style="width: 100%;"
max-height="600"
@selection-change="handleSelectionChange"
>
<el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in columns"
:key="item.value"
:prop="item.value"
:label="item.text"
:width="item.width"
align="center"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<!-- 附件、特殊要求、外观检查、备注 -->
<el-input
v-if="scope.row.editable && (item.value === 'appendixDescn' || item.value === 'appearanceInspect' || item.value === 'specialRequire' || item.value === 'remark')"
v-model="scope.row[item.value]"
:placeholder="item.text"
type="textarea"
autosize
/>
<!-- 仪器数量 -->
<el-input-number
v-if="scope.row.editable && item.value === 'measureContent'"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="input"
:min="0"
:step="1"
:precision="0"
/>
<!-- 计量价格（元） -->
<el-input-number
v-if="scope.row.editable && item.value === 'measurePrice'"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="input"
:min="0"
/>
<!-- 业务类型 -->
<el-select
v-if="scope.row.editable && item.value === 'measureCategory'"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="short-input"
filterable
clearable
>
<el-option v-for="item in businessTypeList" :key="item.id" :label="item.name" :value="item.name" />
</el-select>
<!-- 检定状态 -->
<el-select
v-if="scope.row.editable && item.value === 'sampleStatus' && pageType !== 'detail'"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="short-input"
filterable
clearable
>
<el-option v-for="item in sampleStatusList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 是否验收、是否现场 -->
<el-select
v-if="scope.row.editable && (item.value === 'onSiteCheck' || item.value === 'sfys')"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="short-input"
filterable
clearable
style="width: 100px;"
>
<el-option v-for="item in ['是', '否']" :key="item" :label="item" :value="item" />
</el-select>
<!-- 完成时间 -->
<el-date-picker
v-if="scope.row.editable && (item.value === 'measureCompleteTime')"
v-model="scope.row[item.value]"
:placeholder="item.text"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 130px;"
/>
<!-- 承接专业 -->
<!-- <el-select
v-if="scope.row.editable && (item.value === 'receiveMajor') && pageType === 'add'"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="short-input"
clearable
multiple
>
<el-option v-for="item in receiveMajorList" :key="item.id" :label="item.name" :value="item.name" />
</el-select>
<el-select
v-if="scope.row.editable && (item.value === 'receiveMajor') && pageType === 'edit'"
v-model="scope.row[item.value]"
:placeholder="item.text"
class="short-input"
clearable
>
<el-option v-for="item in receiveMajorList" :key="item.id" :label="item.name" :value="item.name" />
</el-select> -->
<span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
</template>
</el-table-column>
<el-table-column v-if="pageType !== 'detail'" label="操作" width="80" align="center" fixed="right">
<template #default="scope">
<el-button type="text" size="small" @click="allocation(scope.row, scope.$index)">
分配
</el-button>
</template>
</el-table-column>
</el-table>
</detail-block>
<!-- 选择委托方组件 -->
<select-customer-dialog ref="selectCustomerRef" @confirm="clickConfirmCustomer" />
<!-- 选择受检设备组件 -->
<select-test-equipment ref="selectTestEquipmentRef" :is-multi="isMulti" @confirm="clickConfirmTestEquipment" />
</app-container>
</div>
</template>
<style lang="scss" scoped>
.customer-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 700;
margin: 24px 0;
.img {
width: 32px;
height: 32px;
margin-right: 14px;
vertical-align: middle;
}
}
.customer-info {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
margin: 40px 0;
.content {
display: flex;
font-size: 14px;
.title {
font-weight: 600;
color: #000;
}
.value {
margin-left: 10px;
}
}
}
.selectBtn {
position: absolute;
top: 0;
right: 0;
}
.receipt-signature {
display: flex;
justify-content: flex-end;
margin-right: 300px;
// padding: 50px 250px 50px 150px;
padding: 50px;
font-size: 28px;
color: #000;
font-weight: 600;
.content {
display: flex;
position: relative;
.img {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.img-name {
position: absolute;
left: 220px;
top: -30px;
z-index: 1;
}
.title {
margin-right: 32px;
letter-spacing: 6px;
}
.deliverer-time {
display: flex;
flex-direction: column;
.text-title {
letter-spacing: 2px;
}
.time {
margin-top: 30px;
letter-spacing: 2px;
}
.text {
font-size: 24px;
font-weight: 500;
margin-left: 10px;
}
}
}
}
</style>
<style lang="scss">
.order-detail {
.el-radio__label {
display: block !important;
}
}
</style>
