@logwire/logwire-wms-pda-ui 1.2.0 → 3.1.1

package/src/components/page/process/process/content/index.vue

@@ -1,367 +1,340 @@
-<!--
-  加工执行 - 加工台
-  @author: 张文
-  @date: 2022-08-11
--->
-<template>
-  <div>
-
-    <lw-nav-bar :title="$lwLanguage.get('','加工台')"/>
-
-    <div class="lw-global-page-box">
-
-      <!-- 加工台信息 -->
-      <div class="lw-global-model-box">
-
-        <div class="lw-global-flex-between lw-global-row-start">
-
-          <lw-title-value-cell
-            :title="$lwLanguage.get('','加工台')"
-            value="JG-001"
-            val-bold
-            :is-row="false"
-          />
-
-          <lw-tag
-            round
-            plain
-            :type="bockType.type"
-          >{{ bockType.text }}</lw-tag>
-
-        </div>
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','标准工位')"
-          value="4"
-          val-bold
-        />
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','类型')"
-          value="包装，组装"
-          val-bold
-        />
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','负责人')"
-          value="张三"
-          val-bold
-        />
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','关闭原因')"
-          value="中途休息"
-          val-bold
-          is-row-end
-        />
-
-
-      </div>
-
-      <!-- 数据看板 -->
-      <lw-data-look-bg
-        style="margin: 10px 0"
-        :data="lookData"
-      />
-
-      <!-- 员工信息 -->
-      <div class="lw-global-model-box">
-
-        <div class="lw-global-flex-between lw-global-row-start">
-
-          <div
-            style="flex-shrink: 0"
-            class="lw-global-value-bold"
-          >
-            {{ $lwLanguage.get('','员工') }}
-          </div>
-
-          <div style="flex: 1;text-align: right">
-
-            <lw-button
-              round
-              mini
-              type="last"
-              @click="delBtn"
-            >{{ $lwLanguage.get('','移除') }}</lw-button>
-
-            <lw-button
-              round
-              mini
-              @click="addBtn"
-            >{{ $lwLanguage.get('','添加') }}</lw-button>
-
-          </div>
-
-        </div>
-
-        <div class="lw-global-row-end">
-
-          <lw-tag
-            v-for="(i,k) in staffList"
-            :key="k"
-            round
-            plain
-          >{{ i }}</lw-tag>
-
-        </div>
-
-      </div>
-
-    </div>
-
-    <lw-bottom-bar>
-
-      <lw-button
-        plain
-        type="last"
-        @click="off"
-      >{{ $lwLanguage.get('','关闭') }}</lw-button>
-
-      <lw-button
-        plain
-        type="normal"
-        @click="stop"
-      >{{ $lwLanguage.get('','暂停') }}</lw-button>
-
-      <lw-button @click="enter">{{ $lwLanguage.get('','进入加工控制台') }}</lw-button>
-
-    </lw-bottom-bar>
-
-
-    <!-- 添加人员及移除人员弹框 -->
-    <lw-popup
-      :title="
-        staffPopup.type === 'add' ?
-        $lwLanguage.get('','添加员工') :
-        $lwLanguage.get('','移除员工')
-      "
-      v-model="staffPopup.show"
-      @closed="staffPopupOff"
-    >
-      <lw-input
-        :title="$lwLanguage.get('','员工工牌')"
-        v-model="staffPopup.code.value"
-        :get-focus.sync="staffPopup.code.focus"
-        required
-        :rule-production-data="$lwScanRule.production('员工工牌', 'STAFF')"
-        rule-key="staff"
-        @confirm="staffCodeConfirm"
-      />
-
-      <template v-if="staffPopup.list.length">
-        <div
-          style="margin: 10px 0"
-          class="lw-global-title"
-        >
-          {{ $lwLanguage.get('','当前扫描：') }}
-        </div>
-
-        <div>
-          <lw-tag
-            v-for="(i,k) in staffPopup.list"
-            :key="k"
-            closeable
-            size="medium"
-            @close="staffPopupDel(k)"
-          >{{ i }}</lw-tag>
-        </div>
-      </template>
-
-      <template v-if="staffList.length">
-        <div
-          style="margin: 10px 0"
-          class="lw-global-title"
-        >
-          {{ $lwLanguage.get('','在线员工：') }}
-        </div>
-
-        <div>
-          <lw-tag
-            v-for="(i,k) in staffList"
-            :key="k"
-            size="medium"
-            plain
-          >{{ i }}</lw-tag>
-        </div>
-      </template>
-
-      <template #button>
-
-        <lw-button @click="staffPopupConfirm">
-          {{ $lwLanguage.get('','确认') }}
-        </lw-button>
-
-      </template>
-    </lw-popup>
-
-    <!-- 暂停、关闭弹框 -->
-    <lw-popup
-      :title="
-        statusPopup.type === 'off' ?
-        $lwLanguage.get('','关闭加工台') :
-        $lwLanguage.get('','暂停加工台')
-      "
-      v-model="statusPopup.show"
-      @closed="statusPopupOff"
-    >
-
-      <lw-cell-popup-radio
-        v-model="statusPopup.cause"
-        :title="$lwLanguage.get('','原因')"
-        required
-        dict-key="WmsSkuPackTaskPauseReason"
-      />
-
-      <lw-input
-        :title="$lwLanguage.get('','备注')"
-        v-model="statusPopup.remark"
-        type="textarea"
-        :rows="4"
-        :show-bottom-border="false"
-      />
-
-      <template #button>
-        <lw-button @click="statusPopupConfirm">
-          {{ $lwLanguage.get('','确认') }}
-        </lw-button>
-      </template>
-
-    </lw-popup>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "lwProcessActionContentPage",
-  data() {
-    return {
-      // 数据看板
-      lookData:{
-        waitTask:{
-          value: 4,
-          title: this.$lwLanguage.get('','待加工任务')
-        },
-        wait:{
-          value: 1000,
-          title: this.$lwLanguage.get('','待加工')
-        },
-        over:{
-          value: 300,
-          title: this.$lwLanguage.get('','已加工')
-        },
-        overRate:{
-          value: '30%',
-          title: this.$lwLanguage.get('','完成度')
-        },
-      },
-
-      // 员工信息
-      staffList:['张三','李四','王二麻子'],
-
-      // 添加、移除员工弹框
-      staffPopup:{
-        type: '',
-        show: false,
-        code:{
-          value: '',
-          focus: true
-        },
-        list: ['张三','李四','王二麻子'],
-      },
-
-      // 关闭、暂停弹框
-      statusPopup:{
-        type: '',
-        show: false,
-        cause: '',
-        remark: ''
-      }
-    }
-  },
-  computed:{
-    // 加工台状态
-    bockType(){
-      return{
-        type: 'success',
-        text: '空闲'
-      }
-    },
-  },
-  mounted() {
-    console.log(this.$route.query.lwDockCode,'包装台线路')
-  },
-  methods: {
-    // 移除员工
-    delBtn(){
-      this.staffPopup.type = 'del'
-      this.staffPopup.show = true
-    },
-    // 添加员工
-    addBtn(){
-      this.staffPopup.type = 'add'
-      this.staffPopup.show = true
-    },
-    // 员工工牌确认
-    staffCodeConfirm(){
-
-    },
-    // 删除已扫描的员工
-    staffPopupDel(k){
-      this.staffPopup.list.splice(k, 1)
-    },
-    // 确认操作
-    staffPopupConfirm(){
-      this.$lwToast.success(
-        this.$lwLanguage.get('','操作成功')
-      )
-      this.staffPopup.show = false
-    },
-    // 弹框关闭
-    staffPopupOff(){
-      this.staffPopup.code.value = ''
-      this.staffPopup.list = []
-    },
-
-    // 关闭
-    off(){
-      this.statusPopup.type = 'off'
-      this.statusPopup.show = true
-    },
-    // 暂停
-    stop(){
-      this.statusPopup.type = 'stop'
-      this.statusPopup.show = true
-    },
-    // 弹框关闭
-    statusPopupOff(){
-      this.statusPopup.remark = ''
-      this.statusPopup.cause = ''
-    },
-    // 暂停、关闭确认
-    statusPopupConfirm(){
-      if (!this.statusPopup.cause){
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','请选择原因')
-        )
-        return
-      }
-
-      this.statusPopup.show = false
-    },
-
-    // 进入
-    enter(){
-      this.$router.push({
-        path: '/process/action/lwConsole'
-      })
-    },
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-</style>
+<!--
+  加工执行 - 加工台
+  @author: 张文
+  @date: 2022-08-11
+-->
+<template>
+  <div>
+    <lw-nav-bar :title="$lwLanguage.get('','加工台')"/>
+    <div class="lw-global-page-box">
+      <!-- 加工台信息 -->
+      <div class="lw-global-model-box">
+        <div class="lw-global-flex-between lw-global-row-start">
+          <lw-title-value-cell :title="$lwLanguage.get('','加工台')" :value="table.code" val-bold :is-row="false"/>
+          <lw-tag round plain :type="table.status === 'CLOSE' ? 'danger' : 'success'">
+            {{ $lwDict.getDictLabel('WorkTableStatus', table.status) }}
+          </lw-tag>
+        </div>
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','标准工位')"
+          :value="table.standardWorkers" val-bold/>
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','类型')"
+          :value="table.typeLabel" val-bold/>
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','负责人')"
+          :value="table.directorName" val-bold :is-row-end="table.status === 'CLOSE'"/>
+        <lw-title-value-cell
+          v-if="table.status === 'CLOSE'"
+          :title="$lwLanguage.get('','关闭原因')"
+          :value="table.closeReason" val-bold is-row-end/>
+      </div>
+      <!-- 数据看板 -->
+      <lw-data-look-bg
+        style="margin: 10px 0"
+        :data="lookData"/>
+      <!-- 员工信息 -->
+      <div class="lw-global-model-box">
+        <div class="lw-global-flex-between lw-global-row-start">
+          <div
+            style="flex-shrink: 0"
+            class="lw-global-value-bold">
+            {{ $lwLanguage.get('', '员工') }}
+          </div>
+          <div style="flex: 1;text-align: right">
+            <lw-button round mini @click="editWorker" :disabled="table.status === 'CLOSE'">
+              {{ $lwLanguage.get('', '编辑') }}
+            </lw-button>
+          </div>
+        </div>
+        <div class="lw-global-row-end">
+          <lw-tag v-for="w in onlineWorkers" :key="w.id" round plain>{{ w.staffName }}</lw-tag>
+        </div>
+      </div>
+    </div>
+    <lw-bottom-bar>
+      <template v-if="table.status === 'CLOSE'">
+        <lw-button plain type="last" @click="openWorkTable">{{ $lwLanguage.get('', '打开') }}</lw-button>
+      </template>
+      <template v-else-if="table.status === 'PAUSE'">
+        <lw-button plain type="last" @click="resumeWorkTable">{{ $lwLanguage.get('', '恢复') }}</lw-button>
+      </template>
+      <template v-else>
+        <lw-button plain type="last" @click="closeWorkTable">{{ $lwLanguage.get('', '关闭') }}</lw-button>
+        <lw-button plain type="normal" @click="pauseWorkTable">{{ $lwLanguage.get('', '暂停') }}</lw-button>
+        <lw-button @click="enter">{{ $lwLanguage.get('', '进入加工控制台') }}</lw-button>
+      </template>
+    </lw-bottom-bar>
+    <!-- 添加人员及移除人员弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('','编辑员工')"
+      v-model="staffPopup.show" @closed="staffPopupOff">
+      <lw-input
+        :title="$lwLanguage.get('','员工工号')"
+        v-model="staffPopup.code.value"
+        :get-focus.sync="staffPopup.code.focus"
+        required
+        :create-rule="$lwScanRule.create('员工工号', 'STAFF')"
+        rule-key="staff"
+        @confirm="staffCodeConfirm"/>
+      <template v-if="staffPopup.list.length">
+        <div
+          style="margin: 10px 0"
+          class="lw-global-title">
+          {{ $lwLanguage.get('', '当前扫描：') }}
+        </div>
+        <div>
+          <lw-tag v-for="(w, i) in staffPopup.list" :key="w.staffId" closeable size="medium" @close="staffPopupDel(i)">
+            {{ w.staffName }}
+          </lw-tag>
+        </div>
+      </template>
+      <template v-if="table?.workers?.length">
+        <div style="margin: 10px 0" class="lw-global-title">
+          {{ $lwLanguage.get('', '在线员工：') }}
+        </div>
+        <div>
+          <lw-tag v-for="w in onlineWorkers" :key="w.id" size="medium" plain>{{ w.staffName }}</lw-tag>
+        </div>
+      </template>
+      <template #button>
+        <lw-button @click="staffPopupConfirm">
+          {{ $lwLanguage.get('', '确认') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+    <!-- 暂停、关闭弹框 -->
+    <lw-popup
+      :title="statusPopup.type === 'close' ? $lwLanguage.get('','关闭加工台') : $lwLanguage.get('','暂停加工台')"
+      v-model="statusPopup.show"
+      @closed="statusPopupOff">
+      <lw-cell-popup-radio
+        v-model="statusPopup.cause"
+        :title="$lwLanguage.get('','原因')"
+        required
+        :columns="statusPopup.causeList"
+      />
+      <lw-input
+        :title="$lwLanguage.get('','备注')"
+        v-model="statusPopup.remark"
+        type="textarea"
+        :rows="4"
+        :show-bottom-border="false"/>
+      <template #button>
+        <lw-button @click="statusPopupConfirm">
+          {{ $lwLanguage.get('', '确认') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+import { getWorkTableTaskData } from '../../../../../api/process/order'
+import * as api from '../../../../../api/process/work_table'
+
+export default {
+  name: 'lwProcessActionContentPage',
+  data () {
+    return {
+      table: {},
+      // 数据看板
+      lookData: {
+        waitTask: {
+          value: 0,
+          title: this.$lwLanguage.get('', '待加工任务')
+        },
+        wait: {
+          value: 0,
+          title: this.$lwLanguage.get('', '待加工')
+        },
+        over: {
+          value: 0,
+          title: this.$lwLanguage.get('', '已加工')
+        },
+        overRate: {
+          value: '0%',
+          title: this.$lwLanguage.get('', '完成度')
+        },
+      },
+      // 添加、移除员工弹框
+      staffPopup: {
+        type: '',
+        show: false,
+        code: {
+          value: '',
+          focus: true
+        },
+        list: [],
+      },
+      // 关闭、暂停弹框
+      statusPopup: {
+        type: '',
+        show: false,
+        cause: '',
+        remark: '',
+        causeList:[
+          {
+            label: this.$lwLanguage.get('','休息'),
+            value: this.$lwLanguage.get('','休息')
+          },
+          {
+            label: this.$lwLanguage.get('','故障'),
+            value: this.$lwLanguage.get('','故障')
+          },
+          {
+            label: this.$lwLanguage.get('','下班'),
+            value: this.$lwLanguage.get('','下班')
+          },
+          {
+            label: this.$lwLanguage.get('','其他'),
+            value: this.$lwLanguage.get('','其他')
+          },
+        ]
+      }
+    }
+  },
+  computed: {
+    onlineWorkers () {
+      return this.table.workers?.filter(i => i.online) ?? []
+    }
+  },
+  created () {
+    const code = this.$route.query.lwDockCode
+    if (!code) {
+      return this.$lwShowErrorMsg('未指定加工台参数')
+    }
+    this.loadWorkTable(code)
+  },
+  methods: {
+    loadWorkTable (code) {
+      api.getWorkTableInfo(code).then(res => {
+        this.initTableData(res)
+
+        getWorkTableTaskData(res.id).then(data => {
+          this.lookData.waitTask.value = data.count
+          this.lookData.wait.value = data.pendingQty
+          this.lookData.over.value = data.finishQty
+          this.lookData.overRate.value = data.percent + '%'
+        })
+      })
+    },
+    initTableData (res) {
+      for (const w of (res.workers ?? [])) {
+        w.workTableId = res.id
+      }
+      res.typeLabel = res.type?.replace(/[\\[\]'"\s]/g, '').split(',').map(i => this.$lwDict.getDictLabel('WorkProcessType', i)).join(',')
+      this.table = res
+    },
+    // 编辑员工
+    editWorker () {
+      this.staffPopup.show = true
+      this.staffPopup.list = this.table.workers?.filter(i => i.online) ?? []
+    },
+    // 员工工牌确认
+    staffCodeConfirm () {
+      const num = this.staffPopup.code.value
+      if (!num) {
+        return
+      }
+      api.getStaffByNum(num).then(res => {
+        if (!res) {
+          this.$lwShowErrorMsg('错误的员工工号')
+          this.staffPopup.code.value = ''
+          this.staffPopup.code.focus = true
+          return
+        }
+        const ow = this.staffPopup.list.find(i => i.staffId === res.id)
+        if (ow) {
+          return
+        }
+        const worker = this.table.workers?.find(i => i.staffId === res.id) ?? {
+          workTableId: this.table.id,
+          staffId: res.id,
+          staffNum: res.code,
+          staffName: res.name
+        }
+        this.staffPopup.list.push(worker)
+        this.staffPopup.code.value = ''
+      })
+    },
+    // 删除已扫描的员工
+    staffPopupDel (k) {
+      this.staffPopup.list.splice(k, 1)
+    },
+    // 确认操作
+    staffPopupConfirm () {
+      this.$lwToast.success(
+        this.$lwLanguage.get('', '操作成功')
+      )
+      const wIds = this.table.workers?.filter(i => i.online)?.map(i => i.staffId) ?? []
+      const nIds = this.staffPopup.list.map(i => i.staffId) ?? []
+      const onlineReqs = this.staffPopup.list.filter(i => wIds.indexOf(i.staffId) === -1).map(i => api.doWorkTableWorkerOnline(i))
+      const offlineReqs = this.table.workers?.filter(i => nIds.indexOf(i.staffId) === -1).map(i => api.doWorkTableWorkerOffline(i))
+      const reqs = onlineReqs.concat(offlineReqs)
+      if (reqs.length) {
+        Promise.all(reqs).then(() => {
+          this.loadWorkTable(this.table.code)
+          this.staffPopup.show = false
+        })
+      } else {
+        this.staffPopup.show = false
+      }
+    },
+    // 弹框关闭
+    staffPopupOff () {
+      this.staffPopup.code.value = ''
+      this.staffPopup.list = []
+    },
+    // 关闭
+    closeWorkTable () {
+      this.statusPopup.type = 'close'
+      this.statusPopup.show = true
+    },
+    // 暂停
+    pauseWorkTable () {
+      this.statusPopup.type = 'pause'
+      this.statusPopup.show = true
+    },
+    // 开启
+    openWorkTable () {
+      api.doOpenWorkTable(this.table.id).then(this.initTableData)
+    },
+    // 恢复
+    resumeWorkTable () {
+      api.doResumeWorkTable(this.table.id).then(this.initTableData)
+    },
+    // 弹框关闭
+    statusPopupOff () {
+      this.statusPopup.remark = ''
+      this.statusPopup.cause = ''
+    },
+    // 暂停、关闭确认
+    statusPopupConfirm () {
+      if (!this.statusPopup.cause) {
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('', '请选择原因')
+        )
+        return
+      }
+      const id = this.table.id
+      const reason = this.statusPopup.cause
+      const remark = this.statusPopup.remark
+      const method = this.statusPopup.type === 'close' ? api.doCloseWorkTable : api.doPauseWorkTable
+      method(id, reason, remark).then(res => {
+        this.initTableData(res)
+        this.statusPopup.show = false
+      })
+    },
+    // 进入
+    enter () {
+      this.$router.push({
+        path: '/process/action/lwConsole',
+        query: { workTableId: this.table.id }
+      })
+    },
+  }
+}
+</script>
+<style scoped lang="less">
+</style>