@xizs/nuxt-antui 0.0.1 → 0.0.3

package/app/components/global/Form.tsx

@@ -1,4 +1,4 @@
-import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea } from "#components"
+import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea, ARadio, ARadioGroup, AButton } from "#components"
 
 export type FormItemType = {
     label:string,
@@ -16,10 +16,14 @@ export type FormPropsType = {
     showSubmit?:boolean
 }
 
-const FormComs  = {
+const FormComs = {
     input:(form:any,item:FormItemType)=>{
         return <AInput v-model:value={form[item.key]}></AInput>
     },
+    button:(form:any,item:FormItemType)=>{
+        console.log(item.bind)
+        return <AButton {...item.bind}>{ item.bind.content}</AButton>
+    },
     textarea:(form:any,item:FormItemType)=>{
         return <ATextarea v-model:value={form[item.key]}></ATextarea>
     },
@@ -41,6 +45,12 @@ const FormComs  = {
     },
     switch:(form:any,item:FormItemType)=>{
         return <ASwitch v-model:checked={form[item.key]} {...item.bind}></ASwitch>
+    },
+    radio: (form: any, item: FormItemType) => {
+        return <ARadioGroup v-model:value={form[item.key]} {...item.bind}></ARadioGroup>
+    },
+    uploadImg: (form: any, item: FormItemType) => { 
+        return <UploadImg v-model:value={form[item.key]} {...item.bind}></UploadImg>
     }
 }
 
@@ -62,13 +72,18 @@ export default defineComponent({
             type:Boolean,
             default:true
         },
+        defaultFormData: {
+            type: Object,
+            default: () => ({})
+        }
     },
     setup(props,{expose}){
 
         let thisRef = ref(null)
-        let formData = ref({}) 
+        let formData = ref(props.defaultFormData) 
         let rules = ref({})
-        props.form.forEach(item=>{
+        ADParse(props.form,formData.value).forEach(item=>{
+            if(item.key==null) return
             if(Array.isArray(item.key)){
                 item.key.forEach(key=>{
                     formData.value[key] = item.value??''
@@ -112,9 +127,16 @@ export default defineComponent({
         return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 6 }} wrapper-col={{ span: 16 }}>
             {/* {JSON.stringify(formData.value)} */}
             {
-                props.form.map(item=>{
-                    return <AFormItem label={item.label} name={item.key}>
-                        {FormComs[item.is](formData.value,item)}
+                ADParse(props.form, formData.value).map(item => {
+                    if (item.label == null) {
+                        return  typeof item.is === 'function'? item.is(formData.value) :
+                        FormComs[item.is](formData.value,item)
+                    }
+                    return <AFormItem label={item.label} key={item.key} name={item.key} {...item.bind} class={{'hidden':item.show===false}}>
+                        {
+                            typeof item.is === 'function'? item.is(formData.value) :
+                            FormComs[item.is](formData.value,item)
+                        }
                     </AFormItem>
                 })
             }

package/app/components/global/FormTable.tsx

@@ -46,10 +46,10 @@ let dateRange = defineComponent({
 
 const FormItems = {
     input:(form:any,item:TableFormItemType)=>{
-        return <AInput size="middle" v-model:value={form[item.key]} placeholder={`please input ${item.label}`}></AInput>
+        return <AInput size="middle" v-model:value={form[item.key]} placeholder={`请输入 ${item.label}`}></AInput>
     },
     select:(form:any,item:TableFormItemType)=>{
-        return <ASelect allowClear class="min-w-[150px]" v-model:value={form[item.key]} options={item.bind.options} placeholder={`please select ${item.label}`}></ASelect>
+        return <ASelect allowClear class="min-w-[150px]" v-model:value={form[item.key]} options={item.bind?.options} placeholder={`please select ${item.label}`}></ASelect>
     },
     dateRange:(form:any,item:TableFormItemType)=>{
         
@@ -58,7 +58,7 @@ const FormItems = {
 }
 
 export type TablePropsType = {
-  form: TableFormItemType[]
+  form?: TableFormItemType[]
   action?: {
     search?: boolean
     reset?: boolean
@@ -70,6 +70,9 @@ export type TablePropsType = {
     enableSelection?: boolean
     columns: TableColumnType[]
     data: () => any[]
+  },
+  footerOptions?: {
+    show: boolean
   }
 }
 
@@ -83,7 +86,7 @@ export type AttributeType = {
 export const FormTableProps = {
     form: {
       type: Array as () => TableFormItemType[],
-      required: true
+      required: false
     },
     formOptions:{
       type:Object as () => {
@@ -116,13 +119,21 @@ export const FormTableProps = {
         rowKey:(row:any)=>any
       })
     },
+    footerOptions: {
+      type: Object as () => {
+        show: boolean,
+      },
+      default: () => ({
+        show: true,
+      })
+    },
     attribute:{
       type:Object as ()=> AttributeType
     },
     control:{
       type:Object,
       required:true
-    }
+    },
   }
 
 export default defineComponent({
@@ -131,9 +142,10 @@ export default defineComponent({
   setup(props) {
 
     const form = ref({})
-    props.form.forEach((item) => {
+    props.form?.forEach((item) => {
       form.value[item.key] = item.value?? ''
     })
+    const metaForm = JSON.parse(JSON.stringify(form.value))
     let pagination =reactive({
       page:1,
       pageSize:20,
@@ -160,6 +172,7 @@ export default defineComponent({
         pagination.pageSize = res.meta.pagination.per_page
         pagination.page = res.meta.pagination.current_page
         console.log(res)
+        props.attribute.tableData = res.list
         return res.list
     },[])
 
@@ -190,7 +203,7 @@ export default defineComponent({
             })}
             <div class="flex gap-2">
                 {props.formOptions.search && <AButton type="primary" onClick={()=>tableData.load()}>搜索</AButton>}
-                {props.formOptions.reset && <AButton>重置</AButton>}
+            {props.formOptions.reset && <AButton onClick={() => patch(metaForm,form.value)}>重置</AButton>}
                 {props.formOptions.export && <AButton type="primary">导出</AButton>}
             </div> 
         </AForm>}
@@ -238,7 +251,7 @@ export default defineComponent({
                 dataSource={tableData.value}
             />
         </div>
-        <div class="mt-3 flex items-center justify-between">
+       {props.footerOptions.show && <div class="mt-3 flex items-center justify-between">
           <div>
             { props.table.enableSelection && (`选中项: ${props.attribute.selectKeys.length}`)}
           </div>
@@ -263,7 +276,7 @@ export default defineComponent({
             <AButton icon={h(RedoOutlined)} loading={tableData.loading} onClick={tableData.load}  />
           </div>
 
-        </div>
+        </div>}
 
       </div>
     )

package/app/components/layout/Base.vue

@@ -30,7 +30,7 @@
                 <div class=" flex items-center">
                     <div >
                         <a-dropdown >
-                            <div class="h-[30px] leading-[30px]">{{ useAdmin().value?.username }}</div>
+                            <div class="h-[30px] leading-[30px]">{{ useAdmin().value?.username ?? 'Admin'}}</div>
                             <template #overlay>
                                 <a-menu>
                                     <a-menu-item @click="()=>singOut()">

package/app/composables/drawer.ts

@@ -1,26 +1,40 @@
 import { createVNode, render } from "vue"
 
-export const Drawer = (el)=>{
+export const Drawer = (el) => {
+    let container = document.createDocumentFragment()
+    let control = { close: () => { } }
 
     let com = defineComponent({
-        setup(){
-            let open=ref(true)
+        setup() {
+            let open = ref(true)
             console.log('aaaaaa')
-            return ()=> h(el,{
+            control.close = () => {
+                open.value = false
+            }
+            return () => h(el, {
                 open: open.value, // 等价于 v-model:open
                 'onUpdate:open': (val: boolean) => {
                     open.value = val
-                    console.log(val,open.value)
-                }, 
+                    console.log(val, open.value)
+                    if (!val) {
+                        setTimeout(() => {
+                            render(null, container) // 卸载组件
+                            if (container.parentNode) {
+                                container.parentNode.removeChild(container) // 移除 DOM
+                            }
+                        }, 1000);
+                    }
+                },
             })
         }
     })
 
 
-    let container = document.createDocumentFragment()
     const vnode = h(com)
     vnode.appContext = useNuxtApp().vueApp._context
-    render(vnode,container)
+    render(vnode, container)
     document.body.appendChild(container)
 
-}
+    return control
+}
+

package/app/composables/form.ts

@@ -1 +1,77 @@
-export const FormItem = {}
+// import type { FormItemType } from "../components/global/Form";
+// import { AForm, AFormItem, AInput, ASelect, AInputNumber, LineOutlined, ASwitch, ATextarea, ARadio } from "#components"
+
+// export const FormComs = {
+//     input: (form: any, item: FormItemType) =>
+//         h(AInput, {
+//             value: form[item.key as string],
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     textarea: (form: any, item: FormItemType) =>
+//         h(ATextarea, {
+//             value: form[item.key as string],
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     inputNumber: (form: any, item: FormItemType) =>
+//         h(AInputNumber, {
+//             ...item.bind,
+//             value: form[item.key as string],
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     inputNumberRange: (form: any, item: FormItemType) =>
+//         h(
+//             'div',
+//             { class: 'flex items-center gap-2' },
+//             [
+//                 h(AInputNumber, {
+//                     class: 'flex-1',
+//                     ...item.bind[0],
+//                     value: form[item.key[0] as string],
+//                     'onUpdate:value': (val: any) => (form[item.key[0] as string] = val)
+//                 }),
+//                 h(LineOutlined),
+//                 h(AInputNumber, {
+//                     class: 'flex-1',
+//                     ...item.bind[1],
+//                     value: form[item.key[1] as string],
+//                     'onUpdate:value': (val: any) => (form[item.key[1] as string] = val)
+//                 })
+//             ]
+//         ),
+
+//     select: (form: any, item: FormItemType) =>
+//         h(ASelect, {
+//             value: form[item.key as string],
+//             options: item.bind.options,
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     countrySelect: (form: any, item: FormItemType) =>
+//         h(ASelect, {
+//             value: form[item.key as string],
+//             options: Const.CountrySelectList(),
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     switch: (form: any, item: FormItemType) =>
+//         h(ASwitch, {
+//             ...item.bind,
+//             checked: form[item.key as string],
+//             'onUpdate:checked': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     radio: (form: any, item: FormItemType) =>
+//         h(ARadio, {
+//             ...item.bind,
+//             checked: form[item.key as string],
+//             'onUpdate:checked': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     // upload: (form: any, item: FormItemType) =>
+//     //   h(UploadImg, {
+//     //     ...item.bind
+//     //   })
+// }

package/app/composables/modal.ts

@@ -2,36 +2,36 @@ import { createVNode, render } from "vue"
 import Form from "../components/global/Form"
 import { AModal } from "#components"
 
-export const NormalModal = (el)=>{
-    let control = {close:()=>{}}
+export const NormalModal = (el) => {
+    let control = { close: () => { } }
     let container = document.createDocumentFragment()
 
     let com = defineComponent({
-        setup(){
-            let open=ref(true)
-            control.close = ()=>{
+        setup() {
+            let open = ref(true)
+            control.close = () => {
                 open.value = false
             }
-            return ()=> h(el,{
+            return () => h(el, {
                 open: open.value, // 等价于 v-model:open
                 'onUpdate:open': (val: boolean) => {
                     open.value = val
-                    if(!val){
+                    if (!val) {
                         setTimeout(() => {
                             render(null, container) // 卸载组件
                             if (container.parentNode) {
-                              container.parentNode.removeChild(container) // 移除 DOM
+                                container.parentNode.removeChild(container) // 移除 DOM
                             }
                         }, 1000);
                     }
-                }, 
+                },
             })
         }
     })
 
     const vnode = h(com)
     vnode.appContext = useNuxtApp().vueApp._context
-    render(vnode,container)
+    render(vnode, container)
     document.body.appendChild(container)
 
     return control
@@ -41,19 +41,19 @@ export const NormalModal = (el)=>{
 // export Modal.Normal = NormalModal
 
 
-type FormModalParamsType= {
-    title:string,
-    form:{
-        label:string,
-        key:string,
-        is:string
+type FormModalParamsType = {
+    title: string,
+    form: {
+        label: string,
+        key: string,
+        is: string
     }[],
-    submit:()=>void
+    submit: () => void
 }
 
-export const FormModal = (params:FormModalParamsType)=>{
+export const FormModal = (params: FormModalParamsType) => {
 
-    let submit:()=>void
+    let submit: () => void
 
     // let control = NormalModal(h(AModal,{
     //     title: params.title,
@@ -72,7 +72,7 @@ export const FormModal = (params:FormModalParamsType)=>{
     //             submit =  formRef.value.submit
     //             loading = formRef.value.loading
     //         })
-            
+
     //         return ()=>h(Form,{
     //             ref: formRef,
     //             form: params.form,
@@ -83,37 +83,39 @@ export const FormModal = (params:FormModalParamsType)=>{
     // }))))
 
     let control = NormalModal(h(defineComponent({
-        setup(){
+        setup() {
             let formRef = ref(null)
-            let loading =ref(false)
-        
-            onMounted(()=>{
-                submit =  async ()=>{
+            let loading = ref(false)
+
+            onMounted(() => {
+                submit = async () => {
                     loading.value = true
-                    try{
+                    try {
                         await formRef.value.submit()
-                    }finally{
+                    } finally {
 
                         loading.value = false
                     }
                 }
                 // loading = formRef.value.loading
             })
-            
-            return ()=>h(AModal,{
+
+            return () => h(AModal, {
                 title: params.title,
+                width: params.width,
                 okText: '提交',
                 cancelText: '取消',
                 confirmLoading: loading.value,
-                onOk: async ()=>{
+                onOk: async () => {
                     await submit()
                     control.close()
                 }
-        
-            },h(Form,{
+
+            }, h(Form, {
                 ref: formRef,
                 form: params.form,
-                submit:params.submit,
+                defaultFormData: params.defaultFormData,
+                submit: params.submit,
                 showSubmit: false
             }))
         }
@@ -123,4 +125,25 @@ export const FormModal = (params:FormModalParamsType)=>{
 export const MModal = {
     Normal: NormalModal,
     Form: FormModal
-}
+}
+
+export const Confirm = {
+    delete: () => {
+        return new Promise((resolve, reject) => {
+            Modal.confirm({
+                title: '确认删除',
+                content: '确认删除该条数据吗？',
+                okText: '确定',
+                cancelText: '取消',
+                onOk: () => {
+                    resolve(true)
+                },
+                onCancel: () => {
+                    reject()
+                }
+            })
+        })
+    }
+}
+
+

package/app/composables/table.ts

@@ -1,63 +1,34 @@
-import { ACard, ADropdown, AMenu, EllipsisOutlined } from "#components";
+import { ABadge, ACard, ADropdown, AMenu, ATag, EllipsisOutlined } from "#components";
 import type { TablePropsType } from "../components/global/FormTable";
-import  FormTableCom from "../components/global/FormTable";
+import FormTableCom from "../components/global/FormTable";
 
 
-export const FormTable = (props:TablePropsType)=>{
+export const FormTable = (props: TablePropsType) => {
 
     const attribute = reactive({
-        selectItems:[],
-        selectKeys:[],
-        page:1,
-        pageSize:10
+        selectItems: [],
+        selectKeys: [],
+        page: 1,
+        pageSize: 10
     })
-    
+
     const control = {
-        refresh:()=>{}
+        refresh: () => { }
     }
 
     return {
-        com:h(FormTableCom,{...props,attribute,control}),
+        com: h(FormTableCom, { ...props, attribute, control }),
         attribute,
         control
     }
 }
 
-export const TablePage = (props:TablePropsType)=>{
-    let TableParams =  FormTable(props)
+export const TablePage = (props: TablePropsType) => {
+    let TableParams = FormTable(props)
 
     return {
         ...TableParams,
-        com: h(ACard,{class:"absolute top-0 left-0 right-0 bottom-0 h-full",bodyStyle:"height:100%"},TableParams.com)
-        
+        com: h(ACard, { class: "absolute top-0 left-0 right-0 bottom-0 h-full", bodyStyle: "height:100%" }, TableParams.com)
+
     }
 }
-
-export const TableCell = {
-    Dropdown:(params:{label:string,icon:string,onClick:()=>void}[])=>{
-        // return h(EllipsisOutlined,{class:"mr-2"},{default:()=>{
-        //     return h()
-        // }})
-
-        return h('div',{style:{'min-width':'50px'}},h(ADropdown,{},{
-            default:()=>{
-                return h(EllipsisOutlined,{class:"mr-2"})
-            },
-            overlay:()=>{
-                return h(AMenu,{items:params.map(item=>{
-                    return {
-                        label:item.label,
-                        icon:()=>item.icon,
-                        onClick:item.onClick
-                    }
-                })})
-            }
-        }))
-    },
-    Tenant:(params:{name:string,id:string})=>{
-        return h('div',{class:"flex flex-col"},[
-            h('span',{class:"mr-2"},params.name),
-            h('span',{class:"mr-2 whitespace-nowrap"},`ID: ${params.id}`)
-        ])
-    },
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xizs/nuxt-antui",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",