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"></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"></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"></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"></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"></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"></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"/>
              </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"
                />
              </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']" :limit="9999"  :value="queryParams.pics"
                ></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']" :limit="9999"  :value="queryParams.files"
                ></ObsFileUpload>
              </el-form-item>
            </el-col>
          </el-row>
        </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 {
  getEngineeList,                            // 查询工程列表
  addEnginee,                                // 新增工程
  getDictList, putEngineeringPipeJacking,
} from "@/api/zdsz/enginee"
import EngineeNode from '@/components/EngineeNode/index'
// 节点信息

export default {
  name: "EngineePipe",
  components: {
    EngineeNode
  },
  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: "",       // 施工进度
        type: null,                // 类型
        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新增
    };
  },
  created() {
  },
  methods: {
    // 顶管工程修改
    async putEnginPipe(data, type) {
      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 = '新增顶管信息'
      } else if (this.currentType == 'put') {
        this.title = '修改顶管信息'
      }
      this.queryParams.enginId = data.id
      this.queryParams.type = data.type
      //带值
      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() {
      if (this.$refs.obsFileUpload.fileList==null||this.$refs.obsFileUpload.fileList.length===0){
        this.$message.warning('必须上传文件!')
        return
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          getDictList({enginType:['pipe_jack']}).then(res => {
            this.nodeList = res.data
            this.nodeList.forEach(e => {
              e.name = e.value
            })
            if (this.currentType == 'put') {
              this.queryParams.files = this.$refs.obsFileUpload.fileList;
              this.$refs.childNode.open(this.queryParams, 15,this.nodeList)
            } else if (this.currentType == 'add') {
              this.queryParams.files = this.$refs.obsFileUpload.fileList;
              this.$refs.childNode.open(this.queryParams, 10,this.nodeList)
            }
          })
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      // this.$nextTick(() => {
      //   this.$refs['form'].resetFields()
      //   this.$refs['nodeForm'].resetFields()
      // })
      this.resetForm("form");
      this.resetForm("nodeForm");
      this.queryParams.files=[]
    },
    /** 提交按钮 */
    submitForm() {
      this.queryParams.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
      addEnginee(this.queryParams).then(res => {
      })
    }
  }
};
</script>


<style lang="scss" scoped>
::v-deep .appendElDialog {
  width: 850px;
  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 {
    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>