feat 添加出货商

src/api/seller.js

@@ -0,0 +1,25 @@
+import {mande} from "mande";
+import {queryRemoveZero} from "@/api/utils.js";
+
+const product = mande('/api/v2/sellers')
+
+export const ListSellers = (q) => {
+    const query = queryRemoveZero(q)
+    return product.get({query})
+}
+
+export const CreateSeller = (seller)=>{
+    return product.post(seller)
+}
+
+export const UpdateSeller = (seller)=>{
+    return product.put(seller)
+}
+
+export const GetSeller = (id) =>{
+    return product.get(`/${id}`)
+}
+
+export  const DeleteSeller = (id)=>{
+    return product.delete(`/${id}`)
+}

src/routers/index.js

@@ -34,6 +34,11 @@ const routes = [
         path: '/provider',
         name: 'provider',
         component: ()=>import('@/views/Provider/index.vue')
+    },
+    {
+        path: '/seller',
+        name: 'seller',
+        component: ()=>import('@/views/Seller/index.vue')
     }
 ]
 

src/views/Seller/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
+    <div class="flex justify-between">
+      <a-button type="primary" @click="onClickCreate" :disabled="loading">添加</a-button>
+      <div class="flex space-x-4">
+        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
+        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
+      </div>
+    </div>
+    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4">
+      <a-spin :spinning="loading" :indicator="indicator">
+        <a-table :dataSource="data.list" :columns="columns" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'mark'">
+              <span>{{record.mark || '-'}}</span>
+            </template>
+            <template v-else-if="column.dataIndex === 'name'">
+            </template>
+            <template v-else-if="column.key === 'opt'">
+              <a-button type="link" @click="onClickUpdate(record.id)">编辑</a-button>
+              <a-button type="link" danger @click="onClickDelete(record.id)"> 删除</a-button>
+            </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="addModal.visible" :title="`${addModal.edit ? '编辑' : '添加'}出货商`" @ok="handleOk" centered width="80%">
+    <a-spin :spinning="addModal.loading" :indicator="indicator">
+      <a-form
+          ref="formRef"
+          :model="addModal.data"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 16 }"
+          autocomplete="off"
+          @finish="cleanAddModal"
+          @finishFailed="cleanAddModal"
+      >
+        <a-form-item label="标识" name="sellerId" :rules="[{ required: true, message: '请填写出货商标识' }]">
+          <a-input v-model:value="addModal.data.sellerId" placeholder="请输入标识，比如：dewu" :disabled="addModal.edit"/>
+        </a-form-item>
+        <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请填写出货商名称' }]">
+          <a-input v-model:value="addModal.data.name" placeholder="请输入名称，比如：得物"/>
+        </a-form-item>
+        <a-form-item label="抓取定时" name="config.ticker">
+          <a-time-picker valueFormat="HH:mm" v-model:value="addModal.data.config.ticker" format="HH:mm" :allowClear="false" />
+        </a-form-item>
+        <a-form-item label="成本计算" >
+          <div class="flex flex-col space-y-4">
+            <div class="flex justify-between items-center">
+              <div class="text-sm">(原售价：originalPrice)</div>
+              <a-button class="w-16" type="primary" @click="addModal.data.calculateProcess.push({ name: '', condition: '', process: ''})">添加</a-button>
+            </div>
+            <div class="flex space-x-4" v-for="(item, index) in addModal.data.calculateProcess" :key="index">
+              <a-form-item-rest><a-input  v-model:value="addModal.data.calculateProcess[index].name" placeholder="名称"/></a-form-item-rest>
+              <a-form-item-rest><a-input  v-model:value="addModal.data.calculateProcess[index].condition" placeholder="条件"/></a-form-item-rest>
+              <a-form-item-rest><a-input  v-model:value="addModal.data.calculateProcess[index].process" placeholder="计算公式"/></a-form-item-rest>
+              <a-button danger type="primary" @click="addModal.data.calculateProcess.splice(index,1)">-</a-button>
+            </div>
+          </div>
+        </a-form-item>
+        <a-form-item label="备注" name="mark">
+          <a-textarea  v-model:value="addModal.data.mark" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script setup>
+
+import {h, onMounted, reactive, ref} from "vue";
+import {CreateSeller, DeleteSeller, GetSeller, ListSellers, UpdateSeller} from "@/api/seller.js";
+import {message} from "ant-design-vue";
+import {LoadingOutlined} from "@ant-design/icons-vue";
+
+
+const query = reactive({
+  keyword: "",
+  page: 1,
+  size: 10,
+  sellerId: '',
+  id: '',
+})
+
+const loading = ref(false)
+// 展示数据
+const data = reactive({
+  list: [],
+  total: 0
+})
+
+const list = () => {
+  loading.value = true
+  ListSellers(query).then(res => {
+    if (res.code !== 200) {
+      message.error(res.msg)
+    }else {
+      data.list = res.data.list
+      data.total = res.data.total
+    }
+  }).finally(()=>{
+    loading.value = false
+  })
+}
+
+onMounted(()=>{
+  list()
+})
+
+const addModal = reactive({
+  visible: false,
+  data: {
+    sellerId: '',
+    name: '',
+    mark: '',
+    config: {
+      ticker: '03:00',
+    },
+    calculateProcess: []
+  },
+  loading: false,
+  edit: false  //是创建还是编辑
+})
+
+const formRef = ref()
+const cleanAddModal=()=>{
+  addModal.data = {
+    sellerId: '',
+    name: '',
+    mark: '',
+    config: {
+      ticker:  '03:00',
+    },
+    calculateProcess: []
+  }
+  formRef.value.clearValidate()
+  addModal.visible = false
+}
+
+const handleOk = ()=>{
+  formRef.value.validateFields().then(res=>{
+    for(let process of addModal.data.calculateProcess){
+      if(process.name === '' || process.process === ''){
+        message.error("名称或计算公式不能为空")
+        return
+      }
+    }
+
+    const api = addModal.edit ? UpdateSeller : CreateSeller
+    api(addModal.data).then(res=>{
+      if (res.code !== 200) {
+        message.error(res.msg)
+      }else {
+        message.success(`${addModal.edit ? '编辑' : '添加'}成功`)
+      }
+    }).catch(err => {
+      message.error(`${addModal.edit ? '编辑' : '添加'}失败`)
+      console.log(err)
+    }).finally(()=>{
+      list()
+      cleanAddModal()
+    })
+  })
+}
+
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '32px',
+  },
+  spin: true,
+});
+
+
+const columns = [
+  {
+    title: '标识',
+    dataIndex: 'sellerId',
+    key: 'sellerId',
+    width: 200
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 250
+  },
+  {
+    title: '备注',
+    dataIndex: 'mark',
+    key: 'mark',
+  },
+  {
+    title: '操作',
+    key: 'opt',
+  }
+]
+
+const onClickCreate=()=>{
+  addModal.edit = false
+  addModal.visible = true
+}
+
+const onClickUpdate=(id)=>{
+  loading.value = true
+  GetSeller(id).then(res=>{
+    if (res.code !== 200) {
+      message.error(res.msg)
+    }else {
+      addModal.data = res.data
+      addModal.edit = true
+      addModal.visible = true
+    }
+  }).finally(()=>{
+    loading.value = false
+  })
+}
+
+const onClickDelete=(id)=>{
+  loading.value = true
+  DeleteSeller(id).then(res=>{
+    if (res.code !== 200) {
+      message.error(res.msg)
+    }else {
+      message.success("删除成功")
+    }
+  }).finally(()=>{
+    loading.value = false
+    list()
+  })
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/layout/Aside.vue

@@ -8,7 +8,7 @@
   ></a-menu>
 </template>
 <script setup>
-import {AccountBookOutlined, BellOutlined, DollarCircleOutlined, HddOutlined} from "@ant-design/icons-vue";
+import {AccountBookOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined} from "@ant-design/icons-vue";
 import {h} from "vue";
 import {useRouter} from "vue-router";
 
@@ -62,6 +62,12 @@ const items = [
     icon: () => h(HddOutlined),
     label: '供应商',
     title: '供应商',
+  },
+  {
+    key: 'seller',
+    icon: () => h(DeploymentUnitOutlined),
+    label: '出货商',
+    title: '出货商',
   }
 ]