Jeecg 官方组件的使用笔记(更新中...)

1.watch

 watch(
    () => detailData.value,
    (v) => {
    
      setFieldsValue(v);
    }
  );

2.拿组件变量和传值

import {
     toRefs } from 'vue';
 const props = defineProps<{
    
    detailData: {
    
      type: DemandOrderDetailInfo;
      default: {
    };
    };
  }>();
 const {
     detailData } = toRefs(props);


//子传父
const emit = defineEmits(['postInfo']);
emit('postInfo', data);
<PostInfo @postInfo="getPostInfo" />
const getPostInfo = (data) => {
    
    console.log(data);
  };

3.表格BasicColumn

import moment from'moment'
export function getBasicColumns(): BasicColumn[] {
    
    return [
 {
    
    title: '候选人',
    dataIndex: 'cddtName',
    key: 'cddtName',
    width: 80,
  },
  {
    
    title: '级别',
    dataIndex: 'custJobLevl',
    key: 'custJobLevl',
    width: 60,
    customRender: ({
      text }) => {
    //字典值
      return render.renderDict(text, 'job_level');
    },
},
{
    
  title: '面试时间',
  dataIndex: 'intviewTime',
  key: 'intviewTime',
  width: 100,
  customRender: ({
      text }) => {
    //格式化时间
  return moment(text).format('YYYY-MM-DD');
  }
}
  {
    //插槽
    title: '操作',
    slots: {
    
      customRender: 'action',
    },
    width: 60,
  },       
    ]
}

//1.基础用法 data接收的是数组
    <BasicTable :can-resize="false" title="初试信息" :bordered="true" :columns="test" :data-source="testIntviewVoList" :showIndexColumn="false" :pagination="false" />

4.表单schema

export const getAdvanceSchema = (): FormSchema[] => {
    
  return [
    {
    //普通表单
    field: 'jobNum',
    label: '需求人数',
    component: 'Input',
    colProps: {
    
      span: 8,
    },
  },
  {
    //获取数据字典的下拉表单
    field: 'priority',
    label: '优先级',
    component: 'JDictSelectTag',
    componentProps: {
    
      dictCode: 'order_priority',
      onChange: (e, selected) => {
    //获取选中的字典值
          console.log(e);
          console.log(selected);
        },
    },
    colProps: {
    
      span: 8,
    },
  },
  {
    //格式化时间格式
      label: '初试日期',
      component: 'DatePicker',
      field: 'intviewTime',
      componentProps: {
    
          valueFormat: 'YYYY-MM-DD',
      },
      colProps: {
    
          span: 6,
      },
      labelWidth: 120,
   }
     {
    //通过ifShow或show来控制表单显示
      label: '测试！',
      component: 'Input',
      field: 'cddtName2',
      colProps: {
    
        span: 30,
      },
      labelWidth: 80,
      ifShow: ({
      values }) => {
    
        return values.custIntviewName == 'cdd';
      },
    },
    {
    
      label: '复试面试官',
      component: 'Input',
      field: 'custIntviewName',
      colProps: {
    
        span: 30,
      },
      labelWidth: 80,
    },
    {
    //在表单内嵌入***元
      label: '期望薪资',
      component: 'JInput',
      field: 'expectSalary',
      componentProps: {
    
        placeholder: '请输入期望薪资(元)',
        type: 'number',
        suffix: '元',
      },
      colProps: {
    
        span: 5,
      },
      labelWidth: 120,
    }，
      {
    //使用ApiSelect，{label:'boss直聘',value:'10001'}形式
      label: '简历渠道',
      component: 'ApiSelect',
      componentProps: {
    
        api: getQueryResumeChnlCfg,
        labelField: 'chnlName',
        optionFilterProp: 'chnlName',
        resultField: 'list',
        valueField: 'id',
        showSearch: true,
        showChooseOption: false,
      },
      field: 'chnlName',
      labelWidth: 120,
      colProps: {
    
        span: 5,
      },
      required: true,
    },
 ]

import BnRequest from '/@/bn/BnRequest';

interface ResumeChnlCfg {
    
  chnlName?: string;
  id?: string;
}
//简历渠道请求地址
export const getQueryResumeChnlCfg = async (): Promise<{
     list: Array<ResumeChnlCfg> }> => {
    
  const data = await BnRequest.get<ResumeChnlCfg[]>('/resumeChnlCfg/queryResumeChnlCfg', {
    });
  if (data) {
    
    console.log(data);
    return {
     list: data };
  }
  return {
     list: [] };
};

5.描述schema

import {
     DescItem } from '/@/components/Description/index';
import {
     h } from 'vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import {
     render } from '/@/utils/common/renderUtils';
export const detailSchema: DescItem[] = [
    {
    
        field: 'custName',
        label: '客户名称',
    },
    {
    
        field: 'id',
        label: '需求编号',
    },
    {
    
        field: 'projName',
        label: '项目名称',
    },
    {
    
        field: 'custProjName',
        label: '客户项目名称',
    },
    {
    
        label: '级别',
        field: 'jobLevl',
        render: (curVal) => {
    //使用数据字典的值
            return render.renderDict(curVal, 'job_level');
        },
    },
    {
    
        field: 'projDscr',
        label: '项目简介',
    },
    {
    
        field: 'custProjCscr',
        label: '客户项目简介',
        render: () => {
    //配置选择插槽
            return h(JDictSelectTag, {
     dictCode: 'demand_source_type' });
        },
    },
    {
    
        field: 'reqBeginTimeStr',
        label: '接受需求日期',
        render: (curVal) => {
    //格式化时间
        return moment(curVal).format('YYYY-MM-DD');
      },
    },
     
 
];

//1.基础用法 data接收的是对象
 <Description title="约面信息" :bordered="true" :schema="appoint" :data="recruitAppointVo" />

6.路由传参

import {
     useRouter,useRoute } from 'vue-router';
 const {
     replace } = useRouter();

//1.函数传参
const gotoAudit = (id) => {
    
    replace({
     name: 'order-delivery-order-audit', params: {
     orderId: id } });
  };

//2.标签传参
 <a-button type="link" @click="replace({ name: 'recruit-talent-pool-detail', params: { id: record.id } })" />
     
//3.接收传参
let id= useRoute().params.id as string;

7.消息提示

import {
     useMessage } from '/@/hooks/web/useMessage';
const {
     createMessage } = useMessage();
createMessage.success('拒绝成功!');