添加登录

src/views/auth/feishu-callback.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="feishu-callback">
+    <div v-if="loading">正在登录，请稍候...</div>
+    <div v-else-if="error">{{ error }}</div>
+    <div v-else>登录成功，正在跳转...</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/modules/user'
+import { UserService } from '@/api/usersApi'
+
+const loading = ref(true)
+const error = ref('')
+const userStore = useUserStore()
+const router = useRouter()
+onMounted(async () => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const code = urlParams.get('code')
+  const state = urlParams.get('state')
+  if (!code) {
+    error.value = '未获取到飞书授权 code'
+    loading.value = false
+    return
+  }
+  try {
+    // 调用后端接口换 token，接口路径请根据实际情况调整
+    const { data } = await UserService.login({
+        feishu_code: code
+    })
+     // 存储token和用户信息
+    userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
+    const userInfo = await UserService.getUserInfo()
+    userStore.setUserInfo(userInfo)
+    userStore.setLoginStatus(true)
+    router.replace('/')
+  } catch (e: any) {
+    error.value = e?.response?.data?.message || '登录失败，请重试'
+    router.replace('/')
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.feishu-callback {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #333;
+}
+</style> 

src/views/auth/login/index.vue

@@ -27,6 +27,24 @@
             </ElDropdownMenu>
           </template>
         </ElDropdown>
+        <ElDropdown @command="changeCompany" popper-class="langDropDownStyle">
+          <div class="btn language-btn">
+            <i class="iconfont-sys icon-language">&#xe8af;</i>公司
+          </div>
+          <template #dropdown>
+            <ElDropdownMenu>
+              <div v-for="cany in companyList" :key="cany.id" class="lang-btn-item">
+                <ElDropdownItem
+                  :command="cany.id"
+                  :class="{ 'is-selected': companyid === cany.value }"
+                >
+                  <span class="menu-txt">{{ cany.name }}</span>
+                  <i v-if="companyid === cany.id" class="iconfont-sys icon-check">&#xe621;</i>
+                </ElDropdownItem>
+              </div>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown>
       </div>
       <div class="header">
         <ArtLogo class="icon" />
@@ -34,85 +52,114 @@
       </div>
       <div class="login-wrap">
         <div class="form">
-          <h3 class="title">{{ $t('login.title') }}</h3>
-          <p class="sub-title">{{ $t('login.subTitle') }}</p>
-          <ElForm
-            ref="formRef"
-            :model="formData"
-            :rules="rules"
-            @keyup.enter="handleSubmit"
-            style="margin-top: 25px"
-          >
-            <ElFormItem prop="account">
-              <ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
-                <ElOption
-                  v-for="account in accounts"
-                  :key="account.key"
-                  :label="account.label"
-                  :value="account.key"
-                >
-                  <span>{{ account.label }}</span>
-                </ElOption>
-              </ElSelect>
-            </ElFormItem>
-            <ElFormItem prop="username">
-              <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
-            </ElFormItem>
-            <ElFormItem prop="password">
-              <ElInput
-                :placeholder="$t('login.placeholder[1]')"
-                v-model.trim="formData.password"
-                type="password"
-                radius="8px"
-                autocomplete="off"
-                show-password
-              />
-            </ElFormItem>
-            <div class="drag-verify">
-              <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
-                <ArtDragVerify
-                  ref="dragVerify"
-                  v-model:value="isPassing"
-                  :width="width < 500 ? 328 : 438"
-                  :text="$t('login.sliderText')"
-                  textColor="var(--art-gray-800)"
-                  :successText="$t('login.sliderSuccessText')"
-                  :progressBarBg="getCssVar('--el-color-primary')"
-                  background="var(--art-gray-200)"
-                  handlerBg="var(--art-main-bg-color)"
+          <!-- 登录方式切换 tab -->
+          <div class="login-type-tabs">
+            <span :class="{active: activeLoginType === 'password'}" @click="activeLoginType = 'password'">账号密码登录</span>
+            <span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span>
+          </div>
+          <div v-if="activeLoginType === 'password'">
+            <!-- 原有账号密码登录表单内容 -->
+            <!-- <h3 class="title">{{ $t('login.title') }}</h3> -->
+            <!-- <p class="sub-title">{{ $t('login.subTitle') }}</p> -->
+            <ElForm
+              ref="formRef"
+              :model="formData"
+              :rules="rules"
+              @keyup.enter="handleSubmit"
+              style="margin-top: 25px"
+            >
+              <!-- <ElFormItem prop="account">
+                <ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
+                  <ElOption
+                    v-for="account in accounts"
+                    :key="account.key"
+                    :label="account.label"
+                    :value="account.key"
+                  >
+                    <span>{{ account.label }}</span>
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem> -->
+              <ElFormItem prop="username">
+                <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
+              </ElFormItem>
+              <ElFormItem prop="password">
+                <ElInput
+                  :placeholder="$t('login.placeholder[1]')"
+                  v-model.trim="formData.password"
+                  type="password"
+                  radius="8px"
+                  autocomplete="off"
+                  show-password
                 />
+              </ElFormItem>
+              <div class="drag-verify">
+                <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
+                  <ArtDragVerify
+                    ref="dragVerify"
+                    v-model:value="isPassing"
+                    :width="width < 500 ? 328 : 438"
+                    :text="$t('login.sliderText')"
+                    textColor="var(--art-gray-800)"
+                    :successText="$t('login.sliderSuccessText')"
+                    :progressBarBg="getCssVar('--el-color-primary')"
+                    background="var(--art-gray-200)"
+                    handlerBg="var(--art-main-bg-color)"
+                  />
+                </div>
+                <p class="error-text" :class="{ 'show-error-text': !isPassing && isClickPass }">{{
+                  $t('login.placeholder[2]')
+                }}</p>
               </div>
-              <p class="error-text" :class="{ 'show-error-text': !isPassing && isClickPass }">{{
-                $t('login.placeholder[2]')
-              }}</p>
-            </div>
 
-            <div class="forget-password">
-              <ElCheckbox v-model="formData.rememberPassword">{{
-                $t('login.rememberPwd')
-              }}</ElCheckbox>
-              <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink>
-            </div>
+              <div class="forget-password">
+                <ElCheckbox v-model="formData.rememberPassword">{{
+                  $t('login.rememberPwd')
+                }}</ElCheckbox>
+                <!-- <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink> -->
+              </div>
 
-            <div style="margin-top: 30px">
+              <div style="margin-top: 30px">
+                <ElButton
+                  class="login-btn"
+                  type="primary"
+                  @click="handleSubmit"
+                  :loading="loading"
+                  v-ripple
+                >
+                  {{ $t('login.btnText') }}
+                </ElButton>
+              </div>
+
+              <div class="footer">
+                <p>
+                  {{ $t('login.noAccount') }}
+                  <RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
+                </p>
+              </div>
+            </ElForm>
+          </div>
+          <div v-else>
+            <div  class="qrcode-login"  v-if="!iscompany">请先选择公司</div>
+            <div v-else>
+              <div  class="qrcode-login" v-if="isInFeishu" >
+              <img class="left-bg" src="@imgs/login/feishu.png" />
               <ElButton
                 class="login-btn"
                 type="primary"
-                @click="handleSubmit"
-                :loading="loading"
+                @click="feishuSubmit"
                 v-ripple
               >
-                {{ $t('login.btnText') }}
+              {{ $t('login.btnText') }}
               </ElButton>
             </div>
-
-            <div class="footer">
-              <p>
-                {{ $t('login.noAccount') }}
-                <RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
-              </p>
+            <div  class="qrcode-login" v-else>
+              <div id="login_container"></div>
+              <p class="qrcode-tip">请使用飞书App扫码登录</p>
             </div>
-          </ElForm>
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>
@@ -130,6 +177,7 @@
   import { LanguageEnum, SystemThemeEnum } from '@/enums/appEnum'
   import { useI18n } from 'vue-i18n'
   import { HttpError } from '@/utils/http/error'
+  import { onMounted, ref, watch, nextTick } from 'vue'
 
   defineOptions({ name: 'Login' })
 
@@ -180,10 +228,14 @@
   const router = useRouter()
   const isPassing = ref(false)
   const isClickPass = ref(false)
-
+  const activeLoginType = ref<'password' | 'qrcode'>('qrcode')
+  const isInFeishu = /Lark|Feishu/i.test(navigator.userAgent);
+  // const isInFeishu = true;
   const systemName = AppConfig.systemInfo.name
   const formRef = ref<FormInstance>()
-
+  const companyid = ref('')
+  const iscompany = ref(false)  
+  const feishuresponse=ref()
   const formData = reactive({
     account: '',
     username: '',
@@ -198,17 +250,75 @@
 
   const loading = ref(false)
   const { width } = useWindowSize()
-
-  onMounted(() => {
-    setupAccount('super')
-  })
-
-  // 设置账号
-  const setupAccount = (key: AccountKey) => {
-    const selectedAccount = accounts.value.find((account: Account) => account.key === key)
-    formData.account = key
-    formData.username = selectedAccount?.userName ?? ''
-    formData.password = selectedAccount?.password ?? ''
+  const feishulogin = async () => {
+    userStore.setLoginType('feishu')
+    if (isInFeishu) {
+      
+      // 飞书特定的逻辑
+    } else {
+      // 普通浏览器的逻辑
+      await nextTick()
+      // 等待 SDK 加载
+      const waitForQRLogin = () =>
+        new Promise<void>((resolve) => {
+          const check = () => {
+            // @ts-ignore
+            if (window.QRLogin) resolve()
+            else setTimeout(check, 100)
+          }
+          check()
+        })
+      await waitForQRLogin()
+      // @ts-ignore
+      const container = document.getElementById('login_container')
+      if (container) container.innerHTML = ''
+      // @ts-ignore
+      // 飞书二维码登录参数（请替换为你的实际参数）
+      const fclient_id = feishuresponse.value?.app_id
+      const redirect_uri = feishuresponse.value?.r_url
+      const state = feishuresponse.value?.state
+      const feishuGotoUrl = 'https://passport.feishu.cn/suite/passport/oauth/authorize?client_id='+fclient_id+'&redirect_uri='+redirect_uri+'&response_type=code&state='+state;
+      // @ts-ignore
+      const QRLoginObj = window.QRLogin({
+        id: 'login_container',
+        goto: feishuGotoUrl,
+        width: '250',
+        height: '250',
+        style: 'width:350px;height:350px;border:none'
+      })
+      const handleMessage = function (event: MessageEvent) {
+        if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
+          const loginTmpCode = event.data.tmp_code
+          window.location.href = `${feishuGotoUrl}&tmp_code=${loginTmpCode}`
+        }
+      }
+      window.addEventListener('message', handleMessage, false)
+    }
+  }
+   watch(
+    (activeLoginType as import('vue').Ref<string>),
+    async (val) => {
+      if (val === 'qrcode') {
+        userStore.setLoginType('feishu')
+        if(companyid.value!=''){
+          feishulogin()
+        }
+      }else{
+        userStore.setLoginType('upwd')
+      }
+    },
+    { immediate: true }
+  )
+  //飞书登录
+   const feishuSubmit = async () => {
+    try {
+      const { auth_url } = await UserService.getfeishuscope()
+        window.location.href = auth_url
+    } catch (error) {
+      ElMessage.error('登录失败，请稍后重试')
+    } finally {
+      resetDragVerify()
+    }
   }
 
   // 登录
@@ -231,18 +341,18 @@
       // 登录请求
       const { username, password } = formData
 
-      const { token, refreshToken } = await UserService.login({
-        userName: username,
+      const {  data } = await UserService.login({
+        account: username,
         password
       })
 
       // 验证token
-      if (!token) {
+      if (!data.access_token) {
         throw new Error('Login failed - no token received')
       }
 
       // 存储token和用户信息
-      userStore.setToken(token, refreshToken)
+      userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
       const userInfo = await UserService.getUserInfo()
       userStore.setUserInfo(userInfo)
       userStore.setLoginStatus(true)
@@ -282,7 +392,9 @@
       })
     }, 150)
   }
-
+  onMounted(() => {
+    getcompanyList()
+  })
   // 切换语言
   const { locale } = useI18n()
 
@@ -291,6 +403,33 @@
     locale.value = lang
     userStore.setLanguage(lang)
   }
+  //获取公司 getCompanyList
+  const companyList = ref<any>()
+  const getcompanyList = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const response = await UserService.getCompanyList()
+      companyList.value = response || []
+    } catch (error) { }
+  }
+  //切换公司
+  
+  const changeCompany = (company: any) => {
+    if (companyid.value === company) return
+    const companyt = companyList.value.find((c: any) => c.id === company)
+    companyid.value = company
+    iscompany.value = company
+    userStore.setCompany(company,companyt?.abbr)
+    getfeishuAppList()
+  }
+  const getfeishuAppList = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
+      feishulogin()
+      console.log(feishuresponse)
+    } catch (error) { }
+  }
 
   // 切换主题
   import { useTheme } from '@/composables/useTheme'
@@ -304,4 +443,27 @@
 
 <style lang="scss" scoped>
   @use './index';
+  .login-type-tabs {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    span {
+      padding: 8px 24px;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      &.active {
+        color: #409eff;
+        border-bottom: 2px solid #409eff;
+      }
+    }
+  }
+  .qrcode-login {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .qrcode-tip {
+      margin-top: 16px;
+      color: #888;
+    }
+  }
 </style>

src/views/auth/register/index.vue

@@ -39,7 +39,7 @@
               />
             </ElFormItem>
 
-            <ElFormItem prop="agreement">
+            <!-- <ElFormItem prop="agreement">
               <ElCheckbox v-model="formData.agreement">
                 {{ $t('register.agreeText') }}
                 <router-link
@@ -48,7 +48,7 @@
                   >{{ $t('register.privacyPolicy') }}</router-link
                 >
               </ElCheckbox>
-            </ElFormItem>
+            </ElFormItem> -->
 
             <div style="margin-top: 15px">
               <ElButton
@@ -81,6 +81,7 @@
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { useI18n } from 'vue-i18n'
+  import { UserService } from '@/api/usersApi'
 
   defineOptions({ name: 'Register' })
 
@@ -150,13 +151,27 @@
     try {
       await formRef.value.validate()
       loading.value = true
+      // 注册请求
+      const { username, password,confirmPassword } = formData
 
-      // 模拟注册请求
-      setTimeout(() => {
-        loading.value = false
+      const { code } = await UserService.register({
+        account: username,
+        password,
+        confirm_password:confirmPassword
+      })
+      // 验证token
+      loading.value = false
+      if (code!= 200) {
+        throw new Error('Login failed - no token received')
+      }else{
         ElMessage.success('注册成功')
         toLogin()
-      }, 1000)
+      }
+      
+      // 模拟注册请求
+      // setTimeout(() => {
+      
+      // }, 1000)
     } catch (error) {
       console.log('验证失败', error)
     }

src/views/system/role/index.vue

@@ -11,22 +11,21 @@
       </ElCol>
     </ElRow>
 
-    <ArtTable :data="roleList" index>
+    <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="roleList" :currentPage="pagination.currentPage"
+      :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange">
       <template #default>
-        <ElTableColumn label="角色名称" prop="roleName" />
-        <ElTableColumn label="角色编码" prop="roleCode" />
-        <ElTableColumn label="描述" prop="des" />
+        <ElTableColumn label="角色名称" prop="name" />
+        <ElTableColumn label="角色编码" prop="id" />
+        <ElTableColumn label="描述" prop="desc" />
         <ElTableColumn label="启用" prop="enable">
           <template #default="scope">
-            <ElTag :type="scope.row.enable ? 'primary' : 'info'">
-              {{ scope.row.enable ? '启用' : '禁用' }}
+            <ElTag :type="scope.row.status ? 'primary' : 'info'">
+              {{ scope.row.status ? '启用' : '禁用' }}
             </ElTag>
           </template>
         </ElTableColumn>
-        <ElTableColumn label="创建时间" prop="date">
-          <template #default="scope">
-            {{ formatDate(scope.row.date) }}
-          </template>
+        <ElTableColumn label="创建时间" prop="created_at">
         </ElTableColumn>
         <ElTableColumn fixed="right" label="操作" width="200px">
           <template #default="scope">
@@ -122,9 +121,10 @@
   import { ElMessage, ElMessageBox } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { formatMenuTitle } from '@/router/utils/utils'
+  import { UserService } from '@/api/usersApi'
   // import { ButtonMoreItem } from '@/components/core/forms/ArtButtonMore.vue'
   import { Role, ROLE_LIST_DATA } from '@/mock/temp/formData'
-
+  const loading = ref(false)
   defineOptions({ name: 'Role' })
 
   const dialogVisible = ref(false)
@@ -133,7 +133,11 @@
   const treeRef = ref()
   const isExpandAll = ref(true)
   const isSelectAll = ref(false)
-
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
   // 处理菜单数据，将 authList 转换为子节点
   const processedMenuList = computed(() => {
     const processNode = (node: any) => {
@@ -188,10 +192,39 @@
     getTableData()
   })
 
-  const getTableData = () => {
-    roleList.value = ROLE_LIST_DATA
-  }
+  // const getTableData = () => {
+  //   roleList.value = ROLE_LIST_DATA
+  // }
+  // 获取列表数据
+const getTableData = async () => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = pagination
 
+    const { records, current, size, total } = await UserService.getRoleList({
+      current: currentPage,
+      size: pageSize
+    })
+    roleList.value = records.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
+  getTableData()
+}
+
+const handleCurrentChange = (newCurrentPage: number) => {
+  pagination.currentPage = newCurrentPage
+  getTableData()
+}
   const dialogType = ref('add')
 
   const showDialog = (type: string, row?: any) => {
@@ -213,16 +246,6 @@
     }
   }
 
-  // const buttonMoreClick = (item: ButtonMoreItem, row: any) => {
-  //   if (item.key === 'permission') {
-  //     showPermissionDialog()
-  //   } else if (item.key === 'edit') {
-  //     showDialog('edit', row)
-  //   } else if (item.key === 'delete') {
-  //     deleteRole()
-  //   }
-  // }
-
   const showPermissionDialog = () => {
     permissionDialog.value = true
   }

src/views/work/myOrder/index.vue

@@ -0,0 +1,662 @@
+<template>
+  <div class="page-content">
+    <ElRow>
+      <!-- <ElCol :xs="24" :sm="12" :lg="6">
+        <ElInput placeholder="工单编号"></ElInput>
+      </ElCol> -->
+      <div style="width: 12px"></div>
+      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
+        <!-- <ElButton v-ripple>搜索</ElButton> -->
+        <ElButton v-if="hasAuth('work_order_self@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
+      </ElCol>
+    </ElRow>
+
+    <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">
+      <template #default>
+        <ElTableColumn label="工单编号" prop="code" />
+        <ElTableColumn label="问题分类" prop="categorie_id">
+          <template #default="scope">
+            <div v-html="scope.row.categorie?scope.row.categorie.name:''"></div>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="问题描述" prop="content">
+          <template #default="scope">
+            <div v-html="scope.row.content"></div>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="状态" prop="status">
+          <template #default="scope">
+            <ElTag :type="scope.row.status == 1 ? 'info' : scope.row.status == 2 ?'primary' :scope.row.status == 4 ?'success' : 'danger'">
+              {{ scope.row.status == 1 ? '待受理' : scope.row.status == 2 ? '处理中' : 
+                scope.row.status == 4 ? "已完成":'关闭' }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="创建时间" prop="created_at" />
+        <ElTableColumn fixed="right" label="操作" width="240px">
+          <template #default="scope">
+            <ElRow>
+              <el-button v-if="scope.row.status == 1&&hasAuth('work_order_self@edit')" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
+              <el-button v-if="hasAuth('work_order_self@status')" link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
+              <el-button v-if="hasAuth('work_order_self@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
+              <!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
+            </ElRow>
+          </template>
+        </ElTableColumn>
+      </template>
+    </ArtTable>
+
+    <ElDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增' : '编辑'" width="60%" align-center>
+      <ElForm ref="formRef" :model="form" label-width="160px">
+        <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" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="问题描述" prop="content">
+          <!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> -->
+          <!-- 富文本编辑器 -->
+          <ArtWangEditor class="el-top" v-model="editorHtml" />
+        </ElFormItem>
+        <ElFormItem label="上传附件" prop="attachment">
+          <ElUpload 
+            v-model:file-list="fileList" 
+            class="upload-demo" 
+            :action="actionImageUplode" 
+            :on-success="handleUploadSuccess"
+            multiple 
+            :limit="3">
+            <el-button type="primary">Click to upload</el-button>
+          </ElUpload>
+          <!-- 附件预览区 -->
+          <div class="attachment-preview" v-if="fileList.length">
+            <div class="attachment-list">
+              <div v-for="(file, idx) in fileList" :key="file.name" class="attachment-item">
+                <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
+                  <img :src="file.file_url?file.file_url:file.response.data.file_url" :alt="file.name" class="attachment-thumb" @click="handleImageClick(imageList.findIndex(url => url === file.file_url?file.file_url:file.response.data.file_url))" />
+                </template>
+                <template v-else-if="/\.(mp4|webm|ogg)$/i.test(file.name)">
+                  <video :src="file.file_url?file.file_url:file.response.data.file_url" controls class="attachment-thumb" @click.prevent="handleVideoClick(file.file_url?file.file_url:file.response.data.file_url)"></video>
+                </template>
+                <template v-else>
+                  <a :href="file.file_url?file.file_url:file.response.data.file_url" target="_blank">{{ file.name }}</a>
+                </template>
+                <div class="attachment-filename">{{ file.name }}</div>
+              </div>
+            </div>
+          </div>
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="dialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+    <el-drawer v-model="isDrawerVisible" :size="isMobile ? '100%' : '480px'" :with-header="false">
+      <div class="chat-container">
+        <div class="header">
+          <div class="header-left">
+            <span class="name">工单记录</span>
+          </div>
+          <div class="header-right">
+            <el-icon class="icon-close" :size="20" @click="closeChat">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+        <!-- 聊天消息区域 -->
+        <div class="chat-messages" ref="messageContainer">
+          <template v-for="(message, index) in messages" :key="index">
+            <div :class="['message-item', message.isMe ? 'message-right' : 'message-left']">
+              <el-avatar :size="32" :src="message.isMe ? meAvatar : aiAvatar" class="message-avatar" />
+              <div class="message-content">
+                <div class="message-info">
+                  <span class="sender-name">{{ message.user_id }}</span>
+                  <span class="message-time">{{ message.updated_at }}</span>
+                </div>
+                <div class="message-text">{{ message.content }}</div>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="chat-input" v-if="hasAuth('work_order_self@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>
+          </div>
+        </div>
+
+      </div>
+    </el-drawer>
+
+    <ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
+      <ElForm ref="formRef" :model="statusform" label-width="120px">
+        <ElFormItem label="状态" prop="status">
+          <ElSelect v-model="statusform.status">
+            <ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="描述" prop="msg">
+          <ElInput v-model="statusform.msg" type="textarea" :rows="3" />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="dialogVisiblestatus = false">取消</ElButton>
+          <ElButton type="primary" @click="statusSubmit()">提交</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+
+    <!-- 图片预览弹窗 -->
+    <ElImageViewer v-if="imageViewerVisible" :url-list="imageList" :initial-index="imageViewerIndex" @close="imageViewerVisible = false" />
+    <!-- 视频预览弹窗 -->
+    <ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
+      <video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
+    </ElDialog>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { Order } from '@/mock/temp/formData'
+import { WorkService } from '@/api/workApi'
+import { ElImageViewer } from 'element-plus'
+import { useAuth } from "@/composables/useAuth";
+const { hasAuth } = useAuth();
+defineOptions({ name: 'Order' })
+let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
+const loading = ref(false)
+const editorHtml = ref('') // 编辑器内容
+const dialogVisible = ref(false)
+const dialogVisiblestatus = ref(false)
+const typeList = ref<any[]>([])
+const formRef = ref<FormInstance>()
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 500)
+// 抽屉显示状态
+const isDrawerVisible = ref(false)
+import meAvatar from '@/assets/img/avatar/avatar5.webp'
+import aiAvatar from '@/assets/img/avatar/avatar10.webp'
+// 消息相关数据
+const messages = ref<any[]>([])
+const messageText = ref('')
+// 滚动到底部
+const messageContainer = ref<HTMLElement | null>(null)
+const scrollToBottom = () => {
+  setTimeout(() => {
+    if (messageContainer.value) {
+      messageContainer.value.scrollTop = messageContainer.value.scrollHeight
+    }
+  }, 100)
+}
+const openChat = (row: any) => {
+  isDrawerVisible.value = true
+  getConversationList(row.id)
+}
+
+const closeChat = () => {
+  isDrawerVisible.value = false
+}
+//获取状态 下拉框 getStatus
+const statusList = ref<any>()
+const getstatusList = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const response = await WorkService.getStatus()
+    statusList.value = response || []
+  } catch (error) { }
+}
+//获取工单分类
+const categorieSelectList = ref<any>()
+const getcategorieSelectList = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const response = await WorkService.getcategorieselect()
+    categorieSelectList.value = response || []
+  } catch (error) { }
+}
+
+
+
+const fileList = ref<any[]>([])
+const form = reactive<Order>({
+  id: '',
+  categorie_id: '',
+  content: '',
+  attachment: []
+})
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+const paginationmsg = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+// 表格数据
+const tableData = ref<any[]>([])
+
+// 表格实例引用
+const tableRef = ref()
+
+onMounted(() => {
+  getWorkList()
+})
+
+// 获取列表数据
+const getWorkList = async () => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = pagination
+
+    const { data, current, size, total } = await WorkService.getWorkselfList({
+      current: currentPage,
+      size: pageSize
+    })
+    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
+  }
+}
+
+//获取工单记录 getconversationList
+const ticket_id =ref()
+const getConversationList = async (id:any) => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = paginationmsg
+    ticket_id.value = id
+    const { data, current, size, total } = await WorkService.getconversationList({
+      current: currentPage,
+      size: pageSize,
+      ticket_id: id
+    })
+    messages.value = data.map((item: any, index: number) => ({
+      ...item
+    }))
+    Object.assign(paginationmsg, { currentPage: current, pageSize: size, total })
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+// 发送工单记录消息
+const sendMessage = async () => {
+  const text = messageText.value.trim()
+  const ids = ticket_id.value
+  if (!text) return
+  
+  const { message } = await WorkService.conversationAdd({
+    content: text,
+    ticket_id: ids,
+  })
+  ElMessage.success(message)
+  messageText.value = ''
+  getConversationList(ids)
+  scrollToBottom()
+}    
+
+
+const dialogType = ref('add')
+
+const showDialog = (type: string, row?: any) => {
+  dialogVisible.value = true
+  dialogType.value = type
+  getcategorieSelectList()
+  if (type === 'edit' && row) {
+    form.id = row.id
+    form.categorie_id = row.categorie_id
+    form.content = row.content
+    editorHtml.value = row.content
+    // 回显附件
+    fileList.value = (row.attachments || []).map((item: { original_name: any; storage_path_full: any }) => ({
+      name: item.original_name,
+      file_url: item.storage_path_full,
+      status: 'success',
+      response: { data: item }
+    }))
+    // 如果你有 uploadedFiles 也要同步
+    uploadedFiles.value = row.attachments || []
+  } else {
+    // 新增时清空表单和上传文件
+    form.categorie_id = ''
+    form.content = ''
+    editorHtml.value = ''
+    fileList.value = []
+    uploadedFiles.value = []
+  }
+}
+
+const statusform = reactive({
+  id: '',
+  status: '',
+  msg: ''
+})
+
+const statusEdit = (row: any) => {
+  getstatusList()
+  dialogVisiblestatus.value = true
+  statusform.id = row.id
+}
+const deleteRole = () => {
+  ElMessageBox.confirm('确定删除该角色吗？', '删除确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'error'
+  }).then(() => {
+    ElMessage.success('删除成功')
+  })
+}
+const delCodeTrim = (content: string): string => {
+  return content.replace(/(\s*)<\/code>/g, '</code>')
+}
+//添加工单
+
+const uploadedFiles = ref<any[]>([])
+const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
+  // 只处理上传成功的文件
+  uploadedFiles.value = uploadFiles.filter(item => item.status === 'success').map(item => {
+      const data = item.response?.data
+      if (data) {
+        return {
+          id: data.id?data.id:'',
+          original_name: data.original_name,
+          storage_path: data.storage_path?data.storage_path:data.file_name
+        }
+      }
+      return null
+    })
+    .filter(Boolean)
+}
+const handleSubmit = async (formEl: FormInstance | undefined) => {
+  const { categorie_id} = form
+  editorHtml.value = delCodeTrim(editorHtml.value)
+  if(dialogType.value === 'add'){
+    const { message } = await WorkService.WorkAdd({
+      content: editorHtml.value,
+      categorie_id: categorie_id,
+      attachment:uploadedFiles.value
+    })
+    ElMessage.success(message)
+    dialogVisible.value = false
+    getWorkList()
+  }else{
+    const { message } = await WorkService.Workedit({
+      id:form.id,
+      content: editorHtml.value,
+      categorie_id: categorie_id,
+      attachment:uploadedFiles.value
+    })
+    ElMessage.success(message)
+    dialogVisible.value = false
+    getWorkList()
+  }
+  
+
+}
+// 处理表格分页变化
+const handleSizeChange = (newPageSize: number) => {
+  pagination.pageSize = newPageSize
+  getWorkList()
+}
+
+const handleCurrentChange = (newCurrentPage: number) => {
+  pagination.currentPage = newCurrentPage
+  getWorkList()
+}
+//修改状态
+const statusSubmit = async () => {
+  // loading.value = true
+  const { msg, status, id } = statusform
+  const { message } = await WorkService.Workstatus({
+    id,
+    msg,
+    status
+  })
+  ElMessage.success(message)
+  dialogVisiblestatus.value = false
+  getWorkList()
+}
+
+// 图片预览相关
+const imageViewerVisible = ref(false)
+const imageViewerIndex = ref(0)
+const imageList = computed(() => fileList.value.filter(file => /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)).map(file => file.file_url?file.file_url:file.response.data.file_url))
+function handleImageClick(idx: number) {
+  imageViewerIndex.value = idx
+  imageViewerVisible.value = true
+}
+// 视频预览相关
+const videoDialogVisible = ref(false)
+const currentVideoUrl = ref('')
+function handleVideoClick(url: string) {
+  currentVideoUrl.value = url
+  videoDialogVisible.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  .svg-icon {
+    width: 1.8em;
+    height: 1.8em;
+    overflow: hidden;
+    vertical-align: -8px;
+    fill: currentcolor;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  .header-left {
+    .name {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .header-right {
+    .icon-close {
+      cursor: pointer;
+    }
+  }
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 70px);
+
+  .chat-messages {
+    flex: 1;
+    padding: 30px 16px;
+    overflow-y: auto;
+    border-top: 1px solid var(--el-border-color-lighter);
+
+    &::-webkit-scrollbar {
+      width: 5px !important;
+    }
+
+    .message-item {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: flex-start;
+      width: 100%;
+      margin-bottom: 30px;
+
+      .message-text {
+        font-size: 14px;
+        color: var(--art-gray-900);
+        border-radius: 6px;
+      }
+
+      &.message-left {
+        justify-content: flex-start;
+
+        .message-content {
+          align-items: flex-start;
+
+          .message-info {
+            flex-direction: row;
+          }
+
+          .message-text {
+            background-color: #f8f5ff;
+          }
+        }
+      }
+
+      &.message-right {
+        flex-direction: row-reverse;
+
+        .message-content {
+          align-items: flex-end;
+
+          .message-info {
+            flex-direction: row-reverse;
+          }
+
+          .message-text {
+            background-color: #e9f3ff;
+          }
+        }
+      }
+
+      .message-avatar {
+        flex-shrink: 0;
+      }
+
+      .message-content {
+        display: flex;
+        flex-direction: column;
+        max-width: 70%;
+
+        .message-info {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 4px;
+          font-size: 12px;
+
+          .message-time {
+            color: var(--el-text-color-secondary);
+          }
+
+          .sender-name {
+            font-weight: 500;
+          }
+        }
+
+        .message-text {
+          padding: 10px 14px;
+          line-height: 1.4;
+        }
+      }
+    }
+  }
+
+  .chat-input {
+    padding: 16px 16px 0;
+
+    .input-actions {
+      display: flex;
+      gap: 8px;
+      padding: 8px 0;
+    }
+
+    .chat-input-actions {
+      display: flex;
+      align-items: center; // 修正为单数
+      justify-content: right;
+      margin-top: 12px;
+
+      // 确保发送按钮与输入框对齐
+      el-button {
+        min-width: 80px;
+      }
+    }
+  }
+}
+
+.dark {
+  .chat-container {
+    .chat-messages {
+      .message-item {
+        &.message-left {
+          .message-text {
+            background-color: #232323 !important;
+          }
+        }
+
+        &.message-right {
+          .message-text {
+            background-color: #182331 !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.attachment-preview {
+  margin-top: 12px;
+  .attachment-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .attachment-item {
+    width: 130px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #fafbfc;
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+    padding: 10px 8px 6px 8px;
+    transition: box-shadow 0.2s, transform 0.2s;
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+      transform: translateY(-2px) scale(1.03);
+    }
+  }
+  .attachment-thumb {
+    max-width: 110px;
+    max-height: 90px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    margin-bottom: 6px;
+    object-fit: cover;
+    background: #fff;
+  }
+  .attachment-filename {
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+    word-break: break-all;
+    margin-top: 2px;
+  }
+}
+</style>

src/views/work/order/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="page-content">
     <ElRow>
-      <ElCol :xs="24" :sm="12" :lg="6">
+      <!-- <ElCol :xs="24" :sm="12" :lg="6">
         <ElInput placeholder="工单编号"></ElInput>
-      </ElCol>
+      </ElCol> -->
       <div style="width: 12px"></div>
       <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
-        <ElButton v-ripple>搜索</ElButton>
-        <ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
+        <!-- <ElButton v-ripple>搜索</ElButton> -->
+        <ElButton v-if="hasAuth('work_order@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
       </ElCol>
     </ElRow>
 
@@ -35,12 +35,12 @@
           </template>
         </ElTableColumn>
         <ElTableColumn label="创建时间" prop="created_at" />
-        <ElTableColumn fixed="right" label="操作" width="260px">
+        <ElTableColumn fixed="right" label="操作" width="240px">
           <template #default="scope">
             <ElRow>
-              <el-button v-if="scope.row.status == 1" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
-              <el-button link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
-              <el-button link @click="openChat(scope.row)"> 查看/回复 </el-button>
+              <el-button v-if="scope.row.status == 1&&hasAuth('work_order@edit')" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
+              <el-button v-if="hasAuth('work_order@status')" link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
+              <el-button v-if="hasAuth('work_order@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
               <!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
             </ElRow>
           </template>
@@ -123,7 +123,7 @@
             </div>
           </template>
         </div>
-        <div class="chat-input">
+        <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" />
@@ -170,6 +170,8 @@ import type { FormInstance } from 'element-plus'
 import { Order } from '@/mock/temp/formData'
 import { WorkService } from '@/api/workApi'
 import { ElImageViewer } from 'element-plus'
+import { useAuth } from "@/composables/useAuth";
+const { hasAuth } = useAuth();
 defineOptions({ name: 'Order' })
 let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
 const loading = ref(false)
@@ -367,10 +369,10 @@ const delCodeTrim = (content: string): string => {
 }
 //添加工单
 
-const uploadedFiles = ref([])
-const handleUploadSuccess = (response: any, file: any, fileList: { filter: (arg0: (item: any) => boolean) => { (): any; new(): any; map: { (arg0: (item: any) => { original_name: any; storage_path: any } | null): { (): any; new(): any; filter: { (arg0: BooleanConstructor): never[]; new(): any } }; new(): any } } }) => {
+const uploadedFiles = ref<any[]>([])
+const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
   // 只处理上传成功的文件
-  uploadedFiles.value = fileList.filter(item => item.status === 'success').map(item => {
+  uploadedFiles.value = uploadFiles.filter(item => item.status === 'success').map(item => {
       const data = item.response?.data
       if (data) {
         return {

src/views/work/type/index.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="page-content">
       <ElRow>
-        <ElCol :xs="24" :sm="12" :lg="6">
+        <!-- <ElCol :xs="24" :sm="12" :lg="6">
           <ElInput placeholder="名称"></ElInput>
-        </ElCol>
+        </ElCol> -->
         <div style="width: 12px"></div>
         <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
-          <ElButton v-ripple>搜索</ElButton>
+          <!-- <ElButton v-ripple>搜索</ElButton> -->
           <ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
         </ElCol>
       </ElRow>