商户管理新增logo

src/components/ZxDialog/src/ZxDialog.vue

@@ -18,7 +18,7 @@
     </template>
     <div class="left">
       <SPuUploadImg v-model="picUrl" :disabled="isDetail" />
-      <el-tabs v-model="activeTabName" @tab-click="handleTabClick" tab-position="left">
+      <el-tabs v-model="activeTabName" @tab-click="handleTabClick" tab-position="left" class="child-tabs">
         <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.component" />
       </el-tabs>
     </div>
@@ -59,13 +59,14 @@ const props = defineProps({
   initialData: Object,
   buttonActions: Array,
 });
-
+// console.log(props.initialData.logoUrl)
 // 从路由中引入store中的app仓库
 import { useAppStore } from '@/store/modules/app'
 const appStore = useAppStore()
 const mobile = computed(() => appStore.getMobile)
 
-let picUrl = ref("");
+
+
 let OperationsId = ref(props.id);
 const dialogVisible = ref(false);
 const activeTabName = ref(props.initialComponent);
@@ -84,17 +85,26 @@ watch(activeTabName, (newVal) => {
 watch(() => props.id, (newId) => {
   OperationsId.value = newId;
 });
-// watch(() => props.initialData.logoUrl, (newVal) => {
-//   console.log("加载时检测到new", newVal)
-//   updateData();
-// });
-// const updateParentData = inject('updateParentData');
-// const updateData = () => {
-//   updateParentData();
-// };
-// watch(() => picUrl.value, (newVal) => {
-//   console.log("new", newVal)
-// });
+let picUrl = ref("");
+// 如果是新增，清空logo
+watch(() => props.openType, (newVal) => {
+  if (newVal == '新增') {
+    picUrl.value = '';
+  }
+});
+
+const updateInitialData = inject('updateInitialData');
+// 监听logo上传，一旦上传，更新父组件数据
+watch(() => picUrl.value, (newVal) => {
+  updateInitialData.value.logoUrl = newVal;
+});
+// 监听图片加载
+ watch(() => props.initialData,(newVal) => {
+  console.log(newVal.logoUrl)
+  picUrl.value=newVal.logoUrl;
+});
+
+
 function handleTabClick(tab) {
   activeTabName.value = tab.name;
 }
@@ -105,6 +115,7 @@ defineExpose({ dialogVisible });
 
 
 <style type="text/css">
+
 .el-dialog__body {
   padding: unset;
 }

src/views/system/sale/merchant/components/MerchantBaseInfo.vue

@@ -198,11 +198,9 @@ defineExpose({ validate })
 const updateInitialData = inject('updateInitialData');
 
 watch(formData, (data) => {
-
-  copyValueToTarget(updateInitialData.value, formData)
-  // try { updateData() } catch {
-  //   console.log("chakan ")
-  // }
+  try { copyValueToTarget(updateInitialData.value, formData) } catch {
+    console.log("chakan ")
+  }
 
 
 },

src/views/system/sale/merchant/index.vue

@@ -157,9 +157,14 @@ const initialData = ref({
   expireTime: undefined,
   logoUrl: undefined,
 });
-const addData = JSON.parse(JSON.stringify(initialData.value));
-
 
+// 定义一个函数来重置 initialData
+function resetInitialData() {
+  // 使用 Object.keys 遍历对象的所有属性，并将它们设置为 undefined
+  for (const key of Object.keys(initialData.value)) {
+    initialData.value[key] = undefined;
+  }
+}
 provide('updateInitialData', initialData);
 
 
@@ -223,7 +228,6 @@ async function showDialog(opentype: string, row: object) {
     // 如果row不为null则证明是有数据，即是说是编辑或者查看状态
     // 获取通过id查到数据再传给子组件
     initialData.value = await MerchantApi.getMerchant(row.id);
-    // console.log(initialData.value)
     // 如果是移动端，则进入移动端的页面
     if (mobile.value) {
       push({
@@ -248,7 +252,7 @@ async function showDialog(opentype: string, row: object) {
     isDetail.value = false
     dialogTitle.value = opentype
     parentId.value = 0;
-    initialData.value = addData.value
+    resetInitialData()
   }
 
   dialogVisible.value = true;