|
|
@@ -0,0 +1,203 @@
|
|
|
+<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>
|
GYH