update

src/common/components/drawer/index.vue

@@ -1,78 +1,69 @@
 <template>
-    <a-drawer
-        placement="right"
-        :closable="false"
-        :visible="visible"
-        :destroyOnClose="true"
-        class="bottomListed"
-        height="405px"
-    >
-        <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
-        <div class="collapse" @click="cancel">
-            <DoubleRightOutlined />
+  <a-drawer placement="right" :closable="false" :visible="visible" :destroyOnClose="true" class="bottomListed" height="405px">
+    <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
+    <div class="collapse" @click="cancel">
+      <DoubleRightOutlined />
+    </div>
+    <div class="collapseCont">
+      <div class="title">{{ title }}</div>
+      <div class="content highContent">
+        <slot></slot>
+      </div>
+    </div>
+
+    <div class="gpDetail" style="display: none">
+      <div class="title">挂牌详情</div>
+      <div class="content">
+        <div class="item">
+          <div class="left">交易账户</div>
+          <div class="right">3237545143</div>
         </div>
-        <div class="collapseCont">
-            <div class="title">{{ title }}</div>
-            <div class="content highContent">
-                <slot></slot>
-            </div>
+        <div class="item">
+          <div class="left">挂牌方式</div>
+          <div class="right">贸易圈</div>
         </div>
-
-        <div class="gpDetail" style="display: none">
-            <div class="title">挂牌详情</div>
-            <div class="content">
-                <div class="item">
-                    <div class="left">交易账户</div>
-                    <div class="right">3237545143</div>
-                </div>
-                <div class="item">
-                    <div class="left">挂牌方式</div>
-                    <div class="right">贸易圈</div>
-                </div>
-                <div class="item">
-                    <div class="left">挂牌价格</div>
-                    <div class="right">
-                        <span>1680.00</span>
-                        <span class="grey">(可议价)</span>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="left">现货仓单</div>
-                    <div class="right">335999666555222222</div>
-                </div>
-                <div class="item">
-                    <div class="left">挂牌数量</div>
-                    <div class="right">
-                        <span>30吨</span>
-                        <span class="grey">整单</span>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="left">起摘数量</div>
-                    <div class="right">2吨</div>
-                </div>
-                <div
-                    class="someItems"
-                >1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业</div>
-                <div class="item">
-                    <div class="left">现货仓单</div>
-                    <div class="right">335999666555222222</div>
-                </div>
-                <div class="item">
-                    <div class="left">指定朋友</div>
-                    <div class="right">1000 江**业、1201 *融、1123 南...</div>
-                </div>
-                <div class="item">
-                    <div class="left">挂牌金额</div>
-                    <div class="right">50400.00</div>
-                </div>
-                <div class="item">
-                    <div class="left">履约保证金</div>
-                    <div class="right">5040.00</div>
-                </div>
-            </div>
+        <div class="item">
+          <div class="left">挂牌价格</div>
+          <div class="right">
+            <span>1680.00</span>
+            <span class="grey">(可议价)</span>
+          </div>
+        </div>
+        <div class="item">
+          <div class="left">现货仓单</div>
+          <div class="right">335999666555222222</div>
+        </div>
+        <div class="item">
+          <div class="left">挂牌数量</div>
+          <div class="right">
+            <span>30吨</span>
+            <span class="grey">整单</span>
+          </div>
+        </div>
+        <div class="item">
+          <div class="left">起摘数量</div>
+          <div class="right">2吨</div>
+        </div>
+        <div class="someItems">1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业</div>
+        <div class="item">
+          <div class="left">现货仓单</div>
+          <div class="right">335999666555222222</div>
         </div>
-    </a-drawer>
+        <div class="item">
+          <div class="left">指定朋友</div>
+          <div class="right">1000 江**业、1201 *融、1123 南...</div>
+        </div>
+        <div class="item">
+          <div class="left">挂牌金额</div>
+          <div class="right">50400.00</div>
+        </div>
+        <div class="item">
+          <div class="left">履约保证金</div>
+          <div class="right">5040.00</div>
+        </div>
+      </div>
+    </div>
+  </a-drawer>
 </template>
 
 <script lang="ts">
@@ -82,38 +73,38 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { DoubleRightOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
-    name: 'drawer',
-    emits: ['cancel', 'update'],
-    props: {
-        modalName: {
-            default: 'drawer',
-            type: String as PropType<keyof ModalName>,
-        },
-        title: {
-            default: '',
-            type: String,
-        },
-        placement: {
-            // 需要绑定的值得 key
-            default: 'right',
-            type: String,
-        },
-        visible: {
-            default: false,
-            type: Boolean,
-        },
+  name: 'drawer',
+  emits: ['cancel', 'update'],
+  props: {
+    modalName: {
+      default: 'drawer',
+      type: String as PropType<keyof ModalName>,
     },
-    components: {
-        DoubleRightOutlined,
+    title: {
+      default: '',
+      type: String,
     },
-    setup(props, context) {
-        function cancel() {
-            context.emit('cancel');
-        }
-        return {
-            cancel,
-        };
+    placement: {
+      // 需要绑定的值得 key
+      default: 'right',
+      type: String,
+    },
+    visible: {
+      default: false,
+      type: Boolean,
     },
+  },
+  components: {
+    DoubleRightOutlined,
+  },
+  setup(props, context) {
+    function cancel() {
+      context.emit('cancel');
+    }
+    return {
+      cancel,
+    };
+  },
 });
 </script>
 
@@ -430,11 +421,7 @@ export default defineComponent({
                             height: 38px;
                             line-height: 38px;
                             text-align: center;
-                            background: linear-gradient(
-                                0deg,
-                                @m-blue4,
-                                @m-blue5
-                            );
+                            background: linear-gradient(0deg, @m-blue4, @m-blue5);
                             font-size: 16px;
                             color: @m-white10;
                             // border-bottom: 2px solid @m-blue0;

src/common/components/echarts/echarts-base/index.less

@@ -1,5 +1,6 @@
 .mtp-echarts {
-    flex: 1;
+    flex  : 1;
+    margin: auto;
 
     &.is-empty {
         position: relative;

src/common/components/echarts/echarts-kline/index.less

@@ -16,10 +16,12 @@
             color          : #7a8a94;
             font-size      : 12px;
             list-style-type: none;
-            padding        : 4px 4%;
+            padding        : 0 4%;
             margin         : 0;
 
             &-item {
+                white-space: nowrap;
+
                 &:not(:first-child) {
                     margin-left: 10px;
                 }
@@ -52,6 +54,6 @@
     }
 
     .mtp-tabbar {
-        padding: 4px 4%;
+        padding: 0 4%;
     }
 }

src/common/components/echarts/echarts-kline/options.ts

@@ -43,7 +43,9 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
 
     // K线配置项
     const setKlineOption = () => {
+        const { seriesMarkLineColor, seriesMarkLabelColor } = getColors();
         const { dimensions, source } = klineData;
+
         klineOption.value = {
             ...getDefaultOption(),
             dataset: {
@@ -60,7 +62,7 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
                         symbol: 'none',
                         // 标线标签样式
                         label: {
-                            color: '#444',
+                            color: seriesMarkLabelColor,
                             fontWeight: 'bold',
                             backgroundColor: 'rgba(255,255,255,.75)',
                             padding: 5,
@@ -69,7 +71,7 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
                         // 标线样式
                         lineStyle: {
                             type: 'dashed',
-                            color: 'rgba(255,255,255,.3)'
+                            color: seriesMarkLineColor,
                         },
                         data: [
                             {
@@ -170,7 +172,9 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
 
     // VOL配置项
     const setVolOption = () => {
+        const { upColor, downColor } = getColors();
         const { dimensions, source } = volData;
+
         volOption.value = {
             ...getDefaultOption(),
             dataset: {
@@ -183,6 +187,17 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
                     type: 'bar',
                     sampling: 'average',
                     barWidth: '60%',
+                    itemStyle: {
+                        color: (params: any) => {
+                            const { close, open } = klineData.source[params.dataIndex]
+                            // 判断收盘价是否高于或等于开盘价
+                            if (close >= open) {
+                                return upColor;
+                            } else {
+                                return downColor;
+                            }
+                        },
+                    }
                 },
             ],
         }
@@ -270,6 +285,8 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
                     downColor: '#47b262',
                     xAxisLineColor: '#171B1D',
                     yAxisLineColor: '#171B1D',
+                    seriesMarkLabelColor: '#3C454B',
+                    seriesMarkLineColor: '#666',
                 };
             }
             case ThemeEnum.light: {
@@ -278,6 +295,8 @@ export function useOptions(klineData: Dataset<Candlestick>, macdData: Dataset<MA
                     downColor: '#47b262',
                     xAxisLineColor: '#DAE5EC',
                     yAxisLineColor: '#DAE5EC',
+                    seriesMarkLabelColor: '#777',
+                    seriesMarkLineColor: '#ACB8C0',
                 };
             }
         }

src/common/components/echarts/echarts-kline/type.ts

@@ -90,4 +90,6 @@ export type Colors = {
     downColor: string,
     xAxisLineColor: string,
     yAxisLineColor: string,
+    seriesMarkLabelColor: string,
+    seriesMarkLineColor: string,
 }

src/common/components/echarts/echarts-timeline/index.less

@@ -8,9 +8,12 @@
         color          : #7a8a94;
         font-size      : 12px;
         list-style-type: none;
-        padding        : 4px 4%;
+        padding        : 0 4%;
+        margin         : 0;
 
         &-item {
+            white-space: nowrap;
+
             &:not(:first-child) {
                 margin-left: 10px;
             }

src/common/components/echarts/echarts-timeline/options.ts

@@ -19,6 +19,8 @@ export function useOptions(state: State) {
                     xAxisLineColor: '#171B1D',
                     yAxisLineColor: '#171B1D',
                     seriesLineColor: '#39afe6',
+                    seriesMarkLabelColor: '#3C454B',
+                    seriesMarkLineColor: '#666',
                     seriesAreaGradients: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
                             {
@@ -41,6 +43,8 @@ export function useOptions(state: State) {
                     xAxisLineColor: '#DAE5EC',
                     yAxisLineColor: '#DAE5EC',
                     seriesLineColor: '#3864d7',
+                    seriesMarkLabelColor: '#777',
+                    seriesMarkLineColor: '#ACB8C0',
                     seriesAreaGradients: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
                             {
@@ -147,7 +151,7 @@ export function useOptions(state: State) {
                         symbol: 'none',
                         // 标线标签样式
                         label: {
-                            color: '#444',
+                            color: colors.seriesMarkLabelColor,
                             fontWeight: 'bold',
                             backgroundColor: 'rgba(255,255,255,.75)',
                             padding: 5,
@@ -161,7 +165,7 @@ export function useOptions(state: State) {
                             {
                                 yAxis: dataset.source.close[dataset.source.close.length - 1] ?? '--', // 最新价
                                 lineStyle: {
-                                    color: 'rgba(255,255,255,.5)'
+                                    color: colors.seriesMarkLineColor
                                 },
                             },
                             {
@@ -187,7 +191,9 @@ export function useOptions(state: State) {
 
     // 动态更新数据
     const updateOptions = () => {
+        const { seriesMarkLineColor } = getColors();
         const { dataset, yestClose } = state;
+
         timeOption.value = {
             dataset: {
                 source: dataset.source,
@@ -200,7 +206,7 @@ export function useOptions(state: State) {
                             {
                                 yAxis: dataset.source.close[dataset.source.close.length - 1] ?? '--', // 最新价
                                 lineStyle: {
-                                    color: 'rgba(255,255,255,.5)'
+                                    color: seriesMarkLineColor
                                 },
                             },
                             {

src/common/components/echarts/echarts-timeline/type.ts

@@ -34,5 +34,7 @@ export type Colors = {
     xAxisLineColor: string,
     yAxisLineColor: string,
     seriesLineColor: string,
+    seriesMarkLabelColor: string,
+    seriesMarkLineColor: string,
     seriesAreaGradients: LinearGradientObject,
 }

src/common/components/echarts/index.less

@@ -0,0 +1,21 @@
+.mtp-chart {
+    [theme='light'] & {
+        --bgcolor: #fff;
+    }
+
+    display         : flex;
+    flex-direction  : column;
+    flex            : 1;
+    height          : 100%;
+    background-color: var(--bgcolor, #0e0e0f);
+    padding         : 10px 0;
+
+    &__tab {
+        padding      : 0 4%;
+        margin-bottom: 10px;
+    }
+
+    &__content {
+        flex: 1;
+    }
+}

src/common/components/echarts/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="mtp-chart">
+    <mtp-tabbar class="mtp-chart__tab" theme="menu" :data="chartType" v-model:active="activeCycleType" @change="changeCycleType" />
+    <!-- K线  -->
+    <mtp-echarts-timeline class="mtp-chart__content" :goodscode="goodscode" @ready="onReady" v-if="chartType[activeCycleType].code === CycleType.time" />
+    <!-- 分时线  -->
+    <mtp-echarts-kline class="mtp-chart__content" :cycle-type="activeCycleType" :show-indicator="showIndicator" :goodscode="goodscode" v-else />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { CycleType } from './echarts-kline/type';
+import MtpEchartsKline from './echarts-kline/index.vue';
+import MtpEchartsTimeline from './echarts-timeline/index.vue';
+import MtpTabbar from '../tabbar/index.vue';
+
+export default defineComponent({
+  emits: ['ready'],
+  components: {
+    MtpEchartsKline,
+    MtpEchartsTimeline,
+    MtpTabbar,
+  },
+  props: {
+    goodscode: {
+      type: String,
+      default: '',
+    },
+    // 是否显示指标
+    showIndicator: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props, { emit }) {
+    const activeCycleType = ref(0); // 当前选中的图表周期
+
+    // 周期类型
+    const chartType = [
+      { code: CycleType.time, label: '分时' },
+      { code: CycleType.minutes, label: '1分钟' },
+      { code: CycleType.minutes5, label: '5分钟' },
+      { code: CycleType.minutes30, label: '30分钟' },
+      { code: CycleType.minutes60, label: '60分钟' },
+      { code: CycleType.Hours4, label: '4小时' },
+      { code: CycleType.days, label: '日K' },
+    ];
+
+    // 切换图表周期类型
+    const changeCycleType = (index: number) => {
+      activeCycleType.value = index;
+    };
+
+    const onReady = (startTime: string, endTime: string) => {
+      emit('ready', startTime, endTime);
+    }
+
+    return {
+      CycleType,
+      chartType,
+      activeCycleType,
+      changeCycleType,
+      onReady,
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/common/components/tabbar/index.less

@@ -1,4 +1,11 @@
 .mtp-tabbar {
+    [theme='light'] & {
+        --bgcolor            : #fff;
+        --tab-border-color   : #dae5ec;
+        --tab-checked-color  : #5179e2;
+        --tab-checked-bgcolor: #d4e0ff;
+    }
+
     &--menu {
         .list {
             display        : flex;
@@ -13,7 +20,7 @@
                 height         : 22px;
                 color          : #7a8a94;
                 cursor         : pointer;
-                border         : 1px solid #22292c;
+                border         : 1px solid var(--tab-border-color, #22292c);
                 padding        : 0 16px;
 
                 &:not(:first-child) {
@@ -21,8 +28,8 @@
                 }
 
                 &.active {
-                    color           : #0866b8;
-                    background-color: #0e2f4c;
+                    color           : var(--tab-checked-color, #0866b8);
+                    background-color: var(--tab-checked-bgcolor, #0e2f4c);
                 }
             }
         }

src/hooks/account/index.ts

@@ -28,39 +28,39 @@ const tradeAccount = ref<TradeAccount>();
 export function useTradeAccount() {
     // 获取资金账户列表
     const getTradeAccountList = () => {
-        if (!loading.value) {
-            tradeAccountList.length = 0;
-            loading.value = true;
-
-            // 登录ID
-            const loginID = Number(geLoginID_number());
-
-            getTaAccounts({ loginID }).then(async (res) => {
-                for (let i = 0; i < res.length; i++) {
-                    const account = res[i];
-                    const positionList: TradePosition[] = [];
-
-                    // 获取账户下的期货持仓列表
-                    await queryErmcpTradePosition({ accountID: account.accountid }).then((res) => {
-                        res.forEach((item) => {
-                            positionList.push({
-                                ...item,
-                                ...calcPositionValue(item),
-                            })
+        // 登录ID
+        const loginID = Number(geLoginID_number());
+        const tmpAccountList: TradeAccount[] = [];
+        loading.value = true;
+
+        getTaAccounts({ loginID }).then(async (res) => {
+            for (let i = 0; i < res.length; i++) {
+                const account = res[i];
+                const positionList: TradePosition[] = [];
+
+                // 获取账户下的期货持仓列表
+                await queryErmcpTradePosition({ accountID: account.accountid }).then((res) => {
+                    res.forEach((item) => {
+                        positionList.push({
+                            ...item,
+                            ...calcPositionValue(item),
                         })
                     })
+                })
 
-                    tradeAccountList.push({
-                        positionList,
-                        ...account,
-                        ...calcCapitalValue(account, positionList),
-                    })
-                }
+                tmpAccountList.push({
+                    positionList,
+                    ...account,
+                    ...calcCapitalValue(account, positionList),
+                })
+            }
 
-                tradeAccountChange(getSelectedAccountId());
-                loading.value = false;
-            })
-        }
+            tradeAccountList.length = 0;
+            tradeAccountList.push(...tmpAccountList);
+
+            tradeAccountChange(getSelectedAccountId());
+            loading.value = false;
+        })
     }
 
     // 切换资金账户

src/views/business/purchase/list/all/index.vue

@@ -8,7 +8,7 @@
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
         <!-- 额外的展开行 -->
         <template #expandedRowRender="{ record }">
-          <mtp-table-button class="btn-list-sticky" :buttons="buttons" :record="record" @click="openComponent" />
+          <mtp-table-button class="btn-list-sticky" :buttons="handleBtnList(record)" :record="record" @click="openComponent" />
         </template>
         <template #pricedqty="{ text, record }">
           <span>{{ handleEnumdic(text, record) }}</span>
@@ -41,7 +41,7 @@
     </template>
   </mtp-table-scroll>
   <!-- 右键 -->
-  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="buttons"> </contextMenu>
+  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="handleBtnList(selectedRow)"> </contextMenu>
   <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
@@ -83,7 +83,7 @@ export default defineComponent({
     // 获取列表数据
     const queryTableAction = () => {
       switch (routeName) {
-        // 特点价合同
+        // 待点价合同
         case 'purchase_pending':
           queryTable(QueryPurchase, { querytype: 2 });
           break;
@@ -97,7 +97,7 @@ export default defineComponent({
     // 获取表头名称
     const getTableName = () => {
       switch (routeName) {
-        // 特点价合同
+        // 待点价合同
         case 'purchase_pending':
           return 'table_pcweb_purchase_pointprice';
         // 待交收合同
@@ -108,6 +108,16 @@ export default defineComponent({
       }
     };
 
+    // 处理按钮显示
+    function handleBtnList(item: Ermcp3SellBuyContract) {
+      if (item) {
+        if (item.goodsid) {
+          return buttons;
+        }
+        return buttons.filter((e) => e.code !== 'purchase_pending_trade');
+      }
+    }
+
     // 表格通用逻辑
     const param: ComposeTableParam = {
       queryFn: queryTableAction,
@@ -125,6 +135,7 @@ export default defineComponent({
       formatTime,
       formatValue,
       buttons,
+      handleBtnList,
     };
   },
 });

src/views/business/sell/list/all/index.vue

@@ -74,7 +74,7 @@ export default defineComponent({
     // 获取列表数据
     const queryTableAction = () => {
       switch (routeName) {
-        // 特点价合同
+        // 待点价合同
         case 'sell_pending':
           queryTable(QueryWareHouse, { querytype: 2 });
           break;
@@ -88,7 +88,7 @@ export default defineComponent({
     // 获取表头名称
     const getTableName = () => {
       switch (routeName) {
-        // 特点价合同
+        // 待点价合同
         case 'sell_pending':
           return 'table_pcweb_sales_pointprice';
         // 待交收合同

src/views/information/spot-contract/components/add/index.vue

@@ -126,15 +126,6 @@
         <legend>价格信息</legend>
         <a-row :gutter="24">
           <a-col :span="12">
-            <a-form-item label="定价类型" name="PriceType">
-              <a-select class="inlineFormSelect" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model:value="formState.PriceType" placeholder="请选择定价类型">
-                <a-select-option v-for="item in priceType" :key="item.key" :value="item.key">
-                  {{ item.value }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
             <a-form-item label="结算币种" name="CurrencyID">
               <a-select class="inlineFormSelect" v-model:value="formState.CurrencyID" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" placeholder="请选择结算币种">
                 <a-select-option v-for="item in payCurrency" :key="item.enumitemname" :value="item.enumitemname">
@@ -148,14 +139,31 @@
               <a-input class="dialogInput suffixGrey" v-model:value="formState.Qty" style="width: 200px" @change="getAmout" placeholder="请输入数量" :suffix="numberUnit" />
             </a-form-item>
           </a-col>
-          <a-col :span="12" v-if="formState.PriceType === 3">
-            <a-form-item label="暂定价">
-              <a-input class="dialogInput suffixGrey" style="width: 200px" :suffix="payCurrencyUnit" placeholder="请输入暂定价" />
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <a-range-picker v-model:value="deliveryDate" class="commonPicker" style="width: 200px" :disabled-date="disabledDate" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="定价类型" name="PriceType">
+              <a-select class="inlineFormSelect" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model:value="formState.PriceType" placeholder="请选择定价类型">
+                <a-select-option v-for="item in priceType" :key="item.key" :value="item.key">
+                  {{ item.value }}
+                </a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
           <!-- 以下是点价的价格信息 start -->
           <template v-if="formState.PriceType === 2 || formState.PriceType === 3">
             <a-col :span="12">
+              <a-form-item label="点价类型">
+                <a-select class="inlineFormSelect" v-model:value="pricingType" style="width: 200px" placeholder="请选择点价类型" @change="pricingTypeChange">
+                  <a-select-option :value="0">现货</a-select-option>
+                  <a-select-option :value="1">期货</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12" v-if="pricingType === 1">
               <a-form-item label="点价合约" name="GoodsID">
                 <a-select class="inlineFormSelect" v-model:value="formState.GoodsID" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" placeholder="请选择点价合约">
                   <a-select-option v-for="item in goodsList" :key="item.goodsid" :value="item.goodsid">
@@ -164,6 +172,16 @@
                 </a-select>
               </a-form-item>
             </a-col>
+            <a-col :span="12" v-if="formState.PriceType === 3">
+              <a-form-item label="暂定价">
+                <a-input class="dialogInput suffixGrey" style="width: 200px" :suffix="payCurrencyUnit" placeholder="请输入暂定价" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="点价说明" name="Remark">
+                <a-input class="dialogInput" style="width: 608px" v-model:value="formState.Remark" placeholder="请输入点价说明" />
+              </a-form-item>
+            </a-col>
             <a-col :span="12">
               <a-form-item label="升贴水" name="PriceMove">
                 <a-input-number class="dialogInput suffixGrey" v-model:value="formState.PriceMove" placeholder="请输入升贴水" :min="0" :suffix="`${payCurrencyUnit}/${numberUnit}`" style="width: 200px" />
@@ -174,11 +192,6 @@
                 <a-range-picker v-model:value="priceDate" class="commonPicker" :disabled-date="disabledDate" style="width: 200px" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
               </a-form-item>
             </a-col>
-            <a-col :span="12">
-              <a-form-item label="交收期">
-                <a-range-picker v-model:value="deliveryDate" class="commonPicker" style="width: 200px" :disabled-date="disabledDate" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
-              </a-form-item>
-            </a-col>
           </template>
           <!-- 以上是点价的价格信息 end -->
           <template v-if="formState.PriceType === 1">
@@ -192,11 +205,6 @@
                 <a-input class="dialogInput suffixGrey" v-model:value="formState.Amount" readonly placeholder="输入数量和价格后自动算" :suffix="payCurrencyUnit" style="width: 200px" />
               </a-form-item>
             </a-col>
-            <a-col :span="24">
-              <a-form-item label="交收期">
-                <a-range-picker v-model:value="deliveryDate" style="width: 200px" class="commonPicker" :disabled-date="disabledDate" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
-              </a-form-item>
-            </a-col>
           </template>
         </a-row>
       </fieldset>
@@ -234,13 +242,6 @@
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="备注" name="Remark">
-              <a-input class="dialogInput" style="width: 608px" v-model:value="formState.Remark" placeholder="请输入备注" />
-            </a-form-item>
-          </a-col>
-        </a-row>
       </fieldset>
     </a-form>
   </a-modal>
@@ -283,6 +284,7 @@ export default defineComponent({
     const { visible, cancel } = _closeModal(context);
     const { sendReq } = addContractReq();
     const loading = ref<boolean>(false);
+    const pricingType = ref(1); // 点价类型
 
     // 表单
     const formRef = ref();
@@ -321,6 +323,7 @@ export default defineComponent({
       merchandiserList.value = getBusinesserOrMerchandiser('23');
     });
     function submit(OperateType: 1 | 2) {
+      console.log(formState)
       validateAction<FormState>(formRef, formState).then((param) => {
         const id = getUserId();
         isSell.value ? (param.SellUserID = id) : (param.BuyUserID = id);
@@ -359,12 +362,22 @@ export default defineComponent({
       cancel();
     }
 
+    // 选择点价类型
+    const pricingTypeChange = (value: number) => {
+      if (value === 0) {
+        formState.GoodsID = 0;
+      } else {
+        formState.GoodsID = undefined;
+      }
+    }
+
     return {
       visible,
       closeAction,
       submit,
       formRef,
       loading,
+      pricingType,
       maskClosableFlag: false,
       formState,
       rules,
@@ -372,6 +385,7 @@ export default defineComponent({
       contractType,
       isSell,
       contractChange,
+      pricingTypeChange,
       customList,
       deliveryGoodsList,
       barandList,

src/views/information/spot-contract/components/common-detail/index.vue

@@ -2,24 +2,19 @@
   <a-form class="inlineForm">
     <fieldset class="formFieldSet">
       <legend>基本信息</legend>
-      <Des :list="baseInfo"
-           @onClick="baseInfoClick" />
+      <Des :list="baseInfo" @onClick="baseInfoClick" />
     </fieldset>
     <fieldset class="formFieldSet">
       <legend>现货信息</legend>
       <Des :list="spotInfo" />
     </fieldset>
     <fieldset class="formFieldSet">
-      <legend>现货信息</legend>
+      <legend>价格信息</legend>
       <Des :list="priceInfo" />
     </fieldset>
     <slot></slot>
-    <a-modal :visible="previewVisible"
-             :footer="null"
-             @cancel="cancelImg">
-      <img alt="预览附件"
-           style="width: 100%"
-           :src="previewImage" />
+    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelImg">
+      <img alt="预览附件" style="width: 100%" :src="previewImage" />
     </a-modal>
   </a-form>
 
@@ -34,79 +29,84 @@ import { handlePreviewImg } from '@/common/setup/upload';
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
 
 export default defineComponent({
-    name: 'custom-detail-desc',
-    components: { Des },
-    props: {
-        selectedRow: {
-            type: Object as PropType<Ermcp3ContractRsp>,
-            default: {},
-        },
+  name: 'custom-detail-desc',
+  components: { Des },
+  props: {
+    selectedRow: {
+      type: Object as PropType<Ermcp3ContractRsp>,
+      default: {},
     },
-    setup(props) {
+  },
+  setup(props) {
+    // 基本信息
+    const { desList: baseInfo, getDesList: getBaseInfo } = handleDesList();
+    // 现货信息
+    const { desList: spotInfo, getDesList: getSpotInfo } = handleDesList();
+    // 价格信息
+    const { desList: priceInfo, getDesList: getPriceInfo } = handleDesList();
+    // 预览附件
+    const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
+    //
+    function baseInfoClick({ label }: DescriptionsList) {
+      const { attachment } = props.selectedRow;
+      switch (label) {
+        case '合同附件':
+          previewImg(attachment);
+          break;
+      }
+    }
+    watchEffect(() => {
+      if (props.selectedRow.contractno) {
+        console.log('props.selectedRow', props.selectedRow);
+
+        const data = props.selectedRow;
         // 基本信息
-        const { desList: baseInfo, getDesList: getBaseInfo } = handleDesList();
+        const base = [
+          { label: '合同编号', value: formatValue(data.contractno) },
+          { label: '合同类型', value: getContractTypeName(data.contracttype) },
+          { label: '业务类型', value: getBizTypeName(data.biztype) },
+          { label: '采购方', value: formatValue(data.buyusername) },
+          { label: '销售方', value: formatValue(data.sellusername) },
+          { label: '合同附件', value: formatValue(getImgName(data.attachment)) },
+          { label: '状态', value: getContractStatusName(data.contracctstatus), className: 'green' },
+          { label: "交易主体", value: formatValue(data.subjectname) }
+        ];
+        getBaseInfo(base);
         // 现货信息
-        const { desList: spotInfo, getDesList: getSpotInfo } = handleDesList();
+        const spot = [
+          { label: '现货品种', value: formatValue(data.deliverygoodsname) },
+          { label: '商品', value: formatValue(data.wrstandardname) },
+          { label: '品牌', value: formatValue(data.brandname) },
+          { label: '商品规格', value: formatValue(data.spotgoodsdesc) },
+        ];
+        getSpotInfo(spot);
         // 价格信息
-        const { desList: priceInfo, getDesList: getPriceInfo } = handleDesList();
-        // 预览附件
-        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
-        //
-        function baseInfoClick({ label }: DescriptionsList) {
-            const { attachment } = props.selectedRow;
-            switch (label) {
-                case '合同附件':
-                    previewImg(attachment);
-                    break;
-            }
+        const price = [
+          { label: '定价类型', value: getPriceTypeName(data.pricetype) },
+          { label: '数量', value: formatValue(data.qty) + data.enumdicname },
+          { label: data.pricetype === 2 ? '点价合约' : '价格', value: data.pricetype === 2 ? '期货 ' + formatValue(data.goodscode) : formatValue(data.price) },
+        ];
+        if (data.pricetype > 1 && data.goodsid) {
+          price.push({ label: '点价说明', value: formatValue(data.remark) })
         }
-        watchEffect(() => {
-            if (props.selectedRow.contractno) {
-                console.log('props.selectedRow', props.selectedRow);
-
-                const data = props.selectedRow;
-                // 基本信息
-                const base = [
-                    { label: '合同编号', value: formatValue(data.contractno) },
-                    { label: '合同类型', value: getContractTypeName(data.contracttype) },
-                    { label: '业务类型', value: getBizTypeName(data.biztype) },
-                    { label: '采购方', value: formatValue(data.buyusername) },
-                    { label: '销售方', value: formatValue(data.sellusername) },
-                    { label: '合同附件', value: formatValue(getImgName(data.attachment)) },
-                    { label: '状态', value: getContractStatusName(data.contracctstatus), className: 'green' },
-                    { label: "交易主体",value:formatValue(data.subjectname)}
-                ];
-                getBaseInfo(base);
-                // 现货信息
-                const spot = [
-                    { label: '现货品种', value: formatValue(data.deliverygoodsname) },
-                    { label: '商品', value: formatValue(data.wrstandardname) },
-                    { label: '品牌', value: formatValue(data.brandname) },
-                    { label: '商品规格', value: formatValue(data.spotgoodsdesc) },
-                ];
-                getSpotInfo(spot);
-                // 价格信息
-                const price = [
-                    { label: '定价类型', value: getPriceTypeName(data.pricetype) },
-                    { label: '数量', value: formatValue(data.qty) + data.enumdicname },
-                    { label: data.pricetype === 2 ? '点价合约' : '价格', value: data.pricetype === 2 ? formatValue(data.goodscode) : formatValue(data.price) },
-                    { label: '升贴水', value: formatValue(data.pricemove) },
-                    { label: '点价期', value: formatValue(formatTime(data.startdate, 'd') + '--' + formatTime(data.enddate, 'd')) },
-                    { label: '交收期', value: formatValue(formatTime(data.deliverystartdate, 'd') + '--' + formatTime(data.deliveryenddate, 'd')) },
-                ];
-                getPriceInfo(price);
-            }
-        });
-        return {
-            baseInfo,
-            spotInfo,
-            priceInfo,
-            previewVisible,
-            previewImage,
-            cancelImg,
-            baseInfoClick,
-        };
-    },
+        price.push(...[
+          { label: '升贴水', value: formatValue(data.pricemove) },
+          { label: '点价期', value: formatValue(formatTime(data.startdate, 'd') + '--' + formatTime(data.enddate, 'd')) },
+          { label: '交收期', value: formatValue(formatTime(data.deliverystartdate, 'd') + '--' + formatTime(data.deliveryenddate, 'd')) },
+        ])
+        getPriceInfo(price);
+      }
+    });
+    return {
+      baseInfo,
+      spotInfo,
+      priceInfo,
+      previewVisible,
+      previewImage,
+      cancelImg,
+      baseInfoClick,
+    };
+  },
 });
 </script>
 

src/views/information/spot-contract/components/infoDetail/index.vue

@@ -41,7 +41,6 @@ export default defineComponent({
           { label: '业务员', value: formatValue(findManagerName(saleuserid, businessManager.value)) },
           { label: '跟单员', value: formatValue(findManagerName(meruserid, businessManager.value)) },
           { label: '交易用户', value: formatValue(tradeusername) },
-          { label: '备注', value: formatValue(remark) },
         ];
         getDesList(list);
       }

src/views/information/spot-contract/components/modify/index.vue

@@ -122,15 +122,6 @@
         <legend>价格信息</legend>
         <a-row :gutter="24">
           <a-col :span="12">
-            <a-form-item label="定价类型" name="PriceType">
-              <a-select class="inlineFormSelect" style="width: 200px" v-model:value="formState.PriceType" placeholder="请选择定价类型">
-                <a-select-option v-for="item in priceType" :key="item.key" :value="item.key">
-                  {{ item.value }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
             <a-form-item label="结算币种" name="CurrencyID">
               <a-select class="inlineFormSelect" v-model:value="formState.CurrencyID" style="width: 200px" placeholder="请选择结算币种">
                 <a-select-option v-for="item in payCurrency" :key="item.enumitemname" :value="item.enumitemname">
@@ -144,14 +135,31 @@
               <a-input class="dialogInput suffixGrey" v-model:value="formState.Qty" style="width: 200px" @change="getAmout" placeholder="请输入数量" :suffix="numberUnit" />
             </a-form-item>
           </a-col>
-          <a-col :span="12" v-if="formState.PriceType === 3">
-            <a-form-item label="暂定价">
-              <a-input class="dialogInput suffixGrey" style="width: 200px" :suffix="payCurrencyUnit" placeholder="请输入暂定价" />
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <a-range-picker v-model:value="deliveryDate" class="commonPicker" style="width: 200px" :disabled-date="disabledDate" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="定价类型" name="PriceType">
+              <a-select class="inlineFormSelect" style="width: 200px" v-model:value="formState.PriceType" placeholder="请选择定价类型">
+                <a-select-option v-for="item in priceType" :key="item.key" :value="item.key">
+                  {{ item.value }}
+                </a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
           <!-- 以下是点价的价格信息 start -->
           <template v-if="formState.PriceType === 2 || formState.PriceType === 3">
             <a-col :span="12">
+              <a-form-item label="点价类型">
+                <a-select class="inlineFormSelect" v-model:value="pricingType" style="width: 200px" placeholder="请选择点价类型" @change="pricingTypeChange">
+                  <a-select-option :value="0">现货</a-select-option>
+                  <a-select-option :value="1">期货</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12" v-if="pricingType === 1">
               <a-form-item label="点价合约" name="GoodsID">
                 <a-select class="inlineFormSelect" v-model:value="formState.GoodsID" style="width: 200px" placeholder="请选择点价合约">
                   <a-select-option v-for="item in goodsList" :key="item.goodsid" :value="item.goodsid">
@@ -160,6 +168,16 @@
                 </a-select>
               </a-form-item>
             </a-col>
+            <a-col :span="12" v-if="formState.PriceType === 3">
+              <a-form-item label="暂定价">
+                <a-input class="dialogInput suffixGrey" style="width: 200px" :suffix="payCurrencyUnit" placeholder="请输入暂定价" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="点价说明" name="Remark">
+                <a-input class="dialogInput" style="width: 608px" v-model:value="formState.Remark" placeholder="请输入点价说明" />
+              </a-form-item>
+            </a-col>
             <a-col :span="12">
               <a-form-item label="升贴水" name="PriceMove">
                 <a-input-number class="dialogInput suffixGrey" v-model:value="formState.PriceMove" placeholder="请输入升贴水" :min="0" :suffix="`${payCurrencyUnit}/${numberUnit}`" style="width: 200px" />
@@ -170,11 +188,6 @@
                 <a-range-picker v-model:value="priceDate" class="commonPicker" :disabled-date="disabledDate" style="width: 200px" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
               </a-form-item>
             </a-col>
-            <a-col :span="12">
-              <a-form-item label="交收期">
-                <a-range-picker v-model:value="deliveryDate" class="commonPicker" style="width: 200px" :disabled-date="disabledDate" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
-              </a-form-item>
-            </a-col>
           </template>
           <!-- 以上是点价的价格信息 end -->
           <template v-if="formState.PriceType === 1">
@@ -188,11 +201,6 @@
                 <a-input class="dialogInput suffixGrey" v-model:value="formState.Amount" readonly placeholder="输入数量和价格后自动算" :suffix="payCurrencyUnit" style="width: 200px" />
               </a-form-item>
             </a-col>
-            <a-col :span="24">
-              <a-form-item label="交收期">
-                <a-range-picker v-model:value="deliveryDate" style="width: 200px" class="commonPicker" :disabled-date="disabledDate" :show-time="{ hideDisabledOptions: true }" format="YYYY-MM-DD" />
-              </a-form-item>
-            </a-col>
           </template>
         </a-row>
       </fieldset>
@@ -230,13 +238,6 @@
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="备注" name="Remark">
-              <a-input class="dialogInput" style="width: 608px" v-model:value="formState.Remark" placeholder="请输入备注" />
-            </a-form-item>
-          </a-col>
-        </a-row>
       </fieldset>
     </a-form>
   </a-modal>
@@ -278,6 +279,7 @@ export default defineComponent({
   setup(props, context) {
     const { visible, cancel } = _closeModal(context);
     const loading = ref<boolean>(false);
+    const pricingType = ref(1); // 点价类型
     const { sendReq } = addContractReq();
     const { formState, businessType } = handleFromState(props.contractType);
     // 表单
@@ -332,6 +334,7 @@ export default defineComponent({
         wrStandardChange(wrstandardid);
       }
     }
+    pricingType.value = goodsid > 0 ? 1 : 0; // 点价类型
     formState.Qty = qty.toString();
     formState.Price = price.toString();
     formState.CurrencyID = currencyid;
@@ -355,6 +358,16 @@ export default defineComponent({
       formState.ContractAttachment = attachment;
       uploadImgList.value = handleImg(attachment);
     }
+
+    // 选择点价类型
+    const pricingTypeChange = (value: number) => {
+      if (value === 0) {
+        formState.GoodsID = 0;
+      } else {
+        formState.GoodsID = undefined;
+      }
+    }
+
     function submit() {
       validateAction<FormState>(formRef, formState).then((param) => {
         const id = getUserId();
@@ -401,6 +414,7 @@ export default defineComponent({
       submit,
       formRef,
       loading,
+      pricingType,
       maskClosableFlag: false,
       formState,
       rules,
@@ -408,6 +422,7 @@ export default defineComponent({
       contractType,
       isSell,
       contractChange,
+      pricingTypeChange,
       customList,
       deliveryGoodsList,
       barandList,

src/views/information/spot-contract/components/setup.ts

@@ -280,6 +280,7 @@ export function handleDeliveryGoods(formState: UnwrapRef<FormState>) {
 
     // 选择现货商品
     async function wrStandardChange(value: number) {
+        formState.GoodsID = undefined;
         await request;
         const wrstandard = wrstandardList.value.find((e) => e.wrstandardid === value);
         if (wrstandard) {

src/views/information/spot-contract/list/audit/index.vue

@@ -5,7 +5,7 @@
       <filterCustomTable @search="updateColumn"></filterCustomTable>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="columns" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="scroll">
+      <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="scroll">
         <!-- 额外的展开行 -->
         <!-- 额外的展开行 -->
         <template #expandedRowRender="{ record }">

src/views/manage/business-review/list/settlement/index.vue

@@ -5,7 +5,7 @@
       <Filter @search="updateColumn"></Filter>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="columns" class="topTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :scroll="scroll" :data-source="tableList">
+      <a-table :columns="columns" class="srcollYTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :scroll="scroll" :data-source="tableList">
         <!-- 额外的展开行 -->
         <template #expandedRowRender="{ record }">
           <mtp-table-button class="btn-list-sticky" :buttons="handlePermissionBtn(buttons, record)" :record="record" @click="openComponent" />

src/views/market/market-spot/goods-chart/chart/index.less

@@ -1,9 +1,6 @@
 .chart-container {
     [theme='light'] & {
         --bgcolor            : #fff;
-        --tab-border-color   : #dae5ec;
-        --tab-checked-color  : #0866b8;
-        --tab-checked-bgcolor: #d4e0ff;
         --slider-border-color: #b2c4dd;
         --slider-bgcolor     : #edf2f7;
         --slider-button-color: #b2c4dd;
@@ -19,60 +16,6 @@
     height          : calc(100% - 41px);
     background-color: var(--bgcolor, #0e0e0f);
 
-    .chart-content {
-        display       : flex;
-        flex-direction: column;
-        flex          : 1;
-        height        : 100%;
-        padding       : 10px 0;
-
-        &__main {
-            flex: 1;
-        }
-
-        &__header {
-            padding      : 4px 4%;
-            margin-bottom: 10px;
-        }
-
-        &__tabs {
-            &:last-child:not(:first-child) {
-                margin-left: 20px;
-            }
-
-            display         : inline-block;
-            background-color: transparent;
-            line-height     : normal;
-            border-bottom   : 0;
-            border          : 1px solid var(--tab-border-color, #22292c);
-            border-radius   : 1.02px;
-            border-right    : 0;
-            overflow        : hidden;
-            margin-top      : 0;
-
-            .ant-menu-item {
-                height       : 22px;
-                line-height  : 22px;
-                color        : #7a8a94;
-                border-bottom: 0;
-                border-right : 1px solid var(--tab-border-color, #22292c);
-                margin-top   : 0;
-                top          : 0;
-                padding      : 0 16px;
-
-                &::after {
-                    border: 0 !important;
-                }
-
-                &-active,
-                &-selected {
-                    color           : var(--tab-checked-color, #0866b8);
-                    background-color: var(--tab-checked-bgcolor, #0e2f4c);
-                }
-            }
-        }
-    }
-
     .chart-slider {
         display         : flex;
         justify-content : center;

src/views/market/market-spot/goods-chart/chart/index.vue

@@ -1,16 +1,8 @@
 <template>
   <!-- 交易图表  -->
   <div class="chart-container">
-    <div class="chart-content">
-      <div class="chart-content__header">
-        <mtp-tabbar theme="menu" :data="chartType" v-model:active="activeCycleType" @change="changeCycleType" />
-      </div>
-      <!-- K线  -->
-      <mtp-echarts-timeline class="chart-content__main" :goodscode="selectedRow.goodscode" @ready="getHistoryTikDatas" v-if="chartType[activeCycleType].code === CycleType.time" />
-      <!-- 分时线  -->
-      <mtp-echarts-kline class="chart-content__main" :cycle-type="activeCycleType" :goodscode="selectedRow.goodscode" v-else />
-      <div class="chart-content__footer"></div>
-    </div>
+    <!-- 图表  -->
+    <mtp-chart :goodscode="selectedRow.goodscode" @ready="getHistoryTikDatas" />
     <div class="chart-slider">
       <div class="chart-slider__button"></div>
     </div>
@@ -137,18 +129,13 @@ import { changeUnit } from '@/utils/qt/common';
 import { ComponentType } from '@/views/market/market-spot/spot_trade_order_transaction/setup';
 import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
 import moment from 'moment';
-import { CycleType } from '@/common/components/echarts/echarts-kline/type';
-import MtpEchartsKline from '@/common/components/echarts/echarts-kline/index.vue';
-import MtpEchartsTimeline from '@/common/components/echarts/echarts-timeline/index.vue';
-import MtpTabbar from '@/common/components/tabbar/index.vue';
+import MtpChart from '@/common/components/echarts/index.vue';
 
 export default defineComponent({
   emits: ['cancel', 'update'],
   name: 'stock-exchange',
   components: {
-    MtpEchartsKline,
-    MtpEchartsTimeline,
-    MtpTabbar,
+    MtpChart,
   },
   props: {
     selectedRow: {
@@ -162,29 +149,12 @@ export default defineComponent({
   },
   setup(props, context) {
     const { visible, cancel } = _closeModal(context),
-      activeCycleType = ref(0), // 当前选中的图表周期
       tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
 
     function watchMore() {
       context.emit('update', ComponentType.marketContent);
     }
 
-    // 周期类型
-    const chartType = [
-      { code: CycleType.time, label: '分时' },
-      { code: CycleType.minutes, label: '1分钟' },
-      { code: CycleType.minutes5, label: '5分钟' },
-      { code: CycleType.minutes30, label: '30分钟' },
-      { code: CycleType.minutes60, label: '60分钟' },
-      { code: CycleType.Hours4, label: '4小时' },
-      { code: CycleType.days, label: '日K' },
-    ];
-
-    // 切换图表周期类型
-    const changeCycleType = (index: number) => {
-      activeCycleType.value = index;
-    };
-
     // Tik列表
     const getHistoryTikDatas = (startTime: string, endTime: string) => {
       const param = {
@@ -227,10 +197,7 @@ export default defineComponent({
     return {
       cancel,
       visible,
-      chartType,
       tradedList,
-      CycleType,
-      activeCycleType,
       changeUnit,
       watchMore,
       formatTime,
@@ -238,7 +205,6 @@ export default defineComponent({
       handleNoneValue,
       quoteAmplitude,
       handleQuotePriceColor,
-      changeCycleType,
       getHistoryTikDatas,
     };
   },

src/views/market/market-spot/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/index.vue

@@ -1,13 +1,6 @@
 <template>
   <!-- 挂牌求购 -->
-  <a-drawer
-    placement="right"
-    :closable="false"
-    :visible="visible"
-    :width="1052"
-    :destroyOnClose="true"
-    class="post-buying-container"
-  >
+  <a-drawer placement="right" :closable="false" :visible="visible" :width="1052" :destroyOnClose="true" class="post-buying-container">
     <div class="collapse">
       <div class="collapse-close" @click="cancelAction">
         <DoubleRightOutlined />
@@ -25,75 +18,50 @@
           <span @click="changeDirection">{{ isBuy() ? '卖出' : '求购' }}</span>
         </div>
         <a-row>
-          <a-col :span="12">
+          <a-col :span="14">
             <div class="post_buying_chart">
               <div class="buying_chart__nav">
                 <div class="content--left">{{ selectedRow.goodscode }}</div>
                 <div class="content--right">{{ selectedRow.goodsname }}</div>
               </div>
               <div class="chart-tips__last">
-                <div
-                  :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]"
-                >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
+                <div :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
                 <div class="content--right">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
-                  >{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
-                  >{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
                 </div>
               </div>
               <a-row>
                 <a-col :span="4" :offset="2">最高价</a-col>
                 <a-col :span="6">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')"
-                  >{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
                 </a-col>
                 <a-col :span="4" :offset="2">开盘价</a-col>
                 <a-col :span="6">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')"
-                  >{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
                 </a-col>
               </a-row>
               <a-row>
                 <a-col :span="4" :offset="2">最低价</a-col>
                 <a-col :span="6">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')"
-                  >{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
                 </a-col>
                 <a-col :span="4" :offset="2">昨结价</a-col>
                 <a-col :span="6">{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
               </a-row>
-              <div class="chart-content">
-                <Chart
-                  :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)"
-                  :showExchange="false"
-                />
-              </div>
+              <!-- 图表  -->
+              <mtp-chart class="chart-content" :goodscode="selectedRow.refgoodscode" :show-indicator="false" />
             </div>
           </a-col>
-          <a-col :span="12">
+          <a-col :span="10">
             <div class="post_buying">
               <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
                 <div class="formBar">
                   <a-row :gutter="24">
                     <a-col :span="24">
                       <a-form-item label="贸易账户" name="accountid">
-                        <a-select
-                          class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.accountid"
-                          placeholder="请选择"
-                        >
-                          <a-select-option
-                            v-for="item in accountList"
-                            :value="item.accountid"
-                            :key="item.accountid"
-                          >{{ item.accountid }}</a-select-option>
+                        <a-select class="inlineFormSelect" style="width: 260px" v-model:value="formState.accountid" placeholder="请选择">
+                          <a-select-option v-for="item in accountList" :value="item.accountid" :key="item.accountid">{{ item.accountid }}</a-select-option>
                         </a-select>
                       </a-form-item>
                     </a-col>
@@ -109,30 +77,19 @@
                     </a-col>
                     <a-col :span="24">
                       <a-form-item label="参考价">
-                        <span
-                          :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
-                        >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
+                        <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-if="!isFloat()">
                       <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
-                        <a-input-number
-                          class="commonInput"
-                          style="width: 260px"
-                          :min="0"
-                          v-model:value="formState.FixedPrice"
-                        />
+                        <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.FixedPrice" />
                         <MinusOutlined @click="decreasePrice" />
                         <PlusOutlined @click="increasePrice" />
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-else>
                       <a-form-item label="点差" name="PriceMove">
-                        <a-input-number
-                          class="commonInput"
-                          style="width: 260px"
-                          v-model:value="formState.PriceMove"
-                        />
+                        <a-input-number class="commonInput" style="width: 260px" v-model:value="formState.PriceMove" />
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-if="isFloat()">
@@ -143,13 +100,7 @@
 
                     <a-col :span="24">
                       <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
-                        <a-input-number
-                          class="commonInput"
-                          style="width: 260px"
-                          :min="0"
-                          :max="getMaxNum()"
-                          v-model:value="formState.OrderQty"
-                        />
+                        <a-input-number class="commonInput" style="width: 260px" :min="0" :max="getMaxNum()" v-model:value="formState.OrderQty" />
                         <MinusOutlined @click="decreaseNum" />
                         <PlusOutlined @click="increaseNum" />
                         <span class="input-enumdicname">{{ selected.enumdicname }}</span>
@@ -157,12 +108,7 @@
                     </a-col>
                     <a-col :span="24" class="mt-10">
                       <a-form-item>
-                        <a-slider
-                          :min="0"
-                          v-model:value="formState.OrderQty"
-                          :max="getMaxNum()"
-                          class="formSlider"
-                        />
+                        <a-slider :min="0" v-model:value="formState.OrderQty" :max="getMaxNum()" class="formSlider" />
                         <div class="unit">
                           <span>{{ getMaxNum() ? selected.minivalue : 0 }}</span>
                           <span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
@@ -189,12 +135,7 @@
                 <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"
-                      >{{ isBuy() ? '买入' : '卖出' }}</a-button>
+                      <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">{{ isBuy() ? '买入' : '卖出' }}</a-button>
                       <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
                     </a-form-item>
                   </a-col>
@@ -232,7 +173,7 @@ import { QueryTjmdTodayAccountMarginReq } from '@/services/go/Tjmd/interface';
 import { diaoQiOrder } from '@/services/socket/order';
 import { OrderReq } from '@/services/socket/order/interface';
 import Bus from '@/utils/eventBus';
-import Chart from '@/views/market/market-spot/goods-chart/index.vue';
+import MtpChart from '@/common/components/echarts/index.vue';
 import { DoubleRightOutlined, LineChartOutlined, MinusOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons-vue';
 import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
@@ -245,7 +186,9 @@ import { handleForm, isFloat, useBuySellDirection, useChart, useNum, usePrice }
 export default defineComponent({
   emits: ['cancel', 'update'],
   name: ModalEnum.spot_trade_warehouse_post_buying,
-  components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined, Chart },
+  components: {
+    Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined, MtpChart
+  },
   props: {
     selectedRow: {
       type: Object as PropType<RefGoodsList>,
@@ -426,267 +369,255 @@ export default defineComponent({
 
 <style lang="less">
 .post-buying-container {
-  top: 101px;
-  .ant-drawer-content-wrapper {
-    height: 605px;
-  }
+    top: 101px;
+    .ant-drawer-content-wrapper {
+        height: 510px;
+    }
 }
 .chart-content {
-  height: 400px;
-
-  .chart-content__header,
-  .chart-content__main {
-    width: 90% !important;
-    margin: auto !important;
-  }
-
-  .chart-slider {
-    display: none;
-  }
+    height: 305px;
+    .mtp-echarts {
+        width: 95% !important;
+    }
 }
 .formBar {
-  height: 100%;
-  max-height: 100%;
+    height: 100%;
 }
 .post_buying_chart {
-  [theme="light"] & {
-    --bgcolor: #fff;
-    --tab-border-color: #dae5ec;
-    --tab-checked-color: #0866b8;
-    --tab-checked-bgcolor: #d4e0ff;
-    --slider-border-color: #b2c4dd;
-    --slider-bgcolor: #edf2f7;
-    --slider-button-color: #b2c4dd;
-    --row-border-color: #dae5ec;
-    --row-title-color: #acb8c0;
-    --row-content-color: #3c454b;
-    --tik-title-bgcolor: #ecf2f5;
-    --tik-title-color: #7a8a94;
-  }
-  color: @m-grey67;
+    [theme='light'] & {
+        --bgcolor: #fff;
+        --tab-border-color: #dae5ec;
+        --tab-checked-color: #0866b8;
+        --tab-checked-bgcolor: #d4e0ff;
+        --slider-border-color: #b2c4dd;
+        --slider-bgcolor: #edf2f7;
+        --slider-button-color: #b2c4dd;
+        --row-border-color: #dae5ec;
+        --row-title-color: #acb8c0;
+        --row-content-color: #3c454b;
+        --tik-title-bgcolor: #ecf2f5;
+        --tik-title-color: #7a8a94;
+    }
+    color: @m-grey67;
 
-  // background-color: var(--bgcolor, #0e0e0f);
+    // background-color: var(--bgcolor, #0e0e0f);
 
-  // background: @m-blue37;
-  // color: @m-grey67;
-  .buying_chart {
-    display: flex;
+    // background: @m-blue37;
+    // color: @m-grey67;
+    .buying_chart {
+        display: flex;
 
-    // background-color: @m-blue36;
-    &__nav {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+        // background-color: @m-blue36;
+        &__nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-      .content {
-        &:first-child:not(:last-child) {
-          margin-right: 16px;
-        }
+            .content {
+                &:first-child:not(:last-child) {
+                    margin-right: 16px;
+                }
 
-        &--left {
-          font-size: 16px;
-          color: var(--row-content-color, #acb8c0);
-          margin-right: 6px;
-        }
+                &--left {
+                    font-size: 16px;
+                    color: var(--row-content-color, #acb8c0);
+                    margin-right: 6px;
+                }
 
-        &--right {
-          font-size: 24px;
-          color: #fc9618;
+                &--right {
+                    font-size: 24px;
+                    color: #fc9618;
+                }
+            }
         }
-      }
     }
-  }
-  .chart-tips {
-    display: flex;
-    flex-direction: column;
-    width: 300px;
-    height: 100%;
+    .chart-tips {
+        display: flex;
+        flex-direction: column;
+        width: 300px;
+        height: 100%;
 
-    &__last {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 16px 0;
-      .content {
-        &--left {
-          font-size: 24px;
-          margin-right: 16px;
-        }
+        &__last {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16px 0;
+            .content {
+                &--left {
+                    font-size: 24px;
+                    margin-right: 16px;
+                }
 
-        &--right {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
+                &--right {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+            }
         }
-      }
     }
-  }
 }
 .post_buying {
-  width: 100%;
-  height: 100%;
-  .flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-
-  .ant-form {
-    height: 100%;
-  }
-  .condition {
     width: 100%;
-    height: 48px;
-    margin: 0 16px;
-    padding: 10px 0;
-    border-bottom: 1px solid @m-black6;
-    .inlineflex;
-    .conditionBtn {
-      align-self: center;
-      align-items: center;
-      border: 0;
-      min-width: 80px;
-      height: 28px;
-      line-height: 28px;
-      background: @m-black7;
-      .rounded-corners(3px);
-      font-size: 14px;
-      color: @m-blue0;
-      &:hover {
-        background: @m-black7-hover;
-        color: @m-blue0-hover;
-      }
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+
+    .ant-form {
+        height: 100%;
+    }
+    .ant-form.dialogForm .ant-row.ant-form-item {
+        margin-bottom: 10px;
     }
-    .conditionBtn + .conditionBtn {
-      margin-left: 10px;
+    .condition {
+        width: 100%;
+        height: 48px;
+        margin: 0 16px;
+        padding: 10px 0;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            min-width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: @m-black7-hover;
+                color: @m-blue0-hover;
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
     }
-  }
 }
 .title_right {
-  color: @m-blue25;
-  position: absolute;
-  top: 8px;
-  right: 19px;
-  cursor: pointer;
-  display: flex;
-  .tline {
-    width: 1px;
-    height: 18px;
-    background: @m-black47;
-    margin-top: 2px;
-    box-shadow: 1px 0px 0px 0px @m-black48;
-  }
-  .icon {
-    font-size: 16px;
-    height: 16px;
-    line-height: 16px;
-    margin: 3px 7px 3px 17px;
-    fill: @m-blue25;
-  }
-  span {
-    font-size: 14px;
-    font-family: Adobe Heiti Std;
-    font-weight: normal;
-  }
+    color: @m-blue25;
+    position: absolute;
+    top: 8px;
+    right: 19px;
+    cursor: pointer;
+    display: flex;
+    .tline {
+        width: 1px;
+        height: 18px;
+        background: @m-black47;
+        margin-top: 2px;
+        box-shadow: 1px 0px 0px 0px @m-black48;
+    }
+    .icon {
+        font-size: 16px;
+        height: 16px;
+        line-height: 16px;
+        margin: 3px 7px 3px 17px;
+        fill: @m-blue25;
+    }
+    span {
+        font-size: 14px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+    }
 }
 .unit {
-  margin-left: 70px;
-  width: 260px;
-  .flex;
-  justify-content: space-between;
-  font-size: 14px;
-  color: @m-grey41;
-  height: 14px;
-  line-height: 14px;
+    margin-left: 70px;
+    width: 260px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey41;
+    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;
-  }
+    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%) !important;
-  &:hover {
-    background: linear-gradient(
-      0deg,
-      @m-grey12-hover 0%,
-      @m-grey13-hover 100%
-    ) !important;
-    color: @m-white0-hover;
-  }
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
+        color: @m-white0-hover;
+    }
 }
 .ml10 {
-  margin-left: 10px;
-}
-.ant-form.dialogForm .ant-row.ant-form-item {
-  margin-bottom: 14px;
+    margin-left: 10px;
 }
 .mt20 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 .mt-10 {
-  margin-top: -10px;
+    margin-top: -10px;
 }
 .ant-input-suffix {
-  position: absolute;
-  right: -25px;
+    position: absolute;
+    right: -25px;
 }
 .minusBtn,
 .plusBtn {
-  width: 15px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 15px;
-  color: @m-blue15;
-  cursor: pointer;
+    width: 15px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+    color: @m-blue15;
+    cursor: pointer;
 }
 .minusBtn {
-  position: absolute;
-  top: -6px;
-  left: 14px;
-  z-index: 1;
+    position: absolute;
+    top: -6px;
+    left: 14px;
+    z-index: 1;
 }
 .plusBtn {
-  position: absolute;
-  top: -6px;
-  right: 14px;
-  z-index: 1;
+    position: absolute;
+    top: -6px;
+    right: 14px;
+    z-index: 1;
 }
 .stepper {
-  padding-left: 30px;
-  padding-right: 30px;
-  text-align: center;
-  color: @m-yellow1;
-  font-size: 16px;
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+    color: @m-yellow1;
+    font-size: 16px;
 }
 .ant-slider.formSlider {
-  width: 260px !important;
-  margin-left: 70px;
-  .ant-slider-rail {
-    margin-right: 0;
-    padding-right: 0;
-    height: 3px !important;
-    border-radius: 2px !important;
-    background-color: @m-blue14;
-  }
-  .ant-slider-track {
-    height: 3px;
-    background-color: @m-blue0;
-  }
-  .ant-slider-step {
-    height: 3px;
-  }
-  .ant-progress-text {
-    display: none;
-  }
+    width: 260px !important;
+    margin-left: 70px;
+    .ant-slider-rail {
+        margin-right: 0;
+        padding-right: 0;
+        height: 3px !important;
+        border-radius: 2px !important;
+        background-color: @m-blue14;
+    }
+    .ant-slider-track {
+        height: 3px;
+        background-color: @m-blue0;
+    }
+    .ant-slider-step {
+        height: 3px;
+    }
+    .ant-progress-text {
+        display: none;
+    }
 }
 </style>

src/views/search/inventory/list/inventory_current/index.vue

@@ -7,19 +7,18 @@
       </Filter>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="columns" class="topTable" :scroll="scroll" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList"></a-table>
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList"></a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"></a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab"></mtp-table-detail>
   <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
 import { ref } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 import { queryTableList, MtpTableButton, contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
 import Filter from '../../components/filterTable/index.vue';
 import { QueryAreaStockApply } from '@/services/go/ermcp/search-inventory/index';
@@ -30,8 +29,7 @@ import Description from '@/common/components/description/index.vue';
 import { ComposeTableDetailParam } from '@/common/setup/table/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { handleComposeTable_detail } from '@/common/setup/table/compose';
-import { TabList } from '@/common/components/description/interface';
-import { watchEffect } from 'vue';
+import { watch } from 'vue';
 import { getTableButton } from '@/common/setup/table/button';
 import { getDetailColumns } from './setup';
 import { ColumnType } from '@/common/methods/table';
@@ -40,6 +38,7 @@ export default defineComponent({
   name: 'inventory_current',
   components: {
     MtpTableScroll,
+    MtpTableDetail,
     Filter,
     contextMenu,
     add: defineAsyncComponent(() => import('../../components/add/index.vue')),
@@ -52,12 +51,20 @@ export default defineComponent({
     // 底部明细标签
     const tabList = getTableButton(['add'], true);
     const columnsDetail = ref<ColumnType[]>([]);
+    // 控制明细显示/隐藏
+    const visible = ref(true);
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 表格列表数据
-    const { loading, tableList, queryTable } = queryTableList();
+    const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaStock>();
 
     // 获取列表数据
-    const queryTableAction = () => queryTable(QueryAreaStock);
+    const queryTableAction = () => queryTable(QueryAreaStock).then((res) => {
+      if (res.length) {
+        selectedRow.value = res[0];
+      }
+    });
 
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -67,7 +74,6 @@ export default defineComponent({
     };
 
     const {
-      visible,
       closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
@@ -81,8 +87,9 @@ export default defineComponent({
     } = handleComposeTable_detail<Ermcp3AreaStock>(param);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       columnsDetail.value = getDetailColumns(code);
       switch (code) {
         case 'inventory_manager_inbound_details':
@@ -102,13 +109,13 @@ export default defineComponent({
       }
     }
 
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
 
     return {
       loading,