141 lines
3.9 KiB
Vue
141 lines
3.9 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>
|