herenshan112
/
appFormLowcode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

文件,链接

yunpan
liwenxuan 3 months ago
parent
bcff981a25
commit
9a067b3efe
2 changed files with 112 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      src/components/lowCode/assistant/uploadPage.vue
  2. 167
      src/components/lowCode/assistant/urlLink.vue

19
src/components/lowCode/assistant/uploadPage.vue
View File

@ -138,8 +138,9 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
// console.log("uploadSuccess=fileList==>",fileList) // console.log("uploadSuccess=fileList==>",fileList)
} }
</script> </script>
<template>{{types}} <template><!-- {'{types}} -->
<div> <div style="width: 100%;
display: inline;">
<el-upload <el-upload
v-bind="props.control" v-bind="props.control"
:action="uploadUrl" :action="uploadUrl"
@ -162,7 +163,8 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
<el-button type="primary" plain v-if="props.config?.btnText"> <el-button type="primary" plain v-if="props.config?.btnText">
{{ props.config?.btnText }} {{ props.config?.btnText }}
</el-button> </el-button>
<i v-else class="icon-plus"><i class="fa fa-paperclip" ></i></i> <!-- <i v-else class="icon-plus"><i class="fa fa-paperclip" ></i></i> -->
<el-button v-else style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon>上传文件</el-button>
</template> </template>
<template #tip v-if="props.config?.tip"> <template #tip v-if="props.config?.tip">
<div class="el-upload__tip"> <div class="el-upload__tip">
@ -172,6 +174,15 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
</el-upload> </el-upload>
</div> </div>
</template> </template>
<style lang='scss' scoped> <style lang='scss' >
.el-upload-list__item {
border-radius: 4px;
box-sizing: border-box;
color: var(--el-text-color-regular);
font-size: 14px;
margin-bottom: 5px;
position: relative;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
</style> </style>

167
src/components/lowCode/assistant/urlLink.vue
View File

@ -4,105 +4,105 @@
@ 备注: 链接 @ 备注: 链接
--> -->
<script lang='ts' setup> <script lang='ts' setup>
import { import {
constControlChange, constControlChange,
constFormProps constFormProps
} from '@/api/lowCode/utils'; } from '@/api/lowCode/utils';
import { FormList,FormItem } from "@/api/lowCode/form/type" import { FormList, FormItem } from "@/api/lowCode/form/type"
import validate from "@/api/lowCode/form/validate" import validate from "@/api/lowCode/form/validate"
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
data: FormList data: FormList
tablekey: any tablekey: any
numrun?: number numrun?: number
modelValue?: any // 子表和弹性布局时时有传 modelValue?: any // 子表和弹性布局时时有传
tProp?: string // 子表时的form-item的prop值，用于子表校验用 tProp?: string // 子表时的form-item的prop值，用于子表校验用
types?: string types?: string
}>(), }>(),
{} {}
) )
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void (e: 'update:modelValue', numVal: any): void
}>() }>()
const formProps = inject(constFormProps, {}) as any const formProps = inject(constFormProps, {}) as any
const type = computed(() => { const type = computed(() => {
return formProps.value.type return formProps.value.type
}) })
const config = computed(() => { const config = computed(() => {
return props.data.config || {} return props.data.config || {}
}) })
const changeEvent = inject(constControlChange, '') as any const changeEvent = inject(constControlChange, '') as any
const value = computed({ const value = computed({
get() { get() {
if (props.tProp) { if (props.tProp) {
// 表格和弹性布局 // 表格和弹性布局
return props.modelValue return props.modelValue
} else { } else {
return formProps.value.model[props.data.name] return formProps.value.model[props.data.name]
} }
}, },
set(newVal: any) { set(newVal: any) {
if (props.tProp) { if (props.tProp) {
emits('update:modelValue', newVal) emits('update:modelValue', newVal)
} }
updateModel(newVal) updateModel(newVal)
} }
}) })
const updateModel = (val: any) => { const updateModel = (val: any) => {
let controlAttribute = "" let controlAttribute = ""
if(props.data.control){ if (props.data.control) {
if(props.data.control.type){ if (props.data.control.type) {
controlAttribute = props.data.control.type controlAttribute = props.data.control.type
} }
} }
changeEvent && changeEvent &&
changeEvent({ changeEvent({
key: props.data.name, key: props.data.name,
value: val, value: val,
data: props.data, data: props.data,
tProp: props.tProp, tProp: props.tProp,
type: props.data.type, type: props.data.type,
attribute: controlAttribute attribute: controlAttribute
}) })
} }
const getLabel = (ele: FormItem) => { const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? '：' : '' const showColon = formProps.value.showColon ? '：' : ''
if (ele) { if (ele) {
return ele.showLabel ? '' : ele.label + showColon return ele.showLabel ? '' : ele.label + showColon
} else { } else {
return '' return ''
} }
} }
// 返回当前item项的校验规则 // 返回当前item项的校验规则
const itemRules = computed(() => { const itemRules = computed(() => {
let temp let temp
const itemR: any = props.data.item?.rules || [] const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules() const customR = formatCustomRules()
// 如果三个都没有设置，则返回undefined // 如果三个都没有设置，则返回undefined
if (itemR?.length || customR?.length) { if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR] temp = [...customR, ...itemR]
} }
return temp return temp
}) })
// 处理自定义校验规则，将customRules转换后追加到rules里 // 处理自定义校验规则，将customRules转换后追加到rules里
const formatCustomRules = () => { const formatCustomRules = () => {
const rulesReg: any = {} const rulesReg: any = {}
validate && validate &&
validate.forEach(item => { validate.forEach(item => {
rulesReg[item.type] = item.regExp rulesReg[item.type] = item.regExp
}) })
// 获取校验方法 父级使用provide方法注入 // 获取校验方法 父级使用provide方法注入
const temp: any = [] const temp: any = []
props.data.customRules?.forEach((item: any) => { props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') { if (!item.message && item.type !== 'methods') {
return // 方法时允许提示信息为空 return // 方法时允许提示信息为空
} }
@ -116,7 +116,7 @@ const formatCustomRules = () => {
// 方法时 // 方法时
const methods: any = item.methods const methods: any = item.methods
if (methods) { if (methods) {
obj = { validator: inject(methods, {}) } obj = { validator: inject(methods, {}) }
} }
} else if (item.type) { } else if (item.type) {
obj = { pattern: rulesReg[item.type as string] } obj = { pattern: rulesReg[item.type as string] }
@ -136,39 +136,37 @@ const formatCustomRules = () => {
message message
) )
) )
}) })
return temp return temp
} }
const urlVal = ref("http://") const urlVal = ref("http://")
//访问URL //访问URL
const openUrl = () => { const openUrl = () => {
console.log(1)
alert(1)
let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i; let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i;
console.log("编码组件-url-1111-》",value.value,patt.test(value.value)) console.log("编码组件-url-1111-》", value.value, patt.test(value.value))
if(patt.test(value.value)){ if (patt.test(value.value)) {
// console.log("编码组件-url--》",value) // console.log("编码组件-url--》",value)
window.open(value.value,'_blank') window.open(value.value, '_blank')
}else{ } else {
// console.log("编码组件-url-1-》",value) // console.log("编码组件-url-1-》",value)
window.open(urlVal.value+value.value,'_blank') window.open(urlVal.value + value.value, '_blank')
} }
// router.push({path:value}) // router.push({path:value})
} }
function openUrl1(){ function openUrl1() {
/* console.log(1) /* console.log(1)
alert(1) */ alert(1) */
let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i; let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i;
console.log("编码组件-url-1111-》",value.value,patt.test(value.value)) console.log("编码组件-url-1111-》", value.value, patt.test(value.value))
if(patt.test(value.value)){ if (patt.test(value.value)) {
// console.log("编码组件-url--》",value) // console.log("编码组件-url--》",value)
window.open(value.value,'_blank') window.open(value.value, '_blank')
}else{ } else {
// console.log("编码组件-url-1-》",value) // console.log("编码组件-url-1-》",value)
window.open(urlVal.value+value.value,'_blank') window.open(urlVal.value + value.value, '_blank')
} }
// router.push({path:value}) // router.push({path:value})
@ -178,7 +176,7 @@ onMounted(() => {
}) })
</script> </script>
<template> <template>
<el-input v-if="types != 3" v-model="value"> <el-input v-if="types != 3" v-model="value">
<template #prepend> <template #prepend>
<el-select v-model="urlVal" style="width: 115px"> <el-select v-model="urlVal" style="width: 115px">
<el-option label="http://" value="http://" /> <el-option label="http://" value="http://" />
@ -187,11 +185,40 @@ onMounted(() => {
</template> </template>
<template #append><el-button type="warning" @click="openUrl">访问</el-button></template> <template #append><el-button type="warning" @click="openUrl">访问</el-button></template>
</el-input> </el-input>
<div v-else style="border: 0px solid black; cursor: pointer; color:#0000EE; text-decoration:underline;" class="wordColor" @click="openUrl1">{{urlVal}}{{value}}</div><el-button v-show="false" type="warning" @click="openUrl">访问</el-button> <div v-if="types==3" class="url-container" @click="openUrl1">
<span class="url-content">
{{urlVal}}{{value}}
</span>
</div>
</template> </template>
<style lang='scss' scoped> <style lang='scss' scoped>
.wordColor{ .wordColor {
color:#000000; color: #000000;
} }
.url-container {
/* 容器样式（保持点击和下划线等特性） */
cursor: pointer;
color: #0000EE;
text-decoration: underline;
/* 可选：限制容器最大宽度，避免span无限拉伸 */
max-width: 100%;
}
.url-content {
/* 1. 自定义触发溢出的宽度（例如300px） */
width: 100%;
/* 2. 块级显示，确保width生效 */
display: inline-block;
/* 3. 超出宽度后自动换行（默认行为，可省略） */
white-space: normal;
/* 4. 处理长英文/数字不换行问题（可选） */
word-wrap: break-word;
text-decoration:underline;
}
</style> </style>
Write Preview
Loading…
Cancel
Save