ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/system/user/center/updatePass.vue

@@ -0,0 +1,168 @@
+<template>
+  <div style="display: inline-block">
+    <el-dialog
+      :visible.sync="dialog"
+      :close-on-click-modal="false"
+      :before-close="cancel"
+      :title="title"
+      append-to-body
+      width="500px"
+      @close="cancel">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
+        <el-form-item label="旧密码" prop="oldPass">
+          <el-input
+            placeholder="请输入旧密码"
+            v-model="form.oldPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPass">
+          <el-input
+            placeholder="请输入新密码"
+            v-model="form.newPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px" />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPass">
+          <el-input
+            placeholder="请确认密码"
+            v-model="form.confirmPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="backDialog">
+      <div style="text-align: center">
+        <i class="el-icon-success" style="color: #1890ff; font-size: 47px"></i>
+        <p style="padding: 15px 0">
+          修改成功，系统将在<span style="color: #1890ff; padding: 0 5px; font-weight: 700">{{
+            count
+          }}</span
+          >秒后返回登录页面
+        </p>
+        <el-button type="primary" @click="backSubmit">立即登录</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import { validatePassword } from '@/utils/validate';
+import { updatePass } from '@/api/system/user';
+export default {
+  data() {
+    const confirmPass = (rule, value, callback) => {
+      if (value) {
+        if (this.form.newPass !== value) {
+          callback(new Error('两次输入的密码不一致'));
+        } else {
+          callback();
+        }
+      } else {
+        callback(new Error('请输入确认密码'));
+      }
+    };
+    const newPassPass = (rule, value, callback) => {
+      if (value) {
+        if (!validatePassword(value)) {
+          callback(new Error('密码必须含有大小写字母、数字，且不得少于8位'));
+        } else if (this.form.newPass !== value) {
+          callback(new Error('两次输入的密码不一致'));
+        } else {
+          callback();
+        }
+      } else {
+        callback(new Error('请输入新密码'));
+      }
+    };
+    return {
+      loading: false,
+      dialog: false,
+      title: '修改密码',
+      form: { oldPass: '', newPass: '', confirmPass: '' },
+      rules: {
+        oldPass: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+        newPass: [{ required: true, validator: newPassPass, trigger: 'blur' }],
+        confirmPass: [{ required: true, validator: confirmPass, trigger: 'blur' }],
+      },
+      backDialog: false,
+      count: '',
+    };
+  },
+  methods: {
+    cancel() {
+      this.resetForm();
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true;
+          updatePass(this.form)
+            .then(res => {
+              this.resetForm();
+              this.backDialog = true;
+              this.threeGo();
+              // this.$notify({
+              //   title: '密码修改成功，请重新登录',
+              //   type: 'success',
+              //   duration: 1500
+              // })
+              // setTimeout(() => {
+              //   store.dispatch('LogOut').then(() => {
+              //     location.reload() // 为了重新实例化vue-router对象 避免bug
+              //   })
+              // }, 1500)
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    backSubmit() {
+      store.dispatch('LogOut').then(() => {
+        location.reload(); // 为了重新实例化vue-router对象 避免bug
+      });
+    },
+    threeGo() {
+      const TIME_COUNT = 3;
+      if (!this.timer) {
+        this.count = TIME_COUNT;
+        this.show = false;
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.count--;
+          } else {
+            this.show = true;
+            clearInterval(this.timer);
+            this.timer = null;
+            // this.backDialog = false
+            //跳转的页面写在此处
+            store.dispatch('LogOut').then(() => {
+              location.reload(); // 为了重新实例化vue-router对象 避免bug
+            });
+          }
+        }, 1000);
+      }
+    },
+    resetForm() {
+      this.dialog = false;
+      this.$refs['form'].resetFields();
+      this.form = { oldPass: '', newPass: '', confirmPass: '' };
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/templates/vue-app/files/src/views/system/user/center.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="12" style="margin-left: 25%">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <el-form
+            ref="form"
+            :model="query"
+            :rules="rules"
+            label-width="70px"
+            style="margin: 0 50px">
+            <el-form-item label="用户名">
+              <el-input v-model="query.username" disabled clearable> </el-input>
+            </el-form-item>
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model="query.name" clearable> </el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model="query.phone" clearable> </el-input>
+            </el-form-item>
+            <el-form-item label="单位">
+              <el-input v-model="query.company" clearable> </el-input>
+            </el-form-item>
+            <el-form-item label="职务">
+              <el-input v-model="query.duty" clearable> </el-input>
+            </el-form-item>
+            <el-form-item style="position: relative">
+              <el-button type="primary" @click="doSubmit" :loading="saveLoading">保存</el-button>
+              <el-button
+                style="position: absolute; right: 0"
+                type="text"
+                @click="$refs.pass.dialog = true"
+                >修改密码</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+    <updatePass ref="pass" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import updatePass from './center/updatePass';
+import updateEmail from './center/updateEmail';
+import store from '@/store';
+import { isvalidPhone } from '@/utils/validate';
+import crud from '@/mixins/crud';
+import { editUser, getCenterUser, updateById } from '@/api/system/user';
+
+export default {
+  name: 'Center',
+  components: { updatePass, updateEmail },
+  mixins: [crud],
+  dicts: ['user_status', 'sex', 'job_title', 'position'],
+  data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (value && !isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      saveLoading: false,
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+        ],
+        phone: [{ validator: validPhone, trigger: 'blur' }],
+      },
+      hospitalList: [],
+      roles: [],
+      roleDatas: [],
+    };
+  },
+  computed: {
+    ...mapGetters(['user', 'updateAvatarApi', 'baseApi', 'fileUploadApi']),
+  },
+  created() {
+    // this.centerUser();
+    console.log(this.user);
+    this.query = {
+      id: this.user.id,
+      username: this.user.username,
+      company: this.user.company,
+      duty: this.user.duty,
+      name: this.user.name,
+      phone: this.user.phone,
+    };
+  },
+  methods: {
+    centerUser() {
+      getCenterUser().then(res => {
+        this.form = res;
+        let roles = [];
+        this.form.roles.forEach((role, index) => {
+          roles.push(role.id);
+        });
+        this.roleDatas = roles;
+        this.signPath = this.form.signPath;
+      });
+    },
+
+    doSubmit() {
+      if (this.$refs['form']) {
+        this.$refs['form'].validate(valid => {
+          if (valid) {
+            this.saveLoading = true;
+            updateById(this.query)
+              .then(() => {
+                // this.editSuccessNotify()
+                // store.dispatch('GetInfo').then(() => {})
+                this.$message({
+                  message: '保存成功',
+                  type: 'success',
+                });
+                store.dispatch('GetInfo').then(() => {});
+                this.saveLoading = false;
+              })
+              .catch(() => {
+                this.saveLoading = false;
+              });
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss"></style>