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="editMembers(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" />

  		<MemberEditDialog v-if="memberDialogVisible" ref="MemberEditDialog" @close="memberDialogVisible = false" />

  	</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 MemberEditDialog from './components/member-edit-dialog.vue'

      import { previewDataInterface } from '@/api/systemData/dataInterface'
  	export default {

          components: { NCCForm, ExportBox, MemberEditDialog },

          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,

                  memberDialogVisible: false,

                  columnList: [
                      { prop: 'id', label: '主键' },
                      { prop: 'yf', label: '月份' },
                      { prop: 'md', label: '门店' },
                      { prop: 'jsj', label: '金三角' },

  				],
  			}
          },
  		computed: {},
  		created() {

  			// 设置默认月份为本月
  			this.setDefaultMonth()

  			this.loadStoreList()

  			this.initData()
  		},
  		methods: {

  			setDefaultMonth() {
  				// 获取当前月份，格式：yyyyMM
  				const now = new Date()
  				const year = now.getFullYear()
  				const month = String(now.getMonth() + 1).padStart(2, '0')
  				const currentMonth = `${year}${month}`
  				this.monthQuery = currentMonth
  				this.query.yf = currentMonth
  			},

  			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(() => {
                  });
              },

              editMembers(id) {
                  this.memberDialogVisible = true
                  this.$nextTick(() => {
                      this.$refs.MemberEditDialog.init(id)
                  })
              },

              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() {

                  // 重置时恢复默认月份为本月
                  this.setDefaultMonth()
                  this.query.md = undefined
                  this.query.jsj = undefined

                  this.listQuery = {
                      currentPage: 1,
                      pageSize: 20,
                      sort: "desc",
                      sidx: "",
                  }
                  this.initData()
              }
  		}
      }
  </script>