From 67517b477cbb05cd9dbe467b16192d95b9e2695f Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 17 四月 2024 16:50:51 +0800
Subject: [PATCH] 月度统计报表模块 前端开发+列表的接口联调
---
src/views/other/commonDialog/SelectCommonDialog.vue | 212 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 132 insertions(+), 80 deletions(-)
diff --git a/src/views/other/commonDialog/SelectCommonDialog.vue b/src/views/other/commonDialog/SelectCommonDialog.vue
index 2b0b915..2385fe8 100644
--- a/src/views/other/commonDialog/SelectCommonDialog.vue
+++ b/src/views/other/commonDialog/SelectCommonDialog.vue
@@ -1,80 +1,93 @@
<template>
<div class="edit-selClient-box">
<el-dialog
- :title="editCommonConfig.title"
:visible.sync="editConfig.editVisible"
:width="dialogWidth"
:before-close="handleClose"
:append-to-body="true"
:close-on-click-modal="false"
>
+ <div slot="title" class="tac drawerHeader">{{ editCommonConfig.title }}</div>
+
<div class="bg-view">
<div class="query-bg">
- <!-- <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="queryInput" size="mini" class="input-with-select">
- <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨">
- <el-option v-for="item in commonOptions" :key="item.id" :label="item.name" :value="item.name">
- </el-option>
- </el-select>
- </el-input> -->
- <SearchCommonView
- ref="searchCommonView"
- :search-options="searchOptions"
- @searchClick="searchClick"
- @resetClick="resetClick"
- :search-sel="searchSel"
- />
- <div class="btn">
- <!-- <el-button type="primary" size="mini" disabled>璁剧疆瀛楁</el-button>
- <el-button type="primary" size="mini" disabled>蹇�熷垱寤�</el-button> -->
- </div>
+ <el-input
+ v-model="bomParams.keyword"
+ placeholder="鎼滅储浜у搧鍚嶇О锛岀紪鐮佺瓑鍏抽敭璇�"
+ style="width: 60%; margin-right: 10px"
+ ></el-input>
+ <el-button type="primary" @click="searchClick">鏌ヨ</el-button>
</div>
- <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="false" @selCommonClick="selNameClick">
+ <TableCommonView
+ class="bg-list"
+ ref="tableListRef"
+ :loading="loading"
+ :table-list="tableList"
+ :select-box="editCommonConfig.isSelectBox"
+ @selCommonClick="selNameClick"
+ @selTableCol="selTableCol"
+ @getSelectArray="getSelectArray"
+ >
</TableCommonView>
<div slot="footer" class="dialog-footer">
- <div class="remark">璇存槑锛氭敮鎸佸瀛楁妯＄硦鏌ヨ锛屼粎鏄剧ず绗﹀悎鏉′欢鐨勫墠5鏉℃暟鎹�</div>
+ <div class="btn-pager">
+ <PagerView
+ class="page"
+ :pager-options="pagerOptions"
+ :pagerCount="pagerCount"
+ layout="total, sizes, prev, pager, next"
+ v-on="pagerEvents"
+ />
+ </div>
</div>
+ </div>
+ <div slot="footer" class="dialog-footer" v-if="editCommonConfig.isSelectBox">
+ <el-button type="primary" @click="saveClick()">纭畾</el-button>
+ <el-button @click="editConfig.editVisible = false">鍙栨秷</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
-// import { getProductListFromGrpc,getProductList } from "@/api/productManage/product"
+import { getProductList } from "@/api/product/product"
+import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
name: "EditSelCommonDialog",
+ mixins: [pageMixin],
props: {
editCommonConfig: {
type: Object,
default: () => {
return {
editVisible: false,
+ isSelectBox: false,
title: "",
+ clientId: 0,
+ isRequest: true,
+ client_name: "",
tableInfomation: []
}
}
- },
- sign: {
- type: String,
- default: ""
}
},
components: {},
computed: {},
data() {
return {
- dialogWidth: "50%",
+ dialogWidth: "42rem",
+ pagerCount: 5,
editConfig: this.editCommonConfig,
- queryInput: "",
- select: "鍏ㄩ儴瀛楁",
- tableData: [],
- searchSelOptions: [],
loading: false,
tableList: {},
- searchOptions: [],
- search_map: {},
- searchSel: {},
- keyword: "",
- keywordType: ""
+ showcolTop: ["浜у搧瑙勬牸", "浜у搧鍨嬪彿"],
+ selectArray: [],
+ bomParams: {
+ keyword: "",
+ page: 1,
+ pageSize: 10,
+ types: ["鍘熸潗鏂�", "鍗婃垚鍝�", "鎴愬搧"]
+ }
}
},
created() {
@@ -83,22 +96,66 @@
},
methods: {
setTable() {
- if (this.editConfig.title === "浜у搧鍚嶇О") {
- this.tableList = {
- tableInfomation: [],
- tableColumn: [
- { label: "浜у搧鍚嶇О", prop: "name", isClick: true },
- { label: "浜у搧缂栧彿", prop: "number" }
- ]
- }
- this.searchSel = { value: "name", label: "浜у搧鍚嶇О" }
+ this.tableList = {
+ tableInfomation: [],
+ selectIndex: false,
+ selectBox: this.editCommonConfig.isSelectBox,
+ showcol: this.showcolTop,
+ allcol: [],
+ tableColumn: this.setTopTableColumn(this.showcolTop)
}
- this.searchOptions = []
+ let allcol = []
for (let i = 0; i < this.tableList.tableColumn.length; i++) {
- const label = this.tableList.tableColumn[i].label
- const value = this.tableList.tableColumn[i].prop
- this.searchOptions.push({ value: value, label: label })
+ if (!this.tableList.tableColumn[i].default) {
+ const label = this.tableList.tableColumn[i].label
+ allcol.push(label)
+ }
}
+ this.tableList.allcol = allcol
+ },
+ setTopTableColumn(showcol) {
+ let tableColumn = [
+ {
+ label: "浜у搧鍚嶇О",
+ prop: "name",
+ isShowColumn: true,
+ default: true,
+ isClick: true
+ },
+ {
+ label: "浜у搧缂栫爜",
+ prop: "id",
+ min: 110,
+ isShowColumn: true,
+ default: true
+ },
+ {
+ label: "浜у搧瑙勬牸",
+ prop: "specs",
+ isShowColumn: showcol.includes("浜у搧瑙勬牸"),
+ default: false
+ },
+ {
+ label: "浜у搧鍨嬪彿",
+ prop: "type",
+ width: 90,
+ isShowColumn: showcol.includes("浜у搧鍨嬪彿"),
+ default: false
+ }
+ ]
+ return tableColumn
+ },
+ selTableCol(val) {
+ this.showcolTop = val
+ this.tableList.tableColumn = this.setTopTableColumn(val)
+ },
+ // 鍒楄〃澶氶��
+ getSelectArray(val) {
+ this.selectArray = val
+ },
+ saveClick() {
+ this.$emit("getSelectArray", this.selectArray)
+ this.editConfig.editVisible = false
},
// 璇锋眰鏁版嵁
async getData() {
@@ -109,21 +166,15 @@
},
// 浜у搧鍚嶇О
async getProductList() {
- // let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc;
- let fn
- await fn({
- page: 1,
- pageSize: 100
- }).then((res) => {
+ this.bomParams.page = this.pagerOptions.currPage ? this.pagerOptions.currPage : 1
+ this.bomParams.pageSize = this.pagerOptions.pageSize ? this.pagerOptions.pageSize : 15
+ let params = JSON.parse(JSON.stringify(this.bomParams))
+ await getProductList(params).then((res) => {
console.log(res.data)
- if (res.data.code === 200) {
- if (res.data.data.list && res.data.data.list.length > 0) {
- const list = res.data.data.list.map((item) => {
- return {
- ...item
- }
- })
- this.tableList.tableInfomation = list.slice(0, 5) || []
+ if (res.code === 200) {
+ if (res.data) {
+ this.tableList.tableInfomation = res.data || []
+ this.pagerOptions.totalCount = res.total ? res.total : 0
} else {
this.tableList.tableInfomation = []
}
@@ -135,25 +186,22 @@
this.editConfig.editVisible = false
},
selNameClick(row) {
+ if (this.editCommonConfig.isSelectBox) {
+ return true
+ }
this.editConfig.editVisible = false
if (this.editConfig.title === "浜у搧鍚嶇О") {
this.$emit("selClient", row, "productName")
}
},
// 鎼滅储
- searchClick(val, content) {
- console.log(val, content)
- this.search_map = {
- [val.value]: content
- }
- this.keyword = content
- this.keywordType = val.label
+ searchClick() {
+ this.bomParams.page = 1
+ this.total = 0
this.getData()
},
resetClick() {
- this.search_map = {}
this.keyword = ""
- this.keywordType = ""
this.getData()
}
}
@@ -163,18 +211,18 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.bg-view {
- margin: 10px;
+ .bg-list {
+ height: 370px;
+ }
.query-bg {
- margin-left: -20px;
margin-bottom: 10px;
- display: flex;
- justify-content: space-between;
.el-input {
width: 310px;
.el-select {
width: 100px;
}
}
+
.btn {
float: right;
}
@@ -185,13 +233,17 @@
cursor: pointer;
}
.dialog-footer {
- height: 40px;
- line-height: 40px;
- color: red;
+ .btn-pager {
+ display: flex;
+ margin-top: 0px;
+ .page {
+ margin-left: auto;
+ }
+ }
}
::v-deep {
- .input-with-select .el-input-group__prepend {
- background-color: #fff;
+ .el-dialog__body {
+ padding-bottom: 10px !important;
}
}
</style>
--
Gitblit v1.8.0