| | |
| | | |
| | | <view class="form-item"> |
| | | <text class="item-label">转运状态</text> |
| | | <u-select |
| | | v-model="statusSelectVisible" |
| | | :list="statusOptions" |
| | | :default-value="[statusIndex]" |
| | | :confirm-text="'确定'" |
| | | :cancel-text="'取消'" |
| | | @confirm="onStatusConfirm" |
| | | :disabled="!isEdit" |
| | | <view |
| | | class="picker-trigger" |
| | | @click="isEdit && handleStatusClick()" |
| | | :class="{ disabled: !isEdit }" |
| | | > |
| | | <template #default> |
| | | <view class="picker-trigger"> |
| | | <text>{{ |
| | | getTransportStatusText(transportData.transitStatus) |
| | | }}</text> |
| | |
| | | color="#999" |
| | | ></u-icon> |
| | | </view> |
| | | </template> |
| | | </u-select> |
| | | </view> |
| | | |
| | | <view class="form-item"> |
| | |
| | | @cancel="showTimePicker = false" |
| | | title="选择出发时间" |
| | | ></u-datetime-picker> |
| | | |
| | | <!-- 状态选择器 --> |
| | | <u-picker |
| | | :show="statusPickerVisible" |
| | | :columns="[statusLabels]" |
| | | :defaultIndex="[statusCurrentIndex]" |
| | | keyName="label" |
| | | @confirm="onStatusPickerConfirm" |
| | | @cancel="statusPickerVisible = false" |
| | | title="请选择转运状态" |
| | | ></u-picker> |
| | | <!-- 加载状态 --> |
| | | <u-loading-icon :show="loading" :text="loadingText"></u-loading-icon> |
| | | </view> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, onMounted } from "vue"; |
| | | import { ref, computed, onMounted,watch } from "vue"; |
| | | import attachmentUpload from "@/components/attachment"; |
| | | import { useUserStore } from "@/stores/user"; |
| | | |
| | |
| | | const loading = ref(false); |
| | | const saving = ref(false); |
| | | const isEdit = ref(false); |
| | | const statusPickerVisible = ref(false); |
| | | const statusCurrentIndex = ref(0); |
| | | const transportId = ref(null); |
| | | const showTimePicker = ref(false); |
| | | const departureTimeValue = ref(0); |
| | | const statusSelectVisible = ref(false); |
| | | const isReadonly = ref(false); |
| | | const attachments = ref([]); |
| | | |
| | | |
| | | // 字典选项 |
| | | const statusOptions = ref([ |
| | |
| | | return true; // 根据实际权限控制 |
| | | }); |
| | | |
| | | // 计算索引 |
| | | const statusIndex = computed(() => { |
| | | if (!transportData.value.transitStatus) return 0; |
| | | return statusOptions.value.findIndex( |
| | | (item) => item.value === transportData.value.transitStatus, |
| | | ); |
| | | // 修改或添加计算属性 |
| | | const statusLabels = computed(() => { |
| | | return statusOptions.value.map((item) => item.label); |
| | | }); |
| | | |
| | | // 修改 statusIndex 计算属性 |
| | | const statusIndex = computed(() => { |
| | | if (!transportData.value.transitStatus) return 0; |
| | | const index = statusOptions.value.findIndex( |
| | | (item) => item.value == transportData.value.transitStatus, |
| | | ); |
| | | return index >= 0 ? index : 0; |
| | | }); |
| | | |
| | | // 添加监听,当转运状态变化时更新当前索引 |
| | | watch( |
| | | () => transportData.value.transitStatus, |
| | | (newVal) => { |
| | | if (newVal !== undefined && newVal !== null) { |
| | | const index = statusOptions.value.findIndex( |
| | | (item) => item.value == newVal, |
| | | ); |
| | | if (index >= 0) { |
| | | statusCurrentIndex.value = index; |
| | | } |
| | | } |
| | | }, |
| | | { immediate: true }, |
| | | ); |
| | | onLoad(async (options) => { |
| | | if (options.id) { |
| | | transportId.value = options.id; |
| | |
| | | // 新增模式 |
| | | isEdit.value = true; |
| | | await initNewTransport(options.caseId, options.caseNo); |
| | | } |
| | | |
| | | // 确保状态索引正确初始化 |
| | | if (transportData.value.transitStatus !== undefined) { |
| | | const index = statusOptions.value.findIndex( |
| | | (item) => item.value == transportData.value.transitStatus, |
| | | ); |
| | | statusCurrentIndex.value = index >= 0 ? index : 0; |
| | | } |
| | | }); |
| | | |
| | |
| | | |
| | | if (res.data.annexfilesList) { |
| | | attachments.value = res.data.annexfilesList; |
| | | attachments.value.forEach(item=>{ |
| | | item.url=item.opath, |
| | | item.name=item.fileName |
| | | }) |
| | | attachments.value.forEach((item) => { |
| | | (item.url = item.opath), (item.name = item.fileName); |
| | | }); |
| | | } |
| | | |
| | | // 更新状态索引 |
| | | if (transportData.value.transitStatus !== undefined) { |
| | | const index = statusOptions.value.findIndex( |
| | | (item) => item.value == transportData.value.transitStatus, |
| | | ); |
| | | statusCurrentIndex.value = index >= 0 ? index : 0; |
| | | } |
| | | } else { |
| | | throw new Error(res.msg || "数据加载失败"); |
| | |
| | | showTimePicker.value = false; |
| | | }; |
| | | |
| | | // 状态确认 |
| | | const onStatusConfirm = (e) => { |
| | | if (e[0]) { |
| | | transportData.value.transitStatus = e[0].value; |
| | | // 删除原来的 onStatusConfirm 函数,添加新的函数 |
| | | const handleStatusClick = () => { |
| | | if (!isEdit.value) return; |
| | | statusPickerVisible.value = true; |
| | | }; |
| | | |
| | | const onStatusPickerConfirm = (e) => { |
| | | const index = e.indexs[0]; |
| | | if (statusOptions.value[index]) { |
| | | transportData.value.transitStatus = statusOptions.value[index].value; |
| | | } |
| | | statusSelectVisible.value = false; |
| | | statusPickerVisible.value = false; |
| | | }; |
| | | |
| | | // 预览文件 |
| | |
| | | const handleBaseUpload = (file) => { |
| | | console.log("基础附件上传成功:", file); |
| | | attachments.value.push(file); |
| | | |
| | | }; |
| | | |
| | | // 处理其他附件上传 |
| | | const handleFilesUpdate = (files) => { |
| | | console.log(files,'files'); |
| | | console.log(files, "files"); |
| | | |
| | | attachments.value = files.map((file) => ({ |
| | | ...file, |
| | |
| | | // : file.url, |
| | | })); |
| | | console.log(attachments.value); |
| | | |
| | | }; |
| | | |
| | | // 预览文件 - 修改为使用完整URL |
| | |
| | | .form-content { |
| | | padding: 30rpx; |
| | | } |
| | | .picker-trigger { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | height: 88rpx; |
| | | padding: 0 20rpx; |
| | | background: #f5f5f5; |
| | | border-radius: 8rpx; |
| | | border: 1rpx solid #dcdfe6; |
| | | font-size: 28rpx; |
| | | color: #303133; |
| | | |
| | | &.disabled { |
| | | background: #f8f9fa; |
| | | color: #909399; |
| | | } |
| | | |
| | | text { |
| | | font-size: 28rpx; |
| | | } |
| | | } |
| | | .form-section { |
| | | background: #fff; |
| | | border-radius: 20rpx; |