clll
2023-09-13 36de27dcf89a1a651c6498f3dc4c8fd872ca3f92
CanadaMes-ui/src/views/user/index.vue
@@ -11,11 +11,12 @@
      <el-row :gutter="20">
        <!--搜索与添加区域-->
        <el-col :span="6">
          <el-input placeholder="请输入用户名称"  v-model="queryInfo.username" clearable @clear="getUserList">
          <el-input :placeholder="$t('langUsernamePlaceholder')" v-model="queryInfo.username" clearable
            @clear="getUserList">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input  placeholder="请输入邮箱" v-model="queryInfo.email" clearable @clear="getUserList">
          <el-input :placeholder="$t('langEmailPlaceholder')" v-model="queryInfo.email" clearable @clear="getUserList">
          </el-input>
        </el-col>
        <!--搜索按钮-->
@@ -35,83 +36,62 @@
        <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 :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="操作">
  <template slot-scope="scope">
    <el-button  type="primary" icon="el-icon-refresh" @click="resetPassword(scope.row)">
      {{ $t('resetPassword') }}
    </el-button>
  </template>
</el-table-column>
        <el-table-column :label="$t('langOperation')">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-refresh" @click="resetPassword(scope.row)">
              {{ $t('resetPassword') }}
            </el-button>
          </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-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-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 @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum" :page-sizes="[6, 12, 18, 24]" :page-size="queryInfo.pageSize"
        :total="userList.total" :pager-count="7" :layout="layout">
      </el-pagination>
    </el-card>
    <!--添加用户的对话框-->
    <el-dialog
        :title="$t('langAddUserTitle')"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed">
    <el-dialog :title="$t('langAddUserTitle')" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!--内容主体区域-->
      <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="100px">
        <el-form-item :label="$t('langUsername')" prop="username" >
          <el-input v-model="addUserForm.username" ></el-input>
        <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-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-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-item label="角色" prop="roleId">
          <el-select filterable v-model="addUserForm.roleId" placeholder="请选择">
            <el-option v-for="item in roleList"
                       :key="item.id"
                       :value="item.id"
                       :label="item.name">
        <el-form-item :label="$t('role')" prop="roleId">
          <el-select filterable v-model="addUserForm.roleId" :placeholder="$t('langSelect')">
            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
@@ -122,21 +102,15 @@
      </span>
    </el-dialog>
    <!--修改用户的对话框-->
    <el-dialog
        :title="$t('langEditUserTitle')"
        :visible.sync="editDialogVisible"
        width="50%">
    <el-dialog :title="$t('langEditUserTitle')" :visible.sync="editDialogVisible" width="50%">
      <!--内容主体区域-->
      <el-form :model="editUserForm" :rules="addUserRules" ref="addCategoryRef" label-width="100px">
        <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-form-item :label="$t('role')" prop="roleId">
          <el-select filterable v-model="editUserForm.roleId" :placeholder="$t('langSelect')">
            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
@@ -144,11 +118,8 @@
          <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-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>
@@ -163,18 +134,20 @@
<script>
import {getById, removeById, saveOrUpdate, selectPage,resetPass} from "../../api/user";
import {select} from "../../api/role";
import { getById, removeById, saveOrUpdate, selectPage, resetPass } from "../../api/user";
import { select } from "../../api/role";
import LanguageMixin from '../../lang/LanguageMixin'
export default {
  name: "User",
  mixins: [LanguageMixin],
  data() {
  data () {
    return {
      layout: 'total, sizes, prev, pager, next, jumper',
      queryInfo: {
        pageNum: 1,
        pageSize: 10
        pageSize: 6
      },
      userList: {
        records: [],
@@ -188,23 +161,23 @@
      editUserForm: {
        roleId: null,
        name:null,
        roleid:null,
        name: null,
        roleid: null,
      },
      // 添加分类的验证规则
      addUserRules: {
        roleId: null,
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
          { 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'}
          { 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'}
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确格式的邮箱地址', trigger: 'blur' }
        ]
      },
      // 控制添加用户弹框的显示和隐藏
@@ -212,124 +185,140 @@
      // 控制修改用户弹框的显示和隐藏
      editDialogVisible: false,
      options: [
        {label: '正常', value: 1},
        {label: '禁用', value: 0}
        { label: '正常', value: 1 },
        { label: '禁用', value: 0 }
      ],
      roleList: [],
    }
  },
  created() {
  created () {
    this.getUserList();
  },
  methods: {
    getUserList() {
    getUserList () {
      selectPage(this.queryInfo).then(res => {
        this.userList.records = res.data.records;
        this.userList.total = res.data.total
      });
//       test().then(res => {
//         console.log(res.data)
//       });
//       const data6 = [
//   { id: 32, deviceName: 'Device 7', address: 'Address 1' },
//   { id: 33, deviceName: 'Device 8', address: 'Address 2' },
// ];
      //       test().then(res => {
      //         console.log(res.data)
      //       });
      //       const data6 = [
      //   { id: 32, deviceName: 'Device 7', address: 'Address 1' },
      //   { id: 33, deviceName: 'Device 8', address: 'Address 2' },
//       testup(data6).then(res => {
//         console.log(res.data);
//       });
//       call({
//   id: 1,
//   name: 12345
// }).then(res => {
//         console.log(res.data);
//       });
      // ];
      //       testup(data6).then(res => {
      //         console.log(res.data);
      //       });
      //       call({
      //   id: 1,
      //   name: 12345
      // }).then(res => {
      //         console.log(res.data);
      //       });
    },
    showAddDialog() {
    showAddDialog () {
      this.addDialogVisible = true;
       select().then(res => {
  this.roleList = res.data;
});
    },
    stateChange(info) {
      saveOrUpdate(info).then(() => {
        this.$message.success("更新状态成功")
      });
    },
    resetPassword(info) {
      resetPass(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('已取消删除');
        this.roleList = res.data;
      });
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getUserList()
    // stateChange(info) {
    //   saveOrUpdate(info).then(() => {
    //     this.$message.success("更新状态成功")
    //   });
    // },
    stateChange (info) {
      saveOrUpdate(info).then(() => {
        const successMessage = this.$t('updateSuccessMessage');
        this.$message.success(successMessage);
      });
    },
    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();
        });
      })
    }
    resetPassword (info) {
  this.$confirm(this.$t('confirmResetPassword'), this.$t('resetPassword'), {
    confirmButtonText: this.$t('confirm'),
    cancelButtonText: this.$t('cancel'),
    type: 'warning',
  })
    .then(() => {
      resetPass(info).then(() => {
        this.$message.success(this.$t('passwordResetSuccess'));
      });
    })
    .catch(() => {
      // 用户取消重置密码操作
    });
},
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(this.$t('confirmDeleteCategory'), this.$t('prompt'), {
    confirmButtonText: this.$t('confirm'),
    cancelButtonText: this.$t('cancel'),
    type: 'warning'
  }).then(() => {
    removeById({ id: user.id }).then(() => {
      // 重新获取分类列表
      this.getUserList();
      this.$message.success(this.$t('userDeleteSuccess'));
    });
  }).catch(() => {
    this.$message.info(this.$t('deleteCanceled'));
  });
},
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(() => {
      const successMessage = this.$t('addUserSuccess');
      this.$message.success(successMessage);
      // 隐藏添加分类对话框
      this.addDialogVisible = false;
      // 重新获取分类列表
      this.getUserList();
    });
  })
},
editUserInfo () {
  this.$refs.addCategoryRef.validate(async valid => {
    if (!valid) return;
    saveOrUpdate(this.editUserForm).then(() => {
      const successMessage = this.$t('editUserSuccess');
      this.$message.success(successMessage);
      // 隐藏添加分类对话框
      this.editDialogVisible = false;
      // 重新获取分类列表
      this.getUserList();
    });
  })
}
  }
}
</script>