yd_qycpfb/jp-mobile/pages/dzf/components/problemHandleItem.vue

<template>
	<view class="problemHandleItem">
<!--		<view class="font-md text-dark font-weight">问题处理</view>-->
		<u--form labelPosition="left" :model="problemHandleData" labelWidth="80">
			<u-form-item label="问题处理：" required prop="dealResult">
				<u-radio-group v-model="problemHandleData.dealResult" placement="column" @change="radioChange">
<!--					<u-radio label="退回修改" name="2" :disabled="onlyFlag" class="mb-2"></u-radio>-->
					<u-radio label="办结" name="3" :disabled="onlyFlag" class="mb-2"></u-radio>
					<u-radio label="反馈大走访活动办"
						v-if="typeName == 'question' && (userInfo.enterpriseAreaFlag || userInfo.enterpriseCadreFlag)" name="4"
						:disabled="onlyFlag"></u-radio>
          <u-radio label="正在办理"
                   v-if="typeName == 'question' && (userInfo.enterpriseAreaFlag || userInfo.enterpriseCadreFlag || userInfo.assignedDeptFlag)" name="10"
                   :disabled="onlyFlag" ></u-radio>
          <u-radio label="难以化解"
                   v-if="typeName == 'question' && (userInfo.enterpriseAreaFlag || userInfo.enterpriseCadreFlag) || userInfo.assignedDeptFlag" name="11"
                   :disabled="onlyFlag"></u-radio>
          <u-radio label="持续跟踪"
                   v-if="typeName == 'question' && (userInfo.enterpriseAreaFlag || userInfo.enterpriseCadreFlag) || userInfo.assignedDeptFlag" name="12"
                   :disabled="onlyFlag"></u-radio>
          <u-radio label="提请会办"
                   v-if="typeName == 'question' && (userInfo.enterpriseAreaFlag || userInfo.enterpriseCadreFlag) || userInfo.assignedDeptFlag" name="13"
                   :disabled="onlyFlag"></u-radio>
					<u-radio label="交办" v-if="typeName == 'question' && userInfo.ydGxjLeaderFlag" name="5" :disabled="onlyFlag"
						class="mt-2">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<view class="error-tip" v-if="!problemHandleData.dealResult && errorTip">
				请选择处理结果
			</view>
			<u-form-item label="交办单位：" required prop="assignedDeptName" v-if="problemHandleData.dealResult == '5'"
				@click="unitDataTap">
				<u--input v-model="problemHandleData.assignedDeptName" readonly :border="onlyFlag ? 'none' : 'surround'"
					:placeholder="!onlyFlag ? '请选择交办单位' : ''">
				</u--input>
			</u-form-item>
			<view class="error-tip"
				v-if="problemHandleData.dealResult == '5' && !problemHandleData.assignedDeptName && errorTip">
				请选择交办单位
			</view>
			<u-form-item label="处理建议：" required prop="dealSuggestion">
				<u--textarea v-model="problemHandleData.dealSuggestion" :disabled="onlyFlag"
					:border="onlyFlag ? 'none' : 'surround'" :placeholder="!onlyFlag ? '请填写处理建议' : ''">
				</u--textarea>
			</u-form-item>
			<view class="error-tip" v-if="!problemHandleData.dealSuggestion && errorTip">
				请填写处理建议
			</view>
		</u--form>
		<!-- 交办单位 -->
		<u-picker :show="showUnit" :columns="unitColumn" keyName="fullName" title="请选择交办单位" @cancel="showMonth = false"
			@confirm="unitSelect">
		</u-picker>
	</view>
</template>

<script>
	export default {
		props: {
			problemType: {
				type: String,
				default: ''
			},
			problemHandleData: {
				type: Object,
				default: () => {}
			},
			userInfo: {
				type: Object,
				default: () => {}
			},
			readOnlyFlag: {
				type: Boolean,
				default: false
			},
			showErrorTip: {
				type: Boolean,
				default: false
			},
			column: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				showUnit: false
			}
		},
		computed: {
			onlyFlag() {
				return this.readOnlyFlag
			},
			errorTip() {
				return this.showErrorTip
			},
			typeName() {
				return this.problemType
			},
			unitColumn() {
				return this.column
			}
		},
		methods: {
			// 处理结果点击确认
			radioChange() {
				if (this.problemHandleData.dealResult != '5') {
					this.problemHandleData.assignedDeptName = ''
					this.problemHandleData.assignedDept = ''
				}
			},
			// 交办单位--->点击
			unitDataTap() {
				if (this.readOnlyFlag) return
				this.showUnit = true;
				uni.hideKeyboard()
			},
			// 交办单位选择确认操作
			unitSelect({
				value
			}) {
				this.problemHandleData.assignedDeptName = value[0].fullName
				this.problemHandleData.assignedDept = value[0].enCode
				this.showUnit = false
			},
			// 判断是否有必填项为填写
			isRequired() {
				const query = uni.createSelectorQuery().in(this);
				let dataLength = 0
				query.selectAll('.error-tip').boundingClientRect(data => {
					dataLength = data.length
					if (dataLength) {
						uni.$u.toast('请完善必填项内容')
					}
				}).exec();
				return dataLength
			}
		}
	}
</script>

<style lang="scss" scoped>
	.error-tip {
		font-size: 12px;
		color: #f56c6c;
		margin-left: 160rpx;
	}
</style>