新增

马宇豪

2023-11-30 515a265a809d0c12fb5cbff39cb743f391938a41

新增

 package.json

@@ -23,6 +23,7 @@
    "element-plus": "2.2.27",
    "file-saver": "2.0.5",
    "fuse.js": "6.6.2",
    "js-base64": "^3.7.5",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.3.1",
    "nprogress": "0.2.0",
@@ -36,9 +37,9 @@
    "@vue/compiler-sfc": "3.2.45",
    "sass": "1.56.1",
    "unplugin-auto-import": "0.11.4",
    "unplugin-vue-setup-extend-plus": "0.4.9",
    "vite": "3.2.3",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1",
    "unplugin-vue-setup-extend-plus": "0.4.9"
    "vite-plugin-svg-icons": "2.0.1"
  }
}

 src/api/area.js

对比新文件
@@ -0,0 +1,13 @@
import request from '@/utils/request'

// 获取地区列表
export function getRegionTree(params) {
    return request({
        url: '/system/region/regionTree',
        headers: {
            isToken: false
        },
        method: 'get',
        params: params
    })
}

 src/api/login.js

@@ -22,7 +22,7 @@
// 注册方法
export function register(data) {
  return request({
    url: '/register',
    url: '/system/user/addAgency',
    headers: {
      isToken: false
    },
@@ -58,3 +58,28 @@
    timeout: 20000
  })
}

// 获取字典
export function getDict(type) {
  return request({
    url: '/system/dictType/getDictDataByType',
    headers: {
      isToken: false
    },
    method: 'get',
    params: type
  })
}

// 删除图片
export function delPic(path) {
  return request({
    url: '/system/common/removeFile',
    headers: {
      isToken: false
    },
    method: 'delete',
    params: path,
    timeout: 20000
  })
}

 src/layout/components/Register/index.vue

@@ -1,97 +1,348 @@
<template>
    <el-dialog v-model="dialogVisible" title="注册用户" width="30%" :append-to-body="true" top="50vh" custom-class="regForm">
      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
        <el-form-item prop="username">
    <el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog">
      <template #header>
        <div style="display:flex;font-size: 1.2rem;font-weight: bolder">
          机构注册
          <div style="font-size: 0.9rem;display:flex;align-items: center;font-weight: normal;margin-left: 6px"><Warning style="color:#EF4444;width: 0.9rem; height: 0.9rem;margin-right: 2px" />请认真填写注册信息，带 <span style="color:#EF4444;vertical-align: middle">*</span> 为必填项</div>
        </div>
      </template>
      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form" label-position="top">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item prop="agency.name" label="机构名称">
          <el-input
            v-model="registerForm.username"
            type="text"
                  v-model="registerForm.agency.name"
            size="large"
            auto-complete="off"
            placeholder="账号"
                  placeholder="请输入机构名称"
          >
            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.creditCode" label="社会信用代码">
              <el-input
                  v-model="registerForm.agency.creditCode"
                  size="large"
                  placeholder="请输入社会信用代码"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.attribute" label="机构属性">
              <el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" @change="changeAttr()">
                <el-radio :label="0" size="large">疆内</el-radio>
                <el-radio :label="1" size="large">疆外</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item prop="agency.area" label="实际经营地址所属区域">
              <el-cascader
                  v-model="registerForm.agency.area"
                  :options="state.areaList"
                  :props="props"
                  @change="handleChange"
                  style="width: 100%"
                  size="large"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="agency.address" label="实际经营地址">
              <el-input
                  v-model="registerForm.agency.address"
                  size="large"
                  placeholder="请输入实际经营地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item prop="agency.legalPerson" label="法定代表人">
              <el-input
                  v-model="registerForm.agency.legalPerson"
                  size="large"
                  placeholder="请输入法定代表人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="agency.legalPhone" label="法人电话">
              <el-input
                  v-model="registerForm.agency.legalPhone"
                  size="large"
                  placeholder="请输入法人电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item prop="agency.manager" label="机构负责人">
              <el-input
                  v-model="registerForm.agency.manager"
                  size="large"
                  placeholder="请输入机构负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="agency.managerPhone" label="负责人电话">
              <el-input
                  v-model="registerForm.agency.managerPhone"
                  size="large"
                  placeholder="请输入负责人电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item prop="agency.certNumber" label="资质证书编号">
              <el-input
                  v-model="registerForm.agency.certNumber"
                  size="large"
                  placeholder="请输入机构负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.issueDate" label="发证日期">
              <el-date-picker
                  v-model="registerForm.agency.issueDate"
                  type="date"
                  placeholder="请选择发证日期"
                  value-format="YYYY-MM-DD 00:00:00"
                  size="large"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.validDate" label="有效日期">
              <el-date-picker
                  v-model="registerForm.agency.validDate"
                  type="date"
                  placeholder="请选择有效日期"
                  value-format="YYYY-MM-DD 00:00:00"
                  size="large"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item prop="agency.assetValue" label="固定资产总值">
              <el-input
                  v-model="registerForm.agency.assetValue"
                  type="number"
                  size="large"
                  placeholder="请输入固定资产总值"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.workArea" label="工作场所建筑面积">
              <el-input
                  type="number"
                  v-model="registerForm.agency.workArea"
                  size="large"
                  placeholder="请输入工作场所建筑面积"
              ><template #append>㎡</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.archiveArea" label="档案室面积">
              <el-input
                  type="number"
                  v-model="registerForm.agency.archiveArea"
                  size="large"
                  placeholder="请输入档案室面积"
              ><template #append>㎡</template></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item prop="agency.regAddress" label="注册地址">
              <el-input
                  v-model="registerForm.agency.regAddress"
                  size="large"
                  placeholder="请输入注册地址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.business" label="申请的法定安全评价业务范围">
              <el-select v-model="registerForm.agency.business" placeholder="请选择业务范围" size="large" style="width: 100%">
                <el-option
                    v-for="item in state.busList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item prop="agency.reportPath" label="加盖公章的《机构信息上报表》">
              <!--              <el-upload-->
              <!--                  v-model:file-list="state.fileList"-->
              <!--                  class="upload-demo"-->
              <!--                  action=""-->
              <!--                  multiple-->
              <!--                  :on-preview="handlePreview"-->
              <!--                  :on-remove="handleRemove"-->
              <!--                  :before-remove="beforeRemove"-->
              <!--                  :limit="3"-->
              <!--                  :on-exceed="handleExceed"-->
              <!--              >-->
              <!--                <el-button type="primary">点击上传</el-button>-->
              <!--                <template #tip>-->
              <!--                  <div class="el-upload__tip">-->
              <!--                    上传文件大小不超过2M-->
              <!--                  </div>-->
              <!--                </template>-->
              <!--              </el-upload>-->
              <el-upload accept="image/*" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="handleAvatarSuccess" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='state.imgLimit' v-model:file-list="state.fileList" list-type="picture-card" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove">
                <el-icon><Plus /></el-icon>
                <template #tip>
                  <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item prop="username" label="登录用户名(字母+数字，长度在5-16之间)">
              <el-input
                  v-model="registerForm.username"
                  size="large"
                  placeholder="请输入登录用户名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phone" label="用户电话">
              <el-input
                  v-model="registerForm.phone"
                  size="large"
                  placeholder="请输入用户电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item prop="password" label="密码">
          <el-input
            v-model="registerForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleRegister"
          >
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
                  placeholder="请输入密码"
                  show-password
              />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          </el-col>
          <el-col :span="12">
            <el-form-item prop="confirmPassword" label="确认密码">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="确认密码"
            @keyup.enter="handleRegister"
                  show-password
          >
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled">
          <el-input
            size="large"
            v-model="registerForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleRegister"
          >
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <div class="register-code">
            <img :src="codeUrl" @click="getCode" class="register-code-img"/>
          </div>
        </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:100%;"
            style="width:40%;margin: 0 auto"
            @click.prevent="handleRegister"
          >
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
          </el-button>
<!--          <div style="float: right;">-->
<!--            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>-->
<!--          </div>-->
        </el-form-item>
      </el-form>
      <el-dialog v-model="state.dialogImg">
        <el-image style="width: 100%; height: 100%" :src="state.dialogImageUrl"/>
    </el-dialog>
    <!--  底部  -->
<!--    <div class="el-Register-footer">-->
<!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
<!--    </div>-->
    </el-dialog>
</template>

<script setup>
import {ref, watch, defineExpose, onMounted} from "vue"
import { ElMessageBox } from "element-plus";
import { getCodeImg, register } from "@/api/login";
import {ref, watch, defineExpose, onMounted, reactive} from "vue"
import {ElMessage, ElMessageBox} from "element-plus"
import { register,delPic,getDict } from "@/api/login"
import { getRegionTree } from "@/api/area"
import { getToken } from "@/utils/auth";
import {verifyPhone, verifyUsername, verifyPwd} from "../../../utils/validate";
let { proxy } = getCurrentInstance()
import { Base64 } from 'js-base64'
const registerForm = ref({
  agency:{
    name: "",
    creditCode: "",
    attribute: 0,
    area: [],
    province: '',
    city: '',
    district: '',
    address: '',
    legalPerson: '',
    legalPhone: '',
    manager: '',
    managerPhone: '',
    certNumber: '',
    issueDate: '',
    validDate: '',
    assetValue: '',
    workArea: '',
    archiveArea: '',
    regAddress: '',
    business: '',
    reportPath: '',
  },
  username: '',
  phone: '',
  password: '',
  confirmPassword: ''
});

const router = useRouter();
const { proxy } = getCurrentInstance();
const test=()=>{
  dialogVisible.value = false
const props = {
  expandTrigger: 'hover',
  value: 'name',
  label: 'name'
}

const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
  code: "",
  uuid: ""
});
const state = reactive({
  areaList: [],
  busList: [],
  fileList: [],
  imgLimit: 1,
  uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
  header: {
    Authorization: 'Bearer ' + getToken()
  },
  dialogImageUrl: '',
  dialogImg: false
})


const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
@@ -101,65 +352,205 @@
  }
};

const validatePhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
  }else{
    if(!verifyPhone(value)){
      callback(new Error('手机号格式有误'))
    }else{
      callback()
    }
  }
}

const validateUsername = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入登录时用户名'))
  }else{
    if(!verifyUsername(value)){
      callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
    }else{
      callback()
    }
  }
}

let validatePwd = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入密码'))
  }else{
    if(!verifyPwd(value)){
      callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线)，长度在6-16之间'))
    }else{
      callback()
    }
  }
}

const registerRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入您的账号" },
    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
  ],
  "agency.name": [{required: true, trigger: "blur", message: "请输入机构名称"}],
  "agency.creditCode": [{required: true, trigger: "blur", message: "请输入社会信用代码"}],
  "agency.attribute": [{required: true, trigger: "blur", message: "请选择机构属性"}],
  "agency.area": [{required: true, trigger: "blur", message: "请选择实际经营地址所属区域"}],
  "agency.address": [{required: true, trigger: "blur", message: "请输入实际经营地址"}],
  "agency.legalPerson": [{required: true, trigger: "blur", message: "请输入法定代表人"}],
  "agency.legalPhone": [{required: true, trigger: "blur", validator: validatePhone}],
  "agency.manager": [{required: true, trigger: "blur", message: "请输入机构负责人"}],
  "agency.managerPhone": [{required: true, trigger: "blur", validator: validatePhone}],
  "agency.certNumber": [{required: true, trigger: "blur", message: "请输入资质证书编号"}],
  "agency.issueDate": [{required: true, trigger: "blur", message: "请选择发证日期"}],
  "agency.validDate": [{required: true, trigger: "blur", message: "请选择有效日期"}],
  "agency.assetValue": [{required: true, trigger: "blur", message: "请输入固定资产总值"}],
  "agency.workArea": [{required: true, trigger: "blur", message: "请输入工作场所建筑面积"}],
  "agency.archiveArea": [{required: true, trigger: "blur", message: "请输入档案室面积"}],
  "agency.regAddress": [{required: true, trigger: "blur", message: "请输入注册地址"}],
  "agency.business": [{required: true, trigger: "blur", message: "请选择申请的法定安全评价业务范围"}],
  "agency.reportPath": [{required: true, trigger: "blur", message: "请上传加盖公章的《机构信息上报表》"}],
  username: [{ required: true, trigger: "blur", validator: validateUsername }],
  phone: [{ required: true, trigger: "blur", validator: validatePhone }],
  password: [{ required: true, trigger: "blur", validator: validatePwd }],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
    { required: true, trigger: "blur", message: "请再次确认密码" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
  ]
};

const codeUrl = ref("");
const loading = ref(false);
const captchaEnabled = ref(true);
const loading = ref(false)
const dialogVisible = ref(false)
const registerRef = ref(null)

onMounted(()=>{
  getCode();
  getBusiness()
  getArea()
})

const handleChange = (value) => {
  if(registerForm.value.agency.attribute == 0){
    registerForm.value.agency.province = '新疆维吾尔自治区'
    registerForm.value.agency.city = value[0]?value[0]:''
    registerForm.value.agency.district  = value[1]?value[1]:''
  }else{
    registerForm.value.agency.province = value[0]?value[0]:''
    registerForm.value.agency.city = value[1]?value[1]:''
    registerForm.value.agency.district  = value[2]?value[2]:''
  }
}

const getBusiness = async ()=>{
  const res = await getDict({dictType: 'sys_business_scope'})
  if(res.code == 200){
    state.busList = res.data
  }else{
    ElMessage.warning(res.message)
  }
}

const getArea = async ()=>{
  const type = registerForm.value.agency.attribute
  const res = await getRegionTree({name: '',parentId: null,regionType: type})
  if(res.code == 200){
    state.areaList = res.data
  }else{
    ElMessage.warning(res.message)
  }
}

const changeAttr=()=>{
  getArea()
}

// 图片上传
const showTip =()=>{
  ElMessage({
    type: 'warning',
    message: '超出文件上传数量'
  });
}

const picSize = async (rawFile) => {
  if(rawFile.size / 1024 / 1024 > 5){
    ElMessage({
      type: 'warning',
      message: '文件大小不能超过5M'
    });
    return false
  }
};

const handlePictureCardPreview = (uploadFile) => {
  state.dialogImageUrl = uploadFile.url
  state.dialogImg = true
};


const handleAvatarSuccess = (res, uploadFile) => {
  if(res.code == 200){
    registerForm.value.agency.reportPath = res.data.path
  }else{
    ElMessage({
      type: 'warning',
      message: '文件上传失败'
    })
  }
}

const handleRemove = async (file, uploadFiles) => {
  const res = await delPic({path: registerForm.value.agency.reportPath})
  if(res.code == 200){
    ElMessage({
      type: 'success',
      message: '文件已删除'
    })
  }else{
    ElMessage({
      type: 'warning',
      message: res.message
    })
  }
}

function handleRegister() {
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true;
      register(registerForm.value).then(res => {
        const username = registerForm.value.username;
        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
      const {confirmPassword, ...data} = registerForm.value
      data.password = Base64.encode(data.password)
      delete data.agency.area
      register(data).then(res => {
        if(res.code == 200){
          const username = registerForm.value.username
          ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
          dangerouslyUseHTMLString: true,
          type: "success",
        }).then(() => {
          router.push("/homePage");
        }).catch(() => {});
      }).catch(() => {
        loading.value = false;
        if (captchaEnabled) {
          getCode();
            dialogVisible.value = false
            proxy.$refs.registerRef.resetFields()
            proxy.$refs.registerRef.clearValidate()
            state.fileList = []
            // router.push("/homePage")
          }).catch(() => {})
        }else{
          ElMessage({
            type: 'warning',
            message: res.message
          })
        }
      });
      }).catch(() => {
        loading.value = false
      })
    }
  });
}

function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      registerForm.value.uuid = res.uuid;
    }
  });
const closeDialog = ()=>{
  proxy.$refs.registerRef.resetFields()
  proxy.$refs.registerRef.clearValidate()
  state.fileList = []
}

defineExpose({
  dialogVisible,
  test
})

</script>
@@ -183,6 +574,9 @@
    width: 14px;
    margin-left: 0px;
  }
  .el-radio-group{
    width: 200px !important;
  }
}
.register-tip {
  font-size: 13px;

 src/utils/request.js

@@ -82,7 +82,8 @@
      return res.data
    }
    if (code === 401) {
      // if (!isRelogin.show) {
      if(location.href.indexOf('homePage') == -1 ){
        if (!isRelogin.show) {
        isRelogin.show = true;
        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
          isRelogin.show = false;
@@ -92,8 +93,12 @@
      }).catch(() => {
        isRelogin.show = false
      });
    // }
      // return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
        }
      }else{
        // ElMessage({ message: res.data.message, type: 'error' })
        console.log(res.data.message)
      }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    } else if (code === 500) {
      ElMessage({ message: msg, type: 'error' })
      return Promise.reject(new Error(msg))

 src/utils/validate.js

@@ -16,6 +16,23 @@
  return /^(https?:|mailto:|tel:)/.test(path)
}

export function verifyPhone(val) {
  var regex = /^\d{11}$/;  // 正则表达式，\d 匹配数字，{11} 表示匹配11次
  return regex.test(val);
}

export function verifyUsername(val) {
  var regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{5,16}$/;  // 正则表达式，\d 匹配数字，{11} 表示匹配11次
  return regex.test(val);
}

export function verifyPwd(val) {
  // false: 强密码不正确
  if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) return false;
  // true: 强密码正确
  else return true;
}

/**
 * @param {string} str
 * @returns {Boolean}

 src/views/components/details.vue

对比新文件
@@ -0,0 +1,70 @@
<template>
  <div class="container">
    <div class="header">
      <div>
        <el-icon :size="20">
          <Location />
        </el-icon>
        <span>我的位置：</span>
      </div>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>{{ state.firstClass }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{state.firstClass}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">

    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue"
import { ArrowRight } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()
const redirect = ref(undefined);
const state = reactive({
  firstClass: '第一级菜单'
})



onMounted(()=>{

})

onUnmounted(()=>{

})

watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });


defineExpose({

})

</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 170px;
  .header{
    display: flex;
    align-items: center;
    &>div{
      display: flex;
      align-items: center;
    }
  }
}
</style>

 src/views/components/home.vue

@@ -49,7 +49,7 @@
          <div v-for="item in state.pubList">
            <div><img src="src/assets/images/section.png"></div>
            <div>
              <div>{{item.title}}</div>
              <div>{{item.name}}</div>
              <span>{{item.updateTime}}</span>
            </div>
          </div>

 src/views/components/loginForm.vue

@@ -24,6 +24,7 @@
          auto-complete="off"
          placeholder="密码"
          @keyup.enter="handleLogin"
          show-password
        >
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
@@ -49,7 +50,7 @@
            :loading="loading"
            size="large"
            type="primary"
            style="width:50%;"
            style="width:63%;"
            @click.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
@@ -78,8 +79,8 @@
const { proxy } = getCurrentInstance();

const loginForm = ref({
  username: "admin",
  password: "admin@123",
  username: "",
  password: "",
  code: "",
  uuid: ""
});

 src/views/homePage.vue

@@ -43,6 +43,7 @@
        <Notice v-if="state.activeMenu==2" ref="noticeRef"/>
        <Laws v-if="state.activeMenu==3" ref="lawsRef"/>
        <Publish v-if="state.activeMenu==4" ref="publishRef"/>
        <Details ref="detailsRef"></Details>
      </div>
    </div>
    <!--  底部  -->
@@ -59,6 +60,7 @@
import Notice from './components/notice'
import Laws from './components/laws'
import Publish from './components/publish'
import Details from './components/details'

const route = useRoute()
const router = useRouter()
@@ -82,13 +84,13 @@
  activeMenu: 1,
  date: '',
  weekDay: '',
  dayTime: ''
  dayTime: '',
  checkDetails: false
})

// 当前时间
const getDateTime = () => {
  const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
  console.log(curTime,'time')
  state.date = curTime.slice(0, 10);
  let week = ['日', '一', '二', '三', '四', '五', '六'];
  let day = new Date().getDay();