【修改】增加字典

2023-05-05 11:35:39 +08:00
parent e0e1a8f1c7
commit 879f2c3709
4 changed files with 844 additions and 0 deletions
@@ -0,0 +1,438 @@
+<template>
+  <div class="content-height system-user">
+    <div class="title">
+      <span>字典管理</span>
+    </div>
+    <div class="search">
+      <el-row>
+        <el-col :span="20">
+          <div class="search-box-left">
+            <label>数据字典编码:</label>
+            <el-input v-model="q.account" placeholder="请输入数据字典编码"></el-input>
+            <label>数据字典名称:</label>
+            <el-input v-model="q.account" placeholder="请输入数据字典名称"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="4" align="right">
+          <div class="search-box-right">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="operate-box">
+            <el-button @click="add">新增</el-button>
+            <el-button @click="getSelectUser">批量删除</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="table">
+      <vxe-table ref="userTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
+                 v-table-min-height="'calc(100vh - 320px)'">
+        <vxe-column show-overflow type="checkbox" width="77"></vxe-column>
+        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
+          <template #default="{ row, rowIndex }">
+            {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="ACCOUNT" title="数据字典编码"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="CELLPHONE_NUMBER" title="数据字典名称"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="CREATEDATE" title="创建时间"></vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" @click="openRowData('view', row)">查看</el-button>
+            <el-button type="text" @click="openRowData('modify', row)">编辑</el-button>
+            <el-button type="text" class="del-btn" @click="deleteRow(row)">删除</el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="q.pageNo"
+        :page-sizes="[5, 10, 20]"
+        :page-size="q.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"/>
+    </div>
+    <!-- 新增/编辑/查看 用户 -->
+    <el-dialog :title="dialogTitle " :visible.sync="dialogUser" width="750px" :close-on-click-modal="false"
+               :close-on-press-escape="false" modal-append-to-body append-to-body>
+      <div class="user-form">
+        <el-form :model="form" label-width="186px" :disabled="mode === 'view'">
+          <el-form-item label="数据字典编码:" required>
+            <el-input v-model="form.account" maxlength="20" show-word-limit placeholder="请输入数据字典编码"></el-input>
+          </el-form-item>
+          <!--<el-form-item label="密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
+          <!--<el-input v-model="form.password" maxlength="20" type="password" placeholder="请输入密码"></el-input>-->
+          <!--</el-form-item>-->
+          <!--<el-form-item label="确认密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
+          <!--<el-input v-model="repassword" maxlength="20" type="password" placeholder="请确认密码"></el-input>-->
+          <!--</el-form-item>-->
+          <el-form-item label="数据字典名称:">
+            <el-input v-model="form.cellPhoneNumber" placeholder="请输入数据字典名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="姓名:" required>
+            <el-input v-model="form.usname" maxlength="20" show-word-limit placeholder="请输入姓名"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="done">
+          <el-button v-if="mode !== 'view'" type="primary" @click="sysUserAddUser">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Base64 } from 'js-base64'
+export default {
+  name: 'User',
+  data () {
+    return {
+      q: {
+        account: '', // 用户名
+        roleName: '', // 角色名称
+        pageNo: 1,
+        pageSize: 10
+      },
+      total: 0,
+      tableData: [],
+      mode: '',
+      dialogUser: false,
+      form: {
+        account: '', // 用户名
+        cellPhoneNumber: '', // 手机号
+        department: '', // 部门
+        email: '', // 邮箱
+        password: '', // 密码
+        usid: '',
+        usname: '', // 姓名
+        roleIdList: [''] // 角色
+      },
+      repassword: '',
+      roleList: []
+    }
+  },
+  methods: {
+    search () {
+      this.q.pageNo = 1
+      this.sysUserList()
+    },
+    // 获取所有字典
+    sysUserList () {
+      this.$api.user.sysUserList(this.q).then(({ data }) => {
+        this.tableData = data.records
+        this.total = data.total
+        this.q.pageNo = data.current
+        this.q.pageSize = data.size
+        if (!data.records.length && this.q.pageNo !== 1) {
+          this.q.pageNo = 1
+          this.sysUserList()
+        }
+      })
+    },
+    // 重置
+    reset () {
+      this.q = {
+        account: '', // 用户名
+        roleName: '', // 角色名称
+        pageNo: 1,
+        pageSize: 10
+      }
+      this.total = 0
+      this.tableData = []
+      this.sysUserList()
+    },
+    // 单页数据量
+    handleSizeChange (val) {
+      this.q.pageSize = val
+      this.q.pageNo = 1
+      this.sysUserList()
+    },
+    // 第几页
+    handleCurrentChange (val) {
+      this.q.pageNo = val
+      this.sysUserList()
+    },
+    // 新增
+    add () {
+      this.mode = 'add'
+      this.form = {
+        account: '', // 用户名
+        cellPhoneNumber: '', // 手机号
+        department: '', // 部门
+        email: '', // 邮箱
+        password: '', // 密码
+        usid: '',
+        usname: '', // 姓名
+        roleIdList: [''] // 角色
+      }
+      this.repassword = ''
+      this.dialogUser = true
+    },
+    // // 启用/禁用
+    // sysUserIsUse (val, row) {
+    //   this.$confirm(val === '0' ? '此操作将禁用所选用户, 是否继续?' : '此操作将启用所选用户, 是否继续?', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.$api.user.sysUserIsUse({ USID: row.USID, type: val }).then(_ => {
+    //       this.$message.success('操作成功')
+    //       this.sysUserList()
+    //     })
+    //   }).catch(() => {
+    //     row.ISUSE = val === '1' ? '0' : '1'
+    //   })
+    // },
+    // 删除
+    deleteRow (row) {
+      this.deleteUser(row.USID)
+    },
+    // 新增用户
+    sysUserAddUser () {
+      const data = JSON.parse(JSON.stringify(this.form))
+      data.account = this.$JSEncrypt(data.account)
+      data.password = this.$JSEncrypt(data.password)
+      const jsonData = JSON.stringify(data)
+      this.$api.user.sysUserAddUser(Base64.encodeURI(jsonData)).then(_ => {
+        this.$message.success('操作成功')
+        this.dialogUser = false
+        this.reset()
+      })
+    },
+    // 编辑查看用户
+    openRowData (mode, row) {
+      if(mode=='view'){
+        this.$router.push({
+          path:'/system/dicdeatil',
+          query:{
+            id:this.$route.query.id,
+            pId:row.id
+          }
+        })
+      }else{
+        this.mode = mode
+        this.form = {
+          account: row.ACCOUNT, // 用户名
+          cellPhoneNumber: row.CELLPHONE_NUMBER, // 手机号
+          department: row.DEPARTMENT, // 部门
+          email: row.EMAIL, // 邮箱
+          password: '', // 密码
+          usid: row.USID, // 用户ID
+          usname: row.USNAME, // 姓名
+          roleIdList: [row.ROLEID] // 角色
+        }
+        this.repassword = ''
+        this.dialogUser = true
+      }
+
+    },
+
+    // 多选用户
+    getSelectUser () {
+      const users = this.$refs.userTable.getCheckboxRecords()
+      if (!users.length) {
+        return this.$message.warning('请选择数据后在进行操作')
+      }
+      const ids = users.map(item => item.USID).join(',')
+      this.deleteUser(ids)
+    },
+    // 删除用户
+    deleteUser (ids) {
+      this.$confirm('此操作将删除所选, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$api.user.sysUserDelete({ ids }).then(_ => {
+          this.$message.success('操作成功')
+          this.sysUserList()
+        })
+      })
+    },
+
+  },
+  computed: {
+    dialogTitle () {
+      switch (this.mode) {
+        case 'add':
+          return '新增'
+        case 'modify':
+          return '编辑'
+        case 'view':
+          return '查看'
+      }
+    }
+  },
+  created () {
+    this.sysUserList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.system-user {
+  .title {
+    border-bottom: 1px solid #EBEEF5;
+    height: 42px;
+    line-height: 42px;
+    margin: 0 18px 0 22px;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .search {
+    .search-box-left {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      label {
+        font-size: 14px;
+        font-weight: 400;
+        color: #595959;
+        margin-right: 5px;
+        padding-left: 22px;
+      }
+
+      .year {
+        ::v-deep .el-input__inner {
+          padding: 0 15px !important;
+        }
+      }
+
+      ::v-deep .el-input {
+        width: 167px;
+        margin-right: 5px;
+      }
+
+      @media screen and (max-width: 1366px) {
+        ::v-deep .el-input {
+          width: 135px;
+          margin-right: 5px;
+        }
+      }
+
+      ::v-deep .el-button {
+        float: right;
+      }
+    }
+
+    .search-box-right {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 14px;
+    }
+
+    .operate-box {
+      padding-left: 13px;
+      padding-bottom: 11px;
+      padding-top: 18px;
+    }
+  }
+
+  .table {
+    margin: 0 14px 0 13px;
+
+    ::v-deep .el-pagination {
+      margin-top: 13px;
+      padding-left: 20px;
+      padding-bottom: 10px;
+    }
+  }
+
+}
+
+.user-form {
+  padding-top: 26px;
+
+  ::v-deep .el-form {
+    padding-right: 79px;
+
+    .el-form-item {
+      margin-bottom: 10px;
+
+      .el-form-item__label {
+        height: 36px;
+        line-height: 36px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+      }
+
+      .el-input__inner {
+        min-height: 36px;
+      }
+
+      .el-input__inner,
+      .el-textarea__inner {
+        font-size: 14px;
+        font-weight: 400;
+        color: #434343;
+      }
+
+      .el-select {
+        width: 100%;
+      }
+
+      .el-date-editor {
+        width: 100%;
+
+        .el-input__inner {
+          padding-left: 15px;
+        }
+
+        .el-input__suffix {
+          font-size: 16px;
+          margin-top: 2px;
+        }
+      }
+
+      .icon-auth {
+        .el-icon-arrow-up {
+          margin-top: 2px;
+          transform: rotateZ(0) !important;
+        }
+
+        .el-icon-arrow-up:before {
+          content: '';
+          background: url("../../assets/imgs/icon-user.png") no-repeat center center;
+          display: inline-block;
+          width: 12px;
+          height: 14px;
+          background-size: 100% 100%;
+        }
+      }
+
+      .el-button {
+        width: 80px;
+        height: 36px;
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  .done {
+    text-align: center;
+    padding: 40px 0;
+
+    ::v-deep .el-button {
+      width: 80px;
+      height: 36px;
+      padding: 0;
+    }
+  }
+}
+</style>