Skip to content

M
mocp-uniapp
Commit 7ee1e50c by pangchong
Options

feat: 全局组件完善

parent 07a23b7b
Showing with 221 additions and 47 deletions
src/components/global-page/global-page.vue
......@@ -22,17 +22,17 @@
<!-- 自定义导航栏 -->
<global-navbar :title="title" v-if="showNavbar">
<template #left v-if="pages.length > 1">
<uni-icons v-if="navLeftType == 'icon'" :type="navLeftIcon" size="16" @tap="goBack"></uni-icons>
<view v-if="navLeftType == 'text'" class="cancel" @tap="handleCancel">{{ navLeftText }}</view>
<uni-icons v-if="navLeftType == 'icon'" :type="navLeftIcon" size="16" @tap="handleLeftClick"></uni-icons>
<view v-if="navLeftType == 'text'" class="cancel" @tap="handleLeftClick">{{ navLeftText }}</view>
</template>
<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 }}
</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 }}
</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>
</global-navbar>
<slot name="top"></slot>
......@@ -45,7 +45,7 @@
<!-- 底部 -->
<template #bottom>
<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>
<slot name="bottom"></slot>
</template>
......@@ -55,7 +55,7 @@
import { computed, ref } from 'vue'
const dataList = ref([])
const es = defineEmits(['query', 'handleCancel', 'handleEdit', 'handleFooter'])
const es = defineEmits(['query', 'handleLeftClick', 'handleRightClick', 'handleFooterClick'])
const paging = ref()
const ps = defineProps({
padding: {
......@@ -91,6 +91,11 @@ const ps = defineProps({
type: String,
default: '取消'
},
//点击nav左边插槽default,emit
navLeftClick: {
type: String,
default: 'default'
},
//是否显示nav右边插槽
showNavRight: {
type: Boolean,
......@@ -192,21 +197,21 @@ const query = (pageIndex, pageSize) => {
complete()
}
}
//返回
const goBack = () => {
//点击左边插槽
const handleLeftClick = () => {
if (ps.navLeftClick == 'default') {
uni.navigateBack()
}
//取消
const handleCancel = () => {
es('handleCancel')
} else {
es('handleLeftClick')
}
}
//保存
const handleEdit = () => {
es('handleEdit')
const handleRightClick = () => {
es('handleRightClick')
}
//点击底部按钮
const handleFooter = () => {
es('handleFooter')
const handleFooterClick = () => {
es('handleFooterClick')
}
// 获取页面栈
const pages = getCurrentPages()
......
src/components/global-picker/global-picker.vue
......@@ -165,6 +165,7 @@ const clear = () => {
align-items: center;
&-value {
color: $uni-text-4;
margin-right: 8rpx;
}
&.placeholder {
color: $uni-text-3;
......
src/pages.json
......@@ -99,7 +99,7 @@
}
},
{
"path": "pages/panel/assign-work/editWork",
"path": "pages/panel/assign-work/edit-work",
"style": {
"navigationStyle": "custom"
}
......
src/pages/panel/app-center/index.vue
......@@ -2,8 +2,9 @@
<global-page
ref="pageRef"
title="应用中心"
@handleCancel="handleCancel"
@handleEdit="handleEdit"
navLeftClick="emit"
@handleLeftClick="handleLeftClick"
@handleRightClick="handleRightClick"
:padding="16"
:navLeftType="navLeftType"
:showNavRight="isEdit"
......@@ -57,13 +58,17 @@ const userStore = useUserStore()
const isEdit = ref(false)
const navLeftType = ref('icon')
//取消
const handleCancel = () => {
const handleLeftClick = () => {
if (isEdit.value) {
isEdit.value = false
navLeftType.value = 'icon'
homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
} else {
uni.navigateBack()
}
}
//保存
const handleEdit = () => {
const handleRightClick = () => {
isEdit.value = false
navLeftType.value = 'icon'
userStore.changeHomeMenuList(cloneDeep(homeMenuList.value))
......
src/pages/panel/appraisal-record/add.vue
......@@ -5,8 +5,7 @@
showNavRight
navRightType="button"
navRightText="保存"
@handleCancel="handleCancel"
@handleEdit="handleEdit"
@handleRightClick="handleRightClick"
>
<view class="form">
<up-form labelPosition="left" labelWidth="auto">
......@@ -23,7 +22,8 @@
>
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="70"
:height="40"
border="none"
v-model="formData.msg"
></up-textarea>
</up-form-item>
......@@ -75,10 +75,7 @@ const getAdminList = async (realName) => {
uni.$message.showToast(res.message)
}
}
const handleCancel = () => {
uni.navigateBack()
}
const handleEdit = async () => {
const handleRightClick = async () => {
const res = await saveRqmOpinionApi(formData, { loading: true })
if (res.code == 200) {
uni.navigateBack()
......
src/pages/panel/appraisal-record/details.vue
<template>
<global-page :padding="24" title="考核记录详情" showNavRight @handleEdit="handleEdit">
<global-page :padding="24" title="考核记录详情" showNavRight @handleRightClick="handleRightClick">
<template v-if="details">
<view class="details">
<view class="details-header">
......@@ -100,7 +100,7 @@ onLoad(() => {
appraisalRecordStore.getRqmDetails()
})
//跳转
const handleEdit = () => {
const handleRightClick = () => {
uni.navigateTo({
url: 'edit'
})
......
src/pages/panel/appraisal-record/edit.vue
<template>
<global-page title="考核记录登记" showFooterBtn @handleFooter="handleSubmit">
<global-page title="考核记录登记" showFooterBtn @handleFooterClick="handleSubmit">
<view class="content">
<view class="form">
<up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules">
......@@ -40,7 +40,8 @@
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
v-model="formData.eventMsg"
:height="70"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="事件类别" :borderBottom="true">
......@@ -59,7 +60,8 @@
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
v-model="formData.examineBasis"
:height="70"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<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 @@
showFooterBtn
footerBtnText="工作反馈"
:editMode="3"
@handleEdit="handleEdit"
@handleFooter="handleFooter"
@handleRightClick="handleRightClick"
@handleFooterClick="handleFooterClick"
>
<view class="details">
<view class="details-header">
......@@ -67,12 +67,12 @@ import CompanyPopup from './components/company-popup.vue'
//责任公司弹框
const companyPopupRef = ref()
const handleEdit = () => {
const handleRightClick = () => {
companyPopupRef.value?.open()
}
//新增
const handleFooter = () => {
uni.navigateTo({ url: 'editWork' })
const handleFooterClick = () => {
uni.navigateTo({ url: 'edit-work' })
}
</script>
<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