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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
JS实现的自定义map方法示例
May 17 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
Vue自定义指令详解
2017/07/28 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python import与from import使用及区别介绍
2018/09/06 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python绘制随机网络图形示例
2019/11/21 Python
python numpy数组中的复制知识解析
2020/02/03 Python
django form和field具体方法和属性说明
2020/07/09 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
python tkinter实现连连看游戏
2020/11/16 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
工程质量承诺书范文
2014/03/27 职场文书
党支部承诺书范文
2014/03/28 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
学习三严三实心得体会
2014/10/13 职场文书
自查自纠工作总结
2014/10/15 职场文书
大连星海广场导游词
2015/02/10 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书