wui-components-v2 1.0.24 → 1.0.25

package/api/core/index.ts

@@ -16,11 +16,11 @@ interface RequestOptions {
   timeout?: number
 }
 
-function request(options: RequestOptions) {
+function request(options: RequestOptions): Promise<any> {
   const baseUrl = uni.getStorageSync('BASE_URL') || '/'
   const hydrocarbonProgramToken = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN') || ''
   const token = uni.getStorageSync('TOKEN') || ''
-  const hydrocarbonClient = uni.getStorageSync('HYDROCARBON_CLIENT') || 'MOBILE'
+  const hydrocarbonClient = uni.getStorageSync('HYDROCARBON_CLIENT') || ''
   console.log('request', baseUrl + options.url, options.data)
   return new Promise((resolve, reject) => {
     // 设置默认值

package/api/index.ts

@@ -1,4 +1,4 @@
-// 导入核心alova实例
+// 导入请求核心实例
 import req from './core/index'
 
 export { req }

package/api/page.ts

@@ -0,0 +1,51 @@
+import type { PageData } from '../type'
+import req from './core/index'
+
+interface PageConfig {
+  configName: string
+  ltmplConfig: any
+  sourceId: string
+  sourceName: string
+}
+// 列表页面配置
+export function pageConfig(sourceId: string): Promise<PageConfig> {
+  return req({
+    url: `/v3/ltmpl/config?sourceId=${sourceId}`,
+  })
+}
+
+// 获取列表页面数据key
+export function pageKey(sourceId: string, mainCode: string = '', query: string = '') {
+  return req({
+    url: `/v3/ltmpl/query/key?sourceId=${sourceId}&mainCode=${mainCode}&menuId=${sourceId}${query}`,
+  })
+}
+
+// 获取列表页面数据
+export function listData(queryKey: string, pageNo: number, pageSize: number): Promise<PageData> {
+  return req({
+    url: `/v3/ltmpl/query/data?queryKey=${queryKey}&pageNo=${pageNo}&pageSize=${pageSize}`,
+  })
+}
+
+// 获取编辑页面配置
+export function editPageConfig(sourceId: string, mianCode: string) {
+  return req({
+    url: `/v3/dtmpl/config?sourceId=${sourceId}&code=${mianCode}`,
+  })
+}
+
+//
+// 新增/编辑页面提交保存
+export function editPageDataSave(sourceId: string, id: string = '', data: any, mainCode: string = '') {
+  return req({
+    url: `/v3/dtmpl/data`,
+    method: 'POST',
+    data: {
+      sourceId,
+      mainCode,
+      唯一编码: id,
+      ...data,
+    },
+  })
+}

package/components/demo-card/demo-card.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+
+defineOptions({
+  name: 'DemoCard',
+})
+
+const props = defineProps({
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+
+})
+
+const {
+  primary,
+} = useManualTheme()
+</script>
+
+<template>
+  <wd-card>
+    <template #title>
+      <view class="flex items-center gap-2">
+        <view class="h-3.5 w-1" :style="{ backgroundColor: primary }" />
+        <text class="font-bold">
+          {{ props.title }}
+        </text>
+      </view>
+    </template>
+    <slot name="content" />
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </wd-card>
+</template>

package/components/edit-page/edit-page.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { computed, defineOptions } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useRouter } from 'uni-mini-router'
+import FormControl from '../form-control/form-control.vue'
+import { editPageConfig, editPageDataSave } from '../../api/page'
+import type { Groups, dtmplConfig } from '../../type'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import foldCard from '../fold-card/fold-card.vue'
+
+defineOptions({
+  name: 'EditPage',
+})
+const pageConfig = ref<dtmplConfig>({
+  id: '',
+  title: '',
+  groups: [],
+  entity: {
+    arrayMap: {},
+    code: '',
+    fieldMap: {},
+  },
+  buttons: [],
+})
+const globalToast = useGlobalToast()
+const router = useRouter()
+const mainCode = ref('')
+const id = ref('')
+const sourceId = ref('')
+const formControlRef = ref()
+const subLoading = ref(false)
+// 折叠面板
+const collapses = ref()
+onLoad((option: any) => {
+  sourceId.value = option.sourceId
+  mainCode.value = option.mainCode
+  id.value = option.id
+  uni.setNavigationBarTitle({
+    title: `编辑${option.title}`,
+  })
+  getEditPageConfig()
+})
+// const fieldGroup = computed(() => {
+//   return pageConfig.value.groups.find(item => item.type === 'fieldGroup')
+// })
+// 获取编辑页面配置
+async function getEditPageConfig() {
+  try {
+    const res = await editPageConfig(sourceId.value, id.value)
+    if (res.dtmplConfig) {
+      pageConfig.value = res.dtmplConfig
+      collapses.value = pageConfig.value.groups.map((item: Groups) => {
+        return item.id
+      })
+      console.log('res.dtmplConfig:', res.dtmplConfig)
+    }
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+// 保存
+async function save() {
+  try {
+    const formArray: any[] = []
+    formControlRef.value.forEach((element: any) => {
+      formArray.push(element.submit())
+    })
+    const res = await Promise.all(formArray)
+    const data = res.reduce((acc, cur) => {
+      return { ...acc, ...cur }
+    }, {})
+    subLoading.value = true
+    editPageDataSave(sourceId.value, id.value, data, mainCode.value).then(() => {
+      subLoading.value = false
+      globalToast.success('保存成功')
+      router.back()
+    }).catch((error: any) => {
+      subLoading.value = false
+      globalToast.error(error.message)
+    })
+    console.log('res:', res)
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+
+  // formControlRef.value.submit().then((data: any) => {
+  //   console.log('保存成功', data)
+  //   editPageDataSave(sourceId.value, id.value, data, mainCode.value)
+  // })
+}
+</script>
+
+<template>
+  <view class="relative h-[calc(100vh-44px)] w-100vw overflow-auto">
+    <wd-collapse v-model="collapses">
+      <wd-collapse-item v-for="group in pageConfig.groups" :key="group.id" :title="group.title" :name="group.id">
+        <FormControl v-if="group.type === 'fieldGroup'" ref="formControlRef" :field-group="group" :entity="pageConfig?.entity?.fieldMap" />
+        <view v-if="group.type === 'relation'">
+          <view v-for="field in pageConfig?.entity?.arrayMap[group.id]" :key="field.code">
+            <foldCard :columns="group.fields" model="complex" :data="field" />
+          </view>
+        </view>
+      </wd-collapse-item>
+    </wd-collapse>
+    <view class="h-12" />
+    <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 .dark:bg-gray-900 .light:bg-white">
+      <wd-button class="flex-1" @click="save">
+        保存
+      </wd-button>
+    </view>
+  </view>
+</template>

package/components/fold-card/fold-card.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps, ref } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+import type { Columns, Entities } from '../../type'
+import { formatItemData } from '../../utils'
+
+defineOptions({
+  name: 'FoldCard',
+})
+
+const props = defineProps<{
+  columns: Columns[]
+  collapseNum?: number
+  primaryColumn?: Columns
+  secondColumn?: Columns
+  data: Entities
+  model: 'simple' | 'complex'
+}>()
+
+// 展示内容
+const exhibitData = computed(() => {
+  const { collapseNum } = props
+  const num = collapseNum || 2
+  const columns = props.columns.length >= num ? props.columns.slice(0, num) : props.columns
+  return columns.filter(item => item.title !== '操作')
+})
+// 折叠内容
+const collapseData = computed(() => {
+  const { collapseNum } = props
+  const num = collapseNum || 2
+  const columns = props.columns.length >= num ? props.columns.slice(num) : []
+  return columns.filter(item => item.title !== '操作')
+})
+
+// 折叠图标
+const collapseIcon = ref('arrow-down')
+// 切换折叠内容
+function toggleCollapse(contentId: string) {
+  const content = document.getElementById(contentId)
+  if (content?.classList.contains('max-h-0')) {
+    // 展开
+    content.classList.remove('max-h-0')
+    content.classList.add('max-h-[500px]')
+    collapseIcon.value = 'arrow-up'
+  }
+  else {
+    // 折叠
+    content?.classList.add('max-h-0')
+    content?.classList.remove('max-h-[500px]')
+    collapseIcon.value = 'arrow-down'
+  }
+}
+</script>
+
+<template>
+  <!-- 订单卡片容器 -->
+  <view class="mx-auto max-w-md space-y-4">
+    <!-- 订单卡片2 -->
+    <view class="ma-2 overflow-hidden rounded-xl bg-white shadow-sm dark:bg-[var(--wot-dark-background2)]">
+      <!-- 订单头部 -->
+      <view class="flex items-center justify-between border-b border-gray-100 p-4">
+        <view class="flex items-center gap-1 text-base text-gray-800 font-medium dark:text-white">
+          <slot name="select" /> <view v-if="primaryColumn">
+            {{ formatItemData(data.fieldMap[primaryColumn.sourceId], primaryColumn.controlType) }}
+          </view>
+        </view>
+        <view v-if="props.secondColumn" class="rounded bg-yellow-50 px-2 py-1 text-sm text-yellow-600">
+          {{ props.secondColumn && formatItemData(data.fieldMap[props.secondColumn.sourceId], props.secondColumn.controlType) }}
+        </view>
+      </view>
+
+      <!-- 订单内容 -->
+      <view v-if="props.model === 'complex'" class="p-4">
+        <!-- 商品列表 -->
+        <view class="mb-3">
+          <!-- 订单信息 -->
+          <view class="text-sm space-y-3">
+            <view v-for="(item, index) in exhibitData" :key="index" class="flex">
+              <view class="mr-2 w-20 text-gray-500 dark:text-white">
+                {{ item.title }}:
+              </view>
+              <view class="flex-1 text-gray-800 dark:text-white">
+                {{ formatItemData(data.fieldMap[item.sourceId], item.controlType) }}
+              </view>
+            </view>
+
+            <!-- 可折叠内容 -->
+            <view :id="`${data.code}`" class="max-h-0 overflow-hidden transition-all duration-300">
+              <view class="pt-3 space-y-3">
+                <view v-for="(item, index) in collapseData" :key="index" class="flex">
+                  <view class="mr-2 w-20 text-gray-500 dark:text-white">
+                    {{ item.title }}:
+                  </view>
+                  <view class="flex-1 text-gray-800 dark:text-white">
+                    {{ formatItemData(data.fieldMap[item.sourceId], item.controlType) }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 订单底部 -->
+        <view class="flex items-center justify-between border-t border-gray-100">
+          <view>
+            <wd-button
+              v-if="collapseData.length > 0"
+              id="toggle-btn-2"
+              type="icon"
+              :icon="collapseIcon"
+              class="mr-auto flex items-center px-3 py-2 text-sm text-blue-600"
+              @click="toggleCollapse(data.code)"
+            />
+          </view>
+
+          <view class="flex items-center">
+            <slot name="buttons" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+:deep(.wd-collapse-item__body){
+  background-color:#f9f9f9;
+}
+:deep(.wot-theme-dark .wd-collapse-item__body){
+  background-color:#222222;
+}
+</style>

package/components/form-control/form-control.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { computed, defineEmits, defineExpose, defineOptions, defineProps, reactive, ref, toRaw } from 'vue'
+import type { FormRules } from 'wot-design-uni/components/wd-form/types'
+import type { Fields, Groups } from '../../type'
+import mulselectPicker from '../mulselect-picker/mulselect-picker.vue'
+
+defineOptions({
+  name: 'FormControl',
+})
+const props = defineProps<{
+  fieldGroup?: Groups
+  entity?: { [key: string]: string }
+}>()
+
+const form = ref<any>(null)
+const model = computed(() => {
+  const model: { [key: string]: any } = {}
+  props.fieldGroup?.fields.map((item: Fields) => {
+    return model[item.sourceId] = (props.entity && props.entity[item.sourceId]) || item.defaultValue || ''
+  })
+  return model
+})
+
+const rules = computed((): FormRules => {
+  return props.fieldGroup?.fields.reduce((acc: any, item: Fields) => {
+    acc[item.sourceId] = [{ required: item.required, message: `请填写${item.title}` }]
+    return acc
+  }, {})
+})
+
+function submit() {
+  return new Promise((resolve, reject) => {
+    form.value.validate().then(({ valid }: any) => {
+      if (valid) {
+        resolve(toRaw(model.value))
+      }
+      else {
+        reject(valid)
+      }
+    })
+      .catch((error: any) => {
+        console.log(error, 'error')
+        reject(error)
+      })
+  })
+}
+// 暴露方法/变量给父组件
+defineExpose({
+  submit,
+})
+</script>
+
+<template>
+  <view>
+    <wd-form ref="form" :model="model" :rules="rules" error-type="toast">
+      <wd-cell-group border>
+        <view v-for="item in props.fieldGroup?.fields" :key="item.sourceId">
+          <wd-input
+            v-if="item.extControlType === 'text'"
+            v-model="model[item.sourceId]"
+            :label="item.title"
+            label-width="100px"
+            :prop="item.sourceId"
+            :readonly="item.disabled"
+            :clearable="!item.disabled"
+            :placeholder="`请输入${item.title}`"
+          />
+          <wd-cell v-if="item.extControlType === 'relselect'" :prop="item.sourceId" :title="item.title" title-width="100px">
+            <mulselectPicker v-model="model[item.sourceId]" :source-id="item.sourceId" :title="item.title" :ext-control-type="item.extControlType" :readonly="item.disabled" :clearable="!item.disabled" />
+          </wd-cell>
+          <wd-cell v-if="item.extControlType === 'relselectvalue'" :prop="item.sourceId" :title="item.title" title-width="100px">
+            <mulselectPicker v-model="model[item.sourceId]" :source-id="item.sourceId" :title="item.title" :ext-control-type="item.extControlType" :readonly="item.disabled" :clearable="!item.disabled" />
+          </wd-cell>
+        </view>
+      </wd-cell-group>
+    </wd-form>
+  </view>
+</template>

package/components/list/list.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps, onMounted, reactive, ref } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useRouter } from 'uni-mini-router'
+import { useManualTheme } from '../../composables/useManualTheme'
+import { listData, pageConfig, pageKey } from '../../api/page'
+import foldCard from '../fold-card/fold-card.vue'
+import type { Config, Entities } from '../../type'
+import Search from '../search/search.vue'
+import ListTopButtons from '../list-top-buttons/list-top-buttons.vue'
+
+defineOptions({
+  name: 'List',
+})
+const router = useRouter()
+const Zpaging = ref<any>(null)
+const config = ref<Config>({ buttons: [], columns: [], primaryColumn: { sourceId: '', controlType: '' }, primaryCriteria: { disabled: false, defaultValue: '', transDefaultValue: '', required: false, controlType: '', sourceId: '' }, secondColumn: { sourceId: '', controlType: '' }, criterias: [] })
+const sourceId = ref('')
+const datas = ref<Entities[]>([])
+const pageTitle = ref('')
+const searchData = ref('')
+onLoad((option: any) => {
+  console.log(option)
+  sourceId.value = option.sourceId
+  pageTitle.value = option.title
+  uni.setNavigationBarTitle({
+    title: option.title,
+  })
+  getPageConfig()
+})
+onShow(() => {
+  if (Zpaging.value) {
+    Zpaging.value.reload()
+  }
+})
+async function getPageConfig() {
+  try {
+    const res = await pageConfig(sourceId.value)
+    if (res.ltmplConfig) {
+      config.value = res.ltmplConfig
+    }
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
+async function queryList(pageNo: number, pageSize: number) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  // request.queryList({ pageNo,pageSize }).then(res => {
+  // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
+  //     paging.value.complete(res.data.list);
+  // }).catch(res => {
+  // 如果请求失败写paging.value.complete(false);
+  //  注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+  //  在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+  // paging.value.complete(false);
+  // paging.value.reload() // 手动触发加载
+  // })
+
+  try {
+    const res = await pageKey(sourceId.value, '', searchData.value)// 获取key
+    const data = await listData(res.key, pageNo, pageSize)// 获取数据
+    // const count = await getPageTotal(key.data?.key)// 获取总数
+    Zpaging.value.complete(data.entities)
+
+    // emits('loadData', data.data.entities)
+  }
+  catch (error) {
+    Zpaging.value.complete(false)
+    console.error(error)
+  }
+}
+
+function submitSearch(data: any) {
+  searchData.value = ''
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      const element = data[key]
+      searchData.value = `${searchData.value}&c_${key}=${element}`
+    }
+  }
+  Zpaging.value.reload()
+}
+
+// 跳转编辑页面
+function edit(item: Entities) {
+  router.push(`/pages/edit-page/edit-page?sourceId=${sourceId.value}&id=${item.code}&title=${pageTitle.value}&mainCode=''`)
+}
+</script>
+
+<template>
+  <z-paging ref="Zpaging" v-model="datas" :show-loading-more-when-reload="true" @query="queryList">
+    <template #top>
+      <Search :criterias="config.criterias" :primary-criteria="config.primaryCriteria" @submit="submitSearch" />
+      <view>
+        <ListTopButtons :buttons="config.buttons" :source-id="sourceId" :page-title="pageTitle" />
+      </view>
+      <slot name="top" />
+    </template>
+    <foldCard v-for="item in datas" :key="item.code" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" model="complex">
+      <template #buttons>
+        <wd-button size="small" @click="edit(item)">
+          编辑
+        </wd-button>
+      </template>
+    </foldCard>
+    <template #bottom>
+      <slot name="bottom" />
+    </template>
+  </z-paging>
+</template>

package/components/list-top-buttons/list-top-buttons.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { defineOptions, defineProps } from 'vue'
+import { useRouter } from 'uni-mini-router'
+
+defineOptions({
+  name: 'ListTopButtons',
+})
+const props = defineProps<{ buttons: string[], sourceId: string, id?: string, pageTitle: string }>()
+const router = useRouter()
+// 跳转添加页面
+function gotoAddPage() {
+  router.push(`/pages/edit-page/edit-page?sourceId=${props.sourceId}&id=${props.id}&title=${props.pageTitle}&mainCode=''`)
+}
+</script>
+
+<template>
+  <view class="flex justify-end gap-1 .light:bg-white">
+    <wd-button v-if="buttons.includes('dtmplAdd')" type="icon" icon="add" @click="gotoAddPage" />
+  </view>
+</template>

package/components/login-form/login-form.vue

@@ -9,7 +9,7 @@ import { useTabbar } from '../../composables/useTabbar'
 defineOptions({
   name: 'LoginForm',
 })
-
+const subloading = ref(false)
 const router = useRouter()
 const toast = useGlobalToast()
 const { setUserInfo } = useUser()
@@ -31,6 +31,7 @@ function handleSubmit() {
     .then(async ({ valid, errors }: any) => {
       if (valid) {
         try {
+          subloading.value = true
           // 登录
           const res = await login(model.name, model.password)
 
@@ -66,15 +67,19 @@ function handleSubmit() {
             toast.error({ msg: res.message })
           }
         }
-        catch (error) {
+        catch (error: any) {
+          toast.error({ msg: error })
           console.log(error, 'error')
         }
       }
       else {
+        toast.error({ msg: errors })
         console.log(errors, 'errors')
       }
+      subloading.value = false
     })
     .catch((error: any) => {
+      toast.error({ msg: error })
       console.log(error, 'error')
     })
 }
@@ -99,7 +104,7 @@ function handleSubmit() {
         </view>
       </wd-cell-group>
       <view class="p-4">
-        <wd-button block @click="handleSubmit">
+        <wd-button block :loading="subloading" @click="handleSubmit">
           登录
         </wd-button>
       </view>

package/components/menus/menus.vue

@@ -4,7 +4,7 @@ import { computed, defineOptions, defineProps, onMounted, ref } from 'vue'
 import { useRouter } from 'uni-mini-router'
 import { useGlobalToast } from '../../composables/useGlobalToast'
 import { menu } from '../../api/menu'
-import demoBlock from '../demo-block/demo-block.vue'
+import DemoCard from '../demo-card/demo-card.vue'
 
 defineOptions({
   name: 'Menus',
@@ -19,7 +19,7 @@ const props = defineProps({
     default: () => { },
   },
 })
-// const router = useRouter()
+const router = useRouter()
 // const toast = useGlobalToast()
 interface Icon {
   id: string
@@ -56,26 +56,17 @@ function sheetGotoPage(item: any) {
 
 // 跳转页面
 function goto(item: any) {
-  return
   console.log(item.pageType)
   switch (item.pageType) {
     case '列表':
-      if (item.customPath) {
-        uni.navigateTo({
-          url: `/${item.customPath}`,
-        })
-      }
-      else {
-        uni.navigateTo({
-          url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}`,
-        })
-      }
+
+      router.push(`/pages/list/index?sourceId=${item.id}&title=${item.title}`)
 
       return true
 
     case '报表':
       uni.navigateTo({
-        url: `/pages/report-table/report-table?sourceId=${item.id}&pageTitle=${item.title}`,
+        url: `/pages/report-table/report-table?sourceId=${item.id}&title=${item.title}`,
       })
       return true
 
@@ -162,16 +153,30 @@ function queryList() {
       <slot name="top" />
     </template>
     <view>
-      <demoBlock v-for="(item, index) in filtermenu" :key="index" :title="item.title" transparent>
-        <view class="border-rd-2 bg-white pa-1 dark:bg-[var(--wot-dark-background2)]">
-          <wd-grid :column="4" clickable>
-            <wd-grid-item
-              v-for="(subItem, subIndex) in item.items" :key="subIndex" icon="picture" :text="subItem.title"
-              @itemclick="gotoPage(subItem)"
-            />
-          </wd-grid>
-        </view>
-      </demoBlock>
+      <DemoCard v-for="(item, index) in filtermenu" :key="index" :title="item.title">
+        <template #content>
+          <view class="border-rd-2 bg-white pa-1 dark:bg-[var(--wot-dark-background2)]">
+            <wd-grid :column="4" clickable>
+              <wd-grid-item
+                v-for="(subItem, subIndex) in item.items"
+                :key="subIndex" use-text-slot use-icon-slot
+                @itemclick="gotoPage(subItem)"
+              >
+                <template #icon>
+                  <text class="i-carbon:container-image text-center text-5 text-gray-600 dark:text-white" />
+                </template>
+                <template #text>
+                  <view class="pa-2 text-center text-gray-600 dark:text-white">
+                    <text class="font-bold">
+                      {{ subItem.title }}
+                    </text>
+                  </view>
+                </template>
+              </wd-grid-item>
+            </wd-grid>
+          </view>
+        </template>
+      </DemoCard>
       <slot name="listBottom" />
     </view>
 

package/components/mulselect-picker/mulselect-picker.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, defineOptions, defineProps, onMounted, ref, toRaw, watch } from 'vue'
+import { useRouter } from 'uni-mini-router'
+
+defineOptions({
+  name: 'MulselectPicker',
+})
+
+const props = defineProps<{
+  extControlType: string
+  sourceId: string
+  title?: string
+  modelValue: string | Array<string>
+  readonly: boolean
+  clearable: boolean
+}>()
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string | string[]): void
+}>()
+const selectData = ref<string | string[]>(props.modelValue)
+const selectformatData = computed(() => {
+  if (Array.isArray(selectData.value)) {
+    return selectData.value.map(item => item.split('@R@')[1]).join(',')
+  }
+  return selectData.value.split('@R@')[1] || ''
+})
+const router = useRouter()
+// 事件名称
+const SELECTEVENT = 'select-list-goto-select'
+const SENDSELECTEVENT = 'select-list-send-selected'
+function gotoSlect() {
+  if (props.readonly)
+    return
+  router.push(`/pages/select-list/index?sourceId=${props.sourceId}&title=${props.title}&selectEvent=${SELECTEVENT}&sendSelectEvent=${SENDSELECTEVENT}&extControlType=${props.extControlType}`)
+  // 发送数据给选择页面,延迟发送防止页面不刷新
+  setTimeout(() => {
+    uni.$emit(SENDSELECTEVENT, toRaw(selectData.value))
+  }, 100)
+
+  // 接收勾选页面发送过来的数据
+  uni.$once(SELECTEVENT, (data: any) => {
+    selectData.value = data
+    emits('update:modelValue', data)
+  })
+}
+
+// 清空勾选
+function clearSelect() {
+  // 清空单选
+  if (props.extControlType === 'relselect') {
+    selectData.value = ''
+    emits('update:modelValue', '')
+  }
+  else {
+    selectData.value = []
+    emits('update:modelValue', [])
+  }
+}
+</script>
+
+<template>
+  <view class="relative" @click="gotoSlect">
+    <view class="flex flex-wrap text-left">
+      <text v-if="selectformatData">
+        {{ selectformatData }}
+      </text>
+      <text v-else class="text-gray-400">
+        请选择{{ title }}
+      </text>
+    </view>
+    <view v-if="clearable" class="absolute bottom-0 right-0 top-0">
+      <wd-icon v-if="selectformatData" name="error-fill" size="17px" @click.stop="clearSelect" />
+      <wd-icon v-else name="arrow-right" size="17px" />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+:deep(.wd-tag__close){
+ line-height:0.6
+}
+</style>

package/components/search/search.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { defineEmits, defineOptions, defineProps, ref } from 'vue'
+import type { Fields } from '../../type'
+import formControl from '../form-control/form-control.vue'
+
+defineOptions({ name: 'Search' })
+const props = defineProps<{
+  criterias: Fields[]
+  primaryCriteria: Fields
+}>()
+const emits = defineEmits(['submit'])
+const show = ref(false)
+const search = ref('')
+const formControlRef = ref()
+const entity = ref({})
+const filterCriterias = computed(() => {
+  return props.criterias.filter(item => item.sourceId !== props.primaryCriteria.sourceId)
+})
+function handleClose() {
+  show.value = false
+}
+function handleSubmit() {
+  if (!formControlRef.value) {
+    const data = {
+      [props.primaryCriteria.sourceId]: search.value,
+    }
+    emits('submit', data)
+    handleClose()
+    return
+  }
+  formControlRef.value.submit().then((fdata: any) => {
+    entity.value = {
+      ...fdata,
+      [props.primaryCriteria.sourceId]: search.value,
+    }
+    const data = {
+      [props.primaryCriteria.sourceId]: search.value,
+    }
+    filterCriterias.value.forEach((item) => {
+      for (const key in fdata) {
+        if (Object.prototype.hasOwnProperty.call(fdata, key)) {
+          const element = fdata[key]
+          if (item.sourceId === key) {
+            if (item.extControlType === 'relselectvalue') {
+              data[item.sourceId] = element.map((item: string) => {
+                return item.split('@R@')[1]
+              }).join('@,@')
+            }
+          }
+        }
+      }
+    })
+
+    emits('submit', data)
+    handleClose()
+  })
+}
+</script>
+
+<template>
+  <view v-if="primaryCriteria.controlType === 'text'">
+    <wd-search v-model="search" cancel-txt="搜索" :placeholder="`请输入${primaryCriteria.title}搜索`" @clear="handleSubmit" @cancel="handleSubmit">
+      <template #prefix>
+        <view class="search-type">
+          <!-- <wd-icon custom-class="icon-arrow" name="fill-arrow-down" /> -->
+          <wd-icon name="view-list" size="18px" class=".dark:text-white .light:text-black" @click="show = true" />
+        </view>
+      </template>
+    </wd-search>
+    <wd-popup v-model="show" position="bottom" custom-class="h-80vh" closable @close="handleClose">
+      <view class="relative box-border h-full p-1 .dark:bg-gray-900">
+        <view class="h-40px" />
+        <formControl ref="formControlRef" :field-group="{ fields: filterCriterias, id: '', buttons: [], title: '', type: '', pointSourceId: '' }" :entity="entity" />
+        <view class="h-12" />
+        <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 .dark:bg-gray-900 .light:bg-white">
+          <wd-button class="flex-1" @click="handleSubmit">
+            确定
+          </wd-button>
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<style>
+.search-type {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px 0 16px;
+}
+.search-type::after {
+  position: absolute;
+  content: '';
+  width: 1px;
+  right: 0;
+  top: 5px;
+  bottom: 5px;
+  /* background: rgba(0, 0, 0, 0.25); */
+}
+.search-type {
+  :deep(.icon-arrow) {
+    display: inline-block;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+}
+</style>

package/components/select-list/select-list.vue

@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps, nextTick, onMounted, onUnmounted, reactive, ref, toRaw } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useRouter } from 'uni-mini-router'
+import { useManualTheme } from '../../composables/useManualTheme'
+import { listData, pageConfig, pageKey } from '../../api/page'
+import foldCard from '../fold-card/fold-card.vue'
+import type { Config, Entities } from '../../type'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+
+defineOptions({
+  name: 'SelectList',
+})
+const globalToast = useGlobalToast()
+const router = useRouter()
+const Zpaging = ref<any>(null)
+const config = ref<Config>({ columns: [], primaryColumn: { sourceId: '', controlType: '' }, secondColumn: { sourceId: '', controlType: '' } })
+const sourceId = ref('')
+const datas = ref<Entities[]>([])
+const pageTitle = ref('')
+const selectEvent = ref('')
+const sendSelectEvent = ref('')
+const extControlType = ref('')// 选择模式，例如：单选、多选
+onLoad((option: any) => {
+  sourceId.value = option.sourceId
+  pageTitle.value = option.title
+  selectEvent.value = option.selectEvent
+  sendSelectEvent.value = option.sendSelectEvent
+  extControlType.value = option.extControlType
+  uni.setNavigationBarTitle({
+    title: `选择${option.title}`,
+  })
+  getPageConfig()
+})
+const selectData = ref<Record<string, string>>({})// 选择数据
+onMounted(() => {
+  // selectData.value = { '447607223953539077': '447607223953539077@R@光机' }
+})
+uni.$once(sendSelectEvent.value, async (data: string | string[]) => {
+  if (!data)
+    return
+
+  if (Array.isArray(data)) {
+    const newdata: Record<string, string> = {}
+    data.forEach((item) => {
+      newdata[item.split('@R@')[0]] = item
+    })
+    selectData.value = newdata
+  }
+  else {
+    selectData.value[data.split('@R@')[0]] = data
+  }
+  uni.$off(sendSelectEvent.value)
+})
+
+async function getPageConfig() {
+  try {
+    const res = await pageConfig(sourceId.value)
+    if (res.ltmplConfig) {
+      config.value = res.ltmplConfig
+    }
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
+async function queryList(pageNo: number, pageSize: number) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  // request.queryList({ pageNo,pageSize }).then(res => {
+  // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
+  //     paging.value.complete(res.data.list);
+  // }).catch(res => {
+  // 如果请求失败写paging.value.complete(false);
+  //  注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+  //  在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+  // paging.value.complete(false);
+  // paging.value.reload() // 手动触发加载
+  // })
+
+  try {
+    const res = await pageKey(sourceId.value)// 获取key
+    const data = await listData(res.key, pageNo, pageSize)// 获取数据
+    // const count = await getPageTotal(key.data?.key)// 获取总数
+    Zpaging.value.complete(data.entities)
+
+    // emits('loadData', data.data.entities)
+  }
+  catch (error) {
+    Zpaging.value.complete(false)
+    console.error(error)
+  }
+}
+
+// 跳转编辑页面
+function edit(item: Entities) {
+  router.push(`/pages/edit-page/edit-page?sourceId=${sourceId.value}&mainCode=${item.code}`)
+}
+
+// 勾选变换监听
+function handleChange(item: Entities) {
+  // 判断是否有当前选中值,有值则删除
+  if (selectData.value[item.code]) {
+    delete selectData.value[item.code]
+    return
+  }
+
+  // 判断是否为单选，清空选项
+  if (extControlType.value === 'relselect') {
+    selectData.value = {}
+  }
+
+  selectData.value[item.code] = `${item.code}@R@${item.fieldMap[config.value.primaryColumn.sourceId]}`
+}
+// 发送选中数据
+function send() {
+  const data = Object.values(selectData.value)
+  if (!data.length) {
+    globalToast.warning(`请选择${pageTitle.value}`)
+    return
+  }
+
+  // 判断是否为单选，是：发送字符串，否：发送数组
+  if (extControlType.value === 'relselect') {
+    uni.$emit(selectEvent.value, data[0])
+  }
+  else {
+    uni.$emit(selectEvent.value, data)
+  }
+  router.back()
+}
+// 取消
+// function cancel() {
+//   send('cancel')
+//   router.back()
+// }
+// 确定
+function confirm() {
+  send()
+}
+onUnmounted(() => {
+  console.log('unmounted')
+  uni.$off(selectEvent.value)
+})
+</script>
+
+<template>
+  <z-paging ref="Zpaging" v-model="datas" :show-loading-more-when-reload="true" @query="queryList">
+    <template #top>
+      <slot name="top" />
+    </template>
+
+    <foldCard v-for="item in datas" :key="item.code" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" model="simple" @click="() => { handleChange(item) }">
+      <template #select>
+        <wd-checkbox :true-value="`${item.code}@R@${item.fieldMap[config.primaryColumn.sourceId]}`" false-value="" :model-value="selectData[item.code]" />
+      </template>
+      <template #buttons>
+        <wd-button size="small" @click="edit(item)">
+          编辑
+        </wd-button>
+      </template>
+    </foldCard>
+
+    <template #bottom>
+      <slot name="bottom">
+        <view class="flex justify-between gap-1 p-2">
+          <!-- <wd-button class="flex-1" type="info" @click="cancel">
+            取消
+          </wd-button> -->
+          <wd-button class="flex-1" @click="confirm">
+            确定
+          </wd-button>
+        </view>
+      </slot>
+    </template>
+  </z-paging>
+</template>

package/index.ts

@@ -15,6 +15,9 @@ import { req } from './api/index'
 import { useTabbar } from './composables/useTabbar'
 import { persistPlugin } from './store/persist'
 import DemoBlock from './components/demo-block/demo-block.vue'
+import List from './components/list/list.vue'
+import selectList from './components/select-list/select-list.vue'
+import editPage from './components/edit-page/edit-page.vue'
 // 组件列表
 const coms: Array<{ name: string }> = [
   SystemSettings,
@@ -24,6 +27,9 @@ const coms: Array<{ name: string }> = [
   LayoutsDefault,
   Tabbar,
   DemoBlock,
+  List,
+  selectList,
+  editPage,
 ]
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wui-components-v2",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "wui 组件库",
   "author": "wgxshh",
   "license": "MIT",

package/type.ts

@@ -0,0 +1,59 @@
+// 列表字段配置
+export interface Columns {
+  controlType: string
+  extControlType?: string
+  sourceId: string
+  mstrucId?: string
+  title?: string
+}
+
+export interface Config {
+  columns: Columns[]
+  primaryColumn: Columns
+  primaryCriteria: Fields
+  secondColumn: Columns
+  criterias: Fields[]
+  buttons: string[]
+}
+
+// 列表数据
+export interface Entities {
+  code: string
+  fieldMap: { [key: string]: string }
+}
+
+// 列表页面数据
+export interface PageData {
+  entities: Entities
+}
+
+// 表单字段配置
+export interface Fields extends Columns {
+  disabled: boolean
+  defaultValue: string
+  transDefaultValue: string
+  required: boolean
+}
+
+export interface Groups {
+  id: string
+  buttons: string[]
+  fields: Fields[]
+  title: string
+  type: string
+  pointSourceId: string
+}
+
+export interface Entity extends Entities {
+  arrayMap: { [key: string]: Entities[] }
+
+}
+
+// 编辑页面配置
+export interface dtmplConfig {
+  id: string
+  title: string
+  groups: Groups[]
+  entity: Entity
+  buttons: string[]
+}

package/utils/index.ts

@@ -1,9 +1,35 @@
-/**
- * 获取当前页面路径
- * @returns 当前页面路径
- */
-export function getCurrentPath() {
-  const pages = getCurrentPages()
-  const currentPage = pages[pages.length - 1]
-  return currentPage.route || ''
-}
+import { isArray } from '@alova/shared'
+
+/**
+ * 获取当前页面路径
+ * @returns 当前页面路径
+ */
+export function getCurrentPath() {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  return currentPage.route || ''
+}
+
+/**
+ * 格式化列表项展示数据
+ * @param data 数据值
+ * @param type 数据类型
+ * @returns 格式化后的数据
+ */
+export function formatItemData(data: any, type: string) {
+  if (type === 'relselect') {
+    // 判断data是否为数组
+    if (isArray(data)) {
+      const dataArr = data.map(item => item.split('@R@')[1]).join(',')
+      return dataArr
+    }
+
+    return data ? data.split('@R@')[1] : ''
+  }
+
+  if (type === 'datetime') {
+    return data ? data.split('.')[0] : ''
+  }
+
+  return data
+}