28 changed files with 5633 additions and 413 deletions
@ -0,0 +1,3 @@ |
|||
export const formControlProject = (val:any) =>{ |
|||
return [] |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 15:12:45 |
|||
@ 备注: 自定义表单组件页面(App专用) |
|||
--> |
|||
<script lang='ts' setup> |
|||
import controlListData from '@/components/DesignForm/assembly' |
|||
import Draggable from 'vuedraggable-es' |
|||
import '@/assets/iconfont/iconfont.css' |
|||
|
|||
//引入页面 |
|||
import FormVersion from '@/components/DesignForm/formVersion.vue'; |
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
tableKey?: number | string, |
|||
signCode?: number | string, |
|||
}>(), |
|||
{} |
|||
) |
|||
const designType = inject('formDesignType') as string //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。 |
|||
// 默认搜索允许显示的字段 |
|||
const searchField = [ |
|||
'input', |
|||
'radio', |
|||
'checkbox', |
|||
'select', |
|||
'datePicker', |
|||
'timePicker', |
|||
'inputNumber', |
|||
'cascader', |
|||
'component', |
|||
'button' |
|||
] |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 10:58:56 |
|||
@ 功能: 表单组件数据 |
|||
*/ |
|||
const controlList = computed(() => { |
|||
if (designType === 'search') { |
|||
// 只返回基础字段 |
|||
const temp: any = [] |
|||
controlListData.forEach((item: any) => { |
|||
if (item.children) { |
|||
const filter = item.children.filter((ch: any) => { |
|||
return searchField.includes(ch.type) |
|||
}) |
|||
if (filter && filter.length) { |
|||
temp.push({ title: item.title, children: filter }) |
|||
} |
|||
} |
|||
}) |
|||
return temp |
|||
} else { |
|||
return controlListData |
|||
} |
|||
}) |
|||
const tableVersion = ref() //版本显示器 |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'versionUpdateForm', value: string): void |
|||
}>() |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:36:59 |
|||
@ 功能: 启用和禁用版本 |
|||
*/ |
|||
const enableOrDisable = (val?:any) =>{ |
|||
console.log("启用和禁用版本",val) |
|||
emits('versionUpdateForm', val) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:40:15 |
|||
@ 功能: 打开版本选择页面 |
|||
*/ |
|||
const useVersionClick = () => { |
|||
tableVersion.value.open() |
|||
} |
|||
const activities = [ |
|||
{ |
|||
content: 'Event start', |
|||
timestamp: '2018-04-15', |
|||
}, |
|||
{ |
|||
content: 'Approved', |
|||
timestamp: '2018-04-13', |
|||
}, |
|||
{ |
|||
content: 'Success', |
|||
timestamp: '2018-04-11', |
|||
}, |
|||
] |
|||
</script> |
|||
<template> |
|||
<div class="components-list"> |
|||
<div v-for="(list, index) in controlList" :key="index"> |
|||
<div class="title"> |
|||
{{ list.title }} |
|||
<div |
|||
class="template" |
|||
@click="useVersionClick" |
|||
> |
|||
版本 |
|||
</div> |
|||
</div> |
|||
<draggable |
|||
v-model="list.children" |
|||
tag="ul" |
|||
:group="{ name: 'form', pull: 'clone', put: false }" |
|||
ghost-class="ghost" |
|||
:sort="false" |
|||
:clone="clone" |
|||
item-key="key123" |
|||
> |
|||
|
|||
<template #item="{ element }"> |
|||
<li class="fontIcon" :class="[element.type]"> |
|||
<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i> |
|||
<i v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i> |
|||
<span :title="element.label">{{ element.label }}</span> |
|||
</li> |
|||
</template> |
|||
</draggable> |
|||
</div> |
|||
</div> |
|||
<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" /> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.tab_pane_body{ |
|||
text-align: center; |
|||
|
|||
} |
|||
.fontIcon{ |
|||
i{ |
|||
padding: 4px 0px 0 0px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,141 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 10:47:19 |
|||
@ 备注: 自定义表单组件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import controlListData from '@/components/DesignForm/assembly' |
|||
import Draggable from 'vuedraggable-es' |
|||
import '@/assets/iconfont/iconfont.css' |
|||
|
|||
//引入页面 |
|||
import FormVersion from '@/components/DesignForm/formVersion.vue'; |
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
tableKey?: number | string, |
|||
signCode?: number | string, |
|||
}>(), |
|||
{} |
|||
) |
|||
const designType = inject('formDesignType') as string //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。 |
|||
// 默认搜索允许显示的字段 |
|||
const searchField = [ |
|||
'input', |
|||
'radio', |
|||
'checkbox', |
|||
'select', |
|||
'datePicker', |
|||
'timePicker', |
|||
'inputNumber', |
|||
'cascader', |
|||
'component', |
|||
'button' |
|||
] |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 10:58:56 |
|||
@ 功能: 表单组件数据 |
|||
*/ |
|||
const controlList = computed(() => { |
|||
if (designType === 'search') { |
|||
// 只返回基础字段 |
|||
const temp: any = [] |
|||
controlListData.forEach((item: any) => { |
|||
if (item.children) { |
|||
const filter = item.children.filter((ch: any) => { |
|||
return searchField.includes(ch.type) |
|||
}) |
|||
if (filter && filter.length) { |
|||
temp.push({ title: item.title, children: filter }) |
|||
} |
|||
} |
|||
}) |
|||
return temp |
|||
} else { |
|||
return controlListData |
|||
} |
|||
}) |
|||
const tableVersion = ref() //版本显示器 |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'versionUpdateForm', value: string): void |
|||
}>() |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:36:59 |
|||
@ 功能: 启用和禁用版本 |
|||
*/ |
|||
const enableOrDisable = (val?:any) =>{ |
|||
console.log("启用和禁用版本",val) |
|||
emits('versionUpdateForm', val) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:40:15 |
|||
@ 功能: 打开版本选择页面 |
|||
*/ |
|||
const useVersionClick = () => { |
|||
tableVersion.value.open() |
|||
} |
|||
const activities = [ |
|||
{ |
|||
content: 'Event start', |
|||
timestamp: '2018-04-15', |
|||
}, |
|||
{ |
|||
content: 'Approved', |
|||
timestamp: '2018-04-13', |
|||
}, |
|||
{ |
|||
content: 'Success', |
|||
timestamp: '2018-04-11', |
|||
}, |
|||
] |
|||
</script> |
|||
<template> |
|||
<div class="components-list"> |
|||
<div v-for="(list, index) in controlList" :key="index"> |
|||
<div class="title"> |
|||
{{ list.title }} |
|||
<div |
|||
class="template" |
|||
@click="useVersionClick" |
|||
> |
|||
版本 |
|||
</div> |
|||
</div> |
|||
<draggable |
|||
v-model="list.children" |
|||
tag="ul" |
|||
:group="{ name: 'form', pull: 'clone', put: false }" |
|||
ghost-class="ghost" |
|||
:sort="false" |
|||
:clone="clone" |
|||
item-key="key123" |
|||
> |
|||
|
|||
<template #item="{ element }"> |
|||
<li class="fontIcon" :class="[element.type]"> |
|||
<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i> |
|||
<i v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i> |
|||
<span :title="element.label">{{ element.label }}</span> |
|||
</li> |
|||
</template> |
|||
</draggable> |
|||
</div> |
|||
</div> |
|||
<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" /> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.tab_pane_body{ |
|||
text-align: center; |
|||
|
|||
} |
|||
.fontIcon{ |
|||
i{ |
|||
padding: 4px 0px 0 0px; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,139 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-08 14:52:03 |
|||
@ 备注: 版本管理 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { customerFormVersionCont } from '@/api/DesignForm/type' |
|||
import { haveCustomerFormVersion,enableVersion } from '@/api/DesignForm/requestapi' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
tableKey?: number | string, |
|||
signCode?: number | string, |
|||
}>(), |
|||
{} |
|||
) |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'click', value: string): void |
|||
(e: 'enableOrDisable', value: string): void |
|||
}>() |
|||
const isOpen = ref(false) |
|||
const versionList = ref<customerFormVersionCont[]>([]) //版本内容列表 |
|||
const loading = ref(false) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 14:21:25 |
|||
@ 功能: 编辑状态 |
|||
*/ |
|||
const setupStatus = (val:any) =>{ |
|||
enableVersion({id:val.id.toString()}) |
|||
.then(() =>{ |
|||
|
|||
init() |
|||
emits('enableOrDisable', val.id.toString()) |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-08 14:55:50 |
|||
@ 功能: 打开页面 |
|||
*/ |
|||
const open = () => { |
|||
console.log("open",isOpen) |
|||
isOpen.value = true |
|||
init() |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-08 14:56:13 |
|||
@ 功能: 初始化数据 |
|||
*/ |
|||
const init = () => { |
|||
loading.value= true |
|||
haveCustomerFormVersion({id:props.tableKey}) |
|||
.then(({data})=>{ |
|||
console.log("加载异常-------------->",data) |
|||
versionList.value = data |
|||
// if(data.length > 0){ |
|||
// data.forEach((item:any) => { |
|||
// if(item.status == 1){ |
|||
// versionId.value = item.id.toString() |
|||
// emits('update:formVersion', item.id.toString()) |
|||
// } |
|||
// }); |
|||
// } |
|||
}) |
|||
.finally(()=>{loading.value= false}) |
|||
} |
|||
|
|||
defineExpose({ |
|||
open |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 14:03:54 |
|||
@ 功能: 设置颜色 |
|||
*/ |
|||
const setColor = (val:number) => { |
|||
if(val == 1){ |
|||
return "#67C23A" |
|||
}else{ |
|||
return "#F56C6C" |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<div |
|||
v-if="isOpen" |
|||
class="use-template active" |
|||
v-loading="loading" |
|||
> |
|||
|
|||
<span class="close icon-close" @click="isOpen = false"></span> |
|||
<div v-if="versionList.length === 0" class="no-date">暂无版本</div> |
|||
<div v-else class="list"> |
|||
<el-scrollbar class="timeLineBox"> |
|||
<el-timeline style="max-width: 600px"> |
|||
<el-timeline-item v-for="item in versionList" :key="item.id" placement="top" :color="setColor(item.status)"> |
|||
<el-card v-if="item.status==1" > |
|||
<el-row> |
|||
<el-col>版本：V{{ item.version }}</el-col> |
|||
<el-col>创建人：{{ item.createrName }}</el-col> |
|||
<el-col>创建时间：{{ item.dayTime }}</el-col> |
|||
<el-col style="text-align:right"><el-button text type="success" size="small" disabled>使用中</el-button></el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<el-card v-else > |
|||
<el-row> |
|||
<el-col>版本：V{{ item.version }}</el-col> |
|||
<el-col>创建人：{{ item.createrName }}</el-col> |
|||
<el-col>创建时间：{{ item.dayTime }}</el-col> |
|||
<el-col style="text-align:right"><el-button type="primary" size="small" @click="setupStatus(item)">启用</el-button></el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-timeline-item> |
|||
|
|||
|
|||
</el-timeline> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.use-template{ |
|||
width:250px; |
|||
top: 40px; |
|||
.list{ |
|||
padding: 30px 5px; |
|||
} |
|||
} |
|||
.timeLineBox{ |
|||
height: calc(100vh - 80px); |
|||
::v-deep .el-card__body{ |
|||
padding:5px; |
|||
// color: #FFF; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-10 09:38:51 |
|||
@ 功能: 数字规则列表 |
|||
*/ |
|||
interface NumberValidateTypes { |
|||
type: string |
|||
label: string |
|||
msg: string |
|||
} |
|||
const NumberValidateConfig: NumberValidateTypes[] = [ |
|||
{ |
|||
type: 'time', |
|||
label: '时间', |
|||
msg:'请选择时间格式' |
|||
}, |
|||
{ |
|||
type: 'text', |
|||
label: '自定义字符', |
|||
msg:'请输入自定义字符' |
|||
}, |
|||
{ |
|||
type: 'serialnumber', |
|||
label: '流水序号', |
|||
msg:'流水号起始值' |
|||
}, |
|||
{ |
|||
type: 'randomnumber', |
|||
label: '随机数', |
|||
msg:'请输入随机数位数' |
|||
} |
|||
] |
|||
export default NumberValidateConfig |
|||
@ -0,0 +1,104 @@ |
|||
// 快速添加 内置校验规则
|
|||
interface ValidateTypes { |
|||
type: string |
|||
label: string |
|||
regExp?: RegExp |
|||
message?: string |
|||
} |
|||
const validateConfig: ValidateTypes[] = [ |
|||
{ |
|||
type: 'required', |
|||
label: '必填', |
|||
regExp: /^\s*$/, |
|||
message: '必填项' |
|||
}, |
|||
{ |
|||
type: 'mobile', |
|||
label: '手机号码', |
|||
regExp: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, |
|||
message: '请输入手机号码' |
|||
}, |
|||
{ |
|||
type: 'tel', |
|||
label: '固话', |
|||
regExp: /^0\d{2,3}-\d{7,8}$/, |
|||
message: '请输入固定电话号码' |
|||
}, |
|||
{ |
|||
type: 'phone', |
|||
label: '固话或手机', |
|||
regExp: /^((0\d{2,3}(-?)\d{7,8})|(1[3456789]\d{9}))$/, |
|||
message: '请输入固定电话号码或手机号' |
|||
}, |
|||
{ |
|||
type: 'email', |
|||
label: '邮箱', |
|||
regExp: /^[a-z0-9A-Z._%-]+@([a-z0-9A-Z-]+\.)+[a-zA-Z]{2,4}$/, |
|||
message: '请输入邮箱地址' |
|||
}, |
|||
{ |
|||
type: 'int', |
|||
label: '正整数', |
|||
regExp: /^[0-9]*[1-9][0-9]*$/, |
|||
message: '请输入正整数' |
|||
}, |
|||
{ |
|||
type: 'number', |
|||
label: '数字', |
|||
regExp: /^\d+(\.\d+)?$/, |
|||
message: '请输入数字' |
|||
}, |
|||
{ |
|||
type: 'money', |
|||
label: '金额', |
|||
regExp: /^[0-9]+\.?[0-9]{0,2}$/, |
|||
message: '请输入正确的金额，最多两位小数' |
|||
}, |
|||
{ |
|||
type: 'card', |
|||
label: '身份证', |
|||
regExp: |
|||
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, |
|||
message: '请输入身份证号' |
|||
}, |
|||
{ |
|||
type: 'cn', |
|||
label: '中文', |
|||
regExp: /[\u4e00-\u9fa5]+/, |
|||
message: '请输入中文' |
|||
}, |
|||
{ |
|||
type: 'numberLetter', |
|||
label: '数字字母', |
|||
regExp: /[0-9a-zA-Z]$/, |
|||
message: '请输入数字或字母' |
|||
}, |
|||
{ |
|||
type: 'url', |
|||
label: '网址', |
|||
regExp: /^https?:\/\/((.)+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?.(\?)?)*)*$/, |
|||
message: '请输入网址' |
|||
}, |
|||
{ |
|||
type: 'longitude', |
|||
label: '经度', |
|||
regExp: /^[-+]?(0?\d{1,2}\.\d{1,10}|1[0-7]?\d\.\d{1,10}|180\.0{1,10})$/, |
|||
message: '请输入正确的经度' |
|||
}, |
|||
{ |
|||
type: 'latitude', |
|||
label: '纬度', |
|||
regExp: /^[-+]?([0-8]?\d{1}\.\d{1,10}|90\.0{1,10})$/, |
|||
message: '请输入正确的纬度' |
|||
}, |
|||
{ |
|||
type: 'rules', |
|||
label: '自定义正则', |
|||
message:"" |
|||
}, |
|||
{ |
|||
type: 'methods', |
|||
label: '自定义方法' |
|||
} |
|||
] |
|||
export default validateConfig |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,146 +1,250 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; //引入图形界面 |
|||
<script lang="ts"> |
|||
export default { name: "Dashboard" }; |
|||
</script> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|||
|
|||
|
|||
import { orgInfo } from '@/api/displayboardapi/types' |
|||
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' |
|||
|
|||
import UserInfo from "@/views/dashboard/components/userinfo.vue"; |
|||
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; |
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
|||
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
|||
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
|||
import Application from "@/views/dashboard/components/application.vue"; |
|||
import HostNews from "@/views/dashboard/components/hostnews.vue"; |
|||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BarChart from "./components/BarChart.vue"; |
|||
import PieChart from "./components/PieChart.vue"; |
|||
import RadarChart from "./components/RadarChart.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
const orgListCont = ref<orgInfo[]>([]) |
|||
const educationOrgId = ref<number>(309) |
|||
const masterBody = ref<any>(null) |
|||
const drawerWidht = ref<any>() |
|||
/** |
|||
* 获取行政组织 |
|||
*/ |
|||
function getOrgList(){ |
|||
getOrgChiled({id:313}) |
|||
.then(( {data} )=>{ |
|||
console.log("获取行政组织-2-->",data) |
|||
orgListCont.value = data.list |
|||
educationOrgId.value = data.current |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const orgAllYears = ref<any>() //当前年 |
|||
|
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
|
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
|
|||
drawerWidht.value = masterBody.value?.clientWidth |
|||
getOrgList(); |
|||
// console.log("热门新闻----100---->",drawerWidht.value) |
|||
}) |
|||
const date: Date = new Date(); |
|||
|
|||
const greetings = computed(() => { |
|||
if (date.getHours() >= 6 && date.getHours() < 8) { |
|||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
|||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
|||
return "上午好🌞！"; |
|||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
|||
return "下午好☕！"; |
|||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
|||
return "晚上好🌃！"; |
|||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
|||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|||
} |
|||
}); |
|||
|
|||
const duration = 5000; |
|||
|
|||
// 收入金额 |
|||
const amount = ref(0); |
|||
const amountOutput = useTransition(amount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
amount.value = 2000; |
|||
|
|||
// 访问数 |
|||
const visitCount = ref(0); |
|||
const visitCountOutput = useTransition(visitCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
visitCount.value = 2000; |
|||
|
|||
//消息数 |
|||
const messageCount = ref(0); |
|||
const messageCountOutput = useTransition(messageCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
messageCount.value = 2000; |
|||
|
|||
// 订单数 |
|||
const orderCount = ref(0); |
|||
const orderCountOutput = useTransition(orderCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
orderCount.value = 2000; |
|||
</script> |
|||
<template> |
|||
<div ref="masterBody" class="app_container"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<HostNews v-model:drawer-widht="drawerWidht" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<SanLianpIng /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<!-- github角标 --> |
|||
|
|||
|
|||
<!-- 用户信息 --> |
|||
<el-row class="mb-8"> |
|||
<el-card class="w-full"> |
|||
<div class="flex justify-between flex-wrap"> |
|||
<div class="flex items-center"> |
|||
<img |
|||
class="user-avatar" |
|||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|||
/> |
|||
<span class="ml-[10px] text-[16px]"> |
|||
{{ userStore.nickname }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="leading-[40px]"> |
|||
{{ greetings }} |
|||
</div> |
|||
|
|||
<div v-if="false" class="space-x-2 flex items-center" > |
|||
<el-link |
|||
target="_blank" |
|||
type="danger" |
|||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|||
>官方0到1教程</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="success" |
|||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
|||
>Gitee源码</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="primary" |
|||
href="https://github.com/youlaitech/vue3-element-admin" |
|||
>GitHub源码 |
|||
</el-link> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-row> |
|||
|
|||
<!-- 数据卡片 --> |
|||
<el-row :gutter="40" class="mb-4"> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="uv" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(visitCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<!--消息数--> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="message" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(messageCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="money" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(amountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="shopping" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(orderCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- Echarts 图表 --> |
|||
<el-row :gutter="40"> |
|||
<el-col :sm="24" :lg="8" class="mb-4"> |
|||
<BarChart |
|||
id="barChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<PieChart |
|||
id="pieChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<RadarChart |
|||
id="radarChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app_container{ |
|||
padding: 10px 20px 0px 20px; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
<style lang="scss" scoped> |
|||
.dashboard-container { |
|||
position: relative; |
|||
padding: 24px; |
|||
|
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.github-corner { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
border: 0; |
|||
} |
|||
|
|||
.data-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 20px; |
|||
font-weight: bold; |
|||
color: var(--el-text-color-regular); |
|||
background: var(--el-bg-color-overlay); |
|||
border-color: var(--el-border-color); |
|||
box-shadow: var(--el-box-shadow-dark); |
|||
} |
|||
|
|||
.svg-icon { |
|||
fill: currentcolor !important; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,146 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; //引入图形界面 |
|||
|
|||
import { useUserStore } from "@/store/modules/user"; |
|||
|
|||
|
|||
import { orgInfo } from '@/api/displayboardapi/types' |
|||
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' |
|||
|
|||
import UserInfo from "@/views/dashboard/components/userinfo.vue"; |
|||
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; |
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
|||
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
|||
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
|||
import Application from "@/views/dashboard/components/application.vue"; |
|||
import HostNews from "@/views/dashboard/components/hostnews.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
const orgListCont = ref<orgInfo[]>([]) |
|||
const educationOrgId = ref<number>(309) |
|||
const masterBody = ref<any>(null) |
|||
const drawerWidht = ref<any>() |
|||
/** |
|||
* 获取行政组织 |
|||
*/ |
|||
function getOrgList(){ |
|||
getOrgChiled({id:313}) |
|||
.then(( {data} )=>{ |
|||
console.log("获取行政组织-2-->",data) |
|||
orgListCont.value = data.list |
|||
educationOrgId.value = data.current |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const orgAllYears = ref<any>() //当前年 |
|||
|
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
|
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
|
|||
drawerWidht.value = masterBody.value?.clientWidth |
|||
getOrgList(); |
|||
// console.log("热门新闻----100---->",drawerWidht.value) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div ref="masterBody" class="app_container"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<HostNews v-model:drawer-widht="drawerWidht" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<SanLianpIng /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app_container{ |
|||
padding: 10px 20px 0px 20px; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -1,250 +0,0 @@ |
|||
<script lang="ts"> |
|||
export default { name: "Dashboard" }; |
|||
</script> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|||
|
|||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BarChart from "./components/BarChart.vue"; |
|||
import PieChart from "./components/PieChart.vue"; |
|||
import RadarChart from "./components/RadarChart.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
|
|||
const date: Date = new Date(); |
|||
|
|||
const greetings = computed(() => { |
|||
if (date.getHours() >= 6 && date.getHours() < 8) { |
|||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
|||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
|||
return "上午好🌞！"; |
|||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
|||
return "下午好☕！"; |
|||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
|||
return "晚上好🌃！"; |
|||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
|||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|||
} |
|||
}); |
|||
|
|||
const duration = 5000; |
|||
|
|||
// 收入金额 |
|||
const amount = ref(0); |
|||
const amountOutput = useTransition(amount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
amount.value = 2000; |
|||
|
|||
// 访问数 |
|||
const visitCount = ref(0); |
|||
const visitCountOutput = useTransition(visitCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
visitCount.value = 2000; |
|||
|
|||
//消息数 |
|||
const messageCount = ref(0); |
|||
const messageCountOutput = useTransition(messageCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
messageCount.value = 2000; |
|||
|
|||
// 订单数 |
|||
const orderCount = ref(0); |
|||
const orderCountOutput = useTransition(orderCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
orderCount.value = 2000; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<!-- github角标 --> |
|||
|
|||
|
|||
<!-- 用户信息 --> |
|||
<el-row class="mb-8"> |
|||
<el-card class="w-full"> |
|||
<div class="flex justify-between flex-wrap"> |
|||
<div class="flex items-center"> |
|||
<img |
|||
class="user-avatar" |
|||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|||
/> |
|||
<span class="ml-[10px] text-[16px]"> |
|||
{{ userStore.nickname }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="leading-[40px]"> |
|||
{{ greetings }} |
|||
</div> |
|||
|
|||
<div v-if="false" class="space-x-2 flex items-center" > |
|||
<el-link |
|||
target="_blank" |
|||
type="danger" |
|||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|||
>官方0到1教程</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="success" |
|||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
|||
>Gitee源码</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="primary" |
|||
href="https://github.com/youlaitech/vue3-element-admin" |
|||
>GitHub源码 |
|||
</el-link> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-row> |
|||
|
|||
<!-- 数据卡片 --> |
|||
<el-row :gutter="40" class="mb-4"> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="uv" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(visitCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<!--消息数--> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="message" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(messageCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="money" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(amountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="shopping" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(orderCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- Echarts 图表 --> |
|||
<el-row :gutter="40"> |
|||
<el-col :sm="24" :lg="8" class="mb-4"> |
|||
<BarChart |
|||
id="barChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<PieChart |
|||
id="pieChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<RadarChart |
|||
id="radarChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-container { |
|||
position: relative; |
|||
padding: 24px; |
|||
|
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.github-corner { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
border: 0; |
|||
} |
|||
|
|||
.data-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 20px; |
|||
font-weight: bold; |
|||
color: var(--el-text-color-regular); |
|||
background: var(--el-bg-color-overlay); |
|||
border-color: var(--el-border-color); |
|||
box-shadow: var(--el-box-shadow-dark); |
|||
} |
|||
|
|||
.svg-icon { |
|||
fill: currentcolor !important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,17 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-07 15:07:51 |
|||
@ 备注: 表单流程 |
|||
--> |
|||
<script lang='ts' setup> |
|||
|
|||
</script> |
|||
<template> |
|||
<el-main class="mainBox">Main</el-main> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.mainBox{ |
|||
padding: 0; |
|||
overflow-y : auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,135 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-07 15:05:29 |
|||
@ 备注: 自定义表单 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|||
import { customerFormVersionCont } from '@/api/DesignForm/type' |
|||
import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/types' |
|||
|
|||
|
|||
//引入页面 |
|||
import DragControlApp from '@/components/DesignForm/dragControlApp.vue'; |
|||
|
|||
const props = defineProps({ |
|||
appCont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
formKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
groupKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
formVersion:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
formconfigcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
state:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'update:state', val: formStruct): void |
|||
(e: 'update:formKey', val: string): void |
|||
(e: 'update:formVersion', val: string): void |
|||
(e: 'judgeFormIsEdit', val: boolean): void |
|||
(e: 'runNextWindows', val: number): void |
|||
(e: 'closeFormPage'): void |
|||
}>() |
|||
|
|||
const state = computed({ |
|||
get() { |
|||
return props.state |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:state', val) |
|||
} |
|||
}); |
|||
provide('formDesignType', state.value.designType) |
|||
const appFormKeyVal = computed({ |
|||
get() { |
|||
return props.formKey |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:formKey', val) |
|||
} |
|||
}); |
|||
const versionCont = ref<customerFormVersionCont[]>([]) //版本内容列表 |
|||
const tableKey = ref("") |
|||
// 搜索设计时左侧快速添加字段 |
|||
const searchCheckField = (data: FormData) => { |
|||
state.value.formData.list.push(data) |
|||
} |
|||
// 选择模板 |
|||
const selectTemplate = (data: FormData) => { |
|||
state.value.formData = stringToObj(objToStringify(data)) |
|||
} |
|||
//编辑版本状态 |
|||
const editversionstaus = (id:string) =>{ |
|||
|
|||
} |
|||
//打开脚本预览 |
|||
const openAceEditDrawer = (params: any) => { |
|||
|
|||
} |
|||
</script> |
|||
<template> |
|||
<el-aside class="asideBox leftBox"> |
|||
<DragControlApp |
|||
:table-key="state.formData.form.name" |
|||
@versionUpdateForm="versionUpdateForm" |
|||
/> |
|||
</el-aside> |
|||
<el-main class="mainBox rightBox"> |
|||
{{state.formData.config}} |
|||
</el-main> |
|||
<el-aside class="asideBox"> |
|||
<formControlProperties |
|||
ref="formControlAttrEl" |
|||
v-model:formOtherData="state.formOtherData" |
|||
:form-data="state.formData.form" |
|||
:form-config="state.formData.config" |
|||
:customerformid="tableKey" |
|||
:form-list="state.formData.list" |
|||
:form-info="state.formData" |
|||
@open-dialog="openAceEditDrawer" |
|||
/> |
|||
</el-aside> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.asideBox{ |
|||
height: calc(100vh - 40px); |
|||
|
|||
overflow-y : auto; |
|||
.leftBox{ |
|||
width: 250px; |
|||
} |
|||
.rightBox{ |
|||
width: 300px; |
|||
} |
|||
} |
|||
.mainBox{ |
|||
border-left: 1px solid #ECECEC; |
|||
border-right: 1px solid #ECECEC; |
|||
padding: 0; |
|||
overflow-y : auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,25 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-07 15:09:21 |
|||
@ 备注: 表单列表 |
|||
--> |
|||
<script lang='ts' setup> |
|||
|
|||
</script> |
|||
<template> |
|||
<el-main class="mainBox">Main</el-main> |
|||
<el-aside class="asideBox">Aside</el-aside> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.asideBox{ |
|||
height: calc(100vh - 40px); |
|||
width: 300px; |
|||
overflow-y : auto; |
|||
} |
|||
.mainBox{ |
|||
border-left: 1px solid #ECECEC; |
|||
border-right: 1px solid #ECECEC; |
|||
padding: 0; |
|||
overflow-y : auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-07 11:26:40 |
|||
@ 备注: 编辑表单 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { customerFormConfig,formStruct } from '@/api/DesignForm/types' |
|||
import { getProductionMarkForm } from '@/api/DesignForm/requestapi' |
|||
|
|||
import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue" |
|||
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue" |
|||
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue" |
|||
const props = defineProps({ |
|||
appCont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
isShow:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
}, |
|||
formKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
groupKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
menuId:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:isShow"]); |
|||
const tabsActive = ref(1) |
|||
const route: any = useRoute().query || {} |
|||
const formConfigCont = reactive<customerFormConfig>({ |
|||
formName:"", |
|||
formlogo:"" |
|||
}) |
|||
//表单版本ID |
|||
const formVersion = ref<string>("") |
|||
const state = reactive<formStruct>({ |
|||
formData: { |
|||
list: [], |
|||
form: { |
|||
size: 'default', |
|||
name:'', |
|||
formName: formConfigCont.formName |
|||
}, |
|||
config: { |
|||
groupKey:props.groupKey |
|||
}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
}, |
|||
purview:[] |
|||
}, |
|||
editor: {}, |
|||
loading: false, |
|||
formDataPreview: {}, |
|||
previewVisible: false, // 预览窗口 |
|||
designType: route.type, // 当前页面设计类型，有效值search |
|||
formDict: {}, |
|||
formOtherData: { |
|||
source: route.source || '', |
|||
formName: formConfigCont.formName |
|||
} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-07 15:11:24 |
|||
@ 功能: 关闭页面 |
|||
*/ |
|||
const closeSavePageForm = () =>{ |
|||
emits("update:isShow",false) |
|||
} |
|||
|
|||
onBeforeMount(() => { |
|||
getProductionMarkForm() |
|||
.then(({data})=>{ |
|||
formConfigCont.formlogo = data.formlogo |
|||
formConfigCont.formName = data.formname |
|||
state.formData.form.name = data.formlogo |
|||
state.formData.form.formName = data.formname |
|||
state.formOtherData.formName = data.formname |
|||
}) |
|||
.finally(()=>{ |
|||
|
|||
}) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<el-drawer v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith"> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="headerBox"> |
|||
<div class="headLeft"> |
|||
<el-space wrap> |
|||
<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" /> |
|||
<el-tooltip |
|||
class="box-item" |
|||
effect="dark" |
|||
:content="props.appCont.appName" |
|||
placement="bottom" |
|||
> |
|||
<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text> |
|||
</el-tooltip> |
|||
<i class="fa fa-angle-right"></i> |
|||
<el-tooltip |
|||
class="box-item" |
|||
effect="dark" |
|||
:content="state.formData.form.formName" |
|||
placement="bottom" |
|||
> |
|||
<el-text class="w-150px mb-2" truncated>{{ state.formData.form.formName }}</el-text> |
|||
</el-tooltip> |
|||
</el-space> |
|||
</div> |
|||
<div> |
|||
<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain"> |
|||
<el-tab-pane label="① 页面管理" :name="1"> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="② 流程设计" :name="2"> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="③ 列表设计" :name="3"> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="headRight"> |
|||
{{props.groupKey}} |
|||
<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button> |
|||
</div> |
|||
</el-header> |
|||
<el-container> |
|||
<PageForm v-if="tabsActive==1" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" v-model:state="state" v-model:form-version="formVersion" :formconfigcont="formConfigCont" /> |
|||
<PageFlow v-if="tabsActive==2" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" /> |
|||
<PageList v-if="tabsActive==3" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" /> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.headerBox{ |
|||
padding: 0px; |
|||
border-bottom: 2px solid #ECECEC; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.headLeft{ |
|||
width: 300px; |
|||
padding-left: 5px; |
|||
span{ |
|||
max-width:100px; |
|||
} |
|||
} |
|||
.headRight{ |
|||
width: 300px; |
|||
text-align: right; |
|||
padding-right: 5px; |
|||
} |
|||
.tabsMain{ |
|||
::v-deep .el-tabs__header{ |
|||
margin: 0px; |
|||
} |
|||
::v-deep .el-tabs__nav-scroll{ |
|||
margin: 0 auto!important; |
|||
} |
|||
|
|||
::v-deep .el-drawer__body{ |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,112 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-25 13:30:19 |
|||
@ 备注: 修改自定义应用菜单 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { appMenuTreeInfo } from "@/api/date/type" |
|||
import { editAppMenuLable } from '@/api/DesignForm/requestapi' |
|||
const props = defineProps({ |
|||
isShow:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
menuCont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
}); |
|||
const saveMenuName = ref(ElForm); |
|||
const loading = ref(false) |
|||
const emits = defineEmits(["update:isShow","updateMenu"]); |
|||
const appMenuInfo = ref<appMenuTreeInfo>({}) |
|||
//监听页面是否打开 |
|||
watch(()=>props.isShow,(val:boolean)=>{ |
|||
if(val){ |
|||
appMenuInfo.value = props.menuCont |
|||
} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-25 13:39:46 |
|||
@ 功能: 关闭页面 |
|||
*/ |
|||
const handleClose = () => { |
|||
loading.value = false; |
|||
emits("updateMenu") |
|||
emits("update:isShow",false) |
|||
resetForm() |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-24 09:33:56 |
|||
@ 功能: 重置表单 |
|||
*/ |
|||
const resetForm = () => { |
|||
saveMenuName.value.resetFields(); |
|||
saveMenuName.value.clearValidate(); |
|||
appMenuInfo.label = ""; |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-24 09:29:59 |
|||
@ 功能: 表单验证规则 |
|||
*/ |
|||
const rules = reactive({ |
|||
label: [{ required: true, message: "请输入名称", trigger: "blur" }], |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-25 13:44:42 |
|||
@ 功能: 提交数据 |
|||
*/ |
|||
const saveMenuData = () => { |
|||
loading.value = true; |
|||
saveMenuName.value.validate((valid: any) => { |
|||
if (valid) { |
|||
editAppMenuLable({id:appMenuInfo.value.id, label:appMenuInfo.value.label}) |
|||
.then((data) =>{ |
|||
console.log("提交数据", data) |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}); |
|||
handleClose(); |
|||
}) |
|||
}else{ |
|||
loading.value = false; |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="props.isShow" |
|||
title="编辑名称" |
|||
width="500" |
|||
:before-close="handleClose" |
|||
> |
|||
<el-form |
|||
ref="saveMenuName" |
|||
:model="appMenuInfo" |
|||
:rules="rules" |
|||
label-width="120px" |
|||
> |
|||
<el-form-item label="名称" prop="label"> |
|||
<el-input v-model="appMenuInfo.label" clearable placeholder="请输入名称" /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" v-loading="loading" :disabled="loading" @click="saveMenuData">确定</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue