master
parent
a40a1c25b4
commit
cfb0631a0d
|
|
@ -1,3 +1,3 @@
|
|||
# 后台服务地址
|
||||
VITE_HTTP_PROXY_TARGET=http://192.168.2.124:10086
|
||||
VITE_HTTP_PROXY_TARGET=http://localhost:10086
|
||||
VITE_WS_PROXY_TARGET=ws://localhost:10086
|
||||
|
|
|
|||
|
|
@ -110,6 +110,8 @@ export function reloadRouter() {
|
|||
routNames.push('user')
|
||||
routNames.push('role')
|
||||
routNames.push('dict')
|
||||
routNames.push('db-table')
|
||||
routNames.push('tpl')
|
||||
|
||||
if (Colls.isEmpty(routNames)) {
|
||||
return false
|
||||
|
|
|
|||
|
|
@ -140,13 +140,14 @@ export function get<T = any>(url: string, params?: any, disposeErr: boolean = tr
|
|||
*
|
||||
* @param url 请求地址
|
||||
* @param body Body 参数
|
||||
* @param params 参数
|
||||
* @param disposeErr 是否处理错误响应，默认-->true
|
||||
*/
|
||||
export function post<T>(url: string, body?: any, disposeErr: boolean = true) {
|
||||
export function post<T>(url: string, body?: any, params?: any, disposeErr: boolean = true) {
|
||||
if (closeUrls.includes(url)) {
|
||||
return Promise.reject({code: 0, success: true, msg: '', message: '', data: null} as R<T>)
|
||||
}
|
||||
return httpUtil.post<R<T>>(url, body, {responseType: 'json'})
|
||||
return httpUtil.post<R<T>>(url, body, {responseType: 'json', params})
|
||||
.then(({data}) => data)
|
||||
.catch(res => {
|
||||
if (disposeErr) errHandler(res)
|
||||
|
|
@ -224,8 +225,8 @@ function getFileName(contentDisposition: string) {
|
|||
return decodeURIComponent(fileNameWithoutQuotes)
|
||||
}
|
||||
|
||||
export function download(url: string, params?: any, defaultName: string = '下载的文件', disposeErr: boolean = true) {
|
||||
return httpUtil.get(url, {params, paramsSerializer, responseType: 'arraybuffer'})
|
||||
export function download(url: string, data?: any, params?: any, defaultName: string = '下载的文件', disposeErr: boolean = true) {
|
||||
return httpUtil.post(url, data, {params, paramsSerializer, responseType: 'arraybuffer'})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (!data || data.byteLength <= 0) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
// ------
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import { GlobalComponents } from 'vue'
|
||||
|
||||
export {}
|
||||
|
||||
|
|
@ -47,6 +46,7 @@ declare module 'vue' {
|
|||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTabsPane: typeof import('element-plus/es')['ElTabsPane']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTransfer: typeof import('element-plus/es')['ElTransfer']
|
||||
|
|
@ -97,6 +97,7 @@ declare global {
|
|||
const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
const ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
const ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
const ElTabsPane: typeof import('element-plus/es')['ElTabsPane']
|
||||
const ElTag: typeof import('element-plus/es')['ElTag']
|
||||
const ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
const ElTransfer: typeof import('element-plus/es')['ElTransfer']
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="dialogCloseHandler"
|
||||
width="25vw">
|
||||
<ElForm :model="dictFormData"
|
||||
class="sys_dict-form"
|
||||
|
|
@ -40,13 +41,17 @@ const emits = defineEmits([ 'editSucc' ])
|
|||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const dictFormData = reactive<DictTypes.SearchDictResult>({})
|
||||
const dictFormData = ref<DictTypes.SearchDictResult>({})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
dictFormData.value = {}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (dictFormData.id != null) {
|
||||
DictApi.modify(dictFormData)
|
||||
if (dictFormData.value.id != null) {
|
||||
DictApi.modify(dictFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -56,7 +61,7 @@ function submitHandler() {
|
|||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
DictApi.add(dictFormData)
|
||||
DictApi.add(dictFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -75,11 +80,11 @@ defineExpose({
|
|||
status.value = 'modify'
|
||||
DictApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(dictFormData, res.data)
|
||||
dictFormData.value = res.data
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(dictFormData, {})
|
||||
dictFormData.value = data
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="dialogCloseHandler"
|
||||
width="25vw">
|
||||
<ElForm :model="dictItemFormData"
|
||||
class="sys_dict_item-form"
|
||||
|
|
@ -48,13 +49,17 @@ const emits = defineEmits([ 'editSucc' ])
|
|||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const dictItemFormData = reactive<DictItemTypes.SearchDictItemResult>({})
|
||||
const dictItemFormData = ref<DictItemTypes.SearchDictItemResult>({})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
dictItemFormData.value = {}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (dictItemFormData.id != null) {
|
||||
DictItemApi.modify(dictItemFormData)
|
||||
if (dictItemFormData.value.id != null) {
|
||||
DictItemApi.modify(dictItemFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -64,11 +69,11 @@ function submitHandler() {
|
|||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
if (Strings.isBlank(dictItemFormData.dictId) || Strings.isBlank(dictItemFormData.dictKey)) {
|
||||
if (Strings.isBlank(dictItemFormData.value.dictId) || Strings.isBlank(dictItemFormData.value.dictKey)) {
|
||||
ElMessage.error('未指定字典')
|
||||
return
|
||||
}
|
||||
DictItemApi.add(dictItemFormData)
|
||||
DictItemApi.add(dictItemFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -87,11 +92,11 @@ defineExpose({
|
|||
status.value = 'modify'
|
||||
DictItemApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(dictItemFormData, res.data)
|
||||
dictItemFormData.value = res.data
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(dictItemFormData, data)
|
||||
dictItemFormData.value = data
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="50vw"
|
||||
@close="dialogCloseHandler"
|
||||
>
|
||||
<div class="content">
|
||||
<ElForm :model="formData"
|
||||
class="sys_user-form"
|
||||
label-width="auto">
|
||||
<ElFormItem label="表名称">
|
||||
<ElTooltip
|
||||
:content="currentTable.comment"
|
||||
placement="top"
|
||||
>
|
||||
<ElInput
|
||||
v-model="currentTable.name"
|
||||
readonly
|
||||
/>
|
||||
</ElTooltip>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="前端/后端">
|
||||
<ElSelect
|
||||
v-model="formData.lang"
|
||||
placeholder="前端/后端"
|
||||
@change="formData.tplNames = []"
|
||||
>
|
||||
<ElOption
|
||||
label="前端"
|
||||
value="ts"/>
|
||||
<ElOption
|
||||
label="后端"
|
||||
value="java"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="模板">
|
||||
<ElSelect
|
||||
v-model="formData.tplNames"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
multiple
|
||||
placeholder="模板"
|
||||
>
|
||||
<ElOption
|
||||
v-for="item in currentTpls"
|
||||
:key="item.id"
|
||||
:label="item.tplName"
|
||||
:value="item.tplName!"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="表前缀">
|
||||
<ElInput
|
||||
v-model="formData.data.prefix"
|
||||
placeholder=""/>
|
||||
</ElFormItem>
|
||||
<ElFormItem v-if="formData.lang === 'java'" label="基础包名称">
|
||||
<ElInput
|
||||
v-model="formData.data.basePackage"
|
||||
placeholder=""/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="模块名称">
|
||||
<ElInput
|
||||
v-model="formData.data.moduleName"
|
||||
placeholder=""/>
|
||||
</ElFormItem>
|
||||
<ElFormItem v-if="formData.lang === 'ts'" label="子模块">
|
||||
<ElInput
|
||||
v-model="formData.data.subModuleName"
|
||||
placeholder=""/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<ElDivider direction="vertical"/>
|
||||
<ElTabs v-model="activeName">
|
||||
<ElTabPane v-for="tab in tabsPanes" :label="tab.tplName!" :name="tab.tplName!">
|
||||
<pre>
|
||||
{{ codeInfo[tab.tplName!]?.content }}
|
||||
</pre>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</div>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">关闭</ElButton>
|
||||
<ElButton :loading="previewing" type="primary" @click="previewHandler">预览</ElButton>
|
||||
<ElButton :loading="downloading" type="primary" @click="downloadHandler">下载</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import GenApi from '@/pages/sys/gen/gen-api.ts'
|
||||
|
||||
const activeName = ref('')
|
||||
const showDialog = ref(false)
|
||||
const downloading = ref(false)
|
||||
const previewing = ref(false)
|
||||
const codeInfo = ref<GenTypes.CodeInfo>({})
|
||||
const tpls = ref<GenTypes.TplInfo[]>([])
|
||||
const currentTpls = computed(() => {
|
||||
return tpls.value.filter(it => it.lang === formData.value.lang)
|
||||
})
|
||||
|
||||
const tabsPanes = computed(() => {
|
||||
const d = currentTpls.value.filter(it => formData.value.tplNames.includes(it.tplName!))
|
||||
if (d.length > 0) {
|
||||
activeName.value = d[0].tplName!
|
||||
} else {
|
||||
activeName.value = ''
|
||||
}
|
||||
return d
|
||||
})
|
||||
|
||||
const currentTable = reactive<GenTypes.TableInfo>({})
|
||||
const formData = ref<{
|
||||
// 1-->前、2-->后
|
||||
lang: 'java' | 'ts'
|
||||
tplNames: string[]
|
||||
data: {
|
||||
prefix: string
|
||||
basePackage: string
|
||||
moduleName: string
|
||||
subModuleName: string
|
||||
}
|
||||
}>({
|
||||
lang: 'java',
|
||||
tplNames: [],
|
||||
data: {
|
||||
prefix: '',
|
||||
basePackage: '',
|
||||
moduleName: '',
|
||||
subModuleName: '',
|
||||
},
|
||||
})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.value = {
|
||||
lang: 'java',
|
||||
tplNames: [],
|
||||
data: {
|
||||
prefix: '',
|
||||
basePackage: '',
|
||||
moduleName: '',
|
||||
subModuleName: '',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function downloadHandler() {
|
||||
downloading.value = true
|
||||
GenApi.download(formData.value.tplNames, currentTable.name!, formData.value.data)
|
||||
.then(() => {
|
||||
ElMessage.success('下载成功')
|
||||
})
|
||||
.finally(() => {
|
||||
downloading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function previewHandler() {
|
||||
previewing.value = true
|
||||
GenApi.preview(formData.value.tplNames, currentTable.name!, formData.value.data)
|
||||
.then(res => {
|
||||
codeInfo.value = res.data
|
||||
})
|
||||
.finally(() => {
|
||||
previewing.value = false
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data?: GenTypes.TableInfo) {
|
||||
Object.assign(currentTable, data)
|
||||
showDialog.value = true
|
||||
GenApi.list()
|
||||
.then(res => {
|
||||
tpls.value = res.data
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > form, & > div:nth-child(3) {
|
||||
padding 20px
|
||||
border 1px solid #D3D7DE
|
||||
}
|
||||
|
||||
& > form {
|
||||
width 270px;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
height auto
|
||||
}
|
||||
|
||||
& > div:nth-child(3) {
|
||||
flex 1
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<ElFormItem label="表名称">
|
||||
<ElInput
|
||||
v-model="searchForm.tableName"
|
||||
placeholder="表名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="tool-bar">
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
|
||||
</div>
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<ElTableColumn label="表名称" prop="name"/>
|
||||
<ElTableColumn label="备注" prop="comment"/>
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElButton text type="primary" @click="previewHandler(scope)">预览</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<CodePreview ref="codePreview"/>
|
||||
</Page>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import CodePreview from '@/pages/sys/gen/db-table/CodePreview.vue'
|
||||
import GenApi from '@/pages/sys/gen/gen-api.ts'
|
||||
|
||||
const tableData = ref<GenTypes.TableInfo[]>([])
|
||||
const searchForm = reactive<{
|
||||
tableName?: string
|
||||
}>({})
|
||||
const searching = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const codePreviewIns = useTemplateRef<InstanceType<typeof CodePreview>>('codePreview')
|
||||
|
||||
function showDialog(data?: GenTypes.TableInfo) {
|
||||
codePreviewIns.value?.open(data)
|
||||
}
|
||||
|
||||
function previewHandler({row}: { row: GenTypes.TableInfo }) {
|
||||
showDialog(row)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(searchForm, {})
|
||||
paging()
|
||||
}
|
||||
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
GenApi.listTable(searchForm.tableName)
|
||||
.then(res => {
|
||||
tableData.value = res.data ?? []
|
||||
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-icon) {
|
||||
font-size 25px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/sys/gen/db-table/DbTable.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import {
|
||||
download,
|
||||
get,
|
||||
post,
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
listTable(tableName?: string) {
|
||||
return get<GenTypes.TableInfo[]>('/tpl/list_table', {tableName})
|
||||
},
|
||||
list() {
|
||||
return get<GenTypes.TplInfo[]>('/tpl/list')
|
||||
},
|
||||
preview(tplNames: string[], tableName: string, data: Record<string, any>) {
|
||||
return post<GenTypes.CodeInfo>('/tpl/preview', data, {tplNames, tableName})
|
||||
},
|
||||
download(tplNames: string[], tableName: string, data: Record<string, any>) {
|
||||
return download('/tpl/download', data, {tplNames, tableName})
|
||||
.then(res => {
|
||||
// 创建新的URL并指向File对象或者Blob对象的地址
|
||||
const blobURL = window.URL.createObjectURL(res.data.data)
|
||||
// 创建a标签，用于跳转至下载链接
|
||||
const tempLink = document.createElement('a')
|
||||
tempLink.style.display = 'none'
|
||||
tempLink.href = blobURL
|
||||
tempLink.setAttribute('download', decodeURI(res.data.filename))
|
||||
// 兼容：某些浏览器不支持HTML5的download属性
|
||||
if (typeof tempLink.download === 'undefined') {
|
||||
tempLink.setAttribute('target', '_blank')
|
||||
}
|
||||
// 挂载a标签
|
||||
document.body.appendChild(tempLink)
|
||||
tempLink.click()
|
||||
document.body.removeChild(tempLink)
|
||||
// 释放blob URL地址
|
||||
window.URL.revokeObjectURL(blobURL)
|
||||
})
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
export {}
|
||||
declare global {
|
||||
namespace GenTypes {
|
||||
interface TableInfo {
|
||||
name?: string
|
||||
comment?: string
|
||||
}
|
||||
|
||||
interface TplInfo {
|
||||
id?: string
|
||||
tplName?: string
|
||||
lang?: string
|
||||
tpl: {
|
||||
content?: string
|
||||
dir?: string
|
||||
filename?: string
|
||||
}
|
||||
modelData: Record<string, any>
|
||||
}
|
||||
|
||||
interface CodeInfo {
|
||||
[key: string]: {
|
||||
content: string
|
||||
path: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<ElFormItem label="模板名称">
|
||||
<ElInput
|
||||
v-model="searchForm.tplName"
|
||||
placeholder="模板名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="前端/后端">
|
||||
<ElSelect
|
||||
v-model="searchForm.lang"
|
||||
placeholder="前端/后端"
|
||||
style="width: 180px"
|
||||
>
|
||||
<ElOption
|
||||
label="前端"
|
||||
value="ts"/>
|
||||
<ElOption
|
||||
label="后端"
|
||||
value="java"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="tool-bar">
|
||||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
|
||||
</div>
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<ElTableColumn label="模板名称" prop="tplName"/>
|
||||
|
||||
<ElTableColumn label="前端/后端" prop="lang">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.lang === 'java' ? '后端' : '前端' }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
|
||||
<ElTableColumn label="模板内容" prop="tpl">
|
||||
<template #default="{row}:{row:TplTypes.SearchTplResult}">
|
||||
<span>{{ (row.tpl != null && (row.tpl?.content?.length ?? 0) > 20) ? row.tpl!.content!.substring(0, 19) + '...' : row.tpl?.content }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<el-popconfirm
|
||||
cancel-button-text="否"
|
||||
cancel-button-type="primary"
|
||||
confirm-button-text="是"
|
||||
confirm-button-type="danger"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton :loading="deling" text type="danger">删除</ElButton>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination
|
||||
:page-size="pagination.size"
|
||||
:pager-count="pagination.pages"
|
||||
:total="pagination.total"
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
@change="pageChangeHandler"/>
|
||||
<TplForm ref="tplForm" @edit-succ="paging"/>
|
||||
</Page>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TplApi from '@/pages/sys/gen/tpl/tpl-api.ts'
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import TplForm from '@/pages/sys/gen/tpl/TplForm.vue'
|
||||
|
||||
const tableData = ref<TplTypes.SearchTplResult[]>([])
|
||||
const searchForm = reactive<TplTypes.SearchTplParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
})
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const tplFormIns = useTemplateRef<InstanceType<typeof TplForm>>('tplForm')
|
||||
const pagination = reactive<G.Pagination>({
|
||||
total: 0,
|
||||
pages: 0,
|
||||
current: 1,
|
||||
size: 1,
|
||||
})
|
||||
|
||||
function pageChangeHandler(currentPage: number, pageSize: number) {
|
||||
searchForm.current = currentPage
|
||||
searchForm.size = pageSize
|
||||
paging()
|
||||
}
|
||||
|
||||
function showDialog(data?: TplTypes.SearchTplResult) {
|
||||
tplFormIns.value?.open(data)
|
||||
}
|
||||
|
||||
function delHandler({row}: { row: TplTypes.SearchTplResult }) {
|
||||
deling.value = true
|
||||
TplApi.del([ row.id! ])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function modifyHandler({row}: { row: TplTypes.SearchTplResult }) {
|
||||
showDialog(row)
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(searchForm, {})
|
||||
paging()
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
TplApi.paging(searchForm)
|
||||
.then(res => {
|
||||
tableData.value = res.data?.records ?? []
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: end;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="25vw"
|
||||
@close="dialogCloseHandler">
|
||||
<ElForm :model="tplFormData"
|
||||
class="sys_tpl-form"
|
||||
label-width="auto">
|
||||
<ElFormItem label="模板名称">
|
||||
<ElInput
|
||||
v-model="tplFormData.tplName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="模板名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="前端/后端">
|
||||
<ElSelect
|
||||
v-model="tplFormData.lang"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="前端/后端"
|
||||
>
|
||||
<ElOption
|
||||
label="前端"
|
||||
value="ts"/>
|
||||
<ElOption
|
||||
label="后端"
|
||||
value="java"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="模板内容">
|
||||
<ElInput
|
||||
v-model="tplFormData.tpl.content"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="模板内容"
|
||||
resize="none"
|
||||
type="textarea"/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="文件路径">
|
||||
<ElInput
|
||||
v-model="tplFormData.tpl.dir"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="文件路径"
|
||||
resize="none"
|
||||
type="textarea"/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="文件名称">
|
||||
<ElInput
|
||||
v-model="tplFormData.tpl.filename"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="文件名称"
|
||||
resize="none"
|
||||
type="textarea"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TplApi from '@/pages/sys/gen/tpl/tpl-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const emits = defineEmits([ 'editSucc' ])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const tplFormData = ref<TplTypes.SearchTplResult>({
|
||||
tpl: {},
|
||||
})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
tplFormData.value = {tpl: {}}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (tplFormData.value.id != null) {
|
||||
TplApi.modify(tplFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
TplApi.add(tplFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: TplTypes.SearchTplResult = {tpl: {}}) {
|
||||
showDialog.value = true
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
TplApi.detail(data.id!)
|
||||
.then(res => {
|
||||
tplFormData.value = res.data
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
tplFormData.value = data
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.sys_tpl-form {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/sys/gen/tpl/Tpl.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {
|
||||
get,
|
||||
post,
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
paging(data: TplTypes.SearchTplParam) {
|
||||
return get<G.PageResult<TplTypes.SearchTplResult>>('/tpl/paging', data)
|
||||
},
|
||||
detail(id: string) {
|
||||
return get<TplTypes.SearchTplResult>('/tpl/detail', {id})
|
||||
},
|
||||
add(data: TplTypes.AddTplParam) {
|
||||
return post('/tpl/add', data)
|
||||
},
|
||||
modify(data: TplTypes.ModifyTplParam) {
|
||||
return post('/tpl/modify', data)
|
||||
},
|
||||
del(ids: string[]) {
|
||||
return post('/tpl/del', ids)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
export {}
|
||||
declare global {
|
||||
namespace TplTypes {
|
||||
interface SearchTplParam extends G.PageParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 模板名称
|
||||
tplName?: string
|
||||
// 语言
|
||||
lang?: string
|
||||
// 模板内容
|
||||
tpl: {
|
||||
content?: string
|
||||
dir?: string
|
||||
filename?: string
|
||||
}
|
||||
}
|
||||
|
||||
interface SearchTplResult {
|
||||
// Id
|
||||
id?: string
|
||||
// 模板名称
|
||||
tplName?: string
|
||||
// 语言
|
||||
lang?: string
|
||||
// 模板内容
|
||||
tpl: {
|
||||
content?: string
|
||||
dir?: string
|
||||
filename?: string
|
||||
}
|
||||
}
|
||||
|
||||
interface AddTplParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 模板名称
|
||||
tplName?: string
|
||||
// 语言
|
||||
lang?: string
|
||||
// 模板内容
|
||||
tpl: {
|
||||
content?: string
|
||||
dir?: string
|
||||
filename?: string
|
||||
}
|
||||
}
|
||||
|
||||
interface ModifyTplParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 模板名称
|
||||
tplName?: string
|
||||
// 语言
|
||||
lang?: string
|
||||
// 模板内容
|
||||
tpl: {
|
||||
content?: string
|
||||
dir?: string
|
||||
filename?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,164 +1,186 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="25vw">
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close width="25vw" @close="dialogCloseHandler">
|
||||
<ElForm :model="menuForm" class="menu-form" label-width="auto">
|
||||
<ElFormItem label="上级">
|
||||
<ElTreeSelect v-model="menuForm.pid" :data="menuTreeDataSource" :default-expanded-keys="['0']" :disabled="status === 'view'" :render-after-expand="false" check-strictly placeholder="选择上级菜单" />
|
||||
<ElTreeSelect v-model="menuForm.pid" :data="menuTreeDataSource" :default-expanded-keys="['0']" :disabled="status === 'view'" :render-after-expand="false" check-strictly placeholder="选择上级菜单"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="类型">
|
||||
<ElSelect v-model="menuForm.menuCategory" :data="menuCategoryData" :disabled="status === 'view'" placeholder="选择类型">
|
||||
<ElOption v-for="menuCategory in menuCategoryData" :key="menuCategory.key" :label="menuCategory.label" :value="menuCategory.key" />
|
||||
<ElOption v-for="menuCategory in menuCategoryData" :key="menuCategory.key" :label="menuCategory.label" :value="menuCategory.key"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="名称">
|
||||
<ElInput v-model="menuForm.title" :disabled="status === 'view'" placeholder="名称" />
|
||||
<ElInput v-model="menuForm.title" :disabled="status === 'view'" placeholder="名称"/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem v-if="menuForm.menuCategory === MenuCategory.Page || menuForm.menuCategory === MenuCategory.SubPage" :disabled="status === 'view'" label="路由名称">
|
||||
<ElInput v-model="menuForm.routeName" :min="0" placeholder="路由名称" />
|
||||
<ElInput v-model="menuForm.routeName" :min="0" placeholder="路由名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem v-if="menuForm.menuCategory === MenuCategory.Page || menuForm.menuCategory === MenuCategory.SubPage" :disabled="status === 'view'" label="路由地址">
|
||||
<ElInput v-model="menuForm.routePath" :min="0" placeholder="路由地址" />
|
||||
<ElInput v-model="menuForm.routePath" :min="0" placeholder="路由地址"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="编码">
|
||||
<ElInput v-model="menuForm.sn" :disabled="status === 'view'" :min="0" placeholder="编码" />
|
||||
<ElInput v-model="menuForm.sn" :disabled="status === 'view'" :min="0" placeholder="编码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="图标">
|
||||
<ElDropdown closable header="图标列表" placement="bottom" style="width: 100%" trigger="click">
|
||||
<ElInput v-model="menuForm.iconName" placeholder="选择图标" :disabled="status === 'view'" readonly>
|
||||
<template #suffix>
|
||||
<AIcon :name="menuForm.icon!" />
|
||||
<AIcon :name="menuForm.icon!"/>
|
||||
</template>
|
||||
</ElInput>
|
||||
<template #dropdown>
|
||||
<div class="dropdown-table-wrapper">
|
||||
<ElTable ref="dropdownTable" :data="iconTableDataSource" empty-text="暂无数据" highlight-current-row style="width: 324px" @current-change="currentChangeHandler">
|
||||
<ElTableColumn label="#" type="index" />
|
||||
<ElTableColumn label="#" type="index"/>
|
||||
<ElTableColumn label="图标" prop="font_class">
|
||||
<template #default="scope">
|
||||
<AIcon :name="scope?.row?.font_class" />
|
||||
<AIcon :name="scope?.row?.font_class"/>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="名称" prop="name" />
|
||||
<ElTableColumn label="名称" prop="name"/>
|
||||
</ElTable>
|
||||
<ElPagination :page-size="pagination.size" :total="pagination.total" layout="prev, pager, next" @change="pageChangeHandler" />
|
||||
<ElPagination :page-size="pagination.size" :total="pagination.total" layout="prev, pager, next" @change="pageChangeHandler"/>
|
||||
</div>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序">
|
||||
<ElInputNumber v-model="menuForm.sort" :disabled="status === 'view'" :min="0" placeholder="排序" style="width: 100%" />
|
||||
<ElInputNumber v-model="menuForm.sort" :disabled="status === 'view'" :min="0" placeholder="排序" style="width: 100%"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { MenuCategory, MenuCategoryDict } from "@/common/app/constants.ts";
|
||||
import MenuApi from "@/pages/sys/menus/menu-api.ts";
|
||||
import Colls from "@/common/utils/colls.ts";
|
||||
import Strings from "@/common/utils/strings.ts";
|
||||
import { ElMessage, type TableInstance } from "element-plus";
|
||||
import { type IconGlyphs, icons } from "@/components/a-icon/iconfont.ts";
|
||||
import AIcon from "@/components/a-icon/AIcon.tsx";
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
MenuCategory,
|
||||
MenuCategoryDict,
|
||||
} from '@/common/app/constants.ts'
|
||||
import MenuApi from '@/pages/sys/menus/menu-api.ts'
|
||||
import Colls from '@/common/utils/colls.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import {
|
||||
ElMessage,
|
||||
type TableInstance,
|
||||
} from 'element-plus'
|
||||
import {
|
||||
type IconGlyphs,
|
||||
icons,
|
||||
} from '@/components/a-icon/iconfont.ts'
|
||||
import AIcon from '@/components/a-icon/AIcon.tsx'
|
||||
|
||||
const pagination = reactive<G.Pagination>({
|
||||
total: icons.glyphs.length,
|
||||
pages: Math.ceil(icons.glyphs.length / 5),
|
||||
current: 1,
|
||||
size: 5,
|
||||
});
|
||||
})
|
||||
|
||||
function pageChangeHandler(currentPage: number, pageSize: number) {
|
||||
pagination.current = currentPage;
|
||||
pagination.size = pageSize;
|
||||
iconTableDataSource.value = icons.glyphs.filter((_, i) => {
|
||||
return i >= (currentPage - 1) * pageSize && i < currentPage * pageSize;
|
||||
});
|
||||
function dialogCloseHandler() {
|
||||
menuForm.value = {
|
||||
icon: 'dianzixiaopiao',
|
||||
}
|
||||
}
|
||||
|
||||
const dropdownTableIns = useTemplateRef<TableInstance>("dropdownTable");
|
||||
|
||||
let menuForm = reactive<MenuTypes.MenuForm>({
|
||||
icon: "dianzixiaopiao",
|
||||
});
|
||||
function pageChangeHandler(currentPage: number, pageSize: number) {
|
||||
pagination.current = currentPage
|
||||
pagination.size = pageSize
|
||||
iconTableDataSource.value = icons.glyphs.filter((_, i) => {
|
||||
return i >= (currentPage - 1) * pageSize && i < currentPage * pageSize
|
||||
})
|
||||
}
|
||||
|
||||
const dropdownTableIns = useTemplateRef<TableInstance>('dropdownTable')
|
||||
|
||||
let menuForm = ref<MenuTypes.MenuForm>({
|
||||
icon: 'dianzixiaopiao',
|
||||
})
|
||||
|
||||
const iconTableDataSource = ref<IconGlyphs[]>(
|
||||
icons.glyphs.filter((_, i) => {
|
||||
return i >= 0 && i < 5;
|
||||
})
|
||||
);
|
||||
return i >= 0 && i < 5
|
||||
}),
|
||||
)
|
||||
|
||||
function currentChangeHandler(val?: IconGlyphs) {
|
||||
console.log(val);
|
||||
if (val == null) return;
|
||||
menuForm.icon = val.font_class;
|
||||
menuForm.iconName = val.name;
|
||||
console.log(val)
|
||||
if (val == null) return
|
||||
menuForm.value.icon = val.font_class
|
||||
menuForm.value.iconName = val.name
|
||||
}
|
||||
|
||||
const showDialog = ref(false);
|
||||
const submiting = ref(false);
|
||||
const status = ref<"add" | "view" | "modify">("add");
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
|
||||
const menuCategoryData = computed(() => {
|
||||
const data: { key: string; label: string }[] = [];
|
||||
const data: { key: string; label: string }[] = []
|
||||
for (const key in MenuCategoryDict) {
|
||||
data.push({
|
||||
key,
|
||||
label: MenuCategoryDict[key as keyof typeof MenuCategoryDict],
|
||||
});
|
||||
})
|
||||
}
|
||||
return data;
|
||||
});
|
||||
return data
|
||||
})
|
||||
|
||||
const menuTreeDataSource = ref<MenuTypes.SysMenu[]>();
|
||||
const menuTreeDataSource = ref<MenuTypes.SysMenu[]>()
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === "view") return;
|
||||
submiting.value = true;
|
||||
if (menuForm.id != null) {
|
||||
MenuApi.modify(menuForm)
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (menuForm.value.id != null) {
|
||||
MenuApi.modify(menuForm.value)
|
||||
.then(() => {
|
||||
ElMessage.success("修改成功");
|
||||
ElMessage.success('修改成功')
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
MenuApi.add(menuForm)
|
||||
MenuApi.add(menuForm.value)
|
||||
.then(() => {
|
||||
ElMessage.success("添加成功");
|
||||
ElMessage.success('添加成功')
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: MenuTypes.MenuForm = {}) {
|
||||
open(data: MenuTypes.MenuForm = {
|
||||
icon: 'dianzixiaopiao',
|
||||
}) {
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = "modify";
|
||||
Object.assign(menuForm, data);
|
||||
status.value = 'modify'
|
||||
menuForm.value = data
|
||||
} else {
|
||||
menuForm = {};
|
||||
menuForm.value = {
|
||||
icon: 'dianzixiaopiao',
|
||||
}
|
||||
showDialog.value = true;
|
||||
dropdownTableIns.value?.setCurrentRow(icons.glyphs.find((it) => it.font_class === data.icon));
|
||||
}
|
||||
showDialog.value = true
|
||||
dropdownTableIns.value?.setCurrentRow(icons.glyphs.find((it) => it.font_class === data.icon))
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
MenuApi.list().then(({ data }) => {
|
||||
const nodes = Colls.toTree(data.map((it) => ({ value: it.id, label: it.title, ...it })));
|
||||
menuTreeDataSource.value = [{ value: "0", label: "顶级菜单", id: "0", pid: "0", children: nodes }];
|
||||
});
|
||||
});
|
||||
MenuApi.list().then(({data}) => {
|
||||
const nodes = Colls.toTree(data.map((it) => ({value: it.id, label: it.title, ...it})))
|
||||
menuTreeDataSource.value = [ {value: '0', label: '顶级菜单', id: '0', pid: '0', children: nodes} ]
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="dialogCloseHandler"
|
||||
destroy-on-close
|
||||
width="25vw">
|
||||
<ElForm :model="roleFormData"
|
||||
|
|
@ -40,13 +41,17 @@ const emits = defineEmits([ 'editSucc' ])
|
|||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const roleFormData = reactive<RoleTypes.SearchRoleResult>({})
|
||||
const roleFormData = ref<RoleTypes.SearchRoleResult>({})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
roleFormData.value = {}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (roleFormData.id != null) {
|
||||
RoleApi.modify(roleFormData)
|
||||
if (roleFormData.value.id != null) {
|
||||
RoleApi.modify(roleFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -56,7 +61,7 @@ function submitHandler() {
|
|||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
RoleApi.add(roleFormData)
|
||||
RoleApi.add(roleFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -75,11 +80,11 @@ defineExpose({
|
|||
status.value = 'modify'
|
||||
RoleApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(roleFormData, res.data)
|
||||
roleFormData.value = res.data
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(roleFormData, {})
|
||||
roleFormData.value = data
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -188,10 +188,6 @@ function moveDown(index: number) {
|
|||
}
|
||||
}
|
||||
|
||||
const expandedKeys = computed(() => snConfig.config.map((_, i) => i + ''))
|
||||
|
||||
const arrowDropdownVisible = ref(false)
|
||||
|
||||
defineExpose({
|
||||
open(data?: SnConfigTypes.SnConfigDetail) {
|
||||
if (data == null) {
|
||||
|
|
@ -207,7 +203,8 @@ defineExpose({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog v-model="visible" :title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" class="config-dialog" footer-class="panel-footer" width="950px"
|
||||
<ElDialog v-model="visible"
|
||||
:title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" class="config-dialog" footer-class="panel-footer" width="950px"
|
||||
@close="onCloseHandler">
|
||||
<div class="config-panel">
|
||||
<div class="config-title">
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="25vw">
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close width="25vw" @close="dialogCloseHandler">
|
||||
<ElForm :model="taskFormData" class="sys_task-form" label-width="auto">
|
||||
<ElFormItem label="任务名称">
|
||||
<ElInput v-model="taskFormData.taskName" :disabled="status === 'view'" placeholder="任务名称" />
|
||||
<ElInput v-model="taskFormData.taskName" :disabled="status === 'view'" placeholder="任务名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="任务执行函数">
|
||||
<ElInput v-model="taskFormData.fn" :disabled="status === 'view'" placeholder="任务执行函数" />
|
||||
<ElInput v-model="taskFormData.fn" :disabled="status === 'view'" placeholder="任务执行函数"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="日志等级">
|
||||
<el-select v-model="taskFormData.logLevel" placeholder="请选择日志等级">
|
||||
<el-option v-for="item in logLevelList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-option v-for="item in logLevelList" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<!-- <ElInput v-model="taskFormData.logLevel" :disabled="status === 'view'" placeholder="日志等级" /> -->
|
||||
</ElFormItem>
|
||||
<ElFormItem label="调度方式">
|
||||
<!-- <ElInput v-model="taskFormData.scheduleType" :disabled="status === 'view'" placeholder="调度方式" /> -->
|
||||
<el-select @change="taskFormData.scheduleConf = ''" v-model="taskFormData.scheduleType" placeholder="请选择调度方式">
|
||||
<el-option v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-option v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="调度配置" v-if="taskFormData.scheduleType != 'Manually'">
|
||||
<ElInput v-model="taskFormData.scheduleConf" :disabled="status === 'view'" placeholder="调度配置" />
|
||||
<ElInput v-model="taskFormData.scheduleConf" :disabled="status === 'view'" placeholder="调度配置"/>
|
||||
</ElFormItem>
|
||||
<!-- <ElFormItem label="临界时间">
|
||||
<ElInput v-model="taskFormData.criticalTiming" :disabled="status === 'view'" placeholder="临界时间" />
|
||||
|
|
@ -31,78 +33,84 @@
|
|||
:disabled="status === 'view'"
|
||||
placeholder="是否禁用"/> -->
|
||||
|
||||
<el-switch v-model="taskFormData.disabled" active-text="禁用" inactive-text="启用" />
|
||||
<el-switch v-model="taskFormData.disabled" active-text="禁用" inactive-text="启用"/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="备注">
|
||||
<ElInput v-model="taskFormData.memo" :disabled="status === 'view'" placeholder="备注" />
|
||||
<ElInput v-model="taskFormData.memo" :disabled="status === 'view'" placeholder="备注"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TaskApi from "@/pages/sys/task/task-api.ts";
|
||||
import Strings from "@/common/utils/strings.ts";
|
||||
import { ElMessage } from "element-plus";
|
||||
import TaskApi from '@/pages/sys/task/task-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const emits = defineEmits(["editSucc"]);
|
||||
const emits = defineEmits([ 'editSucc' ])
|
||||
const scheduleTypeList = [
|
||||
{ value: "Manually", label: "手动" },
|
||||
{ value: "Fixed", label: "固定周期" },
|
||||
{ value: "Cron", label: "自定义" },
|
||||
];
|
||||
{value: 'Manually', label: '手动'},
|
||||
{value: 'Fixed', label: '固定周期'},
|
||||
{value: 'Cron', label: '自定义'},
|
||||
]
|
||||
const logLevelList = [
|
||||
{ value: "DEBUG", label: "调试" },
|
||||
{ value: "INFO", label: "普通" },
|
||||
{ value: "WARN", label: "警告" },
|
||||
{ value: "ERROR", label: "错误" },
|
||||
{ value: "OFF", label: "关闭" },
|
||||
];
|
||||
const showDialog = ref(false);
|
||||
const submiting = ref(false);
|
||||
const status = ref<"add" | "view" | "modify">("add");
|
||||
let taskFormData = reactive<TaskTypes.SearchTaskResult>({});
|
||||
{value: 'DEBUG', label: '调试'},
|
||||
{value: 'INFO', label: '普通'},
|
||||
{value: 'WARN', label: '警告'},
|
||||
{value: 'ERROR', label: '错误'},
|
||||
{value: 'OFF', label: '关闭'},
|
||||
]
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
let taskFormData = ref<TaskTypes.SearchTaskResult>({})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
taskFormData.value = {}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === "view") return;
|
||||
submiting.value = true;
|
||||
if (taskFormData.id != null) {
|
||||
TaskApi.modify(taskFormData)
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (taskFormData.value.id != null) {
|
||||
TaskApi.modify(taskFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success("修改成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
TaskApi.add(taskFormData)
|
||||
TaskApi.add(taskFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success("添加成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: TaskTypes.SearchTaskResult = {}) {
|
||||
showDialog.value = true;
|
||||
console.log(!Strings.isBlank(data.id),'dataa')
|
||||
showDialog.value = true
|
||||
console.log(!Strings.isBlank(data.id), 'dataa')
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = "modify";
|
||||
status.value = 'modify'
|
||||
TaskApi.detail(data.id!).then((res) => {
|
||||
Object.assign(taskFormData, res.data);
|
||||
});
|
||||
taskFormData.value = res.data
|
||||
})
|
||||
} else {
|
||||
status.value = "add";
|
||||
taskFormData = reactive({});
|
||||
status.value = 'add'
|
||||
taskFormData.value = data
|
||||
// taskFormData = {}
|
||||
// for (const key in taskFormData) {
|
||||
// taskFormData[key] = undefined
|
||||
|
|
@ -110,7 +118,7 @@ defineExpose({
|
|||
// }
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.sys_task-form {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="dialogCloseHandler"
|
||||
destroy-on-close
|
||||
width="700">
|
||||
<ElTransfer
|
||||
|
|
@ -53,6 +54,12 @@ const allRoles = ref<RoleTypes.SearchRoleResult[]>([])
|
|||
const rightValue = ref<string[]>([])
|
||||
const currentUserId = ref<string>('')
|
||||
|
||||
function dialogCloseHandler() {
|
||||
currentUserId.value = ''
|
||||
hadRoles.value = []
|
||||
allRoles.value = []
|
||||
rightValue.value = []
|
||||
}
|
||||
function filterMethod(query: string, item: TransferDataItem) {
|
||||
return Strings.isBlank(query) || (item as RoleTypes.SearchRoleResult).roleCode!.includes(query) || (item as RoleTypes.SearchRoleResult).roleName!.includes(query)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="dialogCloseHandler"
|
||||
destroy-on-close
|
||||
width="25vw">
|
||||
<ElForm :model="userFormData"
|
||||
|
|
@ -60,18 +61,27 @@ const emits = defineEmits([ 'editSucc' ])
|
|||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const userFormData = reactive<UserTypes.SearchUserResult>({
|
||||
const userFormData = ref<UserTypes.SearchUserResult>({
|
||||
account: {
|
||||
username: '',
|
||||
secret: '',
|
||||
},
|
||||
})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
userFormData.value = {
|
||||
account: {
|
||||
username: '',
|
||||
secret: '',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (userFormData.id != null) {
|
||||
UserApi.modify(userFormData)
|
||||
if (userFormData.value.id != null) {
|
||||
UserApi.modify(userFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -81,7 +91,7 @@ function submitHandler() {
|
|||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
UserApi.add(userFormData)
|
||||
UserApi.add(userFormData.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
|
|
@ -100,18 +110,18 @@ defineExpose({
|
|||
status.value = 'modify'
|
||||
UserApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(userFormData, {
|
||||
userFormData.value = {
|
||||
...res.data, account: {},
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(userFormData, {
|
||||
userFormData.value = {
|
||||
account: {
|
||||
username: '',
|
||||
secret: '',
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue