472 lines
16 KiB
Vue
472 lines
16 KiB
Vue
<template>
|
||
<div class="mainBox">
|
||
<!-- 第一部分：姓名和电话 -->
|
||
<div class="titleOut">第一步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">添加客户</span>
|
||
</div>
|
||
<el-form :model="step1Form" ref="step1Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step1Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.phone"
|
||
placeholder="电话"
|
||
maxlength="11"
|
||
show-word-limit
|
||
:rules="[
|
||
{ required: true, message: '请输入电话号码', trigger: 'blur' },
|
||
{ pattern: /^[0-9]{10,11}$/, message: '请输入有效的电话号码', trigger: ['blur', 'change'] }
|
||
]"
|
||
></el-input>
|
||
</el-col>
|
||
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step1Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step1Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step1Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step1Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 第二部分：姓名和销售 -->
|
||
<div class="titleOut">第二步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">用户配置销售</span>
|
||
</div>
|
||
<el-form :model="step2Form" ref="step2Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step2Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<!-- <el-input-->
|
||
<!-- size="mini"-->
|
||
<!-- v-model="field.xiaoshou"-->
|
||
<!-- placeholder="销售"-->
|
||
<!-- :rules="[{ required: true, message: '请输入销售数据', trigger: 'blur' }]"-->
|
||
<!-- ></el-input>-->
|
||
|
||
<el-select size="mini" v-model="field.xiaoshou" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in saleList"
|
||
:key="item.id"
|
||
:label="item.username"
|
||
:value="item.username">
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
|
||
<el-col :span="4">
|
||
<el-button size="mini" :disabled="step2Form.fields.length<1" type="danger"
|
||
@click.prevent="removeField(index, 'step2Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step2Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step2Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step2Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 第三部分：姓名和金额 -->
|
||
<div class="titleOut">第三步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">用户充值</span>
|
||
</div>
|
||
<el-form :model="step3Form" ref="step3Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step3Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.money"
|
||
placeholder="金额"
|
||
:rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step3Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step3Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step3Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step3Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 第四部部分：姓名和金额 -->
|
||
<div class="titleOut">第四步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">产品下单</span>
|
||
</div>
|
||
<el-form :model="step4Form" ref="step4Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step4Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.money"
|
||
placeholder="金额"
|
||
:rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-date-picker
|
||
v-model="field.stime"
|
||
type="date"
|
||
size="mini"
|
||
placeholder="销售时间"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step4Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step4Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step4Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step4Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 第五部部分：姓名和金额 -->
|
||
<div class="titleOut">第五步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">确认支付</span>
|
||
</div>
|
||
<el-form :model="step5Form" ref="step5Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step5Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="4">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.money"
|
||
placeholder="金额"
|
||
:rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-date-picker
|
||
v-model="field.stime"
|
||
type="date"
|
||
size="mini"
|
||
placeholder="开始时间"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-date-picker
|
||
v-model="field.etime"
|
||
type="date"
|
||
size="mini"
|
||
placeholder="结束时间"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step5Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<ul class="typeStyle">
|
||
<li>分类1：
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.type1"
|
||
placeholder="请输入分类1"
|
||
:rules="[{ required: true, message: '请输入分类1', trigger: 'blur' }]"
|
||
></el-input>
|
||
</li>
|
||
<li>分类2：
|
||
<el-input
|
||
:disabled="!field.type1"
|
||
size="mini"
|
||
v-model="field.type2"
|
||
placeholder="请输入分类2"
|
||
:rules="[{ required: true, message: '请输入分类2', trigger: 'blur' }]"
|
||
></el-input>
|
||
</li>
|
||
<li>分类3：
|
||
<el-input
|
||
size="mini"
|
||
:disabled="!field.type1||!field.type2"
|
||
v-model="field.type3"
|
||
placeholder="请输入分类3"
|
||
:rules="[{ required: true, message: '请输入分类3', trigger: 'blur' }]"
|
||
></el-input>
|
||
</li>
|
||
</ul>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step5Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step5Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step5Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
reqAddSaleRevenueFive, reqAddSaleRevenueFour,
|
||
reqAddSaleRevenueOne,
|
||
reqAddSaleRevenueTHree,
|
||
reqAddSaleRevenueTwo
|
||
} from "@/api/operation/importSalesRevenue";
|
||
import {reqGetSaleManList} from "@/api/operation/analyze";
|
||
|
||
export default {
|
||
name: "importSalesRevenue",
|
||
data() {
|
||
return {
|
||
saleList: [],
|
||
// 第一部分的表单数据
|
||
step1Form: {
|
||
fields: [{key: Date.now(), phone: '', name: ''}],
|
||
},
|
||
// 第二部分的表单数据
|
||
step2Form: {
|
||
fields: [{key: Date.now(), name: '', xiaoshou: ''}],
|
||
},
|
||
// 第三部分的表单数据
|
||
step3Form: {
|
||
fields: [{key: Date.now(), name: '', money: ''}],
|
||
},
|
||
// 第四部分的表单数据
|
||
step4Form: {
|
||
fields: [{key: Date.now(), name: '', money: '', stime: ''}],
|
||
},
|
||
step5Form: {
|
||
fields: [{key: Date.now(), name: '', money: '', stime: '', etime: '', type1: '', type2: '', type3: ''}],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
reqGetSaleManList().then(res => {
|
||
if (res.status) {
|
||
this.saleList = res.data
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
console.log(this[formName].fields);
|
||
if (formName === 'step1Form') {
|
||
reqAddSaleRevenueOne({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
this[formName].fields = [{key: Date.now(), phone: '', name: ''}]
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else if (formName === 'step2Form') {
|
||
reqAddSaleRevenueTwo({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else if (formName === 'step3Form') {
|
||
reqAddSaleRevenueTHree({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else if (formName === 'step4Form') {
|
||
reqAddSaleRevenueFour({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else {
|
||
let res = []
|
||
let arr = this[formName].fields
|
||
for (let i = 0; i < arr.length; i++) {
|
||
let item = {
|
||
name: arr[i].name,
|
||
money: arr[i].money,
|
||
stime: arr[i].stime,
|
||
etime: arr[i].etime,
|
||
resource_type: ''
|
||
}
|
||
if (arr[i].type3) {
|
||
item.resource_type = arr[i].type1 + "-" + arr[i].type2 + "-" + arr[i].type3
|
||
} else if (arr[i].type2) {
|
||
item.resource_type = arr[i].type1 + "-" + arr[i].type2
|
||
} else {
|
||
item.resource_type = arr[i].type1
|
||
}
|
||
res.push(item)
|
||
}
|
||
// let ploay = {
|
||
// data: res
|
||
// }
|
||
reqAddSaleRevenueFive({data: res}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
} else {
|
||
console.log('提交出错！');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
this[formName].fields = [{key: Date.now(), name: '', phone: '', xiaoshou: '', money: ''}].filter(f => {
|
||
if (formName === 'step1Form') return f.phone !== undefined;
|
||
if (formName === 'step2Form') return f.xiaoshou !== undefined;
|
||
if (formName === 'step3Form') return f.money !== undefined;
|
||
});
|
||
},
|
||
addField(formName, fieldType) {
|
||
this[formName][fieldType].push({
|
||
key: Date.now(),
|
||
name: '',
|
||
phone: formName === 'step1Form' ? '' : undefined,
|
||
xiaoshou: formName === 'step2Form' ? '' : undefined,
|
||
money: formName === 'step3Form' ? '' : undefined,
|
||
});
|
||
},
|
||
removeField(index, formName, fieldType) {
|
||
this[formName][fieldType].splice(index, 1);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.demo-dynamic {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.mainBox {
|
||
padding: 20px;
|
||
height: calc(100vh - 100px);
|
||
background: #fff;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.titleOut {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #4c4948;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.typeStyle {
|
||
padding-left: 0;
|
||
display: flex;
|
||
|
||
|
||
li {
|
||
display: flex;
|
||
margin-right: 15px;
|
||
|
||
.el-input {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
}
|
||
</style>
|