|
|
@@ -1,268 +1,310 @@
|
|
|
<template>
|
|
|
- <view class="page4-warp">
|
|
|
- <u-navbar class="u-navbar-box" title="护理打卡" placeholder bgColor="transparent" autoBack/>
|
|
|
- <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="`护理打卡(最少上传${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>
|
|
|
+ <view class="page4-warp">
|
|
|
+ <u-navbar class="u-navbar-box" :title="submitType==='0'?'护理打卡':'死亡记录'" placeholder bgColor="transparent"
|
|
|
+ autoBack />
|
|
|
+ <view class="page4-form">
|
|
|
+ <up-form labelPosition="top" :model="formData" :rules="formRule" ref="formRef">
|
|
|
+ <up-form-item v-if="submitType === '0'" label="护理时间" labelWidth="auto" labelPosition="left" required
|
|
|
+ prop="nursingTime">
|
|
|
+ <up-input v-model="formData.nursingTime" disabled disabledColor="#ffffff" border="none"
|
|
|
+ placeholder="请选择打卡时间" />
|
|
|
+ </up-form-item>
|
|
|
+ <up-form-item v-else label="死亡时间" labelWidth="auto" labelPosition="left" required prop="nursingTime">
|
|
|
+ <up-input v-model="formData.nursingTime" disabled disabledColor="#ffffff" border="none"
|
|
|
+ placeholder="请选择死亡时间" />
|
|
|
+ </up-form-item>
|
|
|
+ <up-form-item :label="`护理打卡(最少上传${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']"
|
|
|
+ :maxCount="imgNum" @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>
|
|
|
|
|
|
- <u-datetime-picker ref="datetimePicker" :show="showTime" v-model="timeValue" mode="datetime" closeOnClickOverlay
|
|
|
- @cancel="showTime = false" @close="showTime = false" @confirm="timeConfirm"
|
|
|
- :formatter="formatter"/>
|
|
|
- <view class="btn-box">
|
|
|
- <view class="flex-row ">
|
|
|
- <up-button class="up-button" type="primary" @tap="checkTap">确定打卡</up-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <u-datetime-picker ref="datetimePicker" :show="showTime" v-model="timeValue" mode="datetime" closeOnClickOverlay
|
|
|
+ @cancel="showTime = false" @close="showTime = false" @confirm="timeConfirm" :formatter="formatter" />
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="flex-row ">
|
|
|
+ <up-button class="up-button" type="primary" @tap="checkTap">确定打卡</up-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- computed,
|
|
|
- onMounted
|
|
|
-} from 'vue';
|
|
|
-import {
|
|
|
- useStore
|
|
|
-} from 'vuex';
|
|
|
-import {
|
|
|
- onLoad,
|
|
|
- onUnload,
|
|
|
- onReady
|
|
|
-} from "@dcloudio/uni-app"
|
|
|
-import {
|
|
|
- getImgNumber,
|
|
|
- addCareClocks,
|
|
|
- uploadImgUrl
|
|
|
-} from '@/common/config/application-api.js'
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ computed,
|
|
|
+ onMounted
|
|
|
+ } from 'vue';
|
|
|
+ import {
|
|
|
+ useStore
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onUnload,
|
|
|
+ onReady
|
|
|
+ } from "@dcloudio/uni-app"
|
|
|
+ import {
|
|
|
+ getImgNumber,
|
|
|
+ addCareClocks,
|
|
|
+ uploadImgUrl,
|
|
|
+ uploadImg
|
|
|
+ } from '@/common/config/application-api.js'
|
|
|
|
|
|
+ import dayjs from 'dayjs';
|
|
|
|
|
|
-const store = useStore();
|
|
|
-const props = defineProps({
|
|
|
- item: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {}
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
+ const applyId = ref('');
|
|
|
+ const submitType = ref('');
|
|
|
|
|
|
-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: [{
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- return value.length >= imgNum.value;
|
|
|
- },
|
|
|
- message: '请上传指定数量的图片',
|
|
|
- trigger: ['change', 'blur'],
|
|
|
- }]
|
|
|
-})
|
|
|
|
|
|
-//点击打卡
|
|
|
-function checkTap() {
|
|
|
- // console.log('1=>', fileList.value);
|
|
|
- formData.img = [];
|
|
|
- fileList.value.map(file => {
|
|
|
- formData.img.push(file.url);
|
|
|
- });
|
|
|
- // console.log('2=>', formData);
|
|
|
- formRef.value.validate().then(res => {
|
|
|
- if (res) {
|
|
|
- formData.imgPaths = formData.img.join(',');
|
|
|
- formData.imgNum = formData.img.length;
|
|
|
- delete formData.img;
|
|
|
- addClocks();
|
|
|
- // uni.$u.toast('校验通过')
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
+ const store = useStore();
|
|
|
+ const props = defineProps({
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
-//点击打卡 --新增打卡记录
|
|
|
-function addClocks() {
|
|
|
- let reqClockParams = {
|
|
|
- applyId: props.item.applyId,
|
|
|
- nursingRecordId: props.item.applyId,
|
|
|
- ...formData
|
|
|
- }
|
|
|
- // console.log('reqClockParams=>', reqClockParams);
|
|
|
- addCareClocks(reqClockParams)
|
|
|
- .then(res => uni.$u.toast('打卡成功!'))
|
|
|
- .catch(error => uni.$u.toast('打卡失败!'));
|
|
|
-}
|
|
|
+ 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: [{
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ return value.length >= imgNum.value;
|
|
|
+ },
|
|
|
+ message: '请上传指定数量的图片',
|
|
|
+ trigger: ['change', 'blur'],
|
|
|
+ }]
|
|
|
+ })
|
|
|
|
|
|
-const datetimePicker = ref();
|
|
|
-onReady(() => {
|
|
|
- datetimePicker.value.setFormatter(formatter);
|
|
|
-})
|
|
|
+ onLoad((options) => {
|
|
|
+ console.log('options', options);
|
|
|
+ applyId.value = options.id;
|
|
|
+ submitType.value = options.type;
|
|
|
+ // 获取需上传的图片数量
|
|
|
+ getNumber();
|
|
|
+ // 默认打卡时间，不再选择
|
|
|
+ formData.nursingTime = dayjs().format('YYYY-MM-DD hh:mm:ss')
|
|
|
+ })
|
|
|
|
|
|
-function formatter(type, value) {
|
|
|
- if (type === 'year') {
|
|
|
- return `${value}年`
|
|
|
- }
|
|
|
- if (type === 'month') {
|
|
|
- return `${value}月`
|
|
|
- }
|
|
|
- if (type === 'day') {
|
|
|
- return `${value}日`
|
|
|
- }
|
|
|
- if (type === 'hour') {
|
|
|
- return `${value}时`
|
|
|
- }
|
|
|
- if (type === 'minute') {
|
|
|
- return `${value}分`
|
|
|
- }
|
|
|
- return value
|
|
|
-}
|
|
|
+ //点击打卡
|
|
|
+ function checkTap() {
|
|
|
+ // console.log('1=>', fileList.value);
|
|
|
+ formData.img = [];
|
|
|
+ fileList.value.map(file => {
|
|
|
+ formData.img.push(file.url);
|
|
|
+ });
|
|
|
+ // console.log('2=>', formData);
|
|
|
+ formRef.value.validate().then(res => {
|
|
|
+ if (res) {
|
|
|
+ formData.imgPaths = formData.img.join(',');
|
|
|
+ formData.imgNum = formData.img.length;
|
|
|
+ delete formData.img;
|
|
|
+ addClocks();
|
|
|
+ // uni.$u.toast('校验通过')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-function timeConfirm(e) {
|
|
|
- // console.log('timeConfirm=>', e);
|
|
|
- timeValue.value = e.value;
|
|
|
- formData.nursingTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
|
|
|
- showTime.value = false;
|
|
|
-}
|
|
|
+ //点击打卡 --新增打卡记录
|
|
|
+ function addClocks() {
|
|
|
+ let reqClockParams = {
|
|
|
+ applyId: applyId.value,
|
|
|
+ nursingRecordId: applyId.value,
|
|
|
+ ...formData
|
|
|
+ }
|
|
|
+ addCareClocks(reqClockParams)
|
|
|
+ .then(res => {
|
|
|
+ console.log('打卡res', res);
|
|
|
+ uni.$u.toast('打卡成功!');
|
|
|
+ uni.$emit('reloadLine');
|
|
|
+ uni.navigateBack();
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('打卡error', error);
|
|
|
+ uni.$u.toast('打卡失败!')
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
-//删除图片
|
|
|
-function deletePic(event) {
|
|
|
- fileList.value.splice(event.index, 1);
|
|
|
-}
|
|
|
+ const datetimePicker = ref();
|
|
|
+ onReady(() => {
|
|
|
+ datetimePicker.value.setFormatter(formatter);
|
|
|
+ })
|
|
|
|
|
|
-//新增图片
|
|
|
-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);
|
|
|
- console.log('result=>', result);
|
|
|
- let item = fileList.value[fileListLen];
|
|
|
- fileList.value.splice(
|
|
|
- fileListLen,
|
|
|
- 1,
|
|
|
- Object.assign(item, {
|
|
|
- status: "success",
|
|
|
- message: "",
|
|
|
- url: result,
|
|
|
- })
|
|
|
- );
|
|
|
- fileListLen++;
|
|
|
- }
|
|
|
- // console.log('fileList=>', fileList);
|
|
|
-}
|
|
|
+ function formatter(type, value) {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${value}年`
|
|
|
+ }
|
|
|
+ if (type === 'month') {
|
|
|
+ return `${value}月`
|
|
|
+ }
|
|
|
+ if (type === 'day') {
|
|
|
+ return `${value}日`
|
|
|
+ }
|
|
|
+ if (type === 'hour') {
|
|
|
+ return `${value}时`
|
|
|
+ }
|
|
|
+ if (type === 'minute') {
|
|
|
+ return `${value}分`
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ }
|
|
|
|
|
|
-/**
|
|
|
- * TODO 上传图片有问题，上传的时间是选择 还是当前时间
|
|
|
- * 如果今天上传的护理记录 是否还可以继续上传 一天上传几次护理打卡记录
|
|
|
- * 思路 2/23 page4 里面显示打卡记录 然后打卡记录里面可能是死亡/打卡/结束几个按钮
|
|
|
- * 从page4 里面进入打卡页面和死亡表单页面
|
|
|
- *
|
|
|
- *
|
|
|
- */
|
|
|
+ function timeConfirm(e) {
|
|
|
+ // console.log('timeConfirm=>', e);
|
|
|
+ timeValue.value = e.value;
|
|
|
+ formData.nursingTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
|
|
|
+ showTime.value = false;
|
|
|
+ }
|
|
|
|
|
|
-//上传图片
|
|
|
-function uploadFilePromise(url) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- //前缀
|
|
|
- let prefix = uni.$u.http.config.baseURL;
|
|
|
- let a = uni.uploadFile({
|
|
|
- url: `${prefix}${uploadImgUrl}`,
|
|
|
- filePath: url,
|
|
|
- name: "file",
|
|
|
- formData: {
|
|
|
- applyId: props.item.applyId,
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- let data = {
|
|
|
- imgUrl: ''
|
|
|
- };
|
|
|
- try {
|
|
|
- let resData = res.data;
|
|
|
- data = JSON.parse(resData);
|
|
|
- } catch (error) {
|
|
|
- console.error(error);
|
|
|
- } finally {
|
|
|
- resolve(data.imgUrl);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
+ //删除图片
|
|
|
+ function deletePic(event) {
|
|
|
+ fileList.value.splice(event.index, 1);
|
|
|
+ }
|
|
|
|
|
|
-//获取打卡图片数量
|
|
|
-const imgNum = ref(0);
|
|
|
+ //新增图片
|
|
|
+ async function afterRead(event) {
|
|
|
+ console.log('event', event);
|
|
|
+ // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
+ let lists = [].concat(event.file);
|
|
|
+ let fileListLen = fileList.value.length;
|
|
|
+ lists.forEach((item) => {
|
|
|
+ let {
|
|
|
+ url,
|
|
|
+ size
|
|
|
+ } = item;
|
|
|
+ console.log('url: ', url);
|
|
|
+ if (url.toLowerCase().endsWith('png') || url.toLowerCase().endsWith('jpg') || url
|
|
|
+ .toLowerCase().endsWith('jpeg') || url
|
|
|
+ .toLowerCase().endsWith('gif') || url
|
|
|
+ .toLowerCase().endsWith('bmp')) {
|
|
|
+ if (item.size < 1024 * 1024 * 10) {
|
|
|
+ fileList.value.push({
|
|
|
+ ...item,
|
|
|
+ status: 'uploading',
|
|
|
+ message: '上传中'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择10M以内的图片',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请上传JPG,PNG,JPEG,GIF,BMP格式的图片',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ // 如果大于10M
|
|
|
+ if (lists[i].size > 1024 * 1024 * 10) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ console.log('applyId', applyId.value);
|
|
|
+ const result = await uploadImg({
|
|
|
+ filePath: lists[i].url,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ applyId: applyId.value
|
|
|
+ },
|
|
|
+ custom: {
|
|
|
+ catch: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('result: ', result);
|
|
|
+ let item = fileList.value[fileListLen]
|
|
|
+ fileList.value.splice(fileListLen, 1, Object.assign(item, {
|
|
|
+ status: 'success',
|
|
|
+ message: '',
|
|
|
+ url: uni.$u.http.config.baseURL + result.imgUrl,
|
|
|
+ // fileName: result.fileName
|
|
|
+ }))
|
|
|
+ console.log(fileList);
|
|
|
+ fileListLen++
|
|
|
+ } catch (e) {
|
|
|
+ // uni.$u.toast(JSON.stringify(e))
|
|
|
+ //TODO handle the exception
|
|
|
+ console.log('e: ', e);
|
|
|
+ let item = fileList.value[fileListLen]
|
|
|
+ fileList.value.splice(fileListLen, 1, Object.assign(item, {
|
|
|
+ status: 'failed',
|
|
|
+ message: '上传失败',
|
|
|
+ url: item.url
|
|
|
+ }))
|
|
|
+ fileListLen++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-function getNumber() {
|
|
|
- getImgNumber({
|
|
|
- params: {
|
|
|
- key: 'need_img_num'
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- imgNum.value = res.number;
|
|
|
- })
|
|
|
-}
|
|
|
+ /**
|
|
|
+ * TODO 上传图片有问题，上传的时间是选择 还是当前时间
|
|
|
+ * 如果今天上传的护理记录 是否还可以继续上传 一天上传几次护理打卡记录
|
|
|
+ * 思路 2/23 page4 里面显示打卡记录 然后打卡记录里面可能是死亡/打卡/结束几个按钮
|
|
|
+ * 从page4 里面进入打卡页面和死亡表单页面
|
|
|
+ *
|
|
|
+ *
|
|
|
+ */
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getNumber();
|
|
|
-})
|
|
|
+ //获取打卡图片数量
|
|
|
+ const imgNum = ref(0);
|
|
|
+
|
|
|
+ function getNumber() {
|
|
|
+ getImgNumber({
|
|
|
+ params: {
|
|
|
+ key: 'need_img_num'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ imgNum.value = res.number;
|
|
|
+ })
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-:deep(.u-navbar__content__title) {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #222222;
|
|
|
-}
|
|
|
+ :deep(.u-navbar__content__title) {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
|
|
|
-.u-navbar-box {
|
|
|
- background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
|
|
|
-}
|
|
|
+ .u-navbar-box {
|
|
|
+ background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
|
|
|
+ }
|
|
|
|
|
|
-.page4-form {
|
|
|
- padding: 30rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
+ .page4-form {
|
|
|
+ padding: 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
|
|
|
-.btn-box {
|
|
|
- padding: 20rpx 36rpx;
|
|
|
- background-color: #fff;
|
|
|
- position: fixed;
|
|
|
- bottom: 10rpx;
|
|
|
- left: 0;
|
|
|
- width: 690rpx;
|
|
|
-}
|
|
|
+ .btn-box {
|
|
|
+ padding: 20rpx 36rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10rpx;
|
|
|
+ left: 0;
|
|
|
+ width: 690rpx;
|
|
|
+ }
|
|
|
</style>
|
