web-base-admin/src/views/information/business/index.vue

816 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="page1">
<topBar
v-if="topList.length > 0"
:top-list="topList"
:moren="moren"
/>
<div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px">
<el-row>
<el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode">
<el-input v-model="queryParams.memberCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'会员姓名'" prop="name">
<el-input v-model="queryParams.memberName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'结算等级'" prop="pkRegisterGrade">
<el-select
v-model="queryParams.pkRegisterGrade"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in gradeRangList"
:key="item.pkId"
:label="item.gradeName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'真实奖衔'" prop="pkAwards">
<el-select
v-model="queryParams.pkAwards"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in awardsList"
:key="item.pkId"
:label="item.awardsName"
:value="item.pkId"
/>
</el-select>
<!-- <el-input clearable v-model="queryParams.pkAwards"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'隶属体系'" prop="vertexId">
<el-select
v-model="queryParams.vertexId"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in vertexList"
:key="item.pkId"
:label="item.vertexName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'隶属团队'" prop="teamId">
<el-select
v-model="queryParams.teamId"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in memberTeamList"
:key="item.pkId"
:label="item.teamName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<el-form-item :label="'变更次数'" prop="code">
<el-input v-model="queryParams.editNumber" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'联系方式'" prop="code">
<el-input v-model="queryParams.phone" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'服务中心编号'" prop="centerMemberCode">
<el-input
v-model="queryParams.centerMemberCode"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'服务中心姓名'" prop="centerMemberName">
<el-input
v-model="queryParams.centerMemberName"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'创建日期'" prop="code">
<el-date-picker
v-model="queryParams.time1"
type="datetimerange"
range-separator="——"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
value-format="yyyy-MM-dd HH:mm:ss"
:unlink-panels="true"
@change="changeTime1"
/>
</el-form-item>
</el-col>
</el-row>
<el-collapse-transition>
<div v-show="isActive">
<el-row>
<el-col :span="8">
<el-form-item :label="'支付日期'" prop="code">
<el-date-picker
v-model="queryParams.time2"
type="datetimerange"
range-separator="——"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
value-format="yyyy-MM-dd HH:mm:ss"
:unlink-panels="true"
@change="changeTime2"
/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-collapse-transition>
<el-row style="margin-left: 20px">
<el-col :span="4">
<div class="searchbox">
<el-button class="searchbtn" @click="getBusinessList">
{{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
</div>
</el-col>
<div class="openClose" @click="changeActive">
<i
:class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
/>
<div>{{ isActive ? '点击收起' : '点击展开' }}</div>
</div>
</el-row>
</el-form>
</div>
<div class="maintop">
<div class="mainbtn">
<el-button
v-hasButtons="['BasicBusinessImport']"
size="small"
class="thebtn1"
@click="handleImport"
>
{{ '导入' }}</el-button>
<el-button size="small" class="thebtn2" @click="importTemplate">
{{ '下载模板' }}</el-button>
</div>
</div>
<div class="main">
<div class="maintable">
<el-table
:data="tableData"
height="400px"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column
align="center"
prop="memberCode"
label="会员编号"
min-width="110px"
/>
<el-table-column
align="center"
prop="newMemberName"
label="变更会员姓名"
width="110px"
>
<template slot-scope="scope">
<el-input v-model="scope.row.newMemberName" />
</template>
</el-table-column>
<el-table-column
min-width="160px"
align="center"
prop="newPhone"
label="变更联系方式"
>
<template slot-scope="scope">
<el-input v-model="scope.row.newPhone" clearable />
</template>
</el-table-column>
<el-table-column
align="center"
prop="memberName"
label="会员姓名"
/>
<el-table-column align="center" prop="phone" label="联系方式" min-width="130px" />
<el-table-column align="center" prop="pkRegisterGradeVal" label="结算等级" min-width="100px" />
<el-table-column
align="center"
prop="pkAwardsVal"
label="真实奖衔"
/>
<el-table-column
align="center"
prop="vertexName"
label="隶属体系"
/>
<el-table-column
align="center"
prop="teamName"
label="隶属团队"
/>
<el-table-column
align="center"
prop="centerMemberCode"
label="服务中心编号"
min-width="140"
/>
<el-table-column
align="center"
prop="centerMemberName"
label="服务中心姓名"
min-width="140"
/>
<el-table-column
align="center"
prop="creationTime"
label="创建日期"
min-width="160"
/>
<el-table-column
align="center"
prop="payTime"
label="支付日期"
min-width="160"
/>
<el-table-column
align="center"
prop="editNumber"
label="变更次数"
min-width="80"
/>
</el-table>
</div>
</div>
<div class="main">
<div
v-for="(item, index) in handleBusinessList"
:key="index"
class="main_content"
>
<el-form ref="form" :model="form" label-width="130px">
<!-- <el-checkbox-group v-model="item.wowList">
<el-checkbox> -->
<el-form-item :label="item.editTypeName">
<!-- 单选 -->
<el-checkbox-group
v-if="item.buttonType == 1"
v-model="item.businessValueList"
:max="1"
>
<el-checkbox
v-for="aitem in item.enumEntityList"
:key="aitem.value"
:label="aitem.value"
>{{ aitem.label }}</el-checkbox>
</el-checkbox-group>
<!-- 多选 -->
<el-checkbox-group
v-if="item.buttonType == 2"
v-model="item.businessValueList"
>
<el-checkbox
v-for="aitem in item.enumEntityList"
:key="aitem.value"
:label="aitem.value"
>{{ aitem.label }}</el-checkbox>
</el-checkbox-group>
<!-- 输入框 -->
<el-input
v-if="item.buttonType == 3"
v-model="item.businessValueList[0]"
type="number"
style="width: 150px"
>
<i slot="suffix">%</i>
</el-input>
</el-form-item>
<!-- </el-checkbox>
</el-checkbox-group> -->
</el-form>
</div>
</div>
<div class="footer">
<div style="margin: 0 auto">
<el-button class="thebtn"> {{ '取消' }}</el-button>
<el-button
v-hasButtons="['BasicBusinessConfirm']"
type="primary"
class="thebtn"
@click="saveDate"
>
{{ '确认' }}</el-button>
</div>
</div>
<el-dialog
:title="'会员信息错误'"
:close-on-click-modal="false"
:visible.sync="errorShow"
width="600px"
append-to-body
>
<div>
<el-table
:data="errorData"
height="400px"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
>
<el-table-column
align="center"
prop="memberCode"
:label="'会员编号'"
/>
<el-table-column
align="center"
prop="errorMsg"
:label="'报错信息'"
/>
</el-table>
</div>
<div class="footer" style="text-align: center">
<div style="margin: 0 auto">
<el-button class="thebtn" @click="errorShow = false">
{{ '取消' }}</el-button>
<el-button type="primary" class="thebtn" @click="errorShow = false">
{{ '确认' }}</el-button>
</div>
</div>
</el-dialog>
<el-dialog
:title="upload.title"
:close-on-click-modal="false"
:visible.sync="upload.open"
width="600px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-exceed="handleExceed"
:auto-upload="false"
drag
>
<i class="el-icon-upload" />
<div class="el-upload__text">
{{ '将文件拖到此处,或' }}
<em>{{ '点击上传' }}</em>
</div>
<div slot="tip" class="el-upload__tip">
<el-link type="info" style="font-size: 12px" @click="importTemplate">
{{ '下载模板' }}</el-link>
</div>
<div slot="tip" class="el-upload__tip" style="color: red">
{{ '提示仅允许导入“xls”或“xlsx”格式文件' }}
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">{{
'确认'
}}</el-button>
<el-button @click="upload.open = false">{{
'取消'
}}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import topBar from '@/components/topBar/checked'
import { getToken } from '@/utils/auth'
import { getRouters } from '@/api/settle'
import {
getHandleBusinessEnum,
getBusinessList,
businessCheck
} from '@/api/business'
import { getAwardsListChiose, getgradeRanglist } from '@/api/level'
import { getvertexValue, getmemberTeamList } from '@/api/financialCase'
export default {
name: 'Jcyw',
components: {
topBar
},
data() {
return {
moren: 'jcyw',
topList: [
{
name: '基础业务',
path: 'jcyw',
url: 'BasicBusiness'
},
{
name: '订单业务',
path: 'ddyw',
url: 'OrderBusiness'
}
// {
// name: "确认业务",
// path: "shyw",
// },
// {
// name: "在线签呈",
// path: "zxqc",
// },
],
multipleSelection: [],
wowList: [],
queryParams: {
memberCode: '',
memberName: '',
pkAwards: '',
vertexId: '',
teamId: '',
editNumber: '',
phone: '',
centerMemberCode: '',
centerMemberName: '',
startDate: '',
endDate: '',
startDatePay: '',
endDatePay: '',
time1: [],
time2: []
},
tableData: [],
// 折叠搜索框
isActive: false,
form: {},
handleBusinessList: [],
errorShow: false,
errorData: [],
awardsList: [],
gradeRangList: [],
memberTeamList: [],
vertexList: [],
upload: {
// 是否显示弹出层(物流导入)
open: false,
// 弹出层标题(物流导入)
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的物流数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url:
process.env.VUE_APP_BASE_API +
'/member/manage/handle-business/importData'
}
}
},
created() {
this.getBusinessList()
this.getHandleBusinessEnum()
this.getUserRoute()
},
methods: {
// 路由权限
getUserRoute() {
getRouters().then((res) => {
res.data.forEach((item) => {
this.topList.forEach((items) => {
if (item.routeName == items.url) {
this.$set(items, 'changed', true)
}
})
})
})
},
checkRadio(value) {},
// 下载模板
importTemplate() {
this.download(
'/member/manage/handle-business/download-template',
{},
`${'基础业务办理'}-${new Date().getTime()}.xlsx`
)
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = '基础业务'
this.upload.open = true
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
var fileName = response.fileName
if (fileName != undefined && fileName != '') {
}
if (response.code == 200) {
this.tableData = response.data
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert(response.msg, '导入结果', {
dangerouslyUseHTMLString: true
})
} else if (response.code == 504) {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
var errorMsg = response.data.map(item => item.memberCode).join(',')
this.$alert(errorMsg + response.msg, '导入结果', {
dangerouslyUseHTMLString: true
})
} else {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert(response.msg, '导入结果', {
dangerouslyUseHTMLString: true
})
}
},
// 上传文件数量超出后的动作
handleExceed() {
this.upload.isUploading = false
this.msgInfo('仅可上传一个文件哦')
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
// 点击下一步
saveDate() {
// console.log("🌈", this.handleBusinessList);
if (this.multipleSelection.length > 0) {
businessCheck({
businessMemberList: this.multipleSelection,
handleBusinessList: this.handleBusinessList
}).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
this.$router.push({
path: '/information/business/shyw',
query: {
data: JSON.stringify(res.data),
handleBusinessList: JSON.stringify(this.handleBusinessList)
}
})
} else if (res.code == 504 && res.data) {
this.errorShow = true
this.errorData = res.data
}
})
} else {
this.$message({
message: '至少选择一条数据',
type: 'warning'
})
}
},
changeTime1(val) {
this.queryParams.startDate = val[0]
this.queryParams.endDate = val[1]
},
changeTime2(val) {
this.queryParams.startDatePay = val[0]
this.queryParams.endDatePay = val[1]
},
getBusinessList() {
getBusinessList(this.queryParams).then((res) => {
this.tableData = res.rows
})
},
getHandleBusinessEnum() {
// 获取基础业务枚举
getHandleBusinessEnum().then((res) => {
res.data.forEach((ele) => {
ele.businessValueList = []
ele.wowList = []
})
this.handleBusinessList = res.data
})
getgradeRanglist().then((res) => {
this.gradeRangList = res.data
})
getAwardsListChiose().then((res) => {
this.awardsList = res.rows
})
getmemberTeamList().then((res) => {
this.memberTeamList = res.rows
})
getvertexValue().then((res) => {
this.vertexList = res.data
})
},
// 展开折叠
changeActive() {
this.isActive = !this.isActive
},
// 重置
reChongzhi() {
this.queryParams = {
memberCode: '',
memberName: '',
time1: [],
time2: []
}
this.getBusinessList()
},
handleSelectionChange(val) {
this.multipleSelection = val
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return 'success-row'
}
return ''
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
::v-deep .el-input__inner {
height: 32px;
line-height: 32px;
}
::v-deep .el-date-editor .el-range__close-icon {
margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator {
margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon {
margin-top: -10px;
}
::v-deep .el-button {
padding: 8px 20px;
}
::v-deep .el-form-item {
margin-bottom: 10px;
}
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
::v-deep .el-table .success-row {
background: #ffffff;
}
::v-deep .el-table thead {
color: #000000;
}
.openClose {
margin-top: 10px;
margin-right: 10px;
color: #666666;
text-align: center;
}
.page1 {
padding: 10px 20px;
background: #f9f9f9;
font-size: 14px;
.thetopbox {
background: #ffffff;
border-radius: 8px;
padding: 20px 0;
.searchbox {
display: flex;
align-items: center;
.searchtitle {
margin-right: 10px;
}
.searchbtn {
background: #c8161d;
color: #ffffff;
}
}
}
.footer {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
.thebtn {
width: 120px;
height: 38px;
}
}
.maintop {
display: flex;
padding-top: 10px;
justify-content: space-between;
align-items: center;
.mainbtn {
.thebtn1 {
color: #ffffff;
background: #ec6c00;
}
.thebtn2 {
color: #ffffff;
background: #009b58;
}
.thebtn3 {
color: #ffffff;
background: #e41b1b;
}
.thebtn4 {
color: #ffffff;
background: #53b11e;
}
}
}
.main {
margin-top: 10px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
.main_title {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.bluekuai {
width: 5px;
height: 19px;
background: #4391fd;
margin-right: 20px;
}
.title_word {
font-size: 14px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
}
}
.main_content {
padding: 0px 25px;
display: flex;
align-items: center;
margin: 10px 0;
border: 1px solid #eeeeee;
.el-form-item {
margin-bottom: 0px !important;
}
}
}
}
</style>