zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

为部分页面添加部门树组件

Browse Source
This commit is contained in:
weiwei committed 2025-02-18 19:30:53 +08:00
1 parent 8c17c59904
commit 6382d4fcbd
7 files changed
+447 -453
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/hard/hard-dept-total/index.vue
+101 -88
View File
@@ -1,86 +1,94 @@
<template>
<div class="layout-padding">
<div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item class="w100" label="时间" prop="createTimeList">
<el-date-picker
v-model="state.queryForm.createTimeList"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<right-toolbar
:search="false"
v-model:showSearch="showSearch"
:export="'hard_hardTotal_export_dept'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
:summary-method="getSummaries"
show-summary
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
<DraggableDepTree
ref="draggableDepTreeRef"
placeholder="请输入部门名称"
:show-expand="true"
@getSelectNode="handleGetSelectNode"
switch-inactive-text="当前部门"
switch-active-text="当前部门及子部门"
:defaultTreeWidth="20"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="80" />
<el-table-column prop="deptName" min-width="150" label="部门" />
<el-table-column prop="walletPrice" label="充值金额" align="center">
<template #default="{ row }">
<div :class="{ 'color-success': row.walletPrice != 0 }">{{ displayPrice(row.walletPrice) }}</div>
</template>
</el-table-column>
<el-table-column prop="walletCount" label="充值次数" align="center">
<template #default="{ row }">
<div :class="{ 'color-success': row.walletCount != 0 }">{{ row.walletCount }}次</div>
</template>
</el-table-column>
<el-table-column prop="orderPayPrice" label="消费金额" align="center">
<template #default="{ row }">
<div :class="{ 'color-primary': row.orderPayPrice != 0 }">{{ displayPrice(row.orderPayPrice) }}</div>
</template>
</el-table-column>
<el-table-column prop="orderPayCount" label="消费次数" align="center">
<template #default="{ row }">
<div :class="{ 'color-primary': row.orderPayCount != 0 }">{{ row.orderPayCount }}次</div>
</template>
</el-table-column>
<el-table-column prop="orderRefundPrice" label="退款金额" align="center">
<template #default="{ row }">
<div :class="{ 'color-danger': row.orderRefundPrice != 0 }">
{{ displayPrice(row.orderRefundPrice) }}
<template #default>
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item class="w100" label="时间" prop="createTimeList">
<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<right-toolbar
:search="false"
v-model:showSearch="showSearch"
:export="'hard_hardTotal_export_dept'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</template>
</el-table-column>
<el-table-column prop="orderRefundCont" label="退款次数" align="center">
<template #default="{ row }">
<div :class="{ 'color-danger': row.orderRefundCont != 0 }">{{ row.orderRefundCont }}次</div>
</template>
</el-table-column>
<el-table-column v-if="false" label="操作" width="300"> </el-table-column>
</el-table>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
:summary-method="getSummaries"
show-summary
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="80" />
<el-table-column prop="deptName" min-width="150" label="部门" />
<el-table-column prop="walletPrice" label="充值金额" align="center">
<template #default="{ row }">
<div :class="{ 'color-success': row.walletPrice != 0 }">{{ displayPrice(row.walletPrice) }}</div>
</template>
</el-table-column>
<el-table-column prop="walletCount" label="充值次数" align="center">
<template #default="{ row }">
<div :class="{ 'color-success': row.walletCount != 0 }">{{ row.walletCount }}次</div>
</template>
</el-table-column>
<el-table-column prop="orderPayPrice" label="消费金额" align="center">
<template #default="{ row }">
<div :class="{ 'color-primary': row.orderPayPrice != 0 }">{{ displayPrice(row.orderPayPrice) }}</div>
</template>
</el-table-column>
<el-table-column prop="orderPayCount" label="消费次数" align="center">
<template #default="{ row }">
<div :class="{ 'color-primary': row.orderPayCount != 0 }">{{ row.orderPayCount }}次</div>
</template>
</el-table-column>
<el-table-column prop="orderRefundPrice" label="退款金额" align="center">
<template #default="{ row }">
<div :class="{ 'color-danger': row.orderRefundPrice != 0 }">
{{ displayPrice(row.orderRefundPrice) }}
</div>
</template>
</el-table-column>
<el-table-column prop="orderRefundCont" label="退款次数" align="center">
<template #default="{ row }">
<div :class="{ 'color-danger': row.orderRefundCont != 0 }">{{ row.orderRefundCont }}次</div>
</template>
</el-table-column>
<el-table-column v-if="false" label="操作" width="300"> </el-table-column>
</el-table>
</template>
</DraggableDepTree>
</div>
</div>
</template>
@@ -97,6 +105,8 @@ const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const draggableDepTreeRef = ref() // 树组件ref引用
// 表格变量
const state: BasicTableProps = reactive<BasicTableProps>({
isPage: false,
@@ -105,8 +115,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
})
// table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
useTable(state)
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
// 导出excel
const exportExcel = () => {
@@ -115,14 +124,7 @@ const exportExcel = () => {
const getSummaries = (param: any) => {
const { columns, data } = param
const totalColumns = [
"walletPrice",
"walletCount",
"orderPayPrice",
"orderPayCount",
"orderRefundPrice",
"orderRefundCont",
]
const totalColumns = ["walletPrice", "walletCount", "orderPayPrice", "orderPayCount", "orderRefundPrice", "orderRefundCont"]
const totalRow = Array.from({ length: columns.length })
columns.forEach((i: any, index: number) => {
if (totalColumns.includes(i.property)) {
@@ -152,6 +154,17 @@ const resetQuery = () => {
queryRef.value?.resetFields()
// 清空多选
selectObjs.value = []
state.queryForm.deptId = ""
state.queryForm.deptIds = []
draggableDepTreeRef.value.resetData()
getDataList()
}
// 树节点选择时
const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
state.queryForm.deptId = curClickedNode.id
state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
state.queryForm.isDeepDept = isDeepTree
getDataList()
}
</script>
src/views/hard/hard-sb/index.vue
+91 -67
View File
@@ -1,75 +1,87 @@
<template>
<div class="layout-padding">
<div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item class="w100" label="用餐时间段" prop="hourType">
<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item class="w100" label="创建时间" prop="payTimeList">
<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
</el-form-item>
</el-col>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<right-toolbar
:search="false"
v-model:showSearch="showSearch"
:export="'hard_hardTotal_export_sb'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
:summary-method="getSummaries"
show-summary
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
<DraggableDepTree
ref="draggableDepTreeRef"
placeholder="请输入部门名称"
:show-expand="true"
@getSelectNode="handleGetSelectNode"
switch-inactive-text="当前部门"
switch-active-text="当前部门及子部门"
:defaultTreeWidth="20"
>
<el-table-column type="selection" width="80" align="center" />
<el-table-column type="index" label="#" width="50" />
<el-table-column label="设备" align="center">
<template #default="{ row }">
<div class="flex flex-row items-center justify-center">
<div class="mr-2">{{ row.hardName }}</div>
<dict-tag :options="hard_type" :value="row.hardType" />
<template #default>
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item class="w100" label="用餐时间段" prop="hourType">
<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item class="w100" label="创建时间" prop="payTimeList">
<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
</el-form-item>
</el-col>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<right-toolbar
:search="false"
v-model:showSearch="showSearch"
:export="'hard_hardTotal_export_sb'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</template>
</el-table-column>
<el-table-column label="商户" align="center" prop="merchantName" />
<el-table-column label="总消费金额" align="center" prop="totalPayPrice">
<template #default="{ row }">
<span class="color-success">
{{ displayPrice(row.totalPayPrice) }}
</span>
</template>
</el-table-column>
<el-table-column label="总消费次数" align="center" prop="totalPayCount">
<template #default="{ row }">
<span class="color-primary">
{{ row.totalPayCount }}
</span>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
:summary-method="getSummaries"
show-summary
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
>
<el-table-column type="selection" width="80" align="center" />
<el-table-column type="index" label="#" width="50" />
<el-table-column label="设备" align="center">
<template #default="{ row }">
<div class="flex flex-row items-center justify-center">
<div class="mr-2">{{ row.hardName }}</div>
<dict-tag :options="hard_type" :value="row.hardType" />
</div>
</template>
</el-table-column>
<el-table-column label="商户" align="center" prop="merchantName" />
<el-table-column label="总消费金额" align="center" prop="totalPayPrice">
<template #default="{ row }">
<span class="color-success">
{{ displayPrice(row.totalPayPrice) }}
</span>
</template>
</el-table-column>
<el-table-column label="总消费次数" align="center" prop="totalPayCount">
<template #default="{ row }">
<span class="color-primary">
{{ row.totalPayCount }}
</span>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>
</DraggableDepTree>
</div>
</div>
</template>
@@ -87,6 +99,7 @@ const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const draggableDepTreeRef = ref() // 树组件ref引用
// 定义查询字典
const { hard_type } = useDict("hard_type")
@@ -131,6 +144,9 @@ const resetQuery = () => {
queryRef.value?.resetFields()
// 清空多选
selectObjs.value = []
state.queryForm.deptId = ""
state.queryForm.deptIds = []
draggableDepTreeRef.value.resetData()
getDataList()
}
@@ -139,4 +155,12 @@ const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length
}
// 树节点选择时
const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
state.queryForm.deptId = curClickedNode.id
state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
state.queryForm.isDeepDept = isDeepTree
getDataList()
}
</script>
src/views/hard/hard-sh/index.vue
+84 -60
View File
@@ -1,67 +1,79 @@
<template>
<div class="layout-padding">
<div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item class="w100" label="用餐时间段" prop="hourType">
<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item class="w100" label="创建时间" prop="payTimeList">
<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
</el-form-item>
</el-col>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<right-toolbar
:search="false"
v-model:showSearch="showSearch"
:export="'wallet_walletTransaction_export'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:summary-method="getSummaries"
show-summary
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
<DraggableDepTree
ref="draggableDepTreeRef"
placeholder="请输入部门名称"
:show-expand="true"
@getSelectNode="handleGetSelectNode"
switch-inactive-text="当前部门"
switch-active-text="当前部门及子部门"
:defaultTreeWidth="20"
>
<el-table-column type="selection" width="80" align="center" />
<el-table-column type="index" label="#" width="50" />
<el-table-column label="商户" align="center" prop="merchantName" />
<el-table-column label="总消费金额" align="center" prop="totalPayPrice">
<template #default="{ row }">
<span class="color-success">
{{ displayPrice(row.totalPayPrice) }}
</span>
</template>
</el-table-column>
<el-table-column label="总消费次数" align="center" prop="totalPayCount">
<template #default="{ row }">
<span class="color-primary">
{{ row.totalPayCount }}
</span>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
<template #default>
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item class="w100" label="用餐时间段" prop="hourType">
<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item class="w100" label="创建时间" prop="payTimeList">
<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
</el-form-item>
</el-col>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<right-toolbar
:search="false"
v-model:showSearch="showSearch"
:export="'wallet_walletTransaction_export'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:summary-method="getSummaries"
show-summary
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
>
<el-table-column type="selection" width="80" align="center" />
<el-table-column type="index" label="#" width="50" />
<el-table-column label="商户" align="center" prop="merchantName" />
<el-table-column label="总消费金额" align="center" prop="totalPayPrice">
<template #default="{ row }">
<span class="color-success">
{{ displayPrice(row.totalPayPrice) }}
</span>
</template>
</el-table-column>
<el-table-column label="总消费次数" align="center" prop="totalPayCount">
<template #default="{ row }">
<span class="color-primary">
{{ row.totalPayCount }}
</span>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>
</DraggableDepTree>
</div>
</div>
</template>
@@ -78,6 +90,7 @@ const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const draggableDepTreeRef = ref() // 树组件ref引用
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
@@ -93,6 +106,9 @@ const resetQuery = () => {
queryRef.value?.resetFields()
// 清空多选
selectObjs.value = []
state.queryForm.deptId = ""
state.queryForm.deptIds = []
draggableDepTreeRef.value.resetData()
getDataList()
}
@@ -127,4 +143,12 @@ const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length
}
// 树节点选择时
const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
state.queryForm.deptId = curClickedNode.id
state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
state.queryForm.isDeepDept = isDeepTree
getDataList()
}
</script>