RING:素材库FIX

src/views/data/performance.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="performance">
-    <div class="title-box">
+    <div class="title-box-common">
       <h3>员工绩效</h3>
     </div>
-    <div class="padding-box">
+    <div class="padding-box-common">
       <div class="search-box"></div>
     </div>
   </div>
@@ -12,21 +12,14 @@
 <script lang="ts">
 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 {} from "@/api";
 import { message } from "ant-design-vue";
 const Performance = defineComponent({
   components: {},
   setup() {
     let { tablePageOptions } = usePagination();
-    const formRef = ref();
     const state = reactive({
       search: {
         name: "", // 推广员名称
@@ -36,22 +29,8 @@ const Performance = defineComponent({
         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 };
+    return { ...toRefs(state), tablePageOptions };
   },
   mounted() {
     this.getList({ current: 1 });
@@ -73,67 +52,6 @@ const Performance = 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/component/common-table.vue

@@ -54,18 +54,25 @@
         <span v-show="record.image_type === 'X'">小图</span>
       </template>
       <template #operation="{ record }">
-        <a @click="onOpenPush(record)">推送</a>&nbsp;
+        <a-button style="padding: 0" @click="onOpenPush(record)" type="link"
+          >推送</a-button
+        >
         <a-popconfirm @confirm="onDelete(record)">
           <template #title>
             <p>确认删除该素材吗</p>
           </template>
-          <a>删除</a>
+          <a-button
+            :disabled="Number(record.is_mine_uploaded) !== 1"
+            type="link"
+            >删除</a-button
+          >
         </a-popconfirm>
       </template>
     </a-table>
     <a-modal
       v-model:visible="pushVisible"
       :title="type === 'video' ? '推送视频' : '推送图片'"
+      :confirmLoading="pushLoading"
       @ok="onConfirmPush"
       width="40%"
     >
@@ -155,6 +162,7 @@ const CommonTable = defineComponent({
       advertiser: ref<string[]>([]), // 选择的广告主
       previewVisible: false,
       currentUrl: "",
+      pushLoading: false
     });
     const getList = async (page?: any) => {
       state.loading = true;
@@ -188,7 +196,6 @@ const CommonTable = defineComponent({
   methods: {
     // 获取广告主列表
     async getAdList() {
-      this.selectedRowKeys = [];
       let { data } = await getAdvertiser();
       this.adList = data;
       if (this.adList.length === 0) return;
@@ -196,6 +203,8 @@ const CommonTable = defineComponent({
         item.advertiser_id = item.account_id;
         item.advertiser_name = item.account_name;
       });
+      this.selectedRowKeys = [];
+      console.log("LIST", this.selectedRowKeys);
     },
 
     async onDelete(val?: any) {
@@ -218,6 +227,7 @@ const CommonTable = defineComponent({
         console.log("ERR:", err);
       } finally {
         this.getList({ current: 1 });
+        this.selectedRowKeys = [];
       }
     },
     // 点击推送
@@ -225,9 +235,11 @@ const CommonTable = defineComponent({
       this.currentId = item.id;
       this.advertiser = [];
       this.pushVisible = true;
+      this.pushLoading = false
     },
     // 确定推送
     async onConfirmPush() {
+      this.pushLoading = true
       console.log("IDS", this.currentId, this.advertiser);
       try {
         await pushMaterial({
@@ -237,8 +249,11 @@ const CommonTable = defineComponent({
         this.pushVisible = false;
         message.success("推送成功");
       } catch (err) {
+        this.pushVisible = false;
         message.error("推送失败");
         console.log(err);
+      }finally{
+        this.pushLoading = false
       }
     },
     // 点击预览

src/views/material/component/search.vue

@@ -47,7 +47,7 @@
     </div>
     <div class="search-item">
       <span class="label">推广书籍：</span>
-      <a-select
+      <!-- <a-select
         allowClear
         style="width: 200px"
         v-model:value="search.bookname"
@@ -61,7 +61,11 @@
           :value="item.book_name"
           >{{ item.book_name }}</a-select-option
         >
-      </a-select>
+      </a-select> -->
+      <a-input
+        v-model:value="search.bookname"
+        placeholder="请输入"
+      />
     </div>
     <span class="flag" @click="openFlag = openFlag ? false : true"
       >{{ openFlag ? "收起" : "展开" }}
@@ -114,7 +118,7 @@ const PictureLibrary = defineComponent({
         videotype: undefined, // 视频类型
         imageName: "", // 图片名称
         imagetype: undefined, // 图片类型
-        bookname: undefined, // 推广书籍
+        bookname: '', // 推广书籍
         demander: "", // 需求方
         editor: "", // 文案
         uploader: "", // 上传者
@@ -169,7 +173,7 @@ const PictureLibrary = defineComponent({
         videotype: undefined, // 视频类型
         imageName: "", // 图片名称
         imagetype: undefined, // 图片类型
-        bookname: undefined, // 推广书籍
+        bookname: '', // 推广书籍
         demander: "", // 需求方
         editor: "", // 文案
         uploader: "", // 上传者

src/views/material/component/upload-image.vue

@@ -39,9 +39,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref } from "vue";
+import { defineComponent, reactive, toRefs, ref, watch, h } from "vue";
 import { uploadImage } from "@/api";
-import { message, Progress } from "ant-design-vue";
+import { message, notification } from "ant-design-vue";
+import { LoadingOutlined, CheckOutlined } from "@ant-design/icons-vue";
 const UploadVideo = defineComponent({
   components: {},
   props: ["searchForm"],
@@ -69,12 +70,25 @@ const UploadVideo = defineComponent({
           //   return message.warning(
           //     `图片：${item.name} 宽高比例不符合要求比例，请修改后重新上传`
           //   );
+          // 校验文件是否已存在于fileList
+          let flag = true;
+          if (this.fileList.length > 0) {
+            this.fileList.forEach((itm) => {
+              if (itm.name === item.name) flag = false;
+            });
+          }
+          if (!flag) return message.warning("文件已存在");
+          if (this.fileList.length === 20)
+            return message.warning("图片数量不能超过20");
           if (height > 1368 || width > 1368)
             return message.warning(
               `图片：${item.name} 尺寸不符合要求尺寸，请修改后重新上传`
             );
           // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
-          if (this.checkNumber(item.name) !== 2)
+          if (
+            this.checkNumber(item.name) !== 2 &&
+            this.checkNumber(item.name) !== 3
+          )
             return message.warning(
               `图片：${item.name} 不符合命名要求，请修改后重新上传`
             );
@@ -89,13 +103,23 @@ const UploadVideo = defineComponent({
           });
         });
       });
+      let inputFile: any = this.$refs.chooseFile;
+      inputFile.value = "";
       console.log("新增文件列表", this.fileList);
     },
     // 确定上传图片
     async onUploadImage() {
       if (this.fileList.length === 0) return message.warning("请选择图片");
       this.$emit("close");
-      message.info("素材上传中...");
+      // message.info("素材上传中...");
+      const key = "start";
+      notification.open({
+        key,
+        message: "状态提示",
+        description: "素材上传中...",
+        duration: 2.5,
+        icon: h(LoadingOutlined, { style: "color: #108ee9" }),
+      });
       let num = 0;
       if (this.fileList.length === 0) return message.error("请选择图片");
       this.fileList.forEach((item) => {
@@ -109,7 +133,17 @@ const UploadVideo = defineComponent({
           .finally(() => {
             num++;
             console.log("NUM", num);
-            if (num === this.fileList.length) message.success("素材上传完成");
+            if (num === this.fileList.length) {
+              const key2 = "final";
+              notification.open({
+                key2,
+                message: "状态提示",
+                description: "素材上传完成！",
+                duration: 4,
+                icon: h(CheckOutlined, { style: "color: greenyellow" }),
+              });
+            }
+            this.$emit("getList");
           });
       });
     },
@@ -145,6 +179,9 @@ const UploadVideo = defineComponent({
       });
       return num;
     },
+    clearList() {
+      this.fileList = [];
+    },
   },
 });
 
@@ -161,7 +198,7 @@ export default UploadVideo;
   .upload-box {
     cursor: pointer;
     background: rgb(250, 250, 250);
-    border: 2px dashed rgb(212, 210, 210);
+    border: 2px dashed #39a4ff;
     border-radius: 6px;
     transition: all 0.3s;
     padding-bottom: 10px;
@@ -175,6 +212,7 @@ export default UploadVideo;
     p {
       text-align: center;
       transition: all 0.3s;
+      color: #39a4ff;
     }
     // 选择文件
     .upload-input {
@@ -189,9 +227,9 @@ export default UploadVideo;
   .upload-box:hover {
     i,
     p {
-      color: #39a4ff !important;
+      color: #0829e6 !important;
     }
-    border-color: #39a4ff;
+    border-color: #0829e6;
   }
   .upload-list {
     overflow: hidden;

src/views/material/component/upload-video.vue

@@ -12,7 +12,7 @@
       <i class="iconfont icon-empty"></i>
       <p>点击或将文件拖拽到这里上传</p>
       <p class="gray-font">
-        支持格式：mp4，mpeg，3gp，avi，宽高16:9或9:16，&lt;500M
+        支持格式：mp4，mpeg，3gp，avi，宽高16:9或9:16，&lt;300M
       </p>
       <p class="gray-font">命名格式：推广书籍名称-需求方-文案</p>
     </div>
@@ -21,12 +21,7 @@
         <i class="iconfont icon-paper-clip"></i>
         <p>
           {{ item.name }}
-          <i class="iconfont icon-guanbi" @click="deleteItem(index)"></i
-          ><a-progress
-            :showInfo="false"
-            :percent="item.percent"
-            status="active"
-          />
+          <i class="iconfont icon-guanbi" @click="deleteItem(index)"></i>
         </p>
       </div>
     </div>
@@ -35,9 +30,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref } from "vue";
+import { defineComponent, reactive, toRefs, ref, watch, h } from "vue";
 import { uploadVideo } from "@/api";
-import { message, Progress } from "ant-design-vue";
+import { message, notification } from "ant-design-vue";
+import { LoadingOutlined, CheckOutlined } from "@ant-design/icons-vue";
 const UploadVideo = defineComponent({
   components: {},
   props: ["searchForm"],
@@ -59,9 +55,19 @@ const UploadVideo = defineComponent({
           const { duration, height, width } = videoinfo;
           //获取到视频的时长,高度,宽度
           console.log(duration, height, width);
+          // 校验文件是否已存在于fileList
+          let flag = true;
+          if (this.fileList.length > 0) {
+            this.fileList.forEach((itm) => {
+              if (itm.name === item.name) flag = false;
+            });
+          }
+          if (!flag) return message.warning("文件已存在");
           // 校验文件尺寸比例大小
-          if (Number((item.size / 1024 / 1024).toFixed(2)) > 500)
-            return message.warning(`视频：${item.name}大小超过了500M`);
+          if (this.fileList.length === 10)
+            return message.warning("视频数量不能超过10");
+          if (Number((item.size / 1024 / 1024).toFixed(2)) > 300)
+            return message.warning(`视频：${item.name}大小超过了300M`);
           console.log("宽高", height / width, 16 / 9, 9 / 16);
           // if (
           //   item.height / item.width !== 16 / 9 &&
@@ -71,7 +77,10 @@ const UploadVideo = defineComponent({
           //     `视频：${item.name}宽高比例不符合要求比例，请修改后重新上传`
           //   );
           // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
-          if (this.checkNumber(item.name) !== 2)
+          if (
+            this.checkNumber(item.name) !== 2 &&
+            this.checkNumber(item.name) !== 3
+          )
             return message.warning(
               `视频：${item.name}不符合命名要求，请修改后重新上传`
             );
@@ -87,13 +96,22 @@ const UploadVideo = defineComponent({
           });
         });
       });
-      console.log("新增文件列表", this.fileList);
+      let inputFile: any = this.$refs.chooseFile;
+      inputFile.value = "";
     },
     // 确定上传视频
     async onUploadVideo() {
       if (this.fileList.length === 0) return message.warning("请选择视频");
       this.$emit("close");
-      message.info("素材上传中...");
+      // message.info("素材上传中...");
+      const key = "start";
+      notification.open({
+        key,
+        message: "状态提示",
+        description: "素材上传中...",
+        duration: 2.5,
+        icon: h(LoadingOutlined, { style: "color: #108ee9" }),
+      });
       let num = 0;
       if (this.fileList.length === 0) return message.error("请选择视频");
       this.fileList.forEach((item) => {
@@ -109,8 +127,24 @@ const UploadVideo = defineComponent({
           })
           .finally(() => {
             num++;
-            console.log("NUM", num);
-            if (num === this.fileList.length) message.success("素材上传完成");
+            console.log(
+              "NUM",
+              num,
+              this.fileList.length,
+              num === this.fileList.length
+            );
+            if (num === this.fileList.length) {
+              // message.success("素材上传完成")
+              const key2 = "final";
+              notification.open({
+                key2,
+                message: "状态提示",
+                description: "素材上传完成！",
+                duration: 4,
+                icon: h(CheckOutlined, { style: "color: greenyellow" }),
+              });
+            }
+            this.$emit("getList");
           });
       });
     },
@@ -142,6 +176,9 @@ const UploadVideo = defineComponent({
       });
       return num;
     },
+    clearList() {
+      this.fileList = [];
+    },
   },
 });
 
@@ -158,7 +195,7 @@ export default UploadVideo;
   .upload-box {
     cursor: pointer;
     background: rgb(250, 250, 250);
-    border: 2px dashed rgb(212, 210, 210);
+    border: 2px dashed #39a4ff;
     border-radius: 6px;
     transition: all 0.3s;
     padding-bottom: 10px;
@@ -172,6 +209,7 @@ export default UploadVideo;
     p {
       text-align: center;
       transition: all 0.3s;
+      color: #39a4ff;
     }
     // 选择文件
     .upload-input {
@@ -186,14 +224,15 @@ export default UploadVideo;
   .upload-box:hover {
     i,
     p {
-      color: #39a4ff !important;
+      color: #0829e6 !important;
     }
-    border-color: #39a4ff;
+    border-color: #0829e6;
   }
   .upload-list {
     overflow: hidden;
     .list-item {
       margin-top: 10px;
+      height: 24px;
       .icon-paper-clip {
         width: 14px;
         font-size: 12px;

src/views/material/picture.vue

@@ -7,6 +7,7 @@
         @click="
           uploadVisible = true;
           confirmLoading = false;
+          $refs.upload.clearList();
         "
         >上传</a-button
       >
@@ -14,6 +15,7 @@
     <div class="padding-box-common">
       <search :materialType="'picture'" @search="onSearch"></search>
       <common-table
+        ref="commonTable"
         :materialType="'picture'"
         :searchForm="searchForm"
       ></common-table>
@@ -21,7 +23,7 @@
     <a-modal
       width="40%"
       :title="`上传图片至${
-        searchForm.is_public === 1 ? '公共素材' : '个人素材'
+        searchForm.is_public === 1 ? '公共素材' : '我的上传'
       }`"
       v-model:visible="uploadVisible"
       :confirm-loading="confirmLoading"
@@ -31,6 +33,7 @@
         ref="upload"
         :searchForm="searchForm"
         @close="uploadVisible = false"
+        @getList="$refs.commonTable.getList()"
       ></upload-image>
     </a-modal>
   </div>
@@ -63,7 +66,7 @@ const ImageLibrary = defineComponent({
   methods: {
     // 搜索条件回传
     onSearch(param: any) {
-      this.searchForm = param;
+      this.searchForm = JSON.parse(JSON.stringify(param));
     },
     // 确定上传 触发组件上传视频
     onConfirmUpload() {

src/views/material/video.vue

@@ -7,6 +7,7 @@
         @click="
           uploadVisible = true;
           confirmLoading = false;
+          $refs.upload.clearList();
         "
         >上传</a-button
       >
@@ -14,6 +15,7 @@
     <div class="padding-box-common">
       <search :materialType="'video'" @search="onSearch"></search>
       <common-table
+        ref="commonTable"
         :materialType="'video'"
         :searchForm="searchForm"
       ></common-table>
@@ -21,17 +23,19 @@
     <a-modal
       width="40%"
       :title="`上传视频至${
-        searchForm.is_public === 1 ? '公共素材' : '个人素材'
+        searchForm.is_public === 1 ? '公共素材' : '我的上传'
       }`"
       v-model:visible="uploadVisible"
       :confirm-loading="confirmLoading"
       @ok="onConfirmUpload"
+      okText="上传"
       @cancel="confirmLoading = false"
     >
       <upload-video
         ref="upload"
         :searchForm="searchForm"
         @close="uploadVisible = false"
+        @getList="$refs.commonTable.getList()"
       ></upload-video>
     </a-modal>
   </div>
@@ -64,7 +68,7 @@ const VideoLibrary = defineComponent({
   methods: {
     // 搜索条件回传
     onSearch(param: any) {
-      this.searchForm = param;
+      this.searchForm = JSON.parse(JSON.stringify(param));
     },
     // 确定上传 触发组件上传视频
     onConfirmUpload() {