workflow-editor 0.0.81-up-tmp8 → 0.0.81-up-tmp10

package/packages/workflow-editor/src/properties-editors/human-task/editable-child-fields.vue

@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;margin-top: 10px;">
+    <span v-for="(mapValue, key) in subtableConditionMap" :key="key">
+      <el-card class="box-card">
+								<div class="clearfix">
+										<el-row>
+												<el-col :span="12">
+														<span>{{ key }}</span>
+												</el-col>
+												<el-col v-if="selectedFieldMap[key]" :span="12">
+														<el-switch
+																v-model="selectedFieldMap[key].sumPermission"
+																:inactive-text="$t('workflowEditor.condition.accessControl')"
+																@change="changeSumPermission(key)"
+														/>
+												</el-col>
+										</el-row>
+										<el-row>
+												<el-col>
+														<span v-if="selectedFieldMap[key] && selectedFieldMap[key].sumPermission">
+																<span style="color: cornflowerblue">{{ $t('workflowEditor.condition.formBindingModel') }}：</span>
+																<span style="padding-left:5px"><el-input v-model="selectedFieldMap[key].modelName" style="width:300px" /></span>
+																<el-button icon="el-icon-refresh" type="text" @click="refreshModelName(key)" />
+														</span>
+												</el-col>
+										</el-row>
+										<!-- <span>{{ selectedFieldMap }}</span> -->
+            </div>
+          <div v-if="selectedFieldMap[key] && selectedFieldMap[key].sumPermission">
+            <editable-child-field-setting :setting="selectedFieldMap[key]" :table-name="key" @combinationParameters="combinationParameters" />
+          </div>
+      </el-card>
+    </span>
+  </div>
+</template>
+
+<script>
+import editableChildFieldSetting from './editable-child-field-setting'
+import componentsConfigUtil from './componentsConfigUtil'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'EditableChildFields',
+  components: {
+    editableChildFieldSetting
+  },
+  props: {
+    modelValue: {
+      type: [Array, Object],
+      default: null
+    }
+  },
+  data() {
+    let selectedFields = []
+    if (this.modelValue !== '' && this.modelValue !== null && this.modelValue !== undefined) {
+      if (Array.isArray(this.modelValue)) {
+        selectedFields = this.modelValue
+      } else {
+        // 只有一个字段时其实是field对象
+        selectedFields.push(this.modelValue)
+      }
+    }
+    return {
+      selectedFields,
+      selectedFieldMap: {}
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'subtableConditionMap'
+    ])
+  },
+  watch: {
+  },
+  created() {
+    if (this.selectedFields && this.selectedFields.length > 0) {
+      this.selectedFields.forEach(item => {
+        const sss = {}
+        const tableName = item.tableName
+        if (item.action) {
+          if (Array.isArray(item.action)) {
+            if (item.action.length > 0) {
+              const sssActionArr = []
+              const actionVisibleCondition = {}
+              item.action.forEach(item1 => {
+                sssActionArr.push(item1.name)
+                const param = {}
+                if (item1.condition) {
+                  param.condition = this.xmlToData(item1.condition)
+                }
+                param.parentCondition = item1.parentCondition
+                param.userCondition = item1.userCondition
+                actionVisibleCondition[item1.name] = param
+                // actionVisibleCondition[item1.name] = item1.visibleCondition
+              })
+              sss.actionArr = sssActionArr
+              sss.visibleConditionArr = actionVisibleCondition
+            }
+          } else {
+            const sssActionArr = []
+            const actionVisibleCondition = {}
+            sssActionArr.push(item.action.name)
+            const param = {}
+            if (item.action.condition) {
+              param.condition = this.xmlToData(item.action.condition)
+            }
+            param.parentCondition = item.action.parentCondition
+            param.userCondition = item.action.userCondition
+            actionVisibleCondition[item.action.name] = param
+            sss.actionArr = sssActionArr
+            sss.visibleConditionArr = actionVisibleCondition
+          }
+        }
+        if (item.field) {
+          if (Array.isArray(item.field)) {
+            if (item.field.length > 0) {
+              const sssFieldArr = []
+              item.field.forEach(item2 => {
+                const fieldItem = {}
+                fieldItem.name = item2.name
+                fieldItem.constraintRule = item2.constraintRule
+                fieldItem.condition = this.xmlToData(item2.condition)
+                fieldItem.userCondition = item2.userCondition
+                fieldItem.parentCondition = item2.parentCondition
+                sssFieldArr.push(fieldItem)
+              })
+              sss.fieldArr = sssFieldArr
+            }
+          } else {
+            const sssFieldArr = []
+            const fieldItem = {}
+            fieldItem.name = item.field.name
+            fieldItem.constraintRule = item.field.constraintRule
+            fieldItem.condition = this.xmlToData(item.field.condition)
+            fieldItem.userCondition = item.field.userCondition
+            fieldItem.parentCondition = item.field.parentCondition
+            sssFieldArr.push(fieldItem)
+            sss.fieldArr = sssFieldArr
+          }
+        }
+        if (item.modelName) {
+          sss.modelName = item.modelName
+        } else {
+          sss.modelName = null
+        }
+        if (item.permission) {
+          sss.sumPermission = item.permission
+        } else {
+          sss.sumPermission = false
+        }
+        this.selectedFieldMap[tableName] = sss
+        // this.$set(this.selectedFieldMap, tableName, sss)
+      })
+    }
+    if (this.subtableConditionMap) {
+      for (var key in this.subtableConditionMap) {
+        if (!this.selectedFieldMap[key]) {
+          const sss = {}
+          sss.tableName = key
+          sss.modelName = this.subtableConditionMap[key].modelName
+          sss.sumPermission = false
+          this.selectedFieldMap[key] = sss
+          // this.$set(this.selectedFieldMap, key, sss)
+        }
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    ...componentsConfigUtil,
+    combinationParameters(subTableItem) {
+      if (subTableItem && subTableItem.tableName) {
+        if (this.selectedFields && this.selectedFields.length > 0) {
+          const index = this.selectedFields.findIndex((fie) => fie.tableName === subTableItem.tableName)
+          if (index !== -1) {
+            this.selectedFields[index] = subTableItem
+            // this.$set(this.selectedFields, index, subTableItem)
+          } else {
+            this.selectedFields.push(subTableItem)
+          }
+        } else {
+          this.selectedFields = []
+          this.selectedFields.push(subTableItem)
+        }
+        // this.$emit('input', this.selectedFields)
+        this.$emit('update:modelValue', this.selectedFields)
+      }
+    },
+    refreshModelName(key) {
+      if (this.subtableConditionMap && this.subtableConditionMap[key] && this.subtableConditionMap[key].modelName) {
+        if (this.selectedFieldMap[key]) {
+          const sss = this.selectedFieldMap[key]
+          sss.modelName = this.subtableConditionMap[key].modelName
+        } else {
+          const sss = {}
+          sss.modelName = this.subtableConditionMap[key].modelName
+          this.selectedFieldMap[key] = sss
+          // this.$set(this.selectedFieldMap, key, sss)
+        }
+        this.$message({
+          showClose: true,
+          type: 'success',
+          message: this.$t('workflowEditorMessage.updateSuccessful')
+        })
+      }
+    },
+    changeSumPermission(key) {
+      if (key && this.selectedFieldMap[key]) {
+        if (!this.selectedFields) {
+          this.selectedFields = []
+          // this.$set(this, 'selectedFields', [])
+        }
+        if (this.selectedFieldMap[key].sumPermission === false) {
+          const index = this.selectedFields.findIndex((fie) => fie.tableName === key)
+          if (index !== null && index !== undefined && index !== -1) {
+            // this.$delete(this.selectedFields, index)
+            this.selectedFields[index]['permission'] = false
+            // this.$set(this.selectedFields[index], 'permission', false)
+          } else {
+            this.selectedFields[this.selectedFields.length] = {
+              permission: false,
+              tableName: key
+            }
+            // this.$set(this.selectedFields, this.selectedFields.length, {
+            //   permission: false,
+            //   tableName: key
+            // })
+          }
+        } else {
+          const index = this.selectedFields.findIndex((fie) => fie.tableName === key)
+          if (index !== null && index !== undefined && index !== -1) {
+            // this.$delete(this.selectedFields, index)
+            this.selectedFields[index]['permission'] = true
+            // this.$set(this.selectedFields[index], 'permission', true)
+          } else {
+            this.selectedFields[this.selectedFields.length] = {
+              permission: true,
+              tableName: key
+            }
+            // this.$set(this.selectedFields, this.selectedFields.length, {
+            //   permission: true,
+            //   tableName: key
+            // })
+          }
+        }
+      }
+      // this.$emit('input', this.selectedFields)
+      this.$emit('update:modelValue', this.selectedFields)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/workflow-editor/src/properties-editors/human-task/editable-field-selection.vue

@@ -0,0 +1,430 @@
+<template>
+  <el-dialog
+    id="appContainer"
+    width="60%"
+    :title="$t('workflowEditor.task.selectEditableField')"
+    model-value
+    top="10vh"
+    append-to-body
+    class="properties-editor-noTab"
+    center
+    @close="$emit('close')"
+  >
+    <el-form :model="formModel">
+      <!-- <el-transfer
+        v-model="formModel.selectedFields"
+        filterable
+        :filter-method="filterMethod"
+        :render-content="renderTransferFunc"
+        :filter-placeholder="$t('workflowEditorMessage.pleaseEnterFieldName')"
+        :data="availableFields"
+        :props="{
+          key:'name',
+          label:'label'
+        }"
+        :titles="[this.$t('workflowEditor.task.optionalField'),this.$t('workflowEditor.task.selectedFields')]"
+      /> -->
+      <!-- <el-checkbox-group v-model="formModel.selectedFields">
+        <span :key="count" :v-for="count in availableFieldsCount">
+          <el-row>
+            <el-col :span="8">
+              <el-checkbox label="复选框 A" />
+            </el-col>
+            <el-col :span="8">
+              <el-checkbox label="复选框 A" />
+            </el-col>
+            <el-col :span="8">
+              <el-checkbox label="复选框 A" />
+            </el-col>
+          </el-row>
+        </span>
+      </el-checkbox-group> -->
+      <el-checkbox-group v-model="formModel.selectedFields">
+        <el-row>
+          <template v-for="(item, count) in availableFieldsCount" :key="item.prop">
+            <el-col
+              v-if="availableFields[count * 3 + 0] && !availableFields[count * 3 + 0].baseField"
+              :span="8"
+            >
+              <el-checkbox
+                v-if="availableFields[count * 3 + 0].name.indexOf('$') === -1"
+                :label="availableFields[count * 3 + 0].name"
+                @change="
+                  pinSelect(
+                    availableFields[count * 3 + 0].name,
+                    availableFields[count * 3 + 0].index
+                  )
+                "
+                ><span :title="availableFields[count * 3 + 0].label">{{
+                  availableFields[count * 3 + 0].label
+                }}</span></el-checkbox
+              >
+              <el-checkbox
+                v-else
+                :label="availableFields[count * 3 + 0].name"
+                @change="
+                  pinSelect(
+                    availableFields[count * 3 + 0].name,
+                    availableFields[count * 3 + 0].index
+                  )
+                "
+                ><span
+                  style="color: #409eff"
+                  class="ellipsis"
+                  :title="availableFields[count * 3 + 0].label"
+                  >{{ availableFields[count * 3 + 0].label }}</span
+                ></el-checkbox
+              >
+            </el-col>
+            <el-col
+              v-if="availableFields[count * 3 + 1] && !availableFields[count * 3 + 1].baseField"
+              :span="8"
+            >
+              <el-checkbox
+                v-if="availableFields[count * 3 + 1].name.indexOf('$') === -1"
+                :label="availableFields[count * 3 + 1].name"
+                @change="
+                  pinSelect(
+                    availableFields[count * 3 + 1].name,
+                    availableFields[count * 3 + 1].index
+                  )
+                "
+                ><span :title="availableFields[count * 3 + 1].label">{{
+                  availableFields[count * 3 + 1].label
+                }}</span></el-checkbox
+              >
+              <el-checkbox
+                v-else
+                :label="availableFields[count * 3 + 1].name"
+                @change="
+                  pinSelect(
+                    availableFields[count * 3 + 1].name,
+                    availableFields[count * 3 + 1].index
+                  )
+                "
+                ><span
+                  style="color: #409eff"
+                  class="ellipsis"
+                  :title="availableFields[count * 3 + 1].label"
+                  >{{ availableFields[count * 3 + 1].label }}</span
+                ></el-checkbox
+              >
+            </el-col>
+            <el-col
+              v-if="availableFields[count * 3 + 2] && !availableFields[count * 3 + 2].baseField"
+              :span="8"
+            >
+              <el-checkbox
+                v-if="availableFields[count * 3 + 2].name.indexOf('$') === -1"
+                :label="availableFields[count * 3 + 2].name"
+                @change="
+                  pinSelect(
+                    availableFields[count * 3 + 2].name,
+                    availableFields[count * 3 + 2].index
+                  )
+                "
+                ><span :title="availableFields[count * 3 + 2].label">{{
+                  availableFields[count * 3 + 2].label
+                }}</span></el-checkbox
+              >
+              <el-checkbox
+                v-else
+                :label="availableFields[count * 3 + 2].name"
+                @change="
+                  pinSelect(
+                    availableFields[count * 3 + 2].name,
+                    availableFields[count * 3 + 2].index
+                  )
+                "
+                ><span
+                  style="color: #409eff"
+                  class="ellipsis"
+                  :title="availableFields[count * 3 + 2].label"
+                  >{{ availableFields[count * 3 + 2].label }}</span
+                ></el-checkbox
+              >
+            </el-col>
+          </template>
+        </el-row>
+        <el-collapse v-model="activeNames">
+          <el-collapse-item :title="$t('workflowEditor.task.baseField')" name="baseField">
+            <template v-for="(item, count) in availableFieldsCount" :key="item.prop">
+              <span>
+                <el-row>
+                  <el-col
+                    v-if="
+                      availableFields[count * 3 + 0] && availableFields[count * 3 + 0].baseField
+                    "
+                    :span="8"
+                  >
+                    <el-checkbox
+                      v-if="availableFields[count * 3 + 0].name.indexOf('$') === -1"
+                      :label="availableFields[count * 3 + 0].name"
+                      @change="
+                        pinSelect(
+                          availableFields[count * 3 + 0].name,
+                          availableFields[count * 3 + 0].index
+                        )
+                      "
+                      ><span :title="availableFields[count * 3 + 0].label">{{
+                        availableFields[count * 3 + 0].label
+                      }}</span></el-checkbox
+                    >
+                    <el-checkbox
+                      v-else
+                      :label="availableFields[count * 3 + 0].name"
+                      @change="
+                        pinSelect(
+                          availableFields[count * 3 + 0].name,
+                          availableFields[count * 3 + 0].index
+                        )
+                      "
+                      ><span
+                        style="color: #409eff"
+                        class="ellipsis"
+                        :title="availableFields[count * 3 + 0].label"
+                        >{{ availableFields[count * 3 + 0].label }}</span
+                      ></el-checkbox
+                    >
+                  </el-col>
+                  <el-col
+                    v-if="
+                      availableFields[count * 3 + 1] && availableFields[count * 3 + 1].baseField
+                    "
+                    :span="8"
+                  >
+                    <el-checkbox
+                      v-if="availableFields[count * 3 + 1].name.indexOf('$') === -1"
+                      :label="availableFields[count * 3 + 1].name"
+                      @change="
+                        pinSelect(
+                          availableFields[count * 3 + 1].name,
+                          availableFields[count * 3 + 1].index
+                        )
+                      "
+                      ><span :title="availableFields[count * 3 + 1].label">{{
+                        availableFields[count * 3 + 1].label
+                      }}</span></el-checkbox
+                    >
+                    <el-checkbox
+                      v-else
+                      :label="availableFields[count * 3 + 1].name"
+                      @change="
+                        pinSelect(
+                          availableFields[count * 3 + 1].name,
+                          availableFields[count * 3 + 1].index
+                        )
+                      "
+                      ><span
+                        style="color: #409eff"
+                        class="ellipsis"
+                        :title="availableFields[count * 3 + 1].label"
+                        >{{ availableFields[count * 3 + 1].label }}</span
+                      ></el-checkbox
+                    >
+                  </el-col>
+                  <el-col
+                    v-if="
+                      availableFields[count * 3 + 2] && availableFields[count * 3 + 2].baseField
+                    "
+                    :span="8"
+                  >
+                    <el-checkbox
+                      v-if="availableFields[count * 3 + 2].name.indexOf('$') === -1"
+                      :label="availableFields[count * 3 + 2].name"
+                      @change="
+                        pinSelect(
+                          availableFields[count * 3 + 2].name,
+                          availableFields[count * 3 + 2].index
+                        )
+                      "
+                      ><span :title="availableFields[count * 3 + 2].label">{{
+                        availableFields[count * 3 + 2].label
+                      }}</span></el-checkbox
+                    >
+                    <el-checkbox
+                      v-else
+                      :label="availableFields[count * 3 + 2].name"
+                      @change="
+                        pinSelect(
+                          availableFields[count * 3 + 2].name,
+                          availableFields[count * 3 + 2].index
+                        )
+                      "
+                      ><span
+                        style="color: #409eff"
+                        class="ellipsis"
+                        :title="availableFields[count * 3 + 2].label"
+                        >{{ availableFields[count * 3 + 2].label }}</span
+                      ></el-checkbox
+                    >
+                  </el-col>
+                </el-row>
+              </span>
+            </template>
+          </el-collapse-item>
+        </el-collapse>
+      </el-checkbox-group>
+
+      <el-form-item :label="$t('workflowEditor.task.editingMethod')">
+        <el-radio-group v-model="formModel.constraintRule">
+          <el-radio label="REQUIRED">
+            {{ $t('workflowEditorMessage.mustFill') }}
+          </el-radio>
+          <el-radio label="READ_ONLY">
+            {{ $t('workflowEditorMessage.readOnly') }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="$t('workflowEditor.task.additionalConditions')">
+        <el-switch v-model="formModel.showCondition" />
+        <additional-condition v-if="formModel.showCondition" v-model="formModel.condition" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" size="small" @click="setSelectedFields">
+        {{ $t('workflowEditorPublicModel.determine') }}
+      </el-button>
+      <el-button size="small" @click="$emit('close')">
+        {{ $t('workflowEditorPublicModel.cancel') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import AdditionalCondition from '../common/additional-condition'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'EditableFieldSelection',
+  components: {
+    AdditionalCondition
+  },
+  props: {
+    value: {
+      type: Array,
+      default: null
+    },
+    disabledFields: {
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    return {
+      availableFields: [],
+      formModel: {
+        selectedFields: [],
+        constraintRule: 'REQUIRED',
+        showCondition: false,
+        condition: ''
+      },
+      availableFieldsCount: null,
+      orange: -1,
+      pin: false,
+      dialogVisible: true,
+      activeNames: ['baseField']
+      // renderTransferFunc(h, option) {
+      //   if (option.name.indexOf('$') === 0) {
+      //   // 表示是子表字段
+      //     return <span style='color:#409EFF'>{ option.label }</span>
+      //   } else {
+      //     return <span>{ option.label }</span>
+      //   }
+      // }
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', ['formFieldsWithSub'])
+  },
+  created() {
+    let fieldIndex = 0
+    this.formFieldsWithSub.map((item) => {
+      if (this.disabledFields.indexOf(item.name) < 0) {
+        item.index = fieldIndex
+        this.availableFields.push(item)
+        fieldIndex++
+      }
+    })
+    const length = this.availableFields.length
+    this.availableFieldsCount = Math.ceil(length / 3)
+    // this.$set(this, 'availableFieldsCount', Math.ceil(length / 3))
+    // this.$set(this, 'availableFieldsCount', 21)
+  },
+  mounted() {
+    window.addEventListener('keydown', (code) => {
+      console.log('按住')
+      if (code.keyCode === 16 && code.shiftKey) {
+        this.pin = true
+      }
+    })
+    window.addEventListener('keyup', (code) => {
+      console.log('松开')
+      if (code.keyCode === 16) {
+        this.pin = false
+      }
+    })
+  },
+  methods: {
+    filterMethod(query, item) {
+      if (item.label && item.label.indexOf(query) > -1) {
+        return true
+      } else {
+        console.log('filterMethod--item.label=', item.label, item)
+        return false
+      }
+    },
+    setSelectedFields() {
+      const fields = []
+      for (const field of this.formModel.selectedFields) {
+        fields.push({
+          name: field,
+          constraintRule: this.formModel.constraintRule,
+          condition: this.formModel.showCondition ? this.formModel.condition : ''
+        })
+      }
+      // 之前是$emit('input)事件，会导致字段复选框无法选中
+      this.$emit('input-value', fields)
+      this.$emit('close')
+    },
+    pinSelect(item, index) {
+      console.log(item, index)
+      const dataList = this.availableFields
+      const origin = this.origin
+      const endIdx = index
+      if (this.pin && this.formModel.selectedFields.indexOf(item) !== -1) {
+        console.log(this.formModel.selectedFields.indexOf(item))
+        const sum = Math.abs(origin - endIdx) + 1
+        const min = Math.min(origin, endIdx)
+        let i = 0
+        while (i < sum) {
+          const index = min + i
+          if (this.formModel.selectedFields.indexOf(dataList[index].name) === -1) {
+            this.formModel.selectedFields.push(dataList[index].name)
+          }
+          i++
+        }
+      } else {
+        this.origin = index
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#appContainer :deep(.el-checkbox) {
+  display: block;
+}
+#appContainer :deep(.el-transfer-panel) {
+  width: 400px;
+}
+#appContainer :deep(.ellipsis) {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: keep-all;
+  width: 55%;
+}
+</style>