|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <van-form @submit="onSubmit">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <!-- 允许输入数字,调起带符号的纯数字键盘 -->
|
|
|
+ <van-field
|
|
|
+ v-model="totalFee"
|
|
|
+ name="totalFee"
|
|
|
+ type="number"
|
|
|
+ label="数字"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="types-box">
|
|
|
+ <van-field
|
|
|
+ v-model="typeStr"
|
|
|
+ label="类型"
|
|
|
+ name="typeStr"
|
|
|
+ placeholder="请输入类型名称"
|
|
|
+ />
|
|
|
+ <div class="types-scroll-box" @click.stop>
|
|
|
+ <van-tag
|
|
|
+ type="primary"
|
|
|
+ @click="setTypes(item)"
|
|
|
+ mark
|
|
|
+ v-for="item in typeList"
|
|
|
+ :key="`tag${item.name}`"
|
|
|
+ >{{ item.name }}</van-tag
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <van-field name="uploader" label="文件上传">
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ :model-value="files"
|
|
|
+ multiple
|
|
|
+ :max-count="5"
|
|
|
+ :after-read="afterRead"
|
|
|
+ :before-delete="filesDelete"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="newTime"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ name="newTime"
|
|
|
+ label="日历"
|
|
|
+ placeholder="点击选择日期"
|
|
|
+ @click="showCalendar = true"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="remark"
|
|
|
+ rows="2"
|
|
|
+ autosize
|
|
|
+ name="remark"
|
|
|
+ label="留言"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="请输入留言"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <div style="margin: 16px">
|
|
|
+ <van-button round block type="primary" native-type="submit">
|
|
|
+ 提交
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ <van-calendar
|
|
|
+ :min-date="new Date(2010, 0, 1)"
|
|
|
+ v-model:show="showCalendar"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ />
|
|
|
+ <van-number-keyboard
|
|
|
+ v-model="totalFee"
|
|
|
+ :show="showKeyboard"
|
|
|
+ :maxlength="6"
|
|
|
+ @blur="showKeyboard = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { watch, ref, onMounted, toRaw } from 'vue'
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import {
|
|
|
+ uploadFile,
|
|
|
+ addRecord,
|
|
|
+ getAllType,
|
|
|
+ getRecordInfo,
|
|
|
+ putRecordInfo
|
|
|
+} from '@/api/api'
|
|
|
+import { useCommonStore } from '@/store/common'
|
|
|
+const commonStore = useCommonStore()
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+
|
|
|
+const files = ref([])
|
|
|
+const totalFee = ref()
|
|
|
+const showKeyboard = ref(false)
|
|
|
+const remark = ref('')
|
|
|
+const typeStr = ref('')
|
|
|
+const typeList = ref([])
|
|
|
+
|
|
|
+const afterRead = async (file) => {
|
|
|
+ // 将文件上传至服务器
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('sampleFile', file.file)
|
|
|
+ const res = await uploadFile(formData)
|
|
|
+ files.value.push({
|
|
|
+ // url: window.origin + `/api/v1/files/${res.file_id}`,
|
|
|
+ url: file.objectUrl,
|
|
|
+ file_id: res.data.file_id,
|
|
|
+ isImage: true
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const newTime = ref(dayjs().format('YYYY-MM-DD'))
|
|
|
+const showCalendar = ref(false)
|
|
|
+
|
|
|
+const onConfirm = (date) => {
|
|
|
+ // newTime.value = `${date.getMonth() + 1}/${date.getDate()}`
|
|
|
+ newTime.value = dayjs(date).format('YYYY-MM-DD')
|
|
|
+ showCalendar.value = false
|
|
|
+}
|
|
|
+const filesDelete = (file) => {
|
|
|
+ files.value = files.value.filter((elm) => elm.url !== file.url)
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ commonStore.initBook()
|
|
|
+ setTimeout(() => {
|
|
|
+ getAllTypeByUser()
|
|
|
+ if (route.params.id) {
|
|
|
+ editPageInit()
|
|
|
+ }
|
|
|
+ }, 300)
|
|
|
+})
|
|
|
+
|
|
|
+async function getAllTypeByUser() {
|
|
|
+ const res = await getAllType(commonStore.bookInfo.id)
|
|
|
+ typeList.value = res.data
|
|
|
+}
|
|
|
+
|
|
|
+const onSubmit = async (values) => {
|
|
|
+ if (route.params.id) {
|
|
|
+ onEditSubmit(values)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await addRecord({
|
|
|
+ book_id: commonStore.bookInfo.id,
|
|
|
+ time: values.newTime,
|
|
|
+ total_fee: values.totalFee,
|
|
|
+ type: values.typeStr,
|
|
|
+ remark: values.remark,
|
|
|
+ files: files.value.map((elm) => elm.file_id)
|
|
|
+ })
|
|
|
+ router.back()
|
|
|
+}
|
|
|
+
|
|
|
+const onEditSubmit = async (values) => {
|
|
|
+ console.log(159, {
|
|
|
+ book_id: commonStore.bookInfo.id,
|
|
|
+ time: values.newTime,
|
|
|
+ total_fee: values.totalFee,
|
|
|
+ type: values.typeStr,
|
|
|
+ remark: values.remark,
|
|
|
+ files: files.value.map((elm) => elm.file_id)
|
|
|
+ })
|
|
|
+
|
|
|
+ await putRecordInfo(route.params.id, {
|
|
|
+ book_id: commonStore.bookInfo.id,
|
|
|
+ time: values.newTime,
|
|
|
+ total_fee: values.totalFee,
|
|
|
+ type: values.typeStr,
|
|
|
+ remark: values.remark,
|
|
|
+ files: files.value.map((elm) => elm.file_id)
|
|
|
+ })
|
|
|
+
|
|
|
+ router.back()
|
|
|
+}
|
|
|
+
|
|
|
+function setTypes(tag) {
|
|
|
+ typeStr.value = tag.name
|
|
|
+}
|
|
|
+
|
|
|
+async function editPageInit() {
|
|
|
+ const res = await getRecordInfo(route.params.id)
|
|
|
+ totalFee.value = Number(res.data.total_fee)
|
|
|
+ typeStr.value = res.data.type
|
|
|
+ newTime.value = res.data.time
|
|
|
+ remark.value = res.data.remark
|
|
|
+ if (res.data?.files?.length > 0) {
|
|
|
+ files.value = res.data?.files.map((imgStr) => ({
|
|
|
+ url: imgStr,
|
|
|
+ file_id: imgStr.replace(/.*api_files_/, ''),
|
|
|
+ isImage: true
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ const files = ref([])
|
|
|
+ const totalFee = ref()
|
|
|
+ const showKeyboard = ref(false)
|
|
|
+ const remark = ref('')
|
|
|
+ const typeStr = ref('')
|
|
|
+ const typeList = ref([])
|
|
|
+ */
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.types-box {
|
|
|
+ .types-scroll-box {
|
|
|
+ padding-left: 100px;
|
|
|
+ text-align: left;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ max-height: 60px;
|
|
|
+ overflow-x: scroll;
|
|
|
+ > * {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ // display: flex;
|
|
|
+ // overflow-y: scroll;
|
|
|
+ // flex-wrap: nowrap;
|
|
|
+ // margin-left: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|