Skip to content

M
mocp-uniapp
Commit eda35dd4 by pangchong
Options

feat: 组件优化

parent 3dbf906a
Showing with 347 additions and 290 deletions
src/App.vue
......@@ -23,6 +23,8 @@ export default {
@import 'uview-plus/index.scss';
// 修改uview-plus样式
@import '@/static/css/uview-plus.scss';
// 修改uni样式
@import '@/static/css/uni.scss';
/*每个页面公共css */
page {
font-size: 28rpx;
......
src/components/global-button/global-button.vue
......@@ -14,7 +14,9 @@ const ps = defineProps({
},
style: {
type: Object,
default: () => {}
default: () => {
return {}
}
},
//default,primary,success,warning,danger,text
type: {
......
src/components/global-page-swiper/global-page-swiper.vue
......@@ -15,7 +15,7 @@
<slot name="top"></slot>
</template>
<!-- 滚动内容 -->
<swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
<swiper class="swiper" :style="getStyle" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
<swiper-item v-for="(_, index) in tabList" :key="index">
<global-page-swiper-item
:ref="(vc) => (pagingArr[index] = vc)"
......@@ -41,12 +41,20 @@
</template>
<script setup>
import { ref } from 'vue'
import { computed, ref } from 'vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const ps = defineProps({
padding: {
type: [String, Number],
default: 0
},
margin: {
type: [String, Number],
default: 0
},
//是否自动加载
auto: {
type: Boolean,
......@@ -120,7 +128,15 @@ const ps = defineProps({
default: '160rpx'
}
})
const getStyle = computed(() => {
let padding = typeof ps.padding == 'number' ? ps.padding + 'rpx' : ps.padding
let margin = typeof ps.margin == 'number' ? ps.margin + 'rpx' : ps.margin
let style = {
margin: margin,
padding: padding
}
return style
})
const tabs = ref()
const current = ref(ps.current)
//返回
......
src/components/global-page/global-page.vue
......@@ -22,18 +22,21 @@
<!-- 自定义导航栏 -->
<global-navbar :title="title" v-if="showNavbar">
<template #left v-if="pages.length > 1">
<view v-if="isEdit" class="cancel" @tap="handleCancel">取消</view>
<uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons>
<uni-icons v-if="getEditMode == 0 || getEditMode == 2" type="left" size="16" @tap="goBack"></uni-icons>
<view v-if="getEditMode == 1" class="cancel" @tap="handleCancel">取消</view>
</template>
<template #right>
<global-button type="primary" size="small" v-if="isEdit" style="padding: 0 32rpx" @tap="handleSave">保存</global-button>
<global-button type="primary" size="small" v-if="getEditMode == 1" style="padding: 0 32rpx" @tap="handleEdit">保存</global-button>
<global-button type="text" size="small" v-if="getEditMode == 2" style="padding: 0" @tap="handleEdit">编辑</global-button>
</template>
</global-navbar>
<slot name="top"></slot>
</template>
<!-- 滚动内容 -->
<slot :dataList="dataList" v-if="isDataList"></slot>
<slot></slot>
<view class="content" :style="getStyle">
<slot :dataList="dataList" v-if="isDataList"></slot>
<slot></slot>
</view>
<!-- 底部 -->
<template #bottom>
<slot name="bottom"></slot>
......@@ -41,12 +44,20 @@
</z-paging>
</template>
<script setup>
import { ref } from 'vue'
import { computed, ref } from 'vue'
const dataList = ref([])
const es = defineEmits(['query', 'handleCancel', 'handleSave'])
const es = defineEmits(['query', 'handleCancel', 'handleEdit'])
const paging = ref()
const ps = defineProps({
padding: {
type: [String, Number],
default: 0
},
margin: {
type: [String, Number],
default: 0
},
//是否自动加载
auto: {
type: Boolean,
......@@ -62,6 +73,16 @@ const ps = defineProps({
type: Boolean,
default: false
},
//页面编辑模式0,1,2
editMode: {
type: Number,
default: 0
},
//是否显示返回
showBack: {
type: Boolean,
default: true
},
//页面标题
title: {
type: String,
......@@ -100,6 +121,15 @@ const ps = defineProps({
default: '160rpx'
}
})
const getStyle = computed(() => {
let padding = typeof ps.padding == 'number' ? ps.padding + 'rpx' : ps.padding
let margin = typeof ps.margin == 'number' ? ps.margin + 'rpx' : ps.margin
let style = {
margin: margin,
padding: padding
}
return style
})
const complete = (data) => {
paging.value?.complete(data || true)
}
......@@ -120,7 +150,7 @@ const query = (pageIndex, pageSize) => {
}
}
//获取页面状态
const isEdit = ref(ps.showEdit)
const getEditMode = ref(ps.editMode)
//返回
const goBack = () => {
uni.navigateBack()
......@@ -130,12 +160,12 @@ const handleCancel = () => {
es('handleCancel')
}
//保存
const handleSave = () => {
es('handleSave')
const handleEdit = () => {
es('handleEdit')
}
//修改编辑状态
const handleChangeEdit = (value) => {
isEdit.value = value
getEditMode.value = value
}
// 获取页面栈
const pages = getCurrentPages()
......
src/pages/panel/app-center/constants/index.scss
......@@ -2,31 +2,28 @@
font-size: 32rpx;
color: #1d2129;
}
.content {
padding: 16rpx;
.card {
border-radius: 12rpx;
background: #fff;
padding: 32rpx 0 0 0;
margin-bottom: 16rpx;
.card-title {
display: flex;
justify-content: space-between;
padding: 0 16rpx;
margin-bottom: 14rpx;
.card-title-txt {
font-size: 34rpx;
color: #1d2129;
}
.card {
border-radius: 12rpx;
background: #fff;
padding: 32rpx 0 0 0;
margin-bottom: 16rpx;
.card-title {
display: flex;
justify-content: space-between;
padding: 0 16rpx;
margin-bottom: 14rpx;
.card-title-txt {
font-size: 34rpx;
color: #1d2129;
}
.menu-list {
display: flex;
flex-wrap: wrap;
.menu-item {
width: 25%;
margin: 14rpx 0;
box-sizing: border-box;
}
}
.menu-list {
display: flex;
flex-wrap: wrap;
.menu-item {
width: 25%;
margin: 14rpx 0;
box-sizing: border-box;
}
}
}
\ No newline at end of file
}
src/pages/panel/app-center/index.vue
<template>
<global-page ref="pageRef" title="应用中心" @handleCancel="handleCancel" @handleSave="handleSave">
<view class="content">
<view class="card">
<view class="card-title">
<view class="card-title-txt">首页应用</view>
<global-button type="primary" size="small" @tap="handleEdit">编辑</global-button>
</view>
<view class="menu-list">
<menu-item
class="menu-item"
v-for="item in homeMenuList"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit ? 'minus' : 'default'"
@tap="handleHomeMenu(item, 'minus')"
></menu-item>
</view>
<global-page ref="pageRef" title="应用中心" @handleCancel="handleCancel" @handleEdit="handleEdit" :padding="16">
<view class="card">
<view class="card-title">
<view class="card-title-txt">首页应用</view>
<global-button type="primary" size="small" @tap="handleChange">编辑</global-button>
</view>
<view class="card">
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list">
<menu-item
class="menu-item"
v-for="item in getMenuList"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit && !item.isHome ? 'plus' : 'default'"
@tap="handleHomeMenu(item, 'plus')"
></menu-item>
</view>
<view class="menu-list">
<menu-item
class="menu-item"
v-for="item in homeMenuList"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit ? 'minus' : 'default'"
@tap="handleHomeMenu(item, 'minus')"
></menu-item>
</view>
</view>
<view class="card">
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list">
<menu-item
class="menu-item"
v-for="item in getMenuList"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit && !item.isHome ? 'plus' : 'default'"
@tap="handleHomeMenu(item, 'plus')"
></menu-item>
</view>
</view>
</global-page>
......@@ -51,20 +49,20 @@ const pageRef = ref()
//取消
const handleCancel = () => {
isEdit.value = false
pageRef.value?.handleChangeEdit(false)
pageRef.value?.handleChangeEdit(0)
homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
}
//保存
const handleSave = () => {
const handleEdit = () => {
isEdit.value = false
pageRef.value?.handleChangeEdit(false)
pageRef.value?.handleChangeEdit(0)
userStore.changeHomeMenuList(cloneDeep(homeMenuList.value))
uni.$message.showToast('保存菜单成功')
}
//编辑
const handleEdit = () => {
const handleChange = () => {
isEdit.value = true
pageRef.value?.handleChangeEdit(true)
pageRef.value?.handleChangeEdit(1)
}
//操作菜单
const homeMenuList = ref([])
......
src/pages/panel/appraisal-record/add.vue
......@@ -2,8 +2,9 @@
<global-page
:title="formData.isDuty == 0 ? '添加公司值班信息' : '添加品质中心信息'"
showEdit
:editMode="1"
@handleCancel="handleCancel"
@handleSave="handleSave"
@handleEdit="handleEdit"
>
<view class="form">
<up-form labelPosition="left" labelWidth="auto">
......@@ -75,7 +76,7 @@ const getAdminList = async (realName) => {
const handleCancel = () => {
uni.navigateBack()
}
const handleSave = async () => {
const handleEdit = async () => {
const res = await saveRqmOpinionApi(formData, { loading: true })
if (res.code == 200) {
uni.navigateBack()
......
src/pages/panel/appraisal-record/constants/details.scss
.content {
padding: 24rpx;
.details {
padding: 16rpx 24rpx;
border-radius: 12rpx;
background: #ffffff;
color: #4e5969;
&-header {
&-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.txt {
color: #f53f3f;
font-size: 32rpx;
}
.details {
padding: 16rpx 24rpx;
border-radius: 12rpx;
background: #ffffff;
color: #4e5969;
&-header {
&-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.txt {
color: #f53f3f;
font-size: 32rpx;
}
&-bottom {
}
&-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.left {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.left {
display: flex;
align-items: center;
.left-icon {
margin-right: 16rpx;
}
.left-icon {
margin-right: 16rpx;
}
}
}
&-body {
border-top: 2rpx solid #f4f4f4;
border-bottom: 2rpx solid #f4f4f4;
padding: 16rpx 0;
&-top {
}
&-body {
border-top: 2rpx solid #f4f4f4;
border-bottom: 2rpx solid #f4f4f4;
padding: 16rpx 0;
&-top {
display: flex;
flex-direction: column;
.top {
display: flex;
flex-direction: column;
.top {
display: flex;
align-items: center;
.txt {
margin-left: 4rpx;
}
}
.bottom {
margin-top: 16rpx;
.txt {
margin-left: 24rpx;
}
align-items: center;
.txt {
margin-left: 4rpx;
}
}
&-bottom {
.bottom {
margin-top: 16rpx;
font-size: 30rpx;
line-height: 42rpx;
.txt {
margin-left: 24rpx;
}
}
}
&-footer {
padding-top: 16rpx;
&-top {
color: #1d2129;
&-bottom {
margin-top: 16rpx;
font-size: 30rpx;
line-height: 42rpx;
}
}
&-footer {
padding-top: 16rpx;
&-top {
color: #1d2129;
display: flex;
align-items: center;
.txt {
margin-left: 8rpx;
}
}
&-center {
line-height: 40rpx;
padding: 16rpx 0;
}
&-bottom {
color: #1d2129;
display: flex;
justify-content: flex-end;
.person-info {
display: flex;
align-items: center;
.txt {
margin-left: 8rpx;
margin-left: 16rpx;
}
}
&-center {
line-height: 40rpx;
padding: 16rpx 0;
}
&-bottom {
color: #1d2129;
display: flex;
justify-content: flex-end;
.person-info {
display: flex;
align-items: center;
.txt {
margin-left: 16rpx;
}
&:first-child {
margin-right: 32rpx;
}
&:first-child {
margin-right: 32rpx;
}
}
}
}
.appeal-status {
color: #1d2129;
margin-bottom: 16rpx;
}
}
.appeal-status {
color: #1d2129;
margin-bottom: 16rpx;
}
.appeal-image {
width: 100%;
}
src/pages/panel/appraisal-record/constants/edit.scss 0 → 100644
.content {
padding-bottom: 140rpx;
.form {
background: #fff;
padding: 0 32rpx;
}
.appeal {
margin-top: 16rpx;
background: #fff;
&-title {
padding: 28rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #f4f4f4;
text {
color: #1d2129;
}
}
&-content {
padding: 28rpx 32rpx;
}
}
}
.submit-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
src/pages/panel/appraisal-record/constants/list.scss
.list {
.item {
padding: 24rpx;
.item {
padding: 24rpx;
margin-bottom: 16rpx;
border-radius: 12rpx;
background: linear-gradient(#e6eeff, #ffffff, #ffffff);
&-title {
margin-bottom: 16rpx;
border-radius: 12rpx;
background: linear-gradient(#e6eeff, #ffffff, #ffffff);
&-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #f4f4f4;
.desc {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #f4f4f4;
.desc {
display: flex;
align-items: center;
.type {
color: #f53f3f;
font-size: 34rpx;
}
.txt {
color: #1d2129;
font-size: 34rpx;
margin: 0 16rpx;
}
.place {
font-size: 28rpx;
color: #86909c;
}
.type {
color: #f53f3f;
font-size: 34rpx;
}
.txt {
color: #1d2129;
font-size: 34rpx;
margin: 0 16rpx;
}
.place {
font-size: 28rpx;
color: #86909c;
}
}
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
line-height: 40rpx;
}
}
}
\ No newline at end of file
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
line-height: 40rpx;
}
}
src/pages/panel/appraisal-record/details.vue
<template>
<global-page :showNavbar="false">
<template #top>
<global-navbar title="考核记录详情">
<template #left>
<uni-icons type="left" size="16" @tap="goBack"></uni-icons>
</template>
<template #right>
<global-button type="text" @tap="goTo">编辑</global-button>
</template>
</global-navbar>
</template>
<view class="content" v-if="details">
<global-page :padding="24" title="考核记录详情" showEdit :editMode="2" @handleEdit="handleEdit">
<template v-if="details">
<view class="details">
<view class="details-header">
<view class="details-header-top">
......@@ -80,9 +70,16 @@
</card-details>
<card-details type="appeal" title="申诉状态" titleIcon="email">
<view class="appeal-status">{{ useGetDictByValue('appealInfo', details.appealInfo) }}</view>
<image :src="item.fileUrl" v-for="(item, index) in getFileList" :key="item.id" @tap="previewImage(index)" mode="widthFix" />
<image
class="appeal-image"
:src="item.fileUrl"
v-for="(item, index) in getFileList"
:key="item.id"
@tap="previewImage(index)"
mode="widthFix"
/>
</card-details>
</view>
</template>
</global-page>
</template>
......@@ -103,7 +100,7 @@ onLoad(() => {
appraisalRecordStore.getRqmDetails()
})
//跳转
const goTo = () => {
const handleEdit = () => {
uni.navigateTo({
url: 'edit'
})
......
src/pages/panel/appraisal-record/edit.vue
......@@ -204,32 +204,5 @@ const handleAdd = (isDuty) => {
}
</script>
<style lang="scss" scoped>
.content {
padding-bottom: 140rpx;
.form {
background: #fff;
padding: 0 32rpx;
}
.appeal {
margin-top: 16rpx;
background: #fff;
&-title {
padding: 28rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #f4f4f4;
text {
color: #1d2129;
}
}
&-content {
padding: 28rpx 32rpx;
}
}
}
.submit-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
@import './constants/edit.scss';
</style>
src/pages/panel/appraisal-record/list.vue
<template>
<global-page-swiper title="考核记录" refresherEnabled loadingMoreEnabled :tabList="tabList" :api="getRqmListApi" ref="paging">
<global-page-swiper title="考核记录" refresherEnabled loadingMoreEnabled :tabList="tabList" :api="getRqmListApi" ref="paging" :padding="24">
<template #="{ dataList }">
<view class="list">
<view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
<view class="item-title">
<view class="desc">
<view class="type">{{ item.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
<view class="txt">{{ item.appraisee != '-1' ? item.appraisee : '' }}</view>
<view class="place">{{ item.department != '-1' ? item.department : '' }}</view>
</view>
<custom-score v-if="item.score != -1" :type="item.eventType == 1 ? 'success' : 'warning'" :count="item.score"></custom-score>
</view>
<view class="item-content u-line-3">
{{ item.eventMsg || '暂无内容~' }}
<view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
<view class="item-title">
<view class="desc">
<view class="type">{{ item.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
<view class="txt">{{ item.appraisee != '-1' ? item.appraisee : '' }}</view>
<view class="place">{{ item.department != '-1' ? item.department : '' }}</view>
</view>
<custom-score v-if="item.score != -1" :type="item.eventType == 1 ? 'success' : 'warning'" :count="item.score"></custom-score>
</view>
<view class="item-content u-line-3">
{{ item.eventMsg || '暂无内容~' }}
</view>
</view>
</template>
......
src/pages/panel/assign-work/constants/list.scss
.list {
.item {
padding: 24rpx;
.item {
padding: 24rpx;
margin-bottom: 16rpx;
border-radius: 12rpx;
background: linear-gradient(#e6eeff, #ffffff, #ffffff);
&-title {
margin-bottom: 16rpx;
border-radius: 12rpx;
background: linear-gradient(#e6eeff, #ffffff, #ffffff);
&-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #f4f4f4;
.left {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #f4f4f4;
.desc {
display: flex;
align-items: center;
.type {
color: #f53f3f;
font-size: 34rpx;
}
.txt {
color: #1d2129;
font-size: 34rpx;
margin: 0 16rpx;
}
.place {
font-size: 28rpx;
color: #86909c;
}
.type {
color: #f53f3f;
font-size: 34rpx;
}
.txt {
color: #1d2129;
font-size: 34rpx;
margin: 0 16rpx;
}
}
.right {
color: $uni-color-primary;
}
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
line-height: 40rpx;
}
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
line-height: 40rpx;
}
&-footer {
margin-top: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
.label {
display: flex;
align-items: center;
.txt {
margin-left: 16rpx;
}
}
}
}
\ No newline at end of file
}
src/pages/panel/assign-work/list.vue
<template>
<global-page-swiper title="考核记录" refresherEnabled loadingMoreEnabled :tabList="tabList" :api="getRqmListApi" ref="paging">
<global-page-swiper title="布置工作" refresherEnabled loadingMoreEnabled :tabList="tabList" :api="getRqmListApi" ref="paging" :padding="24">
<template #="{ dataList }">
<view class="list">
<view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
<view class="item-title">
<view class="desc">
<view class="type">{{ item.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
<view class="txt">{{ item.appraisee != '-1' ? item.appraisee : '' }}</view>
<view class="place">{{ item.department != '-1' ? item.department : '' }}</view>
</view>
<custom-score v-if="item.score != -1" :type="item.eventType == 1 ? 'success' : 'warning'" :count="item.score"></custom-score>
<view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
<view class="item-title">
<view class="left">
<view class="type">{{ item.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
<view class="txt">早会工作详情</view>
</view>
<view class="item-content u-line-3">
{{ item.eventMsg || '暂无内容~' }}
<view class="right">早会工作</view>
</view>
<view class="item-content u-line-3">
海航技术专项布置〔2024〕00022号： 首6709飞机1月10日广州航前有AC ESS
BUSSHED信息，同时左侧MCDU和ND黑屏，断电重启无效，排故所需8XH和9XH继电器集团无料的情况，要求采购管理部对使用及库存情况进行核实，尽快安排采购配备。
</view>
<view class="item-footer">
<view class="label">
<global-icon icon="calendar"></global-icon>
<text class="txt">2024-01-10</text>
</view>
<view class="label">
<global-icon icon="idcard"></global-icon>
<text class="txt">陈朝丽测试</text>
</view>
</view>
</view>
......
src/static/css/uni.scss 0 → 100644
.uni-navbar__header {
padding: 0 24rpx !important;
}
src/static/css/uview-plus.scss
......@@ -8,3 +8,4 @@
margin-top: 8rpx;
}
}
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