feat: action width
							parent
							
								
									d34aa1d30c
								
							
						
					
					
						commit
						9e85d8a280
					
				|  | @ -66,7 +66,7 @@ const [register, { expandAll, collapseAll, getForm, reload }] = useTable({ | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   canResize: false, |   canResize: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -61,7 +61,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -56,7 +56,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -52,7 +52,7 @@ const [registerTable, { getForm, reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -51,7 +51,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -51,7 +51,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -61,7 +61,7 @@ const [register, { expandAll, collapseAll, getForm, reload }] = useTable({ | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   canResize: false, |   canResize: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -51,7 +51,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -51,7 +51,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -53,7 +53,7 @@ const [registerTable, { getForm, reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -54,7 +54,7 @@ const [registerTable, { getForm, reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -57,7 +57,7 @@ const [registerTable, { getForm, reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -0,0 +1,54 @@ | ||||||
|  | <template> | ||||||
|  |   <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> | ||||||
|  |     <BasicForm @register="registerForm" /> | ||||||
|  |   </BasicModal> | ||||||
|  | </template> | ||||||
|  | <script lang="ts" setup name="SmsChannelModal"> | ||||||
|  | import { ref, computed, unref } from 'vue' | ||||||
|  | import { BasicModal, useModalInner } from '@/components/Modal' | ||||||
|  | import { BasicForm, useForm } from '@/components/Form' | ||||||
|  | import { formSchema } from './smsChannel.data' | ||||||
|  | import { createSmsChannelApi, getSmsChannelApi, updateSmsChannelApi } from '@/api/system/sms/smsChannel' | ||||||
|  | 
 | ||||||
|  | const emit = defineEmits(['success', 'register']) | ||||||
|  | const isUpdate = ref(true) | ||||||
|  | const rowId = ref() | ||||||
|  | 
 | ||||||
|  | const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ | ||||||
|  |   labelWidth: 100, | ||||||
|  |   baseColProps: { span: 24 }, | ||||||
|  |   schemas: formSchema, | ||||||
|  |   showActionButtonGroup: false, | ||||||
|  |   actionColOptions: { span: 23 } | ||||||
|  | }) | ||||||
|  | 
 | ||||||
|  | const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { | ||||||
|  |   resetFields() | ||||||
|  |   setModalProps({ confirmLoading: false }) | ||||||
|  |   isUpdate.value = !!data?.isUpdate | ||||||
|  | 
 | ||||||
|  |   if (unref(isUpdate)) { | ||||||
|  |     const res = await getSmsChannelApi(data.record.id) | ||||||
|  |     rowId.value = res.id | ||||||
|  |     setFieldsValue({ ...res }) | ||||||
|  |   } | ||||||
|  | }) | ||||||
|  | 
 | ||||||
|  | const getTitle = computed(() => (!unref(isUpdate) ? '新增短信渠道' : '编辑短信渠道')) | ||||||
|  | 
 | ||||||
|  | async function handleSubmit() { | ||||||
|  |   try { | ||||||
|  |     const values = await validate() | ||||||
|  |     setModalProps({ confirmLoading: true }) | ||||||
|  |     if (unref(isUpdate)) { | ||||||
|  |       await updateSmsChannelApi(values) | ||||||
|  |     } else { | ||||||
|  |       await createSmsChannelApi(values) | ||||||
|  |     } | ||||||
|  |     closeModal() | ||||||
|  |     emit('success') | ||||||
|  |   } finally { | ||||||
|  |     setModalProps({ confirmLoading: false }) | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | @ -0,0 +1,137 @@ | ||||||
|  | import { BasicColumn, FormSchema, useRender } from '@/components/Table' | ||||||
|  | import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' | ||||||
|  | 
 | ||||||
|  | export const columns: BasicColumn[] = [ | ||||||
|  |   { | ||||||
|  |     title: '编号', | ||||||
|  |     dataIndex: 'id', | ||||||
|  |     width: 100 | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '短信签名', | ||||||
|  |     dataIndex: 'signature', | ||||||
|  |     width: 180 | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '渠道编码', | ||||||
|  |     dataIndex: 'code', | ||||||
|  |     width: 180, | ||||||
|  |     customRender: ({ text }) => { | ||||||
|  |       return useRender.renderDict(text, DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '启用状态', | ||||||
|  |     dataIndex: 'status', | ||||||
|  |     width: 180, | ||||||
|  |     customRender: ({ text }) => { | ||||||
|  |       return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '备注', | ||||||
|  |     dataIndex: 'remark', | ||||||
|  |     width: 180 | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '短信 API 的账号', | ||||||
|  |     dataIndex: 'apiKey', | ||||||
|  |     width: 180 | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '短信 API 的密钥', | ||||||
|  |     dataIndex: 'apiSecret', | ||||||
|  |     width: 180 | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '短信发送回调 URL', | ||||||
|  |     dataIndex: 'callbackUrl', | ||||||
|  |     width: 180 | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     title: '创建时间', | ||||||
|  |     dataIndex: 'createTime', | ||||||
|  |     width: 180, | ||||||
|  |     customRender: ({ text }) => { | ||||||
|  |       return useRender.renderDate(text) | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | ] | ||||||
|  | 
 | ||||||
|  | export const searchFormSchema: FormSchema[] = [ | ||||||
|  |   { | ||||||
|  |     label: '短信签名', | ||||||
|  |     field: 'signature', | ||||||
|  |     component: 'Input', | ||||||
|  |     colProps: { span: 8 } | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '启用状态', | ||||||
|  |     field: 'status', | ||||||
|  |     component: 'Select', | ||||||
|  |     componentProps: { | ||||||
|  |       options: getIntDictOptions(DICT_TYPE.COMMON_STATUS) | ||||||
|  |     }, | ||||||
|  |     colProps: { span: 8 } | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '创建时间', | ||||||
|  |     field: 'createTime', | ||||||
|  |     component: 'RangePicker', | ||||||
|  |     colProps: { span: 8 } | ||||||
|  |   } | ||||||
|  | ] | ||||||
|  | 
 | ||||||
|  | export const formSchema: FormSchema[] = [ | ||||||
|  |   { | ||||||
|  |     label: '编号', | ||||||
|  |     field: 'id', | ||||||
|  |     show: false, | ||||||
|  |     component: 'Input' | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '短信签名', | ||||||
|  |     field: 'signature', | ||||||
|  |     required: true, | ||||||
|  |     component: 'Input' | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '渠道编码', | ||||||
|  |     field: 'code', | ||||||
|  |     component: 'Select', | ||||||
|  |     required: true, | ||||||
|  |     componentProps: { | ||||||
|  |       options: getIntDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '启用状态', | ||||||
|  |     field: 'status', | ||||||
|  |     component: 'Select', | ||||||
|  |     defaultValue: 0, | ||||||
|  |     componentProps: { | ||||||
|  |       options: getIntDictOptions(DICT_TYPE.COMMON_STATUS) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '备注', | ||||||
|  |     field: 'remark', | ||||||
|  |     component: 'InputTextArea' | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '短信 API 的账号', | ||||||
|  |     field: 'apiKey', | ||||||
|  |     required: true, | ||||||
|  |     component: 'Input' | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '短信 API 的密钥', | ||||||
|  |     field: 'apiSecret', | ||||||
|  |     component: 'Input' | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     label: '短信发送回调 URL', | ||||||
|  |     field: 'callbackUrl', | ||||||
|  |     component: 'Input' | ||||||
|  |   } | ||||||
|  | ] | ||||||
|  | @ -1,3 +1,80 @@ | ||||||
| <template> | <template> | ||||||
|   <div>开发中</div> |   <div> | ||||||
|  |     <BasicTable @register="registerTable"> | ||||||
|  |       <template #toolbar> | ||||||
|  |         <a-button type="primary" @click="handleCreate"> {{ t('action.create') }} </a-button> | ||||||
|  |       </template> | ||||||
|  |       <template #bodyCell="{ column, record }"> | ||||||
|  |         <template v-if="column.key === 'action'"> | ||||||
|  |           <TableAction | ||||||
|  |             :actions="[ | ||||||
|  |               { icon: 'clarity:note-edit-line', label: t('action.edit'), onClick: handleEdit.bind(null, record) }, | ||||||
|  |               { | ||||||
|  |                 icon: 'ant-design:delete-outlined', | ||||||
|  |                 color: 'error', | ||||||
|  |                 label: t('action.delete'), | ||||||
|  |                 popConfirm: { | ||||||
|  |                   title: t('common.delMessage'), | ||||||
|  |                   placement: 'left', | ||||||
|  |                   confirm: handleDelete.bind(null, record) | ||||||
|  |                 } | ||||||
|  |               } | ||||||
|  |             ]" | ||||||
|  |           /> | ||||||
|  |         </template> | ||||||
|  |       </template> | ||||||
|  |     </BasicTable> | ||||||
|  |     <SmsChannelModal @register="registerModal" @success="reload()" /> | ||||||
|  |   </div> | ||||||
| </template> | </template> | ||||||
|  | <script lang="ts" setup name="SmsChannel"> | ||||||
|  | import { useI18n } from '@/hooks/web/useI18n' | ||||||
|  | import { useMessage } from '@/hooks/web/useMessage' | ||||||
|  | import { useModal } from '@/components/Modal' | ||||||
|  | import SmsChannelModal from './SmsChannelModal.vue' | ||||||
|  | import { BasicTable, useTable, TableAction } from '@/components/Table' | ||||||
|  | import { deleteSmsChannelApi, getSmsChannelPageApi } from '@/api/system/sms/smsChannel' | ||||||
|  | import { columns, searchFormSchema } from './smsChannel.data' | ||||||
|  | 
 | ||||||
|  | const { t } = useI18n() | ||||||
|  | const { createMessage } = useMessage() | ||||||
|  | const [registerModal, { openModal }] = useModal() | ||||||
|  | 
 | ||||||
|  | const [registerTable, { reload }] = useTable({ | ||||||
|  |   title: '短信渠道列表', | ||||||
|  |   api: getSmsChannelPageApi, | ||||||
|  |   columns, | ||||||
|  |   formConfig: { | ||||||
|  |     labelWidth: 120, | ||||||
|  |     schemas: searchFormSchema | ||||||
|  |   }, | ||||||
|  |   useSearchForm: true, | ||||||
|  |   showTableSetting: true, | ||||||
|  |   showIndexColumn: false, | ||||||
|  |   actionColumn: { | ||||||
|  |     width: 140, | ||||||
|  |     title: t('common.action'), | ||||||
|  |     dataIndex: 'action', | ||||||
|  |     fixed: 'right' | ||||||
|  |   } | ||||||
|  | }) | ||||||
|  | 
 | ||||||
|  | function handleCreate() { | ||||||
|  |   openModal(true, { | ||||||
|  |     isUpdate: false | ||||||
|  |   }) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function handleEdit(record: Recordable) { | ||||||
|  |   openModal(true, { | ||||||
|  |     record, | ||||||
|  |     isUpdate: true | ||||||
|  |   }) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | async function handleDelete(record: Recordable) { | ||||||
|  |   await deleteSmsChannelApi(record.id) | ||||||
|  |   createMessage.success(t('common.delSuccessText')) | ||||||
|  |   reload() | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | @ -52,7 +52,7 @@ const [registerTable, { getForm, reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -51,7 +51,7 @@ const [registerTable, { reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
|  | @ -58,7 +58,7 @@ const [registerTable, { getForm, reload }] = useTable({ | ||||||
|   showTableSetting: true, |   showTableSetting: true, | ||||||
|   showIndexColumn: false, |   showIndexColumn: false, | ||||||
|   actionColumn: { |   actionColumn: { | ||||||
|     width: 120, |     width: 140, | ||||||
|     title: t('common.action'), |     title: t('common.action'), | ||||||
|     dataIndex: 'action', |     dataIndex: 'action', | ||||||
|     fixed: 'right' |     fixed: 'right' | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 xingyuv
						xingyuv