数据报表

.env.development

@@ -10,7 +10,7 @@ VUE_APP_BASE_API = 'https://mapi-b.caimei365.com'
 VUE_APP_CORE_API = 'https://core-b.caimei365.com'
 
 # 采美网站url
-VUE_APP_CAIMEI_URL = 'https://zzjtest.gz.aeert.com'
+VUE_APP_CAIMEI_URL = 'http://120.79.25.27:8009'
 
 # 采美旧后台
 VUE_APP_ADMIN_URL = 'https://admin-b.caimei365.com'

src/router/modules/user.js

@@ -36,6 +36,26 @@ const userRouter = {
           component: () => import('@/views/user/customer/list'),
           meta: { title: '供应商列表' }
         },
+        {
+          path: 'market-list',
+          name: 'MarketList',
+          component: () => import('@/views/user/customer/market-list'),
+          meta: { title: '营销数据报表' }
+        },
+        {
+          path: 'market-report-list',
+          name: 'MarketReportList',
+          component: () => import('@/views/user/customer/market-report-list'),
+          meta: { title: '数据报表' },
+          hidden: true
+        },
+        {
+          path: 'market-edit',
+          name: 'MarketEdit',
+          component: () => import('@/views/user/customer/market-edit'),
+          meta: { title: '数据报表上传/编辑' },
+          hidden: true
+        },
         {
           path: 'customer-stat-list',
           name: 'CustomerStatsList',

src/styles/index.scss

@@ -252,11 +252,3 @@ aside {
 .el-submenu [class^='el-icon-'] {
   font-size: 16px;
 }
-.uploader-tips {
-  position: absolute;
-  bottom: 0;
-  left: 160px;
-  line-height: 28px;
-  color: red;
-  margin: 0;
-}

src/views/user/customer/advertis-edit.vue

@@ -297,4 +297,12 @@ export default {
 .filter-item-temp {
   width: 100px;
 }
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 160px;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
 </style>

src/views/user/customer/market-edit.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="app-container" style="width: 800px; margin: 0 auto">
+    <div class="form-tips">
+      <p>
+        文件上传完成后，可先预览报表，若不是最终想要的数据效果，可先暂时保存，等数据最终确定了，再重新上传新文件，最后生成报表。
+      </p>
+    </div>
+    <el-form ref="bannerForm" :model="form" label-width="100px">
+      <el-form-item label="报表月份:" prop="guidingOne" :rules="rules.month">
+        <el-date-picker v-model="form.month" type="month" format="M月" placeholder="选择月份" style="width: 280px" />
+      </el-form-item>
+      <el-form-item label="报表名称:" prop="guidingTwo" :rules="rules.title">
+        <el-input v-model="form.title" placeholder="请输入报表名称" maxlength="30" style="width: 280px" />
+      </el-form-item>
+      <el-form-item label="报表文件" prop="fileUrl" :rules="rules.fileUrl">
+        <el-upload
+          ref="upload"
+          accept=".xlsx, .xls"
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :limit="1"
+          :file-list="fileList"
+          :on-success="handleUploadSuccess"
+          :on-remove="handleUploadRemove"
+          :on-change="handleUploadChange"
+          :auto-upload="false"
+        >
+          <el-button slot="trigger" size="small" type="primary"> 选取文件 </el-button>
+          <div slot="tip" class="el-upload__tip">只能上传.xlsx, .xls文件</div>
+        </el-upload>
+        <input v-show="false" v-model="form.fileUrl" type="text" />
+      </el-form-item>
+    </el-form>
+    <div class="el-dialog__footer" style="text-align: left; margin-top: 100px">
+      <el-button type="primary" @click="onSubmit('bannerForm')"> 生成报表 </el-button>
+      <el-button type="warning" @click="onSubmit('bannerForm')"> 暂时保存 </el-button>
+      <el-button type="success" @click="onSubmit('bannerForm')"> 预览报表 </el-button>
+      <el-button plain @click="backToList"> 返回 </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { saveShopPopUp, getShopPopUp } from '@/api/user/customer/customer'
+
+export default {
+  name: 'MarketEdit',
+  data() {
+    const defaultForm = () => {
+      return {
+        id: '',
+        fileUrl: '', // 数据文件
+        month: '', // 引导语1
+        title: '' // 引导语2
+      }
+    }
+    return {
+      form: defaultForm(),
+      loadImgLoading: false,
+      fileList: [],
+      rules: {
+        fileUrl: [{ required: true, message: '请导入数据文件', trigger: 'blur' }],
+        month: [{ required: true, message: '请选择报表数据月份', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入报表名称', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    getToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  created() {
+    if (this.$route.query.type === 'edit') {
+      this.getShopPopUp({ shopId: this.$route.query.shopId })
+    }
+  },
+  methods: {
+    // 获取供应商弹窗详情
+    async getShopPopUp(params) {
+      try {
+        const res = await getShopPopUp(params)
+        this.form = { ...this.form, ...res.data }
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否提交保存信息', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            console.log('form', this.form)
+            this.saveShopPopUp(this.form)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    async saveShopPopUp(params) {
+      // 保存
+      await saveShopPopUp(params)
+      this.$message.success('保存成功')
+      setTimeout(() => {
+        this.$router.push({ path: '/user/customer/list' })
+      }, 1000)
+    },
+    // 文件上传成功
+    handleUploadSuccess(response, file, fileList) {
+      this.importForm.fileUrl = response.url
+      this.fileList = fileList
+    },
+
+    // 上传文件删除
+    handleUploadRemove(file, fileList) {
+      this.fileList = fileList
+    },
+
+    handleUploadChange(file, fileList) {
+      this.fileList = fileList
+      this.importForm.fileUrl = file.name
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({ path: '/user/customer/list' })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.form-tips {
+  width: 100%;
+  height: 48px;
+  line-height: 48px;
+  background: #f7f7f7;
+  font-size: 12px;
+  color: #333333;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  margin-bottom: 40px;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 30px;
+  color: #999999;
+}
+.el-form-item__label {
+  text-align: right !important;
+}
+.el-upload__tip {
+  line-height: 20px;
+  color: red;
+  text-align: left;
+  position: absolute;
+  right: -50%;
+  bottom: 0;
+}
+.span_tip {
+  font-size: 12px;
+  color: red;
+  margin-left: 5px;
+}
+.filter-item-temp {
+  width: 100px;
+}
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 160px;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
+</style>

src/views/user/customer/market-list.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.shopName"
+          placeholder="供应商名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="shopDialogVisible = true"> 添加供应商 </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="660">
+      <el-table-column prop="shopName" fixed label="供应商名称" align="center" />
+      <el-table-column prop="linkMan" label="联系人" align="center" />
+      <el-table-column prop="mobile" label="手机号" align="center">
+        <template slot-scope="{ row }">
+          {{ row.mobile ? row.mobile : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="shopStatus" label="供应商状态" align="center" width="100">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.shopStatus === 90" type="success" size="small">已上线</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="logo" align="center" width="180">
+        <template slot-scope="{ row }">
+          <el-popover placement="top-start" title="" width="180" trigger="hover">
+            <img :src="row.productImage" alt="" style="width: 150px; height: 150px" />
+            <img slot="reference" :src="row.productImage" alt="" style="width: 80px; height: 80px" />
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column prop="addTime" label="最近报表时间" align="center">
+        <template slot-scope="{ row }">
+          {{ row.addTime ? row.addTime : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="addTime" label="添加时间" align="center">
+        <template slot-scope="{ row }">
+          {{ row.addTime ? row.addTime : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="400">
+        <template slot-scope="{ row }">
+          <el-button type="success" size="mini" style="margin: 4px" @click="handleRecordDetail(1, row)">
+            上传LOGO
+          </el-button>
+          <el-button type="primary" size="mini" style="margin: 4px" @click="handleRecordDetail(2, row)">
+            数据报表
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[100]"
+      :page-size="100"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getCustomerShopList"
+    />
+    <!--  选择供应商弹窗 -->
+    <shop-dialog v-if="shopDialogVisible" ref="shopDialog" @confirm="handleAddShopConfirm" @cancel="handleCancel" />
+    <!-- 设置统计状态 -->
+    <el-dialog title="设置统计状态" :visible.sync="dialogFormVisible" width="500px">
+      <el-form ref="dataForm" :model="renewCustome" :rules="rules" label-position="right">
+        <el-form-item prop="image" label="logo">
+          <div class="form-el-upload" style="width: 148px; height: 148px">
+            <el-upload
+              class="avatar-uploader"
+              :action="actionUrl"
+              :headers="getToken"
+              :show-file-list="false"
+              :on-success="handleSuccess"
+              :before-upload="beforeUpload"
+            >
+              <div v-loading="loadImgLoading" class="avatar" style="width: 148px; height: 148px; display: block">
+                <img
+                  v-if="renewCustome.image"
+                  :src="renewCustome.image"
+                  style="width: 148px; height: 148px; display: block"
+                  @error="reloadImage"
+                  @load="loadSucess"
+                />
+                <i
+                  v-else
+                  class="el-icon-plus avatar-uploader-icon"
+                  style="width: 148px; height: 148px; line-height: 148px"
+                ></i>
+              </div>
+            </el-upload>
+            <p class="uploader-tips">注：请尽量上传126*50(px)尺寸的图片。</p>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getCustomerShopList, saveCustomerShop, renewCustomerShop } from '@/api/user/customer/customer'
+import ShopDialog from './components/shop-dialog'
+export default {
+  name: 'RecordList',
+  components: { ShopDialog },
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      listQuery: {
+        shopName: '',
+        status: '',
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      shopDialogVisible: false,
+      dialogFormVisible: false,
+      renewCustome: {
+        id: '',
+        image: ''
+      },
+      rules: {
+        image: [{ required: true, message: '请上传弹窗图片', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    etToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取行为记录列表
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.getCustomerShopList()
+    },
+    // 确认选择供应商
+    handleAddShopConfirm(data) {
+      console.log('data', data)
+      const shopIds = []
+      data.forEach((ele) => {
+        shopIds.push(ele.shopId)
+      })
+      this.saveCustomerShop({ shopIds: shopIds.join(',') })
+    },
+    // 取消选择供应商
+    handleCancel() {
+      this.shopDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 确认设置统计状态
+    handleConfirm() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.renewCustomerShop(this.renewCustome)
+        } else {
+          return false
+        }
+      })
+    },
+    // 获取潜客搜集供应商列表
+    async getCustomerShopList() {
+      try {
+        this.isLoading = true
+        const res = await getCustomerShopList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存添加统计供应商
+    async saveCustomerShop(params) {
+      try {
+        await saveCustomerShop(params)
+        this.shopDialogVisible = false
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 统计状态
+    async renewCustomerShop(params) {
+      try {
+        await renewCustomerShop(params)
+        this.dialogFormVisible = false
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 查看详情
+    handleRecordDetail(type, row) {
+      switch (type) {
+        case 1: // 潜客统计列表
+          this.renewCustome.id = row.id
+          this.renewCustome.status = row.status
+          console.log('renewCustome', this.renewCustome)
+          this.dialogFormVisible = true
+          break
+        case 2: // 相关文章
+          this.$router.push({
+            path: '/user/customer/market-report-list',
+            query: { shopId: row.shopId, shopName: row.shopName }
+          })
+          break
+      }
+    },
+    // 上传图标事件
+    handleSuccess(res, file) {
+      this.loadImgLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.image = res.data
+        }, 1000 * 2)
+      })
+    },
+    // 对上传图片的大小、格式进行限制
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
+      if (!isLt5M) {
+        this.$message.error('请上传5MB以内的图片!')
+      }
+      return (isJPG || isJPG2 || isPNG) && isLt5M
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadSucess() {
+      this.loadImgLoading = false
+    }
+  }
+}
+</script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 160px;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
+</style>

src/views/user/customer/market-report-list.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>报表名称:</span>
+        <el-input
+          v-model="listQuery.consultName"
+          placeholder="姓名"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="handleUpdate('add')"> 上传报表 </el-button>
+        <el-button type="primary" @click="handleDownloadTemp"> 下载模板 </el-button>
+      </div>
+    </div>
+    <div class="tags-sms">
+      <span class="tags-sms-span">供应商：{{ shopName }}</span>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="600">
+      <el-table-column label="序号" align="center" width="60">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column prop="time" label="报表数据日期" align="center" width="200" />
+      <el-table-column prop="title" label="报表名称" align="center" />
+      <el-table-column prop="endTime" label="添加时间" align="center" width="200">
+        <template slot-scope="{ row }">
+          {{ row.endTime ? row.endTime : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleUpdate('edit', row)"> 编辑</el-button>
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleSitting(row)">生成报表</el-button>
+          <el-button type="success" size="mini" style="margin: 2px" @click="handlePreview(row)">预览</el-button>
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDeleteTag(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[100]"
+      :page-size="100"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getCmInformationList"
+    />
+  </div>
+</template>
+
+<script>
+import { getCmInformationList, renewFollowUpStatus } from '@/api/user/customer/customer'
+import { downloadWithUrl } from '@/utils'
+import { getServiceList } from '@/api/library/keyword'
+export default {
+  name: 'CustomerStatList',
+  filters: {},
+  data() {
+    return {
+      shopName: this.$route.query.shopName,
+      isLoading: true,
+      time: '',
+      listQuery: {
+        shopId: this.$route.query.shopId,
+        consultName: '',
+        consultMobile: '',
+        pageNum: 1,
+        pageSize: 100
+      },
+      list: [
+        {
+          time: '2023-11',
+          title: '超清秀11月报表',
+          endTime: '2023-12-18 09:55:51'
+        },
+        {
+          time: '2023-10',
+          title: '超清秀10月报表',
+          endTime: '2023-12-18 09:55:51'
+        },
+        {
+          time: '2023-08',
+          title: '超清秀09月报表',
+          endTime: '2023-12-18 09:55:51'
+        }
+      ],
+      total: 0,
+      dialogFormVisible: false,
+      sellerList: [],
+      renewCustome: {
+        id: '',
+        serviceProviderId: '',
+        followUpStatus: ''
+      },
+      rules: {
+        followUpStatus: [{ required: true, message: '请设置跟进状态', trigger: 'blur' }],
+        serviceProviderId: [{ required: true, message: '请选择跟进人员', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {},
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取潜客统计列表
+    async getList() {
+      // this.list = []
+      this.listQuery.pageNum = 1
+      this.getCmInformationList()
+    },
+    // 获取潜客统计列表
+    async getCmInformationList() {
+      try {
+        this.isLoading = true
+        const res = await getCmInformationList(this.listQuery)
+        // this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 确认设置跟进状态
+    handleConfirm() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.renewFollowUpStatus(this.renewCustome)
+        } else {
+          return false
+        }
+      })
+    },
+    // 设置状态
+    handleSitting(row) {
+      this.renewCustome.id = row.id
+      this.renewCustome.followUpStatus = row.followUpStatus
+      this.getServiceList()
+      this.dialogFormVisible = true
+    },
+    // 调用跟进状态API
+    async renewFollowUpStatus(params) {
+      try {
+        await renewFollowUpStatus(params)
+        this.dialogFormVisible = false
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 获取协销列表选项
+    async getServiceList() {
+      try {
+        const res = await getServiceList()
+        this.sellerList = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 删除报表
+    async handleDeleteTag(row) {
+      try {
+        await this.$confirm('确定删除该报表数据吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        // this.deleteReport(row)
+      } catch (error) {
+        this.$message.info('已取消删除操作')
+      }
+    },
+    // 下载数据报表模板
+    handleDownloadTemp() {
+      downloadWithUrl('/temp/market-import.xlsx', '供应商数据报表.xlsx')
+    },
+    // 跳转预览
+    handlePreview(row) {
+      console.log('row', row)
+      const urls = `${process.env.VUE_APP_CAIMEI_URL}/supplier/charts.html?shopId=${1634}&mouth=11`
+      window.open(urls, '_blank')
+    },
+    // 添加/编辑
+    handleUpdate(type, row) {
+      if (type === 'add') {
+        this.$router.push({
+          path: '/user/customer/market-edit',
+          query: { type: type }
+        })
+      } else {
+        this.$router.push({
+          path: '/user/customer/market-edit',
+          query: { type: type, id: row.id }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.tags-sms {
+  width: 100%;
+  height: auto;
+  font-size: 16px;
+  color: #333333;
+  line-height: 28px;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>