提交代码

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/api.ts

@@ -3,7 +3,9 @@ export const IMPORTMOD = 'Customer'
 export const PREFIX = '/custom'
 export const GETSYSFILED = '/sys-dict/getListByCode'
 export const GETPERSONNEL = '/user/getSimpleActiveUserList'
+export const URL_TEMPLALE = `/sys-form/getListByCode${MOD}`
 export const URL_TABLELIST = `${PREFIX}/list`
+export const URL_EDITSAVE = `${PREFIX}/insertAndUpdate`
 
 export const stageStatus = [
     { id: 1, name: "赢单", progress: "100%" },

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/index.vue

@@ -5,15 +5,15 @@
         <div class="flex-1 p-3 overflow-y-auto">
           <el-form :model="customerCriteriaForm" label-width="70px" style="max-width: 600px">
             <el-form-item label="客户名称">
-              <el-input v-model="customerCriteriaForm.clueName" clearable placeholder="请输入"></el-input>
+              <el-input v-model="customerCriteriaForm.customName" clearable placeholder="请输入"></el-input>
             </el-form-item>
             <el-form-item label="客户来源">
-              <el-select v-model="customerCriteriaForm.clueSourceId" placeholder="请选择">
+              <el-select v-model="customerCriteriaForm.customSourceId" placeholder="请选择">
                 <el-option v-for="item in fixedData.CustomSources" :key="item.id" :label="item.name" :value="item.id" />
               </el-select>
             </el-form-item>
             <el-form-item label="电话号码">
-              <el-input v-model="customerCriteriaForm.phone" clearable placeholder="请输入"></el-input>
+              <el-input v-model="customerCriteriaForm.telPhone" clearable placeholder="请输入"></el-input>
             </el-form-item>
             <el-form-item label="邮箱">
               <el-input v-model="customerCriteriaForm.email" clearable placeholder="请输入"></el-input>
@@ -52,20 +52,21 @@
     <div class="flex-1 p-5 overflow-auto">
       <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">新建客户</el-button>
-          <el-button type="primary" @click="batchTransfer()">批量转移</el-button>
-          <el-button type="primary" @clicl="batchDelete()">批量删除</el-button>
+          <el-button type="primary" @click="editCustomer(false)">新建客户</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>
         </div>
         <div class="flex-1 w-full overflow-hidden">
-          <el-table ref="clueTableRef" :data="clueTable" border v-loading="allLoading.clueTableLading"
+          <el-table ref="clueTableRef" :data="customerTable" border :loading="allLoading.customerTableLading"
             style="width: 100%;height: 100%;">
             <el-table-column type="selection" width="55" />
             <el-table-column prop="clueName" label="客户名称" width="180">
               <template #default="scope">
-                <el-button link type="primary" size="large" @click.prevent="toCustomerTableDetail(scope.row)">{{ scope.row.clueName
+                <el-button link type="primary" size="large" @click.prevent="toCustomerTableDetail(scope.row)">{{
+                  scope.row.clueName
                 }}</el-button>
               </template>
             </el-table-column>
@@ -81,28 +82,46 @@
               <template #default="scope">
                 <el-button link type="primary" size="large">编辑</el-button>
                 <el-button link type="primary" size="large">新建客户</el-button>
-                <el-button link type="danger" size="large" @click.prevent="deleteRow(scope.$index)">删除</el-button>
+                <el-button link type="danger" size="large">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
         <div class="flex justify-end pt-3">
-          <el-pagination layout="total, prev, pager, next, sizes" :total="clueTotalTable" :hide-on-single-page="true" />
+          <el-pagination layout="total, prev, pager, next, sizes" :total="customerTotalTable"
+            :hide-on-single-page="true" />
         </div>
       </div>
     </div>
 
-    <!-- 弹窗 -->
-    
+    <!-- 新建客户 -->
+    <el-dialog v-model="allVisible.editCustomerVisible" width="1000" :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.editCustomerText }}</h4>
+          <div>
+            <el-button type="primary" :loading="allLoading.editCustomerSaveLoading" @click="editCustomerSave(true)">保存并新建</el-button>
+            <el-button type="primary" :loading="allLoading.editCustomerSaveLoading" @click="editCustomerSave(false)">保存</el-button>
+            <el-button @click="closeVisible('editCustomerVisible')">取消</el-button>
+          </div>
+        </div>
+      </template>
+      <div class="h-[60vh] overflow-y-auto scroll-bar pt-3">
+        <div class="ml-4 mr-4">
+          <GenerateForm ref="customerTemplateRef" :data="customerTemplate" :value="customerTemplateValue" />
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, inject } from "vue";
-import { MOD, GETSYSFILED, GETPERSONNEL, URL_TABLELIST } from './api.ts'
+import { MOD, GETSYSFILED, GETPERSONNEL, URL_TABLELIST, URL_TEMPLALE, URL_EDITSAVE } from './api.ts'
 import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'
 import { post, get } from "@/utils/request";
 import { useRouter, useRoute } from "vue-router";
+import { GenerateForm } from '@zmjs/form-design';
 
 // 定义类型
 interface fixedDataInterface {
@@ -121,9 +140,9 @@ interface personnelInterface {
 }
 
 interface customerCriteriaFormType { // 线索筛选条件类型
-  clueName: string,
-  clueSourceId: string | number,
-  phone: string,
+  customName: string,
+  customSourceId: string | number,
+  telPhone: string,
   email: string,
   customerIndustryId: string | number,
   customerLevelId: string | number,
@@ -135,13 +154,12 @@ interface customerCriteriaFormType { // 线索筛选条件类型
 }
 
 // 定义变量
-const route = useRoute()
 const router = useRouter()
 const globalPopup = inject<GlobalPopup>('globalPopup')
 const customerCriteriaForm = reactive<customerCriteriaFormType>({ // 筛选条件form
-  clueName: '',
-  clueSourceId: '',
-  phone: '',
+  customName: '',
+  customSourceId: '',
+  telPhone: '',
   email: '',
   customerIndustryId: '',
   customerLevelId: '',
@@ -151,9 +169,17 @@ const customerCriteriaForm = reactive<customerCriteriaFormType>({ // 筛选条
   pageIndex: 1,
   pageFrom: 10
 })
-const clueTableTotal = ref(0)
+const customerTable = ref([]) // 线索table数据
+const customerTotalTable = ref(0) // 线索 table 数据总数
 const allLoading = reactive({
-  clueTableLading: false,
+  customerTableLading: false,
+  editCustomerSaveLoading: false
+})
+const allVisible = reactive({
+  editCustomerVisible: false,
+})
+const allText = reactive({
+  editCustomerText: '新建客户',
 })
 const fixedData = reactive({
   CustomSources: [] as fixedDataInterface[],
@@ -161,45 +187,68 @@ const fixedData = reactive({
   CustomLevel: [] as fixedDataInterface[],
   Personnel: [] as personnelInterface[]
 })
-const clueTable = ref([{ clueName: '客户名称', clueSourceId: '客户来源', id: 123456789 }]) // 线索table数据
-const clueTotalTable = ref(0) // 线索 table 数据总数
+
+const customerTemplate = ref({
+  list: [],
+  config: {}
+})
+const customerTemplateRef = ref<typeof GenerateForm>() // 自定义表单dom
+const customerTemplateValue = ref({})
+
 
 // 定义方法
-function searchTable() {
-  getClueTable()
+function editCustomerSave(flag: boolean) {
+  customerTemplateRef.value?.getData().then((res: any) => {
+    allLoading.editCustomerSaveLoading = true
+    post(URL_EDITSAVE, { ...res }).then((_res) => {
+      allVisible.editCustomerVisible = flag
+      globalPopup?.showSuccess('保存成功')
+      if(flag) {
+        customerTemplateRef.value?.reset()
+      }
+      getCustomerTable()
+    }).finally(() => {
+      allLoading.editCustomerSaveLoading = false
+    })
+  }).catch((_err: any) => {
+    console.log(_err)
+    globalPopup?.showError('请填写完整')
+  })
 }
 
-function resetTable() {
-  let newResetForm = resetFromValue(customerCriteriaForm, { startTime: getFirstDayOfMonth(new Date()), endTime: formatDate(new Date()), pageIndex: 1, pageFrom: 10 })
-  Object.assign(customerCriteriaForm, newResetForm)
-  getClueTable()
-}
+function editCustomer(row: any) { // row 有数据代表编辑
+  if (row) {
 
-function deleteRow(_row: any) {
-  console.log('点击了删除')
+  } else { // 没有数据代表新建
+    customerTemplateRef.value?.reset()
+  }
+  showVisible('editCustomerVisible')
 }
 
-function batchTransfer() {
-  console.log('点击了批量转移')
+function toCustomerTableDetail(_row: any) {
+  console.log('点击跳转详情')
+  router.push({ path: `${MOD}/detail`, query: { id: _row.id } })
 }
 
-function batchDelete() {
-  console.log('批量删除')
+function searchTable() {
+  getCustomerTable()
 }
 
-function toCustomerTableDetail(_row: any) {
-  console.log('点击跳转详情')
-  router.push({path: `${MOD}/detail`, query: {id: _row.id}})
+function resetTable() {
+  let newResetForm = resetFromValue(customerCriteriaForm, { startTime: getFirstDayOfMonth(new Date()), endTime: formatDate(new Date()), pageIndex: 1, pageFrom: 10 })
+  Object.assign(customerCriteriaForm, newResetForm)
+  getCustomerTable()
 }
 
-function getClueTable() {
+function getCustomerTable() {
   let valueForm = getFromValue(customerCriteriaForm)
-  post(URL_TABLELIST, { ...valueForm}).then((res) => {
+  allLoading.customerTableLading = true
+  post(URL_TABLELIST, { ...valueForm }).then((res) => {
     const { data, total } = res.data
-    clueTable.value = data
-    clueTableTotal.value = total
+    customerTable.value = data
+    customerTotalTable.value = total
   }).finally(() => {
-
+    allLoading.customerTableLading = false
   })
 }
 
@@ -221,11 +270,22 @@ async function getSystemField() {
       id, name, phone, jobNumber
     }
   })
+
+  const res = await get(URL_TEMPLALE)
+  customerTemplate.value = JSON.parse(res.data[0].config)
+}
+
+function showVisible(type: keyof typeof allVisible) {
+  allVisible[type] = true
+}
+
+function closeVisible(type: keyof typeof allVisible) {
+  allVisible[type] = false
 }
 
 onMounted(() => {
   getSystemField()
-  getClueTable()
+  getCustomerTable()
 })
 </script>