DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/LogisticsapplyManagement/Purchase_Travel_Apply/single.vue

<template>
	<view class="page">
		<view v-if="ready">
			<l-select @input="setValue('Purchase_Travel.DepartmentId', $event)"
				:value="getValue('Purchase_Travel.DepartmentId')" :disabled="!edit"
				:range="dataSource.Purchase_Travel.DepartmentId" title="填报部门" required disabled />
			<l-organize-picker @input="setValue('Purchase_Travel.Creator', $event)"
				:value="getValue('Purchase_Travel.Creator')" :readonly="!edit" type="user" title="填报人" required readonly />
			<l-datetime-picker
				@input="setValue('Purchase_Travel.Createtime', $event)"
				:value="getValue('Purchase_Travel.Createtime')"
				disabled
				title="填报时间"
			  />
			<l-input @input="setValue('Purchase_Travel.Follows', $event)" :value="getValue('Purchase_Travel.Follows')" title="随行人员" required :disabled="!edit"/>
			<l-textarea @input="setValue('Purchase_Travel.Reason', $event)" :value="getValue('Purchase_Travel.Reason')"
				:readonly="!edit" title="原因" />
			<l-date-picker
				@input="setValue('Purchase_Travel.Starttime', $event)"
				:value="getValue('Purchase_Travel.Starttime')"
				disabled
				title="开始时间"
			  />
			<l-date-picker
				@input="setValue('Purchase_Travel.Endtime', $event)"
				:value="getValue('Purchase_Travel.Endtime')"
				disabled
				title="结束时间"
			  />
			<l-upload-file @input="setValue('Purchase_Travel.FilePath', $event)" :value="getValue('Purchase_Travel.FilePath')"
				tableName="Purchase_Travel" fieldName="FilePath" title="附件" :number="9" :readonly="!edit" />
			<l-input @input="setValue('Purchase_Travel.Totalamount', $event)" :value="getValue('Purchase_Travel.Totalamount')" title="申请报账金额" required :disabled="!edit"/>
			<!-- <l-textarea @input="setValue('Purchase_Travel.Remark', $event)" :value="getValue('Purchase_Travel.Remark')"
				:readonly="!edit" title="备注" /> -->
			<!-- <l-select
				@input="setValue('Purchase_Travel.Status', $event)"
				:value="getValue('Purchase_Travel.Status')"
				:disabled="!edit"
				:range="dataSource.Purchase_Travel.Status"
				title="是否提交"
			  />
			  <l-datetime-picker
				@input="setValue('Purchase_Travel.SubmitTime', $event)"
				:value="getValue('Purchase_Travel.SubmitTime')"
				:disabled="!edit"
				title="提交时间"
			  /> -->
					<!--  <l-select
				@input="setValue('Purchase_Travel.CheckStatus', $event)"
				:value="getValue('Purchase_Travel.CheckStatus')"
				:disabled="!edit"
				:range="dataSource.Purchase_Travel.CheckStatus"
				title="审核状态"
			  />
			  <l-datetime-picker
				@input="setValue('Purchase_Travel.CheckTime', $event)"
				:value="getValue('Purchase_Travel.CheckTime')"
				:disabled="!edit"
				title="审核时间"
			  />
			  <l-organize-picker
				@input="setValue('Purchase_Travel.CheckUserId', $event)"
				:value="getValue('Purchase_Travel.CheckUserId')"
				:readonly="!edit"
				type="user"
				title="审核人"
			  /> -->
			<l-input @input="setValue('Purchase_Travel.Approvalamount', $event)" :value="getValue('Purchase_Travel.Approvalamount')"
				:disabled="!edit" title="核准金额" />
			<view style="background-color: #fff;">
				<view style="line-height: 40px;font-size: 14px;padding-left: 12px;">
					报账明细：
				</view>
				
				<view v-if="edit" class="customlist-banner-action" style="display: flex;">
					<view 
						@click="detailAdd"
						class="customlist-banner-action-btn line-blue text-sm"
						style="border: currentColor 1px solid;border-radius: 4px;margin: 8px;padding: 2px 4px;">
						<l-icon type="add" />
						新增
					</view>
					<view 
						@click="detailDelete"
						class="customlist-banner-action-btn line-red text-sm"
						style="border: currentColor 1px solid;border-radius: 4px;margin: 8px;padding: 2px 4px;">
						<l-icon type="delete" />
						删除
					</view>
				</view>
				
				<next-table ref="table" :show-header="true" :columns="column" :stripe="true" :fit="false" :border="true" :data="data"
					:highlight="true" @currentChange="currentChange">
				</next-table>
				<l-customform-table
					:value="currentRowDetail" :item="Purchase_Travel_Details"
					:edit="false" />
			</view>
		</view>
		<view v-if="ready && current.Purchase_Travel && current.Purchase_Travel.status != '1'"
			class="bg-white margin-tb padding" style="padding-top: 0; overflow: hidden;">
			<l-button v-if="edit" @click="action('save')" size="lg" color="green" class="block margin-top" block>
				提交保存
			</l-button>
			<!-- <l-button v-if="!edit && mode !== 'create'" @click="action('edit')" size="lg" line="orange" class="block margin-top" block> 
        编辑本页
      </l-button> 
      <l-button v-if="edit && mode !== 'create'" @click="action('reset')" size="lg" line="red" class="block margin-top" block> 
        取消编辑
      </l-button> 
      <l-button v-if="!edit && mode !== 'create'" @click="action('delete')" size="lg" line="red" class="block margin-top" block> 
        删除
      </l-button> -->
		</view>
	</view>
</template>


<script>
	/* 
	 * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn) 
	 * Copyright (c) 2013-2020 上海力软信息技术有限公司 
	 * 创建人：超级管理员 
	 * 日  期：2020-10-20 09:25 
	 * 描  述：活动安排 
	 */

	/** 
	 * 本段代码由移动端代码生成器输出，移动端须 2.2.0 版本及以上可以使用 
	 * 请在移动端 /pages.json 中的 pages 字段中添加一条记录： 
	 * { "path": "pages/PersonnelManagement/BookBorrow/single", "style": { "navigationBarTitleText": "表单详情页" } } 
	 *  
	 * （navigationBarTitleText 字段为本页面的标题文本，可以修改） 
	 * （必须自行操作该步骤，力软代码生成器不会自动帮您修改 /pages.json 文件） 
	 */

	import get from 'lodash/get'
	import set from 'lodash/set'
	import moment from 'moment'
	import customPageMixins from '@/common/custompage.js'

	export default {
		mixins: [customPageMixins],

		data() {
			return {
				// 页面相关参数 
				id: null,
				mode: null,
				edit: null,
				ready: false,

				// 表单数据 
				current: {},
				origin: {},

				// 表单项数据结构 
				scheme: {
					Purchase_Travel: {
						DepartmentId: {
							type: 'select',
							title: '填报部门'
						},
						Creator: {
							type: 'organize',
							title: '填报人',
						},
						Createtime: { type: 'datetime', title: '填报时间', dateformat: '1' },
						Follows:{ type:'text', title: '随行人员',verify:'NotNull' },
						Reason:{ type:'text', title: '出差原因'},
						Starttime: { type: 'datetime', title: '开始时间', dateformat: '0' },
						Endtime: { type: 'datetime', title: '结束时间', dateformat: '0' },
						Totalamount: {
							type: 'text',
							title: '申请报账金额',
							verify:'Price'
						},
						// Remark: {
						// 	type: 'textarea',
						// 	title: '备注'
						// },
						FilePath: {
							type: 'upload',
							title: '附件'
						},
						Approvalamount:{title:'核准金额',verify:'PriceOrNull'},
						// Status: { type: 'select', title: '是否提交' }, 
						// SubmitTime:{ type: 'datetime', title: '提交时间', dateformat: '1' },
						// CheckTime:{ type: 'datetime', title: '审核时间', dateformat: '1' }, 
						// CheckUserId:{ type: 'organize', title: '审核人' }, 
						// CheckStatus:{ type: 'select', title: '审核状态', }, 
					},
				},
				
				Purchase_Travel_Details: {
					type: 'girdtable',
					title: '采购列表',
					__defaultItem__: {},
					fieldsData: [{
							field: 'Name',
							type: 'input',
							name: '采购物品名称'
						},
						{
							field: 'Price',
							type: 'input',
							name: '价格'
						},
						{
							field: 'Quantity',
							type: 'input',
							name: '采购数量'
						},
						{
							field: 'Unit',
							type: 'input',
							name: '单位'
						},
						{
							field: 'UseTo',
							type: 'input',
							name: '用途'
						},
					]
				},
				// 数据源 
				dataSource: {
					Purchase_Travel: {
						DepartmentId: [],
						Status: [{
							text: '已提交',
							value: '1'
						}, {
							text: '未提交',
							value: '2'
						}],
						CheckStatus: [{
							text: '审核中',
							value: '1'
						}, {
							text: '审核通过',
							value: '2'
						}, {
							text: '',
							value: '草稿'
						}]
					},

				},
				
				// 采购数据
				column:[
					// { type:'selection', fixed:true,width:60 },
					// { name: 'CreatorName', label: '申请人',width:80,emptyString:'--' },
					{ name: 'TotalAmount', label: '金额',fixed:false,width:86,emptyString:'--' },
					// { name: 'DepartmentName', label: '部门',fixed:false,width:200,emptyString:'--' },
					{ name: 'Remark', label: '备注',fixed:false,width:126,emptyString:'--' },
					{ name: 'CreateTime', label: '申请时间',width:80,emptyString:'--' },
					// { name: 'SubmitTime', label: '提交时间',fixed:false,width:146,emptyString:'--' },
					// { name: 'CheckTime', label: '审核时间',fixed:false,width:146,emptyString:'--' },
				],
				data:[],
				page: 1, 
				total: 1,
				rows:8,
				list: [],
				currentRow:null,
				currentRowDetail:[],
			}
		},
		async onLoad({
			type,
			id
		}) {
			await this.init(type, id)
		},
		onUnload() {
		  this.OFF('details-change')
		},

		methods: {
			// 页面初始化 
			async init(type, id) {
				this.LOADING('加载数据中...')
				this.ON('details-change',this.dataChange)

				this.id = id
				this.mode = type
				this.edit = ['create', 'edit'].includes(this.mode)

				// 拉取表单数据，同时拉取所有来自数据源的选单数据 
				await Promise.all([
					this.FETCH_DATASOURCE('classdata').then(data => {
						this.dataSource.Purchase_Travel.DepartmentId = data.data.map(t => ({
							text: t.name,
							value: t.id
						}));
					}),
					() => {}
				])
				await this.fetchForm()

				this.ready = true
				this.HIDE_LOADING()
			},

			// 加载表单数据 
			async fetchForm() {
				if (this.mode === 'create') {
					this.origin = await this.getDefaultForm()
					let userInfo = this.GET_GLOBAL('loginUser');
					this.origin.Purchase_Travel.DepartmentId = userInfo.departmentId
					this.origin.Purchase_Travel.Creator = userInfo.userId
				} else {
					const result = await this.HTTP_GET('learun/adms/purchasetravelapply/form', this.id)
					this.origin = await this.formatFormData({
						Purchase_Travel: result.Purchase_Travel,
					})
					this.data = result.Purchase_Travel_Details
				}
				this.current = this.COPY(this.origin)
			},
			// 计算报账金额
			getamount(){
				let getamount = 0
				this.data.forEach(e=>{
					getamount = this.accAdd(e.TotalAmount,getamount)
				})
				this.setValue('Purchase_Travel.Totalamount', getamount)
			},
			// 点击某一行
			async currentChange(row){
				this.currentRow = row
				// this.currentRowDetail = []
				// const result = await this.HTTP_GET('learun/adms/purchasetravel/formdetail',row.purchaseid)
				// if(!result)return
				// this.currentRowDetail = result
			},
			// 新增明细数据
			dataChange(data){
				data.forEach(e=>{
					if(!this.data.find(e1=>e.Id == e1.purchaseid)){
						e.purchaseid = e.Id
						this.data.push(e)
					}
				})
				this.getamount()
			},
			async detailDelete(){
				if(!this.currentRow){
					this.TOAST('请选中某一项')
					return
				}
				if (!(await this.CONFIRM('删除项目', '确定要删除选中项吗？', true))) {
					return
				}
				let index;
				this.data.find((e,i)=>{
					if(e.Id == this.currentRow.Id){
						index = i
						return true
					}
				})
				this.data.splice(index,1)
				this.$refs.table.resetHighlight()
				this.currentRow = null
				this.currentRowDetail = []
				this.getamount()
				
			},
			// 新增明细
			detailAdd(){
				// this.NAV_TO('./details',this.data,true)
				this.NAV_TO('./details')
			},

			// 乘法函数
			accMul(arg1, arg2) {
				let m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString()
				try {
					m += s1.split('.')[1].length
				} catch (e) {}
				try {
					m += s2.split('.')[1].length
				} catch (e) {}
				return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
			},
			// 加法函数
			accAdd(arg1, arg2) {
				let r1, r2, m
				try {
					r1 = arg1.toString().split('.')[1].length
				} catch (e) {
					r1 = 0
				}

				try {
					r2 = arg2.toString().split('.')[1].length
				} catch (e) {
					r2 = 0
				}

				m = Math.pow(10, Math.max(r1, r2))
				return (arg1 * m + arg2 * m) / m
			},

			// 点击 「编辑」、「重置」、「保存」、「删除」 按钮 
			async action(type) {
				switch (type) {
					case 'edit':
						this.edit = true
						break

					case 'reset':
						this.current = this.COPY(this.origin)
						this.edit = false
						break

					case 'save':
						const verifyResult = this.verifyForm()
						if (verifyResult.length > 0) {
							this.CONFIRM('表单验证失败', verifyResult.join('\n'))
							return
						}

						if (!(await this.CONFIRM('提交确认', '确定要提交本页表单内容吗？', true))) {
							return
						}

						this.LOADING('正在提交...')
						const postData = await this.getPostData(this.id)

						// // 处理列表数据
						let strEntity = JSON.parse(postData.strEntity)
						for (let s of this.data) {
							s.TotalAmount = Number(s.TotalAmount);
							s.TotalAmount = Number(s.TotalAmount)
						}
						let DetailList = this.data.map(e=>{
							return {
								purchaseid:e.purchaseid
							}
						})
						postData.DetailList = JSON.stringify(DetailList)
						// 赋值部门和人员数据
						let userInfo = this.GET_GLOBAL('loginUser');
						let obj = this.dataSource.Purchase_Travel.DepartmentId.find(e => e.value == this.origin
							.Purchase_Travel.DepartmentId)
						strEntity.deptname = obj ? obj.text : ''
						strEntity.creatorname = userInfo.realName
						// 格式化数据
						strEntity.Approvalamount = Number(strEntity.Approvalamount)
						strEntity.Totalamount = Number(strEntity.Totalamount)

						postData.strEntity = JSON.stringify(strEntity)
						// console.log(postData,JSON.parse(postData.strEntity))
						this.HTTP_POST('learun/adms/purchasetravelapply/save', postData, '表单提交保存失败').then(success => {
							this.HIDE_LOADING()
							if (!success) {
								return
							}

							this.EMIT('LogisticsapplyManagement-Purchase_Travel-list-change')
							this.NAV_BACK()
							this.TOAST('提交保存成功')
						})
						break

					case 'delete':
						if (!(await this.CONFIRM('删除项目', '确定要删除本项吗？', true))) {
							return
						}

						this.LOADING('提交删除中...')
						this.HTTP_POST('learun/adms/purchasetravelapply/delete', this.id, '删除失败').then(success => {
							this.HIDE_LOADING()
							if (!success) {
								return
							}

							this.EMIT('LogisticsapplyManagement-Purchase_Travel-list-change')
							this.NAV_BACK()
							this.this.TOAST('删除成功', 'success')
						})
						break

					default:
						break
				}
			},

			// 获取表单值 
			getValue(path) {
				return get(this.current, path)
			},

			// 设置表单值 
			setValue(path, val) {
				set(this.current, path, val)
			},
		}
	}
</script>