feat: 完成了物料总表，生产发料，入料，以及部分采购计划。

src/views/sale/device-sn/DeviceSnView.vue

@@ -1,96 +1,42 @@
 <script lang="ts" setup>
-import BasePageableTable from "@/components/base/base-pageable-table/BasePageableTable.vue";
-import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
-import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
-import { usePage } from "@/composables/use-page";
-import BaseForm from "@/components/base/base-form/BaseForm.vue";
+import TreeSidePageableTable from "@/components/base/treeside-pageable-table/TreeSidePageableTable.vue";
 import { $t } from "@/common/languages";
-import type { FormInstance, FormRules } from "element-plus";
 
 /**
  * 必须要的变量
  */
 
-const getPageUrl = "/sale/devicesn/getdevicesnPage";
-const addUrl = "/sale/devicesn/adddevicesn";
-const editUrl = "/sale/devicesn/updatedevicesn";
-const removeUrl = "/sale/devicesn/deletedevicesn";
-const searchers = [{ name: "searchCode", type: "text" as const, placeholder: $t("_prop.sale.devicesn.searchCode") }];
-const rules = reactive<FormRules>({});
-/**
- * 基本不变通用变量
- */
-const tableRef = ref<InstanceType<typeof BasePageableTable> | null>(null);
-const { useAdd, useEdit, useRemove, useGeneralPageRef } = usePage(tableRef);
-const { title, visible, formType, form } = useGeneralPageRef();
-/**
- * 可以自定义的变量
- */
-
-const add = () => {
-  form.value = {};
-  title.value = "_title.sale.devicesn.add";
-  visible.value = true;
-  formType.value = false;
-};
-const edit = (row: any) => {
-  title.value = "_title.sale.devicesn.edit";
-  form.value = { ...row };
-  visible.value = true;
-  formType.value = true;
-};
-const remove = (row: any) => {
-  useRemove(removeUrl, row.id, "_message.sale.devicesn.delete_message");
-};
-const submit = (form: any, formRef: FormInstance | undefined) => {
-  if (formRef !== undefined) {
-    formRef.validate(valid => {
-      if (valid) {
-        if (formType.value) useEdit(editUrl, form, visible);
-        else useAdd(addUrl, form, visible);
-      }
-    });
-  }
-};
-const topButtonClick = (eventName: string) => {
-  switch (eventName) {
-    case "add":
-      add();
-      break;
-  }
-};
-const operateButtonClick = (eventName: string, row: any) => {
-  switch (eventName) {
-    case "edit":
-      edit(row);
-      break;
-    case "remove":
-      remove(row);
-      break;
-  }
-};
+const getPageUrl = "/sale/device/getDevicePage";
+const treeSideUrl = "/sale/device/getKeyAccount";
+const searchers = [
+  {
+    name: "searchCode",
+    type: "text" as const,
+    placeholder: $t("_prop.sale.device.searchCode"),
+  },
+];
 </script>
 <template>
-  <BasePageableTable :url="getPageUrl" :searchers="searchers" ref="tableRef">
-    <template #tool-button>
-      <DefaultToolButton @top-button-click="topButtonClick" />
-    </template>
+  <TreeSidePageableTable
+    :url="getPageUrl"
+    :searchers="searchers"
+    ref="tableRef"
+    :tree-side-url="treeSideUrl"
+    tree-side-node-name="keyAccountId"
+    tree-side-param-name="keyAccountId"
+    tree-side-title="所有客户"
+  >
     <template #columns>
-      <el-table-column prop="id" type="hidden" width="40" />
-      <el-table-column :label="$t('_prop.sale.devicesn.productType')" prop="productType" />
-      <el-table-column :label="$t('_prop.sale.devicesn.productSn')" prop="productSn" />
-      <el-table-column :label="$t('_prop.sale.devicesn.mac')" prop="mac" />
-      <el-table-column :label="$t('_prop.sale.devicesn.serialNum')" prop="serialNum" />
-      <el-table-column :label="$t('_prop.sale.devicesn.softVersion')" prop="softVersion" />
-      <el-table-column :label="$t('_prop.sale.devicesn.AlVersion')" prop="AlVersion" />
-      <el-table-column :label="$t('_prop.sale.devicesn.outProductDate')" prop="outProductDate" />
-      <el-table-column :label="$t('_prop.sale.devicesn.repairMark')" prop="repairMark" />
-      <DefaultOperateButtonColumn @operate-button-click="operateButtonClick" />
+      <el-table-column :label="$t('_prop.sale.device.productType')" prop="productType" />
+      <el-table-column :label="$t('_prop.sale.device.productSn')" prop="productSn" />
+      <el-table-column :label="$t('_prop.sale.device.mac')" prop="mac" />
+      <el-table-column :label="$t('_prop.sale.device.serialNum')" prop="serialNum" />
+      <el-table-column :label="$t('_prop.sale.device.softVersion')" prop="softVersion" />
+      <el-table-column :label="$t('_prop.sale.device.alVersion')" prop="alVersion" />
+      <el-table-column :label="$t('_prop.sale.device.alNum')" prop="alNum" />
+      <el-table-column :label="$t('_prop.sale.device.outStatus')" prop="outStatus" />
+      <el-table-column :label="$t('_prop.sale.device.outProductDate')" prop="outProductDate" />
+      <el-table-column :label="$t('_prop.sale.device.repairMark')" prop="repairMark" />
     </template>
-  </BasePageableTable>
-  <BaseForm v-model:visible="visible" @submit="submit" v-model:form="form" :title="$t(title)" :rules="rules">
-    <template #form-items>
-      <el-form-item prop="id" v-if="false"><el-input v-model="form.id" /></el-form-item>
-    </template>
-  </BaseForm>
+  </TreeSidePageableTable>
 </template>