Skip to content

M
mocp-uniapp
Commit 51f6717c by pangchong
Options

feat: 提交

parent cd290bec
Showing with 615 additions and 45 deletions
src/components/global-button/global-button.vue
......@@ -81,5 +81,12 @@ const getSize = computed(() => {
background-color: $uni-color-error;
color: #fff;
}
&.text {
color: $uni-color-primary;
background-color: transparent;
&::after {
border: none;
}
}
}
</style>
src/components/global-empty/global-empty.vue
......@@ -49,6 +49,8 @@ const getTextStyle = computed(() => {
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
flex: none;
image {
margin-bottom: 40rpx;
}
......
src/components/global-navbar/global-navbar.vue
......@@ -33,11 +33,11 @@ const ps = defineProps({
},
leftWidth: {
type: Number,
default: 120
default: 80
},
rightWidth: {
type: Number,
default: 120
default: 80
}
})
</script>
......
src/components/global-page/global-page.vue
<template>
<z-paging ref="paging" :refresher-enabled="refresherEnabled" :refresher-only="true" :refresher-threshold="refresherThreshold" @query="queryList">
<z-paging
ref="paging"
v-model="dataList"
:refresher-enabled="refresherEnabled"
:refresher-threshold="refresherThreshold"
:auto-show-back-to-top="autoShowBackToTop"
:loading-more-enabled="refresherEnabled"
:back-to-top-bottom="backToTopBottom"
show-refresher-update-time
:hide-empty-view="!refresherEnabled"
@query="query"
>
<template #empty v-if="!dataList.length && refresherEnabled">
<global-empty></global-empty>
</template>
<template #top>
<view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
<global-navbar :title="title" v-if="showNavbar">
<template #left>
<uni-icons type="left" size="16" @tap="goBack"></uni-icons>
</template>
</global-navbar>
<slot name="top"></slot>
</template>
<slot></slot>
......@@ -11,12 +30,27 @@
</z-paging>
</template>
<script setup>
import { ref } from 'vue'
import { ref, watch } from 'vue'
const dataList = ref([])
const es = defineEmits(['update:modelValue', 'query'])
const paging = ref()
const ps = defineProps({
showNavbar: {
type: Boolean,
default: true
},
title: {
type: String,
default: ''
},
modelValue: {
type: Array,
default: () => []
},
custom: {
type: Boolean,
default: false
default: true
},
// 是否开启下拉刷新 Boolean true
refresherEnabled: {
......@@ -27,18 +61,53 @@ const ps = defineProps({
type: [String, Boolean],
default: '150rpx'
},
// 是否启用加载更多数据
loadingMoreEnabled: {
autoShowBackToTop: {
type: Boolean,
default: false
default: true
},
backToTopBottom: {
type: [Number, String],
default: '160rpx'
}
})
const complete = (data) => {
paging.value?.complete(data || [])
}
watch(
() => ps.modelValue,
(val) => {
dataList.value = val
},
{ immediate: true }
)
watch(
dataList,
(val) => {
es('update:modelValue', val)
},
{ deep: true }
)
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//列表加载
const paging = ref()
const queryList = () => {
paging.value?.complete()
const query = (pageIndex, pageSize) => {
if (ps.refresherEnabled) {
es('query', { pageIndex, pageSize })
}
if (!dataList.value.length) {
complete(dataList.value)
}
}
//返回
const goBack = () => {
uni.navigateBack()
}
defineExpose({
complete,
reload: () => {
paging.value?.reload()
}
})
</script>
<style scoped></style>
src/components/global-picker/global-picker.vue 0 → 100644
<template>
<picker mode="selector" :range="getRange" @change="onChange">
<view class="picker placeholder" :class="{ placeholder: !!selectedValue }">
<text>{{ selectedValue }}</text>
<uni-icons type="right" size="18" color="#86909C"></uni-icons>
</view>
</picker>
</template>
<script setup>
import { computed, ref } from 'vue'
const es = defineEmits(['update:modelValue'])
const ps = defineProps({
options: {
type: Array,
default: function () {
return []
}
}
})
const selectedValue = ref('请选择')
const getRange = computed(() => {
return ps.options.map((option) => option.label)
})
const onChange = (event) => {
const index = event.detail.value
selectedValue.value = ps.options[index].label
es('update:modelValue', ps.options[index].value)
}
</script>
<style lang="scss" scoped>
.picker {
display: flex;
align-items: center;
&.placeholder {
color: #86909c;
}
uni-icons {
margin-top: 6rpx;
}
}
</style>
src/pages.json
......@@ -30,29 +30,45 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/chat/index",
"style": {
"navigationBarTitleText": "沟通"
"navigationBarTitleText": "沟通",
"navigationStyle": "custom"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "个人中心"
"navigationBarTitleText": "个人中心",
"navigationStyle": "custom"
}
},
{
"path": "pages/experience/index",
"style": {
"navigationBarTitleText": "经验库"
"navigationBarTitleText": "经验库",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assessment-records/list",
"style": {
"navigationBarTitleText": "考核记录",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assessment-records/index",
"path": "pages/panel/assessment-records/details",
"style": {
"navigationBarTitleText": "考核记录"
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assessment-records/edit",
"style": {
"navigationBarTitleText": "考核记录登记",
"navigationStyle": "custom"
}
}
],
......@@ -91,7 +107,7 @@
},
"condition": {
//模式配置，仅开发期间生效
"current": 1, //当前激活的模式（list 的索引项）
"current": 0, //当前激活的模式（list 的索引项）
"list": [
{
"name": "test", //模式名称
......
src/pages/login/index.vue
<template>
<global-page>
<global-page custom>
<view class="login-wrap">
<view class="login-header">
<image src="/static/image/login/Vector.png" />
......
src/pages/panel/app-center/index.vue
<template>
<global-page custom>
<global-page :showNavba="false">
<template #top>
<global-navbar title="应用中心">
<template #left>
......@@ -63,7 +63,7 @@ const goBack = () => {
}
//跳转
const goTo = () => {
uni.navigateTo({ url: '/pages/panel/assessment-records/index' })
uni.navigateTo({ url: '/pages/panel/assessment-records/list' })
}
</script>
<style lang="scss" scoped>
......
src/pages/panel/assessment-records/components/card-details.vue 0 → 100644
<template>
<view class="card">
<view class="card-title">
<view class="left">
<global-icon :icon="type == 'appeal' ? 'email' : 'message'" color="#1D2129"></global-icon>
<text>{{ getIitle }}</text>
</view>
<view class="right" v-if="edit">
<global-button type="text">添加</global-button>
</view>
</view>
<view class="card-content">
<template v-if="type == 'appeal'">
<view class="card-content-row">
<view>申诉跟踪</view>
</view>
<view class="card-content-image">
<image src="/static/image/panel/page-bg.png" />
</view>
</template>
<template v-else>
<view class="card-content-row" v-for="item in getData" :key="item.label">
<view>{{ item.label }}</view>
<text>-</text>
</view>
<view class="card-content-desc">
<view class="label">
<global-icon icon="idcard" color="#1D2129"></global-icon>
<text>-</text>
</view>
<view class="label">
<global-icon icon="calendar" color="#1D2129"></global-icon>
<text>-</text>
</view>
</view>
</template>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
// company,quality,appeal
type: {
type: String,
default: 'company'
},
titleIcon: {
type: String,
default: 'message'
},
edit: {
type: Boolean,
default: false
}
})
const getData = computed(() => {
if (ps.type == 'company') {
return [
{
label: '公司值班经理',
value: ''
},
{
label: '公司值班经理意见',
value: ''
},
{
label: '公司值班经理意见描述',
value: ''
}
]
}
if (ps.type == 'quality') {
return [
{
label: '品质中心经理',
value: ''
},
{
label: '品质中心经理意见',
value: ''
},
{
label: '品质中心经理意见描述',
value: ''
}
]
}
return {}
})
const getIitle = computed(() => {
if (ps.type == 'company') {
return '公司值班信息'
}
if (ps.type == 'quality') {
return '品质中心信息'
}
if (ps.type == 'appeal') {
return '申诉状态'
}
return ''
})
</script>
<style lang="scss" scoped>
.card {
margin-top: 16rpx;
padding: 16rpx 24rpx;
border-radius: 12rpx;
color: #1d2129;
background: #ffffff;
&-title {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #f4f4f4;
padding-bottom: 16rpx;
.left {
display: flex;
align-items: center;
text {
margin-left: 8rpx;
}
}
}
&-content {
padding-top: 16rpx;
&-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
&-desc,
.label {
display: flex;
align-items: center;
justify-content: flex-end;
.label {
margin-left: 16rpx;
text {
margin-left: 16rpx;
}
}
}
&-image {
image {
width: 100%;
}
}
}
}
</style>
src/pages/panel/assessment-records/constants/details.scss 0 → 100644
.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;
}
}
&-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.left {
display: flex;
align-items: center;
.left-icon {
margin-right: 16rpx;
}
}
}
}
&-body {
border-top: 2rpx solid #F4F4F4;
border-bottom: 2rpx solid #F4F4F4;
padding: 16rpx 0;
&-top {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
text {
margin-left: 4rpx;
}
}
.right {
text{
margin-left: 24rpx;
}
}
}
&-bottom{
margin-top: 16rpx;
font-size: 30rpx;
line-height: 42rpx;
}
}
&-footer{
padding-top: 16rpx;
&-top{
color: #1D2129;
display: flex;
align-items: center;
text{
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;
text{
margin-left: 16rpx;
}
&:first-child{
margin-right: 32rpx;
}
}
}
}
}
}
src/pages/panel/assessment-records/details.vue 0 → 100644
<template>
<global-page :showNavbar="false">
<template #top>
<global-navbar title="190机型管控中心">
<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">
<view class="details">
<view class="details-header">
<view class="details-header-top">
<view class="txt">OPEN</view>
<score-details type="warning"></score-details>
</view>
<view class="details-header-bottom">
<view class="left">
<global-icon class="left-icon" icon="Vector" size="24"></global-icon>
<view class="txt">B1004 A33</view>
</view>
<view class="right">2024-04-01</view>
</view>
</view>
<view class="details-body">
<view class="details-body-top">
<view class="left">
<global-icon icon="mind-mapping"></global-icon>
<text>来源编号:24242424</text>
</view>
<view class="right">
中南基地
<text>基地MCC</text>
</view>
</view>
<view class="details-body-bottom">
3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工作，次日早上8:00航前正常安排天津=乌鲁木齐=和田航班。
天津航空B-6837飞机3月31日夜间检查发现右发反推有油渍需停场排故，海技天津MCC发布飞机非计划停场，造成原计划4月01日B-6837执飞的天津=乌鲁木齐=和田航班延误；
为避免延误，PPD主动调整计划性工作，保障运行，协调调整定检计划，将原计划4月1-2日（停场2天）执行的32F6飞机专项定检工作调整至4
</view>
</view>
<view class="details-footer">
<view class="details-footer-top">
<global-icon icon="subscribed" color="#1D2129"></global-icon>
<text>生产组织</text>
</view>
<view class="details-footer-center">参考《海航技术运行品质过程考核规定》考核事项第8条..</view>
<view class="details-footer-bottom">
<view class="person-info">
<global-icon icon="idcard"></global-icon>
<text>当班人员：李大同</text>
</view>
<view class="person-info">
<global-icon icon="idcard"></global-icon>
<text>当班人员：李大同</text>
</view>
</view>
</view>
</view>
<card-details type="company"></card-details>
<card-details type="quality"></card-details>
<card-details type="appeal"></card-details>
</view>
</global-page>
</template>
<script setup>
import CardDetails from './components/card-details.vue'
//跳转
const goTo = () => {
uni.navigateTo({ url: 'edit' })
}
//返回
const goBack = () => {
uni.navigateBack()
}
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
</style>
src/pages/panel/assessment-records/edit.vue 0 → 100644
<template>
<global-page title="考核记录登记">
<view class="content">
<view class="form">
<view class="form-item">
<view class="form-item-label">事件来源</view>
<input class="form-item-input" type="text" placeholder="请输入" />
</view>
<view class="form-item">
<view class="form-item-label">基地/职能部门</view>
<global-picker></global-picker>
</view>
<view class="form-item">
<view class="form-item-label">考核对象</view>
<global-picker></global-picker>
</view>
<view class="form-item">
<view class="form-item-label">机号</view>
<global-picker></global-picker>
</view>
<view class="form-item">
<view class="form-item-label">客户</view>
<global-picker></global-picker>
</view>
<view class="form-item">
<view class="form-item-label">机型</view>
<global-picker></global-picker>
</view>
<view class="form-item">
<view class="form-item-label">日期</view>
<global-picker></global-picker>
</view>
<view class="form-item textarea">
<view class="form-item-label">事件描述</view>
<textarea placeholder="请输入" />
</view>
<view class="form-item">
<view class="form-item-label">事件类别</view>
<global-picker></global-picker>
</view>
<view class="form-item">
<view class="form-item-label">考核类型</view>
<global-picker></global-picker>
</view>
<view class="form-item textarea">
<view class="form-item-label">考核依据</view>
<textarea placeholder="请输入" />
</view>
<view class="form-item">
<view class="form-item-label">分值</view>
<input class="form-item-input" type="text" placeholder="请输入" />
</view>
<view class="form-item">
<view class="form-item-label">当班人员</view>
<input class="form-item-input" type="text" placeholder="请输入" />
</view>
</view>
<card-details type="company" edit></card-details>
<card-details type="quality" edit></card-details>
</view>
<template #bottom>
<view class="submit-btn">
<global-button type="primary" size="large">保存</global-button>
</view>
</template>
</global-page>
</template>
<script setup>
import { ref } from 'vue'
import CardDetails from './components/card-details.vue'
</script>
<style lang="scss" scoped>
.content {
padding-bottom: 140rpx;
.form {
background: #fff;
&-item {
display: flex;
justify-content: space-between;
padding: 24rpx 32rpx;
border-bottom: 2rpx solid #f4f4f4;
&-label {
color: rgba(0, 0, 0, 0.9);
}
&-input {
text-align: right;
}
&.textarea {
flex-direction: column;
textarea {
margin-top: 8rpx;
height: 80rpx;
}
}
}
}
}
.submit-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
</style>
src/pages/panel/assessment-records/index.vue → src/pages/panel/assessment-records/list.vue
<template>
<global-page :custom="false">
<global-page title="考核记录" ref="pageRef" v-model="dataList" @query="getList" refresherEnabled hide-empty-view>
<template #top>
<z-tabs :list="tabList" @change="tabsChange" bar-width="80rpx" bg-color="#f7f8fa" />
</template>
<view class="list">
<view class="item" v-for="item in 3" :key="item">
<view class="item" v-for="(item, index) in dataList" :key="index" @tap="goTo">
<view class="item-title">
<view class="desc">
<view class="type">OPEN</view>
<view class="txt">190机型管控中心</view>
<view class="place">华北基地</view>
</view>
<score-details></score-details>
</view>
<view class="item-content">
3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工
</view>
</view>
<view class="item" v-for="item in 4" :key="item">
<view class="item-title">
<view class="desc">
<view class="type">OPEN</view>
<view class="txt">190机型管控中心</view>
<view class="place">华北基地</view>
</view>
<score-details type="warning"></score-details>
<score-details :type="index % 2 == 0 ? 'success' : 'warning'"></score-details>
</view>
<view class="item-content">
3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工
......@@ -36,15 +23,27 @@
<script setup>
import { ref } from 'vue'
import ScoreDetails from '../components/score-details.vue'
const tabIndex = ref(0)
const tabList = ref(['OPEN', 'CLOSE', '全部'])
//导航切换
const tabsChange = (index) => {
tabIndex.value = index
pageRef.value?.reload()
}
//加载
const pageRef = ref()
const dataList = ref([])
const getList = (opt) => {
setTimeout(() => {
pageRef.value?.complete([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
}, 500)
}
//跳转
const goTo = () => {
uni.navigateTo({ url: 'details' })
}
</script>
<style lang="scss" scoped>
@import './constants/index.scss';
@import './constants/list.scss';
</style>
src/pages/panel/constants/panel-navbar.scss
......@@ -42,7 +42,7 @@
align-items: center;
margin: 0 32rpx;
border-radius: 16rpx;
padding: 12rpx 72rpx 12rpx 72rpx;
padding: 12rpx 128rpx 12rpx 128rpx;
.list-item {
text-align: center;
&-image {
......
src/pages/panel/index.vue
<template>
<image class="page-bg" src="/static/image/panel/page-bg.png" />
<global-page custom>
<global-page :showNavbar="false">
<!-- 导航栏 -->
<template #top>
<panel-navbar></panel-navbar>
......
src/pages/panel/panel-menu.vue
......@@ -39,7 +39,7 @@ const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0)
//跳转
const goTo = () => {
uni.navigateTo({ url: '/pages/panel/assessment-records/index' })
uni.navigateTo({ url: '/pages/panel/assessment-records/list' })
}
//跳转应用中心
const goAppCenter = () => {
......
src/pages/panel/panel-navbar.vue
......@@ -24,12 +24,12 @@
<view class="list-item-title">跟机任务</view>
<view class="list-item-txt">24</view>
</view>
<view class="list-item-line"></view>
<!-- <view class="list-item-line"></view>
<view class="list-item">
<image class="list-item-image" src="/static/image/panel/AOGrw.png" />
<view class="list-item-title">AOG任务</view>
<view class="list-item-txt">24</view>
</view>
</view> -->
</view>
</view>
</template>
......
vite.config.js
......@@ -4,7 +4,7 @@ import path from "node:path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
uni()
],
resolve: {
alias: {
......
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