|
|
@@ -1,45 +1,122 @@
|
|
|
<template>
|
|
|
- <!-- 交收-->
|
|
|
- <Drawer :title="'交收'"
|
|
|
- :placement="'bottom'"
|
|
|
- :visible="visible"
|
|
|
- @cancel="cancel">
|
|
|
- <div class="listed">
|
|
|
- <a-form class="inlineForm dialogForm"
|
|
|
- ref="formRef"
|
|
|
- :model="formState"
|
|
|
- :rules="rules">
|
|
|
- <div>
|
|
|
- <span>合约数量 10</span>
|
|
|
- <span>可交收数量 50 吨</span>
|
|
|
+ <!-- 交收-->
|
|
|
+ <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>合约数量 10，</span>
|
|
|
+ <span>可交收数量 50 吨</span>
|
|
|
+ </div>
|
|
|
+ <div class="secondLine">
|
|
|
+ <div class="left">持有人/商品/仓库</div>
|
|
|
+ <div class="middle">升贴水/数量</div>
|
|
|
+ <div class="right">选择数量</div>
|
|
|
+ </div>
|
|
|
+ <a-checkbox-group class="commonCheckboxGroup">
|
|
|
+ <div class="lineBar">
|
|
|
+ <div class="line1">
|
|
|
+ <div class>
|
|
|
+ <a-checkbox></a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="name">南**业</div>
|
|
|
+ </div>
|
|
|
+ <div class="line2">
|
|
|
+ <div class="left">
|
|
|
+ <div>铜杆-12mm-江铜</div>
|
|
|
+ <div>蛇口仓库</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <div>2</div>
|
|
|
+ <div>50吨</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <template class="inputNumberBlock">
|
|
|
+ <a-input-number
|
|
|
+ class="dialogInput dialogInput34"
|
|
|
+ style="width: 100px !important; height: 34px;"
|
|
|
+ :min="0"
|
|
|
+ ></a-input-number>
|
|
|
+ <MinusOutlined />
|
|
|
+ <PlusOutlined />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lineBar">
|
|
|
+ <div class="line1">
|
|
|
+ <div class>
|
|
|
+ <a-checkbox></a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="name">南**业</div>
|
|
|
+ </div>
|
|
|
+ <div class="line2">
|
|
|
+ <div class="left">
|
|
|
+ <div>铜杆-12mm-江铜</div>
|
|
|
+ <div>蛇口仓库</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <div>2</div>
|
|
|
+ <div>50吨</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <template class="inputNumberBlock disabled">
|
|
|
+ <a-input-number
|
|
|
+ class="dialogInput dialogInput34"
|
|
|
+ style="width: 100px !important; height: 34px;"
|
|
|
+ :min="0"
|
|
|
+ disabled
|
|
|
+ ></a-input-number>
|
|
|
+ <MinusOutlined />
|
|
|
+ <PlusOutlined />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="formbottom">
|
|
|
+ <div class="line1">
|
|
|
+ <div>
|
|
|
+ <span>已点选数量</span>
|
|
|
+ <span class="white">40吨</span>
|
|
|
+ <span>，需合约数量</span>
|
|
|
+ <span class="white">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="yellow">升贴水1100</div>
|
|
|
+ </div>
|
|
|
+ <div class="line2">
|
|
|
+ <div>点价合约</div>
|
|
|
+ <div class="right">
|
|
|
+ <div>C2109</div>
|
|
|
+ <div>1398.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="line3">预估贷款：71,000.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" class="fixedBtns">
|
|
|
+ <a-form-item class="btnCenter">
|
|
|
+ <a-button
|
|
|
+ class="listedBtn"
|
|
|
+ :loading="loading"
|
|
|
+ :disabled="loading"
|
|
|
+ @click="submit"
|
|
|
+ >提交</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
</div>
|
|
|
- <div class="formBar">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="8">
|
|
|
- 持有人/商品/仓库
|
|
|
- </a-col>
|
|
|
- <a-col :span="8">
|
|
|
- 升贴水/数量
|
|
|
- </a-col>
|
|
|
- <a-col :span="8">
|
|
|
- 选择数量
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24"
|
|
|
- class="fixedBtns">
|
|
|
- <a-form-item class="btnCenter">
|
|
|
- <a-button class="listedBtn"
|
|
|
- :loading="loading"
|
|
|
- :disabled="loading"
|
|
|
- @click="submit">提交</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- </Drawer>
|
|
|
+ </Drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -60,10 +137,11 @@ import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo
|
|
|
import { performanceContractedApply, performanceDelayApply } from '@/services/proto/performance';
|
|
|
import { BuyOrSell } from '@/common/constants/enumCommon';
|
|
|
import Long from 'long';
|
|
|
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: ModalEnum.commodity_contract_summary_settlement,
|
|
|
- components: { Drawer, UploadImg },
|
|
|
+ components: { Drawer, UploadImg, PlusOutlined, MinusOutlined },
|
|
|
emits: ['cancel', 'update'],
|
|
|
props: {
|
|
|
selectedRow: {
|
|
|
@@ -108,4 +186,177 @@ export default defineComponent({
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.c_c_s_s {
|
|
|
+ background: #162738;
|
|
|
+ .formBar {
|
|
|
+ padding: 0;
|
|
|
+ .formtop {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #0f1a25;
|
|
|
+ .firstTitle {
|
|
|
+ width: calc(100% + 40px);
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-left: -20px;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ border-bottom: 1px solid #162738;
|
|
|
+ }
|
|
|
+ .secondLine {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: inline-flex;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7a8a94;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .middle {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lineBar {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100px;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 10px;
|
|
|
+ background: #102442;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .rounded-corners(5px);
|
|
|
+ .line1 {
|
|
|
+ display: inline-flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ border-bottom: 1px solid #122d55;
|
|
|
+ > div {
|
|
|
+ align-self: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line2 {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 0 14px 0;
|
|
|
+ display: inline-flex;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 33.33%;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 17px;
|
|
|
+ line-height: 17px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .inputNumberBlock {
|
|
|
+ float: right;
|
|
|
+ display: block;
|
|
|
+ width: 100px;
|
|
|
+ position: relative;
|
|
|
+ .anticon {
|
|
|
+ color: #0d8aeb;
|
|
|
+ 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: #354859;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .formbottom {
|
|
|
+ width: 100%;
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #162738;
|
|
|
+ padding: 0 18px 0 20px;
|
|
|
+ .line1 {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 12px 0 16px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #7a8a94;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .line2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 34px;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 10px;
|
|
|
+ background: #091a32;
|
|
|
+ .rounded-corners(5px);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7a8a94;
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > div {
|
|
|
+ align-self: baseline;
|
|
|
+ align-items: baseline;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: inline-flex;
|
|
|
+ color: #fc9618;
|
|
|
+ div:last-child {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line3 {
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 15px;
|
|
|
+ line-height: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: right;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>;
|
marymelisa