chongqing-app/src/pages/seizureRecord/detail.vue

<template>
  <home-container>
    <view class="report-container">
      <!-- 表单区域 -->
      <uni-forms ref="form" :rules="rules" :modelValue="formData" label-position="top" err-show-type="modal">
        <!-- <scroll-view class="form-scroll" scroll-y> -->
        <!-- 安检员信息分组 (默认折叠) -->
        <uni-card :is-shadow="true" :shadow="shadow">
          <uni-collapse :accordion="false">
            <uni-collapse-item title="安检员信息" name="group1" :open="false" :show-animation="true">
              <template v-slot:title>

                <view class="header-section collapse-title">
                  <uni-row>
                    <uni-col :span="8">
                      <view>
                        <image v-if="currentUser.avatar" :src="currentUser.avatar" class="cu-avatar xl round"></image>
                      </view>
                    </uni-col>
                    <uni-col :span="16" class="flex padding justify-between">
                      <uni-row>
                        <uni-col>
                          <text>{{ formData.inspectUserName }} </text>
                          <!-- <text class="collapse-summary">{{ formData.securityLocationText }} </text>
                          <text class="collapse-summary">{{ formData.positionText }} </text> -->
                        </uni-col>
                        <uni-col>
                          <view v-if="formData.teamName"><text>查获班组：</text><text class="collapse-summary">{{
                            formData.teamName }}</text></view>
                          <view v-if="formData.reportTeamText"><text>上报班组：</text><text class="collapse-summary">{{
                            formData.reportTeamText }}</text></view>
                        </uni-col>
                      </uni-row>

                    </uni-col>
                  </uni-row>
                </view>
              </template>

              <uni-forms-item label="安检员" name="inspectUserName">
                <text class="form-value">{{ formData.inspectUserName }}</text>
              </uni-forms-item>

              <uni-forms-item label="查获时间" name="seizureTime">

                <!-- <uni-datetime-picker type="datetime" :readonly="true" :start="startDate" :end="endDate"
                  v-model="formData.seizureTime" /> -->
                <uni-easyinput v-model="formData.seizureTime" :disabled="true" class="custom-location" />

              </uni-forms-item>

              <uni-forms-item label="安检位置" name="securityLocation">
                <!-- <uni-data-picker :localdata="position_options" popup-title="请选择安检位置" v-model="formData.securityLocation"
                  :readonly="true" /> -->
                <uni-easyinput v-model="formData.securityLocation" :disabled="true" class="custom-location" />
              </uni-forms-item>

              <uni-forms-item label="安检岗位" name="checkMethod">
                <!-- <uni-data-picker :localdata="item_check_method_options" :map="dataOptionMap" popup-title="请选择安检岗位"
                  v-model="formData.checkMethod" :readonly="true" @change="onItemCheckMethodChange" /> -->

                <uni-easyinput v-model="formData.checkMethodText" :disabled="true" class="custom-location" />

              </uni-forms-item>

              <uni-forms-item label="查获班组" name="team">
                <!-- <uni-data-picker :localdata="teams" :readonly="true" popup-title="请选择查获班组" v-model="formData.team"
                  @change="onTeamChange" /> -->
                <uni-easyinput v-model="formData.team" :disabled="true" class="custom-location" />

              </uni-forms-item>

              <uni-forms-item label="上报班组" name="reportTeam">
                <!-- <uni-data-picker :localdata="teams" :readonly="true" popup-title="请选择上报班组" v-model="formData.reportTeam"
                  @change="onReportTeamChange" /> -->
                <uni-easyinput v-model="formData.reportTeam" :disabled="true" class="custom-location" />

              </uni-forms-item>
            </uni-collapse-item>
          </uni-collapse>
        </uni-card>

        <!-- 违禁品信息分组 -->
        <uni-card :is-shadow="true" :shadow="shadow">
          <uni-collapse :accordion="false" :value="['group2']">
            <uni-collapse-item title="违禁品信息" name="group2" :show-animation="true">
              <template v-slot:title>
                <view class="collapse-title">
                  <text>违禁品信息</text>
                  <text class="collapse-summary" v-if="formData.forbiddenName">{{ formData.forbiddenName }} ·
                    {{ formData.quantity }}{{ formData.unitText }}</text>

                </view>
              </template>

              <uni-forms-item label="违禁品类别/类型" name="forbiddenCategory">
                <!-- <uni-data-picker :localdata="item_category_options" :map="dataTreeOptionMap" popup-title="请选择违禁品类别"
                  v-model="formData.forbiddenCategory" @change="onCategoryChange" /> -->
                <uni-easyinput v-model="formData.forbiddenCategory" :disabled="true" class="custom-location" />

              </uni-forms-item>

              <uni-forms-item label="违禁品名称" name="forbiddenName">
                <!-- <uni-combox :candidates="forbiddenNames" v-model="formData.forbiddenName"></uni-combox> -->
                <uni-easyinput v-model="formData.forbiddenName" :disabled="true" class="custom-location" />

              </uni-forms-item>

              <uni-forms-item label="数量" name="quantity">
                <view class="number-input">
                  <uni-easyinput v-model="formData.quantity" type="number" placeholder="1" class="input-number"
                    :disabled="true" />
                  <!-- <uni-easyinput v-model="formData.unit" :disabled="true" class="custom-location" /> -->

                  <!-- <uni-data-picker :localdata="item_unit_options" :map="dataOptionMap" popup-title="请选择单位"
                    v-model="formData.unit" @change="onUnitChange" name="unit" /> -->
                </view>
              </uni-forms-item>
            </uni-collapse-item>
          </uni-collapse>
        </uni-card>

        <!-- 查获部位分组 -->
        <uni-card :is-shadow="true" :shadow="shadow">
          <uni-collapse :accordion="false" :value="['group3']">
            <uni-collapse-item title="查获部位" name="group3" :show-animation="true">
              <template v-slot:title>
                <view class="collapse-title">
                  <text>查获部位</text>

                  <text class="collapse-summary" v-if="formData.partCategoryText">{{ formData.partCategoryText }} ·
                    {{ formData.customLocation || formData.locationText }}</text>
                </view>
              </template>

              <uni-forms-item label="部位类别/类型" name="partCategory">

                <!-- <uni-data-picker :localdata="check_point_options" :map="dataTreeOptionMap" popup-title="请选择部位类别"
                  v-model="formData.partCategory" @change="onPartCategoryChange" /> -->
                <uni-easyinput v-model="formData.partCategory" :disabled="true" class="custom-location" />

              </uni-forms-item>


              <uni-forms-item label="具体位置" name="location">
                <view class="location-input">
                  <!-- <uni-easyinput v-model="formData.customLocation" :disabled="true" class="custom-location" /> -->
                  <uni-easyinput v-model="formData.customLocation" :disabled="true" class="custom-location" />

                </view>
              </uni-forms-item>

              <uni-forms-item label="处理方式" name="handlingMethod">
                <!-- <uni-data-picker popup-title="请选择处理方式" :map="dataOptionMap" :localdata="item_handling_method_options"
                  v-model="formData.handlingMethod" @change="onMethodChange" /> -->
                <uni-easyinput v-model="formData.handlingMethod" :disabled="true" class="custom-location" />

              </uni-forms-item>

              <uni-forms-item label="是否隐匿夹带" name="isConcealed">
                <uni-easyinput v-model="formData.isConcealed" :disabled="true" class="custom-location" />

              </uni-forms-item>
            </uni-collapse-item>
          </uni-collapse>
        </uni-card>

        <!-- 违禁品照片分组 -->
        <uni-card :is-shadow="true" :shadow="shadow">
          <uni-collapse :accordion="false" :value="['group4']">
            <uni-collapse-item title="违禁品照片" name="group4" :show-animation="true">
              <uni-file-picker v-if="ready" v-model="formData.images" limit="8" title="最多上传8张" :image-styles="imageStyles"
                fileMediatype="image" mode="grid" :readonly="true"/>
            </uni-collapse-item>
          </uni-collapse>
        </uni-card>

        <!-- 旅客信息分组 -->
        <!-- <uni-card :is-shadow="true" :shadow="shadow">
          <uni-collapse :accordion="false" :value="['group5']">
            <uni-collapse-item title="旅客信息" name="group5" :show-animation="true">
              <template v-slot:title>
                <view class="collapse-title">
                  <text>旅客信息</text>
                  <text class="collapse-summary" v-if="formData.passengerName">{{ formData.passengerName }} ·
                    {{ formData.flightNumber || '无航班号' }}</text>
                </view>
              </template>

              <uni-forms-item label="姓名" name="passengerName">

                <uni-easyinput v-model="formData.passengerName" placeholder="请输入旅客姓名" :disabled="true" />
              </uni-forms-item>

              <uni-forms-item label="证件号" name="passengerId">
                <uni-easyinput v-model="formData.passengerId" placeholder="请输入证件号 (可选)" :disabled="true" />
              </uni-forms-item>

              <uni-forms-item label="航班号" name="flightNumber">
                <uni-easyinput v-model="formData.flightNumber" placeholder="例如：CA1234 (可选)" :disabled="true" />
              </uni-forms-item>
            </uni-collapse-item>
          </uni-collapse>
        </uni-card> -->

        <!-- 提交按钮 -->
        <!-- <button type="primary" class="submit-btn" @click="submitForm">提交上报</button> -->
        <!-- </scroll-view> -->
      </uni-forms>

    </view>
  </home-container>

</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";

import { treeSelectByType } from "@/api/system/common"
import useDictMixin from '@/utils/dict'
import { addSeizureRecord } from '@/api/seizure/seizureRecord.js'
import { getInfo } from '@/api/seizure/seizureRecord.js'





export default {
  components: { HomeContainer },

  mixins: [useDictMixin],


  computed: {
    currentUser() {
      return this.$store.state.user;
    }
  },
  data() {
    return {
       ready: false,
      // 阴影效果配置
      shadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
      // 表单数据
      formData: {
        // 安检员信息
        inspectUserName: this.$store.state.user.name,
        inspectUserId: this.$store.state.user.id,
        seizureTime: this.formatDateTime(new Date()),
        securityLocation: '',
        securityLocationText: '',
        checkMethod: '',    // 检查岗位
        checkMethodText: '',
        teamId: 1,
        team: 'morning-a',
        teamName: '早班A组',
        reportTeam: '',
        reportTeamText: '',

        // 违禁品信息
        forbiddenCategory: '',
        forbiddenCategoryText: '',
        forbiddenType: '',
        forbiddenTypeText: '',
        forbiddenName: '',
        quantity: '1',
        unit: '',
        unitText: '',

        // 查获部位
        partCategory: '',
        partCategoryText: '',
        partType: '',
        partTypeText: '',
        location: '',
        locationText: '',
        customLocation: '',
        handlingMethod: '',
        handlingMethodDesc: '',
        isConcealed: 'no',

        // 旅客信息
        passengerName: '',
        passengerId: '',
        flightNumber: '',

        // 照片
        images: [],

        //暂时不要
        channelCode: '无',
        attendanceId: 111111,
        attendanceTeamId: 111111,
        attendanceTeamName: '无',
        attendanceDepartmentId: 111111,
        attendanceDepartmentName: '无',
        attendanceStationId: 111111,
        attendanceStationName: '无',
        regionalCode: 111111,
        regionalName: '无',
        terminlCode: 111111,
        terminlName: '无',
        channelName: '无',
        inspectTeamId: 111111,
        inspectTeamName: '无',
        inspectDepartmentId: 111111,
        inspectDepartmentName: '无',
        checkMethodDesc: '无',

      },


      // 验证规则
      rules: {

      },

      // 数据选项
      item_check_method_options: [],   // 检查岗位
      position_options: [],  // 位置通道
      teams: [
        { text: '早班A组', value: 'morning-a' },
        { text: '早班B组', value: 'morning-b' },
        { text: '中班A组', value: 'noon-a' },
        { text: '中班B组', value: 'noon-b' },
        { text: '晚班A组', value: 'night-a' },
        { text: '晚班B组', value: 'night-b' }
      ],
      forbiddenNames: ['打火机', '汽油'],
      item_category_options: [], // 物品分类
      typeData: [],
      item_unit_options: [],
      check_point_options: [],
      partTypeData: [],
      locations: [
        { text: '上衣口袋', value: 'jacket-pocket' },
        { text: '裤子口袋', value: 'pants-pocket' },
        { text: '行李箱夹层', value: 'luggage-interlayer' },
        { text: '背包侧袋', value: 'bag-side' }
      ],
      item_handling_method_options: [], // 处理方式
      concealOptions: [
        { name: '是', value: 'yes' },
        { name: '否', value: 'no' }
      ],

      // 其他数据
      startDate: '2020-01-01',
      endDate: '2030-12-31',
      imageStyles: {
        width: 80,
        height: 80,
        border: {
          color: '#eee',
          width: '1px',
          style: 'solid'
        }
      },
      dataOptionMap: { text: 'label', value: 'value' }, // 级联字段映射关系
      dataTreeOptionMap: { text: 'label', value: 'code' } // 级联字段映射关系树结构
    }
  },
  onLoad(options) {
    // 从 URL 参数取 id
    const id = options.id
    if (id) {
      this.loadDetail(id)
    }


  },
  methods: {
    async loadDetail(id) {
      uni.showLoading({ title: '加载中...' })
      try {
        console.log("id", id)
        const res = await getInfo(id)
        console.log("res", res)
        if (res.code === 200) {
          this.formData = res.data
          this.formData.securityLocation = res.data.regionalName
          this.formData.securityLocationText = res.data.regionalName
          this.formData.team = res.data.inspectStationName+" / "+res.data.inspectDepartmentName+" / "+res.data.inspectTeamName
          this.formData.teamName = res.data.inspectStationName+" / "+res.data.inspectDepartmentName+" / "+res.data.inspectTeamName,
          this.formData.reportTeam = res.data.attendanceTeamName
          this.formData.reportTeamText = res.data.attendanceTeamName
          this.formData.passengerId = res.data.passengerCard
          this.formData.flightNumber = res.data.passengerFlight
          this.formData.checkMethodText = res.data.checkMethodDesc








          this.formData.forbiddenCategory = res.data.itemSeizureItemsList[0].categoryNameOne,
            this.formData.forbiddenCategoryText = res.data.itemSeizureItemsList[0].categoryNameOne,
            this.formData.forbiddenType = res.data.itemSeizureItemsList[0].forbiddenTypeText,
            this.formData.forbiddenTypeText = res.data.itemSeizureItemsList[0].forbiddenTypeText,
            this.formData.quantity = res.data.itemSeizureItemsList[0].quantity,
            this.formData.unit = res.data.itemSeizureItemsList[0].unitDesc,
            this.formData.unitDesc = res.data.itemSeizureItemsList[0].unitDesc,

            this.formData.forbiddenName = res.data.itemSeizureItemsList[0].itemName,

            this.formData.partCategory = res.data.itemSeizureItemsList[0].checkPositionNameOne,
            this.formData.partCategoryText = res.data.itemSeizureItemsList[0].checkPositionNameOne,
            this.formData.customLocation = res.data.itemSeizureItemsList[0].checkPositionSpecific,

            this.formData.isActiveConcealment = res.data.itemSeizureItemsList[0].isActiveConcealment,

            this.formData.handlingMethod = res.data.itemSeizureItemsList[0].handlingMethodDesc,
            this.formData.handlingMethodDesc = res.data.itemSeizureItemsList[0].handlingMethodDesc,
            console.log("")
            if(res.data.itemSeizureItemsList[0].baseAttachmentList){
this.formData.images = res.data.itemSeizureItemsList[0].baseAttachmentList.map(item => ({
              url: item.attachmentUrl,
              name: item.attachmentUrl.split('/').pop(),
              extname: '.' + item.attachmentUrl.split('.').pop()
            }));
            }

            

            // 数据装完后才让组件渲染
    this.$nextTick(() => (this.ready = true));

          if (res.data.itemSeizureItemsList[0].isActiveConcealment == 1) {
            this.formData.isConcealed = '是'
          } else {
            this.formData.isConcealed = '否'
          }
          console.log("this.formData", this.formData)
          // 初始化下拉选项
          // this.initOptions()
        } else {
          uni.showToast({ title: '详情加载失败', icon: 'none' })
        }
      } catch (e) {
        console.log("eee", e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },



    formatDateTime(date) {
      const y = date.getFullYear();
      const m = String(date.getMonth() + 1).padStart(2, '0');
      const d = String(date.getDate()).padStart(2, '0');
      const h = String(date.getHours()).padStart(2, '0');
      const mm = String(date.getMinutes()).padStart(2, '0');
      const s = String(date.getSeconds()).padStart(2, '0');
      return `${y}-${m}-${d} ${h}:${mm}:${s}`;
    },

    // 安检位置变化
    onLocationChange(e) {
      this.formData.securityLocation = e.detail.value[1]?.value || '';
      this.formData.securityLocationText = e.detail.value[1]?.label || e.detail.value[0]?.label || '';
    },

    // 通用取值：只拿最后一级
    lastValue(e) {
      const val = e.detail.value;
      if (Array.isArray(val)) return val[val.length - 1] || '';
      if (val && typeof val === 'object') return val.value || '';
      return String(val || '');
    },

    // 安检岗位
    onItemCheckMethodChange(e) {
      this.formData.checkMethod = e.detail.value[0]?.value || '';
      this.formData.checkMethodText = e.detail.value[0]?.text || e.detail.value[0]?.text || '';
    },

    // 查获班组变化
    onTeamChange(e) {
      this.formData.team = e.detail.value;
      this.formData.teamName = e.detail.value[1]?.label || e.detail.value[0]?.label || '';
    },

    // 上报班组变化
    onReportTeamChange(e) {
      this.formData.reportTeam = e.detail.value;
      this.formData.reportTeamText = e.detail.value[1]?.label || e.detail.value[0]?.label || '';
    },

    // 违禁品类别变化
    onCategoryChange(e) {
      this.formData.forbiddenCategory = e.detail.value[0].value;
      this.formData.forbiddenCategoryText = e.detail.value[0].label;
      this.formData.forbiddenType = '';
      this.formData.forbiddenTypeText = '';

      // 根据类别加载类型数据  需要调用接口

    },

    // 违禁品类型变化
    onTypeChange(e) {
      this.formData.forbiddenType = e.detail.value[0].value;
      this.formData.forbiddenTypeText = e.detail.value[0].text;
      this.formData.forbiddenName = this.formData.forbiddenName + ' - ' + e.detail.value[0].text;
    },

    // 单位变化
    onUnitChange(e) {

      this.formData.unit = e.detail.value;
      this.formData.unitText =
        this.item_unit_options.find(item => item.value === e.detail.value)?.label || '件';
    },

    // 部位类别变化
    onPartCategoryChange(e) {
      this.formData.partCategory = e.detail.value[0].value;
      this.formData.partCategoryText = e.detail.value[0].text;
      this.formData.partType = '';
      this.formData.partTypeText = '';
      this.formData.customLocation = '';

      // 根据部位类别加载类型数据
      if (this.formData.partCategory === 'body') {
        this.partTypeData = [
          { text: '口袋', value: 'pocket' },
          { text: '腰带', value: 'belt' },
          { text: '鞋底', value: 'shoe' }
        ];
      } else if (this.formData.partCategory === 'luggage') {
        this.partTypeData = [
          { text: '夹层', value: 'interlayer' },
          { text: '侧袋', value: 'sidepocket' },
          { text: '主仓', value: 'main' }
        ];
      } else {
        this.partTypeData = [
          { text: '外层', value: 'outer' },
          { text: '内层', value: 'inner' },
          { text: '特殊部位', value: 'special' }
        ];
      }
    },

    // 部位类型变化
    onPartTypeChange(e) {
      this.formData.partType = e.detail.value[0].value;
      this.formData.partTypeText = e.detail.value[0].text;
    },

    // 具体位置选择
    onLocationSelectChange(e) {
      this.formData.location = e.detail.value;
      this.formData.locationText = this.locations.find(item => item.value === e.detail.value)?.text || '';
      this.formData.customLocation = this.formData.locationText;
    },

    // 处理方式变化
    onMethodChange(e) {
      this.formData.handlingMethod = e.detail.value;
      this.formData.handlingMethodDesc = this.item_handling_method_options.find(item => item.value === e.detail.value)?.label || '';
    },

    // 是否有意隐匿选择
    bindConcealChange(e) {
      this.formData.isConcealed = e.detail.value;
    },

    // 提交表单

  }
}
</script>

<style lang="scss" scoped>
.report-container {
  // background-color: #f5f5f5;
  min-height: 100vh;
  padding-top: 180rpx;
}


.form-scroll {
  height: calc(100vh - 50px);
  padding: 1px;
  box-sizing: border-box;
}

/* 卡片样式 */
::v-deep .uni-card {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;

  .uni-card__content {
    padding: 0;
  }
}

/* 折叠面板标题 */
.collapse-title {
  display: flex;
  flex-direction: column;
  padding: 12px 15px;

  .collapse-summary {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
  }
}

/* 表单项样式 */
::v-deep .uni-forms-item {
  margin-bottom: 0;
  padding: 0 15px;

  .uni-forms-item__label {
    padding: 12px 0 8px;
    font-size: 14px;
    color: #666;
    width: auto !important;
  }

  .uni-forms-item__content {
    padding: 0 0 12px;
    border-bottom: 1px solid #f0f0f0;
  }

  &:last-child .uni-forms-item__content {
    border-bottom: none;
  }
}

.picker-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;

  .picker-value {
    font-size: 15px;
    color: #333;

    &:empty::after {
      content: attr(placeholder);
      color: #999;
    }
  }

  &.disabled {
    opacity: 0.5;
  }
}

.form-value {
  font-size: 15px;
  color: #333;
  height: 44px;
  line-height: 44px;
}

.number-input {
  display: flex;
  align-items: center;
  height: 44px;

  .input-number {
    flex: 1;
  }

  .unit-picker {
    width: 80px;
    margin-left: 10px;
  }
}

.location-input {
  display: flex;
  height: 44px;

  .picker-box {
    width: 120px;
  }

  .custom-location {
    flex: 1;
    margin-left: 0px;
  }
}

.radio-group {
  display: flex;
  padding: 8px 0;

  .radio-item {
    display: flex;
    align-items: center;
    margin-right: 30px;

    text {
      font-size: 15px;
      color: #333;
      margin-left: 5px;
    }
  }
}

.submit-btn {
  margin-top: 20px;
  width: calc(100% - 30px);
  margin-left: 15px;
}

/* 底部弹窗样式调整 */
::v-deep .uni-popup__wrapper {
  border-radius: 16px 16px 0 0;

  .uni-popup__wrapper-box {
    max-height: 70vh;
    overflow-y: auto;
  }

  .uni-data-pickerview {
    padding-bottom: 20px;
  }
}
</style>