popup组件修复
zhangdaiscott
parent
f3159b6392
commit
d8287920d7
|
|
@ -84,10 +84,11 @@ yarn build
|
|||
|
||||
|
||||
|
||||
Online表单&Online报表
|
||||
Online表单&Online报表&代码生成
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
报表效果
|
||||
|
||||
|
|
|
|||
|
|
@ -291,6 +291,7 @@
|
|||
"vue-print-nb-jeecg/src/printarea",
|
||||
"vue-router",
|
||||
"vue-types",
|
||||
"vuedraggable",
|
||||
"vxe-table",
|
||||
"vxe-table-plugin-antd",
|
||||
"xe-utils",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import JPopupOnlReportModal from './modal/JPopupOnlReportModal.vue'
|
||||
import {defineComponent, ref, reactive, onMounted, watchEffect, watch, computed, unref} from 'vue';
|
||||
import {useModal} from '/@/components/Modal';
|
||||
import {propTypes} from "/@/utils/propTypes";
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
export default defineComponent({
|
||||
name: 'JPopup',
|
||||
components: {
|
||||
JPopupOnlReportModal
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<!--popup选择框-->
|
||||
<div>
|
||||
<BasicModal v-bind="$attrs" @register="register" :title="title" :width="1200" @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" wrapClassName="j-popup-modal" @visible-change="visibleChange">
|
||||
<div class="jeecg-basic-table-form-container" v-if="showSearchFlag">
|
||||
<a-form ref="formRef" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<template v-for="(item,index) in queryInfo">
|
||||
<template v-if=" item.hidden==='1' ">
|
||||
<a-col :md="8" :sm="24" :key=" 'query'+index " v-show="toggleSearchStatus">
|
||||
<SearchFormItem :formElRef="formRef" :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></SearchFormItem>
|
||||
</a-col>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-col :md="8" :sm="24" :key=" 'query'+index ">
|
||||
<SearchFormItem :formElRef="formRef" :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></SearchFormItem>
|
||||
</a-col>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a-col :md="8" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset">重置</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery" style="margin-left: 8px">查询</a-button>
|
||||
<a @click="handleToggleSearch" style="margin-left: 8px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"/>
|
||||
</a>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:canResize="false"
|
||||
:bordered="true"
|
||||
:loading="loading"
|
||||
:rowKey="combineRowKey"
|
||||
:columns="columns"
|
||||
:showIndexColumn="false"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
:rowSelection="rowSelection"
|
||||
@row-click="clickThenCheck"
|
||||
@change="handleChangeInTable"
|
||||
>
|
||||
<template #tableTitle></template>
|
||||
</BasicTable>
|
||||
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, unref, ref, watch,watchEffect, reactive,computed} from 'vue';
|
||||
import {BasicModal, useModalInner} from '/@/components/Modal';
|
||||
import {createAsyncComponent} from '/@/utils/factory/createAsyncComponent';
|
||||
import {useAttrs} from '/@/hooks/core/useAttrs';
|
||||
import {usePopBiz} from '/@/components/jeecg/OnLine/hooks/usePopBiz';
|
||||
import {useMessage} from '/@/hooks/web/useMessage';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'JPopupOnlReportModal',
|
||||
components: {
|
||||
//此处需要异步加载BasicTable
|
||||
BasicModal,
|
||||
SearchFormItem: createAsyncComponent(() => import('/@/components/jeecg/OnLine/SearchFormItem.vue'), {loading: false}),
|
||||
BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {loading: true}),
|
||||
},
|
||||
props: ['multi', 'code', 'sorter', 'groupId', 'param'],
|
||||
emits: ['ok','register'],
|
||||
setup(props, {emit, refs}) {
|
||||
const {createMessage} = useMessage();
|
||||
const labelCol = reactive({
|
||||
xs: {span: 24},
|
||||
sm: {span: 6},
|
||||
})
|
||||
const wrapperCol = reactive({
|
||||
xs: {span: 24},
|
||||
sm: {span: 18},
|
||||
})
|
||||
//注册弹框
|
||||
const [register, {closeModal}] = useModalInner();
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const toggleSearchStatus = ref(false);
|
||||
const attrs = useAttrs();
|
||||
const tableScroll = ref({x: true});
|
||||
const getBindValue = Object.assign({}, unref(props), unref(attrs));
|
||||
const [{visibleChange, loadColumnsInfo,dynamicParamHandler,loadData,handleChangeInTable,combineRowKey,clickThenCheck,filterUnuseSelect},
|
||||
{visible, rowSelection, checkedKeys, selectRows, pagination, dataSource, columns, loading,title,iSorter,queryInfo,queryParam,dictOptions}] = usePopBiz(getBindValue);
|
||||
|
||||
const showSearchFlag= computed(()=> unref(queryInfo) && unref(queryInfo).length>0)
|
||||
/**
|
||||
*监听code
|
||||
*/
|
||||
watch(
|
||||
() => props.code,
|
||||
() => {
|
||||
loadColumnsInfo();
|
||||
}
|
||||
);
|
||||
/**
|
||||
*监听popup动态参数 支持系统变量语法
|
||||
*/
|
||||
watch(
|
||||
() => props.param,
|
||||
() => {
|
||||
if(visible){
|
||||
dynamicParamHandler();
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
);
|
||||
/**
|
||||
*监听sorter排序字段
|
||||
*/
|
||||
watchEffect(() => {
|
||||
if(props.sorter){
|
||||
let arr = props.sorter.split('=');
|
||||
if (arr.length === 2 && ['asc', 'desc'].includes(arr[1].toLowerCase())) {
|
||||
iSorter.value = {column: arr[0], order: arr[1].toLowerCase()}
|
||||
// 排序字段受控
|
||||
unref(columns).forEach(col => {
|
||||
if (col.dataIndex === unref(iSorter).column) {
|
||||
col['sortOrder'] = unref(iSorter).order === 'asc' ? 'ascend' : 'descend';
|
||||
} else {
|
||||
col['sortOrder'] = false;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.warn('【JPopup】sorter参数不合法')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function handleToggleSearch(){
|
||||
toggleSearchStatus.value = !unref(toggleSearchStatus);
|
||||
}
|
||||
/**
|
||||
* 取消/关闭
|
||||
*/
|
||||
function handleCancel() {
|
||||
closeModal();
|
||||
checkedKeys.value = []
|
||||
selectRows.value = []
|
||||
}
|
||||
|
||||
/**
|
||||
*确认提交
|
||||
*/
|
||||
function handleSubmit() {
|
||||
filterUnuseSelect();
|
||||
if(!props.multi && unref(selectRows) && unref(selectRows).length>1){
|
||||
createMessage.warning("只能选择一条记录");
|
||||
return false
|
||||
}
|
||||
if(!unref(selectRows) || unref(selectRows).length==0){
|
||||
createMessage.warning("至少选择一条记录");
|
||||
return false
|
||||
}
|
||||
emit('ok', unref(selectRows));
|
||||
handleCancel();
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery(){
|
||||
loadData(1);
|
||||
}
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset(){
|
||||
queryParam.value = {};
|
||||
loadData(1);
|
||||
}
|
||||
return {
|
||||
attrs,
|
||||
register,
|
||||
tableScroll,
|
||||
dataSource,
|
||||
pagination,
|
||||
columns,
|
||||
rowSelection,
|
||||
checkedKeys,
|
||||
loading,
|
||||
title,
|
||||
handleCancel,
|
||||
handleSubmit,
|
||||
clickThenCheck,
|
||||
loadData,
|
||||
combineRowKey,
|
||||
handleChangeInTable,
|
||||
visibleChange,
|
||||
queryInfo,
|
||||
queryParam,
|
||||
tableRef,
|
||||
formRef,
|
||||
labelCol,
|
||||
wrapperCol,
|
||||
dictOptions,
|
||||
showSearchFlag,
|
||||
toggleSearchStatus,
|
||||
handleToggleSearch,
|
||||
searchQuery,
|
||||
searchReset,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 5px;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
:deep .jeecg-basic-table .ant-table-wrapper .ant-table-title {
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue