xxxx

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

@@ -2,6 +2,8 @@
     <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">
+            <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" :decimal-length="2" :auto-fixed="false"
@@ -40,11 +42,12 @@
             <Button :type="buyorsell === BuyOrSell.Sell ? 'primary' : 'danger'" block round
                 @click="formRef?.submit">确定</Button>
         </template>
+        <component :is="PerformanceTmp" v-model:show="showPerformancePlan" @change="onPerformanceTmpChange" />
     </app-popup>
 </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 +55,10 @@ 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 { onBeforeRouteLeave } from 'vue-router'
+
 //import AppSelect from '../../../../../components/base/select/index.vue'
+const PerformanceTmp = defineAsyncComponent(() => import('../../../add/components/preformance/index.vue'))
 
 const props = defineProps({
     quoteItem: {
@@ -65,6 +71,7 @@ const props = defineProps({
     }
 })
 
+const showPerformancePlan = shallowRef(false)
 const { formData, listingSubmit, amount } = useHdWROrder()
 const accountStore = useAccountStore()
 const formRef = shallowRef<FormInstance>()
@@ -72,6 +79,8 @@ const refresh = shallowRef(false) // 是否刷新父组件数据
 const showModal = shallowRef(true)
 //const dataList = shallowRef<Model.HoldLBRsp[]>([]) //现货仓单列表
 const selectedRow = shallowRef<Model.HoldLBRsp>() //选中的现货仓单
+const performance = shallowRef<Partial<Model.PerformancePlanRsp>>({}) //选中的履约模板
+
 
 // 表单验证规则
 const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
@@ -102,6 +111,16 @@ 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 onConfirm = (value: string) => {
 //     selectedRow.value = dataList.value.find((e) => e.wrid === value)
@@ -159,6 +178,16 @@ onMounted(() => {
 defineExpose({
     closed,
 })
+
+// 离开页面前关闭组件
+onBeforeRouteLeave((to, from, next) => {
+    if (showPerformancePlan.value) {
+        showPerformancePlan.value = false
+        next(false)
+    } else {
+        next()
+    }
+})
 </script>
 
 <style lang="less">