Tmr-Admin/src/views/leftoverManagement/index.vue

<template>
  <div class="container">
    <div class="header-box">
      <p> 剩料计划</p>
      <el-button type="primary" plain class="add-btn" @click="dialogVisible = true">新 增</el-button>
    </div>

    <div class="table">
      <el-table
       element-loading-text="给我一点时间"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        class="elTable table-fixed"
        >
        <el-table-column
          label="序号"
          width="60"
          type="index"
          >
        </el-table-column>
        <el-table-column
          label="替代方案"
          prop="name"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="miniSuccess"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.$index, scope.row)"></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
      <el-pagination
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
     </div>

     <!-- 新增删除提示 -->
     <el-dialog
        title="剩料新增"
        :visible.sync="dialogVisible"
        width="30%"
       >
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="替代方案" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择替代方案">
                <el-option label="日料" value="1"></el-option>
                <el-option label="豆bo" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="add-btn" @click="dialogVisible = false">取 消</el-button>
          <el-button class="add-btn" type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
  import {
    GetDataByName,
    GetDataByNames
  } from '@/api/common'
  import Cookies from 'js-cookie'
  import {
    MessageBox
  } from 'element-ui'
  export default {
    name: 'LeftoverManagement',
    data() {
      return {
        tableData: [{
          id:1,
          num: '1',
          name: '日粮',
        }, {
          id:2,
          num: '2',
          name: '豆泊',
        }, {
          id:3,
          num: '3',
          name: '日粮',
        }],
        currentPage1: 1,
        dialogVisible:false,
        //
        ruleForm: {
          name: '',
        },
        rules:{
          name: [
            { required: true, message: '请选择替代方案', trigger: 'change' }
          ]
        }
      }
    },
    created() {},
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
        // 获取当前数据,点击编辑
        this.ruleForm = row;
        this.dialogVisible = true;
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('确定删除当前剩料配置吗?', '提示', {
          confirmButtonText: '确定',
          confirmButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('common.cancelMsg')
          });
        })
      },
      //
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

    },

  }
</script>

<style lang="scss" scoped>
  .header-box{
    display: flex;
    justify-content: space-between;
  }

  .container{
    padding: 15px;
    min-height:600px;
    margin-left:10px;
    .add-btn{
      width:90px;
      height:40px;
    }
    .page{
      margin-top:20px;
    }
  }
</style>