kicc/kicc-ui/src/views/system/config/index.vue

<template>
  <div ref="wrapRef" :class="[prefixCls, [`${prefixCls}-form-container`]]">
    <AForm ref="queryFormElRef"
           :model="state.queryParams"
           layout="inline"
           :colon="false"
           :labelCol="{ style: { width: '80px', 'margin-bottom': '5px' } }"
           :wrapperCol="{ style: { width: '300px', 'margin-bottom': '5px' } }"
    >
      <AFormItem label="参数名称" name="name">
        <a-input v-model:value="state.queryParams.name" placeholder="请输入参数名称"/>
      </AFormItem>
      <AFormItem label="参数键" name="key">
        <a-input v-model:value="state.queryParams.key" placeholder="请输入参数键"/>
      </AFormItem>
      <AFormItem label="系统内置" name="isSys">
        <ASelect v-model:value="state.queryParams.isSys"
                 placeholder="请选择"
                 allowClear
        >
          <ASelectOption key="0">是</ASelectOption>
          <ASelectOption key="1">否</ASelectOption>
        </ASelect>
      </AFormItem>
      <AFormItem label="创建时间">
        <ARangePicker v-model:value="state.dateRange"
                      style="width: '100%'"
                      valueFormat="YYYY-MM-DD"
                      :placeholder="['开始日期', '结束日期']"
        />
      </AFormItem>
      <AFormItem>
        <a-button type="primary"
                  class="mr-2"
                  @click="handleQuery"
        >搜索</a-button>
        <a-button type="default"
                  class="mr-2"
                  @click="resetQuery"
        >重置</a-button>
      </AFormItem>
    </AForm>
    <ATable ref="tableElRef"
            :size="state.selectedKeys[0]"
            :dataSource="state.dataSource"
            :columns="columns"
            :bordered="true"
            :scroll="{
              x: '100%',
              y: state.tableHeight,
              scrollToFirstRowOnChange: true
            }"
            :pagination="{
              current: 1,
              pageSize: 10,
              size: 'small',
              defaultPageSize: 10,
              showTotal: (total) => t('component.table.total', { total }),
              showSizeChanger: true,
              showQuickJumper: true,
            }"
    >
      <template #title>
        <div style="width: 100%">
          <div class="flex items-center">
            <BasicTitle>{{ '参数配置列表' }}</BasicTitle>
            <div :class="`${headerPrefixCls}__toolbar`">
              <a-button type="primary">新增</a-button>
              <a-button type="primary">编辑</a-button>
              <a-button type="primary">删除</a-button>
              <ADivider type="vertical"/>
              <div class="table-settings">
                <!--重做-->
                <ATooltip placement="top">
                  <template #title>
                    <span>{{ t('common.redo') }}</span>
                  </template>
                  <RedoOutlined @click="handleQuery"/>
                </ATooltip>
                <!--尺寸-->
                <ATooltip placement="top">
                  <template #title>
                    <span>{{ t('component.table.settingDens') }}</span>
                  </template>
                  <ADropdown :trigger="['click']"
                             :getPopupContainer="getPopupContainer"
                             placement="bottomCenter"
                  >
                    <ColumnHeightOutlined/>
                    <template #overlay>
                      <AMenu v-model:selectedKeys="state.selectedKeys" selectable>
                        <AMenuItem key="default">
                          <span>{{ t('component.table.settingDensDefault') }}</span>
                        </AMenuItem>
                        <AMenuItem key="middle">
                          <span>{{ t('component.table.settingDensMiddle') }}</span>
                        </AMenuItem>
                        <AMenuItem key="small">
                          <span>{{ t('component.table.settingDensSmall') }}</span>
                        </AMenuItem>
                      </AMenu>
                    </template>
                  </ADropdown>
                </ATooltip>
                <!--全屏-->
                <ATooltip placement="top">
                  <template #title>
                    <span>{{ t('component.table.settingFullScreen') }}</span>
                  </template>
                  <FullscreenOutlined v-if="!isFullscreen" @click="toggle"/>
                  <FullscreenExitOutlined v-else @click="toggle"/>
                </ATooltip>
              </div>
            </div>
          </div>
        </div>
      </template>
    </ATable>
  </div>
</template>
<script lang="ts" setup>
  /**
   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
   * 采用ant-design-vue表格表单组件编写,采用 setup 写法
   * 当vben的BasicTable跟BasicForm组件不能满足一些特殊需求时,需要写原生ant-design-vue组件时,请严格参考此处代码
   * 当前原生ant-design-vue表格表单组件模板,目前已经与系统项目配置高度集成,系统配置发生修改时组件也会产生对应的变化
   * 目前是基于vben的BasicTable跟BasicForm组件重写出一套ant-design-vue原生表格表单组件模板
   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
   * author entfrm开发团队-王翔
   */
  import { BasicTitle } from '/@/components/Basic';
  import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
  import { ref, onMounted, watchEffect } from 'vue';
  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker } from 'ant-design-vue';
  import { SizeType } from '/@/components/Table';
  import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
  import ConfigModal from './ConfigModal.vue';
  import { columns } from './config.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { reactive, toRaw, unref } from 'vue';
  import { useModal } from "/@/components/Modal";
  import { useDesign } from "/@/hooks/web/useDesign";
  import { useI18n } from '/@/hooks/web/useI18n';
  import { convertDateRange } from "/@/utils/dateUtil";
  import { useFullscreen } from "@vueuse/core";
  import { getPopupContainer } from '/@/utils';
  import { useTimeoutFn } from "/@/hooks/core/useTimeout";

  interface ItemRender {
    page: number;
    type: 'page' | 'prev' | 'next';
    originalElement: any;
  }

  /** 类型规范统一声明定义区域 */
  interface TableState {
    ids: string[];
    single: boolean;
    multiple: boolean;
    total: number;
    tableHeight: number;
    tableInstance: ComponentRef;
    queryFormInstance: ComponentRef | any;
    selectedKeys: SizeType[];
    queryParams: {
      current: number;
      size: number;
      name: string | undefined;
      key: string | undefined;
      isSys: string | undefined;
    };
    dataSource: any[];
    dateRange: string[];
  }

  /** 通用变量统一声明区域 */
  const ATable = Table;
  const AForm = Form;
  const AMenu = Menu;
  const AFormItem = Form.Item;
  const AMenuItem = Menu.Item;
  const ADivider = Divider;
  const ATooltip = Tooltip;
  const ADropdown = Dropdown;
  const ARow = Row;
  const ACol = Col;
  const ASelect = Select;
  const ASelectOption = Select.Option;
  const ARangePicker = DatePicker.RangePicker;

  const { t } = useI18n();
  const wrapRef = ref(null);
  const tableElRef = ref(null);
  const queryFormElRef = ref(null);

  const { createConfirm } = useMessage();
  const { createMessage } = useMessage();

  const { prefixCls } = useDesign('basic-table');
  const { prefixCls: headerPrefixCls } = useDesign('basic-table-header');

  const { toggle, isFullscreen } = useFullscreen(wrapRef);
  const [registerModal, { openModal }] = useModal();
  const state = reactive<TableState>({
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 总条数
    total: 0,
    // 手动设置表格高度
    tableHeight: 630,
    // a-table表格实例
    tableInstance: null,
    // a-form表单实例
    queryFormInstance: null,
    // 尺寸大小选择
    selectedKeys: ['middle'],
    // 查询参数
    queryParams: {
      current: 1,
      size: 10,
      name: undefined,
      key: undefined,
      isSys: undefined
    },
    // 数据列表
    dataSource: [],
    // 日期范围
    dateRange: []
  });

  /** 生命周期钩子回调处理区域 */
  onMounted(() => {
    state.tableInstance = unref(tableElRef);
    state.queryFormInstance = unref(queryFormElRef);
    useTimeoutFn(() => getList() , 16);
  });
  watchEffect(() => {
    // 当数据不存在时清理表格高度
    handleTableHeightSetting(state.dataSource.length > 0 ? false : true);
  });

  /** 处理表格高度设置 */
  function handleTableHeightSetting(clean?: boolean) {
    if (!state.tableInstance?.$el) return;
    const bodyEl: HTMLElement | null =  state.tableInstance.$el.querySelector('.ant-table-body');
    bodyEl && (bodyEl.style.height = `${ clean ? 'unset' : state.tableHeight+'px' }`);
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    state.queryParams.current = 1;
    getList();
  }

  /** 查询列表数据 */
  function getList() {
    listConfig(convertDateRange(state.queryParams, state.dateRange)).then(response => {
      state.dataSource = response.data;
      state.total = response.total;
    });
  }

  /** 重置按钮操作 */
  function resetQuery() {
    state.dateRange = [];
    state.queryFormInstance?.resetFields();
  }

  /** 处理多选框选中数据 */
  function handleSelectionChange(selection?: Recordable) {
    const rawRows = toRaw(selection?.rows) || [];
    state.ids = rawRows.map(item => item.id);
    state.single = rawRows.length != 1;
    state.multiple = !rawRows.length;
  }

  /** 新增按钮操作,行内新增与工具栏局域新增通用 */
  function handleAdd() {
    openModal(true,{isUpdate: false });
  }

  /** 编辑按钮操作,行内编辑 */
  function handleEdit(record?: Recordable) {
    record = record || { id: toRaw(state.ids) };
    openModal(true, { isUpdate: true, record });
  }

  /** 删除按钮操作,行内删除 */
  async function handleDel(record?: Recordable) {
    const ids = record?.id || toRaw(state.ids);
    createConfirm({
      iconType: 'warning',
      title: '警告',
      content: `是否确认删除参数编号为${ids}参数吗?`,
      onOk: async () => {
        await remove({ids: ids});
        createMessage.success('删除成功!');
        handleSuccess();
      }
    });
  }

  /** 处理表单提交成功 */
  function handleSuccess() {
    reload();
  }

</script>