information.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <div class="information pl-4 pr-4 pt-3 pb-3">
  3. <div class="flex justify-between">
  4. <div class="title">基本信息</div>
  5. <div>
  6. <el-button type="primary" @click="associateContact()" v-if="!information.contactsId">关联联系人</el-button>
  7. <el-button type="primary" @click="claimBusiness()" v-if="!information.inchargerId">认领</el-button>
  8. <el-button type="primary" @click="showVisible('transferBusinessVisible')"
  9. v-if="information.inchargerId">转移</el-button>
  10. <el-button type="primary" v-permission="['businessAddAnEdit']" @click="showVisible('editBusinessVisible')">编辑</el-button>
  11. </div>
  12. </div>
  13. <div class="form flex flex-wrap justify-between">
  14. <div class="formItem flex pt-3 pb-1">
  15. <div class="w-20 text-right text-gray-500">商机名称:</div>
  16. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1" v-ellipsis-tooltip>{{ information.name }}</div>
  17. </div>
  18. <div class="formItem flex pt-3 pb-1">
  19. <div class="w-22 text-right text-gray-500">客户名称:</div>
  20. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1" v-ellipsis-tooltip>{{ information.customerName }}
  21. </div>
  22. </div>
  23. <div class="formItem flex pt-3 pb-1">
  24. <div class="w-22 text-right text-gray-500">联系人:</div>
  25. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1">{{ information.contactsName }}
  26. </div>
  27. </div>
  28. <div class="formItem flex pt-3 pb-1">
  29. <div class="w-22 text-right text-gray-500">商机金额:</div>
  30. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1" v-ellipsis-tooltip>{{ information.amountOfMoney || 0
  31. }} 元</div>
  32. </div>
  33. <div class="formItem flex pt-3 pb-1">
  34. <div class="w-22 text-right text-gray-500">负责人:</div>
  35. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1">{{ information.inchargerName }}</div>
  36. </div>
  37. <div class="formItem flex pt-3 pb-1">
  38. <div class="w-22 text-right text-gray-500">预计成交日期:</div>
  39. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1">{{
  40. information.expectedTransactionDate }}</div>
  41. </div>
  42. <div class="formItem flex pt-3 pb-1">
  43. <div class="w-22 text-right text-gray-500">创建人:</div>
  44. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1">{{ information.creatorName }}</div>
  45. </div>
  46. <div class="formItem flex pt-3 pb-1">
  47. <div class="w-22 text-right text-gray-500">创建时间:</div>
  48. <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap ml-1">{{
  49. information.createTime }}</div>
  50. </div>
  51. <div class="formItem flex pt-3 pb-1" style="width: 100%;">
  52. <div class="w-22 text-right text-gray-500">备注:</div>
  53. <div class="flex-1 ml-1 text " v-ellipsis-tooltip>
  54. {{ information.remark }}
  55. </div>
  56. </div>
  57. </div>
  58. <!-- 编辑弹窗 -->
  59. <el-dialog v-model="allVisible.editBusinessVisible" width="1000" :show-close="false" top="10vh">
  60. <template #header="{ close, titleId, titleClass }">
  61. <div class="flex justify-between items-center border-b pb-3 dialog-header">
  62. <h4 :id="titleId">{{ '编辑产品' }}</h4>
  63. <div>
  64. <el-button type="primary" @click="editBusiness()"
  65. :loading="allLoading.businessSaveLading">保存</el-button>
  66. <el-button @click="closeVisible('editBusinessVisible')">取消</el-button>
  67. </div>
  68. </div>
  69. </template>
  70. <div class="h-[60vh] overflow-y-auto scroll-bar pt-3">
  71. <GenerateForm ref="generateForm" :data="generateFormData" :value="generateFormValue" />
  72. </div>
  73. </el-dialog>
  74. <!-- 转移 -->
  75. <el-dialog v-model="allVisible.transferBusinessVisible" width="600" :show-close="false" top="10vh">
  76. <template #header="{ close, titleId, titleClass }">
  77. <div class="flex justify-between items-center border-b pb-3 dialog-header">
  78. <h4 :id="titleId">{{ '转移商机' }}</h4>
  79. <div>
  80. <el-button type="primary" :loading="allLoading.transferBusinessLoading"
  81. @click="transferBusiness()">转移</el-button>
  82. <el-button @click="allVisible.transferBusinessVisible = false">取消</el-button>
  83. </div>
  84. </div>
  85. </template>
  86. <div class="scroll-bar m-6">
  87. <div class="flex mb-4">
  88. <div class="w-20 flex items-center justify-end pr-4">转移至:</div>
  89. <el-select v-model="transferValue" placeholder="请选择" class="flex1">
  90. <el-option v-for="item in transferOptions" :key="item.id" :label="item.name" :value="item.id" />
  91. </el-select>
  92. </div>
  93. <div class="pl-3 text-[#e94a4a]">转移后,将看不到此商机</div>
  94. </div>
  95. </el-dialog>
  96. <!-- 关联 -->
  97. <el-dialog v-model="allVisible.saveContactVisible" width="600" :show-close="false" top="10vh">
  98. <template #header="{ close, titleId, titleClass }">
  99. <div class="flex justify-between items-center border-b pb-3 dialog-header">
  100. <h4 :id="titleId">{{ '关联联系人' }}</h4>
  101. <div>
  102. <el-button type="primary" :loading="allLoading.saveContactLoading"
  103. @click="saveAssociateContact()">关联</el-button>
  104. <el-button @click="allVisible.saveContactVisible = false">取消</el-button>
  105. </div>
  106. </div>
  107. </template>
  108. <div class="scroll-bar m-6">
  109. <div class="flex mb-4">
  110. <div class="w-20 flex items-center justify-end pr-4">联系人:</div>
  111. <el-select v-model="contactsId" placeholder="请选择" class="flex1">
  112. <el-option v-for="item in contactsList" :key="item.value" :label="item.label" :value="item.value" />
  113. </el-select>
  114. </div>
  115. </div>
  116. </el-dialog>
  117. </div>
  118. </template>
  119. <script lang="ts" setup>
  120. import { ref, reactive, onMounted, onUnmounted, defineExpose, inject, watchEffect } from 'vue'
  121. import { GenerateForm } from '@zmjs/form-design';
  122. import { get, post } from '@/utils/request';
  123. import { BATCHTRANSFER, GETGENERATEFOEM, GETPERSONNEL, UPDATEINSET, URL_SAVECONTACT } from '../api';
  124. import { formatDateTime } from '@/utils/times';
  125. import { confirmAction } from '@/utils/tools';
  126. import { useStore } from '@/store/index'
  127. import { URL_GETALL } from '@/pages/contacts/api';
  128. const { userInfo } = useStore()
  129. const globalPopup = inject<GlobalPopup>('globalPopup')
  130. const emits = defineEmits(['refreshData']);
  131. const props = defineProps<{
  132. information: any
  133. }>()
  134. const information = ref<any>({})
  135. const transferValue = ref('')
  136. const transferOptions = ref<personnelInterface[]>([])
  137. const generateFormValue = ref({})
  138. const generateForm = ref<typeof GenerateForm>() // 自定义表单dom
  139. const productTableListValue = ref<any[]>([])
  140. const contactsId = ref('')
  141. const contactsList = ref<optionType[]>([])
  142. const allVisible = reactive({
  143. editBusinessVisible: false,
  144. transferBusinessVisible: false,
  145. saveContactVisible: false
  146. })
  147. const allLoading = reactive({
  148. editBusinessLoading: false,
  149. businessSaveLading: false,
  150. transferBusinessLoading: false,
  151. saveContactLoading: false
  152. })
  153. const generateFormData = ref({
  154. config: {},
  155. list: []
  156. }) // 自定义表单数据
  157. function associateContact() {
  158. contactsId.value = ''
  159. getContactList()
  160. showVisible('saveContactVisible')
  161. }
  162. function getContactList() {
  163. post(URL_GETALL, { customerId: information.value.customerId }).then(({ data }) => {
  164. contactsList.value = data.map((item: any) => {
  165. return { value: item.id, label: item.name }
  166. })
  167. })
  168. }
  169. function saveAssociateContact() {
  170. allLoading.saveContactLoading = false
  171. post(URL_SAVECONTACT, { id: information.value.id, contactsId: contactsId.value }).then(() => {
  172. globalPopup?.showSuccess('关联成功')
  173. closeVisible('saveContactVisible')
  174. emits('refreshData')
  175. }).finally(() => {
  176. allLoading.saveContactLoading = false
  177. })
  178. }
  179. function transferBusiness() {
  180. const ids = information.value?.id
  181. const inchargerId = information.value?.inchargerName ? transferValue.value : userInfo.id
  182. if (!inchargerId) {
  183. globalPopup?.showWarning('请选择转移的人员')
  184. return
  185. }
  186. allLoading.transferBusinessLoading = true
  187. post(BATCHTRANSFER, { ids, inchargerId }).then((res) => {
  188. if (res.code == 'ok') {
  189. globalPopup?.showSuccess('操作成功')
  190. allVisible.transferBusinessVisible = false
  191. emits('refreshData')
  192. }
  193. }).finally(() => {
  194. allLoading.transferBusinessLoading = false
  195. })
  196. }
  197. function claimBusiness() {
  198. confirmAction(`确定认领【${information.value.name}】商机吗?`).then(() => {
  199. transferBusiness()
  200. })
  201. }
  202. function editBusiness() {
  203. generateForm.value?.getData().then((res: any) => {
  204. let formVal = {
  205. id: information.value.id,
  206. ...res,
  207. expectedTransactionDate: res.expectedTransactionDate ? formatDateTime(new Date(res.expectedTransactionDate)) : '',
  208. businessItemProductList: JSON.stringify(productTableListValue.value)
  209. }
  210. allLoading.businessSaveLading = true
  211. post(UPDATEINSET, { ...formVal }).then((_res) => {
  212. allVisible.editBusinessVisible = false
  213. globalPopup?.showSuccess('保存成功')
  214. emits('refreshData')
  215. }).finally(() => {
  216. allLoading.businessSaveLading = false
  217. })
  218. }).catch((_err: any) => {
  219. console.log(_err)
  220. globalPopup?.showError('请填写完整')
  221. })
  222. }
  223. function editProductShow() {
  224. const productList = information.value.businessItemProducts || []
  225. const list = productList.map((item: any) => {
  226. const { id, productName, productId, productCode, unit, unitName, typeName, type, price, inventory, orderProductDetail, num, discount, sealPrice, totalPrice, quantity } = item
  227. return {
  228. id, productId: productId, productName, productCode, unit, unitName, typeName, type, price, inventory,
  229. num, discount, sealPrice, totalPrice, quantity
  230. }
  231. })
  232. productTableListValue.value = list
  233. }
  234. function showVisible(type: keyof typeof allVisible) {
  235. if (type == 'editBusinessVisible') {
  236. const { name, customerId, contactsId, amountOfMoney, expectedTransactionDate, stageId, inchargerId, remark } = information.value
  237. generateFormValue.value = { name, customerId, contactsId, amountOfMoney, expectedTransactionDate, stageId, inchargerId, remark }
  238. editProductShow()
  239. }
  240. allVisible[type] = true
  241. }
  242. function closeVisible(type: keyof typeof allVisible) {
  243. allVisible[type] = false
  244. }
  245. async function getSystemField() {
  246. const { data } = await post(GETPERSONNEL, {})
  247. transferOptions.value = data.map((item: any) => {
  248. const { id, name, phone, jobNumber } = item
  249. return {
  250. id, name, phone, jobNumber
  251. }
  252. })
  253. const res = await get(GETGENERATEFOEM)
  254. generateFormData.value = JSON.parse(res.data[0].config)
  255. }
  256. watchEffect(() => {
  257. information.value = props.information
  258. });
  259. // 生命周期钩子
  260. onMounted(() => {
  261. getSystemField()
  262. });
  263. </script>
  264. <style scoped lang="scss">
  265. .information {
  266. .title {
  267. font-size: 18px;
  268. color: #000
  269. }
  270. .form {
  271. .formItem {
  272. width: 48%;
  273. }
  274. .text {
  275. display: -webkit-box;
  276. /* Safari */
  277. -webkit-line-clamp: 2;
  278. /* number of lines to show */
  279. -webkit-box-orient: vertical;
  280. overflow: hidden;
  281. line-height: 1.5;
  282. }
  283. }
  284. }</style>