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="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">
      {{ 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">
      {{ 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>
      </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">
      {{ 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 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">
      {{ 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
      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: #e1ebf8;
    color: #333;
    text-align: left;
    line-height: 60px;
  } */
    .el-main {
    background-color: white;
    color: #333;
    text-align: left;
    line-height: 120px;
  }
/* 这里可以写自定义样式 */
</style>