canrd-outside / order-erp-front · Files

<template>
  <div class="quest-container">
    <!-- 选项卡区域 -->
    <div class="tab-container">
      <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
        <a-tab-pane key="problems" tab="问题列表"></a-tab-pane>
        <a-tab-pane key="review" tab="审核列表"></a-tab-pane>
      </a-tabs>
    </div>
    
    <!-- 表格区域 -->
    <div class="bg-white">
      <!-- 问题列表 -->
      <BasicTable v-if="activeTab === 'problems'" @register="registerProblemTable">
        <template #toolbar>
          <a-button type="primary" @click="handleCalculateAmount" style="margin-right: 8px;" :disabled="checkedRows.length === 0">
            计算扣款金额
          </a-button>
          <a-button type="primary" @click="handleCreate" style="margin-right: 8px;">
            新建问题
          </a-button>
          <a-button @click="handleQuestTypeManager">
            问题类型管理
          </a-button>
          <!-- 已勾选数据提示 -->
          <div v-if="checkedRows.length > 0" class="selected-count">
            已勾选 {{ checkedRows.length }} 条数据
          </div>
        </template>
        
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  icon: 'ant-design:eye-outlined',
                  tooltip: '查看',
                  onClick: handleView.bind(null, record),
                },
                {
                  icon: 'clarity:note-edit-line',
                  tooltip: '编辑',
                  onClick: handleEdit.bind(null, record),
                },
                {
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  tooltip: '删除',
                  popConfirm: {
                    title: '是否确认删除?',
                    confirm: handleDelete.bind(null, record),
                  },
                  ifShow: role === ROLE.ADMIN
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
      
      <!-- 审核列表 -->
      <BasicTable v-if="activeTab === 'review'" @register="registerReviewTable">
        <template #toolbar>
          <!-- 已勾选数据提示 -->
          <div v-if="checkedRows.length > 0" class="selected-count">
            已勾选 {{ checkedRows.length }} 条数据
          </div>
        </template>
        
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '通过',
                  color: 'success',
                  onClick: handleApprove.bind(null, record),
                  ifShow: record.status === 0 && role === ROLE.ADMIN
                },
                {
                  label: '不通过',
                  color: 'error',
                  onClick: handleReject.bind(null, record),
                  ifShow: record.status === 0 && role === ROLE.ADMIN
                },
                {
                  label: '查看已通过版本',
                  onClick: handleViewRelease.bind(null, record),
                },
                {
                  icon: 'ant-design:eye-outlined',
                  tooltip: '查看',
                  onClick: handleView.bind(null, record),
                },
                {
                  icon: 'clarity:note-edit-line',
                  tooltip: '编辑',
                  onClick: handleEdit.bind(null, record),
                },
                {
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  tooltip: '删除',
                  popConfirm: {
                    title: '是否确认删除?',
                    confirm: handleDelete.bind(null, record),
                  },
                  ifShow: role === ROLE.ADMIN
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    
    <!-- 编辑弹窗 -->
    <QuestDrawer @register="registerDrawer" @success="handleSuccess" />
    
    <!-- 拒绝原因弹窗 -->
    <a-modal v-model:visible="rejectModalVisible" title="拒绝原因" @ok="confirmReject">
      <a-textarea v-model:value="rejectReason" placeholder="请输入拒绝原因" :rows="4" />
    </a-modal>
    
    <!-- 已通过版本模态框 -->
    <ReleaseModal 
      :visible="releaseModalVisible" 
      :recordId="currentReleaseRecordId" 
      @update:visible="(val) => releaseModalVisible = val" 
    />
    
    <!-- 问题类型管理模态框 -->
    <QuestTypeModal 
      :visible="questTypeModalVisible"
      @update:visible="(val) => questTypeModalVisible = val" 
      @success="handleQuestTypeSuccess"
    />
    
    <!-- 扣款金额统计弹窗 -->
    <a-modal
      v-model:visible="amountModalVisible"
      title="扣款金额统计"
      :footer="null"
      width="400px"
    >
      <div class="amount-statistics">
        <div class="statistic-item">
          <div class="label">数据总条数:</div>
          <div class="value">{{ deductCountInfo.distinctIdCount }}</div>
        </div>
        <div class="statistic-item">
          <div class="label">合计金额:</div>
          <div class="value amount">{{ getCurrencySymbol(deductCountInfo.isRmb) }}{{ formatAmount(deductCountInfo.sumDeductAmount) }}</div>
        </div>
      </div>
      <div class="modal-footer">
        <a-button type="primary" @click="amountModalVisible = false">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup name="QuestList">
  import { onMounted, ref, computed } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useDrawer } from '/@/components/Drawer';
  import QuestDrawer from './QuestDrawer.vue';
  import ReleaseModal from './ReleaseModal.vue';
  import QuestTypeModal from './QuestTypeModal.vue';
  import { getQuestList, questDelete, setQuestStatus } from '/@/api/project/quest';
  import { columns, reviewColumns, searchFormSchema } from './quest.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { defHttp } from '/@/utils/http/axios';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import {ROLE} from '../order/type.d';
  import { filterFinancialData } from './quest.data';
  
  const { createMessage } = useMessage();
  
  // 选项卡状态
  const activeTab = ref<string>('problems');
  
  // 拒绝原因弹窗状态
  const rejectModalVisible = ref<boolean>(false);
  const rejectReason = ref<string>('');
  const currentRejectRecord = ref<any>(null);
  
  // 已通过版本模态框状态
  const releaseModalVisible = ref<boolean>(false);
  const currentReleaseRecordId = ref<number | undefined>(undefined);
  
  // 问题类型管理模态框状态
  const questTypeModalVisible = ref<boolean>(false);
  
  // 扣款金额统计模态框状态
  const amountModalVisible = ref<boolean>(false);
  const deductCountInfo = ref({
    distinctIdCount: 0,
    sumDeductAmount: 0,
    isRmb: '0' // 默认美元
  });
  
  // 表格选中行数据
  const checkedKeys = ref<(string | number)[]>([]);
  const checkedRows = ref<any[]>([]);
  const userStore = useUserStoreWithOut();
  const user = userStore.getUserInfo;
  const role = computed(() => {
    return user?.roleSmallVO?.code;
  });
  
  // 表格选择回调函数
  function handleSelectionChange(selectedRowKeys: (string | number)[], selectedRows: any[]) {
    checkedKeys.value = selectedRowKeys;
    checkedRows.value = selectedRows;
  }
  
  // 注册问题列表表格
  const [registerProblemTable, { reload: reloadProblemTable }] = useTable({
    title: '问题列表',
    api: getQuestList,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    beforeFetch: (params) => {
      // 处理日期格式
      if (params.startTime) {
        params.createStartTime = params.startTime.format('YYYY-MM-DD');
        delete params.startTime;
      }
      if (params.endTime) {
        params.createEndTime = params.endTime.format('YYYY-MM-DD');
        delete params.endTime;
      }
      return { ...params, status: 10 };
    },
    // 添加afterFetch钩子，过滤财务专用数据
    afterFetch: (res) => {
      const data = res;
      if (Array.isArray(data)) {
        return filterFinancialData(data);
      }
      if (data && Array.isArray(data.items)) {
        data.items = filterFinancialData(data.items);
        return data;
      }
      return res;
    },
    rowKey: 'id',
    bordered: true,
    showIndexColumn: false,
    useSearchForm: true,
    clickToRowSelect: false, // 禁止点击行时选中
    rowSelection: {
      type: 'checkbox',
      onChange: handleSelectionChange,
      preserveSelectedRowKeys: true, // 保留选中的行，即使它们不在当前页面
    },
  });
  
  // 注册审核列表表格
  const [registerReviewTable, { reload: reloadReviewTable }] = useTable({
    title: '审核列表',
    api: getQuestList,
    columns: reviewColumns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    beforeFetch: (params) => {
      // 处理日期格式
      if (params.startTime) {
        params.createStartTime = params.startTime.format('YYYY-MM-DD');
        delete params.startTime;
      }
      if (params.endTime) {
        params.createEndTime = params.endTime.format('YYYY-MM-DD');
        delete params.endTime;
      }
      return { ...params, status: 0 };
    },
    // 添加afterFetch钩子，过滤财务专用数据
    afterFetch: (res) => {
      const data = res;
      if (Array.isArray(data)) {
        return filterFinancialData(data);
      }
      if (data && Array.isArray(data.items)) {
        data.items = filterFinancialData(data.items);
        return data;
      }
      return res;
    },
    rowKey: 'id',
    bordered: true,
    showIndexColumn: false,
    useSearchForm: true,
    clickToRowSelect: false, // 禁止点击行时选中
    rowSelection: {
      type: 'checkbox',
      onChange: handleSelectionChange,
      preserveSelectedRowKeys: true, // 保留选中的行，即使它们不在当前页面
    },
  });
  
  // 注册抽屉
  const [registerDrawer, { openDrawer }] = useDrawer();
  
  // 处理选项卡切换
  function handleTabChange(key: string) {
    activeTab.value = key;
  }
  
  // 新建
  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      isView: false, // 明确指定不是查看模式
    });
  }
  
  // 查看（只读模式）
  function handleView(record) {
    openDrawer(true, {
      record,
      isUpdate: true,
      isView: true, // 标记为查看模式
    });
  }
  
  // 编辑
  function handleEdit(record) {
    openDrawer(true, {
      record,
      isUpdate: true,
      isView: false, // 显式标记为编辑模式
    });
  }
  
  // 删除
  async function handleDelete(record) {
    await questDelete([record.id]);
    if (activeTab.value === 'problems') {
      await reloadProblemTable();
    } else {
      await reloadReviewTable();
    }
  }
  
  // 审核通过
  async function handleApprove(record) {
    try {
      await setQuestStatus({ id: record.id, status: 10 });
      await reloadReviewTable();
    } catch (error) {
      createMessage.error('审核失败：' + error.message);
    }
  }
  
  // 审核拒绝（点击触发弹窗）
  function handleReject(record) {
    currentRejectRecord.value = record;
    rejectReason.value = '';
    rejectModalVisible.value = true;
  }
  
  // 确认拒绝并提交
  async function confirmReject() {
    if (!rejectReason.value.trim()) {
      createMessage.warning('请输入拒绝原因');
      return;
    }
    
    try {
      await setQuestStatus({ 
        id: currentRejectRecord.value.id, 
        status: 20, 
        refuseRemark: rejectReason.value 
      });
      rejectModalVisible.value = false;
      await reloadReviewTable();
    } catch (error) {
      createMessage.error('审核失败：' + error.message);
    }
  }
  
  // 表格刷新
  function handleSuccess() {
    if (activeTab.value === 'problems') {
      reloadProblemTable();
    } else {
      reloadReviewTable();
    }
  }
  
  // 查看已通过版本
  function handleViewRelease(record) {
    currentReleaseRecordId.value = record.id;
    releaseModalVisible.value = true;
  }
  
  // 打开问题类型管理
  function handleQuestTypeManager() {
    questTypeModalVisible.value = true;
  }
  
  // 问题类型管理成功后刷新相关数据
  async function handleQuestTypeSuccess() {
    // 如果有打开的抽屉，通知其刷新问题类型列表
    // 由于没有直接引用QuestDrawer内部方法的方式，我们采用关闭再打开的方式刷新
    const questDrawerInstance = document.querySelector('.quest-drawer');
    if (questDrawerInstance) {
      // 存在打开的抽屉，需要刷新其中的问题类型数据
      createMessage.success('已更新问题类型列表，新建问题时将显示最新数据');
    }
  }
  
  // 格式化金额，保留两位小数
  function formatAmount(amount) {
    if (amount === undefined || amount === null) return '0.00';
    return Number(amount).toFixed(2);
  }
  
  // 获取货币符号
  function getCurrencySymbol(isRmb) {
    return isRmb === '1' ? '￥' : '$';
  }
  
  // 计算扣款金额
  async function handleCalculateAmount() {
    if (checkedKeys.value.length === 0) {
      createMessage.warning('请先选择要计算的数据');
      return;
    }
    
    try {
      // 发送请求获取扣款金额统计
      const res = await defHttp.post({
        url: '/order/erp/quest/getSumDeductAmount_by_ids',
        data: { ids: checkedKeys.value }
      });
      
      // 检查返回结果
      if (res && typeof res === 'object') {
        // 设置统计数据
        deductCountInfo.value = {
          distinctIdCount: res.distinctIdCount || 0,
          sumDeductAmount: res.sumDeductAmount || 0,
          // 获取并处理isRmb值，确保类型一致
          isRmb: (res.isRmb !== undefined && res.isRmb !== null) ? String(res.isRmb) : '0'
        };
        
        // 显示弹窗
        amountModalVisible.value = true;
      } else {
        createMessage.error('获取扣款金额统计失败：返回数据格式不正确');
      }
    } catch (error) {
      createMessage.error('获取扣款金额统计失败：' + (error.message || '未知错误'));
    }
  }
  
  // 页面加载完成后请求数据
  onMounted(async () => {
    // 默认加载问题列表数据
  });
</script>

<style lang="less" scoped>
  .quest-container {
    padding: 16px;
    
    .tab-container {
      background-color: white;
      padding: 0 16px;
      margin-bottom: 16px;
    }
    
    :deep(.ant-table-wrapper) {
      padding: 16px;
    }
    
    .selected-count {
      display: inline-block;
      margin-left: 16px;
      padding: 4px 12px;
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
      border-radius: 4px;
      color: #1890ff;
      font-weight: 500;
    }
  }
  
  // 扣款金额统计弹窗样式
  .amount-statistics {
    padding: 16px;
    
    .statistic-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      
      .label {
        width: 120px;
        text-align: right;
        padding-right: 12px;
        color: #606266;
        font-size: 14px;
      }
      
      .value {
        flex: 1;
        font-size: 16px;
        color: #303133;
        font-weight: 500;
        
        &.amount {
          color: #f56c6c;
          font-size: 18px;
        }
      }
    }
  }
  
  .modal-footer {
    text-align: center;
    margin-top: 24px;
  }
</style>