上传

src/api/clue/clueCache.js

@@ -0,0 +1,11 @@
+import request from '@/config/axios'
+
+// 查询用户配置
+export const getClueCache = async (params) => {
+  return await request.get({ url: '/admin-api/crm/param-user-setting/get-by-user', params })
+}
+
+// 保存用户配置
+export const setClueCache = async (data) => {
+  return await request.post({ url: '/admin-api/crm/param-user-setting/save', data })
+}

src/api/clue/index.js

@@ -0,0 +1,36 @@
+import request from '@/config/axios'
+
+// 查询（精简)列表
+export const getSimpleClueList = async () => {
+  return await request.get({ url: '/admin-api/crm/sch-clue/list-all-simple' })
+}
+
+// 查询列表
+export const getCluePage = async (params) => {
+  return await request.get({ url: '/admin-api/crm/sch-clue/page', params })
+}
+
+// 查询详情
+export const getClue = async (id) => {
+  return await request.get({ url: '/admin-api/crm/sch-clue/get?id=' + id })
+}
+
+// 新增
+export const createClue = async (data) => {
+  return await request.post({ url: '/admin-api/crm/sch-clue/create', data: data })
+}
+
+// 修改
+export const updateClue = async (params) => {
+  return await request.put({ url: '/admin-api/crm/sch-clue/update', data: params })
+}
+
+// 删除
+export const deleteClue = async (id) => {
+  return await request.delete({ url: '/admin-api/crm/sch-clue/delete?id=' + id })
+}
+
+// 通用查询数量
+export const getClueCount = async () => {
+  return await request.get({ url: '/admin-api/crm/sch-clue/get-clue-num' })
+}

src/components/Form/src/Form.vue

@@ -181,11 +181,7 @@ export default defineComponent({
       const slotsMap: Recordable = {
         ...setItemComponentSlots(slots, item?.componentProps?.slots, item.field)
       }
-      if (
+      if (item?.component !== 'SelectV2' && item?.component !== 'Cascader' && item?.options) {
-        item?.component !== 'SelectV2' &&
-        item?.component !== 'Cascader' &&
-        item?.componentProps?.options
-      ) {
         slotsMap.default = () => renderOptions(item)
       }
 
@@ -236,6 +232,8 @@ export default defineComponent({
                   vModel={formModel.value[item.field]}
                   {...(autoSetPlaceholder && setTextPlaceholder(item))}
                   {...setComponentProps(item)}
+                  format={item.component == 'DatePicker' ? 'YYYY-MM-DD' : null}
+                  value-format={item.component == 'DatePicker' ? 'YYYY-MM-DD' : null}
                   style={baseSty + item.componentProps?.style}
                   // eslint-disable-next-line prettier/prettier
                   {...(notRenderOptions.includes(item?.component as string) && item?.componentProps?.options

src/components/Form/src/components/useRenderCheckbox.tsx

@@ -5,12 +5,12 @@ import { defineComponent } from 'vue'
 export const useRenderCheckbox = () => {
   const renderCheckboxOptions = (item: FormSchema) => {
     // 如果有别名，就取别名
-    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id'
-    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name'
     const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType<
       typeof defineComponent
     >
-    return item?.componentProps?.options?.map((option) => {
+    return item?.options?.map((option) => {
       const { ...other } = option
       return (
         <Com {...other} label={option[valueAlias || 'value']}>

src/components/Form/src/components/useRenderRadio.tsx

@@ -5,12 +5,12 @@ import { defineComponent } from 'vue'
 export const useRenderRadio = () => {
   const renderRadioOptions = (item: FormSchema) => {
     // 如果有别名，就取别名
-    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id'
-    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name'
     const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType<
       typeof defineComponent
     >
-    return item?.componentProps?.options?.map((option) => {
+    return item?.options?.map((option) => {
       const { ...other } = option
       return (
         <Com {...other} label={option[valueAlias || 'value']}>

src/components/Form/src/components/useRenderSelect.tsx

@@ -9,12 +9,12 @@ export const useRenderSelect = (slots: Slots) => {
   const renderSelectOptions = (item: FormSchema) => {
     // 如果有别名，就取别名
     const labelAlias = item?.componentProps?.optionsAlias?.labelField
-    return item?.componentProps?.options?.map((option) => {
+    return item?.options?.map((option) => {
-      if (option?.options?.length) {
+      if (option?.length) {
         return (
           <ElOptionGroup label={option[labelAlias || 'label']}>
             {() => {
-              return option?.options?.map((v) => {
+              return option?.map((v) => {
                 return renderSelectOptionItem(item, v)
               })
             }}
@@ -29,8 +29,8 @@ export const useRenderSelect = (slots: Slots) => {
   // 渲染 select option item
   const renderSelectOptionItem = (item: FormSchema, option: ComponentOptions) => {
     // 如果有别名，就取别名
-    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id'
-    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name'
 
     const { label, value, ...other } = option
 

src/components/SSTable/index.vue

@@ -28,7 +28,7 @@
             @end="onDragEnd"
           >
             <template #item="{ element: item }">
-              <el-checkbox :key="item.field" :label="item.field">
+              <el-checkbox :key="item.id" :label="item.id">
                 {{ item.label }}
               </el-checkbox>
             </template>
@@ -48,9 +48,8 @@
 
 <script setup>
 import draggable from 'vuedraggable'
-import { useUserStore } from '@/store/modules/user'
+import * as ClueCacheApi from '@/api/clue/clueCache'
 import { useRoute } from 'vue-router'
-import cache from '@/plugins/cache'
 
 const props = defineProps({
   tableObject: { type: Object, default: () => ({ tableList: [] }) },
@@ -59,7 +58,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:tableObject', 'getList', 'getCheckedColumns'])
 const route = useRoute()
-const { id: userId } = useUserStore().user //取用户ID
 
 const pageNo = ref(props.tableObject?.pageNo || 1)
 
@@ -68,7 +66,7 @@ const pageSize = ref(props.tableObject?.pageSize || 20)
 const ColumnSetting = ref()
 const TableColumnPop = ref()
 // 展示在设置里的所有表格列，由于会排序，所以使用新属性，不直接修改原值
-const allColumns = ref({})
+const allColumns = ref([...props.tableColumns])
 // 已勾选的选项
 const checkedColumns = ref([])
 
@@ -85,67 +83,50 @@ const clickSetting = () => {
   unref(TableColumnPop).TableColumnPop?.delayHide?.()
 }
 
-// 获取所有的表格列，注意如果本地有缓存使用缓存数据，因为用户可能已对表格列排序，并且不依赖网络请求，可更快渲染表头
+const routeMap = {
-function getAllColumns() {
+  CluePool: 1,
-  // 1. 先获取缓存表头
+  ClueOrder: 2
-  const localData = getColumn('TableColumnAll')[route.name] || []
-  // 2. 如果有缓存的表头，直接使用，并将新增的标题加入，如果没有缓存，那就得用获取到的表头
-  if (localData && localData) {
-    const newColumns = props.tableColumns.filter(
-      (item) => !localData.some((it) => it.field == item.field)
-    )
-    allColumns.value = [...localData, ...newColumns]
-  } else {
-    allColumns.value = [...props.tableColumns]
-  }
-}
-// 获取缓存的表头
-function getColumn(name = 'shitTable') {
-  return cache.local.get(`${name}-${userId}`) || {}
-}
-// 设置表头缓存
-function setColumn(val, name = 'shitTable') {
-  cache.local.set(`${name}-${userId}`, val)
 }
+
 // 获取用户已勾选的表头
-function getUserCheckedColumns() {
+async function getUserCheckedColumns() {
-  // 1. 先获取缓存
+  checkedColumns.value = await ClueCacheApi.getClueCache({
-  const localData = getColumn('shitTable')[route.name]
+    settingType: 2,
-  // 2. 如果有缓存，使用缓存表头，否则使用默认的所有表头
+    model: routeMap[route.name]
-  if (localData && localData.length) {
+  })
-    checkedColumns.value = localData
+  // 回显到表格中
-  } else {
-    checkedColumns.value = allColumns.value.map((it) => it.field)
-  }
-  // 3. 回显到表格中
   emitColumns()
 }
 
 // 表格列排序
 function onDragEnd() {
-  const obj = getColumn('TableColumnAll')
+  ClueCacheApi.setClueCache({
-  obj[route.name] = allColumns.value
+    settingType: 2,
-  // 1. 设置缓存
+    model: routeMap[route.name],
-  setColumn(obj, 'TableColumnAll')
+    clueParamId: checkedColumns.value
-  // 2. 表格回显
+  })
+
+  // 表格回显
   emitColumns()
 }
 
 // 勾选确认
 function confirm() {
-  const obj = getColumn()
+  ClueCacheApi.setClueCache({
-  obj[route.name] = checkedColumns.value
+    settingType: 2,
-  setColumn(obj, 'shitTable')
+    model: routeMap[route.name],
+    clueParamId: checkedColumns.value
+  })
+  // usedSchema.value = allColumns.value.filter((it) => checkedColumns.value.includes(it.id))
   emitColumns()
 }
 
 // 将表头数据返回至父组件
 function emitColumns() {
-  const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.field))
+  const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.id))
   emit('getCheckedColumns', arr)
 }
 
-getAllColumns()
 getUserCheckedColumns()
 
 defineExpose({ getUserCheckedColumns })

src/components/Search/src/Search.vue

@@ -7,12 +7,10 @@ import { findIndex } from '@/utils'
 import { cloneDeep } from 'lodash-es'
 import { FormSchema } from '@/types/form'
 
-import { useUserStore } from '@/store/modules/user'
 import { useRoute } from 'vue-router'
-import cache from '@/plugins/cache'
+import * as ClueCacheApi from '@/api/clue/clueCache'
 
 const route = useRoute()
-const { id: userId } = useUserStore().user //取用户ID
 
 const { t } = useI18n()
 
@@ -46,7 +44,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['search', 'reset'])
+// const emit = defineEmits(['search', 'reset'])
 
 const visible = ref(true)
 
@@ -80,37 +78,26 @@ const newSchema = computed(() => {
   return schema
 })
 
-function initSearch() {
+const routeMap = {
+  CluePool: 1,
+  ClueOrder: 2
+}
+async function initSearch() {
   reset()
-  // 1. 先获取缓存
+  checkedSchema.value = await ClueCacheApi.getClueCache({
-  const localData = getColumn('Schema')[route.name]
+    settingType: 1,
-  // 2. 如果有缓存，使用缓存表头，否则使用默认的所有表头
+    model: routeMap[route.name]
-  if (localData && localData.length) {
+  })
-    usedSchema.value = localData
+  usedSchema.value = props.schema.filter((it) => checkedSchema.value.includes(it.id))
-  } else {
-    const obj = getColumn('Schema')
-    obj[route.name] = [props.schema[0]]
-    setSchema(obj)
-    usedSchema.value = [props.schema[0]]
-  }
-  checkedSchema.value = usedSchema.value.map((it) => it.field)
 }
 
 function changeSearch() {
-  const obj = getColumn('Schema')
+  ClueCacheApi.setClueCache({
-  obj[route.name] = props.schema.filter((item) => checkedSchema.value.includes(item.field))
+    settingType: 1,
-  setSchema(obj)
+    model: routeMap[route.name],
-  initSearch()
+    clueParamId: checkedSchema.value
-}
+  })
-
+  usedSchema.value = props.schema.filter((it) => checkedSchema.value.includes(it.id))
-// 获取缓存的查询条件
-function getColumn(name = 'Schema') {
-  return cache.local.get(`${name}-${userId}`) || {}
-}
-
-// 设置查询条件缓存
-function setSchema(val: Array<Object>, name = 'Schema') {
-  cache.local.set(`${name}-${userId}`, val)
 }
 
 function setSearch() {
@@ -121,23 +108,34 @@ const { register, elFormRef, methods } = useForm({
   model: props.model || {}
 })
 
-const search = async () => {
+// const search = async () => {
-  await unref(elFormRef)?.validate(async (isValid) => {
+//   await unref(elFormRef)?.validate(async (isValid) => {
-    if (isValid) {
+//     if (isValid) {
-      const { getFormData } = methods
+//       const { getFormData } = methods
-      const model = await getFormData()
+//       const model = await getFormData()
-      emit('search', model)
+//       emit('search', model)
-    }
+//     }
-  })
+//   })
-}
+// }
 
 const reset = async () => {
   unref(elFormRef)?.resetFields()
+  // const { getFormData } = methods
+  // const model = await getFormData()
+  // emit('reset', model)
+}
+
+async function getFormModel() {
   const { getFormData } = methods
   const model = await getFormData()
-  emit('reset', model)
+  return model
 }
 
+defineExpose({
+  getFormModel,
+  reset
+})
+
 const bottonButtonStyle = computed(() => {
   return {
     textAlign: props.buttomPosition as unknown as 'left' | 'center' | 'right'
@@ -168,10 +166,7 @@ initSearch()
   >
     <template #action>
       <div v-if="layout === 'inline'">
-        <ElButton ref="SchemaSetting" @click="setSearch">
+        <ElButton ref="SchemaSetting" @click="setSearch"> 查询设置 </ElButton>
-          <!-- <Icon class="mr-5px" icon="ep:setting" /> -->
-          查询设置
-        </ElButton>
         <el-popover
           ref="SettingPop"
           :virtual-ref="SchemaSetting"
@@ -181,7 +176,7 @@ initSearch()
           virtual-triggering
         >
           <el-checkbox-group v-model="checkedSchema" @change="changeSearch">
-            <el-checkbox v-for="item in schema" :key="item.field" :label="item.field">
+            <el-checkbox v-for="item in schema" :key="item.id" :label="item.id">
               {{ item.label }}
             </el-checkbox>
           </el-checkbox-group>

src/hooks/web/useCrudSchemas.ts

@@ -119,7 +119,8 @@ const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): F
         componentProps: comonentProps,
         ...schemaItem.search,
         field: schemaItem.field,
-        label: schemaItem.search?.label || schemaItem.label
+        label: schemaItem.search?.label || schemaItem.label,
+        id: schemaItem.clueParamId
       }
       if (searchSchemaItem.api) {
         searchRequestTask.push(async () => {
@@ -165,7 +166,8 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
         }
         return {
           ...schema.table,
-          ...schema
+          ...schema,
+          id: schema.clueParamId
         }
       }
     }

src/utils/index.ts

@@ -209,3 +209,14 @@ export const yuanToFen = (amount: string | number): number => {
 export const fenToYuan = (amount: string | number): number => {
   return Number((Number(amount) / 100).toFixed(2))
 }
+
+export const removeNullField = (obj: Object) => {
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      if (obj[key] == '') {
+        delete obj[key]
+      }
+    }
+  }
+  return obj
+}

src/views/Clue/Pool/Comp/DrawerClue.vue

@@ -15,8 +15,8 @@
       <div class="flex justify-between" style="height: 32px">
         <div class="flex" style="align-items: center">
           <b class="mr-5px text-24px">{{ info.name }}</b>
-          <div class="mr-5px text-16px">1888888888</div>
+          <div class="mr-5px text-16px">{{ info.phone }}</div>
-          <el-tag type="success">A高意向</el-tag>
+          <el-tag type="success">{{ info.intentionState }}</el-tag>
         </div>
         <div>
           <el-button type="primary" plain>修改</el-button>
@@ -177,6 +177,7 @@
 </template>
 
 <script setup>
+import * as ClueApi from '@/api/clue'
 import DialogFollow from './DialogFollow.vue'
 import ImgFlag from '@/assets/imgs/flag/position_blue.png'
 import AMapLoader from '@amap/amap-jsapi-loader'
@@ -214,9 +215,9 @@ const schema = ref([
   }
 ])
 
-const followContent = `<p style="color: red;">这是本次跟进的内容。</p><br/><p>我还能放图片，但需要你自己排版：</p><br/><img style="width: 200px;" src="https://q6.itc.cn/images01/20240407/0e6be21aebc847648109304f20370790.jpeg">`
+const followContent = ``
 
-const followContent2 = `<p style="color: red;">这是本次跟进的内容。</p>`
+const followContent2 = ``
 
 const followList = ref([
   {
@@ -237,13 +238,17 @@ const followList = ref([
 const dialogMap = ref(null)
 const aMap = ref(null)
 
-function open(row) {
+async function open(id) {
-  info.value = row
+  try {
-  show.value = true
+    info.value = await ClueApi.getClue(id)
-  if (!dialogMap.value) {
+    show.value = true
-    nextTick(() => {
+    if (!dialogMap.value) {
-      initMap()
+      nextTick(() => {
-    })
+        initMap()
+      })
+    }
+  } catch (error) {
+    console.log(error)
   }
 }
 

src/views/Clue/Pool/index.vue

@@ -1,30 +1,33 @@
 <template>
   <div>
     <div class="relative">
-      <el-tabs v-model="searchForm.mode" size="small">
+      <el-tabs v-model="queryType" size="small">
         <el-tab-pane label="全部" name="0" />
         <el-tab-pane name="1">
           <template #label>
             <Tooltip message="除了无效线索和已成交的线索" />
-            <el-badge :value="123" :max="9999">
+            <el-badge v-if="clueCount.unSignNum" :value="clueCount.unSignNum" :max="9999">
               <span class="ml-3px">未成交</span>
             </el-badge>
+            <span v-else class="ml-3px">未成交</span>
           </template>
         </el-tab-pane>
         <el-tab-pane name="2">
           <template #label>
             <Tooltip message="下次跟进时间在今日之前的未成交线索" />
-            <el-badge :value="234" :max="9999">
+            <el-badge v-if="clueCount.followNum" :value="clueCount.followNum" :max="9999">
               <span class="ml-3px">待跟进</span>
             </el-badge>
+            <span v-else class="ml-3px">待跟进</span>
           </template>
         </el-tab-pane>
         <el-tab-pane name="3">
           <template #label>
             <Tooltip message="只有创建时间，无下次跟进时间的未成交线索" />
-            <el-badge :value="423" :max="9999">
+            <el-badge v-if="clueCount.newNum" :value="clueCount.newNum" :max="9999">
               <span class="ml-3px">新线索</span>
             </el-badge>
+            <span v-else class="ml-3px">新线索</span>
           </template>
         </el-tab-pane>
         <el-tab-pane label="公海" name="4" />
@@ -37,7 +40,7 @@
       </div>
     </div>
     <!-- 搜索工作栏 -->
-    <Search :schema="allSchemas.searchSchema" labelWidth="0">
+    <Search v-if="!loading" ref="searchRef" :schema="allSchemas.searchSchema" labelWidth="0">
       <template #actionMore>
         <el-button @click="getTableList" v-hasPermi="['clue:pool:search']"> 搜索 </el-button>
         <el-button @click="resetQuery" v-hasPermi="['clue:pool:reset']"> 重置 </el-button>
@@ -45,6 +48,7 @@
     </Search>
     <!-- 列表 -->
     <SSTable
+      v-if="!loading"
       class="mt-20px"
       v-model:tableObject="tableObject"
       :tableColumns="allSchemas.tableColumns"
@@ -74,6 +78,9 @@
             <span>{{ row[item.field] }}</span>
             <Icon class="ml-5px" icon="ep:phone" @click="makeCall(row.contact)" />
           </div>
+          <div v-else-if="item.form?.component == 'DatePicker'">
+            <span>{{ formatDate(row[item.field]) }}</span>
+          </div>
           <span v-else>{{ row[item.field] }}</span>
         </template>
       </el-table-column>
@@ -116,27 +123,44 @@
 </template>
 
 <script setup name="CluePool">
-import { allSchemas } from './cluePool.data'
+import { getSimpleFieldList } from '@/api/clue/clueField'
 import DialogClue from './Comp/DialogClue.vue'
 import DrawerClue from './Comp/DrawerClue.vue'
 import DialogSuccess from './Comp/DialogSuccess.vue'
 import DialogFollow from './Comp/DialogFollow.vue'
 
-const searchForm = ref({
+import { removeNullField } from '@/utils'
-  mode: '2'
+import { formatDate } from '@/utils/formatTime'
-})
+
+import * as ClueApi from '@/api/clue'
+
+const searchRef = ref()
+const queryType = ref('2')
+
 const formRef = ref()
 const drawerRef = ref()
 const successRef = ref()
 const followRef = ref()
 
-// const { tableObject, tableMethods } = useTable({
+const loading = ref(true)
-//   getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
+
-//   delListApi: MailTemplateApi.deleteMailTemplate // 删除接口
+const allSchemas = ref({})
-// })
+
+async function getCurdSchemas() {
+  loading.value = true
+  try {
+    const data = await getSimpleFieldList()
+    allSchemas.value = useCrudSchemas(data).allSchemas
+  } finally {
+    loading.value = false
+    nextTick(() => {
+      getTableList()
+    })
+  }
+}
 
 const tableObject = ref({
-  tableList: [{ name: '测试', contact: '17318531354' }],
+  tableList: [],
   loading: false,
   total: 1,
   pageSize: 20,
@@ -151,15 +175,39 @@ function getCheckedColumns(list) {
 }
 
 function resetQuery() {
-  searchForm.value = {
+  searchRef.value.reset()
-    pageNo: 1,
+  tableObject.value.currentPage = 1
-    pageSize: 10
-  }
   getTableList()
 }
 
-function getTableList() {
+async function getTableList() {
   // 查询
+  tableObject.value.loading = true
+  try {
+    const queryParams = await searchRef.value.getFormModel()
+    const params = {
+      ...queryParams,
+      pageNo: tableObject.value.currentPage,
+      pageSize: tableObject.value.pageSize,
+      queryType: queryType.value
+    }
+    const data = await ClueApi.getCluePage(removeNullField(params))
+    tableObject.value.tableList = data.list
+    tableObject.value.total = data.total
+  } finally {
+    tableObject.value.loading = false
+  }
+}
+
+const clueCount = ref({
+  unSignNum: 0,
+  followNum: 0,
+  newNum: 0
+})
+function getSearchCount() {
+  ClueApi.getClueCount().then((data) => {
+    clueCount.value = data
+  })
 }
 
 // 新增
@@ -172,7 +220,7 @@ function handleEdit(row) {
 }
 // 详情
 function handleDetail(row) {
-  drawerRef.value.open(row)
+  drawerRef.value.open(row.clueId)
 }
 
 function handleFollow(row) {
@@ -187,6 +235,11 @@ async function makeCall(phone) {
 function handleSuccess(row) {
   successRef.value.open(row)
 }
+
+onMounted(() => {
+  getSearchCount()
+  getCurdSchemas()
+})
 </script>
 
 <style lang="scss" scoped></style>