<template>
|
<div class="promotion_page">
|
<div class="search_from">
|
<el-form
|
:model="formInline"
|
inline
|
label-width="140px"
|
class="form-flex"
|
size="small"
|
>
|
<div style="width: 90%">
|
<el-form-item label="项目名称：">
|
<el-select
|
v-model="formInline.projId"
|
style="width:200px"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option label="全部" value="all"></el-option>
|
<el-option
|
v-for="item in relustObj.projList"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="推广位状态：">
|
<el-select
|
v-model="formInline.status"
|
style="width:200px"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option label="全部" value="all"></el-option>
|
<el-option
|
v-for="item in relustObj.statusList"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="推广位名称：">
|
<el-input
|
v-model.trim="formInline.promName"
|
style="width: 200px"
|
type="tel"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<div>
|
<el-form-item label="项目创建时间：">
|
<el-date-picker
|
v-model="createdTime"
|
style="width: 240px"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="推广位创建时间：">
|
<el-date-picker
|
v-model="promotionCreatedTime"
|
style="width: 240px"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
</div>
|
<el-form-item style="text-align: right;">
|
<el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_box">
|
<div style="margin-left: 10px;text-align: right;">
|
<el-button type="primary" size="small" v-if='filterBtnById("420201")' @click="addPromotion">新增推广位</el-button>
|
</div>
|
<Etable
|
hasIndex
|
httpUrl="promoteList"
|
:columns="columns"
|
:searchData="searchData"
|
@getDataList="getDataList"
|
:exportUrl="{
|
url: '/qyp/promote/export',
|
powerId: '420204',
|
name: '项目列表',
|
}"
|
></Etable>
|
</div>
|
<el-dialog top="2vh" :title="title" :visible.sync="addProd" width="50%">
|
<!-- 新增商品名称 -->
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :disabled="disabled" size="small" label-width="100px" class="demo-ruleForm">
|
<el-form-item label="项目" prop="projId">
|
<el-select v-model="ruleForm.projId" placeholder="请选择项目">
|
<el-option
|
v-for="item in relustObj.activeProjList"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="代理名称" prop="agencyName">
|
<el-input v-model="ruleForm.agencyName" :disabled="disabled"></el-input>
|
</el-form-item>
|
<el-form-item label="推广位名称" prop="promName">
|
<el-input v-model="ruleForm.promName"></el-input>
|
</el-form-item>
|
<el-form-item label="推广位姓名" prop="promoterName">
|
<el-input v-model="ruleForm.promoterName"></el-input>
|
</el-form-item>
|
<el-form-item label="推广位电话" prop="promoterMblNo">
|
<el-input v-model="ruleForm.promoterMblNo"></el-input>
|
</el-form-item>
|
<el-form-item label="推广位状态" prop="status">
|
<el-radio-group v-model="ruleForm.status" :disabled="disabled">
|
<el-radio v-for="item in relustObj.statusList" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item style="text-align:right;" v-if="!disabled">
|
<el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
|
<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Etable from "@/components/table.vue";
|
import {promoteInit,promoteAdd,promoteDtl,promotePpdate} from "@/api/credit";
|
import uploadImg from "@/components/upload.vue";
|
import MultipleSelect from "@/components/fl-select.vue";
|
export default {
|
name: "order",
|
components: { Etable, MultipleSelect, uploadImg },
|
data() {
|
return {
|
disabled: false,
|
ruleForm: {},
|
columns: [
|
{
|
lable: "推广位链接",
|
prop: "promUrl",
|
align: "center",
|
width: "500",
|
},
|
{
|
lable: "项目",
|
prop: "projName",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "代理",
|
prop: "agencyName",
|
align: "center",
|
width: "200",
|
},
|
{
|
lable: "推广位名称",
|
prop: "promName",
|
align: "center",
|
width: "150",
|
},
|
{
|
lable: "推广人姓名",
|
prop: "promoterName",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "推广人电话",
|
prop: "promoterMblNo",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "推广位创建时间",
|
prop: "creTime",
|
align: "center",
|
width: "200",
|
},
|
{
|
lable: "推广位状态",
|
prop: "statusStr",
|
align: "center",
|
width: "100",
|
},
|
{
|
lable: "",
|
},
|
{
|
lable: "操作",
|
align: "center",
|
width: "180",
|
fixed: "right",
|
render: (h, scope) => {
|
return h("div", [
|
h(
|
"el-button",
|
{
|
props:{
|
type:'text',
|
size:'small'
|
},
|
style: {
|
display: this.filterBtnById(420203)
|
? "inline-block"
|
: "none",
|
},
|
on: {
|
click: () => {
|
this.title ='推广位详情';
|
this.disabled =true;
|
let { promId } = scope.row;
|
this.getProductDetail(promId)
|
},
|
},
|
},
|
"查看详情"
|
),
|
h(
|
"el-button",
|
{
|
props:{
|
type:'text',
|
size:'small'
|
},
|
style: {
|
display: this.filterBtnById(420202)
|
? "inline-block"
|
: "none",
|
},
|
on: {
|
click: () => {
|
this.disabled = false;
|
this.title ='编辑推广位';
|
let { promId } = scope.row;
|
this.getProductDetail(promId)
|
},
|
},
|
},
|
"编辑"
|
),
|
]);
|
},
|
},
|
],
|
rules: {
|
projId:[{ required: true, trigger: "change",message: "请选择项目"}],
|
agencyName:[{ required: true, trigger: "blur",message: "请输入代理名称"}],
|
promName:[{ required: true, trigger: "blur",message: "请输入推广位名称"}],
|
promoterName:[{ required: true, trigger: "blur",message: "请输入推广位姓名"}],
|
promoterMblNo:[{ required: true, trigger: "blur",message: "请输入推广位电话"}],
|
status:[{ required: true, message: "请选择上架状态", trigger: "change" }]
|
},
|
formInline: {
|
projId:"all",
|
status:"all",
|
},
|
searchData: {},
|
relustObj: {},
|
addProd:false,
|
createdTime:[],
|
promotionCreatedTime:[],
|
title:'新增推广位'
|
}
|
},
|
watch:{
|
addProd:{
|
handler: function(val) {
|
if(!val){
|
this.ruleForm = {
|
agencyName:"",
|
promName:"",
|
promoterName:"",
|
promoterMblNo:"",
|
status:""
|
};
|
this.$refs['ruleForm'].resetFields();
|
}
|
},
|
deep: true
|
}
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
this.initSerch();
|
},
|
methods: {
|
keyupEvent(e) {
|
//只能输入整数
|
e.target.value = e.target.value.replace(/[^\d]/g, "");
|
},
|
submitForm(){
|
this.$refs['ruleForm'].validate((valid) => {
|
if(valid){
|
let { promId } = this.ruleForm;
|
let event = {promoteAdd,promotePpdate};
|
event[promId?"promotePpdate":"promoteAdd"](this.ruleForm).then((res)=>{
|
this.addProd = false;
|
this.onSearch();
|
})
|
}
|
})
|
},
|
addPDHCancelBut(){
|
this.$refs["skuObj"].resetFields();
|
this.addProd = false;
|
},
|
addPromotion(){
|
this.addProd = true;
|
this.title='新增推广位';
|
this.disabled = false;
|
},
|
onSearch() {
|
if (this.createdTime && this.createdTime.length) {
|
this.formInline.projCreStartTime = this.createdTime[0];
|
this.formInline.projCreEndTime = this.createdTime[1];
|
} else {
|
this.formInline.projCreStartTime = null;
|
this.formInline.projCreEndTime = null;
|
}
|
if (this.promotionCreatedTime && this.promotionCreatedTime.length) {
|
this.formInline.promCreEndTime = this.promotionCreatedTime[0];
|
this.formInline.promCreStartTime = this.promotionCreatedTime[1];
|
} else {
|
this.formInline.promCreEndTime = null;
|
this.formInline.promCreStartTime = null;
|
}
|
let objForm = JSON.parse(JSON.stringify(this.formInline));
|
for (let key in objForm) {
|
if (objForm[key] === "all"||objForm[key] === ""||objForm[key] === null) {
|
delete objForm[key];
|
}
|
}
|
this.searchData = { ...objForm };
|
},
|
initSerch() {
|
promoteInit().then(({ body }) => {
|
this.relustObj = body;
|
});
|
},
|
prodListInit() {
|
prodListInit().then(({ body }) => {
|
let prodList = body.items.map(f=>{
|
return {
|
code:f.prodId,
|
name:f.prodName
|
}
|
});
|
this.relustObj.prodList = prodList;
|
});
|
},
|
getDataList(e) {
|
},
|
getProductDetail(promId,type){
|
promoteDtl({promId:promId}).then(({body})=>{
|
this.ruleForm = body;
|
this.$nextTick(()=>{
|
this.addProd = true;
|
});
|
})
|
},
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.promotion_page {
|
background-color: #f0f2f5;
|
.table_box_num {
|
margin-top: 5px;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
color: #666;
|
font-size: 14px;
|
font-weight: bold;
|
padding-right: 16px;
|
box-sizing: border-box;
|
span {
|
display: inline-block;
|
&:nth-child(even) {
|
margin-right: 20px;
|
color: #333;
|
}
|
}
|
}
|
.el-form-div {
|
width: 100%;
|
display: flex;
|
}
|
.tips{
|
color: #f56c6c;
|
}
|
}
|
</style>
|
|
