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

手机端页面

lwx_v11^2
hreenshan112 1 year ago
parent
eea07cd7aa
commit
e51fb73178
4 changed files with 5705 additions and 5168 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

File diff suppressed because it is too large

459
src/views/hr/userBox.vue
View File

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

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

@ -3,252 +3,274 @@
@ 时间: 2024-07-22 11:28:18
@ 备注: 自定义App主容器
-->
<script lang='ts' setup>
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
<script lang="ts" setup>
import { appMenuTreeInfo, appSetInfo } from "@/api/date/type";
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 RunAppForm from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue"
import RegularPage from "@/views/sysworkflow/lowcodepage/runApp/regularPage.vue";
import RunAppForm from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue";
const props = defineProps({
drawerWith:{
type:Number,
default:0
},
runIsOpen:{
type: Boolean,
default: false,
},
pickAppInfo:{
type:Object,
default(){
return {}
}
},
searchQuery:{
type:Object,
default(){
return {}
}
}
drawerWith: {
type: Number,
default: 0,
},
runIsOpen: {
type: Boolean,
default: false,
},
pickAppInfo: {
type: Object,
default() {
return {};
},
},
searchQuery: {
type: Object,
default() {
return {};
},
},
});
const emits = defineEmits(["update:runIsOpen","refreshPage"]);
const emits = defineEmits(["update:runIsOpen", "refreshPage"]);
const userStore = useUserStore();
const menusTree = ref<appMenuTreeInfo[]>([]) //菜单树
const pickAppMenu = ref("") //选中的菜单
const switchPAge = ref(1) //页面类型 1：执行页面，2：表单页面
const pickAppMenuSel = ref("") //下拉框选中的值
const menusTree = ref<appMenuTreeInfo[]>([]); //菜单树
const pickAppMenu = ref(""); //选中的菜单
const switchPAge = ref(1); //页面类型 1：执行页面，2：表单页面
const pickAppMenuSel = ref(""); //下拉框选中的值
/**
@ 作者: 秦东
@ 时间: 2024-07-22 11:40:06
@ 功能: 应用进出配置
*/
const appCont = reactive<appSetInfo>({
appKey:"1",
appName:"未知应用",
appSvg:"",
state:1,
uuid:"1",
describe:""
})
appKey: "1",
appName: "未知应用",
appSvg: "",
state: 1,
uuid: "1",
describe: "",
});
/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:23:31
@ 功能: 获取app信息
*/
const gainAppContent = () =>{
let sendInfo = {
id:props.pickAppInfo.signCodeStr
}
// console.log("获取app信息---》",props.pickAppInfo)
gainAppEditPsge(sendInfo)
.then((data)=>{
// console.log("获取app信息---》",data)
menusTree.value = data.data.menuTree
appCont.appKey = data.data.appKey;
appCont.appName = data.data.appName;
appCont.appSvg = data.data.appSvg;
appCont.state = data.data.state;
appCont.uuid = data.data.uuid;
let isIn = true;
data.data.menuTree.forEach((item)=>{
if(item.isLock == 1 && item.isMain == 1){
pickAppMenu.value = item;
isIn = false;
switchPAge.value = 1
}
})
if(isIn){
pickAppMenu.value = data.data.menuTree[0];
if (pickAppMenu.value.type == 2){
switchPAge.value = 2
}
}
})
}
const gainAppContent = () => {
let sendInfo = {
id: props.pickAppInfo.signCodeStr,
};
// console.log("获取app信息---》",props.pickAppInfo)
gainAppEditPsge(sendInfo).then((data) => {
// console.log("获取app信息---》",data)
menusTree.value = data.data.menuTree;
appCont.appKey = data.data.appKey;
appCont.appName = data.data.appName;
appCont.appSvg = data.data.appSvg;
appCont.state = data.data.state;
appCont.uuid = data.data.uuid;
let isIn = true;
data.data.menuTree.forEach((item) => {
if (item.isLock == 1 && item.isMain == 1) {
pickAppMenu.value = item;
isIn = false;
switchPAge.value = 1;
}
});
if (isIn) {
pickAppMenu.value = data.data.menuTree[0];
if (pickAppMenu.value.type == 2) {
switchPAge.value = 2;
}
}
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-30 15:17:29
@ 功能: 退出应用
*/
const closeRunApp = () => {
emits("update:runIsOpen",false)
emits("refreshPage",props.searchQuery)
}
emits("update:runIsOpen", false);
emits("refreshPage", props.searchQuery);
};
watch(()=>props.runIsOpen,(val:boolean)=>{
if(val){
gainAppContent()
}
})
watch(
() => props.runIsOpen,
(val: boolean) => {
if (val) {
gainAppContent();
}
}
);
/**
@ 作者: 秦东
@ 时间: 2024-05-17 16:45:40
@ 功能: 打开app表单
*/
const openAppPage = (val:any) =>{
// console.log("打开app表单------>",val)
if(val.type!=1){
if(val.isLock==1){
switchPAge.value = 1
}else{
switchPAge.value = 2
}
pickAppMenu.value = val
}
}
const openAppPage = (val: any) => {
// console.log("打开app表单------>",val)
if (val.type != 1) {
if (val.isLock == 1) {
switchPAge.value = 1;
} else {
switchPAge.value = 2;
}
pickAppMenu.value = val;
}
};
</script>
<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-container class="common-layout">
<el-header class="headerBox">
<div>
<el-space wrap>
<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
<el-text>{{ appCont.appName }}</el-text>
</el-space>
</div>
<div>
<el-dropdown>
<el-avatar shape="square" :size="25" :src="userStore.avatar" />
<template #dropdown>
<el-dropdown-item>
<table class="userTabel">
<tr>
<td rowspan="2"><el-avatar shape="square" :size="55" :src="userStore.avatar" /></td>
<td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td>
</tr>
<tr>
<td>{{ userStore.userInfoCont.companyname }}/{{ userStore.userInfoCont.departmentname }}</td>
</tr>
</table>
</el-dropdown-item>
<el-dropdown-item @click="closeRunApp()" divided>
<i class="fa fa-sign-out"></i>
<el-text class="mx-1" type="danger">退出</el-text>
</el-dropdown-item>
</template>
</el-dropdown>
</div>
</el-header>
<el-container>
<el-aside class="asideBox">
<el-row>
<el-col :span="24" class="asideBoxSearch">
<el-tree-select
v-model="pickAppMenuSel"
:data="menusTree"
:render-after-expand="false"
:suffix-icon="Search"
node-key="id"
clearable
filterable
/>
</el-col>
</el-row>
<el-tree
:data="menusTree"
node-key="id"
:allow-drop="allowDrop"
:expand-on-click-node="true"
>
<template #default="{ node, data }">
<div class="appMenuTitle" @click="openAppPage(data)">
<el-space wrap>
<svg-icon prefix="icon" :icon-class="data.svg" />
<el-tooltip :content="node.label" placement="top" effect="dark">
<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>
<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-container class="common-layout">
<el-header class="headerBox">
<div>
<el-space wrap>
<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
<el-text>{{ appCont.appName }}</el-text>
</el-space>
</div>
<div>
<el-dropdown>
<el-avatar shape="square" :size="25" :src="userStore.avatar" />
<template #dropdown>
<el-dropdown-item>
<table class="userTabel">
<tr>
<td rowspan="2">
<el-avatar shape="square" :size="55" :src="userStore.avatar" />
</td>
<td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td>
</tr>
<tr>
<td>
{{ userStore.userInfoCont.companyname }}/{{
userStore.userInfoCont.departmentname
}}
</td>
</tr>
</table>
</el-dropdown-item>
<el-dropdown-item @click="closeRunApp()" divided>
<i class="fa fa-sign-out"></i>
<el-text class="mx-1" type="danger">退出</el-text>
</el-dropdown-item>
</template>
</el-dropdown>
</div>
</el-header>
<el-container>
<el-aside class="asideBox">
<el-row>
<el-col :span="24" class="asideBoxSearch">
<el-tree-select
v-model="pickAppMenuSel"
:data="menusTree"
:render-after-expand="false"
:suffix-icon="Search"
node-key="id"
clearable
filterable
/>
</el-col>
</el-row>
<el-tree
:data="menusTree"
node-key="id"
:allow-drop="allowDrop"
:expand-on-click-node="true"
>
<template #default="{ node, data }">
<div class="appMenuTitle" @click="openAppPage(data)">
<el-space wrap>
<svg-icon prefix="icon" :icon-class="data.svg" />
<el-tooltip :content="node.label" placement="top" effect="dark">
<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>
<style lang='scss' scoped>
.common-layout{
.el-header{
padding-left:10px;
padding-right:10px;
}
.headerBox{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F1F2F3;
:deep(.el-tabs__nav-wrap::after) {
position: static !important;
}
:deep(.el-tabs__header){
margin:0 0 1px 0;
}
:deep .el-card__body{
padding: 0px 0;
}
}
.asideBox{
width:250px;
border-right: 1px solid #F1F2F3;
height: calc(100vh - 40px);
.asideBoxSearch{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
}
.appMenuTitle{
width: 100%;
padding-right: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.svgBox{
display: none;
}
}
.appMenuTitle:hover .svgBox{
display: block;
}
}
.el-main {
padding: 0px;
}
.mainBox{
background-color: #F1F2F3;
padding:0px;
.scroBox{
height: calc(100vh - 40px);
}
}
<style lang="scss" scoped>
.common-layout {
.el-header {
padding-left: 10px;
padding-right: 10px;
}
.headerBox {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f1f2f3;
:deep(.el-tabs__nav-wrap::after) {
position: static !important;
}
:deep(.el-tabs__header) {
margin: 0 0 1px 0;
}
:deep .el-card__body {
padding: 0px 0;
}
}
.asideBox {
width: 250px;
border-right: 1px solid #f1f2f3;
height: calc(100vh - 40px);
.asideBoxSearch {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
}
.appMenuTitle {
width: 100%;
padding-right: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.svgBox {
display: none;
}
}
.appMenuTitle:hover .svgBox {
display: block;
}
}
.el-main {
padding: 0px;
}
.mainBox {
background-color: #f1f2f3;
padding: 0px;
.scroBox {
height: calc(100vh - 40px);
}
}
}
</style>

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

@ -3,162 +3,174 @@
@ 时间: 2024-05-31 09:22:06
@ 备注: 执行表格
-->
<script lang='ts' setup>
import { json2string,objToStringify,string2json,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'
<script lang="ts" setup>
import {
json2string,
objToStringify,
string2json,
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({
pickAppMenu:{
type:Object,
default(){
return {}
}
}
pickAppMenu: {
type: Object,
default() {
return {};
},
},
});
const activePage = ref(0) //默认选择的页面
const appInitData = ref<appPageDataInit>("")
const activePage = ref(0); //默认选择的页面
const appInitData = ref<appPageDataInit>("");
//app表单
const stateForm = reactive<any>({
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
formData: {
list: [],
form: {},
config: {},
powerstr:{}
},
dict: {},
formId: "1",
id: 0,
formId: 0,
versionId: 0,
loading: true
})
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
formData: {
list: [],
form: {},
config: {},
powerstr: {},
},
dict: {},
formId: "1",
id: 0,
formId: 0,
versionId: 0,
loading: true,
});
//表单列表
const stateList = reactive({
tableData: {
// tableProps: {}, //表格所有参数
columns: [],
config: {},
controlBtn:[],
operateBtn:[]
tableData: {
// tableProps: {}, //表格所有参数
columns: [],
config: {},
controlBtn: [],
operateBtn: [],
},
searchData: [],
loading: false,
attrObj: {},
config: {
pageSize: 10,
searchIsShow: true,
searchFormIsShow: true,
openPageMode: "drawer",
},
tagList: {},
formId: props.formKey || "",
formList: [], // 所有可选表单数据源
name: "",
treeData: {}, // 左侧树相关
previewVisible: false,
tabsName: "second",
formFieldList: [], // 表单数据源所有可选字段
formApi: {
type: "1",
addApiUrl: "",
editApiUrl: "",
delApiUrl: "",
lookApiUrl: "",
},
dict: {},
refreshTable: true,
view: {
list: {
status: true,
isClick: false,
form: {
sortWord: "",
sortClass: 1,
title: [],
},
},
date: {
status: false,
isClick: false,
form: {
startTime: "",
endTime: "",
dayType: 1,
title: [],
},
},
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: [],
loading: false,
attrObj: {},
config: {
pageSize:10,
searchIsShow:true,
searchFormIsShow:true,
openPageMode:"drawer"
},
tagList: {},
formId: props.formKey || '',
formList: [], // 所有可选表单数据源
name: '',
treeData: {}, // 左侧树相关
previewVisible: false,
tabsName: 'second',
formFieldList: [], // 表单数据源所有可选字段
formApi:{
type:"1",
addApiUrl:"",
editApiUrl:"",
delApiUrl:"",
lookApiUrl:""
},
dict: {},
refreshTable: true,
view:{
list:{
status:true,
isClick:false,
form:{
sortWord:"",
sortClass:1,
title:[]
}
},
date:{
status:false,
isClick:false,
form:{
startTime:"",
endTime:"",
dayType:1,
title:[]
}
}
,
time:{
status:false,
isClick:false,
form:{
sortWord:"",
sort:1,
title:[]
}
}
,
gantt:{
status:false,
isClick:false,
form:{
startTime:"",
endTime:"",
dayType:2,
sortWord:"",
sort:1,
title:[]
}
}
,
map:{
status:false,
isClick:false,
form:{
mapWord:"",
sortWord:"",
sort:1,
title:[]
}
},
card:{
status:false,
isClick:false,
form:{
sort:1,
sortWord:"",
imgWork:"",
imgWidth:50,
imgHeight:50,
imgBorderRadius:5,
imgPadding:2,
titleWork:"",
describe:"",
ranks:3,
title:[]
}
}
}
})
const appFormTitle = ref("")
const versionTitle = ref<string>("") //表单名称
const versionId = ref<string>("") //表单版本号
const appFlowInfo = ref<appWorkFlow>("") //流程
const isFlow = ref(2)
const mastesformjson = ref("") //
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
@ 功能: 加载页面
*/
onMounted(() => {
initLoadData()
initLoadData();
});
/**
@ 作者: 秦东
@ -166,174 +178,184 @@ onMounted(() => {
@ 功能: 初始化数据
*/
const initLoadData = () => {
// console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1)
if(props.pickAppMenu.type != 1){
appFormTitle.value = props.pickAppMenu.label
gainAppPageInfo({id:props.pickAppMenu.id})
.then((data)=>{
// console.log("获取初始化表单数据bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",data)
appInitData.value = data.data
// console.log("获取初始化表单数据---!",appInitData.value)
mastesformjson.value = data.data.appForm.mastesformjson
isFlow.value = data.data.appForm.flowIsOpen
if (data.data.page && data.data.pageList && data.data.appFlow){
activePage.value = 1
}else if (data.data.page && !data.data.pageList && data.data.appFlow){
activePage.value = 2
}else if (!data.data.page && !data.data.pageList && data.data.appFlow){
activePage.value = 3
}else if (!data.data.page && data.data.pageList && data.data.appFlow){
activePage.value = 1
}else if (data.data.page && !data.data.pageList && !data.data.appFlow){
activePage.value = 2
}else{
activePage.value = 1
}
versionId.value = data.data.appForm.id.toString()
versionTitle.value = data.data.appForm.name
if(data.data.pageList){
let stateData = string2json(data.data.appForm.listjson)
// console.log("接邂逅的数",stateData)
let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
if(stateData.tableData.columns && stateData.tableData.columns.length>0){
for(let i = 0;i<stateData.tableData.columns.length;i++){
for(let u = 0;u<holeControlAndConfigStateData.list.length;u++){
if(stateData.tableData.columns[i].id==holeControlAndConfigStateData.list[u].name){
stateData.tableData.columns[i].control = holeControlAndConfigStateData.list[u].control
stateData.tableData.columns[i].config = holeControlAndConfigStateData.list[u].config
}
}
// console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1)
if (props.pickAppMenu.type != 1) {
appFormTitle.value = props.pickAppMenu.label;
gainAppPageInfo({ id: props.pickAppMenu.id }).then((data) => {
// console.log("获取初始化表单数据bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",data)
appInitData.value = data.data;
// console.log("获取初始化表单数据---!",appInitData.value)
mastesformjson.value = data.data.appForm.mastesformjson;
isFlow.value = data.data.appForm.flowIsOpen;
if (data.data.page && data.data.pageList && data.data.appFlow) {
activePage.value = 1;
} else if (data.data.page && !data.data.pageList && data.data.appFlow) {
activePage.value = 2;
} else if (!data.data.page && !data.data.pageList && data.data.appFlow) {
activePage.value = 3;
} else if (!data.data.page && data.data.pageList && data.data.appFlow) {
activePage.value = 1;
} else if (data.data.page && !data.data.pageList && !data.data.appFlow) {
activePage.value = 2;
} else {
activePage.value = 1;
}
versionId.value = data.data.appForm.id.toString();
versionTitle.value = data.data.appForm.name;
if (data.data.pageList) {
let stateData = string2json(data.data.appForm.listjson);
// console.log("接邂逅的数",stateData)
let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson);
if (stateData.tableData.columns && stateData.tableData.columns.length > 0) {
for (let i = 0; i < stateData.tableData.columns.length; i++) {
for (let u = 0; u < holeControlAndConfigStateData.list.length; u++) {
if (
stateData.tableData.columns[i].id ==
holeControlAndConfigStateData.list[u].name
) {
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){
// console.log(stateData.tableData.columns[i])
let paramx:string = ""+stateData.tableData.columns[i].control.optionsValue3Field
/*
if (
stateData.tableData.columns[i].config != undefined &&
stateData.tableData.columns[i].control != undefined
) {
// console.log(stateData.tableData.columns[i])
let paramx: string =
"" + stateData.tableData.columns[i].control.optionsValue3Field;
/*
在这里请求后台获取字段
*/
//console.log("runAppForm-----214",paramx)
if(paramx && paramx != "" && paramx != null && paramx != "undefined"){
getFieldRecord(paramx).then(({ data }) => {
stateData.tableData.columns[i].options = data
if(stateData.searchData.length>0){
for(let j = 0;j<stateData.searchData.length;j++){
// console.log(stateData.searchData[j])
if(stateData.searchData[j].id==stateData.tableData.columns[i].id){
stateData.searchData[j].options = data
}
}
}
})
}
if(stateData.searchData && stateData.searchData.length>0){
for(let j = 0;j<stateData.searchData.length;j++){
// console.log(stateData.searchData[j])
if(stateData.searchData[j].id==stateData.tableData.columns[i].id){
// console.log(stateData.tableData.columns[i])
stateData.searchData[j].control = stateData.tableData.columns[i].control
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.searchData = new Array()
}
stateList.loading = stateData.loading
stateList.attrObj = stateData.attrObj
stateList.config = stateData.config
stateList.tagList = stateData.tagList
stateList.formList = stateData.formList
stateList.name = stateData.name
stateList.treeData = stateData.treeData
stateList.previewVisible = stateData.previewVisible
stateList.formFieldList = stateData.formFieldList
stateList.formApi = stateData.formApi
stateList.dict = stateData.dict
stateList.refreshTable = stateData.refreshTable
if(stateData.view){
stateList.view = stateData.view
}
}
if(data.data.page){
// console.log("data.data.mastesform", data.data)
stateForm.id=data.data.appForm.version.toString()
stateForm.formId =data.data.appForm.cfid.toString()
stateForm.versionId =data.data.appForm.id.toString()
stateForm.formData = stringToObj(data.data.appForm.mastesform)
stateForm.dict = string2json(data.data.appForm.dict)
stateForm.formData.powerstr = string2json(data.data.appForm.powerstr)
// console.log("data.data.mastesform", stateForm.formData)
judgeSubmitCancel({"name":data.data.appForm.mastesformjson})
.then((datajud:any) =>{
if(datajud.code == 0){
if (datajud.data == 3 || datajud.data == 4){
stateForm.formData.list.push(submitButton)
}
}
})
}
if(data.data.appFlow){
appFlowInfo.value = data.data.workFlow
}
})
}
}
//console.log("runAppForm-----214",paramx)
if (paramx && paramx != "" && paramx != null && paramx != "undefined") {
getFieldRecord(paramx).then(({ data }) => {
stateData.tableData.columns[i].options = data;
if (stateData.searchData.length > 0) {
for (let j = 0; j < stateData.searchData.length; j++) {
// console.log(stateData.searchData[j])
if (
stateData.searchData[j].id == stateData.tableData.columns[i].id
) {
stateData.searchData[j].options = data;
}
}
}
});
}
if (stateData.searchData && stateData.searchData.length > 0) {
for (let j = 0; j < stateData.searchData.length; j++) {
// console.log(stateData.searchData[j])
if (stateData.searchData[j].id == stateData.tableData.columns[i].id) {
// console.log(stateData.tableData.columns[i])
stateData.searchData[j].control =
stateData.tableData.columns[i].control;
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.searchData = new Array();
}
stateList.loading = stateData.loading;
stateList.attrObj = stateData.attrObj;
stateList.config = stateData.config;
stateList.tagList = stateData.tagList;
stateList.formList = stateData.formList;
stateList.name = stateData.name;
stateList.treeData = stateData.treeData;
stateList.previewVisible = stateData.previewVisible;
stateList.formFieldList = stateData.formFieldList;
stateList.formApi = stateData.formApi;
stateList.dict = stateData.dict;
stateList.refreshTable = stateData.refreshTable;
if (stateData.view) {
stateList.view = stateData.view;
}
}
if (data.data.page) {
// console.log("data.data.mastesform", data.data)
stateForm.id = data.data.appForm.version.toString();
stateForm.formId = data.data.appForm.cfid.toString();
stateForm.versionId = data.data.appForm.id.toString();
stateForm.formData = stringToObj(data.data.appForm.mastesform);
stateForm.dict = string2json(data.data.appForm.dict);
stateForm.formData.powerstr = string2json(data.data.appForm.powerstr);
// console.log("data.data.mastesform", stateForm.formData)
judgeSubmitCancel({ name: data.data.appForm.mastesformjson }).then(
(datajud: any) => {
if (datajud.code == 0) {
if (datajud.data == 3 || datajud.data == 4) {
stateForm.formData.list.push(submitButton);
}
}
}
);
}
if (data.data.appFlow) {
appFlowInfo.value = data.data.workFlow;
}
});
}
};
/**
@ 作者: 秦东
@ 时间: 2024-06-03 09:26:17
@ 功能: 监听菜单数据变化
*/
watch(() => props.pickAppMenu,(val:any) => {
initLoadData()
},{
deep: true
})
watch(
() => props.pickAppMenu,
(val: any) => {
initLoadData();
},
{
deep: true,
}
);
function optionsValue3Get3(data: any,fieldName: string){
for(let i = 0; i < stateForm.formData.list.length; i++){
if(stateForm.formData.list[i].name==fieldName){
stateForm.formData.list[i].options = []
for(let j = 0;j<data.length;j++){
stateForm.formData.list[i].options.push(data[j])
}
}
}
function optionsValue3Get3(data: any, fieldName: string) {
for (let i = 0; i < stateForm.formData.list.length; i++) {
if (stateForm.formData.list[i].name == fieldName) {
stateForm.formData.list[i].options = [];
for (let j = 0; j < data.length; j++) {
stateForm.formData.list[i].options.push(data[j]);
}
}
}
}
</script>
<template>
<el-row>
<el-col :span="24" class="pageBox pageHeader">
<el-text class="wordFont">{{ appFormTitle}}</el-text>
</el-col>
<el-col :span="24">
<el-scrollbar class="scroBox">
<el-card class="tispMsg" shadow="always">
<AppPageList v-if="appInitData.pageList"
:data="stateList.tableData"
:search-data="stateList.searchData"
:config="stateList.config"
:form-id="appInitData.appForm.cfid.toString()"
:versionid="appInitData.versionId"
:versiontitle="versionTitle"
:sign-code="appInitData.signCode"
:pickAppMenu="props.pickAppMenu"
:viewPage="stateList.view"
/>
<!-- <AppFormPage
<el-row>
<el-col :span="24" class="pageBox pageHeader">
<el-text class="wordFont">{{ appFormTitle }}</el-text>
</el-col>
<el-col :span="24">
<el-scrollbar class="scroBox">
<el-card class="tispMsg" shadow="always">
<AppPageList
v-if="appInitData.pageList"
:data="stateList.tableData"
:search-data="stateList.searchData"
:config="stateList.config"
:form-id="appInitData.appForm.cfid.toString()"
:versionid="appInitData.versionId"
:versiontitle="versionTitle"
:sign-code="appInitData.signCode"
:pickAppMenu="props.pickAppMenu"
:viewPage="stateList.view"
/>
<!-- <AppFormPage
v-else
ref="formEl"
:number="props.pickAppMenu.id"
@ -348,48 +370,46 @@ function optionsValue3Get3(data: any,fieldName: string){
add-url="addData"
@optionsValue3Get3="optionsValue3Get3"
/> -->
<ak-form
v-else
ref="formEl"
:number="props.pickAppMenu.id"
:isWorkFlow="isFlow"
:form-data="stateForm.formData"
:type="1"
:mastesformjson="mastesformjson"
:flowkey="appInitData.flowkey"
:groupid="appInitData.groupid"
:sign-code="appInitData.signCode"
:version-id="appInitData.versionId"
add-url="addData"
@optionsValue3Get3="optionsValue3Get3"
/>
</el-card>
</el-scrollbar>
</el-col>
</el-row>
<ak-form
v-else
ref="formEl"
:number="props.pickAppMenu.id"
:isWorkFlow="isFlow"
:form-data="stateForm.formData"
:type="1"
:mastesformjson="mastesformjson"
:flowkey="appInitData.flowkey"
:groupid="appInitData.groupid"
:sign-code="appInitData.signCode"
:version-id="appInitData.versionId"
add-url="addData"
@optionsValue3Get3="optionsValue3Get3"
/>
</el-card>
</el-scrollbar>
</el-col>
</el-row>
</template>
<style lang='scss' scoped>
.pageBox{
padding: 0 15px;
.wordFont{
font-size: 20px;
}
<style lang="scss" scoped>
.pageBox {
padding: 0 15px;
.wordFont {
font-size: 20px;
}
}
.pageHeader{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FFFFFF;
padding:15px 15px 5px 15px;
margin-bottom: 15px;
.pageHeader {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 15px 15px 5px 15px;
margin-bottom: 15px;
}
.scroBox{
padding:0 15px;
height: calc(100vh - 110px);
.tispMsg{
margin:0 auto 15px auto;
}
.scroBox {
padding: 0 15px;
height: calc(100vh - 110px);
.tispMsg {
margin: 0 auto 15px auto;
}
}
</style>

Write Preview
Loading…
Cancel
Save