canvasScreen_admin/src/views/system/user/index.vue

<template>
  <div class="app-container">
    fff
    <!--工具栏-->
    <div class="head-container">
      <el-row type="flex">
        <el-col :span="20" class="col_flex">
          <!-- 搜索 -->
          <div class="form_item">
            <span>角色名称：</span>
            <el-input
              v-model="blurry"
              clearable
              size="small"
              placeholder="角色名称"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </div>
          <div class="form_item">
            <span>管理员名称：</span>
            <el-input
              v-model="blurry"
              clearable
              size="small"
              placeholder="管理员名称"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </div>
          <rrOperation />
        </el-col>
        <el-col class="page_add" :span="4">
          <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <!--新增用户-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="addDialogVisible"
      title="新增"
      width="576px"
    >
      <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
        <el-form-item
          label="手机号"
          prop="account"
          :rules="[
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.account" style="width: 336px" />
        </el-form-item>
        <el-form-item
          label="管理员名称"
          prop="nickName"
          :rules="[
            { required: true, message: '请输入管理员名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.nickName" style="width: 336px" />
        </el-form-item>
        <el-form-item
          label="管理员角色"
          prop="roles"
          :rules="[
            { required: true, message: '请选择管理员角色', trigger: 'change' }
          ]"
        >
          <el-select v-model="form.roles" placeholder="请选择管理员角色" style="width: 336px">
            <el-option label="机构超级管理员" value="1" />
            <el-option label="普通用户" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="管理员状态"
          prop="enabled"
          :rules="[
            { required: true, trigger: 'change', message: '请选择管理员状态' }
          ]"
        >
          <el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px">
            <el-option label="启用" value="1" />
            <el-option label="关闭" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
        <el-button round @click="addDialogVisible=false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="editDialogVisible"
      title="编辑"
      width="576px"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="editForm"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="管理员名称" prop="nickName">
          <el-input v-model="editForm.nickName" style="width: 336px" />
        </el-form-item>
        <el-form-item label="管理员角色" prop="roles">
          <el-input v-model="editForm.roles" disabled style="width: 336px" />
        </el-form-item>
        <el-form-item label="机构名称" prop="orgName">
          <el-input v-model="editForm.orgName" disabled style="width: 336px" />
        </el-form-item>
        <el-form-item label="更改手机号" prop="phone">
          <el-input v-model.number="editForm.phone" style="width: 336px" />
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="auth_code">
          <el-input v-model.number="editForm.code" style="width: 336px" />
          <div class="login-code">
            <span @click="countdown()">{{ verification }}</span>
          </div>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="editForm.password" style="width: 336px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
        <el-button round @click="editDialogVisible=false">关闭</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-row :gutter="15">
      <el-col>
        <!-- :data="crud.data" -->
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="tableData"
          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
          style="width: 100%;"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column :selectable="checkboxT" type="selection" width="55" />
          <el-table-column prop="account" width="135" align="center" label="登录账号" />
          <el-table-column prop="nickName" align="center" label="管理员名称" />
          <el-table-column prop="roles" align="center" label="管理角色" />
          <el-table-column prop="orgName" align="center" label="机构名称" />
          <el-table-column prop="phone" align="center" label="手机号码" />
          <el-table-column label="状态" align="center" prop="enabled">
            <template slot-scope="scope">
              <div>{{ scope.row.enabled == 0 ? '启用' : '关闭' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" width="135" label="创建日期" />
          <!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template slot-scope="scope">
              <!-- <udOperation
            :data="scope.row"
            :permission="permission"
            :disabled-dle="scope.row.id === user.id"
              />-->
              <el-button
                type="primary"
                class="edit_btn"
                @click="editFormData(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button type="danger" class="delt_btn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import crudUser from '@/api/system/user'
import { isvalidPhone } from '@/utils/validate'
// import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
// import crudOperation from '@crud/CRUD.operation'
// import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'
// const defaultForm = {
//   id: null,
//   account: null,
//   nickName: '',
//   roles: null,
//   enabled: ''
// }
export default {
  name: 'User',
  components: { rrOperation, pagination },
  // cruds() {
  //   return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
  // },
  // mixins: [presenter(), header(), form(defaultForm), crud()],
  // 数据字典
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      editForm: {
        nickName: '',
        roles: '',
        orgName: '',
        phone: '',
        code: '',
        password: ''
      },
      disabledSendCode: false,
      verification: '获取验证码',
      countNum: 60,
      height: document.documentElement.clientHeight - 180 + 'px;',
      permission: {
        add: ['admin', 'user:add'],
        edit: ['admin', 'user:edit'],
        del: ['admin', 'user:del']
      },
      tableData: [
        {
          id: 1,
          account: '15100701025',
          nickName: '王XX',
          roles: '机构超级管理员',
          orgName: 'XX机构',
          phone: '15100701025',
          enabled: '0',
          createTime: '2021-11-10'
        }
      ],
      rules: {
        nickName: [
          { required: true, message: '请输入管理员名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }
        ],
        code: [
          { required: true, trigger: 'blur', message: '请输入验证码' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    // this.crud.msg.add = '新增成功，默认密码：123456'
  },
  mounted: function() {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + 'px;'
    }
  },
  methods: {
    // 编辑
    editFormData(index, row) {
      this.editDialogVisible = true
      this.editForm.nickName = row.nickName
      this.editForm.roles = row.roles
      this.editForm.orgName = row.orgName
      this.editForm.phone = row.phone
      this.editForm.enabled = row.enabled
    },
    // 获取验证码
    getAuthCode() {
      // const param = {
      //   phone: this.editForm.phone
      // }
      // proxy.$http
      //   .post(proxy.$API.SENDMSGCODE,
      //     param
      //   )
      //   .then(res => {
      //     if (res.type == 200) {
      //       this.countdown()
      //     } else {
      //       console.log(res.content)
      //     }
      //   })
      //   .catch(res => {
      //     console.log(res)
      //   })
    },
    countdown() {
      if (this.disabledSendCode) {
        return
      }
      if (!/^1\d{10}$/.test(this.editForm.phone)) {
        this.$message.error('手机号错误，请重新输入')
        return
      }
      this.getAuthCode()
      this.disabledSendCode = true
      // this.isSendAuth = true
      this.countNum = 60
      const timer = setInterval(() => {
        this.verification = this.countNum + '重新获取'
        this.countNum -= 1
        if (this.countNum < 1) {
          clearInterval(timer)
          this.verification = '重新获取'
          this.disabledSendCode = false
          // this.isSendAuth = false
          console.log('倒计时结束')
        }
      }, 1000)
    },
    // 改变状态
    // changeEnabled(data, val) {
    //   this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     crudUser.edit(data).then(res => {
    //       this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
    //     }).catch(() => {
    //       data.enabled = !data.enabled
    //     })
    //   }).catch(() => {
    //     data.enabled = !data.enabled
    //   })
    // },
    checkboxT(row, rowIndex) {
      return row.id !== this.user.id
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-dialog__header {
  background-color: #f1f1f1;
}
.edit_code {
  margin-left: 20px;
}
</style>