895 lines
34 KiB
Vue
895 lines
34 KiB
Vue
<template>
|
||
<el-main class="bg_white">
|
||
<div class="m-t-10 table_90 border-r-10 text-black">
|
||
<el-row>
|
||
<el-col :span="8" style="align-items: center;display: flex;flex-direction: row;">
|
||
<!-- <el-button type="primary" size="mini" @click="getList(1)">搜索</el-button>
|
||
<el-button type="primary" size="mini" @click="reset()">重置</el-button>-->
|
||
<el-button type="primary" size="mini" @click="save">保存修改</el-button>
|
||
</el-col>
|
||
<el-col :span="16" class="text-r">
|
||
<el-button style="border: 0;padding: 0;">
|
||
<el-upload action :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="uploadByJsqd"
|
||
:file-list="fileList">
|
||
<el-button type="primary" size="mini">导入</el-button>
|
||
</el-upload>
|
||
</el-button>
|
||
<!-- <el-button type="primary" size="mini" @click="batchExport(2)">导出新老sku</el-button> -->
|
||
<el-button type="primary" size="mini" @click="batchExport">导出</el-button>
|
||
<el-button type="primary" size="mini" @click="clickLog">日志</el-button>
|
||
<el-button type="primary" size="mini" @click="synchronizeErp">同步ERP数据</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<!--表格-->
|
||
<div class="bg_white table_90 m-t-10 border-r-10 text-black f-12">
|
||
<vxe-table border resizable show-overflow :height="tableHeight" :scroll-x="{ enabled: false }"
|
||
:scroll-y="{ enabled: false }" :header-row-style="header_style" :data="tableData" :edit-config="editConfig">
|
||
<vxe-colgroup title="基本信息" header-align="center" fixed="left" resizable>
|
||
<vxe-column field="picture" title="图片" width="80" header-align="center" align="center" class="position-r">
|
||
<template #default="{ row }">
|
||
<el-upload :action="api_upload_url" :with-credentials="true" :on-success="function (res, file, file_list) {
|
||
return handleSuccess(res, file, file_list, row)
|
||
}" :show-file-list="false" name="file" accept=".png, .jpg" :on-change="handleChange">
|
||
<img v-if="row.picture" :src="row.picture" class="avatar" @mousemove="enlarge($event, row)"
|
||
@mouseout="enlargeOut(row)" />
|
||
<el-icon v-else>
|
||
<plus />
|
||
</el-icon>
|
||
<view v-show="row.enlargeImgShow" class="img-show position-f" v-if="enlargeImg" :style="top">
|
||
<img :src="enlargeImg" />
|
||
</view>
|
||
</el-upload>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-colgroup title="规格型号（sku）" header-align="center">
|
||
<vxe-column field="model" width="150">
|
||
<template #header>
|
||
<el-input size="mini" v-model="form_requst.model" @keydown.enter.native="getList"></el-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="产品名称" header-align="center">
|
||
<vxe-column field="name" width="120" header-align="center">
|
||
<template #header>
|
||
<el-input size="mini" v-model="form_requst.name" @keydown.enter.native="getList"></el-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="生命周期" header-align="center">
|
||
<vxe-column field="F_PAEZ_Combo2" width="100" header-align="center">
|
||
<template #header>
|
||
<el-select v-model="form_requst.F_PAEZ_Combo2" placeholder clearable filterable size="mini"
|
||
@clear="clear('F_PAEZ_Combo2')">
|
||
<el-option v-for="(item, index) in F_PAEZ_Combo2" :key="index" :label="item" :value="item"
|
||
@click="getList"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="产品分类" header-align="center">
|
||
<vxe-colgroup title="一级分类" header-align="center">
|
||
<vxe-column field="category_one" width="100">
|
||
<template #header>
|
||
<el-select v-model="form_requst.category_one" placeholder clearable filterable size="mini"
|
||
@clear="clear('category_one')" ref="select_one">
|
||
<el-option v-for="(item1, index) in category_one" :key="index" :label="item1" :value="item1"
|
||
@click="getList"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="二级分类" header-align="center">
|
||
<vxe-column field="category_two" width="100">
|
||
<template #header>
|
||
<el-select v-model="form_requst.category_two" placeholder clearable filterable size="mini"
|
||
@clear="clear('category_two')">
|
||
<el-option v-for="(item2, index) in category_two" :key="index" :label="item2" :value="item2"
|
||
@click="getList"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="三级分类" header-align="center">
|
||
<vxe-column field="category_three" width="100">
|
||
<template #header>
|
||
<el-select v-model="form_requst.category_three" placeholder clearable filterable size="mini"
|
||
@clear="clear('category_three')">
|
||
<el-option v-for="(item3, index) in category_three" :key="index" :label="item3" :value="item3"
|
||
@click="getList"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup header-align="center">
|
||
<vxe-colgroup title="项目负责团队" header-align="center">
|
||
<vxe-column field="team_user" width="100" header-align="center">
|
||
<template #header>
|
||
<el-select v-model="form_requst.team_user" placeholder clearable filterable size="mini"
|
||
@clear="clear('team_user')">
|
||
<el-option v-for="(items, index) in opd_list" :key="index" :label="items" :value="items"
|
||
@click="getList"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
</vxe-colgroup>
|
||
<vxe-column field="cost" title="物料成本价" width="80" header-align="center" align="right"
|
||
v-allow="'NewCost.NewCostFinance'"></vxe-column>
|
||
<vxe-column field="factory_price" title="出厂价(TCO成本)" width="80" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.factory_price" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="agent_price" title="代理价" width="75" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.agent_price" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="retail_price" title="零售指导价" width="70" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.retail_price" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="minimum_activity_price" title="最低活动价" width="70" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.minimum_activity_price" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="overseas_retail_price" title="海外零售指导价($)" width="70" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.overseas_retail_price" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="overseas_minimum_activity_price" title="海外零售最低活动价($)" width="75" header-align="center"
|
||
align="right" :edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.overseas_minimum_activity_price" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-colgroup title="产品成本构成" header-align="center" v-allow="'NewCost.NewCostFinance'">
|
||
<vxe-column field="clinker_cost" title="结构/本体" width="70" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.clinker_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="metal_cost" title="电子" width="62" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.metal_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="electron_cost" title="电源" width="62" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.electron_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="wire_cost" title="线材" width="62" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.wire_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="accessories_cost" title="辅料/配件" width="68" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.accessories_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="packing_cost" title="包材" width="62" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.packing_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="process_cost" title="加工费" width="" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.process_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="other_cost" title="硬盘/运费/其他/DDR" width="80" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.other_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="auth_cost" title="模具费/认证费等费用" width="80" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.auth_cost" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-column field="moq" title="MOQ" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.moq" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="packing" title="包装方式" width="80" header-align="center"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.packing" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-colgroup title="产品尺寸重量（mm/g）">
|
||
<vxe-column field="FLENGTH" title="长" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FLENGTH" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FWIDTH" title="宽" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FWIDTH" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FHEIGHT" title="高" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FHEIGHT" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FNETWEIGHT" title="重量" width="120" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FNETWEIGHT" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="包装版本1" header-align="center">
|
||
<vxe-colgroup title="包装尺寸重量（mm/g）" header-align="center">
|
||
<vxe-column field="FPACKAGE1" title="包装版本名称" width="60" header-align="center"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FPACKAGE1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FLENGTHP1" title="长" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FLENGTHP1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FWIDTHP1" title="宽" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FWIDTHP1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FHEIGHTP1" title="高" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FHEIGHTP1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FNETWEIGHTP1" title="重量" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FNETWEIGHTP1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="装箱信息(mm/Kg)" header-align="center">
|
||
<vxe-column field="FQtyC1" title="数量" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FQtyC1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FLENGTHC1" title="长" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FLENGTHC1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FWIDTHC1" title="宽" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FWIDTHC1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FHEIGHTC1" title="高" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FHEIGHTC1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FNETWEIGHTC1" title="净重" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FNETWEIGHTC1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="FGROSSWEIGHTC1" title="毛重" width="120" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.FGROSSWEIGHTC1" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
</vxe-colgroup>
|
||
<vxe-column field="FITEMPPROPERTY" title="物料属性" width="80" header-align="center" align="right"></vxe-column>
|
||
<vxe-column field="bom_version" title="BOM版本" width="140" header-align="center" align="right"></vxe-column>
|
||
<vxe-column field="remark1" title="绩效提成经营分析品线(一级)" width="80" header-align="center" align="right">
|
||
<template #default="{ row }">
|
||
{{ row.remark1 }}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="remark2" title="绩效提成经营分析品线(二级)" width="100" header-align="center" align="right"
|
||
:edit-render="{}">
|
||
<template #default="{ row }">
|
||
{{ row.remark2}}
|
||
</template>
|
||
<template #edit="{ row, $rowIndex }">
|
||
<vxe-select v-model="row.remark2" @change="val => updateRemark(val, $rowIndex)" clearable>
|
||
<vxe-option v-for="item in remark_level" :key="item.remark_two" :value="item.remark_two" :label="item.remark_two"></vxe-option>
|
||
</vxe-select>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="remark3" title="业绩/回款统计品线" width="80" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.remark3" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="line" title="交付管理品线" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.line" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="is_fm" title="是否闪存" width="60" header-align="center" align="right"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }">
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.is_fm" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="first_warehousing" title="首批入库时间" width="120" header-align="center" align="right">
|
||
</vxe-column>
|
||
<vxe-column field="edit_time" title="上次更新" width="120" header-align="center" align="right"></vxe-column>
|
||
</vxe-table>
|
||
<el-pagination :current-page="form_requst.page" :page-sizes="[10, 20, 30]" :page-size="form_requst.size"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="count" class="m-t-10 m-b-20 table_90"
|
||
@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
|
||
</div>
|
||
<!--价格修改-->
|
||
</el-main>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
import { ElMessage, ElLoading } from 'element-plus'
|
||
import axios from 'axios'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
loading: null,
|
||
fileList: [], //上传的文件列表
|
||
header_style: {
|
||
'background-color': '#F5F7FA',
|
||
color: '#606266',
|
||
fontSize: '10px',
|
||
fontWeight: '600',
|
||
textAlign: 'center'
|
||
},
|
||
brand_list: [],
|
||
sku_list: [],
|
||
name_list: [],
|
||
F_PAEZ_Combo2: [],
|
||
one_cate_list: [],
|
||
two_cate_list: [],
|
||
three_cate_list: [],
|
||
is_211: [],
|
||
supplier_list: [],
|
||
form_requst: {
|
||
page: 1,
|
||
size: 20,
|
||
model: '',
|
||
name: '',
|
||
F_PAEZ_Combo2: '',
|
||
category_one: '',
|
||
category_two: '',
|
||
category_three: '',
|
||
team_user: ''
|
||
},
|
||
model: '',
|
||
name: '',
|
||
F_PAEZ_Combo2: '',
|
||
category_one: '',
|
||
category_two: '',
|
||
category_three: '',
|
||
opd_list: '',
|
||
form_buy: '',
|
||
fast: '',
|
||
supplier: '',
|
||
count: 0,
|
||
tableData: null,
|
||
save_form: [],
|
||
add_form: {
|
||
id: '',
|
||
key: '',
|
||
value: ''
|
||
},
|
||
CostFinance: '',
|
||
listLoading: '',
|
||
old_value: '',
|
||
enlargeImgShow: false,
|
||
enlargeImg: '',
|
||
top: '',
|
||
tableHeight: 700, // 表格高度，会动态计算
|
||
remark_level: [] // 绩效提成经营分析品线等级下拉选择
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
// 取出页面标签
|
||
userInfo: state => state.user.userInfo
|
||
}),
|
||
editConfig () {
|
||
if (this.userInfo.isall == 1) {
|
||
return { trigger: 'click', mode: 'cell' }
|
||
}
|
||
},
|
||
api_upload_url () {
|
||
return process.env.VUE_APP_API_BASEURL + 'admin/Upload/uploadImgDemo'
|
||
}
|
||
},
|
||
created () {
|
||
this.getList()
|
||
},
|
||
mounted() {
|
||
// 组件挂载后计算表格高度
|
||
this.calculateTableHeight();
|
||
// 监听窗口大小变化，动态调整表格高度
|
||
window.addEventListener('resize', this.calculateTableHeight);
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁前移除事件监听
|
||
window.removeEventListener('resize', this.calculateTableHeight);
|
||
},
|
||
methods: {
|
||
updateRemark(val, rowIndex){
|
||
// 根据选中的二级品线查找对应的一级品线
|
||
const item = this.remark_level.find(i => i && i.remark_two === val.value);
|
||
this.tableData[rowIndex].remark1 = val.value==null|| !val.value?'' :item.remark_one;
|
||
},
|
||
// 计算表格自适应高度
|
||
calculateTableHeight() {
|
||
// 获取浏览器窗口高度
|
||
const windowHeight = window.innerHeight;
|
||
// 获取表格容器上方元素的高度（这里需要根据实际情况调整）
|
||
// 假设上方操作栏和标题区域大约占用200px
|
||
const headerHeight = 200;
|
||
// 计算表格可用高度，减去一些边距和预留空间
|
||
this.tableHeight = windowHeight - headerHeight - 30; // 30px作为底部边距预留
|
||
// 确保表格高度不会太小
|
||
if (this.tableHeight < 300) {
|
||
this.tableHeight = 300;
|
||
}
|
||
},
|
||
enlarge (e, row) {
|
||
console.log(e)
|
||
this.enlargeImg = row.picture
|
||
row.enlargeImgShow = true
|
||
this.top = 'top:' + e.clientY + 'px'
|
||
},
|
||
enlargeOut (row) {
|
||
row.enlargeImgShow = false
|
||
this.enlargeImg = ''
|
||
},
|
||
//成本列表
|
||
getList (type) {
|
||
if (type == 1) {
|
||
this.form_requst.page = 1
|
||
this.exportlist(type)
|
||
}
|
||
this.listLoading = true
|
||
this.$http
|
||
.get('cost/list', this.form_requst)
|
||
.then(res => {
|
||
if (res.errno == 200) {
|
||
res.data.list.forEach((item, index) => {
|
||
item.enlargeImgShow = false
|
||
})
|
||
this.tableData = res.data.list
|
||
this.brand = res.data.brand
|
||
this.F_PAEZ_Combo2 = res.data.F_PAEZ_Combo2
|
||
this.category_one = res.data.category_one
|
||
this.category_two = res.data.category_two
|
||
this.category_three = res.data.category_three
|
||
this.supplier = res.data.supplier
|
||
this.count = res.data.count
|
||
this.form_buy = res.data.form_buy
|
||
this.fast = res.data.fast
|
||
this.opd_list = res.data.opd
|
||
this.remark_level = res.data.remark_level
|
||
this.tableData.forEach(item => {
|
||
item.is_show = 1
|
||
})
|
||
} else {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: res.errmsg
|
||
})
|
||
}
|
||
})
|
||
.finally(() => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
//clear select
|
||
clear (item) {
|
||
if (item == 'F_PAEZ_Combo2') {
|
||
this.form_requst.F_PAEZ_Combo2 = ''
|
||
}
|
||
if (item == 'category_one') {
|
||
this.form_requst.category_one = ''
|
||
}
|
||
if (item == 'category_two') {
|
||
this.form_requst.category_two = ''
|
||
}
|
||
if (item == 'category_three') {
|
||
this.form_requst.category_three = ''
|
||
}
|
||
if (item == 'team_user') {
|
||
this.form_requst.team_user = ''
|
||
}
|
||
this.getList()
|
||
},
|
||
//重置
|
||
reset () {
|
||
this.form_requst = {
|
||
page: 1,
|
||
size: 20,
|
||
model: '',
|
||
name: '',
|
||
F_PAEZ_Combo2: '',
|
||
category_one: '',
|
||
category_two: '',
|
||
category_three: '',
|
||
team_user: ''
|
||
}
|
||
this.getList()
|
||
},
|
||
//分页
|
||
handleSizeChange (new_size) {
|
||
this.form_requst.size = new_size
|
||
this.getList()
|
||
},
|
||
handleCurrentChange (new_page) {
|
||
this.form_requst.page = new_page
|
||
this.getList()
|
||
},
|
||
tableRowClassName ({ row, rowIndex }) {
|
||
if (rowIndex == this.rowClassName) {
|
||
return this.classNameRow
|
||
}
|
||
return ''
|
||
},
|
||
//编辑
|
||
handleClick (index, row) {
|
||
this.rowClassName = index
|
||
this.classNameRow = 'current-row'
|
||
row.is_show = 0
|
||
this.buttonEdit = false
|
||
this.buttonSave = true
|
||
},
|
||
|
||
//保存修改
|
||
save () {
|
||
console.log(this.tableData, 'this.tableData')
|
||
this.$http
|
||
.post('cost/edit', this.tableData)
|
||
.then(res => {
|
||
if (res.errno == 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: res.errmsg
|
||
})
|
||
this.getList()
|
||
} else {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: res.errmsg
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
//同步ERP
|
||
synchronizeErp () {
|
||
const listLoading = ElLoading.service({
|
||
lock: true,
|
||
text: '同步ERP，可能需要几分钟，请耐心等待...'
|
||
})
|
||
this.$http
|
||
.get('cost/geterpinfo')
|
||
.then(res => {
|
||
if (res.errno == 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: res.errmsg
|
||
})
|
||
this.getList()
|
||
} else {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: res.errmsg
|
||
})
|
||
}
|
||
})
|
||
.finally(() => {
|
||
listLoading.close()
|
||
})
|
||
},
|
||
//文件校验方法
|
||
beforeAvatarUpload (file) {
|
||
// 通过split方法和fileArr方法获取到文件的后缀名
|
||
let fileArr = file.name.split('.')
|
||
let suffix = fileArr[fileArr.length - 1]
|
||
//只能导入.xls和.xlsx文件
|
||
if (!/(xls|xlsx)/i.test(suffix)) {
|
||
this.$message('文件格式不正确')
|
||
return false
|
||
}
|
||
//不能导入大小超过2Mb的文件
|
||
if (file.size > 20 * 1024 * 1024) {
|
||
this.$message('文件过大，请上传小于20MB的文件〜')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
//文件发生改变就会触发的事件
|
||
uploadByJsqd (file) {
|
||
this.loading = ElLoading.service({
|
||
lock: true,
|
||
text: '此操作需要一段时间请耐心等待...',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
//判断是否符合beforeAvatarUpload方法中的条件
|
||
if (this.beforeAvatarUpload(file)) {
|
||
this.fileList.name = file.name
|
||
this.fileList.url = ''
|
||
var formdata = new FormData()
|
||
formdata.append('file', file.raw)
|
||
this.$http.post('cost/import', formdata).then(res => {
|
||
if (res.errno == 200) {
|
||
this.$message({
|
||
message: '导入成功',
|
||
type: 'success'
|
||
})
|
||
this.getList() //调用表格方法，刷新页面
|
||
} else {
|
||
let str = ''
|
||
if (res.data.length > 0) {
|
||
res.data.forEach(it => {
|
||
str = str + '<span>' + it + '</span><br>'
|
||
})
|
||
}
|
||
this.$alert('<div style="max-height:450px;overflow:auto">' + res.errmsg + '</br>' + str + '</div>', '导入失败提示', {
|
||
confirmButtonText: '确定',
|
||
customClass: 'msgbox',
|
||
dangerouslyUseHTMLString: true
|
||
})
|
||
}
|
||
// 导出新老sku 导出预加载
|
||
this.loading.close()
|
||
})
|
||
}
|
||
},
|
||
//导出
|
||
exportlist (type) {
|
||
// 导出新老sku 导出预加载
|
||
this.loading = ElLoading.service({
|
||
lock: true,
|
||
text: '此操作需要一段时间请耐心等待...',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
const apiVersion = process.env.VUE_APP_API_VERSION.replace(/\./g, '_')
|
||
//导出添加搜索条件拼字段
|
||
var pathtest = ''
|
||
pathtest = process.env.VUE_APP_API_BASEURL + apiVersion + '/' + 'cost/export?isall=' + this.userInfo.isall + '&model=' + this.form_requst.model + '&name=' + this.form_requst.name + '&F_PAEZ_Combo2=' + this.form_requst.F_PAEZ_Combo2 + '&category_one=' + this.form_requst.category_one + '&category_two=' + this.form_requst.category_two + '&category_three=' + this.form_requst.category_three + '&team_user=' + this.form_requst.team_user + (type === 2 ? '&is_new=2' : '')
|
||
axios
|
||
.get(pathtest, {
|
||
responseType: 'blob',
|
||
headers: {
|
||
/*'X-Token': getToken(),*/
|
||
'Content-Type': 'application/json;charset=utf-8'
|
||
}
|
||
}
|
||
)
|
||
.then(res => {
|
||
if (!res) {
|
||
this.$message.error('下载模板文件失败')
|
||
return false
|
||
}
|
||
const stream = res.data // 后端用stream返回Excel文件
|
||
const blob = new Blob([stream])
|
||
// 前端获取业务码，成功执行正常业务
|
||
const downloadElement = document.createElement('a')
|
||
const href = window.URL.createObjectURL(blob) // 创建下载的链接
|
||
downloadElement.href = href
|
||
const timeStamp = new Date().toString()
|
||
const nameStr = decodeURI(escape(JSON.parse(res.headers['content-disposition'].split(';')[1].split('=')[1])))
|
||
downloadElement.download = nameStr // 下载后文件名
|
||
document.body.appendChild(downloadElement)
|
||
downloadElement.click() // 点击下载
|
||
document.body.removeChild(downloadElement) // 下载完成移除元素
|
||
window.URL.revokeObjectURL(href) // 释放掉blob对象
|
||
// 导出新老sku 导出预加载
|
||
this.loading.close()
|
||
})
|
||
},
|
||
//批量导出
|
||
batchExport (type) {
|
||
/* this.batchExportShow = true*/
|
||
if (type === 2) {
|
||
this.$confirm('导出所有sku数据量较大，可能需要较多时间是否确认导出', '确认信息', {
|
||
distinguishCancelAndClose: true,
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消'
|
||
}).then(() => {
|
||
if (type === 2) {
|
||
this.exportlist(type)
|
||
}
|
||
})
|
||
} else {
|
||
this.exportlist()
|
||
}
|
||
},
|
||
//日志
|
||
clickLog () {
|
||
this.$router.push({
|
||
path: '/index/log'
|
||
})
|
||
},
|
||
//上传图片
|
||
handleSuccess (res, file, file_list, item) {
|
||
console.log(item, 'item')
|
||
if (res.status == 200) {
|
||
// ElMessage({
|
||
// type: 'success',
|
||
// message: res.message,
|
||
// })
|
||
item.picture = res.data.imgpath
|
||
const formQuery = {
|
||
id: item.id,
|
||
picture: item.picture
|
||
}
|
||
this.$http.post('cost/saveImg', formQuery).then(ress => {
|
||
if (ress.errno == 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: ress.errmsg
|
||
})
|
||
} else {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: ress.errmsg
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
file_list.splice(file_list.length - 1, 1)
|
||
ElMessage({
|
||
type: 'error',
|
||
message: res.errmsg
|
||
})
|
||
}
|
||
},
|
||
//上传前色子
|
||
//上传文件限制
|
||
handleChange (file, fileList) {
|
||
const isLt5M = file.size / 1024 / 1024 < 1
|
||
if (!isLt5M) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '上传文件大小不能超过 1MB'
|
||
})
|
||
file = null
|
||
fileList = []
|
||
this.$refs.upload.clearFiles() // 清除前端显示的文件列表
|
||
} else {
|
||
if (file.status === 'ready') {
|
||
this.uploadFile = file.raw
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
/*新样式*/
|
||
.vxe-table--render-default {
|
||
font-size: 12px;
|
||
}
|
||
|
||
::v-deep(.vxe-header--column, .vxe-table--render-default) {
|
||
padding: 5px 0 !important;
|
||
}
|
||
|
||
::v-deep(.vxe-body--column) {
|
||
height: 32px !important;
|
||
}
|
||
|
||
::v-deep(.vxe-table--render-default .vxe-cell) {
|
||
padding: 0 2px !important;
|
||
font-size: 12px;
|
||
min-height: auto !important;
|
||
}
|
||
|
||
.select-class {
|
||
z-index: 10 !important;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
margin-top: -14px;
|
||
}
|
||
|
||
::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
|
||
margin-bottom: 0px !important;
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
}
|
||
|
||
::v-deep(.el-upload-list__item),
|
||
::v-deep(.vxe-body--row) {
|
||
width: 40px !important;
|
||
height: 50px !important;
|
||
line-height: 40px !important;
|
||
}
|
||
|
||
::v-deep(.el-upload-list__item) {
|
||
position: absolute;
|
||
}
|
||
|
||
::v-deep(.avatar) {
|
||
width: 40px;
|
||
height: 40px;
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
::v-deep(.el-icon-plus) {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 2px;
|
||
line-height: 40px;
|
||
border: 1px dashed rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.img-show {
|
||
width: 150px;
|
||
height: 150px;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
z-index: 9;
|
||
background-color: #fff;
|
||
vertical-align: middle;
|
||
margin-top: -60px;
|
||
text-align: center;
|
||
}
|
||
|
||
.img-show img {
|
||
z-index: 10;
|
||
max-width: 150px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
</style>
|