!433 CRM: 修复客户导入、销售漏斗。上传组件的文件列表给拓展一个下载 。

Merge pull request !433 from puhui999/dev-crm

Author: YunaiV

.env.local renamed to .env.local-dev

@@ -6,11 +6,11 @@
   "private": false,
   "scripts": {
     "i": "pnpm install",
-    "dev": "vite --mode local-dev",
-    "dev-server": "vite --mode dev",
+    "local-dev": "vite --mode local-dev",
+    "dev": "vite --mode dev",
     "ts:check": "vue-tsc --noEmit",
     "build:local-dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode local-dev",
-    "build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode local-dev",
+    "build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode dev",
     "build:test": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode test",
     "build:stage": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode stage",
     "build:prod": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode prod",

package.json

@@ -32,6 +32,25 @@
           格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
         </div>
       </template>
+      <template #file="row">
+        <div class="flex items-center">
+          <span>{{ row.file.name }}</span>
+          <div class="ml-10px">
+            <el-link
+              :href="row.file.url"
+              :underline="false"
+              download
+              target="_blank"
+              type="primary"
+            >
+              下载
+            </el-link>
+          </div>
+          <div class="ml-10px">
+            <el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button>
+          </div>
+        </div>
+      </template>
     </el-upload>
   </div>
 </template>

src/components/UploadFile/src/UploadFile.vue

@@ -2,23 +2,24 @@ import * as echarts from 'echarts/core'
 
 import {
   BarChart,
+  FunnelChart,
+  GaugeChart,
   LineChart,
-  PieChart,
   MapChart,
   PictorialBarChart,
-  RadarChart,
-  GaugeChart
+  PieChart,
+  RadarChart
 } from 'echarts/charts'
 
 import {
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  PolarComponent,
   AriaComponent,
-  ParallelComponent,
+  GridComponent,
   LegendComponent,
+  ParallelComponent,
+  PolarComponent,
+  TitleComponent,
   ToolboxComponent,
+  TooltipComponent,
   VisualMapComponent
 } from 'echarts/components'
 
@@ -41,7 +42,8 @@ echarts.use([
   CanvasRenderer,
   PictorialBarChart,
   RadarChart,
-  GaugeChart
+  GaugeChart,
+  FunnelChart
 ])
 
 export default echarts

src/plugins/echarts/index.ts

@@ -1,16 +1,24 @@
 <!-- 客户导入窗口 -->
 <template>
   <Dialog v-model="dialogVisible" title="客户导入" width="400">
+    <div class="flex items-center my-10px">
+      <span class="mr-10px">负责人</span>
+      <el-select v-model="ownerUserId" class="!w-240px" clearable>
+        <el-option
+          v-for="item in userOptions"
+          :key="item.id"
+          :label="item.nickname"
+          :value="item.id"
+        />
+      </el-select>
+    </div>
     <el-upload
       ref="uploadRef"
       v-model:file-list="fileList"
       :auto-upload="false"
       :disabled="formLoading"
-      :headers="uploadHeaders"
       :limit="1"
-      :on-error="submitFormError"
       :on-exceed="handleExceed"
-      :on-success="submitFormSuccess"
       accept=".xlsx, .xls"
       action="none"
       drag
@@ -43,9 +51,10 @@
 </template>
 <script lang="ts" setup>
 import * as CustomerApi from '@/api/crm/customer'
-import { getAccessToken, getTenantId } from '@/utils/auth'
 import download from '@/utils/download'
 import type { UploadUserFile } from 'element-plus'
+import * as UserApi from '@/api/system/user'
+import { useUserStore } from '@/store/modules/user'
 
 defineOptions({ name: 'SystemUserImportForm' })
 
@@ -54,15 +63,18 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
 const uploadRef = ref()
-const uploadHeaders = ref() // 上传 Header 头
 const fileList = ref<UploadUserFile[]>([]) // 文件列表
 const updateSupport = ref(false) // 是否更新已经存在的客户数据
+const ownerUserId = ref<undefined | number>() // 负责人编号
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 
 /** 打开弹窗 */
-const open = () => {
+const open = async () => {
   dialogVisible.value = true
-  fileList.value = []
-  resetForm()
+  await resetForm()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  ownerUserId.value = useUserStore().getUser.id
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -72,17 +84,20 @@ const submitForm = async () => {
     message.error('请上传文件')
     return
   }
-  // 提交请求
-  uploadHeaders.value = {
-    Authorization: 'Bearer ' + getAccessToken(),
-    'tenant-id': getTenantId()
-  }
+
   formLoading.value = true
-  const formData = new FormData()
-  formData.append('updateSupport', updateSupport.value)
-  formData.append('file', fileList.value[0].raw)
-  // TODO @芋艿：后面是不是可以采用这种形式，去掉 uploadHeaders
-  await CustomerApi.handleImport(formData)
+  try {
+    const formData = new FormData()
+    formData.append('updateSupport', String(updateSupport.value))
+    formData.append('file', fileList.value[0].raw as Blob)
+    formData.append('ownerUserId', String(ownerUserId.value))
+    const res = await CustomerApi.handleImport(formData)
+    submitFormSuccess(res)
+  } catch {
+    submitFormError()
+  } finally {
+    formLoading.value = false
+  }
 }
 
 /** 文件上传成功 */
@@ -108,6 +123,8 @@ const submitFormSuccess = (response: any) => {
     text += '< ' + customerName + ': ' + data.failureCustomerNames[customerName] + ' >'
   }
   message.alert(text)
+  formLoading.value = false
+  dialogVisible.value = false
   // 发送操作成功的事件
   emits('success')
 }
@@ -119,9 +136,12 @@ const submitFormError = (): void => {
 }
 
 /** 重置表单 */
-const resetForm = () => {
+const resetForm = async () => {
   // 重置上传状态和文件
-  formLoading.value = false
+  fileList.value = []
+  updateSupport.value = false
+  ownerUserId.value = undefined
+  await nextTick()
   uploadRef.value?.clearFiles()
 }
 

src/views/crm/customer/CustomerImportForm.vue

@@ -79,7 +79,7 @@
           <Icon class="mr-5px" icon="ep:search" />
           搜索
         </el-button>
-        <el-button @click="resetQuery(undefined)">
+        <el-button @click="resetQuery">
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
@@ -113,7 +113,7 @@
       <el-tab-pane label="下属负责的" name="3" />
     </el-tabs>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" label="客户名称" fixed="left" prop="name" width="160">
+      <el-table-column align="center" fixed="left" label="客户名称" prop="name" width="160">
         <template #default="scope">
           <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
             {{ scope.row.name }}
@@ -125,9 +125,9 @@
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
         </template>
       </el-table-column>
-      <el-table-column label="手机" align="center" prop="mobile" width="120" />
-      <el-table-column label="电话" align="center" prop="telephone" width="130" />
-      <el-table-column label="邮箱" align="center" prop="email" width="180" />
+      <el-table-column align="center" label="手机" prop="mobile" width="120" />
+      <el-table-column align="center" label="电话" prop="telephone" width="130" />
+      <el-table-column align="center" label="邮箱" prop="email" width="180" />
       <el-table-column align="center" label="客户级别" prop="level" width="135">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
@@ -164,7 +164,7 @@
         width="180px"
       />
       <el-table-column align="center" label="最后跟进记录" prop="contactLastContent" width="200" />
-      <el-table-column label="地址" align="center" prop="detailAddress" width="180" />
+      <el-table-column align="center" label="地址" prop="detailAddress" width="180" />
       <el-table-column align="center" label="距离进入公海天数" prop="poolDay" width="140">
         <template #default="scope"> {{ scope.row.poolDay }} 天</template>
       </el-table-column>
@@ -254,7 +254,7 @@ const activeName = ref('1') // 列表 tab
 
 /** tab 切换 */
 const handleTabClick = (tab: TabsPaneContext) => {
-  queryParams.sceneType = tab.paneName
+  queryParams.sceneType = tab.paneName as string
   handleQuery()
 }