用户信息

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta http-equiv="cache-control" content="no-cache">
+    <title>河南星火燎原软件科技有限公司</title>
     <link rel="stylesheet" href="/librarys/view-design@4.3.2/iview.css">
     <link rel="stylesheet" href="/iconfont/iconfont.css">
     <script src="/config.js"></script>

src/App.vue

@@ -46,7 +46,7 @@ body,
   -khtml-user-select: none;
   user-select: none;
   position: relative;
-  background: #f8f8fd;
+  background: #fff;
   box-sizing: border-box;
   font-family: "Microsoft YaHei", "微软雅黑" !important;
   // -webkit-user-select: text;
@@ -96,4 +96,35 @@ body,
 .ivu-page-item-jump-prev:after {
   content: "\2022\2022\2022" !important;
 }
+.modal1 {
+  .ivu-modal {
+    width: 50% !important;
+    .ivu-modal-content {
+      border-radius: 0;
+      .ivu-modal-header {
+        background: #2d8cf0;
+        padding: 13px 16px !important;
+        .ivu-modal-header-inner {
+          font-size: 18px !important;
+          color: #ffffff;
+        }
+      }
+      .ivu-modal-close {
+        top: 4px;
+        .ivu-icon-ios-close:before {
+          color: #ffffff;
+          font-size: 36px;
+          font-weight: 600;
+        }
+      }
+      .ivu-modal-footer {
+        border-top: none;
+      }
+    }
+  }
+}
+.ivu-table-header thead tr th,
+.ivu-table-cell {
+  text-align: center;
+}
 </style>

src/api/index.js

@@ -7,3 +7,31 @@ export const user_login = (data) =>
     method: "post",
     data
   });
+// 用户列表
+export const user_list = (data) =>
+  request({
+    url: window._config.baseUrl + "user/list",
+    method: "post",
+    data
+  });
+// 用户删除
+export const user_del = (data) =>
+  request({
+    url: window._config.baseUrl + "user/del",
+    method: "post",
+    data
+  });
+// 用户保存
+export const user_save = (data) =>
+  request({
+    url: window._config.baseUrl + "user/save",
+    method: "post",
+    data
+  });
+// 用户更新
+export const user_update = (data) =>
+  request({
+    url: window._config.baseUrl + "user/update",
+    method: "post",
+    data
+  });

src/views/login/index.vue

@@ -55,7 +55,8 @@ export default {
           {
             min: 4,
             max: 18,
-            message: "账号长度为4~18个字符"
+            message: "账号长度为4~18个字符",
+            trigger: "blur"
           }
         ],
         loginpwd: [
@@ -63,7 +64,8 @@ export default {
           {
             min: 6,
             max: 16,
-            message: "密码长度为6~16个字符"
+            message: "密码长度为6~16个字符",
+            trigger: "blur"
           }
         ]
       }
@@ -78,7 +80,7 @@ export default {
             loginpwd: this.loginInfo.loginpwd
           })
             .then((res) => {
-              if (res.code == 0) {
+              if (res.code === 0) {
                 localStorage.setItem("xhWebAdminUser", JSON.stringify(res.obj));
                 this.$router.replace({ path: "/users" });
               } else {

src/views/users/index.vue

@@ -1,14 +1,415 @@
 <template>
-  <div>user</div>
+  <div>
+    <div class="searchBox">
+      <div>
+        <RadioGroup v-model="userSearch.userstate" @on-change="searchList()">
+          <Radio :label="0">全部</Radio>
+          <Radio :label="1">正常</Radio>
+          <Radio :label="10">已删除</Radio>
+        </RadioGroup>
+        <Input
+          v-model="userSearch.username"
+          @on-enter="searchList()"
+          placeholder="请输入用户姓名"
+          style="margin: 0 16px; width: 200px"
+          clearable
+        />
+        <Button type="primary" @click="searchList()">搜索</Button>
+      </div>
+      <div>
+        <Button type="primary" @click="toAdd()">添加</Button>
+      </div>
+    </div>
+    <Table border :columns="userColumns" :data="userSearch.list">
+      <template slot-scope="{ row }" slot="userstateSlot">
+        <span>{{ row.userstate === 1 ? "正常" : "已删除" }}</span>
+      </template>
+      <template slot-scope="{ row }" slot="createtimeSlot">
+        <span>{{ dateFormat(row.createtime) }}</span>
+      </template>
+      <template slot-scope="{ row }" slot="actionSlot">
+        <div v-if="row.userstate === 1">
+          <span
+            style="color: #2d8cf0; cursor: pointer"
+            @click="toModifyUser(row)"
+            >修改</span
+          >
+          <span style="margin: 0 10px; color: #2d8cf0">|</span>
+          <span
+            style="color: #ff001e; cursor: pointer"
+            @click="toDelUser(row.userid)"
+            >删除</span
+          >
+        </div>
+      </template>
+    </Table>
+    <div class="foot_page" v-if="userSearch.total > 0">
+      <Page
+        :total="userSearch.total"
+        @on-change="changePage"
+        :current="userSearch.page"
+        show-total
+      ></Page>
+    </div>
+    <Modal
+      v-model="userAddForm.show"
+      class="modal1"
+      :mask-closable="false"
+      title="添加用户信息"
+    >
+      <Form
+        :label-width="90"
+        label-position="right"
+        ref="userAddForm"
+        :rules="addFormRules"
+        :model="userAddForm"
+      >
+        <FormItem label="用户姓名" prop="username">
+          <Input v-model="userAddForm.username" placeholder="请输入用户姓名" />
+        </FormItem>
+        <FormItem label="登录账号" prop="loginname">
+          <Input v-model="userAddForm.loginname" placeholder="请输入登录账号" />
+        </FormItem>
+        <FormItem label="登录密码" prop="loginpwd">
+          <Input v-model="userAddForm.loginpwd" placeholder="请输入登录密码" />
+        </FormItem>
+        <FormItem label="手机号" prop="userphone">
+          <Input v-model="userAddForm.userphone" placeholder="请输入手机号" />
+        </FormItem>
+      </Form>
+      <div slot="footer" style="text-align: right">
+        <Button @click="userAddForm.show = false">取消</Button>
+        <Button @click="toSaveAdd()" type="primary">保存</Button>
+      </div>
+    </Modal>
+    <Modal
+      v-model="userModifyForm.show"
+      class="modal1"
+      :mask-closable="false"
+      title="修改用户信息"
+    >
+      <Form
+        :label-width="90"
+        label-position="right"
+        ref="userModifyForm"
+        :rules="modifyFormRules"
+        :model="userModifyForm"
+      >
+        <FormItem label="用户姓名" prop="username">
+          <Input
+            v-model="userModifyForm.username"
+            placeholder="请输入用户姓名"
+          />
+        </FormItem>
+        <FormItem label="登录账号" prop="loginname">
+          <Input
+            v-model="userModifyForm.loginname"
+            placeholder="请输入登录账号"
+          />
+        </FormItem>
+        <FormItem label="登录密码" prop="loginpwd">
+          <Input
+            v-model="userModifyForm.loginpwd"
+            placeholder="请输入登录密码"
+          />
+        </FormItem>
+        <FormItem label="手机号" prop="userphone">
+          <Input
+            v-model="userModifyForm.userphone"
+            placeholder="请输入手机号"
+          />
+        </FormItem>
+      </Form>
+      <div slot="footer" style="text-align: right">
+        <Button @click="userModifyForm.show = false">取消</Button>
+        <Button @click="toSaveModifyUser()" type="primary">保存</Button>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script>
+import { user_list, user_del, user_save, user_update } from "@/api";
+import { dateFormat } from "@/utils";
 export default {
   data() {
-    return {};
+    // 手机号验证
+    const phoneCheck = async (rule, value, callback) => {
+      var filter = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
+      if (!value) {
+        return;
+      }
+      let blnTest = filter.test(value);
+      if (!blnTest) {
+        return callback(new Error("手机号码格式不正确"));
+      }
+    };
+    return {
+      dateFormat,
+      userSearch: {
+        page: 1,
+        size: 10,
+        userstate: 0,
+        username: "",
+        total: 0,
+        list: [],
+      },
+      userColumns: [
+        {
+          title: "序号",
+          width: 70,
+          render: (h, params) => {
+            return h(
+              "span",
+              params.index +
+                (this.userSearch.page - 1) * this.userSearch.size +
+                1
+            );
+          },
+        },
+        {
+          title: "用户姓名",
+          key: "username",
+        },
+        {
+          title: "登录账号",
+          key: "loginname",
+        },
+        {
+          title: "手机号",
+          key: "userphone",
+        },
+        {
+          title: "状态",
+          slot: "userstateSlot",
+          width: 90,
+        },
+        {
+          title: "创建人",
+          key: "createname",
+          width: 120,
+        },
+        {
+          title: "创建时间",
+          slot: "createtimeSlot",
+          width: 200,
+        },
+        {
+          title: "操作",
+          slot: "actionSlot",
+          width: 150,
+        },
+      ],
+      userAddForm: {
+        show: false,
+        username: "",
+        loginname: "",
+        loginpwd: "",
+        userphone: null,
+      },
+      addFormRules: {
+        username: [
+          {
+            required: true,
+            message: "用户姓名不能为空",
+            trigger: "blur",
+          },
+        ],
+        loginname: [
+          {
+            required: true,
+            message: "登录账号不能为空",
+            trigger: "blur",
+          },
+          {
+            min: 4,
+            max: 18,
+            message: "登录账号长度为4~18个字符",
+            trigger: "blur",
+          },
+        ],
+        loginpwd: [
+          {
+            required: true,
+            message: "登录密码不能为空",
+            trigger: "blur",
+          },
+          {
+            min: 6,
+            max: 16,
+            message: "登录密码长度为6~16个字符",
+            trigger: "blur",
+          },
+        ],
+        userphone: [{ validator: phoneCheck, trigger: "blur" }],
+      },
+      userModifyForm: {
+        show: false,
+        userid: null,
+        username: "",
+        loginname: "",
+        loginpwd: "",
+        userphone: null,
+      },
+      modifyFormRules: {
+        username: [
+          {
+            required: true,
+            message: "用户姓名不能为空",
+            trigger: "blur",
+          },
+        ],
+        loginname: [
+          {
+            required: true,
+            message: "登录账号不能为空",
+            trigger: "blur",
+          },
+          {
+            min: 4,
+            max: 18,
+            message: "登录账号长度为4~18个字符",
+          },
+        ],
+        loginpwd: [
+          // {
+          //   required: true,
+          //   message: "登录密码不能为空",
+          //   trigger: "blur",
+          // },
+          {
+            min: 6,
+            max: 16,
+            message: "登录密码长度为6~16个字符",
+            trigger: "blur",
+          },
+        ],
+        userphone: [{ validator: phoneCheck, trigger: "blur" }],
+      },
+      userInfo: {},
+    };
+  },
+  created() {
+    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
+    this.getUsersList();
+  },
+  methods: {
+    searchList() {
+      this.userSearch.page = 1;
+      this.getUsersList();
+    },
+    getUsersList() {
+      user_list({
+        page: this.userSearch.page,
+        size: this.userSearch.size,
+        userstate: this.userSearch.userstate,
+        username: this.userSearch.username,
+      })
+        .then((data) => {
+          if (data.code === 0) {
+            this.userSearch.total = data.obj.total;
+            this.userSearch.list = data.obj.list;
+          } else {
+            this.userSearch.total = 0;
+            this.userSearch.list = [];
+            this.$Message.error(data.msg);
+          }
+        })
+        .catch(() => {});
+    },
+    toDelUser(userid) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "您确定删除选中数据吗?",
+        onOk: () => {
+          user_del({ userid }).then((res) => {
+            if (res.code == 0) {
+              this.$Message.success(res.msg);
+              this.searchList();
+            }
+          });
+        },
+        onCancel: () => {},
+      });
+    },
+    toAdd() {
+      this.userAddForm = {
+        show: true,
+        username: "",
+        loginname: "",
+        loginpwd: "",
+        userphone: null,
+      };
+    },
+    toSaveAdd() {
+      this.$refs.userAddForm.validate((valid) => {
+        if (valid) {
+          user_save({
+            username: this.userAddForm.username,
+            loginname: this.userAddForm.loginname,
+            loginpwd: this.userAddForm.loginpwd,
+            createid: this.userInfo.userid,
+            userphone: this.userAddForm.userphone,
+          }).then((data) => {
+            if (data.code === 0) {
+              this.userAddForm.show = false;
+              this.$Message.success(data.msg);
+              this.searchList();
+            } else {
+              this.$Message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    toModifyUser(user) {
+      this.userModifyForm = {
+        show: true,
+        userid: user.userid,
+        username: user.username,
+        loginname: user.loginname,
+        loginpwd: user.loginpwd,
+        userphone: user.userphone,
+      };
+    },
+    toSaveModifyUser() {
+      this.$refs.userModifyForm.validate((valid) => {
+        if (valid) {
+          user_update({
+            username: this.userModifyForm.username,
+            loginname: this.userModifyForm.loginname,
+            loginpwd: this.userModifyForm.loginpwd,
+            createid: this.userInfo.userid,
+            userphone: this.userModifyForm.userphone,
+            userid: this.userModifyForm.userid
+          }).then((data) => {
+            if (data.code === 0) {
+              this.userModifyForm.show = false;
+              this.$Message.success(data.msg);
+              this.searchList();
+            } else {
+              this.$Message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    changePage(page) {
+      this.userSearch.page = page;
+      this.getUsersList();
+    },
   },
-  methods: {}
 };
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.searchBox {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+.foot_page {
+  padding: 16px 0;
+  text-align: right;
+}
+</style>