@cmstops/pro-compo 0.1.3 → 0.1.5

package/lib/contentModal/components/ViewAllColumn/index.js

@@ -0,0 +1,278 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var component = require("../../../typeIcons/component.js");
+var index = require("./MediaFilter/index.js");
+var batch = require("../../../hooks/batch.js");
+var api = require("../../script/api.js");
+const _hoisted_1 = { class: "view-all-column-container" };
+const _hoisted_2 = { class: "content-table-view" };
+const _hoisted_3 = { class: "title-span" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "title" };
+const _hoisted_6 = { class: "bottom-view" };
+const _hoisted_7 = { class: "left" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "ViewAllColumn" },
+  __name: "index",
+  props: {
+    maxSelect: {},
+    defaultSelectedData: {},
+    typeData: {},
+    series: {},
+    banner: {},
+    userInfo: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const _maxSelect = props.maxSelect || 100;
+    const selectedData = vue.ref([]);
+    const tempSelectedData = vue.computed(() => {
+      return props.defaultSelectedData || [];
+    });
+    vue.watch(
+      () => tempSelectedData.value,
+      (val) => {
+        selectedData.value = val;
+      }
+    );
+    const importantBanner = vue.computed(() => {
+      return props.banner !== "all";
+    });
+    const {
+      isItemChecked,
+      hoverBatchBox,
+      tableCellMouseEnter,
+      tableCellMouseLeave
+    } = batch();
+    const clickCheckbox = (e, record) => {
+      e.stopPropagation();
+      e.preventDefault();
+      selectData(record);
+    };
+    const selectTableCell = (record) => {
+      selectData(record);
+    };
+    const selectData = (record) => {
+      if (importantBanner.value) {
+        const {
+          cover: { banner }
+        } = record;
+        if (!banner) {
+          return webVue.Message.warning({ content: "\u8BE5\u5185\u5BB9\u4E0D\u5177\u5907\u72EC\u7ACB\u8F6E\u64AD\u56FE" });
+        }
+      }
+      addDataToSelectedList(record);
+    };
+    const addDataToSelectedList = async (record) => {
+      const index2 = selectedData.value.findIndex((v) => v.id === record.id);
+      if (selectedData.value.length < _maxSelect) {
+        if (index2 === -1) {
+          if (await api.checkCommitFulfillment(props.userInfo.BASE_API, record)) {
+            selectedData.value.push(record);
+          }
+        } else {
+          selectedData.value.splice(index2, 1);
+        }
+        emitChange();
+      } else {
+        if (index2 === -1) {
+          selectedData.value.splice(selectedData.value.length - 1, 1);
+          selectedData.value.push(record);
+        } else {
+          selectedData.value.splice(index2, 1);
+        }
+        emitChange();
+      }
+    };
+    const emitChange = () => {
+      emit("change", selectedData.value);
+    };
+    const group_id = vue.ref(0);
+    const categoryCascaderData = vue.ref([]);
+    const listMinHeight = vue.ref(0);
+    const scrollPercent = { y: "100%" };
+    const search = () => {
+    };
+    const pageChangeHandle = (index2) => {
+      page.value.index = index2;
+      loadData();
+    };
+    vue.watch(
+      () => group_id.value,
+      () => {
+        page.value.index = 1;
+        loadData();
+      }
+    );
+    const loadColumnTreeNode = async () => {
+      const { code, message } = await api.getCategoryCategoriesTree(
+        props.userInfo.BASE_API,
+        { repo_id: props.userInfo.repository_id }
+      );
+      if (code === 0) {
+        const arr = [
+          { id: "all", alias: "\u5168\u90E8\u5185\u5BB9", children: [], leaf: true }
+        ].concat(message || []);
+        if (arr[0]) {
+          group_id.value = arr[0].id;
+        }
+        const styleLength = arr.length > 10 ? 10 : arr.length;
+        listMinHeight.value = (styleLength + 1) * 32;
+        categoryCascaderData.value = arr;
+      }
+    };
+    const page = vue.ref({
+      index: 1,
+      size: 30,
+      total: 0
+    });
+    const columns = [
+      {
+        title: "\u6807\u9898",
+        dataIndex: "title",
+        slotName: "title"
+      },
+      {
+        title: "\u7C7B\u578B",
+        dataIndex: "series",
+        slotName: "series"
+      },
+      {
+        title: "\u7F16\u8F91",
+        dataIndex: "duty_editor",
+        slotName: "duty_editor"
+      },
+      {
+        title: "\u53D1\u5E03\u65F6\u95F4",
+        dataIndex: "pub_time",
+        slotName: "pub_time"
+      }
+    ];
+    const mediaFileData = vue.ref([]);
+    const filter = vue.ref(null);
+    const importantSeries = vue.computed(() => {
+      return props.series !== "all";
+    });
+    const dataLoading = vue.ref(false);
+    const loadData = async () => {
+      const dir_id = group_id.value;
+      if (!dir_id)
+        return;
+      const params = {
+        limit: page.value.size,
+        offset: page.value.size * (page.value.index - 1),
+        where: ["state:15|19"]
+      };
+      if (importantSeries.value) {
+        params.where.push(`series:${props.series.replace(/,/g, "|")}`);
+      }
+      if (dir_id !== "all") {
+        params.where.push(`category:${dir_id}`);
+      }
+      if (filter.value) {
+        const _filter = filter.value;
+        params.order = _filter.order;
+        params.sort = _filter.sort;
+        if (_filter.where) {
+          params.where = [...params.where, ..._filter.where];
+        }
+      }
+      params.where = params.where.join(",");
+      dataLoading.value = true;
+      const { code, message } = await api.getCategoryMediaNew(
+        props.userInfo.BASE_API,
+        params
+      );
+      dataLoading.value = false;
+      if (code === 0) {
+        mediaFileData.value = message.data.map((v) => {
+          v.catalog = "doc";
+          v.target_id = v.id;
+          v.target_type = 3;
+          v.pub_time = v.created_at;
+          v.update_time = v.updated_at;
+          v.pub_user_alias = v.author_alias;
+          return v;
+        }) || [];
+        page.value.total = message.total || message.count;
+      }
+    };
+    vue.onMounted(() => {
+      loadColumnTreeNode();
+      loadData();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(index, {
+          group_id: group_id.value,
+          "onUpdate:group_id": _cache[0] || (_cache[0] = ($event) => group_id.value = $event),
+          tree: categoryCascaderData.value,
+          series: props.series,
+          banner: _ctx.banner,
+          height: listMinHeight.value,
+          "user-info": props.userInfo,
+          onSearch: search
+        }, null, 8, ["group_id", "tree", "series", "banner", "height", "user-info"]),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(vue.unref(webVue.Table), {
+            columns,
+            scroll: scrollPercent,
+            pagination: false,
+            bordered: false,
+            data: mediaFileData.value,
+            onCellMouseEnter: vue.unref(tableCellMouseEnter),
+            onCellMouseLeave: vue.unref(tableCellMouseLeave),
+            onRowClick: selectTableCell
+          }, {
+            title: vue.withCtx(({ record }) => [
+              vue.createElementVNode("span", _hoisted_3, [
+                vue.unref(hoverBatchBox)(selectedData.value, record) ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 0,
+                  onClick: vue.withModifiers(($event) => clickCheckbox($event, record), ["stop"])
+                }, [
+                  vue.createVNode(vue.unref(webVue.Checkbox), {
+                    class: "icon",
+                    "model-value": vue.unref(isItemChecked)(selectedData.value, record)
+                  }, null, 8, ["model-value"])
+                ], 8, _hoisted_4)) : (vue.openBlock(), vue.createBlock(component, {
+                  key: 1,
+                  class: "icon",
+                  doc: "",
+                  type: record.series
+                }, null, 8, ["type"])),
+                vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(record.title || record.alias || "--"), 1)
+              ])
+            ]),
+            series: vue.withCtx(({ record }) => [
+              vue.createElementVNode("span", null, vue.toDisplayString(record.series), 1)
+            ]),
+            duty_editor: vue.withCtx(({ record }) => [
+              vue.createElementVNode("span", null, vue.toDisplayString(record.duty_editor || "--"), 1)
+            ]),
+            pub_time: vue.withCtx(({ record }) => [
+              vue.createElementVNode("span", null, vue.toDisplayString(record.pub_time), 1)
+            ]),
+            _: 1
+          }, 8, ["data", "onCellMouseEnter", "onCellMouseLeave"])
+        ]),
+        vue.createElementVNode("div", _hoisted_6, [
+          vue.createElementVNode("div", _hoisted_7, [
+            vue.renderSlot(_ctx.$slots, "store"),
+            vue.withDirectives(vue.createVNode(vue.unref(webVue.Pagination), {
+              current: page.value.index,
+              "page-size": page.value.size,
+              total: page.value.total,
+              onChange: pageChangeHandle
+            }, null, 8, ["current", "page-size", "total"]), [
+              [vue.vShow, mediaFileData.value.length > 0]
+            ])
+          ]),
+          vue.renderSlot(_ctx.$slots, "options")
+        ])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/contentModal/components/storeBox/index.js

@@ -0,0 +1,108 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var component = require("../../../typeIcons/component.js");
+const _hoisted_1 = { class: "add-content-selected-store-box" };
+const _hoisted_2 = { class: "batch-section-popover-main" };
+const _hoisted_3 = { class: "left" };
+const _hoisted_4 = { class: "title" };
+const _hoisted_5 = { class: "options" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "storeBox" },
+  __name: "index",
+  props: {
+    selectData: {}
+  },
+  emits: ["update:selectData"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const remove = (item, index) => {
+      const arr = props.selectData;
+      arr.splice(index, 1);
+      emit("update:selectData", arr);
+    };
+    const clear = () => {
+      emit("update:selectData", []);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(webVue.Popover), {
+          position: "tl",
+          "content-class": "selected-store-box-popover-content",
+          "content-style": { width: "290px" },
+          "arrow-style": { display: "none" },
+          trigger: "click"
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.createVNode(vue.unref(webVue.Scrollbar), {
+                "outer-class": "batch-section-scrollbar",
+                style: { "height": "100%", "overflow": "auto" }
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.selectData, (item, index) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: index,
+                      class: "item"
+                    }, [
+                      vue.createElementVNode("div", _hoisted_3, [
+                        vue.createVNode(component, {
+                          class: "icon",
+                          doc: "",
+                          type: item.series
+                        }, null, 8, ["type"]),
+                        vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item.alias || item.title), 1)
+                      ]),
+                      vue.createVNode(vue.unref(webVue.Button), {
+                        class: "close-btn",
+                        type: "text",
+                        shape: "circle",
+                        size: "mini",
+                        onClick: ($event) => remove(item, index)
+                      }, {
+                        icon: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(icon.IconCloseCircle), { size: "14" })
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createVNode(vue.unref(webVue.Button), {
+                type: "text",
+                onClick: clear
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode("\u6E05\u7A7A")
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.Badge), {
+              count: props.selectData.length
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(webVue.Button), { class: "button" }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode("\u5DF2\u9009\u6570\u636E")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["count"])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/contentModal/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var component = require("./component.js");
+const contentModal = Object.assign(component, {
+  install: (app) => {
+    app.component(component.name, component);
+  }
+});
+module.exports = contentModal;

package/lib/contentModal/script/api.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../../utils/request.js");
+function getCategoryCategoriesTree(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v3/categories`,
+    method: "get",
+    params
+  });
+}
+function getCategoryPath(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v2/repo/${params == null ? void 0 : params.repo}/category/${params == null ? void 0 : params.category}/path`,
+    method: "get"
+  });
+}
+function getCategoryMediaNew(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v3/s/documents`,
+    method: "get",
+    params
+  });
+}
+function checkCommitFulfillment(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v2/doc/new/${params == null ? void 0 : params.hash_id}`,
+    method: "get"
+  }).then((resp) => {
+    const content = resp.message;
+    return Promise.resolve(!content.payload.includes("image_over_limit.jpg"));
+  });
+}
+function searchMlists(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v3/mobile_list`,
+    method: "get",
+    params
+  });
+}
+async function getCategorylistsGroups(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v2/listgroups`,
+    method: "get",
+    params
+  });
+}
+exports.checkCommitFulfillment = checkCommitFulfillment;
+exports.getCategoryCategoriesTree = getCategoryCategoriesTree;
+exports.getCategoryMediaNew = getCategoryMediaNew;
+exports.getCategoryPath = getCategoryPath;
+exports.getCategorylistsGroups = getCategorylistsGroups;
+exports.searchMlists = searchMlists;

package/lib/contentModal/style/MediaFilter.less

@@ -0,0 +1,8 @@
+.media-filter-container {
+    padding: 10px 15px;
+    display: flex;
+    align-items: center;
+    .filter-item {
+        width: auto;
+    }
+}

package/lib/contentModal/style/ViewAllColumn.less

@@ -0,0 +1,33 @@
+.view-all-column-container {
+    height: 100%;
+    .content-table-view {
+        height: calc(100% - 110px);
+        .title-span {
+            width: 100%;
+            display: block;
+            text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            .icon {
+                width: 20px;
+                height: 25px;
+                margin-right: 8px;
+                font-size: 18px;
+                vertical-align: middle;
+                display: inline-block;
+                text-align: center;
+            }
+        }
+    }
+    .bottom-view {
+        height: 60px;
+        margin: 0px 15px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .left {
+            display: flex;
+            align-items: center;
+        }
+    }
+}

package/lib/contentModal/style/columnTree.less

@@ -0,0 +1,9 @@
+.column-selection-container {
+    padding: 0px 15px;
+}
+.column-selection-popover-content {
+    padding: 0;
+    .column-outer-scrollbar {
+        height: 100%;
+    }
+}

package/lib/contentModal/style/index.css

@@ -0,0 +1,107 @@
+.column-selection-container {
+  padding: 0px 15px;
+}
+.column-selection-popover-content {
+  padding: 0;
+}
+.column-selection-popover-content .column-outer-scrollbar {
+  height: 100%;
+}
+.media-filter-container {
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+}
+.media-filter-container .filter-item {
+  width: auto;
+}
+.selected-store-box-popover-content {
+  padding: 0;
+}
+.selected-store-box-popover-content .batch-section-popover-main .item {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  box-sizing: border-box;
+}
+.selected-store-box-popover-content .batch-section-popover-main .item .icon {
+  width: 20px;
+  height: 25px;
+  margin-right: 8px;
+  font-size: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  text-align: center;
+}
+.selected-store-box-popover-content .batch-section-popover-main .item .left {
+  width: 90%;
+  display: inline-block;
+  align-items: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.selected-store-box-popover-content .batch-section-popover-main .item .close-btn {
+  display: none;
+}
+.selected-store-box-popover-content .batch-section-popover-main .item:hover,
+.selected-store-box-popover-content .batch-section-popover-main .item:active {
+  background-color: #f6f6f6;
+}
+.selected-store-box-popover-content .batch-section-popover-main .item:hover .close-btn,
+.selected-store-box-popover-content .batch-section-popover-main .item:active .close-btn {
+  display: block;
+}
+.selected-store-box-popover-content .options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.view-all-column-container {
+  height: 100%;
+}
+.view-all-column-container .content-table-view {
+  height: calc(100% - 110px);
+}
+.view-all-column-container .content-table-view .title-span {
+  width: 100%;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.view-all-column-container .content-table-view .title-span .icon {
+  width: 20px;
+  height: 25px;
+  margin-right: 8px;
+  font-size: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  text-align: center;
+}
+.view-all-column-container .bottom-view {
+  height: 60px;
+  margin: 0px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.view-all-column-container .bottom-view .left {
+  display: flex;
+  align-items: center;
+}
+.add-content-modal-wrapper .arco-modal-header {
+  border-bottom: none;
+}
+.add-content-modal-body {
+  padding: 0;
+  height: 70vh;
+}
+.add-content-modal-body .content-tabs {
+  height: 100%;
+}
+.add-content-modal-body .arco-tabs-content {
+  padding-top: 0;
+}

package/lib/contentModal/style/index.less

@@ -0,0 +1,19 @@
+@import './columnTree.less';
+@import './MediaFilter.less';
+@import './storeBox.less';
+@import './ViewAllColumn.less';
+.add-content-modal-wrapper {
+  .arco-modal-header {
+    border-bottom: none;
+  }
+}
+.add-content-modal-body {
+  padding: 0;
+  height: 70vh;
+  .content-tabs {
+    height: 100%;
+  }
+  .arco-tabs-content {
+    padding-top: 0;
+  }
+}

package/lib/contentModal/style/storeBox.less

@@ -0,0 +1,45 @@
+.selected-store-box-popover-content {
+  padding: 0;
+  .batch-section-popover-main {
+    .item {
+      height: 35px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 5px 10px;
+      box-sizing: border-box;
+      .icon {
+        width: 20px;
+        height: 25px;
+        margin-right: 8px;
+        font-size: 18px;
+        vertical-align: middle;
+        display: inline-block;
+        text-align: center;
+      }
+      .left {
+        width: 90%;
+        display: inline-block;
+        align-items: center;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .close-btn {
+        display: none;
+      }
+      &:hover,
+      &:active {
+        background-color: #f6f6f6;
+        .close-btn {
+          display: block;
+        }
+      }
+    }
+  }
+  .options {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}

package/lib/hooks/batch.js

@@ -0,0 +1,27 @@
+"use strict";
+var vue = require("vue");
+const useTableBatch = () => {
+  const hoverTarget = vue.ref(null);
+  const isItemChecked = vue.computed(() => (selectedData, item) => {
+    return selectedData.map((row) => row.id).includes(item.id);
+  });
+  const hoverBatchBox = vue.computed(() => (selectedData, item) => {
+    return hoverTarget.value === item.id || isItemChecked.value(selectedData, item);
+  });
+  const tableCellMouseEnter = (record) => {
+    hoverTarget.value = record.id;
+  };
+  const tableCellMouseLeave = (record) => {
+    if (record.id === hoverTarget.value) {
+      hoverTarget.value = null;
+    }
+  };
+  return {
+    hoverTarget,
+    isItemChecked,
+    hoverBatchBox,
+    tableCellMouseEnter,
+    tableCellMouseLeave
+  };
+};
+module.exports = useTableBatch;