Skip to content

M
mocp-uniapp
Commit 9582a027 by pangchong
Options

feat: 引入uview-plus

parent 260b15d3
Showing with 310 additions and 163 deletions
jsconfig.json
......@@ -9,7 +9,8 @@
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
"@uni-helper/uni-ui-types",
"uview-plus/types"
]
}
}
\ No newline at end of file
package-lock.json
......@@ -23,9 +23,12 @@
"@dcloudio/uni-mp-xhs": "3.0.0-4010520240507001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4010520240507001",
"@dcloudio/uni-ui": "^1.5.5",
"clipboard": "^2.0.11",
"dayjs": "^1.11.11",
"lodash": "^4.17.21",
"pina": "^0.20.2204228",
"pinia-plugin-persistedstate": "^3.2.1",
"uview-plus": "^3.2.22",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9"
},
......@@ -5381,6 +5384,16 @@
"dev": true,
"peer": true
},
"node_modules/clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
......@@ -5644,6 +5657,11 @@
"node": ">=10"
}
},
"node_modules/dayjs": {
"version": "1.11.11",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
"integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
......@@ -5723,6 +5741,11 @@
"node": ">=0.4.0"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
......@@ -6425,6 +6448,14 @@
"node": ">=4"
}
},
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/gopd": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
......@@ -10365,6 +10396,11 @@
"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
},
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
},
"node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
......@@ -10833,6 +10869,11 @@
"resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz",
"integrity": "sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw=="
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/tinycolor2": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
......@@ -11216,6 +11257,18 @@
"node": ">= 0.4.0"
}
},
"node_modules/uview-plus": {
"version": "3.2.22",
"resolved": "https://registry.npmmirror.com/uview-plus/-/uview-plus-3.2.22.tgz",
"integrity": "sha512-ouhq0CCGP/ElR7eCCu0rBFNPTGW/EctcrxKIerjj1DOkEIY9BwKBbdI0VTSSkMFnr6RFejSQLBw/aKkqd6Q+7g==",
"dependencies": {
"clipboard": "^2.0.11",
"dayjs": "^1.11.3"
},
"engines": {
"HBuilderX": "^3.1.0"
}
},
"node_modules/v8-to-istanbul": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
......
package.json
......@@ -55,9 +55,12 @@
"@dcloudio/uni-mp-xhs": "3.0.0-4010520240507001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4010520240507001",
"@dcloudio/uni-ui": "^1.5.5",
"clipboard": "^2.0.11",
"dayjs": "^1.11.11",
"lodash": "^4.17.21",
"pina": "^0.20.2204228",
"pinia-plugin-persistedstate": "^3.2.1",
"uview-plus": "^3.2.22",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9"
},
......
src/App.vue
......@@ -18,7 +18,9 @@ export default {
}
</script>
<style>
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import 'uview-plus/index.scss';
/*每个页面公共css */
page {
font-size: 28rpx;
......
src/api/base.js 0 → 100644
import { http } from '@/utils/http'
export const getAircraftNumbersApi = (data, config) => {
return http({
method: 'POST',
url: '/resource/flight/getAircraftNumbers',
data,
config
})
}
src/components/global-picker/dictData.js
export const hobby = [
{
label: '学习',
value: 1
},
{
label: '乒乓球',
value: 2
},
{
label: '羽毛球',
value: 3
}
export const opinionType = [
{ label: 'N/A', value: 0 },
{ label: '不同意', value: 1 },
{ label: '同意', value: 2 }
]
export const appealInfo = [
{ label: '无', value: 0 },
{ label: '申诉跟踪', value: 1 },
{ label: '申诉关闭', value: 2 }
]
src/components/global-picker/useDict.js 0 → 100644
import * as dictData from './dictData'
import { cloneDeep } from 'lodash'
export function useDict(dictkey, opt) {
if (!dictkey && !opt?.data) {
return []
}
let currentDictList = cloneDeep((opt?.data ? opt.data : (dictData)[dictkey] || []))
if (opt?.filter) {
currentDictList = currentDictList.filter((item) => {
return opt.filter && opt.filter(item)
})
}
return currentDictList
}
export function useGetDictByLabel(dictkey, label, option) {
const enterSplit = option?.enterSplit || ','
const outputSplit = option?.enterSplit || '；'
const labelArr = label.split(enterSplit)
const values = []
useDict(dictkey, { filter: option?.filter, data: option?.data }).forEach((item) => {
if (
labelArr.some((label) => {
return label == item['label']
})
) {
values.push(item['value'])
}
})
return values.join(outputSplit)
}
export function useGetDictByValue(dictkey, value = '', option) {
const enterSplit = option?.enterSplit || ','
const outputSplit = option?.enterSplit || '；'
const valueArr = String(value).split(enterSplit)
const labels = []
useDict(dictkey, { filter: option?.filter, data: option?.data }).forEach((item) => {
if (
valueArr.some((value) => {
return value == String(item['value'])
})
) {
labels.push(item['label'])
}
})
return labels.join(outputSplit)
}
export function useGetDictByProp(dictkey, value = '', prop, option) {
const enterSplit = option?.enterSplit || ','
const outputSplit = option?.enterSplit || '；'
const valueArr = String(value).split(enterSplit)
const labels = []
useDict(dictkey, { filter: option?.filter, data: option?.data }).forEach((item) => {
if (
valueArr.some((value) => {
return value == String(item['value'])
})
) {
labels.push(item[prop])
}
})
return labels.join(outputSplit)
}
src/main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
import pinia from './store'
import uviewPlus from 'uview-plus'
import * as message from '@/utils/message'
import * as tool from '@/utils/tool'
// 引入字体
......@@ -12,6 +13,7 @@ uni.$tool = tool
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
app.use(uviewPlus)
return {
app
}
......
src/manifest.json
......@@ -38,7 +38,8 @@
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
],
"versionCode":1001
},
/* ios打包配置 */
"ios" : {},
......
src/pages.json
......@@ -4,7 +4,10 @@
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}
},
"pages": [
......
src/pages/panel/appraisal-record/components/card-details-item.vue 0 → 100644
<template>
<view class="card-details-item">
<view class="label">{{ label }}</view>
<text>
<slot>-</slot>
</text>
</view>
</template>
<script setup>
const ps = defineProps({
label: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.card-details-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
</style>
src/pages/panel/appraisal-record/components/card-details.vue
......@@ -2,8 +2,8 @@
<view class="card">
<view class="card-title">
<view class="left">
<global-icon :icon="type == 'appeal' ? 'email' : 'message'" color="#1D2129"></global-icon>
<text>{{ getIitle }}</text>
<global-icon :icon="titleIcon" color="#1D2129"></global-icon>
<text>{{ title }}</text>
</view>
<view class="right" v-if="edit">
<global-button type="text" @tap="handleAdd">添加</global-button>
......@@ -11,36 +11,29 @@
</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>
<slot></slot>
</template>
<template v-else>
<view class="card-content-row" v-for="item in getData" :key="item.label">
<view>{{ item.label }}</view>
<text>-</text>
<slot></slot>
</template>
</view>
<view class="card-content-desc">
<slot name="footer" v-if="showfooter">
<view class="card-footer">
<view class="label">
<global-icon icon="idcard" color="#1D2129"></global-icon>
<text>-</text>
<text>{{ showData(idcard, '-') }}</text>
</view>
<view class="label">
<global-icon icon="calendar" color="#1D2129"></global-icon>
<text>-</text>
<text>{{ showData(calendar) ? timeStampFormat(calendar) : '-' }}</text>
</view>
</view>
</template>
</view>
</slot>
</view>
</template>
<script setup>
import { computed } from 'vue'
import { showData, timeStampFormat } from '@/utils/tool'
const es = defineEmits(['handleAdd'])
const ps = defineProps({
// company,quality,appeal
......@@ -48,6 +41,10 @@ const ps = defineProps({
type: String,
default: 'company'
},
title: {
type: String,
default: ''
},
titleIcon: {
type: String,
default: 'message'
......@@ -55,54 +52,19 @@ const ps = defineProps({
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: ''
showfooter: {
type: Boolean,
default: false
},
{
label: '品质中心经理意见',
value: ''
idcard: {
type: String,
default: '-'
},
{
label: '品质中心经理意见描述',
value: ''
}
]
}
return {}
})
const getIitle = computed(() => {
if (ps.type == 'company') {
return '公司值班信息'
}
if (ps.type == 'quality') {
return '品质中心信息'
}
if (ps.type == 'appeal') {
return '申诉状态'
calendar: {
type: [String, Number],
default: '-'
}
return ''
})
const handleAdd = () => {
es('handleAdd')
......@@ -131,14 +93,8 @@ const handleAdd = () => {
}
&-content {
padding-top: 16rpx;
&-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
&-desc,
.label {
&-footer {
display: flex;
align-items: center;
justify-content: flex-end;
......@@ -149,11 +105,5 @@ const handleAdd = () => {
}
}
}
&-image {
image {
width: 100%;
}
}
}
}
</style>
src/pages/panel/appraisal-record/constants/details.scss
......@@ -31,8 +31,8 @@
}
}
&-body {
border-top: 2rpx solid #F4F4F4;
border-bottom: 2rpx solid #F4F4F4;
border-top: 2rpx solid #f4f4f4;
border-bottom: 2rpx solid #f4f4f4;
padding: 16rpx 0;
&-top {
display: flex;
......@@ -46,47 +46,50 @@
}
}
.right {
text{
text {
margin-left: 24rpx;
}
}
}
&-bottom{
&-bottom {
margin-top: 16rpx;
font-size: 30rpx;
line-height: 42rpx;
}
}
&-footer{
&-footer {
padding-top: 16rpx;
&-top{
color: #1D2129;
&-top {
color: #1d2129;
display: flex;
align-items: center;
text{
text {
margin-left: 16rpx;
}
}
&-center{
&-center {
line-height: 40rpx;
padding: 16rpx 0;
}
&-bottom{
color: #1D2129;
&-bottom {
color: #1d2129;
display: flex;
justify-content: flex-end;
.person-info{
.person-info {
display: flex;
align-items: center;
text{
text {
margin-left: 16rpx;
}
&:first-child{
&:first-child {
margin-right: 32rpx;
}
}
}
}
}
.appeal-status {
color: #1d2129;
margin-bottom: 16rpx;
}
}
src/pages/panel/appraisal-record/details.vue
<template>
<global-page :showNavbar="false">
<template #top>
<global-navbar :title="showData(details.appraisee)">
<global-navbar :title="showData(details?.appraisee, '暂无标题~')">
<template #left>
<uni-icons type="left" size="16" @tap="goBack"></uni-icons>
</template>
......@@ -24,22 +24,22 @@
<global-icon class="left-icon" icon="Vector" size="24" color="#DD4012"></global-icon>
<view class="txt">{{ details.ac }} {{ details.acType }}</view>
</view>
<view class="right"><uni-dateformat :date="details.eventTime" format="yyyy-MM-dd"></uni-dateformat></view>
<view class="right">{{ timeStampFormat(details.eventTime, { format: 'YYYY-MM-DD' }) }}</view>
</view>
</view>
<view class="details-body">
<view class="details-body-top">
<view class="left">
<global-icon icon="mind-mapping"></global-icon>
<text>来源编号:{{ details.dmUid }}</text>
<text>来源编号:{{ showData(details.acOwn, '暂无~') }}</text>
</view>
<view class="right">
{{ details.department }}
<text>{{ details.appraisee }}</text>
{{ showData(details.department) }}
<text>{{ showData(details.appraisee) }}</text>
</view>
</view>
<view class="details-body-bottom">
{{ details.eventMsg || '暂无内容~' }}
{{ showData(details.eventMsg, '暂无内容~') }}
</view>
</view>
<view class="details-footer">
......@@ -60,9 +60,27 @@
</view>
</view>
</view>
<card-details type="company"></card-details>
<card-details type="quality"></card-details>
<card-details type="appeal"></card-details>
<card-details type="company" title="公司值班信息" showfooter :idcard="details.dmName" :calendar="details.optionSaveTime">
<card-details-item label="公司值班经理">{{ showData(details.dmName, '-') }}</card-details-item>
<card-details-item label="公司值班经理意见">
{{ showData(details.opinionType) ? useGetDictByValue('opinionType', details.opinionType) : '-' }}
</card-details-item>
<card-details-item label="公司值班经理意见描述">{{ showData(details.dmMsg, '-') }}</card-details-item>
</card-details>
<card-details type="quality" title="品质中心信息" showfooter :idcard="details.qmName" :calendar="details.qualitySaveTime">
<card-details-item label="品质中心经理">{{ showData(details.qmName, '-') }}</card-details-item>
<card-details-item label="品质中心经理意见">
{{ showData(details.qualityOpinionType) ? useGetDictByValue('opinionType', details.qualityOpinionType) : '-' }}
</card-details-item>
<card-details-item label="品质中心经理意见描述">{{ showData(details.qmMsg, '-') }}</card-details-item>
</card-details>
<card-details type="appeal" title="申诉状态" titleIcon="email">
<template v-if="showData(details.appealInfo)">
<view class="appeal-status">{{ useGetDictByValue('appealInfo', details.appealInfo) }}</view>
<image :src="item.fileUrl" v-for="item in file" :key="item.id" />
</template>
<global-empty v-else></global-empty>
</card-details>
</view>
</global-page>
</template>
......@@ -70,46 +88,18 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import CardDetails from './components/card-details.vue'
import CardDetailsItem from './components/card-details-item.vue'
import { ref } from 'vue'
import { showData } from '@/utils/tool'
import { showData, timeStampFormat } from '@/utils/tool'
import { useGetDictByValue } from '@/components/global-picker/useDict'
const details = ref({
id: '1771004152946348034',
eventSource: '测试',
department: '西北基地',
appraisee: '执管MCC',
ac: 'B1012',
acOwn: 'DRJ',
acType: 'A32',
eventTime: 1711036800000,
eventMsg: '测试',
eventType: 1,
examineType: '信息管理',
examineBasis: '测试',
score: 1.0,
onDutyUser: '测试',
dmUid: '10653',
opinionType: 0,
optionSaveTime: -1,
optionSaveUid: '-1',
appealInfo: -1,
qmUid: '-1',
qualityOpinionType: -1,
qualitySaveTime: -1,
qualitySaveUid: '-1',
dmName: '唐恒山',
qmName: null,
dmSaveName: null,
qmSaveName: null,
status: 1,
dmMsg: '',
qmMsg: '',
file: '[]',
emailSendTime: 0
})
const details = ref()
const file = ref([])
onLoad(() => {
uni.$once('appraisalRecordDetials', (data) => {
console.log(data)
details.value = data
file.value = JSON.parse(details.value.file)
console.log(file.value)
})
})
//跳转
......
src/store/base.js 0 → 100644
import { defineStore } from 'pinia'
const useBaseStore = defineStore('base', {
state: () => {
return {}
},
getters: {},
actions: {
},
// 配置持久化
persist: false
})
export default useBaseStore
src/uni.scss
......@@ -12,13 +12,15 @@
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
@import 'uview-plus/theme.scss';
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #165DFF;
$uni-color-success: #00B42A;
$uni-color-warning: #FF7D00;
$uni-color-error: #F53F3F;
$uni-color-primary: #165dff;
$uni-color-success: #00b42a;
$uni-color-warning: #ff7d00;
$uni-color-error: #f53f3f;
/* 文字基本颜色 */
$uni-text-color: #333; // 基本色
......
src/utils/dayjs.js 0 → 100644
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入本地化语言
dayjs.locale('zh-cn') // 使用本地化语言
export default dayjs
src/utils/tool.js
// utils/tool.js
export const showData = (data) => {
import Day from './dayjs'
/**
* 数据展示
* null => ''
*/
export const showData = (data, result = '') => {
if (typeof data === 'undefined' || data === null) {
return ''
return result
}
if (typeof data === 'string' && data.trim() === '') {
return ''
return result
}
if (data.trim() === '-1' || data.trim() === -1) {
return ''
if (data === '-1' || data === -1) {
return result
}
if (Array.isArray(data) && data.length === 0) {
return ''
return result
}
if (typeof data === 'object' && Object.keys(data).length === 0) {
return ''
return result
}
return data
}
/**
* 时间戳格式化
* 1715072168340 => 2024-05-07 16:56:08
*/
export const timeStampFormat = (timeStamp, opt) => {
if (!timeStamp) {
return ''
}
timeStamp = parseInt(String(timeStamp))
const format = opt?.format || 'YYYY-MM-DD HH:mm:ss'
return Day(timeStamp).format(format)
}
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