安全违章页面新增表单搭建 我的页面搭建 工作台搭建
This commit is contained in:
BianLzhaoMin
parent
6059ed81f6
commit
c9ac67d7df
|
|
@ -11990,9 +11990,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/uview-plus": {
|
||||
"version": "3.3.62",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/uview-plus/-/uview-plus-3.3.62.tgz",
|
||||
"integrity": "sha512-RDSEiu4uuZf4Aq5S7McSsVPOHrlEsjIVcGT1U6vgnfD7HsZzPx71TaBY3kHHmawLeQ5oS4BSviBRRb+Y3gX0NA==",
|
||||
"version": "3.4.11",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/uview-plus/-/uview-plus-3.4.11.tgz",
|
||||
"integrity": "sha512-lCi/w1NuLbv0g++ynySJQRfhYLBK3BkQ8lO7nz0YPrTOPjqdraI35Tmdpjerjc/VVIzz0IAOSi0scVEwtd4MaA==",
|
||||
"dependencies": {
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.3"
|
||||
|
|
|
|||
|
|
@ -20,4 +20,8 @@ page {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .u-form-item__body__right__message {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<!-- 导航栏 -->
|
||||
<up-navbar :title="navBarTitle">
|
||||
<template #left>
|
||||
<view class="u-nav-slot" @tap="onHandleBack">
|
||||
<up-icon name="arrow-left" size="20" color="#2979ff" />
|
||||
返回
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<text style="color: #2979ff">上传记录</text>
|
||||
</template>
|
||||
</up-navbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
navBarTitle: {
|
||||
type: String,
|
||||
default: () => '个人中心',
|
||||
},
|
||||
})
|
||||
|
||||
// 返回按钮
|
||||
const onHandleBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.u-nav-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<!-- 表单头部提示文字 -->
|
||||
<view class="title-tip">
|
||||
<view></view>
|
||||
<view>{{ TitleTip }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
TitleTip: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
})
|
||||
|
||||
// 返回按钮
|
||||
const onHandleBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title-tip {
|
||||
padding: 16rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #585757;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2rpx;
|
||||
background-color: #fff;
|
||||
|
||||
& view:first-child {
|
||||
margin: 0 20rpx;
|
||||
width: 10rpx;
|
||||
height: 32rpx;
|
||||
background-color: #2979ff;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,17 +16,69 @@
|
|||
"navigationBarTitleText": "项目全过程影像管理工具"
|
||||
}
|
||||
},
|
||||
// tabBar 工作台页面
|
||||
{
|
||||
"path": "pages/workbenches/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工作台"
|
||||
}
|
||||
},
|
||||
// tabBar 我的页面
|
||||
{
|
||||
"path": "pages/my/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
},
|
||||
// 二级页面
|
||||
{
|
||||
"path": "pages/my/edit-password/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改密码"
|
||||
}
|
||||
},
|
||||
// 业务 一级页面 ---- 安全违章
|
||||
{
|
||||
"path": "pages/safetyViolations/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "custom",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
// 业务 一级页面 ---- 质量检查
|
||||
{
|
||||
"path": "pages/qualityInspection/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "质量检查"
|
||||
}
|
||||
},
|
||||
// 业务 一级页面 ---- 安全措施落实
|
||||
{
|
||||
"path": "pages/safetyMeasure/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "安全措施落实"
|
||||
}
|
||||
},
|
||||
// 业务 一级页面 ---- 协调照片
|
||||
{
|
||||
"path": "pages/coordinatePhotos/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "协调照片"
|
||||
}
|
||||
},
|
||||
// 业务 一级页面 ---- 重要事项
|
||||
{
|
||||
"path": "pages/importantMatters/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "重要事项"
|
||||
}
|
||||
},
|
||||
// 业务 一级页面 ---- 综合查询
|
||||
{
|
||||
"path": "pages/comprehensiveQuery/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "综合查询"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 综合查询一级页面 -->
|
||||
<view class="qualityInspection"> </view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comprehensiveQuery {
|
||||
height: 100%;
|
||||
background-color: #f6f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 协调照片一级页面 -->
|
||||
<view class="qualityInspection"> </view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coordinatePhotos {
|
||||
height: 100%;
|
||||
background-color: #f6f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 重要事项一级页面 -->
|
||||
<view class="qualityInspection"> </view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.importantMatters {
|
||||
height: 100%;
|
||||
background-color: #f6f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,10 +28,19 @@
|
|||
<up-form-item prop="password">
|
||||
<up-input
|
||||
clearable
|
||||
:password="!showPassword"
|
||||
prefixIcon="lock"
|
||||
placeholder="填输入密码"
|
||||
v-model="opinionModel.password"
|
||||
/>
|
||||
>
|
||||
<template #suffix>
|
||||
<u-icon
|
||||
:name="!showPassword ? 'eye-fill' : 'eye'"
|
||||
@tap="showPassword = !showPassword"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item>
|
||||
|
|
@ -44,10 +53,11 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { loginApi } from '@/services/login.js'
|
||||
const showPassword = ref(false)
|
||||
|
||||
// 表单数据源
|
||||
const opinionModel = ref({
|
||||
userName: '',
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
|
|
@ -132,8 +142,4 @@ const onConfirm = () => {
|
|||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-form-item__body__right__message {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,274 @@
|
|||
<template>
|
||||
<!-- 修改密码页面 -->
|
||||
<view class="edit-password">
|
||||
<up-steps :current="currenSteps">
|
||||
<up-steps-item title="验证手机"> </up-steps-item>
|
||||
<up-steps-item title="设置密码"></up-steps-item>
|
||||
<up-steps-item title="修改成功"></up-steps-item>
|
||||
</up-steps>
|
||||
|
||||
<view class="edit-password-content">
|
||||
<!-- 第一步表单 -->
|
||||
<up-form
|
||||
:model="editPasswordModel"
|
||||
ref="editPasswordRef"
|
||||
:rules="editPasswordRules"
|
||||
class="opinion-form"
|
||||
v-if="currenSteps === 0"
|
||||
>
|
||||
<up-form-item prop="username">
|
||||
<up-input
|
||||
clearable
|
||||
prefixIcon="account"
|
||||
placeholder="填输入手机号"
|
||||
v-model="editPasswordModel.username"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item prop="password">
|
||||
<up-input
|
||||
clearable
|
||||
prefixIcon="lock"
|
||||
:password="!showPassword_1"
|
||||
placeholder="填输入密码"
|
||||
v-model="editPasswordModel.password"
|
||||
>
|
||||
<template #suffix>
|
||||
<u-icon
|
||||
:name="!showPassword_1 ? 'eye-fill' : 'eye'"
|
||||
@tap="showPassword_1 = !showPassword_1"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item>
|
||||
<up-button type="primary" text="下一步" @tap="onHandleNext" />
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
<!-- 第二步表单 -->
|
||||
<up-form
|
||||
:model="editPasswordAgainModel"
|
||||
ref="editPasswordAgainRef"
|
||||
:rules="editPasswordAgainRules"
|
||||
class="opinion-form"
|
||||
v-if="currenSteps === 1"
|
||||
>
|
||||
<up-form-item prop="newPassword">
|
||||
<up-input
|
||||
clearable
|
||||
prefixIcon="lock"
|
||||
:password="!showPassword_2"
|
||||
placeholder="填输入8-20位新密码"
|
||||
v-model="editPasswordAgainModel.newPassword"
|
||||
>
|
||||
<template #suffix>
|
||||
<u-icon
|
||||
:name="!showPassword_2 ? 'eye-fill' : 'eye'"
|
||||
@tap="showPassword_2 = !showPassword_2"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="newPasswordAgain">
|
||||
<up-input
|
||||
clearable
|
||||
prefixIcon="lock"
|
||||
:password="!showPassword_3"
|
||||
placeholder="填再次输入8-20位新密码"
|
||||
v-model="editPasswordAgainModel.newPasswordAgain"
|
||||
>
|
||||
<template #suffix>
|
||||
<u-icon
|
||||
:name="!showPassword_3 ? 'eye-fill' : 'eye'"
|
||||
@tap="showPassword_3 = !showPassword_3"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item>
|
||||
<up-button type="primary" text="确定" @tap="onHandleSubmit" />
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
|
||||
<!-- 第三步页面 -->
|
||||
<view class="edit-password-success" v-if="currenSteps === 2">
|
||||
<up-icon name="checkmark-circle" size="56" color="#19be6b" bold></up-icon>
|
||||
<view class="edit-result">修改成功</view>
|
||||
<view class="count-down-container">
|
||||
<up-count-down
|
||||
:time="6000"
|
||||
format="ss"
|
||||
ref="countDownRef"
|
||||
:autoStart="false"
|
||||
@finish="onHandleFinish"
|
||||
style="margin-right: 6rpx"
|
||||
/>
|
||||
秒后回到登录页面
|
||||
</view>
|
||||
<up-button
|
||||
type="primary"
|
||||
text="重新登录"
|
||||
class="logout-btn"
|
||||
@tap="onHandleLoginAgain"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, ref } from 'vue'
|
||||
|
||||
const showPassword_1 = ref(false) // 密码是否显示
|
||||
const showPassword_2 = ref(false) // 密码是否显示
|
||||
const showPassword_3 = ref(false) // 密码是否显示
|
||||
const currenSteps = ref(0) // 步骤索引
|
||||
const countDownRef = ref(null) // 倒计时组件
|
||||
const editPasswordRef = ref(null) // 密码表单
|
||||
const editPasswordAgainRef = ref(null) // 重复密码表单
|
||||
const editPasswordModel = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
const editPasswordAgainModel = ref({
|
||||
newPassword: '',
|
||||
newPasswordAgain: '',
|
||||
})
|
||||
|
||||
const editPasswordRules = ref({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请输入手机号',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请输入密码',
|
||||
},
|
||||
],
|
||||
})
|
||||
const editPasswordAgainRules = ref({
|
||||
newPassword: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请输入新密码',
|
||||
},
|
||||
{
|
||||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\d\s]).{8,20}$/,
|
||||
// 正则检验前先将值转为字符串
|
||||
transform(value) {
|
||||
return String(value)
|
||||
},
|
||||
message: '密码需包含大小写字母、数字和特殊字符，长度为8到20个字符',
|
||||
},
|
||||
],
|
||||
newPasswordAgain: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请再次输入新密码',
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== editPasswordAgainModel.value.newPassword) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// 下一步
|
||||
const onHandleNext = () => {
|
||||
editPasswordRef.value
|
||||
.validate()
|
||||
.then(async (valid) => {
|
||||
if (valid) {
|
||||
currenSteps.value++
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 处理验证错误
|
||||
})
|
||||
}
|
||||
// 确定
|
||||
const onHandleSubmit = async () => {
|
||||
editPasswordAgainRef.value
|
||||
.validate()
|
||||
.then(async (valid) => {
|
||||
if (valid) {
|
||||
currenSteps.value++
|
||||
// 开启倒计时
|
||||
nextTick(() => {
|
||||
if (countDownRef.value) {
|
||||
countDownRef.value.start()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 处理验证错误
|
||||
})
|
||||
}
|
||||
|
||||
// 倒计时结束
|
||||
const onHandleFinish = () => {
|
||||
uni.redirectTo({ url: '/pages/login/index' })
|
||||
}
|
||||
|
||||
// 重新登录
|
||||
const onHandleLoginAgain = () => {
|
||||
if (countDownRef.value) {
|
||||
countDownRef.value.reset()
|
||||
}
|
||||
uni.redirectTo({ url: '/pages/login/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-password {
|
||||
height: 100%;
|
||||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.opinion-form {
|
||||
width: 90%;
|
||||
margin: 100rpx auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-password-success {
|
||||
padding-top: 58rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.edit-result {
|
||||
padding: 18rpx 0 24rpx 0;
|
||||
}
|
||||
|
||||
.count-down-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin-top: 68rpx;
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,13 +18,65 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<up-cell-group>
|
||||
<up-cell size="large" title="修改密码" isLink />
|
||||
</up-cell-group>
|
||||
<!-- 操作列表区域 -->
|
||||
<view class="my-info-list">
|
||||
<up-cell-group>
|
||||
<up-cell
|
||||
size="large"
|
||||
title="修改密码"
|
||||
isLink
|
||||
class="edit-password"
|
||||
@tap="onEditPassWord"
|
||||
>
|
||||
<template #icon>
|
||||
<up-icon size="24" name="lock-open" color="#fa3534" />
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
|
||||
<up-button type="primary" text="退出账号" @tap="onLogOut" class="logout-btn" />
|
||||
</view>
|
||||
|
||||
<!-- 退出提示弹框 -->
|
||||
<up-modal
|
||||
title="温馨提示"
|
||||
:show="showModalLogout"
|
||||
:showCancelButton="true"
|
||||
content="是否确认退出当前账号？"
|
||||
@confirm="onConfirmLogout"
|
||||
@cancel="onCancelLogout"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const showModalLogout = ref(false)
|
||||
|
||||
// 修改密码
|
||||
const onEditPassWord = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/edit-password/index',
|
||||
})
|
||||
}
|
||||
// 退出登录
|
||||
const onLogOut = () => {
|
||||
showModalLogout.value = true
|
||||
}
|
||||
// 确认退出
|
||||
const onConfirmLogout = () => {
|
||||
uni.removeStorageSync('token')
|
||||
uni.removeStorageSync('userInfo')
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index',
|
||||
})
|
||||
}
|
||||
// 取消退出
|
||||
const onCancelLogout = () => {
|
||||
showModalLogout.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-container {
|
||||
|
|
@ -32,10 +84,10 @@
|
|||
background-color: #f0f2f5;
|
||||
.my-info {
|
||||
padding: 42rpx 0 42rpx 42rpx;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
.my-info-right {
|
||||
margin-left: 12rpx;
|
||||
font-size: 14px;
|
||||
|
|
@ -62,5 +114,23 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-info-list {
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.edit-password {
|
||||
margin-top: 24rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 质量检查一级页面 -->
|
||||
<view class="qualityInspection"> </view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.safetyViolations {
|
||||
height: 100%;
|
||||
background-color: #f6f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 安全措施一级页面 -->
|
||||
<view class="safetyMeasure"> </view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.safetyViolations {
|
||||
height: 100%;
|
||||
background-color: #f6f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,509 @@
|
|||
<template>
|
||||
<!-- 新增 修改 详情表单-->
|
||||
<up-form
|
||||
labelWidth="70"
|
||||
labelAlign="right"
|
||||
labelPosition="left"
|
||||
ref="addAndEditModelRef"
|
||||
:model="addAndEditModel"
|
||||
:rules="addAndEditModelRules"
|
||||
style="background-color: #fff; padding: 0 30rpx 20rpx"
|
||||
>
|
||||
<TitleTipModal :TitleTip="`项目信息`" />
|
||||
<up-form-item prop="projectName" label="项目名称" required>
|
||||
<up-input
|
||||
readonly
|
||||
border="none"
|
||||
placeholder="点击选择项目"
|
||||
v-model="addAndEditModel.projectName"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="arrow-right" @tap="onSelectProject" />
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="major" label="专业">
|
||||
<up-input
|
||||
border="none"
|
||||
readonly
|
||||
placeholder="点击选择专业"
|
||||
v-model="addAndEditModel.major"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="arrow-right" @tap="onSelectMajor" />
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="procedure" label="工序">
|
||||
<up-input
|
||||
border="none"
|
||||
readonly
|
||||
placeholder="点击选择工序"
|
||||
v-model="addAndEditModel.procedure"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="arrow-right" @tap="onSelectProcedure" />
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
|
||||
<TitleTipModal :TitleTip="`违章信息`" />
|
||||
<up-form-item prop="examiner" label="检查人">
|
||||
<up-input placeholder="请输入" border="none" />
|
||||
</up-form-item>
|
||||
<up-form-item prop="inspectTime" label="检查日期">
|
||||
<up-input
|
||||
readonly
|
||||
border="none"
|
||||
inputAlign="right"
|
||||
placeholder="点击选择检查日期"
|
||||
v-model="addAndEditModel.inspectTime"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="arrow-right" @tap="onSelectDate(1)" />
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="correctionTerm" label="整改期限" required>
|
||||
<up-input
|
||||
readonly
|
||||
border="none"
|
||||
placeholder="点击选择整改期限"
|
||||
inputAlign="right"
|
||||
v-model="addAndEditModel.correctionTerm"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="arrow-right" @tap="onSelectDate(2)" />
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="vrLocation" label="违章地点" required>
|
||||
<up-input placeholder="请输入" border="none" v-model="addAndEditModel.vrLocation" />
|
||||
</up-form-item>
|
||||
<up-form-item prop="vrDescribe" label="违章描述" required>
|
||||
<up-textarea
|
||||
placeholder="请输入"
|
||||
autoHeight
|
||||
border="none"
|
||||
v-model="addAndEditModel.vrDescribe"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item prop="vrImgList" label="违章照片(最多9张)" required>
|
||||
<up-upload
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="9"
|
||||
:fileList="addAndEditModel.vrImgList"
|
||||
@afterRead="onAfterReadVrImgList"
|
||||
@delete="onDeletePicVrImgList"
|
||||
/>
|
||||
</up-form-item>
|
||||
<TitleTipModal :TitleTip="`整改信息`" />
|
||||
<up-form-item prop="correctionPerson" label="整改人" required>
|
||||
<up-input
|
||||
placeholder="请输入"
|
||||
border="none"
|
||||
v-model="addAndEditModel.correctionPerson"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item prop="correctionTime" label="整改日期">
|
||||
<up-input
|
||||
readonly
|
||||
border="none"
|
||||
inputAlign="right"
|
||||
placeholder="点击选择整改日期"
|
||||
v-model="addAndEditModel.correctionTime"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="arrow-right" @tap="onSelectDate(3)" />
|
||||
</template>
|
||||
</up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="correctionDescribe" label="整改说明" required>
|
||||
<up-textarea
|
||||
autoHeight
|
||||
border="none"
|
||||
placeholder="请输入"
|
||||
v-model="addAndEditModel.correctionDescribe"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item prop="examiner" label="整改照片(最多9张)">
|
||||
<up-upload
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="9"
|
||||
:fileList="addAndEditModel.correctionImgList"
|
||||
@afterRead="onAfterReadCorrectionImgList"
|
||||
@delete="onDeleteCorrectionImgList"
|
||||
/>
|
||||
</up-form-item>
|
||||
|
||||
<up-button type="primary" text="提交" @tap="onSubmitForm" style="width: 100%" />
|
||||
</up-form>
|
||||
|
||||
<!-- 项目选择弹框 -->
|
||||
<up-popup :show="projectShow" mode="center" @close="onCloseProjectPopup">
|
||||
<view class="project-popup">
|
||||
<text>选择工程</text>
|
||||
<view style="width: 100%; margin: 18rpx 0">
|
||||
<up-input
|
||||
clearable
|
||||
placeholder="输入工程名称搜索"
|
||||
v-model.trim="onSearchProjectName"
|
||||
suffixIconStyle="color: #909399"
|
||||
>
|
||||
<template #suffix>
|
||||
<up-icon name="search" size="24" @tap="onSearchInProjectPopup" />
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
|
||||
<!-- 工程列表 -->
|
||||
<view class="project-list">
|
||||
<up-list @scrolltolower="onScrollTolower" style="width: 100%">
|
||||
<up-list-item v-for="item in 20" :key="item">
|
||||
<up-cell :title="`xxxxxxxxx工程-${item}`" @tap="onSelectProjectItem(item)">
|
||||
<template #icon>
|
||||
<text style="margin-right: 10rpx">
|
||||
{{ item }}
|
||||
</text>
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-list-item>
|
||||
</up-list>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<!-- 专业选择器 -->
|
||||
<up-picker
|
||||
keyName="label"
|
||||
:show="majorShow"
|
||||
:columns="majorList"
|
||||
@confirm="onConfirmMajor"
|
||||
@cancel="majorShow = !majorShow"
|
||||
/>
|
||||
<!-- 工序选择器 -->
|
||||
<up-picker
|
||||
keyName="label"
|
||||
:show="procedureShow"
|
||||
:columns="procedureList"
|
||||
@confirm="onConfirmProcedure"
|
||||
@cancel="procedureShow = !procedureShow"
|
||||
/>
|
||||
<!-- 年月日选择器 -->
|
||||
<up-datetime-picker
|
||||
mode="date"
|
||||
:show="dateShow"
|
||||
v-model="dateValue"
|
||||
:formatter="formatter"
|
||||
@confirm="onConfirmDate"
|
||||
@cancel="dateShow = !dateShow"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import TitleTipModal from '@/components/TitleTipModal/index'
|
||||
const addAndEditModelRef = ref(null)
|
||||
|
||||
const projectShow = ref(false) // 项目选择弹框
|
||||
const majorShow = ref(false) // 专业选择器
|
||||
const procedureShow = ref(false) // 工序选择器
|
||||
const dateShow = ref(false) // 年月日选择器
|
||||
const onSearchProjectName = ref('') // 项目搜索条件
|
||||
const dateValue = ref(Date.now()) // 年月日选择器数据源
|
||||
const dateType = ref(1)
|
||||
const props = defineProps({
|
||||
// 表单类型 1. 新增 2. 修改 3. 详情
|
||||
formType: {
|
||||
type: Number,
|
||||
default: () => 1,
|
||||
},
|
||||
})
|
||||
|
||||
// 表单数据源
|
||||
const addAndEditModel = reactive({
|
||||
projectName: '',
|
||||
procedure: '',
|
||||
major: '',
|
||||
examiner: '',
|
||||
inspectTime: '',
|
||||
correctionTerm: '',
|
||||
vrLocation: '',
|
||||
vrDescribe: '',
|
||||
vrImgList: [],
|
||||
correctionPerson: '',
|
||||
correctionDescribe: '',
|
||||
correctionTime: '',
|
||||
correctionImgList: [],
|
||||
})
|
||||
|
||||
// 校验规则
|
||||
const addAndEditModelRules = ref({
|
||||
projectName: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择项目名称',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
correctionTerm: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择整改期限',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
vrLocation: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写违章地点',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
vrDescribe: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写违章描述',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
vrImgList: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请上传违章照片',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
correctionPerson: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写整改人',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
correctionDescribe: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写整改说明',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
})
|
||||
// 项目数据源
|
||||
const projectList = ref([])
|
||||
// 专业数据源
|
||||
const majorList = reactive([
|
||||
[
|
||||
{
|
||||
label: '专业1',
|
||||
value: 2021,
|
||||
},
|
||||
{
|
||||
label: '专业2',
|
||||
value: 2022,
|
||||
},
|
||||
{
|
||||
label: '专业3',
|
||||
value: 2023,
|
||||
},
|
||||
{
|
||||
label: '专业4',
|
||||
value: 2024,
|
||||
},
|
||||
],
|
||||
])
|
||||
// 工序数据源
|
||||
const procedureList = reactive([
|
||||
[
|
||||
{
|
||||
label: '工序1',
|
||||
id: 2021,
|
||||
},
|
||||
{
|
||||
label: '工序2',
|
||||
id: 2022,
|
||||
},
|
||||
{
|
||||
label: '工序3',
|
||||
id: 2023,
|
||||
},
|
||||
{
|
||||
label: '工序4',
|
||||
id: 2024,
|
||||
},
|
||||
],
|
||||
])
|
||||
|
||||
// 日期格式化
|
||||
const formatter = (type, value) => {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
// 选择项目
|
||||
const onSelectProject = () => {
|
||||
console.log('---选择')
|
||||
|
||||
projectShow.value = true
|
||||
}
|
||||
// 搜索
|
||||
const onSearchInProjectPopup = () => {
|
||||
console.log('---搜索', onSearchProjectName.value)
|
||||
}
|
||||
|
||||
// 滚动触底事件
|
||||
const onScrollTolower = () => {
|
||||
console.log('---滚动触底')
|
||||
}
|
||||
|
||||
// 选择项目
|
||||
const onSelectProjectItem = (item) => {
|
||||
addAndEditModel.projectName = 'xxxxxx工程' + item
|
||||
projectShow.value = false
|
||||
}
|
||||
|
||||
// 关闭项目选择弹框
|
||||
const onCloseProjectPopup = () => {
|
||||
onSearchProjectName.value = ''
|
||||
projectShow.value = false
|
||||
}
|
||||
|
||||
// 选择专业
|
||||
const onSelectMajor = () => {
|
||||
majorShow.value = true
|
||||
}
|
||||
|
||||
// 专业确定
|
||||
const onConfirmMajor = (item) => {
|
||||
console.log('---确定', item.value[0].label)
|
||||
addAndEditModel.major = item.value[0].label
|
||||
majorShow.value = false
|
||||
}
|
||||
// 选择工序
|
||||
const onSelectProcedure = () => {
|
||||
procedureShow.value = true
|
||||
}
|
||||
|
||||
// 工序确定
|
||||
const onConfirmProcedure = (item) => {
|
||||
addAndEditModel.procedure = item.value[0].label
|
||||
procedureShow.value = false
|
||||
}
|
||||
|
||||
// 打开日期选择器
|
||||
const onSelectDate = (type) => {
|
||||
// type 为类型 1. 检查日期 2. 整改期限 3. 整改日期
|
||||
dateType.value = type
|
||||
dateShow.value = true
|
||||
}
|
||||
|
||||
// 日期确定
|
||||
const onConfirmDate = (item) => {
|
||||
const formatDateValue = formatDate(dateValue.value)
|
||||
if (dateType.value === 1) {
|
||||
addAndEditModel.inspectTime = formatDateValue
|
||||
}
|
||||
if (dateType.value === 2) {
|
||||
addAndEditModel.correctionTerm = formatDateValue
|
||||
}
|
||||
if (dateType.value === 3) {
|
||||
addAndEditModel.correctionTime = formatDateValue
|
||||
}
|
||||
dateShow.value = false
|
||||
console.log('---日期确定', formatDateValue)
|
||||
}
|
||||
|
||||
const formatDate = (timestamp) => {
|
||||
const date = new Date(timestamp)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
// 违章照片上传
|
||||
const onAfterReadVrImgList = (event) => {
|
||||
let lists = [].concat(event.file)
|
||||
lists.map((item) => {
|
||||
addAndEditModel.vrImgList.push({
|
||||
...item,
|
||||
})
|
||||
})
|
||||
}
|
||||
// 违章照片删除
|
||||
const onDeletePicVrImgList = (event) => {
|
||||
addAndEditModel.vrImgList.splice(event.index, 1)
|
||||
}
|
||||
|
||||
// 整改照片上传
|
||||
const onAfterReadCorrectionImgList = (event) => {
|
||||
let lists = [].concat(event.file)
|
||||
lists.map((item) => {
|
||||
addAndEditModel.correctionImgList.push({
|
||||
...item,
|
||||
})
|
||||
})
|
||||
}
|
||||
// 违章照片删除
|
||||
const onDeleteCorrectionImgList = (event) => {
|
||||
addAndEditModel.correctionImgList.splice(event.index, 1)
|
||||
}
|
||||
|
||||
// 提交
|
||||
const onSubmitForm = () => {
|
||||
console.log('---提交')
|
||||
addAndEditModelRef.value.validate().then((valid) => {
|
||||
if (valid) {
|
||||
console.log('校验通过')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-nav-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .u-form-item__body__right {
|
||||
padding: 0 60rpx;
|
||||
}
|
||||
|
||||
.project-popup {
|
||||
width: 90vw;
|
||||
height: 80vh;
|
||||
padding: 20rpx 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.project-list {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<!-- 安全违章一级页面 -->
|
||||
<view class="safetyViolations">
|
||||
<NavBarModal :navBarTitle="`安全违章`" />
|
||||
|
||||
<view class="container">
|
||||
<AddAndEditForm />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavBarModal from '@/components/NavBarModal/index'
|
||||
import AddAndEditForm from './componetns/addAndEditForm.vue'
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.safetyViolations {
|
||||
height: 100%;
|
||||
padding-top: 54px;
|
||||
box-sizing: border-box;
|
||||
.container {
|
||||
background-color: #f6f9ff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<!-- 卡片 -->
|
||||
<view class="icon-card">
|
||||
<view class="title">{{ cardTitle }}</view>
|
||||
<up-grid :border="false" col="4">
|
||||
<up-grid-item
|
||||
v-for="(icon, index) in props.iconList"
|
||||
:key="index"
|
||||
@tap="onHandleJumpPage(icon.jumpPath)"
|
||||
>
|
||||
<up-image width="56" height="56" shape="circle" :src="icon.iconUrl" />
|
||||
<text class="grid-text">{{ icon.title }}</text>
|
||||
</up-grid-item>
|
||||
</up-grid>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
iconList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
cardTitle: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
})
|
||||
|
||||
// 创建对子组件的引用
|
||||
const uToastRef = ref(null)
|
||||
|
||||
// 定义方法
|
||||
const onHandleJumpPage = (path) => {
|
||||
// 跳转对应的页面
|
||||
uni.navigateTo({
|
||||
url: path,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-card {
|
||||
width: 90%;
|
||||
background-color: #fff;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 6rpx;
|
||||
|
||||
.title {
|
||||
padding: 24rpx 32rpx;
|
||||
color: #353232;
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
font-size: 13px;
|
||||
padding: 12rpx 0;
|
||||
color: #575353;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,60 @@
|
|||
<template>
|
||||
<view class="workbenches-container"> </view>
|
||||
<!-- 工作台页面 -->
|
||||
<view class="workbenches-container">
|
||||
<iconCard :iconList="iconList_1" :cardTitle="`照片上传`" />
|
||||
<iconCard :iconList="iconList_2" :cardTitle="`照片查询`" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import iconCard from './components/icon-card.vue'
|
||||
import icon_1 from '../../static/image/home_1.png'
|
||||
import icon_2 from '../../static/image/home_2.png'
|
||||
import icon_3 from '../../static/image/home_3.png'
|
||||
import icon_4 from '../../static/image/home_4.png'
|
||||
import icon_5 from '../../static/image/home_5.png'
|
||||
import icon_6 from '../../static/image/home_6.png'
|
||||
const iconList_1 = ref([
|
||||
{
|
||||
jumpPath: '/pages/safetyViolations/index',
|
||||
title: '安全违章',
|
||||
iconUrl: icon_1,
|
||||
},
|
||||
{
|
||||
jumpPath: '/pages/qualityInspection/index',
|
||||
title: '质量检查',
|
||||
iconUrl: icon_2,
|
||||
},
|
||||
{
|
||||
jumpPath: '/pages/safetyMeasure/index',
|
||||
title: '安全措施落实',
|
||||
iconUrl: icon_3,
|
||||
},
|
||||
{
|
||||
jumpPath: '/pages/coordinatePhotos/index',
|
||||
title: '协调照片',
|
||||
iconUrl: icon_4,
|
||||
},
|
||||
{
|
||||
jumpPath: '/pages/importantMatters/index',
|
||||
title: '重要事项',
|
||||
iconUrl: icon_5,
|
||||
},
|
||||
])
|
||||
const iconList_2 = ref([
|
||||
{
|
||||
jumpPath: '/pages/comprehensiveQuery/index',
|
||||
title: '综合查询',
|
||||
iconUrl: icon_6,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
.workbenches-container {
|
||||
height: 100%;
|
||||
background-color: #f6f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in New Issue