解决单据打印的缓存问题

解决单据打印的缓存问题

<template>

    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      :maskClosable="false"
      :keyboard="false"
      :forceRender="true"
      @cancel="handleCancel"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 100%;overflow-y: hidden">
      <template slot="footer">

        打印
        打印
        打印
        打印
        打印
        打印
        打印
        打印
        打印
        打印
        打印
        打印
        打印
        取消
      </template>

          <template v-if="billType === '调拨出库'">

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '组装单'">

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '拆卸单'">

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '其它入库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.linkNumber}} {{model.billType}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '其它出库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.linkNumber}} {{model.billType}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '采购退货出库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.remark}}

                    {{model.discount}}%

                    {{model.discountMoney}}

                    {{model.discountLastMoney}}

                    {{model.otherMoney}}

                    {{model.accountName}}

                    {{model.changeAmount}}

                    {{model.debt}}

          </template>

          <template v-else-if="billType === '采购入库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.linkNumber}}

                    {{model.remark}}

                    {{model.discount}}%

                    {{model.discountMoney}}

                    {{model.discountLastMoney}}

                    {{model.otherMoney}}

                    {{model.accountName}}

                    {{model.changeAmount}}

                    {{model.debt}}

          </template>

          <template v-else-if="billType === '采购订单'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '零售退货入库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                        {{model.changeAmount}}

                        {{model.changeAmount}}

                        0

                        {{model.accountName}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '零售出库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.payType}}

                        {{model.changeAmount}}

                        {{model.changeAmount}}

                        0

                        {{model.accountName}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '销售退货入库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.remark}}

                    {{model.discount}}%

                    {{model.discountMoney}}

                    {{model.discountLastMoney}}

                    {{model.otherMoney}}

                    {{model.accountName}}

                    {{model.changeAmount}}

                    {{model.debt}}

                    {{model.salesManStr}}

          </template>

          <template v-else-if="billType === '销售订单'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.salesManStr}}

                    {{model.remark}}

          </template>

          <template v-else-if="billType === '销售出库'">

                    {{model.organName}}

                    {{model.operTimeStr}}

                    {{model.number}}

                    {{model.linkNumber}}

                    {{model.remark}}

                    {{model.discount}}%

                    {{model.discountMoney}}

                    {{model.discountLastMoney}}

                    {{model.otherMoney}}

                    {{model.accountName}}

                    {{model.changeAmount}}

                    {{model.debt}}

                    {{model.salesManStr}}

          </template>

    </j-modal>

</template>

<template>
  <a-card :bordered="false">
    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      :maskClosable="false"
      :keyboard="false"
      :forceRender="true"
      @cancel="handleCancel"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 100%;overflow-y: hidden">
      <template slot="footer">
        <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
      <a-form :form="form">
        <section ref="print" id="printContent">
          <!--调拨出库-->
          <template v-if="billType === '调拨出库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="allocationOutColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--组装单-->
          <template v-else-if="billType === '组装单'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="assembleColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--拆卸单-->
          <template v-else-if="billType === '拆卸单'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="disassembleColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--其它入库-->
          <template v-else-if="billType === '其它入库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联单号">
                  {{model.linkNumber}} {{model.billType}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="otherInColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--其它出库-->
          <template v-else-if="billType === '其它出库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联单号">
                  {{model.linkNumber}} {{model.billType}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="otherOutColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--采购退货-->
          <template v-else-if="billType === '采购退货出库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="purchaseBackColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠率">
                  {{model.discount}}%
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="退款优惠">
                  {{model.discountMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 6 }}" :wrapperCol="wrapperCol" label="优惠后金额">
                  {{model.discountLastMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用">
                  {{model.otherMoney}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户">
                  {{model.accountName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次退款">
                  {{model.changeAmount}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款">
                  {{model.debt}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
              </a-col>
            </a-row>
          </template>
          <!--采购入库-->
          <template v-else-if="billType === '采购入库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联订单">
                  {{model.linkNumber}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="purchaseInColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠率">
                  {{model.discount}}%
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款优惠">
                  {{model.discountMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 6 }}" :wrapperCol="wrapperCol" label="优惠后金额">
                  {{model.discountLastMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用">
                  {{model.otherMoney}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户">
                  {{model.accountName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次付款">
                  {{model.changeAmount}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款">
                  {{model.debt}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
              </a-col>
            </a-row>
          </template>
          <!--采购订单-->
          <template v-else-if="billType === '采购订单'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="purchaseOrderColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--零售退货-->
          <template v-else-if="billType === '零售退货入库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会员卡号">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="18" :md="12" :sm="24">
                <a-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :pagination="false"
                  :columns="retailBackColumns"
                  :dataSource="dataSource">
                </a-table>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-row class="form-row" :gutter="24">
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实付金额">
                      {{model.changeAmount}}
                    </a-form-item>
                  </a-col>
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款金额">
                      {{model.changeAmount}}
                    </a-form-item>
                  </a-col>
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="找零">
                      0
                    </a-form-item>
                  </a-col>
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款账户">
                      {{model.accountName}}
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--零售出库-->
          <template v-else-if="billType === '零售出库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会员卡号">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款类型">
                  {{model.payType}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="18" :md="12" :sm="24">
                <a-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :pagination="false"
                  :columns="retailOutColumns"
                  :dataSource="dataSource">
                </a-table>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-row class="form-row" :gutter="24">
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实付金额">
                      {{model.changeAmount}}
                    </a-form-item>
                  </a-col>
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款金额">
                      {{model.changeAmount}}
                    </a-form-item>
                  </a-col>
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="找零">
                      0
                    </a-form-item>
                  </a-col>
                  <a-col :lg="24" :md="6" :sm="6">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款账户">
                      {{model.accountName}}
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--销售退货-->
          <template v-else-if="billType === '销售退货入库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24"></a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="saleBackColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠率">
                  {{model.discount}}%
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="退款优惠">
                  {{model.discountMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 6 }}" :wrapperCol="wrapperCol" label="优惠后金额">
                  {{model.discountLastMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用">
                  {{model.otherMoney}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户">
                  {{model.accountName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次退款">
                  {{model.changeAmount}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款">
                  {{model.debt}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售人员">
                  {{model.salesManStr}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--销售订单-->
          <template v-else-if="billType === '销售订单'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售人员">
                  {{model.salesManStr}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="saleOrderColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
          <!--销售出库-->
          <template v-else-if="billType === '销售出库'">
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联订单">
                  {{model.linkNumber}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="saleOutColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠率">
                  {{model.discount}}%
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款优惠">
                  {{model.discountMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 6 }}" :wrapperCol="wrapperCol" label="优惠后金额">
                  {{model.discountLastMoney}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用">
                  {{model.otherMoney}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户">
                  {{model.accountName}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次收款">
                  {{model.changeAmount}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款">
                  {{model.debt}}
                </a-form-item>
              </a-col>
              <a-col :lg="6" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售人员">
                  {{model.salesManStr}}
                </a-form-item>
              </a-col>
            </a-row>
          </template>
        </section>
      </a-form>
    </j-modal>
  </a-card>
</template>

<script>
  import pick from 'lodash.pick'
  import { getAction } from '@/api/manage'
  import { getMpListShort } from "@/utils/util"
  import Vue from 'vue'
  export default {
    name: 'BillDetail',
    data () {
      return {
        title: "详情",
        width: '1450px',
        visible: false,
        model: {},
        billType: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: this.$form.createForm(this),
        loading: false,
        dataSource: [],
        url: {
          detailList: '/depotItem/getDetailList'
        },
        allocationOutColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '调入仓库', dataIndex: 'anotherDepotName', width: '8%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        assembleColumns: [
          { title: '商品类型', dataIndex: 'mType',width:'7%'},
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        disassembleColumns: [
          { title: '商品类型', dataIndex: 'mType',width:'7%'},
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        otherInColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        otherOutColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        purchaseBackColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '含税单价', dataIndex: 'taxUnitPrice', width: '6%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '税率(%)', dataIndex: 'taxRate', width: '6%'},
          { title: '税额', dataIndex: 'taxMoney', width: '5%'},
          { title: '价税合计', dataIndex: 'taxLastMoney', width: '6%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        purchaseInColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '含税单价', dataIndex: 'taxUnitPrice', width: '6%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '税率(%)', dataIndex: 'taxRate', width: '6%'},
          { title: '税额', dataIndex: 'taxMoney', width: '5%'},
          { title: '价税合计', dataIndex: 'taxLastMoney', width: '6%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        purchaseOrderColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        retailBackColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        retailOutColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        saleBackColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '含税单价', dataIndex: 'taxUnitPrice', width: '6%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '税率(%)', dataIndex: 'taxRate', width: '6%'},
          { title: '税额', dataIndex: 'taxMoney', width: '5%'},
          { title: '价税合计', dataIndex: 'taxLastMoney', width: '6%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        saleOrderColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ],
        saleOutColumns: [
          { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
          { title: '条码', dataIndex: 'barCode', width: '10%'},
          { title: '名称', dataIndex: 'name', width: '8%'},
          { title: '规格', dataIndex: 'standard', width: '5%'},
          { title: '型号', dataIndex: 'model', width: '5%'},
          { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
          { title: '库存', dataIndex: 'stock', width: '5%'},
          { title: '单位', dataIndex: 'unit', width: '4%'},
          { title: '数量', dataIndex: 'operNumber', width: '5%'},
          { title: '单价', dataIndex: 'unitPrice', width: '5%'},
          { title: '含税单价', dataIndex: 'taxUnitPrice', width: '6%'},
          { title: '金额', dataIndex: 'allPrice', width: '5%'},
          { title: '税率(%)', dataIndex: 'taxRate', width: '6%'},
          { title: '税额', dataIndex: 'taxMoney', width: '5%'},
          { title: '价税合计', dataIndex: 'taxLastMoney', width: '6%'},
          { title: '备注', dataIndex: 'remark', width: '5%'}
        ]
      }
    },
    created () {
    },
    methods: {
      show(record, type) {
        this.billType = type
        this.visible = true;
        this.model = Object.assign({}, record);
        this.model.debt = (this.model.discountLastMoney + this.model.otherMoney - this.model.changeAmount).toFixed(2)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'id'))
        });
        let params = {
          headerId: this.model.id,
          mpList: getMpListShort(Vue.ls.get('materialPropertyList'))  //扩展属性
        }
        let url = this.readOnly ? this.url.detailList : this.url.detailList;
        this.requestSubTableData(url, params);
      },
      requestSubTableData(url, params, success) {
        this.loading = true
        getAction(url, params).then(res => {
          if(res && res.code === 200){
            this.dataSource = res.data.rows
            typeof success === 'function' ? success(res) : ''
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      }
    }
  }
</script>

<style scoped>

</style>


Add insufficientFunds

Add insufficientFunds

18 - Project Stock Trader/src/components/stock/Stock.vue


ui: change warning text in steps 1 and 2 of creating wallet with keystore file

<template>
  <v-sheet
    color="transparent"
    max-width="800px"
    class="mx-auto mew-component--keystore"
  >
    <mew-stepper :items="items" :on-step="step" class="mx-md-0">

      <template v-if="step === 1" #stepperContent1>
        <v-sheet color="white" class="border-radius--10px pa-4 pa-sm-12">

STEP 1.

Create password

          <mew-input
            v-model="password"
            hint="Password must be 8 or more characters"
            label="Password"
            placeholder="Enter Password"
            :has-clear-btn="true"
            class="mr-3 flex-grow-1 mb-2"
            :rules="passwordRulles"
            type="password"
          />

          <mew-input
            v-model="cofirmPassword"
            hint=""
            label="Confirm Password"
            placeholder="Confirm password"
            class="mr-3 flex-grow-1"
            :rules="passwordConfirmRulles"
            type="password"
          />

            <mew-button
              title="Create Wallet"
              btn-size="xlarge"
              :has-full-width="false"
              :disabled="!enableCreateButton"
              @click.native="createWallet"
            />

          <v-row v-else justify="center" align="center">
            <v-progress-circular
              indeterminate
              color="primary"
            ></v-progress-circular>

              Sit tight while we are encrypting your wallet

          </v-row>
        </v-sheet>

        <mew-warning-sheet
          class="mt-4 mb-0"
          title="NOT RECOMMENDED"
          description="This information is sensitive, and these options should only be used in offline settings by experienced crypto users. You will need your keystore file + password to access your wallet. Please save them in a secure location. We CAN NOT retrieve or reset your keystore/password if you lose them."
        />
      </template>

      <template v-if="step === 2" #stepperContent2>
        <v-sheet color="white" class="border-radius--10px pa-4 pa-sm-12">

STEP 2.

Download keystore file

            Important things to know before downloading your keystore file.

          <v-row class="align-stretch">
            <v-col v-for="(d, key) in warningData" :key="key" cols="12" sm="4">

                  <mew-icon :icon-name="d.icon" :img-height="70" />

{{ d.title }}

{{ d.description }}

            </v-col>
          </v-row>

            <mew-button
              title="Back"
              btn-style="outline"
              btn-size="xlarge"
              class="mx-md-1 my-1"
              @click.native="updateStep(1)"
            />
            <mew-button
              title="Acknowledge & Download"
              btn-size="xlarge"
              :has-full-width="false"
              class="mx-md-1 my-1"
              @click.native="downloadWallet"
            />

        </v-sheet>
        <mew-warning-sheet
          class="mt-4 mb-0"
          title="NOT RECOMMENDED"
          description="This information is sensitive, and these options should only be used in offline settings by experienced crypto users. You will need your keystore file + password to access your wallet. Please save them in a secure location. We CAN NOT retrieve or reset your keystore/password if you lose them."
        />
      </template>

      <template v-if="step === 3" #stepperContent3>
        <v-sheet color="white" class="border-radius--10px pa-4 pa-sm-12">

STEP 3.

You are done!

                You are now ready to take advantage of all that Ethereum has to
                offer! Access with keystore file should only be used in an
                offline setting.

              <v-img
                class="d-block d-sm-none mx-auto mt-12 mb-12"
                max-width="170px"
                src="@/assets/images/icons/icon-keystore-mew.png"
              />

                <mew-button
                  title="Access Wallet"
                  btn-size="xlarge"
                  :has-full-width="false"
                  class="mb-3"
                  @click.native="goToAccess"
                />
                <mew-button
                  title="Create Another Wallet"
                  :has-full-width="false"
                  btn-style="transparent"
                  @click.native="updateStep(1)"
                />

            <v-img
              class="d-none d-sm-block ml-8"
              max-width="250px"
              src="@/assets/images/icons/icon-keystore-mew.png"
            />

        </v-sheet>
      </template>
    </mew-stepper>
  </v-sheet>
</template>

<template>
  <v-sheet
    color="transparent"
    max-width="800px"
    class="mx-auto mew-component--keystore"
  >
    <mew-stepper :items="items" :on-step="step" class="mx-md-0">

      <template v-if="step === 1" #stepperContent1>
        <v-sheet color="white" class="border-radius--10px pa-4 pa-sm-12">

STEP 1.

Create password

          <mew-input
            v-model="password"
            hint="Password must be 8 or more characters"
            label="Password"
            placeholder="Enter Password"
            :has-clear-btn="true"
            class="mr-3 flex-grow-1 mb-2"
            :rules="passwordRulles"
            type="password"
          />

          <mew-input
            v-model="cofirmPassword"
            hint=""
            label="Confirm Password"
            placeholder="Confirm password"
            class="mr-3 flex-grow-1"
            :rules="passwordConfirmRulles"
            type="password"
          />

            <mew-button
              title="Create Wallet"
              btn-size="xlarge"
              :has-full-width="false"
              :disabled="!enableCreateButton"
              @click.native="createWallet"
            />

          <v-row v-else justify="center" align="center">
            <v-progress-circular
              indeterminate
              color="primary"
            ></v-progress-circular>

              Sit tight while we are encrypting your wallet

          </v-row>
        </v-sheet>

        <mew-warning-sheet
          class="mt-4 mb-0"
          title="NOT RECOMMENDED"
          description='This information is sensitive, and these options should only be used in offline settings by experienced crypto users. And MEW "CAN NOT" change your password. Please "DO NOT FORGET" to save your password, and it is your private key. You will need this "Password + Keystore file" to access your wallet.'
        />
      </template>

      <template v-if="step === 2" #stepperContent2>
        <v-sheet color="white" class="border-radius--10px pa-4 pa-sm-12">

STEP 2.

Download keystore file

            Important things to know before downloading your keystore file.

          <v-row class="align-stretch">
            <v-col v-for="(d, key) in warningData" :key="key" cols="12" sm="4">

                  <mew-icon :icon-name="d.icon" :img-height="70" />

{{ d.title }}

{{ d.description }}

            </v-col>
          </v-row>

            <mew-button
              title="Back"
              btn-style="outline"
              btn-size="xlarge"
              class="mx-md-1 my-1"
              @click.native="updateStep(1)"
            />
            <mew-button
              title="Acknowledge & Download"
              btn-size="xlarge"
              :has-full-width="false"
              class="mx-md-1 my-1"
              @click.native="downloadWallet"
            />

        </v-sheet>
        <mew-warning-sheet
          class="mt-4 mb-0"
          title="NOT RECOMMENDED"
          description='This information is sensitive, and these options should only be used in offline settings by experienced crypto users. And MEW "CAN NOT" change your password. Please "DO NOT FORGET" to save your password, and it is your private key. You will need this "Password + Keystore file" to access your wallet.'
        />
      </template>

      <template v-if="step === 3" #stepperContent3>
        <v-sheet color="white" class="border-radius--10px pa-4 pa-sm-12">

STEP 3.

You are done!

                You are now ready to take advantage of all that Ethereum has to
                offer! Access with keystore file should only be used in an
                offline setting.

              <v-img
                class="d-block d-sm-none mx-auto mt-12 mb-12"
                max-width="170px"
                src="@/assets/images/icons/icon-keystore-mew.png"
              />

                <mew-button
                  title="Access Wallet"
                  btn-size="xlarge"
                  :has-full-width="false"
                  class="mb-3"
                  @click.native="goToAccess"
                />
                <mew-button
                  title="Create Another Wallet"
                  :has-full-width="false"
                  btn-style="transparent"
                  @click.native="updateStep(1)"
                />

            <v-img
              class="d-none d-sm-block ml-8"
              max-width="250px"
              src="@/assets/images/icons/icon-keystore-mew.png"
            />

        </v-sheet>
      </template>
    </mew-stepper>
  </v-sheet>
</template>


Vue transition can't work.

Vue transition can't work.

<template>

          {{data.name}}

          {{data.delivery_mode.text}} / {{data.order_lead_time}}分钟送达 / {{data.piecewise_agent_fee.tips}}

          {{data.activities[0].description}}

        {{data.activities.length}}个

      {{data.promotion_info}}

    <transition name="fade">

{{data.name}}

              <star :size="48" :score="data.rating"></star>

优惠信息

                {{data.activities[index].description}}

商家公告

{{data.promotion_info}}

    </transition>

</template>

<template>

          {{data.name}}

          {{data.delivery_mode.text}} / {{data.order_lead_time}}分钟送达 / {{data.piecewise_agent_fee.tips}}

          {{data.activities[0].description}}

        {{data.activities.length}}个

      {{data.promotion_info}}

{{data.name}}

            <star :size="48" :score="data.rating"></star>

优惠信息

              {{data.activities[index].description}}

商家公告

{{data.promotion_info}}

</template>


Add missing document color

Add missing document color

<template>

    <transition
      name="slidein"
      mode="out-in"
    >
      <snackbar
        v-if="currentSnackbar === SNACKBARS.POINTS"
        :key="SNACKBARS.POINTS"
        @close="currentSnackbar = SNACKBARS.NEXT_RESOURCE"
      >
        <template slot="icon">
          <progress-icon :progress="1" />
        </template>

        <template slot="content">
          <points-icon
            class="points-icon"
            :active="true"
          />

{{ $tr('plusPoints', { maxPoints }) }}

        </template>

        <ui-alert
          v-if="!isUserLoggedIn"
          :dismissible="false"
          :removeIcon="true"
          type="warning"
          class="alert"
          slot="alert"
        >
          {{ $tr('signIn') }}
        </ui-alert>
      </snackbar>

      <snackbar
        v-else-if="currentSnackbar === SNACKBARS.NEXT_RESOURCE && nextContent"
        :key="SNACKBARS.NEXT_RESOURCE"
        @close="$emit('close')"
      >
        <template slot="icon">
          <content-icon
            class="content-icon icon-bg"
            :kind="nextContent.kind"
            :showTooltip="true"
            :style="{backgroundColor: iconBackgroundColor }"
          />
        </template>

        <template slot="content">
          <router-link
            class="rm-link-style"
            :to="nextContentLink"
          >

{{ $tr('next') }}

            <k-router-link
              :text="nextContent.title"
              :to="nextContentLink"
              class="next-content-title"
              dir="auto"
            />
          </router-link>

        </template>
      </snackbar>
    </transition>

</template>


feedback message updated for replace all.

<template>
<form class="navbar-form form-horizontal" id="findAndReplace">

      {{formprop.label}}
      <component :is="formprop.tooltipView"/>

          <input class="pull-left form-control input-sm col-sm-9" type="text" :id="formprop.key" :value="getText(formprop.key)" @input="setText(formprop.key, $event.target.value)" :name="formprop.key" />

          <button type="button" class="btn btn-sm" :class="formprop.buttonTypeClass || 'btn-default'" @click="formprop.fn('previous')">

            <template v-if="formprop.buttonLeftText">
              {{formprop.buttonLeftText}}
            </template>
          </button>
          <button v-show="formprop.buttonRightClass" type="button" class="btn btn-sm" :class="formprop.buttonTypeClass || 'btn-default'" @click="formprop.fn('next')">

          </button>

        <button type="button" class="button-below btn btn-sm" :class="formprop.buttonTypeClass || 'btn-default'" @click="formprop.belowFn('next')">
          {{formprop.buttonBelowText}}
        </button>

        <input type="radio" :id="radioprop.key" :value="radioprop.value" v-model="findTypePicked">
        {{radioprop.label}}

</form>
</template>


Display (static) user favourites

Display (static) user favourites

<template lang='pug'>
  section.profile(v-if='user')
    div
      .left
        .title
          span {{ $t('user.sociability.title') }}
        .sociability
          .card
            p {{ user.attributes.postsCount }}
            p {{ $t('user.sociability.postsCount') }}
          .card
            p {{ user.attributes.commentsCount }}
            p {{ $t('user.sociability.commentsCount') }}
          .card
            p {{ user.attributes.likesGivenCount }}
            p {{ $t('user.sociability.likesGivenCount') }}
          .card
            p {{ user.attributes.likesReceivedCount }}
            p {{ $t('user.sociability.likesReceivedCount') }}
          .card
            p {{ user.attributes.followingCount }}
            p {{ $t('user.sociability.followingCount') }}
          .card
            p {{ user.attributes.followersCount }}
            p {{ $t('user.sociability.followersCount') }}

        //- RAW API DUMP START
        .title
          span User
        pre(v-if='user') {{ user }}
        .title
          span Waifu
        pre(v-if='waifu') {{ waifu }}
        pre(v-else) User has no waifu
        .title
          span Pinned Post
        pre(v-if='pinned') {{ pinned }}
        pre(v-else) User has no pinned post
        .title
          span Profile Links
        pre(v-if='profileLinks') {{ profileLinks }}
        pre(v-else) User has no profile links
        .title
          span Favourites
        pre(v-if='favourites') {{ favourites }}
        pre(v-else) User has no favourites
        //- RAW API DUMP END

      .right
        .title
          span About Me
        p.os {{ user.attributes.about }}
        p.waifu(v-if='waifu') {{ waifu.attributes.name }}
          span {{ user.attributes.waifuOrHusbando }}
        .favourites(v-if='favourites')
          .title
            span Favourites
          ul.nav.nav-pills.nav-justified
            li.nav-item
              a.nav-link.active Anime
            li.nav-item
              a.nav-link Manga
            li.nav-item
              a.nav-link Characters
          .tab-content
            .tab-pane.active
              .row
                .col-3(v-for='fav in favourites')
                  a(href='/anime/osomatsu-san')
                    //- {{ fav.id }}
                    img(src='//media.kitsu.io/anime/poster_images/11178/tiny.jpg?1452886316')
</template>

<script>
  export default {
    metaInfo: {
      title: 'Profile'
    },
    props: [
      'slug',
      'user',
      'waifu',
      'pinned',
      'profileLinks',
      'favourites'
    ],
    data () {
      return {
        loading: false,
        error: null
      }
    }
  }
</script>

<style lang='sass'>
  @import ~bootstrap/scss/bootstrap
  @import ~assets/variables

  section.profile
    @extend .container
    padding: 0
    margin-top: 30px

    > div:first-of-type
      @extend .row

    .left
      @extend .col-md-8
      @extend .col-sm-12

    .right
      @extend .col-md-4
      @extend .col-sm-12
      order: -1
      @include media-breakpoint-up(md)
        order: 1

    .sociability
      @extend .row
      display: flex
      flex-flow: row wrap

    .card
      @extend .card-block
      text-align: center
      box-shadow: 0 1px 4px rgba($black, .04)
      border: 1px solid rgba($black, .09)
      margin: 0 15px 30px
      min-width: 10rem
      p:first-of-type
        @extend .card-title
        font-size: 2rem
        margin-bottom: 0
      p:last-of-type
        @extend .card-text

    .favourites
      a
        font-size: 12px
      .row
        margin: 15px -2px 0
        > div
          padding: 0 3px
        a
          border-radius: 3px
          overflow: hidden
          display: inline-block
      img
        width: 100%
        max-width: 100%
        vertical-align: middle
      ul
        .active
          background: $primary
</style>

<template lang='pug'>
  section.profile(v-if='user')
    div
      .left
        .title
          span {{ $t('user.sociability.title') }}
        .sociability
          .card
            p {{ user.attributes.postsCount }}
            p {{ $t('user.sociability.postsCount') }}
          .card
            p {{ user.attributes.commentsCount }}
            p {{ $t('user.sociability.commentsCount') }}
          .card
            p {{ user.attributes.likesGivenCount }}
            p {{ $t('user.sociability.likesGivenCount') }}
          .card
            p {{ user.attributes.likesReceivedCount }}
            p {{ $t('user.sociability.likesReceivedCount') }}
          .card
            p {{ user.attributes.followingCount }}
            p {{ $t('user.sociability.followingCount') }}
          .card
            p {{ user.attributes.followersCount }}
            p {{ $t('user.sociability.followersCount') }}
      .right
        .title
          span About Me
        p.os {{ user.attributes.about }}
        p.waifu(v-if='waifu') {{ waifu.attributes.name }}
          span {{ user.attributes.waifuOrHusbando }}

    .container
      .title
        span User
      pre(v-if='user') {{ user }}
      .title
        span Waifu
      pre(v-if='waifu') {{ waifu }}
      pre(v-else) User has no waifu
      .title
        span Pinned Post
      pre(v-if='pinned') {{ pinned }}
      pre(v-else) User has no pinned post
      .title
        span Profile Links
      pre(v-if='profileLinks') {{ profileLinks }}
      pre(v-else) User has no profile links
      .title
        span Favourites
      pre(v-if='favourites') {{ favourites }}
      pre(v-else) User has no favourites
</template>

<script>
  export default {
    metaInfo: {
      title: 'Profile'
    },
    props: [
      'slug',
      'user',
      'waifu',
      'pinned',
      'profileLinks',
      'favourites'
    ],
    data () {
      return {
        loading: false,
        error: null
      }
    }
  }
</script>

<style lang='sass'>
  @import ~bootstrap/scss/bootstrap
  @import ~assets/variables

  section.profile
    @extend .container
    padding: 0
    margin-top: 30px

    > div:first-of-type
      @extend .row

    .left
      @extend .col-md-8
      @extend .col-sm-12

    .right
      @extend .col-md-4
      @extend .col-sm-12
      order: -1
      @include media-breakpoint-up(md)
        order: 1

    .sociability
      @extend .row
      display: flex
      flex-flow: row wrap

    .card
      @extend .card-block
      text-align: center
      box-shadow: 0 1px 4px rgba($black, .04)
      border: 1px solid rgba($black, .09)
      margin: 0 15px 30px
      min-width: 10rem
      p:first-of-type
        @extend .card-title
        font-size: 2rem
        margin-bottom: 0
      p:last-of-type
        @extend .card-text
</style>


Adjusted card aspect ratio to be more square than rectangular. Updated units from 'em' to 'rem'

<template>

        {{ title }}

</template>

<template>

        {{ title }}

</template>


docs(SystemBar): update content

docs(SystemBar): update content

<template>
  <v-system-bar
    v-if="hasPromotion"
    class="cm-system-bar"
    app
    dark
    height="66"
  >
    <a
      class="cm-banner"
      href="https://cutt.ly/0JmRXHr"
      rel="noopener"
      target="_blank"
      @click="onClick"
    />

    <v-btn
      fab
      small
      absolute
      right
      @click="onClose"
    >
      <v-icon class="mr-0">$clear</v-icon>
    </v-btn>
  </v-system-bar>
</template>

<script>
  // Utilities
  import { differenceInHours } from 'date-fns'
  import { get, sync } from 'vuex-pathify'

  export default {
    name: 'DefaultSystemBar',

    computed: {
      last: sync('user/last@promotion'),
      name: get('route/name'),
      hasPromotion () {
        const now = Date.now()

        return (
          differenceInHours(now, Number(this.last)) > 1
        )
      },
    },

    methods: {
      onClick () {
        this.$gtag.event('click', {
          event_category: 'vuetify-banner',
          event_label: 'ui-lib-nitro',
          value: this.name.toLowerCase(),
        })
      },
      onClose () {
        this.last = Date.now()
      },
    },
  }
</script>

<style lang="sass">
  .cm-banner
    background-position: center
    background-repeat: no-repeat
    background-size: contain
    bottom: 0
    display: block
    height: 100%
    left: 0
    overflow: hidden
    position: absolute
    right: 0
    text-indent: 100%
    top: 0
    white-space: nowrap

  .cm-banner
    background-image: url(https://vuetifyjs.b-cdn.net/store/promotions/road-to-vuetify-3-ui-lib/road-to-vuetify-ui-lib-3.png)
    background-size: cover

    @media (min-width: 437px)
      background-image: url(https://vuetifyjs.b-cdn.net/store/promotions/road-to-vuetify-3-ui-lib/road-to-vuetify-ui-lib-2.png)

    @media (min-width: 992px)
      background-image: url(https://vuetifyjs.b-cdn.net/store/promotions/road-to-vuetify-3-ui-lib/road-to-vuetify-ui-lib-1.png)
</style>

<template>
  <v-system-bar
    v-if="hasPromotion"
    class="cm-system-bar"
    app
    dark
    height="66"
  >
    <a
      class="cm-banner"
      href="https://cutt.ly/WJfebcU"
      rel="noopener"
      target="_blank"
      @click="onClick"
    />

    <v-btn
      fab
      small
      absolute
      right
      @click="onClose"
    >
      <v-icon class="mr-0">$clear</v-icon>
    </v-btn>
  </v-system-bar>
</template>

<script>
  // Utilities
  import { differenceInHours } from 'date-fns'
  import { get, sync } from 'vuex-pathify'

  export default {
    name: 'DefaultSystemBar',

    computed: {
      last: sync('user/last@promotion'),
      name: get('route/name'),
      hasPromotion () {
        const now = Date.now()

        return (
          differenceInHours(now, Number(this.last)) > 1
        )
      },
    },

    methods: {
      onClick () {
        this.$gtag.event('click', {
          event_category: 'vuetify-banner',
          event_label: 'ui-lib-nitro',
          value: this.name.toLowerCase(),
        })
      },
      onClose () {
        this.last = Date.now()
      },
    },
  }
</script>

<style lang="sass">
  .cm-banner
    background-position: center
    background-repeat: no-repeat
    background-size: contain
    bottom: 0
    display: block
    height: 100%
    left: 0
    overflow: hidden
    position: absolute
    right: 0
    text-indent: 100%
    top: 0
    white-space: nowrap

  .cm-banner
    background-image: url(https://vuetifyjs.b-cdn.net/store/promotions/nitro-vuetify-3-admin/vuetify-3-nitro-3.png)
    background-size: cover

    @media (min-width: 437px)
      background-image: url(https://vuetifyjs.b-cdn.net/store/promotions/nitro-vuetify-3-admin/vuetify-3-nitro-2.png)

    @media (min-width: 992px)
      background-image: url(https://vuetifyjs.b-cdn.net/store/promotions/nitro-vuetify-3-admin/vuetify-3-nitro-1.png)
</style>


make passphrase selectable

make passphrase selectable

<template>

      {{ $t("setup.enter_your_password") }}
      {{ $t("common.important") }}

    <novo-form-field :title="$t('common.password')" v-if="current === 1">
      <input
        ref="password"
        type="password"
        v-model="password"
        @keydown="validatePasswordOnEnter"
        :class="computedStatus"
      />
    </novo-form-field>

{{ $t("setup.this_is_your_recovery_phrase") }}

      <novo-section class="phrase">
        {{ recoveryPhrase }}
      </novo-section>

    <novo-button-section>
      <button
        v-if="current === 1"
        @click="validatePassword"
        :disabled="isNextDisabled"
      >
        {{ $t("buttons.next") }}
      </button>
    </novo-button-section>

</template>


shorten up computed constants

shorten up computed constants

<template>

        All Users

       ( {{ visibleUsers.length }} )

      Filter User Type
      <select v-model="roleFilter" id="type-filter" name="type-filter">
        <option value="all"> All Users </option>
        <option :value="ADMIN"> Admins </option>
        <option :value="COACH"> Coaches </option>
        <option :value="LEARNER"> Learners </option>
      </select>

        <svg class="icon" src="../icons/search.svg" aria-hidden="true"/>
        <input
          id="search-field"
          aria-label="Search for a user..."
          type="search"
          v-model="searchFilter"
          placeholder="Search for a user...">

        <icon-button @click="openCreateUserModal" class="create-user-button" text="Add New" :primary="true">
          <svg class="add-user" src="../icons/add_new_user.svg"/>
        </icon-button>

    <user-edit-modal
      v-if="editingUser"
      :userid="currentUserEdit.id"
      :fullname="currentUserEdit.full_name"
      :username="currentUserEdit.username"
      :userkind="currentUserEdit.kind"
      @close="closeEditUserModal"
    />
    <user-create-modal
      v-if="creatingUser"
      @close="closeCreateUserModal"/>

Users

           Full Name

              Role

           Username
           Edit

              {{user.full_name}}

              {{ user.kind === ADMIN ? $tr('admin') : $tr('coach') }}

            {{user.username}}

            <icon-button class="edit-user-button" @click="openEditUserModal(user)">
              Edit Account Info
              <svg src="../icons/pencil.svg"/>
            </icon-button>

{{ $tr('noUsersExist') }}

{{ $tr('allUsersFilteredOut') }}

</template>


Changes well advanced search Additional Fields dropdown label

/*
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/
<template>

{{ section.header }}

      <search-filter
        v-for="field in getFilterFields(section.fields)"
        :key="field.id"
        :type="field.type"
        :id="`${field.id}Filter`"
        :param-names="field.params"
        :label="field.label"
        :errors="errors[field.param]"
        :options="field.options || filterSelectOptions[field.id]"
        :value-field="field.valueField"
        :text-field="field.textField"
        :any-value-checkbox="field.anyValueBoolean"
        v-model="filterParams[field.id]" />

        Search
        Reset

Additional Fields

    <search-filter
      v-for="field in selectedAdditionalFilters"
      :key="field.id"
      :type="field.type"
      :id="`${field.id}Filter`"
      :param-names="field.params"
      :label="field.label"
      :errors="errors[field.param]"
      :options="field.options || filterSelectOptions[field.id]"
      :value-field="field.valueField"
      :text-field="field.textField"
      :any-value-checkbox="field.anyValueBoolean"
      v-model="filterParams[field.id]"
      @remove="removeSelectedFilter(field.id)"
      removable />

          <option :value="null">Select a field</option>
          <optgroup v-for="optGroup in additionalFilterSelectOptions" :key="optGroup.label" :label="optGroup.label">
            <option v-for="option in optGroup.options" :key="option.id" :value="option.value" :disabled="option.disabled">{{ option.text }}</option>
          </optgroup>

        Add Field

</template>

/*
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/
<template>

{{ section.header }}

      <search-filter
        v-for="field in getFilterFields(section.fields)"
        :key="field.id"
        :type="field.type"
        :id="`${field.id}Filter`"
        :param-names="field.params"
        :label="field.label"
        :errors="errors[field.param]"
        :options="field.options || filterSelectOptions[field.id]"
        :value-field="field.valueField"
        :text-field="field.textField"
        :any-value-checkbox="field.anyValueBoolean"
        v-model="filterParams[field.id]" />

        Search
        Reset

Additional Fields

    <search-filter
      v-for="field in selectedAdditionalFilters"
      :key="field.id"
      :type="field.type"
      :id="`${field.id}Filter`"
      :param-names="field.params"
      :label="field.label"
      :errors="errors[field.param]"
      :options="field.options || filterSelectOptions[field.id]"
      :value-field="field.valueField"
      :text-field="field.textField"
      :any-value-checkbox="field.anyValueBoolean"
      v-model="filterParams[field.id]"
      @remove="removeSelectedFilter(field.id)"
      removable />

          <option :value="null">Select a field to search on</option>
          <optgroup v-for="optGroup in additionalFilterSelectOptions" :key="optGroup.label" :label="optGroup.label">
            <option v-for="option in optGroup.options" :key="option.id" :value="option.value" :disabled="option.disabled">{{ option.text }}</option>
          </optgroup>

        Add Field

</template>


resolves #70

resolves #70

<template lang="pug">
  section.component-example(:id="id")
    //- Section header
    h3(v-if="header").title.layout.align-center.mb-3
      router-link(
        :to="{ hash: id }"
        v-if="id"
        style="text-decoration: none;"
      ).mr-2
        v-icon(color="accent") mdi-pound
      span(v-text="header")

    //- Description
    markdown(v-if="desc" :source="desc")

    v-card(:class="[readonly ? 'elevation-0' : '']").mt-4
      //- Example options
      v-toolbar(flat dense card v-if="!readonly").pr-1
        v-spacer
        v-tooltip(top v-if="hasInverted")
          v-btn(icon slot="activator" @click="invertedProxy = !invertedProxy")
            v-icon(color="grey darken-1") invert_colors
          span Invert colors
        v-tooltip(top)
          v-btn(
            icon
            tag="a"
            v-bind:href="'https://github.com/vuetifyjs/vuetifyjs.com/tree/master/examples/'+file+'.vue'"
            target="_blank"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-github
          span View on Github
        v-tooltip(top)
          v-btn(
            icon
            v-on:click="sendToCodepen"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-codepen
          span Edit in codepen
        v-tooltip(top)
          v-btn(
            icon
            v-on:click.stop="panel = !panel"
            slot="activator"
          )
            v-icon(color="grey darken-1") code
          span View source

      //- Example markup
      v-expansion-panel.elevation-0
        v-expansion-panel-content(v-model="panel")
          v-divider(v-if="!readonly")
          v-tabs
            v-tabs-bar(
              ref="tabs"
              class="pl-0"
              v-show="!readonly"
            ).grey.lighten-4.px-3
              v-tabs-slider(color="accent")
              v-tabs-item(
                v-for="tab in tabs"
                v-bind:key="tab"
                v-bind:href="'#'+tab"
                v-show="parsed[tab]"
                active-class=""
                class="body-2"
              ) {{ tab }}
            v-tabs-items(class="grey lighten-3")
              v-tabs-content(
                v-for="tab in tabs"
                v-bind:key="tab"
                v-bind:id="tab"
              )
                markup(:lang="getLang(tab)" v-if="parsed[tab]").ma-0
                  div(v-html="parsed[tab]")

      v-divider(v-if="!readonly")

      //- Example mount
      div(:class="exampleClasses").application.application--example.pa-3
        div(:id="'example-'+uid")

    //- Codepen
    codepen(ref="codepen" :pen="pen")
</template>

<script>
  import Vue from 'vue'
  const release = process.env.RELEASE
  const path = require('path')
  const resolve = (file) => path.resolve(__dirname, file)

  export default {
    data () {
      return {
        tabs: ['template', 'script', 'style'],
        component: null,
        instance: null,
        invertedProxy: this.inverted,
        isBooted: false,
        uid: null,
        panel: false,
        parsed: {
          script: null,
          style: null,
          template: null
        },
        pen: {
          script: null,
          style: null,
          template: null
        },
        url: release ? 'releases/' + release + '/' : ''
      }
    },

    props: {
      active: Boolean,
      hasInverted: Boolean,
      file: String,
      header: String,
      desc: String,
      inverted: Boolean,
      newIn: String,
      id: String,
      readonly: Boolean
    },

    computed: {
      currentColor () {
        return this.$store.state.currentColor
      },
      exampleClasses () {
        return {
          'theme--dark': this.invertedProxy,
          'theme--light': !this.invertedProxy,
          'grey lighten-3': !this.invertedProxy
        }
      }
    },

    watch: {
      panel () {
        this.getMarkup().then(() => this.$refs.tabs.slider())
      }
    },

    created () {
      if (this.active || this.readonly) {
        this.panel = true
      }
    },

    mounted () {
      this.uid = this._uid
      import(
        /* webpackChunkName: "component-examples" */
        /* webpackMode: "lazy-once" */
        `../../examples/${this.file}.vue`
      ).then(comp => {
        this.instance = new Vue(comp.default)
        this.instance.$mount('#example-'+this.uid)
      })
    },

    beforeDestroy () {
      this.instance && this.instance.$destroy()
    },

    methods: {
      getMarkup () {
        if (!this.isBooted) {
          this.isBooted = true
          return this.request(this.file, this.boot)
        }
        return Promise.resolve()
      },
      getLang (tab) {
        if (tab === 'script') return 'js'
        if (tab === 'style') return 'css'
        return 'vue'
      },
      parseTemplate (target, template) {
        const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`
        const regex = new RegExp(string, 'g')
        const parsed = regex.exec(template)

        return parsed
          ? parsed[1]
          : ''
      },
      replaceCharacters (str) {
        return str.replace(/</g, '<').replace(/>/g, '>')
      },
      boot (res) {
        const template = this.parseTemplate('template', res)
        const script = this.parseTemplate('script', res)
        const style = this.parseTemplate('style', res)

        this.parsed = {
          template: this.replaceCharacters(template),
          script: this.replaceCharacters(script),
          style: this.replaceCharacters(style)
        }

        this.pen = {
          template,
          script,
          style
        }
      },
      toggle () {
        this.active = !this.active
      },
      request (file, cb) {
        this.loading = true
        return this.$http.get(`/${this.url}example-source/${file}.vue`).then(({ data }) => {
          cb(data)
          this.loading = false
          return Promise.resolve()
        })
      },
      sendToCodepen () {
        this.getMarkup().then(() => this.$refs.codepen.submit())
      }
    }
  }
</script>

<style lang="stylus">
  @import '../../node_modules/vuetify/src/stylus/settings/_variables.styl'

  .component-example
    // margin-bottom: 32px

    .application--example
      position: relative
      transition: .3s $transition.swing
      z-index: 0

      > div,
      > form,
      > footer
        width: 100%

    .component-example__panel
      .expansion-panel__body
        border: none

      .tabs__item, .markup
        height: 100%

      .tabs__items
        border: none
        max-height: 500px
        overflow-y: auto

      > li
        border: none

    .justify
      text-align: justify

    nav.toolbar
      z-index: 0
</style>

<template lang="pug">
  section.component-example(:id="id")
    //- Section header
    h3(v-if="header").title.layout.align-center.mb-3
      router-link(
        :to="{ hash: id }"
        v-if="id"
        style="text-decoration: none;"
      ).mr-2
        v-icon(color="accent") mdi-pound
      span(v-text="header")

    //- Description
    markdown(v-if="desc" :source="desc")

    v-card(:class="[readonly ? 'elevation-0' : '']").mt-4
      //- Example options
      v-toolbar(flat dense card v-if="!readonly").pr-1
        v-spacer
        v-tooltip(top v-if="hasInverted")
          v-btn(icon slot="activator" @click="invertedProxy = !invertedProxy")
            v-icon(color="grey darken-1") invert_colors
          span Invert colors
        v-tooltip(top)
          v-btn(
            icon
            tag="a"
            v-bind:href="'https://github.com/vuetifyjs/vuetifyjs.com/tree/master/examples/'+file+'.vue'"
            target="_blank"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-github
          span View on Github
        v-tooltip(top)
          v-btn(
            icon
            v-on:click="sendToCodepen"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-codepen
          span Edit in codepen
        v-tooltip(top)
          v-btn(
            icon
            v-on:click.stop="panel = !panel"
            slot="activator"
          )
            v-icon(color="grey darken-1") code
          span View source

      //- Example markup
      v-expansion-panel.elevation-0
        v-expansion-panel-content(v-model="panel")
          v-divider(v-if="!readonly")
          v-tabs
            v-tabs-bar(
              ref="tabs"
              class="pl-0"
              v-show="!readonly"
            ).grey.lighten-4.px-3
              v-tabs-slider(color="accent")
              v-tabs-item(
                v-for="tab in tabs"
                v-bind:key="tab"
                v-bind:href="'#'+tab"
                v-show="parsed[tab]"
                active-class=""
                class="body-2"
              ) {{ tab }}
            v-tabs-items(class="grey lighten-3")
              v-tabs-content(
                v-for="tab in tabs"
                v-bind:key="tab"
                v-bind:id="tab"
              )
                markup(:lang="getLang(tab)" v-if="parsed[tab]").ma-0
                  div(v-html="parsed[tab]")

      v-divider(v-if="!readonly")

      //- Example mount
      div(:class="exampleClasses").application.application--example.pa-3
        div(:id="'example-'+uid")

    //- Codepen
    codepen(ref="codepen" :pen="pen")
</template>

<script>
  import Vue from 'vue'
  const release = process.env.RELEASE
  const path = require('path')
  const resolve = (file) => path.resolve(__dirname, file)

  export default {
    data () {
      return {
        tabs: ['template', 'script', 'style'],
        component: null,
        instance: null,
        invertedProxy: this.inverted,
        isBooted: false,
        uid: null,
        panel: false,
        parsed: {
          script: null,
          style: null,
          template: null
        },
        pen: {
          script: null,
          style: null,
          template: null
        },
        url: release ? 'releases/' + release + '/' : ''
      }
    },

    props: {
      active: Boolean,
      hasInverted: Boolean,
      file: String,
      header: String,
      desc: String,
      inverted: Boolean,
      newIn: String,
      id: String,
      readonly: Boolean
    },

    computed: {
      currentColor () {
        return this.$store.state.currentColor
      },
      exampleClasses () {
        return {
          'theme--dark': this.invertedProxy,
          'theme--light': !this.invertedProxy,
          'grey lighten-3': !this.invertedProxy
        }
      }
    },

    watch: {
      panel () {
        this.getMarkup().then(() => this.$refs.tabs.slider())
      }
    },

    created () {
      if (this.active || this.readonly) {
        this.panel = true
      }
    },

    mounted () {
      this.uid = this._uid
      import(
        /* webpackChunkName: "component-examples" */
        /* webpackMode: "lazy-once" */
        `../../examples/${this.file}.vue`
      ).then(comp => {
        this.instance = new Vue(comp.default)
        this.instance.$mount('#example-'+this.uid)
      })
    },

    beforeDestroy () {
      this.instance && this.instance.$destroy()
    },

    methods: {
      getMarkup () {
        if (!this.isBooted) {
          this.isBooted = true
          return this.request(this.file, this.boot)
        }
        return Promise.resolve()
      },
      getLang (tab) {
        if (tab === 'script') return 'js'
        if (tab === 'style') return 'css'
        return 'vue'
      },
      parseTemplate (target, template) {
        const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`
        const regex = new RegExp(string, 'g')
        const parsed = regex.exec(template)

        return parsed
          ? parsed[1]
          : ''
      },
      replaceCharacters (str) {
        return str.replace(/</g, '<').replace(/>/g, '>')
      },
      boot (res) {
        const template = this.parseTemplate('template', res)
        const script = this.parseTemplate('script', res)
        const style = this.parseTemplate('style', res)

        this.parsed = {
          template: this.replaceCharacters(template),
          script: this.replaceCharacters(script),
          style: this.replaceCharacters(style)
        }

        this.pen = {
          template,
          script,
          style
        }
      },
      toggle () {
        this.active = !this.active
      },
      request (file, cb) {
        this.loading = true
        return this.$http.get(`/${this.url}example-source/${file}.vue`).then(({ data }) => {
          cb(data)
          this.loading = false
          return Promise.resolve()
        })
      },
      sendToCodepen () {
        this.getMarkup().then(() => this.$refs.codepen.submit())
      }
    }
  }
</script>

<style lang="stylus">
  @import '../../node_modules/vuetify/src/stylus/settings/_variables.styl'

  .component-example
    // margin-bottom: 32px

    .application--example
      transition: .3s $transition.swing

      > div,
      > form,
      > footer
        width: 100%

    .component-example__panel
      .expansion-panel__body
        border: none

      .tabs__item, .markup
        height: 100%

      .tabs__items
        border: none
        max-height: 500px
        overflow-y: auto

      > li
        border: none

    .justify
      text-align: justify

    nav.toolbar
      z-index: 0
</style>


fixed eslint

fixed eslint

<template>
  <uw-card
    v-if="!isErrored && term && (!isReady || periods.length > 0)"
    :loaded="isReady" :errored="isErrored"
  >
    <template #card-heading>

        {{ termName }} Schedule

          Final exam schedule and Visual Schedule

    </template>

    <template #card-body>

        <b-tab v-for="(period, i) in periods" :key="i" :title="period.title"
               title-item-class="bg-light text-nowrap text-uppercase
               myuw-text-xs mr-1 mb-1"
               title-link-class="text-body h-100"
               :active="(
                 period.start_date <= today &&
                 period.end_date >= today
               ) || (
                 i > 0 &&
                 periods[i - 1].end_date < today &&
                 period.title === 'finals'
               )"
        >

          <uw-schedule-tab :period="period" />

 0">
        Note:

          {{ termData.section }} course continues until
          {{ formatTime(termData.end_date) }}

    </template>
  </uw-card>
</template>

<template>
  <uw-card
    v-if="!isErrored && term && (!isReady || periods.length > 0)"
    :loaded="isReady" :errored="isErrored"
  >
    <template #card-heading>

        {{ termName }} Schedule

          Final exam schedule and Visual Schedule

    </template>

    <template #card-body>

        <b-tab v-for="(period, i) in periods" :key="i" :title="period.title"
               title-item-class="bg-light text-nowrap text-uppercase
               myuw-text-xs mr-1 mb-1"
               title-link-class="text-body h-100"
               :active="(
                 period.start_date <= today &&
                 period.end_date >= today
               ) || (
                 i > 0 &&
                 periods[i - 1].end_date < today &&
                 period.title === 'finals'
               )"
        >

          <uw-schedule-tab :period="period" />

 0">
        Note:

          {{term.section}} course continues until {{formatTime(term.end_date)}}

    </template>
  </uw-card>
</template>