众包后台管理系统开发规范
写在最前面
app是让用户用起来舒服，管理系统是让我们自己用起来舒服。app为提高用户体验而努力。管理系统也应为了提高工作人员的效率而进步。
工程结构
模块化
分清楚模块界限，建立不同的目录。基础框架上通用的不用看，咋们来看下，撸码的时候，咋们写的那些地方。
第一个目录，与服务器交互的地方。
src/api 根据业务命名、可以单独建立目录表示不同的业务模块。 比如 src/api/task/rule.js src/api/task/index.js
第二个目录，页面路由配置
目前是静态的，后续肯定是通过服务端控制权限，然后动态返回路由，做渲染。<br />目的前的静态管理<br />router<br />根据业务创建路由，然后放入router/routerCollection再也不用去index里面增加，路由爆炸式增长实在太恐怖！！！而且多人开发还容易冲突。
例子
cityRuleRouter.js
export const cityRuleRouter = [
{
path: '/city',
name: 'City',
component: () => import('@/views/city/index'),
meta: {title: '城市列表'}
}
];
function addCityRuleRouter(arr) {
cityRuleRouter.forEach(value => arr.push(value));
}
export default addCityRuleRouter;
routerCollection.js
import addCityRuleRouter from '../router/cityRuleRouter'
//只需import自己定义好的路由，并加入下面的输入组即可。
let routers = [addCityRuleRouter];
export default function execute(router) {
routers.forEach(callback => callback(router))
}
第三个目录views
根据不同的业务创建不同的目录模块。
分为三块
- 视图层（xxx.vue）
- 视图控制层（xxxController.vue）
- 通用逻辑处理，通用变量层service层（xxxService.vue）
（如果一些，很多模块都可以通用的，就提到底层的目录）
举例
city/index视图层：index.vue
<script>
import indexController from './indexController'
export default indexController;
</script>
视图控制层indexController.js
import Pagination from '@/components/Pagination';
import CrowdsourceExport from '../../components/CrowdsourceExport';
import {queryCityList} from '@/api/city';
import {taskType, userCity} from "./indexServices";
export default {
components: {Pagination, CrowdsourceExport},
filters: {},
data() {
return {
showExportDialog: true,
list: null,
cityOptions: userCity,
conditionForm: {
cityCode: ""
},
listLoading: true,
childTaskTypeList: taskType,
pageInfo: {
list: []
}
}
},
created() {
if (this.cityOptions && this.cityOptions.length !== 0) {
this.conditionForm.cityCode = this.cityOptions[0].value;
}
this.query()
},
methods: {
query() {
queryCityList(this.conditionForm).then((res) => {
this.pageInfo.list = res.result;
}).catch(reason => {
})
},
to(href, cityCode) {
this.$router.push({
path: href,
query: {
cityCode: cityCode,
}
})
}
}
}
通用逻辑处理，通用变量层service层indexService.js
import {getUserCity} from "@/utils/commonOptions";
export const taskType = [
{
label: "清洁工单",
value: "03-01",
href: "/city/taskRule/clean"
},
{
label: "超停调度工单",
value: "02-03",
href: "/city/taskRule/overDispatch"
},
{
label: "指定调度工单",
value: "02-01",
href: "/city/taskRule/assignDispatch"
},
];
export const userCity = getUserCity();
关于新增，详情，修改页面
简单事情，简单做。
一个页面就干一个事情，不要把，详情，编辑，新增，做成一个页面，然后再页面中根据不同的入参，来决定展示什么内容。因为，如果页面元素较多，或者有按钮需要做权限控制等，如果都使用的是一个页面，调试工作量巨大。实际话费时间远高于多做两个页面的时间花费。而且也“不模式”。
页面内容可以重复，Controller 可以大致相同，通用的逻辑可以放到Service中。
界面布局
统一，统一，统一
所有的组件都是size="mini" 每个页面都必须有标题。二级，或者三级页面必须标题和返回按钮。
列表页
标题，查询条件，按钮组，分割线，列表
按钮标识
新增
type="success",编辑type="primary"详情type="success"删除type="danger"
删除操作，如果很重要，一定要有提示，并再次确认的流程，防止误操作。
[图片上传失败...(image-5fbe7-1561957294776)]
基本布局结构如下
详情
如果产品没有特别要求布局，可以直接竖着排列。<br />
常规组件
组件化
既然是一个组件，那么久必须是通用，容易接入，入侵性小。 以导出组件为例 export-code 为导出配置编码。 param 为条件参数对象，且必须有一个showExportDialog（须通过这个字段来弹Dialog导出）
<CrowdsourceExport export-code="c5cd186a-fde3-4b08-a59a-3a595deb0a6f" :param="conditionForm"></CrowdsourceExport>
import CrowdsourceExport from '../../../components/CrowdsourceExport';
写在最后
管理系统理应为提高使用者的工作效率而进化。
作者：GoFun成都技术中心-何刚
