init

src/views/art/process/process-chart.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="process-table">
+    <el-collapse class="process-table-main">
+      <el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
+        <template slot="title">
+          <div class="process-table-main-title">
+            <span>{{ processObj[item.workSequenceId].name }}</span>
+          </div>
+        </template>
+        <el-row v-for="(i, idx) in item.processFlowEquipmentParams" :key="'item' + index + idx" class="process-table-main-item" :gutter="20">
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-button disabled>
+              {{ i.equipmentId ? equipmentObj[i.equipmentId] : $t('module.art.eqName') }}
+            </el-button>
+          </el-col>
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-button v-if="!processPortObj[item.workSequenceId]" disabled>
+              {{ i.equipmentRecipeId ? equipmentRecipeObj[i.equipmentRecipeId] : $t('module.art.recipeName') }}
+            </el-button>
+          </el-col>
+          <!-- <el-col :span="4" class="process-table-main-item-item">
+            <el-button v-if="!processPortObj[item.workSequenceId]" disabled>
+              {{ i.nodeType ? nodeTypesObj[i.nodeType] : $t('module.art.artType') }}
+            </el-button>
+          </el-col> -->
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-input v-model="i.description" disabled :placeholder="$t('module.art.processList.description')" @change="changeDescription(index, idx)" />
+          </el-col>
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-input v-model="i.remark" disabled :placeholder="$t('module.art.remark')" @change="changeRemark(index, idx)" />
+          </el-col>
+        </el-row>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script>
+import {
+  listAllEquipmentRecipe,
+  listProcessFlowNode,
+  listProcess
+} from '@/api/art-manage/art.js'
+import { listEquipment } from '@/api/material-manage/material'
+
+export default {
+  name: 'ProcessChart',
+  props: {
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dataList: [],
+      processList: [],
+      processObj: {},
+      processPortObj: {},
+      equipmentRecipeList: [],
+      equipmentRecipeObj: [],
+      equipmentList: [],
+      equipmentObj: {},
+      showAddList: [],
+      // 1、上片设备，2、加工设备，3、下片设备
+      nodeTypes: [
+        {
+          id: 1,
+          name: '上片设备'
+        },
+        {
+          id: 2,
+          name: '加工设备'
+        },
+        {
+          id: 3,
+          name: '下片设备'
+        }
+      ],
+      nodeTypesObj: {
+        1: '上片设备',
+        2: '加工设备',
+        3: '下片设备'
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    // 初始化
+    async init() {
+      // 获取工序列表
+      const allProcessRes = await listProcess({})
+      this.processList = allProcessRes.data
+      allProcessRes.data.map(item => {
+        this.processObj[item.id] = item
+        if (item.type === 1) {
+          this.processPortObj[item.id] = item.name
+        }
+      })
+      console.log(this.processList)
+      console.log(this.processObj)
+      // 获取配方列表
+      const allRecipeRes = await listAllEquipmentRecipe()
+      this.equipmentRecipeList = allRecipeRes.data
+      allRecipeRes.data.map(item => {
+        this.equipmentRecipeObj[item.id] = item.name
+      })
+      console.log(this.equipmentRecipeList)
+      // 获取设备列表
+      const allEquipmentRes = await listEquipment()
+      this.equipmentList = allEquipmentRes.data
+      allEquipmentRes.data.map(item => {
+        this.equipmentObj[item.id] = item.name
+      })
+      console.log(this.equipmentList)
+      // 获取列表
+      const allNodeRes = await listProcessFlowNode({
+        processFlowId: this.processFlowId
+      })
+      console.log(allNodeRes)
+      this.dataList = allNodeRes.data.map(item => {
+        delete item.id
+        item.processFlowEquipmentParams.map(i => {
+          delete i.id
+          i.workSequenceId = item.workSequenceId
+          i.processFlowId = item.processFlowId
+          return i
+        })
+        return item
+      })
+      console.log(this.dataList)
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .process-table{
+    .process-table-addprocess{
+      margin-left: 20px;
+      margin-top: 20px;
+    }
+    .process-table-main{
+      width: calc(100% - 40px);
+      margin: 20px;
+      border: 1px solid #e6ebf5;
+      border-radius: 5px;
+      min-width: 1000px;
+      .process-table-main-title{
+        padding: 0 20px;
+        width: 100%;
+        position: relative;
+        .process-table-main-title-delbtn{
+          position: absolute;
+          top: 50%;
+          right: 20px;
+          transform: translateY(-50%);
+        }
+      }
+      .process-table-main-item{
+        width: calc(100% - 40px);
+        margin: 0 10px !important;
+        line-height: 48px;
+      }
+    }
+  }
+</style>