11

src/components/Table/table-partials/table-content/TableContent.vue

@@ -219,7 +219,7 @@ defineExpose({
           :row-span-suffix="rowSpanSuffix"
           :is-tree="isTree"
           :interval-left="intervalLeft"
-          :icon-field="keyField"
+          :icon-field="iconField"
           :key-field="keyField"
           :parent-field="parentField"
           :children-field="childrenField"
@@ -257,7 +257,7 @@ defineExpose({
       :row-span-suffix="rowSpanSuffix"
       :is-tree="isTree"
       :interval-left="intervalLeft"
-      :icon-field="keyField"
+      :icon-field="iconField"
       :key-field="keyField"
       :parent-field="parentField"
       :children-field="childrenField"

src/components/Table/table-partials/table-content/table-body/TableTreeRow.vue

@@ -61,6 +61,7 @@ const tdStyle = (column: Header) => {
   return style
 }
 const tdClass = (column: Header) => {
+  console.log("prop.iconField", props.iconField)
   let classStr = ""
   if (column.tdClass) {
     classStr += column.tdClass

src/router/menuMap/_system.ts

@@ -1,9 +1,33 @@
 import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
 export const menus: Array<MenuRouteMap> = [
-  //server 系统管理
+  //system
   {
     path: "/server",
-    icon: "fas fa-cogs",
+    icon: "fa-solid fa-gears",
+  },
+  {
+    path: "/server/orgManage",
+    component: () => import("@/views/server/orgManage.vue"),
+  },
+  {
+    path: "/server/devManage",
+    component: () => import("@/views/server/devManage.vue"),
+  },
+  {
+    path: "/server/staus",
+    component: () => import("@/views/server/companyStatus.vue"),
+  },
+  {
+    path: "/server/menuList",
+    component: () => import("@/views/server/menuManager.vue"),
+  },
+  {
+    path: "/server/sysDic",
+    component: () => import("@/views/server/sysDic.vue"),
+  },
+  {
+    path: "/server/roleManage",
+    component: () => import("@/views/server/sysRole.vue"),
   },
 ]
 export default menus

src/views/server/companyStatus.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue"
+import type { Header } from "@/components/Table/table-partials/models"
+import Rs from "@/core/services/RequestService"
+import type { VbFormItem } from "@/components/Forms/models"
+import DySelect from "@/components/select/DySelect.vue"
+import { ElSelect } from "element-plus"
+import { toast, dialog } from "@/core/utils/message"
+const operate_status = ref<string>("")
+const name = ref<string>("")
+const monitoring_type = ref<string>("")
+
+const size = ref<any>("default")
+const table = ref()
+const query = () => {
+  const params = {
+    operate_status: operate_status.value,
+    name: name.value,
+    monitoring_type: monitoring_type.value,
+  }
+  const keys = Object.keys(params)
+  keys.forEach((key) => {
+    if (params[key] === "") {
+      delete params[key]
+    }
+  })
+  queryParams.value = Object.assign({}, params)
+}
+const cols = ref<Array<Header>>([
+  {
+    name: "区域",
+    field: "org_name",
+  },
+  {
+    name: "企业名称",
+    field: "name",
+  },
+  {
+    name: "监测类型",
+    field: "monitoring_type_name",
+  },
+  {
+    name: "监测点数量",
+    field: "facilities_num",
+  },
+  {
+    name: "当前状态",
+    field: "operate_status_name",
+  },
+  {
+    name: "操作",
+    field: "action",
+  },
+])
+const queryParams = ref<any>({ monitoring_type: "", name: "", operate_status: "" })
+const reset = () => {
+  monitoring_type.value = ""
+  name.value = ""
+  operate_status.value = ""
+  queryParams.value = {
+    monitoring_type: "",
+    name: "",
+    operate_status: "",
+  }
+}
+const dySearchSelectStyle = { width: "120px" }
+const statusOption = ref<Array<any>>([
+  {
+    value: "0",
+    label: "营业",
+  },
+  {
+    value: "1",
+    label: "间休",
+  },
+  {
+    value: "2",
+    label: "停业",
+  },
+])
+//只放增改传到后台的共用参数,其余需要modal显示的参数另外定义
+const emptyData = {
+  company_id: [] as any[],
+  operate_status: 0,
+}
+const formData = ref<any>({
+  company_id: 0,
+  operate_status: 0,
+  name: "",
+  monitoring_type_name: "",
+  facilities_num: 0,
+  org_name: "",
+})
+const items: Array<VbFormItem> = [
+  {
+    field: "name",
+    label: "企业名称:",
+    required: false,
+    component: "innerText",
+    span: 24,
+  },
+  {
+    field: "org_name",
+    label: "企业地址:",
+    required: false,
+    component: "innerText",
+    span: 24,
+  },
+  {
+    field: "facilities_num",
+    labelWidth: 90,
+    label: "监测点数量:",
+    component: "innerText",
+    span: 24,
+  },
+  {
+    field: "operate_status",
+    label: "当前状态:",
+    class: "w-100",
+    component: ElSelect,
+    span: 24,
+    data: [
+      {
+        value: 0,
+        label: "营业",
+      },
+      {
+        value: 1,
+        label: "间休",
+      },
+      {
+        value: 2,
+        label: "停业",
+      },
+    ],
+  },
+]
+const modal = ref<any>()
+//定义需要操作的类型
+const opreationType = ref<"A" | "U" | "D" | "BU">("A")
+const modalTitlePrefix = computed(() => {
+  return opreationType.value == "A" ? "新增" : opreationType.value == "U" || opreationType.value == "BU" ? "编辑" : ""
+})
+
+function edit(row: any) {
+  opreationType.value = "U"
+  isBatch.value = false
+  formData.value = Object.assign({}, row)
+  nextTick(() => {
+    modal.value.show()
+  })
+}
+const selectedItems = ref<Array<any>>([])
+
+function onSave() {
+  dialog.confirm("确认更新企业状态?", "提交确认", (isConfirmed: any) => {
+    if (isConfirmed.isConfirmed) {
+      emptyData.company_id = [Number(formData.value.company_id)]
+      if (isBatch.value) {
+        console.log("selectedItems", selectedItems.value)
+        emptyData.company_id = selectedItems.value
+      }
+      emptyData.operate_status = Number(formData.value.operate_status)
+      Rs.post("sys/company/updateCompanyStatus", { data: emptyData }).then(() => {
+        table.value.search()
+      })
+    }
+  })
+}
+const isBatch = ref(false)
+const edit_status = () => {
+  opreationType.value = "BU"
+  isBatch.value = true
+  if (selectedItems.value.length == 0) {
+    toast.error("请选择要操作的数据", {
+      position: "center",
+      timer: 1200,
+    })
+    return
+  }
+  formData.value = Object.assign({}, { operate_status: 0 })
+  modal.value.show()
+}
+const onItemsAllChange = (isChecked: boolean, rows: Array<any>) => {
+  selectedItems.value = rows
+}
+</script>
+<template>
+  <VbDataTable
+    ref="table"
+    :header="cols"
+    url="sys/company/selectStatusForPage"
+    method="post"
+    :query-params="queryParams"
+    :has-checkbox="true"
+    :check-multiple="true"
+    checkbox-field="company_id"
+    v-model:selectedItems="selectedItems"
+    @on-items-all-change="onItemsAllChange"
+  >
+    <template v-slot:table-tool>
+      <el-form class="align-items-center" :inline="true">
+        <el-form-item class="mb-0 me-5 align-items-center" label="企业名称：">
+          <el-input class="w-100" v-model="name" placeholder="请输入企业名称" :size="size" />
+        </el-form-item>
+        <el-form-item class="mb-0 me-5 align-items-center" label="状态：">
+          <DySelect
+            v-model="operate_status"
+            class="w-100"
+            :style="dySearchSelectStyle"
+            :staticOptions="statusOption"
+            placeholder="请选择"
+            :size="size"
+          ></DySelect>
+        </el-form-item>
+        <el-form-item class="mb-0 me-5 align-items-center" label="监测类型">
+          <DySelect
+            class="w-100"
+            v-model="monitoring_type"
+            :style="dySearchSelectStyle"
+            url="sys/dict/getCompanyMonitoringType"
+            placeholder="请选择"
+            :size="size"
+          ></DySelect>
+        </el-form-item>
+        <el-form-item class="mb-0 me-0 align-items-center">
+          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
+          <el-button class="ms-3 mt-0 btn btn-sm btn-default" @click="reset">重置</el-button>
+          <el-button
+            class="ms-3 mt-0 btn btn-sm btn-primary"
+            :disabled="selectedItems.length == 0"
+            @click="edit_status"
+          >
+            修改状态
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #action="{ row }">
+      <div class="text-danger text-center">
+        <span class="table-action" @click="edit(row)">查看详情</span>
+      </div>
+    </template>
+  </VbDataTable>
+  <VbModal
+    v-model:modal="modal"
+    :form-data="formData"
+    :form-items="items"
+    backdrop="static"
+    modal-dialog-style="width: 400px"
+    :keyboard="false"
+    :title-prefix="modalTitlePrefix"
+    title="企业运营状态"
+    form-label-width="90"
+    modal-body-class="px-10"
+    @confirm="onSave"
+  >
+    <template v-if="isBatch" #form>
+      <el-col :span="24">
+        <el-form-item label="企业名称:">
+          <el-select v-model="formData.operate_status" placeholder="请输入企业名称" :size="size">
+            <el-option
+              v-for="(select, selectIndex) in items[3].data"
+              :key="selectIndex"
+              :value="select.value"
+              :label="select.label"
+              :class="select.class"
+              :style="select.style"
+              :disabled="select.disabled"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </template>
+  </VbModal>
+</template>

src/views/server/devManage.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import type { Header } from "@/components/Table/table-partials/models"
+const company_name = ref<string>("")
+const name = ref<string>("")
+const sim = ref<string>("")
+const sn = ref<string>("")
+const size = ref<any>("default")
+const query = () => {
+  const params = {
+    company_name: company_name.value,
+    name: name.value,
+    sim: sim.value,
+    sn: sn.value,
+  }
+  const keys = Object.keys(params)
+  keys.forEach((key) => {
+    if (params[key] === "") {
+      delete params[key]
+    }
+  })
+  queryParams.value = Object.assign({}, params)
+}
+const cols = ref<Array<Header>>([
+  {
+    name: "企业名称",
+    field: "company_name",
+  },
+  {
+    name: "净化设施",
+    field: "name",
+  },
+  {
+    name: "sn",
+    field: "sn",
+  },
+  {
+    name: "sim",
+    field: "sim",
+  },
+])
+const queryParams = ref<any>({ company_name: "", name: "", sim: "", sn: "" })
+</script>
+<template>
+  <VbDataTable
+    ref="table"
+    :header="cols"
+    url="sys/monitor/getCompanyDevice"
+    method="post"
+    :query-params="queryParams"
+    :has-checkbox="false"
+  >
+    <template v-slot:table-tool>
+      <el-form class="align-items-center" :inline="true">
+        <el-form-item class="mb-0 me-5 align-items-center" label="企业名称：">
+          <el-input class="" style="width: 180px" v-model="company_name" placeholder="请输入企业名称" :size="size" />
+        </el-form-item>
+        <el-form-item class="mb-0 me-5 align-items-center" label="净化设施：">
+          <el-input class="" style="width: 180px" v-model="name" placeholder="请输入净化设施" :size="size" />
+        </el-form-item>
+        <el-form-item class="mb-0 me-5 align-items-center" label="sim：">
+          <el-input class="" style="width: 180px" v-model="sim" placeholder="请输入sim号" :size="size" />
+        </el-form-item>
+        <el-form-item class="mb-0 me-5 align-items-center" label="sn：">
+          <el-input class="" style="width: 180px" v-model="sn" placeholder="请输入sn" :size="size" />
+        </el-form-item>
+        <el-form-item class="mb-0 me-0 align-items-center">
+          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+  </VbDataTable>
+</template>

src/views/server/menuManager.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import type { Header } from "@/components/Table/table-partials/models"
+import type { VbFormItem } from "@/components/Forms/models"
+import DySelectTree from "@/components/select/DySelectTree.vue"
+import { ElInput, ElRadioGroup } from "element-plus"
+import { RULE_KEYS } from "@/core/config/rules"
+import "element-plus/es/components/input/style/css"
+import Rs from "@/core/services/RequestService"
+import { maper } from "@/core/utils/utils"
+const table = ref()
+const cols = ref<Array<Header>>([
+  {
+    name: "名称",
+    field: "name",
+    minWidth: 300,
+  },
+  {
+    name: "链接",
+    field: "url",
+    minWidth: 300,
+  },
+  // {
+  //   name: "图标",
+  //   field: "iconCls",
+  // },
+  {
+    name: "排序序号",
+    field: "sortId",
+    width: 150,
+  },
+  {
+    name: "状态",
+    field: "enabled",
+    width: 150,
+  },
+  {
+    name: "类型",
+    field: "type",
+    width: 150,
+  },
+  {
+    name: "操作",
+    field: "action",
+    width: 150,
+  },
+])
+//定义需要操作的类型
+const opreationType = ref<"A" | "U" | "D">("A")
+const modalTitlePrefix = computed(() => {
+  return opreationType.value == "A" ? "新增" : opreationType.value == "U" ? "修改" : ""
+})
+const queryParams = ref({ isMenu: true, isPage: true })
+const formatterType = (row: any) => {
+  let result = ""
+  if (row.type === 1) {
+    result = "接口"
+  } else if (row.type === 0) {
+    result = "页面"
+  }
+  return result
+}
+const modal = ref()
+const modalRef = ref()
+const formData = ref({ id: 0, name: "", url: "", parentId: 0, sortId: 0, enabled: 1, type: 1, iconCls: "" })
+const id = ref("")
+const items: Array<VbFormItem> = [
+  {
+    field: "parentId",
+    label: "上级菜单:",
+    required: true,
+    class: "w-100",
+    component: DySelectTree,
+    span: 24,
+    props: {
+      url: "auth/menus/findTreeMenu",
+      class: "full-input",
+      staticOptions: [{ id: "0", label: "根节点" }],
+      defaultExpandLevel: 1,
+      optionMap: { id: "id", label: "name", children: "children" },
+      method: "post",
+      configs: { data: { pageIndex: 1, pageSize: 10, params: { isMenu: true, isPage: false } } },
+      id: id.value,
+    },
+  },
+  {
+    field: "name",
+    label: "菜单名称:",
+    required: true,
+    class: "w-100",
+    component: ElInput,
+    span: 24,
+  },
+  {
+    field: "url",
+    label: "链接:",
+    required: true,
+    class: "w-100",
+    component: ElInput,
+    span: 12,
+  },
+  {
+    field: "sortId",
+    label: "排序序号:",
+    required: true,
+    class: "w-100",
+    component: ElInput,
+    span: 12,
+    rules: [
+      RULE_KEYS.REQUIRED,
+      {
+        pattern: /^[1-9]\d*/, //正则校验不用字符串
+        message: "请输入大于1的数值",
+        trigger: "blur",
+      },
+    ],
+    ruleFormat: [["sortId"]],
+  },
+  {
+    field: "enabled",
+    label: "状态:",
+    class: "w-100",
+    component: ElRadioGroup,
+    span: 12,
+    data: [
+      {
+        value: "0",
+        label: "禁用",
+      },
+      {
+        value: "1",
+        label: "启用",
+      },
+    ],
+  },
+  {
+    field: "type",
+    label: "类型:",
+    class: "",
+    component: ElRadioGroup,
+    span: 12,
+    data: [
+      {
+        value: 0,
+        label: "页面",
+      },
+      {
+        value: 1,
+        label: "接口",
+      },
+    ],
+  },
+]
+const onSave = () => {
+  const reqUrl = opreationType.value == "A" ? "/auth/menus/insert" : "/auth/menus/update"
+  Rs.post(reqUrl, { data: formData.value }).then(() => {
+    table.value.search()
+    id.value = Math.random().toString(36)
+  })
+}
+const onAdd = () => {
+  opreationType.value = "A"
+  formData.value = Object.assign(
+    {},
+    { id: 0, name: "", url: "", parentId: 0, sortId: 0, enabled: 1, type: 1, iconCls: "" }
+  )
+  modal.value.show()
+}
+const edit = (row: any) => {
+  opreationType.value = "U"
+  const { children, ...params } = row
+  formData.value = Object.assign({}, params)
+  modal.value.show()
+}
+</script>
+<template>
+  <VbTreeTable
+    ref="table"
+    :header="cols"
+    url="auth/menus/findTreeMenu"
+    method="post"
+    :query-params="queryParams"
+    key-field="id"
+    children-field="children"
+    icon-field="name"
+    parentField="parentId"
+    :expand-depth="0"
+    :interval-left="10"
+  >
+    <template #table-tool>
+      <el-form class="align-items-center" :inline="true">
+        <el-form-item class="mb-0 me-0 align-items-center">
+          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="onAdd">新增</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #name="{ row }">
+      <div style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap" :title="row.name">
+        {{ row.name }}
+      </div>
+    </template>
+    <template #url="{ row }">
+      <div style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap" :title="row.url">
+        {{ row.url }}
+      </div>
+    </template>
+    <template #enabled="{ row }">{{ row.enabled === "1" ? "启用" : "禁用" }}</template>
+    <template #type="{ row }">{{ formatterType(row) }}</template>
+    <template #action="{ row }">
+      <div class="text-danger text-center">
+        <span class="table-action" @click="edit(row)">编辑</span>
+      </div>
+    </template>
+  </VbTreeTable>
+  <VbModal
+    ref="modalRef"
+    v-model:modal="modal"
+    :form-data="formData"
+    :form-items="items"
+    backdrop="static"
+    modal-dialog-style="width: 800px"
+    :keyboard="false"
+    :title-prefix="modalTitlePrefix"
+    title="菜单"
+    form-label-width="90"
+    modal-body-class="px-10"
+    @confirm="onSave"
+  ></VbModal>
+</template>

src/views/server/orgManage.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import type { Header } from "@/components/Table/table-partials/models"
+import { maper } from "@/core/utils/utils"
+import Rs from "@/core/services/RequestService"
+import type { VbFormItem } from "@/components/Forms/models"
+import OrgSelectTree from "@/components/Tree/OrgSelectTree.vue"
+import AreaCascade from "@/components/select/AreaCascade.vue"
+import { ElInput } from "element-plus"
+import { RULE_KEYS } from "@/core/config/rules"
+import { ElSelect, ElRadioGroup, ElCheckboxGroup } from "element-plus"
+const table = ref<any>()
+const cols = ref<Array<Header>>([
+  { name: "名称", field: "name", align: "left", width: "200px" },
+  { name: "简称", field: "simple_name" },
+  //{ name: "父级", field: "parent_id" },
+  { name: "code", field: "code" },
+  { name: "省/市/区", field: "province_city_district" },
+  { name: "描述", field: "description" },
+  {
+    name: "操作",
+    field: "action",
+    width: "150px",
+  },
+])
+const modal = ref<any>()
+//定义需要操作的类型
+const opreationType = ref<"A" | "U" | "D">("A")
+const modalTitlePrefix = computed(() => {
+  return opreationType.value == "A" ? "新增" : opreationType.value == "U" ? "编辑" : ""
+})
+//后期api完善了这里可以改成 返回Promise的function
+const saveUrl = computed(() => {
+  return opreationType.value == "A"
+    ? "sys/organizational/insert"
+    : opreationType.value == "U"
+    ? "sys/organizational/update"
+    : opreationType.value == "D"
+    ? "sys/organizational/delById"
+    : ""
+})
+
+//只放增改传到后台的共用参数,其余需要modal显示的参数另外定义
+const emptyData = {
+  org_id: "",
+  parent_id: "0",
+  name: "",
+  simple_name: "",
+  code: "",
+  description: "",
+  province: "",
+  city: "",
+  district: "",
+}
+const formData = ref<any>(
+  Object.assign({}, emptyData, { province_city_district: ["", "", ""], simple_name2: [], simple_name3: false })
+)
+
+const items: Array<VbFormItem> = [
+  {
+    field: "parent_id",
+    label: "父组织",
+    required: false,
+    component: OrgSelectTree,
+    span: 12,
+  },
+  {
+    field: "code",
+    label: "CODE",
+    required: true,
+    component: ElInput,
+    rules: [RULE_KEYS.REQUIRED, RULE_KEYS.MIN, RULE_KEYS.MAX],
+    ruleFormat: [["CODE"], [2], [4]],
+    span: 12,
+  },
+  {
+    field: "name",
+    label: "名称",
+    required: true,
+    component: ElInput,
+    span: 12,
+  },
+  {
+    field: "simple_name",
+    label: "简称",
+    component: ElInput,
+    span: 12,
+  },
+  {
+    field: "province_city_district",
+    label: "省/市/区",
+    class: "w-100",
+    component: AreaCascade,
+    listeners: { change: pcdChange },
+  },
+  {
+    field: "description",
+    label: "描述",
+    component: ElInput,
+    type: "textarea",
+  },
+]
+function pcdChange(v: Array<string>) {
+  console.log("PCD", v)
+  formData.value.province = v[0]
+  formData.value.city = v[1]
+  formData.value.district = v[2]
+}
+function add() {
+  opreationType.value = "A"
+  formData.value = Object.assign({ province_city_district: ["", "", ""] }, emptyData)
+  modal.value.show()
+}
+function edit(row: any) {
+  opreationType.value = "U"
+  formData.value = Object.assign({}, row)
+  modal.value.show()
+}
+function deleteRow(row: any) {
+  //console.log("DELETE_ROW", row)
+  opreationType.value = "D"
+  Rs.post(saveUrl.value, { data: [row.org_id] }).then(() => {
+    table.value.search()
+  })
+}
+function onCancel() {
+  //console.log("CANCEL", form)
+}
+function onSave() {
+  if (saveUrl.value) {
+    const data = Object.assign({}, emptyData)
+    maper(data, formData.value)
+    Rs.post(saveUrl.value, { data: data }).then(() => {
+      table.value.search()
+    })
+  }
+}
+</script>
+
+<template>
+  <VbTreeTable
+    ref="table"
+    url="sys/organizational/selectForPage"
+    method="post"
+    :header="cols"
+    key-field="org_id"
+    children-field="children"
+    :expand-depth="1"
+    :interval-left="10"
+    :fixed-column="true"
+    :fixed-number="1"
+    :fixed-right-number="1"
+  >
+    <template #table-tool="">
+      <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="add">新增</el-button>
+    </template>
+    <template #province_city_district="{ row }">
+      {{
+        `${row.province_name ?? ""}${row.city_name ? `/${row.city_name}` : ``}${
+          row.district_name ? `/${row.district_name}` : ``
+        }`
+      }}
+    </template>
+    <template #action="{ row }">
+      <span class="text-primary table-action" @click="edit(row)">编辑</span>
+      <span class="text-danger table-action" @click="deleteRow(row)">删除</span>
+    </template>
+  </VbTreeTable>
+  <VbModal
+    v-model:modal="modal"
+    v-model:form-data="formData"
+    :form-items="items"
+    backdrop="static"
+    :keyboard="false"
+    :title-prefix="modalTitlePrefix"
+    title="组织机构"
+    form-label-width="70"
+    modal-body-class="px-10"
+    @cancel="onCancel"
+    @confirm="onSave"
+  >
+    <template #test_form>
+      <span class="bg-danger text-white px-5">SIMPLE:{{ formData.simple_name }}</span>
+    </template>
+  </VbModal>
+</template>

src/views/server/sysRole.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import type { Header } from "@/components/Table/table-partials/models"
+const table = ref()
+const queryParams = ref({ currentPage: true, isPage: true })
+const cols = ref<Array<Header>>([
+  {
+    name: "名称",
+    field: "name",
+    minWidth: 300,
+  },
+])
+const formData = ref({})
+</script>
+<template>
+  <div></div>
+</template>