|
|
@@ -0,0 +1,176 @@
|
|
|
+import { ModalName } from '@/common/constants/modalName';
|
|
|
+import { ColumnType, getTableHead } from '@/common/methods/table';
|
|
|
+import { TableKey } from '@/common/methods/table/interface';
|
|
|
+import { Column, OperationTabMenu } from '@/services/go/commonService/interface';
|
|
|
+import { sessionStorageUtil } from "@/utils/storage";
|
|
|
+import { inject, onUnmounted, reactive, Ref, ref } from "vue";
|
|
|
+import { MenuType } from "../buttonPermission/interface";
|
|
|
+import { openModal } from "../modal";
|
|
|
+import { BtnClassName, BtnList, TableEventCB } from './interface';
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取动态表头数据
|
|
|
+ * ant-design 表格数据的过滤功能与表头绑定在一起
|
|
|
+ */
|
|
|
+export function getTableColumns() {
|
|
|
+ // 表头数据
|
|
|
+ const columns = ref<ColumnType[]>([]);
|
|
|
+ // 过滤信息
|
|
|
+ const filteredInfo = ref();
|
|
|
+ // 缓存 注册表头回调
|
|
|
+ let cacheColumnCB: Function = (): void => { };
|
|
|
+ // 缓存 动态表头 key
|
|
|
+ let cacheTableKey: keyof TableKey = 'table_pcweb_userinfo';
|
|
|
+ /**
|
|
|
+ * 注册表头
|
|
|
+ * @param tableName 动态表头数据key
|
|
|
+ * @param cb 回调函数，处理添加不同表格过滤，排序等功能
|
|
|
+ */
|
|
|
+ function registerColumn(tableName: keyof TableKey, cb: Function) {
|
|
|
+ cacheTableKey = tableName;
|
|
|
+ cacheColumnCB = cb;
|
|
|
+ const list = getTableHead(tableName);
|
|
|
+ const filtered = filteredInfo.value || {};
|
|
|
+ columns.value.length = 0;
|
|
|
+ list.forEach((e, i) => {
|
|
|
+ const { columnfield, columntitle, aligntype } = e;
|
|
|
+ const item: ColumnType = {
|
|
|
+ key: String(i),
|
|
|
+ dataIndex: columnfield, // 表格数据对应的key
|
|
|
+ title: columntitle,
|
|
|
+ align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right',
|
|
|
+ slots: { customRender: columnfield },
|
|
|
+ };
|
|
|
+ cb(e, item, filtered);
|
|
|
+ columns.value.push(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 更新动态表头
|
|
|
+ */
|
|
|
+ function updateColumn() {
|
|
|
+ registerColumn(cacheTableKey, cacheColumnCB)
|
|
|
+ }
|
|
|
+ return { columns, registerColumn, updateColumn, filteredInfo }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 表格事件
|
|
|
+ * @param param TableEventCB
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function getTableEvent<T>(param: TableEventCB) {
|
|
|
+ // 表格展开行
|
|
|
+ const expandedRowKeys = ref<string[]>([]);
|
|
|
+ // 表格选中的数据
|
|
|
+ const selectedRow = reactive({})
|
|
|
+ function Rowclick(record: T, index: number) {
|
|
|
+ return {
|
|
|
+ onClick: () => { // 表格点击
|
|
|
+ Object.assign(selectedRow, record)
|
|
|
+ const value = expandedRowKeys.value;
|
|
|
+ expandedRowKeys.value = value.length ? [] : [`${index}`];
|
|
|
+ param.clickCB && param.clickCB()
|
|
|
+ },
|
|
|
+ // onDblclick: () => { // 双击
|
|
|
+ // console.log('onDblclick');
|
|
|
+ // },
|
|
|
+ onContextmenu: () => { // 表格右键
|
|
|
+ Object.assign(selectedRow, record)
|
|
|
+ param.contextmenuCB && param.contextmenuCB()
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return { expandedRowKeys, selectedRow, Rowclick }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取class 名
|
|
|
+ * @param val
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+function getClassName(val: string): BtnClassName {
|
|
|
+ let result: BtnClassName = 'btnDeafault'
|
|
|
+ if (val.includes('disable') || val.includes('cancle') || val.includes('delete')) {
|
|
|
+ result = 'btnDanger'
|
|
|
+ } else if (val === '') {
|
|
|
+ result = 'btnDeafault'
|
|
|
+ } else if (val.includes('add')) {
|
|
|
+ result = 'operBtn'
|
|
|
+ } else {
|
|
|
+ result = 'btnPrimary'
|
|
|
+ }
|
|
|
+ return result
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取表格操作按钮列表
|
|
|
+ * @param menuType
|
|
|
+ * @param hasDetail 操作按钮是否需要详情按钮（详情按钮服务 不配置）
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function getBtnList(menuType: keyof MenuType, hasDetail: boolean) {
|
|
|
+ // 获取 数据
|
|
|
+ const permissionData = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
|
|
|
+ const name = 'permissionData'
|
|
|
+ // 存入sessionStorageUtil 是为了处理页面刷新的情况（这个时候重新从服务获取数据，但页面已经先加载了，vue 中的 依赖注入在异步中不能建立通信）
|
|
|
+ const data: OperationTabMenu[] = permissionData.value.length ? permissionData.value : sessionStorageUtil.getItem(name)
|
|
|
+ sessionStorageUtil.setItem(name, data)
|
|
|
+
|
|
|
+ const commonBtn = ref<BtnList[]>([]); // 通用按钮列表，不用选中数据才显示
|
|
|
+ const forDataBtn = ref<BtnList[]>([]); // 针对数据按钮列表，选中某条数据才显示
|
|
|
+
|
|
|
+ const list = data.find((e) => e.code === menuType);
|
|
|
+ if (list && list.children) {
|
|
|
+ list.children.forEach(e => {
|
|
|
+ const { code, type, title } = e;
|
|
|
+ if (type === 2) { // 按钮类型
|
|
|
+ const { openAction } = openModal(code as keyof ModalName);
|
|
|
+ const item = { lable: title, callback: openAction, className: getClassName(code) }
|
|
|
+ const commonName = ['新增'] // 目前通用的按钮只要新增，需要添加其它的时候需要往这里添加
|
|
|
+ if (commonName.includes(title)) { //
|
|
|
+ commonBtn.value.push(item)
|
|
|
+ } else {
|
|
|
+ forDataBtn.value.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.warn(`menuType: ${menuType}未找到`)
|
|
|
+ }
|
|
|
+ // 详情
|
|
|
+ if (hasDetail) {
|
|
|
+ const { openAction } = openModal('detail')
|
|
|
+ forDataBtn.value.push({ lable: '详情', callback: openAction, className: getClassName('') })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ sessionStorageUtil.removeItem(name)
|
|
|
+ });
|
|
|
+ return { commonBtn, forDataBtn }
|
|
|
+}
|
|
|
+
|
|
|
+// /**
|
|
|
+// * 获取表格数据
|
|
|
+// * @param param
|
|
|
+// * @returns
|
|
|
+// */
|
|
|
+// export function getTableData<T>(param: TableEventCB) {
|
|
|
+// // 加载状态
|
|
|
+// const loading = ref<boolean>(false);
|
|
|
+// // 表格数据
|
|
|
+// const tableList = ref<T[]>([]);
|
|
|
+// // 获取表头数据
|
|
|
+// const { columns, registerColumn, updateColumn, filteredInfo } = getTableColumns()
|
|
|
+// // 获取表格事件
|
|
|
+// const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(param)
|
|
|
+// return {
|
|
|
+// loading, tableList,
|
|
|
+// columns, registerColumn, updateColumn, filteredInfo,
|
|
|
+// expandedRowKeys, selectedRow, Rowclick,
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+export type { Column, ColumnType };
|
huangbin