udiwms-vue-frame/src/views/inout/IoCreateOrderBizDetail.vue

<template>
  <div>
    <el-button-group style="display: flex">
      <el-button
        type="primary"
        size="mini"
        @click.native.stop="selectProductFunction()"
        style="margin: 0px 60px 10px auto; height: 35px"
        :loading="loading"
      >产品录入
      </el-button
      >
    </el-button-group>
    <el-table v-loading="loading" :data="detailList" style="width: 100%;"
              :row-class-name="tableRowClassName"
              border
              max-height="350" height="350" ref="multipleTable">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column width="150"
                       label="产品通用名"
                       prop="productName"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150"
                       label="规格型号"
                       prop="spec"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150" label="批次号">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.batchNo"
                    :disabled="scope.row.index !== selectedIndex"
                    @input="scope.row.batchNo =scope.row.batchNo.replace(/[\W]/g, '')"
                    ref='inputBatchNoRef'
                    placeholder="请输入批次号" style="width: 80%"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="180" label="生产日期(yyMMdd)">
        <template slot-scope="scope">

          <el-input v-model="scope.row.productDate" auto-complete="off"
                    oninput="if(value.length>6)value=value.slice(0,6)"
                    :disabled="scope.row.index !== selectedIndex"
                    type="number"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column width="180" label="失效日期(yyMMdd)">
        <template slot-scope="scope">

          <el-input v-model="scope.row.expireDate" auto-complete="off"
                    oninput="if(value.length>6)value=value.slice(0,6)"
                    :disabled="scope.row.index !== selectedIndex"
                    type="number"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column width="150" label="单据数量">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.count"
                    placeholder="请输入数量" style="width: 80%"
                    type='number'
                    :disabled="scope.row.index !== selectedIndex"
                    oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="150" label="价格">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.price"
                    type='number'
                    :disabled="scope.row.index !== selectedIndex"
                    placeholder="请输入价格" style="width: 80%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column width="250"
                       label="注册/备案凭证号"
                       prop="zczbhhzbapzbh"
                       show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.zczbhhzbapzbh"
                    :disabled="scope.row.index !== selectedIndex"
                    placeholder="请输入注册/备案凭证号" style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column width="150"
                       label="生产厂家"
                       prop="ylqxzcrbarmc"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.index === selectedIndex"
            @click.stop="true"
            @click.native="rowChange(scope.row)"
          >编辑
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click.stop="true"
            @click.native="copyDetail(scope.row)"
          >复制
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click.stop="true"
            @click.native="deleteCodeArray(scope.$index, scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="业务详情-产品录入"
      :visible.sync="selectProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectProductVisible"
      :append-to-body='true'
    >
      <stockOrderNewSelectProduct
        :closeDialog="closeDialog"
        :data="thisData"
      ></stockOrderNewSelectProduct>
    </el-dialog>

    <!--    <el-dialog-->
    <!--      title="库存产品录入"-->
    <!--      :visible.sync="selectInvProductVisible"-->
    <!--      :close-on-click-modal="false"-->
    <!--      :close-on-press-escape="false"-->
    <!--      width="85%"-->
    <!--      v-if="selectInvProductVisible"-->
    <!--      :append-to-body='true'-->
    <!--    >-->
    <!--      <dialogInvProduct-->
    <!--        :closeDialog="closeDialogC2"-->
    <!--        :data="thisData"-->
    <!--        :invQueryData="invQueryData"-->
    <!--      ></dialogInvProduct>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import stockOrderNewSelectProduct from "./stockOrderNewSelectProduct";
// import dialogInvProduct from "../inventory/DialogInvProduct"
import {getDetailBizs} from "@/api/inout/orderDetailCode";

export default {
  name: "IoCreateOrderBizDetail",
  props: {
    idQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      query: {
        orderId: null,
        code: "",
        corpOrderId: "",
        page: 1,
        limit: 10,
      },
      detailList: [],
      total: 0,
      iCount: 0,
      selectProductVisible: false,
      thisData: {},
    };
  },
  components: {
    stockOrderNewSelectProduct,
    // dialogInvProduct,
  },
  methods: {
    getOrderDetails() {
      this.loading = true;
      this.query.orderId = this.idQuery.billNo;
      getDetailBizs(this.query) //查找该单号下的所有条码
        .then((response) => {
          this.detailList = response.data.list || [];
          this.total = response.data.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.detailList = [];
          this.total = 0;
        });
    },

    rowChange(val) {
      this.currentRow = val;
      this.selectedIndex = val.index;
    },

    closeDialog(rData) {
      this.selectProductVisible = false;
      this.selectInvProductVisible = false;
    },

    rowStyle({row, rowIndex}) {
      let rowBackground = {};
      if (!this.$isNotBlank(row.supId) || !this.$isNotBlank(row.relId)) {
        rowBackground.color = '#f60303';
      }
      return rowBackground;
    },

    tableRowClassName({row, rowIndex}) {
      row.index = rowIndex;
    },

    selectProductFunction() {
      this.selectProductVisible = true;
    },
  }
  ,
  filters: {}
  ,
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  }
  ,
  created() {
  }
  ,
}
;
</script>
<style scoped>

.ao-text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
  float: right;
  text-align: right;
  margin-top: 10px;
}

/**
解决el-input输入框 type=number时，输入中文光标上移问题
 */
.el-input__inner {
  line-height: 1px !important;
}

</style>