生鲜配送ERP系统_开源升鲜宝供应链系统的开发过程展现（前端开发协同过程）一、杭州生鲜配送系统_升鲜宝_SaaS全链路生鲜供应链管理系统_升鲜宝_15382353715

 生鲜配送ERP系统_开源升鲜宝供应链系统的开发过程展现（前端开发协同过程）一、杭州生鲜配送系统_升鲜宝_SaaS全链路生鲜供应链管理系统_升鲜宝_15382353715

 

1、form内元素排版如下图（紧凑一些，对齐）

 

 

1、复选框改成单选

（优惠券、拼团、预售、邀请活动、新人这几个模块里有这部分内容。）

 

 

 

 

1、表格中涉及到整行排序可上下调整的用以下样式：

如图，到顶端或低端则不可再点击

参考Html

<el-table-column prop="present" label="排序">
   <template slot-scope="scope">
       <el-button
          size="mini"
          :disabled="scope.$index===0"
          @click="moveUp(scope.$index,scope.row)"><i class="el-icon-arrow-up"></i>
</el-button>
       <el-button
           size="mini"
           :disabled="scope.$index===(productData.length-1)"
           @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i>
</el-button>
   </template>
</el-table-column>

　

参考Methods

//上移
    moveUp(index,row){
        var that = this
        if (index > 0) {
          let upDate = that.productData[index - 1]
          that.productData.splice(index - 1, 1)
          that.productData.splice(index,0, upDate)
        } else {
        }
    },
 //下移
    moveDown(index,row){
        var that = this
        if ((index + 1) === that.productData.length){
        } else {
          let downDate = that.productData[index + 1]
          that.productData.splice(index + 1, 1)
          that.productData.splice(index,0, downDate)
        }
    },

　　

　

 

 

1、商品规格按以下样式写

<template slot-scope="scope">

  <el-tag size="mini">季节：春</el-tag>

</template>

　　

 

 

1、新增页面里的表格复选框也删掉

 

 

 

1、所有的选择商品类似的已选择都删掉

 

 

 

2、同一个页面中，原来在表格上方绿色的添加按钮 加在表格的操作列里，如下图所示：

注：作用：点击【添加】就是把这个商品选择了；点击前是绿色按钮，点击后是红色取消按钮； 表格前面的checkbox去掉

 

 

 

 

 

1、页码样式为：

 

layout="total, sizes, prev, pager, next, jumper"

　　

 

 

1、Switch开关字段和样式为：

（开关都改成禁用和启用，颜色为图示颜色）

 

 

1、表格所有内容都居中显示：

<el-table-column
     align="center">

　　

 

 

1、表格中，无下拉的：第一列是复选框（可全选）;

有下拉的：第一列是下拉，第二列是复选框（可全选）：

 

 

 

1、表格上面，共搜索和已选择提示去掉：

 

 

 

 

 

 

1、表格上面，选项卡样式如下（默认size）：

 

 

 

1、去掉清除按钮：

 

 

 

1、增加删除按钮，且删除按钮的功能和导出功能类似，是将表格中选中的内容删掉：

 

 

 

查询按钮，在默认是白色的，hover时是淡青色的

 

 

 

1、商品选择按钮和查询按钮的样式效果一样：

 

 

 

 

1、页面右下角相关按钮样式：

 

 

 

 

 

 

1、所有输入框可清空，获得焦点样式和一级下拉框的样式：

 

<el-input v-model=""   clearable>

 <el-select v-model=""  clearable>

　　

 

1、新增、修改（编辑）时，排序码的位置，做成这个样式：

 

 

 

1、页面对齐样式参考：