refactor: eslint代码检查优化

Former-commit-id: 4c11b5d0cdd10f28148cf3d9b593f85e082cdc51

src/views/pms/goods/detail.vue

@@ -1,108 +1,77 @@
 <template>
   <div class="app-container">
     <el-steps :active="active" process-status="finish" finish-status="success" simple>
-      <el-step title="选择商品分类"/>
-      <el-step title="填写商品信息"/>
-      <el-step title="设置商品属性"/>
-      <el-step title="设置商品库存"/>
+      <el-step title="选择商品分类" />
+      <el-step title="填写商品信息" />
+      <el-step title="设置商品属性" />
+      <el-step title="设置商品库存" />
     </el-steps>
 
-    <goods-category
-      v-show="active==0"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
+    <GoodsCategory v-show="active == 0" v-model="goodsInfo" v-if="loaded == true" @prev="prev" @next="next" />
+    <GoodsInfo v-show="active == 1" v-model="goodsInfo" v-if="loaded == true" @prev="prev" @next="next" />
+    <GoodsAttribute v-show="active == 2" v-model="goodsInfo" v-if="loaded == true" @prev="prev" @next="next" />
+    <GoodsStock v-show="active == 3" v-model="goodsInfo" v-if="loaded == true" @prev="prev" @next="next" />
 
-    <goods-info
-      v-show="active==1"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
-    <goods-attribute
-      v-show="active==2"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
-
-    <goods-stock
-      v-show="active==3"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { onMounted, reactive, toRefs } from "vue";
+
 import GoodsCategory from "./components/GoodsCategory.vue";
 import GoodsInfo from "./components/GoodsInfo.vue";
 import GoodsAttribute from "./components/GoodsAttribute.vue";
 import GoodsStock from "./components/GoodsStock.vue";
 
-import {getGoodsFormDetail} from "@/api/pms/goods";
+import { getGoodsDetail } from "@/api/pms/goods";
+import { useRoute } from "vue-router";
+import { GoodsDetail } from "@/types";
 
-export default {
-  name: "goods-detail",
-  components: {GoodsStock, GoodsCategory, GoodsInfo, GoodsAttribute},
-  props: ['goodsId'],
-  data() {
-    return {
-      loaded: false,
-      active: 0,
-      goods: {
-        id: undefined,
-        name: undefined,
-        categoryId: undefined,
-        brandId: undefined,
-        originPrice: undefined,
-        price: undefined,
-        picUrl: undefined,
-        album: undefined,
-        description: undefined,
-        detail: undefined,
-        attrList: [],
-        specList: [],
-        skuList: []
-      }
-    };
-  },
-  created() {
-    this.loadData()
-  },
-  methods: {
-    loadData() {
-      const goodsId = this.$route.query.goodsId
-      console.log('goodsId',goodsId)
-      if (goodsId) {
-        getGoodsFormDetail(goodsId).then(response => {
-          this.goods = response.data
-          this.goods.originPrice = this.goods.originPrice / 100
-          this.goods.price = this.goods.price / 100
-          this.loaded = true
-        })
-      } else {
-        this.loaded = true
-      }
-    },
-    prev() {
-      if (this.active-- <= 0) {
-        this.active = 0;
-      }
-    },
-    next() {
-      if (this.active++ >= 3) {
-        this.active = 0;
-      }
-    }
+const route = useRoute();
+const props = defineProps({
+  goodsId: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const state = reactive({
+  loaded: false,
+  active: 0,
+  goodsInfo: {} as GoodsDetail
+});
+
+const { loaded, active, goodsInfo } = toRefs(state)
+
+function loadData() {
+  const goodsId = route.query.goodsId as string
+
+  if (goodsId) {
+    getGoodsDetail(goodsId).then((response) => {
+      state.goodsInfo = response.data
+      state.goodsInfo.originPrice = state.goodsInfo.originPrice / 100
+      state.goodsInfo.price = state.goodsInfo.price / 100
+      state.loaded = true
+    })
+  } else {
+    state.loaded = true
   }
 }
+
+function prev() {
+  if (state.active-- <= 0) {
+    state.active = 0;
+  }
+}
+function next() {
+  if (state.active++ >= 3) {
+    state.active = 0;
+  }
+}
+
+onMounted(() => {
+  loadData();
+});
 </script>
 
 <style lang="scss" scoped>