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. 37
      src/components/DesignForm/formControlPropertiNew.vue
  3. 130
      src/components/DesignForm/public/expand/digitpage.vue
  4. 107
      src/components/DesignForm/public/expand/lowcodeImage.vue
  5. 125
      src/components/DesignForm/public/expand/uploadPage.vue
  6. 183
      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. 279
      src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
  11. 67
      src/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue
  12. 159
      src/views/sysworkflow/lowcodepage/appPage/appSetUp/setup.vue
  13. 3
      src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
  14. 263
      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) {

37
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,
@ -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,6 +3760,8 @@ watch(
// } // }
}); });
} else { } else {
console.log("formData.value---------------", formData.value);
if (formData.value.dataSourceConfi) {
formData.value.dataSourceConfig.id = ""; formData.value.dataSourceConfig.id = "";
formData.value.dataSourceConfig.dataBaseName = ""; formData.value.dataSourceConfig.dataBaseName = "";
formData.value.dataSourceConfig.tableName = ""; formData.value.dataSourceConfig.tableName = "";
@ -3770,6 +3773,7 @@ watch(
userName: "", userName: "",
password: "", 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'">

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

@ -3,27 +3,43 @@
@ 时间: 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 || {};
});
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-03-01 09:07:11 @ 时间: 2024-03-01 09:07:11
@ -32,19 +48,101 @@ 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> </template>
<style lang='scss' scoped> </el-input>
</template>
</style> <style lang="scss" scoped></style>

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

@ -3,78 +3,74 @@
@ 时间: 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) emits("update:modelValue", response.data.url);
imgPath.value = response.data.url imgPath.value = response.data.url;
value.value=response.data.url value.value = response.data.url;
console.log("上传成功回调---------->",value.value) console.log("上传成功回调---------->", value.value);
// let oldFormSetUp = props.formTableSetUp // let oldFormSetUp = props.formTableSetUp
// if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){ // if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){
// oldFormSetUp.list.forEach((item)=>{ // oldFormSetUp.list.forEach((item)=>{
@ -92,14 +88,14 @@ const handleAvatarSuccess = (
// console.log("上传成功回调------>",url.value) // console.log("上传成功回调------>",url.value)
// emits("updateCont",response.data.url) // emits("updateCont",response.data.url)
imgLoading.value = false imgLoading.value = false;
} };
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);
}
} }
};
</script> </script>
<template> <template>
<el-upload <el-upload
@ -112,10 +108,19 @@ const getFormItemInputStyle = (ele: any,sty:number) => {
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
v-if="value"
:src="value"
class="avatar"
:style="getFormItemInputStyle(configStyle, 2)"
/>
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload> </el-upload>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.upload-demo {
img {
width: 100%;
}
}
</style> </style>

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

@ -3,108 +3,111 @@
@ 时间: 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,
AnalysisInputCss,
} from "@/components/DesignForm/public/form/calculate/cssInfo";
import { uploadUrl, getRequest } from "@/api/DesignForm";
import { import {
formatNumber, formatNumber,
objectToArray, objectToArray,
constControlChange, constControlChange,
constSetFormOptions, constSetFormOptions,
constFormProps, constFormProps,
constGetControlByName constGetControlByName,
} from '@/api/DesignForm/utils' } 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 &&
@ -116,26 +119,26 @@ const updateModel = (val: any) => {
// 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>
@ -169,6 +172,4 @@ const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
</el-upload> </el-upload>
</div> </div>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped></style>
</style>

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

@ -3,70 +3,76 @@
@ 时间: 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) => { const getText = (text: any, val: any, name: any) => {
console.log("text===>",text) console.log("text===>", text);
console.log("name===>",name) console.log("name===>", name);
console.log("val===>",val) console.log("val===>", val);
if (typeof text === 'string') { if (typeof text === "string") {
return text return text;
} else { } else {
return text && text.toString() 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
@ -75,31 +81,31 @@ const delColumn = (index: number) => {
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}`;
@ -111,8 +117,8 @@ const timeToString = (timeVal:any,types:int) => {
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": //时间
@ -132,7 +138,7 @@ const timeToString = (timeVal:any,types:int) => {
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}`;
@ -144,20 +150,20 @@ const timeToString = (timeVal:any,types:int) => {
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}`;
@ -169,47 +175,42 @@ const timeToString = (timeVal:any,types:int) => {
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-table <el-text class="mx-1" size="large">{{ sunTableName }}</el-text>
v-bind="data.control" <el-table v-bind="data.control" :class="[data.className]" :data="tableDataNew">
:class="[data.className]"
:data="tableDataNew"
>
<el-table-column <el-table-column
v-for="(item, index) in data.list" v-for="(item, index) in data.list"
:key="index" :key="index"
@ -218,27 +219,37 @@ function optionsValue3Get1(data: any,fieldName: string){
:width="item.item.span" :width="item.item.span"
> >
<template #default="scope"> <template #default="scope">
<span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span> <span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>
<div v-if="type === 4 || editDisabled"> <div v-if="type === 4 || editDisabled">
<LokOrgCentent v-if="item.type == 'orgCentent'" :orgid="scope.row[item.name].toString()" /> <LokOrgCentent
v-if="item.type == 'orgCentent'"
:orgid="scope.row[item.name].toString()"
/>
<div v-else-if="item.type == 'lowcodeImage'"> <div v-else-if="item.type == 'lowcodeImage'">
<LowcodeImagePage :data="item" <LowcodeImagePage :data="item" v-model="scope.row[item.name]" />
v-model="scope.row[item.name]" />
</div> </div>
<div v-else-if="item.type == 'upload'"> <div v-else-if="item.type == 'upload'">
<UploadPageList :data="item" :img-list="scope.row[item.name]" :control="item.control" /> <UploadPageList
</div> :data="item"
<div v-else-if="item.type=='datePicker'" v-html="timeToString(scope.row[item.name],item.control.type)"> :img-list="scope.row[item.name]"
:control="item.control"
/>
</div> </div>
<div
v-else-if="item.type == 'datePicker'"
v-html="timeToString(scope.row[item.name], item.control.type)"
></div>
<div v-else-if="item.type == 'associatedForms'"> <div v-else-if="item.type == 'associatedForms'">
<AssociatedForms :data="item" <AssociatedForms
v-model="scope.row[item.name]" :tablekey="associatedFormsIndexTablekey" :row-index="scope.$index"/> :data="item"
v-model="scope.row[item.name]"
:tablekey="associatedFormsIndexTablekey"
:row-index="scope.$index"
/>
</div> </div>
<div v-else>{{ getText(scope.row[item.name], scope.row, item.name) }}</div> <div v-else>{{ getText(scope.row[item.name], scope.row, item.name) }}</div>
</div> </div>
<div v-else> <div v-else>
<form-item <form-item
v-model="scope.row[item.name]" v-model="scope.row[item.name]"
:tProp="`${data.name}.${scope.$index}.${item.name}`" :tProp="`${data.name}.${scope.$index}.${item.name}`"
@ -260,7 +271,9 @@ function optionsValue3Get1(data: any,fieldName: string){
v-if="[1, 2].includes(type as number) && data.config.delBtnText && !editDisabled" v-if="[1, 2].includes(type as number) && data.config.delBtnText && !editDisabled"
> >
<template #default="scope"> <template #default="scope">
<el-button link type="primary" @click="delColumn(scope.$index)">{{ data.config.delBtnText }}</el-button> <el-button link type="primary" @click="delColumn(scope.$index)">{{
data.config.delBtnText
}}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -272,6 +285,4 @@ function optionsValue3Get1(data: any,fieldName: string){
</div> </div>
</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

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

@ -3,54 +3,60 @@
@ 时间: 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
@ -58,20 +64,20 @@ const appOenMenu = ref<appMenuTreeInfo>({})
*/ */
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);
} },
}); });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ -91,16 +97,14 @@ const handleDrop = (
// 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
@ -115,30 +119,33 @@ const loadIcons = () => {
} }
// 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(
() => svgName.value,
(val: string) => {
// console.log("监听----svgName--->",val) // console.log("监听----svgName--->",val)
// console.log("监听----threeShiyanData--->",threeShiyanData) // console.log("监听----threeShiyanData--->",threeShiyanData)
diguiData(appMenuTree.value) diguiData(appMenuTree.value);
}) }
);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ -153,39 +160,36 @@ const diguiData = (val: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; throw item;
} }
if (item.children && Array.isArray(item.children)) { if (item.children && Array.isArray(item.children)) {
diguiData(item.children) diguiData(item.children);
} }
}); });
} catch (e) { } catch (e) {
// console.log('跳出循环:', threeShiyanData); // 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
@ -193,24 +197,23 @@ const addNewSunMenuGroup = (val:any) =>{
*/ */
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
@ -220,15 +223,14 @@ 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
@ -236,47 +238,38 @@ const showOrHide = (val:appMenuTreeInfo,types:number) =>{
*/ */
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: '取消',
type: 'warning',
}
)
.then(() => {
let sendInfo = { let sendInfo = {
id: val.id.toString(), id: val.id.toString(),
status:3 status: 3,
} };
delAppMenu(sendInfo) delAppMenu(sendInfo).then((data) => {
.then((data) =>{
// console.log('删除app自定义菜单:',data); // console.log('删除app自定义菜单:',data);
gainSunAppContent() gainSunAppContent();
ElMessage({ ElMessage({
type: 'success', type: "success",
message: data.msg, message: data.msg,
})
}); });
}) });
});
};
const saveAppFormIsShow = ref(false);
}
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
@ -292,12 +285,12 @@ const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
// 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
@ -308,20 +301,18 @@ const openAppPage = (val:any) =>{
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
@ -333,14 +324,15 @@ const openAppPage = (val:any) =>{
@node-drop="handleDrop" @node-drop="handleDrop"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="appMenuTitle"> <div class="appMenuTitle">
<el-space wrap> <el-space wrap>
<svg-icon prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" /> <svg-icon prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" />
<!-- <el-tooltip :content="node.label" placement="top" effect="dark"> <!-- <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)">{{
node.label
}}</el-text>
</el-space> </el-space>
<el-dropdown> <el-dropdown>
<svg-icon class="svgBox" prefix="icon" icon-class="set" /> <svg-icon class="svgBox" prefix="icon" icon-class="set" />
@ -348,27 +340,64 @@ const openAppPage = (val:any) =>{
<el-dropdown-item @click="editMenuName(data)">修改名称</el-dropdown-item> <el-dropdown-item @click="editMenuName(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 @click="moveMenus(data)">移动到</el-dropdown-item> -->
<el-dropdown-item v-if="data.type==1" divided @click="addNewSunMenuGroup(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 @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="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 @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="editAppMenu(data)" divided>
<el-text class="mx-1" type="danger">删除</el-text> <el-text class="mx-1" type="danger">删除</el-text>
</el-dropdown-item> </el-dropdown-item>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</template> </template>
</el-tree> </el-tree>
<AppMenuSvgPage v-model:is-show="svgIsShow" v-model:svg-name="svgName" :svg-id="svgId" :icon-list="allIconNames" /> <AppMenuSvgPage
<AppMenuGroup v-model:is-show="menuGroupShow" :parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" /> v-model:is-show="svgIsShow"
<EditAppMenuNamePage v-model:is-show="editAppMenuNameShow" :menu-cont="appOenMenu" @updateMenu="gainSunAppContent" /> v-model:svg-name="svgName"
<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" /> :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;

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

@ -3,25 +3,25 @@
@ 时间: 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
@ -29,7 +29,7 @@ const activeMenuIndex = ref("1")
*/ */
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
@ -37,18 +37,17 @@ const handleOpen = (key: string, keyPath: string[]) => {
*/ */
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
@ -85,17 +84,31 @@ const clickMenu = (key:number) => {
</el-aside> </el-aside>
<el-main class="appSetUpBox"> <el-main class="appSetUpBox">
<el-scrollbar class="appSetUpDraw"> <el-scrollbar class="appSetUpDraw">
<SetUp v-if="activeMenuIndex==1" :app-cont="appCont" :group-key="props.groupKey" /> <SetUp
<AppPower v-if="activeMenuIndex==2" :app-cont="appCont" :group-key="props.groupKey" /> v-if="activeMenuIndex == 1"
<AppDevOps v-if="activeMenuIndex==3" :app-cont="appCont" :group-key="props.groupKey" /> :app-cont="appCont"
<DataManagement v-if="activeMenuIndex==4" :app-cont="appCont" :group-key="props.groupKey" /> :group-key="props.groupKey"
/>
<AppPower
v-if="activeMenuIndex == 2"
: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-scrollbar>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.appMenuBox { .appMenuBox {
width: 200px; width: 200px;
.allHeight { .allHeight {
@ -107,14 +120,15 @@ const clickMenu = (key:number) => {
} }
} }
::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, .el-menu--vertical .el-menu-item:hover{ ::v-deep .el-menu--vertical .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
.el-menu--vertical .el-menu-item:hover {
background-color: #ecf5ff; background-color: #ecf5ff;
color:#FFFFFF; color: #ffffff;
} }
} }
.appSetUpBox { .appSetUpBox {
@ -126,5 +140,4 @@ const clickMenu = (key:number) => {
padding: 15px; padding: 15px;
} }
} }
</style> </style>

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

@ -3,132 +3,139 @@
@ 时间: 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,
(val: any) => {
gainFormGroupList(); gainFormGroupList();
},{ },
{
deep: true, deep: true,
}) }
);
onMounted(() => { onMounted(() => {
gainFormGroupList(); 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(() => {
appLoading.value = false;
});
} else { } else {
appLoading.value = false 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,
uploadFile
) => {
// imageUrl.value = URL.createObjectURL(uploadFile.raw!) // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
appSetupCont.appSvg = response.data.url appSetupCont.appSvg = response.data.url;
// appSetupUpImg.clearFiles() // 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" &&
rawFile.type !== "image/png" &&
rawFile.type !== "image/gif" &&
rawFile.type !== "image/icon"
) {
ElMessage.error("请上传以下格式的图片(jpg、jpeg、png、gif、icon)!" + rawFile.type);
return false;
} else if (rawFile.size / 1024 / 1024 > 800) { } else if (rawFile.size / 1024 / 1024 > 800) {
ElMessage.error('图片大小不要大于 800MB!') ElMessage.error("图片大小不要大于 800MB!");
return false return false;
}
return true
} }
return true;
};
</script> </script>
<template> <template>
<el-card shadow="always"> <el-card shadow="always"
>{{ props }}
<el-divider content-position="left">App基础设置</el-divider> <el-divider content-position="left">App基础设置</el-divider>
<el-form <el-form
ref="ruleFormRef" ref="ruleFormRef"
@ -142,47 +149,63 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
> >
<el-form-item label="归属分组" prop="groupKey"> <el-form-item label="归属分组" prop="groupKey">
<el-select v-model="appSetupCont.groupKey" placeholder="请选择分组"> <el-select v-model="appSetupCont.groupKey" placeholder="请选择分组">
<el-option v-for="item in formGroup.list" :key="item.idStr" :label="item.title" :value="item.idStr" /> <el-option
v-for="item in formGroup.list"
:key="item.idStr"
:label="item.title"
:value="item.idStr"
/>
<p v-if="loadingmore">加载中</p> <p v-if="loadingmore">加载中</p>
<p v-if="loadingnomore">无数据</p> <p v-if="loadingnomore">无数据</p>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="App名称" prop="title"> <el-form-item label="App名称" prop="title">
<el-input v-model="appSetupCont.title" placeholder="请输入App名称" clearable style="width: 300px" /> <el-input
v-model="appSetupCont.title"
placeholder="请输入App名称"
clearable
style="width: 300px"
/>
</el-form-item> </el-form-item>
<el-form-item label="App图标" prop="icont"> <el-form-item label="App图标" prop="icont">
<el-upload <el-upload
ref="appSetupUpImg" ref="appSetupUpImg"
class="upload-demo" class="upload-demo"
:drag="true" :drag="true"
:action="uploadUrl" :action="uploadUrl"
:show-file-list="false" :show-file-list="false"
:on-success="handleAvatarSuccess" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
> >
<el-image v-if="appSetupCont.appSvg&&appSetupCont.appSvg!=''" :src="appSetupCont.appSvg" fit="cover" class="avatar" /> <el-image
v-if="appSetupCont.appSvg && appSetupCont.appSvg != ''"
:src="appSetupCont.appSvg"
fit="cover"
class="avatar"
/>
<div v-else> <div v-else>
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text"> <div class="el-upload__text">将文件拖到此处或 <em>单击上传</em></div>
将文件拖到此处或 <em>单击上传</em>
</div>
</div> </div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="应用描述"> <el-form-item label="应用描述">
<el-input v-model="appSetupCont.appdescribe" type="textarea" show-word-limit maxlength="300" style="width: 60%" /> <el-input
v-model="appSetupCont.appdescribe"
type="textarea"
show-word-limit
maxlength="300"
style="width: 60%"
/>
</el-form-item> </el-form-item>
<el-form-item class="butClass"> <el-form-item class="butClass">
<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button> <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button> <el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </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);

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;
}); });
}; };

263
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: { formTableSetUp: {
type: Object, type: Object,
default() { default() {
return {} return {};
} },
}, },
imgUrl: { imgUrl: {
type: String, type: String,
default:"" 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,147 +66,173 @@ 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";
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 + "%";
} }
}) }
);
const radius = props.data?.control.radius const radius = props.data?.control.radius;
const radiusClass = ref(''); const radiusClass = ref("");
let radiusClassIsActive = false let radiusClassIsActive = false;
let radiusNum = props.data?.control.radiusNum+'px' let radiusNum = props.data?.control.radiusNum + "px";
if (radius === true) { if (radius === true) {
radiusClass.value = 'radius' radiusClass.value = "radius";
radiusClassIsActive = true 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 (
props.formTableSetUp &&
props.formTableSetUp.list &&
props.formTableSetUp.list.length > 0
) {
oldFormSetUp.list.forEach((item) => { oldFormSetUp.list.forEach((item) => {
if (item.name && item.name == props.data.name) { if (item.name && item.name == props.data.name) {
item.control.imgUrl = response.data.url item.control.imgUrl = response.data.url;
item.control.link = response.data.url item.control.link = response.data.url;
} }
}) });
} }
// props.setimgurl=response.data.url // props.setimgurl=response.data.url
emits("update:imgUrl",response.data.url) emits("update:imgUrl", response.data.url);
console.log("上传成功回调------>",url.value) console.log("上传成功回调------>", url.value);
emits("updateCont",response.data.url) emits("updateCont", response.data.url);
} };
watch(
watch(() =>props.imgUrl,(val)=>{ () => props.imgUrl,
(val) => {
// console.log("props.imgUrl.value ",props.data.control.link && (props.data.control.link == "" || props.data.control.link == "undefined") ) // 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") { if (props.imgUrl && props.imgUrl != "" && props.imgUrl != "undefined") {
url.value = props.imgUrl url.value = props.imgUrl;
if((props.data.control.link == "" || props.data.control.link == "undefined") ){ if (props.data.control.link == "" || props.data.control.link == "undefined") {
props.data.control.link = props.imgUrl props.data.control.link = props.imgUrl;
} }
} }
},
},{ deep: true }); { 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"
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 <!-- <el-upload
v-bind="$props" v-bind="$props"
class="upload-demo" class="upload-demo"
@ -223,7 +248,13 @@ watch(() =>props.imgUrl,(val)=>{
</div> </div>
</template> </template>
<style lang="scss" scoped>
.imgBox {
img {
width: 100%;
}
}
</style>
<style> <style>
.boderAndShadow { .boderAndShadow {

Write Preview
Loading…
Cancel
Save