epx-frame 3.5.0-shpgy.1

package/src/frame/components/task-list/TaskList.vue

@@ -0,0 +1,617 @@
+<script>
+import ListVue from '@/frame/packages/entity-list'
+export default {
+  name: 'epx-task-list',
+  extends: ListVue,
+  metaId: 'V_ACT_TASK',
+  searchFlag: true,
+  searchMode: 'field',
+  showMoreBtn: true,
+  data () {
+    return {
+      search: {}
+    }
+  },
+  computed: {
+    getTitle () {
+      return item => {
+        const name = item['APPLY_USER_ID#'] || item['V|APPLY_USER_ID#']
+        return `${name ? name + '的' : ''}${item['DEF|NAME#']}`
+      }
+    }
+  },
+  watch: {
+    search: {
+      handler (v) {
+        this.reloadData()
+      },
+      deep: true
+
+    }
+  },
+  methods: {
+    beforeCreateComponent () {
+      if (this.$isMobile) {
+        this.$options.style = { margin: '0', padding: 0 }
+      }
+    },
+    // 获取任务列表
+    getData (current, cb) {
+      const { processId, taskType: queryTaskType = 'all' } = this.$query
+      // eslint-disable-next-line camelcase
+      let { queryParams = {}, pageFlag, order_field: orderField = [], order_mode: orderMode = [], limit, taskType = queryTaskType, process = processId } = this.$configs
+      const orderFields = [{ attriName: 'CREATE_TIME', sort: 'desc' }]
+      const params = {
+        action: 'getMyTasksByType',
+        entityId: this.$metaId,
+        type: taskType,
+        'scope.CLIENT': this.CLIENT,
+        processId: process,
+        processStartUserId: '',
+        processStartTime: '',
+        processEndTime: '',
+        columnFieldNames: 'APPLY_USER_ID#,DEF|NAME#,NAME#,ENTITY,CREATE_TIME#,EXECUTION|PROC_DEF_ID#,EXECUTION|BUSINESS_KEY#,STATUS#,INST_STATUS#'
+      }
+      if (this.SYSTEM && this.$route.name !== 'hall') {
+        params['scope.SYSTEM'] = this.SYSTEM
+      }
+      if (taskType === 'apply') {
+        delete params.type
+        delete params['scope.CLIENT']
+        params.processClient = this.CLIENT
+        params.action = 'getApplylist'
+        params.entityId = 'ACT_HI_PROCINST'
+        params.columnFieldNames = 'DELETE_REASON,END_TIME,DEF|NAME#,START_USER_ID#,V|APPLY_USER_ID#,PROC_DEF_ID#,BUSINESS_KEY#,START_TIME,INST_STATUS#,TASK_NAME#'
+      }
+      if (this.search.processId) {
+        if (Array.isArray(this.search.processId)) {
+          params.processId = this.search.processId.map(item => item.id || item).join(',')
+        } else {
+          params.processId = this.search.processId.id || this.search.processId
+        }
+      }
+      if (this.search.processStartUserId) {
+        if (Array.isArray(this.search.processStartUserId)) {
+          params.processStartUserId = this.search.processStartUserId.map(item => item.id || item).join(',')
+        } else {
+          params.processStartUserId = this.search.processStartUserId.id || this.search.processStartUserId
+        }
+      }
+      if (this.search.processInstStatus) {
+        params.processInstStatus = this.search.processInstStatus
+      }
+      if (this.search.date) {
+        params.processStartTime = this.$moment(this.search.date[0]).format('YYYY-MM-DD')
+        params.processEndTime = this.$moment(this.search.date[1]).format('YYYY-MM-DD')
+      }
+      const functionField = this.listFields.filter(item => {
+        return item.function
+      })
+      let functionList = []
+      if (functionField.length > 0) {
+        functionList = functionField.map(item => ({ dataIndex: item.attriName, function: item.function }))
+        params.fieldFunctions = JSON.stringify(functionList)
+      }
+      if (pageFlag) {
+        params.page = current || this.currentPage
+        params.limit = this.pageSize
+      }
+      if (limit) {
+        params.limit = limit
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      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
+      this.$http.list({
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.searchKeyParams,
+        ...this.queryParams,
+        ...this.sortParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      })
+        .then(data => {
+          this.initData = true
+          this.loading = false
+          if (current) this.currentPage = current
+          this.data = [...data.entitys]
+          this.total = data.total || data.entitys.length
+          if (cb) cb(this.data)
+          this.$dispatchPage('listData', [{ total: this.total, entitys: this.data }])
+          this.$emit('listData', { total: this.total, entitys: this.data })
+          if (this.afterData) this.afterData(this.data)
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    getEntityId (item) {
+      return new Promise(resolve => {
+        this.$http.get({
+          entityId: 'ACT_RE_PROCDEF',
+          link: 'model',
+          id: item['EXECUTION|PROC_DEF_ID'] || item.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 { taskType: queryTaskType } = this.$query
+      const { taskType = queryTaskType } = this.$configs
+      const entityId = await this.getEntityId(item)
+      const viewDetail = taskType === 'finished' || taskType === 'notify' || taskType === 'apply'
+      const name = item['APPLY_USER_ID#'] || item['V|APPLY_USER_ID#']
+      const pageAction = taskType === 'apply' ? 'getApplyViewPage' : 'getTaskPageByTakId'
+      this.$http.get({
+        action: pageAction,
+        entityId: 'ACT_RU_EXECUTION',
+        taskId: item.ID
+      })
+        .then(data => {
+          const { checkPageId } = this.pageConfig
+          if (checkPageId) {
+            this.$createPage({
+              metaId: entityId,
+              id: item['EXECUTION|BUSINESS_KEY'] || item.BUSINESS_KEY,
+              title: `${name ? name + '的' : ''}${item['DEF|NAME#']}（${item['NAME#'] || item['TASK_NAME#']}）`,
+              flag: checkPageId,
+              pageType: 'DETAIL',
+              component: 'entity-check-page',
+              viewDetail,
+              taskType,
+              fieldConfigs: viewDetail ? {} : data.fieldConfigs || {}
+            })
+            return
+          }
+          // 去审核页面
+          this.$createPage({
+            metaId: entityId,
+            id: item['EXECUTION|BUSINESS_KEY'] || item.BUSINESS_KEY,
+            title: `${name ? name + '的' : ''}${item['DEF|NAME#']}（${item['NAME#'] || item['TASK_NAME#']}）`,
+            taskId: item.ID,
+            pageId: data.page,
+            pageType: 'DETAIL',
+            component: 'entity-check-page',
+            viewDetail,
+            taskType,
+            fieldConfigs: viewDetail ? {} : data.fieldConfigs || {}
+          })
+        })
+        .catch(() => {
+          this.$createPage({
+            metaId: entityId,
+            id: item['EXECUTION|BUSINESS_KEY'] || item.BUSINESS_KEY,
+            title: `${name ? name + '的' : ''}${item['DEF|NAME#']}${item['DEF|NAME#']}（${item['NAME#'] || item['TASK_NAME#']}）`,
+            pageType: 'DETAIL',
+            component: 'entity-check-page',
+            taskType,
+            viewDetail
+          })
+        })
+    },
+    changeValue (key, value) {
+      this.$set(this.search, key, value)
+    },
+    viewMore () {
+      const { morePageId } = this.$configs
+      this.$createPage({
+        entityId: this.$metaId,
+        pageId: morePageId
+      })
+    },
+    searchFn (v) {
+      const search = {}
+      v.forEach(item => {
+        search[item.field] = item.values
+      })
+      this.search = search
+    },
+    renderSearch () {
+      const { processId, taskType: queryTaskType } = this.$query
+      const { process = processId, taskType = queryTaskType } = this.$configs
+      const processScopeParams = [{ field: 'CLIENT', values: this.CLIENT }, { field: 'CATEGORY', values: '1' }]
+      if (this.SYSTEM && this.$route.name !== 'hall') {
+        processScopeParams.push({
+          field: 'SYSTEM',
+          values: this.SYSTEM
+        })
+      }
+      const statusOptions = [{
+        code: 'disagree',
+        name: '驳回'
+      }, { name: '已同意', code: 'end' }
+      ]
+
+      if (this.$configs.searchFlag === false) return null
+      if (this.$isMobile) {
+        const filterFields = [
+          {
+            attriLabel: '流程类型',
+            attriName: 'processId',
+            dataType: 'object',
+            codeKey: 'ACT_RE_MODEL',
+            scopeParams: processScopeParams
+          },
+          {
+            attriLabel: '申请人',
+            attriName: 'processStartUserId',
+            dataType: 'object',
+            codeKey: 'FM_USER'
+          },
+          {
+            attriLabel: '审批状态',
+            attriName: 'processInstStatus',
+            dataType: 'list',
+            codeKey: 'TASK_INST_STATUS',
+            options: taskType === 'finished' ? statusOptions : null
+          }
+        ]
+
+        if (taskType === 'apply') {
+          filterFields.splice(1, 1)
+        }
+        if (taskType === 'todo' || process) {
+          filterFields.pop()
+        }
+        return (
+          <epx-search-filter onSearch={this.searchFn} filterFields={filterFields}></epx-search-filter>
+        )
+      }
+      return (
+        <div class="task-search">
+          {
+            !process && (
+              <div class="task-search__item">
+                <label>流程类型：</label>
+                <epx-object
+                  class="object"
+                  value={this.search.processId}
+                  onChange={v => this.changeValue('processId', v)}
+                  fieldConfigs={{ state: 'SEARCH', attriLabel: '流程类型', codeKey: 'ACT_RE_MODEL', attribute: { objectWay: 'option' }, scopeParams: processScopeParams }}
+                />
+              </div>
+            )
+          }
+          {
+            taskType !== 'apply' && (
+              <div class="task-search__item">
+                <label>申请人：</label>
+                <epx-object
+                  class="object"
+                  value={this.search.processStartUserId}
+                  onChange={v => this.changeValue('processStartUserId', v)}
+                  fieldConfigs={{ state: 'SEARCH', attriLabel: '申请人', codeKey: 'FM_USER', scopeParams: [{ field: 'CLIENT', values: this.CLIENT }] }}
+                />
+              </div>
+            )
+          }
+          <div class="task-search__item">
+            <label>提交日期：</label>
+            <el-date-picker
+              size="medium"
+              vModel={this.search.date}
+              type="daterange"
+              range-separator="至"
+              start-placeholder=""
+              end-placeholder="">
+            </el-date-picker>
+          </div>
+          {
+            taskType !== 'todo' && (
+              <div class="task-search__item">
+                <label>审批状态：</label>
+                <epx-select
+                  class="object"
+                  value={this.search.processInstStatus}
+                  onChange={v => this.changeValue('processInstStatus', v)}
+                  fieldConfigs={{
+                    state: 'SEARCH',
+                    attriLabel: '审批状态',
+                    codeKey: 'TASK_INST_STATUS',
+                    options: taskType === 'finished' ? statusOptions : null
+                  }}
+                />
+              </div>
+            )
+          }
+        </div>
+      )
+    },
+    renderButtons () {},
+    renderTable () {
+      const { pageFlag } = this.$configs
+      return (
+        <div>
+          <ul class={{ 'task-list': true, 'm-task-list': this.$isMobile }}>
+            {this.data.length === 0 && !this.loading && <div class="null-data"><i class="epx-icon-color-kong"></i></div>}
+            {
+              this.data.map(item => (
+                <li class="task-item" onClick={this.goCheckPage.bind(this, {}, item)}>
+                  <div class="task-item__content">
+                    <span class="task-item__title">
+                      <span class="task-item__subtitle">
+                        <font class="task-item__name" title={this.getTitle(item)}>{this.getTitle(item)}</font>
+                        { !this.$isMobile && <font class="task-item__status">（{item['NAME#'] || item['TASK_NAME#']}）</font>}
+                        {item['INST_STATUS#'] && <el-tag class="task-item__tag" size="small" type={(item.INST_STATUS === 'end' || item.INST_STATUS === 'repeal') ? 'success' : item.INST_STATUS === 'progress' ? 'warning' : 'danger' }>{item['INST_STATUS#']}</el-tag>}
+                      </span>
+                    </span>
+                    {
+                      item.BUSINESS_FIELDS && item.BUSINESS_FIELDS.length > 0 && (
+                        <p class="task-item__desc">
+                          {
+                            item.BUSINESS_FIELDS.map(field => (
+                              <p>{field.name}： {field.converValue}</p>
+                            ))
+                          }
+                        </p>
+                      )
+                    }
+                  </div>
+                  <div class="task-item__extra" >
+                    <span class="task-item__date">{}{item.CREATE_TIME || item.START_TIME}</span>
+                  </div>
+                </li>
+              ))
+            }
+          </ul>
+          {/* 分页 */}
+          {
+            pageFlag && !this.$configs.limit && (
+              <div class="pagination">
+                <el-pagination
+                  v-loading={this.loading}
+                  currentPage={this.currentPage}
+                  pageSizes={[5, 10, 15, 20, 30, 50, 100, 200]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes"
+                  total={this.total}
+                  onSize-change={this.sizeChange}
+                  onCurrent-change={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+          { this.$configs.limit && this.total > 5 && this.$configs.showMoreBtn && <p class="view-more" onClick={this.viewMore.bind(this)}>查看更多 <i class="el-icon-arrow-down"></i></p> }
+        </div>
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px;
+.list-container {
+}
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.list-table {
+  background: #fff;
+  padding:0 12px;
+   // 无边框
+  &.no-border {
+     border: 0;
+    border-top: dashed 1px #e3e3e3;
+    &::after {
+      display: none
+    }
+    ::v-deep {
+      th.is-leaf, td {
+       border-right: 0
+      }
+    }
+  }
+}
+.is-label {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.list-operates {
+  background: #fff;
+  padding: $paddingSize 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;
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid #e3e3e3;
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.column-operate-btn {
+  font-size: 14px;
+}
+.pagination {
+  background: #fff;
+  padding: $paddingSize 0;
+  ::v-deep{
+    .el-select  {
+      margin-left: 24px;
+    }
+    .el-pagination__total {
+      float: right;
+    }
+  }
+}
+.task-list {
+  background: #fff;
+  padding: 0 20px;
+  min-height: 150px;
+}
+
+.task-item {
+  border-bottom: 1px solid #e3e3e3;
+  padding: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  &:hover {
+    @include bg_color_primary(.15)
+  }
+}
+
+.task-item__title {
+  font-size: 16px;
+  font-weight: 600;
+  overflow: hidden;
+  margin-right: 10px;
+}
+.task-item__subtitle {
+  display: flex;
+}
+.task-item__name {
+  color: #222;
+  // flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-item__status {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.task-item__tag {
+  margin-left: 6px;
+}
+
+.task-item__date {
+  font-size: 14px;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.task-item__extra {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.task-item__content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: #666;
+  line-height: 28px;
+  min-height: 60px;
+}
+.task-item__desc {
+  margin-top: 10px;
+}
+
+.m-task-list {
+  padding: 0;
+  .task-item  {
+    padding: 10px;
+  }
+  .task-item__extra {
+    display: none;
+  }
+  .task-item__date{
+    font-size: 12px;
+  }
+}
+
+.null-data {
+  &> i {
+    font-size: 100px;
+  }
+  text-align: center;
+}
+.task-search {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10px 0;
+  background: #fff;
+}
+.task-search__item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  &::v-deep {
+    .el-input__inner {
+      width: 200px;
+    }
+    .el-input__suffix-inner {
+      line-height: 36px;
+    }
+  }
+}
+.view-more {
+  background: #fff;
+  padding: 10px 0 10px;
+  text-align: center;
+  color: #666;
+  cursor: pointer;
+}
+</style>

package/src/frame/components/task-list/Visual.vue

@@ -0,0 +1,45 @@
+<script>
+import EntityList from '@/frame/views/visual/EntityList'
+export default {
+  name: 'epx-task-list-visual',
+  extends: EntityList,
+  data () {
+    return {
+      componentMetaId: 'V_ACT_TASK'
+    }
+  },
+  methods: {
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'taskType', label: '任务类型', type: 'select', options: [{ label: '全部', value: 'all' }, { label: '待审批', value: 'todo' }, { label: '已审批', value: 'finished' }, { label: '抄送我的', value: 'notify' }, { label: '我申请的', value: 'apply' }] },
+        // { key: 'detailFlag', label: '点击进入详情', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        // { key: 'checkPageId', label: '详情页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'searchFlag', label: '是否显示查询', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
+        // { key: 'searchFields', label: '查询字段', type: 'field' },
+        // { key: 'filterFields', label: '筛选字段', type: 'field' },
+        // { key: 'orderFields', label: '排序字段', type: 'order-field' },
+        { key: 'process', label: '流程', type: 'multiobject', object: 'ACT_RE_MODEL', scopeParams: [{ field: 'CLIENT', values: this.CLIENT }, { field: 'SYSTEM', values: this.SYSTEM }, { field: 'CATEGORY', values: '1' }] },
+        { key: 'limit', label: '数量限制', type: 'num' },
+        { key: 'showMoreBtn', label: '显示更多按钮', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
+        { key: 'morePageId', label: '更多页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'pageFlag', label: '是否分页', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'pageSize', label: '每页记录数', type: 'select', options: [{ label: '5', value: 5 }, { label: '10', value: 10 }, { label: '15', value: 15 }, { label: '20', value: 20 }, { label: '30', value: 30 }, { label: '50', value: 50 }, { label: '100', value: 100 }, { label: '200', value: 200 }] },
+        { key: 'operateFlag', label: '是否需要按钮', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'operates', label: '操作按钮', type: 'operates' },
+        { key: 'operateEllipsis', label: '按钮显示数量', type: 'num' },
+        { key: 'componentEvents', label: '组件事件', type: 'event' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'height', label: '高度' },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      this.configOptions = configOptions
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/frame/components/task-list/index.js

@@ -0,0 +1,3 @@
+import TaskList from './TaskList'
+
+export default TaskList

package/src/frame/components/task-list-page/TaskListPage.vue

@@ -0,0 +1,26 @@
+<script>
+import BasePageVue from '../../packages/base-page/BasePage.vue'
+export default {
+  name: 'epx-task-list-page',
+  extends: BasePageVue,
+  searchComponent: '',
+  items: [
+    {
+      title: '导航',
+      id: 'nav',
+      contentType: 'header'
+    },
+    {
+      title: '审批首页',
+      id: 'task-list',
+      contentType: 'task-list'
+    }
+
+  ],
+  itemConfigs: {}
+}
+</script>
+
+<style>
+
+</style>

package/src/frame/components/task-list-page/index.js

@@ -0,0 +1,8 @@
+import TaskListPage from './TaskListPage.vue'
+
+/* istanbul ignore next */
+TaskListPage.install = function install (Vue) {
+  Vue.component(TaskListPage.name, TaskListPage)
+}
+
+export default TaskListPage