|
|
@@ -0,0 +1,235 @@
|
|
|
+<template>
|
|
|
+ <!-- 签约账号管理 -->
|
|
|
+ <section>
|
|
|
+ <a-table :columns="columns"
|
|
|
+ class="srcollYTable expandLeftTable"
|
|
|
+ :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
|
|
|
+ :pagination="false"
|
|
|
+ :loading="loading"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :customRow="Rowclick"
|
|
|
+ :expandIcon="expandIcon"
|
|
|
+ :expandIconAsCell="false"
|
|
|
+ rowKey="key"
|
|
|
+ :data-source="tableList">
|
|
|
+
|
|
|
+ <template #handle="{ record }">
|
|
|
+ <BtnList :btnList="tableBtns"
|
|
|
+ v-if="record.signstatus === 4"
|
|
|
+ :record="record"
|
|
|
+ class="btn-list-sticky"
|
|
|
+ @click="openComponent" />
|
|
|
+ </template>
|
|
|
+ <!-- 签约状态 -->
|
|
|
+ <template #signstatus="{ text }">
|
|
|
+
|
|
|
+ <span>{{ getSignStatus(text) }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <div v-if="tableList.length === 0">
|
|
|
+ <span class="add-bank"
|
|
|
+ @click="componentId = addCode">
|
|
|
+ <svg class="icon svg-icon add-svg"
|
|
|
+ aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-tianjiayinhangka"></use>
|
|
|
+ </svg>
|
|
|
+ 添加签约银行
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 明细 -->
|
|
|
+ <Description v-if="visible"
|
|
|
+ @changeTab="changeTab"
|
|
|
+ @close="closeDrawer"
|
|
|
+ :tabList="tabList">
|
|
|
+ <a-table :columns="detailColumns"
|
|
|
+ class="topTable"
|
|
|
+ :pagination="false"
|
|
|
+ rowKey="key"
|
|
|
+ :data-source="detailList"
|
|
|
+ :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
|
|
|
+ <template #updatetime="{ text }">
|
|
|
+ <span>{{ formatTime(text) }}</span>
|
|
|
+ </template>
|
|
|
+ <template #certificatephotourl="{ text }">
|
|
|
+ <a @click="previewImg(text)">{{text ? text === '--' ? text : '查看附件' : '--'}}</a>
|
|
|
+ </template>
|
|
|
+ <template #applystatus="{ text }">
|
|
|
+ <span>{{ getAccountInOutApplyStatus(text) }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </Description>
|
|
|
+ <component :is="componentId"
|
|
|
+ v-if="componentId"
|
|
|
+ :selectedRow="selectedRow"
|
|
|
+ @cancel="closeComponent"></component>
|
|
|
+ <a-modal :visible="previewVisible"
|
|
|
+ :footer="null"
|
|
|
+ @cancel="cancelImg">
|
|
|
+ <img alt="预览附件"
|
|
|
+ style="width: 100%"
|
|
|
+ :src="previewImage" />
|
|
|
+ </a-modal>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import Description from '@/common/components/description/index.vue';
|
|
|
+import { TabList } from '@/common/components/description/interface';
|
|
|
+import { EnumRouterName } from '@/common/constants/enumRouterName';
|
|
|
+import { getAccountInOutApplyStatus, getSignStatus } from '@/common/constants/enumsName';
|
|
|
+import { BtnList, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
|
|
|
+import { formatTime } from '@/common/methods';
|
|
|
+import { handleModalComponent } from '@/common/setup/asyncComponent';
|
|
|
+import { getButtonList } from '@/common/setup/table/button';
|
|
|
+import { expandIcon } from '@/common/setup/table/clolumn';
|
|
|
+import { handleComposeTable_detail } from '@/common/setup/table/compose';
|
|
|
+import { ComposeTableDetailParam } from '@/common/setup/table/interface';
|
|
|
+import { handlePreviewImg } from '@/common/setup/upload';
|
|
|
+import { QueryAccountInOutApply, queryBankAccountSign } from '@/services/go/ermcp/qhj';
|
|
|
+import { QueryAccountInOutApplyRsp, QueryAccountInOutApplyRsq, QueryBankAccountSignQsp } from '@/services/go/ermcp/qhj/interface';
|
|
|
+import { QueryPermancePlanTmpRsp } from '@/services/go/wrtrade/interface';
|
|
|
+import { ref, watch } from 'vue';
|
|
|
+import { getColumns } from './setup';
|
|
|
+
|
|
|
+const addCode = 'account-manager-agency-sub-add';
|
|
|
+const updateCode = 'account-manager-agency-sub-modiy';
|
|
|
+const deleteCode = 'account-manager-agency-sub-delete';
|
|
|
+
|
|
|
+const useButton = () => {
|
|
|
+ // 表格操作按钮列表
|
|
|
+ const btnList = getButtonList(EnumRouterName.account_manager_agency_sub, false);
|
|
|
+ // 过滤新增按钮
|
|
|
+ const tableBtns = btnList.filter((e) => e.code !== addCode);
|
|
|
+ return { tableBtns };
|
|
|
+};
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: EnumRouterName.account_manager_agency_sub,
|
|
|
+ components: {
|
|
|
+ BtnList,
|
|
|
+ Description,
|
|
|
+ [addCode]: defineAsyncComponent(() => import('./add.vue')),
|
|
|
+ [updateCode]: defineAsyncComponent(() => import('./modiy.vue')),
|
|
|
+ [deleteCode]: defineAsyncComponent(() => import('./delete.vue')),
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ // 表格列表数据
|
|
|
+ const { loading, tableList, queryTable } = queryTableList<QueryBankAccountSignQsp>();
|
|
|
+ const flag = ref(false);
|
|
|
+ const loadData = () => {
|
|
|
+ queryTable(queryBankAccountSign).then((res) => {
|
|
|
+ const set = new Set([2, 3, 4]);
|
|
|
+ tableList.value = res.filter((e) => set.has(e.signstatus));
|
|
|
+ if (tableList.value.length) {
|
|
|
+ flag.value = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 预览附件
|
|
|
+ const { previewVisible, previewImage, cancelImg, previewImg } = handlePreviewImg();
|
|
|
+ // 表头
|
|
|
+ const { columns, applyInColumns, applyOutCloums } = getColumns();
|
|
|
+ const detailList = ref<QueryAccountInOutApplyRsq[]>([]);
|
|
|
+ const allDetailList = ref<QueryAccountInOutApplyRsp[]>([]);
|
|
|
+ const fn = (type: 1 | 2) => allDetailList.value.filter((e) => e.executetype === type);
|
|
|
+ // 出入金申请列表
|
|
|
+ function queryDetail() {
|
|
|
+ const { queryTable } = queryTableList<QueryAccountInOutApplyRsp>();
|
|
|
+ queryTable(QueryAccountInOutApply, {}).then((res) => {
|
|
|
+ allDetailList.value = res;
|
|
|
+ changeTab(0, tabList.value[0]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 明细表头
|
|
|
+ const detailColumns = ref(applyInColumns);
|
|
|
+ // 切换明细
|
|
|
+ function changeTab(index: number, current: TabList) {
|
|
|
+ const { code, lable } = current;
|
|
|
+ // executetype: number;//申请类型 - 1:出金 2:入金 3: 单边账调整:入金; 4:单边账调整:出金 5:外部母账户调整:入金 6:外部母账户调整:出金 7:外部子账户:入金 8:外部子账户:出金
|
|
|
+ if (code === 'account-manager-agency-sub-apply-in') {
|
|
|
+ // 充值申请
|
|
|
+ detailColumns.value = applyInColumns;
|
|
|
+ detailList.value = fn(1);
|
|
|
+ } else if (code === 'account-manager-agency-sub-apply-out') {
|
|
|
+ // 提现申请
|
|
|
+ detailColumns.value = applyOutCloums;
|
|
|
+ detailList.value = fn(2);
|
|
|
+ } else {
|
|
|
+ detailList.value = [];
|
|
|
+ console.error(`${lable}没有配置对应的code: ${code},`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const param: ComposeTableDetailParam = {
|
|
|
+ queryFn: loadData, // 查询表格数据
|
|
|
+ tableFilterKey: [], // 表格过滤字段
|
|
|
+ menuType: EnumRouterName.account_manager_agency_sub, // 当前tab页对应的code
|
|
|
+ };
|
|
|
+ const {
|
|
|
+ visible,
|
|
|
+ closeDrawer, // 控制 drawer 组件是否显示
|
|
|
+ expandedRowKeys,
|
|
|
+ selectedRow,
|
|
|
+ Rowclick, // 表格事件
|
|
|
+ tabList,
|
|
|
+ } = handleComposeTable_detail<QueryPermancePlanTmpRsp>(param);
|
|
|
+ watch(flag, () => {
|
|
|
+ visible.value = true;
|
|
|
+ queryDetail();
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ loading,
|
|
|
+ tableList,
|
|
|
+ ...useButton(),
|
|
|
+ columns,
|
|
|
+ ...handleModalComponent(loadData, selectedRow),
|
|
|
+
|
|
|
+ visible,
|
|
|
+ closeDrawer, // 控制 drawer 组件是否显示
|
|
|
+ expandedRowKeys,
|
|
|
+ selectedRow,
|
|
|
+ Rowclick, // 表格事件
|
|
|
+ tabList,
|
|
|
+ detailColumns,
|
|
|
+ formatTime,
|
|
|
+ expandIcon,
|
|
|
+ getSignStatus,
|
|
|
+ changeTab,
|
|
|
+ addCode,
|
|
|
+ detailList,
|
|
|
+ getAccountInOutApplyStatus,
|
|
|
+ previewVisible,
|
|
|
+ previewImage,
|
|
|
+ cancelImg,
|
|
|
+ previewImg,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scope>
|
|
|
+.add-svg {
|
|
|
+ color: var(--m-blue0);
|
|
|
+ font-size: 22px;
|
|
|
+ // fill: currentColor !important;
|
|
|
+ // path {
|
|
|
+ // fill: inherit !important;
|
|
|
+ // }
|
|
|
+}
|
|
|
+.add-bank {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width: 181px;
|
|
|
+ height: 51px;
|
|
|
+ border: 1px dashed var(--m-blue0);
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 46px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: var(--m-blue0);
|
|
|
+}
|
|
|
+</style>;
|