yd_qycpfb/jp-mobile/pages/question/questionAdd.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '问题诉求情况'">
			<block slot="backText">返回</block>
			<block slot="content">问题诉求情况</block>
		</cu-custom>
		<!-- <cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '问题诉求情况'">
			<block slot="backText">返回</block>
			<block slot="content">问题诉求情况</block>
		</cu-custom>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '问题诉求情况'">
			<block slot="backText">返回</block>
			<block slot="content">问题诉求情况</block>
		</cu-custom> -->
		
		<form @submit="formSubmit" class="cu-list menu">
			
			<view class="titlebg2">
				<view class="titlet1" ></view>
				<view class="titlet2" >企业信息</view>								
			</view>
			
			
			<view class="textbg">
				<view class="text12">
					 企业名称
				</view>
				<view class="text22">
					 {{inputForm.name}}
				</view>				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 属地
				</view>
				<view class="text22">
					 {{inputForm.des1}}
				</view>				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 企业负责人
				</view>
				<view class="text22">
					 {{inputForm.lxr}}
				</view>				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 负责人号码
				</view>
				<view class="text22">
					 11{{inputForm.phone}}
				</view>				
			</view>
			
			<view style="height: 30rpx;background-color: white;"></view>
			
			<view class="titlebg2" style="margin-top:10rpx ;">
				<view class="titlet1" ></view>
				<view class="titlet2" >挂钩干部</view>								
			</view>
			
			<view class="textbg">
				<view class="text12">
					 姓名
				</view>
				<view class="text22">
					 {{inputForm.bz5}}
				</view>				
			</view>
			
			<view style="height: 30rpx;background-color: white;"></view>
			
			<view class="titlebg2" style="margin-top:10rpx ;">
				<view class="titlet1" ></view>
				<view class="titlet2" >主要问题诉求</view>								
			</view>
			
			
			<view v-for="(item, index2) in questionList">
				
				<view style="display: flex;background-color: #ffffff;justify-content: space-between; align-items: center;">
					<view class="titlebb">
						问题{{index2+1}}
					</view>
					<icon v-if="index2!=0" @click="del(index2)" type="cancel" style="padding-right: 15rpx;padding-top: 5rpx;padding-left: 100rpx;"></icon>
					<!-- <image s style="height: 10rpx;width: 10rpx;"></image> -->
				</view>
				
				
				<view class="input1">
					<view class="title">
						问题名称
					</view>
					<input v-model="item.qName" placeholder="请填写问题名称" :disabled="ischeck"></input>
				</view>
				
				<view class="cu-form-group margin-top">
					<view class="title">
						问题类型
					</view>					
					<picker class="title2" @change="bindPickerChange($event, index2)" :value="index" :range="parkList">
						<view class="input2">{{item.qType||'请选择问题类型'}}</view>
					</picker>				
				</view>								
				
				<view class="cu-form-group margin-top" v-if="item.t1!=''">
					<view class="title">
						{{item.t1}}
					</view>
					<input style="width: 200rpx;" v-model="item.gaps" :placeholder="item.t1s" :disabled="ischeck"></input>{{item.t1d}}
				</view>

				<view class="cu-form-group margin-top" style="border-bottom: 3px solid #eee;">
					<view class="title">
						问题描述
					</view>
					<textarea v-model="item.des" placeholder="请填写问题描述" :disabled="ischeck"></textarea>
				</view>

			</view>

			<view  style="width: 400rpx;margin-left: 20rpx;">
				<button @click="addp" style="height: 30px;" class="cu-btn block bg-blue margin-tb-sm lg">+增加问题</button>
			</view>
			

			
			<view style="height: 40rpx;"></view>
			<view class="flexC" v-if="!ischeck">
				<button @click="save" class="bt1  block  margin-tb-sm lg">暂存</button>
				<button form-type="submit" class="bt1 cu-btn block bg-blue margin-tb-sm lg">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("@/common/graceChecker.js");
	import revenueListService from '@/api/revenue/revenueListService'
	import loginService from '@/api/auth/loginService.js'
	export default {
		onShow() {
			this.$auth.checkLogin()
		},
		data() {
			return {
				title: '问题诉求情况',
				inputForm: {
					id:'',
					name: '',
					industry: '',
					lxr: '',
					phone: '',
					
					bz1: '',
					bz2: '',
					bz3: '',
					bz4: '',
					bz5: '',
					bz6: '',
					
					des1: '',
					des2: '',
					des3: '',
					des4: '',
					des6: '',			
				},
				t1: '可供产品',
				t1s: '请填写可供产品',
				t2: '可供数量',
				t2s: '请填写可供数量',
				t3: '详细描述',
				t3s: '请填写详细描述',
								
				autoUpload: false,
				picLists: [],
				picUrl: [],
				imageStyles: {
					width: 90,
					height: 90
				},
				parkList: [ "用工人才", "资金需求", "土地厂房", "订单及配套", "政策兑现", "创新及品牌", "审批手续", "水电气供应", "安全环保消防", "其他（需详细说明）"],
				questionList:[{qName:"",qType:"",qTypeindex:"",gaps:"",des:"",t1:"",t1s:""}],
				
				index:0,
				ischeck: false,
			}
		},
		created() {
			//this.getParkList()
		},
		mounted() {
			
		},
		async onLoad(query) {
			
			let data2 = await loginService.queryByUserName()
			console.log(data2.data.name);
			this.inputForm = this.recover(this.inputForm, data2.data)
		
			if (query && query.id) {
				let {data} = await loginService.queryByIdBuild(query.id)
				console.log(data)
				if (data.pic != null) {
					data.pic = data.pic.split(",")
					var list = data.pic
					list.forEach(item => {
						this.picUrl.push({
							'url': item,
							'uuid': item
						})
						this.picLists.push({
							'url': item,
							'uuid': item
						})
					})
				} else {
					data.pic = []
				}
				this.inputForm = this.recover(this.inputForm, data)
			}
		},
		methods: {
			addp(){
				this.questionList.push({qName:"",qType:"",qTypeindex:"",gaps:"",des:"",t1:"",t1s:""})
				
			},
			del(index2){
				this.questionList.splice(index2, 1);
			},
			getParkList() {
				loginService.parkList({
					current: 1,
					size: 1000000,
				}).then(({
					data
				}) => {
					this.parkList = data.records.map((item) => {
						return {
							label: item.parkName,
							value: item.id
						}
					})
					console.log(this.parkList, '=============>')
				}).catch(e => {
					console.log(e)
				})
			},
			
			bindPickerChange: function(e,index2) {
				if(e.detail.value==0){
					this.questionList[index2].t1='缺口数';
					this.questionList[index2].t1s= '请填写缺口数';
					this.questionList[index2].t1d= '人';
					
				}else if(e.detail.value==1){
					this.questionList[index2].t1='缺口数';
					this.questionList[index2].t1s= '请填写缺口数';
					this.questionList[index2].t1d= '万元';

				}else if(e.detail.value==2){
					this.questionList[index2].t1='缺口数';
					this.questionList[index2].t1s= '请填写缺口数';
					this.questionList[index2].t1d= '';

				}else{
					this.questionList[index2].t1='';
					this.questionList[index2].t1s= '';
					this.questionList[index2].t1d= '';
				}					
				
				this.questionList[index2].qTypeindex = e.detail.value;		
				this.questionList[index2].qType=this.parkList[e.detail.value]
				
			},
			
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			deleteFile(e) {
				this.picUrl.splice(e.index, 1)
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				var _this = this
				var i = 0
				upload()

				function upload() {
					if (i >= e.tempFiles.length) {
						return;
					}
					var item = e.tempFiles[i]
					uni.showLoading({
						title: "上传中",
						mask: true
					});
					uni.uploadFile({
						url: '/yd_qycpfb/file/upload?uploadPath=userdir', // 仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData: {
							'fileName': item.name
						},
						header: {
							'token': _this.$auth.getUserToken()
						},
						success: (res) => {
							var data = res.data
							if (typeof data['error'] != "undefined") {
								uni.showToast({
									icon: 'none',
									title: '上传失败，请联系开发！'
								});
								_this.$refs.picFile.clearFiles(_this.picLists.length)
							} else {
								_this.picUrl.push({
									url: data,
									uuid: item.uuid
								})
								i++;
								upload()
							}
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败，请联系开发！'
							});
							_this.$refs.picFile.clearFiles(_this.picLists.length)
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}
			},
			save(){
				
			},
			formSubmit: function(e) {
				
				uni.showLoading()
				this.inputForm.des6 = [];
				this.picUrl.forEach(item => {
					this.inputForm.des6.push(item.url)
				})
				this.inputForm.des6 = this.inputForm.des6.toString();
				
				loginService.productSave(this.inputForm).then(({
					data
				}) => {
					uni.showToast({
						title: "产品供需发布成功！",
						icon: "success"
					});
					uni.navigateTo({
						url: '/pages/product/productList?w=1'
					})
				}).catch((e) => {

				})

				
			},
			checkinput(){
				let cou=0;
				if(this.hasDuplicateQName(this.questionList)){
					
				}
				
				
				//this.questionList:[{qName:"",qType:"",qTypeindex:"",gaps:"",des:"",t1:"",t1s:""}],
				
			},
			hasDuplicateQName(array) {
				const seen = new Set();
				for (const item of array) {
				  if (seen.has(item.qName)) {
					return true; // 找到重复的 qName
				  }
				  seen.add(item.qName);
				}
				return false; // 没有重复的 qName
			}
			
			
		}
	}
</script>
<style>
	/* .file-title) {
	    font-size: 17px !important;
	} */
	input,textarea{
		color: #8799a3;
	}
	.input1{
		background-color: #ffffff;
		padding: 1upx 40upx;
		display: flex;
		align-items: center;
		padding-top: 20upx;
		border-bottom: 1px solid #eee;
	}
	.input1 .title {
		text-align: justify;
		padding-right: 30upx;
		font-size: 30upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
		border: ;
	}
	.title2{
		width: 75%;
		text-align: left;
	}
	.input2 {
		flex: 1;
		font-size: 30upx;
		color: #555;
		padding-right: 20upx;
		width: 500rpx;
	}
	.uni-input{
		
	}
	
	.textbg{
		display: flex;
		background-color: white;
		padding-top: 29rpx;
	}
	.text12{
		width: 200rpx;
		margin-left: 30rpx;
		color: #000000;
		font-size: 29rpx;
	}
		
	.text2{
		flex: 1;
		color: #000000;
		font-size: 30rpx;
		padding-bottom: 2rpx;
	}
	.text22{
		flex: 1;
		color: #666666;
		font-size: 29rpx;
		padding-bottom: 2rpx;
		align-self: flex-end;
	}
	.titlebg2{
		display: flex;
		background-color: white;
		padding-left: 22rpx;
		padding-top: 35rpx;
		padding-bottom: 25rpx;
		margin-bottom: 2rpx;
	}
	.titlet1{
		width: 7rpx;
		margin-top: 7rpx;
		margin-bottom: 7rpx;
		background-color: #2752eb;
		margin-right: 8rpx;
	}
	.titlet2{
		font-weight: 800;
		color: #2752eb;
	}
	
	.titlebb{
		color: #000000;
		font-weight: 800;
		padding-left: 40rpx;
		background-color: #ffffff;
		padding-top: 20rpx;
		
	}
	.flexC{
		display: flex;
	}
	.bt1{
		flex:1;
		margin: 30rpx;
	}
	.bt2{
		flex:1;
		margin: 30rpx;
	}
</style>