修改工单客户等页面

2025-07-29 16:42:36 +08:00
parent 695ebbcc71
commit 0cef82279f
12 changed files with 733 additions and 563 deletions
@@ -26,7 +26,7 @@ export class CrmService {
  }
  //删除客户
  static getcustomerdelete(params: any) {
-    return request.get<Api.Crm.CrmListData>({
+    return request.get<any>({
      url: '/crm/customer/delete',
      params
    })
@@ -39,13 +39,14 @@ export class WorkService {
      // showErrorMessage: false // 不显示错误消息
    })
  }
-  //工单状态下拉选择框 
-  static getStatus() {
+  //工单状态下拉选择框
+  static getStatus(params: any) {
    return request.get<Api.Brand.BrandInfo>({
-      url: '/ticket/ticket/getStatus'
+      url: '/ticket/ticket/getStatus',
+      params
    })
  }
-  //工单沟通记录  
+  //工单沟通记录
  static getconversationList(params: any) {
    return request.get<Api.Work.WorkListData>({
      url: '/ticket/conversation/list',
@@ -53,7 +54,7 @@ export class WorkService {
    })
  }
  //添加工单记录   ticket/conversation/add
-  static conversationAdd(params:any) {
+  static conversationAdd(params: any) {
    return request.post<Api.Work.AddResponse>({
      url: '/ticket/conversation/add',
      params
@@ -79,7 +79,7 @@
          </div>
        </div> -->
        <!-- 语言 -->
-        <div class="btn-box" v-if="showLanguage">
+        <!-- <div class="btn-box" v-if="showLanguage">
          <el-dropdown @command="changeLanguage" popper-class="langDropDownStyle">
            <div class="btn language-btn">
              <i class="iconfont-sys">&#xe611;</i>
@@ -98,7 +98,7 @@
              </el-dropdown-menu>
            </template>
          </el-dropdown>
-        </div>
+        </div> -->
        <!-- 设置 -->
        <!-- <div class="btn-box" @click="openSetting">
          <el-popover :visible="showSettingGuide" placement="bottom-start" :width="190" :offset="0">
@@ -138,7 +138,10 @@
            popper-style="border: 1px solid var(--art-border-dashed-color); border-radius: calc(var(--custom-radius) / 2 + 4px); padding: 5px 16px; 5px 16px;"
          >
            <template #reference>
-              <img class="cover" src="@imgs/user/avatar.webp" />
+              <img
+                class="cover"
+                :src="getUserInfo.user.avatar ? getUserInfo.user.avatar : '@imgs/user/avatar.webp'"
+              />
            </template>
            <template #default>
              <div class="user-menu-box">
@@ -155,15 +158,19 @@
                    <span class="email">{{ userInfo.user.email }}</span>
                  </div>
                </div> -->
-                <ul class="user-menu">
+                <ul class="user-menu" style="border: none">
                  <li @click="goPage('/system/user-center')">
                    <i class="menu-icon iconfont-sys">&#xe734;</i>
                    <span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
                  </li>
-                  <li @click="goPage('/crmpc/recycle')">
+                  <li @click="goPage('/work/myOrder')">
+                    <i class="menu-icon iconfont-sys">&#xe828;</i>
+                    <span class="menu-txt">我的工单</span>
+                  </li>
+                  <!-- <li @click="goPage('/crmpc/recycle')">
                    <i class="menu-icon iconfont-sys">&#xe828;</i>
                    <span class="menu-txt">回收站</span>
-                  </li>
+                  </li> -->
                  <!-- <li @click="goPage('/system/user-center')">
                    <i class="menu-icon iconfont-sys">&#xe734;</i>
                    <span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
@@ -176,10 +183,10 @@
                    <i class="menu-icon iconfont-sys">&#xe8d6;</i>
                    <span class="menu-txt">{{ $t('topBar.user.github') }}</span>
                  </li> -->
-                  <li @click="lockScreen()">
+                  <!-- <li @click="lockScreen()">
                    <i class="menu-icon iconfont-sys">&#xe817;</i>
                    <span class="menu-txt">{{ $t('topBar.user.lockScreen') }}</span>
-                  </li>
+                  </li> -->
                  <div class="line"></div>
                  <div class="logout-btn" @click="loginOut">
                    {{ $t('topBar.user.logout') }}
@@ -215,7 +222,7 @@
  const settingStore = useSettingStore()
  const userStore = useUserStore()
  const router = useRouter()
-
+  const { getUserInfo } = useUserStore()
  const {
    showMenuButton,
    showRefreshButton,
@@ -229,7 +236,7 @@
    tabStyle
  } = storeToRefs(settingStore)

-  const { language, getUserInfo: userInfo } = storeToRefs(userStore)
+  const { language } = storeToRefs(userStore)

  const { menuList } = storeToRefs(useMenuStore())

@@ -3,7 +3,10 @@
    <div v-if="!isLock">
      <el-dialog v-model="visible" :width="370" :show-close="false" @open="handleDialogOpen">
        <div class="lock-content">
-          <img class="cover" src="@imgs/user/avatar.webp" />
+          <img
+            class="cover"
+            :src="getUserInfo.user.avatar ? getUserInfo.user.avatar : '@imgs/user/avatar.webp'"
+          />
          <div class="username">{{ userInfo.userName }}</div>
          <el-form ref="formRef" :model="formData" :rules="rules" @submit.prevent="handleLock">
            <el-form-item prop="password">
@@ -32,7 +35,10 @@

    <div class="unlock-content" v-else>
      <div class="box">
-        <img class="cover" src="@imgs/user/avatar.webp" />
+        <img
+          class="cover"
+          :src="getUserInfo.user.avatar ? getUserInfo.user.avatar : '@imgs/user/avatar.webp'"
+        />
        <div class="username">{{ userInfo.userName }}</div>
        <el-form
          ref="unlockFormRef"
@@ -77,7 +83,7 @@
  import { mittBus } from '@/utils/sys'
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
-
+  const { getUserInfo } = useUserStore()
  const ENCRYPT_KEY = import.meta.env.VITE_LOCK_ENCRYPT_KEY
  const userStore = useUserStore()
  const { info: userInfo, lockPassword, isLock } = storeToRefs(userStore)
@@ -6,7 +6,12 @@
    <section class="search-bar art-custom-card">
      <el-form v-model:filter="formFilters" label-position="left">
        <el-row class="search-form-row" :gutter="12">
-          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
+          <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
+            <el-form-item label="关键字" label-width="70px">
+              <el-input v-model="filter.keyword" placeholder="请输入关键字" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
            <el-form-item label="状态" label-width="70px">
              <el-select v-model="filter.status">
                <el-option label="全部" value="" />
@@ -16,7 +21,7 @@
              </el-select>
            </el-form-item>
          </el-col>
-          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
+          <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
            <el-form-item label="渠道" label-width="70px">
              <el-select v-model="filter.channel">
                <el-option v-for="v in channelOptions" :key="v.id" :label="v.name" :value="v.id">
@@ -39,7 +44,7 @@
            </el-form-item>
          </el-col>

-          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="action-column">
+          <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="action-column">
            <div
              class="action-buttons-wrapper"
              :style="{
@@ -79,6 +84,7 @@
        @current-change="handleCurrentChange"
      >
        <template #default>
+          <el-table-column prop="order_no" label="SN"></el-table-column>
          <el-table-column prop="contacts" label="客户名称"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
          <el-table-column prop="phone" label="国家">
@@ -124,7 +130,7 @@
              </span>
            </template>
          </el-table-column>
-          <el-table-column label="倒计时" min-width="140">
+          <!-- <el-table-column label="倒计时" min-width="140">
            <template #default="scope">
              <span :class="getCountdownClass(scope.row.countdown)" v-if="scope.row.status==1">
                <span class="custom-clock-icon" style="margin-right: 4px; vertical-align: middle"
@@ -133,7 +139,7 @@
                {{ getCountdown(scope.row.countdown) }}
              </span>
            </template>
-          </el-table-column>
+          </el-table-column> -->
          <el-table-column fixed="right" label="操作" width="260px">
            <template #default="scope">
              <div class="follow-action fenpei" @click="onFenpei(scope.row)">
@@ -172,7 +178,7 @@
      </ArtTable>
    </div>
  </div>
-  <el-dialog v-model="detailDialogVisible" title="详情">
+  <el-dialog v-model="detailDialogVisible" title="详情"  width="700px">
    <div class="detail-info-table">
      <div class="row">
        <div>客户名称：{{ detailRow.contacts }}</div>
@@ -203,7 +209,7 @@
      </div>
    </div>
    <div class="dtitle">详情内容</div>
-    <div v-if="detailRow" v-html="detailRow.content">
+    <div v-if="detailRow" v-html="detailRow.content" class="detils-content">
      
    </div>
  </el-dialog>
@@ -322,7 +328,8 @@
  const filter = ref({
    status: '',
    time: '',
-    channel: ''
+    channel: '',
+    keyword: ''
  })
  const pagination = reactive({
    currentPage: 1,
@@ -356,7 +363,8 @@
    filter.value = {
      status: '',
      time: '',
-      channel: ''
+      channel: '',
+      keyword: ''
    }
    Object.assign(formFilters, { ...filter })
    pagination.currentPage = 1 // 重置到第一页
@@ -405,6 +413,7 @@
        size: pageSize,
        channel: filter.value.channel,
        status: filter.value.status,
+        keyword: filter.value.keyword,
        time: formattedTimeRange()
      }
      const { records, current, size, total } = await manageService.getinquiryList(params)
@@ -436,6 +445,7 @@
  }

  onMounted(() => {
+    getgetChannel()
    gettableList()
    timer.value = window.setInterval(() => {
      refreshKey.value++
@@ -498,11 +508,11 @@
      whatsapp: '',
      content: ''
    })
+    editorHtml.value = ''
  }
  const addfn = () => {
    dialogType.value = 'add'
    reactiveForm()
-    getgetChannel()
    getMagnitude()
    getarea()
    AddDialogVisible.value = true
@@ -525,22 +535,31 @@
  }

  function onDetail(row: any) {
+    row.content = processImages(row.content) // 处理图片
    detailRow.value = row
    detailDialogVisible.value = true
  }
  //编辑
+  function processImages(html: string) {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+    doc.querySelectorAll('img').forEach((img) => {
+      img.style.maxWidth = '100%'
+      img.style.height = 'auto'
+    })
+    return doc.body.innerHTML
+  }
  const carrid = ref('')
  const onEdit = async (row: any) => {
    dialogType.value = 'edit'
-    getgetChannel()
    getMagnitude()
    getarea()
    AddDialogVisible.value = true
    carrid.value = row.id
    addForm = reactive({
-      channel: row.channel ? row.channel.id : '',
+      channel: row.channelInfo ? row.channelInfo.id : '',
      quality: row.quality,
-      country: row.country ? row.country.id : '',
+      country: row.countryInfo ? row.countryInfo.id : '',
      email: row.email,
      tel: row.tel,
      contacts: row.contacts,
@@ -743,7 +762,7 @@
  }

  .fenpei {
-    color: #a233c6 !important;
+    color: #3471ff !important;
  }

  .detil {
@@ -773,6 +792,7 @@
  }

  .detail-info-table {
+    padding-left: 15px;
    .row {
      display: flex;
      justify-content: flex-start;
@@ -805,5 +825,12 @@
    color: #333;
    font-size: 16px;
    font-weight: bold;
+    padding-left: 15px;
+  }
+  .detils-content {
+    padding-left: 15px;
+    img {
+      max-width: 100% !important;
+    }
  }
 </style>
@@ -9,7 +9,7 @@
            {{ isDark ? '&#xe6b5;' : '&#xe725;' }}
          </i>
        </div> -->
-        <ElDropdown @command="changeLanguage" popper-class="langDropDownStyle">
+        <!-- <ElDropdown @command="changeLanguage" popper-class="langDropDownStyle">
          <div class="btn language-btn">
            <i class="iconfont-sys icon-language">&#xe611;</i>
          </div>
@@ -26,7 +26,7 @@
              </div>
            </ElDropdownMenu>
          </template>
-        </ElDropdown>
+        </ElDropdown> -->
      </div>
      <div class="header">
        <ArtLogo class="icon" />
@@ -40,7 +40,7 @@
            <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-radio-group v-model="form.sex">
              <el-radio label="0">未知</el-radio>
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
@@ -40,7 +40,7 @@
            <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-radio-group v-model="form.sex">
              <el-radio :label="0">未知</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
@@ -106,11 +106,20 @@
              <el-link
                type="primary"
                underline="never"
+                style="margin-right: 8px"
                @click="goAddFollow(scope.row)"
                v-if="hasAuth('crm_customer@follow_add')"
              >
                <i class="iconfont-sys">&#xe6bf;</i> 添加跟进
              </el-link>
+              <el-link
+                type="danger"
+                underline="never"
+                @click="delectfn(scope.row)"
+                v-if="hasAuth('crm_customer@follow_delete')"
+              >
+                <i class="iconfont-sys">&#xe6d4;</i> 删除
+              </el-link>
            </template>
          </el-table-column>
        </template>
@@ -197,11 +206,11 @@
  // 处理表格分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.pageSize = newPageSize
-    // getWorkList()
+    gettableList()
  }
  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.currentPage = newCurrentPage
-    // getWorkList()
+    gettableList()
  }
  function statusClass(status: any) {
    if (status === 0) return 'status-following'
@@ -235,6 +244,23 @@
    pagination.currentPage = 1
    gettableList()
  }
+  //删除
+  const delectfn = (row: any) => {
+    ElMessageBox.confirm('确定要删除此用户吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        const res = await CrmService.getcustomerdelete({ id: row.id })
+        ElMessage.success(res?.message || '提交成功！')
+        gettableList()
+        // 你可以在这里调用接口或做后续处理
+      })
+      .catch(() => {
+        // 用户点击了取消
+      })
+  }
 </script>

 <style scoped lang="scss">
@@ -243,7 +269,9 @@
    color: #333;
    font-weight: bold;
  }
-
+  :deep(.el-table__empty-block) {
+    height: 300px !important;
+  }
  :deep(.el-table__body tr.custom-table-row td) {
    border-bottom: 1px solid #f7f9fa !important;
    border-right: 1px solid #f7f9fa !important;
@@ -11,7 +11,7 @@
            "
          />
          <h2 class="name">{{ userInfo.name }}</h2>
-          <p class="des">ID:{{ userInfo.id }}</p>
+          <p class="des">sn:{{ userInfo.sn }}</p>
          <div class="outer-info">
            <div class="info-row">
              <span class="info-label">电 话：</span>
@@ -67,7 +67,7 @@
                <el-input v-model="form.name" :disabled="!isEdit" />
              </ElFormItem>
              <ElFormItem label="性别" prop="sex" class="right-input">
-                <ElSelect v-model="form.sex" placeholder="Select" :disabled="!isEdit">
+                <ElSelect v-model="form.sex" placeholder="未知" :disabled="!isEdit">
                  <ElOption
                    v-for="item in options"
                    :key="item.value"
@@ -141,7 +141,7 @@
                      class="qrcode-img"
                    />
                    <span v-else class="qrcode-upload-text">
-                      <img :src="imageUrl" class="qrcode-img" />
+                      <img :src="imageUrls" class="qrcode-img" />
                    </span>
                  </div>
                </el-upload>
@@ -213,6 +213,7 @@
  interface CustomerInfo {
    [key: string]: any
  }
+  const imageUrls = ref(imageUrl)
  const imageUrlavatar = ref('')
  const socialize_pic_full = ref('')
  const countryOptions = ref<any>()
@@ -263,6 +264,10 @@
    // })

    const options = [
+      {
+        value: '',
+        label: '未知'
+      },
      {
        value: '1',
        label: '男'
@@ -309,6 +314,8 @@
    function handleUploadavatarqrcode(response: any) {
      // 假设返回图片地址字段为 response.url 或 response.data.url
      socialize_pic_full.value = response.url || (response.data && response.data.file_url) || ''
+      imageUrls.value = response.url || (response.data && response.data.file_url) || ''
+      
      // 如需同步到 form.picture
      form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
    }
@@ -50,7 +50,7 @@
      </ArtTable>

      <ElDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增' : '编辑'" width="60%" align-center>
-        <ElForm ref="formRef" :model="form" label-width="160px">
+        <ElForm ref="formRef" :model="form" label-width="120px" style="padding-right: 30px">
          <ElFormItem label="问题分类" prop="categorie_id">
            <ElSelect v-model="form.categorie_id">
              <ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" />
@@ -62,16 +62,20 @@
            <ArtWangEditor class="el-top" v-model="editorHtml" />
          </ElFormItem>
          <ElFormItem label="上传附件" prop="attachment">
-            <ElUpload 
-              v-model:file-list="fileList" 
-              class="upload-demo" 
-              :action="actionImageUplode" 
+            <ElUpload
+              v-model:file-list="fileList"
+              class="upload-demo"
+              :action="actionImageUplode"
              :on-success="handleUploadSuccess"
              :headers="uploadHeaders"
-              multiple 
-              :limit="3">
+              multiple
+              :limit="3"
+              :on-exceed="handleExceed"
+            >
              <el-button type="primary">上传</el-button>
            </ElUpload>
+          </ElFormItem>
+          <ElFormItem label="" prop="">
            <!-- 附件预览区 -->
            <div class="attachment-preview" v-if="fileList.length">
              <div class="attachment-list">
@@ -113,8 +117,17 @@
          <!-- 聊天消息区域 -->
          <div class="chat-messages" ref="messageContainer">
            <template v-for="(message, index) in messages" :key="index">
-              <div :class="['message-item', String(message.user_id) === String(userid) ? 'message-right' : 'message-left']">
-                <el-avatar :size="32" :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" class="message-avatar" />
+              <div
+                :class="[
+                  'message-item',
+                  String(message.user_id) === String(userid) ? 'message-right' : 'message-left'
+                ]"
+              >
+                <el-avatar
+                  :size="32"
+                  :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar"
+                  class="message-avatar"
+                />
                <div class="message-content">
                  <div class="message-info">
                    <span class="sender-name">{{ message.user_id }}</span>
@@ -125,9 +138,15 @@
              </div>
            </template>
          </div>
-          <div class="chat-input"  v-if="hasAuth('work_order@conversation_add')">
-            <el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
-              @keyup.enter.prevent="sendMessage" />
+          <div class="chat-input" v-if="hasAuth('work_order@conversation_add')">
+            <el-input
+              v-model="messageText"
+              type="textarea"
+              :rows="3"
+              placeholder="输入消息"
+              resize="none"
+              @keyup.enter.prevent="sendMessage"
+            />
            <ElInput v-model="ticket_id" type="hidden" />
            <div class="chat-input-actions">
              <el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
@@ -224,7 +243,7 @@ const statusList = ref<any>()
 const getstatusList = async () => {
  try {
    // 这里调用获取品牌列表的接口
-    const response = await WorkService.getStatus()
+    const response = await WorkService.getStatus({})
    statusList.value = response || []
  } catch (error) { }
 }
@@ -381,7 +400,9 @@ const delCodeTrim = (content: string): string => {
  return content.replace(/(\s*)<\/code>/g, '</code>')
 }
 //添加工单
-
+const handleExceed = () => {
+  ElMessage.warning('最多上传3个文件')
+}
 const uploadedFiles = ref<any[]>([])
 const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
  // 只处理上传成功的文件