Vben admin 学习记录2

今天要分享的是vben中modal的一些用法和一些坑

首先是在弹窗中引入的表单提交之后如何清空弹窗中的值

这里是视图，在标签中，用@ok方法来监听是否点击了确认按钮

<template>
  <div>
    <!-- 在这里的 @ok方法来监听点击确认按钮 -->
    <BasicModal
      v-bind="$attrs"
      @register="modalInner"
      title="Modal Title"
      @ok="addSubmitForm"
      @visible-change="handleVisibleChange"
    >
      <div class="pt-3px pr-3px">
        <BasicForm @register="registerForm" :model="model" />
      </div>
    </BasicModal>
  </div>
</template>

如果点击了确认按钮，则调用以下方法

// 新增权限
function addSubmitForm() {
  // 这里是验证表单必填值
  validate();
  // 获取表单中的值
  let data = getFieldsValue();
  console.log(data);
  // 执行添加接口，是在api中封装的接口
  addApiPermission(data);
  // 这个方法是官网的一个重置表单的方法
  resetFields();
  // 关闭弹窗
  closeModal();
}

这里是封装的请求，由于框架默认是有捕捉500code的，所以我没有写cacht

import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';

enum Api {
  AddApiPermission = 'addApiPermission',
}

const { createMessage } = useMessage();

/**
 * @returns 新增api权限
 */
export function addApiPermission(params) {
  return defHttp
    .post<any>(
      {
        url: Api.AddApiPermission,
        params,
      },
      // { errorMessageMode: 'none' },
    )
    .then(() => {
      return createMessage.success('添加成功！');
    });
}

这样子，一个添加的流程就走完了！然而这样子的话，在你添加成功之后，父组件的列表是不会更新的，所以，我们需要有一个方法来在父级组件中监听子级组件是否点击了确认，同样，这里我们也用@ok来解决

<Modal1 @register="register1" @ok="tableReload" title="授权api接口权限" :centered="true" :width="1200" />

export default defineComponent({
    components: { BasicTable, TableAction, AAlert: Alert, Modal1, Tag },

    setup() {
      const checkedKeys = ref<Array<string | number>>([]);
      const [register1, { openModal: openModal1 }] = useModal();
      // 需要在这里声明这个刷新的方法
      const [registerTable, { expandAll, collapseAll, reload }] = useTable({
        title: 'api权限列表',
        api: getApiPermissionList,
        columns: getApiPerListColumns(),
        useSearchForm: false,
        formConfig: getUserFormConfig(),
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        showIndexColumn: false,
        rowKey: 'id',
        clickToRowSelect: false,
        actionColumn: {
          width: 250,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        bordered: true,
      });
      // 刷新表格
      function tableReload() {
        reload()
      }
      return {
        tableReload,
        register1,
        registerTable,
        expandAll,
        collapseAll,
        clickAdd,
        checkedKeys,
        onSelectChange,
        handleEdit,
        handleDelete,
        handleOpen,
        queryDetails,
        // TableAction,
      };
    },
  });

以下是完整代码 父级

<template>
  <div>
    <BasicTable
      @register="registerTable"
      :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }"
    >
      <template #headerTop>
        <a-alert type="info" show-icon>
          <template #message>
            <template v-if="checkedKeys.length > 0">
              <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
              <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
            </template>
            <template v-else>
              <span>未选中任何数据</span>
            </template>
          </template>
        </a-alert>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="clickAdd">新增api权限</a-button>
      </template> 
      <!-- LightPink -->
      <!-- api前缀 -->
      <template #name="{ record }">
        <Tag color="LightPink"  v-if="record.pid == '0'">{{ record.name }}</Tag>
        <Tag color="CadetBlue"  v-else-if="record.children != null">{{ record.name }}</Tag>
        <Tag color="DarkTurquoise" v-else>{{ record.name }}</Tag>
      </template>
      <!-- api前缀 -->
      <template #prefix="{ record }">
        <div v-if="record.prefix == '-'">{{ record.prefix }}</div>
        <Tag color="blue" v-else>/{{ record.prefix }}</Tag>
      </template>
      <!-- api地址 -->
      <template #resource="{ record }">
        <div v-if="record.prefix == '-'">{{ record.resource }}</div>
        <Tag color="blue" v-else>/{{ record.resource }}</Tag>
      </template>
      <!-- 访问呢环境 -->
      <template #environment="{ record }">
        <Tag color="MediumAquamarine" v-if="record.environment == 'GET'">{{ record.environment + '\u2000' }} 请求 </Tag>
        <Tag color="DeepSkyBlue" v-else-if="record.environment == 'POST'"> {{ record.environment }} 请求</Tag>
        <div v-else>{{ record.environment }}</div>
      </template>
      <!-- 标签 -->
      <template #action_type="{ record }">
        <Tag color="blue" v-if="record.action_type == '0'">读取</Tag>
        <Tag color="cyan" v-else-if="record.action_type == '1'">写入</Tag>
        <Tag color="orange" v-else-if="record.action_type == '2'">修改</Tag>
        <Tag color="red" v-else-if="record.action_type == '3'">删除</Tag>
        <Tag color="gainsboro" v-else>全部</Tag>
      </template>
      <!-- 状态 -->
      <template #status="{ record }">
        <Tag color="green" v-if="record.status == '0'">正常</Tag>
        <Tag color="red" v-else>禁用</Tag>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
              auth: '1000',
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否删除该数据',
                confirm: handleDelete.bind(null, record),
              },
              auth: '1001',
            },
            {
              label: '启用/禁用',
              color: 'warning',
              popConfirm: {
                title: '是否启用/禁用该数据',
                confirm: handleDelete.bind(null, record),
              },
              auth: '1002',
            },
          ]"
        />
      </template>
    </BasicTable>
    <Modal1 @register="register1" @ok="tableReload" title="授权api接口权限" :centered="true" :width="1200" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getApiPerListColumns, getUserFormConfig } from '/@/views/sys/basice/dabasice/tables';
  import { Alert } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import Modal1 from './modal/Apipermissionform.vue';
  import { Tag } from 'ant-design-vue';

  import { getApiPermissionList } from '/@/api/sys/permission';

  export default defineComponent({
    components: { BasicTable, TableAction, AAlert: Alert, Modal1, Tag },

    setup() {
      const checkedKeys = ref<Array<string | number>>([]);
      const [register1, { openModal: openModal1 }] = useModal();
      const [registerTable, { expandAll, collapseAll, reload }] = useTable({
        title: 'api权限列表',
        api: getApiPermissionList,
        columns: getApiPerListColumns(),
        useSearchForm: false,
        formConfig: getUserFormConfig(),
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        showIndexColumn: false,
        rowKey: 'id',
        clickToRowSelect: false,
        actionColumn: {
          width: 250,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        bordered: true,
      });

      function clickAdd() {
        openModal1(true);
      }

      function onSelectChange(selectedRowKeys: (string | number)[]) {
        console.log(selectedRowKeys);
        checkedKeys.value = selectedRowKeys;
      }
      function queryDetails(record: Recordable) {
        openModal1(true, record.id);
        console.log('点击了详情 ID: ', record.id);
      }
      function handleEdit(record: Recordable) {
        console.log('点击了编辑', record);
      }
      function handleDelete(record: Recordable) {
        console.log('点击了删除 ID: ', record);
      }
      function handleOpen(record: Recordable) {
        console.log('点击了启用', record);
      }
      function tableReload() {
        reload()
      }
      return {
        tableReload,
        register1,
        registerTable,
        expandAll,
        collapseAll,
        clickAdd,
        checkedKeys,
        onSelectChange,
        handleEdit,
        handleDelete,
        handleOpen,
        queryDetails,
        // TableAction,
      };
    },
  });
</script>

子级

<template>
  <div>
    <!-- 在这里的 @ok方法来监听点击确认按钮 -->
    <BasicModal
      v-bind="$attrs"
      @register="modalInner"
      title="Modal Title"
      @ok="addSubmitForm"
      @visible-change="handleVisibleChange"
    >
      <div class="pt-3px pr-3px">
        <BasicForm @register="registerForm" :model="model" />
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { addApiPermission } from '/@/api/sys/permission';
  import { getApiPermissionForm } from '../dabasice/form';

  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    setup(props) {
      const modelRef = ref({});
      const [modalInner, { closeModal }] = useModalInner();
      const [registerForm, { getFieldsValue, resetFields, validate }] = useForm({
        labelWidth: 180,
        schemas: getApiPermissionForm(),
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      function onDataReceive(data) {
        console.log('Data Received', data);
      }
      // 新增权限
      function addSubmitForm() {
        // 这里是验证表单必填值
        validate();
        // 获取表单中的值
        let data = getFieldsValue();
        console.log(data);
        // 执行添加接口，是在api中封装的接口
        addApiPermission(data);
        // 这个方法是官网的一个重置表单的方法
        resetFields();
        // 关闭弹窗
        closeModal();
      }
      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      return {
        modalInner,
        registerForm,
        model: modelRef,
        handleVisibleChange,
        addSubmitForm,
      };
    },
  });
</script>

以上就是今天的分享，有什么错误欢迎指正！