mec-cloud_-intelligent-manufacturing_crm/zkqy-ui/src/views/bussiness/dialogCompments/GongYi/GY02.vue

<template>
  <div class="add-table">
    <div class="leftMessage">
      <div class="list" v-for="(item, index) in baseMessage" :key="index">
        <span class="titile" style="background:rgb(52,191,163); color:white;"> {{ item.title}} </span>
        <span class="content" style="background:rgb(235,237,242); color:rgb(232,83,152);"> {{ item.content}} </span>
      </div>
      <div class="content"></div>
    </div>
    <div class="rightMessage">
      <div class="top">       
        <div class="state">
          <div class="list">
            <span>工序状态：</span>
            <p>初始</p>
          </div>
          <div class="list">
            <span>是否外协：</span>
            <p>初始</p>
          </div>
        </div>    
      </div>
      <div class="button">
        <el-button-group>
          <el-button type="primary" icon="el-icon-video-play" plain round>开始</el-button>
          <el-button type="danger" icon="el-icon-video-pause" plain>暂停</el-button> 
          <el-button type="success" icon="el-icon-circle-check" plain>完成</el-button> 
          <el-button type="info" icon="el-icon-refresh" plain round>重置</el-button>       
 
        </el-button-group>

      </div>
      <div class="middle">
        <el-table :data="tableData2" border >
          <el-table-column>
            
          </el-table-column>
        </el-table>
        <div class="name">人员及工时分配</div>       
        <el-table :data="tableData1" border ref="addTableRowRef">
          <el-table-column label="人员姓名">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="分配工时">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.time" controls-position="right" @change="handleChange" :min="0.25" :max="8" :step="0.25"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
              icon="el-icon-delete"
              size="mini"
              @click="deleteTableRow(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
        <el-button size="mini" icon="el-icon-plus" type="primary" @click="addTableRow">新 增</el-button>
        <el-button size="mini" icon="el-icon-check" type="success" @click="saveTableRow(newRow)">保 存</el-button>
      </div>
      <div class="footer">
       <div class="total">
        <span>当前工序总工时： 10</span>
        <span>当前已分配工时： 10</span>
        <span>当前剩余工时： 10</span>
       </div>
      </div>
    </div>
    
  </div>
</template>
<script>
export default {
  name: 'GY02',
  data() {
    return {
      tableData1: [],
      tableData2: [],
      newRow: {},
      baseMessage: [
        { title:'任务', content:'47as04-51-1238'},
        { title:'图号', content:'1CG12-38'},
        { title:'名称', content:'支架'},
        { title:'数量', content:'1'},
        { title:'工艺', content:'1'},
        { title:'质控', content:'1'},
      ]
    }
  },
  methods: {
    addTableRow() {
      const newRow = {
          name: '',
          time: 0.25,
      };  
      this.tableData1.push(newRow);       
    },
    deleteTableRow(row) {
      const index = this.tableData1.indexOf(row);
      if (index !== -1) {
        this.tableData1.splice(index, 1);
      }
    },
    saveTableRow(tableData1) {
      let item = '';
      for(let i = 0; i < this.tableData1.length; i++) {
        item += tableData1[i]
      }
      this.tableData2 = this.item;
      this.tableData1 = [];
    },
    handleChange(value) {
      console.log(value);
    }

  },
}
</script>

<style lang="scss" scoped>
.add-table {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .leftMessage {
    display: flex;
    flex-direction: column;
    width: 180px;
    .list {
      padding: 10px 0px ;
      span {  
        border-radius: 10px;
        padding: 5px;
        margin-right: 10px;
      }
    }
    
  }
  .rightMessage {
    display: flex;
    width: 500px;
    flex-direction: column;
    .top {
      background: #53B0F8;
      color: white;
      height: 60px;
      .state {
        display: flex;
        flex-direction: row;
        padding: 10px 20px;
        span {
          padding-right: 150px;
        }
        p {
          padding-top: 5px;
          font-size: 10px;
        }
      }
    }
    .button {
      width: 100%;
      padding: 20px 0px;
      .el-button {
        width: 140px;
        background: none;

      }
      .el-button--info {
        width: 80px;
      }
    }
    .middle {
      .name {
        color: black;
        font-weight: bold;
        text-align: center;
        padding: 10px 0px;
      }
      .block {
        text-align: center;
      }
    }
    .footer {
      display: inline-block;
      flex-direction: row;
      margin-top: 10px;
      span {
        font-weight: bold;
        color: black;
      }
    }
  }
}
</style>