|
|
@@ -0,0 +1,268 @@
|
|
|
+<template>
|
|
|
+ <div class="ele-body">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="body-title">
|
|
|
+ <div class="title-left">销售订单转生产计划</div>
|
|
|
+ <div class="title-right">
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ <el-button type="primary" @click="toSubmit">
|
|
|
+ 提交计划
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="formbox">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
+ <el-form-item label="计划类型:">
|
|
|
+ <DictSelection dictName="订单计划类型" clearable v-model="form.type">
|
|
|
+ </DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
+ <el-form-item label="生产版本:" prop="edition">
|
|
|
+ <el-input placeholder="请选择生产版本" readonly v-model="form.edition"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
+ <el-form-item label="产线:" prop="productline">
|
|
|
+ <el-input v-model="form.productline"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
+ <el-form-item label="使用改型:" prop="remodel">
|
|
|
+ <el-checkbox v-model="form.remodel"></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="24" class="row-intro">
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
|
|
|
+ <el-form-item label="销售单数量:">3</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
|
|
|
+ <el-form-item label="订单总数量:">10000</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
|
|
|
+ <el-form-item label="订单总重量:">3021.23</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
|
|
|
+ <el-form-item label="产品编码:">W30000004536</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
+ <el-form-item label="牌号|型号:">YL10.2|BΦ16.0*330(MG)</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
|
|
|
+ <el-form-item label="库存数量:">1523</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ :data="form.tableData"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" align="center" width="60">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="销售订单号" align="center" prop="name" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="行号" align="center" prop="name">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="合同数量" align="center" prop="model">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="合同重量" align="center" prop="model">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="欠交数量" align="center" prop="model">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="计划生产数" align="center" prop="pNum" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item
|
|
|
+ label-width="0px"
|
|
|
+ :prop="'tableData.'+ scope.$index + '.pNum'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请输入计划生产数',
|
|
|
+ trigger: 'blur'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model.number="scope.row.pNum"
|
|
|
+ size="small"
|
|
|
+ oninput="value=value.replace(/[^\d]/g,'')"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="输入数量"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="要求成型数量" align="center" prop="mNum" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item
|
|
|
+ label-width="0px"
|
|
|
+ :prop="'tableData.'+ scope.$index + '.mNum'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请输入要求成型数量',
|
|
|
+ trigger: 'blur'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model.number="scope.row.mNum"
|
|
|
+ size="small"
|
|
|
+ oninput="value=value.replace(/[^\d]/g,'')"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="输入数量"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="按单按库" align="center" prop="model">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单类型" align="center" prop="model">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="交付日期" align="center" prop="measuringUnit">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="要求成型日期" align="center" prop="date" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item
|
|
|
+ label-width="0px"
|
|
|
+ :prop="'tableData.'+ scope.$index + '.date'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请选择要求成型日期',
|
|
|
+ trigger: 'blur'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%;"
|
|
|
+ v-model="scope.row.date"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" align="center" prop="measuringUnit">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="业务员" align="center" prop="measuringUnit">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="交付要求" align="center" prop="measuringUnit">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priority" label="优先级" width="100" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div class="sort-wrap">
|
|
|
+ <i class="el-icon-caret-top" @click="sortTop(row)"></i>
|
|
|
+ <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="70" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click="handleDeleteItem(scope.$index)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ form:{
|
|
|
+ tableData:[
|
|
|
+ {name:'122',model:'型号1',sort:1},
|
|
|
+ {name:'222',model:'型号2',sort:2}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 表单验证规则
|
|
|
+ rules: {
|
|
|
+ edition:[{required: true,message: '请选择生产版本',trigger: 'blur'}],
|
|
|
+ productline:[{required: true,message: '请选择产线',trigger: 'blur'}],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是否开启响应式布局
|
|
|
+ styleResponsive() {
|
|
|
+ return this.$store.state.theme.styleResponsive;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cancel(){
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ toSubmit(){
|
|
|
+
|
|
|
+ },
|
|
|
+ sortTop (row) {
|
|
|
+ if (row.sort <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let rowN = this.form.tableData.find((n) => n.sort == row.sort - 1);
|
|
|
+ rowN.sort += 1;
|
|
|
+ row.sort -= 1;
|
|
|
+ this.form.tableData.sort((a, b) => {
|
|
|
+ return a.sort - b.sort;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sortBottom (row) {
|
|
|
+ if (row.sort >= this.form.tableData.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let rowN = this.form.tableData.find((n) => n.sort == row.sort + 1);
|
|
|
+ rowN.sort -= 1;
|
|
|
+ row.sort += 1;
|
|
|
+ this.form.tableData.sort((a, b) => {
|
|
|
+ return a.sort - b.sort;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ againSort () {
|
|
|
+ this.form.tableData.forEach((n, index) => {
|
|
|
+ n.sort = index + 1;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .ele-body{
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .body-title{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .title-left{
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .formbox{
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
+ .row-intro{
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ }
|
|
|
+ .sort-wrap {
|
|
|
+ i {
|
|
|
+ font-size: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .el-icon-caret-top {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ color: #157a2c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
LAPTOP-16IUEB3P\Lenovo