vue2-client 0.1.1 → 1.2.0

package/src/pages/system/applyInstallView/LFComponents/DataDialog.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="!graphData ? {} : graphData"></json-viewer>
+  </div>
+</template>
+<script>
+
+import JsonViewer from 'vue-json-viewer'
+export default {
+  props: {
+    graphData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  components: {
+    JsonViewer
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/pages/system/applyInstallView/LFComponents/NodePanel.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="node-panel">
+    <div
+      class="node-item"
+      v-for="item in nodeList"
+      :key="item.text"
+      @mousedown="$_dragNode(item)">
+      <div class="node-item-icon" :class="item.class">
+        <div v-if="item.type === 'base' || item.type === 'time'" class="shape"></div>
+      </div>
+      <span class="node-label">{{ item.text }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NodePanel',
+  props: {
+    nodeList: {
+      type: Array,
+      default: null
+    },
+    lf: {
+      type: Object || String,
+      default: null
+    }
+  },
+  methods: {
+    $_dragNode (item) {
+      this.$props.lf.dnd.startDrag({
+        type: item.type
+      })
+    }
+  }
+}
+</script>
+<style>
+.node-panel {
+  position: absolute;
+  top: 100px;
+  left: 10px;
+  width: 70px;
+  padding: 20px 10px;
+  background-color: white;
+  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
+  border-radius: 6px;
+  text-align: center;
+  z-index: 101;
+}
+.node-item {
+  margin-bottom: 20px;
+}
+.node-item-icon {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+  background-size: cover;
+}
+.node-label {
+  font-size: 12px;
+  margin-top: 5px;
+  user-select: none;
+}
+.node-start{
+  background: url('../background/start.png') no-repeat;
+  background-size: cover;
+}
+.node-rect{
+  border: 1px solid black;
+}
+.node-base{
+  background: url('../background/base.png') no-repeat;
+  background-size: cover;
+}
+.node-step{
+  background: url('../background/step.png') no-repeat;
+  background-size: cover;
+}
+.node-back-edge{
+  background: url('../background/step.png') no-repeat;
+  background-size: cover;
+}
+.node-time{
+  background: url('../background/time.png') no-repeat;
+  background-size: cover;
+}
+.node-push{
+  background: url('../background/push.png') no-repeat;
+  background-size: cover;
+}
+.node-download{
+  background: url('../background/download.png') no-repeat;
+  background-size: cover;
+}
+.node-click{
+  background: url('../background/click.png') no-repeat;
+  background-size: cover;
+}
+.node-end{
+  background: url('../background/end.png') no-repeat;
+  background-size: cover;
+}
+</style>

package/src/pages/system/applyInstallView/PropertySetting/Base.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <a-form-model
+      ref="ruleForm"
+      :model="formData"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      :rules="rules" >
+      <a-form-model-item label="流程ID" prop="id">
+        <a-input-number v-model="formData.id"></a-input-number>
+      </a-form-model-item>
+      <a-form-model-item label="流程名称" prop="text">
+        <a-input v-model="formData.text"></a-input>
+      </a-form-model-item>
+      <a-form-model-item label="操作员ID" prop="personId">
+        <a-input-number v-model="formData.personId"></a-input-number>
+      </a-form-model-item>
+      <a-form-model-item label="操作员名称" prop="personName">
+        <a-input v-model="formData.personName"></a-input>
+      </a-form-model-item>
+      <a-form-model-item label="预设属性" prop="joinArray">
+        <a-popover title="说明" placement="right">
+          <template slot="content">
+            <p>配置一些流程用的预设属性</p>
+            <p>如subdep, man, userid等</p>
+          </template>
+          <a-button type="primary" @click="addPropItem()">增加</a-button>
+        </a-popover>
+        <div v-for="(itemObj, index) in formData.propArray" :key="index">
+          <a-input-group compact>
+            <a-input v-model="itemObj.name" style="width: 30%;position: relative;bottom: 1px;" placeholder="属性名" />
+            <a-input v-model="itemObj.id" style="width: 20%;position: relative;bottom: 1px;" placeholder="属性ID" />
+            <a-input v-model="itemObj.description" style="width: 50%" placeholder="说明">
+              <a-icon slot="addonAfter" type="close" @click="removeJoinItem(index)"/>
+            </a-input>
+          </a-input-group>
+        </div>
+      </a-form-model-item>
+      <a-form-model-item>
+        <a-button type="primary" @click="onSubmit">保存</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    nodeData: {
+      type: Object,
+      default: null
+    },
+    lf: {
+      type: Object || String,
+      default: null
+    }
+  },
+  mounted () {
+    const { properties, text } = this.$props.nodeData
+    if (properties) {
+      this.$data.formData = Object.assign({}, this.$data.formData, properties)
+    }
+    if (text && text.value) {
+      this.$data.formData.text = text.value
+    }
+    if (text && text.value) {
+      this.$data.text = text.value
+    }
+  },
+  data () {
+    return {
+      labelCol: { span: 5 },
+      wrapperCol: { span: 16 },
+      text: '',
+      formData: {
+        id: null,
+        text: '',
+        personId: null,
+        personName: '',
+        propArray: []
+      },
+      rules: {
+        id: [
+          { required: true, message: '请输入流程ID', trigger: 'blur' }
+        ],
+        text: [
+          { required: true, message: '请输入流程名称', trigger: 'blur' }
+        ],
+        personId: [
+          { required: true, message: '请输入操作员ID', trigger: 'blur' }
+        ],
+        personName: [
+          { required: true, message: '请输入操作员名称', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    onSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const { id } = this.$props.nodeData
+          this.$props.lf.setProperties(id, {
+            ...this.$data.formData
+          })
+          this.$props.lf.updateText(id, this.$data.formData.text)
+          this.$message.success('保存成功')
+          this.$emit('onClose')
+        } else {
+          return false
+        }
+      })
+    },
+    addPropItem () {
+      this.formData.propArray.push({})
+    },
+    removeJoinItem (index) {
+      this.formData.propArray.splice(index, 1)
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/pages/system/applyInstallView/PropertySetting/CommonProperty.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <a-form-model
+      ref="ruleForm"
+      :model="formData"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      :rules="rules" >
+      <a-form-model-item label="ID" prop="id">
+        <a-input-number v-model="formData.id"></a-input-number>
+      </a-form-model-item>
+      <a-form-model-item label="步骤名称" prop="text">
+        <a-input v-model="formData.text"></a-input>
+      </a-form-model-item>
+      <a-form-model-item label="负责人" prop="name">
+        <a-checkbox-group v-model="formData.name" :options="personList" />
+      </a-form-model-item>
+      <a-form-model-item label="超时时间(小时)" prop="timeout">
+        <a-input-number v-model="formData.timeout"></a-input-number>
+      </a-form-model-item>
+      <a-form-model-item>
+        <a-button type="primary" @click="onSubmit">保存</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    nodeData: {
+      type: Object,
+      default: null
+    },
+    lf: {
+      type: Object || String,
+      default: null
+    }
+  },
+  mounted () {
+    const { properties, text } = this.$props.nodeData
+    if (properties) {
+      this.$data.formData = Object.assign({}, this.$data.formData, properties)
+    }
+    if (text && text.value) {
+      this.$data.formData.text = text.value
+    }
+    if (text && text.value) {
+      this.$data.text = text.value
+    }
+  },
+  data () {
+    return {
+      labelCol: { span: 5 },
+      wrapperCol: { span: 14 },
+      text: '',
+      formData: {
+        id: 0,
+        text: '',
+        name: [],
+        timeout: 0
+      },
+      personList: [
+        '市场开发员',
+        '工程技术员',
+        '大区工程技术员',
+        '财务出纳员',
+        '设计员',
+        '物资管理员',
+        '现场管理员',
+        '客户服务员'
+      ],
+      rules: {
+        id: [
+          { required: true, message: '请输入ID', trigger: 'blur' }
+        ],
+        type: [
+          { type: 'array', required: true, message: '请选择负责人', trigger: 'change' }
+        ],
+        text: [{ required: true, message: '请输入步骤名称', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    onSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const { id } = this.$props.nodeData
+          this.$props.lf.setProperties(id, {
+            ...this.$data.formData
+          })
+          this.$props.lf.updateText(id, this.$data.formData.text)
+          this.$message.success('保存成功')
+          this.$emit('onClose')
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/pages/system/applyInstallView/PropertySetting/PropertyDialog.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="property-dialog">
+    <Base
+      v-if="nodeData.type === 'base'"
+      :nodeData="nodeData"
+      :lf="lf"
+      @onClose="handleClose"/>
+    <CommonProperty
+      v-else
+      :nodeData="nodeData"
+      :lf="lf"
+      @onClose="handleClose"/>
+  </div>
+</template>
+<script>
+import CommonProperty from './CommonProperty'
+import Base from './Base.vue'
+
+export default {
+  name: 'PropertyDialog',
+  components: {
+    CommonProperty,
+    Base
+  },
+  props: {
+    nodeData: Object,
+    lf: Object
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    handleClose () {
+      this.$emit('setPropertiesFinish')
+    }
+  }
+}
+</script>
+<style>
+.property-dialog{
+  padding: 20px;
+}
+</style>

package/src/pages/system/applyInstallView/config.js

@@ -0,0 +1,22 @@
+export const nodeList = [
+  {
+    text: '开始',
+    type: 'start',
+    class: 'node-start'
+  },
+  {
+    type: 'base',
+    text: '基础',
+    class: 'node-base'
+  },
+  {
+    type: 'step',
+    text: '流程',
+    class: 'node-step'
+  },
+  {
+    type: 'end',
+    text: '结束',
+    class: 'node-end'
+  }
+]