dgtis-uniapp/pages/oa/expense/detail.vue

<template>
	<view class="container">
		<uni-forms ref="form" :model="form" labelWidth="120px" :label-position="alignment">
			<uni-forms-item label="报销人">
				<uni-easyinput v-model="form.employeeName" disabled />
			</uni-forms-item>
			<uni-forms-item label="部门">
				<uni-easyinput v-model="form.deptName" disabled />
			</uni-forms-item>
			<uni-forms-item label="职位">
				<uni-easyinput v-model="form.position" disabled />
			</uni-forms-item>
			<uni-forms-item label="手机号">
				<uni-easyinput v-model="form.employeePhone" disabled />
			</uni-forms-item>
			<uni-forms-item label="报销类型">
				<uni-easyinput v-model="form.expenseTypeName" disabled />
			</uni-forms-item>
			
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th align="center" width="100">费用项目</uni-th>
					<uni-th align="center" width="100">金额(元)</uni-th>
					<uni-th align="center" width="200">开始日期</uni-th>
					<uni-th align="center" width="200">结束日期</uni-th>
					<uni-th align="center" width="200">说明</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in form.oaExpenseObjs" :key="index">
					<uni-td align="center">
						{{item.expenseItemName}}
					</uni-td>
					<uni-td align="center">
						{{item.money}}
					</uni-td>
					<uni-td align="center">
						{{item.startDate}}
					</uni-td>
					<uni-td align="center">
						{{item.endDate}}
					</uni-td>
					<uni-td align="center">
						{{item.remarks}}
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-forms-item label="附件">
				<view class="upload-wrap">
					<view class="mgb-16 file-wrap" v-for="(item, index) in form.fileList" :key="index">
					  <view class="btn-click file-line" @click="handlePreview(item)">
					    <view class="file-info">
					      <image :src="icons.file" mode="aspectFill" class="file-icon" />
					      <text class="file-name">{{ item.name || title[type] }}</text>
					    </view>
					  </view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput autoHeight maxlength="200" type="textarea" v-model="form.remarks" disabled />
			</uni-forms-item>
			<uni-forms-item label="审批意见" required v-if="(form.auditStatus==2 || form.auditStatus==1) && name=='0'">
				<uni-easyinput autoHeight maxlength="200" type="textarea" v-model="reason" placeholder="请输入审批建议" />
			</uni-forms-item>
			<uni-forms-item label="流程动态">
				<uni-steps active-icon="medal" :options="tasks" active-color="#007AFF" :active="tasks.length" direction="column" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group" v-if="name=='0'">
			<button type="primary" size="mini" @click="handleAudit(true)">同意</button>
			<button size="mini" @click="handleAudit(false)">驳回</button>
		</view>
		<view class="button-group" v-if="name=='2'">
			<button type="warning" v-if="form.auditStatus==1" size="mini" @click="handleRevocation('form')">撤回</button>
		</view>
	</view>
</template>

<script>
	import { getDetail,revocation,agree,disagree } from "@/api/oa/expense.js"
	export default {
		props: {
		    id: {
		      type: [String, Number],
		      default: undefined
		    },
		    name: {
		      type: String,
		      default: undefined
		    },
		  },
		data() {
			return {
				reason:'',
				active: -1,
				tasks: [],
				userInfo:uni.getStorageSync('userInfo'),
				alignment:'top',
				fileList: [],
				icons: {
				  file: '/static/icon_file.png',
				},
				// 表单数据
				form: {},
			}
		},
		watch: {
		    id: {
		      immediate: true,
		      handler(val) {
		        this.getDetail(val);
		      }
		    }
		  },
		methods: {
			  /** 获得详情信息 */
			    getDetail(val) {
			      getDetail(val).then(response => {
			        this.form = response.data;
			        let auditRecordList = response.data.auditRecordList;
					let tasks = [];
					auditRecordList.forEach(v => {
						tasks.push({
							title:'任务:' + v.assigneeUser.nickname + v.name,
							desc:this.parseTime(v.endTime),
						})
					})
					this.tasks = tasks;
			      });
			    },
			// 预览
			handlePreview(val) {
			  console.log('PreviewFile', val);
			  const fileType = this.getFileType(val.name);
			  if (fileType === 'image') {
			   uni.previewImage({
			     current: 0,
			     urls: [val.url],
			   });
			  }
			  else if (fileType === 'office') {
				  return uni.downloadFile({
				    url: val.url, 
				    success: function (res) {
				      let filePath = res.filePath || res.tempFilePath;
				      uni.openDocument({
				        filePath: filePath,
				        showMenu: true,
				        success: function (res) {
				          console.log('打开文档成功');
				        }
				      });
				    }
				  });
			  }
			  else{
				  uni.showModal({
				    title: '该类型文件无法预览',
				    content: val.name,
				    showCancel: false,
				  });
			  }
			  
			},
			handleRevocation(){
			      console.log(this.form.taskId);
				  let that = this
				  uni.showModal({
				          title: '提示',
				          content: '是否确认撤回?',
				          success: function (res) {
				            if (res.confirm) {
				              console.log('用户点击确定');
				              revocation({id:that.form.taskId}).then(response => {
				               uni.showToast({
				               	title: "撤回成功！"
				               })
							   that.$emit('popupClose');
				              })
				            } else if (res.cancel) {
				              console.log('用户点击取消');
				            }
				          }
				        });
			    },
			    handleAudit(pass) {
			      if (!this.reason) {
					uni.showModal({
						title: "提示",
						content: "请填写审批意见",
						showCancel: false,
						confirmText: "确定"
					})
			        return;
			      } else {
			        const data = {
			          id: this.form.taskId,
			          reason: this.reason,
			        }
			        if (pass) {
			          agree(data).then(response => {
						  uni.showToast({
						  	title: "审批通过成功！"
						  })
						  this.$emit('popupClose');
			          });
			        } else {
			          disagree(data).then(response => {
						  uni.showToast({
						  	title: "驳回成功！"
						  })
						  this.$emit('popupClose');
			          });
			        }
			      }
			    },
			
			
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>
<style lang="scss" scoped>
	.user-avatar {
	  width: 22px;
	  height: 22px;
	  line-height: 19px;
	  font-size: 12px;
	  background: #46c26f;
	  border: 1px solid transparent;
	  border-radius: 5px;
	  color: #fff;
	  display: inline-block;
	  overflow: hidden;
	  text-align: center;
	  line-height: 22px;
	  margin-bottom: 2px;
	}
	.popup-body{
		z-index: 99;
		height: 450px;
		overflow-x: auto;
		// margin-bottom: 60px;
	}
	.popup-close{
		cursor: pointer;
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		border-bottom: 1px solid #eaecef;
	}
	.popup-content{
		margin: 20px;
	}
.btn-click {
  transition: all 0.3s;
  opacity: 1;
}

.btn-click:active {
  opacity: 0.5;
}

.mgb-16 {
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.upload-wrap {
  width: 100%;
  border-radius: 16rpx;
  background: white;
  // padding: 32rpx;

  .upload-btn {
    width: 100%;
    height: 176rpx;
    border: 2rpx dashed #AAAAAA;
    background: #FAFAFA;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .upload-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }

    .upload-text {
      font-size: 26rpx;
      color: #9E9E9E;
      line-height: 40rpx;
    }
  }

  .file-wrap {
    .file-line {
      width: 100%;
      background: #F5F5F5;
      border-radius: 8rpx;
      padding: 16rpx;
      font-size: 26rpx;
      color: #1A1A1A;
      line-height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .file-info {
        width: 90%;
        display: flex;
        align-items: center;

        .file-name {
          max-width: 80%;
          padding-left: 16rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .file-icon {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }

      .file-empty {
        color: #999999;
      }
    }
  }
}
</style>