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

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>