From 36fb84a1ec003eb97502d8cc6f56bca67e1502a0 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 15 九月 2023 11:25:04 +0800
Subject: [PATCH] 产品出入库明细页面及公共组件优化
---
src/views/productManage/product/index.vue | 2
src/router/product/index.js | 9 +
src/views/reportForm/inboundOutboundDetail/index.vue | 199 +++++++++++++++++++++++++++++++++
src/views/reportForm/index.vue | 21 +++
src/components/makepager/StatusCommonView.vue | 2
src/router/index.js | 2
src/views/productManage/product/AddProductDialog.vue | 100 +++++++---------
7 files changed, 278 insertions(+), 57 deletions(-)
diff --git a/src/components/makepager/StatusCommonView.vue b/src/components/makepager/StatusCommonView.vue
index 2c788d0..d8b23c8 100644
--- a/src/components/makepager/StatusCommonView.vue
+++ b/src/components/makepager/StatusCommonView.vue
@@ -2,7 +2,7 @@
<div class="common-status">
<div v-if="showButton" style="margin-left: 30px">
<el-button plain size="mini" @click="delClick" :disabled="isDelClick">鍒犻櫎</el-button>
- <el-button plain size="mini" style="cursor: no-drop">鎵撳嵃</el-button>
+ <el-button plain size="mini" disabled>鎵撳嵃</el-button>
</div>
<div class="arrowsBox">
<div
diff --git a/src/router/index.js b/src/router/index.js
index a875f2f..b12b86e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -97,7 +97,7 @@
const router = createRouter()
router.afterEach((to, from, next) => {
- if (to.path === "/overview/overviewList" && to.query.name) {
+ if ((to.path === "/overview/overviewList" || to.path === "/reportForm/inOutboundDetail") && to.query.name) {
console.log(from, next)
to.meta.title = to.query.name
document.title = to.meta.title
diff --git a/src/router/product/index.js b/src/router/product/index.js
index e05f5ad..b132e6c 100644
--- a/src/router/product/index.js
+++ b/src/router/product/index.js
@@ -1,6 +1,7 @@
// const type from '@/router/deployCode'
const product = (resolve) => require(["@/views/productManage/product/index"], resolve) // 浜у搧
+const inOutboundDetail = (resolve) => require(["@/views/reportForm/inboundOutboundDetail/index"], resolve) // 鍑哄叆搴撴槑缁�
const appconfig = [
{
@@ -10,6 +11,14 @@
meta: {
title: "浜у搧绠＄悊"
}
+ },
+ {
+ path: "/reportForm/inOutboundDetail",
+ name: "inOutboundDetail",
+ component: inOutboundDetail,
+ meta: {
+ title: "鍑哄叆搴撴槑缁�"
+ }
}
]
diff --git a/src/views/productManage/product/AddProductDialog.vue b/src/views/productManage/product/AddProductDialog.vue
index 022c0c6..7320da8 100644
--- a/src/views/productManage/product/AddProductDialog.vue
+++ b/src/views/productManage/product/AddProductDialog.vue
@@ -32,9 +32,9 @@
style="height: 60vh; overflow-x: hidden"
>
<div class="content-btn">
- <el-button plain size="mini">鏍囩鎵撳嵃</el-button>
- <el-button plain size="mini">鏇存柊鏁伴噺</el-button>
- <el-button plain size="mini">鎵ц琛ヨ揣</el-button>
+ <el-button plain size="mini" disabled>鏍囩鎵撳嵃</el-button>
+ <el-button plain size="mini" disabled>鏇存柊鏁伴噺</el-button>
+ <el-button plain size="mini" disabled>鎵ц琛ヨ揣</el-button>
</div>
<div class="basic-info">
@@ -60,7 +60,7 @@
<div class="right-label">棰勬祴</div>
</div>
</div>
- <div class="sub-number">
+ <div class="sub-number" @click="inOutBoundClick" style="cursor: pointer">
<div class="left icon-view"><i class="el-icon-sort"></i></div>
<div class="right">
<div class="right-label">{{ "杩�: " + 0 }}</div>
@@ -100,7 +100,11 @@
<el-col :span="20">
<div style="margin-left: 20px">浜у搧鍚嶇О</div>
<el-form-item label="" prop="client_name" label-width="20px">
- <el-input v-model="editConfig.infomation.client_name" placeholder=""></el-input>
+ <el-input
+ v-model="editConfig.infomation.client_name"
+ placeholder=""
+ :disabled="!showFooter"
+ ></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
@@ -111,8 +115,8 @@
</el-col>
<el-col :span="24">
<div style="margin-left: 20px; margin-top: -30px">
- <el-checkbox v-model="marketable">鍙攢鍞�</el-checkbox>
- <el-checkbox v-model="procurable">鍙噰璐�</el-checkbox>
+ <el-checkbox v-model="marketable" :disabled="!showFooter">鍙攢鍞�</el-checkbox>
+ <el-checkbox v-model="procurable" :disabled="!showFooter">鍙噰璐�</el-checkbox>
</div>
</el-col>
</el-row>
@@ -320,12 +324,11 @@
<div class="purchase-view">
<div class="left">
<div class="second-label">浣滀笟</div>
- <el-form-item label="璺嚎" prop="client_name" style="margin-left: 20px">
- <el-checkbox-group v-model="editConfig.infomation.type">
- <el-checkbox label="璐濇�濈渚涘簲浜у搧鏉ヨ嚜鍖椾含浠�" name="type"></el-checkbox>
- <el-checkbox label="璐濇�濈-warehouse#6:渚涘簲浜у搧鏉ヨ嚜璐濇�濈123" name="type"></el-checkbox>
- <el-checkbox label="璐濇�濈-warehouse#4:渚涘簲浜у搧鏉ヨ嚜鍖椾含浠�" name="type"></el-checkbox>
- <el-checkbox label="璐濇�濈-warehouse#4:渚涘簲浜у搧鏉ヨ嚜璐濇�濈123" name="type"></el-checkbox>
+ <el-form-item label="璺嚎" prop="checkedCities" style="margin-left: 20px">
+ <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
+ <el-checkbox v-for="city in cities" :label="city" :key="city" class="list-item">{{
+ city.length > 20 ? city.substring(0, 20) + "..." : city
+ }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
@@ -352,7 +355,7 @@
style="width: 85%"
:disabled="!showFooter"
></el-input>
- <span>kg</span>
+ <span> kg</span>
</el-form-item>
<el-form-item label="浣撶Н" prop="client_name" style="margin-left: 20px">
<el-input
@@ -362,7 +365,7 @@
style="width: 85%"
:disabled="!showFooter"
></el-input>
- <span>m鲁</span>
+ <span> m鲁</span>
</el-form-item>
<el-form-item label="瀹㈡埛鍓嶇疆鏃堕棿" prop="client_name" style="margin-left: 20px">
<el-input
@@ -372,7 +375,7 @@
style="width: 85%"
:disabled="!showFooter"
></el-input>
- <span>澶�</span>
+ <span> 澶�</span>
</el-form-item>
<el-form-item label="HS缂栫爜" prop="name" style="margin-left: 20px">
<el-input
@@ -471,7 +474,7 @@
return {
visible: false,
title: "鏂板缓",
- infomation: {}
+ infomation: { type: [] }
}
}
}
@@ -507,7 +510,9 @@
showFooter: false, // 鏄惁鏄剧ず鍙栨秷淇濆瓨
imageSrc: "", // 鍥剧墖鍦板潃
marketable: true, // 鍙攢鍞�
- procurable: true // 鍙噰璐�
+ procurable: true, // 鍙噰璐�
+ checkedCities: ["涓婃捣", "鍖椾含"],
+ cities: ["涓婃捣瀵瑰瀵瑰瀵瑰澶氬澶氬澶氬澶氬寳浜瀵瑰瀵瑰瀵�", "鍖椾含瀵瑰瀵瑰瀵瑰澶�", "骞垮窞", "娣卞湷"]
}
},
created() {
@@ -521,32 +526,10 @@
this.showButton = false
this.showEdit = false
this.showFooter = true
+ } else {
+ this.showEdit = true
+ this.showFooter = false
}
- // } else if (this.editConfig.infomation.status === "瀹屾垚") {
- // this.showButton = true
- // this.showEdit = false
- // this.isDelClick = true
- // this.showFooter = false
- // } else if (this.editConfig.infomation.status === "宸插彇娑�") {
- // this.showButton = true
- // this.showEdit = false
- // this.showFooter = false
- // } else {
- // this.showButton = true
- // this.showEdit = true
- // this.showFooter = false
- // }
- // if (this.editConfig.title === "鏂板缓") {
- // this.list[0].status = "active"
- // } else {
- // this.list.map((item) => {
- // if (item.label === this.editConfig.infomation.status) {
- // item.status = "active"
- // } else {
- // item.status = "todo"
- // }
- // })
- // }
},
// 鍏抽棴
handleClose() {
@@ -621,19 +604,21 @@
},
// 涓婁紶鍥剧墖
toGetImg() {
- if (inputElement === null) {
- // 鐢熸垚鏂囦欢涓婁紶鐨勬帶浠�
- inputElement = document.createElement("input")
- inputElement.setAttribute("type", "file")
- inputElement.style.display = "none"
- if (window.addEventListener) {
- inputElement.addEventListener("change", this.uploadFile, false)
- } else {
- inputElement.attachEvent("onchange", this.uploadFile)
+ if (this.showFooter) {
+ if (inputElement === null) {
+ // 鐢熸垚鏂囦欢涓婁紶鐨勬帶浠�
+ inputElement = document.createElement("input")
+ inputElement.setAttribute("type", "file")
+ inputElement.style.display = "none"
+ if (window.addEventListener) {
+ inputElement.addEventListener("change", this.uploadFile, false)
+ } else {
+ inputElement.attachEvent("onchange", this.uploadFile)
+ }
+ document.body.appendChild(inputElement)
}
- document.body.appendChild(inputElement)
+ inputElement.click()
}
- inputElement.click()
},
uploadFile(el) {
if (el && el.target && el.target.files && el.target.files.length > 0) {
@@ -662,6 +647,10 @@
}
}
}
+ },
+ // 杩涘嚭鐐瑰嚮
+ inOutBoundClick() {
+ this.$router.push({ path: "/reportForm/inOutboundDetail", query: { name: "浜у搧鍚嶇О/鍑哄叆搴撴槑缁�" } })
}
}
}
@@ -757,6 +746,9 @@
border-bottom: 1px solid #d9d9d9;
margin-bottom: 10px;
}
+ .list-item {
+ width: 300px;
+ }
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue
index 113929a..85e9876 100644
--- a/src/views/productManage/product/index.vue
+++ b/src/views/productManage/product/index.vue
@@ -29,7 +29,7 @@
</div>
<!-- 鍥捐〃褰㈠紡 -->
<div v-if="isIconIndex === '1'" class="product-view">
- <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id">
+ <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="tableRowClick(item)">
<div class="left">
<el-image style="width: 60px; height: 80px" :src="url"></el-image>
</div>
diff --git a/src/views/reportForm/inboundOutboundDetail/index.vue b/src/views/reportForm/inboundOutboundDetail/index.vue
new file mode 100644
index 0000000..8ac2cc1
--- /dev/null
+++ b/src/views/reportForm/inboundOutboundDetail/index.vue
@@ -0,0 +1,199 @@
+<template>
+ <div class="rightContent">
+ <div class="top">
+ <SearchCommonView
+ :add-title="'鏂板缓'"
+ :showAdd="false"
+ :placeholder="'璇疯緭鍏ュ弬鑰�'"
+ :amount-view="false"
+ @addCommonClick="addBtnClick"
+ @searchClick="getList"
+ />
+ </div>
+ <div class="list-view">
+ <TableCommonView
+ ref="tableListRef"
+ :table-list="tableList"
+ @selTableCol="selTableCol"
+ @tableRowClick="tableRowClick"
+ ></TableCommonView>
+ <div class="btn-pager">
+ <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import { getProductList } from "@/api/product/product"
+// import DetailProduct from "@/views/productManage/product/DetailProduct"
+
+export default {
+ name: "InboundOutboundDetail",
+ props: {},
+ components: {},
+ mixins: [pageMixin],
+ computed: {},
+ data() {
+ return {
+ tableList: {},
+ showcol: ["鐘舵��"],
+ searchOptions: [],
+ commonDetail: {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {}
+ },
+ editConfig: {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {}
+ }
+ }
+ },
+ created() {
+ this.setTable()
+ this.getData()
+ },
+ methods: {
+ setTable() {
+ this.tableList = {
+ tableInfomation: [],
+ selectBox: 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: "id",
+ isShowColumn: true,
+ default: true
+ },
+ {
+ label: "浜у搧",
+ prop: "id",
+ isShowColumn: true,
+ default: true
+ },
+ {
+ label: "浠�",
+ prop: "deviceName",
+ isShowColumn: true,
+ default: true
+ },
+ {
+ label: "鑷�",
+ prop: "id",
+ isShowColumn: true,
+ default: true
+ },
+ {
+ label: "鍏徃",
+ prop: "shopName",
+ isShowColumn: showcol.includes("鍏徃"),
+ default: false
+ },
+ {
+ label: "鏁伴噺",
+ prop: "deviceId",
+ isShowColumn: true,
+ default: true
+ },
+ {
+ label: "鐘舵��",
+ prop: "status",
+ width: 120,
+ isShowColumn: showcol.includes("鐘舵��"),
+ default: false,
+ status: true
+ },
+ {
+ label: "瀹屾垚鑰�",
+ prop: "preTime",
+ isShowColumn: showcol.includes("瀹屾垚鑰�"),
+ default: false
+ }
+ ]
+ return tableColumn
+ },
+ selTableCol(val) {
+ this.showcol = val
+ this.tableList.tableColumn = this.setTableColumn(val)
+ },
+ // 璇锋眰鏁版嵁
+ async getData(val, content) {
+ await getProductList({
+ [val]: content,
+ page: this.pagerOptions.currPage,
+ pageSize: this.pagerOptions.pageSize
+ }).then((res) => {
+ if (res.data.code === 200) {
+ const list = res.data.data.list.map((item) => {
+ return {
+ ...item,
+ supplierNumber: item.supplier.number,
+ status: "灏辩华",
+ preTime: "2023-09-04 11:20:00"
+ }
+ })
+ this.tableList.tableInfomation = list || []
+ this.pagerOptions.totalCount = res.data.data.total
+ }
+ })
+ },
+ // 鎼滅储
+ getList(val) {
+ console.log(val)
+ },
+ // 琛岀偣鍑�
+ tableRowClick(row) {
+ console.log(row)
+ this.editConfig.visible = true
+ this.editConfig.title = "缂栬緫"
+ this.editConfig.infomation = { ...row }
+ },
+ // 鏂板缓
+ addBtnClick() {
+ this.editConfig.visible = true
+ this.editConfig.title = "鏂板缓"
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+// .rightContent {
+// height: 100%;
+// background: #e6ecf2;
+// padding: 10px;
+// .top {
+// margin-bottom: 20px;
+// height: 60px;
+// background: #fff;
+// border-radius: 8px;
+// }
+// .list-view {
+// height: calc(100% - 120px);
+// }
+// }
+</style>
diff --git a/src/views/reportForm/index.vue b/src/views/reportForm/index.vue
new file mode 100644
index 0000000..adc8766
--- /dev/null
+++ b/src/views/reportForm/index.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="content">
+ <router-view />
+ </div>
+</template>
+
+<script>
+export default {
+ name: "CustomM",
+ props: {}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.content {
+ width: 100%;
+ background-color: #fff;
+ height: calc(100vh - 70px);
+}
+</style>
--
Gitblit v1.8.0