dy-admin-manager/src/views/resetTeaming/modals/payment-cycle.vue

<template>
  <el-form
    label-width="160px"
    ref="form"
    :class="className"
    :model="form"
    label-suffix=": "
  >
    <el-form-item
      label="缴费金额(元)"
      prop="paymentAmount"
      :rules="[{required: true, message: '请输入缴费金额', trigger: 'blur'}]"
    >
      <el-input-number
        class="number-input"
        v-model="form.paymentAmount"
        :controls="false"
        :precision="2"
        :min="1"
        :disabled="isUserType && isCommon"
        placeholder="请输入缴费金额"
      />
    </el-form-item>
    <el-form-item
      label="缴费方式"
      prop="paymentPattern"
      :rules="[{required: true, message: '请选择缴费方式', trigger: 'change'}]"
    >
      <el-select style="width: 100%!important;" v-model="form.paymentPattern" placeholder="请选择缴费方式">
        <el-option
          v-for="item in paymentPatternTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option> 
      </el-select>
    </el-form-item>
    <el-form-item
      label="缴费时间"
      prop="paymentDate"
      v-if="isUserType"
      :rules="[{required: true, message: '请选择缴费时间', trigger: 'blur'}]"
    >
      <el-date-picker
        v-model="form.paymentDate"
        type="daterange"
        style="width: 100%;"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item
      label="缴费有效期"
      prop="paymentValid"
      :rules="[{required: true, message: '请选择缴费有效期', trigger: 'blur'}]"
    >
      <el-date-picker
        v-model="form.paymentValid"
        type="daterange"
        style="width: 100%;"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>
<script>
import { paymentPatternType } from '@/constant'
import { objectToOptions } from '@/utils'
export default {
  props: ['form', 'className', 'isUserType', 'isDisabled', 'isCommon'],
  data() {
    return {
      paymentPatternTypeOptions: objectToOptions(paymentPatternType),
    }
  },
}
</script>
<style lang="less" scoped>
.number-input{
  /deep/ .el-input__inner {
    text-align: left;
  }

  width: 100%;
}
</style>