|
|
@@ -1,97 +1,104 @@
|
|
|
<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>合约数量 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"
|
|
|
- v-model:value="checked"
|
|
|
- @change="change">
|
|
|
- <div class="lineBar"
|
|
|
- v-for="(item, index) in tableList"
|
|
|
- :key="index + '11'">
|
|
|
- <div class="line1">
|
|
|
- <div class>
|
|
|
- <a-checkbox :value="item.ladingbillid"></a-checkbox>
|
|
|
- </div>
|
|
|
- <div class="name">{{item.username}}</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>合约数量 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"
|
|
|
+ v-model:value="checked"
|
|
|
+ @change="change"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="lineBar"
|
|
|
+ v-for="(item, index) in tableList"
|
|
|
+ :key="index + '11'"
|
|
|
+ >
|
|
|
+ <div class="line1">
|
|
|
+ <div class>
|
|
|
+ <a-checkbox :value="item.ladingbillid"></a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="name">{{item.username}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="line2">
|
|
|
+ <div class="left">
|
|
|
+ <div>{{item.wrtypename}}</div>
|
|
|
+ <div>{{item.warehousename}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <div>{{item.pricemove}}</div>
|
|
|
+ <div>{{item.avalidqty}}{{item.enumdicname}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <template
|
|
|
+ class="inputNumberBlock"
|
|
|
+ :class="isChecked(item.ladingbillid) ? '' : 'disabled'"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ class="dialogInput dialogInput34"
|
|
|
+ v-model:value="item.num"
|
|
|
+ style="width: 130px !important; height: 34px;"
|
|
|
+ :disabled="!isChecked(item.ladingbillid)"
|
|
|
+ :min="0"
|
|
|
+ ></a-input-number>
|
|
|
+ <MinusOutlined />
|
|
|
+ <PlusOutlined />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="line2">
|
|
|
- <div class="left">
|
|
|
- <div>{{item.wrtypename}}</div>
|
|
|
- <div>{{item.warehousename}}</div>
|
|
|
- </div>
|
|
|
- <div class="middle">
|
|
|
- <div>{{item.pricemove}}</div>
|
|
|
- <div>{{item.avalidqty}}{{item.enumdicname}}</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <template class="inputNumberBlock"
|
|
|
- :class="isChecked(item.ladingbillid) ? '' : 'disabled'">
|
|
|
- <a-input-number class="dialogInput dialogInput34"
|
|
|
- v-model:value="item.num"
|
|
|
- style="width: 100px !important; height: 34px;"
|
|
|
- :disabled="!isChecked(item.ladingbillid)"
|
|
|
- :min="0"></a-input-number>
|
|
|
- <MinusOutlined />
|
|
|
- <PlusOutlined />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ <div class="fixedBtns">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <a-form-item class="btnCenter mt10">
|
|
|
+ <a-button
|
|
|
+ class="listedBtn"
|
|
|
+ :loading="loading"
|
|
|
+ :disabled="loading"
|
|
|
+ @click="submit"
|
|
|
+ >提交</a-button>
|
|
|
+ </a-form-item>
|
|
|
</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>
|
|
|
+ </a-form>
|
|
|
</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">
|
|
|
@@ -195,15 +202,19 @@ export default defineComponent({
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.c_c_s_s {
|
|
|
- background: #162738;
|
|
|
+ background: @m-black40;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
.formBar {
|
|
|
padding: 0;
|
|
|
+ height: calc(100% - 172px);
|
|
|
+ background: @m-black41;
|
|
|
.formtop {
|
|
|
width: 100%;
|
|
|
padding: 0 20px;
|
|
|
.flex;
|
|
|
flex-direction: column;
|
|
|
- background: #0f1a25;
|
|
|
.firstTitle {
|
|
|
width: calc(100% + 40px);
|
|
|
height: 40px;
|
|
|
@@ -211,8 +222,8 @@ export default defineComponent({
|
|
|
margin-left: -20px;
|
|
|
padding: 0 20px;
|
|
|
font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- border-bottom: 1px solid #162738;
|
|
|
+ color: @m-white6;
|
|
|
+ border-bottom: 1px solid @m-black42;
|
|
|
}
|
|
|
.secondLine {
|
|
|
width: 100%;
|
|
|
@@ -222,7 +233,7 @@ export default defineComponent({
|
|
|
> div {
|
|
|
flex: 1;
|
|
|
font-size: 14px;
|
|
|
- color: #7a8a94;
|
|
|
+ color: @m-grey1;
|
|
|
}
|
|
|
.left {
|
|
|
text-align: left;
|
|
|
@@ -239,7 +250,7 @@ export default defineComponent({
|
|
|
min-height: 100px;
|
|
|
padding-left: 15px;
|
|
|
padding-right: 10px;
|
|
|
- background: #102442;
|
|
|
+ background: @m-blue19;
|
|
|
margin-bottom: 10px;
|
|
|
.rounded-corners(5px);
|
|
|
.line1 {
|
|
|
@@ -248,8 +259,11 @@ export default defineComponent({
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
font-size: 16px;
|
|
|
- color: #ffffff;
|
|
|
- border-bottom: 1px solid #122d55;
|
|
|
+ color: @m-white6;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 1px solid @m-blue20;
|
|
|
> div {
|
|
|
align-self: center;
|
|
|
align-items: center;
|
|
|
@@ -263,36 +277,40 @@ export default defineComponent({
|
|
|
padding: 12px 0 14px 0;
|
|
|
display: inline-flex;
|
|
|
> div {
|
|
|
- flex: 1;
|
|
|
- max-width: 33.33%;
|
|
|
+ flex: 2;
|
|
|
}
|
|
|
.left {
|
|
|
.flex;
|
|
|
flex-direction: column;
|
|
|
+ max-width: 40%;
|
|
|
> div {
|
|
|
width: 100%;
|
|
|
height: 17px;
|
|
|
line-height: 17px;
|
|
|
- color: #ffffff;
|
|
|
+ color: @m-white6;
|
|
|
font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
.middle {
|
|
|
+ flex: 1;
|
|
|
display: inline-flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 10px;
|
|
|
font-size: 16px;
|
|
|
- color: #ffffff;
|
|
|
+ color: @m-white6;
|
|
|
line-height: 34px;
|
|
|
}
|
|
|
.right {
|
|
|
.inputNumberBlock {
|
|
|
float: right;
|
|
|
display: block;
|
|
|
- width: 100px;
|
|
|
+ width: 130px;
|
|
|
position: relative;
|
|
|
.anticon {
|
|
|
- color: #0d8aeb;
|
|
|
+ color: @m-blue15;
|
|
|
font-size: 15px;
|
|
|
z-index: 2;
|
|
|
line-height: 34px;
|
|
|
@@ -307,63 +325,68 @@ export default defineComponent({
|
|
|
}
|
|
|
.disabled {
|
|
|
.anticon {
|
|
|
- color: #354859;
|
|
|
+ color: @m-grey51;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .formbottom {
|
|
|
+ }
|
|
|
+ .fixedBtns {
|
|
|
+ padding-top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .formbottom {
|
|
|
+ width: 100%;
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: @m-black40;
|
|
|
+ padding: 0 18px 0 20px;
|
|
|
+ .line1 {
|
|
|
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;
|
|
|
+ padding: 0 12px 0 16px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: @m-grey1;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .line2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 34px;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 10px;
|
|
|
+ background: @m-black43;
|
|
|
+ .rounded-corners(5px);
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-grey1;
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > div {
|
|
|
+ align-self: baseline;
|
|
|
+ align-items: baseline;
|
|
|
}
|
|
|
- .line2 {
|
|
|
- width: 100%;
|
|
|
- height: 35px;
|
|
|
- line-height: 34px;
|
|
|
- padding-left: 15px;
|
|
|
- padding-right: 10px;
|
|
|
- background: #091a32;
|
|
|
- .rounded-corners(5px);
|
|
|
- font-size: 14px;
|
|
|
- color: #7a8a94;
|
|
|
+ .right {
|
|
|
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;
|
|
|
- }
|
|
|
+ color: @m-yellow6;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .line3 {
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 15px;
|
|
|
+ line-height: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: right;
|
|
|
+ color: @m-white6;
|
|
|
}
|
|
|
}
|
|
|
}
|
marymelisa