交互背景色

2023-05-26 19:12:08 +08:00
parent c091a2af83
commit 20135fc031
9 changed files with 223 additions and 42 deletions
--- a/src/pages/modules/workorder/index.vue
+++ b/src/pages/modules/workorder/index.vue
@@ -1,17 +1,34 @@
 <template>
-<div class="content">
+<div class="content blue" ref="content">
    <div class="header">
-        <div class="header-user-content" @click="toSelect">
-            <div class="header-user-txt">
-                <span class="span1">登录人员：</span>
-                <span class="span2">admin{{userName}}</span>
+        <div class="header_wrap_left">
+            <div class="header-user-content" @click="toSelect">
+                <div class="header-user-txt">
+                    <span class="span1">登录人员：</span>
+                    <span class="span2">{{userName}}</span>
+                </div>
+                <div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
+                <div v-show="show" class="dropdown-wrap">
+                    <ul class="dropdown-list drift">
+                        <li class="dropdown-item" @click="exit">退出</li>
+                    </ul>
+                    <div class="popper__arrow"></div>
+                </div>
            </div>
-            <div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
-            <div v-show="show" class="dropdown-wrap">
-                <ul class="dropdown-list drift">
-                    <li class="dropdown-item" @click="exit">退出</li>
-                </ul>
-                <div class="popper__arrow"></div>
+            <div class="header-user-content set_color_wrap" @click="toSelectColor">
+                <div class="header-user-txt">
+                    <span class="span1">背景颜色</span>
+                    <span class="span2"></span>
+                </div>
+                <div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
+                <div v-show="showColor" class="dropdown-wrap">
+                    <ul class="dropdown-list drift">
+                        <li class="dropdown-item" @click="switchColor(1)"><div class="color_button overall_orange"></div></li>
+                        <li class="dropdown-item" @click="switchColor(2)"><div class="color_button overall_lightgreen"></div></li>
+                        <li class="dropdown-item" @click="switchColor(3)"><div class="color_button overall_blue"></div></li>
+                    </ul>
+                    <div class="popper__arrow"></div>
+                </div>
            </div>
        </div>
        <div class="header-time-wrap">
@@ -49,6 +66,7 @@ export default {
      date: '',
      week: '',
      show: false,
+      showColor: false,
      menus: [
        {
          label: '工单作业',
@@ -90,6 +108,22 @@ export default {
    exit () {
      this.$store.dispatch('delUserInfo')
      this.$router.push('/login')
+    },
+    toSelectColor () {
+      this.showColor = !this.showColor
+    },
+    switchColor (type) {
+      switch (type) {
+        case 1:
+          this.$refs.content.classList.value = 'content overall_orange'
+          break
+        case 2:
+          this.$refs.content.classList.value = 'content overall_lightgreen'
+          break
+        case 3:
+          this.$refs.content.classList.value = 'content overall_blue'
+          break
+      }
    }
  }
 }
@@ -99,16 +133,20 @@ export default {
@import '~@style/mixin.styl'
 .content
    _wh(100%, 100vh)
-    background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)
 .header
    height 45px
    _fj()
    padding 0 15px
+.header_wrap_left
+    height 45px
+    _fj(flex-start)
 .header-user-content
    position relative
    height 45px
    _fj(flex-start)
    cursor pointer
+.set_color_wrap
+    margin-left 20px
 .header-user-txt
    padding 14.5px 0
    line-height 1
@@ -130,6 +168,7 @@ export default {
    width 100%
    top 39px
    right 0
+    z-index 1
    transform-origin center top
    transition transform .3s ease-in-out
    border 1px solid #e4e7ed
@@ -198,4 +237,19 @@ export default {
        border-top-right-radius 12px
 .main-container
    _wh(100%, calc(100% - 44px))
+.color_button
+    _wh(30px, 30px)
+    border-radius 50%
+.set_color_wrap
+    .dropdown-wrap
+        width 132px
+        left 50%
+        transform translateX(-50%)
+    .dropdown-list
+        padding 0 10px
+    .dropdown-item
+        float left
+        padding 10px 0
+        &:nth-child(2)
+            padding 10px 10px
 </style>
--- a/src/pages/modules/workorder/work-order-assignment.vue
+++ b/src/pages/modules/workorder/work-order-assignment.vue
@@ -5,7 +5,7 @@
                <div class="filter_item">
                    <div class="filter_label">设备</div>
                    <div class="filter-input-wrap">
-                        <el-select v-model="value" placeholder="请选择">
+                        <el-select v-model="value" filterable clearable placeholder="请选择">
                          <el-option
                              v-for="item in options"
                              :key="item.device_code"
@@ -19,8 +19,8 @@
            <div class="wrap-buttons">
                <button class="button button--primary" @click="getDatas">查询</button>
                <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled1" @click="_openStart">开工</button>
-                <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled2" @click="_saveReport">报工</button>
-                <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled3" @click="showDialog">强制完成</button>
+                <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled2" @click="showDialog('1')">报工</button>
+                <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled3" @click="showDialog('2')">强制完成</button>
            </div>
        </div>
        <div class="grid_wraper">
@@ -29,14 +29,15 @@
                    <th width="4%"></th>
                    <th width="8%">工单日期</th>
                    <th width="8%">工单号</th>
-                    <th width="10%">状态</th>
+                    <th width="7%">状态</th>
                    <th width="8%">设备</th>
+                    <th width="8%">物料名称</th>
                    <th width="10%">物料规格</th>
                    <th width="10%">工序</th>
-                    <th width="10%">计划生产</th>
+                    <th width="9%">计划生产</th>
                    <th width="9%">待生产</th>
                    <th width="9%">已生产</th>
-                    <th width="13%">开工时间</th>
+                    <th width="9%">开工时间</th>
                </tr>
                <tr v-for="e in dataList" :key="e.workorder_id">
                    <td>
@@ -44,8 +45,9 @@
                    </td>
                    <td>{{e.create_time}}</td>
                    <td>{{e.workorder_code}}</td>
-                    <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.workorder_status) - 1]}}</td>
+                    <td>{{['创建','下发','生产中','暂停', '完成', '强制完成'][Number(e.workorder_status) - 1]}}</td>
                    <td>{{e.device_code}}</td>
+                    <td>{{e.material_name}}</td>
                    <td>{{e.material_spec}}</td>
                    <td>{{e.workprocedure_name}}</td>
                    <td>{{e.plan_qty}}</td>
@@ -57,10 +59,35 @@
        </div>
        <jxDialog
          ref="child"
-          title="提示"
+          :title="title"
+          :type="type"
          @toSure="toSureDialog"
          >
-          <div class="form_wraper">当前操作为强制确认，确定继续操作吗？</div>
+          <div v-if="type === '1'" class="form_wraper">
+            <div class="form">
+              <div class="form_item">
+                <div class="form_item__label">合格数量</div>
+                <div class="form_item__content">
+                  <input type="number" class="form_item__input" v-model="reportQty">
+                </div>
+              </div>
+              <div class="form_item">
+                <div class="form_item__label">报废数量</div>
+                <div class="form_item__content">
+                  <input type="number" class="form_item__input" v-model="nokQty">
+                </div>
+              </div>
+            </div>
+            <div class="form">
+              <div class="form_item">
+                <div class="form_item__label">报修数量</div>
+                <div class="form_item__content">
+                  <input type="number" class="form_item__input" v-model="repareQty">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="type === '2'" class="form_wraper">当前操作为强制确认，确定继续操作吗？</div>
        </jxDialog>
    </div>
 </template>
@@ -82,7 +109,24 @@ export default {
      disabled3: false,
      dataList: [],
      pkId: '',
-      pkObj: {}
+      pkObj: {},
+      title: '',
+      type: '',
+      reportQty: '',
+      nokQty: '',
+      repareQty: ''
+    }
+  },
+  watch: {
+    type (val) {
+      switch (val) {
+        case '1':
+          this.title = '请输入数量'
+          break
+        case '2':
+          this.title = '提示'
+          break
+      }
    }
  },
  created () {
@@ -127,6 +171,7 @@ export default {
    },
    // 报工
    async _saveReport () {
+      this.$refs.child.disabled = true
      this.disabled2 = true
      if (!this.pkId) {
        this.toast('请选择一行')
@@ -134,22 +179,36 @@ export default {
        return
      }
      try {
-        let res = await saveReport(this.pkId, this.pkObj.report_qty, this.pkObj.nok_qty, this.pkObj.repare_qty)
+        let res = await saveReport(this.pkId, this.reportQty, this.nokQty, this.repareQty)
        this.toast(res.message)
        this.disabled2 = false
        this.pkId = ''
        this.pkObj = {}
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
        this.getDatas()
      } catch (e) {
        this.disabled2 = false
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
      }
    },
-    showDialog () {
+    showDialog (type) {
+      this.type = type
      if (!this.pkId) {
        this.toast('请选择一行')
        return
      }
      this.$refs.child.active = true
+      switch (type) {
+        case '1':
+          this.reportQty = ''
+          this.nokQty = ''
+          this.repareQty = ''
+          break
+        case '2':
+          break
+      }
    },
    // 完工
    async _tofinish () {
@@ -159,6 +218,8 @@ export default {
        let res = await tofinish(this.pkObj)
        this.toast(res.message)
        this.disabled3 = false
+        this.pkId = ''
+        this.pkObj = {}
        this.$refs.child.active = false
        this.$refs.child.disabled = false
        this.getDatas()
@@ -168,8 +229,15 @@ export default {
        this.$refs.child.disabled = false
      }
    },
-    toSureDialog () {
-      this._tofinish()
+    toSureDialog (type) {
+      switch (type) {
+        case '1':
+          this._saveReport()
+          break
+        case '2':
+          this._tofinish()
+          break
+      }
    },
    toRadio (e) {
      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
--- a/src/pages/modules/workorder/work-order-query.vue
+++ b/src/pages/modules/workorder/work-order-query.vue
@@ -17,7 +17,7 @@
              <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-select v-model="value" filterable placeholder="请选择">
                      <el-option
                          v-for="item in options"
                          :key="item.device_code"
@@ -44,10 +44,11 @@
              <tr>
                  <th width="8%">工单日期</th>
                  <th width="8%">工单号</th>
-                  <th width="8%">设备</th>
-                  <th width="8%">状态</th>
+                  <th width="7%">设备</th>
+                  <th width="4%">状态</th>
                  <th width="8%">物料名称</th>
-                  <th width="8%">工序</th>
+                  <th width="8%">物料规格</th>
+                  <th width="5%">工序</th>
                  <th width="8%">工单数量</th>
                  <th width="8%">实际数量</th>
                  <th width="8%">报废数量</th>
@@ -61,6 +62,7 @@
                  <td>{{e.device_code}}</td>
                  <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.workorder_status) - 1]}}</td>
                  <td>{{ e.material_name }}</td>
+                  <td>{{e.material_spec}}</td>
                  <td>{{e.workprocedure_name}}</td>
                  <td>{{e.plan_qty}}</td>
                  <td>{{ e.real_qty }}</td>
--- a/src/pages/modules/workorder/work-report-query.vue
+++ b/src/pages/modules/workorder/work-report-query.vue
@@ -17,7 +17,7 @@
              <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-select v-model="value" filterable placeholder="请选择">
                      <el-option
                          v-for="item in options"
                          :key="item.device_code"
@@ -48,14 +48,15 @@
                  <th width="6%">工单号</th>
                  <th width="6%">设备</th>
                  <th width="6%">顺序号</th>
-                  <th width="4%">班次</th>
+                  <th width="5%">班次</th>
                  <th width="8%">物料名称</th>
+                  <th width="8%">物料规格</th>
                  <th width="8%">开始时间</th>
                  <th width="8%">结束时间</th>
                  <th width="7%">电气数量</th>
-                  <th width="10%">上报合格数</th>
-                  <th width="10%">上报报废数</th>
-                  <th width="10%">上报报修数</th>
+                  <th width="7%">上报合格数</th>
+                  <th width="7%">上报报废数</th>
+                  <th width="7%">上报报修数</th>
                  <th width="6%">操作工</th>
                  <th width="5%">状态</th>
              </tr>
@@ -68,6 +69,7 @@
                  <td>{{e.seq_number}}</td>
                  <td>{{e.shift_type_scode}}</td>
                  <td>{{e.material_name}}</td>
+                  <td>{{e.material_spec}}</td>
                  <td>{{e.operatetime_start}}</td>
                  <td>{{e.operatetime_end}}</td>
                  <td>{{ e.dq_report_qty }}</td>
@@ -128,7 +130,7 @@ export default {
      workorder: '',
      disabled1: false,
      disabled2: false,
-      dataList: [{macoperate_id: '1'}],
+      dataList: [],
      pkId: '',
      pkObj: {},
      reportQty: '',