mt-ck-wms-ui/src/views/art/process/process-chart.vue

<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>