设置客户列表权限

.gitignore

@@ -3,6 +3,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.env
 .cursorrules
 src/types/components.d.ts
 src/types/auto-imports.d.ts

.husky/commit-msg

@@ -1 +0,0 @@
-pnpm dlx commitlint --edit $1

.husky/pre-commit

@@ -1 +0,0 @@
-pnpm run lint:lint-staged

src/views/crmpc/customer/Edit.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="customer-form-page">
     <div class="form-header">
-      <el-link  :underline="false" @click="goBack">
-        <i class="iconfont-sys icon-reverse">&#xe772;</i>  返回
+      <el-link underline="never" @click="goBack">
+        <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
       </el-link>
       <span class="border"></span><span class="form-title">编辑客户资料</span>
     </div>
@@ -18,19 +18,29 @@
         <el-col :span="24">
           <el-form-item label="客户渠道" prop="channel_id">
             <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
-              <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option
+                v-for="item in channelOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="客户商机" prop="magnitude">
             <el-select v-model="form.magnitude" placeholder="请选择客户商机">
-              <el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option
+                v-for="item in opportunityOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="客户名称" prop="contacts">
             <el-input v-model="form.contacts" placeholder="请输入客户名称" />
           </el-form-item>
-          <el-form-item label="客户性别" prop="sex" >
-            <el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
+          <el-form-item label="客户性别" prop="sex">
+            <el-radio-group v-model="form.sex" style="justify-content: flex-end; width: 100%">
               <el-radio :label="0">未知</el-radio>
               <el-radio :label="1">男</el-radio>
               <el-radio :label="2">女</el-radio>
@@ -52,12 +62,22 @@
           </el-form-item> -->
           <el-form-item label="客户分级" prop="grade">
             <el-select v-model="form.grade" placeholder="请选择客户分级">
-              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option
+                v-for="item in levelOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="国家" prop="country_id">
             <el-select v-model="form.country_id" filterable placeholder="请选择国家">
-              <el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
+              <el-option
+                v-for="item in countryOptions"
+                :key="item.id"
+                :label="item.cn_addr"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="公司" prop="company">
@@ -69,153 +89,160 @@
         </el-col>
       </el-row>
       <el-form-item class="submit-row">
-        <el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
-     </el-form-item>
+        <el-button type="primary" style="width: 100%" @click="submitForm">提交</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
-import { CrmService } from '@/api/crmApi'
-const route = useRoute()
-const customerId = route.query.id
-const router = useRouter()
-const formRef = ref()
+  import { ref, onMounted } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { useRouter } from 'vue-router'
+  import { CrmService } from '@/api/crmApi'
+  const route = useRoute()
+  const customerId = route.query.id
+  const router = useRouter()
+  const formRef = ref()
 
+  const rules = {
+    channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
+    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+    // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
+  }
 
-const rules = {
-  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
-  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
-}
-
-const channelOptions = ref<any>()
-const opportunityOptions = ref<any>()
-const intentionOptions = ref<any>()
-const levelOptions = ref<any>()
-const countryOptions = ref<any>()
-onMounted(async () => {
-  await getgetChannel()
-  await getMagnitude()
-  await getGrade()
-  await getarea()
-  await getdetilfn()
-})
-// 定义客户详情类型
-interface CustomerInfo {
-  contacts?: string
-  // 可根据实际接口补充更多字段
-  [key: string]: any
-}
-const form = ref<CustomerInfo>({})
-const customerInfo = ref<CustomerInfo>({})
-//获取详情
-const getdetilfn = async() => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getcustomerdetail({id:customerId})
-    customerInfo.value = res
-    form.value = res
-  } catch (error) { }
-}
-//渠道
-const getgetChannel = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getChannel()
-    channelOptions.value = res||[]
-  } catch (error) { channelOptions.value = [] }
-}
-//商机
-const getMagnitude = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getMagnitude()
-    opportunityOptions.value = res||[]
-  } catch (error) { opportunityOptions.value = [] }
-}
-//客户等级 
-const getGrade = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getGrade()
-    levelOptions.value = res||[]
-  } catch (error) { levelOptions.value = [] }
-}
-//国家
-const getarea = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getCountry()
-    countryOptions.value = res||[]
-  } catch (error) { countryOptions.value = [] }
-}
-function goBack() {
-  router.back()
-}
-
-function submitForm() {
-  formRef.value.validate(async (valid: boolean) => {
-    if (valid) {
-      try {
-        const res = await CrmService.customerAdd(form.value)
-        ElMessage.success(res?.message || '提交成功！')
-        router.push('/crmpc/customer')
-      } catch (e: any) {
-        ElMessage.error(e?.message || '提交失败')
-      }
-    }
+  const channelOptions = ref<any>()
+  const opportunityOptions = ref<any>()
+  const levelOptions = ref<any>()
+  const countryOptions = ref<any>()
+  onMounted(async () => {
+    await getgetChannel()
+    await getMagnitude()
+    await getGrade()
+    await getarea()
+    await getdetilfn()
   })
-}
+  // 定义客户详情类型
+  interface CustomerInfo {
+    contacts?: string
+    // 可根据实际接口补充更多字段
+    [key: string]: any
+  }
+  const form = ref<CustomerInfo>({})
+  const customerInfo = ref<CustomerInfo>({})
+  //获取详情
+  const getdetilfn = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getcustomerdetail({ id: customerId })
+      customerInfo.value = res
+      form.value = res
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  //渠道
+  const getgetChannel = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getChannel()
+      channelOptions.value = res || []
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  //商机
+  const getMagnitude = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getMagnitude()
+      opportunityOptions.value = res || []
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  //客户等级
+  const getGrade = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getGrade()
+      levelOptions.value = res || []
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  //国家
+  const getarea = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getCountry()
+      countryOptions.value = res || []
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  function goBack() {
+    router.back()
+  }
+
+  function submitForm() {
+    formRef.value.validate(async (valid: boolean) => {
+      if (valid) {
+        try {
+          const res = await CrmService.customerAdd(form.value)
+          ElMessage.success(res?.message || '提交成功！')
+          router.push('/crmpc/customer')
+        } catch (e: any) {
+          ElMessage.error(e?.message || '提交失败')
+        }
+      }
+    })
+  }
 </script>
 
 <style scoped>
-.border{
-  
-  margin: 0px 10px 0px 40px;
-}
-.submit-row .el-form-item__content {
-  display: flex;
-  justify-content: center;
-}
-.icon-reverse {
-  display: inline-block;
-  transform: rotate(270deg); /* 旋转180度 */
-}
-.customer-form-page {
-  min-height: 100vh;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 18px;
-}
-.form-header {
+  .border {
+    margin: 0px 10px 0px 40px;
+  }
+  .submit-row .el-form-item__content {
+    display: flex;
+    justify-content: center;
+  }
+  .icon-reverse {
+    display: inline-block;
+    transform: rotate(270deg); /* 旋转180度 */
+  }
+  .customer-form-page {
+    min-height: 100vh;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 18px;
+  }
+  .form-header {
     width: 98%;
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     font-size: 18px;
     justify-content: flex-start; /* 新增，左对齐 */
-}
-.form-title{
-  font-weight: bold;
-  color: #222;
-}
+  }
+  .form-title {
+    font-weight: bold;
+    color: #222;
+  }
 
-.customer-form {
-  width: 600px;
-  background: #fff;
-  padding: 10px 24px 16px 24px;
-}
-.el-form-item {
-  margin-bottom: 18px;
-}
-.el-form-item__label {
-  color: #222;
-  font-weight: 500;
-}
-</style> 
+  .customer-form {
+    width: 600px;
+    background: #fff;
+    padding: 10px 24px 16px 24px;
+  }
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+  .el-form-item__label {
+    color: #222;
+    font-weight: 500;
+  }
+</style>

src/views/crmpc/customer/index.vue

@@ -2,18 +2,16 @@
   <div class="customer-page">
     <!-- 顶部操作栏 -->
     <div class="customer-toolbar boxshadow">
-      <el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
+      <el-button type="primary" @click="goAdd" v-if="hasAuth('crm_customer@add')">
+        <el-icon><Plus /> </el-icon>
+        添加
+      </el-button>
       <div class="customer-search-group">
-          <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
-          <el-select v-model="selectValue">
-              <el-option
-              v-for="v in selectOptions"
-              :key="v.value"
-              :label="v.label"
-              :value="v.value"
-              >
-              </el-option>
-          </el-select>
+        <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
+        <el-select v-model="selectValue">
+          <el-option v-for="v in selectOptions" :key="v.value" :label="v.label" :value="v.value">
+          </el-option>
+        </el-select>
       </div>
     </div>
 
@@ -21,7 +19,7 @@
     <div class="customer-tags boxshadow">
       <!-- 前3组 -->
       <div class="filter-row" v-for="item in visibleTagGroups" :key="item.id">
-        <span class="filter-label">{{item.name}}</span>
+        <span class="filter-label">{{ item.name }}</span>
         <div class="filter-tags">
           <span
             v-for="item1 in item.tags"
@@ -37,7 +35,7 @@
       <transition name="fade">
         <div v-if="showMore">
           <div class="filter-row" v-for="item in moreTagGroups" :key="item.id">
-            <span class="filter-label">{{item.name}}</span>
+            <span class="filter-label">{{ item.name }}</span>
             <div class="filter-tags">
               <span
                 v-for="item1 in item.tags"
@@ -60,270 +58,322 @@
       </div>
     </div>
     <div class="boxshadow">
-        <!-- Tab切换 -->
+      <!-- Tab切换 -->
       <el-tabs v-model="activeTab" class="customer-tabs">
-          <el-tab-pane label="全部" name=""></el-tab-pane>
-          <el-tab-pane label="跟进中" name="0"></el-tab-pane>
-          <el-tab-pane label="已成交" name="1"></el-tab-pane>
-          <el-tab-pane label="已丢失" name="2"></el-tab-pane>
+        <el-tab-pane label="全部" name=""></el-tab-pane>
+        <el-tab-pane label="跟进中" name="0"></el-tab-pane>
+        <el-tab-pane label="已成交" name="1"></el-tab-pane>
+        <el-tab-pane label="已丢失" name="2"></el-tab-pane>
       </el-tabs>
-  
+
       <!-- 表格 -->
-      <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
-      :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
-      @current-change="handleCurrentChange" lass="customer-table">
-          <template #default>
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        lass="customer-table"
+      >
+        <template #default>
           <el-table-column prop="contacts" label="客户名称" align="center" />
           <el-table-column prop="magnitude_txt" label="客户商机" align="center" />
           <el-table-column prop="channel_name" label="渠道" align="center" />
           <el-table-column prop="phone" label="电话" align="center" />
           <el-table-column prop="grade_txt" label="等级" align="center" />
           <el-table-column prop="follow" label="状态" align="center">
-              <template #default="scope">
+            <template #default="scope">
               <span :class="statusClass(scope.row.follow)">
-                  {{ scope.row.follow_txt }}
+                {{ scope.row.follow_txt }}
               </span>
-              </template>
+            </template>
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="200px" align="center">
-              <template #default="scope">
-              <el-link type="primary" underline="never" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> &#xe70f;</i>查看</el-link>
-              <el-link type="primary" underline="never" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> &#xe6bf;</i> 添加跟进</el-link>
-              </template>
+            <template #default="scope">
+              <el-link
+                type="primary"
+                underline="never"
+                style="margin-right: 8px"
+                @click="goEdit(scope.row)"
+                v-if="hasAuth('crm_customer@show')"
+              >
+                <i class="iconfont-sys"> &#xe70f;</i>查看
+              </el-link>
+              <el-link
+                type="primary"
+                underline="never"
+                @click="goAddFollow(scope.row)"
+                v-if="hasAuth('crm_customer@follow_add')"
+              >
+                <i class="iconfont-sys">&#xe6bf;</i> 添加跟进
+              </el-link>
+            </template>
           </el-table-column>
-          </template>
-      </ArtTable>  
+        </template>
+      </ArtTable>
     </div>
-    
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch } from 'vue'
-import { Plus } from '@element-plus/icons-vue'
-import { CrmService } from '@/api/crmApi'
-const searchValue = ref('')
-const selectValue = ref('')
-const activeTab = ref('')
-const showMore = ref(false)
-const loading = ref(false)
-const pagination = reactive({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0
-})
-const selectOptions = [
-  { label: '全部', value: '' },
-  { label: '当天', value: '0' },
-  { label: '近三天', value: '1' },
-  { label: '近七天', value: '2' }
-]
-//获取标签
-type TagGroup = { id: string; name: string; tags: { id: string; name: string; count: number }[] }
-const tagGroups = ref<TagGroup[]>([])
-const tagGrouplistfn = async () => {
-  try {
-    const res = await CrmService.tagGrouplist({scene:'customers'})
+  import { ref, reactive, computed, onMounted, watch } from 'vue'
+  import { Plus } from '@element-plus/icons-vue'
+  import { CrmService } from '@/api/crmApi'
+  import { useAuth } from '@/composables/useAuth'
+  const { hasAuth } = useAuth()
+  const searchValue = ref('')
+  const selectValue = ref('')
+  const activeTab = ref('')
+  const showMore = ref(false)
+  const loading = ref(false)
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
+  const selectOptions = [
+    { label: '全部', value: '' },
+    { label: '当天', value: '0' },
+    { label: '近三天', value: '1' },
+    { label: '近七天', value: '2' }
+  ]
+  //获取标签
+  type TagGroup = { id: string; name: string; tags: { id: string; name: string; count: number }[] }
+  const tagGroups = ref<TagGroup[]>([])
+  const tagGrouplistfn = async () => {
+    const res = await CrmService.tagGrouplist({ scene: 'customers' })
     tagGroups.value = res || []
-  } catch (error) { }
-}
-// 计算前3组和更多组
-defineProps()
-const visibleTagGroups = computed(() => tagGroups.value.slice(0, 3))
-const moreTagGroups = computed(() => tagGroups.value.slice(3))
-// 表格数据
-const tableData = ref<any[]>([])
-onMounted(() => {
-  gettableList()
-  tagGrouplistfn()
-})
-// tabs 切换联动
-watch([activeTab, searchValue, selectValue], () => {
-  pagination.currentPage = 1
-  gettableList()
-})
-// 获取列表数据
-const tagActiveMap = reactive<{ [groupId: string]: string }>({})
-const gettableList = async () => {
-  loading.value = true
-  try {
-    const { currentPage, pageSize } = pagination
-    const params: any = {
-      current: currentPage,
-      size: pageSize
-    }
-    if (searchValue.value) params.keyword = searchValue.value
-    if (selectValue.value) params.follow_last = selectValue.value
-    if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
-    // 标签参数，所有选中的标签id组成数组
-    const selectedTagIds = Object.values(tagActiveMap).filter(Boolean)
-    if (selectedTagIds.length) {
-      params.tag_id = selectedTagIds
-    }
-    console.log(params)
-    const { data, current, size, total } = await CrmService.getcustomerList(params)
-    tableData.value = data.map((item: any, index: number) => ({
-      ...item
-    }))
-    Object.assign(pagination, { currentPage: current, pageSize: size, total })
-  } catch (error) {
-    console.error('获取用户列表失败:', error)
-  } finally {
-    loading.value = false
   }
-}
-// 处理表格分页变化
-const handleSizeChange = (newPageSize: number) => {
-  pagination.pageSize = newPageSize
-  // getWorkList()
-}
-const handleCurrentChange = (newCurrentPage: number) => {
-  pagination.currentPage = newCurrentPage
-  // getWorkList()
-}
-function statusClass(status: any) {
-  if (status === 0) return 'status-following'
-  if (status === 1) return 'status-dealed'
-  if (status === 2) return 'status-lost'
-  return ''
-}
-const router = useRouter()
-function goAdd() {
-  router.push('/crmpc/customer/add')
-}
-function goEdit(row: any) {
-  router.push({
-    path: '/crmpc/customer/show',
-    query: { id: row.id }
+  // 计算前3组和更多组
+  // eslint-disable-next-line vue/valid-define-props
+  defineProps()
+  const visibleTagGroups = computed(() => tagGroups.value.slice(0, 3))
+  const moreTagGroups = computed(() => tagGroups.value.slice(3))
+  // 表格数据
+  const tableData = ref<any[]>([])
+  onMounted(() => {
+    gettableList()
+    tagGrouplistfn()
   })
-}
-function goAddFollow(row: any) {
-  router.push({
-    path: '/crmpc/customer/followadd',
-    query: { id: row.id } // 可带客户名等参数
+  // tabs 切换联动
+  watch([activeTab, searchValue, selectValue], () => {
+    pagination.currentPage = 1
+    gettableList()
   })
-}
-// 标签选中状态，key为组id，值为选中的标签id
-function handleTagClick(groupId: string, tagId: string) {
-  if (tagActiveMap[groupId] === tagId) {
-    tagActiveMap[groupId] = '' // 取消选中
-  } else {
-    tagActiveMap[groupId] = tagId // 选中
+  // 获取列表数据
+  const tagActiveMap = reactive<{ [groupId: string]: string }>({})
+  const gettableList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params: any = {
+        current: currentPage,
+        size: pageSize
+      }
+      if (searchValue.value) params.keyword = searchValue.value
+      if (selectValue.value) params.follow_last = selectValue.value
+      if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
+      // 标签参数，所有选中的标签id组成数组
+      const selectedTagIds = Object.values(tagActiveMap).filter(Boolean)
+      if (selectedTagIds.length) {
+        params.tag_id = selectedTagIds
+      }
+      console.log(params)
+      const { data, current, size, total } = await CrmService.getcustomerList(params)
+      tableData.value = data.map((item: any) => ({
+        ...item
+      }))
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取用户列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    // getWorkList()
+  }
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.currentPage = newCurrentPage
+    // getWorkList()
+  }
+  function statusClass(status: any) {
+    if (status === 0) return 'status-following'
+    if (status === 1) return 'status-dealed'
+    if (status === 2) return 'status-lost'
+    return ''
+  }
+  const router = useRouter()
+  function goAdd() {
+    router.push('/crmpc/customer/add')
+  }
+  function goEdit(row: any) {
+    router.push({
+      path: '/crmpc/customer/show',
+      query: { id: row.id }
+    })
+  }
+  function goAddFollow(row: any) {
+    router.push({
+      path: '/crmpc/customer/followadd',
+      query: { id: row.id } // 可带客户名等参数
+    })
+  }
+  // 标签选中状态，key为组id，值为选中的标签id
+  function handleTagClick(groupId: string, tagId: string) {
+    if (tagActiveMap[groupId] === tagId) {
+      tagActiveMap[groupId] = '' // 取消选中
+    } else {
+      tagActiveMap[groupId] = tagId // 选中
+    }
+    pagination.currentPage = 1
+    gettableList()
   }
-  pagination.currentPage = 1
-  gettableList()
-}
-
 </script>
 
-<style scoped>
-:deep(.el-table__header th) {
-      background: #f7f9fa !important;
-      color: #333;
-      font-weight: bold;
+<style scoped lang="scss">
+  :deep(.el-table__header th) {
+    background: #f7f9fa !important;
+    color: #333;
+    font-weight: bold;
   }
+
   :deep(.el-table__body tr.custom-table-row td) {
-      border-bottom: 1px solid #F7F9FA !important;
-      border-right: 1px solid #F7F9FA !important;
+    border-bottom: 1px solid #f7f9fa !important;
+    border-right: 1px solid #f7f9fa !important;
   }
+
   :deep(.el-table__body tr td:last-child) {
-      border-right: none !important;
+    border-right: none !important;
   }
+
   :deep(.el-table__body tr:last-child td) {
-      border-bottom: none !important;
+    border-bottom: none !important;
   }
+
   :deep(.el-table__header-wrapper th) {
-      border-bottom: 1px solid #F7F9FA !important;
-      border-right: 1px solid #F7F9FA !important;
+    border-bottom: 1px solid #f7f9fa !important;
+    border-right: 1px solid #f7f9fa !important;
   }
+
   :deep(.el-table__header-wrapper th:last-child) {
-      border-right: none !important;
+    border-right: none !important;
   }
+
   :deep(.el-table) {
-      border: 1px solid #F7F9FA !important;
-      border-radius: 6px;
+    border: 1px solid #f7f9fa !important;
+    border-radius: 6px;
   }
-.customer-page {
-  background: var(--art-main-bg-color);
-  min-height: 100vh;
-}
-.customer-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding: 20px 10px;
-  background: var(--art-main-bg-color);
-}
-.customer-search-group {
-  display: flex;
-  gap: 12px;
-}
-.customer-tags {
-  background: var(--art-main-bg-color);
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 16px;
-}
-.filter-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 14px;
-}
-.filter-label {
-  width: 120px;
-  color: #666;
-  margin-right: 8px;
-  flex-shrink: 0;
-  font-size: 14px;
-}
-.filter-tags {
-  flex: 1;
-  color: #333;
-  font-weight: 500;
-  font-size: 14px;
-  span{
+
+  .customer-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+
+  .customer-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 20px 10px;
+    background: var(--art-main-bg-color);
+  }
+
+  .customer-search-group {
+    display: flex;
+    gap: 12px;
+  }
+
+  .customer-tags {
+    background: var(--art-main-bg-color);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+
+  .filter-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+  }
+
+  .filter-label {
+    width: 120px;
+    color: #666;
+    margin-right: 8px;
+    flex-shrink: 0;
+    font-size: 14px;
+  }
+
+  .filter-tags {
+    flex: 1;
+    color: #333;
+    font-weight: 500;
+    font-size: 14px;
+
+    span {
       margin-right: 20px;
+    }
   }
-}
-.customer-tabs {
-  margin-bottom: 8px;
-}
-.status-following {
-  color: #00A43F;
-  font-weight: bold;
-}
-.status-dealed {
-  color: #3471FF;
-  font-weight: bold;
-}
-.status-lost {
-  color: #FF0000;
-  font-weight: bold;
-}
-.customer-table {
-  background: var(--art-main-bg-color);
-  border-radius: 8px;
-  margin-top: 0;
-}
-.filter-more-btn {
-  text-align: center;
-  margin-top: 8px;
-}
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.2s;
-}
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-.tag-item { 
-  cursor: pointer; 
-  border-radius: 4px; 
-  padding: 2px 10px; 
-  margin-right: 8px; 
-  transition: background 0.2s; 
-  min-width: 100px;
-  display: inline-block;
-}
-.tag-active { background: #3471FF; color: #fff; }
-</style>
+
+  .customer-tabs {
+    margin-bottom: 8px;
+  }
+
+  .status-following {
+    color: #00a43f;
+    font-weight: bold;
+  }
+
+  .status-dealed {
+    color: #3471ff;
+    font-weight: bold;
+  }
+
+  .status-lost {
+    color: #ff0000;
+    font-weight: bold;
+  }
+
+  .customer-table {
+    background: var(--art-main-bg-color);
+    border-radius: 8px;
+    margin-top: 0;
+  }
+
+  .filter-more-btn {
+    text-align: center;
+    margin-top: 8px;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .tag-item {
+    cursor: pointer;
+    border-radius: 4px;
+    padding: 2px 10px;
+    margin-right: 8px;
+    transition: background 0.2s;
+    min-width: 100px;
+    display: inline-block;
+  }
+
+  .tag-active {
+    background: #3471ff;
+    color: #fff;
+  }
+</style>