design

pages/workflow/process/design.vue

 <template>
-  <div class="Design">
+<div class="Design">
     <Timeline>
-      <TimelineItem v-for="(node,i) in nodes" :key="node.id">
-        <Badge :count="i+1" type="primary" slot="dot"></Badge>
-        <div class="node" @click="edit(node.id,i)">
-          <div class="title">
-            <a>
-              {{node.name}}
-              &nbsp;(
-              <state code="workflow.form.audit.type" :value="node.operation" />)
-              <Icon type="md-build" />
-              <Icon v-if="node.isFixed" type="ios-lock" color="orange" title="人员固定"/>
-            </a>
-          </div>
-          <div v-if="node.userIds&&node.userIds.length>0">
-            审批人：
-            <User v-for="(item,j) in node.userIds" :value="item" class="ml10" :key="j" />
-          </div>
-          <div v-if="node.roleList&&node.roleList.length>0">
-            审批角色：
-            <span
-              v-for="(role,k) in node.roleList"
-              class="mr10"
-            >{{role.name}}({{role.userIdList.length}})</span>
-          </div>
-        </div>
-      </TimelineItem>
+        <TimelineItem v-for="(node,i) in nodes" :key="node.id">
+            <Badge :count="i+1" type="primary" slot="dot"></Badge>
+            <div class="node" @click="edit(node.id,i)">
+                <div class="title">
+                    <a>
+                        {{node.name}}
+                        &nbsp;(
+                        <state code="workflow.form.audit.type" :value="node.operation" />)
+                        <Icon type="md-build" />
+                        <Icon v-if="node.isFixed" type="ios-lock" color="orange" title="人员固定" />
+                    </a>
+                </div>
+                <div v-if="node.userIds&&node.userIds.length>0">
+                    审批人：
+                    <User v-for="(item,j) in node.userIds" :value="item" class="ml10" :key="j" />
+                </div>
+                <div v-if="node.roleList&&node.roleList.length>0">
+                    审批角色：
+                    <span v-for="(role,k) in node.roleList" class="mr10">{{role.name}}({{role.userIdList.length}})</span>
+                </div>
+            </div>
+        </TimelineItem>
     </Timeline>
     <Modal v-model="editModal" title="编辑" footer-hide width="800">
-      <Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
+        <Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
     </Modal>
     <Modal v-model="startModal" title="开始节点编辑" footer-hide width="800">
-      <StartEdit :eid="startId" @on-close="cancel" @on-ok="addOk" />
+        <StartEdit :eid="startId" @on-close="cancel" @on-ok="addOk" />
     </Modal>
-  </div>
+</div>
 </template>
+
 <script>
 import Api from './api'
 import Edit from './node'
 import StartEdit from './node/start'
 export default {
-  name: 'Design',
-  data() {
-    return {
-      editModal: false,
-      entity: {},
-      nodes: [],
-      curId: 0,
-      startId: 0,
-      startModal: false
-    }
-  },
-  components: {
-    Edit,
-    StartEdit
-  },
-  props: {
-    eid: String
-  },
-  async fetch({ store, params }) {
-    await store.dispatch('loadDictionary') // 加载数据字典
-  },
-  mounted(){
-    this.load(this.eid)
-  },
-  methods: {
-    load(v) {
-      alert(v)
-      Api.detail({ id: v }).then((r) => {
-        this.nodes = r.result.nodes
-        // this.$emit('on-load')
-      })
+    name: 'Design',
+    data() {
+        return {
+            editModal: false,
+            entity: {},
+            nodes: [],
+            curId: 0,
+            startId: 0,
+            startModal: false
+        }
     },
-    edit(id, i) {
-      if (i== 0) {
-        this.startModal=true
-        this.startId=id;
-      } else {
-        this.editModal = true
-        this.curId = id
-      }
+    components: {
+        Edit,
+        StartEdit
     },
-    handleClose() {
-      this.$emit('on-close')
+    props: {
+        eid: String
     },
-    cancel() {
-      this.editModal = false
-      this.startModal = false
+    async fetch({
+        store,
+        params
+    }) {
+        await store.dispatch('loadDictionary') // 加载数据字典
     },
-    addOk() {
-      this.curId = 0
-      this.editModal = false
-      this.startId = 0
-      this.startModal = false
-      this.load(this.eid)
+    mounted() {
+        this.load(this.eid)
     },
-    l(key) {
-      key = 'instance' + '.' + key
-      return this.$t(key)
-    }
-  },
-  watch: {
-    eid(v) {
-      if (v != 0) {
-        this.load(v)
-      }
+    methods: {
+        load(v) {
+            //alert(v)
+            Api.detail({
+                id: v
+            }).then((r) => {
+                this.nodes = r.result.nodes
+                // this.$emit('on-load')
+            })
+        },
+        edit(id, i) {
+            if (i == 0) {
+                this.startModal = true
+                this.startId = id;
+            } else {
+                this.editModal = true
+                this.curId = id
+            }
+        },
+        handleClose() {
+            this.$emit('on-close')
+        },
+        cancel() {
+            this.editModal = false
+            this.startModal = false
+        },
+        addOk() {
+            this.curId = 0
+            this.editModal = false
+            this.startId = 0
+            this.startModal = false
+            this.load(this.eid)
+        },
+        l(key) {
+            key = 'instance' + '.' + key
+            return this.$t(key)
+        }
+    },
+    watch: {
+        eid(v) {
+            if (v != 0) {
+                this.load(v)
+            }
+        }
     }
-  }
 }
 </script>
+
 <style lang="less">
 .Design {
-  background: white;
-  padding: 20px 50px;
-  .node {
-    .title {
-      font-size: 14px;
-      font-weight: bold;
-      .auditedTime {
-        font-size: 12px;
-        color: #ddd;
-      }
+    background: white;
+    padding: 20px 50px;
+
+    .node {
+        .title {
+            font-size: 14px;
+            font-weight: bold;
+
+            .auditedTime {
+                font-size: 12px;
+                color: #ddd;
+            }
+        }
     }
-  }
 }
-</style>
\ No newline at end of file
+</style>