From c32014d250f304a810f39206ad4e2423ecf0fb6a Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期四, 07 三月 2024 18:27:06 +0800 Subject: [PATCH] 产量报表列表页和应该工资报表页部分功能页面开发 --- src/components/makepager/TableCommonView.vue | 84 ++++++----- src/views/reportManage/productionReport/index.vue | 121 ++++++++++++++++ src/views/productManage/productRegisterForm/components/addProductDialog.vue | 12 + src/views/reportManage/payableSalaryReport/index.vue | 145 +++++++++++++++++++ src/views/productManage/productRegisterForm/addProductRegisterPage.vue | 2 5 files changed, 309 insertions(+), 55 deletions(-) diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue index 2a0e649..01b1554 100644 --- a/src/components/makepager/TableCommonView.vue +++ b/src/components/makepager/TableCommonView.vue @@ -2,7 +2,7 @@ <div class="table-view"> <el-table ref="table" - :class="tableList.headerColor=='red'?'table-red':''" + :class="tableList.headerColor == 'red' ? 'table-red' : ''" border :data="tableList.tableInfomation" tooltip-effect="dark" @@ -12,7 +12,7 @@ :lazy="tableList.lazy" size="mini" @selection-change="handleSelectionChange" - :header-cell-style="{ background: '#f1f3f8', color: '#000009' , 'font-size': '14px'}" + :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }" :highlight-current-row="tableList.highlight" :row-class-name="tableRowClassName" @row-click="tableRowClick" @@ -21,7 +21,15 @@ :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" > <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column> - <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column> + <el-table-column + align="center" + v-if="tableList.selectIndex" + type="index" + label="搴忓彿" + width="50" + :fixed="tableList.fixed" + > + </el-table-column> <template v-for="(item, i) in tableList.tableColumn"> <el-table-column align="center" @@ -33,24 +41,28 @@ show-overflow-tooltip :sortable="item.sortable" v-if="item.isShowColumn" + :fixed="item.fixed" > <template slot-scope="scope"> <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div> <span v-else-if="item.isTime">{{ - dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26" - ? "--" - : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) - }}</span> - <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{ - scope.row[item.prop] - }}</span> + dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26" + ? "--" + : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) + }}</span> + <span + v-else-if="item.isClick && scope.row[item.prop]" + class="sel-name" + @click="selCommonClick(scope.row)" + >{{ scope.row[item.prop] }}</span + > <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "鏄�" : "鍚�" }}</span> <span - v-else-if="item.isCommonClick && scope.row[item.prop]" - class="sel-name" - @click="selCommonClick(scope.row)" - >{{ scope.row[item.prop] }}</span + v-else-if="item.isCommonClick && scope.row[item.prop]" + class="sel-name" + @click="selCommonClick(scope.row)" + >{{ scope.row[item.prop] }}</span > <div v-else-if="item.isProductName" class="product-view"> <ul v-if="scope.row.products && scope.row.products.length > 0"> @@ -103,16 +115,9 @@ </el-table> <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div> <div class="styleBtn"> - <i @click="checkCol()" v-if="colOpenShow" class="label">...</i> - <el-checkbox-group - v-model="showcol" - v-show="iscolopen" - class="checkbox-group" - @change="selectCheckBoxList" - > - <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item" - >{{ item }} - </el-checkbox> + <i @click="checkCol()" v-if="colOpenShow" class="label">...</i> + <el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList"> + <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox> </el-checkbox-group> </div> </div> @@ -128,6 +133,7 @@ return { selectBox: false, selectIndex: false, + fixed: false, tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁 showcol: [], allcol: [], @@ -139,10 +145,10 @@ } } }, - // 鏄惁鍙互閰嶇疆鍒楄〃 琛ㄥご - colOpenShow: { + // 鏄惁鍙互閰嶇疆鍒楄〃 琛ㄥご + colOpenShow: { type: Boolean, - default: true, + default: true }, showSummary: { type: Object, @@ -166,27 +172,27 @@ data() { return { iscolopen: false, - showcol:[] + showcol: [] } }, watch: { - 'tableList.showcol':{ - handler(newVal){ - this.showcol=newVal + "tableList.showcol": { + handler(newVal) { + this.showcol = newVal }, - immediate:true + immediate: true } }, computed: {}, methods: { onMaskClick() { - this.iscolopen = false; + this.iscolopen = false }, checkCol() { - this.iscolopen = !this.iscolopen; + this.iscolopen = !this.iscolopen }, selectCheckBoxList(val) { - this.$emit("selTableCol", val); + this.$emit("selTableCol", val) }, handleReserve(row) { return row._id ? row._id : row.id @@ -403,11 +409,11 @@ height: 35px; text-align: center; } -::v-deep .table-red.el-table th.el-table__cell>.cell{ - color:red; +::v-deep .table-red.el-table th.el-table__cell > .cell { + color: red; } -::v-deep{ - .el-table .cell .el-button--text.el-button--small{ +::v-deep { + .el-table .cell .el-button--text.el-button--small { padding: 4px 0; } } diff --git a/src/views/productManage/productRegisterForm/addProductRegisterPage.vue b/src/views/productManage/productRegisterForm/addProductRegisterPage.vue index 4957b7f..5cbe81f 100644 --- a/src/views/productManage/productRegisterForm/addProductRegisterPage.vue +++ b/src/views/productManage/productRegisterForm/addProductRegisterPage.vue @@ -226,7 +226,7 @@ computed: {}, data() { return { - isDeviceConnectStatus: false, + isDeviceConnectStatus: true, ruleForm: { number: "", productTime: "", diff --git a/src/views/productManage/productRegisterForm/components/addProductDialog.vue b/src/views/productManage/productRegisterForm/components/addProductDialog.vue index 7dca258..9bed2ef 100644 --- a/src/views/productManage/productRegisterForm/components/addProductDialog.vue +++ b/src/views/productManage/productRegisterForm/components/addProductDialog.vue @@ -4,7 +4,8 @@ :close-on-click-modal="false" :visible.sync="editDialogVisible" width="533px" - class="add-event-dialog" + append-to-body + custom-class="add-event-dialog" @close="handleClose" > <div class="dialog-content-box"> @@ -173,14 +174,19 @@ color: #333; font-weight: 700; } + .add-event-dialog .el-dialog { + position: absolute; + right: 40px; + top: 40px; + } } </style> <style> -.add-event-dialog .el-dialog { +/* .add-event-dialog.el-dialog { position: absolute; right: 40px; top: 40px; -} +} */ /* .add-event-dialog .el-dialog__header { display: none; } */ diff --git a/src/views/reportManage/payableSalaryReport/index.vue b/src/views/reportManage/payableSalaryReport/index.vue index 67cd691..597d66b 100644 --- a/src/views/reportManage/payableSalaryReport/index.vue +++ b/src/views/reportManage/payableSalaryReport/index.vue @@ -1,21 +1,154 @@ <template> - <div class="container"></div> + <div class="payableSalaryReport-container"> + <div class="filter-card"> + <CommonSearch :show-add="false" :amount-view="false" placeholder="璇疯緭鍏ュ叧閿瘝" @searchClick="onFilterSearch"> + <template slot="leftButton"> + <el-button size="small" type="primary" @click="exportBtnClick">瀵煎嚭</el-button> + <el-button size="small" type="primary" @click="refreshBtnClick">鍒锋柊</el-button> + </template> + </CommonSearch> + </div> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + v-loading="loading" + :colOpenShow="false" + :table-list="tableList" + @selTableCol="selTableCol" + > + </TableCommonView> + </div> + <!-- <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" export default { name: "payableSalaryReport", props: {}, components: {}, - mixins: [], + mixins: [pageMixin], computed: {}, data() { - return {} + return { + loading: false, + tableList: {}, + tableColumn: [ + { label: "濮撳悕", prop: "name", default: true, fixed: true }, + { label: "浜哄憳id", prop: "member_name" }, + { label: "鎵嬫満鍙�", prop: "client_level" }, + { label: "宸ョ", prop: "next_visit_time" }, + { label: "鐢熶骇宸ヨ祫", prop: "detail_address" }, + { label: "婊″嫟", prop: "client_status" }, + { label: "瓒呮椂宸ヨ祫", prop: "contact_name" }, + { label: "鍔犵彮宸ヨ祫", prop: "contact_phone" }, + { label: "浜ら�氳ˉ璐�", prop: "client_level" }, + { label: "甯﹀緬琛ヨ创", prop: "next_visit_time" }, + { label: "宀椾綅琛ヨ创", prop: "detail_address" }, + { label: "绀句繚琛ヨ创", prop: "client_status" }, + { label: "宸ラ緞琛ヨ创", prop: "contact_name" }, + { label: "涓嶈揪淇濆簳", prop: "contact_phone" }, + { label: "璐ㄩ噺濂�", prop: "contact_phone" }, + { label: "濂栫綒1", prop: "client_level" }, + { label: "濂栫綒2/娓呭噳琛�", prop: "next_visit_time", width: "110" }, + { label: "鏃ュ父妫�鏌�/濂栫綒3", prop: "detail_address", width: "110" }, + { label: "鍋滄満琛ヨ创", prop: "client_status" }, + { label: "搴斿彂宸ヨ祫", prop: "contact_name" }, + { label: "澶囨敞", prop: "contact_phone", width: "140" } + ], + showCol: [ + "濮撳悕", + "浜哄憳id", + "鎵嬫満鍙�", + "宸ョ", + "鐢熶骇宸ヨ祫", + "婊″嫟", + "瓒呮椂宸ヨ祫", + "鍔犵彮宸ヨ祫", + "浜ら�氳ˉ璐�", + "甯﹀緬琛ヨ创", + "宀椾綅琛ヨ创", + "绀句繚琛ヨ创", + "宸ラ緞琛ヨ创", + "涓嶈揪淇濆簳", + "璐ㄩ噺濂�", + "濂栫綒1", + "濂栫綒2/娓呭噳琛�", + "鏃ュ父妫�鏌�/濂栫綒3", + "鍋滄満琛ヨ创", + "搴斿彂宸ヨ祫", + "澶囨敞" + ] + } }, - created() {}, - methods: {} + created() { + this.setTable() + }, + methods: { + setTable() { + this.tableList = { + selectIndex: true, + fixed: true, + tableInfomation: [{ name: "寮犱笁" }, { name: "lisi" }, { name: "鐜嬩簲" }], + allcol: [], + showcol: this.showCol, + tableColumn: this.setColumnVisible(this.showCol) + } + this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label) + this.searchOptions = [] + 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 }) + } + }, + setColumnVisible(showCol) { + return this.tableColumn.map((ele) => { + return { + ...ele, + isShowColumn: showCol.includes(ele.label) + } + }) + }, + selTableCol(val) { + this.showcol = val + this.tableList.tableColumn = this.setColumnVisible(val) + }, + // 鎼滅储 + onFilterSearch(searchText) { + console.log(searchText) + }, + // 瀵煎嚭 + exportBtnClick() {}, + // 鍒锋柊 + refreshBtnClick() {} + } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.payableSalaryReport-container { + height: 100%; + .filter-card { + margin: 20px 30px; + height: 80px; + display: flex; + align-items: center; + padding: 0 20px 0 20px; + border-radius: 12px; + background-color: #fff; + } + .body-card { + margin: 0 30px; + background-color: #fff; + padding: 10px 15px; + height: calc(100% - 180px); + } +} +</style> diff --git a/src/views/reportManage/productionReport/index.vue b/src/views/reportManage/productionReport/index.vue index ab4ef1b..4542902 100644 --- a/src/views/reportManage/productionReport/index.vue +++ b/src/views/reportManage/productionReport/index.vue @@ -1,21 +1,130 @@ <template> - <div class="container"></div> + <div class="productionRreport-container"> + <div class="filter-card"> + <CommonSearch :show-add="false" :amount-view="false" placeholder="璇疯緭鍏ュ叧閿瘝" @searchClick="onFilterSearch"> + <template slot="leftButton"> + <el-button size="small" type="primary" @click="exportBtnClick">瀵煎嚭</el-button> + </template> + </CommonSearch> + </div> + <div class="body-card"> + <div class="list-view"> + <TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList" @selTableCol="selTableCol"> + </TableCommonView> + </div> + <!-- <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" export default { name: "productionReport", props: {}, components: {}, - mixins: [], + mixins: [pageMixin], computed: {}, data() { - return {} + return { + loading: false, + tableList: {}, + tableColumn: [ + { label: "杞﹂棿", prop: "name", default: true }, + { label: "鏈虹粍", prop: "member_name" }, + { label: "鈪″害", prop: "client_level" }, + { label: "娓呮磥", prop: "next_visit_time" }, + { label: "娲佸噣", prop: "detail_address" }, + { label: "鏈�澶х氦搴�", prop: "client_status" }, + { label: "鏈�灏忕氦搴�", prop: "contact_name" }, + { label: "骞冲潎绾ゅ害", prop: "contact_phone" }, + { label: "鍏噺绾ゅ害", prop: "client_level" }, + { label: "鏈�澶у亸宸�", prop: "next_visit_time" }, + { label: "绾ゅ害鍋忓樊", prop: "detail_address" }, + { label: "鏃ヤ骇閲�", prop: "client_status" }, + { label: "绛夌骇", prop: "contact_name" }, + { label: "缁煎悎绛夌骇", prop: "contact_phone" } + ], + showCol: [ + "杞﹂棿", + "鏈虹粍", + "鈪″害", + "娓呮磥", + "娲佸噣", + "鏈�澶х氦搴�", + "鏈�灏忕氦搴�", + "骞冲潎绾ゅ害", + "鍏噺绾ゅ害", + "鏈�澶у亸宸�", + "绾ゅ害鍋忓樊", + "鏃ヤ骇閲�", + "绛夌骇", + "缁煎悎绛夌骇" + ] + } }, - created() {}, - methods: {} + created() { + this.setTable() + }, + methods: { + setTable() { + this.tableList = { + selectIndex: true, + tableInfomation: [], + allcol: [], + showcol: this.showCol, + tableColumn: this.setColumnVisible(this.showCol) + } + this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label) + this.searchOptions = [] + 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 }) + } + }, + setColumnVisible(showCol) { + return this.tableColumn.map((ele) => { + return { + ...ele, + isShowColumn: showCol.includes(ele.label) + } + }) + }, + selTableCol(val) { + this.showcol = val + this.tableList.tableColumn = this.setColumnVisible(val) + }, + // 鎼滅储 + onFilterSearch(searchText) { + console.log(searchText) + }, + // 瀵煎嚭 + exportBtnClick() {} + } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.productionRreport-container { + height: 100%; + .filter-card { + margin: 20px 30px; + height: 80px; + display: flex; + align-items: center; + padding: 0 20px 0 20px; + border-radius: 12px; + background-color: #fff; + } + .body-card { + margin: 0 30px; + background-color: #fff; + padding: 10px 15px; + height: calc(100% - 180px); + } +} +</style> -- Gitblit v1.8.0