zdsz_vue/src/views/zdsz/engineeringGasOpening/index.vue

<!--
   *@description: 工业工程
   *@author: yh Fu
   *@date: 2024-01-02 15:51:03
   *@version: V1.0.5
   -->

<template>
  <div class="app-container">
    <el-form :model="searchParams" ref="searchParams" size="small" :inline="true" v-show="showSearch"
             label-width="110px">
      <el-form-item label="行政区" prop="district">
        <el-select v-model="searchParams.district" placeholder="请选择行政区" clearable
                   @change="searchParams.areaId = undefined;areaList=[];
                   searchParams.buildingId = undefined;buildingList=[];
                   searchParams.unitId = undefined;unitList=[];
                   searchParams.houseId = undefined;houseList=[];
                   getAreaList(searchParams.district)">
          <el-option
            v-for="dict in dict.type.district"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="小区名称" prop="areaId">
        <el-select v-model="searchParams.areaId" filterable clearable placeholder="请选择小区"
                   @change="searchParams.buildingId = undefined;buildingList=[];
                   searchParams.unitId = undefined;unitList=[];
                   searchParams.houseId = undefined;houseList=[];
                   getBuildingList1(searchParams.areaId)">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼宇名称" prop="buildingId">
        <el-select v-model="searchParams.buildingId" filterable clearable placeholder="请选择楼宇"
                   @change="searchParams.unitId = undefined;unitList=[];
                   searchParams.houseId = undefined;houseList=[];
                   getUnitList1(searchParams.buildingId)">
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单元" prop="unitId">
        <el-select v-model="searchParams.unitId" placeholder="请选择单元" filterable clearable
                   @change="searchParams.houseId = undefined;houseList=[];getHouseList1(searchParams.unitId)"
        >
          <el-option
            v-for="obj in unitList"
            :key="obj.id"
            :label="obj.name"
            :value="obj.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间" prop="houseId">
        <el-select v-model="searchParams.houseId" placeholder="请选择房间" filterable clearable>
          <el-option
            v-for="obj in houseList"
            :key="obj.id"
            :label="obj.name"
            :value="obj.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['zdsz:engineeringGasOpening:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['zdsz:engineeringGasOpening:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['zdsz:engineeringGasOpening:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['zdsz:engineeringGasOpening:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="comprehensiveList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
<!--      <el-table-column label="工程名称" align="center" prop="enginName"/>-->
      <el-table-column label="行政区" align="center" prop="district">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.district" :value="scope.row.district"/>
        </template>
      </el-table-column>
      <el-table-column label="小区名称" align="center" prop="areaName"/>
      <el-table-column label="楼宇名称" align="center" prop="buildingName"/>
      <el-table-column label="单元名称" align="center" prop="unitName"/>
      <el-table-column label="房间名称" align="center" prop="houseName"/>
<!--      <el-table-column label="燃气表号" align="center" prop="gasMeterNumber"/>-->
      <el-table-column label="审核是否合格" align="center" prop="isQualified" >
        <template slot-scope="scope">
          <el-tag slot="reference" v-for="item in stateArray" v-if="item.value==scope.row.state">{{item.label}}</el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column label="工程分类" align="center" prop="enginClassification"/>-->
      <!--<el-table-column label="现场负责人" align="center" prop="sceneHead"/>-->
      <!--<el-table-column label="设计负责人" align="center" prop="designHead"/>-->
      <!--<el-table-column label="监理负责人" align="center" prop="supervisionHead"/>-->
      <!--<el-table-column label="监理单位" align="center" prop="supervisionUnit"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleview(scope.row)"
            v-hasPermi="['zdsz:engineeringGasOpening:query']"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.state != '1'"
            v-hasPermi="['zdsz:engineeringGasOpening:update']"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['zdsz:engineeringGasOpening:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="searchParams.pageNum"
      :limit.sync="searchParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改开栓工程对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body customClass="appendElDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="height: 100%;overflow: hidden;overflow-y: auto;">
        <el-row>
          <el-col :span="12">
            <h1>基础信息</h1>
          </el-col>
          <el-col :span="12" v-if="buttonShow">
            <el-form-item label-width="180px" label="审核是否合格" >
              <el-radio-group v-model="form.state" style="width: 220px">
                <el-radio
                  v-for="dict in stateArray"
                  :key="dict.value"
                  :label="dict.value"
                  v-if="dict.value != '2'"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="行政区" prop="district">
              <el-select
                  :disabled="title != '新增开栓施工' "
                  v-model="form.district"
                  placeholder="请选择行政区"
                  filterable
                  @change="districtHasChanged"
                  style="width: 150px"
              >
                <el-option
                    v-for="e in dict.type.district"
                    :key="e.value"
                    :label="e.label"
                    :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="小区" prop="areaId">
              <el-select
                  :disabled="title != '新增开栓施工' "
                  v-model="form.areaId"
                  filterable
                  placeholder="请选择小区"
                  @change="communityHasChanged"
                  style="width: 150px"
              >
                <el-option
                    v-for="e in communityOptions"
                    :key="e.id"
                    :label="e.name"
                    :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="楼栋" prop="buildingId">
              <el-select
                  :disabled="title != '新增开栓施工' "
                  filterable
                  v-model="form.buildingId"
                  placeholder="请选择楼栋"
                  @change="buildingHasChanged"
                  style="width: 150px"
              >
                <el-option
                    v-for="e in buildingOptions"
                    :key="e.id"
                    :label="e.name"
                    :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="单元" prop="unitId">
              <el-select
                  :disabled="title != '新增开栓施工' "
                  v-model="form.unitId"
                  filterable
                  placeholder="请选择单元"
                  @change="unitHasChanged"
                  style="width: 150px"
              >
                <el-option
                    v-for="e in unitOptions"
                    :key="e.id"
                    :label="e.name"
                    :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="房间" prop="houseId">
              <el-select
                  :disabled="title != '新增开栓施工' "
                  v-model="form.houseId"
                  filterable
                  placeholder="请选择房间"
                  style="width: 150px"
              >
                <el-option
                    v-for="e in houseOptions"
                    :key="e.id"
                    :label="e.name"
                    :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>燃气立杠</h1>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label-width="180px" label="立杠是否刷涂防腐漆" prop="isAntiCorrosionPaint">
              <el-radio-group v-model="form.isAntiCorrosionPaint">
                <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label-width="180px" label="是否有立杠卡子" prop="isVerticalBarClamp" style="width: 100%">
              <el-radio-group v-model="form.isVerticalBarClamp">
                <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label-width="180px" label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getgasCylinderPic(arguments)"
                  :value="form.gasCylinderPic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>

            <!--<el-form-item label-width="180px" label="照片" style="width: 100%">-->
              <!--<ObsFileUpload ref="obsFileUpload" :file-size="100"-->
                             <!--:file-type="['png', 'jpg', 'jpeg','mp4']"-->
                             <!--:limit="9999"-->
                             <!--:value="form.gasCylinderPic"-->
                             <!--@input="filesUpload"-->
              <!--&gt;</ObsFileUpload>-->
            <!--</el-form-item>-->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>气密测试</h1>
          </el-col>
        </el-row>
        <el-form-item label="气密测试" prop="verticalBarTest">
          <el-checkbox-group v-model="form.verticalBarTest">
            <el-checkbox
              v-for="dict in dict.type.vertical_bar"
              :key="dict.value"
              :label="dict.label"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getpressureTestPic(arguments)"
                  :value="form.pressureTestPic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>燃气表</h1>
          </el-col>
        </el-row>
        <el-form-item label="表号" prop="gasMeterNumber">
          <el-input v-model="form.gasMeterNumber" placeholder="请填写表号" maxlength="60"></el-input>
        </el-form-item>
        <el-form-item label="表字" prop="gasMeterCount">
          <el-input v-model="form.gasMeterCount" placeholder="请填写表字" maxlength="60"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="gasMeterBrand">
          <el-radio-group v-model="form.gasMeterBrand">
            <el-radio
              v-for="dict in dict.type.gas_meter_brand"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="型号" prop="gasMeterType">
          <el-radio-group v-model="form.gasMeterType">
            <el-radio
              v-for="dict in dict.type.gas_meter_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="进气方向" prop="gasMeterDirection">
          <el-radio-group v-model="form.gasMeterDirection">
            <el-radio
                v-for="dict in dict.type.gas_meter_direction"
                :key="dict.value"
                :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getgasMeterPic(arguments)"
                  :value="form.gasMeterPic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>表后管</h1>
          </el-col>
        </el-row>
        <el-form-item label="管表后管卡子" prop="isRearPipeClamp">
          <el-radio-group v-model="form.isRearPipeClamp">
            <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getrearPipePic(arguments)"
                  :value="form.rearPipePic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>灶前阀门</h1>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="是否阀管改造" prop="gasChangeType">
              <el-radio-group v-model="form.isGasChangeType">
                <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.isGasChangeType == 'Y'">
          <el-col :span="24">
            <el-form-item label="阀管改造类型" prop="gasChangeType">
              <el-radio-group v-model="form.gasChangeType">
                <el-radio
                    v-for="dict in dict.type.gas_change_type"
                    :key="dict.value"
                    :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getgasChangePic(arguments)"
                  :value="form.gasChangePic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>软管</h1>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getsoftPipePic(arguments)"
                  :value="form.softPipePic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>灶具</h1>
          </el-col>
        </el-row>
        <el-form-item label="是否使用防风圈" prop="isWindproofCircle">
            <el-radio-group v-model="form.isWindproofCircle">
              <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getwindproofCirclePic(arguments)"
                  :value="form.windproofCirclePic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>用气环境 </h1>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getgasEnvironmentPic(arguments)"
                  :value="form.gasEnvironmentPic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1>回执单</h1>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片" style="width: 100%">
              <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getreceiptFormPic(arguments)"
                  :value="form.receiptFormPic"
                  :disabled="status == 'read-only' "
              ></ObsImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="width: 25%; float: right;margin-top:2%" >
        <el-button :loading="buttonLoading" type="primary" @click="submitForm" v-if="!buttonLoading">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getEngineeGasOpeningList,
  addEngineeEngineeGasOpening,
  UpdateEngineeGasOpening,
  DelEngineeGasOpening,
  EditEngineeGasOpening,
  putEngineeGasOpening,
  QueryEngineeGasOpening,
} from '@/api/zdsz/engineeringGasOpening'
import {
  addEnginee,                                // 新增工程
  getHousesList,                             // 获取当前房间集合
  putEngineeringCivil,                       // 民用工程修改
  viewEngineeringCivil,                      // 民用工程查看详情
  deleteEngineeringCivil,                    // 删除民用工程
  getDictList,
  viewEngineeringInfrastructureSource,
  viewEngineeringCivilSource,

  engineeringCivilAllReview,
  CivilReview, batchNode
} from "@/api/zdsz/enginee"
import {getAreaList} from "@/api/zdsz/area";
import {getBuildingList} from "@/api/zdsz/building";
import {getUnits} from "@/api/zdsz/unit";
import {getHouses} from "@/api/zdsz/house";
import {getDicts} from "@/api/system/dict/data";
import {validPhoneMobile} from '@/api/rules'
import {getEnginMaterialQualityList} from '@/api/zdsz/enginee'
import {getEnginSpecificationsList} from '@/api/zdsz/enginSpecifications'

export default {
  name: "openrepair",
  dicts: ['sys_yes_no', 'is_repair', 'industry_engin_type', 'self_closing_valve_type', 'visit_type', 'engin_classification',
    'engineering_infrastructure', 'air_wall_node', 'gas_meter_direction', 'gas_change_type', 'district','vertical_bar',
    'gas_meter_brand','gas_meter_type'],
  data() {
    // 自定义校验
    const validatePicPass = (rule, value, callback) => {
      return new Promise((resolve, reject) => {
        // 至少有一个图片、一个创建时间
        if (this.zEngineeringNodeBo.zEngineeringInfoBo.zEngiineeringPhotoBoList.length !== 0
          && (this.zEngineeringNodeBo.zEngineeringInfoBo.constructTime !== null || undefined)) {
          resolve(true)
        } else {
          reject(new Error('no pass'))
        }
      })
    }
    return {
      stateArray:[
        {label:'未审核',value:'2'},
        {label:'审核通过',value:'1'},
        {label:'审核不通过',value:'0'},
      ],

      communityOptions: [],        // 小区集合
      buildingOptions: [],         // 楼栋集合
      unitOptions: [],             // 单元集合
      houseOptions: [],            // 房间集合
      // 按钮loading
      buttonLoading: false,
      buttonShow: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      status: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 工程类型
      enginType: true,
      // 工程分类显示
      engineeType: true,
      // 总条数
      total: 0,
      currentNode: [],
      currentCollapses: [],
      // 开栓施工表格数据
      comprehensiveList: [],
      // 弹出层标题
      title: "",
      gc: true,
      nodeList: [],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        enginType: null,
        enginName: '', // 工程名称
        enginClassification: '', // 工程分类
      },
      nodeDetailVisible: false, // 施工信息dialog
      MaterVisible: false, // 用料信息dialog
      // 表单参数
      form: {
        verticalBarTest:[],
        isQualified:'',
        gasCylinderPic: [], // 燃气立杠图片
        pressureTestPic: [], // 气密测试图片
        gasMeterPic: [], // 燃气表图片
        rearPipePic: [], // 表后管图片
        gasChangePic: [], // 灶前阀门图片
        softPipePic: [], // 软管图片
        windproofCirclePic: [], // 灶具阀门图片
        gasEnvironmentPic: [], // 用气环境图片
        receiptFormPic: [], // 回执单图片
        files: [], // 附件
        pics: [], // 附件返回
        type: '', // 用来区分工业工程、市政工程
        enginName: '', // 工程名称
        enginType: '', // 工程类型
        constructUnit: '', // 建筑单位
        projectHead: '', // 项目负责人
        sceneHead: '', // 现场负责人
        designUnit: '', // 设计单位
        designHead: '', // 设计负责人
        designPhone: '', // 设计联系电话
        supervisionUnit: '', // 监理单位
        supervisionHead: '', // 监理负责人
        supervisionPhone: '', // 监理联系电话
        enginClassification: [], // 工程分类
        zEngineeringNodeBo: { // 工程节点
          type: '', // 节点类型
          zEngineeringInfoBo: { // 施工信息
            constructUser: '', // 施工人
            constructTime: '', // 施工时间
            zEngiineeringPhotoBoList: [], // 图片列表
            zEngineeringMaterialBo: [ // 用料对象
              {
                materialQuality: '', // 用料材质
                specifications: '', // 用料规格
                number: '' // 用料数量
              },
            ],
          },
        },
      },
      zEngineeringMaterialBo: [ // 用料对象
        {
          materialQuality: '', // 用料材质
          specifications: '', // 用料规格
          number: '' // 用料数量
        },
      ],
      zEngineeringNodeBo: { // 工程节点
        type: '', // 节点类型
        zEngineeringInfoBo: { // 施工信息
          constructUser: '', // 施工人
          constructTime: '', // 施工时间
          zEngiineeringPhotoBoList: [], // 图片列表
        }
      },
      EngineepipeType: [], // 工程类型
      materialQualityList: [], // 用料材质List
      specificationsList: [], // 用料规格List
      // 表单校验
      rules: {
        enginName: [
          {required: true, message: "工程名称不能为空", trigger: 'blur'}
        ],
        isAntiCorrosionPaint: [
          {required: true, message: "立杠是否刷涂防腐漆不能为空", trigger: 'blur'}
        ],
        isVerticalBarClamp: [
          {required: true, message: "是否有立杠卡子不能为空", trigger: 'blur'}
        ],
        gasCylinderPic: [
          {required: true, message: "请上传燃气立杠照片", trigger: "blur"}
        ],
        // pressureTestPic: [
        //   {required: true, message: "请上传气密测试照片", trigger: "blur"}
        // ],
        // gasMeterPic: [
        //   {required: true, message: "请上传燃气表照片", trigger: "blur"}
        // ],
        // rearPipePic: [
        //   {required: true, message: "请上传表后管照片", trigger: "blur"}
        // ],
        // gasChangePic: [
        //   {required: true, message: "请上传灶前阀门照片", trigger: "blur"}
        // ],
        // softPipePic: [
        //   {required: true, message: "请上传软管照片", trigger: "blur"}
        // ],
        // windproofCirclePic: [
        //   {required: true, message: "请上传灶具阀门照片", trigger: "blur"}
        // ],
        // gasEnvironmentPic: [
        //   {required: true, message: "请上传用气环境照片", trigger: "blur"}
        // ],
        // receiptFormPic: [
        //   {required: true, message: "请上传回执单照片", trigger: "blur"}
        // ],
      },
      // 节点规则校验
      nodeRules: {
        constructTime: [
          {required: true, message: "施工时间不能为空", trigger: ['change', 'blur']}
        ],
        zEngiineeringPhotoBoList: [
          {required: true, message: "图片不能为空", trigger: ['change', 'blur'], validator: validatePicPass}
        ],
      },
      searchParams: {
        pageSize: 10,
        pageNum: 1,
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
      },
      areaList: [],
      buildingList: [],
      unitList: [],
      houseList: [],

      currentType: null, // 附件组件类型 put修改 add新增
    };
  },
  created() {
    // 根据url获取type节点类型
    this.getType();
    if (this.form.type === '2') {
      this.engineeType = false
    }
    this.getList();
  },
  mounted() {
    // 获取材质
    // getEnginMaterialQualityList({enginType: this.$route.query.type == '1' ? '工业工程' : '市政工程'}).then(res => {
    getEnginMaterialQualityList({enginType: '开栓施工'}).then(res => {
      this.materialQualityList = res.data
    });
  },
  methods: {
    // 当前所选行政区发生改变 查询当前小区集合
    districtHasChanged(district) {
      this.form.areaId = null
      this.form.buildingId = null
      this.form.unitId = null
      this.communityOptions = [];
      this.buildingOptions = [];
      this.unitOptions = [];
      this.houseOptions = [];
      getAreaList({district}).then(res => {
        this.communityOptions = res.data
      })
    },
    // 当前所选小区发生改变 查询当前楼栋集合
    communityHasChanged(areaId) {
      this.form.buildingId = null
      this.form.unitId = null
      this.buildingOptions = [];
      this.unitOptions = [];
      this.houseOptions = [];
      getBuildingList({areaId}).then(res => {
        this.buildingOptions = res.data
      })
    },
    buildingHasChanged(buildingId, areaId) {
      this.unitOptions = [];
      this.houseOptions = [];
      this.form.unitId = null
      getUnits(buildingId).then(res => {
        this.unitOptions = res.data
      })
    },
    unitHasChanged(unitId) {
      this.houseOptions = [];
      getHousesList({unitId}).then(res => {
        console.log(res)
        this.houseOptions = res.data
      })
    },
    getAreaList(district) {
      if (district === undefined || district == null || district === '')
        return
      getAreaList({district: district}).then(res => this.areaList = res.data)
    },
    getBuildingList1(areaId) {
      if (areaId === undefined || areaId == null || areaId === '')
        return
      getBuildingList({areaId: areaId}).then(res => this.buildingList = res.data)
    },
    getUnitList1(buildingId) {
      if (buildingId === undefined || buildingId == null || buildingId === '')
        return
      getUnits(buildingId).then(res => this.unitList = res.data)
    },
    getHouseList1(unitId) {
      if (unitId === undefined || unitId == null || unitId === '')
        return
      getHouses(unitId).then(res => this.houseList = res.data)
    },

    formatFormPic(picList){
      let list = []
      for (let i = 0; i < picList.length; i++) {
        list.push({
          picUrl:picList[i].url,
          fileName:picList[i].name
        })
      }
      return list
      //   [{
      //   picUrl:url,
      //   fileName:name
      // }]
    },
    getgasCylinderPic(_,idx){
      // console.log('____===',_)
      this.form.gasCylinderPic = [...arguments][0][0].map(e=>e.url) || [];
      // this.form.gasCylinderPic = this.formatFormPic(_)
    },
    getpressureTestPic(_,idx){
      this.form.pressureTestPic = [...arguments][0][0].map(e=>e.url) || [];
      // this.form.pressureTestPic = this.formatFormPic(_)
    },
    getgasMeterPic(_,idx){
      this.form.gasMeterPic = [...arguments][0][0].map(e=>e.url) || [];
    },
    getrearPipePic(_,idx){
      this.form.rearPipePic = [...arguments][0][0].map(e=>e.url) || [];
    },
    getgasChangePic(_,idx){
      this.form.gasChangePic = [...arguments][0][0].map(e=>e.url) || [];
    },
    getsoftPipePic(_,idx){
      this.form.softPipePic = [...arguments][0][0].map(e=>e.url) || [];
    },
    getwindproofCirclePic(_,idx){
      this.form.windproofCirclePic = [...arguments][0][0].map(e=>e.url) || [];
    },
    getgasEnvironmentPic(_,idx){
      this.form.gasEnvironmentPic = [...arguments][0][0].map(e=>e.url) || [];
    },
    getreceiptFormPic(_,idx){
      this.form.receiptFormPic = [...arguments][0][0].map(e=>e.url) || [];
    },
      parseDict(dictValue, dictionary) {
        const dict = this.dict.type[dictionary]
        for(let i = 0; i < dict.length; i++){
          if(dict[i].value == dictValue){
            return dict[i].label
          }
        }
      },
    filesUpload(url){
      console.log('upload successfully')
      this.form.files = url
      this.$refs.form.validate()
    },
    validateState(rule, value, callback) {
      console.log(rule)
      console.log(value)
      return new Promise((resolve, reject) => {
        if (value !== null && value !== undefined && value !== '' && value !== 0) {
          resolve(true)
        } else {
          return callback(new Error('材质不能为空'))
        }
      })
    },
    validateSize(rule, value, callback) {
      console.log(value)
      return new Promise((resolve, reject) => {
        const value = this.zEngineeringMaterialBo[rule.index].specifications
        console.log(value)
        if (value !== null && value !== undefined && value !== '' && value !== 0) {
          resolve(true)
        } else {
          return callback(new Error('规格不能为空'))
        }
      })
    },
    validateNumber(rule, value, callback) {
      console.log(value)
      return new Promise((resolve, reject) => {
        const value = this.zEngineeringMaterialBo[rule.index].number
        // 至少有一个图片、一个用料信息、一个创建时间
        if (value) {
          resolve(true)
        } else {
          return reject(new Error('数量不能为空'))
        }
      })
    },
    updateNodeOption(value) {
      console.log(this.form);
      console.log('updateNodeOption=',value)
      console.log('this.form=',this.form)
      this.form.files = this.form.pics
      if(this.form.zEngineeringNodeBo && !this.form.zEngineeringNodeBo.zEngineeringInfoBo){
        this.form.zEngineeringNodeBo.zEngineeringInfoBo = {}
      }
      this.form.zEngineeringNodeBo.zEngineeringInfoBo.ironPipelineThickness = value[0].ironPipelineThickness
      UpdateEngineeGasOpening(this.form).then(res => {
        this.$modal.msgSuccess("修改成功");

        this.$refs.ConstructionDetails.dialogVisible = false
      })
      this.getList();
    },
    // 根据所选材质获取对应规格
    getEnginSpecificationsList(item, index) {
      this.zEngineeringMaterialBo[index].specifications = null
      // 根据材质ID获取材质规格
      getEnginSpecificationsList(item.materialQuality).then(res => {
        this.zEngineeringMaterialBo.specifications = res.data
      })
    },
    //添加用料信息
    async addzEngineeringMaterBo(row) {
      this.zEngineeringNodeBo = { // 工程节点
        type: '', // 节点类型
        zEngineeringInfoBo: { // 施工信息
          constructUser: '', // 施工人
          constructTime: '', // 施工时间
          zEngiineeringPhotoBoList: [], // 图片列表
          zEngineeringMaterialBo: []
        },
      }
      this.zEngineeringMaterialBo = [ // 用料对象
        {
          materialQuality: '', // 用料材质
          specifications: '', // 用料规格
          number: '' // 用料数量
        },
      ]
      const id = row.id
      putEngineeGasOpening(id).then(response => {
        this.loading = false;
        this.form = response.data
        this.form.zEngineeringNodeBo = []
        this.nodeDetailVisible = true;
      });
    },
    updateMaterBo() {
      this.form.zEngineeringNodeBo = []
      if (this.zEngineeringMaterialBo.length > 0) {
        let valid = true;
        if (this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['materialQuality'] == '' || this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['materialQuality'] == null) {
          valid = false;
        }
        if (this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['specifications'] == '' || this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['specifications'] == null) {
          valid = false;
        }
        if (this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['number'] == '' || this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['number'] == null) {
          valid = false;
        }
        // if (this.form.enginClassification != [] && this.form.enginClassification.length>0) {
        //   this.form.enginClassification = this.form.enginClassification.join(',');
        // }
        if (valid) {
          this.zEngineeringNodeBo.zEngineeringInfoBo.zEngineeringMaterialBo = this.zEngineeringMaterialBo
          this.form.zEngineeringNodeBo = this.zEngineeringNodeBo
          this.zEngineeringNodeBo.type = this.$route.query.type
          this.$refs.nodeForm.validate(valid => {
            if (valid) {
              EditEngineeGasOpening(this.form).then(res => {
                this.nodeDetailVisible = false
                this.$modal.msgSuccess("新增成功");
              })
            }
          });
        } else {
          this.$message.warning('完善信息!')
        }
      }

    },
    //添加用料
    addzEngineeringMaterialBo() {
      if (this.zEngineeringMaterialBo.length > 0) {
        let valid = true;
        if (this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['materialQuality'] == '' || this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['materialQuality'] == null) {
          valid = false;
        }
        if (this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['specifications'] == '' || this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['specifications'] == null) {
          valid = false;
        }
        if (this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['number'] == '' || this.zEngineeringMaterialBo[this.zEngineeringMaterialBo.length - 1]['number'] == null) {
          valid = false;
        }

        if (valid) {
          this.zEngineeringMaterialBo.push({
            materialQuality: '', // 用料材质
            specifications: '', // 用料规格
            number: '' // 用料数量
          })
        } else {
          this.$message.warning('完善信息!')
        }
      }
    },
    // 删除用料信息
    removezEngineeringMaterialBo(index) {
      this.zEngineeringMaterialBo.splice(index, 1)
    },
    // 根据url获取type节点类型
    getType() {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const type = params.get('type');
      if (type) {
        this.form.type = type;
        this.form.zEngineeringNodeBo.type = (type === '1' ? "工业工程" : "市政工程")
        this.EngineepipeType = (type === '1' ? [{value: '小微商服', label: '小微商服'}, {
            value: '新建工业',
            label: '新建工业'
          }, {value: '改造工业', label: '改造工业'}]
          : [{value: '气源', label: '气源'}, {value: '排迁', label: '排迁'}])
      }
    },
    // 新增顶管工程
    addNewPipe(data) {
      // console.log(this.form)
      this.$refs.enginPipe.openDialog({
        id: data.id,
        type: this.form.type
      }, 'add', data)
    },
    // 历史查询
    viewSource(e) {
      console.log('历史查询', e)
      console.log('历史查询e.enginType', e.enginType)
      this.currentId = e.id
      let val = e.enginType + "_" + e.enginClassification
      val = 'air_wall_node'
      // alert(val)
      getDicts(val).then(res => {
        let dict = []
        for (let i = 0; i < res.data.length; i++) {
          dict.push({
            "label": res.data[i].dictLabel,
            "value": res.data[i].dictValue,
          })
        }
        this.enginType = e.enginType
        // 此处有注释
        this.$refs.ConstructionDetails.open([{
          value: "历史数据",
          label: "历史数据"
        }], e.enginType,null,null,null,null,null,e.enginType)
        // this.$refs.ConstructionDetails.open(dict, this.form.type,null,null,null,null,null,this.form.type === '1' ? "工业工程" : "市政工程")
        this.status = 'read-only'
      })
    },
    // 修改施工信息
    updateviewSource(e) {
      let dicts = []
      let enginType = e.enginType
      const dict = this.dict.type.air_wall_node
      for(let i = 0; i < dict.length; i++){
        if(dict[i].value == enginType){
          dicts.push({
            value: dict[i].value,
            label: dict[i].label
          })
        }
      }
      // this.enginType = enginType
      this.currentId = e.id

      console.log("修改施工信息",e)
      console.log("修改施工信息 dict",dict)
      // this.$refs.ConstructionDetails.open(_, this.form.type,null,null,null,null,null,this.form.type === '1' ? "工业工程" : "市政工程")
      // let dicts = [{
      //   value: "历史数据",
      //   label: "历史数据"
      // }]
      this.$refs.ConstructionDetails.open(dicts, this.form.type,null,null,null,null,null,enginType)
      this.status = 'put'
    },
    viewNodeSource(e) {
      // alert('type='+e)
      if(!e)return
      console.log('todo: 获取数据', e)
      // todo: 获取数据
      QueryEngineeGasOpening({
        id: this.currentId,
        type: e
      }).then(res => {
        console.log("{id, type}",res)
        this.form = res.data
        try {
          this.currentCollapses = res.data.zEngineeringNodeBo.zEngineeringInfoBoList
        } catch (error) {
          this.currentCollapses = [];
        }
      })
    },
    nodeCancel() {
      this.nodeDetailVisible = false
      this.reset()
    },
    // 修改施工信息
    toNodeDetail() {
      // 根据材质id查询对应规格回显
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.nodeDetailVisible = true
        }
      })
    },
    getUrl(url) {
      this.zEngineeringNodeBo.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList ? this.$refs.obsImageUpload.fileList.map(e => e.url) : [];
    },
    /** 查询开栓施工列表 */
    getList() {
      this.loading = true;
      getEngineeGasOpeningList(this.searchParams).then(res => {
        this.comprehensiveList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      for (let formKey in this.form) {
        this.form[formKey] = null
      }
      this.isQualified='';
      this.form.verticalBarTest = []
      this.form.gasCylinderPic = [] // 燃气立杠图片
      this.form.pressureTestPic = [] // 气密测试图片
      this.form.gasMeterPic = [] // 燃气表图片
      this.form.rearPipePic = [] // 表后管图片
      this.form.gasChangePic = [] // 灶前阀门图片
      this.form.softPipePic = [] // 软管图片
      this.form.windproofCirclePic = [] // 灶具阀门图片
      this.form.gasEnvironmentPic = [] // 用气环境图片
      this.form.receiptFormPic = [] // 回执单图片
      this.form.zEngineeringNodeBo = {}
      this.form.zEngineeringNodeBo.zEngineeringInfoBo = {}
      this.zEngineeringMaterialBo = []
      this.zEngineeringMaterialBo.push({
        materialQuality: '', // 用料材质
        specifications: '', // 用料规格
        number: '' // 用料数量
      })
      this.getType()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.searchParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("searchParams");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.gc = true
      this.title = "新增开栓施工";
      this.currentType = 'add'
      this.open = true;
      this.buttonLoading=false;
      this.buttonShow=false;
    },
    removeFile(val) {
      console.log(val)
      console.log("我是文件")
      this.form.files = val
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.buttonLoading=false;
      this.buttonShow=true;
      this.gc = false
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      putEngineeGasOpening(id).then(response => {
        this.loading = false;
        let newData = response.data
        this.districtHasChanged(newData.district)
        this.communityHasChanged(newData.areaId)
        this.buildingHasChanged(newData.buildingId, newData.areaId)
        this.unitHasChanged(newData.unitId)
        this.form = response.data;
        this.form.verticalBarTest = this.form.verticalBarTest != null ? this.form.verticalBarTest.split(","):[];
        this.title = "审核";
        this.currentType = 'put'
        this.open = true;
      });
    },

    /** 修改按钮操作 */
    handleview(row) {
      this.buttonLoading=true;
      this.buttonShow=false;
      this.gc = false
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      putEngineeGasOpening(id).then(response => {
        this.loading = false;
        let newData = response.data
        this.districtHasChanged(newData.district)
        this.communityHasChanged(newData.areaId)
        this.buildingHasChanged(newData.buildingId, newData.areaId)
        this.unitHasChanged(newData.unitId)
        this.form = response.data;
        this.form.verticalBarTest = this.form.verticalBarTest != null ? this.form.verticalBarTest.split(","):[];
        this.title = "查看开栓施工";
        this.open = true;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.form.zEngineeringNodeBo = null
      if (this.zEngineeringNodeBo.type !== '') {
        this.form.zEngineeringNodeBo = this.zEngineeringNodeBo
        this.form.zEngineeringNodeBo.zEngineeringInfoBo.zEngineeringMaterialBo = this.zEngineeringMaterialBo
      }
      // if (this.form.enginClassification != [] && this.form.enginClassification.length>0) {
      //   this.form.enginClassification = this.form.enginClassification.join(',');
      // }
      this.$refs["form"].validate(valid => {
        if (valid) {
          // this.form.files = this.$refs.obsFileUpload.fileList;
          // if (this.form.files.length === 0) {
          //   this.$message.warning('必须上传附件!')
          //   return
          // }
          // alert(this.form.gasCylinderPic)
          console.log('this.form.gasCylinderPic=',this.form)
          if (this.form.gasCylinderPic.length === 0) {
            this.$message.warning('必须上传燃气立杠照片!')
            return
          }
          if (this.form.pressureTestPic.length === 0) {
            this.$message.warning('必须上传气密测试照片!')
            return
          }
          this.form.verticalBarTest = this.form.verticalBarTest.join(",");
          if (this.form.id == null) {
            addEngineeEngineeGasOpening(this.form).then(res => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.nodeDetailVisible = false
              this.getList();
            })
          } else {
            EditEngineeGasOpening(this.form).then(res => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.nodeDetailVisible = false
              this.getList();
            })
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除所选择的数据项？').then(() => {
        this.loading = true;
        return DelEngineeGasOpening(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('zdsz/engineeringGasOpening/export', {
        ...this.queryParams
      }, `comprehensive_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>


<style lang="scss" scoped>


::v-deep .appendElDialog {
  width: 70%;
  height: 820px;


  .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%;
  }

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

::v-deep .appendElNodeDialog {
  // width: 70%;
  height: 80%;

  .el-select {
    width: 70%
  }

  .el-dialog__body {
    height: 85%;
  }

  .el-form-item {
    margin-bottom: 22px;
    width: 100%;
    display: inline-block;
  }


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