<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">
|
<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> -->
|
</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, 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 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,
|
},
|
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',
|
},
|
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) {
|
|
}
|
}
|
|
}
|
},
|
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"
|
}
|
],
|
},
|
deadlineTime: {
|
label: '领取截止时间',
|
minWidth: 180,
|
type: 'datetime', // 改为 datetime 类型
|
format: 'YYYY-MM-DD HH:mm:ss',
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
addDisplay: true, // 新增时不显示
|
minWidth: 200,
|
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]);
|
},
|
handleBeforeOpenFunc: (done: Function, type: string) => {
|
if (done == 'add') {
|
option.value.column.lockerNo.value = '接驳站智能钥匙柜'
|
option.value.column.deadlineTime.value =formatDateTime(new Date(Date.now() + 24 * 60 * 60 * 1000));
|
|
|
}
|
},
|
handleSelectionChangeFunc: (selection: any) => {
|
selectionList.value = selection;
|
}
|
})
|
|
const formatDateTime = (date) => {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
};
|
// 在 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>
|
