update: 微信图文升级

src/components/libs/imgTextTemp/imgtextpublic.vue

+<template>
+  <img-text is-publish></img-text>
+</template>
+
+<script>
+import ImgText from './index.vue';
+export default {
+  name: 'imgtextpublic',
+  components: { ImgText }
+};
+</script>

src/components/libs/imgTextTemp/index.vue

@@ -5,10 +5,10 @@
         图文消息(共{{ total }}条)
         <el-input v-model="listParams.searchName" clearable class="w200 ml10" placeholder="请输入标题/作者" @change="loadImgTextList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
         <el-checkbox class="vertical-middle ml0" v-if="$store.state.marketing.isShowSelf && showSelf" v-model="listParams.showSelfFlag" :true-label="1" :false-label="0" label="仅看本人" border @change="loadImgTextList" />
-        <el-checkbox class="vertical-middle ml0" v-model="listParams.wxscType" :true-label="3" :false-label="4" label="仅看历史图文" border @change="loadImgTextList" />
+        <el-checkbox class="vertical-middle ml0" v-model="listParams.wxscType" v-if="!isPublish && !isGroupSend" :true-label="3" :false-label="4" label="仅看历史图文" border @change="loadImgTextList" />
       </div>
       <div>
-        <el-button type="primary" @click="add">新建图文</el-button>
+        <el-button type="primary" v-if="!isPublish" @click="add">新建图文</el-button>
         <el-button v-if="auto" @click="check">检查同步</el-button>
       </div>
     </div>
@@ -19,14 +19,20 @@
             <div class="label-hidden"><el-radio :label="scope.row"></el-radio></div>
           </template>
         </el-table-column>
-        <el-table-column label="图文信息" align="left">
+        <el-table-column label="图文信息" align="left" min-width="200px">
           <div class="media-info" slot-scope="scope">
             <img width="100" height="100" :src="scope.row.itemList.length ? scope.row.itemList[0].qcloudImageUrl || '' : ''" alt="" />
             <div class="media-title">
               <p>
                 标题：<a class="blue" :href="scope.row.itemList.length ? scope.row.itemList[0].mediaUrl || '' : ''" target="_blank">{{ scope.row.itemList.length ? scope.row.itemList[0].titleName || '' : '' }}</a>
               </p>
-              <p>图文m_id：{{ scope.row.draftMediaId }}</p>
+              <p>
+                图文m_id：
+                <el-tooltip v-if="scope.row.draftMediaId" placement="top" :content="scope.row.draftMediaId">
+                  <span class="media-id">{{ scope.row.draftMediaId }}</span>
+                </el-tooltip>
+                <span v-else>--</span>
+              </p>
             </div>
           </div>
         </el-table-column>
@@ -38,29 +44,45 @@
         <el-table-column label="修改时间" prop="updateTimeStr" align="left">
           <template slot-scope="scope">
             <p class="cell-time">
-              {{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd-HH-mm', true).y }}<br /><span>{{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
+              <template v-if="scope.row.updateTime">
+                {{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd-HH-mm', true).y }}<br /><span>{{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
+              </template>
+              <template v-else>--</template>
             </p>
           </template>
         </el-table-column>
-        <el-table-column min-width="100" align="left" prop="creatorName" label="创建人" v-if="$store.state.marketing.openFlag"></el-table-column>
-        <el-table-column label="操作" align="left" v-if="auto">
+        <el-table-column min-width="100" align="left" prop="creatorName" label="创建人" :formatter="(row, col, val) => val || '--'" v-if="$store.state.marketing.openFlag"></el-table-column>
+        <el-table-column label="发布说明" prop="publishStatus" :formatter="formatPublishStatus" show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作" align="left" v-if="auto" min-width="120px">
+          <!-- 发布中不能进行编辑、删除、使用等任何操作 -->
           <template slot-scope="scope">
-            <el-button type="text" v-if="scope.row.canEdit !== false" @click="editData(scope.row)">编辑</el-button>
-            <dm-delete v-if="scope.row.canEdit !== false" @confirm="delData(scope.row)" tips="确认删除该图文?">
-              <el-button type="text">删除</el-button>
-            </dm-delete>
-            <el-button type="text" v-if="scope.row.canEdit !== false" @click="$router.push('/wechat/record/add/' + scope.row.imageTextId)">使用</el-button>
+            <template v-if="scope.row.publishStatus != 1">
+              <!-- 老图文才有转为草稿 -->
+              <!-- 转为草稿就是编辑 -->
+              <template v-if="scope.row.oldImageTextFlag && !isPublish">
+                <el-button type="text" v-if="scope.row.canEdit !== false" @click="editData(scope.row)">转为草稿`</el-button>
+              </template>
+              <template v-if="!scope.row.oldImageTextFlag && !isPublish">
+                <el-button type="text" v-if="scope.row.canEdit !== false" @click="editData(scope.row)">编辑</el-button>
+                <el-button type="text" v-if="scope.row.canEdit !== false" @click="$router.push('/wechat/record/add/' + scope.row.imageTextId)">使用</el-button>
+                <el-button :loading="scope.row.loading" :disabled="scope.row.loading" @click="onPublic(scope.row)" type="text">发布</el-button>
+              </template>
+              <dm-delete v-if="scope.row.canEdit !== false" @confirm="delData(scope.row)" tips="确认删除该图文?">
+                <el-button type="text">删除</el-button>
+              </dm-delete>
+            </template>
+            <template v-else>--</template>
           </template>
         </el-table-column>
       </el-table>
     </el-radio-group>
     <dm-pagination v-show="textImgList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
-    <sync-imgtext :wxsc-type="wxscType" :show.sync="syncImgTextShow"></sync-imgtext>
+    <sync-imgtext :wxsc-type="getWxscType" :show.sync="syncImgTextShow"></sync-imgtext>
   </section>
 </template>
 
 <script>
-import { loadImgTextList, deleteImageText } from '@/service/api/wechatApi.js';
+import { loadImgTextList, deleteImageText, wechatDraftPublish } from '@/service/api/wechatApi.js';
 import { formatDateTimeByType } from '@/utils/index.js';
 import syncImgtext from './syncImgtext';
 export default {
@@ -91,20 +113,25 @@ export default {
     isGroupSend: {
       type: Boolean,
       default: false
+    },
+    isPublish: {
+      type: Boolean,
+      default: false
     }
   },
   created() {
-    this.$store.commit(
-      'mutations_layoutTips',
-      `<div class="layout--tips">
-          <i class="el-icon-info"></i>因为在微信公众后台发布的图文会从草稿箱转移到发表记录，若在微信公众后台有发布操作，建议在达摩侧的草稿箱检查同步
-      </div>`
-    );
+    if (!this.isPublish) {
+      this.$store.commit(
+        'mutations_layoutTips',
+        `<div class="layout--tips">
+            <i class="el-icon-info"></i>因为在微信公众后台发布的图文会从草稿箱转移到发表记录，若在微信公众后台有发布操作，建议在达摩侧的草稿箱检查同步
+        </div>`
+      );
+    }
     this.loadImgTextList();
   },
   data() {
     return {
-      wxscType: '4',
       textImgList: [],
       listParams: {
         currentPage: 1,
@@ -123,6 +150,11 @@ export default {
   components: {
     syncImgtext
   },
+  computed: {
+    getWxscType() {
+      return this.isPublish ? 5 : 4;
+    }
+  },
   watch: {
     activeId(val) {
       this.textImgList.map(v => {
@@ -133,6 +165,33 @@ export default {
     }
   },
   methods: {
+    formatPublishStatus(row, col, val) {
+      // 0:成功, 1:发布中，2:原创失败, 3: 常规失败, 4:平台审核不通过, 5:成功后用户删除所有文章, 6: 成功后系统封禁所有文章 100:老图文 , 101:草稿
+      const status = new Map();
+      status.set(0, '成功');
+      status.set(1, '发布中');
+      status.set(2, '原创失败');
+      status.set(3, '常规失败');
+      status.set(4, '平台审核不通过');
+      status.set(5, '成功后用户删除所有文章');
+      status.set(6, '成功后系统封禁所有文章');
+      status.set(100, '老图文');
+      status.set(101, '草稿');
+      return status.get(typeof val == 'string' ? Number(val) : val) || '--';
+    },
+    onPublic(row) {
+      this.$confirm('确认发布此图文？', '发布图文', {
+        type: 'warning'
+      }).then(() => {
+        this.$set(row, 'loading', true);
+        wechatDraftPublish({ imageTextId: row.imageTextId })
+          .then(res => {
+            this.$message.success('发布成功!');
+            this.loadImgTextList();
+          })
+          .finally(() => this.$set(row, 'loading', 'false'));
+      });
+    },
     async loadImgTextList() {
       if (this.loading) {
         return;
@@ -143,6 +202,9 @@ export default {
         if (this.isGroupSend) {
           params.isGroupSend = 1;
         }
+        if (this.isPublish) {
+          params.wxscType = 5;
+        }
         let res = await loadImgTextList(params);
         if (res.errorCode === 0) {
           // 从页面上过滤itemList为[]的错误数据，原因：微信导入错误
@@ -176,10 +238,10 @@ export default {
       this.$emit('get-data', { imageTextId: row.imageTextId, imageTextWechatId: row.imageTextWechatId });
     },
     add() {
-      this.$router.push(`/wechat/editor?type=${this.wxscType}`);
+      this.$router.push(`/wechat/editor?type=${this.getWxscType}`);
     },
     editData(row) {
-      this.$router.push('/wechat/editor/' + row.imageTextId);
+      this.$router.push('/wechat/editor/' + row.imageTextId + '?type=' + this.getWxscType);
     },
     delData(row) {
       deleteImageText({ imageTextId: row.imageTextId })
@@ -216,6 +278,14 @@ export default {
     flex-direction: column;
     justify-content: space-around;
     padding-left: 15px;
+    .media-id {
+      display: inline-block;
+      vertical-align: top;
+      width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 .dm-imgtext_head {

src/components/libs/imgTextTemp/syncImgtext.vue

@@ -58,7 +58,7 @@ export default {
     },
     async getSyncInfo() {
       this.loading = true;
-      let res = await getSyncInfo();
+      let res = await getSyncInfo({ wxscType: this.wxscType });
       this.count = res.result.wechatCount;
       this.loadStatus = res.result.status;
       this.loading = false;

src/router/modules/wechat.js

@@ -94,6 +94,14 @@ export default {
           }
         },
         {
+          path: 'imgtextpublic',
+          name: '图文发布列表',
+          component: () => import(/* webpackChunkName: "wechat" */ '../../components/libs/imgTextTemp/imgtextpublic.vue'),
+          meta: {
+            path: '/wechat/temp/imgtextpublic'
+          }
+        },
+        {
           path: 'img',
           name: '图片',
           component: () => import(/* webpackChunkName: "wechat" */ '../../components/libs/imgTemp/index.vue'),

src/service/api/wechatApi.js

@@ -33,6 +33,8 @@ export const getSyncInfo = params => requests(PREFIX + 'get-sync-info', params);
 //素材库--图文--同步微信侧 图文素材数据
 export const syncWechatImageText = params => requests(PREFIX + 'sync-wechatImage-text', params);
 
+export const wechatDraftPublish = params => requests(PREFIX + 'wechat-draft-publish', params);
+
 //素材库--图片--图片分页列表
 export const loadImgList = params => requests(PREFIX + 'page-marketing-wechat-image', params);
 

src/views/wechat/editor.vue

@@ -62,7 +62,7 @@
                 "
                 ><i class="el-icon-picture"></i><span> 图片</span></span
               >
-              <span @click="preVideo"><i class="iconfont icon-shipin"></i><span> 视频</span></span>
+              <!-- <span @click="preVideo"><i class="iconfont icon-shipin"></i><span> 视频</span></span> -->
               <!-- <span @click="cardShow = true"><i class="iconfont icon-qiaquan"></i><span> 卡券</span></span> -->
             </div>
             <vue-ueditor-wrap ref="ueditor" v-model="activeImgText.content" :destroy="false" :config="config" @ready="ready" :myInit="myInit"></vue-ueditor-wrap>