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 text?moment(text).utc().zone(+0).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" />

在搜索-列表上加插槽

<template #form-resumeExport>
        <a-button style="margin-left: 5px" type="primary" @click="exportResume">导出人才库</a-button>
  </template>

4.表单schema

import { isMobile, isEmail } from '/@/bn/BnUtil';
export const getAdvanceSchema = (): FormSchema[] => {
  return [
    {//普通表单
    field: 'jobNum',
    label: '需求人数',
    component: 'Input',
    colProps: {
      span: 8,
    },
  },
  {//获取数据字典的下拉表单
    field: 'priority',
    label: '优先级',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'order_priority',
      showChooseOption: false,//默认设置没有‘请选择’那一项
      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: 'Input',
      field: 'mobileNum',
      colProps: {
        span: 5,
      },
      labelWidth: 120,
      rules: [
        {
          required: true,
          // @ts-ignore
          validator: async (rule, value) => {
            if (!value) {
              /* eslint-disable-next-line */
              return Promise.reject('手机号不能为空');
            }
            if (!isMobile(value)) {
              /* eslint-disable-next-line */
              return Promise.reject('手机号格式不正确');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
    },
    {//在表单内嵌入***元
      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,
    },
    //后端返回： "data": [ {   "placeId": "1", "placeName": "上海"   } ],
      {
    label: '工作城市',
    component: 'ApiSelect',
    field: 'workPlaceId',
    required: true,
    colProps: {
      span: 6,
    },
    componentProps: {
      api: useAllPlace,
      labelField: 'placeName',
      optionFilterProp: 'placeName',
      resultField: 'list',
      valueField: 'placeId',
      showSearch: true,
      showChooseOption: false,
    },
  },
//apiSelect开启模糊搜索
{
        label: '所属项目',
        component: 'ApiSelect',
        field: 'projId',
        colProps: {
          span: 6,
        },
        componentProps: {
          api: useProjectNames,
          resultField: 'list',
          valueField: 'projId',
          labelField: 'projName',
          optionFilterProp: 'label',
          showSearch: true,
        },
        labelWidth: 80,
      },
//apiTreeSelect树结构开启模糊搜索
{
  label: '客户名称',
  component: 'ApiTreeSelect',
  field: 'custId',
  required: true,
  colProps: {
    span: 8,
  },
  componentProps: {
    api: useCustTree,
    resultField: 'list',
    valueField: 'id',
    labelField: 'custName',
    treeNodeFilterProp: 'title',
    showSearch: true,
    onChange: (e) => {
      console.log(e);
      custId.value = e as string;
    },
  },
},
//分类字典的使用
  {
    label: '专业技术职务',
    component: 'JCategorySelect',
    field: 'techPost',
    colProps: {
      span: 24,
    },
    required: true,
    componentProps: {
      pcode: '000002',
      back: 'code',
      showChooseOption: false,
      onChange: (v) => {
        //筛选给后端传的值
        selectTech_Post.value = dataCategory.value.filter((item) => {
          return item.id == v;
        });
        console.log(selectTech_Post.value);
      },
    },
  },

 ]

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' });
        },
    },
    {//自义定value的样式
    field: 'costBudget',
    label: '项目成本预算',
    render: (v) => {
      //h(node结点,{样式},参数)
      return h('div', { style: { textAlign: 'right' } }, bnRender.renderMoneyText(v));
    },
  },
    {
        field: 'reqBeginTimeStr',
        label: '接受需求日期',
       render: (curVal) => {
      //格式化时间
      return curVal ? 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('拒绝成功!');

8.返回组件

  <CollapseContainer :canExpan="false">
    <div class="btns">
      <a-button class="btn" type="ghost" @click="backOrder">返回</a-button>
    </div>
  </CollapseContainer>

  import { CollapseContainer } from '/@/components/Container/index';
  import { useTabBack } from '/@/views/bn/hooks/useTabBack';
  const { back } = useTabBack();
  const backOrder = () => {
    back();
  };

 .btns {
    text-align: center;
    .btn {
      margin-right: 2rem;
    }
  }

9.动态表单中radio-group组件取消选中

  dynamicSchemas.push({
          field: val.itemId,
          component: 'RadioGroup',
          label: val.itemName,
          componentProps: ({ formModel }) => {
            return {
              options: options,
              placeholder: val.itemTip,
              disabled: disable,
              onClick: () => {
              //核心代码
                if (formModel[val.itemId] || formModel[val.itemId] == '0') {
                  formModel[val.itemId] = '';
                }
              },
            };
          },
          //defaultValue: val.itemValue ? val.itemValue : '',
          colProps: {
            span: 20,
          },
          labelWidth: (val.level - 1) * 100,
          required: val.isRequired == 'Y' ? true : false,
        });