fd_dwgz_zhyw/src/components/excel.vue

<script setup name="excel">
import { ref, watch, defineEmits, withDefaults, defineProps } from "vue";
const props = defineProps({
  data: { type: Array, default: () => [] },
  height: { type: String, default: "400px" },
  showCheckbox: { type: Boolean, default: false },
  checkIds: { type: Array, default: () => [] },
  currentIds: { type: String, default: "" },
});
//   {
//     data: () => [],
//     height: "400px",
//     showCheckbox: false,
//     checkIds: () => [],
//   }

const excelCheckIds = ref([]);
const currentId = ref("");
const emits = defineEmits(["excelChange", "checkChange"]);
const funExcelChange = (obj) => {
  currentId.value = obj.id;
  emits("excelChange", obj);
};
watch(
  () => props.checkIds,
  (newVal, oldVal) => {
    //监听外部checkIds 赋值当前全选
    excelCheckIds.value = newVal;
  },
  { immediate: true }
);
const funCheckChange = (checkArr) => {
  emits("checkChange", { checkArr, data: props.data }); //抛出当前选择checkIds,  和当前的childs数据项
};
</script>
<template>
  <div class="excel-wrapper">
    <el-empty v-if="!props.data.length" description="暂无数据" />
    <el-checkbox-group
      size="small"
      v-model="excelCheckIds"
      v-if="props.showCheckbox"
      @change="funCheckChange"
    >
      <el-checkbox
        :class="{ '!bg-[rgb(236,245,255)]': currentId === item.id }"
        size="small"
        class="hover:bg-[rgb(245,247,250)] !mr-0 py-[3px]"
        :label="item.id"
        v-for="item in props.data"
        :key="item.name"
      >
        <span
          class="whitespace-nowrap cursor-pointer font-bold text-[12px] align-middle inline-flex items-center"
          @click.stop="funExcelChange(item)"
          ><el-icon class="color:rgb(71, 179, 71)"><Document /></el-icon
          >{{ item.name }}</span
        >
      </el-checkbox>
    </el-checkbox-group>
    <div class="excel-list" v-else>
      <div
        class="excel-item"
        v-for="item in props.data"
        :key="item.name"
        :class="{ active: currentId === item.id }"
        @click="funExcelChange(item)"
      >
        <el-icon style="color: rgb(71, 179, 71); margin-right: 10px"
          ><Document /></el-icon
        >{{ item.name }}
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.excel-wrapper {
  height: 100%;
  padding: 20px;
  width: 20%;
  margin-right: 20px;
border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
    0 1px 2px -1px rgba(5, 187, 76, 1);
  .excel-list {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: auto;

    .excel-item {
      padding: 10px;
      display: flex;
      align-items: center;
      color: #b3bdc0;
      &.active {
        background: rgba(97, 97, 90, 25%);
      }
    }
  }
}
</style>