Skip to content

M
mocp-uniapp
Commit 7ee1e50c by pangchong
Options

feat: 全局组件完善

parent 07a23b7b
Showing with 225 additions and 51 deletions
src/components/global-page/global-page.vue
...@@ -22,17 +22,17 @@ ...@@ -22,17 +22,17 @@
<!-- 自定义导航栏 --> <!-- 自定义导航栏 -->
<global-navbar :title="title" v-if="showNavbar"> <global-navbar :title="title" v-if="showNavbar">
<template #left v-if="pages.length > 1"> <template #left v-if="pages.length > 1">
<uni-icons v-if="navLeftType == 'icon'" :type="navLeftIcon" size="16" @tap="goBack"></uni-icons> <uni-icons v-if="navLeftType == 'icon'" :type="navLeftIcon" size="16" @tap="handleLeftClick"></uni-icons>
<view v-if="navLeftType == 'text'" class="cancel" @tap="handleCancel">{{ navLeftText }}</view> <view v-if="navLeftType == 'text'" class="cancel" @tap="handleLeftClick">{{ navLeftText }}</view>
</template> </template>
<template #right v-if="showNavRight"> <template #right v-if="showNavRight">
<global-button type="text" size="small" v-if="navRightType == 'text'" @tap="handleEdit"> <global-button type="text" size="small" v-if="navRightType == 'text'" @tap="handleRightClick">
{{ navRightText }} {{ navRightText }}
</global-button> </global-button>
<global-button type="primary" size="small" v-if="navRightType == 'button'" style="padding: 0 32rpx" @tap="handleEdit"> <global-button type="primary" size="small" v-if="navRightType == 'button'" style="padding: 0 32rpx" @tap="handleRightClick">
{{ navRightText }} {{ navRightText }}
</global-button> </global-button>
<global-icon v-if="navRightType == 'icon'" :icon="navRightIcon" @tap="handleEdit"></global-icon> <global-icon v-if="navRightType == 'icon'" :icon="navRightIcon" @tap="handleRightClick"></global-icon>
</template> </template>
</global-navbar> </global-navbar>
<slot name="top"></slot> <slot name="top"></slot>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<!-- 底部 --> <!-- 底部 -->
<template #bottom> <template #bottom>
<view class="footer-btn" v-if="showFooterBtn"> <view class="footer-btn" v-if="showFooterBtn">
<global-button type="primary" size="large" @tap="handleFooter">{{ footerBtnText }}</global-button> <global-button type="primary" size="large" @tap="handleFooterClick">{{ footerBtnText }}</global-button>
</view> </view>
<slot name="bottom"></slot> <slot name="bottom"></slot>
</template> </template>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const dataList = ref([]) const dataList = ref([])
const es = defineEmits(['query', 'handleCancel', 'handleEdit', 'handleFooter']) const es = defineEmits(['query', 'handleLeftClick', 'handleRightClick', 'handleFooterClick'])
const paging = ref() const paging = ref()
const ps = defineProps({ const ps = defineProps({
padding: { padding: {
...@@ -91,6 +91,11 @@ const ps = defineProps({ ...@@ -91,6 +91,11 @@ const ps = defineProps({
type: String, type: String,
default: '取消' default: '取消'
}, },
//点击nav左边插槽default,emit
navLeftClick: {
type: String,
default: 'default'
},
//是否显示nav右边插槽 //是否显示nav右边插槽
showNavRight: { showNavRight: {
type: Boolean, type: Boolean,
...@@ -192,21 +197,21 @@ const query = (pageIndex, pageSize) => { ...@@ -192,21 +197,21 @@ const query = (pageIndex, pageSize) => {
complete() complete()
} }
} }
//返回 //点击左边插槽
const goBack = () => { const handleLeftClick = () => {
uni.navigateBack() if (ps.navLeftClick == 'default') {
} uni.navigateBack()
//取消 } else {
const handleCancel = () => { es('handleLeftClick')
es('handleCancel') }
} }
//保存 //保存
const handleEdit = () => { const handleRightClick = () => {
es('handleEdit') es('handleRightClick')
} }
//点击底部按钮 //点击底部按钮
const handleFooter = () => { const handleFooterClick = () => {
es('handleFooter') es('handleFooterClick')
} }
// 获取页面栈 // 获取页面栈
const pages = getCurrentPages() const pages = getCurrentPages()
......
src/components/global-picker/global-picker.vue
...@@ -165,6 +165,7 @@ const clear = () => { ...@@ -165,6 +165,7 @@ const clear = () => {
align-items: center; align-items: center;
&-value { &-value {
color: $uni-text-4; color: $uni-text-4;
margin-right: 8rpx;
} }
&.placeholder { &.placeholder {
color: $uni-text-3; color: $uni-text-3;
......
src/pages.json
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
} }
}, },
{ {
"path": "pages/panel/assign-work/editWork", "path": "pages/panel/assign-work/edit-work",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
......
src/pages/panel/app-center/index.vue
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<global-page <global-page
ref="pageRef" ref="pageRef"
title="应用中心" title="应用中心"
@handleCancel="handleCancel" navLeftClick="emit"
@handleEdit="handleEdit" @handleLeftClick="handleLeftClick"
@handleRightClick="handleRightClick"
:padding="16" :padding="16"
:navLeftType="navLeftType" :navLeftType="navLeftType"
:showNavRight="isEdit" :showNavRight="isEdit"
...@@ -57,13 +58,17 @@ const userStore = useUserStore() ...@@ -57,13 +58,17 @@ const userStore = useUserStore()
const isEdit = ref(false) const isEdit = ref(false)
const navLeftType = ref('icon') const navLeftType = ref('icon')
//取消 //取消
const handleCancel = () => { const handleLeftClick = () => {
isEdit.value = false if (isEdit.value) {
navLeftType.value = 'icon' isEdit.value = false
homeMenuList.value = cloneDeep(userStore.getHomeMenuList) navLeftType.value = 'icon'
homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
} else {
uni.navigateBack()
}
} }
//保存 //保存
const handleEdit = () => { const handleRightClick = () => {
isEdit.value = false isEdit.value = false
navLeftType.value = 'icon' navLeftType.value = 'icon'
userStore.changeHomeMenuList(cloneDeep(homeMenuList.value)) userStore.changeHomeMenuList(cloneDeep(homeMenuList.value))
......
src/pages/panel/appraisal-record/add.vue
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
showNavRight showNavRight
navRightType="button" navRightType="button"
navRightText="保存" navRightText="保存"
@handleCancel="handleCancel" @handleRightClick="handleRightClick"
@handleEdit="handleEdit"
> >
<view class="form"> <view class="form">
<up-form labelPosition="left" labelWidth="auto"> <up-form labelPosition="left" labelWidth="auto">
...@@ -23,7 +22,8 @@ ...@@ -23,7 +22,8 @@
> >
<up-textarea <up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="70" :height="40"
border="none"
v-model="formData.msg" v-model="formData.msg"
></up-textarea> ></up-textarea>
</up-form-item> </up-form-item>
...@@ -75,10 +75,7 @@ const getAdminList = async (realName) => { ...@@ -75,10 +75,7 @@ const getAdminList = async (realName) => {
uni.$message.showToast(res.message) uni.$message.showToast(res.message)
} }
} }
const handleCancel = () => { const handleRightClick = async () => {
uni.navigateBack()
}
const handleEdit = async () => {
const res = await saveRqmOpinionApi(formData, { loading: true }) const res = await saveRqmOpinionApi(formData, { loading: true })
if (res.code == 200) { if (res.code == 200) {
uni.navigateBack() uni.navigateBack()
......
src/pages/panel/appraisal-record/details.vue
<template> <template>
<global-page :padding="24" title="考核记录详情" showNavRight @handleEdit="handleEdit"> <global-page :padding="24" title="考核记录详情" showNavRight @handleRightClick="handleRightClick">
<template v-if="details"> <template v-if="details">
<view class="details"> <view class="details">
<view class="details-header"> <view class="details-header">
...@@ -100,7 +100,7 @@ onLoad(() => { ...@@ -100,7 +100,7 @@ onLoad(() => {
appraisalRecordStore.getRqmDetails() appraisalRecordStore.getRqmDetails()
}) })
//跳转 //跳转
const handleEdit = () => { const handleRightClick = () => {
uni.navigateTo({ uni.navigateTo({
url: 'edit' url: 'edit'
}) })
......
src/pages/panel/appraisal-record/edit.vue
<template> <template>
<global-page title="考核记录登记" showFooterBtn @handleFooter="handleSubmit"> <global-page title="考核记录登记" showFooterBtn @handleFooterClick="handleSubmit">
<view class="content"> <view class="content">
<view class="form"> <view class="form">
<up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules"> <up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules">
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
<up-textarea <up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
v-model="formData.eventMsg" v-model="formData.eventMsg"
:height="70" :height="40"
border="none"
></up-textarea> ></up-textarea>
</up-form-item> </up-form-item>
<up-form-item label="事件类别" :borderBottom="true"> <up-form-item label="事件类别" :borderBottom="true">
...@@ -59,7 +60,8 @@ ...@@ -59,7 +60,8 @@
<up-textarea <up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
v-model="formData.examineBasis" v-model="formData.examineBasis"
:height="70" :height="40"
border="none"
></up-textarea> ></up-textarea>
</up-form-item> </up-form-item>
<up-form-item label="分值" :borderBottom="true"> <up-form-item label="分值" :borderBottom="true">
......
src/pages/panel/assign-work/constants/edit-work.scss 0 → 100644
.content {
background: #fff;
.form {
&-title {
padding: 20rpx 32rpx;
background: #f7f8fa;
color: $uni-text-5;
}
&-item {
padding: 0 32rpx;
}
}
.textarea {
color: $uni-text-3;
line-height: 40rpx;
margin-top: 8rpx;
}
.switch {
flex: auto;
display: flex;
justify-content: flex-end;
}
.plan {
&-title {
display: flex;
justify-content: space-between;
align-items: center;
color: $uni-text-5;
margin-top: 24rpx;
.right {
display: flex;
align-items: center;
.circle {
background: $uni-primary-6;
width: 32rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8rpx;
border-radius: 50%;
}
.text {
color: $uni-primary-6;
}
}
}
&-body {
&-list {
padding: 24rpx 0;
border-bottom: 2px solid #f7f8fa;
}
&-item {
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
}
&-title {
display: flex;
justify-content: space-between;
align-items: center;
color: $uni-text-5;
font-size: 24rpx;
}
&-text {
margin: 8rpx 0;
color: $uni-text-3;
line-height: 40rpx;
}
}
}
}
src/pages/panel/assign-work/details.vue
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
showFooterBtn showFooterBtn
footerBtnText="工作反馈" footerBtnText="工作反馈"
:editMode="3" :editMode="3"
@handleEdit="handleEdit" @handleRightClick="handleRightClick"
@handleFooter="handleFooter" @handleFooterClick="handleFooterClick"
> >
<view class="details"> <view class="details">
<view class="details-header"> <view class="details-header">
...@@ -67,12 +67,12 @@ import CompanyPopup from './components/company-popup.vue' ...@@ -67,12 +67,12 @@ import CompanyPopup from './components/company-popup.vue'
//责任公司弹框 //责任公司弹框
const companyPopupRef = ref() const companyPopupRef = ref()
const handleEdit = () => { const handleRightClick = () => {
companyPopupRef.value?.open() companyPopupRef.value?.open()
} }
//新增 //新增
const handleFooter = () => { const handleFooterClick = () => {
uni.navigateTo({ url: 'editWork' }) uni.navigateTo({ url: 'edit-work' })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/pages/panel/assign-work/edit-work.vue 0 → 100644
<template>
<global-page title="添加工作反馈" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<view class="content">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<view class="form-item">
<up-form-item label="工作反馈状态" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
<up-form-item label="问题分析" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
</view>
</view>
<view class="form">
<view class="form-title">解决措施</view>
<view class="form-item">
<up-form-item label="工作目标" :borderBottom="true" labelPosition="top">
<view class="textarea">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</view>
</up-form-item>
<view class="plan">
<view class="plan-title">
<view class="left">分解计划</view>
<view class="right">
<view class="circle"><up-icon name="plus" color="#fff" size="8"></up-icon></view>
<view class="text">添加</view>
</view>
</view>
<view class="plan-body">
<view class="plan-body-list">
<view class="plan-body-item">
<view class="plan-body-title">
<view class="left">分解计划1</view>
<view class="right">2023-11-27</view>
</view>
<view class="plan-body-text">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</view>
</view>
<view class="plan-body-item">
<view class="plan-body-title">
<view class="left">分解计划2</view>
<view class="right">2023-11-27</view>
</view>
<view class="plan-body-text">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</view>
</view>
</view>
<up-form-item label="当前进展" :borderBottom="true" labelPosition="top">
<view class="textarea">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</view>
</up-form-item>
<up-form-item :borderBottom="true">
<global-upload url="/resource/uploadFile"></global-upload>
</up-form-item>
</view>
</view>
</view>
</view>
<view class="form">
<view class="form-title" style="padding: 12rpx"></view>
<view class="form-item">
<up-form-item label="基地/部门批准领导" :borderBottom="true">
<up-input border="none" inputAlign="right" placeholder="请输入" :adjustPosition="false" clearable></up-input>
</up-form-item>
<up-form-item label="MCD批准领导" :borderBottom="true">
<up-input border="none" inputAlign="right" placeholder="请输入" :adjustPosition="false" clearable></up-input>
</up-form-item>
<up-form-item label="批复附件" labelPosition="top" :borderBottom="true">
<view style="margin-top: 24rpx">
<global-upload url="/resource/uploadFile"></global-upload>
</view>
</up-form-item>
<up-form-item label="后续措施反馈" :borderBottom="true">
<view class="switch">
<up-switch v-model="value" @change="change"></up-switch>
</view>
</up-form-item>
<up-form-item label="计划完成时间" :borderBottom="true">
<global-picker pickAlign="right" clearable mode="date" :emptyValue="-1" placeholder="请选择日期"></global-picker>
</up-form-item>
</view>
</view>
</up-form>
</view>
</global-page>
</template>
<script setup>
import { ref } from 'vue'
const value = ref(true)
const change = (e) => {
console.log(e)
}
</script>
<style lang="scss">
@import './constants/edit-work.scss';
</style>
src/pages/panel/assign-work/editWork.vue deleted 100644 → 0
<template>
<global-page title="添加工作反馈" :editMode="1">
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment