执行派工页面开发

applications/dee-mes/src/views/assemblyPlanManagement/instructionsDispatch/index.vue

+<template>
+  <div class="instructions-issued">
+    <div class="instructions-issued-top">
+      <el-form :inline="true" :model="searchFormData" class="instructions-issued-search" label-width="50px">
+        <el-col :span="12">
+          <el-form-item label="班组:">
+            <el-select v-model="searchFormData.group" placeholder="班组" @change="changePostion">
+              <el-option
+                v-for="(item, i) in groupList"
+                :key="item.value + i"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </div>
+    <split-pane
+      :min-percent="18"
+      :default-percent="defaultPercent"
+      split="vertical"
+      class="detail-pane"
+    >
+      <template slot="paneL">
+        <dee-tab :tabs="tabItems" @tabClick="tabClick">
+          <div slot="0" style="height:100%;box-sizing:border-box">
+            <dee-up-table
+              selection-row
+              :index-row="indexRow"
+              :columns="columns"
+              :data="tableData"
+              :pagination="pagination"
+              @pagination-current-change="paginationCurrentChange"
+              @pagination-size-change="handleSizeChange"
+              @selection-change="selectionChange"
+            >
+              <dee-tools slot="header" :tools="tools" mode="normal" />
+            </dee-up-table>
+          </div>
+          <div slot="1" style="height:100%;box-sizing:border-box">
+            <dee-as-com
+              ref="detailComAlready"
+              :key="layConfigAlready.typeName"
+              :lay-config="layConfigAlready"
+              :form="searchFormData"
+            />
+          </div>
+        </dee-tab>
+      </template>
+      <template slot="paneR">
+        <div class="sub-title" style="margin:0 10px">
+          执行派工
+        </div>
+        <div class="group-list">
+          <div v-for="(item, index) in groupUserList" :key="index" class="group-list-box" :class="{'active': group===item.id}" @click="changeGroup(item)">
+            <div class="left">
+              <div class="left-text"> {{ item.resName }}</div>
+            </div>
+            <div class="right">
+              <div class="right-text"><span>操作工人数：</span><span>{{ item.userCount }}人</span></div>
+              <div class="right-text"><span>未完成任务：</span><span>{{ item.notFinishCount }}项</span></div>
+              <div class="right-text"><span>未完成工时：</span><span>{{ item.notFinishWork }}（h）</span></div>
+              <div class="right-text"><span>当月完成任务：</span><span>{{ item.finishCount }}项</span></div>
+              <div class="right-text"><span>当月完成工时：</span><span>{{ item.finishWork }}（h）</span></div>
+              <el-tooltip placement="top">
+                <div slot="content">
+                  <span v-for="user in item.extProcessSkillUsers" :key="user.id">
+                    {{ user.dxUserInfo.name }}
+                  </span>
+                </div>
+                <div class="right-text overfllowhind">
+                  <span>班组长：</span>
+                  <span v-for="user in item.extProcessSkillUsers" :key="user.id">
+                    {{ user.dxUserInfo.name }}
+                  </span>
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </split-pane>
+  </div>
+</template>
+<script>
+import { post } from '@/utils/http'
+export default {
+  data() {
+    return {
+      searchFormData: {
+        group: ''
+      },
+      groupList: [],
+      group: '',
+      groupType: '',
+      groupUserList: [],
+      activeName: 0,
+      defaultPercent: 80,
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      columns: [
+        { title: '机型', key: 'extProcessPlan.planeType', align: 'left' },
+        { title: '架次', key: 'extProcessPlan.sorties', align: 'left' },
+        { title: '站位', key: 'extProcessPlan.positionNumber', align: 'left' },
+        { title: '指令号', key: 'extProcessPlan.serialNumber', align: 'left' },
+        { title: '指令名称', key: 'extProcessPlan.name', align: 'left' },
+        { title: '工时定额', key: 'extProcessPlan.workHour', align: 'left' },
+        { title: '工艺员', key: 'extProcessPlan.note', align: 'left' },
+        { title: '计划开始', key: 'scheduledStart', align: 'left' },
+        { title: '计划结束', key: 'scheduledEnd', align: 'left' },
+        { title: '下达时间', key: 'scheduledStart', align: 'left' },
+        { title: '下达班组长', key: 'scheduledEnd', align: 'left' }
+      ],
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 20,
+        total: 0,
+        pageSizes: [20, 50, 100]
+      },
+      tools: [
+        {
+          type: 'icon',
+          name: '派工',
+          icon: '/icons/o-Referencedoc.png',
+          handler: {
+            click: () => {
+              this.$confirm('您确认执行该操作吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).then(() => {
+                const arr = []
+                this.selectionRow.map(item => {
+                  arr.push(
+                    {
+                      id: item.id,
+                      operator: 'MODIFY',
+                      planState: 'Issued',
+                      extProcessSkillId: item.skill,
+                      extProcessSkillIdType: item.skillType
+                    }
+                  )
+                })
+                post('/JoExecutePlan/recursions', arr)
+                  .then((res) => {
+                    this.$message({
+                      type: 'success',
+                      message: '提交成功!'
+                    })
+                    this.getInstructionsIssuedListTo()
+                  })
+                  .catch((err) => console.log(err))
+                  .finally(() => {})
+              }).catch(() => {
+              })
+            }
+          }
+        }
+      ]
+    }
+  },
+  computed: {
+    tabItems() {
+      return [
+        {
+          name: '派工',
+          id: '0'
+        },
+        {
+          name: '已派工',
+          id: '1'
+        }
+      ]
+    },
+    layConfigAlready() {
+      return {
+        typeName: 'JoExecutePlan',
+        layKey: 'instructionsIssuedListAlready'
+      }
+    }
+  },
+  created() {
+    this.getGroup()
+  },
+  methods: {
+    getGroup() {
+      this.groupList = []
+      this.$set(this.searchFormData, 'group', '')
+      // const userId = localStorage.getItem('userId') || ''
+      const params = {
+        'searchItems': {
+          'children': [
+            {
+              'items': [
+                {
+                  'fieldName': 'extProcessSkillUsers.dxUserInfoId',
+                  'operator': 'EQ',
+                  'value': 1626781930036
+                },
+                {
+                  'fieldName': 'isValid',
+                  'operator': 'EQ',
+                  'value': 'Y'
+                },
+                {
+                  'fieldName': 'extProcessSkillUsers.isSkillLeader',
+                  'operator': 'EQ',
+                  'value': true
+                },
+                {
+                  'fieldName': 'skillType',
+                  'operator': 'EQ',
+                  'value': 'FitOut'
+                }
+              ],
+              'operator': 'AND'
+            }
+          ],
+          'items': [],
+          'operator': 'AND'
+        },
+        'openProps': [],
+        'sortItem': [
+          {
+            'fieldName': 'modifyTime',
+            'sortOrder': 'desc'
+          }
+        ],
+        'toValidateKeys': ''
+      }
+      post('/ExtProcessSkill/search', params).then(res => {
+        if (res.items && res.items.content) {
+          this.groupList = res.items.content.map(row => {
+            return {
+              value: row.id,
+              label: row.resName
+            }
+          })
+          this.$set(this.searchFormData, 'group', this.groupList[0].value)
+          this.$set(this.searchFormData, 'groupName', this.groupList[0].label)
+          this.getGroupUser()
+        }
+      })
+    },
+    changePostion() {
+      const postion = this.postionList.find(r => r.value === this.searchFormData.postion)
+      this.$set(this.searchFormData, 'postionName', postion && postion.label || '')
+      this.$set(this.searchFormData, 'postionId', postion && postion.id || '')
+      this.getSortiesList()
+      this.getGroupList()
+    },
+    changeSorties() {
+      const sorties = this.sortiesData.find(r => r.value === this.searchFormData.sorties)
+      this.$set(this.searchFormData, 'sortiesName', sorties && sorties.label || '')
+      this.$set(this.searchFormData, 'workId', sorties && sorties.postionId || '')
+      this.status = sorties.status
+      this.getTableData()
+    },
+    tabClick(tab) {
+      this.activeName = tab.index
+      if (this.activeName === '1') {
+        this.defaultPercent = 100
+      } else {
+        this.defaultPercent = 80
+      }
+      this.getTableData()
+    },
+    getTableData() {
+      if (this.activeName === '1') {
+        if (this.$refs.detailComAlready) {
+          this.$refs.detailComAlready.$children[0].getData()
+        }
+      } else {
+        this.getInstructionsIssuedListTo()
+      }
+    },
+    getInstructionsIssuedListTo() {
+      const params = {
+        'pageFrom': this.pagination.currentPage,
+        'pageSize': this.pagination.pageSize,
+        'searchItems': {
+          'children': [
+            {
+              'items': [
+                {
+                  'fieldName': 'extProcessPlan.sorties',
+                  'operator': 'EQ',
+                  'value': this.searchFormData.sortiesName
+                },
+                {
+                  'fieldName': 'extProcessPlan.positionNumber',
+                  'operator': 'EQ',
+                  'value': this.searchFormData.postionName
+                },
+                {
+                  'fieldName': 'planState',
+                  'operator': 'EQ',
+                  'value': 'Yes'
+                }
+              ],
+              'operator': 'AND'
+            }
+          ],
+          'items': [],
+          'operator': 'AND'
+        },
+        'openProps': [
+          {
+            'name': 'extProcessPlan',
+            'openProps': [
+              {
+                'name': 'extSupportings'
+              }
+            ]
+          }
+        ],
+        'sortItem': [
+          {
+            'fieldName': 'modifyTime',
+            'sortOrder': 'desc'
+          }
+        ]
+      }
+      post('/JoExecutePlan/getProductionPrepare', params).then(res => {
+        if (res.items && res.items.content) {
+          this.tableData = res.items.content
+          // this.$set(this, 'group', res.items[0] && res.items[0].id || '')
+        }
+      })
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getInstructionsIssuedListTo()
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getInstructionsIssuedListTo()
+    },
+    selectionChange(val) {
+      val.forEach(element => {
+        element.skill = this.group
+        element.skillType = this.groupType
+      })
+      this.selectionRow = val
+    },
+    changeGroup(val) {
+      this.$set(this, 'group', val.id || '')
+      this.$set(this, 'groupType', val.subTypeName || '')
+      if (this.selectionRow.length > 0) {
+        this.selectionRow.forEach(element => {
+          element.skill = this.group
+          element.skillType = this.groupType
+        })
+      }
+    },
+    getGroupUser() {
+      const params = {
+        'pageFrom': 1,
+        'pageSize': 10,
+        'searchItems': {
+          'children': [
+            {
+              'items': [
+                {
+                  'fieldName': 'extProcessSkillId',
+                  'operator': 'EQ',
+                  'value': this.searchFormData.group
+                }
+              ],
+              'operator': 'AND'
+            }
+          ],
+          'items': [],
+          'operator': 'AND'
+        },
+        'openProps': [
+          {
+            'name': 'extProcessSkill'
+          }
+        ],
+        'sortItem': [
+          {
+            'fieldName': 'modifyTime',
+            'sortOrder': 'desc'
+          }
+        ],
+        'toValidateKeys': ''
+      }
+      post('/ExtProcessSkillUser/getSkillUser', params).then(res => {
+        if (res.items && res.items.content) {
+          this.groupUserList = res.items.content
+          this.$set(this, 'group', res.items.content[0] && res.items.content[0].id || '')
+          this.$set(this, 'groupType', res.items.content[0] && res.items.content[0].subTypeName || '')
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.instructions-issued{
+  background: #ffff;
+  height: 100%;
+  .group-list{
+    height: calc(100% - 100px);
+    overflow-y: scroll;
+    margin-bottom: 20px;
+    .group-list-box{
+      box-sizing: border-box;
+      background: url("/images/tasks.png") no-repeat;
+      background-size: 100% 100%;
+      padding: 10px;
+      margin: 10px 20px;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+      border-radius: 10px;
+      font-size: 14px;
+      border: 3px solid #fff;
+      .left{
+        text-align: center;
+        .left-text{
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+      .right{
+        .right-text{
+          padding-top: 8px;
+        }
+        .overfllowhind{
+          max-width: 100%;
+          word-break:keep-all;
+          white-space:nowrap;
+          overflow:hidden;
+          text-overflow:ellipsis;
+        }
+
+      }
+    }
+    .active{
+      color: #cf9236;
+      font-weight: 700;
+      border: 3px solid #cf9236;
+    }
+  }
+  .instructions-issued-top{
+    display: flex;
+    align-items: center;
+    .instructions-issued-search {
+      padding: 10px 8px;
+      height: 40px;
+      width: 40%;
+    }
+    .start-working{
+      height: 30px;
+      cursor: pointer;
+      img{
+        height: 100%;
+      };
+    }
+  }
+}
+</style>

applications/dee-mes/src/views/assemblyPlanManagement/instructionsIssued/index.vue

@@ -40,13 +40,6 @@
       <template slot="paneL">
         <dee-tab :tabs="tabItems" @tabClick="tabClick">
           <div slot="0" style="height:100%;box-sizing:border-box">
-            <!-- <dee-as-com
-              ref="detailComTo"
-              :key="layConfig.typeName"
-              :lay-config="layConfig"
-              :form="searchFormData"
-              @row-click="rowClick"
-            /> -->
             <dee-up-table
               selection-row
               :index-row="indexRow"
@@ -215,12 +208,6 @@ export default {
         }
       ]
     },
-    layConfig() {
-      return {
-        typeName: 'JoExecutePlan',
-        layKey: 'instructionsIssuedListTo'
-      }
-    },
     layConfigAlready() {
       return {
         typeName: 'JoExecutePlan',
@@ -303,7 +290,7 @@ export default {
               value: row.defCode,
               label: row.defName,
               status: row.extPosition[0].extPositionPlans[0] ? row.extPosition[0].extPositionPlans[0].planState : '',
-              postionId: row.extPosition[0] ? row.extPosition[0].id : ''
+              postionId: row.extPosition[0].extPositionPlans[0] ? row.extPosition[0].extPositionPlans[0].id : ''
             }
           })
           this.$set(this.searchFormData, 'sorties', this.sortiesData[0].value)