lzq
/
njzscloud-dispose-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

文件上传组件

master
lzq 2026-01-15 17:36:36 +08:00
parent 8ba12ded82
commit 29d808402d
18 changed files with 517 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -1,14 +1,14 @@
<!doctype html>
<html lang="zh">
<!DOCTYPE html>
<html lang="zh-CN" spellcheck="false">
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ&libraries=service"></script>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ&libraries=service"></script>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ"></script>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ"></script>
<style>
html {
overflow: hidden;

7
src/common/app/app-api.ts
View File

@ -4,6 +4,7 @@ import {
} from '@/common/utils/http-util.ts'
import { saveFile } from '@/common/app'
import { serverBaseUrl } from '@/common'
interface PresignedUrl extends Record<string, string | undefined> {
url?: string
@ -54,10 +55,12 @@ export default {
if (filename == null || filename.length <= 0) {
return ''
}
if (filename.startsWith('http') || filename.startsWith('https')) {
if (filename.startsWith('http') || filename.startsWith('https') || filename.startsWith('blob')) {
return filename
}
if (filename.startsWith('/')) {
if (filename.startsWith(serverBaseUrl + '/oss/download')) {
return filename
} else if (filename.startsWith('/')) {
return getFileUrl('/oss/download' + filename)
} else {
return getFileUrl('/oss/download/' + filename)

2
src/common/index.ts
View File

@ -11,7 +11,7 @@ export const appName = import.meta.env.VITE_APP_NAME
/**
* 服务器基础地址
*/
export const serverBaseUrl = import.meta.env.VITE_HTTP_SERVER_BASE_URL ?? '/'
export const serverBaseUrl = import.meta.env.VITE_HTTP_SERVER_BASE_URL ?? ''
export const wsServerBaseUrl = import.meta.env.VITE_WS_SERVER_BASE_URL ?? '/'

57
src/common/utils/times.ts
View File

@ -202,20 +202,63 @@ function prettyDuration(date: DateTime<true | false> | Date | number | string, o
}
}
function endOfMonth(date?: DateTime<true | false>) {
function beginOfDay(date?: DateTime<true | false>) {
if (date == null) {
return date = now()
date = now()
}
return date.endOf('month')
return date.startOf('day')
}
function endOfDay(date?: DateTime<true | false>) {
if (date == null) {
date = now()
}
return date.endOf('day')
}
function beginOfMonth(date?: DateTime<true | false>) {
if (date == null) {
return date = now()
date = now()
}
return date.startOf('month')
}
function endOfMonth(date?: DateTime<true | false>) {
if (date == null) {
date = now()
}
return date.endOf('month')
}
function beginOfWeek(date?: DateTime<true | false>) {
if (date == null) {
date = now()
}
return date.startOf('week')
}
function endOfWeek(date?: DateTime<true | false>) {
if (date == null) {
date = now()
}
return date.endOf('week')
}
function beginOfYear(date?: DateTime<true | false>) {
if (date == null) {
date = now()
}
return date.startOf('year')
}
function endOfYear(date?: DateTime<true | false>) {
if (date == null) {
date = now()
}
return date.endOf('year')
}
function toDate(date: DateTime<true | false>) {
return date.toJSDate()
}
@ -228,6 +271,12 @@ export default {
FMT,
endOfMonth,
beginOfMonth,
beginOfDay,
endOfDay,
beginOfWeek,
endOfWeek,
beginOfYear,
endOfYear,
toDate,
prettyDuration,
}

37
src/components/page/FormPage.vue
View File

@ -99,7 +99,7 @@ const searchForm = Utils.resetAble(reactive<F>({
const tableData = Utils.resetAble(reactive<TT[]>([])) as ResetAble<TT[]>
const totalCount = ref(0)
const loading = ref<boolean>(false)
const showSearchForm = ref<boolean>(true)
const showSearchForm = ref<boolean>(false)
function doReset() {
searchForm.$reset()
@ -182,7 +182,18 @@ onMounted(doSearch)
<button style="display: none" type="submit"></button>
</ElForm>
<ElTooltip content="刷新" placement="top">
<ElButton :icon="elIcons.Refresh" :loading="loading" type="default" @click="doSearch"/>
<ElDropdown split-button @click="doSearch" @command="(command)=>{
if(command === 'reset'){
doReset()
}
}">
<ElButton :icon="elIcons.Refresh" :loading="loading" type="default"/>
<template #dropdown>
<ElDropdownMenu slot="dropdown">
<ElDropdownItem command="reset">重置并刷新</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
</ElTooltip>
<template v-if="!Colls.isEmpty(rightTools)">
<ElButton v-for="(tool,i) in rightTools" :key="'tool-bar-right-'+i"
@ -405,15 +416,27 @@ onMounted(doSearch)
//box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
//padding 10px
:deep(.el-form) {
.el-form-item {
margin: 0;
}
.tool-bar-left {
flex 1
}
& > div:last-child {
.tool-bar-right {
flex 1
display flex
gap 10px
justify-content end
:deep(.el-form) {
display flex
gap 10px
.el-form-item {
margin: 0;
flex 1
}
}
:deep(.el-button--default) {
width 32px

69
src/components/uploader/Uploader.vue
View File

@ -9,22 +9,31 @@ import { serverBaseUrl } from '@/common'
import { type R } from '@/common/utils/http-util.ts'
import Strings from '@/common/utils/strings.ts'
import AppApi from '@/common/app/app-api.ts'
import type { UploadProps } from 'element-plus/es/components/upload/src/upload'
const props = defineProps<{
const props = withDefaults(defineProps<{
files?: string[]
file?: string
limit: number
}>()
limit?: number
uploadProps?: Partial<Omit<UploadProps, 'httpRequest' | 'crossorigin' | 'multiple'
| 'data' | 'action' | 'headers' | 'limit' | 'onError'
| 'onRemove' | 'onSuccess' | 'onPreview' | 'fileList' | 'beforeUpload' | 'beforeRemove' | 'onChange' | 'onProgress' | 'name'>>
}>(), {
limit: 1,
// @ts-ignore
uploadProps: {},
})
const multiple = computed(() => props.limit > 1)
const emit = defineEmits([ 'update:files', 'update:file' ])
const appUserStore = useAppUserStore()
const showPreview = ref(false)
const headers = computed(() => ({
Authorization: appUserStore.token!,
}))
const uploadUrl = serverBaseUrl + '/oss/upload'
const files = ref<UploadUserFile[]>([])
const filesList = ref<UploadUserFile[]>([])
function uploadSuccHandler(response: R<string>, _: UploadFile, uploadFiles: UploadFiles) {
if (props.limit === 1) {
@ -38,7 +47,7 @@ function uploadSuccHandler(response: R<string>, _: UploadFile, uploadFiles: Uplo
function rmFileHandler(_: UploadFile, uploadFiles: UploadFiles) {
if (props.limit === 1) {
if (uploadFiles.length > 0) {
emit('update:file', (files.value[0].response as R<string>).data)
emit('update:file', (filesList.value[0].response as R<string>).data)
} else {
emit('update:file', undefined)
}
@ -52,6 +61,11 @@ function uploadFailHandler(response: any, uploadFile: UploadFile, uploadFiles: U
console.log(response, uploadFile, uploadFiles)
}
const previewList = computed(() => filesList.value.map(it => AppApi.fileUrl(it.url)))
const handlePictureCardPreview = () => {
console.log(previewList.value, filesList.value)
showPreview.value = true
}
defineExpose({
setDefaultFiles(urls: string[]) {
if (urls.length > 0) {
@ -60,7 +74,7 @@ defineExpose({
if (Strings.isBlank(url)) {
continue
}
files.value?.push({
filesList.value?.push({
uid: i,
name: url.substring(url.lastIndexOf('/') + 1),
url: AppApi.fileUrl(url),
@ -76,18 +90,53 @@ defineExpose({
<template>
<ElUpload
v-model:file-list="files"
v-model:file-list="filesList"
:action="uploadUrl"
:headers="headers"
:limit="limit"
:multiple="multiple"
:on-error="uploadFailHandler"
:on-remove="rmFileHandler"
:on-success="uploadSuccHandler"
v-bind="$attrs">
<slot/>
:on-preview="handlePictureCardPreview"
class="a-uploader"
v-bind="uploadProps">
<slot>
<ElIcon class="default-icon">
<ElIconPlus/>
</ElIcon>
</slot>
<template #tip>
<slot name="tip"/>
</template>
</ElUpload>
<ElImageViewer
v-if="showPreview"
:url-list="previewList"
show-progress
style="position: absolute"
@close="showPreview = false"
/>
</template>
<style lang="stylus" scoped>
.a-uploader {
:deep(.el-upload) {
background-color white
}
:deep(.el-upload-dragger) {
height: 100%;
width: 100%;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
.default-icon {
color: var(--el-text-color-secondary);
font-size: 28px;
}
}
</style>

11
src/dts/components.d.ts vendored
View File

@ -5,7 +5,6 @@
// ------
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
import { GlobalComponents } from 'vue'
export {}
@ -33,8 +32,12 @@ declare module 'vue' {
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElIconCircleClose: typeof import('@element-plus/icons-vue')['CircleClose']
ElIconCirclePlus: typeof import('@element-plus/icons-vue')['CirclePlus']
ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
ElIconPicture: typeof import('@element-plus/icons-vue')['Picture']
ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
ElImage: typeof import('element-plus/es')['ElImage']
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMain: typeof import('element-plus/es')['ElMain']
@ -87,8 +90,12 @@ declare global {
const ElHeader: typeof import('element-plus/es')['ElHeader']
const ElIcon: typeof import('element-plus/es')['ElIcon']
const ElIconCircleClose: typeof import('@element-plus/icons-vue')['CircleClose']
const ElIconCirclePlus: typeof import('@element-plus/icons-vue')['CirclePlus']
const ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
const ElIconPicture: typeof import('@element-plus/icons-vue')['Picture']
const ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
const ElImage: typeof import('element-plus/es')['ElImage']
const ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
const ElInput: typeof import('element-plus/es')['ElInput']
const ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
const ElMain: typeof import('element-plus/es')['ElMain']
@ -112,4 +119,4 @@ declare global {
const ElUpload: typeof import('element-plus/es')['ElUpload']
const RouterLink: typeof import('vue-router')['RouterLink']
const RouterView: typeof import('vue-router')['RouterView']
}
}

14
src/pages/a-frame/UserInfoPanel.vue
View File

@ -91,11 +91,10 @@ defineExpose({
<ElFormItem prop="avatar">
<Uploader
v-model:file="userInfoForm.avatar"
:limit="1"
:multiple="true"
accept="image/*"
class="avatar-uploader"
list-type="picture">
:upload-props="{
accept: 'image/*',
listType:'picture'
}">
<ElButton>点击上传头像</ElButton>
</Uploader>
</ElFormItem>
@ -116,10 +115,11 @@ defineExpose({
}
}
.avatar-uploader {
:deep(.a-uploader) {
width 100%;
:deep(.el-upload) {
.el-upload {
width 100%;
& > button {

89
src/pages/gds/goods-category/GoodsCategory.vue
View File

@ -5,25 +5,46 @@
:left-tools="leftTools"
:paging="paging">
<template #searchFormItem="{ searchForm }">
<ElFormItem label="业务类型">
<ElSelect v-model="searchForm.bizType" clearable placeholder="业务类型" @change="research">
<ElOption v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
</ElSelect>
</ElFormItem>
<ElFormItem label="分类名称">
<ElInput v-model="searchForm.categoryName" placeholder="分类名称"/>
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
</ElFormItem>
<ElFormItem label="创建时间">
<ElDatePicker
v-model="searchForm.createTimes"
:default-time="createTimeDefaultTime"
:shortcuts="shortcuts"
clearable
end-placeholder="结束时间"
start-placeholder="开始时间"
type="datetimerange"
@change="research"
/>
</ElFormItem>
</template>
<template #simpleSearchFormItem="{ searchForm }">
<ElFormItem style="min-width: 200px">
<ElSelect v-model="searchForm.bizType" clearable placeholder="业务类型" @change="research">
<ElOption v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
</ElSelect>
</ElFormItem>
<ElFormItem>
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
</ElFormItem>
</template>
<template #columns>
<ElTableColumn label="业务类型" prop="bizTypeName"/>
<ElTableColumn label="分类名称" prop="categoryName"/>
<ElTableColumn label="图片" prop="picture">
<template #default="{ row }">
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px"/>
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 32px; height: 32px"/>
</template>
</ElTableColumn>
<ElTableColumn label="业务类型" prop="bizTypeTxt"/>
<ElTableColumn label="分类名称" prop="categoryName"/>
<ElTableColumn label="创建时间" prop="createTime"/>
<ElTableColumn label="修改时间" prop="modifyTime"/>
</template>
<GoodsCategoryForm ref="goodsCategoryForm" @edit-succ="research"/>
</FormPage>
@ -38,9 +59,60 @@ import FormPage, {
type ActionColumnType,
type ToolType,
} from '@/components/page/FormPage.vue'
import Times from '@/common/utils/times.ts'
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const createTimeDefaultTime: [ Date, Date ] = [
Times.toDate(Times.beginOfDay()),
Times.toDate(Times.endOfDay()),
]
const bizList = [
{
value: 'ZaiShengPin',
label: '再生品',
},
{
value: 'HuiShouPin',
label: '回收品',
},
{
value: 'QiTa',
label: '其他',
},
]
const shortcuts = [
{
text: '今天',
value: () => [ Times.toDate(Times.beginOfDay()), Times.toDate(Times.endOfDay()) ],
},
{
text: '昨天',
value: () => {
const time = Times.now().minus({day: 1})
return [ Times.toDate(Times.beginOfDay(time)), Times.toDate(Times.endOfDay(time)) ]
},
},
{
text: '本周',
value: () => {
return [ Times.toDate(Times.beginOfWeek()), Times.toDate(Times.endOfWeek()) ]
},
},
{
text: '本月',
value: () => {
return [ Times.toDate(Times.beginOfMonth()), Times.toDate(Times.endOfMonth()) ]
},
},
{
text: '今年',
value: () => {
return [ Times.toDate(Times.beginOfYear()), Times.toDate(Times.endOfYear()) ]
},
},
]
const leftTools: ToolType[] = [
{
icon: 'Plus',
@ -83,6 +155,11 @@ function research() {
}
function paging(param: GoodsCategoryTypes.SearchGoodsCategoryParam) {
return GoodsCategoryApi.paging(param)
return GoodsCategoryApi.paging({
bizType: param.bizType,
categoryName: param.categoryName,
createTimeStart: param.createTimes?.[0] ? Times.format(param.createTimes[0]) : undefined,
createTimeEnd: param.createTimes?.[1] ? Times.format(param.createTimes[1]) : undefined,
})
}
</script>

130
src/pages/gds/goods-category/GoodsCategoryForm.vue
View File

@ -6,124 +6,128 @@
<!-- ：biz_type，ZaiShengPin-再生品、HuiShouPin-回收品、QiTa其他" -->
<el-select v-model="formData.bizType" :disabled="status === 'view'" placeholder="业务类型" style="width: 240px">
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</ElFormItem>
<ElFormItem label-width="90" label="分类名称" prop="categoryName">
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称" />
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称"/>
</ElFormItem>
<ElFormItem label-width="90" label="图片" prop="picture">
<!-- <ElInput
v-model="formData.picture"
:disabled="status === 'view'"
placeholder="图片"/> -->
<Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
<!-- <ElButton>点击上传图片</ElButton> -->
</Uploader>
<Uploader
ref="uploader"
v-model:file="formData.picture"
:upload-props="{
accept: 'image/*',
listType:'picture-card',
drag:false
}"/>
</ElFormItem>
<ElFormItem label-width="90" label="排序" prop="sort">
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="排序" />
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="排序"/>
</ElFormItem>
</ElForm>
<template #footer>
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
</template>
</ElDialog>
</template>
<script lang="ts" setup>
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Uploader from "@/components/uploader/Uploader.vue";
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import Uploader from '@/components/uploader/Uploader.vue'
import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import Utils from '@/common/utils'
import {
ElMessage,
type FormInstance,
type FormRules,
} from 'element-plus'
const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");
const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const goodsCategoryFormIns = useTemplateRef<FormInstance>("goodsCategoryForm");
const goodsCategoryFormIns = useTemplateRef<FormInstance>('goodsCategoryForm')
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
const bizList = [
{
value: "ZaiShengPin",
label: "再生品",
value: 'ZaiShengPin',
label: '再生品',
},
{
value: "HuiShouPin",
label: "回收品",
value: 'HuiShouPin',
label: '回收品',
},
{
value: "QiTa",
label: "其他",
value: 'QiTa',
label: '其他',
},
];
]
const formData = Utils.resetAble(reactive<any>({}));
const formData = Utils.resetAble(reactive<any>({}))
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
bizType: [{ required: true, message: "请填写业务类型", trigger: "blur" }],
categoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
creatorId: [{ required: true, message: "请填写创建人 Id；sys_user.id", trigger: "blur" }],
modifierId: [{ required: true, message: "请填写修改人 Id；sys_user.id", trigger: "blur" }],
createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
});
bizType: [ {required: true, message: '请填写业务类型', trigger: 'blur'} ],
categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
creatorId: [ {required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur'} ],
modifierId: [ {required: true, message: '请填写修改人 Id；sys_user.id', trigger: 'blur'} ],
createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
})
function dialogCloseHandler() {
formData.$reset();
formData.$reset()
}
function submitHandler() {
if (status.value === "view") return;
submiting.value = true;
if (status.value === 'view') return
submiting.value = true
if (formData.id != null) {
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.modify(formData))
.then(() => {
ElMessage.success("修改成功");
emits("editSucc");
showDialog.value = false;
ElMessage.success('修改成功')
emits('editSucc')
showDialog.value = false
})
.finally(() => {
submiting.value = false;
});
submiting.value = false
})
} else {
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.add(formData))
.then(() => {
ElMessage.success("添加成功");
emits("editSucc");
showDialog.value = false;
ElMessage.success('添加成功')
emits('editSucc')
showDialog.value = false
})
.finally(() => {
submiting.value = false;
});
submiting.value = false
})
}
}
defineExpose({
open(data: any = {}) {
showDialog.value = true;
showDialog.value = true
if (!Strings.isBlank(data.id)) {
status.value = "modify";
status.value = 'modify'
GoodsCategoryApi.detail(data.id!).then((res) => {
formData.$reset(res.data);
});
formData.$reset(res.data)
if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
})
} else {
status.value = "add";
formData.$reset(data);
status.value = 'add'
formData.$reset(data)
}
},
});
})
</script>
<style lang="stylus" scoped>

18
src/pages/gds/goods-category/goods-category.d.ts vendored
View File

@ -3,26 +3,16 @@ export {}
declare global {
namespace GoodsCategoryTypes {
interface SearchGoodsCategoryParam extends G.PageParam {
// Id
id?: string
// 业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他
bizType?: string
// 分类名称
categoryName?: string
// 图片
picture?: string
// 排序
sort?: number
// 创建人 Id；sys_user.id
creatorId?: string
// 修改人 Id；sys_user.id
modifierId?: string
// 创建时间
createTime?: string
// 创建时间范围
createTimes?: [ Date, Date ]
// 修改时间
modifyTime?: string
createTimeStart?: string
// 是否删除； 0-->未删除、1-->已删除
deleted?: boolean
createTimeEnd?: string
}
interface SearchGoodsCategoryResult {

20
src/pages/gds/goods/Goods.vue
View File

@ -29,21 +29,21 @@
</template>
<template #columns>
<ElTableColumn label="商品编码" prop="sn"/>
<ElTableColumn label="产品名称" prop="goodsName"/>
<ElTableColumn label="规格" prop="specParams"/>
<ElTableColumn label="图片" width="100">
<template #default="{ row }">
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px"/>
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 32px; height: 32px"/>
</template>
</ElTableColumn>
<ElTableColumn label="产品名称" prop="goodsName"/>
<ElTableColumn label="规格" prop="specParams"/>
<ElTableColumn label="是否可用" prop="canuse">
<template #default="{ row }">
{{ row.canuse ? '是' : '否' }}
<template #default="{row}">
<ElSwitch v-model="row.canuse" @change="enableGoodsHandler($event,row.id)"/>
</template>
</ElTableColumn>
<ElTableColumn label="备注" prop="memo"/>
<ElTableColumn label="创建时间" prop="createTime" width="160"/>
<ElTableColumn label="修改时间" prop="modifyTime" width="160"/>
</template>
<GoodsForm ref="goodsForm" @edit-succ="editSuccHandler"/>
</FormPage>
@ -106,4 +106,12 @@ const leftTools: ToolType[] = [
function paging(param: GoodsTypes.SearchGoodsParam) {
return GoodsApi.paging(param)
}
function enableGoodsHandler(enable: boolean, id: string) {
GoodsApi.enable({enable, id})
.then(() => {
ElMessage.success(enable ? '启用成功' : '禁用成功')
editSuccHandler()
})
}
</script>

130
src/pages/gds/goods/GoodsForm.vue
View File

@ -4,38 +4,42 @@
<ElFormItem label-width="90" label="产品类型" prop="goodsCategoryId">
<!-- <ElInput v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型 Id" /> -->
<el-select v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型" filterable remote reserve-keyword remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
<el-option v-for="item in category" :key="item.id" :label="item.categoryName" :value="item.id" />
<el-option v-for="item in category" :key="item.id" :label="item.categoryName" :value="item.id"/>
</el-select>
</ElFormItem>
<ElFormItem label-width="90" label="商品编码" prop="sn">
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码" />
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
</ElFormItem>
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称" />
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称"/>
</ElFormItem>
<ElFormItem label-width="90" label="规格" prop="specParams">
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格" />
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格"/>
</ElFormItem>
<ElFormItem label-width="90" label="图片" prop="picture">
<Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
<Uploader
ref="uploader"
v-model:file="formData.picture"
:upload-props="{
accept: 'image/*',
listType:'picture-card'
}"/>
</ElFormItem>
<ElFormItem label-width="90" label="计量单位" prop="unit">
<ADict v-model="formData.unit" :disabled="status === 'view'" dict-key="unit" placeholder="计量单位" style="width: 240px"/>
</ElFormItem>
<ElFormItem label-width="90" label="排序" prop="sort">
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序" />
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序"/>
</ElFormItem>
<ElFormItem label-width="90" label="备注" prop="memo">
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注" />
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注"/>
</ElFormItem>
<ElFormItem label-width="90" label="是否可用" prop="canuse">
<el-switch v-model="formData.canuse" :disabled="status === 'view'" />
<el-switch v-model="formData.canuse" :disabled="status === 'view'"/>
</ElFormItem>
</ElForm>
<template #footer>
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
</template>
</ElDialog>
@ -56,97 +60,99 @@ import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
import DictApi from '@/pages/sys/dict/dict-api.ts'
import ADict from '@/components/a-dict/ADict.vue'
const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");
const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const goodsFormIns = useTemplateRef<FormInstance>("goodsForm");
const goodsFormIns = useTemplateRef<FormInstance>('goodsForm')
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
const formData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult>({ canuse: true }));
const formData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult>({canuse: true}))
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
goodsCategoryId: [{ required: true, message: "请填写产品类型", trigger: "blur" }],
sn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
specParams: [{ required: true, message: "请填写规格", trigger: "blur" }],
picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
unit: [{ required: true, message: "请填写计量单位", trigger: "blur" }],
sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
});
id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
sn: [ {required: true, message: '请填写商品编码', trigger: 'blur'} ],
goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
unit: [ {required: true, message: '请填写计量单位', trigger: 'blur'} ],
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
})
function dialogCloseHandler() {
formData.$reset();
formData.$reset()
}
function submitHandler() {
if (status.value === "view") return;
submiting.value = true;
if (status.value === 'view') return
submiting.value = true
if (formData.id != null) {
FormUtil.submit(goodsFormIns, () => GoodsApi.modify(formData))
.then(() => {
ElMessage.success("修改成功");
emits("editSucc");
showDialog.value = false;
ElMessage.success('修改成功')
emits('editSucc')
showDialog.value = false
})
.finally(() => {
submiting.value = false;
});
submiting.value = false
})
} else {
FormUtil.submit(goodsFormIns, () => GoodsApi.add(formData))
.then(() => {
ElMessage.success("添加成功");
emits("editSucc");
showDialog.value = false;
ElMessage.success('添加成功')
emits('editSucc')
showDialog.value = false
})
.finally(() => {
submiting.value = false;
});
submiting.value = false
})
}
}
const category = ref<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([]);
const loading = ref(false);
const category = ref<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([])
const loading = ref(false)
const remoteMethod = (query: string) => {
console.log(query, "query");
loading.value = true;
GoodsCategoryApi.paging({ size: 50, categoryName: query || undefined }).then((res) => {
category.value = res.data.records;
loading.value = false;
console.log(query, 'query')
loading.value = true
GoodsCategoryApi.paging({size: 50, categoryName: query || undefined}).then((res) => {
category.value = res.data.records
loading.value = false
// category.value = list.value.filter((item) => {
// return item.label.toLowerCase().includes(query.toLowerCase())
// })
});
})
// } else {
// category.value = [];
// }
};
const unitList=ref<DictItemTypes.SearchDictItemResult[]>([])
}
const unitList = ref<DictItemTypes.SearchDictItemResult[]>([])
const getOpt = () => {
let searchForm = {
dictKey: "unit",
};
dictKey: 'unit',
}
DictApi.obtainDictData(searchForm).then((res) => {
// console.log(res.data);
unitList.value=res.data
});
};
unitList.value = res.data
})
}
defineExpose({
open(data: GoodsTypes.SearchGoodsResult = {}) {
showDialog.value = true;
showDialog.value = true
if (!Strings.isBlank(data.id)) {
status.value = "modify";
status.value = 'modify'
GoodsApi.detail(data.id!).then((res) => {
formData.$reset(res.data);
});
formData.$reset(res.data)
if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
})
} else {
status.value = "add";
formData.$reset(data);
status.value = 'add'
formData.$reset(data)
}
getOpt();
getOpt()
},
});
})
</script>
<style lang="stylus" scoped>

5
src/pages/gds/goods/goods-api.ts
View File

@ -1,6 +1,6 @@
import {
get,
post
post,
} from '@/common/utils/http-util.ts'
export default {
@ -19,4 +19,7 @@ export default {
del(ids: string[]) {
return post('/goods/del', ids)
},
enable(param: { enable: boolean; id: string }) {
return get('/goods/enable', param)
},
}

69
src/pages/order/trans-order/CheckForm.vue
View File

@ -2,64 +2,71 @@
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
<ElForm :model="formData" :rules="rules" ref="transForm" class="form-panel" label-width="auto">
<ElFormItem label-width="90" label="看料照片" prop="checkPhoto">
<Uploader v-model:files="formData.checkPhoto" :limit="3" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
<Uploader v-model:files="formData.checkPhoto"
:limit="3"
:upload-props="{
accept: 'image/*',
listType:'picture-card'
}"/>
</ElFormItem>
<ElFormItem label-width="90" label="备注" prop="weight">
<ElInput v-model="formData.checkerMemo" :disabled="status === 'view'" placeholder="请输入备注"> </ElInput>
<ElInput v-model="formData.checkerMemo" :disabled="status === 'view'" placeholder="请输入备注"></ElInput>
</ElFormItem>
</ElForm>
<template #footer>
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
</template>
</ElDialog>
</template>
<script lang="ts" setup>
import TransApi from "@/pages/order/trans-order/trans-api.ts";
import TransApi from '@/pages/order/trans-order/trans-api.ts'
// import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import Uploader from "@/components/uploader/Uploader.vue";
import FormUtil from '@/common/utils/formUtil.ts'
import Utils from '@/common/utils'
import {
ElMessage,
type FormInstance,
type FormRules,
} from 'element-plus'
import Uploader from '@/components/uploader/Uploader.vue'
const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");
const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const transFormIns = useTemplateRef<FormInstance>("transForm");
const transFormIns = useTemplateRef<FormInstance>('transForm')
const formData = Utils.resetAble(reactive<TransTypes.CheckResult>({}));
const formData = Utils.resetAble(reactive<TransTypes.CheckResult>({}))
const rules = reactive<FormRules<TransTypes.CheckResult>>({
orderTransId: [{ required: true, message: "请填写Id", trigger: "blur" }],
});
orderTransId: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
})
function dialogCloseHandler() {
formData.$reset();
formData.$reset()
}
function submitHandler() {
// console.log(formData, "formData");
// return;
if (status.value === "view") return;
submiting.value = true;
if (status.value === 'view') return
submiting.value = true
FormUtil.submit(transFormIns, () => {
let data = Object.assign({}, formData);
return TransApi.check(data);
let data = Object.assign({}, formData)
return TransApi.check(data)
})
.then(() => {
ElMessage.success("看料成功");
emits("editSucc");
showDialog.value = false;
ElMessage.success('看料成功')
emits('editSucc')
showDialog.value = false
})
.finally(() => {
submiting.value = false;
});
submiting.value = false
})
// if (formData.id != null) {
// FormUtil.submit(transFormIns, () => TransApi.modify(formData))
@ -86,10 +93,10 @@ function submitHandler() {
defineExpose({
open(data: TransTypes.SearchTransResult = {}) {
formData.orderTransId = data.id;
showDialog.value = true;
formData.orderTransId = data.id
showDialog.value = true
},
});
})
</script>
<style lang="stylus" scoped>

84
src/pages/order/trans-order/InForm.vue
View File

@ -8,70 +8,78 @@
</ElFormItem>
<ElFormItem label-width="90" label="车头照" prop="cargoPhoto">
<Uploader v-model:file="formData.cargoPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
<Uploader v-model:file="formData.cargoPhoto"
:upload-props="{
accept: 'image/*',
listType:'picture-card'
}"/>
</ElFormItem>
<ElFormItem label-width="90" label="车斗照" prop="bodyPhoto">
<Uploader v-model:file="formData.bodyPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
<Uploader v-model:file="formData.bodyPhoto"
:upload-props="{
accept: 'image/*',
listType:'picture-card'
}"/>
</ElFormItem>
</ElForm>
<template #footer>
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
</template>
</ElDialog>
</template>
<script lang="ts" setup>
import TransApi from "@/pages/order/trans-order/trans-api.ts";
import TransApi from '@/pages/order/trans-order/trans-api.ts'
// import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import Uploader from "@/components/uploader/Uploader.vue";
import FormUtil from '@/common/utils/formUtil.ts'
import Utils from '@/common/utils'
import {
ElMessage,
type FormInstance,
type FormRules,
} from 'element-plus'
import Uploader from '@/components/uploader/Uploader.vue'
const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");
const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const transFormIns = useTemplateRef<FormInstance>("transForm");
const transFormIns = useTemplateRef<FormInstance>('transForm')
const formData = Utils.resetAble(reactive<TransTypes.InOutResult>({
weight:0
}));
weight: 0,
}))
const rules = reactive<FormRules<TransTypes.InOutResult>>({
orderTransId: [{ required: true, message: "请填写Id", trigger: "blur" }],
cargoPhoto: [{ required: true, message: "请上传车头照", trigger: "blur" }],
bodyPhoto: [{ required: true, message: "请上传车尾照", trigger: "blur" }],
weight: [{ required: true, message: "请输入磅重", trigger: "blur" }],
});
orderTransId: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
cargoPhoto: [ {required: true, message: '请上传车头照', trigger: 'blur'} ],
bodyPhoto: [ {required: true, message: '请上传车尾照', trigger: 'blur'} ],
weight: [ {required: true, message: '请输入磅重', trigger: 'blur'} ],
})
function dialogCloseHandler() {
formData.$reset();
formData.$reset()
}
function submitHandler() {
if (status.value === "view") return;
submiting.value = true;
if (status.value === 'view') return
submiting.value = true
FormUtil.submit(transFormIns, () => {
let data = Object.assign({}, formData);
data.weight = data.weight * 1000;
return TransApi.coming(data);
let data = Object.assign({}, formData)
data.weight = data.weight * 1000
return TransApi.coming(data)
})
.then(() => {
ElMessage.success("进场成功");
emits("editSucc");
showDialog.value = false;
ElMessage.success('进场成功')
emits('editSucc')
showDialog.value = false
})
.finally(() => {
submiting.value = false;
});
submiting.value = false
})
// if (formData.id != null) {
// FormUtil.submit(transFormIns, () => TransApi.modify(formData))
@ -98,10 +106,10 @@ function submitHandler() {
defineExpose({
open(data: TransTypes.SearchTransResult = {}) {
formData.orderTransId = data.id;
showDialog.value = true;
formData.orderTransId = data.id
showDialog.value = true
},
});
})
</script>
<style lang="stylus" scoped>

30
src/pages/order/trans-order/OutForm.vue
View File

@ -8,15 +8,19 @@
</ElFormItem>
<ElFormItem label-width="90" label="车头照" prop="cargoPhoto">
<Uploader v-model:file="formData.cargoPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
<Uploader v-model:file="formData.cargoPhoto"
:upload-props="{
accept: 'image/*',
listType:'picture-card'
}"/>
</ElFormItem>
<ElFormItem label-width="90" label="车斗照" prop="bodyPhoto">
<Uploader v-model:file="formData.bodyPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
<Uploader v-model:file="formData.bodyPhoto"
:upload-props="{
accept: 'image/*',
listType:'picture-card'
}"/>
</ElFormItem>
</ElForm>
<template #footer>
@ -27,12 +31,16 @@
</template>
<script lang="ts" setup>
import TransApi from "@/pages/order/trans-order/trans-api.ts";
import TransApi from '@/pages/order/trans-order/trans-api.ts'
// import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import Uploader from "@/components/uploader/Uploader.vue";
import FormUtil from '@/common/utils/formUtil.ts'
import Utils from '@/common/utils'
import {
ElMessage,
type FormInstance,
type FormRules,
} from 'element-plus'
import Uploader from '@/components/uploader/Uploader.vue'
const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);

9
src/pages/sys/user/UserForm.vue
View File

@ -18,11 +18,10 @@
<Uploader
v-model:file="userFormData.avatar"
:disabled="status === 'view'"
:limit="1"
:multiple="true"
accept="image/*"
class="avatar-uploader"
list-type="picture">
:upload-props="{
accept: 'image/*',
listType:'picture'
}">
<ElButton>点击上传头像</ElButton>
</Uploader>
</ElFormItem>