454 lines
14 KiB
Vue
454 lines
14 KiB
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> |