|
@@ -33,7 +33,7 @@
|
|
>
|
|
>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<span>规则类型</span>
|
|
<span>规则类型</span>
|
|
- <el-select v-model="item.ruleType" placeholder="请选择油品" clearable size="small" >
|
|
|
|
|
|
+ <el-select v-model="item.ruleType" placeholder="请选择规则" clearable size="small" >
|
|
<el-option
|
|
<el-option
|
|
v-for="item in ruleTypeOptions"
|
|
v-for="item in ruleTypeOptions"
|
|
:key="item.dictValue"
|
|
:key="item.dictValue"
|
|
@@ -43,7 +43,7 @@
|
|
</el-select>
|
|
</el-select>
|
|
<span>满</span>
|
|
<span>满</span>
|
|
<el-input-number v-model="item.ruleTerms" :min="0" size="small" />
|
|
<el-input-number v-model="item.ruleTerms" :min="0" size="small" />
|
|
- <span v-if="item.ruleType=='1'">L</span>
|
|
|
|
|
|
+ <span v-if="item.ruleType=='3'">L</span>
|
|
<span v-else>元</span>
|
|
<span v-else>元</span>
|
|
<span>起累计 </span>
|
|
<span>起累计 </span>
|
|
<el-select v-model="item.oilName" placeholder="请选择油品" clearable size="small" @change="oilNameChang(index)" >
|
|
<el-select v-model="item.oilName" placeholder="请选择油品" clearable size="small" @change="oilNameChang(index)" >
|
|
@@ -124,10 +124,8 @@
|
|
<el-date-picker clearable size="small" style="width: 200px;margin-left: 10px;"
|
|
<el-date-picker clearable size="small" style="width: 200px;margin-left: 10px;"
|
|
v-model="form.emptyDate"
|
|
v-model="form.emptyDate"
|
|
type="date"
|
|
type="date"
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择清空积分时间">
|
|
|
|
|
|
+ value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
- <span>清空积分</span>
|
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label= "到期提醒设置" prop="expirationReminder">
|
|
<el-form-item label= "到期提醒设置" prop="expirationReminder">
|
|
<el-radio-group v-model="form.expirationReminder">
|
|
<el-radio-group v-model="form.expirationReminder">
|
|
@@ -155,10 +153,45 @@
|
|
</el-radio-group>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-row>
|
|
- <el-col :span="8" style="margin-left: 80px;">
|
|
|
|
|
|
+ <el-col :span="8" style="">
|
|
<el-form-item label="日期选择" prop="datePicker">
|
|
<el-form-item label="日期选择" prop="datePicker">
|
|
|
|
+ <el-select v-model="form.datePicker"
|
|
|
|
+ clearable size="small" @change="datePickerChang" >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in datePickerOptions"
|
|
|
|
+ :key="item.dictValue"
|
|
|
|
+ :label="item.dictLabel"
|
|
|
|
+ :value="item.dictValue"
|
|
|
|
+ ></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-form-item v-show="workDaytrue">
|
|
|
|
+ <div style="display: flex;flex-wrap: wrap;border-style: solid;border-color:#F5F7FA">
|
|
|
|
+ <div v-for="(item, index) in workDay" :key="index" style="margin:3px;">
|
|
|
|
+ <div class="hover-style" style="border-radius:5px;font-weight:bold;font-size:12px;cursor: pointer;" @click="clickWorkDayCalendar(item, index)">
|
|
|
|
+ <div>{{ item }}</div>
|
|
|
|
+ <div v-if="collectClickWorkDay.indexOf(index) > -1" style="width:4px;height:4px;border-radius:50%;background-color:red;position: relative;left:calc(50% - 2px);"></div>
|
|
|
|
+ <div v-else style="width:4px;height:4px;"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-show="moonDaytrue" >
|
|
|
|
+ <div style="display: flex;flex-wrap: wrap;border-style: solid;border-color:#F5F7FA">
|
|
|
|
+ <div v-for="(item, index) in moonEverDay" :key="index" style="margin:3px;">
|
|
|
|
+ <div class="hover-style" style="border-radius:5px;font-weight:bold;font-size:12px;cursor: pointer;" @click="clickCalendar(item, index)">
|
|
|
|
+ <div>{{ item }}</div>
|
|
|
|
+ <div v-if="collectClickCalendar.indexOf(index) > -1" style="width:4px;height:4px;border-radius:50%;background-color:red;position: relative;left:calc(50% - 2px);"></div>
|
|
|
|
+ <div v-else style="width:4px;height:4px;"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-show="datetrue">
|
|
<el-date-picker clearable size="small" style="margin-left: 10px;width: 200px"
|
|
<el-date-picker clearable size="small" style="margin-left: 10px;width: 200px"
|
|
- v-model="form.datePicker"
|
|
|
|
|
|
+ v-model="pickerTime"
|
|
type="dates"
|
|
type="dates"
|
|
value-format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择提醒时间设置">
|
|
placeholder="选择提醒时间设置">
|
|
@@ -210,7 +243,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { getToken } from "@/utils/auth";
|
|
import { getToken } from "@/utils/auth";
|
|
-import {getGun, stationinfo} from "@/api/station/gun";
|
|
|
|
|
|
+import { stationinfo} from "@/api/station/gun";
|
|
import { addRule, updateRule,oilNameList,gradeList,getRule } from "@/api/integral/rule";
|
|
import { addRule, updateRule,oilNameList,gradeList,getRule } from "@/api/integral/rule";
|
|
export default {
|
|
export default {
|
|
name: "ruleDetail",
|
|
name: "ruleDetail",
|
|
@@ -232,15 +265,20 @@ name: "ruleDetail",
|
|
expirationOptions:[],
|
|
expirationOptions:[],
|
|
integralDeductionOilOptions:[],
|
|
integralDeductionOilOptions:[],
|
|
integralActivityOptions:[],
|
|
integralActivityOptions:[],
|
|
|
|
+ datePickerOptions:[],
|
|
gradeOptions:[],
|
|
gradeOptions:[],
|
|
imgInfoList: [], //包含图片的id,name,size的集合
|
|
imgInfoList: [], //包含图片的id,name,size的集合
|
|
imgNameList: [], //后端返回的上传图片的name集合,传到后端
|
|
imgNameList: [], //后端返回的上传图片的name集合,传到后端
|
|
imgSize: [], //后端返回的上传图片的imgSize集合,传到后端
|
|
imgSize: [], //后端返回的上传图片的imgSize集合,传到后端
|
|
deleteImgFileList: [], //存已被删除了的图片的id
|
|
deleteImgFileList: [], //存已被删除了的图片的id
|
|
dialogImageUrl: '',
|
|
dialogImageUrl: '',
|
|
|
|
+ pickerTime:"",
|
|
dialogVisible: false,
|
|
dialogVisible: false,
|
|
// 是否显示弹出层
|
|
// 是否显示弹出层
|
|
open: false,
|
|
open: false,
|
|
|
|
+ workDaytrue:false,
|
|
|
|
+ moonDaytrue:false,
|
|
|
|
+ datetrue:false,
|
|
// 查询参数
|
|
// 查询参数
|
|
queryParams: {
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
@@ -256,10 +294,19 @@ name: "ruleDetail",
|
|
notOilList: [{}],
|
|
notOilList: [{}],
|
|
imgFileList:[]
|
|
imgFileList:[]
|
|
},
|
|
},
|
|
|
|
+ query:{
|
|
|
|
+ deptId: null
|
|
|
|
+ },
|
|
// 表单校验
|
|
// 表单校验
|
|
rules: {
|
|
rules: {
|
|
},
|
|
},
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
|
|
+ collectClickCalendar: [], // 收集固定日期选择的日子
|
|
|
|
+ collectClickWorkDay:[],
|
|
|
|
+ moonEverDay: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
|
|
|
|
+ '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
|
|
|
|
+ '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
|
|
|
+ workDay:["周天","周一","周二","周三","周四","周五","周六"],
|
|
addressUrl: location.protocol+"//"+location.host+ process.env.VUE_APP_BASE_API+"/common/upload"
|
|
addressUrl: location.protocol+"//"+location.host+ process.env.VUE_APP_BASE_API+"/common/upload"
|
|
};
|
|
};
|
|
},
|
|
},
|
|
@@ -277,13 +324,25 @@ name: "ruleDetail",
|
|
if(this.form.itemsDetail.length==0 ){
|
|
if(this.form.itemsDetail.length==0 ){
|
|
this.form.itemsDetail=[{}];
|
|
this.form.itemsDetail=[{}];
|
|
}
|
|
}
|
|
|
|
+ let datepicker = this.form.datePicker;
|
|
|
|
+ if(datepicker=="1"){
|
|
|
|
+ this.workDaytrue=true;
|
|
|
|
+ this.collectClickWorkDay= this.form.datePickerTime.split(',').map(parseFloat);
|
|
|
|
+ }else if(datepicker=="2"){
|
|
|
|
+ this.moonDaytrue=true;
|
|
|
|
+ this.collectClickCalendar= this.form.datePickerTime.split(',').map(parseFloat);
|
|
|
|
+ }else{
|
|
|
|
+ this.datetrue=true;
|
|
|
|
+ this.pickerTime = this.form.datePickerTime.split(',');
|
|
|
|
+ }
|
|
});
|
|
});
|
|
oilNameList(this.queryParams).then(response => {
|
|
oilNameList(this.queryParams).then(response => {
|
|
this.oilNameOptions = response.rows;
|
|
this.oilNameOptions = response.rows;
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- stationinfo().then(response => {
|
|
|
|
|
|
+ this.query.deptId =this.$store.selectDeptId;
|
|
|
|
+ stationinfo(this.query).then(response => {
|
|
this.stationOptions = response.rows;
|
|
this.stationOptions = response.rows;
|
|
});
|
|
});
|
|
this.getDicts("rule_type").then(response => {
|
|
this.getDicts("rule_type").then(response => {
|
|
@@ -301,6 +360,10 @@ name: "ruleDetail",
|
|
this.getDicts("integral_manage").then(response => {
|
|
this.getDicts("integral_manage").then(response => {
|
|
this.integralActivityOptions = response.data;
|
|
this.integralActivityOptions = response.data;
|
|
});
|
|
});
|
|
|
|
+ this.getDicts("date_picker").then(response => {
|
|
|
|
+ this.datePickerOptions = response.data;
|
|
|
|
+ });
|
|
|
|
+
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
//添加行
|
|
//添加行
|
|
@@ -359,7 +422,6 @@ name: "ruleDetail",
|
|
console.log("gradeOptions", this.gradeOptions );
|
|
console.log("gradeOptions", this.gradeOptions );
|
|
});
|
|
});
|
|
},
|
|
},
|
|
-
|
|
|
|
handlePictureCardPreview(file) {
|
|
handlePictureCardPreview(file) {
|
|
console.log("file",file);
|
|
console.log("file",file);
|
|
this.dialogImageUrl = file.url;
|
|
this.dialogImageUrl = file.url;
|
|
@@ -398,25 +460,35 @@ name: "ruleDetail",
|
|
this.$refs["form"].validate(valid => {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
if (valid) {
|
|
if (this.form.id != null) {
|
|
if (this.form.id != null) {
|
|
- if(this.form.datePicker != null){
|
|
|
|
- this.form.datePicker =this.form.datePicker.toString();
|
|
|
|
- }
|
|
|
|
if(this.form.notOilList!=null&&this.form.notOilList.length>0||this.form.notOilList[0].hasOwnProperty(saleAmt)){
|
|
if(this.form.notOilList!=null&&this.form.notOilList.length>0||this.form.notOilList[0].hasOwnProperty(saleAmt)){
|
|
- if(this.form.notOilList[0].saleAmt==""||this.form.notOilList[0].saleAmt=="0" ||this.form.notOilList[0].saleAmt=="undefined"){
|
|
|
|
- this.form.notOilList=[];
|
|
|
|
- }
|
|
|
|
|
|
+ if(this.form.notOilList[0].saleAmt==""||this.form.notOilList[0].saleAmt=="0" ||this.form.notOilList[0].saleAmt=="undefined"){
|
|
|
|
+ this.form.notOilList=[];
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let datepicker = this.form.datePicker;
|
|
|
|
+ if(datepicker=="1"){
|
|
|
|
+ this.form.datePickerTime=this.collectClickWorkDay.toString();
|
|
|
|
+ }else if(datepicker=="2"){
|
|
|
|
+ this.form.datePickerTime=this.collectClickCalendar.toString();
|
|
|
|
+ }else{
|
|
|
|
+ this.form.datePickerTime = this.pickerTime.toString();
|
|
}
|
|
}
|
|
updateRule(this.form).then(response => {
|
|
updateRule(this.form).then(response => {
|
|
this.msgSuccess("修改成功");
|
|
this.msgSuccess("修改成功");
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
- if(this.form.datePicker != null){
|
|
|
|
- this.form.datePicker =this.form.datePicker.toString();
|
|
|
|
|
|
+ let datepicker = this.form.datePicker;
|
|
|
|
+ if(datepicker=="1"){
|
|
|
|
+ this.form.datePickerTime=this.collectClickWorkDay.toString();
|
|
|
|
+ }else if(datepicker=="2"){
|
|
|
|
+ this.form.datePickerTime=this.collectClickCalendar.toString();
|
|
|
|
+ }else{
|
|
|
|
+ this.form.datePickerTime = this.pickerTime.toString();
|
|
}
|
|
}
|
|
if(this.form.notOilList!=null&&this.form.notOilList.length>0||this.form.notOilList[0].hasOwnProperty(saleAmt)){
|
|
if(this.form.notOilList!=null&&this.form.notOilList.length>0||this.form.notOilList[0].hasOwnProperty(saleAmt)){
|
|
- if(this.form.notOilList[0].saleAmt==""||this.form.notOilList[0].saleAmt=="0" ||this.form.notOilList[0].saleAmt=="undefined"){
|
|
|
|
- this.form.notOilList=[];
|
|
|
|
- }
|
|
|
|
|
|
+ if(this.form.notOilList[0].saleAmt==""||this.form.notOilList[0].saleAmt=="0" ||this.form.notOilList[0].saleAmt=="undefined"){
|
|
|
|
+ this.form.notOilList=[];
|
|
|
|
+ }
|
|
}
|
|
}
|
|
addRule(this.form).then(response => {
|
|
addRule(this.form).then(response => {
|
|
this.msgSuccess("新增成功");
|
|
this.msgSuccess("新增成功");
|
|
@@ -428,9 +500,84 @@ name: "ruleDetail",
|
|
// 取消按钮
|
|
// 取消按钮
|
|
cancel() {
|
|
cancel() {
|
|
this.queryreset();
|
|
this.queryreset();
|
|
|
|
+ },
|
|
|
|
+ deleteItemFromArr(item) {
|
|
|
|
+ // eslint-disable-next-line
|
|
|
|
+ Array.prototype.indexOf = function(val) {
|
|
|
|
+ for (var i = 0; i < this.length; i++) {
|
|
|
|
+ if (this[i] === val) {
|
|
|
|
+ return i
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return -1
|
|
|
|
+ }
|
|
|
|
+ // 通过索引删除数组元素
|
|
|
|
+ Array.prototype.remove = function(val) {
|
|
|
|
+ var index = this.indexOf(val)
|
|
|
|
+ if (index > -1) {
|
|
|
|
+ this.splice(index, 1)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 删除数组元素
|
|
|
|
+ this.collectClickCalendar.remove(item)
|
|
|
|
+ },
|
|
|
|
+ clickCalendar(item, index) {
|
|
|
|
+ console.log('item, index:', item, index)
|
|
|
|
+ if (this.collectClickCalendar.indexOf(index) === -1) {
|
|
|
|
+ this.collectClickCalendar.push(index)
|
|
|
|
+ } else if (this.collectClickCalendar.indexOf(index) > -1) {
|
|
|
|
+ this.deleteItemFromArr(index)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deleteWorkDayFromArr(item) {
|
|
|
|
+ Array.prototype.indexOf = function(val) {
|
|
|
|
+ for (var i = 0; i < this.length; i++) {
|
|
|
|
+ if (this[i] === val) {
|
|
|
|
+ return i
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return -1
|
|
|
|
+ }
|
|
|
|
+ // 通过索引删除数组元素
|
|
|
|
+ Array.prototype.remove = function(val) {
|
|
|
|
+ var index = this.indexOf(val)
|
|
|
|
+ if (index > -1) {
|
|
|
|
+ this.splice(index, 1)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 删除数组元素
|
|
|
|
+ this.collectClickWorkDay.remove(item)
|
|
|
|
+ },
|
|
|
|
+ clickWorkDayCalendar(item, index) {
|
|
|
|
+ if (this.collectClickWorkDay.indexOf(index) === -1) {
|
|
|
|
+ this.collectClickWorkDay.push(index)
|
|
|
|
+ } else if (this.collectClickWorkDay.indexOf(index) > -1) {
|
|
|
|
+ this.deleteWorkDayFromArr(index)
|
|
|
|
+ }
|
|
|
|
+ console.log('当前收集的下标:', this.collectClickWorkDay)
|
|
|
|
+ },
|
|
|
|
+ datePickerChang(){
|
|
|
|
+ if(this.form.datePicker == "1"){
|
|
|
|
+ this.workDaytrue=true;
|
|
|
|
+ this.moonDaytrue=false;
|
|
|
|
+ this.datetrue=false;
|
|
|
|
+ }else if(this.form.datePicker == "2"){
|
|
|
|
+ this.workDaytrue=false;
|
|
|
|
+ this.moonDaytrue=true;
|
|
|
|
+ this.datetrue=false;
|
|
|
|
+ }else if(this.form.datePicker == "3"){
|
|
|
|
+ this.workDaytrue=false;
|
|
|
|
+ this.moonDaytrue=false;
|
|
|
|
+ this.datetrue=true;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
+<style scoped>
|
|
|
|
+.hover-style:hover {
|
|
|
|
+ color: white;
|
|
|
|
+ background-color: blue;
|
|
|
|
+}
|
|
|
|
|
|
-
|
|
|
|
|
|
+</style>
|