kd-aiot-frontend-aps/src/views/outsourcing/components/outsourceAddOrEdit.vue

<template>
  <ele-modal :visible.sync="visible" :closed="cancel" :title="`${ addOrEditFlag ? '创建' : '编辑'}委外计划`"
             custom-class="ele-dialog-form" :close-on-click-modal="true" :close-on-press-escape="false" width="80%">
    <div>
      <el-form :model="formData" ref="form" label-width="120px" class="ele-body" :rules="rules">
        <el-row :gutter="32">

          <el-col :span="4">
            <el-form-item label="计划名称:">
              <el-input clearable v-model="formData.name" placeholder="请输入" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <el-form :model="formData" ref="tableForm">

        <ele-pro-table ref="parentTable" :needPage="false" :columns="parentColumns" row-key="id">

          <template v-slot:toolbar>
            <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="addOrder">
              添加销售订单
            </el-button>
            <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="addPlan">
              添加生产计划
            </el-button>
          </template>

          <template v-slot:expand="{ row, $index }">
            <div style="width:calc(100% - 95px); min-height: 60px; margin-left: 95px;" v-if="row.childrenList || row.childrenList.length > 0">

              <ele-pro-table :toolbar="false" toolsTheme="none" ref="childTable" :need-page="false"
                             :datasource="row.childrenList" :columns="childColumns" :key="row.id + '-'+ $index">



              </ele-pro-table>

            </div>
          </template>


        </ele-pro-table>

      </el-form>

    </div>

    <orderTablePopup ref="orderTablePopup" @selectOrder="selectOrder"></orderTablePopup>
    <planTablePopup ref="planTablePopup" @selectPlan="selectPlan"></planTablePopup>

  </ele-modal>
</template>

<script>
import orderTablePopup from './orderTablePopup.vue';
import planTablePopup from './planTablePopup.vue';
export default {
  components: {
    orderTablePopup,
    planTablePopup
  },
  data() {
    return {
      visible: false,
      addOrEditFlag: true,
      formData: {
        name: '',
      },
      rules: {

      },
      parentColumns: [
        {
          width: 45,
          type: 'expand',
          columnKey: 'childrenList',
          align: 'center',
          slot: 'expand'
        },
      ],
      childColumns: [

      ],
      tableData: [],
    }
  },
  created() {
  },
  methods: {
    selectOrder(row){
      console.log(row);
    },
    selectPlan(row){
      console.log(row);
    },
    addOrder(){
      console.log('addOrder...........');
      // this.tableData = this.$refs.parentTable.getData();
      this.$refs.orderTablePopup.open();
    },
    addPlan(){
      console.log('addPlan...........');
      // this.tableData = this.$refs.parentTable.getData();
      this.$refs.planTablePopup.open();
    },
    open(row){
      // 有值为编辑
      if(row){
        this.addOrEditFlag = false;
      }
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    }
  }
}
</script>

<style scoped lang="scss">

</style>