✨ feat: 生产管理
This commit is contained in:
砂糖
@@ -41,7 +41,7 @@ body {
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.el-button {
|
||||
padding: 6px 12px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 2px;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
@@ -58,7 +58,7 @@ body {
|
||||
}
|
||||
|
||||
.el-button--mini {
|
||||
padding: 2px 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
<script>
|
||||
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
|
||||
import { debounce } from 'lodash' // 防抖：避免频繁触发接口请求
|
||||
import { debounce } from '@/utils' // 防抖：避免频繁触发接口请求
|
||||
|
||||
export default {
|
||||
name: 'MSpecSelect',
|
||||
|
||||
@@ -9,62 +9,6 @@
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="手机" prop="mobile">
|
||||
<el-input
|
||||
v-model="queryParams.mobile"
|
||||
placeholder="请输入手机"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="telephone">
|
||||
<el-input
|
||||
v-model="queryParams.telephone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input
|
||||
v-model="queryParams.qq"
|
||||
placeholder="请输入QQ"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input
|
||||
v-model="queryParams.wechat"
|
||||
placeholder="请输入微信"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="queryParams.email"
|
||||
placeholder="请输入邮箱"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地区编号" prop="areaId">
|
||||
<el-input
|
||||
v-model="queryParams.areaId"
|
||||
placeholder="请输入地区编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" prop="detailAddress">
|
||||
<el-input
|
||||
v-model="queryParams.detailAddress"
|
||||
placeholder="请输入详细地址"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-input
|
||||
v-model="queryParams.level"
|
||||
|
||||
@@ -1,60 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 订单信息展示区域 -->
|
||||
<el-descriptions title="订单信息" class="margin-top mb8" :column="4" size="medium" border v-if="orderInfo">
|
||||
<!-- <el-descriptions title="订单信息" class="margin-top mb8" :column="4" size="medium" border v-if="orderInfo">
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
订单编号
|
||||
</template>
|
||||
{{ orderInfo.orderCode }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
{{ orderInfo.orderCode }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
订单状态
|
||||
</template>
|
||||
<dict-tag :options="dict.type.order_status" :value="orderInfo.orderStatus"/>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<dict-tag :options="dict.type.order_status" :value="orderInfo.orderStatus" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
:disabled="!canEdit"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="!canEdit"
|
||||
@click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single || !canEdit"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single || !canEdit"
|
||||
@click="handleUpdate">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple || !canEdit"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || !canEdit"
|
||||
@click="handleDelete">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -78,39 +54,19 @@
|
||||
<el-table-column label="含税单价" align="center" prop="taxPrice" />
|
||||
<el-table-column label="无税单价" align="center" prop="noTaxPrice" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
:disabled="!canEdit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
@click="handleSpec(scope.row)"
|
||||
>产品规范</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
:disabled="!canEdit"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="!canEdit"
|
||||
@click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="!canEdit"
|
||||
@click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
|
||||
<!-- 添加或修改订单明细对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
@@ -131,7 +87,8 @@
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.taxPrice" placeholder="请输入含税单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="无税单价" prop="noTaxPrice">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价" :min="0" :max="form.taxPrice" />
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价"
|
||||
:min="0" :max="form.taxPrice" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
@@ -143,12 +100,11 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="500px" append-to-body>
|
||||
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit"/>
|
||||
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
|
||||
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit" />
|
||||
<div v-else-if="canEdit">
|
||||
<el-select placeholder="请选择产品规范" @change="handleChangeSpec">
|
||||
<el-option v-for="item in productSpecList" :key="item.groupId" :label="item.specName" :value="item.groupId" />
|
||||
|
||||
<el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
|
||||
<el-option v-for="item in productSpecList" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
|
||||
<template #empty>
|
||||
<el-button type="primary" @click="handleAddSpec">新增产品规范</el-button>
|
||||
</template>
|
||||
@@ -294,7 +250,7 @@ export default {
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.detailId)
|
||||
this.single = selection.length!==1
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
handleAdd() {
|
||||
@@ -383,7 +339,13 @@ export default {
|
||||
// 确认更换
|
||||
this.$modal && this.$modal.confirm('是否确认更换产品规范？').then(() => {
|
||||
this.form.groupId = groupId;
|
||||
this.submitForm();
|
||||
updateOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
handleAddSpec() {
|
||||
@@ -396,4 +358,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-button--text {
|
||||
margin: 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,169 +1,200 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="订单编号" prop="orderCode">
|
||||
<el-input
|
||||
v-model="queryParams.orderCode"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称" prop="customerId">
|
||||
<customer-select v-model="queryParams.customerId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<el-input
|
||||
v-model="queryParams.salesManager"
|
||||
placeholder="请输入销售经理"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 左右布局容器 -->
|
||||
<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="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
<!-- 功能按钮区 -->
|
||||
<!-- <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>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
|
||||
<!-- 右侧：详情区（占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-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="订单ID" align="center" prop="orderId" v-if="false"/>
|
||||
<el-table-column label="订单编号" align="center" prop="orderCode" />
|
||||
<el-table-column label="客户名称" align="center" prop="customerName" />
|
||||
<el-table-column label="销售经理" align="center" prop="salesManager" />
|
||||
<el-table-column label="含税金额" align="center" prop="taxAmount" />
|
||||
<el-table-column label="无税金额" align="center" prop="noTaxAmount" />
|
||||
<el-table-column label="订单状态" align="center" prop="orderStatus" v-if="!isPre">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.orderStatus" @change="handleOrderStatusChange(scope.row)">
|
||||
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
<!-- <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
@click="showDetail(scope.row)"
|
||||
>明细</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
@click="copyOrderId(scope.row)"
|
||||
>复制订单ID</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-s-operation"
|
||||
@click="handleStartProduction(scope.row)"
|
||||
v-if="!isPre"
|
||||
>
|
||||
确认订单
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改订单主对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单编号" prop="orderCode">
|
||||
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称" prop="customerId">
|
||||
<customer-select v-model="form.customerId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<el-input v-model="form.salesManager" placeholder="请输入销售经理" />
|
||||
</el-form-item>
|
||||
<el-form-item label="含税金额" prop="taxAmount">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.taxAmount" placeholder="请输入含税金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="无税金额" prop="noTaxAmount">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.noTaxAmount" placeholder="请输入无税金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<!-- 新增订单弹窗 -->
|
||||
<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="submitForm">确 定</el-button>
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 订单明细弹窗 -->
|
||||
<el-dialog title="订单明细" :visible.sync="detailDialogVisible" width="1200px" append-to-body>
|
||||
<OrderDetailPanel :orderId="detailOrderId" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -194,24 +225,26 @@ export default {
|
||||
EOrderStatus,
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
// 列表加载遮罩
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
// 选中的订单ID集合（用于批量操作）
|
||||
selectedIds: {},
|
||||
// 非多个禁用（批量删除用）
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 订单主表格数据
|
||||
// 订单列表数据
|
||||
orderList: [],
|
||||
// 弹出层标题
|
||||
// 新增弹窗标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
// 新增弹窗显示状态
|
||||
open: false,
|
||||
// 当前选中的订单ID（控制右侧详情显示）
|
||||
selectedOrderId: null,
|
||||
// 右侧激活的Tab
|
||||
activeTab: "orderDetail",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@@ -219,50 +252,10 @@ export default {
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: this.orderQueryStatus,
|
||||
orderStatus: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
detailDialogVisible: false,
|
||||
detailOrderId: null,
|
||||
clacDialogVisible: false,
|
||||
clacOrderId: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询订单主列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listByStatus(this.queryParams).then(response => {
|
||||
this.orderList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
goDashboard() {
|
||||
this.$router.push('/shop/order/dashboard');
|
||||
},
|
||||
handleOrderStatusChange(row) {
|
||||
// console.log(row);
|
||||
updateOrder(row).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
form: {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
@@ -274,118 +267,354 @@ export default {
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
taxAmount: undefined,
|
||||
noTaxAmount: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
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();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.orderId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
|
||||
/** 重置表单 */
|
||||
resetForm(formRef) {
|
||||
if (this.$refs[formRef]) {
|
||||
this.$refs[formRef].resetFields();
|
||||
}
|
||||
},
|
||||
copyOrderId(row) {
|
||||
// 获取浏览器剪切板对象并复制row.orderId
|
||||
// 先检查是否支持
|
||||
|
||||
/** 复制订单ID */
|
||||
copyOrderId(orderId) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(row.orderId);
|
||||
this.$modal.msgSuccess("复制成功");
|
||||
navigator.clipboard.writeText(orderId).then(() => {
|
||||
this.$modal.msgSuccess("复制成功");
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("复制失败，请手动复制");
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError("浏览器不支持复制功能");
|
||||
}
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
|
||||
/** 新增订单 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
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 = "添加订单主";
|
||||
this.title = "添加订单";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const orderId = row.orderId || this.ids
|
||||
getOrder(orderId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改订单主";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
|
||||
/** 提交新增表单 */
|
||||
submitAddForm() {
|
||||
this.$refs["addForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.orderId != null) {
|
||||
updateOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
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) {
|
||||
const orderIds = row.orderId || this.ids;
|
||||
this.$modal.confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项？').then(() => {
|
||||
// 获取要删除的订单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.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
// 如果删除的是当前选中的订单，清空详情
|
||||
if (row && this.selectedOrderId === row.orderId) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("删除失败");
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/order/export', {
|
||||
...this.queryParams
|
||||
}, `order_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
showDetail(row) {
|
||||
this.detailOrderId = row.orderId;
|
||||
this.detailDialogVisible = true;
|
||||
},
|
||||
showClac(row) {
|
||||
this.clacOrderId = row.orderId;
|
||||
this.clacDialogVisible = true;
|
||||
},
|
||||
|
||||
/** 预订单确认 */
|
||||
handleStartProduction(row) {
|
||||
updateOrder({
|
||||
orderId: row.orderId,
|
||||
orderStatus: 1
|
||||
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>
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
<script>
|
||||
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
|
||||
import { debounce } from 'lodash' // 防抖：避免频繁触发接口请求
|
||||
import { debounce } from '@/utils' // 防抖：避免频繁触发接口请求
|
||||
|
||||
export default {
|
||||
name: 'MSpecSelect',
|
||||
|
||||
138
klp-ui/src/views/work/components/PSpecSelect.vue
Normal file
138
klp-ui/src/views/work/components/PSpecSelect.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="innerValue"
|
||||
placeholder="请选择或搜索制造规范"
|
||||
clearable
|
||||
filterable
|
||||
remote
|
||||
:remote-method="handleRemoteSearch"
|
||||
:loading="loading"
|
||||
@change="handleSelectChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- 下拉选项：循环制造规范列表 -->
|
||||
<el-option
|
||||
v-for="item in mSpecList"
|
||||
:key="item.specId"
|
||||
:label="item.specName"
|
||||
:value="item.specId"
|
||||
/>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<el-option
|
||||
v-if="mSpecList.length === 0 && !loading"
|
||||
value=""
|
||||
disabled
|
||||
>
|
||||
暂无匹配制造规范
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
|
||||
import { debounce } from '@/utils' // 防抖：避免频繁触发接口请求
|
||||
|
||||
export default {
|
||||
name: 'MSpecSelect',
|
||||
// 1. 接收外部传入的v-model值（必加，双向绑定的入口）
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, undefined], // 支持字符串/数字ID（兼容不同后端返回类型）
|
||||
default: undefined // 初始值默认undefined（未选择状态）
|
||||
},
|
||||
// 可选：允许外部自定义搜索参数的字段名（增强组件复用性）
|
||||
searchKey: {
|
||||
type: String,
|
||||
default: 'specName' // 默认为“规范名称”搜索（对应接口的mSpecName参数）
|
||||
},
|
||||
// 可选：每页加载数量（外部可配置）
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mSpecList: [], // 制造规范列表数据
|
||||
loading: false, // 远程请求加载状态
|
||||
queryParams: {
|
||||
// 搜索参数：默认用specName（可通过searchKey自定义）
|
||||
specName: undefined,
|
||||
pageNum: 1, // 分页：当前页码
|
||||
pageSize: this.pageSize // 分页：每页条数（关联props的pageSize）
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 2. 核心：内部值与外部value的双向同步桥梁
|
||||
innerValue: {
|
||||
get() {
|
||||
// 外部传入的value -> 内部el-select的v-model值（初始回显）
|
||||
return this.value
|
||||
},
|
||||
set(newVal) {
|
||||
// 内部el-select值变化时 -> 触发input事件，同步给外部v-model
|
||||
this.$emit('input', newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 3. 监听外部value变化（如父组件直接修改v-model值），同步更新内部选择状态
|
||||
value(newVal) {
|
||||
// 仅当外部值与内部值不一致时更新（避免死循环）
|
||||
if (newVal !== this.innerValue) {
|
||||
this.innerValue = newVal
|
||||
}
|
||||
},
|
||||
// 监听searchKey变化（外部修改搜索字段时，重置搜索参数）
|
||||
searchKey(newKey) {
|
||||
// 清空原搜索字段的值（避免残留旧字段的搜索条件）
|
||||
this.queryParams[this.searchKey] = undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化：加载默认制造规范列表
|
||||
this.getList()
|
||||
// 初始化防抖函数（300ms延迟，可根据需求调整）
|
||||
this.debouncedSearch = debounce(this.getList, 300)
|
||||
},
|
||||
methods: {
|
||||
// 4. 远程搜索逻辑（输入时触发）
|
||||
handleRemoteSearch(query) {
|
||||
// 根据searchKey设置搜索参数（如：specName=query）
|
||||
this.queryParams[this.searchKey] = query.trim() // 去除首尾空格，避免无效搜索
|
||||
this.queryParams.pageNum = 1 // 重置页码为1（新搜索从第一页开始）
|
||||
this.debouncedSearch() // 防抖后执行搜索
|
||||
},
|
||||
|
||||
// 5. 获取制造规范列表（远程接口请求）
|
||||
getList() {
|
||||
this.loading = true // 开始加载：显示加载动画
|
||||
listManufacturingSpec(this.queryParams)
|
||||
.then(res => {
|
||||
// 接口成功：赋值列表数据（兼容res.rows或res.data.rows，避免接口返回格式差异）
|
||||
this.mSpecList = res.rows || res.data?.rows || []
|
||||
})
|
||||
.catch(() => {
|
||||
// 接口失败：清空列表，避免旧数据残留
|
||||
this.mSpecList = []
|
||||
this.$message.error('获取制造规范列表失败，请重试') // 错误提示（优化用户体验）
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false // 结束加载：隐藏加载动画
|
||||
})
|
||||
},
|
||||
|
||||
// 6. 选择变化时触发（返回完整订单项，方便父组件使用）
|
||||
handleSelectChange(mSpecId) {
|
||||
// 根据选中的ID，找到对应的完整制造规范对象
|
||||
const selectedItem = this.mSpecList.find(item => item.specId === mSpecId)
|
||||
// 触发change事件：返回完整项（父组件可通过@change接收）
|
||||
this.$emit('change', selectedItem)
|
||||
// 可选：触发input事件后，额外触发change事件（符合常规组件使用习惯）
|
||||
this.$emit('update:value', selectedItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
}
|
||||
// 处理数据，兼容多种字段名，保证任务名唯一
|
||||
const taskData = this.tasks.map((item, idx) => {
|
||||
const name = (item.remark || item.taskName || item.productName || item.name || `任务${idx+1}`) + (item.productName ? `-${item.productName}` : '');
|
||||
const name = (item.taskName || item.planName || item.remark || item.productName || item.name || `任务${idx+1}`) + (item.productName ? `-${item.productName}` : '');
|
||||
const start = item.startDate || item.start_time || item.start || item.start_date;
|
||||
const end = item.endDate || item.end_time || item.end || item.end_date;
|
||||
console.log(item.lineId, item.orderId, idx, '颜色取值依据')
|
||||
|
||||
@@ -292,8 +292,8 @@ export default {
|
||||
processParams: undefined,
|
||||
scope: undefined,
|
||||
inspectionStandard: undefined,
|
||||
status: undefined,
|
||||
specType: undefined,
|
||||
status: 1,
|
||||
specType: 1,
|
||||
version: undefined,
|
||||
versionDate: undefined,
|
||||
standardHours: undefined,
|
||||
|
||||
@@ -9,21 +9,21 @@
|
||||
:value="item.lineId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="批次" prop="batchId">
|
||||
<el-form-item label="生产任务" :prop="binding.key">
|
||||
<!-- <el-select v-model="detailForm.productId" placeholder="请选择产品" filterable>
|
||||
<el-option v-for="item in productList" :key="item.productId" :label="item.productName"
|
||||
:value="item.productId" />
|
||||
</el-select> -->
|
||||
<el-select clearable v-model="detailForm.batchId" placeholder="请选择批次" filterable @change="onBatchChange">
|
||||
<el-option v-for="item in batchList" :key="item.batchId" :label="item.batchNo" :value="item.batchId" />
|
||||
<el-select clearable v-model="detailForm.taskId" placeholder="请选择生产任务" filterable @change="onTaskChange">
|
||||
<el-option v-for="item in taskList" :key="item.taskId" :label="item.planName" :value="item.taskId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排产数量" prop="quantity">
|
||||
<el-input-number :controls=false controls-position="right" v-model="detailForm.quantity" disabled :min="0.01" :step="0.01" style="width:100%" />
|
||||
<el-input-number :controls=false controls-position="right" v-model="detailForm.quantity" :min="0.01" :step="0.01" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划日期" prop="dateRange">
|
||||
<el-date-picker v-model="detailForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" style="width:100%" />
|
||||
end-placeholder="结束日期" style="width:100%" @change="onDateRangeChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="detailForm.remark" placeholder="请输入备注" />
|
||||
@@ -47,22 +47,28 @@
|
||||
import { listProductionLine } from '@/api/wms/productionLine';
|
||||
import { ganttProductionLine } from '@/api/wms/productionLine';
|
||||
import { addSchedulePlanDetail, updateSchedulePlanDetail } from '@/api/wms/schedulePlanDetail';
|
||||
import { listBatch } from '@/api/wms/batch';
|
||||
import { listProductionTask } from '@/api/work/productionTask';
|
||||
|
||||
import GanttChartEcharts from '../line/GanttChartEcharts.vue';
|
||||
|
||||
const binding = {
|
||||
key: 'taskId',
|
||||
label: 'planName',
|
||||
api: listProductionTask,
|
||||
text: '生产任务'
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GanttChartEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
binding,
|
||||
detailForm: {
|
||||
detailId: undefined,
|
||||
planId: undefined,
|
||||
lineId: undefined,
|
||||
// productId: undefined,
|
||||
batchId: undefined,
|
||||
[binding.key]: undefined,
|
||||
quantity: 0,
|
||||
dateRange: [],
|
||||
startDate: '',
|
||||
@@ -70,18 +76,19 @@ export default {
|
||||
remark: ''
|
||||
},
|
||||
detailRules: {
|
||||
batchId: [{ required: true, message: '请选择产品', trigger: 'change' }],
|
||||
[binding.key]: [{ required: true, message: '请选择' + binding.text, trigger: 'change' }],
|
||||
lineId: [{ required: true, message: '请选择产线', trigger: 'change' }],
|
||||
quantity: [{ required: true, message: '请输入排产数量', trigger: 'blur' }],
|
||||
dateRange: [{ required: true, type: 'array', len: 2, message: '请选择计划日期区间', trigger: 'change' }]
|
||||
},
|
||||
lineGanttTasks: [],
|
||||
productionLineList: [],
|
||||
previewTask: null,
|
||||
previewTask: {},
|
||||
taskList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchBatchList();
|
||||
this.fetchTaskList();
|
||||
this.fetchProductionLineList();
|
||||
},
|
||||
methods: {
|
||||
@@ -90,6 +97,25 @@ export default {
|
||||
this.productionLineList = res.rows || [];
|
||||
});
|
||||
},
|
||||
onTaskChange(taskId) {
|
||||
const task = this.taskList.find(item => item.taskId === taskId);
|
||||
if (task) {
|
||||
this.previewTask = {
|
||||
...this.previewTask,
|
||||
taskName: task.taskName,
|
||||
planName: task.planName,
|
||||
};
|
||||
}
|
||||
},
|
||||
onDateRangeChange(dateRange) {
|
||||
if (dateRange && dateRange.length === 2) {
|
||||
const startDate = this.parseTime(dateRange[0], '{y}-{m}-{d} {h}:{i}:{s}');
|
||||
const endDate = this.parseTime(dateRange[1], '{y}-{m}-{d} {h}:{i}:{s}');
|
||||
console.log(startDate, endDate);
|
||||
this.previewTask.startDate = startDate;
|
||||
this.previewTask.endDate = endDate;
|
||||
}
|
||||
},
|
||||
onLineChange(lineId) {
|
||||
if (!lineId) {
|
||||
this.lineGanttTasks = [];
|
||||
@@ -100,23 +126,9 @@ export default {
|
||||
this.updatePreviewTask();
|
||||
});
|
||||
},
|
||||
onBatchChange(batchId) {
|
||||
if (batchId) {
|
||||
// 从batchList中查找
|
||||
const batch = this.batchList.find(item => item.batchId == batchId);
|
||||
console.log(batch);
|
||||
if (batch) {
|
||||
this.detailForm.quantity = batch.totalQuantity;
|
||||
this.detailForm.dateRange = [
|
||||
batch.estimatedStartTime,
|
||||
batch.estimatedEndTime
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
fetchBatchList() {
|
||||
listBatch({ pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
this.batchList = res.rows || [];
|
||||
fetchTaskList() {
|
||||
listProductionTask({ pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
this.taskList = res.rows || [];
|
||||
});
|
||||
},
|
||||
submitDetailForm() {
|
||||
@@ -130,7 +142,7 @@ export default {
|
||||
this.detailForm.endDate = '';
|
||||
}
|
||||
const api = this.detailForm.detailId ? updateSchedulePlanDetail : addSchedulePlanDetail;
|
||||
const data = Object.assign({}, this.detailForm, { planId: this.planId });
|
||||
const data = Object.assign({}, this.detailForm, { taskId: this.detailForm.taskId });
|
||||
api(data).then(() => {
|
||||
this.$message.success(this.detailForm.detailId ? '修改成功' : '新增成功');
|
||||
this.detailDialogVisible = false;
|
||||
|
||||
@@ -41,6 +41,7 @@ export default {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
orderCode: undefined,
|
||||
orderStatus: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
|
||||
@@ -100,14 +100,22 @@
|
||||
|
||||
<el-table v-loading="loading" :data="productionTaskList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键" align="center" prop="taskId" v-if="true"/>
|
||||
<el-table-column label="产品规范组ID" align="center" prop="productSpecGroupId" />
|
||||
<el-table-column label="制造规范ID" align="center" prop="manufacturingSpecId" />
|
||||
<el-table-column label="订单ID" align="center" prop="orderId" />
|
||||
<el-table-column label="订单明细ID" align="center" prop="orderItemId" />
|
||||
<el-table-column label="主键" align="center" prop="taskId" v-if="false" />
|
||||
<!-- <el-table-column label="产品规范组ID" align="center" prop="productSpecGroupId" /> -->
|
||||
<el-table-column label="产品规范组" align="center" prop="productSpecGroup.groupName" />
|
||||
<el-table-column label="产品规范名" align="center" prop="productSpecGroup.groupCode" />
|
||||
<el-table-column label="工艺步骤" align="center" prop="manufacturingSpec.processRoute" />
|
||||
<el-table-column label="制造规范名" align="center" prop="manufacturingSpec.specName" />
|
||||
<el-table-column label="制造规范编号" align="center" prop="manufacturingSpec.specCode" />
|
||||
<el-table-column label="订单编号" align="center" prop="orderCode" />
|
||||
<el-table-column label="生产产品" align="center">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo :productId="scope.row.productId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划名称" align="center" prop="planName" />
|
||||
<el-table-column label="计划编号" align="center" prop="planCode" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
<!-- <el-table-column label="状态" align="center" prop="status" /> -->
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
@@ -139,10 +147,10 @@
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="产品规范组" prop="productSpecGroupId">
|
||||
<el-input v-model="form.productSpecGroupId" placeholder="请输入产品规范组" />
|
||||
<PSpecSelect v-model="form.productSpecGroupId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="制造规范" prop="manufacturingSpecId">
|
||||
<el-input v-model="form.manufacturingSpecId" placeholder="请输入制造规范" />
|
||||
<MSpecSelect v-model="form.manufacturingSpecId" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="订单" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单" />
|
||||
@@ -175,11 +183,17 @@
|
||||
<script>
|
||||
import { listProductionTask, getProductionTask, delProductionTask, addProductionTask, updateProductionTask } from "@/api/work/productionTask";
|
||||
import CreateByOrder from "./panels/createByOrder.vue";
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import MSpecSelect from "../components/MSpecSelect.vue";
|
||||
import PSpecSelect from "../components/PSpecSelect.vue";
|
||||
|
||||
export default {
|
||||
name: "ProductionTask",
|
||||
components: {
|
||||
CreateByOrder
|
||||
CreateByOrder,
|
||||
ProductInfo,
|
||||
MSpecSelect,
|
||||
PSpecSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -353,15 +367,35 @@ export default {
|
||||
},
|
||||
handleConfirmCreate(orderItems) {
|
||||
console.log(orderItems);
|
||||
Promise.all(orderItems.map(item => {
|
||||
return addProductionTask({
|
||||
productSpecGroupId: item.productSpecGroupId,
|
||||
manufacturingSpecIds: item.manufacturingSpecIds,
|
||||
orderId: item.orderId,
|
||||
orderItemId: item.orderItemId,
|
||||
});
|
||||
const params = [];
|
||||
const orderId = orderItems[0].orderId;
|
||||
|
||||
for (const item of orderItems) {
|
||||
if (item.groupId == undefined) {
|
||||
continue;
|
||||
}
|
||||
for (const manufacturingSpecId of item.manufacturingSpecIds) {
|
||||
params.push({
|
||||
productSpecGroupId: item.groupId,
|
||||
manufacturingSpecId: manufacturingSpecId,
|
||||
orderId: item.orderId,
|
||||
orderItemId: item.detailId,
|
||||
planName: '生产任务' + item.detailId,
|
||||
planCode: 'PT' + item.detailId,
|
||||
})
|
||||
}
|
||||
}
|
||||
Promise.all(params.map(item => {
|
||||
return addProductionTask(item);
|
||||
})).then(res => {
|
||||
this.$modal.msgSuccess("创建成功");
|
||||
// 是否将订单状态设置为生产中？
|
||||
this.$modal.confirm('是否将订单状态设置为生产中？').then(() => {
|
||||
updateOrder({
|
||||
orderId,
|
||||
orderStatus: 2
|
||||
});
|
||||
});
|
||||
this.detailDialogVisible = false;
|
||||
this.getList();
|
||||
});
|
||||
|
||||
@@ -22,7 +22,9 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="制造规格">
|
||||
<template slot-scope="scope">
|
||||
<MSpecSelect v-model="scope.row.manufacturingSpecIds" />
|
||||
<el-select v-model="scope.row.manufacturingSpecIds" placeholder="请选择制造规格" multiple>
|
||||
<el-option v-for="item in manufacturingSpecList" :key="item.specId" :label="item.specName" :value="item.specId" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -30,7 +32,12 @@
|
||||
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="600px" append-to-body>
|
||||
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="false"/>
|
||||
<div v-else>
|
||||
暂无产品规格
|
||||
<el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
|
||||
<el-option v-for="item in productSpecList.filter(item => item.productId != this.form.productId)" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
|
||||
<template #empty>
|
||||
<el-button type="primary" @click="handleAddSpec">新增产品规范</el-button>
|
||||
</template>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -38,11 +45,14 @@
|
||||
|
||||
<script>
|
||||
import OrderSelect from "../components/OrderSelect";
|
||||
import { listOrderDetail } from "@/api/wms/orderDetail";
|
||||
import { listOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import MSpecSelect from "@/views/work/components/MSpecSelect";
|
||||
import ProductSpec from "@/views/wms/order/panels/spec.vue";
|
||||
|
||||
import { listManufacturingSpec } from "@/api/work/manufacturingSpec";
|
||||
import { listProductSpecGroup } from "@/api/work/productSpecGroup";
|
||||
|
||||
export default {
|
||||
name: 'CreateByOrder',
|
||||
components: {
|
||||
@@ -51,6 +61,14 @@ export default {
|
||||
MSpecSelect,
|
||||
ProductSpec
|
||||
},
|
||||
created() {
|
||||
listManufacturingSpec().then(res => {
|
||||
this.manufacturingSpecList = res.rows;
|
||||
})
|
||||
listProductSpecGroup().then(response => {
|
||||
this.productSpecList = response.rows;
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
order: null,
|
||||
@@ -58,7 +76,9 @@ export default {
|
||||
specDialogVisible: false,
|
||||
form: {
|
||||
groupId: undefined
|
||||
}
|
||||
},
|
||||
manufacturingSpecList: [],
|
||||
productSpecList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -72,11 +92,39 @@ export default {
|
||||
},
|
||||
handleCreate() {
|
||||
console.log(this.orderItems);
|
||||
if (this.orderItems.length === 0) {
|
||||
this.$message.error('请选择订单');
|
||||
return;
|
||||
}
|
||||
for (const item of this.orderItems) {
|
||||
if (item.groupId && item.manufacturingSpecIds.length === 0) {
|
||||
this.$message.error('请选择制造规格');
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$emit('create', this.orderItems);
|
||||
},
|
||||
handleSpec(row) {
|
||||
this.specDialogVisible = true;
|
||||
this.form = row;
|
||||
},
|
||||
handleChangeSpec(groupId) {
|
||||
// 确认更换
|
||||
this.$modal && this.$modal.confirm('是否确认更换产品规范？').then(() => {
|
||||
this.form.groupId = groupId;
|
||||
updateOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
handleAddSpec() {
|
||||
this.$router.push({
|
||||
path: '/production/pspec',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user