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>
export default {
  name: 'siteConfig',
  data() {
    return {
      activeName: 'first',
      // 模拟后端返回的对象数组
      options: [
        { id: 1, name: 'Option 1', check: true },
        { id: 2, name: 'Option 2', check: false },
        { id: 3, name: 'Option 3', check: true },
        { id: 4, name: 'Option 1', check: true },
        { id: 5, name: 'Option 2', check: false },
        { id: 6, name: 'Option 3', check: true },
        { id: 7, name: 'Option 1', check: true },
        { id: 8, name: 'Option 2', check: false },
        { id: 9, name: 'Option 3', check: true },
        { id: 1, name: 'Option 1', check: true },
        { id: 2, name: 'Option 2', check: false },
        { id: 3, name: 'Option 3', check: true },
        { id: 4, name: 'Option 1', check: true },
        { id: 5, name: 'Option 2', check: false },
        { id: 6, name: 'Option 3', check: true },
        { id: 7, name: 'Option 1', check: true },
        { id: 8, name: 'Option 2', check: false },
        { id: 9, name: 'Option 3', check: true }
      ],
      // 记录选中的 id
      selectedValues: []
    };
  },
  watch: {
    // 监听选中的值变化，更新后端数据
    selectedValues(newValues) {
      // 你可以根据需要将 newValues 更新到后端
      console.log('选中的ID:', newValues);
    }
  },
  mounted() {
    // 初始化选中的值，如果需要的话
    this.selectedValues = this.options
      .filter(item => item.check)  // 过滤出 check 为 true 的选项
      .map(item => item.id);       // 提取选中的 id
  },
  methods: {
        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>