SaaS-lib/lib/component/form/checkbox/checkbox-allgroup.vue

<template>
  <div class="all-group">
    <!-- 样式修改 -->
    <div class="message-list">
      <a-checkbox
        v-model:checked="checkAll"
        :indeterminate="indeterminate"
        @change="onCheckAllChange"
        :disabled="promptWord.checked"
      >
        全选
      </a-checkbox>
    </div>
    <div class="warp" v-if="options.length">
      <a-checkbox-group
        v-model:value="checkedList"
        :options="options"
        :disabled="promptWord.checked"
      >
        <slot></slot>
      </a-checkbox-group>
      <!-- <ns-checkbox-group v-model:value="checkedList" :options="options" /> -->
    </div>
    <div class="no-warp" v-if="!options.length">
      <ul class="prompt-information">
        <ns-icon class="icon" name="account1" size="25" style="margin-right: 5px" />
        <li>暂无数据, 请先维护</li
        ><li @click="jumpMaintenanceInformation()">{{ promptWord.maintenanceInformation }}</li></ul
      >
    </div>
    <p class="remark-prompt">{{ promptWord.message }}</p>
  </div>
</template>

<script lang="ts">
  import { defineComponent, toRefs, reactive, watch, computed, ref } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'NsCheckboxAllGroup',
    props: {
      api: String,
      field: String,
      title: String,
      message: String,
      maintenanceInformation: String, //没有数据的情况下的维护信息
      route: String, //维护信息跳转的路由
      optionsName: Array,
      resultField: String,
      checked: String,
      options: Array
    },
    setup(props) {
      const options = ref([]); //创建options接受请求回来的值
      const state = reactive({
        indeterminate: false,
        checkAll: false,
        checkedList: [],
      });
      const router = useRouter();
      // 获取标题和备注信息
      const promptWord = computed(() => {
        return props;
      });
      //   获取后端的区域
      const getData = () => {
        options.value = [];
        if(props.options){
          options.value= props.options
        }
        http.get(props.api).then((res) => {
          if (promptWord.value.resultField == 'data') {
            res.data.forEach((element) => {
              element['label'] = element[promptWord.value.optionsName[0]];
              element['value'] = element[promptWord.value.optionsName[1]];
            });
            options.value = res.data;
          } else {
            res.data.data.forEach((element) => {
              element['label'] = element[promptWord.value.optionsName[0]];
              element['value'] = element[promptWord.value.optionsName[1]];
            });
            options.value = res.data.data;
          }
        });
      };
      const jumpMaintenanceInformation = () => {
        router.push(props.route);
      };
      getData();
      // 全选的时候会触发这个方法
      const onCheckAllChange = (e: any) => {
        state.checkedList = [];
        if (e.target.checked) {
          (state.indeterminate = false),
            options.value.forEach((item) => {
              state.checkedList.push(item['value']);
            });
        }
        state.indeterminate = false;
      };
      //   监听选中的数据
      watch(
        () => state.checkedList,
        (val) => {
          state.indeterminate = !!val.length && val.length < options.value.length;
          state.checkAll = val.length === options.value.length;
        }
      );

      return {
        ...toRefs(state),
        onCheckAllChange,
        promptWord,
        options,
        jumpMaintenanceInformation,
      };
    },
  });
</script>
<style lang="less" scoped>
  .all-group {
    // margin-left: 22.22%;
  }
  .warp {
    width: 100%;
    height: 100%;
    border: 1px solid #dcdfe2;
    background: #f8f9fc;
  }
  .no-warp {
    width: 100%;
    height: 100px;
    border: 1px solid #dcdfe2;
    background: #f8f9fc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .prompt-information {
      list-style: none;
      display: flex;
      padding-left: 7px;
      //   position: absolute;
      //   left: 50%;
      //   top: 40%;
      li:nth-of-type(1) {
        color: #828282;
      }
      li:nth-of-type(2) {
        color: #6865ea;
      }
    }
  }
  .message-list {
    display: flex;
  }
  .message-list p {
    margin-right: 5px;
    color: #606060;
  }
  .ant-checkbox-group {
    margin: 22px 18px 26px !important;
  }

  :deep(.ant-checkbox-group-item) {
    margin-right: 110px !important;
  }

  .remark-prompt {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;

    color: #c1c1c1;
    margin-top: 7px;
  }
</style>