chenrui 4 years ago
parent
commit
f1373d0cd5
2 changed files with 248 additions and 4 deletions
  1. 10 4
      src/views/SetmealSales/SetmealAttr.vue
  2. 238 0
      src/views/SetmealSales/attrModal.vue

+ 10 - 4
src/views/SetmealSales/SetmealAttr.vue

@@ -51,15 +51,18 @@
         <span v-else>--</span>
       </p>
       <!-- 操作 -->
-      <span slot="action" slot-scope="text, record"><a-button type="primary" id="purchasedSetmeal-look" @click="setAttr(record)">设置套餐属性</a-button></span>
+      <span slot="action" slot-scope="text, record"><a-button type="primary" id="setmealAttr-set" @click="setAttr(record)">设置套餐属性</a-button></span>
     </a-table>
+    <!-- 设置套餐属性 -->
+    <attr-modal :openModal="openModal" :setmealId="setmealId" @close="openModal=false" />
   </a-card>
 </template>
 
 <script>
 import { STable } from '@/components'
+import AttrModal from './attrModal.vue'
 export default {
-  components: { STable },
+  components: { STable, AttrModal },
   data () {
     return {
       // 查询参数
@@ -79,7 +82,9 @@ export default {
         { title: '折扣比例', dataIndex: 'payedAmounts', width: 80, align: 'center' },
         { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
       ],
-      loadData: [] //  表格数据
+      loadData: [], //  表格数据
+      setmealId: '', //  套餐id
+      openModal: false //  设置套餐属性弹框
     }
   },
   methods: {
@@ -126,7 +131,8 @@ export default {
     },
     //  设置套餐属性
     setAttr (row) {
-
+      this.setmealId = row.id
+      this.openModal = true
     },
     // 重置
     handleReset () {

+ 238 - 0
src/views/SetmealSales/attrModal.vue

@@ -0,0 +1,238 @@
+<template>
+  <a-modal
+    class="attrModal"
+    title="设置属性"
+    width="60%"
+    centered
+    :footer="null"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @cancel="isShow = false"
+    v-model="isShow">
+    <!-- 表单 -->
+    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <!-- 合作商名称 -->
+      <a-form-model-item label="合作商名称" class="item-con"><p class="item-main">清泉洗车(VIP)</p></a-form-model-item>
+      <!-- 套餐名称 -->
+      <a-form-model-item label="套餐名称" class="item-con"><p class="item-main">2020-11-28</p></a-form-model-item>
+      <!-- 套餐别名 -->
+      <a-form-model-item label="套餐别名" class="item-con"><p class="item-main">15次</p></a-form-model-item>
+      <!-- 所属地区 -->
+      <a-form-model-item label="所属地区" style="margin: 0;">
+        <a-row :gutter="20">
+          <a-col span="8">
+            <a-form-model-item>
+              <a-select id="attr-edit-provinceCode" @change="getCityList" v-model="form.provinceCode" placeholder="请选择省">
+                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="8">
+            <a-form-model-item prop="cityCode">
+              <a-select id="attr-edit-cityCode" v-model="form.cityCode" @change="getAreaList" placeholder="请选择市">
+                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="8">
+            <a-form-model-item prop="districtCode">
+              <a-select id="attr-edit-districtCode" v-model="form.districtCode" placeholder="请选择区/县">
+                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <!-- 所属项目名称 -->
+      <a-form-model-item label="所属项目名称" class="item-con" prop="itemName">
+        <a-input id="attr-itemName" v-model.trim="form.itemName" :maxLength="30" placeholder="请输入所属项目名称" />
+      </a-form-model-item>
+      <!-- 分公司名称 -->
+      <a-form-model-item label="分公司名称" class="item-con" prop="company">
+        <a-select id="attr-company" v-model="form.company" placeholder="请选择分公司名称">
+          <a-select-option v-for="item in companyList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <!-- 折扣比例 -->
+      <a-form-model-item label="折扣比例" class="item-con" prop="discount">
+        <a-input-number
+          id="attr-discount"
+          v-model="form.discount"
+          :min="0"
+          :max="999999"
+          placeholder="请输入折扣比例"
+          style="width: 80%;margin-right: 10px;" />%
+      </a-form-model-item>
+      <a-form-model-item label="" class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
+        <a-button id="attr-cancel" class="attr-cancel" @click="cancel">取消</a-button>
+        <a-button type="primary" id="attr-submit" @click="onSubmit">提交</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import { getProvince, getCityByPro, getDistrictByCity } from '@/api/lookup'
+export default {
+  name: 'AttrModal',
+  props: {
+    openModal: {
+      //  弹框是否展示
+      type: Boolean,
+      default: false
+    },
+    setmealId: {
+      //  套餐id
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  弹框是否展示
+      form: {
+        provinceCode: undefined, //  省
+        provinceName: '',
+        cityCode: undefined, // 市
+        cityName: '',
+        districtCode: undefined, // 区
+        districtName: '',
+        itemName: '', //  所属项目名称
+        company: undefined, //  分公司名称
+        discount: '' //  折扣比例
+      },
+      rules: {},
+      addrProvinceList: [], //  省下拉
+      addrCityList: [], //  市下拉
+      addrDistrictList: [], //  区下拉
+      companyList: [] //  分公司  下拉
+    }
+  },
+  methods: {
+    //  取消
+    cancel () {
+      this.resetForm() //  重置表单数据
+      this.isShow = false
+    },
+    // 重置表单
+    resetForm () {
+      this.form.provinceCode = undefined
+      this.form.provinceName = ''
+      this.form.cityCode = undefined
+      this.form.cityName = ''
+      this.form.districtCode = undefined
+      this.form.districtName = ''
+      this.form.itemName = ''
+      this.form.company = undefined
+      this.form.discount = ''
+    },
+    //  提交
+    onSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = {
+            bundleId: this.setmealId,
+            provinceCode: this.form.provinceCode,
+            provinceName: this.form.provinceName,
+            cityCode: this.form.cityCode,
+            cityName: this.form.cityName,
+            districtCode: this.form.districtCode,
+            districtName: this.form.districtName,
+            itemName: this.form.itemName,
+            company: this.form.company,
+            discount: this.form.discount
+          }
+          // bundleBuy(params).then(res => {
+          //   if (res.status == 200) {
+          //     this.cancel()
+          //   }
+          // })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 获取省列表'
+    getProvinceList () {
+      getProvince().then(res => {
+        if (res.status == 200) {
+          this.addrProvinceList = res.data || []
+        } else {
+          this.addrProvinceList = []
+        }
+      })
+    },
+    // 获取城市列表
+    getCityList (val) {
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.form.cityCode = undefined
+      this.form.districtCode = undefined
+      this.getCityListRequest(val)
+    },
+    getCityListRequest (val) {
+      getCityByPro({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrCityList = res.data || []
+        } else {
+          this.addrCityList = []
+        }
+      })
+    },
+    // 获取区县列表
+    getAreaList (val) {
+      this.addrDistrictList = []
+      this.form.districtCode = undefined
+      this.getAreaListRequest(val)
+    },
+    getAreaListRequest (val) {
+      getDistrictByCity({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrDistrictList = res.data || []
+        } else {
+          this.addrDistrictList = []
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      } else {
+        this.resetForm() //  重置表单数据
+        this.getProvinceList()
+      }
+    },
+    setmealId (newValue, oldValue) {
+      if (newValue && this.isShow) {
+
+      } else {
+
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .attrModal{
+    .btn-cont {
+    	text-align: center;
+    	margin: 50px 0 10px;
+      button{
+        margin: 0 20px;
+      }
+    }
+  }
+</style>