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">
        <el-form ref="nodeForm" :model="zEngineeringInfoBo" :rules="nodeRules" label-width="110px">
            <el-form-item label="节点类型" prop="type">
            <el-input v-model="nodeType" placeholder="顶管" disabled></el-input>
            </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-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            <el-button type="primary" @click="addMaterial">添加用料单</el-button>
            <el-button @click="nodeCancel">取 消</el-button>
        </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,               // 新增民用工程
    putEngineeringCivil,                 // 民用修改
} from "@/api/zdsz/enginee"
export default {
    name:'EngineeNode',
    dicts:['pass_check','is_repair','engin_type','self_closing_valve_type','visit_type','corrosion_level','brand'],
    data(){
        return {
            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:'否'
              }
            ],
            currentType:null ,          // 民用工程 0 ,市政工程 1,工业工程 2 ,顶管工程 3,危险作业工程 4,基建工程 5
            drawer: false,
            direction: 'rtl',
            materialRules:[],
            zEngineeringMaterialBoIO:{
              corrosionLevel:null,            // 腐蚀等级
              brand:null,                     // 品牌
              visitType:'',                   // 上门类型
              selfClosingValveType:'',        // 自闭阀类型
            }
          }
    },
    methods:{
        // 添加用料
        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() {
            // 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 4 :
                            // 危险作业工程
                            this.params.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
                            console.log(this.params)
                            addEngineeringDangerous(this.params).then(res => {
                                console.log(res)
                            })
                        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 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){
            this.currentType = type
            console.log(this.queryParams)
            getEnginMaterialQualityList(this.currentType).then(res => {
              console.log(res)
            })
            this.params = queryParams
            this.nodeDetailVisible = true
            if(type == 15){
              this.zEngineeringInfoBo = this.params.zEngineeringNodeBo.zEngineeringInfoBo
            }
            if(type == 16){
              this.zEngineeringInfoBo = this.params.zEngineeringNodeBo.zEngineeringInfoBo
            }
        },
        reset(){
            this.$refs['nodeForm'].resetFields()
            this.resetForm("nodeForm");
        }
    }
}
</script>

<style lang="scss" scoped>
::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>