|
|
@@ -1,83 +1,145 @@
|
|
|
<template>
|
|
|
- <!-- 采购: 实时敞口-->
|
|
|
- <div class="purchase-real-time">
|
|
|
- 采购: 实时敞口
|
|
|
- </div>
|
|
|
+ <!-- 采敞口: 现货头寸-->
|
|
|
+ <div class="exposure-spot table-height"
|
|
|
+ :loading="loading">
|
|
|
+ <filterCustomTable @search="search">
|
|
|
+ <BtnList :btnList="commonBtn" />
|
|
|
+ </filterCustomTable>
|
|
|
+ <contextMenu :contextMenuList="forDataBtn">
|
|
|
+ <a-table :columns="columns"
|
|
|
+ class="topTable"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :customRow="Rowclick"
|
|
|
+ :pagination="false"
|
|
|
+ rowKey="key"
|
|
|
+ :data-source="tableList">
|
|
|
+ </a-table>
|
|
|
+ </contextMenu>
|
|
|
+ <a-drawer placement="bottom"
|
|
|
+ :closable="false"
|
|
|
+ :visible="visible"
|
|
|
+ :get-container="false"
|
|
|
+ :wrap-style="{ position: 'absolute' }"
|
|
|
+ @close="closeDrawer">
|
|
|
+ <div>
|
|
|
+ <a-table :columns="detailColumns"
|
|
|
+ class="topTable"
|
|
|
+ :pagination="false"
|
|
|
+ rowKey="key"
|
|
|
+ :data-source="detailTableList">
|
|
|
+ </a-table>
|
|
|
+ <ThridMenu :list="tabList"
|
|
|
+ @selectMenu="selectMenu" />
|
|
|
+ </div>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent, ref } from 'vue';
|
|
|
- import { QueryCustomInfo } from '@/services/go/ermcp/customInfo/index';
|
|
|
- import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
|
|
|
- import { message } from 'ant-design-vue';
|
|
|
- import { initData } from '@/common/methods';
|
|
|
+import { defineComponent, Ref, ref } from 'vue';
|
|
|
+import { initData } from '@/common/methods';
|
|
|
+import filterCustomTable from '../../components/filterTable/index.vue';
|
|
|
+import { getBtnList } from '@/common/setup/contextMenu/index';
|
|
|
+import contextMenu from '@/common/components/contextMenu/index.vue';
|
|
|
+import { getColumsAndSearch } from '../setup';
|
|
|
+import { QuerySpotPosition, QuerySpotPositionDetail } from '@/services/go/ermcp/exposure/index';
|
|
|
+import { Ermcp3AreaSpot, Ermcp3AreaSpotDetail } from '@/services/go/ermcp/exposure/interface';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+import { handleTableEvent } from '@/common/setup/event/index';
|
|
|
+import BtnList from '@/common/components/buttonList/index.vue';
|
|
|
+import ThridMenu from '@/common/components/thirdMenu/index.vue';
|
|
|
+import { ColumnType } from '@/common/methods/table';
|
|
|
|
|
|
- // 查询客户资料列表
|
|
|
- function getCustomList() {
|
|
|
- // const filteredInfo = ref();
|
|
|
- // const sortedInfo = ref();
|
|
|
- // const columns = computed(() => {
|
|
|
- // const filtered = filteredInfo.value || {};
|
|
|
- // const sorted = sortedInfo.value || {};
|
|
|
- // return [
|
|
|
- // {
|
|
|
- // title: '序号',
|
|
|
- // dataIndex: 'index',
|
|
|
- // key: 'index',
|
|
|
- // align: 'center',
|
|
|
- // width: 50,
|
|
|
- // customRender: (param: any) => `${param.index + 1}`,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // title: 'Age',
|
|
|
- // dataIndex: 'age',
|
|
|
- // key: 'age',
|
|
|
- // sorter: (a: DataItem, b: DataItem) => a.age - b.age,
|
|
|
- // sortOrder: sorted.columnKey === 'age' && sorted.order,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // title: 'Address',
|
|
|
- // dataIndex: 'address',
|
|
|
- // key: 'address',
|
|
|
- // filters: [
|
|
|
- // { text: 'London', value: 'London' },
|
|
|
- // { text: 'New York', value: 'New York' },
|
|
|
- // ],
|
|
|
- // filteredValue: filtered.address || null,
|
|
|
- // onFilter: (value: string, record: DataItem) => record.address.includes(value),
|
|
|
- // sorter: (a: DataItem, b: DataItem) => a.address.length - b.address.length,
|
|
|
- // sortOrder: sorted.columnKey === 'address' && sorted.order,
|
|
|
- // ellipsis: true,
|
|
|
- // },
|
|
|
- // ];
|
|
|
- // });
|
|
|
- const customList = ref<QueryCustomInfoType[]>([]);
|
|
|
- function actionQuery() {
|
|
|
- QueryCustomInfo(4)
|
|
|
- .then((res) => {
|
|
|
- console.log('L', res);
|
|
|
- })
|
|
|
- .catch((err) => message.error(err));
|
|
|
- }
|
|
|
+// 获取表格数据
|
|
|
+function getExposure() {
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const tableList = ref<Ermcp3AreaSpot[]>([]);
|
|
|
+ function queryList() {
|
|
|
+ QuerySpotPosition()
|
|
|
+ .then((res) => {
|
|
|
+ tableList.value = res.map((e, i) => {
|
|
|
+ return { ...e, key: String(i) };
|
|
|
+ });
|
|
|
+ loading.value = false;
|
|
|
+ console.log('获取表格数据', tableList);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ message.error(err);
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return { loading, tableList, queryList };
|
|
|
+}
|
|
|
|
|
|
- return { customList, actionQuery };
|
|
|
+// 控制是否打开明细
|
|
|
+function handleDrawer() {
|
|
|
+ const visible = ref<boolean>(false);
|
|
|
+ function closeDrawer() {
|
|
|
+ visible.value = !visible.value;
|
|
|
}
|
|
|
+ return { visible, closeDrawer };
|
|
|
+}
|
|
|
|
|
|
- export default defineComponent({
|
|
|
- name: 'purchase-real-time',
|
|
|
- components: {},
|
|
|
- setup() {
|
|
|
- const { customList, actionQuery } = getCustomList();
|
|
|
- initData(() => {
|
|
|
- actionQuery();
|
|
|
- // 加载数据在这里
|
|
|
+// 明细
|
|
|
+function handleDeatil(loading: Ref<boolean>, selectedRow: Ermcp3AreaSpot) {
|
|
|
+ const tabList = [{ lable: '现货明细' }];
|
|
|
+ const detailTableList = ref<Ermcp3AreaSpotDetail[]>([]);
|
|
|
+ const detailColumns = ref<ColumnType[]>([]);
|
|
|
+ // 切换明细
|
|
|
+ function selectMenu(index: number) {
|
|
|
+ ActualExposureDetail();
|
|
|
+ const { columns, getColumns } = getColumsAndSearch('table_pcweb_exposure_detail', false);
|
|
|
+ getColumns();
|
|
|
+ detailColumns.value = columns.value;
|
|
|
+ }
|
|
|
+ selectMenu(0);
|
|
|
+ // 现货头寸明细
|
|
|
+ function ActualExposureDetail() {
|
|
|
+ loading.value = true;
|
|
|
+ const param = { deliverygoodsid: selectedRow.deliverygoodsid };
|
|
|
+ QuerySpotPositionDetail(param)
|
|
|
+ .then((res) => {
|
|
|
+ detailTableList.value = res.map((e, i) => {
|
|
|
+ return { ...e, key: String(i) };
|
|
|
+ });
|
|
|
+ loading.value = false;
|
|
|
+ console.log('现货头寸明细', detailTableList);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ message.error(err);
|
|
|
+ loading.value = false;
|
|
|
});
|
|
|
- return { customList };
|
|
|
- },
|
|
|
- });
|
|
|
+ }
|
|
|
+ return { tabList, selectMenu, detailTableList, detailColumns };
|
|
|
+}
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'exposure-spot',
|
|
|
+ components: {
|
|
|
+ contextMenu,
|
|
|
+ filterCustomTable,
|
|
|
+ ThridMenu,
|
|
|
+ BtnList,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const { visible, closeDrawer } = handleDrawer();
|
|
|
+ const { columns, search, getColumns } = getColumsAndSearch('table_pcweb_exposure_detail', true);
|
|
|
+ const { expandedRowKeys, selectedRow, Rowclick } = handleTableEvent<Ermcp3AreaSpot>(closeDrawer);
|
|
|
+ const { loading, tableList, queryList } = getExposure();
|
|
|
+ initData(() => {
|
|
|
+ queryList();
|
|
|
+ getColumns();
|
|
|
+ });
|
|
|
+ return { columns, search, expandedRowKeys, selectedRow, Rowclick, visible, closeDrawer, ...getBtnList('exposure_history', false), loading, tableList, ...handleDeatil(loading, (selectedRow as unknown) as Ermcp3AreaSpot) };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .purchase-real-time {
|
|
|
- }</style
|
|
|
+.exposure-spot {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style
|
|
|
>;
|
huangbin