feat(DeviceSn): 添加设备组件并更新本地接口地址
This commit is contained in:
223
src/views/devices/sn/index.vue
Normal file
223
src/views/devices/sn/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="app-container h-full flex flex-1 flex-col">
|
||||
<!-- 列表 -->
|
||||
<div v-show="!dialogVisible" class="flex flex-col h-full">
|
||||
<!-- 搜索 -->
|
||||
<device-page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
|
||||
<!-- 列表 -->
|
||||
<device-page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
class="flex-1 overflow-hidden"
|
||||
@add-click="handleAddClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operate-click="handleOperateClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop as string] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop as string] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #gender="scope">
|
||||
<DictTag v-model="scope.row[scope.prop as string]" code="gender" />
|
||||
</template>
|
||||
<template #mobile="scope">
|
||||
<el-text>{{ scope.row[scope.prop as string] }}</el-text>
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop as string]"
|
||||
:text="scope.row[scope.prop as string]"
|
||||
:style="{ marginLeft: '2px' }"
|
||||
/>
|
||||
</template>
|
||||
<template #serialno="scope">
|
||||
<el-link type="primary" @click="handleSerialnoClick(scope.row)">
|
||||
{{ scope.row[scope.prop as string] }}
|
||||
</el-link>
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop as string]"
|
||||
:text="scope.row[scope.prop as string]"
|
||||
:style="{ marginLeft: '2px' }"
|
||||
/>
|
||||
</template>
|
||||
</device-page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<device-page-modal
|
||||
ref="addModalRef"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #gender="scope">
|
||||
<DictSelect v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
|
||||
</template>
|
||||
<template #openModal>
|
||||
<el-button type="primary" @click="openSecondModal">打开二级弹窗</el-button>
|
||||
</template>
|
||||
</device-page-modal>
|
||||
<!-- 编辑 -->
|
||||
<device-page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #gender="scope">
|
||||
<DictSelect v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
|
||||
</template>
|
||||
</device-page-modal>
|
||||
</div>
|
||||
<div v-show="dialogVisible">
|
||||
<device-sn-detail
|
||||
v-model="dialogVisible"
|
||||
:serialno="selectedRow?.serialno"
|
||||
@return-click="handleReturnClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DeviceAPI from "@/api/system/device";
|
||||
import type { IObject, PageModalInstance } from "@/components/DeviceSn/types";
|
||||
import usePage from "@/components/DeviceSn/usePage";
|
||||
import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { initOptions } from "./config/options";
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
addModalRef,
|
||||
editModalRef,
|
||||
handleQueryClick,
|
||||
handleResetClick,
|
||||
handleAddClick,
|
||||
handleEditClick,
|
||||
handleViewClick,
|
||||
handleSubmitClick,
|
||||
handleExportClick,
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
// 其他工具
|
||||
function handleToolbarClick(name: string) {
|
||||
console.warn(name);
|
||||
if (name === "custom1") {
|
||||
ElMessage.success("点击了自定义1按钮");
|
||||
}
|
||||
}
|
||||
|
||||
function handleReturnClick() {
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
// 表格工具
|
||||
const handleOperateClick = (data: IObject) => {
|
||||
if (data.name === "detail") {
|
||||
editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
|
||||
handleViewClick(data.row, async () => {
|
||||
// 加载下拉数据源，建议在初始化配置项"initFn 中加载，避免多次请求
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
return await DeviceAPI.getFormData(data.row.serialno as string); // 根据SN获取详情
|
||||
});
|
||||
} else if (data.name === "edit") {
|
||||
editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
|
||||
handleEditClick(data.row, async () => {
|
||||
return await DeviceAPI.getFormData(data.row.serialno as string); // 根据SN获取详情
|
||||
});
|
||||
} else if (data.name === "reset_pwd") {
|
||||
ElMessageBox.prompt("请输入用户名" + data.row.username + "」的新密码", "重置密码", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
}).then(
|
||||
(result) => {
|
||||
const value = result.value;
|
||||
if (!value || value.length < 6) {
|
||||
ElMessage.warning("密码至少需6位字符，请重新输入");
|
||||
return false;
|
||||
}
|
||||
DeviceAPI.resetPassword(data.row.id, value).then(() => {
|
||||
ElMessage.success("密码重置成功，新密码是：" + value);
|
||||
});
|
||||
},
|
||||
() => {
|
||||
// 用户取消
|
||||
}
|
||||
);
|
||||
} else if (data.name === "more") {
|
||||
// 处理新增的自定义操作
|
||||
ElMessage.info(`执行了自定义操作，设备ID: ${data.row.id}`);
|
||||
} else if (data.name === "refresh") {
|
||||
DeviceAPI.deviceRefresh(data.row.serialno as string).then(() => {
|
||||
ElMessage.success(`刷新设备，设备SN: ${data.row.serialno as string}`);
|
||||
});
|
||||
} else if (data.name === "screenshot") {
|
||||
DeviceAPI.deviceScreenshot(data.row.serialno as string).then(() => {
|
||||
ElMessage.success(`截图设备，设备SN: ${data.row.serialno as string}`);
|
||||
});
|
||||
} else if (data.name === "reboot") {
|
||||
ElMessageBox.confirm("确定要重启该设备吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeviceAPI.deviceReboot(data.row.serialno as string).then(() => {
|
||||
ElMessage.success(`重启设备，设备SN: ${data.row.serialno as string}`);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
} else if (data.name === "shutdown") {
|
||||
DeviceAPI.deviceShutdown(data.row.serialno as string).then(() => {
|
||||
ElMessage.success(`关机设备，设备SN: ${data.row.serialno as string}`);
|
||||
});
|
||||
} else if (data.name === "locate") {
|
||||
DeviceAPI.deviceLocate(data.row.serialno as string).then(() => {
|
||||
ElMessage.success(`定位设备，设备SN: ${data.row.serialno as string}`);
|
||||
});
|
||||
} else if (data.name === "refactory") {
|
||||
ElMessageBox.confirm("确定要重置该设备吗？此操作将清除设备所有数据，是否继续？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
DeviceAPI.deviceRestore(data.row.serialno as string).then(() => {
|
||||
ElMessage.success(`重置设备，设备SN: ${data.row.serialno as string}`);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
};
|
||||
|
||||
// 打开二级弹窗
|
||||
const addModalRef2 = ref();
|
||||
const openSecondModal = () => {
|
||||
handleAddClick(addModalRef2 as Ref<PageModalInstance>);
|
||||
};
|
||||
|
||||
// SN点击事件 - 打开详情弹窗
|
||||
const handleSerialnoClick = async (row: IObject) => {
|
||||
// 将当前行的数据传递给详情组件
|
||||
selectedRow.value = row;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const selectedRow = ref<IObject>({});
|
||||
|
||||
onMounted(() => {
|
||||
initOptions();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user