feat: 增加发送记录页面

src/views/enterpriseApp/myCustomer/onlineChatSet.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-09-18 15:24:50
  * @LastEditors: 无尘
- * @LastEditTime: 2019-10-24 15:48:13
+ * @LastEditTime: 2019-10-24 17:55:02
  -->
 
 <!--
@@ -97,7 +97,7 @@ components: {
                     </el-table-column>
                     <el-table-column prop="" label="操作" show-overflow-tooltip>
                       <template slot-scope="scope">
-                        <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row)">发送记录</el-button>
+                        <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '4')">发送记录</el-button>
                       </template>
                     </el-table-column>
                   </el-table>
@@ -157,7 +157,7 @@ components: {
                         </el-table-column>
                         <el-table-column prop="" label="操作" show-overflow-tooltip>
                           <template slot-scope="scope">
-                            <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row)">发送记录</el-button>
+                            <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '1')">发送记录</el-button>
                           </template>
                         </el-table-column>
                       </el-table>
@@ -201,7 +201,7 @@ components: {
                         </el-table-column>
                         <el-table-column prop="" label="操作" show-overflow-tooltip>
                           <template slot-scope="scope">
-                            <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row)">发送记录</el-button>
+                            <el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '2')">发送记录</el-button>
                           </template>
                         </el-table-column>
                       </el-table>
@@ -299,9 +299,9 @@ export default {
     /**
      * 发送记录
      */
-    toSendDetail(index, row) {
+    toSendDetail(index, row, tabType) {
       const that = this;
-      that.$router.push(`/sendRecord?appIcon=${this.$route.query.appIcon}`);
+      that.$router.push(`/sendRecord?activeTab=${that.activeTab}&tabType=${tabType}&appIcon=${this.$route.query.appIcon}&relatedId=${row.id || row.goodId}`);
     },
     /**
      * 改变chatFlag
@@ -592,6 +592,9 @@ export default {
     if (that.brandId != '') {
       that.getChatSet(that.brandId);
     }
+    if (that.$route.query.activeTab != '') {
+      that.activeTab = that.$route.query.activeTab || '2';
+    }
   }
 };
 </script>

src/views/enterpriseApp/myCustomer/sendRecord.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-09-18 15:25:12
  * @LastEditors: 无尘
- * @LastEditTime: 2019-10-24 15:52:49
+ * @LastEditTime: 2019-10-24 18:22:43
  -->
 
 <!--
@@ -21,51 +21,80 @@ components: {
       <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
       <div class="chat-log-content boder-box">
         <div class="table-condition flex flex-space-between m-b-23">
-          <div class="table-condition-left">
-            <el-input :placeholder="conditionObj.searchType == 2 ? '请输入会员手机号/卡号 ' : '请输入导购姓名/手机号/code'" v-model="conditionObj.searchInput" class="w-369" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput">
-              <el-select class="w-103" v-model="conditionObj.searchType" slot="prepend" placeholder="请选择">
-                <el-option label="按导购" value="1"></el-option>
-                <el-option label="按会员" value="2"></el-option>
-              </el-select>
-            </el-input>
-            <el-date-picker class="m-l-10" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
-          </div>
+          <div class="table-condition-left"><el-input placeholder="请输入导购姓名/手机号/code" v-model="conditionObj.searchInput" class="w-369" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"> </el-input><el-date-picker class="m-l-10 m-r-10" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker><el-button style="vertical-align: middle;" @click="showDialogLayer('store', conditionObj.storeGroup)">门店架构选人</el-button></div>
           <div class="table-condition-right">
-            <el-button :disabled="conditionObj.searchType == 2" type="primary" plain @click="showDialogLayer('store', conditionObj.storeGroup)">门店架构选人</el-button>
+            <el-button type="primary" @click="exportExcel"><i class="iconfont icon-icon_yunxiazai p-r-6"></i>导出</el-button>
           </div>
         </div>
         <el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
-          <el-table-column label="姓名" show-overflow-tooltip>
-            <template slot-scope="scope">{{ scope.row.name || '--' }}</template>
-          </el-table-column>
-          <el-table-column prop="" label="员工状态">
+          <el-table-column label="导购信息" show-overflow-tooltip>
             <template slot-scope="scope">
-              <span v-if="scope.row.status == 1">正式</span>
-              <span v-if="scope.row.status == 2">试用</span>
-              <span v-if="scope.row.status == -1">无状态</span>
+              <div class="flex">
+                <el-popover placement="top-start" width="400" trigger="hover" @show="showSingleInfo(scope.row.applyId)">
+                  <div class="apply-info-detail">
+                    <div class="flex">
+                      <div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
+                        <i v-if="!scope.row.headPic" class="iconfont icon-yewuduanmorentouxian"></i>
+                        <img v-else :src="scope.row.headPic" alt="img" />
+                      </div>
+                      <div class="flex flex-column apply-info-right flex-space-between">
+                        <div class="apply-info-name">
+                          {{ scope.row.clerkName }}
+                          <i :class="[scope.row.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont']"></i>
+                        </div>
+                        <div class="apply-info-code">
+                          <span class="w-80">员工代码：</span><span class="w-130">{{ scope.row.code || '--' }}</span>
+                        </div>
+                        <div class="apply-info-phone">
+                          <span class="w-80">手机号：</span><span class="w-130">{{ scope.row.nationcode == '86' ? scope.row.phoneNumber : '+' + scope.row.nationcode + '-' + scope.row.phoneNumber }}</span>
+                        </div>
+                        <div class="apply-info-job">
+                          <span class="w-80">职位：</span><span class="w-130">{{ scope.row.positionName || '--' }}</span>
+                        </div>
+                        <div class="apply-info-store">
+                          <span class="w-80">所属门店：</span><span class="w-130">{{ scope.row.storeName || '--' }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div slot="reference">
+                    <div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
+                      <i v-if="!scope.row.clerkImgUrl" class="iconfont icon-yewuduanmorentouxian"></i>
+                      <img v-else :src="scope.row.clerkImgUrl" alt="img" />
+                    </div>
+                  </div>
+                </el-popover>
+                <div class="flex flex-column apply-info">
+                  <span>{{ scope.row.clerkName }}</span>
+                  <span class="font-13">{{ scope.row.storeName }}</span>
+                </div>
+              </div>
             </template>
           </el-table-column>
           <el-table-column prop="" label="导购手机号" show-overflow-tooltip>
-            <template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
-          </el-table-column>
-          <el-table-column prop="" label="门店名称" show-overflow-tooltip>
-            <template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
+            <template slot-scope="scope">{{ scope.row.clerkPhoneNumber || '--' }}</template>
           </el-table-column>
-          <el-table-column prop="" label="员工code" show-overflow-tooltip>
-            <template slot-scope="scope">{{ scope.row.code || '--' }}</template>
-          </el-table-column>
-          <el-table-column prop="" label="消息数" show-overflow-tooltip>
-            <template slot-scope="scope">{{ scope.row.messageCount }}</template>
-          </el-table-column>
-          <el-table-column prop="" label="会员姓名" show-overflow-tooltip>
-            <template slot-scope="scope">{{ scope.row.memberName || '--' }}</template>
+          <el-table-column prop="" label="会员信息" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="flex">
+                <div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
+                  <i v-if="!scope.row.memberImgUrl" class="iconfont icon-yewuduanmorentouxian"></i>
+                  <img v-else :src="scope.row.memberImgUrl" alt="img" />
+                </div>
+                <div class="flex flex-column apply-info">
+                  <span class="text-ellipsis">{{ scope.row.clerkName }}</span>
+                  <span class="font-13 text-ellipsis">{{ scope.row.storeName }}</span>
+                </div>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column prop="" label="会员手机号" show-overflow-tooltip>
             <template slot-scope="scope">{{ scope.row.memberPhoneNumber || '--' }}</template>
           </el-table-column>
-          <el-table-column label="操作">
+          <el-table-column label="发送时间" show-overflow-tooltip>
             <template slot-scope="scope">
-              <el-button type="text" size="small" @click="showDetail(scope.$index, scope.row)">查看详情</el-button>
+              <div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
+              <div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
             </template>
           </el-table-column>
         </el-table>
@@ -82,7 +111,7 @@ components: {
 import vueSelectStore from 'components/common/vueSelectStore';
 import commonDetailTop from '@/components/app/common-detail-top.vue';
 import chatLogList from '@/components/app/chat-log-list.vue';
-import { getRequest } from '@/api/api';
+import { getRequest, postExcel } from '@/api/api';
 import errMsg from '@/common/js/error';
 import { _debounce } from '@/common/js/public';
 export default {
@@ -110,12 +139,12 @@ export default {
     return {
       activeBrand: this.brandId, // 商户(品牌) id
       activeGroup: this.activeGroupId, // 商户(品牌) groupId
-      activeId: '1',
+      activeId: '2',
       topMenuData: [
         {
           id: '1',
           name: '在线沟通设置',
-          path: '/noticeList?appIcon=${this.$route.query.appIcon}'
+          path: `/onlineChatSet?appIcon=${this.$route.query.appIcon}&activeTab=${this.$route.query.activeTab}`
         },
         {
           id: '2',
@@ -195,6 +224,66 @@ export default {
   },
   methods: {
     /**
+     * 导出
+     */
+    exportExcel() {
+      let that = this;
+      let storeGroups = [];
+      let filterStoreIds = [];
+      let clerkIds = [];
+      that.conditionObj.storeGroup.forEach(ele => {
+        if (ele.type == 1) {
+          clerkIds.push(ele.employeeClerkId);
+        }
+        if (ele.type == 2) {
+          storeGroups.push(ele.groupId);
+        }
+        if (ele.type == 3) {
+          filterStoreIds.push(ele.storeId);
+        }
+      });
+      if (!that.conditionObj.dateRange) {
+        that.conditionObj.dateRange = [];
+      }
+      let para = {
+        relatedId: that.$route.query.relatedId,
+        type: that.$route.query.tabType,
+        keyWord: that.conditionObj.searchInput || '', // 搜索字段
+        groupIds: storeGroups.join(',') || '', // 门店分组, 门店
+        storeIds: filterStoreIds.join(',') || '', // 门店分组,分组
+        clerkIds: clerkIds.join(',') || '', //
+        startTime: that.conditionObj.dateRange[0] || '',
+        endTime: that.conditionObj.dateRange[1] || '',
+        brandId: that.activeBrand
+        // taskType: 1 //0不良评价，1话务任务
+      };
+      postExcel('//haoban-app-member-web/customer/export_message_log', para)
+        .then(res => {
+          if (!res.data) {
+            errMsg.errorMsg('暂无数据');
+            return false;
+          }
+          // let resData = res.data;
+          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
+          const fileName = `${that.tableData[0] ? that.tableData[0].storeName : ''}发送记录报表.csv`;
+          const elink = document.createElement('a');
+          elink.download = fileName;
+          elink.style.display = 'none';
+          elink.href = URL.createObjectURL(blob);
+          document.body.appendChild(elink);
+          elink.click();
+          URL.revokeObjectURL(elink.href); // 释放URL 对象
+          document.body.removeChild(elink);
+          // errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    /**
      * 输入
      */
     toInput: _debounce(function(e, value) {
@@ -304,8 +393,9 @@ export default {
         that.conditionObj.dateRange = [];
       }
       let para = {
+        relatedId: that.$route.query.relatedId,
+        type: that.$route.query.tabType,
         keyWord: that.conditionObj.searchInput || '', // 搜索字段
-        type: that.conditionObj.searchType || '', // 搜索类型
         groupIds: storeGroups.join(',') || '', // 门店分组, 门店
         storeIds: filterStoreIds.join(',') || '', // 门店分组,分组
         clerkIds: clerkIds.join(',') || '', //
@@ -316,7 +406,7 @@ export default {
         brandId: that.activeBrand
         // taskType: 1 //0不良评价，1话务任务
       };
-      getRequest('/haoban-app-member-web/customer/find_message_list', para)
+      getRequest('/haoban-app-member-web/customer/send_message_log', para)
         .then(res => {
           let resData = res.data;
           if (resData.errorCode == 1) {