[JavaScript知识库]vue3初体验-基于vue3+ant design封装公共弹框

parent.vue

<template>
  <div>
    <a-form
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="searchForm"
    >
      <a-form-item label="客户编码" name="customNo">
        <a-input-search enter-button v-model:value="searchForm.customNo" style="width: 200px" @search="searchCustomNo"/>
      </a-form-item>
    </a-form>
    <customMultipleModel v-if="childShow" :modelShow="modelShow" :selectType="selectType" @closeModel="changeDialogVisible"/>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref} from 'vue';
import customMultipleModel from '/@/components/custonMultipleSelection/index.vue'
export default defineComponent({
  components: {
    customMultipleModel
  },
  setup() {
    const searchForm = reactive({}); // form表单字段
    const childShow = ref(false) // 弹框是否显示
    const modelShow = ref(false) // 子组件弹框状态
    const selectType = ref('radio') // 单多选
    // 客户编码弹框查询
    const searchCustomNo = () => {
      modelShow.value = true
      childShow.value = true
    }
    // 弹框关闭回调
    const changeDialogVisible = (content) => {
      modelShow.value = false
      childShow.value = false
      if (content) {
        searchForm.customNo = content.value
      }
    }
    return {
      searchForm,
      searchCustomNo,
      modelShow,
      childShow,
      changeDialogVisible,
      selectType,
    };
  },
});
</script>
<style lang="less" scoped>
</style>

child.vue

<template>
  <div>
    <a-modal v-model:visible="visible" width="900px" title="选择客户" @cancel="handleCancel">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
      </template>
      <a-form
        ref="searchForm"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="customForm"
        :label-col="labelCol"
      >
        <a-form-item label="客户操作吗" name="customOpCode">
          <a-input v-model:value="customForm.customOpCode" style="width: 200px" />
        </a-form-item>
        <a-form-item label="客户编码" name="customNo">
          <a-input v-model:value="customForm.customNo" style="width: 200px" />
        </a-form-item>
        <a-form-item label="客户名称" name="customName">
          <a-input v-model:value="customForm.customName" style="width: 200px" />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-left: 30px" type="primary" html-type="submit" @click="searchTableList">搜索</a-button>
          <a-button style="margin: 0 8px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table bordered :columns="columns" :data-source="tableData" :scroll="{ y: 300 }" :row-selection="{onChange: onSelectChange, type: selectType}" @change="handleTableChange" :loading="tableLoading" :pagination="pagination" @resizeColumn="handleResizeColumn" :customRow="rowClick"></a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive} from 'vue';
import {TableProps, Form} from "ant-design-vue";
import {useDemoStore} from '/@/store/demo'
export default defineComponent({
  props: {
    modelShow: {
      type: Boolean,
      default: false
    },
    selectType: {
      type: String,
      default: 'checkbox'
    }
  },
  setup(props, ctx) {
    const demoStore = useDemoStore()
    const useForm = Form.useForm
    const data = ref(props)
    const loading = ref<boolean>(false);
    const visible = ref(data.value.modelShow)
    const customForm = reactive({ customOpCode: '', customNo: '', customName: '' })
    const tableData = ref([]) // 表格渲染数据
    const tableLoading = ref(false) // 表格loading状态
    const selectData = ref([])
    const selectType = data.value.selectType
    console.log(data.value)
    const handleOk = () => {
      visible.value = false
      ctx.emit('closeModel', selectData)
    };
    const handleCancel = () => {
      visible.value = false
      ctx.emit('closeModel', false)
    };
    // 分页配置项
    let pagination = ref({
      // 数据总数
      total: 0,
      // 当前页数
      current: 1,
      // 每页条数
      pageSize: 20,
      // 展示总数
      showTotal: (totalSize) => `共 ${totalSize} 条`,
      // 是否可以改变pageSize
      showSizeChanger: true,
      // 设置每页可以展示多少条的选项
      pageSizeOptions: ["20", "50", "100", "200"],
      // 小尺寸分页
      size: "middle",
      // 是否可以快速跳转至某页
      showQuickJumper: true,
      //默认条数
      defaultPageSize: 20,
    })
    const searchTableList = (async (e) => {
      if (e !== 'page') {
        pagination.value.current = 1
      }
      tableLoading.value = true
      let params = {
        pageNum: pagination.value.current,
        pageSize: pagination.value.pageSize,
        condition: { ...customForm }
      }
      const res = await demoStore.getCustomerList(params)
      tableLoading.value = false
      res.data.records.forEach((item, index) => {
        item.key = index + 1
      })
      tableData.value = res.data.records
      pagination.value.total = res.data.total
      pagination.value.current = res.data.pageNum
      pagination.value.pageSize = res.data.pageSize
    })
    // 分页接口逻辑
    const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number }) => {
      pagination.value.current = pag.current
      pagination.value.pageSize = pag.pageSize
      searchTableList('page')
    }
    const { resetFields } = useForm(customForm)
    const resetForm = () => {
      resetFields()
      searchTableList()
    }
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      selectData.value = selectedRows.map(item => {
        return item.customNo
      })
      selectData.value = selectData.value.join(',')
    };
    const rowClick = () => {
      return {
        onClick: (event) => {
          if (selectType === 'radio') {
            event.path[1].querySelector('.ant-radio-wrapper').click()
          } else {
            event.path[1].querySelector('.ant-checkbox-wrapper').click()
          }
        },
      };
    }
    const columns = ref([
      {title: '序号', dataIndex: 'key', resizable: true, width: 50, ellipsis: true},
      {title: '客户编码', dataIndex: 'customNo', resizable: true, width: 200, ellipsis: true},
      {title: '客户名称', dataIndex: 'customName', resizable: true, width: 350, ellipsis: true},
      {title: '客户操作码', dataIndex: 'customOpCode', resizable: true, width: 180, ellipsis: true},
    ])
    return {
      visible,
      loading,
      handleOk,
      handleCancel,
      labelCol: { style: { width: '100px' } },
      customForm,
      columns,
      pagination,
      tableData,
      tableLoading,
      handleTableChange,
      searchTableList,
      handleResizeColumn: (w, col) => {
        col.width = w;
      },
      onSelectChange,
      resetForm,
      rowClick,
      selectType,
    };
  },
});
</script>

<style scoped>

</style>

初学vue3，有什么不同意见大家一起交流，共同进步