feat:优化页面代码及版本升级报错处理
parent
15a5b4804b
commit
969d9f5d7d
|
|
@ -1,15 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import {reactive, toRefs, watch} from 'vue'
|
||||
import common from '@/utils/common'
|
||||
import {reactive, toRefs, watch} from 'vue'
|
||||
import common from '@/utils/common'
|
||||
import {Sort, Setting} from '@element-plus/icons-vue'
|
||||
|
||||
const prop = defineProps({
|
||||
const prop = defineProps({
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
page: {
|
||||
type: Object,
|
||||
default:{
|
||||
default: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
|
|
@ -32,67 +33,74 @@
|
|||
},
|
||||
headerCellStyle: {
|
||||
type: Object,
|
||||
default:{color:'#606266', fontWeight: 700}
|
||||
default: {color: '#606266', fontWeight: 700}
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'onSizeChange','onCurrentChange','onSelectionChange','setCellColor',
|
||||
'onButtonClick','onSwitchChange',
|
||||
])
|
||||
const emit = defineEmits([
|
||||
'onSizeChange', 'onCurrentChange', 'onSelectionChange', 'setCellColor',
|
||||
'onButtonClick', 'onSwitchChange',
|
||||
])
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
maxHeight: window.innerHeight - 280,
|
||||
tableHeight: prop.tableHeight,
|
||||
headerCellStyle: prop.headerCellStyle,
|
||||
size: 'default',
|
||||
columns: prop.column.map((item:any) => {return item.prop}),
|
||||
columns: prop.column.map((item: any) => {
|
||||
return item.prop
|
||||
}),
|
||||
checkColAll: true,
|
||||
isIndeterminate: true,
|
||||
cellStyle: function(e:any){
|
||||
let obj:any = {};
|
||||
emit('setCellColor', e, (color = {}) =>{
|
||||
cellStyle: function (e: any) {
|
||||
let obj: any = {};
|
||||
emit('setCellColor', e, (color = {}) => {
|
||||
obj = color;
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
})
|
||||
const {
|
||||
maxHeight,tableHeight,headerCellStyle,cellStyle,size,columns,checkColAll,isIndeterminate
|
||||
} = toRefs(state)
|
||||
})
|
||||
const {
|
||||
maxHeight, tableHeight, headerCellStyle, cellStyle, size, columns, checkColAll, isIndeterminate
|
||||
} = toRefs(state)
|
||||
|
||||
const onSizeChange = (e:any) =>{
|
||||
const onSizeChange = (e: any) => {
|
||||
emit('onSizeChange', e)
|
||||
}
|
||||
const onCurrentChange = (e:any) =>{
|
||||
}
|
||||
const onCurrentChange = (e: any) => {
|
||||
emit('onCurrentChange', e)
|
||||
}
|
||||
}
|
||||
|
||||
function onFind(arr:any,val:any){
|
||||
if(!arr) return 'info';
|
||||
return arr.find((item:any)=>{ return item.value == val}).label;
|
||||
}
|
||||
function onFind(arr: any, val: any) {
|
||||
if (!arr) return 'info';
|
||||
return arr.find((item: any) => {
|
||||
return item.value == val
|
||||
}).label;
|
||||
}
|
||||
|
||||
function onCheckColAll(val:boolean){
|
||||
const _columns = prop.column.map((item:any) => {return item.prop})
|
||||
function onCheckColAll(val: boolean) {
|
||||
const _columns = prop.column.map((item: any) => {
|
||||
return item.prop
|
||||
})
|
||||
state.columns = val ? _columns : []
|
||||
state.isIndeterminate = false
|
||||
}
|
||||
function onCheckedCol(value: string[]){
|
||||
}
|
||||
|
||||
function onCheckedCol(value: string[]) {
|
||||
let checkedCount = value.length
|
||||
state.checkColAll = checkedCount === prop.column.length
|
||||
state.isIndeterminate = checkedCount > 0 && checkedCount < prop.column.length
|
||||
}
|
||||
}
|
||||
|
||||
watch(columns, (newValue, oldValue) =>{
|
||||
prop.column.filter((item:any) =>{
|
||||
watch(columns, (newValue) => {
|
||||
prop.column.filter((item: any) => {
|
||||
item.isShow = newValue.indexOf(item.prop) == -1;
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -107,43 +115,51 @@
|
|||
<el-popover placement="bottom" :width="80" trigger="click">
|
||||
<template #reference>
|
||||
<el-button link>
|
||||
<el-icon :size="20"><Sort /></el-icon>
|
||||
<el-icon :size="20">
|
||||
<Sort/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<div>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="small">紧凑</el-radio>
|
||||
<el-radio label="default">默认</el-radio>
|
||||
<el-radio label="large">中等</el-radio>
|
||||
<el-radio value="small">紧凑</el-radio>
|
||||
<el-radio value="default">默认</el-radio>
|
||||
<el-radio value="large">中等</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover placement="bottom" :width="120" trigger="click">
|
||||
<template #reference>
|
||||
<el-button link>
|
||||
<el-icon :size="20"><Setting /></el-icon>
|
||||
<el-icon :size="20">
|
||||
<Setting/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<div>
|
||||
<el-checkbox v-model="checkColAll" :indeterminate="isIndeterminate" @change="onCheckColAll">全选/不选</el-checkbox>
|
||||
<el-checkbox v-model="checkColAll" :indeterminate="isIndeterminate" @change="onCheckColAll">全选/不选
|
||||
</el-checkbox>
|
||||
<el-scrollbar height="400px">
|
||||
<el-checkbox-group v-model="columns" @change="onCheckedCol" >
|
||||
<el-checkbox v-for="col in column" :key="col" :label="col.prop">{{col.label}}</el-checkbox>
|
||||
<el-checkbox-group v-model="columns" @change="onCheckedCol">
|
||||
<el-checkbox v-for="col in column" :key="col" :label="col.label" :value="col.prop">{{ col.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-table :data="data" border stripe :size="size" :height="tableHeight" :max-height="maxHeight" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
<el-table :data="data" border stripe :size="size" :height="tableHeight" :max-height="maxHeight" row-key="id"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
v-loading="loading" :header-cell-style="headerCellStyle" :cell-style="cellStyle"
|
||||
@selection-change="$emit('onSelectionChange')" style="width: 100%;">
|
||||
<template v-for="item in column" :key="item">
|
||||
<el-table-column v-if="!item.prop && !item.label && !item.isShow" :fixed="item.fixed" type="selection" width="45"></el-table-column>
|
||||
<el-table-column v-if="!item.prop && !item.label && !item.isShow" :fixed="item.fixed" type="selection"
|
||||
width="45"></el-table-column>
|
||||
<!-- color值 -->
|
||||
<el-table-column v-else-if="item.type == 'color' && !item.isShow"
|
||||
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
|
||||
<template #default="scope">
|
||||
<span :style="{color: scope.row[item.prop]}">{{scope.row[item.prop]}}</span>
|
||||
<span :style="{color: scope.row[item.prop]}">{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- icon图标 -->
|
||||
|
|
@ -170,14 +186,15 @@
|
|||
<el-table-column v-else-if="item.type == 'image' && !item.isShow"
|
||||
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
|
||||
<template #default="scope">
|
||||
<el-image :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]" preview-teleported fit="cover" style="width: 50px; height: 50px"/>
|
||||
<el-image :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]" preview-teleported
|
||||
fit="cover" style="width: 50px; height: 50px"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- el-rate -->
|
||||
<el-table-column v-else-if="item.type == 'rate' && !item.isShow"
|
||||
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
|
||||
<template #default="scope">
|
||||
<el-rate v-model="scope.row[item.prop]" disabled allow-half />
|
||||
<el-rate v-model="scope.row[item.prop]" disabled allow-half/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- el-tag -->
|
||||
|
|
@ -187,7 +204,7 @@
|
|||
<el-tag :size="item.option.size"
|
||||
:effect="item.option.effect"
|
||||
:type="onFind(item.option.typeList, scope.row[item.prop])">
|
||||
{{scope.row[item.alias==null?item.prop:item.alias]}}
|
||||
{{ scope.row[item.alias == null ? item.prop : item.alias] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -195,8 +212,9 @@
|
|||
<el-table-column v-else-if="item.type == 'button' && !item.isShow" show-overflow-tooltip
|
||||
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
|
||||
<template #default="scope">
|
||||
<el-button @click="$emit('onButtonClick',scope.row)" :type="item.option.type" link :size="item.option.size">
|
||||
{{scope.row[item.alias==null?item.prop:item.alias]}}
|
||||
<el-button @click="$emit('onButtonClick',scope.row)" :type="item.option.type" link
|
||||
:size="item.option.size">
|
||||
{{ scope.row[item.alias == null ? item.prop : item.alias] }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -205,8 +223,10 @@
|
|||
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
|
||||
<template #default="scope">
|
||||
<el-switch @change="$emit('onSwitchChange',scope.row)" :inline-prompt="!item.option.inlinePrompt"
|
||||
:active-value="item.option.activeValue" :active-color="item.option.activeColor" :active-text="item.option.activeText"
|
||||
:inactive-value="item.option.inactiveValue" :inactive-color="item.option.inactiveColor" :inactive-text="item.option.inactiveText"
|
||||
:active-value="item.option.activeValue" :active-color="item.option.activeColor"
|
||||
:active-text="item.option.activeText"
|
||||
:inactive-value="item.option.inactiveValue" :inactive-color="item.option.inactiveColor"
|
||||
:inactive-text="item.option.inactiveText"
|
||||
:size="item.option.size"
|
||||
v-model="scope.row[item.prop]"
|
||||
></el-switch>
|
||||
|
|
@ -225,7 +245,7 @@
|
|||
<el-table-column v-else-if="item.type == 'dict' && !item.isShow"
|
||||
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
|
||||
<template #default="scope">
|
||||
<span>{{common.getDictLabel(item.dictType, scope.row[item.prop])}}</span>
|
||||
<span>{{ common.getDictLabel(item.dictType, scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 其他数据列 -->
|
||||
|
|
@ -257,36 +277,41 @@
|
|||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.table-container{
|
||||
.search-wrap{
|
||||
.table-container {
|
||||
.search-wrap {
|
||||
// background: var(--bg1);
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
padding: 1rem;
|
||||
}
|
||||
.table-wrap{
|
||||
|
||||
.table-wrap {
|
||||
padding: 1rem 0;
|
||||
.header{
|
||||
|
||||
.header {
|
||||
float: right;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
}
|
||||
.pagination-wrap{
|
||||
|
||||
.pagination-wrap {
|
||||
padding-bottom: 0.2rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
}
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #909399;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
border-radius: 5px;
|
||||
background: #ededed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,20 +2,20 @@
|
|||
<div id="amisid" ref="boxRef"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {watch,ref} from "vue"
|
||||
import {ElMessage} from 'element-plus'
|
||||
import 'amis/sdk/sdk.js'
|
||||
import 'amis/lib/themes/default.css'
|
||||
import 'amis/sdk/color-picker.js'
|
||||
import 'amis/sdk/rest.js'
|
||||
// import {InputCity} from 'amis/esm/renderers/Form/InputCity.js'
|
||||
// import {InputColor} from 'amis/esm/renderers/Form/InputColor.js'
|
||||
import axios from 'axios'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import {getToken} from '@/api/auth'
|
||||
import {watch, ref} from "vue"
|
||||
import {ElMessage} from 'element-plus'
|
||||
import 'amis/sdk/sdk.js'
|
||||
import 'amis/lib/themes/default.css'
|
||||
import 'amis/sdk/color-picker.js'
|
||||
import 'amis/sdk/rest.js'
|
||||
import InputCity from 'amis/lib/renderers/Form/InputCity'
|
||||
import InputColor from 'amis/lib/renderers/Form/InputColor'
|
||||
import axios from 'axios'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import {getToken} from '@/api/auth'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
formid: {
|
||||
type: String,
|
||||
default: () => {
|
||||
|
|
@ -28,26 +28,28 @@
|
|||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
const amis = amisRequire('amis/embed');
|
||||
const boxRef = ref(null)
|
||||
// @ts-ignore
|
||||
const amis = amisRequire('amis/embed');
|
||||
const boxRef = ref(null)
|
||||
|
||||
watch(()=> props.formjson, (data)=>{
|
||||
watch(() => props.formjson, (data) => {
|
||||
if (Object.keys(data).length !== 0) {
|
||||
onRendering(data)
|
||||
},
|
||||
{immediate: true,deep: true}
|
||||
)
|
||||
}
|
||||
}, {immediate: true, deep: true}
|
||||
)
|
||||
|
||||
function onRendering(data:any){
|
||||
function onRendering(data: any) {
|
||||
// let amisScoped = amis.embed('#amisid', data);
|
||||
let theme = 'cxd'
|
||||
let amisScoped = amis.embed(
|
||||
'#amisid',
|
||||
data,
|
||||
{
|
||||
updateLocation: (to, replace) => {},
|
||||
updateLocation: (to, replace) => {
|
||||
},
|
||||
},
|
||||
{
|
||||
// 下面三个接口必须实现
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
data, // 请求数据
|
||||
responseType,
|
||||
config, // 其他配置
|
||||
headers ,// 请求头
|
||||
headers,// 请求头
|
||||
updateLocation
|
||||
}) => {
|
||||
config = config || {};
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
config.params = data;
|
||||
}
|
||||
|
||||
return (axios )[method](url, config);
|
||||
return (axios)[method](url, config);
|
||||
} else if (data && data instanceof FormData) {
|
||||
config.headers = config.headers || {};
|
||||
config.headers['Content-Type'] = 'multipart/form-data';
|
||||
|
|
@ -97,9 +99,9 @@
|
|||
config.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
|
||||
return (axios )[method](url, data, config);
|
||||
return (axios)[method](url, data, config);
|
||||
},
|
||||
isCancel: (value) => (axios ).isCancel(value),
|
||||
isCancel: (value) => (axios).isCancel(value),
|
||||
copy: content => {
|
||||
copy(content);
|
||||
ElMessage.success('内容已复制到粘贴板');
|
||||
|
|
@ -107,7 +109,7 @@
|
|||
theme
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -85,21 +85,15 @@ function onCloseAllTab() {
|
|||
|
||||
</script>
|
||||
<template>
|
||||
<div class="tabs-menu">
|
||||
<el-tabs type="card" v-model="tabsMenuValue" @tab-click="onTabMenuClick" @tab-remove="onTabMenuRemove">
|
||||
<el-tab-pane v-for="item in tabsMenuList"
|
||||
:key="item.path"
|
||||
:path="item.path"
|
||||
:label="item.title"
|
||||
:name="item.path"
|
||||
:closable="item.close"
|
||||
@node-contextmenu="onTabMenuRemove">
|
||||
<template #label>
|
||||
<el-icon v-if="item.icon" style="vertical-align: middle;">
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
<el-dropdown :id="item.path" trigger="contextmenu">
|
||||
<span style="vertical-align: middle">{{ item.title }}</span>
|
||||
<el-tabs type="card"
|
||||
v-model="tabsMenuValue"
|
||||
addable
|
||||
@tab-add="onTabMenuRemove"
|
||||
@tab-click="onTabMenuClick"
|
||||
@tab-remove="onTabMenuRemove">
|
||||
<template #add-icon>
|
||||
<el-dropdown>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="CircleCloseFilled" @click="onCloseCurrentTab">关闭当前</el-dropdown-item>
|
||||
|
|
@ -109,9 +103,15 @@ function onCloseAllTab() {
|
|||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<el-tab-pane v-for="item in tabsMenuList"
|
||||
:key="item.path"
|
||||
:path="item.path"
|
||||
:label="item.title"
|
||||
:name="item.path"
|
||||
:closable="item.close"
|
||||
@node-contextmenu="onTabMenuRemove">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.tabs-menu {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="home-container">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<span>公告</span>
|
||||
<span>简介</span>
|
||||
</template>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -42,10 +42,9 @@
|
|||
</div>
|
||||
<div class="text">
|
||||
<el-space alignment="normal" direction="vertical">
|
||||
<el-text tag="p">基于 SpringBoot2 + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统</el-text>
|
||||
<el-text tag="p">Tansci-Boot 是一个前后端分离后台管理系统， 前端集成 amis 低代码前端框架，后端集成 magic-api 的接口快速开发框架。包含基础权限、安全认证、以及常用的一些组件功能。项目易上手，技术更综合，能力更全面。</el-text>
|
||||
<el-text tag="p">基于 SpringBoot2 + Vue3 + Element Plus + amis3.0 快速开发管理系统</el-text>
|
||||
<el-text tag="p">SCFS-UI 是一个前后端分离后台管理系统， 前端集成 amis 低代码前端框架。包含基础权限、安全认证、以及常用的一些组件功能。项目易上手，技术更综合，能力更全面。</el-text>
|
||||
<el-text tag="p">amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。</el-text>
|
||||
<el-text tag="p">magic-api 一个基于 Java 的接口快速开发框架，通过 magic-api 提供的 UI 界面完成编写接口，无需定义 Controller、Service、Dao、Mapper、XML、VO 等 Java 对象即可完成常见的 HTTP API 接口开发。</el-text>
|
||||
</el-space>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<script setup>
|
||||
import {onMounted, reactive, getCurrentInstance, ref} from 'vue'
|
||||
import {ElMessage,ElMessageBox} from 'element-plus'
|
||||
import {getToken} from '@/api/auth'
|
||||
import {page,save,update,bindMenu,del,batchDelete} from '@/api/lowcode/lcPages'
|
||||
import {classifyList,classifySave,classifyUpdate,classifyDel} from '@/api/lowcode/lcPagesClassify'
|
||||
import {list} from '@/api/system/menu'
|
||||
import {onMounted, reactive, getCurrentInstance, ref} from 'vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {getToken} from '@/api/auth'
|
||||
import {page, save, update, bindMenu, del, batchDelete} from '@/api/lowcode/lcPages'
|
||||
import {classifyList, classifySave, classifyUpdate, classifyDel} from '@/api/lowcode/lcPagesClassify'
|
||||
import {list} from '@/api/system/menu'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const renameFormRef = ref()
|
||||
const menuFormRef = ref()
|
||||
const addFormRef = ref()
|
||||
const classifyFormRef = ref()
|
||||
const state = reactive({
|
||||
const {proxy} = getCurrentInstance()
|
||||
const renameFormRef = ref()
|
||||
const menuFormRef = ref()
|
||||
const addFormRef = ref()
|
||||
const classifyFormRef = ref()
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
search: {
|
||||
parentId: null,
|
||||
|
|
@ -44,63 +44,66 @@
|
|||
pageschema: '{}',
|
||||
remarks: null
|
||||
},
|
||||
classifyData:[],
|
||||
classifyData: [],
|
||||
classifyOperate: 0,
|
||||
classifyVisible: false,
|
||||
classifyForm:{
|
||||
classifyForm: {
|
||||
name: "",
|
||||
parentId: null,
|
||||
remarks: null
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
onClassifyList()
|
||||
onLcPages()
|
||||
})
|
||||
})
|
||||
|
||||
function onLcPages(){
|
||||
function onLcPages() {
|
||||
state.loading = true
|
||||
page(Object.assign(state.page,state.search)).then(res=>{
|
||||
page(Object.assign(state.page, state.search)).then(res => {
|
||||
state.loading = false;
|
||||
state.data = res.result.records;
|
||||
state.page.current = res.result.current;
|
||||
state.page.size = res.result.size;
|
||||
state.page.total = res.result.total;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onSizeChange(e){
|
||||
function onSizeChange(e) {
|
||||
state.page.size = e;
|
||||
onLcPages();
|
||||
}
|
||||
function onCurrentChange(e){
|
||||
}
|
||||
|
||||
function onCurrentChange(e) {
|
||||
state.page.current = e;
|
||||
onLcPages();
|
||||
}
|
||||
function onSearch(){
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
onLcPages()
|
||||
}
|
||||
function onRefresh(){
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
state.search = {
|
||||
parentId: null,
|
||||
title: null,
|
||||
classify: null,
|
||||
}
|
||||
onLcPages();
|
||||
}
|
||||
}
|
||||
|
||||
function onPageClick(val){
|
||||
function onPageClick(val) {
|
||||
state.search.parentId = val.id
|
||||
onLcPages()
|
||||
}
|
||||
}
|
||||
|
||||
function onPageDesign(val){
|
||||
let id = window.btoa(val.id+","+getToken())
|
||||
function onPageDesign(val) {
|
||||
let id = window.btoa(val.id + "," + getToken())
|
||||
window.open(proxy.$global.editorUrl + '/gh-pages/index.html#/edit/0g?id=' + id, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
function onRename(val){
|
||||
function onRename(val) {
|
||||
state.addForm = {
|
||||
id: val.id,
|
||||
title: val.title,
|
||||
|
|
@ -113,9 +116,9 @@
|
|||
}
|
||||
state.operate = 1
|
||||
state.addVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onDelete(val){
|
||||
function onDelete(val) {
|
||||
ElMessageBox.confirm('此操作会永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -126,8 +129,9 @@
|
|||
onLcPages()
|
||||
})
|
||||
})
|
||||
}
|
||||
function onBatchDelete(){
|
||||
}
|
||||
|
||||
function onBatchDelete() {
|
||||
ElMessageBox.confirm('此操作会永久删除选中的所有数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -138,13 +142,13 @@
|
|||
onLcPages()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onContextMenu(val){
|
||||
function onContextMenu(val) {
|
||||
list({isShow: 1}).then((res) => {
|
||||
state.menuList = res.result;
|
||||
let menuIds
|
||||
if(Object.prototype.toString.call(val.menuIds) === '[object Array]'){
|
||||
if (Object.prototype.toString.call(val.menuIds) === '[object Array]') {
|
||||
menuIds = val.menuIds
|
||||
} else {
|
||||
menuIds = val.menuIds ? [val.menuIds] : []
|
||||
|
|
@ -155,13 +159,14 @@
|
|||
}
|
||||
state.menuVisible = true
|
||||
})
|
||||
}
|
||||
function onContextMenuSubmit(){
|
||||
}
|
||||
|
||||
function onContextMenuSubmit() {
|
||||
ElMessageBox.confirm('此操作会将已绑定的菜单覆盖, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(()=>{
|
||||
}).then(() => {
|
||||
menuFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
bindMenu({
|
||||
|
|
@ -171,48 +176,49 @@
|
|||
onLcPages()
|
||||
state.menuForm = {}
|
||||
state.menuVisible = false
|
||||
}).catch( e =>
|
||||
}).catch(e =>
|
||||
ElMessage.error(e.msg)
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onSelecting(id){
|
||||
function onSelecting(id) {
|
||||
let selectIds = []
|
||||
state.data.forEach(item=>{
|
||||
state.data.forEach(item => {
|
||||
let d = document.getElementById("page" + item.id);
|
||||
if(item.checked || item.checked === 1){
|
||||
d.style.border="1px solid #409EFF";
|
||||
if (item.checked || item.checked === 1) {
|
||||
d.style.border = "1px solid #409EFF";
|
||||
selectIds.push(item.id)
|
||||
} else {
|
||||
d.style.border="1px solid #e4e7ed";
|
||||
d.style.border = "1px solid #e4e7ed";
|
||||
}
|
||||
})
|
||||
state.selectIds = selectIds
|
||||
}
|
||||
function onSelectAll(){
|
||||
if(state.selectIds && state.selectIds.length === state.data.length){
|
||||
state.data.forEach(item=>{
|
||||
}
|
||||
|
||||
function onSelectAll() {
|
||||
if (state.selectIds && state.selectIds.length === state.data.length) {
|
||||
state.data.forEach(item => {
|
||||
item.checked = 0
|
||||
let d = document.getElementById("page" + item.id);
|
||||
d.style.border="1px solid #e4e7ed";
|
||||
d.style.border = "1px solid #e4e7ed";
|
||||
})
|
||||
state.selectIds = []
|
||||
} else {
|
||||
let selectIds = []
|
||||
state.data.forEach(item=>{
|
||||
state.data.forEach(item => {
|
||||
item.checked = 1
|
||||
let d = document.getElementById("page" + item.id);
|
||||
d.style.border="1px solid #409EFF";
|
||||
d.style.border = "1px solid #409EFF";
|
||||
selectIds.push(item.id)
|
||||
})
|
||||
state.selectIds = selectIds
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onAdd(){
|
||||
function onAdd() {
|
||||
state.addForm = {
|
||||
title: '',
|
||||
subtitle: '',
|
||||
|
|
@ -224,44 +230,44 @@
|
|||
}
|
||||
state.operate = 0
|
||||
state.addVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onAddSubmit(){
|
||||
function onAddSubmit() {
|
||||
addFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
if(state.operate === 0){
|
||||
if (state.operate === 0) {
|
||||
save(state.addForm).then((res) => {
|
||||
onLcPages()
|
||||
state.addVisible = false
|
||||
}).catch( e =>
|
||||
}).catch(e =>
|
||||
ElMessage.error(e.msg)
|
||||
)
|
||||
} else {
|
||||
update(state.addForm).then((res) => {
|
||||
onLcPages()
|
||||
state.addVisible = false
|
||||
}).catch( e =>
|
||||
}).catch(e =>
|
||||
ElMessage.error(e.msg)
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// =================分类=================
|
||||
function onClassifyList(){
|
||||
classifyList().then(res=>{
|
||||
// =================分类=================
|
||||
function onClassifyList() {
|
||||
classifyList().then(res => {
|
||||
state.classifyData = res.result;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onNodeClick(data){
|
||||
function onNodeClick(data) {
|
||||
state.search.classify = data.id;
|
||||
onSearch()
|
||||
}
|
||||
}
|
||||
|
||||
function onOperateChange(val,type){
|
||||
if(type === 1){
|
||||
function onOperateChange(val, type) {
|
||||
if (type === 1) {
|
||||
state.classifyForm = {
|
||||
id: '',
|
||||
parentId: val.id,
|
||||
|
|
@ -270,7 +276,7 @@
|
|||
}
|
||||
state.classifyOperate = 0
|
||||
state.classifyVisible = true;
|
||||
} else if(type === 2) {
|
||||
} else if (type === 2) {
|
||||
state.classifyForm = {
|
||||
id: val.id,
|
||||
parentId: val.parentId,
|
||||
|
|
@ -286,8 +292,8 @@
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
classifyDel(val.id).then(res=>{
|
||||
if(res){
|
||||
classifyDel(val.id).then(res => {
|
||||
if (res) {
|
||||
ElMessage.success("删除成功!");
|
||||
state.classifyForm = {
|
||||
id: '',
|
||||
|
|
@ -298,40 +304,41 @@
|
|||
onClassifyList()
|
||||
}
|
||||
})
|
||||
}).catch(e=>{
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onClassifySubmit(){
|
||||
function onClassifySubmit() {
|
||||
classifyFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
if(state.classifyOperate === 0){
|
||||
if (state.classifyOperate === 0) {
|
||||
classifySave(state.classifyForm).then((res) => {
|
||||
onClassifyList()
|
||||
state.classifyVisible = false
|
||||
}).catch( e =>
|
||||
}).catch(e =>
|
||||
ElMessage.error(e.msg)
|
||||
)
|
||||
} else {
|
||||
classifyUpdate(state.classifyForm).then((res) => {
|
||||
onClassifyList()
|
||||
state.classifyVisible = false
|
||||
}).catch( e =>
|
||||
}).catch(e =>
|
||||
ElMessage.error(e.msg)
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="lc-pages">
|
||||
<div class="pages-classify">
|
||||
<el-scrollbar height="45rem">
|
||||
<el-tree :data="state.classifyData" :props="{children: 'children', label: 'name'}" highlight-current @node-click="onNodeClick" empty-text="暂无数据">
|
||||
<el-tree :data="state.classifyData" :props="{children: 'children', label: 'name'}" highlight-current
|
||||
@node-click="onNodeClick" empty-text="暂无数据">
|
||||
<template #default="{ node, data }">
|
||||
<el-tooltip placement="right-start" effect="light" popper-class="classify-tooltip">
|
||||
<span class="custom-tree-node">
|
||||
|
|
@ -352,13 +359,18 @@
|
|||
</el-tree>
|
||||
</el-scrollbar>
|
||||
<el-dialog v-model="state.classifyVisible" title="分类管理" :show-close="false" width="30%">
|
||||
<el-form :model="state.classifyForm" ref="classifyFormRef" :rules="rules" label-width="60px" status-icon>
|
||||
<el-form-item v-show="state.classifyForm.parentId !== '0'" label="父级" prop="parentId" :rules="[{required: true, message: '请选择父级', trigger: 'blur'}]">
|
||||
<el-tree-select v-model="state.classifyForm.parentId" :data="state.classifyData" :props="{children: 'children', label: 'name'}" node-key="id"
|
||||
check-strictly :render-after-expand="false" :default-checked-keys="[state.classifyForm.parentId]" :default-expanded-keys="[state.classifyForm.parentId]" placeholder="请选父级" style="width:100%"/>
|
||||
<el-form :model="state.classifyForm" ref="classifyFormRef" label-width="60px" status-icon>
|
||||
<el-form-item v-show="state.classifyForm.parentId !== '0'" label="父级" prop="parentId"
|
||||
:rules="[{required: true, message: '请选择父级', trigger: 'blur'}]">
|
||||
<el-tree-select v-model="state.classifyForm.parentId" :data="state.classifyData"
|
||||
:props="{children: 'children', label: 'name'}" node-key="id"
|
||||
check-strictly :render-after-expand="false"
|
||||
:default-checked-keys="[state.classifyForm.parentId]"
|
||||
:default-expanded-keys="[state.classifyForm.parentId]" placeholder="请选父级"
|
||||
style="width:100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name" :rules="[{required: true, message: '请输入名称', trigger: 'blur'}]">
|
||||
<el-input v-model="state.classifyForm.name" placeholder="请输入名称" />
|
||||
<el-input v-model="state.classifyForm.name" placeholder="请输入名称"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -380,55 +392,74 @@
|
|||
<div class="main-operate">
|
||||
<el-button @click="onSelectAll()">全选</el-button>
|
||||
<el-button @click="onAdd()" type="primary">新增</el-button>
|
||||
<el-button @click="onBatchDelete()" :disabled="state.selectIds && state.selectIds.length === 0" type="danger">批量删除</el-button>
|
||||
<el-button v-if="state.search.parentId && state.search.parentId !== '0'" @click="onRefresh()" type="primary" icon="Back" style="float: right;">返回</el-button>
|
||||
<el-button @click="onBatchDelete()" :disabled="state.selectIds && state.selectIds.length === 0"
|
||||
type="danger">批量删除
|
||||
</el-button>
|
||||
<el-button v-if="state.search.parentId && state.search.parentId !== '0'" @click="onRefresh()" type="primary"
|
||||
icon="Back" style="float: right;">返回
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="state.data" v-loading="state.loading" class="main-card">
|
||||
<el-card v-for="item in state.data" :key="item" shadow="hover" :body-style="{ padding: '0px' }" :id="'page'+item.id" style="margin: 0.4rem;">
|
||||
<el-card v-for="item in state.data" :key="item" shadow="hover" :body-style="{ padding: '0px' }"
|
||||
:id="'page'+item.id" style="margin: 0.4rem;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-text tag="b">{{item.title}}</el-text>
|
||||
<el-checkbox @change="onSelecting()" v-model="item.checked" :true-label="1" :false-label="0"/>
|
||||
<el-text tag="b">{{ item.title }}</el-text>
|
||||
<el-checkbox @change="onSelecting()" v-model="item.checked" :true-value="1" :false-value="0"/>
|
||||
</div>
|
||||
</template>
|
||||
<div @click="onPageClick(item)" class="card-content">
|
||||
<el-icon v-if="!item.menuIds || item.menuIds.length === 0" size="100" color="#E6A23C"><Setting /></el-icon>
|
||||
<el-icon v-else size="100" color="#67C23A"><UploadFilled /></el-icon>
|
||||
<el-icon v-if="!item.menuIds || item.menuIds.length === 0" size="100" color="#E6A23C">
|
||||
<Setting/>
|
||||
</el-icon>
|
||||
<el-icon v-else size="100" color="#67C23A">
|
||||
<UploadFilled/>
|
||||
</el-icon>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<el-text truncated>{{item.subtitle}}</el-text>
|
||||
<el-text truncated>{{ item.subtitle }}</el-text>
|
||||
<div>
|
||||
<el-tag v-if="item.status === 0" type="success" effect="light" round>已发布</el-tag>
|
||||
<el-tag v-else type="warning" effect="light" round>未发布</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-text truncated tag="sub" size="small" style="max-width:12rem;padding-top:0.4rem;font-size:12px;">{{item.remarks}}</el-text>
|
||||
<el-text truncated tag="sub" size="small"
|
||||
style="max-width:12rem;padding-top:0.4rem;font-size:12px;">{{ item.remarks }}
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button-group style="width:100%; display: flex;">
|
||||
<el-button @click="onPageDesign(item)" icon="Edit" style="width:100%; border-left: none;">设计页面</el-button>
|
||||
<el-button @click="onPageDesign(item)" icon="Edit" style="width:100%; border-left: none;">设计页面
|
||||
</el-button>
|
||||
<el-button @click="onRename(item)" icon="EditPen" style="width:100%">修改</el-button>
|
||||
<el-button @click="onDelete(item)" icon="Delete" style="width:100%">删除</el-button>
|
||||
<el-button @click="onContextMenu(item)" icon="Connection" style="width:100%; border-right: none;">关联菜单</el-button>
|
||||
<el-button @click="onContextMenu(item)" icon="Connection" style="width:100%; border-right: none;">
|
||||
关联菜单
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-pagination v-if="state.data && state.data.length > 0" :current-page="state.page.current" :page-size="state.page.size" :total="state.page.total"
|
||||
<el-pagination v-if="state.data && state.data.length > 0" :current-page="state.page.current"
|
||||
:page-size="state.page.size" :total="state.page.total"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange" style="margin-top: 1.2rem;"/>
|
||||
<div v-if="!state.data || state.data.length === 0">
|
||||
<el-empty description="暂无数据" />
|
||||
<el-empty description="暂无数据"/>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-dialog v-model="state.menuVisible" title="关联菜单" :show-close="false" width="30%">
|
||||
<el-form :model="state.menuForm" ref="menuFormRef" :rules="rules" label-width="60px" status-icon>
|
||||
<el-form-item label="菜单" prop="menuId" :rules="[{required: true, message: '请选择菜单', trigger: 'blur'}]">
|
||||
<el-tree-select v-model="state.menuForm.menuId" :data="state.menuList" :props="{children: 'children', label: 'chineseName'}" node-key="id" multiple :render-after-expand="false" :default-checked-keys="state.menuForm.menuId" :default-expanded-keys="state.menuForm.menuId" style="width:100%;"/>
|
||||
<el-form :model="state.menuForm" ref="menuFormRef" label-width="60px" status-icon>
|
||||
<el-form-item label="菜单" prop="menuId"
|
||||
:rules="[{required: true, message: '请选择菜单', trigger: 'blur'}]">
|
||||
<el-tree-select v-model="state.menuForm.menuId" :data="state.menuList"
|
||||
:props="{children: 'children', label: 'chineseName'}" node-key="id" multiple
|
||||
:render-after-expand="false" :default-checked-keys="state.menuForm.menuId"
|
||||
:default-expanded-keys="state.menuForm.menuId" style="width:100%;"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -439,19 +470,28 @@
|
|||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="state.addVisible" title="新增页面" :show-close="false" width="40%">
|
||||
<el-form :model="state.addForm" ref="addFormRef" :rules="rules" label-width="100px" status-icon>
|
||||
<el-form-item label="页面名称" prop="title" :rules="[{required: true, message: '请输入名称', trigger: 'blur'}]">
|
||||
<el-input v-model="state.addForm.title" placeholder="请输入名称" />
|
||||
<el-form :model="state.addForm" ref="addFormRef" label-width="100px" status-icon>
|
||||
<el-form-item label="页面名称" prop="title"
|
||||
:rules="[{required: true, message: '请输入名称', trigger: 'blur'}]">
|
||||
<el-input v-model="state.addForm.title" placeholder="请输入名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="页面标题" prop="subtitle" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
|
||||
<el-form-item label="页面标题" prop="subtitle"
|
||||
:rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
|
||||
<el-input v-model="state.addForm.subtitle" placeholder="请输入标题"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="页面状态" prop="status" :rules="[{required: true, message: '请选择状态', trigger: 'blur'}]">
|
||||
<el-switch v-model="state.addForm.status" inline-prompt active-text="是" :active-value="0" inactive-text="否" :inactive-value="1"/>
|
||||
<el-form-item label="页面状态" prop="status"
|
||||
:rules="[{required: true, message: '请选择状态', trigger: 'blur'}]">
|
||||
<el-switch v-model="state.addForm.status" inline-prompt active-text="是" :active-value="0"
|
||||
inactive-text="否" :inactive-value="1"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="页面分类" prop="status" :rules="[{required: true, message: '请选择分类', trigger: 'blur'}]">
|
||||
<el-tree-select v-model="state.addForm.classify" :data="state.classifyData" :props="{children: 'children', label: 'name'}" node-key="id"
|
||||
check-strictly :render-after-expand="false" :default-checked-keys="[state.addForm.classify]" :default-expanded-keys="[state.addForm.classify]" placeholder="请选父级" style="width:100%"/>
|
||||
<el-form-item label="页面分类" prop="status"
|
||||
:rules="[{required: true, message: '请选择分类', trigger: 'blur'}]">
|
||||
<el-tree-select v-model="state.addForm.classify" :data="state.classifyData"
|
||||
:props="{children: 'children', label: 'name'}" node-key="id"
|
||||
check-strictly :render-after-expand="false"
|
||||
:default-checked-keys="[state.addForm.classify]"
|
||||
:default-expanded-keys="[state.addForm.classify]" placeholder="请选父级"
|
||||
style="width:100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="页面描述" prop="remarks">
|
||||
<el-input v-model="state.addForm.remarks" placeholder="请输入描述" type="textarea" :rows="2"/>
|
||||
|
|
@ -468,19 +508,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" >
|
||||
.classify-tooltip.is-light {
|
||||
<style lang="scss">
|
||||
.classify-tooltip.is-light {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.lc-pages{
|
||||
}
|
||||
|
||||
.lc-pages {
|
||||
display: flex;
|
||||
.pages-classify{
|
||||
|
||||
.pages-classify {
|
||||
border-right: 1px solid #e4e7ed;
|
||||
margin: 0 1rem 0 1rem;
|
||||
min-width: 12rem;
|
||||
.el-tree-node:hover>.el-tree-node__content{
|
||||
|
||||
.el-tree-node:hover > .el-tree-node__content {
|
||||
background-color: #fff !important;
|
||||
color: var(--theme) !important;
|
||||
}
|
||||
|
|
@ -492,55 +535,68 @@
|
|||
|
||||
|
||||
}
|
||||
.pages-list{
|
||||
|
||||
.pages-list {
|
||||
width: 100%;
|
||||
.pages-search{
|
||||
|
||||
.pages-search {
|
||||
display: flex;
|
||||
}
|
||||
.pages-main{
|
||||
|
||||
.pages-main {
|
||||
padding-top: 1rem;
|
||||
.main-operate{
|
||||
|
||||
.main-operate {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.main-card{
|
||||
|
||||
.main-card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.el-card{
|
||||
|
||||
.el-card {
|
||||
// flex: 0 0 24%;
|
||||
:deep(.el-card__header){
|
||||
:deep(.el-card__header) {
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.card-content{
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
padding: 0 0.4rem 1rem 0.4rem;
|
||||
cursor: pointer;
|
||||
.content{
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding-left: 1.2rem;
|
||||
.content-item{
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer{
|
||||
.el-button{
|
||||
|
||||
.card-footer {
|
||||
.el-button {
|
||||
border-bottom: none;
|
||||
}
|
||||
.el-button-group>.el-button:first-child{
|
||||
|
||||
.el-button-group > .el-button:first-child {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.el-button-group>.el-button:last-child {
|
||||
|
||||
.el-button-group > .el-button:last-child {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -548,5 +604,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
|
||||
<template>
|
||||
<div class="dict-container">
|
||||
<Table :data="table.tableData" :column="table.tableTitle" :operation="table.operation" :page="false" :loading="table.loading">
|
||||
<Table :data="table.tableData" :column="table.tableTitle" :operation="table.operation" :loading="table.loading">
|
||||
<template #search>
|
||||
<div><el-button @click="onAdd(null)" v-permission="'dict:save'" type="primary">添加</el-button></div>
|
||||
</template>
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
</template>
|
||||
</Table>
|
||||
<el-dialog title="字典信息" v-model="form.dictVisible" :show-close="false" width="40%">
|
||||
<el-form :model="form.dictForm" ref="formRef" :rules="rules" label-width="80px" status-icon>
|
||||
<el-form :model="form.dictForm" ref="formRef" label-width="80px" status-icon>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="分组名称" prop="groupName" :rules="[{required: true,message:'请输入分组名称',trigger: 'blur'}]">
|
||||
|
|
@ -165,8 +165,8 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="类型" prop="type" :rules="[{required: true,message:'请选择类型',trigger: 'blur'}]">
|
||||
<el-radio-group v-model="form.dictForm.type">
|
||||
<el-radio :label="0">系统</el-radio>
|
||||
<el-radio :label="1">业务</el-radio>
|
||||
<el-radio :value="0">系统</el-radio>
|
||||
<el-radio :value="1">业务</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
tableTitle: [
|
||||
{prop:'code',label:'组织编码',align:'left'},
|
||||
{prop:'name',label:'组织名称'},
|
||||
{prop:'name',label:'组织名称'},
|
||||
{prop:'sort',label:'排序'},
|
||||
{prop:'sort',label:'组织级别'},
|
||||
{prop:'createTime',label:'创建时间'},
|
||||
{prop:'remarks',label:'描述'}
|
||||
],
|
||||
|
|
@ -126,8 +125,8 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="org-container">
|
||||
<Table :data="table.tableData" :column="table.tableTitle" :operation="table.operation" :page="false" :loading="table.loading">
|
||||
<div>
|
||||
<Table :data="table.tableData" :column="table.tableTitle" :operation="table.operation" :loading="table.loading">
|
||||
<template #search>
|
||||
<div><el-button @click="onAdd(null)" v-permission="'org:save'" type="primary">添加</el-button></div>
|
||||
</template>
|
||||
|
|
@ -138,7 +137,7 @@
|
|||
</template>
|
||||
</Table>
|
||||
<el-dialog title="组织信息" v-model="form.orgVisible" :show-close="false" width="40%">
|
||||
<el-form :model="form.orgForm" ref="formRef" :rules="rules" label-width="80px" status-icon>
|
||||
<el-form :model="form.orgForm" ref="formRef" label-width="80px" status-icon>
|
||||
<el-form-item label="名称" prop="name" :rules="[{required: true,message:'请输入名称',trigger: 'blur'}]">
|
||||
<el-input v-model="form.orgForm.name" placeholder="请输入名称" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
|
|
@ -158,8 +157,3 @@
|
|||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.org-container{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import {onMounted, reactive, ref, unref} from 'vue'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import type {FormInstance} from 'element-plus'
|
||||
import Table from '@/components/Table.vue'
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
const searchForm = reactive({
|
||||
username: null
|
||||
})
|
||||
|
||||
const table = reactive({
|
||||
loading: false,
|
||||
page: {
|
||||
|
|
@ -158,6 +157,8 @@
|
|||
form.userForm = {
|
||||
id: val.column.row.id,
|
||||
username: val.column.row.username,
|
||||
password: '',
|
||||
rePassword: '',
|
||||
nickname: val.column.row.nickname,
|
||||
type: val.column.row.type,
|
||||
phone: val.column.row.phone,
|
||||
|
|
@ -232,7 +233,7 @@
|
|||
</template>
|
||||
</Table>
|
||||
<el-dialog title="用户信息" v-model="form.userVisible" :show-close="false" width="50%">
|
||||
<el-form :model="form.userForm" ref="formRef" :rules="rules" label-width="80px" status-icon>
|
||||
<el-form :model="form.userForm" ref="formRef" label-width="80px" status-icon>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="username" :rules="[
|
||||
|
|
@ -264,16 +265,16 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="类型" prop="type" :rules="[{required: true,message:'请选择类型',trigger: 'blur'}]">
|
||||
<el-radio-group v-model="form.userForm.type">
|
||||
<el-radio :label="1">管理员</el-radio>
|
||||
<el-radio :label="2">普通用户</el-radio>
|
||||
<el-radio :value="1">管理员</el-radio>
|
||||
<el-radio :value="2">普通用户</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-radio-group v-model="form.userForm.gender">
|
||||
<el-radio :label="0">男</el-radio>
|
||||
<el-radio :label="1">女</el-radio>
|
||||
<el-radio :value="0">男</el-radio>
|
||||
<el-radio :value="1">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -306,7 +307,7 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="roleId" :rules="[{required: true,message:'请选择角色',trigger: 'change'}]">
|
||||
<el-select v-model="form.userForm.roleId" placeholder="请选角色" style="width: 100%">
|
||||
<el-option v-for="item in form.roleList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
<el-option v-for="item in form.roleList" :key="item['id']" :label="item['name']" :value="item['id']" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
|
|||
Loading…
Reference in New Issue