precise_delivery_distribution_front/src/views/put/component/check-box.vue

<template>
  <div class="check-box">
    <div class="common-box list-box">
      <div class="title-box">
        <h3>{{ typeList[type - 1] }}</h3>
      </div>
      <div class="list">
        <a-checkbox
          v-model:checked="checkAll"
          :indeterminate="indeterminate"
          @change="onCheckAllChange"
        >
          全选
        </a-checkbox>
        <a-checkbox-group style="display: block" v-model:value="checkedList">
          <a-checkbox v-for="item in list" :key="item.value" :value="item">{{
            item.label
          }}</a-checkbox>
        </a-checkbox-group>
      </div>
    </div>
    <div class="common-box selected-box">
      <div class="title-box">
        <span
          style="
            display: block;
            font-weight: bold;
            line-height: 30px;
            float: left;
            font-size: 13px;
          "
          >已选</span
        >
        <h3 class="clear-all" @click="clearAll">全部清空</h3>
      </div>
      <div class="selected">
        <p v-for="item in checkedList" :key="item.value">
          <span>{{ item.label }}</span>
          <i class="iconfont icon-guanbi" @click="deleteItem(item)"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, watch } from "vue";
import {} from "@/api";
import { message } from "ant-design-vue";

const CheckBox = defineComponent({
  props: ["compType"],
  setup() {
    const state = reactive({
      list: ref<any[]>([]),
      indeterminate: false,
      checkAll: false,
      checkedList: ref<any[]>([]),
      typeList: ["文章分类", "手机品牌", "职业状态", "可开放定向"],
      type: 1,
    });
    const onCheckAllChange = (e: any) => {
      state.checkedList = e.target.checked ? state.list : [];
      state.checkAll = e.target.checked;
      state.indeterminate = false;
    };
    watch(
      () => state.checkedList,
      (val) => {
        state.indeterminate = !!val.length && val.length < state.list.length;
        state.checkAll = val.length === state.list.length;
      }
    );

    return { ...toRefs(state), onCheckAllChange };
  },
  mounted() {
    this.type = this.$props.compType ?? 1;
    this.list = [
      { label: "测试1", value: 1 },
      { label: "测试2", value: 2 },
      { label: "测试3", value: 3 },
      { label: "测试4", value: 4 },
      { label: "测试5", value: 5 },
      { label: "测试6", value: 6 },
      { label: "测试7", value: 7 },
      { label: "测试8", value: 8 },
      { label: "测试9", value: 9 },
      { label: "测试10", value: 10 },
    ];
  },
  methods: {
    // 全部清空
    clearAll() {
      this.checkedList = [];
    },
    // 删除单个
    deleteItem(val: any) {
      this.checkedList.splice(this.checkedList.indexOf(val), 1);
      this.indeterminate =
        this.checkedList.length === 0 ||
        this.checkedList.length === this.list.length
          ? false
          : true;
      this.checkAll = this.checkedList.length === this.list.length;
    },
    // 全选操作
  },
});

export default CheckBox;
</script>
<style lang="scss" scoped>
.check-box {
  margin-top: 10px;
  width: 550px;
  .common-box {
    height: 210px;
    float: left;
    border: 1px solid rgb(210, 210, 210);
    border-radius: 2px;
    .title-box {
      padding: 0 10px;
      height: 30px;
      border-bottom: 1px solid rgb(210, 210, 210);
      h3 {
        font-size: 13px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        float: left;
        margin-bottom: 0;
      }
      .clear-all {
        font-size: 13px;
        font-weight: normal;
        color: gray;
        float: right;
        cursor: pointer;
      }
    }
  }
  .list-box {
    width: 320px;
    .list {
      height: 176px;
      overflow: auto;
      padding: 0 10px;
      .ant-checkbox-wrapper {
        display: block;
        margin: 0;
        line-height: 32px;
        height: 32px;
      }
    }
  }
  .selected-box {
    width: 200px;
    margin-left: 20px;

    .selected {
      height: 176px;
      overflow: auto;
      padding: 0 10px;
      p {
        background: rgb(240, 240, 240);
        height: 26px;
        line-height: 26px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 6px;
        font-size: 13px;
        span {
          display: inline-block;
          width: 130px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          border-radius: 2px;
        }
        i {
          cursor: pointer;
          font-size: 13px;
          &:hover {
            color: skyblue;
          }
        }
      }
    }
  }
}
</style>