gubersail-platform-ui/src/views/complaint/complaintMixin.js

import {
  getList,
  add,
  update,
  remove,
  getDetail,
  updateStatus,
  batchUpdateStatus
} from '@/api/complaint'
import {
  getReplyList,
  addReply
} from '@/api/complaint/reply'
import { mapGetters } from 'vuex'
import {
  COMPLAINANT_TYPE_OPTIONS,
  COMPLAINT_TYPE_OPTIONS,
  COMPLAINT_STATUS_OPTIONS,
  REPLY_STATUS_OPTIONS,
  REPLY_TYPE_OPTIONS,
  COMPLAINT_STATUS,
  REPLY_TYPE,
  REPLY_STATUS,
  getComplainantTypeLabel,
  getComplaintTypeLabel,
  getComplainantTypeType,
  getComplaintStatusLabel,
  getComplaintStatusType,
  getReplyStatusLabel,
  getReplyStatusType,
  getReplyTypeLabel,
  getReplyTypeType,
  getReplyTypeColor,
  isComplaintEditable,
  isComplaintProcessable,
  isComplaintClosable,
  isValidComplaintStatus,
  isValidReplyStatus
} from '@/constants/complaint'

/**
 * 投诉查询参数类型定义
 * @typedef {Object} ComplaintQueryParams
 * @property {string} [complaintNo] - 投诉单号
 * @property {string} [title] - 投诉标题
 * @property {number} [complainantType] - 投诉人类型
 * @property {string} [customerCode] - 客户编码
 * @property {string} [customerName] - 客户名称
 * @property {string} [contactName] - 联系人姓名
 * @property {string} [contactPhone] - 联系人电话
 * @property {string} [complaintType] - 投诉类型
 * @property {number} [status] - 投诉状态
 * @property {number} [replyStatus] - 回复状态
 * @property {string} [submitTimeStart] - 提交时间开始
 * @property {string} [submitTimeEnd] - 提交时间结束
 */

/**
 * 状态更新表单类型定义
 * @typedef {Object} StatusForm
 * @property {number} status - 新状态
 * @property {string} [closeReason] - 关闭原因
 */

export default {
  data() {
    return {
      /** @type {ComplaintRecord[]} */
      data: [],
      /** @type {ComplaintQueryParams} */
      query: {},
      loading: true,
      /** @type {ComplaintForm} */
      form: {},
      /** @type {ComplaintRecord[]} */
      selectionList: [],
      /** @type {Object} */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      /** @type {ComplaintRecord|null} */
      detailData: null,
      detailVisible: false,
      statusVisible: false,
      statusDialogTitle: '',
      /** @type {StatusForm} */
      statusForm: {
        status: COMPLAINT_STATUS.PROCESSING,
        closeReason: ''
      },
      statusLoading: false,
      /** @type {string[]} */
      currentIds: [],
      statusRules: {
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        closeReason: [
          { required: true, message: '请输入关闭原因', trigger: 'blur' }
        ]
      },
      // 回复列表相关数据
      replyListVisible: false,
      replyList: [],
      replyListLoading: false,
      replyPage: {
        current: 1,
        size: 10
      },
      replyTotal: 0,
      currentComplaintId: '',
      currentComplaintNo: '',
      /** @type {number} */
      currentComplaintReplyStatus: 0,
      // 新增回复相关数据
      addReplyVisible: false,
      replyForm: {
        complaintId: '',
        replyType: REPLY_TYPE.SYSTEM,
        replyContent: '',
        replyAttachUrl: ''
      },
      replyRules: {
        replyType: [{ required: true, message: '请选择回复类型', trigger: 'change' }],
        replyContent: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
      },
      addReplyLoading: false,
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: '投诉单号',
            prop: 'complaintNo',
            minWidth: 150,
            search: true
          },
          {
            label: '投诉标题',
            prop: 'title',
            minWidth: 200,
            search: true,
            overHidden: true
          },
          {
            label: '投诉人类型',
            prop: 'complainantType',
            minWidth: 100,
            slot: true,
            search: true,
            type: 'select',
            dicData: COMPLAINANT_TYPE_OPTIONS
          },
          {
            label: '客户名称',
            prop: 'customerName',
            minWidth: 150,
            search: true,
            overHidden: true
          },
          {
            label: '联系人',
            prop: 'contactName',
            minWidth: 100,
            search: true
          },
          {
            label: '联系电话',
            prop: 'contactPhone',
            minWidth: 120,
            search: true
          },
          {
            label: '投诉类型',
            prop: 'complaintType',
            minWidth: 100,
            search: true,
            type: 'select',
            dicData: COMPLAINT_TYPE_OPTIONS
          },
          {
            label: '投诉状态',
            prop: 'status',
            minWidth: 100,
            slot: true,
            search: true,
            type: 'select',
            dicData: COMPLAINT_STATUS_OPTIONS
          },
          {
            label: '回复状态',
            prop: 'replyStatus',
            minWidth: 100,
            slot: true,
            search: true,
            type: 'select',
            dicData: REPLY_STATUS_OPTIONS
          },
          {
            label: '提交时间',
            prop: 'submitTime',
            minWidth: 150,
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss'
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            minWidth: 150,
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        // addBtn: this.vaildData(this.permission.complaint_add, false),
        // viewBtn: this.vaildData(this.permission.complaint_view, false),
        // delBtn: this.vaildData(this.permission.complaint_delete, false),
        // editBtn: this.vaildData(this.permission.complaint_edit, false)
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
      }
    },
    ids() {
      /** @type {string[]} */
      const ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
    /**
     * 回复类型选项
     * @returns {Array<{label: string, value: number}>} 回复类型选项数组
     */
    replyTypeOptions() {
      return REPLY_TYPE_OPTIONS
    },
    /**
     * 投诉状态常量
     */
    COMPLAINT_STATUS() {
      return COMPLAINT_STATUS
    }
  },
  methods: {

    // 导入工具函数
    getComplainantTypeLabel,
    getComplainantTypeType,
    getComplaintTypeLabel,
    getComplaintStatusLabel,
    getComplaintStatusType,
    getReplyStatusLabel,
    getReplyStatusType,
    isComplaintEditable,
    isComplaintProcessable,
    // getComplainantTypeText,
    isComplaintClosable,

    /**
     * 行保存
     * @param {ComplaintForm} row - 表单数据
     * @param {Function} done - 完成回调
     * @param {Function} loading - 加载状态回调
     */
    async rowSave(row, done, loading) {
      try {
        loading()
        const res = await add(row)
        if (res.data.success) {
          this.$message.success('操作成功')
          done()
          this.onLoad(this.page)
        } else {
          this.$message.error(res.data.msg || '操作失败')
          loading()
        }
      } catch (error) {
        console.error('新增投诉失败:', error)
        this.$message.error('操作失败')
        loading()
      }
    },

    /**
     * 行更新
     * @param {ComplaintForm} row - 表单数据
     * @param {number} index - 行索引
     * @param {Function} done - 完成回调
     * @param {Function} loading - 加载状态回调
     */
    async rowUpdate(row, index, done, loading) {
      try {
        loading()
        const res = await update(row)
        if (res.data.success) {
          this.$message.success('操作成功')
          done()
          this.onLoad(this.page)
        } else {
          this.$message.error(res.data.msg || '操作失败')
          loading()
        }
      } catch (error) {
        console.error('更新投诉失败:', error)
        this.$message.error('操作失败')
        loading()
      }
    },

    /**
     * 行删除
     * @param {ComplaintRecord} row - 行数据
     * @param {number} index - 行索引
     */
    async rowDel(row, index) {
      try {
        const res = await remove(row.id)
        if (res.data.success) {
          this.$message.success('操作成功')
          this.onLoad(this.page)
        } else {
          this.$message.error(res.data.msg || '操作失败')
        }
      } catch (error) {
        console.error('删除投诉失败:', error)
        this.$message.error('操作失败')
      }
    },

    /**
     * 搜索变化
     * @param {ComplaintQueryParams} params - 搜索参数
     * @param {boolean} done - 完成回调
     */
    searchChange(params, done) {
      this.query = params
      this.onLoad(this.page, params)
      done()
    },

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

    /**
     * 选择变化
     * @param {ComplaintRecord[]} val - 选中的行
     */
    selectionChange(val) {
      this.selectionList = val
    },

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

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

    /**
     * 刷新变化
     */
    refreshChange() {
      this.onLoad(this.page, this.query)
    },

    /**
     * 加载数据
     * @param {Object} page - 分页信息
     * @param {ComplaintQueryParams} [params={}] - 查询参数
     */
    async onLoad(page, params = {}) {
      this.loading = true
      try {
        const res = await getList(page.currentPage, page.pageSize, Object.assign(params, this.query))
        if (res.data.success) {
          const data = res.data.data
          this.data = data.records
          this.page.total = data.total
        } else {
          this.$message.error(res.data.msg || '查询失败')
        }
      } catch (error) {
        console.error('查询投诉列表失败:', error)
        this.$message.error('查询失败')
      } finally {
        this.loading = false
      }
    },

    /**
     * 新增投诉
     */
    handleAdd() {
      this.$refs.crud.rowAdd()
    },

    /**
     * 编辑投诉
     * @param {ComplaintRecord} row - 行数据
     */
    handleEdit(row) {
      this.$refs.crud.rowEdit(row, this.data.indexOf(row))
    },

    /**
     * 查看详情
     * @param {ComplaintRecord} row - 行数据
     */
    async handleDetail(row) {
      try {
        const res = await getDetail(row.id)
        if (res.data.success) {
          this.detailData = res.data.data
          this.detailVisible = true
        } else {
          this.$message.error(res.data.msg || '获取详情失败')
        }
      } catch (error) {
        console.error('获取投诉详情失败:', error)
        this.$message.error('获取详情失败')
      }
    },

    /**
     * 处理投诉
     * @param {ComplaintRecord} row - 行数据
     */
    handleProcess(row) {
      this.statusDialogTitle = '处理投诉'
      this.statusForm = {
        id: row.id,
        status: COMPLAINT_STATUS.PROCESSING,
        closeReason: ''
      }
      this.currentIds = null
      this.statusVisible = true
    },

    /**
     * 关闭投诉
     * @param {ComplaintRecord} row - 行数据
     */
    handleClose(row) {
      this.statusDialogTitle = '关闭投诉'
      this.statusForm = {
        id: row.id,
        status: COMPLAINT_STATUS.CLOSED,
        closeReason: ''
      }
      this.currentIds = null
      this.statusVisible = true
    },

    /**
     * 打开回复列表
     * @param {Object} row - 投诉数据行
     */
    async handleReplyList(row) {
      this.currentComplaintId = row.id
      this.currentComplaintNo = row.complaintNo
      this.currentComplaintReplyStatus = row.replyStatus
      this.replyListVisible = true
      this.replyPage.current = 1
      await this.loadReplyList()
    },

    /**
     * 加载回复列表
     */
    async loadReplyList() {
      if (!this.currentComplaintId) return
      
      this.replyListLoading = true
      try {
        const params = {
          current: this.replyPage.current,
          size: this.replyPage.size,
          complaintId: this.currentComplaintId
        }
        
        const response = await getReplyList(params)
        const { records, total } = response.data.data
        
        this.replyList = records || []
        this.replyTotal = total || 0
      } catch (error) {
        this.$message.error('获取回复列表失败')
        console.error('获取回复列表失败:', error)
      } finally {
        this.replyListLoading = false
      }
    },

    /**
     * 回复列表分页大小变化
     * @param {number} size - 新的分页大小
     */
    async handleReplyPageSizeChange(size) {
      this.replyPage.size = size
      this.replyPage.current = 1
      await this.loadReplyList()
    },

    /**
     * 回复列表页码变化
     * @param {number} current - 新的页码
     */
    async handleReplyPageChange(current) {
      this.replyPage.current = current
      await this.loadReplyList()
    },

    /**
     * 打开新增回复对话框
     */
    handleAddReply() {
      this.replyForm = {
        complaintId: this.currentComplaintId,
        complaintNo: this.currentComplaintNo,
        replyType: REPLY_TYPE.SYSTEM,
        replyContent: '',
        replyAttachUrl: ''
      }
      this.addReplyVisible = true
      this.$nextTick(() => {
        this.$refs.replyForm && this.$refs.replyForm.clearValidate()
      })
    },

    /**
     * 确认新增回复
     */
    async confirmAddReply() {
      try {
        const valid = await this.$refs.replyForm.validate()
        if (!valid) return
        
        this.addReplyLoading = true
        
        const formData = {
          ...this.replyForm
        }
        
        const response = await addReply(formData)
        
        if (response.data.success) {
          this.$message.success('新增回复成功')
          this.addReplyVisible = false
          
          // 如果当前投诉的回复状态是未回复，则更新为已回复
          if (this.currentComplaintReplyStatus === REPLY_STATUS.NOT_REPLIED) {
            try {
              const updateData = {
                id: this.currentComplaintId,
                replyStatus: REPLY_STATUS.REPLIED
              }
              await update(updateData)
              this.currentComplaintReplyStatus = REPLY_STATUS.REPLIED
            } catch (error) {
              console.error('更新投诉回复状态失败:', error)
            }
          }
          
          // 重新加载回复列表
          await this.loadReplyList()
          
          // 重新加载投诉列表以更新回复状态
          this.onLoad(this.page)
        } else {
          this.$message.error(response.data.msg || '新增回复失败')
        }
      } catch (error) {
        this.$message.error('新增回复失败')
        console.error('新增回复失败:', error)
      } finally {
        this.addReplyLoading = false
      }
    },

    /**
     * 获取回复类型标签
     * @param {number} replyType - 回复类型
     * @returns {string} 回复类型标签
     */
    getReplyTypeLabel,

    /**
     * 获取回复类型Element UI标签类型
     * @param {number} replyType - 回复类型
     * @returns {string} Element UI标签类型
     */
    getReplyTypeType,

    /**
     * 获取回复类型颜色
     * @param {number} replyType - 回复类型
     * @returns {string} 回复类型颜色
     */
    getReplyTypeColor,

    /**
     * 批量状态处理
     */
    handleBatchStatus() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择要处理的投诉')
        return
      }
      this.statusDialogTitle = '批量处理投诉'
      this.statusForm = {
        status: COMPLAINT_STATUS.PROCESSING,
        closeReason: ''
      }
      this.currentIds = this.selectionList.map(item => item.id)
      this.statusVisible = true
    },

    /**
     * 确认状态更新
     */
    async confirmStatusUpdate() {
      try {
        await this.$refs.statusForm.validate()
        this.statusLoading = true

        let res
        if (this.currentIds && this.currentIds.length > 0) {
          // 批量处理
          res = await batchUpdateStatus(this.currentIds, this.statusForm.status, this.statusForm.closeReason)
        } else {
          // 单个处理
          res = await updateStatus(this.statusForm.id, this.statusForm.status, this.statusForm.closeReason)
        }

        if (res.data.success) {
          this.$message.success('操作成功')
          this.statusVisible = false
          this.onLoad(this.page, this.query)
        } else {
          this.$message.error(res.data.msg || '操作失败')
        }
      } catch (error) {
        if (error.message) {
          console.error('状态更新失败:', error)
          this.$message.error('操作失败')
        }
      } finally {
        this.statusLoading = false
      }
    }
  }
}