factory_web/src/views/pum/orderitemplan.vue

<template>
  <el-dialog title="计划明细变更采购订单明细" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')">
    <el-container>
      <el-aside width="45%">
        <el-container>
          <el-header>
            <div class="left-panel">
              <div style="margin-right: 20px">计划列表</div>
              <!-- <el-button
                type="primary"
                icon="el-icon-search"
              ></el-button> -->
            </div>
          </el-header>
          <el-main class="nopadding">
            <scTable ref="table" :data="tableData" row-key="id" stripe hideDo="false" :params="query" highlightCurrentRow
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50" />
              <el-table-column label="物料" prop="material" show-overflow-tooltip>
                <template #default="scope">
                  <span v-if="scope.row.material_"> {{ scope.row.material_.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" prop="need_count"></el-table-column>
              <el-table-column label="需求日期" prop="need_date"></el-table-column>
              <el-table-column label="采购计划" prop="pu_plan_number"></el-table-column>

            </scTable>
          </el-main>
        </el-container>
      </el-aside>
      <el-container>
        <el-header>
          <div class="left-panel">
            <div style="margin-right: 20px">已选计划</div>
            <!-- <el-button
              type="primary"
              @click="createOrderItem"
              v-auth="'post.update'"
            >生成订单</el-button> -->
          </div>
        </el-header>
        <el-main class="nopadding">
          <el-table ref="table2" :data="selectData" stripe>
            <el-table-column label="" type="index"></el-table-column>
            <el-table-column label="物料" prop="material" show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.material_"> {{ scope.row.material_.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="need_count"></el-table-column>
            <el-table-column label="需求日期" prop="need_date"></el-table-column>
            <el-table-column label="采购计划" prop="pu_plan_number"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <template #default="scope">
                <el-button type="primary" link size="small" @click.stop="table_del(index, scope.row)"
                  v-auth="'post.update'">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>
      <el-button type="primary" :loading="isSaveing" @click="createOrderItem">加入订单</el-button>
      <el-button @click="clearSelect">清空选择</el-button>
    </el-footer>
  </el-dialog>
</template>
<script>
export default {
  emits: ["success", "closed"],
  name: "orderitemplan",
  props: {
    puOrder: { type: String, default: '' },
  },
  data() {
    return {
      query: {
        pu_plan__state__in: '20,30',
        page: 0
      },
      selectData: [],
      tableData: [],
      visible: false,
      isSaveing: false,
      setFiltersVisible: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //显示
    open() {
      this.visible = true;
      return this;
    },
    getList() {
      this.$API.pum.planitem.list.req(this.query).then(res => {
        this.tableData = res;
      })
    },
    createOrderItem() {
      let obj = {};
      let pu_planitems = [];
      obj.pu_order = this.puOrder;
      this.selectData.forEach(item => {
        pu_planitems.push(item.id)
      });
      obj.pu_planitems = pu_planitems;
      this.$API.pum.orderitem.addplanitems.req(obj).then(res => {
        debugger;
        console.log(res)
        this.$emit("success");
      })
    },
    clearSelect() {
      this.selectData = [];
      this.$refs.table.clearSelection();
    },
    handleSelectionChange(val) {
      this.selectData = val;
    },
    table_del(index, row) {
      this.selectData.splice(index, 1)
    },

    //新增岗位后更新数据
    handleSaveSuccess(data, mode) {
      //为了减少网络请求，直接变更表格内存数据
      // if (mode == "add") {
      //   this.$refs.table.unshiftRow(data);
      // } else if (mode == "edit") {
      //   this.$refs.table.updateKey(data);
      // }
      //当然也可以暴力的直接刷新表格
      this.$refs.table.refresh()
    },
    closed() {
      this.visible = false;
    },

  },
};
</script>

<style></style>