Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before

王震

2023-12-04 8afbe0b83915dc417cea62221782e7ce15c00c78

 src/views/quality/packageinspect/packageInspect-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,602 @@
<template>
    <div style="height: 100%">
    <div class="page-header">
      <div class="header-left">
        <a @click="$router.go(-1)"><i class="icon-btn-back"></i></a>
        <h2 v-if="resultVal=='' || resultVal==null">编辑-包装检验</h2>
        <h2 v-else>查看-包装检验</h2>
      </div>
      <div class="btn-group header-right">
      </div>
    </div>
    <div class="page-main">
      <div class="packageInspect-basic">
        <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        style="width: 100%"
        class="l-mes"
        label-width="110px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="包装检验编号" prop="packInsNo">
                <el-input v-model="dataForm.packInsNo" disabled>
                </el-input>
                </el-form-item>
            </el-col>
              <el-col :span="6">
                <el-form-item label="包装编号" prop="packageNo">
                <el-input v-model="dataForm.packageNo" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item  prop="projectName" label="项目名称" >
                  <el-tooltip :disabled="dataForm.projectName==null" :content="dataForm.projectName">
                    <el-input v-model="dataForm.projectName" disabled ></el-input>
                  </el-tooltip>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客户名称" prop="customerName">
                    <el-input v-model="dataForm.customerName" disabled />
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="合同号" prop="contractNo">
                <el-input v-model="dataForm.contractNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="报检日期" prop="createTime">
                      <el-input v-model="dataForm.createTime" disabled />
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报检人" prop="createUser">
                      <el-input v-model="dataForm.createUser" disabled />
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="packageInspect-detail">
        <el-row :gutter="10" style="width:100%;z-index: 10;height:50px;">
            <el-col :span="20">检验项目</el-col>
            <el-col :span="2">
              <el-button v-if="resultVal=='' || resultVal==null" style="width:100%" size="small" @click="clickAddLine()">添加检验项目</el-button>
            </el-col>
            <el-col :span="2">
              <el-button v-if="resultVal=='' || resultVal==null" style="width:100%" type="primary"  size="small"
              @click="savePackIns()">保存</el-button>
            </el-col>
        </el-row>
        <el-row style="width:100%;">
            <el-col :span="24">
                <el-table
                :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
                :cell-style="{textAlign:'center'}"
                ref="table"
                :data="list"
                border
                style="width: 100%;"
                height="400"
                row-key="randomId" class="l-mes"
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                  <el-table-column type="index" label="序号" width="60">
                  </el-table-column>
                  <el-table-column prop="name" label="项目" width="260">
                    <template slot-scope="scope">
                        <el-input :readonly="resultVal!=null" v-if="scope.row.children" class="inline-input" style="width:90%;" v-model="scope.row.name"
                          placeholder="请输入项目名称"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="required" label="要求" width="260">
                    <template slot-scope="scope">
                      <div v-if="!scope.row.children">
                      <el-input :readonly="resultVal!=null" v-model="scope.row.required"
                        placeholder="请输入要求"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="note" label="检验描述" width="260" >
                    <template slot-scope="scope">
                      <div v-if="!scope.row.children">
                        <el-input :readonly="resultVal!=null" v-model="scope.row.note" placeholder="检验描述"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="testState" label="结论" min-width="150">
                    <template slot-scope="scope">
                        <el-select style="width:100%" :disabled="resultVal!=null" @change="changeResult" v-model="scope.row.result" v-if="!scope.row.children">
                            <el-option label="合格" value="合格"></el-option>
                            <el-option label="不合格" value="不合格"></el-option>
                        </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="resultVal=='' || resultVal==null" fixed="right" style="background-color: white;" label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.children" icon="el-icon-circle-plus-outline" type="text" @click="clickAddChildren(scope.row,scope.$index)">添加行</el-button>
                      <el-button v-if="!scope.row.children" icon="el-icon-circle-close" type="text" 
                      @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">取消</el-button>
                      <el-button v-if="scope.row.children" icon="el-icon-circle-close" type="text"
                      @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">删除项目</el-button>

                    </template>
                  </el-table-column>
                </el-table>
            </el-col>
        </el-row>
      </div>
      <div class="packageInspect-result">
        <el-row>
          <el-col :span="24">检验结论</el-col>
        </el-row>
        <el-row style="width:100%">
          <el-col :span="24">
            <el-table class="l-mes" border height="90" :data="conclusionTable" ref="conclusion" v-model="conclusion"
            :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
            :cell-style="{textAlign:'center'}">
                <el-table-column prop="packageNo" label="包装编号"></el-table-column>
                <el-table-column prop="userName" label="检验员"></el-table-column>
                <el-table-column prop="result" label="检验结论">
                  <template slot-scope="scope">
                    <el-select :disabled="resultVal!=null" style="width:100%" v-model="scope.row.result">
                        <el-option label="合格" value="合格"></el-option>
                        <el-option label="不合格" value="不合格"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template>
                        <el-button type="text" :disabled="resultVal!=null" @click="submitSave()" size="small">上报</el-button>
                    </template>
                </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchListById,
  updatePackageInsProduct,
  updatePackageInspectById,
} from '@/api/quality/packageInspect'
export default {
    computed:{},
    components:{
    },
    data(){
        return{
            loading: false,
            resultVal: null,
            dataForm:{
                id: null,
                packInsNo: null,
                packageNo: '',
                contractNo: '',
                projectName: '',
                customerName: '',
                packageInsProductS: [{
                  deviceId: 0,
                  father:'',
                  name: '',
                  required: '',
                  testValue: '',
                  unit: '',
                  testValueList: []
                }]
            },
            form: null,
            list:[],
            conclusion: null,
            conclusionTable: [{
              packageNo: '',
              userName: '',
              result: ''
            }],
            dataRule: {},
        }
    },
    beforeUpdate(){
      this.$nextTick(()=>{
        this.$refs.table.doLayout();
      })
    },
    created(){
      this.dataForm.id = this.$route.query.id
      this.resultVal = this.$route.params.resultVal
      if(!this.resultVal){
        let val = sessionStorage.getItem("packIns-resultVal-"+this.dataForm.id)
        if(val){
          this.resultVal=val
        }
      }
      this.init()
    },
    watch:{
    },
    methods:{
      changeResult(){
        let result = ''
        let data = this.list
        if(data){
          result='合格'
          data.forEach(item=>{
            if(item.children){
              item.children.forEach(ele=>{
                if(ele.result=='不合格'){
                  result='不合格'
                }
              })
            }
          })
        }
        this.conclusionTable[0].result = result
      },
      //上报
      submitSave(){
        const _than = this
        this.$confirm('上报前，请确认检验项目是否已保存!', '提示', {
          confirmButtonText: '确认上报',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
          id: _than.dataForm.id,
          result: _than.conclusionTable[0].result,
        }
        updatePackageInspectById(data).then(res => {
          if(res.data.code === 0){
            _than.resultVal = res.data.data
            sessionStorage.setItem("packIns-resultVal-"+_than.dataForm.id,res.data.data)
            _than.$message.success("上报成功");
          }else{
            _than.$message.error("上报失败",res.data.data);
          }
        })
        }).catch(() => {})
      },
      // æ·»åŠ è¡Œ
      clickAddLine() {
          this.list.push({
            name: '',
            randomId: Math.random(),
            children: [{
              name: '',
              note: '',
              required: '',
              result: '',
              randomId: Math.random(),
            }]
          })
      },
      //添加子级
      clickAddChildren(row,index){
        row.children.push({
            name: row.name,
            note: '',
            required: '',
            result: '',
            randomId: Math.random(),
        })
      },
      // åˆ é™¤è¡Œ
      clickDelLine(row,index,isParent) {
        if(isParent){
          let parentIndex = this.list.findIndex(el =>{
            return el.randomId == row.randomId
          })
          this.list.splice(parentIndex,1)
        }else{
          let i = this.list.findIndex(el =>{
            return el.children.find(ele => ele.randomId == row.randomId)
          })
          let childrenIndex = this.list[i].children.findIndex(el =>{
            return el.randomId == row.randomId
          })
          this.list[i].children.splice(childrenIndex,1)
        }
      },
      //保存检查项
      savePackIns(){
        if(this.list.length==0){
          this.$message.error("检验项目为空!")
          return
        }else{
          let dataList = []
          this.list.forEach(item=>{
            if(item.children){
              item.children.forEach(ele=>{
                let obj = {
                  id: ele.pid || null,
                  name: item.name,
                  note: ele.note,
                  packageInspectId: this.dataForm.id,
                  required: ele.required,
                  result: ele.result,
                }
                dataList.push(obj)
              })
            }
          })
          updatePackageInsProduct(dataList).then(res=>{
            if(res.status===200){
              this.$message.success("保存成功")
            }
          }).catch(error=>{
            console.log(error);
            this.$message.error("保存失败")
          })
        }
      },
      init(){
        if(this.dataForm.id){
          fetchListById(this.dataForm.id).then(res=>{
            let data = res.data.data
            this.dataForm.packInsNo = data.packInsNo
            this.dataForm.packageNo = data.packageNo
            this.dataForm.contractNo = data.contractNo
            this.dataForm.customerName = data.customerName
            this.dataForm.projectName = data.projectName
            this.dataForm.createTime = data.createTime
            this.dataForm.createUser = data.createUser
            this.list = []
            let userNameList = []
            data.packageInsProductS.forEach(item => {
              if (item.children) {
                    let ele = {
                      randomId: Math.random(),
                      name: null,
                      children: []
                    }
                    ele.name = item.name
                    item.children.forEach(obj => {
                      if(obj.userName){
                        userNameList.push(obj.userName)
                      }
                      let o = {
                        name: item.name,
                        randomId: Math.random(),
                        required: obj.required,
                        pid: obj.pid,
                        note: obj.note?obj.note:'',
                        result: obj.presult
                      }
                      ele.children.push(o)
                    })
                    this.list.push(ele)
                }
              })
              this.conclusionTable = [{
                packageNo: data.packageNo,
                userName: Array.from(new Set(userNameList)).join(','),
                result: null
              }]
              this.$nextTick(()=>{
                if(this.list.length>0){
                  this.changeResult()
                }
              })
          }).catch(error=>{
            this.$message.error("获取失败",error)
          })
        }else{
          this.conclusionTable = []
        }
      },
    },
}
</script>

<style>
.packageInspect-detail {
  width: 100%;
  height: 490px;
  padding: 10px 20px;
  display: flex;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.packageInspect-result {
  width: 100%;
  height: 150px;
  padding: 10px 20px;
  display: flex;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.packageInspect-basic {
  background-color: #fff;
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.packageInspect-related-stock-part {
  background-color: #fff;
  width: 100%;
  height: 220px;
  border: 1px solid #ddd;
  padding: 10px 20px 0px 20px;
  box-sizing: border-box;
}

.packageInspect-bom {
  background-color: #fff;
  width: 100%;
  height: 499px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  box-sizing: border-box;
}

.packageInspect-bom .el-card__header {
  padding: 1px 20px;
  border-bottom: 0px solid #ebeef5;
}

.packageInspect-bom .el-card__body {
  height: calc(100% - 22px);
}

.packageInspect-bom .el-card__body .el-collapse {
  height: 100%;
  overflow: auto;
}

.packageInspect-technology-params {
  background-color: #fff;
  width: calc(52% - 20px);
  float: left;
  height: 719px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  margin-left: 20px;
}

.packageInspect-structure {
  background-color: #fff;
  width: 35%;
  float: left;
  height: 719px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  box-sizing: border-box;
}

.packageInspect-flow {
  background-color: #fff;
  width: calc(65% - 20px);
  float: left;
  height: 719px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  margin-left: 20px;
  box-sizing: border-box;
}

/*自定义disabled状态下checkbox的样式*/
.completeproductstructure-checkout
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  background-color: #006eff;
  border-color: #006eff;
}

.completeproductstructure-checkout
  .el-checkbox__input.is-disabled.is-checked
  + span.el-checkbox__label {
  color: #006eff;
  border-color: #006eff;
}

.completeproductstructure-checkout
  .el-checkbox__input.is-disabled
  .el-checkbox__inner {
  background-color: #ffffff;
  cursor: pointer;
}

.completeproductstructure-checkout
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #606266;
  cursor: pointer;
}

.completeproductstructure-checkout .el-checkbox__inner::after {
  border: 1px solid #fff !important;
  border-left: 0 !important;
  border-top: 0 !important;
  cursor: pointer !important;
}

.packageInspect-bom-div {
  width: 100%;
  margin-bottom: 5px;
}

.packageInspect-technology-div {
  width: 100%;
  margin-bottom: 5px;
  margin-right: 10px;
}

.packageInspect-technology-div .el-collapse {
  border-top: 0px;
  border-bottom: 0px;
}

.structure-detail-table th.gutter {
  display: table-cell !important;
  width: 10px !important;
}

.structure-detail-table colgroup.gutter {
  display: table-cell !important;
  width: 10px !important;
}

.final-product-checkout .el-card__header {
  padding: 0px 20px;
  border-bottom: 0px;
}

.final-product-checkout .el-card__body {
  padding: 0px 20px 20px;
}

.orimaterial-quantity .el-card__header {
  padding: 0px 20px;
  border-bottom: 0px;
}

.orimaterial-quantity .el-card__body {
  padding: 0px 20px 20px;
}

.packageInspect-materialcost-table th.gutter {
  display: table-cell !important;
  width: 10px !important;
}

.packageInspect-materialcost-table colgroup.gutter {
  display: table-cell !important;
  width: 10px !important;
}

.GooFlow .ico .ico_start:before {
  color: red;
}
.highlight-tab-class {
  color: #006eff;
  background: #e4e7ed;
  border-top: 1px solid #006eff;
}
.unhighlight-tab-class {
  border: 1px solid #e4e7ed;
  border-bottom: none;
}
.avue-crud__menu{
  min-height: 0px;
}
</style>