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