VehicleClassification/vue/src/views/HelloWorld.vue

<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-header>
        <el-row :gutter="24">
          <!-- <el-col :span="6" style="text-align: left">
            抑郁认知行为治疗系统管理端
          </el-col> -->
          <el-col :span="6" style="text-align: left"> 管理端 </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6" class="user_operate">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ userInfo.organName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  <el-dropdown-item command="editPassword"
                    >修改密码</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-container>
          <el-aside width="auto" height="100%">
            <el-menu
              default-active="/TreeHoleManage"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              router
              @open="handleOpen"
              @close="handleClose"
            >
              <!-- <el-menu-item index="/main/TreeHoleManage">
                <el-icon><icon-menu /></el-icon>
                <template #title>树洞管理</template>
              </el-menu-item> -->
              <!-- <el-menu-item index="/main/PsychologicalConsultation">
                <el-icon>
                  <el-icon>
                    <ChatLineSquare />
                  </el-icon>
                </el-icon>
                <template #title>心理咨询</template>
              </el-menu-item> -->
              <!-- <el-menu-item
                v-if="userInfo.type === '0'"
                index="/main/WangEditor"
              >
                <el-icon>
                  <document />
                </el-icon>
                <template #title>文章编辑</template>
              </el-menu-item>
              <el-menu-item index="/main/RecordList">
                <el-icon>
                  <Notebook />
                </el-icon>
                <template #title>发作记录</template>
              </el-menu-item> -->
              <!-- <el-menu-item index="/main/WuRen">
                <el-icon><document /></el-icon>
                <template #title>无人机</template>
              </el-menu-item> -->
              <!-- <el-menu-item v-if="userInfo.type === '1'" index="/main/Audit">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>审核页面</template>
              </el-menu-item> -->
              <!-- <el-menu-item index="/main/institutionManage" v-if="type == '1'">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>用户管理</template>
              </el-menu-item>

              <el-menu-item index="/main/fileUpload">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>文件上传</template>
              </el-menu-item> -->
              <el-menu-item index="/main/Direction" v-if="type == '1'">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>车辆方向检测</template>
              </el-menu-item>

              <el-menu-item index="/main/Category">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>车辆分类检测</template>
              </el-menu-item>
              <el-menu-item index="/main/DirectionAndCategory" v-if="type == '1'">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>车辆分类与方向检测</template>
              </el-menu-item>
<!-- 
              <el-menu-item index="/main/fileUpload">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>文件上传</template>
              </el-menu-item> -->
              <el-menu-item index="/main/recordList">
                <el-icon>
                  <document />
                </el-icon>
                <template #title>历史记录</template>
              </el-menu-item>
              <!-- <el-menu-item
                v-if="userInfo.type === '0'"
                index="/main/institutionManage"
              >
                <el-icon>
                  <User />
                </el-icon>
                <template #title>机构管理</template>
              </el-menu-item> -->
            </el-menu></el-aside
          >
          <el-main>
            <p class="main_p">
              <Expand
                @click="isCollapse = !isCollapse"
                style="width: 1em; height: 1em; margin-right: 8px"
              />
            </p>
            <div class="main">
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>

      <el-footer>
        <div class="footer">
          <div class="wrap" style="overflow: hidden">
            <ul class="record">
              <!-- <li>
                <a
                  target="_blank"
                  href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402011379"
                  ><img src="../assets/beian.png" /><span class="ml10"
                    >京公网安备 11011402011379号</span
                  ></a
                >
              </li>
              <li>
                <a href="javascript:;">京ICP备20000146号-2</a>
              </li> -->
              <!-- <li>
                <a href="javascript:;">Copyright© 北京决明科技有限公司</a>
              </li> -->
              <li>
                <a href="javascript:;">Copyright©2024</a>
              </li>
            </ul>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
      v-model="dialogFormVisible"
      title="修改密码"
      width="480"
      @close="cancelHandle"
    >
      <el-form ref="ruleFormRef" :model="orginizeInfo" :rules="rules">
        <el-form-item label="原密码" :label-width="120" prop="oldPassword">
          <el-input
            v-model="orginizeInfo.oldPassword"
            type="password"
            placeholder="请输入原密码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="新密码" :label-width="120" prop="newPassword">
          <el-input
            v-model="orginizeInfo.newPassword"
            type="password"
            placeholder="请输入新密码"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelHandle">取消</el-button>
          <el-button type="primary" @click="updataPassword(ruleFormRef)">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onBeforeMount } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import CryptoJS from "crypto-js";
import axios from "../utils/http";
import { useRouter } from "vue-router";
const router = useRouter();
const userInfo = ref({
  organName: "",
  type: "",
});
const type=ref()

defineProps({
  // msg: {
  //   type: String,
  //   required: true,
  // },
});

let dialogFormVisible = ref(false);
let orginizeInfo = reactive({
  organNumber: "",
  oldPassword: "",
  newPassword: "",
});

const ruleFormRef = ref();

const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,12}$/;
    if (!reg.test(value)) {
      callback(new Error("密码需为6~12位的字母数字组合"));
      return;
    }
    callback();
  }
};

const rules = reactive({
  oldPassword: [
    {
      required: true,
      validator: validatePass,
      trigger: "blur",
    },
  ],
  newPassword: [
    {
      required: true,
      validator: validatePass,
      trigger: "blur",
    },
  ],
});

const isCollapse = ref(false);

onBeforeMount(() => {
  let tempStr = sessionStorage.getItem("userInfo") ?? "{}";
  if (tempStr) userInfo.value = JSON.parse(tempStr);
  type.value=JSON.parse(tempStr).type
  console.log('type'+type.value)
});

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleCommand = (command: string | number | object) => {
  if (command === "logout") {
    sessionStorage.clear();
    router.push("/login");
  } else if (command === "editPassword") {
    dialogFormVisible.value = true;
  }
};

const cancelHandle = () => {
  ruleFormRef.value.resetFields();
  dialogFormVisible.value = false;
  ruleFormRef.value.clearValidate();
};

const updataPassword = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
    let username  = JSON.parse(
        sessionStorage.getItem("userInfo") ?? "{}"
      )?.organName;
   let password1 = CryptoJS.MD5(
        orginizeInfo.oldPassword
      ).toString();
  let password2=    CryptoJS.MD5(
        orginizeInfo.newPassword
      ).toString();
      axios
        .post(`/v1/user/change/password`, {
          username: username,
          password: password1,
          newPassword: password2,
        })
        .then((res) => {
          if (res.code == 200) {
            ElMessage({
              message: "密码修改成功",
              type: "success",
            });
            dialogFormVisible.value = false;
          }else{
              ElMessage({
              message: res.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg,
            type: "error",
          });
        });
    } else {
      ElMessage({
        message: "请将信息填写完整",
        type: "error",
      });
    }
  });
};
</script>


<style >
.el-aside {
  background-color: #ffffff !important;
}
</style>
<style scoped>
.el-header,
.el-footer {
  background-color: #57acbb;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  /* text-align: center;
  line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-main {
  --el-main-padding: 0px;
}

.main_p {
  line-height: 15px;
  text-align: left;
  margin-top: 2px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.user_operate {
  display: flex !important;
  justify-content: end;
  align-items: center;
}

.main {
  padding: 20px;
  margin: 8px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 10px 0px rgba(49, 131, 207, 0.38);
}

.el-footer {
  height: auto;
}

.footer {
  width: 100%;
  background: #57acbb;
  overflow: hidden;
}

.footer .record {
  display: flex;
  justify-content: center;
  margin: 0;
}

.footer .record li {
  line-height: 60px;
  margin: 0 35px;
}

.footer .record li a {
  color: #ffffff;
}

.footer .record img,
.footer .record span {
  vertical-align: middle;
}
</style>