ayi_website_admin/src/views/video/components/ArticleDetail.vue

<template>
  <div class="createPost-container">
    <el-form
      ref="postForm"
      :label-position="labelPosition"
      :model="postForm"
      :rules="rules"
      class="form-container"
    >
      <div class="createPost-main-container">
        <el-form-item prop="title" style="" label="剧场标题">
          <el-input
            v-model="postForm.title"
            type="textarea"
            style="width: 500px"
            autosize
          />
        </el-form-item>
        <el-form-item prop="desc" style="" label="描述">
          <el-input
            v-model="postForm.desc"
            :rows="3"
            type="textarea"
            style="width: 500px"
            autosize
          />
        </el-form-item>
        <el-form-item prop="imgUrl" style="" label="封面">
          <Upload v-model="postForm.imgUrl" />
          <span style="color: #ff4949">请上传封面边长179*98的专辑封面</span>
        </el-form-item>
        <el-form-item v-if="!isEdit" label="用户id" prop="userId">
          <el-input v-model="postForm.user_id" style="width: 300px" />
        </el-form-item>
        <el-form-item v-if="isEdit" prop="videoList" style="" label="视频列表">
          <el-button
            class="filter-item"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            style="margin-bottom: 10px"
            @click="handleAdd"
          >
            新建视频
          </el-button>
          <el-table
            :data="postForm.videoList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="视频id" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建日期">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="视频标题">
              <template slot-scope="{ row }">
                <span>{{ row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="Actions"
              width="190"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEdit(scope)"
                >
                  修改/查看
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  style="margin-left: 10px"
                  @click="handleDelete(scope)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item prop="status" style="" label="视频权限">
          <template>
            <el-radio-group v-model="postForm.level">
              <el-radio :label="1">所有用户可见</el-radio>
              <el-radio :label="2">仅医师可见</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item prop="status" style="" label="状态">
          <template>
            <el-radio-group v-model="postForm.status">
              <el-radio :label="0">屏蔽</el-radio>
              <el-radio :label="1">显示</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-row>
          <el-button
            v-if="!isEdit"
            v-loading="loading"
            type="success"
            @click="submitForm"
          >
            提交
          </el-button>
          <el-button
            v-if="isEdit"
            v-loading="loading"
            type="success"
            @click="updateArticle"
          >
            修改
          </el-button>
        </el-row>
      </div>
    </el-form>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '修改' : '新增'"
      style="height: 800px; margin-top: -8vh"
    >
      <el-form
        ref="editForm"
        :model="temp"
        label-width="80px"
        label-position="left"
        style="height: 500px; overflow: auto"
        :rules="editPageRules"
      >
        <el-form-item label="视频地址" prop="videoUrl">
          <VideoUpload v-model="temp.videoUrl" />
          <span
            style="color: #ff4949"
          >最大视频上传不超过50M</span>
        </el-form-item>
        <el-form-item label="视频封面" prop="videoImg">
          <Upload v-model="temp.videoImg" />
        </el-form-item>
        <el-form-item label="视频标题" prop="title">
          <template>
            <el-input v-model="temp.title" />
          </template>
        </el-form-item>
        <el-form-item label="视频简介" prop="desc">
          <template>
            <el-input v-model="temp.desc" type="textarea" :rows="2" />
          </template>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmtemp">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/components/Upload/SingleImage3'
// import { validURL } from '@/utils/validate'
import VideoUpload from '@/components/Upload/SingleVideo'
import {
  fetchVideo,
  updateVideo,
  deleteVideo,
  updateTheatre
} from '@/api/video'
import { deepClone } from '@/utils'
// import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'

const defaultForm = {
  status: 1,
  img_url: '', // 文章题目
  type: 1, // 文章内容
  sort: 1, // 文章摘要
  id: undefined,
  level: 1
}
const validateRequire = (rule, value, callback) => {
  console.log(rule)
  console.log(value)
  if (!value) {
    // this.$message({
    //   message: rule.field + "不为空",
    //   type: "error",
    // }); //直播标题必须为3-17个字（一个字等于两个英文字符或特殊字符）
    callback(new Error(rule.field + '不为空'))
  } else if (value.length == 0) {
    callback(new Error(rule.field + '不为空'))
  } else {
    callback()
  }
}
export default {
  name: 'ArticleDetail',
  components: { Upload, VideoUpload },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      rules: {
        imgUrl: [
          {
            message: '封面不能为空',
            required: true,
            validator: validateRequire,

            trigger: 'change'
          }
        ],
        title: [
          {
            message: '剧场标题不能为空',
            required: true,
            validator: validateRequire,
            trigger: 'blur'
          }
        ],
        desc: [
          {
            message: '描述不能为空',
            required: true,
            validator: validateRequire,
            trigger: 'blur'
          }
        ],
        user_id: [
          {
            message: '用户id不能为空',
            required: true,
            validator: validateRequire,

            trigger: 'change'
          }
        ]
      },
      editPageRules: {},
      tempRoute: {},
      labelPosition: 'top',
      dialogVisible: false,
      dialogType: 'new',
      temp: {}
    }
  },
  computed: {
    contentShortLength() {
      return this.postForm.content_short.length
    },
    displayTime: {
      // set and get is useful when the data
      // returned by the back end api is different from the front end
      // back end return => "2013-06-25 06:59:25"
      // front end need timestamp => 1372114765000
      get() {
        return +new Date(this.postForm.display_time)
      },
      set(val) {
        this.postForm.display_time = new Date(val)
      }
    }
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }
    // Why need to make a copy of this.$route here?
    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    fetchData(id) {
      fetchVideo(id)
        .then((response) => {
          this.postForm = response.data
          // set tags view title
          // this.setTagsViewTitle()
          // set page title
          // this.setPageTitle()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    setPageTitle() {
      const title = 'Edit Article'
      document.title = `${title} - ${this.postForm.id}`
    },
    submitForm() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          updateTheatre(this.postForm).then((response) => {
            this.$notify({
              title: '添加',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            // this.postForm.status = 'published'
            this.loading = false
            this.listLoading = false
            this.$router.push(`/video/list`)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateArticle() {
      updateTheatre(this.postForm).then((response) => {
        this.$notify({
          title: '修改',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
        // this.postForm.status = 'published'
        this.loading = false
        this.listLoading = false
        this.$router.push(`/video/list`)
      })
      // this.$router.push(`/advice/list`)
    },
    draftForm() {
      if (
        this.postForm.content.length === 0 ||
        this.postForm.title.length === 0
      ) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
      this.postForm.status = 'draft'
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.temp = deepClone(scope.row)

      this.editPageRules = {
        videoUrl: [
          {
            message: '视频地址不能为空',
            required: true,
            validator: validateRequire,
            trigger: 'change'
          }
        ],
        videoImg: [
          {
            message: '视频封面不能为空',
            required: true,
            validator: validateRequire,
            trigger: 'change'
          }
        ],
        title: [
          {
            message: '视频标题不能为空',
            required: true,
            validator: validateRequire,
            trigger: 'blur'
          }
        ],
        desc: [
          {
            message: '视频描述不能为空',
            required: true,
            validator: validateRequire,

            trigger: 'blur'
          }
        ]
      }

      // console.log(this.rules);
    },
    handleAdd() {
      this.temp = {}
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    async confirmtemp() {
      const isEdit = this.dialogType === 'edit'

      if (isEdit) {
        await updateVideo(this.temp)
        for (let index = 0; index < this.postForm.videoList.length; index++) {
          if (this.postForm.videoList[index].id === this.temp.id) {
            this.postForm.videoList.splice(
              index,
              1,
              Object.assign({}, this.temp)
            )
            break
          }
        }
        console.log(this.temp)
      } else {
        this.temp['userId'] = this.postForm.userId
        this.temp['theatreId'] = this.postForm.id
        const { data } = await updateVideo(this.temp)
        this.temp.id = data.id
        this.temp.createTime = data.createTime
        this.postForm.videoList.push(this.temp)
      }
      this.dialogVisible = false
      this.$notify({
        title: '成功',
        dangerouslyUseHTMLString: true,
        message: '添加成功',
        type: 'success'
      })
    },
    async handleDelete(scope) {
      deleteVideo(scope.row.id)
      this.postForm.videoList.splice(scope.$index, 1)
    }
  }
  /*  watch: {
    dialogVisible(newVal) {
      if (!newVal) {
        this.editPageRules = {};
        this.$refs.editForm.resetFields();
      }
    },
  }, */
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .video-border {
    display: inline-flex;
    width: 350px;
    height: 100%;

    .video-info {
      //display: flex;
      width: 300px;
      //height: 300px;
    }
  }
  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>