| | |
| | | <template> |
| | | <basicContainer > |
| | | <avue-crud |
| | | :option="option" |
| | | :table-loading="pageF.loading" |
| | | :data="tableData" |
| | | :page="page" |
| | | :permission="permissionList" |
| | | :before-open="beforeOpen" |
| | | v-model="form" |
| | | ref="crudRef" |
| | | @row-update="rowUpdate" |
| | | @row-save="rowSave" |
| | | @refresh-change="refreshChange" |
| | | @row-del="rowDel" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @on-load="onLoad" |
| | | > |
| | | <basicContainer> |
| | | <avue-crud :option="option" :table-loading="pageF.loading" :data="tableData" :page="page" |
| | | :permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crudRef" @row-update="rowUpdate" |
| | | @row-save="rowSave" @refresh-change="refreshChange" @row-del="rowDel" @search-change="searchChange" |
| | | @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange" |
| | | @size-change="sizeChange" @on-load="onLoad"> |
| | | <template #menu-left> |
| | | <el-button |
| | | type="success" |
| | | icon="Edit" |
| | | :disabled="pageF.single" |
| | | v-hasPermi="['cwgl:smartLockerApplication:edit']" |
| | | @click="handleUpdate">修改 |
| | | </el-button> |
| | | <el-button |
| | | type="danger" |
| | | icon="Delete" |
| | | :disabled="pageF.multiple" |
| | | @click="handleDelete" |
| | | v-hasPermi="['cwgl:smartLockerApplication:remove']" |
| | | >删除 |
| | | </el-button> |
| | | <el-button |
| | | type="warning" |
| | | plain |
| | | icon="Download" |
| | | @click="handleExport" |
| | | v-hasPermi="['cwgl:smartLockerApplication:export']" |
| | | >导出 |
| | | </el-button> |
| | | <!-- <el-button type="success" icon="Edit" :disabled="pageF.single" v-hasPermi="['cwgl:smartLockerApplication:edit']" |
| | | @click="handleUpdate">修改 |
| | | </el-button> --> |
| | | <!-- <el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete" |
| | | v-hasPermi="['cwgl:smartLockerApplication:remove']">删除 |
| | | </el-button> --> |
| | | <!-- <el-button type="warning" plain icon="Download" @click="handleExport" |
| | | v-hasPermi="['cwgl:smartLockerApplication:export']">导出 |
| | | </el-button> --> |
| | | </template> |
| | | <template #menu="{ size, row, index }"> |
| | | |
| | | <el-link class="link-btn" v-if="row.status == 0" type="primary" :underline="false" plain @click="handleInvalid(row)" |
| | | v-hasPermi="['cwgl:smartLockerApplication:invalid']"> 作废 |
| | | </el-link> |
| | | </template> |
| | | </avue-crud> |
| | | </basicContainer> |
| | | </template> |
| | | |
| | | <script setup name="smartLockerApplication" lang="ts"> |
| | | import {SmartLockerApplicationI,addSmartLockerApplication, delSmartLockerApplication, exportSmartLockerApplication, getSmartLockerApplication, listSmartLockerApplication, updateSmartLockerApplication} from "@/api/cwgl/smartLockerApplication"; |
| | | import useCurrentInstance from "@/utils/useCurrentInstance"; |
| | | import {computed,reactive, ref, toRefs} from "vue"; |
| | | import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface"; |
| | | import {usePagePlus} from "@/hooks/usePagePlus"; |
| | | import {hasPermission} from "@/utils/permissionUtils"; |
| | | import { SmartLockerApplicationI, addSmartLockerApplication, delSmartLockerApplication, exportSmartLockerApplication, getSmartLockerApplication, listSmartLockerApplication, updateSmartLockerApplication, smartLockerApplicationQuery, |
| | | smartLockerApplicationInvalid |
| | | } from "@/api/cwgl/smartLockerApplication"; |
| | | import useCurrentInstance from "@/utils/useCurrentInstance"; |
| | | import { computed, reactive, ref, toRefs } from "vue"; |
| | | import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface"; |
| | | import { usePagePlus } from "@/hooks/usePagePlus"; |
| | | import { hasPermission } from "@/utils/permissionUtils"; |
| | | |
| | | const { proxy } = useCurrentInstance(); |
| | | const crudRef = ref(); |
| | | const { proxy } = useCurrentInstance(); |
| | | const crudRef = ref(); |
| | | |
| | | const permissionList = computed(()=>{ |
| | | return { |
| | | addBtn: hasPermission(["cwgl:smartLockerApplication:add"]), |
| | | delBtn: hasPermission(["cwgl:smartLockerApplication:remove"]), |
| | | editBtn: hasPermission(["cwgl:smartLockerApplication:edit"]), |
| | | viewBtn: hasPermission(["cwgl:smartLockerApplication:query"]), |
| | | } |
| | | }) |
| | | const permissionList = computed(() => { |
| | | return { |
| | | addBtn: hasPermission(["cwgl:smartLockerApplication:add"]), |
| | | delBtn: hasPermission(["cwgl:smartLockerApplication:remove"]), |
| | | editBtn: hasPermission(["cwgl:smartLockerApplication:edit"]), |
| | | viewBtn: hasPermission(["cwgl:smartLockerApplication:query"]), |
| | | } |
| | | }) |
| | | |
| | | const data = reactive({ |
| | | form:<SmartLockerApplicationI>{}, |
| | | queryParams:<SmartLockerApplicationI&PageQueryInterface>{}, |
| | | page: <PagesInterface>{ |
| | | pageSize: 10, |
| | | total: 0, |
| | | currentPage: 1, |
| | | const data = reactive({ |
| | | form: <SmartLockerApplicationI>{}, |
| | | queryParams: <SmartLockerApplicationI & PageQueryInterface>{}, |
| | | page: <PagesInterface>{ |
| | | pageSize: 10, |
| | | total: 0, |
| | | currentPage: 1, |
| | | }, |
| | | selectionList: [], |
| | | }) |
| | | const { queryParams, form, page, selectionList } = toRefs(data); |
| | | const option = ref({ |
| | | pageKey: 'SmartLockerApplication', |
| | | rowKey: 'id', |
| | | searchLabelWidth: 100, |
| | | labelWidth: 120, |
| | | addBtn: true, // 隐藏新增按钮 |
| | | editBtn: false, // 隐藏编辑按钮 |
| | | viewBtn: false, |
| | | delBtn: false, |
| | | |
| | | column: { |
| | | // id: { |
| | | // label: 'ID', |
| | | // }, |
| | | commandType: { |
| | | label: '指令类型', |
| | | search: true, |
| | | minWidth: 120, |
| | | dataType: 'string', |
| | | type: 'select', |
| | | // addDisplay: false, // 新增时不显示 |
| | | // editDisplay: false, // 修改时不显示 |
| | | dicUrl: '/system/dict/data/type/sys_command_type', |
| | | }, |
| | | selectionList:[], |
| | | }) |
| | | const {queryParams,form,page,selectionList} = toRefs(data); |
| | | const option = ref({ |
| | | pageKey: 'SmartLockerApplication', |
| | | rowKey: 'id', |
| | | column: { |
| | | id: { |
| | | label: 'ID', |
| | | }, |
| | | commandType: { |
| | | label: '指令类型(0:开门指令;1:流转指令)', |
| | | }, |
| | | applicantCode: { |
| | | label: '申领人编码', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "申领人编码不能为空", trigger: "blur" } |
| | | ], }, |
| | | applicantName: { |
| | | label: '申领人姓名', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "申领人姓名不能为空", trigger: "blur" } |
| | | ], }, |
| | | itemType: { |
| | | label: '领取物品类型(0:车钥匙;1:文件;2:印章;3:其他)', |
| | | }, |
| | | itemName: { |
| | | label: '物品名称', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "物品名称不能为空", trigger: "blur" } |
| | | ], }, |
| | | lockerNo: { |
| | | label: '智能柜编号默认接驳站智能钥匙柜', |
| | | }, |
| | | lockerPort: { |
| | | label: '智能柜格口号', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "智能柜格口号不能为空", trigger: "blur" } |
| | | ], }, |
| | | status: { |
| | | label: '状态(0:正常;1:作废;2:领取)', |
| | | }, |
| | | cancelTime: { |
| | | label: '作废时间', |
| | | }, |
| | | receiveTime: { |
| | | label: '领取时间', |
| | | }, |
| | | createTime: { |
| | | label: '创建时间', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "创建时间不能为空", trigger: "blur" } |
| | | ], }, |
| | | updateTime: { |
| | | label: '更新时间', |
| | | }, |
| | | remark: { |
| | | label: '备注', |
| | | type: 'textarea', minRows: 3, maxRows: 5, |
| | | }, |
| | | createBy: { |
| | | label: '创建人', |
| | | }, |
| | | updateBy: { |
| | | label: '更新人', |
| | | }, |
| | | deleted: { |
| | | label: '删除标记(0:正常;1:删除)', |
| | | }, |
| | | } |
| | | }) |
| | | applicantCode: { |
| | | label: '申领人编码', |
| | | minWidth: 180, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "申领人编码不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | applicantName: { |
| | | label: '申领人姓名', |
| | | minWidth: 180, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "申领人姓名不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | itemType: { |
| | | label: '领取物品类型', |
| | | search: true, |
| | | minWidth: 120, |
| | | dataType: 'string', |
| | | type: 'select', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "领取物品类型不能为空", trigger: "change" |
| | | } |
| | | ], |
| | | // addDisplay: false, // 新增时不显示 |
| | | // editDisplay: false, // 修改时不显示 |
| | | dicUrl: '/system/dict/data/type/sys_item_type', |
| | | change: (val: any) => { |
| | | if (val.value === '1') { |
| | | if (form.value.itemName !== '' && form.value.itemName !== undefined) { |
| | | |
| | | const { tableData,pageF,rowSave,rowUpdate,rowDel,beforeOpen,searchChange, |
| | | searchReset,selectionChange,onLoad,currentChange,sizeChange,handleDelete,handleExport,handleUpdate,refreshChange} = usePagePlus({ |
| | | form:form, |
| | | option:option, |
| | | queryParams:queryParams, |
| | | idKey:'id', |
| | | page:page.value, |
| | | getListApi:listSmartLockerApplication, |
| | | getDetailApi:getSmartLockerApplication, |
| | | exportApi:exportSmartLockerApplication, |
| | | deleteApi:delSmartLockerApplication, |
| | | addApi:addSmartLockerApplication, |
| | | updateApi:updateSmartLockerApplication, |
| | | handleUpdateFunc:()=>{ |
| | | } |
| | | } |
| | | |
| | | } |
| | | }, |
| | | itemName: { |
| | | label: '物品名称', |
| | | showOverflowTooltip: true, |
| | | minWidth: 180, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "物品名称不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | change: (val: any) => { |
| | | // 判断 itemType 是否为 '0',并且 itemName 有值 |
| | | if (form.value.itemType === '0' && val) { |
| | | // 在这里添加你的请求接口逻辑 |
| | | debouncedItemNameChange(val.value); |
| | | // 示例请求调用(需要替换为实际的API调用) |
| | | // yourApiRequestFunction(val).then(response => { |
| | | // // 处理响应 |
| | | // }).catch(error => { |
| | | // // 处理错误 |
| | | // }); |
| | | } |
| | | } |
| | | }, |
| | | lockerNo: { |
| | | label: '智能柜编号', |
| | | minWidth: 180, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "智能柜编号不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | lockerPort: { |
| | | label: '智能柜格口号', |
| | | minWidth: 180, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "智能柜格口号不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | |
| | | |
| | | cancelTime: { |
| | | label: '作废时间', |
| | | minWidth: 180, |
| | | type: 'datetime', // 改为 datetime 类型 |
| | | format: 'YYYY-MM-DD HH:mm:ss', |
| | | valueFormat: 'YYYY-MM-DD HH:mm:ss', |
| | | addDisplay: false, // 新增时不显示 |
| | | |
| | | minWidth: 200, |
| | | }, |
| | | receiveTime: { |
| | | label: '领取时间', |
| | | minWidth: 180, |
| | | type: 'datetime', // 改为 datetime 类型 |
| | | format: 'YYYY-MM-DD HH:mm:ss', |
| | | addDisplay: false, // 新增时不显示 |
| | | |
| | | valueFormat: 'YYYY-MM-DD HH:mm:ss', |
| | | minWidth: 200, |
| | | }, |
| | | createTime: { |
| | | label: '创建时间', |
| | | minWidth: 180, |
| | | addDisplay: false, // 新增时不显示 |
| | | |
| | | type: 'datetime', // 改为 datetime 类型 |
| | | format: 'YYYY-MM-DD HH:mm:ss', |
| | | valueFormat: 'YYYY-MM-DD HH:mm:ss', |
| | | minWidth: 200, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "创建时间不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | status: { |
| | | label: '状态', |
| | | search: true, |
| | | minWidth: 120, |
| | | fixed: 'right', |
| | | dataType: 'string', |
| | | type: 'select', |
| | | addDisplay: false, // 新增时不显示 |
| | | dicUrl: '/system/dict/data/type/sys_apply_status', |
| | | }, |
| | | // updateTime: { |
| | | // label: '更新时间', |
| | | // }, |
| | | // remark: { |
| | | // label: '备注', |
| | | // type: 'textarea', minRows: 3, maxRows: 5, |
| | | // }, |
| | | // createBy: { |
| | | // label: '创建人', |
| | | // }, |
| | | // updateBy: { |
| | | // label: '更新人', |
| | | // }, |
| | | // deleted: { |
| | | // label: '删除标记(0:正常;1:删除)', |
| | | // }, |
| | | } |
| | | }) |
| | | |
| | | const { tableData, pageF, rowSave, rowUpdate, rowDel, beforeOpen, searchChange, |
| | | searchReset, selectionChange, onLoad, currentChange, sizeChange, handleDelete, handleExport, handleUpdate, refreshChange } = usePagePlus({ |
| | | form: form, |
| | | option: option, |
| | | queryParams: queryParams, |
| | | idKey: 'id', |
| | | page: page.value, |
| | | getListApi: listSmartLockerApplication, |
| | | getDetailApi: getSmartLockerApplication, |
| | | exportApi: exportSmartLockerApplication, |
| | | deleteApi: delSmartLockerApplication, |
| | | addApi: addSmartLockerApplication, |
| | | updateApi: updateSmartLockerApplication, |
| | | handleUpdateFunc: () => { |
| | | crudRef.value.rowEdit(selectionList.value[0]); |
| | | }, |
| | | handleSelectionChangeFunc:(selection:any)=>{ |
| | | handleBeforeOpenFunc: (done: Function, type: string) => { |
| | | if (done == 'add') { |
| | | option.value.column.lockerNo.value = '接驳站智能钥匙柜' |
| | | } |
| | | }, |
| | | handleSelectionChangeFunc: (selection: any) => { |
| | | selectionList.value = selection; |
| | | } |
| | | }) |
| | | |
| | | // 在 script setup 部分定义防抖节流函数 |
| | | let debounceTimer: NodeJS.Timeout | null = null; |
| | | let throttleTimer: NodeJS.Timeout | null = null; |
| | | |
| | | // 防抖函数 |
| | | const debounce = (func: Function, delay: number) => { |
| | | return function (...args: any[]) { |
| | | if (debounceTimer) { |
| | | clearTimeout(debounceTimer); |
| | | } |
| | | debounceTimer = setTimeout(() => { |
| | | func.apply(this, args); |
| | | }, delay); |
| | | }; |
| | | }; |
| | | |
| | | // 节流函数 |
| | | const throttle = (func: Function, delay: number) => { |
| | | return function (...args: any[]) { |
| | | if (!throttleTimer) { |
| | | throttleTimer = setTimeout(() => { |
| | | func.apply(this, args); |
| | | throttleTimer = null; |
| | | }, delay); |
| | | } |
| | | }; |
| | | }; |
| | | |
| | | // 定义实际要执行的函数 |
| | | const handleItemNameChange = (val: any) => { |
| | | // 判断 itemType 是否为 '0',并且 itemName 有值 |
| | | if (form.value.itemType === '0' && val) { |
| | | // 在这里添加你的请求接口逻辑 |
| | | smartLockerApplicationQuery({ licensePlateNumber: val }).then(response => { |
| | | if(response.code == 200){ |
| | | form.value.lockerPort = response.data || ''; |
| | | } |
| | | // 处理响应 |
| | | }) |
| | | } |
| | | }; |
| | | |
| | | // 创建防抖版本的函数(推荐使用防抖) |
| | | const debouncedItemNameChange = debounce(handleItemNameChange, 500); |
| | | const handleInvalid = (row: any) => { |
| | | proxy.$modal.confirm(`是否作废该申领人编码 :${row.applicantCode}?`).then(function () { |
| | | return smartLockerApplicationInvalid(row.id); |
| | | }).then((res) => { |
| | | onLoad(page.value); |
| | | proxy.$modal.msgSuccess(res.msg); |
| | | }) |
| | | |
| | | } |
| | | |
| | | </script> |