film_set_web.git

<template>
  <el-bus-crud ref="crud" v-bind="tableConfig" />
</template>
 
<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
export default {
  data() {
    const currentDate = this.$elBusUtil.toDate(new Date())
    return {
      tableConfig: {
        url: 'flower/api/filmWorks/list',
        newUrl: 'flower/api/filmWorks/new',
        editUrl: 'flower/api/filmWorks/edit',
        deleteUrl: 'flower/api/filmWorks/delete',
        dialogNeedRequest: true,
        persistSelection: true,
        columns: [
          { type: 'selection' },
          { label: '中文名称', prop: 'nameCn', minWidth: 120  },
          { label: '英文名称', prop: 'nameEn', minWidth: 120  },
          { label: '作品类型', prop: 'typeStr' , minWidth: 150 },
          { label: '上映年份', prop: 'releaseYear' },
          { label: '导演', prop: 'director', minWidth: 150  },
          { label: '制片方', prop: 'producer', minWidth: 150  },
          { label: '主要演员', prop: 'actors', minWidth: 300  },
          { label: '剧情关键词', prop: 'keywords' },
          { label: '剧情简介', prop: 'synopsis' , minWidth: 400 },
          { label: '封面图片' ,formatter: this.formatterImage, minWidth: 200 },
          { label: '封面图片描述', prop: 'coverAlt', minWidth: 120  },
          { label: '用户类型', prop: 'userTypeStr' },
          { label: '置顶权重', prop: 'stickyWeight' , minWidth: 80 },
          { label: '发布状态', prop: 'statusStr' , minWidth: 80 },
          { label: '收藏量', prop: 'collectCount' , minWidth: 80 },
          { label: '点赞量', prop: 'likeCount', minWidth: 80  },
          { label: '评论量', prop: 'commentCount', minWidth: 80  },
          { label: '分享量', prop: 'shareCount', minWidth: 80  },
          { label: '创建日期', prop: 'createDate', minWidth: 80  },
        ],
        searchForm: [
          {
            type: 'row',
            items: [
              { label: '中文名称', id: 'nameCn', type: 'input' },
              { label: '英文名称', id: 'nameEn', type: 'input' },
              {
                label: '作品类型',
                id: 'type',
                type: 'bus-select-dict',
                el: {
                  code: 'FILMSET_TYPE',
                  style: 'width:100%',
                  clearable: true,
                },
              },
              { label: '上映年份', id: 'releaseYear', type: 'input' },
              {
                label: '用户类型',
                id: 'userType',
                type: 'bus-select-dict',
                el: {
                  code: 'FILMSET_CREATE_TYPE',
                  style: 'width:100%',
                  clearable: true,
                },
              },
              {
                label: '发布状态',
                id: 'status',
                type: 'bus-select-dict',
                el: {
                  code: 'COMMON_PUBLISH_STATUS',
                  style: 'width:100%',
                  clearable: true,
                },
              },
              {
                label: '创建日期',
                id: 'createDateBeginStr',
                component: 'el-bus-date-range',
                commonFormat: true,
                commonFormatProps: ['createDateBeginStr', 'createDateEndStr'],
                customClass: 'in-bus-form',
                default: [currentDate, currentDate],
              },
            ],
          },
        ],
        form: [
          {
            label: '中文名称：',
            id: 'nameCn',
            type: 'input',
            rules: {
              required: true,
              message: '请输入标题',
              trigger: 'blur',
            },
          },
          {
            label: '英文名称：',
            id: 'nameEn',
            type: 'input',
            rules: {
              required: true,
              message: '请输入标题',
              trigger: 'blur',
            },
          },
          {
            label: '作品类型：',
            id: 'type',
            type: 'bus-select-dict',
            el: {
              code: 'FILMSET_TYPE',
              style: 'width:100%',
              clearable: true,
            },
            rules: {
              required: true,
              message: '请选择影视作品类型',
            },
          },
          {
            label: '上映年份：',
            id: 'releaseYear',
            type: 'input',
            rules: {
              required: true,
              message: '请输入上映年份',
              trigger: 'blur',
            },
          },
          {
            label: '导演：',
            id: 'director',
            type: 'input',
            rules: {
              required: true,
              message: '请输入导演,多个导演，分割',
              trigger: 'blur',
            },
          },
          {
            label: '制片方：',
            id: 'producer',
            type: 'input',
            rules: {
              required: true,
              message: '请输入制片方,多个制片方，分割',
              trigger: 'blur',
            },
          },
          {
            label: '主要演员：',
            id: 'actors',
            type: 'input',
            rules: {
              required: true,
              message: '请输入主要演员,多个主要演员，分割',
              trigger: 'blur',
            },
          },
          {
            label: '剧情关键词：',
            id: 'keywords',
            type: 'input',
            rules: {
              required: true,
              message: '请输入剧情关键词',
              trigger: 'blur',
            },
          },
          {
            label: '剧情简介：',
            id: 'synopsis',
            component: 'base-editor',
            richText: true,
            rules: { required: true, message: '请输入剧情简介', trigger: 'blur' },
          },
          {
            label: '封面图片：',
            id: 'coverUrl',
            type: 'bus-upload',
            el: {
              listType: 'picture-card',
              limitSize: 2,
              limit: 1,
              tipText: '大小不超过2M',
              valueType: 'string',
            },
            forceDisabled: true,
          },
          {
            label: '封面图片描述：',
            id: 'coverAlt',
            type: 'input',
            rules: {
              required: true,
              message: '请输入封面图片描述',
              trigger: 'blur',
            },
          },
          {
            label: '用户类型：',
            id: 'userType',
            type: 'bus-select-dict',
            el: {
              code: 'FILMSET_CREATE_TYPE',
              style: 'width:100%',
              clearable: true,
            },
            rules: {
              required: true,
              message: '请选择用户类型',
            },
          },
          {
            label: '置顶权重：',
            id: 'stickyWeight',
            type: 'input',
            rules: {
              required: true,
              message: '请输入置顶权重描述',
              trigger: 'blur',
            },
          },
          {
            label: '收藏量：',
            id: 'collectCount',
            type: 'input',
            rules: {
              required: true,
              message: '请输入收藏量',
              trigger: 'blur',
            },
          },
          {
            label: '点赞量：',
            id: 'likeCount',
            type: 'input',
            rules: {
              required: true,
              message: '请输入点赞量',
              trigger: 'blur',
            },
          },
          {
            label: '评论量：',
            id: 'commentCount',
            type: 'input',
            rules: {
              required: true,
              message: '请输入评论量',
              trigger: 'blur',
            },
          },
          {
            label: '分享量：',
            id: 'shareCount',
            type: 'input',
            rules: {
              required: true,
              message: '请输入分享量',
              trigger: 'blur',
            },
          },
          {
            label: '取景地图片：',
            id: 'filmPictures',
            component: 'el-bus-upload',
            el: {
              listType: 'picture-card',
            },
            forceDisabled: true,
            commonFormat: true,
            span: 24,
            // rules: { required: true, message: '请上传取景地对应的图片' },
          },
          {
            label: '取景地内容：',
            id: 'filmContent',
            component: 'base-editor',
            richText: true,
            rules: { required: true, message: '请输入取景地内容', trigger: 'blur' },
          },
          {
            label: '封面主题：',
            id: 'coverTitle',
            type: 'input',
            rules: {
              required: true,
              message: '请输入剧情关键词',
              trigger: 'blur',
            },
          },
          {
            label: '标签：',
            id: 'tag',
            type: 'input',
            rules: {
              required: true,
              message: '请输入剧情关键词',
              trigger: 'blur',
            },
          },
        ],
        extraButtons: [
          {
            text: (row) => (row.status === 'unpublished' ||  row.status === 'approved' ? '发布' : '下架'),
            atClick: async (row) => {
              const action = row.status === 'unpublished' ||  row.status === 'approved' ? '发布' : '下架'
              try {
                await this.$elBusUtil.confirm(`确定要${action}吗？`)
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/changeStatus',
                  { params: { id: row.id } }
                )
                if (code === 0) {
                  this.$message.success(`${action}成功`)
                }
              } catch (e) {
                return false
              }
            },
          },
          {
            text: '置顶',
            atClick: async (row) => {
              try {
                await this.$elBusUtil.confirm(`确定要置顶吗？`)
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/setTop',
                  { params: { id: row.id } }
                )
                if (code === 0) {
                  this.$message.success(`置顶成功`)
                }
              } catch (e) {
                return false
              }
            },
          },
          {
            text: '清除权重',
            atClick: async (row) => {
              try {
                await this.$elBusUtil.confirm(`确定要清除权重吗？`)
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/setDown',
                  { params: { id: row.id } }
                )
                if (code === 0) {
                  this.$message.success(`清除权重成功`)
                }
              } catch (e) {
                return false
              }
            },
          },
        ],
        headerButtons: [
          {
            text: '批量发布',
            type: 'primary',
            disabled: (selected) =>
              selected.filter((item) => item.status === 'unpublished' || item.status === 'approved')
                .length === 0,
            atClick: async (selected) => {
              const selectedNotice = selected.filter(
                (item) => item.status === 'unpublished' || item.status === 'approved'
              )
              try {
                await this.$elBusUtil.confirm(
                  `确定要批量发布这${selectedNotice.length}个片场内容吗？`
                )
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/publish/batch',
                  {
                    method: 'post',
                    data: {
                      ids: selected.map((item) => item.id),
                    },
                  }
                )
                if (code === 0) {
                  this.$message.success('操作成功')
                  this.$refs.crud.clearSelection()
                }
              } catch (e) {
                return false
              }
            },
          },
          {
            text: '批量删除',
            type: 'danger',
            disabled: (selected) => selected.length === 0,
            atClick: async (selected) => {
              try {
                await this.$elBusUtil.confirm(
                  `确定要批量删除这${selected.length}个片场内容吗？`
                )
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/delete/batch',
                  {
                    method: 'post',
                    data: {
                      ids: selected.map((item) => item.id),
                    },
                  }
                )
                if (code === 0) {
                  this.$message.success('操作成功')
                  this.$refs.crud.clearSelection()
                }
              } catch (e) {
                return false
              }
            },
          },
          {
            text: '批量通过',
            type: 'primary',
            disabled: (selected) =>
              selected.filter((item) => item.status === 'pending_review' ||  item.status === 'rejected')
                .length === 0,
            atClick: async (selected) => {
              const selectedNotice = selected.filter(
                (item) => item.status === 'pending_review' ||  item.status === 'rejected'
              )
              try {
                await this.$elBusUtil.confirm(
                  `确定要批量通过这${selectedNotice.length}个片场内容吗？`
                )
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/approved/batch',
                  {
                    method: 'post',
                    data: {
                      ids: selected.map((item) => item.id),
                    },
                  }
                )
                if (code === 0) {
                  this.$message.success('操作成功')
                  this.$refs.crud.clearSelection()
                }
              } catch (e) {
                return false
              }
            },
          },
          {
            text: '批量驳回',
            type: 'primary',
            disabled: (selected) =>
              selected.filter((item) => item.status === 'approved' ||  item.status === 'pending_review')
                .length === 0,
            atClick: async (selected) => {
              const selectedNotice = selected.filter(
                (item) => item.status === 'approved' ||  item.status === 'pending_review'
              )
              try {
                await this.$elBusUtil.confirm(
                  `确定要批量驳回这${selectedNotice.length}个片场内容吗？`
                )
                const { code } = await this.$elBusHttp.request(
                  'flower/api/filmWorks/rejected/batch',
                  {
                    method: 'post',
                    data: {
                      ids: selected.map((item) => item.id),
                    },
                  }
                )
                if (code === 0) {
                  this.$message.success('操作成功')
                  this.$refs.crud.clearSelection()
                }
              } catch (e) {
                return false
              }
            },
          },
        ],
      },
    }
  },
  head() {
    return {
      title: '影视作品内容管理',
    }
  },
  methods: {
    formatterImage(row) {
      if (row.coverUrl) {
        // 使用第三方镜像服务（示例）
        const proxyUrl = `https://images.weserv.nl/?url=${encodeURIComponent(row.coverUrl)}`;
        return <el-bus-image src={proxyUrl} preview-src-list={[proxyUrl]} style="width:150px" />
      }
      return '无封面';
    }
  },
}
</script>
 
<style lang="scss" scoped>
::v-deep {
  .el-upload {
    &-list__item {
      width: 345px;
      height: 128px;
    }
    &.el-upload--picture-card {
      width: 345px;
      height: 128px;
    }
  }
}
</style>