index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. <template>
  2. <div class="h-full flex">
  3. <div class="p-5 w-80 pr-0">
  4. <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
  5. <div class="flex-1 p-3 overflow-y-auto">
  6. <el-form :model="businessOpportunityForm" label-width="70px" style="max-width: 600px">
  7. <el-form-item label="商机名称">
  8. <el-input v-model="businessOpportunityForm.name" clearable placeholder="请输入"></el-input>
  9. </el-form-item>
  10. <el-form-item label="商机阶段">
  11. <el-select v-model="businessOpportunityForm.stageId" placeholder="请选择">
  12. <el-option v-for="item in fixedData.BusinessStage" :key="item.id" :label="item.name" :value="item.id" />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="客户名称">
  16. <el-input v-model="businessOpportunityForm.customerName" clearable placeholder="请输入"></el-input>
  17. </el-form-item>
  18. <el-form-item label="联系人">
  19. <el-input v-model="businessOpportunityForm.contactPerson" clearable placeholder="请输入"></el-input>
  20. </el-form-item>
  21. <el-form-item label="产品">
  22. <el-select v-model="businessOpportunityForm.product" placeholder="请选择">
  23. <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="负责人">
  27. <el-select v-model="businessOpportunityForm.inchargerId" placeholder="请选择">
  28. <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item label="创建时间">
  32. <el-date-picker v-model="businessOpportunityForm.startTime" type="date" placeholder="请选择" :clearable="false"
  33. format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
  34. </el-form-item>
  35. <el-form-item label="">
  36. <el-date-picker v-model="businessOpportunityForm.endTime" type="date" placeholder="请选择" :clearable="false"
  37. format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
  38. </el-form-item>
  39. </el-form>
  40. </div>
  41. <div class="w-full flex p-3 shadow-[0_-3px_5px_0px_rgba(0,0,0,0.2)]">
  42. <El-button class="w-full" @click="resetForm()">重置</El-Button>
  43. <El-button type="primary" class="w-full" @click="getBusinessTableList()">搜索</El-Button>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="flex-1 p-5 overflow-auto">
  48. <div class="bg-white w-full h-full p-3 shadow-md rounded-md flex flex-col">
  49. <div class="flex justify-end pb-3">
  50. <el-button v-permission="['businessAddAnEdit']" type="primary" @click="editNewBusiness(false)">新建商机</el-button>
  51. <el-button type="primary" @click="showVisible('batchTransferVisible')"
  52. :disabled="batchTableData.length <= 0">批量转移</el-button>
  53. <el-button type="primary" @click="batchDeteleItem()" :disabled="batchTableData.length <= 0">批量删除</el-button>
  54. <el-button type="primary" @click="showVisible('stageSetVisible')">阶段设置</el-button>
  55. <el-button type="primary" @click="showVisible('deteleBusinessVisible')">回收站</el-button>
  56. <el-button v-permission="['businessImport']" type="primary" @click="showVisible('importVisible')">导入</el-button>
  57. <el-button v-permission="['businessExport']" type="primary" @click="exportBusinessTableList()" :loading="allLoading.exoprtLoading">导出</el-button>
  58. </div>
  59. <div class="flex-1 w-full overflow-hidden">
  60. <el-table ref="businessTableRef" :data="businessTable" border v-loading="allLoading.businessTableLading"
  61. @selection-change="changeBatch" style="width: 100%;height: 100%;">
  62. <el-table-column type="selection" width="55" />
  63. <el-table-column v-for="(item, index) in tableColumn" :prop="item.prop" :label="item.label" :key="index"
  64. :width="item.width">
  65. <template #default="scope">
  66. <el-button link type="primary" size="large" @click="dealWithTableColumn(scope.row, item.eventName)"
  67. v-if="item.eventName">{{ scope.row[item.prop] }}</el-button>
  68. <template v-else>{{ scope.row[item.prop] }}</template>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="操作" fixed="right" width="200">
  72. <template #default="scope">
  73. <el-button link type="primary" size="large" @click="editNewBusiness(scope.row)" v-permission="['businessAddAnEdit']">编辑</el-button>
  74. <el-button link type="primary" size="large" @click="newTask(scope.row)" v-permission="['tasksAdd']">新建任务</el-button>
  75. <el-button link type="danger" size="large"
  76. @click="businessDeteleItem(scope.row.id, scope.row.name)" v-permission="['businessAddAnEdit']">删除</el-button>
  77. </template>
  78. </el-table-column>
  79. </el-table>
  80. </div>
  81. <div class="flex justify-end pt-3">
  82. <el-pagination layout="total, prev, pager, next, sizes" :total="businessTotalTable"
  83. :hide-on-single-page="true" />
  84. </div>
  85. </div>
  86. </div>
  87. <!-- 弹窗 -->
  88. <el-dialog v-model="allVisible.newBusinessisible" width="1000" :show-close="false" top="10vh"
  89. :before-close="handleClose">
  90. <template #header="{ close, titleId, titleClass }">
  91. <div class="flex justify-between items-center border-b pb-3 dialog-header">
  92. <h4 :id="titleId">{{ allText.newBusinessisibleText }}</h4>
  93. <div>
  94. <el-button type="primary" :loading="allLoading.newBusinessSaveLading"
  95. :disabled="allLoading.businessSaveLading" @click="editBusiness(true)">保存并新建</el-button>
  96. <el-button type="primary" @click="editBusiness(false)" :loading="allLoading.businessSaveLading"
  97. :disabled="allLoading.newBusinessSaveLading">保存</el-button>
  98. <el-button @click="closeVisible('newBusinessisible')">取消</el-button>
  99. </div>
  100. </div>
  101. </template>
  102. <div class="h-[60vh] overflow-y-auto scroll-bar pt-3" v-loading="allLoading.generateFormLading">
  103. <GenerateForm ref="businessTemplateRef" :data="businessTemplate" :value="businessTemplateValue"
  104. :key="businessTemplateKey" />
  105. <div>相关产品</div>
  106. <RelatedProducts ref="relatedProductsRef" :productTableList="productTableList"
  107. :productTableListValue="productTableListValue" />
  108. </div>
  109. </el-dialog>
  110. <!-- 批量转移 -->
  111. <el-dialog v-model="allVisible.batchTransferVisible" width="600" :show-close="false" top="10vh">
  112. <template #header="{ close, titleId, titleClass }">
  113. <div class="flex justify-between items-center border-b pb-3 dialog-header">
  114. <h4 :id="titleId">{{ allText.transferText }}</h4>
  115. <div>
  116. <el-button type="primary" v-loading="allLoading.transferLoading" @click="transferBusiness()">转移</el-button>
  117. <el-button @click="allVisible.batchTransferVisible = false">取消</el-button>
  118. </div>
  119. </div>
  120. </template>
  121. <div class="scroll-bar m-6">
  122. <div class="flex mb-4">
  123. <div class="w-20 flex items-center justify-end pr-4">转移至:</div>
  124. <el-select v-model="transferPersonnel" placeholder="请选择" class="flex1">
  125. <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
  126. </el-select>
  127. </div>
  128. <div class="pl-3 text-[#e94a4a]">转移后,将看不到此商机</div>
  129. </div>
  130. </el-dialog>
  131. <!-- 导入 -->
  132. <el-dialog v-model="allVisible.importVisible" width="680" :show-close="false" top="10vh">
  133. <template #header="{ close, titleId, titleClass }">
  134. <div class="flex justify-between items-center border-b pb-3 dialog-header">
  135. <h4 :id="titleId">导入产品</h4>
  136. <div class="flex">
  137. <el-upload class="upload-demo mr-3" :limit="1" :show-file-list="false" accept=".xlsx"
  138. :http-request="importBusiness">
  139. <el-button type="primary" :loading="allLoading.importLoading">导入</el-button>
  140. </el-upload>
  141. <el-button @click="allVisible.importVisible = false">取消</el-button>
  142. </div>
  143. </div>
  144. </template>
  145. <div class="p-8">
  146. <div class="ml-4 mr-4">
  147. <div class="flex items-center">1、点击下载 <el-link type="primary"
  148. @click="downloadTemplate(MODURL, '商机导入模板.xlsx')">商机导入模板.xlsx</el-link></div>
  149. <div class="mt-4">2、填写excel文件、商机名称、商机金额、商机阶段必填</div>
  150. </div>
  151. </div>
  152. </el-dialog>
  153. <!-- 新建任务 -->
  154. <TaskModal :visible="allVisible.taskModalVisible" :edit-form="taskModalForm" :save-loading="taskLoading"
  155. @close="closeVisible('taskModalVisible')" @submit="submitForm" :title="'新建任务'"
  156. :disabled-list="['taskType', 'businessOpportunityId']" />
  157. <!-- 回收站 -->
  158. <DeteleBusiness :visibles="allVisible.deteleBusinessVisible" @closeVisible="closeVisible" />
  159. <!-- 阶段设置 -->
  160. <StageSetting :visibles="allVisible.stageSetVisible" @closeVisible="closeVisible" />
  161. </div>
  162. </template>
  163. <script lang="ts" setup>
  164. import { ref, reactive, onMounted, inject } from "vue";
  165. import type { ElTable, FormInstance, FormRules, UploadRequestOptions } from 'element-plus'
  166. import { useRouter, useRoute } from "vue-router";
  167. import { GETSYSFILED, MOD, GETPERSONNEL, GETGENERATEFOEM, GETBUSINESSLIST, UPDATEINSET, BUSINESSDETELE, BATCHTRANSFER, MODURL, tableColumn, BUSIESS_GETSATE, URL_IMPOERBUSINESS, BUSIESS_INFO, URL_EXPORTBUSINESS } from './api'
  168. import { GETTABLELIST } from '@/pages/product/api'
  169. import { post, get, uploadFile } from "@/utils/request";
  170. import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, createTaskFromType, formatDate, confirmAction, downloadTemplate, downloadFile } from '@/utils/tools'
  171. import { createTask } from '@/components/TaskModal/taskFunction'
  172. import { formatDateTime } from '@/utils/times'
  173. import { GenerateForm } from '@zmjs/form-design';
  174. import RelatedProducts from '@/components/relatedProducts/relatedProducts.vue'
  175. import TaskModal from '@/components/TaskModal/index.vue'
  176. import DeteleBusiness from './component/deteleTables.vue'
  177. import StageSetting from './component/stageSetting.vue'
  178. const route = useRoute()
  179. const router = useRouter()
  180. const globalPopup = inject<GlobalPopup>('globalPopup')
  181. const businessTableRef = ref<InstanceType<typeof ElTable>>() // 商机table dom
  182. const businessTotalTable = ref(0)
  183. const businessTemplateRef = ref<typeof GenerateForm>() // 自定义表单dom
  184. const relatedProductsRef = ref<typeof RelatedProducts>()
  185. const businessTemplateValue = ref({})
  186. const businessTemplateKey = ref(1)
  187. const businessTemplate = ref({
  188. config: {},
  189. list: []
  190. }) // 自定义表单数据
  191. const businessTable = ref([])
  192. const allLoading = reactive({
  193. businessTableLading: false,
  194. businessSaveLading: false,
  195. newBusinessSaveLading: false,
  196. transferLoading: false,
  197. importLoading: false,
  198. exoprtLoading: false,
  199. generateFormLading: false
  200. })
  201. const allVisible = reactive({
  202. newBusinessisible: false,
  203. recycleVisible: false,
  204. taskModalVisible: false,
  205. batchTransferVisible: false,
  206. deteleBusinessVisible: false,
  207. stageSetVisible: false,
  208. importVisible: false
  209. })
  210. const allText = reactive({
  211. newBusinessisibleText: '新建商机',
  212. transferText: '转移商机'
  213. }) // 所有文本
  214. const taskModalForm = ref({}) // 任务弹窗表单
  215. const taskLoading = ref<saveLoadingType>("1");
  216. const batchTableData = ref([]) // 批量数据
  217. const transferPersonnel = ref('') // 转移人
  218. const businessOpportunityForm = reactive<businessOpportunityFormType>({
  219. name: '',
  220. stageId: '',
  221. customerName: '',
  222. contactPerson: '',
  223. product: '',
  224. inchargerId: '',
  225. startTime: getFirstDayOfMonth(new Date()),
  226. endTime: formatDate(new Date()),
  227. pageIndex: 1,
  228. pageFrom: 10
  229. })
  230. const fixedData = reactive({
  231. BusinessStage: [] as fixedDataInterface[],
  232. Personnel: [] as personnelInterface[]
  233. })
  234. const productTableList = ref([])
  235. const productTableListValue = ref([])
  236. function editBusiness(visibles: boolean) {
  237. businessTemplateRef.value?.getData().then((res: any) => {
  238. let productTableListData = relatedProductsRef?.value?.returnData() || []
  239. productTableListData.forEach((item: any) => {
  240. delete item.id
  241. })
  242. let newForm = {
  243. ...res,
  244. expectedTransactionDate: res.expectedTransactionDate ? formatDateTime(new Date(res.expectedTransactionDate)) : '',
  245. businessItemProductList: productTableListData ? JSON.stringify(productTableListData) : []
  246. }
  247. allLoading.businessSaveLading = true
  248. post(UPDATEINSET, { ...businessTemplateValue.value, ...newForm }).then((_res) => {
  249. allVisible.newBusinessisible = visibles
  250. globalPopup?.showSuccess('保存成功')
  251. getBusinessTableList()
  252. }).finally(() => {
  253. allLoading.businessSaveLading = false
  254. })
  255. }).catch((_err: any) => {
  256. console.log(_err)
  257. globalPopup?.showError('请填写完整')
  258. })
  259. }
  260. function editNewBusiness(item: any) {
  261. console.log(item, '选择数据')
  262. showVisible('newBusinessisible')
  263. allLoading.generateFormLading = true
  264. if (item) {
  265. editProduct(item)
  266. businessTemplateValue.value = item
  267. allText.newBusinessisibleText = '编辑商机'
  268. }
  269. if (!item) {
  270. businessTemplateValue.value = {}
  271. productTableListValue.value = []
  272. allText.newBusinessisibleText = '新建商机'
  273. }
  274. setTimeout(() => {
  275. businessTemplateRef.value && businessTemplateRef.value.reset()
  276. businessTemplateKey.value++
  277. allLoading.generateFormLading = false
  278. }, 500)
  279. }
  280. function newTask(item: any) {
  281. const { id } = item
  282. taskModalForm.value = { ...createTaskFromType(1), businessOpportunityId: id, }
  283. showVisible('taskModalVisible')
  284. }
  285. function submitForm(submitData: any, isClose: boolean) { // 任务提交
  286. taskLoading.value = '2'
  287. createTask(submitData, isClose).then((res) => {
  288. const { saveLoading, isClose } = res
  289. taskLoading.value = saveLoading
  290. allVisible.taskModalVisible = isClose
  291. globalPopup?.showSuccess('新增成功')
  292. }).catch((err) => {
  293. const { saveLoading, isClose, message } = err
  294. taskLoading.value = saveLoading
  295. allVisible.taskModalVisible = isClose
  296. globalPopup?.showError(message)
  297. })
  298. }
  299. function transferBusiness() {
  300. const ids = batchTableData.value.map((item: any) => item.id).join(',')
  301. allLoading.transferLoading = true
  302. post(BATCHTRANSFER, { ids, inchargerId: transferPersonnel.value }).then(() => {
  303. transferPersonnel.value = ''
  304. globalPopup?.showSuccess('转移成功')
  305. closeVisible('batchTransferVisible')
  306. getBusinessTableList()
  307. }).finally(() => {
  308. allLoading.transferLoading = false
  309. })
  310. }
  311. function batchDeteleItem() {
  312. const value = batchTableData.value.map((item: any) => item.id).join(',')
  313. const label = batchTableData.value.map((item: any) => item.name).join(',')
  314. businessDeteleItem(value, label, true)
  315. }
  316. function businessDeteleItem(value: string | number, label: string, batch: boolean = false) {
  317. confirmAction(`确定${batch ? '批量' : ''}删除【${label}】商机吗?`).then(() => {
  318. post(BUSINESSDETELE, { ids: value }).then(res => {
  319. if (res.code != 'ok') {
  320. globalPopup?.showError(res.msg)
  321. return
  322. }
  323. globalPopup?.showSuccess('删除成功')
  324. changeBatch(false)
  325. getBusinessTableList()
  326. }).catch((err) => {
  327. globalPopup?.showError(err.message)
  328. })
  329. })
  330. }
  331. async function importBusiness(param: UploadRequestOptions) {
  332. allLoading.importLoading = true
  333. const formData = new FormData();
  334. formData.append('multipartFile', param.file)
  335. const res = await uploadFile(URL_IMPOERBUSINESS, formData).finally(() => {
  336. allLoading.importLoading = false
  337. })
  338. if (res.code == 'ok') {
  339. globalPopup?.showSuccess('导入成功' || '')
  340. getBusinessTableList()
  341. return
  342. }
  343. globalPopup?.showError(res.msg || '')
  344. }
  345. function exportBusinessTableList() {
  346. allLoading.exoprtLoading = true
  347. let valueForm = getFromValue(businessOpportunityForm)
  348. post(URL_EXPORTBUSINESS, { ...valueForm }).then((res) => {
  349. downloadFile(res.data, '商机表导出.xlsx')
  350. }).finally(() => {
  351. allLoading.exoprtLoading = false
  352. })
  353. }
  354. function changeBatch(flag: boolean = true) {
  355. if (flag) {
  356. batchTableData.value = businessTableRef.value && businessTableRef.value.getSelectionRows()
  357. } else {
  358. batchTableData.value = []
  359. businessTableRef.value && businessTableRef.value.clearSelection()
  360. }
  361. }
  362. function editProduct(row: any) {
  363. post(BUSIESS_INFO, { id: row.id }).then(({ data }) => {
  364. const list = (data.businessItemProducts || []).map((item: any) => {
  365. const { id, productName, productId, productCode, unit, unitName, typeName, type, price, inventory, orderProductDetail, num, discount, sealPrice, totalPrice, quantity } = item
  366. return {
  367. id, productId: productId, productName, productCode, unit, unitName, typeName, type, price, inventory,
  368. num, discount, sealPrice, totalPrice, quantity
  369. }
  370. })
  371. productTableListValue.value = list
  372. })
  373. }
  374. function showVisible(type: keyof typeof allVisible) { // 显示弹窗
  375. allVisible[type] = true
  376. }
  377. function closeVisible(type: keyof typeof allVisible) {
  378. allVisible[type] = false
  379. }
  380. function handleClose(done: () => void) {
  381. done()
  382. }
  383. function getBusinessTableList() {
  384. const formValue = getFromValue(businessOpportunityForm)
  385. allLoading.businessTableLading = true
  386. post(GETBUSINESSLIST, { ...formValue }).then((res) => {
  387. const { data, total } = res.data
  388. businessTable.value = data.map((item: any) => {
  389. return {
  390. ...item,
  391. expectedTransactionDate: formatDate(new Date(item.expectedTransactionDate))
  392. }
  393. })
  394. businessTotalTable.value = total
  395. }).finally(() => {
  396. allLoading.businessTableLading = false
  397. })
  398. }
  399. function resetForm() {
  400. let reset = {
  401. startTime: getFirstDayOfMonth(new Date()),
  402. endTime: formatDate(new Date()),
  403. pageIndex: 1,
  404. pageFrom: 10
  405. }
  406. let newBusinessOpportunityForm = resetFromValue(businessOpportunityForm, { ...reset })
  407. Object.assign(businessOpportunityForm, newBusinessOpportunityForm)
  408. getBusinessTableList()
  409. }
  410. async function getSystemField() {
  411. // const systemField = getAllListByCode(['商机阶段'])
  412. // for (let i in systemField) {
  413. // const { data } = await get(`${GETSYSFILED}?code=${systemField[i]}`)
  414. // for (let key of Object.keys(fixedData)) {
  415. // if (systemField[i] == key) {
  416. // Object.assign(fixedData, { [key]: data })
  417. // }
  418. // }
  419. // }
  420. const row = await post(BUSIESS_GETSATE, {})
  421. fixedData.BusinessStage = (row.data || []).map((item: any) => {
  422. const { name, id, seq } = item
  423. return { name, id, seq }
  424. }).sort(function (a: any, b: any) { return a.seq - b.seq; });
  425. const { data } = await post(GETPERSONNEL, {})
  426. fixedData.Personnel = data.map((item: any) => {
  427. const { id, name, phone, jobNumber } = item
  428. return {
  429. id, name, phone, jobNumber
  430. }
  431. })
  432. const res = await get(GETGENERATEFOEM)
  433. businessTemplate.value = JSON.parse(res.data[0].config)
  434. }
  435. function toBusinessTableDetail(row: any) {
  436. router.push({
  437. path: `${MOD}/detail`,
  438. query: { id: row.id }
  439. })
  440. }
  441. function dealWithTableColumn(row: any, eventName: string) {
  442. if (eventName == 'toClueTableDetail') {
  443. toBusinessTableDetail(row)
  444. }
  445. }
  446. function getProductTableList() {
  447. post(GETTABLELIST, { pageIndex: -1, pageSize: -1 }).then((res) => {
  448. if (res.code == 'ok') {
  449. const { record, total } = res.data
  450. productTableList.value = record.map((item: any) => {
  451. const { id, productName, productCode, unit, unitName, typeName, type, price, inventory } = item
  452. return {
  453. id,
  454. productId: id,
  455. productName,
  456. productCode,
  457. unit,
  458. unitName,
  459. price,
  460. type,
  461. typeName,
  462. inventory,
  463. quantity: '',
  464. discount: '',
  465. totalPrice: ''
  466. }
  467. })
  468. }
  469. })
  470. }
  471. onMounted(() => {
  472. getSystemField()
  473. getProductTableList()
  474. getBusinessTableList()
  475. })
  476. </script>
  477. <style lang="scss" scoped>
  478. .dialog-header {
  479. h4 {
  480. font-size: 18px;
  481. line-height: 24px;
  482. }
  483. }
  484. </style>