feat 添加编辑功能

package.json

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

src/api/product.js

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

src/views/Product/index.vue

@@ -17,6 +17,22 @@
             <template v-else-if="column.key === 'updatedAt'">
               <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
             </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'">
               <a-image
                   :width="100"
@@ -31,19 +47,51 @@
                 <span class="cursor-pointer">{{parseFloat(record.cnyPrice).toFixed(2)}}</span>
               </a-popover>
             </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>
         </a-table>
       </a-spin>
     </div>
     <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" :total="data.total" show-less-items @change="list"/>
   </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>
 <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 {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(()=>{
   list()
@@ -98,6 +146,11 @@ const columns = [
     dataIndex: 'cnyPrice',
     key: 'cnyPrice',
   },
+  {
+    title: '运费(CNY)',
+    dataIndex: 'freight',
+    key: 'freight',
+  },
   {
     title: '得物(CNY)',
     dataIndex: 'dwPrice',
@@ -118,10 +171,10 @@ const columns = [
     dataIndex: 'remark',
     key: 'remark',
   },
-  // {
+  {
-  //   title: '操作',
+    title: '操作',
-  //   key: 'opt',
+    key: 'opt',
-  // },
+  },
 ]
 
 const indicator = h(LoadingOutlined, {
@@ -131,6 +184,40 @@ const indicator = h(LoadingOutlined, {
   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>
 
 

src/views/layout/Header.vue

@@ -1,5 +1,5 @@
 <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">
     <img class="h-[60px]" src="@/assets/logo.png" alt="">
     <div class="text-[24px] font-bold">

vite.config.js

@@ -22,6 +22,13 @@ export default defineConfig({
   server:{
     open: true,
     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': {
         target: 'https://ht.timerzz.com:20443/',
         // target: 'http://192.168.31.55:2280/',