rongxing-vue/src/views/modules/yieldReport/com_transform_part.vue

<template>
  <div class="customer-css">
    <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners"
               width="800px" style="height: 485px;" class="customer-dialog">
      <el-form :inline="true" label-position="top" style="height: 350px;"
               label-width="80px">
        <!-- 菜单信息 -->
        <el-row>
          <el-col :span="4" >
            <el-form-item :label="'物料编码:'">
              <el-input v-model="pageData.partNo" readonly="readonly" style="width: 120px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" >
            <el-form-item :label="'物料描述:'">
              <el-input v-model="pageData.partDesc" readonly="readonly" style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-form-item :label="'原物料编码:'">
              <el-input v-model="pageData.oriPartNo" readonly="readonly" style="width: 120px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" >
            <el-form-item :label="'原物料描述:'">
              <el-input v-model="pageData.oriPartDesc" readonly="readonly" style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <el-form-item :label="'扫描卷号:'">
              <el-input v-model="pageData.rollNo" ref="rollNo" style="width: 120px"
                        @keyup.enter.native="scanTransformOrderRollNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item class="customer-button">
                <el-button type="primary" @click="transformRollPartBun" style="margin-left: 10px; margin-bottom: 5px;">
                  转换</el-button>
              </el-form-item>
            </el-col>
        </el-row>
        <!-- 主材料 -->
        <el-form>
          <fieldset class="customer-fieldset" style="width: 775px;">
            <legend>扫描卷列表</legend>
            <el-table height="220"
              :data="transformPartList"
              border
              v-loading="dataListLoading"
              style="width: 100%; margin-top: -5px;">
              <el-table-column
                v-for="(item,index) in transformPartColumns" :key="index"
                :sortable="item.columnSortable"
                :prop="item.columnProp"
                :header-align="item.headerAlign"
                :show-overflow-tooltip="item.showOverflowTooltip"
                :align="item.align"
                :fixed="item.fixed"
                :width="item.columnWidth"
                :label="item.columnLabel">
                <template slot-scope="scope">
                  <el-input type="number" class="table-input" align="right" v-if="item.columnHidden"
                            v-model="scope.row[item.columnProp]"></el-input>
                  <span v-else>{{scope.row[item.columnProp]}}</span>
                  <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                     style="width: 100px; height: 80px"/></span>

                </template>
              </el-table-column>
            </el-table>
          </fieldset>
        </el-form>
      </el-form>


    </el-dialog>
  </div>
</template>

<script>
import {
  getTransformOrderBomData,
  getTransformRollTable,
  scanTransformPartRollNo,
  transformRollPart,
} from '@/api/yieldReport/com_transform_part.js';
export default {
  data() {
    return {
      titleCon: '物料转换',
      pageData: {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        orderNo: '',
        itemNo: 0,
        rollNo: '',
        oriPartNo: '',
        oriPartDesc: '',
        partNo: '',
        partDesc: '',
        transType: 'sw-part',
        status: 'N',
        reportTime: '',
      },
      bomData: {},
      transformPartList: [],
      transformPartColumns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5305,
          serialNumber: '5305TransRollSortNo',
          tableId: "5305TransRoll",
          tableName: "转换卷号",
          columnProp: "sortNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "序号",
          columnWidth: 60,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5305,
          serialNumber: '5305TransRollRollNo',
          tableId: "5305TransRoll",
          tableName: "转换卷号",
          columnProp: "rollNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "卷号",
          columnWidth: 120,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5305,
          serialNumber: '5305TransRollRollQty',
          tableId: "5305TransRoll",
          tableName: "转换卷号",
          columnProp: "rollQty",
          headerAlign: "center",
          align: "center",
          columnLabel: "数量",
          columnWidth: 60,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5305,
          serialNumber: '5305TransRollPartNo',
          tableId: "5305TransRoll",
          tableName: "转换卷号",
          columnProp: "partNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "物料编码",
          columnWidth: 100,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5305,
          serialNumber: '5305TransRollPartDesc',
          tableId: "5305TransRoll",
          tableName: "转换卷号",
          columnProp: "partDesc",
          headerAlign: "center",
          align: "center",
          columnLabel: "物料描述",
          columnWidth: '',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
      dataListLoading: false,
    }
  },
  methods: {
    /*初始化页面参数*/
    init(transformOrder) {
      //设置参数
      this.pageData.orderNo = transformOrder.orderNo;
      this.pageData.itemNo = transformOrder.orderItemNo;
      this.pageData.rollNo = '';
      this.pageData.partNo = transformOrder.partNo;
      this.pageData.partDesc = transformOrder.partDescription;
      this.pageData.oriPartNo = '';
      this.pageData.oriPartDesc = '';
      //获取焦点
      this.$nextTick(() => {
        this.$refs.rollNo.focus();
      })
      //获取BOM的信息
      this.refreshTransformOrderBomData();
      //刷新当前派工单的信息
      this.refreshPageTableData();
    },

    /*关闭modal*/
    closeDialog(){
      this.$emit('update:visible', false);
    },

    /*刷新当前的页面参数*/
    refreshPageTableData(){
      //刷新材料的数据
      this.refreshTransformRollTable();
    },

    //刷新当前卷的时间数据
    refreshTransformRollTable(){
      //清空卷号
      this.pageData.rollNo = '';
      getTransformRollTable(this.pageData).then(({data}) => {
        this.transformPartList = data.rows;
      });
    },

    //刷新当前卷的时间数据
    refreshTransformOrderBomData(){
      //查询当前的页面表格
      getTransformOrderBomData(this.pageData).then(({data}) => {
        this.bomData = data.row;
        //参数赋值
        this.pageData.oriPartNo = data.row.partNo;
        this.pageData.oriPartDesc = data.row.partDesc;
      });
    },

    //扫描卷号
    scanTransformOrderRollNo(){
      scanTransformPartRollNo(this.pageData).then(({data}) => {
        //判断操作是否成功
        if(data.code == 500){
          this.$message.error(data.msg);
        }else{
          //二次扫描使用
          this.pageData.rollNo = '';
          //刷新页面的数据
          this.refreshTransformRollTable();
        }
      });
    },

    /*执行转换卷操作*/
    transformRollPartBun(){
      //判断是否存在卷
      if(this.transformPartList.length == 0){
        this.$message.error('请先扫描卷后再试!');
        return false;
      }
      //验证通过执行转换卷
      transformRollPart(this.pageData).then(({data}) => {
        //判断操作是否成功
        if(data.code == 500){
          this.$message.error(data.msg);
        }else{
          //二次扫描使用
          this.pageData.rollNo = '';
          //刷新页面的数据
          this.refreshTransformRollTable();
        }
      });
    },



  },
  created() {
    //
  }
}

</script>

<style scoped lang="scss">
/*调节页面button和input的上下间距*/
.customer-css .customer-button{
  margin-top: 25px;
}

/*调节样式*/
.customer-item{
  margin-top: -10px;
}
/*fieldset下table的样式*/
.customer-fieldset /deep/ .el-table__header th.is-leaf{
  line-height: 16px;
}

/deep/ .customer-tab .el-tabs__content{
  padding: 0px !important;
}

/*table中input 修改样式*/
/deep/ div.table-input {
  padding: 0px 0px;
  height: 25px !important;
}
/*table中input*/
div.table-input /deep/ input.el-input__inner{
  padding: 0px 0px;
  height: 23px !important;
  text-align: right;
}


</style>