@zhijiancloud/bpm 0.0.1 → 0.0.2

package/components/lib/bpmSubForm/src/main.vue

@@ -0,0 +1,181 @@
+<template>
+<div>
+  <el-button
+    v-if="uiType === 'table'"
+    @click="showSubForm = true"
+    type="text">查看子表单</el-button>
+  <el-table
+    v-else
+    :data="subformData"
+    :max-height="maxHeight"
+    border stripe
+    style="width: 100%;">
+    <el-table-column v-for="col in columns"
+      :prop="col.id"
+      :key="col.key"
+      :label="col.label"
+      :min-width="col.minWidth"
+      :sortable="col.sortable"
+      :sort-by="col.sortBy">
+      <template slot-scope="scope">
+        <bpm-field
+          v-model="scope.row[col.id]"
+          :type="col.data.type"
+          :fieldConf="col.data"
+          :mode="mode"
+          uiType="table"
+          :formDefId="formDefId"
+          :orgInfo="orgInfo"
+          @change="handleChange"></bpm-field>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <el-dialog
+    :title="subFormDialogTitle"
+    :visible.sync="showSubForm"
+    width="50%"
+    @close="showSubForm = false">
+    <div style="max-height: 70vh; overflow: auto;">
+      <el-table
+        :data="subformData"
+        :max-height="dialogTableMaxHeight"
+        border stripe
+        style="width: 100%;">
+        <el-table-column v-for="col in columns"
+          :prop="col.id"
+          :key="col.key"
+          :label="col.label"
+          :min-width="col.minWidth"
+          :sortable="col.sortable"
+          :sort-by="col.sortBy">
+          <template slot-scope="scope">
+            <bpm-field
+              v-model="scope.row[col.id]"
+              :type="col.data.type"
+              :fieldConf="col.data"
+              :mode="mode"
+              uiType="table"
+              :formDefId="formDefId"
+              :orgInfo="orgInfo"
+              @change="handleChange"></bpm-field>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</div>
+</template>
+
+<script>
+import { FORM_FIELDS_MAP } from '../../field-const.js'
+
+export default {
+  name: 'BpmSubForm',
+  props: {
+    value: {
+      type: [String, Number, Object, Array]
+    },
+    type: {
+      type: String,
+      default: 'XSubForm' // SubForm, XSubForm, OrderSubForm
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    mode: {
+      type: String,
+      default: 'view' // view, edit
+    },
+    uiType: {
+      type: String,
+      default: 'default' // default,table,form,search
+    },
+    maxHeight: {
+      type: [Number, String],
+      default: 500
+    },
+    formDefId: {
+      type: String,
+      default: ''
+    },
+    orgInfo: {
+      type: Object,
+      default () {
+        return {
+          level: 'group', // group,team,project
+          level_id: 0,
+          group_id: 0
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      subformData: [],
+      dialogTableMaxHeight: 500,
+      showSubForm: false
+    }
+  },
+  computed: {
+    columns () {
+      const elements = this.fieldConf.elements || []
+      const arr = []
+      elements.forEach(item => {
+        const fieldMap = FORM_FIELDS_MAP[item.type] || {}
+        if (fieldMap.hasBpmField) {
+          arr.push({
+            key: item.id,
+            id: item.id,
+            label: item.name || item.id,
+            minWidth: fieldMap.tableColWidth || 100,
+            sortable: true,
+            sortBy: item.id,
+            data: item
+          })
+        }
+      })
+
+      return arr
+    },
+    subFormDialogTitle () {
+      return this.fieldConf.name || this.fieldConf.id
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        if (val && _.isArray(val)) {
+          this.subformData = val
+        } else {
+          this.subformData = []
+        }
+      },
+      immediate: true
+    },
+    // subformData: {
+    //   handler (val) {
+    //     this.$emit('input', val)
+    //     this.$emit('change', val)
+    //   },
+    //   deep: true
+    // }
+  },
+  created() {
+    this.dialogTableMaxHeight = Math.floor(window.innerHeight / 100 * 70 - 114)
+  },
+  methods: {
+    handleChange () {
+      this.$emit('input', this.subformData)
+      this.$emit('change', this.subformData)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

package/components/lib/bpmText/index.ts

@@ -0,0 +1,13 @@
+import BpmText  from './src/main.vue'
+
+declare module 'vue/types/vue' {
+    interface VueConstructor {
+        install: any
+    }
+  }
+
+(BpmText as any).install = function(Vue:any) {
+    Vue.component(BpmText.name , BpmText);
+}
+
+export default BpmText

package/components/lib/bpmText/src/main.vue

@@ -0,0 +1,87 @@
+<template>
+  <component
+    class="bpm-text"
+    v-model="curVal"
+    :is="curComponent"
+    :fieldConf="fieldConf"
+    :row="row"
+    :mode="mode"
+    :uiType="uiType"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+  </component>
+</template>
+<script>
+import editorComponent from "./part/editor.vue";
+import readerComponent from "./part/reader.vue";
+
+export default {
+  name: "BpmText",
+  components: {
+    editorComponent,
+    readerComponent
+  },
+  props: {
+    value: {
+      type: String,
+      
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    row: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default() {
+        return "view";
+      },
+    },
+    uiType: {
+      type: String,
+      default() {
+        return "default";
+      },
+    },
+  },
+  data () {
+    return {
+      curVal: ""
+    }
+  },
+  computed: {
+    curComponent() {
+      if (this.mode == "view") {
+        return readerComponent;
+      } else {
+        return editorComponent;
+      }
+    },
+  },
+  watch: {
+    curVal(val){
+      this.$emit("input", val)
+      this.$emit("change", val);
+    },
+    value(){
+      this.curVal = this.value
+    },
+    
+  },
+  mounted () {
+    this.curVal = this.value
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../../css/bpmText.less";
+</style>

package/components/lib/bpmText/src/part/editor.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="bpm-text-edit" style="position: relative">
+    <el-input
+      ref="component"
+      v-model="curVal"
+      :placeholder="placeholder"
+      :type="inputType"
+      :rows="2"
+      v-bind="$attrs" 
+      v-on="$listeners"
+    ></el-input>
+    <div class="prefab-words" v-if="prefabWords && prefabWords.length && uiType != 'table'">
+      <!-- <div>{{ $z("快捷输入", "b2.common.quick_input") }}</div> -->
+
+      <div>快捷输入</div>
+      <ul>
+        <li
+          v-for="(item, index) in prefabWords"
+          :class="selectWord == item ? 'active' : ''"
+          :key="`${index}`"
+          @click="handleAddWord(item)"
+        >
+          <span>{{ item }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+
+import Vue from "vue";
+
+import { Input } from "element-ui";
+
+Vue.use(Input);
+
+export default {
+  data() {
+    return {
+      selectWord: "",
+      curVal: "",
+    };
+  },
+  props: ["value", "fieldConf", "row", "uiType"],
+
+  watch: {
+    curVal(val) {
+      this.$emit("input", val);
+    },
+    value() {
+      this.curVal = this.value;
+    },
+  },
+
+  computed: {
+    placeholder() {
+      return this.fieldConf.desc || this.fieldConf.name;
+    },
+
+    prefabWords() {
+      return _.get(this.fieldConf, "prefab_words", []);
+    },
+    inputType() {
+      let confType = this.fieldConf.type;
+      switch (confType) {
+        case "TextArea":
+          return "textarea";
+        default:
+          return "text";
+      }
+    },
+  },
+  methods: {
+    async handleAddWord(str) {
+      this.selectWord = str;
+      if (this.curVal) {
+        let elem = this.$refs.component.$refs.input;
+        let startPos = elem.selectionStart;
+        let endPos = elem.selectionEnd;
+        let value = this.curVal;
+        let preStr = value.substring(0, startPos);
+        let endStr = value.substring(endPos, value.length);
+        let result = preStr + str + endStr;
+        this.curVal = result;
+
+        await this.$nextTick();
+        elem.focus();
+
+        elem.setSelectionRange(startPos + str.length, startPos + str.length);
+      } else {
+        this.curVal = str;
+      }
+
+      this.selectWord = "";
+    },
+  },
+  mounted() {
+    this.curVal = this.value;
+  },
+};
+</script>
+

package/components/lib/bpmText/src/part/reader.vue

@@ -0,0 +1,7 @@
+
+<script>
+import TextReader from "../../../mixins/TextReader.vue"
+export default {
+    mixins: [TextReader]
+}
+</script>

package/components/lib/bpmTime/index.js

@@ -0,0 +1,7 @@
+import BpmTime from './src/main.vue'
+
+BpmTime.install = function(Vue) {
+    Vue.component(BpmTime.name , BpmTime);
+}
+
+export default BpmTime

package/components/lib/bpmTime/src/main.vue

@@ -0,0 +1,83 @@
+<template>
+  <component
+    class="bpm-select"
+    v-model="curVal"
+    :is="curComponent"
+    :fieldConf="fieldConf"
+    :row="row"
+    :mode="mode"
+    :uiType="uiType"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+  </component>
+</template>
+<script>
+import editorComponent from "./part/editor.vue";
+import readerComponent from "./part/reader.vue";
+
+export default {
+  name: "BpmTime",
+  components: {
+    editorComponent,
+    readerComponent
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    row: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default() {
+        return "view";
+      },
+    },
+    uiType: {
+      type: String,
+      default() {
+        return "default";
+      },
+    },
+  },
+  data () {
+    return {
+      curVal: ""
+    }
+  },
+  computed: {
+    curComponent() {
+      if (this.mode == "view") {
+        return readerComponent;
+      } else {
+        return editorComponent;
+      }
+    },
+  },
+  watch: {
+    curVal(val){
+      this.$emit("input", val)
+      this.$emit("change", val);
+    },
+    value(){
+      this.curVal = this.value
+    },
+    
+  },
+  mounted () {
+    this.curVal = this.value
+  }
+};
+</script>

package/components/lib/bpmTime/src/part/editor.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="bpm-time-edit">
+    <el-time-select
+    ref="component"
+    v-model="curVal"
+    format-model="number"
+    :format="format"
+    :value-format="checkFormat"
+    :clearable="true"
+    />
+  </div>
+</template>
+
+
+<script>
+import _ from "lodash";
+
+import Vue from "vue";
+
+import { TimeSelect } from "element-ui";
+
+Vue.use(TimeSelect);
+
+export default {
+  data() {
+    return {
+      curVal: ""
+    };
+  },
+  props: ["value", "fieldConf", "row"],
+  watch: {
+    curVal(val) {
+      this.$emit("input", val);
+    },
+    value(){
+      this.curVal = this.value;
+    }
+  },
+  computed: {
+    format() {
+      return _.get(this.fieldConf, "view.format");
+    },
+    checkFormat() {
+      return _.get(this.fieldConf, "check.format");
+    },
+  },
+  mounted() {
+    this.curVal = this.value;
+  },
+  methods: {
+  },
+};
+</script>
+

package/components/lib/bpmTime/src/part/reader.vue

@@ -0,0 +1,24 @@
+<template>
+    <span >{{ value }}</span>
+  </template>
+  
+  <script>
+//   import _ from "lodash";
+  
+  export default {
+    props: ["value", "fieldConf", "row"],
+    data() {
+      return {
+      };
+    },
+    computed: {
+    },
+    watch: {
+    },
+    mounted() {
+    },
+    methods: {
+      
+    },
+  };
+  </script>

package/components/lib/demo/index.js

@@ -0,0 +1,7 @@
+import Demo from './src/main.vue'
+
+Demo.install = function(Vue) {
+    Vue.component(Demo.name , Demo);
+}
+
+export default Demo

package/components/{bpm2/lib → lib}/demo/src/main.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1 class="m-demo">demo</h1>
+        <h1 class="m-demo">demo1</h1>
     </div>
     
 </template>

package/components/lib/demo2/index.js

@@ -0,0 +1,7 @@
+import Demo2 from './src/main.vue'
+
+Demo2.install = function(Vue) {
+    Vue.component(Demo2.name , Demo2);
+}
+
+export default Demo2

package/components/lib/demo2/src/main.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <h1 class="m-demo">demo2</h1>
+    </div>
+    
+</template>
+<script>
+export default {
+    name: "Demo2"
+}
+</script>