|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div class="contents" v-loading="loadingStatus" :element-loading-text="loadingText" element-loading-background="rgba(0, 0, 0, 0.2)">
|
|
|
+ <div class="rightContent">
|
|
|
+ <el-form ref="form" :model="form" label-width="120px">
|
|
|
+ <LabelTemplate :title="titleList[0]" id="id0" />
|
|
|
+ <div ref="id0">
|
|
|
+ <BasicInformation :form="form"></BasicInformation>
|
|
|
+ </div>
|
|
|
+ <div class="interval">
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <LabelTemplate :title="titleList[1]" id="id1" />
|
|
|
+ <div ref="id1">
|
|
|
+ <ProductMaterial :form="form"></ProductMaterial>
|
|
|
+ </div>
|
|
|
+ <div class="interval">
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <LabelTemplate :title="titleList[2]" id="id2" />
|
|
|
+ <div ref="id2">
|
|
|
+ <ProductionLine :form="form" ref="ProductionLine"></ProductionLine>
|
|
|
+ </div>
|
|
|
+ <div class="interval">
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <LabelTemplate :title="titleList[3]" id="id3" />
|
|
|
+ <div ref="id3">
|
|
|
+ <ProductDescription :form="form"></ProductDescription>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <div style="width: 100%; text-align: center">
|
|
|
+ <el-button @click="clickCancel" v-db-click>关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import { details } from '@/api/product/customProductLibrary'
|
|
|
+import * as API from '@/api/shengde/product/groupSKU'
|
|
|
+import LabelTemplate from '@/components/LabelTemplate'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import BasicInformation from '@/components/ProductDetails/BasicInformation'
|
|
|
+import ProductPrice from '@/components/ProductDetails/ProductPrice'
|
|
|
+import ProductMaterial from '@/components/ProductDetails/ProductMaterial'
|
|
|
+import ProductionLine from '@/components/ProductDetails/ProductionLine'
|
|
|
+import BOMform from '@/components/ProductDetails/BOMform'
|
|
|
+import ProductDescription from '@/components/ProductDetails/ProductDescription'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ProductDetails',
|
|
|
+ components: { LabelTemplate, BasicInformation, ProductPrice, ProductMaterial, ProductionLine, BOMform, ProductDescription },
|
|
|
+ props: {
|
|
|
+ rowData: Object,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filePrefix: process.env.VUE_APP_FILE_PREFIX,
|
|
|
+ loadingStatus: false,
|
|
|
+ loadingText: '',
|
|
|
+ titleList: ['基本信息', '材质特征', '图片介绍'],
|
|
|
+ navGatorIndex: 0,
|
|
|
+ listBoxState: true,
|
|
|
+ scrollBottom: '',
|
|
|
+ form: {
|
|
|
+ id: '',
|
|
|
+ categoryId: '',
|
|
|
+ barCode: '',
|
|
|
+ articleNo: '',
|
|
|
+ code: '',
|
|
|
+ nameChinese: '',
|
|
|
+ price: '',
|
|
|
+ costPrice: '',
|
|
|
+ materialChinese: '',
|
|
|
+ productModelChinese: '',
|
|
|
+ brandName: '',
|
|
|
+ remarks: '',
|
|
|
+ pic: '',
|
|
|
+ colors: [],
|
|
|
+ },
|
|
|
+ att: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('scroll', this.scrollToTop, true)
|
|
|
+ if (this.rowData && this.rowData.id) {
|
|
|
+ this.getProductDetails()
|
|
|
+ }
|
|
|
+ this.titleClick(0)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('scroll', this.scrollToTop, true)
|
|
|
+ },
|
|
|
+ computed: mapGetters(['userInfo']),
|
|
|
+ methods: {
|
|
|
+ titleClick(index) {
|
|
|
+ this.navGatorIndex = index
|
|
|
+ this.$el.querySelector(`#id${index}`).scrollIntoView({
|
|
|
+ behavior: 'smooth', // 平滑过渡
|
|
|
+ block: 'nearest', // 上边框与视窗顶部平齐。默认值
|
|
|
+ })
|
|
|
+ this.listBoxState = false
|
|
|
+ let timeId
|
|
|
+ clearTimeout(timeId)
|
|
|
+ timeId = setTimeout(() => {
|
|
|
+ this.listBoxState = true
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ // 监听页面元素滚动，改变导航栏选中
|
|
|
+ scrollToTop() {
|
|
|
+ if (this.listBoxState) {
|
|
|
+ for (let i = 0; i < this.titleList.length; i++) {
|
|
|
+ if (this.$refs['id' + i].getBoundingClientRect().top >= 0) {
|
|
|
+ if (this.scrollBottom === 0) {
|
|
|
+ this.navGatorIndex = this.titleList.length - 1
|
|
|
+ } else {
|
|
|
+ this.navGatorIndex = i
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getScroll(event) {
|
|
|
+ // 滚动条距离底部的距离
|
|
|
+ this.scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight
|
|
|
+ },
|
|
|
+ getProductDetails() {
|
|
|
+ this.loadingText = '获取数据中,请稍后!'
|
|
|
+ this.loadingStatus = true
|
|
|
+ API.groupProductDetail({ id: this.rowData.id, subsidiaryId: this.rowData.subsidiaryId }).then(
|
|
|
+ (res) => {
|
|
|
+ for (let i = 0; i < res.data.data.colors.length; i++) {
|
|
|
+ res.data.data.colors[i].loading = false
|
|
|
+ res.data.data.colors[i].loading1 = false
|
|
|
+ }
|
|
|
+ if (res.data.data.colors && res.data.data.colors.length > 0) {
|
|
|
+ res.data.data.colors = res.data.data.colors.map((item) => {
|
|
|
+ item.nameChinese = item.nameChinese.replace(res.data.data.nameChinese + ' ： ', '')
|
|
|
+ item.nameChinese = item.nameChinese.replace(res.data.data.nameChinese + '：', '')
|
|
|
+ if (!(item.mountingsList && item.mountingsList.length > 0)) {
|
|
|
+ item.mountingsList = []
|
|
|
+ }
|
|
|
+ if (!(item.exPackList && item.exPackList.length > 0)) {
|
|
|
+ item.exPackList = []
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.form = res.data.data
|
|
|
+ if (this.form.productionLineId) {
|
|
|
+ this.$refs.ProductionLine.handleChange(this.form.productionLineId)
|
|
|
+ }
|
|
|
+ this.loadingStatus = false
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.loadingStatus = false
|
|
|
+ console.log('groupProductDetail: ' + err)
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ clickCancel() {
|
|
|
+ this.$emit('clickCancel', false)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box-card {
|
|
|
+ max-height: calc(100vh - 30px - 60px - 20px);
|
|
|
+}
|
|
|
+/deep/ .el-card__body {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+// *::-webkit-scrollbar {
|
|
|
+// /*滚动条整体样式*/
|
|
|
+// width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+// height: 0px;
|
|
|
+// }
|
|
|
+*::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #b4bbc5;
|
|
|
+}
|
|
|
+*::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.isActive {
|
|
|
+ color: #016fd4;
|
|
|
+}
|
|
|
+.contents {
|
|
|
+ max-height: calc(100vh - 30px - 60px - 20px);
|
|
|
+ // width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 0;
|
|
|
+ background-color: white;
|
|
|
+ box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0) var(--devui-shadow, rgba(0, 0, 0, 0.08));
|
|
|
+ scrollbar-width: none;
|
|
|
+}
|
|
|
+.leftContent {
|
|
|
+ width: 12%;
|
|
|
+ text-align: center;
|
|
|
+ background-color: white;
|
|
|
+ box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0) var(--devui-shadow, rgba(0, 0, 0, 0.08));
|
|
|
+ scrollbar-width: none;
|
|
|
+}
|
|
|
+.rowContent {
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ margin-left: 15px;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.rightContent {
|
|
|
+ max-height: calc(100vh - 30px - 60px - 20px);
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ background-color: white;
|
|
|
+ box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0) var(--devui-shadow, rgba(0, 0, 0, 0.08));
|
|
|
+ scrollbar-width: none;
|
|
|
+}
|
|
|
+.circle {
|
|
|
+ margin: 0 5px;
|
|
|
+ height: 13px;
|
|
|
+ width: 13px;
|
|
|
+ background: #016fd4;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+.circle2 {
|
|
|
+ margin: 0 5px;
|
|
|
+ height: 13px;
|
|
|
+ width: 13px;
|
|
|
+ background: #d4d2d2;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+.interval {
|
|
|
+ padding: 20px 0;
|
|
|
+ div {
|
|
|
+ height: 12px;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 40px 0) var(--devui-shadow, rgba(0, 0, 0, 0.08));
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
