版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29532651/article/details/80648881
<
template
>
<
div
>
<
el-form
:inline="
true"
class=
"search-from"
>
<
el-form-item
>
<
el-input
placeholder=
"商品编号\商品标题\化学品名"
v-model="
search.
keyword"
style=
"width: 200px;"
></
el-input
>
</
el-form-item
>
<
el-form-item
>
<
el-select
v-model="
categoryFirst"
clearable
placeholder=
"商品分类"
>
<
el-option
v-for="
item
in
categoryFirstOptions"
:key="
item.
id"
:label="
item.
text"
:value="
item.
id"
>
</
el-option
>
</
el-select
>
<
el-select
v-model="
categorySecond"
clearable
placeholder=
"二级分类"
v-show="
categorySecondVisible"
>
<
el-option
v-for="
item
in
categorySecondOptions"
:key="
item.
id"
:label="
item.
text"
:value="
item.
id"
>
</
el-option
>
</
el-select
>
<
el-select
v-model="
categoryThird"
clearable
placeholder=
"三级分类"
v-show="
categoryThirdVisible"
>
<
el-option
v-for="
item
in
categoryThirdOptions"
:key="
item.
id"
:label="
item.
text"
:value="
item.
id"
>
</
el-option
>
</
el-select
>
</
el-form-item
>
<
el-form-item
>
<
el-input
placeholder=
"供应商名称"
v-model="
search.
companyName"
></
el-input
>
</
el-form-item
>
<
el-form-item
>
<
el-select
v-model="
search.
chemistryGradeTitle"
clearable
placeholder=
"化学品性质"
>
<
el-option
v-for="
item
in
chemistryGradeTitleOptions"
:key="
item.
id"
:label="
item.
title"
:value="
item.
id"
>
</
el-option
>
</
el-select
>
</
el-form-item
>
<
el-form-item
>
<
el-select
v-model="
search.
department"
clearable
placeholder=
"销售部门"
>
<
el-option
v-for="
item
in
departmentOptions"
:key="
item.
weight"
:label="
item.
name"
:value="
item.
weight"
>
</
el-option
>
</
el-select
>
</
el-form-item
>
<
el-form-item
:model="
resolveForm"
ref=
"resolveForm"
:rules="
rules"
label-width=
"130px"
>
<
el-col
:span="
11"
>
<
el-form-item
prop=
"startDate"
>
<
el-date-picker
type=
"date"
placeholder=
"选择开始日期"
:picker-options="
pickerOptions"
v-model="
resolveForm.
startDate"
style=
"width: 100%;"
></
el-date-picker
>
</
el-form-item
>
</
el-col
>
<
el-col
class=
"spt"
:span="
1"
>-
</
el-col
>
<
el-col
:span="
11"
>
<
el-form-item
prop=
"endDate"
>
<
el-date-picker
type=
"date"
placeholder=
"选择结束日期"
:picker-options="
pickerOptionsEnd"
v-model="
resolveForm.
endDate"
style=
"width: 100%;"
></
el-date-picker
>
</
el-form-item
>
</
el-col
>
</
el-form-item
>
<
el-form-item
>
<
el-button
type=
"primary"
@click="
onSearch"
>搜索
</
el-button
>
</
el-form-item
>
</
el-form
>
<
el-table
:data="
tableData"
v-loading="
tableLoading"
border
@selection-change="
selection"
>
<
el-table-column
type=
"selection"
width=
"50"
>
</
el-table-column
>
<
el-table-column
align=
"center"
prop=
"productCode"
width=
"150"
label=
"商品编号"
>
<
template
scope=
"scope"
>
<
a
style=
"color:#20a0ff;cursor:pointer;"
@click.stop="
openGoodsDetails(
scope.
row)"
>{{
scope.
row.
productCode}}
</
a
>
</
template
>
</
el-table-column
>
<
el-table-column
align=
"center"
prop=
"title"
width=
"180"
label=
"商品标题"
></
el-table-column
>
<
el-table-column
align=
"center"
prop=
"cnName"
width=
"180"
label=
"化学品名"
></
el-table-column
>
<
el-table-column
align=
"center"
prop=
"categoryList"
width=
"180"
label=
"物料分类"
></
el-table-column
>
<
el-table-column
align=
"center"
prop=
"chemistryGradeTitle"
width=
"130"
label=
"化学品性质"
></
el-table-column
>
<
el-table-column
align=
"center"
prop=
"companyName"
width=
"250"
label=
"供应商"
></
el-table-column
>
<
el-table-column
align=
"center"
prop=
"department"
width=
"130"
label=
"销售部门"
></
el-table-column
>
<
el-table-column
align=
"center"
width=
"180"
prop=
"addTime"
label=
"创建时间"
>
<!-- <template scope="scope">
{{timeFormatter(scope.row.addTime)}}
</template> -->
</
el-table-column
>
<
el-table-column
align=
"center"
prop=
"state"
width=
"130"
label=
"状态"
>
<
template
scope=
"scope"
>
<
span
v-if="
scope.
row.
state ===
'1'"
>已通过
</
span
>
<
span
v-if="
scope.
row.
state ===
'2'"
>审核中
</
span
>
<
span
v-if="
scope.
row.
state ===
'0'"
>未通过
</
span
>
<!-- <span v-if="scope.row.state === '3'">已下架</span>
<span v-if="scope.row.state === '4'">商家下架</span>
<span v-if="scope.row.state === '5'">工作人员下架</span>
<span v-if="scope.row.state === '6'">系统下架</span>
<span v-if="scope.row.state === '8'">店铺关闭，系统下架</span> -->
<
span
v-if="
scope.
row.
state ===
'3'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'4'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'5'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'6'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'7'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'8'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'9'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'10'"
>商品已下架
</
span
>
<
span
v-if="
scope.
row.
state ===
'11'"
>商品已下架
</
span
>
</
template
>
</
el-table-column
>
<
el-table-column
v-if="
state===
'0'"
prop=
"addTime"
align=
"center"
width=
"180"
label=
"审核时间"
>
<!-- <template scope="scope">
{{timeFormatter(scope.row.updateTime)}}
</template> -->
</
el-table-column
>
<
el-table-column
v-if="
state===
'0'"
align=
"center"
prop=
"reason"
width=
"240"
label=
"未通过原因"
>
<
template
scope=
"scope"
>
<
span
class=
"reason-text"
>{{
scope.
row.
reason.
reason}}
</
span
>
</
template
>
</
el-table-column
>
<
el-table-column
v-if="
state===
'4'"
align=
"center"
width=
"180"
prop=
"updateTime"
label=
"下架时间"
>
<!-- <template scope="scope">
{{timeFormatter(scope.row.updateTime)}}
</template> -->
</
el-table-column
>
<
el-table-column
v-if="
state===
'4'"
align=
"center"
prop=
"reason"
width=
"180"
label=
"下架原因"
>
<
template
scope=
"scope"
>
<
span
class=
"reason-text"
>{{
scope.
row.
reason.
reason}}
</
span
>
</
template
>
</
el-table-column
>
<
el-table-column
align=
"center"
label=
"操作"
width=
"300"
fixed=
"right"
>
<
template
scope=
"scope"
>
<
el-button
v-if="
state===
'2'"
@click="
submitResolve(
scope.
row)"
size=
"small"
>审核通过
</
el-button
>
<
el-button
v-if="
state===
'2'"
@click="
reject(
scope.
row)"
size=
"small"
>审核不通过
</
el-button
>
<
el-button
v-if="
state===
'1'"
@click="
unshelve(
scope.
row)"
size=
"small"
>下架
</
el-button
>
<
el-button
v-if="
scope.
row.
state ===
'5'"
@click="
restore(
scope.
row)"
size=
"small"
>恢复上架
</
el-button
>
<
el-button
@click="
showHistory(
scope.
row)"
size=
"small"
>操作记录
</
el-button
>
</
template
>
</
el-table-column
>
</
el-table
>
<
div
class=
"page-wrapper"
>
<
div
class=
"btn-group"
>
<
el-button
type=
"primary"
class=
"batch-export"
icon=
"document"
size=
"small"
@click="
batchExport"
v-if="
this.
state ===
'0' ||
this.
state ===
'1' ||
this.
state ===
'3'"
>批量导出
</
el-button
>
<!-- <el-button type="primary" class="batch-dele" icon="delete" size="small">批量删除</el-button> -->
</
div
>
<
el-pagination
v-if='
paginations.
total>
paginations.
pageSize'
:page-size="
paginations.
pageSize"
:layout="
paginations.
layout"
:total="
paginations.
total"
:current-page='
paginations.
currentPage'
@current-change='
onChangeCurrentPage'
>
</
el-pagination
>
</
div
>
<
el-dialog
title=
"审核不通过"
:visible.sync="
rejectVisible"
>
<
el-form
:model="
rejectForm"
ref=
"rejectForm"
:rules="
rules"
label-width=
"130px"
>
<
el-form-item
label=
"原因："
prop=
"reason"
style=
"width: 88%;"
>
<
el-input
type=
"textarea"
v-model="
rejectForm.
reason"
></
el-input
>
</
el-form-item
>
<
el-form-item
label=
" "
>
<
el-button
type=
"primary"
:loading="
fetchLoading"
@click="
submitReject"
>确定
</
el-button
>
</
el-form-item
>
</
el-form
>
</
el-dialog
>
<
el-dialog
title=
"下架"
:visible.sync="
unshelveVisible"
>
<
el-form
:model="
unshelveForm"
ref=
"unshelveForm"
:rules="
rules"
label-width=
"130px"
>
<
el-form-item
label=
"原因："
prop=
"reason"
style=
"width: 88%;"
>
<
el-input
type=
"textarea"
v-model="
unshelveForm.
reason"
></
el-input
>
</
el-form-item
>
<
el-form-item
label=
" "
>
<
el-button
type=
"primary"
:loading="
fetchLoading"
@click="
submitUnshelve"
>确定
</
el-button
>
</
el-form-item
>
</
el-form
>
</
el-dialog
>
<
el-dialog
title=
"操作记录"
:visible.sync="
historyVisible"
>
<
history
:data="
historyData"
:total="
historyTotal"
@changePage="
changeHistoryPage"
></
history
>
</
el-dialog
>
</
div
>
</
template
>
<
script
>
import
History
from
'components/history/history'
import {
setupGoodsList,
examStatus,
failStatus,
changeOff,
getHistory,
getCategory,
getDepartment,
showMatter,
renewStatus}
from
'api/goodsManage'
import {
formatDate}
from
'common/js/util'
import
config
from
'api/config'
export
default {
props: {
state: {
type:
String,
default:
''
}
},
data () {
let
self =
this
return {
closeVisible:
false,
unshelveVisible:
false,
currentUid:
'',
paginations:
config.
paginations(),
pickerOptions: {
disabledDate (
time) {
return
time.
getTime() >
new
Date(
self.
resolveForm.
endDate) -
8.63e7
}
},
pickerOptionsEnd: {
disabledDate (
time) {
return
time.
getTime() <
new
Date(
self.
resolveForm.
startDate) -
8.63e7
}
},
categoryFirst:
'',
categorySecond:
'',
categoryThird:
'',
search: {
keyword:
'',
categoryFirst:
'',
categorySecond:
'',
categoryThird:
'',
companyName:
'',
chemistryGradeTitle:
'',
department:
'',
state:
this.
state,
startDate:
'',
endDate:
''
},
fetchLoading:
false,
rejectVisible:
false,
historyVisible:
false,
categoryFirstOptions: [],
categorySecondOptions: [],
categoryThirdOptions: [],
chemistryGradeTitleOptions: [],
departmentOptions: [],
tableData: [],
selectionId: [],
selectionState:
'',
tableLoading:
false,
historyData: [],
historyTotal:
0,
historyUid:
'',
categorySecondVisible:
false,
categoryThirdVisible:
false,
rejectForm: {
reason:
''
},
unshelveForm: {
reason:
''
},
resolveForm: {
startDate:
'',
endDate:
''
},
provinceOptions: [],
rules: {
reason: [
{
required:
true,
message:
'请填写原因',
trigger:
'blur' }
],
startDate: [
{
type:
'date',
required:
true,
message:
'请选择起始时间',
trigger:
'change' }
],
endDate: [
{
type:
'date',
required:
true,
message:
'请选择结束时间',
trigger:
'change' }
]
},
searchParams: {}
}
},
methods: {
getSearchParams () {
this.
search.
categoryFirst =
this.
categoryFirst
this.
search.
categorySecond =
this.
categorySecond
this.
search.
categoryThird =
this.
categoryThird
this.
search.
startDate =
this.
timeFormatter(
this.
resolveForm.
startDate /
1000)
this.
search.
endDate =
this.
timeFormatter(
this.
resolveForm.
endDate /
1000)
if (
this.
search.
endDate ===
'1970-01-01') {
this.
search.
endDate =
''
}
if (
this.
search.
startDate ===
'1970-01-01') {
this.
search.
startDate =
''
}
return {
keyword:
this.
search.
keyword,
categoryFirst:
this.
search.
categoryFirst,
categorySecond:
this.
search.
categorySecond,
categoryThird:
this.
search.
categoryThird,
companyName:
this.
search.
companyName,
chemistryGradeTitle:
this.
search.
chemistryGradeTitle,
department:
this.
search.
department,
startDate:
this.
search.
startDate,
endDate:
this.
search.
endDate
}
},
selection (
sel) {
let
rowsData =
sel
let
dataArr = []
for (
let
data
of
rowsData) {
dataArr.
push(
data.
id)
}
this.
selectionId =
dataArr
},
batchExport () {
if (
this.
selectionId.
length >
0) {
let
searchParam =
this.
getSearchParams()
let
searchParamArr = []
let
searchParamStr =
''
let
queryParams =
''
for (
let
key
in
searchParam) {
let
arrItem =
''
let
itemValue =
searchParam[
key] ?
searchParam[
key] :
''
arrItem =
key +
'=' +
itemValue
searchParamArr.
push(
arrItem)
}
searchParamStr =
searchParamArr.
join(
'&')
queryParams =
searchParamStr +
'&state=' +
this.
state +
'&id=' +
this.
selectionId.
join(
',')
// console.log(queryParams)
this.
$confirm(
'您确认要批量导出吗？',
'批量导出', {
confirmButtonText:
'确定',
cancelButtonText:
'取消'
}).
then(()
=> {
window.
location.
href =
'/Admin/sell/exportProduct?' +
queryParams
})
}
else {
this.
$alert(
'请选择您需要导出的行！',
'批量导出', {
confirmButtonText:
'确定'
})
}
},
timeFormatter (
time,
fmt =
'yyyy-MM-dd') {
if (
time ===
'') {
return
''
}
return
formatDate(
new
Date(
time *
1000),
fmt)
},
openGoodsDetails (
rows) {
let
currentUid =
rows.
id
let
src =
''
// process.env.NODE_ENV !== 'production' ? (src = '/goodsDetails.html?id=' + currentUid) : (src = '/Admin/member/goodsDetails.html?id=' + currentUid)
src =
'/Admin/Sell/details?id=' +
currentUid
this.
mainFrame.
src =
src
},
_getHistoryData (
page =
1) {
getHistory({
id:
this.
historyUid,
page:
page,
rows:
this.
paginations.
pageSize
}).
then(
rs
=> {
this.
historyTotal =
rs.
total *
1
this.
historyData =
rs.
rows
this.
historyVisible =
true
})
},
showHistory (
rows) {
if (
this.
historyUid ===
rows.
id) {
this.
historyVisible =
true
return
}
this.
historyTotal =
0
this.
historyData = []
this.
historyUid =
rows.
id
this.
_getHistoryData()
},
changeHistoryPage (
page) {
this.
_getHistoryData(
page)
},
unshelve (
rows) {
this.
unshelveVisible =
true
this.
currentUid =
rows.
id
setTimeout(()
=> {
this.
$refs.
unshelveForm.
resetFields()
},
20)
},
submitUnshelve () {
this.
$refs.
unshelveForm.
validate((
valid)
=> {
if (
valid) {
changeOff({
id:
this.
currentUid,
reason:
this.
unshelveForm.
reason
}).
then(
rs
=> {
this.
_getList()
this.
unshelveVisible =
false
this.
currentUid =
''
})
}
})
},
reject (
rows) {
this.
rejectVisible =
true
this.
currentUid =
rows.
id
setTimeout(()
=> {
this.
$refs.
rejectForm.
resetFields()
},
20)
},
submitReject () {
this.
$refs.
rejectForm.
validate((
valid)
=> {
if (
valid) {
failStatus({
id:
this.
currentUid,
reason:
this.
rejectForm.
reason
}).
then(
rs
=> {
this.
_getList()
this.
rejectVisible =
false
this.
currentUid =
''
})
}
})
},
submitResolve (
rows) {
this.
currentUid =
rows.
id
this.
$confirm(
'确认审核通过？')
.
then(()
=> {
examStatus({
id:
this.
currentUid
}).
then(
rs
=> {
this.
_getList()
this.
currentUid =
''
})
})
},
restore (
rows) {
this.
currentUid =
rows.
id
let
productDepotCode =
rows.
productDepotCode
this.
$prompt(
'请输入上架原因',
'恢复上架', {
confirmButtonText:
'确定',
cancelButtonText:
'取消',
inputValidator
:
function (
value) {
if (
value &&
value.
length <
100) {
return
true
}
else {
return
false
}
},
inputErrorMessage:
'上架原因需要1-100字以内'
}).
then(({
value })
=> {
renewStatus({
id:
this.
currentUid,
productDepotCode:
productDepotCode,
reason:
value
}).
then(
rs
=> {
this.
$alert(
rs.
msg,
'恢复上架', {
confirmButtonText:
'确定',
callback
:
action
=> {
this.
_getList()
this.
currentUid =
''
}
})
})
})
},
onSearch () {
this.
_getList()
},
onChangeCurrentPage (
page) {
this.
_getList(
page)
},
_getList (
page =
1) {
this.
tableLoading =
true
this.
paginations.
currentPage =
page
let
pageParams = {
status:
this.
state,
page:
this.
paginations.
currentPage,
rows:
this.
paginations.
pageSize
}
let
searchParams =
this.
getSearchParams()
setupGoodsList({...
pageParams, ...
searchParams}).
then(
rs
=> {
this.
tableData =
rs.
data.
rows
this.
paginations.
total =
rs.
data.
total *
1
this.
tableLoading =
false
})
},
_getCategory () {
getCategory().
then((
rs)
=> {
this.
categoryFirstOptions =
rs.
data
})
},
_getDepartment () {
getDepartment().
then((
rs)
=> {
this.
departmentOptions =
rs.
data
})
},
_showMatter () {
showMatter().
then((
rs)
=> {
this.
chemistryGradeTitleOptions =
rs.
data
})
}
},
created () {
this.
_getList()
this.
_getCategory()
this.
_getDepartment()
this.
_showMatter()
this.
mainFrame =
window.
parent.
document.
getElementById(
'mainFrame')
this.
mainTitle =
window.
parent.
document.
getElementById(
'mainTitle')
},
watch: {
categoryFirst (
newValue,
oldValue) {
if (
newValue && (
newValue !==
oldValue)) {
getCategory({
id:
this.
categoryFirst }).
then((
rs)
=> {
if (
rs.
data.
length) {
this.
categorySecondOptions =
rs.
data
this.
categorySecondVisible =
true
}
else {
this.
categorySecondOptions =
''
this.
categorySecondVisible =
false
this.
categoryThirdVisible =
false
}
this.
categorySecond =
''
this.
categoryThird =
''
this.
categoryThirdVisible =
false
})
}
else {
this.
categorySecondOptions =
''
this.
categorySecondVisible =
false
this.
categoryThirdVisible =
false
}
},
categorySecond (
newValue,
oldValue) {
if (
newValue && (
newValue !==
oldValue)) {
getCategory({
id:
this.
categorySecond }).
then((
rs)
=> {
if (
rs.
data.
length) {
this.
categoryThirdOptions =
rs.
data
this.
categoryThirdVisible =
true
}
else {
this.
categoryThirdOptions =
''
this.
categoryThirdVisible =
false
}
this.
categoryThird =
''
})
}
else {
this.
categoryThirdOptions =
''
this.
categoryThirdVisible =
false
}
}
},
components: {
History
}
}
</
script
>
<
style
lang=
"stylus"
rel=
"stylesheet/stylus">
@
import
"~common/stylus/variable.styl"
@
import
"~common/stylus/reset.styl"
@
import
"~common/stylus/index.styl"
.
search-from {
padding-top: 20px;
}
.
page-wrapper {
padding: 20px 0;
text-align:
center;
}
.
spt {
text-align:
center;
color: #
bfcbd9;
}
.
reason-text {
color: $
color-danger;
}
.
btn-group{
float:
left;
}
.
el-pagination{
display:
inline-block;
}
</
style
>