新增不同类型客户

src/api/geopoliticalCustomers/types.ts

@@ -173,6 +173,7 @@ interface customStoreEntitiesItem {
   disabled?: boolean
 }
 export interface CustomerDTO {
+  customType?: number | undefined
   customId?: number | undefined
   //客户名称
   customName?: string | undefined

src/views/geopoliticalCustomers/geopoliticalCustomers.vue

@@ -121,6 +121,17 @@ const columns: ProColumns[] = [
     title: '客户名称',
     dataIndex: 'customName'
   },
+  {
+    title: '客户类型',
+    dataIndex: 'customType',
+    customRender: function ({ record }: any) {
+      if (record.customType === 0) {
+        return h('div', 'A型')
+      } else {
+        return h('div', 'B型')
+      }
+    }
+  },
   {
     title: '联系方式',
     dataIndex: 'customNid'

src/views/geopoliticalCustomers/geopoliticalCustomersModal.vue

@@ -1,14 +1,39 @@
 <template>
+  <div ref="refModal" class="custom-modal">
     <a-modal
       :title="title"
       :visible="visible"
       :mask-closable="false"
       :centered="true"
-    :body-style="{ padding: '24px 40px 8px 40px' }"
+      :body-style="{ padding: '0px 40px 8px' }"
+      :get-container="() => $refs.refModal"
       :confirm-loading="submitLoading"
       :width="850"
       @cancel="handleClose"
     >
+    <a-tabs
+        v-if="
+          title === '新建预约'
+        "
+        v-model:activeKey="activeKey"
+        centered
+        @change="tabsChange"
+      >
+        <a-tab-pane key="1" tab="A类型客户"> </a-tab-pane>
+        <a-tab-pane key="2" tab="B类型客户" force-render> </a-tab-pane>
+      </a-tabs>
+      <a-tabs
+        v-else-if="
+          title !== '新建预约'
+        "
+        v-model:activeKey="activeKey"
+        centered
+        @change="tabsChange"
+      >
+        <a-tab-pane v-if="formModel.customType === 0" key="1" tab="A类型客户"> </a-tab-pane>
+        <a-tab-pane v-if="formModel.customType === 1" key="2" tab="B类型客户" force-render>
+        </a-tab-pane>
+      </a-tabs>
       <a-form
         ref="formRef"
         :model="formModel"
@@ -90,7 +115,13 @@
               label="请输入您的地址信息"
               :label-col="{ sm: { span: 24 }, md: { span: 9 } }"
               :wrapper-col="{ sm: { span: 24 }, md: { span: 15 } }"
-            :rules="[{ required: true, message: '请选择地址信息', trigger: ['blur', 'change'] }]"
+              :rules="[
+                {
+                  required: activeKey === '1',
+                  message: '请选择地址信息',
+                  trigger: ['blur', 'change']
+                }
+              ]"
               name="address"
             >
               <a-cascader
@@ -100,8 +131,8 @@
                 :options="provincesAndCitiesAndAutonomousOptions"
                 placeholder="请选择"
                 :show-search="{ filter }"
-              :disabled="isDisabled"
-              :class="dynamicClass"
+                :disabled="isAddressDisabled"
+                :class="addressDynamicClass"
                 class="readonly-cascader"
                 :allow-clear="title === '新建预约' || title === '编辑预约' || title === '编辑'"
                 @change="addressChange"
@@ -110,7 +141,9 @@
           </a-col>
           <a-col :xl="10" :md="10" :sm="10">
             <a-form-item
-            :rules="[{ required: true, message: '请输入小区名称', trigger: 'change' }]"
+              :rules="[
+                { required: activeKey === '1', message: '请输入小区名称', trigger: 'change' }
+              ]"
               name="detailAddress"
             >
               <a-select
@@ -122,8 +155,8 @@
                 :filter-option="false"
                 :not-found-content="null"
                 :options="searchDataList"
-              :disabled="isDisabled"
-              :class="isDetailAddressReadOnlyDynamicClass"
+                :disabled="isDetailAddressDisabled"
+                :class="detailAddressReadOnlyDynamicClass"
                 :title="
                   (formModel.address && formModel.address.length < 2) || !formModel.address
                     ? '请先选择省市区'
@@ -139,7 +172,7 @@
           label="请输入区域半径"
           class="radius"
           name="radius"
-        :rules="[{ required: true, message: '请选择区域半径', trigger: 'blur' }]"
+          :rules="[{ required: activeKey === '1', message: '请选择区域半径', trigger: 'blur' }]"
         >
           <a-select
             ref="select"
@@ -147,8 +180,8 @@
             :style="{ width: title === '详情' || title === '分发' ? '37%' : '38%' }"
             :options="radiusOptions"
             :field-names="{ label: 'name', value: 'id', options: 'children' }"
-          :disabled="isDisabled"
-          :class="dynamicClass"
+            :disabled="isRadiusDisabled"
+            :class="radiusDynamicClass"
             @change="radiusChange"
           ></a-select>
           <div>
@@ -274,7 +307,7 @@
                   : { sm: { span: 24 }, md: { span: 16 } }
               "
               :rules="{
-              required: true,
+                required: activeKey === '1',
                 message: '请输入预约门店名称',
                 trigger: 'change'
               }"
@@ -371,7 +404,6 @@
           >确定</a-button
         >
         <div v-if="title === '编辑'">
-        <!-- <a-button @click="retrial">重审</a-button> -->
           <a-button @click="storeResetForm">重置</a-button>
           <a-button @click="handleClose">取消</a-button>
           <a-button type="primary" html-type="submit" style="margin-left: 10px" @click="distribute"
@@ -379,7 +411,6 @@
           >
         </div>
         <div v-if="title === '分发'">
-        <!-- <a-button @click="retrial">重审</a-button> -->
           <a-button @click="handleClose">取消</a-button>
           <a-button type="primary" html-type="submit" style="margin-left: 10px" @click="distribute"
             >分发</a-button
@@ -391,7 +422,7 @@
         <p>您提交的表单信息为：</p>
         <p>称呼：{{ formModel.customName }}</p>
         <p>联系方式：{{ formModel.customNid }}</p>
-      <div style="overflow-y: auto; max-height: 200px">
+        <div style="overflow-y: auto; max-height: 100px">
           <p v-for="(item, index) in formModel.customStoreEntities" :key="index">
             <span>{{ `报名的门店${index + 1}为` }}：{{ item.storeName }}</span>
             <span>&nbsp;{{ item.reservationDate?.toString().split(' ')[0] }}</span>
@@ -399,7 +430,12 @@
           </p>
         </div>
       </a-modal>
+        <!-- 匹配信息确认弹窗 -->
+      <a-modal v-model:visible="matchregisterVisible" title="确认信息" @ok="matchhandleOk">     
+        <p>重新匹配将清空预约门店信息,是否重新匹配?</p>
+      </a-modal>
     </a-modal>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -424,6 +460,10 @@ import {
 } from '@/api/geopoliticalCustomers'
 import type { CustomerDTO, GeopoliticalCustomersRecord } from '@/api/geopoliticalCustomers/types'
 import axios from 'axios'
+//获取当前账号角色
+import { useUserStore } from '@/stores/user-store'
+const { userInfo } = useUserStore()
+const userInfoCurrent = ref<string | undefined>('')
 
 //省市区二级
 // import { provincesAndCitiesAndAutonomousRegions } from '@/utils/geopolitical-customers'
@@ -435,8 +475,9 @@ import axios from 'axios'
 // }
 
 onMounted(() => {
-  //省市区下拉框列表数据
+  //省市区三级下拉框列表数据
   provincesAndCitiesAndAutonomousOptions.value = window.globalProvincesAndCitiesAndAutonomousRegions
+  //省市区二级下拉框列表数据
   // if (provincesAndCitiesAndAutonomousRegions) {
   //   const addressArray = JSON.parse(JSON.stringify(provincesAndCitiesAndAutonomousRegions))
   //   const arr: any[] = []
@@ -450,25 +491,47 @@ onMounted(() => {
   //   })
   //   provincesAndCitiesAndAutonomousOptions.value = arr
   // }
+  //获取当前账号角色
+  userInfoCurrent.value = userInfo?.roleCodes?.toLocaleString()
 })
 
-//省市区、半径动态生成只读/禁用样式
-const isDisabled = ref(false)
-const isReadOnly = ref(false)
-const dynamicClass = computed(() => ({
-  'custom-disabled-style': isDisabled.value,
-  'custom-readonly-style': isReadOnly.value
+//当前激活 tab 面板的 key
+const activeKey = ref('1')
+//tabs change事件
+const tabsChange = (val: string) => {
+  handleMapInit()
+  formRef.value?.resetFields()
+  if (val === '1') {
+    formModel.customType = 0
+  } else {
+    formModel.customType = 1
+  }
+}
+
+//省市区动态生成只读/禁用样式
+const isAddressDisabled = ref(false)
+const isAddressReadOnly = ref(false)
+const addressDynamicClass = computed(() => ({
+  'custom-disabled-style': isAddressDisabled.value,
+  'custom-readonly-style': isAddressReadOnly.value
+}))
+//半径动态生成只读/禁用样式
+const isRadiusDisabled = ref(false)
+const isRadiusReadOnly = ref(false)
+const radiusDynamicClass = computed(() => ({
+  'custom-disabled-style': isRadiusDisabled.value,
+  'custom-readonly-style': isRadiusReadOnly.value
 }))
 //预约日期、预约时间动态生成只读/禁用样式
-const reservationTimeisReadOnly = ref(false)
+const isReservationTimeisReadOnly = ref(false)
 const reservationTimeClass = computed(() => ({
-  'custom-readonly-style': reservationTimeisReadOnly.value
+  'custom-readonly-style': isReservationTimeisReadOnly.value
 }))
 //小区动态生成只读/禁用样式
 const isDetailAddressDisabled = ref(false)
 const isDetailAddressReadOnly = ref(false)
 
-const isDetailAddressReadOnlyDynamicClass = computed(() => ({
+const detailAddressReadOnlyDynamicClass = computed(() => ({
   'custom-disabled-style': isDetailAddressDisabled.value,
   'custom-readonly-style':
     isDetailAddressReadOnly.value ||
@@ -650,6 +713,9 @@ const handleSearch = (val: string) => {
 //小区a-select select事件
 const handleSelect = (val: string) => {
   formModel.detailAddress = val
+  // map.value.clearMap()
+  // formModel.customStoreEntities=[]
+  // listData.value=[]
   newAmapGeocoder()
   getCenterMarkerAddress()
 }
@@ -945,12 +1011,7 @@ const accordingAddressMatch = () => {
   newAmapGeocoder()
   getLocation('match')
 }
-//匹配
-const match = async (detailAddress: string) => {
-  const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
-  formRef.value
-    ?.validateFields(fields)
-    .then(() => {
+const idThen = (detailAddress: string) => {
   pois.length = 0
   listData.value = []
   lng.value = undefined
@@ -1046,18 +1107,49 @@ const match = async (detailAddress: string) => {
       console.log('地点搜索失败')
     }
   })
+}
+//匹配
+const match = async (detailAddress: string) => {
+  // console.log(listData.length,'listData.length')
+  console.log(title.value,'title.value')
+  if (activeKey.value === '1') {
+    if(title.value==='新建预约'&&formModel.customStoreEntities.length!==0){
+    matchregisterVisible.value=true
+    }else{
+      const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
+    formRef.value
+      ?.validateFields(fields)
+      .then(() => {
+        idThen(detailAddress)
       })
       .catch(() => {
         // 校验失败
         console.log('校验失败')
       })
+    }
+ 
+  } else {
+    if(title.value==='新建预约'&&formModel.customStoreEntities.length!==0){
+    matchregisterVisible.value=true
+    }else{
+    if (formModel.address && formModel.address.length === 0) {
+      message.info('请输入您的地址信息')
+    } if (!formModel.detailAddress) {
+      message.info('请输入您的详细地址信息')
+    } if(!formModel.radius){
+      message.info('请选择区域半径')
+    }
+    if(formModel.address && formModel.address.length>0&&formModel.detailAddress&&formModel.radius){
+      idThen(detailAddress)
+    }
+  }
+  }
 }
 //重置
 const resetForm = () => {
   formModel.address = []
   formModel.detailAddress = ''
   formModel.radius = '5000'
-  // initMap()
   listData.value.length = 0
   map.value.clearMap()
 }
@@ -1108,16 +1200,22 @@ const storeResetForm = () => {
 }
 //控制报名信息确认弹窗显隐
 const registerVisible = ref<boolean>(false)
+//匹配信息确认弹窗显隐
+const matchregisterVisible = ref<boolean>(false)
 //报名
 const showModal = () => {
   formRef.value
     ?.validate()
     .then(() => {
+      if (activeKey.value === '1') {
         if (formModel.customStoreEntities.length === 0) {
           message.info('请先添加预约门店')
         } else {
           registerVisible.value = true
         }
+      } else {
+        registerVisible.value = true
+      }
     })
     .catch(err => {
       console.log('校验失败err', err)
@@ -1183,22 +1281,60 @@ const submitOperate = () => {
 const handleOk = async () => {
   await submitOperate()
 }
+//匹配信息确认弹窗确定点击事件
+const matchhandleOk = async () => {
+  matchregisterVisible.value=false
+  listData.value.forEach((item:any)=>{
+    item.disabled=false
+  })
+  if (infoWindows.value) {
+  infoWindows.value.close(); // 关闭气泡卡片
+}
+  formModel.customStoreEntities=[]
+  // listData.value=[]
+  const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
+    formRef.value
+      ?.validateFields(fields)
+      .then(() => {
+        idThen(detailAddress)
+      })
+      .catch(() => {
+        // 校验失败
+        console.log('校验失败')
+      })
+  // await submitOperate()
+}
 //暂存
 const temporaryStorage = async () => {
+  const fields = ['customName', 'customNid'] // 指定要校验的字段名
   formRef.value
-    ?.validate()
+    ?.validateFields(fields)
     .then(() => {
-      if (formModel.customStoreEntities.length === 0) {
-        message.info('请先添加预约门店')
-      } else {
+      // if (formModel.customStoreEntities.length === 0) {
+      //   message.info('请先添加预约门店')
+      // } else {
       formModel.enrollStatus = 0
       submitOperate()
       // handleSubmit()
-      }
+      // }
     })
     .catch(err => {
       console.log('校验失败err', err)
     })
+  // formRef.value
+  //   ?.validate()
+  //   .then(() => {
+  //     if (formModel.customStoreEntities.length === 0) {
+  //       message.info('请先添加预约门店')
+  //     } else {
+  //       formModel.enrollStatus = 0
+  //       submitOperate()
+  //       // handleSubmit()
+  //     }
+  //   })
+  //   .catch(err => {
+  //     console.log('校验失败err', err)
+  //   })
 }
 
 //分发
@@ -1226,6 +1362,7 @@ const { title, visible, openModal, closeModal } = useModal()
 const { formAction } = useFormAction()
 // 表单模型
 const formModel = reactive<CustomerDTO>({
+  customType: 0,
   customId: undefined,
   customName: '',
   customNid: '',
@@ -1236,7 +1373,7 @@ const formModel = reactive<CustomerDTO>({
   distinguish: '',
   detailAddress: '',
   otherAddressesInfo: '',
-  radius: '5000',
+  radius: '',
   enrollStatus: 1,
   customStoreEntities: []
 })
@@ -1276,13 +1413,16 @@ const handleSubmit = () => {
 
 //弹窗关闭方法
 const handleClose = () => {
+  activeKey.value = '1'
+  //去除禁用/只读
+    isAddressDisabled.value =
+    isAddressReadOnly.value =
     isDetailAddressDisabled.value =
     isDetailAddressReadOnly.value =
-    isReadOnly.value =
-    isDisabled.value =
-    reservationTimeisReadOnly.value =
+    isRadiusDisabled.value =
+    isRadiusReadOnly.value =
+    isReservationTimeisReadOnly.value =
       false
-
   if (isSubmit.value) {
     emits('submit-success')
   }
@@ -1305,12 +1445,22 @@ interface openObj {
   type?: string
   record?: GeopoliticalCustomersRecord
 }
+const handleMapInit = () => {
+  nextTick(() => {
+    initMap()
+  })
+}
 
 defineExpose({
   open(opendata: openObj) {
     isSubmit.value = false
     openModal()
     resetFields.value()
+    if (userInfoCurrent.value === 'ROLE_REVIEWER') {
+      formModel.customType = 1
+    } else if (userInfoCurrent.value === 'ROLE_PRELIMINARY_EXAMINER') {
+      formModel.customType = 0
+    }
 
     const handleSuccess = (res: any) => {
       const data = res.data || {}
@@ -1325,18 +1475,25 @@ defineExpose({
         detailAddress,
         otherAddressesInfo,
         radius,
-        customStoreVOList
+        customStoreVOList,
+        customType
       } = data
 
       formModel.customId = customId
       formModel.customName = customName
       formModel.customNid = customNid
       formModel.remark = remark
+      if (economize) {
         formModel.address = [economize, market, distinguish]
+      } else {
+        formModel.address = []
+      }
+
       formModel.economize = economize
       formModel.market = market
       formModel.distinguish = distinguish
       formModel.detailAddress = detailAddress
+      formModel.customType = customType
 
       formModel.otherAddressesInfo = otherAddressesInfo
       formModel.radius = radius
@@ -1346,23 +1503,48 @@ defineExpose({
         i.option = generateTimeSlots(i.tradeStartTime, i.tradeEndTime)
       })
       if (opendata.type === 'audit') {
-        isDisabled.value = true
-        isDetailAddressDisabled.value = true
         handleMapInit()
-        match(formModel.detailAddress)
         title.value = '编辑'
-      } else if (opendata.type === 'edit') {
-        isDisabled.value = true
+        // activeKey.value=formModel.customType
+        if (formModel.address.length !== 0) {
+          isAddressDisabled.value = true
+          // isRadiusReadOnly.value = true
+        } 
+        if (formModel.radius) {
+          isRadiusDisabled.value = true
+        } 
+        if (formModel.detailAddress) {
           isDetailAddressDisabled.value = true
-        handleMapInit()
+        }
+        if (formModel.address.length !== 0 && formModel.detailAddress && formModel.radius) {
           match(formModel.detailAddress)
+        }
+      
+      } else if (opendata.type === 'edit') {
+        handleMapInit()
         title.value = '编辑预约'
+        // if(formModel.customType===0){
+        //   activeKey.value='1'
+        // }else if(formModel.customType===1){
+        //   activeKey.value='2'
+        // }
+        if (formModel.address.length !== 0) {
+          isAddressDisabled.value = true
+          // isRadiusDisabled.value = true
+          // isRadiusReadOnly.value = true
+          // match(formModel.detailAddress)
         }
+        if (formModel.radius) {
+          isRadiusDisabled.value = true
+        } 
+        if (formModel.detailAddress) {
+          isDetailAddressDisabled.value = true
+        }
+        if (formModel.address.length !== 0 && formModel.detailAddress && formModel.radius) {
+          match(formModel.detailAddress)
+        }
+     
       }
-    const handleMapInit = () => {
-      nextTick(() => {
-        initMap()
-      })
     }
 
     if (opendata.newFormAction === FormAction.CREATE) {
@@ -1374,16 +1556,20 @@ defineExpose({
         onSuccess: handleSuccess
       })
       if (opendata.type === 'view') {
-        isReadOnly.value = true
-        isDetailAddressReadOnly.value = true
-        reservationTimeisReadOnly.value = true
         title.value = '详情'
+        isAddressReadOnly.value = true
+        isRadiusReadOnly.value = true
+        isDetailAddressReadOnly.value = true
+        isReservationTimeisReadOnly.value = true
+     
       } else if (opendata.type === 'distribute') {
-        isReadOnly.value = true
+        title.value = '分发'
+        isAddressReadOnly.value = true
+        isRadiusReadOnly.value = true
         isDetailAddressReadOnly.value = true
-        reservationTimeisReadOnly.value = true
+        isReservationTimeisReadOnly.value = true
         // handleMapInit()
-        title.value = '分发'
+   
         formModel.description = 1
       }
     }
@@ -1589,8 +1775,12 @@ const initMap = async () => {
     // center: [120.1551, 30.2741], // 地图中心点经纬度
     zoom: 18 // 缩放级别
   })
+  console.log(map.value, 'map.value')
   // await auto('全国')
-  if (title.value === '编辑预约' || title.value === '编辑') {
+  if (
+    (title.value === '编辑预约' && formModel.otherAddressesInfo) ||
+    (title.value === '编辑' && formModel.otherAddressesInfo)
+  ) {
     //标记中心点
     getCenterMarker(
       'init',
@@ -1803,7 +1993,8 @@ const storeItemClick = (item: any, index: number) => {
 //地图
 .drawStation {
   //地图
-  #draw-station-container {
+  #draw-station-container,
+  #draw-station {
     padding: 0px;
     margin: 0px;
     width: 100%;
@@ -1880,6 +2071,19 @@ const storeItemClick = (item: any, index: number) => {
 .custom-tooltip:hover::before {
   opacity: 1;
 }
+//modal头部
+.custom-modal /deep/ .ant-modal-header {
+  padding: 16px 24px 0px !important;
+  border-bottom: unset !important;
+}
+//a-tabs距离下面的距离
+::v-deep .ant-tabs-top > .ant-tabs-nav {
+  margin: 0 0 25px 0;
+  line-height: 0.5715;
+}
+// ::v-deep .ant-modal-body {
+//   padding: 0px 40px 8px !important;
+// }
 
 // ::v-deep .amap-sug-result {
 //   margin-left: 222px !important;