WhatsApp：{{
@@ -146,7 +200,12 @@
邮箱：{{ scope.row.email == '' ? ' --' : '【' + scope.row.email + ' 】' }}
-
+
-
-
-
-
-
+
+
+
+
+
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
+ import { ElMessage, ElMessageBox } from 'element-plus'
import { CrmService } from '@/api/crmApi'
import { useAuth } from '@/composables/useAuth'
import { useUploadHeaders } from '@/composables/useUploadHeaders'
@@ -320,6 +401,51 @@
const reportFileList = ref([])
const { uploadHeaders } = useUploadHeaders()
const reportUploadAction = `${import.meta.env.VITE_API_URL}/ticket/upload`
+ const columnPopoverVisible = ref(false) // 控制自定义列popover的显示状态
+
+ // 自定义列配置
+ type ColumnOption = { key: string; label: string }
+ const COLUMN_STORAGE_KEY = 'crmpc_customer_table_columns'
+ const allColumns = ref([
+ { key: 'code', label: '编号' },
+ { key: 'contacts', label: '客户名称' },
+ { key: 'magnitude_txt', label: '客户商机' },
+ { key: 'channel_name', label: '渠道' },
+ { key: 'country_name', label: '国家' },
+ { key: 'phone', label: '电话' },
+ { key: 'email', label: '邮箱' },
+ { key: 'grade_txt', label: '等级' },
+ { key: 'follow_last', label: '上次跟进' },
+ { key: 'follow_next', label: '下次跟进' },
+ { key: 'enter_user_name', label: '录单人' },
+ { key: 'describe', label: '备注' },
+ { key: 'created_at', label: '创建时间' }
+ ])
+ const defaultColumnKeys = allColumns.value.map((c) => c.key)
+ const selectedColumnKeys = ref([])
+ const loadCols = () => {
+ try {
+ const saved = localStorage.getItem(COLUMN_STORAGE_KEY)
+ selectedColumnKeys.value = saved ? JSON.parse(saved) : defaultColumnKeys
+ } catch (_) {
+ selectedColumnKeys.value = defaultColumnKeys
+ }
+ }
+ const saveCols = () => {
+ if (selectedColumnKeys.value.length === 0) {
+ ElMessage.warning('至少选择一列显示')
+ return
+ }
+ localStorage.setItem(COLUMN_STORAGE_KEY, JSON.stringify(selectedColumnKeys.value))
+ ElMessage.success('保存成功')
+ columnPopoverVisible.value = false // 隐藏popover
+ }
+ // const resetCols = () => {
+ // selectedColumnKeys.value = [...defaultColumnKeys]
+ // saveCols()
+ // }
+ const isColVisible = (key: string) => selectedColumnKeys.value.includes(key)
+
const pagination = reactive({
currentPage: 1,
pageSize: 10,
@@ -382,7 +508,28 @@
getarea()
gettableList()
tagGrouplistfn()
+ loadCols()
+
+ // 添加全局点击事件监听，点击其他地方时隐藏popover
+ document.addEventListener('click', handleGlobalClick)
})
+
+ onUnmounted(() => {
+ // 移除全局点击事件监听
+ document.removeEventListener('click', handleGlobalClick)
+ })
+
+ // 处理全局点击事件
+ const handleGlobalClick = (event: Event) => {
+ const target = event.target as HTMLElement
+ const popover = document.querySelector('.el-popover')
+ const referenceBtn = document.querySelector('.btn[title="自定义列"]')
+
+ // 如果点击的不是popover内部元素，也不是触发按钮，则隐藏popover
+ if (popover && !popover.contains(target) && referenceBtn && !referenceBtn.contains(target)) {
+ columnPopoverVisible.value = false
+ }
+ }
// tabs 切换联动
watch([activeTab, searchValue, selectValue, country_id, shots], () => {
console.log('tabs 联动' + shots.value)
@@ -732,4 +879,36 @@
color: #3471ff !important; /* 文字颜色 */
background-color: #fff !important; /* 背景色 */
}
+ .btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ margin-left: 10px;
+ color: var(--art-gray-700);
+ cursor: pointer;
+ background-color: rgba(var(--art-gray-200-rgb), 0.8);
+ border-radius: 6px;
+ transition: color 0.3s;
+ transition: all 0.3s;
+
+ i {
+ font-size: 20px;
+ color: var(--art-gray-700);
+ user-select: none;
+ }
+
+ &:hover {
+ background-color: rgba(var(--art-gray-300-rgb), 0.75);
+
+ i {
+ color: var(--art-gray-800);
+ }
+ }
+ }
+ .customer-sort {
+ width: 150px;
+ margin-left: 20px;
+ }