采购计划、历史采购

src/components/indexIcon.vue

@@ -1,50 +1,18 @@
 <template>
-  <!-- fill="#1e5efd"  -->
   <svg
-    class="inline-block text-35px text-primary"
-    width="30px"
-    height="30px"
-    version="1.0"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640.000000 640.000000"
+    height="26px"
-    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
   >
-    <g
+    <path
-      transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
       fill="#18a058"
-      stroke="none"
+      d="M7 9V3q0-.425.288-.712T8 2t.713.288T9 3v6h1V3q0-.425.288-.712T11 2t.713.288T12 3v6q0 1.4-.862 2.45T9 12.85V21q0 .425-.288.713T8 22t-.712-.288T7 21v-8.15q-1.275-.35-2.137-1.4T4 9V3q0-.425.288-.712T5 2t.713.288T6 3v6zm10 5h-2q-.425 0-.712-.288T14 13V7q0-1.75 1.288-3.375T17.95 2q.45 0 .75.35t.3.825V21q0 .425-.288.713T18 22t-.712-.288T17 21z"
-    >
+    ></path>
-      <path
-        d="M3045 5731 c-138 -23 -319 -101 -427 -185 -75 -59 -157 -148 -198
-    -215 -14 -23 -56 -90 -94 -149 -38 -59 -79 -123 -91 -142 -59 -94 -128 -200
-    -158 -242 -17 -25 -45 -70 -62 -98 -16 -28 -44 -70 -61 -93 -17 -23 -39 -58
-    -49 -77 -9 -19 -24 -43 -33 -53 -8 -9 -40 -57 -71 -106 -87 -137 -159 -249
-    -356 -551 -59 -91 -117 -181 -130 -200 -12 -19 -53 -82 -91 -140 -38 -58 -71
-    -109 -73 -115 -2 -5 -50 -79 -105 -165 -56 -85 -135 -207 -176 -270 -102 -159
-    -165 -257 -245 -380 -37 -58 -82 -127 -100 -155 -18 -27 -75 -115 -127 -195
-    -53 -80 -101 -156 -108 -170 -7 -14 -26 -41 -42 -60 -15 -19 -28 -39 -28 -44
-    0 -5 -11 -24 -25 -42 -14 -18 -25 -35 -25 -38 0 -3 -14 -26 -32 -52 -80 -119
-    -120 -305 -98 -460 25 -173 117 -335 260 -455 112 -94 205 -141 375 -191 72
-    -21 99 -23 280 -22 168 0 218 4 315 23 63 13 126 28 140 33 14 5 46 13 72 18
-    27 5 69 19 95 31 27 12 64 28 83 36 119 49 291 150 390 229 140 110 330 318
-    415 453 78 124 177 320 169 333 -3 4 -112 8 -242 8 -130 0 -232 4 -226 8 6 4
-    240 355 519 780 279 424 510 772 513 772 4 0 66 -89 139 -198 72 -108 307
-    -459 522 -779 215 -320 391 -584 391 -587 0 -3 -106 -6 -236 -6 l-235 0 7 -22
-    c28 -91 179 -343 277 -463 78 -96 226 -241 307 -303 73 -56 251 -172 263 -172
-    4 0 41 -16 84 -36 43 -20 96 -45 118 -55 22 -10 69 -25 105 -32 36 -8 119 -27
-    185 -42 96 -21 156 -27 302 -32 165 -5 190 -4 280 17 205 47 357 129 476 254
-    32 33 70 81 84 106 15 25 35 55 44 68 10 13 30 60 46 105 26 75 28 94 28 222
-    -1 127 -3 147 -28 213 -26 71 -73 156 -154 278 -21 31 -42 64 -48 73 -5 9 -37
-    59 -71 111 -34 52 -70 109 -80 126 -11 17 -44 69 -74 115 -30 47 -59 92 -65
-    102 -5 9 -26 40 -46 69 -20 29 -67 100 -104 158 -38 58 -81 124 -97 147 -15
-    23 -28 44 -28 48 0 4 -9 19 -20 33 -22 28 -109 162 -176 270 -21 35 -49 76
-    -60 90 -12 15 -30 43 -40 62 -11 19 -46 76 -78 125 -264 402 -266 405 -376
-    578 -44 70 -206 320 -267 413 -7 11 -20 33 -29 49 -10 17 -34 53 -56 82 -21
-    29 -38 55 -38 58 0 3 -43 71 -95 150 -52 79 -98 152 -102 162 -4 10 -15 27
-    -26 38 -10 11 -25 33 -33 48 -8 15 -43 70 -77 122 -34 52 -83 127 -109 167
-    -59 90 -138 180 -192 217 -23 15 -62 42 -87 59 -55 38 -166 85 -264 113 -78
-    23 -330 34 -420 20z"
-      ></path>
-    </g>
   </svg>
 </template>
+
+<script lang="ts">
+  export default {
+    name: "MaterialSymbolsRestaurantRounded",
+  };
+</script>

src/views/personnelManagement/enterpriseStaff/index.vue

@@ -18,7 +18,7 @@
     type TableProInst,
     Icon,
   } from "@/components";
-  import { NPerformantEllipsis, NTag } from "naive-ui";
+  import { NPerformantEllipsis, NPopconfirm, NTag } from "naive-ui";
   const tableRef = useTemplateRef<TableProInst>("tableRef");
   const reqApi: TableType["requestApi"] = (params) => {
     return new Promise((resolve) => {
@@ -60,6 +60,7 @@
       label: "商品名称",
     },
   });
+  const loading = ref<boolean>(false);
   const columns = ref<TableType["columns"]>([
     // {
     //   key: "index",
@@ -84,7 +85,7 @@
     },
     {
       key: "company",
-      title: "商品名称",
+      title: "单位",
       width: 200,
       render: ({ company }) => {
         return (
@@ -114,6 +115,37 @@
       title: "操作者",
       width: 100,
     },
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    loading={loading.value}
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    退货
+                  </n-button>
+                ),
+                default: () => "确认要退货么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
   ]);
 </script>
 <style scoped lang="scss"></style>

src/views/personnelManagement/historicalPurchase/index.vue

@@ -1,10 +1,213 @@
-
+<!-- 历史采购 -->
 <template>
-  <div>历史采购</div>
+  <div>
+    <TablePro
+      ref="tableRef"
+      :request-api="reqApi"
+      :search-form-options="searchFormOptions"
+      :columns="columns"
+      :isPageTable="true"
+    >
+      <template #headerExtra>
+        <!-- <n-button
+          strong
+          secondary
+          type="primary"
+        >
+          添加
+        </n-button>
+        <n-button style="margin-left: 10px">一键采购</n-button> -->
+      </template>
+    </TablePro>
+  </div>
 </template>
-<script setup lang="ts">
+<script setup lang="tsx">
+  import {
+    TablePro,
+    type TableProProps,
+    FormPro,
+    type FormItemOptions,
+    type TableProInst,
+    Icon,
+  } from "@/components";
+  import { NPerformantEllipsis, NPopconfirm, NTag } from "naive-ui";
+  const tableRef = useTemplateRef<TableProInst>("tableRef");
+  const reqApi: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              brand: "",
+              id: "1834044644795646208",
+              max: 99.0,
+              name: "金煌芒果",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644799840512",
+              max: 99.0,
+              name: "大红薯",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644795646464",
+              max: 99.0,
+              name: "200g中益健康魔芋丝",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644795645953",
+              max: 99.0,
+              name: "blt北美洲车厘子500g/盒",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644795646209",
+              max: 99.0,
+              name: "紫叶生菜",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644799840513",
+              max: 99.0,
+              name: "香干",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644795646465",
+              max: 99.0,
+              name: "江西甜柑",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+            {
+              brand: "",
+              id: "1834044644795645954",
+              max: 99.0,
+              name: "糯玉米（精）",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+              historyNum: "999",
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  type TableType = TableProProps<any, any>;
+  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
+    name: {
+      type: "input",
+      label: "商品名称",
+    },
+  });
 
+  const columns = ref<TableType["columns"]>([
+    {
+      key: "name",
+      title: "商品名称",
+      width: 200,
+      render: ({ name }) => {
+        return (
+          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
+            {name}
+          </NPerformantEllipsis>
+        );
+      },
+    },
+    {
+      key: "unit",
+      title: "单位",
+      width: 50,
+    },
+    {
+      key: "brand",
+      title: "品牌",
+      width: 70,
+      render: ({ brand }) => {
+        return <div>{brand ? brand : "无"}</div>;
+      },
+    },
+    {
+      key: "purTypeStr",
+      title: "商品类型",
+      width: 70,
+    },
+    {
+      key: "historyNum",
+      title: "历史采购数量",
+      width: 120,
+      render: ({ historyNum }) => {
+        return <div>{historyNum}斤</div>;
+      },
+    },
+  ]);
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-
-</style>

src/views/personnelManagement/securityStaff/index.vue

@@ -1,9 +1,266 @@
+<!-- 采购计划 -->
 <template>
-  <div>采购计划</div>
+  <div>
+    <TablePro
+      ref="tableRef"
+      :request-api="reqApi"
+      :search-form-options="searchFormOptions"
+      :columns="columns"
+      :isPageTable="true"
+    >
+      <template #headerExtra>
+        <n-button
+          strong
+          secondary
+          type="primary"
+        >
+          添加
+        </n-button>
+        <n-button style="margin-left: 10px">一键采购</n-button>
+      </template>
+    </TablePro>
+  </div>
 </template>
-<script setup lang="ts">
+<script setup lang="tsx">
+  import {
+    TablePro,
+    type TableProProps,
+    FormPro,
+    type FormItemOptions,
+    type TableProInst,
+    Icon,
+  } from "@/components";
+  import { NPerformantEllipsis, NPopconfirm, NTag } from "naive-ui";
+  const tableRef = useTemplateRef<TableProInst>("tableRef");
+  const reqApi: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              brand: "",
+              id: "1834044644795646208",
+              max: 99.0,
+              name: "金煌芒果",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644799840512",
+              max: 99.0,
+              name: "大红薯",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644795646464",
+              max: 99.0,
+              name: "200g中益健康魔芋丝",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644795645953",
+              max: 99.0,
+              name: "blt北美洲车厘子500g/盒",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644795646209",
+              max: 99.0,
+              name: "紫叶生菜",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644799840513",
+              max: 99.0,
+              name: "香干",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644795646465",
+              max: 99.0,
+              name: "江西甜柑",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+            {
+              brand: "",
+              id: "1834044644795645954",
+              max: 99.0,
+              name: "糯玉米（精）",
+              purTypeStr: "蔬菜豆制品",
+              remain: 99.0,
+              remainPct: 100.0,
+              requirement: false,
+              ruleValue: 10.0,
+              trigger: false,
+              unit: "斤",
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  type TableType = TableProProps<any, any>;
+  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
+    name: {
+      type: "input",
+      label: "商品名称",
+    },
+  });
 
+  const columns = ref<TableType["columns"]>([
+    {
+      key: "name",
+      title: "商品名称",
+      width: 70,
+      render: ({ name }) => {
+        return (
+          <NPerformantEllipsis style={{ maxWidth: "70px" }}>
+            {name}
+          </NPerformantEllipsis>
+        );
+      },
+    },
+    {
+      key: "unit",
+      title: "单位",
+      width: 50,
+    },
+    {
+      key: "brand",
+      title: "品牌",
+      width: 70,
+      render: ({ brand }) => {
+        return <div>{brand ? brand : "无"}</div>;
+      },
+    },
+    {
+      key: "purTypeStr",
+      title: "商品类型",
+      width: 70,
+    },
+    {
+      key: "remain",
+      title: "库存",
+      width: 70,
+    },
+    {
+      key: "max",
+      title: "最大数量",
+      width: 100,
+    },
+    {
+      key: "ruleValue",
+      title: "警戒值",
+      width: 100,
+    },
+    {
+      key: "requirement",
+      title: "急需补货",
+      width: 100,
+      render: ({ requirement }) => {
+        return (
+          <NTag
+            bordered={false}
+            type={!requirement ? "success" : "error"}
+          >
+            {requirement ? "是" : "否"}
+          </NTag>
+        );
+      },
+    },
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="warning"
+              onClick={() => {}}
+            >
+              修改
+            </n-button>
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    删除
+                  </n-button>
+                ),
+                default: () => "确认要删除么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
+  ]);
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-
-</style>