|
|
@@ -0,0 +1,310 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-container>
|
|
|
+ <el-header>
|
|
|
+ <div class="left-panel">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="add"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+ <div class="right-pannel">
|
|
|
+ <div class="right-panel-search">
|
|
|
+ <el-input
|
|
|
+ v-model="keyword"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入设备唯一码"
|
|
|
+ @keyup.enter="search"
|
|
|
+ ></el-input>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="search"
|
|
|
+ title="查询"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-main class="nopadding">
|
|
|
+ <scTable
|
|
|
+ ref="table"
|
|
|
+ :data="tableData"
|
|
|
+ row-key="code"
|
|
|
+ stripe
|
|
|
+ :tableTotal="total"
|
|
|
+ :pageSize="pageSize"
|
|
|
+ :pageIndex="currentPage"
|
|
|
+ :currentPage="currentPage"
|
|
|
+ @update:page-size="pageSizeChange"
|
|
|
+ :getTableData="(i) => paginationChange(i)"
|
|
|
+ higlight-current-row
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="序号"
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <!-- <el-table-column type="selection" width="50" fixed align="center"/> -->
|
|
|
+ <el-table-column
|
|
|
+ label="云唯一码"
|
|
|
+ prop="uniqueCode"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="物理唯一码"
|
|
|
+ prop="serialNumber"
|
|
|
+ align="center"
|
|
|
+ width="150"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="型号"
|
|
|
+ prop="model"
|
|
|
+ width="120"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="软件版本"
|
|
|
+ prop="softwareVersion"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="系统版本"
|
|
|
+ prop="oSVersion"
|
|
|
+ width="180"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="机构名称"
|
|
|
+ prop="organizationName"
|
|
|
+ align="center"
|
|
|
+ showOverflowTooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="团队名称"
|
|
|
+ prop="teamName"
|
|
|
+ align="center"
|
|
|
+ showOverflowTooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="创建日期"
|
|
|
+ prop="createTime"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ this.$TOOL.dateFormat(
|
|
|
+ new Date(scope.row.createTime),
|
|
|
+ "yyyy-MM-dd hh:mm:ss"
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="table_edit(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="table_del(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </scTable>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ <el-dialog
|
|
|
+ :title="titleMap[mode]"
|
|
|
+ v-model="saveDialogVisible"
|
|
|
+ width="850"
|
|
|
+ destroy-on-close
|
|
|
+ >
|
|
|
+ <template #footer>
|
|
|
+ <div>
|
|
|
+ <el-button @click="saveDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="mode !== 'show'"
|
|
|
+ type="primary"
|
|
|
+ @click="doDevice(mode)"
|
|
|
+ >保 存</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <deviceFrom :formInline="formInline"></deviceFrom>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ CreateDeviceRequest,
|
|
|
+ GetDeviceRequest,
|
|
|
+ GetDeviceByUniqueCodeRequest,
|
|
|
+ SetDeviceOrganizationRequest,
|
|
|
+ DevicePageRequest,
|
|
|
+ RemoveDeviceRequest,
|
|
|
+ UpdateDeviceRequest,
|
|
|
+} from "@/jsonrpc/services/device.m";
|
|
|
+import store from "@/store";
|
|
|
+
|
|
|
+import deviceFrom from "./components/deviceFrom.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ deviceFrom,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword: "", // 搜索关键词
|
|
|
+ tableData: [], // 表格数据
|
|
|
+ saveDialogVisible: false,
|
|
|
+ mode: "add",
|
|
|
+ titleMap: { add: "新增设备", edit: "编辑设备" },
|
|
|
+ formInline: {},
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add() {
|
|
|
+ this.saveDialogVisible = true;
|
|
|
+ this.formInline = {};
|
|
|
+ },
|
|
|
+
|
|
|
+ async doDevice(mode) {
|
|
|
+ if (mode == "add") {
|
|
|
+ await this.addDevice();
|
|
|
+ } else if (mode == "edit") {
|
|
|
+ await this.updateDevice();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //创建
|
|
|
+ async addDevice() {
|
|
|
+ var request = new CreateDeviceRequest({
|
|
|
+ serialNumber: this.formInline.serialNumber,
|
|
|
+ model: this.formInline.model,
|
|
|
+ softwareVersion: this.formInline.softwareVersion,
|
|
|
+ oSVersion: this.formInline.oSVersion,
|
|
|
+ description: this.formInline.description,
|
|
|
+ organizationCode: this.formInline.organizationCode,
|
|
|
+ teamCode: this.formInline.teamCode,
|
|
|
+ deviceType: 1,
|
|
|
+ token: store.state.userInfo.token,
|
|
|
+ }).toJson();
|
|
|
+ const result = await this.$rpc.device.createDeviceAsync(request);
|
|
|
+ if (result) {
|
|
|
+ this.saveDialogVisible = false;
|
|
|
+ await this.paginationChange();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //更新
|
|
|
+ async updateDevice() {
|
|
|
+ debugger;
|
|
|
+ const request = new UpdateDeviceRequest({
|
|
|
+ code: this.formInline.code,
|
|
|
+ model: this.formInline.model,
|
|
|
+ softwareVersion: this.formInline.softwareVersion,
|
|
|
+ oSVersion: this.formInline.oSVersion,
|
|
|
+ description: this.formInline.description,
|
|
|
+ organizationCode: this.formInline.organizationCode,
|
|
|
+ teamCode: this.formInline.teamCode,
|
|
|
+ token: store.state.userInfo.token,
|
|
|
+ }).toJson();
|
|
|
+ const result = await this.$rpc.device.updateDeviceAsync(request);
|
|
|
+ if (result) {
|
|
|
+ this.saveDialogVisible = false;
|
|
|
+ await this.paginationChange();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async search() {
|
|
|
+ await this.paginationChange();
|
|
|
+ },
|
|
|
+ async paginationChange(i) {
|
|
|
+ this.currentPage = i || 1;
|
|
|
+ await this.getList();
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ async table_edit(row) {
|
|
|
+ this.mode = "edit";
|
|
|
+ this.formInline = await this.getDataDetailAsync(row);
|
|
|
+ this.saveDialogVisible = true;
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ async table_del(row) {
|
|
|
+ this.$confirm(`确定删除设备${row.uniqueCode}吗？`, "提示", {
|
|
|
+ type: "warning",
|
|
|
+ confirmButtonText: "确 认",
|
|
|
+ cancelButtonText: "取 消",
|
|
|
+ confirmButtonClass: "el-button--danger",
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ const request = new RemoveDeviceRequest({
|
|
|
+ code: row.code,
|
|
|
+ token: store.state.userInfo.token,
|
|
|
+ }).toJson();
|
|
|
+ var result = await this.$rpc.device.removeDeviceAsync(request);
|
|
|
+ if (result) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ await this.paginationChange();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ console.log("RemoveDeviceRequest method exception");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取详细信息
|
|
|
+ async getDataDetailAsync(row) {
|
|
|
+ const request = new GetDeviceRequest({
|
|
|
+ token: store.state.userInfo.token,
|
|
|
+ code: row.code,
|
|
|
+ }).toJson();
|
|
|
+ const result = await this.$rpc.device.getDeviceDetailAsync(request);
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取分页信息
|
|
|
+ async getList() {
|
|
|
+ const pageRequest = new DevicePageRequest({
|
|
|
+ pageIndex: this.currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ token: store.state.userInfo.token,
|
|
|
+ keyword: this.keyword,
|
|
|
+ deviceType: 1,
|
|
|
+ }).toJson();
|
|
|
+ const tableData = await this.$rpc.device.getDevicePageAsync(pageRequest);
|
|
|
+ this.total = tableData.dataCount;
|
|
|
+ this.tableData = tableData.pageData;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.ellipsis {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
