gubersail-platform-ui/src/views/forecast/forecastIndex.js

import { getForecastList, addForecast, updateForecast } from '@/api/forecast'
import { getCustomerList } from '@/api/common'
import { getItemList } from '@/api/common'
import {
  APPROVAL_STATUS,
  APPROVAL_STATUS_CONFIG,
  APPROVAL_STATUS_OPTIONS,
  getApprovalStatusLabel,
  getApprovalStatusType,
  canEdit,
  FORECAST_FORM_RULES,
  DEFAULT_FORECAST_FORM
} from '@/constants/forecast'
import { mapGetters } from 'vuex'

/**
 * 经销商销售预测申报页面业务逻辑混入
 * @description 提供预测申报的增删改查、表单验证、远程搜索等功能
 */
export default {
  data() {
    return {
      /** @type {Object} 表单数据 */
      form: { ...DEFAULT_FORECAST_FORM },
      /** @type {Object} 查询参数 */
      query: {},
      /** @type {boolean} 表格加载状态 */
      loading: true,
      /** @type {boolean} 表单提交状态 */
      submitting: false,
      /** @type {boolean} 添加/编辑弹窗显示状态 */
      dialogVisible: false,
      /** @type {boolean} 是否为编辑模式 */
      isEdit: false,
      /** @type {Object} 分页配置 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      /** @type {Array<Object>} 表格数据 */
      data: [],
      /** @type {Array<Object>} 客户选项 */
      customerOptions: [],
      /** @type {boolean} 客户选项加载状态 */
      customerLoading: false,
      /** @type {Array<Object>} 物料选项 */
      itemOptions: [],
      /** @type {boolean} 物料选项加载状态 */
      itemLoading: false,
      /** @type {Object} avue表格配置 */
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: false,
        addBtn: true,
        editBtn: false, // 禁用内置编辑按钮
        delBtn: false,
        excelBtn: false,
        columnBtn: false,
        refreshBtn: true,
        dialogClickModal: false,
        addBtnText: '新增预测申报',
        editBtnText: '编辑',
        // 添加这个配置来完全隐藏操作列
        menu: false,
        column: [
          {
            label: '预测编码',
            prop: 'forecastCode',
            search: true,
            searchSpan: 6,
            width: 150,
            overHidden: true
          },
          {
            label: '年份',
            prop: 'year',
            type: 'year',
            valueFormat: 'yyyy', // 添加这行，确保提交的数据是YYYY格式
            search: true,
            searchSpan: 6,
            width: 100
          },
          {
            label: '月份',
            prop: 'month',
            type: 'select',
            dicData: [
              { label: '1月', value: 1 },
              { label: '2月', value: 2 },
              { label: '3月', value: 3 },
              { label: '4月', value: 4 },
              { label: '5月', value: 5 },
              { label: '6月', value: 6 },
              { label: '7月', value: 7 },
              { label: '8月', value: 8 },
              { label: '9月', value: 9 },
              { label: '10月', value: 10 },
              { label: '11月', value: 11 },
              { label: '12月', value: 12 }
            ],
            search: true,
            searchSpan: 6,
            width: 100
          },
          {
            label: '客户名称',
            prop: 'customerName',
            search: true,
            searchSpan: 6,
            width: 180,
            overHidden: true
          },
          {
            label: '客户编码',
            prop: 'customerCode',
            search: false,
            width: 150,
            overHidden: true
          },
          {
            label: '品牌名称',
            prop: 'brandName',
            search: false,
            width: 120,
            overHidden: true
          },
          {
            label: '物料名称',
            prop: 'itemName',
            search: false,
            width: 200,
            overHidden: true
          },
          {
            label: '物料编码',
            prop: 'itemCode',
            search: false,
            width: 150,
            overHidden: true
          },
          {
            label: '规格',
            prop: 'specs',
            search: false,
            width: 150,
            overHidden: true
          },
          {
            label: '预测数量',
            prop: 'forecastQuantity',
            type: 'number',
            precision: 4,
            search: false,
            width: 120,
            align: 'right'
          },
          {
            label: '当前库存',
            prop: 'currentInventory',
            type: 'number',
            precision: 4,
            search: false,
            width: 120,
            align: 'right'
          },
          {
            label: '审批状态',
            prop: 'approvalStatus',
            type: 'select',
            dicData: APPROVAL_STATUS_OPTIONS,
            slot: true,
            search: true,
            searchSpan: 6,
            width: 120
          },
          {
            label: '审批人',
            prop: 'approvedName',
            search: false,
            width: 120,
            overHidden: true
          },
          {
            label: '审批时间',
            prop: 'approvedTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            search: false,
            width: 160
          },
          {
            label: '创建时间',
            prop: 'createTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            search: false,
            width: 160
          },
          // 添加自定义编辑按钮列
          {
            label: '操作',
            prop: 'editBtn',
            slot: true,
            width: 120,
            fixed: 'right'
          }
        ]
      },
      /** @type {Object} 表单验证规则 */
      formRules: FORECAST_FORM_RULES
    }
  },

  computed: {
    ...mapGetters(['permission']),

    /**
     * 权限配置
     * @returns {Object} 权限配置对象
     */
    permissionList() {
      return {
        // addBtn: this.vaildData(this.permission.forecast_add, false),
        // viewBtn: this.vaildData(this.permission.forecast_view, false),
        // delBtn: false, // 不提供删除功能
        // editBtn: this.vaildData(this.permission.forecast_edit, false)
          addBtn: false,
          viewBtn: false,
          delBtn: false, // 不提供删除功能
          editBtn: false
      }
    },

    /**
     * 弹窗标题
     * @returns {string} 弹窗标题文本
     */
    dialogTitle() {
      return this.isEdit ? '编辑预测申报' : '新增预测申报'
    }
  },

  created() {
    this.loadCustomerOptions()
    this.loadItemOptions()
  },

  methods: {
    /**
     * 加载客户选项（初始化时加载部分数据）
     * @returns {Promise<void>}
     */
    async loadCustomerOptions() {
      try {
        this.customerLoading = true
        const res = await getCustomerList(1, 20)
        if (res.data && res.data.success) {
          this.customerOptions = res.data.data.records.map(item => ({
            value: item.Customer_ID.toString(),
            label: item.Customer_NAME,
            customerCode: item.Customer_CODE,
            customerName: item.Customer_NAME
          }))
        }
      } catch (error) {
        console.error('加载客户选项失败:', error)
        this.$message.error('加载客户选项失败')
      } finally {
        this.customerLoading = false
      }
    },

    /**
     * 远程搜索客户
     * @param {string} query - 搜索关键词
     * @returns {Promise<void>}
     */
    async remoteSearchCustomer(query) {
      if (!query) {
        this.loadCustomerOptions()
        return
      }

      try {
        this.customerLoading = true
        const res = await getCustomerList(1, 50, {
          Customer_NAME: query
        })
        if (res.data && res.data.success) {
          this.customerOptions = res.data.data.records.map(item => ({
            value: item.Customer_ID.toString(),
            label: item.Customer_NAME,
            customerCode: item.Customer_CODE,
            customerName: item.Customer_NAME
          }))
        }
      } catch (error) {
        console.error('搜索客户失败:', error)
      } finally {
        this.customerLoading = false
      }
    },

    /**
     * 客户选择变化处理
     * @param {number} customerId - 客户ID
     * @returns {void}
     */
    handleCustomerChange(customerId) {
      const customer = this.customerOptions.find(item => item.value === customerId)
      if (customer) {
        this.form.customerId = customer.value
        this.form.customerCode = customer.customerCode
        this.form.customerName = customer.customerName
      }
    },

    /**
     * 加载物料选项（初始化时加载部分数据）
     * @returns {Promise<void>}
     */
    async loadItemOptions() {
      try {
        this.itemLoading = true
        const res = await getItemList(1, 20)
        if (res.data && res.data.success) {
          this.itemOptions = res.data.data.records.map(item => ({
            value: item.Item_ID,
            label: item.Item_Name,
            itemId: item.Item_ID,
            itemCode: item.Item_Code,
            itemName: item.Item_Name,
            specs: item.Item_PECS || ''
          }))
        }
      } catch (error) {
        console.error('加载物料选项失败:', error)
        this.$message.error('加载物料选项失败')
      } finally {
        this.itemLoading = false
      }
    },

    /**
     * 远程搜索物料
     * @param {string} query - 搜索关键词
     * @returns {Promise<void>}
     */
    async remoteSearchItem(query) {
      if (!query) {
        this.loadItemOptions()
        return
      }

      try {
        this.itemLoading = true
        const res = await getItemList(1, 50, {
          itemName: query
        })
        if (res.data && res.data.success) {
          this.itemOptions = res.data.data.records.map(item => ({
            value: item.Item_ID,
            label: item.Item_Name,
            itemId: item.Item_ID,
            itemCode: item.Item_Code,
            itemName: item.Item_Name,
            specs: item.Item_PECS || ''
          }))
        }
      } catch (error) {
        console.error('搜索物料失败:', error)
      } finally {
        this.itemLoading = false
      }
    },

    /**
     * 物料选择变化处理
     * @param {number} itemId - 物料ID
     * @returns {void}
     */
    handleItemChange(itemId) {
      const item = this.itemOptions.find(option => option.value === itemId)
      if (item) {
        this.form.itemId = item.value
        this.form.itemCode = item.itemCode
        this.form.itemName = item.itemName
        this.form.specs = item.specs
      }
    },

    /**
     * 获取审批状态标签
     * @param {number} status - 审批状态
     * @returns {string} 状态标签
     */
    getApprovalStatusLabel,

    /**
     * 获取审批状态类型
     * @param {number} status - 审批状态
     * @returns {string} 状态类型
     */
    getApprovalStatusType,

    /**
     * 检查是否可以编辑
     * @param {Object} row - 行数据
     * @returns {boolean} 是否可以编辑
     */
    canEditRow(row) {
      return canEdit(row.approvalStatus)
    },

    /**
     * 搜索重置
     * @returns {void}
     */
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },

    /**
     * 搜索条件变化
     * @param {Object} params - 搜索参数
     * @param {Function} done - 完成回调
     * @returns {void}
     */
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },

    /**
     * 页码变化
     * @param {number} currentPage - 当前页码
     * @returns {void}
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },

    /**
     * 页大小变化
     * @param {number} pageSize - 页大小
     * @returns {void}
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    /**
     * 刷新数据
     * @returns {void}
     */
    refreshChange() {
      this.onLoad(this.page, this.query)
    },

    /**
     * 加载数据
     * @param {Object} page - 分页参数
     * @param {Object} params - 查询参数
     * @returns {Promise<void>}
     */
    async onLoad(page, params = {}) {
      this.loading = true
      try {
        const res = await getForecastList(page.currentPage, page.pageSize, {
          ...params,
          ...this.query
        })
        if (res.data && res.data.success) {
          const data = res.data.data
          this.page.total = data.total
          this.data = data.records
        } else {
          this.$message.error(res.data?.msg || '加载数据失败')
          this.data = []
          this.page.total = 0
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败，请稍后重试')
        this.data = []
        this.page.total = 0
      } finally {
        this.loading = false
      }
    },

    /**
     * 新增按钮点击
     * @returns {void}
     */
    rowAdd() {
      this.isEdit = false
      this.form = { ...DEFAULT_FORECAST_FORM }
      this.dialogVisible = true
    },

    /**
     * 编辑按钮点击
     * @param {Object} row - 行数据
     * @param {number} index - 行索引
     * @returns {void}
     */
    rowEdit(row, index) {
      if (!this.canEditRow(row)) {
        this.$message.warning('已审批或已拒绝的记录不能修改')
        return
      }

      this.isEdit = true
      this.form = { 
        ...row,
        // 确保年份字段为字符串类型，以匹配el-date-picker的value-format="yyyy"
        year: row.year ? row.year.toString() : new Date().getFullYear().toString(),
        customerId: row.customerId.toString(),
      }
      this.dialogVisible = true
    },

    /**
     * 表单提交
     * @returns {Promise<void>}
     */
    async rowSave() {
      try {
        // 表单验证
        await this.$refs.form.validate()

        this.submitting = true

        let res
        if (this.isEdit) {
          res = await updateForecast(this.form)
        } else {
          res = await addForecast(this.form)
        }

        if (res.data && res.data.success) {
          this.$message.success(res.data.msg || (this.isEdit ? '修改成功' : '添加成功'))
          this.dialogVisible = false
          this.refreshChange()
        } else {
          this.$message.error(res.data?.msg || (this.isEdit ? '修改失败' : '添加失败'))
        }
      } catch (error) {
        if (error.fields) {
          // 表单验证失败
          return
        }
        console.error('保存失败:', error)
        this.$message.error('保存失败，请稍后重试')
      } finally {
        this.submitting = false
      }
    },

    /**
     * 取消表单
     * @returns {void}
     */
    rowCancel() {
      this.dialogVisible = false
      this.form = { ...DEFAULT_FORECAST_FORM }
    },

    /**
     * 生成预测编码
     * @returns {void}
     */
    generateForecastCode() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const timestamp = now.getTime().toString().slice(-6)
      this.form.forecastCode = `FC-${year}-${month}-${timestamp}`
    }
  }
}