Browse Source

修复紧急BUG完成

qin_v9
hreenshan112 12 months ago
parent
commit
3ec5e1f0cd
  1. 563
      src/components/DesignForm/aceDrawer.vue
  2. 61
      src/components/DesignForm/app/index.vue
  3. 9253
      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. 1698
      src/components/DesignForm/public/form/formGroup.vue
  7. 2326
      src/components/DesignForm/public/form/formItem.vue
  8. 2549
      src/components/DesignForm/tableListPage/index.vue
  9. 149
      src/components/IconSelect/appMenuSvgPage.vue
  10. 514
      src/views/sysworkflow/codepage/index.vue
  11. 905
      src/views/sysworkflow/lowcodepage/appCardPage.vue
  12. 1294
      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. 350
      src/widget/number/index.vue

563
src/components/DesignForm/aceDrawer.vue

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

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

@ -113,6 +113,7 @@ const emits = defineEmits<{
(e: "selectionChange", row: any): void; (e: "selectionChange", row: any): void;
(e: "btnClick", btn: any, row?: any): void; // (e: "btnClick", btn: any, row?: any): void; //
}>(); }>();
const loadData = ref(false);
const operState = ref<number>(1); // 1234;5: const operState = ref<number>(1); // 1234;5:
const idList = ref<string[]>([]); const idList = ref<string[]>([]);
const designStore = useDesignFormStore(); const designStore = useDesignFormStore();
@ -271,7 +272,7 @@ const selectionChange = (row: any) => {
@ 功能: 获取表格头内容 @ 功能: 获取表格头内容
*/ */
const columnsFilter = computed(() => { const columnsFilter = computed(() => {
// console.log("props.data",props.data) console.log("props.data判断是否有标题", props.data);
if (!state.columnsCheck?.length) { if (!state.columnsCheck?.length) {
// console.log("props.data",props.data) // console.log("props.data",props.data)
return props.data.columns; return props.data.columns;
@ -631,6 +632,60 @@ const judjeRadio = (val: any, options: any[]) => {
} }
return val; 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 @ 时间: 2024-04-02 14:49:40
@ -1091,6 +1146,7 @@ const transformOption = (val: string | number, type?: string) => {
:data="tableDataList" :data="tableDataList"
@selection-change="selectionChange" @selection-change="selectionChange"
table-layout="fixed" table-layout="fixed"
v-loading="state.loading"
> >
<template v-for="item in columnsFilter" :key="item.id || item.label"> <template v-for="item in columnsFilter" :key="item.id || item.label">
<el-table-column <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]}}{{item}} -->
{{ scope.row[scope.column.property] }} {{ scope.row[scope.column.property] }}
</template> </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"> <template v-if="item.fieldClass == 'radio'" #default="scope">
<!-- {{scope.row[scope.column.property]}}{{item}} --> <!-- {{scope.row[scope.column.property]}}{{item}} -->
{{ judjeRadio(scope.row[scope.column.property], item.options) }} {{ judjeRadio(scope.row[scope.column.property], item.options) }}

9253
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 @ 时间: 2024-09-29 13:46:55
@ 备注: 级联器 @ 备注: 级联器
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { stringToObj } from "@/utils/DesignForm/form";
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;
options?: Object options?: 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, stringToObj(props.modelValue));
return props.modelValue return stringToObj(props.modelValue);
}, },
set: (newVal: any) => { set: (newVal: any) => {
emits('update:modelValue', newVal) emits("update:modelValue", newVal);
return newVal return newVal;
}, },
}); });
const handleChange = () => { const handleChange = () => {};
const cascaderProps = {
} label: "label",
value: "value",
children: "children",
};
</script> </script>
<template> <template>
<el-cascader <el-cascader
v-model="value" v-model="value"
:options="props.options" :options="props.options"
@change="handleChange" clearable
/> :props="cascaderProps"
@change="handleChange"
/>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped></style>
</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']){
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'] != ""){ if(ele['widthMax'] && ele['widthMax'] != ""){
styleObject['max-width'] = ele['widthMax'].toString()+"px"; styleObject['max-width'] = ele['widthMax'].toString()+"px";

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

File diff suppressed because it is too large

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

File diff suppressed because it is too large

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

File diff suppressed because it is too large

149
src/components/IconSelect/appMenuSvgPage.vue

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

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

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

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

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

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

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

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

350
src/widget/number/index.vue

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

Loading…
Cancel
Save