From 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期二, 06 八月 2024 11:16:58 +0800
Subject: [PATCH] gitlab上面的wms转移到公司git
---
src/views/productManage/product/index.vue | 767 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 412 insertions(+), 355 deletions(-)
diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue
index c6919d0..f5b5f4b 100644
--- a/src/views/productManage/product/index.vue
+++ b/src/views/productManage/product/index.vue
@@ -1,46 +1,29 @@
<template>
<div class="rightContent">
<div class="top">
- <SearchCommonView
- :add-title="'鏂板缓'"
- :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�'"
- :amount-view="false"
- :search-task-map="searchTaskMap"
- @addCommonClick="addBtnClick"
- @searchClick="searchClick"
- @delSelectClick="delSelectClick"
- />
+ <SearchCommonView :add-title="'鏂板缓'" :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�'" :amount-view="false" :search-task-map="searchTaskMap" @addCommonClick="addBtnClick" @searchClick="searchClick" @delSelectClick="delSelectClick">
+ <template slot="leftButton">
+ <el-upload class="upload-demo" action="/api-wms/v1/product/inputProduct" :headers="{ Authorization: 'Bearer ' + token }" accept=".xls,.xlsx" :on-success="onSuccess" :on-error="onError" :limit="1" :show-file-list="false">
+ <el-button size="small" type="primary" style="margin-left: 10px">瀵煎叆</el-button>
+ </el-upload>
+ </template>
+ <template slot="leftButton">
+ <el-button size="small" type="text" style="margin-left: 10px" @click="downloadInputFormatCilck">妯℃澘涓嬭浇</el-button>
+ </template>
+ </SearchCommonView>
</div>
<div class="list-view">
<div class="icon-switch">
<div class="icon-view">
- <span
- class="icon-label"
- @click="selIconSwitchClick('2')"
- :class="{ whiteBackgroud: isIconIndex === '1', blueBackgroud: isIconIndex === '2' }"
- style="margin-left: 5px"
- ><i class="el-icon-s-unfold"></i
- ></span>
- <span
- class="icon-label"
- @click="selIconSwitchClick('1')"
- :class="{ blueBackgroud: isIconIndex === '1', whiteBackgroud: isIconIndex === '2' }"
- ><i class="el-icon-menu"></i
- ></span>
+ <span class="icon-label" @click="selIconSwitchClick('2')" :class="{ whiteBackgroud: isIconIndex === '1', blueBackgroud: isIconIndex === '2' }" style="margin-left: 5px"><i class="el-icon-s-unfold"></i></span>
+ <span class="icon-label" @click="selIconSwitchClick('1')" :class="{ blueBackgroud: isIconIndex === '1', whiteBackgroud: isIconIndex === '2' }"><i class="el-icon-menu"></i></span>
</div>
</div>
<!-- 鍥捐〃褰㈠紡 -->
<div v-if="isIconIndex === '1'" class="product-view">
<div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="showDetail(item)">
<div class="left">
- <el-image
- v-if="item.attachmentList?.length > 0"
- style="width: 60px; height: 80px"
- :src="item.attachmentList[0].FileUrl"
- :preview-src-list="item.srcList"
- :z-index="9999"
- @click.stop="imgClick"
- ></el-image>
+ <el-image v-if="item.attachmentList?.length > 0" style="width: 60px; height: 80px" :src="item.attachmentList[0].FileUrl" :preview-src-list="item.srcList" :z-index="9999" @click.stop="imgClick"></el-image>
<div v-else class="img-view">
<i class="el-icon-picture-outline"></i>
</div>
@@ -65,13 +48,16 @@
<div v-if="isIconIndex === '2'" class="product-list">
<TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
<template slot="tableButton">
- <el-table-column label="鎿嶄綔" width="90" align="center">
+ <el-table-column label="鎿嶄綔" width="140" align="center">
<template slot-scope="scope">
<span @click.stop="showDetail(scope.row)" class="cursor_pointer" style="margin-right: 10px">
<span style="color: #2a78fb">鏌ョ湅</span>
</span>
<span @click.stop="editRow(scope.row)" class="cursor_pointer">
<span style="color: #2a78fb">缂栬緫</span>
+ </span>
+ <span @click.stop="deleteRow(scope.row)" class="cursor_pointer">
+ <span style="color: #2a78fb; margin-left: 10px">鍒犻櫎</span>
</span>
</template>
</el-table-column>
@@ -83,354 +69,425 @@
</div>
</div>
<!-- 鏂板缓/缂栬緫 -->
- <AddProductDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+ <AddProductDialog ref="addProductRef" v-if="editConfig.visible" :edit-common-config="editConfig" />
</div>
</template>
<script>
-import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
-import { getProductList } from "@/api/product/product"
-// import DetailProduct from "@/views/productManage/product/DetailProduct"
-import AddProductDialog from "@/views/productManage/product/AddProductDialog"
-
-export default {
- name: "PruductManage",
- props: {},
- components: { AddProductDialog },
- mixins: [pageMixin],
- computed: {},
- data() {
- return {
- tableList: {},
- showcol: ["鍐呴儴缂栫爜",'浜у搧瑙勬牸', "璐熻矗浜�", "浜у搧鏍囩", "鎴愭湰", "鍦ㄥ簱鏁伴噺", "棰勬祴鏁伴噺", "璁￠噺鍗曚綅"],
- searchOptions: [],
- commonDetail: {
- visible: false,
- title: "鏂板缓",
- infomation: {}
- },
- editConfig: {
- visible: false,
- title: "鏂板缓",
- infomation: {},
- autoEdit: false
- },
- isIconIndex: "2", // 1 鍥炬爣 2 鍒楄〃
- url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
- pageSizes: [15, 30],
- keyWord: "",
- categoryId: null,
- searchTaskMap: []
- }
- },
- created() {
- this.setTable()
- let query = this.$route.query
- if (query) {
- console.log("ssssss")
- this.categoryId = query.id ? Number(query.id) : null
- this.pagerOptions.currPage = 1
- this.searchTaskMap = query.id ? [{ categoryId: this.categoryId, title: query.categoryName }] : []
- }
- this.getData()
- },
- methods: {
- setTable() {
- if (this.isIconIndex === "1") {
- this.pageSizes = [30, 60]
- this.pagerOptions.pageSize = 30
+ import pageMixin from '@/components/makepager/pager/mixin/pageMixin'
+ import { getProductList, deleteProduct, downloadInputFormat } from '@/api/product/product'
+ // import DetailProduct from "@/views/productManage/product/DetailProduct"
+ import AddProductDialog from '@/views/productManage/product/AddProductDialog'
+ import { queryAttributeApi } from '@/api/product/attributeManage.js'
+ import Cookies from 'js-cookie'
+ import FileSaver from 'file-saver';
+ import _ from 'lodash'
+ export default {
+ attributeList: [],
+ name: 'PruductManage',
+ props: {},
+ components: { AddProductDialog },
+ mixins: [pageMixin],
+ computed: {},
+ data() {
+ return {
+ token: Cookies.get('token'),
+ tableList: {},
+ showcol: ['鍐呴儴缂栫爜', '浜у搧瑙勬牸', '璐熻矗浜�', '浜у搧鏍囩', '鎴愭湰', '鍦ㄥ簱鏁伴噺', '棰勬祴鏁伴噺', '璁￠噺鍗曚綅'],
+ searchOptions: [],
+ commonDetail: {
+ visible: false,
+ title: '鏂板缓',
+ infomation: {},
+ },
+ editConfig: {
+ visible: false,
+ title: '鏂板缓',
+ infomation: {},
+ autoEdit: false,
+ attributeList: [],
+ },
+ isIconIndex: '2', // 1 鍥炬爣 2 鍒楄〃
+ url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+ pageSizes: [15, 30],
+ keyWord: '',
+ categoryId: null,
+ searchTaskMap: [],
}
- this.tableList = {
- tableInfomation: [],
- selectBox: false,
- selectIndex: true,
- showcol: this.showcol,
- allcol: [],
- tableColumn: this.setTableColumn(this.showcol)
+ },
+ created() {
+ this.setTable()
+ let query = this.$route.query
+ if (query) {
+ //console.log("ssssss")
+ this.categoryId = query.id ? Number(query.id) : null
+ this.pagerOptions.currPage = 1
+ this.searchTaskMap = query.id ? [{ categoryId: this.categoryId, title: query.categoryName }] : []
}
- let allcol = []
- for (let i = 0; i < this.tableList.tableColumn.length; i++) {
- if (!this.tableList.tableColumn[i].default) {
- const label = this.tableList.tableColumn[i].label
- allcol.push(label)
+ this.getData()
+ this.queryAttribute()
+ },
+ methods: {
+ async queryAttribute() {
+ const params = {
+ page: 0,
+ pageSize: 0,
+ entityType: 1,
}
- }
- this.tableList.allcol = allcol
- },
- setTableColumn(showcol) {
- let tableColumn = [
- {
- label: "浜у搧缂栫爜",
- prop: "id",
- isShowColumn: true,
- default: true
- },
- {
- label: "浜у搧鍚嶇О",
- prop: "name",
- isShowColumn: true,
- default: true
- },
- {
- label: "浜у搧瑙勬牸",
- prop: "specs",
- isShowColumn: showcol.includes("浜у搧瑙勬牸"),
- default: false
- },
- {
- label: "鍐呴儴缂栫爜",
- prop: "internalReference",
- isShowColumn: showcol.includes("鍐呴儴缂栫爜"),
- default: false
- },
- {
- label: "璐熻矗浜�",
- prop: "principal",
- isShowColumn: true,
- default: true
- },
- {
- label: "浜у搧鏍囩",
- prop: "productTagName",
- isShowColumn: showcol.includes("浜у搧鏍囩"),
- default: false
- },
- {
- label: "鏉＄爜",
- prop: "barcode",
- isShowColumn: showcol.includes("鏉＄爜"),
- default: false
- },
- {
- label: "閿�鍞环鏍�",
- prop: "salePrice",
- isShowColumn: showcol.includes("閿�鍞环鏍�"),
- default: false
- },
- {
- label: "鎴愭湰",
- prop: "cost",
- isShowColumn: showcol.includes("鎴愭湰"),
- default: false
- },
- {
- label: "浜у搧绫诲埆",
- prop: "categoryName",
- isShowColumn: showcol.includes("浜у搧绫诲埆"),
- default: false
- },
- {
- label: "浜у搧绫诲瀷",
- prop: "model",
- isShowColumn: showcol.includes("浜у搧绫诲瀷"),
- default: false
- },
- {
- label: "鍦ㄥ簱鏁伴噺",
- prop: "amount",
- isShowColumn: showcol.includes("鍦ㄥ簱鏁伴噺"),
- default: false
- },
- // {
- // label: "棰勬祴鏁伴噺",
- // prop: "status",
- // isShowColumn: showcol.includes("棰勬祴鏁伴噺"),
- // default: false,
- // status: true
- // },
- {
- label: "璁￠噺鍗曚綅",
- prop: "unit",
- isShowColumn: showcol.includes("璁￠噺鍗曚綅"),
- default: false
+ const { code, data } = await queryAttributeApi(params)
+ if (code == 200) {
+ this.attributeList = data
}
- ]
- return tableColumn
- },
- selTableCol(val) {
- this.showcol = val
- this.tableList.tableColumn = this.setTableColumn(val)
- },
- // 璇锋眰鏁版嵁
- async getData() {
- await getProductList({
- keyWord: this.keyWord,
- categoryId: this.categoryId ? this.categoryId : null,
- page: this.pagerOptions.currPage,
- pageSize: this.pagerOptions.pageSize
- }).then((res) => {
- if (res.code === 200) {
- const list = res.data.map((item) => {
- let srcList = []
- if (item.attachmentList?.length > 0) {
- item.attachmentList.forEach((ele) => {
- if (ele.fileType === "picture") {
- srcList.push(ele.FileUrl)
- }
- })
- } else {
- srcList = []
- }
+ },
+ setTable() {
+ if (this.isIconIndex === '1') {
+ this.pageSizes = [30, 60]
+ this.pagerOptions.pageSize = 30
+ }
+ this.tableList = {
+ tableInfomation: [],
+ selectBox: false,
+ selectIndex: true,
+ showcol: this.showcol,
+ allcol: [],
+ tableColumn: this.setTableColumn(this.showcol),
+ }
+ let allcol = []
+ for (let i = 0; i < this.tableList.tableColumn.length; i++) {
+ if (!this.tableList.tableColumn[i].default) {
+ const label = this.tableList.tableColumn[i].label
+ allcol.push(label)
+ }
+ }
+ this.tableList.allcol = allcol
+ },
+ setTableColumn(showcol) {
+ let tableColumn = [
+ {
+ label: '浜у搧缂栫爜',
+ prop: 'id',
+ isShowColumn: true,
+ default: true,
+ },
+ {
+ label: '浜у搧鍚嶇О',
+ prop: 'name',
+ isShowColumn: true,
+ default: true,
+ },
+ {
+ label: '浜у搧瑙勬牸',
+ prop: 'specs',
+ isShowColumn: showcol.includes('浜у搧瑙勬牸'),
+ default: false,
+ },
+ {
+ label: '鍐呴儴缂栫爜',
+ prop: 'internalReference',
+ isShowColumn: showcol.includes('鍐呴儴缂栫爜'),
+ default: false,
+ },
+ {
+ label: '璐熻矗浜�',
+ prop: 'principal',
+ isShowColumn: true,
+ default: true,
+ },
+ {
+ label: '浜у搧鏍囩',
+ prop: 'productTagName',
+ isShowColumn: showcol.includes('浜у搧鏍囩'),
+ default: false,
+ },
+ {
+ label: '鏉＄爜',
+ prop: 'barcode',
+ isShowColumn: showcol.includes('鏉＄爜'),
+ default: false,
+ },
+ {
+ label: '閿�鍞环鏍�',
+ prop: 'salePrice',
+ isShowColumn: showcol.includes('閿�鍞环鏍�'),
+ default: false,
+ },
+ {
+ label: '鎴愭湰',
+ prop: 'cost',
+ isShowColumn: showcol.includes('鎴愭湰'),
+ default: false,
+ },
+ {
+ label: '浜у搧绫诲埆',
+ prop: 'categoryName',
+ isShowColumn: showcol.includes('浜у搧绫诲埆'),
+ default: false,
+ },
+ {
+ label: '浜у搧绫诲瀷',
+ prop: 'model',
+ isShowColumn: showcol.includes('浜у搧绫诲瀷'),
+ default: false,
+ },
+ {
+ label: '鍦ㄥ簱鏁伴噺',
+ prop: 'amount',
+ isShowColumn: showcol.includes('鍦ㄥ簱鏁伴噺'),
+ default: false,
+ },
+ // {
+ // label: "棰勬祴鏁伴噺",
+ // prop: "status",
+ // isShowColumn: showcol.includes("棰勬祴鏁伴噺"),
+ // default: false,
+ // status: true
+ // },
+ {
+ label: '璁￠噺鍗曚綅',
+ prop: 'unit',
+ isShowColumn: showcol.includes('璁￠噺鍗曚綅'),
+ default: false,
+ },
+ ]
+ return tableColumn
+ },
+ selTableCol(val) {
+ this.showcol = val
+ this.tableList.tableColumn = this.setTableColumn(val)
+ },
+ // 璇锋眰鏁版嵁
+ async getData() {
+ await getProductList({
+ keyWord: this.keyWord,
+ categoryId: this.categoryId ? this.categoryId : null,
+ page: this.pagerOptions.currPage,
+ pageSize: this.pagerOptions.pageSize,
+ }).then((res) => {
+ if (res.code === 200) {
+ const list = res.data.map((item) => {
+ let srcList = []
+ if (item.attachmentList?.length > 0) {
+ item.attachmentList.forEach((ele) => {
+ if (ele.fileType === 'picture') {
+ srcList.push(ele.FileUrl)
+ }
+ })
+ } else {
+ srcList = []
+ }
- return {
- ...item,
- srcList
- }
+ return {
+ ...item,
+ srcList,
+ }
+ })
+ this.tableList.tableInfomation = list || []
+ this.pagerOptions.totalCount = res.total
+ }
+ })
+ },
+ // 鎼滅储
+ searchClick(val) {
+ console.log(val)
+ this.keyWord = val
+ this.pagerOptions.currPage = 1
+ this.getData()
+ },
+ // 鏂板缓
+ addBtnClick() {
+ this.editConfig.title = '鏂板缓'
+ this.editConfig.infomation = {
+ purchaseTypeList: [],
+ }
+ this.editConfig.visible = true
+ this.editConfig.attributeList = JSON.parse(JSON.stringify(this.attributeList))
+ },
+ // 璇︽儏
+ showDetail(row) {
+ console.log(row)
+ this.editConfig.autoEdit = false
+ this.editConfig.title = '鏌ョ湅'
+ let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ''
+ this.editConfig.infomation = { ...row, imageSrc: imageSrc }
+ this.editConfig.visible = true
+ this.editConfig.attributeList = row.attributes || []
+ },
+ // 缂栬緫
+ editRow(row) {
+ this.editConfig.autoEdit = true
+ this.editConfig.title = '缂栬緫'
+ let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ''
+ this.editConfig.infomation = { ...row, imageSrc: imageSrc, moreUnitList: row.moreUnitList ? row.moreUnitList : [] }
+ this.editConfig.visible = true
+ this.editConfig.attributeList = row.attributes || []
+ },
+ // 鍒囨崲鍒楄〃灞曠幇褰㈠紡
+ selIconSwitchClick(value) {
+ this.pagerOptions.currPage = 1
+ this.isIconIndex = value
+ if (value === '1') {
+ this.pageSizes = [30, 60]
+ this.pagerOptions.pageSize = 30
+ } else {
+ this.pageSizes = [15, 30]
+ this.pagerOptions.pageSize = 15
+ }
+ this.getData()
+ },
+ // 鍒犻櫎浜у搧绫诲瀷
+ delSelectClick() {
+ this.categoryId = 0
+ this.getData()
+ },
+ imgClick() {},
+
+ //鍒犻櫎
+ deleteRow(row) {
+ this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヤ骇鍝�, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ })
+ .then(() => {
+ deleteProduct({
+ id: row.id,
+ }).then((res) => {
+ if (res.code == 200) {
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!',
+ })
+ this.getData()
+ } else {
+ this.$message.error('鍒犻櫎鏃跺嚭閿欙紝璇风◢鍚庨噸璇曟垨鑱旂郴绠＄悊鍛�...')
+ }
+ })
})
- this.tableList.tableInfomation = list || []
- this.pagerOptions.totalCount = res.total
+ .catch(() => {})
+ },
+
+ onSuccess(res, file, fileList) {
+ if (res.code == 200) {
+ this.$message({
+ type: 'success',
+ message: '瀵煎叆鎴愬姛!',
+ })
+ this.getData()
+ } else {
+ this.$message.error(res.msg)
}
- })
+ },
+ onError(err, file, fileList) {
+ this.$message.error('瀵煎叆鏃跺嚭閿欙紝璇风◢鍚庨噸璇曟垨鑱旂郴绠＄悊鍛�...')
+ },
+ downloadInputFormatCilck: _.debounce(function () {
+ downloadInputFormat({
+ }).then((res) => {
+ if (res) {
+ console.log(res);
+ FileSaver.saveAs(res, '浜у搧瀵煎叆妯℃澘.xlsx');
+ this.$message.success('涓嬭浇鎴愬姛锛�')
+ }
+ })
+ }, 1000),
},
- // 鎼滅储
- searchClick(val) {
- console.log(val)
- this.keyWord = val
- this.pagerOptions.currPage = 1
- this.getData()
- },
- // 鏂板缓
- addBtnClick() {
- this.editConfig.title = "鏂板缓"
- this.editConfig.infomation = {
- purchaseTypeList:[]
- }
- this.editConfig.visible = true
- },
- // 璇︽儏
- showDetail(row) {
- console.log(row)
- this.editConfig.autoEdit = false
- this.editConfig.title = "缂栬緫"
- let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
- this.editConfig.infomation = { ...row, imageSrc: imageSrc }
- this.editConfig.visible = true
- },
- // 缂栬緫
- editRow(row) {
- this.editConfig.autoEdit = true
- this.editConfig.title = "缂栬緫"
- let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
- this.editConfig.infomation = { ...row, imageSrc: imageSrc,moreUnitList:row.moreUnitList?row.moreUnitList:[] }
- this.editConfig.visible = true
- },
- // 鍒囨崲鍒楄〃灞曠幇褰㈠紡
- selIconSwitchClick(value) {
- this.pagerOptions.currPage = 1
- this.isIconIndex = value
- if (value === "1") {
- this.pageSizes = [30, 60]
- this.pagerOptions.pageSize = 30
- } else {
- this.pageSizes = [15, 30]
- this.pagerOptions.pageSize = 15
- }
- this.getData()
- },
- // 鍒犻櫎浜у搧绫诲瀷
- delSelectClick() {
- this.categoryId = 0
- this.getData()
- },
- imgClick() {}
}
-}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
-.icon-switch {
- height: 15px;
- position: relative;
- .icon-view {
- position: absolute;
- top: -6px;
- right: 20px;
- .icon-label {
- padding: 0px 30px;
- // background: #ffffff;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- cursor: pointer;
- box-shadow: inset 0 0 1px #dee2e6;
- -moz-box-shadow: inset 0 0 1px #dee2e6;
- -webkit-box-shadow: inset 0 0 1px #dee2e6;
- }
- .blueBackgroud {
- color: #fff;
- background: #2a78fb;
- }
- .whiteBackgroud {
- color: #2a78fb;
- background: #fff;
+ .icon-switch {
+ height: 15px;
+ position: relative;
+ .icon-view {
+ position: absolute;
+ top: -6px;
+ right: 20px;
+ .icon-label {
+ padding: 0px 30px;
+ // background: #ffffff;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ cursor: pointer;
+ box-shadow: inset 0 0 1px #dee2e6;
+ -moz-box-shadow: inset 0 0 1px #dee2e6;
+ -webkit-box-shadow: inset 0 0 1px #dee2e6;
+ }
+ .blueBackgroud {
+ color: #fff;
+ background: #2a78fb;
+ }
+ .whiteBackgroud {
+ color: #2a78fb;
+ background: #fff;
+ }
}
}
-}
-.product-view {
- padding: 20px 0 0px 20px;
- height: calc(100% - 85px);
- overflow: auto;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-content: flex-start;
- .product-box {
- width: 294px;
- height: 94px;
- margin-bottom: 10px;
- margin-right: 20px;
- border: 1px solid #dee2e6;
- box-shadow: inset 0 0 2px #dee2e6;
- -moz-box-shadow: inset 0 0 2px #dee2e6;
- -webkit-box-shadow: inset 0 0 2px #dee2e6;
- padding: 8px;
+ .product-view {
+ padding: 20px 0 0px 20px;
+ height: calc(100% - 85px);
+ overflow: auto;
display: flex;
- align-items: center;
- cursor: pointer;
- .left {
- width: 60px;
- text-align: center;
- .img-view {
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-content: flex-start;
+ .product-box {
+ width: 294px;
+ height: 94px;
+ margin-bottom: 10px;
+ margin-right: 20px;
+ border: 1px solid #dee2e6;
+ box-shadow: inset 0 0 2px #dee2e6;
+ -moz-box-shadow: inset 0 0 2px #dee2e6;
+ -webkit-box-shadow: inset 0 0 2px #dee2e6;
+ padding: 8px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ .left {
width: 60px;
- height: 80px;
- line-height: 80px;
- border: 1px solid #dee2e6;
- font-size: 22px;
- color: #b8babb;
+ text-align: center;
+ .img-view {
+ width: 60px;
+ height: 80px;
+ line-height: 80px;
+ border: 1px solid #dee2e6;
+ font-size: 22px;
+ color: #b8babb;
+ }
}
- }
- .right {
- flex: 1;
- font-size: 13px;
- margin-left: 10px;
- .label {
- // max-height: 30px;
- color: #212529;
- // margin-top: -5px;
- margin-right: 15px;
- word-break: break-all;
- word-wrap: break-word;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .price,
- .library {
- color: #495057;
- margin-top: 10px;
+ .right {
+ flex: 1;
+ font-size: 13px;
+ margin-left: 10px;
+ .label {
+ // max-height: 30px;
+ color: #212529;
+ // margin-top: -5px;
+ margin-right: 15px;
+ word-break: break-all;
+ word-wrap: break-word;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .price,
+ .library {
+ color: #495057;
+ margin-top: 10px;
+ }
}
}
}
-}
-.product-list {
- height: calc(100% - 70px);
-}
-::v-deep {
- .el-table {
- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
+ .product-list {
+ height: calc(100% - 70px);
}
-}
+ ::v-deep {
+ .el-table {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ }
+ }
</style>
--
Gitblit v1.8.0