| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div v-show="!cableConfigShow&&!auxiliaryShow"> |
| | | <div style="display: flex;justify-content: space-between;align-items:center;"> |
| | | <div>委托单信息</div> |
| | | <div> |
| | | <el-cascader |
| | | v-model="addObj.quarterItemId" |
| | | :disabled="active>1" |
| | | :options="quarterItemOptions" |
| | | size="small" |
| | | style="width: 380px" |
| | | @focus="getQuarterOnOrderList"></el-cascader> |
| | | <el-select v-show="active==1" v-model="template" placeholder="下单模板" size="small" |
| | | @change="selectInsOrderTemplateById"> |
| | | <el-option v-for="(a, ai) in templates" :key="ai" :label="a.name" :value="a.id"> |
| | | <div style="display: flex; align-items: center; justify-content: space-between;"> |
| | | <span>{{ a.name }}</span> |
| | | <i class="el-icon-delete" |
| | | style="color: #66b1ff; font-size: 16px; cursor: pointer;" |
| | | @click.stop="handleDelete(a)"> |
| | | </i> |
| | | </div> |
| | | </el-option> |
| | | </el-select> |
| | | <el-button v-show="active==1" size="small" @click="templateDia=true"> |
| | | <span style="color: #3A7BFA;">保存模板</span> |
| | | </el-button> |
| | | <el-button v-if="active==1&&addObj.sampleType!=undefined&&(addObj.sampleType.indexOf('电缆')>-1 ||addObj.sampleType.indexOf('综合')>-1)" size="small" type="primary" @click="openCableConfig">电缆配置</el-button> |
| | | <el-button v-if="active==1&&addObj.sampleType!=undefined&&addObj.sampleType.indexOf('电缆')>-1" size="small" type="primary" @click="openAuxiliaryCore">辅助线芯配置</el-button> |
| | | <el-button v-show="active==1||(tabIndex==4&&active==2)" :loading="saveLoad" size="small" type="primary" @click="save">提交</el-button> |
| | | <!-- 审核 --> |
| | | <el-button v-show="active==3" :disabled="saveLoad" :loading="saveLoad" size="small" |
| | | @click="upInsOrderOfState(2)">不通过</el-button> |
| | | <el-button v-show="active==3" :loading="saveLoad" size="small" type="primary" |
| | | @click="upInsOrderOfState(1)">通过</el-button> |
| | | <el-button size="small" @click="goBack"> |
| | | <span style="color: #3A7BFA;">返回</span> |
| | | </el-button> |
| | | </div> |
| | | <div v-show="!cableConfigShow&&!auxiliaryShow" class="order-header"> |
| | | <span class="order-header__title">委托单信息</span> |
| | | <div class="order-header__actions"> |
| | | <!-- <el-cascader--> |
| | | <!-- v-model="addObj.quarterItemId"--> |
| | | <!-- :disabled="active>1"--> |
| | | <!-- :options="quarterItemOptions"--> |
| | | <!-- placeholder="请选择季度"--> |
| | | <!-- size="small"--> |
| | | <!-- class="order-header__quarter"--> |
| | | <!-- @focus="getQuarterOnOrderList"></el-cascader>--> |
| | | <el-select v-show="active==1" v-model="template" placeholder="下单模板" size="small" |
| | | class="order-header__template" |
| | | @change="selectInsOrderTemplateById"> |
| | | <el-option v-for="(a, ai) in templates" :key="ai" :label="a.name" :value="a.id"> |
| | | <div style="display: flex; align-items: center; justify-content: space-between;"> |
| | | <span>{{ a.name }}</span> |
| | | <i class="el-icon-delete" |
| | | style="color: #66b1ff; font-size: 16px; cursor: pointer;" |
| | | @click.stop="handleDelete(a)"> |
| | | </i> |
| | | </div> |
| | | </el-option> |
| | | </el-select> |
| | | <el-button v-show="active==1" size="small" @click="templateDia=true">保存模板</el-button> |
| | | <el-button v-if="active==1&&addObj.sampleType!=undefined&&(addObj.sampleType.indexOf('电缆')>-1 ||addObj.sampleType.indexOf('综合')>-1)" size="small" type="primary" plain @click="openCableConfig">电缆配置</el-button> |
| | | <el-button v-if="active==1&&addObj.sampleType!=undefined&&addObj.sampleType.indexOf('电缆')>-1" size="small" type="primary" plain @click="openAuxiliaryCore">辅助线芯配置</el-button> |
| | | <el-button v-show="active==1||(tabIndex==4&&active==2)" :loading="saveLoad" size="small" type="primary" @click="save">提交</el-button> |
| | | <!-- 审核 --> |
| | | <el-button v-show="active==3" :disabled="saveLoad" :loading="saveLoad" size="small" |
| | | @click="upInsOrderOfState(2)">不通过</el-button> |
| | | <el-button v-show="active==3" :loading="saveLoad" size="small" type="primary" |
| | | @click="upInsOrderOfState(1)">通过</el-button> |
| | | <el-button size="small" @click="goBack">返回</el-button> |
| | | </div> |
| | | </div> |
| | | <div v-show="!cableConfigShow&&!auxiliaryShow" style="margin-top: 10px"> |
| | | <div class="search"> |
| | | <el-form ref="newJuOrder" :inline="true" :model="addObj" label-width="108px" label-position="right"> |
| | | <el-row> |
| | | <el-col :span="6"><el-form-item label="产品名称"><el-input v-model="addObj.sample" disabled size="small"><template slot="append"><el-button :disabled="active>1" icon="el-icon-search" @click="selectStandardTree = true" /></template></el-input></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="生产单位"><el-input v-model="addObj.production" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="委托单位"><el-input v-model="addObj.company" disabled size="small"><template slot="append"><el-button :disabled="active>1" icon="el-icon-search" @click="openCompanyList" /></template></el-input></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="检验类别"><el-select v-model="addObj.orderType" :disabled="active>1" size="small"><el-option v-for="item in dict.type.check_type1" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item></el-col> |
| | | </el-row> |
| | | <el-row v-if="addObj.standardTreeId || boundTemplateList.length"> |
| | | <el-col :span="24"> |
| | | <div v-show="!cableConfigShow&&!auxiliaryShow" class="order-body"> |
| | | <el-card shadow="never" class="order-card"> |
| | | <el-form ref="newJuOrder" :model="addObj" size="small" label-width="108px" label-position="right"> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="6"><el-form-item label="检测依据"><el-input v-model="addObj.sample" disabled size="small"><template slot="append"><el-button :disabled="active>1" icon="el-icon-search" @click="selectStandardTree = true" /></template></el-input></el-form-item></el-col> |
| | | <el-col :span="18"> |
| | | <el-form-item label="原始记录模板"> |
| | | <div v-loading="templateBindingLoading" class="template-tag-list"> |
| | | <el-tag v-for="item in boundTemplateList" :key="item.templateId" size="small" effect="plain">{{ item.name }}</el-tag> |
| | | <el-tag v-for="(item, index) in boundTemplateList" :key="item.templateId" :closable="active==1" size="small" effect="plain" @close="removeBoundTemplate(index)">{{ item.name }}</el-tag> |
| | | <span v-if="!templateBindingLoading && boundTemplateList.length === 0" class="empty-template-text">暂未绑定原始记录模板</span> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="6"><el-form-item label="样品名称"><el-input v-model="addObj.sampleView" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="生产单位"><el-input v-model="addObj.production" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="委托单位"><el-input v-model="addObj.company" disabled size="small"><template slot="append"><el-button :disabled="active>1" icon="el-icon-search" @click="openCompanyList" /></template></el-input></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="检验类别"><el-select v-model="addObj.orderType" :disabled="active>1" size="small"><el-option v-for="item in dict.type.check_type1" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item></el-col> |
| | | </el-row> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="6"><el-form-item label="样品数量"><el-input v-model="addObj.testQuantity" :disabled="active>1" placeholder="如:2桶、500mL" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="样品编号"><el-input v-model="sampleCode" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="样品外观"><el-input v-model="addObj.sampleStatus" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="送样人"><el-input v-model="addObj.prepareUser" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="6"><el-form-item label="生产日期"><el-date-picker v-model="addObj.productionDate" type="date" value-format="yyyy-MM-dd" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="生产批号"><el-input v-model="addObj.productionBatch" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="送样日期"><el-date-picker v-model="addObj.sampleDate" type="date" value-format="yyyy-MM-dd" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | <el-col :span="6"><el-form-item label="联系方式"><el-input v-model="addObj.phone" :disabled="active>1" size="small" /></el-form-item></el-col> |
| | | </el-row> |
| | | <el-row><el-col :span="12"><el-form-item label="备注"><el-input v-model="addObj.remark" :disabled="active>1" size="small" /></el-form-item></el-col></el-row> |
| | | <el-row :gutter="16"><el-col :span="12"><el-form-item label="备注"><el-input v-model="addObj.remark" :disabled="active>1" size="small" /></el-form-item></el-col></el-row> |
| | | </el-form> |
| | | <el-form v-if="false" ref="addObj" :inline="true" :model="addObj" :rules="addObjRules" label-width="108px" label-position="right"> |
| | | <el-row> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </div> |
| | | </el-card> |
| | | <div v-if="false"> |
| | | <div style="display: flex;justify-content: space-between;background-color: #F5F7FB;margin-bottom: 6px"> |
| | | <div v-if="active==1"> |
| | |
| | | { required: true, message: '请选择紧急程度', trigger: 'change' } |
| | | ], |
| | | sample: [ |
| | | { required: true, message: '请选择样品名称', trigger: 'change' } |
| | | { required: true, message: '请选择检测依据', trigger: 'change' } |
| | | ], |
| | | sampleNum: [ |
| | | { required: true, message: '请填写样品数量', trigger: 'blur' } |
| | |
| | | save() { |
| | | if (this.addObj.standardTreeId) { |
| | | if (!this.addObj.sample || !this.addObj.company || !this.addObj.orderType || !this.addObj.testQuantity) { |
| | | this.$message.error('请填写产品名称、委托单位、检验类别和样品数量'); |
| | | this.$message.error('请填写检测依据、委托单位、检验类别和样品数量'); |
| | | return; |
| | | } |
| | | this.saveData([]); |
| | |
| | | delete newJuOrder.temperature |
| | | delete newJuOrder.humidity |
| | | const payload = this.addObj.standardTreeId |
| | | ? { insOrder: newJuOrder, standardTreeId: this.addObj.standardTreeId, sampleCode: this.sampleCode } |
| | | ? { |
| | | insOrder: newJuOrder, |
| | | standardTreeId: this.addObj.standardTreeId, |
| | | sampleCode: this.sampleCode, |
| | | templateList: this.boundTemplateList.map((item, index) => ({ templateId: item.templateId, sort: index })) |
| | | } |
| | | : { insOrder: {...this.addObj,typeSource:-1}, sampleList: sampleList } |
| | | addInsOrder(payload).then(res => { |
| | | this.saveLoad = false |
| | |
| | | }, |
| | | sortTemplateList(list) { |
| | | return (list || []).slice().sort((a, b) => (a.sort || 0) - (b.sort || 0)) |
| | | }, |
| | | // 下单时从标准库绑定的模板里删减,提交时随 templateList 一起下发 |
| | | removeBoundTemplate(index) { |
| | | this.boundTemplateList.splice(index, 1) |
| | | }, |
| | | async loadTemplateBindings(standardTreeId) { |
| | | this.boundTemplateList = [] |
| | |
| | | .empty-template-text { |
| | | color: #909399; |
| | | } |
| | | /* 委托单信息:顶部操作栏 */ |
| | | .order-header { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | gap: 8px; |
| | | padding-bottom: 12px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | .order-header__title { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #303133; |
| | | } |
| | | .order-header__actions { |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 8px; |
| | | } |
| | | /* 间距统一交给 gap,去掉相邻按钮自带的 margin-left */ |
| | | .order-header__actions>>>.el-button+.el-button { |
| | | margin-left: 0; |
| | | } |
| | | .order-header__quarter { |
| | | width: 220px; |
| | | } |
| | | .order-header__template { |
| | | width: 160px; |
| | | } |
| | | /* 委托单信息:表单卡片 */ |
| | | .order-body { |
| | | margin-top: 12px; |
| | | } |
| | | .order-card>>>.el-card__body { |
| | | padding: 20px 20px 6px; |
| | | } |
| | | .order-card>>>.el-form-item { |
| | | margin-bottom: 16px; |
| | | } |
| | | /* 控件统一占满标签之外的整列宽度:el-date-editor 默认写死 220px、 |
| | | el-select 宽度收缩成固有宽度,不指定就会和其他输入框左右边缘对不齐 */ |
| | | .order-card>>>.el-input, |
| | | .order-card>>>.el-select { |
| | | width: 100%; |
| | | } |
| | | /* append 单元格的 20px 内边距 + 按钮 -10px 负边距是按默认 40px 按钮标定的, |
| | | small 输入下按钮会比输入框高、上下溢出;改成按钮直接撑满单元格 */ |
| | | .order-card>>>.el-input-group__append { |
| | | padding: 0; |
| | | } |
| | | .order-card>>>.el-input-group__append .el-button { |
| | | margin: 0; |
| | | padding: 9px 15px; |
| | | font-size: 12px; |
| | | } |
| | | </style> |