装备类型配置页面，特征值未完成
This commit is contained in:
itcast
parent
a5e2de9353
commit
5c9639b2b3
|
|
@ -36,7 +36,7 @@
|
|||
"url": "http://192.168.0.56:3000/bonus/Bonus-Cloud.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"axios": "0.24.0",
|
||||
"china-area-data": "^5.0.1",
|
||||
"clipboard": "2.0.8",
|
||||
|
|
|
|||
|
|
@ -49,4 +49,5 @@ export const delDevice = (ids) => {
|
|||
url: '/material-mall/device/delDevice/'+ids,
|
||||
method: 'post',
|
||||
})
|
||||
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,13 +1,15 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
||||
<!-- 查询条件卡片 -->
|
||||
<div class="card-container">
|
||||
<div class="card-header query-header">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="query-form">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限字符" prop="roleKey">
|
||||
|
|
@ -16,7 +18,6 @@
|
|||
placeholder="请输入权限字符"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
|
|
@ -45,14 +46,22 @@
|
|||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-form-item class="query-buttons">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<!-- 操作按钮和表格卡片 -->
|
||||
<div class="card-container">
|
||||
<div class="card-header operation-header">
|
||||
<el-row :gutter="10" class="mb8 operation-row">
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="action-bar">
|
||||
<!-- 操作按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
|
|
@ -62,8 +71,6 @@
|
|||
v-hasPermi="['system:role:add']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
|
|
@ -74,8 +81,6 @@
|
|||
v-hasPermi="['system:role:edit']"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
|
|
@ -86,8 +91,6 @@
|
|||
v-hasPermi="['system:role:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
|
|
@ -97,9 +100,13 @@
|
|||
v-hasPermi="['system:role:export']"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<!-- 搜索工具栏 -->
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" :selectable="checkSelectable" :row-class-name="getRowClassName">
|
||||
<el-table-column type="selection" min-width="55" align="center"/>
|
||||
|
|
@ -159,6 +166,8 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
|
|
@ -167,6 +176,13 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 添加或修改角色配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
|
|
@ -476,12 +492,9 @@ export default {
|
|||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
// 过滤掉不可选的行（虽然界面上不可选，但为了安全起见还是过滤一次）
|
||||
// 过滤掉不可选的行
|
||||
const validSelection = selection.filter(row => this.checkSelectable(row));
|
||||
|
||||
// 更新选中的roleId数组
|
||||
this.ids = validSelection.map(item => item.roleId);
|
||||
// 更新单选和多选状态
|
||||
this.single = validSelection.length !== 1;
|
||||
this.multiple = !validSelection.length;
|
||||
},
|
||||
|
|
@ -637,7 +650,6 @@ export default {
|
|||
return !(row.roleId === 1 || row.isBuiltIn === '0');
|
||||
},
|
||||
|
||||
|
||||
getRowClassName(row) {
|
||||
return !this.checkSelectable(row) ? 'disabled-row' : '';
|
||||
},
|
||||
|
|
@ -645,8 +657,79 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 查询条件卡片头部样式 */
|
||||
.query-header {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.query-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.query-form .el-form-item {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.query-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 操作按钮卡片头部样式 */
|
||||
.operation-header {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.operation-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 新增：统一的操作栏容器样式，用于将所有按钮和工具栏放在右侧 */
|
||||
.action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end; /* 关键：整体内容靠右对齐 */
|
||||
gap: 10px; /* 统一设置内部元素的间距 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.card-container .el-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 禁用行样式 */
|
||||
.disabled-row {
|
||||
background-color: #f5f7fa !important;
|
||||
color: #909399;
|
||||
|
|
@ -660,4 +743,58 @@ export default {
|
|||
.disabled-row:hover td {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1200px) {
|
||||
.query-form {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.query-form .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.query-buttons {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.operation-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 在小屏幕上，操作栏自动变为垂直排列并左对齐 */
|
||||
|
||||
|
||||
|
||||
|
||||
.action-bar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.left-buttons {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.right-toolbar-col {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pagination-container {
|
||||
padding: 15px 20px;
|
||||
margin-top: 5px;;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue