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

1.移动端时间控件操作区域优化,默认值设置当前时间,详情可操作bug修复 

2.视频组件移动端无法上传问题解决
3.链接组件移动端无法跳转问题解决
yunpan
liwenxuan 3 months ago
parent
3f2f09b755
commit
5e1d9c1714
4 changed files with 251 additions and 89 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. 167
      src/components/lowCode/assistant/datePicker.vue
  2. 22
      src/components/lowCode/assistant/urlLink.vue
  3. 106
      src/components/lowCode/assistant/videoUpAndPlay.vue
  4. 33
      src/components/lowCode/newFormItem.vue

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

@ -5,6 +5,8 @@
--> -->
<script lang='ts' setup> <script lang='ts' setup>
import dayJs from 'dayjs' import dayJs from 'dayjs'
import { ref, computed } from 'vue';
import { DatePicker } from '@nutui/nutui';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -195,14 +197,14 @@ const formatStart = computed(() => {
//console.log(value.value[0]) //console.log(value.value[0])
let val = new Date(parseInt(value.value[0], 10)); let val = new Date(parseInt(value.value[0], 10));
let group = props.data.control.type let group = props.data.control.type
let type= props.data.control.valueFormat let type = props.data.control.valueFormat
/* console.log(val) /* console.log(val)
console.log(group) console.log(group)
console.log(type) */ console.log(type) */
if (val&&value.value[0]&&value.value[0]!="") { if (val && value.value[0] && value.value[0] != "") {
//console.log(111) //console.log(111)
hasValue1.value = true hasValue1.value = true
switch (group) { switch (group) {
@ -277,14 +279,14 @@ const formatEnd = computed(() => {
//console.log(value.value[1]) //console.log(value.value[1])
let val = new Date(parseInt(value.value[1], 10)); let val = new Date(parseInt(value.value[1], 10));
let group = props.data.control.type let group = props.data.control.type
let type= props.data.control.valueFormat let type = props.data.control.valueFormat
/* console.log(val) /* console.log(val)
console.log(group) console.log(group)
console.log(type) */ console.log(type) */
if (val&&value.value[1]&&value.value[1]!="") { if (val && value.value[1] && value.value[1] != "") {
//console.log(111) //console.log(111)
hasValue2.value = true hasValue2.value = true
switch (group) { switch (group) {
@ -357,8 +359,7 @@ const formatEnd = computed(() => {
import { ref, computed } from 'vue';
import { DatePicker } from '@nutui/nutui';
const showPicker = ref(false); const showPicker = ref(false);
@ -492,90 +493,97 @@ const shichang = computed(() => {
let end = value.value[1] let end = value.value[1]
console.log(start) console.log(start)
console.log(end) console.log(end)
let a = calculateTimeDiff(start,end) let a = calculateTimeDiff(start, end)
return a return a
}) })
function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { function calculateTimeDiff(startTimestamp: string, endTimestamp: string) {
// 解析时间戳为数字 // 解析时间戳为数字
const start = parseInt(startTimestamp, 10); const start = parseInt(startTimestamp, 10);
const end = parseInt(endTimestamp, 10); const end = parseInt(endTimestamp, 10);
// 计算时间差（毫秒）并取绝对值
const diffMs = Math.abs(end - start);
// 计算总分钟数并四舍五入
const totalMinutes = Math.round(diffMs / 60000);
// 计算总小时数（带小数）
const totalHours = totalMinutes / 60;
// 处理小时进位情况
if (totalHours < 24) {
// 不足一天：四舍五入到小时
return `${Math.round(totalHours)} 小时`;
} else {
// 计算完整天数
const days = Math.floor(totalHours / 24);
// 计算剩余小时数（四舍五入）
const remainingHours = Math.round(totalHours % 24);
// 处理小时进位（当剩余小时为24时）
if (remainingHours === 24) {
return `${days + 1} 天 0 小时`;
}
return `${days} 天 ${remainingHours} 小时`;
}
}
function singleShow(){ // 计算时间差（毫秒）并取绝对值
//console.log(value.value) const diffMs = Math.abs(end - start);
if(value1.value==""){
value1.value = getTimestamp() // 计算总分钟数并四舍五入
const totalMinutes = Math.round(diffMs / 60000);
// 计算总小时数（带小数）
const totalHours = totalMinutes / 60;
// 处理小时进位情况
if (totalHours < 24) {
// 不足一天：四舍五入到小时
return `${Math.round(totalHours)} 小时`;
} else {
// 计算完整天数
const days = Math.floor(totalHours / 24);
// 计算剩余小时数（四舍五入）
const remainingHours = Math.round(totalHours % 24);
// 处理小时进位（当剩余小时为24时）
if (remainingHours === 24) {
return `${days + 1} 天 0 小时`;
}
return `${days} 天 ${remainingHours} 小时`;
} }
show.value = true
} }
function rangeShowStart(){ const types = props.types;
function singleShow() {
if (types == 1||types == 2) {
if (value1.value == "") {
value1.value = getTimestamp()
}
show.value = true
}
if(startValue1.value==""){ }
startValue1.value = getTimestamp() function rangeShowStart() {
if (types == 1||types == 2) {
if (startValue1.value == "") {
startValue1.value = getTimestamp()
}
showStart.value = true
} }
showStart.value = true
} }
function rangeShowEnd(){ function rangeShowEnd() {
if(endValue1.value==""){ if (types == 1||types == 2) {
endValue1.value = getTimestamp() if (endValue1.value == "") {
endValue1.value = getTimestamp()
}
showEnd.value = true
} }
showEnd.value = true
} }
function getTimestamp() { function getTimestamp() {
const now = new Date(); const now = new Date();
let timestamp; let timestamp;
switch(type.value) { switch (type.value) {
case 'year-month': case 'year-month':
// 设置为当前年当前月1日0时0分1秒 // 设置为当前年当前月1日0时0分1秒
const yearMonthDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 1); const yearMonthDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 1);
timestamp = yearMonthDate timestamp = yearMonthDate
break; break;
case 'date': case 'date':
// 设置为当前年当前月当前日0时0分1秒 // 设置为当前年当前月当前日0时0分1秒
const dateDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 1); const dateDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 1);
timestamp = dateDate timestamp = dateDate
break; break;
case 'datetime': case 'datetime':
// 返回当前时刻的时间戳 // 返回当前时刻的时间戳
timestamp = now timestamp = now
break; break;
default: default:
throw new Error('参数必须是"year-month"、"date"或"datetime"之一'); throw new Error('参数必须是"year-month"、"date"或"datetime"之一');
} }
return timestamp; return timestamp;
} }
</script> </script>
@ -626,9 +634,9 @@ function getTimestamp() {
<div v-if="selectType == 'range'" <div v-if="selectType == 'range'"
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;" style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;"
@click="rangeShowStart"> @click="rangeShowStart">
<el-text v-if="hasValue1" class="wordColor">{{ formatStart <el-text v-if="hasValue1" class="wordColor">{{ formatStart
}}</el-text> }}</el-text>
<el-text v-if="!hasValue1" class="wordColor1">{{ formatStart <el-text v-if="!hasValue1" class="wordColor1">{{ formatStart
}}</el-text> }}</el-text>
</div> </div>
@ -640,16 +648,19 @@ function getTimestamp() {
<div v-if="selectType == 'range'" <div v-if="selectType == 'range'"
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;" style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;"
@click="rangeShowEnd"> @click="rangeShowEnd">
<el-text v-if="hasValue2" class="wordColor">{{ formatEnd <el-text v-if="hasValue2" class="wordColor">{{ formatEnd
}}</el-text> }}</el-text>
<el-text v-if="!hasValue2" class="wordColor1">{{formatEnd <el-text v-if="!hasValue2" class="wordColor1">{{ formatEnd
}}</el-text> }}</el-text>
</div> </div>
<!-- <div v-if="selectType == 'range'" <!-- <div v-if="selectType == 'range'"
style="border: 0px solid #DCDFE6; padding-left: 8px; width: 10%;height: 97%;border-radius: 5px;"> style="border: 0px solid #DCDFE6; padding-left: 8px; width: 10%;height: 97%;border-radius: 5px;">
<el-text class="wordColor">时长:23天</el-text> <el-text class="wordColor">时长:23天</el-text>
</div> --> </div> -->
<div v-if="selectType=='range'&&value[0]&&value[1]" style="float:right;border: black 0px solid;position: absolute; pointer-events: none;bottom: -26px;color:#A8ABB2 ;width: 100%; font-size: smaller;"><div style="float:right">{{ shichang }}</div></div> <div v-if="selectType == 'range' && value[0] && value[1]"
style="float:right;border: black 0px solid;position: absolute; pointer-events: none;bottom: -26px;color:#A8ABB2 ;width: 100%; font-size: smaller;">
<div style="float:right">{{ shichang }}</div>
</div>
</template> </template>

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

@ -142,6 +142,25 @@ const formatCustomRules = () => {
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;
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})
}
function openUrl1(){
/* 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)){
@ -168,7 +187,8 @@ 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 class="wordColor" @click="openUrl">{{urlVal}}{{value}}</div>
<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>
</template> </template>
<style lang='scss' scoped> <style lang='scss' scoped>
.wordColor{ .wordColor{

106
src/components/lowCode/assistant/videoUpAndPlay.vue
View File

@ -5,11 +5,20 @@
--> -->
<script lang='ts' setup> <script lang='ts' setup>
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
import request from '@/utils/axios/index'
import { ref, computed } from 'vue'
import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm'
import SvgIcon from '@/components/svgIcon/index.vue'
import { useAttrs } from 'vue';
const props = defineProps({ const props = defineProps({
// eslint-disable-next-line vue/require-default-prop // eslint-disable-next-line vue/require-default-prop
data: { data: {
type: Object, type: Object,
}, },
pageType: {
type: Number,
},
valInfo: { valInfo: {
type: String, type: String,
}, },
@ -51,25 +60,92 @@ const openVideo = () => {
console.log("单机播放") console.log("单机播放")
} }
const emits = defineEmits(["updateVideoUrl"]);
const imgUrl = computed({ const imgUrl = computed({
get() { get() {
if (props.modelValue != "") { if (props.modelValue != "") {
return props.modelValue; return props.modelValue;
} else if (props.valInfo != "") { } else if (props.valInfo&&props.valInfo != "") {
return props.valInfo; return props.valInfo;
} else { } else {
return props.data?.control.videoMsg[0].url; return props.data?.control.videoMsg[0].url;
} }
}, },
set(val: any) { set(val: any) {
emits("update:valInfo", val); console.log(val)
emits("updateVideoUrl", val);
}, },
}); });
const beforeRemove = () => {
return false;
};
const store = useDesignFormStore() as any;
const controlData = computed(() => {
// console.log("注册自定义事件----------------->",props.formInfo)
// console.log("注册自定义事件--------1--------->", store.controlAttr);
// console.log("注册自定义事件---------3-------->", controlData.value.customRules);
return store.controlAttr;
});
const videoIndex = ref(0);
//上传成功钩子
const videoUploadOk = (
response: any,
uploadFile: UploadFile,
uploadFiles: UploadFiles
) => {
const { control = {} }: { control: any } = controlData.value;
console.log("上传成功钩子", controlData.value);
console.log("上传成功钩子--------->", props.data?.control.videoMsg);
// imgUrl.value = response.data.url;
console.log("上传成功钩子----1----->", imgUrl.value, response.data.url);
emits("updateVideoUrl", response.data.url);
props.data.control.videoMsg[videoIndex.value].url = response.data.url;
props.data.control.videoMsg[videoIndex.value].videoReady = true;
props.data.control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt;
props.data.control.videoMsg[videoIndex.value].UpdatedAt = response.data.UpdatedAt;
props.data.control.videoMsg[videoIndex.value].fileSize = response.data.fileSize;
props.data.control.videoMsg[videoIndex.value].id = response.data.id;
props.data.control.videoMsg[videoIndex.value].key = response.data.key;
props.data.control.videoMsg[videoIndex.value].name = response.data.name;
props.data.control.videoMsg[videoIndex.value].physicspath = response.data.physicspath;
props.data.control.videoMsg[videoIndex.value].size = response.data.size;
props.data.control.videoMsg[videoIndex.value].tag = response.data.tag;
props.data.control.videoMsg[videoIndex.value].type = response.data.type;
//props.modelValue = response.data.url;
};
//上传失败钩子
const videoUploadErr = (
error: Error,
uploadFile: UploadFile,
uploadFiles: UploadFiles
) => {
alert("上传失败,请重试");
// console.log("上传失败"+error);
};
const handleExceed: UploadProps["onExceed"] = (files) => {
upload.value!.clearFiles();
const file = files[0] as UploadRawFile;
file.uid = genFileId();
upload.value!.handleStart(file);
};
const attrs = useAttrs();
const types = attrs.types;
</script> </script>
<template> <template>
<div class="butBox" @click="openVideo">按钮</div> <div class="butBox" @click="openVideo">按钮</div>
<div> <div>
<video <!-- <video
:loop="data?.control.videoMsg[0].loop" :loop="data?.control.videoMsg[0].loop"
:autoplay="data?.control.videoMsg[0].videoAutoPlay" :autoplay="data?.control.videoMsg[0].videoAutoPlay"
@ -80,7 +156,29 @@ const imgUrl = computed({
<source :src="imgUrl" type="video/mp4"> <source :src="imgUrl" type="video/mp4">
您的浏览器不支持 HTML5 标签 您的浏览器不支持 HTML5 标签
</video> </video> -->
<video
:src="imgUrl"
:loop="data?.control.videoMsg[0].loop"
:autoplay="data?.control.videoMsg[0].videoAutoPlay"
:style="getFormItemInputStyle(configStyle, 2)"
controls
></video>
<el-upload
v-if="types!=3"
class="avatar-uploader"
:action="uploadUrl"
:before-remove="beforeRemove"
:on-success="videoUploadOk"
:show-file-list="false"
:on-error="videoUploadErr"
:on-exceed="handleExceed"
accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb"
>
<!-- <el-icon class="avatar-uploader-icon" ><Plus /></el-icon> -->
<div style="display: flex; justify-content: center; max-width: 40px; font-weight: 600;"><SvgIcon icon-class="videoupload" :size="'40px'" /></div>
</el-upload>
</div> </div>
</template> </template>

33
src/components/lowCode/newFormItem.vue
View File

@ -270,6 +270,16 @@ const getLabel = (ele: FormItem) => {
function asfValueChanged(val:any){ function asfValueChanged(val:any){
emits("asfValueChanged",val) emits("asfValueChanged",val)
} }
const updateContentVideo = (val: any) => {
console.log("更新数据-------->",val)
alert(1)
value.value = val;
/* props.data.control.videoMsg[0].url = val;
console.log("更新数据-------->", val);
console.log("更新数据----1---->", value.value);
console.log("更新数据----2---->", props.data.control.videoMsg[0].url); */
};
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-11-13 16:18:59 @ 时间: 2024-11-13 16:18:59
@ -392,6 +402,11 @@ const currentComponent = computed(() => {
} }
}) })
const testPage = (val:any) =>{
console.log("刷新数据-------->", val);
}
</script> </script>
<template> <template>
<el-form-item <el-form-item
@ -408,6 +423,7 @@ const currentComponent = computed(() => {
<template #label v-else> <template #label v-else>
<span :style="getFormItemLableStyle(configStyle)" >{{ getLabel(data.item) }}</span> <span :style="getFormItemLableStyle(configStyle)" >{{ getLabel(data.item) }}</span>
</template> </template>
<!-- {{ data.type }} -->
<!--关联表单--> <!--关联表单-->
<component <component
v-if="['associatedForms'].includes(data.type)" v-if="['associatedForms'].includes(data.type)"
@ -424,6 +440,23 @@ const currentComponent = computed(() => {
v-model="value" v-model="value"
@asf-value-changed="asfValueChanged" @asf-value-changed="asfValueChanged"
/> />
<!--视频-->
<component
v-if="['videoUpAndPlay'].includes(data.type)"
:types="type"
:is="currentComponent"
:data="data"
v-bind="control"
:control="control"
:config="config"
:name="control.file || 'file'"
:disabled="judgeIsDisabled(data.name)"
:options="options"
v-model="value"
:val-info="value"
@updateVideoUrl="updateContentVideo"
@testPage = "testPage"
/>
<!--单行文本及密码组件--> <!--单行文本及密码组件-->
<component <component
v-else v-else

Write Preview
Loading…
Cancel
Save