完善 中汽规范文档 文件命名

按照规范修改 任务模板设计

CatarcStandard.md

@@ -22,3 +22,33 @@
 ### 示例
 
 ![文件命名示例](./doc/文件命名示例图片.png)
+
+## HTML编写规范
+
+### 规则
+
+1. 使用常用且熟悉的语义类标签，不能确定使用哪个就用 `div` 或 `span` 。  
+
+   如: `<ul>/<ol> > <li> `, `<h1> - <h6>`, `<pre>`, `<a>`, `<button>`, `<input>`  
+  
+   **对于语义标签，我的态度是：
+   “用对”比“不用”好，“不用”比“，“不用”比“用错”好。
+   当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。**  
+   [W3C标签列表参考](http://www.w3school.com.cn/tags/index.asp) 
+   [MDN标签列表参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element) 
+
+2. 显式指明使用到的属性，且属性值一定要有值并且用 `""`。如: `<button type="button">按钮</button>`
+3. 省略结束标签请遵循 [MDN的HTML元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)  
+
+    | 标签省略 | HTML元素举例 |
+    |:----:|:---:|
+    | 必须有一个开始标签，不允许有结束标签. | `<img src="./xx.png"/>` |
+    | 不允许，开始标签和结束标签都不能省略。 | `<a></a>` |
+    | 必须有开始标签但不必有结束标签。| `<input size="32"/>` `<input size="32"></input>`|
+    
+    **结束标签不存在时，在开始标签后加 `/`**
+    
+4. 给每个 `<table>`  和 `<form>`  加上唯一的 id
+5. 给每个 `<img>` 加上 alt 属性
+
+## CSS 编写规范

src/config/router.config.js

@@ -14,7 +14,7 @@ export const asyncRouterMap = [
       {
         path: '/taskGrouping',
         name: 'taskGrouping',
-        component: () => import('@/views/taskTemplate/taskGrouping/index.vue'),
+        component: () => import('@/views/taskTemplate/taskGrouping'),
         meta: { title: '任务分组', keepAlive: true, permission: ['taskGrouping'] }
       },
       {
@@ -28,25 +28,25 @@ export const asyncRouterMap = [
   {
     path: '/taskSetting',
     name: 'taskSetting',
-    component: () => import('@/views/taskTemplate/taskSetting'),
+    component: () => import('@/views/taskTemplate/taskDesign/taskSetting'),
     meta: { title: '任务基础设置', keepAlive: true, permission: ['taskSetting'] }
   },
   {
     path: '/taskFlow',
     name: 'taskFlow',
-    component: () => import('@/views/taskTemplate/taskFlow'),
+    component: () => import('@/views/taskTemplate/taskDesign/taskFlow'),
     meta: { title: '任务流程', keepAlive: true, permission: ['taskFlow'] }
   },
   {
     path: '/taskNewForm',
     name: 'taskNewForm',
-    component: () => import('@/views/taskTemplate/taskNewForm/index'),
+    component: () => import('@/views/taskTemplate/taskDesign/taskNewForm'),
     meta: { title: '任务面板编辑', keepAlive: true }
   },
   {
     path: '/taskOtherSetting',
     name: 'taskOtherSetting',
-    component: () => import('@/views/taskTemplate/taskOtherSetting'),
+    component: () => import('@/views/taskTemplate/taskDesign/taskOtherSetting'),
     meta: { title: '任务其他设置', keepAlive: true, permission: ['taskOtherSetting'] }
   },
   {

src/views/taskTemplate/taskDesign/README.md

+# 文件夹说明
+
+此文件夹是 `新建模板` 的四个页面的相关内容

src/views/taskTemplate/taskDesign/taskFlow/README.md

+# 文件夹说明
+
+此文件夹是 `任务流程设置页面` 相关内容

src/views/taskTemplate/taskDesign/taskFlow/customControls/CustomContextPad.js

+export default class CustomContextPad {
+  constructor(config, contextPad, create, elementFactory, injector, translate) {
+    this.create = create;
+    this.elementFactory = elementFactory;
+    this.translate = translate;
+
+    if (config.autoPlace !== false) {
+      this.autoPlace = injector.get('autoPlace', false);
+    }
+
+    contextPad.registerProvider(this);
+  }
+
+  getContextPadEntries(element) {
+    const {
+      autoPlace,
+      create,
+      elementFactory,
+      translate
+    } = this;
+
+    function appendServiceTask(event, element) {
+      if (autoPlace) {
+        const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
+
+        autoPlace.append(element, shape);
+      } else {
+        appendServiceTaskStart(event, element);
+      }
+    }
+
+    function appendServiceTaskStart(event) {
+      const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
+
+      create.start(event, shape, element);
+    }
+
+    return {
+      'append.service-task': {
+        group: 'model',
+        className: 'bpmn-icon-service-task',
+        title: translate('Append ServiceTask'),
+        action: {
+          click: appendServiceTask,
+          dragstart: appendServiceTaskStart
+        }
+      }
+    };
+  }
+}
+
+CustomContextPad.$inject = [
+  'config',
+  'contextPad',
+  'create',
+  'elementFactory',
+  'injector',
+  'translate'
+];

src/views/taskTemplate/taskDesign/taskFlow/customControls/CustomPalette.js

+export default class CustomPalette {
+  constructor(create, elementFactory, palette, translate) {
+    this.create = create;
+    this.elementFactory = elementFactory;
+    this.translate = translate;
+
+    palette.registerProvider(this);
+  }
+
+  getPaletteEntries(element) {
+    const {
+      create,
+      elementFactory,
+      translate
+    } = this;
+
+    function createServiceTask(event) {
+      const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
+
+      create.start(event, shape);
+    }
+
+    function createUserTask(event) {
+      const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });
+
+      create.start(event, shape);
+    }
+
+    return {
+      'create.service-task': {
+        group: 'activity',
+        className: 'bpmn-icon-service-task',
+        title: translate('Create {type}', { type: 'Service Task' }),
+        action: {
+          dragstart: createServiceTask,
+          click: createServiceTask
+        }
+      },
+      'create.user-task': {
+        group: 'activity',
+        className: 'bpmn-icon-user-task',
+        title: translate('Create {type}', { type: 'User Task' }),
+        action: {
+          dragstart: createUserTask,
+          click: createUserTask
+        }
+      }
+    };
+  }
+}
+
+CustomPalette.$inject = [
+  'create',
+  'elementFactory',
+  'palette',
+  'translate'
+];

src/views/taskTemplate/taskDesign/taskFlow/customControls/index.js

+import CustomContextPad from './CustomContextPad';
+import CustomPalette from './CustomPalette';
+
+export default {
+  __init__: [ 'customContextPad', 'customPalette' ],
+  customContextPad: [ 'type', CustomContextPad ],
+  customPalette: [ 'type', CustomPalette ]
+};
\ No newline at end of file

src/views/taskTemplate/taskDesign/taskFlow/customMenuProvider/ReplaceOptions.js

+export var TASK = [
+  // {
+  //   label: 'Task - CUSTOM',
+  //   actionName: 'replace-with-task',
+  //   className: 'bpmn-icon-task',
+  //   target: {
+  //     type: 'bpmn:Task'
+  //   }
+  // }, {
+  //   label: 'SMS Task',
+  //   actionName: 'replace-with-sms-subprocess',
+  //   className: 'bpmn-icon-send',
+  //   target: {
+  //     type: 'bpmn:Task'
+  //   }
+  // }
+];

src/views/taskTemplate/taskDesign/taskFlow/customMenuProvider/index.js

+import PopupMenuModule from 'diagram-js/lib/features/popup-menu';
+import ReplaceModule from 'bpmn-js/lib/features/replace';
+
+import ReplaceMenuProvider from './ReplaceMenuProvider';
+
+
+export default {
+  __depends__: [
+    PopupMenuModule,
+    ReplaceModule
+  ],
+  __init__: [ 'replaceMenuProvider' ],
+  replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
+};

src/views/taskTemplate/taskDesign/taskFlow/customMenuProvider/util/TypeUtil.js

+import {
+  getBusinessObject
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import {
+  isExpanded
+} from 'bpmn-js/lib/util/DiUtil';
+
+
+/**
+ * Returns true, if an element is from a different type
+ * than a target definition. Takes into account the type,
+ * event definition type and triggeredByEvent property.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Boolean}
+ */
+export function isDifferentType(element) {
+
+  return function(entry) {
+    var target = entry.target;
+
+    var businessObject = getBusinessObject(element),
+        eventDefinition = businessObject.eventDefinitions && businessObject.eventDefinitions[0];
+
+    var isTypeEqual = businessObject.$type === target.type;
+
+    var isEventDefinitionEqual = (
+      (eventDefinition && eventDefinition.$type) === target.eventDefinitionType
+    );
+
+    var isTriggeredByEventEqual = (
+      businessObject.triggeredByEvent === target.triggeredByEvent
+    );
+
+    var isExpandedEqual = (
+      target.isExpanded === undefined ||
+      target.isExpanded === isExpanded(businessObject)
+    );
+
+    return !isTypeEqual || !isEventDefinitionEqual || !isTriggeredByEventEqual || !isExpandedEqual;
+  };
+}

src/views/taskTemplate/taskDesign/taskFlow/index.js

+import index from './index.vue';
+
+export default index;

src/views/taskTemplate/taskFlow.vue → src/views/taskTemplate/taskDesign/taskFlow/index.vue

@@ -228,7 +228,11 @@
   import { TaskDesignView } from '@/layouts'
   import BpmnModeler from 'bpmn-js/lib/Modeler'
   import { mapGetters, mapActions } from 'vuex'
+  // 国际化
   import customTranslate from './customTranslate/customTranslate';
+  // 自定义控件
+  import customControlsModule from './customControls';
+  import customMenuProvider from './customMenuProvider';
   // import propertiesPanelModule from 'bpmn-js-properties-panel'
   // import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
   // import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
@@ -350,8 +354,10 @@
         this.modeler = new BpmnModeler({
           container: '#canvas',
           additionalModules: [
-            customTranslateModule
-          ]
+            customTranslateModule,
+            customControlsModule,
+            customMenuProvider
+      ]
           // propertiesPanel: {
           //   parent: '#js-properties-panel'
           // },

src/views/taskTemplate/taskDesign/taskNewForm/README.md

+# 文件夹说明
+
+此文件夹是 `任务表单设置页面` 相关内容

src/views/taskTemplate/taskDesign/taskNewForm/index.js

+import index from './index.vue';
+
+export default index;

src/views/taskTemplate/taskNewForm/index.vue → src/views/taskTemplate/taskDesign/taskNewForm/index.vue

@@ -469,7 +469,7 @@
     min-width: 490px;
     max-width: 490px;
     position: relative;
-    background: url("../../../assets/phone.png");
+    background: url("../../../../assets/phone.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
 

src/views/taskTemplate/taskDesign/taskOtherSetting/README.md

+# 文件夹说明
+
+此文件夹是 `任务其他设置页面` 相关内容

src/views/taskTemplate/taskDesign/taskOtherSetting/index.js

+import index from './index.vue';
+
+export default index;

src/views/taskTemplate/taskDesign/taskSetting/README.md

+# 文件夹说明
+
+此文件夹是 `任务基础设置页面` 相关内容

src/views/taskTemplate/taskDesign/taskSetting/index.js

+import index from './index.vue';
+
+export default index;

src/views/taskTemplate/taskGrouping/group-list/README.md → src/views/taskTemplate/taskGrouping/components/group-list/README.md

@@ -4,4 +4,4 @@
 
 ## 使用位置示例
 
-![任务分组列表模块](../../../../../doc/任务分组列表模块.png)
+![任务分组列表模块](../../../../../../doc/任务分组列表模块.png)

src/views/taskTemplate/taskGrouping/index.js

+import index from './index.vue';
+
+export default index;

src/views/taskTemplate/taskGrouping/index.vue

@@ -139,7 +139,7 @@
 <script>
   import { PageView } from '@/layouts'
   import ARow from 'ant-design-vue/es/grid/Row'
-  import GroupList from './group-list'
+  import GroupList from './components/group-list'
   import {
     deployProcess,
     createWorkGroup,