web-retail-admin/src/views/goodsManage/productList/index.vue

892 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-10-28 16:50:29
-->
<template>
<div class="page">
<div class="main">
<div class="form_all">
<el-form ref="select" :model="select" label-width="auto">
<el-row :gutter="10">
<!-- 一层 -->
<el-col :span="8">
<el-form-item :label="'产品名称'">
<el-input clearable v-model="select.productName"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'产品编号'">
<el-input clearable v-model="select.productCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'产品属性'">
<el-select clearable v-model="select.productAttr">
<el-option
v-for="item in productTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'所属分类'">
<el-select clearable v-model="select.pkClassify">
<el-option
v-for="item in classifyList"
:key="item.pkId"
:label="item.name"
:value="item.pkId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'发货类型'">
<el-select clearable v-model="select.shippingChannel">
<el-option
v-for="item in fhTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'单位'">
<el-select clearable v-model="select.unit">
<el-option
v-for="item in dwList"
:key="item.pkId"
:label="item.name"
:value="item.pkId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 二层 -->
<el-col :span="4">
<el-form-item :label="'特惠礼品'">
<el-select clearable v-model="select.isGift">
<el-option
v-for="item in agreeList"
:key="item.val"
:label="item.text"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'提货商品'">
<el-select clearable v-model="select.isPickUp">
<el-option
v-for="item in agreeList"
:key="item.val"
:label="item.text"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'抽奖礼品'">
<el-select clearable v-model="select.isPrize">
<el-option
v-for="item in agreeList"
:key="item.val"
:label="item.text"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'合并发货'">
<el-select clearable v-model="select.isMerge">
<el-option
v-for="item in agreeList"
:key="item.val"
:label="item.text"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'追溯编号'">
<el-select clearable v-model="select.isBarCode">
<el-option
v-for="item in agreeList"
:key="item.val"
:label="item.text"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<!-- 三层 -->
<el-collapse-transition>
<div v-show="isActive">
<el-col :span="4">
<el-form-item :label="'冷链运输'">
<el-select clearable v-model="select.isFresh">
<el-option
v-for="item in agreeList"
:key="item.val"
:label="item.text"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'运输方式'">
<el-select clearable v-model="select.shippingType">
<el-option
v-for="item in transportTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="上下架">
<el-select clearable v-model="select.isPutOn">
<el-option
v-for="item in putOnList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'创建日期'">
<el-date-picker
v-model="creationTime"
@change="changeTime"
value-format="yyyy-MM-dd"
type="daterange"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
</el-form-item>
</el-col>
</div>
</el-collapse-transition>
<el-col :span="4">
<el-button type="primary" @click="getDataList">
{{ '搜索' }}</el-button
>
<el-button type="" class="resetBtn" @click="reset">
{{ '重置' }}</el-button
>
</el-col>
</el-row>
</el-form>
<div class="openClose" @click="changeActive">
<i :class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
<div>{{ isActive ? '点击收起' : '点击展开' }}</div>
</div>
</div>
<div class="main_a">
<div class="mainbtn">
<el-button
size="small"
@click="openDig"
v-hasButtons="['ProductListAdd']"
class="addBtn"
>{{ '添加' }}</el-button
>
<el-button
size="small"
@click="handleExport"
v-hasButtons="['ProductListExport']"
class="exportBtn"
>
{{ '导出' }}</el-button
>
<el-button
size="small"
:disabled="isCopy"
@click="toCopy"
v-hasButtons="['ProductListCopy']"
class="copyBtn"
>{{ '复制' }}</el-button
>
</div>
</div>
<div class="maintable">
<el-table
:data="tableData"
v-loading="loading"
style="width: 100%"
height="100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
align="center"
prop="sort"
sortable
:label="'排序'"
>
</el-table-column>
<el-table-column
align="center"
prop="cover"
width="120"
:label="'产品主图'"
>
<template slot-scope="scope">
<img class="bgImg" :src="scope.row.cover" alt="" />
</template>
</el-table-column>
<el-table-column
align="center"
prop="productName"
width="120"
:label="'产品名称'"
>
</el-table-column>
<el-table-column
align="center"
prop="classifyName"
width="120"
:label="'所属分类'"
>
</el-table-column>
<el-table-column
align="center"
prop="productCode"
width="120"
:label="'产品编号'"
>
</el-table-column>
<el-table-column
align="center"
prop="custName"
width="120"
label="供应商名称"
>
</el-table-column>
<el-table-column
align="center"
prop="shippingChannelVal"
width="120"
:label="'发货类型'"
>
</el-table-column>
<el-table-column
align="center"
prop="length"
width="120"
:label="'长' + '(CM)'"
>
</el-table-column>
<el-table-column
align="center"
prop="width"
width="120"
:label="'宽' + '(CM)'"
>
</el-table-column>
<el-table-column
align="center"
prop="height"
width="120"
:label="'高' + '(CM)'"
>
</el-table-column>
<el-table-column
align="center"
prop="weight"
width="120"
:label="'重量' + '(KG)'"
>
</el-table-column>
<el-table-column
align="center"
prop="postageWeight"
width="120"
:label="'邮费重量' + '(KG)'"
>
</el-table-column>
<el-table-column
align="center"
prop="unitVal"
width="120"
:label="'单位'"
>
</el-table-column>
<el-table-column
align="center"
prop="productAttrName"
width="120"
:label="'产品属性'"
>
</el-table-column>
<el-table-column
align="center"
prop="retailPrice"
width="120"
:label="'划线价'"
>
</el-table-column>
<el-table-column
align="center"
prop="shelfLife"
width="120"
:label="'保质期(天)'"
>
</el-table-column>
<el-table-column
align="center"
prop="productSpecType"
width="120"
:label="'产品规格'"
>
</el-table-column>
<el-table-column
align="center"
prop="isGift"
width="120"
:label="'特惠礼品'"
>
<template slot-scope="scope">
<div :class="scope.row.isGift ? 'isRed' : 'isGreen'">
{{ scope.row.isGift | isAgree(that) }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isPickUp"
width="120"
:label="'提货商品'"
>
<template slot-scope="scope">
<div :class="scope.row.isPickUp ? 'isRed' : 'isGreen'">
{{ scope.row.isPickUp | isAgree(that) }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isPrize"
width="120"
:label="'抽奖礼品'"
>
<template slot-scope="scope">
<div :class="scope.row.isPrize ? 'isRed' : 'isGreen'">
{{ scope.row.isPrize | isAgree(that) }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isBarCode"
width="120"
:label="'追溯编号'"
>
<template slot-scope="scope">
<div :class="scope.row.isBarCode ? 'isRed' : 'isGreen'">
{{ scope.row.isBarCode | isAgree(that) }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isMerge"
width="120"
:label="'合并发货'"
>
<template slot-scope="scope">
<div :class="scope.row.isMerge ? 'isRed' : 'isGreen'">
{{ scope.row.isMerge | isAgree(that) }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isFresh"
width="120"
:label="'冷链运输'"
>
<template slot-scope="scope">
<div :class="scope.row.isFresh ? 'isRed' : 'isGreen'">
{{ scope.row.isFresh | isAgree(that) }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="typeShippingMerge"
width="120"
:label="'运输方式'"
>
</el-table-column>
<el-table-column
align="center"
prop="isPutOn"
width="120"
label="上下架"
>
<template slot-scope="scope">
<div>{{ scope.row.isPutOn == 0 ? "上架" : "下架" }}</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="creationTime"
width="120"
:label="'创建日期'"
>
</el-table-column>
<el-table-column
align="center"
prop="listingTime"
width="120"
label="上架时间"
>
</el-table-column>
<el-table-column
align="center"
prop="removalTime"
width="120"
label="下架时间"
>
</el-table-column>
<el-table-column
align="center"
prop="time"
width="120"
:label="'操作'"
fixed="right"
>
<template slot-scope="scope">
<div class="btnHeng">
<el-button
@click="toFixed(scope.row.pkId, 1)"
type="text"
v-hasButtons="['ProductListUpdate']"
style="color: #f3a900"
size="small"
>
{{ '修改' }}
</el-button>
<el-button
@click="toChecked(scope.row.pkId, 0)"
type="text"
style="color: #48b2fd"
size="small"
>
{{ '查看' }}
</el-button>
<el-button
@click="handleDelete(scope.row.pkId)"
type="text"
size="small"
v-hasButtons="['ProductListDelete']"
style="color: #c8161d"
>
{{ '删除' }}
</el-button>
</div>
<div class="btnHeng">
<el-button
@click="upEdit(scope.row.pkId, 0)"
type="text"
v-hasButtons="['ProductListUp']"
size="small"
>
{{ '上移' }}
</el-button>
<el-button
@click="upEdit(scope.row.pkId, 1)"
type="text"
v-hasButtons="['ProductListDown']"
size="small"
>
{{ '下移' }}
</el-button>
<el-button
@click="topEdit(scope.row.pkId)"
type="text"
size="small"
v-hasButtons="['ProductListTop']"
style="color: #37bf46"
>
{{ '置顶' }}
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDataList"
/>
</div>
</template>
<script>
import topBar from "@/components/topBar";
import * as api from "@/api/product.js";
import { accountSave, accountUpdate } from "@/api/configManage";
import { getToken } from "@/utils/auth";
export default {
name: "ProductList",
components: {
topBar,
},
filters: {
isAgree(val, that) {
if (!val) {
return that.$t("ENU_POPUP_TYPE_1");
} else {
return that.$t("ENU_POPUP_TYPE_2");
}
},
},
data() {
return {
that: this,
// 所属分类
classifyList: [],
// 产品属性枚举
productTypeList: [],
// 发货类型
fhTypeList: [],
// 单位
dwList: [],
// 运输方式
transportTypeList: [],
// 折叠搜索框
isActive: false,
select: {},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 50,
},
addOrEdit: "",
total: 0,
loading: false,
tableData: [],
countryList: [],
agreeList: [
{
text: '允许',
val: 0,
},
{
text: '禁止',
val: 1,
},
],
putOnList: [
{
label: "上架",
value: 0,
},
{
label: "下架",
value: 1,
},
],
form: {},
creationTime: [],
isCopy: true,
selPkId: "",
};
},
mounted() {
// 获取列表
this.getDataList();
// 发货类型
this.getShipping();
// 单位
this.getUnit();
// 所属分类
this.getClassifyAll();
// 运输方式
this.getTransportType();
// 产品属性枚举
this.getProductType();
},
methods: {
reset() {
this.select = {};
this.creationTime = [];
this.getDataList();
},
changeTime(val) {
this.select.startCreateDate = val[0];
this.select.endCreateDate = val[1];
},
// 产品属性枚举
getProductType() {
api.productType().then((res) => {
this.productTypeList = res.data;
});
},
// 运输方式
getTransportType() {
api.transportType().then((res) => {
this.transportTypeList = res.data;
});
},
// 发货类型
getShipping() {
api.getShipping().then((res) => {
this.fhTypeList = res.data;
});
},
// 单位
getUnit() {
api.unitAll().then((res) => {
this.dwList = res.data;
});
},
// 所属分类
getClassifyAll() {
api.classifyAll().then((res) => {
this.classifyList = res.data;
});
},
// 展开折叠
changeActive() {
this.isActive = !this.isActive;
},
// 点击修改
toFixed(id) {
this.$router.push({
path: "productRelease/productDetail",
query: {
id: id,
methods: 1,
},
});
},
// 删除
handleDelete(id) {
api.productDel(id).then((res) => {
// 获取列表
this.getDataList();
});
},
openDig() {
this.$router.push({
path: "productRelease/cpfb",
});
},
// 查看 0编辑1,复制2
toChecked(id, index) {
this.$router.push({
path: "productRelease/productDetail",
query: {
id: id,
methods: index,
},
});
},
upEdit(id, index) {
api
.productMove({
productId: id,
productMoveType: index,
})
.then((res) => {
this.getDataList();
});
},
topEdit(id) {
api
.floatingFoof({
productId: id,
})
.then((res) => {
this.getDataList();
});
},
// 获取列表
getDataList() {
this.loading = true;
api
.productList(Object.assign({}, this.queryParams, this.select))
.then((res) => {
res.rows.forEach((item) => {
this.productTypeList.forEach((child) => {
if (child.value == item.productAttr) {
item.productAttrName = child.label;
}
});
});
this.loading = false;
this.tableData = res.rows;
this.total = res.total;
});
},
toCopy() {
this.toChecked(this.selPkId, 2);
},
handleSelectionChange(val) {
if (val.length > 0) {
this.selPkId = val[0].pkId;
this.isCopy = false;
} else {
this.isCopy = true;
}
},
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
}).then((_) => {
this.download(
"/sale/manage/product/export",
Object.assign({}, this.queryParams, this.select),
`产品列表-${new Date().getTime()}.xlsx`
);
});
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
} else if (rowIndex % 2 == 0) {
return "success-row";
}
return "";
},
},
};
</script>
<style scoped lang="scss">
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
::v-deep .el-table .success-row {
background: #ffffff;
}
::v-deep .el-table thead {
color: #000000;
}
::v-deep .el-select {
width: 100%;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
display: none !important; /* 上传按钮隐藏 */
}
.page {
padding: 20px;
background: #f9f9f9;
font-size: 14px;
.main {
display: flex;
flex-direction: column;
// background: #ffffff;
border-radius: 8px;
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
.form_all {
padding: 0 20px;
margin-bottom: 10px;
background: #fff;
border-radius: 8px;
}
.main_a {
display: flex;
padding: 0px 20px 3px 0;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 8px;
.mainbtn {
.thebtn1 {
background: #3181e5;
color: #ffffff;
}
.thebtn2 {
background: #4391fd;
color: #ffffff;
}
.thebtn3 {
background: #6962f6;
color: #ffffff;
}
}
.maintitle {
font-size: 10px;
font-family: MicrosoftYaHei;
color: #999999;
}
}
.maintable {
flex: 1;
overflow-y: auto;
}
}
.tem {
display: flex;
align-items: center;
justify-content: center;
img {
width: 28px;
height: 20px;
margin-right: 3px;
}
}
.isRed {
color: #ed1d25;
}
.isGreen {
color: #1ab62b;
}
.bgImg {
width: 48px;
height: 48px;
}
}
.openClose {
margin-right: 10px;
color: #666666;
text-align: center;
}
.btnHeng {
display: flex;
}
.btnHeng ::v-deep .el-button {
padding: 0;
}
</style>