merchant_feedov_web/src/views/order/CancelOrder/index.vue

<!-- 退卡订单 -->
<template>
  <div class="silent-expire-alarm">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <Search/>
    </div>
    <!-- 数据表格 -->
    <a-table :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
      <template #detail="{ record }">
        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
      </template>
      <template #orderStatus="{ record }">
        <a-tag color="orangered" v-if="record.moderationStatus == 1">待审核</a-tag>
        <a-tag color="arcoblue" v-if="record.moderationStatus == 2">审核通过</a-tag>
        <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">已驳回</a-tag>
      </template>
      <template #id="{ record }">
        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
      </template>
      <template #operate="{ record }">
        <a-button type="primary" @click="showAudit = true">审核</a-button>
      </template>
    </a-table>


    <Status v-model:modelValue="showAudit" @submit="intData()" />
    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue';
import Status from './status.vue'
import Search from '@/components/Search/index.vue'
const state = ref({
  tableData: [],
  pagination: {
    total: 0,
    current: 1,
    size: 10,
  },
  showDetail: false,
  showAudit: false,
  FormDataList: {}
})

const { tableData, pagination, showDetail, showAudit, FormDataList } = toRefs(state.value)

const columns = [
  { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
  {
    title: '订单编号', slotName: 'id', ellipsis: true,
    tooltip: true,
  },
  {
    title: '客户名称', dataIndex: 'userName', ellipsis: true,
    tooltip: true,
  },
  { title: '审核状态', slotName: 'orderStatus', ellipsis: true },
  {
    title: '供应商名称', dataIndex: 'sourceName', ellipsis: true,
    tooltip: true,
  },
  { title: '卡数量', dataIndex: 'quantity', ellipsis: true },
  { title: '注销日期', dataIndex: 'period_of_silence', ellipsis: true },
  { title: '操作', slotName: 'operate', align: 'center', ellipsis: true }
];

// 查看订单详情
const openDetail = (item) => {
  showDetail.value = true;
  FormDataList.value = item;
}

// 列表-------------------------------------
// 订单列表
// const intData = async () => {
//   const param = {
//     current: pagination.value.current,
//     size: pagination.value.size,
//   }
//   const one = await Getdictionary('source')
//   const two = await Getdictionary('cardType')
//   const tree = await Getdictionary('subscriptionRelationshipStatus')
//   const tive = await Getdictionary('orderAuditStatus')
//   cancelOrderList(param).then(res => {
//     tableData.value = (res.data.records || []).map(item => {

//       const sourceName = one.filter((item) => item.typeKey == enum_dict.SOURCE)?.find(val => item.source == val.value)?.label
//       const cardTypeName = two.filter((item) => item.typeKey == enum_dict.CARD_TYPE)?.find(val => item.card_type == val.value)?.label
//       const statusName = tree.filter((item) => item.typeKey == enum_dict.SUBSCRIPTION_RELATIONSHIP_STATUS)?.find(val => item.status == val.value)?.label
//       const moderationStatusName = tive.filter((item) => item.typeKey == enum_dict.ORDER_AUDIT_STATUS)?.find(val => item.moderation_status == val.value)?.label

//       return {
//         ...item,
//         moderationStatusName,
//         statusName,
//         cardTypeName,
//         sourceName
//       }
//     });
//     pagination.value.total = res.data.total;
//   })

// }
onMounted(() => {
  // intData();
})
</script>

<style scoped lang="less">
.silent-expire-alarm {
  padding: 20px !important;
  // background: #fcf;
}

.search-section {
  margin-bottom: 20px;
}

.arco-table-th {
  white-space: nowrap;
}

.audit-txt {
  display: flex;
  justify-content: center;
  align-items: center;

  .audit-tag {
    margin-left: 20px;
    background: #63c2c6;
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 50px;
  }
}

.audit-btn {
  margin-bottom: 10px;
}

.detail-box {
  .detail-item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .detail-item {
      //styleName: Body/Medium;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      display: flex;
      align-items: center;
      min-width: 350px;

      .item-label {
        color: rgba(0, 0, 0, 0.4);
        width: 120px;
        text-align: right;
        margin-right: 10px;
      }

      .item-content {
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}

.detail-table {
  margin-top: 20px;
}

.line_heis {
  color: #FF8839;
  cursor: pointer;
  display: inline-block;
}

.line_heis:hover {
  color: #168cff;
}
</style>