11 changed files with 514 additions and 50 deletions
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
@ -0,0 +1,43 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-25 15:01:57 |
|||
@ 备注: 时间控件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string |
|||
disabled?: boolean |
|||
data?:any |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const value = computed({ |
|||
get: () => { |
|||
return props.modelValue |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits('update:modelValue', newVal) |
|||
}, |
|||
}); |
|||
</script> |
|||
<template> |
|||
<el-date-picker |
|||
align="left" |
|||
v-model="value" |
|||
:type="props.data.control.type" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
:teleported="true" |
|||
:placeholder="props.data.control.placeholder" |
|||
:value-format="props.data.valueFormat" |
|||
:format="props.data.control.format" |
|||
/> |
|||
|
|||
</template> |
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -0,0 +1,320 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-25 09:18:33 |
|||
@ 备注: 联系地址 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts' |
|||
import { |
|||
constControlChange, |
|||
constFormProps, |
|||
} from '@/api/DesignForm/utils' |
|||
import validate from '@/api/DesignForm/validate' |
|||
import { FormItem, FormList } from '@/api/DesignForm/types' |
|||
import Tooltips from '@/components/DesignForm/tooltip.vue' |
|||
|
|||
import areaObj from '@/widget/orgcitys/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: () => { |
|||
return props.modelValue |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits('update:modelValue', 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 |
|||
console.log(province.value + " - " + city.value + " - " + area.value + " - " + fullAddress.value) |
|||
console.log(value.value) |
|||
addressBoxClose() |
|||
} |
|||
const initAddressData = () =>{ |
|||
province.value = provinceArr[0] |
|||
fullAddress.value = "" |
|||
} |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
//console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
|
|||
<div v-if="type === 4" class="form-value" v-html="value"></div> |
|||
<el-input v-else v-model="value" :disabled="editDisabled" clearable placeholder="请选择地址" style="width:100%" @click="openAddress" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)" /> |
|||
|
|||
<el-dialog |
|||
v-model="addressBox" |
|||
title="填写地址" |
|||
width="600px" |
|||
:append-to-body="true" |
|||
:draggable="true" |
|||
: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> |
|||
Loading…
Reference in new issue