af-mobile-client-vue3 1.0.54

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

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import XCellDetail from '@af-mobile-client-vue3/components/data/XCellDetail/index.vue'
+import {
+  Cell as VanCell,
+  CellGroup as VanCellGroup,
+  Dialog as VanDialog,
+  Field as VanField,
+  Form as VanForm,
+  Grid as VanGrid,
+  GridItem as VanGridItem,
+  Popup as VanPopup,
+  showConfirmDialog,
+  showFailToast,
+  showSuccessToast,
+} from 'vant'
+import TabBarLayout from '@af-mobile-client-vue3/components/layout/TabBarLayout/index.vue'
+import { remove } from '@af-mobile-client-vue3/services/api/common'
+
+const options = ref([
+  { text: '微信', icon: 'wechat' },
+  { text: '微博', icon: 'weibo' },
+  { text: '微信', icon: 'wechat' },
+  { text: '微博', icon: 'weibo' },
+  { text: '微信', icon: 'wechat' },
+  { text: '微博', icon: 'weibo' },
+  { text: '微信', icon: 'wechat' },
+  { text: '微博', icon: 'weibo' },
+])
+
+const barList = ref([
+  { icon: 'edit', text: '编辑', method: 'editElement' },
+  { icon: 'delete-o', text: '删除', method: 'delElement' },
+  { icon: 'ellipsis', text: '更多', method: 'getMore' },
+])
+
+const serviceName = ref('af-system')
+
+const queryParamsName = ref('crud_oper_log_manage')
+
+const route = useRoute()
+
+const id = ref(-1)
+
+const showMore = ref(false)
+
+const showEdit = ref(false)
+
+const msg = ref({
+  info1: '',
+  info2: '',
+})
+
+const loading = ref(true)
+
+const detailContent = ref({
+  编号: '测试编号3.1415926...',
+  姓名: '测试人员',
+  部门: '测试部门',
+  完成日期: '测试时间 2024/4/16 16:59:12',
+  请求方式: '测试方法 POST',
+  请求ip: '测试ip 127.0.0.1',
+})
+
+const callbacks = {
+  editElement,
+  delElement,
+  getMore,
+}
+
+function editElement() {
+  showEdit.value = true
+}
+
+function doEdit() {
+  showEdit.value = false
+}
+function delElement() {
+  showConfirmDialog({
+    title: '提示',
+    message:
+      `确认删除---${id.value}---?`,
+    closeOnClickOverlay: true,
+  })
+    .then(() => {
+      const params = {
+        queryParamsName: queryParamsName.value,
+        idList: [id.value],
+      }
+      remove(params, serviceName)
+        .then((_res) => {
+          showSuccessToast('删除成功')
+          history.back()
+        }).catch((_err) => {
+          showFailToast('删除失败')
+        })
+    })
+    .catch((err) => {
+      console.warn(err)
+    })
+}
+
+function getMore() {
+  showMore.value = true
+}
+
+onMounted(() => {
+  id.value = route.params.id as unknown as number
+  setTimeout(() => {
+    loading.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <div id="XCellDetailView">
+    <NormalDataLayout title="详情" class="normal-body">
+      <template #layout_content>
+        <XCellDetail
+          title="测试标题"
+          describe="测试描述信息"
+          extra="12345"
+          :loading="loading"
+          :status-bar="{ icon: 'success', color: 'green' }"
+        >
+          <template #detailContent>
+            <div v-for="(value, key) in detailContent" :key="key" class="detail-content">
+              <div class="detail-content-title">
+                {{ key }}
+              </div>
+              <div class="detail-content-msg">
+                {{ value }}
+              </div>
+            </div>
+          </template>
+        </XCellDetail>
+      </template>
+    </NormalDataLayout>
+    <TabBarLayout :bar-list="barList" :callbacks="callbacks" />
+    <VanPopup
+      v-model:show="showMore"
+      class="pop-box"
+      :overlay-style="{ height: '92.5vh', top: '7.5vh' }"
+      round
+      position="bottom"
+    >
+      <div class="grid-box">
+        <VanGrid :gutter="10">
+          <VanGridItem v-for="(item, index) in options" :key="index" :icon="(item as any).icon" :text="(item as any).text" />
+        </VanGrid>
+      </div>
+      <VanCell class="cell" title="取消" @click="showMore = false" />
+    </VanPopup>
+    <VanDialog :show="showEdit" title="编辑信息" :close-on-click-overlay="true" @confirm="doEdit">
+      <VanForm>
+        <VanCellGroup class="cell-group">
+          <VanField
+            v-model="msg.info1"
+            name="信息一"
+            label="信息一"
+            placeholder="请填写信息一"
+            :rules="[{ required: true, message: '信息一不得为空' }]"
+          />
+          <VanField
+            v-model="msg.info2"
+            name="信息二"
+            label="信息二"
+            placeholder="请填写信息二"
+            :rules="[{ required: true, message: '信息二不得为空' }]"
+          />
+        </VanCellGroup>
+      </VanForm>
+    </VanDialog>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XCellDetailView {
+  .normal-body {
+    height: 92vh;
+  }
+  .grid-box {
+    background-color: #f7f8fa;
+    margin-top: 2vh;
+    :deep(.van-grid-item__content) {
+      background-color: #f7f8fa;
+    }
+    :deep(.van-grid-item__content:hover) {
+      background-color: white;
+    }
+  }
+  .pop-box {
+    height: 28vh;
+    background-color: #f7f8fa;
+  }
+  .cell {
+    margin-top: 1vh;
+    text-align: center;
+  }
+  .cell-group {
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+  }
+  .detail-content {
+    margin: 5px 0 0 0;
+    font-size: 15px;
+    .detail-content-title {
+      font-size: 13px;
+      margin-bottom: 5px;
+      color: var(--van-text-color-2);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,36 @@
+<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 idKey = ref('t_id')
+
+// const configName = ref('测试crud-移动端')
+const configName = ref('workPlanQueryParams_new')
+
+function toDetail(item) {
+  router.push({
+    name: 'XCellDetailView',
+    params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+  })
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XCellListView" title="工作计划">
+    <template #layout_content>
+      <XCellList
+        :config-name="configName"
+        :id-key="idKey"
+        @to-detail="toDetail"
+      />
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+</style>