123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695 |
- <template>
- <view class="detail-page white-wrap">
- <view>
- <!-- 基础信息 -->
- <view class="section white-wrap base-info-wrap" v-if="detail">
- <image :src="statusImg" mode="aspectFill" class="status-img"></image>
- <view class="title">
- <text>{{detail.CompanyName}}</text>
- <!-- van-tag
- color="#ECF5FF"
- text-color="#4A83F1"
- style="margin-bottom:0;margin-left: 10rpx;"
- >新签</van-tag> -->
- </view>
- <view class="base-info-list">
- <view>
- <text class="lable">合同编号:</text>
- <text >{{detail.ContractCode}}</text>
- <van-tag color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px;margin-top:2px">{{detail.ContractType}}</van-tag>
- </view>
- <view style="margin-bottom:0">
- <text class="lable">合同期限:</text>
- <text>{{detail.StartDate|formatDate}}~{{detail.EndDate | formatDate}}</text>
- </view>
- <view style="padding-left:140rpx">({{detail.StartDate|formateYear(detail.EndDate)}})</view>
- <view>
- <text class="lable">合同金额:</text>
- <text style="color:#FE6B7C">{{detail.Price}}元</text>
- </view>
- <view>
- <text class="lable">合同归属:</text>
- <text>{{detail.ProductId===1?'FICC':'权益'}}</text>
- </view>
- <view>付款方式说明:{{detail.PayRemark}}</view>
- <view>付款渠道:{{detail.PayChannel}}</view>
- <view v-if="detail.SellerRemark">备注:{{detail.SellerRemark}}</view>
- <view v-if="detail && detail.Status === '已驳回'">
- <text class="lable" style="color:#FE6B7C">驳回理由:</text>
- <text style="color:#FE6B7C">{{ detail.ApprovalRemark }}</text>
- </view>
- </view>
- </view>
- <!-- 变更说明 -->
- <view class="section white-wrap change-info-wrap" v-if="changeDesc.length>0">
- <view class="title">变更说明</view>
- <view style="margin-bottom: 20rpx;" v-for="(item,index) in changeDesc" :key="index">{{index+1}}、{{item}}</view>
- </view>
- <!-- 服务内容 -->
- <view class="section white-wrap service-wrap">
- <view class="title">服务内容</view>
- <view style="margin-bottom: 30rpx;" >
- <view class="service-item flex" v-for="item in detail.Service" :key="item.Title">
- <text style="width:60%">{{item.Title}}</text>
- <text class="btn" @click="handlePreviewImg(item.Value)">查看服务单</text>
- </view>
- </view>
- <view v-if="detail.Remark" style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px;margin-bottom: 30rpx;">补充内容:{{detail.Remark}}</view>
- <view style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px" v-if="varietyList.length>0">
- <view style="margin-bottom:10rpx">小套餐购买品种</view>
- <view class="variety-list">
- <view class="variety-item flex" v-for="item in varietyList" :key="item.ClassifyName">
- <view class="lable">{{ item.ClassifyName }}:</view>
- <view class="content">
- <van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
- :key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
- </view>
- </view>
- </view>
- </view>
- </view>
-
- <!-- 回签附件 -->
- <view class="section white-wrap contract-wrap" v-if="detail.Status==='已签回'">
- <view class="title">回签附件</view>
- <view class="contract-list">
- <view class="contract-item" v-for="item in checkBackFiles" :key="item.url"
- @click="preViewContract(item)">
- <image class="contract-img" mode="aspectFill" :src="item.img"></image>
- </view>
- </view>
- </view>
- <!-- 解约附件 -->
- <view class="section white-wrap contract-wrap" v-if="detail.Status==='已解约'">
- <view class="title">解约附件</view>
- <view class="contract-list">
- <view class="contract-item" v-for="item in rescindFile" :key="item.url"
- @click="preViewContract(item)">
- <image class="contract-img" mode="aspectFill" :src="item.img"></image>
- </view>
- </view>
- </view>
-
- <!-- 合同模块 -->
- <view class="section white-wrap contract-wrap" v-if="constractFiles.length !== 0&&detail.Status!='已签回'&&detail.Status!='已解约'">
- <view class="title">合同预览</view>
- <view class="contract-list">
- <view class="contract-item" v-for="item in constractFiles" :key="item.url"
- @click="preViewContract(item)">
- <image class="contract-img" mode="aspectFill" :src="item.img"></image>
- </view>
- </view>
- </view>
-
- <!-- 客户信息模块 -->
- <view class="section white-wrap customer-wrap">
- <view class="title">客户信息</view>
- <view class="customer-main-info">
- <view class="customer-info-item">
- <text>客户名称:</text>
- <text>{{detail.CompanyName}}</text>
- </view>
- <view class="customer-info-item">
- <text>社会信用码:</text>
- <text>{{detail.CreditCode}}</text>
- </view>
- <view class="customer-info-item">
- <text>地址:</text>
- <text>{{detail.Province}}{{detail.City}}{{detail.Address}}</text>
- </view>
- <view class="customer-info-item">
- <text>申请人:</text>
- <text>{{detail.SellerName}}</text>
- </view>
- </view>
- </view>
-
- <!-- 流程模块 -->
- <view class="section white-wrap process-wrap" v-if="flowNodeList">
- <view class="title">审批流程</view>
- <steps :data="flowNodeList"></steps>
- </view>
- </view>
-
- <!-- 审批按钮 -->
- <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.Approval">
- <button class="pass-btn" @click="handlePass">通过</button>
- <button class="refuse-btn" @click="handleRefuse">驳回</button>
- </view>
- <!-- 上传回签附件 -->
- <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.UploadFile">
- <button class="pass-btn" style="width: 450rpx;" @click="handleUploadMethod('file')">{{detail.Status==='已审批'?'上传回签附件':'更新回签附件'}}</button>
- </view>
- <!-- 作废合同 -->
- <!-- <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.Invalid">
- <button class="refuse-btn" style="width: 450rpx;" >作废合同</button>
- </view> -->
-
- <!-- 上传回签附件选择上传文件类型弹窗 -->
- <van-popup :show="show" @close="show=false" round>
- <view style="width: 50vw;text-align: center;font-size: 16px;padding: 32rpx;line-height: 80rpx;">
- <view @click="handleUploadMethod('img')">上传图片</view>
- <view @click="handleUploadMethod('file')">上传文件</view>
- </view>
- </van-popup>
-
- <!-- 上传回签附件弹窗 -->
- <van-popup :show="showUpload" @close="showUpload=false" position="bottom" round>
- <view class="uploadfile-wrap">
- <view style="text-align: center;font-size: 16px;font-weight: bold;">上传回签附件</view>
- <view class="contract-list" style="height: 30vh;">
- <view class="contract-item" v-for="item in files" :key="item.url"
- @click="preViewContract(item)">
- <image class="contract-img" mode="aspectFill" :src="item.img"></image>
- </view>
- </view>
- <button style="width: 450rpx;" @click='handleConfirmSignBack'>确定</button>
- </view>
- </van-popup>
-
- <van-dialog id="van-dialog" />
- </view>
- </template>
- <script>
- import {apiContractDetail,apiContractApproved,apiContractApprovalDetail,apiContractSignBackFiles} from '@/api/approve/contract.js'
- import steps from '../components/steps.vue'
- import {preViewFile} from '../utils/util.js'
- import {uploadImg,uploadFiles} from '@/utils/uploadFile.js'
- export default{
- components:{
- steps
- },
- filters:{
- formatDate(e){
- if(e==='0001-01-01T00:00:00Z'){
- return ''
- }else{
- return e.split('T')[0].replace(/-/g,'.')
- }
- },
- formatTime(e){
- if(e==='0001-01-01T00:00:00Z'){
- return ''
- }else{
- return e.replace(/T/g,' ').replace(/\+08:00/g,' ').replace(/-/g,'.')
- }
- },
- formateYear(s,e){
- let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
- let start = new Date(s);
- let end = new Date(e);
- let year = end.getFullYear() - start.getFullYear();
- let month = end.getMonth() - start.getMonth();
- let day = end.getDate() - start.getDate();
- if (month < 0) {
- year--;
- month = end.getMonth() + (12 - start.getMonth());
- }
- if (day < 0) {
- month--;
- let index = flag.findIndex((temp) => {
- return temp === start.getMonth() + 1
- });
- let monthLength;
- if (index <= 6) {
- monthLength = 31;
- } else if (index > 6 && index <= 10) {
- monthLength = 30;
- } else {
- monthLength = 28;
- }
- day = end.getDate() + (monthLength - start.getDate());
- }
-
- return `有效期为 ${year>0?year+'年':''}${month>0?month+'个月':''}${day>0?day+'天':''}`;
- }
- },
- computed:{
- // 处理变更说明
- changeDesc(){
- return this.detail&&this.detail.ModifyContent&&this.detail.ModifyContent.split('<br/>').filter(item=> item)
- },
- //回签附件
- checkBackFiles(){
- const reg = /\.(pdf)|\.doc|\.docx$/;
- return this.detail&&this.detail.CheckBackFileUrl&&this.detail.CheckBackFileUrl.split("#").map((item) => {
- if (reg.test(item)) {
- return {
- type: "pdf",
- url: item,
- img: require("@/pages-approve/static/pdf.png"),
- };
- } else {
- return {
- type: "img",
- url: item,
- img: item,
- };
- }
- });
- },
- //解约附件
- rescindFile(){
- const reg = /\.(pdf)|\.doc|\.docx$/;
- return this.detail&&this.detail.RescindFileUrl&&this.detail.RescindFileUrl.split("#").map((item) => {
- if (reg.test(item)) {
- return {
- type: "pdf",
- url: item,
- img: require("@/pages-approve/static/pdf.png"),
- };
- } else {
- return {
- type: "img",
- url: item,
- img: item,
- };
- }
- });
- },
- // 合同附件
- constractFiles(){
- const reg = /\.(pdf)|\.doc|\.docx$/;
- return this.detail&&this.detail.FileUrl&&this.detail.FileUrl.split("#").map((item) => {
- if (reg.test(item)) {
- return {
- type: "pdf",
- url: item,
- img: require("@/pages-approve/static/pdf.png"),
- };
- } else {
- return {
- type: "img",
- url: item,
- img: item,
- };
- }
- });
- },
- // 状态图标
- statusImg(){
- if(!this.detail) return
- if(this.detail.Status==='已审批'){
- return require('../static/pass-icon.png')
- }else if(this.detail.Status==='已签回'){
- return require('../static/draw-back-icon.png')
- }else if(this.detail.Status==='已驳回'){
- return require('../static/fail-icon.png')
- }else if(this.detail.Status==='已作废'){
- return require('../static/cancel-icon.png')
- }else if(this.detail.Status==='已撤回'){
- return require('../static/recall-icon.png')
- }else if(this.detail.Status==='处理中'){
- return require('../static/processing-icon.png')
- }else if(this.detail.Status==='已解约'){
- return require('../static/jieyue-icon.png')
- }
- }
- },
- data() {
- return {
- ContractApprovalId: null,//审批单id
- ContractApprovalRecordId:null,//审批流程单id
- ContractId:null,//合同id
- detail:null,
- flowNodeList:null,
- opt:{},
- show:false,
- showUpload:false,
- files:[],
- varietyList:[],
- }
- },
- onLoad(options) {
- this.ContractApprovalId=options.ContractApprovalId||0
- this.ContractApprovalRecordId=options.ContractApprovalRecordId||0
- this.ContractId=options.ContractId||0
- },
- onShow() {
- // 当合同id 不存在时(或0) 使用审批详情
- if(this.ContractId!=0){
- this.getContractDetail()
- }else{
- this.getApprovalDetail()
- }
- },
- onPullDownRefresh() {
- if(this.ContractId!=0){
- this.getContractDetail()
- }else{
- this.getApprovalDetail()
- }
- setTimeout(()=>{
- uni.stopPullDownRefresh()
- },1000)
- },
- methods: {
- //确认提交上传回签附件
- async handleConfirmSignBack(){
- let FileUrlarr=this.files.map(item=>item.url)
- const res=await apiContractSignBackFiles({
- ContractId:Number(this.detail.ContractId),
- FileUrl:FileUrlarr.join('#')
- })
- if(res.code===200){
- uni.showToast({
- title:'操作成功',
- icon:'none'
- })
- // 已审批上传签回附件更新列表
- if(this.detail.Status==='已审批'){
- uni.$emit('contractApproveListUpdate',{
- ContractApprovalId:this.ContractApprovalId,
- ContractApprovalRecordId:this.ContractApprovalRecordId,
- ContractId:this.ContractId
- })
- }
- setTimeout(()=>{
- this.showUpload=false
- this.files=[]
- if(this.ContractId!=0){
- this.getContractDetail()
- }else{
- this.getApprovalDetail()
- }
- },1000)
- }
- },
-
- // 上传回签附件文件
- async handleUploadMethod(type){
- let res=[]
- if(type==='img'){
- res=await uploadImg()
- }else if(type==='file'){
- res=await uploadFiles({type:'file'})
- }
- const reg = /\.(pdf)|\.doc|\.docx$/;
- if(!reg.test(res[0])){
- uni.showToast({
- title:'请上传pdf/word格式文件',
- icon:"none"
- })
- return
- }
- this.files=[{type:'pdf',url:res[0],img: require("@/pages-approve/static/pdf.png")}]
- // this.files=res.map((item) => {
- // if (reg.test(item)) {
- // return {
- // type: "pdf",
- // url: item,
- // img: require("@/pages-approve/static/pdf.png"),
- // };
- // } else {
- // return {
- // type: "img",
- // url: item,
- // img: item,
- // };
- // }
- // });
- this.show=false
- this.showUpload=true
- },
-
- // 审批单详情
- async getApprovalDetail() {
- const res=await apiContractApprovalDetail({
- ContractApprovalId:Number(this.ContractApprovalId),
- ContractApprovalRecordId:Number(this.ContractApprovalRecordId)
- })
- if(res.code===200){
- this.detail=res.data.ContractDetail
- this.opt=res.data.OpButton
- this.flowNodeList=res.data.FlowNodeList
- this.handleVariety(res.data.ContractDetail.Service)
- }
- },
-
- //合同详情
- async getContractDetail(){
- const res=await apiContractDetail({ContractId:Number(this.ContractId)})
- if(res.code===200){
- this.detail=res.data.ContractDetail
- this.opt=res.data.OpButton
- this.flowNodeList=res.data.FlowNodeList
- this.handleVariety(res.data.ContractDetail.PermissionLookList)
- }
- },
- // 处理小套餐选中的品种
- handleVariety(e){
- let arr=e.filter(item=>{
- return item.CheckList.length>0
- })
- arr.forEach(item=>{
- item.Items=item.Items.filter(_item=>{
- return item.CheckList.includes(_item.ChartPermissionId);
- })
- })
- this.varietyList=arr
- },
-
- handlePreviewImg(url){
- uni.previewImage({
- urls:[url]
- })
- },
-
- // 预览合同文件
- preViewContract(e) {
- if (e.type === "pdf") {
- preViewFile(e.url)
- } else {
- this.handlePreviewImg(e.url)
- }
- },
-
- //审批通过
- async handlePass(){
- const res=await apiContractApproved({ContractId:Number(this.detail.ContractId)})
- if(res.code===200){
- this.$dialog.alert({
- title: "处理成功",
- confirmButtonColor: "#5890FB",
- }).then(() => {
- // on close
- // 当合同id 不存在时(或0) 使用审批详情
- if(this.ContractId!=0){
- this.getContractDetail()
- }else{
- this.getApprovalDetail()
- }
- // 更新列表
- uni.$emit('contractApproveListUpdate',{
- ContractApprovalId:this.ContractApprovalId,
- ContractApprovalRecordId:this.ContractApprovalRecordId,
- ContractId:this.ContractId
- })
- });
- }
- },
-
- //审批驳回
- handleRefuse(){
- uni.$once('contractApproveReject',()=>{
- // 更新列表
- uni.$emit('contractApproveListUpdate',{
- ContractApprovalId:this.ContractApprovalId,
- ContractApprovalRecordId:this.ContractApprovalRecordId,
- ContractId:this.ContractId
- })
- })
- uni.navigateTo({
- url:"./reason?ContractId="+this.detail.ContractId
- })
- }
- },
- }
- </script>
- <style lang="scss">
- .detail-page {
- width: 100%;
- min-height: 100%;
- padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
- padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
- }
-
- .section {
- padding: 30rpx 34rpx;
- border-bottom: 14rpx solid #f5f5f5;
-
- &:last-child {
- margin-bottom: 0;
- border: none;
- }
-
- .title {
- font-size: 16px;
- font-weight: bold;
- margin: 0 0 40rpx 0;
- color: #333;
- }
-
- .lable {
- color: #666;
- flex-shrink: 0;
- font-size: 14px;
- }
- }
- .section::last-child{
- border: none;
- }
- .base-info-wrap {
- position: relative;
- .status-img{
- position: absolute;
- width: 222rpx;
- height: 222rpx;
- right: 0;
- top: 150rpx;
- z-index: 10;
- }
- .title {
- margin: 0 0 40rpx 0;
-
- &::before {
- content: "";
- display: inline-block;
- width: 15px;
- height: 17px;
- background-image: url("@/static/man.png");
- background-size: cover;
- background-repeat: no-repeat;
- margin-right: 10rpx;
- position: relative;
- top: 4rpx;
- }
- }
-
- .base-info-list {
- font-size: 14px;
- color: #000;
-
- view {
- margin-bottom: 10px;
- display: flex;
- }
- }
- }
-
- .contract-list {
- display: flex;
- flex-wrap: wrap;
-
- .contract-img {
- width: 102rpx;
- height: 120rpx;
- margin-right: 20rpx;
- margin-bottom: 20rpx;
- }
- }
-
- .service-wrap{
- color: #666;
- .service-item{
- margin-bottom: 30rpx;
- position: relative;
- justify-content: space-between;
- .btn{
- color: #3385FF;
- }
- // &::after{
- // content: '查看服务单';
- // display: inline-block;
- // color: #3385FF;
- // position: absolute;
- // left: 35%;
- // }
- }
- }
-
- .customer-main-info {
- padding-bottom: 40rpx;
- }
-
- .customer-info-item {
- font-size: 14px;
- color: #999;
- margin-bottom: 20rpx;
- }
-
- .customer-info-list {
- flex-wrap: wrap;
- padding-top: 20rpx;
- }
- .variety-list{
- .variety-item {
- padding-top: 24rpx;
- padding-bottom: 24rpx;
- border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
- }
- .variety-item:first-child {
- padding-top: 0;
- }
- .variety-item:last-child {
- border-bottom: none;
- }
- .tag {
- margin-right: 10rpx;
- margin-bottom: 10rpx;
- }
- }
-
- .btns-wrap {
- justify-content: center;
- button {
- width: 260rpx;
- height: 70rpx;
- border-radius: 28px;
- border: none;
- margin: 0 15px;
- font-size: 15px;
- color: #fff;
- line-height: 70rpx;
- }
-
- .pass-btn {
- background-color: #5890fb;
- }
-
- .refuse-btn {
- background-color: #f55768;
- }
- }
-
- .uploadfile-wrap{
- width: 100%;
- height: 50vh;
- background-color: #FFFFFF;
- padding: 32rpx;
- button {
- margin-left: auto;
- margin-right: auto;
- width: 260rpx;
- height: 70rpx;
- display: block;
- border-radius: 28px;
- border: none;
- font-size: 15px;
- color: #fff;
- line-height: 70rpx;
- background-color: #5890fb;
- }
- }
- </style>
|