优化

src/views/produceOrder/components/unpackDialog.vue

@@ -1,203 +1,339 @@
 <template>
-  <ele-modal
-    width="60vw"
-    :visible.sync="visible"
-    :close-on-click-modal="true"
-    custom-class="ele-dialog-form"
-    :title="'拆分工单'"
-  >
+  <ele-modal width="60vw" :visible.sync="visible" :close-on-click-modal="true" custom-class="ele-dialog-form"
+    :title="'拆分工单'">
     <div class="form-wrapper">
-      <el-form
-        :model="requestData"
-        label-width="0"
-        :show-message="false"
-        ref="formRef"
-		:rules="rules"
-      >
+      <el-form :model="requestData" label-width="0" :show-message="false">
         <el-descriptions title="" :column="2" border>
           <el-descriptions-item label="工单号">
-            {{ formData.code }}</el-descriptions-item
-          >
+            {{ formData.code }}</el-descriptions-item>
           <el-descriptions-item label="物料编码">
-            {{ formData.productCode }}</el-descriptions-item
-          >
+            {{ formData.productCode }}</el-descriptions-item>
           <el-descriptions-item label="产品名称">{{
             formData.productName
           }}</el-descriptions-item>
           <el-descriptions-item label="牌号|型号">
-            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item
-          >
+            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item>
           <el-descriptions-item label="要求成型数量">{{
             formData.formingNum
           }}</el-descriptions-item>
-		  <el-descriptions-item label="计划开始时间">{{
-		    formData.planStartTime
-		  }}</el-descriptions-item>
-          <el-descriptions-item
-            label="成型数量"
-            label-class-name="produce-create-bg"
-            content-class-name="produce-create-bg"
-          >
-            <span slot="label" class="label-required">成型数量</span>
-            <el-form-item prop="formingNum">
-              <el-input type="number" v-model="requestData.formingNum" @input="changeNumber"></el-input>
-            </el-form-item>
-          </el-descriptions-item>
-          <el-descriptions-item
-            label="计划开始时间"
-            label-class-name="produce-create-bg"
-            content-class-name="produce-create-bg"
-          >
-            <span slot="label" class="label-required">计划开始时间</span>
-            <el-form-item prop="planStartTime" class="w100">
-              <el-date-picker
-                class="w100"
-                v-model="requestData.planStartTime"
-                type="date"
-                value-format="yyyy-MM-dd"
-              ></el-date-picker> </el-form-item
-          ></el-descriptions-item>
-          <el-descriptions-item
-            label="设备编码/名称"
-            label-class-name="produce-create-bg"
-            content-class-name="produce-create-bg"
-          >
-            <span slot="label" class="label-required">设备编码/名称</span>
-            <el-form-item prop="deviceName"
-              ><el-input
-                @click.native="getEquip"
-                :value="
-                  requestData.deviceName &&
-                  `${requestData.deviceName}(${requestData.deviceCode})`
-                "
-              ></el-input> </el-form-item
-          ></el-descriptions-item>
+          <el-descriptions-item label="计划开始时间">{{
+            formData.planStartTime
+          }}</el-descriptions-item>
         </el-descriptions>
       </el-form>
+
+      <headerTitle title="剩余拆单" class="mt20">
+      </headerTitle>
+      <el-form ref="form" :model="form" :rules="rules">
+        <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="form.surplusUnpack">
+
+          <template v-slot:toolbar>
+            <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon"
+              :disabled="formingNum == 0 ? true : false" @click="openUnpack">
+              拆单
+            </el-button>
+          </template>
+
+
+          <template v-slot:formingNum="scope" >
+            <el-form-item  :prop="'surplusUnpack.' + scope.$index + '.formingNum'" :rules="[
+              {
+              required: true,
+              message: '请输入要求成型数量',
+              trigger: 'change'
+            },
+            {
+              pattern: /^\d+(\.{0,1}\d+){0,1}$/ , message: '拆单数超过成型数量',  trigger: ['blur', 'change']
+            }
+            ]">
+              <el-input disabled v-model="formingNum" placeholder="请输入"></el-input>
+            </el-form-item>
+          </template>
+
+
+          <template v-slot:planStartTime="scope">
+            <el-form-item v-if="formingNum != 0" :prop="'surplusUnpack.' + scope.$index + '.planStartTime'" :rules="{
+              required: true,
+              message: '请选择开始计划时间',
+              trigger: 'change'
+            }">
+              <el-date-picker class="w100" v-model="scope.row.planStartTime" type="date"
+                value-format="yyyy-MM-dd"></el-date-picker>
+
+            </el-form-item>
+          </template>
+
+
+          <template v-slot:teamId="scope">
+            <el-form-item v-if="formingNum != 0" :prop="'surplusUnpack.' + scope.$index + '.teamId'" :rules="{
+              required: true,
+              message: '请选择班组',
+              trigger: 'change'
+            }">
+              <el-select v-model="scope.row.teamId" placeholder="请选择" style="width: 100%">
+                <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+
+            </el-form-item>
+          </template>
+
+
+        </ele-pro-table>
+
+
+
+        <headerTitle title="拆单" class="mt20">
+        </headerTitle>
+
+        <ele-pro-table ref="table" :needPage="false" :columns="columns2" :datasource="form.unpackList">
+
+
+
+          <template v-slot:formingNum="scope">
+            <el-form-item :prop="'unpackList.' + scope.$index + '.formingNum'" :rules="{
+              required: true,
+              message: '请输入要求成型数量',
+              trigger: 'change'
+            }">
+              <el-input-number type="number"  @change="changeNum(scope.$index)"  :min="0" v-model="scope.row.formingNum"
+                placeholder="请输入"></el-input-number>
+            </el-form-item>
+          </template>
+
+
+          <template v-slot:planStartTime="scope">
+            <el-form-item :prop="'unpackList.' + scope.$index + '.planStartTime'" :rules="{
+              required: true,
+              message: '请选择开始计划时间',
+              trigger: 'change'
+            }">
+              <el-date-picker class="w100" v-model="scope.row.planStartTime" type="date"
+                value-format="yyyy-MM-dd"></el-date-picker>
+
+            </el-form-item>
+          </template>
+
+
+          <template v-slot:teamId="scope">
+            <el-form-item :prop="'unpackList.' + scope.$index + '.teamId'" :rules="[{
+              required: true,
+              message: '请选择班组',
+              trigger: 'change'
+            }]">
+              <el-select v-model="scope.row.teamId" placeholder="请选择" style="width: 100%">
+                <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+
+            </el-form-item>
+          </template>
+
+
+        </ele-pro-table>
+
+
+      </el-form>
+
     </div>
     <div slot="footer">
       <el-button plain @click="cancel">取消</el-button>
       <el-button type="primary" @click="confirm">确定</el-button>
     </div>
-    <equipmentDailog
-      ref="equipmentDailogRef"
-      :produceVersionId="produceVersionId"
-    />
+
   </ele-modal>
 </template>
 
 <script>
-  import { splitWork } from '@/api/produceOrder/index.js';
-  import equipmentDailog from '@/components/EquipmentDailog/equipment-dailog';
-  import { positiveIntegerReg } from 'ele-admin';
-  import { deepClone } from '@/utils';
-  export default {
-    components: { equipmentDailog },
-    data () {
-      return {
-        visible: false,
-        produceVersionId: '',
-        formData: {},
-		requestData:{
-			deviceCode: '',
-			deviceName: '',
-			deviceId:''
-		},
-		formingNum:0,
-		rules:{
-			formingNum: [
-				{ required: true, message: '请输入成型数量', trigger: 'blur' },
-				{ pattern: positiveIntegerReg, message: '成型数量格式不正确', trigger: 'blur' }
-			],
-			planStartTime:[
-				{ required: true, message: '请选择计划开始时间', trigger: 'change' }
-			],
-			deviceName:[
-				{ required: true, message: '请选择设备', trigger: 'change' }
-			]
-		}
-      };
-    },
-    methods: {
-      open (row) {
-        this.visible = true;
-		this.formData = deepClone(row)
-		this.formingNum = this.formData.formingNum
-		this.produceVersionId = this.formData.produceVersionId
-		if(this.formData.planStartTime){
-			this.$set(this.requestData,'planStartTime',this.formData.planStartTime)
-		}
+import { splitWork } from '@/api/produceOrder/index.js';
+
+import { getteampage } from '@/api/produceWord/index.js';
+import { deepClone } from '@/utils';
+export default {
+  components: {},
+  data() {
+    return {
+      visible: false,
+
+      formData: {},
+      requestData: {
+        deviceCode: '',
+        deviceName: '',
+        deviceId: ''
       },
-	  
-	  changeNumber(val){
-		  if(!positiveIntegerReg.test(this.requestData.formingNum)){
-		   	return this.$message.warning('成型数量应为正整数'); 
-		  }
-		  if(val>this.formingNum||val==this.formingNum){
-			  return this.$message.warning('成型数量应小于要求成型数量');
-		  }
-		  this.formData.formingNum = this.formingNum - val
-	  },
-      getEquip () {
-        this.$refs.equipmentDailogRef.openSingle(
-          [this.requestData],
-          (res) => {
-            this.requestData.deviceCode = res.code;
-            this.requestData.deviceName = res.name;
-            this.requestData.deviceId = res.id;
-          }
-        );
+      formingNum: 0,
+
+      form: {
+        surplusUnpack: [],
+        unpackList: []
       },
-      cancel () {
-        this.formData = {};
-		this.requestData = {
-			deviceCode: '',
-			deviceName: '',
-			deviceId:''
-		};
-        this.visible = false;
-		this.$refs.formRef.resetFields();
+
+
+
+      rules: {
+
       },
-      confirm () {
-		  if(!positiveIntegerReg.test(this.requestData.formingNum)){
-		   	return this.$message.warning('成型数量应为正整数'); 
-		  }
-        this.$refs.formRef.validate(async (value) => {
-          if (value) {
-			  const params = {
-				  ...this.requestData,
-				  originalCode:this.formData.code
-			  }
-            const res = await splitWork(params);
-            this.$message.success('拆分成功！');
-            this.$emit('success');
-            this.cancel();
+      teamList: [],
+
+
+      columns: [
+        {
+          prop: 'code',
+          label: '工单号',
+          align: 'center',
+          minWidth: 200
+        },
+        {
+          prop: 'formingNum',
+          label: '要求成型数量',
+          align: 'center',
+          slot: 'formingNum',
+          minWidth: 200
+        },
+        {
+          prop: 'planStartTime',
+          label: '计划开始时间',
+          align: 'center',
+          slot: 'planStartTime',
+          minWidth: 200
+        },
+        {
+          prop: 'teamId',
+          label: '班组',
+          align: 'center',
+          slot: 'teamId',
+          minWidth: 200
+        },
+      ],
+
+
+      columns2: [
+        {
+          prop: 'code',
+          label: '工单号',
+          align: 'center',
+          minWidth: 200
+        },
+        {
+          prop: 'formingNum',
+          label: '要求成型数量',
+          align: 'center',
+          slot: 'formingNum',
+          minWidth: 200
+        },
+        {
+          prop: 'planStartTime',
+          label: '计划开始时间',
+          align: 'center',
+          slot: 'planStartTime',
+          minWidth: 200
+        },
+        {
+          prop: 'teamId',
+          label: '班组',
+          align: 'center',
+          slot: 'teamId',
+          minWidth: 200
+        }, {
+          columnKey: 'action',
+          label: '操作',
+          width: 160,
+          align: 'center',
+          resizable: false,
+          fixed: 'right',
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+
+
+      ]
+
+    };
+  },
+  methods: {
+    open(row) {
+      this.visible = true;
+      this.formData = deepClone(row)
+      this.formingNum = this.formData.formingNum
+
+
+      this.form.surplusUnpack = []
+      this.form.unpackList = []
+      this.setSurplus()
+
+      this.getteampage()
+
+    },
+
+    setSurplus() {
+      this.form.surplusUnpack.push({ code: this.formData.code, formingNum: this.formData.formingNum, planStartTime: '', teamId: '' })
+    },
+
+    openUnpack() {
+      this.form.unpackList.push({ code: this.formData.code, formingNum: '', planStartTime: '', teamId: '' })
+    },
+
+    changeNum(index) {
+      console.log(index)
+      let  num = this.formData.formingNum
+      this.form.unpackList.forEach((e) => {
+        if(e.formingNum != null && e.formingNum != undefined) {
+           num = num - Number(e.formingNum)
+          if(num >= 0) {
+            this.formingNum = num
+          } else {
+        
+            this.$set(this.form.unpackList[index], 'formingNum', 0)
+            this.$message.error('拆单数超过成型数量')
+            this.$forceUpdate()
+            return 
           }
-        });
-      }
+        }
+     
+      })
+    },
+
+    getteampage() {
+      getteampage().then((res) => {
+        this.teamList = res.list;
+      });
+    },
+
+
+
+    cancel() {
+      this.formData = {};
+
+      this.visible = false;
+      this.$refs.form.resetFields();
+    },
+    confirm() {
+      console.log(this.form)
+
+      this.$refs.form.validate(async (value) => {
+        if (value) {
+          const params = {
+
+            originalCode: this.formData.code
+          }
+          const res = await splitWork(params);
+          this.$message.success('拆分成功！');
+          this.$emit('success');
+          this.cancel();
+        }
+      });
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  .label-required {
-    &::after {
-      content: '*';
-      color: var(--color-danger);
-      font-size: 1.2em;
-    }
-  }
-  .form-wrapper {
-    :deep(.el-form) {
-      .el-form-item {
-        margin-bottom: 0 !important;
-      }
-    }
-  }
-</style>
-<style lang="scss">
-  .produce-create-bg {
-    background-color: var(--color-primary) !important;
-    color: #fff !important;
-  }
+.mt20 {
+  margin-top: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 0 !important;
+}
 </style>
+

src/views/produceOrder/index.vue

@@ -24,6 +24,11 @@
         :selection.sync="selection"
       >
         <template v-slot:toolbar>
+          <el-button type="success">新建</el-button>
+          <el-button type="success">暂停</el-button>
+          <el-button type="success">终止</el-button>
+
+
           <!-- <el-button type="primary">工单刷新</el-button> -->
           <el-button type="success" @click="handlePicking">领料</el-button>
           <el-button type="success" @click="toEnd()">批量完结</el-button>
@@ -292,6 +297,14 @@
               return obj && obj.label;
             }
           },
+
+          {
+            prop: 'teamName',
+            label: '班组',
+            align: 'center',
+            showOverflowTooltip: true,
+          },
+          
           {
             columnKey: 'action',
             label: '操作',