新增图书标签 图书营销标签 小店管理

src/views/modules/shop/shopproduct.vue

@@ -1,13 +1,38 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
       <el-form-item>
-        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
+        <el-input
+          v-model="dataForm.key"
+          placeholder="参数名"
+          clearable
+        ></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button @click="pageIndex = 1;getDataList()">查询</el-button>
-        <el-button v-if="isAuth('book:shopproduct:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button v-if="isAuth('book:shopproduct:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        <el-button
+          @click="
+            pageIndex = 1;
+            getDataList();
+          "
+          >查询</el-button
+        >
+        <el-button
+          v-if="isAuth('book:shopproduct:save')"
+          type="primary"
+          @click="addOrUpdateHandle()"
+          >新增</el-button
+        >
+        <el-button
+          v-if="isAuth('book:shopproduct:delete')"
+          type="danger"
+          @click="deleteHandle()"
+          :disabled="dataListSelections.length <= 0"
+          >批量删除</el-button
+        >
       </el-form-item>
     </el-form>
     <el-table
@@ -15,44 +40,76 @@
       border
       v-loading="dataListLoading"
       @selection-change="selectionChangeHandle"
-      style="width: 100%;">
+      style="width: 100%"
+    >
       <el-table-column
         type="selection"
         header-align="center"
         align="center"
-        width="50">
+        width="50"
+      >
       </el-table-column>
-      <el-table-column label="商品ID" width="70" align="center"  prop="productId">
+      <el-table-column
+        label="商品ID"
+        width="70"
+        align="center"
+        prop="productId"
+      >
         <!-- <template slot-scope="scope">
           {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
         </template> -->
-      </el-table-column>     
+      </el-table-column>
       <el-table-column
         prop="productName"
         header-align="center"
         align="center"
-        label="商品名称">
+        label="商品名称"
+      >
       </el-table-column>
       <el-table-column
         prop="price"
         header-align="center"
         align="center"
-        label="商品价格">
-      </el-table-column>      
+        label="商品价格"
+      >
+      </el-table-column>
       <el-table-column header-align="center" align="center" label="商品图">
         <template slot-scope="scope">
-          <img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="70" height="100" class="tableImg" />
+          <img
+            v-if="scope.row.productImages != ''"
+            :src="scope.row.productImages"
+            width="70"
+            height="100"
+            class="tableImg"
+          />
         </template>
-      </el-table-column>    
+      </el-table-column>
       <el-table-column
         fixed="right"
         header-align="center"
         align="center"
         width="150"
-        label="操作">
+        label="操作"
+      >
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.productId)">修改</el-button>
-          <el-button type="text" size="small" @click="deleteHandle(scope.row.productId)">删除</el-button>
+          <el-button
+            type="text"
+            size="small"
+            @click="addOrUpdateHandle(scope.row.productId)"
+            >修改</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="handleEditTags(scope.row.productId)"
+            >修改标签</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="deleteHandle(scope.row.productId)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -63,154 +120,181 @@
       :page-sizes="[10, 20, 50, 100]"
       :page-size="pageSize"
       :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
+      layout="total, sizes, prev, pager, next, jumper"
+    >
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
-    <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>  
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+      @showchooseBookf="showchooseBookf"
+    ></add-or-update>
+    <choose-book
+      v-if="chooseBookVisible"
+      :bookIds="bookIds"
+      ref="chooseBook"
+      :chooseBookVisible="chooseBookVisible"
+      @closeBookf="closeBookf"
+    ></choose-book>
+    <commonTags ref="commonTags" ></commonTags>
   </div>
 </template>
 
 <script>
-  import chooseBook from './chooseBook.vue'
-  import AddOrUpdate from './shopproduct-add-or-update'
-  export default {
-    data () {
-      return {
-        dataForm: {
-          key: ''
-        },
-        dataList: [],
-        publishStatus: false,
-        pageIndex: 1,
-        pageSize: 10,
-        totalPage: 0,
-        dataListLoading: false,
-        dataListSelections: [],
-        addOrUpdateVisible: false,
-        chooseBookVisible: false,
-        bookIds:[]
-      }
-    },
-    components: {
-      AddOrUpdate,
-      chooseBook
-    },
-    activated () {
-      this.getDataList()
-    },
+import chooseBook from "./chooseBook.vue";
+import AddOrUpdate from "./shopproduct-add-or-update";
+import commonTags from "./commonBookTags/commonTags.vue";
+export default {
+  data() {
+    return {
+      dataForm: {
+        key: "",
+      },
+      dataList: [],
+      publishStatus: false,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      chooseBookVisible: false,
+      bookIds: [],
+    };
+  },
+  components: {
+    AddOrUpdate,
+    chooseBook,
+    commonTags,
+  },
+  activated() {
+    this.getDataList();
+  },
   methods: {
+    handleEditTags (id) {
+      this.$nextTick(() => {
+        this.$refs.commonTags.open(id);
+      });
+    },
     closeBookf() {
-      this.chooseBookVisible = false      
-     },
-    showchooseBookf(e) { 
-     // 显示图书列表
-      this.chooseBookVisible = true      
+      this.chooseBookVisible = false;
+    },
+    showchooseBookf(e) {
+      // 显示图书列表
+      this.chooseBookVisible = true;
       // console.log(this.bookIds,'this.bookIds')
       // this.$nextTick(() => {
       //   this.$refs.chooseBook.getBookList()
       //   this.bookIds = e.bookIds
       //   })
-      
     },
-      // 获取数据列表
-      getDataList () {
-        this.dataListLoading = true
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/book/shopproduct/list"),
+        method: "get",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          key: this.dataForm.key,
+        }),
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list;
+          this.totalPage = data.page.totalCount;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id
+        ? [id]
+        : this.dataListSelections.map((item) => {
+            return item.productId;
+          });
+      this.$confirm(
+        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
         this.$http({
-          url: this.$http.adornUrl('/book/shopproduct/list'),
-          method: 'get',
-          params: this.$http.adornParams({
-            'page': this.pageIndex,
-            'limit': this.pageSize,
-            'key': this.dataForm.key
-          })
-        }).then(({data}) => {
+          url: this.$http.adornUrl("/book/shopproduct/delete"),
+          method: "post",
+          data: this.$http.adornData(ids, false),
+        }).then(({ data }) => {
           if (data && data.code === 0) {
-            this.dataList = data.page.list
-            this.totalPage = data.page.totalCount
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
           } else {
-            this.dataList = []
-            this.totalPage = 0
+            this.$message.error(data.msg);
           }
-          this.dataListLoading = false
-        })
-      },
-      // 每页数
-      sizeChangeHandle (val) {
-        this.pageSize = val
-        this.pageIndex = 1
-        this.getDataList()
-      },
-      // 当前页
-      currentChangeHandle (val) {
-        this.pageIndex = val
-        this.getDataList()
-      },
-      // 多选
-      selectionChangeHandle (val) {
-        this.dataListSelections = val
-      },
-      // 新增 / 修改
-      addOrUpdateHandle (id) {
-        this.addOrUpdateVisible = true
-        this.$nextTick(() => {
-          this.$refs.addOrUpdate.init(id)
-        })
-      },
-      // 删除
-      deleteHandle (id) {
-        var ids = id ? [id] : this.dataListSelections.map(item => {
-          return item.productId
-        })
-        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl('/book/shopproduct/delete'),
-            method: 'post',
-            data: this.$http.adornData(ids, false)
-          }).then(({data}) => {
-            if (data && data.code === 0) {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        })
-      },
-      SwitchChange(event) {
+        });
+      });
+    },
+    SwitchChange(event) {
       /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
       var parms = {
         publishStatus: event.publishStatus,
-        productId: event.productId
-      }
+        productId: event.productId,
+      };
       // console.log(parms)
       this.$http({
-        url: this.$http.adornUrl('/book/shopproduct/update'),
-        method: 'post',
-        data: parms
-      }).then(res => {
-        this.$message({
-          message: '成功',
-          type: 'success'
-        })
-        this.loading = false
-        this.getDataList()
-      }).catch(error => {
-        this.loading = false
-        console.log(error)
+        url: this.$http.adornUrl("/book/shopproduct/update"),
+        method: "post",
+        data: parms,
       })
-      console.log(event)
+        .then((res) => {
+          this.$message({
+            message: "成功",
+            type: "success",
+          });
+          this.loading = false;
+          this.getDataList();
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+      console.log(event);
     },
-    }
-  }
+  },
+};
 </script>