GitBucket
Newer
<script lang="ts" setup name="standardListAdd">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import type { IOptions, IStandardList } from '../../standard_interface'
import laboratoryDialog from './laboratoryDialog.vue'
import { getStaffList } from '@/api/measure/person'
import { getTypeSelect } from '@/api/system/price'
import { getStandardListDetail, getUsersDept } from '@/api/device/standard'
import { UploadFile } from '@/api/measure/file'
import personListDialog from '@/views/measure/person/components/personListDialog.vue'
const props = defineProps({
infoId: { // 详情id
type: String,
default: '0',
},
buttonType: { // 从列表的哪个按钮进入的
type: String,
default: '',
},
})
const emit = defineEmits(['close', 'setData']) // 关闭
const ruleFormRef = ref<FormInstance>()
// 逻辑代码
const formInline = ref({
assessDate: '', // 考核日期
assessmentUnit: '', // 考核单位
category: '', // 类别
categoryName: '', // 类别名称
constructionStandardProject: '', // 建标项目
constructionStandardUnitName: '', // 建标单位名称
contactInfo: '', // 联系方式
createTime: '', // 创建时间
createUser: '', // 创建人
id: '', // 主键
isDel: '', // 删除标记
laboratoryOwner: '', // 实验室负责人
laboratoryOwnerContact: '', // 联系方式
laboratoryOwnerName: '', // 实验室负责人名字
managerState: '', // 管理状态
managerStateName: '', // 管理状态名称
measureMajor: '', // 计量专业
fileList: [], // 文件列表
measureMajorName: '', // 计量专业名称
mesureRange: '', // 测量范围
organizeNo: '', // 组织机构代码
preparationDate: '', // 筹建日期
projectNo: '', // 项目编号
remark: '', // 备注
standardHumidity: '', // 标准湿度
standardLaboratory: '', // 标准所在实验室
standardLaboratoryName: '', // 标准所在实验室名称
standardLevel: '', // 标准等级
standardLevelName: '', // 标准等级名称
standardName: '', // 标准名称
standardNo: '', // 标准代码
standardOwner: '', // 标准负责人
standardOwnerName: '', // 标准负责人名称
standardTemperature: '', // 标准温度
totalInvestment: '', // 投资总额
transmitRange: '', // 传递范围
transmitRangeName: '', // 传递范围名称
uncertainty: '', // 不确定度
updateTime: '', // 更新时间
version: '', // 版本号
})
const checkTypeOptions = ref<IOptions[]>([])
const standardOwnerOptions = ref<IOptions[]>([]) // 标准负责人
const fileList = ref<UploadUserFile[]>([]) // 文件对象数组
const measureMajorList = ref<IOptions[]>([]) // 计量专业下拉框
const standardManagerStateList = ref<IOptions[]>([]) // 管理状态下拉框
const standardLevelList = ref<IOptions[]>([]) // 标准等级下拉框
const transmitRangeList = ref<IOptions[]>([]) // 传递范围下拉框
// 标准所在部门下拉框
const standardUsersDeptList = ref<IOptions[]>([])
// 获取下拉框
const getSelectList = (code: string) => {
getTypeSelect(code).then((res) => {
if (code === 'measureMajor') {
measureMajorList.value = res.data
}
else if (code === 'standardManagerState') {
standardManagerStateList.value = res.data
}
else if (code === 'standardLevel') {
standardLevelList.value = res.data
}
else if (code === 'transmitRange') {
transmitRangeList.value = res.data
}
else if (code === 'standardCategory') {
checkTypeOptions.value = res.data
}
})
}
getSelectList('measureMajor') // 获取计量专业下拉框
getSelectList('standardManagerState') // 获取管理状态下拉框
getSelectList('standardLevel') // 获取标准等级下拉框
getSelectList('transmitRange') // 获取传递范围下拉框
getSelectList('standardCategory') // 获取类别下拉框
// 获取部门信息参数
const DeptParams = ref({
createEndTime: '',
createstartTime: '',
director: '',
meterMajor: '',
organizeName: '',
organizeNo: '',
organizeType: '2',
pdeptId: null,
offset: 1,
limit: 999999,
})
// 获取部门信息
getUsersDept(DeptParams.value).then((res) => {
standardUsersDeptList.value = res.data.rows
})
// 获取到标准负责人数组
const getStandardOwnerOptions = () => {
const params = {
staffNo: '', // 人员编号
name: '', // 姓名
deptId: '', // 工作部门
major: '', // 计量专业
verifierCertificateNo: '', // 证书号
certificateStatus: '', // 证书状态
limit: 100000,
offset: 1,
}
getStaffList(params).then((res) => {
standardOwnerOptions.value = res.data.records
})
}
getStandardOwnerOptions()
// 关闭
const close = () => {
emit('close')
}
const rules = ref({
standardName: [{ required: true, message: '标准名称不能为空', trigger: ['blur', 'change'] }],
projectNo: [{ required: true, message: '项目编号不能为空', trigger: ['blur', 'change'] }],
constructionStandardProject: [{ required: true, message: '建标项目不能为空', trigger: ['blur', 'change'] }],
organizeNo: [{ required: true, message: '组织机构代码不能为空', trigger: ['blur', 'change'] }],
constructionStandardUnitName: [{ required: true, message: '建标单位名称不能为空', trigger: ['blur', 'change'] }],
standardOwnerName: [{ required: true, message: '标准负责人不能为空', trigger: ['blur', 'change'] }],
contactInfo: [{ required: true, message: '联系方式不能为空', trigger: ['blur', 'change'] }],
category: [{ required: true, message: '类 别不能为空', trigger: ['blur', 'change'] }],
standardLevel: [{ required: true, message: '标准等级不能为空', trigger: ['blur', 'change'] }],
transmitRange: [{ required: true, message: '传递范围不能为空', trigger: ['blur', 'change'] }],
preparationDate: [{ required: true, message: '筹建日期不能为空', trigger: ['blur', 'change'] }],
managerState: [{ required: true, message: '管理状态不能为空', trigger: ['blur', 'change'] }],
measureMajor: [{ required: true, message: '计量专业不能为空', trigger: ['blur', 'change'] }],
assessmentUnit: [{ required: true, message: '考核单位不能为空', trigger: ['blur', 'change'] }],
assessDate: [{ required: true, message: '考核日期不能为空', trigger: ['blur', 'change'] }],
uncertainty: [{ required: true, message: '不确定度不能为空', trigger: ['blur', 'change'] }],
mesureRange: [{ required: true, message: '测量范围不能为空', trigger: ['blur', 'change'] }],
standardTemperature: [{ required: true, message: '标准温度不能为空', trigger: ['blur', 'change'] },
{ pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '标准温度只能为数字', trigger: ['blur', 'change'] }],
standardHumidity: [{ required: true, message: '标准湿度不能为空', trigger: ['blur', 'change'] },
{ pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '标准湿度只能为数字', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 标准实验室发生改变row类型
interface rowReturn {
phone: string
director: string
name: string
organizeName: string
id: string
deptId: string
}
// 实验室ref
const laboratorydialog = ref()
// 标准实验室点击
const changeDeptList = () => {
laboratorydialog.value.initDialog()
}
// 标准实验室清空时
const clearDeptList = () => {
formInline.value.laboratoryOwnerContact = ''
formInline.value.laboratoryOwner = ''
}
// 获取detail信息
const getInfo = () => {
getStandardListDetail({ id: props.infoId }).then((res) => {
Object.keys(res.data).map((item) => {
if (typeof (res.data[item]) === 'number') {
res.data[item] = res.data[item].toString()
}
})
formInline.value = res.data
})
}
if (props.buttonType !== 'add') {
getInfo()
}
// 计量人员组件
const personListdialog = ref()
// 点击选择负责人函数
const personClick = () => {
personListdialog.value.initDialog()
}
// 测试数据
const simulateObject = {
data: dayjs(`${new Date()}`).format('YYYY.MM.DD'), // 有效日期
certificateNo: '199926465422', // 证书编号
authorityOfIssue: 'xxx公司', // 发证单位
authorityOfDate: dayjs(`${new Date()}`).format('YYYY.MM.DD'), // 发证日期
}
// 选择负责人回调函数
const personListAdd = (data: rowReturn) => {
formInline.value.standardOwner = data.id
formInline.value.standardOwnerName = data.name
}
// 选择完科室的回调函数
const laboratoryListAdd = (data: rowReturn) => {
formInline.value.standardLaboratory = data.deptId
formInline.value.standardLaboratoryName = data.organizeName
formInline.value.laboratoryOwner = data.director
formInline.value.laboratoryOwnerContact = data.phone
}
watch(() => formInline.value, (newVal) => {
// 变化后存储
emit('setData', newVal)
},
{ deep: true, immediate: true })
// 提交
const submitForm = () => {
return ruleFormRef.value
}
defineExpose({ submitForm })
</script>
<template>
<app-container>
<div class="info-content">
<el-form
id="form"
ref="ruleFormRef"
:model="formInline"
label-position="right"
label-width="auto"
:rules="rules"
>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="标准代码:">
<el-input
v-model.trim="formInline.standardNo"
:placeholder="buttonType === 'detail' ? '' : '系统编号，自动生成'"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准名称:" prop="standardName">
<el-input
v-model.trim="formInline.standardName"
:placeholder="buttonType === 'detail' ? '' : '请输入标准名称'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目编号:" prop="projectNo">
<el-input
v-model.trim="formInline.projectNo"
:placeholder="buttonType === 'detail' ? '' : '请输入项目编号'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="建标项目:" prop="constructionStandardProject">
<el-input
v-model.trim="formInline.constructionStandardProject"
:placeholder="buttonType === 'detail' ? '' : '请输入建标项目'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="组织机构代码:" prop="organizeNo">
<el-input
v-model.trim="formInline.organizeNo"
:placeholder="buttonType === 'detail' ? '' : '请输入组织机构代码'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="建标单位名称:"
prop="constructionStandardUnitName"
>
<el-input
v-model.trim="formInline.constructionStandardUnitName"
:placeholder="buttonType === 'detail' ? '' : '请输入建标单位名称'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准负责人:" prop="standardOwnerName">
<el-input
v-model.trim="formInline.standardOwnerName"
:placeholder="buttonType === 'detail' ? '' : '请选择标准负责人'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
>
<template v-if="buttonType !== 'detail'" #append>
<el-button
size="small"
@click="personClick"
>
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系方式:" prop="contactInfo">
<el-input
v-model.trim="formInline.contactInfo"
:placeholder="buttonType === 'detail' ? '' : '请输入联系方式'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="类 别:" prop="category">
<el-select
v-model="formInline.category"
clearable
:placeholder="buttonType === 'detail' ? '' : '请选择类别'"
size="default"
:disabled="buttonType === 'detail'"
style="width: 100%;"
>
<el-option
v-for="item in checkTypeOptions"
:key="item.id"
:label="item.name"
:value="item.value"
clearable
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准等级:" prop="standardLevel">
<el-select
v-model.trim="formInline.standardLevel"
clearable
:placeholder="buttonType === 'detail' ? '' : '请选择标准等级'"
size="default"
:disabled="buttonType === 'detail'"
style="width: 100%;"
>
<el-option
v-for="item in standardLevelList"
:key="item.id"
:label="item.name"
:value="item.value"
clearable
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="传递范围:" prop="transmitRange">
<el-select
v-model.trim="formInline.transmitRange"
clearable
:placeholder="buttonType === 'detail' ? '' : '请选择传递范围'"
size="default"
:disabled="buttonType === 'detail'"
style="width: 100%;"
>
<el-option
v-for="item in transmitRangeList"
:key="item.id"
:label="item.name"
clearable
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="投资总额:">
<el-input
v-model.trim="formInline.totalInvestment"
:placeholder="buttonType === 'detail' ? '' : '请输入投资总额'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="筹建日期:" prop="preparationDate">
<el-date-picker
v-model="formInline.preparationDate"
type="date"
:placeholder="buttonType === 'detail' ? '' : '请选择筹建日期'"
style="width: 100%;"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:disabled="buttonType === 'detail'"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准科室:">
<el-input
v-model.trim="formInline.standardLaboratoryName"
:placeholder="buttonType === 'detail' ? '' : '请选择标准科室'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
>
<template v-if="buttonType !== 'detail'" #append>
<el-button
size="small"
@click="changeDeptList"
>
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="科室负责人:">
<el-input
v-model.trim="formInline.laboratoryOwner"
:placeholder="buttonType === 'detail' ? '' : '请输入科室负责人'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系方式:">
<el-input
v-model.trim="formInline.laboratoryOwnerContact"
:placeholder="buttonType === 'detail' ? '' : '请输入联系方式'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="管理状态:" prop="managerState">
<el-select
v-model.trim="formInline.managerState"
clearable
:placeholder="buttonType === 'detail' ? '' : '请选择管理状态'"
size="default"
:disabled="buttonType === 'detail'"
style="width: 100%;"
>
<el-option
v-for="item in standardManagerStateList"
:key="item.id"
:label="item.name"
:value="item.value"
clearable
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="计量专业:" prop="measureMajor">
<el-select
v-model.trim="formInline.measureMajor"
clearable
:placeholder="buttonType === 'detail' ? '' : '请选择计量专业'"
size="default"
:disabled="buttonType === 'detail'"
style="width: 100%;"
>
<el-option
v-for="item in measureMajorList"
:key="item.id"
:label="item.name"
:value="item.value"
clearable
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="考核单位:" prop="assessmentUnit">
<el-input
v-model.trim="formInline.assessmentUnit"
:placeholder="buttonType === 'detail' ? '' : '请输入考核单位'"
:disabled="buttonType === 'detail'"
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="考核日期:" prop="assessDate">
<el-date-picker
v-model="formInline.assessDate"
type="date"
style="width: 100%;"
:placeholder="buttonType === 'detail' ? '' : '请选择考核日期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:disabled="buttonType === 'detail'"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="12">
<el-form-item label="不确定度:" prop="uncertainty">
<el-input
v-model.trim="formInline.uncertainty"
:placeholder="buttonType === 'detail' ? '' : '请输入不确定度'"
:disabled="buttonType === 'detail'"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="12">
<el-form-item label="测量范围:" prop="mesureRange">
<el-input
v-model.trim="formInline.mesureRange"
:placeholder="buttonType === 'detail' ? '' : '请输入测量范围'"
:disabled="buttonType === 'detail'"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="2">
<el-form-item label="环境条件" />
</el-col>
<el-col :span="6">
<el-form-item label="标准温度(℃):" prop="standardTemperature">
<el-input
v-model.trim="formInline.standardTemperature"
:placeholder="buttonType === 'detail' ? '' : '请输入标准温度(℃)'"
:disabled="buttonType === 'detail'"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准湿度(%):" prop="standardHumidity">
<el-input
v-model.trim="formInline.standardHumidity"
clearable
:placeholder="buttonType === 'detail' ? '' : '请输入标准湿度(%)'"
:disabled="buttonType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="有效日期:">
<el-date-picker
v-model="simulateObject.data"
type="date"
style="width: 100%;"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证书编号:">
<el-input
v-model.trim="simulateObject.certificateNo"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="发证单位:">
<el-input
v-model.trim="simulateObject.authorityOfIssue"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="发证日期:">
<el-date-picker
v-model="simulateObject.authorityOfDate"
type="date"
style="width: 100%;"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="24">
<el-col :span="3">
<el-form-item label="附件:">
<show-photo :minio-file-name="formInline.minioFileName" />
<input v-show="buttonType === ''" ref="fileRef" type="file" @change="onFileChange">
<el-button type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': formInline.minioFileName === '' ? '0px' : '24px' }" @click="upload">
{{ formInline.minioFileName === '' ? '上传' : '更换附件' }}
</el-button>
</el-form-item>
</el-col>
</el-row> -->
<el-row :gutter="24" class="marg">
<el-col :span="12">
<el-form-item label="备注:">
<el-input
v-model.trim="formInline.remark"
:placeholder="buttonType === 'detail' ? '' : '请输入备注'"
:disabled="buttonType === 'detail'"
clearable
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</app-container>
<person-list-dialog ref="personListdialog" @add="personListAdd" />
<laboratory-dialog ref="laboratorydialog" @add="laboratoryListAdd" />
</template>
<style lang="scss" scoped>
// 样式
.top-info {
width: 100%;
height: 50px;
padding-right: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
background-color: #fff;
.title {
width: 75%;
text-align: center;
}
}
.info-content {
padding: 15px;
border-radius: 10px;
background-color: #fff;
}
</style>