买卖大厅

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);