af-mobile-client-vue3 1.0.89 → 1.0.91

package/src/components/data/XCellList/index.vue

@@ -4,6 +4,7 @@ import {
   BackTop as VanBackTop,
   Button as VanButton,
   Col as VanCol,
+  Icon as VanIcon,
   List as VanList,
   Popover as VanPopover,
   PullRefresh as VanPullRefresh,
@@ -54,6 +55,9 @@ const detailColumns = ref([])
 // 标签列
 const tagList = ref([])
 
+// 标题按钮列
+const btnList = ref([])
+
 // 底部列
 const footColumns = ref([])
 
@@ -144,6 +148,9 @@ function initComponent() {
           allActions.value.push({ text: item.actionArr[j].text, func: item.actionArr[j].func })
       }
 
+      if (item.showTitleBtn)
+        btnList.value.push(item)
+
       if (result.showSortIcon && item.sortable) {
         orderList.value.push({
           title: item.title,
@@ -307,14 +314,9 @@ function addOption() {
 }
 
 // 处理拨打电话
-// function handleCall(item: any) {
-//   emit('handleCall', item)
-// }
-
-// 处理查看位置
-// function handleLocation(item: any) {
-//   emit('handleLocation', item)
-// }
+function handleCall(item: any) {
+  emit('handleCall', item)
+}
 </script>
 
 <template>
@@ -380,20 +382,14 @@ function addOption() {
                         />
                       </p>
                     </div>
-                    <!-- <div class="action-buttons">
+                    <div class="action-buttons">
                       <VanButton
                         class="action-button"
                         icon="phone"
                         size="small"
                         @click.stop="handleCall(item)"
                       />
-                      <VanButton
-                        class="action-button"
-                        icon="location"
-                        size="small"
-                        @click.stop="handleLocation(item)"
-                      />
-                    </div> -->
+                    </div>
                   </div>
                 </VanCol>
               </VanRow>
@@ -425,11 +421,15 @@ function addOption() {
                           size="medium"
                           class="tag-item"
                         >
-                          {{ column.title }}：<XBadge
-                          :dict-name="column.dictName"
-                          :dict-value="item[column.dataIndex]"
-                          :service-name="serviceName"
-                        />
+                          <div class="tag-content">
+                            <VanIcon v-if="column.tagIcon" :name="column.tagIcon" class="tag-icon" />
+                            <span class="tag-title">{{ column.title }}：</span>
+                            <XBadge
+                              :dict-name="column.dictName"
+                              :dict-value="item[column.dataIndex]"
+                              :service-name="serviceName"
+                            />
+                          </div>
                         </VanTag>
                       </VanCol>
                     </div>
@@ -609,6 +609,20 @@ function addOption() {
               display: inline-flex;
               align-items: center;
             }
+            .tag-content {
+              display: flex;
+              align-items: center;
+              white-space: nowrap;
+            }
+            .tag-icon {
+              margin-right: 4px;
+              font-size: 14px;
+              display: inline-flex;
+              align-items: center;
+            }
+            .tag-title {
+              font-weight: normal;
+            }
           }
         }
       }

package/src/components/data/XForm/index.vue

@@ -1,153 +1,153 @@
-<script setup lang="ts">
-import {
-  Button as VanButton,
-  CellGroup as VanCellGroup,
-  Form as VanForm,
-} from 'vant'
-import type { FormInstance } from 'vant'
-import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref, watch } from 'vue'
-import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
-
-interface FormItem {
-  addOrEdit: string
-  isOnlyAddOrEdit?: boolean
-  type?: string
-  model?: string
-}
-
-interface GroupFormItems {
-  btnName?: string
-  formJson: any[] // 根据实际类型调整
-}
-const props = withDefaults(defineProps<{
-  groupFormItems?: GroupFormItems
-  serviceName?: string
-  formData?: object
-  formName?: string
-  mode?: string
-  submitButton?: boolean
-}>(), {
-  groupFormItems: null,
-  serviceName: undefined,
-  formData: null,
-  formName: 'default',
-  mode: '查询',
-  submitButton: true,
-})
-const emits = defineEmits(['onSubmit'])
-const formRef = ref<FormInstance>()
-const myFormItems = ref<FormItem[]>([])
-const rules = reactive({})
-const form = ref({})
-const formGroupName = ref(null)
-const myServiceName = ref('')
-const loaded = ref(false)
-let myGetDataParams = reactive({})
-const realJsonData = computed(() => {
-  return myFormItems.value.filter((item) => {
-    return item.addOrEdit !== 'no'
-  })
-})
-onBeforeMount(() => {
-  init({ formItems: props.groupFormItems, serviceName: props.serviceName, formData: props.formData, formName: props.formName })
-})
-function init(params) {
-  const {
-    formItems,
-    serviceName,
-    getDataParams = {},
-    formData = null,
-    formName = 'default',
-  } = params
-  loaded.value = false
-  myFormItems.value = JSON.parse(JSON.stringify(formItems.formJson)) as FormItem[]
-  myServiceName.value = serviceName
-  formGroupName.value = formName
-  for (let i = 0; i < realJsonData.value.length; i++) {
-    const item = realJsonData.value[i]
-    setFormProps(form, item)
-  }
-  if (formData)
-    form.value = formData
-
-  myGetDataParams = getDataParams
-  loaded.value = true
-}
-
-function setFormProps(form, item) {
-  form.value[item.model] = undefined
-  if (item.rule) {
-    rules[item.model] = []
-    let defaultValue
-    let message
-    switch (item.rule.type) {
-      case 'number':
-        message = '数字'
-        defaultValue = 0
-        break
-      case 'integer':
-        message = '整数'
-        defaultValue = 0
-        break
-      case 'float':
-        message = '小数'
-        defaultValue = 0.0
-        break
-      case 'string':
-        message = '字符串'
-        defaultValue = ''
-        break
-    }
-    rules[item.model].push({
-      type: item.rule.type,
-      message: `${item.name}必须为${message}`,
-      transform: (value) => {
-        if (value && value.length !== 0)
-          return Number(value)
-        else
-          return defaultValue
-      },
-      trigger: 'blur',
-    })
-  }
-}
-
-function onSubmit() {
-  emits('onSubmit', form.value)
-}
-async function validate() {
-  await formRef.value?.validate()
-}
-watch(() => props.formData, (_val) => {
-  form.value = props.formData
-})
-defineExpose({ init, form, formGroupName, validate })
-</script>
-
-<template>
-  <VanForm ref="formRef" @submit="onSubmit">
-    <VanCellGroup inset>
-      <XFormItem
-        v-for="(item, index) in realJsonData"
-        :key="index"
-        v-model="form[item.model]"
-        :mode="props.mode"
-        :form="form"
-        :attr="item"
-        :rules="rules"
-        :service-name="myServiceName"
-        :get-data-params="myGetDataParams"
-      />
-    </VanCellGroup>
-    <div v-if="props.submitButton" style="margin: 16px;">
-      <VanButton round block type="primary" native-type="submit">
-        {{ props.groupFormItems?.btnName ? props.groupFormItems.btnName : '提交' }}
-      </VanButton>
-      <slot />
-    </div>
-  </VanForm>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import {
+  Button as VanButton,
+  CellGroup as VanCellGroup,
+  Form as VanForm,
+} from 'vant'
+import type { FormInstance } from 'vant'
+import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref, watch } from 'vue'
+import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
+
+interface FormItem {
+  addOrEdit: string
+  isOnlyAddOrEdit?: boolean
+  type?: string
+  model?: string
+}
+
+interface GroupFormItems {
+  btnName?: string
+  formJson: any[] // 根据实际类型调整
+}
+const props = withDefaults(defineProps<{
+  groupFormItems?: GroupFormItems
+  serviceName?: string
+  formData?: object
+  formName?: string
+  mode?: string
+  submitButton?: boolean
+}>(), {
+  groupFormItems: null,
+  serviceName: undefined,
+  formData: null,
+  formName: 'default',
+  mode: '查询',
+  submitButton: true,
+})
+const emits = defineEmits(['onSubmit'])
+const formRef = ref<FormInstance>()
+const myFormItems = ref<FormItem[]>([])
+const rules = reactive({})
+const form = ref({})
+const formGroupName = ref(null)
+const myServiceName = ref('')
+const loaded = ref(false)
+let myGetDataParams = reactive({})
+const realJsonData = computed(() => {
+  return myFormItems.value.filter((item) => {
+    return item.addOrEdit !== 'no'
+  })
+})
+onBeforeMount(() => {
+  init({ formItems: props.groupFormItems, serviceName: props.serviceName, formData: props.formData, formName: props.formName })
+})
+function init(params) {
+  const {
+    formItems,
+    serviceName,
+    getDataParams = {},
+    formData = null,
+    formName = 'default',
+  } = params
+  loaded.value = false
+  myFormItems.value = JSON.parse(JSON.stringify(formItems.formJson)) as FormItem[]
+  myServiceName.value = serviceName
+  formGroupName.value = formName
+  for (let i = 0; i < realJsonData.value.length; i++) {
+    const item = realJsonData.value[i]
+    setFormProps(form, item)
+  }
+  if (formData)
+    form.value = formData
+
+  myGetDataParams = getDataParams
+  loaded.value = true
+}
+
+function setFormProps(form, item) {
+  form.value[item.model] = undefined
+  if (item.rule) {
+    rules[item.model] = []
+    let defaultValue
+    let message
+    switch (item.rule.type) {
+      case 'number':
+        message = '数字'
+        defaultValue = 0
+        break
+      case 'integer':
+        message = '整数'
+        defaultValue = 0
+        break
+      case 'float':
+        message = '小数'
+        defaultValue = 0.0
+        break
+      case 'string':
+        message = '字符串'
+        defaultValue = ''
+        break
+    }
+    rules[item.model].push({
+      type: item.rule.type,
+      message: `${item.name}必须为${message}`,
+      transform: (value) => {
+        if (value && value.length !== 0)
+          return Number(value)
+        else
+          return defaultValue
+      },
+      trigger: 'blur',
+    })
+  }
+}
+
+function onSubmit() {
+  emits('onSubmit', form.value)
+}
+async function validate() {
+  await formRef.value?.validate()
+}
+watch(() => props.formData, (_val) => {
+  form.value = props.formData
+})
+defineExpose({ init, form, formGroupName, validate })
+</script>
+
+<template>
+  <VanForm ref="formRef" @submit="onSubmit">
+    <VanCellGroup inset>
+      <XFormItem
+        v-for="(item, index) in realJsonData"
+        :key="index"
+        v-model="form[item.model]"
+        :mode="props.mode"
+        :form="form"
+        :attr="item"
+        :rules="rules"
+        :service-name="myServiceName"
+        :get-data-params="myGetDataParams"
+      />
+    </VanCellGroup>
+    <div v-if="props.submitButton && props.mode !== '预览'" style="margin: 16px;">
+      <VanButton round block type="primary" native-type="submit">
+        {{ props.groupFormItems?.btnName ? props.groupFormItems.btnName : '提交' }}
+      </VanButton>
+      <slot />
+    </div>
+  </VanForm>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/data/XFormItem/index.vue

@@ -361,9 +361,13 @@ onBeforeMount(() => {
 const labelData = computed(() => {
   return props.showLabel ? attr.name : null
 })
+// 是否展示表单左侧label文字
+const labelAlign = computed(() => {
+  return attr.labelAlign ? attr.labelAlign : 'top'
+})
 // 是否只读
 const readonly = computed(() => {
-  return attr.addOrEdit === 'readonly'
+  return attr.addOrEdit === 'readonly' || mode === '预览'
 })
 // 提示内容
 const placeholder = computed(() => {
@@ -592,6 +596,8 @@ function onPickerCancel() {
       v-if="attr.type === 'switch' && showItem"
       name="switch"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'right'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
@@ -617,6 +623,8 @@ function onPickerCancel() {
         v-if="attr.showMode === 'checkbox' && mode !== '查询'"
         name="checkboxGroup"
         :label="labelData"
+        :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
         :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
       >
         <template #input>
@@ -631,6 +639,8 @@ function onPickerCancel() {
         v-if="attr.showMode === 'checkbox' && mode === '查询'"
         name="checkboxGroup"
         :label="labelData"
+        :label-align="labelAlign"
+        :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
         :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
       >
         <template #input>
@@ -661,6 +671,8 @@ function onPickerCancel() {
       name="radio"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
@@ -678,6 +690,8 @@ function onPickerCancel() {
       name="radio"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
@@ -694,11 +708,12 @@ function onPickerCancel() {
       v-if="attr.type === 'stepper' && showItem"
       name="stepper"
       :label="labelData"
-      :readonly="readonly"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
-        <VanStepper v-model="(localValue as string)" />
+        <VanStepper :disabled="readonly" v-model="(localValue as string)" />
       </template>
     </VanField>
 
@@ -707,11 +722,12 @@ function onPickerCancel() {
       v-if="attr.type === 'rate' && showItem"
       name="rate"
       :label="labelData"
-      :readonly="readonly"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
-        <VanRate v-model="(localValue as number)" />
+        <VanRate :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" v-model="(localValue as number)" />
       </template>
     </VanField>
 
@@ -720,11 +736,12 @@ function onPickerCancel() {
       v-if="attr.type === 'slider' && showItem"
       name="slider"
       :label="labelData"
-      :readonly="readonly"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
-        <VanSlider v-model="(localValue as number)" />
+        <VanSlider :readonly="readonly" v-model="(localValue as number)" />
       </template>
     </VanField>
 
@@ -733,6 +750,8 @@ function onPickerCancel() {
       v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
       name="uploader"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
@@ -753,10 +772,12 @@ function onPickerCancel() {
       name="picker"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :label="labelData"
-      :readonly="readonly"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
       is-link
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="showPicker = true"
+      @click="readonly ? null : showPicker = true"
     />
     <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
       <VanPicker
@@ -780,6 +801,8 @@ function onPickerCancel() {
       readonly
       name="rangePicker"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="calendarShow = true"
@@ -800,6 +823,8 @@ function onPickerCancel() {
       v-model="(localValue as string | number)"
       name="datePicker"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       readonly
       :is-link="true"
       :placeholder="placeholder"
@@ -835,6 +860,8 @@ function onPickerCancel() {
       v-model="(localValue as string | number)"
       name="datePicker"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       readonly
       :is-link="true"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
@@ -875,6 +902,8 @@ function onPickerCancel() {
       readonly
       :placeholder="attr.placeholder"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="showTimePicker = true"
     />
@@ -885,7 +914,7 @@ function onPickerCancel() {
         :columns-type="attr.columnsType ? attr.columnsType : ['hour', 'minute', 'second']"
         :min-time="attr.minTime ? attr.minTime : '00:00:00'"
         :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-        :readonly="attr.readonly ? attr.readonly : false"
+        :readonly="readonly"
         @cancel="showTimePicker = false"
         @confirm="onTimePickerConfirm"
       />
@@ -900,6 +929,8 @@ function onPickerCancel() {
       is-link
       readonly
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="readonly ? null : showArea = true"
     />
@@ -931,9 +962,11 @@ function onPickerCancel() {
       rows="3"
       autosize
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       type="textarea"
       :readonly="readonly"
-      :maxlength="attr.maxlength"
+      :maxlength="attr.maxlength ? attr.maxlength : 200"
       :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
       show-word-limit
       label-align="top"
@@ -945,6 +978,8 @@ function onPickerCancel() {
       v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
       v-model="(localValue as string)"
       :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :type="attr.type"
       :readonly="readonly"
       :disabled="attr.disabled"