zdsz_vue/src/components/EngineeNode/index.vue

 <!--
    *@description: 工程节点信息dialog
    *@author: yh Fu
    *@date: 2024-01-03 14:27:02
    *@version: V1.0.5
-->


<template>
  <div style="width: 100%; height: 100%;">
    <el-dialog :visible="nodeDetailVisible" :rules="nodeRules" title="节点信息" append-to-body customClass="appendElNodeDialog" width="70% !important"> 
      <!-- 节点选项卡 -->
      <el-tabs type="border-card" class="engineNodeTypes" @tab-click="nodeHasChanged">
        <el-tab-pane label="基本信息"></el-tab-pane>
        <el-tab-pane 
          :label="e"
          v-for="e in currentNode"
          :key="e"
          >
        </el-tab-pane>
      </el-tabs>
      <!-- 节点表单 -->
        <el-form ref="nodeForm" :model="zEngineeringInfoBo" :rules="nodeRules" label-width="200px">
            <!-- <el-form-item label="节点类型" prop="type">
             <el-select v-model="nodeType" placeholder="请选择节点类型">
                  <el-option
                    v-for="e in dict.type.engineering_infrastructure"
                    :key="e.value"
                    :label="e.label"
                    :value="e.value"
                    ></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="工程类型" prop="enginType">
              <el-select 
                  v-model="currentEnginType" 
                  placeholder="请选择工程类型"
                  @change="enginTypeHasChanged"
                  >
                <el-option
                  v-for="e in enginTypeOption"
                  :key="e.value"
                  :label="e.label"
                  :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="工程类型">
                <el-cascader
                    v-model="value"
                    :options="options"
                    @change="currentEnginTypeChange">
                </el-cascader>
              </el-form-item>
              <!-- <el-form-item label="工程节点">
                <el-select 
                    v-model="enginClassification" 
                    placeholder="请选择工程节点"
                    >
                  <el-option
                    v-for="e in enginClassificationOption"
                    :key="e.value"
                    :label="e.label"
                    :value="e.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
            <el-form-item label="施工地址" prop="constructAddre">
            <el-input v-model="zEngineeringInfoBo.constructAddre" placeholder="请填写施工地址"></el-input>
            </el-form-item>
            <el-form-item label="施工人电话" prop="constructPhone">
            <el-input v-model="zEngineeringInfoBo.constructPhone" placeholder="请填写施工人电话"></el-input>
            </el-form-item>
            <el-form-item label="施工人" prop="constructUser">
            <el-input v-model="zEngineeringInfoBo.constructUser" placeholder="请填写施工人"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="headName">
            <el-input v-model="zEngineeringInfoBo.headName" placeholder="请填写负责人"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话" prop="headPhone">
            <el-input v-model="zEngineeringInfoBo.headPhone" placeholder="请填写负责人电话"></el-input>
            </el-form-item>
            <el-form-item label="回填时间" prop="backfillTime">
            <el-date-picker
                v-model="zEngineeringInfoBo.backfillTime"
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                placeholder="请选择回填日期">
            </el-date-picker>
            </el-form-item>
            <el-form-item label="施工时间" prop="constructTime">
            <el-date-picker
                v-model="zEngineeringInfoBo.constructTime"
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                placeholder="请选择施工时间">
            </el-date-picker>
            </el-form-item>
            <el-form-item label="是否按图纸施工" prop="constructAccordingDrawings">
            <el-select v-model="zEngineeringInfoBo.constructAccordingDrawings">
                <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">
            <el-select v-model="zEngineeringInfoBo.segmentedCompressionQualified">
                <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" style="width: 100%;">
            <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="zEngineeringInfoBo.zEngiineeringPhotoBoList"
                            @input="getUrl"></ObsImageUpload>
            </el-form-item>
            <!-- 节点复选框 -->
            <el-checkbox-group v-model="currentNode" @change="currentNodeHasChanged">
              <el-checkbox 
                :label="e"
                v-for="e in nodeList"
                :key="e"
              ></el-checkbox>
            </el-checkbox-group>
            <div style="display: flex;margin-top: 3%;">
              <div style="width: 80%;"></div>
              <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
              <el-button type="primary" @click="addMaterial">添加用料单</el-button>
              <el-button @click="nodeCancel">取 消</el-button>
            </div>
        </el-form>
    </el-dialog>

    <el-drawer
      title="用料单"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <el-form ref="materialForm" :model="zEngineeringMaterialBoIO" :rules="materialRules" label-width="110px">
        <el-form-item label="腐蚀等级" prop="corrosionLevel" >
          <el-select v-model="zEngineeringMaterialBoIO.corrosionLevel">
              <el-option
                v-for="e in dict.type.corrosion_level"
                :key="e.value"
                :label="e.label"
                :value="e.value"
                >
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" prop="brand" >
          <el-select v-model="zEngineeringMaterialBoIO.brand">
              <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-form-item label="上门类型" prop="visitType">
            <el-select v-model="zEngineeringMaterialBoIO.visitType">
                <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-form-item label="自闭阀类型" prop="selfClosingValveType">
            <el-select v-model="zEngineeringMaterialBoIO.selfClosingValveType">
                <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-form>
    </el-drawer>
  </div>
</template>

<script>
import {
    addEnginee,                                // 新增工业工程
    addEngineeringDangerous,                   // 新增危险作业工程
    addEngineeringPipeJacking,                 // 新增顶管工程
    putEngineeringPipeJacking,                 // 修改顶管工程
    getEnginMaterialQualityList,               // 获取工程材质
    addEngineeringCivil,                       // 新增民用工程
    addEngineeringInfrastructure,              // 新增基建工程
    putEngineeringCivil,                       // 民用修改
    putEngineeringInfrastructure,              // 基建修改
} from "@/api/zdsz/enginee"
export default {
    name:'EngineeNode',
    dicts:['pass_check',
           'is_repair',
           'engin_type',
           'self_closing_valve_type',
           'visit_type',
           'corrosion_level',
           'brand',
           'engineering_infrastructure',
           'old_renovation',
           'new_built'
          ],
    data(){
        return {
            nodeType:null,              // 节点类型
            params:{},                  // 所有参数集合
            nodeDetailVisible:false,
            // 节点规则校验
            nodeRules:{
              type: [
                { required: true, message: "施工地址不能为空" ,trigger: 'blur'}
              ],
              constructAddre: [
                { required: true, message: "施工地址不能为空" ,trigger: 'blur'}
              ],
              constructPhone: [
                { required: true, message: "施工人电话不能为空" ,trigger: 'blur'}
              ],
              constructUser: [
                { required: true, message: "施工人不能为空" ,trigger: 'blur'}
              ],
              headName: [
                { required: true, message: "负责人不能为空" ,trigger: 'blur'}
              ],
              headPhone: [
                { required: true, message: "负责人电话不能为空" ,trigger: 'blur'}
              ],

            },
            zEngineeringInfoBo:{
              constructAddre:'',        // 施工地址
              constructPhone:'',        // 施工人电话
              constructUser:'',         // 施工人
              headName:'',              // 负责人
              headPhone:'',             // 负责人电话
              constructAccordingDrawings:'', // 是否按图纸施工
              segmentedCompressionQualified:'', // 分段打压是否合格
              backfillTime:'',                  // 回填时间
              constructTime:'',                  // 施工时间
              zEngiineeringPhotoBoList:[],              // 图片列表
              zEngineeringMaterialBo:[],// 用料对象

            },                          // 节点信息
            constructAccordingDrawingsOption:[
              {
                value:'1',
                label:'是'
              },
              {
                value:'0',
                label:'否'
              }
            ],
            segmentedCompressionQualifiedOption:[
              {
                value:'1',
                label:'合格'
              },
              {
                value:'0',
                label:'不合格'
              }
            ],
            currentEnginType:'',        // 当前所选工程类型
            enginTypeOption:[
              {
                value:'old_renovation',
                label:'旧改'
              },
              {
                value:'new_built',
                label:'新建'
              }
            ],
            options:[
              {
                value:'old_renovation',
                label:'旧改',
                children:[],
              },
              {
                value:'new_built',
                label:'新增',
                children:[]
              }
            ],
            enginClassification:'',
            enginClassificationOption:[],

            currentType:null ,          // 民用工程 0 ,市政工程 1,工业工程 2 ,顶管工程 3,危险作业工程 4,基建工程 5
            drawer: false,
            direction: 'rtl',
            materialRules:[],
            zEngineeringMaterialBoIO:{
              corrosionLevel:null,            // 腐蚀等级
              brand:null,                     // 品牌
              visitType:'',                   // 上门类型
              selfClosingValveType:'',        // 自闭阀类型
            },
            currentNode:[],
            nodeList:[],
            currentPickedNode:{} ,        // 当前所选中的节点界面
          }
    },
    created(){
      this.options[0].children = this.dict.type.old_renovation
      this.options[1].children = this.dict.type.new_built
    },
    methods:{
        nodeHasChanged(el){
          this.$nodeForm.validate(e => {
            if(e){
              // 通过校验
              this.currentPickedNode
            }else{
              this.$message.error('请完善当前节点信息！');
            }
          })

          return 
          // 拿到当前所选择的节点info
          const nodeItem = this.dict.type.engineering_infrastructure.find(e => e.label == this.currentNode[el.index -1])
          this.currentPickedNode = nodeItem
          console.log(nodeItem)
        },
        // 当前所选节点发生改变 
        currentNodeHasChanged(e){
        },
        // 添加用料
        addMaterial(){
          this.drawer = true
        },
        getUrl(url) {
            this.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList?this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
        },
        nodeCancel(){
            this.nodeDetailVisible = false
        },
        created() {
            this.params = this.queryParams
        },
        // 提交表单 创建新工程
        submitForm() {
          console.log(this.currentType)
            // this.$refs["nodeForm"].validate(valid => {
                // if (valid) {
                  this.zEngineeringInfoBo.zEngineeringMaterialBo.push(this.zEngineeringMaterialBoIO)
                    switch(this.currentType){
                        case 0 :
                            // 民用工程 新增
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            addEngineeringCivil(this.params).then(res => {
                              if(res.code == 200){
                                this.$message({
                                  message: '新增成功',
                                  type: 'success'
                                });
                                this.$emit('closeToSucceed')
                                this.nodeDetailVisible = false
                              }
                            })
                        break;
                        case 3 :
                            // 危险作业工程
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo.zEngineeringMaterialBo = []
                            console.log(this.params)
                            addEngineeringDangerous(this.params).then(res => {
                                console.log(res)
                            })
                        break;
                        case 4 :
                            // 基建工程新增
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            this.params.zEngineeringNodeBo.type = this.nodeType
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo.zEngineeringMaterialBo = []
                            addEngineeringInfrastructure(this.params).then(res => {
                              if(res.code == 200){
                                this.$message({
                                  message: '新增成功',
                                  type: 'success'
                                });
                                this.$emit('closeToSucceed')
                                this.nodeDetailVisible = false
                              }
                            })
                        break;
                        case 10 :
                            // 顶管新增
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                          debugger
                            addEngineeringPipeJacking(this.params).then(res => {
                              if(res.code == 200){
                                this.$message({
                                  message: '新增成功',
                                  type: 'success'
                                });
                                this.$emit('closeToSucceed')
                                this.nodeDetailVisible = false
                              }
                            })
                        break;
                        case 14 :
                            // 基建修改
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            putEngineeringInfrastructure(this.params).then(res => {
                              console.log('________',res)
                              if(res.code == 200){
                                this.$message({
                                  message: '修改成功',
                                  type: 'success'
                                });
                                this.$emit('closeToSucceed')
                                this.nodeDetailVisible = false
                              }
                            })
                        break;
                        case 15 :
                            // 顶管修改
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            putEngineeringPipeJacking(this.params).then(res => {
                              console.log('________',res)
                              if(res.code == 200){
                                this.$message({
                                  message: '修改成功',
                                  type: 'success'
                                });
                                this.$emit('closeToSucceed')
                                this.nodeDetailVisible = false
                              }
                            })
                        break;
                        case 16 :
                            // 民用修改
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            putEngineeringCivil(this.params).then(res => {
                              console.log('民用________',res)
                              if(res.code == 200){
                                this.$message({
                                  message: '修改成功',
                                  type: 'success'
                                });
                                this.$emit('closeToSucceed')
                                this.nodeDetailVisible = false
                              }
                            })
                        break;
                    }
                // this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                // console.log(this.queryParams)
                // addEnginee(this.queryParams).then(res => {
                //     console.log(res)
                // })
                // }
            // });
        },
        open(queryParams,type = null,nodeList = []){
            this.nodeList = []  // 节点初始化
            // 初始化工程节点
            this.dict.type.engineering_infrastructure.forEach(e => {
              this.nodeList.push(e.label)
            })
            console.log('当前工程所有节点',this.nodeList)
            // end
            this.currentType = type
            console.log(this.queryParams)
            console.log(this.currentType)
            getEnginMaterialQualityList(this.currentType).then(res => {
              console.log(res)
            })
            this.params = queryParams
            console.log('111',this.params)
            this.nodeDetailVisible = true
            if(type == 15){
              this.zEngineeringInfoBo = this.params.zEngineeringNodeBo.zEngineeringInfoBo
            }
            if(type == 16){
              this.zEngineeringInfoBo = this.params.zEngineeringNodeBo.zEngineeringInfoBo
            }
            if(type == 14){
              this.zEngineeringInfoBo = this.params.zEngineeringNodeBoList[0].zEngineeringInfoBoList[0]
            }
        },
        reset(){
            this.$refs['nodeForm'].resetFields()
            this.resetForm("nodeForm");
        }
    }
}
</script>

<style lang="scss" scoped>

::v-deep .engineNodeTypes{
    position: relative;
    top: -4%;
    left: -1.5%;
    width: 103%;
    box-shadow: none;
    .el-tabs__content{
      display: none;
    }
}
::v-deep .appendElNodeDialog{
  // width: 70%;
  height: 80%;


    .el-dialog__body{
      height: 85%;
    }

    .el-form-item{
      margin-bottom: 22px;
      width: 44%;
      display: inline-block;
    }
    .el-form-item:nth-child(2n+2){
      margin-left: 5%;
    }
    .el-form-item:not(:nth-child(1):nth-child(2)){
      margin-top: 0.5%;
    }
}
</style>