ylyx-cli 1.0.0

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

@@ -0,0 +1,414 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input
+          v-model="query.blurry"
+          clearable
+          size="small"
+          placeholder="输入用户名搜索"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="crud.toQuery" />
+        <!--<date-range-picker v-model="query.createTime" class="date-item"/>-->
+        <el-select
+          v-model="query.enabled"
+          clearable
+          size="small"
+          placeholder="状态"
+          class="filter-item"
+          style="width: 90px"
+          @change="crud.toQuery">
+          <el-option
+            v-for="item in enabledTypeOptions"
+            :key="item.key"
+            :label="item.display_name"
+            :value="item.key" />
+        </el-select>
+        <el-select
+          filterable
+          v-model="query.hospitalId"
+          clearable
+          size="small"
+          placeholder="医院"
+          class="filter-item"
+          style="width: 170px"
+          @change="crud.toQuery">
+          <el-option
+            v-for="item in hospitalList"
+            :key="item.id"
+            :label="item.hospitalName"
+            :value="item.hospitalId" />
+        </el-select>
+
+        <el-select
+          v-model="query.roleId"
+          clearable
+          size="small"
+          placeholder="账号类型"
+          class="filter-item"
+          style="width: 130px"
+          @change="crud.toQuery">
+          <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.id" />
+        </el-select>
+        <rrOperation />
+      </div>
+      <crudOperation show="" :permission="permission" />
+    </div>
+    <!--表单渲染-->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.title"
+      width="570px">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="85px">
+        <el-form-item label="所属医院" prop="hospitalId">
+          <el-select
+            filterable
+            v-model="form.hospitalId"
+            style="width: 100%"
+            placeholder="请选择所属医院">
+            <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
+            :multiple-limit="multiplelimit"
+            style="width: 100%"
+            placeholder="请选择"
+            @remove-tag="deleteTag"
+            @change="changeRole">
+            <el-option
+              v-for="item in roles"
+              :key="item.name"
+              :disabled="level !== 1 && item.level <= level"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" />
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="form.name" />
+        </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="phone">
+          <el-input v-model.number="form.phone" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
+          >确认</el-button
+        >
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      style="width: 100%"
+      @selection-change="crud.selectionChangeHandler">
+      <el-table-column label="序号" type="index" align="center">
+        <template slot-scope="scope">
+           <span>{{ (crud.page.page - 1) * crud.page.size + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
+      <el-table-column :show-overflow-tooltip="true" prop="name" label="姓名" />
+      <el-table-column :show-overflow-tooltip="true" prop="roles[0].name" label="账号类型" />
+      <el-table-column :show-overflow-tooltip="true" prop="hospital.hospitalName" label="医院" />
+      <el-table-column
+        :show-overflow-tooltip="true"
+        prop="updateTime"
+        width="170"
+        label="更新时间" />
+      <el-table-column label="禁用/启用" align="center" prop="enabled">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.enabled"
+            :disabled="user.id === scope.row.id"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            @change="changeEnabled(scope.row, scope.row.enabled)" />
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        v-if="checkPer(['admin', 'user:edit', 'user:del'])"
+        label="操作"
+        width="150"
+        align="center"
+        fixed="right">
+        <template slot-scope="scope">
+          <urOperation
+            :data="scope.row"
+            :permission="permission"
+            :disabled-dle="scope.row.id === user.id" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import crudUser from '@/api/system/user';
+import { getHospitals } from '@/api/system/hospital';
+import { isvalidPhone } from '@/utils/validate';
+import { getAll, getLevel } from '@/api/system/role';
+import CRUD, { presenter, header, form, crud } from '@crud/crud';
+import rrOperation from '@crud/RR.operation';
+import crudOperation from '@crud/CRUD.operation';
+import urOperation from '@crud/user/UR.operation';
+import pagination from '@crud/Pagination';
+import DateRangePicker from '@/components/DateRangePicker';
+
+import { mapGetters } from 'vuex';
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+
+let userRoles = [];
+const defaultForm = {
+  id: null,
+  username: null,
+  name: null,
+  sex: null,
+  enabled: 'true',
+  roles: [],
+  phone: null,
+  hospitalId: null,
+  jobTitle: null,
+  position: null,
+  loginType: 1,
+};
+export default {
+  name: 'User',
+  components: { crudOperation, rrOperation, urOperation, pagination, DateRangePicker },
+  cruds() {
+    return CRUD({
+      title: '账号',
+      url: 'api/users',
+      crudMethod: { ...crudUser },
+      sort: ['updateTime,desc'],
+      params: { loginType: defaultForm.loginType },
+    });
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  // 数据字典
+  dicts: ['user_status', 'sex'],
+  data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'));
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'));
+      } else {
+        callback();
+      }
+    };
+    const validRole = (rule, value, callback) => {
+      if (this.roleDatas.length <= 0) {
+        callback(new Error('请选择账号类型'));
+      }
+      {
+        callback();
+      }
+    };
+    return {
+      height: document.documentElement.clientHeight - 180 + 'px;',
+      level: 3,
+      roles: [],
+      roleDatas: null, // 多选时使用
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
+      permission: {
+        add: ['admin', 'user:add'],
+        edit: ['admin', 'user:edit'],
+        del: ['admin', 'user:del'],
+      },
+      enabledTypeOptions: [
+        { key: 'true', display_name: '启用' },
+        { key: 'false', display_name: '禁用' },
+      ],
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+        ],
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+        ],
+        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
+        hospitalId: [{ required: true, message: '请选择医院', trigger: 'blur' }],
+        roleDatas: [
+          // {  required: true, message: '请选择账号类型', trigger: 'blur',type:'array' },
+          { required: true, trigger: 'blur', validator: validRole },
+        ],
+        phone: [{ required: true, trigger: 'blur', validator: validPhone }],
+      },
+      hospitalList: [],
+      multiplelimit: 1,
+    };
+  },
+  computed: {
+    ...mapGetters(['user']),
+  },
+  created() {
+    this.crud.msg.add = '新增成功，默认密码：Ypacs1026';
+    this.getRoles();
+  },
+  mounted: function () {
+    const that = this;
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 180 + 'px;';
+    };
+    this.getHospitalList();
+  },
+  methods: {
+    changeRole(value) {
+      userRoles = [];
+      value.forEach(function (data, index) {
+        const role = { id: data };
+        userRoles.push(role);
+      });
+      let _this = this;
+      setTimeout(function () {
+        _this.$refs.selectAppType.blur();
+      }, 50);
+    },
+    deleteTag(value) {
+      userRoles.forEach(function (data, index) {
+        if (data.id === value) {
+          userRoles.splice(index, value);
+        }
+      });
+    },
+    // 刷新 - 之前
+    [CRUD.HOOK.beforeRefresh](crud, form) {
+      crud.params.loginType = defaultForm.loginType;
+    },
+    // 新增与编辑  之后
+    [CRUD.HOOK.afterToCU](crud, form) {
+      form.enabled = form.enabled.toString();
+    },
+    // 新增前将多选的值设置为空
+    [CRUD.HOOK.beforeToAdd]() {
+      this.roleDatas = [];
+    },
+    // 初始化编辑时候的角色与岗位
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.roleDatas = [];
+      userRoles = [];
+      const _this = this;
+      form.roles.forEach(function (role, index) {
+        _this.roleDatas.push(role.id);
+        const rol = { id: role.id };
+        userRoles.push(rol);
+      });
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      if (this.roleDatas.length === 0) {
+        this.$message({
+          message: '账号类型不能为空',
+          type: 'warning',
+        });
+        return false;
+      }
+      crud.form.roles = userRoles;
+      return true;
+    },
+    // 改变状态
+    changeEnabled(data, val) {
+      this.$confirm(
+        '此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      )
+        .then(() => {
+          crudUser
+            .edit(data)
+            .then(res => {
+              this.crud.notify(
+                this.dict.label.user_status[val] + '成功',
+                CRUD.NOTIFICATION_TYPE.SUCCESS
+              );
+            })
+            .catch(() => {
+              data.enabled = !data.enabled;
+            });
+        })
+        .catch(() => {
+          data.enabled = !data.enabled;
+        });
+    },
+    // 获取弹窗内角色数据
+    getRoles() {
+      getAll({ loginType: defaultForm.loginType })
+        .then(res => {
+          this.roles = res;
+        })
+        .catch(() => {});
+    },
+    // 获取权限级别
+    getRoleLevel() {
+      getLevel()
+        .then(res => {
+          this.level = res.level;
+        })
+        .catch(() => {});
+    },
+    checkboxT(row, rowIndex) {
+      return row.id !== this.user.id;
+    },
+    /**
+     * 获取所有医院
+     */
+    getHospitalList() {
+      getHospitals().then(res => {
+        this.hospitalList = res.content;
+      });
+    },
+    sexFilter(sex) {
+      return this.dict.label.sex[sex];
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .vue-treeselect__control,
+::v-deep .vue-treeselect__placeholder,
+::v-deep .vue-treeselect__single-value {
+  height: 30px;
+  line-height: 30px;
+}
+</style>

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

@@ -0,0 +1,146 @@
+<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="475px"
+      @close="cancel">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
+        <el-form-item label="新邮箱" prop="email">
+          <el-input v-model="form.email" auto-complete="on" style="width: 200px" />
+          <el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{
+            buttonName
+          }}</el-button>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <el-input v-model="form.code" style="width: 320px" />
+        </el-form-item>
+        <el-form-item label="当前密码" prop="pass">
+          <el-input v-model="form.pass" type="password" style="width: 320px" />
+        </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>
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import { validEmail } from '@/utils/validate';
+import { updateEmail } from '@/api/system/user';
+import { resetEmail } from '@/api/system/code';
+export default {
+  props: {
+    email: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    const validMail = (rule, value, callback) => {
+      if (value === '' || value === null) {
+        callback(new Error('新邮箱不能为空'));
+      } else if (value === this.email) {
+        callback(new Error('新邮箱不能与旧邮箱相同'));
+      } else if (validEmail(value)) {
+        callback();
+      } else {
+        callback(new Error('邮箱格式错误'));
+      }
+    };
+    return {
+      loading: false,
+      dialog: false,
+      title: '修改邮箱',
+      form: { pass: '', email: '', code: '' },
+      user: { email: '', password: '' },
+      codeLoading: false,
+      buttonName: '获取验证码',
+      isDisabled: false,
+      time: 60,
+      rules: {
+        pass: [{ required: true, message: '当前密码不能为空', trigger: 'blur' }],
+        email: [{ required: true, validator: validMail, trigger: 'blur' }],
+        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
+      },
+    };
+  },
+  methods: {
+    cancel() {
+      this.resetForm();
+    },
+    sendCode() {
+      if (this.form.email && this.form.email !== this.email) {
+        this.codeLoading = true;
+        this.buttonName = '验证码发送中';
+        const _this = this;
+        resetEmail(this.form.email)
+          .then(res => {
+            this.$message({
+              showClose: true,
+              message: '发送成功，验证码有效期5分钟',
+              type: 'success',
+            });
+            this.codeLoading = false;
+            this.isDisabled = true;
+            this.buttonName = this.time-- + '秒后重新发送';
+            this.timer = window.setInterval(function () {
+              _this.buttonName = _this.time + '秒后重新发送';
+              --_this.time;
+              if (_this.time < 0) {
+                _this.buttonName = '重新发送';
+                _this.time = 60;
+                _this.isDisabled = false;
+                window.clearInterval(_this.timer);
+              }
+            }, 1000);
+          })
+          .catch(() => {
+            this.resetForm();
+            this.codeLoading = false;
+          });
+      }
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true;
+          updateEmail(this.form)
+            .then(res => {
+              this.loading = false;
+              this.resetForm();
+              this.$notify({
+                title: '邮箱修改成功',
+                type: 'success',
+                duration: 1500,
+              });
+              store.dispatch('GetInfo').then(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    resetForm() {
+      this.dialog = false;
+      this.$refs['form'].resetFields();
+      window.clearInterval(this.timer);
+      this.time = 60;
+      this.buttonName = '获取验证码';
+      this.isDisabled = false;
+      this.form = { pass: '', email: '', code: '' };
+    },
+  },
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,115 @@
+<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
+            v-model="form.oldPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPass">
+          <el-input
+            placeholder="请输入8-16位同时含有大、小写字母、数字的密码"
+            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>
+  </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 (!validatePassword(value)) {
+          callback(new Error('请输入8-16位同时含有大、小写字母、数字的密码'));
+        }
+        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: confirmPass, trigger: 'blur' }],
+        confirmPass: [{ required: true, validator: confirmPass, trigger: 'blur' }],
+      },
+    };
+  },
+  methods: {
+    cancel() {
+      this.resetForm();
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true;
+          updatePass(this.form)
+            .then(res => {
+              this.resetForm();
+              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;
+        }
+      });
+    },
+    resetForm() {
+      this.dialog = false;
+      this.$refs['form'].resetFields();
+      this.form = { oldPass: '', newPass: '', confirmPass: '' };
+    },
+  },
+};
+</script>
+
+<style scoped></style>