234 lines
6.3 KiB
Vue
234 lines
6.3 KiB
Vue
<template>
|
|
<el-tabs v-model="activeName" @tab-click="handleClick" class="app-container">
|
|
<el-tab-pane label="物资配置" name="first">
|
|
<div>
|
|
<div class="section">
|
|
<el-header>库管员配置</el-header>
|
|
<el-main>
|
|
<el-checkbox-group v-model="selectedValues" class="checkbox-group">
|
|
<el-checkbox
|
|
v-for="item in options"
|
|
:key="item.roleId"
|
|
:label="item.roleId"
|
|
:value="item.roleId"
|
|
:checked="item.check"
|
|
class="checkbox-item">
|
|
{{ item.roleKey }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-button
|
|
type="success"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleQuery"
|
|
>保存库管员配置</el-button>
|
|
</el-main>
|
|
</div>
|
|
<!-- <div class="section">
|
|
<el-header>维修员配置</el-header>
|
|
<el-main>
|
|
<el-checkbox-group v-model="selectedValues" class="checkbox-group">
|
|
<el-checkbox
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.id"
|
|
:value="item.id"
|
|
:checked="item.check"
|
|
class="checkbox-item">
|
|
{{ item.name }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-button
|
|
type="success"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleQuery"
|
|
>保存维修员配置</el-button
|
|
>
|
|
</el-main>
|
|
</div> -->
|
|
</div>
|
|
</el-tab-pane>
|
|
<!-- <el-tab-pane label="新购配置" name="second" >
|
|
<div>
|
|
<div class="app-container">
|
|
<h4 class="form-header h4">库管员配置</h4>
|
|
<el-main>
|
|
<el-checkbox-group v-model="selectedValues">
|
|
<el-checkbox
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.id"
|
|
:value="item.id"
|
|
:checked="item.check"
|
|
class="checkbox-item">
|
|
{{ item.name }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleQuery"
|
|
>保存库管员配置</el-button
|
|
>
|
|
</el-main>
|
|
</div>
|
|
<div class="app-container">
|
|
<h4 class="form-header h4">维修员配置</h4>
|
|
<el-main>
|
|
<el-checkbox-group v-model="selectedValues">
|
|
<el-checkbox
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.id"
|
|
:value="item.id"
|
|
:checked="item.check"
|
|
class="checkbox-item">
|
|
{{ item.name }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-button type="primary" icon="el-icon-plus" size="mini"
|
|
@click="handleQuery">保存维修员2配置</el-button>
|
|
</el-main>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane> -->
|
|
</el-tabs>
|
|
</template>
|
|
|
|
<script>
|
|
import { listRole, } from "@/api/system/role";
|
|
import {
|
|
getKeeperIds
|
|
} from "@/api/ma/typeConfigKeeper";
|
|
export default {
|
|
name: 'siteConfig',
|
|
data() {
|
|
return {
|
|
activeName: 'first',
|
|
roleIdsKeeper:[],
|
|
roleIdsRepair:[],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 1000,
|
|
},
|
|
// 模拟后端返回的对象数组
|
|
options: [],
|
|
// 记录选中的 id
|
|
selectedValues: []
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
watch: {
|
|
// 监听选中的值变化，更新后端数据
|
|
selectedValues(newValues) {
|
|
// 你可以根据需要将 newValues 更新到后端
|
|
console.log('选中的ID:', newValues);
|
|
}
|
|
},
|
|
mounted() {
|
|
// 初始化选中的值，如果需要的话
|
|
// this.selectedValues = this.options
|
|
// .filter(item => item.check) // 过滤出 check 为 true 的选项
|
|
// .map(item => (item.id));
|
|
// console.log('this.selectedValues',this.selectedValues) // 提取选中的 id
|
|
},
|
|
methods: {
|
|
async getList(){
|
|
const itemName = 'ku_guan_role_ids'
|
|
await getKeeperIds(itemName).then((response) =>{
|
|
const roleIds = response.rows[0].itemValue.split(',').map(item => Number(item))
|
|
this.roleIdsKeeper = roleIds
|
|
})
|
|
await listRole(this.queryParams).then(response=>{
|
|
const list = response.rows
|
|
console.log('this.roleIdsKeeper',this.roleIdsKeeper)
|
|
console.log('this.list',list)
|
|
this.options=list
|
|
this.selectedValues = this.roleIdsKeeper
|
|
console.log('this.options',this.options)
|
|
})
|
|
},
|
|
handleQuery(){
|
|
console.log(this.selectedValues)
|
|
},
|
|
handleClick(tab, event) {
|
|
if(tab.name == 'first'){
|
|
// this.resetForm("queryFormOne");
|
|
// this.getList();
|
|
}else if(tab.name == 'second'){
|
|
// this.resetForm("queryForm");
|
|
// this.getboxList();
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.el-header, .el-footer {
|
|
background-color: #f8f8f9;
|
|
color: #333;
|
|
text-align: left;
|
|
width: 80%;
|
|
line-height: 60px;
|
|
border: 1px solid #dfe6ec;
|
|
}
|
|
|
|
.el-main {
|
|
background-color: white;
|
|
color: black;
|
|
text-align: left;
|
|
width: 80%;
|
|
height: 300px;
|
|
border-radius: 2px;
|
|
border: 1px solid #dfe6ec;
|
|
padding: 10px;
|
|
line-height: 120px;
|
|
position: sticky;
|
|
font-weight: 200px;
|
|
}
|
|
|
|
::v-deep .el-checkbox {
|
|
color: #606266;
|
|
font-weight: 200;
|
|
font-size: 2px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-right: 30px;
|
|
margin-bottom: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* 调整checkbox的样式 */
|
|
::v-deep .checkbox-group {
|
|
display: flex;
|
|
width: 80%;
|
|
flex-wrap: wrap; /* 使复选框换行 */
|
|
gap: 1px; /* 间距 */
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
::v-deep .checkbox-item {
|
|
display: inline-block;
|
|
width: calc(10% - 1px); /* 每个复选框的宽度，去除间距 */
|
|
vertical-align: top; /* 顶部对齐 */
|
|
margin-bottom: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
</style> |