@cmstops/pro-compo 0.1.2 → 0.1.4

package/lib/contentModal/component.js

@@ -0,0 +1,176 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var index = require("./components/ViewAllColumn/index.js");
+var index$2 = require("./components/CompoList/index.js");
+var index$1 = require("./components/storeBox/index.js");
+require("../typeIcons/style/index.js");
+var config = require("../config.js");
+var user = require("../hooks/user.js");
+const _sfc_main = vue.defineComponent({
+  ...{ name: "contentModal" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    visible: { type: Boolean },
+    title: {},
+    defaultSelectedData: {},
+    maxSelect: {},
+    typeData: {},
+    userStore: {}
+  },
+  emits: ["update:visible", "comfirm"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const visible = vue.computed({
+      get() {
+        return props.visible;
+      },
+      set(value) {
+        setVisible(value);
+      }
+    });
+    const selectedData = vue.ref([]);
+    const hasSelected = vue.computed(() => {
+      return selectedData.value.length > 0;
+    });
+    const typeDataController = vue.ref(props.typeData);
+    const setVisible = (bool) => {
+      emit("update:visible", bool);
+    };
+    const selectedDataChangeHandle = (data) => {
+      selectedData.value = data;
+    };
+    const handleOk = () => {
+      setVisible(false);
+    };
+    const handleCancel = () => {
+      setVisible(false);
+    };
+    const comfirm = () => {
+      emit("comfirm", JSON.parse(JSON.stringify(selectedData.value)));
+    };
+    const { userInfo, getUserInfoHandle } = user["default"](BASE_API);
+    const HandleOpen = () => {
+      selectedData.value = props.defaultSelectedData || [];
+    };
+    const HandleClose = () => {
+      selectedData.value = [];
+    };
+    vue.onMounted(() => {
+      if (props.userStore) {
+        userInfo.value = { BASE_API, ...props.userStore };
+      } else {
+        getUserInfoHandle();
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Modal), {
+        visible: visible.value,
+        width: "986px",
+        "mask-closable": false,
+        footer: false,
+        "title-align": "start",
+        "unmount-on-close": "",
+        "modal-class": "add-content-modal-wrapper",
+        "body-class": "add-content-modal-body",
+        onOk: handleOk,
+        onOpen: HandleOpen,
+        onClose: HandleClose,
+        onCancel: handleCancel
+      }, {
+        title: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(props.title ? props.title : "\u6DFB\u52A0\u5185\u5BB9"), 1)
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(webVue.Tabs), {
+            class: "content-tabs",
+            justify: ""
+          }, {
+            default: vue.withCtx(() => [
+              typeDataController.value.addDoc ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.TabPane), {
+                key: "1",
+                title: "\u680F\u76EE"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.unref(userInfo) && vue.unref(userInfo).repository_id ? (vue.openBlock(), vue.createBlock(index, {
+                    key: 0,
+                    "max-select": _ctx.maxSelect,
+                    "default-selected-data": selectedData.value,
+                    "type-data": typeDataController.value,
+                    series: typeDataController.value.docSeries,
+                    banner: typeDataController.value.docBanner,
+                    "user-info": vue.unref(userInfo),
+                    onChange: selectedDataChangeHandle
+                  }, {
+                    store: vue.withCtx(() => [
+                      vue.createVNode(index$1, {
+                        selectData: selectedData.value,
+                        "onUpdate:selectData": _cache[0] || (_cache[0] = ($event) => selectedData.value = $event)
+                      }, null, 8, ["selectData"])
+                    ]),
+                    options: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(webVue.Button), {
+                        type: "primary",
+                        disabled: !hasSelected.value,
+                        onClick: comfirm
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode("\u6DFB\u52A0")
+                        ]),
+                        _: 1
+                      }, 8, ["disabled"])
+                    ]),
+                    _: 1
+                  }, 8, ["max-select", "default-selected-data", "type-data", "series", "banner", "user-info"])) : vue.createCommentVNode("v-if", true)
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("v-if", true),
+              typeDataController.value.addCompo ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.TabPane), {
+                key: "2",
+                title: "\u7EC4\u4EF6"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.unref(userInfo) && vue.unref(userInfo).repository_id ? (vue.openBlock(), vue.createBlock(index$2, {
+                    key: 0,
+                    "max-select": _ctx.maxSelect,
+                    "default-selected-data": selectedData.value,
+                    "type-data": typeDataController.value,
+                    columns: typeDataController.value.compoType,
+                    "user-info": vue.unref(userInfo),
+                    onChange: selectedDataChangeHandle
+                  }, {
+                    store: vue.withCtx(() => [
+                      vue.createVNode(index$1, {
+                        selectData: selectedData.value,
+                        "onUpdate:selectData": _cache[1] || (_cache[1] = ($event) => selectedData.value = $event)
+                      }, null, 8, ["selectData"])
+                    ]),
+                    options: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(webVue.Button), {
+                        type: "primary",
+                        disabled: !hasSelected.value,
+                        onClick: comfirm
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode("\u6DFB\u52A0")
+                        ]),
+                        _: 1
+                      }, 8, ["disabled"])
+                    ]),
+                    _: 1
+                  }, 8, ["max-select", "default-selected-data", "type-data", "columns", "user-info"])) : vue.createCommentVNode("v-if", true)
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/contentModal/components/CompoList/CompoFilter/index.js

@@ -0,0 +1,104 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var typeMap = require("../../../../utils/typeMap.js");
+const _hoisted_1 = { class: "media-filter-container" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "CompoFilter" },
+  __name: "index",
+  props: {
+    group_id: {},
+    groups: {},
+    userInfo: {}
+  },
+  emits: ["update:group_id", "search"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const columnIdMap = typeMap.compoColumnsMap();
+    const filter = vue.ref({ keyword: "", columns: "" });
+    const groupId = vue.computed({
+      get() {
+        return props.group_id;
+      },
+      set(val) {
+        emit("update:group_id", val);
+      }
+    });
+    const typeOptions = vue.computed(() => {
+      const arr = Object.keys(columnIdMap).map((key) => {
+        return {
+          label: columnIdMap[key],
+          value: key
+        };
+      });
+      return [{ value: "", label: "\u5168\u90E8\u7C7B\u578B" }, ...arr];
+    });
+    const groupOptions = vue.computed(() => {
+      const arr = props.groups.map((item) => {
+        return {
+          label: item.alias || item.title,
+          value: item.id
+        };
+      });
+      return [{ value: "all", label: "\u5168\u90E8\u7EC4\u4EF6" }, ...arr];
+    });
+    const handleSearch = () => {
+      emit("search", filter.value);
+    };
+    vue.watch(filter.value, () => {
+      handleSearch();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(webVue.Space), { size: "large" }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.Select), {
+              modelValue: groupId.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => groupId.value = $event),
+              class: "filter-item",
+              placeholder: "\u7EC4\u4EF6\u5206\u7C7B"
+            }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(groupOptions.value, (item) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                    key: item.value,
+                    label: item.label,
+                    value: item.value
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            vue.createVNode(vue.unref(webVue.Select), {
+              modelValue: filter.value.columns,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filter.value.columns = $event),
+              class: "filter-item",
+              placeholder: "\u7C7B\u578B"
+            }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(typeOptions.value, (item) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                    key: item.value,
+                    label: item.label,
+                    value: item.value
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            vue.createVNode(vue.unref(webVue.Input), {
+              modelValue: filter.value.keyword,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filter.value.keyword = $event),
+              class: "filter-item",
+              "allow-clear": "",
+              placeholder: "\u8F93\u5165\u7EC4\u4EF6\u6807\u9898\u67E5\u627E",
+              onPressEnter: handleSearch
+            }, null, 8, ["modelValue"])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,235 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var component = require("../../../typeIcons/component.js");
+var index$1 = require("./CompoFilter/index.js");
+var batch = require("../../../hooks/batch.js");
+var api = require("../../script/api.js");
+var typeMap = require("../../../utils/typeMap.js");
+var index = require("../../../utils/index.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: "CompoList" },
+  __name: "index",
+  props: {
+    maxSelect: {},
+    defaultSelectedData: {},
+    typeData: {},
+    userInfo: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const columnIdMap = typeMap.compoColumnsMap();
+    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 {
+      isItemChecked,
+      hoverBatchBox,
+      tableCellMouseEnter,
+      tableCellMouseLeave
+    } = batch();
+    const clickCheckbox = (e, record) => {
+      e.stopPropagation();
+      e.preventDefault();
+      selectData(record);
+    };
+    const selectTableCell = (record) => {
+      selectData(record);
+    };
+    const selectData = (record) => {
+      addDataToSelectedList(record);
+    };
+    const addDataToSelectedList = async (record) => {
+      const index2 = selectedData.value.findIndex((v) => v.id === record.id);
+      if (selectedData.value.length < _maxSelect) {
+        if (index2 === -1) {
+          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("all");
+    const groupData = vue.ref([]);
+    const scrollPercent = { y: "100%" };
+    const search = (_filter) => {
+      if (_filter.keyword || _filter.columns) {
+        filter.value = { ..._filter };
+      } else {
+        filter.value = null;
+      }
+      loadData();
+    };
+    vue.watch(
+      () => group_id.value,
+      () => {
+        loadData();
+      }
+    );
+    const columns = [
+      {
+        title: "\u7EC4\u4EF6\u6807\u9898",
+        dataIndex: "title",
+        slotName: "title"
+      },
+      {
+        title: "\u7EC4\u4EF6\u7C7B\u578B",
+        dataIndex: "type",
+        slotName: "type"
+      },
+      {
+        title: "\u53D1\u5E03\u65F6\u95F4",
+        dataIndex: "pub_time",
+        slotName: "pub_time"
+      }
+    ];
+    const mediaFileData = vue.ref([]);
+    const filter = vue.ref(null);
+    const dataLoading = vue.ref(false);
+    const loadData = async () => {
+      const gid = group_id.value;
+      if (!gid)
+        return;
+      let params = {
+        rid: props.userInfo.repository_id,
+        state: 1,
+        group_type: 2
+      };
+      if (filter.value) {
+        params = { ...params, ...filter.value };
+      }
+      if (gid !== "all") {
+        params.gid = gid;
+      }
+      dataLoading.value = true;
+      const { code, message } = await api.searchMlists(props.userInfo.BASE_API, params);
+      dataLoading.value = false;
+      if (code === 0) {
+        mediaFileData.value = message.map((v) => {
+          v.catalog = "contentList";
+          v.channel_type = 1;
+          v.target_id = v.id;
+          v.target_type = 6;
+          v.pub_time = index.dateYYYYDDMMHHmm(v.publish_at);
+          v.update_time = v.updated_at;
+          v.pub_user_alias = v.publish_user_alias;
+          v.creator_alias = v.creator_alias || v.author_alias;
+          v._type = 2;
+          return v;
+        }) || [];
+      }
+    };
+    const getGroupData = async () => {
+      const params = {
+        rid: props.userInfo.repository_id,
+        cid: props.userInfo.default_wap_channel_id,
+        group_type: 2,
+        less: true,
+        active: true,
+        limit: 500,
+        offset: 0
+      };
+      const { code, message } = await api.getCategorylistsGroups(
+        props.userInfo.BASE_API,
+        params
+      );
+      if (code === 0 && message) {
+        const { groups } = message;
+        groupData.value = groups.map((v) => {
+          v._type = 1;
+          v.catalog = "group";
+          return v;
+        });
+        loadData();
+      }
+    };
+    vue.onMounted(() => {
+      getGroupData();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(index$1, {
+          group_id: group_id.value,
+          "onUpdate:group_id": _cache[0] || (_cache[0] = ($event) => group_id.value = $event),
+          groups: groupData.value,
+          "user-info": props.userInfo,
+          onSearch: search
+        }, null, 8, ["group_id", "groups", "user-info"]),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(vue.unref(webVue.Table), {
+            columns,
+            scroll: scrollPercent,
+            pagination: false,
+            bordered: false,
+            data: mediaFileData.value,
+            loading: dataLoading.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",
+                  type: record.series
+                }, null, 8, ["type"])),
+                vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(record.title || record.alias || "--"), 1)
+              ])
+            ]),
+            type: vue.withCtx(({ record }) => [
+              vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(columnIdMap)[record.columns]), 1)
+            ]),
+            pub_time: vue.withCtx(({ record }) => [
+              vue.createElementVNode("span", null, vue.toDisplayString(record.pub_time), 1)
+            ]),
+            _: 1
+          }, 8, ["data", "loading", "onCellMouseEnter", "onCellMouseLeave"])
+        ]),
+        vue.createElementVNode("div", _hoisted_6, [
+          vue.createElementVNode("div", _hoisted_7, [
+            vue.renderSlot(_ctx.$slots, "store")
+          ]),
+          vue.renderSlot(_ctx.$slots, "options")
+        ])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,45 @@
+"use strict";
+var vue = require("vue");
+var index = require("../columnTree/index.js");
+const _hoisted_1 = { class: "media-filter-container" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "MediaFilter" },
+  __name: "index",
+  props: {
+    group_id: {},
+    tree: {},
+    series: {},
+    banner: {},
+    height: {},
+    userInfo: {}
+  },
+  emits: ["update:group_id"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const column_id = vue.ref(0);
+    vue.watch(
+      () => props.group_id,
+      (val) => {
+        column_id.value = val;
+      }
+    );
+    vue.watch(
+      () => column_id.value,
+      (val) => {
+        emit("update:group_id", val);
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(index, {
+          column_id: column_id.value,
+          "onUpdate:column_id": _cache[0] || (_cache[0] = ($event) => column_id.value = $event),
+          height: props.height,
+          tree: props.tree,
+          "user-info": props.userInfo
+        }, null, 8, ["column_id", "height", "tree", "user-info"])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,102 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var api = require("../../../script/api.js");
+const _hoisted_1 = { class: "column-selection-container" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "columnTree" },
+  __name: "index",
+  props: {
+    column_id: {},
+    tree: {},
+    height: {},
+    userInfo: {}
+  },
+  emits: ["update:column_id"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const selectAlais = vue.ref("");
+    const treeOptions = {
+      title: "alias",
+      isLeaf: "leaf"
+    };
+    vue.watch(
+      () => props.column_id,
+      (val) => {
+        setSelectAlais(val);
+      }
+    );
+    const setSelectAlais = async (id) => {
+      if (id === "all") {
+        selectAlais.value = "\u5168\u90E8\u5185\u5BB9";
+        return;
+      }
+      const { code, message } = await api.getCategoryPath(props.userInfo.BASE_API, {
+        repo: props.userInfo.repository_id,
+        category: id
+      });
+      if (code === 0) {
+        const pathArr = [];
+        for (const i of message) {
+          pathArr.push(i.category_alias);
+        }
+        selectAlais.value = pathArr.join("/");
+      }
+    };
+    const AddColumnSelected = (selectedKeys, data) => {
+      emit("update:column_id", data.node.id);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(webVue.Popover), {
+          position: "bottom",
+          "content-class": "column-selection-popover-content",
+          "content-style": { minWidth: "120px" },
+          trigger: "click"
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "column-selection-main",
+              style: vue.normalizeStyle({ minHeight: props.height + "px" })
+            }, [
+              vue.createElementVNode("div", {
+                class: "column-v",
+                style: vue.normalizeStyle({ height: props.height + "px" })
+              }, [
+                vue.createVNode(vue.unref(webVue.Scrollbar), {
+                  "outer-class": "column-outer-scrollbar",
+                  style: { "height": "100%", "overflow": "auto" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(webVue.Tree), {
+                      "block-node": "",
+                      data: props.tree,
+                      "check-strictly": "",
+                      "default-expand-all": false,
+                      "field-names": treeOptions,
+                      onSelect: AddColumnSelected
+                    }, null, 8, ["data"])
+                  ]),
+                  _: 1
+                })
+              ], 4)
+            ], 4)
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.Button), { class: "button" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(icon.IconDragDotVertical)),
+                vue.createTextVNode(vue.toDisplayString(selectAlais.value), 1),
+                vue.createVNode(vue.unref(icon.IconCaretRight))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;