装备类型配置页面，特征值未完成
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"
|
"url": "http://192.168.0.56:3000/bonus/Bonus-Cloud.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "^0.4.0",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
"china-area-data": "^5.0.1",
|
"china-area-data": "^5.0.1",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
|
|
|
||||||
|
|
@ -49,4 +49,5 @@ export const delDevice = (ids) => {
|
||||||
url: '/material-mall/device/delDevice/'+ids,
|
url: '/material-mall/device/delDevice/'+ids,
|
||||||
method: 'post',
|
method: 'post',
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,171 +1,187 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
<!-- 查询条件卡片 -->
|
||||||
<el-form-item label="角色名称" prop="roleName">
|
<div class="card-container">
|
||||||
<el-input
|
<div class="card-header query-header">
|
||||||
v-model="queryParams.roleName"
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="query-form">
|
||||||
placeholder="请输入角色名称"
|
<el-form-item label="角色名称" prop="roleName">
|
||||||
clearable
|
<el-input
|
||||||
style="width: 240px"
|
v-model="queryParams.roleName"
|
||||||
@keyup.enter.native="handleQuery"
|
placeholder="请输入角色名称"
|
||||||
/>
|
clearable
|
||||||
</el-form-item>
|
style="width: 240px"
|
||||||
<el-form-item label="权限字符" prop="roleKey">
|
/>
|
||||||
<el-input
|
</el-form-item>
|
||||||
v-model="queryParams.roleKey"
|
<el-form-item label="权限字符" prop="roleKey">
|
||||||
placeholder="请输入权限字符"
|
<el-input
|
||||||
clearable
|
v-model="queryParams.roleKey"
|
||||||
style="width: 240px"
|
placeholder="请输入权限字符"
|
||||||
@keyup.enter.native="handleQuery"
|
clearable
|
||||||
/>
|
style="width: 240px"
|
||||||
</el-form-item>
|
/>
|
||||||
<el-form-item label="状态" prop="status">
|
</el-form-item>
|
||||||
<el-select
|
<el-form-item label="状态" prop="status">
|
||||||
v-model="queryParams.status"
|
<el-select
|
||||||
placeholder="角色状态"
|
v-model="queryParams.status"
|
||||||
clearable
|
placeholder="角色状态"
|
||||||
style="width: 240px"
|
clearable
|
||||||
>
|
style="width: 240px"
|
||||||
<el-option
|
>
|
||||||
v-for="dict in dict.type.sys_normal_disable"
|
<el-option
|
||||||
:key="dict.value"
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
:label="dict.label"
|
:key="dict.value"
|
||||||
:value="dict.value"
|
:label="dict.label"
|
||||||
/>
|
:value="dict.value"
|
||||||
</el-select>
|
/>
|
||||||
</el-form-item>
|
</el-select>
|
||||||
<el-form-item label="创建时间">
|
</el-form-item>
|
||||||
<el-date-picker
|
<el-form-item label="创建时间">
|
||||||
v-model="dateRange"
|
<el-date-picker
|
||||||
style="width: 240px"
|
v-model="dateRange"
|
||||||
value-format="yyyy-MM-dd"
|
style="width: 240px"
|
||||||
type="daterange"
|
value-format="yyyy-MM-dd"
|
||||||
range-separator="-"
|
type="daterange"
|
||||||
start-placeholder="开始日期"
|
range-separator="-"
|
||||||
end-placeholder="结束日期"
|
start-placeholder="开始日期"
|
||||||
></el-date-picker>
|
end-placeholder="结束日期"
|
||||||
</el-form-item>
|
></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-refresh" size="mini" @click="resetQuery">重置</el-button>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||||
</el-form-item>
|
<el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
<!-- 操作按钮和表格卡片 -->
|
||||||
<el-col :span="1.5">
|
<div class="card-container">
|
||||||
<el-button
|
<div class="card-header operation-header">
|
||||||
type="primary"
|
<el-row :gutter="10" class="mb8 operation-row">
|
||||||
plain
|
|
||||||
icon="el-icon-plus"
|
<el-col :span="24">
|
||||||
size="mini"
|
<div class="action-bar">
|
||||||
@click="handleAdd"
|
<!-- 操作按钮 -->
|
||||||
v-hasPermi="['system:role:add']"
|
<el-button
|
||||||
>新增
|
type="primary"
|
||||||
</el-button>
|
plain
|
||||||
</el-col>
|
icon="el-icon-plus"
|
||||||
<el-col :span="1.5">
|
size="mini"
|
||||||
<el-button
|
@click="handleAdd"
|
||||||
type="success"
|
v-hasPermi="['system:role:add']"
|
||||||
plain
|
>新增
|
||||||
icon="el-icon-edit"
|
</el-button>
|
||||||
size="mini"
|
<el-button
|
||||||
:disabled="single"
|
type="success"
|
||||||
@click="handleUpdate"
|
plain
|
||||||
v-hasPermi="['system:role:edit']"
|
icon="el-icon-edit"
|
||||||
>修改
|
size="mini"
|
||||||
</el-button>
|
:disabled="single"
|
||||||
</el-col>
|
@click="handleUpdate"
|
||||||
<el-col :span="1.5">
|
v-hasPermi="['system:role:edit']"
|
||||||
<el-button
|
>修改
|
||||||
type="danger"
|
</el-button>
|
||||||
plain
|
<el-button
|
||||||
icon="el-icon-delete"
|
type="danger"
|
||||||
size="mini"
|
plain
|
||||||
:disabled="multiple"
|
icon="el-icon-delete"
|
||||||
@click="handleDelete"
|
size="mini"
|
||||||
v-hasPermi="['system:role:remove']"
|
:disabled="multiple"
|
||||||
>删除
|
@click="handleDelete"
|
||||||
</el-button>
|
v-hasPermi="['system:role:remove']"
|
||||||
</el-col>
|
>删除
|
||||||
<el-col :span="1.5">
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="warning"
|
type="warning"
|
||||||
plain
|
plain
|
||||||
icon="el-icon-download"
|
icon="el-icon-download"
|
||||||
size="mini"
|
size="mini"
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
v-hasPermi="['system:role:export']"
|
v-hasPermi="['system:role:export']"
|
||||||
>导出
|
>导出
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-col>
|
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
<!-- 搜索工具栏 -->
|
||||||
</el-row>
|
<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"/>
|
||||||
|
<el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/>
|
||||||
|
<el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150"/>
|
||||||
|
<el-table-column label="权限字符" align="center" prop="roleKey" :show-overflow-tooltip="true" min-width="150"/>
|
||||||
|
<el-table-column label="显示顺序" align="center" prop="roleSort" min-width="100"/>
|
||||||
|
<el-table-column label="状态" align="center" min-width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-switch
|
||||||
|
v-model="scope.row.status"
|
||||||
|
active-value="0"
|
||||||
|
inactive-value="1"
|
||||||
|
@change="handleStatusChange(scope.row)"
|
||||||
|
></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.isBuiltIn !== '0'">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['system:role:edit']"
|
||||||
|
>修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['system:role:remove']"
|
||||||
|
>删除
|
||||||
|
</el-button>
|
||||||
|
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
|
||||||
|
v-hasPermi="['system:role:edit']"
|
||||||
|
>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
|
||||||
|
v-hasPermi="['system:role:edit']"
|
||||||
|
>数据权限
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
|
||||||
|
v-hasPermi="['system:role:edit']"
|
||||||
|
>分配用户
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</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"/>
|
|
||||||
<el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/>
|
|
||||||
<el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150"/>
|
|
||||||
<el-table-column label="权限字符" align="center" prop="roleKey" :show-overflow-tooltip="true" min-width="150"/>
|
|
||||||
<el-table-column label="显示顺序" align="center" prop="roleSort" min-width="100"/>
|
|
||||||
<el-table-column label="状态" align="center" min-width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-switch
|
|
||||||
v-model="scope.row.status"
|
|
||||||
active-value="0"
|
|
||||||
inactive-value="1"
|
|
||||||
@change="handleStatusChange(scope.row)"
|
|
||||||
></el-switch>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.isBuiltIn !== '0'">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="text"
|
|
||||||
icon="el-icon-edit"
|
|
||||||
@click="handleUpdate(scope.row)"
|
|
||||||
v-hasPermi="['system:role:edit']"
|
|
||||||
>修改
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="text"
|
|
||||||
icon="el-icon-delete"
|
|
||||||
@click="handleDelete(scope.row)"
|
|
||||||
v-hasPermi="['system:role:remove']"
|
|
||||||
>删除
|
|
||||||
</el-button>
|
|
||||||
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
|
|
||||||
v-hasPermi="['system:role:edit']"
|
|
||||||
>
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
|
|
||||||
v-hasPermi="['system:role:edit']"
|
|
||||||
>数据权限
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
|
|
||||||
v-hasPermi="['system:role:edit']"
|
|
||||||
>分配用户
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total>0"
|
|
||||||
:total="total"
|
|
||||||
:page.sync="queryParams.pageNum"
|
|
||||||
:limit.sync="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 添加或修改角色配置对话框 -->
|
<!-- 添加或修改角色配置对话框 -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||||
|
|
@ -476,15 +492,12 @@ export default {
|
||||||
},
|
},
|
||||||
// 多选框选中数据
|
// 多选框选中数据
|
||||||
handleSelectionChange(selection) {
|
handleSelectionChange(selection) {
|
||||||
// 过滤掉不可选的行（虽然界面上不可选，但为了安全起见还是过滤一次）
|
// 过滤掉不可选的行
|
||||||
const validSelection = selection.filter(row => this.checkSelectable(row));
|
const validSelection = selection.filter(row => this.checkSelectable(row));
|
||||||
|
|
||||||
// 更新选中的roleId数组
|
|
||||||
this.ids = validSelection.map(item => item.roleId);
|
this.ids = validSelection.map(item => item.roleId);
|
||||||
// 更新单选和多选状态
|
|
||||||
this.single = validSelection.length !== 1;
|
this.single = validSelection.length !== 1;
|
||||||
this.multiple = !validSelection.length;
|
this.multiple = !validSelection.length;
|
||||||
},
|
},
|
||||||
// 更多操作触发
|
// 更多操作触发
|
||||||
handleCommand(command, row) {
|
handleCommand(command, row) {
|
||||||
switch (command) {
|
switch (command) {
|
||||||
|
|
@ -637,7 +650,6 @@ export default {
|
||||||
return !(row.roleId === 1 || row.isBuiltIn === '0');
|
return !(row.roleId === 1 || row.isBuiltIn === '0');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
getRowClassName(row) {
|
getRowClassName(row) {
|
||||||
return !this.checkSelectable(row) ? 'disabled-row' : '';
|
return !this.checkSelectable(row) ? 'disabled-row' : '';
|
||||||
},
|
},
|
||||||
|
|
@ -645,8 +657,79 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</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 {
|
.disabled-row {
|
||||||
background-color: #f5f7fa !important;
|
background-color: #f5f7fa !important;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
|
|
@ -660,4 +743,58 @@ export default {
|
||||||
.disabled-row:hover td {
|
.disabled-row:hover td {
|
||||||
background-color: #f5f7fa !important;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue