wt_pipe/src/views/zhpt/dataImport/jianceData/index.vue

<template>
  <div style="height:100%;padding:0 20px;">
    <el-tabs class="impTabs" v-model="activeTab">
      <el-tab-pane label="导入批次" name="import">
        <tf-page class="pagePanel">
          <template #action>
            <el-form :inline="true">
              <el-form-item label="所属项目">
                <el-select v-model="searchInfo.project" size="small" clearable>
                  <el-option v-for="item of projects" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="导入状态">
                <el-select v-model="searchInfo.status" size="small" clearable>
                  <el-option v-for="item of status" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item> -->
             <el-form-item label="导入时间">
                <el-date-picker value-format='yyyy-MM-dd HH:mm:ss' type="datetimerange" size="small" v-model="searchInfo.timeRange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="batchinfoPage">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="showAddDialog">数据导入</el-button>
                <!-- <el-button size="mini" icon="el-icon-search">模板导出</el-button> -->
              </el-form-item>
            </el-form>
          </template>
          <tf-table :pagination="batchPagination" @page-change="batchOnPageChange"  :columns="columns" :data="list">
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="viewProjectInfo(scope.row)">详情</el-button>
                <!-- <el-button type="text" size="small">重新录入</el-button> -->
              </template>
            </el-table-column>
          </tf-table>
        </tf-page>
      </el-tab-pane>
      <el-tab-pane label="检测数据" name="list">
        <tf-page class="pagePanel">
          <template #action>
            <el-form :inline="true" class="dataSearchForm">
              <el-form-item label="所属项目">
                <el-select v-model="dataSeachInfo.project" size="small" clearable>
                  <el-option v-for="item of projects" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="批次号">
                <el-input v-model="dataSeachInfo.pici" size="small"></el-input>
              </el-form-item>
              <el-form-item label="行政区">
                <el-select v-model="dataSeachInfo.region" size="small" clearable>
                  <el-option v-for="item of districts" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="数据状态">
                <el-select v-model="dataSeachInfo.status" size="small" clearable>
                  <el-option v-for="item of projects" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="起点编号">
                <el-input v-model="dataSeachInfo.s_code" size="small"></el-input>
              </el-form-item>
              <el-form-item label="终点编号">
                <el-input v-model="dataSeachInfo.e_code" size="small"></el-input>
              </el-form-item>
              <el-form-item label="导入时间">
                <el-date-picker value-format='yyyy-MM-dd HH:mm:ss' type="datetimerange" size="small" v-model="dataSeachInfo.timeRange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="getDataList">查询</el-button>
              </el-form-item>
            </el-form>
          </template>
          <tf-table :columns="dataColumns" :data="dataList" :pagination="pagination" @page-change="onPageChange">
            <!-- <template>
                <el-button type="text" size="small">校对</el-button>
              </template> -->
          </tf-table>
        </tf-page>
      </el-tab-pane>
    </el-tabs>
    <tf-dialog :close-on-click-modal='false' :close-on-press-escape='false' height="600px" title="检测数据导入" :visible.sync='isAddDialogShow' class="addDialog" width="1000px">
      <el-steps simple :active="importStep" finish-status="success" v-if="formType==='add'">
        <el-step title="上传导入文件"></el-step>
        <el-step title="导入数据"></el-step>
        <el-step title="导入完成"></el-step>
      </el-steps>
      <div v-if="importStep==0">
        <el-form :model="addForm" ref='addForm' label-width="100px" :rules="addRules" :disabled="formType==='edit'">
          <tf-title>项目信息</tf-title>
          <el-row>
            <el-col :span="12">
              <el-form-item label="数据类型" prop="type">
                <el-select v-model="addForm.type" size="small" clearable>
                  <el-option label="检测数据" value="tc"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属项目" prop="project">
                <el-select v-model="addForm.project" size="small" clearable>
                  <el-option v-for="item of projects" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="行政区" prop="district">
                <el-select v-model="addForm.district" size="small" clearable>
                  <el-option v-for="item of districts" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位" prop="tcUnit">
                <el-select v-model="addForm.tcUnit" size="small" clearable>
                  <el-option v-for="item of departments" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <tf-title>附件</tf-title>
          <el-row>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-change="beforeAvatarUpload" :on-success="handleAvatarSuccess" accept=".jpg,.jpeg,.png,.pdf,.doc,.xls,.xlsx" :file-list="fileList" :auto-upload="false" multiple :limit="3" :on-exceed="handleExceed" size="small">
              <el-button size="small" type="primary" style="margin-top: 3px; left:0px; float:left; ">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                ⚠️注意：请上传jpg,png,jpeg,pdf,excel,word格式的文件，且大小不能超过10MB!最多3个文件!
              </div>
            </el-upload>
          </el-row>
        </el-form>
      </div>
      <div v-else-if="importStep==1">
        <el-result title="导入中......" subTitle="">
          <template slot="icon">
            <i class="el-icon-loading"></i>
          </template>
        </el-result>
      </div>
      <div v-else-if="importStep==2">
        <el-result icon="success" title="导入成功" subTitle="">
          <template slot="extra">
            <el-button type="primary" size="medium" @click="isAddDialogShow = false">关闭</el-button>
          </template>
        </el-result>
      </div>
      <div slot="footer" style="text-align:right;" v-show="importStep===0&&formType==='add'">
        <el-button @click="isAddDialogShow = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addSubmit()" size="small">确 定</el-button>
      </div>
    </tf-dialog>
  </div>
</template>
<script lang="ts">
/**
 * @description 检测数据导入
 * @author lishun <876330731@qq.com>
 */
import { Vue, Component,Watch } from 'vue-property-decorator'
import { batchinfoPage, checkDataImport,checkdataPage } from '@/api/dataCheckModule/dataImport'
import { uploadFile, getAllDepartments } from '@/api/base'
import { projectPage } from '@/api/dataCheckModule/projectList'
import { getDefaultPagination } from '@/utils/constant'
import { districts } from '@/views/zhpt/dataImport/common/constant'
import { ElForm } from 'element-ui/types/form'
@Component({
  name: 'JianCeDataImport'
})
export default class JianCeDataImport extends Vue {
  /**数据导入列名 */
  columns = [
    { type: 'index', label: '序号' },
    { prop: 'prjName', label: '所属项目' },
    { prop: 'district', label: '行政区' },
    { prop: 'batchNo', label: '批次号' },
    { prop: 'departmentName', label: '单位' },
    { prop: 'dataCount', label: '总数据量' },
    // { prop: 'wrongData', label: '异常数据' },
    // { prop: 'status', label: '导入状态' },
    { prop: 'createUser', label: '操作人' },
    { prop: 'createTime', label: '操作时间' }
  ]
  /**数据列名 */
  dataColumns = [
    { type: 'index', label: '序号' },
    { prop: 'batchinfo.prjName', label: '所属项目', width: '100px' },
    { prop: 'batchinfo.batchNo', label: '批次号', width: '150px' },
    { prop: 'area', label: '行政区' },
    { prop: 'testingZone', label: '测区' },
    { prop: 'pipeProperties', label: '管段属性' },
    { prop: 'roadName', label: '道路名称', showOverflowTooltip: true },
    { prop: 'startCode', label: '起点编码', showOverflowTooltip: true },
    { prop: 'endCode', label: '终点编码', showOverflowTooltip: true },
    { prop: 'pipeLength', label: '管道长度(m)', width: '150px' },
    { prop: 'sectionDataOne', label: '断面数据1', width: '150px' },
    { prop: 'sectionDataTwo', label: '断面数据2', width: '150px' },
    { prop: 'videoTime', label: '视频显示时间', width: '150px' },
    { prop: 'videoSectionDataOne', label: '视频显示断面数据1', width: '150px' },
    { prop: 'videoSectionDataTwo', label: '视频显示断面数据2', width: '150px' },
    { prop: 'pdCheckLength', label: '判读检测长度', width: '150px' },
    { prop: 'noHandleLength', label: '暂无法预处理长度', width: '150px' },
    { prop: 'pdRemark', label: '判读备注', showOverflowTooltip: true, width: '150px' },
    { prop: 'isCheck', label: '是否检测' },
    { prop: 'rainTask', label: '雨水任务单', showOverflowTooltip: true, width: '100px' },
    { prop: 'remark', label: '探测备注', showOverflowTooltip: true },
   { prop: 'batchinfo.createTime', label: '导入时间', showOverflowTooltip: true }
  ]
  /**数据展示数据 */
  dataList = []
  /**数据导入数据 */
  list = []
  /**项目添加表单 */
  addForm = {
    project: '',
    type: '',
    tcUnit: '',
    district: ''
  }
  /**表单验证 */
  addRules = {
    type: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
    project: [{ required: true, message: '请选择项目', trigger: 'change' }],
    tcUnit: [{ required: true, message: '请选择单位', trigger: 'change' }]
  }
  /**激活 tab panel */
  activeTab = 'import'
  /**分页 */
  pagination = getDefaultPagination()
  /**批次表格 */
  batchPagination= getDefaultPagination()
  /**行政区 */
  districts = districts
  /**是否编辑 */
  formType = 'add'
  /**导入过滤信息 */
  searchInfo = {
    project: '', //项目
    status: '', //导入状态
    timeRange: [] //导入时间
  }
  /**数据表格过滤信息 */
  dataSeachInfo = {
    project: '', //项目
    pici: '', //批次号
    region: '', //行政区
    status: '', //数据状态
    s_code: '', //起点编码,
    e_code: '', //终点编码
    timeRange: [] //导入时间
  }
  /**项目列表 */
  projects = []
  /**数据状态 */
  status = []
  /**导入步骤索引,0开始 */
  importStep = 0
  /**对话框显隐 */
  isAddDialogShow = false
  /**项目类型 */
  prjTypes = []
  /**上传附件列表 */
  fileList = []
  files = []
  /**单位列表 */
  departments = []
  mounted() {
    this.batchinfoPage()
    this.getDataList()
    this.getProjectList()
    this.getDepartments()
  }
  /*--------------------- 附件上传 ----------------*/
  handleRemove(file, fileList) {
    console.log('文件列表移除文件时的钩子', file, fileList)
    this.fileList = fileList
  }
  handlePreview(file) {
    console.log('点击文件列表中已上传的文件时的钩子', file)
  }
  handleExceed(files, fileList) {
    this.$message.warning(
      `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
    )
  }
  beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${file.name}？`)
  }
  onBeforeUpload(file) {
    console.log('图片格式', file.type)
    let fileName = file.name
    let esuffixt = fileName.substr(fileName.lastIndexOf('.') + 1)

   const isIMAGE = esuffixt === 'xls' || esuffixt === 'xlsx'
    const isLt1M = file.size / 1024 / 1024 < 10

    if (!isIMAGE) {
      this.$message.error('上传文件只能是jpg,png,jpeg,pdf,excel,word格式!')
    }
    if (!isLt1M) {
      this.$message.error('上传文件大小不能超过 10MB!')
    }
    return isIMAGE && isLt1M
  }
  //上传之前的钩子函数
  beforeAvatarUpload(response, file, fileList) {
    console.log(response, file)
    var isTrue = this.onBeforeUpload(response.raw)
    if (isTrue) {
      this.fileMap(file)
    } else {
      file.pop()
    }
  }
  fileMap(file) {
    if (file.length !== 0) {
      const files = file.map((v) => {
        return v.raw
      })
      this.files = files
    }
  }
  handleAvatarSuccess(res, file, fileList) {
    console.log('文件上传成功时的钩子', res, file, fileList)
  }
  /**导入弹窗 */
  showAddDialog() {
    this.isAddDialogShow = true
    this.formType = 'add'
    this.fileList = []
      this.files = []
      this.importStep=0
      this.addForm = {
        project: '',
        district: '',
        type: 'tc',
        tcUnit: ''
      }
  }
  /**单位信息 */
  getDepartments() {
    getAllDepartments()
      .then((result) => {
        if (result.code === 1) {
          this.departments = result.result || []
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  /**提交 */
  addSubmit() {
    ;(this.$refs['addForm'] as ElForm).validate((valid) => {
      if (!valid) {
        return
      }
    if (this.files.length === 0) {
      this.$message.warning('请上传文件')
      return
    }
    if (this.files.length === 1) {
      this.importStep = 1
      const formdata = new FormData()
      this.files.forEach((file) => {
        formdata.append('file', file)
      })
      uploadFile(formdata)
        .then((result) => {
          if (result.code !== 1) {
            this.$message.error('上传文件失败')
            return
          }
          if (!result.result || result.result.length === 0) {
            console.log('上传文件未返回fileId')
            return
          }
          const fileID = result.result[0].fileId

          const data = {
            prjId: this.addForm.project,
            district: this.addForm.district,
            departmentId: this.addForm.tcUnit,
            fileId: fileID
          }
          checkDataImport(data)
            .then((addResult) => {
              if (addResult.code === 1) {
                this.$message.success('保存成功')
                this.importStep = 2
                //this.isAddDialogShow = false
                this.batchinfoPage()
              }
            })
            .catch((err) => {
              this.$message.error('保存失败')
              console.log(err)
            })
        })
        .catch((err) => {
          this.$message.error('上传文件失败')
          console.log(err)
        })
    } else {
      this.$message.warning('单次只允许上传一个文件')
    }
    })
  }
  /**详情 */
  viewProjectInfo(row) {
    this.isAddDialogShow = true
    this.formType = 'edit'
    this.addForm = {
      project: row.prjId,
      district: row.district,
      tcUnit: row.departmentId,
      type: 'tc'
    }
    // this.fileList = row.toflyFiles.map((item) => {
    //   return item.fileName
    // })
  }
  /**数据导入列表 */
  batchinfoPage() {
    let parames = {
      prjId: this.searchInfo.project,
      stage: 4,
      startTime:this.searchInfo.timeRange&&this.searchInfo.timeRange.length>=1?this.searchInfo.timeRange[0]:'',
      endTime:this.searchInfo.timeRange&&this.searchInfo.timeRange.length==2?this.searchInfo.timeRange[1]:''
    }
    parames = { ...parames, ...this.batchPagination }
    batchinfoPage(parames)
      .then((result) => {
        if (result.code === 1) {
          this.list = result.result.records
          const { current, size, total } = result.result
          this.batchPagination = { current, size, total }
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  /**
   * 数据列表
   */
  getDataList() {
    let parames = {
      'batchinfo.batchNo': this.dataSeachInfo.pici,
      'batchinfo.prjId': this.dataSeachInfo.project,
      area: this.dataSeachInfo.region,
      startCode: this.dataSeachInfo.s_code,
      endCode: this.dataSeachInfo.e_code,
      'batchinfo.startTime':this.dataSeachInfo.timeRange&&this.dataSeachInfo.timeRange.length>=1?this.dataSeachInfo.timeRange[0]:'',
      'batchinfo.endTime':this.dataSeachInfo.timeRange&&this.dataSeachInfo.timeRange.length==2?this.dataSeachInfo.timeRange[1]:''
    }
    parames = { ...parames, ...this.pagination }
    checkdataPage(parames)
      .then((result) => {
        if (result.code === 1) {
          this.dataList = result.result.records
          const { current, size, total } = result.result
          this.pagination = { current, size, total }
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  /**
   * 项目列表
   */
  getProjectList() {
    projectPage({})
      .then((result) => {
        if (result.code === 1) {
          this.projects = result.result.records.map((item) => {
            return { id: item.id, name: item.name }
          })
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  /**分页事件 */
  onPageChange(pagination) {
    this.pagination = { ...this.pagination, ...pagination }
    this.getDataList()
  }
  /**分页事件 */
  batchOnPageChange(batchPagination) {
    this.batchPagination = { ...this.batchPagination, ...batchPagination }
    this.batchinfoPage()
  }
}
</script>
<style lang="scss" scoped>
@import '@/views/zhpt/dataImport/common/index.scss';
.addDialog {
  >>> .el-form-item {
    .el-select {
      width: 100%;
    }
  }
}
.impTabs {
  height: 100%;
  >>> .el-tabs__content {
    height: calc(100% - 55px);
    .el-tab-pane {
      height: 100%;
    }
  }
}
// .dataSearchForm{
//   >>> .el-form-item{
//     .el-input{max-width: 150px;}
//     .el-select{max-width: 250px;}
//   }
// }
</style>