@xizs/nuxt-antui 0.0.6 → 0.0.8

package/app/components/global/FormTable.tsx

@@ -1,13 +1,39 @@
-import { defineComponent, ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 import { AForm, AFormItem, AInput, AButton, ATable, ASelect, APagination, ARangePicker, RedoOutlined } from '#components'
 import type { TableColumnType } from 'ant-design-vue'
 import dayjs from 'dayjs'
 
 type TableFormItemType = {
-  label: string
-  key: string
-  is: string
-  bind?: any
+    label: string,
+    key: string,
+    is: string,
+    bind?: any,
+    value?:any
+}
+
+export type TablePropsType = {
+  form?: TableFormItemType[]
+  table: {
+    'v-slots'?:any
+    enableSelection?: boolean
+    columns: TableColumnType[]
+    rowKey: (row: any) => any
+    data: (params:any) => any
+  },
+  footerOptions?: {
+    show: boolean
+  },
+  'v-slots'?:any
+}
+
+export type AttributeType = {
+    selectItems:any[],
+    selectKeys:any[],
+    page:number,
+    pageSize: number,
+    tableData: any[],
+    metaTableData:any[],
+    form:any
 }
 
 let dateRange = defineComponent({
@@ -45,7 +71,7 @@ let dateRange = defineComponent({
 }) 
 
 
-const FormItems = {
+const FormItems:Record<string, (form: any, item: TableFormItemType) => any> = {
     input: (form: any, item: TableFormItemType) => {
         let {t:$t} = useI18n()
         return <AInput size="middle" v-model:value={form[item.key]} placeholder={$t(`请输入{label}`,{label:$t(item.label)})}></AInput>
@@ -60,35 +86,6 @@ const FormItems = {
     }
 }
 
-export type TablePropsType = {
-  form?: TableFormItemType[]
-  action?: {
-    search?: boolean
-    reset?: boolean
-    export?: boolean
-    opther: () => any
-  }
-  table: {
-    'v-slots'?:any
-    enableSelection?: boolean
-    columns: TableColumnType[]
-    data: () => any[]
-  },
-  footerOptions?: {
-    show: boolean
-  },
-  'v-slots'?:any
-}
-
-export type AttributeType = {
-    selectItems:any[],
-    selectKeys:any[],
-    page:number,
-    pageSize: number,
-    tableData: any[],
-    metaTableData:any[],
-    form:any
-}
 
 export const FormTableProps = {
     form: {
@@ -108,15 +105,7 @@ export const FormTableProps = {
         export:false,
       })
     },
-    action: {
-      type: Object as () => TablePropsType['action'],
-      default: () => ({
-        search: true,
-        reset: true,
-        export: true,
-        opther: () => null
-      })
-    },
+
     table: {
       type: Object as () => TablePropsType['table'],
       default: () => ({
@@ -151,8 +140,9 @@ export default defineComponent({
         const {t:$t} = useI18n()
 
         //form 初始化
-        const form = ref({})
+        const form = ref<any>({})
         props.form?.forEach((item) => {
+            
             form.value[item.key] = item.value
         })
         props.attribute.form = form.value
@@ -160,7 +150,7 @@ export default defineComponent({
 
         //table初始化
         props.table.columns?.forEach((item) => {
-            item.title = $t(item.title)            
+            item.title = $t(item.title as string)            
         })
 
         let pagination =reactive({
@@ -206,13 +196,12 @@ export default defineComponent({
         return () => (
             <div class="flex flex-col gap-2 h-full  ">
                 {props.form&&<AForm layout="inline gap-2">
-                    {props.form?.map((item) => {
-                    form[item.key] = item.value?? ''
-                    return (
-                        <AFormItem label={$t(item.label)}>
-                            {FormItems[item.is](form.value,item)}
-                        </AFormItem>
-                    )
+                    {props.form?.map((item: TableFormItemType) => {
+                        return (
+                            <AFormItem label={$t(item.label)}>
+                                {FormItems[item.is]?.(form.value,item)}
+                            </AFormItem>
+                        )
                     })}
                     <div class="flex gap-2">
                         {props.formOptions.search && <AButton type="primary" onClick={()=>tableData.load()}>{$t('搜索')}</AButton>}
@@ -225,7 +214,7 @@ export default defineComponent({
                     {slots.content?.(tableData.value) ??
                         <ATable
                             row-selection={props.table.enableSelection?rowSelection:null}
-                            rowKey={props.table.rowKey??((row,key)=>key)}
+                            rowKey={props.table.rowKey??((row)=>row.id)}
                             loading={tableData.loading}
                             // scroll={{x: true}}
                             columns={props.table.columns}
@@ -237,7 +226,7 @@ export default defineComponent({
                                         {title}
                                     </div>
                                 ),
-                                bodyCell:(row)=>{
+                                bodyCell:(row:any)=>{
                                     if(row.column?.customRender!=null){
                                         return row.column.customRender(row)
                                     }

package/app/components/global/selectLanguage.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="flex items-center p-2 ml-2">
+        <a-dropdown >
+            <div class=" cursor-pointer">
+                <GlobalOutlined  class="text-[20px]" />
+            </div>
+            <template #overlay>
+                <a-menu>
+                    <a-menu-item  v-for="locale in locales" @click="setLocale(locale.code)">
+                        {{ locale.name }}
+                    </a-menu-item>
+                </a-menu>
+            </template>
+        </a-dropdown>
+    </div>
+</template>
+
+<script setup lang="ts">
+const { locales, setLocale } = useI18n()
+</script>
+
+<style scoped></style>

package/app/composables/antdv.ts

@@ -0,0 +1,5 @@
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+
+export const useAntLocale = () => useState(() => {
+    return zhCN
+})

package/app/composables/modal.ts

@@ -1,6 +1,8 @@
 import { createVNode, render } from "vue"
 import Form from "../components/global/Form"
-import { AModal } from "#components"
+import { AConfigProvider, AModal } from "#components"
+
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
 
 export const NormalModal = (el) => {
     let control = { close: () => { } }
@@ -12,27 +14,29 @@ export const NormalModal = (el) => {
             control.close = () => {
                 open.value = false
             }
-            return () => h(el, {
-                open: open.value, // 等价于 v-model:open
-                'onUpdate:open': (val: boolean) => {
-                    open.value = val
-                    if (!val) {
-                        setTimeout(() => {
-                            render(null, container) // 卸载组件
-                            if (container.parentNode) {
-                                container.parentNode.removeChild(container) // 移除 DOM
-                            }
-                        }, 1000);
-                    }
-                },
-            })
+            return () => h(AConfigProvider, { locale: useAntLocale().value }, [
+                h(el, {
+                    open: open.value, // 等价于 v-model:open
+                    'onUpdate:open': (val: boolean) => {
+                        open.value = val
+                        if (!val) {
+                            setTimeout(() => {
+                                render(null, container) // 卸载组件
+                                if (container.parentNode) {
+                                    container.parentNode.removeChild(container) // 移除 DOM
+                                }
+                            }, 1000);
+                        }
+                    },
+                })
+            ])
         }
     })
 
     const vnode = h(com)
     vnode.appContext = useNuxtApp().vueApp._context
     render(vnode, container)
-    document.body.appendChild(container)
+    // document.getElementById('aaaa')!.appendChild(container)
 
     return control
 
@@ -55,32 +59,6 @@ export const FormModal = (params: FormModalParamsType) => {
 
     let submit: () => void
 
-    // let control = NormalModal(h(AModal,{
-    //     title: params.title,
-    //     okText: '提交'+loading?.value,
-    //     cancelText: '取消',
-    //     onOk: async ()=>{
-    //         await submit()
-    //         control.close()
-    //     }
-
-    // },h(defineComponent({
-    //     setup(){
-    //         let formRef = ref(null)
-
-    //         onMounted(()=>{
-    //             submit =  formRef.value.submit
-    //             loading = formRef.value.loading
-    //         })
-
-    //         return ()=>h(Form,{
-    //             ref: formRef,
-    //             form: params.form,
-    //             submit:params.submit,
-    //             showSubmit: false
-    //         })
-    //     }
-    // }))))
 
     let control = NormalModal(h(defineComponent({
         setup() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xizs/nuxt-antui",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -9,7 +9,7 @@
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
-    "postinstall": "nuxt prepare .playground"
+    "postinstall": "nuxt prepare"
   },
   "dependencies": {
     "@ant-design-vue/nuxt": "1.4.6",