wuye / webui

<template>
  <el-dialog :title="$t('carCreateFeeAdd.createFee')" :visible.sync="visible" width="40%" @close="handleClose">
    <el-form :model="form" label-width="150px" ref="form" class="text-left">
      <el-form-item v-if="isMore" :label="$t('carCreateFeeAdd.chargeScope')" prop="locationTypeCd"
        :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredChargeScope') }]">
        <el-select v-model="form.locationTypeCd" style="width:100%">
          <el-option :label="$t('carCreateFeeAdd.community')" value="1000" />
          <el-option :label="$t('carCreateFeeAdd.parkingLot')" value="3000" />
        </el-select>
      </el-form-item>

      <el-form-item v-else :label="$t('carCreateFeeAdd.vehicle')" prop="locationTypeCdName">
        <el-input v-model="form.locationTypeCdName" disabled :placeholder="$t('carCreateFeeAdd.requiredChargeScope')" />
      </el-form-item>

      <el-form-item v-if="form.locationTypeCd === '3000' && isMore" :label="$t('carCreateFeeAdd.parkingLot')"
        prop="paId">
        <parking-area-select2 @change="handleParkingAreaChange" />
      </el-form-item>

      <el-form-item :label="$t('carCreateFeeAdd.feeType')" prop="feeTypeCd"
        :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredFeeType') }]">
        <el-select v-model="form.feeTypeCd" @change="handleFeeTypeChange" style="width:100%">
          <template v-for="item in feeTypeCds">
            <el-option :key="item.statusCd" :label="item.name" :value="item.statusCd"
              v-if="item.statusCd !== '888800010001' && item.statusCd !== '888800010009' && item.statusCd !== '888800010011'" />
          </template>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('carCreateFeeAdd.feeItem')" prop="configId"
        :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredFeeItem') }]">
        <el-select v-model="form.configId" @change="handleConfigChange" style="width:100%">
          <el-option v-for="item in feeConfigs" :key="item.configId" :label="item.feeName" :value="item.configId" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.computingFormula === '4004'" :label="$t('carCreateFeeAdd.chargeAmount')" prop="amount"
        :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredChargeAmount') }]">
        <el-input v-model="form.amount" />
      </el-form-item>

      <el-form-item v-if="isMore" :label="$t('carCreateFeeAdd.parkingSpaceStatus')" prop="carState">
        <el-checkbox-group v-model="form.carState">
          <el-checkbox label="S">{{ $t('carCreateFeeAdd.sold') }}</el-checkbox>
          <el-checkbox label="H">{{ $t('carCreateFeeAdd.rented') }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item :label="$t('carCreateFeeAdd.startTime')" prop="startTime"
        :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredStartTime') }]">
        <el-date-picker v-model="form.startTime" type="date" value-format="yyyy-MM-dd" style="width:100%"
          :placeholder="$t('carCreateFeeAdd.requiredStartTime')" />
      </el-form-item>

      <el-form-item :label="$t('carCreateFeeAdd.endTime')" prop="endTime"
        :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredEndTime') }]">
        <el-date-picker v-model="form.endTime" type="date" value-format="yyyy-MM-dd" style="width:100%"
          :placeholder="$t('carCreateFeeAdd.requiredEndTime')" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('carCreateFeeAdd.cancel') }}</el-button>
      <el-button type="primary" @click="handleSubmit">{{ $t('carCreateFeeAdd.submit') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveParkingSpaceCreateFee, listFeeConfigs } from '@/api/fee/carCreateFeeApi'
import { getCommunityId, getDict } from '@/api/community/communityApi'

export default {
  name: 'CarCreateFeeAdd',
  data() {
    return {
      visible: false,
      isMore: false,
      form: {
        feeTypeCds: [],
        feeConfigs: [],
        parkingAreas: [],
        locationTypeCd: '',
        locationObjId: '',
        carId: '',
        feeTypeCd: '',
        configId: '',
        carState: ['H', 'S'],
        locationTypeCdName: '',
        startTime: '',
        paId: '',
        feeFlag: '',
        computingFormula: '',
        amount: '',
        endTime: ''
      },
      feeTypeCds: [],
      feeConfigs: []
    }
  },
  created() {
    this.getDictData()
  },
  methods: {
    async getDictData() {
      try {
        this.feeTypeCds = await getDict('pay_fee_config', 'fee_type_cd')
      } catch (error) {
        console.error('获取字典数据失败:', error)
      }
    },
    open(params) {
      this.isMore = params.isMore || false

      if (!this.isMore && params.car) {
        this.form.locationTypeCd = '2000'
        this.form.locationObjId = params.car.carId
        this.form.carId = params.car.carId
        this.form.locationTypeCdName = params.car.carNum
      }

      this.visible = true
    },
    handleClose() {
      this.resetForm()
    },
    resetForm() {
      this.form = {
        ...this.form,
        locationTypeCd: '',
        locationObjId: '',
        carId: '',
        feeTypeCd: '',
        configId: '',
        startTime: '',
        paId: '',
        feeFlag: '',
        computingFormula: '',
        amount: '',
        endTime: ''
      }
    },
    async handleFeeTypeChange(feeTypeCd) {
      try {
        const res = await listFeeConfigs({
          feeTypeCd: feeTypeCd,
          isDefault: 'F',
          valid: '1',
          page: 1,
          row: 100
        })
        this.feeConfigs = res.feeConfigs || []
      } catch (error) {
        this.$message.error(this.$t('common.fetchError'))
      }
    },
    handleConfigChange(configId) {
      const config = this.feeConfigs.find(item => item.configId === configId)
      if (config) {
        this.form.feeFlag = config.feeFlag
        this.form.computingFormula = config.computingFormula
        this.form.endTime = ''
      }
    },
    handleParkingAreaChange(paId) {
      this.form.paId = paId
    },
    async handleSubmit() {
      try {
        await this.$refs.form.validate()

        // 设置收费对象ID
        if (this.form.locationTypeCd === '1000') {
          this.form.locationObjId = getCommunityId()
        } else if (this.form.locationTypeCd === '2000') {
          this.form.locationObjId = this.form.carId
        } else if (this.form.locationTypeCd === '3000') {
          this.form.locationObjId = this.form.paId
        } else {
          this.$message.error(this.$t('common.invalidScope'))
          return
        }

        // 提交表单
        //const res = ;
        await saveParkingSpaceCreateFee(this.form)
        this.$message.success(this.$t('common.operationSuccess'))
        this.visible = false
        this.$emit('success')

      } catch (error) {
        console.error('提交失败:', error)
      }
    }
  }
}
</script>
<style scoped>
.el-form-item {
  width: 90%;
}
</style>