xujiecloud-vue/src/views/modules/partspare/purchaseOrder.vue

<script>
import {getAllBuList} from "../../../api/factory/site";
import {cancelPurchaseOrder, closePurchaseOrder, queryPurchaseOrder} from "../../../api/partspare/purchaseOrder";

export default {
  name: "purchaseOrder",
  data(){
    return{
      span:3,
      queryParams: {
        site: this.$store.state.user.site,
        buNo: '',
        partNo: '',
        partDescription: '',
        status: '',
        startDate:null,
        endDate:null,
        no:1,
        size:50,
      },
      buList: [],
      dataList: [],
      queryLoading: false,
      total:0,
      columns:[
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1BuDesc',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'buDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },{
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1PurchaseOrderNo',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'purchaseOrderNo',
          headerAlign: 'center',
          align: 'LEFT',
          columnLabel: '采购订单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1PartNo',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '备品备件编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1PartDescription',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'partDescription',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '备品备件名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1Qty',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'qty',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '采购数量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1QuantityOfArrival',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'quantityOfArrival',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '到货数量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1UmId',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'umId',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '单位',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1Status',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'status',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1CreateTime',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'createTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '下单时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1CreateBy',
          tableId: '200101107Table1',
          tableName: '备品备件采购表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '下单人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],
    }
  },
  methods:{
    getBuList() {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getAllBuList(tempData).then(({data}) => {
        if (data && data.code === 0) {
          this.buList = data.rows
        }
      })
    },
    handleQuery(){
      this.queryLoading = true
      queryPurchaseOrder(this.queryParams).then(({data})=>{
        if (data && data.code === 0) {
          this.dataList = data.rows
          this.total = data.total
        }else {
          this.$message.warning(data.msg)
        }
        this.queryLoading = false
      }).catch((error)=>{
        this.$message.error(error)
        this.queryLoading = false
      })
    },
    handleQueryBySize(val){
      this.queryParams.size = val;
      this.handleQuery();
    },
    handleQueryByPage(val){
      this.queryParams.no = val;
      this.handleQuery();
    },
    handleCancel(row){
      this.$confirm('确定取消该采购订单吗？',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        cancelPurchaseOrder(row).then(({data})=>{
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQuery()
          }else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      })
    },
    handleClose(row){
      this.$confirm('确定关闭该采购订单吗？',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        closePurchaseOrder(row).then(({data})=>{
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQuery()
          }else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      })
    }
  },
  watch:{
    queryLoading(newVal,oldVal){
      if (newVal === true){
        setTimeout(()=>{
          this.queryLoading=false
        },3000)
      }
    }
  },
  created() {
    this.getBuList();
    this.handleQuery();
    console.log(this.$route.meta.menuId)
  }
}
</script>

<template>
<div class="box-container">
  <el-form label-position="top" :model="queryParams" style="max-width: 1200px">
    <el-row :gutter="10">
      <el-col :span="span">
        <el-form-item label="BU">
          <el-select v-model="queryParams.buNo" placeholder="请选择"  style="width: 100%">
            <el-option label="全部" value=""> </el-option>
            <el-option
              v-for = "i in buList"
              :key = "i.buNo"
              :label = "i.buDesc"
              :value = "i.buNo">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item label="备品备件编码">
          <el-input v-model="queryParams.partNo" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item label="备品备件名称">
          <el-input v-model="queryParams.partDescription" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="span*2">
        <el-form-item label="下单日期">
          <el-date-picker
            style="width: 47.5%"
            v-model="queryParams.startDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
          <span style="text-align: center">-</span>
          <el-date-picker
            style="width: 47.5%"
            v-model="queryParams.endDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择"  style="width: 100%">
            <el-option label="全部" value=""> </el-option>
            <el-option label="已取消" value="已取消"> </el-option>
            <el-option label="已关闭" value="已关闭"> </el-option>
            <el-option label="进行中" value="进行中"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item label=" ">
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div style="height: calc(100% - 120px)">
    <el-table :data="dataList" border
              height="100%" ref="table"
              v-loading="queryLoading">
      <el-table-column
        v-for="(item,index) in columns" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed===''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">{{ 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-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <a v-if="scope.row.status === '进行中' && scope.row.quantityOfArrival === 0" @click="handleCancel(scope.row)">取消</a>
          <a v-if="scope.row.status === '进行中'" @click="handleClose(scope.row)">关闭</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    style="margin-top: 5px"
    @size-change="handleQueryBySize"
    @current-change="handleQueryByPage"
    :current-page="queryParams.page"
    :page-sizes="[50, 100, 500, 1000]"
    :page-size="queryParams.limit"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
</div>
</template>

<style scoped>

</style>