Files
gjt_mini/pages/audit/detail.vue
2025-12-30 09:44:46 +08:00

1053 lines
28 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>
<view class="container">
<view class="line">
<view class="text-normal">{{ datas.customerName }} </view>
</view>
<view class="line">
<view class="text-small">{{ datas.templateName }} </view>
</view>
<view class="block" style="padding-top: 0">
<view class="item">
<view class="title">销售经理</view>
<view class="line">
<view class="text-small">{{ datas.bdName }} </view>
</view>
</view>
<view class="item">
<view class="title">经办人</view>
<view class="line">
<view class="text-small">{{ datas.createrName }} </view>
</view>
</view>
<view class="item">
<view class="title">项目名称</view>
<view class="line">
<view class="text-small">{{ datas.projectName }} </view>
</view>
</view>
<view class="item">
<view class="title">合同金额</view>
<view class="line">
<view class="text-small">{{ _contractAmount }} </view>
</view>
</view>
<view class="item">
<view class="title">付款方式</view>
<view class="line">
<view class="text-small" v-if="datas.payWayName"
>{{
`${datas.payWayName + datas.payPeriodName},租金及服务费:${
datas.contractRentOrder.contractTotal
} 押金:${datas.contractRentOrder.guarantee} 共计${_totalCost},${
datas.contractRentOrder.truckQuantity
}台车`
}}
</view>
</view>
</view>
<view class="item">
<view class="title">合同生效日期</view>
<view class="line">
<view class="text-small"
>{{ formatDateTime(datas.signingDate) }}
</view>
</view>
</view>
<view class="item">
<view class="title">合同失效日期</view>
<view class="line">
<view class="text-small"
>{{ formatDateTime(datas.expireDate) }}
</view>
</view>
</view>
<view class="item">
<view class="title">签约公司</view>
<view class="line">
<view class="text-small">{{ datas.orgName || "" }} </view>
</view>
</view>
<view class="item">
<view class="title">备注</view>
<view class="line">
<view class="text-small">{{ datas.remark || "" }} </view>
</view>
</view>
<view class="item">
<view class="title">文件</view>
<view class="block">
<!-- <view class="item"> v-if="allFileList && allFileList.length > 0"
<u-upload
:fileList="fileList11"
@afterRead="afterRead"
@delete="deletePic"
uploadIcon="plus"
multiple
:deletable="false"
accept="all"
:disabled="true"
:width="155"
:height="155"
name="11"
></u-upload>
</view> -->
<view class="item" v-for="item in allFileList" :key="item.url">
<view class="line" style="justify-content: space-between">
<view class="text-small left">{{ item.name }}</view>
<view class="text-small" @tap="previewAll(item)">预览</view>
</view>
</view>
</view>
</view>
<!-- v-if="datas.couldMakeBill" -->
<view
class="item"
v-if="datas.flowTaskNodeCode === 'xpucv2a5w3' || isRead"
>
<view class="title">用印合同</view>
<view class="block">
<view class="item">
<u-upload
:fileList="fileList12"
@afterRead="afterRead"
@delete="deletePic"
uploadIcon="plus"
:deletable="!isRead"
:previewFullImage="false"
:disabled="isRead"
accept="all"
multiple
:width="155"
:height="155"
name="12"
></u-upload>
</view>
<view class="item" v-for="item in yyPdfList" :key="item.url">
<view class="line" style="justify-content: space-between">
<view class="text-small left">{{ item.name }}</view>
<view class="text-small" @tap="previewPdf(item)">预览</view>
</view>
</view>
</view>
</view>
</view>
<view class="line">
<view class="text-normal">审批信息</view>
</view>
<view class="line">
<u-steps :current="activities.length - 1" dot direction="column">
<!-- <u-steps-item title="已下单"
><view class="slot-icon" slot="desc"> 11 </view>
</u-steps-item> -->
<u-steps-item
v-for="item in activities"
:key="item.id"
:title="`${item.nodeName} ${formatDateTime(
item.createTime,
'yyyy-MM-dd HH:mm:ss'
)}`"
>
<view class="slot-icon" slot="desc">
<view class="line">执行人{{ item.auditorName }} </view>
<view class="line">审批结果{{ item.auditStatusName }} </view>
<view class="line">审批意见{{ item.auditOpinion }} </view>
</view>
</u-steps-item>
</u-steps>
</view>
<view class="item">
<view class="title">审批意见</view>
<u--textarea
border="surround"
fontSize="26"
:disabled="disabled"
:confirmType="null"
placeholder="请输入审批意见"
v-model="opinion"
>
</u--textarea>
</view>
<!-- <u-collapse :value="['explain', 'sign']" :border="false">
<u-collapse-item title="交车说明" name="explain">
<view class="item">
<view class="title">司机证件</view>
<u-upload
:fileList="fileList10"
@afterRead="afterRead"
@delete="deletePic"
:maxCount="10"
:width="155"
:height="155"
name="10"
></u-upload>
</view>
</u-collapse-item>
<u-collapse-item title="签收栏" name="sign">
<view class="item">
<button
class="btn genDocument"
:class="{ disabled: disabled }"
:disabled="disabled"
@tap="fileDownloadUrl"
>
已签署文件生成
</button>
</view>
</u-collapse-item>
</u-collapse> -->
<u-loading-page
bg-color="#ffffff"
color="#7ba746"
font-size="24"
:loading="loading"
:loading-text="loadingText"
></u-loading-page>
<view class="btns">
<button
class="done"
:class="{ disabled: datas.isMaked || isRead }"
:disabled="datas.isMaked || isRead"
v-if="datas.couldMakeBill"
@tap="makeConfirm"
>
<!-- v-if="datas.couldMakeBill" -->
用印
</button>
<button
class="done"
:class="{ disabled: isRead }"
:disabled="isRead"
@tap="submitConfirm"
>
通过
</button>
<button
class="done"
:class="{ disabled: isRead }"
:disabled="isRead"
@tap="notPassConfirm"
>
驳回
</button>
<button class="cancel" @tap="navigateBack">取消</button>
</view>
<view style="width: 0px; height: 0px; overflow: hidden">
<canvas
:style="
'width: ' +
canvasWidth +
'px; height:' +
canvasHeight +
'px;left:8888px'
"
canvas-id="myCanvas"
></canvas>
</view>
</view>
</template>
<script>
import { formatDateTime } from "@/utils/time.js";
// import { getUser } from "@/utils/auth.js";
export default {
options: {
styleIsolation: "shared", // 解除样式隔离
},
data() {
return {
value: null,
opinion: "",
activities: [], // 审批流程
range: [
{ value: 1, text: "%" },
{ value: 2, text: "MPa" },
{ value: 3, text: "kg" },
],
datas: {
isMaked: false,
payWayName: "",
customerName: "",
templateName: "",
createrName: "",
bdName: "",
payPeriodName: "",
contractRentOrder: {
contractTotal: "",
guarantee: "",
truckQuantity: "",
},
contractNo: "合同编号",
projectName: "项目名称",
isDrivingTraining: 0,
dataList: [], // 交车单数据
hydrogenUnit: null,
},
DrivingTrainingRange: [
{ value: 0, text: "否" },
{ value: 1, text: "是" },
],
id: "",
brands: [], // 车辆品牌字典列表
truckType: [], // 车辆型号字典列表,
salesManagerDic: [], // 销售经理字典列表
yesNoDic: [],
// userInfo: {}, // 用户信息
contractAuthorizerInformationList: [], // 授权人列表
inStoreList: [], // 在库状态车辆列表
showAuthorizerPicker: false,
showIsDrivingTrainingPicker: false,
showHandoverDatePicker: false,
platNumberDisabled: true,
showPlateNumberPicker: false,
fileList1: [], // 仪表盘照片
fileList2: [], // 正面照片
fileList3: [], // 左前方照片
fileList4: [], // 右前方照片
fileList5: [], // 左后方照片
fileList6: [], // 右后方照片
fileList7: [], // 瑕疵照片
fileList8: [], // 轮胎照片
fileList9: [], // 其它
fileList10: [], // 司机证件
fileList11: [], // 电子文档
fileList12: [], // 用印合同
canvasWidth: 0,
canvasHeight: 0,
isRead: false, // 页面是否处于阅读模式
formDataList: [], // 交车检查单数据副本
loading: false,
loadingText: "加载中...",
hasSaveCheckList: false, // 是否保存过交车检查单
};
},
methods: {
getQueryApproveNodes() {
this.$api.audit
.getFlowTaskHistoryList({
formId: this.id,
flowTemplateId: "1064360963341320192",
})
.then((res) => {
console.log(res);
if (res.code == 200) {
console.log(res);
this.activities = res.data;
console.log(this.activities);
}
});
},
getData() {
this.$api.audit.getAuditId({ id: this.id }).then((res) => {
this.datas = res;
//this.datas.couldMakeBill = true;测试用
this.parseFileListBack();
});
},
goto(e) {
uni.navigateTo({ url: e.target.dataset.url });
},
navigateBack() {
uni.navigateBack();
},
formatDateTime(val, format) {
return val ? formatDateTime(val, format || "yyyy-MM-dd") : "";
},
// processFormDataList(dataList) {
// dataList = dataList.filter((x) => x.dataName != "检查项目");
// for (let item of dataList) {
// if (item.dataType != 1) {
// continue;
// }
// // 如果dataType是1表示是布尔类型进行字符串到布尔的转化
// if (item.takeTruck == "true") {
// item.takeTruck = true;
// } else {
// item.takeTruck = false;
// }
// }
// return dataList;
// },
change(e) {
this.datas.hydrogenUnit = e;
},
// 删除图片
deletePic(event) {
const fileList = this[`fileList${event.name}`];
if (fileList.some((x) => x.status == "uploading")) {
this.alert(`请等待现有图片上传完成后再操作`);
return;
}
this[`fileList${event.name}`].splice(event.index, 1);
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length;
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: "uploading",
message: "上传中",
});
});
//const fileSize = event.file.size / 1024 ** 2; // 图片多少MB
console.log(`event.file:\n`, event.file);
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url);
// let result = { data: { url: waterUrl }}
let item = this[`fileList${event.name}`][fileListLen];
this[`fileList${event.name}`].splice(
fileListLen,
1,
Object.assign(item, {
status: "success",
message: "",
url: result.data?.url ?? "",
thumb: item.type === "file" ? "/static/pdf.png" : "",
})
);
fileListLen++;
console.log("fileList");
console.log(this[`fileList${event.name}`]);
console.log(result.data);
const imgUrl = result.data?.url ?? "";
const fileName = event.file[0]?.name ?? "";
// if (event.name == "11") {
// this.datas.attachmentList.push({
// url: imgUrl,
// thumb: "/static/pdf.png",
// });
// }
if (event.name == "12") {
this.datas.sealAttachmentList.push({
path: imgUrl,
fileName: fileName,
thumb: "/static/pdf.png",
});
console.log(this.datas.sealAttachmentList);
}
}
},
uploadFilePromise(url) {
console.log("url");
console.log(url);
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: "/attachment/upload",
filePath: url,
name: "file",
success: (res) => {
resolve(JSON.parse(res.data || {}));
},
fail: (e) => {
reject(e);
},
});
});
},
parseFileListBack() {
//this.fileList7 = this.datas.blemish.map((x) => ({ url: x }));
this.fileList11 = this.datas.attachmentList.map((x) => ({
url: x.path,
name: x.fileName,
type: x.fileName.substring(x.fileName.lastIndexOf(".") + 1) || "",
thumb: "",
}));
this.fileList12 = this.datas.sealAttachmentList.map((x) => ({
url: x.path,
name: x.fileName,
type: x.fileName.substring(x.fileName.lastIndexOf(".") + 1) || "",
thumb: "",
}));
console.log(this.fileList12);
// 培训文件签字照片
},
//用印
makeConfirm() {
uni.showModal({
title: "提示",
content: "进行用印操作后会生成提车前应收款?",
success: (res) => {
if (res.confirm) {
this.datas.isMaked = true;
this.showMakeBill();
}
},
});
},
showMakeBill() {
this.$api.audit.makeContractBill({ id: this.id }).then((res) => {
if (res) {
uni.showToast({
title: "操作成功",
icon: "success",
duration: 1500,
success() {},
});
} else {
this.$message.error("操作失败");
this.datas.isMaked = false;
}
});
},
submitConfirm() {
uni.showModal({
title: "提示",
content: "确认通过吗?",
success: (res) => {
if (res.confirm) {
this.submit();
}
},
});
},
submit() {
// if (!this.datas.attachmentList || this.datas.attachmentList.length == 0) {
// this.alert(`请完成电子签名`);
// return;
// }
if (
this.datas.flowTaskNodeCode == "xpucv2a5w3" &&
(!this.datas.sealAttachmentList ||
this.datas.sealAttachmentList.length === 0)
) {
this.alert(`请上传合同盖章文件`);
return;
}
this.$api.audit
.approve({
formId: this.datas.id,
auditOpinion: this.opinion,
flowTaskNodeCode: this.datas.flowTaskNodeCode,
flowTemplateId: "1064360963341320192",
//全部发送会报错,先只发合同编号
formData: { ...this.datas }, //{ contractNo: this.formData.contractNo }
})
.then((res) => {
if (res) {
let task = res.data;
//todo 这里是写死的节点判断以后有改动的话需要修改
if (this.datas.flowTaskNodeCode == "xpucv2a5w3") {
task.sealAttachmentList = this.datas.sealAttachmentList;
}
this.$api.audit.changeStatusByFlowTask(task).then((res) => {
if (res) {
uni.showToast({
title: "通过成功",
icon: "success",
duration: 1500,
success() {
setTimeout(() => {
uni.navigateBack();
}, 1500);
},
});
}
});
}
});
},
// 审批通过
// passAudit() {
// if (
// this.formData.flowTaskNodeCode == "xpucv2a5w3" &&
// (!this.formData.sealAttachmentList ||
// this.formData.sealAttachmentList.length === 0)
// ) {
// this.$message.error("请上传合同盖章文件");
// return;
// }
// this.$confirm("确认要进行审批通过操作吗?")
// .then(() => {
// this.$api.flowManagement
// .approve({
// formId: this.formData.id,
// auditOpinion: this.opinion,
// flowTaskNodeCode: this.formData.flowTaskNodeCode,
// flowTemplateId: "1064360963341320192",
// //全部发送会报错,先只发合同编号
// formData: { ...this.formData }, //{ contractNo: this.formData.contractNo }
// })
// .then((res) => {
// if (res.subCode == 0) {
// let task = res.data.data;
// //todo 这里是写死的节点判断以后有改动的话需要修改
// if (this.formData.flowTaskNodeCode == "xpucv2a5w3") {
// task.sealAttachmentList = this.formData.sealAttachmentList;
// }
// this.$api.contract.changeStatusByFlowTask(task).then((res) => {
// if (res.subCode == 0) {
// this.$router.push({
// name: "contract",
// query: {},
// });
// }
// });
// }
// });
// })
// .catch(() => {});
// },
notPassConfirm() {
uni.showModal({
title: "提示",
content: "确认驳回吗?",
success: (res) => {
if (res.confirm) {
this.notPassAudit();
}
},
});
},
// 审批不通过
notPassAudit() {
this.$api.audit
.reject({
formId: this.datas.id,
auditOpinion: this.opinion,
flowTemplateId: "1064360963341320192",
//全部发送会报错,先只发合同编号
formData: { ...this.datas }, //{ contractNo: this.formData.contractNo }
})
.then((res) => {
if (res) {
let task = res.data;
//todo 这里是写死的节点判断以后有改动的话需要修改
if (this.datas.flowTaskNodeCode == "xpucv2a5w3") {
task.sealAttachmentList = this.datas.sealAttachmentList;
}
this.$api.audit.changeStatusByFlowTask(task).then((res) => {
if (res) {
uni.showToast({
title: "驳回成功",
icon: "success",
duration: 1500,
success() {
setTimeout(() => {
uni.navigateBack();
}, 1500);
},
});
}
});
}
});
},
// 在提交前检查,是否有必填字段未填写
// check() {
// if (
// this.datas.isDrivingTraining !== 0 &&
// this.datas.isDrivingTraining !== 1
// ) {
// this.alert("请选择驾驶培训");
// return false;
// }
// return true;
// },
alert(msg) {
uni.showToast({
title: msg,
icon: "none",
duration: 1500,
});
},
// 预览ALl
previewAll(data) {
if (!data || !data.url) {
this.alert(`文件上传异常`);
return;
}
console.log(data);
const path = data.url;
this.loading = true;
this.loadingText = "加载中...";
const that = this;
const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
if (imglist.includes(data.type)) {
uni.previewImage({
urls: [path], // 需要预览的图片HTTP链接列表
});
} else {
uni.downloadFile({
url: path,
success: function (res) {
var filePath = res.tempFilePath;
that.loading = false;
uni.openDocument({
filePath: filePath,
success: function (res) {
that.loading = false;
},
fail() {
that.loading = false;
},
});
},
fail() {
that.alert("预览文件失败");
that.loading = false;
},
});
}
},
// 预览pdf
previewPdf(data) {
if (!data || !data.url) {
this.alert(`文件上传异常`);
return;
}
console.log(data);
const path = data.url;
this.loading = true;
this.loadingText = "加载中...";
const that = this;
uni.downloadFile({
url: path,
success: function (res) {
var filePath = res.tempFilePath;
that.loading = false;
uni.openDocument({
filePath: filePath,
success: function (res) {
that.loading = false;
},
fail() {
that.loading = false;
},
});
},
fail() {
that.alert("预览文件失败");
that.loading = false;
},
});
},
},
computed: {
// 大部分组件的禁用直接用 disabled查看模式或者已完成签署
disabled() {
return this.isRead;
},
_totalCost() {
return (
Number(this.datas.contractRentOrder?.contractTotal) +
Number(this.datas.contractRentOrder?.guarantee)
).toFixed(2);
},
_contractAmount() {
return this.datas.contractRentOrder?.firstRentServiceCost
? Number(this.datas.contractRentOrder?.firstRentServiceCost).toFixed(2)
: "";
},
allFileList() {
//var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
return this.fileList11 || [];
// .filter(
// (item) => item.type == "file" || item.type == "pdf"
// );
},
yyPdfList() {
return this.fileList12.filter(
(item) => item.type == "file" || item.type == "pdf"
);
},
},
onLoad(options) {
if (options.id) {
this.id = options.id;
}
if (options.isRead) {
this.isRead = Number(options.isRead);
}
//this.userInfo = getUser() || {};
//this.getDic();
this.getData();
this.getQueryApproveNodes();
// this.getInStoreList()
},
onPullDownRefresh() {
// this.getData()
uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
},
onShow() {
if (this.loadingText != "添加水印中...") {
this.loading = false;
}
},
onHide() {},
destroyed() {},
};
</script>
<style lang="less" scoped>
.container {
// background-color: #d7d7d7;
padding: 30rpx;
.block {
display: flex;
line-height: 1.5;
padding: 10px;
flex-direction: column;
align-items: left;
margin-bottom: 15rpx;
border: 1px solid #ccc;
}
.hot {
color: red;
}
.line {
display: flex;
align-items: center;
margin-bottom: 15rpx;
font-size: 14px;
.left {
margin-right: 50rpx;
width: 300rpx;
}
.text-small {
font-size: x-small;
}
.text-normal {
font-size: small;
}
}
.item {
margin-top: 30rpx;
.title {
font-size: 26rpx;
margin-bottom: 15rpx;
&.required::before {
content: "*";
color: red;
margin-right: 3rpx;
}
}
.btn.checkList {
width: 200rpx;
height: 60rpx;
font-size: 26rpx;
line-height: 26rpx;
padding: 17rpx 0;
text-align: center;
background-color: #7ba746;
color: white;
margin-left: 0;
&.required::before {
content: "*";
color: red;
margin-right: 3rpx;
}
}
.unit {
font-size: 26rpx;
}
.btn {
width: 200rpx;
height: 80rpx;
margin-left: 0;
font-size: 26rpx;
line-height: 26rpx;
padding: 27rpx 0;
text-align: center;
color: white;
&.sign {
background-color: #7ba746;
}
&.genDocument {
background-color: #1e98d7;
}
&.disabled {
opacity: 0.6;
}
}
}
.btns {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 20rpx;
button {
width: 150rpx;
height: 60rpx;
font-size: 26rpx;
line-height: 26rpx;
padding: 17rpx 0;
text-align: center;
}
.cancel {
background-color: white;
color: #7ba746;
border: 1rpx #7ba746 solid;
}
.save {
background-color: #7ba746;
color: white;
}
.done {
background-color: #7ba746;
color: white;
}
.disabled {
opacity: 0.6;
}
}
}
/deep/ .u-upload__wrap__preview__other__text {
overflow: hidden;
text-align: center;
word-break: break-word;
}
/deep/ .u-textarea textarea {
min-height: 100rpx !important;
font-size: 26rpx !important;
}
/deep/ .u-border {
border-width: 1rpx !important;
border-color: gray !important;
border-style: solid;
}
/deep/ .u-collapse-item__content__text {
padding: unset !important;
color: unset !important;
font-size: unset !important;
}
/deep/ .u-cell__title-text {
font-size: unset !important;
line-height: unset !important;
color: unset !important;
}
/deep/ .u-cell__body {
padding: unset !important;
font-size: unset !important;
color: unset !important;
}
/deep/ .u-cell__right-icon-wrap text {
font-size: 32rpx !important;
}
/deep/ .u-cell--clickable {
background-color: unset !important;
}
/deep/ .u-collapse-item {
margin-bottom: 30rpx;
}
/deep/ .uni-select {
width: 100rpx !important;
}
/deep/ .u-upload__button text {
font-size: 48rpx !important;
}
/deep/ .u-upload__deletable {
height: 42rpx !important;
width: 42rpx !important;
}
/deep/ .u-upload__deletable text {
font-size: 32rpx !important;
line-height: 32rpx !important;
}
/deep/ picker-view {
height: 450rpx !important;
}
/deep/ .uni-select__input-text {
font-size: 26rpx !important;
text-align: right !important;
}
/deep/ .uni-select__selector-item text {
font-size: 26rpx !important;
}
/deep/ .uni-select {
padding-right: 18rpx !important;
border-width: 1rpx !important;
border-color: gray !important;
border-style: solid !important;
border-top-width: 0 !important;
border-right-width: 0 !important;
border-bottom-width: 0 !important;
}
/deep/ picker-view picker-view-column:nth-of-type(5) {
display: none;
}
.changeCarBtn {
height: 76rpx;
font-size: 26rpx;
line-height: 76rpx;
border-width: 1rpx !important;
border-color: gray !important;
border-style: solid !important;
border-top-width: 0 !important;
border-right-width: 0 !important;
border-bottom-width: 0 !important;
}
/* 检查单样式开始 */
/deep/ .td_wrap {
height: auto !important;
}
/deep/ checkbox-group view.td {
width: 186rpx !important;
}
/deep/ checkbox-group view.td_wrap {
width: 186rpx !important;
}
/deep/ .div-table-head .thead .tr view {
width: 186rpx !important;
}
/* 检查单样式结束 */
/* loading 置于顶层 */
/deep/ .u-fade-enter-to.u-fade-enter-active {
z-index: 10074 !important;
}
</style>