@ebiz/designer-components 0.1.131 → 0.1.133

package/src/components/EbizPagination.vue

@@ -1,163 +1,163 @@
-<template>
-    <t-pagination
-        :current="current"
-        :defaultCurrent="defaultCurrent"
-        :defaultPageSize="defaultPageSize"
-        :disabled="disabled"
-        :foldedMaxPageBtn="foldedMaxPageBtn"
-        :hideOnSinglePage="hideOnSinglePage"
-        :maxPageBtn="maxPageBtn"
-        :pageEllipsisMode="pageEllipsisMode"
-        :pageSize="pageSize"
-        :pageSizeOptions="pageSizeOptions"
-        :selectProps="selectProps"
-        :showFirstAndLastPageBtn="showFirstAndLastPageBtn"
-        :showJumper="showJumper"
-        :showPageNumber="showPageNumber"
-        :showPageSize="showPageSize"
-        :showPreviousAndNextBtn="showPreviousAndNextBtn"
-        :size="size"
-        :theme="theme"
-        :total="total"
-        :totalContent="totalContent"
-        @change="handleChange"
-    >
-        <!-- 如果有totalContent插槽，使用插槽内容 -->
-        <template v-if="$slots.totalContent" #totalContent>
-            <slot name="totalContent"></slot>
-        </template>
-        
-        <!-- 如果有pageNumber插槽，使用插槽内容 -->
-        <template v-if="$slots.pageNumber" #pageNumber>
-            <slot name="pageNumber"></slot>
-        </template>
-    </t-pagination>
-</template>
-
-<script>
-export default {
-    name: "EbizPagination"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Pagination as TPagination } from 'tdesign-vue-next';
-
-defineProps({
-    // 当前页
-    current: {
-        type: Number,
-        default: undefined
-    },
-    // 默认当前页
-    defaultCurrent: {
-        type: Number,
-        default: 1
-    },
-    // 默认每页显示条数
-    defaultPageSize: {
-        type: Number,
-        default: 10
-    },
-    // 是否禁用分页
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 折叠时最多显示的页码按钮数
-    foldedMaxPageBtn: {
-        type: Number,
-        default: 5
-    },
-    // 当只有一页时是否隐藏分页
-    hideOnSinglePage: {
-        type: Boolean,
-        default: false
-    },
-    // 最多显示的页码按钮数
-    maxPageBtn: {
-        type: Number,
-        default: 10
-    },
-    // 页码数量超出时的省略模式
-    pageEllipsisMode: {
-        type: String,
-        default: 'mid',
-        validator: (val) => ['mid', 'both-ends'].includes(val)
-    },
-    // 每页显示条数
-    pageSize: {
-        type: Number,
-        default: 10
-    },
-    // 分页大小控制器选项
-    pageSizeOptions: {
-        type: Array,
-        default: () => [5, 10, 20, 50]
-    },
-    // 透传Select组件属性
-    selectProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否显示跳转首页尾页页码控制器
-    showFirstAndLastPageBtn: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示跳转页码控制器
-    showJumper: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示页码控制器
-    showPageNumber: {
-        type: Boolean,
-        default: true
-    },
-    // 是否显示分页数量控制器
-    showPageSize: {
-        type: Boolean,
-        default: true
-    },
-    // 是否显示跳转前后页页码控制器
-    showPreviousAndNextBtn: {
-        type: Boolean,
-        default: true
-    },
-    // 分页组件尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['small', 'medium'].includes(val)
-    },
-    // 分页组件风格
-    theme: {
-        type: String,
-        default: 'default',
-        validator: (val) => ['default', 'simple'].includes(val)
-    },
-    // 数据总条数
-    total: {
-        type: Number,
-        default: 0
-    },
-    // 用于自定义总条数呈现内容
-    totalContent: {
-        type: [Boolean, Function],
-        default: true
-    }
-});
-
-const emit = defineEmits(['change']);
-
-// 分页变化事件
-const handleChange = (pageInfo) => {
-    emit('change', pageInfo);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-pagination
+        :current="current"
+        :defaultCurrent="defaultCurrent"
+        :defaultPageSize="defaultPageSize"
+        :disabled="disabled"
+        :foldedMaxPageBtn="foldedMaxPageBtn"
+        :hideOnSinglePage="hideOnSinglePage"
+        :maxPageBtn="maxPageBtn"
+        :pageEllipsisMode="pageEllipsisMode"
+        :pageSize="pageSize"
+        :pageSizeOptions="pageSizeOptions"
+        :selectProps="selectProps"
+        :showFirstAndLastPageBtn="showFirstAndLastPageBtn"
+        :showJumper="showJumper"
+        :showPageNumber="showPageNumber"
+        :showPageSize="showPageSize"
+        :showPreviousAndNextBtn="showPreviousAndNextBtn"
+        :size="size"
+        :theme="theme"
+        :total="total"
+        :totalContent="totalContent"
+        @change="handleChange"
+    >
+        <!-- 如果有totalContent插槽，使用插槽内容 -->
+        <template v-if="$slots.totalContent" #totalContent>
+            <slot name="totalContent"></slot>
+        </template>
+        
+        <!-- 如果有pageNumber插槽，使用插槽内容 -->
+        <template v-if="$slots.pageNumber" #pageNumber>
+            <slot name="pageNumber"></slot>
+        </template>
+    </t-pagination>
+</template>
+
+<script>
+export default {
+    name: "EbizPagination"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Pagination as TPagination } from 'tdesign-vue-next';
+
+defineProps({
+    // 当前页
+    current: {
+        type: Number,
+        default: undefined
+    },
+    // 默认当前页
+    defaultCurrent: {
+        type: Number,
+        default: 1
+    },
+    // 默认每页显示条数
+    defaultPageSize: {
+        type: Number,
+        default: 10
+    },
+    // 是否禁用分页
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 折叠时最多显示的页码按钮数
+    foldedMaxPageBtn: {
+        type: Number,
+        default: 5
+    },
+    // 当只有一页时是否隐藏分页
+    hideOnSinglePage: {
+        type: Boolean,
+        default: false
+    },
+    // 最多显示的页码按钮数
+    maxPageBtn: {
+        type: Number,
+        default: 10
+    },
+    // 页码数量超出时的省略模式
+    pageEllipsisMode: {
+        type: String,
+        default: 'mid',
+        validator: (val) => ['mid', 'both-ends'].includes(val)
+    },
+    // 每页显示条数
+    pageSize: {
+        type: Number,
+        default: 10
+    },
+    // 分页大小控制器选项
+    pageSizeOptions: {
+        type: Array,
+        default: () => [5, 10, 20, 50]
+    },
+    // 透传Select组件属性
+    selectProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示跳转首页尾页页码控制器
+    showFirstAndLastPageBtn: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示跳转页码控制器
+    showJumper: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示页码控制器
+    showPageNumber: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示分页数量控制器
+    showPageSize: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示跳转前后页页码控制器
+    showPreviousAndNextBtn: {
+        type: Boolean,
+        default: true
+    },
+    // 分页组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium'].includes(val)
+    },
+    // 分页组件风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'simple'].includes(val)
+    },
+    // 数据总条数
+    total: {
+        type: Number,
+        default: 0
+    },
+    // 用于自定义总条数呈现内容
+    totalContent: {
+        type: [Boolean, Function],
+        default: true
+    }
+});
+
+const emit = defineEmits(['change']);
+
+// 分页变化事件
+const handleChange = (pageInfo) => {
+    emit('change', pageInfo);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/EbizParkingDashboard.vue

@@ -1,153 +1,153 @@
-<template>
-  <div class="ebiz-parking-dashboard">
-    <t-radio-group v-model="curType" variant="default-filled">
-      <t-radio-button v-for="ele in typeList" :key="ele.value" :value="ele.value">{{ ele.label }}</t-radio-button>
-    </t-radio-group>
-    <div class="cards-grid">
-      <t-tooltip v-for="n in slotIndices" :key="n" :content="tooltipContent(n)" placement="top">
-        <div class="slot-item" @click="onSlotClick(n)">
-          <t-card :bordered="true" class="slot-card">
-            <div class="slot-header">
-              <div class="slot-number">{{ assignedMap[n]?.number || (curType === 'free' ? '0'+n : n) }}</div>
-              <t-tag v-if="assignedMap[n] && assignedMap[n].status === 'CANCELLED'" theme="success" size="small">已分配</t-tag>
-              <t-tag v-else-if="assignedMap[n] && assignedMap[n].status === 'DESTORY'" theme="danger" size="small">已注销</t-tag>
-              <t-tag v-else theme="default" size="small">未分配</t-tag>
-            </div>
-            <div class="slot-body">
-              <div v-if="assignedMap[n]" class="slot-info">
-                <div class="slot-name">{{ assignedMap[n].name || assignedMap[n].employee_info?.name }}</div>
-                <div class="slot-plate">{{ assignedMap[n].plate_number }}</div>
-                <div class="slot-desc">{{ assignedMap[n].fee_type_desc }} · {{ assignedMap[n].location_id_name }}</div>
-                <div class="slot-desc">{{ assignedMap[n].company_name || '-' }}</div>
-              </div>
-              <div v-else class="slot-empty">未分配</div>
-            </div>
-          </t-card>
-        </div>
-      </t-tooltip>
-    </div>
-  </div>
-  
-</template>
-
-<script>
-export default {
-  name: 'EbizParkingDashboard'
-}
-</script>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { Card as TCard, Tag as TTag, Tooltip as TTooltip, RadioGroup as TRadioGroup, RadioButton as TRadioButton } from 'tdesign-vue-next'
-import dataService from '../apiService/simpleDataService'
-
-// 总车位数，用于生成 1..N 的序号列表
-const totalSlots = ref({
-  free: 200,
-  charge: 50
-}) 
-const curType = ref('free')
-
-const typeList = [
-  { label: '免费', value: 'free' },
-  { label: '收费', value: 'charge' },
-]
-
-// 对外事件：点击车位卡片时派发
-const emit = defineEmits(['parkingClick'])
-
-// 已分配车位的原始数据列表
-const assignedList = ref([])
-// 生成 1..totalSlots 的序号数组（用于 v-for 渲染）
-const slotIndices = computed(() => Array.from({ length: totalSlots.value[curType.value] }, (_, i) => i + 1))
-// 将任意值归一化为有效的车位序号（整数），失败返回 null
-const normalizeNumber = (num) => {
-  const s = String(num || '').trim()
-  const n = parseInt(s, 10)
-  return Number.isFinite(n) ? n : null
-}
-
-// 将已分配列表按序号映射为字典，以序号为键，取 create_at 最新的一条记录
-const assignedMap = computed(() => {
-  const map = {}
-  assignedList.value.filter(item => item?.fee_type === curType.value).forEach((item) => {
-    const n = normalizeNumber(item.number)
-    if (!n) return
-    if (n < 1 || n > totalSlots.value[curType.value]) return
-    const prev = map[n]
-    if (!prev || Number(item.create_at || 0) >= Number(prev.create_at || 0)) {
-      map[n] = {
-        ...item,
-        company_name: item?.employee_type === 'inside' ? item?.employee_info?.dept_info?.name : item?.company_name
-      }
-    }
-  })
-  return map
-})
-
-// 将序号格式化为三位数字（如 1 -> 001）String(n).padStart(3, '0')
-const formatSlotNo = (n) => String(n)
-
-// 生成悬浮提示文案：包含序号、人员、车牌、费用类型与场地名称
-const tooltipContent = (n) => {
-  const info = assignedMap.value[n]
-  if (!info) return `车位 ${formatSlotNo(n)}：未分配`
-  const fee = info.fee_type_desc || ''
-  const loc = info.location_id_name || ''
-  const name = info.name || ''
-  const plate = info.plate_number || ''
-  const company = info.company_name || ''
-  return `车位 ${formatSlotNo(n)}：${name} ${plate} · ${fee} · ${loc} · ${company}`
-}
-
-// 点击卡片：向外抛出停车位点击事件，携带序号与可能存在的车位信息
-const onSlotClick = (n) => {
-  const info = assignedMap.value[n] || null
-  emit('parkingClick', { index: n, info })
-}
-
-// 拉取车位分配数据
-const fetchData = () => {
-  dataService
-    .fetch(
-      {
-        page: 1,
-        pageSize: 500,
-        queryParams: {
-          status: 'CANCELLED,DESTORY'
-        }
-      },
-      {
-        key: 'ParkingSpaceApplyDashboard',
-        apiId: 3395,
-        apiType: 0
-      }
-    )
-    .then((res) => {
-      assignedList.value = Array.isArray(res) ? res : Array.isArray(res?.data) ? res.data : []
-    })
-    .catch(() => {
-      assignedList.value = []
-    })
-}
-
-onMounted(fetchData)
-</script>
-
-<style scoped lang="less">
-.ebiz-parking-dashboard { display: flex; flex-direction: column; gap: 12px; }
-.cards-grid { display: grid; gap: 12px;grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
-.slot-item { cursor: pointer; }
-.slot-card { height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
-.slot-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
-.slot-number { font-size: 16px; }
-.slot-body { display: flex; align-items: center; justify-content: center; height: 100%; }
-.slot-info { display: flex; flex-direction: column; gap: 4px; align-items: center; }
-.slot-name { font-size: 16px; font-weight: 600; }
-.slot-plate { font-size: 14px; }
-.slot-desc { font-size: 12px; color: #666; }
-.slot-empty { font-size: 14px; color: #999; }
-:deep(.t-card__body) {
-  padding: 14px 10px;
-}
+<template>
+  <div class="ebiz-parking-dashboard">
+    <t-radio-group v-model="curType" variant="default-filled">
+      <t-radio-button v-for="ele in typeList" :key="ele.value" :value="ele.value">{{ ele.label }}</t-radio-button>
+    </t-radio-group>
+    <div class="cards-grid">
+      <t-tooltip v-for="n in slotIndices" :key="n" :content="tooltipContent(n)" placement="top">
+        <div class="slot-item" @click="onSlotClick(n)">
+          <t-card :bordered="true" class="slot-card">
+            <div class="slot-header">
+              <div class="slot-number">{{ assignedMap[n]?.number || (curType === 'free' ? '0'+n : n) }}</div>
+              <t-tag v-if="assignedMap[n] && assignedMap[n].status === 'CANCELLED'" theme="success" size="small">已分配</t-tag>
+              <t-tag v-else-if="assignedMap[n] && assignedMap[n].status === 'DESTORY'" theme="danger" size="small">已注销</t-tag>
+              <t-tag v-else theme="default" size="small">未分配</t-tag>
+            </div>
+            <div class="slot-body">
+              <div v-if="assignedMap[n]" class="slot-info">
+                <div class="slot-name">{{ assignedMap[n].name || assignedMap[n].employee_info?.name }}</div>
+                <div class="slot-plate">{{ assignedMap[n].plate_number }}</div>
+                <div class="slot-desc">{{ assignedMap[n].fee_type_desc }} · {{ assignedMap[n].location_id_name }}</div>
+                <div class="slot-desc">{{ assignedMap[n].company_name || '-' }}</div>
+              </div>
+              <div v-else class="slot-empty">未分配</div>
+            </div>
+          </t-card>
+        </div>
+      </t-tooltip>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+export default {
+  name: 'EbizParkingDashboard'
+}
+</script>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { Card as TCard, Tag as TTag, Tooltip as TTooltip, RadioGroup as TRadioGroup, RadioButton as TRadioButton } from 'tdesign-vue-next'
+import dataService from '../apiService/simpleDataService'
+
+// 总车位数，用于生成 1..N 的序号列表
+const totalSlots = ref({
+  free: 200,
+  charge: 50
+}) 
+const curType = ref('free')
+
+const typeList = [
+  { label: '免费', value: 'free' },
+  { label: '收费', value: 'charge' },
+]
+
+// 对外事件：点击车位卡片时派发
+const emit = defineEmits(['parkingClick'])
+
+// 已分配车位的原始数据列表
+const assignedList = ref([])
+// 生成 1..totalSlots 的序号数组（用于 v-for 渲染）
+const slotIndices = computed(() => Array.from({ length: totalSlots.value[curType.value] }, (_, i) => i + 1))
+// 将任意值归一化为有效的车位序号（整数），失败返回 null
+const normalizeNumber = (num) => {
+  const s = String(num || '').trim()
+  const n = parseInt(s, 10)
+  return Number.isFinite(n) ? n : null
+}
+
+// 将已分配列表按序号映射为字典，以序号为键，取 create_at 最新的一条记录
+const assignedMap = computed(() => {
+  const map = {}
+  assignedList.value.filter(item => item?.fee_type === curType.value).forEach((item) => {
+    const n = normalizeNumber(item.number)
+    if (!n) return
+    if (n < 1 || n > totalSlots.value[curType.value]) return
+    const prev = map[n]
+    if (!prev || Number(item.create_at || 0) >= Number(prev.create_at || 0)) {
+      map[n] = {
+        ...item,
+        company_name: item?.employee_type === 'inside' ? item?.employee_info?.dept_info?.name : item?.company_name
+      }
+    }
+  })
+  return map
+})
+
+// 将序号格式化为三位数字（如 1 -> 001）String(n).padStart(3, '0')
+const formatSlotNo = (n) => String(n)
+
+// 生成悬浮提示文案：包含序号、人员、车牌、费用类型与场地名称
+const tooltipContent = (n) => {
+  const info = assignedMap.value[n]
+  if (!info) return `车位 ${formatSlotNo(n)}：未分配`
+  const fee = info.fee_type_desc || ''
+  const loc = info.location_id_name || ''
+  const name = info.name || ''
+  const plate = info.plate_number || ''
+  const company = info.company_name || ''
+  return `车位 ${formatSlotNo(n)}：${name} ${plate} · ${fee} · ${loc} · ${company}`
+}
+
+// 点击卡片：向外抛出停车位点击事件，携带序号与可能存在的车位信息
+const onSlotClick = (n) => {
+  const info = assignedMap.value[n] || null
+  emit('parkingClick', { index: n, info })
+}
+
+// 拉取车位分配数据
+const fetchData = () => {
+  dataService
+    .fetch(
+      {
+        page: 1,
+        pageSize: 500,
+        queryParams: {
+          status: 'CANCELLED,DESTORY'
+        }
+      },
+      {
+        key: 'ParkingSpaceApplyDashboard',
+        apiId: 3395,
+        apiType: 0
+      }
+    )
+    .then((res) => {
+      assignedList.value = Array.isArray(res) ? res : Array.isArray(res?.data) ? res.data : []
+    })
+    .catch(() => {
+      assignedList.value = []
+    })
+}
+
+onMounted(fetchData)
+</script>
+
+<style scoped lang="less">
+.ebiz-parking-dashboard { display: flex; flex-direction: column; gap: 12px; }
+.cards-grid { display: grid; gap: 12px;grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
+.slot-item { cursor: pointer; }
+.slot-card { height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
+.slot-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
+.slot-number { font-size: 16px; }
+.slot-body { display: flex; align-items: center; justify-content: center; height: 100%; }
+.slot-info { display: flex; flex-direction: column; gap: 4px; align-items: center; }
+.slot-name { font-size: 16px; font-weight: 600; }
+.slot-plate { font-size: 14px; }
+.slot-desc { font-size: 12px; color: #666; }
+.slot-empty { font-size: 14px; color: #999; }
+:deep(.t-card__body) {
+  padding: 14px 10px;
+}
 </style>