123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355 |
- <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>
|