vue2server7 2.3.8 → 2.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/111.txt

@@ -0,0 +1,44 @@
+import axios from "axios";
+
+const service = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE,
+  timeout: 15000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// 分页字段
+const PAGE_KEYS = ["pageIndex", "pageSize"];
+
+// 拆分函数
+function splitHeadBody(params = {}, tranCode) {
+  const head = {
+    tranCode, // 关键：接口地址放进 head.tranCode
+  };
+  const body = {};
+
+  Object.keys(params).forEach((key) => {
+    if (PAGE_KEYS.includes(key)) {
+      head[key] = params[key];
+    } else {
+      body[key] = params[key];
+    }
+  });
+
+  return { head, body };
+}
+
+const request = {
+  post(tranCode, params = {}, config = {}) {
+    const { head, body } = splitHeadBody(params, tranCode);
+
+    return service.post(
+      "/gateway", // 实际统一请求地址
+      { head, body },
+      config
+    );
+  },
+};
+
+export default request;

package/test/66.text

@@ -0,0 +1,181 @@
+下面给你一个Vue3 + Element Plus里“父组件是表格，点行/按钮弹出修改 Dialog”的标准封装方式：把 Dialog 做成独立组件，通过 v-model 控制显示，父组件把“当前行数据”传进去；Dialog 内部用本地表单副本编辑，点击保存再把结果 emit 回父组件。
+
+⸻
+
+1）子组件：EditDialog.vue（封装 Dialog）
+
+关键点：
+	•	用 modelValue + update:modelValue 做 v-model（显示/隐藏）
+	•	接收 row（要编辑的数据）
+	•	watch row：每次打开时深拷贝到本地 form
+	•	保存时 emit('submit', form) 给父组件
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    title="修改"
+    width="520px"
+    @close="handleClose"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+
+      <el-form-item label="年龄" prop="age">
+        <el-input-number v-model="form.age" :min="0" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="emitVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="handleSubmit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue"
+import type { FormInstance, FormRules } from "element-plus"
+
+type Row = { id: number; name: string; age: number }
+
+const props = defineProps<{
+  modelValue: boolean
+  row?: Row | null
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void
+  (e: "submit", v: Row): void
+  (e: "closed"): void
+}>()
+
+const visible = computed(() => props.modelValue)
+
+const formRef = ref<FormInstance>()
+const saving = ref(false)
+
+// 本地表单副本（避免直接改父组件传入的 row）
+const form = reactive<Row>({
+  id: 0,
+  name: "",
+  age: 0,
+})
+
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+  age: [{ required: true, message: "请输入年龄", trigger: "change" }],
+}
+
+// 每次 row 改变（尤其是点击不同表格行），刷新本地 form
+watch(
+  () => props.row,
+  (val) => {
+    if (!val) return
+    // 简单深拷贝（行数据如果有更深层结构可换 lodash.clonedeep）
+    Object.assign(form, JSON.parse(JSON.stringify(val)))
+    // 打开时清理校验提示
+    formRef.value?.clearValidate?.()
+  },
+  { immediate: true, deep: true }
+)
+
+function emitVisible(v: boolean) {
+  emit("update:modelValue", v)
+}
+
+function handleClose() {
+  emit("closed")
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate()
+
+  try {
+    saving.value = true
+    // 交给父组件去调接口/更新表格
+    emit("submit", { ...form })
+    emitVisible(false)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+
+⸻
+
+2）父组件：TablePage.vue（表格 + 弹窗）
+
+关键点：
+	•	父组件维护：dialogVisible、currentRow
+	•	点击行/按钮：设置 currentRow，再 dialogVisible = true
+	•	接收子组件 submit：调用接口更新后刷新表格
+
+<template>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="name" label="姓名" />
+    <el-table-column prop="age" label="年龄" />
+    <el-table-column label="操作" width="120">
+      <template #default="{ row }">
+        <el-button link type="primary" @click="openEdit(row)">修改</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <EditDialog
+    v-model="dialogVisible"
+    :row="currentRow"
+    @submit="handleUpdate"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import EditDialog from "./EditDialog.vue"
+
+type Row = { id: number; name: string; age: number }
+
+const tableData = ref<Row[]>([
+  { id: 1, name: "Alice", age: 18 },
+  { id: 2, name: "Bob", age: 22 },
+])
+
+const dialogVisible = ref(false)
+const currentRow = ref<Row | null>(null)
+
+function openEdit(row: Row) {
+  // 这里建议也做一次拷贝，避免 currentRow 与表格 data 同引用
+  currentRow.value = JSON.parse(JSON.stringify(row))
+  dialogVisible.value = true
+}
+
+async function handleUpdate(payload: Row) {
+  // 1) 调接口更新
+  // await api.updateUser(payload)
+
+  // 2) 本地示例：更新 tableData
+  const idx = tableData.value.findIndex((x) => x.id === payload.id)
+  if (idx !== -1) tableData.value[idx] = payload
+
+  // 3) 或者你也可以直接 reloadList()
+}
+</script>
+
+
+⸻
+
+3）常见坑（你可能会遇到）
+	1.	不要直接在 Dialog 里改 props.row
+	•	Vue 会警告，而且你会把表格行数据“实时改掉”，点取消也回不去
+✅ 用本地 form 副本（上面就是这么做的）
+	2.	点击不同的行要能刷新弹窗内容
+	•	需要 watch(props.row)，每次赋值给 form
+	3.	关闭弹窗时表单校验提示残留
+	•	打开时 clearValidate() 或关闭时 resetFields()（看你的需求）
+
+⸻
+
+如果你把“表单字段”和“行数据结构（row）”贴出来（比如有嵌套对象、字典下拉、日期范围之类），我可以把这个封装升级成更完整的版本：支持 open(row)、支持新增/编辑同一个 Dialog、支持异步加载详情、支持表单重置与防抖提交。