生产计划

src/components/header-title/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="divider">
-    <div class="title">
-      <div class="ele-bg-primary"></div>
-      <span :style="{ 'font-size': size }">{{ title }}</span>
+    <div class="content">
+      <div class="title">
+        <div class="ele-bg-primary"></div>
+        <span :style="{ 'font-size': size }">{{ title }}</span>
+      </div>
+      <div class="right"><slot></slot></div>
     </div>
     <div class="ele-bg-primary" style="width: 100%; height: 2px"></div>
   </div>
@@ -25,7 +28,11 @@
 <style lang="scss" scoped>
   .divider {
     margin-bottom: 20px;
-
+    .content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
     .title {
       display: flex;
       align-items: center;

src/views/productionPlan/components/plan-view.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="description">
+      <div class="label">方案说明</div>
+      <div class="content">
+        <template v-for="(item, index) in rules">
+          <template v-for="(itm, idx) in item.list">
+            <template v-if="!itm.lastDisabled">
+              <div class="tag" :key="index + '' + idx">{{ itm.label }}</div>
+            </template>
+          </template>
+        </template>
+      </div>
+      <div class="operate">
+        <el-button type="primary" plain>发布当前方案</el-button>
+        <el-button type="primary">保存</el-button>
+      </div>
+    </div>
+
+    <div class="display-box">
+      <el-button type="primary" plain size="small">添加工单</el-button>
+      <el-button type="primary" plain size="small">删除</el-button>
+      <div class="items">
+        <span class="label">累计工单条数</span>
+        14条
+      </div>
+      <div class="items">
+        <span class="label">累计成型数量</span>
+        14pcs
+      </div>
+      <div class="items">
+        <span class="label">累计成型重量</span>
+        14kg
+      </div>
+      <div class="items">
+        <span class="label">设备数量</span>
+        14条
+      </div>
+      <div class="items">
+        <span class="label">成型剂需求</span>
+        14条
+      </div>
+      <div class="items">
+        <span class="label">混合料需求</span>
+        14条
+      </div>
+    </div>
+
+    <el-table :data="tableData">
+      <el-table-column type="index" label="序号"></el-table-column>
+      <el-table-column label="工单号" prop=""></el-table-column>
+      <el-table-column label="成型数量" prop="">
+        <template v-slot="{ row }">
+          <el-input type="number" v-model.number="row.num"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="成型重量" prop="">
+        <template v-slot="{ row }">
+          <el-input type="number" v-model.number="row.num"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="开始日期" prop="">
+        <template v-slot="{ row }">
+          <el-input type="number" v-model.number="row.num"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="班次" prop="">
+        <template v-slot="{ row }">
+          <el-select v-model="row.ba">
+            <el-option></el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备编码" prop=""></el-table-column>
+      <el-table-column label="设备名称" prop=""></el-table-column>
+      <el-table-column label="可执行人" prop=""></el-table-column>
+      <el-table-column label="操作" prop="">
+        <template v-slot="{ row }">
+          <el-link type="danger">删除</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column type="selection"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        tableData: [],
+        rules: [
+          {
+            type: 'radio',
+            value: '',
+            list: [
+              { label: '多设备优先', value: 0 },
+              { label: '多班次优先', value: 1 }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+
+            list: [
+              { label: '设备产能优先', value: 0 },
+              { label: '最早开始时间优先', value: 1 },
+              { label: '开始时间优先', value: 2, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+            list: [
+              { label: '非空闲设备可用', value: 0 },
+              { label: '检修设备可用', value: 1 },
+              { label: '检修设备优先', value: 1, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'radio',
+            value: '',
+            list: [{ label: '末单均衡', value: 0 }]
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .description {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border: 1px solid rgba(215, 215, 215, 1);
+    background-color: rgba(242, 242, 242, 1);
+    .label {
+      margin-right: 20px;
+    }
+    .content {
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .tag {
+        padding: 5px 10px;
+        background-color: rgba(202, 249, 130, 1);
+        border-radius: 20px;
+
+        & + .tag {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .display-box {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px;
+
+    .items {
+      margin-left: 30px;
+      .label {
+        font-weight: bold;
+      }
+    }
+  }
+</style>

src/views/productionPlan/workOrderPublish.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="ele-body">
     <el-card shadow="never">
-      <HeaderTitle title="发布工单" />
+      <HeaderTitle title="发布工单">
+        <el-button size="small" @click="$router.go(-1)">返回</el-button>
+      </HeaderTitle>
 
-      <el-descriptions title="" direction="vertical" :column="6" border>
+      <el-descriptions title="" :column="6" border>
         <el-descriptions-item label="计划编号"
           >kooriookami</el-descriptions-item
         >
@@ -26,7 +28,27 @@
         <div class="rule-label">工单生成规则</div>
         <div class="rule-wrapper">
           <div class="content">
-            <el-row></el-row>
+            <div class="select-box" v-for="(item, index) in rules" :key="index">
+              <el-radio-group v-model="item.value" v-if="item.type === 'radio'">
+                <el-radio
+                  v-for="(itm, idx) in item.list"
+                  :key="idx"
+                  :label="itm.label"
+                ></el-radio>
+              </el-radio-group>
+              <el-checkbox-group v-model="item.value" v-else>
+                <el-checkbox
+                  v-for="(itm, idx) in item.list"
+                  :key="idx"
+                  :label="itm.label"
+                  :disabled="
+                    itm.lastDisabled
+                      ? item.value.length < item.list.length - 1
+                      : false
+                  "
+                ></el-checkbox>
+              </el-checkbox-group>
+            </div>
           </div>
           <div class="btn-box">
             <el-tooltip
@@ -42,10 +64,68 @@
           </div>
         </div>
       </div>
+
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="默认" name="first"
+          ><planView key="first"
+        /></el-tab-pane>
+        <el-tab-pane
+          v-for="(item, index) in planList"
+          :label="item.label"
+          :name="index"
+          ><planView :key="index"
+        /></el-tab-pane>
+      </el-tabs>
     </el-card>
   </div>
 </template>
 
+<script>
+  import planView from './components/plan-view';
+  export default {
+    components: { planView },
+    data () {
+      return {
+        activeName: 'first',
+        planList: [],
+        rules: [
+          {
+            type: 'radio',
+            value: '',
+            list: [
+              { label: '多设备优先', value: 0 },
+              { label: '多班次优先', value: 1 }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+
+            list: [
+              { label: '设备产能优先', value: 0 },
+              { label: '最早开始时间优先', value: 1 },
+              { label: '开始时间优先', value: 2, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'checked',
+            value: [],
+            list: [
+              { label: '非空闲设备可用', value: 0 },
+              { label: '检修设备可用', value: 1 },
+              { label: '检修设备优先', value: 1, lastDisabled: true }
+            ]
+          },
+          {
+            type: 'radio',
+            value: '',
+            list: [{ label: '末单均衡', value: 0 }]
+          }
+        ]
+      };
+    }
+  };
+</script>
 <style lang="scss" scoped>
   .rules-box {
     padding: 20px 0;
@@ -59,16 +139,26 @@
       flex: 1;
       display: flex;
       justify-content: space-between;
+      align-items: flex-start;
 
       .content {
         flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 0 10px;
+
+        .select-box {
+          border: 1px solid #ccc;
+          padding: 5px 10px;
+          margin: 0 10px 10px 0;
+        }
       }
 
       .btn-box {
         display: flex;
         justify-content: space-between;
-
-        width: 200px;
+        width: 160px;
       }
     }
   }