#3070

src/views/order/swap_the_order/components/swap_commodity_contract_summary/components/swap_commodity_contract_summary_order_closed/index.vue

@@ -1,77 +1,62 @@
 <template>
-    <!-- 平仓-->
-    <Drawer
-        :title="'平仓'"
-        :placement="'right'"
-        class="bottom486"
-        :visible="visible"
-        @cancel="cancel"
-    >
-        <div class="listed c_c_s_s">
-            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
-                <div class="formBar">
-                    <div class="formtop">
-                        <div class="firstTitle">
-                            <span>合约：{{ selectedRow.goodscode }}/{{ selectedRow.goodsname }}</span>
-                        </div>
-                        <div class="secondLine">
-                            <div class="left">持仓单号/方向</div>
-                            <div class="middle">数量/价格/金额</div>
-                            <div class="right">到期日/盈亏</div>
-                        </div>
-                        <div class="lineBar">
-                            <div class="line1">
-                                <div class="name">
-                                    {{ selectedRow.tradeid }}
-                                    <template
-                                        v-if="selectedRow.holderdays"
-                                    >
-                                        <span class="red">{{ selectedRow.holderdays }}</span>天后可平
-                                    </template>
-                                </div>
-                                <div class="date">{{ formatTime(selectedRow.expiredate, 'd') }}</div>
-                            </div>
-                            <div class="line2">
-                                <div
-                                    class="left"
-                                >{{ selectedRow.buyorsell === BuyOrSell.buy ? '买入' : '卖出' }}</div>
-                                <div class="middle">
-                                    <div>{{ selectedRow.holderqty }}</div>
-                                    <div>{{ selectedRow.holderprice }}</div>
-                                    <div>{{ selectedRow.holderamount }}</div>
-                                </div>
-                                <div class="right red">{{ useProfit(selectedRow, goodscode) }}</div>
-                            </div>
-                        </div>
-                    </div>
+  <!-- 平仓-->
+  <Drawer :title="'平仓'" :placement="'right'" class="bottom486" :visible="visible" @cancel="cancel">
+    <div class="listed c_c_s_s">
+      <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
+        <div class="formBar">
+          <div class="formtop">
+            <div class="firstTitle">
+              <span>合约：{{ selectedRow.goodscode }}/{{ selectedRow.goodsname }}</span>
+            </div>
+            <div class="secondLine">
+              <div class="left">持仓单号/方向</div>
+              <div class="middle">数量/价格/金额</div>
+              <div class="right">到期日/盈亏</div>
+            </div>
+            <div class="lineBar">
+              <div class="line1">
+                <div class="name">
+                  {{ selectedRow.tradeid }}
+                  <template v-if="selectedRow.holderdays">
+                    <span class="red">{{ selectedRow.holderdays }}</span>天后可平
+                  </template>
                 </div>
-                <div class="fixedBtns">
-                    <a-row :gutter="24">
-                        <a-col :span="24" class="mt12">
-                            <a-form-item label="估算价" class="inputIconBox mb10 not-copy">
-                                <!-- 估算价取标的商品行情的最新价 -->
-                                <span class="white">{{ getQuoteDayInfoByCodeFindPrice(goodscode) }}</span>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24">
-                            <a-form-item label="估算金额" class="mb10 not-copy">
-                                <span class="white">{{ getMoney() }}</span>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                    <a-form-item class="btnCenter mt10">
-                        <a-button
-                            class="listedBtn"
-                            :loading="loading"
-                            :disabled="loading"
-                            @click="submit"
-                        >提交</a-button>
-                        <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
-                    </a-form-item>
+                <div class="date">{{ formatTime(selectedRow.expiredate, 'd') }}</div>
+              </div>
+              <div class="line2">
+                <div class="left">{{ selectedRow.buyorsell === BuyOrSell.buy ? '买入' : '卖出' }}</div>
+                <div class="middle">
+                  <div>{{ selectedRow.holderqty }}</div>
+                  <div>{{ selectedRow.holderprice }}</div>
+                  <div>{{ selectedRow.holderamount }}</div>
                 </div>
-            </a-form>
+                <div :class="['right', +useProfit(selectedRow, goodscode) > 0 ? 'up-quote-color' : 'down-quote-color']">{{ useProfit(selectedRow, goodscode) }}</div>
+              </div>
+            </div>
+          </div>
         </div>
-    </Drawer>
+        <div class="fixedBtns">
+          <a-row :gutter="24">
+            <a-col :span="24" class="mt12">
+              <a-form-item label="估算价" class="inputIconBox mb10 not-copy">
+                <!-- 估算价取标的商品行情的最新价 -->
+                <span class="white">{{ getQuoteDayInfoByCodeFindPrice(goodscode) }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="估算金额" class="mb10 not-copy">
+                <span class="white">{{ getMoney() }}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-form-item class="btnCenter mt10">
+            <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">提交</a-button>
+            <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
+          </a-form-item>
+        </div>
+      </a-form>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
@@ -99,72 +84,72 @@ import { FormState } from './interface';
 import { handleForm, usePrice } from './setup';
 
 export default defineComponent({
-    name: ModalEnum.commodity_contract_summary_settlement,
-    components: { Drawer, UploadImg, PlusOutlined, MinusOutlined },
-    emits: ['cancel', 'update'],
-    props: {
-        selectedRow: {
-            type: Object as PropType<QueryTradeHolderDetailRsp>,
-            default: {},
-        },
-        swapList: {
-            type: Array as PropType<QueryQuoteGoodsListRsp[]>,
-            default: [],
-        },
+  name: ModalEnum.commodity_contract_summary_settlement,
+  components: { Drawer, UploadImg, PlusOutlined, MinusOutlined },
+  emits: ['cancel', 'update'],
+  props: {
+    selectedRow: {
+      type: Object as PropType<QueryTradeHolderDetailRsp>,
+      default: {},
+    },
+    swapList: {
+      type: Array as PropType<QueryQuoteGoodsListRsp[]>,
+      default: [],
     },
-    setup(props, context) {
-        const goodscode = findGoodsCode(props.selectedRow.refgoodsid, props.selectedRow.goodscode, props.swapList);
+  },
+  setup(props, context) {
+    const goodscode = findGoodsCode(props.selectedRow.refgoodsid, props.selectedRow.goodscode, props.swapList);
 
-        const { visible, cancel } = _closeModal(context);
-        const { rules, formState, formRef } = handleForm();
-        const loading = ref<boolean>(false);
-        // 估算金额=估算价*平仓数量*合约单位。
-        function getMoney() {
-            let result = '--';
-            const lastPrice = getQuoteDayInfoByCodeFindPrice(goodscode);
-            if (lastPrice && lastPrice !== '--') {
-                const { holderqty, agreeunit, decimalplace } = props.selectedRow;
-                result = (+lastPrice * holderqty * agreeunit).toFixed(decimalplace);
-            }
-            return result;
-        }
+    const { visible, cancel } = _closeModal(context);
+    const { rules, formState, formRef } = handleForm();
+    const loading = ref<boolean>(false);
+    // 估算金额=估算价*平仓数量*合约单位。
+    function getMoney() {
+      let result = '--';
+      const lastPrice = getQuoteDayInfoByCodeFindPrice(goodscode);
+      if (lastPrice && lastPrice !== '--') {
+        const { holderqty, agreeunit, decimalplace } = props.selectedRow;
+        result = (+lastPrice * holderqty * agreeunit).toFixed(decimalplace);
+      }
+      return result;
+    }
 
-        const toFixed0 = (value: number) => +value.toFixed(0);
+    const toFixed0 = (value: number) => +value.toFixed(0);
 
-        function submit() {
-            validateAction<FormState>(formRef, formState).then((res) => {
-                const param: HolderCloseReq = {
-                    TradeID: Long.fromString(props.selectedRow.tradeid),
-                    LoginID: geLoginID_number()!, // uint64 登陆账号
-                    AccountID: getSelectedAccountId(), // uint64 交易账号
-                    GoodsID: props.selectedRow.goodsid,
-                    MarketID: props.selectedRow.marketid, // uint32 市场ID
-                    BuyOrSell: props.selectedRow.buyorsell,
-                    OperatorID: geLoginID_number()!, // uint64 操作员账号ID
-                };
-                requestResultLoadingAndInfo(holderClose, param, loading, ['平仓成功', '平仓失败:']).then(() => {
-                    cancel(true);
-                });
-            });
-        }
-        return {
-            visible,
-            cancel,
-            submit,
-            loading,
-            toFixed0,
-            rules,
-            formState,
-            formRef,
-            ...usePrice(formState),
-            BuyOrSell,
-            formatTime,
-            useProfit,
-            goodscode,
-            getQuoteDayInfoByCodeFindPrice,
-            getMoney,
+    function submit() {
+      validateAction<FormState>(formRef, formState).then((res) => {
+        const param: HolderCloseReq = {
+          TradeID: Long.fromString(props.selectedRow.tradeid),
+          LoginID: geLoginID_number()!, // uint64 登陆账号
+          AccountID: getSelectedAccountId(), // uint64 交易账号
+          GoodsID: props.selectedRow.goodsid,
+          MarketID: props.selectedRow.marketid, // uint32 市场ID
+          BuyOrSell: props.selectedRow.buyorsell,
+          OperatorID: geLoginID_number()!, // uint64 操作员账号ID
         };
-    },
+        requestResultLoadingAndInfo(holderClose, param, loading, ['平仓成功', '平仓失败:']).then(() => {
+          cancel(true);
+        });
+      });
+    }
+    return {
+      visible,
+      cancel,
+      submit,
+      loading,
+      toFixed0,
+      rules,
+      formState,
+      formRef,
+      ...usePrice(formState),
+      BuyOrSell,
+      formatTime,
+      useProfit,
+      goodscode,
+      getQuoteDayInfoByCodeFindPrice,
+      getMoney,
+    };
+  },
 });
 </script>