坐骑管理Modal框布局

    <Modal v-model="theNewMount" width="800" @on-cancel="theNewMounttitle = false" :mask-closable="false" footer-hide >
      <!-- 坐骑名 -->
      <div
        v-if="!theNewMounttitle"
        style="color:#000; text-align:center; border-bottom:1px solid #ccc; padding-bottom:10px"
      >
        <span>{{$t('theMountOf')}}</span>
      </div>
      <!-- 新增坐骑 -->
      <div
        v-else
        style="color:#000; text-align:center; border-bottom:1px solid #ccc; padding-bottom:10px"
      >
        <span>{{$t('theNewMount')}}</span>
      </div>
      <Form
        ref="formValidate"
        :model="formValidate"
        :label-width="80"
        :rules="ruleValidate"
        label-position="left"
      >
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 中文 -->
            <FormItem :label="$t('chinese')" prop="chinese">
              <Input v-model="formValidate.chinese" :disabled="editor" :maxlength="50"/>
            </FormItem>
          </Col>
          <Col span="2">&nbsp;</Col>
          <Col span="10">
            <!-- 阿拉伯语 -->
            <FormItem :label="$t('theArabicLanguage')">
              <Input v-model="formValidate.theArabicLanguage" :disabled="editor" :maxlength="50"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 英文 -->
            <FormItem :label="$t('english')" prop="english">
              <Input v-model="formValidate.english" :disabled="editor" :maxlength="50"/>
            </FormItem>
          </Col>
          <Col span="2">&nbsp;</Col>
          <Col span="10">
            <!-- 土耳其语 -->
            <FormItem :label="$t('turkish')">
              <Input v-model="formValidate.turkish" :disabled="editor" :maxlength="50"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 印尼语 -->
            <FormItem :label="$t('indonesian')">
              <Input v-model="formValidate.indonesian" :disabled="editor" :maxlength="50"/>
            </FormItem>
          </Col>
          <Col span="2">&nbsp;</Col>
          <Col span="10">
            <!-- 俄语 -->
            <FormItem :label="$t('russian')">
              <Input v-model="formValidate.russian" :disabled="editor"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 获取方式 -->
            <FormItem :label="$t('access')" prop="gainFlag">
              <Select v-model="formValidate.gainFlag" :disabled="editor" @on-change="access()">
                <Option
                  v-for="item in gainFlagArr"
                  :value="item.type"
                  :key="item.type"
                >{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="2">&nbsp;</Col>

          <Col span="10">
            <!-- 等级 -->
            <FormItem :label="$t('level')" prop="equipmentLevel" v-if="showMallToBuy">
              <Select :disabled="editor" v-model="formValidate.equipmentLevel">
                <Option
                  v-for="(item,index) in levelArr"
                  :value="item.type"
                  :key="index"
                >{{item.name}}</Option>
              </Select>
            </FormItem>
            <!-- VIP等级 -->
            <FormItem :label="'VIP'+$t('level')" prop="viplevel" v-if="showVIPExclusive">
              <!-- <Select :disabled="editor" v-model="formValidate.viplevel" >
              </Select>-->
            </FormItem>
          </Col>
        </Row>

        <!-- 商城购买 -->
        <div v-if="showMallToBuy">
          <Row>
            <Col span="1">&nbsp;</Col>
            <!-- 详情 -->
            <FormItem :label="$t('userDetail')">
              <!-- <Button type="primary" @click="handleAdd">{{$t('add')}}</Button> -->
            </FormItem>
          </Row>
          <Form ref="formDynamic" :model="formDynamic" :label-width="80">
            <div v-for="(item, index) in formDynamic.items" :key="index">
              <Row>
                <Col span="1">&nbsp;</Col>
                <Col span="5">
                  <FormItem
                    :label="$t('thePurchaseTime')"
                    :prop="'items.' + index + '.periodDay'"
                    :rules="{required: true, pattern: /^[0-9]{0,10}$/, message:'请填写不超过10位的数字', trigger: 'blur'}"
                  >
                    <!-- 购买时长 -->
                    <Input style="width: 100%;" :placeholder = "pleaseEnterDays" v-model="item.periodDay" :disabled="editor" />
                  </FormItem>
                </Col>
                <Col span="1">
                <span style="line-height:36px;">天</span>
                </Col>

                <!-- 原价 -->
                <Col span="1">&nbsp;</Col>
                <Col span="6">
                  <FormItem
                    :label="$t('theOriginalPrice')"
                    :prop="'items.' + index + '.normalPrice'"
                    :rules="{required: true, pattern: /^[0-9]{0,10}$/, message:'请填写不超过10位的数字', trigger: 'blur'}"
                  >
                    <Input style="width: 100%;" v-model="item.normalPrice" :disabled="editor"/>
                  </FormItem>
                </Col>
                <!-- 售价 -->
                <Col span="1">&nbsp;</Col>
                <Col span="6">
                  <FormItem
                    :label="$t('price')"
                    :prop="'items.' + index + '.realPrice'"
                    :rules="{required: true, pattern: /^[0-9]+$/, message:'请输入数字', trigger: 'blur'}"
                  >
                    <Input
                      style="width: 100%;"
                      v-model="item.realPrice"
                      :disabled="editor"
                    />
                  </FormItem>
                </Col>
                <!-- 详情删除 -->
                <Col span="2">
                  <Button v-show="!editor" @click="handleRemove(index)">{{$t('delete')}}</Button>
                </Col>
              </Row>
            </div>
          </Form>
          <Row>
            <Col span="23">
              <!-- 详情新增 -->
              <Button v-show="!editor" type="primary" @click="handleAdd">{{$t('add')}}</Button>
            </Col>
          </Row>
        </div>
        <!-- 赠送 -->
        <div v-if="showGiving">
          <!-- 有效期 -->
          <Row>
            <Col span="1">&nbsp;</Col>
            <Col span="10">
              <FormItem :label="$t('thePeriodOfValidity')" prop="thePeriodOfValidity">
                <Input
                  v-model="formValidate.thePeriodOfValidity"
                  :disabled="editor"
                  :maxlength="20"
                />
              </FormItem>
            </Col>
          </Row>
        </div>
        <!-- 兑换 -->
        <div v-if="showExchange">
          <Row>
            <Col span="1">&nbsp;</Col>
            <!-- 购买时长 -->
            <Col span="5">
              <FormItem :label="$t('thePurchaseTime')" prop="periodDay">
                <Input style="width: 100%;" :placeholder = "pleaseEnterDays" v-model="formValidate.periodDay" :disabled="editor" />
              </FormItem>
            </Col>
            <Col span="1">
            <span style="line-height:36px;">天</span>
            </Col>
            <Col span="1">&nbsp;</Col>

            <Col span="5">
              <!-- 碎片数量 -->
              <FormItem :label="$t('numberOfPieces')" prop="fragmentCount">
                <Input style="width: 100%;" v-model="formValidate.fragmentCount" :disabled="editor" />
              </FormItem>
            </Col>
          </Row>

          <Row></Row>
        </div>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 排序 -->
            <FormItem :label="$t('sort')" prop="basePrice">
              <Input
                :disabled="editor"
                v-model="formValidate.basePrice"
              />
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="22">
            <!-- 说明 -->
            <FormItem :label="$t('instructions')">
              <Input
                type="textarea"
                :disabled="editor"
                :placeholder="lessThan200Words"
                v-model="formValidate.description"
                :maxlength="200"
              />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 坐骑状态 -->
            <FormItem :label="$t('mountState')" prop="downFlag">
              <Select :disabled="editor" v-model="formValidate.downFlag">
                <Option
                  v-for="(item,index) in statusArr"
                  :value="item.type"
                  :key="index"
                >{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <!-- 图片 -->
            <FormItem :label="$t('picture')" prop='imgUrl'>
              <Upload
                :action="basicUrl + 'upload'"
                :on-success="uploadSuccessed"
                :on-error="uploadFailed"
                :on-progress="uploading"
                :show-upload-list="false"
                :headers="uploadHeaders"
              >
                <Button type="ghost" :disabled="editor" icon="ios-cloud-upload-outline"></Button>
              </Upload>
            </FormItem>
          </Col>
          <Col span="2">&nbsp;</Col>
          <Col span="10">
            <!-- 入场通告样式 -->
            <FormItem :label="$t('styleOfAdmissionNotice')" :label-width="100" prop='backgroundUrl'>
              <Upload
                :action="basicUrl + 'upload'"
                :on-success="styleOfAdmissionNoticeuploadSuccessed"
                :on-error="uploadFailed"
                :on-progress="uploading"
                :show-upload-list="false"
                :headers="uploadHeaders"
              >
                <Button type="ghost" :disabled="editor" icon="ios-cloud-upload-outline"></Button>
              </Upload>
            </FormItem>
          </Col>

        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <Col span="10">
            <img :src="formValidate.imgUrl" style="margin-left:60px;width:192px;height:192px;">
          </Col>
          <Col span="2">&nbsp;</Col>
          <!-- 入场通告样式 -->
          <Col span="10">
            <img :src="formValidate.backgroundUrl" style="margin-left:60px;width:192px;height:192px;">
          </Col>

        </Row>
        <Row>
          <Col span="1">&nbsp;</Col>
          <!-- 动效 -->
          <Col span="5">
            <FormItem :label="$t('dynamicEffect')" prop="resourceUrl">
                <Upload
                  :action="basicUrl + 'upload'"
                  :on-success="iosuploadSuccessed"
                  accept=".zip"
                  :on-error="uploadFailed"
                  :on-progress="uploading"
                  :show-upload-list="false"
                  :headers="uploadHeaders"
                >
                  <Button
                    :disabled="editor"
                    style="width:100px;"
                  >{{$t('upload')}}</Button>
                </Upload>
            </FormItem>
            </Col>
            <Col span="1">&nbsp;</Col>
            <Col span="4">
              <p
                style="text-overflow:ellipsis; overflow: hidden; line-height:36px; white-space:nowrap; text-align:left"
              >{{formValidate.resourceUrl}}</p>
            </Col>
            <Col span="2">&nbsp;</Col>
            <Col span="5">
              <!-- 商品卡片动效 -->
              <FormItem :label="$t('commodityCardEffect')" :label-width="100" prop="equipmentCardUrl">
                <Upload
                  :action="basicUrl + 'upload'"
                  :on-success="androiduploadSuccessed"
                  accept=".zip"
                  :on-error="uploadFailed"
                  :on-progress="uploading"
                  :show-upload-list="false"
                  :headers="uploadHeaders"
                >

                  <Button
                    :disabled="editor"
                    style="width:100px;"
                  >{{$t('upload')}}</Button>
                </Upload>
              </FormItem>
            </Col>
            <Col span="2">&nbsp;</Col>
            <Col span="3">
              <p
                style="text-overflow:ellipsis; overflow: hidden; line-height:36px; white-space:nowrap; text-align:left;"
              >{{formValidate.equipmentCardUrl}}</p>
            </Col>
        </Row>
      </Form>
      <div style="border-top:1px solid #ccc; padding:10px; margin:10px ">
        <!-- 编辑按钮 -->
        <Button
          v-if="editor"
          type="primary"
          style="display:block;margin:0 auto"
          @click="editor = false; updatebt = true;"
        >{{$t('editor')}}</Button>
        <!-- 提交按钮 -->
        <Button
          v-else
          type="primary"
          style="display:block;margin:0 auto"
          @click="newMountSubmitted('formValidate')"
        >{{$t('submit')}}</Button>
      </div>
    </Modal>