update

src/views/order/performance_information/components/performance_information_buy_performance/components/breach_contract/index.vue

@@ -4,32 +4,88 @@
           :placement="'bottom'"
           :visible="visible"
           @cancel="cancel">
-    违约
+    <div class="listed">
+      <div class="formBar">
+        <a-form class="inlineForm dialogForm"
+                ref="formRef"
+                :model="formState"
+                :rules="rules">
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <a-form-item label="品种">
+                <span class="white">{{selectedRow.deliverygoodsname}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="仓库">
+                <span class="white">{{selectedRow.warehousename}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="履约商品">
+                <span class="white">{{selectedRow.wrtypename}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="当前步骤">
+                <span class="white">{{selectedRow.curstepname}}（超期天数：331）</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="关联单号">
+                <span class="white">86989565623</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="附件"
+                           name="url">
+                <UploadImg :visible="visible"
+                           :imgList="uploadImgList"
+                           @upload="uploadImgAction" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="备注"
+                           name="remark">
+                <a-input class="commonInput"
+                         v-model:value="formState.remark"
+                         style="width: 100%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24"
+                 type="flex"
+                 justify="center">
+            <a-col :span="24">
+              <a-form-item class="tc">
+                <a-button class="listedBtn"
+                          :loading="loading"
+                          :disabled="loading"
+                          @click="submit">提交</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </div>
   </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
-import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import Drawer from '@/common/components/drawer/index.vue';
-import { QueryWrPositionReq, WrHoldLB, WrPosition } from '@/services/go/wrtrade/interface';
-import { getInTaAccount, getUserId } from '@/services/bus/account';
-import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
-import { hdWROrder } from '@/services/proto/warehousetrade';
-import { v4 as uuidv4 } from 'uuid';
-import moment from 'moment';
+import { WrPosition } from '@/services/go/wrtrade/interface';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 import { _closeModal } from '@/common/setup/modal/modal';
+import { handleForm } from './setup';
 import { validateAction } from '@/common/setup/form';
-import { getMarketRunByTradeMode } from '@/services/bus/market';
-import { message } from 'ant-design-vue';
-import { getGoodsGroupsByTradeMode } from '@/services/bus/goods';
-import { TradeMode } from '@/common/constants/enumCommon';
-import { WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
+import { FormState } from './interface';
+import UploadImg from '@/common/components/uploadImg/index.vue';
+import { getUploadImg } from '@/common/setup/upload';
 
 export default defineComponent({
     name: ModalEnum.performance_information_buy_performance_breach_contract,
-    components: { Drawer },
+    components: { Drawer, UploadImg },
     emits: ['cancel', 'update'],
     props: {
         selectedRow: {
@@ -39,11 +95,22 @@ export default defineComponent({
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
-        console.log('selectedRow', props.selectedRow);
-
+        const loading = ref<boolean>(false);
+        const { rules, formState, formRef } = handleForm();
+        const { uploadImgAction, uploadImgList, handleImg } = getUploadImg();
+        function submit() {
+            validateAction<FormState>(formRef, formState).then((param) => {});
+        }
         return {
             visible,
             cancel,
+            submit,
+            loading,
+            rules,
+            formState,
+            formRef,
+            uploadImgAction,
+            uploadImgList,
         };
     },
 });

src/views/order/performance_information/components/performance_information_buy_performance/components/breach_contract/interface.ts

@@ -0,0 +1,4 @@
+export interface FormState {
+    url: string,
+    remark: string,
+}

src/views/order/performance_information/components/performance_information_buy_performance/components/breach_contract/setup.ts

@@ -0,0 +1,14 @@
+import { reactive, ref, UnwrapRef } from "vue";
+import { FormState } from "./interface";
+
+export function handleForm() {
+    const formRef = ref();
+    const formState: UnwrapRef<FormState> = reactive({
+        url: '',
+        remark: ''
+    })
+    const rules = {
+        url: [{ required: true, message: '请上传附件', trigger: 'blur', }],
+    }
+    return { rules, formState, formRef }
+}

src/views/order/performance_information/components/performance_information_buy_performance/components/extension/index.vue

@@ -28,7 +28,7 @@
             </a-col>
             <a-col :span="24">
               <a-form-item label="当前步骤">
-                <span class="white">买方支付（超期天数：331）</span>
+                <span class="white">{{selectedRow.curstepname}}（（超期天数：331）</span>
               </a-form-item>
             </a-col>
             <a-col :span="24">
@@ -64,8 +64,6 @@
                           :loading="loading"
                           :disabled="loading"
                           @click="submit">提交</a-button>
-                <a-button class="ml10 cancelBtn"
-                          @click="cancel">取消</a-button>
               </a-form-item>
             </a-col>
           </a-row>

src/views/order/performance_information/components/performance_information_buy_performance/components/pay/index.vue

@@ -31,7 +31,7 @@
             </a-col>
             <a-col :span="24">
               <a-form-item label="当前步骤">
-                <span class="white">买方支付</span>
+                <span class="white">{{selectedRow.curstepname}}（</span>
               </a-form-item>
             </a-col>
             <a-col :span="24">
@@ -54,8 +54,6 @@
                           :loading="loading"
                           :disabled="loading"
                           @click="submit">提交</a-button>
-                <a-button class="ml10 cancelBtn"
-                          @click="cancel">取消</a-button>
               </a-form-item>
             </a-col>
           </a-row>