bonus-ui/src/views/material/purchase/goodsEntry/detail.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="类型规格："  prop="typeId" >
        <el-select v-model="queryParams.typeId" placeholder="请选择类型规格" clearable>
          <el-option
            v-for="dict in materialModelList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="机具厂家："  prop="supplierId">
        <el-select v-model="queryParams.supplierId" placeholder="请选择机具厂家" clearable>
          <el-option
            v-for="dict in supplierList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出厂日期："  prop="productionTime"> 
          <el-date-picker 
              v-model="queryParams.productionTime"
              placeholder="请选择出厂日期" 
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime">
          </el-date-picker>
      </el-form-item>

      
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
              <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-back"
                  @click="jumpList"
                  >新购到货验收</el-button
              >
          </el-col>

          <el-col :span="1.5">
              <el-button
                  type="success" 
                  icon="el-icon-check" v-show="!isView"
                  size="mini" :disabled="multiple"
              >合格</el-button>
          </el-col>

          <el-col :span="1.5">
              <el-button
                  type="danger" 
                  icon="el-icon-close" v-show="!isView"
                  size="mini" :disabled="multiple"
              >不合格</el-button>
          </el-col>
      </el-row>

    <el-table v-loading="loading" :data="tableList" ref="multipleTable" row-key="teamId" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true" v-if="!isView"/>
      <el-table-column label="序号" align="center" width="80" type="index">
      
      </el-table-column>
      <el-table-column label="物资名称" align="center" prop="maTypeName" />
      <el-table-column label="规格型号" align="center" prop="typeName" />
      <el-table-column label="单位" align="center" prop="unitName"/>
      <el-table-column label="采购数量" align="center" prop="purchaseNum" />
      <el-table-column label="购置单价(元含税)" align="center" prop="purchaseTaxPrice" />
      <el-table-column label="购置单价（元不含税）" align="center" prop="purchasePrice" />
      <el-table-column label="供应商" align="center" prop="supplierName" />
      <el-table-column label="出厂日期" align="center" prop="productionTime" />
      <el-table-column label="相关配套资料" align="center" prop="" />
      <el-table-column label="验收结论" align="center" prop="checkResult" />
      <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
              <el-button size="mini" type="success">
                  合格
              </el-button>
              <el-button size="mini" type="danger">
                  不合格
              </el-button>
                  
          </template>
      </el-table-column>
    </el-table>

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->

  </div>
</template> 

<script>
import { getDeviceType} from "@/api/ma/device";
import { getManufacturerSelect} from "@/api/ma/supplier";
import { getPurchaseDetailsList } from "@/api/purchase/goodsAccept";
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
export default {
  name: "GoodsAcceptDetail",
  data() {
    return {
      Id:'',
      taskId:'',
      // 遮罩层
      loading: false,     
      isView: false,     
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true, 
      // 显示搜索条件
      showSearch: true,
      showHouse: false, 
      materialModelList:[],//规格型号下拉
      supplierList:[],//厂家下拉
      ids:[],
      // 总条数
      total: 0, 
      //表格数据
      tableList: [], 
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      rowData:{},
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        typeId:undefined,
        supplierId:undefined,
        productionTime:undefined,
      },
    };
  },
  mounted() {
     
      const taskId = this.$route.query && this.$route.query.taskId
      const Id = this.$route.query && this.$route.query.Id
      const isView = this.$route.query && this.$route.query.isView
      this.taskId = taskId;
      this.Id = Id;
      if(isView=='true'){
          this.isView=true;
      }else{
          this.isView=false;
      }
      this.getDeviceType()
      this.getSupplierList()
      console.log(this.isView)
      this.getList()
  },
  methods: {
      // 返回列表页
      jumpList() {
          const obj = { path: '/purchase/goodsEntry' }
          this.$tab.closeOpenPage(obj)
      },
      getDeviceType(){ 
          getDeviceType({level:4}).then(response => {
          let matModelRes = response.data;
          this.materialModelList = matModelRes.map((item) => {
                  return {
                  label: item.typeName,
                  value: item.typeId,
                  };
              });
          });
      },
      getSupplierList(){ 
          getManufacturerSelect().then(response => {
          let arrRes = response.rows;
          this.supplierList = arrRes.map((item) => {
                  return {
                      label: item.supplier,
                      value: item.supplierId,
                  };
              });
          });
      },
      /** 查询列表 */
      getList() {
          this.loading = true;
          this.queryParams.id=this.Id
          this.queryParams.taskId=this.taskId
          getPurchaseDetailsList(this.queryParams).then(response => {
              this.tableList = response.data.purchaseCheckDetailsList;
              // this.total = response.total;
              this.loading = false;
          });
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryForm");
          this.queryParams.keyWord=null;
          this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
      }, 
      // 多选框选中数据
      handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length != 1
          this.multiple = !selection.length
      },

  }
};
</script>
<style lang="scss" scoped>
.uploadImg {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deviceCode {
    margin-top: 10px;
    padding-bottom: 20px;
    font-size: 18px;
}
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
    .el-upload--picture-card {
        display: none;
    }
}
</style>