zdsz_vue/src/components/EnginNodeInfo/indexSZ.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" :style=" '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="zEngiineeringPhotoBoList" class="obsImage" v-if="'回填、撤场' != name">
        <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoList"
                        @input="getUrl"></ObsImageUpload>
      </el-form-item>
      <el-form-item label="回填前" prop="zEngiineeringPhotoBoListOne" class="obsImage" v-if="'回填、撤场' == name">
        <ObsImageUpload ref="obsImageUpload1" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoListOne"
                        @input="getUrl1"></ObsImageUpload>
      </el-form-item>
      <el-form-item label="铺设警示带" prop="zEngiineeringPhotoBoListTwo" class="obsImage" v-if="'回填、撤场' == name">
        <ObsImageUpload ref="obsImageUpload2" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoListTwo"
                        @input="getUrl2"></ObsImageUpload>
      </el-form-item>
      <el-form-item label="回填后" prop="zEngiineeringPhotoBoListThree" class="obsImage" v-if="'回填、撤场' == name">
        <ObsImageUpload ref="obsImageUpload3" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoListThree"
                        @input="getUrl3"></ObsImageUpload>
      </el-form-item>
      <el-form-item label="施工内容" prop="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="['焊接、防腐','架空管线','下管','沟下连头'].includes(name)">
        <el-button @click="addMaterial()">新增用料信息</el-button>
      </div>
      <el-row v-for="(item, index) in zEngineeringMaterialBo" v-if="['焊接、防腐','架空管线','下管','沟下连头'].includes(name)" :key="index" style="left: 13.5%;" :class="'rowStructure'">
        <el-col :span="7">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.materialQuality'"
            label-width="50px"
            label="材质"

          >
            <el-select v-model="item.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(item, index)" filterable @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">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.specifications'"
            label-width="50px"
            label="规格"

          >
            <el-select v-model="item.specifications" placeholder="请选择规格" style="width: 100%" filterable @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>
        <el-col :span="7">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.number'"
            label-width="50px"
            label="米数"
          >
            <div class="block" style="display: inline-block; margin-right: 20px;">
              <el-input v-model="item.number" placeholder="请输入米数" style="width: 100%" oninput="value=value.match(/\d+(\.\d{0,1})?/) ? value.match(/\d+(\.\d{0,1})?/)[0] : ''" :disabled="status == 'read-only'"><template slot="append">米</template></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.number'"
            label-width="50px"
          ><div class="block" style="display: inline-block; margin-right: 20px;"></div></el-form-item>
        </el-col>

        <el-button v-if="zEngineeringMaterialBo.length > 0" @click="removezEngineeringMaterialBo(index)">
            删除
        </el-button>
      </el-row>
      <el-row v-for="(item, index) in zEngineeringMaterialBo" v-if="['阀井'].includes(name)" :key="index" style="left: 13.5%;" :class="'rowStructure'">
        <el-col :span="7">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.remark'"
            label-width="50px"
            label="型号"
          >
            <div class="block" style="display: inline-block; margin-right: 20px;">
              <el-input v-model="item.remark" placeholder="请输入型号" style="width: 100%" :disabled="status == 'read-only'"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            :prop="'zEngineeringMaterialBo.' + index + '.number'"
            label-width="50px"
          ><div class="block" style="display: inline-block; margin-right: 20px;"></div></el-form-item>
        </el-col>

        <el-button v-if="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'
import ObsVideoUpload from "@/components/ObsVideoUpload/index.vue";
export default {
  name:'EnginNodeInfo',
  props:['types','enginType','enginSort','enginNode','name','currentContain','updateOption','status'],
  dicts:[
    'visit_type',
    'self_closing_valve_type',
    'brand',
    'construct_addre'
  ],
  components:{ObsVideoUpload},
  data(){
    return {
      constructAccordingDrawingsOption:[
        {
          value:'Y',
          label:'是'
        },
        {
          value:'N',
          label:'否'
        }
      ],
      segmentedCompressionQualifiedOption:[
        {
          value:'1',
          label:'合格'
        },
        {
          value:'0',
          label:'不合格'
        }
      ],
      materialQualityList_zbf:[],                      // 自闭阀option
      materialQualityList_zjg:[],                      // 灶具管option
      materialQualityList:[],                     // 材质
      specificationsList:[],                      // 规格
      materialComponList:[],
      nodeInfo:{
        backfillTime:'',                        // 回填时间
        constructTime:'',
        constructAccordingDrawings:'',
        segmentedCompressionQualified:'',
        zEngiineeringPhotoBoList:[],            // 照片集合
        zEngiineeringPhotoBoListOne:[],            // 照片集合
        zEngiineeringPhotoBoListTwo:[],            // 照片集合
        zEngiineeringPhotoBoListThree:[],            // 照片集合
        zEngineeringMaterialBo:[],              // 用料集合
        remark:'',
        constructAddre:''
      },
      nodeInfoBo:{
        zEngineeringInfoBo:{

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

      ],                                         //  用料信息
      nodeRules:{
        zEngiineeringPhotoBoList: [
          {required: true, message: "至少上传一张图片", trigger: "change"}
        ],
        constructTime: [
          {required: true, message: "请选择施工时间", trigger: "change"}
        ]
      }
    }
  },
  created(){
      // 获取材质
      let enginType = '市政工程'
      getEnginMaterialQualityList({enginType:enginType}).then(res => {
        this.materialQualityList = res.data
      })
  },
  mounted(){
    console.log('当前节点name',this.name)
    console.log('update',this.updateOption)
    console.log('当前节点currentContain',this.types)
    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
      this.nodeInfo.zEngiineeringPhotoBoListOne = this.updateOption.zEngineeringInfoBoList[0].zEngiineeringPhotoBoListOne
      this.nodeInfo.zEngiineeringPhotoBoListTwo = this.updateOption.zEngineeringInfoBoList[0].zEngiineeringPhotoBoListTwo
    }

    setTimeout(() => {
      // 至少存在一条物料
      this.addMaterial()
    },1500)
    console.log('用料组件',this.materialComponList)
    console.log('用料信息',this.zEngineeringMaterialBo)
    console.log('节点信息',this.nodeInfo)
    // 添加用料对象
    // this.addMaterial()
  },
  methods:{
    selectBlur(_,index,name) {
      this.zEngineeringMaterialBo[index][name] = [...arguments][0][0].target.value
    },
    // 收集节点信息
    infoCollection(){
      let result = null
      console.log(this.$refs.fangxianForm)
      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节点详情对象中
          if (this.name!='回填、撤场'){
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoList = []
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.nodeInfo.zEngiineeringPhotoBoList
          }
          if (this.name=='回填、撤场'){
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoListOne = []
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoListTwo = []
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoListThree = []
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoListOne = this.nodeInfo.zEngiineeringPhotoBoListOne
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoListTwo = this.nodeInfo.zEngiineeringPhotoBoListTwo
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoListThree = this.nodeInfo.zEngiineeringPhotoBoListThree
          }
          this.nodeInfoBo.zEngineeringInfoBo.zEngineeringMaterialBo = this.zEngineeringMaterialBo
          this.nodeInfoBo.zEngineeringInfoBo.constructAddre=this.nodeInfo.constructAddre
          this.nodeInfoBo.zEngineeringInfoBo.constructTime=this.nodeInfo.constructTime
          this.nodeInfoBo.zEngineeringInfoBo.remark=this.nodeInfo.remark
          // 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 = {}
      // 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
      )
    },
    removezEngineeringMaterialBo(index){
      this.zEngineeringMaterialBo.splice(index, 1);
    },
    // 填充已有数据
    updateInfo(e){
      console.log('填充',e)
    },
    getUrl(url) {
      this.nodeInfo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList ? this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
    },
    getUrl1(url) {
      this.nodeInfo.zEngiineeringPhotoBoListOne = this.$refs.obsImageUpload1.fileList ? this.$refs.obsImageUpload1.fileList.map(e=>e.url):[];
    },
    getUrl2(url) {
      this.nodeInfo.zEngiineeringPhotoBoListTwo = this.$refs.obsImageUpload2.fileList ? this.$refs.obsImageUpload2.fileList.map(e=>e.url):[];
    },
    getUrl3(url) {
      this.nodeInfo.zEngiineeringPhotoBoListThree = this.$refs.obsImageUpload3.fileList ? this.$refs.obsImageUpload3.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>