Web/admin-govern
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

修改测试bug 优化页面

Browse Source
This commit is contained in:
guanj
2026-01-04 14:55:31 +08:00
parent cc0f8bc8b6
commit a765cdf9ee
68 changed files with 5396 additions and 3096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/setting/dictionary/component/add.vue
View File

@@ -47,7 +47,7 @@
</el-checkbox-group>
</el-form-item>
<el-form-item class="top" label="组件排序" prop="sort">
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
<el-input v-model.number="form.sort" placeholder="请输入组件排序"></el-input>
</el-form-item>
</el-form>
<div style="width: 600px; height: 390px; overflow: hidden">
@@ -70,7 +70,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
<el-button type="primary" @click="submit">保存</el-button>
</span>
</template>
</el-dialog>
@@ -112,7 +112,7 @@ onMounted(() => {
customDeptOption.value = dictData.getBasicData('System_Type')
customDeptOption.value.forEach((item: any) => {
getFatherComponent({ systemType: item.id }).then(res => {
item.children = res.data
item.children = res.data.filter(item => item.name != '无')
})
})
})
@@ -133,36 +133,47 @@ const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
let url = ''
await html2canvas(document.querySelector('.GridLayout'), {
scale: 2
}).then(canvas => {
url = canvas.toDataURL('image/png')
})
if (title.value == '新增组件') {
await componentAdd({
...form.value,
systemType: form.value.system[0],
pid: form.value.system[1],
image: url
}).then(res => {
ElMessage.success('新增成功!')
emit('submit')
cancel()
ElMessage.info('正在保存请稍等!')
setTimeout(async () => {
await html2canvas(document.querySelector('.GridLayout'), {
// scale: 2
scale: 1, // 降低缩放比例（2倍会让像素量翻倍，优先降到1）
useCORS: false, // 非跨域图片关闭CORS检测（减少网络请求）
logging: false, // 关闭日志输出（减少控制台开销）
letterRendering: true, // 优化文字渲染性能
allowTaint: true, // 允许跨域图片污染画布（避免额外校验）
removeContainer: true, // 自动清理生成的临时容器
ignoreElements: el => {
// 忽略不可见/非关键元素（比如隐藏的弹窗、装饰性元素）
return el.style.display === 'none' || el.classList.contains('ignore-screenshot')
}
}).then(canvas => {
url = canvas.toDataURL('image/png')
})
} else {
await componentEdit({
...form.value,
systemType: form.value.system[0],
pid: form.value.system[1],
image: url
}).then(res => {
ElMessage.success('修改成功!')
emit('submit')
cancel()
})
}
if (title.value == '新增组件') {
await componentAdd({
...form.value,
systemType: form.value.system[0],
pid: form.value.system[1],
image: url
}).then(res => {
ElMessage.success('新增成功!')
emit('submit')
cancel()
})
} else {
await componentEdit({
...form.value,
systemType: form.value.system[0],
pid: form.value.system[1],
image: url
}).then(res => {
ElMessage.success('修改成功!')
emit('submit')
cancel()
})
}
}, 500)
}
})
}

32
src/views/setting/dictionary/component/addTree.vue
View File

@@ -2,8 +2,8 @@
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
<div style="display: flex">
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
<el-form-item class="top" label="上级树">
<el-cascader
<el-form-item class="top" label="上级树" prop="system">
<!-- <el-cascader
v-model="form.system"
:options="customDeptOption"
:props="props"
@@ -11,14 +11,22 @@
filterable
placeholder="请选择上级树"
style="width: 100%"
/>
/> -->
<el-select v-model="form.system" placeholder="请选择上级树" style="width: 100%">
<el-option
v-for="item in customDeptOption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item class="top" label="树名称" prop="name">
<el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
</el-form-item>
<el-form-item class="top" label="树排序" prop="sort">
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
<el-input v-model.number="form.sort" placeholder="请输入排序"></el-input>
</el-form-item>
</el-form>
</div>
@@ -48,10 +56,9 @@ const formRef = ref()
const form = ref<anyObj>({
name: '',
sort: 100,
system: [],
system: '',
timeKey: '3',
code: 'base',
code: 'base'
})
const props = { label: 'name', value: 'id', checkStrictly: true }
const rules = {
@@ -69,9 +76,10 @@ const open = (text: string, data?: anyObj) => {
dialogVisible.value = true
if (data) {
let Data = JSON.parse(JSON.stringify(data))
form.value.system = Data.systemType
form.value.system = Data.systemType//[]
form.value.name = Data.name
form.value.sort = Data.sort
form.value.id = Data.id
}
}
// 查询父节点
@@ -113,8 +121,8 @@ const submit = () => {
if (title.value == '新增树') {
await componentAdd({
...form.value,
systemType: form.value.system[0],
pid: form.value.system?.at(-1)
systemType: form.value.system,
pid: '0' //form.value.system.length == 1 ? '0' : form.value.system
}).then(res => {
ElMessage.success('新增成功!')
emit('submit')
@@ -123,8 +131,8 @@ const submit = () => {
} else {
await componentEdit({
...form.value,
systemType: form.value.system[0],
pid: form.value.system[1]
systemType: form.value.system,
pid: '0'//form.value.system.length == 1 ? '0' : form.value.system
}).then(res => {
ElMessage.success('修改成功!')
emit('submit')

239
src/views/setting/dictionary/component/index.vue
View File

@@ -6,11 +6,81 @@
<el-button type="primary" @click="add" icon="el-icon-Plus">新增组件</el-button>
</template>
</TableHeader>
<Table
<!-- <Table
ref="tableRef"
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
:scroll-y="{ enabled: true }"
/>
/> -->
<el-tabs v-model="tableName" type="border-card" @tab-change="changeTab">
<el-tab-pane v-for="item in tableStore.table.data" :key="item.name" :label="item.name" :name="item.name">
<el-tabs v-model="tableName1" tab-position="left">
<el-tab-pane v-for="k in item?.children" :key="k.name" :label="k.name" :name="k.name">
<template #label>
<span class="custom-tabs-label">
<span>{{ k.name }}</span>
<!-- <el-icon><Edit /></el-icon> -->
<el-button
type="primary"
icon="el-icon-Edit"
link
class="ml10"
@click="editTree(k, 0)"
></el-button>
<el-button
type="danger"
icon="el-icon-Delete"
link
class="ml0"
@click="del(k)"
></el-button>
</span>
</template>
<div :style="height" style="overflow-y: auto; overflow-x: hidden">
<el-row :gutter="10" class="pl5 pr5 pt5">
<el-col :span="6" v-for="component in k.children" :key="component.id" class="mb10">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span style="display: flex; align-items: center">
{{ component.name }}
</span>
<div style="height: 32px">
<div style="display: flex; justify-content: end">
<el-button
icon="el-icon-Edit"
style="padding: 3px 0; color: blue"
type="text"
@click="editTree(component, 1)"
>
编辑
</el-button>
<el-button
icon="el-icon-Delete"
style="padding: 3px 0; color: red"
type="text"
@click="del(component)"
>
删除
</el-button>
</div>
</div>
</div>
<!-- <img v-if="component.image" :src="component.image" class="image xiaoshou" /> -->
<el-image
style="width: 100%; height: 180px"
:src="component.image"
:preview-src-list="[component.image]"
show-progress
:initial-index="4"
/>
</el-card>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
<Add ref="addRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
<!-- 新增树 -->
<Tree ref="treeRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
@@ -21,18 +91,23 @@ import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import Add from './add.vue'
import Tree from './addTree.vue'
import { deleteSubassembly } from '@/api/user-boot/dept'
import { Edit, Delete } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'component'
})
const addRef = ref()
const addFlag = ref(false)
const tableRef = ref()
const height = ref(mainHeight(140))
const treeRef = ref()
const tableName = ref('')
const tableName1 = ref('')
const treeData: any = ref([])
const tableStore = new TableStore({
url: '/user-boot/component/componentTree',
@@ -61,7 +136,7 @@ const tableStore = new TableStore({
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
disabled: row => row.systemType == null,
click: row => {
addFlag.value = true
setTimeout(() => {
@@ -82,7 +157,7 @@ const tableStore = new TableStore({
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
disabled: row => row.systemType == null,
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
@@ -90,11 +165,10 @@ const tableStore = new TableStore({
title: '确定删除？'
},
click: row => {
deleteSubassembly({ id: row.id }).then(() => {
ElMessage.success('删除成功!')
tableStore.index()
})
deleteSubassembly({ id: row.id }).then(() => {
ElMessage.success('删除成功!')
tableStore.index()
})
}
}
]
@@ -102,16 +176,22 @@ const tableStore = new TableStore({
],
loadCallback: () => {
addFlag.value = false
setTimeout(() => {
tableRef.value?.getRef()?.setAllTreeExpand(true)
}, 0)
tableStore.table.data.forEach((item: any) => {
item.state = 0
})
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
tableStore.table.data = treeData.value
tableName.value = tableName.value == '' ? tableStore.table.data[0].name : tableName.value
tableName1.value = tableName1.value == '' ? tableStore.table.data[0].children[0].name : tableName1.value
// setTimeout(() => {
// tableRef.value?.getRef()?.setAllTreeExpand(true)
// }, 0)
// tableStore.table.data.forEach((item: any) => {
// item.state = 0
// })
// treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
// tableStore.table.data = treeData.value
}
})
const changeTab = (e: any) => {
console.log('🚀 ~ changeTab ~ e:', e)
tableName1.value = tableStore.table.data.filter(item => item.name == e)[0].children[0].name
}
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
@@ -132,6 +212,32 @@ const tree2List = (list: any, id: any) => {
// 返回结果数组
return arr
}
// 修改
const editTree = (row: any, num: number) => {
addFlag.value = true
setTimeout(() => {
if (num == 0) {
treeRef.value?.open('修改树', row)
} else {
addRef.value?.open('修改组件', row)
}
}, 100)
}
// 删除
const del = (row: any) => {
ElMessageBox.confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteSubassembly({ id: row.id }).then(() => {
ElMessage.success('删除成功!')
tableStore.index()
})
})
.catch(() => {})
}
// 新增
const add = () => {
addFlag.value = true
@@ -154,3 +260,100 @@ onMounted(() => {
tableStore.index()
})
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
span {
font-size: 16px;
}
.item {
margin-bottom: 18px;
}
.image {
display: block;
width: 100%;
height: 180px;
}
.clearfix::before,
.clearfix::after {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
.box-card {
width: 100%;
// border: 1px solid #000;
box-shadow: var(--el-box-shadow-light);
}
.xiaoshou {
cursor: pointer;
}
.setstyle {
min-height: 200px;
padding: 0 !important;
margin: 0;
overflow: auto;
cursor: default !important;
}
.color {
color: var(--el-color-primary);
}
:deep(.el-select-dropdown__wrap) {
max-height: 300px;
}
:deep(.el-tree) {
padding-top: 15px;
padding-left: 10px;
// 不可全选样式
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
}
:deep(.el-card__header) {
padding: 13px 20px;
height: 44px;
}
:deep(.el-card__body) {
padding: 10px;
}
.table-pagination {
height: 58px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
border-left: 1px solid #e4e7e9;
border-right: 1px solid #e4e7e9;
border-bottom: 1px solid #e4e7e9;
}
:deep(.el-pagination__sizes) {
.el-select {
min-width: 128px;
}
}
</style>