Merge remote-tracking branch 'origin/master'

src/common/components/drawer/index.vue

@@ -1,19 +1,23 @@
 <template>
-    <div class="drawer">
-        <a-drawer :placement="placement" :closable="false" :visible="visible" class="bottomListed">
-            <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
-            <div class="collapse" @click="cancel"></div>
-            <div class="collapseCont">
-                <!-- <div class="title">{{ title }}</div> -->
-                <div class="content highContent">
-                    <!-- <Listed></Listed> -->
-                    <!-- <Delisting></Delisting> -->
-                    <slot></slot>
-                    <!-- <Trade></Trade> -->
-                </div>
-            </div>
-        </a-drawer>
-    </div>
+  <div class="drawer">
+    <a-drawer :placement="placement"
+              :closable="false"
+              :visible="visible"
+              class="bottomListed">
+      <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
+      <div class="collapse"
+           @click="cancel"></div>
+      <div class="collapseCont">
+        <div class="title">{{ title }}</div>
+        <div class="content highContent">
+          <!-- <Listed></Listed> -->
+          <!-- <Delisting></Delisting> -->
+          <slot></slot>
+          <!-- <Trade></Trade> -->
+        </div>
+      </div>
+    </a-drawer>
+  </div>
 </template>
 
 <script lang="ts">

src/common/setup/asyncComponent/index.ts

@@ -20,6 +20,7 @@ export function handleModalComponent<T>(callback: Function, selectedRow: Ref<T>)
      * @param record
      */
     function openComponent(item: btnType, record: T) {
+        console.log('打开组件: ', item.code)
         // 更新点击的数据，处理例如，修改之后，再次打开页面是之前的数据的问题
         if (record && selectedRow) {
             selectedRow.value = record

src/views/market/spot_trade/components/buy-sell-market/components/buy/index.vue

@@ -1,33 +1,56 @@
 <template>
-    <!-- 买大厅 -->
-    <a-table
-        :columns="columns"
-        class="buyHallTable"
-        :scroll="{ x: '100%', y: 'calc(100% - 61px)' }"
-        :pagination="false"
-        :loading="loading"
-        :expandedRowKeys="expandedRowKeys"
-        :customRow="Rowclick"
-        rowKey="key"
-        :data-source="tableList"
-    ></a-table>
+  <!-- 买大厅 -->
+  <a-table :columns="columns"
+           class="buyHallTable"
+           :scroll="{ x: '100%', y: 'calc(100% - 61px)' }"
+           :pagination="false"
+           :loading="loading"
+           :expandedRowKeys="expandedRowKeys"
+           :customRow="Rowclick"
+           rowKey="key"
+           :data-source="tableList">
+    <!-- 额外的展开行 -->
+    <template #expandedRowRender="{ record }">
+      <BtnList :btnList="btnList"
+               :record="record"
+               @click="open" />
+    </template>
+  </a-table>
 </template>
 
 <script lang="ts">
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { ComposeTableParam, defineComponent, handleComposeTable, ModalEnum, queryTableList } from '@/common/export/commonTable';
+import { ComposeTableParam, BtnList, defineComponent, handleComposeTable, ModalEnum, queryTableList } from '@/common/export/commonTable';
 import { _closeModal } from '@/common/setup/modal/modal';
 import { queryAgreementConfig } from '@/services/go/ermcp/qhj';
 import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
+import { defineAsyncComponent, PropType, ref } from 'vue';
+import { BtnList as btnListType } from '@/common/components/btnList/interface';
+import { handleModalComponent } from '@/common/setup/asyncComponent';
 
 export default defineComponent({
-    emits: ['cancel'],
+    emits: ['cancel', 'openComponent'],
     name: 'warehouse_receipt_trade_price_delisting_buy',
-    props: {},
+    props: {
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        btnList: {
+            default: [],
+            type: Array as PropType<btnListType[]>,
+        },
+    },
+    components: {
+        BtnList,
+    },
     setup(props, context) {
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
+        function open(item: btnListType) {
+            context.emit('openComponent', item);
+        }
         // 获取列表数据
         const queryTableAction = () => {
             // const param: QueryOrderQuoteReq = {
@@ -40,12 +63,13 @@ export default defineComponent({
         // 表格通用逻辑
         const param: ComposeTableParam = {
             queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_floating_price,
+            menuType: props.enumName,
             tableName: 'table_pcweb_agreement',
             tableFilterKey: [],
             isDetail: false,
         };
         return {
+            open,
             ...handleComposeTable<WrOrderQuoteDetail>(param),
             loading,
             tableList,

src/views/market/spot_trade/components/buy-sell-market/components/delisting/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <!-- 摘牌 -->
+  <Drawer :title="'摘牌'"
+          :placement="'top'"
+          :visible="visible">
+    <!-- 挂牌 -->
+    摘牌
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import Drawer from '@/common/components/drawer/index.vue';
+import { QueryWrPositionReq, WrPosition } from '@/services/go/wrtrade/interface';
+import { getUserId } from '@/services/bus/account';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { hdWROrder } from '@/services/proto/warehousetrade';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+
+export default defineComponent({
+    name: ModalEnum.spot_trade_warehouse_delisting,
+    components: { Drawer },
+    props: {
+        selectedRow: {
+            type: Object as PropType<WrPosition>,
+            default: {},
+        },
+    },
+    setup(props) {
+        const data = props.selectedRow;
+        const loading = ref<boolean>(false);
+        // console.log(param);
+        // requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
+        //     // cancel(true);
+        // });
+        return {
+            visible: true,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.listed {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .condition {
+        width: 100%;
+        height: 48px;
+        padding: 10px 16px;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: rgba(@m-black7, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
+    }
+}
+
+::v-deep.formProgress {
+    width: 140px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 80px;
+    .ant-progress-outer {
+        margin-right: 0;
+        padding-right: 0;
+        .ant-progress-inner {
+            background: @m-grey14;
+            .rounded-corners(2px);
+            .ant-progress-bg {
+                height: 3px !important;
+                border-radius: 2px !important;
+                background-color: @m-blue0;
+            }
+        }
+    }
+    .ant-progress-text {
+        display: none;
+    }
+}
+.unit {
+    margin-left: 80px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+.listedBtn {
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.cancelBtn:extend(.listedBtn) {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
+</style>;

src/views/market/spot_trade/components/buy-sell-market/components/sell/index.vue

@@ -1,34 +1,56 @@
 <template>
-    <!-- 卖大厅 -->
+  <!-- 卖大厅 -->
 
-    <a-table
-        :columns="columns"
-        class="sellHallTable"
-        :scroll="{ x: '100%', y: 'calc(100% - 61px)' }"
-        :pagination="false"
-        :loading="loading"
-        :expandedRowKeys="expandedRowKeys"
-        :customRow="Rowclick"
-        rowKey="key"
-        :data-source="tableList"
-    ></a-table>
+  <a-table :columns="columns"
+           class="sellHallTable"
+           :scroll="{ x: '100%', y: 'calc(100% - 61px)' }"
+           :pagination="false"
+           :loading="loading"
+           :expandedRowKeys="expandedRowKeys"
+           :customRow="Rowclick"
+           rowKey="key"
+           :data-source="tableList">
+    <!-- 额外的展开行 -->
+    <template #expandedRowRender="{ record }">
+      <BtnList :btnList="btnList"
+               :record="record"
+               @click="open" />
+    </template>
+  </a-table>
 </template>
 
 <script lang="ts">
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { ComposeTableParam, defineComponent, handleComposeTable, ModalEnum, queryTableList } from '@/common/export/commonTable';
+import { ComposeTableParam, BtnList, defineComponent, handleComposeTable, ModalEnum, queryTableList } from '@/common/export/commonTable';
 import { _closeModal } from '@/common/setup/modal/modal';
 import { queryAgreementConfig } from '@/services/go/ermcp/qhj';
 import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
+import { defineAsyncComponent, PropType } from 'vue';
+import { BtnList as btnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
-    emits: ['cancel'],
+    emits: ['cancel', 'openComponent'],
     name: 'warehouse_receipt_trade_price_delisting_sell',
-    props: {},
+    props: {
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        btnList: {
+            default: [],
+            type: Array as PropType<btnListType[]>,
+        },
+    },
+    components: {
+        BtnList,
+    },
     setup(props, context) {
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
+        function open(item: btnListType) {
+            context.emit('openComponent', item);
+        }
         // 获取列表数据
         const queryTableAction = () => {
             // const param: QueryOrderQuoteReq = {
@@ -50,6 +72,7 @@ export default defineComponent({
             ...handleComposeTable<WrOrderQuoteDetail>(param),
             loading,
             tableList,
+            open,
         };
     },
 });

src/views/market/spot_trade/components/buy-sell-market/index.vue

@@ -53,11 +53,15 @@
     <a-row>
       <a-col :span="12"
              v-if="buyMarket.isMarket">
-        <Buy />
+        <Buy :enumName="enumName"
+             @openComponent="openComponent"
+             :btnList="buyMarket.btnList" />
       </a-col>
       <a-col :span="12"
              v-if="sellMarket.isMarket">
-        <Sell />
+        <Sell :enumName="enumName"
+              @openComponent="openComponent"
+              :btnList="sellMarket.btnList" />
       </a-col>
     </a-row>
     <component :is="componentId"
@@ -87,15 +91,6 @@ export default defineComponent({
     emits: ['cancel'],
     name: 'buy-sell-market',
     props: {
-        wrpricetype: {
-            // 价格方式 - 1:固定价 2-浮动价
-            default: 1,
-            type: Number,
-        },
-        haswr: {
-            default: 0, // 是否有仓单 0-没有 1-有(仓单贸易填1,仓单预售填0)
-            type: Number,
-        },
         selectedRow: {
             type: Object as PropType<any>,
             default: {},
@@ -113,9 +108,11 @@ export default defineComponent({
         LineChartOutlined,
         [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../detail/index.vue')),
         [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../post_buying/index.vue')),
+        [ModalEnum.spot_trade_warehouse_delisting]: defineAsyncComponent(() => import('./components/delisting/index.vue')),
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
+        console.log(props.selectedRow);
         // 买卖大厅 配置数据
         // 表格操作按钮列表
         const { firstBtn, buyMarket, sellMarket } = handleSpotBtnList(props.enumName);

src/views/market/spot_trade/components/detail/index.vue

@@ -1,57 +1,141 @@
 <template>
-  <!-- 详情-->
-  <a-modal class="add-custom custom-detail"
-           title="详情"
-           centered
-           v-model:visible="visible"
-           :maskClosable="false"
-           @cancel="cancel"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                @click="cancel">关闭</a-button>
-    </template>
+  <!-- 详情 -->
+  <Drawer :title="'详情'"
+          :placement="'top'"
+          :visible="visible">
+    <!-- 挂牌 -->
     详情
-  </a-modal>
+  </Drawer>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Des } from '@/common/components/commonDes';
-import { QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
-import { _closeModal } from '@/common/setup/modal/modal';
+import { defineComponent, PropType, ref } from 'vue';
+import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import Drawer from '@/common/components/drawer/index.vue';
+import { QueryWrPositionReq, WrPosition } from '@/services/go/wrtrade/interface';
+import { getUserId } from '@/services/bus/account';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { hdWROrder } from '@/services/proto/warehousetrade';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 
 export default defineComponent({
-    emits: ['cancel'],
-    name: ModalEnum.detail,
-    components: { Des },
+    name: ModalEnum.spot_trade_warehouse_delisting,
+    components: { Drawer },
     props: {
         selectedRow: {
-            type: Object as PropType<QhjAgreementConfig>,
+            type: Object as PropType<WrPosition>,
             default: {},
         },
     },
-    setup(props, context) {
-        const { visible, cancel } = _closeModal(context);
+    setup(props) {
+        const data = props.selectedRow;
+        const loading = ref<boolean>(false);
+        // console.log(param);
+        // requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
+        //     // cancel(true);
+        // });
         return {
-            cancel,
-            visible,
+            visible: true,
         };
     },
 });
 </script>
 
-<style lang="less">
-.custom-detail {
-    .ant-form.inlineForm {
-        margin-top: 20px;
+<style lang="less" scoped>
+.listed {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .condition {
+        width: 100%;
+        height: 48px;
+        padding: 10px 16px;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: rgba(@m-black7, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
     }
-    .upload {
-        .look {
-            margin-left: 0;
+}
+
+::v-deep.formProgress {
+    width: 140px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 80px;
+    .ant-progress-outer {
+        margin-right: 0;
+        padding-right: 0;
+        .ant-progress-inner {
+            background: @m-grey14;
+            .rounded-corners(2px);
+            .ant-progress-bg {
+                height: 3px !important;
+                border-radius: 2px !important;
+                background-color: @m-blue0;
+            }
         }
     }
+    .ant-progress-text {
+        display: none;
+    }
+}
+.unit {
+    margin-left: 80px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+.listedBtn {
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.cancelBtn:extend(.listedBtn) {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
 }
 </style>;