|
@@ -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>
|