vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求

  最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把自己卷死了(没有办法,项目经理说项目要1周写界面,2周发版,我这个项目前端只我1个人,后端有3个人...).......我只想说的是,即便你编码速度再快,也无可避免地面临加班,即便你编码的速度能赶上产品做界面的速度,你也赶不上产品改界面需求的速度。因为很多公司就是给你直接先定时间,然后反推,又不加人又不减需求,能咋办呢?下面要说的是某一个界面中的一个站点配置模块。

产品原型

vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求插图

需求说明:

【站点配置】

1、站点配置,需要线路属性配置完后才可以配置,编辑的时候做校验,线路属性没有配置完,不可以编辑,禁用状态。

2、上下行:需要选择配置上行还是下行的站点,单选。是否有上下行,需要根据线路属性来判断。

2、统计:统计上行或下行站点数量,大站数量

3、站点配置:

     3.1、场站:根据线路属性配置的上下行场站,如果为上行,上行场站在前下行场站在后,在图中显示场站名称。反之,下行场站在前上行场站在后。

    3.2、场站显示:上行场站,标记“首”,无“--”里程信息。下行场站,标记“末 ”,无“--”里程信息。反之,下行场站,标记“首”,无“--”里程信息。上行场站,标记“末 ”,无“--”里程信息

    3.3、场站操作:“首”场站选中后,左侧显示“+”,可以添加第一个站点。“末”场站选中后,由侧显示“+”,可以添加倒数第一个站点。

    3.4、站点显示:显示序号、站间距、时长。站间距根据地图计算,时长需要输入,3位整数,单位分钟。

    3.5、站点移动:鼠标选中,移动鼠标可以拖动排序。

   3.6、站点操作:鼠标选中后,可以往前或往后添加站点,也可以删除站点,并自动排序。

   3.7、添加站点:添加空白站点,点击可以添加站点,按照站点名字搜索和选择,数据来源站点管理。

   3.8、时长修改:不需要选中站点,可以直接修改时长。

   3.9、大站设置:鼠标选中后,选中左上角图标,设置为大站点

   3.10、 站点修改:不做站点的编辑操作,只可以删除在添加。

   3.11、如果有添加操作,但未添加站点信息。不可以保存。提示“请添加站点信息或删除空白站点”

我做出来的界面效果

vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求插图1

vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求插图2

代码实现

  分析:要能拖拽,要能动态编辑。拖拽,用第三方插件vuedraggable,布局用flex。注意安装的是vue3版本,yarn add vuedraggable@next,一开始有考虑过vue-grid-layout,后面感觉grid布局操作会更复杂,所以果断放弃。

  拿到产品需求时,先通读一遍需求,然后看一遍UI界面,再根据需求,脑袋里面快速闪现技术方案,如果要高效,尽量避免自己造轮子,通用技术通常都有现成轮子,只有定制化的功能需要自己动手,先把整理的解决思路和自己即将采用的技术在脑子里面推演一遍,当在脑子里开发完成之后,你就可以心无旁骛,然后一气呵成,快速编码了。写代码也是一鼓作气,再而衰,三而竭!

  前端项目技术栈:vue3+ts+vite3.x+element plus+wujie微前端。

  Dom代码结构:

template>
  div class="site-set">
    div class="operator-box">
      div class="tag-box">
        el-tag
          v-for="tag in appTags"
          :key="tag.name"
          size="large"
          :closable="false"
          round
          :type="getTagType(tag)"
          @click="onClickTag(tag)"
          class="cursor-pointer"
        >
          {{ tag.name }}
        el-tag>
      div>
      div class="tools-box">
        xdEditCancleBtn v-model="isEditSiteInfo" @onOK="onEditInfo">xdEditCancleBtn>
        el-link type="primary" :underline="false" @click="onLineView()">
          i class="iconfont icon-xianlu">i>线路预览
        el-link>
      div>
    div>
    div class="total-info-box">
      span class="total-num">站点总数:{{ totalSiteNums }}站span>
      span>大站数量:{{ bigSiteNums }}个span>
    div>
    div class="site-list-box xd-scrollBar">
      draggable
        class="wrapper-site"
        v-model="siteList"
        @start="drag = true"
        @end="drag = false"
        item-key="index"
        filter=".fixed"
      >
        template #item="{ element, index }">
          div
            class="site-item"
            :class="{ actived: activedIndex == index, fixed: getFixedClass(index) }"
            @click="onClickSiteItem(index)"
          >
            span class="text">
              template v-if="isStartSite(index)">template>
              template v-else-if="isEndSite(index)">template>
              template v-else>
                input class="time" />
              template>
            span>
            span class="distance">
              template v-if="isStartOrEndSite(index)"> - template>
            span>
            span class="content">
              el-popover
                v-if="element.id == -1 && activedIndex == index"
                placement="bottom"
                :width="196"
                trigger="click"
                :visible="visible"
              >
                template #reference>
                  span class="site-name" @click="visible = !visible"
                    >{{ element.name }}
                  span>
                template>
                el-select
                  placeholder="请输入站点信息"
                  class="select-block-mini"
                  popper-class="popper-block"
                  filterable
                  @change="onChangeSite"
                >
                  el-option
                    v-for="item in allSiteList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    :disabled="item.disabled"
                  >
                    div class="select-item">
                      div class="row">
                        span class="name">
                          {{ item.name }}
                        span>
                        span class="line-name">{{ item.lineName }}span>
                      div>
                      div class="row">
                        span class="code">{{ item.code }}span>
                      div>
                    div>
                  el-option>
                el-select>
              el-popover>
              span v-else class="site-name">{{ element.name }} span>
              span class="site-index">{{ index + 1 }}span>
              span
                v-if="element.isBigSite && activedIndex != index"
                class="triangle-block"
              >span>
              span
                @click="onChangeBigSite(index)"
                title="切换大小站"
                v-if="element.id != -1 && activedIndex == index"
                class="triangle-block edit"
              >span>
            span>
            span
              v-if="!isStartOrEndSite(index)"
              class="del-btn"
              @click="delSiteItem(index)"
              title="移除"
            >
              i class="iconfont icon-shanchu"> i>
            span>
            span
              @click="onLeftAddSite(index)"
              class="plus left"
              v-if="!isStartSite(index)"
              title="左边添加"
            >
              i class="iconfont icon-jia">i>
            span>
            span
              @click="onRightAddSite(index)"
              class="plus right"
              v-if="!isEndSite(index)"
              title="右边添加"
            >
              i class="iconfont icon-jia">i>
            span>
          div>
        template>
      draggable>
    div>
  div>
template>

ts代码:


  css代码较多,已独立css文件,css代码如下:

vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求插图3vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求插图4

.operator-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 36px;
  align-items: center;
  .tag-box {
    .el-tag {
      margin-right: 15px;
      padding: 0px 15px;
    }
  }
  .tools-box {
    display: flex;
    align-items: center;
    .iconfont {
      padding-right: 4px;
    }
  }
}
.total-info-box {
  width: 100%;
  display: flex;
  align-items: center;
  height: 44px;
  color: var(--sub-title-color);
  .total-num {
    padding-right: 10px;
  }
}
.site-list-box {
  height: 488px; //2行的高度
  overflow-y: auto;
}
.wrapper-site {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: -4px;
}
.site-item {
  width: 45px;
  height: 220px;
  color: var(--sub-title-color);
  display: flex;
  flex-direction: column; //220 - 160 -22
  align-items: center;
  position: relative;
  margin-bottom: 4px;
  .text {
    width: 45px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    .time {
      width: 45px;
      height: 22px;
      border: 1px solid #cbcdd3;
      border-radius: 2px;
    }
  }
  &.fixed {
    .text {
      background-color: var(--hover-font-color);
      color: #f7f9f7;
      font-size: 12px;
    }
  }
  .distance {
    height: 38px;
    color: #4f5a68;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    height: 160px;
    background-color: #f7f9f7;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    position: relative;
    .site-name {
      writing-mode: vertical-rl;
      text-orientation: upright; /* 数字垂直展示 */
      // position:absolute;left:50%;top:50%;--webkit-transform:translate(-50%,-50%);
    }
    .site-index {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      background: #e4e6ec;
      color: var(--sub-title-color);
      writing-mode: horizontal-tb;
      text-align: center;
      line-height: 20px;
    }
    $bw: 10px;
    .triangle-block {
      display: inline-block;
      height: 0;
      width: 0;
      border-top: $bw solid #faad14;
      border-bottom: $bw solid transparent;
      border-left: $bw solid transparent;
      border-right: $bw solid transparent;
      transform: rotate(135deg);
      transform-origin: top;
      position: absolute;
      top: 6px;
      left: -4px;
      &.edit {
        border-top: $bw solid #004eff;
      }
    }
  }
  .del-btn {
    display: flex;
    justify-content: center;
    height: 24px;
    align-items: center;
    width: 24px;
    position: absolute;
    bottom: -24px;
    left: calc(50% - 12px);
    &:hover {
      .iconfont {
        color: red;
      }
    }
  }
  //左右加号
  .plus {
    display: none;
    position: absolute;
    z-index: 9;
    top: calc(50% + 16px);
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center;
    background-color: var(--main-btn-color);
    .iconfont {
      font-size: 14px;
      color: white;
    }
    &.left {
      left: -16px;
    }
    &.right {
      right: -16px;
    }
  }
  .iconfont {
    font-size: 14px;
    display: none;
    &.icon-shanchu {
      color: #f53f3f;
    }
  }
  &.actived {
    .content {
      border: 1px solid var(--main-btn-color);
      color: var(--main-btn-color);
      background: #f7faff;
    }
    .iconfont,
    .plus {
      display: flex;
    }
  }
}

View Code

  vue组件中引入css代码:

style lang="scss" scoped>
@import "./scss/siteSet.scss";
style>
style lang="scss">
.el-select {
  &.select-block-mini {
    width: 171.27px;
  }
}
style>

  其实我花了1.5h,主要是按UI的稿子调样式,因为很赶,所以代码很糙,我早就有了后面重构的觉悟,那么短的时间内,几乎不可能想得很周到,我只能想办法在最短的时间内实现需求。里面其实有部分功能没有实现,因为后端一期不现实。最近写代码真是写得手都快抽搐了,即便是各种复制粘贴也累啊,界面实在太多了.....

  注意:高德webapi2.0跟mockjs有冲突,启用mock会导致地图显示空白,但是浏览器控制又不会报错的问题!

文章来源于互联网:vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求

THE END
分享
二维码