equipment/src/views/user/user.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-input
            v-model="filterText"
            placeholder="输入部门关键字进行过滤"
            style="width: 200px"
          />
          <el-input
            v-model="query.nickname"
            placeholder="昵称"
            style="width: 200px"
            clearable
            @keyup.enter.native="crud.toQuery"
          />
          <el-input
            v-model="query.username"
            placeholder="用户名"
            style="width: 100px"
            clearable
            @keyup.enter.native="crud.toQuery"
          />
          <el-button type="primary" icon="el-icon-search" @click="crud.toQuery">
            查询
          </el-button>
          <el-button
            v-if="hasPerm('user:add')"
            type="primary"
            icon="el-icon-edit"
            @click="crud.toAdd"
          >
            添加
          </el-button>
          <el-button
            v-if="hasPerm('user:delete')"
            type="danger"
            icon="el-icon-edit"
            @click="delUser"
          >
            冻结
          </el-button>
          <!--          <el-button
            icon="el-icon-document"
            type="primary"
            @click="handleDownload"
          >
            导出Excel
          </el-button>-->
        </el-form-item>
      </el-form>
    </div>

    <el-row>
      <el-col :span="4">
        <el-tree
          ref="tree"
          :data="treeData"
          :filter-node-method="filterNode"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="[1]"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="20">
        <!--表格内容-->
        <CustomTable ref="customTable" :col-configs="colConfigs" :columns="columns" :crud="crud">
          <el-table-column slot="operation" align="center" width="100" label="操作">
            <template slot-scope="scope">
              <Edit :permission="permission" :data="scope.row" :disabled-edit="false" />
            </template>
          </el-table-column>
        </CustomTable>
        <pagination />
      </el-col>
    </el-row>

    <el-dialog :title="textMap[dialogStatus]" :visible="crud.status.editor > 0" @close="crud.cancelCU">
      <el-form
        ref="tempUser"
        :model="tempUser"
        :rules="dialogStatus === 'create' ? rules : {}"
        class="small-space"
        label-position="left"
        label-width="120px"
        style="width: 300px; margin-left: 50px"
      >
        <template v-if="dialogStatus === 'create'">
          <el-form-item
            label="用户名"
            prop="username"
            required
          >
            <el-input v-model="tempUser.username" type="text" />
          </el-form-item>
          <el-form-item
            label="身份证号"
            prop="identificationNum"
            required
          >
            <el-input v-model="tempUser.identificationNum" type="text" />
          </el-form-item>
          <el-form-item
            label="昵称"
            prop="nickname"
            required
          >
            <el-input v-model="tempUser.nickname" type="text" />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            required
          >
            <el-input v-model="tempUser.password" type="password" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="新密码">
            <el-input
              v-model="tempUser.password"
              type="password"
              placeholder="不填则表示不修改"
            />
          </el-form-item>
          <el-form-item
            label="新签名密码"
            prop="signPassword"
          >
            <el-input
              v-model="tempUser.signPassword"
              type="password"
              placeholder="不填则表示不修改"
            />
          </el-form-item>
        </template>
        <el-form-item label="角色" prop="roleIds">
          <el-select
            v-model="roleIds"
            multiple
            filterable
            placeholder="请选择"
            style="width: 180px"
          >
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-upload
          v-if="dialogStatus === 'update'"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :file-list="fileList"
          :limit="1"
          action=""
          list-type="picture"
        >
          <el-button size="small" type="primary">
            点击上传签名图片
          </el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="crud.cancelCU">
          取 消
        </el-button>
        <el-button
          v-if="dialogStatus === 'create'"
          type="success"
          @click="createUser"
        >
          创 建
        </el-button>
        <el-button v-else type="primary" @click="updateUser">
          修 改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CRUD, { form, header, presenter } from '@/components/Crud/crud'
// import Crud from '@/components/Crud'
// import Query from '@/components/Crud/Query'
import Edit from '@/components/Crud/Edit'
import CustomTable from '@/components/Crud/Table'
import Pagination from '@/components/Crud/Pagination'
import CrudUser from '@/api/user'
import { mapGetters } from 'vuex'
import { parseTime } from '../../utils'
// import Pagination from '@/components/Pagination'
// crud交由presenter持有
const defaultCrud = presenter(CRUD({
  title: '用户',
  url: '/user/list',
  orderBy: ['id asc'],
  param: {},
  crudMethod: { ...CrudUser }
}))

// 设置初始form
const defaultForm = form({
  id: null,
  roleName: '',
  roleCode: '',
  menuOptionIds: {}
})
export default {
  name: 'UserList',
  components: { Pagination, CustomTable, Edit },
  mixins: [defaultCrud, defaultForm, header()],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      colConfigs: [
        { prop: 'nickname', label: '昵称', align: 'center' },
        { prop: 'username', label: '用户名', align: 'center' },
        { prop: 'departmentId', label: '所属部门', align: 'center' },
        { prop: 'createTime', label: '创建时间', align: 'center' },
        { prop: 'updateTime', label: '最近修改时间', align: 'center' },
        { slot: 'operation' }
      ],
      treeData: [],
      filterText: '',
      total: 0, // 分页组件--数据总条数
      list: [], // 表格的数据
      listQuery: {
        pageNum: 1,
        // 页码
        pageSize: 20, // 每页条数
        orderBy: 'id asc'
      },
      roles: [], // 角色列表
      dialogStatus: 'create',
      dialogFormVisible: false,
      textMap: {
        update: '编辑',
        create: '新建用户'
      },
      tempUser: {},
      rules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
        nickname: [{ required: true, message: '请填写昵称', trigger: 'blur' }]
      },
      fileList: [],
      depts: [],
      roleIds: [],
      permission: {
        add: ['user:add'],
        edit: ['user:update'],
        del: ['user:delete']
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // this.getList()
    this.getDepartment()
    this.getAllDepartment()
    if (this.hasPerm('user:add') || this.hasPerm('user:update')) {
      this.getAllRoles()
    }
    console.log(this.crud, this.query, '啊哈哈哈')
  },
  methods: {
    // 编辑框打开后做的操作
    [CRUD.HOOK.beforeToAdd]() {
      this.showCreate()
    },
    // 编辑框打开后做的操作
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.showUpdate(form)
    },
    getAllRoles() {
      this.api({
        url: '/role/all',
        method: 'get'
      }).then((data) => {
        this.roles = data
      })
    },
    // 查询检验科室
    getDepartment() {
      this.api({
        url: '/department/all',
        method: 'get'
      }).then((data) => {
        this.depts = data
      })
    },
    getAllDepartment() {
      this.api({
        url: '/department/tree',
        method: 'get'
      }).then((data) => {
        this.treeData = data
      })
    },
    getList() {
      // 查询列表
      this.api({
        url: '/user/list',
        method: 'get',
        params: this.listQuery
      }).then((data) => {
        this.list = data.list
        this.total = data.total
      })
    },
    handleNodeClick(data) {
      if (data.id === 1) {
        this.departmentId = 0
        this.query.departmentId = null
      } else {
        this.departmentId = data.id
        this.query.departmentId = data.id
      }
      this.crud.toQuery()
    },
    filterNode(value, data) {
      console.log(value, data)
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleFilter() {
      // 查询事件
      this.query.pageNum = 1
      this.getList()
    },
    handleRemove(file, fileList) {
      this.fileList = []
      this.tempUser.signImg = ''
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJPG) {
        this.$message.error('只能上传jpg/png格式的图片')
        return false
      }
      const fd = new FormData()
      fd.append('file', file)
      fd.append('userId', this.tempUser.id)
      this.preview({
        url: '/upload/uploadSignImg',
        method: 'post',
        data: fd
      }).then((data) => {
        this.tempUser.signImg = [{ name: data }]
        this.fileList = JSON.parse(data)
        this.fileList[0].url = process.env.VUE_APP_IMG_URL + 'signImage/' + this.fileList[0].name
      })
      return true
    },
    showCreate() {
      // 显示新增对话框
      this.tempUser = {}
      this.dialogStatus = 'create'
      this.roleIds.length = 0
      this.dialogFormVisible = true
    },
    showUpdate(user) {
      this.tempUser = user
      this.roleIds.length = 0
      if (user.roleIds) {
        user.roleIds.split(',').forEach((roleId) => this.roleIds.push(Number(roleId)))
      }
      if (user.signImg) {
        this.tempUser.signImg = user.signImg
        this.fileList = [{ name: this.tempUser.signImg }]
        if (this.fileList.length > 0) {
          this.fileList[0].url =
            process.env.VUE_APP_IMG_URL + 'signImage/' + this.fileList[0].name
        }
      } else {
        this.fileList = []
      }
      console.log(this.fileList[0])
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    createUser() {
      // 添加新用户
      this.$refs['tempUser'].validate((valid) => {
        if (valid) {
          if (this.tempUser.password.length < 8) {
            this.$message.warning('密码长度不能低于8位')
            return false
          }
          this.tempUser.state = true
          this.api({
            url: '/user',
            method: 'post',
            data: {
              user: this.tempUser,
              roleIds: this.roleIds
            }
          }).then(() => {
            this.$message.success('添加成功。')
            this.getList()
            this.crud.cancelCU()
          })
        } else {
          return false
        }
      })
    },
    updateUser() {
      // 修改用户信息
      this.$refs['tempUser'].validate((valid) => {
        if (valid) {
          if (this.tempUser.password && this.tempUser.password.length < 8) {
            this.$message.warning('密码长度不能低于8位')
            return false
          }
          const _vue = this
          this.api({
            url: '/user',
            method: 'put',
            data: {
              user: this.tempUser,
              roleIds: this.roleIds
            }
          }).then(() => {
            let msg = '修改成功'
            this.dialogFormVisible = false
            if (this.userId === this.tempUser.userId) {
              msg = '修改成功,部分信息重新登录后生效'
            }
            this.$message({
              message: msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                _vue.getList()
              }
            })
            this.crud.cancelCU()
          })
        } else {
          return false
        }
      })
    },
    removeUser($index) {
      const _vue = this
      this.$confirm('确定删除此用户?', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
        const user = _vue.list[$index]
        user.state = false
        _vue
          .api({
            url: '/user',
            method: 'put',
            data: { user: user }
          })
          .then(() => {
            _vue.$message.success('删除成功')
            _vue.getList()
          })
          .catch(() => {
            _vue.$message.error('删除失败')
          })
      })
    },
    handleDownload() {
      import('@/vendor/Export2Excel').then((excel) => {
        const tHeader = [
          'Id',
          '昵称',
          '用户名',
          '角色',
          '创建时间',
          '最近修改时间'
        ]
        const filterVal = [
          'id',
          'nickname',
          'username',
          'roleId',
          'createTime',
          'updateTime'
        ]
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    formatterRoleId(row, column, cellValue) {
      if (cellValue) {
        const roleName = []
        cellValue.split(',').forEach((roleId) => {
          const role = this.roles.filter(
            (role) => role.id === Number(roleId)
          )[0]
          if (role) {
            roleName.push(role.roleName)
          }
        })
        return roleName.join(',')
      } else {
        return null
      }
    },
    formatterDepartmentName(row, column, cellValue) {
      if (cellValue !== null) {
        let departmentName
        this.depts.forEach((dep) => {
          if (dep.id === cellValue) {
            departmentName = dep.name
            return false
          } else {
            return true
          }
        })
        return departmentName
      } else {
        return null
      }
    },
    delUser() {
      CrudUser.del({
        ids: this.$refs.customTable.$refs.table.selection.map(row => row.id)
      }).then(() => {
        this.crud.toQuery()
      })
    }
  }
}
</script>