<template>
<div class="page-container ">
<el-card class="box-card">
<div class="title-wrapper">
<breadcrumb></breadcrumb>
<span class="pushButton">
<el-button type="primary" plain size="mini" icon="el-icon-refresh-right" @click="handleFilter" >刷新</el-button>
<el-button
class="dialog-footer"
@click="f_return"
type="primary"
size="mini"
>返回</el-button
>
</span>
</div>
<div class="title_backg">
<span class="title">产品详情</span>
</div>
<div class="bianji" v-limit="['basic:commodity:remove']">
<el-link
icon="el-icon-edit-outline"
type="primary"
:underline="false"
@click="handelEdit"
>编辑</el-link
>
</div>
<el-form
label-width="150px"
:model="goodsForm"
ref="goodsDetail"
size="small"
>
<el-row>
<el-col :span="6">
<el-form-item label=" 产品编号:">{{ goodsData.id }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label=" 产品状态:">
<el-tag v-if="goodsData.goodsStatus == 0" type="danger"
>下架</el-tag
><el-tag v-else type="success">上架</el-tag>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="产品名称:">{{
goodsData.goodsName
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="产品名称:"
prop="goodsName"
>
<el-input
v-model.trim="goodsForm.goodsName"
show-word-limit
clearable
placeholder="请输入产品名称"
style="width: 60%"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label=" 助记码:">{{
goodsData.mnemonicCode
}}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label=" 存储方式:">{{
goodsData.storageMode
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="存储方式:"
prop="storageMode"
>
<el-select
v-model="goodsForm.storageMode"
placeholder="请选择存储方式"
style="width: 60%"
>
<el-option
v-for="item in categoryData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="商品规格：">{{
goodsData.specName
}}</el-form-item>
</el-col> -->
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="特殊保质期:">{{
goodsData.storageRequirements
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="特殊保质期:"
prop="storageRequirements"
>
<el-input
v-model.trim="goodsForm.storageRequirements"
show-word-limit
clearable
placeholder="请输入特殊保质期"
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
style="width: 60%"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="货主名称:">{{
goodsData.storeName
}}</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="保质期(月):">{{
goodsData.qualityTerm
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="保质期(月):"
prop="qualityTerm"
>
<el-input
v-model.trim="goodsForm.qualityTerm"
show-word-limit
clearable
placeholder="请输入保质期(月)"
style="width: 60%"
type="number"
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="保质期(天):">{{
goodsData.qualityTermDay
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="保质期(天):"
prop="qualityTermDay"
>
<el-input
v-model.trim="goodsForm.qualityTermDay"
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
show-word-limit
clearable
placeholder="请输入保质期(天)"
style="width: 60%"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="产品类别:">{{
goodsData.goodsType
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="产品类别:"
prop="goodsType"
>
<el-select
v-model="goodsForm.goodsType"
placeholder="请选择产品类别"
style="width: 60%"
>
<el-option
v-for="item in goodsTypeData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="三方编码:">{{
goodsData.pluId
}}</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="单位转换比:">{{
goodsData.standardUnitRatio
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="单位转换比:"
prop="standardUnitRatio"
>
<el-input
v-model.number="goodsForm.standardUnitRatio"
oninput ="value=value.replace(/[^0-9.]/g,'')"
clearable
placeholder="请输入单位转换比"
style="width: 60%"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="标准托盘件数:">{{
goodsData.palletRatio
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="标准托盘件数:"
prop="palletRatio"
>
<el-input
v-model.number="goodsForm.palletRatio"
oninput ="value=value.replace(/[^0-9.]/g,'')"
clearable
placeholder="请输入标准托盘件数"
style="width: 60%"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="标准产品长(cm):">{{
goodsData.standardLong
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="标准产品长(cm):"
prop="standardLong"
>
<el-input
v-model="goodsForm.standardLong"
oninput ="value=value.replace(/[^0-9.]/g,'')"
clearable
placeholder="请输入标准产品长"
style="width: 60%"
/>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="标准产品宽(cm):">{{
goodsData.standardWide
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="标准产品宽(cm):"
prop="standardWide"
>
<el-input
v-model="goodsForm.standardWide"
oninput ="value=value.replace(/[^0-9.]/g,'')"
clearable
placeholder="请输入标准产品宽"
style="width: 60%"
/>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="标准产品高(cm):">{{
goodsData.standardHigh
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="标准产品高(cm):"
prop="standardHigh"
>
<el-input
v-model="goodsForm.standardHigh"
oninput ="value=value.replace(/[^0-9.]/g,'')"
clearable
placeholder="请输入标准产品高"
style="width: 60%"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准产品体积(cm³):">{{
goodsData.standardVolume
}}</el-form-item>
</el-col>
<el-col :span="6" v-if="!hasEdit">
<el-form-item label="标准产品重量(kg):">{{
goodsData.standardWeight
}}</el-form-item>
</el-col>
<el-col :span="6" v-else>
<el-form-item
label="标准产品重量(kg):"
prop="standardWeight"
>
<el-input
v-model="goodsForm.standardWeight"
oninput ="value=value.replace(/[^0-9.]/g,'')"
clearable
placeholder="请输入标准产品重量"
style="width: 60%"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="bianji" v-show="hasEdit">
<el-button size="mini" type="primary" @click="handelSave"
>保存</el-button
>
<el-button size="mini" @click="hasEdit = false">取消</el-button>
</div>
<div class="title_backg">
<span class="title">SKU详情</span>
</div>
<!-- 表格 -->
<el-row>
<el-col :span="24">
<el-table
ref="dragTable"
border
row-key="Id"
max-height="510"
stripe
:data="list"
:cell-style="$style.cellStyle"
:header-cell-style="$style.rowClass"
>
<el-table-column label="序号" type="index" width="55" />
<!-- <el-table-column
prop="id"
label="SKUID"
align="center"
width="200"
/> -->
<el-table-column prop="id" label="SKU编码" align="center" />
<el-table-column
prop="specStatus"
label="SKU状态"
align="center"
width="80"
>
<template slot-scope="{ row }">
<el-tag v-if="row.specStatus == 0" type="danger">禁用</el-tag>
<el-tag v-else type="success">启用</el-tag>
</template>
</el-table-column>
<el-table-column prop="specKey" label="SKU单位" align="center">
<template slot-scope="scope">
<el-select
v-model="scope.row.specKey"
placeholder="请选择SKU单位"
style="width: 100%"
v-if="!isEditObj[scope.$index].a"
size="small"
>
<el-option
v-for="item in specKeyData"
:key="item.msg"
:label="item.msg"
:value="item.msg"
/>
</el-select>
<span v-else>{{ scope.row.specKey }}</span>
</template>
</el-table-column>
<el-table-column
prop="isBigUnit"
label="是否最小单位"
align="center"
width="120"
>
<template slot-scope="{ row }">
<el-tag v-if="row.isBigUnit == 0" type="success">是</el-tag> </el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column prop="scattered" label="SKU是否整件" align="center">
<template slot-scope="scope">
<el-select
v-model="scope.row.scattered"
style="width: 100%"
v-if="!isEditObj[scope.$index].a"
size="small"
>
<el-option
v-for="item in isWholeData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span v-else>
<el-tag v-if="scope.row.scattered == 1" type="danger"
>否</el-tag
>
<el-tag v-else type="success">是</el-tag>
</span>
</template>
</el-table-column>
<el-table-column prop="specRatio" label="转换比例" align="center" />
<el-table-column prop="barCode" label="产品条码" align="center" width="120px">
<template slot-scope="scope">
<el-input
v-model="scope.row.barCode"
v-if="!isEditObj[scope.$index].a"
clearable
size="small"
></el-input>
<span v-else>{{ scope.row.barCode }}</span>
</template>
</el-table-column>
<el-table-column prop="specName" label="产品规格" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.specName"
v-if="!isEditObj[scope.$index].a"
clearable
size="small"
></el-input>
<span v-else>{{ scope.row.specName }}</span>
</template>
</el-table-column>
<el-table-column prop="goodsLong" label="SKU长(cm)" align="center">
<template slot-scope="scope">
<el-input
v-model.number="scope.row.goodsLong"
v-if="!isEditObj[scope.$index].a"
clearable
oninput ="value=value.replace(/[^0-9.]/g,'')"
size="small"
type="number"
></el-input>
<span v-else>{{ scope.row.goodsLong }}</span>
</template>
</el-table-column>
<el-table-column prop="goodsWide" label="SKU宽(cm)" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.goodsWide"
v-if="!isEditObj[scope.$index].a"
clearable
oninput ="value=value.replace(/[^0-9.]/g,'')"
size="small"
></el-input>
<span v-else>{{ scope.row.goodsWide }}</span>
</template>
</el-table-column>
<el-table-column prop="goodsHigh" label="SKU高(cm)" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.goodsHigh"
v-if="!isEditObj[scope.$index].a"
clearable
oninput ="value=value.replace(/[^0-9.]/g,'')"
size="small"
></el-input>
<span v-else>{{ scope.row.goodsHigh }}</span>
</template>
</el-table-column>
<el-table-column prop="specVolume" label="SKU体积(cm³)" align="center" width="120">
<!-- <template slot-scope="scope">
<el-input
v-model="scope.row.specVolume"
v-if="!isEditObj[scope.$index].a"
clearable
size="small"
type="number"
></el-input>
<span v-else>{{ scope.row.specVolume }}</span>
</template> -->
</el-table-column>
<el-table-column prop="specWeight" label="SKU重量(kg)" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.specWeight"
v-if="!isEditObj[scope.$index].a"
clearable
oninput ="value=value.replace(/[^0-9.]/g,'')"
size="small"
></el-input>
<span v-else>{{ scope.row.specWeight }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="120">
<template slot-scope="scope">
<div v-show="isEditObj[scope.$index].a">
<el-link
type="success"
:underline="false"
@click="editUserInfo(scope.$index)"
>
编辑
</el-link>
<!-- <el-divider direction="vertical"></el-divider> -->
<!-- <el-link
type="danger"
:underline="false"
@click="handleRemove([scope.row.id])"
>
删除
</el-link> -->
</div>
<div v-show="!isEditObj[scope.$index].a">
<el-link
type="primary"
:underline="false"
@click="checkEditUserInfo(scope.$index)"
>
保存
</el-link>
<el-divider direction="vertical"></el-divider>
<el-link
type="primary"
:underline="false"
@click="cancelEditUserInfo(scope.$index)"
>
取消
</el-link>
</div>
</template>
</el-table-column>
</el-table>
<!-- <pagination
v-show="page.total > 0"
:total="page.total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getQueryList"
/> -->
</el-col>
</el-row>
</el-card>
<!-- 边界对话框 -->
<!-- <el-dialog
title="修改SKU"
:visible.sync="popVisible"
:close-on-click-modal="true"
width="46%"
:append-to-body="true"
style="text-align: center"
@close="addDialogClosed"
>
<el-form
:model="detailForm"
ref="detail"
label-width="110px"
size="small"
>
<el-row>
<el-col :span="8">
<el-form-item label="SKU单位:" prop="specKey">
<el-select
v-model="detailForm.specKey"
placeholder="请选择SKU单位"
style="width: 100%"
>
<el-option
v-for="item in categoryDatas"
:key="item.value"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU状态:" prop="specStatus">
<el-select
v-model="detailForm.specStatus"
placeholder="请选择SKU状态"
style="width: 100%"
:disabled="true"
>
<el-option
v-for="item in statusData"
: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="最小单位:" prop="goodsSpecKey">
<el-select
v-model="detailForm.goodsSpecKey"
placeholder="请选择最小单位"
style="width: 100%"
>
<el-option
v-for="item in categoryDatas"
:key="item.value"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="对应ID:" prop="clientType">
<el-select
v-model="detailForm.clientType"
placeholder="请选择对应ID"
style="width: 100%"
>
<el-option
v-for="item in categoryDatas"
:key="item.value"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="转换比例:" prop="specRatio">
<el-input
v-model.trim="detailForm.specRatio"
clearable
placeholder="请输入转换比例"
:disabled="true"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU条码:" prop="barCode">
<el-input
v-model.trim="detailForm.barCode"
clearable
placeholder="请输入SKU条码"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU长:" prop="goodsLong">
<el-input
v-model.trim="detailForm.goodsLong"
clearable
placeholder="请输入SKU长"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU宽:" prop="goodsWide">
<el-input
v-model.trim="detailForm.goodsWide"
clearable
placeholder="请输入SKU宽"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU高:" prop="goodsHigh">
<el-input
v-model.trim="detailForm.goodsHigh"
clearable
placeholder="请输入SKU高"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU体积:" prop="specVolume">
<el-input
v-model.trim="detailForm.specVolume"
clearable
placeholder="请输入SKU体积"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU毛重:" prop="specWeight">
<el-input
v-model.trim="detailForm.specWeight"
clearable
placeholder="请输入SKU毛重"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU净重:" prop="netWeight">
<el-input
v-model.trim="detailForm.netWeight"
clearable
placeholder="请输入SKU净重"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SKU单价:" prop="shopPrice">
<el-input
v-model.trim="detailForm.shopPrice"
clearable
placeholder="请输入SKU单价"
:disabled="true"
type="number"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="存储方式:" prop="storageMode">
<el-select
v-model="detailForm.storageMode"
placeholder="请选择存储方式"
style="width: 100%"
>
<el-option
v-for="item in categoryData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="存储类型:" prop="clientType">
<el-select
v-model="detailForm.clientType"
placeholder="请选择存储类型"
style="width: 100%"
>
<el-option
v-for="item in categoryDatas"
:key="item.value"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否整件:" prop="isWhole">
<el-select
v-model="detailForm.isWhole"
placeholder="请选择是否整件"
style="width: 100%"
>
<el-option
v-for="item in isWholeData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="popVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="submitForm"
>保 存</el-button
>
</span>
</el-dialog> -->
</div>
</template>
<script>
import {
goodsGetById,
batchDelSpec,
updateSpecDetailForWMS,
updateSpecForWms,
selectByIdFeign,
} from "@/http/moudules/basicInformate";
import { mapMutations } from "vuex";
export default {
data() {
return {
hasEdit: false,
loading: false,
list: [],
popVisible: false,
detailForm: {},
goodsForm: {},
goodsData: {},
categoryData: [
{
value: "冷冻",
label: "冷冻",
},
{
value: "保鲜",
label: "保鲜",
},
{
value: "常温",
label: "常温",
},
],
isWholeData: [
{
value: 0,
label: "是",
},
{
value: 1,
label: "否",
},
],
statusData: [
{
value: "0",
label: "禁用",
},
{
value: "1",
label: "启用",
},
],
categoryDatas: [],
goodsTypeData: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
isEditObj: [],
specKeyData: [],
id: null,
};
},
activated() {
this.getQueryList(this.id);
},
mounted() {
this.id = localStorage.getItem("CommodityDetail");
this.getQueryList(this.id);
this.getSKUList();
},
methods: {
...mapMutations("tag", ["REMOVE_TAG"]),
getSKUList() {
selectByIdFeign({ type: "unit" })
.then((res) => {
this.specKeyData = res.data.data;
})
.catch(() => {
this.specKeyData = [];
});
},
f_return() {
const tag = this.$store.state.tag.tags.find(
(val) => val.path === this.$route.path
);
this.REMOVE_TAG(tag);
this.$router.push("/basicInformate/commodity");
},
getQueryList(value) {
this.loading = true;
goodsGetById({ id: value })
.then((res) => {
this.loading = false;
this.goodsData = res.data.data;
this.goodsForm = res.data.data;
this.list = res.data.data.wmsGoodsSpecDTOList;
for (let i in this.list) {
let a = "edit" + i;
this.isEditObj.push({
a: true,
});
}
})
.catch(() => {
this.list = [];
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
handleFilter() {
this.getQueryList(this.id);
},
handelEdit() {
this.hasEdit = true;
},
handelSave() {
this.$refs["goodsDetail"].validate(async (valid) => {
if (valid) {
const data = Object.assign({}, this.goodsForm);
updateSpecForWms(data).then((res) => {
const { code, msg } = res.data;
const title = code === 200 ? "操作成功" : "操作失败";
const type = code === 200 ? "success" : "error";
this.$notification(title, type, msg);
if (code === 200) {
this.hasEdit = false;
this.getQueryList(this.id);
}
});
} else {
this.$message.error("仓库资料校验未通过！");
return false;
}
});
},
editUserInfo(row) {
this.isEditObj[row].a = false;
},
checkEditUserInfo(index) {
const data = Object.assign({}, this.list[index], {
specId: this.list[index].id,
id: this.goodsData.id,
});
updateSpecDetailForWMS(data).then((res) => {
const { code, msg } = res.data;
const title = code === 200 ? "操作成功" : "操作失败";
const type = code === 200 ? "success" : "error";
this.$notification(title, type, msg);
if (code === 200) {
this.isEditObj[index].a = true;
this.getQueryList(this.id);
}
});
},
cancelEditUserInfo(index) {
this.isEditObj[index].a = true;
},
},
};
</script>
<style>
</style>
<style lang="scss" scoped>
.pushButton {
float: right;
display: inline;
margin-right: 20px;
}
.title_backg {
width: 100%;
height: 40px;
line-height: 40px;
text-align: left;
margin-top: 40px;
margin-bottom: 20px;
background: #fafafa;
opacity: 1;
padding-left: 10px;
}
.el-form-item__label {
text-align: right;
vertical-align: middle;
float: left;
height: 19px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 22px;
color: #000000;
opacity: 1;
}
.title {
border-left: 4px solid #409eff;
margin-bottom: 20px;
padding-left: 10px;
height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
line-height: 20px;
color: #000000;
opacity: 0.65;
}
.bianji {
display: flex;
justify-content: flex-end;
margin: 10px;
}
</style>
扫一扫
4102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
