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

<template>
  <div class="app-container">
    <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="行政区" prop="district">
        <el-select v-model="queryParams1.district" placeholder="请选择行政区" clearable
                   @change="queryParams1.areaId = undefined;areaList=[];
                   queryParams1.buildingId = undefined;buildingList=[];
                   queryParams1.unitId = undefined;unitList=[];
                   queryParams1.houseId = undefined;houseList=[];
                   getAreaList(queryParams1.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="queryParams1.areaId" filterable clearable placeholder="请选择小区"
                   @change="queryParams1.buildingId = undefined;buildingList=[];
                   queryParams1.unitId = undefined;unitList=[];
                   queryParams1.houseId = undefined;houseList=[];
                   getBuildingList1(queryParams1.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="queryParams1.buildingId" filterable clearable placeholder="请选择楼宇"
                   @change="queryParams1.unitId = undefined;unitList=[];
                   queryParams1.houseId = undefined;houseList=[];
                   getUnitList1(queryParams1.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="queryParams1.unitId" placeholder="请选择单元" filterable clearable
                   @change="queryParams1.houseId = undefined;houseList=[];getHouseList1(queryParams1.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="queryParams1.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 label="工程类型" prop="enginType">
        <el-select v-model="queryParams1.enginType" placeholder="请选择工程类型" clearable
                   @change="enginTypeHasChangeds"
                   @clear="currentEnginTypeChangeOptions1=[];currentEnginTypeChangeOptions2=[];queryParams1.enginClassification=undefined; queryParams1.type=undefined;queryParams1.enginType=undefined">
          <el-option
            v-for="dict in enginTypeOption"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工程分类" prop="enginClassification">
        <el-select v-model="queryParams1.enginClassification" placeholder="请选择工程分类" clearable
                   @change="nodeTypeHasChangeds"
                   @clear="">
          <el-option
            v-for="dict in currentEnginTypeChangeOptions1"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工程步骤" prop="type">
        <el-select v-model="queryParams1.type" placeholder="请选择工程步骤" clearable
                   @clear="">
          <el-option
            v-for="dict in currentEnginTypeChangeOptions2"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="completionStatus">
        <el-select v-model="queryParams1.completionStatus" placeholder="请选择审核状态" clearable
                   :disabled="queryParams1.type==undefined||queryParams1.type==''"
                   @clear="">
          <el-option
            v-for="dict in StateOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="施工时间" prop="completionStatus">
        <el-date-picker
          v-model="queryParams1.beginTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="施工人" prop="completionStatus">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="queryParams1.createBy"
          :fetch-suggestions="querySearch"
          value-key="userName"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <template slot-scope="{ item }">
            <div class="name">{{ item.nickName }}</div>
            <span class="addr">{{ item.userName }}</span>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="屏蔽小区名称" prop="areaId" label-width="100px">
        <el-select v-model="queryParams1.notAreaId" filterable clearable multiple placeholder="请选择小区" style="width: 400px">
          <el-option
            v-for="item in notAreaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="工程周期" prop="enginCycle">-->
      <!--        <el-select v-model="queryParams1.enginCycle" placeholder="请选择工程周期" clearable-->
      <!--                   @clear="">-->
      <!--          <el-option-->
      <!--            v-for="dict in dict.type.engin_cycle"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--          />-->
      <!--        </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:engineeringCivil: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:engineeringCivil:edit']"-->
      <!--        >修改工程信息-->
      <!--        </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:engineeringCivil:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="exportBottomLeg"
          v-hasPermi="['zdsz:engineeringCivil:export']"
        >底腿导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="exportObtainQualifiedRoom"
          v-hasPermi="['zdsz:engineeringCivil:export']"
        >合格房间导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportColor"
          v-hasPermi="['zdsz:engineeringCivil:export']"
        >颜色导出
        </el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          icon="el-icon-circle-check"-->
<!--          size="mini"-->
<!--          @click="handleCheckings"-->
<!--          v-hasPermi="['zdsz:engineeringCivil:batchreview']"-->
<!--        >批量审核-->
<!--        </el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-circle-check"
          size="mini"
          @click="batchCheckings"
          v-hasPermi="['zdsz:engineeringCivilNode:batch']"
        >节点开关
        </el-button>
      </el-col>
      <el-col :span="2.5" style="margin-left: 29%">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['zdsz:engineeringCivil:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="2.5" style="float: right;">
        <span
          style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #c0c0c0;"></span>无数据
        <span
          style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #e0c794;"></span>待审核
        <span
          style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #30B08F;"></span>通过
        <span
          style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #C03639;"></span>不通过
        <span
          style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #5d5050;"></span>底腿未完工
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="engineeringCivilList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
      <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="enginType">
        <template slot-scope="scope">
          {{ scope.row.enginType === 'old_renovation' ? "旧改工程" : "新建" }}
        </template>
      </el-table-column>
      <el-table-column label="工程分类" align="center" prop="enginClassificationName"/>
      <!--      <el-table-column label="工程周期" align="center" prop="enginCycle">-->
      <!--        <template slot-scope="scope">-->
      <!--          <dict-tag :options="dict.type.engin_cycle" :value="scope.row.enginCycle"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="完工状态" align="center" prop="completionStatus"/>-->
      <el-table-column label="审核状态" align="center" prop="nodeReViewStateList" width="250">
        <template slot-scope="scope">
          <div style="text-align:center">
            <el-popover
              v-for="item in scope.row.nodeReViewStateList"
              placement="top-start"
              trigger="hover"
              :content="item.Type">
<!--              <span slot="reference" v-if="(item.state == '1'||item.state == '2') && item.Type != '开栓'"-->
<!--                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #30B08F;"></span>-->
<!--              <span slot="reference" v-if="item.state == '0' && item.Type != '开栓'"-->
<!--                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #C03639;"></span>-->


              <span slot="reference" v-if="item.state == '-1' && item.content=='无数据' && item.Type != '开栓'"
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #c0c0c0;"></span>
              <span slot="reference" v-if="item.state == '0' && item.content=='暂未审核' && item.Type != '开栓'"
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #e0c794;"></span>
              <span slot="reference" v-if="(item.state == '1'||item.state == '2') && item.Type != '开栓' "
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #30B08F;"></span>
              <span slot="reference" v-if="item.state == '99' && item.Type != '开栓'"
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #5d5050;"></span>
              <span slot="reference" v-if="item.state == '0' && item.content!='暂未审核' && item.Type != '开栓'"
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #C03639;"></span>

              <span slot="reference" v-if="(item.state == '0' || item.state == '2') && item.Type == '开栓'" @click="gotoOpenGas(scope.row)"
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #ffff00;"></span>
              <span slot="reference" v-if="item.state == '1' && item.Type == '开栓'" @click="gotoOpenGas(scope.row)"
                    style="height: 20px;margin-right: 5px;width: 20px; border-radius: 50%; display: inline-block; background-color: #6998e0;"></span>

            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:edit']"
          >修改工程信息
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="addNodeInfo(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:xgsg']"
          >修改施工信息
          </el-button>
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-delete"-->
          <!--            @click="handleDelete(scope.row)"-->
          <!--            v-hasPermi="['zdsz:engineeringCivil:remove']"-->
          <!--          >删除-->
          <!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="viewSource(scope.row,'check')"
            v-hasPermi="['zdsz:engineeringCivil:review']"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="viewSource(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:lssg']"
          >历史施工
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['zdsz:engineeringPipeJacking:xzdggc']"
            @click="addNewPipe(scope.row)"
          >新增顶管工程
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['zdsz:engineeringCivil:tjyl']"
            @click="addMaterial(scope.row)"
          >添加用料
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改民用工程对话框 -->
    <el-dialog :title="title" ref="nodeForm" :visible.sync="open" width="500" append-to-body custom-class="addDialog"
               @close="onClose">
      <el-form ref="form" :model="queryParams" :rules="rules" label-width="110px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="行政区" prop="district">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.district"
                placeholder="请选择行政区"
                filterable
                @change="districtHasChanged"
              >
                <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="12">
            <el-form-item label="小区" prop="areaId">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.areaId"
                filterable
                placeholder="请选择小区"
                @change="communityHasChanged"
              >
                <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-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼栋" prop="buildingId">
              <el-select
                :disabled="title == '添加用料' "
                filterable
                v-model="queryParams.buildingId"
                placeholder="请选择楼栋"
                @change="buildingHasChanged"
              >
                <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="12">
            <el-form-item label="单元" prop="unitId">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.unitId"
                filterable
                placeholder="请选择单元"
                @change="unitHasChanged"
              >
                <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-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间" prop="houseId">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.houseId"
                filterable
                placeholder="请选择房间"
              >
                <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-col :span="12">
            <el-form-item label="工程类型" prop="enginType">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.enginType"
                placeholder="请选择工程类型"
                @change="enginTypeHasChanged"
              >
                <el-option
                  v-for="e in enginTypeOption"
                  :key="e.value"
                  :label="e.label"
                  :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程分类" prop="enginClassification">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.enginClassification"
                placeholder="请选择工程分类"
                @change="currentEnginTypeChanged"
              >
                <el-option
                  v-for="e in currentEnginTypeChangeOptions"
                  :key="e.dictValue"
                  :label="e.dictLabel"
                  :value="e.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="工程周期" prop="enginCycle">-->
          <!--              <el-select-->
          <!--                :disabled="title == '添加用料' "-->
          <!--                v-model="queryParams.enginCycle"-->
          <!--                placeholder="请填写工程周期"-->
          <!--              >-->
          <!--                <el-option-->
          <!--                  v-for="e in dict.type.engin_cycle"-->
          <!--                  :key="e.value"-->
          <!--                  :label="e.label"-->
          <!--                  :value="e.value"-->
          <!--                ></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="24" v-if="title!=='修改民用工程'">
            <el-form-item label="环节">
              <el-checkbox-group v-model="currentCheckList">
                <el-checkbox
                  :disabled=enginNodeStatusExecuted(item)
                  :label="item.dictValue"
                  v-for="item in checkList"
                  :key="item"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <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="民用工程"
          :enginSort="queryParams.enginType"
          :enginNode="queryParams.enginClassification"
        />
        <!-- <el-tabs type="border-card" >
          <el-tab-pane label="用户管理">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">{{ enginNodeStatus }}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看历史 -->
    <ConstructionDetails
      ref="ConstructionDetails"
      :currentCollapses="currentCollapses"
      :allPicUrl="allPicUrl"
      :type="nodeDetailType"
      @updateNodeOption="updateNodeOption"
      @checkWorking="checkWorking"
      :status="status"
      :zEngineeringNodeBo="zEngineeringNodeBo"
      enginType="民用工程"
    />
    <!-- 批量审核 -->
    <el-dialog
      ref="checkingAllForm"
      title="批量审核"
      :visible.sync="checkingsVisible"
      class="checkingAll"
      @close="checkingAllFormClosed"
    >
      <el-form :model="checkingForm" :rules="checkingFormRules" ref="checkingFormAll">
        <el-form-item label="工程类型" prop="enginType">
          <el-select
            v-model="checkingForm.enginType"
            placeholder="请选择工程类型"
            @change="enginTypeHasChanged"
          >
            <el-option
              v-for="e in enginTypeOption"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程分类" prop="enginClassification">
          <el-select
            v-model="checkingForm.enginClassification"
            placeholder="请选择工程分类"
            @change="currentCheckingAllEnginTypeChanged"
          >
            <el-option
              v-for="e in currentEnginTypeChangeOptions"
              :key="e.dictValue"
              :label="e.dictLabel"
              :value="e.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环节" label-width="78px" prop="type">
          <el-select
            v-model="checkingForm.type"
            placeholder="请选择工程分类"
          >
            <el-option
              v-for="e in checkingAllList"
              :key="e.dictValue"
              :label="e.dictLabel"
              :value="e.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="reviewTime" label="工程创建时间" style="margin-left: -5%;">
          <el-date-picker
            v-model="checkingForm.reviewTime"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label-width="78px"
          label="审核状态"
          prop="reviewStatus"
        >
          <el-select v-model="checkingForm.reviewStatus" placeholder="请选择审核状态" label="审核状态"
                     @change="validateCHanged">
            <el-option
              v-for="e in reviewStatusList"
              :key="e.label"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label-width="78px"
          label="审核内容"
          prop="reviewContent"
        >
          <div class="block" style="display: inline-block; margin-right: 20px;">
            <el-input
              v-model="checkingForm.reviewContent"
              placeholder="请输入审核内容"
              type="textarea"
              style="width: 100%"/>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkingsVisible = false">取 消</el-button>
        <el-button type="primary" @click=checkingAllSubmit>提 交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      ref="checkingAllForm"
      title="节点开关"
      :visible.sync="batchVisible"
      @close="checkingAllFormClosed"
    >
      <el-form :model="batchForm" :rules="batchFormRules" ref="batchFormAll" label-width="auto" label-position="right">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="行政区" prop="district">
              <el-select v-model="batchForm.district" placeholder="请选择行政区" clearable
                         @change="batchForm.areaId = undefined;getAreaList(batchForm.district)"
                         @clear="batchForm.areaId = undefined;areaList=[];
                   batchForm.buildingId = undefined;buildingList=[];
                   batchForm.unitId = undefined;unitList=[]">
                <el-option
                  v-for="dict in dict.type.district"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区名称" prop="areaId">
              <el-select v-model="batchForm.areaId" filterable clearable placeholder="请选择小区"
                         @change="batchForm.buildingId = undefined;getBuildingList1(batchForm.areaId)"
                         @clear="batchForm.buildingId = undefined;buildingList=[];
                   batchForm.unitId = undefined;unitList=[]">
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="工程类型" prop="enginType">
              <el-select
                v-model="batchForm.enginType"
                placeholder="请选择工程类型"
                @change="enginTypeHasChanged"
              >
                <el-option
                  v-for="e in enginTypeOption"
                  :key="e.value"
                  :label="e.label"
                  :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程分类" prop="enginClassification">
              <el-select
                v-model="batchForm.enginClassification"
                placeholder="请选择工程分类"
                @change="currentCheckingAll"
              >
                <el-option
                  v-for="e in currentEnginTypeChangeOptions"
                  :key="e.dictValue"
                  :label="e.dictLabel"
                  :value="e.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="环节" label-width="78px" prop="type">
              <el-select
                v-model="batchForm.type"
                placeholder="请选择工程分类"
              >
                <el-option
                  v-for="e in checkingAllList"
                  :key="e.dictValue"
                  :label="e.dictLabel"
                  :value="e.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!--        <el-form-item prop="reviewTime" label="工程创建时间" style="margin-left: -5%;">-->
            <!--          <el-date-picker-->
            <!--            v-model="batchForm.reviewTime"-->
            <!--            type="month"-->
            <!--            value-format="yyyy-MM"-->
            <!--            placeholder="选择月">-->
            <!--          </el-date-picker>-->
            <!--        </el-form-item>-->
            <el-form-item
              label-width="78px"
              label="节点开关"
              prop="completionStatus"
            >
              <el-select v-model="batchForm.completionStatus" placeholder="请选择节点开关" label="审核状态"
                         @change="validateCHanged">
                <el-option
                  v-for="e in swithList"
                  :key="e.label"
                  :label="e.label"
                  :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="text-align: center">
          <el-col :span="20">
            <el-form-item
              label-width="78px"
              label="内容"
              prop="reviewContent"
            >
              <!--          <div class="block" style="display: inline-block; margin-right: 20px;">-->
              <el-input
                v-model="batchForm.reviewContent"
                placeholder="请输入内容"
                type="textarea"
                maxlength="255"
                show-word-limit
                :autosize="{ minRows: 4}"
                style="width: 100%"/>
              <!--          </div>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click=batchAllSubmit>提 交</el-button>
        <el-button @click="batchVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 顶管工程新增 -->
    <EngineePipe ref="enginPipe"/>
    <engineeringGasOpening ref="engineeringGasOpening" v-if="engineeringGasOpeningShow"/>

  </div>
</template>
<!--engineeringPipeJacking-->
<script>
import {
  listEngineeringCivil,
  getEngineeringCivil,
  delEngineeringCivil,
  addEngineeringCivil,
  updateEngineeringCivil
} from "@/api/zdsz/engineeringCivil";
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 EnginNodeInfo from "@/components/EnginNodeInfo/index";
import EnginNodeInfoTYG from "@/components/EnginNodeInfo/indexGY.vue";
import EngineePipe from '@/components/EngineePipe'
import ConstructionDetails from "@/components/ConstructionDetails/index.vue";
import ConstructionDetailsGY from "@/components/ConstructionDetails/indexGY.vue";
import {listAll} from "@/api/system/user";
import {
  getEngineeGasOpeningList,
  putEngineeGasOpening,
  queryPageListAndGetByCivi
} from "@/api/zdsz/engineeringGasOpening";
import engineeringGasOpening from '@/views/zdsz/engineeringGasOpening/indexCivi.vue';

function formatDate(date) {
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  const day = days[date.getUTCDay()];
  const month = months[date.getUTCMonth()];
  const dateNum = String(date.getUTCDate()).padStart(2, '0');
  const hours = String(date.getUTCHours()).padStart(2, '0');
  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
  const year = date.getUTCFullYear();

  return `${day} ${month} ${dateNum} ${hours}:${minutes}:${seconds} CST ${year}`;
}

export default {
  components: {
    ConstructionDetails,
    EnginNodeInfo,
    EnginNodeInfoTYG,
    ConstructionDetailsGY,
    engineeringGasOpening,
    EngineePipe
  },

  name: "EngineeringCivil",
  dicts: ['sys_yes_no',
    'is_repair',
    'engin_type',
    'old_renovation',
    'new_built',
    'self_closing_valve_type',
    'visit_type', 'district',
    'new_built_indoor_engin',
    "old_renovation_indoor_engin",
    "old_renovation_courtyard",
    "old_renovation_overhead",
    "new_built_indoor_engin",
    "new_built_courtyard",
    "new_built_overhead",
    "engin_cycle"],
  data() {
    return {
      nodeDetailType: null,
      enginClassification: null,
      currentCollapses: [],
      allPicUrl: [],
      enginId: undefined,
      checkingsVisible: false,
      engineeringGasOpeningShow: false,
      batchVisible: false,
      updateOption: [],
      batchFormRules: {
        enginType: [
          {required: true, message: "工程类型不能为空", trigger: ['change']}
        ],
        enginClassification: [
          {required: true, message: "工程分类不能为空", trigger: ['change']}
        ],
        type: [
          {required: true, message: "环节不能为空", trigger: ['change']}
        ],
        reviewTime: [
          {required: true, message: "工程创建时间不能为空", trigger: ['change']}
        ],
        completionStatus: [
          {required: true, message: "审核状态不能为空", trigger: ['change']}
        ],
        reviewContent: [
          {required: true, message: "审核内容不能为空", trigger: ['change']}
        ],
        district: [
          {required: true, message: "行政区不能为空", trigger: "change"}
        ],
        areaId: [
          {required: true, message: "小区不能为空", trigger: "change"}
        ],
        buildingId: [
          {required: true, message: "楼宇不能为空", trigger: "change"}
        ],
        unitId: [
          {required: true, message: "单元不能为空", trigger: "change"}
        ]
      },
      checkingFormRules: {
        enginType: [
          {required: true, message: "工程类型不能为空", trigger: ['change']}
        ],
        enginClassification: [
          {required: true, message: "工程分类不能为空", trigger: ['change']}
        ],
        type: [
          {required: true, message: "环节不能为空", trigger: ['change']}
        ],
        reviewTime: [
          {required: true, message: "工程创建时间不能为空", trigger: ['change']}
        ],
        reviewStatus: [
          {required: true, message: "审核状态不能为空", trigger: ['change']}
        ],
        reviewContent: [
          {required: true, message: "审核内容不能为空", trigger: ['change']}
        ]
      },
      listContain: [
        ///////////////////////////////////////////////室内工程//////////////////////////////////////////
        {
          name: '拆旧管',
          components: [
            [
              'corrosionLevel',                        // 腐蚀等级
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '打孔',
          components: [
            [
              'corrosionLevel',                        // 孔径/腐蚀等级
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '立杠',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '挂表',
          components: [
            [
              'brand',                                 // 品牌
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '表后管',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructAccordingDrawings',              // 是否按图纸施工
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '报警器',
          components: [
            [
              'brand',                                 // 品牌
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '切断阀',
          components: [
            [
              'brand',                                 // 品牌
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '阀管',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
              'visitType',                             // 上门类型
              'selfClosingValveType',                  // 自闭阀类型
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '开栓'
        },
        ///////////////////////////////////////////////室内工程//////////////////////////////////////////
        ///////////////////////////////////////////////庭院工程//////////////////////////////////////////
        {
          name: '开挖前',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '开挖后',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '焊口照片',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '下沟',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'ductalEpithelium',
            // 'constructionRecords',
            'trenchProspect',
            'constructTime',
            'Video'// 施工时间
            // 'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '回填',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'stonePowder',
            'warningtTape',
            'photosAfter',
            // 'backfillTime',                            // 回填时间
            'constructTime',                           // 施工时间
            // 'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '隐蔽工程',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            // 'segmentedCompressionQualified',           // 分段打压
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '管道施工记录',
          components: [
            [
            ],
            'zEngiineeringPhotoBoList',                // 照片
            'remark',                                  // 施工内容
          ]
        },
        {
          name: '调压柜',
          components: [
            [
            ],
            'boxBrand',
            'BottomLeg',
            'stonePowder',
            'Lightning',
            'GroundHardeningA',
            'remark',                                  // 施工内容
          ]
        },
        {
          name: '阀井',
          components: [
            [
            ],
            'cannula',
            'wallPlaster',
            'protectiveNet',
            'starAnise',
            'remark',                                  // 施工内容
          ]
        },
        ///////////////////////////////////////////////庭院工程//////////////////////////////////////////
        ///////////////////////////////////////////////架空工程//////////////////////////////////////////
        {
          name: '除锈刷油',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '焊接',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '打磨',
          components: [
            [
              // 'materialQuality',                       // 材质
              // 'specifications',                        // 规格
              // 'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '全貌照片',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'zhanshixinzeng',                                // 数量
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        ///////////////////////////////////////////////架空工程//////////////////////////////////////////
        ///////////////////////////////////////////////底腿//////////////////////////////////////////
        {
          name: '底腿',
          components: [
            [
              'caliber',// 管径
              'specificConstruction', //具体施工位置
              'constructAddre'//位置
            ],
            'constructTime',
            'beforeBottom',
            'onTheDitch',
            'legBackfilling',
            'inferiorSulcus',                // 照片
          ]
        },
        ///////////////////////////////////////////////底腿//////////////////////////////////////////
        ///////////////////////////////////////////////调压柜安装//////////////////////////////////////////
        {
          name: '调压箱铭牌',
          components: [
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            'remark',
          ]
        },{
          name: '底腿连接',
          components: [
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            'remark',
          ]
        },{
          name: '石粉回填',
          components: [
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            'remark',
          ]
        },{
          name: '防雷接地',
          components: [
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            'remark',
          ]
        },{
          name: '地面硬化',
          components: [
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            'remark',
          ]
        }
        ///////////////////////////////////////////////调压柜安装//////////////////////////////////////////
      ],
      currentCheckList: [],
      enginType: '',
      enginClassificationinfo: '',
      enginClassificationOption: [],
      enginTypeOption: [
        {
          value: 'old_renovation',
          label: '旧改'
        }, {
          value: 'new_built',
          label: '新建'
        },
      ],
      currentEnginTypeChangeOptions: [],
      currentEnginTypeChangeOptions1: [],
      currentEnginTypeChangeOptions2: [],
      StateOptions: [
        {
          value: '0',
          label: '审核未通过'
        }, {
          value: '1',
          label: '审核通过'
        },{
          value: '2',
          label: '未审核'
        },{
          value: '99',
          label: '无数据'
        }
      ],
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 民用工程表格数据
      engineeringCivilList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        enginClassification: undefined,
        imgUrl: undefined,
        zEngineeringNodeBoList: {
          type: undefined,
          zEngineeringInfoBo: {
            constructAddre: undefined,        // 施工地址
            constructPhone: undefined,        // 施工人电话
            constructUser: undefined,         // 施工人
            headName: undefined,              // 负责人
            headPhone: undefined,             // 负责人电话
            constructAccordingDrawings: undefined, // 是否按图纸施工
            segmentedCompressionQualified: undefined, // 分段打压是否合格
            selfClosingValveType: undefined,          // 自闭阀类型
            visitType: undefined,                     // 上门类型
            backfillTime: undefined,                  // 回填时间
            constructTime: undefined,                  // 施工时间
            zEngiineeringPhotoBoList: undefined,              // 图片列表
            zEngineeringMaterialBo: undefined,// 用料对象,    //节点信息
          }
        }
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        district: undefined,
        notAreaId:[],
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        imgUrl: undefined,
        type: undefined,
        beginTime: [],
        createBy: ''
      },
      zEngineeringInfoBo: {
        constructAddre: '',        // 施工地址
        constructPhone: '',        // 施工人电话
        constructUser: '',         // 施工人
        headName: '',              // 负责人
        headPhone: '',             // 负责人电话
        constructAccordingDrawings: '', // 是否按图纸施工
        segmentedCompressionQualified: '', // 分段打压是否合格
        selfClosingValveType: '',          // 自闭阀类型
        visitType: '',                     // 上门类型
        backfillTime: '',                  // 回填时间
        constructTime: '',                  // 施工时间
        zEngiineeringPhotoBoList: [],              // 图片列表
        zEngineeringMaterialBo: [],// 用料对象
      },
      nodeList: [],
      // 表单参数
      form: {},
      value: [],
      // 表单校验
      rules: {
        id: [
          {required: true, message: "主键不能为空", trigger: "blur"}
        ],
        district: [
          {required: true, message: "行政区不能为空", trigger: "change"}
        ],
        areaId: [
          {required: true, message: "小区不能为空", trigger: "change"}
        ],
        // buildingId: [
        //   {required: true, message: "楼宇不能为空", trigger: "change"}
        // ],
        // unitId: [
        //   {required: true, message: "单元不能为空", trigger: "change"}
        // ],
        // houseId: [
        //   {required: true, message: "房间不能为空", trigger: "change"}
        // ],
        enginType: [
          {required: true, message: "工程类型不能为空", trigger: "change"}
        ],
        enginClassification: [
          {required: true, message: "工程分类不能为空", trigger: "change"}
        ],
        // enginCycle: [
        //   {required: true, message: "工程周期不能为空", trigger: "change"}
        // ],
        completionStatus: [
          {required: true, message: "完工状态不能为空", trigger: "change"}
        ],
        imgUrl: [
          {required: true, message: "默认图片地址不能为空", trigger: "blur"}
        ],
        remark: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ],
      },
      notAreaList: [],
      areaList: [],
      buildingList: [],
      unitList: [],
      houseList: [],
      currentDistrict: null,       // 当前行政区
      currentCommunity: null,      // 当前小区
      currentBuilding: null,       // 当前楼宇
      currentUnit: null,           // 当前单元
      communityOptions: [],
      buildingOptions: [],         // 楼栋集合
      unitOptions: [],             // 单元集合
      houseOptions: [],            // 房间集合
      enginClassification_list: [], // 室内节点,
      checkList: [],// 节点集合
      enginNodeStatus: null,
      updateParams: {},
      status: null,
      createTime: '',               // 工程创建时间
      checkingForm: {
        reviewStatus: '',               // 审核状态
        reviewContent: '',              // 审核内容
        enginType: null,
        enginClassification: null,
        reviewTime: '',
        type: '',
      },
      batchForm: {
        completionStatus: '',               // 审核状态
        reviewContent: '',              // 审核内容
        enginType: null,
        enginClassification: null,
        reviewTime: '',
        type: '',
        district: '',
        buildingId: '',
        unitId: '',
        areaId: '',
        enginCycle: 0
      },
      checkingAllList: [],
      reviewStatusList: [
        {
          value: '1',
          label: '通过'
        },
        {
          value: '0',
          label: '不通过'
        }
      ],
      swithList: [
        {
          value: '2',
          label: '关闭'
        },
        {
          value: '0',
          label: '开启'
        }
      ],
      zEngineeringNodeBo: {},
      currentEnginName: null,
      currentCheckingEnginList: [],
      userList: []
    };
  },
  created() {
    this.getAreaList();
    this.getAllAreaList();
  },
  mounted() {
    this.listAll()
    this.getList()
  },
  computed: {
    currentContain(e) {
      console.log('当前contain', e)
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.userList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      console.log(item);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.userName.toLowerCase().indexOf(queryString.toLowerCase()) === 0)||(restaurant.nickName.indexOf(queryString) === 0);
      };
    },
    enginNodeStatusExecuted(item) {
      try {
        let flag
        if (this.currentCheckingEnginList.filter(e => e.label == item.dictValue)[0].status == '1') return true
      } catch (error) {
        return false
      }
    },
    checkingAllFormClosed() {
      this.$refs.checkingFormAll.resetFields()
    },
    validateCHanged(e) {
      this.reviewStatusList[e].label == '通过' ? this.checkingFormRules.reviewContent[0].required = true : this.checkingFormRules.reviewContent[0].required = false
    },
    batchAllSubmit() {
      this.$refs.batchFormAll.validate(valid => {
        if (valid) {
          batchNode(this.batchForm).then(res => {
            if (res.code == 200) {
              this.batchVisible = false
              this.batchForm = {
                completionStatus: '',               // 审核状态
                reviewContent: '',              // 审核内容
                enginType: null,
                enginClassification: null,
                reviewTime: '',
                type: '',
                district: '',
                buildingId: '',
                unitId: '',
                areaId: '',
                enginCycle: 0
              }
              setTimeout(() => this.getList(), 1000)
              this.$refs.batchFormAll.resetFields()
            }
          })
        } else {
          this.$message.error('请填写必填项!')
        }
      })
    },
    listAll() {
      listAll({status: 0}).then(res => {
        this.userList = res.data
      })
    },
    checkingAllSubmit() {
      this.$refs.checkingFormAll.validate(valid => {
        if (valid) {
          // this.checkingForm.createTime = formatDate(this.checkingForm.createTime)
          engineeringCivilAllReview(this.checkingForm).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '批量审核请求以提交后台，5-10分钟后均可成功。',
                type: 'success'
              });
              this.checkingsVisible = false
              this.checkingForm = {
                reviewStatus: '',               // 审核状态
                reviewContent: '',              // 审核内容
                enginType: null,
                enginClassification: null,
                reviewTime: '',
                type: '',
              }
              this.$refs.checkingFormAll.resetFields()
            }
          })
        } else {
          this.$message.error('请填写必填项!')
        }
      })
    },
    // 批量审核
    handleCheckings() {
      this.checkingsVisible = true
    },
    batchCheckings() {
      this.batchVisible = true
    },
    // 节点单项审核
    checkWorking(checkingInfo) {
      let params = checkingInfo
      params.createTime = this.createTime
      CivilReview(params).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '审核成功',
            type: 'success'
          });
          this.getList()
          setTimeout(() => {
            this.viewNodeSource()
          }, 1000)
        }
      })
    },
    // 修改施工信息
    updateNodeOption(zEngineeringInfoBoList) {
      delete this.updateParams.zEngineeringNodeBoList
      this.updateParams.zEngineeringNodeBo.zEngineeringInfoBoList = zEngineeringInfoBoList
      putEngineeringCivil(this.updateParams).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.$refs.ConstructionDetails.dialogVisible = false
          this.updateParams = {}

        }
      })
    },
    addNodeInfo(e) {
      this.nodeDetailType = '修改'
      this.enginId = e.id
      this.status = 'put'
      let title = e.areaName + "-" + e.buildingName + "-" + e.unitName + "-" + e.houseName + " [" + (e.enginType == 'new_built' ? "新建" : '旧改') + "-" + e.enginClassificationName + "]"
      let val = e.enginType + "_" + e.enginClassification
      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.zEngineeringNodeBo = e
        this.$refs.ConstructionDetails.open(dict, null, null, '民用', title, this.zEngineeringNodeBo.enginClassification, this.zEngineeringNodeBo.enginType, "民用工程")
      })
    },
    viewNodeSource(e = null) {
      if (e) {
        this.currentEnginName = e
      }
      console.log('viewNodeSource', this.currentEnginName)
      viewEngineeringCivilSource({
        id: this.enginId,
        type: e || this.currentEnginName
      }).then(res => {
        console.log('______', res)
        this.createTime = res.data.createTime
        try {
          this.updateParams = res.data
          this.currentCollapses = res.data.zEngineeringNodeBo.zEngineeringInfoBoList
          this.allPicUrl = res.data.allPicUrl
          console.log("this.currentCollapses", this.currentCollapses)
          this.$refs.ConstructionDetails.setEngineId(res.data.zEngineeringNodeBo.id || null)
        } catch (error) {
          this.currentCollapses = [];
        }
        console.log('折叠面板info', this.currentEnginName)
      })
      this.$forceUpdate()
    },
    // 查看历史
    viewSource(e, type = null) {
      this.enginClassification = e.enginClassification
      console.log("viewSource(e, type = null)", e)
      let title = e.areaName + "-" + e.buildingName + "-" + e.unitName + "-" + e.houseName + " [" + (e.enginType == 'new_built' ? "新建" : '旧改') + "-" + e.enginClassificationName + "]"
      console.log("viewSource(e, type = null)", title)
      this.enginId = e.id
      let val = e.enginType + "_" + e.enginClassification
      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.zEngineeringNodeBo = e
        this.$refs.ConstructionDetails.open(dict, _, type, '民用', title, this.zEngineeringNodeBo.enginClassification, this.enginType)
        this.status = 'read-only'
      })
    },
    // 新增顶管工程
    addNewPipe(data) {
      this.$refs.enginPipe.openDialog({
        id: data.id,
        district: data.district,
        type: '民用工程'
      }, 'add', data)
    },
    // 新增物料
    addMaterial(data) {
      this.title = "添加用料";
      this.enginNodeStatus = '添加用料'
      this.loading = true;
      this.reset();
      const id = data.id || this.ids
      getEngineeringCivil(id).then(res => {
        this.loading = false;
        this.currentCheckingEnginList = []
        // 处理当前已审核通过的节点
        try {
          res.data.zEngineeringNodeBoList.forEach(e => {
            let status
            try {
              status = e.zEngineeringInfoBoList[0].zEngineeringReviewBo.reviewStatus
            } catch (error) {
              status = '0'
            }
            this.currentCheckingEnginList.push({
              label: e.type,
              status
            })
          })
        } catch (error) {
          this.currentCheckingEnginList = []
        }
        console.log('as', this.currentCheckingEnginList)
        let newData = res.data
        // 手动调用行政区发生改变
        this.districtHasChanged(newData.district)
        this.communityHasChanged(newData.areaId)
        this.buildingHasChanged(newData.buildingId, newData.areaId)
        this.unitHasChanged(newData.unitId)
        // 获取工程分类
        this.enginTypeHasChanged(newData.enginType)
        let val = newData.enginType + "_" + newData.enginClassification
        this.currentCheckList = []
        getDicts(val).then(res => {
          this.checkList = res.data
          console.log(this.checkList)
        })

        this.queryParams = newData
        console.log(this.queryParams.areaId)

        // console.log('选中节点集合',this.currentCheckList)
        // this.enginClassification = zEngineeringNodeBo.type
        // newData.zEngineeringNodeBo = zEngineeringNodeBo
        this.currentType = 'addMaterial'
        this.open = true

      })
    },
    currentEnginTypeChanged() {
      this.currentCheckList = []
      if (this.queryParams.enginType == undefined || this.queryParams.enginType == ''
        || this.queryParams.enginClassification == undefined || this.queryParams.enginClassification == ''
      )
        return
      let val = this.queryParams.enginType + "_" + this.queryParams.enginClassification
      getDicts(val).then(res => {
        this.checkList = res.data
      })
    },
    currentCheckingAllEnginTypeChanged() {
      this.checkingAllList = []
      if (this.checkingForm.enginType == undefined || this.checkingForm.enginType == ''
        || this.checkingForm.enginClassification == undefined || this.checkingForm.enginClassification == ''
      )
        return
      let val = this.checkingForm.enginType + "_" + this.checkingForm.enginClassification
      getDicts(val).then(res => {
        this.checkingAllList = res.data
      })
    },
    currentCheckingAll() {
      this.checkingAllList = []
      if (this.batchForm.enginType == undefined || this.batchForm.enginType == ''
        || this.batchForm.enginClassification == undefined || this.batchForm.enginClassification == ''
      )
        return
      let val = this.batchForm.enginType + "_" + this.batchForm.enginClassification
      getDicts(val).then(res => {
        this.checkingAllList = res.data
      })
    },
    // 当前所选行政区发生改变 查询当前小区集合
    districtHasChanged(district) {
      this.queryParams.areaId = null
      this.queryParams.buildingId = null
      this.queryParams.unitId = null
      this.communityOptions = [];
      this.buildingOptions = [];
      this.unitOptions = [];
      this.houseOptions = [];
      getAreaList({district}).then(res => {
        this.communityOptions = res.data
      })
    },
    // 当前所选小区发生改变 查询当前楼栋集合
    communityHasChanged(areaId) {
      this.queryParams.buildingId = null
      this.queryParams.unitId = null
      this.buildingOptions = [];
      this.unitOptions = [];
      this.houseOptions = [];
      getBuildingList({areaId}).then(res => {
        this.buildingOptions = res.data
      })
    },
    buildingHasChanged(buildingId, areaId) {
      this.unitOptions = [];
      this.houseOptions = [];
      this.queryParams.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
      })
    },
    enginTypeHasChangeds(enginType = null) {
      if (this.queryParams1.enginType == undefined || this.queryParams1.enginType == null || this.queryParams1.enginType == '')
        return
      this.currentCheckList = []
      this.queryParams1.enginClassification = ''
      this.currentEnginTypeChangeOptions1 = []
      getDicts(enginType || this.queryParams1.enginType).then(res => {
        this.currentEnginTypeChangeOptions1 = res.data
      })
    },
    nodeTypeHasChangeds(enginType = null, enginClassification = null) {
      if ((this.queryParams1.enginType == undefined || this.queryParams1.enginType == null || this.queryParams1.enginType == '') && (this.queryParams1.enginClassification == undefined || this.queryParams1.enginClassification == null || this.queryParams1.enginClassification == ''))
        return
      this.currentCheckList = []
      this.queryParams1.type = ''
      this.currentEnginTypeChangeOptions2 = []
      let params = enginType && enginClassification || this.queryParams1.enginType + '_' + this.queryParams1.enginClassification
      getDicts(params).then(res => {
        this.currentEnginTypeChangeOptions2 = res.data
      })
    },
    enginTypeHasChanged(enginType = null) {
      this.currentCheckList = []
      this.queryParams.enginClassification = ''
      this.currentEnginTypeChangeOptions = []
      getDicts(enginType || this.queryParams.enginType).then(res => {
        this.currentEnginTypeChangeOptions = res.data
      })
    },
    onClose() {
      console.log(this.currentCheckList)
      this.currentCheckList = []
      this.checkList = []
      this.reset()
    },
    closeToSucceed() {
      this.open = false;
    },
    getAllAreaList(){
      getAreaList({}).then(res => this.notAreaList = 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)
    },
    /** 查询民用工程列表 */
    getList() {
      this.loading = true;
      listEngineeringCivil(this.queryParams1).then(response => {
        this.engineeringCivilList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        version: undefined,
        imgUrl: undefined,
        // remark: undefined,
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      };
      this.queryParams = {
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        imgUrl: undefined,
        // zEngineeringNodeBo: {
        //   type: undefined,
        //   zEngineeringInfoBo: {
        //     constructAddre: undefined,        // 施工地址
        //     constructPhone: undefined,        // 施工人电话
        //     constructUser: undefined,         // 施工人
        //     headName: undefined,              // 负责人
        //     headPhone: undefined,             // 负责人电话
        //     constructAccordingDrawings: undefined, // 是否按图纸施工
        //     segmentedCompressionQualified: undefined, // 分段打压是否合格
        //     selfClosingValveType: undefined,          // 自闭阀类型
        //     visitType: undefined,                     // 上门类型
        //     backfillTime: undefined,                  // 回填时间
        //     constructTime: undefined,                  // 施工时间
        //     zEngiineeringPhotoBoList: undefined,              // 图片列表
        //     zEngineeringMaterialBo: undefined,// 用料对象,    //节点信息
        //   }
        // },
      }
      this.enginClassification = null
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams1.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams1 = {
        pageNum: 1,
        pageSize: 10,
        district: undefined,
        notAreaId: [],
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        imgUrl: undefined,
        type: undefined,
        beginTime: [],
        createBy: ''
      }
      this.areaList = []
      this.buildingList = []
      this.unitList = []
      this.currentEnginTypeChangeOptions1 = []
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 新增顶管工程
    // addNewPipe(data){
    //   this.$refs.enginPipe.openDialog({
    //     id:data.id
    //   },'add')
    // },
    nodeCancel() {
      this.nodeDetailVisible = false
    },
    toNodeDetail() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let nodeCollection = []
          // 收集节点信息
          this.currentCheckList.forEach((e, idx) => {
            let nodeItem = this.$refs['EnginNodeInfo' + idx][0].infoCollection()
            nodeCollection.push(nodeItem)
            setTimeout(() => {
              console.log('nodeCollection:', nodeItem)
              console.log('nodeCollection:', this.$refs['EnginNodeInfo' + idx][0])
            }, 2000)
          })
          this.queryParams.zEngineeringNodeBoList = nodeCollection
          if (this.enginNodeStatus == '修改') {
            putEngineeringCivil(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 if (this.enginNodeStatus == '添加用料') {
            addEngineeringCivil(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 if (this.enginNodeStatus == '添加用料') {
            addEngineeringCivil(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 {
            addEngineeringCivil(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.$message.error(`请完善信息!`);
        }
      })


      return
      getDictList({enginType: ['new_built', 'old_renovation']}).then(res => {
        this.nodeList = res.data
        console.log('跳到详情前的queryParams', this.queryParams)
        console.log('跳到详情前的节点集合', this.nodeList)
        if (this.currentType == 'put') {
          this.$refs.childNode.open(this.queryParams, 16, this.nodeList)
          this.currentType = null
          return
        }
        // 加工 enginClassification 工程节点
        // const parts = this.value[1].split('_');
        // let result = parts.slice(2).join('_');
        // console.log(result)
        // this.queryParams.zEngineeringNodeBo.type = this.enginClassification
        // this.queryParams.enginClassification = result
        // console.log(this.queryParams)
        console.log('新增queryparams传值', this.queryParams)
        this.$refs.childNode.open(this.queryParams, 0, this.nodeList)
        return
        this.$refs['form'].validate(e => {
          if (e) {
            this.nodeDetailVisible = true
          }
        })
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.currentCheckingEnginList = []
      this.enginNodeStatus = '新增'
      this.reset();
      this.open = true;
      this.title = "添加民用工程";
    },
    refresh(value){
      this.engineeringGasOpeningShow=true
    },
    async gotoOpenGas(entity){
      entity.pageNum = 1;
      entity.pageSize = 10;
      const { district, areaId, buildingId, unitId, houseId ,pageNum , pageSize} = entity;
      const response = await queryPageListAndGetByCivi({ district, areaId, buildingId, unitId, houseId ,pageNum , pageSize});
      if (response!=null){
        this.engineeringGasOpeningShow=true
        this.$nextTick(()=>{
          this.$refs.engineeringGasOpening.handleview(response);
        })
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      let that = this
      this.enginNodeStatus = '修改'
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getEngineeringCivil(id).then(res => {
        that.loading = false;
        // let newData = res.data
        // // 手动调用行政区发生改变
        let newData = res.data
        that.districtHasChanged(newData.district)
        that.communityHasChanged(newData.areaId)
        that.buildingHasChanged(newData.buildingId, newData.areaId)
        that.unitHasChanged(newData.unitId)
        that.queryParams = res.data
        let va = that.queryParams.enginClassification
        that.enginTypeHasChanged(that.queryParams.enginType)
        that.queryParams.enginClassification = va
        that.open = true
        that.title = "修改民用工程";
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateEngineeringCivil(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addEngineeringCivil(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      console.log(row)
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除所选数据项？').then(() => {
        this.loading = true;
        return delEngineeringCivil(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    exportBottomLeg() {
      if (this.queryParams1.district == undefined || this.queryParams1.district == null || this.queryParams1.district == '') {
        this.$message.warning("请选择行政区")
        return
      }
      this.download('zdsz/engineeringCivil/exportBottomLeg', {
        ...this.queryParams1
      }, `民用工程-${new Date().getTime()}.xlsx`)
    },
    /** 导出按钮操作 */
    exportObtainQualifiedRoom() {
      if (this.queryParams1.beginTime == undefined || this.queryParams1.beginTime == null || this.queryParams1.beginTime.length <= 0) {
        this.$message.warning("请选择施工时间")
        return
      }
      this.download('zdsz/engineeringCivil/exportObtainQualifiedRoom', {
        ...this.queryParams1
      }, `民用工程-${new Date().getTime()}.xlsx`)
    },
    /** 导出按钮操作 */
    handleExport() {
      // if (this.queryParams1.district == undefined || this.queryParams1.district == null || this.queryParams1.district == '') {
      //   this.$message.warning("请选择行政区")
      //   return
      // }
      if (this.queryParams1.enginType == undefined || this.queryParams1.enginType == null || this.queryParams1.enginType == '') {
        this.$message.warning("请选择工程类型")
        return
      }
      if (this.queryParams1.enginClassification == undefined || this.queryParams1.enginClassification == null || this.queryParams1.enginClassification == '') {
        this.$message.warning("请选择工程分类")
        return
      }
      this.download('zdsz/engineeringCivil/export', {
        ...this.queryParams1
      }, `民用工程-${new Date().getTime()}.xlsx`)
    },
    handleExportColor() {
      // if (this.queryParams1.district == undefined || this.queryParams1.district == null || this.queryParams1.district == '') {
      //   this.$message.warning("请选择行政区")
      //   return
      // }
      if (this.queryParams1.enginType == undefined || this.queryParams1.enginType == null || this.queryParams1.enginType == '') {
        this.$message.warning("请选择工程类型")
        return
      }
      if (this.queryParams1.enginClassification == undefined || this.queryParams1.enginClassification == null || this.queryParams1.enginClassification == '') {
        this.$message.warning("请选择工程分类")
        return
      }
      if (this.queryParams1.enginClassification != 'indoor_engin') {
        this.$message.warning("颜色导出只支持室内工程")
        return
      }
      this.download('zdsz/engineeringCivil/exportColor', {
        ...this.queryParams1
      }, `民用工程-${new Date().getTime()}.xlsx`)
    }
  }
}
;
</script>
<style lang="scss" scoped>

::v-deep .addDialog {
  width: 60%;
  // height: 85%;
  max-height: 85%;
  overflow: hidden;
  overflow-y: scroll;
}

::v-deep .appendElDialog {
  overflow: hidden;
  overflow-y: scroll;
  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%;
  }

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

::v-deep .checkingAll {
  .el-dialog {
    width: 40%;
    height: 70%;
  }

  .el-dialog__body {
    padding-left: 28%;
  }

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

  .el-textarea__inner {
    width: 360px;
    height: 115px;
  }
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>