Explorar o código

feat: 更新数据表单组件,添加自定义类支持,优化属性类型和默认值设置

EvilDragon hai 4 meses
pai
achega
cd9d5c5986

+ 2 - 2
packages/merchant/env/.env.development

@@ -5,6 +5,6 @@ VITE_DELETE_CONSOLE = false
 # 是否开启sourcemap
 VITE_SHOW_SOURCEMAP = true
 
-#VITE_SERVER_BASEURL = 'https://www.zhuchaohui.com'
+VITE_SERVER_BASEURL='https://www.zhuchaohui.com'
 # VITE_SERVER_BASEURL = 'http://39.106.91.179:48080'
- VITE_SERVER_BASEURL = 'http://192.168.2.45:48080'
+# VITE_SERVER_BASEURL = 'http://192.168.2.45:48080'

+ 2 - 0
packages/merchant/src/components/bottom-app-bar.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   placeholder?: boolean
   border?: boolean
   transparent?: boolean
+  customClass?: string
 }>()
 
 const { proxy } = getCurrentInstance() as any
@@ -43,6 +44,7 @@ onMounted(async () => {
           ? 'fixed bottom-0 left-0 right-0 after:content-empty after:w-full after:h-full after:relative '
           : '',
         border ? 'border-t border-t-solid border-[#ececec]' : '',
+        customClass || '',
       ]"
     >
       <div class="px-3.5 py-2.5" :class="[transparent ? '' : 'bg-white']">

+ 10 - 1
packages/merchant/src/components/data-form.ts

@@ -1,3 +1,12 @@
 export interface DataFormProps {
-  labelWidth?: string
+  labelWidth?: number
+  defaultValue?: Date
+}
+export interface DataFormSchema {
+  [key: symbol | string]: {
+    type: 'TextField' | 'Select' | 'Radio' | 'Submit' | 'TimePick' | 'Textarea'
+    label?: string
+    existing?: string
+    props?: DataFormProps
+  }
 }

+ 19 - 25
packages/merchant/src/components/data-form.vue

@@ -3,24 +3,13 @@ import WdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
 import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'
 import WdPicker from 'wot-design-uni/components/wd-picker/wd-picker.vue'
 import { ConfigProviderThemeVars } from 'wot-design-uni'
+import { DataFormProps } from './data-form'
+import { addUnit } from 'wot-design-uni/components/common/util'
 
 const modelValue = defineModel({
   type: Object,
   default: () => ({}),
 })
-// defineProps({
-//   schema: {
-//     type: Object as PropType<{
-//       [key: string | symbol]: { type: 'TextField' | 'Submit' | string; label?: string; props?: any }
-//     }>,
-//     required: true,
-//     default: () => ({}),
-//   },
-//   direction: {
-//     type: String as PropType<'horizontal' | 'vertical'>,
-//     default: 'vertical',
-//   },
-// })
 withDefaults(
   defineProps<{
     schema: {
@@ -28,7 +17,7 @@ withDefaults(
         type: 'TextField' | 'Select' | 'Radio' | 'Submit' | 'timePick' | 'TimePick' | 'textarea'
         label?: string
         existing?: boolean
-        props?: any
+        props?: DataFormProps
       }
     }
     direction?: 'horizontal' | 'vertical'
@@ -78,6 +67,9 @@ const horizontalDefaultProps = {
   Radio: {
     customClass: 'my--4!',
   },
+  TimePick: {
+    customClass: 'm-0!',
+  },
 }
 const themeVars: ConfigProviderThemeVars = {
   cellPadding: '0',
@@ -103,22 +95,24 @@ defineExpose({
         <div
           v-if="existing ?? true"
           class="grid mb-4"
-          :class="[direction === 'horizontal' ? 'items-center' : '']"
+          :class="[direction === 'horizontal' ? 'items-start' : '']"
           :style="
             direction === 'horizontal'
-              ? { 'grid-template-columns': `${props?.labelWidth} auto` }
+              ? { 'grid-template-columns': `${addUnit(props?.labelWidth)} auto` }
               : {}
           "
         >
-          <label
-            v-if="type !== 'Submit'"
-            class="text-sm font-normal leading-relaxed"
-            :class="[direction === 'horizontal' ? 'text-black/60' : 'mb-1 text-black/40']"
-            :for="prop"
-          >
-            <span v-if="props?.required" style="color: #ff2e2e">*</span>
-            {{ label || prop }}
-          </label>
+          <div class="flex items-center h-11">
+            <label
+              v-if="type !== 'Submit'"
+              class="text-sm font-normal leading-relaxed"
+              :class="[direction === 'horizontal' ? 'text-black/60' : 'mb-1 text-black/40']"
+              :for="prop"
+            >
+              <span v-if="props?.required" style="color: #ff2e2e">*</span>
+              {{ label || prop }}
+            </label>
+          </div>
           <wd-input
             v-if="type === 'TextField'"
             v-bind="{

+ 1 - 0
packages/merchant/src/components/page-helper-evo.vue

@@ -55,6 +55,7 @@ watch(
   },
 )
 onReachBottom(async () => {
+  if (nomore.value) return
   console.log('Page Helper Reach Bottom')
 
   if (data.value?.list?.length < pageSize.value) {

+ 9 - 4
packages/merchant/src/pages/home/agent/todo/index.vue

@@ -13,6 +13,7 @@ import { requestToast } from '@designer-hub/app/src/core/utils/common'
 import SectionHeading from '@/components/section-heading.vue'
 import { Todo } from '@designer-hub/app/src/core/libs/models'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
+import { DataFormSchema } from '@/components/data-form'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -32,9 +33,13 @@ const { data, run: setData } = useRequest(
 )
 const addSheetVisible = ref(false)
 const floatPanelHeight = ref()
-const schema = ref({
-  executionTime: { type: 'TimePick', label: '时间', props: { defaultValue: dayjs().toDate() } },
-  content: { type: 'Textarea', label: '备注', props: {} },
+const schema = ref<DataFormSchema>({
+  executionTime: {
+    type: 'TimePick',
+    label: '时间:',
+    props: { defaultValue: dayjs().toDate(), labelWidth: 44 },
+  },
+  content: { type: 'Textarea', label: '备注:', props: { labelWidth: 44 } },
 })
 const formData = ref({})
 const handleAddTodo = () => {
@@ -111,7 +116,7 @@ onMounted(async () => {
         </div>
       </div>
     </wd-floating-panel>
-    <BottomAppBar v-if="!addSheetVisible" fixed placeholder :border="false">
+    <BottomAppBar v-if="!addSheetVisible" fixed placeholder :border="false" custom-class="z-100">
       <div>
         <wd-button :round="false" block @click="handleAddTodo">添加待办</wd-button>
       </div>

+ 1 - 8
packages/merchant/src/pages/home/index.vue

@@ -167,14 +167,7 @@ onShareAppMessage(() => ({}))
           >
             <template #default="{ source }">
               <div class="flex flex-col gap-4">
-                <template
-                  v-for="{ title, date } of [
-                    { title: '苏小萌报名了日本设计游学', date: new Date() },
-                    { title: '苏小萌报名了骑行活动', date: new Date() },
-                    { title: '苏小萌获取imola16000积分', date: new Date() },
-                  ]"
-                  :key="title"
-                >
+                <template v-for="({ title, date }, i) in source.list" :key="i">
                   <Card>
                     <div
                       class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none"

+ 7 - 5
packages/merchant/src/pages/home/merchant/add-reporting-information.vue

@@ -3,8 +3,8 @@
 </route>
 <script setup lang="ts">
 import DataForm from '../../../components/data-form.vue'
-import { createReportInfo, getDesignerList } from '@/core/libs/requests'
-import { useUserStore } from '@/store'
+import { createReportInfo, getDesignerList } from '../../../core/libs/requests'
+import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 
 const userStore = useUserStore()
@@ -29,7 +29,6 @@ const merchantSchema = ref({
             stylistIdName.value = item.name
           }
           console.log(stylistIdName.value)
-
         })
       },
     },
@@ -104,7 +103,7 @@ const SubmitClick = async () => {
   console.log(formData.value)
   formData.value.stylistName = stylistIdName.value
   uni.showLoading()
-  const {code, msg} = await createReportInfo(formData.value)
+  const { code, msg } = await createReportInfo(formData.value)
   uni.hideLoading()
   if (code === 0) {
     uni.showToast({
@@ -118,7 +117,10 @@ const getDesInfo = async () => {
   designerList.value = res.data.list
   console.log(res.data.list)
 
-  merchantSchema.value.stylistId.props.columns = res.data.list.map(item => ({value: item.id, label: item.name}))
+  merchantSchema.value.stylistId.props.columns = res.data.list.map((item) => ({
+    value: item.id,
+    label: item.name,
+  }))
 }
 
 onMounted(async () => {