worker.bee
/
scfs-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:优化页面代码及版本升级报错处理

main
朱群锋 2025-02-11 08:57:04 +08:00
parent 15a5b4804b
commit 969d9f5d7d
8 changed files with 1008 additions and 931 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

565
src/components/Table.vue
View File

@ -1,292 +1,317 @@
<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({
loading: {
type: Boolean,
default: false
},
page: {
type: Object,
default:{
current: 1,
size: 10,
total: 0,
}
},
column: {
type: Object,
default: []
},
operation: {
type: Object,
default: {
isShow: false,
width: '220'
}
},
tableHeight: {
type: Number,
default: null
},
headerCellStyle: {
type: Object,
default:{color:'#606266', fontWeight: 700}
},
data: {
type: Array,
default: []
},
})
const emit = defineEmits([
'onSizeChange','onCurrentChange','onSelectionChange','setCellColor',
'onButtonClick','onSwitchChange',
])
const state = reactive({
maxHeight: window.innerHeight - 280,
tableHeight: prop.tableHeight,
headerCellStyle: prop.headerCellStyle,
size: 'default',
columns: prop.column.map((item:any) => {return item.prop}),
checkColAll: true,
isIndeterminate: true,
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 onSizeChange = (e:any) =>{
emit('onSizeChange', e)
const prop = defineProps({
loading: {
type: Boolean,
default: false
},
page: {
type: Object,
default: {
current: 1,
size: 10,
total: 0,
}
const onCurrentChange = (e:any) =>{
emit('onCurrentChange', e)
},
column: {
type: Object,
default: []
},
operation: {
type: Object,
default: {
isShow: false,
width: '220'
}
},
tableHeight: {
type: Number,
default: null
},
headerCellStyle: {
type: Object,
default: {color: '#606266', fontWeight: 700}
},
data: {
type: Array,
default: []
},
})
function onFind(arr:any,val:any){
if(!arr) return 'info';
return arr.find((item:any)=>{ return item.value == val}).label;
}
const emit = defineEmits([
'onSizeChange', 'onCurrentChange', 'onSelectionChange', 'setCellColor',
'onButtonClick', 'onSwitchChange',
])
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[]){
let checkedCount = value.length
state.checkColAll = checkedCount === prop.column.length
state.isIndeterminate = checkedCount > 0 && checkedCount < prop.column.length
}
const state = reactive({
maxHeight: window.innerHeight - 280,
tableHeight: prop.tableHeight,
headerCellStyle: prop.headerCellStyle,
size: 'default',
columns: prop.column.map((item: any) => {
return item.prop
}),
checkColAll: true,
isIndeterminate: true,
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)
watch(columns, (newValue, oldValue) =>{
prop.column.filter((item:any) =>{
item.isShow = newValue.indexOf(item.prop) == -1;
})
})
const onSizeChange = (e: any) => {
emit('onSizeChange', e)
}
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 onCheckColAll(val: boolean) {
const _columns = prop.column.map((item: any) => {
return item.prop
})
state.columns = val ? _columns : []
state.isIndeterminate = false
}
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) => {
prop.column.filter((item: any) => {
item.isShow = newValue.indexOf(item.prop) == -1;
})
})
</script>
<template>
<div class="table-container">
<div class="search-wrap" v-if="$slots.search">
<el-space wrap>
<slot name="search"></slot>
</el-space>
</div>
<div class="table-wrap">
<div class="header">
<el-popover placement="bottom" :width="80" trigger="click">
<template #reference>
<el-button link>
<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-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-button>
</template>
<div>
<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>
</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'}"
<div class="table-container">
<div class="search-wrap" v-if="$slots.search">
<el-space wrap>
<slot name="search"></slot>
</el-space>
</div>
<div class="table-wrap">
<div class="header">
<el-popover placement="bottom" :width="80" trigger="click">
<template #reference>
<el-button link>
<el-icon :size="20">
<Sort/>
</el-icon>
</el-button>
</template>
<div>
<el-radio-group v-model="size">
<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-button>
</template>
<div>
<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.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'}"
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>
<!-- 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>
</template>
</el-table-column>
<!-- icon图标 -->
<el-table-column v-else-if="item.type == 'icon' && !item.isShow"
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<el-icon :size="20">
<component :is="scope.row[item.prop]"></component>
</el-icon>
</template>
</el-table-column>
<!-- el-statistic -->
<el-table-column v-else-if="item.type == 'statistic' && !item.isShow"
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<el-statistic :value="scope.row[item.prop]"
<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>
<!-- 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>
</template>
</el-table-column>
<!-- icon图标 -->
<el-table-column v-else-if="item.type == 'icon' && !item.isShow"
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<el-icon :size="20">
<component :is="scope.row[item.prop]"></component>
</el-icon>
</template>
</el-table-column>
<!-- el-statistic -->
<el-table-column v-else-if="item.type == 'statistic' && !item.isShow"
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<el-statistic :value="scope.row[item.prop]"
:precision="item.option.precision"
:formatter="item.option.formatter"
:prefix="item.option.prefix"
:suffix="item.option.suffix"/>
</template>
</el-table-column>
<!-- el-image -->
<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"/>
</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 />
</template>
</el-table-column>
<!-- el-tag -->
<el-table-column v-else-if="item.type == 'tag' && !item.isShow" show-overflow-tooltip
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<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]}}
</el-tag>
</template>
</el-table-column>
<!-- el-button -->
<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>
</template>
</el-table-column>
<!-- el-switch -->
<el-table-column v-else-if="item.type == 'switch' && !item.isShow" show-overflow-tooltip
: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"
:size="item.option.size"
v-model="scope.row[item.prop]"
></el-switch>
</template>
</el-table-column>
<!-- el-progress -->
<el-table-column v-else-if="item.type == 'progress' && !item.isShow" show-overflow-tooltip
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<el-progress :percentage="scope.row[item.alias==null?item.prop:item.alias]"
:status="item.option.status"
:color="item.option.color"/>
</template>
</el-table-column>
<!-- 字典值 -->
<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>
</template>
</el-table-column>
<!-- 其他数据列 -->
<el-table-column v-else-if="!item.isShow" show-overflow-tooltip
:prop="item.alias==null?item.prop:item.alias"
:label="item.label"
:align="item.align != null ? item.align : 'center'"
:width="item.width"
:fixed="item.fixed"
:formatter="item.function">
</el-table-column>
</template>
<!-- 自定义插槽 -->
<el-table-column v-if="operation.isShow" fixed="right" label="操作" align="center" :width="operation.width">
<template #default="scope">
<slot name="column" v-bind:column="scope"></slot>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-wrap" v-if="page">
<el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:current-page="page.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="page.size"
:total="page.total"/>
</div>
</template>
</el-table-column>
<!-- el-image -->
<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"/>
</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/>
</template>
</el-table-column>
<!-- el-tag -->
<el-table-column v-else-if="item.type == 'tag' && !item.isShow" show-overflow-tooltip
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<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] }}
</el-tag>
</template>
</el-table-column>
<!-- el-button -->
<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>
</template>
</el-table-column>
<!-- el-switch -->
<el-table-column v-else-if="item.type == 'switch' && !item.isShow" show-overflow-tooltip
: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"
:size="item.option.size"
v-model="scope.row[item.prop]"
></el-switch>
</template>
</el-table-column>
<!-- el-progress -->
<el-table-column v-else-if="item.type == 'progress' && !item.isShow" show-overflow-tooltip
:label="item.label" :align="item.align != null ? item.align : 'center'" :width="item.width">
<template #default="scope">
<el-progress :percentage="scope.row[item.alias==null?item.prop:item.alias]"
:status="item.option.status"
:color="item.option.color"/>
</template>
</el-table-column>
<!-- 字典值 -->
<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>
</template>
</el-table-column>
<!-- 其他数据列 -->
<el-table-column v-else-if="!item.isShow" show-overflow-tooltip
:prop="item.alias==null?item.prop:item.alias"
:label="item.label"
:align="item.align != null ? item.align : 'center'"
:width="item.width"
:fixed="item.fixed"
:formatter="item.function">
</el-table-column>
</template>
<!-- 自定义插槽 -->
<el-table-column v-if="operation.isShow" fixed="right" label="操作" align="center" :width="operation.width">
<template #default="scope">
<slot name="column" v-bind:column="scope"></slot>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-wrap" v-if="page">
<el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:current-page="page.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="page.size"
:total="page.total"/>
</div>
</div>
</template>
<style scoped lang="scss">
.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{
padding: 1rem 0;
.header{
float: right;
padding-bottom: 0.4rem;
}
}
.pagination-wrap{
padding-bottom: 0.2rem;
float: right;
}
}
.table-container {
.search-wrap {
// background: var(--bg1);
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
padding: 1rem;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 5px;
height: 1px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #909399;
border-radius: 5px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 5px;
background: #ededed;
.table-wrap {
padding: 1rem 0;
.header {
float: right;
padding-bottom: 0.4rem;
}
}
.pagination-wrap {
padding-bottom: 0.2rem;
float: right;
}
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 5px;
height: 1px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #909399;
border-radius: 5px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 5px;
background: #ededed;
}
</style>

184
src/components/amis/AmisComponent.vue
View File

@ -1,113 +1,115 @@
<template>
<div id="amisid" ref="boxRef"></div>
<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({
formid: {
type: String,
default: () => {
return ''
}
const props = defineProps({
formid: {
type: String,
default: () => {
return ''
}
},
formjson: {
type: Object,
default: () => {
return {}
}
}
})
// @ts-ignore
const amis = amisRequire('amis/embed');
const boxRef = ref(null)
watch(() => props.formjson, (data) => {
if (Object.keys(data).length !== 0) {
onRendering(data)
}
}, {immediate: true, deep: true}
)
function onRendering(data: any) {
// let amisScoped = amis.embed('#amisid', data);
let theme = 'cxd'
let amisScoped = amis.embed(
'#amisid',
data,
{
updateLocation: (to, replace) => {
},
formjson: {
type: Object,
default: () => {
return {}
}
}
})
// @ts-ignore
const amis = amisRequire('amis/embed');
const boxRef = ref(null)
watch(()=> props.formjson, (data)=>{
onRendering(data)
},
{immediate: true,deep: true}
)
function onRendering(data:any){
// let amisScoped = amis.embed('#amisid', data);
let theme = 'cxd'
let amisScoped = amis.embed(
'#amisid',
data,
{
updateLocation: (to, replace) => {},
},
{
// 下面三个接口必须实现
fetcher: ({
},
{
// 下面三个接口必须实现
fetcher: ({
url, // 接口地址
method, // 请求方法 get、post、put、delete
data, // 请求数据
responseType,
config, // 其他配置
headers ,// 请求头
headers,// 请求头
updateLocation
}) => {
config = config || {};
config.withCredentials = true;
}) => {
config = config || {};
config.withCredentials = true;
// 设置接口地址
config.baseURL = import.meta.env.VITE_APP_BASE_API;
// 设置接口地址
config.baseURL = import.meta.env.VITE_APP_BASE_API;
responseType && (config.responseType = responseType);
responseType && (config.responseType = responseType);
if (config.cancelExecutor) {
config.cancelToken = new (axios).CancelToken(
config.cancelExecutor
);
}
if (config.cancelExecutor) {
config.cancelToken = new (axios).CancelToken(
config.cancelExecutor
);
}
config.headers = headers || {};
config.headers = headers || {};
// 设置token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['token'] = getToken()
}
// 设置token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['token'] = getToken()
}
if (method !== 'post' && method !== 'put' && method !== 'patch') {
if (data) {
config.params = data;
}
return (axios )[method](url, config);
} else if (data && data instanceof FormData) {
config.headers = config.headers || {};
config.headers['Content-Type'] = 'multipart/form-data';
} else if (data && typeof data !== 'string' && !(data instanceof Blob) && !(data instanceof ArrayBuffer)) {
data = JSON.stringify(data);
config.headers = config.headers || {};
config.headers['Content-Type'] = 'application/json';
}
return (axios )[method](url, data, config);
},
isCancel: (value) => (axios ).isCancel(value),
copy: content => {
copy(content);
ElMessage.success('内容已复制到粘贴板');
},
theme
if (method !== 'post' && method !== 'put' && method !== 'patch') {
if (data) {
config.params = data;
}
)
}
return (axios)[method](url, config);
} else if (data && data instanceof FormData) {
config.headers = config.headers || {};
config.headers['Content-Type'] = 'multipart/form-data';
} else if (data && typeof data !== 'string' && !(data instanceof Blob) && !(data instanceof ArrayBuffer)) {
data = JSON.stringify(data);
config.headers = config.headers || {};
config.headers['Content-Type'] = 'application/json';
}
return (axios)[method](url, data, config);
},
isCancel: (value) => (axios).isCancel(value),
copy: content => {
copy(content);
ElMessage.success('内容已复制到粘贴板');
},
theme
}
)
}
</script>
<style scoped>
</style>

52
src/components/layout/table/TbNavTabs.vue
View File

@ -85,33 +85,33 @@ 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>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="CircleCloseFilled" @click="onCloseCurrentTab">关闭当前</el-dropdown-item>
<el-dropdown-item icon="CircleClose" @click="onCloseOtherTab">关闭其他</el-dropdown-item>
<el-dropdown-item icon="CloseBold" @click="onCloseAllTab">关闭所有</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<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>
<el-dropdown-item icon="CircleClose" @click="onCloseOtherTab">关闭其他</el-dropdown-item>
<el-dropdown-item icon="CloseBold" @click="onCloseAllTab">关闭所有</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-tab-pane>
</el-tabs>
</div>
</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>
</template>
<style lang="scss">
.tabs-menu {

7
src/views/home/Home.vue
View File

@ -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>

1058
src/views/lowcode/LcPages.vue
View File

File diff suppressed because it is too large Load Diff

8
src/views/system/Dict.vue
View File

@ -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
src/views/system/Org.vue
View File

@ -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>

17
src/views/system/User.vue
View File

@ -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>