Browse Source

Merge branch 'qin_v6'

# Conflicts:
#	src/components/DesignForm/formControlPropertiNew.vue
lwx_v11
hreenshan112 1 year ago
parent
commit
5f70873491
  1. 281
      src/components/DesignForm/assembly/index.ts
  2. 8975
      src/components/DesignForm/formControlPropertiNew.vue
  3. 70
      src/layout/components/Top.vue
  4. 166
      src/layout/index.vue
  5. 178
      src/views/dashboard/index.vue
  6. 459
      src/views/hr/userBox.vue
  7. 450
      src/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue
  8. 696
      src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue

281
src/components/DesignForm/assembly/index.ts

@ -17,6 +17,146 @@ const config: { optionsType: number } = {
optionsType: 0 // 0固定 1数据源 2 接口字典 3系统表单字段 optionsType: 0 // 0固定 1数据源 2 接口字典 3系统表单字段
} }
export default [ export default [
{
title: '布局字段',
children: [
{
type: 'grid',
label: '格栅布局',
unitName: '格栅布局',
icon: 'grid',
iconFont: 'fa-th-large',
columns: [
// 格栅列数据
{
attr: { span: 12 },
list: []
},
{
attr: { span: 12 },
list: []
}
],
control: {},
config: {},
styles: {
divStyle: {
// marginBot: "15"
},
labelStyle: {
// paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'card',
label: '卡片布局',
unitName: '卡片布局',
icon: 'card',
iconFont: 'fa-credit-card',
list: [],
control: {},
config: {},
item: {}, // label标题相关
styles: {
divStyle: {
// marginBot: "15"
},
labelStyle: {
// paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'flex',
label: '弹性布局',
unitName: '弹性布局',
icon: 'flex',
iconFont: 'fa-file-text-o',
list: [],
tableData: [], // 值集合
control: {},
config: {
addBtnText: '添加一行'
},
styles: {
divStyle: {
// marginBot: "15"
},
labelStyle: {
// paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'div',
label: '容器',
unitName: '容器',
icon: 'div',
iconFont: '',
control: {},
config: {},
list: [],
styles: {
divStyle: {
// marginBot: "15"
},
labelStyle: {
// paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'tabs',
label: '标签页',
unitName: '标签页',
icon: 'tabs',
iconFont: 'fa-folder-o',
columns: [
{
label: 'Tab1',
unitName: '',
list: []
}
],
control: {},
config: {},
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'divider',
label: '分割线',
unitName: '分割线',
icon: 'divider',
iconFont: '',
control: {},
config: {},
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
]
},
{ {
title: '基础字段', title: '基础字段',
children: [ children: [
@ -391,146 +531,7 @@ export default [
] ]
}, },
{
title: '布局字段',
children: [
{
type: 'grid',
label: '格栅布局',
unitName: '格栅布局',
icon: 'grid',
iconFont: 'fa-th-large',
columns: [
// 格栅列数据
{
attr: { span: 12 },
list: []
},
{
attr: { span: 12 },
list: []
}
],
control: {},
config: {},
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'card',
label: '卡片布局',
unitName: '卡片布局',
icon: 'card',
iconFont: 'fa-credit-card',
list: [],
control: {},
config: {},
item: {}, // label标题相关
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'flex',
label: '弹性布局',
unitName: '弹性布局',
icon: 'flex',
iconFont: 'fa-file-text-o',
list: [],
tableData: [], // 值集合
control: {},
config: {
addBtnText: '添加一行'
},
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'div',
label: '容器',
unitName: '容器',
icon: 'div',
iconFont: '',
control: {},
config: {},
list: [],
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'tabs',
label: '标签页',
unitName: '标签页',
icon: 'tabs',
iconFont: 'fa-folder-o',
columns: [
{
label: 'Tab1',
unitName: '',
list: []
}
],
control: {},
config: {},
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
{
type: 'divider',
label: '分割线',
unitName: '分割线',
icon: 'divider',
iconFont: '',
control: {},
config: {},
styles: {
divStyle: {
marginBot: "15"
},
labelStyle: {
paddingLeft: "7",
},
inputStyle: {}
}
},
]
},
{ {
title: '高级控件', title: '高级控件',

8975
src/components/DesignForm/formControlPropertiNew.vue

File diff suppressed because it is too large

70
src/layout/components/Top.vue

@ -1,39 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import {storeToRefs} from "pinia"; import { storeToRefs } from "pinia";
import EditMyPassword from "@/layout/components/myconst/editmypassword.vue"; import EditMyPassword from "@/layout/components/myconst/editmypassword.vue";
import {useUserStore} from "@/store/modules/user"; import { useUserStore } from "@/store/modules/user";
import {useAppStore} from "@/store/modules/app"; import { useAppStore } from "@/store/modules/app";
import {Position} from "@element-plus/icons-vue"; import { Position } from "@element-plus/icons-vue";
const userStore = useUserStore(); const userStore = useUserStore();
const appStore = useAppStore(); const appStore = useAppStore();
const {device} = storeToRefs(appStore); // desktop- || mobile- const { device } = storeToRefs(appStore); // desktop- || mobile-
const myPasswordBoxIsShow = ref(false); const myPasswordBoxIsShow = ref(false);
const date: Date = new Date(); const date: Date = new Date();
const tipsType = ref<number>(1) const tipsType = ref<number>(1);
// //
const greetings = computed(() => { const greetings = computed(() => {
if (date.getHours() >= 6 && date.getHours() < 8) { if (date.getHours() >= 6 && date.getHours() < 8) {
tipsType.value = 1 tipsType.value = 1;
return "晨起披衣出草堂,轩窗已自喜微凉🌅!"; return "晨起披衣出草堂,轩窗已自喜微凉🌅!";
} else if (date.getHours() >= 8 && date.getHours() < 12) { } else if (date.getHours() >= 8 && date.getHours() < 12) {
tipsType.value = 2 tipsType.value = 2;
return "上午好🌞!"; return "上午好🌞!";
} else if (date.getHours() >= 12 && date.getHours() < 18) { } else if (date.getHours() >= 12 && date.getHours() < 18) {
tipsType.value = 3 tipsType.value = 3;
return "下午好☕!"; return "下午好☕!";
} else if (date.getHours() >= 18 && date.getHours() < 24) { } else if (date.getHours() >= 18 && date.getHours() < 24) {
tipsType.value = 4 tipsType.value = 4;
return "晚上好🌃!"; return "晚上好🌃!";
} else if (date.getHours() >= 0 && date.getHours() < 6) { } else if (date.getHours() >= 0 && date.getHours() < 6) {
tipsType.value = 5 tipsType.value = 5;
return "偷偷向银河要了一把碎星,只等你闭上眼睛撒入你的梦中,晚安🌛!"; return "偷偷向银河要了一把碎星,只等你闭上眼睛撒入你的梦中,晚安🌛!";
} }
}); });
const {isFullscreen, toggle} = useFullscreen(); const { isFullscreen, toggle } = useFullscreen();
/** /**
* 注销 * 注销
@ -45,22 +45,20 @@ function logout() {
type: "warning", type: "warning",
}).then(() => { }).then(() => {
userStore userStore
.logout() .logout()
.then(() => { .then(() => {
tagsViewStore.delAllViews(); tagsViewStore.delAllViews();
}) })
.then(() => { .then(() => {
router.push(`/login?redirect=${route.fullPath}`); router.push(`/login?redirect=${route.fullPath}`);
}); });
}); });
} }
/** /**
* 打开个人资料 * 打开个人资料
*/ */
const openMyContBox = () => { const openMyContBox = () => {};
}
/** /**
* 修改个人密码 * 修改个人密码
*/ */
@ -68,17 +66,15 @@ const editMyPasswordForm = () => {
// console.log(""); // console.log("");
myPasswordBoxIsShow.value = true; myPasswordBoxIsShow.value = true;
// console.log("",myPasswordBoxIsShow.value ); // console.log("",myPasswordBoxIsShow.value );
} };
</script> </script>
<template> <template>
<div class="top"> <div class="top">
<div class="logo"> <div class="logo">
<img src="../../assets/images/logo.png"> <img src="../../assets/images/logo.png" />
</div> </div>
<div class="flex"> <div class="flex">
<!-- &lt;!&ndash; 导航栏设置(窄屏隐藏)&ndash;&gt;--> <!-- &lt;!&ndash; 导航栏设置(窄屏隐藏)&ndash;&gt;-->
<div v-if="device !== 'mobile'" class="setting-container"> <div v-if="device !== 'mobile'" class="setting-container">
<!-- <el-text v-if="tipsType==1" class="mx-1" type="success">{{ greetings }}</el-text>--> <!-- <el-text v-if="tipsType==1" class="mx-1" type="success">{{ greetings }}</el-text>-->
@ -88,22 +84,20 @@ const editMyPasswordForm = () => {
<!-- <el-text v-if="tipsType==5" class="mx-1">{{ greetings }}</el-text>--> <!-- <el-text v-if="tipsType==5" class="mx-1">{{ greetings }}</el-text>-->
<!--全屏 --> <!--全屏 -->
<div class="setting-item" @click="toggle"> <div class="setting-item" @click="toggle">
<svg-icon <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
/>
</div> </div>
<!-- 布局大小 --> <!-- 布局大小 -->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select class="setting-item"/> <size-select class="setting-item" />
</el-tooltip> </el-tooltip>
<!--语言选择--> <!--语言选择-->
<lang-select class="setting-item"/> <lang-select class="setting-item" />
</div> </div>
<!-- &lt;!&ndash; 用户头像 &ndash;&gt;--> <!-- &lt;!&ndash; 用户头像 &ndash;&gt;-->
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<div class="avatar-container"> <div class="avatar-container">
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'"/> <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
<span style="padding: 0 10px">{{ userStore.nickname }}</span> <span style="padding: 0 10px">{{ userStore.nickname }}</span>
<arrow-down class="w-3 h-3"></arrow-down> <arrow-down class="w-3 h-3"></arrow-down>
</div> </div>
@ -112,8 +106,12 @@ const editMyPasswordForm = () => {
<router-link to="/"> <router-link to="/">
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item> <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item @click="openMyContBox">{{ $t("navbar.archives") }}</el-dropdown-item> <el-dropdown-item @click="openMyContBox">{{
<el-dropdown-item @click="editMyPasswordForm">{{ $t("navbar.password") }}</el-dropdown-item> $t("navbar.archives")
}}</el-dropdown-item>
<el-dropdown-item @click="editMyPasswordForm">{{
$t("navbar.password")
}}</el-dropdown-item>
<el-dropdown-item divided @click="logout"> <el-dropdown-item divided @click="logout">
{{ $t("navbar.logout") }} {{ $t("navbar.logout") }}
</el-dropdown-item> </el-dropdown-item>
@ -121,14 +119,14 @@ const editMyPasswordForm = () => {
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<EditMyPassword v-model:editPasswordIsShow="myPasswordBoxIsShow"/> <EditMyPassword v-model:editPasswordIsShow="myPasswordBoxIsShow" />
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.top { .top {
height: 68px; height: 68px;
background: #1E5EFF; background: #1e5eff;
position: fixed; position: fixed;
padding: 0 20px; padding: 0 20px;
top: 0; top: 0;

166
src/layout/index.vue

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, watchEffect} from "vue"; import { computed, watchEffect } from "vue";
import {useWindowSize} from "@vueuse/core"; import { useWindowSize } from "@vueuse/core";
import {AppMain, Navbar, Settings, TagsView} from "./components/index"; import { AppMain, Navbar, Settings, TagsView } from "./components/index";
import Sidebar from "./components/Sidebar/index.vue"; import Sidebar from "./components/Sidebar/index.vue";
import RightPanel from "@/components/RightPanel/index.vue"; import RightPanel from "@/components/RightPanel/index.vue";
import Top from './components/Top.vue' import Top from "./components/Top.vue";
import {useAppStore} from "@/store/modules/app"; import { useAppStore } from "@/store/modules/app";
import {useSettingsStore} from "@/store/modules/settings"; import { useSettingsStore } from "@/store/modules/settings";
const {width} = useWindowSize(); const { width } = useWindowSize();
/** /**
* 响应式布局容器固定宽度 * 响应式布局容器固定宽度
@ -28,109 +28,105 @@ const showTagsView = computed(() => settingsStore.tagsView);
const showSettings = computed(() => settingsStore.showSettings); const showSettings = computed(() => settingsStore.showSettings);
const classObj = computed(() => ({ const classObj = computed(() => ({
hideSidebar: !appStore.sidebar.opened, hideSidebar: !appStore.sidebar.opened,
openSidebar: appStore.sidebar.opened, openSidebar: appStore.sidebar.opened,
withoutAnimation: appStore.sidebar.withoutAnimation, withoutAnimation: appStore.sidebar.withoutAnimation,
mobile: appStore.device === "mobile", mobile: appStore.device === "mobile",
})); }));
watchEffect(() => { watchEffect(() => {
if (width.value < WIDTH) { if (width.value < WIDTH) {
appStore.toggleDevice("mobile"); appStore.toggleDevice("mobile");
appStore.closeSideBar(true); appStore.closeSideBar(true);
} else { } else {
appStore.toggleDevice("desktop"); appStore.toggleDevice("desktop");
if (width.value >= 1200) { if (width.value >= 1200) {
// //
appStore.openSideBar(true); appStore.openSideBar(true);
} else { } else {
appStore.closeSideBar(true); appStore.closeSideBar(true);
} }
} }
}); });
function handleOutsideClick() { function handleOutsideClick() {
appStore.closeSideBar(false); appStore.closeSideBar(false);
} }
</script> </script>
<template> <template>
<div :class="classObj" class="app-wrapper">
<div :class="classObj" class="app-wrapper"> <!-- 手机设备侧边栏打开遮罩层 -->
<div
<!-- 手机设备侧边栏打开遮罩层 --> v-if="classObj.mobile && classObj.openSidebar"
<div class="drawer-bg"
v-if="classObj.mobile && classObj.openSidebar" @click="handleOutsideClick"
class="drawer-bg" ></div>
@click="handleOutsideClick" <top></top>
></div>
<top></top> <Sidebar class="sidebar-container" />
<div :class="{ hasTagsView: showTagsView }" class="main-container">
<Sidebar class="sidebar-container"/> <div :class="{ 'fixed-header': fixedHeader }" style="margin: 10px 20px 0 20px">
<navbar></navbar>
<div :class="{ hasTagsView: showTagsView }" class="main-container"> <tags-view v-if="showTagsView" />
<div :class="{ 'fixed-header': fixedHeader }" style="margin: 10px 20px 0 20px;"> </div>
<navbar></navbar>
<tags-view v-if="showTagsView"/> <!--主页面-->
</div> <app-main />
<!--主页面--> <!-- 设置面板 -->
<app-main/> <RightPanel v-if="showSettings">
<settings />
<!-- 设置面板 --> </RightPanel>
<RightPanel v-if="showSettings"> </div>
<settings/> </div>
</RightPanel>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-wrapper { .app-wrapper {
background: #F5F6FA; background: #f5f6fa;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
// &::after { // &::after {
// display: table; // display: table;
// clear: both; // clear: both;
// content: ""; // content: "";
// } // }
&.mobile.openSidebar {
&.mobile.openSidebar { position: fixed;
position: fixed; top: 0;
top: 0; }
}
} }
.fixed-header { .fixed-header {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$sideBarWidth}); width: calc(100% - #{$sideBarWidth});
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
} }
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }
.drawer-bg { .drawer-bg {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 999; z-index: 999;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;
} }
</style> </style>

178
src/views/dashboard/index.vue

@ -3,127 +3,123 @@
@ 时间: 2023-11-06 13:39:13 @ 时间: 2023-11-06 13:39:13
@ 备注: 首页 @ 备注: 首页
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import * as echarts from 'echarts'; // import * as echarts from "echarts"; //
import { useUserStore } from "@/store/modules/user"; import { useUserStore } from "@/store/modules/user";
import { orgInfo } from "@/api/displayboardapi/types";
import { orgInfo } from '@/api/displayboardapi/types' import {
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' getOrgChiled,
getCompanyDeparment,
targetListForDepartment,
} from "@/api/displayboardapi/indexapi";
import UserInfo from "@/views/dashboard/components/userinfo.vue"; import UserInfo from "@/views/dashboard/components/userinfo.vue";
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; import SanLianpIng from "@/views/dashboard/components/sanlianping.vue";
import EducationChart from "@/views/dashboard/components/education.vue"; import EducationChart from "@/views/dashboard/components/education.vue";
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; import AllOrgYear from "@/views/dashboard/components/allorgyear.vue";
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; import OrgUserAge from "@/views/dashboard/components/orguserage.vue";
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; import OrgEducation from "@/views/dashboard/components/orgeducation.vue";
import Application from "@/views/dashboard/components/application.vue"; import Application from "@/views/dashboard/components/application.vue";
import HostNews from "@/views/dashboard/components/hostnews.vue"; import HostNews from "@/views/dashboard/components/hostnews.vue";
const userStore = useUserStore(); const userStore = useUserStore();
const orgListCont = ref<orgInfo[]>([]) const orgListCont = ref<orgInfo[]>([]);
const educationOrgId = ref<number>(309) const educationOrgId = ref<number>(309);
const masterBody = ref<any>(null) const masterBody = ref<any>(null);
const drawerWidht = ref<any>() const drawerWidht = ref<any>();
/** /**
* 获取行政组织 * 获取行政组织
*/ */
function getOrgList(){ function getOrgList() {
getOrgChiled({id:313}) getOrgChiled({ id: 313 }).then(({ data }) => {
.then(( {data} )=>{ // console.log("-2-->",data)
// console.log("-2-->",data) orgListCont.value = data.list;
orgListCont.value = data.list educationOrgId.value = data.current;
educationOrgId.value = data.current });
})
} }
const orgAllYears = ref<any>(); //
const oenOrg = ref<any>(); //
const orgAllYears = ref<any>() //
const oenOrg = ref<any>() //
// //
onMounted(() => { onMounted(() => {
drawerWidht.value = masterBody.value?.clientWidth;
drawerWidht.value = masterBody.value?.clientWidth getOrgList();
getOrgList(); // console.log("----100---->",drawerWidht.value)
// console.log("----100---->",drawerWidht.value) });
})
</script> </script>
<template> <template>
<div ref="masterBody" class="app_container"> <div ref="masterBody" class="app_container">
<div class="first-main"> <div class="first-main">
<div class="main-width74"> <div class="main-width74">
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> <AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
</div> </div>
<div class="main-width26"> <div class="main-width26">
<HostNews v-model:drawer-widht="drawerWidht" /> <HostNews v-model:drawer-widht="drawerWidht" />
</div> </div>
</div> </div>
<div class="cart_top_juLi first-main"> <div class="cart_top_juLi first-main">
<div class="main-width74 first-main"> <div class="main-width74 first-main">
<div class="main-width50"> <div class="main-width50">
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> <OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
</div> </div>
<div class="main-width50"> <div class="main-width50">
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> <OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
</div> </div>
</div> </div>
<div class="main-width26"> <div class="main-width26">
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> <Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
</div> </div>
</div> </div>
<el-row :gutter="10" class="cart_top_juLi" > <el-row :gutter="10" class="cart_top_juLi">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="readback"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="readback">
<SanLianpIng /> <SanLianpIng />
</el-col> </el-col>
</el-row> </el-row>
</div>
</div>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.app_container{ .app_container {
padding: 10px 20px 0px 20px; padding: 10px 20px 0px 20px;
height: calc(100% - 10px); height: calc(100% - 10px);
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
} }
.orgAllMothsTitle{ .orgAllMothsTitle {
width:100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content:space-between; justify-content: space-between;
} }
.span_icon_left{ .span_icon_left {
margin-right:10px; margin-right: 10px;
} }
.cart_top_juLi{ .cart_top_juLi {
margin-top:20px; margin-top: 20px;
} }
.titleInfo{ .titleInfo {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.first-main{ .first-main {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 330px; height: 330px;
} }
.main-width74{ .main-width74 {
width: calc(100% - 370px); width: calc(100% - 370px);
height: 100%; height: 100%;
} }
.main-width26{ .main-width26 {
width: 350px; width: 350px;
height: 100%; height: 100%;
} }
.main-width50{ .main-width50 {
width: calc(50% - 10px); width: calc(50% - 10px);
height: 100%; height: 100%;
} }
</style> </style>

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