${entityName}Modal__Style#Drawer.vuei 2.1 KB
Newer Older
1
<#include "/common/utils.ftl">
2 3 4 5 6 7 8 9
<#assign modal_width = 800>
<#if tableVo.fieldRowNum==2>
  <#assign modal_width = 896>
<#elseif tableVo.fieldRowNum==3>
  <#assign modal_width = 1024>
<#elseif tableVo.fieldRowNum==4>
  <#assign modal_width = 1280>
</#if>
10 11 12 13 14 15 16 17
<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible">
18
    <${Format.humpToShortbar(entityName)}-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></${Format.humpToShortbar(entityName)}-form>
19 20 21 22
    <div class="drawer-footer">
      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">提交</a-button>
    </div>
23 24 25 26 27
  </a-drawer>
</template>

<script>

28 29
  import ${entityName}Form from './${entityName}Form'

30
  export default {
31
    name: '${entityName}Modal',
32 33
    components: {
      ${entityName}Form
34 35 36 37
    },
    data () {
      return {
        title:"操作",
38
        width:${modal_width},
39
        visible: false,
40
        disableSubmit: false
41 42 43 44
      }
    },
    methods: {
      add () {
45 46 47 48
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.add();
        })
49 50
      },
      edit (record) {
51 52 53 54
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.edit(record);
        });
55 56 57 58 59
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
60 61 62 63
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
64
      handleOk () {
65
        this.$refs.realForm.submitForm();
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>
/** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
81 82 83 84 85 86 87 88 89 90 91
  .drawer-footer{
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
92
</style>