@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
239 lines (238 loc) • 8.62 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, unref, withCtx, withModifiers, createBlock, toDisplayString, renderSlot, withDirectives, vShow } from "vue";
import _imports_0 from "../../images/user.js";
import { Table, Checkbox, Pagination, Message } from "@arco-design/web-vue";
import _sfc_main$2 from "../../../typeIcons/component.js";
import _sfc_main$1 from "./MpAccountFilter/index.js";
import useTableBatch from "../../../hooks/batch.js";
import { searchMpaccount } from "../../script/api.js";
import { key_target_type_map, mp_type_map } from "../../../utils/typeMap.js";
const _hoisted_1 = { class: "view-all-column-container" };
const _hoisted_2 = { class: "content-table-view" };
const _hoisted_3 = { class: "mp_title-span" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "title" };
const _hoisted_6 = ["src"];
const _hoisted_7 = {
key: 1,
class: "user-avatar",
src: _imports_0
};
const _hoisted_8 = { class: "bottom-view" };
const _hoisted_9 = { class: "left" };
const _sfc_main = defineComponent({
...{ name: "MpAccountList" },
__name: "index",
props: {
maxSelect: {},
userInfo: {},
outsideSelectData: {},
defaultSelectedData: {}
},
emits: ["change"],
setup(__props, { emit: __emit }) {
var _a, _b, _c;
const emit = __emit;
const props = __props;
const _maxSelect = props.maxSelect || 100;
const selectedData = ref([]);
const group_id = ref("all");
const mediaFileData = ref([]);
const dataLoading = ref(false);
const page = ref({
index: 1,
size: 30,
total: 0
});
const filter = ref(null);
const scrollPercent = { y: "100%" };
const mpName = ((_c = (_b = (_a = window.situoyun) == null ? void 0 : _a.config) == null ? void 0 : _b.oem_config) == null ? void 0 : _c.mp_name) || "\u516C\u4F17\u53F7";
const columns = [
{ title: `${mpName}\u540D\u79F0`, dataIndex: "mp_name", slotName: "mp_name" },
{ title: "\u5934\u50CF", dataIndex: "mp_logo", slotName: "mp_logo" },
{ title: "\u8D26\u53F7\u7C7B\u578B", dataIndex: "mp_type", slotName: "mp_type" },
{ title: "\u8FD0\u8425\u8005", dataIndex: "mp_user_name", slotName: "mp_user_name" },
{ title: "\u6240\u5C5E\u9886\u57DF", dataIndex: "catalog_alias", slotName: "catalog_alias" }
];
const tempSelectedData = computed(() => {
return props.defaultSelectedData || [];
});
watch(
() => tempSelectedData.value,
(val) => {
selectedData.value = val;
}
);
watch(
() => group_id.value,
() => {
loadData();
}
);
const search = (_filter) => {
if (_filter.mp_name || _filter.mp_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 = {
limit: page.value.size,
offset: page.value.size * (page.value.index - 1)
};
if (filter.value) {
params = { ...params, ...filter.value };
}
if (gid !== "all") {
params.gid = gid;
}
dataLoading.value = true;
const { code, data } = await searchMpaccount(props.userInfo.BASE_API, params);
dataLoading.value = false;
if (code === 0) {
if (!data.data) {
mediaFileData.value = [];
} else {
mediaFileData.value = data.data.map((v) => {
v.target_id = v.uid;
v.target_type = 14;
v.catalog = key_target_type_map[v.target_type];
return v;
}) || [];
page.value.total = data.total || data.count;
}
}
};
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);
}
Message.warning({ content: "\u5DF2\u8FBE\u5230\u9009\u62E9\u6570\u91CF\u7684\u4E0A\u9650", duration: 3e3 });
emitChange();
}
};
const emitChange = () => {
emit("change", selectedData.value);
};
const pageChangeHandle = (index) => {
page.value.index = index;
loadData();
};
const {
isItemChecked,
hoverBatchBox,
tableCellMouseEnter,
tableCellMouseLeave
} = useTableBatch();
onMounted(() => {
loadData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_sfc_main$1, { onSearch: search }),
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
}, {
mp_name: 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: "mpdoc"
})),
createElementVNode("span", _hoisted_5, toDisplayString(record.mp_name || "--"), 1)
])
]),
mp_logo: withCtx(({ record }) => [
record.mp_logo ? (openBlock(), createElementBlock("img", {
key: 0,
class: "user-avatar",
src: record.mp_logo
}, null, 8, _hoisted_6)) : (openBlock(), createElementBlock("img", _hoisted_7))
]),
mp_type: withCtx(({ record }) => [
createElementVNode("span", null, toDisplayString(unref(mp_type_map)[record.mp_type]), 1)
]),
mp_user_name: withCtx(({ record }) => [
createElementVNode("span", null, toDisplayString(record.mp_user_name || "--"), 1)
]),
catalog_alias: withCtx(({ record }) => [
createElementVNode("span", null, toDisplayString(record.catalog_alias), 1)
]),
_: 1
}, 8, ["data", "loading", "onCellMouseEnter", "onCellMouseLeave"])
]),
createElementVNode("div", _hoisted_8, [
createElementVNode("div", _hoisted_9, [
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 };