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

  • vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求已关闭评论
  • 27 次浏览
  • A+
所属分类:Web前端
摘要

  最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把自己卷死了(没有办法,项目经理说项目要1周写界面,2周发版,我这个项目前端只我1个人,后端有3个人…)…….我只想说的是,即便你编码速度再快,也无可避免地面临加班。因为很多公司就是给你直接先定时间,然后反推,又不加人又不减需求,你能咋办?除了把自己往死里逼,直到某一天自己终于受不了,然后换个坑继续重复这样的悲剧~下面要说的是某一个界面中的一个小模块。

  最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有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天工作量的界面需求

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

  代码实现

  分析:要能拖拽,要能动态编辑。拖拽,用第三方插件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代码:

<script setup lang="ts"> import draggable from "vuedraggable"; const siteList = ref<any>([   { name: "火车站广场", id: 0, isBigSite: false }, //首站 ]); for (let i = 0; i < 30; i++) {   siteList.value.push({ name: "站点" + i, id: i + 1, isBigSite: false }); } siteList.value.push({ name: "汽车西站", id: siteList.length + 1, isBigSite: false }); //末站 const appTags = [   { name: "上行", id: 1 },   { name: "下行", id: 2 }, ]; const state = reactive({   drag: false,   activedIndex: -1, //当前激活项索引   activedApp: "",   totalSiteNums: 0, //总站数   bigSiteNums: 0, //大站数量 }); //获取tab类型样式 const getTagType = (tag: any) => {   return tag.id == state.activedApp ? "" : "info"; }; //点击标签 const onClickTag = (tag: any) => {   state.activedApp = tag.id; }; const isEditSiteInfo = ref(false); //是否是编辑 //编辑信息 const onEditInfo = () => {   isEditSiteInfo.value = true; }; //线路预览 const onLineView = () => {}; //获取固定样式 const getFixedClass = (index: number) => {   return index == 0 || index == siteList.value.length - 1; }; //点击站点项 const onClickSiteItem = (index: number) => {   console.log("onClickSiteItem");   state.activedIndex = index; }; //是否是首站 const isStartSite = (index: number) => {   return index == 0; }; //是否是末站 const isEndSite = (index: number) => {   return index == siteList.value.length - 1; }; //是否是首末站 const isStartOrEndSite = (index: number) => {   return isStartSite(index) || isEndSite(index); }; const addSiteItem = {   name: "填写站点名称",   id: -1,   isBigSite: false, }; //左边添加站点 const onLeftAddSite = (index: number) => {   siteList.value.splice(index, 0, addSiteItem); }; //右边添加站点 const onRightAddSite = (index: number) => {   siteList.value.splice(index + 1, 0, addSiteItem); }; //删除站点项 const delSiteItem = (index: number) => {   siteList.value.splice(index, 1); }; const visible = ref(false); const allSiteList:any = []; for (let i = 0; i < 20; i++) {   let item: any = { name: "张三" + i, code: "00c" + i, lineName: i + 1 + "路" };   // let disabled = driverTags.value.some((s: any) => s.code == item.code);   // item.disabled = disabled;   allSiteList.push(item); } //选择站点 const onChangeSite = (val: any) => {   const item = allSiteList.find((f: any) => f.code == val);   siteList.value.splice(activedIndex.value, 0, item); }; //切换大站小站 const onChangeBigSite = (index: number) => {   siteList.value[index].isBigSite = !siteList.value[index].isBigSite; }; const { totalSiteNums, bigSiteNums, drag, activedIndex } = toRefs(state); </script> 

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

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

.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会导致地图显示空白,但是浏览器控制又不会报错的问题!