BST_bigScreen/src/views/PurchasingManage/Approval.vue

<template>
  <div>
    <FullPage title="采购审批列表"
              :list='set_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(2)"
                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 @click="singleApproved(1,row)"
             style="margin:0 5px;color:green"
             v-if="row.state == 0 ">通过</a>
          <a @click="singleApproved(2,row)"
             style="margin:0 5px;color:red"
             v-if="row.state == 1">驳回</a>
        </div>
      </template>
    </FullPage>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      tableColums: [
        { type: 'selection', align: 'center', fixed: 'left', minWidth: 100, },
        { title: '订单编号', align: 'center', key: 'order_no', width: '180' },
        { title: '项目名称', align: 'center', key: 'name', minWidth: 200 },
        // { title: '订单流水号', align: 'center', key: 'oa_order_no', minWidth: 200 },
        { title: '客户', align: 'center', key: 'client_name', minWidth: 100 },
        { title: '手机号', align: 'center', key: 'mobile', minWidth: 150 },
        {
          title: '审批类型', align: 'center', key: 'type', minWidth: 100,
          render (h, params) {
            return h('span', {
              props: {},
              style: {}
            }, 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: 'crt_time', minWidth: 200,
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.crt_time * 1))
        },
        { title: '操作', align: 'center', slot: 'set', fixed: 'right', width: '220' },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      loading: false,
      proxyObj: {},
      selectIds: [],
      currency_type: null,
      type: null,
      currencyTag: 'name1',
      userList: [],
      purchaseTypeList: [],
    }
  },
  created () {
    //74工装单→深化 审批 78 测量单 80 深化单 82 生产拆单
    let id = this.$route.query.id
    this.type = id == 78 ? 3 : id == 74 ? 1 : id == 80 ? 2 : ''
    this.currency_type = this.$route.query.id
    this.axios.get('/api/user').then(res => { this.userList = res.data.data }).catch(err => { console.error(err); })
    this.axios({ method: 'get', url: '/api/basic_purchase_list', }).then((res) => { this.purchaseTypeList = res.data.data }).catch((err) => { });
  },
  computed: {
    ...mapState(['persimissionData']),
    set_list () {
      return [
        { title: '订单号', name: 'Input', value: '', serverName: 'order_no', placeholder: '请输入订单号' },
        { title: '项目名称', name: 'Input', value: '', serverName: 'residential_name', placeholder: '请输入项目名称' },
        {
          title: '审批状态', name: 'Select', placeholder: '请选择', value: '', serverName: 'state',
          option: [
            { label: '待审批', value: 0 },
            { label: '同意', value: 1 },
            { label: '驳回', value: 2 },
            // { label: '取消', value: 3 },
          ]
        },
        {
          title: '审批类型', name: 'Select', placeholder: '请选择审批类型', value: '', serverName: 'type_id',
          option: [
            { label: '请购', value: 1 },
            { label: '采购', value: 2 },
            { label: '到货', value: 3 },
            { label: '质检', value: 4 },
          ]
        },
        {
          title: '提交人', name: 'Select', placeholder: '请选择提交人', value: '', serverName: 'nickname', optionName: 'nickname', optionValue: 'id',
          option: this.userList
        },
        { title: '提交时间', start_server: 'start_time', end_server: 'end_time', name: 'Input', start_value: '', end_value: '', isDate: true, start_placeholder: '开始日期', end_placeholder: '结束日期', },
      ]
    }
  },
  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/purchase_oa_list').then(res => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    changePage (e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj);
    },
    goPage (row) {
      this.$router.push({
        path: '/cms/PurchasingManage/approvalDetail',
        query: {
          oa_order_no: row.oa_order_no,
          order_no: row.order_no,
          type: 'oa',
          currency_type: this.currency_type,
        }
      })
    },
    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) {
      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(','), status: state, type: this.type }
      state == 2 ? params.remark = this.remark : '';
      this.axios.post('/api/purchase_oa_pull', 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>