src/views/business/productOrder/components/addOrder.vue
@@ -1,77 +1,74 @@
<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>
@@ -235,7 +232,7 @@
            </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">
@@ -731,7 +728,7 @@
          { required: true, message: '请选择紧急程度', trigger: 'change' }
        ],
        sample: [
          { required: true, message: '请选择样品名称', trigger: 'change' }
          { required: true, message: '请选择检测依据', trigger: 'change' }
        ],
        sampleNum: [
          { required: true, message: '请填写样品数量', trigger: 'blur' }
@@ -1194,7 +1191,7 @@
      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([]);
@@ -1434,7 +1431,12 @@
        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
@@ -1578,6 +1580,10 @@
      },
      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 = []
@@ -2389,4 +2395,61 @@
.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>