6 changed files with 380 additions and 145 deletions
@ -0,0 +1,226 @@ |
|||||
|
<template> |
||||
|
<view v-if="showViewToken" class="ring-timing" :style="containerStyles"> |
||||
|
<!-- #ifndef APP-NVUE --> |
||||
|
<view class="ring-timing-half ring-timing-left" :style="leftStyles" @transitionend="onTimingEnd" /> |
||||
|
<view class="ring-timing-half ring-timing-right" :style="rightStyles" /> |
||||
|
<!-- #endif --> |
||||
|
<!-- #ifdef APP-NVUE --> |
||||
|
<view :ref="`leftHalf${showViewToken}`" class="ring-timing-half ring-timing-left" :style="leftStyles" /> |
||||
|
<view :ref="`rightHalf${showViewToken}`" class="ring-timing-half ring-timing-right" :style="rightStyles" /> |
||||
|
<!-- #endif --> |
||||
|
<view class="ring-timing-center" :style="centerStyles"><slot /></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// #ifdef APP-NVUE |
||||
|
const animation = weex.requireModule('animation') |
||||
|
// #endif |
||||
|
|
||||
|
/** |
||||
|
* zwp-ring-timing 圆环计时器，不使用canvas和定时器，仅css |
||||
|
* @property {String} *mode 模式，可选值：timing定时器，chart当作图表用于展示数据（图表模式仅限看看，真要做图表还是用canvas好） |
||||
|
* @property {String} activeColor 进度条走过的颜色 |
||||
|
* @property {String} defaultColor 进度条底色 |
||||
|
* @property {String} centerBgColor 圆环中间区域的背景色 |
||||
|
* @property {Number} radius 圆形半径或整个组件的一半尺寸（包含了圆环的宽度） |
||||
|
* @property {Number} barWidth 圆环宽度 |
||||
|
* @property {Number} startDeg 进度开始的角度 |
||||
|
* @property {Number} duration timing模式的定时时间 |
||||
|
* @property {Number} value chart模式的值（1~100） |
||||
|
* @event {Function} timingEnd timing模式下定时完成的回调 |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
mode: { |
||||
|
validator: value => ['timing', 'chart'].includes(value), |
||||
|
default: 'timing' |
||||
|
}, |
||||
|
activeColor: { |
||||
|
type: String, |
||||
|
default: '#42b983' |
||||
|
}, |
||||
|
defaultColor: { |
||||
|
type: String, |
||||
|
default: '#EEEEEE' |
||||
|
}, |
||||
|
centerBgColor: { |
||||
|
type: String, |
||||
|
default: '#FFFFFF' |
||||
|
}, |
||||
|
radius: { |
||||
|
type: Number, |
||||
|
default: 100 |
||||
|
}, |
||||
|
barWidth: { |
||||
|
type: Number, |
||||
|
default: 10 |
||||
|
}, |
||||
|
startDeg: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
duration: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
value: Number |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
isStart: false, |
||||
|
showViewToken: Date.now() // nvue用来重置进度的 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
containerStyles() { |
||||
|
const { radius, startDeg, activeColor } = this |
||||
|
return { |
||||
|
borderRadius: `${radius}rpx`, |
||||
|
height: `${radius * 2}rpx`, |
||||
|
width: `${radius * 2}rpx`, |
||||
|
transform: `rotate(${startDeg}deg)`, |
||||
|
backgroundColor: activeColor |
||||
|
} |
||||
|
}, |
||||
|
leftStyles() { |
||||
|
const { mode, radius, defaultColor, isStart, duration, value } = this |
||||
|
return { |
||||
|
height: `${radius * 2}rpx`, |
||||
|
width: `${radius}rpx`, |
||||
|
backgroundColor: defaultColor, |
||||
|
borderTopLeftRadius: `${radius}rpx`, |
||||
|
borderBottomLeftRadius: `${radius}rpx`, |
||||
|
...(mode == 'timing' ? { |
||||
|
// #ifndef APP-NVUE |
||||
|
transitionDuration: `${isStart ? duration : 0}s`, |
||||
|
transform: `rotate(${isStart ? 180 : -180}deg)` |
||||
|
// #endif |
||||
|
} : { |
||||
|
transform: `rotate(${-180 + value * 3.6}deg)` |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
rightStyles() { |
||||
|
const { mode, radius, activeColor, defaultColor, isStart, duration, value } = this |
||||
|
return { |
||||
|
height: `${radius * 2}rpx`, |
||||
|
width: `${radius}rpx`, |
||||
|
backgroundColor: defaultColor, |
||||
|
borderTopRightRadius: `${radius}rpx`, |
||||
|
borderBottomRightRadius: `${radius}rpx`, |
||||
|
...(mode == 'timing' ? { |
||||
|
// #ifndef APP-NVUE |
||||
|
backgroundColor: isStart ? activeColor : defaultColor, |
||||
|
transitionDelay: `${isStart ? duration / 2 : 0}s`, |
||||
|
transform: `rotate(${isStart ? 0 : -180}deg)` |
||||
|
// #endif |
||||
|
} : { |
||||
|
backgroundColor: value >= 50 ? activeColor : defaultColor, |
||||
|
transform: `rotate(${value >= 50 ? 0 : -180}deg)`, |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
centerStyles() { |
||||
|
const { radius, centerBgColor, barWidth, startDeg } = this |
||||
|
return { |
||||
|
borderRadius: `${radius - barWidth}rpx`, |
||||
|
height: `${(radius - barWidth) * 2}rpx`, |
||||
|
width: `${(radius - barWidth) * 2}rpx`, |
||||
|
transform: `translate(-50%, -50%) rotate(-${startDeg}deg)`, |
||||
|
backgroundColor: centerBgColor, |
||||
|
left: `${radius}rpx`, |
||||
|
top: `${radius}rpx` |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// #ifdef APP-NVUE |
||||
|
createAnimation(direction, styles, callback = () => {}) { |
||||
|
let { showViewToken, duration } = this |
||||
|
let isLeft = direction == 'left' |
||||
|
animation.transition( |
||||
|
this.$refs[`${direction}Half${showViewToken}`], |
||||
|
{ |
||||
|
styles, |
||||
|
duration: isLeft ? duration * 1000 : 0, |
||||
|
delay: !isLeft ? (duration / 2) * 1000 : 0, |
||||
|
timingFunction: 'linear' |
||||
|
}, |
||||
|
callback |
||||
|
) |
||||
|
}, |
||||
|
// #endif |
||||
|
start() { |
||||
|
if (this.mode == 'chart') return |
||||
|
// #ifndef APP-NVUE |
||||
|
this.isStart = true |
||||
|
// #endif |
||||
|
// #ifdef APP-NVUE |
||||
|
const { createAnimation, activeColor, onTimingEnd } = this |
||||
|
createAnimation('left', { |
||||
|
transform: 'rotate(180deg)' |
||||
|
}, onTimingEnd) |
||||
|
createAnimation('right', { |
||||
|
backgroundColor: activeColor, |
||||
|
transform: 'rotate(0)' |
||||
|
}) |
||||
|
// #endif |
||||
|
}, |
||||
|
end() { |
||||
|
if (this.mode == 'chart') return |
||||
|
// #ifndef APP-NVUE |
||||
|
this.isStart = false |
||||
|
// #endif |
||||
|
// #ifdef APP-NVUE |
||||
|
this.showViewToken = 0 |
||||
|
this.$nextTick(() => { |
||||
|
this.showViewToken = Date.now() |
||||
|
}) |
||||
|
// #endif |
||||
|
}, |
||||
|
onTimingEnd() { |
||||
|
this.$emit('timingEnd') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.ring-timing { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
position: relative; |
||||
|
} |
||||
|
.ring-timing-half { |
||||
|
flex: 1; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
transition-property: transform, background-color; |
||||
|
transition-timing-function: linear; |
||||
|
/* #endif */ |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
transform: rotate(-180deg); |
||||
|
/* #endif */ |
||||
|
} |
||||
|
.ring-timing-left { |
||||
|
transform-origin: right center; |
||||
|
} |
||||
|
.ring-timing-right { |
||||
|
transform-origin: left center; |
||||
|
} |
||||
|
.ring-timing-center { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
position: absolute; |
||||
|
} |
||||
|
</style> |
||||
@ -1,2 +1,8 @@ |
|||||
// 上传文件的扩展名
|
// 上传文件的扩展名
|
||||
export const UPLOAD_EXTENSION = ['.xls', '.xlsx', '.zip', '.exe', '.pdf', '.doc', '.docx', '.ppt', '.pptx']; |
export const UPLOAD_EXTENSION = ['.xls', '.xlsx', '.zip', '.exe', '.pdf', '.doc', '.docx', '.ppt', '.pptx']; |
||||
|
|
||||
|
// 审核的快捷用语
|
||||
|
export const quickWords = { |
||||
|
RESOLVE: ['加油，再接再厉！', '很棒！', '不错，很详细！', '加油，再接再厉'], // 审核通过常用的审批语
|
||||
|
REJECT: ['不详细', '还有需要改进的地方', '驳回审批1', '驳回审批2'], // 审核驳回常用的审批语
|
||||
|
}; |
||||
|
|||||
@ -0,0 +1,85 @@ |
|||||
|
<template> |
||||
|
<!-- 审核通过的modal --> |
||||
|
<u-mask :show="data.mode !== 'HIDE'" @click="handleHide"> |
||||
|
<view class="modal-content-wrap" @click.stop> |
||||
|
<!-- 通过modal的标题 --> |
||||
|
<view class="modal-content-head"> {{ data.mode === 'RESOLVE' ? '审核通过' : '审核驳回' }} </view> |
||||
|
|
||||
|
<view class="modal-content-body"> |
||||
|
<!-- 评分 --> |
||||
|
<view class="flex justify-between mb-4" v-show="data.mode === 'RESOLVE'"> |
||||
|
<u-number-box v-model="score" size="30" input-width="50" :max="100" :min="0" :step="1"></u-number-box> |
||||
|
<view class="w-32 pt-4"> |
||||
|
<u-slider v-model="score" active-color="#34D399" :max="100" :min="0" :step="1"></u-slider> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<u-input v-model="commit" type="textarea" :border="true" :auto-height="true" /> |
||||
|
|
||||
|
<view class="common-list"> |
||||
|
<view v-for="item in words" class="leading-12" @click="commit = item"> |
||||
|
{{ item }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="modal-content-foot"> |
||||
|
<view class="cancel" @click="handleHide"> 取消 </view> |
||||
|
<view class="confirm" @click="handleSubmit(data.mode)"> 确定 </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-mask> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, computed } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { quickWords } from '@/config/deliver'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
data: { type: Object, default: {} }, |
||||
|
}); |
||||
|
const emits = defineEmits(['hide', 'submit-end']); |
||||
|
const store = useStore(); |
||||
|
const words = computed(() => quickWords[props.data.mode]); // 快捷用语 |
||||
|
const projectId = computed(() => store.getters['project/projectId']); |
||||
|
|
||||
|
const commit = ref(''); // 提交的信息 |
||||
|
const score = ref(100); // 评分 |
||||
|
|
||||
|
/** |
||||
|
* 提交评审信息 |
||||
|
* 提交成功后隐藏modal 重置表单控件 |
||||
|
* 给父组件信息 更新值 |
||||
|
* @param {string} mode 'RESOLVE'|'REJECT' |
||||
|
*/ |
||||
|
async function handleSubmit(mode) { |
||||
|
console.log('mode: ', mode); |
||||
|
try { |
||||
|
const deliverRecordId = props.data.deliverRecordId(); |
||||
|
const param = { |
||||
|
projectId: projectId.value, |
||||
|
deliverRecordId, |
||||
|
type: mode === 'RESOLVE' ? 1 : 2, |
||||
|
remark: commit.value, |
||||
|
score: mode === 'RESOLVE' ? score.value : '', |
||||
|
}; |
||||
|
await uni.$u.api.checkDeliver(param); |
||||
|
handleHide(); // 隐藏 + 重置 |
||||
|
uni.$ui.showToast('审核信息提交成功'); |
||||
|
// 通知父组件评审成功 更新信息 |
||||
|
emits('submit-end', mode); |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
uni.$ui.showToast('审核信息提交失败, 请稍后重试'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 隐藏及 重置 |
||||
|
function handleHide() { |
||||
|
emits('hide'); |
||||
|
// 重置相关数据 |
||||
|
score.value = 100; |
||||
|
commit.value = ''; |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue