diagnosis.admin/src/views/system/Help.vue

<template>
  <div class="help">
    <div class="download">
      <a
        :href="downloadUrl+'/file/home/sunplus/uploadPath/download/czsc.docx'"
        download="中医智能辅助开方系统操作手册.docx"
      >系统操作手册下载</a>
    </div>

    <div class="change-pas flex-plane-center-l">
      <span>修改密码：</span>
      <div class="right">
        <div>
          <el-input size="mini" placeholder="请输入身份证号" v-model="id"></el-input>
        </div>
        <div>
          <el-input size="mini" placeholder="请输入原密码" v-model="pas"></el-input>
        </div>
        <div>
          <el-input size="mini" placeholder="请输入新密码" v-model="newPas"></el-input>
        </div>
        <div class="tip">密码为数字、大写字母、小写字母组合两种以上,8-18位</div>
        <div>
          <el-input size="mini" placeholder="请再次输入新密码" v-model="newPas1"></el-input>
        </div>
        <div class="tip">密码为数字、大写字母、小写字母组合两种以上,8-18位</div>
        <!-- <div class="sure flex-center" @click="sureToChange">确认修改</div> -->
      </div>
    </div>
    <div class="change-pas flex-plane-center-l">
      <span style="opacity:0;">修改密码：</span>
      <el-button size="mini" type="primary" @click="sureToChange">确认修改</el-button>
      <el-button size="mini" type="danger" @click="logOut">退出登录</el-button>
      <!-- <div class="sure flex-center bg-red" @click="logOut()">退出登录</div> -->
    </div>
    <div style="margin: 12px 0;">
      <div>
        <span>版本更新记录：</span>
        <el-button v-if="logEditable" type="primary" size="small" icon="el-icon-plus" circle
                   @click="start();"
        ></el-button>
      </div>
      <div style="margin-top: 16px;max-width: 800px;">
        <el-timeline v-loading="logLoading">
          <template v-for="item in log">
            <el-timeline-item v-if="item.id === logEdit" :key="item.id" icon="el-icon-edit">
              <el-date-picker v-model="logModel.time" placeholder="版本更新时间" size="small"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"
                              :disabled="logSaving"
              ></el-date-picker>
              <el-card style="margin-top: 12px;">
                <el-input v-model="logModel.content" placeholder="版本更新内容"
                          type="textarea" :autosize="{ minRows: 2}"
                          :disabled="logSaving"
                ></el-input>
                <div style="margin-top: 12px; text-align: right;">
                  <el-button size="small" :disabled="logSaving" @click="logEdit = false;logModel.content=''">取消
                  </el-button>
                  <el-button type="primary" size="small" :disabled="logSaving"
                             @click="setLogFile();logModel.content=''">保存
                  </el-button>
                </div>
              </el-card>
            </el-timeline-item>
            <el-timeline-item v-else type="info" placement="top" :timestamp="item.title">
              <el-card style="position: relative">
                <div style="white-space: pre;line-height: 1.75">{{ item.content }}</div>
                <el-button v-if="logEditable" style="position: absolute; right: 6px;bottom: 6px;"
                           type="primary" icon="el-icon-edit" circle size="mini"
                           @click="start(item)"></el-button>
              </el-card>
            </el-timeline-item>
          </template>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import {changePas, getLogFile, setLogFile} from '@/api/system.js';
import {mapGetters, mapMutations} from 'vuex';

export default {
  data() {
    return {
      id: "",
      pas: "",
      newPas: "",
      newPas1: "",
      downloadUrl: process.env.VUE_APP_DOWNLOAD,

      log: [],
      logModel: {
        time: '',
        content: '',
      },
      logEdit: false,
      logEditable: false,
      logLoading: false,
      logSaving: false,
    };
  },
  computed: {
    ...mapGetters(['getPermissions']),
  },
  created() {
    this.getLogFile();
    setTimeout(() => {
      this.logEditable = this.getPermissions.includes('5-9-edit');
    }, 500);
  },
  methods: {
    async setLogFile() {
      this.logSaving = true;
      try {
        await setLogFile(this.logModel);
        this.$message.success(`保存成功`);
        if (this.log[0].id === -1) { this.log.shift();}
        this.logEdit = '';
        await this.getLogFile();
      } catch (error) { }
      this.logSaving = false;
    },
    async getLogFile() {
      try {
        this.logLoading = true;
        this.log = await getLogFile();
      } catch (error) {}
      this.logLoading = false;
    },
    start(data) {
      if (this.log.length && this.log[0].id === -1) {this.log.shift();}
      const {id = -1, content = '', time = Date.now()} = data || {};
      this.logModel = {id, content, time: dayjs(time).format('YYYY-MM-DD HH:mm:ss')};
      this.logEdit = this.logModel.id;
      if (id === -1) this.log.unshift(this.logModel);
    },
    // 退出登录
    logOut() {
      this.setActive("0");
      this.setActiveID("1-1");
      this.setPatiensInfo({});
      this.setUserinfo({});

      localStorage.clear();
      sessionStorage.clear();

      this.$router.replace({
        path: "/"
      });
    },
    // 确认修改
    sureToChange() {
      if (this.id == "") {
        this.$message({
          type: "error",
          message: "请输入身份证号",
          showClose: true
        });
        return;
      }
      if (this.pas == "") {
        this.$message({
          type: "error",
          message: "请输入原密码",
          showClose: true
        });
        return;
      }
      if (this.newPas == "") {
        this.$message({
          type: "error",
          message: "请输入新密码",
          showClose: true
        });
        return;
      }
      if (this.newPas1 == "") {
        this.$message({
          type: "error",
          message: "请再次输入新密码",
          showClose: true
        });
        return;
      }

      if (this.newPas1 != this.newPas) {
        this.$message({
          type: "error",
          message: "两次密码输入不一致",
          showClose: true
        });
        return;
      }

      this.changePas();
    },
    async changePas() {
      let params = {
        idcard: this.id,
        oldPassword: this.pas,
        password: this.newPas,

        newPassword: this.newPas1
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let res = await changePas(params).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "修改成功",
          showClose: true
        });
      }
    },
    ...mapMutations({
      setActiveID: "nav/setActiveID",
      setActive: "nav/setActive",
      setPatiensInfo: "user/setPatiensInfo",
      setUserinfo: "user/setUserinfo"
    })
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.help {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 5px;
  background: #fff;

  .download {
    margin-bottom: 20px;

    a {
      font-size: 16px;
      color: #333;
    }
  }

  .change-pas {
    div {
      margin-bottom: 10px;
    }

    .tip {
      color: #ff6245;
      font-size: 12px;
      // margin-bottom: ;
      margin-top: -15px;
    }
  }

  .sure {
    width: 108px;
    height: 40px;
    background: #9F643A;
    border-radius: 3px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    // margin-left: 10px;
    margin-top: 30px;
  }

  .bg-red {
    background: #ff6245 !important;
  }
}
</style>