qrcode-app/pages/apply/qrcodeMake.vue

<template>
	<!-- 二维码生成页面 -->
	<view class="content">
		<view class="container">
			<view class="form-sub">
				<u-form :model="model" ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
					<view style="position: relative;">
						<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
					</view>
					<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">参数信息</view>
					<u-form-item label="生成方式" prop="DEPARTMENT_NAME" borderBottom ref="item1">
						<u-radio-group v-model="model.createType" placement="row" @change="groupChange">
							<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in listRadioType"
								:key="index" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item v-if="model.createType==null||model.createType==20" label="班组名称" prop="DEPARTMENT_NAME"
						borderBottom ref="item1" @click="handleShowSheet({title: '班组名称',name:'DEPARTMENT_NAME'})">
						<u--input disabled v-model="model.DEPARTMENT_NAME" border="none" suffixIcon="arrow-right"
							customStyle="margin:0px;display:flex;padding:3px 9px"
							suffixIconStyle="font-size:12px"></u--input>
					</u-form-item>
					<u-form-item v-else label="区域名称" prop="AREA_NAME" borderBottom ref="item1"
						@click="handleShowSheet({title: '区域名称',name:'AREA_NAME'})">
						<u--input disabled v-model="model.AREA_NAME" border="none" suffixIcon="arrow-right"
							customStyle="margin:0px;display:flex;padding:3px 9px"
							suffixIconStyle="font-size:12px"></u--input>
					</u-form-item>
					<u-form-item label="岗位名称" v-if="model.createType==null||model.createType==20" prop="POST_NAME"
						borderBottom ref="item1" @click="handleShowSheet({title: '岗位名称',name:'POST_NAME'})">
						<u--input disabled v-model="model.POST_NAME" border="none" suffixIcon="arrow-right"
							customStyle="margin:0px;display:flex;padding:3px 9px"
							suffixIconStyle="font-size:12px"></u--input>
					</u-form-item>
					<u-form-item label="链接(Url)" prop="url" borderBottom @click="showSex = true;" ref="item1">
						<u--input v-model="model.Url" disabled disabledColor="#ffffff" placeholder="链接(Url)"
							border="none" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
					<u-form-item label="说明" prop="url" borderBottom v-if="model.discrib.length>2" ref="item1">
						<u--input v-model="model.discrib" disabled border="none" disabledColor="#ffffff"></u--input>
					</u-form-item>

					<u-form-item style="margin-bottom: 30px;">
						<u-list key="qb">
							<u-list-item v-for=" item  in model.listQrCode">
								<u--input v-model="item.TITle" style="text-align: center;" disabled border="none"
									customStyle="margin:0px;display:flex;padding:3px 9px"
									suffixIconStyle="font-size:12px"></u--input>
								<image :src="item.qrCode" mode="widthFix" class="qr-code"></image>
							</u-list-item>
						</u-list>
					</u-form-item>
				</u-form>
				<view style="display: flex;flex-direction: row;" class="bottom-button">
					<u-button type="primary" @click="generateQRCode()" color="#3d4b70"
						style="margin-left: 5px;">生成</u-button>
				</view>

				<query-selector :show="selectorInfo.showPopup" :defaultChecked="selectorInfo.defaultChecked"
					:title="selectorInfo.title" :lists="selectorInfo.dataLists" @search="handleSearch"
					@select="handleSelected" @close="selectorInfo.showPopup=false" :total="selectorInfo.totalCount" />
			</view>
		</view>

	</view>
</template>

<script>
	import QRCode from 'qrcode';

	import {
		WorkerScheduling
	} from '../../services/apply'
	import {
		DepartmentOrderPaged,
		UserPostOrderPaged,
		DepartmentPostEntities,
		AreaEntities
	} from '../../services/common'
	import {
		initFilter,
		extendRule
	} from '../../utils/common'

	import config from '../../config/common'

	export default {
		data() {
			return {
				qrCodeSrc: '',
				OrgId: '',
				model: {
					discrib: '',
					createType: null,
					OrgId: '',
					DEPARTMENT_ID: '',
					POST_ID: '',
					Nav_Post: {},
					Nav_Department: {},
					AREA_NAME: '',
					AREA_ID: '',
					Nav_Area: {},
					Url: config.qrcode_url,
					listQrCode: [{
						TITLE: '',
						qrCode: ''
					}]
				},
				selectorInfo: {
					showPopup: false,
					totalCount: 0,
					title: '组织名称',
					// itemData: {},
					index: 0,
					dataLists: [],
					defaultText: '',
					defaultValue: '',
					name: '',
					defaultChecked: []
				},

				listRadioType: [{
					name: '区域',
					value: 10
				}, {
					name: '岗位',
					value: 20
				}]
			}
		},
		onLoad(option) {
			// this.model.DEPARTMENT_ID = option.DEPARTMENT_ID // 'B18F95F4-572A-E521-1412-FA8CE50DC98A'
			this.OrgId = option.OrgId // 'B043B28B-BBC3-C452-6052-4FBA1457ABFA'
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async generateQRCode() {
				if (this.model.createType == null)
					return false
				var url = this.model.Url + '?OrgId=' + this.OrgId + '&createType=' + this.model.createType
				this.model.discrib = ''
				if (this.model.createType == 10) {
					//区域  如果没有选择区域 全部生成
					//如果有选择区域 生成单个
					if (this.model.AREA_ID && this.model.AREA_ID.length > 2) {
						url += '&AREA_ID=' + this.model.AREA_ID
						const qrCodeData = await QRCode.toDataURL(url);
						this.model.listQrCode = []
						this.model.listQrCode.push({
							TITle: '区域：' + this.model.Nav_Area.NAME,
							qrCode: qrCodeData
						})
					} else {
						//获取所有区域  逐个生成
						const json = initFilter(this.OrgId, null, "NAME", 0, 1);
						json.IgnoreDataRule = true
						json.Limit = 10000
						extendRule(json, "IS_DELETED", 1, false)
						json.Keyword = this.model.AREA_ID
						var listResult = await AreaEntities(json).then(res => {
							// this.selectorInfo.totalCount = res.TotalCount
							if (res != undefined && res.Data.length > 0) {
								return res.Data
							} else {
								uni.showToast({
									title: '未获取到区域！',
									icon: 'none'
								})
							}
						});

						if (listResult && listResult.length > 0) {
							this.model.listQrCode = []
							this.model.discrib = '区域共计：' + listResult.length + '个'
							for (let i = 0; i < listResult.length; i++) {
								var qrCodeData = await QRCode.toDataURL(url + "&AREA_ID=" + listResult[i].ID);
								this.model.listQrCode.push({
									TITle: '区域：' + listResult[i].NAME,
									qrCode: qrCodeData
								})
							}
						}
					}
				} else if (this.model.createType == 20) {
					//岗位
					if (!this.model.DEPARTMENT_ID || this.model.DEPARTMENT_ID.length < 2) {
						uni.showToast({
							title: '请选择班组！',
							icon: 'none'
						})
						return false
					}
					if (this.model.POST_ID && this.model.POST_ID.length > 2) {
						url += '&DEPARTMENT_ID=' + this.model.DEPARTMENT_ID + "&POST_ID=" + this.model.POST_ID
						const qrCodeData = await QRCode.toDataURL(url);
						this.model.listQrCode = []
						this.model.listQrCode.push({
							TITle: '岗位：' + this.model.Nav_Department.NAME + '：' + this.model.Nav_Post.NAME,
							qrCode: qrCodeData
						})
					} else {
						const json = initFilter(this.OrgId, null, "NAME");
						extendRule(json, "STATUS", 1, 1)
						json.IgnoreDataRule = true
						json.Keyword = this.model.DEPARTMENT_ID
						var listResult = await DepartmentPostEntities(json).then(res => {
							// this.selectorInfo.totalCount = res.TotalCount
							if (res != undefined && res.Data.length > 0) {
								return res.Data
							} else {
								uni.showToast({
									title: '该班组没有有效岗位！',
									icon: 'none'
								})
							}
						});

						if (listResult && listResult.length > 0) {
							this.model.listQrCode = []
							this.model.discrib = '区域共计：' + listResult.length + '个'
							for (let i = 0; i < listResult.length; i++) {
								var qrCodeData = await QRCode.toDataURL(url + '&DEPARTMENT_ID=' +
									this.model.DEPARTMENT_ID + "&POST_ID=" + listResult[i].ID);
								this.model.listQrCode.push({
									TITle: this.model.Nav_Department.NAME + "：" + listResult[i].NAME,
									qrCode: qrCodeData
								})
							}
						}
					}
				}
			},
			closePicker() {
				this.comPickerInfo = {
					showSheet: false,
					columns: [],
					title: '',
					name: '',
					formIndex: undefined
				}
			},
			groupChange(rv) {
				this.model.createType = rv

				this.model.Nav_Post = {}
				this.model.Nav_Department = {}
				this.model.Nav_Area = {}
				this.model.discrib = ''
				this.model.DEPARTMENT_NAME = ''
				this.model.AREA_NAME = ''
				this.model.POST_NAME = ''
				this.model.DEPARTMENT_ID = ''
				this.model.POST_ID = ''
				this.model.AREA_ID = ''
			},
			//显示组件
			handleChange() {
				this.selectorInfo.showPopup = true
				this.selectorInfo.title = '班组名称'
				this.handleSearch()
			},

			//数据加载
			handleSearch(val, pageIndex) {
				var p = {
					name: this.selectorInfo.name,
					title: this.selectorInfo.title,
					val: val,
					pageIndex: pageIndex
				}
				this.handleShowSheet(p)
			},

			async handleShowSheet(p) {
				const json = initFilter(this.OrgId, null, "NAME", 0, (p.pageIndex ?? 1));
				json.IgnoreDataRule = true
				json.Limit = 20
				if (p.val) {
					extendRule(json, "NAME", 9, p.val)
				}
				let dataSelect = []
				if (p.name == 'DEPARTMENT_NAME') {
					extendRule(json, "ENABLE_STATUS", 1, 0)
					extendRule(json, "DEPARTMENT_TYPE", 1, 2)
					dataSelect = await DepartmentOrderPaged(json).then(res => {
						this.selectorInfo.totalCount = res.TotalCount
						if (res != undefined && res.Data.length > 0) {
							for (let i = 0; i < res.Data.length; i++) {
								res.Data[i].name = res.Data[i].NAME
								res.Data[i].code = res.Data[i].CODE
							}
						}
						return res.Data
					})
				} else if (p.name == 'POST_NAME') {
					extendRule(json, "STATUS", 1, 1)
					if (!this.model.DEPARTMENT_ID || this.model.DEPARTMENT_ID.length < 2) {
						uni.showToast({
							title: '请选择班组！',
							icon: 'none'
						})
						return false
					}

					json.Keyword = this.model.DEPARTMENT_ID
					dataSelect = await DepartmentPostEntities(json).then(res => {
						this.selectorInfo.totalCount = res.TotalCount
						if (res != undefined && res.Data.length > 0) {
							for (let i = 0; i < res.Data.length; i++) {
								res.Data[i].name = res.Data[i].NAME
								res.Data[i].code = res.Data[i].CODE
							}
						} else {
							uni.showToast({
								title: '该班组没有有效岗位！',
								icon: 'none'
							})
						}
						return res.Data
					})
				} else if (p.name == 'AREA_NAME') {
					extendRule(json, "IS_DELETED", 1, false)
					dataSelect = await AreaEntities(json).then(res => {
						this.selectorInfo.totalCount = res.TotalCount
						if (res != undefined && res.Data.length > 0) {
							for (let i = 0; i < res.Data.length; i++) {
								res.Data[i].name = res.Data[i].NAME
								res.Data[i].code = res.Data[i].CODE
							}
						}
						return res.Data
					})
				}


				if (dataSelect.length) {
					this.selectorInfo = {
						totalCount: this.selectorInfo.totalCount,
						showPopup: true,
						title: p.title,
						name: p.name,
						dataLists: dataSelect,
					}
				} else {
					// 暂无数据
				}
			},
			handleSelected(e) {
				this.selectorInfo.showPopup = false
				if (this.selectorInfo.name == 'DEPARTMENT_NAME') {
					this.model.DEPARTMENT_NAME = e.NAME
					this.model.DEPARTMENT_ID = e.ID
					this.model.Nav_Department = e
					this.model.POST_ID = ''
					this.model.Nav_Post = {}
					this.model.listQrCode = []
				} else if (this.selectorInfo.name == 'POST_NAME') {
					this.model.POST_NAME = e.NAME
					this.model.POST_ID = e.ID
					this.model.Nav_Post = e
				} else if (this.selectorInfo.name == 'AREA_NAME') {
					this.model.AREA_NAME = e.NAME
					this.model.AREA_ID = e.ID
					this.model.Nav_Area = e
					this.model.listQrCode = []
				}
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f4f7ff;
		width: 100%;
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 50px); // 非APP平台下生效
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh); // APP平台下生效
		/* #endif */
	}

	.container {
		padding: 20px 16px 10px 16px;
	}

	.form-sub {
		/* margin: 20px 16px 10px 16px; */
		/* border: 1px solid #EBEEF5; */
		padding: 20px 30px 10px 30px;
		/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
		background-color: #ffffff;
		border-radius: 10px;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-textarea {
		padding: 9px 9px 25px 9px;
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm-thr>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-cell__title-text {
		font-size: 14px;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 16px;
		box-sizing: border-box;
		background: #f4f7ff;
		z-index: 999;
	}
</style>