工单作业、报工查询、工单查询

src/pages/modules/workorder/work-order-query.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="order-wraper">
+      <div class="wrap-filter-buttons">
+          <div class="wrap-filters">
+              <div class="filter_item">
+                  <div class="filter_label">工单日期</div>
+                  <div class="filter-input-wrap">
+                      <el-date-picker
+                          v-model="value1"
+                          type="daterange"
+                          range-separator="-"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+                      </el-date-picker>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z2">设备</div>
+                  <div class="filter-input-wrap filter-input-wrap_z2">
+                    <el-select v-model="value" placeholder="请选择">
+                      <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z3">关键字</div>
+                  <div class="filter-input-wrap filter-input-wrap_z3">
+                  <input type="text" class="filter-input" v-model="keyValue" placeholder="请输入工单号、物料编码">
+                  <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
+                  </div>
+              </div>
+          </div>
+          <div class="wrap-buttons">
+              <button class="button button--primary" @click="getDatas">查询</button>
+          </div>
+      </div>
+      <div class="grid_wraper">
+          <table class="filter-table">
+              <tr>
+                  <th width="4%"></th>
+                  <th width="8%">工单日期</th>
+                  <th width="8%">工单号</th>
+                  <th width="8%">设备</th>
+                  <th width="8%">状态</th>
+                  <th width="8%">物料名称</th>
+                  <th width="8%">工序</th>
+                  <th width="8%">工单数量</th>
+                  <th width="8%">实际数量</th>
+                  <th width="8%">报废数量</th>
+                  <th width="7%">报修数量</th>
+                  <th width="8%">开始时间</th>
+                  <th width="8%">开始时间</th>
+              </tr>
+              <tr v-for="e in dataList" :key="e.workorder_id">
+                  <td>
+                      <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                  </td>
+                  <td>{{e.workorder_code}}</td>
+                  <td>{{e.shift_type_scode_name}}</td>
+                  <td>{{e.material_name}}</td>
+                  <td>{{e.workprocedure_name}}</td>
+                  <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                  <td>{{e.plan_qty}}</td>
+                  <td>{{e.real_qty}}</td>
+                  <td>
+                  </td>
+                  <td>{{e.realproducestart_date}}</td>
+                  <td>{{e.realproduceend_date}}</td>
+                  <td></td>
+                  <td></td>
+              </tr>
+          </table>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value1: [new Date(), new Date()],
+      options: [],
+      value: '',
+      keyValue: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  computed: {
+    closeIcon1 () {
+      return this.keyValue !== ''
+    }
+  },
+  methods: {
+    clearData (e) {
+      switch (e) {
+        case 1:
+          this.keyValue = ''
+          break
+      }
+    },
+    getDatas () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.wrap-filters
+  width calc(100% - 60px)
+.wrap-buttons
+  width 60px
+.filter_label_z2
+  width 32px
+.filter-input-wrap_z2
+  width calc(100% - 32px)
+.filter_label_z3
+  width 43px
+.filter-input-wrap_z3
+  width calc(100% - 43px)
+.filter_item
+  &:nth-child(1)
+      width 55%
+  &:nth-child(2)
+      width calc(45% - 10px)
+</style>