王震
2023-09-13 a15fb376f2a52a36be5ce2f1eeaf252a509dfcb7
src/components/view/processInspection.vue
@@ -5,137 +5,70 @@
        <el-row>
          <el-col :span="12">过程检验</el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button
              @click="handleAddNew"
              type="primary"
              size="mini"
              icon="el-icon-plus"
              style="background: #004EA2; "
              >新增</el-button
            >
            <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus"
              style="background: #004EA2; ">新增</el-button>
            <el-button icon="el-icon-download" size="mini">导出</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="nav">
        <span>检验状态:</span>
        <el-select
          size="small"
          v-model="search.result"
          placeholder="请选择检测状态"
          style="width: 224px;margin-right: 52px;"
        >
        <el-select size="small" v-model="search.result" placeholder="请选择检测状态" style="width: 224px;margin-right: 52px;">
          <el-option :value="''" label="全部"></el-option>
          <el-option :value="1" label="已检测"></el-option>
          <el-option :value="2" label="待检测"></el-option>
        </el-select>
        <span>产品名称:</span>
        <el-input
          size="small"
          style="width: 224px;margin-right: 30px;"
          v-model="search.name"
          placeholder="请输入产品名称"
        ></el-input>
        <el-input size="small" style="width: 224px;margin-right: 30px;" v-model="search.name"
          placeholder="请输入产品名称"></el-input>
        <span>工序:</span>
        <el-input
          size="small"
          style="width: 224px;margin-right: 30px;"
          v-model="search.techfather"
          placeholder="请输入工序"
        ></el-input>
        <el-input size="small" style="width: 224px;margin-right: 30px;" v-model="search.techfather"
          placeholder="请输入工序"></el-input>
        <el-button size="mini"><span>重 置</span></el-button>
        <el-button size="mini" type="primary" style="background: #004EA2;"
          ><span>查 询</span></el-button
        >
        <el-button size="mini" type="primary" style="background: #004EA2;"><span>查 询</span></el-button>
      </div>
      <div class="content-body">
        <div class="inspectionTable">
          <el-table
            ref="inspectionTable"
            height="calc(100vh - 320px)"
            :cell-style="{ textAlign: 'center' }"
          <el-table ref="inspectionTable" height="calc(100vh - 320px)" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{
              border: '0px',
              background: '#f5f7fa',
              color: '#606266',
              boxShadow: 'inset 0 1px 0 #ebeef5',
              textAlign: 'center'
            }"
            border
            :data="inspectionTable"
            style="width: 100%"
          >
            }" border :data="inspectionTable" style="width: 100%">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="order_number"
              label="订单编号"
              min-width="90"
            />
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column prop="order_number" label="订单编号" min-width="90" />
            <el-table-column prop="material" label="产品名称" min-width="80" />
            <el-table-column
              prop="specifications_model"
              label="规格型号"
              min-width="60"
            />
            <el-table-column prop="specifications_model" label="规格型号" min-width="60" />
            <el-table-column prop="techfather" label="工序" min-width="70" />
            <el-table-column prop="techname" label="工艺名称" min-width="70" />
            <el-table-column prop="unit" label="单位" min-width="50" />
            <el-table-column prop="quantity" label="数量" min-width="50" />
            <el-table-column
              prop="createTime"
              label="报检日期"
              min-width="60"
            />
            <el-table-column prop="createTime" label="报检日期" min-width="60" />
            <el-table-column prop="name" label="报检人" min-width="50" />
            <el-table-column
              prop="updateTime"
              label="检测日期"
              min-width="60"
            />
            <el-table-column prop="updateTime" label="检测日期" min-width="60" />
            <el-table-column prop="result" label="合格状态" min-width="80">
              <template slot-scope="scope">
                <span style="color: #34BD66;" v-if="scope.row.result == 1"
                  >合格</span
                >
                <span style="color: #E84738;" v-else-if="scope.row.result == 0"
                  >不合格</span
                >
                <span style="color: #34BD66;" v-if="scope.row.result == 1">合格</span>
                <span style="color: #E84738;" v-else-if="scope.row.result == 0">不合格</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="80">
              <template slot-scope="scope">
                <el-button type="text" size="small" style="margin-left: 0;"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >查看</el-button
                >
                <el-button type="text" size="small" style="margin-left: 0;"
                  >编辑</el-button
                >
                <el-button type="text" size="small" style="margin-left: 0;">详情</el-button>
                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                <el-button type="text" size="small" style="margin-left: 0;">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
          <el-pagination
            :current-page="1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="inspectionTableTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-pagination :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="inspectionTableTotal" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
@@ -146,109 +79,60 @@
          <el-col :span="12">新增过程检验单</el-col>
          <el-col :span="12" style="text-align: right;">
            <!-- 点击返回,当前页面值为false -->
            <el-button
              type="primary"
              size="mini"
              style="background: #004EA2; "
              icon="el-icon-circle-plus-outline"
              >新增</el-button
            >
            <el-button
              @click="showAddPage = false"
              type="primary"
              size="mini"
              icon="el-icon-back"
              style="background: #004EA2; "
              >返回</el-button
            >
            <el-button type="primary" size="mini" style="background: #004EA2; "
              icon="el-icon-circle-plus-outline">新增</el-button>
            <el-button @click="showAddPage = false" type="primary" size="mini" icon="el-icon-back"
              style="background: #004EA2; ">返回</el-button>
          </el-col>
        </el-row>
        <el-form
          :model="addInspectionform"
          ref="addInspectionform"
          class="addInspectionform"
          label-position="right"
          label-width="120px"
          size="small"
        >
        <el-form :model="processInspectVo" ref="addInspectionform" class="addInspectionform" label-position="right"
          label-width="120px" size="small">
          <div class="formwrapper">
            <el-row :gutter="230">
              <el-col :span="7">
                <el-form-item label="订单号:">
                  <el-input
                    style="width: 210px;"
                    size="small"
                    v-model="addInspectionform.number"
                    placeholder="请输入订单号"
                  />
                  <el-input @blur="selectInfoByOrderId" style="width: 210px;" size="small"
                    v-model="processInspectVo.orderNumber" placeholder="请输入订单号" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="产品名称:">
                  <el-input
                    style="width: 210px;"
                    size="small"
                    v-model="addInspectionform.code"
                    placeholder="请输入产品编码"
                  />
                  <el-select style="width: 210px;" size="small" @change="selectSample" v-model="processInspectVo.material"
                    placeholder="请选择产品">
                    <el-option v-for="item in optionsSamplename" :key="item.value" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="产品编码:">
                  <el-input
                    style="width: 210px;"
                    size="small"
                    disabled
                    v-model="addInspectionform.code"
                    placeholder="请输入产品编码"
                  />
                  <el-input style="width: 210px;" size="small" disabled v-model="processInspectVo.materialCode"
                    placeholder="请输入产品编码" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="230">
              <el-col :span="7">
                <el-form-item label="规格型号:">
                  <el-input
                    style="width: 210px;"
                    size="small"
                    disabled
                    v-model="addInspectionform.number"
                    placeholder="请输入规格型号"
                  />
                  <el-input style="width: 210px;" size="small" disabled v-model="processInspectVo.specificationsModel"
                    placeholder="请输入规格型号" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="工序名称:">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    style="width: 210px;"
                    size="small"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                  <el-select @change="changeOptionSoptionSprocesses" v-model="processInspectVo.techfather"
                    placeholder="请选择" style="width: 210px;" size="small">
                    <el-option v-for="item in optionSoptionSprocesses" :key="item.name" :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="工艺名称:">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    style="width: 210px;"
                    size="small"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                  <el-select v-model="processInspectVo.techname" placeholder="请选择" style="width: 210px;" size="small">
                    <el-option v-for="item in optionTechnology" :key="item.id" :label="item.name"
                      :value="item.id + '-' + item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
@@ -257,31 +141,17 @@
            <el-row :gutter="230">
              <el-col :span="7">
                <el-form-item label="单位:">
                  <el-input
                    style="width: 210px;"
                    size="small"
                    disabled
                    v-model="addInspectionform.quantity"
                    placeholder="请输入单位"
                  />
                  <el-input style="width: 210px;" size="small" disabled v-model="processInspectVo.unit"
                    placeholder="请输入单位" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="数量:">
                  <el-input
                    style="width: 210px;"
                    size="small"
                    v-model="addInspectionform.quantity"
                    placeholder="请输入数量"
                  />
                  <el-input style="width: 210px;" size="small" v-model="processInspectVo.quantity" placeholder="请输入数量" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-button
                  type="primary"
                  style="float: right; font-size: 14px; !important"
                  >生成检验项目</el-button
                >
              <el-col :span="10" style="display: flex;justify-content: end;">
                <el-button type="primary" @click="addTestProjevt">生成检验项目</el-button>
              </el-col>
            </el-row>
          </div>
@@ -291,90 +161,50 @@
        <el-row>
          <el-col :span="12" class="inspectionProject_span">检验项目</el-col>
          <el-col :span="12" class="inspectionProject_span">
            <el-button size="mini" @click="clickDeleteInspectionColumn()"
              >删除检验值列</el-button
            >
            <el-button
              style="margin-right: 30px;"
              size="mini"
              @click="clickAddInspectionColumn()"
              >添加检验值列</el-button
            >
            <el-button
            <el-button size="mini" @click="clickDeleteInspectionColumn()">删除检验值列</el-button>
            <el-button style="margin-right: 30px;" size="mini" @click="clickAddInspectionColumn()">添加检验值列</el-button>
            <!-- <el-button
              size="mini"
              style="margin-right: 30px;"
              @click="clickAddLine()"
              >添加检验行</el-button
            >
            > -->
          </el-col>
        </el-row>
        <el-table
          :data="inspectionItems"
          height="calc(100vh - 550px)"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column prop="material" label="项目"></el-table-column>
        <el-table :row-key="inspectionItems.id" :data="inspectionItems" max-height="420" :span-method="handleSpanMethod" height="calc(100vh - 550px)" style="width: 100%">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column label="项目" prop="father"></el-table-column>
          <el-table-column prop="name" label="指标"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
          <el-table-column prop="standardVal" label="标准值"></el-table-column>
          <el-table-column prop="controlVal" label="内测值"></el-table-column>
          <el-table-column
            prop="testValue"
            label="检测值"
            min-width="150"
            v-for="(item, index) in empiricalValueAdd"
            :key="index"
          >
          <el-table-column prop="required" label="标准值"></el-table-column>
          <el-table-column prop="internal" label="内测值"></el-table-column>
            <el-table-column prop="inspectionValue" label="检测值" min-width="100"  style="text-align: center;">
            <template slot-scope="scope">
              <el-tooltip
                :disabled="scope.row.deviceId != null"
                class="item"
                effect="dark"
                content="请先选择设备!"
                placement="top-start"
              >
                <el-input
                  :disabled="scope.row.deviceId == null"
                  // v-model="scope.row.testValueList[index]"
                  @blur="changeState(scope.row, index)"
                  placeholder="请输入检测值"
                ></el-input>
                      <el-tooltip :disabled="scope.row.deviceId != null" class="item" effect="dark" content="请先选择设备!"
                    placement="top-start">
                    <el-input :disabled="scope.row.deviceId === null" :value="item"
                      @blur="changeState(scope.row, index)" placeholder="请输入检测值"></el-input>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="试验设备">
            <template slot-scope="scope">
              {{ scope.row.device }}
              <el-select
                v-model="scope.row.device"
                size="small"
                slot="append"
                style="width: 100px;"
              >
              <el-select v-model="scope.row.device" size="small" slot="append" style="width: 100px;">
                <el-option value="选项1"></el-option>
                <el-option value="选项2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="conclusion" label="结论">
          <el-table-column label="结论">
            <template slot-scope="scope">
              <span style="color: #34BD66;" v-if="scope.row.insState == 1"
                >合格</span
              >
              <span style="color: #E84738;" v-else-if="scope.row.insState == 0"
                >不合格</span
              >
              <span style="color: #34BD66;" v-if="scope.row.result === 1">合格</span>
              <span style="color: #E84738;" v-else-if="scope.row.result === 0">不合格</span>
            </template>
          </el-table-column>
          <el-table-column v-if="detailId == null" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="clickDeleteline(scope)"
              >删除</el-button
            >
              <el-button type="text" @click="clickDeleteline(scope)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
@@ -397,6 +227,7 @@
export default {
  data() {
    return {
      detailId: null,
      search: {
        countSize: 10,
        pageSize: 1,
@@ -404,13 +235,29 @@
        name: "", // 产品名称
        techfather: "" // 工序
      },
      optionsSamplename: [],
      inspectionTable: [],
      optionSoptionSprocesses: [],
      optionTechnology: [],
      inspectionTableTotal: "",
      treeProject: [],
      // 添加列
      empiricalValueAdd: 1,
      empiricalValueAdd: [],
      // 编辑时存储最长的列数字,做删除判断
      empiricalValueAddMaxNumber: 0,
      showAddPage: false,
      processInspectVo: {
        material: null,
        materialCode: null,
        orderNumber: "D-001",
        quantity: null,
        specificationsModel: null,
        techfather: null,
        techname: null,
        technologyId: null,
        unit: null
      },
      InspectioniD: null,
      addInspectionform: [
        {
          number: "",
@@ -425,8 +272,8 @@
          group: "",
          worker: "",
          machine: ""
        }
      ],
        }]
      ,
      inspectionItems: [], // 新增检验项目表格
      inspectionResultForm: [
        {
@@ -437,36 +284,151 @@
          operation: ""
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
      options: [],
      value: "",
      rowList: [],
      spanArr: [],
      position: 0
    };
  },
  mounted() {
    // this.getTableData()
  },
  methods: {
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.search.countSize = val;
      this.defaultInitializationTable();
    },
    getInsArr(val){
      console.log(val);
      return val.split(",")
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
             rowspan: _row,
             colspan: _col
          }
       }
       if(columnIndex === 1){
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
             rowspan: _row,
             colspan: _col
          }
       }
    },
    // 合并表格
    mergeTable() {
      this.rowList=[]
      this.spanArr=[]
      this.position=0
      this.inspectionItems.forEach((item,index) => {
          if( index === 0){
             this.spanArr.push(1);
             this.position = 0;
          }else{
             if(this.inspectionItems[index].father === this.inspectionItems[index-1].father ){
                this.spanArr[this.position] += 1;
                this.spanArr.push(0);
             }else{
                this.spanArr.push(1);
                this.position = index;
             }
          }
       })
    },
    changeOptionSoptionSprocesses() {
      this.optionTechnology = []
      let working = this.optionSoptionSprocesses.filter(item => {
        return item.name === this.processInspectVo.techfather
      })[0]
      this.optionTechnology = working.children
    },
    addTestProjevt() {
      let val = JSON.parse(JSON.stringify(this.processInspectVo))
      val.techname = this.processInspectVo.techname.split("-")[1]
      val.technologyId = this.processInspectVo.techname.split("-")[0]
      this.$axios.post(this.$api.url.processInspectAddProcess, {
        material: val.material,
        materialCode: val.materialCode,
        orderNumber: val.orderNumber,
        quantity: val.quantity,
        specificationsModel: val.specificationsModel,
        techfather: val.techfather,
        techname: val.techname,
        technologyId: val.technologyId,
        unit: val.unit
      }, {
        headers: { "Content-Type": "application/json" }
      }).then(res => {
        if (res.code === 201) {
          this.$message({
            message: res.message,
            type: 'warning'
          });
          return
        }
        this.InspectioniD = res.data
        this.getTableData()
      })
    },
    getTableData() {
      this.$axios.get(this.$api.url.inspectionItemListUser, {
        params: {
          id: 28,
          type: 1
        }
      }).then(res => {
        this.inspectionItems = res.data
        let arr = []
        let val=JSON.parse(JSON.stringify(this.inspectionItems))
        //转成一维数组
        val.forEach(l => {
          let father = l.father
          l.children.forEach(c => {
            c.father = father
            c.empiricalValueAdd=[]
            arr.push(c)
          })
        })
        this.inspectionItems = arr
        console.log(this.inspectionItems);
        this.mergeTable(arr)
      })
    },
    selectSample() {
      let sample = this.optionsSamplename.filter(item => {
        return item.name === this.processInspectVo.material
      })[0]
      this.processInspectVo.techfather = null
      this.processInspectVo.techname = null
      this.processInspectVo.materialCode = sample.code
      this.processInspectVo.specificationsModel = sample.specifications
      this.processInspectVo.unit = sample.unit
      this.optionSoptionSprocesses = []
      this.optionSoptionSprocesses = sample.children
    },
    selectInfoByOrderId() {
      this.$axios.get(this.$api.url.chooseMaterProcessInspect, {
        params: {
          orderNumber: this.processInspectVo.orderNumber
        }
      }).then(res => {
        if (res.data.length > 0) {
          console.log(res.data);
          this.optionsSamplename = res.data
        } else {
          this.$message({
            message: '没有该订单号!',
            type: 'warning'
          });
        }
      })
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
@@ -476,6 +438,7 @@
    // 显示新增页面
    handleAddNew() {
      this.showAddPage = true;
      this.getTableData()
    },
    // 表格初始化接口
    defaultInitializationTable() {
@@ -535,52 +498,66 @@
  align-items: center;
  background-color: #fff;
}
.table_header {
  height: calc(100vh - 550px);
}
.nav * {
  font-size: 14px;
}
.content-body .rawPage {
  background-color: #fff;
  overflow: hidden;
}
.inspectionTable {
  padding: 20px 20px;
}
.pagination {
  float: right;
  margin-right: 20px;
}
.newPage {
  overflow: hidden;
}
.header {
  padding: 12px;
}
.addInspectionform {
  background-color: #fff;
}
.addInspectionform .formwrapper {
  padding: 20px 0px;
  margin-left: 100px;
}
.inspectionProject .el-table {
  background-color: #fff;
  padding: 10px 12px;
}
.inspectionResult span {
  display: block;
  padding: 5px 0px;
}
.inspectionResult .el-table {
  background-color: #fff;
  padding: 10px 12px;
}
.inspectionProject_span {
  line-height: 32px;
  padding: 10px 20px;
}
.inspectionProject_span .el-button {
  float: right;
  font-size: 13px !important;