Commit 5735600e authored by qinj's avatar qinj

审批进度查询

parent 12e7aafe
...@@ -14,7 +14,7 @@ import getPageTitle from '@/utils/get-page-title' ...@@ -14,7 +14,7 @@ import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/prov-register', '/city-register', '/login', '/auth-redirect'] // no redirect whitelist const whiteList = ['/prov-register', '/city-register','/prov-progress','/city-progress' ,'/login', '/auth-redirect'] // no redirect whitelist
router.beforeEach(async(to, from, next) => { router.beforeEach(async(to, from, next) => {
// start progress bar // start progress bar
......
...@@ -80,6 +80,16 @@ export const constantRoutes = [ ...@@ -80,6 +80,16 @@ export const constantRoutes = [
component: () => import('@/views/login/city-register/index'), component: () => import('@/views/login/city-register/index'),
hidden: true hidden: true
}, },
{
path: '/prov-progress',
component: () => import('@/views/login/prov-progress/index'),
hidden: true
},
{
path: '/city-progress',
component: () => import('@/views/login/city-progress/index'),
hidden: true
},
{ {
path: '/auth-redirect', path: '/auth-redirect',
component: () => import('@/views/login/auth-redirect'), component: () => import('@/views/login/auth-redirect'),
......
<template>
<div class="form-container">
<Title :title="title">
</Title>
<div style="height:50px;display: flex;align-items: center;float: right;
margin-right: 90px;">
<div class="parallelogram2"></div>
<div style="margin-right:15px">已审批</div>
<div class="parallelogram3"></div>
<div style="margin-right:15px">未审批</div>
</div>
<div style="height:150px;display: flex;margin: 20px 290px;">
<div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==1}">
<div class="div_txt">提交</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div>
<div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==2}">
<div class="div_txt2">审批_1区域渠道经理</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div> <div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==3}">
<div class="div_txt2">审批_2渠道销售总监</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div> <div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==4}">
<div class="div_txt2">审批_3渠道管理部</div>
</div>
</div>
</div>
<div class="basic-info">
<ele-form-section
v-model="formData"
:rules="rules"
:sections="sections"
>
<template v-slot:ExtLockRsp_SDK="{ formData }">
<!-- 插槽内容有el-form-item组件包裹 -->
<el-select v-model="formData.ExtLockRsp_SDK" :disabled="!formData.ExtProcessNode_SDK==2" style="width: 91%" multiple filterable placeholder="请选择" no-match-text="无匹配数据">
<el-option
v-for="item in province"
:key="item.AccountID"
:label="item.Name"
:value="item.ExtSocialUnifiedCreditCode_SDK"
/>
</el-select>
</template>
<template v-slot:ExtLockCity_SDK="{ formData }">
<!-- 插槽内容有el-form-item组件包裹 -->
<el-select v-model="formData.ExtLockCity_SDK" :disabled="!formData.ExtProcessNode_SDK==2" style="width: 91%" multiple filterable placeholder="请选择" no-match-text="无匹配数据">
<el-option
v-for="item in apptions"
:key="item.Code"
:label="item.Name"
:value="item.Code"
/>
</el-select>
</template>
<template v-slot:ExtChannelType_SDK="{ formData }">
<!-- 插槽内容有el-form-item组件包裹 -->
<el-select v-model="formData.ExtChannelType_SDK" :disabled="!formData.ExtProcessNode_SDK==2" style="width: 91%" filterable placeholder="请选择" no-match-text="无匹配数据">
<el-option
v-for="item in cOptions"
:key="item.id"
:label="item.content"
:value="item.keyword"
/>
</el-select>
</template>
</ele-form-section>
<div class="table-contain">
<div class="form-container">审批意见</div>
<!-- <div class="btn">
<el-button type="primary" @click="approve">审批</el-button>
<el-button type="" @click="reject">退回</el-button>
</div> -->
<el-table :data="tableData"
border
style="width: 100%">
<el-table-column prop="Node"
label="审批节点">
</el-table-column>
<el-table-column prop="CreateName_SDK"
label="审批人">
</el-table-column>
<el-table-column prop="Result"
label="审批结果">
</el-table-column>
<el-table-column prop="CreateOn_SDK"
label="审批时间">
</el-table-column>
<el-table-column prop="Note"
label="备注">
</el-table-column>
</el-table>
<pagination v-show="TotalRecords>0"
:total="TotalRecords"
:page.sync="page.currentPage"
:limit.sync="page.pageSize"
@pagination="getList" />
</div>
<!-- <el-dialog title="审批意见" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label-width=500>
<el-input v-model="form.note" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="approveClick">确 定</el-button>
</div>
</el-dialog> -->
</div>
</div>
</template>
<script>
import Title from '@/components/Title'
import { getCustomer,typeSearch,lockRsp,ProcessApproval,processHistory } from '@/api/customers';
import Pagination from '@/components/Pagination'
import { Country } from '@/api/qcc'
export default {
components: {
Pagination,
Title,
},
data () {
return {
form:{},
dialogFormVisible:false,
title: '城市代理商审批进度查询',
addBtnStart: false,
objectId: '',
id:'',
status:0,
loading:false,
formData: {},
province: [],
sections: [
{
title: '基本信息',
formDesc: {
Name: {
type: 'input',
label: '公司全称',
layout: 24,
code: 'qcc',
disabled:true,
returnFn: function(row) {
return {
Name: row.Name,
ExtSocialUnifiedCreditCode_SDK: row.CreditCode,
ExtCorporateName_SDK: row.OperName
}
},
},
ExtSecondName_SDK: {
type: 'input',
label: '公司全称曾用名',
layout: 12,
disabled:true,
},
ExtSocialUnifiedCreditCode_SDK: {
type: 'input',
label: '社会统一信用代码',
disabled:true,
layout: 12
},
ExtRegisteredCapital_SDK: {
type: 'input',
label: '注册资本(万元)',
disabled:true,
layout: 12,
},
ExtCorporateName_SDK: {
type: 'input',
label: '法人',
disabled:true,
layout: 12,
},
// Ext_QuoteOppotunity_KUT: {
// type: 'input',
// label: '税务登记编号',
// layout: 12
// },
}
},
{
title: '地址信息',
formDesc: {
ExtProvince_SDK: {
type: 'input',
label: '省份',
layout: 12,
disabled:true,
},
ExtCity_SDK: {
type: 'input',
label: '城市',
layout: 12,
isOptions: true,
disabled:true,
},
ExtDistrict_SDK: {
type: 'input',
label: '县市',
layout: 12,
isOptions: true,
disabled:true,
},
ExtAddressDetail_SDK: {
type: 'input',
label: '详细经营地址',
layout: 12,
disabled:true,
},
}
},
{
title: '联系信息',
formDesc: {
ExtLeader_SDK: {
type: 'input',
label: '公司负责人姓名',
disabled:true,
layout: 12
},
ExtLeaderPhone_SDK: {
type: 'input',
label: '公司负责人联系方式',
disabled:true,
layout: 12
},
ExtLeaderEmail_SDK: {
type: 'input',
label: '公司负责人邮箱',
disabled:true,
layout: 12
},
ExtUnis_SDK: {
type: 'input',
layout: 12,
disabled:true,
label: 'Unis业务负责人姓名'
},
ExtUnisPhone_SDK: {
type: 'input',
layout: 12,
disabled:true,
label: 'Unis业务负责人联系方式'
},
ExtUnisEmail_SDK: {
type: 'input',
disabled:true,
label: 'Unis业务负责人邮箱',
layout: 12
},
// ExtBusiness_SDK: {
// type: 'input',
// layout: 12,
// disabled:true,
// label: '商务负责人姓名'
// },
// ExtBusinessPhone_SDK: {
// type: 'input',
// layout: 12,
// disabled:true,
// label: '商务负责人联系方式'
// },
// ExtBusinessEmail_SDK: {
// type: 'input',
// disabled:true,
// label: '商务负责人邮箱',
// layout: 12
// },
}
},
],
tableData:[],
TotalRecords:0,
page:{},
apptions:[],
cOptions:[],
// 同 vue-ele-form
rules: {
ExtChannelType_SDK: {required: true, message: '请选择签约渠道类型'},
ExtLockRsp_SDK: { required: true, message: '请选择锁定RSP' },
ExtLockCity_SDK: { required: true, message: '请选择城市覆盖范围' },
}
}
},
watch:{
},
created(){
this.id=this.$route.query.objectId
this.getList()
this.getHistoryList()
this.getChannelType()
},
methods: {
getList(){
getCustomer({objectID:this.id}).then((resp)=>{
this.formData=resp.results[0]
lockRsp({extProvince_SDK: resp.results[0].ExtProvince_SDK}).then((resp)=>{
this.province=resp.results
})
const app={provinceCode:resp.results[0].ExtProvince_SDK}
this.$request(Country.searchCity,app).then((resp) => {
this.apptions=resp.results
})
})
},
getChannelType(){
typeSearch({code:'ExtChannelType_SDK',module:'Customer',content:'CCP'}).then((resp)=>{
this.cOptions=resp
})
},
getHistoryList(){
processHistory({businessObjectID:this.id}).then((resp)=>{
this.tableData=resp.results
})
},
handleSuccess () {
// this.$message.success('创建成功')
},
// 对象格式转化为键值对
paramsToFormData(obj) {
const formData = new FormData();
Object.keys(obj).forEach((key) => {
if (obj[key] instanceof Array) {
obj[key].forEach((item) => {
formData.append(key, item);
});
return;
}
formData.append(key, obj[key]);
});
return formData;
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-row--flex {
display: -webkit-box;
.el-col-14 {
width: 90%;
}
}
.basic-info {
::v-deep .ele-form-btns{
.el-form-item__content {
display: none;
}
}
}
.btn {
margin-left: 45%;
margin-bottom: 8px;
}
.table-contain {
padding: 0 80px 0 20px;
margin-left: 65px;
background: #fff;
border-radius: 2px;
}
.div_list{
display: flex;
margin-right:10px;
justify-content: center;
align-items: center;
}
.div_txt{
text-align: center;
line-height: 75px;
}
.div_txt2{
height: 80px;
margin-top: 12px;
}
.triangle_right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #a22796;
border-bottom: 20px solid transparent;
}
.bgcolor{
background: #a22796 !important;
}
#parallelogram {
width: 115px;
height: 75px;
background: #fff;
margin-right: 10px;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
.parallelogram1 {
width: 45px;
height: 20px;
background: #a22796;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
.parallelogram2 {
width: 80px;
height: 30px;
margin-right: 10px;
background: #a22796;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
.parallelogram3 {
width: 80px;
height: 30px;
margin-right: 10px;
background: #fff;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
</style>
<template>
<div class="form-container">
<Title :title="title">
</Title>
<div style="height:50px;display: flex;align-items: center;float: right;
margin-right: 90px;">
<div class="parallelogram2"></div>
<div style="margin-right:15px">已审批</div>
<div class="parallelogram3"></div>
<div style="margin-right:15px">未审批</div>
</div>
<div style="height:150px;display: flex;margin: 20px 290px;">
<div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==1}">
<div class="div_txt">提交</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div>
<div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==2}">
<div class="div_txt2">审批_1区域渠道经理</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div>
<div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==3}">
<div class="div_txt2">审批_2渠道销售部大区负责人</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div>
<div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==4}">
<div class="div_txt2">审批_3渠道销售总监</div>
</div>
<div class="parallelogram1"></div>
<div class="triangle_right"></div>
</div> <div class="div_list">
<div id="parallelogram" :class="{'bgcolor':formData.ExtProcessNode_SDK==5}">
<div class="div_txt2">审批_4渠道管理部</div>
</div>
</div>
</div>
<div class="basic-info">
<ele-form-section
v-model="formData"
:sections="sections"
>
</ele-form-section>
<div class="table-contain">
<div class="form-container">审批意见</div>
<!-- <div class="btn">
<el-button type="primary" @click="approve">审批</el-button>
<el-button type="" @click="reject">退回</el-button>
</div> -->
<el-table :data="tableData"
border
style="width: 100%">
<el-table-column prop="Node"
label="审批节点">
</el-table-column>
<el-table-column prop="CreateName_SDK"
label="审批人">
</el-table-column>
<el-table-column prop="Result"
label="审批结果">
</el-table-column>
<el-table-column prop="CreateOn_SDK"
label="审批时间">
</el-table-column>
<el-table-column prop="Note"
label="备注">
</el-table-column>
</el-table>
<pagination v-show="TotalRecords>0"
:total="TotalRecords"
:page.sync="page.currentPage"
:limit.sync="page.pageSize"
@pagination="getList" />
</div>
<!-- <el-dialog title="审批意见" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label-width=500>
<el-input v-model="form.note" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="approveClick">确 定</el-button>
</div>
</el-dialog> -->
</div>
</div>
</template>
<script>
import Title from '@/components/Title'
import { getCustomer,typeSearch,lockRsp,ProcessApproval,processHistory, province } from '@/api/customers';
import { Country } from '@/api/qcc'
import Pagination from '@/components/Pagination'
export default {
components: {
Pagination,
Title,
},
data () {
return {
form:{},
dialogFormVisible:false,
title: '省级代理商审批进度查询',
addBtnStart: false,
objectId: '',
id:'',
status:0,
loading:false,
formData: {},
province: [],
sections: [
{
title: '基本信息',
formDesc: {
Name: {
type: 'input',
label: '公司全称',
layout: 24,
code: 'qcc',
disabled:true,
returnFn: function(row) {
return {
Name: row.Name,
ExtSocialUnifiedCreditCode_SDK: row.CreditCode,
ExtCorporateName_SDK: row.OperName
}
},
},
ExtSecondName_SDK: {
type: 'input',
label: '公司全称曾用名',
layout: 12,
disabled:true,
},
ExtSocialUnifiedCreditCode_SDK: {
type: 'input',
label: '社会统一信用代码',
disabled:true,
layout: 12
},
ExtRegisteredCapital_SDK: {
type: 'input',
label: '注册资本(万元)',
disabled:true,
layout: 12,
},
ExtCorporateName_SDK: {
type: 'input',
label: '法人',
disabled:true,
layout: 12,
},
// Ext_QuoteOppotunity_KUT: {
// type: 'input',
// label: '税务登记编号',
// layout: 12
// },
}
},
{
title: '地址信息',
formDesc: {
ExtProvince_SDK: {
type: 'input',
label: '省份',
layout: 12,
disabled:true,
},
ExtCity_SDK: {
type: 'input',
label: '城市',
layout: 12,
isOptions: true,
disabled:true,
},
ExtDistrict_SDK: {
type: 'input',
label: '县市',
layout: 12,
isOptions: true,
disabled:true,
},
ExtAddressDetail_SDK: {
type: 'input',
label: '详细经营地址',
layout: 12,
disabled:true,
},
}
},
{
title: '联系信息',
formDesc: {
ExtLeader_SDK: {
type: 'input',
label: '公司负责人姓名',
disabled:true,
layout: 12
},
ExtLeaderPhone_SDK: {
type: 'input',
label: '公司负责人联系方式',
disabled:true,
layout: 12
},
ExtLeaderEmail_SDK: {
type: 'input',
label: '公司负责人邮箱',
disabled:true,
layout: 12
},
ExtUnis_SDK: {
type: 'input',
layout: 12,
disabled:true,
label: 'Unis业务负责人姓名'
},
ExtUnisPhone_SDK: {
type: 'input',
layout: 12,
disabled:true,
label: 'Unis业务负责人联系方式'
},
ExtUnisEmail_SDK: {
type: 'input',
disabled:true,
label: 'Unis业务负责人邮箱',
layout: 12
},
ExtBusiness_SDK: {
type: 'input',
layout: 12,
disabled:true,
label: '商务负责人姓名'
},
ExtBusinessPhone_SDK: {
type: 'input',
layout: 12,
disabled:true,
label: '商务负责人联系方式'
},
ExtBusinessEmail_SDK: {
type: 'input',
disabled:true,
label: '商务负责人邮箱',
layout: 12
},
}
},
{
title: '签约信息',
formDesc: {
ExtChannelType_SDK : {
type: 'input',
label: '签约渠道类型',
layout: 12,
disabled:true
},
ExtLockRsp_KUT: {
type: 'input',
label: '签约产品组',
layout: 12,
disabled:true
},
ExtTotalAgent_KUT: {
type: 'input',
label: '签约总代',
layout: 12,
disabled:true
},
ExtLockCity_SDK: {
type: 'input',
label: '覆盖范围(城市)',
layout: 12,
disabled:true
},
}
},
],
tableData:[],
TotalRecords:0,
page:{},
// 同 vue-ele-form
// rules: {
// ExtLockCity_SDK: {required: true, message: '请选择覆盖城市范围'},
// }
}
},
watch:{
// province:{
// handler(newVal,oldVal){
// this.province=newVal
// },
// deep:true
// }
},
created(){
this.id=this.$route.query.objectId
this.getList()
this.getHistoryList()
},
methods: {
getList(){
getCustomer({objectID:this.id}).then((resp)=>{
this.formData=resp.results[0]
const app={provinceCode:resp.results[0].ExtProvince_SDK}
this.$request(Country.searchCity,app).then((resp) => {
this.province=resp.results
})
})
},
getHistoryList(){
processHistory({businessObjectID:this.id}).then((resp)=>{
this.tableData=resp.results
})
},
handleSuccess () {
// this.$message.success('创建成功')
},
approve(){
this.dialogFormVisible=true
this.status=1
},
reject(){
this.dialogFormVisible=true
this.status=2
},
approveClick(){
const ExtLockCity_SDK=this.formData.ExtLockCity_SDK.toString()
const cc={extProcessNode_SDK:this.formData.ExtProcessNode_SDK,
extCustomerType_SDK:this.formData.ExtCustomerType_SDK,
extProvince_SDK:this.formData.ExtProvince_SDK,
objectID:this.formData.ObjectID,
extLockRsp_SDK:this.formData.extLockRsp_SDK,
extLockCity_SDK:ExtLockCity_SDK,
extChannelType_SDK:this.formData.ExtChannelType_SDK}
if(this.status==1){
const add={customerDTO:cc,note:this.form.note,result:"approve"}
this.loading=true
ProcessApproval(add).then((resp)=>{
this.loading=false
this.$message.success("审批成功!")
this.dialogFormVisible=false
this.$router.back()
})
}else{
this.loading=true
const bdd={customerDTO:cc,note:this.form.note,result:"reject"}
ProcessApproval(bdd).then((resp)=>{
this.loading=false
this.$message.success("退回成功!")
this.dialogFormVisible=false
this.$router.back()
})
}
},
// 对象格式转化为键值对
paramsToFormData(obj) {
const formData = new FormData();
Object.keys(obj).forEach((key) => {
if (obj[key] instanceof Array) {
obj[key].forEach((item) => {
formData.append(key, item);
});
return;
}
formData.append(key, obj[key]);
});
return formData;
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-row--flex {
display: -webkit-box;
.el-col-14 {
width: 90%;
}
}
.basic-info {
::v-deep .ele-form-btns{
.el-form-item__content {
display: none;
}
}
}
.btn {
margin-left: 45%;
margin-bottom: 8px;
}
.table-contain {
padding: 0 80px 0 20px;
margin-left: 65px;
background: #fff;
border-radius: 2px;
}
.div_list{
display: flex;
margin-right:10px;
justify-content: center;
align-items: center;
}
.div_txt{
text-align: center;
line-height: 75px;
}
.div_txt2{
height: 80px;
margin-top: 12px;
}
.triangle_right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #a22796;
border-bottom: 20px solid transparent;
}
.bgcolor{
background: #a22796 !important;
}
#parallelogram {
width: 115px;
height: 90px;
background: #fff;
margin-right: 10px;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
.parallelogram1 {
width: 45px;
height: 20px;
background: #a22796;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
.parallelogram2 {
width: 80px;
height: 30px;
margin-right: 10px;
background: #a22796;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
.parallelogram3 {
width: 80px;
height: 30px;
margin-right: 10px;
background: #fff;
border: 2px solid #a22796;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
transform: skew(0deg);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment