添加 角色列表中英文json包

wuyouming666

2023-09-01 5313d8736c40de0693f89dce77cb93e9983b5ace

 CanadaMes-ui/src/views/device/alarm.vue

@@ -1,280 +1,42 @@
<template>

  <div class="app">





    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">

      <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>

      <el-button type="text">设备管理</el-button>

      <router-link to="/device/iostate" tag="el-button" type="text">IO状态</router-link>

      <router-link to="/device/alarm" tag="el-button" type="text">报警信息</router-link>

      <router-link to="/device/parameter" tag="el-button" type="text">参数下发</router-link>

      <router-link to="/device/control" tag="el-button" type="text">开关控制</router-link>

    </el-breadcrumb>







    <!--卡片视图区域-->

    <el-card class="el-card">

      <el-row :gutter="20">

        <!--搜索与添加区域-->

        <el-col :span="6">

          <el-input v-model="queryInfo.username" clearable @clear="getUserList">

          </el-input>

        </el-col>

        <el-col :span="6">

          <el-input v-model="queryInfo.email" clearable @clear="getUserList">

          </el-input>

        </el-col>

        <!--搜索按钮-->

        <el-col :span="4">

          <el-button type="primary" @click="getUserList">{{ $t('langSearch') }}</el-button>

        </el-col>



        <!--添加区域-->

        <el-col :span="4">

          <el-button type="primary" @click="showAddDialog">{{ $t('langAddUser') }}</el-button>

        </el-col>

      </el-row>

      <!--用户列表区域-->

      <el-table :data="userList.records" border stripe>

        <el-table-column label="#" type="index"></el-table-column>

        <el-table-column :label="$t('langUsername')" prop="username"></el-table-column>

        <el-table-column :label="$t('langEmail')" prop="email"></el-table-column>

        <el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column>

        <el-table-column :label="$t('langDisabled')">

          <template slot-scope="scope">

            <el-switch :active-value="0" :inactive-value="1" v-model="scope.row.state" @change="stateChange(scope.row)">

            </el-switch>

          </template>

        </el-table-column>

        <el-table-column :label="$t('langAction')">

          <template slot-scope="scope">

            <!--修改-->

            <el-tooltip effect="dark" :content="$t('langEdit')" placement="top" :enterable="false">

              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>

            </el-tooltip>

            <!--删除-->

            <el-tooltip effect="dark" :content="$t('langDelete')" placement="top" :enterable="false">

              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row)"></el-button>

            </el-tooltip>

          </template>

        </el-table-column>

      </el-table>

      <!--分页区域-->

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"

        :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"

        layout="total, sizes, prev, pager, next, jumper" :total="userList.total">

      </el-pagination>

    </el-card>

    <!--添加用户的对话框-->

    <el-dialog :title="$t('langAddUserTitle')" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">

      <!--内容主体区域-->

      <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="70px">

        <el-form-item :label="$t('langUsername')" prop="username">

          <el-input v-model="addUserForm.username"></el-input>

        </el-form-item>

        <el-form-item :label="$t('langPassword')" prop="password">

          <el-input v-model="addUserForm.password" type="password"></el-input>

        </el-form-item>

        <el-form-item :label="$t('langEmail')" prop="email">

          <el-input v-model="addUserForm.email"></el-input>

        </el-form-item>

        <el-form-item :label="$t('langState')" prop="state">

          <el-select v-model="addUserForm.state">

            <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label">

            </el-option>

          </el-select>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <el-button @click="addDialogVisible = false">{{ $t('langCancel') }}</el-button>

        <el-button type="primary" @click="addUser">{{ $t('langConfirm') }}</el-button>

      </span>

    </el-dialog>

    <!--修改用户的对话框-->

    <el-dialog :title="$t('langEditUserTitle')" :visible.sync="editDialogVisible" width="50%">

      <!--内容主体区域-->

      <el-form :model="editUserForm" :rules="addUserRules" ref="addCategoryRef" label-width="70px">

        <el-form-item :label="$t('langUsername')" prop="username">

          <el-input v-model="editUserForm.username" disabled></el-input>

        </el-form-item>

        <el-form-item label="角色" prop="roleId">

          <el-select filterable v-model="editUserForm.roleId" placeholder="请选择">

            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name">

            </el-option>

          </el-select>

        </el-form-item>

        <el-form-item :label="$t('langEmail')" prop="email">

          <el-input v-model="editUserForm.email"></el-input>

        </el-form-item>

        <el-form-item :label="$t('langDisabled')" prop="state">

          <el-select v-model="editUserForm.state">

            <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label">

            </el-option>

          </el-select>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <el-button @click="editDialogVisible = false">{{ $t('langCancel') }}</el-button>

        <el-button type="primary" @click="editUserInfo">{{ $t('langConfirm') }}</el-button>

      </span>

    </el-dialog>

  <div>

    <p>{{ receivedMessage }}</p>

    <button @click="sendMessage">Send Message</button>

  </div>

</template>





<script>

import { getById, removeById, saveOrUpdate, selectPage } from "../../api/user";

import { select } from "../../api/role";



import LanguageMixin from '../../lang/LanguageMixin'

export default {

  name: "alarm",

  mixins: [LanguageMixin],

  data () {

  name:'alarm',

  data() {

    return {

      activeData: null,

      queryInfo: {

        pageNum: 1,

        pageSize: 10

      },

      userList: {

        records: [],

        total: 0,

      },

      // 添加的用户对象

      addUserForm: {

        state: 1

      },

      // 修改的用户对象

      editUserForm: {



        roleId: null,

        name: null,

        roleid: null,

      },

      // 添加分类的验证规则

      addUserRules: {

        roleId: null,

        username: [

          { required: true, message: '请输入用户名', trigger: 'blur' },

          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }

        ],

        password: [

          { required: true, message: '请输入密码', trigger: 'blur' },

          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }

        ],

        email: [

          { required: true, message: '请输入邮箱', trigger: 'blur' },

          { type: 'email', message: '请输入正确格式的邮箱地址', trigger: 'blur' }

        ]

      },

      // 控制添加用户弹框的显示和隐藏

      addDialogVisible: false,

      // 控制修改用户弹框的显示和隐藏

      editDialogVisible: false,

      options: [

        { label: '正常', value: 1 },

        { label: '禁用', value: 0 }

      ],

      roleList: [],

    }

      websocket: null,

      receivedMessage: ''

    };

  },

  created () {

    this.getUserList();

  mounted() {

    this.websocket = new WebSocket('ws://localhost:8080');



    this.websocket.onopen = () => {

      console.log('WebSocket connection opened');

    };



    this.websocket.onmessage = (event) => {

      this.receivedMessage = event.data;

    };



    this.websocket.onclose = () => {

      console.log('WebSocket connection closed');

    };

  },

  methods: {

    getUserList () {

      selectPage(this.queryInfo).then(res => {

        this.userList.records = res.data.records;

        this.userList.total = res.data.total

      });

    },



    showAddDialog () {

      this.addDialogVisible = true;

    },

    stateChange (info) {

      saveOrUpdate(info).then(() => {

        this.$message.success("更新状态成功")

      });

    },

    showEditDialog (id) {

      getById({ id: id }).then(res => {

        this.editUserForm = res.data;

        this.editDialogVisible = true;

      });

      select().then(res => {

        this.roleList = res.data;

      });

    },

    removeUserById (user) {

      // 弹框询问用户是否删除分类

      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        removeById({ id: user.id }).then(() => {

          // 重新获取分类列表

          this.getUserList();

          this.$message.success("删除用户成功");

        });

      }).catch(() => {

        this.$message.info('已取消删除');

      });

    },

    handleSizeChange (newSize) {

      this.queryInfo.pageSize = newSize;

      this.getUserList()

    },

    handleCurrentChange (newPage) {

      this.queryInfo.pageNum = newPage;

      this.getUserList()

    },

    addDialogClosed () {

      this.$refs['addUserRef'].resetFields();

    },

    addUser () {

      this.$refs.addUserRef.validate(async valid => {

        if (!valid) return;

        saveOrUpdate(this.addUserForm).then(() => {

          this.$message.success("添加用户成功");

          // 隐藏添加分类对话框

          this.addDialogVisible = false;

          // 重新获取分类列表

          this.getUserList();

        });

      })

    },

    editUserInfo () {

      this.$refs.addCategoryRef.validate(async valid => {

        if (!valid) return;



        saveOrUpdate(this.editUserForm).then(() => {

          this.$message.success("修改用户成功");

          // 隐藏添加分类对话框

          this.editDialogVisible = false;

          // 重新获取分类列表

          this.getUserList();

        });

      })

    sendMessage() {

      if (this.websocket.readyState === WebSocket.OPEN) {

        this.websocket.send('Hello WebSocket!');

      } else {

        console.log('WebSocket connection is not open');

      }

    }

  }

}

};

</script>



<style lang="less" scoped>

.el-table {

  margin-top: 15px;

  font-size: 12px;

}



.el-pagination {

  margin-top: 15px;

}



.app .el-card {

  width: 99%;

}

</style>