添加修改删除用户 ok

web-vue/src/api/user.js

@@ -43,3 +43,12 @@ export function updateUser(params) {
     data: params
   })
 }
+
+// 删除用户
+export function deleteUser(id) {
+  return axios({
+    url: '/user/deleteUser',
+    method: 'post',
+    data: {id}
+  })
+}

web-vue/src/pages/role/index.vue

@@ -2,9 +2,10 @@
   <div>
     <div class="filter">
       <a-button type="primary" @click="handleAdd">新增</a-button>
+      <a-button type="primary" @click="loadData">刷新</a-button>
     </div>
     <!-- 数据表格 -->
-    <a-table :data-source="list" :columns="columns" bordered :rowKey="(record, index) => index">
+    <a-table :data-source="list" :loading="loading" :columns="columns" bordered :rowKey="(record, index) => index">
       <template slot="operation" slot-scope="text, record">
         <a-button type="primary">动态</a-button>
         <a-button type="primary" @click="handleEdit(record)">编辑</a-button>
@@ -31,6 +32,7 @@ import { getRoleList, getRoleFeature, editRole, deleteRole } from '../../api/rol
 export default {
   data() {
     return {
+      loading: false,
       list: [],
       // 权限列表
       featureList: [],
@@ -47,7 +49,7 @@ export default {
         {title: '角色名称', dataIndex: 'name'},
         {title: '授权人数', dataIndex: 'bindCount'},
         {title: '修改时间', dataIndex: 'updateTime'},
-        {title: '操作', dataIndex: 'operation', scopedSlots: {customRender: 'operation'}}
+        {title: '操作', dataIndex: 'operation', scopedSlots: {customRender: 'operation'}, width: '300px'}
       ],
       // 表单校验规则
       rules: {
@@ -64,10 +66,12 @@ export default {
   methods: {
     // 加载数据
     loadData() {
+      this.loading = true;
       getRoleList().then(res => {
         if (res.code === 200) {
           this.list = res.data;
         }
+        this.loading = false;
       })
     },
     // 加载角色权限
@@ -110,7 +114,6 @@ export default {
           }
         }
       });
-      console.log(this.checkedKeys)
       this.temp.id = record.id;
       this.temp.name = record.name;
       // 显示对话框
@@ -149,7 +152,6 @@ export default {
             checkedList.push(temp);
           }
         })
-        console.log(checkedList)
         this.temp.feature = JSON.stringify(checkedList);
         // 提交数据
         editRole(this.temp).then(res => {

web-vue/src/pages/user/index.vue

@@ -2,36 +2,35 @@
   <div>
     <div class="filter">
       <a-button type="primary" @click="handleAdd">新增</a-button>
+      <a-button type="primary" @click="loadData">刷新</a-button>
     </div>
     <!-- 数据表格 -->
-    <a-table :data-source="list" :columns="columns" bordered :rowKey="(record, index) => index">
+    <a-table :data-source="list" :loading="loading" :columns="columns" bordered :rowKey="(record, index) => index">
       <template slot="operation" slot-scope="text, record">
-        <a-button type="primary">动态</a-button>
         <a-button type="primary" @click="handleEdit(record)">编辑</a-button>
         <a-button type="danger" @click="handleDelete(record)">删除</a-button>
       </template>
     </a-table>
     <!-- 编辑区 -->
     <a-modal v-model="editUserVisible" width="600px" title="编辑用户" @ok="handleEditRoleOk" :maskClosable="false">
-      <a-form-model ref="editRoleForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+      <a-form-model ref="editUserForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-        <a-form-model-item label="登录名称" prop="name">
+        <a-form-model-item label="登录名称" prop="id">
-          <a-input v-model="temp.name" placeholder="创建之后不能修改"/>
+          <a-input v-model="temp.id" placeholder="创建之后不能修改"/>
         </a-form-model-item>
-        <a-form-model-item label="密码" prop="name">
+        <a-form-model-item label="密码" :prop="createOption ? 'password' : 'none'">
-          <a-input-password v-model="temp.name" placeholder="登录密码"/>
+          <a-input-password v-model="temp.password" :placeholder="createOption ? '登录密码' : '如果不修改密码则不用填写'"/>
         </a-form-model-item>
         <a-form-model-item label="昵称" prop="name">
           <a-input v-model="temp.name" placeholder="昵称"/>
         </a-form-model-item>
         <a-form-model-item label="勾选角色" prop="feature" class="feature">
           <a-transfer
-            :data-source="mockData"
+            :data-source="roleList"
             show-search
             :filter-option="filterOption"
             :target-keys="targetKeys"
             :render="item => item.title"
             @change="handleChange"
-            @search="handleSearch"
           />
         </a-form-model-item>
       </a-form-model>
@@ -39,37 +38,157 @@
   </div>
 </template>
 <script>
-import { getUserList } from '../../api/user';
+import { getUserList, addUser, updateUser, deleteUser } from '../../api/user';
+import { getRoleList } from '../../api/role';
+import { parseTime } from '../../utils/time';
 export default {
   data() {
     return {
+      loading: false,
       list: [],
+      roleList: [],
+      targetKeys: [],
       temp: {},
+      createOption: true,
       editUserVisible: false,
       columns: [
-        {title: '角色名称', dataIndex: 'name'},
+        {title: 'ID', dataIndex: 'id'},
-        {title: '授权人数', dataIndex: 'bindCount'},
+        {title: '昵称', dataIndex: 'name'},
-        {title: '修改时间', dataIndex: 'updateTime'},
+        {title: '邮箱', dataIndex: 'email'},
-        {title: '操作', dataIndex: 'operation', scopedSlots: {customRender: 'operation'}}
+        {title: '创建人', dataIndex: 'parent'},
-      ]
+        {title: '修改时间', dataIndex: 'modifyTime', customRender: (text) => {
+          return parseTime(text);
+        }},
+        {title: '操作', dataIndex: 'operation', scopedSlots: {customRender: 'operation'}, width: '200px'}
+      ],
+      // 表单校验规则
+      rules: {
+        id: [
+          { required: true, message: 'Please input login name', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: 'Please input nickName', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: 'Please input password', trigger: 'blur' }
+        ],
+      }
     }
   },
   created() {
     this.loadData();
+    this.loadRoleList();
   },
   methods: {
     // 加载数据
     loadData() {
+      this.loading = true;
       getUserList().then(res => {
         if (res.code === 200) {
           this.list = res.data;
         }
+        this.loading = false;
       })
     },
+    // 加载角色数据
+    loadRoleList() {
+      getRoleList().then(res => {
+        if (res.code === 200) {
+          res.data.forEach(element => {
+            this.roleList.push({key: element.id, title: element.name});
+          });
+        }
+      })
+    },
+    // 穿梭框筛选
+    filterOption(inputValue, option) {
+      return option.title.indexOf(inputValue) > -1;
+    },
+    // 穿梭框 change
+    handleChange(targetKeys) {
+      this.targetKeys = targetKeys;
+    },
     // 新增用户
     handleAdd() {
+      this.createOption = true;
       this.temp = {};
       this.editUserVisible = true;
+    },
+    // 修改用户
+    handleEdit(record) {
+      this.createOption = false;
+      this.temp = Object.assign(record);
+      // 设置选中 key
+      this.targetKeys = record.roles;
+      this.editUserVisible = true;
+    },
+    // 提交角色数据
+    handleEditRoleOk() {
+      // 检验表单
+      this.$refs['editUserForm'].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        // 判断是否选择了权限
+        if (this.targetKeys.length === 0) {
+          this.$notification.error({
+            message: '请选择权限',
+            duration: 2
+          });
+          return false;
+        }
+        // 设置选择的角色
+        this.temp.roles = JSON.stringify(this.targetKeys);
+        // 需要判断当前操作是【新增】还是【修改】
+        if (this.createOption) {
+          // 新增
+          addUser(this.temp).then(res => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              });
+              this.$refs['editUserForm'].resetFields();
+              this.editUserVisible = false;
+              this.loadData();
+            }
+          })
+        } else {
+          // 修改
+          updateUser(this.temp).then(res => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              });
+              this.$refs['editUserForm'].resetFields();
+              this.editUserVisible = false;
+              this.loadData();
+            }
+          })
+        }
+      })
+    },
+    // 删除用户
+    handleDelete(record) {
+      this.$confirm({
+        title: '系统提示',
+        content: '真的要删除用户么？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          // 删除
+          deleteUser(record.id).then((res) => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              });
+              this.loadData();
+            }
+          })
+        }
+      });
     }
   }
 }
@@ -78,4 +197,7 @@ export default {
 .filter {
   margin-bottom: 10px;
 }
+.ant-btn {
+  margin-right: 10px;
+}
 </style>

web-vue/src/utils/time.js

@@ -0,0 +1,41 @@
+/**
+ * 转换时间函数
+ * @param {*} time 
+ * @param {*} cFormat 
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  // 处理 time 参数
+  if (isNaN(Number(time)) === false) {
+    time = Number(time)
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}