|
@@ -1,28 +1,50 @@
|
|
|
<template>
|
|
|
<view class="page4-warp">
|
|
|
- <view class="page4-form">
|
|
|
- <up-form labelPosition="top" :model="formData" :rules="formRule" ref="formRef">
|
|
|
- <up-form-item label="护理时间" labelWidth="auto" labelPosition="left" required prop="nursingTime">
|
|
|
- <up-input v-model="formData.nursingTime" disabled disabledColor="#ffffff" border="bottom"
|
|
|
- placeholder="请选择打卡时间" @tap="showTime = true;" />
|
|
|
- </up-form-item>
|
|
|
- <up-form-item :label="`护理打卡(0/${imgNum})`" labelWidth="auto" prop="img" required>
|
|
|
- <view class="flex-row justify-between align-center" style="width: 100%;">
|
|
|
- <up-upload :fileList="fileList" multiple :sizeType="['compressed']" :capture="['camera']"
|
|
|
- @afterRead="afterRead" @delete="deletePic" />
|
|
|
- </view>
|
|
|
- </up-form-item>
|
|
|
- <up-form-item label="备注" labelWidth="auto">
|
|
|
- <up-textarea v-model="formData.remark" placeholder="请输入您的打卡备注" count />
|
|
|
- </up-form-item>
|
|
|
- </up-form>
|
|
|
+ <view class="info-dot">打卡记录({{listTotal}}次)</view>
|
|
|
+ <view class="flow-list">
|
|
|
+ <up-steps current="2" direction="column">
|
|
|
+ <up-steps-item v-for="(flow, index) in listData" :key="index" class="position-relative"
|
|
|
+ :title="flow.nodeTitle">
|
|
|
+ <template #icon>
|
|
|
+ <view class="flow-icon"></view>
|
|
|
+ </template>
|
|
|
+ <template #desc>
|
|
|
+ <view class="flow-des">
|
|
|
+ <view class="flow-des-top">
|
|
|
+ <view> {{flow.createTime??' '}}</view>
|
|
|
+ <view :class="`flow-des-top-tips`">查看</view>
|
|
|
+ </view>
|
|
|
+ <view class="flow-des-bg">
|
|
|
+ <view v-if="flow.fileList.length>0">
|
|
|
+ <view>打卡图片({{flow.imgNum}}张):</view>
|
|
|
+ <view class="flow-des-img">
|
|
|
+ <up-image :src="item" :key="index1" v-for="(item, index1) in flow.fileList"
|
|
|
+ :width="'161rpx'" :height="'161rpx'" :mode="'aspectFill'"
|
|
|
+ :preview-src-list="flow.fileList" lazy-load
|
|
|
+ @error="imgErrorHandle(index, index1)">
|
|
|
+ <template #error>
|
|
|
+ <image src="@/pages/subpack/static/images/error-img.png"
|
|
|
+ style="width: 161rpx;height: 161rpx;" mode="aspectFill" />
|
|
|
+ </template>
|
|
|
+ </up-image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="`flow-des-des`" v-if="flow.remark">
|
|
|
+ {{flow.remark}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </up-steps-item>
|
|
|
+ </up-steps>
|
|
|
</view>
|
|
|
-
|
|
|
- <u-datetime-picker :show="showTime" v-model="timeValue" mode="datetime" closeOnClickOverlay
|
|
|
- @cancel="showTime = false" @close="showTime = false" @confirm="timeConfirm" />
|
|
|
<view class="btn-box">
|
|
|
<view class="flex-row ">
|
|
|
- <up-button class="up-button" type="primary" @tap="checkTap">确定打卡</up-button>
|
|
|
+ <up-button class="up-button" type="error" style="width: 250rpx;" @tap="dieHandle">死亡</up-button>
|
|
|
+ <view class="btn-place"></view>
|
|
|
+ <up-button class="up-button" type="success" style="width: 250rpx;" @tap="endHandle">结束</up-button>
|
|
|
+ <view class="btn-place"></view>
|
|
|
+ <up-button class="up-button" type="primary" @tap="clockHandle">打卡</up-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -30,26 +52,23 @@
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- computed,
|
|
|
- onMounted
|
|
|
+ ref
|
|
|
} from 'vue';
|
|
|
import {
|
|
|
useStore
|
|
|
} from 'vuex';
|
|
|
import {
|
|
|
onLoad,
|
|
|
- onUnload
|
|
|
} from "@dcloudio/uni-app"
|
|
|
import {
|
|
|
- getImgNumber,
|
|
|
- addCareClocks,
|
|
|
- uploadImg
|
|
|
+ getClockList
|
|
|
} from '@/common/config/application-api.js'
|
|
|
+ import errorImage from '@/pages/subpack/static/images/error-img.png';
|
|
|
+
|
|
|
+ const listData = ref([]);
|
|
|
+ const listTotal = ref(0);
|
|
|
|
|
|
|
|
|
- const store = useStore();
|
|
|
const props = defineProps({
|
|
|
item: {
|
|
|
type: Object,
|
|
@@ -59,139 +78,159 @@
|
|
|
}
|
|
|
})
|
|
|
|
|
|
- const showTime = ref(false);
|
|
|
- const timeValue = ref(new Date().getTime());
|
|
|
- const formRef = ref(null);
|
|
|
- const fileList = ref([]);
|
|
|
- const formData = reactive({
|
|
|
- img: [],
|
|
|
- remark: '', //意见
|
|
|
- nursingTime: '', //护理时间
|
|
|
- })
|
|
|
- const formRule = reactive({
|
|
|
- nursingTime: [{
|
|
|
- required: true,
|
|
|
- message: '请选择护理时间',
|
|
|
- trigger: ['blur', 'change']
|
|
|
- }],
|
|
|
- img: [{
|
|
|
- required: true,
|
|
|
- message: '请上传图片',
|
|
|
- trigger: ['blur', 'change']
|
|
|
- }]
|
|
|
- })
|
|
|
- //点击打卡
|
|
|
- function checkTap() {
|
|
|
- formRef.value.validate().then(res => {
|
|
|
- if(res) uni.$u.toast('校验通过')
|
|
|
- else uni.$u.toast('校验失败');
|
|
|
- })
|
|
|
- }
|
|
|
|
|
|
- function timeConfirm(e) {
|
|
|
- // console.log('timeConfirm=>', e);
|
|
|
- timeValue.value = e.value;
|
|
|
- formData.nursingTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
|
|
- showTime.value = false;
|
|
|
- }
|
|
|
- //删除图片
|
|
|
- function deletePic(event) {
|
|
|
- fileList.value.splice(event.index, 1);
|
|
|
- }
|
|
|
- //新增图片
|
|
|
- async function afterRead(event) {
|
|
|
- // 当设置 multiple 为 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,
|
|
|
- Object.assign(item, {
|
|
|
- status: "success",
|
|
|
- message: "",
|
|
|
- url: result,
|
|
|
- })
|
|
|
- );
|
|
|
- fileListLen++;
|
|
|
+ function getList() {
|
|
|
+ if (!props.item.applyId) return false;
|
|
|
+ let params = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 50,
|
|
|
+ applyId: props.item.applyId
|
|
|
}
|
|
|
+ getClockList({
|
|
|
+ params
|
|
|
+ }).then(data => {
|
|
|
+ //数组倒叙
|
|
|
+ listData.value = data.reverse();
|
|
|
+ listData.value.map(v => {
|
|
|
+ const imgs = v.imgPaths.split(",").filter(item => item.trim() !== "");
|
|
|
+ let fileList = []
|
|
|
+ imgs.forEach(function(item) {
|
|
|
+ let url = uni.$u.http.config.baseURL + '/dev-api/' + item;
|
|
|
+ fileList.push(url);
|
|
|
+ })
|
|
|
+ //截取前三张图片
|
|
|
+ v.fileList = fileList.slice(0, 3);
|
|
|
+ })
|
|
|
+ listTotal.value = data.length;
|
|
|
+ })
|
|
|
}
|
|
|
-/**
|
|
|
- * TODO 上传图片有问题,上传的时间是选择 还是当前时间
|
|
|
- * 如果今天上传的护理记录 是否还可以继续上传 一天上传几次护理打卡记录
|
|
|
- */
|
|
|
-
|
|
|
- //上传图片
|
|
|
- function uploadFilePromise(url) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- let a = uni.uploadFile({
|
|
|
- url: "http://127.0.0.1/dev-api/care/clocks/upload", // 仅为示例,非真实的接口地址
|
|
|
- filePath: url,
|
|
|
- name: "file",
|
|
|
- formData: {
|
|
|
- applyId: 12,
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- console.log('uploadImg=>', res);
|
|
|
- resolve(res.data.data);
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- /* uploadImg({
|
|
|
- filePath: url,
|
|
|
- name: 'file'
|
|
|
- }).then(res => {
|
|
|
- console.log('uploadImg=>', res);
|
|
|
- resolve(res.data.data);
|
|
|
- }) */
|
|
|
- });
|
|
|
+
|
|
|
+ function imgErrorHandle(index, index1) {
|
|
|
+ listData.value[index].fileList[index1] = errorImage;
|
|
|
}
|
|
|
|
|
|
- //获取打卡图片数量
|
|
|
- const imgNum = ref(0);
|
|
|
+ // 死亡
|
|
|
+ function dieHandle() {
|
|
|
|
|
|
- function getNumber() {
|
|
|
- getImgNumber({
|
|
|
- params: {
|
|
|
- key: 'need_img_num'
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- imgNum.value = res.number;
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
+ //结束
|
|
|
+ function endHandle() {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //打卡
|
|
|
+ function clockHandle() {
|
|
|
+ uni.$u.route('/pages/subpack/pages/nurse/clockIn', {
|
|
|
+ id: props.item.applyId
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function init() {
|
|
|
+ getList();
|
|
|
}
|
|
|
-
|
|
|
- onMounted(()=>{
|
|
|
- getNumber();
|
|
|
- })
|
|
|
+
|
|
|
+ init();
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .page4-warp {
|
|
|
- padding: 30rpx;
|
|
|
+ .flow-icon {
|
|
|
+ width: 18rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #207DFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-dot {
|
|
|
+ position: relative;
|
|
|
+ margin: 20rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #0B0B0B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-dot::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 12rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ top: calc(50% - 6rpx);
|
|
|
+ left: 0;
|
|
|
+ background: #4794FF;
|
|
|
}
|
|
|
|
|
|
- .page4-form {
|
|
|
+ .flow-list {
|
|
|
+ margin: 24rpx !important;
|
|
|
padding: 30rpx;
|
|
|
border-radius: 10rpx;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
+ .flow-time {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #888888;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-des {
|
|
|
+
|
|
|
+ &-bg {
|
|
|
+ background: rgba(115, 190, 255, 0.08);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ padding: 24rpx 40rpx 30rpx 40rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &-tips {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #207DFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-tips1 {
|
|
|
+ color: #1FBC99;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-tips0 {
|
|
|
+ color: #FA7E00;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-tips2 {
|
|
|
+ color: #fa3534;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-des {
|
|
|
+ margin-top: 25rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #888888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-des-img {
|
|
|
+ display: flex;
|
|
|
+ gap: 10rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
.btn-box {
|
|
|
padding: 20rpx 36rpx;
|
|
|
background-color: #fff;
|
|
|
position: fixed;
|
|
|
bottom: calc(50px + var(--status-bar-height));
|
|
|
/* bottom: 50px; */
|
|
|
- left: 0;
|
|
|
width: 690rpx;
|
|
|
+
|
|
|
+ .btn-place {
|
|
|
+ width: 50rpx;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|