Cxx0822/sweet-hut-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:增加图片存储模式

Browse Source
This commit is contained in:
Cxx0822
2026-02-14 16:55:52 +08:00
parent 223a59cd8a
commit 4dc541da85
24 changed files with 333 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nginx.conf
View File

@@ -27,6 +27,10 @@ server {
proxy_pass http://host.docker.internal:8082/;
}
location /image-api/ {
proxy_pass http://host.docker.internal:3000/;
}
location / {
try_files $uri $uri/ =404;
}

235
src/components/Bill/BillDialog.vue
View File

@@ -1,235 +0,0 @@
<template>
<el-dialog v-model="billStore.billDialog.visible"
title="账单内容" center class="bill-dialog"
@open="openDialogEvent">
<el-form ref="formRef" :model="billStore.billDialog.data"
:rules="rules" label-width="80px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="账本类型" prop="bookName">
<el-radio-group v-model="billStore.billDialog.data.bookName"
@change="changeBillBookNameEvent">
<el-radio v-for="(item, index) in billStore.billBookList"
:value="item.name" :key="index">
<template #default>
<i :class="item.icon" :style="{color: item.color}"/>
<span style="margin-left: 5px;">{{ item.name }}</span>
</template>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="账单类别" prop="type">
<el-radio-group v-model="billStore.billDialog.data.type"
@change="changeBillCategoryEvent">
<el-radio v-for="(item, index) in billInfo.billTypeList"
:value="item" :key="index">
{{ getBillTypeName(item) }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="账单分类" prop="category">
<el-radio-group v-model="billStore.billDialog.data.category">
<el-radio v-for="(item, index) in billInfo.billCategoryList"
:value="item.name" :key="index">
<template #default>
<i :class="item.icon" :style="{color: item.color}"/>
<span style="margin-left: 5px;">{{ item.name }}</span>
</template>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="账单时间" prop="date">
<el-date-picker
v-model="billStore.billDialog.data.date"
type="date" :editable="false" placeholder="请选择账单时间"
value-format="YYYY-MM-DD"/>
</el-form-item>
<el-form-item label="账单地点" prop="location">
<el-input v-model="billStore.billDialog.data.location" autocomplete="off"
placeholder="请输入账单地点" clearable
show-word-limit maxlength="10">
<template #prefix>
<el-icon class="el-input__icon"><location/></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="账单账户" prop="payAccount">
<el-radio-group v-model="billStore.billDialog.data.payAccount">
<el-radio v-for="(item, index) in billStore.billPayList"
:value="item.name" :key="index">
<template #default>
<i :class="item.icon" :style="{color: item.color}"/>
<span style="margin-left: 5px;">{{ item.name }}</span>
</template>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="账单金额" prop="amount">
<amount-input v-model="billStore.billDialog.data.amount"/>
</el-form-item>
<el-form-item label="账单内容" prop="content">
<el-input v-model="billStore.billDialog.data.content" autocomplete="off"
placeholder="请输入账单内容" clearable
show-word-limit maxlength="10">
<template #prefix>
<el-icon class="el-input__icon"><document/></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="账单备注">
<el-input v-model="billStore.billDialog.data.remark" type="textarea"
placeholder="请输入账单备注" clearable
:rows="5" show-word-limit maxlength="200">
</el-input>
</el-form-item>
<el-form-item label="账单图片">
<upload-image v-model="billStore.billDialog.data.imageList"
:service-url="fileServiceUrl"
:service-file-root-path="serviceFileRootPath"
:image-path="billStore.billImagePath"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelClick">取消</el-button>
<el-button type="primary" @click="confirmClick">
{{ billStore.billApiType === 'UPDATE' ? '编辑' : '新增' }}
</el-button>
<el-button v-if="billStore.billApiType === 'UPDATE'"
type="danger" @click="deleteClick">
删除
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { UploadImage, AmountInput } from 'vue3-common'
import { useBillStore } from '@/store/bill.ts'
import { Location, Document } from '@element-plus/icons-vue'
import { FormRules } from 'element-plus'
import { billRecordRules } from '@/utils/element/elRules.ts'
import { nextTick, reactive, ref } from 'vue'
import { IBillCategory } from '@/types/bill.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
const formRef = ref()
const rules = reactive<FormRules>(billRecordRules)
const billStore = useBillStore()
const billInfo = reactive({
billTypeList: [] as string[],
billCategoryList: [] as IBillCategory[]
})
/**
* 打开对话框事件
*/
const openDialogEvent = async () => {
// 如果是新增账单 默认选择第一个账本
if (billStore.billApiType !== 'UPDATE') {
billStore.billDialog.data.bookName = billStore.billBookList[0].name
}
getBillTypeByBookName(billStore.billDialog.data.bookName)
// 如果是新增账单 默认选择一个类别
if (billStore.billApiType !== 'UPDATE') {
billStore.billDialog.data.type = billInfo.billTypeList[0]
}
getBillCategory()
// 如果是新增账单 默认选择一个分类
if (billStore.billApiType !== 'UPDATE') {
billStore.billDialog.data.category = billInfo.billCategoryList[0].name
billStore.billDialog.data.payAccount = billStore.billPayList[0].name
}
await nextTick(() => {
formRef.value.clearValidate()
})
}
/**
* 获取账单类型名称
* @param type 账单类型
*/
const getBillTypeName = (type: string) => {
return type === 'expensive' ? '支出' : '收入'
}
/**
* 选择账本事件
* @param value 账本名称
*/
const changeBillBookNameEvent = (value: string) => {
getBillTypeByBookName(value)
billStore.billDialog.data.type = billInfo.billTypeList[0]
getBillCategory()
billStore.billDialog.data.category = billInfo.billCategoryList[0].name
}
/**
* 选择账单类别事件
*/
const changeBillCategoryEvent = () => {
getBillCategory()
billStore.billDialog.data.category = billInfo.billCategoryList[0].name
}
/**
* 通过账本获取账单类型
* @param bookName 账本
*/
const getBillTypeByBookName = (bookName: string) => {
billInfo.billTypeList = []
billStore.billCategoryList.forEach((item) => {
if (item.bookName === bookName && !billInfo.billTypeList.includes(item.type)) {
billInfo.billTypeList.push(item.type)
}
})
}
/**
* 获取账单类别
*/
const getBillCategory = () => {
billInfo.billCategoryList = billStore.billCategoryList.filter((value) => {
return value.bookName === billStore.billDialog.data.bookName
&& value.type === billStore.billDialog.data.type
})
}
/**
* 点击确认按钮
*/
const confirmClick = () => {
formRef.value.validate().then(() => {
billStore.handleBillApi(billStore.billDialog.data)
})
}
const cancelClick = () => {
billStore.billDialog.visible = false
}
const deleteClick = () => {
commonElMessageBox('是否确认删除该账单内容?').then(() => {
billStore.billApiType = 'DELETE'
billStore.handleBillApi(billStore.billDialog.data)
})
}
</script>

7
src/components/Food/Data/FoodRecordData.vue
View File

@@ -12,7 +12,7 @@
<el-card class="record-card">
<span class="record-content">完成人：{{ item.person }}</span>
<el-image v-if="item.imageUrl"
:src="AListUrl + item.imageUrl" fit="cover" alt="暂无图片"
:src="`${item.imageUrl}${ThumbImageQuery}`" fit="cover" alt="暂无图片"
@click="viewImageClick(item)" class="record-image"/>
</el-card>
</el-timeline-item>
@@ -24,7 +24,7 @@
<script setup lang="ts">
import { useFoodStore } from '@/store/food.ts'
import { AListUrl } from '@/utils'
import { ThumbImageQuery } from '@/utils'
import { SvgIcon } from 'vue3-common'
import { IFoodRecord } from '@/types/food.ts'
import { showImagePreview } from 'vant'
@@ -32,7 +32,6 @@ import { showImagePreview } from 'vant'
const foodStore = useFoodStore()
const viewImageClick = (item: IFoodRecord) => {
const imageList = [AListUrl + item.imageUrl]
showImagePreview({ images: imageList, closeable: true })
showImagePreview({ images: [item.imageUrl], closeable: true })
}
</script>

3
src/components/Food/Data/FoodStepData.vue
View File

@@ -12,7 +12,7 @@
<div class="step-body">
<span class="step-content">{{ item.content }}</span>
<img v-if="item.imageUrl"
:src="serviceFileRootPath + item.imageUrl" alt="暂无图片" class="step-image"/>
:src="item.imageUrl" alt="暂无图片" class="step-image"/>
</div>
</div>
</div>
@@ -21,7 +21,6 @@
<script setup lang="ts">
import { useFoodStore } from '@/store/food.ts'
import { serviceFileRootPath } from '@/utils'
import { SvgIcon } from 'vue3-common'
const foodStore = useFoodStore()

6
src/components/Food/FoodCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="life-record-card card-item">
<el-image v-if="props.foodItem?.recordList.length > 0"
:src="AListUrl + props.foodItem?.recordList[0].imageUrl"
:src="`${props.foodItem?.recordList[0].imageUrl}${ThumbImageQuery}`"
fit="contain" alt="暂无成果" @click="viewImageClick">
<template #error>
<div class="image-slot">
@@ -64,8 +64,8 @@ import { IFoodRecipe } from '@/types/food.ts'
import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { AListUrl } from '@/utils'
import { showImagePreview } from 'vant'
import { ThumbImageQuery } from '@/utils'
const router = useRouter()
const foodStore = useFoodStore()
@@ -87,7 +87,7 @@ onMounted(() => {
})
const viewImageClick = () => {
const imageList = props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
const imageList = props.foodItem?.recordList.map((item) => `${item.imageUrl}`)
showImagePreview({ images: imageList, closeable: true })
}

73
src/components/Food/Form/FoodStepDialog.vue
View File

@@ -13,11 +13,25 @@
</el-form-item>
<el-form-item label="图片">
<upload-image v-model="foodStore.currentFoodStep.imageUrl"
:service-url="fileServiceUrl"
:image-limit="1"
:service-file-root-path="serviceFileRootPath"
:image-path="foodStore.foodImagePath"/>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="1"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
@@ -31,17 +45,58 @@
</template>
<script lang="ts" setup>
import { UploadImage } from 'vue3-common'
import { useFoodStore } from '@/store/food.ts'
import { ref, reactive, nextTick } from 'vue'
import { FormRules } from 'element-plus'
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { foodStepRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const rules = reactive<FormRules>(foodStepRules)
const formRef = ref()
const foodStore = useFoodStore()
const imageFileList = ref<UploadUserFile[]>([])
onMounted(async () => {
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
const { imageUrl } = foodStore.currentFoodStep
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: imageUrl
})
}
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(foodStore.foodImagePath, options)
}
const handleSuccess = (response: string) => {
foodStore.currentFoodStep.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传1张图片')
}
const handleRemove: UploadProps['onRemove'] = () => {
foodStore.currentFoodStep.imageUrl = ''
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
/**
* 打开对话框事件

3
src/components/Food/Form/FoodStepForm.vue
View File

@@ -9,7 +9,7 @@
<el-table-column prop="content" label="内容" align="center" min-width="20%" />
<el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
<template #default="scope">
<el-image v-if="scope.row.imageUrl" :src="serviceFileRootPath + scope.row.imageUrl" />
<el-image v-if="scope.row.imageUrl" :src="scope.row.imageUrl" />
</template>
</el-table-column>
@@ -30,7 +30,6 @@ import { useFoodStore } from '@/store/food.ts'
import { IFoodStep } from '@/types/food.ts'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
const foodStore = useFoodStore()

7
src/components/Journal/JournalCard.vue
View File

@@ -37,7 +37,7 @@
<!-- 单媒体内容（图片优先于视频） -->
<el-image
v-if="props.item?.imageUrl"
:src="AListUrl + props.item?.imageUrl"
:src="`${props.item?.imageUrl}${ThumbImageQuery}`"
fit="contain" @click="viewImageClick"
class="media-content"/>
@@ -73,7 +73,7 @@ import { formatDate } from 'vue3-common/utils/dateUtil'
import { useJournalStore } from '@/store/journal.ts'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { AListUrl } from '@/utils'
import { AListUrl, ThumbImageQuery } from '@/utils'
import { showImagePreview } from 'vant'
const props = defineProps({
@@ -107,8 +107,7 @@ const showToggle = computed(() => overflowLines.value > 0)
const toggleExpand = () => expanded.value = !expanded.value
const viewImageClick = () => {
const imageList = [AListUrl + props.item?.imageUrl]
showImagePreview({ images: imageList, closeable: true })
showImagePreview({ images: [props.item?.imageUrl], closeable: true })
}
const editClick = async () => {

7
src/components/Product/ProductCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="life-record-card card-item">
<el-image :src="AListUrl + props.productItem?.imageUrl"
<el-image :src="`${props.productItem?.imageUrl}${ThumbImageQuery}`"
fit="contain" alt="暂无成果" @click="viewImageClick">
<template #error>
<div class="image-slot">
@@ -65,7 +65,7 @@ import { defineProps, PropType } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { IProduct } from '@/types/product.ts'
import { useRouter } from 'vue-router'
import { AListUrl } from '@/utils'
import { AListUrl, ThumbImageQuery } from '@/utils'
import { showImagePreview } from 'vant'
const productStore = useProductStore()
@@ -79,8 +79,7 @@ const props = defineProps({
})
const viewImageClick = () => {
const imageList = [AListUrl + props.productItem?.imageUrl]
showImagePreview({ images: imageList, closeable: true })
showImagePreview({ images: [props.productItem?.imageUrl], closeable: true })
}
const editClick = async () => {

6
src/components/Travel/Data/TravelRecordData.vue
View File

@@ -12,8 +12,7 @@
<el-card class="record-card">
<span class="record-content">旅行人：{{ item.persons.join('-') }}</span>
<el-image v-for="(image, index) in item.imageList" :key="index"
:src="AListUrl + image"
fit="cover" alt="暂无图片" class="record-image"
:src="`${image}?q=70`" fit="cover" alt="暂无图片" class="record-image"
@click="viewImageClick(item, index)"/>
<video v-for="(video, index) in item.videoList"
@@ -39,7 +38,6 @@ import { ITravelRecord } from '@/types/travel.ts'
const travelStore = useTravelStore()
const viewImageClick = (record: ITravelRecord, index: number) => {
const imageList = record.imageList.map((item) => `${AListUrl}${item}`)
showImagePreview({ images: imageList, closeable: true, startPosition: index })
showImagePreview({ images: record.imageList, closeable: true, startPosition: index })
}
</script>

106
src/components/Travel/Form/TravelRecordDialog.vue
View File

@@ -1,106 +0,0 @@
<template>
<el-dialog v-model="dialogData.visible" :title="dialogData.title"
center @open="openDialogEvent" class="travel-record-dialog">
<el-form ref="formRef" :model="dialogData.data"
:rules="rules" label-width="80">
<el-form-item label="景点名称" prop="name">
<el-select
v-model="travelStore.travelRecordDialog.data.name"
@focus="travelStore.queryTravelSpotNameList()"
:disabled="travelStore.travelRecordApiType === 'UPDATE'"
placeholder="请选择景点名称">
<el-option
v-for="(item, index) in travelStore.travelSpotNameList"
:key="index" :label="item" :value="item"
/>
</el-select>
</el-form-item>
<el-form-item label="旅行日期" prop="date">
<el-date-picker
v-model="dialogData.data.date"
type="date" placeholder="请选择日期"
value-format="YYYY-MM-DD"/>
</el-form-item>
<el-form-item label="旅行人员" prop="persons">
<multi-input :data="dialogData.data.persons"
:size="5"/>
</el-form-item>
<el-form-item label="图片">
<upload-image v-model="dialogData.data.imageList"
:service-url="fileServiceUrl"
:image-limit="3"
:service-file-root-path="serviceFileRootPath"
:image-path="travelStore.travelImagePath"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelClick">取消</el-button>
<el-button type="primary" @click="confirmClick">保存</el-button>
<el-button v-if="travelStore.travelRecordApiType === 'UPDATE'"
type="danger" @click="deleteClick">删除</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { UploadImage } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'
import { ref, reactive, computed, nextTick } from 'vue'
import { FormRules } from 'element-plus'
import { travelRecordRules } from '@/utils/element/elRules.ts'
import { MultiInput } from 'vue3-common'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
const rules = reactive<FormRules>(travelRecordRules)
const formRef = ref()
const travelStore = useTravelStore()
const dialogData = computed(() => travelStore.travelRecordDialog)
/**
* 打开对话框事件
*/
const openDialogEvent = async () => {
await nextTick(() => {
formRef.value?.clearValidate()
})
}
/**
* 点击确认按钮
*/
const confirmClick = () => {
formRef.value.validate().then(() => {
travelStore.handleTravelRecordApi(dialogData.value.data)
})
}
const cancelClick = () => {
dialogData.value.visible = false
}
const deleteClick = () => {
commonElMessageBox('是否确认删除该记录?').then(() => {
travelStore.travelRecordApiType = 'DELETE'
travelStore.handleTravelRecordApi(dialogData.value.data)
})
}
</script>
<style lang="scss">
.travel-record-dialog {
width: 40%;
.el-dialog__body {
height: 45vh;
}
}
</style>

12
src/components/Travel/TravelCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="life-record-card card-item">
<el-image v-if="props.travelItem?.recordList.length > 0"
:src="AListUrl + props.travelItem?.recordList[0].imageList[0]"
:src="`${props.travelItem?.recordList[0].imageList[0]}${ThumbImageQuery}`"
fit="contain" alt="暂无成果" @click="viewImageClick">
<template #error>
<div class="image-slot">
@@ -65,9 +65,9 @@ import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil'
import { ITravelSpot } from '@/types/travel.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { AListUrl } from '@/utils'
import { parsePerson } from '@/utils/home/travelUtil.ts'
import { showImagePreview } from 'vant'
import { ThumbImageQuery } from '@/utils'
const router = useRouter()
const travelStore = useTravelStore()
@@ -85,7 +85,9 @@ const props = defineProps({
})
const viewImageClick = () => {
const imageList = props.travelItem.recordList.flatMap((record) => record.imageList.map((item) => `${AListUrl}${item}`))
const imageList = props.travelItem.recordList.flatMap((record) => {
return record.imageList.map((item) => item)
})
showImagePreview({ images: imageList, closeable: true })
}
@@ -109,10 +111,6 @@ const deleteClick = () => {
travelStore.handleTravelSpotApi(props.travelItem)
})
}
const changeTravelEvent = (current: number) => {
cardInfo.currentIndex = current
}
</script>
<style lang="scss">

10
src/utils/element/elUpload.ts
View File

@@ -44,7 +44,7 @@ export const beforeUploadVideo = (rawFile: UploadRawFile): boolean => {
}
export const httpRequestFile = async (basePath: string,
options: UploadRequestOptions, isCompress = true) => {
options: UploadRequestOptions, isCompress = false) => {
const loading = ElLoading.service({
lock: true,
text: '文件上传中 请等待',
@@ -52,7 +52,9 @@ export const httpRequestFile = async (basePath: string,
})
try {
const filePath = `${AListPath}/${basePath}/${getFileHashName(options.file)}.${getFileExtension(options.file.name)}`
const fileName = `${getFileHashName(options.file)}.${getFileExtension(options.file.name)}`
const filePath = `${AListPath}/${basePath}/${fileName}`
const imageUrl = `/image-api/${basePath}/${fileName}`
const data = new FormData()
if (isCompress) {
@@ -63,9 +65,9 @@ export const httpRequestFile = async (basePath: string,
}
data.append('filePath', filePath)
const result = await uploadAListFileApi(data)
await uploadAListFileApi(data)
ElMessage.success('上传成功')
return result
return imageUrl
} catch (error) {
console.log(error)
ElMessage.error('上传失败 请联系管理员')

12
src/utils/index.ts
View File

@@ -18,20 +18,12 @@ export const setActiveClass = (parentClassName: string, elementTag: string,
currentElement.setAttribute('class', activeClassName)
}
/**
* 文件服务器地址
*/
export const fileServiceUrl = '/home-api/file'
/**
* 服务器文件路径根地址
*/
export const serviceFileRootPath = '/home-api/'
export const AListUrl = '/alist-api/'
export const AListPath = import.meta.env.VITE_API_ALIST_PATH
export const ThumbImageQuery = '?q=70'
/**
* 获取assets静态资源
* @param url 路径

77
src/views/bill/detail[id].vue
View File

@@ -89,10 +89,25 @@
</el-form-item>
<el-form-item label="账单图片">
<upload-image v-model="billStore.currentBillRecord.imageList"
:service-url="fileServiceUrl"
:service-file-root-path="serviceFileRootPath"
:image-path="billStore.billImagePath"/>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="3"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
@@ -106,21 +121,31 @@
</template>
<script lang="ts" setup>
import { UploadImage, AmountInput } from 'vue3-common'
import { AmountInput } from 'vue3-common'
import { useBillStore } from '@/store/bill.ts'
import { useAppStore } from '@/store/app.ts'
import { Location, Document } from '@element-plus/icons-vue'
import { FormRules } from 'element-plus'
import { Location, Document, Plus } from '@element-plus/icons-vue'
import {
ElMessage,
ElMessageBox,
FormRules,
UploadProps,
UploadRawFile,
UploadRequestOptions,
UploadUserFile
} from 'element-plus'
import { billRecordRules } from '@/utils/element/elRules.ts'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { IBillCategory } from '@/types/bill.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const formRef = ref()
const rules = reactive<FormRules>(billRecordRules)
const billStore = useBillStore()
const appStore = useAppStore()
const imageFileList = ref<UploadUserFile[]>([])
const billInfo = reactive({
billTypeList: [] as string[],
@@ -131,6 +156,7 @@ onMounted(async () => {
appStore.isShowMobileBack = true
await initBillRecord()
initImageFileList()
})
const initBillRecord = async () => {
@@ -157,6 +183,41 @@ const initBillRecord = async () => {
})
}
const initImageFileList = () => {
imageFileList.value = []
billStore.currentBillRecord.imageList.forEach((image) => {
imageFileList.value.push({
name: 'image',
url: image
})
})
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(billStore.billImagePath, options)
}
const handleSuccess = (response: string) => {
billStore.currentBillRecord.imageList.push(response)
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传3张图片')
}
const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
billStore.currentBillRecord.imageList.splice(index, 1)
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
/**
* 获取账单类型名称
* @param type 账单类型

5
src/views/food/recordForm.vue
View File

@@ -72,7 +72,6 @@ import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { foodRecordRules } from '@/utils/element/elRules.ts'
import { AListUrl } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { useAppStore } from '@/store/app.ts'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
@@ -98,7 +97,7 @@ const initImageFileList = () => {
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
url: imageUrl
})
}
}
@@ -112,7 +111,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
}
const handleSuccess = (response: string) => {
foodStore.currentFoodRecord.imageUrl = `p${response}`
foodStore.currentFoodRecord.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {

7
src/views/food/timeline.vue
View File

@@ -24,7 +24,7 @@
placement="top">
<div class="timeline-info card-item">
<span class="name">{{ item.name }}</span>
<el-image :src="AListUrl + item.imageUrl"
<el-image :src="`${item.imageUrl}${ThumbImageQuery}`"
fit="cover" alt="暂无成果"
@click="viewImageClick(item)">
<template #error>
@@ -45,7 +45,7 @@
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import { useFoodStore } from '@/store/food.ts'
import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
import { AListUrl } from '@/utils'
import { ThumbImageQuery } from '@/utils'
import { onMounted } from 'vue'
import { showImagePreview } from 'vant'
import { IFoodRecord } from '@/types/food.ts'
@@ -58,8 +58,7 @@ onMounted(async () => {
})
const viewImageClick = (item: IFoodRecord) => {
const imageList = [AListUrl + item.imageUrl]
showImagePreview({ images: imageList, closeable: true })
showImagePreview({ images: [item.imageUrl], closeable: true })
}
const changeDateEvent = async (value: Date) => {

4
src/views/journal/detail[id].vue
View File

@@ -157,7 +157,7 @@ const initFileList = () => {
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
url: imageUrl
})
}
@@ -178,7 +178,7 @@ const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadReque
}
const handleImageSuccess = (response: string) => {
journalStore.currentJournal.imageUrl = `p${response}`
journalStore.currentJournal.imageUrl = response
}
const handleImageExceed: UploadProps['onExceed'] = () => {

4
src/views/ledger/detail[id].vue
View File

@@ -118,7 +118,7 @@ const initImageFileList = () => {
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
url: imageUrl
})
}
}
@@ -132,7 +132,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
}
const handleSuccess = (response: string) => {
ledgerStore.currentLedgerRecord.imageUrl = `p${response}`
ledgerStore.currentLedgerRecord.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {

25
src/views/product/detail[id].vue
View File

@@ -97,7 +97,6 @@ import { useAppStore } from '@/store/app.ts'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { productRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { AListUrl } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
@@ -115,6 +114,17 @@ onMounted(async () => {
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
const { imageUrl } = productStore.currentProduct
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: imageUrl
})
}
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
@@ -124,7 +134,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
}
const handleSuccess = (response: string) => {
productStore.currentProduct.imageUrl = `p${response}`
productStore.currentProduct.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {
@@ -139,17 +149,6 @@ const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
const initImageFileList = () => {
imageFileList.value = []
const { imageUrl } = productStore.currentProduct
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
})
}
}
/**
* 点击确认按钮
*/

7
src/views/profile/index.vue
View File

@@ -3,7 +3,7 @@
<div class="profile-card">
<div class="avatar-wrapper">
<el-avatar
:src="serviceFileRootPath + userStore.userInfo.avatar"
:src="userStore.userInfo.avatar"
alt="用户头像" :size="80"
/>
@@ -102,7 +102,6 @@ import { useUserStore } from '@/store/user.ts'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
const userStore = useUserStore()
const appStore = useAppStore()
@@ -114,12 +113,12 @@ onMounted(() => {
const infoClick = () => {
appStore.isShowMobileBack = true
router.push('/home-home/profile/info')
router.push('/profile/info')
}
const passwordClick = () => {
// appStore.isShowMobileBack = true
// router.push('/home-home/profile/password')
// router.push('/profile/password')
}
const refreshClick = async () => {

83
src/views/profile/info.vue
View File

@@ -10,11 +10,25 @@
</el-form-item>
<el-form-item label="头像">
<upload-image v-model="userStore.userInfo.avatar"
:image-limit="1"
:service-url="fileServiceUrl"
:service-file-root-path="serviceFileRootPath"
:image-path="userStore.userImagePath"/>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="1"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="性别">
@@ -80,17 +94,66 @@
</template>
<script setup lang="ts">
import { UploadImage } from 'vue3-common'
import { pcTextArr } from 'element-china-area-data'
import { useUserStore } from '@/store/user.ts'
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import {
ElMessage,
ElMessageBox,
FormInstance,
FormRules,
UploadProps,
UploadRawFile,
UploadRequestOptions, UploadUserFile
} from 'element-plus'
import { profileInfoRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>(profileInfoRules)
const imageFileList = ref<UploadUserFile[]>([])
onMounted(async () => {
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
const { avatar } = userStore.userInfo
if (avatar) {
imageFileList.value.push({
name: 'image',
url: avatar
})
}
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(userStore.userImagePath, options)
}
const handleSuccess = (response: string) => {
userStore.userInfo.avatar = response
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传1张图片')
}
const handleRemove: UploadProps['onRemove'] = () => {
userStore.userInfo.avatar = ''
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
const cancelClick = () => {
history.back()
@@ -98,7 +161,7 @@ const cancelClick = () => {
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate(async (valid, fields) => {
await formEl.validate(async (valid) => {
if (valid) {
await userStore.updateUser()
await userStore.queryUser()

87
src/views/travel/recordForm.vue
View File

@@ -29,29 +29,26 @@
</el-form-item>
<el-form-item label="图片">
<upload-image v-model="travelStore.currentTravelRecord.imageList"
:service-url="fileServiceUrl"
:image-limit="3"
:service-file-root-path="serviceFileRootPath"
:image-path="travelStore.travelImagePath"/>
</el-form-item>
<el-form-item label="视频">
<upload-video v-model="travelStore.currentTravelRecord.videoList"
:service-url="fileServiceUrl"
:image-limit="3"
:service-file-root-path="serviceFileRootPath"
:video-path="travelStore.travelVideoPath"
style="width: 100%;"/>
</el-form-item>
<div class="video-list">
<video v-for="(item, index) in travelStore.currentTravelRecord.videoList"
:key="index" controls style="width: 60%; min-height: 200px;">
<source :src="serviceFileRootPath + item" type="video/mp4">
您的浏览器不支持 HTML5 视频
</video>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="3"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
<div class="button-container">
@@ -63,14 +60,15 @@
</template>
<script lang="ts" setup>
import { UploadImage, UploadVideo } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'
import { ref, reactive, onMounted } from 'vue'
import { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { travelRecordRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { useAppStore } from '@/store/app.ts'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const rules = reactive<FormRules>(travelRecordRules)
@@ -78,10 +76,49 @@ const formRef = ref()
const travelStore = useTravelStore()
const appStore = useAppStore()
const imageFileList = ref<UploadUserFile[]>([])
onMounted(async () => {
appStore.isShowMobileBack = true
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
travelStore.currentTravelRecord.imageList.forEach((image) => {
imageFileList.value.push({
name: 'image',
url: image
})
})
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(travelStore.travelImagePath, options)
}
const handleSuccess = (response: string) => {
travelStore.currentTravelRecord.imageList.push(response)
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传3张图片')
}
const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
travelStore.currentTravelRecord.imageList.splice(index, 1)
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
/**
* 点击确认按钮
*/

9
vite.config.ts
View File

@@ -5,7 +5,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock'
// const API_HOST = '14.103.235.151'
const API_HOST = '192.168.1.7'
const API_HOST = '100.66.1.3'
// https://vitejs.dev/config/
export default defineConfig({
@@ -51,9 +51,14 @@ export default defineConfig({
rewrite: (item) => item.replace(/^\/blog-api/, '')
},
'/alist-api': {
target: 'http://192.168.1.7:5244',
target: 'http://100.66.1.3:5244',
changeOrigin: true,
rewrite: (item) => item.replace(/^\/alist-api/, '')
},
'/image-api': {
target: 'http://100.66.1.3:3000',
changeOrigin: true,
rewrite: (item) => item.replace(/^\/image-api/, '')
}
}
}