vue+ant-design小结

在项目中遇到的一些常规操作，此处总结一些

（因为用到xueyi，可能部分更适用于xueyi）

1.table相关的

1.1 columns

export const columns: BasicColumn[] = [{
		title: '使用对象',
		dataIndex: 'applyType',
		customRender: ({
			record
		}) => {
			const data = record
			return dictConversion(dict.applyType, data.applyType)
		},
	},

	{
		title: '发起时间',
		dataIndex: 'startTime',
		width: 200,
		ellipsis: true,
		customRender: ({
			record
		}) => {
			const data: any = record
			if (data.startTime) {
				return formatToDate(data.startTime, 'YYYY-MM-DD HH:mm:ss')
			} else {
				return ''
			}
		},
	},
	{
      title: '查看详情',
      width: 100,
      dataIndex: 'b',
      customRender: ({ text, record, index, column }) => {
      		return h('a', { onClick: () => viewImage(record) }, '查看')
  		},
    },
]

可编辑

  {
    title: '功能名称',
    dataIndex: 'funcUrl',
    editRow: true,
    editComponent:'Select',
    editComponentProps:{
      options:dict.CUSTOM_HOME
    }
  },
{
  title: '资源名称',
  dataIndex: 'resourceName',
  editRow: true,
  width: 200,
  editComponent: 'Input',
  editComponentProps: (record) => {
    return {
      suffix: h(SearchOutlined, {
        onClick() {
          QEclick()
        },
      }),
      onClick() {
        QEclick()
      },
      readonly: true,
    }
  },
},

1.2查询条件

/** 查询条件 */
export const searchFormSchema: FormSchema[] = [{
		label: '使用对象',
		field: 'applyType',
		component: 'Select',
		componentProps: {
			options: dict.applyType,
			optionFilterProp: 'label',
		},
		colProps: {
			span: 6
		},
	},
	{
		label: '数据日期',
		field: 'targetDate',
		component: 'DatePicker',
		colProps: {
			span: 6
		},
		componentProps: () => {
			return {
				valueFormat: 'YYYY-MM-DD',
			}
		},
		rules: [{
			required: true,
			message: '数据日期为必填项',
		}, ],
	},
	{
		label: '查询范围',
		field: 'queryRangeOrg',
		component: 'RadioGroup',
		colProps: {
			span: 6
		},
		componentProps: ({
			formModel,
			formActionType
		}) => {
			return {
				options: [{
					label: '本机构归属',
					value: '12',
				}],
			}
		},
	},
	{
		label: '机构',
		field: 'orgNames',
		component: 'Input',
		colProps: {
			span: 6
		},
		componentProps: () => {
			return {
				onClick: () => {
					openModalOrg(true, {})
				},
				onChange: (e) => {
					if (e.target.value == '' && e.type == 'click') {
						orgNos.value = ''
					}
				},
				readOnly: true,
			}
		},
		renderComponentContent: ({
			model,
			field
		}) => {
			return {
				suffix: () =>
					h(
						SearchOutlined, {
							value: model[field],
							onclick: () => {
								openModalOrg(true, {})
							},
						},
						'',
					),
			}
		},
	},
]

查询条件使用插槽

配置模块 
{
	label: '得分区间',
	field: 'paramStart',
	component: 'Input',
	colProps: {
		span: 6
	},
	slot: 'inputRange'
}
页面模块
<template #form - inputRange = "{ model }" >
	<a - input v - model: value = "model.paramStart"style = "width: 40%": disabled = "isUpdate" > < /a-input> 
        <span style = "width: 20%" > - < /span>
	<a - input v - model: value = "model.paramEnd"style = "width: 40%": disabled = "isUpdate" > < /a-input> 
</template>

2.Form相关

2.1description修改

{
	label: '客户英文名',
	field: 'cer',
	labelStyle: {
		textAlign: 'right'
	},
	render: (val, data) => {
		return !type.value ?
			val :
			h(Input, {
				placeholder: '请输入',
				value: val,
				onChange: (e: ChangeEvent) => {
					info.value.area = e.target.value
				},
			})
	},
}, {
	label: '是否',
	field: 'whe',
	labelStyle: {
		textAlign: 'right'
	},
	render: (val, data) => {
		return h(Checkbox, {
				checked: true,
				disabled: true,
			})
	},
}, {
	label: '主营业务',
	field: 'indu',
	labelStyle: {
		textAlign: 'right'
	},
	span: 2,
	render: (val, data) => {
		return h(Textarea, {
				value: val,
			})
	},
},

2.2 配置使用插槽

<template #assetsBal="{ model }">
   <a-input
     v-model:value="model.assetsBalStart"
     style="width: 45%"
   ></a-input>
   <span style="display: inline-block; width: 10%; text-align: center"
     >-</span
   >
   <a-input
     v-model:value="model.assetsBalEnd"
     style="width: 45%"
   ></a-input>
</template>


配置模块
 {
   label: '资产余额',
   field: 'assetsBal',
   component: 'Input',
   colProps: { span: 12 },
   slot: 'assetsBal',
},