Vue时间轴 vue-light-timeline的用法说明


Posted in Javascript onOctober 29, 2020

轻量的vue时间轴组件

install

npm install vue-light-timeline

如果你使用的是yarn

yarn add vue-light-timeline

usage

import LightTimeline from 'vue-light-timeline';

Vue.use(LightTimeline);

<template>
 <light-timeline :items='items'></light-timeline>
</template>
 
export default {
 data () {
  return {
   items: [
    {
     tag: '2019-02-12',
     content: '测试内容'
    },
    {
     tag: '2019-02-13',
     type: 'circle',
     content: '练习内容'
    }
   ]
  }
 }
}

或者你还可以为时间轴的每个部分传递插槽:

<template>
 <light-timeline :items='items'>
  <template slot='tag' slot-scope='{ item }'>
   {{item.date}}
  </template>
  <template slot='content' slot-scope='{ item }'>
   {{item.msg}}
  </template>
 </light-timeline>
</template>
<script>
export default {
 data () {
  return {
   items: [
    {
     date: '2019-02-12',
     msg: '测试内容'
    },
    {
     date '2019-02-13',
     msg: '练习内容'
    }
   ]
  }
 }
}

Vue时间轴 vue-light-timeline的用法说明

自己写个好看点的样式就行了

补充知识:Vue可移动水平时间轴

里程碑时间轴具体实现

效果图

Vue时间轴 vue-light-timeline的用法说明

编辑里程碑效果图

Vue时间轴 vue-light-timeline的用法说明

<template>
<div class="state_grade">
<!--    <mile-stone :projectId="projectData.proId" :projectName="projectData.proName" :proNum="projectData.proNum"></mile-stone>-->
    <div class="timeLine" style="overflow: hidden;">
     <div style="width: 10%; display: inline-block; margin-left: 5px;">
      <el-button @click="mileStoUpdateVisible = true" type="primary">编辑里程碑</el-button>
     </div>
     <div style="width: 70%;display: inline-block" align="center">
      <div style="width: 20%;display: inline-block; font-size: 14px;">里程碑状态:</div>
      <div style="width: 100px;display: inline-block; font-size: 14px; ">开始 <img class="node_picture" src="../../assets/images/timeLineA.png"></div>

      <div style="width: 100px;display: inline-block; font-size: 14px;">超期 <img class="node_picture" src="../../assets/images/timeLineB.png"> </div>

      <div style="width: 100px;display: inline-block; font-size: 14px;">关闭 <img class="node_picture" src="../../assets/images/timeLineC.png"> </div>

     </div>

     <div class="my_timeline_prev" @click="moveLeft">
      <img src="../../assets/arrow_left_blue.png" class="my_timeline_node"/>
      <!--   <div class="my_timeline_item_line" style="margin-top: -18px;"></div>-->
      <!--   <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">上</div>-->
     </div>
     <div v-if="destroyIncomeStatistics" class="ul_box">
      <ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
       <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">

        <el-tooltip placement="top" effect="light">
         <div slot="content" class="tooltip">
          <el-row>
           <el-col :span="24">{{'阶段名称:'+item.stageName}}</el-col>
          </el-row>
          <el-row>
           <el-col :span="24">{{'阶段目标:'+item.stageTarget}}</el-col>
          </el-row>
          <el-row>
           <el-col :span="24">{{'开始时间:'+item.startTime}}</el-col>
          </el-row>
          <el-row>
           <el-col :span="24">{{'结束时间:'+item.endTime}}</el-col>
          </el-row>
          <el-row>
           <el-col :span="24">{{'验收标准:'+item.acceptStar}}</el-col>
          </el-row>
          <el-row>
           <el-col :span="24">
            <span v-if="item.milepostState==='1'">里程碑状态:打开</span>
            <span v-if="item.milepostState==='2'">里程碑状态:超期</span>
            <span v-if="item.milepostState==='3'">里程碑状态:关闭</span>
           </el-col>
          </el-row>
         </div>
         <!--圈圈节点-->
         <!--       <div class="my_timeline_node" style="backgroundColor: #999; width: 28px;height: 28px;" @click="changeActive(index)" :class="{active: index == timeIndex}"></div>-->
         <div class="my_timeline_node">
          <div style="background-color: #FCFCFC">
           <img class="my_timeline_picture" v-if="item.milepostState==='1'"
              src="../../assets/images/timeLineA.png">
           <img class="my_timeline_picture" v-if="item.milepostState==='2'"
              src="../../assets/images/timeLineB.png">
           <img class="my_timeline_picture" v-if="item.milepostState==='3'"
              src="../../assets/images/timeLineC.png">
          </div>
         </div>
        </el-tooltip>
        <!--线-->
        <div
         :class="[timeLineList.length==index+1?my_timeline_item_line_last:my_timeline_item_line_not_last]"></div>
        <!--标注-->
        <div class="my_timeline_item_content">
         <div>{{item.endTime}}</div>
         <el-tooltip placement="top" effect="light">
          <div slot="content">{{item.endTime}}<br/>{{item.stageName}}</div>
          <div class="detail_info">{{item.stageName}}</div>
         </el-tooltip>
        </div>
       </li>
      </ul>
     </div>
     <div class="my_timeline_next" @click="moveRight">
      <img src="../../assets/arrow_right_blue.png" class="my_timeline_node"/>
      <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">下</div>
     </div>
    </div>
    <el-dialog :title="titleMessage" center :visible="mileStoUpdateVisible" width="50%"
          @open="onMileStoUpdateVisibleOpen()" @close="closeMileStone()">
     <stone-detail :projectId="this.projectId" :proNum="this.projectData.proNum" @closeMileStone="closeMileStone()" ref="stone-detail"
            @refreshMileStoneData="searchMileStone()"></stone-detail>
    </el-dialog>
   </div>
  </div>
</template>

<script>
  import API from '../../api/api_project';
  import StoneDetail from "../../components/project-info/stonedetail"
  import MemberDetail from "../../components/project-info/memberdetail.vue"
  export default {
    name: 'project-detail',
    components:{
      MemberDetail,
      StoneDetail,
    },
    data() {
      return {
        destroyIncomeStatistics:true,
        loading: false,
        titleMessage: '',
        mileStoUpdateVisible: false,
        my_timeline_item_line_last: "my_timeline_item_line_last",
        my_timeline_item_line_not_last: "my_timeline_item_line_not_last",

        menuTree:[],
        timeLineList: [],
        page:{
          total:0,
          pageNum: 0,
          pageSize: 10,
        },
        model: {
          select: "",
          searchConent: "",
          projectId: "",
          proName:"",
        },
        projectData:{
          proId: '',
          proNum: '',
          proName: '',
          hwDept: '',
          hwPo: '',
          busineMode: '1',
          buildProDate: '',
          startDate: '',
          expEndDate: '',
          hwPoDate: '',
          hwPoEndDate:'',
          realEndDate: '',
          proManageId:'',
          proQa:'',
          hwPm:'',
          proEstNum: '0',
          proState:'1'
        },
        proPeoId:'',
        projectId:'',
        proPeoUpdateVisible:false,
        projectMember: [],
      }
    },
    mounted(){
      this.projectId=this.$route.params.projectId

      this.searchMileStone()
      this.sortDataArray(this.timeLineList)
      //到数据库获取projectId对应的信息列表存入projectData
      API.getProjectInfo(this.projectId).then((data)=>{
        this.projectData=data.data;
        this.projectData.busineMode = this.projectData.busineMode.toString();
        this.projectData.proState = this.projectData.proState.toString();
      })
      this.search();
    },
    methods: {
      searchMileStone() {
        console.log('项目id:'+this.projectId)
        let params={
          proId:this.projectId,
        };
        API.getMileStoneList(params).then(data => {
          let result = data.data
          if (result && result.list) {
            if(this.timeLineList.length>0){
              this.timeLineList.splice(0,this.timeLineList.length);
            }
            for(var i=0;i<result.list.length;i++){
              this.timeLineList.splice(i, 1, result.list[i])
            }
            this.sortDataArray(this.timeLineList)
          }

        },({msg})=>{
          this.$message.error(msg);
        });
console.log('刷新里程碑列表')
console.log(this.timeLineList)
      },

      closeMileStone() {
        this.mileStoUpdateVisible = false;
        // this.projectId = '';
      },
      onMileStoUpdateVisibleOpen() {
        this.titleMessage = this.projectData.proNum + '项目里程碑';
        this.$nextTick(() => {
          let form = this.$refs["stone-detail"];
          form.initPage();
        });
      },
      changeActive(index) {
        this.timeIndex = index;
      },
      moveLeft() {
        let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
        let listNum = 0;

        if (Math.abs(marginLeft) > 10) {
          this.$refs.mytimeline.style.marginLeft = marginLeft + 120 + 'px';
        }
      },
      moveRight() {
        let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
        if (marginLeft <= 10 && (marginLeft >= -(this.timeLineList.length * 120))) {
          this.$refs.mytimeline.style.marginLeft = marginLeft - 120 + 'px';
        }
      },
//对数组根据日期进行排序
      sortDataArray(dataArray) {
        return dataArray.sort(function (a, b) {
          return Date.parse(a.endTime.replace(/-/g, "/")) - Date.parse(b.endTime.replace(/-/g, "/"));
        })
      },

      sortByKey(array,key){
        return array.sort(function(a,b){
          var y = a[key];
          var x = b[key];
          return((x<y)?-1:((x>y)?1:0));
        })

      },
      handleCurrentChange(val) {
        this.page.pageNum = val ;
        this.search();
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.search();
      },
      handleSearch(){
        this.page.pageNum= 0;
        this.search();
      },
      }
</script>

 .content {
  height: 100px;
 }

 .my_timeline_next {
  float: left;
  display: inline-block;
  background-color: #FCFCFC;
  cursor: pointer;
 }

 .my_timeline_prev {
  width: 50px;
  float: left;
   margin-top: 110px;
 }

 .my_timeline_next {
  width: 34px;
  margin-top: 80px;
 }

 .el-col-24 {
  margin-left: 10px;
  padding-bottom: 5px;
 }

 .el-col-12 {
  margin-left: 10px;
 }

 .tooltip {

 }

 .ul_box {
  width: 80%;
  height: 120px;
  display: inline-block;
  float: left;
  margin-top: 50px;
  overflow: hidden;
 }

 .my_timeline_item {
  display: inline-block;
  width: 150px;
 }

 .my_timeline_node {
  background-color: #FCFCFC;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  width: 40px;
  height: 40px;
 }

 .node_picture {
  //margin-top: 20px;
  height: 25px;
  width: 25px;
  margin-left: 5px;
  margin-bottom: -7px;
 }

 .my_timeline_picture {
  margin-top: 13px;
  height: 25px;
  width: 25px;
 }

 .my_timeline_node.active {
  background-color: #fff !important;
  border: 6px solid #f68720;
 }

 .my_timeline_item_line_last {
  width: 100%;
  height: 10px;
  margin: -14px 0 0 28px;
  border-left: none;
 }

 .my_timeline_item_line_not_last {
  width: 100%;
  height: 10px;
  margin: -14px 0 0 25px;
  border-top: 2px solid #E4E7ED;
  border-left: none;
 }

 .my_timeline_item_content {
  margin: 10px 0 0 -10px;
  width: 90%; /*根据自己项目进行定义宽度*/
  font-size: 14px;
 }

 .detail_info {
  width: 80%;
  height: 250px;
  padding-bottom: 50px;
  overflow: hidden; /*设置超出的部分进行影藏*/
  text-overflow: ellipsis; /*设置超出部分使用省略号*/
  white-space: nowrap; /*设置为单行*/
  font-size: 14px;
 }
 .state_grade.process_wrap{
  border-color: #e4ebf0;
  margin-top: 150px;
  border-radius: 2px;
  padding-bottom: 10px;
 }

 .fall-back {
  float:right;
  margin-right: 20px;
  margin-bottom:50px;
 }
 .state_grade{
  border: 1px solid #e6e6e6;
  background: #FCFCFC;
  padding: 10px;
  //position: relative;
  /*height: 90px;*/
  height: 250px;
  margin-bottom: 15px;
  /*margin-top: 15px;*/
 }
 .title_top{
  height: 33px;
 }
 .obj_tit_wrap{
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 3px;
  font-size: 14px;
 }

 .obj_tit_mile{
   width: 150px;
   height: 35px;
 }

 .tit_deco{
  color: #9a9a9a;
  font-size: 14px;
 }
 .add_contain{
  display:inline-block;
  padding-bottom: 10px;
  padding-top: 20px;
 }
 .project_content_warp{
  background: #fdfdfd;
  margin-bottom: 15px;
 }
 .project_job_add{
  padding-left: 30px;
  background: #FCFCFC;
  border-bottom: 1px solid #E5E5E5;
  line-height: 10px;
  margin-bottom: 15px;
  font-size: 14px;
 }
 .project_info_span{
  display:inline-block;
  padding-left: 10px;
 }

 .el-col-8{
  height: 50px;
 }
</style>

编辑里程碑

stonedetail.vue

<template>

 <div>
  <el-row>
   <el-col :span="23">
    <div style="margin-top: 10px">
     <el-tag effect="dark" style="font-size: 16px;width: 110px;text-align: center">里程碑</el-tag>
    </div>
   </el-col>
   <el-col :span="1">
    <img src="../../assets/images/add.png" style="width: 30px;height: 30px;margin-top: 10px" @click="addItems()"/>
   </el-col>
  </el-row>
  <hr/>

  <el-row style="text-align: center">
   <el-col :span="3">
    <el-tag style="width: 100%;font-size: 14px">序 号</el-tag>
   </el-col>
   <el-col :span="8">
    <el-tag style="width: 100%;font-size: 14px">阶段名称</el-tag>
   </el-col>
   <el-col :span="7">
    <el-tag style="width: 100%;font-size: 14px">起始时间</el-tag>
   </el-col>
   <el-col :span="5">
    <el-tag style="width: 100%;font-size: 14px">结束时间</el-tag>
   </el-col>
  </el-row>

  <el-form label-width="100px" align="left" ref="form" style="text-align: left;" :model="model">
   <div v-for="(item, index) in model.timeLineList" :key="index">
    <el-row>
     <el-col :span="3">
      <input style="text-align: center" class="el-input__inner" type="text" v-model="index" disabled="true">
     </el-col>
     <el-col :span="8">
      <input placeholder="请输入阶段名称" style="text-align: center" class="el-input__inner" type="text"
          v-model="item.stageName">
     </el-col>
     <el-col :span="6">
      <el-date-picker
       style="width: 100%"
       type="date"
       :editable="false"
       v-model="item.startTime"
       placeholder="请选择起始时间"
       format="yyyy-MM-dd"
       value-format="yyyy-MM-dd"
      >
      </el-date-picker>

     </el-col>
     <el-col :span="6">
      <el-date-picker
       style="width: 100%"
       type="date"
       :editable="false"
       v-model="item.endTime"
       placeholder="请选择结束时间"
       format="yyyy-MM-dd"
       value-format="yyyy-MM-dd"
      >
      </el-date-picker>
     </el-col>
    </el-row>

    <el-row>
     <el-col :span="3">
      <input placeholder="阶段目标" style="text-align: center;" class="el-input__inner" type="text" disabled="true">
     </el-col>
     <el-col :span="20">
      <el-input v-model="item.stageTarget" placeholder="请输入阶段目标"></el-input>
      <!--     <textarea placeholder="请输入阶段目标" v-model="item.stageTarget" style="height: 30px;" class="el-input__inner" type="text"></textarea>-->
     </el-col>
    </el-row>

    <el-row>
     <el-col :span="3">
      <input placeholder="验收标准" style="text-align: center;" class="el-input__inner" type="text" disabled="true">
     </el-col>
     <el-col :span="20">
      <el-input v-model="item.acceptStar" placeholder="请输入验收标准"></el-input>
     </el-col>
    </el-row>

    <el-row>
     <el-col :span="3">
      <input placeholder="里程碑状态" style="text-align: center;" class="el-input__inner" type="text" disabled="true">
     </el-col>
     <el-col :span="20">
      <template>
       <el-select v-model="item.milepostState" placeholder="请选择">
        <el-option
         v-for="item in milepostStateList"
         :key="item.ref_id"
         :label="item.ref_value"
         :value="item.ref_id">
        </el-option>
       </el-select>
      </template>
     </el-col>

     <el-col :span="1">
      <img src="../../assets/images/delete.png" style="width: 30px;height: 30px" @click="deleteItems(index)"/>
     </el-col>
    </el-row>
   </div>
  </el-form>
  <div style="text-align: center;margin-top: 30px">
   <el-button type="primary" @click="submit()">确认修改</el-button>
  </div>
 </div>


</template>

<script>
  import API from '../../api/api_project';

  export default {
    name: "stoneDetail",
    props: ['projectId', 'proNum'],
    watch: {
      'proId': {
        // projectId,所以每次都能监听到变化
        immediate: true,
        handler: function (val) {
          if (!val) return;
          this.onProjectIdChange(val);
        }
      }
    },
    data() {
      return {
        proId:'',
        milepostStateList: [{
          ref_id: "1",
          ref_value: '打开',
          ref_key: '1'
        }, {
          ref_id: "2",
          ref_value: '超期',
          ref_key: '2'
        }, {
          ref_id: "3",
          ref_value: '关闭',
          ref_key: '3'
        }],
        deleteList: [],
        model: {
          timeLineList: [],
        },

      }
    },
    methods: {
      /**
       * 提交修改的信息
       */
      submit: function () {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            this.$message.error('请填写正确信息');
            return;
          }


          console.log('编辑里程碑结果:')
          console.log(this.model.timeLineList)

          let proMileposts = this.model.timeLineList

          API.updatetMileStone(proMileposts).then(data => {
            if (data.code == 200) {
              this.$message.success("修改成功");
              this.refreshMileStoneData();
              this.close();
            } else {
              this.$message.error(data.msg);
              // this.close();
            }
          })


        });
      },
      close() {
        this.$emit("closeMileStone");
        this.proId=''
        this.model.timeLineList.splice(0,this.model.timeLineList.length)
      },
      refreshMileStoneData() {
        this.$emit("refreshMileStoneData");

      },
      addItems() {
        this.model.timeLineList.push({
          milepostId:'',
          proId: this.proId,
          stageName: '',
          startTime: this.addDate(),
          endTime: this.addDate(),
          stageTarget: '',
          acceptStar: '',
          deliverableName: '',
          milepostState: '1',
        });

      },
      addDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      deleteItems(index) {
        this.$confirm('确认删除该记录吗?', '提示', {
          confirmButtonClass: 'el-button--warning'
        }).then(() => {
          if(this.model.timeLineList[index].milepostId)
          {
            API.deleteMileStone(this.model.timeLineList[index].milepostId).then(data=>{
              if(data.code===200)
              {
                this.$message.success("删除成功");
                this.model.timeLineList.splice(index, 1);
                this.refreshMileStoneData();
              }else {
                this.$message.error(data.msg);
              }
            })
          }
          else{
            this.model.timeLineList.splice(index, 1);
          }

        }).catch(() => {});


      },
      onProjectIdChange(id) {
        this.model.timeLineList.splice(0,this.model.timeLineList.length)
        // if (id) {
          let params={
            proId:id,
          };
          API.getMileStoneList(params).then(data => {
            let result = data.data
            if (result && result.list) {
              for(var i=0;i<result.list.length;i++){
                this.model.timeLineList.splice(i, 1, result.list[i])
              }
            }
          }, ({msg}) => {
            this.$message.error(msg);
          });
        // }
        console.log('dailog打开里程碑列表')
        console.log(this.model.timeLineList)
      },
      initPage() {
         this.proId=this.projectId;
        if (this.proId) {
          this.onProjectIdChange(this.proId);
        }

      }
    },
  }
</script>

<style scoped>

</style>

以上这篇Vue时间轴 vue-light-timeline的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 #Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 #Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 #Javascript
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php中opendir函数用法实例
2014/11/15 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
医学生个人求职信范文
2014/02/07 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
租车协议书范本2014
2014/11/17 职场文书
公司年夜饭通知
2015/04/25 职场文书
论文答辩开场白大全
2015/05/27 职场文书
企业年会祝酒词
2015/08/11 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL