feat 添加编辑功能

This commit is contained in:
timerzz 2024-05-15 13:07:16 +08:00
parent 4c9e139f39
commit 10fba9c57c
6 changed files with 107 additions and 8 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -13,6 +13,7 @@
"ant-design-vue": "4.x", "ant-design-vue": "4.x",
"mande": "^2.0.8", "mande": "^2.0.8",
"moment": "^2.30.1", "moment": "^2.30.1",
"radash": "^12.1.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-router": "4" "vue-router": "4"
}, },

View File

@ -5,3 +5,7 @@ const product = mande('/api/v1/products')
export const ListProducts = (query) => { export const ListProducts = (query) => {
return product.get({query:query}) return product.get({query:query})
} }
export const UpdateProduct=(p)=>{
return product.post(p)
}

View File

@ -17,6 +17,22 @@
<template v-else-if="column.key === 'updatedAt'"> <template v-else-if="column.key === 'updatedAt'">
<span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span> <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
</template> </template>
<template v-else-if="column.key === 'freight'">
<div class="flex space-x-4">
<a-input-number v-if="editData.edit && editData.param==='freight' && editData.data.pid === record.pid" v-model:value="editData.data.freight" @pressEnter="doUpdate"></a-input-number>
<span v-else @dblclick="onEdit(record, 'freight')">{{record.freight}}</span>
<SaveOutlined class="cursor-pointer" v-if="editData.edit && editData.param==='freight' && editData.data.pid === record.pid" v-model:value="editData.data.freight" @click="doUpdate"/>
<!-- <FormOutlined v-else class="cursor-pointer" @click="onEdit(record, 'freight')"/>-->
</div>
</template>
<template v-else-if="column.key === 'dwPrice'">
<div class="flex space-x-4">
<a-input-number v-if="editData.edit && editData.param==='dwPrice' && editData.data.pid === record.pid" v-model:value="editData.data.dwPrice" @pressEnter="doUpdate"></a-input-number>
<span v-else @dblclick="onEdit(record, 'dwPrice')">{{record.dwPrice}}</span>
<SaveOutlined class="cursor-pointer" v-if="editData.edit && editData.param==='dwPrice' && editData.data.pid === record.pid" v-model:value="editData.data.dwPrice" @click="doUpdate"/>
<!-- <FormOutlined v-else class="cursor-pointer" @click="onEdit(record, 'dwPrice')"/>-->
</div>
</template>
<template v-else-if="column.key === 'image'"> <template v-else-if="column.key === 'image'">
<a-image <a-image
:width="100" :width="100"
@ -31,19 +47,51 @@
<span class="cursor-pointer">{{parseFloat(record.cnyPrice).toFixed(2)}}</span> <span class="cursor-pointer">{{parseFloat(record.cnyPrice).toFixed(2)}}</span>
</a-popover> </a-popover>
</template> </template>
<template v-else-if="column.key === 'opt'">
<a-popover title="" placement="bottom">
<template #content>
<a-button type="text" block @click="onEdit(record, 'modal')">编辑</a-button>
</template>
<SettingOutlined class="cursor-pointer" />
</a-popover>
</template>
</template> </template>
</a-table> </a-table>
</a-spin> </a-spin>
</div> </div>
<a-pagination :disabled="loading" class="text-right" v-model:current="query.page" :total="data.total" show-less-items @change="list"/> <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" :total="data.total" show-less-items @change="list"/>
</div> </div>
<a-modal v-model:open="editData.editModal" @ok="doUpdate">
<template #title>
编辑
</template>
<a-form :model="editData.data" :labelCol="{span: 6}">
<a-form-item label="价格(美元)">
<a-input-number disabled v-model:value="editData.data.usPrice"/>
</a-form-item>
<a-form-item label="成本">
<a-input-number disabled v-model:value="editData.data.cnyPrice"/>
</a-form-item>
<a-form-item label="运费">
<a-input-number v-model:value="editData.data.freight"/>
</a-form-item>
<a-form-item label="得物价格">
<a-input-number v-model:value="editData.data.dwPrice"/>
</a-form-item>
<a-form-item label="备注">
<a-textarea v-model:value="editData.data.remark"/>
</a-form-item>
</a-form>
</a-modal>
</template> </template>
<script setup> <script setup>
import {h, onMounted, reactive, ref} from "vue"; import {h, onMounted, onUpdated, reactive, ref} from "vue";
import {ListProducts} from "@/api/product.js"; import {ListProducts, UpdateProduct} from "@/api/product.js";
import moment from "moment/moment.js"; import moment from "moment/moment.js";
import {LoadingOutlined} from "@ant-design/icons-vue"; import { clone } from 'radash'
import {LoadingOutlined, SaveOutlined,SettingOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
onMounted(()=>{ onMounted(()=>{
list() list()
@ -98,6 +146,11 @@ const columns = [
dataIndex: 'cnyPrice', dataIndex: 'cnyPrice',
key: 'cnyPrice', key: 'cnyPrice',
}, },
{
title: '运费(CNY)',
dataIndex: 'freight',
key: 'freight',
},
{ {
title: '得物(CNY)', title: '得物(CNY)',
dataIndex: 'dwPrice', dataIndex: 'dwPrice',
@ -118,10 +171,10 @@ const columns = [
dataIndex: 'remark', dataIndex: 'remark',
key: 'remark', key: 'remark',
}, },
// { {
// title: '', title: '操作',
// key: 'opt', key: 'opt',
// }, },
] ]
const indicator = h(LoadingOutlined, { const indicator = h(LoadingOutlined, {
@ -131,6 +184,40 @@ const indicator = h(LoadingOutlined, {
spin: true, spin: true,
}); });
const editData = reactive({
param: 'dwPrice',
data: {
},
edit: false,
editModal: false
})
const onEdit=(record, param) => {
editData.data = clone(record)
editData.param = param
editData.edit = true
if(param === 'modal'){
editData.editModal = true
}
}
const doUpdate=()=>{
if(!editData.data.pid){
message.error('缺少pid')
}
loading.value = true
UpdateProduct(editData.data).then(res=>{
message.success('更新成功')
}).catch(err=>{
message.error('更新失败')
console.log(err)
}).finally(()=>{
list()
editData.edit = false
loading.value = false
editData.editModal = false
})
}
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="h-[100px] shadow-lg flex items-center justify-between px-12 z-10"> <div class="h-[100px] shadow-lg flex items-center justify-between px-12 py-4 z-10">
<div class="flex space-x-4 items-center"> <div class="flex space-x-4 items-center">
<img class="h-[60px]" src="@/assets/logo.png" alt=""> <img class="h-[60px]" src="@/assets/logo.png" alt="">
<div class="text-[24px] font-bold"> <div class="text-[24px] font-bold">

View File

@ -22,6 +22,13 @@ export default defineConfig({
server:{ server:{
open: true, open: true,
proxy: { proxy: {
'/api/v1/products': {
// target: 'https://ht.timerzz.com:20443/',
target: 'http://192.168.31.163:31828/',
changeOrigin: true,
secure: false,
ws: true,
},
'/api/v1': { '/api/v1': {
target: 'https://ht.timerzz.com:20443/', target: 'https://ht.timerzz.com:20443/',
// target: 'http://192.168.31.55:2280/', // target: 'http://192.168.31.55:2280/',