Skip to content
This repository has been archived by the owner on Oct 31, 2023. It is now read-only.

Commit

Permalink
Merge pull request #103 from Jzow/master
Browse files Browse the repository at this point in the history 
Add image upload for product info view
  • Loading branch information
@Jzow
Jzow authored Oct 20, 2023
2 parents e3b07c3 + 77b8945 commit 678e760
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 33 deletions.
18 changes: 18 additions & 0 deletions src/api/basic/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {ContentTypeEnum} from "@/enums/httpEnum";
enum Api {
UploadXlsx = '/v2/common/upload/excel',
ExportXlsx = '/v2/common/export/excel',
UploadOss = '/v2/common/uploadOss',
}

export interface UploadFileParams {
Expand Down Expand Up @@ -40,4 +41,21 @@ export function exportXlsx(type: string, mode: ErrorMessageMode = 'notice') {
errorMessageMode: mode,
},
);
}

export function uploadOss(params: UploadFileParams, mode: ErrorMessageMode = 'notice') {
return defHttp.post<BaseResp>(
{
url: Api.UploadOss,
params,
headers: {
'Content-type': ContentTypeEnum.FORM_DATA,
// @ts-ignore
ignoreCancelToken: true,
},
},
{
errorMessageMode: mode,
},
);
}
120 changes: 87 additions & 33 deletions src/views/product/info/components/ProductInfoModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,24 +273,24 @@
<a-button style="margin-left: 8px" @click="batchSetStock('lowSafeStock')">最低安全库存-批量</a-button>
<a-button style="margin-left: 8px" @click="batchSetStock('highSafeStock')">最高安全库存-批量</a-button>
</a-row>
<a-row class="form-row" :gutter="24">
<a-table :loading="stock.loading"
:columns="stock.columns"
:dataSource="stock.dataSource"
:rowNumber="true"
bordered
:scroll="{ x: '100%', y: 300 }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'warehouseName'">
<a-input v-model:value="editStockData[record.key][column.key]" disabled />
</template>
<template v-else-if="editStockData[record.key]">
<a-input v-model:value="editStockData[record.key][column.key]"
:placeholder="`请输入${getColumnTitle(column)}`" />
</template>
<a-row class="form-row" :gutter="24">
<a-table :loading="stock.loading"
:columns="stock.columns"
:dataSource="stock.dataSource"
:rowNumber="true"
bordered
:scroll="{ x: '100%', y: 300 }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'warehouseName'">
<a-input v-model:value="editStockData[record.key][column.key]" disabled/>
</template>
</a-table>
</a-row>
<template v-else-if="editStockData[record.key]">
<a-input v-model:value="editStockData[record.key][column.key]"
:placeholder="`请输入${getColumnTitle(column)}`"/>
</template>
</template>
</a-table>
</a-row>
<batch-set-stock-modal ref="stockModalForm" @ok="batchSetStokModalFormOk"></batch-set-stock-modal>
</a-tab-pane>
<a-tab-pane key="4" tab="图片信息" forceRender>
Expand All @@ -300,13 +300,17 @@
:wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="图片信息">
<a-upload
v-model:file-list="fileList"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:custom-request="uploadImage"
:before-upload="beforeUpload"
list-type="picture-card"
:max-count="4"
@preview="handlePreview"
@change="handleChange"
multiple
>
<div v-if="fileList.length < 8">
<div v-if="fileList.length < 4">
<plus-outlined/>
<div style="margin-top: 8px">Upload</div>
<div style="margin-top: 8px">上传图片</div>
</div>
</a-upload>
</a-form-item>
Expand All @@ -317,7 +321,7 @@
<a-col :lg="18" :md="18" :sm="24">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 3 }}"
:wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="上传提示">
图片最多4张，且单张大小不超过1M
图片最多4张，且单张大小不超过2M
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :sm="24"></a-col>
Expand All @@ -331,7 +335,7 @@
</template>

<script lang="ts">
import {ref, reactive, onMounted, watch, computed, readonly} from 'vue';
import {ref, reactive, onMounted, watch} from 'vue';
import {
Modal,
Upload,
Expand All @@ -344,7 +348,7 @@ import {
Tabs,
Select,
Tooltip,
TreeSelect, Input, InputNumber, Checkbox, SelectOption, TabPane, Table,
TreeSelect, Input, InputNumber, Checkbox, SelectOption, TabPane, Table, UploadChangeParam,
} from "ant-design-vue";
import {cloneDeep} from 'lodash-es';
import {PlusOutlined} from '@ant-design/icons-vue';
Expand All @@ -360,6 +364,8 @@ import {getAttributeList, getAttributeById} from "@/api/product/productAttribute
import {useMessage} from "@/hooks/web/useMessage";
import BatchSetPriceModal from "@/views/product/info/components/BatchSetPriceModal.vue";
import BatchSetStockModal from "@/views/product/info/components/BatchSetStockModal.vue";
import {uploadOss} from "@/api/basic/common";
export default {
name: 'ProductInfoModal',
emits: ['success', 'cancel'],
Expand All @@ -386,7 +392,7 @@ export default {
BatchSetStockModal
},
setup(_, context) {
const { createMessage } = useMessage();
const {createMessage} = useMessage();
const productStandard = ref<String>('');
const productName = ref<String>('');
const confirmLoading = ref(false);
Expand Down Expand Up @@ -697,11 +703,12 @@ export default {
const skuTwoData = ref([]);
const skuThreeData = ref([]);
const skuArr = ref([]);
function onSkuChange(value, array) {
if (array === skuOne) {
skuOneData.value = value
} else if (array === skuTwo) {
skuTwoData.value =value
skuTwoData.value = value
} else if (array === skuThree) {
skuThreeData.value = value
}
Expand All @@ -716,6 +723,7 @@ export default {
}
}
}
function autoSkuList() {
let arr = [];
Expand Down Expand Up @@ -757,9 +765,9 @@ export default {
loadBarCode();
}
function loadBarCode(){
function loadBarCode() {
getBarCode().then(res => {
if (res && res.code==='00000') {
if (res && res.code === '00000') {
let maxBarCode = res.data
if (skuArr.value.length > 0) {
meTable.dataSource.splice(0); // 清空meTableData数组
Expand All @@ -778,11 +786,10 @@ export default {
function loadStock() {
getStock().then(res => {
if (res && res.code==='00000') {
if (res && res.code === '00000') {
let stockList = res.data
if (stockList.length > 0) {
stock.dataSource.splice(0);
console.info(stockList)
for (let i = 0; i < stockList.length; i++) {
const rowData = {
key: stockList[i].id,
Expand All @@ -793,7 +800,6 @@ export default {
}
stock.dataSource.push(rowData);
}
console.info(stock.dataSource)
stock.dataSource.forEach(row => {
editStock(row.key);
});
Expand Down Expand Up @@ -857,7 +863,7 @@ export default {
}
function batchSetPrice(type) {
if(manySkuSelected.value > 0) {
if (manySkuSelected.value > 0) {
priceModalForm.value.add(type);
priceModalForm.value.openPriceModal = true;
} else {
Expand All @@ -871,7 +877,7 @@ export default {
}
function batchSetPriceModalFormOk(price, batchType) {
if(meTable.dataSource.length === 0) {
if (meTable.dataSource.length === 0) {
createMessage.warn('请先录入条码、单位等信息！');
return;
}
Expand Down Expand Up @@ -981,6 +987,50 @@ export default {
const previewTitle = ref('');
const fileList = ref<UploadProps['fileList']>([])
function beforeUpload(file) {
const isPNG =
file.type === "image/png" ||
file.type === "image/jpeg" ||
file.type === "image/jpg" ||
file.type === "image/gif" ||
file.type === "image/bmp";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isPNG) {
createMessage.error(`${file.name}，该文件不是图片类型`);
return isPNG || Upload.LIST_IGNORE
}
if (!isLt2M) {
createMessage.error(`${file.name}，该文件超过2MB大小限制`);
return isLt2M || Upload.LIST_IGNORE
}
}
const handleChange = ({ file, fileList }: UploadChangeParam) => {
if (file.status !== 'uploading') {
console.log(file, fileList);
}
};
function uploadImage(options) {
const { file, onSuccess, onError, onProgress } = options;
const formData = new FormData();
formData.append('files', file);
// 调用 uploadOss 方法进行上传
uploadOss(formData, {
onUploadProgress: ({total, loaded}) => {
onProgress(
{percent: Math.round((loaded / total) * 100).toFixed(2)},
file
);
},
}).then((res) => {
onSuccess(res, file);
}).catch((error) => {
onError(error);
});
}
const handlePreview = async (file: UploadProps['fileList'][number]) => {
if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj)) as string;
Expand Down Expand Up @@ -1047,7 +1097,11 @@ export default {
stock,
editStockData,
stockModalForm,
batchSetStokModalFormOk
batchSetStokModalFormOk,
beforeUpload,
uploadImage,
handleChange,
handlePreview
};
},
}
Expand Down

0 comments on commit 678e760

Please sign in to comment.