huangguo_admin/src/views/aiManagement/aiStripOrder/components/AddOrEdit.vue

<template>
  <el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
    @close="close">
    <el-row :gutter="24">
      <el-col>
        <h3>AI生成的视频URl</h3>
        <div v-if="form.modifyVideoUrl" style="width: 380px; height: 240px; overflow: hidden">

            <DPlayer ref="player" v-if="form.modifyVideoUrl.indexOf('mp4') === -1" :video="{
              url: '/api/web/media/m3u8/' + filterM3u8(form.modifyVideoUrl),
              type: 'hls',
              pic: '',
            }" hotkey ></DPlayer>
                     <DPlayer ref="player" v-else :video="{
                       url: this.$store.getters.getSystemConfig.mp4Url + form.modifyVideoUrl,
                       type: 'mp4',
                       pic: '',
                     }" hotkey ></DPlayer>
        </div>

      </el-col>
    </el-row>
    <el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
      label-position="right">
      <el-row :gutter="24">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="AI生成的图片">
            <UploadImgArr @changeImgUrl="changeCoverImgUrl" :img="form.modifyImgs"></UploadImgArr>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="换脸方式">
            <el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
              <el-option :key="item.value" :label="item.label" :value="item.value"
                v-for="item in aiOrderFaceChangeList" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="任务状态">
            <el-select placeholder="请选择任务状态" clearable v-model="form.status">
              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="原因" prop="fakeSells">
            <el-input v-model.number="form.reason" placeholder="请输入原因" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


    <div slot="footer" class="dialog-footer">
      <el-button @click="Visible = false"> 取 消 </el-button>
      <el-button type="primary" @click="submit('form')"> 确 定 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import UploadImgArr from '@/components/UploadImgArr/index'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
import { aiorderStripUpdate } from '@/api/aiManagement/aiOrder'
import UploadVideo from '@/components/UploadVideo/index'
import DPlayer from '@/components/VueDplayerHls/index'
export default {
  name: 'AddOrEdit',
  props: ['data'],
  components: {
    UploadImgArr,
    UploadVideo,
    DPlayer
  },
  data() {
    return {
      aiOrderFaceChangeList: aiOrderFaceChangeList(),
      aiFaceOrderList: aiFaceOrderList(),
      Visible: true,
      title: '',
      time: [],
      // 表单数据备份
      formData: {},
      // 表单数据
      form: {
        "byWay": undefined,
        "id": undefined,
        "modifyImgs": undefined,
        "modifyVideoUrl": undefined,
        "reason": undefined,
        "status": 0,
        "updatedAt": undefined
      },
      rules: {},
    }
  },
  mounted() {
    this.title = this.data.title
    if (this.title === '编辑') {
      this.form = { ...this.data.data }
      this.formData = Object.assign({}, this.form)
    }
  },
  methods: {
    //TODO:新增应用列表数据

    filterM3u8(v) {
      return /\.m3u8/g.test(v) ? v : v + '.m3u8'
    },
    //TODO：编辑应用列表数据
    update(data) {

      aiorderStripUpdate(data).then((res) => {


         if (res && res.code === 200) {
          this.$message.success(res.data ? res.data : '更新成功')
        } else {
          this.$message.error(res.data ? res.data : '更新失败')
        }
        this.Visible = false
      })
    },
    // 提交按钮
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.add(this.form)
          } else if (this.title === '编辑') {
            this.update(this.form)
          }
        }
      })
    },
    // 上传视频返回地址
    changeVideoUrl(data) {
      this.form.id = data.id
      //   this.$set(this.form, 'fieldNameFs', data.videoUri)
      this.form.videoUrl = data.videoUri
      //   this.form.fieldNameFs = data.videoUri
      //   this.form.videoTime = parseInt(data.duration)
      //   this.form.size = data.size
      //   this.open()
    },

    // 重复上传视频
    repeatVideo(data) {
      this.form.taskId = data.taskId
    },

    // 上传图片返回地址
    changeCoverImgUrl(data) {
      this.form.modifyImgs = data
    },

    // 关闭编辑
    close() {
      this.$emit('close')
    },

    onClear(data) {
      this.form[data] = undefined
    },
  },
}
</script>