| | |
| | | import { router } from './router'; |
| | | import formCreate from '@form-create/element-ui'; |
| | | import FcDesigner from '@form-create/designer'; |
| | | import Antd from 'ant-design-vue'; |
| | | import 'ant-design-vue/dist/reset.css'; |
| | | async function bootstrap(namespace: string) { |
| | | |
| | | // åå§åç»ä»¶éé
å¨ |
| | | await initComponentAdapter(); |
| | | |
| | |
| | | app.use(ElementPlus); |
| | | app.use(formCreate); |
| | | app.use(FcDesigner); |
| | | app.use(Antd); |
| | | // å¨ææ´æ°æ é¢ |
| | | watchEffect(() => { |
| | | if (preferences.app.dynamicTitle) { |
¶Ô±ÈÐÂÎļþ |
| | |
| | | import type { VxeGridProps } from 'src/adapter/vxe-table'; |
| | | import type { FormSchemaGetter } from "src/adapter/form"; |
| | | |
| | | |
| | | export const querySchema: FormSchemaGetter = () => [ |
| | | { |
| | | component: 'Input', |
| | | fieldName: 'roleName', |
| | | label: 'åç§°', |
| | | }, |
| | | |
| | | { |
| | | component: 'Select', |
| | | fieldName: 'roleSort', |
| | | label: 'å建人', |
| | | }, |
| | | { |
| | | component: 'RangePicker', |
| | | fieldName: 'createTime', |
| | | label: 'å建æ¶é´', |
| | | }, |
| | | ]; |
| | | export const columns: VxeGridProps['columns'] = [ |
| | | { type: 'checkbox', width: 60 }, |
| | | { |
| | | title: 'åç§°', |
| | | field: 'roleName', |
| | | }, |
| | | { |
| | | title: 'å建人', |
| | | field: 'roleSort', |
| | | }, |
| | | { |
| | | title: 'å建æ¶é´', |
| | | field: 'createTime', |
| | | }, |
| | | { |
| | | field: 'action', |
| | | fixed: 'right', |
| | | slots: { default: 'action' }, |
| | | title: 'æä½', |
| | | width: 180, |
| | | }, |
| | | ]; |
| | |
| | | <template> |
| | | <div>å·¥ä½èæ ¸ææ </div> |
| | | <Page :auto-content-height="true"> |
| | | <BasicTable table-title="å·¥ä½èæ ¸ææ å表"> |
| | | <template #toolbar-tools> |
| | | <Space> |
| | | <a-button |
| | | v-access:code="['system:role:export']" |
| | | @click="handleDownloadExcel" |
| | | style="margin-right: 10px" |
| | | > |
| | | {{ $t('pages.common.export') }} |
| | | </a-button> |
| | | <a-button |
| | | type="primary" |
| | | v-access:code="['system:role:add']" |
| | | @click="handleAdd" |
| | | > |
| | | {{ $t('pages.common.add') }} |
| | | </a-button> |
| | | </Space> |
| | | </template> |
| | | </BasicTable> |
| | | </Page> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | <script setup lang="ts"> |
| | | import type { VxeGridProps } from "#/adapter/vxe-table"; |
| | | import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table'; |
| | | import type { VbenFormProps } from '@vben/common-ui'; |
| | | import type { roleList} from "#/api/system/role"; |
| | | import { columns, querySchema } from './data'; |
| | | import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui'; |
| | | const formOptions: VbenFormProps = { |
| | | commonConfig: { |
| | | labelWidth: 80, |
| | | componentProps: { |
| | | allowClear: true, |
| | | }, |
| | | }, |
| | | schema: querySchema(), |
| | | wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', |
| | | // æ¥æéæ©æ ¼å¼å |
| | | fieldMappingTime: [ |
| | | [ |
| | | 'createTime', |
| | | ['params[beginTime]', 'params[endTime]'], |
| | | ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'], |
| | | ], |
| | | ], |
| | | }; |
| | | const gridOptions: VxeGridProps = { |
| | | checkboxConfig: { |
| | | // é«äº® |
| | | highlight: true, |
| | | // 翻页æ¶ä¿çéä¸ç¶æ |
| | | reserve: true, |
| | | // ç¹å»è¡éä¸ |
| | | // trigger: 'row', |
| | | checkMethod: ({ row }) => row.roleId !== 1, |
| | | }, |
| | | columns, |
| | | height: 'auto', |
| | | keepSource: true, |
| | | pagerConfig: {}, |
| | | proxyConfig: { |
| | | ajax: { |
| | | query: async ({ page }, formValues = {}) => { |
| | | return await roleList({ |
| | | pageNum: page.currentPage, |
| | | pageSize: page.pageSize, |
| | | ...formValues, |
| | | }); |
| | | }, |
| | | }, |
| | | }, |
| | | rowConfig: { |
| | | keyField: 'roleId', |
| | | }, |
| | | id: 'system-role-index', |
| | | }; |
| | | const [BasicTable,tableApi] = useVbenVxeGrid({ |
| | | formOptions, |
| | | gridOptions, |
| | | }); |
| | | const handleAdd = () => { |
| | | console.log('æ°å¢') |
| | | } |
| | | const handleDownloadExcel = () => { |
| | | console.log('导åº') |
| | | } |
| | | </script> |
| | | |
¶Ô±ÈÐÂÎļþ |
| | |
| | | |
| | | |
| | | <script> |
| | | import {modelInfo} from "#/api/system/model/index.js"; |
| | | import {pick} from "lodash-es"; |
| | | import {useVbenModal} from "@vben/common-ui"; |
| | | import {ref, computed} from "vue"; |
| | | import { $t } from '@vben/locales'; |
| | | const defaultValues = { |
| | | id: undefined, |
| | | name: undefined, |
| | | } |
| | | |
| | | const isUpdate = ref(false); |
| | | const title = computed(() => { |
| | | return isUpdate.value ? $t('ç¼è¾') : $t('æ°å¢'); |
| | | }); |
| | | const { validate, validateInfos, resetFields } = Form.useForm( |
| | | formData, |
| | | formRules, |
| | | ); |
| | | const [BasicModal, modalApi] = useVbenModal({ |
| | | class: 'w-[550px]', |
| | | fullscreenButton: false, |
| | | closeOnClickModal: false, |
| | | onClosed: handleCancel, |
| | | onConfirm: handleConfirm, |
| | | onOpenChange: async (isOpen) => { |
| | | if (!isOpen) { |
| | | return null; |
| | | } |
| | | modalApi.modalLoading(true); |
| | | |
| | | const { id } = modalApi.getData() as { id?: number | string }; |
| | | isUpdate.value = !!id; |
| | | |
| | | if (isUpdate.value && id) { |
| | | const record = await modelInfo(id); |
| | | // åªèµå¼åå¨çåæ®µ |
| | | const filterRecord = pick(record, Object.keys(defaultValues)); |
| | | formData.value = filterRecord; |
| | | } |
| | | |
| | | modalApi.modalLoading(false); |
| | | }, |
| | | }); |
| | | |
| | | |
| | | </script> |
| | | <template> |
| | | <BasicModal :title="title"> |
| | | <Form :label-col="{ span: 4 }"> |
| | | <FormItem label="åç§°" v-bind="validateInfos.name"> |
| | | <Input |
| | | v-model:value="formData.name" |
| | | :placeholder="$t('ui.formRules.required')" |
| | | /> |
| | | </FormItem> |
| | | </Form> |
| | | </BasicModal> |
| | | </template> |
| | | <style scoped> |
| | | |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div>111</div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div style="padding: 20px"> |
| | | <a-card style="width: 100%" title="æµç¨å®ä¹å表"> |
| | | <a-table :dataSource="dataSource" :columns="columns" /> |
| | | </a-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | setup() { |
| | | return { |
| | | dataSource: [ |
| | | { |
| | | key: '1', |
| | | name: 'è¡å½¦æ', |
| | | age: 32, |
| | | address: '西æ¹åºæ¹åºå
¬å1å·', |
| | | }, |
| | | { |
| | | key: '2', |
| | | name: 'è¡å½¦ç¥', |
| | | age: 42, |
| | | address: '西æ¹åºæ¹åºå
¬å1å·', |
| | | }, |
| | | ], |
| | | |
| | | columns: [ |
| | | { |
| | | title: 'å§å', |
| | | dataIndex: 'name', |
| | | key: 'name', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: 'å¹´é¾', |
| | | dataIndex: 'age', |
| | | key: 'age', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: 'ä½å', |
| | | dataIndex: 'address', |
| | | key: 'address', |
| | | align: 'center', |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |