Merge branch 'reportWorkAppFile/reportWorkApp' of http://192.168.5.5:10010/...

yangfeng

2024-02-05 6cbd11d8ef6745ce3ab46c047cdb049541a839b2

Merge branch 'reportWorkAppFile/reportWorkApp' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into reportWorkAppFile/reportWorkApp

 package.json

@@ -47,6 +47,8 @@
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "husky": "^8.0.3",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "lint-staged": "^15.0.2",
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",

 src/assets/images/loginBackground.png

 src/assets/images/logo.png

 src/components.d.ts

@@ -12,10 +12,14 @@
    CommonModal: typeof import('./components/CommonModal.vue')['default']
    DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElProgress: typeof import('element-plus/es')['ElProgress']

 src/router/index.ts

@@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import DashboardView from '../views/dashboard/index.vue'
import loginView from '../views/login/loginView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,6 +11,11 @@
      component: DashboardView
    },
    {
      path: '/login',
      name: 'login',
      component: loginView
    },
    {
      path: '/:error*',
      redirect: '/'
    }

 src/views/login/loginView.vue

New file
@@ -0,0 +1,152 @@
<template>
  <div class="box_wrap">
    <el-card class="box-card">
      <div class="card-top">
        <img src="@/assets/images/logo.png" />
      </div>
      <p>智能报工系统</p>
      <div class="card_bottom">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="25%" class="demo-ruleForm">
          <el-form-item label="" prop="accountNumber">
            <el-input v-model.number="ruleForm.accountNumber" style="width: 70%" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              v-model="ruleForm.pass"
              style="width: 70%"
              placeholder="密码"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <!-- <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入用户名'))
  } else {
    callback()
  }
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
// const validatePass2 = (rule: any, value: any, callback: any) => {
//   if (value === '') {
//     callback(new Error('Please input the password again'))
//   } else if (value !== ruleForm.pass) {
//     callback(new Error("Two inputs don't match!"))
//   } else {
//     callback()
//   }
// }

const ruleForm = reactive({
  pass: '',
  // checkPass: '',
  accountNumber: ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  // checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  accountNumber: [{ validator: checkAge, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>
<style scoped lang="less">
// ::v-deep body {
//   background: #fff;
// }

.box_wrap {
  width: 100%;
  min-height: 100vh;
  background-image: url('@/assets/images/loginBackground.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;

  .box-card {
    width: 30%;
    margin: 0 auto;
    height: 500px;
    border-radius: 15px;

    .card-top {
      text-align: center;

      img {
        width: 160px;
        height: 120px;
      }
    }

    p {
      text-align: center;
      color: #315bac;
      font-size: 24px;
      margin-bottom: 20px;
    }

    .card_bottom {
      .el-form {
        .el-form-item {
          .el-form-item__error {
            margin-left: 260px;
          }

          .el-input {
            .el-input__wrapper {
              padding-left: 50px;
            }
          }

          .el-button {
            width: 70%;
          }
        }
      }
    }
  }
}

::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  // justify-content: center;
}
</style>