添加物料配套管理

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

 <template>
   <div class="stationPlan-maintenance-page">
-    <dee-tab :tabs="tabItems" :show-swipe="false" :is-detail="false">
+    <dee-fold-pane
+      v-if="$route.path==='/dee-mes/material-supporting-management'"
+      :min-percent="18"
+      :default-percent="18"
+      split="vertical"
+      class="detail-pane"
+      fold-direction="false"
+    >
+      <template slot="paneL">
+        <div class="three-member-wrap">
+          <materialSupporting @getMissData="getMissData" />
+        </div>
+      </template>
+      <template slot="paneR">
+        <div class="resourceTable-wrap">
+          <missingParts :info="missInfo" />
+        </div>
+      </template>
+    </dee-fold-pane>
+    <dee-tab v-else :tabs="tabItems" :show-swipe="false" :is-detail="false">
       <div slot="0" style="height:100%;box-sizing:border-box">
         <dee-fold-pane
           :min-percent="18"
@@ -35,7 +54,6 @@
     </dee-tab>
   </div>
 </template>
-
 <script>
 import { post } from '@/utils/http'
 import searchBar from './searchBar.vue'
@@ -43,9 +61,10 @@ import station from './station.vue'
 import gantt from './gantt.vue'
 import missingParts from './missingParts'
 import stationPlanList from './stationPlanList'
+import materialSupporting from './materialSupporting'
 export default {
   name: 'DeeMesStationPlanMaintenance',
-  components: { searchBar, station, gantt, missingParts, stationPlanList },
+  components: { searchBar, station, gantt, missingParts, stationPlanList, materialSupporting },
   data() {
     return {
       sortiesId: '',

applications/dee-mes/src/views/assemblyPlanManagement/stationPlanMaintenance/materialSupporting.vue

+<template>
+  <div class="material-supporting">
+    <dee-fold-pane
+      :min-percent="18"
+      :default-percent="18"
+      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"
+              :default-expanded-keys="defaultExpandedKeys"
+              :current-node-key="currentNodekey"
+              :props="defaultProps"
+              :highlight-current="true"
+              :expand-on-click-node="false"
+              @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 }}</span>
+                  <span v-if="node.level === 3" :class="[data.target.isOk ?'Delivery':'Finish']">{{ data.target.serialNumber + '，' + data.target.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"
+            table-height="calc(100vh - 140px)"
+            @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'
+      },
+      tabItems: [
+        {
+          name: '未下达',
+          id: '0'
+        },
+        {
+          name: '已下达',
+          id: '1'
+        }
+      ],
+      layConfig: {
+        typeName: 'JoExecutePlan',
+        layKey: 'materialSupportingList'
+      },
+      activeNodeData: {},
+      currentNodekey: ''
+    }
+  },
+  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: 10,
+        searchItems: {
+          children: [
+            {
+              items: [
+                {
+                  fieldName: 'aircraftSorties.id', // 架次ID
+                  operator: 'EQ',
+                  value: this.form.sorties
+                }
+              ],
+              operator: 'AND'
+            }
+          ],
+          items: [],
+          operator: 'AND'
+        },
+        openProps: [
+          {
+            name: 'extPositionPlans'
+          },
+          {
+            name: 'extPositionLinks',
+            sortItem: [
+              {
+                fieldName: 'target.serialNumber',
+                sortOrder: 'asc'
+              }
+            ],
+            openProps: [
+              {
+                name: 'target',
+                openProps: [
+                  {
+                    name: 'wrProduction'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        sortItem: [
+          {
+            fieldName: 'serialNumber',
+            sortOrder: 'desc'
+          }
+        ]
+      }
+      post(`/ExtPosition/queryPosition`, params)
+        .then((res) => {
+          var data = res.items.content || []
+          data.map((item) => {
+            if (item.extPositionLinks) {
+              item.extPositionLinks = item.extPositionLinks.filter(val => val.target)
+              item.extPositionLinks.forEach(element => {
+                element.leaf = true
+              })
+              item.children = item.extPositionLinks
+            }
+          })
+          this.treeData = [
+            {
+              serialNumber: `BBOM-${this.form.modelName}-${this.form.sortiesName}`,
+              materName: '',
+              gaceVersio: '',
+              state: '',
+              children: data
+            }
+          ]
+          this.defaultExpandedKeys = [this.treeData[0].children[0].id]
+          this.currentNodekey = this.treeData[0].children[0].children[0].id
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey)
+          })
+          this.$nextTick(() => {
+            this.treeData[0].children[0].children[0].level = 3
+            this.activeNodeData = this.treeData[0].children[0].children[0]
+            if (this.$refs.detailCom.$refs.asCom && this.$refs.detailCom.$refs.asCom.getData) {
+              this.$refs.detailCom.$refs.asCom.getData(this.treeData[0].children[0].children[0])
+            }
+          })
+        })
+        .catch((err) => console.log(err))
+        .finally(() => {
+          this.treeLoading = false
+        })
+    },
+    handleNodeClick(data, node) {
+      data.level = node.level
+      data.searchStories = this.form.sortiesName
+      this.activeNodeData = data
+      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">
+.material-supporting {
+ 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;
+      .el-tree-node__expand-icon.is-leaf{
+        color: transparent !important;
+      }
+      .el-tree-node__expand-icon {
+        color: #000;
+        font-size: 24px;
+      }
+      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;
+      }
+      .tree3 {
+       width: 21px;
+       height: 21px;
+       background: url('/icons/u517.png') no-repeat;
+       background-size: contain;
+      }
+      .label {
+       vertical-align: middle;
+      }
+      .Issued,
+      .Run,
+      .New,
+      .Yes,
+      .Delivery {
+       color: #0000ff;
+      }
+      .Finish {
+       color: #008000;
+      }
+      .Reserved {
+       color: #ff0000;
+      }
+      .Not {
+       color: #999999;
+      }
+      .Paused {
+       color: #ffff00;
+      }
+     }
+    }
+   }
+  }
+ }
+ .right-container {
+  //  width: 82%;
+   margin-left: 20px;
+ }
+}
+</style>