feat: 供应商管理

package.json

@@ -49,6 +49,7 @@
     "js-cookie": "^3.0.5",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^8.2.0",

src/router/index.ts

@@ -522,6 +522,26 @@ export const constantRoutes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: "supplier",
+        component: () => import("@/views/inventory/supplier.vue"),
+        name: "supplier",
+        meta: {
+          title: "供应商管理",
+          affix: false,
+          hidden: true
+        },
+      }, {
+        path: "PaymentRecord",
+        component: () => import("@/views/inventory/PaymentRecord.vue"),
+        name: "PaymentRecord",
+        meta: {
+          title: "结款记录",
+          affix: false,
+          hidden: true
+        },
+      },
+
     ],
   },
   {
@@ -585,6 +605,28 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: "/mytemplate",
+    component: Layout,
+    meta: {
+      title: "我的模板",
+      icon: "tab",
+      alwaysShow: true,
+      hidden: true
+    },
+    children: [
+      {
+        path: "index",
+        component: () => import("@/views/mytemplate/index.vue"),
+        name: "orderIndex",
+        meta: {
+          title: "我的模板",
+          affix: false,
+          keepAlive: true,
+        },
+      },
+    ],
+  },
 ];
 
 /**

src/utils/eventBus.js

@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+const eventBus = mitt()
+export default eventBus

src/views/inventory/PaymentRecord.vue

@@ -0,0 +1,5 @@
+<template>
+  <!-- 结款记录 -->
+  <div class="PaymentRecord">12
+  </div>
+</template>

src/views/inventory/consumablesconfig/Content.vue

@@ -18,6 +18,7 @@ import Paging from './component/Paging.vue'
   padding: 20px;
   background-color: #fff;
   border: 1px solid #e4e7ed;
+  margin-top: 20px;
   border-radius: 4px;
 }
 </style>

src/views/inventory/consumablesconfig/DataStatistics.vue

@@ -71,7 +71,7 @@ async function getPage() {
   border: 1px solid #e4e7ed;
   background-color: #fff;
   border-radius: 4px;
-  margin: 20px 0;
+  margin-top: 20px;
   padding: 20px;
   display: flex;
   align-items: center;

src/views/inventory/consumablesconfig/component/AddButton.vue

@@ -3,5 +3,12 @@
   <el-button>入库</el-button>
   <el-button>出库</el-button>
   <el-button>分类管理</el-button>
-  <el-button>供应商管理</el-button>
+  <el-button @click="toUrl('supplier')">供应商管理</el-button>
-</template>
+</template>
+<script setup>
+import { useRouter } from 'vue-router';
+const router = useRouter();
+function toUrl(name) {
+  router.push({ name });
+}
+</script>

src/views/inventory/supplier.vue

@@ -0,0 +1,14 @@
+<template>
+  <!-- 供应商管理模块 -->
+  <div style="padding: 15px;">
+    <!-- 搜索 -->
+    <Search></Search>
+    <!-- 表格 -->
+    <Content></Content>
+    <!-- 其他内容 -->
+  </div>
+</template>
+<script setup>
+import Search from './supplierconfig/Search.vue'
+import Content from './supplierconfig/Content.vue'
+</script>

src/views/inventory/supplierconfig/Content.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="Table">
+    <!-- 按钮 -->
+    <AddButton @add="add"></AddButton>
+    <!-- 表格 -->
+    <Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></Table>
+    <!-- 分页 -->
+    <Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
+    <!-- 其他模板 -->
+    <!-- 新增/编辑 -->
+    <myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
+      <el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
+        <el-form-item label="供应商" prop="name">
+          <el-input v-model="datas.DialogForm.name" placeholder="请输入供应商名称" />
+        </el-form-item>
+        <el-form-item label="联系电话">
+          <el-input v-model="datas.DialogForm.telephone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="地址">
+          <el-input v-model="datas.DialogForm.address" placeholder="请输入地址" type="textarea" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="datas.DialogForm.remark" placeholder="请输入备注" type="textarea" />
+        </el-form-item>
+      </el-form>
+    </myDialog>
+  </div>
+</template>
+<script setup>
+import AddButton from './component/AddButton.vue'
+import Table from './component/Table.vue'
+import Paging from './component/Paging.vue'
+import myDialog from '@/components/mycomponents/myDialog.vue'
+import eventBus from '@/utils/eventBus'
+import API from './api'
+
+const datas = reactive({
+  tableData: [], // 表格数据
+  title: '新增数据',
+  pagingConfig: {
+    total: 0, // 总数
+    pageSize: "10", // 每页数据数量
+    pageNumber: 1, // 当前页码
+  },
+  DialogForm: { // 弹窗表单数据
+    name: "",
+    telephone: "",
+    address: "",
+    remark: "",
+    sort: "1",
+  },
+  rules: {
+    name: [
+      { required: true, message: '请输入供应商名称', trigger: 'blur' }
+    ],
+  }
+})
+const myDialogRef = ref(null)
+const ruleFormRef = ref(null)
+
+onMounted(() => {
+  getList()
+})
+eventBus.on('search', (res) => {
+  getList(res)
+})
+async function getList(data = {}) {
+  const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
+  datas.tableData = res.records
+  datas.pagingConfig.total = res.totalRow
+  datas.pagingConfig.pageSize = res.pageSize
+  datas.pagingConfig.pageNumber = res.pageNumber
+}
+function add() {
+  rest()
+  datas.title = '新增数据'
+  myDialogRef.value.open()
+}
+async function handleEdit(row) {
+  datas.title = '编辑数据'
+  const res = await API.getinfo(row.id)
+  datas.DialogForm = res
+  myDialogRef.value.open()
+}
+async function confirm() {
+  ruleFormRef.value.validate(async valid => {
+    if (valid) {
+      let res = null
+      if (datas.title == '新增数据') {
+        res = await API.add(datas.DialogForm)
+      } else {
+        res = await API.update(datas.DialogForm)
+      }
+      if (res.code == 200) {
+        ElMessage({
+          message: '成功',
+          type: 'success',
+        })
+        getList()
+        rest()
+        myDialogRef.value.close()
+      }
+    }
+  })
+}
+// 重置
+function rest() {
+  datas.DialogForm = { sort: "1" }
+}
+async function handleDelete(id) {
+  ElMessageBox.confirm("是否删除数据项?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    async () => {
+      let res = await API.deleteByIds(id)
+      if (res.code == 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        getList()
+      }
+    }
+  );
+}
+// 分页
+function sizeChange(val) {
+  datas.pagingConfig.pageSize = val
+  getList()
+}
+function currentChange(val) {
+  datas.pagingConfig.pageNumber = val
+  getList()
+}
+
+</script>
+<style scoped lang="scss">
+.Table {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  margin-top: 20px;
+  border-radius: 4px;
+}
+</style>

src/views/inventory/supplierconfig/Search.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="Search">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="供应商：">
+        <el-input v-model="formInline.name" placeholder="请输入供应商" clearable />
+      </el-form-item>
+      <el-form-item label="类型：">
+        <el-select v-model="formInline.region" placeholder="请选择类型" clearable>
+          <el-option label="进货" value="shanghai" />
+          <el-option label="退货" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
+        <el-button icon="Refresh" @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import eventBus from '@/utils/eventBus'
+const formInline = reactive({
+  name: '',
+  region: '',
+})
+const onSubmit = () => {
+  eventBus.emit('search', formInline)
+}
+const reset = () => {
+  formInline.name = ''
+  formInline.region = ''
+  eventBus.emit('search', formInline)
+}
+</script>
+
+<style scoped lang="scss">
+.Search {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

src/views/inventory/supplierconfig/api.ts

@@ -0,0 +1,60 @@
+import request from "@/utils/request";
+const baseURL = "/product/admin/product/vendor";
+// 供应商管理
+const AuthAPI = {
+  // 列表
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
+  /** 分页*/
+  getPage(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params,
+    });
+  },
+  // 新增
+  add(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data: { ...data },
+    });
+  },
+  // 详情
+  getinfo(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
+  // 编辑
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+};
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;

src/views/inventory/supplierconfig/component/AddButton.vue

@@ -0,0 +1,9 @@
+<template>
+  <el-button type="success" icon="Plus" @click="addEvent">新增</el-button>
+</template>
+<script setup>
+const emit = defineEmits(['add']);
+function addEvent() {
+  emit('add');
+}
+</script>

src/views/inventory/supplierconfig/component/Paging.vue

@@ -0,0 +1,24 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
+      layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
+      :total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  pagingConfig: {
+    type: Object,
+    default: () => { }
+  }
+})
+const emit = defineEmits(['sizeChange', 'currentChange'])
+// 当前条改变
+function handleSizeChange(val) {
+  emit('sizeChange', val)
+}
+// 当前页改变
+function handleCurrentChange(val) {
+  emit('currentChange', val)
+}
+</script>

src/views/inventory/supplierconfig/component/Table.vue

@@ -0,0 +1,49 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="name" label="供应商" />
+      <el-table-column prop="telephone" label="联系电话" />
+      <el-table-column prop="address" label="地址" />
+      <el-table-column prop="remark" label="备注" />
+
+      <el-table-column prop="date" label="剩余付款金额" />
+      <el-table-column prop="date" label="待付款笔数" />
+      <el-table-column prop="date" label="状态" />
+
+      <el-table-column prop="lastTransactTime" label="上笔进货日期" />
+      <el-table-column label="操作" width="250">
+
+        <template #default="scope">
+          <el-button size="small" type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button size="small" type="text" icon="Delete" style="color: #f89797;"
+            @click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
+          <el-button size="small" type="text" @click="PaymentRecord(scope.$index, scope.row)">结款记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const emit = defineEmits(['handleDelete'])
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+function handleEdit(row) {
+  emit('handleEdit', row)
+}
+async function handleDelete(index, row) {
+  emit('handleDelete', row.id)
+}
+function PaymentRecord() {
+  router.push({
+    name: 'PaymentRecord'
+  })
+}
+</script>

src/views/mytemplate/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- XXX模块 -->
+  <div style="padding: 15px;">
+    <!-- 搜索 -->
+    <Search></Search>
+    <!-- 数据统计 -->
+    <DataStatistics></DataStatistics>
+    <!-- 表格 -->
+    <Content></Content>
+  </div>
+</template>
+<script setup>
+import Search from './indexconfig/Search.vue'
+import DataStatistics from './indexconfig/DataStatistics.vue'
+import Content from './indexconfig/Content.vue'
+</script>

src/views/mytemplate/indexconfig/Content.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="Table">
+    <!-- 按钮 -->
+    <AddButton @add="add"></AddButton>
+    <!-- 表格 -->
+    <Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></Table>
+    <!-- 分页 -->
+    <Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
+    <!-- 其他模板 -->
+    <!-- 新增/编辑 -->
+    <myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
+      <el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
+        <el-form-item label="供应商" prop="name">
+          <el-input v-model="datas.DialogForm.name" placeholder="请输入供应商名称" />
+        </el-form-item>
+        <el-form-item label="联系电话">
+          <el-input v-model="datas.DialogForm.telephone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="地址">
+          <el-input v-model="datas.DialogForm.address" placeholder="请输入地址" type="textarea" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="datas.DialogForm.remark" placeholder="请输入备注" type="textarea" />
+        </el-form-item>
+      </el-form>
+    </myDialog>
+  </div>
+</template>
+<script setup>
+import AddButton from './component/AddButton.vue'
+import Table from './component/Table.vue'
+import Paging from './component/Paging.vue'
+import myDialog from '@/components/mycomponents/myDialog.vue'
+import eventBus from '@/utils/eventBus'
+import API from './api'
+
+const datas = reactive({
+  tableData: [], // 表格数据
+  title: '新增数据',
+  pagingConfig: {
+    total: 0, // 总数
+    pageSize: "10", // 每页数据数量
+    pageNumber: 1, // 当前页码
+  },
+  DialogForm: { // 弹窗表单数据
+    name: "",
+    telephone: "",
+    address: "",
+    remark: ""
+  },
+  rules: {
+    name: [
+      { required: true, message: '请输入供应商名称', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+  }
+})
+const myDialogRef = ref(null)
+const ruleFormRef = ref(null)
+onMounted(() => {
+  getList()
+})
+eventBus.on('search', (res) => {
+  getList(res)
+})
+async function getList(data = {}) {
+  const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
+  datas.tableData = res.records
+  datas.pagingConfig.total = res.totalRow
+  datas.pagingConfig.pageSize = res.pageSize
+  datas.pagingConfig.pageNumber = res.pageNumber
+}
+function add() {
+  rest()
+  datas.title = '新增数据'
+  myDialogRef.value.open()
+}
+async function handleEdit(row) {
+  datas.title = '编辑数据'
+  const res = await API.getinfo(row.id)
+  datas.DialogForm = res
+  myDialogRef.value.open()
+}
+async function confirm() {
+  ruleFormRef.value.validate(async valid => {
+    if (valid) {
+      let res = null
+      if (datas.title == '新增数据') {
+        res = await API.add(datas.DialogForm)
+      } else {
+        res = await API.update(datas.DialogForm)
+      }
+      if (res.code == 200) {
+        ElMessage({
+          message: '成功',
+          type: 'success',
+        })
+        rest()
+        getList()
+        myDialogRef.value.close()
+      }
+    }
+  })
+}
+// 重置
+function rest() {
+  datas.DialogForm = { sort: "1" }
+}
+async function handleDelete(id) {
+  ElMessageBox.confirm("是否删除数据项?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    async () => {
+      let res = await API.deleteByIds(id)
+      if (res.code == 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        getList()
+      }
+    }
+  );
+}
+// 分页
+function sizeChange(val) {
+  datas.pagingConfig.pageSize = val
+  getList()
+}
+function currentChange(val) {
+  datas.pagingConfig.pageNumber = val
+  getList()
+}
+
+</script>
+<style scoped lang="scss">
+.Table {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  margin-top: 20px;
+  border-radius: 4px;
+}
+</style>

src/views/mytemplate/indexconfig/DataStatistics.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="DataStatistics">
+    <div style="width:  200px;">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <span>耗材种数</span>
+      <span>{{ datas.totalRow }}</span>
+    </div>
+    <div style="width:  300px;">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <div>
+        <div><span>增加数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动增加：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>入库：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="width:  500px;">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <div>
+        <div><span>减少数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动减少：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>消耗：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>报损：</span><span>0</span>
+          </div><span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>出库：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import API from "@/api/product/index";
+import { onMounted, reactive } from "vue";
+onMounted(() => {
+  getPage();
+})
+let datas = reactive({
+  totalRow: 0
+})
+async function getPage() {
+  let res = await API.getPage();
+  datas.totalRow = res.totalRow
+}
+</script>
+
+
+<style scoped lang="scss">
+.DataStatistics {
+  border: 1px solid #e4e7ed;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-top: 20px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  >div {
+    height: 80px;
+    background-color: #f4f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    padding: 20px;
+
+    .iconStyle {
+      background-color: #d4e9fe;
+      border-radius: 50%;
+      padding: 6px;
+      font-size: 36px;
+      color: #3f9eff;
+    }
+
+    span {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/mytemplate/indexconfig/Search.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="Search">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="耗材分类">
+        <el-select v-model="formInline.region" placeholder="请选择耗材分类" clearable>
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="耗材名称">
+        <el-input v-model="formInline.user" placeholder="请输入耗材名称" clearable />
+      </el-form-item>
+      <el-form-item label="日期">
+        <el-date-picker v-model="formInline.value1" type="daterange" range-separator="-" start-placeholder="开始日期"
+          end-placeholder="结束日期" />
+      </el-form-item>
+      <el-form-item label="排列方式">
+        <el-select v-model="formInline.region" placeholder="请选择排列方式" clearable>
+          <el-option label="创建时间" value="shanghai" />
+          <el-option label="数量由低到高" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
+        <el-button icon="Refresh" @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import eventBus from '@/utils/eventBus'
+const formInline = reactive({
+  user: '',
+  region: '',
+  date: '',
+  value1: ""
+})
+const onSubmit = () => {
+  eventBus.emit('search', formInline)
+}
+const reset = () => {
+  formInline.user = ''
+  formInline.region = ''
+  formInline.date = ''
+  formInline.value1 = ''
+  eventBus.emit('search', formInline)
+}
+</script>
+
+<style scoped lang="scss">
+.Search {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

src/views/mytemplate/indexconfig/api.ts

@@ -0,0 +1,60 @@
+import request from "@/utils/request";
+const baseURL = "/product/admin/prod/group";
+// XXX-配置
+const AuthAPI = {
+  // 列表
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
+  /** 分页*/
+  getPage(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params,
+    });
+  },
+  // 新增
+  add(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data: { ...data },
+    });
+  },
+  // 详情
+  getinfo(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
+  // 编辑
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+};
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;

src/views/mytemplate/indexconfig/component/AddButton.vue

@@ -0,0 +1,15 @@
+<template>
+  <el-button type="success" icon="Plus" @click="addEvent">新增</el-button>
+  <el-button @click="toUrl('supplier')">其他按钮</el-button>
+</template>
+<script setup>
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const emit = defineEmits(['add']);
+function toUrl(name) {
+  router.push({ name });
+}
+function addEvent() {
+  emit('add');
+}
+</script>

src/views/mytemplate/indexconfig/component/Paging.vue

@@ -0,0 +1,24 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
+      layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
+      :total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  pagingConfig: {
+    type: Object,
+    default: () => { }
+  }
+})
+const emit = defineEmits(['sizeChange', 'currentChange'])
+// 当前条改变
+function handleSizeChange(val) {
+  emit('sizeChange', val)
+}
+// 当前页改变
+function handleCurrentChange(val) {
+  emit('currentChange', val)
+}
+</script>

src/views/mytemplate/indexconfig/component/Table.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="date" label="Date" width="180" />
+      <el-table-column prop="name" label="Name" width="180" />
+      <el-table-column prop="address" label="Address" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button size="small" type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button size="small" type="text" icon="Delete" style="color: #f89797;"
+            @click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['handleDelete'])
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+function handleEdit(row) {
+  emit('handleEdit', row)
+}
+async function handleDelete(index, row) {
+  emit('handleDelete', row.id)
+}
+
+</script>