2-jeecg-boot前端组件helloworld

Jeecgboot-vue3使用 vue3 + Ant Design Vue + TypeScript的组合

前言

大部分开发者对Vue都能做到“看懂、并改点东西”的程度。

这套框架使用的是TypeScript，对没接触过的人不太友好，比如下面这些语法

const emit = defineEmits(['select']);
const {createMessage} = useMessage();
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
let loading = ref<boolean>(false);

...
const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
    getPositionList,
    getBindValue
);

简单的组件使用

我尝试开发一个简单的功能。这里做个记录

表单、列表等数据展示和绑定

代码生成后，默认是列表+弹窗编辑/查看的模式。查看和编辑使用的是同一个弹窗组件，通过isUpdate参数控制编辑状态

/**
 * 编辑事件
 */
async function handleEdit(record) {
  openModalForValue(true, {
    record,
    isUpdate: true,
    multiple: false,
  });
}

/**
 * 详情
 */
async function handleDetail(record) {
  openModalForValue(true, {
    record,
    isUpdate: false,
    hideFooter: true
  });
}

列表的各个列，通过.data.ts文件的columns指定：

//列表数据
export const columns: BasicColumn[] = [

  {
    title: "名称",
    align: "left",
    dataIndex: "name"
  },
  {
    title: "显示名称",
    align: "center",
    dataIndex: "displayName"
  },
    ...
]

表单的各个字段，通过.data.ts文件的formSchema指定：

如果使用了树型表单、日期字段、数字字段等， 生成代码是会自动使用对应的控件。下面代码的JTreeSelect，是jeecg内置的树形选择控件

//表单数据
export const formSchema: FormSchema[] = [
  {
    label: "父级节点",
    field: "pid",
    component: "JTreeSelect",
    componentProps: {
      dict: "base_dictionary,name,id",
      pidField: "pid",
      pidValue: "0",
      hasChildField: "has_child",
      condition: '{"dict_type":"node"}',
    }
  },
  {
    label: "名称",
    field: "name",
    component: "Input"
  }, 
    {
        label: "排序号，大号在前",
        field: "orderNum",
        component: "InputNumber"
    },
    ...
]

查询还没尝试，简单查询应该可以使用searchFormSchema直接配置

一个页面要写多个弹窗

编写新的弹窗组件

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :width="800" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm"/>
  </BasicModal>
</template>

//注册组件

//注册表单/表单配置。通过“schemas: formSchemaForNode”，指定此弹窗的字段
const [registerForm, {setProps,resetFields, setFieldsValue, validate, updateSchema}] = useForm({
    schemas: formSchemaForNode,
    showActionButtonGroup: false,
    baseColProps: {span: 24},
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
    },
});

//注册弹窗/表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    expandedRowKeys.value = [];
    setModalProps({confirmLoading: false, minHeight: 80 ,showOkBtn: !!!data?.hideFooter});
    isUpdate.value = !!data?.isUpdate;
    if (data?.record) {
        model = data.record;
        //表单赋值
        await setFieldsValue({
            ...data.record,
        });
    } else {
        model = null;
    }
    //父级节点树信息
    treeData.value = await loadTreeData({'async': false,'pcode':''});
    // 隐藏底部时禁用整个表单
    setProps({ disabled: !!data?.hideFooter })
});

使用弹窗

在template区域引入弹窗

<BaseDictionaryModal @register="registerModalForValue" @success="handleSuccess" />
<BaseDictionaryModalForNode @register="registerModalForNode" @success="handleSuccess" />

注册弹窗

openModal是useModal()定义的方法，作用是打开弹窗

openModal:openModalForValue， 相当于在当前组件里，给openModal一个别名。使用的时候调用openModalForValue

// 注册组件。 
const [registerModalForValue, { openModal:openModalForValue }] = useModal();
const [registerModalForNode, { openModal:openModalForNode }] = useModal();

使用

//调用弹窗1
function handleCreateValue() {
  let record = ref({});
  record.value = {
    pid: selectedNodeId.value, //选中的树节点
    dictType: 'value',
  };
  openModalForValue(true, {
    record,
    isUpdate: false,
    multiple: false,
  });
}

//调用弹窗2
function handleCreateNode() {
    let record = ref({});
    record.value = {
        pid: selectedNodeId.value, //选中的树节点
        dictType: 'node',
    };
    openModalForNode(true, {
        record,
        isUpdate: false,
        multiple: false,
    });
}