前言：本次的文章完全是自己開發(fā)中遇到的一些問題，經(jīng)過不斷的修改終于完成的一些功能，當(dāng)個(gè)快捷的查看手冊(cè)吧~

高級(jí)篩選的封裝

功能描述：數(shù)據(jù)使用的若依的字典，或者是自定義數(shù)據(jù)，可以點(diǎn)擊每個(gè)選項(xiàng)進(jìn)行選擇，取消選擇，也可以在已選擇進(jìn)行清除和單個(gè)刪除

const officeConfig = {
  title: "高級(jí)檢索",
  isShowHeader: false,
  configList: [
    {
      label: "人員性質(zhì)", // 顯示的名稱
      data: [], // 顯示的名稱
      type: "dict", // 類型：默認(rèn) 字典 輸入框
      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: "請(qǐng)選擇",
      type: "input",
      data: [
        {field: "staffName", placeholder: "請(qǐng)?zhí)顚?},
        {field: "dutyName", placeholder: "請(qǐng)?zhí)顚?},
        {field: "deptName", placeholder: "請(qǐng)?zhí)顚?},
      ],
      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 是在外部進(jìn)行單獨(dú)配置的

<div class="query-wrap">
  <el-form :model="queryForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item v-for="(item, index) in configList" :key="index" :label="item.label">
      <template v-if="item.type === 'dict'">
        <el-checkbox-group v-model="queryForm[`${item.field}`]">
          <el-checkbox 
            class="radio-btn" 
            v-for="(dict, index) in dict.type[item.dict]" 
            :key="index" 
            :label="dict.value"
            @change="handleCheckedItemChange(item, dict)">{{dict.label}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-if="item.type === 'default'">
        <el-checkbox-group v-model="queryForm[`${item.field}`]">
          <el-checkbox 
            class="radio-btn" 
            v-for="(dict, index) in item.data" 
            :key="index" 
            :label="dict.value"
            @change="handleCheckedItemChange(item, dict)">{{dict.label}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-if="item.type === 'input'">
		  <div style="display: flex;">
		    <template v-for="(dict, index) in item.data">
		      <el-input v-model="queryForm[`${dict.field}`]" :key="index" :placeholder="dict.placeholder" clearable></el-input>
		    </template>
		  </div>
		</template>
    </el-form-item>
    <el-form-item label="請(qǐng)選擇">
    </el-form-item>
  </el-form>
  <div class="select-row">
    <div>
      <div class="select-text">已選條件</div>
      <div class="select-wrap">
        <div class="item" v-for="(item, index) in selectItem" :key="index">
          {{item.label}}
          <i class="el-icon-close" style="margin-left: 5px; cursor: pointer;" @click="handleRemoveItem(item)"></i>
        </div>
      </div>
      <el-tooltip style="margin-right: 15px;" effect="dark" content="查詢" placement="top">
        <el-button icon="el-icon-search" circle @click="handleQuerySuccess"></el-button>
      </el-tooltip>
      <el-tooltip style="margin-right: 15px;" effect="dark" content="清除選項(xiàng)" placement="top">
        <el-button icon="el-icon-close" circle @click="clearSelectHandle"></el-button>
      </el-tooltip>
    </div>
  </div>
</div>

<script>
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: {
  	// 點(diǎn)擊選擇的時(shí)候進(jìn)行一個(gè)數(shù)據(jù)的保存，再次點(diǎn)擊刪除
    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")
    },
    // 刪除item
    handleRemoveItem(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()
      }
    },
    // 清空所有選項(xiàng)
    clearSelectHandle() {
      this.selectItem = []
      this.$emit("clearSelectQuery")
    },
    handlePutAway() {
      this.$emit("putAway")
    },
  },
};  
</script>

<style lang="scss" 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-search
  v-bind="config"
  :query-form="advanQueryForm"
  @querySuccess="cpnHandleQuerySuccess"
  @removeItem="handleRemoveItem"
  @clearSelectQuery="clearSelectQuery"
  @putAway="handlePutAway"
></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 {
      // 高級(jí)查詢
      config: officeConfig,
      advanQueryForm: {},
      // 遮罩層
      queryTotal: 0,
      // 個(gè)人信息登記
      personInfoList: [],
    };
  },
  watch: {
    // 根據(jù)名稱篩選機(jī)構(gòu)樹
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.advanQueryForm = { ...queryForm, pageNum: 1, pageSize: 10 };
    this.handleQuerySuccess();
  },
  methods: {
    highSearchHandle() {
      this.handleQuerySuccess();
    },
    // 高級(jí)查詢
    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 } });
    },
  },
};
</script>

elementui的表格

• @selection-change 表格前面的select選擇
• :show-overflow-tooltip=“true” 表格顯示內(nèi)容非常多，可以…省略
• slot-scope=“scope” 如果相對(duì)內(nèi)容進(jìn)行自定義展示可以使用默認(rèn)插槽
• 序號(hào)我們需求是分頁(yè)序號(hào)要遞增

<el-table v-loading="loading" :data="綁定data數(shù)據(jù)-數(shù)組類型" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="序號(hào)" type="index" width="50" align="center">
    <template slot-scope="scope">
      <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
    </template>
  </el-table-column>
  <el-table-column label="想要展示的字段" align="center" prop="staffName" />
  <el-table-column label="申請(qǐng)?jiān)?span id="n5n3t3z"    class="token punctuation">" align="center" prop="applyReason" :show-overflow-tooltip="true" />
  <el-table-column label="申請(qǐng)時(shí)段" align="center" prop="endTime" width="180">
    <template slot-scope="scope">
      <span>{{ scope.row.startTime }}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" fixed="right">
    <template slot-scope="scope">
      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
      <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleDetail(scope.row)">詳情</el-button>
      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">刪除</el-button>
    </template>
  </el-table-column>
</el-table>

elementui的表格實(shí)現(xiàn)跨頁(yè)多選+回顯

• officeBuildingList 綁定的表格數(shù)據(jù)
• @selection-change="handleOfficeSelect" 選擇的方法
• :row-key="getKey" 唯一標(biāo)識(shí)
• :reserve-selection="true"

<el-table class="my-table" :data="officeBuildingList" @selection-change="handleOfficeSelect" ref="trainCourseTable" :row-key="getKey">
  <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
  <el-table-column label="數(shù)據(jù)" align="center" prop="字段" width="120" />
</el-table>

methods: {
	// 編輯情況回顯數(shù)據(jù)：
	// 1. 因?yàn)槭欠猪?yè)，簡(jiǎn)單做法就是一開始在create中調(diào)用獲取全部的數(shù)據(jù) pageSize：9999
	listOfficeBuilding({pageNum: 1,pageSize: 9999}).then((res) => {
		// 拿到form表單字段中的數(shù)據(jù)，在所有的數(shù)據(jù)中篩選
	  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. 打開彈窗調(diào)用接口獲取表格數(shù)據(jù)，判斷有字段并且是編輯狀態(tài)才需要回顯
	if (this.form.字段名稱 && this.form.id) {
    this.$nextTick(() => {
    	// 把篩選好的
      this.suppliesMultipleList.forEach(row => {
        this.$refs.trainCourseTable.toggleRowSelection(row, true)
      })
    })
  }
}
// 點(diǎn)擊表格前的復(fù)選框保存數(shù)據(jù)
handleOfficeSelect(val) {
  this.suppliesMultipleList = val
},
getKey(row) {
  return row.id;
},

elementui的表單

elementui的日歷

<el-calendar v-model="calendarValue">
  <template slot="dateCell" slot-scope="{date, data}">
    <div class="date">
      <div class="left">
        <span class="date-day">{{data.day.split('-')[2]}}</span>
        <span class="date-lunar">{{getClearList(data.day).lunar}}</span>
        <template v-for="item in workDateArr">
          <span class="rest-day" v-if="(item.status == '2') && (data.day == item.workDate)">放假</span>
          <span class="working-day" v-if="(item.status == '1') && (data.day == item.workDate)">班</span>
        </template>
      </div>
      <div class="date-festival">{{getClearList(data.day).festival}}</div>
    </div>
    <div style="height: 98px; overflow: hidden;">
      <template v-for="(item, index) in myScheduleCalendarPlanList">
        <div
          class="info"
          :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())"
          @click="handleDetail(item.id)"
        >
          <i class="el-icon-time" style="margin: 0px 5px;"></i>
          <span class="text-area">{{item.eventTitle}}</span>
        </div>
      </template>
    </div>
    <div class="date-add" @click="myCalendarMore(data)">
      <div>查看全部</div>
    </div>
  </template>
</el-calendar>

這個(gè)是縮小以后的效果，為了截取全部，點(diǎn)擊日期可以切換。我們這里的放假上班在系統(tǒng)有菜單進(jìn)行單獨(dú)配置，通過接口拿到數(shù)據(jù)和日歷的日期進(jìn)行匹配展示文字

vue獲取某幾天內(nèi)的日期和星期幾

// 周末
getWeeks() {
  var day3 = new Date();
  let days = [];
  // 這里的6控制的是天數(shù)
  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 = days
  console.log(this.winWeakList);
},
addDate0(time) {
  if (time.toString().length == 1) {
    time = "0" + time.toString();
  }
  return time;
},

請(qǐng)假時(shí)長(zhǎng)計(jì)算

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; // 工作開始時(shí)間
const WORK_END_TIME = 17.30; // 工作下班時(shí)間
const BREAK_TIME = 1.30; // 休息時(shí)間
const BREAK_START = 12; // 上午休息時(shí)間
const BREAK_END = 13.30; // 下午休息結(jié)束時(shí)間
const WORK_TIME = 9; //
/**
 *
 * @param {*Number} num
 * @returns 分離出來的整數(shù)和小數(shù)
 */
// 獲取某一天的下班時(shí)間
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`);
}
// 獲取某一天的開始上班時(shí)間
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`);
}

// 使用二：跨日期計(jì)算
// sTime開始日期 eTime結(jié)束日期
const calcDay = (sTime, eTime) => {
  let days = leaveBydays(sTime, eTime, 1);
  return days;
};

const leaveBydays = (sTime, eTime, complement = 0) => {
  // 把傳入的開始時(shí)間和結(jié)束時(shí)間的 分鐘和秒鐘格式化
  const stratTime =  moment(sTime).format('HH.mm');
  const endTime =  moment(eTime).format('HH.mm');

  let days
  const start1 = stratTime == "08.30" ? true : false
  const start2 = endTime == "17.30" ? true : false

  // 1. 開始時(shí)間等于上班時(shí)間和結(jié)束時(shí)間等于下班時(shí)間
  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 - weekdays
    const finallyIntHours = finallyDays * 9
    // console.log("開始時(shí)間等于上班時(shí)間和結(jié)束時(shí)間等于下班時(shí)間", finallyIntHours);
    return finallyIntHours;

  } else {

    // 1.計(jì)算出原始的天數(shù)
    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;

    // 計(jì)算第一天的日期小時(shí)數(shù)
    const startToEndOne = startDateSupplement(sTime)
    const finallyResultOne = getTime(sTime, startToEndOne)
    //console.log("日期區(qū)間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("日期區(qū)間2", finallyResultLast);
    if (finallyResultLast != 0) {
      dayTime += 1
      dayLastTime = `${finallyResultLast.hours}.${finallyResultLast.resultMinutes}`;
    } else {
      dayLastTime = 0
    }

    console.log(`原始天數(shù)${originDay}，周末天數(shù)${weekdays}，相差${dayTime}，第一天相差${dayOneTime}，最后一天相差${dayLastTime}`);


    const finallyDays = originDay - weekdays - dayTime
    const finallyIntHours = finallyDays * 9
    // const finallyDayOneTime = dayOneTime?dayOneTime:0
    // const finallyDayLastTime = dayLastTime?dayLastTime:0

    const resultTime = Number(finallyIntHours) + parseFloat(dayOneTime) + parseFloat(dayLastTime)
    console.log(finallyDays, finallyIntHours, dayOneTime, dayLastTime, resultTime);
    return resultTime < 0 ? 0 : resultTime
  }
};


// 使用一：?jiǎn)蝹€(gè)日期計(jì)算，當(dāng)天
const getTime = (beginTime, endTime) => {
  if (checkDay(beginTime)) {
    return 0
  }
  var dateDiff = endTime.getTime() - beginTime.getTime();//時(shí)間差的毫秒數(shù)
  var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//計(jì)算出相差天數(shù)

  var leave1 = dateDiff%(24*3600*1000)    //計(jì)算天數(shù)后剩余的毫秒數(shù)
  var hours = Math.floor(leave1/(3600*1000))//計(jì)算出小時(shí)數(shù)

  //計(jì)算相差分鐘數(shù)
  var leave2 = leave1%(3600*1000)    //計(jì)算小時(shí)數(shù)后剩余的毫秒數(shù)
  var minutes = Math.floor(leave2/(60*1000))//計(jì)算相差分鐘數(shù)

  //計(jì)算相差秒數(shù)
  var leave3 = leave2%(60*1000)      //計(jì)算分鐘數(shù)后剩余的毫秒數(shù)
  var seconds = Math.round(leave3/1000)

  console.log(" 相差 "+dayDiff+"天 "+hours+"小時(shí) "+minutes+" 分鐘"+seconds+" 秒")
  // return dayDiff+"天 "+hours+"小時(shí) "+minutes+" 分鐘";
  let resultMinutes = 0
  if (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
}

//判斷日期是否處于周六、周日（節(jié)假日后續(xù)完善）
const checkDay = (time) => {
  let flag = false;
  const formtTime =  moment(time).format('YYYY-MM-DD');
  if (!!workDayList.includes(formtTime)) {
    flag = false
    return flag
  }
  if (!!restDayList.includes(formtTime)) {
    flag = true
    return 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";
// 日期計(jì)算
endTimeChange(val) {
  if (this.leaveDateRange.length>1) {
    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) {
  // 根據(jù)給定的字符串，得到特定的日期
  // 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;
},

vite3使用postCss轉(zhuǎn)換rem，適配方案

// 安裝插件
npm install postcss-pxtorem --save
npm install amfe-flexible --save
npm install autoprefixer --save
// vite.config.js 配置
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import autoprefixer from "autoprefixer";
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
          ],
        }),
        postCssPxToRem({
          // 自適應(yīng)，px>rem轉(zhuǎn)換
          rootValue: 192, // 75表示750設(shè)計(jì)稿，37.5表示375設(shè)計(jì)稿，我是pc端的后臺(tái)管理所以是1920的屏
          propList: ["*"], // 需要轉(zhuǎn)換的屬性，這里選擇全部都進(jìn)行轉(zhuǎn)換
          selectorBlackList: [".el"], // 過濾掉van-開頭的class，不進(jìn)行rem轉(zhuǎn)換，我框架是element-plus
          exclude: "/node_modules", // 忽略包文件轉(zhuǎn)換rem
        }),
      ],
    },
  },
})

vite3動(dòng)態(tài)加載圖片

// 組件
<img :src="getImageUrl(index)" alt="" />
// js代碼
const getImageUrl = (index) => {
 returnnew URL(`../../../assets/img/hot${index + 1}.png`, import.meta.url).href
}

vue3使用websocket配置代碼

// 創(chuàng)建 utils/socket.js文件
let websock = null;
let global_callback = null;
const serverPort = "8080"; // webSocket連接端口
const wsuri = "ws://" + window.location.hostname + ":" + serverPort + "/websocket/portal"; // 換地址就行
console.log(wsuri);

function createWebSocket(callback) {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  if (websock == null || typeof websock !== WebSocket) {
    initWebSocket(callback);
  }
}

function initWebSocket(callback, device) {
  global_callback = callback;
  // 初始化websocket
  websock = new WebSocket(wsuri);
  websock.onmessage = function (e) {
    websocketonmessage(e);
  };
  websock.onclose = function (e) {
    websocketclose(e);
  };
  websock.onopen = function () {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    websocketOpen();
  };
  // 連接發(fā)生錯(cuò)誤的回調(diào)方法
  websock.onerror = function () {
    console.log("WebSocket連接發(fā)生錯(cuò)誤");
    //createWebSocket();啊，發(fā)現(xiàn)這樣寫會(huì)創(chuàng)建多個(gè)連接，加延時(shí)也不行
  };
}

// 實(shí)際調(diào)用的方法
function sendSock(agentData) {
  if (websock.readyState === websock.OPEN) {
    // 若是ws開啟狀態(tài)
    websocketsend(agentData);
  } else if (websock.readyState === websock.CONNECTING) {
    // 若是 正在開啟狀態(tài)，則等待1s后重新調(diào)用
    setTimeout(function () {
      sendSock(agentData);
    }, 1000);
  } else {
    // 若未開啟 ，則等待1s后重新調(diào)用
    setTimeout(function () {
      sendSock(agentData);
    }, 1000);
  }
}
function closeSock() {
  websock.close();
}
// 數(shù)據(jù)接收
function websocketonmessage(msg) {
  // console.log("收到數(shù)據(jù)："+JSON.parse(e.data));
  // console.log("收到數(shù)據(jù)："+msg);
  // global_callback(JSON.parse(msg.data));
  // 收到信息為Blob類型時(shí)
  let result = null;
  // debugger
  if (msg.data instanceof Blob) {
    const reader = new FileReader();
    reader.readAsText(msg.data, "UTF-8");
    reader.onload = (e) => {
      console.log(e);
      if (typeof reader.result === "string") {
        result = JSON.parse(reader.result);
      }
      //console.log("websocket收到", result);
      global_callback(result);
    };
  } else {
    result = JSON.parse(msg.data);
    //console.log("websocket收到", result);
    global_callback(result);
  }
}
// 數(shù)據(jù)發(fā)送
function websocketsend(agentData) {
  console.log("發(fā)送數(shù)據(jù)：" + agentData);
  websock.send(agentData);
}
// 關(guān)閉
function websocketclose(e) {
  console.log("connection closed (" + e.code + ")");
}
function websocketOpen(e) {
  // console.log(e);
  console.log("連接打開");
}
export { sendSock, createWebSocket, closeSock };

// 組件中使用， 鏈接websoket
import { createWebSocket } from '@/utils/socket'

const global_callback = (msg) => {
  console.log('收到服務(wù)器信息：' + JSON.stringify(msg))
}
createWebSocket(global_callback)

// 發(fā)送消息
import { sendSock } from '@/utils/socket'
sendSock(JSON.stringify(給后端傳遞的信息))

element-plus + vite3 分頁(yè)中文更改

// main.js中修改，我是全局引入的element-plus組件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn';

zhCn.el.pagination.total = '共 {total} 條';
app.use(ElementPlus, { locale: zhCn })

有用的網(wǎng)站分享

rgb顏色和十六進(jìn)制轉(zhuǎn)換： https://www.toolhelper.cn/Color/RGBToHex
lottie動(dòng)畫預(yù)覽： https://aitexiaoy.github.io/a-viewer/

element ui封裝的文件上傳+下載+預(yù)覽+刪除

地址：文件上傳+下載+預(yù)覽+刪除 文章地址

element ui圖片上傳組件封裝+校驗(yàn)黑白照片

地址：element ui圖片上傳組件封裝+校驗(yàn)黑白照片 文章地址文章來源地址http://www.zghlxwxcb.cn/news/detail-696876.html

到了這里，關(guān)于前端使用elementui開發(fā)后臺(tái)管理系統(tǒng)的常用功能（持續(xù)更新）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！