af-mobile-client-vue3 1.0.70 → 1.0.71

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

@@ -14,6 +14,7 @@ import { defineEmits, nextTick, reactive, ref, watch } from 'vue'
 import { getConfigByNameWithoutIndexedDB } from '@af-mobile-client-vue3/services/api/common'
 import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
 import XReportFormJsonRender from '@af-mobile-client-vue3/components/data/XReportForm/XReportFormJsonRender.vue'
+import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
 
 // -------------------------  类型定义  -------------------------
 interface configDefine {
@@ -416,6 +417,11 @@ function formatConfigToForm(config: configDefine): void {
           tempObj.text = row[j].text
           tempObj.type = 'curDateInput'
           break
+        case 'signature' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.text = row[j].text
+          tempObj.type = 'signature'
+          break
         case 'inputs' :
           if (!tempObj.format)
             tempObj.format = ''
@@ -824,6 +830,19 @@ function getNow() {
                     </template>
                   </van-field>
                 </van-cell-group>
+                <!--     signature      -->
+                <van-cell-group v-else-if="row.type === 'signature'" inset style="margin-top: 4vh">
+                  <van-field
+                    :label="row.valueText ? `${row.valueText}:` : ''"
+                    readonly
+                    rows="1"
+                    autosize
+                  >
+                    <template #button>
+                      <XSignature v-model="activatedConfig.data[row.dataIndex]" />
+                    </template>
+                  </van-field>
+                </van-cell-group>
                 <!--     inputs      -->
                 <van-cell-group v-else-if="row.type === 'inputs'" inset :title="row.label">
                   <template v-if="row.inputReadOnly === true">

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

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  Button as VanButton,
+  Icon as VanIcon,
+  Popup as VanPopup,
+  Signature as VanSignature,
+  showToast,
+} from 'vant'
+
+interface Props {
+  /** 签名图片的 base64 字符串 */
+  modelValue?: string
+  /** 签名笔画的宽度，默认为 3 */
+  lineWidth?: number
+  /** 签名笔画的颜色，默认为黑色 '#000' */
+  strokeStyle?: string
+  /** 签名画布的背景颜色，默认为白色 '#fff' */
+  backgroundColor?: string
+  /** 未签名时按钮显示的文字，默认为 '签名' */
+  buttonText?: string
+  /** 自定义 CSS 类名 */
+  customClass?: string
+  /** 是否隐藏底部按钮组，默认为 false */
+  hideButtons?: boolean
+  /** 按钮尺寸，可选值为 'small' | 'normal' | 'large'，默认为 'normal' */
+  buttonSize?: 'small' | 'normal' | 'large'
+  /** 确认按钮文字，默认为 '确认' */
+  confirmButtonText?: string
+  /** 清除按钮文字，默认为 '清除' */
+  clearButtonText?: string
+  /** 是否显示签名预览图，默认为 true */
+  showPreview?: boolean
+  /** 签名完成后是否显示重新签名按钮，默认为 false */
+  showButtonAfterSigned?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  lineWidth: 3,
+  strokeStyle: '#000',
+  backgroundColor: '#fff',
+  buttonText: '签名',
+  customClass: '',
+  hideButtons: false,
+  buttonSize: 'normal',
+  confirmButtonText: '确认',
+  clearButtonText: '清除',
+  showPreview: true,
+  showButtonAfterSigned: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'save': [image: string]
+  'clear': []
+}>()
+
+interface SignatureResult {
+  image: string
+}
+
+const showSignature = ref(false)
+
+function onSubmit({ image }: SignatureResult) {
+  if (!image) {
+    showToast('获取签名失败')
+    return
+  }
+  emit('update:modelValue', image)
+  emit('save', image)
+  showSignature.value = false
+}
+
+function onClear() {
+  emit('update:modelValue', '')
+  emit('clear')
+  showSignature.value = false
+}
+
+const signatureRef = ref()
+
+function handleSubmit() {
+  try {
+    signatureRef.value?.submit()
+  }
+  catch (error) {
+    showToast('签名提交失败')
+    console.error('Signature submit error:', error)
+  }
+}
+
+const popupStyle = computed(() => ({
+  width: '100%',
+  height: window.innerHeight > window.innerWidth ? 'auto' : '100%',
+}))
+
+function handleOrientationChange() {
+  if (showSignature.value) {
+    nextTick(() => {
+      signatureRef.value?.resize()
+    })
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('orientationchange', handleOrientationChange)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('orientationchange', handleOrientationChange)
+})
+</script>
+
+<template>
+  <div class="x-signature" role="application" aria-label="签名面板">
+    <div class="signature-content">
+      <div v-if="modelValue && showPreview" class="signature-preview" @click="showSignature = true">
+        <img :src="modelValue" alt="签名预览">
+      </div>
+      <VanButton
+        v-if="!modelValue || showButtonAfterSigned"
+        type="primary"
+        size="small"
+        aria-label="打开签名面板"
+        @click="showSignature = true"
+      >
+        {{ modelValue ? '重新签名' : buttonText }}
+      </VanButton>
+    </div>
+
+    <VanPopup v-model:show="showSignature" class="signature-popup" :style="popupStyle">
+      <div class="signature-wrapper">
+        <VanSignature
+          ref="signatureRef"
+          :line-width="lineWidth"
+          :stroke-style="strokeStyle"
+          :background-color="backgroundColor"
+          @submit="onSubmit"
+          @clear="onClear"
+        />
+        <!-- 自定义浮动按钮，仅在横屏时显示 -->
+        <div class="custom-buttons">
+          <VanButton round size="small" aria-label="清除签名" @click="onClear">
+            <VanIcon name="delete" />
+          </VanButton>
+          <VanButton round type="primary" size="small" @click="handleSubmit">
+            <VanIcon name="success" />
+          </VanButton>
+        </div>
+      </div>
+    </VanPopup>
+  </div>
+</template>
+
+<style scoped lang="less">
+.x-signature {
+  width: 100%;
+
+  .signature-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .signature-preview {
+    flex: 1;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+
+    img {
+      max-width: 100%;
+      max-height: 36px;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .van-button {
+    flex-shrink: 0;
+  }
+
+  :deep(.van-popup) {
+    max-width: none !important;
+    width: 100% !important;
+    top: 20% !important;
+    transform: none !important;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .signature-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    :deep(.van-signature) {
+      width: 100% !important;
+      height: 100% !important;
+      max-width: none !important;
+    }
+
+    // 默认隐藏自定义按钮
+    .custom-buttons {
+      display: none;
+    }
+  }
+
+  // 横屏模式样式
+  @media screen and (orientation: landscape) {
+    :deep(.van-popup) {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .signature-wrapper {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: env(safe-area-inset-top) env(safe-area-inset-right)
+              env(safe-area-inset-bottom) env(safe-area-inset-left);
+
+      :deep(.van-signature) {
+        // 隐藏原有的底部按钮
+        .van-signature__footer {
+          display: none;
+        }
+      }
+
+      :deep(.van-signature__content) {
+        height: 95% !important;
+      }
+
+      // 显示自定义浮动按钮
+      .custom-buttons {
+        position: absolute;
+        right: 32px;
+        bottom: 32px;
+        display: flex;
+        gap: 16px;
+
+        .van-button {
+          width: 48px !important;
+          height: 48px !important;
+          border-radius: 50% !important;
+          padding: 0 !important;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+          transition: transform 0.2s ease;
+
+          &--default {
+            background: #fff;
+          }
+
+          &:active {
+            transform: scale(0.95);
+          }
+        }
+      }
+    }
+  }
+
+  // 优化按钮触摸反馈
+  .custom-buttons {
+    .van-button {
+      transition: transform 0.2s ease;
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+}
+</style>

package/src/router/routes.ts

@@ -10,6 +10,8 @@ import PageLayout from '@af-mobile-client-vue3/layout/PageLayout.vue'
 import login from '@af-mobile-client-vue3/views/user/login/index.vue'
 import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import SingleLayout from '@af-mobile-client-vue3/layout/SingleLayout.vue'
+import XFormGroupView from '@af-mobile-client-vue3/views/component/XFormGroupView/index.vue'
+import XSignatureView from '@af-mobile-client-vue3/views/component/XSignatureView/index.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -46,6 +48,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'XCellDetailView',
         component: XCellDetailView,
       },
+      {
+        path: '/Component/XFormGroupView',
+        name: 'XFormGroupView',
+        component: XFormGroupView,
+      },
       {
         path: '/Component/XReportFormView',
         name: 'XReportFormView',
@@ -61,6 +68,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'EvaluateRecordView',
         component: EvaluateRecordView,
       },
+      {
+        path: '/Component/XSignatureView',
+        name: 'XSignatureView',
+        component: XSignatureView,
+      },
     ],
   },
   {

package/src/utils/authority-utils.ts

@@ -48,7 +48,6 @@ function hasAnyItem(required, source, filter): boolean {
  * @param route 路由
  * @param permissions 用户权限集合
  * @param roles 用户角色集合
- * @returns {boolean}
  */
 function hasAuthority(route, permissions, roles) {
   // TODO 此处判断可能有问题

package/src/utils/runEvalFunction.ts

@@ -0,0 +1,13 @@
+export function executeStrFunction(funcString, args) {
+  // 使用 eval 执行传入的函数字符串
+  // eslint-disable-next-line no-eval
+  return eval(`(${funcString})`)(...args)
+}
+
+export function executeStrFunctionByContext(context, fnStr, args) {
+  // 使用 new Function 创建函数，并绑定 context 作为 this
+  // eslint-disable-next-line no-new-func
+  const fn = new Function(`return (${fnStr});`)()
+  // 使用 bind 绑定 context，并立即调用
+  return fn.bind(context)(...args)
+}

package/src/views/component/XCellListView/index.vue

@@ -1,57 +1,96 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const idKey = ref('o_id')
-const operNameKey = ref('o_f_oper_name')
-const methodKey = ref('o_f_method')
-const requestMethodKey = ref('o_f_request_method')
-const operatorTypeKey = ref('o_f_operator_type')
-const operUrlKey = ref('o_f_oper_url')
-const operIpKey = ref('o_f_oper_ip')
-const costTimeKey = ref('o_f_cost_time')
-const operTimeKey = ref('o_f_oper_time')
-
-const titleKey = ref('o_f_title')
-const businessTypeKey = ref('o_f_business_type')
-const statusKey = ref('o_f_status')
-
-
-// const idKey = ref('t_id')
-
-// const configName = ref('测试crud-移动端')
-const configName = ref('lngPurchaseOrderMobileCRUD')
-const serviceName = ref('af-system')
-function toDetail(item) {
-  console.log('item=====',item)
-  router.push({
-    name:'XFormView',
-    params:{id: item.od_id,openid: 1},
-    query:{formConfigName: configName, formServiceName: serviceName ,mode:'新增'},
-  })
-}
-function event4(result){
-  console.log(result)
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XCellListView" title="工作计划">
-    <template #layout_content>
-      <XCellList
-        :config-name="configName"
-        service-name="af-gaslink"
-        :id-key="idKey"
-        @audit="toDetail"
-        @event4="event4"
-      />
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped lang="less">
-</style>
+<script setup lang="ts">
+import { defineEmits, ref } from 'vue'
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { useRouter } from 'vue-router'
+
+// 定义事件
+const emit = defineEmits(['deleteRow'])
+// 访问路由
+const router = useRouter()
+// 获取默认值
+const idKey = ref('o_id')
+const configName = ref('crud_oper_log_manage')
+const serviceName = ref('af-system')
+
+// 跳转到详情页面
+// function toDetail(item) {
+//   router.push({
+//     name: 'XCellDetailView',
+//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+//     query: {
+//       operName: item[operNameKey.value],
+//       method:item[methodKey.value],
+//       requestMethod:item[requestMethodKey.value],
+//       operatorType:item[operatorTypeKey.value],
+//       operUrl:item[operUrlKey.value],
+//       operIp:item[operIpKey.value],
+//       costTime:item[costTimeKey.value],
+//       operTime:item[operTimeKey.value],
+//
+//       title: item[titleKey.value],
+//       businessType: item[businessTypeKey.value],
+//       status:item[statusKey.value]
+//     }
+//   })
+// }
+
+// 跳转到表单——以表单组来渲染纯表单
+function toDetail(item) {
+  router.push({
+    name: 'XFormGroupView',
+    query: {
+      id: item[idKey.value],
+    },
+  })
+}
+
+// 新增功能
+function addOption(totalCount) {
+  router.push({
+    name: 'XFormView',
+    params: { id: totalCount, openid: totalCount },
+    query: {
+      configName: configName.value,
+      serviceName: serviceName.value,
+      mode: '新增',
+    },
+  })
+}
+
+// 修改功能
+function updateRow(result) {
+  router.push({
+    name: 'XFormView',
+    params: { id: result.o_id, openid: result.o_id },
+    query: {
+      configName: configName.value,
+      serviceName: serviceName.value,
+      mode: '修改',
+    },
+  })
+}
+
+// 删除功能
+function deleteRow(result) {
+  emit('deleteRow', result.o_id)
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XCellListView" title="工作计划">
+    <template #layout_content>
+      <XCellList
+        :config-name="configName"
+        :id-key="idKey"
+        @to-detail="toDetail"
+        @add-option="addOption"
+        @update-row="updateRow"
+        @delete-row="deleteRow"
+      />
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+</style>

package/src/views/component/XFormGroupView/index.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { onBeforeMount, ref } from 'vue'
+import { showDialog } from 'vant'
+
+// 纯表单
+const serviceName = ref('af-linepatrol')
+
+// 表单组
+const configName = ref('lngChargeAuditMobileFormGroup')
+// const serviceName = ref("af-gaslink")
+
+const formData = ref({})
+function submit(_result) {
+  showDialog({ message: '提交成功' }).then(() => {
+    history.back()
+  })
+}
+
+// 表单组——数据
+// function initComponents () {
+//   runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
+//     formData.value = {...res}
+//   })
+// }
+
+// 纯表单——数据
+function initComponents() {
+  formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
+}
+
+onBeforeMount(() => {
+  initComponents()
+})
+</script>
+
+<template>
+  <NormalDataLayout id="XFormGroupView" title="纯表单">
+    <template #layout_content>
+      <XFormGroup
+        :config-name="configName"
+        :service-name="serviceName"
+        :group-form-data="formData"
+        mode="查询"
+        @submit="submit"
+      />
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+
+</style>