myERP/src/views/purchase/waitapproval.vue

<template>
  <div class="pageBox">
    <div class="searchBox">
      <div class="row">
        <span class="span">ID：</span>
        <div class="right"><el-input v-model="filter.id" class="wid100" clearable></el-input></div>
      </div>
      <div class="row">
        <span class="span">提交时间：</span>
        <div class="right">
          <el-date-picker
            v-model="submitTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%;box-sizing: border-box;">
          </el-date-picker>
        </div>
      </div>
      <div class="row">
        <span class="span">审批类型：</span>
        <div class="right">
          <el-select v-model="filter.type" placeholder="请选择" clearable class="wid100">
            <el-option label="采购订单审批" :value="1" />
            <el-option label="预付款打款审批" :value="2" />
            <el-option label="尾款打款审批" :value="3" />
          </el-select>
        </div>
      </div>
      <div class="row row1">
        <el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon>&nbsp;筛选</el-button>
      </div>
    </div>

    <el-card shadow="never">
      <div class="opaBox">
        <el-button type="primary" @click="showAdd = true"><el-icon><Plus /></el-icon>&nbsp;新增</el-button>
      </div>
      <el-table :data="goodsList" style="width: 100%" border v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="type" label="采购类型" align="center">
          <template #default="scope">
            <span>{{ approvalType[scope.row.order.approval_type] }}</span>
            
            <div v-if="scope.row.order.approval_type == 1">{{ approvalStatus[scope.row.order.order_approval_status] }}</div>
            <div v-else-if="scope.row.order.approval_type == 2">{{ approvalStatus[scope.row.order.prepayment_approval_status] }}</div>
            <div v-else-if="scope.row.order.approval_type == 3">{{ approvalStatus[scope.row.order.final_payment_approval_status] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="总预计订单金额/总预防款/总尾款" align="center">
          <template #default="scope">
            <div>{{ scope.row.order.total_amount }}</div>
            <div>{{ scope.row.order.prepayment_amount }}</div>
            <div>{{ scope.row.order.final_payment_amount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="总实际订单金额/总实际已支付金额/总实际未支付金额" align="center">
          <template #default="scope">
            <div v-if="scope.row.order">
              <div>{{ scope.row.order.has_paid_amount }}</div>
              <div>{{ scope.row.order.has_paid_prepayment_amount }}</div>
              <div>{{ scope.row.order.has_paid_final_payment_amount }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="提交人/提交时间" align="center">
          <template #default="scope">
            <div>{{ scope.row.admin_user && scope.row.admin_user.username || '-' }}</div>
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button type="primary" text @click="toApproval(scope.row.id)"><el-icon><Stamp /></el-icon>审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-pagination">
        <el-pagination
          :current-page="page"
          background
          layout="prev, pager, next, sizes, total"
          :total="total"
          :page-sizes="[10, 50, 100]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
      </div>
    </el-card>

    <el-dialog v-model="showDialog" width="500px" title="审批">
      <el-form label-position="right" label-width="100px">
        <el-form-item label="审批状态：">
          <el-radio-group v-model="spInfo.status">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="spInfo.comment" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="commitApproval()">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <order-approval :show="showOrderApproval" :id="curId" @refresh="handleSearch" @close="showOrderApproval = false"></order-approval>

  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref, nextTick } from "vue"
import { get, post } from "@/api/request"
import { Search, Plus, Edit, ZoomIn, Delete, Stamp } from '@element-plus/icons'
import { ElMessage, ElMessageBox } from 'element-plus'
import orderApproval from '@/components/approval/order.vue'

export default {
  components: {
    Search, Plus, Edit, ZoomIn, Delete, orderApproval, Stamp
  },
  setup() {
    const data = reactive({
      add_type: 1,
      showDialog: false,
      showOrderApproval: false,
      filter: {},
      submitTime: [],
      goodsList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      picVisible: false,
      dialogImageUrl: '',
      approvalType: {
        '1': '采购订单审批',
        '2': '预付款打款审批',
        '3': '尾款打款审批',
        '4': '已结束'
      },
      approvalStatus: {
        '0': '草稿',
        '1': '进行中',
        '2': '已完成',
        '3': '已取消'
      },
      warehouseList: [],
      suppliersList: [],
      allGoodsList: [],
      curId: 0,
      spInfo: {}
    })

    function handleSearch() {
      data.page = 1
      fetchData()
    }

    const fetchData = () => {
      data.loading = true
      let params = {
        page: data.page,
        pageSize: data.pageSize,
        ...data.filter,
        wait_type: 1,
        start_time: data.submitTime ? data.submitTime[0] : '',
        end_time: data.submitTime ? data.submitTime[1] : ''
      }
      get(`/api/purchaseOrder/instanceList`, params).then((res) => {
        data.goodsList = res.data
        data.total = res.meta.total
        data.loading = false
      }).catch(() => {
        data.loading = false
      })
    }

    function handleCurrentChange(e) {
      data.page = e
      fetchData()
    }

    function handleSizeChange(e) {
      data.page = 1
      data.pageSize = e
      fetchData()
    }

    function getWarehouseList() {
      get(`/api/all/warehouses`).then((res) => {
        data.warehouseList = res.data
      })
    }

    function getSuppliersList() {
      get(`/api/suppliers`, {pageSize: 1000}).then((res) => {
        data.suppliersList = res.data
      })
    }

    function getAllGoodsList() {
      get(`/api/all/goods`).then((res) => {
        data.allGoodsList = res.data
      })
    }

    function toApproval(id) {
      data.curId = id
      data.spInfo = {
        status: 2,
        comment: ''
      }
      data.showDialog = true
    }

    function commitApproval() {
      let params = {
        instance_id: data.curId,
        status: data.spInfo.status,
        comment: data.spInfo.comment
      }
      post(`/api/purchaseOrder/processApproval`, params).then((res) => {
        ElMessage.success('审批成功')
        data.showDialog = false
        fetchData()
      })
    }

    onMounted(() => {
      fetchData()
      getWarehouseList()
      getSuppliersList()
      getAllGoodsList()
    })

    return {
      ...toRefs(data),
      handleSearch,
      handleCurrentChange,
      handleSizeChange,
      fetchData,
      getWarehouseList,
      getSuppliersList,
      getAllGoodsList,
      toApproval,
      commitApproval
    }
  }
}
</script>

<style lang="scss" scoped>
  .searchBox{
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 15px 15px 0 0;
    border-radius: 4px;
    margin-bottom: 15px;
    .row{
      display: flex;
      align-items: center;
      width: 20%;
      box-sizing: border-box;
      margin-bottom: 15px;
      .span{
        display: block;
        width: 100px;
        font-size: 14px;
        text-align: right;
        box-sizing: border-box;
      }
      .right{
        width: calc(100% - 100px);
      }
      .wid100{
        width: 100%;
      }
      &.row1{
        margin-left: 15px;
      }
    }
  }
  .opaBox{
    margin-bottom: 15px;
  }
  .imgBox{
    display: flex;
    flex-wrap: wrap;
    .el-image{
      width: 60px;
      height: 60px;
      border-radius: 4px;
      margin-right: 10px;
    }
  }
  .skuBox{
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 15px 0;
    margin-bottom: 15px;
    background-color: #f3f3f3;
    .tit{
      padding-left: 40px;
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 15px;
    }
  }
</style>