Merge branch 'master' of http://47.101.159.18:3000/Muchinfo/MTP20_WEB_GLOBAL

src/business/performance/index.ts

@@ -71,7 +71,9 @@ export function usePerformanceManualConfirm(buyaccountid: number) {
 export function usePerformanceModifyContact() {
     const loading = shallowRef(false)
 
-    const formData = ref<Partial<Proto.PerformanceModifyContactReq>>({ })
+    const formData = ref<Partial<Proto.PerformanceModifyContactReq>>({ 
+        AccountID: accountStore.accountId
+    })
 
     const formSubmit = async () => {
         try {
@@ -119,4 +121,4 @@ export function usePerformanceDelayApply() {
         formData,
         formSubmit,
     }
-}
+}

src/packages/mobile/views/order/performance/components/modify/Index.vue

@@ -130,8 +130,8 @@ const contracted = () => {
         formData.value.PerformancePlanID = props.selectedRow.performanceplanid
         /// Json String
         const json =  {
-            ContactInfo: '${Contract.value}',
-            ReceiveInfo: '${Receive.value}',
+            ContactInfo: `${Contract.value}`,
+            ReceiveInfo: `${Receive.value}`,
             ReceiptInfo: `${Receipt.value}`
         }
         formData.value.ContactInfo= JSON.stringify(json)

src/packages/mobile/views/order/position/components/goods/list/Index.vue

@@ -65,7 +65,7 @@ import { queryTradePosition } from '@/services/api/order'
 import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
 import { getBuyOrSellName, BuyOrSell } from '@/constants/order'
 import { formatDecimal, handleNumberValue } from '@/filters'
-import { useUserStore, useFuturesStore } from '@/stores'
+import { useFuturesStore } from '@/stores'
 import { getAmountColor } from '@/utils/vant';
 
 const componentMap = new Map<string, unknown>([
@@ -73,7 +73,6 @@ const componentMap = new Map<string, unknown>([
     ['delivery', defineAsyncComponent(() => import('../delivery/Index.vue'))]
 ])
 
-const userStore = useUserStore()
 const futuresStore = useFuturesStore()
 
 const dataList = shallowRef<Model.TradePositionRsp[]>([])

src/packages/pc/components/base/table-details/index.less

@@ -0,0 +1,26 @@
+.app-table-details {
+    &:not(:first-child) {
+        margin-top: 20px;
+    }
+
+    >table {
+        table-layout: fixed;
+        border-collapse: collapse;
+
+        th,
+        td {
+            border: 0 solid #ebeef5;
+            padding: 6px 10px;
+        }
+
+        th {
+            color: #666;
+            font-weight: normal;
+            vertical-align: top;
+        }
+
+        td {
+            vertical-align: top;
+        }
+    }
+}

src/packages/pc/components/base/table-details/index.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="app-table-details g-details">
+        <div class="g-details__title">
+            <slot name="title">
+                {{ title }}
+            </slot>
+        </div>
+        <table cellspacing="0" cellpadding="0" :style="tableStyle">
+            <tbody>
+                <tr v-for="(items, i) in cellGroup" :key="i">
+                    <template v-for="(item, n) in items" :key="n">
+                        <th :style="labelStyle">
+                            <slot :name="item.prop + 'Label'">
+                                {{ item.label }}
+                            </slot>
+                        </th>
+                        <td :colspan="(column * 2 - items.length * 2) + 1" :style="valueStyle">
+                            <slot :name="item.prop" :value="data[item.prop]">
+                                {{ handleValue(item) }}
+                            </slot>
+                        </td>
+                    </template>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue'
+import { handleNoneValue } from '@/filters'
+
+interface cellProp {
+    prop: string;
+    label: string;
+    decimal?: number; // 保留小数点位数
+    entireRow?: boolean; // 是否整行显示
+    hideEmpty?: boolean; // 是否隐藏空值
+}
+
+const props = defineProps({
+    title: String,
+    data: {
+        type: Object,
+        required: true
+    },
+    cellProps: {
+        type: Array as PropType<cellProp[]>,
+        required: true
+    },
+    column: {
+        type: Number,
+        default: 1
+    },
+    width: {
+        type: [String, Number],
+        default: '100%'
+    },
+    // 标签宽度
+    labelWidth: {
+        type: Number,
+        default: 0
+    },
+    // 标签对齐方式
+    labelAlign: {
+        type: String as PropType<'left' | 'center' | 'right'>,
+        default: 'right'
+    },
+    // 边框大小
+    borderWidth: {
+        type: Number,
+        default: 0
+    },
+})
+
+const cellGroup = computed(() => {
+    // const result = []
+    // let index = 0
+    // // 一维数组转换成二维数组
+    // while (index < props.cellProps.length) {
+    //     const group = props.cellProps.slice(index, index += props.column)
+    //     result.push(group)
+    // }
+    return props.cellProps.reduce((pre, cur) => {
+        const last = pre[pre.length - 1]
+        if (last) {
+            if (cur.entireRow || last.length === props.column) {
+                pre[pre.length] = [cur]
+            } else {
+                last.push(cur)
+            }
+        } else {
+            pre[0] = [cur]
+        }
+        return pre
+    }, [] as cellProp[][])
+})
+
+const tableStyle = computed(() => ({
+    width: typeof props.width === 'number' ? props.width + 'px' : props.width
+}))
+
+const valueStyle = computed(() => ({
+    borderWidth: props.borderWidth + 'px',
+}))
+
+const labelStyle = computed(() => ({
+    width: props.labelWidth ? props.labelWidth + 'px' : 'fit-content',
+    textAlign: props.labelAlign,
+    ...valueStyle.value,
+}))
+
+const handleValue = (cell: cellProp) => {
+    const value = props.data[cell.prop]
+    if (Number.isFinite(value) && cell.decimal) {
+        return value.toFixed(cell.decimal)
+    }
+    return handleNoneValue(value)
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/views/footer/goods/delivery/index.vue

@@ -29,6 +29,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'deliveryinfo', label: '交收信息' },
     { prop: 'orderstatusdisplay', label: '状态' },
     { prop: 'deliveryorderid', label: '交收单号' },
+    { prop: 'matchusername', label: '对手方' },
     { prop: 'reqtime', label: '申请时间' }
 ])
 </script>

src/packages/pc/views/footer/goods/order/cancel/index.vue

@@ -33,11 +33,10 @@ const onCancel = (isRefresh = false) => {
 }
 
 const onCancelSumit = () => {
-    const { wrtradeorderid, buyorsell, marketid} = props.selectedRow
+    const { orderid, marketid} = props.selectedRow
     ///  参数信息
     formData.Header = { MarketID: marketid }
-    formData.OldWRTradeOrderID = wrtradeorderid
-    formData.BuyOrSell = buyorsell
+    formData.OldOrderId = orderid
     /// 提交
     cancelSubmit().then(() => {
         ElMessage.success('提交成功')

src/packages/pc/views/footer/goods/order/index.vue

@@ -16,7 +16,7 @@
         <!-- 展开行 -->
         <template #expand="{ row }">
             <div class="buttonbar">
-                <el-button type="danger" size="small" @click="showComponent('cancel', row)">撤销</el-button>
+                <el-button type="danger" v-if="[3, 7].includes(row.orderstatus)" size="small" @click="showComponent('cancel', row)">撤销</el-button>
             </div>
         </template>
     </app-table>
@@ -44,7 +44,8 @@ defineProps({
 
 const { loading, dataList, run } = useRequest(queryTradeOrderDetail, {
     params: {
-        tradeMode: '50'
+        tradeMode: '50',
+        orderStatus: '3,7',
     },
 })
 

src/packages/pc/views/footer/goods/position/components/delivery/index.vue

@@ -32,7 +32,7 @@
                 </template>
             </el-form-item>
             <el-form-item prop="DeliveryLot" label="交收数量">
-                <el-input-number placeholder="请输入数量" v-model="formData.DeliveryLot" :max="selectedRow.enableqty" min="0" />
+                <el-input-number placeholder="请输入数量" v-model="formData.DeliveryLot" :max="selectedRow.enableqty" :min="0" />
             </el-form-item>
             <el-form-item prop="DeliveryInfo" label="交收信息">
                 <el-input placeholder="请输入交收信息" v-model="formData.DeliveryInfo" />

src/packages/pc/views/footer/goods/position/components/transfer/index.vue

@@ -30,7 +30,7 @@
                 </template>
             </el-form-item>
             <el-form-item prop="OrderQty" label="转让数量">
-                <el-input-number placeholder="请输入数量" v-model="formData.OrderQty" :max="selectedRow.enableqty" min="0" />
+                <el-input-number placeholder="请输入数量" v-model="formData.OrderQty" :max="selectedRow.enableqty" :min="0" />
             </el-form-item>
             <el-form-item prop="OrderPrice" label="转让价格">
                 <el-input-number placeholder="请输入价格" v-model="formData.OrderPrice" :decimal-length="selectedRow.decimalplace" />
@@ -38,7 +38,7 @@
         </el-form>
         <template #footer>
             <el-button type="primary" @click="onCloseSumit">提交</el-button>
-            <el-button type="danger" @click="onCancel(false)">取消</el-button>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
         </template>
     </app-drawer>
 </template>

src/packages/pc/views/footer/goods/position/index.vue

@@ -5,6 +5,14 @@
         <template #buyorsell="{ value }">
             {{ getBuyOrSellName(value) }}
         </template>
+        <!-- 最新价 -->
+        <template #last="{ row }">
+            {{ last(row) }}
+        </template>
+        <!-- 浮动盈亏-->
+        <template #closepl="{ row }">
+            <span :class="lastColor(row.goodscode)">{{ closepl(row) }}</span>
+        </template>
          <!-- 展开行 -->
          <template #expand>
             <div class="buttonbar">
@@ -20,12 +28,30 @@
 <script lang="ts" setup>
 import { shallowRef, defineAsyncComponent } from 'vue'
 import { useRequest } from '@/hooks/request'
-import { getBuyOrSellName } from '@/constants/order'
+import { getBuyOrSellName, BuyOrSell } from '@/constants/order'
 import { useComponent } from '@/hooks/component'
 import { useComposeTable } from '@pc/components/base/table'
 import { queryTradePosition } from '@/services/api/order'
+import { useFuturesStore } from '@/stores'
 import AppTable from '@pc/components/base/table/index.vue'
 
+const futuresStore = useFuturesStore()
+
+const last = (goodsCode: string) => {
+    return futuresStore.getQuotePrice(goodsCode)
+}
+
+const lastColor = (goodsCode: string) => {
+    return futuresStore.getQuoteInfo(goodsCode).value?.lastColor
+}
+
+/// 计算参考损益
+const closepl = (item: Model.TradePositionRsp) => {
+    const { last = 0 } = futuresStore.getQuoteInfo(item.goodscode).value ?? {}
+    const { curpositionqty, curholderamount, agreeunit, buyorsell } = item
+    return (last * curpositionqty * agreeunit - curholderamount) * (buyorsell === BuyOrSell.Buy ? 1 : -1)
+}
+
 const componentMap = new Map<string, unknown>([
     ['delivery', defineAsyncComponent(() => import('./components/delivery/index.vue'))],
     ['transfer', defineAsyncComponent(() => import('./components/transfer/index.vue'))],
@@ -54,11 +80,11 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'enableqty', label: '可用数量' },
     { prop: 'frozenqty', label: '冻结数量' },
     { prop: 'averageprice', label: '均价' },
-    { prop: 'unknown', label: '现价' },
+    { prop: 'last', label: '现价' },
     { prop: 'curholderamount', label: '持仓金额' },
     { prop: 'usedmargin', label: '占用保证金' },
     { prop: 'marketamount', label: '市值' },
-    { prop: 'unknown', label: '浮动盈亏' },
+    { prop: 'closepl', label: '浮动盈亏' },
 ])
 
 </script>

src/packages/pc/views/footer/performance/buy/index.vue

@@ -1,6 +1,6 @@
 <!-- 资金流水-卖履约-执行中 -->
 <template>
-    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey" :expand-row-keys="expandKeys"  @row-click="rowClick">
          <!-- 履约状态 -->
          <template #performancestatus="{ value }">
             {{ getPerformanceStatusName(value) }}
@@ -17,18 +17,51 @@
         <template #starttime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <!-- 展开行 -->
+        <template #expand="{ row }">
+            <div class="buttonbar">
+                <el-button type="danger" size="small" v-if="row.buyorsell===row.executeside-1" @click="showComponent('manual', row)">手动确认</el-button>
+                <el-button type="warning" size="small" v-if="row.buyorsell===row.executeside-1" @click="showComponent('delay', row)">延期</el-button>
+                <el-button type="primary" size="small" v-if="![6, 7].includes(row.performancestatus)" @click="showComponent('contracted', row)">违约</el-button>
+                <el-button type="info" v-if="![6, 7].includes(row.performancestatus)" size="small" @click="showComponent('edit', row)">修改</el-button>
+                <el-button type="success" size="small" @click="showComponent('details', row)">详细</el-button>
+            </div>
+        </template>
     </app-table>
+    <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
+            v-if="componentId" />
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent} from 'vue'
 import { formatDate } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { queryPerformancePlan } from '@/services/api/performance'
 import { BuyOrSell, getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/constants/order'
+import { useComposeTable } from '@pc/components/base/table'
+import { useComponent } from '@/hooks/component'
 import AppTable from '@pc/components/base/table/index.vue'
 
-const { loading, dataList } = useRequest(queryPerformancePlan, {
+const componentMap = new Map<string, unknown>([
+    ['manual', defineAsyncComponent(() => import('../components/manual/index.vue'))],
+    ['details', defineAsyncComponent(() => import('../components/details/index.vue'))],
+    ['contracted', defineAsyncComponent(() => import('../components/contracted/index.vue'))],
+    ['delay', defineAsyncComponent(() => import('../components/delay/index.vue'))],
+    ['edit', defineAsyncComponent(() => import('../components/edit/index.vue'))],
+])
+
+defineProps({
+    code: String
+})
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    run()
+})
+
+const { rowKey, expandKeys, rowClick } = useComposeTable<Model.PerformancePlanRsp>({ rowKey: 'performanceplanid' })
+const selectedRow = shallowRef<Model.PerformancePlanRsp>()
+
+const { loading, dataList, run } = useRequest(queryPerformancePlan, {
     params: {
         buyorsell: BuyOrSell.Buy,
         status:'2'
@@ -49,7 +82,11 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'buyusername', label: '买方' },
     { prop: 'performancestatus', label: '履约状态' },
     { prop: 'curstepname', label: '当前步骤' },
-    { prop: 'starttime', label: '开始时间' },
-    
+    { prop: 'starttime', label: '开始时间' }
 ])
+
+const showComponent = (componentName: string, row: Model.PerformancePlanRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
 </script>

src/packages/pc/views/footer/performance/components/contracted/index.vue

@@ -0,0 +1,81 @@
+<!-- 订单管理-我的履约-违约申请 -->
+<template>
+    <app-drawer title="违约申请" :width="480" v-model:show="show" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" label-width="80px" :model="formData" :rules="formRules">
+            <el-form-item label="关联单号">
+                <span>{{ handleNoneValue(selectedRow.relatedorderid) }}</span>
+            </el-form-item>
+            <el-form-item label="当前步骤">
+                <span>{{ handleNumberValue(getPerformanceStepStatusName(selectedRow.steptypeid)) }}</span>
+            </el-form-item>
+            <el-form-item label="备注" prop="ApplyRemark">
+                <el-input type="textarea" :rows="3" v-model="formData.ApplyRemark" />
+            </el-form-item>
+            <el-form-item label="附件" prop="Attachment">
+                <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="onUploadChange" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="onCancel(false)" plain>取消</el-button>
+            <el-button type="primary" @click="onSubmit">确认</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { handleNoneValue, handleNumberValue } from '@/filters'
+import { getPerformanceStepStatusName } from '@/constants/order'
+import { usePerformanceContractedApply } from '@/business/performance'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+import AppUpload from '@pc/components/base/upload/index.vue'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.PerformancePlanRsp>,
+        default: () => ({})
+    }
+})
+
+const { loading, formData, formSubmit } = usePerformanceContractedApply(props.selectedRow.buyaccountid)
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+
+const formRules: FormRules = {
+    Attachment: [{
+        required: true,
+        validator: (rule, value, callback) => {
+            if (formData.Attachment) {
+                callback()
+            } else {
+                callback(new Error('请上传附件'))
+            }
+        }
+    }],
+}
+
+const onUploadChange = (file: { filePath: string }) => {
+    formData.Attachment = file.filePath
+    formRef.value?.validateField('Attachment')
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            formSubmit().then(() => {
+                ElMessage.success('提交成功')
+                onCancel(true)
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+</script>

src/packages/pc/views/footer/performance/components/delay/index.vue

@@ -0,0 +1,68 @@
+<!-- 订单管理-我的履约-延期申请 -->
+<template>
+    <app-drawer title="延期申请" :width="480" v-model:show="show" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" label-width="110px" :model="formData" :rules="formRules">
+            <el-form-item label="关联单号">
+                <span>{{ handleNoneValue(selectedRow.relatedorderid) }}</span>
+            </el-form-item>
+            <el-form-item label="当前步骤">
+                <span>{{ handleNumberValue(getPerformanceStepStatusName(selectedRow.steptypeid)) }}</span>
+            </el-form-item>
+            <el-form-item label="申请延期天数" prop="delaydays">
+                <el-input type="number" placeholder="请输入" v-model="formData.delaydays" />
+            </el-form-item>
+            <el-form-item label="备注" prop="applyremark">
+                <el-input type="textarea" :rows="3" v-model="formData.applyremark" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="onCancel(false)" plain>取消</el-button>
+            <el-button type="primary" @click="onSubmit">确认</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { handleNoneValue, handleNumberValue } from '@/filters'
+import { getPerformanceStepStatusName } from '@/constants/order'
+import { usePerformanceDelayApply } from '@/business/performance'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.PerformancePlanRsp>,
+        default: () => ({})
+    }
+})
+
+const { loading, formData, formSubmit } = usePerformanceDelayApply()
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+
+const formRules: FormRules = {
+    delaydays: [{ required: true, message: '请输入延期天数', trigger: 'blur' }],
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    /// 当前步骤ID
+    formData.value.PerformancePlanStepID = props.selectedRow.curstepid
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            formSubmit().then(() => {
+                ElMessage.success('提交成功')
+                onCancel(true)
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+</script>

src/packages/pc/views/footer/performance/components/details/index.less

@@ -0,0 +1,50 @@
+.trade-details {
+    padding: 20px;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #999;
+        cursor: pointer;
+
+        h4 {
+            margin-left: 10px;
+        }
+    }
+
+    .el-aside {
+        min-width: 400px;
+        width: auto;
+
+        .el-card {
+            ul {
+                li {
+                    display: flex;
+                    justify-content: space-between;
+
+                    &:not(:first-child) {
+                        margin-top: 20px;
+                    }
+
+                    >span {
+                        &:first-child {
+                            width: 120px;
+                            color: #94A0AF;
+                        }
+
+                        &:last-child {
+                            flex: 1;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .el-main {
+        margin-left: 20px;
+        padding: 0;
+    }
+}

src/packages/pc/views/footer/performance/components/details/index.vue

@@ -0,0 +1,210 @@
+<!-- 履约信息-详情 -->
+<template>
+    <app-drawer class="g-details" width="80%" title="详情" v-model:show="show" :loading="loading" :refresh="refresh">
+        <app-table-details title="基本信息" :label-width="180" :data="selectedRow" :cell-props="detailProps" :column="2">
+            <!-- 付款方式 -->
+            <template #paymenttype="{ value }">
+                {{ value === 1 ? '冻结' : '扣款' }}
+            </template>
+            <!-- 买方冻结 -->
+            <template #buyerfreezeamount="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 卖方冻结 -->
+            <template #sellerfreezeamount="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 买方冻结剩余 -->
+            <template #buyerfreezeamountremain="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 卖方冻结剩余 -->
+            <template #sellerfreezeamountremain="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 买方今日付款 -->
+            <template #buytodayamount="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 卖方今日收款 -->
+            <template #selltodayamount="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 已付金额 -->
+            <template #buypaidamount="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 已收金额 -->
+            <template #sellreceivedamount="{ value }">
+                {{ handleNumberValue(value) }}
+            </template>
+            <!-- 买方联络信息 -->
+            <template #buyerInfo>
+                {{ buyerInfo }}
+            </template>
+            <!-- 卖方联络信息 -->
+            <template #sellerInfo>
+                {{ sellerInfo }}
+            </template>
+        </app-table-details>
+        <app-table :data="dataList" :columns="tableColumns" :show-toolbar="false" :row-style="rowStyle" border>
+            <template #header>
+                <h3 class="g-details__title">步骤列表</h3>
+            </template> 
+            <!-- 步骤值 -->
+            <template #stepvalue="{ value }">
+                {{ (value * 100).toFixed(1) }}
+            </template>
+            <template #isauto="{ value }">
+                {{ value ? '是' : '否' }}
+            </template>
+            <!-- 启动类型 -->
+            <template #steplanchtype="{ value }">
+                {{ value === 1 ? '系统自动' : '手动' }}
+            </template>
+            <!-- 步骤状态 -->
+            <template #stepstatus="{ value }">
+                {{ getPerformanceStepStatusName(value) }}
+            </template>
+        </app-table> 
+        <template #footer>
+            <el-button @click="onCancel(false)" plain>取消</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+    inheritAttrs: false,
+})
+</script>
+
+<script lang="ts" setup>
+import { PropType, computed, ref, shallowRef } from 'vue'
+import { handleNumberValue, handleNoneValue } from '@/filters'
+import { getPerformanceStepStatusName } from '@/constants/order'
+import { useRequest } from '@/hooks/request'
+import { queryWrPerformancePlanStep } from '@/services/api/performance'
+import AppTable from '@pc/components/base/table/index.vue'
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const props = defineProps({
+    code: String,
+    teleportTo: {
+        type: String,
+        default: '#appPageTeleport'
+    },
+    selectedRow: {
+        type: Object as PropType<Model.PerformancePlanRsp>,
+        default: () => ({})
+    }
+})
+
+const show = ref(true)
+const refresh = ref(false)
+
+const { loading, dataList } = useRequest(queryWrPerformancePlanStep, {
+    params: {
+        planid: props.selectedRow.performanceplanid
+    },
+})
+
+const detailProps = [
+    { prop: 'relatedorderid', label: '关联单号：' },
+    { prop: 'wrstandardname', label: '履约商品：' },
+    { prop: 'amount', label: '履约金额：' },
+    { prop: 'paymenttype', label: '付款方式：' },
+    { prop: 'accountname', label: '对手方：' },
+    { prop: 'buyerfreezeamount', label: '买方冻结：' },
+    { prop: 'buytodayamount', label: '买方今日付款：' },
+    { prop: 'sellerfreezeamount', label: '卖方冻结：' },
+    { prop: 'selltodayamount', label: '卖方今日收款：' },
+    { prop: 'buyerfreezeamountremain', label: '买方冻结剩余：' },
+    { prop: 'buypaidamount', label: '已付金额：' },
+    { prop: 'sellerfreezeamountremain', label: '卖方冻结剩余：' },
+    { prop: 'sellreceivedamount', label: '已收金额：' },
+    { prop: 'sellerInfo', label: '卖方联络信息：' },
+    { prop: 'buyerInfo', label: '买方联络信息：' },
+]
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'steptypename', label: '名称' },
+    { prop: 'stepdays', label: '天数' },
+    { prop: 'remaindays', label: '剩余天数' },
+    { prop: 'stepvalue', label: '步骤值(%)' },
+    { prop: 'stepamount', label: '金额' },
+    { prop: 'realamount', label: '完成金额' },
+    { prop: 'isauto', label: '是否自动' },
+    { prop: 'steplanchtype', label: '启动类型' },
+    { prop: 'starttime', label: '开始日期' },
+    { prop: 'endtime', label: '结束日期' },
+    { prop: 'stepstatus', label: '步骤状态' },
+    { prop: 'remark', label: '步骤备注' },
+])
+
+// 当前步骤索引位置
+const currentStepIndex = computed(() => dataList.value.findIndex((e) => e.performancestepid === props.selectedRow.curstepid))
+
+// 买方联络信息
+const buyerInfo = computed(() => {
+    if (props.selectedRow.buyerinfo) {
+        const obj = JSON.parse(props.selectedRow.buyerinfo)
+        const content: string[] = []
+        Object.entries(obj).forEach(([key, value]) => {
+            if (value) {
+                switch (key) {
+                    case 'ContactInfo': {
+                        content.push('联络信息：' + value)
+                        break
+                    }
+                    case 'ReceiveInfo': {
+                        content.push('收货地址：' + value)
+                        break
+                    }
+                    case 'ReceiptInfo': {
+                        content.push('发票信息：' + value)
+                        break
+                    }
+                }
+            }
+        })
+        return content.join('\n')
+    }
+    return handleNoneValue()
+})
+
+// 卖方联络信息
+const sellerInfo = computed(() => {
+    const obj = JSON.parse(props.selectedRow.sellerinfo || '{}')
+    return obj.ContactInfo || handleNoneValue()
+})
+
+const rowStyle = ({ rowIndex }: { rowIndex: number }) => {
+    if (currentStepIndex.value > rowIndex) {
+        return {
+            color: 'green'
+        }
+    }
+    if (currentStepIndex.value === rowIndex) {
+        return {
+            color: 'red'
+        }
+    }
+    return {
+        color: '#999'
+    }
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+// getPlanStepList()
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/views/footer/performance/components/edit/index.vue

@@ -0,0 +1,182 @@
+<!-- 订单管理-我的履约-修改联络信息 -->
+<template>
+    <app-drawer title="修改联络信息" width="80%" v-model:show="show" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" class="el-form--horizontal" label-width="80px" :model="formData" :rules="formRules">
+            <el-form-item label="履约计划">
+                <span>{{ handleNoneValue(selectedRow.curstepid) }}</span>
+            </el-form-item>
+            <el-form-item label="联络信息">
+                <el-input type="textarea" :rows="3" v-model="Contract" />
+            </el-form-item>
+            <template v-if="code === 'order_buy_edit'">
+                <el-form-item label="收货地址">
+                    <div class="el-form-item--col">
+                        <el-input type="textarea" :rows="2" v-model="Receive" />
+                        <el-dropdown trigger="click" v-if="addressList.length">
+                            <el-icon :size="20" style="cursor: pointer;">
+                                <CirclePlusFilled />
+                            </el-icon>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item v-for="(item, index) in addressList" :key="index"
+                                        @click="addressChange(item)">
+                                        {{ [item.provincename, item.cityname, item.districtname, item.address].join(' ') }}
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                </el-form-item>
+                <el-form-item label="发票信息">
+                    <div class="el-form-item--col">
+                        <el-input type="textarea" :rows="2" v-model="Receipt" />
+                        <el-dropdown trigger="click" v-if="invoiceList.length">
+                            <el-icon :size="20" style="cursor: pointer;">
+                                <CirclePlusFilled />
+                            </el-icon>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item v-for="(item, index) in invoiceList" :key="index"
+                                        @click="invoiceChange(item)">
+                                        {{ [getReceiptTypeName(item.receipttype), item.username].join(' ') }}
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                </el-form-item>
+            </template>
+        </el-form>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)" plain>取消</el-button>
+            <el-button type="primary" @click="onSubmit">确认</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType, onMounted, shallowRef } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { handleNoneValue } from '@/filters'
+import { getReceiptTypeName } from '@/constants/receipt'
+import { useRequest } from '@/hooks/request'
+import { queryUserReceiveInfo, queryWrUserReceiptInfo } from '@/services/api/user'
+import { usePerformanceModifyContact } from '@/business/performance'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const props = defineProps({
+    code: String,
+    selectedRow: {
+        type: Object as PropType<Model.PerformancePlanRsp>,
+        required: true
+    }
+})
+
+const { loading, formData, formSubmit } = usePerformanceModifyContact()
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+const formRules: FormRules = {}
+
+const Contract = shallowRef('') // 联系人嘻嘻
+const Receive = shallowRef('') // 收货地址信息
+const Receipt = shallowRef('') // 发票信息
+
+const { dataList: addressList } = useRequest(queryUserReceiveInfo)
+const { dataList: invoiceList } = useRequest(queryWrUserReceiptInfo)
+
+// 选择地址
+const addressChange = (item: Model.UserReceiveInfoRsp) => {
+    Receive.value = [item.provincename, item.cityname, item.districtname, item.address].join(' ')
+}
+
+// 选择发票
+const invoiceChange = (item: Model.WrUserReceiptInfoRsp) => {
+    Receipt.value = ''
+    Object.entries(item).forEach(([key, value]) => {
+        if (value !== '') {
+            switch (key) {
+                case 'receipttype': {
+                    Receipt.value += '发票类型:' + getReceiptTypeName(Number(value)) + '\n'
+                    break
+                }
+                case 'username': {
+                    Receipt.value += '户名:' + value + '\n'
+                    break
+                }
+                case 'address': {
+                    Receipt.value += '地址:' + value + '\n'
+                    break
+                }
+                case 'contactinfo': {
+                    Receipt.value += '联系方式:' + value + '\n'
+                    break
+                }
+                case 'idnum': {
+                    Receipt.value += '身份证号码:' + value + '\n'
+                    break
+                }
+                case 'receiptaccount': {
+                    Receipt.value += '发票帐号:' + value + '\n'
+                    break
+                }
+                case 'receiptbank': {
+                    Receipt.value += '发票开户行:' + value + '\n'
+                    break
+                }
+                case 'taxpayerid': {
+                    Receipt.value += '纳税人识别号:' + value + '\n'
+                    break
+                }
+            }
+        }
+    })
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    /// PerformancePlanID
+    formData.value.PerformancePlanID = props.selectedRow.performanceplanid
+    /// Json String
+    const json =  {
+        ContactInfo: `${Contract.value}`,
+        ReceiveInfo: `${Receive.value}`,
+        ReceiptInfo: `${Receipt.value}`
+    }
+    formData.value.ContactInfo= JSON.stringify(json)
+
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            formSubmit().then(() => {
+                ElMessage.success('提交成功')
+                onCancel(true)
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+
+onMounted(() => {
+    switch (props.code) {
+        case 'order_buy_edit':
+            if (props.selectedRow.buyerinfo) {
+                const res = JSON.parse(props.selectedRow.buyerinfo)
+                Contract.value = res.ContactInfo
+                Receive.value = res.ReceiveInfo
+                Receipt .value= res.ReceiptInfo
+            }
+            break
+        case 'order_sell_edit':
+            if (props.selectedRow.sellerinfo) {
+                const res = JSON.parse(props.selectedRow.sellerinfo)
+                Contract.value = res.ContactInfo
+            }
+            break
+    }
+})
+</script>

src/packages/pc/views/footer/performance/components/manual/index.vue

@@ -0,0 +1,61 @@
+<!-- 履约信息-手动执行 -->
+<template>
+    <app-drawer title="手动执行" :width="480" v-model:show="show" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" label-width="60px" :model="confirmFormData" :rules="formRules">
+            <el-form-item>
+                <span>是否执行当前步骤【{{ handleNumberValue(getPerformanceStepStatusName(selectedRow.steptypeid)) }}】？</span>
+            </el-form-item>
+            <el-form-item label="备注" prop="StepRemark">
+                <el-input type="textarea" :rows="3" v-model="confirmFormData.StepRemark" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="onCancel(false)" plain>取消</el-button>
+            <el-button type="primary" @click="onSubmit">确认</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { handleNumberValue } from '@/filters'
+import { getPerformanceStepStatusName } from '@/constants/order'
+import { usePerformanceManualConfirm } from '@/business/performance'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.PerformancePlanRsp>,
+        default: () => ({})
+    }
+})
+
+const { loading, confirmSubmit, confirmFormData } = usePerformanceManualConfirm(props.selectedRow.buyaccountid)
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+
+const formRules: FormRules = {
+    StepRemark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    confirmFormData.value.PerformancePlanStepID = props.selectedRow.performanceplanid
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            confirmSubmit().then(() => {
+                ElMessage.success('提交成功')
+                onCancel(true)
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+</script>

src/packages/pc/views/footer/performance/sell/index.vue

@@ -1,6 +1,6 @@
 <!-- 底部-履约信息-卖履约 -->
 <template>
-    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey" :expand-row-keys="expandKeys"  @row-click="rowClick">
          <!-- 履约状态 -->
          <template #performancestatus="{ value }">
             {{ getPerformanceStatusName(value) }}
@@ -17,18 +17,51 @@
         <template #starttime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <!-- 展开行 -->
+        <template #expand="{ row }">
+            <div class="buttonbar">
+                <el-button type="danger" size="small" v-if="row.buyorsell===row.executeside-1" @click="showComponent('manual', row)">手动确认</el-button>
+                <el-button type="warning" size="small" v-if="row.buyorsell===row.executeside-1" @click="showComponent('delay', row)">延期</el-button>
+                <el-button type="primary" size="small" v-if="![6, 7].includes(row.performancestatus)" @click="showComponent('contracted', row)">违约</el-button>
+                <el-button type="info" v-if="![6, 7].includes(row.performancestatus)" size="small" @click="showComponent('edit', row)">修改</el-button>
+                <el-button type="success" size="small" @click="showComponent('details', row)">详细</el-button>
+            </div>
+        </template>
     </app-table>
+    <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
+            v-if="componentId" />
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { formatDate } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { queryPerformancePlan } from '@/services/api/performance'
 import { BuyOrSell, getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/constants/order'
+import { useComposeTable } from '@pc/components/base/table'
+import { useComponent } from '@/hooks/component'
 import AppTable from '@pc/components/base/table/index.vue'
 
-const { loading, dataList } = useRequest(queryPerformancePlan, {
+const componentMap = new Map<string, unknown>([
+    ['manual', defineAsyncComponent(() => import('../components/manual/index.vue'))],
+    ['details', defineAsyncComponent(() => import('../components/details/index.vue'))],
+    ['contracted', defineAsyncComponent(() => import('../components/contracted/index.vue'))],
+    ['delay', defineAsyncComponent(() => import('../components/delay/index.vue'))],
+    ['edit', defineAsyncComponent(() => import('../components/edit/index.vue'))],
+])
+
+defineProps({
+    code: String
+})
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    run()
+})
+
+const { rowKey, expandKeys, rowClick } = useComposeTable<Model.PerformancePlanRsp>({ rowKey: 'performanceplanid' })
+const selectedRow = shallowRef<Model.PerformancePlanRsp>()
+
+const { loading, dataList, run } = useRequest(queryPerformancePlan, {
     params: {
         buyorsell: BuyOrSell.Sell,
         status:'2'
@@ -52,4 +85,9 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'starttime', label: '开始时间' },
     
 ])
+
+const showComponent = (componentName: string, row: Model.PerformancePlanRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
 </script>

src/packages/pc/views/footer/spot/order/index.vue

@@ -20,7 +20,7 @@
         <!-- 展开行 -->
         <template #expand="{ row }">
             <div class="buttonbar">
-                <el-button type="danger" size="small" @click="showComponent('cancel', row)">撤销</el-button>
+                <el-button type="danger" v-if="[3, 7].includes(row.wrtradeorderstatus)" size="small" @click="showComponent('cancel', row)">撤销</el-button>
             </div>
         </template>
     </app-table>

src/packages/pc/views/footer/spot/position/components/listing/index.vue

@@ -19,7 +19,7 @@
                 <span>{{ selectedRow.enableqty }}</span>
             </el-form-item>
             <el-form-item prop="OrderQty" label="挂牌数量">
-                <el-input-number placeholder="请输入挂牌数量" v-model="formData.OrderQty" :max="selectedRow.enableqty" min="0" />
+                <el-input-number placeholder="请输入挂牌数量" v-model="formData.OrderQty" :max="selectedRow.enableqty" :min="0" />
             </el-form-item>
             <el-form-item prop="FixedPrice" label="挂牌价格">
                 <el-input-number placeholder="请输入挂牌价格" v-model="formData.FixedPrice" />
@@ -42,10 +42,10 @@ const props = defineProps({
     selectedRow: {
         type: Object as PropType<Model.HoldLBRsp>,
         required: true
-    }
+    },
+    code: String
 })
 
-console.log(props.selectedRow)
 
 const { formData, listingSubmit, loading } = useHdWROrder()
 const show = ref(true)

src/packages/pc/views/footer/spot/position/components/pickup/index.vue

@@ -19,7 +19,7 @@
                 <span>{{selectedRow.enableqty}}</span>
             </el-form-item>
             <el-form-item prop="OrderQty" label="提货数量">
-                <el-input-number placeholder="请输入提货数量" v-model="orderQty" :max="selectedRow.enableqty" min="0" />
+                <el-input-number placeholder="请输入提货数量" v-model="orderQty" :max="selectedRow.enableqty" :min="0" />
             </el-form-item>
             <el-form-item prop="AppointmentModel" label="提货方式">
                 <el-select v-model="formData.AppointmentModel" :disabled="loading">
@@ -149,7 +149,6 @@ const addressChange = (item: Model.UserReceiveInfoRsp) => {
     formData.DistrictID = item.districtid
     formData.Address = item.address
     regionName.value = [item.provincename, item.cityname, item.districtname].join(' ')
-    formRef.value?.validate('Region')
 }
 
 

src/types/model/performance.d.ts

@@ -27,6 +27,8 @@ declare namespace Model {
         buyerfreezeamount: number
         /// 履约冻结剩余(买履约)
         buyerfreezeamountremain: number
+        /// 买方联系信息 - 存JSON字符串, 根据枚举‘BuyerContactInfo’，显示\隐藏字段，若数据不为JSON，则直接显示{ "ContactInfo": "xxxxxxxx", "ReceiveInfo": "xxxxxxxxx", "ReceiptInfo": "xxxxxxxxxxxx"}
+        buyerinfo: string
         /// 买卖方向 0-买 1-卖
         buyorsell: number
         /// 买方已冻/已扣金额 (已付金额)
@@ -99,6 +101,8 @@ declare namespace Model {
         sellerfreezeamount: number
         /// 履约冻结剩余(卖履约)
         sellerfreezeamountremain: number
+        /// 卖方联系信息 - 存JSON字符串, 根据枚举‘SellerContactInfo’，显示\隐藏字段，若数据不为JSON，则直接显示{ "ContactInfo": "xxxxxxxx"}
+        sellerinfo: string
         /// 卖方已收金额
         sellreceivedamount: number
         /// 卖方名字

src/types/proto/trade.d.ts

@@ -613,15 +613,15 @@ declare global {
             ClientSerialNo: string; // 客户端流水号
             ClientType: number; // 终端类型
         }
-// 补充定金接口响应
-interface SupplementDepositRsp {
-	Header?: IMessageHead; // 消息头
-	optional int32 RetCode = 2; // 返回码
-	optional string RetDesc = 3; // 描述信息
-		optional uint64 TradeID = 4; // 成交单号，必填
-		optional uint32 UserID = 5; // 用户ID，必填
-		optional uint64 AccountID = 6; // 交易账号，必填
-		optional string ClientSerialNo = 7; // 客户端流水号
-}
+        // 补充定金接口响应
+        interface SupplementDepositRsp {
+            Header?: IMessageHead; // 消息头
+            RetCode: number; // 返回码
+            RetDesc: string; // 描述信息
+            TradeID: number; // 成交单号，必填
+            UserID: number; // 用户ID，必填
+            AccountID: number; // 交易账号，必填
+            ClientSerialNo: string; // 客户端流水号
+        }
     }
 }