ncs_project/manager-admin/src/views/pjOrder/List.vue

<template>
  <en-table-layout
    :tableData="tableData.data"
    :loading="loading"
  >
    <div slot="toolbar" class="inner-toolbar">
      <div class="toolbar-btns">
        <el-select v-model="orderType" placeholder="请选择状态" style="width: 350px" multiple size="medium" clearable @change="filterStatus">
          <el-option label="默认" value="0"/>
          <el-option label="技术跟进" value="1"/>
          <el-option label="生产跟进" value="2"/>
          <el-option label="收到款" value="3"/>
          <el-option label="已发货" value="4"/>
          <el-option label="已完成" value="5"/>
          <el-option label="作废" value="6"/>
        </el-select>
<!--        <el-button-group>-->
<!--          <el-button type="primary" @click="filterStatus(-1)">全部</el-button>-->
<!--          <el-button @click="filterStatus(0)">默认</el-button>-->
<!--          <el-button @click="filterStatus(1)" type="warning">技术跟进</el-button>-->
<!--          <el-button @click="filterStatus(2)" type="warning">生产跟进</el-button>-->
<!--          <el-button @click="filterStatus(3)" type="warning">收到款</el-button>-->
<!--          <el-button @click="filterStatus(4)">已发货</el-button>-->
<!--          <el-button @click="filterStatus(5)" type="success">已完成</el-button>-->
<!--          <el-button @click="filterStatus(6)" type="danger">作废</el-button>-->
<!--        </el-button-group>-->
      </div>
      <div class="toolbar-search">
        <en-table-search
          @search="searchEvent"
        >
        </en-table-search>
      </div>
    </div>

    <template slot="table-columns">
      <el-table-column label="项目号" width="150">
        <template slot-scope="scope">
          <el-tag>{{scope.row.order_no}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="130" prop="status" sortable>
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status === 0">默认</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 1">技术跟进</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 2">生产跟进</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 3">收到款</el-tag>
          <el-tag v-if="scope.row.status === 4">已发货</el-tag>
          <el-tag type="success" v-if="scope.row.status === 5">已完成</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 6">作废</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" :formatter="MixinUnixToDate" prop="create_time" sortable width="160"></el-table-column>
      <el-table-column label="项目名称" prop="name" show-overflow-tooltip min-width="140" sortable></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="销售" prop="sales" sortable></el-table-column>
      <el-table-column label="规模" prop="scale"></el-table-column>
      <el-table-column label="要求发货日期" :formatter="MixinUnixToDay" prop="ship_date_required" sortable width="160"></el-table-column>
      <el-table-column v-if="boolFounder || permissions.filter(p => p === 'draftEdit' || p === 'pjReceipt').length > 0" label="金额" width="150" sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.amount > 1000000" type="danger">{{ scope.row.amount | unitPrice('￥') }}</el-tag>
          <el-tag v-else-if="scope.row.amount > 500000" type="warning">{{ scope.row.amount | unitPrice('￥') }}</el-tag>
          <el-tag v-else class="success">{{ scope.row.amount | unitPrice('￥') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="授权过期" :formatter="MixinUnixToDay" prop="auth_expires" sortable></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="gotoDetail(scope.row.id)">明细</el-button>
        </template>
      </el-table-column>
    </template>

    <el-pagination
      v-if="tableData"
      slot="pagination"
      @size-change="handlePageSizeChange"
      @current-change="handlePageCurrentChange"
      :current-page="tableData.page_no"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="tableData.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.data_total">
    </el-pagination>
  </en-table-layout>
</template>

<script>
import * as API_order from '@/api/pjOrder.js'
import { Foundation } from '~/ui-utils'
import Storage from '../../utils/storage'

export default {
  name: 'pjOrderList',
  data() {
    return {
      boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
      permissions: [],
      /** 列表loading状态 */
      loading: false,

      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 20,
        sort: 'create_time',
        dir: 'desc'
      },

      /** 商品列表数据 */
      tableData: '',

      /** 高级搜索数据 */
      advancedForm: {
      },
      orderType: []
    }
  },
  mounted() {
    if (!this.boolFounder) {
      this.permissions = JSON.parse(Storage.getItem('permissions'))
    }
    this.GET_List()
  },
  activated() {
    this.GET_List()
  },
  methods: {

    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.GET_List()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.GET_List()
    },

    /** 搜索事件触发 */
    searchEvent(data) {
      this.params = {
        ...this.params,
        query: data
      }
      this.params.page_no = 1
      Object.keys(this.advancedForm).forEach(key => delete this.params[key])
      this.GET_List()
    },

    /** 高级搜索事件触发 */
    advancedSearchEvent() {
      this.params = {
        ...this.params,
        page_no: 1,
        ...this.advancedForm
      }
      delete this.params.keyword
      this.params.page_no = 1
      this.GET_List()
    },

    GET_List() {
      this.loading = true
      API_order.getList(this.params).then(response => {
        this.loading = false
        this.tableData = response
      }).catch(() => (this.loading = false))
    },
    gotoDetail(id) {
      console.log(id)
      this.$router.push({ name: 'pjOrderEdit', params: { id: id, callback: this.GET_List }})
    },
    filterStatus(e) {
      if (e && e.length > 0) {
        let list = e.join(',')
        this.params.fixedCondition = " FIND_IN_SET(`status`, '" + list + "')"
      } else {
        delete this.params.fixedCondition
      }
      // if (status === -1) {
      //   delete this.params.fixedCondition
      // } else {
      //   this.params.fixedCondition = 'status=' + status
      // }
      this.GET_List()
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .el-table td:not(.is-left) {
  text-align: center;
}

.inner-toolbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.toolbar-search {
  margin-right: 10px;
}

.goods-info {
  display: flex;
  align-items: center;
  .goods-image {
    img {
      width: 80px;
      height: 80px;
    }
  }
  .goods-name-box {
    text-align: left;
    .goods-name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      a:hover {
        color: #f42424 !important;
      }
    }
  }
}
</style>