feat: 质检功能优化 - 支持快速合格判定 1. 将检验管理页面的"编辑"按钮改为"质检" 2. 点击"质检"时弹出对话框选择合格/不合...

buhuazhen

10 天以前 91874fc927117dfeb9050791dd8f060e874d2fd6

 feat: 质检功能优化 - 支持快速合格判定
  1. 将检验管理页面的"编辑"按钮改为"质检"
  2. 点击"质检"时弹出对话框选择合格/不合格
  3. 选择"合格"时自动填充当前时间和当前用户，直接提交
  4. 选择"不合格"时进入详细填写页面，检测结果默认为"不合格"涉及文件：- 原材料检验、出厂检验、过程检验的index.vue和formDia.vue

 src/views/qualityManagement/finalInspection/components/formDia.vue

@@ -203,13 +203,13 @@
const modelOptions = ref([]);

// 打开弹框
const openDialog = async (type, row) => {
const openDialog = async (type, row, defaultCheckResult = "") => {
  operationType.value = type;
  dialogFormVisible.value = true;
  // 先清空表单验证状态，避免闪烁
  await nextTick();
  proxy.$refs.formRef?.clearValidate();
  

  // 并行加载基础数据
  const [userListsRes] = await Promise.all([
    userListNoPage(),
@@ -219,16 +219,20 @@
    })
  ]);
  userList.value = userListsRes.data;
  

  form.value = {}
  testStandardOptions.value = [];
  tableData.value = [];
  

  if (operationType.value === 'edit') {
    // 先保存 testStandardId，避免被清空
    const savedTestStandardId = row.testStandardId;
    // 先设置表单数据，但暂时清空 testStandardId，等选项加载完成后再设置
    form.value = {...row, testStandardId: ''}
    // 如果传入了默认检测结果，覆盖row中的值
    if (defaultCheckResult) {
      form.value.checkResult = defaultCheckResult;
    }
    currentProductId.value = row.productId || 0
    // 清空验证状态，避免数据加载过程中的校验闪烁
    nextTick(() => {

 src/views/qualityManagement/finalInspection/index.vue

@@ -40,23 +40,56 @@
    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
    <FormDia ref="formDia" @close="handleQuery"></FormDia>
    <files-dia ref="filesDia" @close="handleQuery"></files-dia>
        <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
    <!-- 检验结果选择对话框 -->
    <el-dialog v-model="quickCheckVisible" title="检验结果" width="30%" @close="closeQuickCheck">
      <el-form :model="quickCheckForm" label-width="140px" label-position="top" ref="quickCheckRef">
        <el-form-item label="检测结果：" required>
          <el-radio-group v-model="quickCheckForm.checkResult">
            <el-radio value="合格">合格</el-radio>
            <el-radio value="不合格">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="检验员：">
          <el-select v-model="quickCheckForm.checkName" placeholder="请选择" clearable style="width: 100%">
            <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="检测日期：">
          <el-date-picker
            v-model="quickCheckForm.checkTime"
            type="date"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleQuickCheckConfirm">确认</el-button>
          <el-button @click="closeQuickCheck">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
                             @close="closeDia">
            <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                <el-form-item label="检验员：" prop="checkName">
                    <el-select v-model="form.checkName" placeholder="请选择" clearable>
                        <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                             :value="item.nickName"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确认</el-button>
                    <el-button @click="closeDia">取消</el-button>
                </div>
            </template>
        </el-dialog>
                <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                    <el-form-item label="检验员：" prop="checkName">
                        <el-select v-model="form.checkName" placeholder="请选择" clearable>
                            <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                                 :value="item.nickName"/>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确认</el-button>
                        <el-button @click="closeDia">取消</el-button>
                    </div>
                </template>
            </el-dialog>
  </div>
</template>

@@ -159,10 +192,10 @@
    width: 280,
    operation: [
      {
        name: "编辑",
        name: "检验",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
          openQuickCheck(row);
        },
                disabled: (row) => {
                    // 已提交则禁用
@@ -181,43 +214,43 @@
          openFilesFormDia(row);
        },
      },
            {
                name: "提交",
                type: "text",
                clickFun: (row) => {
                    submit(row.id);
                },
                disabled: (row) => {
                    // 已提交则禁用
                    if (row.inspectState == 1) return true;
                    // 如果检验员有值，只有当前登录用户能提交
                    if (row.checkName) {
                        return row.checkName !== userStore.nickName;
                    }
                    return false;
                }
            },
            {
                name: "分配检验员",
                type: "text",
                clickFun: (row) => {
                    if (!row.checkName) {
                        open(row)
                    } else {
                        proxy.$modal.msgError("检验员已存在");
                {
                    name: "提交",
                    type: "text",
                    clickFun: (row) => {
                        submit(row.id);
                    },
                    disabled: (row) => {
                        // 已提交则禁用
                        if (row.inspectState == 1) return true;
                        // 如果检验员有值，只有当前登录用户能提交
                        if (row.checkName) {
                            return row.checkName !== userStore.nickName;
                        }
                        return false;
                    }
                },
                disabled: (row) => {
                    return row.inspectState == 1 || row.checkName;
                }
            },
            {
                name: "下载",
                type: "text",
                clickFun: (row) => {
                    downLoadFile(row);
                {
                    name: "分配检验员",
                    type: "text",
                    clickFun: (row) => {
                        if (!row.checkName) {
                            open(row)
                        } else {
                            proxy.$modal.msgError("检验员已存在");
                        }
                    },
                    disabled: (row) => {
                        return row.inspectState == 1 || row.checkName;
                    }
                },
            },
                {
                    name: "下载",
                    type: "text",
                    clickFun: (row) => {
                        downLoadFile(row);
                    },
                },
    ],
  },
]);
@@ -240,6 +273,13 @@
    checkName: ""
});
const dialogFormVisible = ref(false);
const quickCheckVisible = ref(false);
const quickCheckForm = ref({
    checkResult: "合格",
    checkName: "",
    checkTime: ""
});
const quickCheckRef = ref(null);

const changeDaterange = (value) => {
  searchForm.value.entryDateStart = undefined;
@@ -378,17 +418,86 @@
            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        const downloadUrl = window.URL.createObjectURL(blob)
		

        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = '原材料检验报告.docx'
        document.body.appendChild(link)
        link.click()
		

        document.body.removeChild(link)
        window.URL.revokeObjectURL(downloadUrl)
    })
};

// 打开检验结果选择对话框
const openQuickCheck = async (row) => {
    currentRow.value = row;
    // 加载用户列表
    try {
        const userLists = await userListNoPage();
        userList.value = userLists.data || [];
    } catch (e) {
        console.error("加载检验员列表失败", e);
        userList.value = [];
    }
    // 设置默认值
    quickCheckForm.value = {
        checkResult: "合格",
        checkName: userStore.nickName || "",
        checkTime: dayjs().format("YYYY-MM-DD")
    };
    quickCheckVisible.value = true;
};

// 关闭检验结果选择对话框
const closeQuickCheck = () => {
    quickCheckVisible.value = false;
    quickCheckForm.value = {
        checkResult: "合格",
        checkName: "",
        checkTime: ""
    };
};

// 确认检验结果
const handleQuickCheckConfirm = () => {
    if (!quickCheckForm.value.checkResult) {
        proxy.$modal.msgWarning("请选择检测结果");
        return;
    }
    if (!quickCheckForm.value.checkName) {
        proxy.$modal.msgWarning("请选择检验员");
        return;
    }
    if (!quickCheckForm.value.checkTime) {
        proxy.$modal.msgWarning("请选择检测日期");
        return;
    }

    if (quickCheckForm.value.checkResult === "合格") {
        // 合格：直接提交
        const data = {
            id: currentRow.value.id,
            checkResult: "合格",
            checkName: quickCheckForm.value.checkName,
            checkTime: quickCheckForm.value.checkTime,
            inspectType: 2
        };
        qualityInspectUpdate(data).then(res => {
            proxy.$modal.msgSuccess("检验成功");
            closeQuickCheck();
            getList();
        });
    } else {
        // 不合格：打开详细填写页面
        closeQuickCheck();
        nextTick(() => {
            formDia.value?.openDialog("edit", currentRow.value, "不合格");
        });
    }
};

onMounted(() => {
  getList();
});

 src/views/qualityManagement/processInspection/components/formDia.vue

@@ -216,7 +216,7 @@
const modelOptions = ref([]);

// 打开弹框
const openDialog = async (type, row) => {
const openDialog = async (type, row, defaultCheckResult = "") => {
    operationType.value = type;
    getOptions().then((res) => {
        supplierList.value = res.data;
@@ -231,7 +231,7 @@
    }
    let userLists = await userListNoPage();
    userList.value = userLists.data;
    // 先重置表单数据（保持字段完整，避免弹窗首次渲染时触发必填红框“闪一下”）
    // 先重置表单数据（保持字段完整，避免弹窗首次渲染时触发必填红框"闪一下"）
    form.value = {
        checkTime: "",
        process: "",
@@ -244,7 +244,7 @@
        unit: "",
        quantity: "",
        checkCompany: "",
        checkResult: "",
        checkResult: defaultCheckResult || "",
    }
    testStandardOptions.value = [];
    tableData.value = [];
@@ -255,6 +255,10 @@
        const savedTestStandardId = row.testStandardId;
        // 先设置表单数据，但暂时清空 testStandardId，等选项加载完成后再设置
        form.value = {...row, testStandardId: ''}
        // 如果传入了默认检测结果，覆盖row中的值
        if (defaultCheckResult) {
            form.value.checkResult = defaultCheckResult;
        }
        currentProductId.value = row.productId || 0
        // 关键：编辑时加载规格型号下拉选项，才能反显 productModelId
        if (currentProductId.value) {

 src/views/qualityManagement/processInspection/index.vue

@@ -40,23 +40,56 @@
    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
    <FormDia ref="formDia" @close="handleQuery"></FormDia>
    <files-dia ref="filesDia" @close="handleQuery"></files-dia>
        <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
    <!-- 检验结果选择对话框 -->
    <el-dialog v-model="quickCheckVisible" title="检验结果" width="30%" @close="closeQuickCheck">
      <el-form :model="quickCheckForm" label-width="140px" label-position="top" ref="quickCheckRef">
        <el-form-item label="检测结果：" required>
          <el-radio-group v-model="quickCheckForm.checkResult">
            <el-radio value="合格">合格</el-radio>
            <el-radio value="不合格">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="检验员：">
          <el-select v-model="quickCheckForm.checkName" placeholder="请选择" clearable style="width: 100%">
            <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="检测日期：">
          <el-date-picker
            v-model="quickCheckForm.checkTime"
            type="date"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleQuickCheckConfirm">确认</el-button>
          <el-button @click="closeQuickCheck">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
                             @close="closeDia">
            <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                <el-form-item label="检验员：" prop="checkName">
                    <el-select v-model="form.checkName" placeholder="请选择" clearable>
                        <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                             :value="item.nickName"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确认</el-button>
                    <el-button @click="closeDia">取消</el-button>
                </div>
            </template>
        </el-dialog>
                <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                    <el-form-item label="检验员：" prop="checkName">
                        <el-select v-model="form.checkName" placeholder="请选择" clearable>
                            <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                                 :value="item.nickName"/>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确认</el-button>
                        <el-button @click="closeDia">取消</el-button>
                    </div>
                </template>
            </el-dialog>
  </div>
</template>

@@ -164,10 +197,10 @@
    width: 280,
    operation: [
      {
        name: "编辑",
        name: "检验",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
          openQuickCheck(row);
        },
                disabled: (row) => {
                    // 已提交则禁用
@@ -186,43 +219,43 @@
          openFilesFormDia(row);
        },
      },
            {
                name: "提交",
                type: "text",
                clickFun: (row) => {
                    submit(row.id);
                },
                disabled: (row) => {
                    // 已提交则禁用
                    if (row.inspectState == 1) return true;
                    // 如果检验员有值，只有当前登录用户能提交
                    if (row.checkName) {
                        return row.checkName !== userStore.nickName;
                    }
                    return false;
                }
            },
            {
                name: "分配检验员",
                type: "text",
                clickFun: (row) => {
                    if (!row.checkName) {
                        open(row)
                    } else {
                        proxy.$modal.msgError("检验员已存在");
                {
                    name: "提交",
                    type: "text",
                    clickFun: (row) => {
                        submit(row.id);
                    },
                    disabled: (row) => {
                        // 已提交则禁用
                        if (row.inspectState == 1) return true;
                        // 如果检验员有值，只有当前登录用户能提交
                        if (row.checkName) {
                            return row.checkName !== userStore.nickName;
                        }
                        return false;
                    }
                },
                disabled: (row) => {
                    return row.inspectState == 1 || row.checkName;
                }
            },
            {
                name: "下载",
                type: "text",
                clickFun: (row) => {
                    downLoadFile(row);
                {
                    name: "分配检验员",
                    type: "text",
                    clickFun: (row) => {
                        if (!row.checkName) {
                            open(row)
                        } else {
                            proxy.$modal.msgError("检验员已存在");
                        }
                    },
                    disabled: (row) => {
                        return row.inspectState == 1 || row.checkName;
                    }
                },
            },
                {
                    name: "下载",
                    type: "text",
                    clickFun: (row) => {
                        downLoadFile(row);
                    },
                },
    ],
  },
]);
@@ -235,6 +268,13 @@
const form = ref({
    checkName: ""
});
const quickCheckVisible = ref(false);
const quickCheckForm = ref({
    checkResult: "合格",
    checkName: "",
    checkTime: ""
});
const quickCheckRef = ref(null);
const page = reactive({
  current: 1,
  size: 100,
@@ -363,13 +403,13 @@
            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        const downloadUrl = window.URL.createObjectURL(blob)
		

        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = '过程检验报告.docx'
        document.body.appendChild(link)
        link.click()
		

        document.body.removeChild(link)
        window.URL.revokeObjectURL(downloadUrl)
    })
@@ -388,6 +428,75 @@
        proxy.$modal.msg("已取消");
      });
};

// 打开检验结果选择对话框
const openQuickCheck = async (row) => {
    currentRow.value = row;
    // 加载用户列表
    try {
        const userLists = await userListNoPage();
        userList.value = userLists.data || [];
    } catch (e) {
        console.error("加载检验员列表失败", e);
        userList.value = [];
    }
    // 设置默认值
    quickCheckForm.value = {
        checkResult: "合格",
        checkName: userStore.nickName || "",
        checkTime: dayjs().format("YYYY-MM-DD")
    };
    quickCheckVisible.value = true;
};

// 关闭检验结果选择对话框
const closeQuickCheck = () => {
    quickCheckVisible.value = false;
    quickCheckForm.value = {
        checkResult: "合格",
        checkName: "",
        checkTime: ""
    };
};

// 确认检验结果
const handleQuickCheckConfirm = () => {
    if (!quickCheckForm.value.checkResult) {
        proxy.$modal.msgWarning("请选择检测结果");
        return;
    }
    if (!quickCheckForm.value.checkName) {
        proxy.$modal.msgWarning("请选择检验员");
        return;
    }
    if (!quickCheckForm.value.checkTime) {
        proxy.$modal.msgWarning("请选择检测日期");
        return;
    }

    if (quickCheckForm.value.checkResult === "合格") {
        // 合格：直接提交
        const data = {
            id: currentRow.value.id,
            checkResult: "合格",
            checkName: quickCheckForm.value.checkName,
            checkTime: quickCheckForm.value.checkTime,
            inspectType: 1
        };
        qualityInspectUpdate(data).then(res => {
            proxy.$modal.msgSuccess("检验成功");
            closeQuickCheck();
            getList();
        });
    } else {
        // 不合格：打开详细填写页面
        closeQuickCheck();
        nextTick(() => {
            formDia.value?.openDialog("edit", currentRow.value, "不合格");
        });
    }
};

onMounted(() => {
  getList();
});

 src/views/qualityManagement/rawMaterialInspection/components/formDia.vue

@@ -228,7 +228,7 @@
});

// 打开弹框
const openDialog = async (type, row) => {
const openDialog = async (type, row, defaultCheckResult = "") => {
  operationType.value = type;
  getOptions().then((res) => {
    supplierList.value = res.data;
@@ -241,7 +241,7 @@
    console.error("加载检验员列表失败", e);
    userList.value = [];
  }
  // 先重置表单数据（保持字段完整，避免弹窗首次渲染时触发必填红框“闪一下”）
  // 先重置表单数据（保持字段完整，避免弹窗首次渲染时触发必填红框"闪一下"）
    form.value = {
    checkTime: "",
    supplier: "",
@@ -254,7 +254,7 @@
    unit: "",
    quantity: "",
    checkCompany: "",
    checkResult: "",
    checkResult: defaultCheckResult || "",
  }
  testStandardOptions.value = [];
  tableData.value = [];
@@ -264,6 +264,10 @@
    // 先保存 testStandardId，避免被清空
    const savedTestStandardId = row.testStandardId;
    form.value = {...row}
    // 如果传入了默认检测结果，覆盖row中的值
    if (defaultCheckResult) {
      form.value.checkResult = defaultCheckResult;
    }
    currentProductId.value = row.productId || 0
    // 关键：编辑时加载规格型号下拉选项，才能反显 productModelId
    if (currentProductId.value) {

 src/views/qualityManagement/rawMaterialInspection/index.vue

@@ -41,6 +41,39 @@
    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
    <FormDia ref="formDia" @close="handleQuery"></FormDia>
    <files-dia ref="filesDia" @close="handleQuery"></files-dia>
    <!-- 检验结果选择对话框 -->
    <el-dialog v-model="quickCheckVisible" title="检验结果" width="30%" @close="closeQuickCheck">
      <el-form :model="quickCheckForm" label-width="140px" label-position="top" ref="quickCheckRef">
        <el-form-item label="检测结果：" required>
          <el-radio-group v-model="quickCheckForm.checkResult">
            <el-radio value="合格">合格</el-radio>
            <el-radio value="不合格">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="检验员：">
          <el-select v-model="quickCheckForm.checkName" placeholder="请选择" clearable style="width: 100%">
            <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="检测日期：">
          <el-date-picker
            v-model="quickCheckForm.checkTime"
            type="date"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleQuickCheckConfirm">确认</el-button>
          <el-button @click="closeQuickCheck">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
               @close="closeDia">
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
@@ -166,10 +199,10 @@
    width: 280,
    operation: [
      {
        name: "编辑",
        name: "检验",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
          openQuickCheck(row);
        },
                disabled: (row) => {
                    // 已提交则禁用
@@ -236,6 +269,13 @@
const form = ref({
  checkName: ""
});
const quickCheckVisible = ref(false);
const quickCheckForm = ref({
  checkResult: "合格",
  checkName: "",
  checkTime: ""
});
const quickCheckRef = ref(null);
const page = reactive({
  current: 1,
  size: 100,
@@ -390,6 +430,74 @@
  })
};

// 打开检验结果选择对话框
const openQuickCheck = async (row) => {
  currentRow.value = row;
  // 加载用户列表
  try {
    const userLists = await userListNoPage();
    userList.value = userLists.data || [];
  } catch (e) {
    console.error("加载检验员列表失败", e);
    userList.value = [];
  }
  // 设置默认值
  quickCheckForm.value = {
    checkResult: "合格",
    checkName: userStore.nickName || "",
    checkTime: dayjs().format("YYYY-MM-DD")
  };
  quickCheckVisible.value = true;
};

// 关闭检验结果选择对话框
const closeQuickCheck = () => {
  quickCheckVisible.value = false;
  quickCheckForm.value = {
    checkResult: "合格",
    checkName: "",
    checkTime: ""
  };
};

// 确认检验结果
const handleQuickCheckConfirm = () => {
  if (!quickCheckForm.value.checkResult) {
    proxy.$modal.msgWarning("请选择检测结果");
    return;
  }
  if (!quickCheckForm.value.checkName) {
    proxy.$modal.msgWarning("请选择检验员");
    return;
  }
  if (!quickCheckForm.value.checkTime) {
    proxy.$modal.msgWarning("请选择检测日期");
    return;
  }

  if (quickCheckForm.value.checkResult === "合格") {
    // 合格：直接提交
    const data = {
      id: currentRow.value.id,
      checkResult: "合格",
      checkName: quickCheckForm.value.checkName,
      checkTime: quickCheckForm.value.checkTime,
      inspectType: 0
    };
    qualityInspectUpdate(data).then(res => {
      proxy.$modal.msgSuccess("检验成功");
      closeQuickCheck();
      getList();
    });
  } else {
    // 不合格：打开详细填写页面
    closeQuickCheck();
    nextTick(() => {
      formDia.value?.openDialog("edit", currentRow.value, "不合格");
    });
  }
};

onMounted(() => {
  getList();
});