@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
267 lines (266 loc) • 8.68 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, unref, withCtx, withModifiers, createBlock, toDisplayString, renderSlot } from "vue";
import { Table, Checkbox, Message } from "@arco-design/web-vue";
import _sfc_main$2 from "../../../typeIcons/component.js";
import _sfc_main$1 from "./CompoFilter/index.js";
import useTableBatch from "../../../hooks/batch.js";
import { searchMlists, getCategorylistsGroups } from "../../script/api.js";
import { compoColumnsMap } from "../../../utils/typeMap.js";
import { timeFormat } from "../../../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 = defineComponent({
...{ name: "CompoList" },
__name: "index",
props: {
maxSelect: {},
outsideSelectData: {},
defaultSelectedData: {},
typeData: {},
userInfo: {},
compoFilter: { type: Boolean },
type: {}
},
emits: ["change"],
setup(__props, { emit: __emit }) {
const columnIdMap = (compo) => {
if ((compo == null ? void 0 : compo.term_switch) === 1) {
return "PC\u6A21\u5757";
}
const _type = compoColumnsMap();
return _type[compo.columns];
};
const emit = __emit;
const props = __props;
const _maxSelect = props.maxSelect || 100;
const selectedData = ref([]);
const tempSelectedData = computed(() => {
return props.defaultSelectedData || [];
});
watch(
() => tempSelectedData.value,
(val) => {
selectedData.value = val;
}
);
const {
isItemChecked,
hoverBatchBox,
tableCellMouseEnter,
tableCellMouseLeave
} = useTableBatch();
const clickCheckbox = (e, record) => {
e.stopPropagation();
e.preventDefault();
selectData(record);
};
const selectTableCell = (record) => {
selectData(record);
};
const selectData = (record) => {
if (checkSameAdd(record)) {
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 index = selectedData.value.findIndex((v) => v.id === record.id);
if (selectedData.value.length < _maxSelect) {
if (index === -1) {
selectedData.value.push(record);
} else {
selectedData.value.splice(index, 1);
}
emitChange();
} else {
if (index === -1) {
selectedData.value.splice(selectedData.value.length - 1, 1);
selectedData.value.push(record);
} else {
selectedData.value.splice(index, 1);
}
emitChange();
}
};
const emitChange = () => {
emit("change", selectedData.value);
};
const group_id = ref("all");
const groupData = ref([]);
const scrollPercent = { y: "100%" };
const search = (_filter) => {
if (_filter.keyword || _filter.columns) {
filter.value = { ..._filter };
} else {
filter.value = null;
}
loadData();
};
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 = ref([]);
const filter = ref(null);
const dataLoading = 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 (props.type !== "all") {
params.columns = props.type;
}
if (filter.value) {
if (!filter.value.columns) {
filter.value.columns = props.type;
}
params = { ...params, ...filter.value };
}
if (gid !== "all") {
params.gid = gid;
}
dataLoading.value = true;
const { code, message } = await 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 = 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;
}) || [];
if (props.compoFilter) {
mediaFileData.value = mediaFileData.value.filter(
(x) => x.term_switch !== 1
);
}
}
};
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 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();
}
};
onMounted(() => {
getGroupData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_sfc_main$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,
type: _ctx.type,
onSearch: search
}, null, 8, ["group_id", "groups", "user-info", "type"]),
createElementVNode("div", _hoisted_2, [
createVNode(unref(Table), {
columns,
scroll: scrollPercent,
pagination: false,
bordered: false,
data: mediaFileData.value,
loading: dataLoading.value,
onCellMouseEnter: unref(tableCellMouseEnter),
onCellMouseLeave: unref(tableCellMouseLeave),
onRowClick: selectTableCell
}, {
title: withCtx(({ record }) => [
createElementVNode("span", _hoisted_3, [
unref(hoverBatchBox)(selectedData.value, record) ? (openBlock(), createElementBlock("span", {
key: 0,
onClick: withModifiers(($event) => clickCheckbox($event, record), ["stop"])
}, [
createVNode(unref(Checkbox), {
class: "icon",
"model-value": unref(isItemChecked)(selectedData.value, record)
}, null, 8, ["model-value"])
], 8, _hoisted_4)) : (openBlock(), createBlock(_sfc_main$2, {
key: 1,
class: "icon",
type: record.series
}, null, 8, ["type"])),
createElementVNode("span", _hoisted_5, toDisplayString(record.title || record.alias || "--"), 1)
])
]),
type: withCtx(({ record }) => [
createElementVNode("span", null, toDisplayString(columnIdMap(record)), 1)
]),
pub_time: withCtx(({ record }) => [
createElementVNode("span", null, toDisplayString(unref(timeFormat)(record.pub_time)), 1)
]),
_: 1
}, 8, ["data", "loading", "onCellMouseEnter", "onCellMouseLeave"])
]),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", _hoisted_7, [
renderSlot(_ctx.$slots, "store")
]),
renderSlot(_ctx.$slots, "options")
])
]);
};
}
});
export { _sfc_main as default };