@cmstops/pro-compo/lib/selectResourceModal/components/List/ListNormal/index.js

[物料平台文档中心](https://arco.design/docs/material/guide)

"use strict";
var vue = require("vue");
var webVue = require("@arco-design/web-vue");
var ListWraper = require("../ListWraper.js");
var useAttachement = require("../../../../hooks/useAttachement.js");
var Filter = require("./Filter.js");
const _sfc_main = vue.defineComponent({
  __name: "index",
  props: {
    activeKey: {}
  },
  emits: ["change-tab"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const BASE_API = vue.inject("baseAPI");
    const {
      list,
      total,
      limit,
      pageIdx,
      loading,
      changeFilter,
      changePage,
      changeSize,
      loadData,
      changeKey
    } = useAttachement["default"]({ key: props.activeKey, BASE_API });
    vue.watch(() => props.activeKey, changeKey);
    const listWrapper = vue.ref(null);
    const smallScreen = vue.ref(false);
    vue.watch(
      () => {
        var _a;
        return (_a = listWrapper.value) == null ? void 0 : _a.offsetWidth;
      },
      (val) => {
        smallScreen.value = !!(val && val < 600);
      },
      { immediate: true }
    );
    vue.onMounted(() => {
      loadData();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(ListWraper, {
        loading: vue.unref(loading),
        "is-empty": vue.unref(list).length === 0
      }, {
        "footer-extra": vue.withCtx(() => [
          vue.renderSlot(_ctx.$slots, "footer-extra")
        ]),
        header: vue.withCtx(() => [
          vue.createVNode(Filter, {
            smallScreen: smallScreen.value,
            onChange: vue.unref(changeFilter),
            onUpload: _cache[0] || (_cache[0] = ($event) => emits("change-tab", "local"))
          }, null, 8, ["smallScreen", "onChange"])
        ]),
        footer: vue.withCtx(() => [
          vue.createVNode(vue.unref(webVue.Pagination), {
            current: vue.unref(pageIdx),
            "onUpdate:current": _cache[1] || (_cache[1] = ($event) => vue.isRef(pageIdx) ? pageIdx.value = $event : null),
            total: vue.unref(total),
            "page-size": vue.unref(limit),
            "show-total": "",
            "show-page-size": !smallScreen.value,
            "base-size": 3,
            "buffer-size": 1,
            onChange: _cache[2] || (_cache[2] = (e) => vue.unref(changePage)((e - 1) * vue.unref(limit))),
            onPageSizeChange: vue.unref(changeSize)
          }, null, 8, ["current", "total", "page-size", "show-page-size", "onPageSizeChange"])
        ]),
        default: vue.withCtx(() => [
          vue.createElementVNode("div", {
            ref_key: "listWrapper",
            ref: listWrapper,
            class: "list-item-grid"
          }, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (item) => {
              return vue.renderSlot(_ctx.$slots, "item", {
                key: item.id,
                item
              });
            }), 128))
          ], 512)
        ]),
        _: 3
      }, 8, ["loading", "is-empty"]);
    };
  }
});
module.exports = _sfc_main;