142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<template>
|
||
<view class="con-body">
|
||
<view class="con-bg">
|
||
<!-- 头部 -->
|
||
<customHeader ref="customHeaderRef" :title="'修改周计划'" :leftFlag="true" :rightFlag="true">
|
||
<template #right>
|
||
<view class="head-right" @click="submitForm">
|
||
<uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
|
||
color="#B7D2FF"></uni-icons>保存
|
||
</view>
|
||
</template>
|
||
</customHeader>
|
||
<!-- 高度来避免头部遮挡 -->
|
||
<view class="top-height"></view>
|
||
|
||
<!-- 正文内容 -->
|
||
<view class="week-plan-title">
|
||
<view>姓名：赵欣鸣</view>
|
||
<view>2025-09 第 3 周</view>
|
||
</view>
|
||
<view class="white-bg white-bg-2">
|
||
<view class="w-b-title">2025-09-21 星期一
|
||
<text>
|
||
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
|
||
</text>
|
||
</view>
|
||
<view class="form-con">
|
||
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="top">
|
||
<uni-forms-item label="工作类型" name="workType">
|
||
<view class="form-picker">
|
||
<picker @change="changeValue" :value="workIndex" :range="workList">
|
||
<view class="flex">
|
||
{{workList[workIndex]}}
|
||
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="内容" name="content">
|
||
<uni-easyinput type="textarea" autoHeight v-model="formData.content" placeholder="请输入" class="form-texarea" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import customHeader from '@/components/customHeader.vue'
|
||
import multipleSelect from '@/components/multipleSelect.vue'
|
||
|
||
// 工作类型
|
||
let workIndex= ref(0);
|
||
const workList = ["外出","出差","公司","办事处"];
|
||
|
||
// 表单ref
|
||
const formRef = ref(null);
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
workType:'',
|
||
content: ''
|
||
});
|
||
// 验证规则
|
||
const rules = {
|
||
workType: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请选择工作类型' }
|
||
]
|
||
}
|
||
|
||
};
|
||
|
||
// 选择工作类型
|
||
const changeValue = (e) => {
|
||
workIndex = e.detail.value;
|
||
formData.value.workType = workList[workIndex]
|
||
};
|
||
|
||
// 保存
|
||
const submitForm = async () => {
|
||
try {
|
||
// 验证表单
|
||
await formRef.value.validate();
|
||
|
||
// 验证通过后的操作
|
||
uni.showToast({
|
||
title: '验证通过',
|
||
icon: 'success'
|
||
});
|
||
console.log('表单数据:', formData.value);
|
||
|
||
// 这里可以添加提交到服务器的代码
|
||
|
||
} catch (err) {
|
||
console.log('表单验证失败:', err);
|
||
}
|
||
};
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.week-plan-title{
|
||
color:#fff;
|
||
padding: 0 30rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.white-bg {
|
||
width: 690rpx;
|
||
margin: 0;
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
|
||
.white-bg.white-bg-2 {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.white-bg.white-bg-3 {
|
||
border-radius:0
|
||
}
|
||
|
||
.white-bg .w-b-title {
|
||
color: #3384DF;
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.form-con{
|
||
padding:30rpx 0 0;
|
||
}
|
||
:deep(.form-con .uni-forms-item){
|
||
margin-bottom:22px !important;
|
||
}
|
||
|
||
</style>
|