@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
355 lines (354 loc) • 12.2 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, unref, withCtx, toDisplayString, renderSlot, withDirectives, vShow } from "vue";
import _imports_0 from "../../images/pic-thumb.js";
import { Table, Checkbox, Pagination, Message } from "@arco-design/web-vue";
import _sfc_main$2 from "../../../typeIcons/component.js";
import _sfc_main$1 from "./MediaFilter/index.js";
import _sfc_main$3 from "../../../dataTags/component.js";
import useTableBatch from "../../../hooks/batch.js";
import { timeFormat } from "../../../utils/index.js";
import { getCategoryMediaNew, checkCommitFulfillment, getCategoryCategoriesTree } from "../../script/api.js";
const _hoisted_1 = { class: "view-all-column-container" };
const _hoisted_2 = { class: "content-table-view" };
const _hoisted_3 = ["src"];
const _hoisted_4 = {
key: 1,
alt: "",
class: "pic-thumb-img",
src: _imports_0
};
const _hoisted_5 = { class: "title-span" };
const _hoisted_6 = { class: "title" };
const _hoisted_7 = { class: "title-span" };
const _hoisted_8 = { class: "title-span" };
const _hoisted_9 = { class: "bottom-view" };
const _hoisted_10 = { class: "left" };
const _sfc_main = defineComponent({
...{ name: "ViewAllColumn" },
__name: "index",
props: {
maxSelect: {},
defaultSelectedData: {},
series: {},
banner: {},
userInfo: {}
},
emits: ["change"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const props = __props;
const _maxSelect = props.maxSelect || 100;
const selectedData = ref([]);
const categoryCascaderData = ref([]);
const listMinHeight = ref(0);
const mediaFileData = ref([]);
const filter = ref(null);
const page = ref({
index: 1,
size: 30,
total: 0
});
const tempSelectedData = computed(() => {
return props.defaultSelectedData || [];
});
watch(
() => tempSelectedData.value,
(val) => {
selectedData.value = val;
}
);
const importantBanner = computed(() => {
if (!props.banner || props.banner === "all")
return false;
return !!props.banner;
});
const {
isItemChecked,
tableCellMouseEnter,
tableCellMouseLeave
} = useTableBatch();
const selectTableCell = (record) => {
selectData(record);
};
const selectTableAll = (checked) => {
if (checked) {
selectedData.value = [];
mediaFileData.value.forEach((item) => selectData(item));
} else {
selectedData.value = [];
}
emitChange();
};
const selectData = (record) => {
if (importantBanner.value) {
const {
cover: { banner }
} = record;
if (!banner) {
return Message.warning({ content: "\u8BE5\u5185\u5BB9\u4E0D\u5177\u5907\u72EC\u7ACB\u8F6E\u64AD\u56FE" });
}
}
addDataToSelectedList(record);
return true;
};
const addDataToSelectedList = async (record) => {
const index = selectedData.value.findIndex((v) => v.id === record.id);
if (selectedData.value.length < _maxSelect) {
if (index === -1) {
if (await checkCommitFulfillment(props.userInfo.BASE_API, record)) {
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(0);
const scrollPercent = { y: "100%" };
const search = (_filter) => {
columns.value.some((e) => {
if (e.dataIndex === "pub_time") {
e.title = _filter.order === "create_time" ? "\u521B\u5EFA\u65F6\u95F4" : "\u53D1\u5E03\u65F6\u95F4";
return e;
}
return false;
});
_filter = { ..._filter };
const where = [];
_filter.precise_kw && where.push(`precise_kw:${_filter.precise_kw}`);
_filter.keywords && where.push(`kw:${_filter.keywords}`);
_filter.type && where.push(`series:${_filter.type}`);
_filter.state && where.push(`state:${_filter.state}`);
_filter.cover_type && where.push(`cover_type:${_filter.cover_type}`);
_filter.banner && where.push(`banner:${_filter.banner}`);
if (_filter.publish_date && Array.isArray(_filter.publish_date) && _filter.publish_date.length > 0) {
where.push(`publish_from:${_filter.publish_date[0] / 1e3}`);
where.push(`publish_to:${_filter.publish_date[1] / 1e3}`);
}
_filter.where = where;
filter.value = { ..._filter };
page.value.index = 1;
loadData();
};
const pageChangeHandle = (index) => {
page.value.index = index;
loadData();
};
watch(
() => group_id.value,
() => {
page.value.index = 1;
loadData();
}
);
const loadColumnTreeNode = async () => {
const { code, message } = await 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 columns = ref([
{
title: "\u52FE",
dataIndex: "select",
slotName: "select",
width: 40,
titleSlotName: "selectTitle"
},
{
title: "\u5C01\u9762",
dataIndex: "cover",
slotName: "cover",
width: 92
},
{
title: "\u6807\u9898",
dataIndex: "title",
slotName: "title",
width: 428
},
{
title: "\u7C7B\u578B",
dataIndex: "series",
slotName: "series",
width: 170
},
{
title: "\u7F16\u8F91",
dataIndex: "duty_editor",
slotName: "duty_editor",
width: 100
},
{
title: "\u53D1\u5E03\u65F6\u95F4",
dataIndex: "pub_time",
slotName: "pub_time",
width: 150
}
]);
const importantSeries = computed(() => {
return props.series !== "all";
});
const dataLoading = 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 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.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;
}
};
onMounted(() => {
loadColumnTreeNode();
loadData();
});
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),
banner: _ctx.banner,
height: listMinHeight.value,
series: props.series,
tree: categoryCascaderData.value,
"user-info": props.userInfo,
onSearch: search
}, null, 8, ["group_id", "banner", "height", "series", "tree", "user-info"]),
createElementVNode("div", _hoisted_2, [
createVNode(unref(Table), {
bordered: false,
columns: columns.value,
data: mediaFileData.value,
pagination: false,
loading: dataLoading.value,
scroll: scrollPercent,
onCellMouseEnter: unref(tableCellMouseEnter),
onCellMouseLeave: unref(tableCellMouseLeave),
onRowClick: selectTableCell
}, {
selectTitle: withCtx(() => [
createVNode(unref(Checkbox), {
"model-value": selectedData.value.length === mediaFileData.value.length,
class: "icon",
onChange: selectTableAll
}, null, 8, ["model-value"])
]),
select: withCtx(({ record }) => [
createVNode(unref(Checkbox), {
"model-value": unref(isItemChecked)(selectedData.value, record),
class: "icon"
}, null, 8, ["model-value"])
]),
cover: withCtx(({ record }) => {
var _a, _b, _c, _d, _e, _f;
return [
((_c = (_b = (_a = record.cover) == null ? void 0 : _a.data) == null ? void 0 : _b[0]) == null ? void 0 : _c.thumb) ? (openBlock(), createElementBlock("img", {
key: 0,
src: (_f = (_e = (_d = record.cover) == null ? void 0 : _d.data) == null ? void 0 : _e[0]) == null ? void 0 : _f.thumb,
alt: "",
class: "pic-thumb-img"
}, null, 8, _hoisted_3)) : (openBlock(), createElementBlock("img", _hoisted_4))
];
}),
title: withCtx(({ record }) => [
createElementVNode("span", _hoisted_5, [
createVNode(_sfc_main$2, {
type: record.series,
class: "icon",
doc: ""
}, null, 8, ["type"]),
createElementVNode("span", _hoisted_6, toDisplayString(record.title || record.alias || "--"), 1)
])
]),
series: withCtx(({ record }) => [
createVNode(_sfc_main$3, { item: record }, null, 8, ["item"])
]),
duty_editor: withCtx(({ record }) => [
createElementVNode("span", _hoisted_7, [
createElementVNode("span", null, toDisplayString(record.duty_editor || "--"), 1)
])
]),
pub_time: withCtx(({ record }) => [
createElementVNode("span", _hoisted_8, [
createElementVNode("span", null, toDisplayString(unref(timeFormat)(record.pub_time)), 1)
])
]),
_: 1
}, 8, ["columns", "data", "loading", "onCellMouseEnter", "onCellMouseLeave"])
]),
createElementVNode("div", _hoisted_9, [
createElementVNode("div", _hoisted_10, [
renderSlot(_ctx.$slots, "store"),
withDirectives(createVNode(unref(Pagination), {
current: page.value.index,
"page-size": page.value.size,
total: page.value.total,
onChange: pageChangeHandle
}, null, 8, ["current", "page-size", "total"]), [
[vShow, mediaFileData.value.length > 0]
])
]),
renderSlot(_ctx.$slots, "options")
])
]);
};
}
});
export { _sfc_main as default };