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

<template>
  <div class="container">
    <el-tabs type="border-card" v-model="params.type" @tab-click="sousuo">
      <el-tab-pane label="所有产品" name="0"></el-tab-pane>
      <el-tab-pane label="未完成产品" name="1"></el-tab-pane>
      <el-tab-pane label="未完成统计" name="2"></el-tab-pane>
      <en-table-layout
        :tableData="tableData.data"
        :loading="loading"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <div slot="toolbar" class="inner-toolbar">
          <div v-if="params.type !== '2'" class="toolbar-btns">
            <el-button type="primary" @click="outExcel">导出当前页</el-button>
            <el-button type="warning" @click="outSelect">导出所选</el-button>
          </div>
          <div class="toolbar-search">
            <div style="float: left">
              <el-input v-model="params.order_name" placeholder="输入项目搜索" size="" clearable />
            </div>
            <div style="float: left">
              <el-input v-model="params.keyword" placeholder="输入产品名搜索" size="" clearable />
            </div>
            <el-button @click="sousuo">搜索</el-button>
            <!--              <el-input v-model="params.keyword" placeholder="输入项目搜索" size="mini" clearable />-->
          </div>
        </div>

        <template slot="table-columns">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <!--            <el-table-column label="创建时间" :formatter="MixinUnixToDate" prop="create_time" sortable width="160"></el-table-column>-->
          <el-table-column v-if="params.type !== '2'" label="项目" min-width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button round size="mini" @click="gotoOrder(scope.row.order_no)">{{scope.row.order_name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" min-width="220" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="goods-info">
                <div class="goods-image" style="margin: 0 20px;">
                  <img :src="scope.row.image"/>
                </div>
                <div class="goods-name-box">
                  <div class="goods-name">{{ scope.row.name }}</div>
                  <el-tag type="warning" v-if="scope.row.type === '风尚版'">{{scope.row.type}}</el-tag>
                  <el-tag v-else>{{scope.row.type}}</el-tag>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="生产编码" prop="no" width="130">
            <template slot-scope="scope">
              <el-button round size="mini" @click="gotoGoods(scope.row.good_id)">{{ scope.row.no }}</el-button>
            </template>
          </el-table-column>
          <el-table-column v-if="params.type === '2'" label="总需数量" prop="count1"></el-table-column>
          <el-table-column v-if="params.type === '2'" label="已产数量" prop="count2"></el-table-column>
          <el-table-column v-if="params.type === '2'" label="需产数量">
            <template slot-scope="scope">
              <span>{{scope.row.count1 - scope.row.count2}}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="params.type !== '2'" label="数量" prop="qty"></el-table-column>
          <el-table-column v-if="params.type !== '2'" label="已产数量" prop="produced_qty"></el-table-column>
          <el-table-column v-if="params.type !== '2'" label="需产数量">
            <template slot-scope="scope">
              <span>{{scope.row.qty - scope.row.produced_qty}}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="params.type !== '2'" label="要求发货日期" :formatter="MixinUnixToDay" prop="ship_date_required" sortable width="160"></el-table-column>
          <el-table-column v-if="params.type !== '2'" label="生产状态" prop="produce_status"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="params.type !== '2'" size="mini" type="primary" @click="handleDetail(scope.row.id)">明细</el-button>
              <el-button v-else size="mini" type="primary" @click="handleDetail2(scope.row)">明细</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="[10, 20, 50, 100]"
          :page-size="tableData.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.data_total">
        </el-pagination>
      </en-table-layout>

    </el-tabs>
    <el-drawer :title="'《' + myTitle + '》产品明细'" :visible.sync="drawerShow" size="70%">
      <en-table-layout
        :tableData="tableData2.data"
      >
        <div slot="toolbar" class="inner-toolbar">
          <div class="toolbar-search">
            <div style="float: left">
              <el-input v-model="params2.order_name" placeholder="输入项目名搜索" size="" clearable />
            </div>
            <el-button @click="sousuo2">搜索</el-button>
          </div>
        </div>
        <template slot="table-columns">
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column label="项目" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button round size="mini" @click="gotoOrder(scope.row.order_no)">{{scope.row.order_name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="生产编码" prop="no" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button round size="mini" @click="gotoGoods(scope.row.good_id)">{{ scope.row.no }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="qty"></el-table-column>
          <el-table-column label="已产数量" prop="produced_qty"></el-table-column>
          <el-table-column label="要求发货日期" :formatter="MixinUnixToDay" prop="ship_date_required" sortable width="160"></el-table-column>
          <el-table-column label="技术" prop="tech_name"></el-table-column>
          <el-table-column label="生产" prop="produce_name"></el-table-column>
          <el-table-column label="生产状态" prop="produce_status"></el-table-column>
        </template>
        <el-pagination
          v-if="tableData2"
          slot="pagination"
          @size-change="handlePageSizeChange2"
          @current-change="handlePageCurrentChange2"
          :current-page="tableData2.page_no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData2.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData2.data_total">
        </el-pagination>
      </en-table-layout>
    </el-drawer>
  </div>
</template>

<script>
import * as API_orderItems from '@/api/pjOrderItems.js'
import { Foundation } from '~/ui-utils'
import { getPageGroupList } from '../../api/pjOrderItems'

export default {
  name: 'pjOrderItemsList',
  data() {
    return {
      /** 列表loading状态 */
      loading: false,

      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10,
        type: 0
      },

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

      multipleSelection: [],
      activeName: 0,
      drawerShow: false,
      tableData2: [],
      params2: {
        page_no: 1,
        page_size: 10,
        type: 1,
        good_id: 1
      },
      myTitle: ''
    }
  },
  mounted() {
    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()
    },
    GET_List() {
      this.loading = true
      if (this.params.type > 1) {
        API_orderItems.getPageGroupList(this.params).then(response => {
          this.loading = false
          this.tableData = response
        }).catch(() => (this.loading = false))
      } else {
        API_orderItems.getPageList(this.params).then(response => {
          this.loading = false
          this.tableData = response
        }).catch(() => (this.loading = false))
      }
    },
    /** 分页大小发生改变 */
    handlePageSizeChange2(size) {
      this.params2.page_size = size
      this.GET_List2()
    },
    /** 分页页数发生改变 */
    handlePageCurrentChange2(page) {
      this.params2.page_no = page
      this.GET_List2()
    },
    GET_List2() {
      this.loading = true
      API_orderItems.getPageList(this.params2).then(response => {
        this.loading = false
        this.tableData2 = response
      }).catch(() => (this.loading = false))
    },
    handleDetail(id) {
      this.drawerShow = false
      this.$router.push({ name: 'pjOrderItemDetail', params: { id: id, callback: this.GET_List }})
    },
    gotoOrder(orderNO) {
      this.drawerShow = false
      this.$router.push({ name: 'pjOrderEdit', params: { id: orderNO, callback: this.GET_List }})
    },
    gotoGoods(goodsCode) {
      this.drawerShow = false
      this.$router.push({ name: 'goodsDetail', params: { id: goodsCode }})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    outExcel() {
      const json = {
        sheet_name: '产品列表',
        sheet_values: this.tableData.data.map(item => ({
          '创建时间': Foundation.unixToDate(item.create_time),
          '项目号': item.order_no,
          '产品名称': item.name,
          '生产型号': item.code,
          '生产编码': item.no,
          '数量': item.qty,
          '销售备注': item.sales_remark,
          '要求发货日期': Foundation.unixToDate(item.ship_date_required),
          '技术': item.name,
          '硬件版本': item.hard_ver,
          '软件版本': item.soft_ver,
          '技术备注': item.tech_remark,
          '生产人': item.produce_name,
          '生产状态': item.produce_status,
          '已产数量': item.produced_qty
        }))
      }
      this.MixinExportJosnToExcel(json, '产品列表')
    },
    outSelect() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('没有选中的项')
        return false
      }
      const json = {
        sheet_name: '产品列表',
        sheet_values: this.multipleSelection.map(item => ({
          '创建时间': Foundation.unixToDate(item.create_time),
          '项目号': item.order_no,
          '产品名称': item.name,
          '生产型号': item.code,
          '生产编码': item.no,
          '数量': item.qty,
          '销售备注': item.sales_remark,
          '要求发货日期': Foundation.unixToDate(item.ship_date_required),
          '技术': item.name,
          '硬件版本': item.hard_ver,
          '软件版本': item.soft_ver,
          '技术备注': item.tech_remark,
          '生产人': item.produce_name,
          '生产状态': item.produce_status,
          '已产数量': item.produced_qty
        }))
      }
      this.MixinExportJosnToExcel(json, '产品列表')
    },
    GET_GroupList() {
      this.loading = true
      API_orderItems.getPageGroupList(this.params).then(response => {
        this.loading = false
        this.tableData = response
      }).catch(() => (this.loading = false))
    },
    sousuo() {
      this.params.page_no = 1
      this.GET_List()
    },
    sousuo2() {
      this.params2.page_no = 1
      this.GET_List2()
    },
    handleDetail2(row) {
      this.myTitle = row.name
      this.params2.good_id = row.good_id
      this.GET_List2()
      this.drawerShow = true
    }
  }
}
</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>