修改页面
This commit is contained in:
+1
-1
@@ -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
@@ -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()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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
@@ -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: {
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -130,7 +130,7 @@
|
|||||||
"admin": "管理员",
|
"admin": "管理员",
|
||||||
"user": "普通用户"
|
"user": "普通用户"
|
||||||
},
|
},
|
||||||
"placeholder": ["请输入账号", "请输入密码", "请拖动滑块完成验证"],
|
"placeholder": ["请输入账号", "请输入密码", "请拖动滑块完成验证","请选择公司"],
|
||||||
"sliderText": "按住滑块拖动",
|
"sliderText": "按住滑块拖动",
|
||||||
"sliderSuccessText": "验证成功",
|
"sliderSuccessText": "验证成功",
|
||||||
"rememberPwd": "记住密码",
|
"rememberPwd": "记住密码",
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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"></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"></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>
|
||||||
|
|||||||
@@ -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
@@ -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
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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' }
|
||||||
|
|||||||
Reference in New Issue
Block a user