Skip to content

M
mocp-uniapp
Commit 07408627 by pangchong
Options

feat: 调整代码

parent 14cd29be
Showing with 218 additions and 109 deletions
components.d.ts 0 → 100644
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
GlobalButton: typeof import('./src/components/global-button/global-button.vue')['default']
GlobalEmpty: typeof import('./src/components/global-empty/global-empty.vue')['default']
GlobalIcon: typeof import('./src/components/global-icon/global-icon.vue')['default']
GlobalNavbar: typeof import('./src/components/global-navbar/global-navbar.vue')['default']
GlobalPage: typeof import('./src/components/global-page/global-page.vue')['default']
GlobalPageSwiper: typeof import('./src/components/global-page-swiper/global-page-swiper.vue')['default']
GlobalPageSwiperItem: typeof import('./src/components/global-page-swiper-item/global-page-swiper-item.vue')['default']
GlobalPicker: typeof import('./src/components/global-picker/global-picker.vue')['default']
GlobalScore: typeof import('./src/components/global-score/global-score.vue')['default']
GlobalUpload: typeof import('./src/components/global-upload/global-upload.vue')['default']
}
}
src/components/global-button/global-button.vue
<template>
<!-- 全局button -->
<button :class="getClass" :style="style" :loading="loading" :disabled="disabled">
<slot></slot>
</button>
......
src/components/global-empty/global-empty.vue
<template>
<!-- 全局empty -->
<view class="global-empty" :class="class">
<image :src="getImageSrc" :style="getImageStyle" />
<text :style="getTextStyle">
......
src/components/global-icon/global-icon.vue
<template>
<!-- iconfont -->
<!-- 全局iconfont图标 -->
<text class="iconfont" :class="`icon-${icon}`" :style="getIconStyle"></text>
</template>
<script setup>
......
src/components/global-navbar/global-navbar.vue
<template>
<!-- 全局自定义navbar -->
<uni-nav-bar
:title="title"
:border="false"
......
src/components/global-page-swiper-item/global-page-swiper-item.vue
<template>
<!-- 配合global-page-swiper实现左右滑动 -->
<view class="content">
<z-paging
:auto="auto"
......@@ -25,7 +26,7 @@
<script setup>
import { ref, watch } from 'vue'
const paging = ref(null)
const paging = ref()
const dataList = ref([])
// 当前组件是否已经加载过了
const firstLoaded = ref(false)
......@@ -128,6 +129,11 @@ const queryList = (pageIndex, pageSize) => {
paging.value?.complete(false)
}
}
defineExpose({
reload: () => {
paging.value?.reload()
}
})
</script>
<style>
......
src/components/global-page-swiper/global-page-swiper.vue
<template>
<!-- 全局page 带tab切换和左右滑动加载-->
<z-paging-swiper>
<!-- 头部 -->
<template #top>
......@@ -17,6 +18,7 @@
<swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
<swiper-item v-for="(_, index) in tabList" :key="index">
<global-page-swiper-item
:ref="(vc) => (pagingArr[index] = vc)"
:auto="auto"
:tabValue="tabList[current][valueKey]"
:tabIndex="index"
......@@ -138,6 +140,13 @@ const swiperAnimationfinish = (e) => {
current.value = e.detail.current
tabs.value.unlockDx()
}
//获取列表刷新对象
const pagingArr = ref([])
defineExpose({
reload: () => {
pagingArr.value[current.value]?.reload()
}
})
</script>
<style>
......
src/components/global-page/global-page.vue
<template>
<!-- 全局page 不带tab切换-->
<z-paging
ref="paging"
v-model="dataList"
......
src/components/global-picker/global-picker.vue
<template>
<!-- 全局下拉框 -->
<picker
:mode="mode"
:range="getRange"
......@@ -80,22 +81,6 @@ const getStyle = computed(() => {
justifyContent: pickAlign
}
})
const selectedValue = ref('')
watch(
() => ps.modelValue,
(value) => {
if (ps.mode == 'selector') {
const option = getOptions.value.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
if (option) {
selectedValue.value = option[ps.labelField]
} else {
selectedValue.value = ''
}
} else {
selectedValue.value = value
}
}
)
//获取options
const getOptions = computed(() => {
if (ps.dictkey) {
......@@ -113,6 +98,24 @@ const getOptions = computed(() => {
}
}
})
const selectedValue = ref('') //显示的内容
watch(
[() => ps.modelValue, () => ps.options],
(value) => {
if (ps.mode == 'selector') {
const option = getOptions.value.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
if (option) {
selectedValue.value = option[ps.labelField]
} else {
selectedValue.value = ''
}
} else {
selectedValue.value = value
}
},
{ immediate: true }
)
const getRange = computed(() => {
return getOptions.value.map((option) => option[ps.labelField])
})
......@@ -140,6 +143,7 @@ const getPickerValue = computed(() => {
const index = getOptions.value.findIndex((option) => String(option[ps.valueField]) === String(ps.modelValue))
return index > 0 ? index : 0
})
//清空值
const clear = () => {
selectedValue.value = ''
......
src/components/global-upload/global-upload.vue
<template>
<!-- 全局图片下载 -->
<up-upload
:width="width + 'rpx'"
:height="height + 'rpx'"
......@@ -11,14 +12,13 @@
>
<slot>
<view class="upload-button" :style="getUploadButtonSize">
<uni-icons type="plusempty" :size="24" color="rgba(0, 0, 0, 0.4)"></uni-icons>
<uni-icons :type="uploadIcon" :size="24" color="rgba(0, 0, 0, 0.4)"></uni-icons>
</view>
</slot>
</up-upload>
</template>
<script setup>
import { func } from 'uview-plus/libs/function/test'
import { computed, ref, watch } from 'vue'
const es = defineEmits(['handleUpload'])
......@@ -38,6 +38,10 @@ const ps = defineProps({
url: {
type: String,
default: ''
},
uploadIcon: {
type: String,
default: 'plusempty'
}
})
const getUploadButtonSize = computed(() => {
......@@ -47,13 +51,7 @@ const getUploadButtonSize = computed(() => {
}
})
const fileList = ref([])
watch(
() => ps.fileList,
(value) => {
fileList.value = value
}
)
const fileList = ref(ps.fileList)
const getFileList = computed(() => {
return fileList.value.map((item) => {
return { ...item, url: item.fileUrl }
......@@ -104,9 +102,13 @@ function arrayBufferToBinary(buffer) {
// 使用二进制编码器将字节序列转换为字符串
return encoder.encode(new Uint8Array(buffer)).toString()
}
watch(fileList, (value) => {
watch(
fileList,
(value) => {
es('handleUpload', value)
})
},
{ deep: true }
)
const uploadFilePromise = (url, binary) => {
return new Promise((resolve, reject) => {
uni.uploadFile({
......
src/pages/panel/appraisal-record/add.vue
......@@ -29,7 +29,9 @@ import { saveRqmOpinionApi } from '@/api/appraisal-record'
import { getAdminListApi } from '@/api/base'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import useAppraisalRecordStore from '@/store/appraisal-record'
const appraisalRecordStore = useAppraisalRecordStore()
//表单数据
const formData = reactive({
id: '',
......@@ -53,7 +55,7 @@ const getAdminList = async (realName) => {
pageSize: 100,
realName
}
const res = await getAdminListApi(params)
const res = await getAdminListApi(params, { loading: true })
if (res.code == 200) {
selectList.value = res.data.list.map((item) => {
return {
......@@ -69,9 +71,19 @@ const handleCancel = () => {
uni.navigateBack()
}
const handleSave = async () => {
const res = await saveRqmOpinionApi(formData, { loading: true })
const params = {
...formData
}
if (!params.mid) {
params.mid = -1
}
if (!params.opinionType) {
params.opinionType = -1
}
const res = await saveRqmOpinionApi(params, { loading: true })
if (res.code == 200) {
uni.navigateBack()
appraisalRecordStore.getRqmDetails()
uni.$message.showToast(res.message)
} else {
uni.$message.showToast(res.message)
......
src/pages/panel/appraisal-record/components/card-details-item.vue
<template>
<view class="card-details-item">
<view class="label">{{ label }}</view>
<text>
<slot>-</slot>
</text>
<text>{{ value }}</text>
</view>
</template>
......@@ -12,6 +10,10 @@ const ps = defineProps({
label: {
type: String,
default: ''
},
value: {
type: String,
default: ''
}
})
</script>
......@@ -19,7 +21,13 @@ const ps = defineProps({
.card-details-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.label {
min-width: 50%;
}
text {
text-align: right;
word-break: break-all;
}
}
</style>
src/pages/panel/appraisal-record/details.vue
......@@ -15,11 +15,11 @@
<view class="details-header">
<view class="details-header-top">
<view class="txt">{{ details.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
<score-details
<global-score
v-if="details.score != -1"
:type="details.eventType == 1 ? 'success' : 'warning'"
:count="details.score"
></score-details>
></global-score>
</view>
<view class="details-header-bottom">
<view class="left">
......@@ -63,23 +63,25 @@
</view>
</view>
<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-item label="公司值班经理" :value="showData(details.dmName, '-')"></card-details-item>
<card-details-item
label="公司值班经理意见"
:value="details.opinionType != -1 ? useGetDictByValue('opinionType', details.opinionType) : '-'"
></card-details-item>
<card-details-item label="公司值班经理意见描述" :value="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-item label="品质中心经理" :value="showData(details.qmName, '-')"></card-details-item>
<card-details-item
label="品质中心经理意见"
:value="details.qualityOpinionType != -1 ? useGetDictByValue('opinionType', details.qualityOpinionType) : '-'"
></card-details-item>
<card-details-item label="品质中心经理意见描述" :value="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" />
<image :src="item.fileUrl" v-for="(item, index) in getFileList" :key="item.id" @tap="previewImage(index)" />
</template>
<global-empty v-else></global-empty>
</card-details>
......@@ -88,42 +90,39 @@
</template>
<script setup>
import { onShow } 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, timeStampFormat } from '@/utils/tool'
import { useGetDictByValue } from '@/components/global-picker/useDict'
import { getRqmDetailsApi } from '@/api/appraisal-record'
import useAppraisalRecordStore from '@/store/appraisal-record'
import { storeToRefs } from 'pinia'
import { onLoad } from '@dcloudio/uni-app'
const details = ref()
const file = ref([])
//获取详情
const getRqmDetails = async (id) => {
const res = await getRqmDetailsApi({ id }, { loading: true })
if (res.code == 200) {
details.value = res.data
file.value = JSON.parse(res.data.file)
} else {
uni.$message.showToast(res.message)
}
}
const query = defineProps(['id'])
onShow(() => {
getRqmDetails(query.id)
const appraisalRecordStore = useAppraisalRecordStore()
const { details, getFileList } = storeToRefs(appraisalRecordStore)
onLoad(() => {
appraisalRecordStore.setState('id', query.id)
appraisalRecordStore.getRqmDetails()
})
//跳转
const goTo = () => {
uni.navigateTo({
url: 'edit',
success: () => {
uni.$emit('appraisalRecordEdit', details.value)
}
url: 'edit'
})
}
//返回
const goBack = () => {
uni.navigateBack()
uni.$emit('appraisalRecordReload')
}
//图片预览
const previewImage = (index) => {
uni.previewImage({
current: index,
urls: getFileList.value.map((item) => item.fileUrl)
})
}
</script>
<style lang="scss" scoped>
......
src/pages/panel/appraisal-record/edit.vue
......@@ -62,31 +62,35 @@
type="company"
title="公司值班信息"
showfooter
:idcard="formData.dmName"
:calendar="formData.optionSaveTime"
:idcard="details.dmName"
:calendar="details.optionSaveTime"
edit
@handleAdd="handleAdd(0)"
v-if="details"
>
<card-details-item label="公司值班经理">{{ showData(formData.dmName, '-') }}</card-details-item>
<card-details-item label="公司值班经理意见">
{{ showData(formData.opinionType) ? useGetDictByValue('opinionType', formData.opinionType) : '-' }}
</card-details-item>
<card-details-item label="公司值班经理意见描述">{{ showData(formData.dmMsg, '-') }}</card-details-item>
<card-details-item label="公司值班经理" :value="showData(details.dmName, '-')"></card-details-item>
<card-details-item
label="公司值班经理意见"
:value="details.opinionType != -1 ? useGetDictByValue('opinionType', details.opinionType) : '-'"
></card-details-item>
<card-details-item label="公司值班经理意见描述" :value="showData(details.dmMsg, '-')"></card-details-item>
</card-details>
<card-details
type="quality"
title="品质中心信息"
showfooter
:idcard="formData.qmName"
:calendar="formData.qualitySaveTime"
:idcard="details.qmName"
:calendar="details.qualitySaveTime"
edit
@handleAdd="handleAdd(1)"
v-if="details"
>
<card-details-item label="品质中心经理">{{ showData(formData.qmName, '-') }}</card-details-item>
<card-details-item label="品质中心经理意见">
{{ showData(formData.qualityOpinionType) ? useGetDictByValue('opinionType', formData.qualityOpinionType) : '-' }}
</card-details-item>
<card-details-item label="品质中心经理意见描述">{{ showData(formData.qmMsg, '-') }}</card-details-item>
<card-details-item label="品质中心经理" :value="showData(details.qmName, '-')"></card-details-item>
<card-details-item
label="品质中心经理意见"
:value="details.qualityOpinionType != -1 ? useGetDictByValue('opinionType', details.qualityOpinionType) : '-'"
></card-details-item>
<card-details-item label="品质中心经理意见描述" :value="showData(details.qmMsg, '-')"></card-details-item>
</card-details>
<view class="appeal">
<view class="appeal-title">
......@@ -94,7 +98,7 @@
<global-picker pickAlign="right" dictkey="appealInfo" v-model="formData.appealInfo" clearable></global-picker>
</view>
<view class="appeal-content">
<global-upload :fileList="formData.file" url="/resource/uploadFile" @handleUpload="handleUpload"></global-upload>
<global-upload :fileList="getFileList" url="/resource/uploadFile" @handleUpload="handleUpload"></global-upload>
</view>
</view>
</view>
......@@ -110,14 +114,17 @@
import { reactive, 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 { onShow } from '@dcloudio/uni-app'
import { showData } from '@/utils/tool'
import useBaseStore from '@/store/base'
import { useGetDictByValue } from '@/components/global-picker/useDict'
import useAppraisalRecordStore from '@/store/appraisal-record'
import { updateRqmDataApi } from '@/api/appraisal-record'
import { getAcReduceListApi } from '@/api/base'
import { storeToRefs } from 'pinia'
const appraisalRecordStore = useAppraisalRecordStore()
const { details, getFileList } = storeToRefs(appraisalRecordStore)
// 校验规则
const rules = reactive({
eventTime: [
......@@ -159,17 +166,45 @@ const formData = reactive({
qualityOpinionMsg: '',
qualityOpinionType: -1,
status: '',
file: [],
emailSendTime: -1
})
const fileList = ref([])
onShow(() => {
formData.id = details.value.id
formData.ac = details.value.ac
formData.acOwn = details.value.acOwn
formData.acType = details.value.acType
formData.appealInfo = details.value.appealInfo
formData.appraisee = details.value.appraisee
formData.department = details.value.department
formData.dmUid = details.value.dmUid
formData.eventMsg = details.value.eventMsg
formData.eventSource = details.value.eventSource
formData.eventTime = details.value.eventTime
formData.eventType = details.value.eventType
formData.examineBasis = details.value.examineBasis
formData.examineType = details.value.examineType
formData.onDutyUser = details.value.onDutyUser
formData.opinionMsg = details.value.opinionMsg
formData.opinionType = details.value.opinionType
formData.score = details.value.score
formData.qmUid = details.value.qmUid
formData.qualityOpinionMsg = details.value.qualityOpinionMsg
formData.qualityOpinionType = details.value.qualityOpinionType
formData.status = details.value.status
formData.emailSendTime = details.value.emailSendTime
//初始化文件列表
fileList.value = getFileList.value
})
//提交表单
const formRef = ref()
const handleSubmit = async () => {
await formRef.value?.validate()
const params = { ...formData, file: JSON.stringify(file.value) }
const params = { ...formData, file: JSON.stringify(fileList.value) }
const res = await updateRqmDataApi(params, { loading: true })
if (res.code == 200) {
uni.navigateBack()
appraisalRecordStore.getRqmDetails()
uni.$message.showToast(res.message)
} else {
uni.$message.showToast(res.message)
......@@ -193,21 +228,9 @@ const handleAdd = (isDuty) => {
}
})
}
//获取页面内容
const file = ref([])
const details = ref()
onLoad(() => {
uni.$once('appraisalRecordEdit', (data) => {
details.value = data
Object.assign(formData, data)
formData.file = JSON.parse(data.file)
file.value = JSON.parse(data.file)
formData.eventTime = String(data.eventTime)
})
})
//获取文件内容
const handleUpload = (fileList) => {
file.value = fileList
const handleUpload = (data) => {
fileList.value = data
}
//切换机号
const changeAc = async () => {
......
src/pages/panel/appraisal-record/list.vue
<template>
<global-page-swiper title="考核记录" refresherEnabled loadingMoreEnabled :tabList="tabList" :api="getRqmListApi">
<global-page-swiper title="考核记录" refresherEnabled loadingMoreEnabled :tabList="tabList" :api="getRqmListApi" ref="paging">
<template #="{ dataList }">
<view class="list">
<view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
......@@ -9,11 +9,7 @@
<view class="txt">{{ showData(item.appraisee) }}</view>
<view class="place">{{ showData(item.department) }}</view>
</view>
<score-details
v-if="item.score != -1"
:type="item.eventType == 1 ? 'success' : 'warning'"
:count="item.score"
></score-details>
<global-score v-if="item.score != -1" :type="item.eventType == 1 ? 'success' : 'warning'" :count="item.score"></global-score>
</view>
<view class="item-content">
{{ item.eventMsg || '暂无内容~' }}
......@@ -47,6 +43,11 @@ const appraisalRecordStore = useAppraisalRecordStore()
onLoad(() => {
appraisalRecordStore.getRqmOptions()
})
//刷新
const paging = ref()
uni.$on('appraisalRecordReload', () => {
paging.value?.reload()
})
</script>
<style lang="scss" scoped>
@import './constants/list.scss';
......
src/store/appraisal-record.js
import { getRqmOptionsApi } from '@/api/appraisal-record'
import { getRqmDetailsApi, getRqmOptionsApi } from '@/api/appraisal-record'
import { defineStore } from 'pinia'
const useAppraisalRecordStore = defineStore('appraisalRecord', {
......@@ -8,10 +8,16 @@ const useAppraisalRecordStore = defineStore('appraisalRecord', {
appraisee: [],
department: [],
examineType: []
},
id: '',
details: undefined
}
},
getters: {
getFileList(state) {
return state.details?.file || []
}
},
getters: {},
actions: {
async getRqmOptions() {
const res = await getRqmOptionsApi({})
......@@ -20,6 +26,19 @@ const useAppraisalRecordStore = defineStore('appraisalRecord', {
this.selectList.department = res.data.department || []
this.selectList.examineType = res.data.examineType || []
}
},
async getRqmDetails() {
const res = await getRqmDetailsApi({ id: this.id }, { loading: true })
if (res.code == 200) {
this.details = res.data
this.details.file = JSON.parse(res.data.file)
this.details.eventTime = String(res.data.eventTime)
} else {
uni.$message.showToast(res.message)
}
},
setState(...args) {
this.$patch({ [args[0]]: args[1] })
}
},
// 配置持久化
......
src/utils/http.js
......@@ -117,6 +117,7 @@ export const http = (options) => {
...options,
// 响应成功
success(res) {
console.log('接口响应结果:', res)
serviceLoading.close()
// 状态码 2xx， axios 就是这样设计的
const statusCode = parseInt(res.statusCode)
......
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