|
|
@@ -0,0 +1,746 @@
|
|
|
+import {reactive, ref, unref, defineAsyncComponent } from "vue";
|
|
|
+import {httpGroupRequest} from "/@/components/Form/src/utils/GroupRequest";
|
|
|
+import {defHttp} from '/@/utils/http/axios';
|
|
|
+import {filterMultiDictText} from '/@/utils/dict/JDictSelectUtil.js';
|
|
|
+import {useMessage} from '/@/hooks/web/useMessage';
|
|
|
+import { OnlineColumn } from '/@/components/jeecg/OnLine/types/onlineConfig'
|
|
|
+import { h } from 'vue'
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import {useMethods} from '/@/hooks/system/useMethods';
|
|
|
+
|
|
|
+export function usePopBiz(props,tableRef?) {
|
|
|
+
|
|
|
+ const {createMessage} = useMessage();
|
|
|
+ //弹窗可视状态
|
|
|
+ const visible = ref(false);
|
|
|
+ //表格加载
|
|
|
+ const loading = ref(false);
|
|
|
+ //cgRpConfigId
|
|
|
+ const cgRpConfigId = ref('');
|
|
|
+ //标题
|
|
|
+ const title = ref('列表');
|
|
|
+ // 排序字段，默认无排序
|
|
|
+ const iSorter = ref<any>('');
|
|
|
+ // 查询对象
|
|
|
+ const queryInfo = ref([]);
|
|
|
+ // 查询参数
|
|
|
+ const queryParam = ref<any>({});
|
|
|
+ // 动态参数
|
|
|
+ const dynamicParam = ref<any>({});
|
|
|
+ //字典配置项
|
|
|
+ const dictOptions = ref({});
|
|
|
+ //数据集
|
|
|
+ const dataSource = ref<Array<object>>([]);
|
|
|
+ //定义表格信息
|
|
|
+ const columns = ref<Array<object>>([]);
|
|
|
+ //定义请求url信息
|
|
|
+ const configUrl = reactive({
|
|
|
+ //列表页加载column和data
|
|
|
+ getColumnsAndData: '/online/cgreport/api/getColumnsAndData/',
|
|
|
+ getColumns: '/online/cgreport/api/getRpColumns/',
|
|
|
+ getData: '/online/cgreport/api/getData/',
|
|
|
+ getQueryInfo: '/online/cgreport/api/getQueryInfo/',
|
|
|
+ export: '/online/cgreport/api/exportXls/'
|
|
|
+ });
|
|
|
+ //已选择的值
|
|
|
+ const checkedKeys = ref<Array<string | number>>([]);
|
|
|
+ //选择的行记录
|
|
|
+ const selectRows = ref<Array<any>>([]);
|
|
|
+ // 点击单元格选中行 popup需要 但是报表预览不需要
|
|
|
+ let clickThenCheckFlag = true
|
|
|
+ if(props.clickToRowSelect===false){
|
|
|
+ clickThenCheckFlag = false
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 选择列配置
|
|
|
+ */
|
|
|
+ const rowSelection = {
|
|
|
+ fixed: true,
|
|
|
+ selectedRowKeys: checkedKeys,
|
|
|
+ selectionRows: selectRows,
|
|
|
+ onChange: onSelectChange
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 序号列配置
|
|
|
+ */
|
|
|
+ const indexColumnProps = {
|
|
|
+ dataIndex: 'index',
|
|
|
+ width: '15px',
|
|
|
+ };
|
|
|
+ /**
|
|
|
+ * 分页配置
|
|
|
+ */
|
|
|
+ const pagination = reactive({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizeOptions: ['10', '20', '30'],
|
|
|
+ // showTotal: (total, range) => {
|
|
|
+ // return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
+ // },
|
|
|
+ showQuickJumper: true,
|
|
|
+ showSizeChanger: true,
|
|
|
+ total: 0,
|
|
|
+ // 合计逻辑 [待优化 3.0]
|
|
|
+ showTotal: (total) => onShowTotal(total),
|
|
|
+ realPageSize: 10,
|
|
|
+ realTotal: 0,
|
|
|
+ // 是否有合计列，默认为""，在第一次获取到数据之后会设计为ture或者false
|
|
|
+ isTotal: <string | boolean> '',
|
|
|
+ onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize)
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 表格选择事件
|
|
|
+ * @param selectedRowKeys
|
|
|
+ * @param selectRow
|
|
|
+ */
|
|
|
+ function onSelectChange(selectedRowKeys: (string | number)[]) {
|
|
|
+ if (!selectedRowKeys || selectedRowKeys.length == 0) {
|
|
|
+ selectRows.value = []
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < selectedRowKeys.length; i++) {
|
|
|
+ let combineKey = combineRowKey(getRowByKey(selectedRowKeys[i]));
|
|
|
+ let keys = unref(checkedKeys);
|
|
|
+ if (combineKey && keys.indexOf(combineKey) < 0) {
|
|
|
+ let row = getRowByKey(selectedRowKeys[i]);
|
|
|
+ row && selectRows.value.push(row)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ checkedKeys.value = selectedRowKeys;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 过滤没用选项
|
|
|
+ * @param selectedRowKeys
|
|
|
+ */
|
|
|
+ function filterUnuseSelect() {
|
|
|
+ selectRows.value = unref(selectRows).filter(item=>{
|
|
|
+ let combineKey = combineRowKey(item);
|
|
|
+ return unref(checkedKeys).indexOf(combineKey)>=0
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 根据key获取row信息
|
|
|
+ * @param key
|
|
|
+ */
|
|
|
+ function getRowByKey(key) {
|
|
|
+ let row = unref(dataSource).filter(record => combineRowKey(record) === key);
|
|
|
+ return row&&row.length>0?row[0]:'';
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载rowKey
|
|
|
+ */
|
|
|
+ function combineRowKey(record) {
|
|
|
+ let res = record?.id || '';
|
|
|
+ Object.keys(record).forEach(key => {
|
|
|
+ res = (key =='rowIndex') ? (record[key] + res) : (res + record[key]);
|
|
|
+ });
|
|
|
+ res = res.length > 50 ? res.substring(0, 50) : res;
|
|
|
+ return res
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载列信息
|
|
|
+ */
|
|
|
+ function loadColumnsInfo() {
|
|
|
+ let url = `${configUrl.getColumns}${props.code}`;
|
|
|
+ //缓存key
|
|
|
+ let groupIdKey = props.groupId ? `${props.groupId}${url}` : '';
|
|
|
+ httpGroupRequest(() => defHttp.get({url}, {isTransformResponse: false, successMessageMode: 'none'}), groupIdKey).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ initDictOptionData(res.result.dictOptions);
|
|
|
+ cgRpConfigId.value = res.result.cgRpConfigId;
|
|
|
+ title.value = res.result.cgRpConfigName;
|
|
|
+ let currColumns = res.result.columns;
|
|
|
+ for (let a = 0; a < currColumns.length; a++) {
|
|
|
+ if (currColumns[a].customRender) {
|
|
|
+ let dictCode = currColumns[a].customRender;
|
|
|
+ currColumns[a].customRender = ({text}) => {
|
|
|
+ return filterMultiDictText(unref(dictOptions)[dictCode], text + "");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 排序字段受控
|
|
|
+ if (unref(iSorter) && currColumns[a].dataIndex === unref(iSorter).column) {
|
|
|
+ currColumns[a].sortOrder = unref(iSorter).order === 'asc' ? 'ascend' : 'descend'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (currColumns[0].key !== 'rowIndex') {
|
|
|
+ currColumns.unshift({
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'rowIndex',
|
|
|
+ key:'rowIndex',
|
|
|
+ width:60,
|
|
|
+ align:"center",
|
|
|
+ customRender:function ({text}) {
|
|
|
+ return parseInt(text)+1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ columns.value = [...currColumns];
|
|
|
+ initQueryInfo(null)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载列和数据[列表专用]
|
|
|
+ */
|
|
|
+ function loadColumnsAndData() {
|
|
|
+ // 第一次加载 置空isTotal 在这里调用确保 该方法只是进入页面后 加载一次 其余查询不走该方法
|
|
|
+ pagination.isTotal = ''
|
|
|
+ let url = `${configUrl.getColumnsAndData}${props.id}`;
|
|
|
+ //缓存key
|
|
|
+ let groupIdKey = props.groupId ? `${props.groupId}${url}` : '';
|
|
|
+ httpGroupRequest(() => defHttp.get({url}, {isTransformResponse: false, successMessageMode: 'none'}), groupIdKey).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ initDictOptionData(res.result.dictOptions);
|
|
|
+ cgRpConfigId.value = props.id;
|
|
|
+ let { columns: metaColumnList, cgreportHeadName, fieldHrefSlots, isGroupTitle } = res.result;
|
|
|
+ title.value = cgreportHeadName;
|
|
|
+ // href 跳转
|
|
|
+ const fieldHrefSlotKeysMap = {}
|
|
|
+ fieldHrefSlots.forEach(item => fieldHrefSlotKeysMap[item.slotName] = item)
|
|
|
+ let currColumns = handleColumnHrefAndDict(metaColumnList, fieldHrefSlotKeysMap)
|
|
|
+
|
|
|
+ // popup需要序号， 普通列表不需要
|
|
|
+ if(clickThenCheckFlag===true){
|
|
|
+ currColumns.unshift({
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'rowIndex',
|
|
|
+ key:'rowIndex',
|
|
|
+ width:60,
|
|
|
+ align:"center",
|
|
|
+ customRender:function ({text}) {
|
|
|
+ return parseInt(text)+1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 合并表头
|
|
|
+ if(isGroupTitle === true){
|
|
|
+ currColumns = handleGroupTitle(currColumns);
|
|
|
+ }
|
|
|
+ columns.value = [...currColumns];
|
|
|
+ initQueryInfo(res.result.data)
|
|
|
+ }else{
|
|
|
+ //update-begin-author:taoyan date:20220401 for: VUEN-583【vue3】JeecgBootException: sql黑名单校验不通过,请联系管理员!,前台无提示
|
|
|
+ createMessage.warning(res.message)
|
|
|
+ //update-end-author:taoyan date:20220401 for: VUEN-583【vue3】JeecgBootException: sql黑名单校验不通过,请联系管理员!,前台无提示
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理求和的列 合计逻辑 [待优化 3.0]
|
|
|
+ */
|
|
|
+ function handleSumColumn(metaColumnList: OnlineColumn[], dataTotal: number):void {
|
|
|
+ // 获取需要合计列的dataIndex
|
|
|
+ let sumColumnList = getNeedSumColumns(metaColumnList);
|
|
|
+ // 判断是否为第一次获取数据，如果是的话，则需要重新设置pageSize
|
|
|
+ if (pagination.isTotal == '') {
|
|
|
+ if (sumColumnList.length > 0) {
|
|
|
+ pagination.isTotal = true
|
|
|
+ // 有合计字段时，每次最多查询原pageSize-1条记录，另外需要第一次时将查询的10条中删除最后一条
|
|
|
+ // 删除最后一条数据 如果第一次得到的数据长度等于pageSize的话，则删除最后一条
|
|
|
+ if (dataSource.value.length == pagination.pageSize) {
|
|
|
+ let remove_data = dataSource.value.pop()
|
|
|
+ }
|
|
|
+ pagination.realPageSize = pagination.pageSize - 1
|
|
|
+ } else {
|
|
|
+ pagination.isTotal = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 需要添加合计字段
|
|
|
+ if (pagination.isTotal) {
|
|
|
+ let totalRow = { }
|
|
|
+ sumColumnList.forEach(dataIndex => {
|
|
|
+ let count = 0
|
|
|
+ dataSource.value.forEach(row => {
|
|
|
+ // 统计去除null及空数据
|
|
|
+ if(row[dataIndex] != null && row[dataIndex] != ''){
|
|
|
+ count += parseFloat(row[dataIndex])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ totalRow[dataIndex] = isNaN(count) ? '包含非数字内容' : count.toFixed(2)
|
|
|
+
|
|
|
+ // 长整形时合计不显示.00后缀
|
|
|
+ let v = metaColumnList.find(v=>v.dataIndex==dataIndex);
|
|
|
+ if(v && v.fieldType == 'Long'){
|
|
|
+ totalRow[dataIndex] = parseInt(totalRow[dataIndex]);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ dataSource.value.push(totalRow)
|
|
|
+ pagination.realTotal = dataTotal
|
|
|
+ pagination.total = Number(dataTotal) + Number(Math.floor(dataTotal/pagination.realPageSize))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取需要求和的列 dataIndex
|
|
|
+ * @param columns
|
|
|
+ */
|
|
|
+ function getNeedSumColumns(columns: OnlineColumn[]):string[]{
|
|
|
+ let arr:string[] = []
|
|
|
+ for(let column of columns){
|
|
|
+ if (column.isTotal === '1') {
|
|
|
+ arr.push(column.dataIndex!)
|
|
|
+ if(column.children && column.children.length>0){
|
|
|
+ let subArray = getNeedSumColumns(column.children)
|
|
|
+ if(subArray.length>0){
|
|
|
+ arr.push(...subArray)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理列的href和字典翻译
|
|
|
+ */
|
|
|
+ function handleColumnHrefAndDict(columns: OnlineColumn[], fieldHrefSlotKeysMap:{}):OnlineColumn[] {
|
|
|
+ for(let column of columns){
|
|
|
+ let { customRender, hrefSlotName, fieldType } = column
|
|
|
+ // online 报表中类型配置为日期（yyyy-MM-dd ），但是实际展示为日期时间格式(yyyy-MM-dd HH:mm:ss) issues/3042
|
|
|
+ if(fieldType=='Date'){
|
|
|
+ column.customRender = ({text}) => {
|
|
|
+ if(!text){
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ if(text.length>10){
|
|
|
+ return text.substring(0, 10)
|
|
|
+ }
|
|
|
+ return text;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if (!hrefSlotName && (column.scopedSlots && column.scopedSlots.customRender)) {
|
|
|
+ //【Online报表】字典和href互斥 这里通过fieldHrefSlotKeysMap 先找到是href的列
|
|
|
+ if (fieldHrefSlotKeysMap.hasOwnProperty(column.scopedSlots.customRender)) {
|
|
|
+ hrefSlotName = column.scopedSlots.customRender
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 如果 customRender 有值则代表使用了字典
|
|
|
+ // 如果 hrefSlotName 有值则代表使用了href跳转
|
|
|
+ // 两者可以兼容。兼容的具体思路为：先获取到字典替换的值，再添加href链接跳转
|
|
|
+ if (customRender || hrefSlotName) {
|
|
|
+ let dictCode = customRender as string
|
|
|
+ let replaceFlag = '_replace_text_'
|
|
|
+ column.customRender = ({text, record}) => {
|
|
|
+ let value = text
|
|
|
+ // 如果 dictCode 有值，就进行字典转换
|
|
|
+ if (dictCode) {
|
|
|
+ if (dictCode.startsWith(replaceFlag)) {
|
|
|
+ let textFieldName = dictCode.replace(replaceFlag, '')
|
|
|
+ value = record[textFieldName]
|
|
|
+ } else {
|
|
|
+ value = filterMultiDictText(unref(dictOptions)[dictCode], text + "");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 扩展参数设置列的内容长度
|
|
|
+ if(column.showLength){
|
|
|
+ if(value && value.length>column.showLength){
|
|
|
+ value = value.substr(0, column.showLength)+'...'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 如果 hrefSlotName 有值，就生成一个 a 标签，包裹住字典替换后（或原生）的值
|
|
|
+ if (hrefSlotName) {
|
|
|
+ let field = fieldHrefSlotKeysMap[hrefSlotName]
|
|
|
+ if (field) {
|
|
|
+ return h('a', {
|
|
|
+ onClick: ()=>handleClickFieldHref(field, record)
|
|
|
+ }, value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return columns;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理合并表头
|
|
|
+ * @param columns
|
|
|
+ */
|
|
|
+ function handleGroupTitle(columns: OnlineColumn[]):OnlineColumn[]{
|
|
|
+ let newColumns:OnlineColumn[] = []
|
|
|
+ for(let column of columns){
|
|
|
+ //排序字段受控 ---- 此逻辑为新增逻辑 待
|
|
|
+ if (unref(iSorter) && column.dataIndex === unref(iSorter).column) {
|
|
|
+ column.sortOrder = unref(iSorter).order === 'asc' ? 'ascend' : 'descend'
|
|
|
+ }
|
|
|
+ //判断字段是否需要合并表头
|
|
|
+ if (column.groupTitle) {
|
|
|
+ let clIndex = newColumns.findIndex(im => im.title === column.groupTitle)
|
|
|
+ if (clIndex !== -1) {
|
|
|
+ //表头已存在直接push children
|
|
|
+ newColumns[clIndex].children!.push(column)
|
|
|
+ } else {
|
|
|
+ //表头不存在组装表头信息
|
|
|
+ let clGroup:OnlineColumn = {},child:OnlineColumn[] = []
|
|
|
+ child.push(column)
|
|
|
+ clGroup.title = column.groupTitle
|
|
|
+ clGroup.align = 'center'
|
|
|
+ clGroup.children = child
|
|
|
+ newColumns.push(clGroup)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ newColumns.push(column)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return newColumns;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取路由器对象 href跳转用到
|
|
|
+ let router = useRouter();
|
|
|
+ /**
|
|
|
+ * href 点击事件
|
|
|
+ * @param field
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+ function handleClickFieldHref(field, record) {
|
|
|
+ let href = field.href
|
|
|
+ let urlPattern = /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?/
|
|
|
+ let compPattern = /\.vue(\?.*)?$/
|
|
|
+ let jsPattern = /{{([^}]+)}}/g // {{ xxx }}
|
|
|
+ if (typeof href === 'string') {
|
|
|
+ href = href.trim().replace(/\${([^}]+)?}/g, (s1, s2) => record[s2])
|
|
|
+ // 执行 {{...}} JS增强语句
|
|
|
+ if (jsPattern.test(href)) {
|
|
|
+ href = href.replace(jsPattern, function (text, s0) {
|
|
|
+ try {
|
|
|
+ return eval(s0)
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e)
|
|
|
+ return text
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (urlPattern.test(href)) {
|
|
|
+ window.open(href, '_blank')
|
|
|
+ } else if (compPattern.test(href)) {
|
|
|
+ // 处理弹框
|
|
|
+ openHrefCompModal(href)
|
|
|
+ } else {
|
|
|
+ router.push(href)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 导出
|
|
|
+ */
|
|
|
+ function handleExport() {
|
|
|
+ const {handleExportXls} = useMethods();
|
|
|
+ let url = `${configUrl.export}${cgRpConfigId.value}`;
|
|
|
+ let params = getQueryParams();//查询条件
|
|
|
+ handleExportXls(title.value , url, params)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 合计逻辑 [待优化 3.0]
|
|
|
+ * 分页 大小改变事件
|
|
|
+ * @param _current
|
|
|
+ * @param size
|
|
|
+ */
|
|
|
+ function onSizeChange(_current, size){
|
|
|
+ pagination.isTotal = '';
|
|
|
+ pagination.pageSize = size;
|
|
|
+ if(pagination.isTotal){
|
|
|
+ pagination.realPageSize = size - 1;
|
|
|
+ }else{
|
|
|
+ pagination.realPageSize = size
|
|
|
+ }
|
|
|
+ pagination.current = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 合计逻辑 [待优化 3.0]
|
|
|
+ * 显示总条数
|
|
|
+ * @param total
|
|
|
+ */
|
|
|
+ function onShowTotal(total) {
|
|
|
+ // 重新根据是否有合计计算每页显示的数据
|
|
|
+ let start = (pagination.current - 1) * pagination.realPageSize + 1
|
|
|
+ let end = start + (pagination.isTotal ? dataSource.value.length - 1 : dataSource.value.length) - 1
|
|
|
+ let realTotal = pagination.isTotal ? pagination.realTotal : total
|
|
|
+ return start + '-' + end + ' 共' + realTotal + '条'
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 弹出框显示隐藏触发事件
|
|
|
+ */
|
|
|
+ async function visibleChange($event) {
|
|
|
+ visible.value = $event;
|
|
|
+ $event && loadColumnsInfo();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 初始化查询条件
|
|
|
+ * @param data 数据结果集
|
|
|
+ */
|
|
|
+ function initQueryInfo(data) {
|
|
|
+ let url = `${configUrl.getQueryInfo}${unref(cgRpConfigId)}`
|
|
|
+ //缓存key
|
|
|
+ let groupIdKey = props.groupId ? `${props.groupId}${url}` : '';
|
|
|
+ httpGroupRequest(() => defHttp.get({url}, {isTransformResponse: false, successMessageMode: 'none'}), groupIdKey).then((res) => {
|
|
|
+ // console.log("获取查询条件", res);
|
|
|
+ if (res.success) {
|
|
|
+ dynamicParamHandler(res.result);
|
|
|
+ queryInfo.value = res.result;
|
|
|
+ console.log("queryInfo==>",queryInfo.value)
|
|
|
+ //查询条件加载后再请求数据
|
|
|
+ if(data){
|
|
|
+ setDataSource(data)
|
|
|
+ }else{
|
|
|
+ //没有传递data时查询数据
|
|
|
+ loadData(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ createMessage.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载表格数据
|
|
|
+ * @param arg
|
|
|
+ */
|
|
|
+ function loadData(arg?) {
|
|
|
+ if (arg == 1) {
|
|
|
+ pagination.current = 1
|
|
|
+ }
|
|
|
+ let params = getQueryParams();//查询条件
|
|
|
+ loading.value = true;
|
|
|
+ let url = `${configUrl.getData}${unref(cgRpConfigId)}`
|
|
|
+ //缓存key
|
|
|
+ let groupIdKey = props.groupId ? `${props.groupId}${url}${JSON.stringify(params)}` : '';
|
|
|
+ httpGroupRequest(() => defHttp.get({url, params}, {isTransformResponse: false, successMessageMode: 'none'}), groupIdKey).then(res => {
|
|
|
+ loading.value = false;
|
|
|
+ let data = res.result;
|
|
|
+ console.log("表格信息:", data)
|
|
|
+ setDataSource(data);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 设置dataSource
|
|
|
+ */
|
|
|
+ function setDataSource(data) {
|
|
|
+ if (data) {
|
|
|
+ pagination.total = Number(data.total)
|
|
|
+ let currentPage = pagination?.current??1;
|
|
|
+ for (let a = 0; a < data.records.length; a++) {
|
|
|
+ if (!data.records[a].rowIndex) {
|
|
|
+ data.records[a].rowIndex = a+(currentPage-1)*10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dataSource.value = data.records
|
|
|
+ } else {
|
|
|
+ pagination.total = 0;
|
|
|
+ dataSource.value = [];
|
|
|
+ }
|
|
|
+ // 合计逻辑 [待优化 3.0]
|
|
|
+ handleSumColumn(columns.value, pagination.total)
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取查询参数
|
|
|
+ */
|
|
|
+ function getQueryParams() {
|
|
|
+ let paramTarget = {};
|
|
|
+ if (unref(dynamicParam)) {
|
|
|
+ //处理自定义参数
|
|
|
+ Object.keys(unref(dynamicParam)).map(key => {
|
|
|
+ paramTarget['self_' + key] = unref(dynamicParam)[key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let param = Object.assign(paramTarget, unref(queryParam), unref(iSorter));
|
|
|
+ param.pageNo = pagination.current;
|
|
|
+ // 合计逻辑 [待优化 3.0]
|
|
|
+ // 实际查询时不使用table组件的pageSize，而使用自定义的realPageSize,realPageSize会在第一次获取到数据后变化
|
|
|
+ param.pageSize = pagination.realPageSize;
|
|
|
+ return filterObj(param);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理动态参数
|
|
|
+ */
|
|
|
+ function dynamicParamHandler(arr?) {
|
|
|
+ if (arr && arr.length > 0) {
|
|
|
+ //第一次加载查询条件前 初始化queryParam为空对象
|
|
|
+ let queryTemp = {};
|
|
|
+ for (let item of arr) {
|
|
|
+ if (item.mode === 'single') {
|
|
|
+ queryTemp[item.field] = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ queryParam.value = {...queryTemp}
|
|
|
+ }
|
|
|
+ let dynamicTemp = {};
|
|
|
+ if (props.param) {
|
|
|
+ Object.keys(props.param).map(key => {
|
|
|
+ let str = props.param[key];
|
|
|
+ if (key in queryParam) {
|
|
|
+ if (str && str.startsWith("'") && str.endsWith("'")) {
|
|
|
+ str = str.substring(1, str.length - 1)
|
|
|
+ }
|
|
|
+ //如果查询条件包含参数 设置值
|
|
|
+ unref(queryParam)[key] = str
|
|
|
+ }
|
|
|
+ dynamicTemp[key] = props.param[key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ dynamicParam.value = {...dynamicTemp}
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 分页
|
|
|
+ * @param page
|
|
|
+ * @param filters
|
|
|
+ * @param sorter
|
|
|
+ */
|
|
|
+ function handleChangeInTable(page, filters, sorter) {
|
|
|
+ console.log(page, filters, sorter);
|
|
|
+ //分页、排序、筛选变化时触发
|
|
|
+ if (Object.keys(sorter).length > 0) {
|
|
|
+ iSorter.value = {
|
|
|
+ column: sorter.field,
|
|
|
+ order: 'ascend' === sorter.order ? 'asc' : 'desc'
|
|
|
+ }
|
|
|
+ // 排序字段受控
|
|
|
+ unref(columns).forEach(col => {
|
|
|
+ if (col['dataIndex'] === sorter.field) {
|
|
|
+ col['sortOrder'] = sorter.order
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ pagination.current = page.current;
|
|
|
+ pagination.pageSize = page.pageSize;
|
|
|
+ loadData()
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 行点击事件
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+ function clickThenCheck(record) {
|
|
|
+ if(clickThenCheckFlag===true){
|
|
|
+ let rowKey = combineRowKey(record);
|
|
|
+ if (!unref(checkedKeys) || unref(checkedKeys).length == 0) {
|
|
|
+ let arr1: any[] = [], arr2: any[] = [];
|
|
|
+ arr1.push(record);
|
|
|
+ arr2.push(rowKey);
|
|
|
+ checkedKeys.value = arr2;
|
|
|
+ selectRows.value = arr1
|
|
|
+ } else {
|
|
|
+ if (unref(checkedKeys).indexOf(rowKey) < 0) {
|
|
|
+ //不存在就选中
|
|
|
+ checkedKeys.value.push(rowKey);
|
|
|
+ selectRows.value.push(record)
|
|
|
+ } else {
|
|
|
+ //已选中就取消
|
|
|
+ let rowKey_index = unref(checkedKeys).indexOf(rowKey);
|
|
|
+ checkedKeys.value.splice(rowKey_index, 1);
|
|
|
+ selectRows.value.splice(rowKey_index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //防止字典中有垃圾数据
|
|
|
+ function initDictOptionData(arr) {
|
|
|
+ let obj = {};
|
|
|
+ Object.keys(arr).map(k => {
|
|
|
+ obj[k] = arr[k].filter(item => {
|
|
|
+ return item != null
|
|
|
+ });
|
|
|
+ });
|
|
|
+ dictOptions.value = obj
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 过滤对象中为空的属性
|
|
|
+ * @param obj
|
|
|
+ * @returns {*}
|
|
|
+ */
|
|
|
+ function filterObj(obj) {
|
|
|
+ if (!(typeof obj == 'object')) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let key in obj) {
|
|
|
+ if (obj.hasOwnProperty(key)
|
|
|
+ && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
|
|
|
+ delete obj[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 样式
|
|
|
+ const dialogStyle = {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ height: '100%',
|
|
|
+ margin: 0,
|
|
|
+ padding: 0,
|
|
|
+ }
|
|
|
+
|
|
|
+ // 弹窗属性配置
|
|
|
+ const hrefComponent = ref({
|
|
|
+ model: {
|
|
|
+ title: '',
|
|
|
+ okText: '关闭',
|
|
|
+ width: '100%',
|
|
|
+ visible: false,
|
|
|
+ destroyOnClose: true,
|
|
|
+ style: dialogStyle,
|
|
|
+ // dialogStyle: dialogStyle,
|
|
|
+ bodyStyle: { padding: '8px', height: 'calc(100vh - 108px)', overflow: 'auto', overflowX: 'hidden' },
|
|
|
+ // 隐藏掉取消按钮
|
|
|
+ cancelButtonProps: { style: { display: 'none' } }
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ ok: () => hrefComponent.value.model.visible = false,
|
|
|
+ cancel: () => hrefComponent.value.model.visible = false,
|
|
|
+ },
|
|
|
+ is: <any> null,
|
|
|
+ params: {},
|
|
|
+ });
|
|
|
+
|
|
|
+ // 超链点击事件--> 打开一个modal窗口
|
|
|
+ function openHrefCompModal(href) {
|
|
|
+ // 解析 href 参数
|
|
|
+ let index = href.indexOf('?')
|
|
|
+ let path = href
|
|
|
+ if (index !== -1) {
|
|
|
+ path = href.substring(0, index)
|
|
|
+ let paramString = href.substring(index + 1, href.length)
|
|
|
+ let paramArray = paramString.split('&')
|
|
|
+ let params = {}
|
|
|
+ paramArray.forEach(paramObject => {
|
|
|
+ let paramItem = paramObject.split('=')
|
|
|
+ params[paramItem[0]] = paramItem[1]
|
|
|
+ })
|
|
|
+ hrefComponent.value.params = params
|
|
|
+ } else {
|
|
|
+ hrefComponent.value.params = {}
|
|
|
+ }
|
|
|
+ hrefComponent.value.model.visible = true
|
|
|
+ hrefComponent.value.model.title = '操作'
|
|
|
+ hrefComponent.value.is = defineAsyncComponent(() => import(/* @vite-ignore */'/@/views/' + (path.startsWith('/') ? path.slice(1) : path)))
|
|
|
+ }
|
|
|
+
|
|
|
+ return [{visibleChange, loadColumnsInfo,loadColumnsAndData, dynamicParamHandler, loadData, handleChangeInTable, combineRowKey, clickThenCheck,filterUnuseSelect, handleExport},
|
|
|
+ {hrefComponent, visible, rowSelection, checkedKeys, selectRows, pagination, dataSource, columns, indexColumnProps, loading, title,iSorter,queryInfo,queryParam,dictOptions}];
|
|
|
+}
|
zhangdaiscott