af-mobile-client-vue3 1.0.70 → 1.0.71

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

@@ -1,55 +1,170 @@
-<script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-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 { runLogic } from '@af-mobile-client-vue3/services/api/common'
-import {useRoute, useRouter} from 'vue-router'
-import { formatDate } from '@af-mobile-client-vue3/hooks/useCommon'
-import {showSuccessToast} from "vant";
-
-const route = useRoute()
-const router = useRouter()
-const formData = ref({})
-function initComponents () {
-  console.log('router.params=', route.params)
-  runLogic('getLngPurchaseOrderAuditGroupData', {id: route.params?.id}, 'af-gaslink').then((res) => {
-    console.log('调用logic完成==',res)
-    formData.value = {...res}
-    console.log('赋值完成===', formData.value)
-  })
-}
-onBeforeMount(()=>{
-  initComponents()
-})
-const submit = (formData) => {
-  console.log('提交表单===', formData)
-  const param = {
-    type: formData.value.auditInfo.f_approval_status === '审核未通过' ? 0 : 1,
-    model: {
-      approval_date: formatDate(new Date()),
-      approval_remark:formData.value.auditInfo.f_approval_status,
-      approval_operator:useUserStore.getUserInfo?.name,
-      approval_operatorid: useUserStore.getUserInfo?.id
-    },
-    record: {od_id:1}
-  }
-  console.log('param===', param)
-  runLogic('lngPurchaseOrderAuditSubmit', param, 'af-gaslink').then((res) => {
-    console.log('res===', res)
-    showSuccessToast('审核成功！')
-    router.go(-1)
-  })
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XCellListView" title="采购审核">
-    <template #layout_content>
-      <XFormGroup :config-name="'lngPurchaseOrderFormGroup'" @submit="submit" :group-form-data="formData" service-name="af-gaslink"/>
-    </template>
-  </NormalDataLayout>
-</template>
-<style scoped lang="less">
-
-</style>
+<script setup lang="ts">
+import {
+  NavBar as VanNavBar,
+  Space as VanSpace,
+  showDialog,
+} from 'vant'
+import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import { useRoute } from 'vue-router'
+import { defineEmits, getCurrentInstance, onBeforeMount, ref } from 'vue'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { post } from '@af-mobile-client-vue3/services/restTools'
+
+const emit = defineEmits(['onSumbit'])
+const xForm = ref(null)
+const loading = ref(true)
+const id = ref(-1)
+const openid = ref('')
+const instance = getCurrentInstance()
+const xFormInit = ref(false)
+const route = useRoute()
+const configName = route.query.configName as string
+const serviceName = route.query.serviceName as string
+const mode = route.query.mode as string
+const updateData = ref({})
+const title = ref('')
+const groupFormItems = ref({})
+const api = ref('/af-system/logic/commonQuery')
+const updateId = {
+  queryParamsName: 'crud_oper_log_manage',
+  pageNo: 1,
+  pageSize: 20,
+  conditionParams: { o_id: route.params.id as string },
+}
+const loadUpdate = ref(false)
+// const serviceName = ref('af-revenue')
+const _currentEvaluate = {
+  id: null,
+  f_business_name: '',
+  f_evaluate_state: '',
+}
+
+// 组件挂载前获取数据
+onBeforeMount(() => {
+  if (mode === '修改')
+    getUpdateData()
+
+  if (instance) {
+    id.value = route.params.id as unknown as number
+    openid.value = route.params.openid as string
+    formInit()
+  }
+})
+
+// 组件初始化前的判断
+async function formInit() {
+  if (id.value > 0) {
+    // 先获取 myForm
+    queryData()
+  }
+  else {
+    // 没有id 直接提示用户不存在，返回上一级
+    await showDialog({ message: '评价信息缺少参数，找不到对应评价信息' })
+    history.back()
+  }
+}
+
+// 获取配置信息
+function queryData() {
+  getConfigByName(configName, (result) => {
+    groupFormItems.value = result
+    title.value = result.title
+    if (xForm.value) {
+      xForm.value.init({
+        formItems: result,
+        serviceName,
+        getDataParams: {},
+        formData: updateData.value ? updateData.value : null,
+      })
+      loading.value = false
+    }
+    xFormInit.value = true
+  }, serviceName)
+}
+
+// 提交操作
+function onSubmit(params) {
+  // const data = {
+  //   id: currentEvaluate.id,
+  //   f_json: params,
+  //   f_evaluate_date: formatDate(new Date()),
+  //   f_evaluate_state: '已评价',
+  //   f_evaluate_type: '用户评价',
+  //   f_evaluate_userid: openid.value,
+  // }
+  // openApiLogic(data, 'saveEvaluate', formServiveName).then((_res: any) => {
+  //     showDialog({ message: '评价成功了' }).then(() => {history.back()})
+  // }).catch(() => {
+  //   showDialog({ message: '评价失败了' })
+  // })
+  if (params) {
+    emit('onSumbit', params)
+    showDialog({ message: '评价成功了' }).then(() => {
+      history.back()
+    })
+  }
+  else {
+    showDialog({ message: '评价失败了' }).then(() => {
+      history.back()
+    })
+  }
+}
+
+// 查询需要修改的数据
+function getUpdateData() {
+  if (api.value && updateId) {
+    post(api.value, updateId).then((res) => {
+      loadUpdate.value = true
+      updateData.value = res.data[0]
+    }, (_) => {
+    }).finally(() => {
+      loadUpdate.value = false
+    })
+  }
+}
+
+function _onClickLeft(): void {
+  history.back()
+}
+</script>
+
+<template>
+  <!--  <VanNavBar -->
+  <!--    title="XForm表单" -->
+  <!--    left-text="返回" -->
+  <!--    left-arrow -->
+  <!--    @click-left="onClickLeft" -->
+  <!--  /> -->
+  <NormalDataLayout id="XFormView" title="XForm表单">
+    <template #layout_content>
+      <!--      <VanRow v-show="loading" justify="center"> -->
+      <!--        <VanLoading type="spinner" color="#1989fa" /> -->
+      <!--      </VanRow> -->
+      <VanSpace direction="vertical" fill>
+        <VanNavBar :title="title ? mode.concat(title) : null" />
+        <XForm
+          v-if="xFormInit"
+          ref="xForm"
+          :group-form-items="JSON.parse(JSON.stringify(groupFormItems))"
+          :service-name="serviceName"
+          :form-data="updateData ? updateData : null"
+          :mode="mode"
+          style="margin-bottom: 14px;"
+          @on-submit="onSubmit"
+        />
+      </VanSpace>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped>
+.van-doc-demo-block__title {
+  margin: 0;
+  padding: 32px 16px 16px;
+  color: black;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+}
+</style>

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

@@ -2,293 +2,11 @@
 import { ref } from 'vue'
 import XReportForm from '@af-mobile-client-vue3/components/data/XReportForm/index.vue'
 
-// test_table_config_forEditor
-// test_tableConfig
-// test_table_config_json
-const configName = ref('report_yangchun_gasEqiupmentWidePic')
-// const slotName = ref('test_tableConfig_slot')
-
-const temp_config = {
-  slotsDefine: {},
-  subTitle: [],
-  slotsDeclare: [],
-  data: {
-    images: {
-      serviceall: {
-        imgs: [],
-      },
-    },
-  },
-  columns: [
-    [
-      {
-        rowSpan: 1,
-        colSpan: 12,
-        text: '燃气设施全景',
-        originalRowIndex: 0,
-        type: 'column',
-        originalCellIndex: 0,
-      },
-    ],
-    [
-      {
-        rowSpan: 1,
-        colSpan: 12,
-        dataIndex: 'serviceall@@@imgs',
-        originalRowIndex: 1,
-        type: 'images',
-        originalCellIndex: 0,
-      },
-    ],
-  ],
-  width: 'auto',
-  style: {},
-  title: '',
-  table: [
-    [
-      {
-        rowSpan: 1,
-        def: {
-          text: '燃气设施全景',
-          type: 'column',
-        },
-        colSpan: 12,
-        originalRowIndex: 0,
-        originalCellIndex: 0,
-      },
-    ],
-    [
-      {
-        rowSpan: 1,
-        def: {
-          dataIndex: 'serviceall@@@imgs',
-          type: 'images',
-        },
-        colSpan: 12,
-        originalRowIndex: 1,
-        originalCellIndex: 0,
-      },
-    ],
-  ],
-  designMode: 'VisualTable',
-}
-// const test_json_data = { usermeter: { f_collection_type: '按金额', f_total_gas: '总气量', f_total_fee: '总金额' } }
-//
-// const report_yangchun_serviceRepair = {
-//   title: {
-//     type: 'titleKey',
-//     value: 'f_type',
-//   },
-//   content: [
-//     {
-//       customFunctionForLabel: 'function (config) {\n\treturn { type: \'key\', content: \'f_project\' }\n}',
-//       customFunctionForValue: 'function (config, item) {\n  if (!item.f_content || item.f_content === null) {\n    return { type: \'value\', content: \'无\' }\n  }else {\n    return { type: \'key\', content: \'f_content\'}\n  }\n}',
-//       jsonArrayDataIndex: 'details',
-//       type: 'jsonArray',
-//     },
-//   ],
-//   designMode: 'json',
-//   testJsonData: {
-//     imgs: [],
-//     details: [
-//       {
-//         f_project: '旧表表号',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224392,
-//         type: 'string',
-//       },
-//       {
-//         f_project: '新表表号',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224393,
-//         type: 'string',
-//       },
-//       {
-//         f_project: '引入方式',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224394,
-//         type: 'selector',
-//       },
-//       {
-//         f_project: '是否高空作业',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224395,
-//         type: 'selector',
-//       },
-//       {
-//         f_project: '处理结果',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224396,
-//         type: 'selector',
-//       },
-//       {
-//         f_project: '位置',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224397,
-//         type: 'selector',
-//       },
-//       {
-//         f_project: '补装管卡',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224398,
-//         type: 'selector',
-//       },
-//       {
-//         f_project: '备注',
-//         f_service_id: 35917,
-//         f_is_must: 'false',
-//         id: 224399,
-//         type: 'string',
-//       },
-//     ],
-//     id: 35917,
-//     f_type: '改管维修',
-//   },
-// }
-// const report_yangchun_serviceRepair_data = {
-//   usermeter: {
-//     f_collection_type: '按金额',
-//     f_total_gas: '总气量',
-//     f_total_fee: '总金额',
-//   },
-// }
-//
-// const deepKeyConfig = {
-//   slotsDefine: {},
-//   subTitle: [],
-//   slotsDeclare: [],
-//   data: {
-//     'images': {},
-//     'a1a2@@@a3': '',
-//   },
-//   columns: [
-//     [
-//       {
-//         rowSpan: 1,
-//         colSpan: 3,
-//         text: 'deepKey测试',
-//         originalRowIndex: 0,
-//         type: 'column',
-//         originalCellIndex: 0,
-//       },
-//       {
-//         rowSpan: 1,
-//         dataIndexType: 'String',
-//         colSpan: 3,
-//         dataIndex: 'a1@@@a2@@@a3',
-//         originalRowIndex: 0,
-//         type: 'input',
-//         originalCellIndex: 3,
-//       },
-//       {
-//         rowSpan: 1,
-//         colSpan: 3,
-//         text: '动态表头测试',
-//         originalRowIndex: 0,
-//         type: 'column',
-//         originalCellIndex: 6,
-//       },
-//       {
-//         rowSpan: 1,
-//         customFunction: 'function (val, config) {\n  if (config.data.f_label === \'123\') {\n    return \'A\'\n  } else {\n    return \'B\'\n  }\n}',
-//         colSpan: 3,
-//         text: '1',
-//         originalRowIndex: 0,
-//         type: 'column',
-//         originalCellIndex: 9,
-//       },
-//     ],
-//   ],
-//   width: 'auto',
-//   style: {},
-//   title: '测试deepKey',
-//   designMode: 'VisualTable',
-// }
-// const deepKeyConfigData = {
-//   a1: {
-//     a2: {
-//       a3: '我是a3',
-//     },
-//   },
-//   f_label: '123',
-// }
-//
-// const yangchun_ticket = {
-//   slotsDefine: {},
-//   subTitle: [],
-//   slotsDeclare: [],
-//   data: {
-//     images: {
-//       'serviceall@@@imgs': [],
-//     },
-//   },
-//   columns: [
-//     [
-//       {
-//         rowSpan: 1,
-//         colSpan: 12,
-//         text: '燃气设施全景',
-//         originalRowIndex: 0,
-//         type: 'column',
-//         originalCellIndex: 0,
-//       },
-//     ],
-//     [
-//       {
-//         rowSpan: 1,
-//         colSpan: 12,
-//         dataIndex: 'serviceall@@@imgs',
-//         originalRowIndex: 1,
-//         type: 'images',
-//         originalCellIndex: 0,
-//       },
-//     ],
-//   ],
-//   width: 'auto',
-//   style: {},
-//   title: '',
-//   table: [
-//     [
-//       {
-//         rowSpan: 1,
-//         def: {
-//           text: '燃气设施全景',
-//           type: 'column',
-//         },
-//         colSpan: 12,
-//         originalRowIndex: 0,
-//         originalCellIndex: 0,
-//       },
-//     ],
-//     [
-//       {
-//         rowSpan: 1,
-//         def: {
-//           dataIndex: 'serviceall@@@imgs',
-//           type: 'images',
-//         },
-//         colSpan: 12,
-//         originalRowIndex: 1,
-//         originalCellIndex: 0,
-//       },
-//     ],
-//   ],
-//   designMode: 'VisualTable',
-// }
+const configName = ref('ceshi1')
 </script>
 
 <template>
-  <!--  <XReportForm :config-name="configName" :show-input-columns-label-on-title="true"/> -->
-  <!--  <XReportForm :config-name="configName" :config-data="test_json_data" :local-config="temp_config" /> -->
-  <!--  <XReportForm :config-name="configName" :local-config="temp_config" />  -->
-  <XReportForm :config-name="configName" :local-config="temp_config" />
+  <XReportForm :config-name="configName" />
 </template>
 
 <style scoped lang="less">

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Image as VanImage, showToast } from 'vant'
+import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+
+const signatureImage = ref('')
+
+function handleSave() {
+  showToast('签名已保存')
+}
+
+function handleClear() {
+  showToast('签名已清除')
+}
+</script>
+
+<template>
+  <NormalDataLayout title="签名组件">
+    <template #layout_content>
+      基础使用
+      <div class="signature-demo">
+        <XSignature v-model="signatureImage" @save="handleSave" @clear="handleClear" />
+        <div v-if="signatureImage" class="preview">
+          <h3>预览签名</h3>
+          <VanImage v-if="signatureImage" :src="signatureImage" />
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.signature-demo {
+  padding: 16px;
+  .preview {
+    margin-top: 20px;
+    h3 {
+      margin: 0 0 10px;
+      font-size: 16px;
+      color: #323233;
+    }
+    img {
+      max-width: 100%;
+      border: 1px solid #ebedf0;
+      border-radius: 8px;
+    }
+  }
+}
+</style>

package/src/views/component/index.vue

@@ -26,10 +26,18 @@ const list = ref([
     name: 'XForm 表单',
     to: '/Component/XFormView/1/debug',
   },
+  {
+    name: '操作卡手机端',
+    to: '/Component/XReportFormView',
+  },
   {
     name: '评论记录列表',
     to: '/Component/EvaluateRecordView',
   },
+  {
+    name: 'XSignature 签名组件',
+    to: '/Component/XSignatureView',
+  },
 ])
 
 function cleanConfigCache() {
@@ -69,7 +77,7 @@ async function logout() {
 <style scoped lang="less">
 .home_main {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   padding: var(--base-interval-2);
   background-color: #eff2f5;
   .home_title {

package/vite.config.ts

@@ -92,7 +92,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
           viewport({
             appSelector: '#system-app',
             viewportWidth: 375,
-            maxDisplayWidth: 600,
+            maxDisplayWidth: 800,
             appContainingBlock: 'auto',
             necessarySelectorWhenAuto: '.app-wrapper',
             rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],