index.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <template>
  2. <ContentWrap>
  3. <!-- 搜索工作栏 -->
  4. <el-form
  5. class="-mb-15px"
  6. :model="queryParams"
  7. ref="queryFormRef"
  8. :inline="true"
  9. label-width="68px"
  10. >
  11. <el-form-item label="客户名称" prop="name">
  12. <el-input
  13. v-model="queryParams.name"
  14. placeholder="请输入客户名称"
  15. clearable
  16. @keyup.enter="handleQuery"
  17. class="!w-240px"
  18. />
  19. </el-form-item>
  20. <el-form-item label="手机" prop="mobile">
  21. <el-input
  22. v-model="queryParams.mobile"
  23. placeholder="请输入手机"
  24. clearable
  25. @keyup.enter="handleQuery"
  26. class="!w-240px"
  27. />
  28. </el-form-item>
  29. <el-form-item label="电话" prop="telephone">
  30. <el-input
  31. v-model="queryParams.telephone"
  32. placeholder="请输入电话"
  33. clearable
  34. @keyup.enter="handleQuery"
  35. class="!w-240px"
  36. />
  37. </el-form-item>
  38. <el-form-item label="网址" prop="website">
  39. <el-input
  40. v-model="queryParams.website"
  41. placeholder="请输入网址"
  42. clearable
  43. @keyup.enter="handleQuery"
  44. class="!w-240px"
  45. />
  46. </el-form-item>
  47. <el-form-item>
  48. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  49. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  50. <el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:customer:create']">
  51. <Icon icon="ep:plus" class="mr-5px" /> 新增
  52. </el-button>
  53. <el-button
  54. type="success"
  55. plain
  56. @click="handleExport"
  57. :loading="exportLoading"
  58. v-hasPermi="['crm:customer:export']"
  59. >
  60. <Icon icon="ep:download" class="mr-5px" /> 导出
  61. </el-button>
  62. </el-form-item>
  63. </el-form>
  64. </ContentWrap>
  65. <!-- 列表 -->
  66. <ContentWrap>
  67. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  68. <el-table-column label="编号" align="center" prop="id" />
  69. <el-table-column label="客户名称" align="center" prop="name" />
  70. <el-table-column label="跟进状态" align="center" prop="followUpStatus">
  71. <template #default="scope">
  72. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.followUpStatus" />
  73. </template>
  74. </el-table-column>
  75. <el-table-column label="锁定状态" align="center" prop="lockStatus">
  76. <template #default="scope">
  77. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.lockStatus" />
  78. </template>
  79. </el-table-column>
  80. <el-table-column label="成交状态" align="center" prop="dealStatus">
  81. <template #default="scope">
  82. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.dealStatus" />
  83. </template>
  84. </el-table-column>
  85. <el-table-column label="手机" align="center" prop="mobile" />
  86. <el-table-column label="电话" align="center" prop="telephone" />
  87. <el-table-column label="网址" align="center" prop="website" />
  88. <el-table-column label="备注" align="center" prop="remark" />
  89. <el-table-column label="负责人的用户编号" align="center" prop="ownerUserId" />
  90. <el-table-column label="地区编号" align="center" prop="areaId" />
  91. <el-table-column label="详细地址" align="center" prop="detailAddress" />
  92. <el-table-column label="地理位置经度" align="center" prop="longitude" />
  93. <el-table-column label="地理位置维度" align="center" prop="latitude" />
  94. <el-table-column
  95. label="最后跟进时间"
  96. align="center"
  97. prop="contactLastTime"
  98. :formatter="dateFormatter"
  99. width="180px"
  100. />
  101. <el-table-column
  102. label="下次联系时间"
  103. align="center"
  104. prop="contactNextTime"
  105. :formatter="dateFormatter"
  106. width="180px"
  107. />
  108. <el-table-column
  109. label="创建时间"
  110. align="center"
  111. prop="createTime"
  112. :formatter="dateFormatter"
  113. width="180px"
  114. />
  115. <el-table-column label="操作" align="center">
  116. <template #default="scope">
  117. <el-button
  118. link
  119. type="primary"
  120. @click="openForm('update', scope.row.id)"
  121. v-hasPermi="['crm:customer:update']"
  122. >
  123. 编辑
  124. </el-button>
  125. <el-button
  126. link
  127. type="danger"
  128. @click="handleDelete(scope.row.id)"
  129. v-hasPermi="['crm:customer:delete']"
  130. >
  131. 删除
  132. </el-button>
  133. </template>
  134. </el-table-column>
  135. </el-table>
  136. <!-- 分页 -->
  137. <Pagination
  138. :total="total"
  139. v-model:page="queryParams.pageNo"
  140. v-model:limit="queryParams.pageSize"
  141. @pagination="getList"
  142. />
  143. </ContentWrap>
  144. <!-- 表单弹窗:添加/修改 -->
  145. <CustomerForm ref="formRef" @success="getList" />
  146. </template>
  147. <script setup lang="ts">
  148. import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
  149. import { dateFormatter } from '@/utils/formatTime'
  150. import download from '@/utils/download'
  151. import * as CustomerApi from '@/api/crm/customer'
  152. import CustomerForm from './CustomerForm.vue'
  153. defineOptions({ name: 'CrmCustomer' })
  154. const message = useMessage() // 消息弹窗
  155. const { t } = useI18n() // 国际化
  156. const loading = ref(true) // 列表的加载中
  157. const total = ref(0) // 列表的总页数
  158. const list = ref([]) // 列表的数据
  159. const queryParams = reactive({
  160. pageNo: 1,
  161. pageSize: 10,
  162. name: null,
  163. mobile: null,
  164. telephone: null,
  165. website: null
  166. })
  167. const queryFormRef = ref() // 搜索的表单
  168. const exportLoading = ref(false) // 导出的加载中
  169. /** 查询列表 */
  170. const getList = async () => {
  171. loading.value = true
  172. try {
  173. const data = await CustomerApi.getCustomerPage(queryParams)
  174. list.value = data.list
  175. total.value = data.total
  176. } finally {
  177. loading.value = false
  178. }
  179. }
  180. /** 搜索按钮操作 */
  181. const handleQuery = () => {
  182. queryParams.pageNo = 1
  183. getList()
  184. }
  185. /** 重置按钮操作 */
  186. const resetQuery = () => {
  187. queryFormRef.value.resetFields()
  188. handleQuery()
  189. }
  190. /** 添加/修改操作 */
  191. const formRef = ref()
  192. const openForm = (type: string, id?: number) => {
  193. formRef.value.open(type, id)
  194. }
  195. /** 删除按钮操作 */
  196. const handleDelete = async (id: number) => {
  197. try {
  198. // 删除的二次确认
  199. await message.delConfirm()
  200. // 发起删除
  201. await CustomerApi.deleteCustomer(id)
  202. message.success(t('common.delSuccess'))
  203. // 刷新列表
  204. await getList()
  205. } catch {}
  206. }
  207. /** 导出按钮操作 */
  208. const handleExport = async () => {
  209. try {
  210. // 导出的二次确认
  211. await message.exportConfirm()
  212. // 发起导出
  213. exportLoading.value = true
  214. const data = await CustomerApi.exportCustomer(queryParams)
  215. download.excel(data, '客户.xls')
  216. } catch {
  217. } finally {
  218. exportLoading.value = false
  219. }
  220. }
  221. /** 初始化 **/
  222. onMounted(() => {
  223. getList()
  224. })
  225. </script>