一个完整的vue页面（含增删改查 导出，上传图片、视频，保存编辑相关操作）

<template>
  <div class="wrap-box" id="SheXiangRecord">
    <el-form
      :inline="true"
      :label-position="labelPosition"
      label-width="80px"
      :model="ruleForm"
      class="demo-form-inline"
    >
      <el-form-item prop="Q_birdName_S_LK" style="width: calc(12% - 10px)">
        <el-input
          v-model="ruleForm.Q_birdName_S_LK"
          autocomplete="off"
          placeholder="请输入要搜索的关键词"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item prop="startDate" style="width: calc(28% - 10px); margin-right: 0;">
        <el-date-picker
          v-model="ruleForm.startDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
        >
        </el-date-picker>
        -
        <el-date-picker
          v-model="ruleForm.endDate"
          prop="endDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left: 0px">
        <el-button type="primary" @click="onSubmit"
          ><i class="el-icon-search"></i>搜索</el-button
        >
        <el-button @click="itemReset"
          ><i class="el-icon-refresh-right"></i>重置</el-button
        >
      </el-form-item>
       <el-form-item style="margin-left: 650px; margin-right: 0px;">
        <el-button type="primary" @click="handleLook(1)"
          >新增</el-button
        >
        <el-button @click="itemDel"
          ><i class="el-icon-delete"></i>删除</el-button
        >
      </el-form-item>
      <!-- <el-form-item style="margin-left: 195px; margin-right: 0">
        <el-button type="primary" @click="itemDown"
          ><i class="el-icon-download"></i>导出</el-button
        >
      </el-form-item> -->
    </el-form>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        :border="true"
        @selection-change="saveSelect"
        :header-cell-style="tableHeaderColor"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="鸟类名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="adress"
          label="抓拍地址"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="time"
          label="抓拍时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
        ></el-table-column>
        <el-table-column label="视频" width="220" align="center">
          <template slot-scope="scope">
              <video v-if="scope.row.video && scope.row.video.length != 0" :src="scope.row.video[0].url" controls="controls" autoplay style="width: 100%"></video>
              <div v-else class="viden_no">暂无视频</div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="handleLook(2, scope.row, true)"
              type="text"
              size="small"
            >
              查看
            </el-button>
             <el-button
              v-if="scope.row.video && scope.row.video.length != 0"
              @click.native.prevent="playVideo(scope.row)"
              type="text"
              size="small"
            >
              播放
            </el-button>
             <el-button
              @click.native.prevent="handleLook(2, scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleForm.pageNo"
        :page-sizes="[10, 15, 20, 30, 40, 50]"
        :page-size="ruleForm.pageCount"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        class="page"
      >
      </el-pagination>
    </div>
    <!-- 点击 新增 查看 编辑  -->
    <el-dialog
      title="信息"
      class="result-dialog"
      :visible.sync="dialogResultVisible"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="handleCloseDetail"
    >
    <el-form :model="editForm" :rules="ruleFormRules" ref="editForm">
        <div class="inputItem">
          <el-form-item label="鸟类名称" label-width="100px" prop="birdName">
            <el-input placeholder="请输入鸟类名称" v-model="editForm.birdName" name="inquirer" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="inputItem">
          <el-form-item label="抓拍时间" label-width="100px" prop="snappingTime" class="picker_time">
            <el-date-picker v-model="editForm.snappingTime" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="inputItem">
          <el-form-item label="抓拍摄像头" label-width="100px">
            <el-input placeholder="请输入抓拍摄像头地址" v-model="editForm.snappingAddress" name="inquirer" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="inputItem">
          <el-form-item label="状态" label-width="100px">
              <el-select placeholder="请选择状态" filterable v-model="editForm.statu">
                  <el-option value="0" label="已通过"></el-option>
                  <el-option value="1" label="待审核"></el-option>
                  <el-option value="2" label="未通过"></el-option>
              </el-select>
          </el-form-item>
        </div>
        <div class="inputItem">
          <el-form-item label=" 审核人" label-width="100px" prop="examineId">
            <el-select v-model="editForm.examineId" filterable placeholder="请选择审核人" :clearable="true">
                  <el-option v-for="(item, index) in options" :key="index" :label="item.examineName" :value="item.examineId"> </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="备注" style="display:block;" label-width="100px">
          <el-input type="textarea" name="remarks" v-model="editForm.remarks" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="鸟类简介" style="display:block;" label-width="100px">
          <el-input type="textarea" name="birdContent" v-model="editForm.birdContent" :rows="4"></el-input>
        </el-form-item>
        <div class="uploadbox" style="height: 260px;overflow: auto;" v-if="!dis">
          <el-upload ref="upload" class="upload-demo" action="" :http-request="myUpload" :on-preview="handlePreview" :on-remove="removeFile" list-type="picture" multiple :file-list="fileList" accept=".MP4, .rm, .rmvb, .mov, .mpeg1, .mpeg2, .mpeg3, .mpeg4, mtv, .dat, .wmv, .avi, .3gp, .amv, .dmv, .flv">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
          </el-upload>
        </div>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="handleSubmit" :disabled="dis" type="primary">保存</el-button>
        <el-button @click="handleCloseDetail">取消</el-button>
      </div>
    </el-dialog>
    <!-- 播放视频 -->
    <div v-if="video_hide" class="hide">
        <div class="hide_container">
          <div style="width: 900px;padding: 20px 0 0 0;background: #000;position: relative">
            <video :src="video_url" controls="controls" autoplay style="width: 100%"></video>
            <i class="el-icon-close" style="position:absolute;top: 5px;right: 5px;font-size: 24px;color: gray" @click="closeHander()"></i>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import {
  Form,
  FormItem,
  Input,
  Button,
  Table,
  TableColumn,
  Pagination,
  Dialog,
  Select,
  Option,
  DatePicker,
  Image,
  Upload
} from 'element-ui'
import CardList from '@/components/AIComponents/CardList.vue'
import AiResult from '@/components/AIComponents/AiResult.vue'
import AiSupplement from '@/components/AIComponents/AiSupplement.vue'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { AIAPI } from '@/network/api'
import { newFormPost9004, newPost9010, requestUrl, newPost9007, requestArr3 } from '@/network/request'
import axios from 'axios'
export default {
  name: 'identifyRecord',
  components: {
    Treeselect,
    CardList,
    AiResult,
    AiSupplement,
    'el-form': Form,
    'el-form-item': FormItem,
    'el-input': Input,
    'el-button': Button,
    'el-table': Table,
    'el-table-column': TableColumn,
    'el-pagination': Pagination,
    'el-dialog': Dialog,
    'el-select': Select,
    'el-option': Option,
    'el-date-picker': DatePicker,
    'el-image': Image,
    'el-upload': Upload,
  },
  data() {
    return {
      filedata: [], // 文件上传列表
      fileList: [], // 文件显示列表
      filddelete: [], // 删除列表
      labelPosition: 'left',
      ruleForm: {
        Q_birdName_S_LK: '',
        startDate: '',
        endDate: '',
        pageNo: 1,
        pageCount: 15
      },
      tableData: [],
      pages: {
        total: 0
      },
      dialogDetailVisible: false,
      dialogResultVisible: false,
      isShowIframe: false,
      hidebtn: false,
      itemResult: {},
      point: {
        lat: '',
        lon: ''
      },
      currentImgUrl: '',
      ids: [],
      resultList: [],
      video_hide: false,
      video_url: '',
      options: [],
      dis: false,
      nowItem: [],
      editForm: {
        birdContent: '',
        examineId: '',
        birdSnappingId: '',
        userId: '',
        snappingTime: '',
        snappingAddress: '',
        birdName: '',
        remarks: '',
        statu: '',
      },
      ruleFormRules: {
        birdName: [
          { required: true, message: '请输入鸟类名称', trigger: 'blur' },
        ],
        snappingTime: [
          { required: true, message: '请选择时间', trigger: 'blur' },
        ],
        examineId: [
          { required: true, message: '请选择审核人', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    async handleSubmit() {
      if (this.editForm.birdName && this.editForm.snappingTime && this.editForm.examineId) {
        let files = this.$refs.upload.uploadFiles
        console.log('kk', files)
        let formData = new FormData()
        this.filddelete.forEach(item => formData.append('uaIds', item))
        files.forEach(item => {
          formData.append('file', item.raw)
        })
        this.editForm.snappingTime = this.formatDateTime(this.editForm.snappingTime)
        formData.append('birdName', this.editForm.birdName)
        formData.append('examineId', this.editForm.examineId)
        formData.append('snappingAddress', this.editForm.snappingAddress)
        formData.append('birdContent', this.editForm.birdContent)
        formData.append('remarks', this.editForm.remarks)
        formData.append('status', this.editForm.statu)
        formData.append('snappingTime', this.editForm.snappingTime)
        let url
        if (this.nowItem) {
          formData.append('birdSnappingId', this.editForm.birdSnappingId)
          url = AIAPI.SheXiangRecord.birdSnapping + 'updBirdSnapping'
        } else {
          formData.append('soId', this.$store.state.Soid)
          url = AIAPI.SheXiangRecord.birdSnapping + 'addBirdSnapping'
        }
        const res = await newPost9010({
          url: url,
          data: formData
        })
        const { code, data, message } = res.data
        if (code == 200) {
          this.$message.success('保存成功')
          this.handleCloseDetail()
          this.handleGetLists()
        } else {
          this.$message.error(message)
        }
      } else {
        this.$message.warning('必填选不能为空!')
      }
    },
    async handleGetLists() {
      const loading = this.$loading.service({
        target: '.table-box',
        lock: true,
        text: '正在加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const params = this.ruleForm
      const res = await newPost9010({
        url: AIAPI.SheXiangRecord.getQueryBirdSnappingByFilter,
        data: params
      })
      const { code, data, total, message } = res.data
      loading.close()
      if (code == 200) {
        this.tableData = []
        this.pages.total = total
        // 将视频拼接进去
        let url = requestUrl() + '9010/zhsd/'
        for (let i in data) {
          this.tableData.push({
            name: data[i].birdName,
            adress: data[i].snappingAddress,
            time: data[i].snappingTime,
            details: data[i].birdContent,
            remark: data[i].remarks,
            id: data[i].birdSnappingId,
            check: false,
            statu: data[i].status,
            examineId: data[i].examineId,
          })
          this.pathSplicing_(data, i, url)
        }
        console.log('路径11', this.tableData)
      } else {
        this.$message.error(message)
      }
    },
    // 用来存文件 图片 视频的
    pathSplicing_(data, i, fileurl) {
      if (data[i].attList.length > 0) {
        this.tableData[i].img = []
        this.tableData[i].video = []
        this.tableData[i].file = []
        // 当有文件，但是没img类型的，img也要加一个url，防止报错
        for (let z in data[i].attList) {
          let imglength = data[i].attList.filter(item => item.uaType === 'jpg' || item.uaType === 'jpeg' || item.uaType === 'png' || item.uaType === 'gif' || item.uaType === 'JPG').length
          if (imglength == 0) {
            this.tableData[i].img = []
            this.tableData[i].img.push({
              url: ''
            })
          }
          let type = data[i].attList[z].uaType.toLowerCase()
          // 图片添加到img数组中
          if (type === 'jpg' || type === 'jpeg' || type === 'png' || type === 'gif' || type === 'JPG') {
            this.tableData[i].img.push({
              url: fileurl + data[i].attList[z].uaPath,
              id: data[i].attList[z].uaId
            })
            continue
          } else if (type === 'mp4') {
            this.tableData[i].video.push({
              url: fileurl + data[i].attList[z].uaPath,
              id: data[i].attList[z].uaId
            })
            continue
          } else {
            this.tableData[i].file.push({
              url: fileurl + data[i].attList[z].uaPath,
              id: data[i].attList[z].uaId
            })
            continue
          }
        }
      } else {
        this.tableData[i].file = []
        this.tableData[i].video = []
        this.tableData[i].img = []
        this.tableData[i].img.push({
          url: ''
        })
      }
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #fff;color: #000;font-weight: bold;'
      }
    },
    onSubmit() {
      this.ruleForm.pageNo = 1
      this.handleGetLists()
    },
    itemReset() {
      this.ruleForm.Q_birdName_S_LK = ''
      this.ruleForm.startDate = ''
      this.ruleForm.endDate = ''
      this.handleGetLists()
    },
    formatDateTime (date) {
      if (date == '' || !date) {
        return ''
      }
      var date = new Date(date)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let minute = date.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      let second = date.getSeconds()
      second = second < 10 ? ('0' + second) : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    // 获取下拉审核人数据
    queryallData() {
      requestArr3().post('/zhsd/birdSnapping/queryExamineNameAssembleMap', {
        soId: this.$store.state.Soid
      }).then(res => {
        this.options = res.data.data
      })
    },
    // async queryallData() {
    //   let params = {
    //     limit: 500,
    //     soId: this.$store.state.Soid,
    //   }
    //   const res = await newPost9007({
    //     url: AIAPI.SheXiangRecord.queryOrganUser,
    //     data: params
    //   })
    //   this.options = res.data.data
    // },
    // 播放视频
    playVideo(item) {
      if (item.video) {
        this.video_hide = true
        this.video_url = item.video[0].url
      } else {
        this.$message({
          message: '暂时无视频!',
          type: 'warning'
        })
      }
    },
    // 关闭按钮
    closeHander() {
      this.video_hide = false
      this.video_url = ''
    },
    saveSelect(val) {
      console.log('触发了复选框事件', val)
      this.ids = []
      val.map(item => {
        this.ids.push(item.id)
      })
    },
    handleSizeChange(val) {
      this.ruleForm.pageCount = val
      this.handleGetLists()
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNo = val
      this.handleGetLists()
    },
    // 导出
    async itemDown() {
      const loading = this.$loading.service({
        target: '#SheXiangRecord',
        lock: true,
        text: '正在导出...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const params = this.ruleForm
      /*
       * 解析blob响应内容并下载
       * @param {*} res blob响应内容
       * @param {String} mimeType MIME类型
       */
      function resolveBlob(res, mimeType) {
        const aLink = document.createElement('a')
        let blob = new Blob([res.data], { type: mimeType })
        let fileName = '识别记录.xlsx'
        aLink.href = URL.createObjectURL(blob)
        aLink.setAttribute('download', fileName) // 设置下载文件名称
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
      }
      let res = await newPost9010({
        method: 'post',
        url: AIAPI.SheXiangRecord.exportIdentificationRecordById,
        data: params,
        responseType: 'blob'
      })
      resolveBlob(
        res,
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      )
      loading.close()
    },
    // 上传文件
    myUpload (data) {
      this.filedata.push(data.file)
    },
    // 单击文件
    handlePreview (file) { },
    // 移除文件
    removeFile (file, fileList) {
      if (file.status == 'ready') {
        this.filedata.forEach((item, index) => {
          if (item.name == file.name) {
            this.filedata.splice(index, 1)
          }
        })
      } else {
        this.filddelete.push(file.id)
      }
    },
    itemDel() {
      if (this.ids.length === 0) {
        this.$message({
          message: '请选择您要删除的数据!',
          type: 'warning'
        })
        return
      }
      this.$confirm('此操作将永久删除选中记录，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const loading = this.$loading.service({
            target: '#SheXiangRecord',
            lock: true,
            text: '正在删除记录中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const params = {
            ids: this.ids
          }
          const res = await newPost9010({
            url: AIAPI.SheXiangRecord.delBirdSnappingByKey,
            data: params
          })
          const { code, message, data } = res.data
          loading.close()
          if (code == 200) {
            this.$message.success(message)
            this.ids = []
            this.handleGetLists()
          } else {
            this.$message.error(message)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleCloseDetail() {
      this.filedata = [] // 文件上传列表
      this.filddelete = []// 删除列表
      this.fileList = [] // 文件显示列表
      this.dialogResultVisible = false
    },
    // 新增
    async handleLook(type, item, dis_state) {
      this.queryallData()
      // 无论新增编辑
      this.fileList = []
      if (dis_state) {
        this.dis = dis_state
      } else {
        this.dis = false
      }
      this.dialogResultVisible = true
      if (type == 1) {
        this.editForm.birdContent = ''
        this.editForm.examineId = ''
        this.editForm.birdSnappingId = ''
        this.editForm.userId = ''
        this.editForm.snappingTime = ''
        this.editForm.snappingAddress = ''
        this.editForm.birdName = ''
        this.editForm.remarks = ''
        this.editForm.statu = ''
        this.nowItem = null
      } else if (type == 2) {
        console.log('点击编辑，查看按钮', item)
        this.editForm.birdContent = item.details
        this.editForm.examineId = item.examineId
        this.editForm.birdSnappingId = item.id
        this.editForm.userId = item.userId
        this.editForm.snappingTime = item.time
        this.editForm.snappingAddress = item.adress
        this.editForm.birdName = item.name
        this.editForm.remarks = item.remark
        this.editForm.statu = item.statu
        this.nowItem = item
        if (item.video && item.video.length) {
          for (let i in item.video) {
            this.fileList.push({
              name: item.name + '视频' + (i - 0 + 1),
              id: item.video[i].id,
              //   url: item.video[i].url
              url: require('../../../assets/img/defaultFile.png'),
            })
          }
        }
      }
    }
  },
  created() {
  },
  mounted() {
    this.handleGetLists()
    const that = this
    window.onmessage = function(e) {
      const { type, data } = e.data
    }
  }
}
</script>
<style scoped>
.wrap-box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.table-box {
  height: calc(100% - 100px);
}
.page-box {
  overflow: hidden;
  height: 38px;
}
.page {
  float: right;
  margin-top: 3px;
}
.level-item >>> .el-form-item__content {
  line-height: unset;
  height: unset;
  margin-top: 2px;
}
.demo-form-inline >>> .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.s-name {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-box >>> .el-table__row td:nth-child(2) .cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-box >>> .el-image-viewer__wrapper {
  top: 80px;
}
.table-box >>> .el-image-viewer__wrapper .el-image-viewer__close {
  color: #fff;
}
.wrap-box >>> .el-dialog__wrapper {
  top: 80px;
}
.result-dialog >>> .el-dialog__body {
  padding: 10px 20px;
  min-height: 380px;
}
.iframe-map {
  background-color: #fff;
  position: fixed;
  top: 80;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  height: calc(100% - 80px);
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.wrap-box >>> .demo-form-inline[data-v-007eb924] .el-input__inner {
    height: 40px !important;
    line-height: 40px !important;
}
.table-box >>> .el-table__row td:nth-child(6) {
    padding: 0;
}
.table-box >>> .el-table__row td:nth-child(6) .cell {
    height: 45px;
}
.hide {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 233;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.hide_container {
    position: relative;
    height: 100%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.el-icon-close:hover {
  color: #fff !important;
}
.viden_no {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(196, 193, 189);
}
.inputItem {
  display: inline-block;
  width: 50%;
}
.picker_time >>> .el-form-item__content .el-date-editor.el-input {
    width: 100% !important;
}
</style>