RING:素材库search-bar组件封装

src/assets/common-style/frame.scss

@@ -1,4 +1,4 @@
-.title-box {
+.title-box-common {
   width: 100%;
   height: 70px;
   padding: 20px 40px 0 30px;
@@ -10,7 +10,7 @@
     font-weight: bold;
   }
 }
-.padding-box {
+.padding-box-common {
   padding: 20px 20px 0;
   .search-box {
     height: 70px;

src/views/material/component/search.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="search-bar">
+    <a-tabs v-model:activeKey="search.is_pubilc" @change="onSubmit">
+      <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
+      <a-tab-pane :key="0" tab="个人素材"></a-tab-pane>
+    </a-tabs>
+    <div class="search-item">
+      <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'" />
+    </div>
+    <div class="search-item">
+      <span class="label">{{
+        type === "video" ? "视频类型：" : "图片类型："
+      }}</span>
+      <a-select
+        style="width: 200px"
+        v-if="type === 'video'"
+        v-model:value="search.video_type"
+        placeholder="请选择"
+      >
+        <a-select-option value="shanghai">Zone one</a-select-option>
+        <a-select-option value="beijing">Zone two</a-select-option>
+      </a-select>
+      <a-select
+        style="width: 200px"
+        v-if="type === 'picture'"
+        v-model:value="search.image_type"
+        placeholder="请选择"
+      >
+        <a-select-option value="shanghai">Zone one</a-select-option>
+        <a-select-option value="beijing">Zone two</a-select-option>
+      </a-select>
+    </div>
+    <div class="search-item">
+      <span class="label">推广书籍：</span>
+      <a-select
+        style="width: 200px"
+        v-model:value="search.type"
+        placeholder="请选择"
+      >
+        <a-select-option value="shanghai">Zone one</a-select-option>
+        <a-select-option value="beijing">Zone two</a-select-option>
+      </a-select>
+    </div>
+    <span class="flag" @click="openFlag = openFlag ? false : true">{{
+      openFlag ? "收起" : "展开"
+    }}</span>
+    <div class="search-item" v-show="openFlag">
+      <span class="label">需求方：</span>
+      <a-input v-model:value="search.demander" type="text" />
+    </div>
+    <div class="search-item" v-show="openFlag">
+      <span class="label">文案：</span>
+      <a-input v-model:value="search.editor" type="text" />
+    </div>
+    <div class="search-item" v-show="openFlag">
+      <span class="label">上传者：</span>
+      <a-input v-model:value="search.uploader" type="text" />
+    </div>
+    <div class="search-item">
+      <span class="label"></span>
+      <a-button type="primary" @click="onSubmit">搜索</a-button>
+      <a-button style="margin-left: 10px">重置</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref } from "vue";
+import { message } from "ant-design-vue";
+const PictureLibrary = defineComponent({
+  components: {},
+  props: ["materialType"],
+  setup(props) {
+    const state = reactive({
+      type: "", // 组件类型： video:picture
+      openFlag: false, // 展开/收起
+      search: {
+        is_pubilc: 1, // 1公共素材 0个人素材
+        video_name: "", // 视频名称
+        video_type: "", // 视频类型
+        image_name: "", // 图片名称
+        image_type: "", // 图片类型
+        book_name: "", // 推广书籍
+        demander: "", // 需求方
+        editor: "", // 文案
+        uploader: "", // 上传者
+      },
+    });
+    return { ...toRefs(state) };
+  },
+
+  mounted() {
+    console.log("TYPE", this.$props.materialType);
+    this.type = this.$props.materialType;
+  },
+  methods: {
+    onSubmit() {
+      console.log(this.search);
+    },
+  },
+});
+
+export default PictureLibrary;
+</script>
+<style lang="scss" scoped>
+@import "@/assets/common-style/frame.scss";
+.search-bar {
+  background: white;
+  overflow: hidden;
+  width: 100%;
+  .search-item {
+    width: 25%;
+    margin-left: 20px;
+    float: left;
+    display: flex;
+    // justify-content: center;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    .label {
+      width: 100px;
+      height: 30px;
+      line-height: 30px;
+      display: block;
+      text-align: right;
+    }
+    .ant-input,
+    .ant-select-selector {
+      width: 200px;
+    }
+  }
+  .flag {
+    display: inline-block;
+    height: 50px;
+    line-height: 50px;
+    cursor: pointer;
+    &:hover {
+      color: rgb(6, 138, 190);
+    }
+  }
+}
+</style>

src/views/material/picture.vue

@@ -1,57 +1,29 @@
 <template>
-  <div class="performance">
-    <div class="title-box">
+  <div class="picture">
+    <div class="title-box-common">
       <h3>图片库</h3>
     </div>
-    <div class="padding-box">
-      <div class="search-box"></div>
+    <div class="padding-box-common">
+      <search :materialType="'picture'"></search>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import usePagination from "@/hooks/usePagination";
+import Search from "./component/search.vue";
 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 {} from "@/api";
 import { message } from "ant-design-vue";
 const PictureLibrary = defineComponent({
-  components: {},
+  components: { Search },
   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,
-    });
-    return { ...toRefs(state), formRef, tablePageOptions };
+    const state = reactive({});
+    return { ...toRefs(state), tablePageOptions };
   },
   mounted() {
     this.getList({ current: 1 });
@@ -73,67 +45,6 @@ const PictureLibrary = defineComponent({
       // 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;
-    },
   },
 });
 

src/views/material/video.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="performance">
-    <div class="title-box">
+  <div class="video">
+    <div class="title-box-common">
       <h3>视频库</h3>
     </div>
-    <div class="padding-box">
-      <div class="search-box"></div>
+    <div class="padding-box-common">
+      <search :materialType="'video'"></search>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import Search from "./component/search.vue";
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
@@ -23,7 +24,7 @@ import {
 } from "@/api";
 import { message } from "ant-design-vue";
 const VideoLibrary = defineComponent({
-  components: {},
+  components: { Search },
   setup() {
     let { tablePageOptions } = usePagination();
     const formRef = ref();