index.vue 7.37 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="type">
        <el-select v-model="queryParams.type" placeholder="请选择案卷类型" size="small">
          <el-option v-for="item in caseType" :label="item.name" :value="item.code"/>
        </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"/>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="createTime">
        <el-date-picker size="small" style="width: 200px"
                        v-model="queryParams.createTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" 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"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['caseOffline:caseOffline:add']"
          v-if="checkPer(['intelligencecontrols.messagemanage.add'])"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['caseOffline:caseOffline:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="caseOfflineList" @selection-change="handleSelectionChange">
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="案卷编号" align="center" prop="number"/>
      <el-table-column label="案卷类型" align="center" prop="type"/>
      <el-table-column label="所属区域" align="center" prop="place"/>
      <el-table-column label="时间" align="center" prop="createTime" width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['caseOffline:caseOffline:edit']"
          >{{ scope.row.status == 0 ? "审批中" : (scope.row.status == 2 ? "驳回" : "审批完成") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改线下交办案卷对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="案卷类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择案卷类型">
            <el-option v-for="item in caseType" :label="item.name" :value="item.code"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区域" prop="place">
          <el-select v-model="form.place" placeholder="请输入所属区域" size="small">
            <el-option v-for="item in areas" :label="item.name" :value="item.code"/>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="siteType">
          <el-select v-model="form.siteType" placeholder="请选择类型">
            <el-option label="工地" value="0"/>
            <el-option label="处理场所" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="form.siteType==0?'工地名称':'处理场所名称'" prop="siteName">
          <el-select 
            :popper-append-to-body="false" class="product-style"
            v-model="form.siteName" placeholder="请选择类型" 
            allow-create  filterable @change="getSite">
            <el-option v-for="item in data[form.siteType]" :label="item.name" :value="item.name" :title="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述" prop="caseDec">
          <el-input v-model="form.caseDec" placeholder="请输入问题描述" type="text" maxlength="200" :rows="3"/>
        </el-form-item>
        <el-form-item label="位置描述" prop="locationDec">
          <el-input v-model="form.locationDec" placeholder="请输入问题描述" type="text" maxlength="100" :rows="3"/>
        </el-form-item>
        <el-form-item label="案卷编号" prop="number">
          <el-input v-model="form.number" placeholder="请输入案卷编号" disabled/>
        </el-form-item>

        <el-form-item label="附件" prop="attach">
          <a style="color:blue;font-size: 12px;" @click="uploadImageDialog=true;">选择附件</a>
          <br/>
          <el-image v-for="item in slides"
                    style="width: 150px; height: 100px; margin: 5px;"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                    :z-index="2000">
          </el-image>
          <div style="display: inline-block;margin: 5px;position: relative; width: 150px;height: 100px;overflow:hidden;" v-for="item in videoSrc" >
            <video width="100%" controls="controls" height="100%" :src="item.url"></video>
          </div>
          <el-input v-model="form.attach" type="hidden"></el-input>
          <div style="color: blue;" v-for="(img,index) in form.attach">{{ img.split("/")[img.split("/").length - 1] }}
          <a  @click="removeAttchItem(index,img)" style="color:red;">X</a></div>
        </el-form-item>

      </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="查看详情" :visible.sync="open2" width="500px" append-to-body>
      <caseOfflineInfo :businessKey="businessKey" v-if="open2"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="附件" :visible.sync="uploadImageDialog" append-to-body :beforeClose="handleClose">
      <el-upload multiple :headers="upload.headers" :action="upload.url" :file-list="fileList"
                 accept=".docx,.doc,.pdf,.png,.jpeg,.png,.jpg,.mp4,.avi"
                 :on-success="uploadSuccess" :before-upload="beforeUpload">
        <el-button size="small" type="primary">选择附件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传不超过 20MB 的jpg、png、pdf、word、avi、mp4文件</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>
  </div>
</template>

<script src="@/api/caseoffline.js"/>