antissoft / lvqianmeiye_ERP

<template>
  <div class="gold-triangle-page">
    <div class="page-header">
      <div class="header-left">
        <el-button icon="el-icon-arrow-left" @click="goBack" class="back-btn">返回工作台</el-button>
        <h2 class="page-title">金三角设置</h2>
      </div>
      <div class="header-sub">{{ currentStoreName }} · 本月金三角配置</div>
    </div>

    <el-card class="content-card" shadow="hover">
      <div class="toolbar">
        <el-form :inline="true" size="small">
          <el-form-item label="月份">
            <el-date-picker
              v-model="monthValue"
              type="month"
              placeholder="选择月份"
              format="yyyy年MM月"
              value-format="yyyyMM"
              @change="onMonthChange"
            />
          </el-form-item>
          <el-form-item label="金三角">
            <el-input v-model="query.jsj" placeholder="金三角名称" clearable style="width: 160px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()" size="small">新增金三角</el-button>
      </div>

      <el-table
        :data="list"
        v-loading="listLoading"
        border
        size="small"
        :header-cell-style="{ background: '#f8fafc', color: '#64748b', fontWeight: 600 }"
      >
        <el-table-column prop="yf" label="月份" width="120" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" size="small">{{ formatMonth(scope.row.yf) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="jsj" label="金三角" 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="操作" width="220" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
            <el-button type="info" icon="el-icon-view" size="mini" plain @click="viewDetail(scope.row.id)">详情</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" plain @click="handleDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
        :page-size="listQuery.pageSize"
        :current-page="listQuery.currentPage"
        :page-sizes="[10, 20, 50]"
        @size-change="val => { listQuery.pageSize = val; initData() }"
        @current-change="val => { listQuery.currentPage = val; initData() }"
        style="margin-top: 16px; text-align: right;"
      />
    </el-card>

    <GoldTriangleForm
      v-if="formVisible"
      ref="goldTriangleForm"
      :current-store-id="currentStoreId"
      :current-store-name="currentStoreName"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import { getJsjList, deleteJsj } from '@/api/lqYcsdJsj'
import { isTAreaTeamName } from '@/utils/goldTriangleHelper'
import GoldTriangleForm from './Form.vue'

export default {
  name: 'GoldTriangle',
  components: { GoldTriangleForm },
  data() {
    return {
      list: [],
      listLoading: false,
      total: 0,
      query: { yf: '', md: '', jsj: '' },
      monthValue: null,
      listQuery: { currentPage: 1, pageSize: 20, sort: 'desc', sidx: '' },
      formVisible: false,
      currentStoreId: '',
      currentStoreName: ''
    }
  },
  created() {
    this.currentStoreId = localStorage.getItem('store_current_store_id') || ''
    this.currentStoreName = localStorage.getItem('store_current_store_name') || '当前门店'
    this.setDefaultMonth()
    this.initData()
  },
  methods: {
    setDefaultMonth() {
      const now = new Date()
      const y = now.getFullYear()
      const m = String(now.getMonth() + 1).padStart(2, '0')
      this.monthValue = `${y}${m}`
      this.query.yf = this.monthValue
    },
    onMonthChange(val) {
      this.query.yf = val || ''
    },
    initData() {
      if (!this.currentStoreId) {
        this.list = []
        this.total = 0
        return
      }
      this.listLoading = true
      const params = {
        ...this.listQuery,
        ...this.query,
        md: this.currentStoreId
      }
      getJsjList(params).then(res => {
        const rows = (res.data && res.data.list) || []
        this.list = rows.filter(r => !isTAreaTeamName(r.jsj))
        this.total = (res.data && res.data.pagination && res.data.pagination.total) || this.list.length
      }).catch(() => {
        this.list = []
        this.total = 0
      }).finally(() => {
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.currentPage = 1
      this.initData()
    },
    reset() {
      this.setDefaultMonth()
      this.query.jsj = ''
      this.listQuery = { currentPage: 1, pageSize: 20, sort: 'desc', sidx: '' }
      this.initData()
    },
    formatMonth(str) {
      if (!str || str.length !== 6) return str
      return `${str.substring(0, 4)}年${str.substring(4, 6)}月`
    },
    addOrUpdateHandle(id) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.goldTriangleForm.init(id)
      })
    },
    viewDetail(id) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.goldTriangleForm.init(id, true)
      })
    },
    handleDel(id) {
      this.$confirm('确定要删除该金三角吗？', '提示', { type: 'warning' }).then(() => {
        deleteJsj(id).then(res => {
          this.$message.success(res.msg || '删除成功')
          this.initData()
        })
      }).catch(() => {})
    },
    refresh() {
      this.formVisible = false
      this.initData()
    },
    goBack() {
      this.$router.push('/dashboard')
    }
  }
}
</script>

<style lang="scss" scoped>
.gold-triangle-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 24px;
}

.page-header {
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  color: #64748b;
  &:hover { color: #4f46e5; }
}

.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
}

.header-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #64748b;
}

.content-card {
  border-radius: 12px;
  overflow: hidden;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.team-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
}

.team-info i {
  color: #22c55e;
  font-size: 16px;
}
</style>