ks-app-employment-service/packageRc/pages/daiban/addbangfu.vue

<template>
  <view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');">
    <view class="input-outer-part">
      <scroll-view scroll-y="true" style="height: calc(100vh - 100px)">
        <view class="inner">
          <view class="inner-part">
            <view class="form-item required">
              <label class="form-label">被帮扶对象</label>
              <input
                v-model="serviceForm.serviceObjectName"
                style="border: none; width: 100%;"
                placeholder="请输入"
                disabled
              />
            </view>
            
            <view class="form-item required">
              <label class="form-label">帮扶方式</label>
              <view class="form-select-wrapper" style="position: relative;">
                
                <!-- 显示区域 -->
                <view
                  class="form-value"
                  style="width: 100%;"
                  @click="showDemandTypePicker = !showDemandTypePicker"
                  :class="!serviceForm.demandType ? 'noValue' : ''"
                >
                  {{ getDemandTypeLabel(serviceForm.demandType) || "请选择" }}
                  </view>
                
                <!-- 选项列表 -->
                <view 
                  v-if="showDemandTypePicker" 
                  class="options-list"
                  style="position: absolute; top: 45px; left: 0; right: 0; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 8rpx; z-index: 1000; max-height: 200px; overflow-y: auto;"
                >
                  <view 
                    v-for="option in demandTypeOptions" 
                    :key="option.value"
                    @click="selectDemandType(option.value)"
                    style="padding: 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer;"
                  >
                    {{ option.label }}
                  </view>
                </view>
              </view>
            </view>
            
            <view class="form-item required" v-if="serviceForm.demandType">
              <label class="form-label">帮扶时间 <text class="required">*</text></label>
              <picker style="width: 100%;" mode="date" :value="serviceForm.practicalSolutionTime" start="1900-01-01" end="2100-12-31" @change="onDateChange">
                <view class="date-picker-wrapper" :class="{ noValue: !serviceForm.practicalSolutionTime }">
                  <view v-if="serviceForm.practicalSolutionTime" class="date-value">{{ serviceForm.practicalSolutionTime }}</view>
                  <view v-else>请选择</view>
                  <view class="arrow-down">▼</view>
                </view>
              </picker>
            </view>
            
            <view class="form-item required" v-if="serviceForm.demandType">
              <label class="form-label">经办人</label>
              <view class="form-select-wrapper">
                <uni-data-select
                  style="width: 100%" 
                  v-model="serviceForm.agentUserId" 
                  placeholder="请选择经办人" 
                  :localdata="jingbrList1"
                  @change="handleAgentChange"
                > 
              </uni-data-select>
              <!-- <el-option 
                v-for="item in jingbrList1" 
                :key="item.userId" 
                :label="item.nickName" 
                :value="item.userId" 
              ></el-option>  -->
              </view>
            </view>
            
            <view class="form-item required" v-if="serviceForm.demandType == '5'">
              <label class="form-label">电话沟通结果</label>
              <view class="form-value" @click="showPicker('dhgtjg')" :class="{ noValue: !serviceForm.dhgtjg }">
                <view style="flex-grow: 1;">{{ getDhgtjgLabel(serviceForm.dhgtjg) || "请选择" }}</view>
                <text class="arrow-down">▼</text>
              </view>
            </view>
            
            <view class="form-item required" v-if="serviceForm.demandType">
              <label class="form-label">帮扶内容</label>
              <view class="date-picker-wrapper" :class="{ noValue: !serviceForm.serviceContent }">
                <picker 
                  @change="onServiceContentChange" 
                  :range="serviceContentOptions.map(item => item.label)" 
                  :value="getServiceContentIndex(serviceForm.serviceContent)"
                  mode="selector"
                >
                  <view class="date-value">
                    <view style="flex-grow: 1;">{{ getServiceContentLabel(serviceForm.serviceContent) || "请选择" }}</view>
                    <text class="arrow-down">▼</text>
                  </view>
                </picker>
              </view>
            </view>
            <!-- v-if="serviceForm.demandType" -->
            <view class="form-item required" v-if="serviceForm.demandType">
              <label class="form-label">人员状态</label>
              <view class="date-picker-wrapper" :class="{ noValue: !serviceForm.personStatus }">
                <picker 
                  @change="onpersonStatusChange" 
                  :range="personStatusOptions.map(item => item.label)" 
                  :value="getpersonStatusIndex(serviceForm.personStatus)"
                  mode="selector"
                >
                  <view class="date-value">
                    <view style="flex-grow: 1;">{{ getpersonStatusLabel(serviceForm.personStatus) || "请选择" }}</view>
                    <text class="arrow-down">▼</text>
                  </view>
                </picker>
              </view>
            </view>
          </view>

          <view class="inner-part" v-if="serviceForm.demandType">
            <view class="form-item required" v-if="serviceForm.demandType">
              <label class="form-label">帮扶情况说明</label>
              <textarea
                v-model="serviceForm.blqksm"
                style="width: 100%; border: none; padding: 10px 0; min-height: 100px; resize: none;"
                placeholder="请输入"
              ></textarea>
            </view>
          </view>

          <view class="inner-part" v-if="serviceForm.demandType">
            <view class="form-item">
              <label class="form-label">附件</label>
              <view style="width: 100%; padding: 10px 0;">
                <button @click="chooseFiles" style="padding: 0px 24rpx; border: 1px solid #e4e4e4;border-radius: 4px;">
                  上传附件 (最多6个)
                </button>
                <!-- 简单的文件列表显示 -->
                <view class="file-list">
                  <view v-for="(file, index) in fileList" :key="index" class="file-item">
                    {{ file.file.name }}
                    <text @click="removeFile(index)" style="margin-left: 10px; cursor: pointer; color: #ff4444;">删除</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="button-area">
        <view class="btn" @click="cancelPage">取消</view>
        <view class="btn save" @click="submitServiceForm">保存</view>
      </view>
    </view>
    
    <!-- 通用选择器 -->
    <view v-if="currentPicker" class="datetime-picker-overlay">
      <view class="datetime-picker">
        <view class="picker-header">
          <text @click="cancelPicker" style="padding: 10px;">取消</text>
          <text style="font-weight: bold;">{{ getPickerTitle(currentPicker) }}</text>
          <text @click="confirmPicker" style="padding: 10px; color: #007AFF;">确定</text>
        </view>
        <view class="picker-content">
          <view v-if="currentPicker === 'practicalSolutionTime'">
            <input 
              type="datetime-local" 
              v-model="manualDateTime" 
              style="width: 100%; padding: 15px; box-sizing: border-box;"
            />
          </view>
          <view v-else class="picker-options">
            <view 
              v-for="option in getPickerOptions(currentPicker)" 
              :key="option.value"
              @click="selectPickerOption(option.value)"
              :class="{ 'selected': selectedOption === option.value }"
            >
              {{ option.label }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/utilsRc/config.js'
import {getJbrInfo} from "@/apiRc/personinfo/index"
import {addInvestigate} from "@/apiRc/needs/person"
import { getDicts } from '@/apiRc/system/dict.js';
import { getToken } from "@/utilsRc/auth";
export default {
  data() {
    return {
      serviceForm: {
        serviceObjectName: '',
        userId: '',
        demandType: '', // 帮扶方式
        practicalSolutionTime: '', // 帮扶时间
        agentUserId: '', // 经办人ID
        agentUserName: '', // 经办人名称
        dhgtjg: '', // 电话沟通结果
        serviceContent: '', // 帮扶内容
        blqksm: '', // 帮扶情况说明
        personStatus: '', // 人员状态
        fileUrl: [] // 附件
      },
      
      personStatusMap: {
        '1': '就业政策咨询',
        '2': '职业指导',
        '3': '技能培训',
        '4': '岗位推荐',
        '5': '创业指导',
        '6': '其他'
      },
      serviceContentMap: {
        '1': '就业政策咨询',
        '2': '职业指导',
        '3': '技能培训',
        '4': '岗位推荐',
        '5': '创业指导',
        '6': '其他'
      },
      // 帮扶内容选项（picker组件需要的格式）
      serviceContentOptions: [
        { value: '1', label: '就业政策咨询' },
        { value: '2', label: '职业指导' },
        { value: '3', label: '技能培训' },
        { value: '4', label: '岗位推荐' },
        { value: '5', label: '创业指导' },
        { value: '6', label: '其他' }
      ],
      showDemandTypePicker: false, // 控制帮扶方式选择器显示
      jingbrList1:[],
      currentPicker: null,
      selectedOption: '',
      manualDateTime: this.formatDateTime(new Date()),
      fileList: [], // 初始化文件列表
      // 帮扶方式选项 (4: 上门服务, 5: 电话回访)
      demandTypeOptions: [
        { value: '4', label: '上门服务' },
        { value: '5', label: '电话回访' }
      ],
      // 经办人选项（模拟数据）
      jingbrList: [
        { userId: '1', nickName: '张三' },
        { userId: '2', nickName: '李四' },
        { userId: '3', nickName: '王五' }
      ],
      // 电话沟通结果选项
      dhgtjgOptions: [
        { value: '1', label: '已沟通' },
        { value: '2', label: '未接通' },
        { value: '3', label: '拒绝沟通' }
      ],
      // 帮扶内容选项（通过字典获取）
      serviceContentOptions: [],
      // 人员状态选项（通过字典获取）
      personStatusOptions: []
    };
  },
    created(){
      this.getJbrInfo11();
      // 使用getDicts API获取帮扶内容字典数据
      getDicts('qcjy_fwnr').then(res => {
        if (res.data && Array.isArray(res.data)) {
          // 将字典数据转换为picker组件需要的格式
          this.serviceContentOptions = res.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
          }));
        }
      });
      getDicts('qyjy_dhgtjg').then(res => {
        if (res.data && Array.isArray(res.data)) {
          // 将字典数据转换为picker组件需要的格式
          this.dhgtjgOptions = res.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
          }));
        }
      });
      
      // 使用getDicts API获取人员状态字典数据
      getDicts('qcjy_ryzt').then(res => {
        if (res.data && Array.isArray(res.data)) {
          this.personStatusOptions = res.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
          }));
        }
      });
    },
  onLoad(options) {
    if (options.name) {
      this.serviceForm.serviceObjectName = options.name;
    }
    if (options.id) {
      this.serviceForm.userId = options.id;
    }
  },
  methods: {
    // 选择图片
    chooseFiles() {
      const remainingCount = 6 - this.fileList.length;
      if (remainingCount <= 0) {
        uni.showToast({ title: '最多只能上传6张图片', icon: 'none' });
        return;
      }
      console.log(wx, 'wx')
      wx.chooseMessageFile({
        count: remainingCount,
        extension: ['.png', '.jpg', '.jpeg', '.doc', '.docx', '.pdf', '.xls', '.xlsx' ],
        success: (res) => { 
          console.log('选择文件成功:', res);
          let arr = [];

          let path = "";
						const twoMBInBytes = 2 * 1024 * 1024; // 2MB转换为字节数
            res.tempFiles.forEach((file) => {

              if (file.size > twoMBInBytes) {
                uni.showToast({
                  title: "图片大小不能超过2MB",
                  icon: "none",
                });
                return;
              }
              if (res.tempFiles && res.tempFiles.length > 0) {
                path = file.path;
                if (['png', 'jpg', 'jpeg', 'doc', 'docx', 'pdf', 'xls', 'xlsx' ].indexOf(path.split(".")[1])!=-1) {
                  uni.showLoading();
                  const tempFilePath = file;
                  uni.uploadFile({
                    url: config.baseUrl+'/system/oss/upload', //图片上传地址
                    filePath: tempFilePath.path,
                    name: 'file',
                    formData: {},
                    header: {
                      // 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJQSlUyVlJCc1E1aXRMMWgxdjNkcVh2eER1c2VVc0hvRiIsInVzZXJJZCI6MX0.z4Z2XqgXyU0GQU-i7Bsa5T-zCKApTxj1YQ73rk7bAVo'
                      'Authorization': 'Bearer ' + getToken(),
                    },
                    success: (res) => {
                      var data = JSON.parse(res.data);
                      console.log(data, 'sdfjiosdjfoi')
                      if(data.code==200) {
                        this.fileList.push({
                          url: data.data.url,
                          file: file
                        })
                        this.serviceForm.fileUrl = this.fileList.map(item => item.url).join(',')
                        this.$forceUpdate()
                        uni.hideLoading();
                      } else {
                        uni.hideLoading();
                        uni.showToast({
                          title: res.msg || '上传失败',
                          icon: 'none',
                          duration: 2000
                        });
                      }
                    },
                    fail: (error) => {
                      uni.showToast({
                        title: '上传失败',
                        icon: 'none'
                      });
                      console.error(error);
                    }
                  })
                } else {
                  uni.showToast({
                    icon: "none",
                    duration: 1500,
                    title: `只能选择${['.png', '.jpg', '.jpeg', '.doc', '.docx', '.pdf', '.xls', '.xlsx' ].join('、')}格式文件`,
                  });
                }
              }
            })



          // // 添加新选择的图片到列表
          // res.tempFiles.forEach((item, index) => {
          //   this.fileList.push({
          //     url: item.path,
          //     file: res.tempFiles[index]
          //   });
          // });
          // 更新 serviceForm.fileUrl
          // this.updateFileUrls();
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
        }
      });
      // uni.chooseImage({
      //   count: remainingCount,
      //   sizeType: ['original', 'compressed'],
      //   sourceType: ['album', 'camera'],
      //   success: (res) => {
      //     // 添加新选择的图片到列表
      //     res.tempFilePaths.forEach((path, index) => {
      //       this.fileList.push({
      //         url: path,
      //         file: res.tempFiles[index]
      //       });
      //     });
      //     // 更新 serviceForm.fileUrl
      //     this.updateFileUrls();
      //   },
      //   fail: (err) => {
      //     console.error('选择图片失败:', err);
      //   }
      // });
    },
    
    // 移除图片
    removeImage(index) {
      this.fileList.splice(index, 1);
      // 更新 serviceForm.fileUrl
      this.updateFileUrls();
    },
    
    // 更新文件URL数组
    updateFileUrls() {
      this.serviceForm.fileUrl = this.fileList.map(file => file.url);
    },
    getJbrInfo11(){
        getJbrInfo().then(res => {
          console.log(res, 'joisdfjiosdfjio')
          this.jingbrList1=res.map(ele => {
            return {
              value: ele.userId,
              text: ele.nickName
            }
          })
        })
    },
    // 显示选择器
    showPicker(type) {
      this.currentPicker = type;
      if (type !== 'practicalSolutionTime') {
        this.selectedOption = this.serviceForm[type] || '';
      }
    },
    // 取消选择器
    cancelPicker() {
      this.currentPicker = null;
    },
    // 确认选择器
    confirmPicker() {
      if (this.currentPicker === 'practicalSolutionTime') {
        this.manualConfirmDate();
      } else {
        this.serviceForm[this.currentPicker] = this.selectedOption;
        // 特殊处理经办人，同时保存名称
        if (this.currentPicker === 'agentUserId') {
          const agent = this.jingbrList1.find(item => item.value === this.selectedOption);
          this.serviceForm.agentUserName = agent ? agent.nickName : '';
        }
      }
      this.currentPicker = null;
    },
    // 选择选项
    selectPickerOption(value) {
      this.selectedOption = value;
    },
    // 获取选择器标题
    getPickerTitle(type) {
      const titles = {
        demandType: '选择帮扶方式',
        practicalSolutionTime: '选择帮扶时间',
        agentUserId: '选择经办人',
        dhgtjg: '选择电话沟通结果',
        serviceContent: '选择帮扶内容'
      };
      return titles[type] || '请选择';
    },
    // 获取选择器选项
    getPickerOptions(type) {
      const options = {
        demandType: this.demandTypeOptions || [],
        agentUserId: this.jingbrList1 && this.jingbrList1.length > 0 ? 
          this.jingbrList1.map(item => ({ value: item.userId, label: item.nickName })) : [],
        dhgtjg: this.dhgtjgOptions || [],
        serviceContent: this.serviceContentOptions || []
      };
      return options[type] || [];
    },
    // 获取帮扶方式标签
    getDemandTypeLabel(value) {
      const option = this.demandTypeOptions.find(item => item.value === value);
      return option ? option.label : '';
    },
    // 获取经办人名称
    getAgentUserName(userId) {
      const agent = this.jingbrList1.find(item => item.value === userId);
      return agent ? agent.nickName : '';
    },
    // 处理经办人选择变化
    handleAgentChange(value) {
      if (!value || !this.jingbrList1 || !this.jingbrList1.length) {
        this.serviceForm.agentUserName = '';
        return;
      }
      const user = this.jingbrList1.find(item => item.value === value);
      if (user) {
        this.serviceForm.agentUserName = user.nickName;
      } else {
        this.serviceForm.agentUserName = '';
      }
    },
    
    // 处理帮扶方式选择变化
    handleDemandTypeChange(event) {
      this.serviceForm.demandType = event.target.value;
    },
    
    // 选择帮扶方式
    selectDemandType(value) {
      this.serviceForm.demandType = value;
      this.showDemandTypePicker = false;
    },
    // 获取电话沟通结果标签
    getDhgtjgLabel(value) {
      const option = this.dhgtjgOptions.find(item => item.value === value);
      return option ? option.label : '';
    },
    // 获取帮扶内容标签
    getServiceContentLabel(value) {
      return this.serviceContentMap[value] || '';
    },
    // 获取帮扶内容标签
    getpersonStatusLabel(value) {
      let arr = this.personStatusOptions.filter(item => item.value == value)
      return arr.length ? arr[0].label : ''
    },
    
    // 处理帮扶内容选择变化
    onServiceContentChange(e) {
      const index = e.detail.value;
      if (this.serviceContentOptions && this.serviceContentOptions[index]) {
        this.serviceForm.serviceContent = this.serviceContentOptions[index].value;
      }
    },
    // 处理人员状态选择变化
    onpersonStatusChange(e) {
      const index = e.detail.value;
      if (this.personStatusOptions && this.personStatusOptions[index]) {
        this.serviceForm.personStatus = this.personStatusOptions[index].value;
      }
    },
    
    // 获取帮扶内容当前索引
    getServiceContentIndex(value) {
      if (!value) return 0;
      const index = this.serviceContentOptions.findIndex(item => item.value === value);
      return index !== -1 ? index : 0;
    },
    getpersonStatusIndex(value) {
      if (!value) return 0;
      const index = this.personStatusOptions.findIndex(item => item.value === value);
      return index !== -1 ? index : 0;
    },
    // 格式化日期时间为YYYY-MM-DDTHH:MM格式（datetime-local输入框需要）
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day}T${hours}:${minutes}`;
    },
    
    // 日期选择变化处理
    onDateChange(e) {
      this.serviceForm.practicalSolutionTime = e.detail.value;
    },
    
    // 手动确认日期选择
    manualConfirmDate() {
      // 将datetime-local格式转换为显示格式
      const date = new Date(this.manualDateTime);
      this.serviceForm.practicalSolutionTime = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    
    // 触发文件上传
    triggerFileUpload() {
      if (this.serviceForm.fileUrl.length < 6) {
        // 模拟添加文件
        const mockFiles = ['文档.pdf', '图片.jpg', '表格.xlsx', '报告.docx'];
        const randomFile = mockFiles[Math.floor(Math.random() * mockFiles.length)];
        this.serviceForm.fileUrl.push({
          name: randomFile,
          url: `mock-url/${Date.now()}/${randomFile}`
        });
      } else {
        uni.showToast({ title: '最多只能上传6个文件', icon: 'none' });
      }
    },
    
    // 删除文件
    removeFile(index) {
      this.serviceForm.fileUrl.splice(index, 1);
    },
    
    // 取消页面
    cancelPage() {
      uni.navigateBack();
    },
    
    // 验证表单
    validateForm() {
      if (!this.serviceForm.serviceObjectName) {
        uni.showToast({ title: '请填写被帮扶对象', icon: 'none' });
        return false;
      }
      if (!this.serviceForm.demandType) {
        uni.showToast({ title: '请选择帮扶方式', icon: 'none' });
        return false;
      }
      
      // 如果是上门服务或电话回访，需要验证更多字段
      if (this.serviceForm.demandType === '4' || this.serviceForm.demandType === '5') {
        if (!this.serviceForm.practicalSolutionTime) {
          uni.showToast({ title: '请选择帮扶时间', icon: 'none' });
          return false;
        }
        if (!this.serviceForm.agentUserId) {
          uni.showToast({ title: '请选择经办人', icon: 'none' });
          return false;
        }
        if (this.serviceForm.demandType === '5' && !this.serviceForm.dhgtjg) {
          uni.showToast({ title: '请选择电话沟通结果', icon: 'none' });
          return false;
        }
        if (!this.serviceForm.serviceContent) {
          uni.showToast({ title: '请选择帮扶内容', icon: 'none' });
          return false;
        }
        if (!this.serviceForm.blqksm) {
          uni.showToast({ title: '请填写帮扶情况说明', icon: 'none' });
          return false;
        }
        if (!this.serviceForm.personStatus) {
          uni.showToast({ title: '请选择人员状态', icon: 'none' });
          return false;
        }
      }
      
      return true;
    },
    setName(){
			this.serviceForm.serviceObjectName = this.name
			this.serviceForm.serviceObjectId = this.userId
			this.serviceForm.userId = this.userId

			this.$forceUpdate();
			},
    // 提交表单
    async submitServiceForm() {
      try {
        // 验证表单
        if (!this.validateForm()) {
          return;
        }
        
        // 模拟加载状态
        uni.showLoading({ title: '保存中...' });
        
        // 准备提交数据
        const submitData = {
          ...this.serviceForm,
          // 格式化文件数据
          // fileUrl: JSON.stringify(this.serviceForm.fileUrl)
          fileUrl: this.fileList.map(item => item.url).join(',')
        };
        
        // 打印提交数据
        console.log('提交数据:', submitData);
        
        // 模拟API调用延迟
        // await new Promise(resolve => setTimeout(resolve, 1000));
        addInvestigate(submitData).then(res => { 
          if(res.code == 200){
            uni.showToast({ title: '保存成功', icon: 'success' });
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        })
      } catch (error) {
        console.error(error);
        uni.showToast({ title: '保存失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  background-color: #f4f4f4 !important;
  background-image: url("~@/packageRc/static/images/top.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.input-outer-part {
  padding: 32rpx;
  position: relative;
  border-radius: 32rpx 32rpx 0 0;
}

.inner {
  .inner-part {
    background: #fff;
    padding: 24rpx 32rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
  }
}

.self-form {
  // 表单样式
}

/* 表单项目样式 */
.form-item {
  display: flex;
  align-items: flex-start;
  padding-bottom: 15px;
  box-sizing: border-box;
}

/* 选择器容器样式 */
.form-select-wrapper {
  flex: 1;
  position: relative;
}
  
.form-select {
  width: 100%;
  padding: 0 20rpx;
  line-height: 64rpx;
  box-sizing: border-box;
  border: 1px solid #e6e6e6;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
  
.form-select.noValue {
  color: #999;
}
  
.form-select-wrapper::after {
  content: '▼';
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
  font-size: 20rpx;
}

.form-item.required .form-label::after {
  content: '*';
  color: #ff4444;
  margin-left: 4px;
}

.form-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 14px;
  color: #333;
  height: 64rpx;
  display: flex;
  align-items: center;
}

.form-value {
  flex: 1;
  height: 64rpx;
  font-size: 14px;
  color: #666;
  box-sizing: border-box;
  border: 1px solid #e6e6e6;
  display: flex;
  padding: 0 24rpx;
  // justify-content: space-between;
  align-items: center;
}

input{
  flex: 1;
  line-height: 64rpx;
  height: 64rpx;
  font-size: 14px;
  color: #666;

}

.form-value.noValue {
  color: #999;
}

.arrow-down {
  font-size: 12px;
  color: #A6A6A6;
}

.edit-icon {
  font-size: 14px;
  color: #A6A6A6;
}

.form-input-wrapper {
  flex: 1;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

picker{
  width: 100%;
  .date-value{
    width: 100%;
    display: flex;
  }
}
.form-input-wrapper input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
}

.form-input-wrapper .edit-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 单选按钮样式 */
.radio-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  margin-right: 6px;
}

.radio-label {
  font-size: 14px;
  color: #666;
}

/* 文件列表样式 */
.file-list {
  margin-top: 10px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
}

/* 文件上传样式 */
.file-upload-container {
  width: 100%;
  padding: 10px 0;
}
/* 选择器样式 */
.datetime-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.datetime-picker {
  background-color: #fff;
  border-radius: 12px;
  width: 85%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 17px;
  background-color: #fafafa;
}

.picker-header > text:first-child {
  color: #666;
  font-size: 16px;
}

.picker-header > text:last-child {
  color: #1d64cf;
  font-size: 16px;
  font-weight: 500;
}

.picker-content {
  max-height: 280px;
  overflow-y: auto;
}

.picker-options {
  padding: 5px 0;
}

.picker-options > view {
  padding: 16px 20px;
  font-size: 16px;
  color: #333;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.picker-options > view:not(:last-child) {
  border-bottom: 1px solid #f8f8f8;
}

.picker-options > view:active {
  background-color: #f5f5f5;
}

.picker-options > view.selected {
  background-color: #f0f7ff;
  color: #1d64cf;
  font-weight: 500;
}

/* 添加选中状态的对勾图标 */
.picker-options > view.selected::after {
  content: '✓';
  position: absolute;
  right: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #1d64cf;
}

/* 日期选择器样式 */
.date-picker-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24rpx;
  height: 64rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

// .date-picker-wrapper.noValue {
//   background-color: #f9f9f9;
// }

.date-value {
  color: #333;
  width: 100%
}

.icon-right {
  color: #999;
  font-size: 16px;
}

.noValue {
  color: #c0c4cc;
}

.button-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .btn {
    line-height: 72rpx;
    width: 176rpx;
    margin-right: 16rpx;
    font-size: 28rpx;
    border: 1px solid #b8c5d4;
    color: #282828;
    text-align: center;
    border-radius: 8rpx;
  }

  .save {
    background: linear-gradient(103deg, #1d64cf 0%, #1590d4 99%);
    color: #fff;
    border: 0;
    flex-grow: 1;
  }
}
</style>