众包后台管理系统开发规范V1.0.0

众包后台管理系统开发规范

写在最前面

app是让用户用起来舒服，管理系统是让我们自己用起来舒服。app为提高用户体验而努力。管理系统也应为了提高工作人员的效率而进步。

工程结构

模块化

分清楚模块界限，建立不同的目录。基础框架上通用的不用看，咋们来看下，撸码的时候，咋们写的那些地方。

第一个目录，与服务器交互的地方。

src/api 根据业务命名、可以单独建立目录表示不同的业务模块。 比如 src/api/task/rule.js src/api/task/index.js

第二个目录，页面路由配置

目前是静态的，后续肯定是通过服务端控制权限，然后动态返回路由，做渲染。
目的前的静态管理
router
根据业务创建路由，然后放入router/routerCollection再也不用去index里面增加，路由爆炸式增长实在太恐怖！！！而且多人开发还容易冲突。

例子

image.png

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

视图控制层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)]

基本布局结构如下

image.png

详情

如果产品没有特别要求布局，可以直接竖着排列。

image.png

常规组件

组件化

既然是一个组件，那么久必须是通用，容易接入，入侵性小。 以导出组件为例 export-code 为导出配置编码。 param 为条件参数对象，且必须有一个showExportDialog（须通过这个字段来弹Dialog导出）

  import CrowdsourceExport from '../../../components/CrowdsourceExport';

image.png

写在最后

管理系统理应为提高使用者的工作效率而进化。

作者：GoFun成都技术中心-何刚