jf-frock/src/views/Approval/list.vue

<template>
  <div>
    <FullPage title='审批列表'
              :list='list'
              @init='init'
              :loading='loading'
              @searchData='init'
              @changePage='changePage'
              @changeSize='changeSize'
              @selectTable='selectTable'
              :tableColums='tableColums'
              :tableData='tableData'
              :pageIndex='pageIndex'
              :total='total'>
      <div slot='titleButton'>
        <Button type="error"
                @click="approved(0)"
                style="margin-right:10px;"
                ghost>批量驳回审批</Button>
        <Button type="success"
                @click="approved(1)"
                style="margin-right:10px;"
                ghost>批量通过审批</Button>
      </div>
      <template slot='set'
                slot-scope='{row}'>
        <div>
          <a v-if='persimissionData["订单详情"]||persimissionData.all'
             @click="goPage(row)"
             style="margin:0 5px">详情</a>
          <!-- <a v-if='persimissionData["审批详情"]||persimissionData.all'
             @click="goDetails(row)"
             style="margin:0 5px">审批详情</a> -->
          <a @click="singleApproved(2,row)"
             style="margin:0 5px;color:red"
             v-if="row.state == 0">驳回</a>
          <a @click="singleApproved(1,row)"
             style="margin:0 5px;color:green"
             v-if="row.state == 0 ">通过</a>
        </div>
      </template>
    </FullPage>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      list: [
        { title: '订单号', name: 'Input', value: '', serverName: 'oa_order_no', placeholder: '请输入订单号' },
        { title: '项目名称', name: 'Input', serverName: 'residential_name', value: '', placeholder: '请输入项目名称' },
        { title: '提交人', name: 'Input', serverName: 'nickname', value: '', placeholder: '请选择提交人' },
        {
          title: '审批状态', name: 'Select', placeholder: '请选择', value: 0, serverName: 'state',
          option: [
            { label: '审核中', value: 0 },
            { label: '通过', value: 1 },
            { label: '驳回', value: 2 },
            // { label: '取消', value: 3 },
          ]
        },
        {
          title: '审批类型', name: 'Select', serverName: 'type', placeholder: '请选择', value: '',
          option: [
            { label: '请购', value: 1 },
            { label: '采购', value: 2 },
            { label: '到货', value: 3 },
            { label: '质检', value: 4 }
          ]
        },
      
        { title: '提交时间', start_server: 'start_time', end_server: 'end_time', name: 'Input', start_value: '', end_value: '', isDate: true, start_placeholder: '开始日期', end_placeholder: '结束日期', },
      ],
      tableColums: [
        { type: 'selection', align: 'center', fixed: 'left', minWidth: 100, },
        { title: '订单号', align: 'center', key: 'oa_order_no', width: '180' },
        { title: '项目名称', align: 'center', key: 'residential_name', minWidth: 100 },
        // { title: '订单流水号', align: 'center', key: 'oa_order_no', minWidth: 200 },
        // {title:'订单类型',align:'center',key:'show_order_type',minWidth:100,
        //     render:(h,params)=>h('span',{},params.row.order_type == 1 ? '工装' : '家装')
        // },
        // { title: '客户', align: 'center', key: 'client_name', minWidth: 100 },
        // { title: '手机号', align: 'center', key: 'mobile', minWidth: 150 },
        {
          title: '审批类型', align: 'center', minWidth: 100,
          render (h, params) {
            return h('span', {}, params.row.type == 1 ? '请购' : params.row.type == 2 ? '采购': params.row.type == 3 ? '到货': '质检')
          }
        },
        { title: '提交人', align: 'center', key: 'nickname', minWidth: 100 },
        {
          title: '审批状态', align: 'center', key: 'show_state', minWidth: 100,
          render (h, params) {
            return h('span', {
              props: {},
              style: {
                color: params.row.state == 0 ? '#FFA141' : (params.row.state == 1 ? '#32C800' : '#FF5E5C')
              }
            }, params.row.state == 0 ? '审核中' : (params.row.state == 1 ? '通过' : (params.row.state == 2 ? '驳回' : '取消')))
          }
        },
        {
          title: '提交日期', align: 'center', key: 'show_crt_time', minWidth: 200,
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.crt_time * 1))
        },
        // { title: '创建人员', align: 'center', key: 'nickname', minWidth: 100 },
        // {
        //   title: '审批开始时间', align: 'center', key: 'show_crt_time', minWidth: 200,
        //   render: (h, params) => h('span', {}, this.func.replaceDate(params.row.crt_time * 1))
        // },
        // {
        //   title: '审批结束时间', align: 'center', key: 'show_upd_time', minWidth: 200,
        //   render: (h, params) => h('span', {}, params.row.upd_time ? this.func.replaceDate(params.row.upd_time * 1) : '')
        // },
        // { title: '备注', align: 'center', key: 'remark', minWidth: 200 },
        { title: '操作', align: 'center', slot: 'set', fixed: 'right', width: '220' },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      loading: false,
      proxyObj: {},
      selectIds: [],
      currency_type: null,
    }
  },
  created () {
    this.currency_type = this.$route.query.id;
  },
  computed: {
    ...mapState(['persimissionData'])
  },
  watch: {
    $route (to) {
      this.id = to.query.id;
      this.proxyObj.id = this.id
      this.getData(this.proxyObj)
      this.currency_type = to.query.id
    }
  },
  methods: {
    init (row) {
      this.pageIndex = 1
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize
      this.proxyObj = row;
      this.getData(row)
    },
    getData (row) {
      this.loading = true;
      this.axios('/api/order_oa_list', { params: row }).then(res => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.total;
        console.log(res);
      })
    },
    changePage (e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj);
    },
    goPage (row) {
      row.type == 1 ? this.$router.push({
        // /cms/ordermannage/businessorderlist/details
        // path:'/cms/ordermannage/businessorderlist/decorationlist',
        path: '/cms/BidSystem/ContractList/requisitionDetail',
        query: {
          oa_order_no: row.oa_order_no,
          order_no: row.order_no,
          type: row.type,
          state: row.state,
        }
      }) :row.type == 2 ? this.$router.push({
        path: '/cms/BidSystem/ContractList/purchaseDetail',
        query: {
          oa_order_no: row.oa_order_no,
          order_no: row.order_no,
          type: row.type,
          state: row.state,
        }
      }) : row.type == 3 ? this.$router.push({
        path: '/cms/BidSystem/ContractList/arrivalDetail',
        query: {
           oa_order_no: row.oa_order_no,
          order_no: row.order_no,
          type: row.type,
          state: row.state,
        }
         }) :  this.$router.push({
        path: '/cms/BidSystem/ContractList/qualitytestingDetail',
        query: {
          oa_order_no: row.oa_order_no,
          order_no: row.order_no,
          type: row.type,
          state: row.state,
        }
        })
    },
    goDetails (row) {
      this.$router.push({
        path: '/cms/approval/examine',
        query: {
          oa_order_no: row.oa_order_no
        }
      })
    },
    changeSize (e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.page_size;
      this.getData(this.proxyObj)
    },
    approved (n) {
      if (this.selectIds.length < 1) {
        return this.$Message.warning('请至少选择一项')
      }
      this.confirmDelete({
        content: n == 1 ? '是否通过此订单审核？' : '是否驳回此订单审核',
        title: n == 1 ? '审批通过' : '驳回审批',
        type: n == 1 ? 'primary' : 'error',
        then: () => {
          
          this.select_post(n, this.selectIds)
        },
        cancel: () => { }
      })
    },
    singleApproved (n, row) {
      console.log(row)
      this.selectIds = [row.oa_order_no]
      this.approved(n)
    },
    selectTable (e) {
      this.selectIds = e.reduce((pre, cur) => pre.concat([cur.oa_order_no]), [])
      console.log('selectIds :>> ', this.selectIds);
    },
    select_post (state, arr) {//state(1:通过|2:驳回)
      let params = { oa_order_no: arr.join(','), state: state }
      state == 2 ? params.remark = this.remark : '';
      this.axios.post('/api/order_oa_check', params).then(res => {
        if (res.code == 200) {
          this.$Message.success(res.msg || '无提示')
          this.getData(this.proxyObj)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-attr {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>