审批详情回显问题处理

src/views/processApproval/components/SendPurchase.vue

@@ -208,7 +208,7 @@
 </template>
 
 <script setup>
-import { ref, getCurrentInstance, onMounted } from "vue";
+import { ref, getCurrentInstance, onMounted, watch, toRefs } from "vue";
 import { showSuccessToast, showFailToast } from "vant";
 import { useRoute } from "vue-router";
 import { setUserInfo, setToken, getUserInfo, formatDate } from "@/utils/auth";
@@ -219,6 +219,11 @@ const typeModalOne = ref(false);
 let selectIndex = ref(null);
 const timePicker = ref(false);
 const userInfo = getUserInfo();
+// 接收父组件的传值
+const props = defineProps({
+  queryData: String,
+});
+const refProps = toRefs(props);
 const formData = ref({
   deptName: userInfo.dept.deptName,
   purchaseName: userInfo.nickName,
@@ -386,9 +391,28 @@ defineExpose({
 });
 
 onMounted(() => {
-  getDtl(route.query);
+  if (route.query.processType) {
+  } else {
+    getDtl(route.query);
+  }
   getDict();
 });
+
+watch(
+  refProps.queryData,
+  (val) => {
+    if (
+      (val && route.query.processType == 10) ||
+      route.query.processType == 20 ||
+      route.query.processType == 30
+    ) {
+      formData.value = refProps.queryData.value;
+    }
+  },
+  {
+    deep: true,
+  }
+);
 </script>
 <style lang="scss" scoped>
 .row {

src/views/processApproval/components/SendPurchasePayment.vue

@@ -20,7 +20,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, onMounted } from "vue";
+import {
+  ref,
+  reactive,
+  getCurrentInstance,
+  onMounted,
+  watch,
+  toRefs,
+} from "vue";
 import { showSuccessToast, showFailToast } from "vant";
 import { useRoute } from "vue-router";
 import testForm from "@/components/testForm/index.vue";
@@ -28,7 +35,11 @@ const proxy = getCurrentInstance().proxy;
 const route = useRoute();
 const formDom = ref(null);
 const formDomOne = ref(null);
-
+// 接收父组件的传值
+const props = defineProps({
+  queryData: String,
+});
+const refProps = toRefs(props);
 const formData = reactive({
   data: {},
 });
@@ -254,12 +265,12 @@ const formConfig = reactive([
       value: "value",
     },
     data: [],
-    changeFn: function (option, item, index) {
-      formData.data[item.prop] = option.selectedOptions[0].value;
-      formData.data[item.prop + "Name"] = option.selectedOptions[0].label;
-      formConfig[index].showPicker = false;
-      changeSupply(option.selectedOptions[0].value);
-    },
+    // changeFn: function (option, item, index) {
+    //   formData.data[item.prop] = option.selectedOptions[0].value;
+    //   formData.data[item.prop + "Name"] = option.selectedOptions[0].label;
+    //   formConfig[index].showPicker = false;
+    //   changeSupply(option.selectedOptions[0].value);
+    // },
   },
   {
     type: "input",
@@ -535,6 +546,25 @@ const handleSubmit = async () => {
   }
 };
 
+watch(
+  refProps.queryData,
+  (val) => {
+    if (
+      (val && route.query.processType == 10) ||
+      route.query.processType == 20 ||
+      route.query.processType == 30
+    ) {
+      formData.data = refProps.queryData.value;
+      formDom.value.formDataShowLabelOne();
+      formDom.value.formDataListShowLabelOne();
+      formDomOne.value.formDataShowLabelOne();
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
 defineExpose({
   handleSubmit,
 });