feat: 🚀 订阅功能

src/views/shipment/outbound/shipmentOrder/details.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <PermissionButton
+                :buttons="dataStore.buttons"
+                @handleButtonClickCallback="handleButtonClickCallback"
+            ></PermissionButton>
+        </div>
+        <div class="card table-main">
+            <div style="padding-bottom: 10px; border-bottom: 1px solid #eeeeee">
+                <h3 style="margin: 10px">基础信息</h3>
+                <DetailsSearch :formData="dataStore.formData" :ruleForm="dataStore.ruleForm" :labelWidth="dataStore.labelWidth" />
+            </div>
+
+            <div style="padding-top: 16px; padding-bottom: 16px">
+                <h3 style="margin: 10px">物料信息</h3>
+                <el-table :data="tableData" border height="300" style="width: 100%; margin-top: 20px">
+                    <el-table-column prop="id" label="ID" width="180" />
+                    <el-table-column prop="name" label="Name" />
+                    <el-table-column prop="amount1" label="Cost 1 ($)" />
+                    <el-table-column prop="amount2" label="Cost 2 ($)" />
+                    <el-table-column prop="amount3" label="Cost 3 ($)" />
+                </el-table>
+            </div>
+
+            <div style="padding-top: 16px; border-bottom: 1px solid #eeeeee">
+                <h3 style="margin: 10px">操作信息</h3>
+                <DetailsSearch
+                    :formData="dataStore.formData1"
+                    :ruleForm="dataStore.ruleForm1"
+                    :labelWidth="dataStore.labelWidth"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="shipmentOutboundShipmentOrderDetails">
+import { cloneDeep } from "lodash-es";
+import DetailsSearch from "@/components/DetailsSearch/index.vue";
+import PermissionButton from "@/components/PermissionButton/index.vue";
+import { BUTTON } from "./constant/details/button";
+import { FORM_DATA, RULE_FORM, RULE_FORM1, FORM_DATA1 } from "./constant/details/search";
+const dataStore = reactive<any>({
+    labelWidth: "165px",
+    buttons: cloneDeep(BUTTON),
+    ruleForm: cloneDeep(RULE_FORM), // 表单值
+    formData: cloneDeep(FORM_DATA), //表单配置项
+    ruleForm1: cloneDeep(RULE_FORM1), // 表单值
+    formData1: cloneDeep(FORM_DATA1) //表单配置项
+});
+
+const tableData: any[] = [
+    {
+        id: "12987122",
+        name: "Tom",
+        amount1: "234",
+        amount2: "3.2",
+        amount3: 10
+    },
+    {
+        id: "12987123",
+        name: "Tom",
+        amount1: "165",
+        amount2: "4.43",
+        amount3: 12
+    },
+    {
+        id: "12987124",
+        name: "Tom",
+        amount1: "324",
+        amount2: "1.9",
+        amount3: 9
+    },
+    {
+        id: "12987125",
+        name: "Tom",
+        amount1: "621",
+        amount2: "2.2",
+        amount3: 17
+    },
+    {
+        id: "12987126",
+        name: "Tom",
+        amount1: "539",
+        amount2: "4.1",
+        amount3: 15
+    }
+];
+const handleButtonClickCallback = () => {};
+</script>
+
+<style scoped></style>