zdsz_vue/src/components/EnginNodeInfo/index.vue

<!--
 *@description: 节点信息form（新）
 *@author: yh Fu
 *@date: 2024-01-10 14:44:14
 *@version: V1.0.5
 -->


<template>
  <div style="width: 100%; height: 100%;">
    <!-- 节点表单 -->
    <el-form ref="fangxianForm" :model="nodeInfo" :rules="nodeRules" label-width="200px">
      <h2 style="margin-left: 16%;font-weight: 800;">{{ name }}</h2>
      <el-form-item label="施工时间" prop="constructTime" v-show="currentContain.includes('constructTime')" :style=" enginType == '顶管工程' ? 'margin-left: -27px' : '' ">
        <el-date-picker
          :disabled="formType"
          v-model="nodeInfo.constructTime"
          value-format="yyyy-MM-dd hh:mm:ss"
          type="datetime"
          placeholder="请选择施工时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="回填时间" prop="backfillTime" v-if="currentContain.includes('backfillTime')">
        <el-date-picker
          :disabled="formType"
          v-model="nodeInfo.backfillTime"
          value-format="yyyy-MM-dd hh:mm:ss"
          type="datetime"
          placeholder="请选择回填日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否按图纸施工" prop="constructAccordingDrawings" v-if="currentContain.includes('constructAccordingDrawings')">
        <el-select v-model="nodeInfo.constructAccordingDrawings" :disabled="formType">
          <el-option
            v-for="e in constructAccordingDrawingsOption"
            :key="e.value"
            :label="e.label"
            :value="e.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分段打压" prop="segmentedCompressionQualified" v-if="currentContain.includes('segmentedCompressionQualified')">
        <el-select v-model="nodeInfo.segmentedCompressionQualified" :disabled="formType">
          <el-option
            v-for="e in segmentedCompressionQualifiedOption"
            :key="e.value"
            :label="e.label"
            :value="e.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="照片" prop="zEngiineeringPhotoBoList" class="obsImage" :class=" enginType == '顶管工程' ? 'obsActiveImage' : enginType == '基建工程' ? 'obsActiveImageStructure' : '' " v-if="currentContain.includes('zEngiineeringPhotoBoList')">
        <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoList"
                        @input="getUrl"></ObsImageUpload>
      </el-form-item>
      <el-form-item label="备注" prop="remark" v-if="currentContain.includes('remark')">
        <el-input
          v-model="nodeInfo.remark"
          type="textarea"
          placeholder="请输入内容"
          maxlength="255"
        />
      </el-form-item>
      <div style="width: 25%;position: relative;left: 20.5%;top: -8px;" v-if="currentContain.includes('zhanshixinzeng') ? currentContain.includes('zhanshixinzeng') :  enginType != '民用工程'">
        <!-- <el-button @click="addzEngineeringMaterialBo('nodeInfo',['materialQuality','specifications','number'])">新增用料信息</el-button> -->
        <el-button @click="addMaterial()">新增用料信息</el-button>
        <!-- <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        <el-button @click="nodeCancel">取 消</el-button> -->
      </div>
      <el-row v-for="(item, index) in zEngineeringMaterialBo" :key="index" style="left: 13.5%;" :class=" enginType == '基建工程' ? 'rowStructure' : '' ">
        <!-- 在此处添加默认的行内容 -->
        <template v-if="index === null">
          <div>默认的行内容</div>
        </template>
        <!-- 循环输出的行内容 -->
        <el-col :span="7" v-show="materialComponList.includes('materialQuality')" v-if="enginType != '基建工程'">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.materialQuality'"
            label-width="50px"
            label="材质"

          >
            <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
            <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
            <el-select v-model="item.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(item, index)">
              <el-option
                v-for="e in materialQualityList"
                :key="e.id"
                :label="e.name"
                :value="e.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-show="materialComponList.includes('specifications')" v-if="enginType != '基建工程'">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.specifications'"
            label-width="50px"
            label="规格"

          >
            <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
            <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
            <el-select v-model="status == '修改' ? item.specificationsName : item.specifications" placeholder="请选择规格" style="width: 100%">
              <el-option
                v-for="e in specificationsList"
                :key="e.id"
                :label="e.name"
                :value="e.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 基建 -->
        <el-col :span="7" v-show="materialComponList.includes('materialQuality')" v-if="enginType == '基建工程'">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.materialQuality'"
            label-width="50px"
            label="材质"

          >
            <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
            <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
            <el-select v-model="item.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(item, index)" filterable="true" @blur="selectBlur(arguments,index,'materialQuality')">
              <el-option
                v-for="e in materialQualityList"
                :key="e.id"
                :label="e.name"
                :value="e.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-show="materialComponList.includes('specifications')" v-if="enginType == '基建工程'">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.specifications'"
            label-width="50px"
            label="规格"

          >
            <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
            <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
            <el-select v-model="status == '修改' ? item.specificationsName : item.specifications" placeholder="请选择规格" style="width: 100%" filterable="true" @blur="selectBlur(arguments,index,'specifications')">
              <el-option
                v-for="e in specificationsList"
                :key="e.id"
                :label="e.name"
                :value="e.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- end -->
        <el-col :span="7" v-show="materialComponList.includes('number')">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.number'"
            label-width="50px"
            label="数量"
          >
            <!--                  :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
            <div class="block" style="display: inline-block; margin-right: 20px;">
              <el-input v-model="item.number" placeholder="请输入数量" style="width: 100%" type="number" oninput="value = value.replace(/[^\d]/g, '');if(value.length>9); value=value.slice(0,9)" :disabled="status == 'read-only'"></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-show="materialComponList.includes('remark')">
          <el-form-item
            :prop="'zEngineeringMate                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             rialBo.' + index + '.remark'"
            label="描述"
            label-width="50px"
            class="material_desc"
          >
            <!--                  :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
            <div class="block" style="display: inline-block; margin-right: 20px;">
              <el-input v-model="item.remark" placeholder="请填写描述" style="width: 200px;" maxlength="255" type="textarea"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-if="materialComponList.includes('brand')">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.brand'"
            label-width="50px"
            label="品牌"
            :rules="{ required: true, message: '请选择品牌', trigger: ['change','blur']} "
          >
            <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
            <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
            <el-select v-model="item.brand" placeholder="请选择品牌" style="width: 100%">
              <el-option
                v-for="e in dict.type.brand"
                :key="e.value"
                :label="e.label"
                :value="e.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-show="materialComponList.includes('corrosionLevel')" style="position: relative;left: -9%;">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.corrosionLevel'"
            label-width="150px"
            label="腐蚀等级"

          >
            <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
            <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
            <el-select v-model="item.corrosionLevel" placeholder="请选择腐蚀等级" style="width: 100%">
              <el-option
                v-for="e in corrosionLevelList"
                :key="e.dictValue"
                :label="e.dictLabel"
                :value="e.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-show="materialComponList.includes('visitType')">
          <el-form-item label="上门类型" :prop="'zEngineeringMaterialBo.' + index + '.visitType'" label-width="68px" style="position: absolute;left: -1.6%;">
            <el-select v-model="item.visitType" style="width: 100%;">
              <el-option
                v-for="e in dict.type.visit_type"
                :key="e.value"
                :label="e.label"
                :value="e.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" v-show="materialComponList.includes('selfClosingValveType')" style="position: relative;left: 25.5%;">
          <el-form-item label="自闭阀类型" :prop="'zEngineeringMaterialBo.' + index + '.selfClosingValveType'" label-width="91px">
            <el-select v-model="item.selfClosingValveType" style="width: 100%;">
              <el-option
                v-for="e in dict.type.self_closing_valve_type"
                :key="e.value"
                :label="e.label"
                :value="e.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-button v-if="(currentContain.includes('zhanshixinzeng') ? currentContain.includes('zhanshixinzeng') :  enginType != '民用工程') && zEngineeringMaterialBo.length > 0" @click="removezEngineeringMaterialBo(index)">
            删除
        </el-button>
      </el-row>
      <hr style="position: relative;left: 10%;">
    </el-form>

  </div>
</template>

<script>
import {
  getEnginMaterialQualityList,                    // 材质
  getEnginSpecificationsList,                     // 规格
  getDictType,                                    // 腐蚀程度

} from '@/api/zdsz/enginee'
export default {
  name:'EnginNodeInfo',
  props:['types','enginType','name','currentContain','updateOption','status'],
  dicts:[
    'visit_type',
    'self_closing_valve_type',
    'brand'

  ],
  data(){

    return {
      constructAccordingDrawingsOption:[
        {
          value:'Y',
          label:'是'
        },
        {
          value:'N',
          label:'否'
        }
      ],
      segmentedCompressionQualifiedOption:[
        {
          value:'1',
          label:'合格'
        },
        {
          value:'0',
          label:'不合格'
        }
      ],
      corrosionLevelList:[],                      // 腐蚀等级option
      materialQualityList:[],                     // 材质
      specificationsList:[],                      // 规格
      materialComponList:[],
      nodeInfo:{
        backfillTime:'',                        // 回填时间
        constructTime:'',
        constructAccordingDrawings:'',
        segmentedCompressionQualified:'',
        zEngiineeringPhotoBoList:[],            // 照片集合
        zEngineeringMaterialBo:[],              // 用料集合
        remark:'',
      },
      nodeInfoBo:{
        zEngineeringInfoBo:{

        }
      },                                         //  节点信息
      zEngineeringMaterialBo:[

      ],                                         //  用料信息
      nodeRules:{
        zEngiineeringPhotoBoList: [
          {required: true, message: "至少上传一张图片", trigger: "change"}
        ],
        constructTime: [
          {required: true, message: "请选择施工时间", trigger: "change"}
        ],
        brand:[
          {required: true, message: "请选择品牌", trigger: "change"}
        ]
      }
    }
  },
  created(){
    // 获取材质
    getEnginMaterialQualityList({enginType:this.enginType}).then(res => {
      console.log('材质',res)
      this.materialQualityList = res.data
    })
    // 获取腐蚀等级
    getDictType({dictType:'corrosion_level'}).then(res => {
      console.log('腐蚀等级',res)
      this.corrosionLevelList = res.data
    })
    console.log('update',this.updateOption)
  },
  mounted(){
    console.log('当前节点name',this.name)
    console.log('update',this.updateOption)
    console.log('当前节点currentContain',this.currentContain)
    this.materialComponList = this.currentContain.find(e => {
      if( e instanceof Array){
        return e
      }

    })

    if(this.status == '修改'){
      this.currentContain.find(e => {
        console.log(this.updateOption)
        if( e instanceof Array){
          this.zEngineeringMaterialBo = this.updateOption.zEngineeringInfoBoList[0].zEngineeringMaterialBo
        }
        this.nodeInfo[e] = this.updateOption[e]
      })
      this.nodeInfo.zEngiineeringPhotoBoList = this.updateOption.zEngineeringInfoBoList[0].zEngiineeringPhotoBoList
    }

    setTimeout(() => {
      // 至少存在一条物料
      this.addMaterial()
    },1500)
    console.log('用料组件',this.materialComponList)
    console.log('用料信息',this.zEngineeringMaterialBo)
    console.log('节点信息',this.nodeInfo)
    // 添加用料对象
    // this.addMaterial()
  },
  methods:{
     validatePass (rule, value, callback){
      console.log(rule, value, callback)
      if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
      } else {
        callback();
      }
    },
    selectBlur(_,index,name) {
      this.zEngineeringMaterialBo[index][name] = [...arguments][0][0].target.value
    },
    // 收集节点信息
    infoCollection(){
      let result = null
      this.$refs.fangxianForm.validate(valid => {
        if(valid){
          // 收集主节点信息
          this.currentContain.forEach(e => {
            if( e instanceof Array){
              // 包含用料 特殊处理
              return
            }
            this.nodeInfoBo[e] = this.nodeInfo[e]
          })
          this.nodeInfoBo.type = this.name
          // 接口数据格式修改 图片和用料放到nodeInfoBo节点详情对象中
          this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.nodeInfo.zEngiineeringPhotoBoList
          this.nodeInfoBo.zEngineeringInfoBo.zEngineeringMaterialBo = this.zEngineeringMaterialBo
          delete this.nodeInfo.zEngiineeringPhotoBoList
          console.log('即将返回的节点Info',this.nodeInfoBo)
          result = this.nodeInfoBo
        } else {
          this.$message({
            message: '请完善信息',
            type: 'error'
          });
          throw 'valid Failed'
        }
      })
      return result
    },
    addMaterial(){
      let materialBo = {}
      console.log(this.materialComponList)
      this.materialComponList.forEach(e => {
        materialBo[e] = null
      })
      this.zEngineeringMaterialBo.push(materialBo)
      this.nodeInfo.zEngineeringMaterialBo.push(materialBo)
      // console.log('节点用料参数对象',this.zEngineeringMaterialBo)
    },
    addzEngineeringMaterialBo(option,params){
      let material = {}
      params.forEach(e => {
        material[e] = ""
      })
      this[option].zEngineeringMaterialBo.push(
        material
      )
    },
    // 填充已有数据
    updateInfo(e){
      console.log('填充',e)
    },
    getUrl(url) {
      this.nodeInfo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList ? this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
    },
    // 获取材质规格
    getEnginSpecificationsList(e,idx){
      this.zEngineeringMaterialBo[idx].specifications = null;
      getEnginSpecificationsList({materId:e.materialQuality}).then(res => {
        console.log('规格',res.data)
        this.specificationsList = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>

::v-deep .material_desc{
  .el-form-item__content{
    margin-left: 50px !important;
  }
}
::v-deep .el-form{
  position: relative;
  left: -10%;
  .el-form-item{
    display: inline-block;
  }
  .obsImage{
    width: 100%;
    display: block;
    margin-left: 8%;
    .el-form-item__label{
      width: 113px !important;
    }
    .el-form-item__error{
      position: relative;
      left: -10%;
    }
  }

  .obsActiveImage{
    .el-form{
        left:-14% !important
    }
    .el-form-item__label{
      width: 97px !important;
    }
  }

  .obsActiveImageStructure{
    .el-form-item__label{
      width:161px !important;
    }
  }

  .rowStructure{
    padding-left: 3.6%;
    .el-col .el-form-item{
      width:73%
    }
  }
}
</style>