核心代码如下：
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item>
</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" v-hasPermi="['business:pickOrder:add']">新增</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="订单编号" align="center" prop="id" width="100" />
<el-table-column label="上游公司" align="center" prop="oaSupplyChainName" />
<el-table-column label="产品名称" align="center" prop="product" />
<el-table-column label="产品单价(元/吨)" align="center" prop="price" />
<el-table-column label="实际数量(吨)" align="center" prop="actualNumber" />
<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>
</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="mywidth" append-to-body>
<el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="140px">
<el-row>
<el-form-item label="计划订单" prop="oaPickPlanId" v-if="!editShow">
<el-button type="primary" @click="open2 = true">请选择</el-button>
<el-table v-if="planData.length>0" :data="planData" style="border:1px solid #eee;border-bottom:none;margin-top:5px;">
<el-table-column label="ID" align="center" prop="id" width="80" />
<el-table-column label="上游公司" align="center" prop="oaSupplyChainName" />
<el-table-column label="上游公司地址" align="center" prop="oaAddressName" />
<el-table-column label="提货公司" align="center" prop="oaCompanyName" />
<el-table-column label="计划日期" align="center" prop="planDate" />
<el-table-column label="申报日期" align="center" prop="declarationDate" />
<el-table-column label="产品名称" align="center" prop="product" />
<el-table-column label="计划产品单价(元/吨)" align="center" prop="price" />
<el-table-column label="计划数量(吨)" align="center" prop="number" />
</el-table>
</el-form-item>
<el-form-item v-if="editShow || planData.length>0" label="产品单价" prop="price">
<el-input v-model="formData.price" placeholder="请输入产品单价" clearable class="full-width">
<template slot="append">元/吨</template>
</el-input>
</el-form-item>
<el-form-item v-if="editShow || planData.length>0" label="实际数量" prop="actualNumber">
<el-input v-model="formData.actualNumber" placeholder="请输入数量" clearable class="full-width">
<template slot="append">吨</template>
</el-input>
</el-form-item>
</el-row>
</el-form>
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
<!-- 选择计划任务 -->
<el-dialog title="选择计划任务" :visible.sync="open2" width="1200px" append-to-body>
<el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="98px">
<el-form-item label="上游公司" prop="oaSupplyChainName">
<el-input v-model="queryParams2.oaSupplyChainName" placeholder="请输入" clearable />
</el-form-item>
<el-form-item label="上游公司地址" prop="oaAddressName">
<el-input v-model="queryParams2.oaAddressName" placeholder="请输入" clearable />
</el-form-item>
<el-form-item label="提货公司" prop="oaCompanyName">
<el-input v-model="queryParams2.oaCompanyName" placeholder="请输入" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" @click="handlePlanSelect">确定</el-button>
</el-col>
<el-col :span="1.5">
<el-button plain @click="handlePlanClose">关闭</el-button>
</el-col>
</el-row>
<el-table v-loading="loading2" :data="list2">
<el-table-column label width="55">
<template slot-scope="scope">
<el-radio class="myradio" size="large" :label="scope.row.id" v-model="radioId" @change.native="changeRadio(scope.row)"> </el-radio>
</template>
</el-table-column>
<el-table-column label="ID" align="center" prop="id" width="100" />
<el-table-column label="上游公司" align="center" prop="oaSupplyChainName" />
<el-table-column label="上游公司地址" align="center" prop="oaAddressName" />
<el-table-column label="提货公司" align="center" prop="oaCompanyName" />
<el-table-column label="计划日期" align="center" prop="planDate" />
<el-table-column label="申报日期" align="center" prop="declarationDate" />
<el-table-column label="产品名称" align="center" prop="product" />
<el-table-column label="计划产品单价(元/吨)" align="center" prop="price" />
<el-table-column label="计划数量(吨)" align="center" prop="number" />
</el-table>
<pagination v-show="total2>0" :total="total2" :page.sync="queryParams2.pageNum" :limit.sync="queryParams2.pageSize" @pagination="getList2" class="pagination_center" />
</el-dialog>
</div>
</template>
<script>
import mixin from '@/utils/commonMixin.js'
export default {
mixins: [mixin],
data() {
return {
// 查询参数
queryParams: {
oaSupplyChainName: '',
oaAddressName: '',
oaCompanyName: '',
orderStates: [],
pageNum: 1,
pageSize: 10,
},
// 表单参数
formData: {
oaPickPlanId: '',//计划订单编号ID
price: '',//价格：产品单价 单位元/吨
actualNumber: '',//实际数量
},
rules: {
oaPickPlanId: [{ required: true, message: '请选择计划订单', trigger: 'change' }],
price: [
{ required: true, message: '请填写价格', trigger: 'blur' },
{ validator: Util.isMoneynum, trigger: 'blur' },
],
actualNumber: [
{ required: true, message: '请填写数量', trigger: 'blur' },
{ validator: Util.isWeightnum, trigger: 'blur' }
],
},
editShow: false,//修改的时候才显示
// 计划列表
planData: [],//选中的计划
planDataRow: [],//选中的计划的数据
open2: false,
list2: [],
total2: '',
loading2: false,
radioId: '',
// 查询参数
queryParams2: {
oaSupplyChainName: '',
oaAddressName: '',
oaCompanyName: '',
pageNum: 1,
pageSize: 10,
state: 1,
},
mywidth: '700px',
};
},
created() {
this.getList()
},
methods: {
// 查询列表
async getList() {
this.loading = true;
var res = await Util.getPickOrderList(this.queryParams)
if (res.code == '200') {
this.list = res.data.list;
this.total = res.data.total;
this.loading = false;
}
},
//删除
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除？').then(() => {
this.delConfirm(ids)
}).catch(() => { });
},
async delConfirm(ids) {
var res = await Util.delPickOrder(ids);
if (res.code == '200') {
this.getList();
this.$modal.msgSuccess("删除成功");
}
},
//取消表单
close() {
this.open = false;
this.reset();
},
//表单重置
reset() {
this.formData = {
oaPickPlanId: '',//计划订单编号ID
price: '',//价格：产品单价 单位元/吨
actualNumber: '',//实际数量
};
this.editShow = false
this.radioId = ''
this.planData = []
this.planDataRow = []
this.queryParams2 = {
oaSupplyChainName: '',
oaAddressName: '',
oaCompanyName: '',
pageNum: 1,
pageSize: 10,
state: 1,
}
this.mywidth = '700px'
this.resetForm("formData");
},
//添加
handleAdd() {
this.reset();
this.open = true;
this.title = "添加提货订单";
this.getList2()
},
//修改
async handleUpdate(row) {
this.reset();
var id = row.id || this.ids[0]
var res = await Util.getPickOrder(id)
if (res.code == '200') {
this.formData = res.data;
this.editShow = true
this.open = true;
this.title = "修改提货订单";
}
},
//提交表单
handleConfirm() {
this.$refs["formData"].validate(async valid => {
if (valid) {
this.$modal.loading()
.........
}
});
},
// 计划任务列表查询
async getList2() {
this.loading2 = true;
var res = await Util.getPickPlanList(this.queryParams2)
if (res.code == '200') {
this.list2 = res.data.list;
this.total2 = res.data.total;
this.loading2 = false;
}
},
// 计划任务选中按钮
handlePlanSelect() {
if (this.radioId) {
this.formData.oaPickPlanId = this.radioId
this.open2 = false
// 赋值
this.planData = this.planDataRow
this.formData.price = this.planData[0].price
this.formData.actualNumber = this.planData[0].number
this.mywidth = '1200px'
// 强制校验通过
this.$refs.formData.clearValidate(['oaPickPlanId'])
} else {
this.$modal.msgError(`请至少选中一项`);
}
},
// 计划任务关闭按钮
handlePlanClose() {
this.open2 = false;
},
// 计划任务单选
changeRadio(row) {
var arr = []
arr[0] = row
// 这里临时赋值，确定按钮点击后，planData的值为planDataRow
this.planDataRow = arr
},
// 计划任务搜索
handleQuery2() {
this.queryParams2.pageNum = 1;
this.getList2();
},
//计划任务重置搜索列表
resetQuery2() {
this.resetForm("queryForm2");
this.handleQuery2();
},
}
};
</script>
<style lang="scss" scoped>
</style>
网友评论