@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
272 lines (271 loc) • 8.87 kB
JavaScript
;
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 index$1 = require("../../../utils/index.js");
var api = require("../../script/api.js");
var typeMap = require("../../../utils/typeMap.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: "ContentList" },
__name: "index",
props: {
type: { default: "all" },
maxSelect: {},
outsideSelectData: {},
defaultSelectedData: {},
userInfo: {}
},
emits: ["change"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const props = __props;
const _maxSelect = props.maxSelect || 100;
const selectedData = vue.ref([]);
const groupData = vue.ref([]);
const group_id = vue.ref("all");
const mediaFileData = vue.ref([]);
const dataLoading = vue.ref(false);
const page = vue.ref({
index: 1,
size: 100,
total: 0
});
const filter = vue.ref(null);
const columns = [
{
title: "\u9891\u9053\u6807\u9898",
dataIndex: "title",
slotName: "title"
},
{
title: "\u9891\u9053\u7C7B\u578B",
dataIndex: "relation_type",
slotName: "relation_type"
},
{
title: "\u521B\u5EFA\u65F6\u95F4",
dataIndex: "created_at",
slotName: "created_at"
}
];
const scrollPercent = { y: "100%" };
const tempSelectedData = vue.computed(() => {
return props.defaultSelectedData || [];
});
const search = (_filter) => {
if (_filter.keyword || _filter.relation_type) {
filter.value = { ..._filter };
} else {
filter.value = null;
}
page.value.index = 1;
loadData();
};
const loadData = async () => {
const gid = group_id.value;
if (!gid)
return;
let params = {
rid: props.userInfo.repository_id,
state: 1,
group_type: 0
};
if (props.type !== "all") {
params.relation_type = props.type;
}
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$1.dateYYYYDDMMHHmm(v.publish_at);
v.created_at = index$1.dateYYYYDDMMHHmm(v.created_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;
switch (v.relation_type) {
case 0:
v._listType = "putongpindao";
break;
case 1:
v._listType = "lianjiepindao";
break;
case 2:
v._listType = "yinyongpindao";
break;
case 3:
v._listType = "zijipindao";
break;
}
return v;
}) || [];
}
};
const clickCheckbox = (e, record) => {
e.stopPropagation();
e.preventDefault();
selectData(record);
};
const selectTableCell = (record) => {
selectData(record);
};
const selectData = (record) => {
if (checkSameAdd(record)) {
webVue.Message.warning({ content: "\u8BF7\u52FF\u6DFB\u52A0\u91CD\u590D\u6570\u636E", duration: 3e3 });
return;
}
addDataToSelectedList(record);
};
const checkSameAdd = (record) => {
const selected = props.outsideSelectData;
if (!selected.length)
return false;
return selected.map((row) => row.id).includes(record.id);
};
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);
}
webVue.Message.warning({ content: "\u5DF2\u8FBE\u5230\u9009\u62E9\u6570\u91CF\u7684\u4E0A\u9650", duration: 3e3 });
emitChange();
}
};
const emitChange = () => {
emit("change", selectedData.value);
};
const getGroupData = async () => {
const params = {
rid: props.userInfo.repository_id,
cid: props.userInfo.default_wap_channel_id,
group_type: 0,
less: true,
active: true,
limit: 100,
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();
}
};
const {
isItemChecked,
hoverBatchBox,
tableCellMouseEnter,
tableCellMouseLeave
} = batch();
vue.watch(
() => tempSelectedData.value,
(val) => {
selectedData.value = val;
}
);
vue.watch(
() => group_id.value,
() => {
loadData();
}
);
vue.onMounted(() => {
getGroupData();
});
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),
groups: groupData.value,
type: props.type,
onSearch: search
}, null, 8, ["group_id", "groups", "type"]),
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)
])
]),
relation_type: vue.withCtx(({ record }) => [
vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(typeMap.contentList_relation_type_map)[record.relation_type] || "--"), 1)
]),
created_at: vue.withCtx(({ record }) => [
vue.createElementVNode("span", null, vue.toDisplayString(record.created_at), 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;