klp-oa/klp-ui/src/views/wms/order/panels/orderPage.vue

<template>
  <div class="app-container">
    <!-- 左右布局容器 -->
    <el-row :gutter="20">
      <!-- 左侧：自定义简洁订单列表区（占8列） -->
      <el-col :span="6" style="display: table-cell;">
        <!-- 搜索表单 - 精简搜索项 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
          class="mb-4">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
                @change="handleQuery" />
            </el-col>
            <el-col :span="8">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                class="w-full">新增订单</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 功能按钮区 -->
        <!-- <el-row :gutter="10" class="mb-4">
          <el-col :span="6">
            
          </el-col>
          <el-col :span="6">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
              class="w-full">批量删除</el-button>
          </el-col>
        </el-row> -->

        <!-- 自定义简洁列表 -->
        <div class="custom-list-container" v-loading="loading">
          <!-- 列表项 -->
          <div v-for="(item, index) in orderList" :key="item.orderId" class="order-item"
            :class="{ 'active': selectedOrderId === item.orderId }" @click="handleRowClick(item)">
            <!-- 复选框 -->
            <!-- <el-checkbox v-model="selectedIds[item.orderId]" @change.stop="handleCheckboxChange(item, $event)"
              class="checkbox"></el-checkbox> -->
            <!-- 订单编号 -->
            <div class="order-code">
              <span class="label">订单编号：</span>
              <span class="value">{{ item.orderCode }}</span>
            </div>

            <!-- 操作按钮组 -->
            <div class="order-actions">
              <!-- 预订单确认按钮 -->
              <el-button size="mini" plain title="预订单确认" type="success" icon="el-icon-check" v-if="isPre"
                @click.stop="handleStartProduction(item)"></el-button>

              <!-- 删除按钮 -->
              <el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="orderList.length === 0 && !loading" class="empty-state">
            <el-empty description="暂无订单数据" />
          </div>
        </div>

        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" class="mt-4" />
      </el-col>

      <!-- 右侧：详情区（占16列） -->
      <el-col :span="18">
        <div>
          <!-- 未选中行时显示提示 -->
          <div v-if="!selectedOrderId" class="empty-tip">
            <el-empty description="请从左侧选择一个订单查看详情" />
          </div>

          <!-- 选中行时显示Tab详情 -->
          <div v-else>
            <!-- Tab容器 -->
            <el-tabs v-loading="loading" v-model="activeTab" type="border-card" class="mt-2">
              <!-- 订单信息Tab -->
              <el-tab-pane label="订单信息" name="orderInfo">
                <el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
                  <!-- <el-row :gutter="20"> -->
                    <!-- <el-col :span="12"> -->
                      <el-form-item label="订单ID" prop="orderId">
                        <el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
                          <el-button style="padding: -1;" slot="append" size="mini" type="text" icon="el-icon-document-copy"
                            @click.stop="copyOrderId(form.orderId)"></el-button>
                        </el-input>
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="12"> -->
                      <el-form-item label="订单编号" prop="orderCode">
                        <el-input style="width: 60%;" v-model="form.orderCode" placeholder="无" disabled />
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="12"> -->
                      <el-form-item label="客户名称" prop="customerId">
                        <customer-select style="width: 60%;" v-model="form.customerId" />
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="12"> -->
                      <el-form-item label="销售经理" prop="salesManager">
                        <el-input style="width: 60%;" v-model="form.salesManager" placeholder="无" />
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="12"> -->
                      <el-form-item label="含税金额" prop="taxAmount">
                        <el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00" precision="2"
                          :min="0" />
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="12"> -->
                      <el-form-item label="无税金额" prop="noTaxAmount">
                        <el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00" precision="2"
                          :min="0" />
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="12" v-if="!isPre"> -->
                      <el-form-item label="订单状态" prop="orderStatus">
                        <el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange" size="mini">
                          <el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label"
                            :value="parseInt(item.value)" />
                        </el-select>
                      </el-form-item>
                    <!-- </el-col> -->
                    <!-- <el-col :span="24"> -->
                      <el-form-item label="备注" prop="remark">
                        <el-input style="width: 60%;" v-model="form.remark" placeholder="无" type="textarea" rows="4" />
                      </el-form-item>
                    <!-- </el-col> -->
                  <!-- </el-row> -->

                  <!-- 更新按钮 -->
                  <el-form-item class="text-right">
                    <el-button type="primary" size="mini" :loading="buttonLoading"
                      @click="submitDetailForm">更新订单信息</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <!-- 订单详情Tab -->
              <el-tab-pane label="订单详情" name="orderDetail">
                <div class="mt-4">
                  <OrderDetailPanel :orderId="selectedOrderId" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 新增订单弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="addForm" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderCode">
              <el-input v-model="form.orderCode" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerId">
              <customer-select v-model="form.customerId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售经理" prop="salesManager">
              <el-input v-model="form.salesManager" style="width: 100%;" placeholder="请输入销售经理" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="含税金额" prop="taxAmount">
              <el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额" precision="2"
                :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无税金额" prop="noTaxAmount">
              <el-input-number :controls="false" v-model="form.noTaxAmount" placeholder="请输入无税金额" precision="2"
                :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
import OrderDetailPanel from './detail.vue';
import { EOrderStatus } from "@/utils/enums";
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';

export default {
  name: "Order",
  components: { OrderDetailPanel, CustomerSelect },
  dicts: ['order_status'],
  props: {
    isPre: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    orderQueryStatus() {
      return this.isPre ? 0 : -1;
    }
  },
  data() {
    return {
      // 订单状态枚举
      EOrderStatus,
      // 按钮loading
      buttonLoading: false,
      // 列表加载遮罩
      loading: true,
      // 选中的订单ID集合（用于批量操作）
      selectedIds: {},
      // 非多个禁用（批量删除用）
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单列表数据
      orderList: [],
      // 新增弹窗标题
      title: "",
      // 新增弹窗显示状态
      open: false,
      // 当前选中的订单ID（控制右侧详情显示）
      selectedOrderId: null,
      // 右侧激活的Tab
      activeTab: "orderDetail",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderCode: undefined,
        customerId: undefined,
        salesManager: undefined,
        orderStatus: undefined,
      },
      // 表单参数
      form: {
        orderId: undefined,
        orderCode: undefined,
        customerId: undefined,
        salesManager: undefined,
        orderStatus: undefined,
        remark: undefined,
        delFlag: undefined,
        createTime: undefined,
        createBy: undefined,
        updateTime: undefined,
        updateBy: undefined,
        taxAmount: 0,
        noTaxAmount: 0,
      },
      // 表单校验规则
      rules: {
        orderCode: [
          { required: true, message: "请输入订单编号", trigger: "blur" }
        ],
        customerId: [
          { required: true, message: "请选择客户名称", trigger: "change" }
        ],
        salesManager: [
          { required: true, message: "请输入销售经理", trigger: "blur" }
        ],
        taxAmount: [
          { required: true, message: "请输入含税金额", trigger: "blur" }
        ],
        noTaxAmount: [
          { required: true, message: "请输入无税金额", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.queryParams.orderStatus = this.orderQueryStatus;
    this.getList();
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      listByStatus(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;

        // 重置选中状态
        this.selectedIds = {};
        this.checkMultipleStatus();

        // 如果之前选中的订单不在列表中了，清空选中状态
        if (this.selectedOrderId && !this.orderList.some(item => item.orderId === this.selectedOrderId)) {
          this.selectedOrderId = null;
        }

        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 点击列表项加载详情 */
    handleRowClick(item) {
      this.selectedOrderId = item.orderId;
      this.loadOrderDetail(item.orderId);
    },

    /** 加载订单详情 */
    loadOrderDetail(orderId) {
      this.buttonLoading = true;
      getOrder(orderId).then(response => {
        this.form = { ...response.data };
        this.form.taxAmount = this.form.taxAmount || 0;
        this.form.noTaxAmount = this.form.noTaxAmount || 0;
      }).catch(() => {
        this.$modal.msgError("加载订单详情失败");
      }).finally(() => {
        this.buttonLoading = false;
      });
    },

    /** 处理复选框变化 */
    handleCheckboxChange(item, checked) {
      this.selectedIds[item.orderId] = checked;
      this.checkMultipleStatus();
    },

    /** 检查批量操作状态 */
    checkMultipleStatus() {
      const selectedCount = Object.values(this.selectedIds).filter(checked => checked).length;
      this.multiple = selectedCount === 0;
    },

    /** 订单状态变更 */
    handleOrderStatusChange() {
      updateOrder(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getList();
      }).catch(() => {
        this.$modal.msgError("修改失败");
        this.loadOrderDetail(this.selectedOrderId); // 失败后重新加载原数据
      });
    },

    /** 取消新增 */
    cancel() {
      this.open = false;
      this.resetForm("addForm");
      this.form = {
        orderId: undefined,
        orderCode: undefined,
        customerId: undefined,
        salesManager: undefined,
        orderStatus: this.orderQueryStatus,
        remark: undefined,
        taxAmount: 0,
        noTaxAmount: 0,
      };
    },

    /** 搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置搜索 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.orderStatus = this.orderQueryStatus;
      this.handleQuery();
    },

    /** 重置表单 */
    resetForm(formRef) {
      if (this.$refs[formRef]) {
        this.$refs[formRef].resetFields();
      }
    },

    /** 复制订单ID */
    copyOrderId(orderId) {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(orderId).then(() => {
          this.$modal.msgSuccess("复制成功");
        }).catch(() => {
          this.$modal.msgError("复制失败，请手动复制");
        });
      } else {
        this.$modal.msgError("浏览器不支持复制功能");
      }
    },

    /** 新增订单 */
    handleAdd() {
      this.resetForm("addForm");
      this.form = {
        orderId: undefined,
        orderCode: undefined,
        customerId: undefined,
        salesManager: undefined,
        orderStatus: this.orderQueryStatus,
        remark: undefined,
        taxAmount: 0,
        noTaxAmount: 0,
      };
      this.open = true;
      this.title = "添加订单";
    },

    /** 提交新增表单 */
    submitAddForm() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          addOrder(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          }).catch(() => {
            this.$modal.msgError("新增失败");
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },

    /** 提交详情更新表单 */
    submitDetailForm() {
      this.$refs["detailForm"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          updateOrder(this.form).then(response => {
            this.$modal.msgSuccess("更新成功");
            this.getList();
          }).catch(() => {
            this.$modal.msgError("更新失败");
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },

    /** 删除订单 */
    handleDelete(row) {
      // 获取要删除的订单ID
      let orderIds;
      if (row) {
        // 单条删除
        orderIds = [row.orderId];
      } else {
        // 批量删除
        orderIds = Object.entries(this.selectedIds)
          .filter(([id, checked]) => checked)
          .map(([id]) => id);
      }

      if (!orderIds.length) {
        this.$modal.msgWarning("请选择要删除的订单");
        return;
      }

      this.$modal.confirm(`是否确认删除选中的 ${orderIds.length} 个订单？`).then(() => {
        this.loading = true;
        return delOrder(orderIds);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        // 如果删除的是当前选中的订单，清空详情
        if (row && this.selectedOrderId === row.orderId) {
          this.selectedOrderId = null;
        }
        this.getList();
      }).catch(() => {
        this.$modal.msgError("删除失败");
      }).finally(() => {
        this.loading = false;
      });
    },

    /** 预订单确认 */
    handleStartProduction(row) {
      this.$modal.confirm(`是否确认将订单"${row.orderCode}"转为正式订单？`).then(() => {
        return updateOrder({
          orderId: row.orderId,
          orderStatus: 1
        });
      }).then(response => {
        this.$modal.msgSuccess("已转化为正式订单");
        if (this.selectedOrderId === row.orderId) {
          this.selectedOrderId = null;
        }
        this.getList();
      }).catch(() => {
        this.$modal.msgError("转化失败");
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器样式 */
.page-container {
  height: 100%;
  padding: 16px;
}

/* 自定义列表容器 */
.custom-list-container {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 8px;
  margin-top: 10px;
}

/* 列表项样式 */
.order-item {
  padding: 12px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 选中状态 */
.order-item.active {
  border-left: 3px solid #409eff;
  background-color: #f5f7fa;
}

/* 订单编号样式 */
.order-code {
  display: flex;
  align-items: center;
}

.order-code .label {
  color: #606266;
  margin-right: 6px;
  font-size: 13px;
}

.order-code .value {
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

/* 操作按钮组 */
.order-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 复选框样式调整 */
.checkbox {
  margin-left: 8px;
}

/* 空状态样式 */
.empty-state {
  padding: 40px 0;
  text-align: center;
}

/* 右侧详情容器 */
.detail-container {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 32px);
}

/* 空提示样式 */
.empty-tip {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 表单样式调整 */
.el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-input-group__append,
::v-deep .el-input-group__prepend {
  width: 20px !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  text-align: center !important;
}
</style>