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

　　最近在编写前端界面，硬是一人一周时间加班加点写完了一个项目的前端界面（一级菜单有12个页面+一个控制台大屏，二三级界面有N个），之前预估前端界面的编写需要一个月，我是自己把自己卷死了（没有办法，项目经理说项目要1周写界面，2周发版，我这个项目前端只我1个人，后端有3个人...）.......下面要说的是某一个界面中的一个小模块。

　　产品原型

需求说明：

【站点配置】

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、如果有添加操作，但未添加站点信息。不可以保存。提示“请添加站点信息或删除空白站点”

　　我做出来的界面效果

　　代码实现

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

　　前端项目技术栈：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 = ref<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.value.push(item);
}
//选择站点
const onChangeSite = (val: any) => {
  const item = allSiteList.value.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代码如下：

.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;
    }
  }
}

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