vue新增弹窗
vue新增弹窗新增弹窗加校验html:<!-- 添加规则 --><el-dialogtitle="签到--添加规则":visible.sync="addRule.addDialog"width="50%":before-close="handleaddRule"class="addbox"center><el-form:model="ad
·
vue新增弹窗
html:
<!-- 添加规则 -->
<el-dialog
title="签到--添加规则"
:visible.sync="addRule.addDialog"
width="50%"
:before-close="handleaddRule"
class="addbox"
center
>
<el-form
:model="addRule.ruleForm"
ref="addRuleF"
label-width="100px"
class="demo-ruleForm"
:rules="addRule.rules"
>
<!-- -->
<!-- <el-form-item>
<el-row :gutter="24" style="margin-left: -90px">
<el-col :span="23">
<el-button
size="small"
type="primary"
class="right-btnone"
@click="addRulesF"
>添加规则</el-button
>
</el-col>
</el-row>
</el-form-item> -->
<!--1.任务名称 -->
<el-row :gutter="24" class="checkRule_cellList">
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="任务名称:" prop="ruleName">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input
v-model="addRule.ruleForm.ruleName"
placeholder="请输入任务名称"
></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<!--2.任务内容 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="任务内容:" prop="signNumber">
<el-col :span="6" class="checkRule_list">连续签到</el-col>
<el-col :span="14" class="checkRule_list">
<el-input
placeholder="请输入"
v-model="addRule.ruleForm.signNumber"
></el-input>
</el-col>
<el-col :span="3" class="checkRule_list">天</el-col>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="可获积分:" prop="integral">
<el-col :span="4" class="checkRule_list">可获得</el-col>
<el-col :span="14" class="checkRule_list">
<el-input
placeholder="请输入"
v-model="addRule.ruleForm.integral"
></el-input>
</el-col>
<el-col :span="3" class="checkRule_list">积分</el-col>
</el-form-item>
</el-col>
</el-row>
<!--3.选择优惠券 -->
<el-row :gutter="20">
<el-col class="addcard_seleted">
<el-form-item label="送优惠券:" prop="sent">
<el-row
:gutter="20"
style="
display: flex;
flex-direction: row;
align-items: center;
"
>
<el-col>
<el-radio
v-model="addRule.ruleForm.sent"
label="1"
@change="valueChange"
>否</el-radio
>
<el-radio
v-model="addRule.ruleForm.sent"
label="2"
@change="valueChange"
>
是
<!--点击是,出现选择优惠券按钮,点击selectCouponList打开弹窗 -->
<span>
<el-button
size="mini"
type="primary"
class="right-btnone"
style="margin-left: 15px"
@click="selectCouponList"
v-if="addRule.ruleForm.sent == '2'"
>选择优惠券</el-button
>
</span>
</el-radio>
</el-col>
</el-row>
<el-row
class="order-input"
:gutter="20"
v-if="addRule.ruleForm.searchTable.length > 0"
>
<el-col :span="24">
<el-form-item label prop>
<el-table
class="user-table"
:data="addRule.ruleForm.searchTable"
border
style="width: 100%"
id="tableExcel"
tooltip-effect="dark"
>
<el-table-column
prop="name"
align="center"
label="优惠券名称"
></el-table-column>
<el-table-column
prop="reductionAmount"
align="center"
label="优惠金额"
></el-table-column>
<el-table-column
prop="totalAmount"
align="center"
label="使用门槛"
></el-table-column>
<el-table-column
prop="dateCount"
align="center"
label="时效期"
></el-table-column>
<el-table-column
prop="description"
align="center"
label="描述"
></el-table-column>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<!--4.送礼品下拉框 -->
<el-row :gutter="20">
<el-form-item label="送礼品:">
<el-row :gutter="20">
<el-col :span="12">
<el-select
placeholder="暂不选择"
v-model="addRule.ruleForm.convert"
clearable
@change="changeTitle"
>
<el-option
v-for="itms in convertList"
:key="itms.id"
:label="itms.name"
:value="itms.id"
></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-row>
<!--5.领取限制radio -->
<el-row :gutter="20">
<el-col class="addcard_seleted">
<el-form-item label="领取限制:">
<el-row
:gutter="20"
style="
display: flex;
flex-direction: row;
align-items: center;
"
>
<el-col>
<el-radio v-model="addRule.ruleForm.channel" label="0"
>仅限首次</el-radio
>
<el-radio v-model="addRule.ruleForm.channel" label="1"
>除首次外每个周期</el-radio
>
<el-radio v-model="addRule.ruleForm.channel" label="2"
>每个周期循环</el-radio
>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<!-- <el-form-item>
<el-row :gutter="24">
<el-col :span="23" class="task_rulebtn">
<el-button
size="small"
type="primary"
class="right-btnone"
@click="removeRulesF(index)"
>删除</el-button
>
</el-col>
</el-row>
</el-form-item> -->
</el-row>
</el-form>
<span slot="footer" class="checkRule_footer">
<el-button @click="addRuleCancle">取 消</el-button>
<el-button type="primary" @click="submitAddRule('addRuleF')"
>确 定</el-button
>
</span>
</el-dialog>
html选择优惠券弹窗
<!-- 选择优惠券 -->
<el-dialog title="卡券添加" :visible.sync="dialogVisible1" width="70%">
<el-table
ref="singleTable"
:data="tableDataDialog"
class="view_table"
style="width: 100%"
id="tableExcel"
highlight-current-row
@current-change="handleCurrentChange"
v-loading="loadingSta"
>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column
prop="name"
label="优惠券名称"
align="center"
min-width="150"
></el-table-column>
<el-table-column
prop="reductionAmount"
label="优惠金额"
align="center"
min-width="90"
></el-table-column>
<el-table-column
prop="totalAmount"
align="center"
label="使用门槛"
min-width="90"
></el-table-column>
<el-table-column
prop="dateCount"
align="center"
label="时效性"
min-width="90"
></el-table-column>
<el-table-column
prop="description"
align="center"
label="描述"
min-width="90"
></el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="setCurrentBack">取 消</el-button>
<el-button type="primary" @click="setCurrent(tableData[1])"
>确 定</el-button
>
</span>
</el-dialog>
数据模型:
data() {
//动态校验-是否有优惠券
var validActionSend = (rule, value, callback) => {
if (this.addRule.ruleForm.sent == "2") {
if (this.addRule.ruleForm.searchTable.length > 0) {
callback();
} else {
callback(new Error("请选择优惠券"));
}
} else {
callback();
}
};
return {
//添加规则
addRule: {
addDialog: false, //弹窗
ruleForm: {
ruleName: "",
signNumber: "", //
integral: "", //积分
sent: "1", //radio-送优惠券(1.是 2.否)
convert: "", //送礼品
channel: "0", //radio-领用限制(0.仅限首次 1.除首次外每个周期 2.每个周期循环)
searchTable: [], //优惠券表格
convertDistrictName: "", //礼品名称
},
convertList: [],
rules: {
ruleName: [
{
required: true,
message: "请输入任务名称(限制15字)",
trigger: "blur",
},
{ min: 1, max: 15, message: "长度在15个字符以内", trigger: "blur" },
],
signNumber: [
{ required: true, message: "请输入天数", trigger: "blur" },
{
pattern: /^[1-9]+[0-9]*$/,
message: "请输入正整数",
trigger: "blur",
},
],
integral: [
{ required: true, message: "请输入积分", trigger: "blur" },
{
pattern: /^[1-9]+[0-9]*$/,
message: "请输入正整数",
trigger: "blur",
},
],
convert: [
{ required: true, message: "请选择类型", trigger: "change" },
],
sent: [
// { required: true, message: "请选择类型", trigger: "change" },
{ validator: validActionSend, trigger: "blur" },
],
},
},
// 优惠券弹窗
dialogVisible1: false,
loadingSta: false,//loading
tableDataDialog: [],//优惠券弹窗列表
currentRows: {},//表格单选行
}
}
created:
created() {
this.querySelectConvert();//兑换积分规则下拉框
},
methods:
//添加规则
submitAddRule(ruleForm) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
let params = {
channel: this.addRule.ruleForm.channel,
convertDistrictId: this.addRule.ruleForm.convert,
convertDistrictName: this.addRule.ruleForm.convertDistrictName,
couponId:
this.addRule.ruleForm.searchTable.length > 0
? this.addRule.ruleForm.searchTable[0].id
: "",
couponName:
this.addRule.ruleForm.searchTable.length > 0
? this.addRule.ruleForm.searchTable[0].name
: "",
integral: this.addRule.ruleForm.integral,
ruleName: this.addRule.ruleForm.ruleName,
signNumber: this.addRule.ruleForm.signNumber,
};
post("/sys/integral/sign/ins", params).then((res) => {
if (res.code === 200) {
this.$message.success("添加成功!");
this.addRuleCancle();
this.getData();
} else {
this.$message.error(res.data);
}
});
}
});
},
//添加规则弹窗清空
addRuleCancle() {
this.addRule.addDialog = false;
this.addRule.ruleForm.ruleName = "";
this.addRule.ruleForm.signNumber = "";
this.addRule.ruleForm.integral = "";
this.addRule.ruleForm.sent = "1";
this.addRule.ruleForm.convert = "";
this.addRule.ruleForm.channel = "0";
this.addRule.ruleForm.searchTable = [];
this.$refs["addRuleF"].resetFields();//清除校验
},
//添加规则弹窗点击蒙层清空
handleaddRule(done) {
this.addRule.ruleForm.ruleName = "";
this.addRule.ruleForm.signNumber = "";
this.addRule.ruleForm.integral = "";
this.addRule.ruleForm.sent = "1";
this.addRule.ruleForm.convert = "";
this.addRule.ruleForm.channel = "0";
this.addRule.ruleForm.searchTable = [];
this.$refs["addRuleF"].resetFields();//清除校验
done();
},
//兑换价值专区列表
querySelectConvert() {
get("/sys/integral/getConvertDistrict2").then((res) => {
if (res.code == 200) {
this.convertList = res.data;
} else {
this.$message.error(res.message);
}
});
},
//下拉列表既要获取id又要获取名称
changeTitle(id) {
this.title = this.convertList.find((item) => item.id == id); // this.title 是通过选中的id去从标题列表里面查找得到的是选中的那一条数据的一个对象,包含选中的数据的 name、id 等 , 后面可以通过 this.title.name 来获取标题名称
// console.log(this.title)
// console.log(this.title.name)
this.addRule.ruleForm.convertDistrictName = this.title.name;
},
其中:是否选择优惠券,否就不选优惠券
点击是,出现选择优惠券按钮
点击出现选择优惠券弹窗
单选,选择一条之后,会在新增弹窗那增加一条记录
methods:
//点击选择优惠券按钮出现弹窗
selectCouponList() {
this.exchangeCoupon();
this.dialogVisible1 = true;
},
//优惠券列表
exchangeCoupon() {
this.loadingSta = true;
get("/sys/integral/exchangeCoupon", {}).then((res) => {
this.loadingSta = false;
if (res.code === 200) {
res.data.forEach((item) => {
if (item.addTime == null) {
item.addTime = "";
} else {
item.addTime = moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
}
this.total = res.count; //分页总数
this.tableDataDialog = res.data;
});
} else {
this.tableDataDialog = [];
this.total = 0;
this.$message.error("请求失败!");
}
});
},
//radio切换,清除校验
valueChange() {
this.addRule.ruleForm.searchTable = [];
this.$refs["addRuleF"].validateField("sent");
},
// 表格单选某一行
handleCurrentChange(val) {
console.log(val);
this.currentRows = val;
console.log(this.currentRows);
},
//新增选择优惠券
setCurrent() {
console.log(this.editRule.ruleForm.id);
if (!this.editRule.ruleForm.id) {
this.addRule.ruleForm.searchTable = [];
this.addRule.ruleForm.searchTable.push(this.currentRows);
console.log(this.currentRows);
console.log(this.addRule.ruleForm.searchTable);
this.$refs["addRuleF"].validateField("sent");
} else {
this.editRule.ruleForm.searchTables = [];
this.editRule.ruleForm.searchTables.push(this.currentRows);
console.log(this.currentRows);
console.log(this.editRule.ruleForm.searchTables);
this.$refs["editRuleF"].validateField("sent");
}
this.setCurrentBack();
},
//关闭优惠券弹窗
setCurrentBack() {
this.dialogVisible1 = false;
this.currentRows = {};
},
更多推荐
已为社区贡献13条内容
所有评论(0)