index.vue 16.8 KB
<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入项目类型 "  size="small" />
      </el-form-item>
      <el-form-item label="项目类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择项目类型 "  size="small">
          <el-option label="工地" value="0" />
          <el-option label="消纳场" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="place">
        <el-select v-model="queryParams.place" placeholder="请选择所属区域 "  size="small">
         <el-option v-for="item in areas" :label="item.name" :value="item.code" :key="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="workStartTime" v-if="this.queryParams.status==1">
        <el-date-picker  size="small" style="width: 200px" v-model="queryParams.workStartTime" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="workEndTime" v-if="this.queryParams.status==1">
        <el-date-picker  size="small" style="width: 200px" v-model="queryParams.workEndTime" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
        </el-date-picker>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
        <el-button 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" size="mini" @click="handleAdd" v-hasPermi="['business:threestep:add']" v-if="this.queryParams.pageStatus==0 && new Date().getHours() > 7 && new Date().getHours() < 24">新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-card class="box-card" v-for="item in threestepList" style="margin-bottom: 10px;">
        <p>{{ item.type==0?"工地":"消纳场"}}</p>
       <el-row class="card_row">
         <el-col :span="12" class="card_grid">
          <div class="card_title" style="font-weight: bold;">{{item.name}}</div>
         </el-col>

         <el-col :span="12" class="card_grid" >
           <span >{{item.place}}</span>
         </el-col>
       </el-row>

       <el-row class="card_row" style="margin-top: 5px;">
         <el-col :span="24">
           <div>自查时间:{{item.selfCheckTime}}</div>
         </el-col>
       </el-row>

      <el-row class="card_row" style="margin-top: 20px;">
        <el-col :span="24">
          <div>巡查时间:{{item.checkTime}}</div>
        </el-col>
      </el-row>

     <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item,0)"  v-hasPermi="['business:threestep:edit']" v-if="queryParams.pageStatus==1 && item.status==1 && item.checkEndTime == null">抽查</el-button>
       <el-button size="mini" type="text" icon="el-icon-edit" @click="reSub(item)"  v-hasPermi="['business:threestep:add']" v-if="item.status==2">被驳回</el-button>

     <el-button size="mini" type="text" @click="handleUpdate(item,1)"  v-hasPermi="['business:threestep:edit']">查看详情</el-button>

     </el-card>

    <h5Page v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" width="330px" append-to-body v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-if="open">

            <el-form-item label="项目类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择项目类型" @change="selectType">
                <el-option label="工地" value="0" />
                <el-option label="消纳场" value="1" />
              </el-select>
            </el-form-item>

            <el-form-item label="所属区域" prop="place" >
              <el-select v-model="form.place" placeholder="请选择所属区域" filterable  reserve-keyword @clear="areaClear" @change="selectArea">
                <el-option v-for="item in areas" :label="item.name" :value="item.code" :key="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="labelName" prop="name" v-if="form.type!=null">
              <el-select v-model="form.name" filterable  reserve-keyword @change="getObjId">
                <el-option v-for="item in remoteData" :label="item.name"
                  :value="item.name" :key="item.id" v-if="!form.place || item.areaCode == form.place">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="labelName2" prop="place" v-if="form.type!=null">
             <el-select v-model="bindname" filterable  reserve-keyword @change="getEarthsiteId">
               <el-option  v-if="item.show"
                 v-for="item in bindData"
                 :label="item.name"
                 :value="item.name"
                 :key="item.id">
               </el-option>
             </el-select>
            </el-form-item>

            <el-form-item label="消纳合同" prop="contract" v-if="form.type!=null">
               <el-select v-model="form.contract" filterable  reserve-keyword  @change="conractCheck">
                 <el-option v-for="item in filterContract" :label="item.contractNo" :value="item.contractNo" :key="item.id">
                 </el-option>
               </el-select>
            </el-form-item>

            <el-form-item label="运输企业" prop="companys" v-if="form.type==0">
              <el-select v-model="form.companys" filterable multiple @change="checkCompany" >
                <el-option  v-for="item in companyList" :label="item.name" :value="item.name" :key="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="运输车辆" prop="companyTrucks" v-if="form.type==0">
              <el-select v-model="form.companyTrucks" filterable multiple  reserve-keyword >
                <el-option v-for="item in truckList" :label="item.licenseplateNo" :value="item.id" :key="item.id"
                v-if="form.companys && (form.companys.indexOf(item.companyName) > -1)"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="现场负责人" prop="person" v-if="form.type!=null">
              <el-input v-model="form.person" :maxlength="20" show-word-limit  />
            </el-form-item>

            <el-form-item label="联系电话" prop="phone" v-if="form.type!=null">
              <el-input v-model="form.phone" :maxlength="11" show-word-limit  />
            </el-form-item>

            上传附件:<a style="color:blue;font-size: 12px;" @click="picSample=true">示意图</a>

        <el-row type="flex" justify="center" style="margin-top: 20px;"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(0)">过水槽照片</a>
            <vue-preview :slides="slides[0]"></vue-preview>
            <el-input v-model="form.img0" type="hidden"></el-input>
            <p v-for="img,index in form.img0">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(0,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(1)">洗车平台照片</a>
            <vue-preview :slides="slides[1]"></vue-preview>
            <el-input v-model="form.img1" type="hidden"></el-input>
            <p v-for="img,index in form.img1">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(1,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
          <el-row type="flex" justify="center" style="margin-top: 20px;"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(2)">出入口照片</a>
            <vue-preview :slides="slides[2]"></vue-preview>
            <el-input v-model="form.img2" type="hidden"></el-input>
            <p v-for="img,index in form.img2">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(2,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(3)">沉淀池照片</a>
            <vue-preview :slides="slides[3]"></vue-preview>
            <el-input v-model="form.img3" type="hidden"></el-input>
            <p v-for="img,index in form.img3">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(3,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(4)">硬质路面照片</a>
            <vue-preview :slides="slides[4]"></vue-preview>
            <el-input v-model="form.img4" type="hidden"></el-input>
            <p v-for="img,index in form.img4">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(4,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(5)">{{form.type==0?"摄像头视频截图1":"洗车设施照片"}}</a>
            <vue-preview :slides="slides[5]"></vue-preview>
            <el-input v-model="form.img5" type="hidden"></el-input>
            <p v-for="img,index in form.img5">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(5,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
          <el-row type="flex" justify="center" style="margin-top: 20px;"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(6)">{{form.type==0?"摄像头视频截图2":"雾炮机"}}</a>
            <vue-preview :slides="slides[6]"></vue-preview>
            <el-input v-model="form.img6" type="hidden"></el-input>
            <p v-for="img,index in form.img6">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(6,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(7)">{{form.type==0?"摄像头视频截图3":"裸露黄土覆盖照片"}}</a>
            <vue-preview :slides="slides[7]"></vue-preview>
            <el-input v-model="form.img7" type="hidden"></el-input>
            <p v-for="img,index in form.img7">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(7,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(8)">其他1</a>
            <vue-preview :slides="slides[8]"></vue-preview>
            <el-input v-model="form.img8" type="hidden"></el-input>
            <p v-for="img,index in form.img8">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(8,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(9)">其他2</a>
            <vue-preview :slides="slides[9]"></vue-preview>
            <el-input v-model="form.img9" type="hidden"></el-input>
            <p v-for="img,index in form.img9">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(9,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
          <el-row type="flex" justify="center" style="margin-top: 20px;"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(10)">其他3</a>
            <vue-preview :slides="slides[10]"></vue-preview>
            <el-input v-model="form.img10" type="hidden"></el-input>
            <p v-for="img,index in form.img10">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(10,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(11)">其他4</a>
            <vue-preview :slides="slides[11]"></vue-preview>
            <el-input v-model="form.img11" type="hidden"></el-input>
            <p v-for="img,index in form.img11">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(11,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
          <el-row type="flex" justify="center" style="margin-top: 20px;"  v-if="form.type != null">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(12)">其他5</a>
            <vue-preview :slides="slides[12]"></vue-preview>
            <el-input v-model="form.img12" type="hidden"></el-input>
            <p v-for="img,index in form.img12">{{img.split("/")[img.split("/").length -1]}}<a @click="removeImage(12,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>

        <el-input v-model="form.earthsitesId" type="hidden" />
        <el-input v-model="form.objectId" type="hidden" />
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="查看详情" width="400px" append-to-body :visible.sync="info" >
      <h5Info :businessKey="businessKey" v-if="info"/>

      <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-if="this.queryParams.pageStatus==1">
        <el-form-item label="补充说明">
          <el-input type="textarea" v-model="form.subSubReason" ></el-input>
        </el-form-item>

        <el-row type="flex" justify="center">
          <el-col :span="8">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(91)">附件1</a>
            <el-input v-model="form.attchItem1" type="hidden"></el-input>
            <p v-for="img,index in form.attchItem1">{{img.split("/")[img.split("/").length -1]}}<a @click="removeAttchItem(1,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="8">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(92)">附件2</a>
            <el-input v-model="form.attchItem2" type="hidden"></el-input>
            <p v-for="img,index in form.attchItem2">{{img.split("/")[img.split("/").length -1]}}<a @click="removeAttchItem(2,img)" style="color:red"> x</a></p>
          </el-col>
          <el-col :span="8">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(93)">附件3</a>
            <el-input v-model="form.attchItem3" type="hidden"></el-input>
            <p v-for="img,index in form.attchItem3">{{img.split("/")[img.split("/").length -1]}}<a @click="removeAttchItem(3,img)" style="color:red"> x</a></p>
          </el-col>
        </el-row>
      </el-form>



      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkEndSuccess()" v-if="this.queryParams.pageStatus==1">抽查通过</el-button>
        <el-button type="danger" @click="checkEndError()" v-if="this.queryParams.pageStatus==1">异常</el-button>
        <el-button @click="info=false;">关 闭</el-button>
      </div>
    </el-dialog>

      <el-dialog title="查看详情" width="400px" append-to-body :visible.sync="info2" >
        <h5Info :businessKey="businessKey" v-if="info2"/>

      </el-dialog>

    <el-dialog title="附件" :visible.sync="uploadImageDialog" append-to-body :beforeClose="handleClose" width="330px">
      <el-upload multiple :headers="upload.headers" :action="upload.url" :file-list="fileList"
        :on-success="uploadSuccess" :before-upload="beforeUpload">
        <el-button size="small" type="primary">选择附件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传不超过 20MB 的jpg pdf word文件</div>
      </el-upload>
      <div style="height: 40px;width:100%;">
        <el-button type="primary" style="margin-top: 20px;float:right;" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="示意图" :visible.sync="picSample" append-to-body width="400px">
      <img src="../../../assets/image/a87bc5f34940a160c1af95bd3adb1b6.png" width="100%" height="400px" />
    </el-dialog>
  </div>

</template>

<script src="../../../api/three_step.js" />
<style scope>
  .el-select-dropdown__item{
    width:300px;
  }

  .card_title{
    word-break: break-all;
  }

  .el-select__tags{
    max-height: 200px;
    overflow: auto;
  }

</style>