@cmstops/pro-compo 0.3.31 → 0.3.32

package/es/selectResourceModal/components/ListFilter/index.js

@@ -0,0 +1,259 @@
+import { defineComponent, inject, computed, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, createCommentVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, Fragment, renderList, createBlock } from "vue";
+import { Input, Dropdown, Doption, Button, Select, Option, RangePicker } from "@arco-design/web-vue";
+import { IconUpload } from "@arco-design/web-vue/es/icon";
+import useSelection from "../../../hooks/useSelection.js";
+import { RESOURCE_SOURCE_OPTIONS, RESOURCE_CATALOG_OPTIONS } from "../../../utils/typeMap.js";
+import { getAccountList } from "./scripts/api.js";
+const _hoisted_1 = { class: "list-filter-wrapper" };
+const _hoisted_2 = { class: "filter-list" };
+const _hoisted_3 = { style: { "width": "200px" } };
+const _hoisted_4 = { class: "filter-item" };
+const _hoisted_5 = { class: "filter-item" };
+const _hoisted_6 = {
+  key: 0,
+  class: "filter-item"
+};
+const _hoisted_7 = { class: "filter-extra" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    disableUploadBy: { type: Boolean }
+  },
+  emits: ["upload", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const userInfo = inject("userInfo");
+    const baseAPI = inject("baseAPI");
+    const domainId = computed(() => userInfo == null ? void 0 : userInfo.value.domain_id);
+    const { options, loading, load, loadMore, handleSearch } = useSelection({
+      labelStr: "alias",
+      valueStr: "id",
+      func: async ({ keyword, ...pageInfo }) => {
+        if (!baseAPI)
+          return Promise.reject(new Error("baseAPI \u4E0D\u5B58\u5728"));
+        if (!domainId.value)
+          return Promise.reject(new Error("domainId \u4E0D\u5B58\u5728"));
+        const { code, message } = await getAccountList(baseAPI, domainId.value, {
+          ...pageInfo,
+          keywords: keyword
+        });
+        if (code !== 0)
+          return Promise.reject(new Error(message));
+        return message.users;
+      }
+    });
+    const resourceSource = RESOURCE_SOURCE_OPTIONS;
+    const resourceCatalog = RESOURCE_CATALOG_OPTIONS;
+    const originFilter = {
+      catalog: "",
+      source: "",
+      create_begin: "",
+      create_end: "",
+      keyword: "",
+      precise_keyword: "",
+      upload_by: null
+    };
+    const filter = ref(JSON.parse(JSON.stringify(originFilter)));
+    const handleReset = () => {
+      filter.value = JSON.parse(JSON.stringify(originFilter));
+    };
+    const rangeTime = computed({
+      get() {
+        return filter.value.create_begin && filter.value.create_end ? [filter.value.create_begin * 1e3, filter.value.create_end * 1e3] : null;
+      },
+      set(val) {
+        if (val) {
+          const [start, end] = val;
+          filter.value.create_begin = +new Date(start) / 1e3;
+          filter.value.create_end = +new Date(end) / 1e3;
+        } else {
+          filter.value.create_begin = "";
+          filter.value.create_end = "";
+        }
+      }
+    });
+    const searchType = ref(0);
+    const searchTypeText = computed(() => {
+      return searchType.value === 0 ? "\u7CBE\u51C6\u641C" : "\u6A21\u7CCA\u641C";
+    });
+    const searchInput = computed({
+      get() {
+        return searchType.value === 0 ? filter.value.precise_keyword : filter.value.keyword;
+      },
+      set(val) {
+        if (searchType.value === 0) {
+          filter.value.precise_keyword = val;
+          filter.value.keyword = "";
+        } else {
+          filter.value.keyword = val;
+          filter.value.precise_keyword = "";
+        }
+      }
+    });
+    const isEmpty = computed(() => {
+      return Object.keys(filter.value).every((key) => {
+        return !filter.value[key];
+      });
+    });
+    watch(
+      () => filter.value,
+      () => {
+        const result = { ...filter.value };
+        Object.keys(result).forEach((key) => {
+          if (props.disableUploadBy && key === "upload_by")
+            delete result[key];
+          if (!result[key])
+            delete result[key];
+        });
+        emits("change", result);
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      load();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createCommentVNode(" \u5173\u952E\u8BCD "),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(Input), {
+              modelValue: searchInput.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchInput.value = $event),
+              "allow-clear": "",
+              placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD"
+            }, {
+              prepend: withCtx(() => [
+                createVNode(unref(Dropdown), {
+                  onSelect: _cache[0] || (_cache[0] = (e) => searchType.value = e)
+                }, {
+                  content: withCtx(() => [
+                    createVNode(unref(Doption), { value: 0 }, {
+                      default: withCtx(() => [
+                        createTextVNode("\u7CBE\u51C6\u641C")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(Doption), { value: 1 }, {
+                      default: withCtx(() => [
+                        createTextVNode("\u6A21\u7CCA\u641C")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  default: withCtx(() => [
+                    createVNode(unref(Button), null, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(searchTypeText.value), 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createCommentVNode(" \u7D20\u6750\u7C7B\u578B "),
+          createElementVNode("div", _hoisted_4, [
+            createVNode(unref(Select), {
+              modelValue: filter.value.catalog,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filter.value.catalog = $event),
+              "allow-clear": "",
+              placeholder: "\u7C7B\u578B"
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(resourceCatalog), (item) => {
+                  return openBlock(), createBlock(unref(Option), {
+                    key: item.value,
+                    label: item.label,
+                    value: item.value
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createCommentVNode(" \u65F6\u95F4\u8303\u56F4 "),
+          createVNode(unref(RangePicker), {
+            modelValue: rangeTime.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rangeTime.value = $event),
+            "allow-clear": "",
+            style: { "width": "240px" }
+          }, null, 8, ["modelValue"]),
+          createCommentVNode(" \u7D20\u6750\u4E0A\u4F20\u6765\u6E90 "),
+          createElementVNode("div", _hoisted_5, [
+            createVNode(unref(Select), {
+              modelValue: filter.value.source,
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => filter.value.source = $event),
+              "allow-clear": "",
+              placeholder: "\u6765\u6E90"
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(resourceSource), (item) => {
+                  return openBlock(), createBlock(unref(Option), {
+                    key: item.value,
+                    label: item.label,
+                    value: item.value
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createCommentVNode(" \u7D20\u6750\u4E0A\u4F20\u4EBA "),
+          !_ctx.disableUploadBy ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            createVNode(unref(Select), {
+              modelValue: filter.value.upload_by,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => filter.value.upload_by = $event),
+              "allow-clear": "",
+              placeholder: "\u4E0A\u4F20\u4EBA",
+              loading: unref(loading),
+              "allow-search": "",
+              onSearch: unref(handleSearch),
+              onDropdownReachBottom: unref(loadMore)
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(options), (item) => {
+                  return openBlock(), createBlock(unref(Option), {
+                    key: item.id,
+                    label: item.label,
+                    value: item.value
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue", "loading", "onSearch", "onDropdownReachBottom"])
+          ])) : createCommentVNode("v-if", true),
+          !isEmpty.value ? (openBlock(), createBlock(unref(Button), {
+            key: 1,
+            type: "text",
+            onClick: handleReset
+          }, {
+            default: withCtx(() => [
+              createTextVNode("\u91CD\u7F6E")
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true)
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          createVNode(unref(Button), {
+            type: "primary",
+            onClick: _cache[6] || (_cache[6] = ($event) => emits("upload"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(unref(IconUpload))
+            ]),
+            default: withCtx(() => [
+              createTextVNode(" \u4E0A\u4F20 ")
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/selectResourceModal/components/ListFilter/scripts/api.d.ts

@@ -0,0 +1 @@
+export declare function getAccountList(BASE_API: string, id: number, query: any): import("axios").AxiosPromise<any>;

package/es/selectResourceModal/components/ListFilter/scripts/api.js

@@ -0,0 +1,9 @@
+import request from "../../../../utils/request.js";
+function getAccountList(BASE_API, id, query) {
+  return request(BASE_API, {
+    url: `/poplar/v2/accounts/${id}`,
+    method: "get",
+    params: query
+  });
+}
+export { getAccountList };

package/es/selectResourceModal/components/ListSelected/index.js

@@ -0,0 +1,91 @@
+import { defineComponent, ref, openBlock, createElementBlock, toDisplayString, createCommentVNode, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, createTextVNode } from "vue";
+import { Popover, Image, Button, Link } from "@arco-design/web-vue";
+import { IconClose } from "@arco-design/web-vue/es/icon";
+const _hoisted_1 = { class: "list-selected-wrapper" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { class: "list-panel-header" };
+const _hoisted_4 = { class: "header-options" };
+const _hoisted_5 = { class: "list-selected-record" };
+const _hoisted_6 = { class: "item-thumb" };
+const _hoisted_7 = { class: "item-alias" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    selected: {},
+    maxcount: {}
+  },
+  emits: ["remove", "clear"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const visible = ref(false);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.maxcount ? (openBlock(), createElementBlock("span", _hoisted_2, "\u6700\u591A\u9009\u62E9 " + toDisplayString(_ctx.maxcount) + " \u4E2A\u7D20\u6750\uFF0C ", 1)) : createCommentVNode("v-if", true),
+        createVNode(unref(Popover), {
+          "popup-visible": visible.value,
+          "onUpdate:popupVisible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
+          trigger: "click",
+          "content-class": "list-panel-wrapper"
+        }, {
+          content: withCtx(() => [
+            createCommentVNode(" header "),
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", null, "\u5DF2\u9009\u62E9 " + toDisplayString(_ctx.selected.length) + " \u4E2A\u7D20\u6750", 1),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", {
+                  onClick: _cache[0] || (_cache[0] = ($event) => emits("clear"))
+                }, " \u6E05\u9664 "),
+                createElementVNode("div", {
+                  onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
+                }, [
+                  createVNode(unref(IconClose), { size: "14" })
+                ])
+              ])
+            ]),
+            createCommentVNode(" content "),
+            createElementVNode("div", _hoisted_5, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selected, (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item.id,
+                  class: "list-selected-item"
+                }, [
+                  createElementVNode("div", _hoisted_6, [
+                    ["image", "video"].includes(item.catalog) ? (openBlock(), createBlock(unref(Image), {
+                      key: 0,
+                      width: "100%",
+                      height: "100%",
+                      src: item.thumb || item.url
+                    }, null, 8, ["src"])) : createCommentVNode("v-if", true),
+                    ["audio"].includes(item.catalog) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(" \u97F3\u9891 ")
+                    ], 64)) : createCommentVNode("v-if", true)
+                  ]),
+                  createElementVNode("div", _hoisted_7, toDisplayString(item.alias), 1),
+                  createVNode(unref(Button), {
+                    type: "text",
+                    onClick: ($event) => emits("remove", item)
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(unref(IconClose))
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick"])
+                ]);
+              }), 128))
+            ])
+          ]),
+          default: withCtx(() => [
+            createVNode(unref(Link), null, {
+              default: withCtx(() => [
+                createTextVNode("\u5DF2\u9009\u62E9 " + toDisplayString(_ctx.selected.length) + " \u4E2A\u7D20\u6750", 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["popup-visible"])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/selectResourceModal/index.d.ts

@@ -0,0 +1,2 @@
+declare const selectResourceModal: any;
+export default selectResourceModal;

package/es/selectResourceModal/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const selectResourceModal = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { selectResourceModal as default };

package/es/selectResourceModal/style/css.js

@@ -0,0 +1,4 @@
+import "./index.css";
+import "./listContent.css";
+import "./listFilter.css";
+import "./listSelected.css";

package/es/selectResourceModal/style/index.css

@@ -0,0 +1,31 @@
+.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/selectResourceModal/style/index.d.ts

@@ -0,0 +1,4 @@
+import './index.less';
+import './listContent.less';
+import './listFilter.less';
+import './listSelected.less';

package/es/selectResourceModal/style/index.js

@@ -0,0 +1,4 @@
+import "./index.less";
+import "./listContent.less";
+import "./listFilter.less";
+import "./listSelected.less";

package/es/selectResourceModal/style/index.less

@@ -0,0 +1,39 @@
+.resource-select-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  height: 100%;
+
+  .resource-select-filter,
+  .resource-select-content,
+  .resource-select-footer {
+    padding: 0 16px 0;
+  }
+
+  .resource-select-header {
+    .arco-tabs-nav::before {
+      display: none;
+    }
+
+    .arco-tabs-content {
+      display: none !important;
+    }
+  }
+
+  .resource-select-content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .resource-select-footer {
+    display: flex;
+    justify-content: space-between;
+
+    .footer-right {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+  }
+}

package/es/selectResourceModal/style/listContent.less

@@ -0,0 +1,67 @@
+.card-list-wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(4, 1fr);
+
+  .card-wrapper-image {
+    position: relative;
+    overflow: hidden;
+
+    .card-wrapper {
+      overflow: hidden;
+      // 宽高：43
+      aspect-ratio: 4 / 3;
+    }
+
+    .card-alias {
+      width: 100%;
+      margin-top: 6px;
+      overflow: hidden;
+      color: #3d3d3d;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &:hover .check-box-wrapper .check-box,
+    .check-box-wrapper .check-box.active {
+      opacity: 1;
+    }
+
+    .check-box-wrapper {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      cursor: pointer;
+
+      .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;
+
+        &::selection {
+          display: none;
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        &.active {
+          color: white;
+          background-color: #165dff;
+          border-color: #165dff;
+        }
+      }
+    }
+  }
+}

package/es/selectResourceModal/style/listFilter.less

@@ -0,0 +1,17 @@
+.list-filter-wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  .filter-list {
+    display: flex;
+    gap: 10px;
+
+    .filter-item {
+      width: 100px;
+    }
+  }
+
+  .arco-input-prepend {
+    padding: 0;
+  }
+}

package/es/selectResourceModal/style/listSelected.less

@@ -0,0 +1,67 @@
+.list-panel-wrapper {
+  * {
+    user-select: none;
+
+    &::selection {
+      display: none;
+    }
+  }
+
+  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);
+
+  .arco-popover-content {
+    margin-top: 0;
+  }
+
+  .list-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 11px 15px;
+    color: white;
+    font-weight: 500;
+    background-color: #165dff;
+
+    .header-options {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      div {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .list-selected-record {
+    display: flex;
+    flex-direction: column;
+
+    .list-selected-item {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      padding: 9px 16px;
+      overflow: hidden;
+
+      .item-thumb {
+        width: 50px;
+        height: 38px;
+        overflow: hidden;
+      }
+
+      .item-alias {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}