昆明网站搭建,嘉兴网站制作公司,海南省住房建设厅网站首页,泰安手机网站建设前言#xff1a;本次的文章完全是自己开发中遇到的一些问题#xff0c;经过不断的修改终于完成的一些功能#xff0c;当个快捷的查看手册吧~ elementui开发后台管理系统常用功能 高级筛选的封装elementui的表格elementui的表格实现跨页多选回显elementui的表单elementui的日… 前言本次的文章完全是自己开发中遇到的一些问题经过不断的修改终于完成的一些功能当个快捷的查看手册吧~ elementui开发后台管理系统常用功能 高级筛选的封装elementui的表格elementui的表格实现跨页多选回显elementui的表单elementui的日历vue获取某几天内的日期和星期几请假时长计算 高级筛选的封装
功能描述数据使用的若依的字典或者是自定义数据可以点击每个选项进行选择取消选择也可以在已选择进行清除和单个删除
const officeConfig {title: 高级检索,isShowHeader: false,configList: [{label: 人员性质, // 显示的名称data: [], // 显示的名称type: dict, // 类型默认 字典 输入框dict: personnel_nature, // 如果是字典需要写isMultiple: true, // 是不是多选field: staffType // 需要给后端传递的字段名称},{label: 年龄,type: default,data: [{label: 20岁以下,value: 0 and 20,},{label: 20-30,value: 20 and 30,},],dict: ,isMultiple: false,field: age},{label: 请选择,type: input,data: [{field: staffName, placeholder: 请填写},{field: dutyName, placeholder: 请填写},{field: deptName, placeholder: 请填写},],dict: ,isMultiple: false,field: },],showTable: false,tableConfig: {// 表格配置propList: [{ prop: inFloor, label: 所属楼层, minWidth: 100},],showSelectColumn: false,showIndexColumn: true,}
}const queryForm {}
officeConfig.configList.forEach(item {if (item.type input) {item.data.forEach(val {queryForm[val.field] })} else {queryForm[item.field] []}
})export {officeConfig,queryForm
}// configList 是在外部进行单独配置的div classquery-wrapel-form :modelqueryForm refruleForm label-width100px classdemo-ruleFormel-form-item v-for(item, index) in configList :keyindex :labelitem.labeltemplate v-ifitem.type dictel-checkbox-group v-modelqueryForm[${item.field}]el-checkbox classradio-btn v-for(dict, index) in dict.type[item.dict] :keyindex :labeldict.valuechangehandleCheckedItemChange(item, dict){{dict.label}}/el-checkbox/el-checkbox-group/templatetemplate v-ifitem.type defaultel-checkbox-group v-modelqueryForm[${item.field}]el-checkbox classradio-btn v-for(dict, index) in item.data :keyindex :labeldict.valuechangehandleCheckedItemChange(item, dict){{dict.label}}/el-checkbox/el-checkbox-group/templatetemplate v-ifitem.type inputdiv styledisplay: flex;template v-for(dict, index) in item.datael-input v-modelqueryForm[${dict.field}] :keyindex :placeholderdict.placeholder clearable/el-input/template/div/template/el-form-itemel-form-item label请选择/el-form-item/el-formdiv classselect-rowdivdiv classselect-text已选条件/divdiv classselect-wrapdiv classitem v-for(item, index) in selectItem :keyindex{{item.label}}i classel-icon-close stylemargin-left: 5px; cursor: pointer; clickhandleRemoveItem(item)/i/div/divel-tooltip stylemargin-right: 15px; effectdark content查询 placementtopel-button iconel-icon-search circle clickhandleQuerySuccess/el-button/el-tooltipel-tooltip stylemargin-right: 15px; effectdark content清除选项 placementtopel-button iconel-icon-close circle clickclearSelectHandle/el-button/el-tooltip/div/div
/divscript
export default {props: {title: {type: String,},isShowHeader: {type: Boolean,default: true},configList: {type: Array,default: () ([])},queryForm: {type: Object,default: () ({})},showTable: {type: Boolean,default: true},tableData: {type: Array,default: () ([])},tableConfig: {type: Object,default: () ({})},loading: {type: Boolean,default: false},tableTotal: {type: Number},},dicts: [你使用到的字段字段],data() {return {value: ,active: false,selectItem: [],};},methods: {// 点击选择的时候进行一个数据的保存再次点击删除handleCheckedItemChange(item, data) {console.log(item, data);const arr this.selectItem.filter(selectItem {if ((selectItem.value data.value) (selectItem.label data.label)) {return selectItem}})if (!arr.length) {this.selectItem.push({label: data.label, value: data.value, field: item.field})} else {const index this.selectItem.findIndex((itemIndex) (itemIndex.value data.value)(itemIndex.label data.label) )this.selectItem.splice(index, 1)}},handleQuerySuccess() {this.$emit(querySuccess)},// 删除itemhandleRemoveItem(item) {const index this.selectItem.findIndex((itemIndex) (itemIndex.value item.value)(itemIndex.label item.label))this.selectItem.splice(index, 1)this.$emit(removeItem, item)if (!this.selectItem.length) {this.clearSelectHandle()}},// 清空所有选项clearSelectHandle() {this.selectItem []this.$emit(clearSelectQuery)},handlePutAway() {this.$emit(putAway)},},
};
/scriptstyle langscss scoped
::v-deep {.query-wrap {padding: 10px 0;margin-bottom: 20px;background: #FFFFFF;box-shadow: inset 0px 1px 4px 0px #ABC7FF;border-radius: 0px 0px 0px 0px;.el-form-item__label {font-size: 14px;font-weight: 600;color: #142952;margin-right: 10px;}.el-form-item {margin-bottom: 15px;}.el-form-item__content {display: flex;flex-wrap: wrap;align-items: center;.el-radio__input {display: none;}}.radio-btn {margin-right: 20px;background: #EFF4FF;border-radius: 2px;font-size: 12px;color: #3B558A;padding: 0 25px;height: 30px;line-height: 30px;.el-radio__label {font-size: 12px;padding-left: 0;}.is-checked {background: linear-gradient(270deg, #328EF4 0%, #0468FD 100%);color: #FFFFFF !important;}.el-checkbox__input {display: none;}.el-checkbox__label {padding-left: 0;}}.el-checkbox__input.is-checked .el-checkbox__label {color: #FFFFFF !important;}}
}
.query-btn {display: flex;justify-content: flex-end;align-items: center;padding: 20px;box-sizing: border-box;
}
.select-row {display: flex;align-items: center;justify-content: space-between; div:first-child {display: flex;align-items: center;}.select-text {height: 36px;line-height: 36px;width: 100px;padding-right: 12px;box-sizing: border-box;text-align: right;margin-right: 10px;font-size: 14px;font-weight: 600;color: #142952;}.select-wrap {display: flex;flex-wrap: wrap;width: 1054px; .item {background: #EFF4FF;border-radius: 2px;border: 1px dotted #BCD2FF;margin-right: 20px;height: 30px;line-height: 30px;padding: 0 16px;box-sizing: border-box;margin-bottom: 0;font-size: 14px;color: #0568FD;margin-bottom: 5px;}}.select-clear {font-size: 12px;color: #0079FE;cursor: pointer;}
}
/style
使用
height-searchv-bindconfig:query-formadvanQueryFormquerySuccesscpnHandleQuerySuccessremoveItemhandleRemoveItemclearSelectQueryclearSelectQueryputAwayhandlePutAway
/height-search
script
import { officeConfig, queryForm } from ./config;
import HeightSearch from ./HeightSearch.vue;export default {name: UserRegister,dicts: [sys_normal_disable, sys_user_sex],components: { HeightSearch },data() {return {// 高级查询config: officeConfig,advanQueryForm: {},// 遮罩层queryTotal: 0,// 个人信息登记personInfoList: [],};},watch: {// 根据名称筛选机构树deptName(val) {this.$refs.tree.filter(val);},},created() {this.advanQueryForm { ...queryForm, pageNum: 1, pageSize: 10 };this.handleQuerySuccess();},methods: {highSearchHandle() {this.handleQuerySuccess();},// 高级查询handleQuerySuccess() {// this.loading true;const obj { ...this.advanQueryForm };delete obj.pageNum;delete obj.pageSize;getListByConditions(this.advanQueryForm.pageNum, obj).then((response) {this.personInfoList response.rows;this.queryTotal response.total;});},cpnHandleQuerySuccess() {this.advanQueryForm.pageNum 1;this.handleQuerySuccess();},handleRemoveItem(item) {let arr [...this.advanQueryForm[item.field]];let newArr arr.filter((originItem) originItem ! item.value);this.advanQueryForm[item.field] newArr;},clearSelectQuery() {this.advanQueryForm { ...queryForm, pageNum: 1, pageSize: 10 };this.handleQuerySuccess();},handlePutAway() {this.advanQueryForm { ...queryForm, pageNum: 1, pageSize: 10 };},// 查看信息handleSee(row) {this.$router.push({ name: seeInfo, query: { id: row.staffId } });},},
};
/scriptelementui的表格
selection-change 表格前面的select选择:show-overflow-tooltip“true” 表格显示内容非常多可以…省略slot-scope“scope” 如果相对内容进行自定义展示可以使用默认插槽序号我们需求是分页序号要递增
el-table v-loadingloading :data绑定data数据-数组类型 selection-changehandleSelectionChangeel-table-column typeselection width55 aligncenter /el-table-column label序号 typeindex width50 aligncentertemplate slot-scopescopespan{{(queryParams.pageNum - 1) * queryParams.pageSize scope.$index 1}}/span/template/el-table-columnel-table-column label想要展示的字段 aligncenter propstaffName /el-table-column label申请原因 aligncenter propapplyReason :show-overflow-tooltiptrue /el-table-column label申请时段 aligncenter propendTime width180template slot-scopescopespan{{ scope.row.startTime }}/span/template/el-table-columnel-table-column label操作 aligncenter class-namesmall-padding fixed-width width240 fixedrighttemplate slot-scopescopeel-button sizemini typetext iconel-icon-edit clickhandleUpdate(scope.row)修改/el-buttonel-button sizemini typetext iconel-icon-tickets clickhandleDetail(scope.row)详情/el-buttonel-button sizemini typetext iconel-icon-delete clickhandleDelete(scope.row)删除/el-button/template/el-table-column
/el-tableelementui的表格实现跨页多选回显
officeBuildingList 绑定的表格数据selection-changehandleOfficeSelect 选择的方法:row-keygetKey 唯一标识:reserve-selectiontrue
el-table classmy-table :dataofficeBuildingList selection-changehandleOfficeSelect reftrainCourseTable :row-keygetKeyel-table-column typeselection width55 aligncenter :reserve-selectiontrue /el-table-column label数据 aligncenter prop字段 width120 /
/el-tablemethods: {// 编辑情况回显数据// 1. 因为是分页简单做法就是一开始在create中调用获取全部的数据 pageSize9999listOfficeBuilding({pageNum: 1,pageSize: 9999}).then((res) {// 拿到form表单字段中的数据在所有的数据中筛选if (this.form.字段名称) {const arr this.form.字段名称.split(,)res.rows.forEach(item {if (arr.includes(item.字段名称) !this.suppliesMultipleList.includes(item)) {this.suppliesMultipleList.push(item)}})}});// 2. 打开弹窗调用接口获取表格数据判断有字段并且是编辑状态才需要回显if (this.form.字段名称 this.form.id) {this.$nextTick(() {// 把筛选好的this.suppliesMultipleList.forEach(row {this.$refs.trainCourseTable.toggleRowSelection(row, true)})})}
}
// 点击表格前的复选框保存数据
handleOfficeSelect(val) {this.suppliesMultipleList val
},
getKey(row) {return row.id;
},elementui的表单
elementui的日历
el-calendar v-modelcalendarValuetemplate slotdateCell slot-scope{date, data}div classdatediv classleftspan classdate-day{{data.day.split(-)[2]}}/spanspan classdate-lunar{{getClearList(data.day).lunar}}/spantemplate v-foritem in workDateArrspan classrest-day v-if(item.status 2) (data.day item.workDate)放假/spanspan classworking-day v-if(item.status 1) (data.day item.workDate)班/span/template/divdiv classdate-festival{{getClearList(data.day).festival}}/div/divdiv styleheight: 98px; overflow: hidden;template v-for(item, index) in myScheduleCalendarPlanListdivclassinfo:style{background: item.color}v-if(new Date(data.day).valueOf()) (new Date(item.startTime).valueOf()) (new Date(data.day).valueOf()) (new Date(item.endTime).valueOf())clickhandleDetail(item.id)i classel-icon-time stylemargin: 0px 5px;/ispan classtext-area{{item.eventTitle}}/span/div/template/divdiv classdate-add clickmyCalendarMore(data)div查看全部/div/div/template
/el-calendar这个是缩小以后的效果为了截取全部点击日期可以切换。我们这里的放假上班在系统有菜单进行单独配置通过接口拿到数据和日历的日期进行匹配展示文字
vue获取某几天内的日期和星期几
// 周末
getWeeks() {var day3 new Date();let days [];// 这里的6控制的是天数for (let i 0; i 24 * 6; i 24) {let dateItem new Date(day3.getTime() i * 60 * 60 * 1000);let y dateItem.getFullYear();let m dateItem.getMonth() 1;let d dateItem.getDate(); m this.addDate0(m);d this.addDate0(d);let valueItem1 y - m - d; let valueItem m / d; var myddy dateItem.getDay();var weekday [日, 一, 二, 三, 四, 五, 六];days.push({day: ${valueItem1},date: ${valueItem},week: ${weekday[myddy]},name: ${i},});}this.winWeakList daysconsole.log(this.winWeakList);
},
addDate0(time) {if (time.toString().length 1) {time 0 time.toString();}return time;
},请假时长计算
import moment from moment;
// 我们的工作日是需要自己配置的
let workDayList JSON.parse(window.localStorage.getItem(workDayList)) || []
let restDayList JSON.parse(window.localStorage.getItem(restDayList)) || []const WORK_START_TIME 8.30; // 工作开始时间
const WORK_END_TIME 17.30; // 工作下班时间
const BREAK_TIME 1.30; // 休息时间
const BREAK_START 12; // 上午休息时间
const BREAK_END 13.30; // 下午休息结束时间
const WORK_TIME 9; //
/**** param {*Number} num* returns 分离出来的整数和小数*/
// 获取某一天的下班时间
const startDateSupplement (value) {var year value.getFullYear();var month value.getMonth() 1;var day value.getDate();return new Date(${year}-${month}-${day} 17:30:00);
}
// 获取某一天的开始上班时间
const endDateSupplement (value) {var year value.getFullYear();var month value.getMonth() 1;var day value.getDate();console.log(year, month, day);return new Date(${year}-${month}-${day} 08:30:00);
}// 使用二跨日期计算
// sTime开始日期 eTime结束日期
const calcDay (sTime, eTime) {let days leaveBydays(sTime, eTime, 1);return days;
};const leaveBydays (sTime, eTime, complement 0) {// 把传入的开始时间和结束时间的 分钟和秒钟格式化const stratTime moment(sTime).format(HH.mm);const endTime moment(eTime).format(HH.mm);let daysconst start1 stratTime 08.30 ? true : falseconst start2 endTime 17.30 ? true : false// 1. 开始时间等于上班时间和结束时间等于下班时间if (start1 start2) {const to moment(eTime).format(YYYY-MM-DD)const at moment(sTime).format(YYYY-MM-DD)const originDay moment(to).diff(at, day) 1;let sday sTime.getDate();let weekdays 0;for (let i 0; i Math.round(originDay); i) {let nowDay new Date(new Date(sTime).setDate(sday i));if (checkDay(nowDay)) {weekdays;}}const finallyDays originDay - weekdaysconst finallyIntHours finallyDays * 9// console.log(开始时间等于上班时间和结束时间等于下班时间, finallyIntHours);return finallyIntHours;} else {// 1.计算出原始的天数const to moment(eTime).format(YYYY-MM-DD HH:mm)const at moment(sTime).format(YYYY-MM-DD HH:mm)let originDay moment(to).diff(at, day) 1;console.log(originDay);// 2.获取第一天的提起let sday sTime.getDate();let weekdays 0;for (let i 0; i Math.round(originDay); i) {let nowDay new Date(new Date(sTime).setDate(sday i));if (checkDay(nowDay)) {weekdays;}}//console.log(weekdays);let dayTime 0;let dayOneTime;let dayLastTime;// 计算第一天的日期小时数const startToEndOne startDateSupplement(sTime)const finallyResultOne getTime(sTime, startToEndOne)//console.log(日期区间1, finallyResultOne);if (finallyResultOne ! 0) {dayOneTime ${finallyResultOne.hours}.${finallyResultOne.resultMinutes};dayTime 1} else {dayOneTime 0}const startToEndLast endDateSupplement(eTime)const finallyResultLast getTime(startToEndLast, eTime)//console.log(日期区间2, finallyResultLast);if (finallyResultLast ! 0) {dayTime 1dayLastTime ${finallyResultLast.hours}.${finallyResultLast.resultMinutes};} else {dayLastTime 0}console.log(原始天数${originDay}周末天数${weekdays}相差${dayTime}第一天相差${dayOneTime}最后一天相差${dayLastTime});const finallyDays originDay - weekdays - dayTimeconst finallyIntHours finallyDays * 9// const finallyDayOneTime dayOneTime?dayOneTime:0// const finallyDayLastTime dayLastTime?dayLastTime:0const resultTime Number(finallyIntHours) parseFloat(dayOneTime) parseFloat(dayLastTime)console.log(finallyDays, finallyIntHours, dayOneTime, dayLastTime, resultTime);return resultTime 0 ? 0 : resultTime}
};// 使用一单个日期计算当天
const getTime (beginTime, endTime) {if (checkDay(beginTime)) {return 0}var dateDiff endTime.getTime() - beginTime.getTime();//时间差的毫秒数var dayDiff Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数var leave1 dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数var hours Math.floor(leave1/(3600*1000))//计算出小时数//计算相差分钟数var leave2 leave1%(3600*1000) //计算小时数后剩余的毫秒数var minutes Math.floor(leave2/(60*1000))//计算相差分钟数//计算相差秒数var leave3 leave2%(60*1000) //计算分钟数后剩余的毫秒数var seconds Math.round(leave3/1000)console.log( 相差 dayDiff天 hours小时 minutes 分钟seconds 秒)// return dayDiff天 hours小时 minutes 分钟;let resultMinutes 0if (minutes 0) {resultMinutes 0} else if (minutes 30) {resultMinutes 5} else if (minutes 30){resultMinutes 5} else if (minutes 30) {hours hours 1// resultMinutes minutes / 10}const finallyResult {dayDiff: dayDiff,hours: hours,minutes: minutes,resultMinutes: resultMinutes,seconds: seconds}console.log(finallyResult);return finallyResult
}//判断日期是否处于周六、周日节假日后续完善
const checkDay (time) {let flag false;const formtTime moment(time).format(YYYY-MM-DD);if (!!workDayList.includes(formtTime)) {flag falsereturn flag}if (!!restDayList.includes(formtTime)) {flag truereturn flag}let day time.getDay();flag day 0 || day 6 ? true : false;return flag;
};export { calcDay, getTime};import { calcDay, getTime } from /utils/calcTime;
import moment from moment;
// 日期计算
endTimeChange(val) {if (this.leaveDateRange.length1) {this.form.startTime this.leaveDateRange[0];this.form.endTime this.leaveDateRange[1];this.addStartTime this.DateFormat(this.form.startTime);this.addEndTime this.DateFormat(this.form.endTime);const startDay new Date(this.form.startTime).getDate();const endDay new Date(this.form.endTime).getDate();const startTime moment(this.form.startTime).format(HH:mm);const endTime moment(this.form.endTime).format(HH:mm);if (startDay endDay) {const timeRange getTime(this.form.startTime, this.form.endTime);this.form.leaveLength parseFloat(${timeRange.hours}.${timeRange.resultMinutes}) ;console.log(this.form.leaveLength);} else {const day calcDay(this.form.startTime, this.form.endTime);this.form.leaveLength day;}}
},
DateFormat(value) {// 根据给定的字符串得到特定的日期// var date new Date(value);var year value.getFullYear();var month value.getMonth() 1;var day value.getDate();var hour value.getHours();var min value.getMinutes();var sec value.getSeconds();const dateStr ${String(year)}-${String(month).padStart(2, 0)}-${String(day).padStart(2, 0)} ${String(hour).padStart(2, 0)}:${String(min).padStart(2, 0)}:${String(sec).padStart(2, 0)};return dateStr;
},
