优化http.js、添加模板表单、添加keepalive设置
| | |
| | | <template> |
| | | <section class="app-main"> |
| | | <transition name="fade-transform" mode="out-in"> |
| | | <router-view :key="key" /> |
| | | <div> |
| | | <keep-alive> |
| | | <router-view v-if="$route.meta.keepAlive" :key="key" /> |
| | | </keep-alive> |
| | | <router-view v-if="!$route.meta.keepAlive" :key="key" /> |
| | | </div> |
| | | </transition> |
| | | </section> |
| | | </template> |
New file |
| | |
| | | /** |
| | | * 页面通用 keepAlive 处理 |
| | | * |
| | | * 通过页面重置功能,实现刷新功能 |
| | | */ |
| | | |
| | | export default { |
| | | // keep-alive用 |
| | | activated() { |
| | | // 根据isBack进行刷新 |
| | | if (!this.$route.meta.isBack) { |
| | | console.log('初始化') |
| | | this.init && this.init() |
| | | } else { |
| | | console.log('返回') |
| | | this.regInit && this.regInit() |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form ref="couponForm" label-position="left" :model="mData" label-width="150px" :rules="rules"> |
| | | <el-form-item label="标题:" prop="title"> |
| | | <el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" /> |
| | | </el-form-item> |
| | | <el-form-item label="面值:" prop="valueMoney"> |
| | | <el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" /> |
| | | </el-form-item> |
| | | <el-form-item label="省市区" prop="provinces"> |
| | | <el-cascader |
| | | v-model="mData.provinces" |
| | | :options="areaOpts" |
| | | placeholder="请选择省市区" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="有效日期" prop="dateValue"> |
| | | <el-date-picker |
| | | v-model="mData.dateValue" |
| | | value-format="yyyy-MM-dd" |
| | | class="com-edit-input" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item prop="uploadImgs"> |
| | | <span slot="label"> |
| | | 图片:<br><span>(668*164像素)</span> |
| | | </span> |
| | | <!-- 上传图片组件(单图) --> |
| | | <el-upload |
| | | ref="refUploadImg" |
| | | accept="image/jpeg,image/jpg,image/gif,image/png" |
| | | :auto-upload="false" |
| | | list-type="picture-card" |
| | | :class="{disabled:uploadDisabled}" |
| | | action="#" |
| | | :limit="1" |
| | | :file-list="mData.uploadImgs" |
| | | :on-change="addUploadImg" |
| | | :on-remove="delUploadImg" |
| | | :http-request="uploadImg" |
| | | :on-preview="uploadPreview" |
| | | :before-upload="beforeUploadImg" |
| | | > |
| | | <i class="el-icon-plus" /> |
| | | </el-upload> |
| | | </el-form-item> |
| | | <el-form-item label="是否上架:"> |
| | | <el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" /> |
| | | </el-form-item> |
| | | <el-form-item label="详情:" prop="content"> |
| | | <!-- 富文本 --> |
| | | <WangEnduit :catchdata="catchData" :content="mData.content" :rangenum="rangenum" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div class="com-edit-bottom-btns flex flex-align-center"> |
| | | <el-button size="mini" @click="jumpBack">取消</el-button> |
| | | <el-button type="primary" size="mini" @click="submit">提交</el-button> |
| | | </div> |
| | | |
| | | <!-- upload放大图片 --> |
| | | <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center"> |
| | | <img style="max-width:100%" :src="uploadPreviewUrl" alt=""> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import WangEnduit from '@/components/WangEnduit' // 富文本 |
| | | import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览 |
| | | import Area from '@/utils/area' // 地区选择 |
| | | export default { |
| | | name: 'DemoForm', |
| | | components: { WangEnduit }, |
| | | mixins: [ |
| | | mixin_upload |
| | | ], |
| | | data() { |
| | | return { |
| | | // 富文本 |
| | | rangenum: null, |
| | | // 表单字段 |
| | | mData: { |
| | | title: '', // 标题 |
| | | valueMoney: '', // 面值 |
| | | dateValue: [], // 有效日期(开始日期至结束日期) |
| | | content: '', // 详情 |
| | | isUp: 1, // 是否上架 |
| | | uploadImgs: [], // 图片 |
| | | provinces: [], |
| | | imgUrl: '' |
| | | }, |
| | | |
| | | // 初始化地区 |
| | | areaOpts: Area.getAreaOpts(Area.data), // 省市区数据 |
| | | |
| | | // 表单校验 |
| | | rules: { |
| | | title: [{ |
| | | required: true, message: '请填写优惠券标题', trigger: 'change' |
| | | }], |
| | | valueMoney: [{ |
| | | required: true, message: '请填写优惠券面值', trigger: 'change' |
| | | }, { |
| | | type: 'number', message: '面值必须为数字', trigger: 'change' |
| | | }], |
| | | dateValue: [{ |
| | | required: true, message: '请选择有效日期', trigger: 'change' |
| | | }], |
| | | provinces: [{ |
| | | required: true, message: '请选择地址', trigger: 'change' |
| | | }], |
| | | content: [{ |
| | | required: true, message: '请填写优惠券详情' |
| | | }], |
| | | uploadImgs: [{ |
| | | required: true, message: '请选择图片' |
| | | }] |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | // 禁用上传图片功能 |
| | | uploadDisabled() { |
| | | return this.mData.uploadImgs.length > 0 |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.init() |
| | | }, |
| | | methods: { |
| | | init() { |
| | | |
| | | }, |
| | | |
| | | jumpBack() { |
| | | this.$router.go(-1) |
| | | }, |
| | | |
| | | // 富文本相关 |
| | | // 富文本编辑器的内容赋值 |
| | | catchData(content) { |
| | | if (content === '<p><br></p>') content = '' |
| | | try { |
| | | const currentRange = window.getSelection().getRangeAt(0) |
| | | this.rangenum = currentRange |
| | | } catch (e) { |
| | | // |
| | | } |
| | | this.mData.content = content |
| | | this.$refs.couponForm.validateField('content') |
| | | }, |
| | | // 富文本相关 |
| | | |
| | | // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ |
| | | // 上传前确认格式 |
| | | beforeUploadImg(file) { |
| | | const isImg = file.type.indexOf('image/') > -1 |
| | | if (!isImg) { |
| | | this.$message.error('必须是选择图片文件') |
| | | } |
| | | return isImg |
| | | }, |
| | | // 增加图片 |
| | | addUploadImg(file, fileList) { |
| | | this.mData.uploadImgs = fileList |
| | | this.$refs.couponForm.validateField('uploadImgs') |
| | | }, |
| | | // 删除图片 |
| | | delUploadImg(file, fileList) { |
| | | this.mData.uploadImgs = fileList |
| | | }, |
| | | // 上传图片 |
| | | uploadImg(res) { |
| | | const file = res.file |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | this.postFN({ |
| | | url: 'admin/image/upload', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formData, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'xxxx' |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | console.log('上传图成功') |
| | | this.$set(this.mData, 'imgUrl', inf.imgUrl) |
| | | console.log('上传图结束') |
| | | |
| | | // 上传完图片 |
| | | this.submitReq() |
| | | }) |
| | | }, |
| | | // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | submit() { |
| | | this.$refs['couponForm'].validate(valid => { |
| | | if (valid) { |
| | | if (this.checkNeedUpload(this.mData.uploadImgs)) { |
| | | console.log('开始上传图片') |
| | | // 先上传图片,再提交 |
| | | this.$refs.refUploadImg.submit() |
| | | } else { |
| | | // 提交 |
| | | this.submitReq() |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | submitReq() { |
| | | var { mData } = this |
| | | console.log(mData) |
| | | // 字段未写 |
| | | var params = { |
| | | title: mData.title, |
| | | priceStr: mData.valueMoney, // 元为单位 |
| | | startTime: mData.dateValue[0], |
| | | endTime: mData.dateValue[1], |
| | | imgUrl: mData.imgUrl, |
| | | content: mData.content, |
| | | isUp: mData.isUp |
| | | } |
| | | |
| | | // 提交表单 |
| | | this.postFN({ |
| | | url: 'admin/coupon/add', |
| | | params: params, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: {} |
| | | } |
| | | }, () => { |
| | | this.$messageSuc('保存成功') |
| | | this.jumpBack() |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | </style> |
| | |
| | | |
| | | <!-- 新增&编辑 --> |
| | | <el-dialog :title="adminDialogData.type=='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="isShowadminDialog" append-to-body> |
| | | <el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules"> |
| | | <el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small"> |
| | | <el-form-item label="名称" prop="name"> |
| | | <el-input v-model="adminDialogData.name" placeholder="请输入名称" /> |
| | | </el-form-item> |
| | |
| | | component: () => import('@/pages/demo/index'), // Parent router-view |
| | | name: 'demoIndex', |
| | | meta: { title: '模板列表' } |
| | | }, |
| | | { |
| | | path: 'form', |
| | | component: () => import('@/pages/demo/form'), // Parent router-view |
| | | name: 'demoForm', |
| | | meta: { title: '模板表单' } |
| | | } |
| | | ] |
| | | } |
New file |
| | |
| | | /** |
| | | * 地址数据&方法 |
| | | */ |
| | | |
| | | import area from './data.js' // 引入地区数组 |
| | | // import Req from '../http_install.js' // 引入请求方法 |
| | | const axios = require('axios') |
| | | |
| | | /** |
| | | * 根据省名称获取城市数组 |
| | | * @param {string} province 省名 |
| | | * @return {object[]} 城市数组 |
| | | */ |
| | | function getCitiesByLabel(province) { |
| | | province = area.find(obj => province === obj.label) |
| | | return province ? province.children : [] |
| | | } |
| | | |
| | | /** |
| | | * 根据省市名称获取区数组 |
| | | * @param {string} province 省名 |
| | | * @param {string} city 城市名 |
| | | * @return {object[]} 区数组 |
| | | */ |
| | | function getDistrictsByLabel(province, city) { |
| | | var cities = getCitiesByLabel(province) |
| | | city = cities.find(obj => city === obj.label) |
| | | return city ? city.children : [] |
| | | } |
| | | |
| | | /** |
| | | * 根据省市区获取区数据 |
| | | * @param {string} province 省名 |
| | | * @param {string} city 城市名 |
| | | * @param {string} district 区名 |
| | | * @return {object} 区对象数据 |
| | | */ |
| | | function getDistrictsObjByLabel(province, city, district) { |
| | | return getDistrictsByLabel(province, city).find(obj => obj.label === district) |
| | | } |
| | | |
| | | /** |
| | | * 初始化 elementUI Cascader 的 option |
| | | * @param {object[]} areaArr 地区数据 |
| | | * @return {object[]} elementUI 级联选择组件用的 option 参数 |
| | | */ |
| | | function getAreaOpts(areaArr) { |
| | | if (!areaArr || !areaArr.length) { |
| | | return |
| | | } |
| | | return areaArr.map((obj) => { |
| | | return { |
| | | value: obj.label, |
| | | label: obj.label, |
| | | code: obj.value, |
| | | children: getAreaOpts(obj.children) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * 请求获取街道json数据 - 根据传入的区编号,请求对应的json文件 |
| | | * Promise |
| | | * @param {string} districtCode 区编号 |
| | | * @param {VueObject} _this vue页面实例 |
| | | * @resolve {'街道号': '街道名', ...} |
| | | */ |
| | | function getStreetByDistrictCode(districtCode) { |
| | | return new Promise((resolve, reject) => { |
| | | if (!districtCode) { |
| | | reject('缺失 districtCode') |
| | | } |
| | | // TODO 改为axios |
| | | axios({ |
| | | method: 'GET', |
| | | url: './static/town/' + districtCode + '.json', |
| | | header: { |
| | | 'content-type': 'application/json' // 默认值 |
| | | } |
| | | }).then((res) => { |
| | | const result = [] |
| | | const data = res.data |
| | | // 构建街道数组 |
| | | // 注:此处label与value一致,预留一个code字段保留街道编号 |
| | | if (data) { |
| | | for (var i in data) { |
| | | result.push({ |
| | | label: data[i], |
| | | value: data[i], |
| | | code: i |
| | | }) |
| | | } |
| | | } |
| | | resolve(result) |
| | | }).catch(() => { |
| | | reject() |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | export default { |
| | | data: area, getAreaOpts, |
| | | |
| | | getCitiesByLabel, |
| | | getDistrictsByLabel, |
| | | getDistrictsObjByLabel, |
| | | getStreetByDistrictCode |
| | | } |
New file |
| | |
| | | /** |
| | | * 通用表单验证 |
| | | */ |
| | | export default { |
| | | /** |
| | | * 验证电子邮箱 |
| | | * @param {string} value 电子邮箱字符串 |
| | | */ |
| | | validateEmail(value) { |
| | | return /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value) |
| | | }, |
| | | |
| | | /** |
| | | * 验证手机号码 |
| | | * @param {string} value 手机号码 |
| | | */ |
| | | validateMobilePhoneNumber(value) { |
| | | return /^1[0-9][0-9]\d{8}$/.test(value) |
| | | } |
| | | } |
| | | |
| | |
| | | // ...urlEncodes, |
| | | } |
| | | // // 将请求参数放到链接后面 |
| | | var paramsUrl = urlEncode(urlEncodes).replace('&', '?') |
| | | var paramsUrl = urlEncode(urlEncodes) |
| | | if(!/\?/.test(ajaxUrl)) { |
| | | paramsUrl = paramsUrl.replace('&', '?') |
| | | } |
| | | ajaxUrl = ajaxUrl + paramsUrl |
| | | |
| | | // console.log(ajaxUrl) |