优惠券详情页面修改

src/api/coupon.js

@@ -14,3 +14,25 @@ export function createCoupon(data) {
     data:data
   })
 }
+
+export function getCoupon(id) {
+  return request({
+    url:'/coupon/'+id,
+    method:'get',
+  })
+}
+
+export function updateCoupon(id,data) {
+  return request({
+    url:'/coupon/update/'+id,
+    method:'post',
+    data:data
+  })
+}
+
+export function deleteCoupon(id) {
+  return request({
+    url:'/coupon/delete/'+id,
+    method:'post',
+  })
+}

src/api/product.js

@@ -7,6 +7,14 @@ export function fetchList(params) {
   })
 }
 
+export function fetchSimpleList(params) {
+  return request({
+    url:'/product/simpleList',
+    method:'get',
+    params:params
+  })
+}
+
 export function updateDeleteStatus(params) {
   return request({
     url:'/product/update/deleteStatus',

src/views/sms/coupon/components/CouponDetail.vue

@@ -42,7 +42,7 @@
         </el-input>
       </el-form-item>
       <el-form-item label="使用门槛：" prop="minPoint">
-        <el-input v-model="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
+        <el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
           <template slot="prepend">满</template>
           <template slot="append">元可用</template>
         </el-input>
@@ -60,11 +60,68 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item v-show="coupon.useType===1">
-        xx1
-
+        <el-cascader
+          clearable
+          placeholder="请选择分类名称"
+          v-model="selectProductCate"
+          :options="productCateOptions">
+        </el-cascader>
+        <el-button @click="handleAddProductCategoryRelation()">添加</el-button>
+        <el-table ref="productCateRelationTable"
+                  :data="coupon.productCategoryRelationList"
+                  style="width: 100%;margin-top: 20px"
+                  border>
+          <el-table-column label="分类名称" align="center">
+            <template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100">
+            <template slot-scope="scope">
+              <el-button size="mini"
+                         type="text"
+                         @click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form-item>
       <el-form-item v-show="coupon.useType===2">
-        xx2
+        <el-select
+          v-model="selectProduct"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="商品名称/商品货号"
+          :remote-method="searchProductMethod"
+          :loading="selectProductLoading">
+          <el-option
+            v-for="item in selectProductOptions"
+            :key="item.productId"
+            :label="item.productName"
+            :value="item.productId">
+            <span style="float: left">{{ item.productName }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
+          </el-option>
+        </el-select>
+        <el-button @click="handleAddProductRelation()">添加</el-button>
+        <el-table ref="productRelationTable"
+                  :data="coupon.productRelationList"
+                  style="width: 100%;margin-top: 20px"
+                  border>
+          <el-table-column label="商品名称" align="center">
+            <template slot-scope="scope">{{scope.row.productName}}</template>
+          </el-table-column>
+          <el-table-column label="货号" align="center"  width="120" >
+            <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100">
+            <template slot-scope="scope">
+              <el-button size="mini"
+                         type="text"
+                         @click="handleDeleteProductRelation(scope.$index, scope.row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form-item>
       <el-form-item label="备注：">
         <el-input
@@ -77,13 +134,15 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
-        <el-button @click="resetForm('couponFrom')">重置</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
 <script>
-  import {createCoupon} from '@/api/coupon';
+  import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon';
+  import {fetchSimpleList as fetchProductList} from '@/api/product';
+  import {fetchListWithChildren} from '@/api/productCate'
   const defaultCoupon = {
     type: 0,
     name: null,
@@ -158,9 +217,22 @@
           minPoint: [
             {type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
           ]
-        }
+        },
+        selectProduct:null,
+        selectProductLoading: false,
+        selectProductOptions:[],
+        selectProductCate: null,
+        productCateOptions: []
       }
     },
+    created(){
+      if(this.isEdit){
+        getCoupon(this.$route.query.id).then(response=>{
+          this.coupon=response.data;
+        });
+      }
+      this.getProductCateList();
+    },
     methods:{
       onSubmit(formName) {
         this.$refs[formName].validate((valid) => {
@@ -170,15 +242,27 @@
               cancelButtonText: '取消',
               type: 'warning'
             }).then(() => {
-              createCoupon(this.coupon).then(response=>{
-                this.$refs[formName].resetFields();
-                this.$message({
-                  message: '提交成功',
-                  type: 'success',
-                  duration:1000
+              if(this.isEdit){
+                updateCoupon(this.$route.query.id,this.coupon).then(response=>{
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration:1000
+                  });
+                  this.$router.back();
+                });
+              }else{
+                createCoupon(this.coupon).then(response=>{
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '提交成功',
+                    type: 'success',
+                    duration:1000
+                  });
+                  this.$router.back();
                 });
-                this.$router.back();
-              });
+              }
             });
           } else {
             this.$message({
@@ -193,6 +277,88 @@
       resetForm(formName) {
         this.$refs[formName].resetFields();
         this.coupon = Object.assign({},defaultCoupon);
+      },
+      searchProductMethod(query){
+        if (query !== '') {
+          this.loading = true;
+          fetchProductList({keyword:query}).then(response=>{
+            this.loading=false;
+            let productList = response.data;
+            this.selectProductOptions = [];
+            for(let i=0;i<productList.length;i++){
+              let item = productList[i];
+              this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn});
+            }
+          });
+        } else {
+          this.selectProductOptions = [];
+        }
+      },
+      handleAddProductRelation(){
+        if(this.selectProduct===null){
+          this.$message({
+            message: '请先选择商品',
+            type: 'warning'
+          });
+          return
+        }
+        this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
+        this.selectProduct=null;
+      },
+      handleAddProductCategoryRelation(){
+        if(this.selectProductCate===null||this.selectProductCate.length===0){
+          this.$message({
+            message: '请先选择商品分类',
+            type: 'warning'
+          });
+          return
+        }
+        this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
+        this.selectProductCate=[];
+      },
+      handleDeleteProductRelation(index,row){
+        this.coupon.productRelationList.splice(index,1);
+      },
+      handleDeleteProductCateRelation(index,row){
+        this.coupon.productCategoryRelationList.splice(index,1);
+      },
+      getProductById(id){
+        for(let i=0;i<this.selectProductOptions.length;i++){
+          if(id===this.selectProductOptions[i].productId){
+            return this.selectProductOptions[i];
+          }
+        }
+        return null;
+      },
+      getProductCateList() {
+        fetchListWithChildren().then(response => {
+          let list = response.data;
+          this.productCateOptions = [];
+          for (let i = 0; i < list.length; i++) {
+            let children = [];
+            if (list[i].children != null && list[i].children.length > 0) {
+              for (let j = 0; j < list[i].children.length; j++) {
+                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
+              }
+            }
+            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+          }
+        });
+      },
+      getProductCateByIds(ids){
+        let name;
+        let parentName;
+        for (let i = 0; i < this.productCateOptions.length; i++) {
+          if (this.productCateOptions[i].value === ids[0]) {
+            parentName = this.productCateOptions[i].label;
+            for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
+              if (this.productCateOptions[i].children[j].value === ids[1]) {
+                name = this.productCateOptions[i].children[j].label;
+              }
+            }
+          }
+        }
+        return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
       }
     }
   }

src/views/sms/coupon/index.vue

@@ -81,7 +81,9 @@
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">
               编辑</el-button>
-            <el-button size="mini" type="text">删除</el-button>
+            <el-button size="mini"
+                       type="text"
+                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -101,7 +103,7 @@
   </div>
 </template>
 <script>
-  import {fetchList} from '@/api/coupon';
+  import {fetchList,deleteCoupon} from '@/api/coupon';
   import {formatDate} from '@/utils/date';
   const defaultListQuery = {
     pageNum: 1,
@@ -196,12 +198,36 @@
       handleSelectionChange(val){
         this.multipleSelection = val;
       },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
       handleAdd(){
         this.$router.push({path: '/sms/addCoupon'})
       },
       handleUpdate(index, row) {
         this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
       },
+      handleDelete(index, row) {
+        this.$confirm('是否进行删除操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteCoupon(row.id).then(response=>{
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.getList();
+          });
+        })
+      },
       getList(){
         fetchList(this.listQuery).then(response=>{
           this.listLoading = false;