装备-原材料下单前端页面

gaoluyang

2024-07-19 4b3f15e248b7ce3534f277ff127ffd32a3e7992a

装备-原材料下单前端页面

 src/components/view/b1-material-inspection-order.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,256 @@
<template>
  <div>
    <div style="width: 100%;height: 100%;">
      <div>
        <el-row class="title">
          <el-col :span="12" style="padding-left: 20px;text-align: left;">原材料检验下单</el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button size="medium" type="primary" v-if="tabIndex === 0" @click="openIFS">获取IFS订单</el-button>
            <el-button size="medium" type="primary" v-if="tabIndex === 0">报检</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="search">
        <div class="search_thing">
          <div class="search_label">采购订单号：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                                              v-model="componentData.entity.entrustCode" @keyup.enter.native="refreshTable()"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">样品编号：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                                              v-model="componentData.entity.sample" @keyup.enter.native="refreshTable()"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">样品名称：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                                              v-model="componentData.entity.sampleModel" @keyup.enter.native="refreshTable()"></el-input></div>
        </div>
        <div class="search_thing" style="padding-left: 30px;">
          <el-button size="small" @click="refresh()">重 ç½®</el-button>
          <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
        </div>
      </div>
      <div class="table">
        <ul class="tab">
          <li v-for="(m,i) in tabList" :key="i" :class="{active:i==tabIndex}" @click="handleTab(m,i)">{{m.label}}</li>
        </ul>
        <ValueTable :style="getStyle()" ref="ValueTable"
                    :url="$api.insOrder.selectSampleAndProductByOrderId"
                    :componentData="componentData"
                    :key="'b'+ upIndex"  />
      </div>
    </div>
    <el-dialog title="获取IFS订单行" :visible.sync="IFSDialog" width="70%">
      <div class="search">
        <div class="search_thing">
          <div class="search_label">采购订单号：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                                              v-model="componentData.entity.sampleModel" @keyup.enter.native="refreshTable()"></el-input></div>
        </div>
        <div class="search_thing" style="padding-left: 30px;">
          <el-button size="small" @click="refreshIFS()">重 ç½®</el-button>
          <el-button size="small" type="primary" @click="refreshTableIFS()">查 è¯¢</el-button>
        </div>
      </div>
      <div style="height: 70vh;overflow-y: auto;">
        <ValueTable ref="ValueTableIFS"
                    :url="$api.insOrder.selectSampleAndProductByOrderId"
                    :componentData="componentDataIFS"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="IFSDialog=false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitPrint" :loading="IFSGetLoading">获取</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from "../tool/value-table.vue";

export default {
  name: "b1-material-inspection-order",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {ValueTable},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      componentData: { // è¡¨æ ¼æ•°æ®
        entity: {
          entrustCode: null,
          sample: null,
          sampleModel: null,
        },
        isIndex: true,
        showSelect: true,
        select: true,
        selectMethod:'selectMethod',
        do: [
          {
            id: 'update',
            font: '编辑',
            type: 'text',
            method: 'doDiy',
          },
          {
            id: 'verify',
            font: '查看',
            type: 'text',
            method: 'doDiy',
          },
          {
            id: 'dataLook',
            font: '撤销报检',
            type: 'text',
            method: 'handleDataLook',
          }
        ],
        tagField: {},
        selectField: {},
        requiredAdd: [],
        requiredUp: []
      },
      componentDataIFS: {
        entity: {
          entrustCode: null,
          sample: null,
          sampleModel: null,
        },
        isIndex: true,
        showSelect: true,
        select: true,
        selectMethod:'selectMethod',
        do: [],
        tagField: {},
        selectField: {},
        requiredAdd: [],
        requiredUp: []
      },
      tabList: [{
        label: '待报检',
        value: 0
      }, {
        label: '待制单',
        value: 1
      }],
      upIndex: 0,
      tabIndex: 0,
      multipleSelection:[],
      entityCopy: {},
      entityCopyIFS: {},
      IFSDialog: false,
      IFSGetLoading: false
    }
  },
  mounted () {
    this.entityCopy = this.HaveJson(this.componentData.entity)
    this.entityCopyIFS = this.HaveJson(this.componentDataIFS.entity)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    refreshTable(e) {
      this.$refs.ValueTable.selectList(e)
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.refreshTable()
    },
    refreshIFS() {
      this.componentDataIFS.entity = this.HaveJson(this.entityCopyIFS)
      this.refreshTableIFS()
    },
    refreshTableIFS(e) {
      this.$refs.ValueTableIFS.selectList(e)
    },
    // èŽ·å–IFS订单
    submitPrint () {

    },
    // åˆ‡æ¢tab表格
    handleTab(m, i) {
      this.tabIndex = i;
      this.componentData.entity.state = m.value
      this.refreshTable()
    },
    // è¡¨æ ¼é€‰æ‹©æ–¹æ³•
    selectMethod(val){
      this.multipleSelection = val
    },
    openIFS () {
      this.IFSDialog = true
    },
    getStyle(){
      return 'height: calc(100% - '+(this.more?'94':'44')+'px)'
    }
  },
}
</script>

<style scoped>
.title {
  height: 60px;
  line-height: 60px;
}

.search {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 50px;
  width: 250px;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 90px);
}
.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px - 10px - 40px);
  padding: 20px;
}
.tab {
  list-style-type: none;
  display: flex;
  margin-bottom: 12px;
}

.tab li {
  line-height: 24px;
  padding: 6px 14px;
  font-size: 14px;
  color: #333333;
  border: 1px solid #EEEEEE;
  cursor: pointer;
}

.tab li:nth-child(1) {
  border-radius: 8px 0 0 8px;
}

.tab li:nth-child(2) {
  border-radius: 0 8px 8px 0;
}

.tab li.active {
  border-color: #3A7BFA;
  color: #3A7BFA;
}
</style>