wu
2023-09-12 9041bf0365d5ef7f9215543c6bc2e51375802943
CanadaMes-ui/src/views/user/index.vue
@@ -11,11 +11,12 @@
      <el-row :gutter="20">
        <!--搜索与添加区域-->
        <el-col :span="6">
          <el-input :placeholder= "$t('langUsernamePlaceholder')"  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="$t('langEmailPlaceholder')"  v-model="queryInfo.email" clearable @clear="getUserList">
          <el-input :placeholder="$t('langEmailPlaceholder')" v-model="queryInfo.email" clearable @clear="getUserList">
          </el-input>
        </el-col>
        <!--搜索按钮-->
@@ -35,86 +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>
          <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="[6, 12, 18, 24]"
      :page-size="queryInfo.pageSize"
      :total="userList.total"
      :pager-count="7"
      :layout="layout"
    >
    </el-pagination>
      <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="$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-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>
@@ -125,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="$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-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>
@@ -147,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>
@@ -166,15 +134,15 @@
<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: {
@@ -193,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' }
        ]
      },
      // 控制添加用户弹框的显示和隐藏
@@ -217,95 +185,95 @@
      // 控制修改用户弹框的显示和隐藏
      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;
});
      select().then(res => {
        this.roleList = res.data;
      });
    },
    // stateChange(info) {
    //   saveOrUpdate(info).then(() => {
    //     this.$message.success("更新状态成功")
    //   });
    // },
    stateChange(info) {
  saveOrUpdate(info).then(() => {
    const successMessage = this.$t('updateSuccessMessage');
    this.$message.success(successMessage);
  });
},
    resetPassword(info) {
  this.$confirm('确认重置密码为默认值吗?', '重置密码', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      resetPass(info).then(() => {
        this.$message.success('密码已重置为默认值');
    stateChange (info) {
      saveOrUpdate(info).then(() => {
        const successMessage = this.$t('updateSuccessMessage');
        this.$message.success(successMessage);
      });
    })
    .catch(() => {
      // 用户取消重置密码操作
    });
},
    showEditDialog(id) {
      getById({id: id}).then(res => {
    },
    resetPassword (info) {
      this.$confirm('确认重置密码为默认值吗?', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          resetPass(info).then(() => {
            this.$message.success('密码已重置为默认值');
          });
        })
        .catch(() => {
          // 用户取消重置密码操作
        });
    },
    showEditDialog (id) {
      getById({ id: id }).then(res => {
        this.editUserForm = res.data;
        this.editDialogVisible = true;
      });
      select().then(res => {
  this.roleList = res.data;
});
        this.roleList = res.data;
      });
    },
    removeUserById(user) {
    removeUserById (user) {
      // 弹框询问用户是否删除分类
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById({id: user.id}).then(() => {
        removeById({ id: user.id }).then(() => {
          // 重新获取分类列表
          this.getUserList();
          this.$message.success("删除用户成功");
@@ -314,18 +282,18 @@
        this.$message.info('已取消删除');
      });
    },
    handleSizeChange(newSize) {
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getUserList()
    },
    handleCurrentChange(newPage) {
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage;
      this.getUserList()
    },
    addDialogClosed() {
    addDialogClosed () {
      this.$refs['addUserRef'].resetFields();
    },
    addUser() {
    addUser () {
      this.$refs.addUserRef.validate(async valid => {
        if (!valid) return;
        saveOrUpdate(this.addUserForm).then(() => {
@@ -337,10 +305,10 @@
        });
      })
    },
    editUserInfo() {
    editUserInfo () {
      this.$refs.addCategoryRef.validate(async valid => {
        if (!valid) return;
        saveOrUpdate(this.editUserForm).then(() => {
          const 修改用户成功 = this.$t('修改用户成功');
          this.$message.success(修改用户成功);