diff --git a/src/views/devices/sn/components/DevicePageContent.vue b/src/views/devices/sn/components/DevicePageContent.vue deleted file mode 100644 index d965077a..00000000 --- a/src/views/devices/sn/components/DevicePageContent.vue +++ /dev/null @@ -1,1031 +0,0 @@ - - - - - - - - diff --git a/src/views/devices/sn/components/DevicePageModal.vue b/src/views/devices/sn/components/DevicePageModal.vue deleted file mode 100644 index bf8ba4f0..00000000 --- a/src/views/devices/sn/components/DevicePageModal.vue +++ /dev/null @@ -1,274 +0,0 @@ - - - - - diff --git a/src/views/devices/sn/components/DevicePageSearch.vue b/src/views/devices/sn/components/DevicePageSearch.vue deleted file mode 100644 index 54af4542..00000000 --- a/src/views/devices/sn/components/DevicePageSearch.vue +++ /dev/null @@ -1,169 +0,0 @@ - - - - - diff --git a/src/views/devices/sn/components/types.ts b/src/views/devices/sn/components/types.ts deleted file mode 100644 index 24712f80..00000000 --- a/src/views/devices/sn/components/types.ts +++ /dev/null @@ -1,222 +0,0 @@ -import type { DialogProps, DrawerProps, FormItemRule, PaginationProps } from "element-plus"; -import type { FormProps, TableProps, ColProps, ButtonProps, CardProps } from "element-plus"; -import type PageContent from "./DevicePageContent.vue"; -import type PageModal from "./DevicePageModal.vue"; -import type PageSearch from "./DevicePageSearch.vue"; -import type SnDetail from "./DeviceSnDetail.vue"; -import type { CSSProperties } from "vue"; -import type { PageResult } from "@/api/common"; - -export type PageSearchInstance = InstanceType; -export type PageContentInstance = InstanceType; -export type PageModalInstance = InstanceType; -export type SnDetailInstance = InstanceType; - -export type IObject = Record; - -type DateComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag"; -type InputComponent = "input" | "select" | "input-number" | "cascader" | "tree-select"; -type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "icon-select" | "custom"; -export type ISearchComponent = DateComponent | InputComponent | "custom"; -export type IComponentType = DateComponent | InputComponent | OtherComponent; - -type ToolbarLeft = "add" | "delete" | "import" | "export"; -type ToolbarRight = "refresh" | "filter" | "imports" | "exports" | "search"; -type ToolbarTable = "edit" | "view" | "delete"; -export type IToolsButton = { - name: string; // 按钮名称 - text?: string; // 按钮文本 - perm?: Array | string; // 权限标识(可以是完整权限字符串如'sys:user:create'或操作权限如'create') - attrs?: Partial & { style?: CSSProperties }; // 按钮属性 - render?: (row: IObject) => boolean; // 条件渲染 - children?: IToolsButton[]; -}; -export type IToolsDefault = ToolbarLeft | ToolbarRight | ToolbarTable | IToolsButton; - -export interface IOperateData { - name: string; - row: IObject; - column: IObject; - $index: number; -} - -export interface ISearchConfig { - // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 - permPrefix?: string; - // 标签冒号(默认：false) - colon?: boolean; - // 表单项(默认：[]) - formItems?: IFormItems; - // 是否开启展开和收缩(默认：true) - isExpandable?: boolean; - // 默认展示的表单项数量(默认：3) - showNumber?: number; - // 卡片属性 - cardAttrs?: Partial & { style?: CSSProperties }; - // form组件属性 - form?: IForm; - // 自适应网格布局(使用时表单不要添加 style: { width: "200px" }) - grid?: boolean | "left" | "right"; -} - -export interface IContentConfig { - // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 - permPrefix?: string; - // table组件属性 - table?: Partial, "data">>; - // 分页组件位置(默认：left) - pagePosition?: "left" | "right"; - // pagination组件属性 - pagination?: - | boolean - | Partial< - Omit< - PaginationProps, - "v-model:page-size" | "v-model:current-page" | "total" | "currentPage" - > - >; - // 列表的网络请求函数(需返回promise) - indexAction: (queryParams: TQuery) => Promise | TItem[]>; - // 默认的分页相关的请求参数 - request?: { - pageName: string; - limitName: string; - }; - // 分页接口统一返回 PageResult { list, total } - // 修改属性的网络请求函数(需返回promise) - modifyAction?: (data: { - [key: string]: any; - field: string; - value: boolean | string | number; - }) => Promise; - // 删除的网络请求函数(需返回promise) - deleteAction?: (ids: string) => Promise; - // 后端导出的网络请求函数(需返回promise) - exportAction?: (queryParams: TQuery) => Promise; - // 前端全量导出的网络请求函数(需返回promise) - exportsAction?: (queryParams: TQuery) => Promise; - // 导入模板 - importTemplate?: string | (() => Promise); - // 后端导入的网络请求函数(需返回promise) - importAction?: (file: File) => Promise; - // 前端导入的网络请求函数(需返回promise) - importsAction?: (data: IObject[]) => Promise; - // 主键名(默认为id) - pk?: string; - // 表格工具栏(默认:add,delete,export,也可自定义) - toolbar?: Array; - // 表格工具栏右侧图标(默认:refresh,filter,imports,exports,search) - defaultToolbar?: Array; - // table组件列属性(额外的属性templet,operat,slotName) - cols: Array<{ - type?: "default" | "selection" | "index" | "expand"; - label?: string; - prop?: string; - width?: string | number; - align?: "left" | "center" | "right"; - columnKey?: string; - reserveSelection?: boolean; - // 列是否显示 - show?: boolean; - // 模板 - templet?: - | "image" - | "list" - | "url" - | "switch" - | "input" - | "price" - | "percent" - | "icon" - | "date" - | "tool" - | "custom"; - // image模板相关参数 - imageWidth?: number; - imageHeight?: number; - // list模板相关参数 - selectList?: IObject; - // switch模板相关参数 - activeValue?: boolean | string | number; - inactiveValue?: boolean | string | number; - activeText?: string; - inactiveText?: string; - // input模板相关参数 - inputType?: string; - // price模板相关参数 - priceFormat?: string; - // date模板相关参数 - dateFormat?: string; - // tool模板相关参数 - operat?: Array; - // filter值拼接符 - filterJoin?: string; - [key: string]: any; - // 初始化数据函数 - initFn?: (item: IObject) => void; - }>; -} - -export interface IModalConfig { - // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 - permPrefix?: string; - // 标签冒号(默认：false) - colon?: boolean; - // 主键名(主要用于编辑数据,默认为id) - pk?: string; - // 组件类型(默认：dialog) - component?: "dialog" | "drawer"; - // dialog组件属性 - dialog?: Partial>; - // drawer组件属性 - drawer?: Partial>; - // form组件属性 - form?: IForm; - // 表单项 - formItems: IFormItems; - // 提交之前处理 - beforeSubmit?: (data: T) => void; - // 提交的网络请求函数(需返回promise) - formAction?: (data: T) => Promise; -} - -export type IForm = Partial>; - -// 表单项 -export type IFormItems = Array<{ - // 组件类型(如input,select,radio,custom等) - type: T; - // 标签提示 - tips?: string | IObject; - // 标签文本 - label: string; - // 键名 - prop: string; - // 组件属性 - attrs?: IObject; - // 组件可选项(只适用于select,radio,checkbox组件) - options?: Array<{ label: string; value: any; [key: string]: any }> | Ref; - // 验证规则 - rules?: FormItemRule[]; - // 初始值 - initialValue?: any; - // 插槽名(适用于自定义组件，设置类型为custom) - slotName?: string; - // 是否隐藏 - hidden?: boolean; - // layout组件Col属性 - col?: Partial; - // 组件事件 - events?: Record void>; - // 初始化数据函数扩展 - initFn?: (item: IObject) => void; -}>; - -export interface IPageForm { - // 主键名(主要用于编辑数据,默认为id) - pk?: string; - // form组件属性 - form?: IForm; - // 表单项 - formItems: IFormItems; -} diff --git a/src/views/devices/sn/components/usePage.ts b/src/views/devices/sn/components/usePage.ts deleted file mode 100644 index 38572c45..00000000 --- a/src/views/devices/sn/components/usePage.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { ref } from "vue"; -import type { IObject, PageContentInstance, PageModalInstance, PageSearchInstance } from "./types"; - -function usePage() { - const searchRef = ref(); - const contentRef = ref(); - const addModalRef = ref(); - const editModalRef = ref(); - - // 搜索 - function handleQueryClick(queryParams: IObject) { - const filterParams = contentRef.value?.getFilterParams(); - contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true); - } - // 重置 - function handleResetClick(queryParams: IObject) { - const filterParams = contentRef.value?.getFilterParams(); - contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true); - } - // 新增 - function handleAddClick(RefImpl?: Ref) { - if (RefImpl) { - RefImpl?.value.setModalVisible(); - RefImpl?.value.handleDisabled(false); - } else { - addModalRef.value?.setModalVisible(); - addModalRef.value?.handleDisabled(false); - } - } - // 编辑 - async function handleEditClick( - row: IObject, - callback?: (result?: IObject) => IObject | Promise, - RefImpl?: Ref, - ) { - if (RefImpl) { - RefImpl.value?.setModalVisible(); - RefImpl.value?.handleDisabled(false); - const from = await (callback?.(row) ?? Promise.resolve(row)); - RefImpl.value?.setFormData(from ? from : row); - } else { - editModalRef.value?.setModalVisible(); - editModalRef.value?.handleDisabled(false); - const from = await (callback?.(row) ?? Promise.resolve(row)); - editModalRef.value?.setFormData(from ? from : row); - } - } - // 查看 - async function handleViewClick( - row: IObject, - callback?: (result?: IObject) => IObject | Promise, - RefImpl?: Ref, - ) { - if (RefImpl) { - RefImpl.value?.setModalVisible(); - RefImpl.value?.handleDisabled(true); - const from = await (callback?.(row) ?? Promise.resolve(row)); - RefImpl.value?.setFormData(from ? from : row); - } else { - editModalRef.value?.setModalVisible(); - editModalRef.value?.handleDisabled(true); - const from = await (callback?.(row) ?? Promise.resolve(row)); - editModalRef.value?.setFormData(from ? from : row); - } - } - // 表单提交 - function handleSubmitClick() { - //根据检索条件刷新列表数据 - const queryParams = searchRef.value?.getQueryParams(); - contentRef.value?.fetchPageData(queryParams, true); - } - // 导出 - function handleExportClick() { - // 根据检索条件导出数据 - const queryParams = searchRef.value?.getQueryParams(); - contentRef.value?.exportPageData(queryParams); - } - // 搜索显隐 - function handleSearchClick() { - searchRef.value?.toggleVisible(); - } - // 筛选数据 - function handleFilterChange(filterParams: IObject) { - const queryParams = searchRef.value?.getQueryParams(); - contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true); - } - - return { - searchRef, - contentRef, - addModalRef, - editModalRef, - handleQueryClick, - handleResetClick, - handleAddClick, - handleEditClick, - handleViewClick, - handleSubmitClick, - handleExportClick, - handleSearchClick, - handleFilterChange, - }; -} - -export default usePage; diff --git a/src/views/devices/sn/config/add.ts b/src/views/devices/sn/config/add.ts index 8418ae0f..cb6bbb3a 100644 --- a/src/views/devices/sn/config/add.ts +++ b/src/views/devices/sn/config/add.ts @@ -1,9 +1,9 @@ import DeviceAPI from "@/api/device"; import type { DeviceForm } from "@/api/device/types"; -import type { IModalConfig } from "../components/types"; +import type { CrudFormConfig } from "@/components/Crud/types"; -const modalConfig: IModalConfig = { - permPrefix: "sys:device", +const addFormConfig: CrudFormConfig = { + component: "dialog", dialog: { title: "新增设备", width: 800, @@ -12,13 +12,8 @@ const modalConfig: IModalConfig = { form: { labelWidth: 100, }, - formAction(data) { - return DeviceAPI.create(data); - }, - beforeSubmit(data) { - return data; - }, - formItems: [ + submitForm: (data) => DeviceAPI.create(data), + fields: [ { label: "设备SN", prop: "serialno", @@ -125,5 +120,4 @@ const modalConfig: IModalConfig = { ], }; -// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出 -export default reactive(modalConfig) as IModalConfig; +export default addFormConfig; diff --git a/src/views/devices/sn/config/content.ts b/src/views/devices/sn/config/content.ts index c2afd284..144afa8c 100644 --- a/src/views/devices/sn/config/content.ts +++ b/src/views/devices/sn/config/content.ts @@ -1,9 +1,27 @@ import DeviceAPI from "@/api/device"; -import type { DeviceQueryParams, DeviceItem } from "@/api/device/types"; -import type { IContentConfig } from "../components/types"; +import type { DeviceItem, DeviceQueryParams } from "@/api/device/types"; +import type { CrudTableConfig } from "@/components/Crud/types"; +import { onlineStatus, syncOnlineStatus } from "./online"; -const contentConfig: IContentConfig = { - permPrefix: "sys:device", // 不写不进行按钮权限校验 +/** 列表接口不保证带在线状态，加载后批量补齐 */ +async function fetchDevices(params: DeviceQueryParams) { + const page = await DeviceAPI.getPage(params); + syncOnlineStatus(page.list); + const sns = page.list.map((item) => item.serialno).filter((sn): sn is string => !!sn); + if (sns.length) { + await DeviceAPI.getOnlineStatusBatch(sns) + .then((onlineMap) => { + Object.values(onlineMap ?? {}).forEach((info) => { + if (info?.serialno) onlineStatus[info.serialno] = info.online ?? 0; + }); + }) + .catch(() => undefined); + } + return page; +} + +const contentConfig: CrudTableConfig = { + permissionPrefix: "sys:device", table: { border: true, highlightCurrentRow: true, @@ -14,182 +32,90 @@ const contentConfig: IContentConfig = { pageSize: 20, pageSizes: [10, 20, 30, 50], }, - indexAction(params) { - return DeviceAPI.getPage(params); - }, - deleteAction: DeviceAPI.deleteByIds, - importAction(file) { - return DeviceAPI.import(file); - }, - exportAction: DeviceAPI.export, + fetchData: fetchDevices, + deleteByIds: DeviceAPI.deleteByIds, + importFile: DeviceAPI.import, importTemplate: DeviceAPI.downloadTemplate, - importsAction(data) { - // 模拟导入数据 - console.warn("importsAction", data); - return Promise.resolve(); - }, - async exportsAction(params) { - // 模拟获取到的是全量数据 - const data = await DeviceAPI.getPage(params); - console.warn("exportsAction", data.list); - return data.list; - }, - pk: "id", - toolbar: [ - "add", - "delete", - "import", - "export", - { - name: "custom1", - text: "自定义1", - perm: "add", - attrs: { icon: "plus", color: "#626AEF" }, - }, - ], - defaultToolbar: ["refresh", "filter", "imports", "exports", "search"], - cols: [ + exportFile: (params) => DeviceAPI.export(params as DeviceQueryParams), + rowKey: "id", + toolbarActions: ["create", "delete", "import", "export"], + tableTools: ["refresh", "columns", "search"], + columns: [ { type: "selection", width: 50, align: "center" }, { label: "编号", align: "center", prop: "id", width: 100, show: false }, - { - label: "SN", - align: "center", - prop: "serialno", - templet: "custom", - slotName: "serialno", - width: 220, - }, - { - label: "在线状态", - align: "center", - prop: "online", - templet: "custom", - slotName: "onlineStatus", - width: 100, - }, + { label: "SN", align: "center", prop: "serialno", width: 220 }, + { label: "在线状态", align: "center", prop: "online", width: 100 }, { label: "设备昵称", align: "center", prop: "snName", width: 200 }, { label: "设备型号", align: "center", prop: "snModel", width: 200 }, { label: "推送ID", align: "center", prop: "pushId", width: 200 }, - // { label: "设备 IMEI", align: "center", prop: "snImei", width: 200 }, - // { label: "设备版本号", align: "center", prop: "snDispalyId", width: 400 }, - // { label: "头像", align: "center", prop: "avatar", templet: "image" }, - // { - // label: "性别", - // align: "center", - // prop: "gender", - // width: 100, - // templet: "custom", - // slotName: "gender", - // }, - // { label: "部门", align: "center", prop: "deptName", width: 120 }, - // { - // label: "角色", - // align: "center", - // prop: "roleNames", - // width: 120, - // columnKey: "roleIds", - // filters: [], - // filterMultiple: true, - // filterJoin: ",", - // async initFn(colItem) { - // const roleOptions = await RoleAPI.getOptions(); - // colItem.filters = roleOptions.map((item) => { - // return { text: item.label, value: item.value }; - // }); - // }, - // }, - { - label: "手机号码", - align: "center", - prop: "snMobile", - templet: "custom", - slotName: "mobile", - width: 150, - }, - { - label: "状态", - align: "center", - prop: "status", - templet: "custom", - slotName: "status", - width: 120, - }, + { label: "手机号码", align: "center", prop: "snMobile", width: 150 }, + { label: "状态", align: "center", prop: "status", width: 120 }, { label: "创建时间", align: "center", prop: "createTime", width: 180 }, { label: "激活时间", align: "center", prop: "activateTime", width: 180 }, { label: "操作", align: "center", + prop: "actions", fixed: "right", width: 280, - templet: "tool", - operat: [ + cellType: "actions", + maxVisibleActions: 3, + actions: [ { - name: "detail", - text: "详情", - attrs: { icon: "Document", type: "primary" }, + key: "detail", + label: "详情", + permission: "*:*:*", + buttonProps: { type: "primary", icon: "Document" }, }, - // { - // name: "reset_pwd", - // text: "重置密码", - // // perm: "password-reset", - // attrs: { - // icon: "refresh-left", - // // color: "#626AEF", // 使用 text 属性，颜色不生效 - // style: { - // "--el-button-text-color": "#626AEF", - // "--el-button-hover-link-text-color": "#9197f4", - // }, - // }, - // }, "edit", "delete", { - name: "more", // 主按钮名称 - text: "更多", // 显示文本 - attrs: { icon: "more", type: "primary" }, // 图标 - // children 数组定义下拉菜单项 - children: [ - { - name: "refresh", - text: "刷新", - attrs: { icon: "Refresh" }, - }, - { - name: "screenshot", - text: "截图", - attrs: { icon: "FullScreen" }, - }, - { - name: "mirror", - text: "屏幕镜像", - attrs: { icon: "VideoCamera" }, - }, - { - name: "locate", - text: "定位", - attrs: { icon: "Position" }, - }, - { - name: "shutdown", - text: "关机", - attrs: { icon: "SwitchButton" }, - }, - { - name: "reboot", - text: "重启", - attrs: { icon: "SwitchButton" }, - }, - { - name: "refactory", - text: "重置", - attrs: { icon: "RefreshLeft" }, - }, - { - name: "unbind", - text: "解除绑定", - attrs: { icon: "Unlock" }, - }, - ], + key: "refresh", + label: "刷新", + permission: "*:*:*", + buttonProps: { icon: "Refresh" }, + }, + { + key: "screenshot", + label: "截图", + permission: "*:*:*", + buttonProps: { icon: "FullScreen" }, + }, + { + key: "mirror", + label: "屏幕镜像", + permission: "*:*:*", + buttonProps: { icon: "VideoCamera" }, + }, + { + key: "locate", + label: "定位", + permission: "*:*:*", + buttonProps: { icon: "Position" }, + }, + { + key: "shutdown", + label: "关机", + permission: "*:*:*", + buttonProps: { icon: "SwitchButton" }, + }, + { + key: "reboot", + label: "重启", + permission: "*:*:*", + buttonProps: { icon: "SwitchButton" }, + }, + { + key: "refactory", + label: "重置", + permission: "*:*:*", + buttonProps: { icon: "RefreshLeft" }, + }, + { + key: "unbind", + label: "解除绑定", + permission: "*:*:*", + buttonProps: { icon: "Unlock" }, }, ], }, diff --git a/src/views/devices/sn/config/edit.ts b/src/views/devices/sn/config/edit.ts index 75f54d3e..b899c6d1 100644 --- a/src/views/devices/sn/config/edit.ts +++ b/src/views/devices/sn/config/edit.ts @@ -1,30 +1,30 @@ -import { reactive } from "vue"; import DeviceAPI from "@/api/device"; import type { DeviceForm } from "@/api/device/types"; -import type { IModalConfig } from "../components/types"; +import type { CrudFormConfig } from "@/components/Crud/types"; import { DeviceEnum } from "@/enums/settings"; import { useAppStore } from "@/stores"; -const modalConfig: IModalConfig = { - permPrefix: "sys:device", +const editFormConfig: CrudFormConfig = { component: "drawer", + rowKey: "id", drawer: { title: "修改设备", size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500, }, - pk: "id", - // 编辑只回传可修改字段（仅设备昵称） - beforeSubmit(data) { - return { - id: data.id, - snName: data.snName, - status: data.status, - } as DeviceForm; + form: { + labelWidth: 100, }, - formAction(data) { - return DeviceAPI.update(data.id as string, data); - }, - formItems: [ + // 编辑只回传可修改字段（仅设备昵称与状态） + submitForm: (data) => + DeviceAPI.update( + data.id as string, + { + id: data.id, + snName: data.snName, + status: data.status, + } as DeviceForm, + ), + fields: [ { label: "设备SN", prop: "serialno", @@ -60,4 +60,4 @@ const modalConfig: IModalConfig = { ], }; -export default reactive(modalConfig) as IModalConfig; +export default editFormConfig; diff --git a/src/views/devices/sn/config/online.ts b/src/views/devices/sn/config/online.ts new file mode 100644 index 00000000..9ef8f655 --- /dev/null +++ b/src/views/devices/sn/config/online.ts @@ -0,0 +1,14 @@ +import type { DeviceItem, DeviceOnlineVO } from "@/api/device/types"; + +/** 设备在线状态：分页接口提供当前页初值，SSE 推送实时覆盖 */ +export const onlineStatus = reactive>({}); + +export function syncOnlineStatus(list: DeviceItem[]) { + list.forEach((item) => { + if (item.serialno) onlineStatus[item.serialno] = item.online ?? 0; + }); +} + +export function updateOnlineStatus(data: DeviceOnlineVO) { + if (data?.serialno) onlineStatus[data.serialno] = data.online ?? 0; +} diff --git a/src/views/devices/sn/config/options.ts b/src/views/devices/sn/config/options.ts index 0e0baa8b..87ce1e38 100644 --- a/src/views/devices/sn/config/options.ts +++ b/src/views/devices/sn/config/options.ts @@ -1,27 +1,14 @@ -/** 公共下载数据，减少重复请求次数 */ import DeptAPI from "@/api/system/dept"; -import RoleAPI from "@/api/system/role"; +import type { OptionItem } from "@/api/common"; -interface OptionItem { - label: string; - value: any; - [key: string]: any; // 允许其他属性 -} - -// 明确指定类型为 OptionItem[] +/** 公共下载数据，减少重复请求次数 */ export const deptArr = ref([]); -export const roleArr = ref([]); -export const stateArr = ref([ + +export const stateArr = [ { label: "启用", value: 1 }, { label: "禁用", value: 0 }, -]); +]; -// 初始化逻辑，在 onMounted 钩子中调用 -export const initOptions = async () => { - // 使用Promise.all并行请求 - const [dept, roles] = await Promise.all([DeptAPI.getOptions(), RoleAPI.getOptions()]); - // 获取部门选项并赋值 - deptArr.value = dept; - // 获取角色选项并赋值 - roleArr.value = roles; -}; +export async function initOptions() { + deptArr.value = await DeptAPI.getOptions(); +} diff --git a/src/views/devices/sn/config/search.ts b/src/views/devices/sn/config/search.ts index c83a2af7..169bbe6b 100644 --- a/src/views/devices/sn/config/search.ts +++ b/src/views/devices/sn/config/search.ts @@ -1,14 +1,13 @@ -import type { ISearchConfig } from "../components/types"; +import type { CrudSearchConfig } from "@/components/Crud/types"; import { deptArr, stateArr } from "./options"; -const searchConfig: ISearchConfig = { - permPrefix: "sys:device", - formItems: [ +const searchConfig: CrudSearchConfig = { + fields: [ { - tips: "支持模糊搜索", type: "input", label: "关键字", prop: "keywords", + tips: "支持模糊搜索", attrs: { placeholder: "用户名/昵称/手机号", clearable: true, @@ -23,37 +22,35 @@ const searchConfig: ISearchConfig = { placeholder: "请选择", data: deptArr, filterable: true, - "check-strictly": true, - "render-after-expand": false, + checkStrictly: true, + renderAfterExpand: false, clearable: true, style: { width: "200px" }, }, - // async initFn(formItem) { - // // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem - // formItem.attrs.data = await DeptAPI.getOptions(); - // }, }, { type: "select", label: "状态", prop: "status", + initialValue: null, + options: stateArr, attrs: { placeholder: "全部", clearable: true, style: { width: "200px" }, }, - options: stateArr, }, { type: "date-picker", label: "创建时间", prop: "createTime", + initialValue: [], attrs: { type: "daterange", - "range-separator": "~", - "start-placeholder": "开始时间", - "end-placeholder": "截止时间", - "value-format": "YYYY-MM-DD", + rangeSeparator: "~", + startPlaceholder: "开始时间", + endPlaceholder: "截止时间", + valueFormat: "YYYY-MM-DD", style: { width: "200px" }, }, }, diff --git a/src/views/devices/sn/index.vue b/src/views/devices/sn/index.vue index 5958af3e..5c82ee25 100644 --- a/src/views/devices/sn/index.vue +++ b/src/views/devices/sn/index.vue @@ -1,96 +1,56 @@