py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

components2

Browse Source
branch_lyj
Liuyujie 7 months ago
parent 6cacfd11d1
commit e8a2fc3417
1 changed files with 270 additions and 206 deletions
Show Stats Download Patch File Download Diff File

476
src/views/sms/coupon/components/CouponDetail.vue
Unescape View File

@ -1,12 +1,16 @@
<template> 
<template>
<!-- el-card组件作为表单的容器，设置了类名和无阴影效果 -->
<el-card class="form-container" shadow="never">
<!-- el-form表单组件，绑定了数据模型coupon，设置了验证规则、表单引用、标签宽度和尺寸等属性 -->
<el-form :model="coupon"
:rules="rules"
ref="couponFrom"
label-width="150px"
size="small">
<!-- 优惠券类型的表单项，使用el-select下拉选择框来选择类型 -->
<el-form-item label="优惠券类型：">
<el-select v-model="coupon.type">
<!-- 通过v-for循环生成下拉选项 -->
<el-option
v-for="type in typeOptions"
:key="type.value"
@ -15,11 +19,14 @@
</el-option>
</el-select>
</el-form-item>
<!-- 优惠券名称的表单项，使用el-input输入框输入名称，设置了数据绑定和类名 -->
<el-form-item label="优惠券名称：" prop="name">
<el-input v-model="coupon.name" class="input-width"></el-input>
</el-form-item>
<!-- 适用平台的表单项，用el-select下拉选择框选择平台 -->
<el-form-item label="适用平台：">
<el-select v-model="coupon.platform">
<!-- 通过v-for循环生成下拉选项 -->
<el-option
v-for="item in platformOptions"
:key="item.value"
@ -28,33 +35,40 @@
</el-option>
</el-select>
</el-form-item>
<!-- 总发行量的表单项，用el-input输入框输入发行量，设置了数据绑定和占位提示等属性 -->
<el-form-item label="总发行量：" prop="publishCount">
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
</el-form-item>
<!-- 面额的表单项，用el-input输入框输入面额，设置了数据绑定、占位提示和后缀文本等属性 -->
<el-form-item label="面额：" prop="amount">
<el-input v-model.number="coupon.amount" placeholder="面值只能是数值，限2位小数" class="input-width">
<template slot="append">元</template>
</el-input>
</el-form-item>
<!-- 每人限领的表单项，用el-input输入框输入限领数量，设置了数据绑定和后缀文本等属性 -->
<el-form-item label="每人限领：">
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
<template slot="append">张</template>
</el-input>
</el-form-item>
<!-- 使用门槛的表单项，用el-input输入框输入门槛金额，设置了数据绑定、前后缀文本等属性 -->
<el-form-item label="使用门槛：" prop="minPoint">
<el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
<template slot="prepend">满</template>
<template slot="append">元可用</template>
</el-input>
</el-form-item>
<!-- 领取日期的表单项，用el-date-picker日期选择器选择日期，设置了数据绑定和类名等属性 -->
<el-form-item label="领取日期：" prop="enableTime">
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker>
</el-form-item>
<!-- 有效期的表单项，通过两个el-date-picker日期选择器分别选择开始和结束日期 -->
<el-form-item label="有效期：">
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
<span style="margin-left: 20px;margin-right: 20px">至</span>
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
</el-form-item>
<!-- 可使用商品的表单项，用el-radio-group单选按钮组选择使用类型 -->
<el-form-item label="可使用商品：">
<el-radio-group v-model="coupon.useType">
<el-radio-button :label="0">全场通用</el-radio-button>
@ -62,21 +76,27 @@
<el-radio-button :label="2">指定商品</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 当可使用商品类型为指定分类时显示的内容，包含分类选择器、添加按钮和展示关联分类关系的表格 -->
<el-form-item v-show="coupon.useType===1">
<!-- el-cascader分类选择器，用于选择分类，设置了可清除、占位提示等属性 -->
<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"
@ -87,7 +107,9 @@
</el-table-column>
</el-table>
</el-form-item>
<!-- 当可使用商品类型为指定商品时显示的内容，包含商品选择框、添加按钮和展示关联商品关系的表格 -->
<el-form-item v-show="coupon.useType===2">
<!-- el-select商品选择框，设置了可过滤、远程搜索等属性 -->
<el-select
v-model="selectProduct"
filterable
@ -96,6 +118,7 @@
placeholder="商品名称/商品货号"
:remote-method="searchProductMethod"
:loading="selectProductLoading">
<!-- 通过v-for循环生成商品选项 -->
<el-option
v-for="item in selectProductOptions"
:key="item.productId"
@ -105,17 +128,22 @@
<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"
@ -126,6 +154,7 @@
</el-table-column>
</el-table>
</el-form-item>
<!-- 备注的表单项，用el-input输入框输入备注内容，设置了类名、类型为文本域等属性 -->
<el-form-item label="备注：">
<el-input
class="input-width"
@ -135,241 +164,276 @@
v-model="coupon.note">
</el-input>
</el-form-item>
<!-- 提交和重置按钮所在的表单项 -->
<el-form-item>
<!-- 提交按钮，设置类型为primary，绑定点击事件 -->
<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
<!-- 重置按钮，根据条件判断是否显示，绑定点击事件 -->
<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
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,
platform: 0,
amount: null,
perLimit: 1,
minPoint: null,
startTime: null,
endTime: null,
useType: 0,
note: null,
publishCount: null,
productRelationList: [],
productCategoryRelationList: []
};
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
// 从'@/api/coupon'模块导入创建、获取、更新优惠券相关的函数
import {createCoupon, getCoupon, updateCoupon} from '@/api/coupon';
// 从'@/api/product'模块导入获取产品简单列表的函数，并起别名为fetchProductList
import {fetchSimpleList as fetchProductList} from '@/api/product';
// 从'@/api/productCate'模块导入获取带子项列表的函数
import {fetchListWithChildren} from '@/api/productCate';
// 默认的优惠券对象，包含类型、名称、平台等各属性的初始值
const defaultCoupon = {
type: 0,
name: null,
platform: 0,
amount: null,
perLimit: 1,
minPoint: null,
startTime: null,
endTime: null,
useType: 0,
note: null,
publishCount: null,
productRelationList: [],
productCategoryRelationList: []
};
// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
// 默认的适用平台选项数组，包含全平台、移动平台、PC平台等及对应值
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
},
{
label: '移动平台',
value: 1
},
{
label: 'PC平台',
value: 2
}
];
export default {
name: 'CouponDetail',
// 定义组件接收的属性，这里有isEdit属性，类型为布尔值，默认是false
props: {
isEdit: {
type: Boolean,
default: false
}
];
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
},
{
label: '移动平台',
value: 1
},
{
label: 'PC平台',
value: 2
},
data() {
return {
// 当前优惠券数据，初始为默认优惠券对象的副本
coupon: Object.assign({}, defaultCoupon),
// 优惠券类型选项，初始为默认类型选项副本
typeOptions: Object.assign({}, defaultTypeOptions),
// 适用平台选项，初始为默认平台选项副本
platformOptions: Object.assign({}, defaultPlatformOptions),
// 表单验证规则，针对优惠券名称、发行量等属性设置相应规则
rules: {
name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
publishCount: [
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number', required: true, message: '面值只能是数值，0.01-10000，限2位小数', trigger: 'blur'}
],
minPoint: [
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
]
},
// 选中的商品，初始为null
selectProduct: null,
// 商品选择框加载状态，初始为false
selectProductLoading: false,
// 商品选项列表，初始为空数组
selectProductOptions: [],
// 选中的商品分类，初始为null
selectProductCate: null,
// 商品分类选项列表，初始为空数组
productCateOptions: []
}
];
export default {
name: 'CouponDetail',
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
coupon: Object.assign({}, defaultCoupon),
typeOptions: Object.assign({}, defaultTypeOptions),
platformOptions: Object.assign({}, defaultPlatformOptions),
rules: {
name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
publishCount: [
{type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
],
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) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
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();
},
created() {
// 如果是编辑状态，调用获取优惠券函数获取数据并赋值给coupon
if (this.isEdit) {
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
}
// 调用获取商品分类列表的函数
this.getProductCateList();
},
methods: {
// 提交表单的方法，先进行表单验证，验证通过后弹出确认框，根据是否编辑状态调用相应的创建或更新函数，成功后有相应提示和路由操作
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateCoupon(this.$route.query.id, this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}else{
createCoupon(this.coupon).then(response=>{
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration:1000
});
this.$router.back();
this.$router.back();
});
} else {
createCoupon(this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration: 1000
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
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});
this.$router.back();
});
}
});
} else {
this.selectProductOptions = [];
}
},
handleAddProductRelation(){
if(this.selectProduct===null){
this.$message({
message: '请先选择商品',
type: 'warning'
message: '验证失败',
type: 'error',
duration: 1000
});
return
return false;
}
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct=null;
},
handleDeleteProductRelation(index,row){
this.coupon.productRelationList.splice(index,1);
},
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=[];
},
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];
});
},
// 重置表单的方法，重置表单字段并恢复coupon为默认值
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;
},
// 删除商品关联的方法，根据索引从商品关联列表中删除对应项
handleDeleteProductRelation(index, row) {
this.coupon.productRelationList.splice(index, 1);
},
// 添加商品分类关联的方法，判断是否选择了商品分类，选择了则添加到分类关联列表，并清空选中分类
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 = [];
},
// 删除商品分类关联的方法，根据索引从分类关联列表中删除对应项
handleDeleteProductCateRelation(index, row) {
this.coupon.productCategoryRelationList.splice(index, 1);
},
// 根据商品id获取商品对象的方法，遍历商品选项列表查找对应id的商品并返回
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});
}
}
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;
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
// 根据商品分类id获取分类对象的方法，通过遍历分类选项列表查找对应id的分类信息并返回
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};
}
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
}
}
}
</script>
<style scoped>
.input-width {
width: 60%;
}
<!-- 带有scoped属性的style标签，意味着里面定义的样式仅作用于当前组件内的元素 -->
.input-width {
<!-- 定义了一个类选择器样式，作用是将应用该类的元素宽度设置为其父元素宽度的60% -->
width: 60%;
}
</style>

Write Preview
Loading…
Cancel
Save