feat(AppAccountConfigManage): 优化认证材料对话框样式和功能- 调整对话框宽度为 50vw,使界面更加响应式

- 为删除按钮添加 v-if 指令,仅在没有子节点时显示
- 为删除按钮添加 del 类,以应用特定样式
- 在 utils.js 中添加 $isEmpty函数,用于检查对象是否为空
This commit is contained in:
aixianling
2025-01-07 10:17:59 +08:00
parent d39650eca5
commit 95689baff9
2 changed files with 26 additions and 16 deletions

View File

@@ -100,7 +100,7 @@ export default {
</template>
</el-table-column>
</ai-table>
<ai-dialog v-model="dialog" title="认证材料" width="500px" @close="userId=''"
<ai-dialog v-model="dialog" title="认证材料" width="50vw" @close="userId=''"
@open="getTreeData" customFooter>
<el-button class="mar-b8" type="primary" @click="createNode(treeData)">新增根节点</el-button>
<el-tree :data="treeData" :props="{label:'name'}" default-expand-all>
@@ -108,7 +108,7 @@ export default {
<div class="flex" style="width: 100%">
<span class="fill" v-text="node.label"/>
<el-button size="mini" type="text" @click="createNode(data)">增加子节点</el-button>
<el-button size="mini" type="text" @click="handleDelete(data)">删除</el-button>
<el-button size="mini" type="text" @click="handleDelete(data)" v-if="$isEmpty(data.children)" class="del">删除</el-button>
</div>
</template>
</el-tree>
@@ -120,5 +120,9 @@ export default {
<style scoped lang="scss">
.AppAccountConfigManage {
height: 100%;
.el-button .del {
color: #f46;
}
}
</style>

View File

@@ -15,12 +15,12 @@ import $reg from "./regular"
*/
const addChild = (parent, pending, config) => {
let conf = {
key: 'id',
parent: 'parentId',
children: 'children',
...config
},
doBeforeCount = pending.length
key: 'id',
parent: 'parentId',
children: 'children',
...config
},
doBeforeCount = pending.length
for (let i = pending.length - 1; i >= 0; i--) {
let e = pending[i]
if (e[conf.parent] == parent[conf.key]) {
@@ -58,7 +58,7 @@ const $decimalCalc = (...arr) => {
return ('' + e).length - index
})
let maxDecimal = Math.max(...decimalLengthes),
precision = Math.pow(10, maxDecimal)
precision = Math.pow(10, maxDecimal)
// 计算
let intArr = arr.map(e => (Number(e) || 0) * precision)
// 返回计算值
@@ -86,10 +86,10 @@ const $colorUtils = {
if (color.length == 4) {
// 检测诸如#FFF简写格式
color =
'#' +
color.charAt(1).repeat(2) +
color.charAt(2).repeat(2) +
color.charAt(3).repeat(2)
'#' +
color.charAt(1).repeat(2) +
color.charAt(2).repeat(2) +
color.charAt(3).repeat(2)
}
hex = parseInt(color.slice(1), 16)
}
@@ -170,8 +170,8 @@ export default {
},
$dateFormat: (time, format) => {
return $moment(time)
.format(format || 'YYYY-MM-DD')
.replace('Invalid Date', '')
.format(format || 'YYYY-MM-DD')
.replace('Invalid Date', '')
},
$copy,
$download: (url, name) => {
@@ -190,7 +190,7 @@ export default {
$arr2tree: (list, config = {}) => {
let result = []
const {key = 'id', parent = 'parentId', children = 'children'} = config, itemMap = {},
ids = list?.map(e => `#${e[key]}#`)?.toString()
ids = list?.map(e => `#${e[key]}#`)?.toString()
for (const e of list) {
const id = e[key], pid = e[parent]
itemMap[id] = {...e, [children]: [itemMap[id]?.[children]].flat().filter(Boolean)}
@@ -230,5 +230,11 @@ export default {
}
return max
} else return 0
},
$isEmpty(obj) {
if (obj === null || obj === undefined) return true;
if (typeof obj === 'string' && obj.trim() === '') return true;
if (Array.isArray(obj) && obj.length === 0) return true;
return typeof obj === 'object' && Object.keys(obj).length === 0;
}
}