qa-prevention-gwj-vue/src/views/emergency/plan/components/list.vue

<template>
  <div class="app-container">
    <el-form label-width="110px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="应急预案名称">
            <el-input v-model="KEYWORDS" placeholder="搜索应急预案名称" clearable @clear="getQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="10px">
            <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
              搜索
            </el-button>
            <el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="varList"
      :row-key="getRowKey"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      tooltip-effect="dark"
      border
      fit
      highlight-current-row>
      <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="PLAN_NAME" label="应急预案名称" width="300" />
      <el-table-column prop="PLAN_CATEGORY_NAME" label="预案类别" width="150" />
      <el-table-column prop="PLAN_LEVEL_NAME" label="预案级别" width="150" />
      <el-table-column prop="PLAN_RECORD_STATUS_NAME" label="备案状态" width="150" />
      <el-table-column label="相关附件">
        <template v-if="row.PLAN_ATTACH_IDS !==''" slot-scope="{row}">
          {{ row.PLAN_ATTACH_NAME }}
          <a v-show="row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.txt'" @click="goViewTxt(row.PLAN_ATTACH_IDS)">
            <el-tag>预览</el-tag>
          </a>
          <a v-show="row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.pdf'" @click="goViewPdf(row.PLAN_ATTACH_IDS)">
            <el-tag>预览</el-tag>
          </a>
          <a v-show="row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.mp4'" @click="goViewVideo(row.PLAN_ATTACH_IDS)">
            <el-tag>预览</el-tag>
          </a>
          <a
            v-show="row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.doc'
              || row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.xls'
              || row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.ppt'
              || row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.docx'
              || row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.xlsx'
            || row.PLAN_ATTACH_NAME.slice(row.PLAN_ATTACH_NAME.lastIndexOf('.')) === '.pptx'"
            :href="'http://view.officeapps.live.com/op/view.aspx?src='+serverurl+row.PLAN_ATTACH_IDS"
            title="查看"
            target="_blank"
            style="cursor:pointer;">
            <el-tag>预览</el-tag>
          </a>

        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{row}">
          <el-button type="text" icon="el-icon-view" size="mini" @click="goDetail(row)">查看</el-button>
          <el-button type="text" icon="el-icon-edit" size="mini" @click="handleEdit(row.EMERGENCYPLAN_ID)">编辑</el-button>
          <el-button type="text" style="color: red" icon="el-icon-delete" size="mini" @click="handleDelete(row.EMERGENCYPLAN_ID)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-btn-group">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" plain @click="batchDel">删除</el-button>
      </div>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>

    <el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='edit'?'修改':'新增'" width="750px" top="5vh">
      <el-form ref="form" :rules="rules" :model="form" label-width="110px" style="padding:0 20px">
        <el-form-item label="应急预案名称" prop="PLAN_NAME">
          <el-input id="PLAN_NAME" ref="PLAN_NAME" v-model="form.PLAN_NAME" maxlength="255" placeholder="这里输入应急预案名称..." title="应急预案名称" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预案编号" prop="PLAN_NO">
              <el-input id="PLAN_NO" ref="PLAN_NO" v-model="form.PLAN_NO" maxlength="255" placeholder="这里输入预案编号..." title="预案编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用领域" prop="PLAN_USE_SCOPE">
              <el-select ref="PLAN_USE_SCOPE" v-model="form.PLAN_USE_SCOPE" clearable>
                <el-option v-for="item in PLAN_USE_SCOPE_List" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预案类别" prop="PLAN_CATEGORY">
              <el-select ref="PLAN_CATEGORY" v-model="form.PLAN_CATEGORY" clearable>
                <el-option v-for="item in PLAN_CATEGORY_List" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预案级别" prop="PLAN_LEVEL">
              <el-select ref="PLAN_LEVEL" v-model="form.PLAN_LEVEL" clearable>
                <el-option v-for="item in PLAN_LEVEL_List" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编制单位" prop="ESTAB_UNIT">
              <el-input id="ESTAB_UNIT" ref="ESTAB_UNIT" v-model="form.ESTAB_UNIT" maxlength="255" placeholder="这里输入编制单位..." title="编制单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制人" prop="ESTAB_USER">
              <el-input id="ESTAB_USER" ref="ESTAB_USER" v-model="form.ESTAB_USER" maxlength="255" placeholder="这里输入编制人..." title="编制人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发布日期" prop="PUBLISH_DATE">
              <el-date-picker id="PUBLISH_DATE" ref="PUBLISH_DATE" v-model="form.PUBLISH_DATE" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%" type="date" placeholder="选择发布日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布文号" prop="PUBLISH_DOC_NO">
              <el-input id="PUBLISH_DOC_NO" ref="PUBLISH_DOC_NO" v-model="form.PUBLISH_DOC_NO" maxlength="255" placeholder="这里输入发布文号..." title="发布文号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="发布单位" prop="PUBLISH_UNIT">
          <el-input id="PUBLISH_UNIT" ref="PUBLISH_UNIT" v-model="form.PUBLISH_UNIT" maxlength="255" placeholder="这里输入发布单位..." title="发布单位" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="签发人" prop="ISSUER">
              <el-input id="ISSUER" ref="ISSUER" v-model="form.ISSUER" maxlength="255" placeholder="这里输入签发人..." title="签发人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预案备案状态" prop="PLAN_RECORD_STATUS">
              <el-select ref="PLAN_RECORD_STATUS" v-model="form.PLAN_RECORD_STATUS" clearable>
                <el-option v-for="item in PLAN_RECORD_STATUS_List" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="预案备案时间" prop="PLAN_RECORD_DATE">
          <el-date-picker id="PLAN_RECORD_DATE" ref="PLAN_RECORD_DATE" v-model="form.PLAN_RECORD_DATE" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%" type="date" placeholder="选择预案备案时间" />
        </el-form-item>
        <el-form-item label="备案接收单位" prop="PLAN_RECORD_UNIT">
          <el-input id="PLAN_RECORD_UNIT" ref="PLAN_RECORD_UNIT" v-model="form.PLAN_RECORD_UNIT" maxlength="255" placeholder="这里输入备案接收单位..." title="备案接收单位" />
        </el-form-item>
        <el-form-item label="预案摘要" prop="PLAN_SUMMARY">
          <el-input id="PLAN_SUMMARY" ref="PLAN_SUMMARY" :rows="3" v-model="form.PLAN_SUMMARY" type="textarea" maxlength="255" placeholder="这里输入预案摘要..." title="预案摘要" />
        </el-form-item>
        <el-form-item label="备注" prop="PLAN_REMARK">
          <el-input id="PLAN_REMARK" ref="PLAN_REMARK" :rows="3" v-model="form.PLAN_REMARK" type="textarea" maxlength="255" placeholder="这里输入备注..." title="备注" />
        </el-form-item>
        <el-form-item label="相关附件">
          <div class="uo-flex">
            <el-input v-model="form.PLAN_ATTACH_NAME" :disabled="true" title="请上传附件" />
            <el-upload
              :before-upload="beforeFileUpload"
              accept=".pdf"
              class="avatar-uploader"
              action="#">
              <el-button type="primary" icon="el-icon-upload" style="margin-left:10px; " plain>上传附件</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogViewTxt" title="文本文档" width="600px">
      <el-input :rows="30" v-model="txtPre" readonly type="textarea" placeholder="" />
    </el-dialog>
    <el-dialog :visible.sync="dialogViewPdf" title="文档" width="600px">
      <div>

        <pdf :page="pageNum" :src="pdfUrl" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event" />
        <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
          <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
        </el-button-group>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogViewVideo" title="视频" width="600px" @close="closePlay">
      <div>
        <video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" class="video-player vjs-custom-skin" />
      </div>
    </el-dialog>

  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import { upload } from '@/utils/upload'
import pdf from 'vue-pdf'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  components: { Pagination, pdf, videoPlayer },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      total: 0,
      config: config,
      KEYWORDS: '',
      varList: [],
      pd: [],
      PLAN_USE_SCOPE_List: [], // 数据字典
      PLAN_CATEGORY_List: [], // 数据字典
      PLAN_LEVEL_List: [], // 数据字典
      PLAN_RECORD_STATUS_List: [], // 数据字典
      form: {
        PLAN_NAME: '', // 应急预案名称
        PLAN_NO: '', // 预案编号
        PLAN_USE_SCOPE: '', // 适用领域
        PLAN_CATEGORY: '', // 预案类别
        PLAN_LEVEL: '', // 预案级别
        ESTAB_UNIT: '', // 编制单位
        ESTAB_USER: '', // 编制人
        PUBLISH_DATE: '', // 发布日期
        PUBLISH_DOC_NO: '', // 发布文号
        PUBLISH_UNIT: '', // 发布单位
        ISSUER: '', // 签发人
        PLAN_RECORD_STATUS: '', // 预案备案状态
        PLAN_RECORD_DATE: '', // 预案备案时间
        PLAN_RECORD_UNIT: '', // 备案接收单位
        PLAN_SUMMARY: '', // 预案摘要
        PLAN_REMARK: '', // 备注
        PLAN_ATTACH_NAME: '', // 相关附件名称
        // PLAN_ATTACH_IDS: '', // 相关附件
        file: '' // 相关附件
      },
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      dialogType: 'add',
      serverurl: config.fileUrl,
      dialogViewTxt: false,
      dialogViewVideo: false,
      dialogViewPdf: false,
      txtPre: '',
      // pdf预览
      pdfUrl: '',
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: config.fileUrl + 'uploadFiles/file/13cf0f4ec77e4d98ae8cdd9c3386ae0c/20210625/691910cd81024986a392f6203c4045f8.mp4' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      rules: {
        PLAN_NAME: [{ required: true, message: '应急预案名称不能为空', trigger: 'blur' }],
        PLAN_NO: [{ required: true, message: '预案编号不能为空', trigger: 'blur' }],
        PLAN_USE_SCOPE: [{ required: true, message: '请选择适用领域', trigger: 'blur' }],
        PLAN_CATEGORY: [{ required: true, message: '请选择预案类别', trigger: 'blur' }],
        PLAN_LEVEL: [{ required: true, message: '请选择预案级别', trigger: 'blur' }],
        ESTAB_UNIT: [{ required: true, message: '编制单位不能为空', trigger: 'blur' }],
        ESTAB_USER: [{ required: true, message: '编制人不能为空', trigger: 'blur' }],
        PUBLISH_DATE: [{ required: true, message: '发布日期不能为空', trigger: 'blur' }],
        PUBLISH_DOC_NO: [{ required: true, message: '发布文号不能为空', trigger: 'blur' }],
        PUBLISH_UNIT: [{ required: true, message: '发布单位不能为空', trigger: 'blur' }],
        ISSUER: [{ required: true, message: '签发人不能为空', trigger: 'blur' }],
        PLAN_RECORD_STATUS: [{ required: true, message: '请选择预案备案状态', trigger: 'blur' }],
        PLAN_RECORD_DATE: [{ required: true, message: '预案备案时间不能为空', trigger: 'blur' }],
        PLAN_RECORD_UNIT: [{ required: true, message: '备案接收单位不能为空', trigger: 'blur' }],
        PLAN_SUMMARY: [{ required: true, message: '预案摘要不能为空', trigger: 'blur' }],
        PLAN_REMARK: [{ required: false, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList(this.ROLE_ID)
  },
  methods: {
    getRowKey(row) {
      return row.EMERGENCYPLAN_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.getQuery()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/emergencyplan/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS
        }
      ).then((data) => {
        this.listLoading = false
        this.getDict()
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 添加
    handleAdd() {
      this.dialogType = 'add'
      this.resetForm()
      this.getDict()
      this.dialogFormEdit = true
    },
    // 查看
    goDetail(row) {
      this.$parent.EMERGENCYPLAN_ID = row.EMERGENCYPLAN_ID
      this.$parent.activeName = 'Info'
    },
    // 修改
    handleEdit(ID) {
      this.getDict()
      this.dialogType = 'edit'
      requestFN(
        '/emergencyplan/goEdit',
        {
          EMERGENCYPLAN_ID: ID
        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd) // copy obj
      }).catch((e) => {
        this.listLoading = false
      })
      this.dialogFormEdit = true
    },
    // 保存
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '数据保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const formData = new FormData()
          Object.keys(this.form).map(key => {
            formData.append(key, this.form[key])
          })
          upload(
            '/emergencyplan/' + this.dialogType,
            formData
          ).then((data) => {
            loading.close()
            this.$message({
              message: '预案信息保存成功',
              type: 'success'
            })
            this.dialogFormEdit = false
            this.getList()
          }).catch((e) => {
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    beforeFileUpload(file) {
      const types = ['application/pdf']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传文件只能是 PDF 格式!')
        return false
      } else {
        this.form.file = file
        this.form.PLAN_ATTACH_NAME = file.name
        this.$forceUpdate()
        return false
      }
    },

    handleDelete(id) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/emergencyplan/delete',
          {
            EMERGENCYPLAN_ID: id
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    batchDel() {
      const _selectData = this.$refs.multipleTable.selection
      if (_selectData == null || _selectData.length == 0) {
        this.$message({
          message: '请选中要删除的项...',
          type: 'error'
        })
        return false
      }
      const ids = _selectData.map((item, index) => {
        return item.EMERGENCYPLAN_ID
      }).join(',')

      this.$confirm('确定要删除选中的数据吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/emergencyplan/deleteAll',
          {
            DATA_IDS: ids
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.$refs.multipleTable.clearSelection()
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'emergencyplan:add,emergencyplan:del,emergencyplan:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.emergencyplanfhadminadd		// 新增权限
        this.del = data.emergencyplanfhadmindel		// 删除权限
        this.edit = data.emergencyplanfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取数据字典数据
    getDict: function() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'ab52643da4714042be2ebfb880097330'
        }
      ).then((data) => {
        this.PLAN_USE_SCOPE_List = data.list
      }).catch((e) => {

      })
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'b2759070db524cc4ae2d60ee4b263dc3'
        }
      ).then((data) => {
        this.PLAN_CATEGORY_List = data.list
      }).catch((e) => {

      })
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'ab54d50f12ef4f578bc29c3b980b83e5'
        }
      ).then((data) => {
        this.PLAN_LEVEL_List = data.list
      }).catch((e) => {

      })
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '8d07af03be10473ca17e1516a8e860d2'
        }
      ).then((data) => {
        this.PLAN_RECORD_STATUS_List = data.list
      }).catch((e) => {

      })
    },
    resetForm() {
      this.form = {
        PLAN_NAME: '', // 应急预案名称
        PLAN_NO: '', // 预案编号
        PLAN_USE_SCOPE: '', // 适用领域
        PLAN_CATEGORY: '', // 预案类别
        PLAN_LEVEL: '', // 预案级别
        ESTAB_UNIT: '', // 编制单位
        ESTAB_USER: '', // 编制人
        PUBLISH_DATE: '', // 发布日期
        PUBLISH_DOC_NO: '', // 发布文号
        PUBLISH_UNIT: '', // 发布单位
        ISSUER: '', // 签发人
        PLAN_RECORD_STATUS: '', // 预案备案状态
        PLAN_RECORD_DATE: '', // 预案备案时间
        PLAN_RECORD_UNIT: '', // 备案接收单位
        PLAN_SUMMARY: '', // 预案摘要
        PLAN_REMARK: '', // 备注
        PLAN_ATTACH_NAME: '', // 相关附件名称
        // PLAN_ATTACH_IDS: '',// 相关附件
        file: ''
      }
    },
    // pdf 预览
    goViewPdf(filePath) {
      this.pageNum = 1
      this.pdfUrl = this.serverurl + filePath
      this.dialogViewPdf = true
    },
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // txt 预览
    goViewTxt(filePath) {
      const file_url = this.serverurl + filePath
      // 可以是具体.txt也可以是接口返回的blob，或者web转换
      const xhr = new XMLHttpRequest()
      xhr.open('get', file_url, true)
      xhr.responseType = 'blob'
      var self = this// onload this指向为window中转一下
      this.loading = true
      xhr.onload = function() {
        if (this.status == 200) {
          self.loading = false
          console.log(this.response)
          const reader = new FileReader()
          reader.onload = function() {
            self.txtPre = reader.result// 获取的数据data
            self.dialogvisibleview = true
            console.log('reader.result', reader.result)
          }
          reader.readAsText(this.response)
        } else {
          this.loading = false
        }
      }
      xhr.send()

      this.dialogViewTxt = true
    },
    goViewVideo(filePath) {
      this.playerOptions.sources[0].src = this.serverurl + filePath
      this.playerOptions.sources[0].type = 'video/mp4'

      this.dialogViewVideo = true
    },
    downloadFile(EMERGENCYPLAN_ID) {
      this.$confirm('确定要下载此文件吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.httpurl + 'emergencyplan/download?EMERGENCYPLAN_ID=' + EMERGENCYPLAN_ID
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },
    closePlay() {
      this.$refs.videoPlayer.player.pause()
    }
  }
}

</script>
<style lang="scss" scoped>
>>> .el-dialog__body {
  padding: 20px 20px 0 20px;
}
.uo-flex {
  display: flex;
}
</style>