kd-aiot
/
aiot-app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="./resource/vantIndex.css" />
		<link rel="stylesheet" href="./vue-form-making/index.css">
	</head>
	<body>
		<style>
			:root:root {
				--van-nav-bar-background: rgb(21, 122, 44);
				--van-nav-bar-title-text-color: rgb(255, 255, 255);
				--van-nav-bar-icon-color: rgb(255, 255, 255);
			}

			.blank_adopzrdd {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}

			.blank_adopzrdd>span {
				display: inline-block;
				width: 80px;
			}

			:root#app {
				background: #4298fd0d;
			}

			::v-deep.fm-form-item {
				margin-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' @on-upload-local="handleUploadLocal">

				<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>
				<template v-slot:manage_workorder="scope">
					<van-field v-model="scope.model.manage_workorder.code" readonly @click="addWorkOrder()"></van-field>
				</template>

			</fm-generate-vant-form>
			<div>

				<div v-if='isEdit'
					style="display: flex;justify-content: space-between; padding: 30px 30px; position: fixed; bottom: 0; width: 100%; height: 80px;">
					<van-button style="width:48%" type="primary" :loading="loading" @click="handleAudit(1)">提交
					</van-button>
					<van-button style="width:48%" type="danger" :loading="loading" @click="onClickLeft">取消
					</van-button>
				</div>


			</div>
		</div>
		<script src="./resource/vue.global.prod.js"></script>
		<script src="./resource/vant.min.js"></script>
		<script src="./resource/axios.min.js"></script>
		<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;
				console.log('当前环境：' + JSON.stringify(res));
			});

			Vue.createApp({
				data() {
					return {
						loading: false,
						isFlag: false,
						isEdit: true,
						title: '',
						jsonData: {},
						editData: {},
						form: {},
						headers: {},
						APIUrl: '',
						type: 'add',
					}
				},
				created() {
					let _this = this
					window.x_sun = (e) => {
						_this.setSalesServiceWork(JSON.parse(e))

					}
					// 接收文件选择后的回调
					window.x_selectFiles = (e) => {
						let data = JSON.parse(e)
						console.log('收到选中的文件:', data)
						// 更新表单数据
						if (data.field && _this.$refs.generateForm) {
							// fileupload 字段需要格式化为数组对象
							// let fileData = (data.files || []).map(id => ({
							// 	objectName: id,
							// 	content: ''
							// }))
							_this.$refs.generateForm.setData({
								[data.field]: data.files
							})
						}
					}


					this.headers = this.getQueryParams('headers');
					let params = this.getQueryParams('params');
					this.isEdit = params.isEdit || true
					this.type = params.type || 'add'
					this.APIUrl = this.headers.serverInfo || 'http://192.168.1.105:18086'
					axios({
						method: 'get',
						url: this.APIUrl + `/flowable/bpmcustomform/getById/${params.id}`,
						headers: this.headers,
					}).then((res) => {
						if (res.data.code != '-1') {
							this.form = res.data.data
							this.form.formId = res.data.data.id
							this.form.id = ''
							this.form.valueJson = {}
							this.title = this.form.name
							this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
							this.jsonData.list.forEach(item => {
								item.options.headers = [{
									key: 'Authorization',
									value: this.headers.Authorization
								}]
								item.options.action = item.options.action && item.options.action.replace(
									'/api', this.APIUrl)
								if (item.type == "deptAndUserCascader") {
									item.type = 'cascader'
								}
								if (item.type == "deptCascader") {
									item.type = 'cascader'
									/* item.isPathValue = false */
									if (item.options.isDefaultLoginUser) {
										/* this.form.valueJson[item.model] = [1,1765997946953797633]; */
										this.form.valueJson[item.model] = params.userInfo.groupIdList;

									}

								}
								if (item.type == "userSelect") {
									item.type = 'select'
									if (item.options.isDefaultLoginUser) {
										this.form.valueJson[item.model] = params.userInfo.userId;
									}

								}
							})

							this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
								item.headers = {
									Authorization: this.headers.Authorization
								}
								item.url = item.url && item.url.replace('/api', this.APIUrl)
							})
							this.isFlag = true

							this.$nextTick(() => {

								if (params.manage_workorder) {
									this.setSalesServiceWork(params.manage_workorder)

								}

							})


						}
					});

					// axios({
					// 	method: 'get',
					// 	url: this.APIUrl + `/bpm/task/list-by-process-instance-id?processInstanceId=${params.id}`,
					// 	headers: this.headers,
					// }).then((res) => {
					// 	console.log(res)
					// 	if (res.data.code != '-1') {

					// 	}
					// });


				},
				methods: {
					async handleUploadLocal (model) {
						console.log('上传本地文件按钮被点击，字段模型：', model, this.type)
						let data = await this.$refs.generateForm.getData(false);
						// 在这里处理上传本地文件的逻辑
						uni.postMessage({
							data: {
								type: 'selectFiles',
								field: model,
								files: data[model],
								isEdit: 'add'
							}
						});
					},
					addWorkOrder() {
						uni.postMessage({
							data: {
								type: 'selectWork',
							}
						});
					},

					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
						});
					},
					setSalesServiceWork(data) {
						this.$refs.generateForm.setData({
							manage_workorder: data
						});
						this.$refs.generateForm.setRules('manage_workorder', [{
							required: false,
							message: '必须填写'
						}])
						setTimeout(() => {
							this.$refs.generateForm.validate(['manage_workorder'])
						})

					},

					getQueryParams(queryName) {
						const urlSearchParams = new URLSearchParams(window.location.search);
						const query = urlSearchParams.get(queryName);
						console.log(query, 'query')
						return JSON.parse(query);
					},
					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'] = ''
									})
								}
							}
							return data;
						});
					},
					async handleAudit(status) {
						this.loading = true;
						try {
							this.form.valueJson = await this.generateFormValid();
						} catch (error) {
							this.loading = false;
							return;
						}
						console.log(this.form.valueJson)
						this.form.processType = '1';
						let API = this.APIUrl + '/bpm/process-instance/create'
						axios({
							method: 'post',
							url: API,
							headers: this.headers,
							data: {
								...this.form,
							}
						}).then((res) => {
							this.loading = false;
							if (res.data.code != '-1') {
								vant.showNotify({
									type: 'success',
									message: `提交成功！`,
									duration: 1000,
								});
								setTimeout(() => {
									this.onClickLeft()
								}, 1000)
							} else {
								vant.showNotify({
									type: 'danger',
									message: `提交失败！${res.data.message}`,
									duration: 1000,
								});
							}
						}).catch((err) => {
							vant.showNotify({
									type: 'danger',
									message: `提交失败！${err.message}`,
									duration: 1000,
								});
							this.loading = false;
						});
					},
					onClickLeft() {
						uni.navigateBack({
							delta: 1
						});
					}
				}

			}).use(vant).use(FormMakingV3).mount('#app')
		</script>
	</body>
</html>