更新v1.0.2

src/views/goods/list.vue

@@ -3,15 +3,36 @@
     <div class="filter-container">
       <div class="filter-control">
         <span>商品名称:</span>
-        <el-input v-model="listQuery.productName" style="width:180px;" placeholder="商品名称" clearable @keyup.enter.native="getList" @clear="getList" />
+        <el-input
+          v-model="listQuery.productName"
+          style="width: 180px"
+          placeholder="商品名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
       </div>
       <div class="filter-control">
         <span>供应商名称:</span>
-        <el-input v-model="listQuery.shopName" style="width:180px;" placeholder="供应商名称" clearable @keyup.enter.native="getList" @clear="getList" />
+        <el-input
+          v-model="listQuery.shopName"
+          style="width: 180px"
+          placeholder="供应商名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
       </div>
       <div class="filter-control">
         <span>商品状态:</span>
-        <el-select v-model="listQuery.validFlag" placeholder="商品状态" clearable style="width: 180px" value="" @change="getList">
+        <el-select
+          v-model="listQuery.validFlag"
+          placeholder="商品状态"
+          clearable
+          style="width: 180px"
+          value=""
+          @change="getList"
+        >
           <el-option label="所有" value="" />
           <el-option label="已上架" value="1" />
           <el-option label="已下架" value="2" />
@@ -28,63 +49,97 @@
       border
       fit
       highlight-current-row
-      style="width:100%;margin-top:20px;"
-      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+      style="width: 100%; margin-top: 20px"
+      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
     >
       <el-table-column align="center" label="序号" width="35">
         <template slot-scope="scope">
-          <span style="white-space:nowrap;text-overflow:initial;">{{ ((pageNum-1)*listQuery.pageSize)+scope.$index+1 }}</span>
+          <span style="white-space: nowrap; text-overflow: initial">{{
+            (pageNum - 1) * listQuery.pageSize + scope.$index + 1
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column label="商品图片" align="center" prop="mainImage">
-        <template slot-scope="{row}">
-          <el-popover
-            placement="top-start"
-            title=""
-            width="120"
-            trigger="hover"
-          >
-            <img :src="row.mainImage" alt="" style="width:100px;height:100px;">
-            <img slot="reference" :src="row.mainImage" alt="" style="width:50px;height:50px;">
+        <template slot-scope="{ row }">
+          <el-popover placement="top-start" title="" width="120" trigger="hover">
+            <img :src="row.mainImage" alt="" style="width: 100px; height: 100px">
+            <img
+              slot="reference"
+              :src="row.mainImage"
+              alt=""
+              style="width: 50px; height: 50px"
+            >
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="商品名称" align="center" prop="productName" min-width="200" />
+      <el-table-column
+        label="商品名称"
+        align="center"
+        prop="productName"
+        min-width="200"
+      />
       <el-table-column label="供应商" align="center" prop="shopName" min-width="110" />
       <el-table-column label="成本价" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           ¥{{ row.costPrice | toThousandFloatFilter }}
         </template>
       </el-table-column>
       <el-table-column label="售价" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           ¥{{ row.price | toThousandFloatFilter }}
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
-        <template slot-scope="{row}">
-          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+      <el-table-column
+        class-name="status-col"
+        label="商品状态"
+        align="center"
+        prop="validFlag"
+      >
+        <template slot-scope="{ row }">
+          <el-tag :type="row.validFlag | statusFilter">{{
+            row.validFlag * 1 === 1 ? "已上架" : "已下架"
+          }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column align="center" label="添加时间" prop="addTime">
-        <template v-if="row.addTime" slot-scope="{row}">
-          <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        <template v-if="row.addTime" slot-scope="{ row }">
+          <span>{{ row.addTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="200">
-        <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleEdit(row)">查看详情</el-button>
-          <el-button :type="row.validFlag*1 === 1 ? 'warning' : 'primary'" size="mini" @click="handleSwitch(row)">{{ row.validFlag*1 === 1 ? '下架' : '上架' }}</el-button>
+        <template slot-scope="{ row }">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleEdit(row)"
+          >查看详情</el-button>
+          <el-button
+            :type="row.validFlag * 1 === 1 ? 'warning' : 'primary'"
+            size="mini"
+            @click="handleSwitch(row)"
+          >{{ row.validFlag * 1 === 1 ? "下架" : "上架" }}</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>10" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 10"
+      :total="total"
+      :page.sync="listQuery.index"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
 
-    <PriceEdit ref="priceChild" :dialog-title="dialogTitle" :is-detail="false" :is-visible.sync="dialogFormVisible" :product="dialogData" />
+    <PriceEdit
+      ref="priceChild"
+      :dialog-title="dialogTitle"
+      :is-detail="false"
+      :is-visible.sync="dialogFormVisible"
+      :product="dialogData"
+    />
 
     <template>
-      <el-backtop style="right: 40px; bottom: 40px;">
+      <el-backtop style="right: 40px; bottom: 40px">
         <i class="el-icon-upload2" />
       </el-backtop>
     </template>
@@ -153,11 +208,15 @@ export default {
     handleSwitch(row) {
       // 操作上下架
       if (row.validFlag === '1') {
-        this.$confirm('确定下架该商品吗？下架后该商品将不会再出现在联合丽格商城', '系统提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+        this.$confirm(
+          '确定下架该商品吗？下架后该商品将不会再出现在联合丽格商城',
+          '系统提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
           this.handSwithGoods(row)
         })
       } else {
@@ -191,11 +250,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  i[type=success]{
-    color:#67C23A;
-  }
-  .goods-list .el-form-item{
-    margin-bottom: 8px;
-  }
+i[type="success"] {
+  color: #67c23a;
+}
+.goods-list .el-form-item {
+  margin-bottom: 8px;
+}
 </style>
-