指令下发页面修改

applications/dee-mes/src/views/assemblyPlanManagement/instructionsIssued/components/stationPlanList.vue

+<template>
+  <div class="station-plan-list">
+    <dee-fold-pane
+      :min-percent="22"
+      :default-percent="22"
+      split="vertical"
+      class="detail-pane"
+    >
+      <template slot="paneL">
+        <div class="left-container">
+          <div class="search-box box">
+            <div class="title"><i class="search-icon" /><span>架次搜索</span></div>
+            <div class="row">
+              <label>机型:</label>
+              <el-select v-model="form.model" size="mini" placeholder="请选择" :loading="modelLoading">
+                <el-option v-for="item in modelData" :key="item.id" :label="item.defName" :value="item.id" />
+              </el-select>
+            </div>
+            <div class="row">
+              <label>架次:</label>
+              <el-select v-model="form.sorties" size="mini" placeholder="请选择" :loading="sortiesLoading">
+                <el-option v-for="(item, i) in sortiesData" :key="item.value + i" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="row">
+              <el-button size="mini" type="primary" @click="getTreeData">查询</el-button>
+            </div>
+          </div>
+          <div class="station-box box">
+            <el-tree
+              ref="tree"
+              v-loading="treeLoading"
+              class="plan-tree"
+              :data="treeData"
+              node-key="id"
+              lazy
+              accordion
+              :default-expanded-keys="defaultExpandedKeys"
+              :props="defaultProps"
+              :highlight-current="true"
+              :expand-on-click-node="false"
+              :load="loadNode"
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span class="tree-row">
+                  <i :class="'tree' + node.level" />
+                  <span v-if="node.level === 1" class="label" :title="data.serialNumber">{{ data.serialNumber }}</span>
+                  <span v-if="node.level === 2">
+                    {{ data.serialNumber + '，' + data.name }}
+                    <img v-if="data.workingStatus === 'New'||data.workingStatus===null" :title="未开工" class="img-container" :src="wordImgUrl1" @click="startWorking(data)">
+                    <img v-else-if="data.workingStatus === 'Run'" class="img-container" :title="已开工" :src="wordImgUrl2" @click="startWorking(data)">
+                    <img v-else class="img-container" :title="已完工" :src="wordImgUrl2" @click="startWorking(data)">
+                  </span>
+                  <span v-if="node.level === 3" :class="[data.isOk ?'Delivery':'Finish']">{{ data.serialNumber + '，' + data.name }}</span>
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+      </template>
+      <template slot="paneR">
+        <div class="right-container">
+          <dee-as-com
+            ref="detailCom"
+            :key="layConfig.typeName"
+            :lay-config="layConfig"
+            :form="searchFormData"
+            @row-click="rowClick"
+          />
+        </div>
+      </template>
+    </dee-fold-pane>
+  </div>
+</template>
+
+<script>
+import { post } from '@/utils/http'
+export default {
+  name: 'StationPlanList',
+  data() {
+    return {
+      form: {
+        model: null,
+        sorties: null
+      },
+      modelData: [],
+      modelLoading: true,
+      sortiesData: [],
+      sortiesLoading: true,
+      treeLoading: false,
+      treeData: [],
+      defaultExpandedKeys: [],
+      defaultProps: {
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      layConfig: {
+        typeName: 'JoExecutePlan',
+        layKey: 'instructionsIssuedList'
+      },
+      activeTab: '0',
+      activeNodeData: {},
+      wordImgUrl1: '/icons/startWork1.png',
+      wordImgUrl2: '/icons/startWork2.png',
+      searchFormData: ''
+    }
+  },
+  watch: {
+    'form.model': {
+      immediate: true,
+      handler(val) {
+        if (!val) {
+          return
+        }
+        const model = this.modelData.find((r) => r.id === val)
+        this.$set(this.form, 'modelName', (model && model.defName) || '')
+        this.$set(this.form, 'sorties', '')
+        this.getAddRecursion()
+      }
+    },
+    'form.sorties': {
+      immediate: true,
+      handler(val) {
+        if (!val) {
+          return
+        }
+        const sorties = this.sortiesData.find((r) => r.value === val)
+        this.$set(this.form, 'sortiesName', (sorties && sorties.label) || '')
+        this.getTreeData()
+      }
+    }
+  },
+  created() {
+    this.getAddModel()
+  },
+  mounted() {},
+  methods: {
+  /**
+   * 获取机型
+   */
+    getAddModel() {
+      const param = { searchItems: { items: [{ fieldName: 'id', operator: 'NEQ', value: 0 }] }, sortItem: [{ fieldName: 'modifyTime', sortOrder: 'asc' }] }
+      this.$api
+        .searchApi('AircraftType', param)
+        .then((res) => {
+          this.modelData = []
+          if (res.items && res.items.content) {
+            this.modelData = res.items.content
+            this.$nextTick(() => {
+              if (this.modelData.length) {
+                this.form.model = this.modelData[0].id
+                this.getAddRecursion()
+              }
+            })
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.message,
+              type: 'error'
+            })
+          }
+        })
+        .catch((err) => console.error(err))
+        .finally(() => {
+          this.$nextTick(() => {
+            this.modelLoading = false
+          })
+        })
+    },
+    /**
+   * 获取架次
+   */
+    getAddRecursion() {
+      this.sortiesLoading = true
+      if (!this.model) {
+        this.sortiesData = []
+        this.sorties = null
+      }
+      const params = { searchItems: { items: [{ fieldName: 'aircraftTypeId', operator: 'EQ', value: this.form.model }] }, sortItem: [{ fieldName: 'modifyTime', sortOrder: 'asc' }] }
+      params.openProps = [{ name: 'aircraftType' }]
+      this.$api
+        .searchApi('AircraftSorties', params)
+        .then((res) => {
+          this.sortiesData = []
+          if (res) {
+            this.sortiesData = res.items.content.map((row) => {
+              return {
+                value: row.id,
+                label: row.defName
+              }
+            })
+            this.$nextTick(() => {
+              if (this.sortiesData.length) {
+                this.form.sorties = this.sortiesData[0].value
+              }
+            })
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.message,
+              type: 'error'
+            })
+          }
+        })
+        .catch((err) => console.error(err))
+        .finally(() => {
+          this.$nextTick(() => {
+            this.sortiesLoading = false
+          })
+        })
+    },
+    /**
+   * 获取树结构数据
+   */
+    getTreeData() {
+      this.treeLoading = true
+      const params = {
+        pageFrom: 1,
+        pageSize: 9999,
+        searchItems: {
+          children: [
+            {
+              items: [
+                {
+                  fieldName: 'aircraftSorties.id', // 架次ID
+                  operator: 'EQ',
+                  value: this.form.sorties
+                }
+              ],
+              operator: 'AND'
+            }
+          ],
+          items: [],
+          operator: 'AND'
+        },
+        openProps: [
+          {
+            name: 'extPositionPlans'
+          },
+          {
+            name: 'extPositionLinks',
+            openProps: [
+              {
+                name: 'target',
+                openProps: [
+                  {
+                    name: 'wrProduction'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        sortItem: [
+          {
+            fieldName: 'serialNumber',
+            sortOrder: 'desc'
+          }
+        ]
+      }
+      post(`ExtPosition/queryByStandPost`, params)
+        .then((res) => {
+          this.treeData = [
+            {
+              serialNumber: `BBOM-${this.form.modelName}-${this.form.sortiesName}`,
+              materName: '',
+              gaceVersio: '',
+              state: '',
+              id: 1,
+              children: res.items
+            }
+          ]
+          this.defaultExpandedKeys = [1]
+        })
+        .catch((err) => console.log(err))
+        .finally(() => {
+          this.treeLoading = false
+        })
+    },
+    loadNode(node, resolve) {
+      if (node.level === 1) return resolve(node.data.children)
+      if (node.level > 1) {
+        const params = {
+          pageFrom: 1,
+          pageSize: 9999,
+          searchItems: {
+            children: [
+              {
+                items: [
+                  {
+                    fieldName: 'extPositionUsageLinks.sourceId',
+                    operator: 'EQ',
+                    value: node.data.id
+                  }
+                ],
+                operator: 'AND'
+              }
+            ],
+            items: [],
+            operator: 'AND'
+          },
+          openProps: []
+        }
+        post(`ExtProcessPlan/queryByPosition`, params)
+          .then((res) => {
+            res.items.forEach(element => {
+              element.leaf = true
+              element.workingStatus = element.extPositionPlans && element.extPositionPlans.length > 0 ? element.extPositionPlans[0].planState : null
+            })
+            return resolve(res.items)
+          })
+          .catch((err) => {
+            console.log(err)
+            return resolve([])
+          })
+          .finally(() => {})
+      }
+    },
+    formatTime() {
+      const d = new Date()
+      const year = d.getFullYear()
+      const month = this.getHandledValue(d.getMonth() + 1)
+      const date = this.getHandledValue(d.getDate())
+      const hours = this.getHandledValue(d.getHours())
+      const minutes = this.getHandledValue(d.getMinutes())
+      const second = this.getHandledValue(d.getSeconds())
+      let resStr = ''
+      resStr = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + second
+      return resStr
+    },
+    startWorking(data) {
+      if (data.workingStatus !== 'New') {
+        if (data.workingStatus === 'Run') {
+          this.$utils.showMessageWarning('该站位己开工')
+          return
+        }
+        if (data.workingStatus === null) {
+          this.$utils.showMessageWarning('该站位下没有生成计划')
+          return
+        }
+        return
+      }
+      const params = {
+        'operator': 'MODIFY',
+        'id': data.extPositionPlans[0].id,
+        'planState': 'Run',
+        'extResPositionPlans': [
+          {
+            'operator': 'ADD',
+            'isValid': 'Y',
+            'actualStart': this.formatTime()
+          }
+        ]
+      }
+      this.$confirm('是否开工', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        post('/ExtPositionPlan/recursion', params)
+          .then((res) => {
+            this.$message({
+              type: 'success',
+              message: '开工成功!'
+            })
+            this.getTreeData()
+          })
+          .catch((err) => console.log(err))
+          .finally(() => {})
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    handleNodeClick(data, node) {
+      this.searchFormData = data
+      if (node.level === 3) {
+        console.log(454545, this.$refs.detailCom.$refs.asCom)
+        this.$nextTick(() => {
+          if (this.$refs.detailCom.$refs.asCom && this.$refs.detailCom.$refs.asCom.getData) {
+            this.$refs.detailCom.$refs.asCom.getData(data)
+          }
+        })
+      }
+    },
+    rowClick(data) {
+      this.$emit('getMissData', data)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.station-plan-list {
+ height: 100%;
+ padding: 4px;
+ box-sizing: border-box;
+ display: flex;
+ .left-container {
+  height: 100%;
+  overflow-x:hidden;
+  // width: 15%;
+  .search-box {
+   height: 150px;
+   font-size: 14px;
+   .title {
+    margin-left: 10px;
+    text-align: left;
+    margin-top: 10px;
+   }
+   .search-icon {
+    display: inline-block;
+    width: 21px;
+    height: 21px;
+    background: url(/icons/r-access.png) no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+   }
+   label {
+    margin-right: 6px;
+    display: inline-block;
+   }
+   .el-select {
+    width: calc(100% - 60px);
+   }
+   .row {
+    line-height: 40px;
+    height: 40px;
+    text-align: center;
+   }
+  }
+  .station-box {
+   height: calc(100% - 190px);
+  }
+  .box {
+  //  width: 100%;
+   margin: 4px;
+   border: 1px solid #d8d8d8;
+   border-radius: 8px;
+   padding: 4px;
+   .plan-tree {
+    height: 100%;
+    overflow: scroll;
+    .el-tree-node {
+     width: max-content;
+     min-width: 100%;
+    }
+    .el-tree-node.is-current > .el-tree-node__content {
+     background-color: rgb(214, 214, 214) !important;
+    }
+    .el-tree-node:focus > .el-tree-node__content {
+     background-color: #fff;
+    }
+    &.el-tree--highlight-current .el-tree-node__content {
+     &.disabled {
+      color: #c0c4cc;
+      cursor: not-allowed;
+      background-color: #fff;
+     }
+
+     &.is-curr:not(.disabled),
+     &:hover:not(.disabled) {
+      font-weight: bold;
+      color: rgb(31, 30, 30);
+      background-color: rgb(214, 214, 214);
+     }
+    }
+    .el-tree-node {
+     .el-tree-node__content {
+      height: 40px !important;
+      i {
+       display: inline-block;
+       vertical-align: middle;
+       margin: 10px;
+      }
+      .tree1 {
+       background: url('/icons/aircraft.png') no-repeat;
+       width: 32px;
+       height: 30px;
+      }
+      .tree2 {
+       width: 21px;
+       height: 21px;
+       background: url('/icons/u513.png') no-repeat;
+       background-size: contain;
+      }
+      .img-container{
+        width: 20px;
+        height: 16px;
+        margin-left: 6px;
+      }
+      .tree3 {
+       width: 21px;
+       height: 21px;
+       background: url('/icons/u517.png') no-repeat;
+       background-size: contain;
+      }
+      .label {
+       vertical-align: middle;
+      }
+      .Delivery {
+       color: #0000ff;
+      }
+      .Finish {
+       color: #008000;
+      }
+     }
+    }
+   }
+  }
+ }
+ .right-container {
+  //  width: 82%;
+   margin-left: 20px;
+ }
+}
+</style>