wms-naivevue/src/views/content/layoutItem/layout/index.vue

<template>
  <basicModal
    @register="modalRegister"
    ref="modalRef"
    class="basicModal basicFormModal"
    @on-ok="handleSubmits"
    @on-close="handleClose"
  >
    <template #default>
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
      <BasicTable
        :columns="columnsType()"
        :request="loadDataTable"
        ref="tableRef"
        :autoScrollX="true"
        :row-key="(row) => row.id"
        @update:checked-row-keys="rowClick"
        :row-props="rowProps"
        v-model:checked-row-keys="checkedKeys"
        :showTableSetting="false"
      />
    </template>
  </basicModal>
</template>
<script lang="ts" setup>
  import { getArticleList } from '@/api/content/article';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { getNoticeList } from '@/api/data/notice';
  import { onMounted, reactive, ref } from 'vue';
  import { useModal } from '@/components/Modal';
  import { useMessage } from 'naive-ui';
  import { columns } from './article/columns';
  import { schemas } from './article/querySchemas';
  import { columns2 } from './notice/columns';
  import { schemas2 } from './notice/querySchemas';

  const emit = defineEmits(['success', 'update:visible', 'update:checked-row-keys']);
  const message = useMessage();

  /**
   * 定义接收的参数
   */
  const props = defineProps({
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    type: {
      type: Number,
      required: true,
      default: 1,
    },
  });
  const selectRow = ref({});
  const tableRef = ref();
  const checkedKeys = ref([]);

  /**
   * 定义模态
   */
  const [modalRegister, { openModal, setSubLoading }] = useModal({
    title: '选择文章',
    width: 1000,
  });

  /**
   * 定义查询参数
   */
  const formParams = reactive({
    title: '',
    status: '',
  });

  /**
   * 定义列类型
   */
  const columnsType = () => {
    if (props.type == 1) {
      // 文章
      return columns;
    } else if (props.type == 2) {
      // 通知公告
      return columns2;
    }
  };

  /**
   * 执行提交表单
   */
  const handleSubmits = async () => {
    if (!selectRow.value.id) {
      setSubLoading(false);
      return message.error('请选择文章');
    }
    setSubLoading(false);
    emit('update:visible', false);
    emit('success', selectRow.value);
  };

  /**
   * 关闭窗体
   */
  const handleClose = () => {
    emit('update:visible', false);
  };

  /**
   * 加载数据列表
   * @param res 参数
   */
  const loadDataTable = async (res: any) => {
    let result = [];
    if (props.type == 1) {
      result = await getArticleList({ ...formParams, ...res });
    } else {
      result = await getNoticeList({ ...formParams, ...res });
    }

    return result;
  };

  /**
   * 刷新数据列表
   * @param noRefresh 参数
   */
  function reloadTable(noRefresh = '') {
    tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
  }

  /**
   * 执行注册
   */
  const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas: props.type == 1 ? schemas : schemas2,
  });

  /**
   * 执行提交表单
   * @param values 参数
   */
  function handleSubmit(values) {
    for (const key in formParams) {
      formParams[key] = '';
    }
    for (const key in values) {
      formParams[key] = values[key];
    }
    reloadTable();
  }

  /**
   * 执行重置
   */
  function handleReset() {
    for (const key in formParams) {
      formParams[key] = '';
    }
    reloadTable();
  }

  /**
   * 数据行点击事件
   * @param record 参数
   */
  const rowProps = (row) => {
    console.log(row);
    return {
      style: 'cursor: pointer;',
      onClick: () => {
        checkedKeys.value = [row.id];
        selectRow.value = row;
      },
    };
  };

  /**
   * 行点击事件
   * @param record 数据记录
   * @param row 数据行
   */
  const rowClick = (record, row) => {
    console.log(record);
    checkedKeys.value = record;
    selectRow.value = row[0];
  };

  /**
   * 钩子函数
   */
  onMounted(() => {});

  /**
   * 定义函数
   */
  defineExpose({
    openModal,
  });
</script>