|
@@ -0,0 +1,455 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class='wrap'>
|
|
|
+ <view class="xinxi" v-if="reType == 2 || expensesType == '2'" style="font-size: 28rpx; ">请款信息</view>
|
|
|
+ <view class="xinxi" v-if="reType == 1 || expensesType == '1'" style="font-size: 28rpx; ">收款信息</view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">用途</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <view @click='show=true'>{{detailData.purpose}}
|
|
|
+ <u-icon name="arrow-right" color=""></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-picker :range="purposeList" range-key="purpose" @confirm='ltCheck($event)' v-model="show"
|
|
|
+ mode="selector">
|
|
|
+ </u-picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row" v-if="detailData.purpose == '库点费用'">
|
|
|
+ <view class="title">仓库名称</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <view @click='selectWare()'>{{detailData.warehouseName}}
|
|
|
+ <u-icon name="arrow-right" color=""></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row" v-if="detailData.purpose == '合同费用'">
|
|
|
+ <view class="title">合同编号</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <view @click='selectCon'>{{detailData.contractNo?detailData.contractNo:"请选择合同编号"}}
|
|
|
+ <u-icon name="arrow-right" color=""></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">费用名称</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <input v-model='detailData.expenseName' placeholder="输入费用名称,1-15个字"></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">金额(元)</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <input v-if="reType == '2' || expensesType == '2'" v-model='detailData.amountMoney'
|
|
|
+ placeholder="输入请款金额"></input>
|
|
|
+ <input v-if="reType == '1' || expensesType == '1'" v-model='detailData.amountMoney'
|
|
|
+ placeholder="输入收款金额"></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="left">备注</view>
|
|
|
+ </view>
|
|
|
+ <view style='position:relative;' class="wrap no-boder">
|
|
|
+ <u-input class='textarea' v-model="detailData.remark" :type="typeRemark" :border="border"
|
|
|
+ placeholder="选填,不超过150字" :height="height" :auto-height="autoHeight" maxlength="150" />
|
|
|
+ <view class="remark">
|
|
|
+ {{detailData.remark?detailData.remark.length:'0'}}/150个字
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">附件(选填)</view>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;flex-wrap: wrap;">
|
|
|
+ <view v-for='(item,index) in imglist2' v-if="imglist2 && imglist2.length > 0"
|
|
|
+ style="position: relative;margin-left: 20rpx;">
|
|
|
+ <view class="delete_img" @click="deleteImg(index)">X</view>
|
|
|
+ <image :src="item.appendixPath" mode="" style="width: 100px;height: 100px;"></image>
|
|
|
+ </view>
|
|
|
+ <view class="biankuang" @click="uploadClick" v-if="imglist2.length < 9">
|
|
|
+ <view class="tubiao">
|
|
|
+ <image class="upload" src="../../static/img/oa_office/upload.png" mode="">
|
|
|
+ </image>
|
|
|
+ <view class="" style="color:#8c8f98;">
|
|
|
+ 选择图片
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
+ <view class="bottom-btn">
|
|
|
+ <u-button type="primary" class="submit" hover-class="none" @click="submit()">提交</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as config from '../../config'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ showWare: false,
|
|
|
+ detailData: {
|
|
|
+ purpose: '库点费用',
|
|
|
+ remark: "",
|
|
|
+ warehouseName: '选择仓库',
|
|
|
+ expenseName: '',
|
|
|
+ amountMoney: '',
|
|
|
+ expensesPurpose: '3',
|
|
|
+ expensesType: '',
|
|
|
+ // contractId: '',
|
|
|
+ fieldName: '',
|
|
|
+ identification: '1',
|
|
|
+ costType: '3',
|
|
|
+ agent: '',
|
|
|
+ totalDistribution: '0',
|
|
|
+ },
|
|
|
+ fileList1: [],
|
|
|
+ warehouseType: '1',
|
|
|
+ typeRemark: 'textarea',
|
|
|
+ border: true,
|
|
|
+ imglist: [], //存
|
|
|
+ imglist2: [], //展示
|
|
|
+ height: 150,
|
|
|
+ autoHeight: true,
|
|
|
+ purposeList: [{
|
|
|
+ purpose: "合同费用"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ purpose: "库点费用"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ purpose: "经营性费用"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ reType: "",
|
|
|
+ flag: "",
|
|
|
+ warehouseInfo: {},
|
|
|
+ contractNoInfo: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.reType = options.reType
|
|
|
+ this.expensesType = options.expensesType
|
|
|
+ this.id = options.id
|
|
|
+ if (this.id) {
|
|
|
+ this.getRequest()
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.warehouseInfo = uni.getStorageSync('theWarehouse');
|
|
|
+ if (this.warehouseInfo && this.detailData.purpose == "库点费用") {
|
|
|
+ this.detailData.warehouseName = this.warehouseInfo.warehouseName
|
|
|
+ }
|
|
|
+ this.contractNoInfo = uni.getStorageSync('reContractNo');
|
|
|
+ if (this.contractNoInfo && this.detailData.purpose == "合同费用") {
|
|
|
+ this.detailData.contractId = this.contractNoInfo.id
|
|
|
+ this.detailData.contractNo = this.contractNoInfo.contractNo
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ imglist: {
|
|
|
+ handler: function() {
|
|
|
+ this.$api.doRequest('get', 'appendix/query/getFileList', {
|
|
|
+ appendixIds: this.imglist.toString()
|
|
|
+ }).then(res => {
|
|
|
+ this.imglist2 = res.data.data
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ afterRead(e) {
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ uploadClick() {
|
|
|
+ let baseUrlNew = config.def().baseUrlNew1
|
|
|
+ uni.chooseImage({
|
|
|
+ success: (chooseImageRes) => {
|
|
|
+ let a = chooseImageRes.tempFiles
|
|
|
+ uni.uploadFile({
|
|
|
+ url: baseUrlNew + 'pb/appendix/api/uploadFiles',
|
|
|
+ // url: baseUrlNew+'appendix/api/uploadFiles', //仅为示例,非真实的接口地址
|
|
|
+ files: a,
|
|
|
+ formData: {
|
|
|
+ fileName: chooseImageRes.tempFiles[0],
|
|
|
+ companyId: "2710b21efc1e4393930c5dc800010dc4",
|
|
|
+ modelId: '',
|
|
|
+ vesselId: '',
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ console.log(JSON.parse(uploadFileRes.data))
|
|
|
+ var data = JSON.parse(uploadFileRes.data).data
|
|
|
+ this.$api.doRequest('post', '/appendix/api/saveFiles', {
|
|
|
+ newAppendixs: [data],
|
|
|
+ oldAppendixIds: ""
|
|
|
+ }).then(res => {
|
|
|
+ this.imglist.push(res.data.data[0])
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ console.log(uploadFileRes.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteImg(index) {
|
|
|
+ this.imglist.splice(index, 1)
|
|
|
+ },
|
|
|
+ calculate() {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.selectAll('.left')
|
|
|
+ console.log(query)
|
|
|
+ },
|
|
|
+ ltCheck(e) {
|
|
|
+ this.detailData.purpose = this.purposeList[e[0]].purpose
|
|
|
+ if (this.detailData.purpose == "合同费用") {
|
|
|
+ this.detailData.expensesPurpose = "1"
|
|
|
+ delete this.detailData.warehouseName
|
|
|
+
|
|
|
+ } else if (this.detailData.purpose == "库点费用") {
|
|
|
+ this.detailData.expensesPurpose = "3"
|
|
|
+ delete this.detailData.contractNo
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.detailData.expensesPurpose = "5"
|
|
|
+ delete this.detailData.warehouseName
|
|
|
+ delete this.detailData.contractNo
|
|
|
+ }
|
|
|
+ console.log(this.detailData)
|
|
|
+ },
|
|
|
+ selectCon() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/reimbursement/selectContract'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectWare() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/reimbursement/selectWarehouse?warehouseType=1'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.detailData.purpose) {
|
|
|
+ this.$api.msg('用途不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.detailData.warehouseName && this.detailData.purpose == '库点费用') {
|
|
|
+ this.$api.msg('请选择仓库名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.detailData.contractNo && this.detailData.purpose == '合同费用') {
|
|
|
+ this.$api.msg('请选择合同编号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.detailData.amountMoney) {
|
|
|
+ this.$api.msg('金额不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var that = this
|
|
|
+ var title
|
|
|
+ var theInterface
|
|
|
+ if (that.expensesType == '1') {
|
|
|
+ title = "确定提交收款信息?"
|
|
|
+ } else {
|
|
|
+ title = "确定提交请款信息?"
|
|
|
+ }
|
|
|
+ if (that.id) {
|
|
|
+ theInterface = '/expenseInfo/editInfo'
|
|
|
+ that.detailData.id = that.id
|
|
|
+ } else {
|
|
|
+ theInterface = '/expenseInfo/api/addInfo'
|
|
|
+ }
|
|
|
+ debugger
|
|
|
+ uni.showModal({
|
|
|
+ content: title,
|
|
|
+ showCancel: true,
|
|
|
+ confirmText: '提交',
|
|
|
+ success: function(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ that.detailData.compId = uni.getStorageSync('pcUserInfo').compId
|
|
|
+ that.detailData.agent = uni.getStorageSync('userInfo').userName
|
|
|
+ that.detailData.identification = that.detailData.identification
|
|
|
+ that.detailData.costType = that.detailData.costType
|
|
|
+ that.detailData.expensesType = that.reType
|
|
|
+ that.detailData.fieldName = uni.getStorageSync('userInfo').userName
|
|
|
+ that.detailData.totalDistribution = that.detailData.totalDistribution
|
|
|
+ if (that.imglist.length > 0) {
|
|
|
+ that.detailData.addressUrl = that.imglist.toString()
|
|
|
+ }
|
|
|
+ that.$api.doRequest('post', theInterface, that.detailData)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ that.$api.msg('提交成功')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/reimbursement/the_reimbursement'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.$api.msg('提交失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取信息
|
|
|
+ getRequest() {
|
|
|
+ this.$api.doRequest('get', '/expenseInfo/getInfo', {
|
|
|
+ id: this.id,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.detailData = res.data.data
|
|
|
+ this.imglist = this.detailData.addressUrl.split(',')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+ page {
|
|
|
+ background: #F5F6FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete_img {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ left: 84px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border: 1px;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-color: #ff0000;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_b {
|
|
|
+ margin: 20rpx 20rpx 0rpx 20rpx;
|
|
|
+ padding: 20rpx 10rpx 20rpx 10rpx;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xinxi {
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tubiao {
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 35rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .biankuang {
|
|
|
+ border: 1px dashed #AFB3BF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .c-row {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con-list {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #fff;
|
|
|
+ margin: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ input {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ >.title {
|
|
|
+ padding: 10px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .buns_item {
|
|
|
+ display: flex;
|
|
|
+ padding: 80rpx 0 50rpx 0;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but_css {
|
|
|
+ background: #22C572;
|
|
|
+ width: 40%;
|
|
|
+ padding: 20rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-radio-group {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-boder {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textarea {
|
|
|
+ background: #F9F9FA;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 20px;
|
|
|
+ color: #AFB3BF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ width: 100%;
|
|
|
+ background: #2c8ac5;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-btn {
|
|
|
+ padding: 30rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ display: flex;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+</style>
|