update

src/common/components/capitalInfo/index.vue

@@ -1,109 +1,72 @@
 <template>
-    <div class="capital-info">
-        <!-- 资金信息 -->
-        <a-select
-            class="capitalSelect"
-            style="width: 180px"
-            @change="accountChange"
-            v-model:value="selectedAccountId"
-        >
-            <a-select-option
-                v-for="item in getAllTaAccount()"
-                :value="item.accountid"
-                :key="item.accountid"
-            >{{item.accountid}}</a-select-option>
-        </a-select>
-        <!-- <a-collapse class="capitalCollapse"
-                default-active-key="1"
-                :bordered="false"
-                expand-icon-position="right">
-      <a-collapse-panel key="1"
-        header="南山铜加工厂（074345345345345345）">-->
-        <div class="numBlocks">
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>净值</div>
-                    <div>
-                        <i class="iconfont icon-zhengyan"></i>
-                    </div>
-                </div>
-                <div class="numBar">128,000.00</div>
-            </div>
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>占用</div>
-                </div>
-                <div class="numBar green">128,000.00</div>
-            </div>
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>冻结</div>
-                </div>
-                <div class="numBar red">128,000.00</div>
-            </div>
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>可用</div>
-                </div>
-                <div class="numBar blue">128,000.00</div>
-            </div>
+  <div class="capital-info">
+    <!-- 资金信息 -->
+    <a-select class="capitalSelect"
+              style="width: 180px"
+              @change="accountChange"
+              v-model:value="selectedAccountId">
+      <a-select-option v-for="item in getAllTaAccount()"
+                       :value="item.accountid"
+                       :key="item.accountid">{{item.accountid}}</a-select-option>
+    </a-select>
+    <div class="numBlocks">
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>余额</div>
+          <div>
+            <i class="iconfont icon-zhengyan"></i>
+          </div>
         </div>
-        <!-- <a-icon slot="extra"
-                type="setting"
-                @click="handleClick" />
-      </a-collapse-panel>
-        </a-collapse>-->
+        <div class="numBar">{{data.currentbalance}}</div>
+      </div>
+      <!-- <div class="capitalItem">
+        <div class="firstLine">
+          <div>占用</div>
+        </div>
+        <div class="numBar green">128,000.00</div>
+      </div> -->
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>冻结</div>
+        </div>
+        <div class="numBar red">{{data.freeze}}</div>
+      </div>
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>可用</div>
+        </div>
+        <div class="numBar blue">{{data.canUse}}</div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
-import { getAllTaAccount, getSelectedAccount, setSelectedAccount } from '@/services/bus/account';
+import { defineComponent, ref, reactive } from 'vue';
+import { getAllTaAccount, getCanUseMoney, getFreeze, getSelectedAccount, setSelectedAccount } from '@/services/bus/account';
 import { AccountListItem } from '@/services/dataCenter/interafce/account';
 
-interface Key {
-    [propName: string]: string;
-}
-// 折叠
-const handleCollapse = () => {
-    function handleClick(value: any) {}
-    return { handleClick };
-};
 export default defineComponent({
     name: 'capital-info',
-    props: {
-        list: {
-            default: [],
-            type: Object as PropType<Key[]>,
-        },
-        value: {
-            // 需要绑定的值得 key
-            default: '',
-            type: String,
-        },
-    },
-    components: {},
     setup(props, context) {
-        const selectedAccountId = ref<number>(getSelectedAccount().accountid);
+        const selectedAccount = getSelectedAccount();
+        const selectedAccountId = ref<number>(selectedAccount.accountid);
+        const data = reactive(getMoney(selectedAccount));
+        function getMoney(value: AccountListItem) {
+            const { currentbalance } = value;
+            return { currentbalance, freeze: getFreeze(value, true), canUse: getCanUseMoney(value) };
+        }
         function accountChange(id: number) {
             const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
+            Object.assign(data, getMoney(item));
             setSelectedAccount(item);
         }
-        const current = ref<string[]>(['0']);
-        function menuClick(value: any) {
-            const index = +value.key;
-            context.emit('selectMenu', props.list[index]);
-        }
-        const activeKey = ref<string[]>(['1']);
-        const handleClick = handleCollapse();
+
         return {
             getAllTaAccount,
             selectedAccountId,
             accountChange,
-            current,
-            menuClick,
-            activeKey,
-            handleClick,
+            data,
         };
     },
 });

src/services/bus/account.ts

@@ -120,4 +120,17 @@ export function setSelectedAccount(value: AccountListItem) {
  */
 export function getSelectedAccountId(): number {
     return getSelectedAccount().accountid
+}
+
+// 获取冻结资金
+export function getFreeze(value: AccountListItem, isFixed2 = false) {
+    const { freezecharge, freezemargin, orifreezecharge, orifreezemargin, oriotherfreezemargin, otherfreezemargin, outamountfreeze } = value;
+    const freeze = freezecharge + freezemargin + orifreezecharge + orifreezemargin + oriotherfreezemargin + otherfreezemargin + outamountfreeze;
+    return isFixed2 ? freeze.toFixed(2) : freeze
+}
+
+// 获取可用资金
+export function getCanUseMoney(value: AccountListItem) {
+    const freeze = getFreeze(value) as number
+    return (value.currentbalance - freeze).toFixed(2)
 }

src/views/order/funding_information/components/funding_information_funding_summary/index.vue

@@ -1,70 +1,78 @@
 <template>
   <!-- 资金汇总 -->
-    <section>
-        <a-table :columns="columns"
-                 class="srcollYTable"
-                 :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-                 :pagination="false"
-                 :loading="loading"
-                 :expandedRowKeys="expandedRowKeys"
-                 :customRow="Rowclick"
-                 rowKey="key"
-                 :data-source="tableList">
-            <!-- 额外的展开行 -->
-            <template #expandedRowRender="{ record }">
-                <BtnList :btnList="btnList"
-                         :record="record"
-                         @click="openComponent" />
-            </template>
-        </a-table>
-        <component :is="componentId"
-                   v-if="componentId"
-                   :selectedRow="selectedRow"
-                   @cancel="closeComponent"></component>
-    </section>
+  <section>
+    <a-table :columns="columns"
+             class="srcollYTable"
+             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
+             :pagination="false"
+             :loading="loading"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
+             rowKey="key"
+             :data-source="tableList">
+      <!-- 额外的展开行 -->
+      <template #expandedRowRender="{ record }">
+        <BtnList :btnList="btnList"
+                 :record="record"
+                 @click="openComponent" />
+      </template>
+      <template #balanc="{record}">
+        <span>{{getCanUseMoney(record)}}</span>
+      </template>
+      <template #freezemargin="{record}">
+        <span>{{getCanUseMoney(record)}}</span>
+      </template>
+    </a-table>
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="selectedRow"
+               @cancel="closeComponent"></component>
+  </section>
 </template>
 
 <script lang="ts">
-    import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
-    import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
-    import { QueryPerformancePlan, queryWrTradeDetail } from '@/services/go/wrtrade';
-    import { QueryPerformancePlanReq, WrPerformancePlan } from '@/services/go/wrtrade/interface';
-    import { getRecordItemTab } from '@/common/setup/order/orderData';
-    import { handleComposeOrderTable } from '@/common/setup/table/compose';
-    import { ComposeOrderTableParam } from '@/common/setup/table/interface';
-    import {getTaAccounts, queryAmountLog} from "@/services/go/TaAccount";
-    import {GetTaAccountsReq, QueryAmountLogReq} from "@/services/go/TaAccount/interface";
-    import {getSelectedAccountId} from "@/services/bus/account";
-    import {getLongTypeLoginID} from "@/services/bus/login";
-    import * as Long from "long";
-    export default defineComponent({
-        name: enumOrderComponents.funding_information_funding_summary,
-        components: {
-            BtnList,
-        },
-        setup() {
-            // 表格列表数据
-            const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
-            // 获取列表数据
-            const queryTableAction = () => {
-                const param: GetTaAccountsReq = {
-                    loginID: Number(getLongTypeLoginID()),
-                };
-                queryTable(getTaAccounts, param);
+import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+import { QueryPerformancePlan, queryWrTradeDetail } from '@/services/go/wrtrade';
+import { QueryPerformancePlanReq, WrPerformancePlan } from '@/services/go/wrtrade/interface';
+import { getRecordItemTab } from '@/common/setup/order/orderData';
+import { handleComposeOrderTable } from '@/common/setup/table/compose';
+import { ComposeOrderTableParam } from '@/common/setup/table/interface';
+import { getTaAccounts, queryAmountLog } from '@/services/go/TaAccount';
+import { GetTaAccountsReq, QueryAmountLogReq } from '@/services/go/TaAccount/interface';
+import { getSelectedAccountId, getCanUseMoney, getFreeze } from '@/services/bus/account';
+import { getLongTypeLoginID } from '@/services/bus/login';
+import * as Long from 'long';
+export default defineComponent({
+    name: enumOrderComponents.funding_information_funding_summary,
+    components: {
+        BtnList,
+    },
+    setup() {
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
+        // 获取列表数据
+        const queryTableAction = () => {
+            const param: GetTaAccountsReq = {
+                loginID: Number(getLongTypeLoginID()),
             };
-            // 表格通用逻辑
-            const param: ComposeOrderTableParam = {
-                queryFn: queryTableAction,
-                tableName: 'table_pcweb_spot_trade_bottom_funding_info_summary',
-                recordList: getRecordItemTab(),
-            };
-            return {
-                ...handleComposeOrderTable<WrPerformancePlan>(param),
-                loading,
-                tableList,
-            };
-        },
-    });
+            queryTable(getTaAccounts, param);
+        };
+        // 表格通用逻辑
+        const param: ComposeOrderTableParam = {
+            queryFn: queryTableAction,
+            tableName: 'table_pcweb_spot_trade_bottom_funding_info_summary',
+            recordList: getRecordItemTab(),
+        };
+        return {
+            ...handleComposeOrderTable<WrPerformancePlan>(param),
+            loading,
+            tableList,
+            getCanUseMoney,
+            getFreeze,
+        };
+    },
+});
 </script>
 
 <style lang="less">