父组件
<template>
<div class="ReportManagement">
<!--此处省略表单-->
<template slot-scope="scope">
<div v-if="scope.row.recommendId" >
<span @click="openDialog('edit', scope.row)" class="btn-color">[编辑]</span>
<span @click="openDialog('add')" class="btn-color">[新增]</span>
</div>
</template>
<!--此处省略表单 end-->
<edit-dialog :visible="dialogVisible"
:rule-form="ruleForm"
@closeFindDialog="closeFindDialog"></edit-dialog>
</div>
</template>
<script>
import editDialog from './components/editDialog';
const defaultQueryParams = {
recommendEndDate:'', // 推荐结束时间
recommendId:null, // 推荐id 新增传null 修改传推荐id
recommendPlatform:['zx_wny'], // 推荐平台 zx_wny 维诺亚
recommendStartDate:'', // 推荐开始
reserveStartTime:'',
reserveEndTime:'',
reserveId:'', // 策略id
reserveName:'', // 策略名称
};
export default {
components: {
editDialog,
},
data() {
return{
dialogVisible: false,
ruleForm:_.cloneDeep(defaultQueryParams), // 深拷贝
}
},
methods: {
openDialog(type, row) {
if (type === 'add') { // 新增
this.ruleForm = _.cloneDeep(defaultQueryParams);
} else { // 编辑
this.ruleForm = _.cloneDeep(row);
}
this.dialogVisible = true;
},
// 关闭弹窗
closeFindDialog(val) {
if (val) { // 子组件提交表单保存操作
this.saveAdd();
}
this.dialogVisible = false;
},
}
}
</script>
子组件
<template>
<div class="product_edit">
<el-dialog
title="产品推荐"
:visible.sync="visible"
:close-on-click-modal="false"
width="800px"
:show-close="false"
center>
<el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="editForm">
<el-container class="form-body">
<el-form-item label="销售策略名称" prop="reserveName" class="pro-search"
:rules="{ required: true, message: '请输入销售策略名称', trigger: ['blur', 'change'] }">
<el-autocomplete
v-model="ruleForm.reserveName"
value-key="name"
:fetch-suggestions="querySearchAccount"
placeholder="可查询销售策略名称"
@select="handleSelectAccount"
style="width: 400px"
>
<template slot-scope="{ item }">
<div>{{ item.reserveName }}</div>
</template>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-autocomplete>
</el-form-item>
<el-form-item label="产品预约档期" prop="reserveStartTime"
:rules="{ required: !(reserveTimeRange&&reserveTimeRange.length), message: '请填入预约时间', trigger: ['blur', 'change'] }">
<el-date-picker v-model="reserveTimeRange"
:disabled="true"
@change="timeChange('reserve')"
type="datetimerange"
placeholder="请选择有效期"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00','15:00:00']">
</el-date-picker>
</el-form-item>
<el-form-item label="推荐有效期" prop="recommendStartDate"
:rules="{ required: !(recommendTimeRange&&recommendTimeRange.length), message: '请选择有效期', trigger: ['blur', 'change'] }">
<el-date-picker v-model="recommendTimeRange"
@change="timeChange('recommen')"
type="datetimerange"
placeholder="请选择有效期"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00','15:00:00']">
</el-date-picker>
</el-form-item>
<el-form-item label="推荐平台" prop="recommendPlatform" class="displayKind"
:rules="{ required: true, message: '请勾选', trigger: 'change' }">
<el-checkbox-group v-model="ruleForm.recommendPlatform" :disabled="true">
<el-checkbox v-for="(item, index) in displayKindList" :key="index" :label="item.key" name="type">{{ item.value }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-container>
<el-container class="btn-wrapper">
<el-row>
<el-button type="primary" size="medium" @click="submitForm">确定</el-button>
<el-button size="medium" @click="closeFindDialog">取消</el-button>
</el-row>
</el-container>
</el-form>
</el-dialog>
</div>
</template>
<script>
import Vue from 'vue';
import { searchReserveDetail } from '@/admin/api/marketGround';
import { axiosCancel } from '@/config/fetch';
export default {
props: {
visible:{
type:Boolean,
default:false,
},
ruleForm:{
type:Object,
default:()=>{},
},
},
data() {
return {
displayKindList: [{key: "zx_wny", value: '微诺亚'}],
recommendTimeRange:[],
reserveTimeRange:[],
emptyAccountList: [{ accountName: '您当前尚无符合条件的客户哦', id: '', disabled: true }],
};
},
watch: {
'ruleForm' () {
if (this.ruleForm.recommendId) {
this.initData();
}
},
},
methods: {
// 编辑详情
initData() {
this.reserveTimeRange = [this.ruleForm.reserveStartTime, this.ruleForm.reserveEndTime];
this.recommendTimeRange = [this.ruleForm.recommendStartDate, this.ruleForm.recommendEndDate];
},
resetForm() {
this.$refs.ruleForm.resetFields();
this.reserveTimeRange = [];
this.recommendTimeRange = [];
},
submitForm () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.timeChange('reserve');
this.timeChange('recommend');
this.$emit("closeFindDialog", this.ruleForm);
} else {
return false;
}
});
},
timeChange(type) {
let params = this.ruleForm;
switch (type) {
case 'reserve':
params.reserveStartTime = this.reserveTimeRange ? this.reserveTimeRange[0] : '';
params.reserveEndTime = this.reserveTimeRange ? this.reserveTimeRange[1] : '';
break;
default:
params.recommendStartDate = this.recommendTimeRange ? this.recommendTimeRange[0] : '';
params.recommendEndDate = this.recommendTimeRange ? this.recommendTimeRange[1] : '';
break;
}
},
// 查询策略
async querySearchAccount(queryString, cb) {
let serachResults;
try {
let params = {
searchName: _.trim(queryString),
};
if (axiosCancel.searchReserveDetail) searchReserveDetail();
let {data} = await searchReserveDetail(params);
if (data.response) {
serachResults = data.response;
} else {
serachResults = this.emptyAccountList;
}
cb(serachResults);
} catch (e) {
console.log(e);
}
},
/**
* 选中查询策略信息
* */
handleSelectAccount(item) {
let today = Vue.moment(new Date()).format("YYYY-MM-DD 00:00:00");
this.ruleForm.reserveId = item.id || null;
this.reserveTimeRange = [item.reserveStartTime, item.reserveEndTime];
this.recommendTimeRange = [today, item.reserveEndTime];
this.ruleForm.reserveName = item.reserveName;
console.log(this.ruleForm);
},
closeFindDialog() {
this.$emit("closeFindDialog");
this.resetForm();
},
},
};
</script>
