7 changed files with 361546 additions and 4 deletions
File diff suppressed because it is too large
@ -0,0 +1,271 @@ |
|||
<script lang='ts' setup> |
|||
import { RegionColumns } from 'v-region' |
|||
import type { RegionValues } from 'v-region' |
|||
import { AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts' |
|||
import { FormList } from '@/api/DesignForm/types' |
|||
|
|||
import areaObj from '@/widget/region/data.json' |
|||
|
|||
import { |
|||
constFormProps, |
|||
} from '@/api/DesignForm/utils' |
|||
import { ref } from 'vue' |
|||
|
|||
// 定义数据类型 |
|||
type RegionData = { |
|||
code: string; |
|||
name: string; |
|||
province: string; |
|||
city: number | string; |
|||
area: number | string; |
|||
town: number | string; |
|||
}[]; |
|||
|
|||
// 类型断言 |
|||
const provincesData = areaObj as unknown as RegionData; |
|||
|
|||
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 control = computed(() => { |
|||
return props.data.control || {} |
|||
// return props.data |
|||
}) |
|||
const level = props.data.control.locationLevel |
|||
// 控制编辑模式下是否可用 |
|||
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 region = ref<RegionValues>({ |
|||
province: "110000", |
|||
city: "110000", |
|||
area: "110107" |
|||
}) */ |
|||
const region = ref<RegionValues>({ |
|||
province: undefined, |
|||
city: undefined, |
|||
area: undefined |
|||
}) |
|||
const locDetail = ref('') |
|||
|
|||
const cityFlag = computed(() => { |
|||
switch (level) { |
|||
case "省级": |
|||
return false; |
|||
case "市级": |
|||
return true; |
|||
case "区县级": |
|||
return true; |
|||
case "详细地址": |
|||
return true; |
|||
default: |
|||
return true; |
|||
} |
|||
}) |
|||
const areaFlag = computed(() => { |
|||
switch (level) { |
|||
case "省级": |
|||
return true; |
|||
case "市级": |
|||
return false; |
|||
case "区县级": |
|||
return true; |
|||
case "详细地址": |
|||
return true; |
|||
default: |
|||
return true; |
|||
} |
|||
}) |
|||
|
|||
const detailFlag = computed(() => { |
|||
switch (level) { |
|||
case "省级": |
|||
return false; |
|||
case "市级": |
|||
return false; |
|||
case "区县级": |
|||
return false; |
|||
case "详细地址": |
|||
return true; |
|||
default: |
|||
return true; |
|||
} |
|||
}) |
|||
|
|||
const addressBox = ref(false) |
|||
|
|||
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 value = computed({ |
|||
get: () => { |
|||
return props.modelValue |
|||
}, |
|||
set: (newVal: any) => { |
|||
console.log(newVal) |
|||
emits('update:modelValue', newVal) |
|||
}, |
|||
}); |
|||
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) |
|||
} |
|||
} |
|||
//打开地址选择弹窗 |
|||
const openAddress = () => { |
|||
|
|||
addressBox.value = true |
|||
} |
|||
|
|||
//关闭地址选择弹窗 |
|||
const addressBoxClose = () => { |
|||
addressBox.value = false |
|||
} |
|||
//确定选择地址 |
|||
const submitAddress = () => { |
|||
let str = "" |
|||
if(valueProv.value.length>0){ |
|||
str = str+valueProv.value |
|||
if(valueCity.value.length>0){ |
|||
str = str+" - "+valueCity.value |
|||
if(valueArea.value.length>0){ |
|||
str = str+" - "+valueArea.value |
|||
if(locDetail.value.length>0){ |
|||
str = str+" - "+locDetail.value |
|||
}else{ |
|||
|
|||
} |
|||
}else{ |
|||
|
|||
} |
|||
}else{ |
|||
|
|||
} |
|||
}else{ |
|||
|
|||
} |
|||
|
|||
value.value = str |
|||
addressBoxClose() |
|||
} |
|||
|
|||
function getAreaName(code: string): string { |
|||
const region = provincesData.find(item => item.code === code); |
|||
return region ? region.name : ""; |
|||
} |
|||
|
|||
|
|||
const valueProv = computed(() => { |
|||
if (region.value.province && region.value.province.length > 0) { |
|||
return getAreaName(region.value.province) |
|||
} else { |
|||
return ""; |
|||
} |
|||
|
|||
}) |
|||
|
|||
const valueCity = computed(() => { |
|||
if (region.value.city && region.value.city.length > 0) { |
|||
return getAreaName(region.value.city) |
|||
} else { |
|||
return ""; |
|||
} |
|||
|
|||
}) |
|||
|
|||
const valueArea = computed(() => { |
|||
if (region.value.area && region.value.area.length > 0) { |
|||
return getAreaName(region.value.area) |
|||
} else { |
|||
return ""; |
|||
} |
|||
|
|||
}) |
|||
|
|||
</script> |
|||
<template> |
|||
<el-input 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="700px" :append-to-body="true" :draggable="true" |
|||
:before-close="addressBoxClose"> |
|||
<span class="region-container" style="padding-left: 12px;font-size:medium;color: blue;"> |
|||
{{ valueProv }} {{ valueCity }} {{ valueArea }} |
|||
</span> |
|||
|
|||
<RegionColumns v-model="region" class="region-container" :city="cityFlag" :area="areaFlag" /> |
|||
<el-input v-if="detailFlag" v-model="locDetail" class="region-container1" rows="2" type="textarea" |
|||
placeholder="请输入详细地址" /> |
|||
|
|||
<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> |
|||
.region-container { |
|||
margin-top: 10px; |
|||
margin-left: 50px; |
|||
width: calc(80%); |
|||
} |
|||
|
|||
.region-container1 { |
|||
margin-top: 40px; |
|||
margin-left: 0px; |
|||
width: calc(70%); |
|||
margin-bottom: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue