order-ui-pc/src/views/purchaseIn/purchaseOrder/components/order-in-table.vue

<template>
  <el-row class="addForm">
    <el-col :span="24">
      <el-form
        :model="tableForm"
        :rules="tableFormThis"
        ref="tableForm"
        :size="'mini'"
        class="demo-tableForm product_go"
      >
        <el-table
          :data="tableForm.product_go"
          border
          :size="'mini'"
          row-key="key"
        >
          <template v-for="(item, index) in columns">
            <el-table-column
              :prop="item.prop"
              show-overflow-tooltip
              :label="item.label"
              :width="item.width"
              :min-width="item.minWidth"
              :key="item.prop + index"
            />
          </template>

          <el-table-column fixed="right" width="80">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
              <el-tooltip
                class="fr"
                style="margin: 3px 0 0 0"
                v-if="
                  (status === '1' && powers.some((item) => item == '028')) ||
                  (status === '2' && powers.some((item) => item == '028'))
                "
                effect="dark"
                content="添加"
                placement="top"
              >
                <i
                  class="el-icon-circle-plus-outline tb-icon"
                  style="color: #63cbe7"
                  @click="openModal()"
                ></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tooltip
                v-if="powers.some((item) => item == '007')"
                effect="dark"
                content="详情"
                placement="top"
              >
                <i
                  class="el-icon-view tb-icon"
                  @click="
                    routeGoto('wsmInOrderDetail', {
                      id: scope.row.wsm_in_code,
                    })
                  "
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <wsm-in-order-model
        :show-model="showModel"
        :sitem="modelSitem"
        @refresh="(showModel = false), $emit('refresh')"
        @cancel="showModel = false"
      />
    </el-col>
  </el-row>
</template>
   <script>
import asyncRequest from "@/apis/service/stock/allot/detail";
import resToken from "@/mixins/resToken";
import config from "./columns-table"; //表格列参数
import wsmInOrderModel from "@/views/purchaseIn/wsmInOrder/components/wsm-in-order-model";
export default {
  name: "allot",
  props: ["id", "sitem", "newTime"],
  mixins: [resToken],
  components: { wsmInOrderModel },
  computed: {
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "purchaseOrderDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      showModel: false,
      isDetail: false,
      modelId: 0,
      options: [],
      status: "",
      loading: false,
      modelSitem: null,
      wsm_in_code: "",
      tableForm: {
        product_go: [], //出库商品
      },
      tableFormThis: config.tableFormThis,
      columns: config.columns,
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.modelSitem = null;
      await this.resetForm();
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.tableForm) {
          this.$refs.tableForm.resetFields();
          this.$refs.tableForm.clearValidate();
          const { status, child } = this.sitem;
          this.status = status;
          this.tableForm.product_go = child || [];
        }
      });
    },
    openModal() {
      this.modelSitem=this.sitem;
      this.showModel = true;
    },
    async submitForm() {
      let good = [];
      this.loading = true;
      good = this.getGoodList();
      const model = {
        allot_code: this.sitem.allot_code,
        good: good,
      };
      let res = {};
      if (this.status == "3") {
        res = await asyncRequest.allotgetin(model);
      } else {
        res = await asyncRequest.allotvesio(model);
      }

      this.loading = false;
      if (res && res.code === 0) {
        this.$notify.success({
          title:
            this.status == "3"
              ? "入库方验货结果提交成功!"
              : "入库方验货审核结果提交成功",
          message: "",
        });

        this.$emit("refresh");
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    //提交表单前 商品信息list 汇总
    getGoodList() {
      let oldList = JSON.parse(JSON.stringify(this.tableForm.product_go)),
        resList = [];
      oldList.forEach((v1) => {
        let goodModel = {
          good_code: v1.type_code,
          usable_num: v1.usable_stock,
          error_num: v1.error_num,
          error_remark: v1.error_remark,
          error_code: v1.error_code,
        };
        if (this.status === "4") {
          goodModel.stock_num = v1.stock_num;
        }

        resList.push(goodModel);
      });
      return resList;
    },
  },
};
</script>


<style lang="scss" scoped>
.allot,
.allotDetail {
  .label-title-model {
    line-height: 30px;
    width: 100%;
    color: #909399;
    font-weight: bold;
    font-size: 15px;
    padding-bottom: 12px;
    text-align: center;
  }
  .product_go {
    .el-form-item--mini.el-form-item {
      margin: 0 !important;
      .spscope {
        word-break: break-all !important;
        line-height: 23px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        font-style: normal !important;
        text-decoration: none !important;
        border: none !important;
        display: inline-block !important;
        font-weight: 500 !important;
        font-family: "Microsoft Yahei", sans-serif !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-font-smoothing: antialiased !important;
        color: #606266 !important;
        font-size: 12px !important;
      }
    }
  }
}
</style>