采运销弹框优化
This commit is contained in:
‘huanghaiixia’
@ -2,28 +2,58 @@
|
|||||||
<div>
|
<div>
|
||||||
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
||||||
@visible-change="handleVisibleChange" >
|
@visible-change="handleVisibleChange" >
|
||||||
<BasicTable @register="registerTable" class="contractSalesPngPurPointModal" v-if="showTable"></BasicTable>
|
<a-form ref="formRef" v-bind="layout">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="10">
|
||||||
|
<a-form-item label="有效期" name="dateArr" >
|
||||||
|
<a-range-picker :inputReadOnly="true" v-model:value="dateArr" :format="dateFormat" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="4">
|
||||||
|
<div class="btnFoot">
|
||||||
|
<a-button style="margin: 0 10px" type="primary" @click="onSearch">搜索</a-button>
|
||||||
|
<a-button @click="onReset">重置</a-button>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
</a-form>
|
||||||
|
<a-table :loading="loading" rowKey="kpId" :scroll="{x: 200}"
|
||||||
|
:columns="columns" bordered :data-source="tableData"
|
||||||
|
:row-selection="{ type: props.selectType, selectedRowKeys: selectedKeys, onChange: onSelectChange }"
|
||||||
|
:pagination="pagination"></a-table>
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, unref, nextTick } from 'vue';
|
import { ref, computed, unref, nextTick, reactive } from 'vue';
|
||||||
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useI18n } from '/@/hooks/web/useI18n';
|
||||||
import { getContractSalesPngPoint } from '/@/api/contract/contractSalesPngPur';
|
import { getContractSalesPngPoint } from '/@/api/contract/contractSalesPngPur';
|
||||||
import { getContractSalesPngPointTc } from '/@/api/contract/contractSalesPngPur';
|
import dayjs from 'dayjs';
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const comId = ref('')
|
const comId = ref('')
|
||||||
const dateArr = ref([])
|
const dateFormat = ['YYYY-MM-DD', 'YYYY-MM-DD'];
|
||||||
const codeFormSchema: FormSchema[] = [
|
const dateArr = ref<any[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const layout = {
|
||||||
|
labelCol: { span: 9 },
|
||||||
|
wrapperCol: { span: 15 },
|
||||||
|
}
|
||||||
|
let columns: BasicColumn[] = [
|
||||||
|
{ title: t('合同号'), dataIndex: 'kpNo', width: 120},
|
||||||
|
{ title: t('合同名称'), dataIndex: 'kpName', width: 180},
|
||||||
|
{ title: '供应商', dataIndex: 'suName',width: 150},
|
||||||
|
{ title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
|
||||||
|
{ title: '有效期结束',dataIndex: 'dateTo', width: 120},
|
||||||
|
{ title: t('合同主体'), dataIndex: 'comName', width: 130},
|
||||||
|
{ title: t('上载点'), dataIndex: 'pointUpName',width: 180},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']);
|
const emit = defineEmits(['success', 'register']);
|
||||||
|
|
||||||
const { notification } = useMessage();
|
const { notification } = useMessage();
|
||||||
@ -37,77 +67,71 @@
|
|||||||
pageType: String,
|
pageType: String,
|
||||||
defaultDate: { type: Array, default: [] },
|
defaultDate: { type: Array, default: [] },
|
||||||
});
|
});
|
||||||
dateArr.value = props.defaultDate || []
|
const pagination = reactive({
|
||||||
let columns: BasicColumn[] = [
|
total: 0,
|
||||||
{ title: t('合同号'), dataIndex: 'kpNo', },
|
current: 1,
|
||||||
{ title: t('合同名称'), dataIndex: 'kpName', },
|
pageSize: 10,
|
||||||
{ title: '供应商', dataIndex: 'suName',},
|
showQuickJumper: true,
|
||||||
{ title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
|
showSizeChanger: true,
|
||||||
{ title: '有效期结束',dataIndex: 'dateTo', width: 120},
|
showTotal: (total: number) => `共 ${total}条数据`,
|
||||||
{ title: t('合同主体'), dataIndex: 'comName', },
|
pageSizeOptions: ["10", "20", "50", "80", "100"],
|
||||||
{ title: t('上载点'), dataIndex: 'pointUpName'},
|
onChange: (current, size) => {
|
||||||
|
pagination.current = current;
|
||||||
];
|
pagination.pageSize = size;
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
loadData();
|
||||||
dateArr.value = props.defaultDate || []
|
},
|
||||||
showTable.value = true
|
|
||||||
comId.value = data.comId
|
|
||||||
setModalProps({ confirmLoading: false });
|
|
||||||
setPagination({'limit': 1,'size': 10,'page': 1});
|
|
||||||
isUpdate.value = !!data?.isUpdate;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload,setPagination }] = useTable({
|
|
||||||
title: t('管道气采购合同列表'),
|
|
||||||
api: getContractSalesPngPoint,
|
|
||||||
columns,
|
|
||||||
|
|
||||||
bordered: true,
|
const loadData = async (val) => {
|
||||||
pagination: true,
|
if (val && props.defaultDate.length) {
|
||||||
canResize: false,
|
dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
|
||||||
formConfig: {
|
|
||||||
labelCol:{span: 9},
|
|
||||||
schemas: [
|
|
||||||
{
|
|
||||||
field: 'dateFrom',
|
|
||||||
label: '有效期',
|
|
||||||
component: 'RangePicker',
|
|
||||||
defaultValue: props.defaultDate || [],
|
|
||||||
componentProps: {
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
style: { width: '100%' },
|
|
||||||
getPopupContainer: () => document.body,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
],
|
loading.value = true;
|
||||||
fieldMapToTime: [['dateFrom', ['startDate', 'endDate'], 'YYYY-MM-DD']],
|
try {
|
||||||
showResetButton: true,
|
const res = await getContractSalesPngPoint({
|
||||||
},
|
limit: pagination.current,
|
||||||
immediate: false, // 设置为不立即调用
|
size: pagination.pageSize,
|
||||||
beforeFetch: (params) => {
|
startDate: dateArr.value.length ? dayjs(dateArr.value[0]).format('YYYY-MM-DD') : '',
|
||||||
return { ...params,page:params.limit, comId: comId.value};
|
endDate: dateArr.value.length ? dayjs(dateArr.value[1]).format('YYYY-MM-DD') : '',
|
||||||
},
|
});
|
||||||
rowSelection: {
|
tableData.value = res.list || [];
|
||||||
type: props.selectType,
|
pagination.total = res.total || 0;
|
||||||
onChange: onSelectChange
|
} catch (error) {
|
||||||
},
|
console.error('获取列表失败:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||||
|
if (props.defaultDate && props.defaultDate.length === 2) {
|
||||||
|
dateArr.value = [dayjs(props.defaultDate[0] as string), dayjs(props.defaultDate[1] as string)]
|
||||||
|
} else {
|
||||||
|
dateArr.value = []
|
||||||
|
}
|
||||||
|
comId.value = data.comId
|
||||||
|
setModalProps({ confirmLoading: false });
|
||||||
|
isUpdate.value = !!data?.isUpdate;
|
||||||
});
|
});
|
||||||
const handleVisibleChange = async (visible: boolean) => {
|
const handleVisibleChange = async (visible: boolean) => {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
showTable.value = false
|
selectedKeys.value = [];
|
||||||
await nextTick();
|
selectedValues.value = []
|
||||||
await nextTick();
|
loadData(1)
|
||||||
await nextTick();
|
|
||||||
nextTick(() => {
|
|
||||||
|
|
||||||
reload({searchInfo:{'limit':1,'size':10,'page':1, startDate: props.defaultDate[0], endDate: props.defaultDate[1] }});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
function onSelectChange(rowKeys: string[], e) {
|
function onSelectChange(rowKeys: string[], e) {
|
||||||
selectedKeys.value = rowKeys;
|
selectedKeys.value = rowKeys;
|
||||||
selectedValues.value = e
|
selectedValues.value = e
|
||||||
}
|
}
|
||||||
|
const onSearch = () => {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
const onReset = () => {
|
||||||
|
dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
|
||||||
|
pagination.current = 1
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
const getTitle = computed(() => (t('管道气采购合同列表')));
|
const getTitle = computed(() => (t('管道气采购合同列表')));
|
||||||
|
|
||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
|
|||||||
@ -2,28 +2,58 @@
|
|||||||
<div>
|
<div>
|
||||||
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
||||||
@visible-change="handleVisibleChange" >
|
@visible-change="handleVisibleChange" >
|
||||||
<BasicTable @register="registerTable" class="contractSalesPngPurPointModal" v-if="showTable"></BasicTable>
|
<a-form ref="formRef" v-bind="layout">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="10">
|
||||||
|
<a-form-item label="有效期" name="dateArr" >
|
||||||
|
<a-range-picker :inputReadOnly="true" v-model:value="dateArr" :format="dateFormat" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="4">
|
||||||
|
<div class="btnFoot">
|
||||||
|
<a-button style="margin: 0 10px" type="primary" @click="onSearch">搜索</a-button>
|
||||||
|
<a-button @click="onReset">重置</a-button>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
</a-form>
|
||||||
|
<a-table :loading="loading" rowKey="ktpId" :scroll="{x: 600}"
|
||||||
|
:columns="columns" bordered :data-source="tableData"
|
||||||
|
:row-selection="{ type: props.selectType, selectedRowKeys: selectedKeys, onChange: onSelectChange }"
|
||||||
|
:pagination="pagination"></a-table>
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, unref, nextTick } from 'vue';
|
import { ref, computed, unref, nextTick, reactive } from 'vue';
|
||||||
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useI18n } from '/@/hooks/web/useI18n';
|
||||||
import { getContractSalesPngPoint } from '/@/api/contract/contractSalesPngPur';
|
|
||||||
import { getContractSalesPngPointTc } from '/@/api/contract/contractSalesPngPur';
|
import { getContractSalesPngPointTc } from '/@/api/contract/contractSalesPngPur';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const comId = ref('')
|
const comId = ref('')
|
||||||
const dateArr = ref([])
|
const dateFormat = ['YYYY-MM-DD', 'YYYY-MM-DD'];
|
||||||
const codeFormSchema: FormSchema[] = [
|
const dateArr = ref<any[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const layout = {
|
||||||
|
labelCol: { span: 9 },
|
||||||
|
wrapperCol: { span: 15 },
|
||||||
|
}
|
||||||
|
let columns: BasicColumn[] = [
|
||||||
|
{ title: t('合同号'), dataIndex: 'kpNo', width: 120},
|
||||||
|
{ title: t('合同名称'), dataIndex: 'kpName', width: 180},
|
||||||
|
{ title: '供应商', dataIndex: 'suName',width: 150},
|
||||||
|
{ title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
|
||||||
|
{ title: '有效期结束',dataIndex: 'dateTo', width: 120},
|
||||||
|
{ title: t('合同主体'), dataIndex: 'comName', width: 130},
|
||||||
|
{ title: t('上载点'), dataIndex: 'pointUpName',width: 160},
|
||||||
|
{ title: t('下载点'), dataIndex: 'pointDelyName',width: 160},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']);
|
const emit = defineEmits(['success', 'register']);
|
||||||
|
|
||||||
const { notification } = useMessage();
|
const { notification } = useMessage();
|
||||||
@ -37,77 +67,71 @@
|
|||||||
pageType: String,
|
pageType: String,
|
||||||
defaultDate: { type: Array, default: [] },
|
defaultDate: { type: Array, default: [] },
|
||||||
});
|
});
|
||||||
dateArr.value = props.defaultDate || []
|
const pagination = reactive({
|
||||||
let columns: BasicColumn[] = [
|
total: 0,
|
||||||
{ title: t('合同号'), dataIndex: 'kpNo', },
|
current: 1,
|
||||||
{ title: t('合同名称'), dataIndex: 'kpName', },
|
pageSize: 10,
|
||||||
{ title: '供应商', dataIndex: 'suName',},
|
showQuickJumper: true,
|
||||||
{ title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
|
showSizeChanger: true,
|
||||||
{ title: '有效期结束',dataIndex: 'dateTo', width: 120},
|
showTotal: (total: number) => `共 ${total}条数据`,
|
||||||
{ title: t('合同主体'), dataIndex: 'comName', },
|
pageSizeOptions: ["10", "20", "50", "80", "100"],
|
||||||
{ title: t('上载点'), dataIndex: 'pointUpName'},
|
onChange: (current, size) => {
|
||||||
{ title: t('下载点'), dataIndex: 'pointDelyName'},
|
pagination.current = current;
|
||||||
];
|
pagination.pageSize = size;
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
loadData();
|
||||||
dateArr.value = props.defaultDate || []
|
},
|
||||||
showTable.value = true
|
|
||||||
comId.value = data.comId
|
|
||||||
setModalProps({ confirmLoading: false });
|
|
||||||
setPagination({'limit': 1,'size': 10,'page': 1});
|
|
||||||
isUpdate.value = !!data?.isUpdate;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload,setPagination }] = useTable({
|
|
||||||
title: t('管道气管输合同列表'),
|
|
||||||
api: getContractSalesPngPointTc,
|
|
||||||
columns,
|
|
||||||
|
|
||||||
bordered: true,
|
const loadData = async (val) => {
|
||||||
pagination: true,
|
if (val && props.defaultDate.length) {
|
||||||
canResize: false,
|
dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
|
||||||
formConfig: {
|
|
||||||
labelCol:{span: 9},
|
|
||||||
schemas: [
|
|
||||||
{
|
|
||||||
field: 'dateFrom',
|
|
||||||
label: '有效期',
|
|
||||||
component: 'RangePicker',
|
|
||||||
defaultValue: props.defaultDate,
|
|
||||||
componentProps: {
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
style: { width: '100%' },
|
|
||||||
getPopupContainer: () => document.body,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
],
|
loading.value = true;
|
||||||
fieldMapToTime: [['dateFrom', ['startDate', 'endDate'], 'YYYY-MM-DD']],
|
try {
|
||||||
showResetButton: true,
|
const res = await getContractSalesPngPointTc({
|
||||||
},
|
limit: pagination.current,
|
||||||
immediate: false, // 设置为不立即调用
|
size: pagination.pageSize,
|
||||||
beforeFetch: (params) => {
|
startDate: dateArr.value.length ? dayjs(dateArr.value[0]).format('YYYY-MM-DD') : '',
|
||||||
return { ...params,page:params.limit, comId: comId.value};
|
endDate: dateArr.value.length ? dayjs(dateArr.value[1]).format('YYYY-MM-DD') : '',
|
||||||
},
|
});
|
||||||
rowSelection: {
|
tableData.value = res.list || [];
|
||||||
type: props.selectType,
|
pagination.total = res.total || 0;
|
||||||
onChange: onSelectChange
|
} catch (error) {
|
||||||
},
|
console.error('获取列表失败:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||||
|
if (props.defaultDate && props.defaultDate.length === 2) {
|
||||||
|
dateArr.value = [dayjs(props.defaultDate[0] as string), dayjs(props.defaultDate[1] as string)]
|
||||||
|
} else {
|
||||||
|
dateArr.value = []
|
||||||
|
}
|
||||||
|
comId.value = data.comId
|
||||||
|
setModalProps({ confirmLoading: false });
|
||||||
|
isUpdate.value = !!data?.isUpdate;
|
||||||
});
|
});
|
||||||
const handleVisibleChange = async (visible: boolean) => {
|
const handleVisibleChange = async (visible: boolean) => {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
showTable.value = false
|
selectedKeys.value = [];
|
||||||
await nextTick();
|
selectedValues.value = []
|
||||||
await nextTick();
|
loadData(1)
|
||||||
await nextTick();
|
|
||||||
nextTick(() => {
|
|
||||||
|
|
||||||
reload({searchInfo:{'limit':1,'size':10,'page':1, startDate: props.defaultDate[0], endDate: props.defaultDate[1] }});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
function onSelectChange(rowKeys: string[], e) {
|
function onSelectChange(rowKeys: string[], e) {
|
||||||
selectedKeys.value = rowKeys;
|
selectedKeys.value = rowKeys;
|
||||||
selectedValues.value = e
|
selectedValues.value = e
|
||||||
}
|
}
|
||||||
|
const onSearch = () => {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
const onReset = () => {
|
||||||
|
dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
|
||||||
|
pagination.current = 1
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
const getTitle = computed(() => (t('管道气管输合同列表')));
|
const getTitle = computed(() => (t('管道气管输合同列表')));
|
||||||
|
|
||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
|
|||||||
Reference in New Issue
Block a user