feat(X-Pack): [数据填报]移动端支持展示「我的填报」，并支持移动端填报

#12110

core/core-frontend/src/locales/en.ts

@@ -4165,7 +4165,8 @@ export default {
       'After data filling is enabled, the form data can be stored in the Datasource. Once enabled, it is not allowed to be closed later. ',
     new_folder: 'New folder',
     form_manage: 'Form management',
-    my_job: 'My reports',
+    my_job: 'My data filling task',
+    short_name: 'Task',
     disable_data_fill_hint:
       'After closing data filling, the form data will fail to submit. Are you sure you want to close it? ',
     enable_data_fill_hint:
@@ -4173,6 +4174,7 @@ export default {
     todo: 'To be filled',
     finished: 'Filled',
     expired: 'Expired',
+    all: 'All',
     required_select: 'Required',
     condition: 'Filter value',
     add_condition: 'Add condition',

core/core-frontend/src/locales/tw.ts

@@ -4051,11 +4051,13 @@ export default {
     new_folder: '新建資料夾',
     form_manage: '表單管理',
     my_job: '我的填報',
+    short_name: '填報',
     disable_data_fill_hint: '關閉資料填報後，表單資料將提交失敗，確定關閉？ ',
     enable_data_fill_hint: '啟用後，允許在資料來源資料庫中新建資料表，並將表單資料存放至表中',
     todo: '待填報',
     finished: '已填報',
     expired: '已過期',
+    all: '全部',
     required_select: '必選',
     condition: '過濾值',
     add_condition: '新增條件',

core/core-frontend/src/locales/zh-CN.ts

@@ -4056,11 +4056,13 @@ export default {
     new_folder: '新建文件夹',
     form_manage: '表单管理',
     my_job: '我的填报',
+    short_name: '填报',
     disable_data_fill_hint: '关闭数据填报后，表单数据将提交失败，确定关闭？',
     enable_data_fill_hint: '启用后，允许在数据源数据库中新建表，并将表单数据存放至表中',
     todo: '待填报',
     finished: '已填报',
     expired: '已过期',
+    all: '全部',
     required_select: '必选',
     condition: '过滤值',
     add_condition: '添加条件',

core/core-frontend/src/views/mobile/home/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useI18n } from '@/hooks/web/useI18n'
 import { shortcutOption } from '@/views/workbranch/ShortcutOption'
@@ -16,6 +16,8 @@ import 'vant/es/sticky/style'
 import 'vant/es/tab/style'
 import 'vant/es/nav-bar/style'
 import 'vant/es/tabs/style'
+import { cloneDeep } from 'lodash-es'
+import { XpackComponent } from '@/components/plugin'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -43,18 +45,6 @@ const loadTableData = () => {
     })
 }
 
-const setEmptyTips = () => {
-  emptyTips.value = state.tableData.length
-    ? ''
-    : `暂无${
-        {
-          recent: '数据',
-          store: '收藏',
-          share: '分享'
-        }[activeTab.value]
-      }`
-}
-
 const loadShareTableData = () => {
   emits('setLoading', true)
   request
@@ -71,12 +61,22 @@ const loadShareTableData = () => {
     })
 }
 
-const tablePaneList = ref([
+const baseTablePaneList = ref([
   { title: t('work_branch.recent'), name: 'recent', disabled: false },
   { title: '我的收藏', name: 'store', disabled: false },
   { title: t('visualization.share_out'), name: 'share', disabled: false }
 ])
 
+const dfTablePaneList = ref([])
+
+const tablePaneList = computed(() => {
+  const list = cloneDeep(!!busiAuthList.length ? baseTablePaneList.value : [])
+  for (const valueElement of dfTablePaneList.value) {
+    list.push(valueElement)
+  }
+  return list
+})
+
 const busiDataMap = computed(() => interactiveStore.getData)
 
 const getBusiListWithPermission = () => {
@@ -87,22 +87,51 @@ const getBusiListWithPermission = () => {
       busiFlagList.push(baseFlagList[parseInt(key)])
     }
   }
-  tablePaneList.value[0].disabled = !busiFlagList?.length
-  tablePaneList.value[1].disabled =
+  baseTablePaneList.value[0].disabled = !busiFlagList?.length
+  baseTablePaneList.value[1].disabled =
     !busiFlagList.includes('panel') && !busiFlagList.includes('screen')
   return busiFlagList
 }
 
 const busiAuthList = getBusiListWithPermission()
 
+const shortName = {
+  recent: '数据',
+  store: '收藏',
+  share: '分享'
+}
+
+const loadedDataFilling = data => {
+  dfTablePaneList.value.push(data)
+  shortName[data.name] = data.shortName
+}
+
+const setEmptyTips = () => {
+  emptyTips.value = state.tableData.length ? '' : `暂无${shortName[activeTab.value]}`
+}
+
+const firstChangeActiveName = ref(false)
+
+watch(
+  () => tablePaneList.value.length,
+  (v1, v2) => {
+    if (tablePaneList.value.length > 0 && !firstChangeActiveName.value) {
+      firstChangeActiveName.value = true
+      activeTab.value = tablePaneList.value[0].name
+    }
+  }
+)
+
 const handleClick = ({ name, disabled }) => {
   if (disabled) return
   if (name === 'recent' || name === 'store') {
     emits('setLoading', true)
     shortcutOption.setBusiFlag(name)
     loadTableData()
-  } else {
+  } else if (name === 'share') {
     loadShareTableData()
+  } else {
+    emptyTips.value = undefined
   }
 }
 onMounted(() => {
@@ -145,13 +174,19 @@ const formatterTime = val => {
       </van-tabs>
     </van-sticky>
     <div class="workbranch-cell-group">
-      <Workbranch
-        @click="handleCellClick(ele)"
-        v-for="ele in state.tableData"
-        :key="ele.id"
-        size="large"
-        :label="ele.name"
-        :time="formatterTime(ele.lastEditTime || ele.time)"
+      <template v-if="baseTablePaneList.includes(activeTab)">
+        <Workbranch
+          @click="handleCellClick(ele)"
+          v-for="ele in state.tableData"
+          :key="ele.id"
+          size="large"
+          :label="ele.name"
+          :time="formatterTime(ele.lastEditTime || ele.time)"
+        />
+      </template>
+      <XpackComponent
+        jsname="L21lbnUvZGF0YS9kYXRhLWZpbGxpbmcvZmlsbC9UYWJQYW5lVGFibGU="
+        v-else-if="activeTab === 'data-filling'"
       />
     </div>
     <div class="empty-img-mobile" v-if="!!emptyTips">
@@ -161,6 +196,11 @@ const formatterTime = val => {
       </div>
     </div>
   </div>
+
+  <XpackComponent
+    jsname="L21lbnUvZGF0YS9kYXRhLWZpbGxpbmcvZmlsbC9UYWJQYW5l"
+    @loaded="loadedDataFilling"
+  />
 </template>
 
 <style lang="less" scoped>