1.多选框是中文，提交代码时提交的是对应的value

2.关键代码

 enum: {
    
    
    '短信': '01',
    '邮件': '02',
    '站内推送': '03'
  },
// 保存
const onSubmit = () => {
    
    
  state.popup.open = false;
  let listA = [];
  let listB = []
  //关键代码
  state.checkedListA.forEach(function (key) {
    
    
    if (key in state.enum) {
    
    
      listA.push(state.enum[key])
    }
  });
  //关键代码
  state.checkedListB.forEach(function (key) {
    
    
    if (key in state.enum) {
    
    
      listB.push(state.enum[key])
    }
  });
  console.log(listA)
  console.log(listB)
}

3.完整代码

<template>
  <!-- 故障推送 -->
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="index-breadcrumb-div">
      <BreadCrumb />
    </div>

    <!-- 顶部搜索 -->
    <div class="search-div">
      <div class="search-div-item">
        <div class="menu-text">项目</div>
        <a-input v-model:value="state.proDashboardInfo.name" placeholder="请输入项目" readonly />
      </div>
    </div>

    <!-- 主体 -->
    <div class="main-div">
      <div class="top-search">
        <!-- <div class="search-div-item">
          <div class="menu-text">当前状态</div>
          <a-select v-model:value="state.queryInfo.selectVal" placeholder="请选择报警项" :option="state.option" />
        </div> -->
        <div class="search-div-item">
          <div class="menu-text">故障等级</div>
          <a-select v-model:value="state.queryInfo.falutLevel" placeholder="请选择故障等级" @change="handleChange">
            <a-select-option :value="item.value" v-for="item in state.deviceOption" :key="item.id">{
    
    {
    
     item.label
            }}</a-select-option>
          </a-select>
        </div>
        <div class="search-div-item">
          <div class="menu-text">时间</div>
          <a-range-picker show-time format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" @change="getTime"
            :placeholder="['选择开始时间', '选择结束时间']"></a-range-picker>
        </div>
        <div class="search-div-item">
          <div class="menu-text">推送设置</div>
          <a-button @click="handleSet">设 置</a-button>
        </div>
      </div>

      <Table :data-source="state.tableData" :columns="state.tableColumns" :pagination="state.pagination"
        :scroll-list="state.scrollList" @update="init" :operation="state.operation" />

    </div>

  </div>

  <div>
    <div ref="yourModal" class="yourModal"></div>
    <a-modal v-model:open="state.popup.open" width="40%" :footer="null" :closable="false"
      :getContainer="() => $refs.yourModal">
      <div class="check-title">推送设置</div>
      <div class="check-info">
        <!--checkBoxA ------------- -->
        <div class="check-box">
          <div class="check-father-box" style="display: flex; align-items: center; justify-content: space-between;">
            <a-checkbox v-model:checked="state.checkAllA" :indeterminate="state.indeterminateA"
              @change="onCheckAllChangeA">
              自动推送
            </a-checkbox>
          </div>
          <div class="check-children-box">
            <a-checkbox-group v-model:value="state.checkedListA" :options="state.plainOptionsA" @change="getCheckItemA" />
          </div>
        </div>
        <!--checkBoxB ------------- -->
        <div class="check-box">
          <div class="check-father-box" style="display: flex; align-items: center; justify-content: space-between;">
            <a-checkbox v-model:checked="state.checkAllB" :indeterminate="state.indeterminateB"
              @change="onCheckAllChangeB">
              手动推送
            </a-checkbox>
          </div>
          <div class="check-children-box">
            <a-checkbox-group v-model:value="state.checkedListB" :options="state.plainOptionsA" @change="getCheckItemB" />
          </div>
        </div>
        <!-- ------------- -->
      </div>
      <div class="form-btn">
        <a-button type="primary" ghost @click="resetForm">取 消</a-button>
        <a-button style="margin-left: 10px" @click="onSubmit">保 存</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import BreadCrumb from "@/components/bread-crumb/index.vue";
import {
    
     getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import {
    
     useStore } from "vuex";
import Table from "@/components/table/index.vue";

const {
    
     proxy } = getCurrentInstance();
const store = useStore();

const state = reactive({
    
    
  option: [],
  enum: {
    
    
    '短信': '01',
    '邮件': '02',
    '站内推送': '03'
  },
  enumA: {
    
    
    '01': '短信',
    '02': '邮件',
    '03': '站内推送'
  },
  datePackerValue: '',
  queryInfo: {
    
    
    projectId: 1,
    falutLevel: "",//故障等级
    // timeFrom: "", //开始时间
    // timeTo: "", //结束
    pageSize: 10,
    pageNum: 0,
  },
  proDashboardInfo: {
    
    },
  // 表格
  tableData: [{
    
    }],
  tableColumns: [
    {
    
    
      title: "序号",
      dataIndex: 'index',
      align: 'center',
      fixed: 'left',
      width: 64
    },
    {
    
    
      title: '编号',
      dataIndex: 'faultId',
      align: 'center',
    },
    {
    
    
      title: '时间',
      dataIndex: 'createdWhen',
      align: 'center',
    },
    {
    
    
      title: '厂站',
      dataIndex: 'projectName',
      align: 'center',
    },
    {
    
    
      title: '故障类型',
      dataIndex: 'faultName',
      align: 'center',
    },
    {
    
    
      title: '位置',
      dataIndex: 'deviceName',
      align: 'center',
    },
    {
    
    
      title: '故障等级',
      dataIndex: 'warningLevel',
      align: 'center',
      tags: true,
    },
    {
    
    
      title: '推送状态',
      dataIndex: 'pushStatusName',
      align: 'center',
    },
    {
    
    
      title: '操作',
      dataIndex: 'operations',
      align: 'center',
      fixed: 'right',
      width: 140
    }
    // {
    
    
    //   title: '推送状态',
    //   dataIndex: 'pushStatus',//01 未推送 02 已推送
    //   align: 'center',
    // },
  ],
  deviceOption: [],
  // 操作按钮
  operation: [
    {
    
    
      title: '手动推送',
      color: '#00AFD5',
      disabled: false,
      method: (row, index) => {
    
    
        handleUpdate(row.faultId)
      }
    },
    {
    
    
      title: '已自动推送',
      color: '#7C8CAA',
      disabled: true,
      method: (row, index) => {
    
    
        // handleAdd(true, row.id)
      }
    },
    {
    
    
      title: '已手动推送',
      disabled: true,
      color: '#7C8CAA',
      method: (row, index) => {
    
    
        // handleAdd(true, row.id)
      }
    },
  ],
  pagination: {
    
    
    pageSize: 10,
    total: 0,
    size: 'small',
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: () => `共 ${
      
      state.pagination.total} 条`,
    pageSizeOptions: ['10', '20', '30', '40', '50'],
  },
  scrollList: {
    
    
    x: 0,
  },
  checkAllA: false,
  checkAllB: false,
  indeterminateA: false,
  indeterminateB: false,
  plainOptionsA: ['短信', '邮件', '站内推送'],
  plainOptionsB: ['短信', '邮件', '站内推送'],
  checkedListA: [],//自动
  checkedListB: [],//手动
  popup: {
    
    
    open: false,
  }
})
watch(
  () => state.checkedListA,
  val => {
    
    
    state.indeterminateA = !!val.length && val.length < state.plainOptionsA.length;
    state.checkAllA = val.length === state.plainOptionsA.length;
  },
);
watch(
  () => state.checkedListB,
  val => {
    
    
    state.indeterminateB = !!val.length && val.length < state.plainOptionsB.length;
    state.checkAllB = val.length === state.plainOptionsB.length;
  },
);
// 推送设置
const handleSet = () => {
    
    
  state.popup.open = true;
}
//checkboxA全选全不选
const onCheckAllChangeA = (e) => {
    
    
  Object.assign(state, {
    
    
    checkedListA: e.target.checked ? state.plainOptionsA : [],
    // indeterminateA: false,
  });
  // console.log(state.checkedListA)
}
//checkboxB全选全不选
const onCheckAllChangeB = (e) => {
    
    
  Object.assign(state, {
    
    
    checkedListB: e.target.checked ? state.plainOptionsB : [],
    // indeterminateB: false,
  });
  // console.log(state.checkedListB)
}
//checkboxA-item 触发方法
const getCheckItemA = (e) => {
    
    
  // console.log(state.checkedListA)
}
//checkboxB-item 触发方法
const getCheckItemB = (e) => {
    
    
  // console.log(state.checkedListB)
}
//筛选故障等级
const handleChange = () => {
    
    
  console.log("筛选故障等级");
  state.queryInfo.pageNum = 0;
  getList();
};
// 重置
const resetForm = () => {
    
    
  state.popup.open = false;

}
// 保存
const onSubmit = () => {
    
    

  let listA = [];
  let listB = []
  //关键代码 自动
  state.checkedListA.forEach(function (key) {
    
    
    if (key in state.enum) {
    
    
      listA.push(state.enum[key])
    }
  });
  //关键代码 手动
  state.checkedListB.forEach(function (key) {
    
    
    if (key in state.enum) {
    
    
      listB.push(state.enum[key])
    }
  });
  // console.log(listA)
  // console.log(listB)
  if (listA.length == 0 && listB.length == 0) {
    
    
    proxy.$U.errMsg('请至少勾选一项')
    return false
  }
  state.popup.open = false;
  proxy.$U.showLoading();
  proxy.$H
    .post(proxy, proxy.$A.fault.changeNotificationConfig, {
    
    
      autoNotificationTypeList: listA,//自动
      manualNotificationTypeList: listB//手动
    })
    .then((res) => {
    
    
      proxy.$U.hideLoading();
      proxy.$U.sucMsg('设置成功')
    })
    .catch((err) => {
    
    
      proxy.$U.hideLoading();
    });
}
//手动推送
const handleUpdate = (faultId) => {
    
    
  console.log(faultId)
  proxy.$U.showLoading();
  const fm = new FormData();
  fm.append("faultId", faultId);
  proxy.$H
    .postFormData(proxy, proxy.$A.fault.manualPush, fm)
    .then((res) => {
    
    
      proxy.$U.hideLoading();
      proxy.$U.sucMsg('推送成功')
      getList()
    })
    .catch((err) => {
    
    
      proxy.$U.hideLoading();
    });
}
//查询表格数据
const getList = () => {
    
    
  proxy.$U.showLoading();
  proxy.$H
    .post(proxy, proxy.$A.fault.list, state.queryInfo)
    .then((res) => {
    
    
      proxy.$U.hideLoading();
      state.tableData = res.data.data.content;
      state.pagination.total = res.data.data.totalElements;
    })
    .catch((err) => {
    
    
      proxy.$U.hideLoading();
    });
};
//pagination初始化
const init = (pagination) => {
    
    
  if (pagination) {
    
    
    state.queryInfo.pageNum = pagination.current - 1;
    state.queryInfo.pageSize = pagination.pageSize;
    state.pagination.pageSize = pagination.pageSize;
    getList();
  }

}
//获取查询时间
const getTime = (val) => {
    
    
  console.log(val);
  if (val != null && val.length == 2) {
    
    
    state.queryInfo.timeFrom = val[0];
    state.queryInfo.timeTo = val[0];
    state.queryInfo.pageNum = 0;
    getList();
  } else {
    
    
    delete state.queryInfo.timeFrom;
    delete state.queryInfo.timeTo;
    state.queryInfo.pageNum = 0;
    getList();
  }
};
// 加载项目基础信息
const initProDashboardInfo = () => {
    
    
  proxy.$H.post(proxy, proxy.$A.dashboard.index, {
    
     id: "1" }).then((res) => {
    
    
    state.proDashboardInfo = res.data.data || {
    
    };
  });
  //获取推送方式
  proxy.$H.post(proxy, proxy.$A.fault.getNotificationConfig, {
    
    }).then((res) => {
    
    
    // console.log(res.data.data.autoNotificationTypeList)
    //自动
    res.data.data.autoNotificationTypeList.forEach(function (key) {
    
    
      if (key in state.enumA) {
    
    
        state.checkedListA.push(state.enumA[key])
      }
    });
    if (state.checkedListA.length == state.plainOptionsA.length) {
    
    
      state.checkAllA = true
    } else if (state.checkedListA.length == 0) {
    
    
      state.checkAllA = false
      state.indeterminateA = false//不显示半选的样式
    } else {
    
    
      state.checkAllA = false
      state.indeterminateA = true//显示半选的样式
    }
    //手动
    res.data.data.manualNotificationTypeList.forEach(function (key) {
    
    
      if (key in state.enumA) {
    
    
        state.checkedListB.push(state.enumA[key])
      }
    });
    if (state.checkedListB.length == state.plainOptionsB.length) {
    
    
      state.checkAllB = true
    } else if (state.checkedListB.length == 0) {
    
    
      state.checkAllB = false
      state.indeterminateB = false//不显示半选的样式
    } else {
    
    
      state.checkAllB = false
      state.indeterminateB = true//显示半选的样式
    }
    // console.log(state.checkedListA)
  });
};
//查询故障等级Options
const getDeviceOptions = () => {
    
    
  proxy.$H
    .post(proxy, proxy.$A.dictionary.findByDictId, {
    
    
      dictId: 12
    })
    .then((res) => {
    
    
      state.deviceOption = res.data.data.map((item) => {
    
    
        return {
    
    
          value: item.code,
          label: item.value,
        };
      });
      state.deviceOption.unshift({
    
    
        value: "",
        label: "全部",
      });
    })
    .catch((err) => {
    
     });
};
onMounted(() => {
    
    
  initProDashboardInfo()
  getDeviceOptions()
  getList()
})
</script>

<style lang="less" scoped>
.container {
    
    
  width: 72%;
  margin: 0 auto;

  .search-div {
    
    
    width: 100%;
    height: 101px;
    background: #27335A;
    border-radius: 20px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;

    .search-div-item {
    
    
      margin-right: 60px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #86A3C0;
      line-height: 15px;

      .menu-text {
    
    
        margin-bottom: 15px;
      }
    }

  }

  .main-div {
    
    
    width: 100%;
    background: #27335A;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 36px;

    padding: 20px 30px;
    box-sizing: border-box;

    .top-search {
    
    
      display: flex;
      align-items: center;
      margin-bottom: 32px;

      .search-div-item:nth-child(2) {
    
    
        margin: 0 15px 0 30px;
      }

      .search-div-item:nth-child(3) {
    
    
        margin: 0 30px 0 15px;
      }

      .search-div-item {
    
    
        width: calc((100% - 90px) / 3);
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #86A3C0;
        line-height: 15px;

        /deep/ .ant-select {
    
    
          width: 100% !important;
        }

        /deep/ .ant-select-selector {
    
    
          width: 100% !important;
        }

        /deep/ .ant-picker {
    
    
          width: 100% !important;
        }

        .menu-text {
    
    
          margin-bottom: 15px;
        }
      }
    }

  }

}

.yourModal /deep/ .ant-modal .ant-modal-content {
    
    
  background: #27335a;
}

.check-title {
    
    
  width: 100%;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #86A3C0;
  line-height: 8px;
  margin-bottom: 32px;
}

.check-info {
    
    
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .check-box {
    
    
    margin-right: 100px;

    .check-father-box {
    
    }

    .check-children-box {
    
    
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-left: 24px;
      margin-bottom: 16px;
    }

  }

}

.form-btn {
    
    
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ant-picker::v-deep input::placeholder {
    
    
  color: rgba(164, 183, 209, 0.7) !important;
}

.search-div-item::v-deep .anticon svg {
    
    
  color: rgba(164, 183, 209, 0.7) !important;
}

.search-div-item::v-deep:where(.css-dev-only-do-not-override-eq3tly).ant-picker {
    
    
  width: 400px !important;
}
</style>