Notes on the use of official jeecg components (under update...)

1.watch

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

2. Take component variables and transfer values

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


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

3. form BasicColumn

import moment from'moment'
export function getBasicColumns(): BasicColumn[] {
    
    return [
 {
    
    title: ' The candidate ',
    dataIndex: 'cddtName',
    key: 'cddtName',
    width: 80,
  },
  {
    
    title: ' Level ',
    dataIndex: 'custJobLevl',
    key: 'custJobLevl',
    width: 60,
    customRender: ({
      text }) => {
    // The dictionary is worth 
      return render.renderDict(text, 'job_level');
    },
},
{
    
  title: ' The interview time ',
  dataIndex: 'intviewTime',
  key: 'intviewTime',
  width: 100,
  customRender: ({
      text }) => {
    // Format time 
  return moment(text).format('YYYY-MM-DD');
  }
}
  {
    // slot 
    title: ' operation ',
    slots: {
    
      customRender: 'action',
    },
    width: 60,
  },       
    ]
}

//1. Basic usage  data Received is an array 
    <BasicTable :can-resize="false" title=" Preliminary information " :bordered="true" :columns="test" :data-source="testIntviewVoList" :showIndexColumn="false" :pagination="false" />

4. Forms schema

export const getAdvanceSchema = (): FormSchema[] => {
    
  return [
    {
    // Normal form 
    field: 'jobNum',
    label: ' The number of people needed ',
    component: 'Input',
    colProps: {
    
      span: 8,
    },
  },
  {
    // Get the drop-down form of the data dictionary 
    field: 'priority',
    label: ' priority ',
    component: 'JDictSelectTag',
    componentProps: {
    
      dictCode: 'order_priority',
      onChange: (e, selected) => {
    // Get the selected dictionary value 
          console.log(e);
          console.log(selected);
        },
    },
    colProps: {
    
      span: 8,
    },
  },
  {
    // Format time format 
      label: ' Date of initial test ',
      component: 'DatePicker',
      field: 'intviewTime',
      componentProps: {
    
          valueFormat: 'YYYY-MM-DD',
      },
      colProps: {
    
          span: 6,
      },
      labelWidth: 120,
   }
     {
    // adopt ifShow or show To control the form display 
      label: ' test ！',
      component: 'Input',
      field: 'cddtName2',
      colProps: {
    
        span: 30,
      },
      labelWidth: 80,
      ifShow: ({
      values }) => {
    
        return values.custIntviewName == 'cdd';
      },
    },
    {
    
      label: ' Second interview interviewer ',
      component: 'Input',
      field: 'custIntviewName',
      colProps: {
    
        span: 30,
      },
      labelWidth: 80,
    },
    {
    // Embed... In the form *** element 
      label: ' Salary Expectation ',
      component: 'JInput',
      field: 'expectSalary',
      componentProps: {
    
        placeholder: ' Please enter the expected salary ( element )',
        type: 'number',
        suffix: ' element ',
      },
      colProps: {
    
        span: 5,
      },
      labelWidth: 120,
    },
      {
    // Use ApiSelect,{label:'boss Direct employment ',value:'10001'} form 
      label: ' Resume channel ',
      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;
}
// Resume channel request address 
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. describe 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: ' Customer name ',
    },
    {
    
        field: 'id',
        label: ' Demand number ',
    },
    {
    
        field: 'projName',
        label: ' Project name ',
    },
    {
    
        field: 'custProjName',
        label: ' Customer project name ',
    },
    {
    
        label: ' Level ',
        field: 'jobLevl',
        render: (curVal) => {
    // Use data dictionary values 
            return render.renderDict(curVal, 'job_level');
        },
    },
    {
    
        field: 'projDscr',
        label: ' Project brief introduction ',
    },
    {
    
        field: 'custProjCscr',
        label: ' Customer project profile ',
        render: () => {
    // Configure the selected slot 
            return h(JDictSelectTag, {
     dictCode: 'demand_source_type' });
        },
    },
    {
    
        field: 'reqBeginTimeStr',
        label: ' Date of acceptance of requirements ',
        render: (curVal) => {
    // Format time 
        return moment(curVal).format('YYYY-MM-DD');
      },
    },
     
 
];

//1. Basic usage  data Object received 
 <Description title=" Approximate surface information " :bordered="true" :schema="appoint" :data="recruitAppointVo" />

6. Route parameters

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

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

//2. Tag reference 
 <a-button type="link" @click="replace({ name: 'recruit-talent-pool-detail', params: { id: record.id } })" />
     
//3. Receive and transmit parameters 
let id= useRoute().params.id as string;

7. Message tip

import {
     useMessage } from '/@/hooks/web/useMessage';
const {
     createMessage } = useMessage();
createMessage.success(' Refuse success !');