@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/TimerRuleFormItem.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="container" :style="$component.style">
+    <epx-table-form v-if="fieldsConfigs.length>0" class="form-content" ref="form" :metaId="$metaId" :fieldsConfigs="fieldsConfigs" v-model="data" :column="column">
+      <template v-slot:default="{showLabel, fieldConfigs, metaId, ruleMetaId }">
+        <div v-if="fieldConfigs.attriName==='TRIGGER'">
+          <div class="form-item">
+            <label class="form-item__label" for="">执行频次：</label>
+            <el-radio-group style="margin-top: 12px" v-model="timer.rate">
+              <el-radio label='day'>每天</el-radio>
+              <el-radio label='week'>每周</el-radio>
+              <el-radio label="month" value="month">每月</el-radio>
+            </el-radio-group>
+          </div>
+          <div class="form-item">
+            <label class="form-item__label" for="">执行时间：</label>
+            <el-select class="form-item__select" size="default" v-model="timer.day" v-if="timer.rate==='week'">
+              <el-option value="1" label="星期一"></el-option>
+              <el-option value="2" label="星期二"></el-option>
+              <el-option value="3" label="星期三"></el-option>
+              <el-option value="4" label="星期四"></el-option>
+              <el-option value="5" label="星期五"></el-option>
+              <el-option value="6" label="星期六"></el-option>
+              <el-option value="7" label="星期日"></el-option>
+            </el-select>
+             <el-select class="form-item__select" size="default" v-model="timer.day" v-if="timer.rate==='month'">
+              <el-option v-for="(item, index) in new Array(31)" :key="index" :value="`${index+1}`" :label="index+1"></el-option>
+              <el-option value="L" label="最后一天"></el-option>
+            </el-select>
+            <el-time-picker
+              v-model="timer.time"
+              value-format="HH:mm:ss"
+              :default-value="defaultDate"
+              placeholder="请选择检测时间">
+            </el-time-picker>
+          </div>
+        </div>
+        <div v-else-if="fieldConfigs.attriName==='PARAMS'">
+          <div class="form-item">
+            <label class="form-item__label" for="">参数：</label>
+            <div>
+              <div class="param-item" v-for="(value, key) in params" :key="key">
+                {{key}}：{{value}}
+                <i class="el-icon-close" @click="deleteParam(key)"> </i>
+              </div>
+              <el-button type="primary" link @click="addParamDialog=true">+ 添加参数</el-button>
+            </div>
+          </div>
+        </div>
+        <epx-table-form-item
+          v-else
+          :show-label="showLabel"
+          :label="fieldConfigs.attriLabel"
+          :metaId="metaId"
+          :ruleMetaId="ruleMetaId"
+          :fieldConfigs="fieldConfigs"
+          :rules="[{
+            required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+            message: `${fieldConfigs.attriLabel}不能为空`
+          }]"
+        >
+        </epx-table-form-item>
+      </template>
+    </epx-table-form>
+    <el-dialog
+      title="添加参数"
+      :model-value="!!addParamDialog"
+      width="400px"
+      @close="addParamDialog = false"
+    >
+      <div>
+        <div class="add-params-input">
+          <span>参数名：</span>
+          <el-input :model-value="addParam.key" @update:model-value="v => (addParam['key'] = v)"> </el-input>
+        </div>
+        <div class="add-params-input">
+          <span>参数值：</span>
+          <el-input :model-value="addParam.value" @update:model-value="v => (addParam['value'] = v)"> </el-input>
+        </div>
+        <div>
+          <el-button type="primary" @click="addParamFn">确定</el-button>
+          <el-button @click="addParamDialog = false">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    </div>
+</template>
+<script>
+import AddFormItemVue from '@epxing/components/src/add-form-item'
+export default {
+  name: 'epx-timer-rule-form-item',
+  extends: AddFormItemVue,
+  data () {
+    return {
+      params: {},
+      timer: {
+        rate: 'day'
+      },
+      addParam: {
+        key: '',
+        value: ''
+      },
+      addParamDialog: false,
+      defaultDate: ''
+    }
+  },
+  watch: {
+    timer: {
+      handler (v) {
+        const times = v.time.split(':')
+        const trigger = {
+          rate: v.rate,
+          day: v.day,
+          hour: times[0],
+          minute: times[1],
+          second: times[2]
+        }
+        this.formData.TRIGGER = JSON.stringify(trigger)
+      },
+      deep: true
+    },
+    'timer.rate' (v) {
+      const { day } = this.timer
+      if (v === 'week') {
+        if (!day || day > 7) {
+          this.timer.day = '1'
+        }
+      } else if (v === 'month') {
+        if (!day) {
+          this.timer.day = '1'
+        }
+      }
+    },
+    params: {
+      handler (v) {
+        const value = JSON.stringify(v)
+        if (value !== '{}') {
+          this.formData.PARAMS = value
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    addParamFn () {
+      const { key, value } = this.addParam
+      if (!key || !value) {
+        this.$message.error('请输入参数')
+        return
+      }
+      this.params = { ...this.params, [key]: value }
+      this.addParamDialog = false
+    },
+    deleteParam (key) {
+      const params = { ...this.params }
+      delete params[key]
+      this.params = params
+    }
+  },
+  created () {
+    const dateStr = this.$moment().format('YYYY-MM-DD HH') + ':00:00'
+    this.defaultDate = this.$moment(dateStr).toDate()
+    try {
+      const { TRIGGER = '{}', PARAMS = '{}' } = this.formData
+      const trigger = JSON.parse(TRIGGER)
+      this.timer = {
+        rate: trigger.rate || 'day',
+        day: trigger.day,
+        time: trigger.hour + ':' + trigger.minute + ':' + trigger.second
+      }
+
+      this.params = JSON.parse(PARAMS)
+    } catch (error) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: var(--epx-bg-card);
+}
+.form-item {
+  display: flex;
+  line-height: 36px;
+  margin: 16px 0;
+}
+.form-item__label {
+  width: 140px;
+  text-align: right;
+  color: var(--epx-text);
+  margin-right: 8px;
+  padding: 7px;
+}
+.form-item__select {
+  width: 120px;
+  margin-right: 10px;
+}
+.add-params-input {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  padding: 0 10px;
+  >span {
+    white-space: nowrap;
+  }
+
+    :deep(.el-input) {
+      width: 240px;
+    }
+
+}
+.param-item {
+  color: var(--epx-text);
+  >i {
+    color: red;
+    margin-left: 8px;
+    cursor: pointer;
+    display: none;
+  }
+  &:hover {
+    >i {
+      display: inline;
+    }
+  }
+}
+</style>

package/src/components/TodoList.vue

@@ -0,0 +1,424 @@
+<script>
+// @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
+import ListVue from '@epxing/components/src/entity-list'
+import { evalWith } from '@epxing/utils/src/eval-with'
+
+export default {
+  name: 'epx-todo-list',
+  extends: ListVue,
+  operateFlag: false,
+  searchMode: 'fields',
+  metaId: 'V_ACT_TASK',
+  operateColumnEllipsis: 2,
+  limieSize: 0,
+  data () {
+    return {
+      renderComponents: [this.renderList],
+      columns: [],
+      total: null
+    }
+  },
+  methods: {
+    // 获取字段配置，生成columns
+    getFields () {
+      const { fieldConfigs = {}, fields = [this.$meta.getLabel()] } = this.$configs
+
+      this.$FieldFactory.createFields({
+        defaultFieldConfigs: fieldConfigs,
+        fields: fields,
+        meta: this.$meta
+      })
+        .then(data => {
+          this.listFields = [...data]
+          const _columns = []
+          let _fields = []
+          this.listFields.forEach(field => {
+            if (field.isWrap) {
+              _columns.push(_fields)
+              _fields = []
+            }
+            _fields.push(field)
+          })
+          if (_fields.length > 0) {
+            _columns.push(_fields)
+            _fields = []
+          }
+          this.columns = _columns
+          this.getData()
+        })
+        .catch(() => {
+          this.getData()
+        })
+    },
+    getData () {
+      // eslint-disable-next-line camelcase
+      let { queryParams = {}, pageFlag = true, orderFields, order_field: orderField = [], order_mode: orderMode = [], iconField = [], limitSize } = this.$configs
+      const fieldArr = [...this.listFields, ...iconField]
+      const fields = fieldArr.map(item => (item.attriName || item))
+      const params = {
+        action: 'list',
+        entityId: this.$metaId
+      }
+      if (fields.length > 0) {
+        params.columnFieldNames = fields.join('#,') + '#'
+      }
+      if (pageFlag) {
+        params.page = this.currentPage
+        params.limit = limitSize !== 0 ? limitSize : this.pageSize
+      }
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      if (this.loading) return
+      this.loading = true
+      const submitParams = {
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.queryParams,
+        ...this.sortParams,
+        ...this.searchParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      }
+      if (this.scopeParams && this.scopeParams.length > 0) {
+        submitParams.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$http.list(submitParams)
+        .then(data => {
+          this.loading = false
+          this.total = data.total || data.entitys.length
+          this.currentPage++
+          this.data = [...this.data, ...data.entitys]
+          this.$event.emit('setListData', { total: this.total, entitys: this.data })
+          if (this.afterData) this.afterData(this.data)
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    clickItem (item) {
+      this.goCheckPage({}, item)
+    },
+    viewMore () {
+      const { morePageId } = this.$configs
+      this.$createPage({
+        entityId: this.$metaId,
+        flag: 'v_list',
+        pageId: morePageId
+      })
+    },
+    $refesh () {
+      this.currentPage = 1
+      this.data = []
+      this.getData()
+    },
+    getEntityId (item) {
+      return new Promise(resolve => {
+        this.$http.get({
+          entityId: 'ACT_RE_PROCDEF',
+          link: 'model',
+          id: item['EXECUTION|PROC_DEF_ID']
+        })
+          .then(data => {
+            let entityId = null
+            if (data && data.data) {
+              entityId = data.data['MODEL|ENTITY']
+            }
+            resolve(entityId)
+          })
+          .catch(() => {
+            resolve(null)
+          })
+      })
+    },
+    async goCheckPage (config, item) {
+      // 获取审核页面
+      if (!item) {
+        if (this.selection.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      // 查询页面对象
+      const entityId = await this.getEntityId(item)
+      const { checkPageFLag } = this.pageConfig
+      if (checkPageFLag) {
+        this.$createPage({
+          metaId: entityId,
+          id: item['EXECUTION|BUSINESS_KEY'],
+          flag: checkPageFLag,
+          pageType: 'DETAIL',
+          component: 'entity-check'
+        })
+        return
+      }
+      this.$http.get({
+        action: 'getTaskPageByTakId',
+        entityId: 'ACT_RU_EXECUTION',
+        taskId: item.ID
+      })
+        .then(data => {
+          if (data.page) {
+            // 去审核页面
+            this.$createPage({
+              metaId: entityId,
+              id: item['EXECUTION|BUSINESS_KEY'],
+              taskId: item.ID,
+              pageId: data.page,
+              pageType: 'DETAIL',
+              component: 'entity-check'
+            })
+          } else {
+            this.$message.error('没有绑定审核页面')
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    renderColumnOperates (row) {
+      const data = { ...row }
+      let foldColumnOperates = [...this.foldColumnOperates]
+      let unfoldColumnOperates = [...this.unfoldColumnOperates]
+      if (this.$isMobile) {
+        unfoldColumnOperates = []
+        foldColumnOperates = [...this.unfoldColumnOperates, ...this.foldColumnOperates]
+      }
+      return (
+        <div class="column-operates">
+          {
+            unfoldColumnOperates.map(operate => {
+              let flag = true
+              if (operate.actionOption) {
+                flag = evalWith(operate.actionOption, { data }, this)
+              }
+              if (!flag) return null
+              return (
+                <el-button
+                  class="column-operate-btn"
+                  key={operate.text}
+                  type={operate.ui}
+                  size="default"
+                  onClick={this.$handler.bind(this, operate, row)}
+                >
+                  { operate.iconCls && <i class={operate.iconCls}></i>}
+                  {operate.text}
+                </el-button>
+              )
+            })
+          }
+          {
+            foldColumnOperates.length > 0 && (
+              <el-dropdown trigger="click" onVisibleChange={(show) => (this.activeDropDown = show ? row[this.$metaKey] : '')} v-slots={{
+                dropdown: () => (<el-dropdown-menu>
+                  {
+                    foldColumnOperates.map(operate => {
+                      let flag = true
+                      if (operate.actionOption) {
+                        flag = evalWith(operate.actionOption, { data }, this)
+                      }
+                      if (!flag) return null
+                      return (
+                        <el-dropdown-item key={operate.text} onClick={this.$handler.bind(this, operate, row)} icon={operate.iconCls}>
+                          {operate.text}
+                        </el-dropdown-item>
+                      )
+                    })
+                  }
+                </el-dropdown-menu>)
+              }}>
+                <span class={['el-dropdown-link', { active: this.activeDropDown === row[this.$metaKey] }]}>
+                  { this.$isMobile ? <i class="el-icon-more"></i> : <el-button size="small" ><i class="el-icon-more"></i></el-button>}
+                </span>
+
+              </el-dropdown>
+            )
+          }
+        </div>
+      )
+    },
+    renderList () {
+      const { iconField = [], limitSize = 0 } = this.$configs
+
+      const icon = iconField[0]
+      return (
+        <ul
+          class={['list', { 'm-list': this.$isMobile }]}
+          ref="list"
+          v-infinite-scroll={this.getData}
+          infinite-scroll-distance={10}
+          infinite-scroll-disabled={limitSize !== 0 || this.data.length >= this.total}
+        >
+          {
+            this.data.map(item => (
+              <li key={item[this.$metaKey]}
+                class="list-item"
+                onClick={this.clickItem.bind(this, item)}
+              >
+                <div class="list-item-content">
+                  {
+                    icon && (
+                      <p class="list-item-icon">
+                        { item[icon] && <img src={this.$util.getFileUrl(item[icon])} /> }
+                      </p>
+                    )
+                  }
+                  <div class="list-item-field">
+                    {
+                      this.columns.map(columnItem => {
+                        return (
+                          <p key={columnItem.map(item => item.attriName).join('')}>
+                            {
+                              columnItem.map((field, index) => {
+                                if (field.state === 'HIDDEN') return null
+                                const value = item[field.attriName + '#'] || item[field.attriName]
+                                const nextField = columnItem[index + 1]
+                                let nextValue = null
+                                if (nextField && nextField.state !== 'HIDDEN') {
+                                  nextValue = item[nextField.attriName + '#'] || nextField[field.attriName]
+                                }
+                                return <span>
+                                  { field.showLabel && (field.attriLabel + '：')}
+                                  <font style={{ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + 'px' }}>{value}</font>
+                                  {index !== columnItem.length - 1 && value && nextValue ? field.split || ' | ' : ''}
+                                </span>
+                              })
+                            }
+                          </p>
+                        )
+                      })
+                    }
+                  </div>
+                </div>
+                {/** onClick={e => e.stopPropagation()} */}
+                <div class="list-item-extra">
+                  <i class="el-icon-arrow-right"></i>
+
+                </div>
+              </li>
+            ))
+          }
+          <div>
+            { this.loading && <p class="loading"><i class="el-icon-loading"></i>加载中...</p> }
+            { this.total != null && this.data.length >= this.total && <p class="no-more">没有更多了</p> }
+            { this.limieSize !== 0 && <p class="view-more" onClick={this.viewMore.bind(this)}>查看更多 <i class="el-icon-arrow-down"></i></p> }
+          </div>
+        </ul>
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.list-item {
+  display: flex;
+  align-items: center;
+  background: var(--epx-bg-card);
+  position: relative;
+  border-color: #ebedf0;
+  padding: 16px 20px;
+  overflow: hidden;
+  user-select: none;
+  &:focus {
+
+    background: var(--epx-border);
+  }
+  &::after {
+    position: absolute;
+    left: 20px;
+    bottom: 0;
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 1px;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 1px 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+  .list-item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    color: var(--epx-text);
+    line-height: 24px;
+    p:first-child {
+      font:first-child {
+        font-size:16px;
+        font-weight: bold;;
+        color: var(--epx-text);
+      }
+    }
+  }
+  .list-item-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: #ccc;
+    margin-right: 8px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .list-item-extra {
+    font-size: var(--epx-font-size-xl);
+    color: var(--epx-text-secondary);
+    margin-left: 20px;
+  }
+}
+.m-list {
+  .list-item {
+    padding: 10px 12px;
+  }
+}
+.list-operates {
+  background: var(--epx-bg-card);
+  padding: 12px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.column-operates {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.loading {
+  padding: 10px 0;
+  text-align: center;
+  @include font_color_primary;
+  i {
+    margin-right: 6px;
+  }
+}
+.no-more {
+  padding: 10px 0;
+  text-align: center;
+  @include font_color_primary;
+}
+.view-more {
+  margin: 20px 0 10px;
+  text-align: center;
+  color: var(--epx-text);
+  cursor: pointer;
+}
+</style>