|
|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <m-table
|
|
|
+ :card-title="cardTitle"
|
|
|
+ :items="items"
|
|
|
+ :headers="headers"
|
|
|
+ :total="total"
|
|
|
+ :page-size="pageInfo.size"
|
|
|
+ :page-current="pageInfo.current"
|
|
|
+ v-bind="$attrs"
|
|
|
+ @page-change="onPageChange"
|
|
|
+ @sort-change="onSortChange"
|
|
|
+ @expand-change="onExpandChange"
|
|
|
+ >
|
|
|
+ <template #card-tools>
|
|
|
+ <slot name="tool"></slot>
|
|
|
+ </template>
|
|
|
+ <template #expand="{ row }">
|
|
|
+ <div class="pa-3">
|
|
|
+ <el-form label-position="right" class="m-form" label-width="100px">
|
|
|
+ <el-form-item label="福利名称">
|
|
|
+ <el-tag>{{ row.subsidyName }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-tag>{{ row.createDate }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规则配置">
|
|
|
+ <div v-loading="expandLoading[row.subsidyId]">
|
|
|
+ <m-card
|
|
|
+ v-for="item in expandData[row.subsidyId]"
|
|
|
+ :key="item.subsidyId"
|
|
|
+ class="mb-3"
|
|
|
+ >
|
|
|
+ <el-form label-position="right" class="m-form" label-width="100px">
|
|
|
+ <el-form-item label="配置机构">
|
|
|
+ <div>
|
|
|
+ <div class="organization-tags">
|
|
|
+ <el-tag
|
|
|
+ v-for="(name, i) in visibleOrganizations(item.subsidyOrganizationNames, item.subsidyId)"
|
|
|
+ :key="i"
|
|
|
+ type="primary"
|
|
|
+ class="mr-3 mb-2"
|
|
|
+ >
|
|
|
+ {{ name }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.subsidyOrganizationNames && item.subsidyOrganizationNames.length > maxVisibleTags" class="expand-toggle">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="toggleOrganizationExpansion(item.subsidyId)"
|
|
|
+ class="p-0"
|
|
|
+ >
|
|
|
+ {{ expandedOrganizations[item.subsidyId] ? '收起' : `展开更多 (${item.subsidyOrganizationNames.length - maxVisibleTags}个)` }}
|
|
|
+ <i :class="expandedOrganizations[item.subsidyId] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="ml-1"></i>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="福利薪资">
|
|
|
+ <el-tag type="primary">{{ item.subsidySalary }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述">
|
|
|
+ <span>{{ item.subsidyCheck }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </m-card>
|
|
|
+ <div v-if="!expandData[row.subsidyId] || expandData[row.subsidyId].length === 0" class="text-center text-gray-500">
|
|
|
+ 暂无规则配置
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </m-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getWelfarePage,
|
|
|
+ getWelfareDetail
|
|
|
+} from '@/api/welfare'
|
|
|
+export default {
|
|
|
+ name: 'history-list-template',
|
|
|
+ props: {
|
|
|
+ cardTitle: {
|
|
|
+ type: String,
|
|
|
+ default: '历史记录'
|
|
|
+ },
|
|
|
+ showSearch: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ history: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ uuid: String
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ searchQuery: {
|
|
|
+ subsidyName: null
|
|
|
+ },
|
|
|
+ searchItems: [
|
|
|
+ {
|
|
|
+ label: '福利名称',
|
|
|
+ prop: 'subsidyName',
|
|
|
+ type: 'input',
|
|
|
+ options: {
|
|
|
+ placeholder: '请输入福利名称'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ items: [],
|
|
|
+ headers: [
|
|
|
+ { type: 'expand', prop: 'expand' },
|
|
|
+ { label: '福利名称', prop: 'subsidyName' },
|
|
|
+ { label: '福利描述', prop: 'subsidyTag' },
|
|
|
+ { label: '创建日期', prop: 'createDate' }
|
|
|
+ ],
|
|
|
+ loading: false,
|
|
|
+ total: 0,
|
|
|
+ pageInfo: {
|
|
|
+ current: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ orders: [
|
|
|
+ {
|
|
|
+ asc: false,
|
|
|
+ column: 'subsidy_id'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ expandData: {},
|
|
|
+ expandLoading: {},
|
|
|
+ maxVisibleTags: 8, // 初始显示8个标签
|
|
|
+ expandedOrganizations: {} // 记录哪些机构列表已展开
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.onInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async onInit () {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ const { data } = await getWelfarePage({
|
|
|
+ page: {
|
|
|
+ ...this.pageInfo,
|
|
|
+ orders: this.orders
|
|
|
+ },
|
|
|
+ entity: {
|
|
|
+ ...this.searchQuery,
|
|
|
+ history: this.history ? 1 : 0,
|
|
|
+ uuid: this.uuid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.items = data.records
|
|
|
+ this.total = data.total
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error(error)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSearch () {
|
|
|
+ this.pageInfo.current = 1
|
|
|
+ this.onInit()
|
|
|
+ },
|
|
|
+ onPageChange (page) {
|
|
|
+ this.pageInfo.current = page
|
|
|
+ this.onInit()
|
|
|
+ },
|
|
|
+ onSortChange (sort) {
|
|
|
+ this.orders = sort
|
|
|
+ this.onInit()
|
|
|
+ },
|
|
|
+ async loadExpandData (subsidyId) {
|
|
|
+ if (this.expandData[subsidyId]) {
|
|
|
+ return // 数据已加载，直接返回
|
|
|
+ }
|
|
|
+ this.$set(this.expandLoading, subsidyId, true)
|
|
|
+ try {
|
|
|
+ const { data } = await getWelfareDetail({ subsidyId })
|
|
|
+ this.$set(this.expandData, subsidyId, data.subsidyItems || [])
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error(error)
|
|
|
+ this.$set(this.expandData, subsidyId, [])
|
|
|
+ } finally {
|
|
|
+ this.$set(this.expandLoading, subsidyId, false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onExpandChange (row, expandedRows) {
|
|
|
+ // 当行展开时加载数据
|
|
|
+ if (expandedRows.includes(row)) {
|
|
|
+ this.loadExpandData(row.subsidyId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showExpandData (row) {
|
|
|
+ // 手动触发展开行
|
|
|
+ this.loadExpandData(row.subsidyId)
|
|
|
+ },
|
|
|
+ visibleOrganizations (organizations, subsidyId) {
|
|
|
+ if (!organizations || organizations.length === 0) return []
|
|
|
+ if (this.expandedOrganizations[subsidyId]) {
|
|
|
+ return organizations
|
|
|
+ }
|
|
|
+ return organizations.slice(0, this.maxVisibleTags)
|
|
|
+ },
|
|
|
+ toggleOrganizationExpansion (subsidyId) {
|
|
|
+ this.$set(this.expandedOrganizations, subsidyId, !this.expandedOrganizations[subsidyId])
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.organization-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.expand-toggle {
|
|
|
+ margin-top: 8px;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ color: #409EFF;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #66b1ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Xiao_123