udiwms-vue-frame/src/views/dev/invDevicePurOrderDialog.vue

<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="dataForm" label-width="120px" disabled>
      <el-row type="flex" justify="end" v-if="editType == 1">
        <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
          <el-button
            v-show="!this.sysApprovalFlowConfig"
            type="primary"
            @click.native="saveOrder('3')"
            :loading="loading"
          >审核通过
          </el-button
          >
          <el-button
            v-show="!this.sysApprovalFlowConfig"
            type="primary"
            @click.native="saveOrder('4')"
            :loading="loading"
          >审核拒绝
          </el-button
          >
          <el-button
            v-show="this.sysApprovalFlowConfig"
            type="primary"
            @click.native="showApprovalFlowDetail()"
          >审核过程
          </el-button>
        </el-button-group>
      </el-row>

      <el-card style="margin-top: -5px;">
        <el-row>
          <el-col :span="11">
            <el-form-item label="采购单号:" prop="billNo">
              <el-input v-model="formData.billNo" style="width: 90%" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="创建时间:" prop="createTime">
              <el-date-picker
                :disabled="true"
                v-model="formData.createTime"
                type="datetime"
                placeholder="选择日期"
                style="width: 90%"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: -10px">
          <el-col :span="11">
            <el-form-item label="紧急程度:" prop="emergency">
              <el-select v-model="formData.emergency" :disabled="true" placeholder="请选择紧急程度" style="width: 90%"
                         clearable>
                <el-option label="正常" :value=1></el-option>
                <el-option label="较急" :value=2></el-option>
                <el-option label="特急" :value=3></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="到货截止:" prop="arrivalTime">
              <el-date-picker
                :disabled="true"
                v-model="formData.arrivalTime"
                type="datetime"
                placeholder="选择日期"
                style="width: 90%"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="采购仓库:" prop="locStorageCode">
              <el-select v-model="formData.invName" placeholder="采购仓库信息" style="width: 90%"
                         :disabled="true" clearable>
                <el-option
                  v-for="item in subInvList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="审核说明:" prop="billNo">
              <el-input v-model="formData.auditRemark" style="width: 90%" auto-complete="off" type="textarea"
                        autosize></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="采购说明:" prop="billNo">
              <el-input v-model="formData.remark" style="width: 90%" :disabled="true" auto-complete="off"
                        type="textarea" autosize></el-input>
            </el-form-item>
          </el-col>
          <!--                    <el-col :span="11">-->
          <!--                        <el-form-item>-->
          <!--                            <el-checkbox v-model="formData.autoPurchase">是否生成采购入库单</el-checkbox>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->

        </el-row>
        <el-row v-show="formData.autoPurchase">
          <el-col :span="11">
            <el-form-item label="入库仓库:" prop="locStorageCode">
              <el-select v-model="formData.targetSubInv" placeholder="入库仓库信息" style="width: 90%"
                         @change="targetInvChange" clearable>
                <el-option
                  v-for="item in tarSubList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="入库单据类型:" class="query-form-item" prop="targetBillAction">
              <el-select v-model="formData.targetBillAction" placeholder="请选择单据类型" style="width: 90%">
                <el-option
                  v-for="item in busTypes"
                  :key="item.name"
                  :label="item.name"
                  :value="item.action">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>


        </el-row>
      </el-card>

      <el-card>
        <el-table v-loading="loading" :data="codeArray" style="width: 100%;" :row-class-name="tableRowClassName" border
                  highlight-current-row max-height="300" height="300" ref="multipleTable">
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="DI/物资编码" prop="nameCode"></el-table-column>
          <el-table-column label="物资名称" prop="productName" show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="规格型号" prop="spec" show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="计量单位" prop="measname" show-overflow-tooltip="true" width="100"></el-table-column>
          <el-table-column label="价格" prop="price" show-overflow-tooltip="true" width="100"></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'
                        @change="tableCountChange(scope.row)"
                        :disabled="scope.row.index !== selectedIndex"
                        oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
          <el-table-column label="生产厂家" prop="manufactory"></el-table-column>
          <el-table-column label="供应商" prop="supName"></el-table-column>
        </el-table>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {orderByBillNo} from "@/api/purchase/purOrder.js"

export default {

  name: 'invDevicePurOrderDialog',
  props: {
    idQuery: {
      type: Object,
      required: true
    },
    rowData: {
      type: Object,
      required: true
    }

  },
  watch: {
    rowData: function(newVal, oldVal) {

      this.searchData(newVal)
    }
  }
  ,
  data() {
    return {
      formData:{},
      loading: false,
      codeArray: [],
      total: 0,
      filterQuery: {
        limit: 1,
        page: 10,
        // status: 12,
        // billNo:null
      }

    }
  }
  ,
  methods: {}
  ,
  created() {
    /**
     * 如果采购订单号外键 不为 空 触发 获取 订单 和 明细
     */
    if (this.rowData.purOrderBillNo != null && this.rowData.purOrderBillNo != ''){
      // this.filterQuery.billNo = this.rowData.purOrderBillNo
      orderByBillNo(this.rowData.purOrderBillNo)
        .then((response) => {
          if (response.code == 20000) {
            this.formData = response.data;
            this.codeArray = response.data.items || [];
          } else {
            this.$message.error(response.message);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  components: {}
}

</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>