Browse Source

完成链接,地址,国家/地区,编码,地图相关组件开发

v4
超级管理员 2 years ago
parent
commit
9019140c75
  1. 3
      index.html
  2. 2
      package.json
  3. 40
      src/components/DesignForm/assembly/index.ts
  4. 5
      src/components/DesignForm/public/form/formGroup.vue
  5. 121
      src/views/sysworkflow/codepage/page.vue
  6. 66
      src/views/sysworkflow/codepage/pagemap.vue
  7. 268
      src/widget/baidumap/index.vue
  8. 151
      src/widget/baidumap/pickmap.vue
  9. 8
      src/widget/index.ts
  10. 10
      src/widget/number/index.vue
  11. 197
      src/widget/org/index.vue
  12. 8492
      src/widget/orgcitys/Citys.json
  13. 320
      src/widget/orgcitys/index.vue
  14. 1
      src/widget/orgcitys/pca.json
  15. 185516
      src/widget/orgcitys/pcas.json
  16. 1
      src/widget/orgcitys/provinceCitys.json
  17. 1
      src/widget/orgcitys/provinceCitysAreas.json
  18. 1
      src/widget/orgcitys/provinces.json
  19. 1
      src/widget/orgcitys/provincesCityAreasStreets.json
  20. 180
      src/widget/urllink/index.vue

3
index.html

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="数通智联化工云平台" />
<meta name="keywords" content="数通智联化工云平台" />
<link rel="stylesheet" href="./static/iconfont/iconfont.css">
@ -18,6 +18,7 @@
<script type="module" src="/static/plugins/ace/ext-language_tools.js"></script>
<script src="/static/plugins/tinymce/tinymce.min.js?v=6.1.2"></script>
<script src="/static/plugins/echarts.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF"></script>
</body>
</html>

2
package.json

@ -53,6 +53,7 @@
"font-awesome": "^4.7.0",
"js-beautify": "^1.14.8",
"js-md5": "^0.7.3",
"mapv-three": "^1.0.18",
"md5": "^2.3.0",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
@ -63,6 +64,7 @@
"ts-md5": "^1.3.1",
"uuid": "^9.0.1",
"vue": "^3.3.1",
"vue-baidu-map-3x": "^1.0.35",
"vue-i18n": "9.2.2",
"vue-router": "^4.2.0",
"vuedraggable": "^4.1.0",

40
src/components/DesignForm/assembly/index.ts

@ -204,13 +204,49 @@ const selectOption: any = [
type: 'serialNumber',
label: '编码',
icon: 'number',
iconFont: 'fa-sort-numeric-asc',
iconFont: 'fa-list-ol',
control: {
},
config: {
automatic:false
}
}
},
{
type: 'urllink',
label: '链接',
icon: 'link',
iconFont: 'fa-link',
control: {
},
config: {}
},
{
type: 'organization',
label: '联系地址',
icon: 'marker',
iconFont: 'fa-map-marker',
control: {
},
config: {}
},
{
type: 'baidumap',
label: '地图',
icon: 'map',
iconFont: 'fa-map-o',
control: {
},
config: {}
},
{
type: 'orgCentent',
label: '行政组织',
icon: 'sliders',
iconFont: 'fa-sliders',
control: {
},
config: {}
}
]
},
{

5
src/components/DesignForm/public/form/formGroup.vue

@ -426,7 +426,10 @@ onMounted(()=>{
</div>
</template>
<OrgCentent v-else-if="element.type === 'orgCentent'" :data="element" />
<BaiduMap v-else-if="element.type === 'baidumap'" :data="element" />
<OrgCitys v-else-if="element.type === 'organization'" :data="element" />
<UrlLink v-else-if="element.type === 'urllink'" :data="element" />
<SerialNumber v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" />
<!--其他组件-->
<FormItem v-else :data="element" />

121
src/views/sysworkflow/codepage/page.vue

@ -1,116 +1,19 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-01 16:16:54
@ 时间: 2023-12-07 16:49:57
@ 备注:
-->
<script lang='ts' setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
json2string,
objToStringify,
string2json,
stringToObj
} from '@/utils/DesignForm/form'
import { useLayoutStore } from '@/store/DesignForm/layout'
import { getRequest } from '@/api/DesignForm'
import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import '@/assets/iconfont/iconfont.css'
import 'element-plus/dist/index.css'
import {
constGetControlByName,
constSetFormOptions,
constFormBtnEvent,
constControlChange,
constFormProps,
appendOrRemoveStyle
} from '@/api/DesignForm/utils'
const layoutStore = useLayoutStore()
const router = useRouter()
const formEl = ref()
const state = reactive({
formData: {
list: [],
form: {},
config: {}
},
dict: {},
formId: 25,
id: 1,
loading: true
})
const formType = computed(() => {
// id
if (true) {
return 2
} else {
return 1
}
})
const getFormData = () => {
if (!state.formId) {
ElMessage.error('非法操作.')
return false
}
const params = {
id: state.formId
}
getRequest('designById', params)
.then((res: any) => {
const result = res.data
state.formData = stringToObj(result.data)
state.dict = string2json(result.dict)
formEl.value.getData({ formId: 9, id: 1})
console.log("res----------->", formEl.value)
nextTick(() => {
state.loading = false
})
})
.catch((res: any) => {
state.loading = false
ElMessage.error(res.message || '非法操作..')
})
}
const beforeSubmit = (params: any) => {
params.formId = state.formId
params.id = 1
return params
}
const afterSubmit = (type: string) => {
if (type === 'success') {
router.go(-1)
}
}
onMounted(() => {
getFormData()
})
const changeKeyVal = (key:any,val:any,type:any,attribute:any) => {
}
</script>
<template>
<el-card v-loading="state.loading" shadow="never" style="min-height: 300px">
<ak-form
ref="formEl"
:form-data="state.formData"
:type="formType"
:dict="state.dict"
request-url="getFormContent"
add-url="saveFormContent"
edit-url="editFormContent"
:before-submit="beforeSubmit"
:after-submit="afterSubmit"
:change-key-val="changeKeyVal"
/>
</el-card>
<baidu-map class="map" ak="ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF" v="3.0" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
</baidu-map>
</template>
<script lang='ts' setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script>
<style lang='scss' scoped>
</style>
.map {
width: 100%;
height: calc(100vh - 90px);
}
</style>

66
src/views/sysworkflow/codepage/pagemap.vue

@ -0,0 +1,66 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-01 16:16:54
@ 备注:
-->
<script lang='ts' setup>
const drawingBaiduMap = ref<any>(null)
const longitude= ref<number>(117.14272945140574)
const latitude= ref<number>(35.91808471435389)
// script
const loadJScript = () => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF';
script.onload = () => {
init()
}
document.body.appendChild(script);
}
//
function init() {
const map = new window.BMap.Map('baiduMapCanvas'); // Map
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}
map.addControl(new BMap.NavigationControl(opts)); //
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());
const point = new BMap.Point(longitude.value,latitude.value); //
map.centerAndZoom(point, 16);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var geoc = new BMap.Geocoder({extensions_street: true,extensions_streetNumber: true,extensions_town: true});
map.enableScrollWheelZoom(); //
map.addEventListener('click', function (e) {
var pt = e.point;
geoc.getLocation(pt, function(rs){
console.log("经纬度--->",pt,rs)
// var addComp = rs.addressComponents;
// alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
map.clearOverlays()
let marker = new BMap.Marker(new BMap.Point(rs.point.lng,rs.point.lat));
map.addOverlay(marker);
});
// console.log("--->",e)
// // alert('' + e.point.lng + ',' + e.point.lat);
// let pointLngLat = new BMap.Point(e.point.lng,e.point.lat);
// let geocoder = new BMap.Geocoder();
// geocoder.getLocation(pointLngLat,function(geocoderResult){
// //alert(geocoderResult.address);
// console.log("--->",geocoderResult)
// });
})
}
onMounted(()=>{
loadJScript()
})
</script>
<template>
<div id="baiduMapCanvas" ref="myBaiduMap" class="maptype"></div>
</template>
<style lang='scss' scoped>
.maptype{
width: 100%;
height: calc(100vh - 90px);
}
</style>

268
src/widget/baidumap/index.vue

@ -0,0 +1,268 @@
<!--
@ 作者: 秦东
@ 时间: 2023-12-07 13:25:29
@ 备注: 百度地图
-->
<template>
<div>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules"
:label="getLabel(data.item as FormItem)"
>
<input v-model="value" type="hidden" />
<input v-model="lngLat" type="hidden" />
<el-input v-model="address" >
<template #append>
<el-button class="fa fa-map-marker" @click="openPickMap" />
</template>
</el-input>
<div :id="mapId" ref="myBaiduMapView" class="smallMapView"></div>
</el-form-item>
<PickMap v-if="mapShow" v-model:mapshow="mapShow" :address="address" :lnglat="lngLat" @updatemapinfo="updateMapInfo" />
</div>
</template>
<script lang='ts' setup>
import {
constControlChange,
constFormProps,
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
import PickMap from './pickmap.vue'
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
modelValue?: any //
tProp?: string // form-itemprop
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
let mapId = "baiduMapView"+ Math.ceil(Math.random());
const mapShow = ref(false)
const address = ref<string>(); //
const lngLat = ref<string>(); //
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
return formProps.value.type
})
const config = computed(() => {
return props.data.config || {}
})
const changeEvent = inject(constControlChange, '') as any
const value = computed({
get() {
if (props.tProp) {
//
return props.modelValue
} else {
return formProps.value.model[props.data.name]
}
},
set(newVal: any) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
}
})
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? ':' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
// item
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
// customRulesrules
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
// 使provide
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return //
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
//
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
//
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// push
let message: any = { message: item.message }
if (!item.message) {
// 使validatormessage使 callback(new Error('x'));
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
const drawingBaiduMap = ref<any>(null)
const mapObject = ref<any>()
const longitude= ref<number>(117.14272945140574)
const latitude= ref<number>(35.91808471435389)
const loadJScript = () => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF';
script.onload = () => {
mapInit(mapObject)
}
document.body.appendChild(script);
}
//
const mapInit = (maps:any) => {
const map = new window.BMap.Map(mapId); // Map
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}
map.addControl(new BMap.NavigationControl(opts)); //
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(); //
const point = new BMap.Point(longitude.value,latitude.value); //
map.centerAndZoom(point, 16);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
watch(value,(val:any)=>{
console.log("加载地址--4-->",value.value,props.data)
if(value.value != null && value.value != "") {
let adresAry = value.value.split('|*@*|')
if(adresAry.length >0){
address.value = adresAry[0]
if(adresAry.length >=1){
lngLat.value = adresAry[adresAry.length-1]
}
}
console.log("加载地址--2-->",value.value,adresAry,address.value,lngLat.value)
if(lngLat.value != null && lngLat.value != ""){
let lnogLate = lngLat.value.split(",");
if(lnogLate.length >= 2){
longitude.value = lnogLate[0]
latitude.value = lnogLate[lnogLate.length - 1]
}
}
console.log("加载地址--31-->",value.value,adresAry,address.value,lngLat.value,longitude.value,latitude.value)
mapInit(mapObject)
}
})
watch(()=>address.value,(val:string)=>{
if(lngLat.value != null && lngLat.value != ""){
value.value = address.value+"|*@*|"+lngLat.value
}else{
value.value = address.value
}
})
onMounted(()=>{
console.log("加载地址--1-->",value.value,props.data)
if(value.value != null && value.value != "") {
let adresAry = value.value.split('|*@*|')
if(adresAry.length >0){
address.value = adresAry[0]
if(adresAry.length >=1){
lngLat.value = adresAry[adresAry.length-1]
}
}
console.log("加载地址--2-->",value.value,adresAry,address.value,lngLat.value)
if(lngLat.value != null && lngLat.value != ""){
let lnogLate = lnglat.value.split(",");
if(lnogLate.length >= 2){
longitude.value = lnogLate[0]
latitude.value = lnogLate[lnogLate.length - 1]
}
}
console.log("加载地址--3-->",value.value,adresAry,address.value,lngLat.value,longitude.value,latitude.value)
}
loadJScript()
})
const openPickMap = () => {
mapShow.value = true
}
//
const updateMapInfo = (ads:string,lng:any,lat:any) =>{
address.value = ads
lngLat.value = lng+","+lat
value.value = ads+"|*@*|"+lng+","+lat
longitude.value = lng
latitude.value = lat
mapInit(mapObject)
}
</script>
<style lang='scss' scoped>
.smallMapView{
width:100%;
height:400px;
}
</style>

151
src/widget/baidumap/pickmap.vue

@ -0,0 +1,151 @@
<!--
@ 作者: 秦东
@ 时间: 2023-12-08 10:14:09
@ 备注: 地图选择页面
-->
<template>
<el-dialog
v-model="isShow"
width="700"
title="标注地址"
append-to-body
:before-close="closePickMap"
>
<el-row :gutter="10">
<el-col :span="7">
<el-input v-model="addressinfo" placeholder="地址">
<template #prepend>地址</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="lonVal" placeholder="经度">
<template #prepend>经度</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="latVal" placeholder="纬度">
<template #prepend>纬度</template>
</el-input>
</el-col>
<el-col :span="3">
<el-button type="primary" @click="pickMapCont">确定</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div id="pickMapView" :ref="mapId" class="openMapView"></div>
</el-col>
</el-row>
</el-dialog>
</template>
<script lang='ts' setup>
const props = defineProps({
mapshow:{
type:Boolean,
default:false
},
address:{
type:String,
default:"山东恒信高科能源有限公司生产A区"
},
lnglat:{
type:String,
default:"117.14272945140574,35.91808471435389"
},
lon:{
type:Number,
default:117.14272945140574
},
lat:{
type:Number,
default:35.91808471435389
}
});
const emits = defineEmits(["update:mapshow","updatemapinfo"]);
const isShow = computed({
get: () => props.mapshow,
set: (val) => {
emits("update:mapshow", val);
},
});
const addressinfo = ref<number>(props.address)
const lonVal = ref<number>(props.lon)
const latVal = ref<number>(props.lat)
//
const closePickMap = () =>{
emits("update:mapshow", false);
addressinfo.value = props.address
lonVal.value = props.lon
latVal.value = props.lat
}
let mapId = "pickMapView"+ Math.ceil(Math.random());
const loadJScript = () => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF';
script.onload = () => {
mapInit()
}
document.body.appendChild(script);
}
//
const mapInit = () => {
const map = new window.BMap.Map("pickMapView"); // Map
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}
map.addControl(new BMap.NavigationControl(opts)); //
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(); //
const point = new BMap.Point(lonVal.value,latVal.value); //
map.centerAndZoom(point, 16);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var geoc = new BMap.Geocoder({extensions_street: true,extensions_streetNumber: true,extensions_town: true}); //
//
map.addEventListener('click', function (e) {
var pt = e.point;
lonVal.value = pt.lng
latVal.value = pt.lat
geoc.getLocation(pt, function(rs){
console.log("经纬度--->",pt,rs)
map.clearOverlays()
let markerNew = new BMap.Marker(new BMap.Point(rs.point.lng,rs.point.lat));
map.addOverlay(markerNew);
if(rs.content.poi_desc != "" && rs.content.poi_desc != null){
addressinfo.value= rs.addressComponents.province + rs.addressComponents.city + rs.addressComponents.district + rs.addressComponents.town + rs.content.poi_desc
}else{
addressinfo.value= rs.addressComponents.province + rs.addressComponents.city + rs.addressComponents.district + rs.addressComponents.town
}
})
});
}
watch(() => props.mapshow,(val:boolean)=>{
if(val){
// mapInit()
}
})
onMounted(() =>{
if(props.lnglat != null && props.lnglat != ""){
let lnogLate = props.lnglat.split(",");
if(lnogLate.length >= 2){
lonVal.value = lnogLate[0]
latVal.value = lnogLate[lnogLate.length - 1]
}
}
loadJScript()
})
//
const pickMapCont = () => {
emits("updatemapinfo", addressinfo.value,lonVal.value,latVal.value);
closePickMap();
}
</script>
<style lang='scss' scoped>
.openMapView{
width:100%;
height:500px;
}
</style>

8
src/widget/index.ts

@ -2,7 +2,15 @@
*
*/
import serialNumber from './number/index.vue'
import urlLink from './urllink/index.vue'
import orgCitys from './orgcitys/index.vue'
import baiduMap from './baidumap/index.vue'
import orgCentent from './org/index.vue'
export default (app: any) => {
app.component('SerialNumber', serialNumber)
app.component('UrlLink', urlLink)
app.component('OrgCitys', orgCitys)
app.component('BaiduMap', baiduMap)
app.component('OrgCentent', orgCentent)
}

10
src/widget/number/index.vue

@ -5,14 +5,10 @@
-->
<script lang='ts' setup>
import {
formatNumber,
objectToArray,
constControlChange,
constSetFormOptions,
constFormProps,
constGetControlByName
} from '@/api/DesignForm/utils'
import { uploadUrl,getRequest } from '@/api/DesignForm'
import validate from '@/api/DesignForm/validate'
import { useRoute } from 'vue-router'
@ -48,12 +44,6 @@ const control = computed(() => {
const options = ref(props.data.options)
const changeEvent = inject(constControlChange, '') as any
// const numVal = ref(props.modelValue)
// watch(() => props.modelValue,() => {
// numVal.value = props.modelValue
// })
watch(() => props.tablekey,() => {
console.log("编码组件1---》",props.tablekey)
})

197
src/widget/org/index.vue

@ -0,0 +1,197 @@
<!--
@ 作者: 秦东
@ 时间: 2023-12-08 08:04:57
@ 备注: 行政组织
-->
<script lang='ts' setup>
import { orgInfo } from '@/api/hr/org/type'
import { getOrgTreeList } from '@/api/hr/org/index'
import {
constControlChange,
constFormProps,
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
modelValue?: any //
tProp?: string // form-itemprop
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
const orgTreeList = ref<orgInfo[]>(); //
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
return formProps.value.type
})
const config = computed(() => {
return props.data.config || {}
})
const changeEvent = inject(constControlChange, '') as any
const value = computed({
get() {
if (props.tProp) {
//
let zhiVal = props.modelValue
if(zhiVal != null && zhiVal != "") {
zhiVal=zhiVal*1
}
return zhiVal
} else {
let zhiVal = formProps.value.model[props.data.name]
if(zhiVal != null && zhiVal != "") {
zhiVal=zhiVal*1
}
return zhiVal
}
},
set(newVal: any) {
if(newVal != null && newVal != "") {
newVal=newVal*1
}
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal*1)
}
})
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? ':' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
// item
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
// customRulesrules
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
// 使provide
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return //
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
//
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
//
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// push
let message: any = { message: item.message }
if (!item.message) {
// 使validatormessage使 callback(new Error('x'));
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
const orgTreeLoading = ref(false); //
/**1: , 2: ;3:&;4567891011退1213退14',
`company` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '入职公司',
* 获取行政组织数据
*/
const orgTreeProps ={
children: 'child',
label: 'name',
} //
function haveOrgTreeInfo(){
orgTreeLoading.value = true;
getOrgTreeList({})
.then(({ data })=>{
orgTreeList.value = data
}).finally(()=>{orgTreeLoading.value = false;})
}
//
onMounted(() => {
console.log("加载叔叔");
haveOrgTreeInfo();
});
</script>
<template>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<el-tree-select
v-model="value"
v-loading="orgTreeLoading"
node-key="id"
:props="orgTreeProps"
:data="orgTreeList"
check-strictly
:render-after-expand="false"
/>
</el-form-item>
</template>
<style lang='scss' scoped>
</style>

8492
src/widget/orgcitys/Citys.json

File diff suppressed because it is too large

320
src/widget/orgcitys/index.vue

@ -0,0 +1,320 @@
<!--
@ 作者: 秦东
@ 时间: 2023-12-05 09:40:32
@ 备注: 链接地址组件
-->
<script lang='ts' setup>
import { ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus'
import {
constControlChange,
constFormProps,
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
import areaObj from './pca.json';
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
numrun?: number
modelValue?: any //
tProp?: string // form-itemprop
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
return formProps.value.type
})
const control = computed(() => {
return props.data.control || {}
// return props.data
})
const config = computed(() => {
return props.data.config || {}
})
const changeEvent = inject(constControlChange, '') as any
const value = computed({
get() {
if (props.tProp) {
//
return props.modelValue
} else {
return formProps.value.model[props.data.name]
}
},
set(newVal: any) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
}
})
//
const editDisabled = computed(() => {
if (type.value === 3) {
return true //
}
if (type.value === 1 && config.value.addDisabled) {
return true
}
if (type.value === 2 && config.value.editDisabled) {
return true //
}
return control.value.disabled
})
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? ':' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
// item
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
// customRulesrules
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
// 使provide
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return //
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
//
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
//
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// push
let message: any = { message: item.message }
if (!item.message) {
// 使validatormessage使 callback(new Error('x'));
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
const addressBox = ref(false)
//
const provinceArr = Object.keys(areaObj)
const province = ref(provinceArr[0])
//
const cityArr = computed(() => {
return Object.keys(areaObj[province.value])
})
const city = ref(cityArr.value[0])
//
watch(province, (newVal) => {
city.value = Object.keys(areaObj[newVal])[0];
if(value.value != "" && value.value != null){
let ads = value.value.split(" - ")
if(ads.length >=2){
city.value = ads[1]
}else{
city.value = Object.keys(areaObj[newVal])[0];
}
}else{
city.value = Object.keys(areaObj[newVal])[0];
}
});
//
const areaArr = computed(() => {
return areaObj[province.value][city.value]
})
const area = ref(areaArr.value[0])
//
watch(city, (newVal) => {
if(value.value != "" && value.value != null){
let ads = value.value.split(" - ")
if(ads.length >=3){
area.value = ads[2]
}else{
area.value = areaObj[province.value][newVal][0]
}
}else{
area.value = areaObj[province.value][newVal][0]
}
})
const fullAddress = ref<string>("")
//
const openAddress = () =>{
if(value.value != "" && value.value != null){
let ads = value.value.split(" - ")
console.log(ads)
if(ads.length >= 4){
province.value = ads[0]
fullAddress.value = ads[3]
}else if(ads.length >0){
province.value = ads[0]
}
}else{
province.value = provinceArr[0]
city.value = cityArr.value[0]
area.value = areaArr.value[0]
fullAddress.value = ""
}
addressBox.value=true
}
//
const addressBoxClose = () => {
addressBox.value=false
initAddressData()
}
//
const submitAddress = () => {
console.log(province.value,city.value,area.value,fullAddress.value)
if(province.value == "" || province.value == null){
ElMessage.error('未选择省份!')
return
}
if(city.value == "" || city.value == null){
ElMessage.error('未选择市/区!')
return
}
if(area.value == "" || area.value == null){
ElMessage.error('未选择县/市!')
return
}
if(fullAddress.value == "" || fullAddress.value == null){
ElMessage.error('未填写详细信息!')
return
}
value.value = province.value + " - " + city.value + " - " + area.value + " - " + fullAddress.value
addressBoxClose()
}
const initAddressData = () =>{
province.value = provinceArr[0]
fullAddress.value = ""
}
</script>
<template>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<el-input v-model="value" :disabled="editDisabled" clearable placeholder="请选择地址" @click="openAddress" />
</el-form-item>
<el-dialog
v-model="addressBox"
title="填写地址"
width="600px"
:before-close="addressBoxClose"
>
<el-row>
<el-col :span="3">所在地区</el-col>
<el-col :span="21">
<el-row :gutter="20">
<el-col :span="8">
<el-select v-model="province" class="m-2" placeholder="省">
<el-option v-for="item in provinceArr" :key="item" :label="item" :value="item" />
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="city" class="m-2" placeholder="市">
<el-option v-for="item in cityArr" :key="item" :label="item" :value="item" />
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="area" class="m-2" placeholder="区/县">
<el-option v-for="item in areaArr" :key="item" :label="item" :value="item" />
</el-select>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="3">详细地址</el-col>
<el-col :span="21">
<el-input
v-model="fullAddress"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入详细地址"
style="width:100%"
/>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="addressBoxClose">取消</el-button>
<el-button type="primary" @click="submitAddress">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<style lang='scss' scoped>
</style>

1
src/widget/orgcitys/pca.json

File diff suppressed because one or more lines are too long

185516
src/widget/orgcitys/pcas.json

File diff suppressed because it is too large

1
src/widget/orgcitys/provinceCitys.json

File diff suppressed because one or more lines are too long

1
src/widget/orgcitys/provinceCitysAreas.json

File diff suppressed because one or more lines are too long

1
src/widget/orgcitys/provinces.json

@ -0,0 +1 @@
[{"code":"11","name":"北京市"},{"code":"12","name":"天津市"},{"code":"13","name":"河北省"},{"code":"14","name":"山西省"},{"code":"15","name":"内蒙古自治区"},{"code":"21","name":"辽宁省"},{"code":"22","name":"吉林省"},{"code":"23","name":"黑龙江省"},{"code":"31","name":"上海市"},{"code":"32","name":"江苏省"},{"code":"33","name":"浙江省"},{"code":"34","name":"安徽省"},{"code":"35","name":"福建省"},{"code":"36","name":"江西省"},{"code":"37","name":"山东省"},{"code":"41","name":"河南省"},{"code":"42","name":"湖北省"},{"code":"43","name":"湖南省"},{"code":"44","name":"广东省"},{"code":"45","name":"广西壮族自治区"},{"code":"46","name":"海南省"},{"code":"50","name":"重庆市"},{"code":"51","name":"四川省"},{"code":"52","name":"贵州省"},{"code":"53","name":"云南省"},{"code":"54","name":"西藏自治区"},{"code":"61","name":"陕西省"},{"code":"62","name":"甘肃省"},{"code":"63","name":"青海省"},{"code":"64","name":"宁夏回族自治区"},{"code":"65","name":"新疆维吾尔自治区"}]

1
src/widget/orgcitys/provincesCityAreasStreets.json

File diff suppressed because one or more lines are too long

180
src/widget/urllink/index.vue

@ -0,0 +1,180 @@
<!--
@ 作者: 秦东
@ 时间: 2023-12-06 14:15:53
@ 备注: 链接
-->
<script lang='ts' setup>
import {
constControlChange,
constFormProps,
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
numrun?: number
modelValue?: any //
tProp?: string // form-itemprop
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
return formProps.value.type
})
const config = computed(() => {
return props.data.config || {}
})
const changeEvent = inject(constControlChange, '') as any
const value = computed({
get() {
if (props.tProp) {
//
return props.modelValue
} else {
return formProps.value.model[props.data.name]
}
},
set(newVal: any) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
}
})
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? ':' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
// item
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
// customRulesrules
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
// 使provide
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return //
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
//
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
//
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// push
let message: any = { message: item.message }
if (!item.message) {
// 使validatormessage使 callback(new Error('x'));
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
const urlVal = ref("http://")
//访URL
const openUrl = () => {
let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i;
console.log("编码组件-url-1111-》",value.value,patt.test(value.value))
if(patt.test(value.value)){
// console.log("-url--",value)
window.open(value.value,'_blank')
}else{
// console.log("-url-1-",value)
window.open(urlVal.value+value.value,'_blank')
}
// router.push({path:value})
}
onMounted(() => {
// console.log("-url--",props.data)
})
</script>
<template>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<el-input v-model="value">
<template #prepend>
<el-select v-model="urlVal" style="width: 115px">
<el-option label="http://" value="http://" />
<el-option label="https://" value="https://" />
</el-select>
</template>
<template #append><el-button type="warning" @click="openUrl">访问</el-button></template>
</el-input>
</el-form-item>
</template>
<style lang='scss' scoped>
</style>
Loading…
Cancel
Save