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

pc版bug修改完毕封板

qin_v16
herenshan112 9 months ago
parent
cf73730339
commit
c47a9bbb67
5 changed files with 7148 additions and 6410 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. 8367
      src/components/DesignForm/formControlAttr.vue
  2. 4710
      src/components/DesignForm/formControlProperties.vue
  3. 1
      src/components/DesignForm/public/form/formItem.vue
  4. 311
      src/widget/videoupload/index.vue
  5. 169
      src/widget/videoupload/videoUploadPlay.vue

8367
src/components/DesignForm/formControlAttr.vue
View File

File diff suppressed because it is too large

4710
src/components/DesignForm/formControlProperties.vue
View File

File diff suppressed because it is too large

1
src/components/DesignForm/public/form/formItem.vue
View File

@ -1053,6 +1053,7 @@ const diGuiJilian = (val: any, options: any[]) => {
<VideoUpAndPlay <VideoUpAndPlay
v-else-if="judgeIsShow(data.name) && data.type === 'videoUpAndPlay'" v-else-if="judgeIsShow(data.name) && data.type === 'videoUpAndPlay'"
:data="data" :data="data"
:page-type="type"
/> />
<LowcodeTransfer <LowcodeTransfer

311
src/widget/videoupload/index.vue
View File

@ -4,179 +4,184 @@
@ 备注: @ 备注:
--> -->
<template> <template>
<el-form-item <el-form-item
v-bind="data.item" v-bind="data.item"
:prop="tProp || data.name" :prop="tProp || data.name"
:class="config.className" :class="config.className"
:rules="itemRules as any" :rules="itemRules as any"
:label="getLabel(data.item as FormItem)" :label="getLabel(data.item as FormItem)"
> >
<input v-model="value" type="hidden" > <input v-model="value" type="hidden" />
<VideoUploadPlay :data="props.data"></VideoUploadPlay> <VideoUploadPlay
</el-form-item> :data="props.data"
:page-type="pageType"
:val-info="value"
@upDateInfo="updatecontent"
></VideoUploadPlay>
</el-form-item>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import VideoUploadPlay from './videoUploadPlay.vue'; import VideoUploadPlay from "./videoUploadPlay.vue";
import { import { constControlChange, constFormProps } from "@/api/DesignForm/utils";
constControlChange, import validate from "@/api/DesignForm/validate";
constFormProps, import { FormItem, FormList } from "@/api/DesignForm/types";
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
data: FormList data: FormList;
tablekey: any pageType: number;
numrun?: number tablekey: any;
modelValue?: any // 子表和弹性布局时时有传 numrun?: number;
tProp?: string // 子表时的form-item的prop值，用于子表校验用 modelValue?: any; // 子表和弹性布局时时有传
}>(), tProp?: string; // 子表时的form-item的prop值，用于子表校验用
{} }>(),
) {}
);
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) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
} }
}) },
set(newVal: any) {
if (props.tProp) {
emits("update:modelValue", newVal);
}
updateModel(newVal);
},
});
/**
@ 作者: 秦东
@ 时间: 2025-03-05 13:48:20
@ 功能: 更新数据
*/
const updatecontent = (val: any) => {
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);
};
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; // 方法时允许提示信息为空
} }
let obj = {} let obj = {};
if (item.type === 'required') { if (item.type === "required") {
obj = { required: true } obj = { required: true };
} else if (item.type === 'rules') { } else if (item.type === "rules") {
// 自定义表达式 // 自定义表达式
obj = { pattern: item.rules } obj = { pattern: item.rules };
} else if (item.type === 'methods') { } else if (item.type === "methods") {
// 方法时 // 方法时
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] };
} }
// 这里判断下防某些条件下重复push的可能或存重复校验类型 // 这里判断下防某些条件下重复push的可能或存重复校验类型
let message: any = { message: item.message } let message: any = { message: item.message };
if (!item.message) { if (!item.message) {
// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示 // 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
message = {} message = {};
} }
temp.push( temp.push(
Object.assign( Object.assign(
{ {
trigger: item.trigger || 'blur' trigger: item.trigger || "blur",
}, },
obj, obj,
message message
) )
) );
}) });
return temp return temp;
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.imgbox{ .imgbox {
padding: 0 5px; padding: 0 5px;
max-width: 300px; max-width: 300px;
max-height: 200px; max-height: 200px;
width: 100%;
height: 200px;
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
height: 200px; height: 100%;
.image-slot { background: var(--el-fill-color-light);
display: flex; color: var(--el-text-color-secondary);
justify-content: center; font-size: 30px;
align-items: center; }
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 30px;
}
} }
</style> </style>

169
src/widget/videoupload/videoUploadPlay.vue
View File

@ -1,56 +1,153 @@
<template> <template>
<!-- <p>{{ videoHeight }}</p> <!-- <p>{{ videoHeight }}</p>-->
<p>{{ videoWidth }}</p> --> <!-- <p>{{ props.pageType }}</p> -->
<video <video
:src="data?.control.videoMsg[0].url" :src="imgUrl"
:loop="data?.control.videoMsg[0].loop" :loop="data?.control.videoMsg[0].loop"
:autoplay="data?.control.videoMsg[0].videoAutoPlay" :autoplay="data?.control.videoMsg[0].videoAutoPlay"
:style="getFormItemInputStyle(configStyle, 2)"
:style="getFormItemInputStyle(configStyle,2)"
controls controls
> ></video>
</video> <el-upload
v-if="props.pageType == 1 || props.pageType == 2"
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>
</el-upload>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts' import {
AnalysisCss,
AnalysisInputCss,
} from "@/components/DesignForm/public/form/calculate/cssInfo.ts";
import { uploadUrl } from "@/api/DesignForm";
import { useDesignFormStore } from "@/store/DesignForm/designForm";
import type { UploadInstance, UploadProps, UploadRawFile, genFileId } from "element-plus";
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: {
type: String,
},
});
const emits = defineEmits(["update:valInfo", "upDateInfo"]);
const imgUrl = computed({
get() {
if (props.valInfo != "") {
return props.valInfo;
} else {
return props.data?.control.videoMsg[0].url;
}
},
set(val: any) {
emits("update:valInfo", val);
},
});
const configStyle = computed(() => { const configStyle = computed(() => {
console.log("视频宽度",props.data) console.log("视频宽度", props.data);
return props.data.styles || {} return props.data.styles || {};
}) });
const videoHeight = props.data?.control.videoMsg[0].videoHeight+'px' const videoHeight = props.data?.control.videoMsg[0].videoHeight + "px";
const videoWidth = props.data?.control.videoMsg[0].videoWidth+'px' const videoWidth = props.data?.control.videoMsg[0].videoWidth + "px";
const heightVal = ref("0px") const heightVal = ref("0px");
const widthtVal = ref("0px") const widthtVal = ref("0px");
const beforeRemove = () => {
return false;
};
onMounted(()=>{ onMounted(() => {
heightVal.value = props.data?.control.videoMsg[0].videoHeight+'px' heightVal.value = props.data?.control.videoMsg[0].videoHeight + "px";
widthtVal.value = props.data?.control.videoMsg[0].videoWidth+'px' widthtVal.value = props.data?.control.videoMsg[0].videoWidth + "px";
// console.log("视频得长款",heightVal.value, widthtVal.value,props.data?.control) // console.log("视频得长款",heightVal.value, widthtVal.value,props.data?.control)
}); });
watch(()=>props.data?.control.videoMsg[0], (val:any) => { watch(
// console.log("视频得长款--》",val); () => props.data?.control.videoMsg[0],
heightVal.value = val.videoHeight+'px' (val: any) => {
widthtVal.value = val.videoWidth+'px' // console.log("视频得长款--》",val);
},{ heightVal.value = val.videoHeight + "px";
deep: true, widthtVal.value = val.videoWidth + "px";
}) },
{
const getFormItemInputStyle = (ele: any,sty:number) => { deep: true,
if(ele?.inputStyle){ }
console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) );
return AnalysisInputCss(ele?.inputStyle,sty)
} const getFormItemInputStyle = (ele: any, sty: number) => {
} if (ele?.inputStyle) {
console.log("返回栅格宽度4", AnalysisInputCss(ele?.inputStyle, sty));
return AnalysisInputCss(ele?.inputStyle, sty);
}
};
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 upload = ref<UploadInstance>();
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("upDateInfo", 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;
};
const handleExceed: UploadProps["onExceed"] = (files) => {
upload.value!.clearFiles();
const file = files[0] as UploadRawFile;
file.uid = genFileId();
upload.value!.handleStart(file);
};
//上传失败钩子
const videoUploadErr = (
error: Error,
uploadFile: UploadFile,
uploadFiles: UploadFiles
) => {
alert("上传失败,请重试");
// console.log("上传失败"+error);
};
</script> </script>
<style scoped></style> <style scoped></style>

Write Preview
Loading…
Cancel
Save