|
|
@@ -1,257 +1,264 @@
|
|
|
<template>
|
|
|
- <!-- 现货合同详情-->
|
|
|
- <a-modal class="add-custom custom-detail"
|
|
|
- title="现货合同详情"
|
|
|
- v-model:visible="visible"
|
|
|
- centered
|
|
|
- :maskClosable="maskClosableFlag"
|
|
|
- @cancel="cancel"
|
|
|
- width="890px">
|
|
|
- <template #footer>
|
|
|
- <a-button key="submit"
|
|
|
- type="primary"
|
|
|
- :loading="loading"
|
|
|
- @click="cancel">关闭
|
|
|
- </a-button>
|
|
|
+ <!-- 现货合同详情-->
|
|
|
+ <a-modal class="add-custom custom-detail"
|
|
|
+ title="现货合同详情"
|
|
|
+ v-model:visible="visible"
|
|
|
+ centered
|
|
|
+ :maskClosable="maskClosableFlag"
|
|
|
+ @cancel="cancel"
|
|
|
+ width="890px">
|
|
|
+ <template #footer>
|
|
|
+ <a-button key="submit"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="cancel">关闭
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ <a-tabs v-model:activeKey="activeKey"
|
|
|
+ @change="tabClick">
|
|
|
+ <a-tab-pane v-for="item in tabList"
|
|
|
+ :key="item.key"
|
|
|
+ :tab="item.name">
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <InfoDetail :selectedRow="selectedRow"
|
|
|
+ :businessManager="businessManager"
|
|
|
+ v-if="activeKey == 1" />
|
|
|
+ <div class="tableDatas"
|
|
|
+ v-else>
|
|
|
+ <a-table class="dialogTable"
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="tableList"
|
|
|
+ :pagination="false">
|
|
|
+ <template #status="{ text }">
|
|
|
+ <span class="yellow">{{ text }}</span>
|
|
|
+ <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow' -->
|
|
|
</template>
|
|
|
- <a-tabs v-model:activeKey="activeKey"
|
|
|
- @change="tabClick">
|
|
|
- <a-tab-pane v-for="item in tabList"
|
|
|
- :key="item.key"
|
|
|
- :tab="item.name">
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
- <InfoDetail :selectedRow="selectedRow"
|
|
|
- :businessManager="businessManager"
|
|
|
- v-if="activeKey == 1"/>
|
|
|
- <div class="tableDatas"
|
|
|
- v-else>
|
|
|
- <a-table class="dialogTable"
|
|
|
- :columns="columns"
|
|
|
- :data-source="tableList"
|
|
|
- :pagination="false">
|
|
|
- <template #status="{ text }">
|
|
|
- <span class="yellow">{{ text }}</span>
|
|
|
- <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow' -->
|
|
|
- </template>
|
|
|
|
|
|
- <template #applystatus="{ text }">
|
|
|
- <a>{{ getApplyStatusName(text) }}</a>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 发票金额-->
|
|
|
- <template #invoicetype="{ text }">
|
|
|
- <a>{{ invoiceStatusName(text) }}</a>
|
|
|
- </template>
|
|
|
+ <template #applystatus="{ text }">
|
|
|
+ <a>{{ getApplyStatusName(text) }}</a>
|
|
|
+ </template>
|
|
|
|
|
|
- <!-- 发票类型-->
|
|
|
- <template #contracttype="{ text }">
|
|
|
- <a>{{ getPlanContractType(text) }}</a>
|
|
|
- </template>
|
|
|
+ <!-- 发票金额-->
|
|
|
+ <template #invoicetype="{ text }">
|
|
|
+ <a>{{ invoiceStatusName(text) }}</a>
|
|
|
+ </template>
|
|
|
|
|
|
- <!-- 出入库类型 -->
|
|
|
- <template #inouttype="{ text }">
|
|
|
- <a>{{ InOutTypeName(text) }}</a>
|
|
|
- </template>
|
|
|
+ <!-- 发票类型-->
|
|
|
+ <template #contracttype="{ text }">
|
|
|
+ <a>{{ getPlanContractType(text) }}</a>
|
|
|
+ </template>
|
|
|
|
|
|
+ <!-- 出入库类型 -->
|
|
|
+ <template #inouttype="{ text }">
|
|
|
+ <a>{{ InOutTypeName(text) }}</a>
|
|
|
+ </template>
|
|
|
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </a-modal>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import {defineComponent, PropType, ref} from 'vue';
|
|
|
- import {closeModal} from '@/common/setup/modal/index';
|
|
|
- import {Ermcp3ContractRsp} from '@/services/go/ermcp/spot-contract/interface';
|
|
|
- import {queryResultLoadingAndInfo} from '@/common/methods/request/resultInfo';
|
|
|
- import {QueryBusinessFp, QueryBusinessKx} from '@/services/go/ermcp/finance-review';
|
|
|
- import {QueryBusinessDj, QueryBusinessJs} from '@/services/go/ermcp/business-review';
|
|
|
- import {QueryAreaStockApply} from '@/services/go/ermcp/inventory-review';
|
|
|
- import {QueryChangeLog} from '@/services/go/ermcp/spot-contract';
|
|
|
- import {ErmcpLoginUserEx} from '@/services/go/ermcp/account/interface';
|
|
|
- import InfoDetail from '../infoDetail/index.vue';
|
|
|
- import {getApplyStatusName} from '@/views/manage/business-review/setup';
|
|
|
- import {getTableColumns} from '@/common/setup/table';
|
|
|
- import {invoiceStatusName} from "@/views/manage/finance-review/setup";
|
|
|
- import {getPlanContractType} from "@/views/business/plan/setup";
|
|
|
- import {InOutTypeName} from "@/views/manage/inventory-review/setup";
|
|
|
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
|
|
|
+import { closeModal } from '@/common/setup/modal/index';
|
|
|
+import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
|
|
|
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
|
|
|
+import { QueryBusinessFp, QueryBusinessKx } from '@/services/go/ermcp/finance-review';
|
|
|
+import { QueryBusinessDj, QueryBusinessJs } from '@/services/go/ermcp/business-review';
|
|
|
+import { QueryAreaStockApply } from '@/services/go/ermcp/inventory-review';
|
|
|
+import { QueryChangeLog } from '@/services/go/ermcp/spot-contract';
|
|
|
+import { ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
|
|
|
+import InfoDetail from '../infoDetail/index.vue';
|
|
|
+import { getApplyStatusName } from '@/views/manage/business-review/setup';
|
|
|
+import { getTableColumns } from '@/common/setup/table';
|
|
|
+import { invoiceStatusName } from '@/views/manage/finance-review/setup';
|
|
|
+import { getPlanContractType } from '@/views/business/plan/setup';
|
|
|
+import { InOutTypeName } from '@/views/manage/inventory-review/setup';
|
|
|
|
|
|
- export default defineComponent({
|
|
|
- name: 'spot-contract-detail',
|
|
|
- components: {InfoDetail},
|
|
|
- props: {
|
|
|
- selectedRow: {
|
|
|
- type: Object as PropType<Ermcp3ContractRsp>,
|
|
|
- default: {},
|
|
|
- },
|
|
|
- businessManager: {
|
|
|
- type: Array as PropType<ErmcpLoginUserEx[]>,
|
|
|
- default: [],
|
|
|
- },
|
|
|
+export default defineComponent({
|
|
|
+ name: 'spot-contract-detail',
|
|
|
+ components: { InfoDetail },
|
|
|
+ props: {
|
|
|
+ selectedRow: {
|
|
|
+ type: Object as PropType<Ermcp3ContractRsp>,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ businessManager: {
|
|
|
+ type: Array as PropType<ErmcpLoginUserEx[]>,
|
|
|
+ default: [],
|
|
|
},
|
|
|
- setup: function (props, context) {
|
|
|
- const {visible, cancel} = closeModal('detail');
|
|
|
+ },
|
|
|
+ setup: function(props, context) {
|
|
|
+ const { visible, cancel } = closeModal('detail');
|
|
|
+ const tabList = ref<{ key: number; name: string }[]>([]);
|
|
|
|
|
|
- let tabList = ref<any[]> ((props.selectedRow.contracctstatus === 4 || 0 ) ? // 审核拒绝和未提交不显示后面的选项
|
|
|
- [{key: 1, name: '合同详情'},]
|
|
|
- : [
|
|
|
- {key: 1, name: '合同详情'},
|
|
|
- {key: 2, name: '点价记录'},
|
|
|
- {key: 3, name: '交收记录'},
|
|
|
- {key: 4, name: '款项记录'},
|
|
|
- {key: 5, name: '发票记录'},
|
|
|
- {key: 6, name: '入库记录'},
|
|
|
- {key: 7, name: '出库记录'},
|
|
|
- {key: 8, name: '变更记录'},
|
|
|
- ]);
|
|
|
+ const activeKey = ref<number>(1);
|
|
|
|
|
|
- const activeKey = ref<number>(1);
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const tableList = ref<any[]>([]);
|
|
|
+ // 表头数据
|
|
|
+ const { columns, registerColumn } = getTableColumns();
|
|
|
+ watchEffect(() => {
|
|
|
+ if (visible.value && props.selectedRow.contracctstatus) {
|
|
|
+ // 审核拒绝和未提交不显示后面的选项
|
|
|
|
|
|
- const loading = ref<boolean>(false);
|
|
|
- const tableList = ref<any[]>([]);
|
|
|
- // 表头数据
|
|
|
- const {columns, registerColumn} = getTableColumns();
|
|
|
+ console.log(props.selectedRow.contracctstatus);
|
|
|
|
|
|
- function tabClick() {
|
|
|
- const relatedid = props.selectedRow.spotcontractid;
|
|
|
- switch (activeKey.value) {
|
|
|
- case 1:
|
|
|
- break;
|
|
|
- case 2: // 点价记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_dj', []);
|
|
|
- queryResultLoadingAndInfo(QueryBusinessDj, loading, {relatedid}).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- case 3: // 交收记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_js', []);
|
|
|
- queryResultLoadingAndInfo(QueryBusinessJs, loading, {relatedid}).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- case 4: //款项记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_kx', []);
|
|
|
- queryResultLoadingAndInfo(QueryBusinessKx, loading, {relatedid}).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- case 5: // 发票记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_fp', []);
|
|
|
- queryResultLoadingAndInfo(QueryBusinessFp, loading, {relatedid}).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- case 6: // 入库记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_stock', []);
|
|
|
- queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
|
|
|
- spotcontractid: relatedid,
|
|
|
- inouttype: '1,3',
|
|
|
- }).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- case 7: // 出库记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_stock_out', []);
|
|
|
- queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
|
|
|
- spotcontractid: relatedid,
|
|
|
- inouttype: '2,4',
|
|
|
- }).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- case 8: //// 变更记录
|
|
|
- registerColumn('table_pcweb_someprice_detail_change', []);
|
|
|
- queryResultLoadingAndInfo(QueryChangeLog, loading, {RelatedId: relatedid}).then((res) => {
|
|
|
- tableList.value = res;
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
+ tabList.value = [0, 4, 6].includes(props.selectedRow.contracctstatus)
|
|
|
+ ? [{ key: 1, name: '合同详情' }]
|
|
|
+ : [
|
|
|
+ { key: 1, name: '合同详情' },
|
|
|
+ { key: 2, name: '点价记录' },
|
|
|
+ { key: 3, name: '交收记录' },
|
|
|
+ { key: 4, name: '款项记录' },
|
|
|
+ { key: 5, name: '发票记录' },
|
|
|
+ { key: 6, name: '入库记录' },
|
|
|
+ { key: 7, name: '出库记录' },
|
|
|
+ { key: 8, name: '变更记录' },
|
|
|
+ ];
|
|
|
+ activeKey.value = 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ function tabClick() {
|
|
|
+ const relatedid = props.selectedRow.spotcontractid;
|
|
|
+ switch (activeKey.value) {
|
|
|
+ case 1:
|
|
|
+ break;
|
|
|
+ case 2: // 点价记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_dj', []);
|
|
|
+ queryResultLoadingAndInfo(QueryBusinessDj, loading, { relatedid }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 3: // 交收记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_js', []);
|
|
|
+ queryResultLoadingAndInfo(QueryBusinessJs, loading, { relatedid }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 4: //款项记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_kx', []);
|
|
|
+ queryResultLoadingAndInfo(QueryBusinessKx, loading, { relatedid }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 5: // 发票记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_fp', []);
|
|
|
+ queryResultLoadingAndInfo(QueryBusinessFp, loading, { relatedid }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 6: // 入库记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_stock', []);
|
|
|
+ queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
|
|
|
+ spotcontractid: relatedid,
|
|
|
+ inouttype: '1,3',
|
|
|
+ }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 7: // 出库记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_stock_out', []);
|
|
|
+ queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
|
|
|
+ spotcontractid: relatedid,
|
|
|
+ inouttype: '2,4',
|
|
|
+ }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 8: //// 变更记录
|
|
|
+ registerColumn('table_pcweb_someprice_detail_change', []);
|
|
|
+ queryResultLoadingAndInfo(QueryChangeLog, loading, { RelatedId: relatedid }).then((res) => {
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ break;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- return {
|
|
|
- visible,
|
|
|
- cancel,
|
|
|
- loading,
|
|
|
- maskClosableFlag: false,
|
|
|
- activeKey,
|
|
|
- columns,
|
|
|
- tableList,
|
|
|
- tabList,
|
|
|
- tabClick,
|
|
|
- getApplyStatusName,
|
|
|
- invoiceStatusName,
|
|
|
- getPlanContractType,
|
|
|
- InOutTypeName,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ return {
|
|
|
+ visible,
|
|
|
+ cancel,
|
|
|
+ loading,
|
|
|
+ maskClosableFlag: false,
|
|
|
+ activeKey,
|
|
|
+ columns,
|
|
|
+ tableList,
|
|
|
+ tabList,
|
|
|
+ tabClick,
|
|
|
+ getApplyStatusName,
|
|
|
+ invoiceStatusName,
|
|
|
+ getPlanContractType,
|
|
|
+ InOutTypeName,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .custom-detail {
|
|
|
- .ant-modal-content {
|
|
|
- .ant-modal-body {
|
|
|
- padding-top: 0;
|
|
|
- padding-left: 0;
|
|
|
- padding-right: 0;
|
|
|
+.custom-detail {
|
|
|
+ .ant-modal-content {
|
|
|
+ .ant-modal-body {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
|
|
|
- .ant-tabs {
|
|
|
- background: @m-black11;
|
|
|
- width: 100%;
|
|
|
- padding: 0 24px;
|
|
|
+ .ant-tabs {
|
|
|
+ background: @m-black11;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24px;
|
|
|
|
|
|
- .ant-tabs-bar {
|
|
|
- margin-bottom: 0;
|
|
|
- border-bottom: 0;
|
|
|
- }
|
|
|
- .anticon {
|
|
|
- color: #88a0ae;
|
|
|
- }
|
|
|
- .ant-tabs-nav-container {
|
|
|
- .ant-tabs-nav-wrap {
|
|
|
- .ant-tabs-nav {
|
|
|
- .ant-tabs-tab {
|
|
|
- width: 70px;
|
|
|
- margin-right: 43px;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- color: #88a0ae;
|
|
|
- padding: 0;
|
|
|
- line-height: 45px;
|
|
|
- }
|
|
|
+ .ant-tabs-bar {
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+ .anticon {
|
|
|
+ color: #88a0ae;
|
|
|
+ }
|
|
|
+ .ant-tabs-nav-container {
|
|
|
+ .ant-tabs-nav-wrap {
|
|
|
+ .ant-tabs-nav {
|
|
|
+ .ant-tabs-tab {
|
|
|
+ width: 70px;
|
|
|
+ margin-right: 43px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #88a0ae;
|
|
|
+ padding: 0;
|
|
|
+ line-height: 45px;
|
|
|
+ }
|
|
|
|
|
|
- .ant-tabs-tab-active.ant-tabs-tab {
|
|
|
- color: #3a87f7;
|
|
|
- }
|
|
|
+ .ant-tabs-tab-active.ant-tabs-tab {
|
|
|
+ color: #3a87f7;
|
|
|
+ }
|
|
|
|
|
|
- .ant-tabs-ink-bar {
|
|
|
- width: 70px !important;
|
|
|
- background: #3a87f7;
|
|
|
- .rounded-corners(1px);
|
|
|
- }
|
|
|
+ .ant-tabs-ink-bar {
|
|
|
+ width: 70px !important;
|
|
|
+ background: #3a87f7;
|
|
|
+ .rounded-corners(1px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .tableDatas {
|
|
|
- margin-top: 26px;
|
|
|
- padding: 0 24px;
|
|
|
- overflow: hidden;
|
|
|
+ .tableDatas {
|
|
|
+ margin-top: 26px;
|
|
|
+ padding: 0 24px;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .dialogTable {
|
|
|
- width: 100%;
|
|
|
- overflow: overlay;
|
|
|
- }
|
|
|
+ .dialogTable {
|
|
|
+ width: 100%;
|
|
|
+ overflow: overlay;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .ant-form.inlineForm {
|
|
|
- margin-top: 20px;
|
|
|
- padding: 0 24px;
|
|
|
- }
|
|
|
+ .ant-form.inlineForm {
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0 24px;
|
|
|
}
|
|
|
+}
|
|
|
</style
|
|
|
>;
|
yu.jie