update

src/packages/gstj/components/modules/performance/index.less

@@ -0,0 +1,19 @@
+.app-performance {
+    &-item {
+        height: auto;
+        padding: 10px;
+        line-height: 1;
+
+        &:not(:first-child) {
+            border-top: 1px solid #576675;
+        }
+
+        &__title {
+            margin-bottom: 8px;
+        }
+
+        &.selected &__title {
+            font-weight: bold;
+        }
+    }
+}

src/packages/gstj/components/modules/performance/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <Field type="number" :label="label" @click="show = true" is-link readonly>
+        <template #input>
+            <input :placeholder="placeholder" :value="templateName" />
+            <PerformanceList v-model:show="show" :market-id="marketId" :selected-id="modelValue" @change="onChange" />
+        </template>
+    </Field>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { Field } from 'vant'
+import PerformanceList from './list/index.vue'
+
+defineProps({
+    modelValue: Number,
+    marketId: Number,
+    label: {
+        type: String,
+        default: '履约模板'
+    },
+    placeholder: {
+        type: String,
+        default: '请选择'
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+const show = shallowRef(false)
+const templateName = shallowRef<string>()
+
+const onChange = (item?: Model.PermancePlanTmpRsp) => {
+    templateName.value = item?.templatename
+    emit('update:modelValue', item?.autoid)
+    emit('change', item)
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed: () => {
+        if (show.value) {
+            show.value = false
+            return false
+        }
+        return true
+    },
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/gstj/components/modules/performance/list/index.less

@@ -0,0 +1,46 @@
+.app-performance {
+    &__step {
+        display: flex;
+        padding-top: .1rem;
+        overflow-x: auto;
+
+        li {
+            --van-tag-primary-color: #3a73ad;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: .24rem;
+
+            &:not(:first-child) {
+                margin-left: .1rem;
+            }
+
+            span {
+                color: var(--van-tag-primary-color);
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .van-radio {
+        &__label {
+            overflow: hidden;
+            padding: .1rem;
+        }
+    }
+
+    .van-cell {
+        &-group {
+            margin-top: .2rem;
+        }
+
+        &__title {
+            overflow: hidden;
+        }
+
+        &__label {
+            overflow: hidden;
+        }
+    }
+}

src/packages/gstj/components/modules/performance/list/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal">
+        <app-view class="app-performance">
+            <template #header>
+                <app-navbar title="履约模板" @back="showModal = false" />
+            </template>
+            <RadioGroup v-model="checkedRow" @change="onChange">
+                <CellGroup v-for="(item, index) in dataList" :key="index" inset>
+                    <Cell>
+                        <template #title>
+                            <Radio :name="item">
+                                <span>{{ item.templatename }}</span>
+                                <ul class="app-performance__step">
+                                    <li v-for="(step, i) in item.LstStep" :key="i">
+                                        <Tag type="primary " size="large" plain>{{ step.stepinfo }}
+                                        </Tag>
+                                        <span>{{ step.stepdate }}</span>
+                                    </li>
+                                </ul>
+                            </Radio>
+                        </template>
+                    </Cell>
+                </CellGroup>
+            </RadioGroup>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed } from 'vue'
+import { RadioGroup, Radio, CellGroup, Cell, Tag } from 'vant'
+import { useRequest } from '@/hooks/request'
+import { queryPermancePlanTmp } from '@/services/api/performance'
+import AppModal from '@/components/base/modal/index.vue'
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    selectedId: Number,
+    marketId: Number,
+})
+
+const emit = defineEmits(['update:show', 'change'])
+const checkedRow = shallowRef<Model.PermancePlanTmpRsp>()
+
+const showModal = computed({
+    get: () => props.show,
+    set: (val) => emit('update:show', val)
+})
+
+const { dataList } = useRequest(queryPermancePlanTmp, {
+    params: {
+        marketid: props.marketId
+    },
+    onFinally: () => {
+        const item = dataList.value.find((e) => e.autoid === props.selectedId)
+        if (item) {
+            checkedRow.value = item
+        } else {
+            emit('change')
+        }
+    }
+})
+
+const onChange = () => {
+    emit('change', checkedRow.value)
+    showModal.value = false
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/gstj/views/order/position/components/goods/close/Index.vue

@@ -16,7 +16,7 @@
                     <Cell title="持仓均价" :value="formatDecimal(selectedRow.averageprice)" />
                     <Cell title="参考损益">
                         <template #value>
-                            <span :class="closepl ? 'g-price-up' : 'g-price-down'">{{ formatDecimal(closepl) }}</span>
+                            <span :class="handlePriceColor(closepl, 0.0)">{{ formatDecimal(closepl) }}</span>
                         </template>
                     </Cell>
                 </CellGroup>
@@ -50,7 +50,7 @@ import { shallowRef, PropType, onMounted, computed } from 'vue'
 import AppModal from '@/components/base/modal/index.vue'
 import { CellGroup, Cell, Button, FieldRule, Form, Field, Stepper } from 'vant'
 import { getBuyOrSellName, BuyOrSell } from '@/constants/order'
-import { formatDecimal, handleNumberValue } from '@/filters'
+import { formatDecimal, handleNumberValue, handlePriceColor } from '@/filters'
 import { useOrder } from '@/business/trade'
 import { dialog, fullloading } from '@/utils/vant'
 import { useFuturesStore } from '@/stores'

src/packages/gstj/views/order/position/components/spot/listing/Index.vue

@@ -14,6 +14,8 @@
                     <Cell title="可用量" :value="selectedRow.enableqty" />
                 </CellGroup>
                 <CellGroup title="挂牌信息" inset>
+                    <Performance ref="performanceRef" name="PerformanceTemplateID"
+                        v-model="formData.PerformanceTemplateID" />
                     <Field name="OrderQty" :rules="formRules.OrderQty" label="挂牌数量">
                         <template #input>
                             <Stepper v-model="formData.OrderQty" theme="round" button-size="22"
@@ -38,12 +40,14 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, PropType, onMounted } from 'vue'
+import { shallowRef, PropType, onMounted, defineAsyncComponent } from 'vue'
 import { CellGroup, Cell, Button, Stepper, Field, Form, FormInstance, FieldRule } from 'vant'
 import { fullloading } from '@/utils/vant'
 import { useHdWROrder } from '@/business/trade'
 import AppModal from '@/components/base/modal/index.vue'
 
+const Performance = defineAsyncComponent(() => import('../../../../../../components/modules/performance/index.vue'))
+
 const props = defineProps({
     selectedRow: {
         type: Object as PropType<Model.HoldLBRsp>,
@@ -53,11 +57,18 @@ const props = defineProps({
 
 const { formData, listingSubmit } = useHdWROrder()
 const formRef = shallowRef<FormInstance>()
+const performanceRef = shallowRef()
 const showModal = shallowRef(true)
 const refresh = shallowRef(false) // 是否刷新父组件数据
 
 // 表单验证规则
 const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
+    PerformanceTemplateID: [{
+        message: '请选择履约模板',
+        validator: () => {
+            return !!formData.PerformanceTemplateID
+        }
+    }],
     FixedPrice: [{
         message: '请输入价格',
         validator: () => {
@@ -98,8 +109,10 @@ const onSubmit = () => {
 
 // 关闭弹窗
 const closed = (isRefresh = false) => {
-    refresh.value = isRefresh
-    showModal.value = false
+    if (performanceRef.value?.closed()) {
+        refresh.value = isRefresh
+        showModal.value = false
+    }
 }
 
 onMounted(() => {

src/packages/gstj/views/spot/add/components/buy/index.vue

@@ -2,6 +2,7 @@
     <app-view class="g-form">
         <Form ref="formRef" class="g-form__container" @submit="formSubmit">
             <CellGroup inset>
+                <Performance ref="performanceRef" name="PerformanceTemplateID" v-model="formData.PerformanceTemplateID" />
                 <Field name="WRFactorTypeId" label="现货仓单" placeholder="请选择" v-model="selectedRow.wrfactortypeid"
                     :rules="formRules.WRFactorTypeId" @click="showWarehouseReceipt = true" is-link readonly />
                 <template v-if="selectedRow.wrfactortypeid">
@@ -50,10 +51,12 @@ import { useNavigation } from '../../../../../router/navigation'
 import { useHdWROrder } from '@/business/trade'
 
 const WarehouseReceipt = defineAsyncComponent(() => import('./warehouse-receipt.vue'))
+const Performance = defineAsyncComponent(() => import('../../../../../components/modules/performance/index.vue'))
 
 const { routerBack } = useNavigation()
 const { formData, listingSubmit, amount } = useHdWROrder()
 const formRef = shallowRef<FormInstance>()
+const performanceRef = shallowRef()
 const showWarehouseReceipt = shallowRef(false)
 const selectedRow = shallowRef<Partial<Model.HoldLBRsp>>({}) //选中的现货仓单
 
@@ -65,6 +68,12 @@ const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
             return !!selectedRow.value.wrfactortypeid
         }
     }],
+    PerformanceTemplateID: [{
+        message: '请选择履约模板',
+        validator: () => {
+            return !!formData.PerformanceTemplateID
+        }
+    }],
     FixedPrice: [{
         message: '请输入价格',
         validator: () => {
@@ -117,11 +126,7 @@ const formSubmit = () => {
 
 // 离开页面前关闭组件
 onBeforeRouteLeave((to, from, next) => {
-    if (showWarehouseReceipt.value) {
-        showWarehouseReceipt.value = false
-        next(false)
-    } else {
-        next()
-    }
+    const flag = performanceRef.value?.closed()
+    next(flag)
 })
 </script>

src/packages/gstj/views/spot/add/components/sell/index.vue

@@ -2,6 +2,7 @@
     <app-view class="g-form">
         <Form ref="formRef" class="g-form__container" @submit="formSubmit">
             <CellGroup inset>
+                <Performance ref="performanceRef" name="PerformanceTemplateID" v-model="formData.PerformanceTemplateID" />
                 <Field name="DeliveryGoodsID" label="品类" :rules="formRules.DeliveryGoodsID" is-link>
                     <template #input>
                         <app-select v-model="formData.DeliveryGoodsID" :options="ftDeliveryGoodsList"
@@ -56,7 +57,8 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, computed } from 'vue'
+import { shallowRef, computed, defineAsyncComponent } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
 import { CellGroup, Button, Field, Form, FormInstance, Stepper, FieldRule, showSuccessToast, showFailToast } from 'vant'
 import { fullloading } from '@/utils/vant'
 import { BuyOrSell } from '@/constants/order'
@@ -67,10 +69,13 @@ import { useHdWROrder } from '@/business/trade'
 import { useAccountStore } from '@/stores'
 import AppSelect from '../../../../../components/base/select/index.vue'
 
+const Performance = defineAsyncComponent(() => import('../../../../../components/modules/performance/index.vue'))
+
 const { routerBack } = useNavigation()
 const { formData, listingSubmit, amount } = useHdWROrder()
 const accountStore = useAccountStore()
 const formRef = shallowRef<FormInstance>()
+const performanceRef = shallowRef()
 
 const { dataList: ftDeliveryGoodsList } = useRequest(queryFtDeliveryGoods)
 const { dataList: wrStandardFactoryItems, run: getWrStandardFactoryItems } = useRequest(queryWrStandardFactoryItem, { manual: true })
@@ -84,6 +89,12 @@ const warehouseList = computed(() => {
 
 // 表单验证规则
 const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
+    PerformanceTemplateID: [{
+        message: '请选择履约模板',
+        validator: () => {
+            return !!formData.PerformanceTemplateID
+        }
+    }],
     DeliveryGoodsID: [{
         message: '请选择品类',
         validator: () => {
@@ -156,4 +167,10 @@ const formSubmit = () => {
         })
     })
 }
+
+// 离开页面前关闭组件
+onBeforeRouteLeave((to, from, next) => {
+    const flag = performanceRef.value?.closed()
+    next(flag)
+})
 </script>

src/packages/gstj/views/spot/detail/components/listing/index.vue

@@ -2,6 +2,7 @@
     <app-popup class="supply-demand-listing" :title="buyorsell === BuyOrSell.Sell ? '我要卖' : '我要买'" v-model:show="showModal"
         :refresh="refresh">
         <Form class="supply-demand-listing__form" ref="formRef" @submit="onSubmit">
+            <Performance ref="performanceRef" name="PerformanceTemplateID" v-model="formData.PerformanceTemplateID" />
             <Field name="FixedPrice" :rules="formRules.FixedPrice" label="挂牌价格">
                 <template #input>
                     <Stepper v-model="formData.FixedPrice" theme="round" :decimal-length="2" :auto-fixed="false"
@@ -44,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, PropType, onMounted } from 'vue'
+import { shallowRef, PropType, onMounted, defineAsyncComponent } from 'vue'
 import { Form, Field, Stepper, Button, FieldRule, FormInstance } from 'vant'
 import { fullloading, dialog } from '@/utils/vant'
 import { useAccountStore } from '@/stores'
@@ -52,7 +53,9 @@ import { BuyOrSell } from '@/constants/order'
 import { queryHoldLB } from '@/services/api/order'
 import { useHdWROrder } from '@/business/trade'
 import AppPopup from '../../../../../components/base/popup/index.vue'
+
 //import AppSelect from '../../../../../components/base/select/index.vue'
+const Performance = defineAsyncComponent(() => import('../../../../../components/modules/performance/index.vue'))
 
 const props = defineProps({
     quoteItem: {
@@ -68,13 +71,21 @@ const props = defineProps({
 const { formData, listingSubmit, amount } = useHdWROrder()
 const accountStore = useAccountStore()
 const formRef = shallowRef<FormInstance>()
+const performanceRef = shallowRef()
 const refresh = shallowRef(false) // 是否刷新父组件数据
 const showModal = shallowRef(true)
 //const dataList = shallowRef<Model.HoldLBRsp[]>([]) //现货仓单列表
 const selectedRow = shallowRef<Model.HoldLBRsp>() //选中的现货仓单
 
+
 // 表单验证规则
 const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
+    PerformanceTemplateID: [{
+        message: '请选择履约模板',
+        validator: () => {
+            return !!formData.PerformanceTemplateID
+        }
+    }],
     FixedPrice: [{
         message: '请输入价格',
         validator: () => {
@@ -111,8 +122,10 @@ const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
 
 // 关闭弹窗
 const closed = (isRefresh = false) => {
-    refresh.value = isRefresh
-    showModal.value = false
+    if (performanceRef.value?.closed()) {
+        refresh.value = isRefresh
+        showModal.value = false
+    }
 }
 
 // 提交挂牌

src/packages/gstj/views/spot/list/Index.vue

@@ -1,7 +1,7 @@
 <template>
     <app-view class="spot-list">
         <template #header>
-            <app-navbar title="现货挂牌" :show-back-button="false">
+            <app-navbar title="现货挂牌">
                 <template #right>
                     <Icon name="add" size=".4rem" @click="$router.push({ name: 'spot-add' })" />
                 </template>

src/packages/mobile/components/modules/performance/index.vue

@@ -32,6 +32,7 @@ const templateName = shallowRef<string>()
 const onChange = (item?: Model.PermancePlanTmpRsp) => {
     templateName.value = item?.templatename
     emit('update:modelValue', item?.autoid)
+    emit('change', item)
 }
 
 // 暴露组件属性给父组件调用

src/packages/mobile/components/modules/performance/list/index.less

@@ -1,21 +1,46 @@
 .app-performance {
     &__step {
         display: flex;
+        padding-top: .1rem;
         overflow-x: auto;
-        padding-top: .2rem;
 
         li {
+            --van-tag-primary-color: #3a73ad;
+
             display: flex;
             flex-direction: column;
             align-items: center;
+            font-size: .24rem;
 
             &:not(:first-child) {
                 margin-left: .1rem;
             }
 
             span {
+                color: var(--van-tag-primary-color);
                 white-space: nowrap;
             }
         }
     }
+
+    .van-radio {
+        &__label {
+            overflow: hidden;
+            padding: .1rem;
+        }
+    }
+
+    .van-cell {
+        &-group {
+            margin-top: .2rem;
+        }
+
+        &__title {
+            overflow: hidden;
+        }
+
+        &__label {
+            overflow: hidden;
+        }
+    }
 }

src/packages/mobile/components/modules/performance/list/index.vue

@@ -5,18 +5,19 @@
                 <app-navbar title="履约模板" @back="showModal = false" />
             </template>
             <RadioGroup v-model="checkedRow" @change="onChange">
-                <CellGroup>
-                    <Cell v-for="(item, index) in dataList" :key="index" arrow-direction="down">
+                <CellGroup v-for="(item, index) in dataList" :key="index" inset>
+                    <Cell>
                         <template #title>
-                            <Radio :name="item">{{ item.templatename }}</Radio>
-                        </template>
-                        <template #label>
-                            <ul class="app-performance__step">
-                                <li v-for="(step, i) in item.LstStep" :key="i">
-                                    <Tag size="large">{{ step.stepinfo }}</Tag>
-                                    <span>{{ step.stepdate }}</span>
-                                </li>
-                            </ul>
+                            <Radio :name="item">
+                                <span>{{ item.templatename }}</span>
+                                <ul class="app-performance__step">
+                                    <li v-for="(step, i) in item.LstStep" :key="i">
+                                        <Tag type="primary " size="large" plain>{{ step.stepinfo }}
+                                        </Tag>
+                                        <span>{{ step.stepdate }}</span>
+                                    </li>
+                                </ul>
+                            </Radio>
                         </template>
                     </Cell>
                 </CellGroup>

src/packages/mobile/views/order/position/components/spot/listing/Index.vue

@@ -14,8 +14,8 @@
                     <Cell title="可用量" :value="selectedRow.enableqty" />
                 </CellGroup>
                 <CellGroup title="挂牌信息" inset>
-                    <Field name="PerformanceTemplateID" label="履约模板" placeholder="请选择" v-model="formData.PerformanceTemplateID" :rules="formRules.PerformanceTemplateID"
-                 @click="showPerformancePlan = true" is-link readonly />
+                    <Performance ref="performanceRef" name="PerformanceTemplateID"
+                        v-model="formData.PerformanceTemplateID" />
                     <Field name="OrderQty" :rules="formRules.OrderQty" label="挂牌数量">
                         <template #input>
                             <Stepper v-model="formData.OrderQty" theme="round" button-size="22"
@@ -35,7 +35,6 @@
                     <Button block square type="danger" @click="formRef?.submit">卖出</Button>
                 </div>
             </template>
-            <component :is="PerformanceTmp" v-model:show="showPerformancePlan" @change="onPerformanceTmpChange" />
         </app-view>
     </app-modal>
 </template>
@@ -45,12 +44,9 @@ import { shallowRef, PropType, onMounted, defineAsyncComponent } from 'vue'
 import { CellGroup, Cell, Button, Stepper, Field, Form, FormInstance, FieldRule } from 'vant'
 import { fullloading } from '@/utils/vant'
 import { useHdWROrder } from '@/business/trade'
-import { onBeforeRouteLeave } from 'vue-router'
 import AppModal from '@/components/base/modal/index.vue'
 
-const PerformanceTmp = defineAsyncComponent(() => import('../../../../../spot/add/components/preformance/index.vue'))
-const showPerformancePlan = shallowRef(false)
-const performance = shallowRef<Partial<Model.PerformancePlanRsp>>({}) //选中的履约模板
+const Performance = defineAsyncComponent(() => import('../../../../../../components/modules/performance/index.vue'))
 
 const props = defineProps({
     selectedRow: {
@@ -61,6 +57,7 @@ const props = defineProps({
 
 const { formData, listingSubmit } = useHdWROrder()
 const formRef = shallowRef<FormInstance>()
+const performanceRef = shallowRef()
 const showModal = shallowRef(true)
 const refresh = shallowRef(false) // 是否刷新父组件数据
 
@@ -92,16 +89,6 @@ const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
     }],
 }
 
-// 选择履约模板
-const onPerformanceTmpChange = (item: Model.PermancePlanTmpRsp) => {
-    performance.value = item
-    formData.PerformanceTemplateID = item.autoid
-    if (formData.PerformanceTemplateID) {
-        formRef.value?.validate('PerformanceTemplateID')
-    }
-    showPerformancePlan.value = false
-}
-
 const onSubmit = () => {
     const { wrstandardid, subnum, deliverygoodsid, ladingbillid = '0', wrfactortypeid = '0' } = props.selectedRow ?? {}
     formData.WRStandardID = wrstandardid
@@ -122,8 +109,10 @@ const onSubmit = () => {
 
 // 关闭弹窗
 const closed = (isRefresh = false) => {
-    refresh.value = isRefresh
-    showModal.value = false
+    if (performanceRef.value?.closed()) {
+        refresh.value = isRefresh
+        showModal.value = false
+    }
 }
 
 onMounted(() => {
@@ -134,14 +123,4 @@ onMounted(() => {
 defineExpose({
     closed,
 })
-
-// 离开页面前关闭组件
-onBeforeRouteLeave((to, from, next) => {
-    if (showPerformancePlan.value) {
-        showPerformancePlan.value = false
-        next(false)
-    } else {
-        next()
-    }
-})
 </script>

src/packages/mobile/views/spot/add/components/buy/index.vue

@@ -2,6 +2,7 @@
     <app-view class="g-form">
         <Form ref="formRef" class="g-form__container" @submit="formSubmit">
             <CellGroup inset>
+                <Performance ref="performanceRef" name="PerformanceTemplateID" v-model="formData.PerformanceTemplateID" />
                 <Field name="WRFactorTypeId" label="现货仓单" placeholder="请选择" v-model="selectedRow.wrfactortypeid"
                     :rules="formRules.WRFactorTypeId" @click="showWarehouseReceipt = true" is-link readonly />
                 <template v-if="selectedRow.wrfactortypeid">
@@ -13,8 +14,6 @@
                         </template>
                     </Field>
                 </template>
-                <Field name="PerformanceTemplateID" label="履约模板" placeholder="请选择" v-model="formData.PerformanceTemplateID" :rules="formRules.PerformanceTemplateID"
-                 @click="showPerformancePlan = true" is-link readonly />
                 <Field name="FixedPrice" :rules="formRules.FixedPrice" label="价格">
                     <template #input>
                         <Stepper v-model="formData.FixedPrice" theme="round" :min="0" :decimal-length="2" :default-value="0"
@@ -40,7 +39,6 @@
             </div>
         </template>
         <component :is="WarehouseReceipt" v-model:show="showWarehouseReceipt" @change="onChange" />
-        <component :is="PerformanceTmp" v-model:show="showPerformancePlan" @change="onPerformanceTmpChange" />
     </app-view>
 </template>
 
@@ -53,15 +51,14 @@ import { useNavigation } from '../../../../../router/navigation'
 import { useHdWROrder } from '@/business/trade'
 
 const WarehouseReceipt = defineAsyncComponent(() => import('./warehouse-receipt.vue'))
-const PerformanceTmp = defineAsyncComponent(() => import('../preformance/index.vue'))
+const Performance = defineAsyncComponent(() => import('../../../../../components/modules/performance/index.vue'))
 
 const { routerBack } = useNavigation()
 const { formData, listingSubmit, amount } = useHdWROrder()
 const formRef = shallowRef<FormInstance>()
+const performanceRef = shallowRef()
 const showWarehouseReceipt = shallowRef(false)
-const showPerformancePlan = shallowRef(false)
 const selectedRow = shallowRef<Partial<Model.HoldLBRsp>>({}) //选中的现货仓单
-const performance = shallowRef<Partial<Model.PerformancePlanRsp>>({}) //选中的履约模板
 
 // 表单验证规则
 const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
@@ -108,16 +105,6 @@ const onChange = (item: Model.HoldLBRsp) => {
     showWarehouseReceipt.value = false
 }
 
-// 选择履约模板
-const onPerformanceTmpChange = (item: Model.PermancePlanTmpRsp) => {
-    performance.value = item
-    formData.PerformanceTemplateID = item.autoid
-    if (formData.PerformanceTemplateID) {
-        formRef.value?.validate('PerformanceTemplateID')
-    }
-    showPerformancePlan.value = false
-}
-
 // 表单提交
 const formSubmit = () => {
     const { wrstandardid, subnum, deliverygoodsid, ladingbillid = '0', wrfactortypeid = '0' } = selectedRow.value
@@ -139,14 +126,7 @@ const formSubmit = () => {
 
 // 离开页面前关闭组件
 onBeforeRouteLeave((to, from, next) => {
-    if (showWarehouseReceipt.value) {
-        showWarehouseReceipt.value = false
-        next(false)
-    } else if (showPerformancePlan.value) {
-        showPerformancePlan.value = false
-        next(false)
-    } else {
-        next()
-    }
+    const flag = performanceRef.value?.closed()
+    next(flag)
 })
 </script>

src/packages/mobile/views/spot/add/components/preformance/index.vue

@@ -1,47 +0,0 @@
-<template>
-    <app-modal direction="right" height="100%">
-        <app-view class="g-form">
-            <template #header>
-                <app-navbar title="选择履约模板" />
-            </template>
-            <RadioGroup class="g-form__container" v-model="checkedRow" v-if="dataList.length">
-                <CellGroup v-for="(item, index) in dataList" :key="index" @click="onChange(item)" inset>
-                    <Cell>
-                        <template #title>
-                            <Radio :name="item" checked-color="#ee0a24">
-                                <ul style="margin-left: .2rem;">
-                                    <li>
-                                        <span>名称：</span>
-                                        <span>{{ item.templatename }}</span>
-                                    </li>
-                                    <ul v-for="(step, i) in item.LstStep" :key="i">
-                                        <span>{{ step.stepinfo }}</span>
-                                        <span>{{ step.stepdate }}</span>
-                                    </ul>
-                                </ul>
-                            </Radio>
-                        </template>
-                    </Cell>
-                </CellGroup>
-            </RadioGroup>
-        </app-view>
-    </app-modal>
-</template>
-
-<script lang="ts" setup>
-import { shallowRef } from 'vue'
-import { RadioGroup, Radio, Cell, CellGroup } from 'vant'
-import { useRequest } from '@/hooks/request'
-import { queryPermancePlanTmp } from '@/services/api/performance'
-import AppModal from '@/components/base/modal/index.vue'
-
-const emit = defineEmits(['update:show', 'change'])
-const checkedRow = shallowRef<Model.PermancePlanTmpRsp>()
-const { dataList } = useRequest(queryPermancePlanTmp)
-
-// 选择履约模板
-const onChange = (item: Model.PermancePlanTmpRsp) => {
-    checkedRow.value = item
-    emit('change', item)
-}
-</script>

src/packages/mobile/views/spot/add/components/sell/index.vue

@@ -2,8 +2,7 @@
     <app-view class="g-form">
         <Form ref="formRef" class="g-form__container" @submit="formSubmit">
             <CellGroup inset>
-                <Field name="PerformanceTemplateID" label="履约模板" placeholder="请选择" v-model="formData.PerformanceTemplateID" :rules="formRules.PerformanceTemplateID"
-                 @click="showPerformancePlan = true" is-link readonly />
+                <Performance ref="performanceRef" name="PerformanceTemplateID" v-model="formData.PerformanceTemplateID" />
                 <Field name="DeliveryGoodsID" label="品类" :rules="formRules.DeliveryGoodsID" is-link>
                     <template #input>
                         <app-select v-model="formData.DeliveryGoodsID" :options="ftDeliveryGoodsList"
@@ -54,7 +53,6 @@
                 <Button type="danger" @click="formRef?.submit" square block>提交</Button>
             </div>
         </template>
-        <component :is="PerformanceTmp" v-model:show="showPerformancePlan" @change="onPerformanceTmpChange" />
     </app-view>
 </template>
 
@@ -71,14 +69,13 @@ import { useHdWROrder } from '@/business/trade'
 import { useAccountStore } from '@/stores'
 import AppSelect from '../../../../../components/base/select/index.vue'
 
-const PerformanceTmp = defineAsyncComponent(() => import('../preformance/index.vue'))
+const Performance = defineAsyncComponent(() => import('../../../../../components/modules/performance/index.vue'))
 
 const { routerBack } = useNavigation()
 const { formData, listingSubmit, amount } = useHdWROrder()
 const accountStore = useAccountStore()
 const formRef = shallowRef<FormInstance>()
-const showPerformancePlan = shallowRef(false)
-const performance = shallowRef<Partial<Model.PerformancePlanRsp>>({}) //选中的履约模板
+const performanceRef = shallowRef()
 
 const { dataList: ftDeliveryGoodsList } = useRequest(queryFtDeliveryGoods)
 const { dataList: wrStandardFactoryItems, run: getWrStandardFactoryItems } = useRequest(queryWrStandardFactoryItem, { manual: true })
@@ -130,16 +127,6 @@ const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
     }],
 }
 
-// 选择履约模板
-const onPerformanceTmpChange = (item: Model.PermancePlanTmpRsp) => {
-    performance.value = item
-    formData.PerformanceTemplateID = item.autoid
-    if (formData.PerformanceTemplateID) {
-        formRef.value?.validate('PerformanceTemplateID')
-    }
-    showPerformancePlan.value = false
-}
-
 // 选择品类时触发
 const onDeliveryGoodsChange = (deliverygoodsid: number) => {
     const item = ftDeliveryGoodsList.value.find((e) => e.deliverygoodsid === deliverygoodsid)
@@ -183,11 +170,7 @@ const formSubmit = () => {
 
 // 离开页面前关闭组件
 onBeforeRouteLeave((to, from, next) => {
-    if (showPerformancePlan.value) {
-        showPerformancePlan.value = false
-        next(false)
-    } else {
-        next()
-    }
+    const flag = performanceRef.value?.closed()
+    next(flag)
 })
 </script>

src/packages/mobile/views/spot/detail/components/listing/index.vue

@@ -2,7 +2,7 @@
     <app-popup class="supply-demand-listing" :title="buyorsell === BuyOrSell.Sell ? '我要卖' : '我要买'" v-model:show="showModal"
         :refresh="refresh">
         <Form class="supply-demand-listing__form" ref="formRef" @submit="onSubmit">
-            <Performance ref="performanceRef" v-model="formData.PerformanceTemplateID" />
+            <Performance ref="performanceRef" name="PerformanceTemplateID" v-model="formData.PerformanceTemplateID" />
             <Field name="FixedPrice" :rules="formRules.FixedPrice" label="挂牌价格">
                 <template #input>
                     <Stepper v-model="formData.FixedPrice" theme="round" :decimal-length="2" :auto-fixed="false"