shuhi-ui/src/views/recycle/orderAlert/index.vue

<template>
  <order-page ref="pageRef" :pageConfig="pageConfig">
    <template #toolbar>
      <ele-check-card v-model="checked" :items="items" :row="{ gutter: 12 }">
        <template #item="{ item }">
          <div style="padding: 18px" class="flex-col items-center">
            <ele-text size="md">{{ item.title }}</ele-text>
            <ele-count-up :end-val="item.content" style="font-size:26px" />
          </div>
        </template>
      </ele-check-card>

      <el-button
        type="warning"
        plain
        v-permission="'recycleOrder:awaitDelivery:batchAudit'"
        @click="handleBatchAudit"
      >
        批量初审
      </el-button>
      <el-button
        type="success"
        plain
        v-permission="'recycleOrder:awaitDelivery:batchReceive'"
        @click="handleBatchReceive()"
      >
        批量确认收货
      </el-button>
    </template>

    <template #action="{ row }">
      <div>
        <el-button
          type="success"
          link
          v-permission="'recycleOrder:awaitDelivery:detail'"
          @click="toOrderDetail(row)"
        >
          [订单详情]
        </el-button>
        <el-button
          type="warning"
          link
          v-permission="'recycleOrder:awaitDelivery:log'"
          @click="openOrderLog(row)"
        >
          [订单日志]
        </el-button>
        <el-button
          type="danger"
          link
          v-permission="'recycleOrder:awaitDelivery:cancel'"
          @click="cancelOrder(row)"
        >
          [取消订单]
        </el-button>
        <el-button
          type="primary"
          link
          v-permission="'recycleOrder:awaitDelivery:fallback'"
          @click="fallbackOrder(row)"
        >
          [回退状态]
        </el-button>
        <el-button
          type="warning"
          link
          v-permission="'recycleOrder:awaitDelivery:userTag'"
          @click="openEditUserTag(row)"
        >
          [用户标签]
        </el-button>
        <el-button
          type="success"
          link
          v-permission="'recycleOrder:awaitDelivery:receive'"
          @click="handleBatchReceive(row)"
        >
          [确认收货]
        </el-button>
        <el-button
          type="danger"
          link
          v-permission="'recycleOrder:awaitDelivery:interception'"
          @click="applyForInterception(row)"
        >
          [申请拦截退回]
        </el-button>
      </div>
    </template>

    <order-log ref="orderLogRef" />
    <userBindTag ref="userTagRef" />
  </order-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { DownloadOutlined } from '@/components/icons';
  import OrderPage from '@/views/recycleOrder/components/order-page.vue';
  import { useDictData } from '@/utils/use-dict-data';
  import { useRouter } from 'vue-router';

  //订单日志
  import orderLog from '@/views/recycleOrder/components/order-log.vue';
  //用户标签
  import userBindTag from '@/views/recycleOrder/components/user-bind-tag.vue';

  defineOptions({ name: 'recycleOrderawaitDelivery' });

  let router = useRouter();
  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '',
    exportUrl: '',
    fileName: '待签收订单',
    cacheKey: 'awaitDeliveryTable'
  });

  //批量初审
  function handleBatchAudit() {
    pageRef.value?.operatBatch({
      title: '确认批量审核？',
      url: '/recycleOrder/batchAudit'
    });
  }

  //批量取消订单
  function handleBatchReceive(row) {
    pageRef.value?.operatBatch({
      title: '确认收货？',
      row,
      url: '/recycleOrder/batchAudit'
    });
  }

  //订单详情
  function toOrderDetail(row) {
    router.push({ path: '/recycleOrder/detail', query: { id: row.postId } });
  }

  //订单日志
  const orderLogRef = ref(null);
  function openOrderLog(row) {
    console.log(row, orderLogRef.value, 'row');

    orderLogRef.value?.handleOpen(row);
  }

  //用户绑定标签
  const userTagRef = ref(null);
  function openEditUserTag(row) {
    userTagRef.value?.handleOpen(row);
  }

  function messageBoxConfirm({ message, url, row }) {
    ElMessageBox.confirm(message, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'warning'
    }).then(() => {
      console.log(row, 'row');
    });
  }

  //取消订单
  function cancelOrder(row) {
    messageBoxConfirm({ message: '确认取消?', url: '', row });
  }
  //回退状态
  function fallbackOrder(row) {
    messageBoxConfirm({ message: '确认回退状态?', url: '', row });
  }
  //确认收货
  function materialPickup(row) {
    messageBoxConfirm({ message: '确认收货?', url: '', row });
  }
  //申请拦截退回
  function applyForInterception(row) {
    messageBoxConfirm({ message: '确认申请拦截退回?', url: '', row });
  }

  // 选中值
  const checked = ref();
  // 数据
  const items = ref([
    {
      value: 1,
      title: '已揽件-物流异常',
      content: 12,
      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
    },
    {
      value: 2,
      title: '已签收-收货超时',
      content: 5,
      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
    },
    {
      value: 3,
      title: '已收货-审核超时',
      content: 12,
      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
    },
    {
      value: 4,
      title: '已到仓-收货超时',
      content: 12,
      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
    }
  ]);
</script>