Skip to content

M
mocp-uniapp
Commit 93b00d6f by pangchong
Options

feat: 提交

parent 9582a027
Showing with 264 additions and 281 deletions
src/App.vue
......@@ -21,6 +21,8 @@ export default {
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import 'uview-plus/index.scss';
// 修改uview-plus样式
@import '@/static/css/uview-plus.scss';
/*每个页面公共css */
page {
font-size: 28rpx;
......
src/components/global-form-item/global-form-item.vue deleted 100644 → 0
<template>
<view class="uni-form-item" :class="{ labelTop: labelPosition == 'top' }">
<view class="uni-form-item-label" :style="{ width: labelWidth ? labelWidth + 'rpx' : 'auto', color: labelColor }">
<uni-icons v-if="required" class="required-icon" name="required-icon" color="#f00"></uni-icons>
{{ label }}
<text v-if="must" class="must-icon">*</text>
</view>
<view class="uni-form-item-body">
<view class="uni-form-item-content">
<slot></slot>
</view>
<uni-icons v-if="arrow" :name="arrowName" :color="arrowColor" :size="35"></uni-icons>
</view>
</view>
</template>
<script setup>
const ps = defineProps({
labelWidth: {
type: Number,
default: 0
},
label: {
type: String,
default: ''
},
labelPosition: {
type: String,
default: 'left'
},
arrow: {
type: Boolean,
default: false
},
arrowName: {
type: String,
default: 'icon-arrow-right'
},
labelColor: {
type: String,
default: '#1D2129'
},
arrowColor: {
type: String,
default: '#999'
},
required: {
type: Boolean,
default: false
},
must: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
})
</script>
<style lang="scss" scoped>
.uni-form-item {
display: flex;
border-bottom: 2rpx solid #f4f4f4;
background: #fff;
padding: 24rpx 32rpx;
font-size: 28rpx;
&.labelTop {
flex-direction: column;
.uni-form-item-content {
margin-top: 8rpx;
}
}
&-label {
font-size: 28rpx;
margin-right: 20rpx;
min-width: 20%;
max-width: 60%;
.required-icon {
width: 28rpx;
}
.must-icon {
color: red;
position: relative;
bottom: -3rpx;
}
}
&-body {
flex: auto;
overflow: hidden;
display: flex;
font-size: 28rpx;
color: #4e5969;
align-items: center;
}
&-content {
flex: auto;
display: flex;
overflow: hidden;
justify-content: flex-end;
font-size: 28rpx;
:deep(textarea) {
height: 80rpx;
width: 100%;
}
:deep(.input-placeholder),
:deep(.uni-input-input),
:deep(input) {
flex: auto;
text-align: right;
font-size: 28rpx;
}
}
}
</style>
src/components/global-picker/global-picker.vue
<template>
<picker mode="selector" :range="getRange" @change="onChange" :disabled="disabled" :value="getPickerValue">
<view class="picker placeholder" :class="{ placeholder: !!getVal }">
<view class="picker placeholder" :class="{ placeholder: !!getVal }" :style="getStyle">
<text>{{ getVal }}</text>
<uni-icons type="right" size="18" color="#86909C"></uni-icons>
</view>
......@@ -34,6 +34,10 @@ const ps = defineProps({
type: String,
default: 'value'
},
align: {
type: String,
default: 'right'
},
placeholder: {
type: String,
default: '请选择'
......@@ -43,6 +47,11 @@ const ps = defineProps({
default: false
}
})
const getStyle = computed(() => {
return {
textAlign: ps.align
}
})
const selectedValue = ref()
//获取options
const getOptions = computed(() => {
......@@ -81,13 +90,13 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.picker {
display: flex;
align-items: center;
line-height: 40rpx;
&.placeholder {
color: #86909c;
}
uni-icons {
margin-top: 6rpx;
position: relative;
top: 4rpx;
}
}
</style>
src/components/global-upload-image/global-upload-image.vue deleted 100644 → 0
<template>
<view class="upload">
<view class="upload-image">
<image src="/static/image/login/upload.png" />
<view class="upload-del">
<uni-icons type="closeempty" :size="14" color="#fff"></uni-icons>
</view>
</view>
<view class="upload-button" @tap="handleUpload">
<uni-icons type="plusempty" :size="24" color="rgba(0, 0, 0, 0.4)"></uni-icons>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
//上传图片
const handleUpload = () => {
// 调用拍照/选择图片
// 选择图片条件编译
// #ifdef H5 || APP-PLUS
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替
uni.chooseImage({
count: 1,
success: (res) => {
// 文件路径
const tempFilePaths = res.tempFilePaths
// 上传
uploadFile(tempFilePaths[0])
}
})
// #endif
// #ifdef MP-WEIXIN
// uni.chooseMedia 仅支持微信小程序端
uni.chooseMedia({
// 文件个数
count: 1,
// 文件类型
mediaType: ['image'],
success: (res) => {
// 本地路径
const { tempFilePath } = res.tempFiles[0]
// 上传
uploadFile(tempFilePath)
}
})
// #endif
}
// 文件上传-兼容小程序端、H5端、App端
const uploadFile = (file) => {
// 文件上传
uni.uploadFile({
url: '/member/profile/avatar',
name: 'file',
filePath: file,
success: (res) => {
if (res.statusCode === 200) {
const avatar = JSON.parse(res.data).result.avatar
uni.showToast({ icon: 'success', title: '更新成功' })
} else {
uni.showToast({ icon: 'error', title: '出现错误' })
}
}
})
}
</script>
<style lang="scss" scoped>
.upload {
display: flex;
flex-wrap: wrap;
&-image {
position: relative;
margin-right: 16rpx;
image {
width: 160rpx;
height: 160rpx;
}
}
&-del {
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
width: 32rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
&-button {
width: 160rpx;
height: 160rpx;
display: flex;
align-items: center;
justify-content: center;
background: #f3f3f3;
}
}
</style>
src/components/global-upload/global-upload.vue 0 → 100644
<template>
<up-upload
:width="width"
:height="height"
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
multiple
:maxCount="10"
:previewFullImage="true"
>
<slot>
<view class="upload-button" :style="getUploadButtonSize">
<uni-icons type="plusempty" :size="24" color="rgba(0, 0, 0, 0.4)"></uni-icons>
</view>
</slot>
</up-upload>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
modelValue: {
type: Array,
default: () => []
},
width: {
type: [String, Number],
default: 155
},
height: {
type: [String, Number],
default: 155
},
url: {
type: String,
default: ''
}
})
const getUploadButtonSize = computed(() => {
return {
width: ps.width + 'rpx',
height: ps.height + 'rpx'
}
})
const fileList = ref([])
// 删除图片
const deletePic = (event) => {
fileList.value.splice(event.index, 1)
}
// 新增图片
const afterRead = async (event) => {
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = fileList.value.length
lists.map((item) => {
fileList.value.push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await uploadFilePromise(lists[i].url)
let item = fileList.value[fileListLen]
fileList.value.splice(fileListLen, 1, {
...item,
status: 'success',
message: '',
url: result
})
fileListLen++
}
}
const uploadFilePromise = (url) => {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: ps.url,
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
})
})
}
watch(
fileList,
(val) => {
es('update:modelValue', val)
},
{ deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
.upload-button {
display: flex;
align-items: center;
justify-content: center;
background: #f3f3f3;
}
</style>
src/main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
import pinia from './store'
import uviewPlus from 'uview-plus'
import uviewPlus, { setConfig } from 'uview-plus'
import * as message from '@/utils/message'
import * as tool from '@/utils/tool'
// 引入字体
......@@ -14,6 +14,22 @@ export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
app.use(uviewPlus)
setConfig({
// 修改$u.config对象的属性
config: {
// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
unit: 'rpx'
},
// 修改$u.props对象的属性
props: {
// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
radio: {
size: 15
}
// 其他组件属性配置
// ......
}
})
return {
app
}
......
src/pages/panel/appraisal-record/add.vue
<template>
<global-page title="添加公司值班信息" showEdit @handleCancel="handleCancel" @handleSave="handleSave">
<view class="form">
<uni-forms>
<global-form-item label="公司值班经理">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="公司值班经理意见">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="公司值班经理意见描述" label-position="top">
<textarea placeholder="请输入" />
</global-form-item>
</uni-forms>
<up-form labelPosition="left" labelWidth="auto">
<up-form-item label="公司值班经理" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="公司值班经理意见" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="公司值班经理意见描述" borderBottom labelPosition="top">
<up-textarea placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"></up-textarea>
</up-form-item>
</up-form>
</view>
</global-page>
</template>
......@@ -30,5 +30,6 @@ const handleSave = () => {
<style lang="scss" scoped>
.form {
background: #fff;
padding: 0 32rpx;
}
</style>
src/pages/panel/appraisal-record/details.vue
......@@ -99,12 +99,16 @@ onLoad(() => {
uni.$once('appraisalRecordDetials', (data) => {
details.value = data
file.value = JSON.parse(details.value.file)
console.log(file.value)
})
})
//跳转
const goTo = () => {
uni.navigateTo({ url: 'edit' })
uni.navigateTo({
url: 'edit',
success: () => {
uni.$emit('appraisalRecordEdit', details.value)
}
})
}
//返回
const goBack = () => {
......
src/pages/panel/appraisal-record/edit.vue
......@@ -2,57 +2,87 @@
<global-page title="考核记录登记">
<view class="content">
<view class="form">
<uni-forms>
<global-form-item label="事件来源">
<input type="text" placeholder="请输入" />
</global-form-item>
<global-form-item label="基地/职能部门">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="考核对象">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="机号">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="客户">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="机型">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="日期">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="事件描述" label-position="top">
<textarea placeholder="请输入" />
</global-form-item>
<global-form-item label="事件类别">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="考核类型">
<global-picker></global-picker>
</global-form-item>
<global-form-item label="考核依据" label-position="top">
<textarea placeholder="请输入" />
</global-form-item>
<global-form-item label="分值">
<input type="text" placeholder="请输入" />
</global-form-item>
<global-form-item label="当班人员">
<input type="text" placeholder="请输入" />
</global-form-item>
</uni-forms>
<up-form labelPosition="left" labelWidth="auto">
<up-form-item label="事件来源" borderBottom>
<up-input border="none" inputAlign="right" placeholder="请输入"></up-input>
</up-form-item>
<up-form-item label="基地/职能部门" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="考核对象" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="机号" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="客户" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="机型" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="日期" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="事件描述" borderBottom labelPosition="top">
<up-textarea placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"></up-textarea>
</up-form-item>
<up-form-item label="事件类别" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="考核类型" borderBottom>
<global-picker aligh="right"></global-picker>
</up-form-item>
<up-form-item label="考核依据" borderBottom labelPosition="top">
<up-textarea placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"></up-textarea>
</up-form-item>
<up-form-item label="分值" borderBottom>
<up-input border="none" inputAlign="right" placeholder="请输入"></up-input>
</up-form-item>
<up-form-item label="当班人员" borderBottom>
<up-input border="none" inputAlign="right" placeholder="请输入"></up-input>
</up-form-item>
</up-form>
</view>
<card-details type="company" edit @handleAdd="handleAdd"></card-details>
<card-details type="quality" edit @handleAdd="handleAdd"></card-details>
<card-details
type="company"
title="公司值班信息"
showfooter
:idcard="details.dmName"
:calendar="details.optionSaveTime"
v-if="details"
edit
@handleAdd="handleAdd"
>
<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"
v-if="details"
edit
@handleAdd="handleAdd"
>
<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>
<view class="appeal">
<view class="appeal-title">
<text>申诉情况</text>
<global-picker></global-picker>
</view>
<view class="appeal-content">
<global-upload-image></global-upload-image>
<global-upload v-model="fileList"></global-upload>
</view>
</view>
</view>
......@@ -67,7 +97,18 @@
<script setup>
import { ref } from 'vue'
import CardDetails from './components/card-details.vue'
import CardDetailsItem from './components/card-details-item.vue'
import { onLoad } from '@dcloudio/uni-app'
import { showData } from '@/utils/tool'
const details = ref()
onLoad(() => {
uni.$once('appraisalRecordEdit', (data) => {
details.value = data
})
})
const fileList = ref([])
// 添加
const handleAdd = () => {
uni.navigateTo({ url: 'add' })
}
......@@ -77,6 +118,7 @@ const handleAdd = () => {
padding-bottom: 140rpx;
.form {
background: #fff;
padding: 0 32rpx;
}
.appeal {
margin-top: 16rpx;
......
src/pages/panel/index.vue
......@@ -13,6 +13,10 @@
<script setup>
import PanelNavbar from './panel-navbar.vue'
import PanelMenu from './panel-menu.vue'
import useBaseStore from '@/store/base'
const userBase = useBaseStore()
userBase.getAircraftNumbers()
</script>
<style lang="scss" scoped>
.page-bg {
......
src/static/css/uview-plus.scss 0 → 100644
.u-form-item__body {
padding: 24rpx 0 !important;
.u-form-item__body__left__content__label {
color: #1d2129;
font-size: 28rpx;
}
.u-textarea {
margin-top: 8rpx;
}
}
src/store/base.js
import { getAircraftNumbersApi } from '@/api/base'
import { defineStore } from 'pinia'
const useBaseStore = defineStore('base', {
......@@ -6,7 +7,9 @@ const useBaseStore = defineStore('base', {
},
getters: {},
actions: {
async getAircraftNumbers() {
const res = await getAircraftNumbersApi({})
}
},
// 配置持久化
persist: false
......
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