|
@@ -48,43 +48,31 @@
|
|
|
<div class="bg-white w-full h-full p-3 shadow-md rounded-md flex flex-col">
|
|
|
<div class="flex justify-end pb-3">
|
|
|
<el-button type="primary" @click="showVisible('newBusinessisible')">新建商机</el-button>
|
|
|
- <el-button type="primary">批量转移</el-button>
|
|
|
- <el-button type="primary">批量删除</el-button>
|
|
|
- <el-button type="primary">阶段设置</el-button>
|
|
|
- <el-button type="primary">回收站</el-button>
|
|
|
- <el-button type="primary">导入</el-button>
|
|
|
- <el-button type="primary">导出</el-button>
|
|
|
+ <el-button type="primary" @click="showVisible('batchTransferVisible')"
|
|
|
+ :disabled="batchTableData.length <= 0">批量转移</el-button>
|
|
|
+ <el-button type="primary" @click="batchDeteleItem()" :disabled="batchTableData.length <= 0">批量删除</el-button>
|
|
|
+ <el-button type="primary" @click="showVisible('stageSetVisible')">阶段设置</el-button>
|
|
|
+ <el-button type="primary" @click="showVisible('deteleBusinessVisible')">回收站</el-button>
|
|
|
+ <el-button type="primary" @click="showVisible('importVisible')">导入</el-button>
|
|
|
+ <el-button type="primary" @click="exportBusinessTableList()" :loading="allLoading.exoprtLoading">导出</el-button>
|
|
|
</div>
|
|
|
<div class="flex-1 w-full overflow-hidden">
|
|
|
- <el-table ref="clueTableRef" :data="businessTable" border v-loading="allLoading.businessTableLading"
|
|
|
- style="width: 100%;height: 100%;">
|
|
|
+ <el-table ref="businessTableRef" :data="businessTable" border v-loading="allLoading.businessTableLading"
|
|
|
+ @selection-change="changeBatch" style="width: 100%;height: 100%;">
|
|
|
<el-table-column type="selection" width="55" />
|
|
|
- <el-table-column prop="name" label="商机名称" width="180">
|
|
|
+ <el-table-column v-for="(item, index) in tableColumn" :prop="item.prop" :label="item.label" :key="index" :width="item.width">
|
|
|
<template #default="scope">
|
|
|
- <el-button link type="primary" size="large" @click="toBusinessTableDetail(scope.row)">{{
|
|
|
- scope.row.name
|
|
|
- }}</el-button>
|
|
|
+ <el-button link type="primary" size="large" @click="dealWithTableColumn(scope.row, item.eventName)" v-if="item.eventName">{{scope.row[item.prop]}}</el-button>
|
|
|
+ <template v-else>{{scope.row[item.prop]}}</template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
|
|
|
- <el-table-column prop="contactsName" label="联系人" width="180">
|
|
|
- <template #default="scope">
|
|
|
- <el-button link type="primary" size="large">{{
|
|
|
- scope.row.contactsName
|
|
|
- }}</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="amountOfMoney" label="商机金额" width="180"></el-table-column>
|
|
|
- <el-table-column prop="stageValue" label="商机阶段" width="180"></el-table-column>
|
|
|
- <el-table-column prop="expectedTransactionDate" label="预计成交" width="180"></el-table-column>
|
|
|
- <el-table-column prop="inchargerName" label="负责人" width="180"></el-table-column>
|
|
|
- <el-table-column prop="creatorName" label="创建人" width="180"></el-table-column>
|
|
|
- <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
|
|
|
<el-table-column label="操作" fixed="right" width="200">
|
|
|
<template #default="scope">
|
|
|
- <el-button link type="primary" size="large" @click="editShowVisible('newBusinessisible', scope.row)">编辑</el-button>
|
|
|
+ <el-button link type="primary" size="large"
|
|
|
+ @click="editShowVisible('newBusinessisible', scope.row)">编辑</el-button>
|
|
|
<el-button link type="primary" size="large" @click="newTask(scope.row)">新建任务</el-button>
|
|
|
- <el-button link type="danger" size="large">删除</el-button>
|
|
|
+ <el-button link type="danger" size="large"
|
|
|
+ @click="businessDeteleItem(scope.row.id, scope.row.name)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -117,29 +105,82 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
+ <!-- 批量转移 -->
|
|
|
+ <el-dialog v-model="allVisible.batchTransferVisible" width="600" :show-close="false" top="10vh">
|
|
|
+ <template #header="{ close, titleId, titleClass }">
|
|
|
+ <div class="flex justify-between items-center border-b pb-3 dialog-header">
|
|
|
+ <h4 :id="titleId">{{ allText.transferText }}</h4>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" v-loading="allLoading.transferLoading" @click="transferBusiness()">转移</el-button>
|
|
|
+ <el-button @click="allVisible.batchTransferVisible = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="scroll-bar m-6">
|
|
|
+ <div class="flex mb-4">
|
|
|
+ <div class="w-20 flex items-center justify-end pr-4">转移至:</div>
|
|
|
+ <el-select v-model="transferPersonnel" placeholder="请选择" class="flex1">
|
|
|
+ <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="pl-3 text-[#e94a4a]">转移后,将看不到此商机</div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 导入 -->
|
|
|
+ <el-dialog v-model="allVisible.importVisible" width="680" :show-close="false" top="10vh">
|
|
|
+ <template #header="{ close, titleId, titleClass }">
|
|
|
+ <div class="flex justify-between items-center border-b pb-3 dialog-header">
|
|
|
+ <h4 :id="titleId">导入产品</h4>
|
|
|
+ <div class="flex">
|
|
|
+ <el-upload class="upload-demo mr-3" :limit="1" :show-file-list="false" accept=".xlsx" :http-request="importBusiness">
|
|
|
+ <el-button type="primary" :loading="allLoading.importLoading">导入</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-button @click="allVisible.importVisible = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="p-8">
|
|
|
+ <div class="ml-4 mr-4">
|
|
|
+ <div class="flex items-center">1、点击下载 <el-link type="primary" @click="downloadTemplate(MODURL, '商机导入模板.xlsx')">商机导入模板.xlsx</el-link></div>
|
|
|
+ <div class="mt-4">2、填写excel文件、商机名称、商机金额、商机阶段</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
<!-- 新建任务 -->
|
|
|
<TaskModal :visible="allVisible.taskModalVisible" :edit-form="taskModalForm" :save-loading="taskLoading"
|
|
|
- @close="closeVisible('taskModalVisible')" @submit="submitForm" :title="'新建任务'" :disabled-list="['taskType', 'businessOpportunityId']" />
|
|
|
+ @close="closeVisible('taskModalVisible')" @submit="submitForm" :title="'新建任务'"
|
|
|
+ :disabled-list="['taskType', 'businessOpportunityId']" />
|
|
|
+
|
|
|
+ <!-- 回收站 -->
|
|
|
+ <DeteleBusiness :visibles="allVisible.deteleBusinessVisible" @closeVisible="closeVisible" />
|
|
|
+
|
|
|
+ <!-- 阶段设置 -->
|
|
|
+ <StageSetting :visibles="allVisible.stageSetVisible" @closeVisible="closeVisible" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, reactive, onMounted, inject } from "vue";
|
|
|
-import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import type { ElTable, FormInstance, FormRules, UploadRequestOptions } from 'element-plus'
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
-import { GETSYSFILED, MOD, GETPERSONNEL, GETGENERATEFOEM, GETBUSINESSLIST, UPDATEINSET } from './api'
|
|
|
+import { GETSYSFILED, MOD, GETPERSONNEL, GETGENERATEFOEM, GETBUSINESSLIST, UPDATEINSET, BUSINESSDETELE, BATCHTRANSFER, MODURL, tableColumn, BUSIESS_GETSATE } from './api'
|
|
|
import { GETTABLELIST } from '@/pages/product/api'
|
|
|
-import { post, get } from "@/utils/request";
|
|
|
-import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, createTaskFromType, formatDate } from '@/utils/tools'
|
|
|
+import { post, get, uploadFile } from "@/utils/request";
|
|
|
+import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, createTaskFromType, formatDate, confirmAction, downloadTemplate, downloadFile } from '@/utils/tools'
|
|
|
import { createTask } from '@/components/TaskModal/taskFunction'
|
|
|
import { formatDateTime } from '@/utils/times'
|
|
|
import { GenerateForm } from '@zmjs/form-design';
|
|
|
import RelatedProducts from './component/relatedProducts.vue'
|
|
|
import TaskModal from '@/components/TaskModal/index.vue'
|
|
|
+import DeteleBusiness from './component/deteleTables.vue'
|
|
|
+import StageSetting from './component/stageSetting.vue'
|
|
|
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
const globalPopup = inject<GlobalPopup>('globalPopup')
|
|
|
+const businessTableRef = ref<InstanceType<typeof ElTable>>() // 商机table dom
|
|
|
const businessTotalTable = ref(0)
|
|
|
const generateForm = ref<typeof GenerateForm>() // 自定义表单dom
|
|
|
const relatedProductsRef = ref<typeof RelatedProducts>()
|
|
@@ -152,18 +193,28 @@ const allLoading = reactive({
|
|
|
businessTableLading: false,
|
|
|
businessSaveLading: false,
|
|
|
newBusinessSaveLading: false,
|
|
|
+ transferLoading: false,
|
|
|
+ importLoading: false,
|
|
|
+ exoprtLoading: false,
|
|
|
})
|
|
|
const allVisible = reactive({
|
|
|
newBusinessisible: false,
|
|
|
recycleVisible: false,
|
|
|
- taskModalVisible: false
|
|
|
+ taskModalVisible: false,
|
|
|
+ batchTransferVisible: false,
|
|
|
+ deteleBusinessVisible: false,
|
|
|
+ stageSetVisible: false,
|
|
|
+ importVisible: false
|
|
|
})
|
|
|
const allText = reactive({
|
|
|
- newBusinessisibleText: '新建商机'
|
|
|
+ newBusinessisibleText: '新建商机',
|
|
|
+ transferText: '转移商机'
|
|
|
}) // 所有文本
|
|
|
|
|
|
const taskModalForm = ref({}) // 任务弹窗表单
|
|
|
const taskLoading = ref<saveLoadingType>("1");
|
|
|
+const batchTableData = ref([]) // 批量数据
|
|
|
+const transferPersonnel = ref('') // 转移人
|
|
|
|
|
|
const businessOpportunityForm = reactive<businessOpportunityFormType>({
|
|
|
name: '',
|
|
@@ -228,10 +279,79 @@ function submitForm(submitData: any, isClose: boolean) { // 任务提交
|
|
|
const { saveLoading, isClose, message } = err
|
|
|
taskLoading.value = saveLoading
|
|
|
allVisible.taskModalVisible = isClose
|
|
|
- globalPopup?.showSuccess(message)
|
|
|
+ globalPopup?.showError(message)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function transferBusiness() {
|
|
|
+ const ids = batchTableData.value.map((item: any) => item.id).join(',')
|
|
|
+ allLoading.transferLoading = true
|
|
|
+ post(BATCHTRANSFER, { ids, inchargerId: transferPersonnel.value }).then(() => {
|
|
|
+ transferPersonnel.value = ''
|
|
|
+ globalPopup?.showSuccess('转移成功')
|
|
|
+ closeVisible('batchTransferVisible')
|
|
|
+ getBusinessTableList()
|
|
|
+ }).finally(() => {
|
|
|
+ allLoading.transferLoading = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function batchDeteleItem() {
|
|
|
+ const value = batchTableData.value.map((item: any) => item.id).join(',')
|
|
|
+ const label = batchTableData.value.map((item: any) => item.name).join(',')
|
|
|
+ businessDeteleItem(value, label, true)
|
|
|
+}
|
|
|
+
|
|
|
+function businessDeteleItem(value: string | number, label: string, batch: boolean = false) {
|
|
|
+ confirmAction(`确定${batch ? '批量' : ''}删除【${label}】商机吗?`).then(() => {
|
|
|
+ post(BUSINESSDETELE, { ids: value }).then(res => {
|
|
|
+ if (res.code != 'ok') {
|
|
|
+ globalPopup?.showError(res.msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ globalPopup?.showSuccess('删除成功')
|
|
|
+ changeBatch(false)
|
|
|
+ getBusinessTableList()
|
|
|
+ }).catch((err) => {
|
|
|
+ globalPopup?.showError(err.message)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+async function importBusiness(param: UploadRequestOptions) {
|
|
|
+ allLoading.importLoading = true
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('multipartFile', param.file)
|
|
|
+ const res = await uploadFile('接口名称', formData).finally(() => {
|
|
|
+ allLoading.importLoading = false
|
|
|
+ })
|
|
|
+ if (res.code == 'ok') {
|
|
|
+ globalPopup?.showSuccess('导入成功' || '')
|
|
|
+ getBusinessTableList()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ globalPopup?.showError(res.msg || '')
|
|
|
+}
|
|
|
+
|
|
|
+function exportBusinessTableList() {
|
|
|
+ allLoading.exoprtLoading = true
|
|
|
+ let valueForm = getFromValue(businessOpportunityForm)
|
|
|
+ post('接口名称', {...valueForm}).then((res) => {
|
|
|
+ downloadFile(res.data, '商机表导出.xlsx')
|
|
|
+ }).finally(() => {
|
|
|
+ allLoading.exoprtLoading = false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function changeBatch(flag: boolean = true) {
|
|
|
+ if (flag) {
|
|
|
+ batchTableData.value = businessTableRef.value && businessTableRef.value.getSelectionRows()
|
|
|
+ } else {
|
|
|
+ batchTableData.value = []
|
|
|
+ businessTableRef.value && businessTableRef.value.clearSelection()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
function showVisible(type: keyof typeof allVisible) { // 显示弹窗
|
|
|
allVisible[type] = true
|
|
|
}
|
|
@@ -246,6 +366,7 @@ function handleClose(done: () => void) {
|
|
|
|
|
|
function getBusinessTableList() {
|
|
|
const formValue = getFromValue(businessOpportunityForm)
|
|
|
+ allLoading.businessTableLading = true
|
|
|
post(GETBUSINESSLIST, { ...formValue }).then((res) => {
|
|
|
const { data, total } = res.data
|
|
|
businessTable.value = data.map((item: any) => {
|
|
@@ -255,6 +376,8 @@ function getBusinessTableList() {
|
|
|
}
|
|
|
})
|
|
|
businessTotalTable.value = total
|
|
|
+ }).finally(() => {
|
|
|
+ allLoading.businessTableLading = false
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -271,15 +394,21 @@ function resetForm() {
|
|
|
}
|
|
|
|
|
|
async function getSystemField() {
|
|
|
- const systemField = getAllListByCode(['商机阶段'])
|
|
|
- for (let i in systemField) {
|
|
|
- const { data } = await get(`${GETSYSFILED}?code=${systemField[i]}`)
|
|
|
- for (let key of Object.keys(fixedData)) {
|
|
|
- if (systemField[i] == key) {
|
|
|
- Object.assign(fixedData, { [key]: data })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // const systemField = getAllListByCode(['商机阶段'])
|
|
|
+ // for (let i in systemField) {
|
|
|
+ // const { data } = await get(`${GETSYSFILED}?code=${systemField[i]}`)
|
|
|
+ // for (let key of Object.keys(fixedData)) {
|
|
|
+ // if (systemField[i] == key) {
|
|
|
+ // Object.assign(fixedData, { [key]: data })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ const row = await post(BUSIESS_GETSATE, {})
|
|
|
+ fixedData.BusinessStage = (row.data || []).map((item: any) => {
|
|
|
+ const { name, id, seq } = item
|
|
|
+ return { name, id, seq }
|
|
|
+ }).sort(function (a: any, b: any) {return a.seq - b.seq;});
|
|
|
|
|
|
const { data } = await post(GETPERSONNEL, {})
|
|
|
fixedData.Personnel = data.map((item: any) => {
|
|
@@ -294,13 +423,18 @@ async function getSystemField() {
|
|
|
}
|
|
|
|
|
|
function toBusinessTableDetail(row: any) {
|
|
|
- console.log('点击跳转详情')
|
|
|
router.push({
|
|
|
path: `${MOD}/detail`,
|
|
|
query: { id: row.id }
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function dealWithTableColumn(row: any, eventName: string) {
|
|
|
+ if(eventName == 'toClueTableDetail') {
|
|
|
+ toBusinessTableDetail(row)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
function getProductTableList() {
|
|
|
post(GETTABLELIST, { pageIndex: -1, pageSize: -1 }).then((res) => {
|
|
|
if (res.code == 'ok') {
|