refactor: eslint代码检查优化

Former-commit-id: 4c11b5d0cdd10f28148cf3d9b593f85e082cdc51

src/views/pms/goods/components/GoodsAttribute.vue

@@ -4,35 +4,15 @@
       <el-card class="box-card">
         <template #header>
           <span>商品属性</span>
-          <el-button
-            style="float: right"
-            type="success"
-            :icon="Plus"
-            size="small"
-            @click="handleAdd"
-          >
+          <el-button style="float: right" type="success" :icon="Plus" size="small" @click="handleAdd">
             添加属性
           </el-button>
         </template>
-        <el-form
-          ref="dataForm"
-          :model="modelValue"
-          :rules="rules"
-          size="small"
-          :inline="true"
-        >
-          <el-table
-            :data="modelValue.attrList"
-            size="small"
-            highlight-current-row
-            border
-          >
+        <el-form ref="dataFormRef" :model="goodsInfo" :rules="rules" size="small" :inline="true">
+          <el-table :data="goodsInfo.attrList" size="small" highlight-current-row border>
             <el-table-column property="name" label="属性名称">
               <template #default="scope">
-                <el-form-item
-                  :prop="'attrList[' + scope.$index + '].name'"
-                  :rules="rules.name"
-                >
+                <el-form-item :prop="'attrList[' + scope.$index + '].name'" :rules="rules.name">
                   <el-input v-model="scope.row.name" />
                 </el-form-item>
               </template>
@@ -40,10 +20,7 @@
 
             <el-table-column property="value" label="属性值">
               <template #default="scope">
-                <el-form-item
-                  :prop="'attrList[' + scope.$index + '].value'"
-                  :rules="rules.value"
-                >
+                <el-form-item :prop="'attrList[' + scope.$index + '].value'" :rules="rules.value">
                   <el-input v-model="scope.row.value" />
                 </el-form-item>
               </template>
@@ -52,15 +29,8 @@
             <el-table-column label="操作" width="150">
               <template #default="scope">
                 <el-form-item>
-                  <el-button
-                    v-if="scope.$index > 0"
-                    type="danger"
-                    :icon="Minus"
-                    size="small"
-                    circle
-                    plain
-                    @click.stop="handleRemove(scope.$index)"
-                  />
+                  <el-button v-if="scope.$index > 0" type="danger" :icon="Minus" size="small" circle plain
+                    @click.stop="handleRemove(scope.$index)" />
                 </el-form-item>
               </template>
             </el-table-column>
@@ -70,60 +40,60 @@
     </div>
     <div class="component-container__footer">
       <el-button @click="handlePrev">上一步，填写商品信息</el-button>
-      <el-button type="primary" @click="handleNext"
-        >下一步，设置商品库存</el-button
-      >
+      <el-button type="primary" @click="handleNext">下一步，设置商品库存</el-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, reactive, ref, toRefs, watch } from "vue";
 import { listAttributes } from "@/api/pms/attribute";
-import { computed, nextTick, reactive, ref, toRefs, unref, watch } from "vue";
 import { ElForm } from "element-plus";
 import { Plus, Minus } from "@element-plus/icons-vue";
 
-const emit = defineEmits(["prev", "next"]);
-const dataForm = ref(ElForm);
+const emit = defineEmits(["prev", "next", "update:modelValue"]);
+const dataFormRef = ref(ElForm);
 
 const props = defineProps({
   modelValue: {
     type: Object,
-    default: {},
-  },
+    default: () => { }
+  }
 });
 
-const categoryId = computed(() => props.modelValue.categoryId);
+const goodsInfo: any = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  }
+})
 
-watch(
-  categoryId,
-  (newVal) => {
-    // 商品编辑不加载分类下的属性
-    const spuId = props.modelValue.id;
-    if (spuId) {
-      return false;
-    }
+watch(() => goodsInfo.value.categoryId, (newVal) => {
+  // 商品编辑不加载分类下的属性
+  const goodsId = goodsInfo.value.id;
+  if (goodsId) {
+    return false;
+  }
+  // 商品新增加载默认分类下的属性
+  if (newVal) {
+    // type=2 商品分类下的属性
+    listAttributes({ categoryId: newVal, type: 2 }).then((response) => {
+      const attrList = response.data;
+      if (attrList && attrList.length > 0) {
+        goodsInfo.value.attrList = attrList;
+      } else {
+        goodsInfo.value.attrList = [{}];
+      }
+    });
+  } else {
+    goodsInfo.value.attrList = [{}];
+  }
 
-    // 商品新增加载默认分类下的属性
-    if (newVal) {
-      // type=2 商品分类下的属性
-      listAttributes({ categoryId: newVal, type: 2 }).then((response) => {
-        const attrList = response.data;
-        if (attrList && attrList.length > 0) {
-          props.modelValue.attrList = attrList;
-        } else {
-          props.modelValue.attrList = [{}];
-        }
-      });
-    } else {
-      props.modelValue.attrList = [{}];
-    }
-  },
+},
   {
     immediate: true,
-    deep: true,
-  }
-);
+    deep: true
+  })
 
 const state = reactive({
   rules: {
@@ -135,11 +105,11 @@ const state = reactive({
 const { rules } = toRefs(state);
 
 function handleAdd() {
-  props.modelValue.attrList.push({});
+  goodsInfo.value.attrList.push({});
 }
 
 function handleRemove(index: number) {
-  props.modelValue.attrList.splice(index, 1);
+  goodsInfo.value.attrList.splice(index, 1);
 }
 
 function handlePrev() {
@@ -147,8 +117,7 @@ function handlePrev() {
 }
 
 function handleNext() {
-  const form = unref(dataForm);
-  form.validate((valid: any) => {
+  dataFormRef.value.validate((valid: any) => {
     if (valid) {
       emit("next");
     }