@zhijiancloud/bpm 0.0.6 → 0.0.7

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

@@ -0,0 +1,529 @@
+<template>
+  <div>
+    <div v-if="mode === 'view'" :title="value" @click="openOptionsModal" style="display: flex; max-width: 360px; cursor: pointer;">
+      <span style="flex: 1;">
+        {{ label || '--' }}
+      </span>
+      <i aria-hidden="true" class="fa fa-angle-right"></i>
+    </div>
+    <div v-else :title="value" @click="openOptionsModal" style="display: flex; max-width: 360px; cursor: pointer;">
+      <span style="flex: 1;">
+        {{ label || (loading ? '加载中' : `${$z('请选择', 'c.please_select')}${fieldConf.name}(多选)`) }}
+        <span v-show="loading" class="typing_loader"></span>
+      </span>
+      <i aria-hidden="true" class="fa fa-angle-right"></i>
+    </div>
+
+    <el-dialog
+      :title="fieldConf.name"
+      :visible.sync="optionsModalShow"
+      :width="'50%'"
+      top="10vh"
+      custom-class="bpm-select-entrance-form"
+      @close="handleClose">
+      <div :style="{
+        maxHeight: '70vh',
+        overflow: 'auto'
+      }" class="main-wrap">
+        <template v-if="mode === 'view'">
+          <el-card
+            v-for="item in items"
+            :key="item.form_id"
+            shadow="hover" :body-style="{ padding: '10px 20px' }"
+            class="select-option-card">
+            <div slot="header">
+              <span>{{ item.title }}</span>
+            </div>
+            <div class="card-body-content">
+              <div>
+                <span :style="{ background: getStatus(item.f_fields[statusField.id], 'color') }" class="bpm-status_tag-status">{{ getStatus(item.f_fields[statusField.id], 'label') }}</span>
+              </div>
+              <div v-for="field in descFields" :key="field.id">
+                <label class="label">{{ field.name }}</label>
+                <span>{{ item.f_fields[field.id] }}</span>
+              </div>
+            </div>
+          </el-card>
+        </template>
+        <template v-else>
+          <div class="search-wrap">
+            <el-input
+              v-if="enableSearchText"
+              :placeholder="$z('搜索', 'c.search_tip')"
+              v-model="keyword"
+              @input="debounceSearch">
+              <i slot="suffix" @click="debounceSearch" class="el-input__icon el-icon-search" style="cursor: pointer;"></i>
+            </el-input>
+            <el-button @click="filterModalShow = true" style="margin-left: 10px;">
+              <i class="fa fa-filter" aria-hidden="true"></i>
+            </el-button>
+          </div>
+          <ul v-infinite-scroll="loadMore" class="edit-list">
+            <el-checkbox-group v-model="selectedVals">
+              <li v-for="item in items" :key="item.form_id" class="edit-list-item">
+                <el-checkbox :label="item.id" class="checkbox">{{  }}</el-checkbox>
+                <el-card
+                  :key="item.form_id"
+                  shadow="hover" :body-style="{ padding: '10px 20px' }"
+                  class="select-option-card">
+                  <div slot="header">
+                    <span>{{ item.title }}</span>
+                  </div>
+                  <div class="card-body-content">
+                    <div>
+                      <span :style="{ background: getStatus(item.f_fields[statusField.id], 'color') }" class="bpm-status_tag-status">{{ getStatus(item.f_fields[statusField.id], 'label') }}</span>
+                    </div>
+                    <div v-for="field in descFields" :key="field.id">
+                      <label class="label">{{ field.name }}</label>
+                      <span>{{ item.f_fields[field.id] }}</span>
+                    </div>
+                  </div>
+                </el-card>
+              </li>
+            </el-checkbox-group>
+          </ul>
+        </template>
+
+        <div v-show="optionsLoading" style="text-align: center; margin: 46px auto;">
+          <span class="typing_loader"></span>
+        </div>
+        <div v-if="!optionsLoading && !items.length">
+          {{ $z("暂无记录信息", "c.no_record") }}
+        </div>
+      </div>
+      <footer v-if="mode === 'edit'" slot="footer" class="footer">
+        <div>
+          <el-checkbox v-model="checkAll" :label="$z('全选', 'c.select_all')" @change="handleCheckAll"></el-checkbox>
+          <span v-if="selectedLabel" class="subtext">{{ selectedLabel }}</span>
+        </div>
+        <el-button type="primary" :disabled="!selectedVals.length" @click="onSubmit" class="width-button">{{ $z('保存', 'c.save') }}</el-button>
+      </footer>
+    </el-dialog>
+
+    <el-dialog
+      title="数据筛选"
+      :visible.sync="filterModalShow"
+      width="50%"
+      custom-class="bpm-select-entrance-form"
+      @close="filterModalShow = false">
+      <div style="max-height: 70vh; overflow: auto;">
+        <BpmFieldsFilter
+          ref="searchForm"
+          :searchSchema="searchSchema"
+          :verifySchema="verifySchema"
+          :orgInfo="orgInfo"
+          :formDefId="formSchema.id"
+          :showAll="true"
+          :queryExclude="true"
+          @search="handleFilterReady">
+        </BpmFieldsFilter>
+      </div>
+
+      <span slot="footer">
+        <el-button @click="handleResetFilter" class="width-button">{{ $z('重置', 'c.reset') }}</el-button>
+        <el-button type="primary" @click="handleSubmitFilter" class="width-button">{{ $z('查询', 'c.query') }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+const VALUE_LABEL_COMPONENT_TYPES = [
+  'Area', 'MulArea'
+]
+
+import api from '../../../api/index.js'
+import { isMobile } from '../../utils.js'
+import BpmFieldsFilter from '../../bpmFieldsFilter/src/main.vue'
+
+export default {
+  name: "BpmSelectEntranceForm",
+  components: {
+    BpmFieldsFilter
+  },
+  props: {
+    value: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    type: {
+      type: String,
+      default: 'MulSelectEntranceForm'
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    mode: {
+      type: String,
+      default: 'view' // view, edit
+    },
+    uiType: {
+      type: String,
+      default: 'default' // default,table,form,search
+    },
+    formDefId: {
+      type: String,
+      default: ''
+    },
+    orgInfo: {
+      type: Object,
+      default () {
+        return {
+          level: 'group', // group,team,project
+          level_id: 0,
+          group_id: 0
+        }
+      }
+    },
+    formId: {
+      type: String,
+      default: ''
+    },
+    dm: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    isMultiple: {
+      type: Boolean,
+      default() {
+        return true
+      },
+    },
+  },
+  data(){
+    return {
+      loading: false,
+      optionsModalShow: false,
+      items: [],
+      selectedItems: [],
+      selectedVals: [],
+      optionsLoading: false,
+      statusField: {},
+      descFields: [],
+      shouldTransLabelKeys: [],
+      formSchema: {},
+      
+      pagination: {
+        action: 'first',
+        lastAt: null,
+        total: 0,
+      },
+      checkAll: false,
+      filterModalShow: false,
+      searchSchema: {
+        elements: []
+      },
+      verifySchema: {},
+      enableSearchText: true,
+      debounceSearch: _.debounce(_.bind(this.loadData, this), 300, {
+        trailing: true,
+        leading: false
+      }),
+      keyword: "",
+      filterParams: {},
+    }
+  },
+    computed: {
+      isMobile() {
+        return isMobile()
+      },
+      // edit确定选择后的，以及view的显示
+      label () {
+        const valueArr = this.value
+        if (!valueArr || !valueArr.length) return ''
+
+        let str = zj.z('已选择N条', 'c.number_is_selected')
+        return _.template(str)({
+          count: valueArr.length
+        })
+      },
+      // edit操作中的
+      selectedLabel () {
+        if (!this.selectedVals.length) return ''
+
+        let str = zj.z('选中N条', 'c.number_is_selected_2')
+        return _.template(str)({
+          count: this.selectedVals.length
+        })
+      }
+    },
+    methods: {
+      getStatus (value, attr) {
+        let rangeEnumMap = this.statusField.rangeEnumMap || {}
+        let obj = rangeEnumMap[value] || {}
+        return obj[attr]
+      },
+      async openOptionsModal () {
+        this.optionsModalShow = true
+        if (!this.formSchema.id) {
+          await this.loadSchema()
+        }
+        if (this.value && this.value.length) {
+          await this.loadListSelected()
+        }
+        if (this.mode === 'edit') {
+          if (!this.pagination.lastAt) { // 上一次无数据
+            // 筛选重置
+            this.handleResetFilter()
+            this.loadData()
+          }
+
+          this.selectedVals = this.value || []
+        }
+      },
+      handleClose () {
+        this.optionsModalShow = false
+
+        if (this.mode === 'edit') {
+          this.checkAll = false
+          this.selectedVals = []
+          // this.selectedItems = []
+          // 筛选重置
+          // this.handleResetFilter()
+        }
+      },
+      
+      handleResetFilter () {
+        if (this.$refs.searchForm) this.$refs.searchForm.reset()
+      },
+      handleSubmitFilter () {
+        if (this.$refs.searchForm) this.$refs.searchForm.submit()
+      },
+      handleFilterReady (formData) {
+        this.filterParams = formData || {}
+        this.filterModalShow = false
+        this.loadData()
+      },
+
+      handleCheckAll (value) {
+        if (value) {
+          this.selectedVals = _.map(this.items, item => {
+            return item.id
+          })
+        } else {
+          this.selectedVals = []
+        }
+      },
+      onSubmit() {
+        const value = _.cloneDeep(this.selectedVals)
+        this.$emit('input', value)
+        this.$emit('change', value)
+
+        this.handleClose()
+      },
+
+      loadMore () {
+        if (this.items.length < this.pagination.total) {
+          this.loadData('next')
+        }
+      },
+      async loadData(action = 'first') {
+        let formDefId = this.formDefId
+        const fieldDefId = this.fieldConf.id
+        action = ['first', 'next', 'last', 'prev'].includes(action) ? action : 'first'
+
+        // 搜索与筛选
+        let filterFields = this.filterParams
+        if (this.keyword) {
+          filterFields['q__contains'] = this.keyword
+        }
+        this.optionsLoading = true
+        const res = await api.assistSelectEntranceForm.getOptions(this.$bpm, {
+          formDefId,
+          fieldDefId,
+          orgInfo: this.orgInfo,
+          isDm: this.dm
+        }, {
+          action: action,
+          limit: 20,
+          last_at: action === 'first' ? null : this.pagination.lastAt,
+          fields: JSON.stringify(filterFields)
+        })
+        const resData = res.data.data
+        console.log('assist_select_entrance_form data: ', resData)
+
+        const pageItems = _.map(resData.data, item => {
+          // 处理需转换值的字段
+          _.each(item.f_fields, async (value, key) => {
+            if (this.shouldTransLabelKeys.includes(key)) {
+              if (_.isArray(value)) {
+                const loader = api.assistField.getBatchLoader(this.$bpm, {
+                  formDefId: this.formSchema.id,
+                  fieldDefId: key,
+                  orgInfo: this.orgInfo
+                })
+                let valueLabel = await loader.loads(...value)
+                item.f_fields[key] = valueLabel.join(zj.z(',', 'c.comma'))
+              } else {
+                const loader = api.assistField.getBatchLoader(this.$bpm, {
+                  formDefId: this.formSchema.id,
+                  fieldDefId: key,
+                  orgInfo: this.orgInfo
+                })
+                let valueLabel = await loader.load(value)
+                item.f_fields[key] = valueLabel
+              }
+            }
+          })
+
+          return {
+            title: item.title,
+            id: item.form_id,
+            form_id: item.form_id,
+            f_fields: item.f_fields,
+            fields: _.map(item.f_fields, (value, key) => {
+              return {
+                key,
+                value
+              }
+            })
+          }
+        })
+
+        // 选中的放在最前面
+        let items = pageItems
+        if (this.selectedItems.length) {
+          let ids = _.map(this.selectedItems, item => item.id)
+          items = _.filter(pageItems, item => {
+            return !ids.includes(item.id)
+          })
+        }
+        if (action === 'next') {
+          this.items = _.concat(this.items, items)
+
+        } else {
+          this.items = _.concat(this.selectedItems, items)
+        }
+        
+        this.pagination.action = action
+        this.pagination.lastAt = resData.last_at
+        this.pagination.total = resData.count
+        this.optionsLoading = false
+      },
+      async loadListSelected () {
+        let formId = this.formId
+        formId = encodeURIComponent(formId)
+        let formDefId = this.formDefId
+        const fieldDefId = this.fieldConf.id
+        this.optionsLoading = true
+
+        try {
+          const res = await api.assistSelectEntranceForm.getListSelected(this.$bpm, {
+            formDefId,
+            fieldDefId,
+            orgInfo: this.orgInfo,
+            isDm: this.dm
+          }, {
+            form_id: formId
+          })
+          const resData = res.data.data
+          console.log('assist_select_entrance_form list_selected: ', resData)
+
+          const selectedItems = _.map(resData.data, item => {
+            // 处理需转换值的字段
+            _.each(item.f_fields, async (value, key) => {
+              if (this.shouldTransLabelKeys.includes(key)) {
+                if (_.isArray(value)) {
+                  const loader = api.assistField.getBatchLoader(this.$bpm, {
+                    formDefId: this.formSchema.id,
+                    fieldDefId: key,
+                    orgInfo: this.orgInfo
+                  })
+                  let valueLabel = await loader.loads(...value)
+                  item.f_fields[key] = valueLabel.join(zj.z(',', 'c.comma'))
+                } else {
+                  const loader = api.assistField.getBatchLoader(this.$bpm, {
+                    formDefId: this.formSchema.id,
+                    fieldDefId: key,
+                    orgInfo: this.orgInfo
+                  })
+                  let valueLabel = await loader.load(value)
+                  item.f_fields[key] = valueLabel
+                }
+              }
+            })
+
+            return {
+              title: item.title,
+              id: item.form_id,
+              form_id: item.form_id,
+              f_fields: item.f_fields,
+              fields: _.map(item.f_fields, (value, key) => {
+                return {
+                  key,
+                  value
+                }
+              })
+            }
+          })
+
+          this.selectedItems = selectedItems
+          if (this.mode === 'view') this.items = selectedItems
+        } finally {
+          this.optionsLoading = false
+        }
+      },
+      async loadSchema () {
+        let formDefId = this.formDefId
+        const fieldDefId = this.fieldConf.id
+        const res = await api.assistSelectEntranceForm.getListDefinition(this.$bpm, {
+          formDefId,
+          fieldDefId,
+          orgInfo: this.orgInfo,
+          isDm: this.dm
+        })
+        const resData = res.data.data
+        console.log('assist_select_entrance_form definition: ', resData)
+        let statusField = {}
+        let descFields = []
+        let shouldTransLabelKeys = []
+        _.each(resData.definition.form.elements, (item) => {
+          if (item.type !== 'Status') {
+            descFields.push({
+              id: item.id,
+              name: item.name,
+              value_type: item.value_type,
+              type: item.type
+            })
+          } else {
+            let rangeEnumMap = {}
+            item.range_enum.forEach(sItem => {
+              rangeEnumMap[sItem[0]] = {
+                value: sItem[0],
+                label: sItem[1],
+                color: sItem[2]
+              }
+            })
+            statusField = {
+              id: item.id,
+              name: item.name,
+              value_type: item.value_type,
+              type: item.type,
+              rangeEnumMap
+            }
+          }
+
+          // 判断是否需要转换值
+          if (VALUE_LABEL_COMPONENT_TYPES.includes(item.type) || item.type.indexOf('Select') > -1) {
+            shouldTransLabelKeys.push(item.id)
+          }
+        })
+        this.descFields = descFields
+        this.statusField = statusField
+        this.shouldTransLabelKeys = shouldTransLabelKeys
+        this.formSchema = resData.definition.form
+
+        this.searchSchema = _.get(resData, 'definition.search', { elements: [] })
+        this.verifySchema = _.get(resData, 'schema.search', {})
+        const searchElm = this.searchSchema.elements ? _.find(this.searchSchema.elements, { id: 'q__contains' }) : false
+        this.enableSearchText = this.searchSchema.enable_search_text && searchElm
+      },
+    }
+}
+</script>

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

@@ -1,5 +1,6 @@
 <template>
   <component
+    ref='inner-component'
     class="bpm-select-form-field"
     v-model="curVal"
     :is="curComponent"

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

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import _ from "lodash";
+// import _ from "lodash";
 
 import Vue from "vue";
 import { Select, Option } from "element-ui";
@@ -43,38 +43,52 @@ export default {
   watch: {
     value() {
       this.curVal = this.value;
+    },
+    getSelectOptions: function(val) {
+      console.log("----selectOptions----",val);
+      this.options = _.map(val,item => {
+        return {
+          label:item[0],
+          value:item[1]
+        }
+      });
     }
   },
+  inject:["selectOptions"],
 
   computed: {
     placeholder() {
       return this.fieldConf.desc || this.fieldConf.name;
     },
+    getSelectOptions() {
+      return this.selectOptions()
+    }
   },
   created () {
     this.curVal = this.isMultiple ? [] : ""
   },
   mounted() {
-    this.search();
+  
+    //组件可见下，才去拉取下拉框
+    if(this.fieldConf && this.fieldConf.perm && this.fieldConf.perm.visible){
+          this.search();
+    }
+
     this.curVal = this.value;
   },
   methods: {
+
+
     async search(query = "") {
-      let formName = this.formName;
+      let formName = this.formDefId;
       let fieldId = this.fieldConf.id;
-      let result = await zj.net.w.noapi({
-        url: `/app_flow/v1/papi/dm/assist_field/${formName}/${fieldId}/search_title/?q=${query}`,
-        params: this.orgInfo,
-      });
-      this.options = _.map(result.data, (item) => {
-        return {
-          value: _.get(item, "0"),
-          label: _.get(item, "1"),
-        };
-      });
+
+      this.options = await this.$bpm.searchSelectOpts(fieldId, query, formName, this, true, this.orgInfo)
+    
     },
     onChange(curVal){
       this.$emit("input", curVal)
+      this.$emit("change", curVal)
     }
   },
 };

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

@@ -124,11 +124,8 @@ export default {
       let keyword = this.keyword;
       let formName = this.formName;
       let fieldId = _.get(this.fieldConf, "id");
-      let result = await zj.net.w.noapi({
-        url: `/app_flow/v1/papi/dm/assist_field/${formName}/${fieldId}/search_title/?q=${keyword}`,
-        params: this.orgInfo,
-      });
-      let data = _.map(result.data, (item) => {
+      let result = await this.$bpm.searchSelectOpts(fieldId, keyword, formName, this, true, this.orgInfo)
+      let data = _.map(result, (item) => {
         return {
           title: item.title,
           id: item.form_id,

package/components/lib/bpmSelectHouseOwner/index.js

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