出入库管理
This commit is contained in:
		
							parent
							
								
									c1505cab8f
								
							
						
					
					
						commit
						cf02ebfee8
					
				| 
						 | 
				
			
			@ -0,0 +1,59 @@
 | 
			
		|||
export  interface enterpriseStaff{
 | 
			
		||||
  goods_name?: string,
 | 
			
		||||
  suppliers?:string,
 | 
			
		||||
  articleSorting?:string,
 | 
			
		||||
  specificationModel?:string,
 | 
			
		||||
  suppliersPhone?:string,
 | 
			
		||||
  purchaseOrderNumber?:string,
 | 
			
		||||
  currentInventory?:string,
 | 
			
		||||
  shelfLife?:string,
 | 
			
		||||
  unitPrice?:string | number,
 | 
			
		||||
  totalAmount?:string,
 | 
			
		||||
  remarks?:string,
 | 
			
		||||
  company?: string,
 | 
			
		||||
  num?: number,
 | 
			
		||||
  time?: string,
 | 
			
		||||
  handlers?: string,
 | 
			
		||||
  image?:string,
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const enterpriseStaffList:enterpriseStaff[] = [
 | 
			
		||||
  {
 | 
			
		||||
    image:'',
 | 
			
		||||
    goods_name: "菠菜",
 | 
			
		||||
    suppliers:'长沙xx农贸市场',
 | 
			
		||||
    articleSorting:'蔬菜',
 | 
			
		||||
    specificationModel:'500g/斤',
 | 
			
		||||
    suppliersPhone:'13575126451',
 | 
			
		||||
    purchaseOrderNumber:'145425416241',
 | 
			
		||||
    currentInventory:'10',
 | 
			
		||||
    shelfLife:'三天',
 | 
			
		||||
    unitPrice:3,
 | 
			
		||||
    totalAmount:'234',
 | 
			
		||||
    company: "斤",
 | 
			
		||||
    num: 78,
 | 
			
		||||
    time: "2025-3-16",
 | 
			
		||||
    handlers: "李xx",
 | 
			
		||||
    remarks:'菠菜三块一斤,一共还有10斤'
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    image:'',
 | 
			
		||||
    goods_name: "牛肉",
 | 
			
		||||
    suppliers:'长沙xx农贸市场',
 | 
			
		||||
    articleSorting:'肉类',
 | 
			
		||||
    specificationModel:'500g/斤',
 | 
			
		||||
    suppliersPhone:'13575126451',
 | 
			
		||||
    purchaseOrderNumber:'145425416241',
 | 
			
		||||
    currentInventory:'50',
 | 
			
		||||
    shelfLife:'三天',
 | 
			
		||||
    unitPrice:35,
 | 
			
		||||
    totalAmount:'1750',
 | 
			
		||||
    company: "斤",
 | 
			
		||||
    num: 50,
 | 
			
		||||
    time: "2025-3-16",
 | 
			
		||||
    handlers: "李xx",
 | 
			
		||||
    remarks:'牛肉35块一斤,一共还有50斤'
 | 
			
		||||
  }
 | 
			
		||||
]
 | 
			
		||||
 | 
			
		||||
export default enterpriseStaffList
 | 
			
		||||
| 
						 | 
				
			
			@ -1,4 +1,407 @@
 | 
			
		|||
<template>
 | 
			
		||||
  <div>入库管理</div>
 | 
			
		||||
  <div>
 | 
			
		||||
    <TablePro
 | 
			
		||||
      ref="tableRef"
 | 
			
		||||
      :request-api="reqApi"
 | 
			
		||||
      :search-form-options="searchFormOptions"
 | 
			
		||||
      :columns="columns"
 | 
			
		||||
      :isPageTable="true"
 | 
			
		||||
      :single-line="false"
 | 
			
		||||
    >
 | 
			
		||||
      <template #headerExtra>
 | 
			
		||||
        <n-button strong secondary type="primary" @click="addWarehousing">入库</n-button>
 | 
			
		||||
      </template>
 | 
			
		||||
    </TablePro>
 | 
			
		||||
    >
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script setup></script>
 | 
			
		||||
<script setup lang="tsx">
 | 
			
		||||
  import {
 | 
			
		||||
    TablePro,
 | 
			
		||||
    type TableProProps,
 | 
			
		||||
    FormPro,
 | 
			
		||||
    type FormItemOptions,
 | 
			
		||||
    type TableProInst,
 | 
			
		||||
    Icon
 | 
			
		||||
  } from "@/components";
 | 
			
		||||
  import { type FormInst, NButton, NPerformantEllipsis, NPopconfirm, NTag, useModal } from "naive-ui";
 | 
			
		||||
  import enterpriseStaffList, { type enterpriseStaff } from "@/views/INandOUTManagement/InManagement/index.ts";
 | 
			
		||||
  import { reactive, ref } from "vue";
 | 
			
		||||
 | 
			
		||||
  const tableRef = useTemplateRef<TableProInst>("tableRef");
 | 
			
		||||
  const modal = useModal();
 | 
			
		||||
  const form = ref<FormInst | null>(null);
 | 
			
		||||
  const reqApi: TableType["requestApi"] = (params) => {
 | 
			
		||||
    return new Promise((resolve) => {
 | 
			
		||||
      resolve({
 | 
			
		||||
        code: 200,
 | 
			
		||||
        data: {
 | 
			
		||||
          current: "1",
 | 
			
		||||
          // @ts-ignore
 | 
			
		||||
          pages: "2",
 | 
			
		||||
          records: enterpriseStaffList,
 | 
			
		||||
          size: "10",
 | 
			
		||||
          total: "12"
 | 
			
		||||
        },
 | 
			
		||||
        message: "操作成功!"
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
  };
 | 
			
		||||
  type TableType = TableProProps<any, any>;
 | 
			
		||||
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
 | 
			
		||||
    name: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "物品名称"
 | 
			
		||||
    },
 | 
			
		||||
    articleSorting: {
 | 
			
		||||
      type: "select",
 | 
			
		||||
      label: "物品分类",
 | 
			
		||||
      options: [
 | 
			
		||||
        {
 | 
			
		||||
          value: "蔬菜",
 | 
			
		||||
          label: "蔬菜"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "肉类",
 | 
			
		||||
          label: "肉类"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "粮油",
 | 
			
		||||
          label: "粮油"
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
  const loading = ref<boolean>(false);
 | 
			
		||||
  const columns = ref<TableType["columns"]>([
 | 
			
		||||
    {
 | 
			
		||||
      key: "goods_name",
 | 
			
		||||
      title: "物品名称",
 | 
			
		||||
      render: ({ goods_name }) => {
 | 
			
		||||
        return (
 | 
			
		||||
          <NPerformantEllipsis style={{ maxWidth: "70px" }}>
 | 
			
		||||
            {goods_name}
 | 
			
		||||
          </NPerformantEllipsis>
 | 
			
		||||
        );
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "articleSorting",
 | 
			
		||||
      title: "物品分类"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "specificationModel",
 | 
			
		||||
      title: "规格型号"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "suppliers",
 | 
			
		||||
      title: "供应商"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "suppliersPhone",
 | 
			
		||||
      title: "供应商电话"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "purchaseOrderNumber",
 | 
			
		||||
      title: "采购订单号"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "company",
 | 
			
		||||
      title: "单位"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "num",
 | 
			
		||||
      title: "数量"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "currentInventory",
 | 
			
		||||
      title: "当前库存量"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "time",
 | 
			
		||||
      title: "采购日期"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "shelfLife",
 | 
			
		||||
      title: "保质期"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "unitPrice",
 | 
			
		||||
      title: "单价"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "totalAmount",
 | 
			
		||||
      title: "总金额"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "handlers",
 | 
			
		||||
      title: "操作者"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "remarks",
 | 
			
		||||
      title: "备注"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "",
 | 
			
		||||
      title: "操作",
 | 
			
		||||
      render: (value: enterpriseStaff) => {
 | 
			
		||||
        return (
 | 
			
		||||
          <div style={{ display: "flex" }}>
 | 
			
		||||
            <n-button style={{ marginLeft: "10px" }} strong secondary type="info">采购</n-button>
 | 
			
		||||
            <n-button style={{ marginLeft: "10px" }} strong secondary type="warning" onClick={() => {
 | 
			
		||||
              title.value = `修改入库原料`;
 | 
			
		||||
              userValue.value.goods_name = value.goods_name;
 | 
			
		||||
              userValue.value.articleSorting = value.articleSorting;
 | 
			
		||||
              userValue.value.specificationModel = value.specificationModel;
 | 
			
		||||
              userValue.value.suppliers = value.suppliers;
 | 
			
		||||
              userValue.value.suppliersPhone = value.suppliersPhone;
 | 
			
		||||
              userValue.value.purchaseOrderNumber = value.purchaseOrderNumber;
 | 
			
		||||
              userValue.value.company = value.company;
 | 
			
		||||
              userValue.value.num = value.num;
 | 
			
		||||
              userValue.value.currentInventory = value.currentInventory;
 | 
			
		||||
              userValue.value.time = value.time;
 | 
			
		||||
              userValue.value.shelfLife = value.shelfLife;
 | 
			
		||||
              userValue.value.remarks = value.remarks;
 | 
			
		||||
              userValue.value.unitPrice = value.unitPrice
 | 
			
		||||
              userValue.value.handlers = value.handlers
 | 
			
		||||
              modalRef.value = modal.create({
 | 
			
		||||
                title: title.value,
 | 
			
		||||
                preset: "card",
 | 
			
		||||
                style: {
 | 
			
		||||
                  width: "1000px"
 | 
			
		||||
                },
 | 
			
		||||
                content: () => (
 | 
			
		||||
                  <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
 | 
			
		||||
                    <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
 | 
			
		||||
                             form-item-options={formOptionsUser}
 | 
			
		||||
                             gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
 | 
			
		||||
                    </FormPro>
 | 
			
		||||
                  </div>
 | 
			
		||||
                ),
 | 
			
		||||
                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();
 | 
			
		||||
                }
 | 
			
		||||
              });
 | 
			
		||||
            }}>编辑
 | 
			
		||||
            </n-button>
 | 
			
		||||
            <NPopconfirm
 | 
			
		||||
              onPositiveClick={async () => {
 | 
			
		||||
              }}
 | 
			
		||||
              onNegativeClick={() => {
 | 
			
		||||
              }}
 | 
			
		||||
              showIcon={false}
 | 
			
		||||
            >
 | 
			
		||||
              {{
 | 
			
		||||
                trigger: () => (
 | 
			
		||||
                  <n-button
 | 
			
		||||
                    loading={loading.value}
 | 
			
		||||
                    strong
 | 
			
		||||
                    secondary
 | 
			
		||||
                    style={{ marginLeft: "10px" }}
 | 
			
		||||
                    type="error"
 | 
			
		||||
                  >
 | 
			
		||||
                    删除
 | 
			
		||||
                  </n-button>
 | 
			
		||||
                ),
 | 
			
		||||
                default: () => "确认要删除么?"
 | 
			
		||||
              }}
 | 
			
		||||
            </NPopconfirm>
 | 
			
		||||
 | 
			
		||||
          </div>
 | 
			
		||||
        );
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  ]);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  const userInManagement = {
 | 
			
		||||
    image: "",
 | 
			
		||||
    goods_name: "",
 | 
			
		||||
    suppliers: "",
 | 
			
		||||
    articleSorting: "",
 | 
			
		||||
    specificationModel: "",
 | 
			
		||||
    suppliersPhone: "",
 | 
			
		||||
    purchaseOrderNumber: "",
 | 
			
		||||
    currentInventory: "",
 | 
			
		||||
    shelfLife: "",
 | 
			
		||||
    unitPrice: undefined,
 | 
			
		||||
    totalAmount: "",
 | 
			
		||||
    company: "",
 | 
			
		||||
    num: undefined,
 | 
			
		||||
    time: undefined,
 | 
			
		||||
    handlers: "",
 | 
			
		||||
    remarks: ""
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const userValue = ref<enterpriseStaff>({
 | 
			
		||||
    ...userInManagement
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  const resetModelValue = () => {
 | 
			
		||||
    userValue.value = { ...userInManagement };
 | 
			
		||||
    title.value = "添加入库物品";
 | 
			
		||||
  };
 | 
			
		||||
  const modalRef = ref();
 | 
			
		||||
  const title = ref("入库");
 | 
			
		||||
 | 
			
		||||
  const formOptionsUser = reactive<FormItemOptions<enterpriseStaff>>({
 | 
			
		||||
    goods_name: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "物品名称",
 | 
			
		||||
      required: true
 | 
			
		||||
    },
 | 
			
		||||
    articleSorting: {
 | 
			
		||||
      type: "select",
 | 
			
		||||
      label: "物品分类",
 | 
			
		||||
      options: [
 | 
			
		||||
        {
 | 
			
		||||
          value: "蔬菜",
 | 
			
		||||
          label: "蔬菜"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "肉类",
 | 
			
		||||
          label: "肉类"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "粮油",
 | 
			
		||||
          label: "粮油"
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    },
 | 
			
		||||
    suppliers: {
 | 
			
		||||
      type: "select",
 | 
			
		||||
      label: "供应商",
 | 
			
		||||
      options: [
 | 
			
		||||
        {
 | 
			
		||||
          value: "农贸市场",
 | 
			
		||||
          label: "农贸市场"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "水果市场",
 | 
			
		||||
          label: "水果市场"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "粮油市场",
 | 
			
		||||
          label: "粮油市场"
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    },
 | 
			
		||||
    specificationModel: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "规格型号(500g/袋或者10kg/箱)"
 | 
			
		||||
    },
 | 
			
		||||
    suppliersPhone: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "供应商电话"
 | 
			
		||||
    },
 | 
			
		||||
    currentInventory: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "当前库存量"
 | 
			
		||||
    },
 | 
			
		||||
    shelfLife: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "保质期"
 | 
			
		||||
    },
 | 
			
		||||
    unitPrice: {
 | 
			
		||||
      type: "inputNumber",
 | 
			
		||||
      label: "单价"
 | 
			
		||||
    },
 | 
			
		||||
    remarks: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "备注"
 | 
			
		||||
    },
 | 
			
		||||
    company: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "单位"
 | 
			
		||||
    },
 | 
			
		||||
    num: {
 | 
			
		||||
      type: "inputNumber",
 | 
			
		||||
      label: "数量"
 | 
			
		||||
    },
 | 
			
		||||
    time: {
 | 
			
		||||
      type: "datePicker",
 | 
			
		||||
      label: "采购时间"
 | 
			
		||||
    },
 | 
			
		||||
    handlers: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "操作者"
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
  const addWarehousing = () => {
 | 
			
		||||
    console.log(modalRef.value,'00');
 | 
			
		||||
    modalRef.value = modal.create({
 | 
			
		||||
      title: title.value,
 | 
			
		||||
      preset: "card",
 | 
			
		||||
      style: {
 | 
			
		||||
        width: "1000px"
 | 
			
		||||
      },
 | 
			
		||||
      content: () => (
 | 
			
		||||
        <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
 | 
			
		||||
          <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
 | 
			
		||||
                   form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
 | 
			
		||||
          </FormPro>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
      ),
 | 
			
		||||
      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"></style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -0,0 +1,44 @@
 | 
			
		|||
export interface OutManagement{
 | 
			
		||||
  goods_name?: string,
 | 
			
		||||
  articleSorting?:string,
 | 
			
		||||
  specificationModel?:string,
 | 
			
		||||
  company?: string,
 | 
			
		||||
  num?: number,
 | 
			
		||||
  currentInventory?:string,
 | 
			
		||||
  collectingDepartment?:string
 | 
			
		||||
  use?:string
 | 
			
		||||
  SignatureOfRecipient?:string
 | 
			
		||||
  ReasonForLoss?:string
 | 
			
		||||
  time?:string
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const outManagementList:OutManagement[] = [
 | 
			
		||||
  {
 | 
			
		||||
    goods_name: "菠菜",
 | 
			
		||||
    articleSorting:'蔬菜',
 | 
			
		||||
    specificationModel:'500g/斤',
 | 
			
		||||
    currentInventory:'10',
 | 
			
		||||
    company: "斤",
 | 
			
		||||
    num: 78,
 | 
			
		||||
    time: "",
 | 
			
		||||
    collectingDepartment:'食堂部门',
 | 
			
		||||
    use:'学生午餐',
 | 
			
		||||
    ReasonForLoss:'过期',
 | 
			
		||||
    SignatureOfRecipient: "李xx",
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    goods_name: "胡萝卜",
 | 
			
		||||
    articleSorting:'蔬菜',
 | 
			
		||||
    specificationModel:'500g/斤',
 | 
			
		||||
    currentInventory:'10',
 | 
			
		||||
    company: "斤",
 | 
			
		||||
    num: 18,
 | 
			
		||||
    time: "",
 | 
			
		||||
    collectingDepartment:'食堂部门',
 | 
			
		||||
    use:'活动备餐',
 | 
			
		||||
    ReasonForLoss:'无',
 | 
			
		||||
    SignatureOfRecipient: "张xx",
 | 
			
		||||
  }
 | 
			
		||||
]
 | 
			
		||||
 | 
			
		||||
export default outManagementList
 | 
			
		||||
| 
						 | 
				
			
			@ -1,4 +1,302 @@
 | 
			
		|||
<template>
 | 
			
		||||
  <div>出库管理</div>
 | 
			
		||||
  <div>
 | 
			
		||||
    <TablePro
 | 
			
		||||
      ref="tableRef"
 | 
			
		||||
      :request-api="reqApi"
 | 
			
		||||
      :search-form-options="searchFormOptions"
 | 
			
		||||
      :columns="columns"
 | 
			
		||||
      :isPageTable="true"
 | 
			
		||||
      :single-line="false"
 | 
			
		||||
    >
 | 
			
		||||
      <template #headerExtra>
 | 
			
		||||
 | 
			
		||||
      </template>
 | 
			
		||||
    </TablePro>
 | 
			
		||||
    >
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script setup></script>
 | 
			
		||||
<script setup lang="tsx">
 | 
			
		||||
  import {
 | 
			
		||||
    TablePro,
 | 
			
		||||
    type TableProProps,
 | 
			
		||||
    FormPro,
 | 
			
		||||
    type FormItemOptions,
 | 
			
		||||
    type TableProInst,
 | 
			
		||||
    Icon
 | 
			
		||||
  } from "@/components";
 | 
			
		||||
  import { type FormInst, NButton, NPerformantEllipsis, NPopconfirm, NTag, useModal } from "naive-ui";
 | 
			
		||||
 | 
			
		||||
  import { reactive, ref } from "vue";
 | 
			
		||||
  import outManagementList,{type OutManagement} from "@/views/INandOUTManagement/OutManagement/index.ts";
 | 
			
		||||
 | 
			
		||||
  const tableRef = useTemplateRef<TableProInst>("tableRef");
 | 
			
		||||
  const modal = useModal();
 | 
			
		||||
  const form = ref<FormInst | null>(null);
 | 
			
		||||
  const reqApi: TableType["requestApi"] = (params) => {
 | 
			
		||||
    return new Promise((resolve) => {
 | 
			
		||||
      resolve({
 | 
			
		||||
        code: 200,
 | 
			
		||||
        data: {
 | 
			
		||||
          current: "1",
 | 
			
		||||
          // @ts-ignore
 | 
			
		||||
          pages: "2",
 | 
			
		||||
          records: outManagementList,
 | 
			
		||||
          size: "10",
 | 
			
		||||
          total: "12"
 | 
			
		||||
        },
 | 
			
		||||
        message: "操作成功!"
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
  };
 | 
			
		||||
  type TableType = TableProProps<any, any>;
 | 
			
		||||
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
 | 
			
		||||
    name: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "物品名称"
 | 
			
		||||
    },
 | 
			
		||||
    articleSorting: {
 | 
			
		||||
      type: "select",
 | 
			
		||||
      label: "物品分类",
 | 
			
		||||
      options: [
 | 
			
		||||
        {
 | 
			
		||||
          value: "蔬菜",
 | 
			
		||||
          label: "蔬菜"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "肉类",
 | 
			
		||||
          label: "肉类"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "粮油",
 | 
			
		||||
          label: "粮油"
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
  const loading = ref<boolean>(false);
 | 
			
		||||
 | 
			
		||||
  const modalRef = ref<any>(undefined);
 | 
			
		||||
  const title = ref("入库");
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  const userOutManagement = {
 | 
			
		||||
    goods_name: "",
 | 
			
		||||
    articleSorting:'',
 | 
			
		||||
    specificationModel:'',
 | 
			
		||||
    currentInventory:'',
 | 
			
		||||
    company: "",
 | 
			
		||||
    num: undefined,
 | 
			
		||||
    time: undefined,
 | 
			
		||||
    collectingDepartment:'',
 | 
			
		||||
    use:'',
 | 
			
		||||
    ReasonForLoss:'',
 | 
			
		||||
    SignatureOfRecipient: "",
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const userValue = ref<OutManagement>({
 | 
			
		||||
    ...userOutManagement
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  const resetModelValue = () => {
 | 
			
		||||
    userValue.value = { ...userOutManagement };
 | 
			
		||||
  };
 | 
			
		||||
  const formOptionsUser = reactive<FormItemOptions<OutManagement>>({
 | 
			
		||||
    goods_name: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "物品名称",
 | 
			
		||||
      required: true
 | 
			
		||||
    },
 | 
			
		||||
    articleSorting: {
 | 
			
		||||
      type: "select",
 | 
			
		||||
      label: "物品分类",
 | 
			
		||||
      options: [
 | 
			
		||||
        {
 | 
			
		||||
          value: "蔬菜",
 | 
			
		||||
          label: "蔬菜"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "肉类",
 | 
			
		||||
          label: "肉类"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: "粮油",
 | 
			
		||||
          label: "粮油"
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    },
 | 
			
		||||
    specificationModel: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "规格型号(500g/袋或者10kg/箱)"
 | 
			
		||||
    },
 | 
			
		||||
    company: {
 | 
			
		||||
      type: "input",
 | 
			
		||||
      label: "单位"
 | 
			
		||||
    },
 | 
			
		||||
    num: {
 | 
			
		||||
      type: "inputNumber",
 | 
			
		||||
      label: "数量"
 | 
			
		||||
    },
 | 
			
		||||
    time: {
 | 
			
		||||
      type: "datePicker",
 | 
			
		||||
      label: "出库时间"
 | 
			
		||||
    },
 | 
			
		||||
    collectingDepartment:{
 | 
			
		||||
       type:'input',
 | 
			
		||||
      label: "领用部门"
 | 
			
		||||
    },
 | 
			
		||||
    SignatureOfRecipient:{
 | 
			
		||||
      type:'input',
 | 
			
		||||
      label: "出库人员"
 | 
			
		||||
    },
 | 
			
		||||
    use:{
 | 
			
		||||
       type:'input',
 | 
			
		||||
       label:'用途'
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
  });
 | 
			
		||||
  const columns = ref<TableType["columns"]>([
 | 
			
		||||
    {
 | 
			
		||||
      key: "goods_name",
 | 
			
		||||
      title: "物品名称",
 | 
			
		||||
      render: ({ goods_name }) => {
 | 
			
		||||
        return (
 | 
			
		||||
          <NPerformantEllipsis style={{ maxWidth: "70px" }}>
 | 
			
		||||
            {goods_name}
 | 
			
		||||
          </NPerformantEllipsis>
 | 
			
		||||
        );
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "articleSorting",
 | 
			
		||||
      title: "物品分类"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "specificationModel",
 | 
			
		||||
      title: "规格型号"
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    {
 | 
			
		||||
      key: "company",
 | 
			
		||||
      title: "单位"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "num",
 | 
			
		||||
      title: "数量"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "collectingDepartment",
 | 
			
		||||
      title: "领用部门"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key:'ReasonForLoss',
 | 
			
		||||
      title:'损耗原因'
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key:'SignatureOfRecipient',
 | 
			
		||||
      title:'出库人员'
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "currentInventory",
 | 
			
		||||
      title: "当前库存量"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "time",
 | 
			
		||||
      title: "出库日期"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "use",
 | 
			
		||||
      title: "用途"
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      key: "",
 | 
			
		||||
      title: "操作",
 | 
			
		||||
      render: (value: OutManagement) => {
 | 
			
		||||
        return (
 | 
			
		||||
          <div style={{ display: "flex" }}>
 | 
			
		||||
            <n-button style={{ marginLeft: "10px" }} strong secondary type="warning" onClick={() => {
 | 
			
		||||
              title.value = `出库`;
 | 
			
		||||
              addWarehousing(value)
 | 
			
		||||
            }}>出库
 | 
			
		||||
            </n-button>
 | 
			
		||||
            <NPopconfirm
 | 
			
		||||
              onPositiveClick={async () => {
 | 
			
		||||
              }}
 | 
			
		||||
              onNegativeClick={() => {
 | 
			
		||||
              }}
 | 
			
		||||
              showIcon={false}
 | 
			
		||||
            >
 | 
			
		||||
              {{
 | 
			
		||||
                trigger: () => (
 | 
			
		||||
                  <n-button
 | 
			
		||||
                    loading={loading.value}
 | 
			
		||||
                    strong
 | 
			
		||||
                    secondary
 | 
			
		||||
                    style={{ marginLeft: "10px" }}
 | 
			
		||||
                    type="error"
 | 
			
		||||
                  >
 | 
			
		||||
                    删除
 | 
			
		||||
                  </n-button>
 | 
			
		||||
                ),
 | 
			
		||||
                default: () => "确认要删除么?"
 | 
			
		||||
              }}
 | 
			
		||||
            </NPopconfirm>
 | 
			
		||||
 | 
			
		||||
          </div>
 | 
			
		||||
        );
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  ]);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  const addWarehousing = (value:OutManagement) => {
 | 
			
		||||
    modalRef.value  = modal.create({
 | 
			
		||||
      title: title.value,
 | 
			
		||||
      preset: "card",
 | 
			
		||||
      style: {
 | 
			
		||||
        width: "1000px"
 | 
			
		||||
      },
 | 
			
		||||
      content: () => (
 | 
			
		||||
        <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
 | 
			
		||||
          <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
 | 
			
		||||
                   form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
 | 
			
		||||
          </FormPro>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
      ),
 | 
			
		||||
      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"></style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -24,8 +24,8 @@ const purchaseOrderData:purchaseOrderType[] = [
 | 
			
		|||
    deliveryAddress:'XX大学南门仓库',
 | 
			
		||||
    latestDeliveryTime:'2025-5-22 00:00:00',
 | 
			
		||||
    itemName:'金龙鱼',
 | 
			
		||||
    specifications:'5L/桶',
 | 
			
		||||
    itemNumber:'20',
 | 
			
		||||
    specifications:'20',
 | 
			
		||||
    itemNumber:'20/5L/桶',
 | 
			
		||||
    unitPrice:'¥50',
 | 
			
		||||
    TotalPrice:"¥1000",
 | 
			
		||||
    Remarks:'非转基因'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue