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

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

 

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

 

 

1、复选框改成单选

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

 

 

 

 

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

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

参考Html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//上移     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、商品规格按以下样式写

?

1 2 3 4 5

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

　　

 

 

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

 

 

 

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

 

 

 

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

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

 

 

 

 

 

1、页码样式为：

 

?

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

　　

 

 

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

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

 

 

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

?

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

　　

 

 

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

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

 

 

 

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

 

 

 

 

 

 

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

 

 

 

1、去掉清除按钮：

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

 

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

 

 

 

 

 

 

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

 

?

1 2 3

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

　　

 

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

 

 

 

1、页面对齐样式参考：