From cc6914dff1a91dd00e3a86d5daae2c3dba2d6ba8 Mon Sep 17 00:00:00 2001 From: gaoluyang <gaoluyang@rengu.cc> Date: 星期三, 24 七月 2024 16:28:00 +0800 Subject: [PATCH] 检测中心-班次时间配置功能 --- src/components/view/b3-classes.vue | 225 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 215 insertions(+), 10 deletions(-) diff --git a/src/components/view/b3-classes.vue b/src/components/view/b3-classes.vue index e4fc53a..12b8b15 100644 --- a/src/components/view/b3-classes.vue +++ b/src/components/view/b3-classes.vue @@ -44,6 +44,7 @@ <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button> </div> <div class="search_thing btns" style="padding-left: 30px;"> + <el-button size="small" type="primary" v-if="downPower" @click="configTime" :loading="downLoading">鏃堕棿閰嶇疆</el-button> <el-button size="small" type="primary" v-if="downPower" @click="handleDown" :loading="downLoading">瀵� 鍑�</el-button> <el-button size="small" type="primary" @click="schedulingVisible = true" v-if="addPower">鎺� 鐝�</el-button> </div> @@ -83,18 +84,14 @@ v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex=null"> <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i" :class="{hoverType:currentUserIndex==index}"> - <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',type5:m.shift==='5',type6:m.shift==='6'}"> - <!-- <div class="work-box-left"> - <span>{{ getShiftByDic(m.shift) }}</span> - </div> --> - <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!upPower"> - <!-- <i class="el-icon-arrow-down el-icon--right" style="font-size: 20px;color: #fff;cursor: pointer;"></i> --> + <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!upPower" style="width: 100%;height: 100%;cursor: pointer;"> + <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',type5:m.shift==='5',type6:m.shift==='6'}"> <span style="cursor: pointer;" :style="`opacity: ${getShiftByDic(m.shift)=='鏃�'?0:1};`">{{ getShiftByDic(m.shift) }}</span> + </div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(n,j) in classType" :key="'h'+j" :command="n.value">{{ n.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> - </div> </div> </div> </div> @@ -150,6 +147,57 @@ </scroll-pagination> <span style="color:#909399;font-size:14px;position: absolute;left:50%;top: 50%;transform: translate(-59%,-50%);" v-if="(query.month&&list.length==0)||(!query.month&&yearList.length==0)">鏆傛棤鏁版嵁</span> </div> + <el-dialog title="鏃堕棿閰嶇疆" :visible.sync="configTimeVisible" width="620px"> + <div v-loading="configTimeVisibleLoading" ></div> + <div v-if="!configTimeVisibleLoading"> + <div v-for="(item, index) in timeQuery"> + <div class="form_title"> + <span>{{`鐝${transFromNumber(index + 1)}`}}</span> + <span style="margin-right: 10px"> + <i class="el-icon-circle-check" v-if="item.isEdit" style="margin-left: 10px; color: #4b79f2" @click="saveEdit(item, index)"></i> + <i class="el-icon-edit" v-if="!item.isEdit" style="margin-left: 10px; color: #4b79f2" @click="item.isEdit = true"></i> + <i class="el-icon-delete" v-if="!item.isEdit && timeQuery.length > 1" style="margin-left: 10px; color: #FF4902" @click="deleteTime(item, index)"></i> + </span> + </div> + <div class="form"> + <div style="margin-bottom: 12px"> + <span class="form_label">鐝锛�</span> + <span v-if="!item.isEdit"> {{item.type}} </span> + <span class="form_input" v-if="item.isEdit"> + <el-select v-model="item.shift" placeholder="璇烽�夋嫨" style="width: 70%;" clearable size="small"> + <el-option v-for="obj in timeTypeList" + :key="obj.value" + :label="obj.label" + :value="obj.value"> + </el-option> + </el-select> + </span> + </div> + <div> + <span class="form_label">鏃堕棿锛�</span> + <span v-if="!item.isEdit"> {{item.time === null ? '' : item.time[0] + '~' + item.time[1]}} </span> + <span class="form_input" v-if="item.isEdit"> + <el-time-picker + style="width: 70%;" + is-range + size="small" + v-model="item.time" + range-separator="~" + format="HH:mm" + value-format="HH:mm" + start-placeholder="寮�濮嬫椂闂�" + end-placeholder="缁撴潫鏃堕棿" + placeholder="閫夋嫨鏃堕棿鑼冨洿"> + </el-time-picker> + </span> + </div> + <el-divider></el-divider> + </div> + <div @click="addTimeForm" style="color: #4b79f2" v-if="index === timeQuery.length - 1">娣诲姞鏃堕棿閰嶇疆</div> + </div> + <div @click="addTimeForm" style="color: #4b79f2" v-if="timeQuery.length === 0">娣诲姞鏃堕棿閰嶇疆</div> + </div> + </el-dialog> <el-dialog title="鎺掔彮" :visible.sync="schedulingVisible" width="400px"> <div class="search_thing"> <div class="search_label" style="width:90px"><span style="color: red;margin-right: 4px;">*</span>鍛ㄦ锛�</div> @@ -289,6 +337,10 @@ yearList:[], downLoading:false, keyMap:{}, + configTimeVisible: false, // 鏃堕棿閰嶇疆寮规 + configTimeVisibleLoading: false, // 鏃堕棿閰嶇疆寮规loading + timeTypeList: [], + timeQuery: [], } }, watch: { @@ -334,6 +386,7 @@ this.list = []; this.yearList = [] this.keyMap = {}; + this.finishLoding = false; this.currentPage = 1 this.query = { userName:'', @@ -350,6 +403,7 @@ refreshTable(){ this.keyMap = {}; this.currentPage = 1 + this.finishLoding = false; if(this.query.month){ this.list = []; this.init() @@ -357,6 +411,23 @@ this.yearList = [] this.initYear() } + }, + transFromNumber(num){ + let changeNum = ['闆�', '涓�', '浜�', '涓�', '鍥�', '浜�', '鍏�', '涓�', '鍏�', '涔�']; //changeNum[0] = "闆�" + let unit = ["", "鍗�", "鐧�", "鍗�", "涓�"]; + num = parseInt(num); + let getWan = (temp) => { + let strArr = temp.toString().split("").reverse(); + let newNum = ""; + for (var i = 0; i < strArr.length; i++) { + newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum; + } + return newNum; + } + let overWan = Math.floor(num / 10000); + let noWan = num % 10000; + if (noWan.toString().length < 4) noWan = "0" + noWan; + return overWan ? getWan(overWan) + "涓�" + getWan(noWan) : getWan(num) }, init(){ const key = `_${this.currentPage}` @@ -536,6 +607,94 @@ this.refresh() }) }, + configTime () { + this.$axios.post(this.$api.enums.selectEnumByCategory, { + category: "鐝绫诲瀷" + }).then(res => { + console.log('res---', res) + this.timeTypeList = res.data + }) + this.getTimeList() + this.configTimeVisible = true + }, + getTimeList () { + this.configTimeVisibleLoading = true + this.$axios.post(this.$api.performanceShift.getList).then(res => { + if (res.code === 200) { + res.data.forEach(item => { + item.isEdit = false + item.time.push(item.startTime) + item.time.push(item.endTime) + const index = this.timeTypeList.findIndex(val => val.value === item.shift) + if (index > -1) { + item.type = this.timeTypeList[index].label + } + }) + this.timeQuery = res.data + } + this.configTimeVisibleLoading = false + }).catch(e => { + this.configTimeVisibleLoading = false + console.log('e--',e) + }) + }, + addTimeForm () { + this.timeQuery.push({ + type: '', + shift: '', + time: null, + isEdit: true + }) + }, + saveEdit (item, index) { + if (item.shift) { + const index = this.timeTypeList.findIndex(val => val.value === item.shift) + if (index > -1) { + item.type = this.timeTypeList[index].label + } + } + const isEmpty = this.isObjectEmpty(item) + if (isEmpty) { + this.$message.error('璇峰~鍐欏畬鏁�') + return + } + let newObj = {} + let url = '' + newObj.shift = item.shift + newObj.startTime = item.time[0] + newObj.endTime = item.time[1] + url = this.$api.performanceShift.shiftAdd + if (item.id) { + // 鏈塱d涓轰慨鏀� + newObj.id = item.id + url = this.$api.performanceShift.shiftUpdate + } + this.$axios.post(url, newObj, { + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { + if (res.code == 201) return + this.$message.success('鎿嶄綔鎴愬姛') + }) + this.getTimeList() + }, + deleteTime (item, index) { + this.$axios.post(this.$api.performanceShift.shiftRemove, { + id: item.id + },{ + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { + if (res.code == 201) return + this.$message.success('鎿嶄綔鎴愬姛') + }) + this.getTimeList() + }, + isObjectEmpty(obj) { + return Object.keys(obj).some(key => !obj[key]); + }, handleDown(){ let year = this.query.year.getFullYear() let time = ''; @@ -578,7 +737,16 @@ }) }, obtainItemParameterList() { - this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => { + if(this.PROJECT == '妫�娴嬩腑蹇�') { + this.laboratory = [{ + label: '閫氫俊浜у搧瀹為獙瀹�', + value: '閫氫俊浜у搧瀹為獙瀹�' + }, { + label: '鐢靛姏浜у搧瀹為獙瀹�', + value: '鐢靛姏浜у搧瀹為獙瀹�' + }] + } else { + this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => { let data = [] res.data.forEach(a => { data.push({ @@ -588,6 +756,8 @@ }) this.laboratory = data }) + } + }, handleCommand(e,m){ if(e!=m.shift){ @@ -638,12 +808,46 @@ return obj.label } return '鏃�' + }, + scrollInit() { + // 鑾峰彇瑕佺粦瀹氫簨浠剁殑鍏冪礌 + const nav = document.getElementById("nav") + var flag; // 榧犳爣鎸変笅 + var downX; // 榧犳爣鐐瑰嚮鐨剎涓嬫爣 + var scrollLeft; // 褰撳墠鍏冪礌婊氬姩鏉$殑鍋忕Щ閲� + nav.addEventListener("mousedown", function(event) { + flag = true; + downX = event.clientX; // 鑾峰彇鍒扮偣鍑荤殑x涓嬫爣 + scrollLeft = this.scrollLeft; // 鑾峰彇褰撳墠鍏冪礌婊氬姩鏉$殑鍋忕Щ閲� + }); + nav.addEventListener("mousemove", function(event) { + if (flag) { // 鍒ゆ柇鏄惁鏄紶鏍囨寜涓嬫粴鍔ㄥ厓绱犲尯鍩� + var moveX = event.clientX; // 鑾峰彇绉诲姩鐨剎杞� + var scrollX = moveX - downX; // 褰撳墠绉诲姩鐨剎杞翠笅鏍囧噺鍘诲垰鐐瑰嚮涓嬪幓鐨剎杞翠笅鏍囧緱鍒伴紶鏍囨粦鍔ㄨ窛绂� + this.scrollLeft = scrollLeft - scrollX // 榧犳爣鎸変笅鐨勬粴鍔ㄦ潯鍋忕Щ閲忓噺鍘诲綋鍓嶉紶鏍囩殑婊戝姩璺濈 + } + }); + // 榧犳爣鎶捣鍋滄鎷栧姩 + nav.addEventListener("mouseup", function() { + flag = false; + }); + // 榧犳爣绂诲紑鍏冪礌鍋滄鎷栧姩 + nav.addEventListener("mouseleave", function(event) { + flag = false; + }); } } } </script> <style scoped> +.form_title { + height: 36px; + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: 800; +} .search { height: 50px; display: flex; @@ -702,6 +906,7 @@ min-height: calc(100% - 10px); /* 瑙嗗彛楂樺害 */ margin-left: 220px; overflow-x: scroll; + /* overflow-x: hidden; */ } .content { @@ -767,7 +972,7 @@ display: flex; align-items: center; justify-content: space-around; - background: #F5F7FB; + background: #edeff2; border-radius: 8px 8px 8px 8px; color: #999; font-size: 14px; @@ -869,7 +1074,7 @@ margin-left: 10px; } .hoverType{ - background: rgba(58,123,250,0.05); + background: rgba(58,123,250,0.03); } .year-table{ width: 100%; -- Gitblit v1.9.3