添加报销事项功能

hybrid/html/a.html

@@ -14,20 +14,59 @@
 				--van-nav-bar-title-text-color: rgb(255, 255, 255);
 				--van-nav-bar-icon-color: rgb(255, 255, 255);
 			}
-			:root#app｛
-			   background: #4298fd0d;
-			｝
-		::v-deep.fm-form-item｛
-			     magin-bottom:10px .!important;
-			｝
 
+			.blank_adopzrdd {
+				display: flex;
+				align-items: center;
+
+				>span {
+					display: inline-block;
+					width: 80px;
+				}
+
+				margin-bottom: 10px;
+			}
+
+			:root#app｛ background: #4298fd0d;
+			｝::v-deep.fm-form-item｛ magin-bottom:10px . !important;
+			｝
 		</style>
 		<div id="app">
 
-			<van-nav-bar height='100rpx;margin-top:100rpx' @click-left="onClickLeft" style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);"
-				:title="title" left-arrow :safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
-			<fm-generate-vant-form style='height: 81vh !important;overflow: auto;background: #a3a6ad1c;margin-top:44px' v-if='isFlag' :data="jsonData"
-				:value="form.valueJson" ref="generateForm" :edit='isEdit'>
+			<van-nav-bar height='100rpx;margin-top:100rpx' @click-left="onClickLeft"
+				style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);" :title="title" left-arrow
+				:safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
+			<fm-generate-vant-form style='height: 81vh !important;overflow: auto;background: #a3a6ad1c;margin-top:44px'
+				v-if='isFlag' :data="jsonData" :value="form.valueJson" ref="generateForm" :edit='isEdit'>
+
+				<template v-slot:blank_adopzrdd="scope">
+					<div style="width: 100%;">
+						<van-button type="primary" size="small" @click="addNewRow('blank_adopzrdd')"
+							style="margin-bottom: 10px">添加报销事项</van-button>
+
+
+						<div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index" style="width: 100%;">
+							<div class="blank_adopzrdd">
+								<span>{{ index + 1 }}报销事项：</span>
+								<van-field    rows="1" v-model="scope.model.blank_adopzrdd[index].remark" type="textarea" autosize
+									style="width: calc(100% - 80px)"></van-field>
+							</div>
+							<div class="blank_adopzrdd">
+								<span>
+									<van-icon @click="delNewRow('blank_adopzrdd', index)" name="delete"
+										style="color: #f56c6c;"></van-icon>
+
+									金额：</span>
+								<van-field v-model="scope.model.blank_adopzrdd[index].price" type="number"
+									style="width: calc(100% - 80px)"
+									@change="changePrice(scope.model.blank_adopzrdd)"></van-field>
+							</div>
+
+						</div>
+
+					</div>
+				</template>
+
 			</fm-generate-vant-form>
 			<div>
 				<!-- <van-form>
@@ -105,7 +144,7 @@
 									if (item.options.isDefaultLoginUser) {
 										/* this.form.valueJson[item.model] = [1,1765997946953797633]; */
 										this.form.valueJson[item.model] = params.userInfo.groupIdList;
-									
+
 									}
 
 								}
@@ -141,6 +180,38 @@
 
 				},
 				methods: {
+
+
+					async addNewRow(key) {
+						console.log(key);
+						let data = await this.$refs.generateForm.getData(false);
+						data[key].push({
+							price: '',
+							remark: ''
+						});
+						this.$refs.generateForm.setData({
+							key: data[key]
+						});
+					},
+					async delNewRow(key, index) {
+						let data = await this.$refs.generateForm.getData(false);
+						data[key] = data[key].filter((item, index1) => index1 != index);
+						this.$refs.generateForm.setData({
+							[key]: data[key]
+						});
+						this.changePrice(data[key]);
+
+					},
+					changePrice(data) {
+						let num = 0;
+						data.forEach((item) => {
+							num += Number(item.price);
+						});
+						this.$refs.generateForm.setData({
+							input_jd9ouzyh: num
+						});
+					},
+
 					getQueryParams(queryName) {
 						const urlSearchParams = new URLSearchParams(window.location.search);
 						const query = urlSearchParams.get(queryName);
@@ -148,10 +219,10 @@
 					},
 					generateFormValid(validate = true) {
 						return this.$refs.generateForm.getData(validate).then((data) => { //清空content
-							for(key in data){
-								if(key.includes('fileupload')){
-									data[key].forEach(item=>{
-										item['content']=''
+							for (key in data) {
+								if (key.includes('fileupload')) {
+									data[key].forEach(item => {
+										item['content'] = ''
 									})
 								}
 							}
@@ -159,7 +230,7 @@
 						});
 					},
 					async handleAudit(status) {
-					
+
 						this.form.valueJson = await this.generateFormValid();
 						console.log(this.form.valueJson)
 						this.form.processType = '1';

hybrid/html/c.html

@@ -14,21 +14,57 @@
 				--van-nav-bar-title-text-color: rgb(255, 255, 255);
 				--van-nav-bar-icon-color: rgb(255, 255, 255);
 			}
-			.van-nav-bar--fixed{
+.blank_adopzrdd {
+				display: flex;
+				align-items: center;
+
+				>span {
+					display: inline-block;
+					width: 80px;
+				}
+
+				margin-bottom: 10px;
+			}
+			.van-nav-bar--fixed {
 				top: 44px;
 			}
 		</style>
 		<div id="app">
 
-			<van-nav-bar height='100rpx' @click-left="onClickLeft" style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);"
-				:title="title" left-arrow :safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
-			<fm-generate-vant-form style='height: 75vh !important;overflow: auto;margin-top:44px' v-if='isFlag' :data="jsonData" :value="form.valueJson" ref="generateForm" :edit='false'>
+			<van-nav-bar height='100rpx' @click-left="onClickLeft"
+				style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);" :title="title" left-arrow
+				:safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
+			<fm-generate-vant-form style='height: 75vh !important;overflow: auto;margin-top:44px' v-if='isFlag'
+				:data="jsonData" :value="form.valueJson" ref="generateForm" :edit='false'>
+				<template v-slot:blank_adopzrdd="scope">
+					<div style="width: 100%;">
+
+
+
+						<div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index" style="width: 100%;">
+							<div class="blank_adopzrdd">
+								<span>{{ index + 1 }}报销事项：</span>
+								<van-field rows="1" v-model="scope.model.blank_adopzrdd[index].remark" type="textarea"
+									autosize style="width: calc(100% - 80px)"></van-field>
+							</div>
+							<div class="blank_adopzrdd">
+								<span>
+
+									金额：</span>
+								<van-field v-model="scope.model.blank_adopzrdd[index].price" type="number"
+									style="width: calc(100% - 80px)"></van-field>
+							</div>
+
+						</div>
+
+					</div>
+				</template>
 			</fm-generate-vant-form>
 			<div v-if="type!='view'" style='position: fixed; bottom: 0;background: #f9fafb;width:100%;height:20%'>
 				<van-form label-width='30px'>
 					<van-cell-group inset>
-						<van-field style="background: #f9fafb;" type="textarea" v-model="form.reason" label="意见" placeholder="" rows="2" :autosize='{maxHeight: 50}'
-							show-word-limit />
+						<van-field style="background: #f9fafb;" type="textarea" v-model="form.reason" label="意见"
+							placeholder="" rows="2" :autosize='{maxHeight: 50}' show-word-limit />
 					</van-cell-group>
 				</van-form>
 				<div
@@ -48,7 +84,6 @@
 		<script src="./resource/uni.webview.js"></script>
 		<script src="./vue-form-making/form-making-v3.umd.js"></script>
 		<script>
-			
 			let EnvObj = {}
 			uni.getEnv(function(res) {
 				EnvObj = res;
@@ -57,9 +92,9 @@
 			Vue.createApp({
 				data() {
 					return {
-						isFlag:false,
-						isEdit:true,
-						type:'',
+						isFlag: false,
+						isEdit: true,
+						type: '',
 						jsonData: {},
 						editData: {},
 						form: {},
@@ -72,8 +107,8 @@
 					this.headers = this.getQueryParams('headers');
 					let params = this.getQueryParams('params');
 					this.APIUrl = this.headers.serverInfo || 'http://192.168.1.105:18086'
-					this.title = params.type =='view'?'查看':'审核'
-					this.type = params.type 
+					this.title = params.type == 'view' ? '查看' : '审核'
+					this.type = params.type
 					axios({
 						method: 'get',
 						url: this.APIUrl + `/bpm/process-instance/get?id=${params.processInstanceId}`,
@@ -84,25 +119,29 @@
 							this.form = res.data.data
 							this.form.submitId = params.id
 							this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
-							this.jsonData.list.forEach(item=>{
-								item.options.headers = [{key:'Authorization',value:this.headers.Authorization}]
-								if(item.type=="deptAndUserCascader"){
+							this.jsonData.list.forEach(item => {
+								item.options.headers = [{
+									key: 'Authorization',
+									value: this.headers.Authorization
+								}]
+								if (item.type == "deptAndUserCascader") {
 									item.type = 'cascader'
 								}
-								if(item.type=="deptCascader"){
+								if (item.type == "deptCascader") {
 									item.type = 'cascader'
 								}
-								if(item.type=="userSelect"){
+								if (item.type == "userSelect") {
 									item.type = 'select'
 								}
 								if (item.type == "imgupload") {
-									this.form.valueJson[item.model].length && this.form.valueJson[item.model].forEach(
-									item => {
-										//item.objectUrl = this.APIUrl +'/kd-aiot' + item.storePath
-										item.objectUrl = item.url 
-									
-									})
-									
+									this.form.valueJson[item.model].length && this.form.valueJson[item
+										.model].forEach(
+										item => {
+											//item.objectUrl = this.APIUrl +'/kd-aiot' + item.storePath
+											item.objectUrl = item.url
+
+										})
+
 								}
 							})
 							this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
@@ -111,7 +150,7 @@
 								}
 								item.url = item.url && item.url.replace('/api', this.APIUrl)
 							})
-							this.isFlag = true	
+							this.isFlag = true
 						}
 					});
 				},