操作栏固定右边

peng

8 天以前 358edb064eba0e13627e85d60974d179ccbea0fe

 manager/src/views/order/order/orderList.vue

@@ -95,7 +95,20 @@
        :data="data"
        ref="table"
        sortable="custom"
      ></Table>
      >
        <template slot="sn" slot-scope="{ row }">
          <div style="width: 100%" @click="detail(row)">
          <span>{{row.sn}}</span>
          </div>
        </template>
        <template  slot="nickName" slot-scope="{ row }">
          <div style="width: 100%" @click="handleNickNameClick(row)">
            <span >{{row.nickName}}</span>
          </div>

        </template>

      </Table>

      <Row type="flex" justify="end" class="mt_10">
        <Page
@@ -180,6 +193,7 @@
          key: "sn",
          minWidth: 240,
          tooltip: true,
          slot: 'sn'
        },

        {
@@ -230,9 +244,10 @@
        },
        {
          title: "买家名称",
          key: "memberName",
          key: "nickName",
          minWidth: 130,
          tooltip: true,
          slot:'nickName'
        },

        {
@@ -292,26 +307,65 @@
          width: 170,
        },
        {
          title:"收货人",
          key:"consigneeName",
          width: 170,
        },
        {
          title:"手机号",
          key:"consigneeMobile",
          width: 170,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 100,
          width: 150,
          fixed:"right",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: { type: "info", size: "small" },
                style: { marginRight: "5px" },
                on: {
                  click: () => {
                    this.detail(params.row);
            const buttons = [];

            // 查看按钮 - 始终显示
            buttons.push(
              h(
                "Button",
                {
                  props: { type: "info", size: "small" },
                  style: { marginRight: "5px" },
                  on: {
                    click: () => {
                      this.detail(params.row);
                    },
                  },
                },
              },
              "查看"
                "查看"
              )
            );

            // 根据订单状态为'PAID'时显示额外操作按钮
            if (params.row.orderStatus === 'PAID') {
              buttons.push(
                h(
                  "Button",
                  {
                    props: { type: "primary", size: "small" },
                    style: { marginRight: "5px" },
                    on: {
                      click: () => {
                        this.handlePaidOrder(params.row);
                      },
                    },
                  },
                  "更新订单状态"
                )
              );
            }

            return h('div', buttons);
          },
        },


      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
@@ -331,6 +385,9 @@
    };
  },
  methods: {
    handleNickNameClick(row){
      this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.memberId } })
    },
    // 初始化数据
    init() {
      this.getDataList();
@@ -375,11 +432,47 @@
    // 跳转详情页面
    detail(v) {
      let sn = v.sn;
      this.$options.filters.customRouterPush({
      this.$router.push({
        name: "order-detail",
        query: { sn: sn },
      })

    },
    // 处理已付款订单的操作
    handlePaidOrder(order) {
      // 这里可以添加已付款订单的具体操作逻辑
      // 例如：显示确认对话框，发起发货请求等
      this.$Modal.confirm({
        title: '更新状态',
        content: `确认对订单号：${order.sn} 进行更新状操作吗？`,
        onOk: () => {
          // 调用发货API
          this.deliverOrder(order);
        },
        onCancel: () => {
          this.$Message.info('已取消操作');
        }
      });
    },
    // 发货操作
    deliverOrder(order) {
      console.log('------------->获取订单信息',order);
      console.log('订单sn编号',order.sn);
      // 调用发货API
      API_Order.sendMessage(order.sn).then((res) => {
        console.log('-------------->',res);
        if (res.success) {
          this.$Message.success('更新状态成功');
          // 延迟5秒刷新列表mq消息是异步的无法实时同步需要执行延迟刷新
          setTimeout(() => {
            this.getDataList();
          }, 5000);
        } else {
          this.$Message.error('更新状态失败');
        }
      }).catch((error) => {
        console.error('更新状态失败:', error);
        this.$Message.error('更新状态失败，请重试');
      });
    },
    // 导出订单
    async exportOrder() {