vue3.2/Vite/Ts43: 处理修改品牌功能

└─src
    └─views
        └─product
            └─trademark
                └─index.vue

<template>
  <el-card>
    <!-- ... -->
    <el-bottom type="primary" size="default" icon="Plus" @click="addTrademark">添加品牌</el-button>
    <!-- ... -->
    <el-table border :data="trademarkArr">
      <!-- ... -->
      <el-table-column label="品牌操作">
        <template #="{row}">
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="updateTrademark(row)"
          ></el-button>
          <el-button type="primary" size="small" icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 对话框组件 -->
  <el-dialog v-model="dialogFormVisible" title="添加品牌">
    <el-form>
      <el-form-item label="品牌名称" label-width="80px">
        <el-input
          placehodler="请输入品牌名称"
          v-model="trademarkParams.tmName"
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO" label-width="80px">
        <el-upload
          action="/api/admin/product/fileUpload"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl" />
          <el-icon v-else>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { reactive } from "vue";
  import type { TradeMark } from "@/api/product/trademark/type";
  import {
    reqHasTrademark,
    reqAddOrUpdateTrademark,
  } from "@/api/product/trademark";

  let trademarkParams = reactive<TradeMark>({
    tmName: "",
    logoUrl: "",
  });

  let addTrademark = () => {
    //...
    trademarkParams.id = 0;
    trademarkParams.tmName = "";
    trademarkParams.logoUrl = "";
    //...
  }

  let updateTrademark = (row: TradeMark) => {
    // ...
    // trademarkParams.id = row.id;
    // trademarkParams.tmName = row.tmName;
    // trademarkParams.logoUrl = row.logoUrl;
    Object.assign(trademarkParams, row);
    // ...
  };
  //...
  const confirm = async () => {
    // 提交服务器
    const res: any = await reqAddOrUpdateTrademark(trademarkParams);
    if (res.code === 200) {
      dialogFormVisible.value = false;
      ElMessage({
        type: "success",
        message: "添加品牌成功",
      });
      // 重新请求所有品牌数据，重新渲染 table
      // 修改留在当前页，添加去到第一页
      getHasTrademark(trademarkParams.id ? pageNo.value : 1);
    } else {
      ElMessage({
        type: "error",
        message: "添加品牌失败",
      });
      dialogFormVisible.value = false;
    }
  };
  //...
</script>