From 15a76ccca71377fca795d74c0c28b75daf57889c Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期一, 29 四月 2024 15:55:16 +0800 Subject: [PATCH] 纤度登记表模块新增和编辑车间绑定值修改入参和显示的数据重组+纤度检验表模块 详情页面车间对应字段修改 --- src/views/employeeSalary/attendanceStatistics/index.vue | 320 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 310 insertions(+), 10 deletions(-) diff --git a/src/views/employeeSalary/attendanceStatistics/index.vue b/src/views/employeeSalary/attendanceStatistics/index.vue index 02d4ef8..38c223d 100644 --- a/src/views/employeeSalary/attendanceStatistics/index.vue +++ b/src/views/employeeSalary/attendanceStatistics/index.vue @@ -1,21 +1,321 @@ <template> - <div class="container"></div> + <div class="silkRegister-form"> + <div class="filter"> + <div class="filter-card"> + <CommonSearch + :show-add="false" + :show-download="false" + :amount-view="false" + :show-action-btn="false" + placeholder="璇疯緭鍏ュ叧閿瘝" + @searchClick="onFilterSearch" + > + <template slot="leftButton"> + <div class="margin_right_20px" style="width:200px;"> + <el-date-picker v-model="object.date" style="width:100%" + @change="onFilterSearch" + :clearable="false" type="month" placeholder="閫夋嫨鏃ユ湡" + :picker-options="pickerOptions" + value-format="yyyy-MM"> + </el-date-picker> + </div> + </template> + </CommonSearch> + </div> + </div> + + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + v-loading="loading" + :table-list="tableList" + @selTableCol="selTableCol" + @selCommonClick="(row,prop,item) => selCommonClick(row,prop,item)" + > + </TableCommonView> + </div> + <!-- <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> --> + </div> + </div> + <AttendanceStatisticsDetails ref="attendanceStatisticsDetails" :editRow="editRow" @shutdown="getData" /> + </div> </template> <script> +import { getAttendanceStatistic } from "@/api/employeeSalary/attendanceManage.js" +import pageMixin from "@/components/makepager/pager/mixin/pageMixin" +import AttendanceStatisticsDetails from "@/views/employeeSalary/attendanceStatistics/components/AttendanceStatisticsDetails" +import NewDate from "@/api/date"; +const { getCurrentMonth } = NewDate; export default { name: "attendanceStatistics", - props: {}, - components: {}, - mixins: [], - computed: {}, - data() { - return {} + props: { }, - created() {}, - methods: {} + mixins: [pageMixin], + components: { + AttendanceStatisticsDetails, + }, + data() { + return { + tableList: {}, + loading: false, + pickerOptions: { + disabledDate(time) { + return time.getTime() > new Date().getTime() - 86400000; + }, + }, + object:{ + date:getCurrentMonth() + }, + editRow:{ + + }, + searchOptions: [], + editConfig: { + visible: false, + title: "鏂板缓", + infomation: {} + }, + keyword: "", + tableColumn: [ + { label: "濮撳悕", prop: "workerName", min: 120, default: true }, + { label: "浜哄憳ID", prop: "workerId", min: 190,default: true}, + { label: "宸ョ", prop: "workType", min: 100, }, + { label: "鏈堜唤", prop: "month", min: 100 }, + { label: "宸ヤ綔鏃ュ姞鐝椂闀�(灏忔椂)", prop: "weekdayOverTime", min: 180 }, + { label: "浼戞伅鏃ュ姞鐝椂闀�(灏忔椂)", prop: "restDayOverTime", min: 180 }, + { label: "搴斿嚭鍕ゅぉ鏁�", prop: "requiredAttendanceDays", min: 110 }, + { label: "瀹為檯鍑哄嫟澶╂暟", prop: "actualAttendanceDays", min: 110 }, + ], + showCol: [ + "宸ョ", + "鏈堜唤", + "宸ヤ綔鏃ュ姞鐝椂闀�(灏忔椂)", + "浼戞伅鏃ュ姞鐝椂闀�(灏忔椂)", + "搴斿嚭鍕ゅぉ鏁�", + "瀹為檯鍑哄嫟澶╂暟", + ] + } + }, + created() { + this.setTable() + this.getData(this.keyword) + }, + computed: { + }, + methods: { + setTable() { + this.tableList = { + selectIndex: true, + isFixed:true, + tableInfomation: [], + allcol: [], + showcol: this.showCol, + headerHeight:'47px', + 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:ele.default?true:showCol.includes(ele.label) + } + }) + }, + selTableCol(val) { + this.showcol = val; + this.tableList.tableColumn = this.setColumnVisible(val); + }, + // 璇锋眰鏁版嵁 + async getData() { + this.loading = true + await getAttendanceStatistic({ + keyword: this.keyword, + month:this.object.date, + // page: this.pagerOptions.currPage, + // pageSize: this.pagerOptions.pageSize + }) + .then((res) => { + console.log(res) + if (res.code === 200) { + if (res.data.list && res.data.list.length > 0) { + let tableColumn1= [ + { label: "濮撳悕", prop: "workerName", min: 120,default: true,fixed:'left' }, + { label: "浜哄憳ID", prop: "workerId", min: 120,default: true,fixed:'left'}, + { label: "宸ョ", prop: "workType", min: 100,fixed:'left' }, + { label: "鏈堜唤", prop: "month", min: 90 ,fixed:'left'}, + ]; + let tableColumn3=[ + { label: "宸ヤ綔鏃ュ姞鐝椂闀�(灏忔椂)", prop: "weekdayOverTime", min: 140,}, + { label: "浼戞伅鏃ュ姞鐝椂闀�(灏忔椂)", prop: "restDayOverTime", min: 140, }, + { label: "搴斿嚭鍕ゅぉ鏁�", prop: "requiredAttendanceDays", min: 110 ,}, + { label: "瀹為檯鍑哄嫟澶╂暟", prop: "actualAttendanceDays", min: 110,}, + ] + let tableColumn2=[] + let headerList=res.data.list.length>0?res.data.list[0]:[] + if(headerList.details&&headerList.details.length>0){ + for(let i in headerList.details){ + tableColumn2.push({ + label:headerList.details[i].date+'', + weekDay:headerList.details[i].weekDay+'', + prop:'headerDate'+headerList.details[i].date, + min:80, + default:true, + isCallMethod:true, + isClass: true, + getClassName:this.getHeaderClass, + getCallMethod: this.getHeaderDate, + isCommonClick:true, + isIcon:true, + }) + } + } + + let tableColumn=tableColumn1.concat(tableColumn2).concat(tableColumn3) + this.tableColumn=tableColumn; + this.setTable() + const list = res.data.list.map((item) => { + let headerItem={} + let details=item.details?item.details:[] + for(let i in details){ + headerItem['headerDate'+details[i].date]=details[i].status + } + return { + ...item, + ...headerItem, + } + }) + this.tableList.tableInfomation = list || [] + this.pagerOptions.totalCount = res.total + } else { + this.tableList.tableInfomation = [] + } + } else { + this.tableList.tableInfomation = [] + } + this.loading = false + }) + .catch((err) => { + console.log(err) + this.tableList.tableInfomation = [] + this.loading = false + }) + }, + getHeaderDate(val){ + let string='' + // 1==姝e父 2===鍔犵彮 3==浼戝亣 4===寮傚父 + if(val==1){ + string="<i class='el-icon-circle-check'></i>" + }else if(val==2){ + string='鐝�' + }else if(val==3){ + string='浼�' + }else if(val==4){ + string='寮�' + } + return string + }, + getHeaderClass(val){ + let classname='' + // 1==姝e父 2===鍔犵彮 3==浼戝亣 4===寮傚父 + if(val==1){ + classname = "color_67c23a font_weight_700 font_size_20"; + }else if(val==2){ + classname = "color_FF9900 font_weight_700"; + }else if(val==3){ + classname = "color_333 font_weight_700"; + }else if(val==4){ + classname = "color_red font_weight_700"; + } + return classname + }, + // 鎼滅储 + onFilterSearch(searchText) { + this.keyword = searchText ?? "" + this.pagerOptions.currPage = 1 + this.getData() + }, + selCommonClick(row,prop,item){ + let config=JSON.parse(JSON.stringify(row)); + let details=config.details + let headerItem={} + for(let i in details){ + if(details[i].date==item.label){ + headerItem.classes=details[i].classes + headerItem.classesEndTime=details[i].classesEndTime + headerItem.classesStartTime=details[i].classesStartTime + headerItem.endWorkTime=details[i].endWorkTime + headerItem.startWorkTime=details[i].startWorkTime + headerItem.status=details[i].status + headerItem.dateDay=details[i].date + break; + } + } + this.editRow = { + ...config, + ...headerItem, + } + this.$refs.attendanceStatisticsDetails.islook = true; + }, + } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.silkRegister-form { + height: 100%; + overflow: hidden; + .filter { + height: 80px; + display: flex; + align-items: center; + padding: 12px 20px 0 20px; + &-card { + height: 80px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 10px 20px; + flex: 1; + border-radius: 12px; + background-color: #fff; + } + } + .body { + box-sizing: border-box; + padding: 10px 20px; + border-radius: 12px; + height: calc(100% - 92px); + .body-card { + background-color: #fff; + border-radius: 12px; + height: 100%; + overflow: hidden; + } + .list-view { + height: calc(100% - 10px); + overflow: hidden; + } + .btn-pager { + display: flex; + margin-top: 10px; + .page { + margin-left: auto; + } + } + } +} +</style> -- Gitblit v1.8.0