RING:素材库公用table接入

src/api/index.ts

@@ -786,3 +786,55 @@ export const forceReport = (
 ): any => {
   return axios("yuewen/forceReport", { params: query });
 };
+
+// 素材库相关接口
+
+/**
+ * 获取视频列表
+ * @param
+ */
+export const getVideoList = (
+  query: {
+    is_pubic: number | string, page: number, video_name: string, video_type?: string, book_name?: string,
+    demander: string, editor: string, uploader: string,
+  }
+): any => {
+  return axios("video/list", { params: query });
+};
+
+/**
+ * 获取图片列表
+ * @param
+ */
+export const getImageList = (
+  query: {
+    is_pubic: number | string, page: number, image_name: string, image_type?: string, book_name?: string,
+    demander: string, editor: string, uploader: string,
+  }
+): any => {
+  return axios("image/list", { params: query });
+};
+
+/**
+ * 删除视频
+ * @param
+ */
+export const deleteVideo = (
+  query: {
+    ids: string
+  }
+): any => {
+  return axios("video/delete", { params: query });
+};
+
+/**
+ * 删除图片
+ * @param
+ */
+export const deleteImage = (
+  query: {
+    ids: string
+  }
+): any => {
+  return axios("image/delete", { params: query });
+};

src/views/_pageOptions/table_material.ts

@@ -0,0 +1,87 @@
+// 素材库-视频库
+export const TableColumnOfVideo = [
+  {
+    title: '视频名称',
+    dataIndex: 'video_name	',
+    slots: { customRender: 'video_name' },
+  },
+  {
+    title: '时长',
+    dataIndex: 'duration',
+  },
+  {
+    title: '视频类型',
+    dataIndex: 'video_type	',
+  },
+  {
+    title: '推广书籍',
+    dataIndex: 'book_name	',
+  },
+  {
+    title: '需求方',
+    dataIndex: 'demander',
+  },
+  {
+    title: '文案',
+    dataIndex: 'editor',
+  },
+  {
+    title: '上传者',
+    dataIndex: 'uploader',
+  },
+  {
+    title: '关联计划数',
+    dataIndex: 'match_ad_num',
+  },
+  {
+    title: '上传时间',
+    dataIndex: 'uploaded_at',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slots: { customRender: 'operation' },
+  },
+]
+
+// 素材库-图片库
+export const TableColumnOfImage = [
+  {
+    title: '图片名称',
+    dataIndex: 'image_name	',
+    slots: { customRender: 'image_name' },
+  },
+  {
+    title: '图片类型',
+    dataIndex: 'image_type	',
+  },
+  {
+    title: '推广书籍',
+    dataIndex: 'book_name	',
+  },
+  {
+    title: '需求方',
+    dataIndex: 'demander',
+  },
+  {
+    title: '文案',
+    dataIndex: 'editor',
+  },
+  {
+    title: '上传者',
+    dataIndex: 'uploader',
+  },
+  {
+    title: '关联计划数',
+    dataIndex: 'match_ad_num',
+  },
+  {
+    title: '上传时间',
+    dataIndex: 'uploaded_at',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slots: { customRender: 'operation' },
+  },
+]

src/views/material/component/common-table.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="common-table">
+    <a-popconfirm :disabled="selectedRowKeys.length === 0" @confirm="onDelete">
+      <template #title> <p>确认批量删除所选素材吗</p> </template
+      ><a-button
+        :disabled="selectedRowKeys.length === 0"
+        style="margin-bottom: 10px"
+        >批量删除</a-button
+      >
+    </a-popconfirm>
+
+    <a-table
+      bordered
+      :data-source="list"
+      :columns="columns"
+      @change="getList"
+      rowKey="id"
+      :loading="loading"
+      :pagination="tablePageOptions"
+      :row-selection="{
+        selectedRowKeys: selectedRowKeys,
+        onChange: onSelectChange,
+      }"
+    >
+      <template #operation="{ record }">
+        <a>推送</a>&nbsp;
+        <a-popconfirm @confirm="onDelete(record)">
+          <template #title>
+            <p>确认删除该素材吗</p>
+          </template>
+          <a>删除</a>
+        </a-popconfirm>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script lang="ts">
+import usePagination from "@/hooks/usePagination";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  ref,
+  watchEffect,
+  watch,
+} from "vue";
+import {
+  TableColumnOfVideo,
+  TableColumnOfImage,
+} from "../../_pageOptions/table_material";
+//getPromotionList
+import { getVideoList, getImageList, deleteVideo, deleteImage } from "@/api";
+import { message } from "ant-design-vue";
+const CommonTable = defineComponent({
+  components: {},
+  props: ["materialType", "searchForm"],
+  setup(props) {
+    let { tablePageOptions } = usePagination();
+    const state = reactive({
+      type: "",
+      loading: false,
+      list: ref<any[]>([]),
+      columns: ref<any[]>([]),
+      selectedRowKeys: ref<any[]>([]),
+    });
+    // watchEffect(() => {
+    //   console.log("测试变化监听", props.searchForm);
+    // });
+    const getList = async (page?: any) => {
+      state.loading = true;
+      return message.success("请求接口");
+      let api = state.type === "video" ? getVideoList : getImageList;
+      let { data } = await api({
+        page: page ? page.current : 1,
+        ...props.searchForm,
+      });
+      state.loading = false;
+      state.list = data.list;
+      console.log("返回的数据", data);
+    };
+    // 列表选项改变
+    const onSelectChange = (selectedRowKeys: any) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    watch(
+      () => props.searchForm,
+      (oldVal, newVal) => {
+        console.log("单个监听", oldVal, newVal);
+        getList({ current: 1 });
+      }
+    );
+    return { ...toRefs(state), tablePageOptions, getList, onSelectChange };
+  },
+  mounted() {
+    this.type = this.$props.materialType;
+    if (this.type === "video") this.columns = TableColumnOfVideo;
+    if (this.type === "picture") this.columns = TableColumnOfImage;
+  },
+  methods: {
+    // 获取推广链接数据
+    // async getList(page?: any) {
+    //   this.loading = true;
+    //   let api = this.type === "video" ? getVideoList : getImageList;
+    //   let { data } = await api({
+    //     page: page ? page.current : 1,
+    //     ...this.$props.searchForm,
+    //   });
+    //   this.loading = false;
+    //   this.list = data.list;
+    //   console.log("返回的数据", data);
+    // },
+    async onDelete(val?: any) {
+      let arr = [];
+      if (val.id) {
+        // 单个删除
+        arr.push(val.id);
+      } else {
+        // 多选删除
+        arr = this.selectedRowKeys;
+      }
+      let ids = arr.join(",");
+      console.log("删除", val);
+      let api = this.type === "video" ? deleteVideo : deleteImage;
+      try {
+        await api({ ids });
+        message.success("删除成功");
+      } catch (err) {
+        message.error("删除失败");
+        console.log("ERR:", err);
+      } finally {
+        this.getList({ current: 1 });
+      }
+    },
+  },
+});
+
+export default CommonTable;
+</script>
+<style lang="scss" scoped>
+@import "@/assets/common-style/frame.scss";
+.common-table {
+  background: white;
+  padding: 10px;
+}
+</style>

src/views/material/component/search.vue

@@ -8,37 +8,46 @@
       <span class="label">{{
         type === "video" ? "视频名称：" : "图片名称："
       }}</span>
-      <a-input v-model:value="search.video_name" v-if="type === 'video'" />
-      <a-input v-model:value="search.image_name" v-if="type === 'picture'" />
+      <a-input
+        v-model:value="search.videoName"
+        v-if="type === 'video'"
+        placeholder="请输入"
+      />
+      <a-input
+        v-model:value="search.imageName"
+        v-if="type === 'picture'"
+        placeholder="请输入"
+      />
     </div>
     <div class="search-item">
       <span class="label">{{
         type === "video" ? "视频类型：" : "图片类型："
       }}</span>
       <a-select
+        placeholder="请选择"
         style="width: 200px"
         v-if="type === 'video'"
-        v-model:value="search.video_type"
-        placeholder="请选择"
+        v-model:value="search.videotype"
       >
-        <a-select-option value="shanghai">Zone one</a-select-option>
-        <a-select-option value="beijing">Zone two</a-select-option>
+        <a-select-option value="H">横板视频</a-select-option>
+        <a-select-option value="S">竖板视频</a-select-option>
       </a-select>
       <a-select
+        placeholder="请选择"
         style="width: 200px"
         v-if="type === 'picture'"
-        v-model:value="search.image_type"
-        placeholder="请选择"
+        v-model:value="search.imagetype"
       >
-        <a-select-option value="shanghai">Zone one</a-select-option>
-        <a-select-option value="beijing">Zone two</a-select-option>
+        <a-select-option value="H">横版大图</a-select-option>
+        <a-select-option value="S">竖版大图</a-select-option>
+        <a-select-option value="X">小图</a-select-option>
       </a-select>
     </div>
     <div class="search-item">
       <span class="label">推广书籍：</span>
       <a-select
         style="width: 200px"
-        v-model:value="search.type"
+        v-model:value="search.bookname"
         placeholder="请选择"
       >
         <a-select-option value="shanghai">Zone one</a-select-option>
@@ -50,15 +59,23 @@
     }}</span>
     <div class="search-item" v-show="openFlag">
       <span class="label">需求方：</span>
-      <a-input v-model:value="search.demander" type="text" />
+      <a-input
+        v-model:value="search.demander"
+        type="text"
+        placeholder="请输入"
+      />
     </div>
     <div class="search-item" v-show="openFlag">
       <span class="label">文案：</span>
-      <a-input v-model:value="search.editor" type="text" />
+      <a-input v-model:value="search.editor" type="text" placeholder="请输入" />
     </div>
     <div class="search-item" v-show="openFlag">
       <span class="label">上传者：</span>
-      <a-input v-model:value="search.uploader" type="text" />
+      <a-input
+        v-model:value="search.uploader"
+        type="text"
+        placeholder="请输入"
+      />
     </div>
     <div class="search-item">
       <span class="label"></span>
@@ -80,11 +97,11 @@ const PictureLibrary = defineComponent({
       openFlag: true, // 展开/收起
       search: {
         is_pubilc: 1, // 1公共素材 0个人素材
-        video_name: "", // 视频名称
-        video_type: "", // 视频类型
-        image_name: "", // 图片名称
-        image_type: "", // 图片类型
-        book_name: "", // 推广书籍
+        videoName: "", // 视频名称
+        videotype: "", // 视频类型
+        imageName: "", // 图片名称
+        imagetype: "", // 图片类型
+        bookname: "", // 推广书籍
         demander: "", // 需求方
         editor: "", // 文案
         uploader: "", // 上传者
@@ -96,26 +113,44 @@ const PictureLibrary = defineComponent({
   mounted() {
     console.log("TYPE", this.$props.materialType);
     this.type = this.$props.materialType;
+    this.onSubmit();
   },
   methods: {
     // 搜索
     onSubmit() {
       console.log(this.search);
+      let param: any = {
+        is_pubilc: this.search.is_pubilc,
+        book_name: this.search.bookname,
+        demander: this.search.demander,
+        editor: this.search.editor,
+        uploader: this.search.uploader,
+      };
+      if (this.type === "video") {
+        param.video_name = this.search.videoName;
+        param.video_type = this.search.videotype;
+      }
+      if (this.type === "picture") {
+        param.image_name = this.search.imageName;
+        param.image_type = this.search.imagetype;
+      }
+      console.log("上传搜索条件", param);
+      this.$emit("search", param);
     },
     // 重置
     reset() {
-      this.search= {
+      this.search = {
         is_pubilc: this.search.is_pubilc, // 1公共素材 0个人素材
-        video_name: "", // 视频名称
-        video_type: "", // 视频类型
-        image_name: "", // 图片名称
-        image_type: "", // 图片类型
-        book_name: "", // 推广书籍
+        videoName: "", // 视频名称
+        videotype: "", // 视频类型
+        imageName: "", // 图片名称
+        imagetype: "", // 图片类型
+        bookname: "", // 推广书籍
         demander: "", // 需求方
         editor: "", // 文案
         uploader: "", // 上传者
-      }
-    }
+      };
+    },
   },
 });
 

src/views/material/picture.vue

@@ -4,51 +4,46 @@
       <h3>图片库</h3>
     </div>
     <div class="padding-box-common">
-      <search :materialType="'picture'"></search>
+      <search :materialType="'picture'" @search="onSearch"></search>
+      <common-table
+        :materialType="'picture'"
+        :searchForm="searchForm"
+      ></common-table>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import usePagination from "@/hooks/usePagination";
 import Search from "./component/search.vue";
+import CommonTable from "./component/common-table.vue";
+import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 // import { TableColumnOfYuewen } from "../_pageOptions/table_yuewen";
 //getPromotionList
-import {} from "@/api";
+import { deletePromotion } from "@/api";
 import { message } from "ant-design-vue";
-const PictureLibrary = defineComponent({
-  components: { Search },
+const ImageLibrary = defineComponent({
+  components: { Search, CommonTable },
   setup() {
     let { tablePageOptions } = usePagination();
-    const state = reactive({});
-    return { ...toRefs(state), tablePageOptions };
-  },
-  mounted() {
-    this.getList({ current: 1 });
+    const formRef = ref();
+    const state = reactive({
+      searchForm: {},
+    });
+    return { ...toRefs(state), formRef, tablePageOptions };
   },
+  mounted() {},
   methods: {
-    // 重置搜索条件
-    resetSearch() {
-      // this.search.book_name = "";
-      // this.search.channel_name = "";
-      // this.search.channel_id = "";
-    },
-    // 获取推广链接数据
-    async getList(page?: any) {
-      // this.loading = true;
-      // let { data } = await getPromotionList({
-      //   page: page ? page.current : 1,
-      //   ...this.search,
-      // });
-      // this.loading = false;
-      // this.list = data.list;
+    // 搜索条件回传
+    onSearch(param: any) {
+      console.log(param);
+      this.searchForm = param;
     },
   },
 });
 
-export default PictureLibrary;
+export default ImageLibrary;
 </script>
 <style lang="scss" scoped>
 @import "@/assets/common-style/frame.scss";

src/views/material/video.vue

@@ -4,136 +4,41 @@
       <h3>视频库</h3>
     </div>
     <div class="padding-box-common">
-      <search :materialType="'video'"></search>
+      <search :materialType="'video'" @search="onSearch"></search>
+      <common-table
+        :materialType="'video'"
+        :searchForm="searchForm"
+      ></common-table>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Search from "./component/search.vue";
+import CommonTable from "./component/common-table.vue";
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 // import { TableColumnOfYuewen } from "../_pageOptions/table_yuewen";
 //getPromotionList
-import {
-  getPromotionList,
-  addPromotionLInk,
-  updateReportConfig,
-  deletePromotion,
-} from "@/api";
+import { deletePromotion } from "@/api";
 import { message } from "ant-design-vue";
 const VideoLibrary = defineComponent({
-  components: { Search },
+  components: { Search, CommonTable },
   setup() {
     let { tablePageOptions } = usePagination();
     const formRef = ref();
     const state = reactive({
-      search: {
-        name: "", // 推广员名称
-        days: "", // 自定义天数 1~30天 无默认
-        months: "", // 自定义月数 默认一个月
-        dateType: "month", // 按月查询month/按天查询date
-        month_range: "", // 按月查询 月范围
-        date_range: "", // 按天查询 日期范围
-      },
-      addLink: {
-        channel_id: "", // 推广链接id
-        channel_name: "", // 渠道名
-        book_name: "", // 作品名
-      },
-      list: ref<any[]>([]),
-      visible: false, // 添加派单链接dialog
-      rateVisible: false, // 添加派单链接dialog
-      drawerVisible: false,
-      confirmLoading: false, // 提交链接loading
-      // columns: TableColumnOfYuewen,
-      rate: 0, // 设置回传配置
-      channelId: "",
-      loading: false,
+      searchForm: {},
     });
     return { ...toRefs(state), formRef, tablePageOptions };
   },
-  mounted() {
-    this.getList({ current: 1 });
-  },
+  mounted() {},
   methods: {
-    // 重置搜索条件
-    resetSearch() {
-      // this.search.book_name = "";
-      // this.search.channel_name = "";
-      // this.search.channel_id = "";
-    },
-    // 获取推广链接数据
-    async getList(page?: any) {
-      // this.loading = true;
-      // let { data } = await getPromotionList({
-      //   page: page ? page.current : 1,
-      //   ...this.search,
-      // });
-      // this.loading = false;
-      // this.list = data.list;
-    },
-    // 点击添加链接
-    onAddLink() {
-      this.addLink.channel_id = "";
-      this.addLink.channel_name = "";
-      this.addLink.book_name = "";
-      this.visible = true;
-    },
-    // 确认增加派单链接
-    async onEmitLink() {
-      this.formRef.validate().then(() => {});
-      if (!this.addLink.channel_name) return message.warn("请输入渠道名称");
-      if (!this.addLink.channel_id) return message.warn("请输入链接ID");
-      if (!this.addLink.book_name) return message.warn("请输入推广作品");
-      try {
-        await addPromotionLInk(this.addLink);
-        message.success("新增成功");
-        this.getList({ current: 1 });
-        this.visible = false;
-      } catch (err) {
-        console.log("ERROR:", err);
-      }
-    },
-    // 删除
-    async onDelete(val: any) {
-      try {
-        await deletePromotion({ channel_id: val.channel_id });
-        this.getList({ current: 1 });
-        message.success("删除成功");
-      } catch (err) {
-        console.log(err);
-      }
-    },
-    // 点击回传配置
-    onRateConfig(val: any) {
-      this.channelId = val.channel_id;
-      this.rateVisible = true;
-      this.rate = val.rate;
-    },
-    // 提交回传配置
-    async onEmitRate() {
-      if (this.rate > 100 || this.rate < 0)
-        return message.error("回传比例应在0~100之间");
-      if (parseInt(this.rate) !== parseFloat(this.rate))
-        return message.warn("请输入整数");
-      try {
-        await updateReportConfig({
-          channel_id: this.channelId,
-          rate: this.rate,
-        });
-        message.success("修改成功");
-        this.getList({ current: 1 });
-        this.rateVisible = false;
-      } catch (err) {
-        console.log(err);
-      }
-    },
-    // 查看注册用户
-    openUserDrawer(val: any) {
-      this.channelId = val.channel_id;
-      this.drawerVisible = true;
+    // 搜索条件回传
+    onSearch(param: any) {
+      console.log(param);
+      this.searchForm = param;
     },
   },
 });