Browse Source

修复紧急BUG完成

qin_v9
hreenshan112 12 months ago
parent
commit
3ec5e1f0cd
  1. 561
      src/components/DesignForm/aceDrawer.vue
  2. 61
      src/components/DesignForm/app/index.vue
  3. 9219
      src/components/DesignForm/formControlPropertiNew.vue
  4. 74
      src/components/DesignForm/public/expand/cascader.vue
  5. 8
      src/components/DesignForm/public/form/calculate/cssInfo.ts
  6. 1696
      src/components/DesignForm/public/form/formGroup.vue
  7. 2350
      src/components/DesignForm/public/form/formItem.vue
  8. 2589
      src/components/DesignForm/tableListPage/index.vue
  9. 145
      src/components/IconSelect/appMenuSvgPage.vue
  10. 514
      src/views/sysworkflow/codepage/index.vue
  11. 905
      src/views/sysworkflow/lowcodepage/appCardPage.vue
  12. 1306
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
  13. 623
      src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
  14. 4
      src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue
  15. 348
      src/widget/number/index.vue

561
src/components/DesignForm/aceDrawer.vue

@ -3,347 +3,390 @@
@ 时间: 2023-07-19 08:39:34
@ 备注: 抽屉
-->
<script lang='ts' setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue'
import { aceEdit } from '@/api/DesignForm/utils'
import { treeStruct } from '@/api/DesignForm/type'
<script lang="ts" setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
import { aceEdit } from "@/api/DesignForm/utils";
import { treeStruct } from "@/api/DesignForm/type";
const props = withDefaults(
defineProps<{
data?:object
modelValue: boolean
// eslint-disable-next-line vue/require-default-prop
title?: string
direction?: 'rtl' | 'ltr'
content: string
id?: string
// eslint-disable-next-line vue/require-default-prop
codeType?: string
data?: object
}>(),
{
id: 'editJson',
content: '',
direction: 'ltr'
}
)
defineProps<{
data?: object;
modelValue: boolean;
// eslint-disable-next-line vue/require-default-prop
title?: string;
direction?: "rtl" | "ltr";
content: string;
id?: string;
// eslint-disable-next-line vue/require-default-prop
codeType?: string;
data?: object;
}>(),
{
id: "editJson",
content: "",
direction: "ltr",
}
);
const emits = defineEmits<{
(e: 'beforeClose'): void
(e: 'confirm', content: string): void
(e: 'confirmTree', content: string): void
(e: 'update:modelValue', val: boolean): void
}>()
const editor = ref<any>({})
const visible = ref(false)
(e: "beforeClose"): void;
(e: "confirm", content: string): void;
(e: "confirmTree", content: string): void;
(e: "update:modelValue", val: boolean): void;
}>();
const editor = ref<any>({});
const visible = ref(false);
const treeSelectAry = reactive<treeStruct[]>([]) //
const editTitleFormRef = ref(ElForm); //
// const treeSelectAry = ref<treeStruct[]>(props.data.content ? props.data.content : []); //
const editTitleFormRef = ref(ElForm); //
const editTitleInfoRef = ref(ElForm);
let jibuqi = 0 //
const isTopHeader = ref(false) //
const guodu = ref<treeStruct>({}) //使
const addIsShow = ref(false) //
let jibuqi = 0; //
const isTopHeader = ref(false); //
const guodu = ref<treeStruct>({}); //使
const addIsShow = ref(false); //
const treeSelectTitle = reactive<treeStruct>({
value: "1",
label: ""
}) //
const butLoad = ref(false) //
value: "1",
label: "",
}); //
const butLoad = ref(false); //
/**
* 表单验证规则
*/
const editTitleRules = reactive({
label: [{ required: true, message: "请输入名称", trigger: "blur" }],
label: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
const treeSelectAry = computed({
get() {
return props.data.content ? props.data.content : [];
},
set(val: treeStruct[]) {
// emits("confirmTree", val);
return val;
},
});
/**
@ 作者: 秦东
@ 时间: 2024-12-02 11:22:18
@ 功能: 递归查数
*/
const jiShuDiGui = (val: []) => {
if (!Array.isArray(val)) return (jibuqi = 0);
val.forEach((item: any) => {
jibuqi++;
console.log("递归查数", jibuqi);
if (item.children && item.children.length > 0) {
jiShuDiGui(item.children);
}
});
};
watch(
() => visible,
(val: booble) => {
jiShuDiGui(props.data.content);
},
{ deep: true }
);
watch(
() => props.modelValue,
(val: boolean) => {
visible.value = val
if (val) {
initEditor()
}
() => props.modelValue,
(val: boolean) => {
visible.value = val;
if (val) {
initEditor();
}
)
}
);
const initEditor = () => {
nextTick(() => {
editor.value = aceEdit(props.content, props.id, props.codeType)
})
}
nextTick(() => {
editor.value = aceEdit(props.content, props.id, props.codeType);
});
};
const dialogConfirm = () => {
const editVal = editor.value.getValue()
emits('confirm', editVal)
}
const editVal = editor.value.getValue();
emits("confirm", editVal);
};
const drawerBeforeClose = () => {
emits('update:modelValue', false)
emits('beforeClose')
treeSelectAry=[]
}
onMounted(() => {})
emits("update:modelValue", false);
emits("beforeClose");
treeSelectAry.value = [];
};
onMounted(() => {});
onUnmounted(() => {
if (Object.keys(editor.value).length !== 0) {
editor.value.destroy()
editor.value.container.remove()
}
})
if (Object.keys(editor.value).length !== 0) {
editor.value.destroy();
editor.value.container.remove();
}
});
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:03:26
@ 功能: 打开添加弹窗
*/
const pickAdd = (val:treeStruct) => {
guodu.value = val
isTopHeader.value = false
addIsShow.value = true
}
const pickAdd = (val: treeStruct) => {
guodu.value = val;
isTopHeader.value = false;
addIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:06:41
@ 功能: 关闭弹窗
*/
const pickAddClose = () => {
guodu.value = {}
treeSelectTitle.label = ""
addIsShow.value = false
butLoad.value = false
editTitleFormRef.value.resetFields();
}
guodu.value = {};
treeSelectTitle.label = "";
addIsShow.value = false;
butLoad.value = false;
editTitleFormRef.value.resetFields();
};
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:09:53
@ 功能: 添加顶级分类
*/
const addTopClass = () => {
isTopHeader.value = true
addIsShow.value = true
}
isTopHeader.value = true;
addIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:10:27
@ 功能: 确定添加分类
*/
const pickIsTrue = () => {
butLoad.value = true
editTitleFormRef.value.validate((isValid: boolean) => {
if(isValid){
jibuqi++
if(isTopHeader.value){
treeSelectAry.push({
value: jibuqi,
label: treeSelectTitle.label,
children: []
})
}else{
if(guodu.value.children){
guodu.value.children.push({
value: jibuqi,
label: treeSelectTitle.label,
children: []
})
}else{
guodu.value.children=[
{
value: jibuqi,
label: treeSelectTitle.label,
children: []
}
]
}
}
butLoad.value = true;
editTitleFormRef.value.validate((isValid: boolean) => {
if (isValid) {
jibuqi++;
if (isTopHeader.value) {
treeSelectAry.value.push({
value: jibuqi,
label: treeSelectTitle.label,
children: [],
});
} else {
if (guodu.value.children) {
guodu.value.children.push({
value: jibuqi,
label: treeSelectTitle.label,
children: [],
});
} else {
guodu.value.children = [
{
value: jibuqi,
label: treeSelectTitle.label,
children: [],
},
];
}
}
pickAddClose()
}else{
butLoad.value = false
}
})
}
pickAddClose();
} else {
butLoad.value = false;
}
});
};
/**
@ 作者: 秦东
@ 时间: 2024-09-27 08:38:35
@ 功能: 回填主表值
*/
const dialogConfirmTree = () => {
// let drawer = ({
// visible: false,
// type: '',
// title: '',
// codeType: '',
// direction: undefined, //rtl / ltr
// callback: ''
// })
// let opt = new Array
// treeSelectAry.forEach((item:treeStruct) => {
// opt.push({
// value: item.value,
// label: item.label,
// children: item.children
// })
// })
// let drawer = ({
// visible: false,
// type: '',
// title: '',
// codeType: '',
// direction: undefined, //rtl / ltr
// callback: ''
// })
// let opt = new Array
// treeSelectAry.forEach((item:treeStruct) => {
// opt.push({
// value: item.value,
// label: item.label,
// children: item.children
// })
// })
// emits('confirm', treeSelectAry)
emits('confirmTree', treeSelectAry)
drawerBeforeClose()
}
// emits('confirm', treeSelectAry)
console.log("回填主表值", treeSelectAry.value);
emits("confirmTree", treeSelectAry.value, props.data.type);
drawerBeforeClose();
};
/**
@ 作者: 秦东
@ 时间: 2024-09-27 13:51:31
@ 功能: 删除指定节点数据
*/
const pickDel = (val:treeStruct) => {
console.log("要删除得节点-->",val.value)
delDiGui(treeSelectAry,val)
console.log("删除指定节点数据---结果-->",treeSelectAry)
}
const pickDel = (val: treeStruct) => {
console.log("要删除得节点-->", val.value);
delDiGui(treeSelectAry, val);
console.log("删除指定节点数据---结果-->", treeSelectAry);
};
/**
@ 作者: 秦东
@ 时间: 2024-09-27 14:13:23
@ 功能: 执行递归删除
*/
const delDiGui = (tree: treeStruct[],val:treeStruct) => {
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.value == val.value) {
tree.splice(i, 1);
return;
}
if (Array.isArray(node.children) && node.children.length) {
return delDiGui(node.children, val);
}
const delDiGui = (tree: treeStruct[], val: treeStruct) => {
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.value == val.value) {
tree.splice(i, 1);
return;
}
}
const edisIsShow = ref(false)
const butLoadEdit = ref(false)
if (Array.isArray(node.children) && node.children.length) {
return delDiGui(node.children, val);
}
}
};
const edisIsShow = ref(false);
const butLoadEdit = ref(false);
/**
@ 作者: 秦东
@ 时间: 2024-09-29 13:29:17
@ 功能: 编辑级联舒体
*/
const pickEdis = (val:treeStruct) => {
guodu.value = val
treeSelectTitle.label = val.label
edisIsShow.value = true
}
const pickEdis = (val: treeStruct) => {
guodu.value = val;
treeSelectTitle.label = val.label;
edisIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-09-29 13:33:51
@ 功能: 关闭编辑窗体
*/
const pickEditClose = () => {
guodu.value = {}
treeSelectTitle.label = ""
edisIsShow.value = false
butLoadEdit.value = false
editTitleInfoRef.value.resetFields();
}
guodu.value = {};
treeSelectTitle.label = "";
edisIsShow.value = false;
butLoadEdit.value = false;
editTitleInfoRef.value.resetFields();
};
/**
@ 作者: 秦东
@ 时间: 2024-09-29 13:36:30
@ 功能: 确定修改
*/
const pickEditIsTrue = () => {
butLoadEdit.value = true
editTitleInfoRef.value.validate((isValid: boolean) => {
if(isValid){
guodu.value.label = treeSelectTitle.label
pickEditClose()
}else{
butLoad.value = false
}
})
}
butLoadEdit.value = true;
editTitleInfoRef.value.validate((isValid: boolean) => {
if (isValid) {
guodu.value.label = treeSelectTitle.label;
pickEditClose();
} else {
butLoad.value = false;
}
});
};
</script>
<template>
<el-drawer
v-model="visible"
size="60%"
:title="title"
:direction="direction as any"
class="ace-dialog"
:append-to-body="true"
:before-close="drawerBeforeClose"
>
<template #header>
<div v-html="title"></div>
</template>
<div v-if="['cascader', 'treeSelect'].includes(props.data.type)">
<el-table
:data="treeSelectAry"
row-key="value"
default-expand-all
>
<el-table-column prop="label" label="名称" />
<el-table-column label="操作" width="200" align="center">
<template #header>
<el-button type="success" @click="addTopClass">添加顶级分类</el-button>
</template>
<template #default="scope">
<el-button-group>
<el-button text type="success" @click="pickAdd(scope.row)">添加</el-button>
<el-button text type="warning" @click="pickEdis(scope.row)">修改</el-button>
<el-button text type="danger" @click="pickDel(scope.row)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<div v-else :id="id"></div>
<div class="dialog-footer">
<el-button v-if="['cascader', 'treeSelect'].includes(props.data.type)" type="primary" size="small" @click="dialogConfirmTree">
确定
</el-button>
<el-button v-else type="primary" size="small" @click="dialogConfirm">
确定
</el-button>
</div>
<el-dialog
v-model="addIsShow"
title="编辑"
width="500"
:before-close="pickAddClose"
>
<el-form ref="editTitleFormRef" :rules="editTitleRules" :model="treeSelectTitle" label-width="auto" style="max-width: 600px">
<el-form-item label="名称:" prop="label">
<el-input v-model="treeSelectTitle.label" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="pickAddClose">取消</el-button>
<el-button v-loading="butLoad" type="primary" @click="pickIsTrue">确定</el-button>
</div>
</template>
</el-dialog>
<el-drawer
v-model="visible"
size="60%"
:title="title"
:direction="direction as any"
class="ace-dialog"
:append-to-body="true"
:before-close="drawerBeforeClose"
>
<template #header>
<div v-html="title"></div>
</template>
<div v-if="['cascader', 'treeSelect'].includes(props.data.type)">
<el-table :data="treeSelectAry" row-key="value" default-expand-all>
<el-table-column prop="label" label="名称" />
<el-table-column label="操作" width="200" align="center">
<template #header>
<el-button type="success" @click="addTopClass">添加顶级分类</el-button>
</template>
<template #default="scope">
<el-button-group>
<el-button text type="success" @click="pickAdd(scope.row)">添加</el-button>
<el-button text type="warning" @click="pickEdis(scope.row)">修改</el-button>
<el-button text type="danger" @click="pickDel(scope.row)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<div v-else :id="id"></div>
<div class="dialog-footer">
<el-button
v-if="['cascader', 'treeSelect'].includes(props.data.type)"
type="primary"
size="small"
@click="dialogConfirmTree"
>
确定
</el-button>
<el-button v-else type="primary" size="small" @click="dialogConfirm">
确定
</el-button>
</div>
<el-dialog
v-model="edisIsShow"
title="编辑"
width="500"
:before-close="pickEditClose"
>
<el-form ref="editTitleInfoRef" :rules="editTitleRules" :model="treeSelectTitle" label-width="auto" style="max-width: 600px">
<el-form-item label="名称:" prop="label">
<el-input v-model="treeSelectTitle.label" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="pickEditClose">取消</el-button>
<el-button v-loading="butLoadEdit" type="primary" @click="pickEditIsTrue">确定</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="addIsShow" title="编辑" width="500" :before-close="pickAddClose">
<el-form
ref="editTitleFormRef"
:rules="editTitleRules"
:model="treeSelectTitle"
label-width="auto"
style="max-width: 600px"
>
<el-form-item label="名称:" prop="label">
<el-input v-model="treeSelectTitle.label" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="pickAddClose">取消</el-button>
<el-button v-loading="butLoad" type="primary" @click="pickIsTrue"
>确定</el-button
>
</div>
</template>
</el-dialog>
</el-drawer>
<el-dialog
v-model="edisIsShow"
title="编辑"
width="500"
:before-close="pickEditClose"
>
<el-form
ref="editTitleInfoRef"
:rules="editTitleRules"
:model="treeSelectTitle"
label-width="auto"
style="max-width: 600px"
>
<el-form-item label="名称:" prop="label">
<el-input v-model="treeSelectTitle.label" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="pickEditClose">取消</el-button>
<el-button v-loading="butLoadEdit" type="primary" @click="pickEditIsTrue"
>确定</el-button
>
</div>
</template>
</el-dialog>
</el-drawer>
</template>
<style lang='scss' scoped>
#editJson, #editJsonCopy {
width: 100%;
height: calc(100vh - 90px);
<style lang="scss" scoped>
#editJson,
#editJsonCopy {
width: 100%;
height: calc(100vh - 90px);
}
</style>

61
src/components/DesignForm/app/index.vue

@ -113,6 +113,7 @@ const emits = defineEmits<{
(e: "selectionChange", row: any): void;
(e: "btnClick", btn: any, row?: any): void; //
}>();
const loadData = ref(false);
const operState = ref<number>(1); // 1234;5:
const idList = ref<string[]>([]);
const designStore = useDesignFormStore();
@ -271,7 +272,7 @@ const selectionChange = (row: any) => {
@ 功能: 获取表格头内容
*/
const columnsFilter = computed(() => {
// console.log("props.data",props.data)
console.log("props.data判断是否有标题", props.data);
if (!state.columnsCheck?.length) {
// console.log("props.data",props.data)
return props.data.columns;
@ -631,6 +632,60 @@ const judjeRadio = (val: any, options: any[]) => {
}
return val;
};
/**
@ 作者: 秦东
@ 时间: 2024-11-29 13:46:36
@ 功能: 获取级联选择值
*/
const judjeCascader = (val: any[], options: any[]) => {
if (val.length < 0) return "";
let valAry = stringToObj(val);
console.log("获取级联选择值", stringToObj(val), val.length, options);
if (!Array.isArray(valAry)) return "";
let title = "";
valAry.forEach((item: any) => {
// console.log("item", item);
console.log(item + "=============:", item, diGuiJilian(item, options));
if (title == "") {
title = title + diGuiJilian(item, options);
} else {
title = title + " / " + diGuiJilian(item, options);
}
});
return title;
};
/**
@ 作者: 秦东
@ 时间: 2024-11-29 13:57:04
@ 功能: 递归查询数据
*/
const diGuiJilian = (val: any, options: any[]) => {
if (!Array.isArray(options)) return "";
let dataVal = "";
options.forEach((item: any) => {
if (item.value == val) {
// console.log(val + "=============:", item.value, item.label);
dataVal = item.label;
// return dataVal;
// return item.label;
}
if (item.children && item.children.length > 0) {
// console.log(
// val + "===========1==:",
// item.children,
// item.children.length
// );
let gdVal = diGuiJilian(val, item.children);
if (gdVal != "") {
dataVal = gdVal;
}
}
});
return dataVal;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-02 14:49:40
@ -1091,6 +1146,7 @@ const transformOption = (val: string | number, type?: string) => {
:data="tableDataList"
@selection-change="selectionChange"
table-layout="fixed"
v-loading="state.loading"
>
<template v-for="item in columnsFilter" :key="item.id || item.label">
<el-table-column
@ -1245,6 +1301,9 @@ const transformOption = (val: string | number, type?: string) => {
<!-- {{scope.row[scope.column.property]}}{{item}} -->
{{ scope.row[scope.column.property] }}
</template>
<template v-if="item.fieldClass == 'cascader'" #default="scope">
{{ judjeCascader(scope.row[scope.column.property], item.options) }}
</template>
<template v-if="item.fieldClass == 'radio'" #default="scope">
<!-- {{scope.row[scope.column.property]}}{{item}} -->
{{ judjeRadio(scope.row[scope.column.property], item.options) }}

9219
src/components/DesignForm/formControlPropertiNew.vue

File diff suppressed because it is too large

74
src/components/DesignForm/public/expand/cascader.vue

@ -3,45 +3,49 @@
@ 时间: 2024-09-29 13:46:55
@ 备注: 级联器
-->
<script lang='ts' setup>
<script lang="ts" setup>
import { stringToObj } from "@/utils/DesignForm/form";
const props = withDefaults(
defineProps<{
modelValue?: string
disabled?: boolean
action?: string
name?: string
fileList?: Object
control?: Object
config?: Object
data?: Object
options?: Object
}>(),
{}
)
defineProps<{
modelValue?: string;
disabled?: boolean;
action?: string;
name?: string;
fileList?: Object;
control?: Object;
config?: Object;
data?: Object;
options?: Object;
}>(),
{}
);
const emits = defineEmits<{
(e: 'update:modelValue', value: string): void
}>()
(e: "update:modelValue", value: string): void;
}>();
const value = computed({
get: () => {
console.log("图片上传处理-112->",props.modelValue)
return props.modelValue
},
set: (newVal: any) => {
emits('update:modelValue', newVal)
return newVal
},
get: () => {
console.log("图片上传处理-112->", props.modelValue, stringToObj(props.modelValue));
return stringToObj(props.modelValue);
},
set: (newVal: any) => {
emits("update:modelValue", newVal);
return newVal;
},
});
const handleChange = () => {
}
const handleChange = () => {};
const cascaderProps = {
label: "label",
value: "value",
children: "children",
};
</script>
<template>
<el-cascader
v-model="value"
:options="props.options"
@change="handleChange"
/>
<el-cascader
v-model="value"
:options="props.options"
clearable
:props="cascaderProps"
@change="handleChange"
/>
</template>
<style lang='scss' scoped>
</style>
<style lang="scss" scoped></style>

8
src/components/DesignForm/public/form/calculate/cssInfo.ts

@ -110,8 +110,14 @@ export const AnalysisCss = (ele:any) =>{
if(ele['width']){
if(ele['width'] != ""){
styleObject['width'] = ele['width'].toString()+"px";
if(ele['width'].includes('%')){
styleObject['width'] = ele['width']
}else{
styleObject['width'] = ele['width'].toString()+"px";
}
}
}
if(ele['widthMax'] && ele['widthMax'] != ""){
styleObject['max-width'] = ele['widthMax'].toString()+"px";

1696
src/components/DesignForm/public/form/formGroup.vue

File diff suppressed because it is too large

2350
src/components/DesignForm/public/form/formItem.vue

File diff suppressed because it is too large

2589
src/components/DesignForm/tableListPage/index.vue

File diff suppressed because it is too large

145
src/components/IconSelect/appMenuSvgPage.vue

@ -3,101 +3,106 @@
@ 时间: 2024-04-22 14:39:07
@ 备注: 选择图标弹窗
-->
<script lang='ts' setup>
<script lang="ts" setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import SvgPage from "@/components/IconSelect/svgPage.vue";
const props = defineProps({
isShow:{
type: Boolean,
default: false,
},
svgName:{
type:String,
require: false,
default:""
},
svgId:{
type:String,
require: false,
default:""
},
iconList:{
type:Object,
default(){
return {}
}
}
isShow: {
type: Boolean,
default: false,
},
svgName: {
type: String,
require: false,
default: "",
},
svgId: {
type: String,
require: false,
default: "",
},
iconList: {
type: Object,
default() {
return {};
},
},
});
const visible = ref(false); //
const iconSelectorRef = ref();
const iconSelectorDialogRef = ref();
const emits = defineEmits(["update:isShow","update:svgName"]);
const emits = defineEmits(["update:isShow", "update:svgName"]);
const filterIconNames = ref<string[]>([]);
//
onClickOutside(iconSelectorRef, () => (visible.value = false), {
ignore: [iconSelectorDialogRef],
});
watch(() => props.isShow, (val:boolean) =>{
if(val){
filterIconNames.value = props.iconList
}
})
watch(
() => props.isShow,
(val: boolean) => {
if (val) {
filterIconNames.value = props.iconList;
}
}
);
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:43:49
@ 功能: 关闭
*/
const handleClose = () => {
emits("update:isShow",false)
}
emits("update:isShow", false);
};
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:54:03
@ 功能: 确定
*/
const handleSelect = (svgName:string) => {
console.log("确定",props.svgId,svgName)
emits("update:svgName",svgName)
handleClose()
}
const handleSelect = (svgName: string) => {
console.log("确定", props.svgId, svgName);
emits("update:svgName", svgName);
handleClose();
};
</script>
<template>
<el-dialog
v-model="props.isShow"
title="选择图标"
width="500"
:before-close="handleClose"
>
<el-input
v-model="filterValue"
class="p-2"
placeholder="搜索图标"
clearable
@input="handleFilter"
/>
<el-divider border-style="dashed" style="margin:0px;" />
<el-scrollbar height="250px">
<ul class="icon_list">
<li
v-for="(iconName, index) in filterIconNames"
:key="index"
class="icon-item"
@click="handleSelect(iconName)"
>
<el-tooltip :content="iconName" placement="bottom" effect="light">
<svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
</el-tooltip>
</li>
</ul>
</el-scrollbar>
<el-dialog
v-model="props.isShow"
title="选择图标"
width="500"
:before-close="handleClose"
>
<el-input
v-model="filterValue"
class="p-2"
placeholder="搜索图标"
clearable
@input="handleFilter"
/>
<el-divider border-style="dashed" style="margin: 0px" />
</el-dialog>
<el-scrollbar height="250px">
<ul class="icon_list">
<li
v-for="(iconName, index) in filterIconNames"
:key="index"
class="icon-item"
@click="handleSelect(iconName)"
>
<el-tooltip :content="iconName" placement="bottom" effect="light">
<svg-icon
color="var(--el-text-color-regular)"
:size="40"
:icon-class="iconName"
/>
</el-tooltip>
</li>
</ul>
</el-scrollbar>
</el-dialog>
</template>
<style lang='scss' scoped>
<style lang="scss" scoped>
.icon_list {
display: flex;
flex-wrap: wrap;
@ -114,7 +119,7 @@ const handleSelect = (svgName:string) => {
margin: 0 5px 5px 0;
cursor: pointer;
border: 1px solid #ccc;
padding: 5px 10px;
padding: 5px 10px;
&:hover {
color: var(--el-color-primary);
border-color: var(--el-color-primary);
@ -123,9 +128,9 @@ const handleSelect = (svgName:string) => {
}
}
}
.svgBox{
:deep(.el-popper){
padding:0px;
.svgBox {
:deep(.el-popper) {
padding: 0px;
}
}
</style>

514
src/views/sysworkflow/codepage/index.vue

@ -3,114 +3,114 @@
@ 时间: 2023-08-28 14:47:07
@ 备注: 表单设计
-->
<script lang='ts' setup>
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } from '@/api/DesignForm/requestapi'
<script lang="ts" setup>
import { SearchForm, customerFormCont, customerFormConfig } from "@/api/DesignForm/type";
import {
getCustomerFormList,
getProductionMarkForm,
editProductionFormStatus,
} from "@/api/DesignForm/requestapi";
//
import CreateForm from '@/views/sysworkflow/codepage/createform.vue'
import SetupConfig from '@/views/sysworkflow/codepage/setupconfig.vue'
import DataTableStructure from '@/views/sysworkflow/codepage/datatablestructure.vue'
import CreateForm from "@/views/sysworkflow/codepage/createform.vue";
import SetupConfig from "@/views/sysworkflow/codepage/setupconfig.vue";
import DataTableStructure from "@/views/sysworkflow/codepage/datatablestructure.vue";
import FlowDrawingBoard from '@/views/sysworkflow/flow/flowDrawingBoard.vue'
import FlowDrawingBoard from "@/views/sysworkflow/flow/flowDrawingBoard.vue";
const contbody = ref()
const contbody = ref();
const queryParams = reactive<SearchForm>({
page: 1,
pagesize:15
page: 1,
pagesize: 15,
});
const ids = ref<number[]>([]); //
const editIds = reactive<string[]>([]); //
const loading =ref(false); //
const show =ref(false); //
const ids = ref<number[]>([]); //
const editIds = reactive<string[]>([]); //
const loading = ref(false); //
const show = ref(false); //
const drawerOpenOrClose = ref(false);
const total = ref(0); //
const contList = ref<customerFormCont[]>()
const total = ref(0); //
const contList = ref<customerFormCont[]>();
const drawerWith = ref();
const editid = ref<string>("")
const editid = ref<string>("");
const formConfigCont = reactive<customerFormConfig>({
formname:"",
formlogo:""
})
formname: "",
formlogo: "",
});
const formId = ref<string>("");
//
function handleQuery(){
getCustomerFormList(queryParams)
.then(({ data }) => {
// console.log("-->",data);
total.value = data.total
contList.value = data.list
})
.finally(() => {})
function handleQuery() {
getCustomerFormList(queryParams)
.then(({ data }) => {
// console.log("-->",data);
total.value = data.total;
contList.value = data.list;
})
.finally(() => {});
}
//
function resetQuery(){
queryParams.page = 1;
queryParams.keywords = "";
function resetQuery() {
queryParams.page = 1;
queryParams.keywords = "";
}
//
function openDialog(){
formId.value = ""
drawerWith.value = contbody.value?.clientWidth
getProductionMarkForm()
.then(({data})=>{
formConfigCont.formlogo = data.formlogo
formConfigCont.formname = data.formname
// console.log("",formConfigCont)
})
.finally(()=>{
drawerOpenOrClose.value = true;
})
function openDialog() {
formId.value = "";
drawerWith.value = contbody.value?.clientWidth;
getProductionMarkForm()
.then(({ data }) => {
formConfigCont.formlogo = data.formlogo;
formConfigCont.formname = data.formname;
// console.log("",formConfigCont)
})
.finally(() => {
drawerOpenOrClose.value = true;
});
}
//
function handleDelete(){
if(ids.value.length < 1){
ElMessage.error('没有选中要删除得数据!')
}else{
ElMessageBox.confirm(
'请问是否真的删除?删除后数据将无法找回!',
'温馨提示!',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
editProductionFormStatus({id:ids.value.map(String),status:3,is_delete:false})
.then(({data})=>{
handleQuery()
})
})
.catch(() => {
handleQuery()
})
}
function handleDelete() {
if (ids.value.length < 1) {
ElMessage.error("没有选中要删除得数据!");
} else {
ElMessageBox.confirm("请问是否真的删除?删除后数据将无法找回!", "温馨提示!", {
confirmButtonText: "删除",
cancelButtonText: "取消",
type: "warning",
draggable: true,
})
.then(() => {
editProductionFormStatus({
id: ids.value.map(String),
status: 3,
is_delete: false,
}).then(({ data }) => {
handleQuery();
});
})
.catch(() => {
handleQuery();
});
}
}
//
function editCustomerFormState(cont:customerFormCont){
// console.log("",cont)
editIds.push(cont.id)
ElMessageBox.confirm(
'请问是否真的删除?删除后数据将无法找回!',
'温馨提示!',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
editProductionFormStatus({id:editIds,status:3,is_delete:false})
.then(({data})=>{
handleQuery()
editIds.splice(0,editIds.length);
})
})
.catch(() => {
handleQuery()
})
function editCustomerFormState(cont: customerFormCont) {
// console.log("",cont)
editIds.push(cont.id);
ElMessageBox.confirm("请问是否真的删除?删除后数据将无法找回!", "温馨提示!", {
confirmButtonText: "删除",
cancelButtonText: "取消",
type: "warning",
draggable: true,
})
.then(() => {
editProductionFormStatus({ id: editIds, status: 3, is_delete: false }).then(
({ data }) => {
handleQuery();
editIds.splice(0, editIds.length);
}
);
})
.catch(() => {
handleQuery();
});
}
/**
* 行checkbox change事件
@ -119,181 +119,191 @@ function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
//
function setupCustomerForm(cont:customerFormCont){
editid.value = cont.id
show.value = true
function setupCustomerForm(cont: customerFormCont) {
editid.value = cont.id;
show.value = true;
}
onMounted(()=>{
handleQuery();
// drawerWith.value = window.innerWidth - 220
onMounted(() => {
handleQuery();
// drawerWith.value = window.innerWidth - 220
});
window.addEventListener("resize", function () {
// drawerWith.value = window.innerWidth -220
// console.log("-->",window.innerWidth);
});
window.addEventListener("resize", function(){
// drawerWith.value = window.innerWidth -220
// console.log("-->",window.innerWidth);
})
//
function editCustomerForm(cont:customerFormCont){
drawerWith.value = contbody.value?.clientWidth
formId.value = cont.id.toString();
drawerOpenOrClose.value = true;
function editCustomerForm(cont: customerFormCont) {
drawerWith.value = contbody.value?.clientWidth;
formId.value = cont.id.toString();
drawerOpenOrClose.value = true;
}
const dataTableIsShow = ref(false)
const formCont = ref<customerFormCont>()
const dataTableIsShow = ref(false);
const formCont = ref<customerFormCont>();
//
const openDataTableStructure = (cont:customerFormCont) =>{
formCont.value = cont
dataTableIsShow.value = true;
// console.log("",cont)
}
const openDataTableStructure = (cont: customerFormCont) => {
formCont.value = cont;
dataTableIsShow.value = true;
// console.log("",cont)
};
//
const drawer = ref(false)
const drawerWidht = ref()
const isFormFlow = ref(false)
const customerFormKey = ref<string>()
const customerFormName = ref<string>()
const flowKey = ref<string>()
const setupWorkFlow = (cont:customerFormCont) => {
drawerWidht.value = contbody.value?.clientWidth
// console.log("clientHeight--->",cont)
drawer.value = true
isFormFlow.value = true;
customerFormName.value = cont.name
customerFormKey.value = cont.id.toString()
flowKey.value = cont.flowkey.toString()
}
const drawer = ref(false);
const drawerWidht = ref();
const isFormFlow = ref(false);
const customerFormKey = ref<string>();
const customerFormName = ref<string>();
const flowKey = ref<string>();
const setupWorkFlow = (cont: customerFormCont) => {
drawerWidht.value = contbody.value?.clientWidth;
// console.log("clientHeight--->",cont)
drawer.value = true;
isFormFlow.value = true;
customerFormName.value = cont.name;
customerFormKey.value = cont.id.toString();
flowKey.value = cont.flowkey.toString();
};
</script>
<template>
<div ref="contbody">
<div class="app-container">
<div class="search">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="表单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon><i-ep-search /></template>搜索
</el-button>
<el-button @click="resetQuery">
<template #icon>
<i-ep-refresh /></template>重置
</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never">
<template #header>
<el-button type="success" @click="openDialog()"><i-ep-plus />新增表单</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<i-ep-delete />删除表单
</el-button>
</template>
<el-table
v-loading="loading"
highlight-current-row
:data="contList"
border
@selection-change="handleSelectionChange"
>
<el-table-column fixed type="selection" width="55" align="center" />
<el-table-column fixed label="表单名称" prop="name" width="350" />
<el-table-column label="分类" align="center" width="150">
<template #default="scope">
<el-tag v-if="scope.row.classify === 1" effect="plain">表单</el-tag>
<el-tag v-else effect="plain">流程表单</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="创建人" prop="creatername" width="140" />
<el-table-column label="创建时间" prop="creatertime" />
<el-table-column fixed="right" label="操作" align="center" width="350">
<template #default="scope">
<!-- <el-button
<div ref="contbody">
<div class="app-container">
<div class="search">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="表单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon><i-ep-search /></template>搜索
</el-button>
<el-button @click="resetQuery">
<template #icon> <i-ep-refresh /></template>重置
</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never">
<template #header>
<el-button type="success" @click="openDialog()"
><i-ep-plus />新增表单</el-button
>
<el-button type="danger" :disabled="ids.length === 0" @click="handleDelete()">
<i-ep-delete />删除表单
</el-button>
</template>
<el-table
v-loading="loading"
highlight-current-row
:data="contList"
border
@selection-change="handleSelectionChange"
>
<el-table-column fixed type="selection" width="55" align="center" />
<el-table-column fixed label="表单名称" prop="name" width="350" />
<el-table-column label="分类" align="center" width="150">
<template #default="scope">
<el-tag v-if="scope.row.classify === 1" effect="plain">表单</el-tag>
<el-tag v-else effect="plain">流程表单</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="创建人" prop="creatername" width="140" />
<el-table-column label="创建时间" prop="creatertime" />
<el-table-column fixed="right" label="操作" align="center" width="350">
<template #default="scope">
<!-- <el-button
type="success"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
><i-ep-Share />版本</el-button> -->
<el-button
type="success"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
>
<i-ep-Setting />设置
</el-button>
<el-button
type="warning"
link
size="small"
@click.stop="openDataTableStructure(scope.row)"
>
<i-ep-MessageBox />数据结构
</el-button>
<el-button
type="primary"
link
size="small"
@click.stop="editCustomerForm(scope.row)"
>
<i-ep-edit />编辑
</el-button>
<el-button
type="danger"
link
size="small"
@click.stop="editCustomerFormState(scope.row)"
>
<i-ep-delete />删除
</el-button>
<el-button
type="info"
link
size="small"
@click.stop="setupWorkFlow(scope.row)"
>
<i-ep-operation />流程
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.pagesize"
@pagination="handleQuery"
/>
</el-card>
</div>
</div>
<el-drawer v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass">
<CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
</el-drawer>
<SetupConfig v-model:show="show" :editid="editid" @handle_query="handleQuery" />
<DataTableStructure v-model:isshow="dataTableIsShow" :formcont="formCont" />
<FlowDrawingBoard v-model:open-drawer="drawer" :drawer-widht="drawerWidht" :is-form-flow="isFormFlow" :customer-form-name="customerFormName" :customer-form-key="customerFormKey" :flow-key="flowKey" @chanerequest="handleQuery" />
<el-button
type="success"
link
size="small"
@click.stop="setupCustomerForm(scope.row)"
>
<i-ep-Setting />设置
</el-button>
<el-button
type="warning"
link
size="small"
@click.stop="openDataTableStructure(scope.row)"
>
<i-ep-MessageBox />数据结构
</el-button>
<el-button
type="primary"
link
size="small"
@click.stop="editCustomerForm(scope.row)"
>
<i-ep-edit />编辑
</el-button>
<el-button
type="danger"
link
size="small"
@click.stop="editCustomerFormState(scope.row)"
>
<i-ep-delete />删除
</el-button>
<el-button
type="info"
link
size="small"
@click.stop="setupWorkFlow(scope.row)"
>
<i-ep-operation />流程
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</div>
<el-drawer
v-model="drawerOpenOrClose"
title="设置/编辑自定义表单"
:with-header="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
:size="drawerWith"
class="drawerClass"
>
<CreateForm
v-model:draweropenclose="drawerOpenOrClose"
:formid="formId"
:formconfigcont="formConfigCont"
@handlequery="handleQuery"
/>
</el-drawer>
<SetupConfig v-model:show="show" :editid="editid" @handle_query="handleQuery" />
<DataTableStructure v-model:isshow="dataTableIsShow" :formcont="formCont" />
<FlowDrawingBoard
v-model:open-drawer="drawer"
:drawer-widht="drawerWidht"
:is-form-flow="isFormFlow"
:customer-form-name="customerFormName"
:customer-form-key="customerFormKey"
:flow-key="flowKey"
@chanerequest="handleQuery"
/>
</template>
<style lang='scss' scoped>
.drawerClass{
.el-drawer__body{
padding: 0;
}
<style lang="scss" scoped>
.drawerClass {
.el-drawer__body {
padding: 0;
}
}
</style>

905
src/views/sysworkflow/lowcodepage/appCardPage.vue

@ -3,471 +3,521 @@
@ 时间: 2024-07-22 08:53:50
@ 备注: 自定义应用卡片视图
-->
<script lang='ts' setup>
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
<script lang="ts" setup>
import {
json2string,
objToStringify,
string2json,
stringToObj,
} from "@/utils/DesignForm/form";
import { customerFormCont } from "@/api/DesignForm/type";
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord } from '@/api/DesignForm/requestapi'
import {
getCustomerFormList,
editProductionFormStatus,
appJwtPower,
getFieldRecord,
} from "@/api/DesignForm/requestapi";
/**
@ 作者: 秦东
@ 时间: 2024-07-22 11:30:11
@ 功能: 引入组件
*/
import AppContainer from '@/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue'
import AppContainerPage from '@/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue' //
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue'
import AppContainer from "@/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue";
import AppContainerPage from "@/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue"; //
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue";
import TableFlow from "@/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue";
const props = defineProps({
searchQuery:{
type:Object,
default(){
return {}
}
},
appGroup:{
type:String,
default:""
},
drawerWith:{
type:Number,
default:true
}
searchQuery: {
type: Object,
default() {
return {};
},
},
appGroup: {
type: String,
default: "",
},
drawerWith: {
type: Number,
default: true,
},
});
const emits = defineEmits(["getRongQiAttr"]);
const openTaskDrawer = ref(false) //
const openTaskDrawer = ref(false); //
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:09:29
@ 功能: 总记录数
*/
const pageTotal = ref(0)
const contList = ref<customerFormCont[]>() //
const loadingApp = ref(false)
const runIsOpen = ref(false)
const pickAppInfo = ref<customerFormCont>() //
const pageTotal = ref(0);
const contList = ref<customerFormCont[]>(); //
const loadingApp = ref(false);
const runIsOpen = ref(false);
const pickAppInfo = ref<customerFormCont>(); //
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:54:23
@ 功能: 获取表单列表
*/
const getFormAppList = (val:any) => {
loadingApp.value = true
let sendInfo = {
page:val.page,
pagesize:val.pagesize,
keywords:val.searchWork,
groupId:props.appGroup
}
getCustomerFormList(sendInfo)
.then(({ data }) => {
// console.log("-->",data);
pageTotal.value = data.total
contList.value = data.list
})
.finally(() => {
loadingApp.value = false
})
}
const getFormAppList = (val: any) => {
loadingApp.value = true;
let sendInfo = {
page: val.page,
pagesize: val.pagesize,
keywords: val.searchWork,
groupId: props.appGroup,
};
getCustomerFormList(sendInfo)
.then(({ data }) => {
// console.log("-->",data);
pageTotal.value = data.total;
contList.value = data.list;
})
.finally(() => {
loadingApp.value = false;
});
};
onMounted(() => {
nextTick(() => {
getFormAppList(props.searchQuery);
})
})
watch(()=>props.appGroup,()=>{
getFormAppList(props.searchQuery);
})
const srcList = (val:string) =>{
if(val){
return [val]
}else{
return ["https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png"]
}
}
nextTick(() => {
getFormAppList(props.searchQuery);
});
});
watch(
() => props.appGroup,
() => {
getFormAppList(props.searchQuery);
}
);
const srcList = (val: string) => {
if (val) {
return [val];
} else {
return [
"https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png",
];
}
};
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:57:45
@ 功能: 编辑应用
*/
const editIsOpen = ref(false)
const appKey = ref<string>("")
const editForm = (val:any) => {
emits("getRongQiAttr")
pickAppInfo.value = val
editIsOpen.value = true;
}
const editIsOpen = ref(false);
const appKey = ref<string>("");
const editForm = (val: any) => {
emits("getRongQiAttr");
pickAppInfo.value = val;
editIsOpen.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:58:19
@ 功能: 编辑应用状态
*/
const eidtStatus = (val:any) => {
emits("getRongQiAttr")
ElMessageBox.confirm(
'请问是否真的删除?删除后数据将无法找回!',
'温馨提示!',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
editProductionFormStatus({id:[val.id.toString()],status:3,is_delete:false})
.then(({data})=>{
getFormAppList(props.searchQuery);
})
})
.catch(() => {
getFormAppList(props.searchQuery);
})
}
const eidtStatus = (val: any) => {
emits("getRongQiAttr");
ElMessageBox.confirm("请问是否真的删除?删除后数据将无法找回!", "温馨提示!", {
confirmButtonText: "删除",
cancelButtonText: "取消",
type: "warning",
draggable: true,
})
.then(() => {
editProductionFormStatus({
id: [val.id.toString()],
status: 3,
is_delete: false,
}).then(({ data }) => {
getFormAppList(props.searchQuery);
});
})
.catch(() => {
getFormAppList(props.searchQuery);
});
};
/**
@ 作者: 秦东
@ 时间: 2024-07-22 10:01:17
@ 功能: 打开应用
*/
const openApp = (val:any) => {
emits("getRongQiAttr")
pickAppInfo.value = val
appJwtPower({id:val.signCodeStr,types:1})
.then(({data})=>{
// console.log("------>data:",data)
if(data){
runIsOpen.value = true
}else{
ElMessage({
message: '对不起!您不可使用此App!请联系管理员进行授权!',
type: 'error',
plain: true,
})
}
})
}
const openApp = (val: any) => {
emits("getRongQiAttr");
pickAppInfo.value = val;
appJwtPower({ id: val.signCodeStr, types: 1 }).then(({ data }) => {
// console.log("------>data:",data)
if (data) {
runIsOpen.value = true;
} else {
ElMessage({
message: "对不起!您不可使用此App!请联系管理员进行授权!",
type: "error",
plain: true,
});
}
});
};
defineExpose({
getFormAppList
})
getFormAppList,
});
/**
@ 作者: 秦东
@ 时间: 2024-07-23 15:27:51
@ 功能: 表单数据
*/
const state = reactive({
tableData: {
// tableProps: {}, //
columns: [],
config: {},
controlBtn:[],
operateBtn:[]
tableData: {
// tableProps: {}, //
columns: [],
config: {},
controlBtn: [],
operateBtn: [],
},
searchData: [],
loading: false,
attrObj: {},
config: {
pageSize: 10,
searchIsShow: true,
searchFormIsShow: true,
openPageMode: "drawer",
},
tagList: {},
formId: props.formKey || "",
formList: [], //
name: "",
treeData: {}, //
previewVisible: false,
tabsName: "second",
formFieldList: [], //
formApi: {
type: "1",
addApiUrl: "",
editApiUrl: "",
delApiUrl: "",
lookApiUrl: "",
},
dict: {},
refreshTable: true,
view: {
list: {
status: true,
isClick: false,
form: {
sortWord: "",
sortClass: 1,
title: [],
},
},
date: {
status: false,
isClick: false,
form: {
startTime: "",
endTime: "",
dayType: 1,
title: [],
},
},
searchData: [],
loading: false,
attrObj: {},
config: {
pageSize:10,
searchIsShow:true,
searchFormIsShow:true,
openPageMode:"drawer"
},
tagList: {},
formId: props.formKey || '',
formList: [], //
name: '',
treeData: {}, //
previewVisible: false,
tabsName: 'second',
formFieldList: [], //
formApi:{
type:"1",
addApiUrl:"",
editApiUrl:"",
delApiUrl:"",
lookApiUrl:""
},
dict: {},
refreshTable: true,
view:{
list:{
status:true,
isClick:false,
form:{
sortWord:"",
sortClass:1,
title:[]
}
},
date:{
status:false,
isClick:false,
form:{
startTime:"",
endTime:"",
dayType:1,
title:[]
}
}
,
time:{
status:false,
isClick:false,
form:{
sortWord:"",
sort:1,
title:[]
}
}
,
gantt:{
status:false,
isClick:false,
form:{
startTime:"",
endTime:"",
dayType:2,
sortWord:"",
sort:1,
title:[]
}
}
,
map:{
status:false,
isClick:false,
form:{
mapWord:"",
sortWord:"",
sort:1,
title:[]
}
},
card:{
status:false,
isClick:false,
form:{
sort:1,
sortWord:"",
imgWork:"",
imgWidth:50,
imgHeight:50,
imgBorderRadius:5,
imgPadding:2,
titleWork:"",
describe:"",
ranks:3,
title:[]
}
}
}
})
const lookPageIsShow = ref(false)
const versionTitle = ref<string>("") //
const versionId = ref<string>("") //
const formId = ref<string>("")
const addFormIsShow = ref(false)
time: {
status: false,
isClick: false,
form: {
sortWord: "",
sort: 1,
title: [],
},
},
gantt: {
status: false,
isClick: false,
form: {
startTime: "",
endTime: "",
dayType: 2,
sortWord: "",
sort: 1,
title: [],
},
},
map: {
status: false,
isClick: false,
form: {
mapWord: "",
sortWord: "",
sort: 1,
title: [],
},
},
card: {
status: false,
isClick: false,
form: {
sort: 1,
sortWord: "",
imgWork: "",
imgWidth: 50,
imgHeight: 50,
imgBorderRadius: 5,
imgPadding: 2,
titleWork: "",
describe: "",
ranks: 3,
title: [],
},
},
},
});
const lookPageIsShow = ref(false);
const versionTitle = ref<string>(""); //
const versionId = ref<string>(""); //
const formId = ref<string>("");
const addFormIsShow = ref(false);
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:32:18
@ 功能: 查看表单列表
*/
const lookFormList = (val:any) => {
emits('getRongQiAttr')
// console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", val)
const lookFormList = (val: any) => {
emits("getRongQiAttr");
// console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", val)
versionId.value = val.versionId
versionTitle.value = val.name
versionId.value = val.versionId;
versionTitle.value = val.name;
if(val.listjson != "" && val.listjson != null){
lookPageIsShow.value = true
state.formId = val.idStr
let stateData = string2json(val.listjson)
// console.log(val.listjson)
// console.log("---->",stateData)
//let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
if(stateData.tableData.columns&&stateData.tableData.columns.length>0){
for(let i = 0;i<stateData.tableData.columns.length;i++){
if(stateData.tableData.columns[i].config!=undefined && stateData.tableData.columns[i].control!=undefined){
// console.log(stateData.tableData.columns[i])
let paramx:string = ""+stateData.tableData.columns[i].control.optionsValue3Field
/*
if (val.listjson != "" && val.listjson != null) {
lookPageIsShow.value = true;
state.formId = val.idStr;
let stateData = string2json(val.listjson);
// console.log(val.listjson)
// console.log("---->",stateData)
//let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
if (stateData.tableData.columns && stateData.tableData.columns.length > 0) {
for (let i = 0; i < stateData.tableData.columns.length; i++) {
if (
stateData.tableData.columns[i].config != undefined &&
stateData.tableData.columns[i].control != undefined
) {
// console.log(stateData.tableData.columns[i])
let paramx: string =
"" + stateData.tableData.columns[i].control.optionsValue3Field;
/*
在这里请求后台获取字段
*/
console.log("addCardPage---298",paramx)
if(paramx && paramx != "" && paramx != null && paramx != "undefined"){
getFieldRecord(paramx).then(({ data }) => {
stateData.tableData.columns[i].options = data
if(stateData.searchData.length>0){
for(let j = 0;j<stateData.searchData.length;j++){
// console.log(stateData.searchData[j])
if(stateData.searchData[j].id==stateData.tableData.columns[i].id){
stateData.searchData[j].options = data
}
}
}
})
}
}
}
}
state.tableData = stateData.tableData
state.searchData = stateData.searchData
state.loading = stateData.loading
state.attrObj = stateData.attrObj
state.config = stateData.config
state.tagList = stateData.tagList
state.formList = stateData.formList
state.name = stateData.name
state.treeData = stateData.treeData
state.previewVisible = stateData.previewVisible
state.formFieldList = stateData.formFieldList
state.formApi = stateData.formApi
state.dict = stateData.dict
state.refreshTable = stateData.refreshTable
}else{
openTaskDrawer.value = true
}
console.log("addCardPage---298", paramx);
if (paramx && paramx != "" && paramx != null && paramx != "undefined") {
getFieldRecord(paramx).then(({ data }) => {
stateData.tableData.columns[i].options = data;
if (stateData.searchData.length > 0) {
for (let j = 0; j < stateData.searchData.length; j++) {
// console.log(stateData.searchData[j])
if (stateData.searchData[j].id == stateData.tableData.columns[i].id) {
stateData.searchData[j].options = data;
}
}
}
});
}
}
}
}
state.tableData = stateData.tableData;
state.searchData = stateData.searchData;
state.loading = stateData.loading;
state.attrObj = stateData.attrObj;
state.config = stateData.config;
state.tagList = stateData.tagList;
}
state.formList = stateData.formList;
state.name = stateData.name;
state.treeData = stateData.treeData;
state.previewVisible = stateData.previewVisible;
state.formFieldList = stateData.formFieldList;
state.formApi = stateData.formApi;
state.dict = stateData.dict;
state.refreshTable = stateData.refreshTable;
} else {
openTaskDrawer.value = true;
}
};
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:57:11
@ 功能: 编辑表单
*/
const editFormApp = (val:any) => {
emits('getRongQiAttr')
formId.value = val.id.toString()
addFormIsShow.value= true
// console.log("",val.id,"-",formId.value,"-",addFormIsShow.value)
}
const editFormApp = (val: any) => {
emits("getRongQiAttr");
formId.value = val.id.toString();
addFormIsShow.value = true;
// console.log("",val.id,"-",formId.value,"-",addFormIsShow.value)
};
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
addFormIsShow.value = false;
getFormAppList(props.searchQuery);
}
const refreshPage = (pageType: string) => {
addFormIsShow.value = false;
getFormAppList(props.searchQuery);
};
/**
@ 作者: 秦东
@ 时间: 2024-08-09 11:28:39
@ 功能: 翻页
*/
const handleCurrentChange = (val:any) =>{
// console.log("",val)
props.searchQuery.page = val
getFormAppList(props.searchQuery);
}
const handleCurrentChange = (val: any) => {
// console.log("",val)
props.searchQuery.page = val;
getFormAppList(props.searchQuery);
};
</script>
<template>
<div>
<div v-loading="loadingApp" class="content1 flex flex-wrap gap-4">
<el-card v-for="item in contList" :key="item.id" class="cardBox">
<template #header>
<el-dropdown v-if="item.classify==3">
<span class="el-dropdown-link">
<el-icon><MoreFilled /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="editForm(item)" >编辑</el-dropdown-item>
<el-dropdown-item @click="eidtStatus(item)" divided>删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown v-else>
<span class="el-dropdown-link">
<el-icon><MoreFilled /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="editFormApp(item)" >编辑</el-dropdown-item>
<el-dropdown-item @click="eidtStatus(item)" divided>删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<div v-if="item.classify==3" class="cardContBox" @click="openApp(item)">
<el-image
style="width: 100px; height: 100px"
:src="item.icon?item.icon:'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:initial-index="4"
fit="cover"
/>
<div class="cardInfo" :style="'width: calc(100% - 100px); height: 100px; overflow: hidden;' ">
<div class="title">{{item.name}}</div>
<div class="content">{{item.describe}}</div>
</div>
</div>
<div v-else class="cardContBox" @click="lookFormList(item)">
<el-image
style="width: 100px; height: 100px"
:src="item.icon?item.icon:'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:initial-index="4"
fit="cover"
/>
<div class="cardInfo" :style="'width: calc(100% - 100px); height: 100px; overflow: hidden;' ">
<div class="title">{{item.name}}</div>
<div class="content">{{item.describe}}</div>
</div>
</div>
</el-card>
</div>
<div class="pagination-box">
<el-pagination background v-if="pageTotal > 0" v-model:current-page="props.searchQuery.page"
v-model:page-size="props.searchQuery.pagesize"
:total="pageTotal" @current-change="handleCurrentChange" />
<div>
<div v-loading="loadingApp" class="content1 flex flex-wrap gap-4">
<el-card v-for="item in contList" :key="item.id" class="cardBox">
<template #header>
<el-dropdown v-if="item.classify == 3">
<span class="el-dropdown-link">
<el-icon><MoreFilled /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="editForm(item)">编辑</el-dropdown-item>
<el-dropdown-item @click="eidtStatus(item)" divided
>删除</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown v-else>
<span class="el-dropdown-link">
<el-icon><MoreFilled /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="editFormApp(item)">编辑</el-dropdown-item>
<el-dropdown-item @click="eidtStatus(item)" divided
>删除</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<div v-if="item.classify == 3" class="cardContBox" @click="openApp(item)">
<el-image
style="width: 100px; height: 100px"
:src="
item.icon
? item.icon
: 'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'
"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:initial-index="4"
fit="cover"
/>
<div
class="cardInfo"
:style="'width: calc(100% - 100px); height: 100px; overflow: hidden;'"
>
<div class="title">{{ item.name }}</div>
<div class="content">{{ item.describe }}</div>
</div>
</div>
<AppContainer v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" />
<AppContainerPage v-model:edit-is-open="editIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery" :group-key="props.appGroup" @refreshPage="getFormAppList" />
<el-drawer
v-model="lookPageIsShow"
title="列表预览"
direction="rtl"
:before-close="handlePreviewClose"
:size="props.drawerWith"
>
<ak-page-list
:data="state.tableData"
:search-data="state.searchData"
:config="state.config"
:form-id="state.formId"
:versionid="versionId"
:viewPage="state.view"
:versiontitle="versionTitle"
v-model:look-page-is-show="lookPageIsShow"
/>
</el-drawer>
<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
<div v-else class="cardContBox" @click="lookFormList(item)">
<el-image
style="width: 100px; height: 100px"
:src="
item.icon
? item.icon
: 'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'
"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:initial-index="4"
fit="cover"
/>
<div
class="cardInfo"
:style="'width: calc(100% - 100px); height: 100px; overflow: hidden;'"
>
<div class="title">{{ item.name }}</div>
<div class="content">{{ item.describe }}</div>
</div>
</div>
</el-card>
</div>
<div class="pagination-box">
<el-pagination
background
v-if="pageTotal > 0"
v-model:current-page="props.searchQuery.page"
v-model:page-size="props.searchQuery.pagesize"
:total="pageTotal"
@current-change="handleCurrentChange"
/>
</div>
<AppContainer
v-model:run-is-open="runIsOpen"
:pick-app-info="pickAppInfo"
:drawer-with="props.drawerWith"
:search-query="props.searchQuery"
@refreshPage="getFormAppList"
/>
<AppContainerPage
v-model:edit-is-open="editIsOpen"
:pick-app-info="pickAppInfo"
:drawer-with="props.drawerWith"
:search-query="props.searchQuery"
:group-key="props.appGroup"
@refreshPage="getFormAppList"
/>
<el-drawer
v-model="lookPageIsShow"
title="列表预览"
direction="rtl"
:before-close="handlePreviewClose"
:size="props.drawerWith"
>
<ak-page-list
:data="state.tableData"
:search-data="state.searchData"
:config="state.config"
:form-id="state.formId"
:versionid="versionId"
:viewPage="state.view"
:versiontitle="versionTitle"
v-model:look-page-is-show="lookPageIsShow"
/>
</el-drawer>
<LowCodeFormPage
v-if="addFormIsShow"
:drawer-with="props.drawerWith"
v-model:form-key="formId"
@refreshPage="refreshPage"
/>
<TableFlow v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" />
</div>
<TableFlow
v-model:isopen="openTaskDrawer"
:versionid="versionId"
:versiontitle="versionTitle"
:drawerwith="props.drawerWith"
@searchquery="getFormAppList"
/>
</div>
</template>
<style lang='scss' scoped>
.pagination-box{
display: flex;
justify-content: center;
margin-top: 15px;
<style lang="scss" scoped>
.pagination-box {
display: flex;
justify-content: center;
margin-top: 15px;
}
.el-row:last-child {
margin-bottom: 0;
@ -483,47 +533,46 @@ const handleCurrentChange = (val:any) =>{
background-color: #eeeeee;
}
.content1{
padding:1rem 1rem 0 1rem;
::v-deep .el-card__body{
padding:5px 10px 10px 10px;
}
::v-deep .el-card__header{
border-bottom: 0;
padding: 0;
height: 10px;
display:flex;
justify-content: right;
}
.el-dropdown-link{
margin-top: 4px;
margin-right: 10px;
cursor: pointer;
}
.content1 {
padding: 1rem 1rem 0 1rem;
::v-deep .el-card__body {
padding: 5px 10px 10px 10px;
}
::v-deep .el-card__header {
border-bottom: 0;
padding: 0;
height: 10px;
display: flex;
justify-content: right;
}
.el-dropdown-link {
margin-top: 4px;
margin-right: 10px;
cursor: pointer;
}
}
.cardBox{
width:306px;
.cardContBox{
display: flex;
width: 100%;
justify-content: flex-start;
cursor: pointer;
}
.cardInfo{
padding-left: 5px;
}
.title{
font-size:14px;
font-weight:bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content{
color: #909399;
overflow: hidden;
text-overflow: ellipsis;
}
.cardBox {
width: 306px;
.cardContBox {
display: flex;
width: 100%;
justify-content: flex-start;
cursor: pointer;
}
.cardInfo {
padding-left: 5px;
}
.title {
font-size: 14px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
color: #909399;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

1306
src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue

File diff suppressed because it is too large

623
src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue

@ -3,337 +3,392 @@
@ 时间: 2024-07-22 13:57:57
@ 备注: 编辑App
-->
<script lang='ts' setup>
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
import { gainAppEditPsge } from '@/api/DesignForm/requestapi'
<script lang="ts" setup>
import { appMenuTreeInfo, appSetInfo } from "@/api/date/type";
import { gainAppEditPsge } from "@/api/DesignForm/requestapi";
import SvgIcon from "@/components/SvgIcon/index.vue";
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue"
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue"
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue"
import OpenAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue"
import AppSetUp from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue"
import ReleaseApp from '@/views/sysworkflow/lowcodepage/appPage/releaseApp/index.vue'
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue";
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue";
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue";
import OpenAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue";
import AppSetUp from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue";
import ReleaseApp from "@/views/sysworkflow/lowcodepage/appPage/releaseApp/index.vue";
const props = defineProps({
drawerWith:{
type:Number,
default:0
},
editIsOpen:{
type: Boolean,
default: false,
},
pickAppInfo:{
type:Object,
default(){
return {}
}
},
searchQuery:{
type:Object,
default(){
return {}
}
},
groupKey:{
type:String,
default:""
}
drawerWith: {
type: Number,
default: 0,
},
editIsOpen: {
type: Boolean,
default: false,
},
pickAppInfo: {
type: Object,
default() {
return {};
},
},
searchQuery: {
type: Object,
default() {
return {};
},
},
groupKey: {
type: String,
default: "",
},
});
const emits = defineEmits(["update:editIsOpen","refreshPage"]);
const tabsActive = ref(1)
const menusTree = ref<appMenuTreeInfo[]>([]) //
const checkedMenu = ref<appMenuTreeInfo>("")
const appPageKey = ref<string>("") //AppId
const isNew = ref(false)
const saveAppFormIsShow = ref(false)
const menuParentKey = ref<string>("")
const menuGroupShow = ref(false) //
const emits = defineEmits(["update:editIsOpen", "refreshPage"]);
const tabsActive = ref(1);
const menusTree = ref<appMenuTreeInfo[]>([]); //
const checkedMenu = ref<appMenuTreeInfo>("");
const appPageKey = ref<string>(""); //AppId
const isNew = ref(false);
const saveAppFormIsShow = ref(false);
const menuParentKey = ref<string>("");
const menuGroupShow = ref(false); //
/**
@ 作者: 秦东
@ 时间: 2024-07-22 11:40:06
@ 功能: 应用进出配置
*/
const appCont = reactive<appSetInfo>({
appKey:"1",
appName:"未知应用",
appSvg:"",
state:1,
uuid:"1",
describe:""
})
appKey: "1",
appName: "未知应用",
appSvg: "",
state: 1,
uuid: "1",
describe: "",
});
/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:23:31
@ 功能: 获取app信息
*/
const gainAppContent = () =>{
let sendInfo = {
id:props.pickAppInfo.signCodeStr
}
gainAppEditPsge(sendInfo)
.then((data)=>{
// console.log("app---",data)
menusTree.value = data.data.menuTree
appCont.appKey = data.data.appKey;
appCont.appName = data.data.appName;
appCont.appSvg = data.data.appSvg;
appCont.state = data.data.state;
appCont.uuid = data.data.uuid;
})
}
const gainAppContent = () => {
let sendInfo = {
id: props.pickAppInfo.signCodeStr,
};
gainAppEditPsge(sendInfo).then((data) => {
// console.log("app---",data)
menusTree.value = data.data.menuTree;
appCont.appKey = data.data.appKey;
appCont.appName = data.data.appName;
appCont.appSvg = data.data.appSvg;
appCont.state = data.data.state;
appCont.uuid = data.data.uuid;
});
};
watch(()=>props.editIsOpen,(val:boolean)=>{
if(val){
gainAppContent()
}
})
const closeAppDraw = () =>{
emits("update:editIsOpen",false)
emits("refreshPage",props.searchQuery)
tabsActive.value = 1
checkedMenu.value = ""
appPageKey.value = ""
checkedMenu.appkey=""
isNew.value = false
}
watch(
() => props.editIsOpen,
(val: boolean) => {
if (val) {
gainAppContent();
}
}
);
const closeAppDraw = () => {
emits("update:editIsOpen", false);
emits("refreshPage", props.searchQuery);
tabsActive.value = 1;
checkedMenu.value = "";
appPageKey.value = "";
checkedMenu.appkey = "";
isNew.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-18 09:00:00
@ 功能: 操作表单页面
*/
const openAppPageForm = (val:appMenuTreeInfo) => {
checkedMenu.value = val
console.log("操作表单页面",val)
}
const openAppPageForm = (val: appMenuTreeInfo) => {
checkedMenu.value = val;
console.log("操作表单页面", val);
};
/**
@ 作者: 秦东
@ 时间: 2024-05-20 13:27:37
@ 功能: 编辑app页面
*/
const editAppInfo = (id:string) => {
appPageKey.value = id
saveAppFormIsShow.value = true
isNew.value = false
}
const editAppInfo = (id: string) => {
appPageKey.value = id;
saveAppFormIsShow.value = true;
isNew.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 15:47:12
@ 功能: 选择选项
*/
const handleClick = () =>{}
const handleClick = () => {};
/**
@ 作者: 秦东
@ 时间: 2024-07-23 14:49:15
@ 功能: 创建页面
*/
const addAppPageForm = (key?:string) => {
saveAppFormIsShow.value = true
isNew.value = true
// console.log("-->")
}
const addAppPageForm = (key?: string) => {
saveAppFormIsShow.value = true;
isNew.value = true;
// console.log("-->")
};
/**
@ 作者: 秦东
@ 时间: 2024-04-23 16:57:39
@ 功能: 添加菜单分组
*/
const addMenu = (key?:string) => {
if(key){
menuParentKey.value = key;
}else{
menuParentKey.value = "";
}
menuGroupShow.value = true;
}
const openAppPageInit = ref(null)
const addMenu = (key?: string) => {
if (key) {
menuParentKey.value = key;
} else {
menuParentKey.value = "";
}
menuGroupShow.value = true;
};
const openAppPageInit = ref(null);
const updataPageInit = () => {
openAppPageInit.value.gainAppFormPageInit()
}
openAppPageInit.value.gainAppFormPageInit();
};
</script>
<template>
<el-drawer v-model="props.editIsOpen" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
<div class="common-layout">
<el-container>
<el-header class="headerEditBox">
<div>
<el-space wrap>
<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
<el-text>{{ appCont.appName }}</el-text>
<el-tag v-if="appCont.state==1" type="success">已启用</el-tag>
<el-tag v-else type="danger">已禁用</el-tag>
</el-space>
</div>
<div>
<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain">
<el-tab-pane label="① 页面管理" :name="1">
</el-tab-pane>
<el-tab-pane label="② 集成&自动化" :name="2">
</el-tab-pane>
<el-tab-pane label="③ 应用设置" :name="3">
</el-tab-pane>
<el-tab-pane label="④ 应用发布" :name="4">
</el-tab-pane>
</el-tabs>
</div>
<div>
<el-button-group>
<el-button plain size="small" class="fa fa-paper-plane-o" @click="accessRunApp">访问</el-button>
<el-button type="danger" size="small" class="fa fa-times" @click="closeAppDraw">关闭</el-button>
</el-button-group>
</div>
</el-header>
<el-container v-show="tabsActive==1">
<el-aside class="asideBox">
<el-row>
<el-col :span="24" class="asideBoxSearch">
<el-input
v-model="input2"
style="width: 180px"
placeholder="搜索"
:suffix-icon="Search"
/>
<el-dropdown>
<el-button type="primary" class="fa fa-plus" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="addAppPageForm">
<el-row>
<el-col :span="24">
<el-space wrap>
<svg-icon style="color: #eebe77;" prefix="icon" icon-class="liuChengBiaoDan" />
新建页面
</el-space>
</el-col>
<el-col :span="24" style="padding-left:20px; font-size:12px;">
数据收集事件记录<br>任务协同业务审批
</el-col>
</el-row>
</el-dropdown-item>
<el-dropdown-item divided @click="addMenu">
<el-row>
<el-col :span="24">
<el-space wrap>
<svg-icon style="color: #337ecc;" prefix="icon" icon-class="fenZhu" />
新建分组
</el-space>
</el-col>
<el-col :span="24" style="padding-left:20px; font-size:12px;">
应用项目管理
</el-col>
</el-row>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-scrollbar class="scroBox">
<el-drawer
v-model="props.editIsOpen"
:with-header="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
:size="props.drawerWith"
>
<div class="common-layout">
<el-container>
<el-header class="headerEditBox">
<div>
<el-space wrap>
<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
<el-text>{{ appCont.appName }}</el-text>
<el-tag v-if="appCont.state == 1" type="success">已启用</el-tag>
<el-tag v-else type="danger">已禁用</el-tag>
</el-space>
</div>
<div>
<el-tabs
v-model="tabsActive"
@tab-click="handleClick"
:stretch="true"
class="tabsMain"
>
<el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
<el-tab-pane label="② 集成&自动化" :name="2"> </el-tab-pane>
<el-tab-pane label="③ 应用设置" :name="3"> </el-tab-pane>
<el-tab-pane label="④ 应用发布" :name="4"> </el-tab-pane>
</el-tabs>
</div>
<div>
<el-button-group>
<el-button
plain
size="small"
class="fa fa-paper-plane-o"
@click="accessRunApp"
>访问</el-button
>
<el-button
type="danger"
size="small"
class="fa fa-times"
@click="closeAppDraw"
>关闭</el-button
>
</el-button-group>
</div>
</el-header>
<el-container v-show="tabsActive == 1">
<el-aside class="asideBox">
<el-row>
<el-col :span="24" class="asideBoxSearch">
<el-input
v-model="input2"
style="width: 180px"
placeholder="搜索"
:suffix-icon="Search"
/>
<el-dropdown>
<el-button type="primary" class="fa fa-plus" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="addAppPageForm">
<el-row>
<el-col :span="24">
<el-space wrap>
<svg-icon
style="color: #eebe77"
prefix="icon"
icon-class="liuChengBiaoDan"
/>
新建页面
</el-space>
</el-col>
<el-col :span="24" style="padding-left: 20px; font-size: 12px">
数据收集事件记录<br />任务协同业务审批
</el-col>
</el-row>
</el-dropdown-item>
<el-dropdown-item divided @click="addMenu">
<el-row>
<el-col :span="24">
<el-space wrap>
<svg-icon
style="color: #337ecc"
prefix="icon"
icon-class="fenZhu"
/>
新建分组
</el-space>
</el-col>
<el-col :span="24" style="padding-left: 20px; font-size: 12px">
应用项目管理
</el-col>
</el-row>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-scrollbar class="scroBox">
<AppMenus
:form-Key="appCont.uuid"
v-model:menus-tree="menusTree"
v-model:app-page-key="appPageKey"
:group-key="props.groupKey"
:app-cont="appCont"
:drawer-with="props.drawerWith"
@openAppPageForm="openAppPageForm"
/>
<AppMenus :form-Key="appCont.uuid" v-model:menus-tree="menusTree" v-model:app-page-key="appPageKey" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" @openAppPageForm="openAppPageForm" />
<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :is-new="isNew" :drawer-with="props.drawerWith" :form-Key="appCont.uuid" :app-cont="appCont" :group-key="props.groupKey" :menu-id="appCont.uuid" v-model:app-page-key="appPageKey" @gainSunAppContent="gainAppContent" @updateInit="updataPageInit" />
</el-scrollbar>
</el-aside>
<el-main class="mainBox">
<el-scrollbar class="scroBox">
<OpenAppFormPage ref="openAppPageInit" :form-Key="checkedMenu.appkey" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" :menus-info="checkedMenu" @editAppInfo="editAppInfo" />
</el-scrollbar>
</el-main>
</el-container>
<el-container v-if="tabsActive==2">
集成与自动化
</el-container>
<el-container v-if="tabsActive==3">
<AppSetUp :app-cont="appCont" :group-key="props.groupKey" />
</el-container>
<el-container v-if="tabsActive==4">
<ReleaseApp :app-cont="appCont" :group-key="props.groupKey" />
</el-container>
</el-container>
</div>
<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="appCont" @updateMenu="gainAppContent" />
</el-drawer>
<CreateAppFormPage
v-if="saveAppFormIsShow"
v-model:is-show="saveAppFormIsShow"
:is-new="isNew"
:drawer-with="props.drawerWith"
:form-Key="appCont.uuid"
:app-cont="appCont"
:group-key="props.groupKey"
:menu-id="appCont.uuid"
v-model:app-page-key="appPageKey"
@gainSunAppContent="gainAppContent"
@updateInit="updataPageInit"
/>
</el-scrollbar>
</el-aside>
<el-main class="mainBox">
<el-scrollbar class="scroBox">
<OpenAppFormPage
ref="openAppPageInit"
:form-Key="checkedMenu.appkey"
:group-key="props.groupKey"
:app-cont="appCont"
:drawer-with="props.drawerWith"
:menus-info="checkedMenu"
@editAppInfo="editAppInfo"
/>
</el-scrollbar>
</el-main>
</el-container>
<el-container v-if="tabsActive == 2"> 集成与自动化 </el-container>
<el-container v-if="tabsActive == 3">
<AppSetUp :app-cont="appCont" :group-key="props.groupKey" />
</el-container>
<el-container v-if="tabsActive == 4">
<ReleaseApp :app-cont="appCont" :group-key="props.groupKey" />
</el-container>
</el-container>
</div>
<AppMenuGroup
v-model:is-show="menuGroupShow"
:menu-parent-key="menuParentKey"
:app-cont="appCont"
@updateMenu="gainAppContent"
/>
</el-drawer>
</template>
<style lang='scss' scoped>
.common-layout{
.el-header{
padding-left:10px;
padding-right:10px;
}
.headerEditBox{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F1F2F3;
:deep(.el-tabs){
width: 100%;
height: 40px;
}
:deep(.el-tabs__nav) {
height: 40px;
}
:deep(.el-tabs__item) {
margin-top: 0px;
}
:deep(.el-tabs__nav-prev) {
margin-top: 16px;
}
:deep(.el-tabs__nav-next) {
margin-top: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
position: static !important;
}
:deep(.el-tabs__header){
margin:0 0 1px 0;
}
:deep .el-card__body{
padding: 0px 0;
}
}
.asideBox{
width:250px;
border-right: 1px solid #F1F2F3;
height: calc(100vh - 40px);
.asideBoxSearch{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
}
.appMenuTitle{
width: 100%;
padding-right: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.svgBox{
display: none;
}
}
.appMenuTitle:hover .svgBox{
display: block;
}
.scroBox{
height: calc(100vh - 92px);
}
}
.el-main {
padding: 0px;
}
.mainBox{
background-color: #F1F2F3;
padding:0px;
.scroBox{
height: calc(100vh - 40px);
}
}
<style lang="scss" scoped>
.common-layout {
.el-header {
padding-left: 10px;
padding-right: 10px;
}
.headerEditBox {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f1f2f3;
:deep(.el-tabs) {
width: 100%;
height: 40px;
}
:deep(.el-tabs__nav) {
height: 40px;
}
:deep(.el-tabs__item) {
margin-top: 0px;
}
:deep(.el-tabs__nav-prev) {
margin-top: 16px;
}
:deep(.el-tabs__nav-next) {
margin-top: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
position: static !important;
}
:deep(.el-tabs__header) {
margin: 0 0 1px 0;
}
:deep .el-card__body {
padding: 0px 0;
}
}
.asideBox {
width: 250px;
border-right: 1px solid #f1f2f3;
height: calc(100vh - 40px);
.asideBoxSearch {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
}
.appMenuTitle {
width: 100%;
padding-right: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.svgBox {
display: none;
}
}
.appMenuTitle:hover .svgBox {
display: block;
}
.scroBox {
height: calc(100vh - 92px);
}
}
.el-main {
padding: 0px;
}
.mainBox {
background-color: #f1f2f3;
padding: 0px;
.scroBox {
height: calc(100vh - 40px);
}
}
}
</style>

4
src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue

@ -204,7 +204,7 @@ const initLoadData = () => {
versionTitle.value = data.data.appForm.name;
if (data.data.pageList) {
let stateData = string2json(data.data.appForm.listjson);
// console.log("",stateData)
console.log("接邂逅的数", stateData);
let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson);
if (stateData.tableData.columns && stateData.tableData.columns.length > 0) {
for (let i = 0; i < stateData.tableData.columns.length; i++) {
@ -325,7 +325,7 @@ watch(
);
function optionsValue3Get3(data: any, fieldName: string) {
console.log("runAppForm","optionsValue3Get3")
console.log("runAppForm", "optionsValue3Get3");
for (let i = 0; i < stateForm.formData.list.length; i++) {
if (stateForm.formData.list[i].name == fieldName) {
stateForm.formData.list[i].options = [];

348
src/widget/number/index.vue

@ -3,204 +3,208 @@
@ 时间: 2023-12-05 09:40:32
@ 备注: 链接地址组件
-->
<script lang='ts' setup>
<script lang="ts" setup>
import {
constControlChange,
constFormProps,
constGetControlByName
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { useRoute } from 'vue-router'
import { FormItem, FormList } from '@/api/DesignForm/types'
import { gainNumber } from '@/api/DesignForm/requestapi'
import Tooltips from '@/components/DesignForm/tooltip.vue'
constControlChange,
constFormProps,
constGetControlByName,
} from "@/api/DesignForm/utils";
import validate from "@/api/DesignForm/validate";
import { useRoute } from "vue-router";
import { FormItem, FormList } from "@/api/DesignForm/types";
import { gainNumber } from "@/api/DesignForm/requestapi";
import Tooltips from "@/components/DesignForm/tooltip.vue";
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
numrun?: number
modelValue?: any //
tProp?: string // form-itemprop
}>(),
{}
)
defineProps<{
data: FormList;
tablekey: any;
numrun?: number;
modelValue?: any; //
tProp?: string; // form-itemprop
}>(),
{}
);
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
const route = useRoute()
const formProps = inject(constFormProps, {}) as any
(e: "update:modelValue", numVal: any): void;
}>();
const route = useRoute();
const formProps = inject(constFormProps, {}) as any;
const type = computed(() => {
return formProps.value.type
})
return formProps.value.type;
});
const config = computed(() => {
return props.data.config || {}
})
return props.data.config || {};
});
const control = computed(() => {
return props.data.control;
// return props.data
});
const options = ref(props.data.options);
const changeEvent = inject(constControlChange, "") as any;
return props.data.control
// return props.data
})
const options = ref(props.data.options)
const changeEvent = inject(constControlChange, '') as any
watch(() => props.tablekey,() => {
// console.log("1---",props.tablekey)
})
const editDisabled = ref(false); //
watch(
() => props.tablekey,
() => {
// console.log("1---",props.tablekey)
}
);
const editDisabled = ref(false); //
const value = computed({
get() {
if (props.tProp) {
//
return props.modelValue
} else {
return formProps.value.model[props.data.name]
}
},
set(newVal: any) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
get() {
if (props.tProp) {
//
return props.modelValue;
} else {
return formProps.value.model[props.data.name];
}
})
},
set(newVal: any) {
if (props.tProp) {
emits("update:modelValue", newVal);
}
updateModel(newVal);
},
});
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
let controlAttribute = "";
if (props.data.control) {
if (props.data.control.type) {
controlAttribute = props.data.control.type;
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute,
});
};
onMounted(() => {
// console.log("---",props.numrun,props.data,props.data.control.config)
if(props.numrun == 2){
getNumber()
}
})
console.log("编码组件---》", props.numrun, props.data, props.data.control.config);
// if (props.numrun == 2) {
// getNumber();
// }
if (props.data.config && props.data.config.automatic) {
getNumber();
editDisabled.value = true;
} else {
editDisabled.value = false;
}
});
//
const getNumber = () => {
let sendData = {
table:props.tablekey,
automatic:props.data.config.automatic,
customRules:props.data.config.customRules
}
editDisabled.value = props.data.config.automatic
gainNumber(sendData)
.then((data:any) =>{
// console.log("2---",data,sendData)
value.value = data.data
})
}
let sendData = {
table: props.tablekey,
automatic: props.data.config.automatic,
customRules: props.data.config.customRules,
};
editDisabled.value = props.data.config.automatic;
gainNumber(sendData).then((data: any) => {
// console.log("2---",data,sendData)
value.value = data.data;
});
};
// toRefs
const getControlByName = inject(constGetControlByName) as any
const getControlByName = inject(constGetControlByName) as any;
const sourceFunKey = computed(() => {
const iReg = new RegExp('(?<=\\${)(.*?)(?=})', 'g')
//const iReg = new RegExp('\\${.*?}', 'g') // =>${name}
const apiUrl = config.value.optionsFun
const replace = apiUrl?.match(iReg)
return replace && replace[0]
})
const iReg = new RegExp("(?<=\\${)(.*?)(?=})", "g");
//const iReg = new RegExp('\\${.*?}', 'g') // =>${name}
const apiUrl = config.value.optionsFun;
const replace = apiUrl?.match(iReg);
return replace && replace[0];
});
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? ':' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
const showColon = formProps.value.showColon ? ":" : "";
if (ele) {
return ele.showLabel ? "" : ele.label + showColon;
} else {
return "";
}
};
// item
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
let temp;
const itemR: any = props.data.item?.rules || [];
const customR = formatCustomRules();
// undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR];
}
return temp;
});
// customRulesrules
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
const rulesReg: any = {};
validate &&
validate.forEach((item) => {
rulesReg[item.type] = item.regExp;
});
// 使provide
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return //
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
//
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
//
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// push
let message: any = { message: item.message }
if (!item.message) {
// 使validatormessage使 callback(new Error('x'));
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
// 使provide
const temp: any = [];
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== "methods") {
return; //
}
let obj = {};
if (item.type === "required") {
obj = { required: true };
} else if (item.type === "rules") {
//
obj = { pattern: item.rules };
} else if (item.type === "methods") {
//
const methods: any = item.methods;
if (methods) {
obj = { validator: inject(methods, {}) };
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] };
}
// push
let message: any = { message: item.message };
if (!item.message) {
// 使validatormessage使 callback(new Error('x'));
message = {};
}
temp.push(
Object.assign(
{
trigger: item.trigger || "blur",
},
obj,
message
)
);
});
return temp;
};
</script>
<template>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<template v-if="config.help" #label >
{{ getLabel(data.item) }}
<Tooltips :content="config.help" />
</template>
<div v-if="type === 4" class="form-value" v-html="value"></div>
<template v-else>
<el-input v-model="value" :disabled="editDisabled" placeholder="请输入编码">
<template #prefix >NO.</template>
</el-input>
</template>
</el-form-item>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<template v-if="config.help" #label>
{{ getLabel(data.item) }}
<Tooltips :content="config.help" />
</template>
<div v-if="type === 4" class="form-value" v-html="value"></div>
<template v-else>
<el-input v-model="value" :disabled="editDisabled" placeholder="请输入编码">
<template #prefix>NO.</template>
</el-input>
</template>
</el-form-item>
</template>
<style lang='scss' scoped>
</style>
<style lang="scss" scoped></style>

Loading…
Cancel
Save