ylyx-cli 1.0.0

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

@@ -0,0 +1,351 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div style="text-align: center">
+              <div class="el-upload">
+                <img
+                  :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar"
+                  title="点击上传头像"
+                  class="avatar"
+                  @click="toggleShow" />
+                <myUpload
+                  v-model="show"
+                  :headers="headers"
+                  :url="updateAvatarApi"
+                  @crop-upload-success="cropUploadSuccess" />
+              </div>
+            </div>
+            <ul class="user-info">
+              <li>
+                <div style="height: 100%">
+                  <svg-icon icon-class="login" /> 用户名
+                  <div class="user-right">{{ user.username }}</div>
+                </div>
+              </li>
+              <li>
+                <svg-icon icon-class="user1" /> 姓名
+                <div class="user-right">{{ user.name }}</div>
+              </li>
+              <!--              <li><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>-->
+              <li>
+                <svg-icon icon-class="phone" /> 手机号码
+                <div class="user-right">{{ user.phone }}</div>
+              </li>
+              <!--              <li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>-->
+              <li>
+                <svg-icon icon-class="anq" /> 安全设置
+                <div class="user-right">
+                  <a @click="$refs.pass.dialog = true">修改密码</a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
+        <!--    用户资料    -->
+        <el-card class="box-card">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="用户资料" name="first">
+              <el-form
+                ref="form"
+                :model="form"
+                :rules="rules"
+                style="margin-top: 10px"
+                size="small"
+                label-width="80px">
+                <el-form-item label="用户名" prop="username">
+                  <el-input v-model="form.username" style="width: 35%" :disabled="true" />
+                </el-form-item>
+                <el-form-item label="姓名" prop="name">
+                  <el-input v-model="form.name" style="width: 35%" />
+                  <span style="color: #c0c0c0; margin-left: 10px">用户姓名不作为登录使用</span>
+                </el-form-item>
+                <el-form-item label="手机号" prop="phone">
+                  <el-input v-model="form.phone" style="width: 35%" />
+                </el-form-item>
+                <el-form-item label="性别" prop="sex">
+                  <el-radio-group v-model="form.sex" style="width: 178px">
+                    <el-radio label="M">男</el-radio>
+                    <el-radio label="F">女</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="医院" prop="hospitalId">
+                  <el-select v-model="form.hospitalId" style="width: 35%" :disabled="true">
+                    <el-option
+                      v-for="item in hospitalList"
+                      :key="item.id"
+                      :label="item.hospitalName"
+                      :value="item.hospitalId" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="角色" prop="roleDatas">
+                  <el-select
+                    ref="selectAppType"
+                    v-model="roleDatas"
+                    multiple
+                    style="width: 350px"
+                    :disabled="true">
+                    <el-option
+                      v-for="item in roles"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="职称" prop="jobTitle">
+                  <el-select v-model="form.jobTitle" style="width: 350px" placeholder="请选择职称">
+                    <el-option
+                      v-for="item in dict.job_title"
+                      :key="item.id"
+                      :label="item.label"
+                      :value="item.value" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="职位" prop="position">
+                  <el-select v-model="form.position" style="width: 350px" placeholder="请选择职位">
+                    <el-option
+                      v-for="item in dict.position"
+                      :key="item.id"
+                      :label="item.label"
+                      :value="item.value" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="签名">
+                  <el-upload
+                    ref="upload"
+                    :show-file-list="false"
+                    :auto-upload="true"
+                    :action="fileUploadApi + '?prefix=signature'"
+                    :headers="headers"
+                    :on-success="handleAvatarSuccess"
+                    :before-upload="beforeAvatarUpload">
+                    <img
+                      v-if="signPath"
+                      :src="this.baseApi + '/file/' + signPath"
+                      class="avatar"
+                      v-model="form.signPath" />
+                    <i v-else class="el-icon-plus upload-icon"></i>
+                  </el-upload>
+                </el-form-item>
+                <el-form-item label="">
+                  <el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit"
+                    >保存配置</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <!--    操作日志    -->
+            <el-tab-pane label="操作日志" name="second">
+              <el-table v-loading="loading" :data="data" style="width: 100%">
+                <el-table-column prop="description" label="行为" />
+                <el-table-column prop="requestIp" label="IP" />
+                <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
+                <el-table-column prop="browser" label="浏览器" />
+                <el-table-column prop="time" label="请求耗时" align="center">
+                  <template slot-scope="scope">
+                    <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+                    <el-tag v-else-if="scope.row.time <= 1000" type="warning"
+                      >{{ scope.row.time }}ms</el-tag
+                    >
+                    <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column align="right">
+                  <template slot="header">
+                    <div style="display: inline-block; float: right; cursor: pointer" @click="init">
+                      创建日期<i class="el-icon-refresh" style="margin-left: 40px" />
+                    </div>
+                  </template>
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.createTime }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!--分页组件-->
+              <el-pagination
+                :total="total"
+                :current-page="page + 1"
+                style="margin-top: 8px"
+                layout="total, prev, pager, next, sizes"
+                @size-change="sizeChange"
+                @current-change="pageChange" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!--    <updateEmail ref="email" :email="user.email" />-->
+    <updatePass ref="pass" />
+  </div>
+</template>
+
+<script>
+import myUpload from 'vue-image-crop-upload';
+import { getHospitals } from '@/api/system/hospital';
+import { getAll, getLevel } from '@/api/system/role';
+import { mapGetters } from 'vuex';
+import updatePass from './center/updatePass';
+import updateEmail from './center/updateEmail';
+import { getToken } from '@/utils/auth';
+import store from '@/store';
+import { isvalidPhone } from '@/utils/validate';
+import crud from '@/mixins/crud';
+import { editUser, getCenterUser } from '@/api/system/user';
+import Avatar from '@/assets/images/avatar.png';
+
+export default {
+  name: 'Center',
+  components: { updatePass, updateEmail, myUpload },
+  mixins: [crud],
+  dicts: ['user_status', 'sex', 'job_title', 'position'],
+  data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'));
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      show: false,
+      Avatar: Avatar,
+      activeName: 'first',
+      saveLoading: false,
+      headers: {
+        Authorization: getToken(),
+      },
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+        ],
+        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
+      },
+      hospitalList: [],
+      roles: [],
+      roleDatas: [],
+      signPath: null,
+    };
+  },
+  computed: {
+    ...mapGetters(['user', 'updateAvatarApi', 'baseApi', 'fileUploadApi']),
+  },
+  created() {
+    this.getRoles();
+    this.getHospitalList();
+    this.centerUser();
+  },
+  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;
+      });
+    },
+    /**
+     * 获取所有医院
+     */
+    getHospitalList() {
+      getHospitals().then(res => {
+        this.hospitalList = res.content;
+      });
+    },
+    // 获取弹窗内角色数据
+    getRoles() {
+      getAll({ loginType: this.user.loginType })
+        .then(res => {
+          this.roles = res;
+        })
+        .catch(() => {});
+    },
+    toggleShow() {
+      this.show = !this.show;
+    },
+    handleClick(tab, event) {
+      if (tab.name === 'second') {
+        this.init();
+      }
+    },
+    beforeInit() {
+      this.url = 'api/logs/user';
+      return true;
+    },
+    cropUploadSuccess(jsonData, field) {
+      store.dispatch('GetInfo').then(() => {});
+    },
+    doSubmit() {
+      if (this.$refs['form']) {
+        this.$refs['form'].validate(valid => {
+          if (valid) {
+            this.saveLoading = true;
+            editUser(this.form)
+              .then(() => {
+                this.editSuccessNotify();
+                store.dispatch('GetInfo').then(() => {});
+                this.saveLoading = false;
+              })
+              .catch(() => {
+                this.saveLoading = false;
+              });
+          }
+        });
+      }
+    },
+    handleAvatarSuccess(source) {
+      this.signPath = source.datas;
+      this.form.signPath = source.datas;
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
+        this.$message.error('上传头像图片只能是 JPG、PNG格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+        return false;
+      }
+      return file.type && isLt2M;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+.user-info {
+  padding-left: 0;
+  list-style: none;
+  li {
+    border-bottom: 1px solid #f0f3f4;
+    padding: 11px 0;
+    font-size: 13px;
+  }
+  .user-right {
+    float: right;
+    a {
+      color: #317ef3;
+    }
+  }
+}
+</style>