11

src/views/personnel/user.vue

@@ -16,7 +16,9 @@
             @editor="editor"
             @delete="toDelete"
             @frozen="frozen"
-            @thaw="thaw"
+            @abnormal="abnormal"
+            @use="use"
+            :toFormat="roleSelect"
           ></data-table>
         </el-col>
       </el-col>
@@ -25,19 +27,14 @@
       <!-- 物流里面的:data要换成v-model -->
       <data-form v-model="form" :fields="fields" @save="turnSave" :rules="rules" status-icon>
         <template #options="{item}">
-          <template v-if="item.model == 'department'">
-            <el-option v-for="(item, index) in departOptions" :key="index" :value="item.name" :label="item.name"></el-option>
-          </template>
-          <template v-if="item.model == 'sex'">
-            <el-option v-for="(item, index) in sexOptions" :key="index" :value="item.name" :label="item.name"></el-option>
+          <template v-if="item.model == 'role'">
+            <el-option v-for="(item, index) in roleOptions" :key="index" :value="item.type" :label="item.name"></el-option>
           </template>
         </template>
         <template #custom="{item}">
           <template v-if="item.model == 'password'">
-            <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
-          </template>
-          <template v-if="item.model == 'againpassword'">
-            <el-input type="password" v-model="form.againpassword" autocomplete="off"></el-input>
+            <el-input type="password" v-model="form.password"></el-input>
+            <el-alert title="如果重新输入密码则会修改密码" type="success" v-if="form.id"> </el-alert>
           </template>
         </template>
       </data-form>
@@ -47,6 +44,8 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: user } = createNamespacedHelpers('user');
+const { mapActions: role } = createNamespacedHelpers('role');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -56,64 +55,35 @@ export default {
   components: {},
   data: function() {
     let _data = this;
-    // var validatePass = (rule, value, callback) => {
-    //   if (value === '') {
-    //     callback(new Error('请输入密码'));
-    //   } else {
-    //     if (this.ruleForm.checkPass !== '') {
-    //       this.$refs.ruleForm.validateField('checkPass');
-    //     }
-    //     callback();
-    //   }
-    // };
-    // var validatePass2 = (rule, value, callback) => {
-    //   if (value === '') {
-    //     callback(new Error('请再次输入密码'));
-    //   } else if (value !== this.ruleForm.pass) {
-    //     callback(new Error('两次输入密码不一致!'));
-    //   } else {
-    //     callback();
-    //   }
-    // };
     return {
-      list: [
-        {
-          name: '张三',
-          id: '1111',
-          flag: '0',
-          department: '测试三',
-          sex: '女',
-          password: '123',
-          againpassword: '123',
-        },
-        {
-          name: '李四',
-          id: '2222',
-          flag: '0',
-          department: '测试一',
-          sex: '男',
-          password: '123',
-          againpassword: '123',
-        },
-      ],
+      list: [],
       total: 0,
       opera: [
         { label: '编辑', method: 'editor' },
         { label: '删除', method: 'delete' },
+        {
+          label: '使用中',
+          method: 'use',
+          display: i => {
+            if (i.status == '0') {
+              return true;
+            }
+          },
+        },
         {
           label: '冻结',
           method: 'frozen',
           display: i => {
-            if (i.flag == '0') {
+            if (i.status == '1') {
               return true;
             }
           },
         },
         {
-          label: '解冻',
-          method: 'thaw',
+          label: '异常',
+          method: 'abnormal',
           display: i => {
-            if (i.flag == '1') {
+            if (i.status == '2') {
               return true;
             }
           },
@@ -122,35 +92,72 @@ export default {
       dialog: false,
       form: {},
       fields: [
-        { label: '姓名', model: 'name' },
-        { label: '登录id', model: 'id' },
+        { label: '用户名', model: 'name' },
+        { label: '登录id', model: 'login_id' },
         { label: '密码', model: 'password', notable: true, custom: 'true' },
-        { label: '确认密码', model: 'againpassword', notable: true, custom: 'true' },
-        { label: '部门', model: 'department', type: 'select', notable: true },
-        { label: '性别', model: 'sex', type: 'select', notable: true },
+        { label: '状态', model: 'status', notable: true, noform: true },
+        { label: '角色', model: 'role', type: 'select', format: true },
       ],
-      departOptions: [{ name: '测试一' }, { name: '测试二' }, { name: '测试三' }],
-      sexOptions: [{ name: '男' }, { name: '女' }],
+      roleOptions: [],
       rules: {
-        id: [{ required: true, message: '请输入登录id', trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-        againpassword: [{ required: true, message: '请再一次输入密码', trigger: 'blur' }],
+        login_id: [{ required: true, message: '请输入登录id', trigger: 'blur' }],
       },
     };
   },
-  created() {},
+  created() {
+    this.search();
+  },
   methods: {
-    turnSave(data) {
-      const res = data;
-      if (res.data.password != res.data.againpassword) {
-        this.$message('两次密码不一致，请重新输入');
+    ...user(['query', 'create', 'update', 'delete']),
+    ...role({ roleQuery: 'query' }),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        const { data, total } = res;
+        this.$set(this, `list`, data);
+        this.$set(this, `total`, total);
+      }
+      //查角色列表
+      const res1 = await this.roleQuery();
+      if (this.$checkRes(res1)) {
+        this.$set(this, `roleOptions`, res1.data);
+      }
+    },
+    async turnSave({ data }) {
+      if (data.id) {
+        const res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
       } else {
-        this.dialog = false;
+        const res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '创建成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
       }
     },
     toClose() {
-      this.dialog = false;
       this.form = {};
+      this.dialog = false;
+      this.search();
     },
     //编辑 解构出来
     editor({ data }) {
@@ -158,24 +165,47 @@ export default {
       this.dialog = true;
     },
     //删除
-    toDelete(data) {
-      console.log(data);
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.toClose();
+      } else {
+        this.$message({
+          message: res.errmsg,
+          type: 'error',
+        });
+      }
     },
     //冻结 因为data里面是个对象，里面有data还有index等别的数据，所以在接收参数的时候接收对象形式的data就行
     frozen({ data }) {
-      data.flag = '1';
+      data.status = '0';
     },
-    //解冻
-    thaw({ data }) {
-      data.flag = '0';
+    //使用中
+    use({ data }) {
+      data.status = '1';
     },
-    //按钮显示
-    display() {
-      console.log('lll');
+    abnormal({ data }) {
+      console.log('异常');
+    },
+    roleSelect({ model, value }) {
+      if (model == 'role') {
+        let arr = this.roleOptions.find(i => i.type == value);
+        if (arr) return arr.name;
+      }
     },
   },
   computed: {
     ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
   },
 };
 </script>