zhengyiming
2025-03-17 b19e3c0ba4db231b82b2655efe0b73a81571fb84
packages/components/src/views/GasBillRecharge/GasBillRechargeBaseForm.vue
@@ -6,6 +6,14 @@
    label-position="top"
    class="order-bill-recharge electric"
  >
    <slot name="top"></slot>
    <NutFormItem label="所在城市" class="bole-form-item" prop="areaList" required>
      <ChooseInputWithAreaPicker
        :columns="cityAreaTree"
        v-model="form.areaList"
        placeholder="请选择所在城市"
      ></ChooseInputWithAreaPicker>
    </NutFormItem>
    <NutFormItem label="缴费户号" class="bole-form-item" prop="gasAccount" required>
      <NutInput
        v-model.trim="form.gasAccount"
@@ -23,24 +31,31 @@
import { Form as NutForm, FormItem as NutFormItem, Input as NutInput } from '@nutui/nutui-taro';
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import { reactive, ref, computed, watch } from 'vue';
import { useGetGasParValue } from '../../hooks';
import ChooseInputWithAreaPicker from '../../components/Input/ChooseInputWithAreaPicker.vue';
import { useAllAreaList } from '../../hooks/area';
import { FormValidator } from '../../utils';
defineOptions({
  name: 'GasBillRechargeBaseForm',
});
const form = defineModel<{
  province: string;
  city: string;
  gasAccount: string;
}>('form');
const { findAreaNameFromCode, cityAreaTree } = useAllAreaList();
const { gasParValueList } = useGetGasParValue();
const form = defineModel<{
  // province: string;
  // city: string;
  gasAccount: string;
  areaList: string[];
}>('form');
const rules = reactive<FormRules>({
  province: [{ required: true, message: '请选择所在区域' }],
  city: [{ required: true, message: '请选择所在城市' }],
  gasAccount: [{ required: true, message: '请输入缴费户号', regex: /^\d{13}$/ }],
  // gasAccount: [{ required: true, message: '请输入缴费户号', regex: /^\d{13}$/ }],
  gasAccount: [{ required: true, message: '请输入缴费户号' }],
  areaList: [
    { required: true, message: '请选择所在城市', validator: FormValidator.validatorArray },
  ],
});
const formRef = ref<any>(null);