Skip to content

M
mocp-uniapp
Commit e50ee0c4 by pangchong
Options

feat: 去掉uni相关

parent a4d2a833
Showing with 284 additions and 237 deletions
components.d.ts
......@@ -8,6 +8,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
// 全局组件
GlobalAlbum: typeof import('./src/mocp/components/global-album/global-album.vue')['default']
GlobalButton: typeof import('./src/mocp/components/global-button/global-button.vue')['default']
GlobalDate: typeof import('./src/mocp/components/global-date/global-date.vue')['default']
GlobalEmpty: typeof import('./src/mocp/components/global-empty/global-empty.vue')['default']
......
src/mocp/components/global-album/global-album.vue 0 → 100644
<template>
<!-- 全局图片预览 -->
<up-album
v-if="fileList.length"
:urls="fileList"
:keyName="keyName"
:singleSize="getSingleSize"
:multipleSize="getMultipleSize"
:singleMode="singleMode"
:multipleMode="multipleMode"
></up-album>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
fileList: {
type: Array,
default: () => {
return []
}
},
keyName: {
type: String,
default: 'fileUrl'
},
singleSize: {
type: Number,
default: 654
},
multipleSize: {
type: Number,
default: 654
},
singleMode: {
type: String,
default: 'widthFix'
},
multipleMode: {
type: String,
default: 'widthFix'
}
})
const getSingleSize = computed(() => {
return ps.singleSize + 'rpx'
})
const getMultipleSize = computed(() => {
return ps.multipleSize + 'rpx'
})
</script>
<style lang="scss" scoped></style>
src/mocp/components/global-navbar/global-navbar.vue
<template>
<!-- 全局自定义navbar -->
<view class="navbar">
<up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false">
<view class="mocp-navbar">
<up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false" :titleStyle="getTitleStyle">
<template #left>
<slot name="left"></slot>
</template>
......@@ -13,6 +13,8 @@
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
title: {
type: String,
......@@ -21,6 +23,19 @@ const ps = defineProps({
bgColor: {
type: String,
default: '#f7f8fa'
},
titleStyle: {
type: Object,
default: () => {
return {}
}
}
})
const getTitleStyle = computed(() => {
return {
...ps.titleStyle,
color: '#4e5969',
fontSize: '34rpx'
}
})
</script>
......
src/mocp/components/global-page-swiper/global-page-swiper.vue
......@@ -7,7 +7,7 @@
<!-- 自定义导航栏 -->
<global-navbar :title="title" v-if="showNavbar">
<template #left>
<uni-icons type="left" size="16" @tap="goBack"></uni-icons>
<up-icon name="arrow-left" size="16" @tap="goBack"></up-icon>
</template>
</global-navbar>
<!-- tab切换 -->
......
src/mocp/components/global-page/global-page.vue
......@@ -23,7 +23,7 @@
<!-- 自定义导航栏 -->
<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="handleLeftClick"></uni-icons>
<up-icon v-if="navLeftType == 'icon'" :name="navLeftIcon" size="16" @tap="handleLeftClick"></up-icon>
<view v-if="navLeftType == 'text'" class="cancel" @tap="handleLeftClick">{{ navLeftText }}</view>
</template>
<template #right v-if="showNavRight">
......@@ -89,7 +89,7 @@ const ps = defineProps({
//nav左边插槽图标
navLeftIcon: {
type: String,
default: 'left'
default: 'arrow-left'
},
//nav左边插槽文字
navLeftText: {
......
src/mocp/components/global-upload/global-upload.vue
......@@ -12,7 +12,7 @@
>
<slot>
<view class="upload-button" :style="getUploadButtonSize">
<uni-icons :type="uploadIcon" :size="24" color="rgba(0, 0, 0, 0.4)"></uni-icons>
<up-icon :name="uploadIcon" size="24" color="rgba(0, 0, 0, 0.4)"></up-icon>
</view>
</slot>
</up-upload>
......@@ -21,6 +21,7 @@
<script setup>
import { computed, ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { upload } from 'mocp/utils/http'
const es = defineEmits(['handleUpload'])
const ps = defineProps({
......@@ -42,7 +43,7 @@ const ps = defineProps({
},
uploadIcon: {
type: String,
default: 'plusempty'
default: 'plus'
}
})
const getUploadButtonSize = computed(() => {
......@@ -76,7 +77,7 @@ const afterRead = async (event) => {
})
for (let i = 0; i < lists.length; i++) {
try {
const res = await uploadFilePromise(lists[i].url)
const res = await upload({ url: ps.url, filePath: lists[i].url, name: 'file' })
if (res.code == 200) {
fileList.value.splice(fileListLen, 1, {
...res.data,
......@@ -114,22 +115,6 @@ watch(
},
{ deep: true }
)
const uploadFilePromise = (url) => {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: ps.url,
name: 'file',
filePath: url,
success: (res) => {
resolve(JSON.parse(res.data))
},
fail: (res) => {
console.error(JSON.parse(res.data))
reject(false)
}
})
})
}
</script>
<style lang="scss" scoped>
.upload-button {
......
src/mocp/utils/http.js
/**
* 添加拦截器:
* 拦截 request 请求
* 拦截 uploadFile 文件上传
*
* TODO:
* 1. 非 http 开头需拼接地址
* 2. 请求超时
* 3. 添加小程序端请求头标识
* 4. 添加 token 请求头标识
*/
import useUserStore from 'mocp/store/user'
const baseURL = 'https://hna-platform.anyremote.cn'
......@@ -42,87 +30,67 @@ class ServiceLoading {
}
}
const serviceLoading = new ServiceLoading()
// 添加拦截器
const httpInterceptor = {
// 拦截前触发
invoke(options) {
const userStore = useUserStore()
//responseType
if (options.config?.arraybuffer) {
options.responseType = 'arraybuffer'
}
//loading
const loading = options.config?.loading
serviceLoading.open(loading)
//重组提交数据
if (options.data) {
options.data = {
...options.data,
apiPwd: 'Ifar$2_0160_525_Mocp',
requestFrom: '3',
realUserId: userStore.userInfo?.id
}
//请求拦截器
const httpInterceptor = (options) => {
const userStore = useUserStore()
//responseType
if (options.config?.arraybuffer) {
options.responseType = 'arraybuffer'
}
//loading
const loading = options.config?.loading
serviceLoading.open(loading)
//重组提交数据
if (options.data) {
options.data = {
...options.data,
apiPwd: 'Ifar$2_0160_525_Mocp',
requestFrom: '3',
realUserId: userStore.userInfo?.id
}
// 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 请求超时, 默认 60s
options.timeout = 10000
// 添加小程序端请求头标识
if (options.name == 'file') {
options.formData = {
...options.formData,
apiPwd: 'Ifar$2_0160_525_Mocp',
requestFrom: '6',
uid: userStore.userInfo?.id
}
// 请求超时, 默认 60s
options.timeout = 10000
// 添加小程序端请求头标识
if (options.name == 'file') {
options.formData = {
...options.formData,
apiPwd: 'Ifar$2_0160_525_Mocp',
requestFrom: '6',
uid: userStore.userInfo?.id
}
options.header = {
...options.header
}
} else {
options.header = {
'Content-Type': 'application/x-www-form-urlencoded',
...options.header
}
options.header = {
...options.header
}
// 添加 token 请求头标识
if (userStore.token) {
options.header.Authorization = `Bearer ${userStore.token}`
} else {
options.header = {
'Content-Type': 'application/x-www-form-urlencoded',
...options.header
}
console.log('接口请求信息:', options)
}
// 添加 token 请求头标识
if (userStore.token) {
options.header.Authorization = `Bearer ${userStore.token}`
}
console.log('接口请求信息:', options)
return options
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)
/**
* 请求函数
* @returns Promise
* 1. 返回 Promise 对象
* 2. 获取数据成功
* 2.1 提取核心数据 res.data
* 2.2 添加类型，支持泛型
* 3. 获取数据失败
* 3.1 401错误 -> 清理用户信息，跳转到登录页
* 3.2 其他错误 -> 根据后端错误信息轻提示
* 3.3 网络错误 -> 提示用户换网络
*/
// 2.2 添加类型
//http请求
export const http = (options) => {
options = httpInterceptor(options)
// 1. 返回 Promise 对象
return new Promise((resolve, reject) => {
uni.request({
...options,
// 响应成功
success(res) {
console.log('接口响应结果:', res)
serviceLoading.close()
// 状态码 2xx， axios 就是这样设计的
const statusCode = parseInt(res.statusCode)
const statusCode = res.statusCode
if (statusCode >= 200 && statusCode < 300) {
// 2.1 提取核心数据 res.data
if (res.data.code == 403) {
const userStore = useUserStore()
uni.$mocpMessage.showToast(res.data.message)
......@@ -134,7 +102,6 @@ export const http = (options) => {
resolve(res.data)
}
} else if (statusCode == 401) {
// 401错误 -> 清理用户信息，跳转到登录页
const userStore = useUserStore()
uni.$mocpMessage.showToast(res.data.message)
setTimeout(() => {
......@@ -142,12 +109,10 @@ export const http = (options) => {
}, 500)
reject(res)
} else {
// 其他错误 -> 根据后端错误信息轻提示
uni.$mocpMessage.showToast(res.data.message || '请求错误')
reject(res)
}
},
// 响应失败
fail(err) {
serviceLoading.close()
uni.$mocpMessage.showToast('网络错误，换个网络试试')
......@@ -156,3 +121,44 @@ export const http = (options) => {
})
})
}
//upload请求
export const upload = (options) => {
options = httpInterceptor(options)
return new Promise((resolve, reject) => {
uni.uploadFile({
...options,
success: (res) => {
console.log('接口响应结果:', res)
serviceLoading.close()
const statusCode = res.statusCode
if (statusCode >= 200 && statusCode < 300) {
if (res.data.code == 403) {
const userStore = useUserStore()
uni.$mocpMessage.showToast(res.data.message)
setTimeout(() => {
userStore.handleLogOut()
}, 500)
reject(res)
} else {
resolve(JSON.parse(res.data))
}
} else if (statusCode == 401) {
const userStore = useUserStore()
uni.$mocpMessage.showToast(res.data.message)
setTimeout(() => {
userStore.handleLogOut()
}, 500)
reject(res)
} else {
uni.$mocpMessage.showToast(res.data.message || '请求错误')
reject(res)
}
},
fail: (err) => {
serviceLoading.close()
uni.$mocpMessage.showToast('上传失败')
reject(err)
}
})
})
}
src/pages/modules/mocp/login/constants/index.compositions.js
......@@ -9,28 +9,25 @@ export const loginForm = reactive({
export const loginCode = ref('')
//表单规则
export const rules = reactive({
username: {
rules: [
{
required: true,
errorMessage: '请输入账号'
}
]
},
password: {
rules: [
{
required: true,
errorMessage: '请输入密码'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
username: [
{
required: true,
message: '请输入账号',
trigger: ['blur', 'change']
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: ['blur', 'change']
}
],
verifyCode: [
{
required: true,
message: '请输入验证码',
trigger: ['blur', 'change']
}
]
})
src/pages/modules/mocp/login/constants/index.scss
......@@ -32,11 +32,12 @@
&-image {
margin-left: 20rpx;
width: 200rpx;
height: 70rpx;
height: 76rpx;
background: #d9d9d9;
}
}
.login-btn {
margin-top: 20rpx;
width: 100%;
}
}
src/pages/modules/mocp/login/index.vue
......@@ -9,28 +9,32 @@
<view class="p">登录你的账户</view>
<view class="txt">请输入账号密码登录</view>
</view>
<uni-forms ref="loginFormRef" :modelValue="loginForm" :rules="rules" label-position="top">
<uni-forms-item label="账号" name="username">
<uni-easyinput v-model="loginForm.username" placeholder="请输入账号" type="text" />
</uni-forms-item>
<uni-forms-item label="密码" name="password">
<uni-easyinput v-model="loginForm.password" placeholder="请输入密码" type="password" />
</uni-forms-item>
<uni-forms-item label="验证码" name="verifyCode">
<view class="verify-code">
<uni-easyinput v-model="loginForm.verifyCode" placeholder="请输入验证码" type="text" style="flex: auto" />
<image
class="verify-code-image"
v-if="loginCode && loginForm.username"
:src="loginCode"
mode="scaleToFill"
@tap="getGifCaptcha"
/>
<view class="verify-code-image" v-else></view>
</view>
</uni-forms-item>
</uni-forms>
<global-button class="login-btn" size="large" type="primary" @tap="handleLogin" :loading="loading">登录</global-button>
<view class="mocp-form">
<up-form ref="loginFormRef" labelWidth="auto" :model="loginForm" :rules="rules" label-position="top">
<up-form-item label="账号" prop="username">
<up-input v-model="loginForm.username" placeholder="请输入账号" clearable />
</up-form-item>
<up-form-item label="密码" prop="password">
<up-input v-model="loginForm.password" placeholder="请输入密码" clearable type="password" />
</up-form-item>
<up-form-item label="验证码" prop="verifyCode">
<view class="verify-code">
<up-input v-model="loginForm.verifyCode" placeholder="请输入验证码" style="flex: auto" />
<image
class="verify-code-image"
v-if="loginCode && loginForm.username"
:src="loginCode"
mode="scaleToFill"
@tap="getGifCaptcha"
/>
<view class="verify-code-image" v-else></view>
</view>
</up-form-item>
</up-form>
</view>
<view class="login-btn">
<global-button size="large" type="primary" @tap="handleLogin" :loading="loading">登录</global-button>
</view>
</view>
</global-page>
</template>
......
src/pages/modules/mocp/panel/appraisal-record/add.vue
......@@ -7,7 +7,7 @@
navRightText="保存"
@handleRightClick="handleRightClick"
>
<view class="form">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto">
<up-form-item :label="formData.isDuty == 0 ? '公司值班经理' : '品质中心经理'" :borderBottom="true">
<global-picker pickAlign="right" clearable v-model="formData.mid" :options="selectList" emptyValue="-1"></global-picker>
......@@ -88,7 +88,7 @@ const handleRightClick = async () => {
</script>
<style lang="scss" scoped>
.form {
.mocp-form {
background: #fff;
padding: 0 32rpx;
}
......
src/pages/modules/mocp/panel/appraisal-record/constants/edit.scss
.content {
padding-bottom: 140rpx;
.form {
.mocp-form {
background: #fff;
padding: 0 32rpx;
}
......
src/pages/modules/mocp/panel/appraisal-record/details.vue
......@@ -70,14 +70,7 @@
</card-details>
<card-details type="appeal" title="申诉状态" titleIcon="email">
<view class="appeal-status">{{ useGetDictByValue('appealInfo', details.appealInfo) }}</view>
<up-album
:urls="getFileList"
keyName="fileUrl"
singleSize="654rpx"
multipleSize="654rpx"
singleMode="widthFix"
multipleMode="widthFix"
></up-album>
<global-album :fileList="getFileList"></global-album>
</card-details>
</template>
</global-page>
......
src/pages/modules/mocp/panel/appraisal-record/edit.vue
<template>
<global-page title="考核记录登记" showFooterBtn @handleFooterClick="handleSubmit">
<view class="content">
<view class="form">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules">
<up-form-item label="事件来源" :borderBottom="true">
<up-input border="none" inputAlign="right" placeholder="请输入" clearable v-model="formData.eventSource"></up-input>
......
src/pages/modules/mocp/panel/assign-work/constants/edit-work.scss
.content {
.mocp-form {
background: #fff;
.form {
&-title {
......
src/pages/modules/mocp/panel/assign-work/edit-approval.vue
<template>
<global-page title="添加领导批示" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<up-form-item label="领导批示意见" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
......@@ -12,14 +12,14 @@
border="none"
></up-textarea>
</up-form-item>
</view>
</up-form>
</up-form>
</view>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
.mocp-form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
......
src/pages/modules/mocp/panel/assign-work/edit-decompose.vue
......@@ -9,34 +9,36 @@
footerBtnText="添加分解计划"
@handleFooterClick="handleFooterClick"
>
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="分解计划1" :borderBottom="true" labelPosition="top">
<view class="delete" @tap="handleDelete"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-date pickAlign="right" clearable :emptyValue="-1" placeholder="请选择日期"></global-date>
</up-form-item>
</view>
<view class="form">
<up-form-item label="分解计划2" :borderBottom="true" labelPosition="top">
<view class="delete" @tap="handleDelete"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-date pickAlign="right" clearable :emptyValue="-1" placeholder="请选择日期"></global-date>
</up-form-item>
</view>
</up-form>
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="分解计划1" :borderBottom="true" labelPosition="top">
<view class="delete" @tap="handleDelete"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-date pickAlign="right" clearable :emptyValue="-1" placeholder="请选择日期"></global-date>
</up-form-item>
</view>
<view class="form">
<up-form-item label="分解计划2" :borderBottom="true" labelPosition="top">
<view class="delete" @tap="handleDelete"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-date pickAlign="right" clearable :emptyValue="-1" placeholder="请选择日期"></global-date>
</up-form-item>
</view>
</up-form>
</view>
<up-modal
:width="250"
content="确认删除吗？删除后不可恢复!"
......
src/pages/modules/mocp/panel/assign-work/edit-followUpFeedback.vue
<template>
<global-page title="后续措施反馈" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<up-form-item label="反馈内容" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
......@@ -17,14 +17,14 @@
<up-form-item label="应用分类" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
</view>
</up-form>
</up-form>
</view>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
.mocp-form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
......
src/pages/modules/mocp/panel/assign-work/edit-gzFeedback.vue
<template>
<global-page title="跟踪反馈" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<up-form-item label="跟踪反馈" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
......@@ -9,16 +9,10 @@
border="none"
></up-textarea>
</up-form-item>
</view>
</up-form>
</up-form>
</view>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
}
</style>
<style lang="scss" scoped></style>
src/pages/modules/mocp/panel/assign-work/edit-validate.vue
<template>
<global-page title="工作验证" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<up-form-item label="跟踪要点" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
......@@ -23,14 +23,14 @@
<up-form-item label="工作验证状态" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
</view>
</up-form>
</up-form>
</view>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
.mocp-form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
......
src/pages/modules/mocp/panel/assign-work/edit-work.vue
<template>
<global-page title="添加工作反馈" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<view class="content">
<view class="mocp-form">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<view class="form-item">
......
src/static/mocp/css/uview-plus.scss
// 表单
.u-form-item__body {
padding: 24rpx 0 !important;
.u-form-item__body__left__content__label {
color: $mocp-text-5 !important;
font-size: 28rpx !important;
}
.u-input__content__field-wrapper__field {
color: $mocp-text-4 !important;
}
.u-textarea {
margin-top: 8rpx;
.u-textarea__field {
.mocp-form {
.u-form-item__body {
padding: 24rpx 0 !important;
.u-form-item__body__left__content__label {
color: $mocp-text-5 !important;
font-size: 28rpx !important;
}
.u-input__content__field-wrapper__field {
color: $mocp-text-4 !important;
}
.u-textarea {
margin-top: 8rpx;
.u-textarea__field {
font-size: 28rpx !important;
color: $mocp-text-4 !important;
}
}
}
}
// 头部导航
.u-navbar__content__title {
color: $mocp-text-5 !important;
font-size: 34rpx !important;
}
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