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

修改BUG

qin_v16
hreenshan112 9 months ago
parent
5a3ceb4db3
commit
ba5efecfe3
14 changed files with 1466 additions and 1237 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. 4
      src/components/DesignForm/aceDrawer.vue
  2. 69
      src/components/DesignForm/formControlPropertiNew.vue
  3. 158
      src/components/DesignForm/public/expand/digitpage.vue
  4. 193
      src/components/DesignForm/public/expand/lowcodeImage.vue
  5. 299
      src/components/DesignForm/public/expand/uploadPage.vue
  6. 493
      src/components/DesignForm/public/form/childTable.vue
  7. 1
      src/components/DesignForm/public/form/formGroup.vue
  8. 1
      src/components/DesignForm/public/form/formItem.vue
  9. 10
      src/components/IconSelect/appMenuSvgPage.vue
  10. 605
      src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
  11. 211
      src/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue
  12. 327
      src/views/sysworkflow/lowcodepage/appPage/appSetUp/setup.vue
  13. 3
      src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
  14. 329
      src/widget/lowcodeimage/lowcodeImage.vue

4
src/components/DesignForm/aceDrawer.vue
View File

@ -227,7 +227,7 @@ const dialogConfirmTree = () => {
*/ */
const pickDel = (val: treeStruct) => { const pickDel = (val: treeStruct) => {
console.log("要删除得节点-->", val.value); console.log("要删除得节点-->", val.value);
delDiGui(treeSelectAry, val); delDiGui(treeSelectAry.value, val);
console.log("删除指定节点数据---结果-->", treeSelectAry); console.log("删除指定节点数据---结果-->", treeSelectAry);
}; };
/** /**
@ -236,10 +236,12 @@ const pickDel = (val: treeStruct) => {
@ 功能: 执行递归删除 @ 功能: 执行递归删除
*/ */
const delDiGui = (tree: treeStruct[], val: treeStruct) => { const delDiGui = (tree: treeStruct[], val: treeStruct) => {
console.log("要删除得节点-11->", tree, val.value);
for (let i = 0; i < tree.length; i++) { for (let i = 0; i < tree.length; i++) {
const node = tree[i]; const node = tree[i];
if (node.value == val.value) { if (node.value == val.value) {
tree.splice(i, 1); tree.splice(i, 1);
return; return;
} }
if (Array.isArray(node.children) && node.children.length) { if (Array.isArray(node.children) && node.children.length) {

69
src/components/DesignForm/formControlPropertiNew.vue
View File

@ -336,6 +336,12 @@ const attrList = computed(() => {
], ],
eventName: "labelNameVal", eventName: "labelNameVal",
}, },
{
label: "标题",
value: control.modelValue,
path: "control.modelValue",
vShow: ["title"],
},
{ {
label: "组件类型", label: "组件类型",
value: unitName, value: unitName,
@ -527,7 +533,7 @@ const attrList = computed(() => {
path: "config.append", path: "config.append",
vShow: ["input", "password", "digitpage"], vShow: ["input", "password", "digitpage"],
}, },
// { // {
// label: '状态打开时的值', // label: '状态打开时的值',
// value: control.activeValue, // value: control.activeValue,
@ -667,12 +673,7 @@ const attrList = computed(() => {
vShow: ["select", "inputSlot"], vShow: ["select", "inputSlot"],
eventName: "setInputSlot", eventName: "setInputSlot",
}, },
{
label: "标题",
value: control.modelValue,
path: "control.modelValue",
vShow: ["title"],
},
{ {
label: "占据的列数span", label: "占据的列数span",
value: attr.span, value: attr.span,
@ -3389,14 +3390,14 @@ const gainFormGroupList = () => {
//liwenxuan 2025 移动端单选扫描输入功能 start //liwenxuan 2025 移动端单选扫描输入功能 start
const scanTypes = [ const scanTypes = [
{ {
value: 'QrCode', value: "QrCode",
label: '二维码', label: "二维码",
}, },
{ {
value: 'OCR', value: "OCR",
label: '光学字符识别', label: "光学字符识别",
}, },
] ];
//liwenxuan 2025 移动端单选扫描输入功能 end //liwenxuan 2025 移动端单选扫描输入功能 end
let asfs: any[] = []; let asfs: any[] = [];
@ -3759,17 +3760,20 @@ watch(
// } // }
}); });
} else { } else {
formData.value.dataSourceConfig.id = ""; console.log("formData.value---------------", formData.value);
formData.value.dataSourceConfig.dataBaseName = ""; if (formData.value.dataSourceConfi) {
formData.value.dataSourceConfig.tableName = ""; formData.value.dataSourceConfig.id = "";
formData.value.dataSourceConfig.tableKey = ""; formData.value.dataSourceConfig.dataBaseName = "";
formData.value.dataSourceConfig.dsn = { formData.value.dataSourceConfig.tableName = "";
dataBaseName: "", formData.value.dataSourceConfig.tableKey = "";
ip: "", formData.value.dataSourceConfig.dsn = {
port: 0, dataBaseName: "",
userName: "", ip: "",
password: "", port: 0,
}; userName: "",
password: "",
};
}
formAttr.value.forEach((item) => { formAttr.value.forEach((item) => {
console.log(item.label, "item.", item.type); console.log(item.label, "item.", item.type);
@ -4255,7 +4259,8 @@ const updataBase = (val: any) => {
> >
</el-row> </el-row>
<el-row v-else-if="item.type === 'input'"><!-- 移动端扫描输入 --> <el-row v-else-if="item.type === 'input'"
><!-- 移动端扫描输入 -->
<el-switch v-model="controlData.control.scanInputFlag" /> <el-switch v-model="controlData.control.scanInputFlag" />
<div <div
v-if="controlData.control.scanInputFlag" v-if="controlData.control.scanInputFlag"
@ -4267,21 +4272,19 @@ const updataBase = (val: any) => {
padding-bottom: 6px; padding-bottom: 6px;
" "
> >
<div style="margin-right: 12px;">扫描方式</div> <div style="margin-right: 12px">扫描方式</div>
<el-select <el-select
v-model="controlData.control.scanType"
v-model="controlData.control.scanType" style="width: 150px; height: 20px"
style="width: 150px; height:20px"> >
<el-option <el-option
v-for="scanType in scanTypes" v-for="scanType in scanTypes"
:key="scanType.value" :key="scanType.value"
:label="scanType.label" :label="scanType.label"
:value="scanType.value" :value="scanType.value"
/> />
</el-select>
</el-select>
</div> </div>
</el-row> </el-row>
<el-row v-else-if="item.type === 'associatedForms_dataRange'"> <el-row v-else-if="item.type === 'associatedForms_dataRange'">

158
src/components/DesignForm/public/expand/digitpage.vue
View File

@ -3,26 +3,42 @@
@ 时间: 2024-09-12 10:25:52 @ 时间: 2024-09-12 10:25:52
@ 备注: 分值 @ 备注: 分值
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts' import {
formatNumber,
objectToArray,
constControlChange,
constSetFormOptions,
constFormProps,
constGetControlByName,
} from "@/api/DesignForm/utils";
import {
AnalysisCss,
AnalysisInputCss,
} from "@/components/DesignForm/public/form/calculate/cssInfo.ts";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
modelValue?: string data?: Object;
disabled?: boolean modelValue?: string;
}>(), disabled?: boolean;
{} }>(),
) {}
);
const getControlByName = inject(constGetControlByName) as any;
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'update:modelValue', value: string): void (e: "update:modelValue", value: string): void;
}>() }>();
const value = computed({ const value = computed({
get: () => { get: () => {
return props.modelValue return props.modelValue;
}, },
set: (newVal: any) => { set: (newVal: any) => {
emits('update:modelValue', newVal) emits("update:modelValue", newVal);
}, },
});
const config = computed(() => {
return props.data.config || {};
}); });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ -30,21 +46,103 @@ const value = computed({
@ 功能: 布局处理 @ 功能: 布局处理
*/ */
const getFormItemLableStyle = (ele: any) => { const getFormItemLableStyle = (ele: any) => {
if(ele?.labelStyle){ if (ele?.labelStyle) {
// console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle)) // console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
return AnalysisCss(ele?.labelStyle) return AnalysisCss(ele?.labelStyle);
} }
} };
const getFormItemInputStyle = (ele: any,sty:number) => { const getFormItemInputStyle = (ele: any, sty: number) => {
if(ele?.inputStyle){ if (ele?.inputStyle) {
//console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) //console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
return AnalysisInputCss(ele?.inputStyle,sty) return AnalysisInputCss(ele?.inputStyle, sty);
}
};
const getInputSlot = (key?: string) => {
const slot = key === "p" ? config.value.prepend : config.value.append;
const has = slot.indexOf("key:") === 0;
if (!has) {
return false;
}
const slotKey = slot.replace("key:", "");
const control = getControlByName(slotKey);
if (!control || Object.keys(control)?.length === 0) {
return false;
}
return control;
};
/**
@ 作者: 秦东
@ 时间: 2024-07-27 15:11:42
@ 功能: 判断是否禁用
*/
const judgeIsDisabled = (key: string) => {
if (type.value === 3) {
return true; // 查看模式，为不可编辑状态
}
if (type.value === 1 && config.value.addDisabled) {
return true;
}
if (type.value === 2 && config.value.editDisabled) {
return true; // 编辑模式
}
if (
props.nodeKey != undefined &&
props.purview != undefined &&
props.purview != null &&
props.purview != null &&
props.purview != "" &&
props.purview != ""
) {
if (props.purview.length < 1) {
return false;
} else {
let isShow = true;
props.purview.forEach((item) => {
if (item.nodeKey == props.nodeKey) {
if (item.powerAry && item.powerAry.length > 0) {
item.powerAry.forEach((itm) => {
if (itm.id == key) {
console.log(
"判断此组件是否禁用",
itm,
itm.id == key,
"--------->",
itm.isLook
);
isShow = !itm.isEdit;
}
});
}
}
});
return isShow;
} }
} } else {
return false;
}
};
</script> </script>
<template> <template>
<el-input v-bind="$props" v-model="value" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)" oninput ="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '')" placeholder="请输入"></el-input> <el-input
v-bind="$props"
v-model="value"
:style="getFormItemInputStyle(configStyle, 2)"
:input-style="getFormItemInputStyle(configStyle, 3)"
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '')"
placeholder="请输入"
>
<template #append v-if="config.append">
<div v-if="getInputSlot()">
<AKSelect
:data="getInputSlot()"
:disabled="judgeIsDisabled(data.name)"
:transform-option="transformOption"
type="slot"
@change="inputSlotChange"
/>
</div>
<span v-else>{{ config.append }}</span>
</template>
</el-input>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped></style>
</style>

193
src/components/DesignForm/public/expand/lowcodeImage.vue
View File

@ -3,119 +3,124 @@
@ 时间: 2024-09-12 10:44:17 @ 时间: 2024-09-12 10:44:17
@ 备注: 图片 @ 备注: 图片
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts' import {
import errimg from '@/assets/404_images/imgNotFound.png' AnalysisCss,
import { uploadUrl,getRequest } from '@/api/DesignForm' AnalysisInputCss,
} from "@/components/DesignForm/public/form/calculate/cssInfo.ts";
import errimg from "@/assets/404_images/imgNotFound.png";
import { uploadUrl, getRequest } from "@/api/DesignForm";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
modelValue?: string modelValue?: string;
disabled?: boolean disabled?: boolean;
tablekey?: Object tablekey?: Object;
data?: Object data?: Object;
formTableSetUp?: Object formTableSetUp?: Object;
imgUrl?: string imgUrl?: string;
}>(), }>(),
{} {}
) );
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'update:modelValue', value: string): void (e: "update:modelValue", value: string): void;
}>() }>();
const value = computed({ const value = computed({
get: () => { get: () => {
if(props.data.control.imgUrl == ""){ if (props.data.control.imgUrl == "") {
return props.modelValue?props.modelValue:errimg; return props.modelValue ? props.modelValue : errimg;
}else{ } else {
return props.data.control.imgUrl return props.data.control.imgUrl;
} }
},
}, set: (newVal: any) => {
set: (newVal: any) => { emits("update:modelValue", newVal);
emits('update:modelValue', newVal) return newVal;
return newVal },
},
}); });
//组件css部分 //组件css部分
const configStyle = computed(() => { const configStyle = computed(() => {
return props.data.styles || {} return props.data.styles || {};
}) });
const imgLoading = ref(false) const imgLoading = ref(false);
const imgPath = ref(errimg) const imgPath = ref(errimg);
//文件上传的格式与大小 //文件上传的格式与大小
const beforeAvatarUpload = (rawFile) => { const beforeAvatarUpload = (rawFile) => {
imgLoading.value = true imgLoading.value = true;
// console.log("文件上传的格式与大小",rawFile.type) // console.log("文件上传的格式与大小",rawFile.type)
let imgType = ['image/jpeg','image/jpg','image/png','image/gif','image/svg'] let imgType = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/svg"];
if (!imgType.includes(rawFile.type)) { if (!imgType.includes(rawFile.type)) {
ElMessage.error('您上传的不是图片!') ElMessage.error("您上传的不是图片!");
imgLoading.value = false imgLoading.value = false;
return false return false;
} else if (rawFile.size / 1024 / 1024 > 200) { } else if (rawFile.size / 1024 / 1024 > 200) {
ElMessage.error('您上传到额图片大于 200MB!') ElMessage.error("您上传到额图片大于 200MB!");
imgLoading.value = false imgLoading.value = false;
return false return false;
} }
return true return true;
} };
//上传成功回调 //上传成功回调
const handleAvatarSuccess = ( const handleAvatarSuccess = (response, uploadFile) => {
response,
uploadFile
) => {
// imageUrl.value = URL.createObjectURL(uploadFile.raw!) // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
console.log("上传成功回调",value) console.log("上传成功回调", value);
emits('update:modelValue', response.data.url)
imgPath.value = response.data.url
value.value=response.data.url
console.log("上传成功回调---------->",value.value)
// let oldFormSetUp = props.formTableSetUp
// if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){
// oldFormSetUp.list.forEach((item)=>{
// if(item.name && item.name == props.data.name){
// // value.value = response.data.url
// // item.control.link = response.data.url
// value.set(response.data.url)
// emits('update:modelValue', response.data.url)
// console.log("上传成功回调------>",response.data.url)
// }
// })
// }
// props.setimgurl=response.data.url
// emits("update:imgUrl",response.data.url)
// console.log("上传成功回调------>",url.value)
// emits("updateCont",response.data.url)
imgLoading.value = false emits("update:modelValue", response.data.url);
} imgPath.value = response.data.url;
const getFormItemInputStyle = (ele: any,sty:number) => { value.value = response.data.url;
if(ele?.inputStyle){ console.log("上传成功回调---------->", value.value);
console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) // let oldFormSetUp = props.formTableSetUp
return AnalysisInputCss(ele?.inputStyle,sty) // if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){
} // oldFormSetUp.list.forEach((item)=>{
} // if(item.name && item.name == props.data.name){
// // value.value = response.data.url
// // item.control.link = response.data.url
// value.set(response.data.url)
// emits('update:modelValue', response.data.url)
// console.log("上传成功回调------>",response.data.url)
// }
// })
// }
// props.setimgurl=response.data.url
// emits("update:imgUrl",response.data.url)
// console.log("上传成功回调------>",url.value)
// emits("updateCont",response.data.url)
imgLoading.value = false;
};
const getFormItemInputStyle = (ele: any, sty: number) => {
if (ele?.inputStyle) {
console.log("返回栅格宽度4", AnalysisInputCss(ele?.inputStyle, sty));
return AnalysisInputCss(ele?.inputStyle, sty);
}
};
</script> </script>
<template> <template>
<el-upload <el-upload
v-bind="$props" v-bind="$props"
class="upload-demo" class="upload-demo"
:action="uploadUrl" :action="uploadUrl"
:show-file-list="false" :show-file-list="false"
:on-success="handleAvatarSuccess" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
v-loading="imgLoading" v-loading="imgLoading"
> >
<!-- <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" /> --> <!-- <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" /> -->
<img v-if="value" :src="value" class="avatar" :style="getFormItemInputStyle(configStyle,2)" /> <img
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> v-if="value"
</el-upload> :src="value"
class="avatar"
:style="getFormItemInputStyle(configStyle, 2)"
/>
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.upload-demo {
img {
width: 100%;
}
}
</style> </style>

299
src/components/DesignForm/public/expand/uploadPage.vue
View File

@ -3,172 +3,173 @@
@ 时间: 2024-09-17 10:44:30 @ 时间: 2024-09-17 10:44:30
@ 备注: 上传组件 @ 备注: 上传组件
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo' import {
import { uploadUrl,getRequest } from '@/api/DesignForm' AnalysisCss,
import { AnalysisInputCss,
formatNumber, } from "@/components/DesignForm/public/form/calculate/cssInfo";
objectToArray, import { uploadUrl, getRequest } from "@/api/DesignForm";
constControlChange, import {
constSetFormOptions, formatNumber,
constFormProps, objectToArray,
constGetControlByName constControlChange,
} from '@/api/DesignForm/utils' constSetFormOptions,
constFormProps,
constGetControlByName,
} from "@/api/DesignForm/utils";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
modelValue?: string modelValue?: string;
disabled?: boolean disabled?: boolean;
action?: string action?: string;
name?: string name?: string;
fileList?: Object fileList?: Object;
control?: Object control?: Object;
config?: Object config?: Object;
data?: Object data?: Object;
}>(), }>(),
{} {}
) );
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'update:modelValue', value: string): void (e: "update:modelValue", value: string): void;
}>() }>();
const value = computed({ const value = computed({
get: () => { get: () => {
console.log("图片上传处理-112->",props.modelValue) console.log("图片上传处理-112->", props.modelValue);
// if(props.modelValue != ""){ // if(props.modelValue != ""){
// return props.modelValue.split(","); // return props.modelValue.split(",");
// }else{ // }else{
// return props.modelValue // return props.modelValue
// } // }
return props.modelValue return props.modelValue;
}, },
set: (newVal: any) => { set: (newVal: any) => {
emits('update:modelValue', newVal) emits("update:modelValue", newVal);
return newVal return newVal;
}, },
}); });
const formProps = inject(constFormProps, {}) as any const formProps = inject(constFormProps, {}) as any;
// ------------图片上传处理----------- // ------------图片上传处理-----------
const fileList = computed<any>(() => { const fileList = computed<any>(() => {
// const imgVal = formProps.value.model[props.data.name] // const imgVal = formProps.value.model[props.data.name]
console.log("图片上传处理-2->",value.value) console.log("图片上传处理-2->", value.value);
const imgVal = value.value const imgVal = value.value;
console.log("图片上传处理-->",imgVal) console.log("图片上传处理-->", imgVal);
if (imgVal && typeof imgVal === 'string') { if (imgVal && typeof imgVal === "string") {
// console.log("图片上传处理-2->",imgVal) // console.log("图片上传处理-2->",imgVal)
const temp: any = [] const temp: any = [];
imgVal.split(',').forEach((item: string) => { imgVal.split(",").forEach((item: string) => {
// console.log("图片上传处理-3->",item) // console.log("图片上传处理-3->",item)
temp.push({ temp.push({
name: item, name: item,
url: item url: item,
}) });
}) });
return temp return temp;
} }
return imgVal || [] // 这样可支持默认值为array([name:'',url:''这种形式]) return imgVal || []; // 这样可支持默认值为array([name:'',url:''这种形式])
}) });
//解析指定样式 //解析指定样式
const getFormItemInputStyle = (ele: any,sty:number) => { const getFormItemInputStyle = (ele: any, sty: number) => {
if(ele?.inputStyle){ if (ele?.inputStyle) {
console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) console.log("返回栅格宽度4", AnalysisInputCss(ele?.inputStyle, sty));
return AnalysisInputCss(ele?.inputStyle,sty) return AnalysisInputCss(ele?.inputStyle, sty);
} }
} };
//组件css部分 //组件css部分
const configStyle = computed(() => { const configStyle = computed(() => {
return props.data.styles || {} return props.data.styles || {};
}) });
// 从列表移除 // 从列表移除
const uploadRemove = (uploadFile: any, uploadFiles: any) => { const uploadRemove = (uploadFile: any, uploadFiles: any) => {
const oldList: any = [] const oldList: any = [];
fileList.value.forEach((item: any) => { fileList.value.forEach((item: any) => {
if (item.url !== uploadFile.url) { if (item.url !== uploadFile.url) {
oldList.push(item.url) oldList.push(item.url);
} }
}) });
value.value = oldList value.value = oldList;
updateModel(oldList.join(',')) updateModel(oldList.join(","));
// props.control.value.onRemove && props.control.value.onRemove(uploadFile, uploadFiles) // props.control.value.onRemove && props.control.value.onRemove(uploadFile, uploadFiles)
// todo 需从服务端删除已上传图片时，这里需要发删除请求接口 // todo 需从服务端删除已上传图片时，这里需要发删除请求接口
} };
// 上传错误 // 上传错误
const uploadError = (err: any, file: any, fileList: any) => { const uploadError = (err: any, file: any, fileList: any) => {
// console.log('uploadError') // console.log('uploadError')
ElMessage.error(file.name + '上传失败') ElMessage.error(file.name + "上传失败");
props.control.value.onError && props.control.value.onError(err, file, fileList) props.control.value.onError && props.control.value.onError(err, file, fileList);
} };
const changeEvent = inject(constControlChange, '') as any const changeEvent = inject(constControlChange, "") as any;
const updateModel = (val: any) => { const updateModel = (val: any) => {
console.log("图片上传处理-111->",val) console.log("图片上传处理-111->", val);
value.value = val value.value = val;
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 uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => { const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
// console.log("response==>",response) // console.log("response==>",response)
// console.log("uploadFile==>",uploadFile) // console.log("uploadFile==>",uploadFile)
// console.log("uploadFiles==>",uploadFiles) // console.log("uploadFiles==>",uploadFiles)
const oldList = [] const oldList = [];
fileList.value.forEach((item: any) => { fileList.value.forEach((item: any) => {
oldList.push(item.url) oldList.push(item.url);
}) });
// oldList.push(response.path) // oldList.push(response.path)
oldList.push(response.data.url) oldList.push(response.data.url);
updateModel(oldList.join(',')) updateModel(oldList.join(","));
// props.control.value.onSuccess && // props.control.value.onSuccess &&
// props.control.value.onSuccess(response, uploadFile, uploadFiles) // props.control.value.onSuccess(response, uploadFile, uploadFiles)
// console.log("uploadSuccess===>",control.value) // console.log("uploadSuccess===>",control.value)
// console.log("uploadSuccess=fileList==>",fileList) // console.log("uploadSuccess=fileList==>",fileList)
} };
</script> </script>
<template> <template>
<div> <div>
<el-upload <el-upload
v-bind="props.control" v-bind="props.control"
:action="uploadUrl" :action="uploadUrl"
:name="props.name" :name="props.name"
:class="{limit: props.control.limit <= fileList.length}" :class="{ limit: props.control.limit <= fileList.length }"
:file-list="fileList as any" :file-list="fileList as any"
:style="getFormItemInputStyle(configStyle,2)" :style="getFormItemInputStyle(configStyle, 2)"
:on-error="uploadError" :on-error="uploadError"
:on-success="uploadSuccess" :on-success="uploadSuccess"
:on-remove="uploadRemove" :on-remove="uploadRemove"
> >
<i class="icon-plus" v-if="props.control?.listType=='picture-card'"></i> <i class="icon-plus" v-if="props.control?.listType == 'picture-card'"></i>
<el-button type="primary" plain v-else-if="props.control?.listType=='picture'"> <el-button type="primary" plain v-else-if="props.control?.listType == 'picture'">
<span v-if="props.config?.btnText">{{ props.config?.btnText }} </span> <span v-if="props.config?.btnText">{{ props.config?.btnText }} </span>
<span class="fa fa-plus" v-else></span> <span class="fa fa-plus" v-else></span>
</el-button> </el-button>
<template v-else> <template v-else>
<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 class="icon-plus" v-else></i> <i class="icon-plus" v-else></i>
</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">
{{ props.config?.tip }} {{ props.config?.tip }}
</div> </div>
</template> </template>
</el-upload> </el-upload>
</div> </div>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped></style>
</style>

493
src/components/DesignForm/public/form/childTable.vue
View File

@ -3,275 +3,286 @@
@ 时间: 2023-07-14 08:51:25 @ 时间: 2023-07-14 08:51:25
@ 备注: 表单子表 @ 备注: 表单子表
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import FormItem from './formItem.vue' import FormItem from "./formItem.vue";
import { inject, computed } from 'vue' import { inject, computed } from "vue";
import Tooltips from '@/components/DesignForm/tooltip.vue' import Tooltips from "@/components/DesignForm/tooltip.vue";
import {constFormProps } from '@/api/DesignForm/utils' import { constFormProps } from "@/api/DesignForm/utils";
import { jsonParseStringify } from '@/utils/DesignForm' import { jsonParseStringify } from "@/utils/DesignForm";
import LowcodeImagePage from '@/components/DesignForm/public/expand/lowcodeImage.vue' import LowcodeImagePage from "@/components/DesignForm/public/expand/lowcodeImage.vue";
import AssociatedForms from '@/widget/associatedforms/index.vue' import AssociatedForms from "@/widget/associatedforms/index.vue";
import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue' import UploadPageList from "@/components/DesignForm/public/expand/uploadPageList.vue";
import LokOrgCentent from '@/widget/org/cont.vue'
import { SCOPE } from 'element-plus'
import LokOrgCentent from "@/widget/org/cont.vue";
import { SCOPE } from "element-plus";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
data: any data: any;
}>(), }>(),
{ {
data: () => { data: () => {
return {} return {};
} },
} }
) );
const formProps = inject(constFormProps, {}) as any
const sunTableName = computed(() => {
return props.data.item ? (props.data.item.label ? props.data.item.label : "") : "";
});
const formProps = inject(constFormProps, {}) as any;
const tableDataNew = computed(() => { const tableDataNew = computed(() => {
// console.log("如果编辑页禁用时-----1---->",props.data.name) // console.log("如果编辑页禁用时-----1---->",props.data.name)
// console.log("如果编辑页禁用时-----2---->",formProps.value.model[props.data.name]) // console.log("如果编辑页禁用时-----2---->",formProps.value.model[props.data.name])
// console.log("如果编辑页禁用时-----3---->",formProps.value.model) // console.log("如果编辑页禁用时-----3---->",formProps.value.model)
// console.log("如果编辑页禁用时-----4---->",formProps.value) // console.log("如果编辑页禁用时-----4---->",formProps.value)
return formProps.value.model[props.data.name] return formProps.value.model[props.data.name];
}) });
const type = computed(() => { const type = computed(() => {
return formProps.value.type return formProps.value.type;
}) });
// 如果编辑页禁用时，则返回true // 如果编辑页禁用时，则返回true
const editDisabled = computed(() => { const editDisabled = computed(() => {
return formProps.value.type === 2 && props.data.config?.editDisabled return formProps.value.type === 2 && props.data.config?.editDisabled;
}) });
const addColumn = () => { const addColumn = () => {
// console.log("如果编辑页禁用时--------->",tableDataNew.value) console.log("如果编辑页禁用时--------->", tableDataNew.value);
const temp: any = {} const temp: any = {};
if (props.data.list) { if (props.data.list) {
props.data.list.forEach((item: any) => { props.data.list.forEach((item: any) => {
if (item.name) { if (item.name) {
temp[item.name] = item.control.modelValue temp[item.name] = item.control.modelValue;
} }
}) });
tableDataNew.value.push(jsonParseStringify(temp)) console.log("如果编辑页禁用时-------temp:", temp);
} console.log("如果编辑页禁用时-------jsonParseStringify:", jsonParseStringify(temp));
} tableDataNew.value.push(jsonParseStringify(temp));
const getText = (text: any,val:any,name:any) => { }
console.log("text===>",text) };
console.log("name===>",name) const getText = (text: any, val: any, name: any) => {
console.log("val===>",val) console.log("text===>", text);
if (typeof text === 'string') { console.log("name===>", name);
return text console.log("val===>", val);
} else { if (typeof text === "string") {
return text && text.toString() return text;
} } else {
} return text && text.toString();
}
};
const delColumn = (index: number) => { const delColumn = (index: number) => {
tableDataNew.value.splice(index, 1) tableDataNew.value.splice(index, 1);
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-08-02 13:22:14 @ 时间: 2024-08-02 13:22:14
@ 功能: 时间戳转换对象 @ 功能: 时间戳转换对象
*/ */
const timeToAry = (timestamp:number) => { const timeToAry = (timestamp: number) => {
const date = new Date(timestamp); const date = new Date(timestamp);
const year = date.getFullYear(); const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2); const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2); const day = ("0" + date.getDate()).slice(-2);
const hours = ('0' + date.getHours()).slice(-2); const hours = ("0" + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2); const minutes = ("0" + date.getMinutes()).slice(-2);
const seconds = ('0' + date.getSeconds()).slice(-2); const seconds = ("0" + date.getSeconds()).slice(-2);
return { return {
year:year, year: year,
month:month, month: month,
day:day, day: day,
hours:hours, hours: hours,
minutes:minutes, minutes: minutes,
seconds seconds,
} };
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-08-02 13:02:49 @ 时间: 2024-08-02 13:02:49
@ 功能: 将时间戳转换成字符串 @ 功能: 将时间戳转换成字符串
*/ */
const timeToString = (timeVal:any,types:int) => { const timeToString = (timeVal: any, types: int) => {
let timeStr = "" let timeStr = "";
if(Array.isArray(timeVal)){ if (Array.isArray(timeVal)) {
if(timeVal.length >= 2){ if (timeVal.length >= 2) {
let startTime = timeToAry(timeVal[0]) let startTime = timeToAry(timeVal[0]);
let endTime = timeToAry(timeVal[1]) let endTime = timeToAry(timeVal[1]);
switch(types){ switch (types) {
case "year": //年 case "year": //年
timeStr = `${startTime.year} 至 ${endTime.year}`; timeStr = `${startTime.year} 至 ${endTime.year}`;
break; break;
case "month": //月 case "month": //月
timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`; timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
break; break;
case "datetime": //日期+时间 case "datetime": //日期+时间
timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`; timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
break; break;
case "week": //周 case "week": //周
let startWeek = getYearWeek(startTime) let startWeek = getYearWeek(startTime);
let endWeek = getYearWeek(endTime) let endWeek = getYearWeek(endTime);
timeStr = `${startWeek} 至 ${endWeek}`; timeStr = `${startWeek} 至 ${endWeek}`;
break; break;
case "timeCalss": //时间 case "timeCalss": //时间
timeStr = `${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`; timeStr = `${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
break; break;
case "datetimerange": case "datetimerange":
timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`; timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
break; break;
case "daterange": case "daterange":
timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`; timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
break; break;
case "monthrange": case "monthrange":
timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`; timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
break; break;
default: default:
timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`; timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
break; break;
} }
}else if(timeVal.length == 1){ } else if (timeVal.length == 1) {
let {year,month,day,hours,minutes,seconds} = timeToAry(timeVal[0]) let { year, month, day, hours, minutes, seconds } = timeToAry(timeVal[0]);
switch(types){ switch (types) {
case "year": //年 case "year": //年
timeStr = `${year}`; timeStr = `${year}`;
break; break;
case "month": //月 case "month": //月
timeStr = `${year}-${month}`; timeStr = `${year}-${month}`;
break; break;
case "datetime": //日期+时间 case "datetime": //日期+时间
timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
break; break;
case "week": //周 case "week": //周
timeStr = getYearWeek(timeVal) timeStr = getYearWeek(timeVal);
break; break;
case "timeCalss": //时间 case "timeCalss": //时间
timeStr = `${hours}:${minutes}:${seconds}`; timeStr = `${hours}:${minutes}:${seconds}`;
break; break;
default: default:
timeStr = `${year}-${month}-${day}` timeStr = `${year}-${month}-${day}`;
break; break;
} }
}else{ } else {
timeStr = "未知时间" timeStr = "未知时间";
} }
}else{ } else {
let {year,month,day,hours,minutes,seconds} = timeToAry(timeVal) let { year, month, day, hours, minutes, seconds } = timeToAry(timeVal);
switch(types){ switch (types) {
case "year": //年 case "year": //年
timeStr = `${year}`; timeStr = `${year}`;
break; break;
case "month": //月 case "month": //月
timeStr = `${year}-${month}`; timeStr = `${year}-${month}`;
break; break;
case "datetime": //日期+时间 case "datetime": //日期+时间
timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
break; break;
case "week": //周 case "week": //周
timeStr = getYearWeek(timeVal) timeStr = getYearWeek(timeVal);
break; break;
case "timeCalss": //时间 case "timeCalss": //时间
timeStr = `${hours}:${minutes}:${seconds}`; timeStr = `${hours}:${minutes}:${seconds}`;
break; break;
default: default:
timeStr = `${year}-${month}-${day}` timeStr = `${year}-${month}-${day}`;
break; break;
} }
} }
return timeStr return timeStr;
} };
let associatedFormsIndexTablekey = 0 let associatedFormsIndexTablekey = 0;
/* const emits = defineEmits<{ /* const emits = defineEmits<{
(e: 'asfValueChanged', val: any): void (e: 'asfValueChanged', val: any): void
}>() */ }>() */
let emits = defineEmits(['optionsValue3GetTable','asfValueChanged']); let emits = defineEmits(["optionsValue3GetTable", "asfValueChanged"]);
function asfValueChanged(val:any){ function asfValueChanged(val: any) {
//console.log("childTable-asfValueChanged",val) //console.log("childTable-asfValueChanged",val)
emits("asfValueChanged",val) emits("asfValueChanged", val);
} }
function optionsValue3Get1(data: any,fieldName: string){ function optionsValue3Get1(data: any, fieldName: string) {
fieldName = "childTable---"+props.data.name+"---"+fieldName fieldName = "childTable---" + props.data.name + "---" + fieldName;
/* console.log("childTable---optionsValue3Get1") /* console.log("childTable---optionsValue3Get1")
console.log(props.data.name) */ console.log(props.data.name) */
emits('optionsValue3GetTable',data,fieldName) emits("optionsValue3GetTable", data, fieldName);
} }
</script> </script>
<template> <template>
<div class="form-table form-table-add">
<div class="form-table form-table-add"> <el-text class="mx-1" size="large">{{ sunTableName }}</el-text>
<el-table <el-table v-bind="data.control" :class="[data.className]" :data="tableDataNew">
v-bind="data.control" <el-table-column
:class="[data.className]" v-for="(item, index) in data.list"
:data="tableDataNew" :key="index"
> :prop="item.name"
<el-table-column :label="item.item.label"
v-for="(item, index) in data.list" :width="item.item.span"
:key="index" >
:prop="item.name" <template #default="scope">
:label="item.item.label" <span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>
:width="item.item.span" <div v-if="type === 4 || editDisabled">
> <LokOrgCentent
<template #default="scope"> v-if="item.type == 'orgCentent'"
:orgid="scope.row[item.name].toString()"
<span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span> />
<div v-if="type === 4 || editDisabled"> <div v-else-if="item.type == 'lowcodeImage'">
<LokOrgCentent v-if="item.type == 'orgCentent'" :orgid="scope.row[item.name].toString()" /> <LowcodeImagePage :data="item" v-model="scope.row[item.name]" />
<div v-else-if="item.type=='lowcodeImage'"> </div>
<LowcodeImagePage :data="item" <div v-else-if="item.type == 'upload'">
v-model="scope.row[item.name]" /> <UploadPageList
</div> :data="item"
<div v-else-if="item.type=='upload'" > :img-list="scope.row[item.name]"
<UploadPageList :data="item" :img-list="scope.row[item.name]" :control="item.control" /> :control="item.control"
</div> />
<div v-else-if="item.type=='datePicker'" v-html="timeToString(scope.row[item.name],item.control.type)"> </div>
</div> <div
<div v-else-if="item.type=='associatedForms'"> v-else-if="item.type == 'datePicker'"
<AssociatedForms :data="item" v-html="timeToString(scope.row[item.name], item.control.type)"
v-model="scope.row[item.name]" :tablekey="associatedFormsIndexTablekey" :row-index="scope.$index"/> ></div>
</div> <div v-else-if="item.type == 'associatedForms'">
<div v-else>{{ getText(scope.row[item.name],scope.row,item.name) }}</div> <AssociatedForms
</div> :data="item"
<div v-else> v-model="scope.row[item.name]"
:tablekey="associatedFormsIndexTablekey"
<form-item :row-index="scope.$index"
v-model="scope.row[item.name]" />
:tProp="`${data.name}.${scope.$index}.${item.name}`" </div>
:row-index="scope.$index" <div v-else>{{ getText(scope.row[item.name], scope.row, item.name) }}</div>
:data="item" </div>
@asf-value-changed="asfValueChanged" <div v-else>
@optionsValue3Get1="optionsValue3Get1" <form-item
/> v-model="scope.row[item.name]"
</div> :tProp="`${data.name}.${scope.$index}.${item.name}`"
</template> :row-index="scope.$index"
<template #header="scope" v-if="item.help"> :data="item"
{{ scope.column.label }} @asf-value-changed="asfValueChanged"
<Tooltip :content="item.help" /> @optionsValue3Get1="optionsValue3Get1"
</template> />
</el-table-column> </div>
<el-table-column </template>
prop="del" <template #header="scope" v-if="item.help">
label="操作" {{ scope.column.label }}
v-if="[1, 2].includes(type as number) && data.config.delBtnText && !editDisabled" <Tooltip :content="item.help" />
> </template>
<template #default="scope"> </el-table-column>
<el-button link type="primary" @click="delColumn(scope.$index)">{{ data.config.delBtnText }}</el-button> <el-table-column
</template> prop="del"
</el-table-column> label="操作"
</el-table> v-if="[1, 2].includes(type as number) && data.config.delBtnText && !editDisabled"
<div >
class="table-btn" <template #default="scope">
v-if="[1, 2].includes(type as number) && data.config.addBtnText && !editDisabled" <el-button link type="primary" @click="delColumn(scope.$index)">{{
> data.config.delBtnText
<el-button size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button> }}</el-button>
</div> </template>
</div> </el-table-column>
</el-table>
<div
class="table-btn"
v-if="[1, 2].includes(type as number) && data.config.addBtnText && !editDisabled"
>
<el-button size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button>
</div>
</div>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped></style>
</style>

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

@ -815,6 +815,7 @@ function optionsValue3GetTable(data: any, fieldName: string) {
<!--表格组件--> <!--表格组件-->
<template v-else-if="element.type === 'table'"> <template v-else-if="element.type === 'table'">
<div class="form-table" v-if="type === 5"> <div class="form-table" v-if="type === 5">
{{ element.item ? (element.item.label ? element.item.label : 2) : 3 }}
<!-- <form-group :data="element.list" data-type="not-nested" /> --> <!-- <form-group :data="element.list" data-type="not-nested" /> -->
<form-group :data="element.list" data-type="not-table" /> <form-group :data="element.list" data-type="not-table" />
</div> </div>

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

@ -1370,6 +1370,7 @@ const diGuiJilian = (val: any, options: any[]) => {
? data.control.placeholder ? data.control.placeholder
: '请选择' + getLabel(data.item) : '请选择' + getLabel(data.item)
" "
:data="data"
v-model="value" v-model="value"
/> />
<component <component

10
src/components/IconSelect/appMenuSvgPage.vue
View File

@ -47,6 +47,7 @@ watch(
} }
} }
); );
const filterValue = ref("");
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-22 16:43:49 @ 时间: 2024-04-22 16:43:49
@ -65,6 +66,15 @@ const handleSelect = (svgName: string) => {
emits("update:svgName", svgName); emits("update:svgName", svgName);
handleClose(); handleClose();
}; };
/**
@ 作者: 秦东
@ 时间: 2025-02-24 11:24:50
@ 功能: 搜索图标
*/
const handleFilter = (val: any) => {
// console.log("搜索图标--->", val, props.iconList);s
filterIconNames.value = props.iconList.filter((item) => item.includes(val));
};
</script> </script>
<template> <template>
<el-dialog <el-dialog

605
src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
View File

@ -3,75 +3,81 @@
@ 时间: 2024-04-22 08:56:40 @ 时间: 2024-04-22 08:56:40
@ 备注: @ 备注:
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import type { import type {
AllowDropType, AllowDropType,
NodeDropType, NodeDropType,
} from 'element-plus/es/components/tree/src/tree.type' } from "element-plus/es/components/tree/src/tree.type";
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type" import { appMenuTreeInfo, appSetInfo } from "@/api/date/type";
import { gainAllAppMenu,editAppMenuCont,appMenuShowOrHide,delAppMenu,editAppMenusIcon } from '@/api/DesignForm/requestapi' import {
gainAllAppMenu,
editAppMenuCont,
appMenuShowOrHide,
delAppMenu,
editAppMenusIcon,
} from "@/api/DesignForm/requestapi";
import SvgIcon from "@/components/SvgIcon/index.vue"; import SvgIcon from "@/components/SvgIcon/index.vue";
import { threeShiyanData } from "@/api/date/type" import { threeShiyanData } from "@/api/date/type";
import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue"; import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue";
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue" import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue";
import EditAppMenuNamePage from "@/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue" import EditAppMenuNamePage from "@/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue";
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue" import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue";
const props = defineProps({ const props = defineProps({
appCont:{ appCont: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} },
}, },
formKey:{ formKey: {
type:String, type: String,
default:"" default: "",
}, },
menusTree:{ menusTree: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} },
}, },
drawerWith:{ drawerWith: {
type:Number, type: Number,
default:0 default: 0,
}, },
groupKey:{ groupKey: {
type:String, type: String,
default:"" default: "",
}, },
appPageKey:{ appPageKey: {
type:String, type: String,
default:"" default: "",
} },
}); });
const svgIsShow = ref(false) const svgIsShow = ref(false);
const emits = defineEmits(["update:menusTree","update:appPageKey","openAppPageForm"]); const emits = defineEmits(["update:menusTree", "update:appPageKey", "openAppPageForm"]);
const appOenMenu = ref<appMenuTreeInfo>({}) const appOenMenu = ref<appMenuTreeInfo>({});
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-24 13:17:30 @ 时间: 2024-04-24 13:17:30
@ 功能: 菜单列表 @ 功能: 菜单列表
*/ */
const appMenuTree = computed({ const appMenuTree = computed({
get() { get() {
return props.menusTree return props.menusTree;
}, },
set(val: any) { set(val: any) {
emits('update:menusTree', val) emits("update:menusTree", val);
} },
}); });
const appPageKey = computed({ const appPageKey = computed({
get() { get() {
return props.appPageKey return props.appPageKey;
}, },
set(val: any) { set(val: any) {
emits('update:appPageKey', val) emits("update:appPageKey", val);
} },
}); });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ -79,307 +85,330 @@ const appPageKey = computed({
@ 功能: 树移动完毕后执行的操作 @ 功能: 树移动完毕后执行的操作
*/ */
const handleDrop = ( const handleDrop = (
draggingNode: Node, draggingNode: Node,
dropNode: Node, dropNode: Node,
dropType: NodeDropType, dropType: NodeDropType,
ev: DragEvents ev: DragEvents
) => { ) => {
// console.log('树移动完毕后执行的操作====1========>',draggingNode) // console.log('树移动完毕后执行的操作====1========>',draggingNode)
// console.log('树移动完毕后执行的操作=====2=======>',dropNode) // console.log('树移动完毕后执行的操作=====2=======>',dropNode)
// console.log('树移动完毕后执行的操作=====3=======>',dropType) // console.log('树移动完毕后执行的操作=====3=======>',dropType)
// console.log('树移动完毕后执行的操作=====4=======>',ev) // console.log('树移动完毕后执行的操作=====4=======>',ev)
// return false; // return false;
let sendCont = { let sendCont = {
id:props.appCont.uuid, id: props.appCont.uuid,
menuTree:appMenuTree.value menuTree: appMenuTree.value,
} };
editAppMenuCont(sendCont) editAppMenuCont(sendCont).then((data) => {
.then((data)=>{ // console.log('树移动完毕后执行的操作============>',data)
// console.log('树移动完毕后执行的操作============>',data) });
}) };
}
const treeList = ref<any[]>([]) const treeList = ref<any[]>([]);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-22 15:53:35 @ 时间: 2024-04-22 15:53:35
@ 功能: 加载SVG图标 @ 功能: 加载SVG图标
*/ */
const allIconNames:string[] = []; const allIconNames: string[] = [];
const loadIcons = () => { const loadIcons = () => {
const icons = import.meta.glob("../../../../assets/icons/*.svg"); const icons = import.meta.glob("../../../../assets/icons/*.svg");
for (const icon in icons) { for (const icon in icons) {
const iconName = icon.split("assets/icons/")[1].split(".svg")[0]; const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
allIconNames.push(iconName); allIconNames.push(iconName);
} }
// console.log("icons",icons) // console.log("icons",icons)
// console.log("allIconNames",allIconNames) // console.log("allIconNames",allIconNames)
} };
onMounted(()=>{ onMounted(() => {
treeList.value = threeShiyanData treeList.value = threeShiyanData;
loadIcons(); loadIcons();
}) });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-22 16:52:03 @ 时间: 2024-04-22 16:52:03
@ 功能: 设置表单图标 @ 功能: 设置表单图标
*/ */
const svgName = ref("") const svgName = ref("");
const svgId= ref("") const svgId = ref("");
const setAppMenusSvg = (val:any) =>{ const setAppMenusSvg = (val: any) => {
// console.log("选择----setAppMenusSvg--->",val) // console.log("选择----setAppMenusSvg--->",val)
svgName.value = val.svg svgName.value = val.svg;
svgId.value = val.id svgId.value = val.id;
treeList.value = val treeList.value = val;
svgIsShow.value = true; svgIsShow.value = true;
} };
watch(()=>svgName.value,(val:string)=>{ watch(
// console.log("监听----svgName--->",val) () => svgName.value,
// console.log("监听----threeShiyanData--->",threeShiyanData) (val: string) => {
diguiData(appMenuTree.value) // console.log("监听----svgName--->",val)
}) // console.log("监听----threeShiyanData--->",threeShiyanData)
diguiData(appMenuTree.value);
}
);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-23 09:44:14 @ 时间: 2024-04-23 09:44:14
@ 功能: 递归判断是哪个节点换了图标 @ 功能: 递归判断是哪个节点换了图标
*/ */
const diguiData = (val:any) =>{ const diguiData = (val: any) => {
// console.log('跳出循环:', val); // console.log('跳出循环:', val);
if(Array.isArray(val)){ if (Array.isArray(val)) {
try { try {
val.forEach((item:any) => { val.forEach((item: any) => {
// console.log('跳出循环--1-->:',item.id); // console.log('跳出循环--1-->:',item.id);
// console.log('跳出循环---->:',svgId.value); // console.log('跳出循环---->:',svgId.value);
if(item.id == svgId.value){ if (item.id == svgId.value) {
item.svg = svgName.value item.svg = svgName.value;
let sendInfo = { let sendInfo = {
id:item.id.toString(), id: item.id.toString(),
label:svgName.value label: svgName.value,
} };
editAppMenusIcon(sendInfo) editAppMenusIcon(sendInfo).then(({ data }) => {});
.then(({data}) => { throw item;
}
}) if (item.children && Array.isArray(item.children)) {
throw item; diguiData(item.children);
} }
if(item.children&&Array.isArray(item.children)){ });
diguiData(item.children) } catch (e) {
} // console.log('跳出循环:', threeShiyanData);
}); }
} catch (e) { }
// console.log('跳出循环:', threeShiyanData); };
}
}
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-24 13:12:18 @ 时间: 2024-04-24 13:12:18
@ 功能: 新建子分组 @ 功能: 新建子分组
*/ */
const menuGroupShow = ref(false) const menuGroupShow = ref(false);
const menuParentKey = ref("") const menuParentKey = ref("");
const addNewSunMenuGroup = (val:any) =>{ const addNewSunMenuGroup = (val: any) => {
console.log('新建子分组:', val); console.log("新建子分组:", val);
menuParentKey.value = val.id.toString() menuParentKey.value = val.id.toString();
console.log('新建子分组-->:', menuParentKey.value); console.log("新建子分组-->:", menuParentKey.value);
menuGroupShow.value = true menuGroupShow.value = true;
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-24 13:22:47 @ 时间: 2024-04-24 13:22:47
@ 功能: 更新 @ 功能: 更新
*/ */
const gainSunAppContent = () =>{ const gainSunAppContent = () => {
// console.log('更新:'); // console.log('更新:');
gainAllAppMenu({id:props.appCont.uuid}) gainAllAppMenu({ id: props.appCont.uuid }).then((data) => {
.then((data) =>{ // console.log('更新:',data);
// console.log('更新:',data); appMenuTree.value = data.data;
appMenuTree.value = data.data // openAppPage(appOenMenu)
// openAppPage(appOenMenu) });
}) };
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-25 13:23:46 @ 时间: 2024-04-25 13:23:46
@ 功能: 修改名称 @ 功能: 修改名称
*/ */
const editAppMenuNameShow = ref(false) const editAppMenuNameShow = ref(false);
const editMenuName = (val:appMenuTreeInfo) =>{ const editMenuName = (val: appMenuTreeInfo) => {
// console.log('修改名称:',val); // console.log('修改名称:',val);
appOenMenu.value = val appOenMenu.value = val;
editAppMenuNameShow.value = true editAppMenuNameShow.value = true;
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-07 09:00:47 @ 时间: 2024-05-07 09:00:47
@ 功能: 显示和隐藏菜单 @ 功能: 显示和隐藏菜单
*/ */
const showOrHide = (val:appMenuTreeInfo,types:number) =>{ const showOrHide = (val: appMenuTreeInfo, types: number) => {
// console.log('显示和隐藏菜单:',val,types); // console.log('显示和隐藏菜单:',val,types);
let sendInfo = { let sendInfo = {
types:types, types: types,
menuInfo:val menuInfo: val,
} };
appMenuShowOrHide(sendInfo) appMenuShowOrHide(sendInfo).then((data) => {
.then((data) =>{ // console.log('显示和隐藏菜单:',data);
// console.log('显示和隐藏菜单:',data); gainSunAppContent();
gainSunAppContent() });
}); };
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-07 10:03:30 @ 时间: 2024-05-07 10:03:30
@ 功能: 删除app自定义菜单 @ 功能: 删除app自定义菜单
*/ */
const editAppMenu = (val:appMenuTreeInfo) =>{ const editAppMenu = (val: appMenuTreeInfo) => {
// console.log('editAppMenu:',val); // console.log('editAppMenu:',val);
ElMessageBox.confirm( ElMessageBox.confirm("您确定要删除此项？一经删除！将不可恢复！请慎重操作", "删除提示", {
"您确定要删除此项？一经删除！将不可恢复！请慎重操作", confirmButtonText: "确定",
"删除提示", cancelButtonText: "取消",
{ type: "warning",
confirmButtonText: '确定', }).then(() => {
cancelButtonText: '取消', let sendInfo = {
type: 'warning', id: val.id.toString(),
} status: 3,
) };
.then(() => { delAppMenu(sendInfo).then((data) => {
let sendInfo = { // console.log('删除app自定义菜单:',data);
id:val.id.toString(), gainSunAppContent();
status:3 ElMessage({
} type: "success",
delAppMenu(sendInfo) message: data.msg,
.then((data) =>{ });
// console.log('删除app自定义菜单:',data); });
gainSunAppContent() });
ElMessage({ };
type: 'success', const saveAppFormIsShow = ref(false);
message: data.msg,
})
});
})
}
const saveAppFormIsShow = ref(false)
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-07 11:21:39 @ 时间: 2024-05-07 11:21:39
@ 功能: 新增表单页面 @ 功能: 新增表单页面
*/ */
const creetMenuId = ref("") const creetMenuId = ref("");
const isNew = ref(false) const isNew = ref(false);
const createNewPage = (val?:string) => { const createNewPage = (val?: string) => {
creetMenuId.value = val.toString(); creetMenuId.value = val.toString();
saveAppFormIsShow.value = true; saveAppFormIsShow.value = true;
isNew.value = true isNew.value = true;
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-17 14:22:12 @ 时间: 2024-05-17 14:22:12
@ 功能: 判断能否拖入此节点 @ 功能: 判断能否拖入此节点
*/ */
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => { const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
// console.log("draggingNode--->",draggingNode) // console.log("draggingNode--->",draggingNode)
// console.log("dropNode--->",dropNode) // console.log("dropNode--->",dropNode)
// console.log("type--->",type) // console.log("type--->",type)
// if (dropNode.data.type === 2) { // if (dropNode.data.type === 2) {
// return false // return false
// } else { // } else {
// return true // return true
// } // }
if(draggingNode.data.type === 2 && dropNode.data.type === 2 && type == "inner"){ if (draggingNode.data.type === 2 && dropNode.data.type === 2 && type == "inner") {
return false return false;
}else{ } else {
return true return true;
} }
// return true // return true
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-17 16:45:40 @ 时间: 2024-05-17 16:45:40
@ 功能: 打开app表单 @ 功能: 打开app表单
*/ */
const openAppPage = (val:any) =>{ const openAppPage = (val: any) => {
// console.log("打开app表单------>",val) // console.log("打开app表单------>",val)
if(val.isLock == 1){ if (val.isLock == 1) {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: '该页面为系统内置页面！请到应用层面访问查看!', message: "该页面为系统内置页面！请到应用层面访问查看!",
type: 'warning', type: "warning",
}) });
}else{ } else {
if(val.type !== 1){ if (val.type !== 1) {
// console.log("打开app表单--1---->",val) // console.log("打开app表单--1---->",val)
emits('openAppPageForm', val) emits("openAppPageForm", val);
} }
} }
};
}
</script> </script>
<template> <template>
<el-tree
<el-tree :data="appMenuTree"
:data="appMenuTree" draggable
draggable default-expand-all
default-expand-all node-key="id"
node-key="id" :allow-drop="allowDrop"
:allow-drop="allowDrop" :expand-on-click-node="true"
:expand-on-click-node="true" @node-drag-start="startDrop"
@node-drag-start="startDrop" @node-drop="handleDrop"
@node-drop="handleDrop" >
> <template #default="{ node, data }">
<template #default="{ node, data }"> <div class="appMenuTitle">
<el-space wrap>
<div class="appMenuTitle"> <svg-icon prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" />
<el-space wrap> <!-- <el-tooltip :content="node.label" placement="top" effect="dark">
<svg-icon prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" />
<!-- <el-tooltip :content="node.label" placement="top" effect="dark">
<el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{node.label}}</el-text> <el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{node.label}}</el-text>
</el-tooltip> --> </el-tooltip> -->
<el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{node.label}}</el-text> <el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{
</el-space> node.label
<el-dropdown> }}</el-text>
<svg-icon class="svgBox" prefix="icon" icon-class="set" /> </el-space>
<template #dropdown> <el-dropdown>
<el-dropdown-item @click="editMenuName(data)">修改名称</el-dropdown-item> <svg-icon class="svgBox" prefix="icon" icon-class="set" />
<!-- <el-dropdown-item @click="">复制</el-dropdown-item> --> <template #dropdown>
<!-- <el-dropdown-item @click="moveMenus(data)">移动到</el-dropdown-item> --> <el-dropdown-item @click="editMenuName(data)">修改名称</el-dropdown-item>
<el-dropdown-item v-if="data.type==1" divided @click="addNewSunMenuGroup(data)">新建子分组</el-dropdown-item> <!-- <el-dropdown-item @click="">复制</el-dropdown-item> -->
<!-- <el-dropdown-item @click="">新建普通表单</el-dropdown-item> <!-- <el-dropdown-item @click="moveMenus(data)">移动到</el-dropdown-item> -->
<el-dropdown-item
v-if="data.type == 1"
divided
@click="addNewSunMenuGroup(data)"
>新建子分组</el-dropdown-item
>
<!-- <el-dropdown-item @click="">新建普通表单</el-dropdown-item>
<el-dropdown-item @click="">新建流程表单</el-dropdown-item> --> <el-dropdown-item @click="">新建流程表单</el-dropdown-item> -->
<el-dropdown-item v-if="data.type==1" @click="createNewPage(data.id)">新建页面</el-dropdown-item> <el-dropdown-item v-if="data.type == 1" @click="createNewPage(data.id)"
<el-dropdown-item @click="showOrHide(data,1)" divided><el-text v-if="data.pcIsShow==1">隐藏PC端</el-text><el-text v-else>取消-隐藏PC端</el-text></el-dropdown-item> >新建页面</el-dropdown-item
<el-dropdown-item @click="showOrHide(data,2)"><el-text v-if="data.wapIsShow==1">隐藏移动端</el-text><el-text v-else>取消-隐藏移动端</el-text></el-dropdown-item> >
<el-dropdown-item @click="editAppMenu(data)" divided> <el-dropdown-item @click="showOrHide(data, 1)" divided
<el-text class="mx-1" type="danger">删除</el-text> ><el-text v-if="data.pcIsShow == 1">隐藏PC端</el-text
</el-dropdown-item> ><el-text v-else>取消-隐藏PC端</el-text></el-dropdown-item
</template> >
</el-dropdown> <el-dropdown-item @click="showOrHide(data, 2)"
</div> ><el-text v-if="data.wapIsShow == 1">隐藏移动端</el-text
><el-text v-else>取消-隐藏移动端</el-text></el-dropdown-item
</template> >
</el-tree> <el-dropdown-item @click="editAppMenu(data)" divided>
<AppMenuSvgPage v-model:is-show="svgIsShow" v-model:svg-name="svgName" :svg-id="svgId" :icon-list="allIconNames" /> <el-text class="mx-1" type="danger">删除</el-text>
<AppMenuGroup v-model:is-show="menuGroupShow" :parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" /> </el-dropdown-item>
<EditAppMenuNamePage v-model:is-show="editAppMenuNameShow" :menu-cont="appOenMenu" @updateMenu="gainSunAppContent" /> </template>
<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :is-new="isNew" v-model:app-page-key="appPageKey" :drawer-with="props.drawerWith" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" :menu-id="creetMenuId" @gainSunAppContent="gainSunAppContent" /> </el-dropdown>
</div>
</template>
</el-tree>
<AppMenuSvgPage
v-model:is-show="svgIsShow"
v-model:svg-name="svgName"
:svg-id="svgId"
:icon-list="allIconNames"
/>
<AppMenuGroup
v-model:is-show="menuGroupShow"
:parent-key="menuParentKey"
:app-cont="props.appCont"
@updateMenu="gainSunAppContent"
/>
<EditAppMenuNamePage
v-model:is-show="editAppMenuNameShow"
:menu-cont="appOenMenu"
@updateMenu="gainSunAppContent"
/>
<CreateAppFormPage
v-if="saveAppFormIsShow"
v-model:is-show="saveAppFormIsShow"
:is-new="isNew"
v-model:app-page-key="appPageKey"
:drawer-with="props.drawerWith"
:form-Key="props.formKey"
:app-cont="props.appCont"
:group-key="props.groupKey"
:menu-id="creetMenuId"
@gainSunAppContent="gainSunAppContent"
/>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.appMenuTitle{ .appMenuTitle {
width: 100%; width: 100%;
padding-right: 5px; padding-right: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.svgBox{ .svgBox {
display: none; display: none;
} }
} }
.appMenuTitle:hover .svgBox{ .appMenuTitle:hover .svgBox {
display: block; display: block;
} }
</style> </style>

211
src/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue
View File

@ -3,128 +3,141 @@
@ 时间: 2024-05-22 09:37:55 @ 时间: 2024-05-22 09:37:55
@ 备注: 应用设置 @ 备注: 应用设置
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import SetUp from '@/views/sysworkflow/lowcodepage/appPage/appSetUp/setup.vue' import SetUp from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/setup.vue";
import AppPower from '@/views/sysworkflow/lowcodepage/appPage/appSetUp/appPower.vue' import AppPower from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/appPower.vue";
import AppDevOps from '@/views/sysworkflow/lowcodepage/appPage/appSetUp/appDevOps.vue' import AppDevOps from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/appDevOps.vue";
import DataManagement from '@/views/sysworkflow/lowcodepage/appPage/appSetUp/dataManagement.vue' import DataManagement from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/dataManagement.vue";
const props = defineProps({ const props = defineProps({
appCont:{ appCont: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} },
}, },
groupKey:{ groupKey: {
type:String, type: String,
default:"" default: "",
} },
}); });
const activeMenuIndex = ref("1") const activeMenuIndex = ref("1");
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-23 09:47:00 @ 时间: 2024-05-23 09:47:00
@ 功能: 菜单打开 @ 功能: 菜单打开
*/ */
const handleOpen = (key: string, keyPath: string[]) => { const handleOpen = (key: string, keyPath: string[]) => {
// console.log("菜单打开",key, keyPath) // console.log("菜单打开",key, keyPath)
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-23 09:47:09 @ 时间: 2024-05-23 09:47:09
@ 功能: 菜单关闭 @ 功能: 菜单关闭
*/ */
const handleClose = (key: string, keyPath: string[]) => { const handleClose = (key: string, keyPath: string[]) => {
// console.log("菜单关闭",key, keyPath) // console.log("菜单关闭",key, keyPath)
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-23 10:19:45 @ 时间: 2024-05-23 10:19:45
@ 功能: 单击菜单 @ 功能: 单击菜单
*/ */
const clickMenu = (key:number) => { const clickMenu = (key: number) => {
activeMenuIndex.value = key activeMenuIndex.value = key;
} };
</script> </script>
<template> <template>
<el-container>
<el-container> <el-aside class="appMenuBox">
<el-aside class="appMenuBox"> <el-menu
<el-menu default-active="1"
default-active="1" class="el-menu-vertical-demo allHeight"
class="el-menu-vertical-demo allHeight" @open="handleOpen"
@open="handleOpen" @close="handleClose"
@close="handleClose" >
> <el-menu-item index="1" @click="clickMenu(1)">
<el-menu-item index="1" @click="clickMenu(1)"> <template #title>
<template #title> <i class="fa fa-cog icont"></i>
<i class="fa fa-cog icont"></i> <span>基础设置</span>
<span>基础设置</span> </template>
</template> </el-menu-item>
</el-menu-item> <el-menu-item index="2" @click="clickMenu(2)">
<el-menu-item index="2" @click="clickMenu(2)"> <template #title>
<template #title> <i class="fa fa-lock icont"></i>
<i class="fa fa-lock icont"></i> <span>应用权限</span>
<span>应用权限</span> </template>
</template> </el-menu-item>
</el-menu-item> <el-menu-item index="3" @click="clickMenu(3)">
<el-menu-item index="3" @click="clickMenu(3)"> <template #title>
<template #title> <i class="fa fa-clone icont"></i>
<i class="fa fa-clone icont"></i> <span>部署运维</span>
<span>部署运维</span> </template>
</template> </el-menu-item>
</el-menu-item> <el-menu-item index="4" @click="clickMenu(4)">
<el-menu-item index="4" @click="clickMenu(4)"> <template #title>
<template #title> <i class="fa fa-database icont"></i>
<i class="fa fa-database icont"></i> <span>数据管理</span>
<span>数据管理</span> </template>
</template> </el-menu-item>
</el-menu-item> </el-menu>
</el-menu> </el-aside>
</el-aside> <el-main class="appSetUpBox">
<el-main class="appSetUpBox"> <el-scrollbar class="appSetUpDraw">
<el-scrollbar class="appSetUpDraw"> <SetUp
<SetUp v-if="activeMenuIndex==1" :app-cont="appCont" :group-key="props.groupKey" /> v-if="activeMenuIndex == 1"
<AppPower v-if="activeMenuIndex==2" :app-cont="appCont" :group-key="props.groupKey" /> :app-cont="appCont"
<AppDevOps v-if="activeMenuIndex==3" :app-cont="appCont" :group-key="props.groupKey" /> :group-key="props.groupKey"
<DataManagement v-if="activeMenuIndex==4" :app-cont="appCont" :group-key="props.groupKey" /> />
</el-scrollbar> <AppPower
</el-main> v-if="activeMenuIndex == 2"
</el-container> :app-cont="appCont"
:group-key="props.groupKey"
/>
<AppDevOps
v-if="activeMenuIndex == 3"
:app-cont="appCont"
:group-key="props.groupKey"
/>
<DataManagement
v-if="activeMenuIndex == 4"
:app-cont="appCont"
:group-key="props.groupKey"
/>
</el-scrollbar>
</el-main>
</el-container>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.appMenuBox {
.appMenuBox{ width: 200px;
width: 200px; .allHeight {
.allHeight{ height: calc(100vh - 45px);
height: calc(100vh - 45px); .icont {
.icont{ margin-left: 15px;
margin-left:15px; margin-right: 10px;
margin-right:10px; font-size: 16px;
font-size:16px; }
} }
} ::v-deep .el-menu-item.is-active {
::v-deep .el-menu-item.is-active{ background-color: #ecf5ff;
background-color : #ecf5ff }
} ::v-deep .el-menu-item .is-active:hover {
::v-deep .el-menu-item .is-active:hover{ background-color: #ecf5ff;
background-color : #ecf5ff }
} ::v-deep .el-menu--vertical .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
::v-deep .el-menu--vertical .nest-menu .el-sub-menu > .el-sub-menu__title:hover, .el-menu--vertical .el-menu-item:hover{ .el-menu--vertical .el-menu-item:hover {
background-color : #ecf5ff; background-color: #ecf5ff;
color:#FFFFFF; color: #ffffff;
} }
} }
.appSetUpBox{ .appSetUpBox {
padding:0; padding: 0;
background: var(--el-fill-color-light); background: var(--el-fill-color-light);
.appSetUpDraw{ .appSetUpDraw {
background: var(--el-fill-color-light); background: var(--el-fill-color-light);
height: calc(100vh - 40px); height: calc(100vh - 40px);
padding: 15px; padding: 15px;
} }
} }
</style> </style>

327
src/views/sysworkflow/lowcodepage/appPage/appSetUp/setup.vue
View File

@ -3,195 +3,218 @@
@ 时间: 2024-05-22 14:33:09 @ 时间: 2024-05-22 14:33:09
@ 备注: app设置 @ 备注: app设置
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { uploadUrl } from '@/api/DesignForm' import { uploadUrl } from "@/api/DesignForm";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus' import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { appSetUpContent } from '@src/api/DesignForm/types' import { appSetUpContent } from "@src/api/DesignForm/types";
import { customerFormGroupList,appBasicSettings } from '@/api/DesignForm/requestapi' import { customerFormGroupList, appBasicSettings } from "@/api/DesignForm/requestapi";
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus' import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
const props = defineProps({ const props = defineProps({
appCont:{ appCont: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} },
}, },
groupKey:{ groupKey: {
type:String, type: String,
default:"" default: "",
} },
}); });
const appLoading = ref(false) const appLoading = ref(false);
const formSize = ref<ComponentSize>('default') const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>();
const appSetupCont = reactive<appSetUpContent>({ const appSetupCont = reactive<appSetUpContent>({
id:props.appCont.uuid, id: props.appCont.uuid,
title:props.appCont.appName, title: props.appCont.appName,
appSvg:props.appCont.appSvg, appSvg: props.appCont.appSvg,
groupKey:props.groupKey, groupKey: props.groupKey,
appdescribe:props.appCont.describe appdescribe: props.appCont.describe,
}) });
const rules = reactive<FormRules<appSetUpContent>>({ const rules = reactive<FormRules<appSetUpContent>>({
groupKey: [{ required: true, message: "请选择分组", trigger: "blur" }], groupKey: [{ required: true, message: "请选择分组", trigger: "blur" }],
title: [{ required: true, message: "请输入App名称", trigger: "blur" }], title: [{ required: true, message: "请输入App名称", trigger: "blur" }],
}) });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-22 15:55:21 @ 时间: 2024-05-22 15:55:21
@ 功能: 分组数据 @ 功能: 分组数据
*/ */
const formGroup = ref<any[]>([]) const formGroup = ref<any[]>([]);
const gainFormGroupList = () =>{ const gainFormGroupList = () => {
let sendInfo = { let sendInfo = {
page:1, page: 1,
pagesize:10000, pagesize: 10000,
state:1 state: 1,
} };
customerFormGroupList(sendInfo) customerFormGroupList(sendInfo).then((data) => {
.then((data)=>{ formGroup.value = data.data;
formGroup.value = data.data });
}) };
} watch(
watch(()=>props.appCont,(val:any)=>{ () => props.appCont,
gainFormGroupList(); (val: any) => {
},{ gainFormGroupList();
deep:true, },
}) {
onMounted(()=>{ deep: true,
gainFormGroupList(); }
}) );
onMounted(() => {
gainFormGroupList();
});
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-22 16:10:27 @ 时间: 2024-05-22 16:10:27
@ 功能: 重置表单 @ 功能: 重置表单
*/ */
const resetForm = (formEl: FormInstance | undefined) => { const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return;
formEl.resetFields() formEl.resetFields();
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-22 16:21:18 @ 时间: 2024-05-22 16:21:18
@ 功能: 提交表单数据 @ 功能: 提交表单数据
*/ */
const submitForm = () => { const submitForm = () => {
appLoading.value = true appLoading.value = true;
ruleFormRef.value.validate((isValid: boolean) => { ruleFormRef.value.validate((isValid: boolean) => {
if (isValid) { if (isValid) {
// console.log("提交数据",appSetupCont) // console.log("提交数据",appSetupCont)
appBasicSettings(appSetupCont) appBasicSettings(appSetupCont)
.then(() =>{ .then(() => {
props.appCont.appName = appSetupCont.title props.appCont.appName = appSetupCont.title;
props.appCont.appSvg = appSetupCont.appSvg props.appCont.appSvg = appSetupCont.appSvg;
props.appCont.describe = appSetupCont.appdescribe props.appCont.describe = appSetupCont.appdescribe;
ElMessage.success("编辑成功"); ElMessage.success("编辑成功");
appLoading.value = false; appLoading.value = false;
}) })
.finally(() =>{appLoading.value = false;}) .finally(() => {
}else{ appLoading.value = false;
appLoading.value = false });
} } else {
}) appLoading.value = false;
} }
const appSetupUpImg = ref(null) });
};
const appSetupUpImg = ref(null);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-23 09:20:29 @ 时间: 2024-05-23 09:20:29
@ 功能: 上传成功后回调 @ 功能: 上传成功后回调
*/ */
const handleAvatarSuccess: UploadProps['onSuccess'] = ( const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
response, // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
uploadFile appSetupCont.appSvg = response.data.url;
) => { // appSetupUpImg.clearFiles()
// imageUrl.value = URL.createObjectURL(uploadFile.raw!) };
appSetupCont.appSvg = response.data.url
// appSetupUpImg.clearFiles()
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-10 11:28:40 @ 时间: 2024-05-10 11:28:40
@ 功能: 上传前验证 @ 功能: 上传前验证
*/ */
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => { const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/icon') { if (
ElMessage.error('请上传以下格式的图片(jpg、jpeg、png、gif、icon)!'+rawFile.type) rawFile.type !== "image/jpeg" &&
return false rawFile.type !== "image/jpg" &&
} else if (rawFile.size / 1024 / 1024 > 800) { rawFile.type !== "image/png" &&
ElMessage.error('图片大小不要大于 800MB!') rawFile.type !== "image/gif" &&
return false rawFile.type !== "image/icon"
} ) {
return true ElMessage.error("请上传以下格式的图片(jpg、jpeg、png、gif、icon)!" + rawFile.type);
} return false;
} else if (rawFile.size / 1024 / 1024 > 800) {
ElMessage.error("图片大小不要大于 800MB!");
return false;
}
return true;
};
</script> </script>
<template> <template>
<el-card shadow="always"> <el-card shadow="always"
<el-divider content-position="left">App基础设置</el-divider> >{{ props }}
<el-form <el-divider content-position="left">App基础设置</el-divider>
ref="ruleFormRef" <el-form
:model="appSetupCont" ref="ruleFormRef"
:rules="rules" :model="appSetupCont"
label-width="auto" :rules="rules"
class="demo-ruleForm" label-width="auto"
:size="formSize" class="demo-ruleForm"
status-icon :size="formSize"
v-loading="appLoading" status-icon
> v-loading="appLoading"
<el-form-item label="归属分组" prop="groupKey"> >
<el-select v-model="appSetupCont.groupKey" placeholder="请选择分组"> <el-form-item label="归属分组" prop="groupKey">
<el-option v-for="item in formGroup.list" :key="item.idStr" :label="item.title" :value="item.idStr" /> <el-select v-model="appSetupCont.groupKey" placeholder="请选择分组">
<p v-if="loadingmore">加载中</p> <el-option
<p v-if="loadingnomore">无数据</p> v-for="item in formGroup.list"
</el-select> :key="item.idStr"
</el-form-item> :label="item.title"
<el-form-item label="App名称" prop="title"> :value="item.idStr"
<el-input v-model="appSetupCont.title" placeholder="请输入App名称" clearable style="width: 300px" /> />
</el-form-item> <p v-if="loadingmore">加载中</p>
<el-form-item label="App图标" prop="icont"> <p v-if="loadingnomore">无数据</p>
</el-select>
<el-upload </el-form-item>
ref="appSetupUpImg" <el-form-item label="App名称" prop="title">
class="upload-demo" <el-input
:drag="true" v-model="appSetupCont.title"
:action="uploadUrl" placeholder="请输入App名称"
clearable
:show-file-list="false" style="width: 300px"
:on-success="handleAvatarSuccess" />
:before-upload="beforeAvatarUpload" </el-form-item>
> <el-form-item label="App图标" prop="icont">
<el-image v-if="appSetupCont.appSvg&&appSetupCont.appSvg!=''" :src="appSetupCont.appSvg" fit="cover" class="avatar" /> <el-upload
<div v-else> ref="appSetupUpImg"
<el-icon class="el-icon--upload"><upload-filled /></el-icon> class="upload-demo"
<div class="el-upload__text"> :drag="true"
将文件拖到此处或 <em>单击上传</em> :action="uploadUrl"
</div> :show-file-list="false"
</div> :on-success="handleAvatarSuccess"
</el-upload> :before-upload="beforeAvatarUpload"
</el-form-item> >
<el-form-item label="应用描述"> <el-image
<el-input v-model="appSetupCont.appdescribe" type="textarea" show-word-limit maxlength="300" style="width: 60%" /> v-if="appSetupCont.appSvg && appSetupCont.appSvg != ''"
</el-form-item> :src="appSetupCont.appSvg"
<el-form-item class="butClass"> fit="cover"
<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button> class="avatar"
<el-button @click="resetForm(ruleFormRef)">重置</el-button> />
</el-form-item> <div v-else>
</el-form> <el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处或 <em>单击上传</em></div>
</el-card> </div>
</el-upload>
</el-form-item>
<el-form-item label="应用描述">
<el-input
v-model="appSetupCont.appdescribe"
type="textarea"
show-word-limit
maxlength="300"
style="width: 60%"
/>
</el-form-item>
<el-form-item class="butClass">
<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.boxk{ .boxk {
width:100%; width: 100%;
background: var(--el-fill-color-light); background: var(--el-fill-color-light);
} }
.avatar{ .avatar {
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
.butClass{ .butClass {
text-align: center; text-align: center;
} }
</style> </style>

3
src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
View File

@ -73,13 +73,14 @@ const gainAppContent = () => {
id: props.pickAppInfo.signCodeStr, id: props.pickAppInfo.signCodeStr,
}; };
gainAppEditPsge(sendInfo).then((data) => { gainAppEditPsge(sendInfo).then((data) => {
// console.log("获取app信息---》",data) console.log("获取app信息---》", data);
menusTree.value = data.data.menuTree; menusTree.value = data.data.menuTree;
appCont.appKey = data.data.appKey; appCont.appKey = data.data.appKey;
appCont.appName = data.data.appName; appCont.appName = data.data.appName;
appCont.appSvg = data.data.appSvg; appCont.appSvg = data.data.appSvg;
appCont.state = data.data.state; appCont.state = data.data.state;
appCont.uuid = data.data.uuid; appCont.uuid = data.data.uuid;
appCont.describe = data.data.describe;
}); });
}; };

329
src/widget/lowcodeimage/lowcodeImage.vue
View File

@ -1,53 +1,52 @@
<script setup > <script setup>
import errimg from '@/assets/404_images/imgNotFound.png' import errimg from "@/assets/404_images/imgNotFound.png";
import { uploadUrl,getRequest } from '@/api/DesignForm' import { uploadUrl, getRequest } from "@/api/DesignForm";
const props = defineProps({ const props = defineProps({
tablekey:{ tablekey: {
type: Object, type: Object,
default(){ default() {
return {} return {};
} },
}, },
data: { data: {
type: Object, type: Object,
default(){ default() {
return {} return {};
} },
},
formTableSetUp: {
type: Object,
default() {
return {};
},
}, },
formTableSetUp:{ imgUrl: {
type: Object, type: String,
default(){ default: "",
return {} },
} });
},
imgUrl:{
type:String,
default:""
}
})
/* /*
*/ */
let styleObject = reactive({ let styleObject = reactive({
width:"0", width: "0",
height:"0" height: "0",
}) });
const emits = defineEmits(["update:imgUrl","updateCont"]); const emits = defineEmits(["update:imgUrl", "updateCont"]);
// const url = ref(errimg) // const url = ref(errimg)
const url = ref(props.data?.control.imgUrl?props.data?.control.imgUrl:props.imgUrl) const url = ref(props.data?.control.imgUrl ? props.data?.control.imgUrl : props.imgUrl);
if(props.data?.control.imgUrl===''){ if (props.data?.control.imgUrl === "") {
url.value = errimg url.value = errimg;
}else{ } else {
url.value = props.data?.control.imgUrl url.value = props.data?.control.imgUrl;
} }
const fitNum = props.data?.control.fit const fitNum = props.data?.control.fit;
let fit= '' let fit = "";
switch (fitNum) { switch (fitNum) {
case 1: case 1:
@ -67,148 +66,174 @@ switch (fitNum) {
break; break;
} }
const showMode = reactive(props.data?.control.showMode) const showMode = reactive(props.data?.control.showMode);
// console.log("图片像素样式-1-》",props.data?.control); // console.log("图片像素样式-1-》",props.data?.control);
if (showMode==='自定义像素值') { if (showMode === "自定义像素值") {
const pxWidth = props.data?.control.pxWidth const pxWidth = props.data?.control.pxWidth;
const pxHeight = props.data?.control.pxHeight const pxHeight = props.data?.control.pxHeight;
styleObject.width = pxWidth+'px'; styleObject.width = pxWidth + "px";
styleObject.height = pxHeight+'px'; styleObject.height = pxHeight + "px";
}else{ } else {
const widthPercent = props.data?.control.widthPercent const widthPercent = props.data?.control.widthPercent;
const heightPercent = props.data?.control.heightPercent const heightPercent = props.data?.control.heightPercent;
styleObject.width = widthPercent+'%'; styleObject.width = widthPercent + "%";
styleObject.height = heightPercent+'%'; styleObject.height = heightPercent + "%";
} }
watch(()=>props.data?.control, (val) => { watch(
() => props.data?.control,
if (val.showMode==='自定义像素值') { (val) => {
const pxWidth = props.data?.control.pxWidth if (val.showMode === "自定义像素值") {
const pxHeight = props.data?.control.pxHeight const pxWidth = props.data?.control.pxWidth;
styleObject.width = pxWidth+'px'; const pxHeight = props.data?.control.pxHeight;
styleObject.height = pxHeight+'px'; styleObject.width = pxWidth + "px";
}else{ styleObject.height = pxHeight + "px";
const widthPercent = props.data?.control.widthPercent } else {
const heightPercent = props.data?.control.heightPercent const widthPercent = props.data?.control.widthPercent;
styleObject.width = widthPercent+'%'; const heightPercent = props.data?.control.heightPercent;
styleObject.height = heightPercent+'%'; styleObject.width = widthPercent + "%";
} styleObject.height = heightPercent + "%";
}) }
}
);
const radius = props.data?.control.radius
const radiusClass = ref(''); const radius = props.data?.control.radius;
let radiusClassIsActive = false const radiusClass = ref("");
let radiusNum = props.data?.control.radiusNum+'px' let radiusClassIsActive = false;
if(radius === true ){ let radiusNum = props.data?.control.radiusNum + "px";
radiusClass.value = 'radius' if (radius === true) {
radiusClassIsActive = true radiusClass.value = "radius";
radiusClassIsActive = true;
} }
const mt = props.data?.control.mt+'px' const mt = props.data?.control.mt + "px";
const mb = props.data?.control.mb+'px' const mb = props.data?.control.mb + "px";
const ml = props.data?.control.ml+'px' const ml = props.data?.control.ml + "px";
const mr = props.data?.control.mr+'px' const mr = props.data?.control.mr + "px";
const pt = props.data?.control.pt+'px' const pt = props.data?.control.pt + "px";
const pb = props.data?.control.pb+'px' const pb = props.data?.control.pb + "px";
const pl = props.data?.control.pl+'px' const pl = props.data?.control.pl + "px";
const pr = props.data?.control.pr+'px' const pr = props.data?.control.pr + "px";
const mp = ref('mp') const mp = ref("mp");
const floatStyle = ref('floatStyle') const floatStyle = ref("floatStyle");
const floatFlag = props.data?.control.floatFlag const floatFlag = props.data?.control.floatFlag;
const floatValue = props.data?.control.floatValue const floatValue = props.data?.control.floatValue;
const boderAndShadowClass = ref(''); const boderAndShadowClass = ref("");
const boderAndShadow = props.data?.control.boderAndShadow const boderAndShadow = props.data?.control.boderAndShadow;
let boderAndShadowClassIsActive = false let boderAndShadowClassIsActive = false;
if(boderAndShadow === true ){ if (boderAndShadow === true) {
boderAndShadowClass.value = 'boderAndShadow' boderAndShadowClass.value = "boderAndShadow";
boderAndShadowClassIsActive = true boderAndShadowClassIsActive = true;
} }
function handleLink(item){ function handleLink(item) {
// console.log("handleLink") // console.log("handleLink")
let url = ""; let url = "";
let urlStart = 'http://' let urlStart = "http://";
// http:// 7 // http:// 7
//https:// 8 //https:// 8
if (item.link.length < 7) { if (item.link.length < 7) {
if (item.link == '') { if (item.link == "") {
alert("未配置跳转地址") alert("未配置跳转地址");
return return;
} }
url = urlStart + "" + item.link url = urlStart + "" + item.link;
} else { } else {
const linkStartComplete1 = item.link.startsWith("http://") const linkStartComplete1 = item.link.startsWith("http://");
const linkStartComplete2 = item.link.startsWith("https://") const linkStartComplete2 = item.link.startsWith("https://");
if (linkStartComplete1 || linkStartComplete2) { if (linkStartComplete1 || linkStartComplete2) {
url = item.link url = item.link;
} else { } else {
url = urlStart + "" + item.link url = urlStart + "" + item.link;
} }
} }
window.open(url, '_blank') window.open(url, "_blank");
} }
//文件上传的格式与大小 //文件上传的格式与大小
const beforeAvatarUpload = (rawFile) => { const beforeAvatarUpload = (rawFile) => {
// console.log("文件上传的格式与大小",rawFile.type) // console.log("文件上传的格式与大小",rawFile.type)
let imgType = ['image/jpeg','image/jpg','image/png','image/gif','image/svg'] let imgType = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/svg"];
if (!imgType.includes(rawFile.type)) { if (!imgType.includes(rawFile.type)) {
ElMessage.error('您上传的不是图片!') ElMessage.error("您上传的不是图片!");
return false return false;
} else if (rawFile.size / 1024 / 1024 > 200) { } else if (rawFile.size / 1024 / 1024 > 200) {
ElMessage.error('您上传到额图片大于 200MB!') ElMessage.error("您上传到额图片大于 200MB!");
return false return false;
} }
return true return true;
} };
//上传成功回调 //上传成功回调
const handleAvatarSuccess = ( const handleAvatarSuccess = (response, uploadFile) => {
response,
uploadFile
) => {
// imageUrl.value = URL.createObjectURL(uploadFile.raw!) // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
// console.log("上传成功回调",response,uploadFile) // console.log("上传成功回调",response,uploadFile)
url.value = response.data.url url.value = response.data.url;
let oldFormSetUp = props.formTableSetUp let oldFormSetUp = props.formTableSetUp;
if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){ if (
oldFormSetUp.list.forEach((item)=>{ props.formTableSetUp &&
if(item.name && item.name == props.data.name){ props.formTableSetUp.list &&
item.control.imgUrl = response.data.url props.formTableSetUp.list.length > 0
item.control.link = response.data.url ) {
} oldFormSetUp.list.forEach((item) => {
}) if (item.name && item.name == props.data.name) {
} item.control.imgUrl = response.data.url;
// props.setimgurl=response.data.url item.control.link = response.data.url;
emits("update:imgUrl",response.data.url) }
console.log("上传成功回调------>",url.value) });
emits("updateCont",response.data.url) }
} // props.setimgurl=response.data.url
emits("update:imgUrl", response.data.url);
console.log("上传成功回调------>", url.value);
watch(() =>props.imgUrl,(val)=>{ emits("updateCont", response.data.url);
// console.log("props.imgUrl.value ",props.data.control.link && (props.data.control.link == "" || props.data.control.link == "undefined") ) };
if(props.imgUrl && props.imgUrl != "" && props.imgUrl != "undefined"){
url.value = props.imgUrl
if((props.data.control.link == "" || props.data.control.link == "undefined") ){
props.data.control.link = props.imgUrl
}
}
},{ deep: true });
watch(
() => props.imgUrl,
(val) => {
// console.log("props.imgUrl.value ",props.data.control.link && (props.data.control.link == "" || props.data.control.link == "undefined") )
if (props.imgUrl && props.imgUrl != "" && props.imgUrl != "undefined") {
url.value = props.imgUrl;
if (props.data.control.link == "" || props.data.control.link == "undefined") {
props.data.control.link = props.imgUrl;
}
}
},
{ deep: true }
);
</script> </script>
<template> <template>
<div> <div class="imgBox">
<img v-if="url!=errimg" referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" /> <img
<img v-else referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" /> v-if="url != errimg"
<!-- <el-upload referrerpolicy="no-referrer"
:src="url"
:style="styleObject"
:fit="fit"
:class="[
boderAndShadowClassIsActive ? boderAndShadowClass : '',
radiusClassIsActive ? radiusClass : '',
mp,
floatFlag ? floatStyle : '',
]"
@click="handleLink(props.data?.control)"
/>
<img
v-else
referrerpolicy="no-referrer"
:src="url"
:style="styleObject"
:fit="fit"
:class="[
boderAndShadowClassIsActive ? boderAndShadowClass : '',
radiusClassIsActive ? radiusClass : '',
mp,
floatFlag ? floatStyle : '',
]"
@click="handleLink(props.data?.control)"
/>
<!-- <el-upload
v-bind="$props" v-bind="$props"
class="upload-demo" class="upload-demo"
:action="uploadUrl" :action="uploadUrl"
@ -220,10 +245,16 @@ watch(() =>props.imgUrl,(val)=>{
<img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" /> <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" />
<img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" /> <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" />
</el-upload> --> </el-upload> -->
</div> </div>
</template> </template>
<style lang="scss" scoped>
.imgBox {
img {
width: 100%;
}
}
</style>
<style> <style>
.boderAndShadow { .boderAndShadow {
@ -235,8 +266,8 @@ watch(() =>props.imgUrl,(val)=>{
.mp { .mp {
margin-top: v-bind(mt); margin-top: v-bind(mt);
margin-bottom: v-bind(mb); margin-bottom: v-bind(mb);
margin-left:v-bind(ml); margin-left: v-bind(ml);
margin-right:v-bind(mr); margin-right: v-bind(mr);
padding-top: v-bind(pt); padding-top: v-bind(pt);
padding-bottom: v-bind(pb); padding-bottom: v-bind(pb);
padding-left: v-bind(pl); padding-left: v-bind(pl);

Write Preview
Loading…
Cancel
Save