zdsz_vue/src/components/EngineePipe/index.vue

<!--
   *@description: 顶管工程
   *@author: yh Fu
   *@date: 2024-01-04 09:24:57
   *@version: V1.0.5
   -->

<template>
  <div class="app-container">
    <!--          新增主表与节点-->
    <el-dialog :title="title" :visible.sync="open" append-to-body customClass="appendElDialog">
        <el-form ref="form" :model="queryParams" :rules="rules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- <el-form-item label="工程类型" prop="type" v-show="!queryParams.id">
                <el-select v-model="queryParams.type" placeholder="请选择类型" disabled >
                  <el-option
                    v-for="e in dict.type.engin_type"
                    :key="e.value"
                    :label="e.label"
                    :value="e.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="节点类型" prop="zEngineeringNodeBoType">-->
<!--                <el-select v-model="queryParams.zEngineeringNodeBo.type" placeholder="请选择节点类型">-->
<!--                  <el-option-->
<!--                    v-for="e in dict.type.pipe_jack"-->
<!--                    :key="e.value"-->
<!--                    :label="e.label"-->
<!--                    :value="e.value"-->
<!--                  ></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工程名称" prop="enginName">
                <el-input v-model="queryParams.enginName" placeholder="请填写工程名称" maxlength="50" :disabled="title == '添加用料' "></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程地址" prop="enginAddre">
                <el-input v-model="queryParams.enginAddre" placeholder="请填写工程地址" maxlength="100" :disabled="title == '添加用料' "></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工程编码" prop="enginCode">
                <el-input v-model="queryParams.enginCode" placeholder="请填写工程编码" maxlength="50" :disabled="title == '添加用料' "></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施工单位" prop="constructUnit">
                <el-input v-model="queryParams.constructUnit" placeholder="请填写施工单位" maxlength="100" :disabled="title == '添加用料' "></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工程规模" prop="enginScale">
                <el-input v-model="queryParams.enginScale" placeholder="请填写工程规模" maxlength="50" :disabled="title == '添加用料' "></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施工质量" prop="constructQuality">
                <el-input v-model="queryParams.constructQuality" placeholder="请填写施工质量" maxlength="50" :disabled="title == '添加用料' "></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="施工进度" prop="constructSchedule">
                <el-input v-model="queryParams.constructSchedule" placeholder="请填写施工进度" maxlength="50" :disabled="title == '添加用料' "/>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="备注" prop="remark">-->
<!--                <el-input-->
<!--                  v-model="queryParams.remark"-->
<!--                  type="textarea"-->
<!--                  placeholder="请输入内容"-->
<!--                  maxlength="255"-->
<!--                  :disabled="title == '添加用料' "-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="文件" prop="" v-if="currentType=='put'">
                <ObsFileUpload ref="obsFileUpload" :file-size="100" :file-type="['dwg','dwt','doc','docx','xls','xlsx','png', 'jpg', 'jpeg','mp4']" :limit="9999"  :value="queryParams.pics" :disabled="title == '添加用料' "
                ></ObsFileUpload>
              </el-form-item>
              <el-form-item label="文件" prop="" v-if="currentType=='add'">
                <ObsFileUpload ref="obsFileUpload" :file-size="100" :file-type="['dwg','dwt','doc','docx','xls','xlsx','png', 'jpg', 'jpeg','mp4']" :limit="9999"  :value="queryParams.files" :disabled="title == '添加用料' "
                ></ObsFileUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="节点" style="width: 100%;margin-left: 0;" v-if="title!=='修改顶管信息' ">
            <el-checkbox-group v-model="currentCheckList">
              <el-checkbox
                :label="item.label"
                v-for="item in checkList"
                :key="item.label"
                ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <EnginNodeInfo
            v-for="(e,idx) in currentCheckList"
            :key="idx"
            :name="e"
            :ref="'EnginNodeInfo'+idx"
            :currentContain="(listContain.find(i => i.name == e)).components"
            :updateOption='(updateOption.find(i => i.type == e)) || {}'
            :types="currentCheckList"
            :status="enginNodeStatus"
            enginType="顶管工程"
          />
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button  type="primary" @click="submitData">提交</el-button> -->
          <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">{{keyWork}}</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
    <!-- 节点信息dialog -->
    <enginee-node
      @closeToSucceed="closeToSucceed"
      @files="getFiles"
      ref="childNode"
    />
  </div>
</template>

<script>
import {getComprehensive, delComprehensive} from "@/api/zdsz/comprehensive";
import EnginNodeInfo from "@/components/EnginNodeInfo/index";
import {
  getEngineeList,                            // 查询工程列表
  addEnginee,                                // 新增工程
  getDictList, putEngineeringPipeJacking,
  addEngineeringPipeJacking
} from "@/api/zdsz/enginee"
import EngineeNode from '@/components/EngineeNode/index'
// 节点信息

export default {
  name: "EngineePipe",
  components: {
    EngineeNode,
    EnginNodeInfo
  },
  dicts: ['pipe_jack'],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      keyWork:'新增',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 开栓|安检|维修表格数据
      comprehensiveList: [],
      // 弹出层标题
      title: "顶管信息",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        files:[],
        enginId: null,               // 外建工程
        enginName: '',               // 工程名称
        enginAddre: '',              // 工程地址
        enginScale: '',              // 工程名称联系方式
        enginCode: '',               // 工程编码
        constructQuality: '',        // 施工质量
        constructSchedule: "",       // 施工进度
        remark: '',                  // 备注
        constructUnit: null,
        zEngineeringNodeBo: {
          type: null,
          zEngineeringInfoBo: {},    //节点信息
        },
        zEngineeringNodeBoList:[]
      },
      zEngineeringInfoBo: {
        constructAddre: '',        // 施工地址
        constructPhone: '',        // 施工人电话
        constructUser: '',         // 施工人
        headName: '',              // 负责人
        headPhone: '',             // 负责人电话
        constructAccordingDrawings: '', // 是否按图纸施工
        segmentedCompressionQualified: '', // 分段打压是否合格
        selfClosingValveType: '',          // 自闭阀类型
        visitType: '',                     // 上门类型
        backfillTime: '',                  // 回填时间
        constructTime: '',                  // 施工时间
        zEngiineeringPhotoBoList: [],              // 图片列表
        zEngineeringMaterialBo: [],// 用料对象

      },
      constructAccordingDrawingsOption: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      nodeDetailVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        constructSchedule: [
          {required: true, message: "施工进度不能为空", trigger: 'blur'}
        ],
        constructQuality: [
          {required: true, message: "施工质量不能为空", trigger: 'blur'}
        ],
        constructUnit: [
          {required: true, message: "施工单位不能为空", trigger: 'blur'}
        ],
        enginName: [
          {required: true, message: "工程名称不能为空", trigger: 'blur'}
        ],
        enginAddre: [
          {required: true, message: "工程地址不能为空", trigger: 'blur'}
        ],
        enginScale: [
          {required: true, message: "工程规模不能为空", trigger: 'blur'}
        ],
        enginCode: [
          {required: true, message: "工程编码不能为空", trigger: 'blur'}
        ],
        remark: [
          {required: false, message: "备注不能为空", trigger: "blur"}
        ],
        files: [
          { required: false, message: '必须上传文件!', trigger: 'change' },
        ]


      },
      currentType: null, // 组件类型 put修改 add新增
      currentCheckList:[],
      enginNodeStatus:null,
      checkList:[],
      updateOption:[],
      listContain:[
        {
          name:'进场',
          components:[
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
              'remark',                                // 描述
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name:'导向',
          components:[
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
              'remark',                                // 描述
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name:'扩孔',
          components:[
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
              'remark',                                // 描述
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name:'回拖',
          components:[
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
              'remark',                                // 描述
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        }

      ]

    };
  },
  created() {
  },
  mounted(){
    this.checkList = this.dict.type.pipe_jack
  },
  methods: {
    // 顶管工程修改
    async putEnginPipe(data, type) {
      this.enginNodeStatus = '修改'
      await this.reset();
      let newData = data
      // let zEngineeringNodeBo = {
      //   type: data.zEngineeringNodeBoList[0].type,
      //   zEngineeringInfoBo: data.zEngineeringNodeBoList[0].zEngineeringInfoBoList[0]
      // }
      // newData.zEngineeringNodeBo = zEngineeringNodeBo
      this.currentType = type
      if (this.currentType=='put'){
        this.title = '修改顶管信息'
        this.keyWork = '修改'
      }
      this.queryParams = newData
      this.zEngineeringInfoBo = newData.zEngineeringNodeBoList
      this.open = true
    },
    closeToSucceed() {
      this.open = false
      this.nodeDetailVisible = false
    },
    getFiles(flag){
      if (flag){
        this.$refs.obsFileUpload.fileList=this.queryParams.files
      }
    },
    async openDialog(data, type,sata) {
      await this.reset();
      this.currentType = type
      if (this.currentType == 'add') {
        this.title = '新增顶管信息'
        this.queryParams.enginId = data.id
      } else if (this.currentType == 'put') {
        this.title = '修改顶管信息'
      } else if (this.currentType == 'addMaterial') {
        this.title = '添加用料'
        this.enginNodeStatus = '添加用料'
        this.queryParams = sata
      }
      this.queryParams.type = data.type
      //带值(民用工程、工业工程、市政工程)
      if (data.type=='民用工程'){
        this.queryParams.enginAddre =
          sata.district + ' - ' + sata.areaName + ' - ' + sata.buildingName + ' - ' + sata.unitName + ' - ' + sata.houseName;
      }
      if (['工业工程','市政工程'].includes(data.type)){
        this.queryParams.enginName = sata.enginName;
      }
      console.log('顶管params',this.queryParams)
      //带值
      this.queryParams.enginName = sata.enginName?sata.enginName:'';
      this.open = true
    },
    nodeCancel() {
      this.nodeDetailVisible = false
    },
    submitData(){

      // this.queryParams.files = this.$refs.obsFileUpload.fileList;
      if (this.$refs.obsFileUpload.fileList==null||this.$refs.obsFileUpload.fileList.length===0){
        this.$message.warning('必须上传文件!')
        return
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.queryParams.id != null) {
            putEngineeringPipeJacking(this.queryParams).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {

            });
          }
        }})
    },
    toNodeDetail() {
      let nodeCollection = []
      // 收集节点信息
      this.currentCheckList.forEach((e, idx) => {
        let nodeItem = this.$refs['EnginNodeInfo' + idx][0].infoCollection()
        nodeCollection.push(nodeItem)
      })
      this.queryParams.zEngineeringNodeBoList = nodeCollection
      // this.queryParams.zEngineeringNodeBoList[0].zEngineeringInfoBo.constructTime = this.queryParams.zEngineeringNodeBoList[0].constructTime
      // delete this.queryParams.zEngineeringNodeBoList[0].constructTime
      if (this.enginNodeStatus == '修改') {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.queryParams.files = this.$refs.obsFileUpload.fileList;
            if (this.$refs.obsFileUpload.fileList==null||this.$refs.obsFileUpload.fileList.length===0){
              this.$message.warning('必须上传文件!')
              return
            }
            if (this.queryParams.id != null) {
              putEngineeringPipeJacking(this.queryParams).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.currentCheckList = []
                this.getList();
              })
            }
          }})
      }
      else if(this.enginNodeStatus == '添加用料'){
        addEngineeringPipeJacking(this.queryParams).then(res => {
          if(res.code == 200){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.open = false
            console.log('选中节点集合',this.currentCheckList)
            this.currentCheckList = []
            this.getList()
            // this.$emit('closeToSucceed')
          }
        })
      }
      else {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.queryParams.files = this.$refs.obsFileUpload.fileList;
            if (this.$refs.obsFileUpload.fileList==null||this.$refs.obsFileUpload.fileList.length===0){
              this.$message.warning('必须上传文件!')
              return
            }
            addEngineeringPipeJacking(this.queryParams).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
                this.open = false
                console.log('选中节点集合', this.currentCheckList)
                this.currentCheckList = []
                this.getList()
                // this.$emit('closeToSucceed')
              }
            })
          }})
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.queryParams.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
      addEnginee(this.queryParams).then(res => {
      })
    }
  }
};
</script>


<style lang="scss" scoped>
::v-deep .appendElDialog {
  width: 950px;
  height: 700px;

  .el-dialog__footer {
    padding: 20px;
    padding-top: 0px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-dialog__body {
    overflow: hidden;
    overflow-y: scroll;
    height: 85%;
  }



  .el-form-item:nth-child(2n+2) {
    margin-left: 5%;
  }

  .el-form-item:not(:nth-child(1):nth-child(2)) {
    margin-top: 0.5%;
  }

  .remark_input {
    .el-textarea__inner {
      width: 238%;
      height: 190px;
    }
  }
}

::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>