@cmstops/pro-compo 0.3.31 → 0.3.33

package/es/hooks/useAttachement.d.ts

@@ -0,0 +1,20 @@
+export declare function getAttachmentsAll(BASE_API: string, query?: any): import("axios").AxiosPromise<any>;
+export declare function getAttachmentsMy(BASE_API: string, query?: any): import("axios").AxiosPromise<any>;
+export declare function getAttachmentsMyMessage(BASE_API: string, query: any): import("axios").AxiosPromise<any>;
+declare type OptionsType = {
+    key: string;
+    BASE_API: string;
+};
+export default function useAttachement(options: OptionsType): {
+    list: import("vue").Ref<any[]>;
+    total: import("vue").Ref<number>;
+    limit: import("vue").Ref<number>;
+    offset: import("vue").Ref<number>;
+    loading: import("vue").Ref<boolean>;
+    changeFilter: (f: any) => void;
+    changeKey: (k: string) => void;
+    changePage: (o: number) => void;
+    changeSize: (s: number) => void;
+    loadData: () => Promise<void>;
+};
+export {};

package/es/hooks/useAttachement.js

@@ -0,0 +1,95 @@
+import { ref, computed } from "vue";
+import request from "../utils/request.js";
+function getAttachmentsAll(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/attachments`,
+    method: "get",
+    params: query
+  });
+}
+function getAttachmentsMy(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/my/attachments`,
+    method: "get",
+    params: query
+  });
+}
+function getAttachmentsMyMessage(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/remind/to/my/attachments`,
+    method: "get",
+    params: query
+  });
+}
+function useAttachement(options) {
+  const key = ref(options.key);
+  const limit = ref(20);
+  const offset = ref(0);
+  const filter = ref({});
+  const params = computed(() => {
+    return {
+      limit: limit.value,
+      offset: offset.value,
+      ...filter.value
+    };
+  });
+  const loading = ref(true);
+  const list = ref([]);
+  const total = ref(0);
+  async function loadData() {
+    let apiFunc;
+    if (key.value === "all")
+      apiFunc = getAttachmentsAll;
+    if (key.value === "my")
+      apiFunc = getAttachmentsMy;
+    if (key.value === "remind")
+      apiFunc = getAttachmentsMyMessage;
+    list.value = [];
+    if (!apiFunc)
+      return;
+    loading.value = true;
+    try {
+      const { code, message } = await apiFunc(options.BASE_API, params.value);
+      if (code !== 0)
+        return;
+      const { data, count } = message;
+      list.value = data || [];
+      total.value = count;
+    } catch (e) {
+      console.log("\u83B7\u53D6\u7D20\u6750\u5217\u8868\u5F02\u5E38", e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  function changePage(o) {
+    offset.value = o;
+    loadData();
+  }
+  function changeSize(s) {
+    limit.value = s;
+    loadData();
+  }
+  function changeKey(k) {
+    if (k === key.value)
+      return;
+    key.value = k;
+    changePage(0);
+  }
+  function changeFilter(f) {
+    filter.value = f;
+    changePage(0);
+  }
+  return {
+    list,
+    total,
+    limit,
+    offset,
+    loading,
+    changeFilter,
+    changeKey,
+    changePage,
+    changeSize,
+    loadData
+  };
+}
+export { useAttachement as default, getAttachmentsAll, getAttachmentsMy, getAttachmentsMyMessage };

package/es/hooks/useSelection.d.ts

@@ -0,0 +1,23 @@
+declare type QueryParams = {
+    limit: number;
+    offset: number;
+    keyword: string;
+    others?: any;
+};
+declare type HookOptionParams = {
+    labelStr: string;
+    valueStr: string;
+    func: (params: QueryParams) => any;
+};
+export default function useSelection(params: HookOptionParams): {
+    options: import("vue").Ref<{
+        label: string;
+        value: any;
+    }[]>;
+    loading: import("vue").Ref<boolean>;
+    keyword: import("vue").Ref<string>;
+    load: (more?: boolean | undefined) => Promise<void>;
+    handleSearch: (kw: string) => void;
+    loadMore: () => void;
+};
+export {};

package/es/hooks/useSelection.js

@@ -0,0 +1,59 @@
+import { ref, computed } from "vue";
+function getLabelValue(list, options) {
+  const { labelStr, valueStr } = options;
+  return list.map((item) => {
+    return {
+      label: item[labelStr],
+      value: item[valueStr]
+    };
+  });
+}
+function useSelection(params) {
+  const { func, labelStr, valueStr } = params;
+  const lVParams = { labelStr, valueStr };
+  const limit = ref(10);
+  const offset = ref(0);
+  const keyword = ref("");
+  const options = ref([]);
+  const loading = ref(false);
+  const queryParams = computed(() => {
+    return {
+      limit: limit.value,
+      offset: offset.value,
+      keyword: keyword.value
+    };
+  });
+  async function load(more) {
+    loading.value = !more;
+    try {
+      const list = await func(queryParams.value);
+      if (more) {
+        options.value = options.value.concat(getLabelValue(list, lVParams));
+      } else {
+        options.value = getLabelValue(list, lVParams);
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  function loadMore() {
+    offset.value += limit.value;
+    load(true);
+  }
+  function handleSearch(kw) {
+    keyword.value = kw;
+    offset.value = 0;
+    load();
+  }
+  return {
+    options,
+    loading,
+    keyword,
+    load,
+    handleSearch,
+    loadMore
+  };
+}
+export { useSelection as default };

package/es/index.css

@@ -4243,3 +4243,215 @@
   color: #fff;
   font-size: 18px;
 }
+.thumb-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.thumb-select-wrapper .thumb-add {
+  color: var(--color-text-2);
+  font-size: 16px;
+  cursor: pointer;
+}
+.thumb-select-wrapper .thumb-image img {
+  width: 100%;
+  height: 100%;
+}
+.thumb-select-wrapper .thumb-handler-list {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+.thumb-select-wrapper .thumb-handler-list .handler-item {
+  padding: 0 8px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 26px;
+  background-color: #000000b3;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.thumb-select-wrapper .thumb-handler-list .handler-item:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+.thumb-select-wrapper:hover .thumb-handler-list {
+  opacity: 1;
+}
+.arco-dropdown-option-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+}
+.card-list-wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(4, 1fr);
+}
+.card-list-wrapper .card-wrapper-image {
+  position: relative;
+  overflow: hidden;
+}
+.card-list-wrapper .card-wrapper-image .card-wrapper {
+  overflow: hidden;
+  aspect-ratio: 4 / 3;
+}
+.card-list-wrapper .card-wrapper-image .card-alias {
+  width: 100%;
+  margin-top: 6px;
+  overflow: hidden;
+  color: #3d3d3d;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.card-list-wrapper .card-wrapper-image:hover .check-box-wrapper .check-box,
+.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
+  opacity: 1;
+}
+.card-list-wrapper .card-wrapper-image .check-box-wrapper {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  cursor: pointer;
+}
+.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box {
+  box-sizing: border-box;
+  width: 22px;
+  height: 22px;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid white;
+  border-radius: 50%;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box::selection {
+  display: none;
+}
+.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
+  color: white;
+  background-color: #165dff;
+  border-color: #165dff;
+}
+.list-filter-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.list-filter-wrapper .filter-list {
+  display: flex;
+  gap: 10px;
+}
+.list-filter-wrapper .filter-list .filter-item {
+  width: 100px;
+}
+.list-filter-wrapper .arco-input-prepend {
+  padding: 0;
+}
+.list-panel-wrapper {
+  width: 420px;
+  max-height: 600px;
+  padding: 0 !important;
+  overflow: hidden;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+}
+.list-panel-wrapper * {
+  user-select: none;
+}
+.list-panel-wrapper *::selection {
+  display: none;
+}
+.list-panel-wrapper .arco-popover-content {
+  margin-top: 0;
+}
+.list-panel-wrapper .list-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 11px 15px;
+  color: white;
+  font-weight: 500;
+  background-color: #165dff;
+}
+.list-panel-wrapper .list-panel-header .header-options {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.list-panel-wrapper .list-panel-header .header-options div {
+  cursor: pointer;
+}
+.list-panel-wrapper .list-selected-record {
+  display: flex;
+  flex-direction: column;
+}
+.list-panel-wrapper .list-selected-record .list-selected-item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 9px 16px;
+  overflow: hidden;
+}
+.list-panel-wrapper .list-selected-record .list-selected-item .item-thumb {
+  width: 50px;
+  height: 38px;
+  overflow: hidden;
+}
+.list-panel-wrapper .list-selected-record .list-selected-item .item-alias {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.resource-select-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  height: 100%;
+}
+.resource-select-container .resource-select-filter,
+.resource-select-container .resource-select-content,
+.resource-select-container .resource-select-footer {
+  padding: 0 16px 0;
+}
+.resource-select-container .resource-select-header .arco-tabs-nav::before {
+  display: none;
+}
+.resource-select-container .resource-select-header .arco-tabs-content {
+  display: none !important;
+}
+.resource-select-container .resource-select-content {
+  flex: 1;
+  overflow: hidden;
+}
+.resource-select-container .resource-select-footer {
+  display: flex;
+  justify-content: space-between;
+}
+.resource-select-container .resource-select-footer .footer-right {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}

package/es/index.d.ts

@@ -22,3 +22,5 @@ export { default as dataTags } from './dataTags';
 export { default as colorPalette } from './colorPalette';
 export { default as resourceGridList } from './resourceGridList';
 export { default as mediaView } from './mediaView';
+export { default as thumbCard } from './thumbCard';
+export { default as selectResourceModal } from './selectResourceModal';

package/es/index.js

@@ -22,3 +22,5 @@ export { default as dataTags } from "./dataTags/index.js";
 export { default as colorPalette } from "./colorPalette/index.js";
 export { default as resourceGridList } from "./resourceGridList/index.js";
 export { default as mediaView } from "./mediaView/index.js";
+export { default as thumbCard } from "./thumbCard/index.js";
+export { default as selectResourceModal } from "./selectResourceModal/index.js";

package/es/index.less

@@ -22,3 +22,5 @@
 @import './colorPalette/style/index.less';
 @import './resourceGridList/style/index.less';
 @import './mediaView/style/index.less';
+@import './thumbCard/style/index.less';
+@import './selectResourceModal/style/index.less';

package/es/selectResourceModal/component.js

@@ -0,0 +1,211 @@
+import { defineComponent, ref, provide, computed, onMounted, openBlock, createBlock, unref, withCtx, createElementBlock, createCommentVNode, createElementVNode, createVNode, createTextVNode } from "vue";
+import { Drawer, Tabs, Button, TabPane, Scrollbar, Pagination } from "@arco-design/web-vue";
+import emptyData from "../emptyData/index.js";
+import _sfc_main$1 from "./components/ListFilter/index.js";
+import _sfc_main$2 from "./components/ListContent/index.js";
+import _sfc_main$3 from "./components/ListSelected/index.js";
+import useAttachement from "../hooks/useAttachement.js";
+import { DEFAULT_BASE_API } from "../config.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "resource-select-container"
+};
+const _hoisted_2 = { class: "resource-select-header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "resource-select-filter"
+};
+const _hoisted_4 = { class: "resource-select-content" };
+const _hoisted_5 = { class: "resource-select-footer" };
+const _hoisted_6 = { class: "footer-left" };
+const _hoisted_7 = {
+  key: 0,
+  class: "footer-right"
+};
+const _sfc_main = defineComponent({
+  ...{ name: "selectResourceModal" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    visible: { type: Boolean },
+    userInfo: {},
+    maxcount: {}
+  },
+  emits: ["update:visible", "submit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const BASE_API = props.BASE_API || DEFAULT_BASE_API;
+    const activeKey = ref("all");
+    provide("userInfo", computed(() => props.userInfo));
+    provide("baseAPI", BASE_API);
+    const {
+      list,
+      total,
+      limit,
+      loading,
+      changeKey,
+      changeFilter,
+      changePage,
+      changeSize,
+      loadData
+    } = useAttachement({ key: "all", BASE_API });
+    const selected = ref([]);
+    const selectedKeys = computed(() => selected.value.map((item) => item.id));
+    const disableSelect = computed(() => props.maxcount && selected.value.length >= props.maxcount);
+    function handleSelect(params) {
+      const { id } = params;
+      const index = selected.value.findIndex((item) => item.id === id);
+      if (index > -1)
+        selected.value.splice(index, 1);
+      else
+        selected.value.push(params);
+    }
+    function handleClear() {
+      selected.value = [];
+    }
+    function handleClose() {
+      handleClear();
+      emits("update:visible", false);
+    }
+    const handleSelectOne = (params) => {
+      if (Array.isArray(params))
+        emits("submit", params);
+      else
+        emits("submit", [params]);
+      handleClose();
+    };
+    function handleConfirm() {
+      handleSelectOne(selected.value);
+    }
+    function handleToUpload() {
+      changeKey("local");
+      activeKey.value = "local";
+    }
+    onMounted(() => {
+      loadData();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Drawer), {
+        visible: _ctx.visible,
+        width: "1024px",
+        header: false,
+        footer: false
+      }, {
+        default: withCtx(() => [
+          _ctx.userInfo ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createCommentVNode(" \u5934\u90E8 "),
+            createElementVNode("div", _hoisted_2, [
+              createVNode(unref(Tabs), {
+                "active-key": activeKey.value,
+                "onUpdate:activeKey": _cache[0] || (_cache[0] = ($event) => activeKey.value = $event),
+                onChange: unref(changeKey)
+              }, {
+                extra: withCtx(() => [
+                  createVNode(unref(Button), {
+                    type: "text",
+                    onClick: handleClose
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u5173\u95ED")
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  createVNode(unref(TabPane), {
+                    key: "all",
+                    title: "\u5168\u90E8\u7D20\u6750"
+                  }),
+                  createVNode(unref(TabPane), {
+                    key: "my",
+                    title: "\u6211\u7684\u7D20\u6750"
+                  }),
+                  createVNode(unref(TabPane), {
+                    key: "remind",
+                    title: "\u63D0\u9192\u6211\u7684"
+                  }),
+                  createVNode(unref(TabPane), {
+                    key: "local",
+                    title: "\u672C\u5730\u7D20\u6750"
+                  })
+                ]),
+                _: 1
+              }, 8, ["active-key", "onChange"])
+            ]),
+            createCommentVNode(" \u7B5B\u9009  "),
+            activeKey.value !== "local" ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              createVNode(_sfc_main$1, {
+                "disable-upload-by": activeKey.value !== "all",
+                onChange: unref(changeFilter),
+                onUpload: handleToUpload
+              }, null, 8, ["disable-upload-by", "onChange"])
+            ])) : createCommentVNode("v-if", true),
+            createCommentVNode(" \u5217\u8868\u90E8\u5206 "),
+            createElementVNode("div", _hoisted_4, [
+              createVNode(unref(Scrollbar), {
+                "outer-style": { height: "100%" },
+                style: { "height": "100%", "overflow": "auto" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, {
+                    loading: unref(loading),
+                    list: unref(list),
+                    disable: disableSelect.value,
+                    "select-keys": selectedKeys.value,
+                    onSelect: handleSelect,
+                    onSelectOne: handleSelectOne
+                  }, null, 8, ["loading", "list", "disable", "select-keys"])
+                ]),
+                _: 1
+              })
+            ]),
+            createCommentVNode(" \u5E95\u90E8 "),
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_6, [
+                activeKey.value !== "local" ? (openBlock(), createBlock(unref(Pagination), {
+                  key: 0,
+                  total: unref(total),
+                  "page-size": unref(limit),
+                  "show-total": "",
+                  "show-page-size": "",
+                  onChange: _cache[1] || (_cache[1] = (e) => unref(changePage)((e - 1) * unref(limit))),
+                  onPageSizeChange: unref(changeSize)
+                }, null, 8, ["total", "page-size", "onPageSizeChange"])) : createCommentVNode("v-if", true)
+              ]),
+              selected.value.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                createVNode(_sfc_main$3, {
+                  maxcount: _ctx.maxcount,
+                  selected: selected.value,
+                  onRemove: handleSelect,
+                  onClear: handleClear
+                }, null, 8, ["maxcount", "selected"]),
+                createVNode(unref(Button), { onClick: handleClose }, {
+                  default: withCtx(() => [
+                    createTextVNode("\u53D6\u6D88")
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(Button), {
+                  type: "primary",
+                  onClick: handleConfirm
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("\u786E\u5B9A")
+                  ]),
+                  _: 1
+                })
+              ])) : createCommentVNode("v-if", true)
+            ])
+          ])) : (openBlock(), createBlock(unref(emptyData), {
+            key: 1,
+            type: "empty",
+            customTip: "\u6682\u65E0\u6743\u9650"
+          }))
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+export { _sfc_main as default };