index.vue

<template>
  <div>
    <Button icon="ios-add" type="primary" @click="visible = true">添加帐号</Button>
    <Modal width="400" v-model="visible" title="帐号信息">
      <div>
        <Form ref="accountForm" :model="accountForm" :rules="accountFormRule" :label-width="60" label-colon>
          <Row>
            <Col span="24">
              <FormItem label="帐号" prop="username">
                <Input v-model.trim="accountForm.username" type="text" placeholder="长度至少4位">
                  <span slot="append">{{ companyAbbr }}</span>
                </Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem label="密码" prop="password">
                <Input v-model.trim="accountForm.password" type="password" placeholder="长度至少6位" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem label="姓名" prop="realName">
                <Input v-model.trim="accountForm.realName" type="text" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem label="电话" prop="phone">
                <Input v-model.trim="accountForm.phone" type="text" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem label="地址" prop="address">
                <Input v-model.trim="accountForm.address" type="text" />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="visible = false">取消</Button>
        <Button @click="saveAccount" :loading="submitLoading" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script src="./index.js"/>