hr-admin/src/views/companyManage/videoManage.vue

<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-28 16:06:20
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-11 15:45:22
-->
<template>
<div class="videoManage">
    <v-input :btn="btn" :list="list" @add="add"></v-input>
    <v-table :table="table" :tableList="tableList" :sortType="true" :queryData="queryData" @details="details" @editor="editor" @del="del"></v-table>
    <v-pager @page="callPage" :total="totalrecords"></v-pager>
    <el-dialog width="650px" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
        <el-form :model="form" ref="form" label-width="100px" :rules="state !== 2 ? rules : {}" label-position="left">
            <el-form-item label="视频名称" prop="videoName">
                <el-input v-if="state!==2" v-model="form.videoName" placeholder="请输入视频名称" autocomplete="off"></el-input>
                <div v-else>{{form.videoName}}</div>
            </el-form-item>
            <el-form-item prop="videoPath">
                <el-upload class="upload-demo" drag v-if="state!==2" :headers="{Authorization:token}" :action="$url+'/admin/upload/uploadVideo'" accept=".MP4,.mp4" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" multiple>
                    <video v-if="form.videoPath" width="500" :src="$img+form.videoPath" class="avatar"></video>
                    <i v-if="!form.videoPath" class="el-icon-upload"></i>
                    <div v-if="!form.videoPath" class="el-upload__text">将文件拖到此处，或<em>点击上传</em>，限mp4格式</div>
                    <!-- <div class="el-upload__tip" slot="tip"></div> -->
                </el-upload>
                <video v-else width="400" controls :src="$img+form.videoPath" class="avatar"></video>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" v-if="state!==2" @click="determine">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
  data () {
    return {
      tableList: [],
      token: localStorage.getItem('token'),
      dialogFormVisible: false,
      form: {
        videoName: '',
        videoPath: ''
      },
      page: 1,
      totalrecords: 0,
      state: 0,
      url: '',
      pickList: [],
      rules: {
        videoName: [{
          required: true,
          message: '请输入视频名称',
          trigger: 'blur'
        }],
        videoPath: [{
          required: true,
          message: '请上传视频',
          trigger: 'blur'
        }]
      },
      list: [],
      btn: [{
        name: '添加',
        type: 'success',
        method: 'add'
      }],
      table: {
        column: [{
          label: '序号',
          props: 'serialNumber'
        },
        {
          label: '视频名称',
          props: 'videoName'
        }
        ],
        handle: [{
          title: '查看',
          method: 'details',
          type: 'info'
        },
        {
          title: '编辑',
          method: 'editor',
          type: 'warning'
        },
        {
          title: '删除',
          method: 'del',
          type: 'danger'
        }
        ]
      }
    }
  },
  created () {
    this.queryData()
  },
  methods: {
    queryData (form = {}) {
      let page = this.page
      let reqdata = form
      this.$api
        .post('/video/queryVideoList', {
          reqdata,
          page
        })
        .then((res) => {
          this.totalrecords = res.totalrecords
          this.tableList = res.list.map((item, index) => {
            item.serialNumber = index + 1
            return item
          })
        })
    },
    add () {
      this.open()
      this.info = {}
      this.state = 0
    },
    getDetails (row) {
      console.log(row)
      let reqdata = {
        id: row.id
      }
      this.$api
        .post('/video/queryVideoDetail', {
          reqdata
        })
        .then((res) => {
          this.open()
          this.form = res.object
        })
    },
    details (row) {
      this.getDetails(row)
      this.state = 2
    },
    editor (row) {
      this.getDetails(row)
      this.state = 1
    },
    del (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let reqdata = {
          id: row.id
        }
        this.$api
          .post('/video/deleteVideo', {
            reqdata
          })
          .then((res) => {
            this.queryData()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    determine () {
      let a
      this.$refs['form'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let url = this.state ? '/video/updateVideo' : '/video/saveVideo'
      let reqdata = this.form
      this.$api
        .post(url, {
          reqdata
        })
        .then((res) => {
          this.close()
          this.queryData()
        })
    },
    handleAvatarSuccess (res, file) {
      this.$set(this.form, 'videoPath', res)
    },
    beforeAvatarUpload (file) {
      return file.type === 'video/mp4'
    },
    open () {
      this.dialogFormVisible = true
    },
    close () {
      this.dialogFormVisible = false
      this.form = {}
    },
    callPage (val) {
      this.page = val
      this.queryData()
    }
  },
  watch: {
    dialogFormVisible: function (val, oldVla) {
      if (this.state === 2) {
        if (this.$refs['form'] !== undefined) {
          this.$refs['form'].resetFields()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar {
    width: 100%;
    display: block;
}
::v-deep .el-upload-dragger {
  overflow: visible!important;
  width: 400px;
  height:300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
video{
  height: 100%;
}

</style>