Browse Source

手机端页面

lwx_v11^2
hreenshan112 1 year ago
parent
commit
e51fb73178
  1. 9268
      src/components/DesignForm/formControlPropertiNew.vue
  2. 459
      src/views/hr/userBox.vue
  3. 450
      src/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue
  4. 696
      src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue

9268
src/components/DesignForm/formControlPropertiNew.vue

File diff suppressed because it is too large

459
src/views/hr/userBox.vue

@ -3,59 +3,59 @@
@ 时间: 2024-05-23 13:50:03 @ 时间: 2024-05-23 13:50:03
@ 备注: 行政组织及角色选择器 @ 备注: 行政组织及角色选择器
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { Search,ArrowRight } from '@element-plus/icons-vue' // import { Search, ArrowRight } from "@element-plus/icons-vue"; //
import { userOrgRole,crumb } from '@/api/hr/search/types' import { userOrgRole, crumb } from "@/api/hr/search/types";
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png') const circleUrl = ref(
"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
// //
import OrgPage from '@/views/hr/orgUserRole/org.vue' import OrgPage from "@/views/hr/orgUserRole/org.vue";
import OrgRolePage from '@/views/hr/orgUserRole/orgrole.vue' import OrgRolePage from "@/views/hr/orgUserRole/orgrole.vue";
import RolePageIng from '@/views/hr/orgUserRole/rolePage.vue' import RolePageIng from "@/views/hr/orgUserRole/rolePage.vue";
const props = defineProps({ const props = defineProps({
isOpen:{ isOpen: {
type:Boolean, type: Boolean,
default:false default: false,
}, },
types:{ types: {
type:Number, type: Number,
default:1 default: 1,
}, },
orgTrue:{ orgTrue: {
type:Number, type: Number,
default:1 default: 1,
}, },
pickList:{ pickList: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} },
} },
}); });
const taotleLog = ref(0) const taotleLog = ref(0);
const pickListAry = ref<userOrgRole[]>([]) // const pickListAry = ref<userOrgRole[]>([]); //
const emits = defineEmits(["update:isOpen","update:types","pickInfo"]); const emits = defineEmits(["update:isOpen", "update:types", "pickInfo"]);
const searchQuery = ref<any>("") const searchQuery = ref<any>("");
const orgUs = ref(null) const orgUs = ref(null);
const orgUsRole = ref(null) const orgUsRole = ref(null);
const rolePage = ref(null) const rolePage = ref(null);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-23 13:56:28 @ 时间: 2024-05-23 13:56:28
@ 功能: 对话框状态 @ 功能: 对话框状态
*/ */
const isShow = computed({ const isShow = computed({
get() { get() {
// console.log("",props.isOpen); // console.log("",props.isOpen);
return props.isOpen return props.isOpen;
}, },
set(val: boolean) { set(val: boolean) {
// console.log("",props.isOpen); // console.log("",props.isOpen);
emits('update:isOpen', val) emits("update:isOpen", val);
} },
}); });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ -63,219 +63,248 @@ const isShow = computed({
@ 功能: 人员选择范围 @ 功能: 人员选择范围
*/ */
const userTypes = computed({ const userTypes = computed({
get() { get() {
// console.log("",props.isOpen); // console.log("",props.isOpen);
return props.types return props.types;
}, },
set(val: boolean) { set(val: boolean) {
// console.log("",props.isOpen); // console.log("",props.isOpen);
emits('update:types', val) emits("update:types", val);
} },
}) });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-23 14:15:10 @ 时间: 2024-05-23 14:15:10
@ 功能: 关闭弹出对话框 @ 功能: 关闭弹出对话框
*/ */
const handleClose = () => { const handleClose = () => {
emits('update:isOpen', false) emits("update:isOpen", false);
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-24 08:21:58 @ 时间: 2024-05-24 08:21:58
@ 功能: 根据条件搜索数据 @ 功能: 根据条件搜索数据
*/ */
const searchData = () => { const searchData = () => {
// console.log("userTypes----->",userTypes); // console.log("userTypes----->",userTypes);
if(userTypes.value == 1){ if (userTypes.value == 1) {
orgUs.value.searchOrgUs(searchQuery.value) orgUs.value.searchOrgUs(searchQuery.value);
}else if(userTypes.value == 2){ } else if (userTypes.value == 2) {
orgUsRole.value.searchOrgRolePeople(searchQuery.value) orgUsRole.value.searchOrgRolePeople(searchQuery.value);
}else{ } else {
rolePage.value.searchOrgRolePeople(searchQuery.value) rolePage.value.searchOrgRolePeople(searchQuery.value);
} }
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-24 15:29:20 @ 时间: 2024-05-24 15:29:20
@ 功能: 更新数据 @ 功能: 更新数据
*/ */
const updataPickLog = (val:userOrgRole[]) => { const updataPickLog = (val: userOrgRole[]) => {
pickListAry.value = val;
pickListAry.value = val taotleLog.value = val.length;
taotleLog.value = val.length };
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-24 15:36:07 @ 时间: 2024-05-24 15:36:07
@ 功能: 删除选中项目 @ 功能: 删除选中项目
*/ */
const delPickCont = (val:userOrgRole) => { const delPickCont = (val: userOrgRole) => {
pickListAry.value.forEach((item:userOrgRole,index:number)=>{ pickListAry.value.forEach((item: userOrgRole, index: number) => {
if(item.id == val.id){ if (item.id == val.id) {
pickListAry.value.splice(index,1) pickListAry.value.splice(index, 1);
} }
}) });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-24 15:52:58 @ 时间: 2024-05-24 15:52:58
@ 功能: 清空选项 @ 功能: 清空选项
*/ */
const clearVal = () => { const clearVal = () => {
pickListAry.value = []; pickListAry.value = [];
taotleLog.value = 0 taotleLog.value = 0;
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-24 15:59:11 @ 时间: 2024-05-24 15:59:11
@ 功能: 提交数据 @ 功能: 提交数据
*/ */
const submitSend = () => { const submitSend = () => {
emits('pickInfo', pickListAry,props.types) emits("pickInfo", pickListAry, props.types);
};
} watch(
watch(()=>props.isOpen,(val:boolean)=>{ () => props.isOpen,
if(!val){ (val: boolean) => {
clearVal() if (!val) {
}else{ clearVal();
if(props.pickList.length > 0){ } else {
pickListAry.value = props.pickList if (props.pickList.length > 0) {
taotleLog.value = props.pickList.length pickListAry.value = props.pickList;
} taotleLog.value = props.pickList.length;
} }
// console.log("",val); }
}) // console.log("",val);
onMounted(()=>{ }
taotleLog.value = props.pickList.length );
}) onMounted(() => {
taotleLog.value = props.pickList.length;
});
</script> </script>
<template> <template>
<el-dialog v-model="isShow" title="选择成员" width="700" draggable :before-close="handleClose"> <el-dialog
<el-row class="allBianLink"> v-model="isShow"
<el-col :span="12"> title="选择成员"
<el-input width="700"
v-model="searchQuery" draggable
:prefix-icon="Search" :before-close="handleClose"
size="large" >
class="inputDeep" <el-row class="allBianLink">
@input="searchData" <el-col :span="12">
/> <el-input
<OrgPage ref="orgUs" v-if="userTypes==1" :org-true="orgTrue" :pick-list="pickListAry" @updataPickLog="updataPickLog" /> v-model="searchQuery"
<OrgRolePage ref="orgUsRole" v-if="userTypes==2" :org-true="orgTrue" :pick-list="pickListAry" @updataPickLog="updataPickLog" /> :prefix-icon="Search"
<RolePageIng ref="rolePage" v-if="userTypes==3" :org-true="orgTrue" :pick-list="pickListAry" @updataPickLog="updataPickLog" /> size="large"
</el-col> class="inputDeep"
@input="searchData"
<el-col :span="12" class="leftLink"> />
<el-row> <OrgPage
<el-col :span="24" class="pickTitle"> ref="orgUs"
<el-text>已选{{ taotleLog }}</el-text> v-if="userTypes == 1"
<el-button type="danger" link @click="clearVal">清空</el-button> :org-true="orgTrue"
</el-col> :pick-list="pickListAry"
<el-col :span="24"> @updataPickLog="updataPickLog"
<el-scrollbar class="pickBox"> />
<ul> <OrgRolePage
<li v-for="item in pickListAry" :key="item.id"> ref="orgUsRole"
<el-space wrap> v-if="userTypes == 2"
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> :org-true="orgTrue"
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> :pick-list="pickListAry"
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> @updataPickLog="updataPickLog"
<el-text>{{ item.title }}</el-text> />
</el-space> <RolePageIng
<div > ref="rolePage"
<svg-icon icon-class="cwkx" @click="delPickCont(item)" /> v-if="userTypes == 3"
</div> :org-true="orgTrue"
</li> :pick-list="pickListAry"
</ul> @updataPickLog="updataPickLog"
/>
</el-col>
</el-scrollbar> <el-col :span="12" class="leftLink">
</el-col> <el-row>
</el-row> <el-col :span="24" class="pickTitle">
</el-col> <el-text>已选{{ taotleLog }}</el-text>
</el-row> <el-button type="danger" link @click="clearVal">清空</el-button>
<template #footer> </el-col>
<div class="dialog-footer"> <el-col :span="24">
<el-button @click="handleClose">取消</el-button> <el-scrollbar class="pickBox">
<el-button type="primary" @click="submitSend">确定</el-button> <ul>
</div> <li v-for="item in pickListAry" :key="item.id">
</template> <el-space wrap>
</el-dialog> <svg-icon v-if="item.types == 2" icon-class="fenZhu" :size="20" />
<svg-icon v-if="item.types == 3" icon-class="tasp" :size="20" />
<el-avatar
v-if="item.types == 1"
shape="square"
:size="20"
:src="circleUrl"
/>
<el-text>{{ item.title }}</el-text>
</el-space>
<div>
<svg-icon icon-class="cwkx" @click="delPickCont(item)" />
</div>
</li>
</ul>
</el-scrollbar>
</el-col>
</el-row>
</el-col>
</el-row>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="submitSend">确定</el-button>
</div>
</template>
</el-dialog>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.allBianLink{ .allBianLink {
border: 1px solid #E6E8EB; border: 1px solid #e6e8eb;
.leftLink{ .leftLink {
border-left: 1px solid #E6E8EB; border-left: 1px solid #e6e8eb;
} }
.pickTitle{ .pickTitle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px 10px; padding: 10px 10px;
border-bottom: 1px solid #E6E8EB; border-bottom: 1px solid #e6e8eb;
} }
} }
.mianbaoxue{ .mianbaoxue {
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
padding: 10px 5px; padding: 10px 5px;
overflow: auto; overflow: auto;
cursor: pointer; cursor: pointer;
} }
.contentBox{ .contentBox {
height: 400px; height: 400px;
padding: 0 5px; padding: 0 5px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 5px 5px; padding: 5px 5px;
cursor: pointer; cursor: pointer;
i { i {
font-size: 15px; font-size: 15px;
} }
} }
li:hover { li:hover {
background-color: #EBEEF5; background-color: #ebeef5;
color: #409EFF; color: #409eff;
.el-text{ .el-text {
color: #409EFF; color: #409eff;
} }
} }
li.active{ li.active {
background-color: #EBEDF0; background-color: #ebedf0;
color: #409EFF; color: #409eff;
.el-text{ .el-text {
color: #409EFF; color: #409eff;
} }
} }
} }
.contentLiLeft{ .contentLiLeft {
border-left: 1px dashed #909399; border-left: 1px dashed #909399;
padding-left: 10px; padding-left: 10px;
} }
.pickBox{ .pickBox {
height: 420px; height: 420px;
padding: 10px 0px 0px 0px; padding: 10px 0px 0px 0px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 5px 5px; padding: 5px 5px;
cursor: pointer; cursor: pointer;
i { i {
font-size: 15px; font-size: 15px;
} }
} }
li:hover { li:hover {
background-color: #F56C6C; background-color: #f56c6c;
color: #FFFFFF; color: #ffffff;
.el-text{ .el-text {
color: #FFFFFF; color: #ffffff;
} }
} }
} }
</style> </style>

450
src/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue

@ -3,252 +3,274 @@
@ 时间: 2024-07-22 11:28:18 @ 时间: 2024-07-22 11:28:18
@ 备注: 自定义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 { useUserStore } from "@/store/modules/user"; import { useUserStore } from "@/store/modules/user";
import { gainAppEditPsge } from '@/api/DesignForm/requestapi' import { gainAppEditPsge } from "@/api/DesignForm/requestapi";
import RegularPage from "@/views/sysworkflow/lowcodepage/runApp/regularPage.vue" import RegularPage from "@/views/sysworkflow/lowcodepage/runApp/regularPage.vue";
import RunAppForm from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue" import RunAppForm from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue";
const props = defineProps({ const props = defineProps({
drawerWith:{ drawerWith: {
type:Number, type: Number,
default:0 default: 0,
}, },
runIsOpen:{ runIsOpen: {
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 {};
} },
} },
}); });
const emits = defineEmits(["update:runIsOpen","refreshPage"]); const emits = defineEmits(["update:runIsOpen", "refreshPage"]);
const userStore = useUserStore(); const userStore = useUserStore();
const menusTree = ref<appMenuTreeInfo[]>([]) // const menusTree = ref<appMenuTreeInfo[]>([]); //
const pickAppMenu = ref("") // const pickAppMenu = ref(""); //
const switchPAge = ref(1) // 12 const switchPAge = ref(1); // 12
const pickAppMenuSel = ref("") // const pickAppMenuSel = ref(""); //
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 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,
} };
// console.log("app---",props.pickAppInfo) // console.log("app---",props.pickAppInfo)
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; let isIn = true;
let isIn = true; data.data.menuTree.forEach((item) => {
data.data.menuTree.forEach((item)=>{ if (item.isLock == 1 && item.isMain == 1) {
if(item.isLock == 1 && item.isMain == 1){ pickAppMenu.value = item;
pickAppMenu.value = item; isIn = false;
isIn = false; switchPAge.value = 1;
switchPAge.value = 1 }
} });
}) if (isIn) {
if(isIn){ pickAppMenu.value = data.data.menuTree[0];
pickAppMenu.value = data.data.menuTree[0]; if (pickAppMenu.value.type == 2) {
if (pickAppMenu.value.type == 2){ switchPAge.value = 2;
switchPAge.value = 2 }
} }
} });
}) };
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-30 15:17:29 @ 时间: 2024-05-30 15:17:29
@ 功能: 退出应用 @ 功能: 退出应用
*/ */
const closeRunApp = () => { const closeRunApp = () => {
emits("update:runIsOpen",false) emits("update:runIsOpen", false);
emits("refreshPage",props.searchQuery) emits("refreshPage", props.searchQuery);
} };
watch(()=>props.runIsOpen,(val:boolean)=>{ watch(
if(val){ () => props.runIsOpen,
gainAppContent() (val: boolean) => {
} if (val) {
}) gainAppContent();
}
}
);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-17 16:45:40 @ 时间: 2024-05-17 16:45:40
@ 功能: 打开app表单 @ 功能: 打开app表单
*/ */
const openAppPage = (val:any) =>{ const openAppPage = (val: any) => {
// console.log("app------>",val) // console.log("app------>",val)
if(val.type!=1){ if (val.type != 1) {
if(val.isLock==1){ if (val.isLock == 1) {
switchPAge.value = 1 switchPAge.value = 1;
}else{ } else {
switchPAge.value = 2 switchPAge.value = 2;
} }
pickAppMenu.value = val pickAppMenu.value = val;
} }
} };
</script> </script>
<template> <template>
<el-drawer v-model="props.runIsOpen" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith"> <el-drawer
<el-container class="common-layout"> v-model="props.runIsOpen"
<el-header class="headerBox"> :with-header="false"
<div> :close-on-click-modal="false"
<el-space wrap> :close-on-press-escape="false"
<el-avatar shape="square" :size="25" :src="appCont.appSvg" /> :destroy-on-close="true"
<el-text>{{ appCont.appName }}</el-text> :size="props.drawerWith"
</el-space> >
</div> <el-container class="common-layout">
<div> <el-header class="headerBox">
<el-dropdown> <div>
<el-avatar shape="square" :size="25" :src="userStore.avatar" /> <el-space wrap>
<template #dropdown> <el-avatar shape="square" :size="25" :src="appCont.appSvg" />
<el-dropdown-item> <el-text>{{ appCont.appName }}</el-text>
<table class="userTabel"> </el-space>
<tr> </div>
<td rowspan="2"><el-avatar shape="square" :size="55" :src="userStore.avatar" /></td> <div>
<td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td> <el-dropdown>
</tr> <el-avatar shape="square" :size="25" :src="userStore.avatar" />
<tr> <template #dropdown>
<td>{{ userStore.userInfoCont.companyname }}/{{ userStore.userInfoCont.departmentname }}</td> <el-dropdown-item>
</tr> <table class="userTabel">
</table> <tr>
</el-dropdown-item> <td rowspan="2">
<el-dropdown-item @click="closeRunApp()" divided> <el-avatar shape="square" :size="55" :src="userStore.avatar" />
<i class="fa fa-sign-out"></i> </td>
<el-text class="mx-1" type="danger">退出</el-text> <td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td>
</el-dropdown-item> </tr>
</template> <tr>
</el-dropdown> <td>
</div> {{ userStore.userInfoCont.companyname }}/{{
</el-header> userStore.userInfoCont.departmentname
<el-container> }}
<el-aside class="asideBox"> </td>
<el-row> </tr>
<el-col :span="24" class="asideBoxSearch"> </table>
<el-tree-select </el-dropdown-item>
v-model="pickAppMenuSel" <el-dropdown-item @click="closeRunApp()" divided>
:data="menusTree" <i class="fa fa-sign-out"></i>
:render-after-expand="false" <el-text class="mx-1" type="danger">退出</el-text>
:suffix-icon="Search" </el-dropdown-item>
node-key="id" </template>
clearable </el-dropdown>
filterable </div>
/> </el-header>
</el-col> <el-container>
</el-row> <el-aside class="asideBox">
<el-tree <el-row>
:data="menusTree" <el-col :span="24" class="asideBoxSearch">
node-key="id" <el-tree-select
:allow-drop="allowDrop" v-model="pickAppMenuSel"
:expand-on-click-node="true" :data="menusTree"
> :render-after-expand="false"
<template #default="{ node, data }"> :suffix-icon="Search"
<div class="appMenuTitle" @click="openAppPage(data)"> node-key="id"
<el-space wrap> clearable
<svg-icon prefix="icon" :icon-class="data.svg" /> filterable
<el-tooltip :content="node.label" placement="top" effect="dark"> />
<el-text class="w-120px mb-2" truncated >{{node.label}}</el-text> </el-col>
</el-tooltip> </el-row>
</el-space> <el-tree
</div> :data="menusTree"
</template> node-key="id"
</el-tree> :allow-drop="allowDrop"
</el-aside> :expand-on-click-node="true"
<el-main class="mainBox"> >
<RegularPage v-if="switchPAge==1" :pick-app-menu="pickAppMenu" :drawer-with="props.drawerWith" /> <template #default="{ node, data }">
<RunAppForm v-else :pick-app-menu="pickAppMenu" :drawer-with="props.drawerWith" /> <div class="appMenuTitle" @click="openAppPage(data)">
</el-main> <el-space wrap>
</el-container> <svg-icon prefix="icon" :icon-class="data.svg" />
</el-container> <el-tooltip :content="node.label" placement="top" effect="dark">
</el-drawer> <el-text class="w-120px mb-2" truncated>{{ node.label }}</el-text>
</el-tooltip>
</el-space>
</div>
</template>
</el-tree>
</el-aside>
<el-main class="mainBox">
<RegularPage
v-if="switchPAge == 1"
:pick-app-menu="pickAppMenu"
:drawer-with="props.drawerWith"
/>
<RunAppForm
v-else
:pick-app-menu="pickAppMenu"
:drawer-with="props.drawerWith"
/>
</el-main>
</el-container>
</el-container>
</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;
} }
.headerBox{ .headerBox {
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__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; }
} }
} .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>

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

@ -3,162 +3,174 @@
@ 时间: 2024-05-31 09:22:06 @ 时间: 2024-05-31 09:22:06
@ 备注: 执行表格 @ 备注: 执行表格
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' import {
import { judgeSubmitCancel,gainAppPageInfo,getFieldRecord } from '@/api/DesignForm/requestapi' json2string,
import { Edit,Picture as IconPicture } from '@element-plus/icons-vue' objToStringify,
import { appPageDataInit,appWorkFlow } from "@/api/date/type" string2json,
import { notAsA_BasisForJudgment,asAnApprovalActionControl,fixedValueControl,timeControl,timeEquation,submitButton, afreshSubmitButton } from '@/utils/workflow/const' stringToObj,
} from "@/utils/DesignForm/form";
import {
judgeSubmitCancel,
gainAppPageInfo,
getFieldRecord,
} from "@/api/DesignForm/requestapi";
import { Edit, Picture as IconPicture } from "@element-plus/icons-vue";
import { appPageDataInit, appWorkFlow } from "@/api/date/type";
import {
notAsA_BasisForJudgment,
asAnApprovalActionControl,
fixedValueControl,
timeControl,
timeEquation,
submitButton,
afreshSubmitButton,
} from "@/utils/workflow/const";
const props = defineProps({ const props = defineProps({
pickAppMenu:{ pickAppMenu: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} },
} },
}); });
const activePage = ref(0) // const activePage = ref(0); //
const appInitData = ref<appPageDataInit>("") const appInitData = ref<appPageDataInit>("");
//app //app
const stateForm = reactive<any>({ const stateForm = reactive<any>({
type: 1, // 123 4 5 type: 1, // 123 4 5
formData: { formData: {
list: [], list: [],
form: {}, form: {},
config: {}, config: {},
powerstr:{} powerstr: {},
}, },
dict: {}, dict: {},
formId: "1", formId: "1",
id: 0, id: 0,
formId: 0, formId: 0,
versionId: 0, versionId: 0,
loading: true loading: true,
}) });
// //
const stateList = reactive({ const stateList = 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: [],
},
},
map: {
status: false,
isClick: false,
form: {
mapWord: "",
sortWord: "",
sort: 1,
title: [],
},
}, },
searchData: [], card: {
loading: false, status: false,
attrObj: {}, isClick: false,
config: { form: {
pageSize:10, sort: 1,
searchIsShow:true, sortWord: "",
searchFormIsShow:true, imgWork: "",
openPageMode:"drawer" imgWidth: 50,
}, imgHeight: 50,
tagList: {}, imgBorderRadius: 5,
formId: props.formKey || '', imgPadding: 2,
formList: [], // titleWork: "",
name: '', describe: "",
treeData: {}, // ranks: 3,
previewVisible: false, title: [],
tabsName: 'second', },
formFieldList: [], // },
formApi:{ },
type:"1", });
addApiUrl:"", const appFormTitle = ref("");
editApiUrl:"", const versionTitle = ref<string>(""); //
delApiUrl:"", const versionId = ref<string>(""); //
lookApiUrl:"" const appFlowInfo = ref<appWorkFlow>(""); //
}, const isFlow = ref(2);
dict: {}, const mastesformjson = ref(""); //
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 appFormTitle = ref("")
const versionTitle = ref<string>("") //
const versionId = ref<string>("") //
const appFlowInfo = ref<appWorkFlow>("") //
const isFlow = ref(2)
const mastesformjson = ref("") //
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-06-03 09:54:30 @ 时间: 2024-06-03 09:54:30
@ 功能: 加载页面 @ 功能: 加载页面
*/ */
onMounted(() => { onMounted(() => {
initLoadData() initLoadData();
}); });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ -166,174 +178,184 @@ onMounted(() => {
@ 功能: 初始化数据 @ 功能: 初始化数据
*/ */
const initLoadData = () => { const initLoadData = () => {
// console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1) // console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1)
if(props.pickAppMenu.type != 1){ if (props.pickAppMenu.type != 1) {
appFormTitle.value = props.pickAppMenu.label appFormTitle.value = props.pickAppMenu.label;
gainAppPageInfo({id:props.pickAppMenu.id}) gainAppPageInfo({ id: props.pickAppMenu.id }).then((data) => {
.then((data)=>{ // console.log("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",data)
// console.log("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",data) appInitData.value = data.data;
appInitData.value = data.data // console.log("---!",appInitData.value)
// console.log("---!",appInitData.value) mastesformjson.value = data.data.appForm.mastesformjson;
mastesformjson.value = data.data.appForm.mastesformjson isFlow.value = data.data.appForm.flowIsOpen;
isFlow.value = data.data.appForm.flowIsOpen if (data.data.page && data.data.pageList && data.data.appFlow) {
if (data.data.page && data.data.pageList && data.data.appFlow){ activePage.value = 1;
activePage.value = 1 } else if (data.data.page && !data.data.pageList && data.data.appFlow) {
}else if (data.data.page && !data.data.pageList && data.data.appFlow){ activePage.value = 2;
activePage.value = 2 } else if (!data.data.page && !data.data.pageList && data.data.appFlow) {
}else if (!data.data.page && !data.data.pageList && data.data.appFlow){ activePage.value = 3;
activePage.value = 3 } else if (!data.data.page && data.data.pageList && data.data.appFlow) {
}else if (!data.data.page && data.data.pageList && data.data.appFlow){ activePage.value = 1;
activePage.value = 1 } else if (data.data.page && !data.data.pageList && !data.data.appFlow) {
}else if (data.data.page && !data.data.pageList && !data.data.appFlow){ activePage.value = 2;
activePage.value = 2 } else {
}else{ activePage.value = 1;
activePage.value = 1 }
} versionId.value = data.data.appForm.id.toString();
versionId.value = data.data.appForm.id.toString() 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++){ for (let u = 0; u < holeControlAndConfigStateData.list.length; u++) {
for(let u = 0;u<holeControlAndConfigStateData.list.length;u++){ if (
if(stateData.tableData.columns[i].id==holeControlAndConfigStateData.list[u].name){ stateData.tableData.columns[i].id ==
stateData.tableData.columns[i].control = holeControlAndConfigStateData.list[u].control holeControlAndConfigStateData.list[u].name
stateData.tableData.columns[i].config = holeControlAndConfigStateData.list[u].config ) {
} stateData.tableData.columns[i].control =
holeControlAndConfigStateData.list[u].control;
} stateData.tableData.columns[i].config =
holeControlAndConfigStateData.list[u].config;
}
}
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("runAppForm-----214",paramx) //console.log("runAppForm-----214",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].options = data stateData.searchData[j].id == stateData.tableData.columns[i].id
} ) {
} stateData.searchData[j].options = data;
} }
}) }
} }
if(stateData.searchData && stateData.searchData.length>0){ });
for(let j = 0;j<stateData.searchData.length;j++){ }
// console.log(stateData.searchData[j]) if (stateData.searchData && stateData.searchData.length > 0) {
if(stateData.searchData[j].id==stateData.tableData.columns[i].id){ for (let j = 0; j < stateData.searchData.length; j++) {
// console.log(stateData.searchData[j])
if (stateData.searchData[j].id == stateData.tableData.columns[i].id) {
// console.log(stateData.tableData.columns[i]) // console.log(stateData.tableData.columns[i])
stateData.searchData[j].control = stateData.tableData.columns[i].control stateData.searchData[j].control =
stateData.searchData[j].config = stateData.tableData.columns[i].config stateData.tableData.columns[i].control;
// console.log(stateData.searchData[j]) stateData.searchData[j].config =
} stateData.tableData.columns[i].config;
} // console.log(stateData.searchData[j])
} }
} }
} }
} }
stateList.tableData = stateData.tableData }
stateList.searchData = stateData.searchData }
if(stateList.searchData == null){ stateList.tableData = stateData.tableData;
stateList.searchData = new Array() stateList.searchData = stateData.searchData;
} if (stateList.searchData == null) {
stateList.loading = stateData.loading stateList.searchData = new Array();
stateList.attrObj = stateData.attrObj }
stateList.config = stateData.config stateList.loading = stateData.loading;
stateList.tagList = stateData.tagList stateList.attrObj = stateData.attrObj;
stateList.formList = stateData.formList stateList.config = stateData.config;
stateList.name = stateData.name stateList.tagList = stateData.tagList;
stateList.treeData = stateData.treeData stateList.formList = stateData.formList;
stateList.previewVisible = stateData.previewVisible stateList.name = stateData.name;
stateList.formFieldList = stateData.formFieldList stateList.treeData = stateData.treeData;
stateList.formApi = stateData.formApi stateList.previewVisible = stateData.previewVisible;
stateList.dict = stateData.dict stateList.formFieldList = stateData.formFieldList;
stateList.refreshTable = stateData.refreshTable stateList.formApi = stateData.formApi;
if(stateData.view){ stateList.dict = stateData.dict;
stateList.view = stateData.view stateList.refreshTable = stateData.refreshTable;
} if (stateData.view) {
stateList.view = stateData.view;
} }
if(data.data.page){ }
// console.log("data.data.mastesform", data.data) if (data.data.page) {
stateForm.id=data.data.appForm.version.toString() // console.log("data.data.mastesform", data.data)
stateForm.formId =data.data.appForm.cfid.toString() stateForm.id = data.data.appForm.version.toString();
stateForm.versionId =data.data.appForm.id.toString() stateForm.formId = data.data.appForm.cfid.toString();
stateForm.formData = stringToObj(data.data.appForm.mastesform) stateForm.versionId = data.data.appForm.id.toString();
stateForm.dict = string2json(data.data.appForm.dict) stateForm.formData = stringToObj(data.data.appForm.mastesform);
stateForm.formData.powerstr = string2json(data.data.appForm.powerstr) stateForm.dict = string2json(data.data.appForm.dict);
// console.log("data.data.mastesform", stateForm.formData) stateForm.formData.powerstr = string2json(data.data.appForm.powerstr);
// console.log("data.data.mastesform", stateForm.formData)
judgeSubmitCancel({"name":data.data.appForm.mastesformjson})
.then((datajud:any) =>{ judgeSubmitCancel({ name: data.data.appForm.mastesformjson }).then(
if(datajud.code == 0){ (datajud: any) => {
if (datajud.data == 3 || datajud.data == 4){ if (datajud.code == 0) {
stateForm.formData.list.push(submitButton) if (datajud.data == 3 || datajud.data == 4) {
} stateForm.formData.list.push(submitButton);
} }
}) }
} }
if(data.data.appFlow){ );
appFlowInfo.value = data.data.workFlow }
} if (data.data.appFlow) {
}) appFlowInfo.value = data.data.workFlow;
} }
});
} }
};
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-06-03 09:26:17 @ 时间: 2024-06-03 09:26:17
@ 功能: 监听菜单数据变化 @ 功能: 监听菜单数据变化
*/ */
watch(() => props.pickAppMenu,(val:any) => { watch(
initLoadData() () => props.pickAppMenu,
},{ (val: any) => {
deep: true initLoadData();
}) },
{
deep: true,
}
);
function optionsValue3Get3(data: any,fieldName: string){ function optionsValue3Get3(data: any, fieldName: string) {
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 = [] for (let j = 0; j < data.length; j++) {
for(let j = 0;j<data.length;j++){ stateForm.formData.list[i].options.push(data[j]);
stateForm.formData.list[i].options.push(data[j]) }
} }
} }
}
} }
</script> </script>
<template> <template>
<el-row> <el-row>
<el-col :span="24" class="pageBox pageHeader"> <el-col :span="24" class="pageBox pageHeader">
<el-text class="wordFont">{{ appFormTitle}}</el-text> <el-text class="wordFont">{{ appFormTitle }}</el-text>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-scrollbar class="scroBox"> <el-scrollbar class="scroBox">
<el-card class="tispMsg" shadow="always"> <el-card class="tispMsg" shadow="always">
<AppPageList
<AppPageList v-if="appInitData.pageList" v-if="appInitData.pageList"
:data="stateList.tableData" :data="stateList.tableData"
:search-data="stateList.searchData" :search-data="stateList.searchData"
:config="stateList.config" :config="stateList.config"
:form-id="appInitData.appForm.cfid.toString()" :form-id="appInitData.appForm.cfid.toString()"
:versionid="appInitData.versionId" :versionid="appInitData.versionId"
:versiontitle="versionTitle" :versiontitle="versionTitle"
:sign-code="appInitData.signCode" :sign-code="appInitData.signCode"
:pickAppMenu="props.pickAppMenu" :pickAppMenu="props.pickAppMenu"
:viewPage="stateList.view" :viewPage="stateList.view"
/> />
<!-- <AppFormPage <!-- <AppFormPage
v-else v-else
ref="formEl" ref="formEl"
:number="props.pickAppMenu.id" :number="props.pickAppMenu.id"
@ -348,48 +370,46 @@ function optionsValue3Get3(data: any,fieldName: string){
add-url="addData" add-url="addData"
@optionsValue3Get3="optionsValue3Get3" @optionsValue3Get3="optionsValue3Get3"
/> --> /> -->
<ak-form <ak-form
v-else v-else
ref="formEl" ref="formEl"
:number="props.pickAppMenu.id" :number="props.pickAppMenu.id"
:isWorkFlow="isFlow" :isWorkFlow="isFlow"
:form-data="stateForm.formData" :form-data="stateForm.formData"
:type="1" :type="1"
:mastesformjson="mastesformjson" :mastesformjson="mastesformjson"
:flowkey="appInitData.flowkey" :flowkey="appInitData.flowkey"
:groupid="appInitData.groupid" :groupid="appInitData.groupid"
:sign-code="appInitData.signCode" :sign-code="appInitData.signCode"
:version-id="appInitData.versionId" :version-id="appInitData.versionId"
add-url="addData" add-url="addData"
@optionsValue3Get3="optionsValue3Get3" @optionsValue3Get3="optionsValue3Get3"
/> />
</el-card>
</el-card> </el-scrollbar>
</el-scrollbar> </el-col>
</el-col> </el-row>
</el-row>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.pageBox{ .pageBox {
padding: 0 15px; padding: 0 15px;
.wordFont{ .wordFont {
font-size: 20px; font-size: 20px;
} }
} }
.pageHeader{ .pageHeader {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #FFFFFF; background-color: #ffffff;
padding:15px 15px 5px 15px; padding: 15px 15px 5px 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.scroBox{ .scroBox {
padding:0 15px; padding: 0 15px;
height: calc(100vh - 110px); height: calc(100vh - 110px);
.tispMsg{ .tispMsg {
margin:0 auto 15px auto; margin: 0 auto 15px auto;
} }
} }
</style> </style>

Loading…
Cancel
Save