@xizs/nuxt-antui 0.0.4 → 0.0.5

package/app/components/global/Form.tsx

@@ -50,9 +50,6 @@ export const FormComs:{
         return <ARadioGroup v-model:value={form[item.key as string]} {...item.bind}></ARadioGroup>
     },
 
-    // uploadImg: (form: any, item: FormItemType) => { 
-    //     return <UploadImg v-model:value={form[item.key as string]} {...item.bind}></UploadImg>
-    // }
 }
 
 export default defineComponent({
@@ -78,7 +75,9 @@ export default defineComponent({
             default: () => ({})
         }
     },
-    setup(props,{expose}){
+    setup(props, { expose }) {
+        
+        const {t:$t} = useI18n()
 
         let thisRef = ref(null)
         let formData = ref(props.defaultFormData) 
@@ -125,7 +124,7 @@ export default defineComponent({
         
 
 
-        return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 6 }} wrapper-col={{ span: 16 }}>
+        return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 8 }} wrapper-col={{ span: 16 }}>
             {/* {JSON.stringify(formData.value)} */}
             {
                 ADParse(props.form, formData.value).map(item => {
@@ -133,7 +132,12 @@ export default defineComponent({
                         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}}>
+                    return <AFormItem
+                        key={item.key} name={item.key} {...item.bind} class={{ 'hidden': item.show === false }}
+                        v-slots={{
+                            label:()=><span class="whitespace-break-spaces">{$t(item.label)}</span>
+                        }}
+                    >
                         {
                             typeof item.is === 'function'? item.is(formData.value) :
                             FormComs[item.is](formData.value,item)

package/app/components/global/FormTable.tsx

@@ -26,11 +26,11 @@ let dateRange = defineComponent({
       
         let value = watchRef(ref([]),(nv,ov)=>{
         if(nv?.length>0){
-            props.form[props.item.key[0]] = nv[0].format('YYYY-MM-DD 00:00:00')
-            props.form[props.item.key[1]] = nv[1].format('YYYY-MM-DD 23:59:59')
+            props.form[props.item.key[0] as string] = nv[0].format('YYYY-MM-DD 00:00:00')
+            props.form[props.item.key[1] as string] = nv[1].format('YYYY-MM-DD 23:59:59')
         }else{
-            props.form[props.item.key[0]] = ''
-            props.form[props.item.key[1]] = ''
+            props.form[props.item.key[0] as string] = ''
+            props.form[props.item.key[1] as string] = ''
         }
         })
         const rangePresets = ref([
@@ -76,7 +76,8 @@ export type TablePropsType = {
   },
   footerOptions?: {
     show: boolean
-  }
+  },
+  'v-slots'?:any
 }
 
 export type AttributeType = {
@@ -85,6 +86,7 @@ export type AttributeType = {
     page:number,
     pageSize: number,
     tableData: any[],
+    form:any
 }
 
 export const FormTableProps = {
@@ -120,7 +122,7 @@ export const FormTableProps = {
         enableSelection: false,
         columns: [],
         data: () => [],
-        rowKey:(row:any)=>any
+        rowKey:(row:any)=>{}
       })
     },
     footerOptions: {
@@ -132,10 +134,11 @@ export const FormTableProps = {
       })
     },
     attribute:{
-      type:Object as ()=> AttributeType
+        type: Object as () => AttributeType,
+        default:()=>{}
     },
     control:{
-      type:Object,
+      type:Object as () => any,
       required:true
     },
   }
@@ -146,6 +149,7 @@ export default defineComponent({
     setup(props,{slots}) {
         const {t:$t} = useI18n()
 
+        //form 初始化
         const form = ref({})
         props.form?.forEach((item) => {
             form.value[item.key] = item.value
@@ -153,6 +157,11 @@ export default defineComponent({
         props.attribute.form = form.value
         const metaForm = JSON.parse(JSON.stringify(form.value))
 
+        //table初始化
+        props.table.columns?.forEach((item) => {
+            item.title = $t(item.title)            
+        })
+
         let pagination =reactive({
             page:1,
             pageSize:20,
@@ -161,7 +170,7 @@ export default defineComponent({
 
 
         const tableData = asyncReactive<any[]>(async ()=>{
-            let res = await props.table.data({...form.value,...pagination})
+            let res:any = await props.table.data({...form.value,...pagination})
             if(Array.isArray(res)){
                 res = {
                     list:res,
@@ -184,7 +193,7 @@ export default defineComponent({
 
         const rowSelection = { 
             selectedRowKeys: props.attribute?.selectKeys, 
-            onChange: (keys,rows)=>{ 
+            onChange: (keys:any,rows:any)=>{ 
                 props.attribute!.selectKeys.splice(0,props.attribute!.selectKeys.length,...keys)
                 props.attribute!.selectItems.splice(0,props.attribute!.selectItems.length,...rows)
             } 
@@ -216,10 +225,10 @@ export default defineComponent({
                             row-selection={props.table.enableSelection?rowSelection:null}
                             rowKey={props.table.rowKey??((row,key)=>key)}
                             loading={tableData.loading}
-                            scroll={{x: true}}
+                            // scroll={{x: true}}
                             columns={props.table.columns}
                             pagination={false}
-                            sticky={tableData.value.length>0}
+                            // sticky={tableData.value.length>0}
                             v-slots={{
                                 headerCell: ({ title,column }: any) => (
                                     <div style={{'white-space': 'nowrap'}}>
@@ -256,7 +265,7 @@ export default defineComponent({
                         pageSizeOptions={['20','50','100']}
                         onShowSizeChange={(current, size) => {
                             pagination.pageSize = size
-                            pagination.page = current
+                            pagination.page = 1
                             tableData.load()
                         }}
                         />

package/app/components/layout/Base.vue

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

package/app/composables/modal.ts

@@ -84,6 +84,7 @@ export const FormModal = (params: FormModalParamsType) => {
 
     let control = NormalModal(h(defineComponent({
         setup() {
+            const { t: $t } = useI18n()
             let formRef = ref(null)
             let loading = ref(false)
 
@@ -101,16 +102,15 @@ export const FormModal = (params: FormModalParamsType) => {
             })
 
             return () => h(AModal, {
-                title: params.title,
+                title: $t(params.title),
                 width: params.width,
-                okText: '提交',
-                cancelText: '取消',
+                okText: $t('提交'),
+                cancelText: $t('取消'),
                 confirmLoading: loading.value,
                 onOk: async () => {
                     await submit()
                     control.close()
                 }
-
             }, h(Form, {
                 ref: formRef,
                 form: params.form,
@@ -129,13 +129,13 @@ export const MModal = {
 
 export const Confirm = {
     delete: () => {
-        const { t: $t } = useI18n()
+        // const { t: $t } = useI18n()
         return new Promise((resolve, reject) => {
             Modal.confirm({
-                title: $t('确认删除'),
-                content: $t('确认删除该条数据吗？'),
-                okText: $t('确定'),
-                cancelText: $t('取消'),
+                title: ('确认删除'),
+                content: ('确认删除该条数据吗？'),
+                okText: ('确定'),
+                cancelText: ('取消'),
                 onOk: () => {
                     resolve(true)
                 },

package/app/composables/table.ts

@@ -9,7 +9,9 @@ export const FormTable = (props: TablePropsType) => {
         selectItems: [],
         selectKeys: [],
         page: 1,
-        pageSize: 10
+        pageSize: 10,
+        tableData: [],
+        form: {}
     })
 
     const control = {
@@ -28,7 +30,7 @@ export const TablePage = (props: TablePropsType) => {
 
     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)
 
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xizs/nuxt-antui",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -15,7 +15,7 @@
     "@ant-design-vue/nuxt": "1.4.6",
     "@nuxtjs/i18n": "9.5.4",
     "@tailwindcss/vite": "^4.1.3",
-    "@xizs/nuxt-base": "^0.0.4",
+    "@xizs/nuxt-base": "0.0.4",
     "ant-design-vue": ">=4",
     "nuxt": "^3.16.2",
     "tailwindcss": "^4.0.14",