删除非vxe文件
This commit is contained in:
gexinzhineng/gxzn27
parent
b967c4e01e
commit
12c5116dfd
@ -3,7 +3,7 @@ import { store } from '../index'
|
|||||||
import { DictDataVO } from '@/api/system/dict/types'
|
import { DictDataVO } from '@/api/system/dict/types'
|
||||||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
||||||
const { wsCache } = useCache('sessionStorage')
|
const { wsCache } = useCache('sessionStorage')
|
||||||
import { listSimpleDictData } from '@/api/system/dict/dict.data'
|
import { listSimpleDictDataApi } from '@/api/system/dict/dict.data'
|
||||||
|
|
||||||
export interface DictValueType {
|
export interface DictValueType {
|
||||||
value: any
|
value: any
|
||||||
@ -44,7 +44,7 @@ export const useDictStore = defineStore('dict', {
|
|||||||
this.dictMap = dictMap
|
this.dictMap = dictMap
|
||||||
this.isSetDict = true
|
this.isSetDict = true
|
||||||
} else {
|
} else {
|
||||||
const res = await listSimpleDictData()
|
const res = await listSimpleDictDataApi()
|
||||||
// 设置数据
|
// 设置数据
|
||||||
const dictDataMap = new Map<string, any>()
|
const dictDataMap = new Map<string, any>()
|
||||||
res.forEach((dictData: DictDataVO) => {
|
res.forEach((dictData: DictDataVO) => {
|
||||||
@ -74,7 +74,7 @@ export const useDictStore = defineStore('dict', {
|
|||||||
},
|
},
|
||||||
async resetDict() {
|
async resetDict() {
|
||||||
wsCache.delete(CACHE_KEY.DICT_CACHE)
|
wsCache.delete(CACHE_KEY.DICT_CACHE)
|
||||||
const res = await listSimpleDictData()
|
const res = await listSimpleDictDataApi()
|
||||||
// 设置数据
|
// 设置数据
|
||||||
const dictDataMap = new Map<string, any>()
|
const dictDataMap = new Map<string, any>()
|
||||||
res.forEach((dictData: DictDataVO) => {
|
res.forEach((dictData: DictDataVO) => {
|
||||||
|
|||||||
@ -1,157 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="rules"
|
|
||||||
label-width="120px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="微信号" prop="account">
|
|
||||||
<template #label>
|
|
||||||
<span>
|
|
||||||
<el-tooltip
|
|
||||||
content="在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 账号详情] 中能找到「微信号」"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:question-filled" style="vertical-align: middle" />
|
|
||||||
</el-tooltip>
|
|
||||||
微信号
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="formData.account" placeholder="请输入微信号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="appId" prop="appId">
|
|
||||||
<template #label>
|
|
||||||
<span>
|
|
||||||
<el-tooltip
|
|
||||||
content="在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者ID(AppID)」"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:question-filled" style="vertical-align: middle" />
|
|
||||||
</el-tooltip>
|
|
||||||
appId
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="formData.appId" placeholder="请输入公众号 appId" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="appSecret" prop="appSecret">
|
|
||||||
<template #label>
|
|
||||||
<span>
|
|
||||||
<el-tooltip
|
|
||||||
content="在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者密码(AppSecret)」"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:question-filled" style="vertical-align: middle" />
|
|
||||||
</el-tooltip>
|
|
||||||
appSecret
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="formData.appSecret" placeholder="请输入公众号 appSecret" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="token" prop="token">
|
|
||||||
<el-input v-model="formData.token" placeholder="请输入公众号token" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="消息加解密密钥" prop="aesKey">
|
|
||||||
<el-input v-model="formData.aesKey" placeholder="请输入消息加解密密钥" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as AccountApi from '@/api/mp/account'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
account: '',
|
|
||||||
appId: '',
|
|
||||||
appSecret: '',
|
|
||||||
token: '',
|
|
||||||
aesKey: '',
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const rules = reactive({
|
|
||||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
|
||||||
account: [{ required: true, message: '公众号账号不能为空', trigger: 'blur' }],
|
|
||||||
appId: [{ required: true, message: '公众号 appId 不能为空', trigger: 'blur' }],
|
|
||||||
appSecret: [{ required: true, message: '公众号密钥不能为空', trigger: 'blur' }],
|
|
||||||
token: [{ required: true, message: '公众号 token 不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await AccountApi.getAccount(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await AccountApi.createAccount(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await AccountApi.updateAccount(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 表单重置 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
account: '',
|
|
||||||
appId: '',
|
|
||||||
appSecret: '',
|
|
||||||
token: '',
|
|
||||||
aesKey: '',
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,3 +1,192 @@
|
|||||||
<template>
|
<template>
|
||||||
<span>开发中</span>
|
<!-- 搜索工作栏 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-form
|
||||||
|
class="-mb-15px"
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
label-width="68px"
|
||||||
|
>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.name"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
|
||||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
|
||||||
|
<el-button type="primary" @click="openForm('create')" v-hasPermi="['mp:account:create']">
|
||||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</content-wrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column label="名称" align="center" prop="name" />
|
||||||
|
<el-table-column label="微信号" align="center" prop="account" width="180" />
|
||||||
|
<el-table-column label="appId" align="center" prop="appId" width="180" />
|
||||||
|
<el-table-column label="服务器地址(URL)" align="center" prop="appId" width="360">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ 'http://服务端地址/mp/open/' + scope.row.appId }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="二维码" align="center" prop="qrCodeUrl">
|
||||||
|
<template #default="scope">
|
||||||
|
<img
|
||||||
|
v-if="scope.row.qrCodeUrl"
|
||||||
|
:src="scope.row.qrCodeUrl"
|
||||||
|
alt="二维码"
|
||||||
|
style="height: 100px; display: inline-block"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="handleGenerateQrCode(scope.row)"
|
||||||
|
v-hasPermi="['mp:account:qr-code']"
|
||||||
|
>
|
||||||
|
生成二维码
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="备注" align="center" prop="remark" />
|
||||||
|
<el-table-column label="操作" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="openForm('update', scope.row.id)"
|
||||||
|
v-hasPermi="['mp:account:update']"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.row.id)"
|
||||||
|
v-hasPermi="['mp:account:delete']"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="danger"
|
||||||
|
@click="handleCleanQuota(scope.row)"
|
||||||
|
v-hasPermi="['mp:account:clear-quota']"
|
||||||
|
>
|
||||||
|
清空 API 配额
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</content-wrap>
|
||||||
|
|
||||||
|
<!-- 对话框(添加 / 修改) -->
|
||||||
|
<AccountForm ref="formRef" @success="getList" />
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts" name="MpAccount">
|
||||||
|
import * as AccountApi from '@/api/mp/account'
|
||||||
|
import AccountForm from './AccountForm.vue'
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const list = ref([]) // 列表的数据
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
name: null,
|
||||||
|
account: null,
|
||||||
|
appId: null
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const data = await AccountApi.getAccountPage(queryParams)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 添加/修改操作 */
|
||||||
|
const formRef = ref()
|
||||||
|
const openForm = (type: string, id?: number) => {
|
||||||
|
formRef.value.open(type, id)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
// 发起删除
|
||||||
|
await AccountApi.deleteAccount(id)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 生成二维码的按钮操作 */
|
||||||
|
const handleGenerateQrCode = async (row) => {
|
||||||
|
try {
|
||||||
|
// 生成二维码的二次确认
|
||||||
|
await message.confirm('是否确认生成公众号账号编号为"' + row.name + '"的二维码?')
|
||||||
|
// 发起生成二维码
|
||||||
|
await AccountApi.generateAccountQrCode(row.id)
|
||||||
|
message.success('生成二维码成功')
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 清空二维码 API 配额的按钮操作 */
|
||||||
|
const handleCleanQuota = async (row) => {
|
||||||
|
try {
|
||||||
|
// 清空 API 配额的二次确认
|
||||||
|
await message.confirm('是否确认清空生成公众号账号编号为"' + row.name + '"的 API 配额?')
|
||||||
|
// 发起清空 API 配额
|
||||||
|
await AccountApi.clearAccountQuota(row.id)
|
||||||
|
message.success('清空 API 配额成功')
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 **/
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,3 +1,363 @@
|
|||||||
<template>
|
<template>
|
||||||
<span>开发中</span>
|
<!-- 搜索工作栏 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-form
|
||||||
|
class="-mb-15px"
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
label-width="68px"
|
||||||
|
>
|
||||||
|
<el-form-item label="公众号" prop="accountId">
|
||||||
|
<el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in accountList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</content-wrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<content-wrap>
|
||||||
|
<div class="waterfall" v-loading="loading">
|
||||||
|
<div
|
||||||
|
class="waterfall-item"
|
||||||
|
v-show="item.content && item.content.newsItem"
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.articleId"
|
||||||
|
>
|
||||||
|
<wx-news :articles="item.content.newsItem" />
|
||||||
|
<el-row justify="center" class="ope-row">
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
circle
|
||||||
|
@click="handleDelete(item)"
|
||||||
|
v-hasPermi="['mp:free-publish:delete']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:delete" />
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</content-wrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="freePublish">
|
||||||
|
import * as FreePublishApi from '@/api/mp/freePublish'
|
||||||
|
import * as MpAccountApi from '@/api/mp/account'
|
||||||
|
import WxNews from '@/views/mp/components/wx-news/main.vue'
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const list = ref([]) // 列表的数据
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
accountId: undefined // 当前页数
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
// 如果没有选中公众号账号，则进行提示。
|
||||||
|
if (!queryParams.accountId) {
|
||||||
|
message.error('未选中公众号，无法查询已发表图文')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const data = await FreePublishApi.getFreePublishPage(queryParams)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
// 默认选中第一个
|
||||||
|
if (accountList.value.length > 0) {
|
||||||
|
queryParams.accountId = accountList.value[0].id
|
||||||
|
}
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = async (item) => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm('删除后用户将无法访问此页面，确定删除？')
|
||||||
|
// 发起删除
|
||||||
|
await FreePublishApi.deleteFreePublish(queryParams.accountId, item.articleId)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
accountList.value = await MpAccountApi.getSimpleAccountList()
|
||||||
|
// 选中第一个
|
||||||
|
if (accountList.value.length > 0) {
|
||||||
|
queryParams.accountId = accountList.value[0].id
|
||||||
|
}
|
||||||
|
await getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ope-row {
|
||||||
|
margin-top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload__tip {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增图文 */
|
||||||
|
.left {
|
||||||
|
display: inline-block;
|
||||||
|
width: 35%;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
margin-top: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader {
|
||||||
|
width: 20%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
border-color: #165dff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 230px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar1 {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.digest {
|
||||||
|
width: 60%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*新增图文*/
|
||||||
|
/*瀑布流样式*/
|
||||||
|
.waterfall {
|
||||||
|
width: 100%;
|
||||||
|
column-gap: 10px;
|
||||||
|
column-count: 5;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waterfall-item {
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
break-inside: avoid;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) and (max-width: 1300px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*瀑布流样式*/
|
||||||
|
.news-main {
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content {
|
||||||
|
background-color: #acadae;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
background-color: black;
|
||||||
|
width: 98%;
|
||||||
|
padding: 1%;
|
||||||
|
opacity: 0.65;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-main-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 5px 0px;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-item {
|
||||||
|
position: relative;
|
||||||
|
margin-left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-item-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-item-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 25%;
|
||||||
|
background-color: #acadae;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-tt {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeAddNews {
|
||||||
|
border: 5px solid #2bb673;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-main-plus {
|
||||||
|
width: 280px;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-plus {
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-item {
|
||||||
|
width: 60%;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 auto 10px auto;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.father .child {
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.father:hover .child {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-div {
|
||||||
|
display: inline-block;
|
||||||
|
width: 30%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-but {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,3 +1,282 @@
|
|||||||
<template>
|
<template>
|
||||||
<span>开发中</span>
|
<ContentWrap>
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form
|
||||||
|
class="-mb-15px"
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
label-width="68px"
|
||||||
|
>
|
||||||
|
<el-form-item label="公众号" prop="accountId">
|
||||||
|
<el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in accountList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="消息类型" prop="type">
|
||||||
|
<el-select v-model="queryParams.type" placeholder="请选择消息类型" class="!w-240px">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户标识" prop="openid">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.openid"
|
||||||
|
placeholder="请输入用户标识"
|
||||||
|
clearable
|
||||||
|
:v-on="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.createTime"
|
||||||
|
style="width: 240px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="['00:00:00', '23:59:59']"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleQuery">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" />
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh" class="mr-5px" />
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column
|
||||||
|
label="发送时间"
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
width="180"
|
||||||
|
:formatter="dateFormatter"
|
||||||
|
/>
|
||||||
|
<el-table-column label="消息类型" align="center" prop="type" width="80" />
|
||||||
|
<el-table-column label="发送方" align="center" prop="sendFrom" width="80">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-if="scope.row.sendFrom === 1" type="success">粉丝</el-tag>
|
||||||
|
<el-tag v-else type="info">公众号</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="用户标识" align="center" prop="openid" width="300" />
|
||||||
|
<el-table-column label="内容" prop="content">
|
||||||
|
<template #default="scope">
|
||||||
|
<!-- 【事件】区域 -->
|
||||||
|
<div v-if="scope.row.type === 'event' && scope.row.event === 'subscribe'">
|
||||||
|
<el-tag type="success">关注</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'unsubscribe'">
|
||||||
|
<el-tag type="danger">取消关注</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'CLICK'">
|
||||||
|
<el-tag>点击菜单</el-tag>
|
||||||
|
【{{ scope.row.eventKey }}】
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'VIEW'">
|
||||||
|
<el-tag>点击菜单链接</el-tag>
|
||||||
|
【{{ scope.row.eventKey }}】
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_waitmsg'">
|
||||||
|
<el-tag>扫码结果</el-tag>
|
||||||
|
【{{ scope.row.eventKey }}】
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_push'">
|
||||||
|
<el-tag>扫码结果</el-tag>
|
||||||
|
【{{ scope.row.eventKey }}】
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_sysphoto'">
|
||||||
|
<el-tag>系统拍照发图</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_photo_or_album'">
|
||||||
|
<el-tag>拍照或者相册</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_weixin'">
|
||||||
|
<el-tag>微信相册</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event' && scope.row.event === 'location_select'">
|
||||||
|
<el-tag>选择地理位置</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'event'">
|
||||||
|
<el-tag type="danger">未知事件类型</el-tag>
|
||||||
|
</div>
|
||||||
|
<!-- 【消息】区域 -->
|
||||||
|
<div v-else-if="scope.row.type === 'text'">{{ scope.row.content }}</div>
|
||||||
|
<div v-else-if="scope.row.type === 'voice'">
|
||||||
|
<wx-voice-player :url="scope.row.mediaUrl" :content="scope.row.recognition" />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'image'">
|
||||||
|
<a target="_blank" :href="scope.row.mediaUrl">
|
||||||
|
<img :src="scope.row.mediaUrl" style="width: 100px" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'video' || scope.row.type === 'shortvideo'">
|
||||||
|
<wx-video-player :url="scope.row.mediaUrl" style="margin-top: 10px" />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'link'">
|
||||||
|
<el-tag>链接</el-tag>
|
||||||
|
：
|
||||||
|
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'location'">
|
||||||
|
<wx-location
|
||||||
|
:label="scope.row.label"
|
||||||
|
:location-y="scope.row.locationY"
|
||||||
|
:location-x="scope.row.locationX"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'music'">
|
||||||
|
<wx-music
|
||||||
|
:title="scope.row.title"
|
||||||
|
:description="scope.row.description"
|
||||||
|
:thumb-media-url="scope.row.thumbMediaUrl"
|
||||||
|
:music-url="scope.row.musicUrl"
|
||||||
|
:hq-music-url="scope.row.hqMusicUrl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="scope.row.type === 'news'">
|
||||||
|
<wx-news :articles="scope.row.articles" />
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-tag type="danger">未知消息类型</el-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="handleSend(scope.row)"
|
||||||
|
v-hasPermi="['mp:message:send']"
|
||||||
|
>
|
||||||
|
消息
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 发送消息的弹窗 -->
|
||||||
|
<el-dialog title="粉丝消息列表" v-model="open" @click="openDialog()" width="50%">
|
||||||
|
<template #footer>
|
||||||
|
<wx-msg :user-id="userId" v-if="open" />
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts" name="MpMessage">
|
||||||
|
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
|
||||||
|
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
|
||||||
|
import WxMsg from '@/views/mp/components/wx-msg/main.vue'
|
||||||
|
import WxLocation from '@/views/mp/components/wx-location/main.vue'
|
||||||
|
import WxMusic from '@/views/mp/components/wx-music/main.vue'
|
||||||
|
import WxNews from '@/views/mp/components/wx-news/main.vue'
|
||||||
|
import * as MpAccountApi from '@/api/mp/account'
|
||||||
|
import * as MpMessageApi from '@/api/mp/message'
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const list = ref([]) // 列表的数据
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
openid: null,
|
||||||
|
accountId: null,
|
||||||
|
type: null,
|
||||||
|
createTime: []
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
// TODO 芋艿：下面应该移除
|
||||||
|
const open = ref(false) // 是否显示弹出层
|
||||||
|
const userId = ref(0) // 操作的用户编号
|
||||||
|
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
// 如果没有选中公众号账号，则进行提示。
|
||||||
|
if (!queryParams.accountId) {
|
||||||
|
await message.error('未选中公众号，无法查询消息')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const data = await MpMessageApi.getMessagePage(queryParams)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = async () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
// 默认选中第一个
|
||||||
|
if (accountList.value.length > 0) {
|
||||||
|
// @ts-ignore
|
||||||
|
queryParams.accountId = accountList.value[0].id
|
||||||
|
}
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
const handleSend = async (row) => {
|
||||||
|
userId.value = row.userId
|
||||||
|
open.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openDialog = () => {
|
||||||
|
open.value = true
|
||||||
|
}
|
||||||
|
// const closeDiaLog = () => {
|
||||||
|
// open.value = false
|
||||||
|
// }
|
||||||
|
|
||||||
|
/** 初始化 **/
|
||||||
|
onMounted(async () => {
|
||||||
|
accountList.value = await MpAccountApi.getSimpleAccountList()
|
||||||
|
// 选中第一个
|
||||||
|
if (accountList.value.length > 0) {
|
||||||
|
// @ts-ignore
|
||||||
|
queryParams.accountId = accountList.value[0].id
|
||||||
|
}
|
||||||
|
await getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,3 +1,365 @@
|
|||||||
<template>
|
<template>
|
||||||
<span>开发中</span>
|
<!-- 搜索工作栏 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-form class="-mb-15px" ref="queryForm" :inline="true" label-width="68px">
|
||||||
|
<el-form-item label="公众号" prop="accountId">
|
||||||
|
<el-select v-model="accountId" @change="getSummary" class="!w-240px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in accountList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间范围" prop="dateRange">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRange"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
@change="getSummary"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</content-wrap>
|
||||||
|
|
||||||
|
<!-- 图表 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>用户增减数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<Echart :options="userSummaryOption" :height="420" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>累计用户数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<Echart :options="userCumulateOption" :height="420" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>消息概况数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<Echart :options="upstreamMessageOption" :height="420" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>接口分析数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<Echart :options="interfaceSummaryOption" :height="420" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</content-wrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="MpStatistics">
|
||||||
|
import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
|
||||||
|
import * as StatisticsApi from '@/api/mp/statistics'
|
||||||
|
import * as MpAccountApi from '@/api/mp/account'
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
// 默认开始时间是当前日期-7，结束时间是当前日期-1
|
||||||
|
const dateRange = ref([
|
||||||
|
beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
|
||||||
|
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
|
||||||
|
])
|
||||||
|
const accountId = ref() // 选中的公众号编号
|
||||||
|
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
|
||||||
|
|
||||||
|
const xAxisDate = ref([] as any[]) // X 轴的日期范围
|
||||||
|
// 用户增减数据图表配置项
|
||||||
|
const userSummaryOption = reactive({
|
||||||
|
color: ['#67C23A', '#E5323E'],
|
||||||
|
legend: {
|
||||||
|
data: ['新增用户', '取消关注的用户']
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: [] as any[] // X 轴的日期范围
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '新增用户',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
barGap: 0,
|
||||||
|
data: [] as any[] // 新增用户的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '取消关注的用户',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 取消关注的用户的数据
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
// 累计用户数据图表配置项
|
||||||
|
const userCumulateOption = reactive({
|
||||||
|
legend: {
|
||||||
|
data: ['累计用户量']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [] as any[]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '累计用户量',
|
||||||
|
data: [] as any[], // 累计用户量的数据
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
// 消息发送概况数据图表配置项
|
||||||
|
const upstreamMessageOption = reactive({
|
||||||
|
color: ['#67C23A', '#E5323E'],
|
||||||
|
legend: {
|
||||||
|
data: ['用户发送人数', '用户发送条数']
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: [] as any[] // X 轴的日期范围
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '用户发送人数',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 用户发送人数的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '用户发送条数',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 用户发送条数的数据
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
// 接口分析况数据图表配置项
|
||||||
|
const interfaceSummaryOption = reactive({
|
||||||
|
color: ['#67C23A', '#E5323E', '#E6A23C', '#409EFF'],
|
||||||
|
legend: {
|
||||||
|
data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时']
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: [] as any[] // X 轴的日期范围
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '被动回复用户消息的次数',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
barGap: 0,
|
||||||
|
data: [] as any[] // 被动回复用户消息的次数的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '失败次数',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 失败次数的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '最大耗时',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 最大耗时的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '总耗时',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 总耗时的数据
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 加载公众号账号的列表 */
|
||||||
|
const getAccountList = async () => {
|
||||||
|
accountList.value = await MpAccountApi.getSimpleAccountList()
|
||||||
|
// 默认选中第一个
|
||||||
|
if (accountList.value.length > 0) {
|
||||||
|
accountId.value = accountList.value[0].id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 加载数据 */
|
||||||
|
const getSummary = () => {
|
||||||
|
// 如果没有选中公众号账号，则进行提示。
|
||||||
|
if (!accountId) {
|
||||||
|
message.error('未选中公众号，无法统计数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 必须选择 7 天内，因为公众号有时间跨度限制为 7
|
||||||
|
if (betweenDay(dateRange.value[0], dateRange.value[1]) >= 7) {
|
||||||
|
message.error('时间间隔 7 天以内，请重新选择')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 清空横坐标日期
|
||||||
|
xAxisDate.value = []
|
||||||
|
// 横坐标加载日期数据
|
||||||
|
const days = betweenDay(dateRange.value[0], dateRange.value[1]) // 相差天数
|
||||||
|
for (let i = 0; i <= days; i++) {
|
||||||
|
xAxisDate.value.push(
|
||||||
|
formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'YYYY-MM-DD')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
// 初始化图表
|
||||||
|
initUserSummaryChart()
|
||||||
|
initUserCumulateChart()
|
||||||
|
initUpstreamMessageChart()
|
||||||
|
interfaceSummaryChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 用户增减数据 */
|
||||||
|
const initUserSummaryChart = async () => {
|
||||||
|
userSummaryOption.xAxis.data = []
|
||||||
|
userSummaryOption.series[0].data = []
|
||||||
|
userSummaryOption.series[1].data = []
|
||||||
|
try {
|
||||||
|
// 用户增减数据
|
||||||
|
const data = await StatisticsApi.getUserSummary({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||||
|
})
|
||||||
|
// 横坐标
|
||||||
|
userSummaryOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
xAxisDate.value.forEach((date, index) => {
|
||||||
|
data.forEach((item) => {
|
||||||
|
// 匹配日期
|
||||||
|
const refDate = formatDate(new Date(item.refDate), 'YYYY-MM-DD')
|
||||||
|
if (refDate.indexOf(date) === -1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 设置数据到对应的位置
|
||||||
|
userSummaryOption.series[0].data[index] = item.newUser
|
||||||
|
userSummaryOption.series[1].data[index] = item.cancelUser
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 累计用户数据 */
|
||||||
|
const initUserCumulateChart = async () => {
|
||||||
|
userCumulateOption.xAxis.data = []
|
||||||
|
userCumulateOption.series[0].data = []
|
||||||
|
// 发起请求
|
||||||
|
try {
|
||||||
|
const data = await StatisticsApi.getUserCumulate({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||||
|
})
|
||||||
|
userCumulateOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
userCumulateOption.series[0].data[index] = item.cumulateUser
|
||||||
|
})
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 消息概况数据 */
|
||||||
|
const initUpstreamMessageChart = async () => {
|
||||||
|
upstreamMessageOption.xAxis.data = []
|
||||||
|
upstreamMessageOption.series[0].data = []
|
||||||
|
upstreamMessageOption.series[1].data = []
|
||||||
|
// 发起请求
|
||||||
|
try {
|
||||||
|
const data = await StatisticsApi.getUpstreamMessage({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||||
|
})
|
||||||
|
upstreamMessageOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
upstreamMessageOption.series[0].data[index] = item.messageUser
|
||||||
|
upstreamMessageOption.series[1].data[index] = item.messageCount
|
||||||
|
})
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 接口分析数据 */
|
||||||
|
const interfaceSummaryChart = async () => {
|
||||||
|
interfaceSummaryOption.xAxis.data = []
|
||||||
|
interfaceSummaryOption.series[0].data = []
|
||||||
|
interfaceSummaryOption.series[1].data = []
|
||||||
|
interfaceSummaryOption.series[2].data = []
|
||||||
|
interfaceSummaryOption.series[3].data = []
|
||||||
|
// 发起请求
|
||||||
|
try {
|
||||||
|
const data = await StatisticsApi.getInterfaceSummary({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||||
|
})
|
||||||
|
interfaceSummaryOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
interfaceSummaryOption.series[0].data[index] = item.callbackCount
|
||||||
|
interfaceSummaryOption.series[1].data[index] = item.failCount
|
||||||
|
interfaceSummaryOption.series[2].data[index] = item.maxTimeCost
|
||||||
|
interfaceSummaryOption.series[3].data[index] = item.totalTimeCost
|
||||||
|
})
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(async () => {
|
||||||
|
// 获取公众号下拉列表
|
||||||
|
await getAccountList()
|
||||||
|
// 加载数据
|
||||||
|
getSummary()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,110 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
|
||||||
<el-form-item label="商户全称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入商户全称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="商户简称" prop="shortName">
|
|
||||||
<el-input v-model="formData.shortName" placeholder="请输入商户简称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开启状态" prop="status">
|
|
||||||
<el-select v-model="formData.status" placeholder="请选择状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as MerchantApi from '@/api/pay/merchant'
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
shortName: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '商户名称不能为空', trigger: 'blur' }],
|
|
||||||
shortName: [{ required: true, message: '商户简称不能为空', trigger: 'blur' }],
|
|
||||||
status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await MerchantApi.getMerchant(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as MerchantApi.MerchantVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await MerchantApi.createMerchant(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await MerchantApi.updateMerchant(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
shortName: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="IP 查询" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="IP" prop="ip">
|
|
||||||
<el-input v-model="formData.ip" placeholder="请输入 IP 地址" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="地址" prop="result">
|
|
||||||
<el-input v-model="formData.result" readonly placeholder="展示查询 IP 结果" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as AreaApi from '@/api/system/area'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
|
|
||||||
const formData = ref({
|
|
||||||
ip: '',
|
|
||||||
result: undefined
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
ip: [{ required: true, message: 'IP 地址不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async () => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value.result = await AreaApi.getAreaByIp(formData.value.ip!.trim())
|
|
||||||
message.success('查询成功')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
ip: '',
|
|
||||||
result: undefined
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,174 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="上级部门" prop="parentId">
|
|
||||||
<el-tree-select
|
|
||||||
v-model="formData.parentId"
|
|
||||||
:data="deptTree"
|
|
||||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
|
||||||
value-key="deptId"
|
|
||||||
placeholder="请选择上级部门"
|
|
||||||
check-strictly
|
|
||||||
default-expand-all
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入部门名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示排序" prop="sort">
|
|
||||||
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="负责人" prop="leaderUserId">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.leaderUserId"
|
|
||||||
placeholder="请输入负责人"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in userList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.nickname"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话" prop="phone">
|
|
||||||
<el-input v-model="formData.phone" placeholder="请输入联系电话" maxlength="11" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="邮箱" prop="email">
|
|
||||||
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-select v-model="formData.status" placeholder="请选择状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { handleTree } from '@/utils/tree'
|
|
||||||
import * as DeptApi from '@/api/system/dept'
|
|
||||||
import * as UserApi from '@/api/system/user'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
title: '',
|
|
||||||
parentId: undefined,
|
|
||||||
name: undefined,
|
|
||||||
sort: undefined,
|
|
||||||
leaderUserId: undefined,
|
|
||||||
phone: undefined,
|
|
||||||
email: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
|
|
||||||
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
|
|
||||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
|
|
||||||
phone: [
|
|
||||||
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const deptTree = ref() // 树形结构
|
|
||||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await DeptApi.getDeptApi(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 获得用户列表
|
|
||||||
userList.value = await UserApi.getSimpleUserList()
|
|
||||||
// 获得部门树
|
|
||||||
await getTree()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as DeptApi.DeptVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await DeptApi.createDeptApi(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await DeptApi.updateDeptApi(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
title: '',
|
|
||||||
parentId: undefined,
|
|
||||||
name: undefined,
|
|
||||||
sort: undefined,
|
|
||||||
leaderUserId: undefined,
|
|
||||||
phone: undefined,
|
|
||||||
email: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获得部门树 */
|
|
||||||
const getTree = async () => {
|
|
||||||
deptTree.value = []
|
|
||||||
const data = await DeptApi.getSimpleDeptList()
|
|
||||||
let dept: Tree = { id: 0, name: '顶级部门', children: [] }
|
|
||||||
dept.children = handleTree(data)
|
|
||||||
deptTree.value.push(dept)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="字典类型" prop="type">
|
|
||||||
<el-input
|
|
||||||
:disabled="typeof formData.id !== 'undefined'"
|
|
||||||
v-model="formData.dictType"
|
|
||||||
placeholder="请输入参数名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="数据标签" prop="label">
|
|
||||||
<el-input v-model="formData.label" placeholder="请输入数据标签" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="数据键值" prop="value">
|
|
||||||
<el-input v-model="formData.value" placeholder="请输入数据键值" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示排序" prop="sort">
|
|
||||||
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="parseInt(dict.value)"
|
|
||||||
:label="parseInt(dict.value)"
|
|
||||||
>{{ dict.label }}</el-radio
|
|
||||||
>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="颜色类型" prop="colorType">
|
|
||||||
<el-select v-model="formData.colorType">
|
|
||||||
<el-option
|
|
||||||
v-for="item in colorTypeOptions"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label + '(' + item.value + ')'"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="CSS Class" prop="cssClass">
|
|
||||||
<el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
|
||||||
import * as DictDataApi from '@/api/system/dict/dict.data'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
sort: undefined,
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
dictType: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
colorType: '',
|
|
||||||
cssClass: '',
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
|
|
||||||
value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
// 数据标签回显样式
|
|
||||||
const colorTypeOptions = readonly([
|
|
||||||
{
|
|
||||||
value: 'default',
|
|
||||||
label: '默认'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'primary',
|
|
||||||
label: '主要'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'success',
|
|
||||||
label: '成功'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'info',
|
|
||||||
label: '信息'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'warning',
|
|
||||||
label: '警告'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'danger',
|
|
||||||
label: '危险'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await DictDataApi.getDictData(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as DictDataApi.DictDataVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await DictDataApi.createDictData(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await DictDataApi.updateDictData(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
sort: undefined,
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
dictType: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
colorType: '',
|
|
||||||
cssClass: '',
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
<template>
|
|
||||||
<content-wrap>
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="字典名称" prop="dictType">
|
|
||||||
<el-select v-model="queryParams.dictType" class="!w-240px">
|
|
||||||
<el-option v-for="item in dicts" :key="item.type" :label="item.name" :value="item.type" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="字典标签" prop="label">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.label"
|
|
||||||
placeholder="请输入字典标签"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
<el-button type="primary" @click="openModal('create')" v-hasPermi="['system:dict:create']">
|
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
@click="handleExport"
|
|
||||||
:loading="exportLoading"
|
|
||||||
v-hasPermi="['system:dict:export']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</content-wrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<content-wrap>
|
|
||||||
<el-table v-loading="loading" :data="list">
|
|
||||||
<el-table-column label="字典编码" align="center" prop="id" />
|
|
||||||
<el-table-column label="字典标签" align="center" prop="label" />
|
|
||||||
<el-table-column label="字典键值" align="center" prop="value" />
|
|
||||||
<el-table-column label="字典排序" align="center" prop="sort" />
|
|
||||||
<el-table-column label="状态" align="center" prop="status">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="颜色类型" align="center" prop="colorType" />
|
|
||||||
<el-table-column label="CSS Class" align="center" prop="cssClass" />
|
|
||||||
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openModal('update', scope.row.id)"
|
|
||||||
v-hasPermi="['system:dict:update']"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.row.id)"
|
|
||||||
v-hasPermi="['system:dict:delete']"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</content-wrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：添加/修改 -->
|
|
||||||
<data-form ref="modalRef" @success="getList" />
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts" name="Data">
|
|
||||||
import * as DictDataApi from '@/api/system/dict/dict.data'
|
|
||||||
import * as DictTypeApi from '@/api/system/dict/dict.type'
|
|
||||||
import { getDictOptions, DICT_TYPE } from '@/utils/dict'
|
|
||||||
import download from '@/utils/download'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import DataForm from './data.form.vue'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const route = useRoute() // 路由
|
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
label: '',
|
|
||||||
status: undefined,
|
|
||||||
dictType: route.params.dictType
|
|
||||||
})
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
const exportLoading = ref(false) // 导出的加载中
|
|
||||||
const dicts = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await DictDataApi.getDictDataPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 添加/修改操作 */
|
|
||||||
const modalRef = ref()
|
|
||||||
const openModal = (type: string, id?: number) => {
|
|
||||||
modalRef.value.openModal(type, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (id: number) => {
|
|
||||||
try {
|
|
||||||
// 删除的二次确认
|
|
||||||
await message.delConfirm()
|
|
||||||
// 发起删除
|
|
||||||
await DictDataApi.deleteDictData(id)
|
|
||||||
message.success(t('common.delSuccess'))
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
const handleExport = async () => {
|
|
||||||
try {
|
|
||||||
// 导出的二次确认
|
|
||||||
await message.exportConfirm()
|
|
||||||
// 发起导出
|
|
||||||
exportLoading.value = true
|
|
||||||
const data = await DictDataApi.exportDictDataApi(queryParams)
|
|
||||||
download.excel(data, '字典数据.xls')
|
|
||||||
} catch {
|
|
||||||
} finally {
|
|
||||||
exportLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 查询字典（精简)列表 */
|
|
||||||
const getDictList = async () => {
|
|
||||||
dicts.value = await DictTypeApi.getSimpleDictTypeList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
// 查询字典（精简)列表
|
|
||||||
getDictList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="字典名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入字典名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="字典类型" prop="type">
|
|
||||||
<el-input
|
|
||||||
:disabled="typeof formData.id !== 'undefined'"
|
|
||||||
v-model="formData.type"
|
|
||||||
placeholder="请输入参数名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="parseInt(dict.value)"
|
|
||||||
:label="parseInt(dict.value)"
|
|
||||||
>{{ dict.label }}</el-radio
|
|
||||||
>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
|
||||||
import * as DictTypeApi from '@/api/system/dict/dict.type'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
type: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
|
|
||||||
type: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await DictTypeApi.getDictType(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as DictTypeApi.DictTypeVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await DictTypeApi.createDictType(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await DictTypeApi.updateDictType(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
type: '',
|
|
||||||
name: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="100px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="应用名" prop="applicationName">
|
|
||||||
<el-input v-model="formData.applicationName" placeholder="请输入应用名" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="错误码编码" prop="code">
|
|
||||||
<el-input v-model="formData.code" placeholder="请输入错误码编码" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="错误码提示" prop="message">
|
|
||||||
<el-input v-model="formData.message" placeholder="请输入错误码提示" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="memo">
|
|
||||||
<el-input v-model="formData.memo" placeholder="请输入备注" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as ErrorCodeApi from '@/api/system/errorCode'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
// 表单参数
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
code: undefined,
|
|
||||||
applicationName: '',
|
|
||||||
message: '',
|
|
||||||
memo: ''
|
|
||||||
})
|
|
||||||
// 表单校验
|
|
||||||
const formRules = reactive({
|
|
||||||
applicationName: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '错误码编码不能为空', trigger: 'blur' }],
|
|
||||||
message: [{ required: true, message: '错误码提示不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await ErrorCodeApi.getErrorCodeApi(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as ErrorCodeApi.ErrorCodeVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await ErrorCodeApi.createErrorCodeApi(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await ErrorCodeApi.updateErrorCodeApi(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 表单重置 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
applicationName: '',
|
|
||||||
code: undefined,
|
|
||||||
message: '',
|
|
||||||
memo: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="详情" v-model="modelVisible" width="800">
|
|
||||||
<el-descriptions border :column="1">
|
|
||||||
<el-descriptions-item label="日志编号" min-width="120">
|
|
||||||
{{ detailData.id }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="detailData.logType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户名称">
|
|
||||||
{{ detailData.username }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="登录地址">
|
|
||||||
{{ detailData.userIp }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="浏览器">
|
|
||||||
{{ detailData.userAgent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="登陆结果">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="detailData.result" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="登录日期">
|
|
||||||
{{ formatDate(detailData.createTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as LoginLogApi from '@/api/system/loginLog'
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref() // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (data: LoginLogApi.LoginLogVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as MailAccountApi from '@/api/system/mail/account'
|
|
||||||
import { rules, allSchemas } from './account.data'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = await MailAccountApi.getMailAccount(id)
|
|
||||||
formRef.value.setValues(data)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.getElFormRef().validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formRef.value.formModel as MailAccountApi.MailAccountVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await MailAccountApi.createMailAccount(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await MailAccountApi.updateMailAccount(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
|
|
||||||
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
|
|
||||||
<!-- 展示 HTML 内容 -->
|
|
||||||
<template #templateContent="{ row }">
|
|
||||||
<div v-html="row.templateContent"></div>
|
|
||||||
</template>
|
|
||||||
</Descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as MailLogApi from '@/api/system/mail/log'
|
|
||||||
import { allSchemas } from './log.data'
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref() // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (id: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = await MailLogApi.getMailLog(id)
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible" :scroll="true" :width="800" :max-height="500">
|
|
||||||
<Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as MailTemplateApi from '@/api/system/mail/template'
|
|
||||||
import { rules, allSchemas } from './template.data'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = await MailTemplateApi.getMailTemplate(id)
|
|
||||||
formRef.value.setValues(data)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.getElFormRef().validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formRef.value.formModel as MailTemplateApi.MailTemplateVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await MailTemplateApi.createMailTemplate(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await MailTemplateApi.updateMailTemplate(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="测试" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="120px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="模板内容" prop="content">
|
|
||||||
<Editor :model-value="formData.content" readonly height="150px" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="收件邮箱" prop="mail">
|
|
||||||
<el-input v-model="formData.mail" placeholder="请输入收件邮箱" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-for="param in formData.params"
|
|
||||||
:key="param"
|
|
||||||
:label="'参数 {' + param + '}'"
|
|
||||||
:prop="'templateParams.' + param"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formData.templateParams[param]"
|
|
||||||
:placeholder="'请输入 ' + param + ' 参数'"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as MailTemplateApi from '@/api/system/mail/template'
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formData = ref({
|
|
||||||
content: '',
|
|
||||||
params: {},
|
|
||||||
mail: '',
|
|
||||||
templateCode: '',
|
|
||||||
templateParams: new Map()
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
mail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
|
|
||||||
templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
|
|
||||||
templateParams: {}
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (id: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 设置数据
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = await MailTemplateApi.getMailTemplate(id)
|
|
||||||
// 设置动态表单
|
|
||||||
formData.value.content = data.content
|
|
||||||
formData.value.params = data.params
|
|
||||||
formData.value.templateCode = data.code
|
|
||||||
formData.value.templateParams = data.params.reduce((obj, item) => {
|
|
||||||
obj[item] = '' // 给每个动态属性赋值，避免无法读取
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
formRules.templateParams = data.params.reduce((obj, item) => {
|
|
||||||
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as MailTemplateApi.MailSendReqVO
|
|
||||||
const logId = await MailTemplateApi.sendMail(data)
|
|
||||||
if (logId) {
|
|
||||||
message.success('提交发送成功！发送结果，见发送日志编号：' + logId)
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
content: '',
|
|
||||||
params: {},
|
|
||||||
mail: '',
|
|
||||||
templateCode: '',
|
|
||||||
templateParams: new Map()
|
|
||||||
}
|
|
||||||
formRules.templateParams = {}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,253 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="100px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="上级菜单">
|
|
||||||
<el-tree-select
|
|
||||||
node-key="id"
|
|
||||||
v-model="formData.parentId"
|
|
||||||
:props="defaultProps"
|
|
||||||
:data="menuTree"
|
|
||||||
:default-expanded-keys="[0]"
|
|
||||||
check-strictly
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入菜单名称" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单类型" prop="type">
|
|
||||||
<el-radio-group v-model="formData.type">
|
|
||||||
<el-radio-button
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
|
|
||||||
:key="dict.label"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单图标" v-if="formData.type !== 3">
|
|
||||||
<IconSelect v-model="formData.icon" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="路由地址" prop="path" v-if="formData.type !== 3">
|
|
||||||
<template #label>
|
|
||||||
<Tooltip
|
|
||||||
titel="路由地址"
|
|
||||||
message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="formData.path" placeholder="请输入路由地址" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="组件地址" prop="component" v-if="formData.type === 2">
|
|
||||||
<el-input v-model="formData.component" placeholder="例如说：system/user/index" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="组件名字" prop="componentName" v-if="formData.type === 2">
|
|
||||||
<el-input v-model="formData.componentName" placeholder="例如说：SystemUser" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="权限标识" prop="permission" v-if="formData.type !== 1">
|
|
||||||
<template #label>
|
|
||||||
<Tooltip
|
|
||||||
titel="权限标识"
|
|
||||||
message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="formData.permission" placeholder="请输入权限标识" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示排序" prop="sort">
|
|
||||||
<el-input-number v-model="formData.sort" controls-position="right" :min="0" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.label"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示状态" prop="visible" v-if="formData.type !== 3">
|
|
||||||
<template #label>
|
|
||||||
<Tooltip titel="显示状态" message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" />
|
|
||||||
</template>
|
|
||||||
<el-radio-group v-model="formData.visible">
|
|
||||||
<el-radio border key="true" :label="true">显示</el-radio>
|
|
||||||
<el-radio border key="false" :label="false">隐藏</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="总是显示" prop="alwaysShow" v-if="formData.type !== 3">
|
|
||||||
<template #label>
|
|
||||||
<Tooltip
|
|
||||||
titel="总是显示"
|
|
||||||
message="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-radio-group v-model="formData.alwaysShow">
|
|
||||||
<el-radio border key="true" :label="true">总是</el-radio>
|
|
||||||
<el-radio border key="false" :label="false">不是</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="缓存状态" prop="keepAlive" v-if="formData.type === 2">
|
|
||||||
<template #label>
|
|
||||||
<Tooltip
|
|
||||||
titel="缓存状态"
|
|
||||||
message="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-radio-group v-model="formData.keepAlive">
|
|
||||||
<el-radio border key="true" :label="true">缓存</el-radio>
|
|
||||||
<el-radio border key="false" :label="false">不缓存</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import * as MenuApi from '@/api/system/menu'
|
|
||||||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
||||||
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import { handleTree, defaultProps } from '@/utils/tree'
|
|
||||||
const { wsCache } = useCache()
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
permission: '',
|
|
||||||
type: SystemMenuTypeEnum.DIR,
|
|
||||||
sort: Number(undefined),
|
|
||||||
parentId: 0,
|
|
||||||
path: '',
|
|
||||||
icon: '',
|
|
||||||
component: '',
|
|
||||||
componentName: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
visible: true,
|
|
||||||
keepAlive: true,
|
|
||||||
alwaysShow: true
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
|
|
||||||
path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
|
|
||||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number, parentId?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
if (parentId) {
|
|
||||||
formData.value.parentId = parentId
|
|
||||||
}
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await MenuApi.getMenuApi(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 获得菜单列表
|
|
||||||
await getTree()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
if (
|
|
||||||
formData.value.type === SystemMenuTypeEnum.DIR ||
|
|
||||||
formData.value.type === SystemMenuTypeEnum.MENU
|
|
||||||
) {
|
|
||||||
if (!isExternal(formData.value.path)) {
|
|
||||||
if (formData.value.parentId === 0 && formData.value.path.charAt(0) !== '/') {
|
|
||||||
message.error('路径必须以 / 开头')
|
|
||||||
return
|
|
||||||
} else if (formData.value.parentId !== 0 && formData.value.path.charAt(0) === '/') {
|
|
||||||
message.error('路径不能以 / 开头')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const data = formData.value as unknown as MenuApi.MenuVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await MenuApi.createMenu(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await MenuApi.updateMenu(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
// 清空，从而触发刷新
|
|
||||||
wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获取下拉框[上级菜单]的数据 */
|
|
||||||
const menuTree = ref<Tree[]>([]) // 树形结构
|
|
||||||
const getTree = async () => {
|
|
||||||
menuTree.value = []
|
|
||||||
const res = await MenuApi.getSimpleMenusList()
|
|
||||||
let menu: Tree = { id: 0, name: '主类目', children: [] }
|
|
||||||
menu.children = handleTree(res)
|
|
||||||
menuTree.value.push(menu)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
permission: '',
|
|
||||||
type: SystemMenuTypeEnum.DIR,
|
|
||||||
sort: Number(undefined),
|
|
||||||
parentId: 0,
|
|
||||||
path: '',
|
|
||||||
icon: '',
|
|
||||||
component: '',
|
|
||||||
componentName: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
visible: true,
|
|
||||||
keepAlive: true,
|
|
||||||
alwaysShow: true
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 判断 path 是不是外部的 HTTP 等链接 */
|
|
||||||
const isExternal = (path: string) => {
|
|
||||||
return /^(https?:|mailto:|tel:)/.test(path)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible" width="800">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="公告标题" prop="title">
|
|
||||||
<el-input v-model="formData.title" placeholder="请输入公告标题" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="公告内容" prop="content">
|
|
||||||
<Editor :model-value="formData.content" height="150px" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="公告类型" prop="type">
|
|
||||||
<el-select v-model="formData.type" placeholder="请选择公告类型" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE)"
|
|
||||||
:key="parseInt(dict.value)"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="parseInt(dict.value)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-select v-model="formData.status" placeholder="请选择状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="parseInt(dict.value)"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="parseInt(dict.value)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
|
||||||
import * as NoticeApi from '@/api/system/notice'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
title: '',
|
|
||||||
type: undefined,
|
|
||||||
content: '',
|
|
||||||
status: undefined,
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
title: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
|
|
||||||
type: [{ required: true, message: '公告类型不能为空', trigger: 'change' }],
|
|
||||||
status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
|
|
||||||
content: [{ required: true, message: '公告内容不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await NoticeApi.getNotice(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as NoticeApi.NoticeVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await NoticeApi.createNotice(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await NoticeApi.updateNotice(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
title: '',
|
|
||||||
type: undefined,
|
|
||||||
content: '',
|
|
||||||
status: undefined,
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
|
|
||||||
<el-descriptions border :column="1">
|
|
||||||
<el-descriptions-item label="编号" min-width="120">
|
|
||||||
{{ detailData.id }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户编号">
|
|
||||||
{{ detailData.userId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版编号">
|
|
||||||
{{ detailData.templateId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模板编码">
|
|
||||||
{{ detailData.templateCode }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送人名称">
|
|
||||||
{{ detailData.templateNickname }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版内容">
|
|
||||||
{{ detailData.templateContent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版参数">
|
|
||||||
{{ detailData.templateParams }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="是否已读">
|
|
||||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="阅读时间">
|
|
||||||
{{ formatDate(detailData.readTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="创建时间">
|
|
||||||
{{ formatDate(detailData.createTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref() // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500">
|
|
||||||
<el-descriptions border :column="1">
|
|
||||||
<el-descriptions-item label="发送人">
|
|
||||||
{{ detailData.templateNickname }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送时间">
|
|
||||||
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="消息类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="是否已读">
|
|
||||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="阅读时间" v-if="detailData.readStatus">
|
|
||||||
{{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="内容">
|
|
||||||
{{ detailData.templateContent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref() // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
@ -1,258 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible" scroll max-height="500px">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="160px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="客户端编号" prop="secret">
|
|
||||||
<el-input v-model="formData.clientId" placeholder="请输入客户端编号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户端密钥" prop="secret">
|
|
||||||
<el-input v-model="formData.secret" placeholder="请输入客户端密钥" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="应用名" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入应用名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="应用图标">
|
|
||||||
<UploadImg v-model="formData.logo" :limit="1" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="应用描述">
|
|
||||||
<el-input type="textarea" v-model="formData.description" placeholder="请输入应用名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="访问令牌的有效期" prop="accessTokenValiditySeconds">
|
|
||||||
<el-input-number v-model="formData.accessTokenValiditySeconds" placeholder="单位：秒" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="刷新令牌的有效期" prop="refreshTokenValiditySeconds">
|
|
||||||
<el-input-number v-model="formData.refreshTokenValiditySeconds" placeholder="单位：秒" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="授权类型" prop="authorizedGrantTypes">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.authorizedGrantTypes"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
placeholder="请输入授权类型"
|
|
||||||
style="width: 500px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="授权范围" prop="scopes">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.scopes"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
allow-create
|
|
||||||
placeholder="请输入授权范围"
|
|
||||||
style="width: 500px"
|
|
||||||
>
|
|
||||||
<el-option v-for="scope in formData.scopes" :key="scope" :label="scope" :value="scope" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="自动授权范围" prop="autoApproveScopes">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.autoApproveScopes"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
placeholder="请输入授权范围"
|
|
||||||
style="width: 500px"
|
|
||||||
>
|
|
||||||
<el-option v-for="scope in formData.scopes" :key="scope" :label="scope" :value="scope" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="可重定向的 URI 地址" prop="redirectUris">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.redirectUris"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
allow-create
|
|
||||||
placeholder="请输入可重定向的 URI 地址"
|
|
||||||
style="width: 500px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="redirectUri in formData.redirectUris"
|
|
||||||
:key="redirectUri"
|
|
||||||
:label="redirectUri"
|
|
||||||
:value="redirectUri"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="权限" prop="authorities">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.authorities"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
allow-create
|
|
||||||
placeholder="请输入权限"
|
|
||||||
style="width: 500px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="authority in formData.authorities"
|
|
||||||
:key="authority"
|
|
||||||
:label="authority"
|
|
||||||
:value="authority"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="资源" prop="resourceIds">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.resourceIds"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
allow-create
|
|
||||||
placeholder="请输入资源"
|
|
||||||
style="width: 500px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="resourceId in formData.resourceIds"
|
|
||||||
:key="resourceId"
|
|
||||||
:label="resourceId"
|
|
||||||
:value="resourceId"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="附加信息" prop="additionalInformation">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-model="formData.additionalInformation"
|
|
||||||
placeholder="请输入附加信息，JSON 格式数据"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import * as ClientApi from '@/api/system/oauth2/client'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
clientId: undefined,
|
|
||||||
secret: undefined,
|
|
||||||
name: undefined,
|
|
||||||
logo: undefined,
|
|
||||||
description: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
accessTokenValiditySeconds: 30 * 60,
|
|
||||||
refreshTokenValiditySeconds: 30 * 24 * 60,
|
|
||||||
redirectUris: [],
|
|
||||||
authorizedGrantTypes: [],
|
|
||||||
scopes: [],
|
|
||||||
autoApproveScopes: [],
|
|
||||||
authorities: [],
|
|
||||||
resourceIds: [],
|
|
||||||
additionalInformation: undefined
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
clientId: [{ required: true, message: '客户端编号不能为空', trigger: 'blur' }],
|
|
||||||
secret: [{ required: true, message: '客户端密钥不能为空', trigger: 'blur' }],
|
|
||||||
name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
|
|
||||||
logo: [{ required: true, message: '应用图标不能为空', trigger: 'blur' }],
|
|
||||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
|
||||||
accessTokenValiditySeconds: [
|
|
||||||
{ required: true, message: '访问令牌的有效期不能为空', trigger: 'blur' }
|
|
||||||
],
|
|
||||||
refreshTokenValiditySeconds: [
|
|
||||||
{ required: true, message: '刷新令牌的有效期不能为空', trigger: 'blur' }
|
|
||||||
],
|
|
||||||
redirectUris: [{ required: true, message: '可重定向的 URI 地址不能为空', trigger: 'blur' }],
|
|
||||||
authorizedGrantTypes: [{ required: true, message: '授权类型不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await ClientApi.getOAuth2Client(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as ClientApi.OAuth2ClientVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await ClientApi.createOAuth2Client(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await ClientApi.updateOAuth2Client(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
clientId: undefined,
|
|
||||||
secret: undefined,
|
|
||||||
name: undefined,
|
|
||||||
logo: undefined,
|
|
||||||
description: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
accessTokenValiditySeconds: 30 * 60,
|
|
||||||
refreshTokenValiditySeconds: 30 * 24 * 60,
|
|
||||||
redirectUris: [],
|
|
||||||
authorizedGrantTypes: [],
|
|
||||||
scopes: [],
|
|
||||||
autoApproveScopes: [],
|
|
||||||
authorities: [],
|
|
||||||
resourceIds: [],
|
|
||||||
additionalInformation: undefined
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
|
|
||||||
<el-descriptions border :column="1">
|
|
||||||
<el-descriptions-item label="日志主键" min-width="120">
|
|
||||||
{{ detailData.id }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="链路追踪">
|
|
||||||
{{ detailData.traceId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作人编号">
|
|
||||||
{{ detailData.userId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作人名字">
|
|
||||||
{{ detailData.userNickname }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作人 IP">
|
|
||||||
{{ detailData.userIp }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作人 UA">
|
|
||||||
{{ detailData.userAgent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作模块">
|
|
||||||
{{ detailData.module }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作名">
|
|
||||||
{{ detailData.name }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作内容" v-if="detailData.content">
|
|
||||||
{{ detailData.content }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作拓展参数" v-if="detailData.exts">
|
|
||||||
{{ detailData.exts }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="请求 URL">
|
|
||||||
{{ detailData.requestMethod }} {{ detailData.requestUrl }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="Java 方法名">
|
|
||||||
{{ detailData.javaMethod }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="Java 方法参数">
|
|
||||||
{{ detailData.javaMethodArgs }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作时间">
|
|
||||||
{{ formatDate(detailData.startTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="执行时长">{{ detailData.duration }} ms</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作结果">
|
|
||||||
<div v-if="detailData.resultCode === 0">正常</div>
|
|
||||||
<div v-else>失败({{ detailData.resultCode }})</div>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作结果" v-if="detailData.resultCode === 0">
|
|
||||||
{{ detailData.resultData }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="失败提示" v-if="detailData.resultCode > 0">
|
|
||||||
{{ detailData.resultMsg }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as OperateLogApi from '@/api/system/operatelog'
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref() // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (data: OperateLogApi.OperateLogVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible" width="800">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="岗位标题" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入岗位标题" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="岗位编码" prop="code">
|
|
||||||
<el-input :model-value="formData.code" placeholder="请输入岗位编码" height="150px" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-select v-model="formData.status" placeholder="请选择状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="parseInt(dict.value)"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="parseInt(dict.value)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import * as PostApi from '@/api/system/post'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
sort: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
|
|
||||||
status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
|
|
||||||
remark: [{ required: false, message: '岗位内容不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await PostApi.getPost(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as PostApi.PostVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await PostApi.createPost(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await PostApi.updatePost(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
sort: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 弹窗 -->
|
|
||||||
<XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
|
|
||||||
<!-- 表单：添加/修改 -->
|
|
||||||
<Form
|
|
||||||
ref="formRef"
|
|
||||||
v-if="['create', 'update'].includes(actionType)"
|
|
||||||
:schema="allSchemas.formSchema"
|
|
||||||
:rules="rules"
|
|
||||||
/>
|
|
||||||
<!-- 表单：详情 -->
|
|
||||||
<Descriptions
|
|
||||||
v-if="actionType === 'detail'"
|
|
||||||
:schema="allSchemas.detailSchema"
|
|
||||||
:data="detailData"
|
|
||||||
/>
|
|
||||||
<template #footer>
|
|
||||||
<!-- 按钮：保存 -->
|
|
||||||
<XButton
|
|
||||||
v-if="['create', 'update'].includes(actionType)"
|
|
||||||
type="primary"
|
|
||||||
:title="t('action.save')"
|
|
||||||
:loading="actionLoading"
|
|
||||||
@click="submitForm()"
|
|
||||||
/>
|
|
||||||
<!-- 按钮：关闭 -->
|
|
||||||
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
|
|
||||||
</template>
|
|
||||||
</XModal>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { FormExpose } from '@/components/Form'
|
|
||||||
import * as PostApi from '@/api/system/post'
|
|
||||||
import { rules, allSchemas } from './post.data'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
// 弹窗相关的变量
|
|
||||||
const modelVisible = ref(false) // 是否显示弹出层
|
|
||||||
const modelTitle = ref('') // 弹出层标题
|
|
||||||
const modelLoading = ref(false) // 弹出层loading
|
|
||||||
const actionType = ref('') // 操作按钮的类型
|
|
||||||
const actionLoading = ref(false) // 按钮 Loading
|
|
||||||
const formRef = ref<FormExpose>() // 表单 Ref
|
|
||||||
const detailData = ref() // 详情 Ref
|
|
||||||
|
|
||||||
// 打开弹窗
|
|
||||||
const openModal = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelLoading.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
actionType.value = type
|
|
||||||
// 设置数据
|
|
||||||
if (id) {
|
|
||||||
const res = await PostApi.getPostApi(id)
|
|
||||||
if (type === 'update') {
|
|
||||||
unref(formRef)?.setValues(res)
|
|
||||||
} else if (type === 'detail') {
|
|
||||||
detailData.value = res
|
|
||||||
}
|
|
||||||
}
|
|
||||||
modelLoading.value = false
|
|
||||||
}
|
|
||||||
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
|
|
||||||
|
|
||||||
// 提交新增/修改的表单
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
const elForm = unref(formRef)?.getElFormRef()
|
|
||||||
if (!elForm) return
|
|
||||||
const valid = await elForm.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
actionLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = unref(formRef)?.formModel as PostApi.PostVO
|
|
||||||
if (actionType.value === 'create') {
|
|
||||||
await PostApi.createPostApi(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await PostApi.updatePostApi(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
actionLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,154 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="菜单权限" v-model="modelVisible">
|
|
||||||
<el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
|
|
||||||
<el-form-item label="角色名称">
|
|
||||||
<el-tag>{{ formData.name }}</el-tag>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色标识">
|
|
||||||
<el-tag>{{ formData.code }}</el-tag>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单权限">
|
|
||||||
<el-card class="cardHeight">
|
|
||||||
<template #header>
|
|
||||||
全选/全不选:
|
|
||||||
<el-switch
|
|
||||||
v-model="treeNodeAll"
|
|
||||||
inline-prompt
|
|
||||||
active-text="是"
|
|
||||||
inactive-text="否"
|
|
||||||
@change="handleCheckedTreeNodeAll"
|
|
||||||
/>
|
|
||||||
全部展开/折叠:
|
|
||||||
<el-switch
|
|
||||||
v-model="menuExpand"
|
|
||||||
inline-prompt
|
|
||||||
active-text="展开"
|
|
||||||
inactive-text="折叠"
|
|
||||||
@change="handleCheckedTreeExpand"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-tree
|
|
||||||
ref="treeRef"
|
|
||||||
node-key="id"
|
|
||||||
show-checkbox
|
|
||||||
:props="defaultProps"
|
|
||||||
:data="menuOptions"
|
|
||||||
empty-text="加载中，请稍候"
|
|
||||||
/>
|
|
||||||
</el-card>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { handleTree, defaultProps } from '@/utils/tree'
|
|
||||||
import * as RoleApi from '@/api/system/role'
|
|
||||||
import * as MenuApi from '@/api/system/menu'
|
|
||||||
import * as PermissionApi from '@/api/system/permission'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formData = reactive({
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
menuIds: []
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const menuOptions = ref<any[]>([]) // 菜单树形结构
|
|
||||||
const menuExpand = ref(false) // 展开/折叠
|
|
||||||
const treeRef = ref() // 菜单树组件 Ref
|
|
||||||
const treeNodeAll = ref(false) // 全选/全不选
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (row: RoleApi.RoleVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
|
|
||||||
menuOptions.value = handleTree(await MenuApi.getSimpleMenusList())
|
|
||||||
// 设置数据
|
|
||||||
formData.id = row.id
|
|
||||||
formData.name = row.name
|
|
||||||
formData.code = row.code
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value.menuIds = await PermissionApi.getRoleMenuList(row.id)
|
|
||||||
// 设置选中
|
|
||||||
formData.value.menuIds.forEach((menuId: number) => {
|
|
||||||
treeRef.value.setChecked(menuId, true, false)
|
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = {
|
|
||||||
roleId: formData.id,
|
|
||||||
menuIds: [
|
|
||||||
...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
|
|
||||||
...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
|
|
||||||
]
|
|
||||||
}
|
|
||||||
await PermissionApi.assignRoleMenu(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
modelVisible.value = false
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
// 重置选项
|
|
||||||
treeNodeAll.value = false
|
|
||||||
menuExpand.value = false
|
|
||||||
// 重置表单
|
|
||||||
formData.value = {
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
menuIds: []
|
|
||||||
}
|
|
||||||
treeRef.value?.setCheckedNodes([])
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 全选/全不选 */
|
|
||||||
const handleCheckedTreeNodeAll = () => {
|
|
||||||
treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 展开/折叠全部 */
|
|
||||||
const handleCheckedTreeExpand = () => {
|
|
||||||
const nodes = treeRef.value?.store.nodesMap
|
|
||||||
for (let node in nodes) {
|
|
||||||
if (nodes[node].expanded === menuExpand.value) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
nodes[node].expanded = menuExpand.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.cardHeight {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="菜单权限" v-model="modelVisible" width="800">
|
|
||||||
<el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
|
|
||||||
<el-form-item label="角色名称">
|
|
||||||
<el-tag>{{ formData.name }}</el-tag>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色标识">
|
|
||||||
<el-tag>{{ formData.code }}</el-tag>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="权限范围">
|
|
||||||
<el-select v-model="formData.dataScope">
|
|
||||||
<el-option
|
|
||||||
v-for="item in getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-form-item
|
|
||||||
label="权限范围"
|
|
||||||
v-if="formData.dataScope === SystemDataScopeEnum.DEPT_CUSTOM"
|
|
||||||
style="display: flex"
|
|
||||||
>
|
|
||||||
<el-card class="card" shadow="never">
|
|
||||||
<template #header>
|
|
||||||
全选/全不选:
|
|
||||||
<el-switch
|
|
||||||
v-model="treeNodeAll"
|
|
||||||
inline-prompt
|
|
||||||
active-text="是"
|
|
||||||
inactive-text="否"
|
|
||||||
@change="handleCheckedTreeNodeAll()"
|
|
||||||
/>
|
|
||||||
全部展开/折叠:
|
|
||||||
<el-switch
|
|
||||||
v-model="deptExpand"
|
|
||||||
inline-prompt
|
|
||||||
active-text="展开"
|
|
||||||
inactive-text="折叠"
|
|
||||||
@change="handleCheckedTreeExpand"
|
|
||||||
/>
|
|
||||||
父子联动(选中父节点，自动选择子节点):
|
|
||||||
<el-switch v-model="checkStrictly" inline-prompt active-text="是" inactive-text="否" />
|
|
||||||
</template>
|
|
||||||
<el-tree
|
|
||||||
ref="treeRef"
|
|
||||||
node-key="id"
|
|
||||||
show-checkbox
|
|
||||||
:check-strictly="!checkStrictly"
|
|
||||||
:props="defaultProps"
|
|
||||||
:data="deptOptions"
|
|
||||||
empty-text="加载中，请稍后"
|
|
||||||
default-expand-all
|
|
||||||
/>
|
|
||||||
</el-card>
|
|
||||||
</el-form-item>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { handleTree, defaultProps } from '@/utils/tree'
|
|
||||||
import { SystemDataScopeEnum } from '@/utils/constants'
|
|
||||||
import * as RoleApi from '@/api/system/role'
|
|
||||||
import * as DeptApi from '@/api/system/dept'
|
|
||||||
import * as PermissionApi from '@/api/system/permission'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formData = reactive({
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
dataScope: undefined,
|
|
||||||
dataScopeDeptIds: []
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const deptOptions = ref<any[]>([]) // 部门树形结构
|
|
||||||
const deptExpand = ref(false) // 展开/折叠
|
|
||||||
const treeRef = ref() // 菜单树组件 Ref
|
|
||||||
const treeNodeAll = ref(false) // 全选/全不选
|
|
||||||
const checkStrictly = ref(true) // 是否严格模式，即父子不关联
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (row: RoleApi.RoleVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 加载 Dept 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
|
|
||||||
deptOptions.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
||||||
// 设置数据
|
|
||||||
formData.id = row.id
|
|
||||||
formData.name = row.name
|
|
||||||
formData.code = row.code
|
|
||||||
formData.dataScope = row.dataScope
|
|
||||||
row.dataScopeDeptIds?.forEach((deptId: number) => {
|
|
||||||
treeRef.value.setChecked(deptId, true, false)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = {
|
|
||||||
roleId: formData.id,
|
|
||||||
dataScope: formData.dataScope,
|
|
||||||
dataScopeDeptIds:
|
|
||||||
formData.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
|
|
||||||
? []
|
|
||||||
: treeRef.value.getCheckedKeys(false)
|
|
||||||
}
|
|
||||||
await PermissionApi.assignRoleDataScope(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
modelVisible.value = false
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
// 重置选项
|
|
||||||
treeNodeAll.value = false
|
|
||||||
deptExpand.value = false
|
|
||||||
checkStrictly.value = true
|
|
||||||
// 重置表单
|
|
||||||
formData.value = {
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
dataScope: undefined,
|
|
||||||
dataScopeDeptIds: []
|
|
||||||
}
|
|
||||||
treeRef.value?.setCheckedNodes([])
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 全选/全不选 */
|
|
||||||
const handleCheckedTreeNodeAll = () => {
|
|
||||||
treeRef.value.setCheckedNodes(treeNodeAll.value ? deptOptions.value : [])
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 展开/折叠全部 */
|
|
||||||
const handleCheckedTreeExpand = () => {
|
|
||||||
const nodes = treeRef.value?.store.nodesMap
|
|
||||||
for (let node in nodes) {
|
|
||||||
if (nodes[node].expanded === deptExpand.value) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
nodes[node].expanded = deptExpand.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="角色名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色标识" prop="code">
|
|
||||||
<el-input :model-value="formData.code" placeholder="请输入角色标识" height="150px" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示顺序" prop="sort">
|
|
||||||
<el-input :model-value="formData.sort" placeholder="请输入显示顺序" height="150px" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-select v-model="formData.status" placeholder="请选择状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import * as RoleApi from '@/api/system/role'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
sort: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
|
|
||||||
sort: [{ required: true, message: '岗位顺序不能为空', trigger: 'change' }],
|
|
||||||
status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
|
|
||||||
remark: [{ required: false, message: '岗位内容不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await RoleApi.getRole(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
code: '',
|
|
||||||
sort: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as RoleApi.RoleVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await RoleApi.createRole(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await RoleApi.updateRole(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="敏感词" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入敏感词" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="description">
|
|
||||||
<el-input v-model="formData.description" placeholder="请输入内容" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标签" prop="tags">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.tags"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
allow-create
|
|
||||||
placeholder="请选择文章标签"
|
|
||||||
style="width: 380px"
|
|
||||||
>
|
|
||||||
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts" name="SensitiveWordForm">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import * as SensitiveWordApi from '@/api/system/sensitiveWord'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
description: '',
|
|
||||||
tags: []
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '敏感词不能为空', trigger: 'blur' }],
|
|
||||||
tags: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const tagList = ref([]) // 标签数组
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await SensitiveWordApi.getSensitiveWord(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 获得 Tag 标签列表
|
|
||||||
tagList.value = await SensitiveWordApi.getSensitiveWordTagList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as SensitiveWordApi.SensitiveWordVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await SensitiveWordApi.createSensitiveWord(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await SensitiveWordApi.updateSensitiveWord(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
description: '',
|
|
||||||
tags: []
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="检测敏感词" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="文本" prop="text">
|
|
||||||
<el-input type="textarea" v-model="formData.text" placeholder="请输入测试文本" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标签" prop="tags">
|
|
||||||
<el-select
|
|
||||||
v-model="formData.tags"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
allow-create
|
|
||||||
placeholder="请选择标签"
|
|
||||||
style="width: 380px"
|
|
||||||
>
|
|
||||||
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">检 测</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as SensitiveWordApi from '@/api/system/sensitiveWord'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formData = ref({
|
|
||||||
text: '',
|
|
||||||
tags: []
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
text: [{ required: true, message: '测试文本不能为空', trigger: 'blur' }],
|
|
||||||
tags: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const tagList = ref([]) // 标签数组
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async () => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 获得 Tag 标签列表
|
|
||||||
tagList.value = await SensitiveWordApi.getSensitiveWordTagList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const form = formData.value as unknown as SensitiveWordApi.SensitiveWordTestReqVO
|
|
||||||
const data = await SensitiveWordApi.validateText(form)
|
|
||||||
if (data.length === 0) {
|
|
||||||
message.success('不包含敏感词！')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
message.warning('包含敏感词：' + data.join(', '))
|
|
||||||
modelVisible.value = false
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
text: '',
|
|
||||||
tags: []
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="130px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="短信签名" prop="signature">
|
|
||||||
<el-input v-model="formData.signature" placeholder="请输入短信签名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="渠道编码" prop="code">
|
|
||||||
<el-select v-model="formData.code" placeholder="请选择渠道编码" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="启用状态">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信 API 的账号" prop="apiKey">
|
|
||||||
<el-input v-model="formData.apiKey" placeholder="请输入短信 API 的账号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信 API 的密钥" prop="apiSecret">
|
|
||||||
<el-input v-model="formData.apiSecret" placeholder="请输入短信 API 的密钥" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信发送回调 URL" prop="callbackUrl">
|
|
||||||
<el-input v-model="formData.callbackUrl" placeholder="请输入短信发送回调 URL" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
|
||||||
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
signature: '',
|
|
||||||
code: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: '',
|
|
||||||
apiKey: '',
|
|
||||||
apiSecret: '',
|
|
||||||
callbackUrl: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
signature: [{ required: true, message: '短信签名不能为空', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '渠道编码不能为空', trigger: 'blur' }],
|
|
||||||
status: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }],
|
|
||||||
apiKey: [{ required: true, message: '短信 API 的账号不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await SmsChannelApi.getSmsChannel(id)
|
|
||||||
console.log(formData)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = unref(formRef)?.formModel as SmsChannelApi.SmsChannelVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await SmsChannelApi.createSmsChannel(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await SmsChannelApi.updateSmsChannel(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
signature: '',
|
|
||||||
code: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: '',
|
|
||||||
apiKey: '',
|
|
||||||
apiSecret: '',
|
|
||||||
callbackUrl: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,196 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap>
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="短信签名" prop="signature">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.signature"
|
|
||||||
placeholder="请输入短信签名"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="启用状态" prop="status">
|
|
||||||
<el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="创建时间" prop="createTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.createTime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
type="daterange"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="openForm('create')"
|
|
||||||
v-hasPermi="['system:sms-channel:create']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增</el-button
|
|
||||||
>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list" align="center">
|
|
||||||
<el-table-column label="编号" align="center" prop="id" />
|
|
||||||
<el-table-column label="短信签名" align="center" prop="signature" />
|
|
||||||
<el-table-column label="渠道编码" align="center" prop="code">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.code" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="启用状态" align="center" prop="status">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
|
||||||
<el-table-column
|
|
||||||
label="短信 API 的账号"
|
|
||||||
align="center"
|
|
||||||
prop="apiKey"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="短信 API 的密钥"
|
|
||||||
align="center"
|
|
||||||
prop="apiSecret"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="短信发送回调 URL"
|
|
||||||
align="center"
|
|
||||||
prop="callbackUrl"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openForm('update', scope.row.id)"
|
|
||||||
v-hasPermi="['system:sms-channel:update']"
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.row.id)"
|
|
||||||
v-hasPermi="['system:sms-channel:delete']"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：添加/修改 -->
|
|
||||||
<SmsChannelForm ref="formRef" @success="getList" />
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts" name="SmsChannel">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
|
|
||||||
import SmsChannelForm from './SmsChannelForm.vue'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const loading = ref(false) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
signature: undefined,
|
|
||||||
status: undefined,
|
|
||||||
createTime: []
|
|
||||||
})
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await SmsChannelApi.getSmsChannelPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 添加/修改操作 */
|
|
||||||
const formRef = ref()
|
|
||||||
const openForm = (type: string, id?: number) => {
|
|
||||||
formRef.value.open(type, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (id: number) => {
|
|
||||||
try {
|
|
||||||
// 删除的二次确认
|
|
||||||
await message.delConfirm()
|
|
||||||
// 发起删除
|
|
||||||
await SmsChannelApi.deleteSmsChannel(id)
|
|
||||||
message.success(t('common.delSuccess'))
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
|
|
||||||
<el-descriptions border :column="1">
|
|
||||||
<el-descriptions-item label="日志主键" min-width="120">
|
|
||||||
{{ detailData.id }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="短信渠道">
|
|
||||||
{{ channelList.find((channel) => channel.id === detailData.channelId)?.signature }}
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="detailData.channelCode" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="短信模板">
|
|
||||||
{{ detailData.templateId }} | {{ detailData.templateCode }}
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="detailData.templateType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="API 的模板编号">
|
|
||||||
{{ detailData.apiTemplateId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户信息">
|
|
||||||
{{ detailData.mobile }}
|
|
||||||
<span v-if="detailData.userType && detailData.userId">
|
|
||||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
|
|
||||||
({{ detailData.userId }})
|
|
||||||
</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="短信内容">
|
|
||||||
{{ detailData.templateContent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="短信参数">
|
|
||||||
{{ detailData.templateParams }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="创建时间">
|
|
||||||
{{ formatDate(detailData.createTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送状态">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="detailData.sendStatus" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送时间">
|
|
||||||
{{ formatDate(detailData.sendTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送结果">
|
|
||||||
{{ detailData.sendCode }} | {{ detailData.sendMsg }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="API 发送结果">
|
|
||||||
{{ detailData.apiSendCode }} | {{ detailData.apiSendMsg }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="API 短信编号">
|
|
||||||
{{ detailData.apiSerialNo }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="API 请求编号">
|
|
||||||
{{ detailData.apiRequestId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="API 接收状态">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="detailData.receiveStatus" />
|
|
||||||
{{ formatDate(detailData.receiveTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="API 接收结果">
|
|
||||||
{{ detailData.apiReceiveCode }} | {{ detailData.apiReceiveMsg }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as SmsLogApi from '@/api/system/sms/smsLog'
|
|
||||||
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref() // 详情数据
|
|
||||||
const channelList = ref([]) // 短信渠道列表
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (data: SmsLogApi.SmsLogVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
// 加载渠道列表
|
|
||||||
channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
@ -1,263 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap>
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="100px"
|
|
||||||
>
|
|
||||||
<el-form-item label="手机号" prop="mobile">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.mobile"
|
|
||||||
placeholder="请输入手机号"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信渠道" prop="channelId">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.channelId"
|
|
||||||
placeholder="请选择短信渠道"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="channel in channelList"
|
|
||||||
:key="channel.id"
|
|
||||||
:value="channel.id"
|
|
||||||
:label="
|
|
||||||
channel.signature +
|
|
||||||
`【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板编号" prop="templateId">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.templateId"
|
|
||||||
placeholder="请输入模板编号"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="发送状态" prop="sendStatus">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.sendStatus"
|
|
||||||
placeholder="请选择发送状态"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="发送时间" prop="sendTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.sendTime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
type="daterange"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="接收状态" prop="receiveStatus">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.receiveStatus"
|
|
||||||
placeholder="请选择接收状态"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="接收时间" prop="receiveTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.receiveTime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
type="daterange"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
@click="handleExport"
|
|
||||||
:loading="exportLoading"
|
|
||||||
v-hasPermi="['system:sms-log:export']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list">
|
|
||||||
<el-table-column label="编号" align="center" prop="id" />
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="手机号" align="center" prop="mobile" width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<div>{{ scope.row.mobile }}</div>
|
|
||||||
<div v-if="scope.row.userType && scope.row.userId">
|
|
||||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
|
|
||||||
{{ '(' + scope.row.userId + ')' }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="短信内容" align="center" prop="templateContent" width="300" />
|
|
||||||
<el-table-column label="发送状态" align="center" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="scope.row.sendStatus" />
|
|
||||||
<div>{{ formatDate(scope.row.sendTime) }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="接收状态" align="center" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="scope.row.receiveStatus" />
|
|
||||||
<div>{{ formatDate(scope.row.receiveTime) }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="短信渠道" align="center" width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<div>
|
|
||||||
{{ channelList.find((channel) => channel.id === scope.row.channelId)?.signature }}
|
|
||||||
</div>
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="模板编号" align="center" prop="templateId" />
|
|
||||||
<el-table-column label="短信类型" align="center" prop="templateType">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.templateType" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" class-name="fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openDetail(scope.row)"
|
|
||||||
v-hasPermi="['system:sms-log:query']"
|
|
||||||
>
|
|
||||||
详情
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：详情 -->
|
|
||||||
<SmsLogDetail ref="detailRef" />
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts" name="smsLog">
|
|
||||||
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
|
|
||||||
import { dateFormatter, formatDate } from '@/utils/formatTime'
|
|
||||||
import download from '@/utils/download'
|
|
||||||
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
|
|
||||||
import * as SmsLogApi from '@/api/system/sms/smsLog'
|
|
||||||
import SmsLogDetail from './SmsLogDetail.vue'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const loading = ref(false) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
channelId: null,
|
|
||||||
templateId: null,
|
|
||||||
mobile: '',
|
|
||||||
sendStatus: null,
|
|
||||||
receiveStatus: null,
|
|
||||||
sendTime: [],
|
|
||||||
receiveTime: []
|
|
||||||
})
|
|
||||||
const exportLoading = ref(false) // 导出的加载中
|
|
||||||
const channelList = ref([]) // 短信渠道列表
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await SmsLogApi.getSmsLogPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
const handleExport = async () => {
|
|
||||||
try {
|
|
||||||
// 导出的二次确认
|
|
||||||
await message.exportConfirm()
|
|
||||||
// 发起导出
|
|
||||||
exportLoading.value = true
|
|
||||||
const data = await SmsLogApi.exportSmsLog(queryParams)
|
|
||||||
download.excel(data, '短信日志.xls')
|
|
||||||
} catch {
|
|
||||||
} finally {
|
|
||||||
exportLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 详情操作 */
|
|
||||||
const detailRef = ref()
|
|
||||||
const openDetail = (data: SmsLogApi.SmsLogVO) => {
|
|
||||||
detailRef.value.open(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(async () => {
|
|
||||||
await getList()
|
|
||||||
// 加载渠道列表
|
|
||||||
channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="140px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="短信渠道编号" prop="channelId">
|
|
||||||
<el-select v-model="formData.channelId" placeholder="请选择短信渠道编号">
|
|
||||||
<el-option
|
|
||||||
v-for="channel in channelList"
|
|
||||||
:key="channel.id"
|
|
||||||
:value="channel.id"
|
|
||||||
:label="
|
|
||||||
channel.signature +
|
|
||||||
`【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信类型" prop="type">
|
|
||||||
<el-select v-model="formData.type" placeholder="请选择短信类型">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板编号" prop="code">
|
|
||||||
<el-input v-model="formData.code" placeholder="请输入模板编号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入模板名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板内容" prop="content">
|
|
||||||
<el-input type="textarea" v-model="formData.content" placeholder="请输入模板内容" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开启状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="parseInt(dict.value as string)"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信 API 模板编号" prop="apiTemplateId">
|
|
||||||
<el-input v-model="formData.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
|
|
||||||
import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
|
|
||||||
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型
|
|
||||||
const formData = ref<SmsTemplateApi.SmsTemplateVO>({
|
|
||||||
id: null,
|
|
||||||
type: null,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
code: '',
|
|
||||||
name: '',
|
|
||||||
content: '',
|
|
||||||
remark: '',
|
|
||||||
apiTemplateId: '',
|
|
||||||
channelId: null
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
type: [{ required: true, message: '短信类型不能为空', trigger: 'change' }],
|
|
||||||
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
|
|
||||||
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
|
|
||||||
content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }],
|
|
||||||
apiTemplateId: [{ required: true, message: '短信 API 的模板编号不能为空', trigger: 'blur' }],
|
|
||||||
channelId: [{ required: true, message: '短信渠道编号不能为空', trigger: 'change' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const channelList = ref<SmsChannelApi.SmsChannelVO[]>([]) // 短信渠道列表
|
|
||||||
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await SmsTemplateApi.getSmsTemplate(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 加载渠道列表
|
|
||||||
channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as SmsTemplateApi.SmsTemplateVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await SmsTemplateApi.createSmsTemplate(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await SmsTemplateApi.updateSmsTemplate(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: null,
|
|
||||||
type: null,
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
code: '',
|
|
||||||
name: '',
|
|
||||||
content: '',
|
|
||||||
remark: '',
|
|
||||||
apiTemplateId: '',
|
|
||||||
channelId: null
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="测试" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="140px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="模板内容" prop="content">
|
|
||||||
<el-input
|
|
||||||
v-model="formData.content"
|
|
||||||
type="textarea"
|
|
||||||
placeholder="请输入模板内容"
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号" prop="mobile">
|
|
||||||
<el-input v-model="formData.mobile" placeholder="请输入手机号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-for="param in formData.params"
|
|
||||||
:key="param"
|
|
||||||
:label="'参数 {' + param + '}'"
|
|
||||||
:prop="'templateParams.' + param"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formData.templateParams[param]"
|
|
||||||
:placeholder="'请输入 ' + param + ' 参数'"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
|
|
||||||
// 发送短信表单相关
|
|
||||||
const formData = ref({
|
|
||||||
content: '',
|
|
||||||
params: {},
|
|
||||||
mobile: '',
|
|
||||||
templateCode: '',
|
|
||||||
templateParams: new Map()
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
mobile: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
|
|
||||||
templateCode: [{ required: true, message: '模版编码不能为空', trigger: 'blur' }],
|
|
||||||
templateParams: {}
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
const open = async (id: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 设置数据
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = await SmsTemplateApi.getSmsTemplate(id)
|
|
||||||
// 设置动态表单
|
|
||||||
formData.value.content = data.content
|
|
||||||
formData.value.params = data.params
|
|
||||||
formData.value.templateCode = data.code
|
|
||||||
formData.value.templateParams = data.params.reduce((obj, item) => {
|
|
||||||
obj[item] = '' // 给每个动态属性赋值，避免无法读取
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
formRules.templateParams = data.params.reduce((obj, item) => {
|
|
||||||
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as SmsTemplateApi.SendSmsReqVO
|
|
||||||
const logId = await SmsTemplateApi.sendSms(data)
|
|
||||||
if (logId) {
|
|
||||||
message.success('提交发送成功！发送结果，见发送日志编号：' + logId)
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
content: '',
|
|
||||||
params: {},
|
|
||||||
mobile: '',
|
|
||||||
templateCode: '',
|
|
||||||
templateParams: new Map()
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,311 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap>
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="150px"
|
|
||||||
>
|
|
||||||
<el-form-item label="短信类型" prop="type">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.type"
|
|
||||||
placeholder="请选择短信类型"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开启状态" prop="status">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.status"
|
|
||||||
placeholder="请选择开启状态"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板编码" prop="code">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.code"
|
|
||||||
placeholder="请输入模板编码"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信 API 的模板编号" prop="apiTemplateId">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.apiTemplateId"
|
|
||||||
placeholder="请输入短信 API 的模板编号"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="短信渠道" prop="channelId">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.channelId"
|
|
||||||
placeholder="请选择短信渠道"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="channel in channelList"
|
|
||||||
:key="channel.id"
|
|
||||||
:value="channel.id"
|
|
||||||
:label="
|
|
||||||
channel.signature +
|
|
||||||
`【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="创建时间" prop="createTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.createTime"
|
|
||||||
style="width: 240px"
|
|
||||||
type="daterange"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
@click="openForm('create')"
|
|
||||||
v-hasPermi="['system:sms-template:create']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:plus" class="mr-5px" />新增
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
@click="handleExport"
|
|
||||||
:loading="exportLoading"
|
|
||||||
v-hasPermi="['system:sms-template:export']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list" align="center">
|
|
||||||
<el-table-column
|
|
||||||
label="模板编码"
|
|
||||||
align="center"
|
|
||||||
prop="code"
|
|
||||||
width="120"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="模板名称"
|
|
||||||
align="center"
|
|
||||||
prop="name"
|
|
||||||
width="120"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="模板内容"
|
|
||||||
align="center"
|
|
||||||
prop="content"
|
|
||||||
width="200"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column label="短信类型" align="center" prop="type">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.type" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="状态" align="center" prop="status" width="80">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="备注" align="center" prop="remark" />
|
|
||||||
<el-table-column
|
|
||||||
label="短信 API 的模板编号"
|
|
||||||
align="center"
|
|
||||||
prop="apiTemplateId"
|
|
||||||
width="200"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column label="短信渠道" align="center" width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<div>
|
|
||||||
{{ channelList.find((channel) => channel.id === scope.row.channelId)?.signature }}
|
|
||||||
</div>
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center" width="210" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openForm('update', scope.row.id)"
|
|
||||||
v-hasPermi="['system:sms-template:update']"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openSendForm(scope.row.id)"
|
|
||||||
v-hasPermi="['system:sms-template:send-sms']"
|
|
||||||
>
|
|
||||||
测试
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.row.id)"
|
|
||||||
v-hasPermi="['system:sms-template:delete']"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：添加/修改 -->
|
|
||||||
<SmsTemplateForm ref="formRef" @success="getList" />
|
|
||||||
<!-- 表单弹窗：测试发送 -->
|
|
||||||
<SmsTemplateSendForm ref="sendFormRef" />
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts" name="SmsTemplate">
|
|
||||||
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
|
|
||||||
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
|
|
||||||
import download from '@/utils/download'
|
|
||||||
import SmsTemplateForm from './SmsTemplateForm.vue'
|
|
||||||
import SmsTemplateSendForm from './SmsTemplateSendForm.vue'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
|
|
||||||
const loading = ref(false) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
type: null,
|
|
||||||
status: null,
|
|
||||||
code: '',
|
|
||||||
content: '',
|
|
||||||
apiTemplateId: '',
|
|
||||||
channelId: null,
|
|
||||||
createTime: []
|
|
||||||
})
|
|
||||||
const exportLoading = ref(false) // 导出的加载中
|
|
||||||
const channelList = ref<SmsChannelApi.SmsChannelVO[]>([]) // 短信渠道列表
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await SmsTemplateApi.getSmsTemplatePage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 添加/修改操作 */
|
|
||||||
const formRef = ref()
|
|
||||||
const openForm = (type: string, id?: number) => {
|
|
||||||
formRef.value.open(type, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 发送短信按钮 */
|
|
||||||
const sendFormRef = ref()
|
|
||||||
const openSendForm = (id: number) => {
|
|
||||||
sendFormRef.value.open(id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (id: number) => {
|
|
||||||
try {
|
|
||||||
// 删除的二次确认
|
|
||||||
await message.delConfirm()
|
|
||||||
// 发起删除
|
|
||||||
await SmsTemplateApi.deleteSmsTemplate(id)
|
|
||||||
message.success(t('common.delSuccess'))
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
const handleExport = async () => {
|
|
||||||
try {
|
|
||||||
// 导出的二次确认
|
|
||||||
await message.exportConfirm()
|
|
||||||
// 发起导出
|
|
||||||
exportLoading.value = true
|
|
||||||
const data = await SmsTemplateApi.exportSmsTemplate(queryParams)
|
|
||||||
download.excel(data, '短信模板.xls')
|
|
||||||
} catch {
|
|
||||||
} finally {
|
|
||||||
exportLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(async () => {
|
|
||||||
await getList()
|
|
||||||
// 加载渠道列表
|
|
||||||
channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,174 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible" width="50%">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="租户名" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入租户名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="租户套餐" prop="packageId">
|
|
||||||
<el-select v-model="formData.packageId" placeholder="请选择租户套餐" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in packageList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系人" prop="contactName">
|
|
||||||
<el-input v-model="formData.contactName" placeholder="请输入联系人" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系手机" prop="contactMobile">
|
|
||||||
<el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
|
|
||||||
<el-input v-model="formData.username" placeholder="请输入用户名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
|
|
||||||
<el-input
|
|
||||||
v-model="formData.password"
|
|
||||||
placeholder="请输入用户密码"
|
|
||||||
type="password"
|
|
||||||
show-password
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="账号额度" prop="accountCount">
|
|
||||||
<el-input-number
|
|
||||||
v-model="formData.accountCount"
|
|
||||||
placeholder="请输入账号额度"
|
|
||||||
controls-position="right"
|
|
||||||
:min="0"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="过期时间" prop="expireTime">
|
|
||||||
<el-date-picker
|
|
||||||
clearable
|
|
||||||
v-model="formData.expireTime"
|
|
||||||
type="date"
|
|
||||||
value-format="x"
|
|
||||||
placeholder="请选择过期时间"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="绑定域名" prop="domain">
|
|
||||||
<el-input v-model="formData.domain" placeholder="请输入绑定域名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="租户状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import * as TenantApi from '@/api/system/tenant'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import * as TenantPackageApi from '@/api/system/tenantPackage'
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
name: undefined,
|
|
||||||
packageId: undefined,
|
|
||||||
contactName: undefined,
|
|
||||||
contactMobile: undefined,
|
|
||||||
accountCount: undefined,
|
|
||||||
expireTime: undefined,
|
|
||||||
domain: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
|
|
||||||
packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
|
|
||||||
contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
|
|
||||||
status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
|
|
||||||
accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
|
|
||||||
expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
|
|
||||||
domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const packageList = ref([]) // 租户套餐
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await TenantApi.getTenant(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 加载套餐列表
|
|
||||||
packageList.value = await TenantPackageApi.getTenantPackageList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as TenantApi.TenantVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await TenantApi.createTenant(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await TenantApi.updateTenant(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: undefined,
|
|
||||||
packageId: undefined,
|
|
||||||
contactName: undefined,
|
|
||||||
contactMobile: undefined,
|
|
||||||
accountCount: undefined,
|
|
||||||
expireTime: undefined,
|
|
||||||
domain: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="套餐名" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入套餐名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单权限">
|
|
||||||
<el-card class="cardHeight">
|
|
||||||
<template #header>
|
|
||||||
全选/全不选:
|
|
||||||
<el-switch
|
|
||||||
v-model="treeNodeAll"
|
|
||||||
inline-prompt
|
|
||||||
active-text="是"
|
|
||||||
inactive-text="否"
|
|
||||||
@change="handleCheckedTreeNodeAll"
|
|
||||||
/>
|
|
||||||
全部展开/折叠:
|
|
||||||
<el-switch
|
|
||||||
v-model="menuExpand"
|
|
||||||
inline-prompt
|
|
||||||
active-text="展开"
|
|
||||||
inactive-text="折叠"
|
|
||||||
@change="handleCheckedTreeExpand"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-tree
|
|
||||||
ref="treeRef"
|
|
||||||
node-key="id"
|
|
||||||
show-checkbox
|
|
||||||
:props="defaultProps"
|
|
||||||
:data="menuOptions"
|
|
||||||
empty-text="加载中，请稍候"
|
|
||||||
/>
|
|
||||||
</el-card>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="parseInt(dict.value)"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts" name="TenantPackageForm">
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import { defaultProps, handleTree } from '@/utils/tree'
|
|
||||||
import * as TenantPackageApi from '@/api/system/tenantPackage'
|
|
||||||
import * as MenuApi from '@/api/system/menu'
|
|
||||||
import { ElTree } from 'element-plus'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
id: null,
|
|
||||||
name: null,
|
|
||||||
remark: null,
|
|
||||||
menuIds: [],
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
name: [{ required: true, message: '套餐名不能为空', trigger: 'blur' }],
|
|
||||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
|
||||||
menuIds: [{ required: true, message: '关联的菜单编号不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const menuOptions = ref<any[]>([]) // 树形结构数据
|
|
||||||
const menuExpand = ref(false) // 展开/折叠
|
|
||||||
const treeRef = ref<InstanceType<typeof ElTree>>() // 树组件 Ref
|
|
||||||
const treeNodeAll = ref(false) // 全选/全不选
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
|
|
||||||
menuOptions.value = handleTree(await MenuApi.getSimpleMenusList())
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const res = await TenantPackageApi.getTenantPackage(id)
|
|
||||||
// 设置选中
|
|
||||||
formData.value = res
|
|
||||||
// 设置选中
|
|
||||||
res.menuIds.forEach((menuId: number) => {
|
|
||||||
treeRef.value.setChecked(menuId, true, false)
|
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as TenantPackageApi.TenantPackageVO
|
|
||||||
data.menuIds = [
|
|
||||||
...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
|
|
||||||
...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
|
|
||||||
]
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await TenantPackageApi.createTenantPackage(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await TenantPackageApi.updateTenantPackage(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
// 重置选项
|
|
||||||
treeNodeAll.value = false
|
|
||||||
menuExpand.value = false
|
|
||||||
// 重置表单
|
|
||||||
formData.value = {
|
|
||||||
id: null,
|
|
||||||
name: null,
|
|
||||||
remark: null,
|
|
||||||
menuIds: [],
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
}
|
|
||||||
treeRef.value?.setCheckedNodes([])
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 全选/全不选 */
|
|
||||||
const handleCheckedTreeNodeAll = () => {
|
|
||||||
treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 展开/折叠全部 */
|
|
||||||
const handleCheckedTreeExpand = () => {
|
|
||||||
const nodes = treeRef.value?.store.nodesMap
|
|
||||||
for (let node in nodes) {
|
|
||||||
if (nodes[node].expanded === menuExpand.value) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
nodes[node].expanded = menuExpand.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.cardHeight {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="head-container">
|
|
||||||
<el-input v-model="deptName" placeholder="请输入部门名称" clearable class="mb-20px">
|
|
||||||
<template #prefix>
|
|
||||||
<Icon icon="ep:search" />
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="head-container">
|
|
||||||
<el-tree
|
|
||||||
:data="deptList"
|
|
||||||
:props="defaultProps"
|
|
||||||
node-key="id"
|
|
||||||
:expand-on-click-node="false"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
ref="treeRef"
|
|
||||||
default-expand-all
|
|
||||||
highlight-current
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="UserDeptTree">
|
|
||||||
import { ElTree } from 'element-plus'
|
|
||||||
import * as DeptApi from '@/api/system/dept'
|
|
||||||
import { defaultProps, handleTree } from '@/utils/tree'
|
|
||||||
|
|
||||||
const deptName = ref('')
|
|
||||||
const deptList = ref<Tree[]>([]) // 树形结构
|
|
||||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
||||||
|
|
||||||
/** 获得部门树 */
|
|
||||||
const getTree = async () => {
|
|
||||||
const res = await DeptApi.getSimpleDeptList()
|
|
||||||
deptList.value = []
|
|
||||||
deptList.value.push(...handleTree(res))
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 基于名字过滤 */
|
|
||||||
const filterNode = (name: string, data: Tree) => {
|
|
||||||
if (!name) return true
|
|
||||||
return data.name.includes(name)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 处理部门被点击 */
|
|
||||||
const handleNodeClick = async (row: { [key: string]: any }) => {
|
|
||||||
emits('node-click', row)
|
|
||||||
}
|
|
||||||
const emits = defineEmits(['node-click'])
|
|
||||||
|
|
||||||
/** 初始化 */
|
|
||||||
onMounted(async () => {
|
|
||||||
await getTree()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="分配角色" v-model="modelVisible">
|
|
||||||
<el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
|
|
||||||
<el-form-item label="用户名称">
|
|
||||||
<el-input v-model="formData.username" :disabled="true" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户昵称">
|
|
||||||
<el-input v-model="formData.nickname" :disabled="true" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色">
|
|
||||||
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
|
|
||||||
<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as PermissionApi from '@/api/system/permission'
|
|
||||||
import * as UserApi from '@/api/system/user'
|
|
||||||
import * as RoleApi from '@/api/system/role'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formData = ref({
|
|
||||||
id: undefined,
|
|
||||||
nickname: '',
|
|
||||||
username: '',
|
|
||||||
roleIds: []
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const roleList = ref([]) // 角色的列表
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (row: UserApi.UserVO) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 设置数据
|
|
||||||
formData.value.id = row.id
|
|
||||||
formData.value.username = row.username
|
|
||||||
formData.value.nickname = row.nickname
|
|
||||||
// 获得角色拥有的菜单集合
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
// 获得角色列表
|
|
||||||
roleList.value = await RoleApi.getSimpleRoleList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
await PermissionApi.assignUserRole({
|
|
||||||
userId: formData.value.id,
|
|
||||||
roleIds: formData.value.roleIds
|
|
||||||
})
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success', true)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
nickname: '',
|
|
||||||
username: '',
|
|
||||||
roleIds: []
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,215 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog :title="modelTitle" v-model="modelVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="用户昵称" prop="nickname">
|
|
||||||
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="归属部门" prop="deptId">
|
|
||||||
<el-tree-select
|
|
||||||
node-key="id"
|
|
||||||
v-model="formData.deptId"
|
|
||||||
:data="deptList"
|
|
||||||
:props="defaultProps"
|
|
||||||
check-strictly
|
|
||||||
placeholder="请选择归属部门"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="手机号码" prop="mobile">
|
|
||||||
<el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="邮箱" prop="email">
|
|
||||||
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
|
|
||||||
<el-input v-model="formData.username" placeholder="请输入用户名称" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
|
|
||||||
<el-input
|
|
||||||
v-model="formData.password"
|
|
||||||
placeholder="请输入用户密码"
|
|
||||||
type="password"
|
|
||||||
show-password
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="用户性别">
|
|
||||||
<el-select v-model="formData.sex" placeholder="请选择">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="岗位">
|
|
||||||
<el-select v-model="formData.postIds" multiple placeholder="请选择">
|
|
||||||
<el-option
|
|
||||||
v-for="item in postList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-form-item label="备注">
|
|
||||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import { defaultProps, handleTree } from '@/utils/tree'
|
|
||||||
import * as PostApi from '@/api/system/post'
|
|
||||||
import * as DeptApi from '@/api/system/dept'
|
|
||||||
import * as UserApi from '@/api/system/user'
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const modelTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
||||||
const formData = ref({
|
|
||||||
nickname: '',
|
|
||||||
deptId: '',
|
|
||||||
mobile: '',
|
|
||||||
email: '',
|
|
||||||
id: undefined,
|
|
||||||
username: '',
|
|
||||||
password: '',
|
|
||||||
sex: undefined,
|
|
||||||
postIds: [],
|
|
||||||
remark: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
roleIds: []
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
|
|
||||||
nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
|
|
||||||
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
|
|
||||||
email: [
|
|
||||||
{
|
|
||||||
type: 'email',
|
|
||||||
message: '请输入正确的邮箱地址',
|
|
||||||
trigger: ['blur', 'change']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
mobile: [
|
|
||||||
{
|
|
||||||
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
|
|
||||||
message: '请输入正确的手机号码',
|
|
||||||
trigger: 'blur'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const deptList = ref<Tree[]>([]) // 树形结构
|
|
||||||
const postList = ref([]) // 岗位列表
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
modelVisible.value = true
|
|
||||||
modelTitle.value = t('action.' + type)
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await UserApi.getUser(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 加载部门树
|
|
||||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
||||||
// 加载岗位列表
|
|
||||||
postList.value = await PostApi.getSimplePostList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as UserApi.UserVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await UserApi.createUser(data)
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
} else {
|
|
||||||
await UserApi.updateUser(data)
|
|
||||||
message.success(t('common.updateSuccess'))
|
|
||||||
}
|
|
||||||
modelVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
nickname: '',
|
|
||||||
deptId: '',
|
|
||||||
mobile: '',
|
|
||||||
email: '',
|
|
||||||
id: undefined,
|
|
||||||
username: '',
|
|
||||||
password: '',
|
|
||||||
sex: undefined,
|
|
||||||
postIds: [],
|
|
||||||
remark: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
roleIds: []
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,129 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog title="用户导入" v-model="modelVisible" width="400">
|
|
||||||
<el-upload
|
|
||||||
ref="uploadRef"
|
|
||||||
:action="importUrl + '?updateSupport=' + updateSupport"
|
|
||||||
:headers="uploadHeaders"
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
drag
|
|
||||||
accept=".xlsx, .xls"
|
|
||||||
:limit="1"
|
|
||||||
:on-success="submitFormSuccess"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:on-error="submitFormError"
|
|
||||||
:auto-upload="false"
|
|
||||||
:disabled="formLoading"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:upload" />
|
|
||||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
||||||
<template #tip>
|
|
||||||
<div class="el-upload__tip text-center">
|
|
||||||
<div class="el-upload__tip">
|
|
||||||
<el-checkbox v-model="updateSupport" /> 是否更新已经存在的用户数据
|
|
||||||
</div>
|
|
||||||
<span>仅允许导入 xls、xlsx 格式文件。</span>
|
|
||||||
<el-link
|
|
||||||
type="primary"
|
|
||||||
:underline="false"
|
|
||||||
style="font-size: 12px; vertical-align: baseline"
|
|
||||||
@click="importTemplate"
|
|
||||||
>
|
|
||||||
下载模板
|
|
||||||
</el-link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-upload>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="modelVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import * as UserApi from '@/api/system/user'
|
|
||||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
|
||||||
import download from '@/utils/download'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const modelVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中
|
|
||||||
const uploadRef = ref()
|
|
||||||
const importUrl =
|
|
||||||
import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
|
|
||||||
const uploadHeaders = ref() // 上传 Header 头
|
|
||||||
const fileList = ref([]) // 文件列表
|
|
||||||
const updateSupport = ref(0) // 是否更新已经存在的用户数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = () => {
|
|
||||||
modelVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
if (fileList.value.length == 0) {
|
|
||||||
message.error('请上传文件')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 提交请求
|
|
||||||
uploadHeaders.value = {
|
|
||||||
Authorization: 'Bearer ' + getAccessToken(),
|
|
||||||
'tenant-id': getTenantId()
|
|
||||||
}
|
|
||||||
formLoading.value = true
|
|
||||||
uploadRef.value!.submit()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 文件上传成功 */
|
|
||||||
const emits = defineEmits(['success'])
|
|
||||||
const submitFormSuccess = (response: any) => {
|
|
||||||
if (response.code !== 0) {
|
|
||||||
message.error(response.msg)
|
|
||||||
formLoading.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 拼接提示语
|
|
||||||
const data = response.data
|
|
||||||
let text = '上传成功数量：' + data.createUsernames.length + ';'
|
|
||||||
for (let username of data.createUsernames) {
|
|
||||||
text += '< ' + username + ' >'
|
|
||||||
}
|
|
||||||
text += '更新成功数量：' + data.updateUsernames.length + ';'
|
|
||||||
for (const username of data.updateUsernames) {
|
|
||||||
text += '< ' + username + ' >'
|
|
||||||
}
|
|
||||||
text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
|
|
||||||
for (const username in data.failureUsernames) {
|
|
||||||
text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
|
|
||||||
}
|
|
||||||
message.alert(text)
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emits('success')
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 上传错误提示 */
|
|
||||||
const submitFormError = (): void => {
|
|
||||||
message.error('上传失败，请您重新上传！')
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
// 重置上传状态和文件
|
|
||||||
formLoading.value = false
|
|
||||||
uploadRef.value?.clearFiles()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 文件数超出提示 */
|
|
||||||
const handleExceed = (): void => {
|
|
||||||
message.error('最多只能上传一个文件！')
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 下载模板操作 */
|
|
||||||
const importTemplate = async () => {
|
|
||||||
const res = await UserApi.importUserTemplate()
|
|
||||||
download.excel(res, '用户导入模版.xls')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue
Block a user