@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
380 lines (379 loc) • 13.9 kB
JavaScript
;
var vue = require("vue");
var webVue = require("@arco-design/web-vue");
var icon = require("@arco-design/web-vue/es/icon");
var config = require("../config.js");
var auth = require("../utils/auth.js");
var user = require("../hooks/user.js");
var api = require("./script/api.js");
const _hoisted_1 = { class: "select-view" };
const _hoisted_2 = { class: "view-line line1" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "alias" };
const _hoisted_5 = { class: "icon" };
const _hoisted_6 = { class: "view-line line2" };
const _hoisted_7 = ["onClick"];
const _hoisted_8 = { class: "alias" };
const _hoisted_9 = { class: "icon" };
const _hoisted_10 = { class: "view-line line3" };
const _hoisted_11 = ["onClick"];
const _hoisted_12 = { class: "alias" };
const _hoisted_13 = { class: "icon" };
const _hoisted_14 = ["onClick"];
const _hoisted_15 = ["onClick"];
const _hoisted_16 = {
key: 0,
class: "temp-view"
};
const _hoisted_17 = { class: "select-ul" };
const _sfc_main = vue.defineComponent({
...{ name: "previousVersion" },
__name: "component",
props: {
BASE_API: {},
visible: { type: Boolean },
title: {},
targetArr: {}
},
emits: ["update:visible", "cancel"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
const title = props.title || "\u4E0A\u7248";
const targetArr = vue.computed(() => {
return props.targetArr || [];
});
const batch = vue.computed(() => {
return targetArr.value.length > 1;
});
const dialogVisible = vue.computed({
get() {
return props.visible;
},
set(value) {
emit("cancel", value);
emit("update:visible", value);
}
});
const loading = vue.ref(false);
const cancelHandle = () => {
emit("cancel", false);
emit("update:visible", false);
};
const repoId = auth.getRID() || 4;
let channelList = [];
const line1Array = vue.ref([]);
const line2Array = vue.ref([]);
const line3Array = vue.ref([]);
const activeData = vue.reactive({
line1Active: -1,
line2Active: -1,
line3Active: -1
});
const selectList = vue.reactive([]);
const addHandle = (item) => {
if (selectList.length > 0 && batch.value) {
webVue.Notification.warning({
content: "\u6279\u91CF\u7A3F\u4EF6\u53EA\u5141\u8BB8\u9009\u62E9\u4E00\u4E2A\u53D1\u5E03\u9891\u9053",
closable: true,
title: "\u63D0\u793A",
duration: 1e5
});
} else {
selectList.push({
alias: item.alias,
list_id: item.id,
relation_type: item.relation_type
});
}
};
const removeHandle = (id) => {
const index = selectList.findIndex((item) => item.list_id === id);
selectList.splice(index, 1);
};
const confirmHandle = async () => {
var _a;
let media_ids = [];
if (batch.value) {
media_ids = targetArr.value.map((item) => item.id);
} else {
media_ids = [parseInt(((_a = targetArr.value[0]) == null ? void 0 : _a.id) || "", 10)];
}
const to_category = {
lists: [],
medias: []
};
const to_mobile = {
data: []
};
const to_matrix = {
account_ids: [],
media_ids
};
selectList.forEach((v) => {
media_ids.forEach((media_id) => {
to_mobile.data.push({
list_id: v.list_id,
target_id: media_id,
target_type: 3,
relation_type: 5
});
});
});
const params = {
to_category,
to_mobile,
to_matrix,
repo_id: repoId
};
const { code } = await api.submitTo(BASE_API, params);
if (code === 0) {
webVue.Notification.success({
title: "\u6210\u529F",
content: "\u63D0\u4EA4\u6210\u529F"
});
}
webVue.Notification.success("\u6267\u884C\u5B8C\u6BD5");
};
const filterHandle = (dirType, arrData) => {
let target = targetArr.value[0];
if (batch.value) {
target = { series: "all" };
}
if (dirType === "contentList") {
arrData = arrData.filter((item) => {
return ![1, 2, 3, 4].includes(item.relation_type);
});
}
if (dirType === "componentList") {
const arr = ["tv", "radio"];
arrData = arrData.filter((item) => {
if (!["svideo", "all"].includes(target.series))
arr.push("svideo");
if (!["special_v3", "all"].includes(target.series))
arr.push("special");
return !arr.includes(item.columns);
});
}
return arrData;
};
const getMList = async (line2Item) => {
loading.value = true;
const params = {
rid: repoId,
cid: line2Item.channel_id,
gid: line2Item.id
};
const res = await api.getMlists(BASE_API, params);
line3Array.value = res.message.map((x) => {
x.icon = "iconfont icon-pailie-";
if (x.location)
x.icon = "iconfont icon-shouping";
x.catalog = "contentList";
x.channel_type = 1;
x.leaf = true;
x.select = true;
return x;
}) || [];
line3Array.value = filterHandle(line2Item.catalog, line3Array.value);
activeHandle(0, "line3");
loading.value = false;
};
const getListGroup = async (line1Item) => {
loading.value = true;
const params = {
rid: repoId,
cid: line1Item.channel_id,
group_type: line1Item.id,
offset: 0,
limit: 100,
less: true
};
const res = await api.getCategorylistsGroups(BASE_API, params);
line2Array.value = res.message.map((x) => {
if (x.list_count === 0) {
x.leaf = true;
}
x.icon = "iconfont icon-tuceng";
x.catalog = line1Item.id === 0 ? "contentList" : "componentList";
x.channel_type = 1;
return x;
}) || [];
activeHandle(0, "line2");
};
const getChannelsData = () => {
loading.value = true;
user.getChannels(BASE_API, { repository_id: repoId }).then((res) => {
channelList = res.message.map((item) => {
if (item.platform_type === "default_pc") {
line1Array.value = [
{
alias: "\u7248\u9762\u9009\u62E9",
icon: "iconfont icon-zichanku-",
id: 0,
channel_id: item.id,
FK: "contentList",
key: "pc_content"
}
];
}
if (item.platform_type === "default_wap") {
line1Array.value = [
{
alias: "\u7248\u9762\u9009\u62E9",
icon: "iconfont icon-zichanku-",
id: 0,
channel_id: item.id,
key: "app_content",
FK: "contentList"
},
{
alias: "\u7EC4\u4EF6\u9009\u62E9",
icon: "iconfont icon-tubiaozhizuomoban-",
id: 2,
channel_id: item.id,
key: "app_component",
FK: "componentList"
}
];
}
return item;
});
channelList = channelList.filter((v) => v.platform_type === "default_wap");
activeHandle(0, "line1");
});
};
const activeHandle = (index, type) => {
if (type === "line1") {
activeData.line1Active = index;
getListGroup(line1Array.value[index]);
} else if (type === "line2") {
activeData.line2Active = index;
getMList(line2Array.value[index]);
} else if (type === "line3") {
activeData.line3Active = index;
}
};
vue.watch(
dialogVisible,
() => {
if (dialogVisible.value) {
getChannelsData();
selectList.splice(0, selectList.length);
}
},
{ immediate: true }
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(webVue.Modal), {
visible: dialogVisible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => dialogVisible.value = $event),
class: "previous-version",
"title-align": "start",
"body-class": "previous-version-modal-body",
width: "60%",
title: vue.unref(title),
onCancel: cancelHandle,
onOk: confirmHandle
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(webVue.Spin), {
style: { "width": "100%", "height": "100%" },
loading: loading.value
}, {
default: vue.withCtx(() => [
vue.createElementVNode("section", _hoisted_1, [
vue.createElementVNode("section", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(line1Array.value, (line1Item, index) => {
return vue.openBlock(), vue.createElementBlock("section", {
key: index,
class: vue.normalizeClass([{ active: index === activeData.line1Active }, "row"]),
onClick: ($event) => activeHandle(index, "line1")
}, [
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("span", _hoisted_5, [
vue.createVNode(vue.unref(icon.IconApps))
]),
vue.createElementVNode("span", null, vue.toDisplayString(line1Item.alias), 1)
])
], 10, _hoisted_3);
}), 128))
]),
vue.createElementVNode("section", _hoisted_6, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(line2Array.value, (line2Item, index) => {
return vue.openBlock(), vue.createElementBlock("section", {
key: index,
class: vue.normalizeClass([{ active: index === activeData.line2Active }, "row"]),
onClick: ($event) => activeHandle(index, "line2")
}, [
vue.createElementVNode("div", _hoisted_8, [
vue.createElementVNode("span", _hoisted_9, [
vue.createVNode(vue.unref(icon.IconList))
]),
vue.createElementVNode("span", null, vue.toDisplayString(line2Item.alias), 1)
])
], 10, _hoisted_7);
}), 128))
]),
vue.createElementVNode("section", _hoisted_10, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(line3Array.value, (line3Item, index) => {
return vue.openBlock(), vue.createElementBlock("section", {
key: line3Item.id,
class: vue.normalizeClass(["row", { active: index === activeData.line3Active }]),
onClick: ($event) => activeHandle(index, "line3")
}, [
vue.createElementVNode("div", _hoisted_12, [
vue.createElementVNode("span", _hoisted_13, [
vue.createVNode(vue.unref(icon.IconCopy))
]),
vue.createElementVNode("span", null, vue.toDisplayString(line3Item.alias), 1)
]),
selectList.findIndex((si) => line3Item.id === si.list_id) === -1 ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: "right",
onClick: ($event) => addHandle(line3Item)
}, [
vue.createVNode(vue.unref(icon.IconPlusCircle))
], 8, _hoisted_14)) : (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: "right",
onClick: ($event) => removeHandle(line3Item.icon)
}, [
vue.createVNode(vue.unref(icon.IconMinusCircle))
], 8, _hoisted_15))
], 10, _hoisted_11);
}), 128))
])
]),
selectList.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_16, [
_cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, "\u5DF2\u9009\u62E9\uFF1A", -1)),
vue.createElementVNode("div", _hoisted_17, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectList, (select) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: select.list_id,
class: "select-li"
}, [
vue.createVNode(vue.unref(webVue.Tag), {
closable: "",
onClose: ($event) => removeHandle(select.list_id)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(select.alias), 1)
]),
_: 2
}, 1032, ["onClose"])
]);
}), 128))
])
])) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["loading"])
]),
_: 1
}, 8, ["visible", "title"]);
};
}
});
module.exports = _sfc_main;