From a95c43ed64e3573658645c3890ca17ea53b7d709 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Tue, 6 May 2025 14:59:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=87=E8=B4=AD=E5=90=8D=E5=BD=95=E7=BC=96?=
 =?UTF-8?q?=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue                           |   2 +-
 .../departmentStructure/index.ts              |  81 ++--
 .../departmentStructure/index.vue             | 442 +++++++++++++++++-
 3 files changed, 494 insertions(+), 31 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index 311e3e1..f6e6f35 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -12,7 +12,7 @@
       <div class="home2Item">
         <blockquote class="homeItem2Index">
           <div class="header-wrapper">
-            <span>公司</span>
+            <span>供应商</span>
             <div class="fold-button" @click="toggleFold">
               <span>{{ isFold ? '展开' : '收起' }}</span>
               <Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
diff --git a/src/views/personnelManagement/departmentStructure/index.ts b/src/views/personnelManagement/departmentStructure/index.ts
index 65e29c4..5a4af14 100644
--- a/src/views/personnelManagement/departmentStructure/index.ts
+++ b/src/views/personnelManagement/departmentStructure/index.ts
@@ -1,33 +1,58 @@
-export interface ModelValue {
-  /**
-   * @snowFlakeId 部门id
-   */
-  snowFlakeId?: string | number
-  /**
-   * @name 部门名称
-   */
-  name: string
-  /**
-   * @name 父级部门id
-   */
-  parentId?: string | number
-  /**
-   * @name 部门负责人id
-   */
-  leaderUserId?: string | number
-  /**
-   * @name 备注
-   */
-  remark?: string
-}
-export const modelDefaultValue: ModelValue = {
-  snowFlakeId: '',
-  name: '',
-  leaderUserId: '',
-  remark: '',
-}
 
+export interface modelDefaultValue {
+  snowFlakeId?: string,
+  commodity: string,
+  specifications: string,
+  brand: string,
+  units:string,
+  commodityType:string,
+  inventory:string,
+  maxNumber:string,
+  warningValue:string,
+  replenishment?:string
+}
 export interface Role {
   label: string
   value: string
 }
+
+
+export interface userInterface {
+  /**
+   * @snowFlakeId
+   */
+  snowFlakeId?: string
+  /**
+   * @name 用户名_必传
+   */
+  name: string
+  /**
+   * @sex 性别_必传
+   */
+  sex: string
+  /**
+   * @phoneNumber 手机号_必传
+   */
+  phoneNumber: string
+  /**
+   * @phoneNumber 账号状态_必传
+   */
+
+  status: string
+
+  /**
+   * @authClient 授权的客户端_必传
+   */
+
+  authClient: any[]
+  /**
+   * @deptIds 所属部门id_必传
+   */
+
+  deptIds?: any[]
+  /**
+   * @roleIds 所属角色id_必传
+   */
+
+  roleIds?: any[]
+}
\ No newline at end of file
diff --git a/src/views/personnelManagement/departmentStructure/index.vue b/src/views/personnelManagement/departmentStructure/index.vue
index d812661..7512eb0 100644
--- a/src/views/personnelManagement/departmentStructure/index.vue
+++ b/src/views/personnelManagement/departmentStructure/index.vue
@@ -1,9 +1,447 @@
 <template>
-  <div>采购名录</div>
+  <div class="departmentStructure">
+    <TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns"
+              :isPageTable="true">
+      <template #headerExtra>
+        <n-button strong secondary type="primary" @click="addDepartmentStructure"> 添加库存</n-button>
+      </template>
+    </TablePro>
+  </div>
 </template>
-<script setup lang="ts">
+<script setup lang="tsx">
+  import { NButton, useModal, type FormInst } from "naive-ui";
+  import { reactive, ref } from "vue";
+  import type { modelDefaultValue } from "@/views/personnelManagement/departmentStructure/index.ts";
+  import { TablePro, type TableProProps, FormPro, type FormItemOptions, type TableProInst } from "@/components";
 
+  type TableType = TableProProps<any, any>
+  import api from "@/axios";
+
+  const modal = useModal();
+
+  const form = ref<FormInst | null>(null);
+  const reqApi: TableType["requestApi"] = (params) => {
+    return new Promise((resolve: any) => {
+      resolve({
+        code: 200,
+        data: {
+          pages: "2",
+          current: "1",
+          records: [
+            {
+              commodity: "金煌芒果",
+              specifications: "无",
+              brand: "无",
+              units: "斤",
+              commodityType: "蔬菜豆制品",
+              inventory: 99,
+              maxNumber: 99,
+              warningValue: 10,
+              replenishment: "否"
+            },
+            {
+              commodity: "大红薯",
+              specifications: "无",
+              brand: "无",
+              units: "斤",
+              commodityType: "蔬菜豆制品",
+              inventory: 99,
+              maxNumber: 99,
+              warningValue: 10,
+              replenishment: "是"
+            },
+            {
+              commodity: "紫叶生菜",
+              specifications: "无",
+              brand: "无",
+              units: "斤",
+              commodityType: "蔬菜豆制品",
+              inventory: 99,
+              maxNumber: 99,
+              warningValue: 10,
+              replenishment: "否"
+            }, {
+              commodity: "芥菜",
+              specifications: "无",
+              brand: "无",
+              units: "斤",
+              commodityType: "蔬菜豆制品",
+              inventory: 99,
+              maxNumber: 99,
+              warningValue: 10,
+              replenishment: "是"
+            }
+          ],
+          size: "5",
+          total: "10",
+        },
+        success: "成功"
+      });
+    });
+  };
+  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
+    name: {
+      type: "input",
+      label: "名称"
+    },
+    type: {
+      type: "select",
+      label: "所有类型",
+      options: [
+        {
+          value: "蔬菜豆制品",
+          label: "蔬菜豆制品"
+        },
+        {
+          value: "肉类",
+          label: "肉类"
+        },
+        {
+          value: "禽类",
+          label: "禽类"
+        },
+        {
+          value: "烧腊类",
+          label: "烧腊类"
+        },
+        {
+          value: "水产冻货",
+          label: "水产冻货"
+        },
+        {
+          value: "豆品蛋类",
+          label: "豆品蛋类"
+        },
+        {
+          value: "米油杂粮",
+          label: "米油杂粮"
+        },
+        {
+          value: "调料干货",
+          label: "调料干货"
+        },
+        {
+          value: "厨房用品",
+          label: "厨房用品"
+        },
+        {
+          value: "饮品",
+          label: "饮品"
+        }
+      ]
+    },
+    goods: {
+      type: "select",
+      label: "是否急需补货",
+      options: [{
+        value: "否",
+        label: "否"
+      }, {
+        value: "是",
+        label: "是"
+      }],
+    }
+  });
+
+  const columns = ref<TableType["columns"]>([
+    {
+      key: "commodity",
+      title: "商品名称",
+      width: 150
+    },
+    {
+      key: "specifications",
+      title: "规格",
+      width: 150
+    },
+    {
+      key: "brand",
+      title: "品牌",
+      width: 150
+    },
+    {
+      key: "units",
+      title: "单位",
+      width: 150
+    },
+    {
+      key: "commodityType",
+      title: "商品类型",
+      width: 150
+    },
+    {
+      key: "inventory",
+      title: "库存",
+      width: 150
+    },
+    {
+      key: "maxNumber",
+      title: "最大数量",
+      width: 150
+    },
+    {
+      key: "warningValue",
+      title: "警戒值",
+      width: 150
+    },
+    {
+      key: "replenishment",
+      title: "急需补货",
+      width: 150
+    },
+    {
+      key: "",
+      title: "操作",
+      render: (value: modelDefaultValue) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type='warning'
+              onClick={()=>{
+                console.log(value,'000');
+                title.value = `修改库存`
+                userValue.value.commodity = value.commodity
+                userValue.value.brand = value.brand
+                userValue.value.warningValue = value.warningValue
+                userValue.value.units = value.units
+                userValue.value.inventory = value.inventory
+                userValue.value.maxNumber = value.maxNumber
+                userValue.value.specifications = value.specifications
+                userValue.value.commodityType = value.commodityType
+
+                modalRef.value = modal.create({
+                  title: title.value,
+                  preset: 'card',
+                  style: {
+                    width: '600px',
+                  },
+                  content: () => (
+                    <>
+                      <FormPro labelWidth='100' ref={form} v-model:value={userValue.value} form-item-options={formOptionsUser} />
+                    </>
+                  ),
+                  footer: () => (
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                      }}
+                    >
+                      <n-button
+                        loading={loading.value}
+                        style={{ marginRight: '10px' }}
+                        type='primary'
+                        onClick={() => {
+                          resetModelValue()
+                          // addUserOrUpdate(value.snowFlakeId)
+                        }}
+                      >
+                        确认
+                      </n-button>
+                      <n-button
+                        onClick={() => {
+                          modalRef.value.destroy()
+                          resetModelValue()
+                        }}
+                      >
+                        取消
+                      </n-button>
+                    </div>
+                  ),
+                  onAfterLeave: () => {
+                    resetModelValue()
+                  },
+                })
+              }}
+            >编辑</n-button>
+            <n-button type="error"  style={{ margin: "0 10px" }}>
+              删除
+            </n-button>
+          </div>
+        );
+      }
+    }
+
+  ]);
+
+
+  const userDefaultValue: modelDefaultValue = {
+    // snowFlakeId: "",
+    commodity: "",
+    specifications: "",
+    brand: "",
+    units: "",
+    commodityType: "",
+    inventory: "",
+    maxNumber: "",
+    warningValue: ""
+    // replenishment:''
+  };
+
+  const userValue = ref<modelDefaultValue>({
+    ...userDefaultValue
+  });
+
+  const resetModelValue = () => {
+    userValue.value = { ...userDefaultValue };
+  };
+
+  const addUserOrUpdate = ()=>{
+    form.value?.validate().then(()=>{
+      // loading.value = true
+
+    })
+  }
+  const formOptionsUser = reactive<FormItemOptions<any>>({
+    //     form表单
+    commodity:{
+      type: 'input',
+      label: '商品名称',
+      required: true,
+    },
+    specifications:{
+      type: 'input',
+      label: '规格要求',
+    },
+    brand:{
+       type:'input',
+       label: '品牌',
+    },
+    units:{
+      type:'select',
+      label: '单位',
+      required: true,
+      options:[
+        {
+          value:0,
+          label:'个'
+        },
+        {
+          value:1,
+          label:'斤'
+        },
+        {
+          value:2,
+          label:'袋'
+        },
+      ]
+    },
+    inventory:{
+       type:'inputNumber',
+       label: '库存数量',
+       required: true,
+    },
+    maxNumber:{
+      type:'inputNumber',
+      label:'最大数量',
+      required: true,
+    },
+    warningValue:{
+      type:'inputNumber',
+      label:'警戒值',
+      required: true,
+    },
+    commodityType:{
+        type:'radioGroup',
+        label:' 采购类型',
+        required: true,
+        options: [
+          {
+            value: 0,
+            label: "蔬菜豆制品"
+          },
+          {
+            value: 1,
+            label: "肉类"
+          },
+          {
+            value: 2,
+            label: "禽类"
+          },
+          {
+            value: 3,
+            label: "烧腊类"
+          },
+          {
+            value: 4,
+            label: "水产冻货"
+          },
+          {
+            value: 5,
+            label: "豆品蛋类"
+          },
+          {
+            value: 6,
+            label: "米油杂粮"
+          },
+          {
+            value: 7,
+            label: "调料干货"
+          },
+          {
+            value: 8,
+            label: "厨房用品"
+          },
+          {
+            value: 9,
+            label: "饮品"
+          }
+      ]
+    }
+  });
+  const loading = ref<boolean>(false);
+  const modalRef = ref();
+  const title = ref("新增");
+  const addDepartmentStructure = () => {
+    modalRef.value = modal.create({
+      title: title.value,
+      preset: "card",
+      style: {
+        width: "600px"
+      },
+      content: () => (
+        <>
+          <FormPro labelWidth="100" ref={form} v-model:value={userValue.value} form-item-options={formOptionsUser}></FormPro>
+        </>
+      ),
+      footer: () => (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <n-button
+            loading={loading.value}
+            style={{ marginRight: '10px' }}
+            type='primary'
+            onClick={() => {
+              addUserOrUpdate()
+            }}
+          >
+            确认
+          </n-button>
+          <n-button
+            onClick={() => {
+              modalRef.value.destroy()
+              resetModelValue()
+            }}
+          >
+            取消
+          </n-button>
+        </div>
+      ),
+      onAfterLeave: () => {
+        resetModelValue()
+      },
+    });
+  };
 </script>
 <style scoped lang="scss">
+  .departmentStructure {
 
+  }
 </style>
\ No newline at end of file