antis-ncc-admin/src/views/lqYcsdMdmbsd/index.vue

<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="5">
						<el-form-item label="门店编码">
							<el-input 
								v-model="query.mdbm" 
								placeholder="请输入门店编码" 
								clearable 
								prefix-icon="el-icon-search"
								style="border-radius: 6px;" 
							/>	
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="门店名称">
							<el-input 
								v-model="query.dm" 
								placeholder="请输入门店名称" 
								clearable 
								prefix-icon="el-icon-search"
								style="border-radius: 6px;" 
							/>	
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="单据门店">
							<el-input 
								v-model="query.djmd" 
								placeholder="请输入单据门店" 
								clearable 
								prefix-icon="el-icon-search"
								style="border-radius: 6px;" 
							/>	
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="城市">
							<el-input 
								v-model="query.cs" 
								placeholder="请输入城市" 
								clearable 
								prefix-icon="el-icon-search"
								style="border-radius: 6px;" 
							/>	
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item>
							<div class="search-buttons" style="height: 32px;">
								<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 class="NCC-common-head-left">
						<h3 class="NCC-common-head-title">
							<i class="el-icon-target"></i>
							门店目标设置
						</h3>
					</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"
				>
					<el-table-column prop="mdbm" label="门店编码" align="left" width="120" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-tag size="small" type="primary">{{ scope.row.mdbm }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="dm" label="门店名称" align="left" min-width="150" show-overflow-tooltip>
						<template slot-scope="scope">
							<span class="store-name">{{ scope.row.dm }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="djmd" label="单据门店" align="left" width="150" show-overflow-tooltip />
					<el-table-column prop="cs" label="城市" align="left" width="100" show-overflow-tooltip />
					
					<!-- 目标字段列 -->
					<el-table-column label="固定-生命线" align="center" width="120">
						<template slot-scope="scope">
							<span v-if="scope.row.xsyj" class="target-value">{{ formatMoney(scope.row.xsyj) }}元</span>
							<span v-else class="no-data">未设置</span>
						</template>
					</el-table-column>
					
					<el-table-column label="固定-消耗业绩" align="center" width="120">
						<template slot-scope="scope">
							<span v-if="scope.row.xhyj" class="target-value">{{ formatMoney(scope.row.xhyj) }}元</span>
							<span v-else class="no-data">未设置</span>
						</template>
					</el-table-column>
					
					<el-table-column label="固定-项目数" align="center" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.xms" class="target-value">{{ scope.row.xms }}个</span>
							<span v-else class="no-data">-</span>
						</template>
					</el-table-column>
                    <el-table-column label="固定-人头" align="center" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.rc" class="target-value">{{ scope.row.rc }}次</span>
							<span v-else class="no-data">-</span>
						</template>
					</el-table-column>
					
					<el-table-column label="阶段一人头" align="center" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.rt1" class="target-value">{{ scope.row.rt1 }}人</span>
							<span v-else class="no-data">-</span>
						</template>
					</el-table-column>
					
					<el-table-column label="阶段二人头" align="center" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.rt2" class="target-value">{{ scope.row.rt2 }}人</span>
							<span v-else class="no-data">-</span>
						</template>
					</el-table-column>
					
					
					<el-table-column label="操作" fixed="right" width="120" align="center">
						<template slot-scope="scope">
							<el-button 
								type="text" 
								icon="el-icon-edit" 
								@click="editHandle(scope.row)"
								class="action-btn"
							>
								设置目标
							</el-button>
						</template>
					</el-table-column>
				</NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
            </div>
        </div>
		<!-- 目标设置弹窗 -->
		<TargetSettingDialog 
			:visible.sync="dialogVisible" 
			:store-data="currentStoreData"
			@refresh="initData"
		/>
	</div>
</template>
<script>
    import request from '@/utils/request'
    import TargetSettingDialog from './components/TargetSettingDialog.vue'
    
	export default {
        components: {
            TargetSettingDialog
        },
        data() {
            return {
				query: {
                    mdbm: undefined,
                    dm: undefined,
                    djmd: undefined,
                    cs: undefined
				},
                list: [],
                listLoading: true,
                total: 0,
                listQuery: {
                    currentPage: 1,
                    pageSize: 20,
					sort: "desc",
                    sidx: "",
                },
                dialogVisible: false,
                currentStoreData: {}
			}
        },
		computed: {},
		created() {
			this.initData()
		},
		methods: {
			// 格式化金额显示
			formatMoney(value) {
				if (!value) return '0.00'
				return parseFloat(value).toFixed(2)
			},
			// 编辑处理
			editHandle(row) {
				this.currentStoreData = { ...row }
				this.dialogVisible = true
			},
			async 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]
                    }
                }
                
                try {
                    const res = await request({
                        url: `/api/Extend/LqMdxx`,
                        method: 'GET',
                        data: query
                    })
                    
                    this.list = res.data.list
                    this.total = res.data.pagination.total
                    
                } catch (error) {
                    console.error('加载门店数据失败:', error)
                } finally {
                    this.listLoading = false
                }
            },
			search() {
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            }
		}
	}
</script>
<style lang="scss" scoped>
	// 页面头部样式
	.NCC-common-head-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.NCC-common-head-title {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
		color: #303133;
		display: flex;
		align-items: center;
		gap: 8px;
		i {
			color: #409EFF;
			font-size: 20px;
		}
	}
	// 表格样式
	.store-name {
		font-weight: 500;
		color: #303133;
	}
	.target-value {
		font-weight: 500;
		color: #67C23A;
	}
	.no-data {
		color: #C0C4CC;
		font-style: italic;
	}
	.action-btn {
		padding: 4px 8px;
		margin: 0 2px;
		
		&:hover {
			background-color: #f5f7fa;
		}
	}
	// 搜索区域样式
	.search-buttons {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	// 响应式设计
	@media (max-width: 768px) {
		.NCC-common-head {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
			.NCC-common-head-right {
				width: 100%;
				justify-content: flex-start;
			}
		}
		.el-col {
			margin-bottom: 16px;
		}
	}
	// 表格响应式
	@media (max-width: 1200px) {
		.NCC-table {
			.el-table {
				font-size: 12px;
			}
		}
	}
</style>