|
|
@@ -1,24 +1,25 @@
|
|
|
<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">
|
|
|
- <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>
|
|
|
- <!-- <a-checkbox-group class="commonCheckboxGroup"
|
|
|
+ <!-- 协议平仓-->
|
|
|
+ <Drawer
|
|
|
+ :title="'协议平仓'"
|
|
|
+ :placement="'right'"
|
|
|
+ class="bottom486"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="cancel"
|
|
|
+ >
|
|
|
+ <div class="listed c_c_s_s">
|
|
|
+ <a-form class="inlineForm dialogForm" ref="formRef">
|
|
|
+ <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>
|
|
|
+ <!-- <a-checkbox-group class="commonCheckboxGroup"
|
|
|
v-model:value="checked"
|
|
|
@change="checkGroupChange">
|
|
|
<div class="lineBar"
|
|
|
@@ -55,42 +56,80 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </a-checkbox-group> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="fixedBtns">
|
|
|
- <!-- <div class="formbottom">
|
|
|
- <div class="line1">
|
|
|
- <div>
|
|
|
- <span>已点选数量</span>
|
|
|
- <span class="white">{{selctedNum()}} {{selectedRow.goodunit}}</span>
|
|
|
- <span>，需合约数量</span>
|
|
|
- <span class="white">{{getNeedContractNum()}}</span>
|
|
|
- </div>
|
|
|
- <div class="yellow">升贴水{{selected ? selected.pricemove * selected.num : '--'}}</div>
|
|
|
- </div>
|
|
|
- <div class="line2"
|
|
|
- v-if="isBaseSpread()">
|
|
|
- <div>点价合约</div>
|
|
|
- <div class="right">
|
|
|
- <div>{{selected.pgoodscode ? selected.pgoodscode : ''}}</div>
|
|
|
- <div>{{getDeliveryGoodsPrice()}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="isBaseSpread()"
|
|
|
- class="line3">预估货款：{{getEstimatedPayment()}}</div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <a-form-item class="btnCenter mt10">
|
|
|
- <a-button class="listedBtn"
|
|
|
- :loading="loading"
|
|
|
- :disabled="loading"
|
|
|
- @click="submit">提交</a-button>
|
|
|
- </a-form-item>
|
|
|
+ </a-checkbox-group>-->
|
|
|
+ <a-checkbox-group class="commonCheckboxGroup">
|
|
|
+ <div class="lineBar">
|
|
|
+ <div class="line1">
|
|
|
+ <div class>
|
|
|
+ <a-checkbox></a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="name">32266556655555</div>
|
|
|
+ <div class="date">2021-10-30</div>
|
|
|
+ </div>
|
|
|
+ <div class="line2">
|
|
|
+ <div class="left">买入</div>
|
|
|
+ <div class="middle">
|
|
|
+ <div>10</div>
|
|
|
+ <div>850.5</div>
|
|
|
+ <div>8505.5</div>
|
|
|
+ </div>
|
|
|
+ <div class="right red">+100</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lineBar">
|
|
|
+ <div class="line1">
|
|
|
+ <div class>
|
|
|
+ <a-checkbox></a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="name">32266556655555</div>
|
|
|
+ <div class="date">2021-10-30</div>
|
|
|
+ </div>
|
|
|
+ <div class="line2">
|
|
|
+ <div class="left">买入</div>
|
|
|
+ <div class="middle">
|
|
|
+ <div>10</div>
|
|
|
+ <div>850.5</div>
|
|
|
+ <div>8505.5</div>
|
|
|
+ </div>
|
|
|
+ <div class="right red">+100</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fixedBtns">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" class="mt12">
|
|
|
+ <a-form-item label="协议价" name class="inputIconBox">
|
|
|
+ <a-input-number
|
|
|
+ class="commonInput"
|
|
|
+ style="width: 200px"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ />
|
|
|
+ <MinusOutlined />
|
|
|
+ <PlusOutlined />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="平仓金额">
|
|
|
+ <span class="white">50400.20</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">取消</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
</div>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- </Drawer>
|
|
|
+ </Drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -188,7 +227,7 @@ export default defineComponent({
|
|
|
position: relative;
|
|
|
.formBar {
|
|
|
padding: 0;
|
|
|
- height: calc(100% - 172px);
|
|
|
+ height: calc(100% - 200px);
|
|
|
background: @m-black41;
|
|
|
.formtop {
|
|
|
width: 100%;
|
|
|
@@ -252,32 +291,30 @@ export default defineComponent({
|
|
|
.name {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
+ .date {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-grey1;
|
|
|
+ }
|
|
|
}
|
|
|
.line2 {
|
|
|
width: 100%;
|
|
|
user-select: none;
|
|
|
padding: 12px 0 14px 0;
|
|
|
display: inline-flex;
|
|
|
- > div {
|
|
|
- flex: 2;
|
|
|
- }
|
|
|
.left {
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
- max-width: 40%;
|
|
|
- > div {
|
|
|
- width: 100%;
|
|
|
- height: 17px;
|
|
|
- line-height: 17px;
|
|
|
- color: @m-white6;
|
|
|
- font-size: 14px;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ width: 25%;
|
|
|
+ color: @m-white6;
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 34px;
|
|
|
+ // }
|
|
|
}
|
|
|
.middle {
|
|
|
- flex: 1;
|
|
|
+ width: 50%;
|
|
|
display: inline-flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 10px;
|
|
|
@@ -289,30 +326,11 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
- .inputNumberBlock {
|
|
|
- float: right;
|
|
|
- display: block;
|
|
|
- width: 130px;
|
|
|
- position: relative;
|
|
|
- .anticon {
|
|
|
- color: @m-blue15;
|
|
|
- font-size: 15px;
|
|
|
- z-index: 2;
|
|
|
- line-height: 34px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .anticon-minus {
|
|
|
- .position(absolute, 0, auto, 0, 10px);
|
|
|
- }
|
|
|
- .anticon-plus {
|
|
|
- .position(absolute, 0, 10px, 0, auto);
|
|
|
- }
|
|
|
- }
|
|
|
- .disabled {
|
|
|
- .anticon {
|
|
|
- color: @m-grey51;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 25%;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 34px;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -322,6 +340,8 @@ export default defineComponent({
|
|
|
padding-top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
}
|
|
|
.formbottom {
|
|
|
width: 100%;
|
marymelisa