antissoft / lvqianmeiye_ERP

<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="月份">
							<el-date-picker
								v-model="monthQuery"
								type="month"
								placeholder="请选择月份"
								format="yyyyMM"
								value-format="yyyyMM"
								@change="onMonthQueryChange"
								clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="门店">
							<el-select 
								v-model="query.md" 
								placeholder="请选择门店" 
								clearable 
								filterable>
								<el-option
									v-for="store in storeList"
									:key="store.id"
									:label="store.name"
									:value="store.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="金三角">
							<el-input v-model="query.jsj" placeholder="金三角名称" clearable />	
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label=" ">
							<div class="search-buttons">
								<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
								<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
						<el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
                <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
					<el-table-column prop="yf" label="月份" align="center" min-width="120">
						<template slot-scope="scope">
							<el-tag type="primary" size="small">{{ formatMonth(scope.row.yf) }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="md" label="门店" align="left" min-width="150">
						<template slot-scope="scope">
							<div class="store-info">
								<i class="el-icon-shop"></i>
								<span>{{ getStoreName(scope.row.md) }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="jsj" label="金三角" align="left" min-width="180">
						<template slot-scope="scope">
							<div class="team-info">
								<i class="el-icon-user-solid"></i>
								<span>{{ scope.row.jsj }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="成员数量" align="center" min-width="120">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.memberCount > 0" type="success" size="small" effect="dark">
								<i class="el-icon-user"></i>
								{{ scope.row.memberCount }}人
							</el-tag>
							<el-tag v-else type="info" size="small">
								<i class="el-icon-user"></i>
								0人
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" min-width="200">
						<template slot-scope="scope">
							<div class="action-buttons">
								<el-button type="primary" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)" size="mini" plain>编辑</el-button>
								<el-button type="info" icon="el-icon-view" @click="viewDetail(scope.row.id)" size="mini" plain>详情</el-button>
								<el-button type="danger" icon="el-icon-delete" @click="handleDel(scope.row.id)" size="mini" plain>删除</el-button>
							</div>
						</template>
					</el-table-column>
				</NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
            </div>
        </div>
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
	</div>
</template>

<style scoped>
.store-info {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #606266;
}

.store-info i {
	color: #409EFF;
	font-size: 16px;
}

.team-info {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #303133;
	font-weight: 500;
}

.team-info i {
	color: #67C23A;
	font-size: 16px;
}

.action-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.action-buttons .el-button {
	margin: 0;
}

/* 表格行悬停效果 */
.el-table tbody tr:hover > td {
	background-color: #f5f7fa !important;
}

/* 标签样式优化 */
.el-tag {
	border-radius: 12px;
	font-weight: 500;
}

.el-tag i {
	margin-right: 4px;
}

/* 搜索框样式优化 */
.NCC-common-search-box .el-input__inner {
	border-radius: 6px;
}

.NCC-common-search-box .el-button {
	border-radius: 6px;
}

.search-buttons {
	display: flex;
	gap: 8px;
	align-items: center;
	height: 32px;
}

/* 表格容器样式 */
.NCC-common-layout-main {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* 头部操作区域 */
.NCC-common-head {
	background: #f8f9fa;
	padding: 16px 20px;
	border-bottom: 1px solid #dee2e6;
}

/* 按钮组样式 */
.NCC-common-head .el-button {
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.NCC-common-head .el-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 分页样式 */
.pagination {
	margin-top: 20px;
	text-align: center;
}
</style>
<script>
    import request from '@/utils/request'
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
    import NCCForm from './Form'
    import ExportBox from './ExportBox'
    import { previewDataInterface } from '@/api/systemData/dataInterface'
	export default {
        components: { NCCForm, ExportBox },
        data() {
            return {
                showAll: false,
				query: {
                    yf:undefined,
                    md:undefined,
                    jsj:undefined,
				},
				monthQuery: null, // 月份选择器的值
				storeList: [], // 门店列表
                list: [],
                listLoading: true,
                multipleSelection: [], 
                total: 0,
                storeMap: {}, // 门店ID到名称的映射
                listQuery: {
                    currentPage: 1,
                    pageSize: 20,
					sort: "desc",
                    sidx: "",
                },
                formVisible: false,
                exportBoxVisible: false,
                columnList: [
                    { prop: 'id', label: '主键' },
                    { prop: 'yf', label: '月份' },
                    { prop: 'md', label: '门店' },
                    { prop: 'jsj', label: '金三角' },
				],
			}
        },
		computed: {},
		created() {
			this.loadStoreList()
			this.initData()
		},
		methods: {
			initData() {
                this.listLoading = true;
                let _query = {
                    ...this.listQuery,
                    ...this.query
                };
                let query = {}
                for (let key in _query) {
                    if (Array.isArray(_query[key])) {
                        query[key] = _query[key].join()
                    } else {
                        query[key] = _query[key]
                    }
                }
                request({
                    url: `/api/Extend/LqYcsdJsj`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                    
                    // 加载门店映射
                    this.loadStoreMap()
                    // 为每个金三角加载成员数量
                    this.loadMemberCounts()
                })
            },
			handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/Extend/LqYcsdJsj/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },
            viewDetail(id) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.NCCForm.init(id, true)
                })
            },
            loadMemberCounts() {
                // 批量加载成员数量
                const promises = this.list.map(item => {
                    return request({
                        url: `/api/Extend/LqYcsdJsj/${item.id}/detail`,
                        method: 'GET'
                    }).then(res => {
                        this.$set(item, 'memberCount', res.data.members ? res.data.members.length : 0)
                    }).catch(() => {
                        this.$set(item, 'memberCount', 0)
                    })
                })
                
                Promise.all(promises).then(() => {
                    // 所有成员数量加载完成
                })
            },
            loadStoreMap() {
                // 加载门店映射
                request({
                    url: '/api/Extend/LqMdxx/Selector',
                    method: 'GET'
                }).then(res => {
                    this.storeMap = {}
                    res.data.list.forEach(store => {
                        this.storeMap[store.id] = store.fullName
                    })
                }).catch(() => {
                    this.storeMap = {}
                })
            },
            getStoreName(storeId) {
                return this.storeMap[storeId] || storeId || '未知门店'
            },
            formatMonth(monthStr) {
                if (!monthStr || monthStr.length !== 6) return monthStr
                const year = monthStr.substring(0, 4)
                const month = monthStr.substring(4, 6)
                return `${year}年${month}月`
            },
            onMonthQueryChange(value) {
                // 月份选择器变化时更新query.yf
                this.query.yf = value
            },
            loadStoreList() {
                // 加载门店列表
                request({
                    url: '/api/Extend/LqMdxx/Selector',
                    method: 'GET'
                }).then(res => {
                    this.storeList = res.data.list.map(item => ({
                        id: item.id,
                        name: item.fullName
                    }))
                }).catch(() => {
                    this.storeList = []
                })
            },
			handleSelectionChange(val) {
                const res = val.map(item => item.id)
                this.multipleSelection = res
            },
            handleBatchRemoveDel() {
                if (!this.multipleSelection.length) {
                    this.$message({
                        type: 'error',
                        message: '请选择一条数据',
                        duration: 1500,
                    })
                    return
                }
                const ids = this.multipleSelection
                this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/Extend/LqYcsdJsj/batchRemove`,
                        method: 'POST',
                        data: ids ,
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => { })
            },
			addOrUpdateHandle(id, isDetail) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.NCCForm.init(id, isDetail)
                })
            },
			exportData() {
                this.exportBoxVisible = true
                this.$nextTick(() => {
                    this.$refs.ExportBox.init(this.columnList)
                })
            },
            download(data) {
                let query = { ...data, ...this.listQuery, ...this.query }
                request({
                    url: `/api/Extend/LqYcsdJsj/Actions/Export`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    if (!res.data.url) return
                    window.location.href = this.define.comUrl + res.data.url
                    this.$refs.ExportBox.visible = false
                    this.exportBoxVisible = false
                })
            },
			search() {
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.formVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.monthQuery = null
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            }
		}
    }
</script>