city-gather-admin/src/views/film-manage/film-list/index.vue

<script setup lang="tsx">
import { ref, useTemplateRef } from 'vue';
import { NButton } from 'naive-ui';
import { router } from '@/router';
import { fetchGetChannelList, fetchImportGoods } from '@/service/api/goods-center/store-goods';
import { fetchMoivecinemaList, fetchMovieList } from '@/service/api/film-manage/film-list';
import { useTable } from '@/components/zt/Table/hooks/useTable';
const importTemplateRef = useTemplateRef('importTemplateRef');

const options = ref<Api.goods.Channel[]>([]);
const statusList = ['上架', '可售', '下架', '即将上映'];
const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    type: 'selection',
    align: 'center',
    width: 48,
    fixed: 'left'
  },
  {
    key: 'supId',
    title: '商品ID',
    align: 'left',
    width: 200,
    render: (row: any) => {
      return (
        <div class={'flex items-center'}>
          <div>统一ID:</div>
          <div>{row.movieId}</div>
        </div>
      );
    }
  },
  {
    key: 'pic',
    title: '商品图片',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return <n-image src={row.posterUrl} width={60} height={60}></n-image>;
    }
  },

  {
    key: 'movieName',
    title: '商品名称',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'businessType',
    title: '业务类型',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'cinemaName',
    title: '商户',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'channelVOS',
    title: '价格',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return (
        <div>
          {row.moviePriceVo.map((it: Api.government.ChannelVO) => {
            return (
              <div>
                {it.channl}：￥{it.price}
              </div>
            );
          })}
        </div>
      );
    }
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return (
        <div class="flex items-center justify-center">
          <n-badge color={row.status == 0 ? 'green' : 'red'} value={row.status} dot />
          <span class="ml-2">{statusList[row.status]}</span>
        </div>
      );
    }
  },
  {
    key: 'updateTime',
    title: '更新时间',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  }
];
const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '商户',
        component: 'ApiSelect',
        field: 'cinemaName',
        componentProps: {
          api: fetchMoivecinemaList,
          labelFeild: 'name',
          valueFeild: 'name'
        }
      },
      {
        label: '关键词',
        component: 'NInput',
        field: 'keywords'
      },
      {
        label: '状态',
        field: 'status',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '上架',
              value: 0
            },
            {
              label: '可售',
              value: 1
            },
            {
              label: '下架',
              value: 2
            },
            {
              label: '即将上映',
              value: 3
            }
          ]
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'cinemaId',
    title: '电影列表',
    showAddButton: false,
    scrollX: 1800,
    fieldMapToTime: [
      ['price', ['minPrice', 'maxPrice']],
      ['createTime', ['startTime', 'endTime']]
    ]
  }
});

async function handleSubmitImport(file: File) {
  const { error } = await fetchImportGoods({ file });
  if (!error) {
    importTemplateRef.value?.closeModal();
  }
  importTemplateRef.value?.setSubLoading(false);
}

function handleModalPrice(row: Api.goods.ShopSku) {
  router.push({ path: '/film-manage/setprice', query: { movieId: row.movieId, cinemaId: row.cinemaId } });
}
async function getData() {
  const { data, error } = await fetchGetChannelList();
  if (!error) {
    options.value = data;
  }
}
getData();
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchMovieList" @register="registerTable">
      <template #op="{ row }">
        <NButton size="small" ghost type="primary" @click="handleModalPrice(row)">设置渠道及价格</NButton>
      </template>
    </ZTable>
    <ZImportTemplate
      ref="importTemplateRef"
      url="/smqjh-pms/api/v1/channelProd/template/download"
      template-text="商品渠道及价格导入模版.xlsx"
      modal-text="导入商品销售渠道及价格"
      @submit="handleSubmitImport"
    ></ZImportTemplate>
  </LayoutTable>
</template>

<style scoped></style>