adweb3-web/src/views/adweb/enquirySiteRules/siteRuleList/modules/AdwebEnquirySiteRuleModal.vue

<template>
  <a-drawer :title="title" :width="width" placement="right" :closable="false" @close="close" v-model:open="visible">
    <adweb-enquiry-site-rule-form ref="realFormRef" @ok="submitCallback" :disabled="disableSubmit" normal />
    <div class="drawer-footer">
      <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0">提交</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup name="AdwebEnquirySiteRuleModal">
  import AdwebEnquirySiteRuleForm from './AdwebEnquirySiteRuleForm.vue';
  import { nextTick, ref } from 'vue';

  const title = ref('title');
  const width = ref(800);
  const visible = ref(false);
  const disableSubmit = ref(false);
  const realFormRef = ref();
  const emit = defineEmits(['close', 'ok']);

  function add() {
    visible.value = true;

    nextTick().then(() => {
      realFormRef.value.add();
    });
  }
  function edit(record) {
    visible.value = true;

    nextTick().then(() => {
      realFormRef.value.edit(record);
    });
  }
  function close() {
    emit('close');
    visible.value = false;
  }
  function submitCallback() {
    emit('ok');
    visible.value = false;
  }
  function handleOk() {
    realFormRef.value.submitForm();
    nextTick().then(() => {
      emit('ok');
    });
  }
  function handleCancel() {
    close();
  }

  defineExpose({ title, disableSubmit, add, edit });
</script>

<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
  .drawer-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
  .ant-drawer-open {
    deep(.ant-drawer-content) {
      overflow: inherit;
      .side_close_btn {
        position: absolute;
        left: -60px;
        top: calc(50% - 60px);
        .ant-btn {
          margin: 0;
          width: 60px;
          height: 60px;
          border-radius: 0;
        }
      }
    }
  }
</style>