IVIEW FORM组件动态添加表单,并深层校验

循环遍历出来的表单的 :prop 需要制定当前index拼接,单独指定 :rules

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
      <div class="addReceiver">
        <div class="case">
          <h3><span>案场基本信息</span><span class="delCase" @click="caseUnbound"
              v-if="delCaseBtnFlag">删除案场</span></h3>
          <Row :gutter="24">
            <Col span="10">
            <FormItem label="案场:" prop="housesId" class="house_search">
              <Select v-model="formValidate.housesId" label-in-value placeholder="请选择案场"
                filterable clearable :remote-method="remoteMethodHouses"
                @on-change='caseChange'>
                <Option v-for="(option,index) in optionsHouse" :value="option.housesId"
                  :key="index">
                  {{`${option.housesName}(${option.orgName})-${option.city}`}}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="呼入号归属地:" prop="city">
              <!-- <Cascader :data="cityAttrSort" v-model="formValidate.cityId"
                :load-data="loadDataCity"></Cascader> -->
              <Select v-model="formValidate.city" clearable placeholder="请选择归属地"
                @on-change='cityChange'>
                <Option v-for="(option,index) in cityList" :value="option.city" :key="index">
                  {{option.city}}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="呼入号码:" prop="inPhoneX">
              <Select v-model="formValidate.inPhoneX" placeholder="请选择呼入隐私号"
                @on-open-change='callInPhoneSel' clearable>
                <Option v-for="item in callInPhoneList" :key="item.id" :value="item.phoneX">
                  {{item.phoneX}}</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
        </div>
        <div class="receiverForm">
          <h3>承接人信息 <span class="addBtn" @click="creatAdd">新增</span></h3>
          <div class="receiverGun">
            <div class="receiverFormBox" v-for="(item,index) in formValidate.adviserList"
              :key="index">
              <div class="addData">
                <Row :gutter="24">
                  <Col span="12">
                  <FormItem label="顾问姓名:" :prop="`adviserList.${index}.userId`"
                    :rules="ruleValidate.userId" class="house_search">
                    <Select v-model="item.userId" label-in-value clearable
                      :disabled="item.disabledFlag" filterable placeholder="请选择顾问"
                      @on-change='e=>{return receiverUserChange(e,index)}'>
                      <Option v-for="(option,index) in optionsUser" :value="option.userId"
                        :key="index">
                        {{`${option.userName}(${option.workNo})`}}</Option>
                    </Select>
                  </FormItem>
                  </Col>
                  <Col span="12">
                  <FormItem label="呼出号归属地:" :prop="`adviserList.${index}.city`"
                    :rules="ruleValidate.city">
                    <Select v-model="item.city" clearable :disabled="item.disabledFlag"
                      placeholder="请选择归属地"
                      @on-change='e=>{return receivercityChange(e,index)}'>
                      <Option v-for="(option,index) in cityList" :value="option.city"
                        :key="index">
                        {{option.city}}</Option>
                    </Select>
                  </FormItem>
                  </Col>
                  <Col span="12">
                  <FormItem label="呼出隐私号:" :prop="`adviserList.${index}.outPhoneX`"
                    :rules="ruleValidate.outPhoneX">
                    <Select v-model="item.outPhoneX" placeholder="请选择呼出隐私号"
                      :disabled="item.disabledFlag"
                      @on-open-change='e=>{return receiverCallInPhoneSel(e,item,index)}'
                      clearable>
                      <Option v-for="(option,index) in item.callOutPhoneList" :key="index"
                        :value="option.phoneX">
                        {{option.phoneX}}</Option>
                    </Select>
                    <!-- <Select v-model="item.outPhoneX" :disabled="item.disabledFlag"
                      placeholder="请选择呼出隐私号">
                      <Option v-for="item in callInPhoneList" :key="item.id" :value="item.key">
                        {{item.value}}</Option>
                    </Select> -->
                  </FormItem>
                  </Col>
                  <Col span="12">
                  <FormItem label="承接线索类型:" :prop="`adviserList.${index}.clueType1`"
                    :rules="ruleValidate.clueType1">
                    <CheckboxGroup v-model="item.clueType1">
                      <Checkbox :disabled="item.disabledFlag" :label="1"> 电话</Checkbox>
                      <Checkbox :disabled="item.disabledFlag" :label="2"> 表单</Checkbox>
                    </CheckboxGroup>
                  </FormItem>
                  </Col>
                </Row>
              </div>
              <div class="addBtn">
                <span v-if="!item.disabledFlag" @click="addBtnSave(index)">保存</span>
                <span v-if="!item.disabledFlag" @click="addBtnCancel(item,index)">取消</span>
                <span v-if="item.disabledFlag" @click="addBtnEdit(index)">编辑</span>
                <span @click="addBtnDel(index)">删除</span>
              </div>
            </div>
          </div>
          <!-- <dt-info :label-width="90" ref='info2' :options='options2' style="width: 45%;" /> -->
        </div>
      </div>


    </Form>
formValidate: {
          housesName: '',
          housesId: null,
          buildingId: null,
          buildingName: '',
          city: '',
          inPhoneX: '',
          adviserList: [
          {
            phone: '',
            disabledFlag: false,
            callOutPhoneList: [],
            userName: '',
            userId: '',
            userNameInfo: {},
            city: '',
            receiverCityInfo: '',
            outPhoneX: '',
            clueType: null,
            clueType1: []
          }],

        },
        ruleValidate: {
          housesId: [
          {
            required: true,
            message: '请选择案场',
            trigger: 'blur',
            type: 'number'
          }, ],
          city: [
            { required: true, message: '请选择城市', trigger: 'blur' },
          ],
          inPhoneX: [
            { required: true, message: '请选择呼入隐私号', trigger: 'blur' },
          ],

          userId: [
            { pattern: /^\d+$/, required: true, message: '请选择顾问', trigger: 'blur' },
            // { required: true, message: '请选择顾问', trigger: 'blur' },
          ],

          city: [
            { required: true, message: '请选择城市', trigger: 'blur' },

          ],
          outPhoneX: [
            { pattern: /^\d+$/, required: true, message: '请选择呼出隐私号', trigger: 'blur' },
          ],
          clueType1: [
          {
            pattern: /^\d+$/,
            required: true,
            type: 'array',
            message: '请选择承接线索类型',
            trigger: 'blur'
          }, ],

        },

参考:https://www.cnblogs.com/shb190802/p/12800726.html

 

posted @ 2022-08-23 17:08  张小中  阅读(485)  评论(0编辑  收藏  举报