antissoft / lvqianmeiye_ERP

<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2>总经理门店生命线设置</h2>
        <p class="page-desc">管理总经理对各门店的生命线设置，支持3个生命线级别配置</p>
      </div>
      <div class="header-right">
        <el-button 
          type="primary" 
          icon="el-icon-plus"
          @click="showBatchCreateDialog"
        >
          一键创建
        </el-button>
        <el-button 
          type="primary" 
          icon="el-icon-refresh-left"
          @click="showSyncDialog"
        >
          同步上月数据
        </el-button>
        <el-button 
          type="primary" 
          icon="el-icon-plus" 
          @click="handleAdd"
          :loading="loading"
        >
          新增
        </el-button>
        <el-button 
          icon="el-icon-refresh" 
          @click="getList"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
        <el-form-item label="总经理" prop="generalManagerId">
          <el-select 
            v-model="queryParams.generalManagerId" 
            placeholder="请选择总经理"
            clearable
            filterable
            style="width: 200px"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="`${user.realName} (${user.gw || '无岗位'})`"
              :value="user.id"
            >
              <span style="float: left">{{ user.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ user.gw || '无岗位' }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店" prop="storeId">
          <el-select 
            v-model="queryParams.storeId" 
            placeholder="请选择门店"
            clearable
            filterable
            style="width: 200px"
          >
            <el-option
              v-for="store in storeList"
              :key="store.id"
              :label="store.dm"
              :value="store.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="月份" prop="month">
          <el-date-picker
            v-model="queryParams.month"
            type="month"
            placeholder="选择月份"
            format="yyyyMM"
            value-format="yyyyMM"
          
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <NCC-table 
        v-loading="loading" 
        :data="list" 
        border 
        stripe
        height="calc(100vh - 500px)"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <!-- 总经理 -->
        <el-table-column label="总经理" width="140" align="center">
          <template slot-scope="scope">
            <div class="user-info">
              <i class="el-icon-user-solid user-icon"></i>
              <span>{{ getGeneralManagerName(scope.row.generalManagerId) || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 总经理类型 -->
        <el-table-column label="总经理类型" width="140" align="center">
          <template slot-scope="scope">
            <div class="manager-type-item">
              <i class="el-icon-user-solid manager-type-icon"></i>
              <span>{{ scope.row.managerTypeName || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 门店名称 -->
        <el-table-column label="门店名称" width="160" align="center">
          <template slot-scope="scope">
            <div class="store-name">
              <i class="el-icon-shop store-icon"></i>
              <span>{{ getStoreName(scope.row.storeId) || '无' }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- 月份 -->
        <el-table-column label="月份" width="120" align="center">
          <template slot-scope="scope">
            <div class="month-item">
              <i class="el-icon-date month-icon"></i>
              <span>{{ formatMonth(scope.row.month) || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 生命线1 -->
        <el-table-column label="生命线1" align="center" width="140">
          <template slot-scope="scope">
            <div class="life-line-item">
              <i class="el-icon-money life-line-icon"></i>
              <span v-if="scope.row.lifeline1" class="amount">{{ formatMoney(scope.row.lifeline1) }}元</span>
              <span v-else class="no-data">无</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 提成比例1 -->
        <el-table-column label="提成比例1" align="center" width="120">
          <template slot-scope="scope">
            <div class="ratio-item">
              <i class="el-icon-percent ratio-icon"></i>
              <span v-if="scope.row.commissionRate1 !== null && scope.row.commissionRate1 !== undefined" class="ratio">{{ scope.row.commissionRate1 }}%</span>
              <span v-else class="no-data">无</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 生命线2 -->
        <el-table-column label="生命线2" align="center" width="140">
          <template slot-scope="scope">
            <div class="life-line-item">
              <i class="el-icon-money life-line-icon"></i>
              <span v-if="scope.row.lifeline2" class="amount">{{ formatMoney(scope.row.lifeline2) }}元</span>
              <span v-else class="no-data">无</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 提成比例2 -->
        <el-table-column label="提成比例2" align="center" width="120">
          <template slot-scope="scope">
            <div class="ratio-item">
              <i class="el-icon-percent ratio-icon"></i>
              <span v-if="scope.row.commissionRate2 !== null && scope.row.commissionRate2 !== undefined" class="ratio">{{ scope.row.commissionRate2 }}%</span>
              <span v-else class="no-data">无</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 生命线3 -->
        <el-table-column label="生命线3" align="center" width="140">
          <template slot-scope="scope">
            <div class="life-line-item">
              <i class="el-icon-money life-line-icon"></i>
              <span v-if="scope.row.lifeline3" class="amount">{{ formatMoney(scope.row.lifeline3) }}元</span>
              <span v-else class="no-data">无</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 提成比例3 -->
        <el-table-column label="提成比例3" align="center" width="120">
          <template slot-scope="scope">
            <div class="ratio-item">
              <i class="el-icon-percent ratio-icon"></i>
              <span v-if="scope.row.commissionRate3 !== null && scope.row.commissionRate3 !== undefined" class="ratio">{{ scope.row.commissionRate3 }}%</span>
              <span v-else class="no-data">无</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 备注 -->
        <el-table-column label="备注" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="remark-item">
              <i class="el-icon-document remark-icon"></i>
              <span>{{ scope.row.remark || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 操作 -->
        <el-table-column label="操作" width="180" align="left" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button 
                type="text" 
                icon="el-icon-edit" 
                @click="handleEdit(scope.row)"
                size="small"
                class="edit-btn"
              >
                编辑
              </el-button>
              <el-button 
                type="text" 
                icon="el-icon-delete" 
                @click="handleDelete(scope.row)"
                size="small"
                class="delete-btn"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </NCC-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>

    <!-- 月份选择弹窗 -->
    <el-dialog
      :title="batchDialogTitle"
      :visible="batchDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleBatchDialogClose"
    >
      <el-form label-width="100px" label-position="right">
        <el-form-item label="选择月份" required>
          <el-date-picker
            v-model="batchOperationMonth"
            type="month"
            placeholder="请选择月份"
            format="yyyyMM"
            value-format="yyyyMM"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleBatchDialogClose">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleBatchDialogConfirm"
          :loading="batchCreateLoading || syncLoading"
        >
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <edit-dialog 
      :visible="editVisible"
      :form-data="currentRow"
      :user-list="userList"
      :store-list="storeList"
      @close="editVisible = false"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script>
import { lqYcsdMdmbsdApi } from '@/api/extend/lqYcsdMdmbsd'
import request from '@/utils/request'
import EditDialog from './components/edit-dialog.vue'

export default {
  name: 'LqYcsdMdmbsd',
  components: {
    EditDialog
  },
  data() {
    // 获取当前月份，格式为 yyyyMM
    const getCurrentMonth = () => {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return `${year}${month}`
    }
    
    return {
      loading: false,
      batchCreateLoading: false,
      syncLoading: false,
      list: [],
      total: 0,
      userList: [],
      storeList: [],
      batchOperationMonth: getCurrentMonth(), // 批量操作使用的独立月份选择器
      batchDialogVisible: false, // 批量操作弹窗显示状态
      batchDialogTitle: '', // 批量操作弹窗标题
      batchOperationType: '', // 批量操作类型：'create' 或 'sync'
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        generalManagerId: '',
        storeId: '',
        month: getCurrentMonth()
      },
      editVisible: false,
      currentRow: null
    }
  },
  created() {
    this.getUserList()
    this.getStoreList()
    this.getList()
  },
  methods: {
    // 获取当前月份，格式为 yyyyMM
    getCurrentMonth() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return `${year}${month}`
    },

    // 获取总经理用户列表
    async getUserList() {
      try {
        const response = await lqYcsdMdmbsdApi.getGeneralManagerList()
        this.userList = response.data || []
        console.log('获取总经理用户列表成功:', this.userList)
      } catch (error) {
        console.error('获取总经理用户列表失败:', error)
        this.userList = []
      }
    },

    // 获取门店列表
    async getStoreList() {
      try {
        const response = await lqYcsdMdmbsdApi.getStoreList()
        this.storeList = response.data.list || []
        console.log('门店列表:', this.storeList)
      } catch (error) {
        console.error('获取门店列表失败:', error)
        this.storeList = []
      }
    },

    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        const params = {
          currentPage: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          generalManagerId: this.queryParams.generalManagerId || '',
          storeId: this.queryParams.storeId || '',
          month: this.queryParams.month || ''
        }
        const response = await lqYcsdMdmbsdApi.getPageList(params)
        
        this.list = response.data.list || []
        this.total = (response.data.pagination && response.data.pagination.total) || 0
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    // 重置搜索
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        generalManagerId: '',
        storeId: '',
        month: this.getCurrentMonth()
      }
      this.list = []
      this.total = 0
      this.getList()
    },

    // 显示一键创建弹窗
    showBatchCreateDialog() {
      this.batchOperationMonth = this.getCurrentMonth()
      this.batchDialogTitle = '一键创建'
      this.batchOperationType = 'create'
      this.batchDialogVisible = true
    },

    // 显示同步上月数据弹窗
    showSyncDialog() {
      this.batchOperationMonth = this.getCurrentMonth()
      this.batchDialogTitle = '同步上月数据'
      this.batchOperationType = 'sync'
      this.batchDialogVisible = true
    },

    // 关闭批量操作弹窗
    handleBatchDialogClose() {
      this.batchDialogVisible = false
      this.batchOperationType = ''
    },

    // 确认批量操作
    async handleBatchDialogConfirm() {
      if (!this.batchOperationMonth) {
        this.$message.warning('请先选择月份')
        return
      }

      if (this.batchOperationType === 'create') {
        await this.handleBatchCreate()
      } else if (this.batchOperationType === 'sync') {
        await this.handleSyncLastMonthData()
      }
    },

    // 一键创建
    async handleBatchCreate() {
      this.$confirm(`确定要为 ${this.formatMonth(this.batchOperationMonth)} 月份一键创建所有总经理门店生命线设置吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.batchCreateLoading = true
        try {
          const result = await lqYcsdMdmbsdApi.batchCreateFromTarget(this.batchOperationMonth)
          this.$message.success((result.data && result.data.message) || '同步上月数据成功')
          this.batchDialogVisible = false
          this.getList()
        } catch (error) {
          console.error('一键创建失败:', error)
          this.$message.error(error.message || '一键创建失败')
        } finally {
          this.batchCreateLoading = false
        }
      }).catch(() => {
        // 用户取消操作
      })
    },

    // 同步上月数据
    async handleSyncLastMonthData() {
      this.$confirm(`确定要将上月数据同步到 ${this.formatMonth(this.batchOperationMonth)} 月份吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.syncLoading = true
        try {
          const result = await lqYcsdMdmbsdApi.copyLastMonthData(this.batchOperationMonth)
          this.$message.success((result.data && result.data.message) || '同步上月数据成功')
          this.batchDialogVisible = false
          this.getList()
        } catch (error) {
          console.error('同步上月数据失败:', error)
          this.$message.error(error.message || '同步上月数据失败')
        } finally {
          this.syncLoading = false
        }
      }).catch(() => {
        // 用户取消操作
      })
    },

    // 新增
    handleAdd() {
      console.log('点击新增按钮')
      this.currentRow = null
      this.editVisible = true
      console.log('editVisible:', this.editVisible)
    },

    // 编辑
    handleEdit(row) {
      console.log('编辑行数据:', row)
      this.currentRow = { ...row }
      this.editVisible = true
    },

    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除这条生命线设置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const id = row.id || row.Id
          await lqYcsdMdmbsdApi.delete(id)
          this.$message.success('删除成功')
          this.getList()
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    // 编辑成功
    handleEditSuccess() {
      this.editVisible = false
      this.getList()
      this.$message.success('操作成功')
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },

    // 获取总经理名称
    getGeneralManagerName(id) {
      if (!id) return ''
      const user = this.userList.find(u => u.id === id)
      return user ? user.realName : ''
    },

    // 获取门店名称
    getStoreName(id) {
      if (!id) return ''
      const store = this.storeList.find(s => s.id === id)
      return store ? store.dm : ''
    },

    // 格式化金额
    formatMoney(amount) {
      if (!amount) return '0.00'
      return Number(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    },

    // 格式化月份
    formatMonth(month) {
      if (!month) return ''
      if (month.length === 6) {
        return `${month.substring(0, 4)}-${month.substring(4, 6)}`
      }
      return month
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #f5f5f5;
  // min-height: calc(100vh - 84px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .header-left {
    h2 {
      margin: 0 0 8px 0;
      color: #303133;
      font-size: 20px;
      font-weight: 600;
    }

    .page-desc {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .header-right {
    display: flex;
    gap: 12px;
  }
}

.search-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

// 用户信息样式
.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  .user-icon {
    color: #409EFF;
    font-size: 16px;
  }
  
  span {
    font-weight: 500;
    color: #303133;
  }
}

// 门店信息样式
.store-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  .store-icon {
    color: #67C23A;
    font-size: 16px;
  }
  
  span {
    font-weight: 500;
    color: #303133;
  }
}

// 月份样式
.month-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  .month-icon {
    color: #909399;
    font-size: 16px;
  }
  
  span {
    color: #606266;
  }
}

// 生命线项目样式
.life-line-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;

  .life-line-icon {
    color: #409EFF;
    font-size: 16px;
  }

  .amount {
    font-weight: 600;
    color: #409EFF;
    font-size: 14px;
  }
}

// 提成比例样式
.ratio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;

  .ratio-icon {
    color: #67C23A;
    font-size: 16px;
  }

  .ratio {
    color: #67C23A;
    font-size: 12px;
    background: #f0f9ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }
}

// 备注样式
.remark-item {
  display: flex;
  align-items: center;
  gap: 6px;
  
  .remark-icon {
    color: #909399;
    font-size: 14px;
  }
  
  span {
    color: #606266;
  }
}

// 操作按钮样式
.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .edit-btn {
    color: #409EFF;
    
    &:hover {
      color: #66b1ff;
    }
  }
  
  .delete-btn {
    color: #F56C6C;
    
    &:hover {
      color: #f78989;
    }
  }
}

.no-data {
  color: #C0C4CC;
  font-size: 12px;
  font-style: italic;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>