修改页面

This commit is contained in:
浅念
2025-07-14 17:59:02 +08:00
parent 812e3c4b0c
commit 22ae0e86c8
18 changed files with 543 additions and 531 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Vite + Vue3 + TS</title> <title>系统管理</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/x-icon" href="src/assets/img/favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="src/assets/img/favicon.ico" />
+11 -1
View File
@@ -15,7 +15,16 @@
const userStore = useUserStore() const userStore = useUserStore()
const { language } = storeToRefs(userStore) const { language } = storeToRefs(userStore)
function setCompanyFromUrl() {
const userStore = useUserStore()
const params = new URLSearchParams(window.location.search)
const companyid = params.get('corp_id')
const companyabbr = params.get('corp_abbr')
if (companyid) {
userStore.setCompany(companyid, companyabbr || '')
// 你也可以加 localStorage/sessionStorage 备份
}
}
const locales = { const locales = {
zh: zh, zh: zh,
en: en en: en
@@ -23,6 +32,7 @@
onBeforeMount(() => { onBeforeMount(() => {
setThemeTransitionClass(true) setThemeTransitionClass(true)
setCompanyFromUrl()
useUserStore().restoreTokenTimer() useUserStore().restoreTokenTimer()
}) })
-3
View File
@@ -11,15 +11,12 @@ export const menuService = {
async getMenuList(delay = 300): Promise<MenuResponse> { async getMenuList(delay = 300): Promise<MenuResponse> {
try { try {
const userStore = useUserStore() const userStore = useUserStore()
// 验证用户登录状态 // 验证用户登录状态
if (!userStore.isLogin) { if (!userStore.isLogin) {
throw new Error('用户未登录') throw new Error('用户未登录')
} }
// 模拟接口返回的菜单数据 // 模拟接口返回的菜单数据
const menuData = userStore.info.menu const menuData = userStore.info.menu
// 验证菜单数据 // 验证菜单数据
if (!menuData || !Array.isArray(menuData) || menuData.length === 0) { if (!menuData || !Array.isArray(menuData) || menuData.length === 0) {
ElMessage.error('暂无系统菜单权限') ElMessage.error('暂无系统菜单权限')
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

@@ -100,7 +100,7 @@
</el-dropdown> </el-dropdown>
</div> </div>
<!-- 设置 --> <!-- 设置 -->
<div class="btn-box" @click="openSetting"> <!-- <div class="btn-box" @click="openSetting">
<el-popover :visible="showSettingGuide" placement="bottom-start" :width="190" :offset="0"> <el-popover :visible="showSettingGuide" placement="bottom-start" :width="190" :offset="0">
<template #reference> <template #reference>
<div class="btn setting-btn"> <div class="btn setting-btn">
@@ -116,7 +116,7 @@
</p> </p>
</template> </template>
</el-popover> </el-popover>
</div> </div> -->
<!-- 切换主题 --> <!-- 切换主题 -->
<div class="btn-box" @click="themeAnimation"> <div class="btn-box" @click="themeAnimation">
<div class="btn theme-btn"> <div class="btn theme-btn">
@@ -145,8 +145,14 @@
<div class="user-head"> <div class="user-head">
<img class="cover" src="@imgs/user/avatar.webp" style="float: left" /> <img class="cover" src="@imgs/user/avatar.webp" style="float: left" />
<div class="user-wrap"> <div class="user-wrap">
<span class="name">{{ userInfo.userName }}</span> <span class="name">{{ userInfo.user.id }}</span>
<span class="email">art.design@gmail.com</span> <span class="roles">
<template v-for="(role, idx) in userInfo.user.roles" :key="role">
<span>{{ role }}</span><span v-if="idx < userInfo.user.roles.length - 1">, </span>
</template>
</span>
<span class="phone">{{ userInfo.user.phone }}</span>
<span class="email">{{ userInfo.user.email }}</span>
</div> </div>
</div> </div>
<ul class="user-menu"> <ul class="user-menu">
@@ -1,17 +1,16 @@
<template> <template>
<div class="login-left-view"> <div class="login-left-view">
<div class="logo"> <!-- <div class="logo">
<ArtLogo class="icon" /> <ArtLogo class="icon" />
<!-- <h1 class="title">{{ AppConfig.systemInfo.name }}</h1> --> <h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
<h1 class="title">新友合系统管理平台</h1>
</div> </div>
<img class="left-bg" src="@imgs/login/lf_bg.png" /> <img class="left-bg" src="@imgs/login/lf_bg.png" />
<img class="left-img" src="@imgs/login/lf_icon2.webp" /> <img class="left-img" src="@imgs/login/lf_icon2.webp" /> -->
<div class="text-wrap"> <!-- <div class="text-wrap"> -->
<!-- <h1> {{ $t('login.leftView.title') }} </h1> --> <!-- <h1> {{ $t('login.leftView.title') }} </h1> -->
<!-- <p> {{ $t('login.leftView.subTitle') }} </p> --> <!-- <p> {{ $t('login.leftView.subTitle') }} </p> -->
</div> <!-- </div> -->
</div> </div>
</template> </template>
@@ -27,7 +26,7 @@
height: 100%; height: 100%;
padding: 20px; padding: 20px;
overflow: hidden; overflow: hidden;
background: #f3f4fb; // background: #f3f4fb;
background-size: cover; background-size: cover;
.logo { .logo {
+1 -1
View File
@@ -9,7 +9,7 @@ import { configImages } from './assets/images'
const appConfig: SystemConfig = { const appConfig: SystemConfig = {
// 系统信息 // 系统信息
systemInfo: { systemInfo: {
name: 'XYH系统管理' // 系统名称 name: '总台系统服务' // 系统名称
}, },
// Element Plus 主题 // Element Plus 主题
elementPlusTheme: { elementPlusTheme: {
+2 -1
View File
@@ -133,7 +133,8 @@
"placeholder": [ "placeholder": [
"Please enter your account", "Please enter your account",
"Please enter your password", "Please enter your password",
"Please slide to verify" "Please slide to verify",
"Please select a company"
], ],
"sliderText": "Please slide to verify", "sliderText": "Please slide to verify",
"sliderSuccessText": "Verification successful", "sliderSuccessText": "Verification successful",
+1 -1
View File
@@ -130,7 +130,7 @@
"admin": "管理员", "admin": "管理员",
"user": "普通用户" "user": "普通用户"
}, },
"placeholder": ["请输入账号", "请输入密码", "请拖动滑块完成验证"], "placeholder": ["请输入账号", "请输入密码", "请拖动滑块完成验证","请选择公司"],
"sliderText": "按住滑块拖动", "sliderText": "按住滑块拖动",
"sliderSuccessText": "验证成功", "sliderSuccessText": "验证成功",
"rememberPwd": "记住密码", "rememberPwd": "记住密码",
+4 -1
View File
@@ -99,7 +99,10 @@ async function handleLoginStatus(
): Promise<boolean> { ): Promise<boolean> {
if (!userStore.isLogin && to.path !== RoutesAlias.Login && !to.meta.noLogin) { if (!userStore.isLogin && to.path !== RoutesAlias.Login && !to.meta.noLogin) {
userStore.logOut() userStore.logOut()
next(RoutesAlias.Login) next({
path: RoutesAlias.Login,
query: to.query // 保留原始参数
})
return false return false
} }
return true return true
+7 -1
View File
@@ -87,7 +87,7 @@ export const useUserStore = defineStore(
function scheduleTokenRefresh(expiresIn: number) { function scheduleTokenRefresh(expiresIn: number) {
if (refreshTimeout) clearTimeout(refreshTimeout) if (refreshTimeout) clearTimeout(refreshTimeout)
// 提前1分钟刷新 // 提前1分钟刷新
const refreshTime = (expiresIn - 60) * 1000 const refreshTime = (expiresIn - 100) * 1000
if (refreshTime > 0) { if (refreshTime > 0) {
refreshTimeout = setTimeout(refreshTokenAction, refreshTime) refreshTimeout = setTimeout(refreshTokenAction, refreshTime)
} }
@@ -103,6 +103,12 @@ export const useUserStore = defineStore(
} }
const logOut = () => { const logOut = () => {
// 清空所有本地缓存
localStorage.clear();
sessionStorage.clear();
companyabbr.value = ''
companyid.value = ''
info.value = {} info.value = {}
isLogin.value = false isLogin.value = false
isLock.value = false isLock.value = false
+1 -1
View File
@@ -87,7 +87,7 @@ axiosInstance.interceptors.response.use(
logOut() logOut()
throw new HttpError(msg || $t('httpMsg.unauthorized'), ApiStatus.unauthorized) throw new HttpError(msg || $t('httpMsg.unauthorized'), ApiStatus.unauthorized)
default: default:
throw new HttpError(msg || $t('httpMsg.requestFailed'), code) return Promise.reject(handleError(error))
} }
// return Promise.reject(handleError(error)) // return Promise.reject(handleError(error))
} }
+7 -3
View File
@@ -1,6 +1,8 @@
@use '@styles/variables.scss' as *; @use '@styles/variables.scss' as *;
.login { .login {
background: url('@imgs/login/bgx.png');
background-size: 100% 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
width: 100%; width: 100%;
@@ -66,9 +68,11 @@
.form { .form {
box-sizing: border-box; box-sizing: border-box;
height: 100%; // height: 100%;
padding: 40px 0;
widows: 100%; widows: 100%;
padding: 40px 30px;
background: white;
border-radius: 18px;
.title { .title {
margin-left: -2px; margin-left: -2px;
@@ -103,7 +107,7 @@
.drag-verify { .drag-verify {
position: relative; position: relative;
padding-bottom: 20px; // padding-bottom: 20px;
margin-top: 25px; margin-top: 25px;
.drag-verify-content { .drag-verify-content {
+108 -141
View File
@@ -27,24 +27,6 @@
</ElDropdownMenu> </ElDropdownMenu>
</template> </template>
</ElDropdown> </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>
<div class="header"> <div class="header">
<ArtLogo class="icon" /> <ArtLogo class="icon" />
@@ -58,9 +40,6 @@
<span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span> <span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span>
</div> </div>
<div v-if="activeLoginType === 'password'"> <div v-if="activeLoginType === 'password'">
<!-- 原有账号密码登录表单内容 -->
<!-- <h3 class="title">{{ $t('login.title') }}</h3> -->
<!-- <p class="sub-title">{{ $t('login.subTitle') }}</p> -->
<ElForm <ElForm
ref="formRef" ref="formRef"
:model="formData" :model="formData"
@@ -68,22 +47,10 @@
@keyup.enter="handleSubmit" @keyup.enter="handleSubmit"
style="margin-top: 25px" style="margin-top: 25px"
> >
<!-- <ElFormItem prop="account"> <ElFormItem prop="username" label="账号" >
<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" /> <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
</ElFormItem> </ElFormItem>
<ElFormItem prop="password"> <ElFormItem prop="password" label="密码">
<ElInput <ElInput
:placeholder="$t('login.placeholder[1]')" :placeholder="$t('login.placeholder[1]')"
v-model.trim="formData.password" v-model.trim="formData.password"
@@ -93,12 +60,24 @@
show-password show-password
/> />
</ElFormItem> </ElFormItem>
<ElFormItem prop="company" label="公司">
<ElSelect v-model="formData.company" class="account-select" @change="changeCompany">
<ElOption
v-for="account in companyList"
:key="account.id"
:label="account.name"
:value="account.id"
>
<span>{{ account.name }}</span>
</ElOption>
</ElSelect>
</ElFormItem>
<div class="drag-verify"> <div class="drag-verify">
<div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }"> <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
<ArtDragVerify <ArtDragVerify
ref="dragVerify" ref="dragVerify"
v-model:value="isPassing" v-model:value="isPassing"
:width="width < 500 ? 328 : 438" :width="width < 500 ? 260: 380"
:text="$t('login.sliderText')" :text="$t('login.sliderText')"
textColor="var(--art-gray-800)" textColor="var(--art-gray-800)"
:successText="$t('login.sliderSuccessText')" :successText="$t('login.sliderSuccessText')"
@@ -111,14 +90,13 @@
$t('login.placeholder[2]') $t('login.placeholder[2]')
}}</p> }}</p>
</div> </div>
<div class="login-bottom-row">
<div class="forget-password"> <p>
<ElCheckbox v-model="formData.rememberPassword">{{ {{ $t('login.noAccount') }}
$t('login.rememberPwd') <RouterLink :to="RoutesAlias.Register" style="color:#5D87FF;">{{ $t('login.register') }}</RouterLink>
}}</ElCheckbox> </p>
<!-- <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink> --> <ElCheckbox v-model="formData.rememberPassword">{{ $t('login.rememberPwd') }}</ElCheckbox>
</div> </div>
<div style="margin-top: 30px"> <div style="margin-top: 30px">
<ElButton <ElButton
class="login-btn" class="login-btn"
@@ -130,35 +108,30 @@
{{ $t('login.btnText') }} {{ $t('login.btnText') }}
</ElButton> </ElButton>
</div> </div>
<div class="footer">
<p>
{{ $t('login.noAccount') }}
<RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
</p>
</div>
</ElForm> </ElForm>
</div> </div>
<div v-else> <div v-else>
<div class="qrcode-login" v-if="!iscompany">请先选择公司</div> <ElForm
<div v-else> :model="formData"
<div class="qrcode-login" v-if="isInFeishu" > style="margin-top: 25px"
<img class="left-bg" src="@imgs/login/feishu.png" /> >
<ElButton <ElFormItem prop="company" label="公司">
class="login-btn" <ElSelect v-model="formData.company" class="account-select" @change="changeCompany">
type="primary" <ElOption
@click="feishuSubmit" v-for="account in companyList"
v-ripple :key="account.id"
> :label="account.name"
{{ $t('login.btnText') }} :value="account.id"
</ElButton> >
<span>{{ account.name }}</span>
</ElOption>
</ElSelect>
</ElFormItem>
</ElForm>
<div class="qrcode-login" v-if="!isInFeishu">
<div id="login_container"></div>
<p class="qrcode-tip">请使用飞书App扫码登录</p>
</div> </div>
<div class="qrcode-login" v-else>
<div id="login_container"></div>
<p class="qrcode-tip">请使用飞书App扫码登录</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -178,6 +151,7 @@
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { HttpError } from '@/utils/http/error' import { HttpError } from '@/utils/http/error'
import { onMounted, ref, watch, nextTick } from 'vue' import { onMounted, ref, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({ name: 'Login' }) defineOptions({ name: 'Login' })
@@ -185,40 +159,6 @@
import { useSettingStore } from '@/store/modules/setting' import { useSettingStore } from '@/store/modules/setting'
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
type AccountKey = 'super' | 'admin' | 'user'
export interface Account {
key: AccountKey
label: string
userName: string
password: string
roles: string[]
}
const accounts = computed<Account[]>(() => [
{
key: 'super',
label: t('login.roles.super'),
userName: 'Super',
password: '123456',
roles: ['R_SUPER']
},
{
key: 'admin',
label: t('login.roles.admin'),
userName: 'Admin',
password: '123456',
roles: ['R_ADMIN']
},
{
key: 'user',
label: t('login.roles.user'),
userName: 'User',
password: '123456',
roles: ['R_USER']
}
])
const settingStore = useSettingStore() const settingStore = useSettingStore()
const { isDark, systemThemeType } = storeToRefs(settingStore) const { isDark, systemThemeType } = storeToRefs(settingStore)
@@ -234,10 +174,15 @@
const systemName = AppConfig.systemInfo.name const systemName = AppConfig.systemInfo.name
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const companyid = ref('') const companyid = ref('')
companyid.value = useUserStore().companyid
const iscompany = ref(false) const iscompany = ref(false)
const { companyabbr } = useUserStore()
//获取公司 getCompanyList
const companyList = ref<any>()
const feishuresponse=ref() const feishuresponse=ref()
const formData = reactive({ const formData = reactive({
account: '', account: '',
company: Number(useUserStore().companyid),
username: '', username: '',
password: '', password: '',
rememberPassword: true rememberPassword: true
@@ -245,15 +190,57 @@
const rules = computed<FormRules>(() => ({ const rules = computed<FormRules>(() => ({
username: [{ required: true, message: t('login.placeholder[0]'), trigger: 'blur' }], username: [{ required: true, message: t('login.placeholder[0]'), trigger: 'blur' }],
password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }] password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }],
company: [{ required: true, message: t('login.placeholder[3]'), trigger: 'blur' }]
})) }))
const loading = ref(false) const loading = ref(false)
const { width } = useWindowSize() const { width } = useWindowSize()
const getcompanyList = async () => {
try {
// 这里调用获取品牌列表的接口
const response = await UserService.getCompanyList()
companyList.value = response || []
} catch (error) { }
}
// 切换语言
const { locale } = useI18n()
const changeLanguage = (lang: LanguageEnum) => {
if (locale.value === lang) return
locale.value = lang
userStore.setLanguage(lang)
}
const getfeishuAppList = async () => {
try {
// 这里调用获取品牌列表的接口
feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
if(activeLoginType.value=='qrcode'){
feishulogin()
}
console.log(feishuresponse)
} 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()
}
if(companyabbr!=''){
iscompany.value = true
getfeishuAppList()
}
const feishulogin = async () => { const feishulogin = async () => {
userStore.setLoginType('feishu') userStore.setLoginType('feishu')
if (isInFeishu) { if (isInFeishu) {
feishuSubmit()
// 飞书特定的逻辑 // 飞书特定的逻辑
} else { } else {
// 普通浏览器的逻辑 // 普通浏览器的逻辑
@@ -392,46 +379,19 @@
}) })
}, 150) }, 150)
} }
const route = useRoute()
onMounted(() => { onMounted(() => {
getcompanyList() getcompanyList()
// 自动读取 query 参数并存入 userStore
const companyid = Array.isArray(route.query.corp_id) ? route.query.corp_id[0] : route.query.corp_id
const companyabbr = Array.isArray(route.query.corp_abbr) ? route.query.corp_abbr[0] : route.query.corp_abbr
if (companyid) {
userStore.setCompany(companyid as string, (companyabbr as string) || '')
formData.company = Number(companyid)
}
}) })
// 切换语言
const { locale } = useI18n()
const changeLanguage = (lang: LanguageEnum) => {
if (locale.value === lang) return
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 })
if(activeLoginType.value=='qrcode'){
feishulogin()
}
console.log(feishuresponse)
} catch (error) { }
}
// 切换主题 // 切换主题
import { useTheme } from '@/composables/useTheme' import { useTheme } from '@/composables/useTheme'
@@ -468,4 +428,11 @@
color: #888; color: #888;
} }
} }
.login-bottom-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
// margin-top: 16px;
}
</style> </style>
+7 -4
View File
@@ -1,8 +1,11 @@
<template> <template>
<div class="console"> <div class="console">
<CardList></CardList> <div>
功能开发中...
</div>
<!-- <CardList></CardList> -->
<el-row :gutter="20"> <!-- <el-row :gutter="20">
<el-col :sm="24" :md="12" :lg="10"> <el-col :sm="24" :md="12" :lg="10">
<ActiveUser /> <ActiveUser />
</el-col> </el-col>
@@ -21,9 +24,9 @@
<el-col :sm="24" :md="12" :lg="6"> <el-col :sm="24" :md="12" :lg="6">
<TodoList /> <TodoList />
</el-col> </el-col>
</el-row> </el-row> -->
<AboutProject /> <!-- <AboutProject /> -->
</div> </div>
</template> </template>
+157 -152
View File
@@ -1,166 +1,171 @@
<template> <template>
<div class="page-content"> <div class="page-content">
<ElRow> <div v-if="!isMobile">
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="工单编号"></ElInput> <ElRow>
</ElCol> --> <!-- <ElCol :xs="24" :sm="12" :lg="6">
<div style="width: 12px"></div> <ElInput placeholder="工单编号"></ElInput>
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2"> </ElCol> -->
<!-- <ElButton v-ripple>搜索</ElButton> --> <div style="width: 12px"></div>
<ElButton v-if="hasAuth('work_order_self@add')" @click="showDialog('add')" v-ripple>新增</ElButton> <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
</ElCol> <!-- <ElButton v-ripple>搜索</ElButton> -->
</ElRow> <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" <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange" :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
@current-change="handleCurrentChange"> @current-change="handleCurrentChange">
<template #default> <template #default>
<ElTableColumn label="工单编号" prop="code" /> <ElTableColumn label="工单编号" prop="code" />
<ElTableColumn label="问题分类" prop="categorie_id"> <ElTableColumn label="问题分类" prop="categorie_id">
<template #default="scope"> <template #default="scope">
<div v-html="scope.row.categorie?scope.row.categorie.name:''"></div> <div v-html="scope.row.categorie?scope.row.categorie.name:''"></div>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="问题描述" prop="content"> <ElTableColumn label="问题描述" prop="content">
<template #default="scope"> <template #default="scope">
<div class="multi-line-ellipsis" v-html="scope.row.content"></div> <div class="multi-line-ellipsis" v-html="scope.row.content"></div>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="状态" prop="status"> <ElTableColumn label="状态" prop="status">
<template #default="scope"> <template #default="scope">
<ElTag :type="scope.row.status == 1 ? 'info' : scope.row.status == 2 ?'primary' :scope.row.status == 4 ?'success' : 'danger'"> <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 == 1 ? '待受理' : scope.row.status == 2 ? '处理中' :
scope.row.status == 4 ? "已完成":'关闭' }} scope.row.status == 4 ? "已完成":'关闭' }}
</ElTag> </ElTag>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" /> <ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="240px"> <ElTableColumn fixed="right" label="操作" width="240px">
<template #default="scope"> <template #default="scope">
<ElRow> <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="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@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 v-if="hasAuth('work_order_self@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
<!-- <el-button link @click="deleteRole()"> 删除 </el-button> --> <!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
</ElRow> </ElRow>
</template> </template>
</ElTableColumn> </ElTableColumn>
</template> </template>
</ArtTable> </ArtTable>
<ElDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增' : '编辑'" width="60%" align-center> <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="160px">
<ElFormItem label="问题分类" prop="categorie_id"> <ElFormItem label="问题分类" prop="categorie_id">
<ElSelect v-model="form.categorie_id"> <ElSelect v-model="form.categorie_id">
<ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" /> <ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" />
</ElSelect> </ElSelect>
</ElFormItem> </ElFormItem>
<ElFormItem label="问题描述" prop="content"> <ElFormItem label="问题描述" prop="content">
<!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> --> <!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> -->
<!-- 富文本编辑器 --> <!-- 富文本编辑器 -->
<ArtWangEditor class="el-top" v-model="editorHtml" /> <ArtWangEditor class="el-top" v-model="editorHtml" />
</ElFormItem> </ElFormItem>
<ElFormItem label="上传附件" prop="attachment"> <ElFormItem label="上传附件" prop="attachment">
<ElUpload <ElUpload
v-model:file-list="fileList" v-model:file-list="fileList"
class="upload-demo" class="upload-demo"
:action="actionImageUplode" :action="actionImageUplode"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
multiple multiple
:limit="3"> :limit="3">
<el-button type="primary">Click to upload</el-button> <el-button type="primary">Click to upload</el-button>
</ElUpload> </ElUpload>
<!-- 附件预览区 --> <!-- 附件预览区 -->
<div class="attachment-preview" v-if="fileList.length"> <div class="attachment-preview" v-if="fileList.length">
<div class="attachment-list"> <div class="attachment-list">
<div v-for="(file, idx) in fileList" :key="file.name" class="attachment-item"> <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)"> <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))" /> <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>
<template v-else-if="/\.(mp4|webm|ogg)$/i.test(file.name)"> <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> <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>
<template v-else> <template v-else>
<a :href="file.file_url?file.file_url:file.response.data.file_url" target="_blank">{{ file.name }}</a> <a :href="file.file_url?file.file_url:file.response.data.file_url" target="_blank">{{ file.name }}</a>
</template> </template>
<div class="attachment-filename">{{ file.name }}</div> <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', 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>
<span class="message-time">{{ message.updated_at }}</span>
</div> </div>
<div class="message-text">{{ message.content }}</div>
</div> </div>
</div> </div>
</template> </ElFormItem>
</div> </ElForm>
<div class="chat-input" v-if="hasAuth('work_order_self@conversation_add')"> <template #footer>
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none" <div class="dialog-footer">
@keyup.enter.prevent="sendMessage" /> <ElButton @click="dialogVisible = false">取消</ElButton>
<ElInput v-model="ticket_id" type="hidden" /> <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
<div class="chat-input-actions">
<el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
</div> </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', 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>
<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> </div>
</el-drawer>
</div> <ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
</el-drawer> <ElForm ref="formRef" :model="statusform" label-width="120px">
<ElFormItem label="状态" prop="status">
<ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center> <ElSelect v-model="statusform.status">
<ElForm ref="formRef" :model="statusform" label-width="120px"> <ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" />
<ElFormItem label="状态" prop="status"> </ElSelect>
<ElSelect v-model="statusform.status"> </ElFormItem>
<ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" /> <ElFormItem label="描述" prop="msg">
</ElSelect> <ElInput v-model="statusform.msg" type="textarea" :rows="3" />
</ElFormItem> </ElFormItem>
<ElFormItem label="描述" prop="msg"> </ElForm>
<ElInput v-model="statusform.msg" type="textarea" :rows="3" /> <template #footer>
</ElFormItem> <div class="dialog-footer">
</ElForm> <ElButton @click="dialogVisiblestatus = false">取消</ElButton>
<template #footer> <ElButton type="primary" @click="statusSubmit()">提交</ElButton>
<div class="dialog-footer"> </div>
<ElButton @click="dialogVisiblestatus = false">取消</ElButton> </template>
<ElButton type="primary" @click="statusSubmit()">提交</ElButton> </ElDialog>
</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>
<!-- 图片预览弹窗 -->
<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>
<div v-else class="mobile-hide-tip">
<p>该页面暂不支持移动端访问</p>
</div>
</div> </div>
</template> </template>
+156 -152
View File
@@ -1,166 +1,170 @@
<template> <template>
<div class="page-content"> <div class="page-content">
<ElRow> <div v-if="!isMobile">
<!-- <ElCol :xs="24" :sm="12" :lg="6"> <ElRow>
<ElInput placeholder="工单编号"></ElInput> <!-- <ElCol :xs="24" :sm="12" :lg="6">
</ElCol> --> <ElInput placeholder="工单编号"></ElInput>
<div style="width: 12px"></div> </ElCol> -->
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2"> <div style="width: 12px"></div>
<!-- <ElButton v-ripple>搜索</ElButton> --> <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<ElButton v-if="hasAuth('work_order@add')" @click="showDialog('add')" v-ripple>新增</ElButton> <!-- <ElButton v-ripple>搜索</ElButton> -->
</ElCol> <ElButton v-if="hasAuth('work_order@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
</ElRow> </ElCol>
</ElRow>
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage" <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange" :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
@current-change="handleCurrentChange"> @current-change="handleCurrentChange">
<template #default> <template #default>
<ElTableColumn label="工单编号" prop="code" /> <ElTableColumn label="工单编号" prop="code" />
<ElTableColumn label="问题分类" prop="categorie_id"> <ElTableColumn label="问题分类" prop="categorie_id">
<template #default="scope"> <template #default="scope">
<div v-html="scope.row.categorie?scope.row.categorie.name:''"></div> <div v-html="scope.row.categorie?scope.row.categorie.name:''"></div>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="问题描述" prop="content"> <ElTableColumn label="问题描述" prop="content">
<template #default="scope"> <template #default="scope">
<div class="multi-line-ellipsis" v-html="scope.row.content"></div> <div class="multi-line-ellipsis" v-html="scope.row.content"></div>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="状态" prop="status"> <ElTableColumn label="状态" prop="status">
<template #default="scope"> <template #default="scope">
<ElTag :type="scope.row.status == 1 ? 'info' : scope.row.status == 2 ?'primary' :scope.row.status == 4 ?'success' : 'danger'"> <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 == 1 ? '待受理' : scope.row.status == 2 ? '处理中' :
scope.row.status == 4 ? "已完成":'关闭' }} scope.row.status == 4 ? "已完成":'关闭' }}
</ElTag> </ElTag>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" /> <ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="240px"> <ElTableColumn fixed="right" label="操作" width="240px">
<template #default="scope"> <template #default="scope">
<ElRow> <ElRow>
<el-button v-if="scope.row.status == 1&&hasAuth('work_order@edit')" link @click="showDialog('edit', 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@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 v-if="hasAuth('work_order@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
<!-- <el-button link @click="deleteRole()"> 删除 </el-button> --> <!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
</ElRow> </ElRow>
</template> </template>
</ElTableColumn> </ElTableColumn>
</template> </template>
</ArtTable> </ArtTable>
<ElDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增' : '编辑'" width="60%" align-center> <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="160px">
<ElFormItem label="问题分类" prop="categorie_id"> <ElFormItem label="问题分类" prop="categorie_id">
<ElSelect v-model="form.categorie_id"> <ElSelect v-model="form.categorie_id">
<ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" /> <ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" />
</ElSelect> </ElSelect>
</ElFormItem> </ElFormItem>
<ElFormItem label="问题描述" prop="content"> <ElFormItem label="问题描述" prop="content">
<!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> --> <!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> -->
<!-- 富文本编辑器 --> <!-- 富文本编辑器 -->
<ArtWangEditor class="el-top" v-model="editorHtml" /> <ArtWangEditor class="el-top" v-model="editorHtml" />
</ElFormItem> </ElFormItem>
<ElFormItem label="上传附件" prop="attachment"> <ElFormItem label="上传附件" prop="attachment">
<ElUpload <ElUpload
v-model:file-list="fileList" v-model:file-list="fileList"
class="upload-demo" class="upload-demo"
:action="actionImageUplode" :action="actionImageUplode"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
multiple multiple
:limit="3"> :limit="3">
<el-button type="primary">Click to upload</el-button> <el-button type="primary">Click to upload</el-button>
</ElUpload> </ElUpload>
<!-- 附件预览区 --> <!-- 附件预览区 -->
<div class="attachment-preview" v-if="fileList.length"> <div class="attachment-preview" v-if="fileList.length">
<div class="attachment-list"> <div class="attachment-list">
<div v-for="(file, idx) in fileList" :key="file.name" class="attachment-item"> <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)"> <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))" /> <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>
<template v-else-if="/\.(mp4|webm|ogg)$/i.test(file.name)"> <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> <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>
<template v-else> <template v-else>
<a :href="file.file_url?file.file_url:file.response.data.file_url" target="_blank">{{ file.name }}</a> <a :href="file.file_url?file.file_url:file.response.data.file_url" target="_blank">{{ file.name }}</a>
</template> </template>
<div class="attachment-filename">{{ file.name }}</div> <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', 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>
<span class="message-time">{{ message.updated_at }}</span>
</div> </div>
<div class="message-text">{{ message.content }}</div>
</div> </div>
</div> </div>
</template> </ElFormItem>
</div> </ElForm>
<div class="chat-input" v-if="hasAuth('work_order@conversation_add')"> <template #footer>
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none" <div class="dialog-footer">
@keyup.enter.prevent="sendMessage" /> <ElButton @click="dialogVisible = false">取消</ElButton>
<ElInput v-model="ticket_id" type="hidden" /> <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
<div class="chat-input-actions">
<el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
</div> </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', 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>
<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@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> </div>
</el-drawer>
</div> <ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
</el-drawer> <ElForm ref="formRef" :model="statusform" label-width="120px">
<ElFormItem label="状态" prop="status">
<ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center> <ElSelect v-model="statusform.status">
<ElForm ref="formRef" :model="statusform" label-width="120px"> <ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" />
<ElFormItem label="状态" prop="status"> </ElSelect>
<ElSelect v-model="statusform.status"> </ElFormItem>
<ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" /> <ElFormItem label="描述" prop="msg">
</ElSelect> <ElInput v-model="statusform.msg" type="textarea" :rows="3" />
</ElFormItem> </ElFormItem>
<ElFormItem label="描述" prop="msg"> </ElForm>
<ElInput v-model="statusform.msg" type="textarea" :rows="3" /> <template #footer>
</ElFormItem> <div class="dialog-footer">
</ElForm> <ElButton @click="dialogVisiblestatus = false">取消</ElButton>
<template #footer> <ElButton type="primary" @click="statusSubmit()">提交</ElButton>
<div class="dialog-footer"> </div>
<ElButton @click="dialogVisiblestatus = false">取消</ElButton> </template>
<ElButton type="primary" @click="statusSubmit()">提交</ElButton> </ElDialog>
</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>
<!-- 图片预览弹窗 -->
<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>
<div v-else class="mobile-hide-tip">
<p>该页面暂不支持移动端访问</p>
</div>
</div> </div>
</template> </template>
+64 -57
View File
@@ -1,65 +1,70 @@
<template> <template>
<div class="page-content"> <div class="page-content">
<ElRow> <div v-if="!isMobile">
<!-- <ElCol :xs="24" :sm="12" :lg="6"> <ElRow>
<ElInput placeholder="名称"></ElInput> <!-- <ElCol :xs="24" :sm="12" :lg="6">
</ElCol> --> <ElInput placeholder="名称"></ElInput>
<div style="width: 12px"></div> </ElCol> -->
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2"> <div style="width: 12px"></div>
<!-- <ElButton v-ripple>搜索</ElButton> --> <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<ElButton @click="showDialog('add')" v-ripple>新增</ElButton> <!-- <ElButton v-ripple>搜索</ElButton> -->
</ElCol> <ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
</ElRow> </ElCol>
</ElRow>
<ArtTable
ref="tableRef" <ArtTable
row-key="id" ref="tableRef"
:loading="loading" row-key="id"
:data="tableData" :loading="loading"
:currentPage="pagination.currentPage" :data="tableData"
:pageSize="pagination.pageSize" :currentPage="pagination.currentPage"
:total="pagination.total" :pageSize="pagination.pageSize"
> :total="pagination.total"
<template #default> >
<ElTableColumn label="ID" prop="id" /> <template #default>
<ElTableColumn label="分类名称" prop="name" /> <ElTableColumn label="ID" prop="id" />
<ElTableColumn label="状态" prop="status"> <ElTableColumn label="分类名称" prop="name" />
<template #default="scope"> <ElTableColumn label="状态" prop="status">
<ElTag :type="scope.row.status ? 'primary' : 'info'">
{{ scope.row.status ? '启用' : '禁用' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="200px">
<template #default="scope"> <template #default="scope">
<ElRow> <ElTag :type="scope.row.status ? 'primary' : 'info'">
<el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button> {{ scope.row.status ? '启用' : '禁用' }}
<el-button link @click="deleteRole(scope.row)"> 删除 </el-button> </ElTag>
</ElRow>
</template> </template>
</ElTableColumn> </ElTableColumn>
</template> <ElTableColumn label="创建时间" prop="created_at" />
</ArtTable> <ElTableColumn fixed="right" label="操作" width="200px">
<template #default="scope">
<ElDialog <ElRow>
v-model="dialogVisible" <el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
:title="dialogType === 'add' ? '新增' : '编辑'" <el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
width="40%" </ElRow>
align-center </template>
> </ElTableColumn>
<ElForm ref="formRef" :model="form" :rules="rules" label-width="160px"> </template>
<ElFormItem label="分类名称" prop="name"> </ArtTable>
<ElInput v-model="form.name" />
</ElFormItem> <ElDialog
</ElForm> v-model="dialogVisible"
<template #footer> :title="dialogType === 'add' ? '新增' : '编辑'"
<div class="dialog-footer"> width="40%"
<ElButton @click="dialogVisible = false">取消</ElButton> align-center
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton> >
</div> <ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
</template> <ElFormItem label="分类名称" prop="name">
</ElDialog> <ElInput v-model="form.name" />
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
</div>
</template>
</ElDialog>
</div>
<div v-else class="mobile-hide-tip">
<p>该页面暂不支持移动端访问</p>
</div>
</div> </div>
</template> </template>
@@ -73,6 +78,8 @@
const dialogVisible = ref(false) const dialogVisible = ref(false)
const typeList = ref<any[]>([]) const typeList = ref<any[]>([])
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 500)
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
name: [ name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' } { required: true, message: '请输入分类名称', trigger: 'blur' }