28 changed files with 195616 additions and 129 deletions
@ -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> |
|||
@ -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> |
|||
@ -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-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
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 |
|||
}) |
|||
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|||
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) { |
|||
// 当使用validator校验时，如果存在message字段则不能使用 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> |
|||
@ -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> |
|||
@ -0,0 +1,16 @@ |
|||
/** |
|||
* 自定义控件仓库 |
|||
*/ |
|||
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) |
|||
} |
|||
@ -0,0 +1,199 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-12-05 09:40:32 |
|||
@ 备注: 链接地址组件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { |
|||
constControlChange, |
|||
constFormProps, |
|||
constGetControlByName |
|||
} from '@/api/DesignForm/utils' |
|||
import validate from '@/api/DesignForm/validate' |
|||
|
|||
import { useRoute } from 'vue-router' |
|||
|
|||
import { FormItem, FormList } from '@/api/DesignForm/types' |
|||
import { gainNumber } from '@/api/DesignForm/requestapi' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', numVal: any): void |
|||
}>() |
|||
const route = useRoute() |
|||
const formProps = inject(constFormProps, {}) as any |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
const config = computed(() => { |
|||
return props.data.config || {} |
|||
}) |
|||
const control = computed(() => { |
|||
|
|||
return props.data.control |
|||
// return props.data |
|||
}) |
|||
const options = ref(props.data.options) |
|||
const changeEvent = inject(constControlChange, '') as any |
|||
|
|||
watch(() => props.tablekey,() => { |
|||
console.log("编码组件1---》",props.tablekey) |
|||
}) |
|||
const editDisabled = ref(false); //是否手动编辑 |
|||
|
|||
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 |
|||
}) |
|||
} |
|||
onMounted(() => { |
|||
console.log("编码组件---》",props.data,props.data.control.config) |
|||
if(props.numrun == 1){ |
|||
getNumber() |
|||
} |
|||
}) |
|||
|
|||
//获取编号 |
|||
const getNumber = () => { |
|||
let sendData = { |
|||
table:props.tablekey, |
|||
automatic:props.data.config.automatic, |
|||
customRules:props.data.config.customRules |
|||
} |
|||
editDisabled.value = props.data.config.automatic |
|||
gainNumber(sendData) |
|||
.then((data:any) =>{ |
|||
console.log("编码组件2---》",data,sendData) |
|||
value.value = data.data |
|||
}) |
|||
} |
|||
// 当通用修改属性功能添加新字段时，数组更新但toRefs没更新 |
|||
const getControlByName = inject(constGetControlByName) as any |
|||
const sourceFunKey = computed(() => { |
|||
const iReg = new RegExp('(?<=\\${)(.*?)(?=})', 'g') |
|||
//const iReg = new RegExp('\\${.*?}', 'g') // 结果会包含开头和结尾=>${name} |
|||
const apiUrl = config.value.optionsFun |
|||
const replace = apiUrl?.match(iReg) |
|||
return replace && replace[0] |
|||
}) |
|||
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 |
|||
}) |
|||
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|||
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) { |
|||
// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示 |
|||
message = {} |
|||
} |
|||
temp.push( |
|||
Object.assign( |
|||
{ |
|||
trigger: item.trigger || 'blur' |
|||
}, |
|||
obj, |
|||
message |
|||
) |
|||
) |
|||
}) |
|||
return temp |
|||
} |
|||
</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" placeholder="请输入编码"> |
|||
<template #prefix>NO.</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -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-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
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 |
|||
}) |
|||
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|||
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) { |
|||
// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示 |
|||
message = {} |
|||
} |
|||
temp.push( |
|||
Object.assign( |
|||
{ |
|||
trigger: item.trigger || 'blur' |
|||
}, |
|||
obj, |
|||
message |
|||
) |
|||
) |
|||
}) |
|||
return temp |
|||
} |
|||
const orgTreeLoading = ref(false); //加载行政组织树 |
|||
/**用工关系（1:临时工 , 2:编外人员 ;3:实习&实习生;4：试用员工；5：待分配；6：待岗；7：临时调入；8：正式员工；9：长期病假；10：停薪留职；11：退休；12：辞职；13：辞退；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> |
|||
File diff suppressed because it is too large
@ -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-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
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 |
|||
}) |
|||
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|||
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) { |
|||
// 当使用validator校验时，如果存在message字段则不能使用 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> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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":"新疆维吾尔自治区"}] |
|||
File diff suppressed because one or more lines are too long
@ -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-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
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 |
|||
}) |
|||
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|||
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) { |
|||
// 当使用validator校验时，如果存在message字段则不能使用 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…
Reference in new issue