bonus-ui/src/views/material/basic/siteConfig/index.vue

<template>
  <el-tabs v-model="activeName"  @tab-click="handleClick" class="app-container">
    <el-tab-pane label="物资配置" name="first" onclick="handleQuery">
  <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 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 => (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.forEach(item=>{
              const isChecked = this.roleIdsKeeper.includes((item.roleId));
              let obj = {'id':item.roleId,'name':item.roleKey,'check': isChecked}
              if(this.roleIdsKeeper.includes(item.roleId)){
                this.options.push(obj)
              }else{
                this.options.push(obj)
              }
            })
            console.log('this.options',this.options)
          })
        },
        handleQuery(){
              console.log()
        },
        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>