eoss-ui 0.6.50 → 0.6.52

package/packages/flow-list/src/main.vue

@@ -1,1411 +1,1434 @@
-<template>
-  <div class="es-flow-list">
-    <div
-      class="es-flow-list-item"
-      v-for="(item, index) in content"
-      :key="index"
-      v-show="
-        (item.type == 'splitReading' &&
-          splitReadingData &&
-          splitReadingData.length > 0) ||
-        (item.type == 'preset' &&
-          presetData &&
-          presetData.length > 0 &&
-          currentUserHasPresetInfoAuth) ||
-        (item.type != 'splitReading' && item.type != 'preset')
-      "
-    >
-      <div class="es-flow-list-box">
-        <es-data-table
-          v-if="show"
-          :class="{ 'es-flow-group-data-table': item.type !== 'sign' }"
-          :display="display"
-          number
-          @cell-click="handleCellClick"
-          full
-          v-bind="item"
-          :data="returnData(item.type)"
-          @btn-click="handleBtnClick"
-        ></es-data-table>
-      </div>
-    </div>
-    <es-dialog
-      append-to-body
-      :close-on-click-modal="false"
-      title="查看附件"
-      :visible.sync="showFileList"
-      v-if="showFileList"
-    >
-      <FileList
-        :ownId="wfpendingid"
-        :code="flowTableInfo.adjunctCode"
-        :deleted="false"
-        :disabled="true"
-        @cancel="showFileList = false"
-      />
-    </es-dialog>
-    <es-dialog
-      append-to-body
-      :close-on-click-modal="false"
-      title="查看催办记录"
-      :visible.sync="showPress"
-      height="500px"
-      v-if="showPress"
-    >
-      <div style="height: 400px" v-loading="pressLoading">
-        <es-data-table
-          v-if="show"
-          :data="pressTableList"
-          :thead="pressThead"
-          @page-size-change="handleSizeChange"
-          @page-current-change="handleCurrentChange"
-          stripe
-          full
-          style="width: 100%"
-          @sort-change="sortChange"
-          :page="pageInfo"
-        />
-      </div>
-    </es-dialog>
-    <es-dialog
-      append-to-body
-      :close-on-click-modal="false"
-      title="删除"
-      :visible.sync="showDel"
-      height="auto"
-      class="del-flow"
-      v-if="showDel"
-    >
-      <es-form
-        v-loading="delLoading"
-        :model="formData"
-        :contents="formItemList"
-        @submit="handleFormSubmit"
-      >
-      </es-form>
-    </es-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  findCodeValues,
-  deletePresetInfo,
-  pendedhistoryListJson,
-  toPresetInfoListIndex,
-  pressListJson,
-  pendedhistoryListWithCircularReadJson,
-  deleteFlow,
-  circularReadWithdraw
-} from 'eoss-ui/src/config/api';
-import FileList from '../../flow/src/component/FileList.vue';
-import util from 'eoss-ui/src/utils/util';
-export default {
-  name: 'EsFlowList',
-  components: {
-    [FileList.name]: FileList
-  },
-  props: {
-    businessId: {
-      type: String,
-      default: ''
-    },
-    hide: {
-      type: String,
-      default: ''
-    },
-    params: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    toolbar: {
-      type: Array,
-      default: () => []
-    },
-    contents: {
-      type: Array,
-      default() {
-        return ['flow', 'splitReading', 'preset'];
-      }
-    },
-    theadWidth: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    type: {
-      type: String,
-      default: ''
-    },
-    display: Boolean
-  },
-  inheritAttrs: false,
-  data() {
-    return {
-      pressLoading: false,
-      pressTableList: [],
-      circularData: [],
-      hasCircularReadWithdrawAuthority: false,
-      currentPage: 1,
-      pageSize: 20,
-      currentUserHasPresetInfoAuth: false,
-      pressThead: [
-        {
-          title: '催办节点',
-          align: 'center',
-          sortable: true,
-          field: 'urge_item'
-        },
-        {
-          title: '催办人名称',
-          sortable: true,
-          align: 'center',
-          field: 'urge_man_name'
-        },
-        {
-          title: '催办时间',
-          sortable: true,
-          align: 'center',
-          field: 'urge_time'
-        },
-        {
-          title: '被催办人名称',
-          align: 'center',
-          sortable: true,
-          field: 'urged_man_name'
-        }
-      ],
-      wfpendingid: '',
-      showFileList: false,
-      flowData: [],
-      splitReadingData: [],
-      presetData: [],
-      signData: [],
-      loading: '', //加载中
-      preset_type: [], //预设类型
-      showPress: false, //查看催办记录弹窗
-      modify: false,
-      formData: { reason: '' },
-      formItemList: [
-        {
-          name: 'reason',
-          label: '删除原因',
-          type: 'textarea',
-          placeholder: '请输入删除原因',
-          rules: {
-            required: true,
-            message: '请输入删除原因',
-            trigger: 'blur'
-          },
-          value: '',
-          rows: 5
-        },
-        {
-          type: 'submit',
-          skin: 'lay-form-btns',
-          contents: [
-            {
-              type: 'primary',
-              plain: true,
-              text: '保存',
-              event: 'confirm'
-            }
-          ]
-        }
-      ],
-      delLoading: false,
-      showDel: false,
-      attachmentPaperClipCssStyle: '',
-      is_edit: [], //是否可编辑
-      flowTableInfo: {
-        adjunctCode: '',
-        hasAgent: '1' //是否展示代办人 1：展示 0：不展示
-      },
-      show: false,
-      taskReadName: '', //非流程列表名称
-      options: [
-        { label: '时间排序', value: '1' },
-        { label: '部门排序', value: '2' },
-        { label: '树形排序', value: '3' }
-      ],
-      isShort: 0, //是否隐藏筛选
-      viewType: '1', //排序方式
-      flowTableList: [], //流程列表
-      fyTableList: [], //分阅列表
-      showSuggest: 'all', //筛选显示数据
-      presetInfoListHiddenColumns: '', //隐藏表格展示数据
-      canDelete: false, //是否展示操作按钮
-      historyId: '',
-      sidx: '',
-      sord: '',
-      total: 0
-    };
-  },
-  computed: {
-    toolbars() {
-      return {
-        flow: [
-          {
-            type: 'text',
-            contents: '流程列表'
-          },
-          {
-            type: 'search',
-            contents: [
-              {
-                name: 'showSuggest',
-                type: 'radio',
-                changeSearch: true,
-                data: [
-                  {
-                    value: 'all',
-                    name: '显示全部',
-                    checked: true
-                  },
-                  { value: 'have', name: '显示已填意见' }
-                ],
-                events: {
-                  change: (key, value) => {
-                    this.handleChange(key, value);
-                  }
-                }
-              },
-              {
-                type: 'select',
-                placeholder: '请选择',
-                name: 'viewType',
-                width: '140px',
-                changeSearch: true,
-                events: {
-                  change: (key, value) => {
-                    this.handleChange(key, value);
-                  }
-                },
-                data: [
-                  {
-                    value: 1,
-                    selected: true,
-                    name: '时间排序'
-                  },
-                  {
-                    value: 2,
-                    name: '部门排序'
-                  },
-                  {
-                    value: 3,
-                    name: '树形排序'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        preset: [
-          {
-            type: 'text',
-            contents: '预设列表'
-          }
-        ],
-        sign: [
-          {
-            type: 'button',
-            contents: [
-              {
-                text: '生成处理签',
-                type: 'primary'
-              }
-            ]
-          }
-        ],
-        splitReading: [
-          {
-            type: 'text',
-            contents:
-              (this.taskReadName ? this.taskReadName : '非流程') + '列表'
-          }
-        ],
-        circular: [
-          {
-            type: 'text',
-            contents: '传阅列表'
-          }
-        ]
-      };
-    },
-    pageInfo() {
-      return {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        totalCount: this.total
-      };
-    },
-    theads() {
-      const _that = this;
-      return {
-        flow: [
-          {
-            label: '经办部门',
-            field: 'deptid',
-            align: 'center',
-            key: 'jbbm',
-            showOverflowTooltip: true,
-            width: this.theadWidth.deptid || 150
-          },
-          {
-            label: '步骤',
-            field: 'itemname',
-            align: 'center',
-            key: 'bz',
-            showOverflowTooltip: true,
-            width: this.theadWidth.itemname || 110
-          },
-          {
-            label: '办理人',
-            field: 'userName',
-            align: 'center',
-            key: 'blr',
-            showOverflowTooltip: true,
-            width: this.theadWidth.userName || 110
-          },
-          {
-            label: '办理人部门',
-            field: 'deptName',
-            align: 'center',
-            showOverflowTooltip: true,
-            key: 'blrbm',
-            width: this.theadWidth.deptName || 110
-          },
-          {
-            label: '状态',
-            field: 'pendstate',
-            key: 'zt',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: this.theadWidth.pendstate || 80,
-            render: (h, params) => {
-              return h('span', {
-                style: {
-                  color:
-                    params.row.pendstate == 0 || params.row.pendstate == 3
-                      ? 'red'
-                      : params.row.pendstate == 1
-                      ? 'green'
-                      : 'deepskyblue'
-                },
-                domProps: { innerHTML: params.row.querykeywords }
-              });
-            }
-          },
-          {
-            label: '办理意见',
-            field: 'doresult',
-            align: 'center',
-            width: this.theadWidth.doresult,
-            showOverflowTooltip: true,
-            key: 'blyj',
-            render: (h, params) => {
-              if (
-                params.row.doresult &&
-                (params.row.doresult.startsWith('http') ||
-                  params.row.doresult.startsWith('https'))
-              ) {
-                return h('img', {
-                  attrs: { src: params.row.doresult },
-                  style: { width: '100px', height: '100px' }
-                });
-              } else {
-                return h('span', {}, [
-                  params.row.doresult
-                    ? params.row.doresult + (params.row.handleInfo ? '&' : '')
-                    : '',
-                  h(
-                    'span',
-                    { style: { color: '#A5A5A5', marginLeft: '2px' } },
-                    params.row.handleInfo || ''
-                  )
-                ]);
-              }
-            }
-          },
-          {
-            label: '验签',
-            field: 'authTypeStr',
-            align: 'center',
-            key: 'yq',
-            showOverflowTooltip: true,
-            width: this.theadWidth.authTypeStr || 70,
-            render: (h, params) => {
-              return h(
-                'span',
-                { style: { color: 'deepskyblue' } },
-                params.row.authTypeStr
-              );
-            }
-          },
-          {
-            label: '附件',
-            key: 'fj',
-            field: 'hasAdjunct',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: this.theadWidth.hasAdjunct || 70,
-            render: (h, params) => {
-              if (params.row.hasAdjunct) {
-                return h('span', {
-                  style: _that.attachmentPaperClipCssStyle
-                    ? _that.attachmentPaperClipCssStyle
-                    : { color: 'red', fontSize: '20px' },
-                  class: 'iconfont es-icon-fujian'
-                });
-              } else {
-                return h('span', {}, '');
-              }
-            }
-          },
-          {
-            label: '时间',
-            field: 'doetime',
-            align: 'center',
-            key: 'sj',
-            showOverflowTooltip: true,
-            width: this.theadWidth.doetime || 150,
-            render: (h, params) => {
-              return h(
-                'span',
-                {},
-                params.row.doetime
-                  ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm')
-                  : ''
-              );
-            }
-          },
-          {
-            label: '代办人',
-            field: 'douserid',
-            align: 'center',
-            key: 'dbr',
-            showOverflowTooltip: true,
-            width: this.theadWidth.douserid || 80,
-            hide: _that.flowTableInfo.hasAgent != '1'
-          },
-          {
-            label: '催办',
-            field: 'pressTimes',
-            align: 'center',
-            key: 'cb',
-            showOverflowTooltip: true,
-            width: this.theadWidth.pressTimes || 150,
-            render: (h, params) => {
-              return h(
-                'span',
-                { style: 'color:deepskyblue;cursor: pointer;' },
-                params.row.pressTimes
-              );
-            }
-          },
-          {
-            title: '操作',
-            type: 'handle',
-            width: this.modify ? '130' : '100',
-            template: '',
-            events: [
-              {
-                text: '删除',
-                rules: (rows) => {
-                  return rows.canDelete;
-                }
-              }
-              // {
-              //   text: '修改',
-              //   rules: (rows) => {
-              //     return this.modify && rows.pendstate == 2;
-              //   }
-              // }
-            ]
-          }
-        ],
-        preset: this.thead,
-        splitReading: [
-          {
-            label: '经办部门',
-            field: 'deptid',
-            key: 'jbbm',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: this.theadWidth.deptid || 150
-          },
-          {
-            label: '步骤',
-            field: 'itemname',
-            align: 'center',
-            key: 'bz',
-            showOverflowTooltip: true,
-            width: this.theadWidth.itemname || 110
-          },
-          {
-            label: '办理人',
-            field: 'userName',
-            align: 'center',
-            key: 'blr',
-            showOverflowTooltip: true,
-            width: this.theadWidth.userName || 110
-          },
-          {
-            label: '状态',
-            field: 'pendstate',
-            align: 'center',
-            key: 'zt',
-            showOverflowTooltip: true,
-            width: this.theadWidth.pendstate || 80,
-            render: (h, params) => {
-              return h('span', {
-                style: {
-                  color:
-                    params.row.pendstate == 0 || params.row.pendstate == 3
-                      ? 'red'
-                      : params.row.pendstate == 1
-                      ? 'green'
-                      : 'deepskyblue'
-                },
-                domProps: { innerHTML: params.row.querykeywords }
-              });
-            }
-          },
-          {
-            label: '办理意见',
-            field: 'doresult',
-            align: 'center',
-            key: 'blyj',
-            width: this.theadWidth.doresult,
-            showOverflowTooltip: true,
-            render: (h, params) => {
-              if (
-                params.row.doresult &&
-                (params.row.doresult.startsWith('http') ||
-                  params.row.doresult.startsWith('https'))
-              ) {
-                return h('img', {
-                  attrs: { src: params.row.doresult },
-                  style: { width: '100px', height: '100px' }
-                });
-              } else {
-                return h('span', {}, [
-                  params.row.doresult
-                    ? params.row.doresult + (params.row.handleInfo ? '&' : '')
-                    : '',
-                  h(
-                    'span',
-                    { style: { color: '#A5A5A5', marginLeft: '2px' } },
-                    params.row.handleInfo || ''
-                  )
-                ]);
-              }
-            }
-          },
-          {
-            label: '验签',
-            field: 'authTypeStr',
-            align: 'center',
-            key: 'yq',
-            showOverflowTooltip: true,
-            width: this.theadWidth.authTypeStr || 70,
-            render: (h, params) => {
-              return h(
-                'span',
-                { style: { color: 'deepskyblue' } },
-                params.row.authTypeStr
-              );
-            }
-          },
-          {
-            label: '附件',
-            field: 'hasAdjunct',
-            align: 'center',
-            key: 'fj',
-            showOverflowTooltip: true,
-            width: this.theadWidth.hasAdjunct || 70,
-            render: (h, params) => {
-              if (params.row.hasAdjunct) {
-                return h('span', {
-                  style: _that.attachmentPaperClipCssStyle
-                    ? _that.attachmentPaperClipCssStyle
-                    : { color: 'red', fontSize: '20px' },
-                  class: 'iconfont es-icon-fujian'
-                });
-              } else {
-                return h('span', {}, '');
-              }
-            }
-          },
-          {
-            label: '时间',
-            field: 'doetime',
-            align: 'center',
-            key: 'sj',
-            showOverflowTooltip: true,
-            width: this.theadWidth.doetime || 150,
-            render: (h, params) => {
-              return h(
-                'span',
-                {},
-                params.row.doetime
-                  ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm')
-                  : ''
-              );
-            }
-          },
-          {
-            label: '代办人',
-            field: 'douserid',
-            align: 'center',
-            key: 'dbr',
-            showOverflowTooltip: true,
-            width: this.theadWidth.douserid || 80,
-            hide: _that.flowTableInfo.hasAgent != '1'
-          },
-          {
-            label: '催办',
-            field: 'pressTimes',
-            align: 'center',
-            key: 'cb',
-            showOverflowTooltip: true,
-            width: this.theadWidth.pressTimes || 150,
-            render: (h, params) => {
-              return h(
-                'span',
-                { style: 'color:deepskyblue;cursor: pointer;' },
-                params.row.pressTimes
-              );
-            }
-          },
-          {
-            title: '操作',
-            type: 'handle',
-            width: '100',
-            template: '',
-            events: [
-              {
-                text: '删除',
-                rules: (rows) => {
-                  return rows.canDelete;
-                }
-              }
-            ]
-          }
-        ],
-        circular: [
-          {
-            label: '发起人',
-            field: 'circularReadInitiatorName',
-            align: 'center',
-            key: 'fqr',
-            showOverflowTooltip: true,
-            width: this.theadWidth.circularReadInitiatorName || 150
-          },
-          {
-            label: '传阅部门',
-            field: 'circularReadOrgName',
-            align: 'center',
-            key: 'cybm',
-            showOverflowTooltip: true,
-            width: this.theadWidth.circularReadOrgName || 110
-          },
-          {
-            label: '传阅人',
-            field: 'userName',
-            align: 'center',
-            key: 'cyr',
-            showOverflowTooltip: true,
-            width: this.theadWidth.userName || 110
-          },
-          {
-            label: '步骤',
-            field: 'itemname',
-            align: 'center',
-            showOverflowTooltip: true,
-            key: 'bz',
-            width: this.theadWidth.itemname || 110
-          },
-          {
-            label: '状态',
-            field: 'pendstate',
-            key: 'zt',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: this.theadWidth.pendstate || 140,
-            render: (h, params) => {
-              return h('span', {
-                style: {
-                  color:
-                    params.row.pendstate == 0 || params.row.pendstate == 3
-                      ? 'red'
-                      : params.row.pendstate == 1
-                      ? 'green'
-                      : 'deepskyblue',
-                  cursor: this.hasCircularReadWithdrawAuthority?'pointer' :'unset'
-                },
-                domProps: {
-                  innerHTML:
-                    params.row.querykeywords +
-                    (this.hasCircularReadWithdrawAuthority
-                      ? `<span style="color:#7AB0D5">(撤回)</span>`
-                      : '')
-                }
-              });
-            }
-          },
-          {
-            label: '送达时间',
-            field: 'createtime',
-            align: 'center',
-            key: 'sdsj',
-            showOverflowTooltip: true,
-            width: this.theadWidth.createtime || 170
-          },
-          {
-            label: '办理时间',
-            field: 'doetime',
-            align: 'center',
-            key: 'blsj',
-            showOverflowTooltip: true,
-            width: this.theadWidth.doetime || 150
-          },
-
-          {
-            label: '附件',
-            key: 'fj',
-            field: 'hasAdjunct',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: this.theadWidth.hasAdjunct || 70,
-            render: (h, params) => {
-              if (params.row.hasAdjunct) {
-                return h('span', {
-                  style: _that.attachmentPaperClipCssStyle
-                    ? _that.attachmentPaperClipCssStyle
-                    : { color: 'red', fontSize: '20px' },
-                  class: 'iconfont es-icon-fujian'
-                });
-              } else {
-                return h('span', {}, '');
-              }
-            }
-          },
-          {
-            label: '提醒',
-            field: 'pressTimes',
-            align: 'center',
-            key: 'tx',
-            showOverflowTooltip: true,
-            width: this.theadWidth.pressTimes || 150,
-            render: (h, params) => {
-              return h(
-                'span',
-                { style: 'color:deepskyblue;cursor: pointer;' },
-                params.row.pressTimes
-              );
-            }
-          },
-          {
-            label: '阅结意见 & 说明',
-            field: 'doresult',
-            align: 'center',
-            width: this.theadWidth.doresult,
-            showOverflowTooltip: true,
-            key: 'blyj',
-            render: (h, params) => {
-              if (
-                params.row.doresult &&
-                (params.row.doresult.startsWith('http') ||
-                  params.row.doresult.startsWith('https'))
-              ) {
-                return h('img', {
-                  attrs: { src: params.row.doresult },
-                  style: { width: '100px', height: '100px' }
-                });
-              } else {
-                return h('span', {}, [
-                  params.row.doresult
-                    ? params.row.doresult + (params.row.handleInfo ? '&' : '')
-                    : '',
-                  h(
-                    'span',
-                    { style: { color: '#A5A5A5', marginLeft: '2px' } },
-                    params.row.handleInfo || ''
-                  )
-                ]);
-              }
-            }
-          }
-        ]
-      };
-    },
-    content() {
-      let newContents = JSON.parse(JSON.stringify(this.contents));
-      if (this.contents.indexOf('circular') != -1) {
-        newContents = newContents.filter((item) => item != 'splitReading');
-      }
-      let contents = newContents.map((item) => {
-        if (typeof item === 'string') {
-          return {
-            type: item,
-            toolbar: this.toolbars[item],
-            thead: this.theads[item],
-            showFormBtn: false
-          };
-        } else {
-          if (!Object.prototype.hasOwnProperty.call(item, 'toolbar')) {
-            let toolbars = this.toolbars[item.type];
-            return { ...item, toolbars };
-          }
-          if (!Object.prototype.hasOwnProperty.call(item, 'thead')) {
-            let thead = this.theads[item.type];
-            return { ...item, thead };
-          }
-          return item;
-        }
-      });
-      return contents;
-    },
-    newToolbar() {
-      if (this.toolbar && this.toolbar.length > 0) {
-        return this.toolbar;
-      } else {
-        return [];
-      }
-    },
-    thead() {
-      let table = [
-        {
-          title: '步骤',
-          align: 'center',
-          width: this.theadWidth.nodeName || '100',
-          field: 'nodeName'
-        },
-        {
-          title: '预设办理人',
-          width: this.theadWidth.presetUserName || '120',
-          align: 'center',
-          field: 'presetUserName'
-        },
-        {
-          title: '是否可编辑',
-          key: 'sfkbj',
-          align: 'center',
-          width: this.theadWidth.isEdit || '100',
-          render: (h, params) => {
-            return h('span', this.getCodeValue(params.row.isEdit, 'is_edit'));
-          },
-          field: 'isEdit'
-        },
-        {
-          key: 'zt',
-          title: '状态',
-          width: this.theadWidth.statusName || '80',
-          align: 'center',
-          field: 'statusName'
-        },
-        {
-          title: '预设类型',
-          key: 'yslx',
-          width: this.theadWidth.presetType || '120',
-          align: 'center',
-          render: (h, params) => {
-            return h(
-              'span',
-              this.getCodeValue(params.row.presetType, 'preset_type')
-            );
-          },
-          field: 'presetType'
-        },
-        {
-          title: '流程名称',
-          key: 'lcmc',
-          width: this.theadWidth.processDefName,
-          align: 'center',
-          field: 'processDefName'
-        },
-        {
-          title: '上一步骤',
-          key: 'sybz',
-          align: 'center',
-          width: this.theadWidth.lastNodeName,
-          field: 'lastNodeName'
-        },
-        {
-          title: '创建步骤',
-          key: 'cjbz',
-          align: 'center',
-          width: this.theadWidth.operationNodeName,
-          field: 'operationNodeName'
-        },
-        {
-          title: '创建人',
-          key: 'cjr',
-          width: this.theadWidth.creatorName || '120',
-          align: 'center',
-          field: 'creatorName'
-        },
-        {
-          title: '创建时间',
-          width: this.theadWidth.createTime || '150',
-          key: 'cjsj',
-          align: 'center',
-          render: (h, params) => {
-            return h(
-              'span',
-              util.formatDate(params.row.createTime, 'yyyy-MM-dd HH:mm')
-            );
-          },
-          field: 'createTime'
-        },
-        {
-          title: '操作区域',
-          type: 'handle',
-          align: 'center',
-          width: '120',
-          events: [
-            {
-              text: '置为失效'
-            }
-          ]
-        }
-      ];
-      if (
-        this.presetInfoListHiddenColumns != undefined &&
-        this.presetInfoListHiddenColumns != ''
-      ) {
-        table = table.filter(
-          (items) => this.presetInfoListHiddenColumns.indexOf(items.key) == -1
-        );
-      }
-      if (!this.canDelete) table.splice(table.length - 1, 1);
-      return table;
-    }
-  },
-  mounted() {
-    this.loading = util.loading(this.$loading, '加载中...');
-    if (this.contents.indexOf('circular') != -1) {
-      this.getCircularReadList();
-    }
-    this.getFlowList();
-    this.getSysInfo('preset_type');
-    this.getSysInfo('is_edit');
-    this.getListInfo();
-  },
-
-  methods: {
-    handledraw(pendedHistoryId) {
-      let params = {
-        url: circularReadWithdraw,
-        params: { pendedHistoryId }
-      };
-      this.$confirm('是否确定撤回当前传阅', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          this.loading = util.loading(this.$loading, '撤回中...');
-          util.ajax(params).then((res) => {
-            this.loading.close();
-            if (res.rCode == 0) {
-              this.$message({
-                message: '撤回成功',
-                type: 'success'
-              });
-              this.getCircularReadList();
-            }
-          });
-          // _that.subMit(res.results,type)
-        })
-        .catch(() => {});
-    },
-    getCircularReadList() {
-      let params = {
-        url: pendedhistoryListWithCircularReadJson,
-        params: { apprecordid: this.businessId }
-      };
-      util.ajax(params).then((res) => {
-        if (res.status == 'success' || res.rCode == 0) {
-          this.circularData = res.data.fyHistoryList;
-          this.hasCircularReadWithdrawAuthority =
-            res.data.hasCircularReadWithdrawAuthority;
-        }
-      });
-    },
-    returnData(type) {
-      switch (type) {
-        case 'preset':
-          return this.presetData;
-        case 'sign':
-          return this.signData;
-        case 'splitReading':
-          return this.splitReadingData;
-        case 'circular':
-          return this.circularData;
-        default:
-          return this.flowData;
-      }
-    },
-    handleCellClick(row, column) {
-      if (column.property == 'hasAdjunct' && row.hasAdjunct) {
-        this.showFile(row.wfpendingid);
-      } else if (column.property == 'pressTimes') {
-        this.goPress(row.id);
-      } else if (
-        column.property == 'pendstate' &&
-        this.hasCircularReadWithdrawAuthority
-      ) {
-        this.handledraw(row.id);
-      }
-    },
-    handleBtnClick(data) {
-      const { handle, row } = data;
-      if (handle.text == '删除') {
-        this.del(row.id);
-      }
-    },
-    /**
-     * handleFormSubmit
-     * @desc:删除节点点击事件
-     * @param {Object} formData 点击删除的form数据
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    handleFormSubmit(formData) {
-      this.delLoading = true;
-      let params = {
-        url: deleteFlow,
-        method: 'POST',
-        data: { id: this.historyId, reason: formData.reason }
-      };
-      util
-        .ajax(params)
-        .then((res) => {
-          const { status, message } = res;
-          this.delLoading = false;
-          if (status === 'success') {
-            this.$message.success('删除成功');
-            this.showDel = false;
-            this.handleChange();
-          } else {
-            this.$message.error(message || '系统错误，请联系管理员！');
-          }
-        })
-        .catch((err) => {
-          this.delLoading = false;
-          if (err.message && err.message !== 'canceled') {
-            this.$message.error(err.message);
-          }
-        });
-    },
-    /**
-     * del
-     * @desc:展示删除弹窗
-     * @param {String} id 当前点击数据id
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    del(id) {
-      this.historyId = id;
-      this.showDel = true;
-    },
-    /**
-     * handleCurrentChange
-     * @desc:监听页码变化
-     * @param {String} val 当前页
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getPressList();
-    },
-    /**
-     * handleSizeChange
-     * @desc:监听每页数据显示数量变化
-     * @param {String} val 每页展示数量
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.getPressList();
-    },
-    /**
-     * sortChange
-     * @desc:监听排序变化
-     * @param {Object} info 需要排序的字段及排序方式
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    sortChange(info) {
-      let { prop, order } = info;
-      this.sidx = prop;
-      this.sord = order.replace('ending', '');
-      this.getPressList();
-    },
-    /**
-     * getPressList
-     * @desc:催办列表数据
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    getPressList() {
-      const { historyId, pageSize, sidx, sord, currentPage } = this;
-      this.pressLoading = true;
-      let params = {
-        url: pressListJson,
-        params: { historyId },
-        method: 'POST',
-        data: { page: currentPage, rows: pageSize, sidx, sord, historyId }
-      };
-      util
-        .ajax(params)
-        .then((res) => {
-          this.pressTableList = res.data;
-          this.total = res.totalrecords;
-          this.pressLoading = false;
-        })
-        .catch((err) => {
-          this.pressLoading = false;
-          if (err.message && err.message !== 'canceled') {
-            this.$message.error(err.message);
-          }
-        });
-    },
-    /**
-     * goPress
-     * @desc:催办列表查看
-     * @param {String} id 催办列表id
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    goPress(id) {
-      this.historyId = id;
-      this.showPress = true;
-      this.getPressList();
-    },
-    /**
-     * showFile
-     * @desc:附件查看
-     * @param {String} ownId 附件id
-     * @author liufan
-     * @date 2022年11月29日
-     **/
-    showFile(ownId) {
-      this.wfpendingid = ownId;
-      this.showFileList = true;
-    },
-    /**
-     * handleChange
-     * @desc:切换排序方式
-     * @author liufan
-     * @date 2022年11月22日
-     **/
-    handleChange(key, value) {
-      if (value) {
-        this[key] = value;
-      }
-      // this.show = false;
-      this.loading = util.loading(this.$loading, '加载中...');
-      this.getFlowList();
-    },
-    /**
-     * getFlowList
-     * @desc:获取流程列表
-     * @author liufan
-     * @date 2022年11月22日
-     **/
-    getFlowList() {
-      let params = {
-        url: pendedhistoryListJson,
-        params: {
-          apprecordid: this.businessId,
-          pendingAttr: 0,
-          viewType: this.viewType,
-          showSuggest: this.showSuggest,
-          ...this.params
-        }
-      };
-      util
-        .ajax(params)
-        .then((res) => {
-          const {
-            status,
-            message,
-            data: {
-              adjunctCode,
-              wfHistoryList,
-              fyHistoryList,
-              hasAgent,
-              isShort,
-              modify,
-              taskReadName
-            }
-          } = res;
-          this.loading.close();
-          if (status == 'success') {
-            this.flowTableInfo.adjunctCode = adjunctCode;
-            this.flowTableInfo.hasAgent = hasAgent;
-            this.attachmentPaperClipCssStyle =
-              res.data.attachmentPaperClipCssStyle;
-            this.isShort = isShort;
-            this.taskReadName = taskReadName;
-            this.flowData = wfHistoryList;
-            this.flowData.map((x) => {
-              if (!x.deptid) {
-                x.deptid = x.deptName;
-              }
-            });
-            this.splitReadingData = fyHistoryList;
-            this.modify = modify;
-            this.show = true;
-          } else {
-            this.$message.error(message || '系统错误，请联系管理员！');
-          }
-        })
-        .catch((err) => {
-          this.loading.close();
-          if (err.message && err.message !== 'canceled') {
-            this.$message.error(err.message);
-          }
-          this.show = true;
-        });
-    },
-    /**
-     * handleClick
-     * @desc:表单点击事件
-     * @param {Object} val 当前点击行数据及按钮
-     * @author liufan
-     * @date 2022年11月10日
-     **/
-    handleClick(val) {
-      const {
-        handle: { text },
-        row: { id, status }
-      } = val;
-      if (text === '置为失效') {
-        if (status == 0) {
-          this.$confirm('您确定要置为失效吗?')
-            .then(() => {
-              this.loading = util.loading(this.$loading, '提交中...');
-              let param = {
-                url: deletePresetInfo,
-                headers: { Accept: 'application/json,text/plain' },
-                method: 'post',
-                params: { id }
-              };
-              util
-                .ajax(param)
-                .then((res) => {
-                  const { status, message } = res;
-                  this.loading.close();
-                  if (status === 'success') {
-                    this.$message.success('操作成功');
-                    this.getListInfo();
-                  } else {
-                    this.$message.error(message || '系统错误，请联系管理员！');
-                  }
-                })
-                .catch((err) => {
-                  this.loading.close();
-                  if (err.message && err.message !== 'canceled') {
-                    this.$message.error(err.message);
-                  }
-                });
-            })
-            .catch((e) => {
-              // on cancel
-            });
-        } else {
-          this.$message.warning('当前数据已为失效状态');
-        }
-      }
-    },
-    /**
-     * getCodeValue
-     * @desc:获取代码表过滤后的值
-     * @param {String} value 展示数据的代码值
-     * @param {String} type 代码表类型
-     * @author liufan
-     * @date 2022年11月10日
-     **/
-    getCodeValue(value, type) {
-      let val = this[type].filter((item) => item.cciValue == value);
-      return val[0].shortName;
-    },
-    /**
-     * getSysInfo
-     * @desc:获取代码表
-     * @param {String} code 编码code值
-     * @author liufan
-     * @date 2022年11月10日
-     **/
-    getSysInfo(code) {
-      let params = {
-        url: findCodeValues,
-        params: { ccCode: code }
-      };
-      util
-        .ajax(params)
-        .then((res) => {
-          const { status, message, data } = res;
-          if (status == 'success') {
-            this[code] = data;
-          } else {
-            this.$message.error(message || '系统错误，请联系管理员！');
-          }
-        })
-        .catch((e) => {});
-    },
-    /**
-     * getListInfo
-     * @desc:获取预设列表数据
-     * @author liufan
-     * @date 2022年11月10日
-     **/
-    getListInfo() {
-      let param = {
-        url: toPresetInfoListIndex,
-        params: { apprecordid: this.businessId }
-      };
-      util
-        .ajax(param)
-        .then((res) => {
-          const {
-            status,
-            message,
-            data: {
-              presetInfoList,
-              presetInfoListHiddenColumns,
-              canDelete,
-              currentUserHasPresetInfoAuth
-            }
-          } = res;
-          this.loading.close();
-          if (status == 'success') {
-            presetInfoList && (this.presetData = presetInfoList);
-            this.presetInfoListHiddenColumns = presetInfoListHiddenColumns;
-            this.currentUserHasPresetInfoAuth = currentUserHasPresetInfoAuth;
-            this.canDelete = canDelete;
-          } else {
-            this.$message.error(message || '系统错误，请联系管理员！');
-          }
-        })
-        .catch((err) => {
-          this.loading.close();
-          if (err.message && err.message !== 'canceled') {
-            this.$message.error(err.message);
-          }
-        });
-    }
-  }
-};
-</script>
-
-<style></style>
+<template>
+  <div class="es-flow-list">
+    <div
+      class="es-flow-list-item"
+      v-for="(item, index) in content"
+      :key="index"
+      v-show="
+        (item.type == 'splitReading' &&
+          splitReadingData &&
+          splitReadingData.length > 0) ||
+        (item.type == 'preset' &&
+          presetData &&
+          presetData.length > 0 &&
+          currentUserHasPresetInfoAuth) ||
+        (item.type != 'splitReading' && item.type != 'preset')
+      "
+    >
+      <div class="es-flow-list-box">
+        <es-data-table
+          v-if="show"
+          :class="{ 'es-flow-group-data-table': item.type !== 'sign' }"
+          :display="display"
+          number
+          @cell-click="handleCellClick"
+          full
+          v-bind="item"
+          :data="returnData(item.type)"
+          @btn-click="handleBtnClick"
+        ></es-data-table>
+      </div>
+    </div>
+    <es-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      title="查看附件"
+      :visible.sync="showFileList"
+      v-if="showFileList"
+    >
+      <FileList
+        :ownId="wfpendingid"
+        :code="flowTableInfo.adjunctCode"
+        :deleted="false"
+        :disabled="true"
+        @cancel="showFileList = false"
+      />
+    </es-dialog>
+    <es-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      title="查看催办记录"
+      :visible.sync="showPress"
+      height="500px"
+      v-if="showPress"
+    >
+      <div style="height: 400px" v-loading="pressLoading">
+        <es-data-table
+          v-if="show"
+          :data="pressTableList"
+          :thead="pressThead"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+          stripe
+          full
+          style="width: 100%"
+          @sort-change="sortChange"
+          :page="pageInfo"
+        />
+      </div>
+    </es-dialog>
+    <es-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      title="删除"
+      :visible.sync="showDel"
+      height="auto"
+      class="del-flow"
+      v-if="showDel"
+    >
+      <es-form
+        v-loading="delLoading"
+        :model="formData"
+        :contents="formItemList"
+        @submit="handleFormSubmit"
+      >
+      </es-form>
+    </es-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  findCodeValues,
+  deletePresetInfo,
+  pendedhistoryListJson,
+  toPresetInfoListIndex,
+  pressListJson,
+  pendedhistoryListWithCircularReadJson,
+  deleteFlow,
+  circularReadWithdraw
+} from 'eoss-ui/src/config/api';
+import FileList from '../../flow/src/component/FileList.vue';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsFlowList',
+  components: {
+    [FileList.name]: FileList
+  },
+  props: {
+    businessId: {
+      type: String,
+      default: ''
+    },
+    hide: {
+      type: String,
+      default: ''
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    toolbar: {
+      type: Array,
+      default: () => []
+    },
+    headFields: {
+      type: Array,
+      default: () => []
+    },
+    contents: {
+      type: Array,
+      default() {
+        return ['flow', 'splitReading', 'preset'];
+      }
+    },
+    theadWidth: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    display: Boolean
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      pressLoading: false,
+      pressTableList: [],
+      circularData: [],
+      hasCircularReadWithdrawAuthority: false,
+      currentPage: 1,
+      pageSize: 20,
+      currentUserHasPresetInfoAuth: false,
+      pressThead: [
+        {
+          title: '催办节点',
+          align: 'center',
+          sortable: true,
+          field: 'urge_item'
+        },
+        {
+          title: '催办人名称',
+          sortable: true,
+          align: 'center',
+          field: 'urge_man_name'
+        },
+        {
+          title: '催办时间',
+          sortable: true,
+          align: 'center',
+          field: 'urge_time'
+        },
+        {
+          title: '被催办人名称',
+          align: 'center',
+          sortable: true,
+          field: 'urged_man_name'
+        }
+      ],
+      wfpendingid: '',
+      showFileList: false,
+      flowData: [],
+      splitReadingData: [],
+      presetData: [],
+      signData: [],
+      loading: '', //加载中
+      preset_type: [], //预设类型
+      showPress: false, //查看催办记录弹窗
+      modify: false,
+      formData: { reason: '' },
+      formItemList: [
+        {
+          name: 'reason',
+          label: '删除原因',
+          type: 'textarea',
+          placeholder: '请输入删除原因',
+          rules: {
+            required: true,
+            message: '请输入删除原因',
+            trigger: 'blur'
+          },
+          value: '',
+          rows: 5
+        },
+        {
+          type: 'submit',
+          skin: 'lay-form-btns',
+          contents: [
+            {
+              type: 'primary',
+              plain: true,
+              text: '保存',
+              event: 'confirm'
+            }
+          ]
+        }
+      ],
+      delLoading: false,
+      showDel: false,
+      attachmentPaperClipCssStyle: '',
+      is_edit: [], //是否可编辑
+      flowTableInfo: {
+        adjunctCode: '',
+        hasAgent: '1' //是否展示代办人 1：展示 0：不展示
+      },
+      show: false,
+      taskReadName: '', //非流程列表名称
+      options: [
+        { label: '时间排序', value: '1' },
+        { label: '部门排序', value: '2' },
+        { label: '树形排序', value: '3' }
+      ],
+      isShort: 0, //是否隐藏筛选
+      viewType: '1', //排序方式
+      flowTableList: [], //流程列表
+      fyTableList: [], //分阅列表
+      showSuggest: 'all', //筛选显示数据
+      presetInfoListHiddenColumns: '', //隐藏表格展示数据
+      canDelete: false, //是否展示操作按钮
+      historyId: '',
+      sidx: '',
+      sord: '',
+      total: 0
+    };
+  },
+  computed: {
+    toolbars() {
+      return {
+        flow: [
+          {
+            type: 'text',
+            contents: '流程列表'
+          },
+          {
+            type: 'search',
+            contents: [
+              {
+                name: 'showSuggest',
+                type: 'radio',
+                changeSearch: true,
+                data: [
+                  {
+                    value: 'all',
+                    name: '显示全部',
+                    checked: true
+                  },
+                  { value: 'have', name: '显示已填意见' }
+                ],
+                events: {
+                  change: (key, value) => {
+                    this.handleChange(key, value);
+                  }
+                }
+              },
+              {
+                type: 'select',
+                placeholder: '请选择',
+                name: 'viewType',
+                width: '140px',
+                changeSearch: true,
+                events: {
+                  change: (key, value) => {
+                    this.handleChange(key, value);
+                  }
+                },
+                data: [
+                  {
+                    value: 1,
+                    selected: true,
+                    name: '时间排序'
+                  },
+                  {
+                    value: 2,
+                    name: '部门排序'
+                  },
+                  {
+                    value: 3,
+                    name: '树形排序'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        preset: [
+          {
+            type: 'text',
+            contents: '预设列表'
+          }
+        ],
+        sign: [
+          {
+            type: 'button',
+            contents: [
+              {
+                text: '生成处理签',
+                type: 'primary'
+              }
+            ]
+          }
+        ],
+        splitReading: [
+          {
+            type: 'text',
+            contents:
+              (this.taskReadName ? this.taskReadName : '非流程') + '列表'
+          }
+        ],
+        circular: [
+          {
+            type: 'text',
+            contents: '传阅列表'
+          }
+        ]
+      };
+    },
+    pageInfo() {
+      return {
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        totalCount: this.total
+      };
+    },
+    theads() {
+      const _that = this;
+      return {
+        flow: [
+          {
+            label: '经办部门',
+            field: 'deptid',
+            align: 'center',
+            key: 'jbbm',
+            showOverflowTooltip: true,
+            width: this.theadWidth.deptid || 150
+          },
+          {
+            label: '步骤',
+            field: 'itemname',
+            align: 'center',
+            key: 'bz',
+            showOverflowTooltip: true,
+            width: this.theadWidth.itemname || 110
+          },
+          {
+            label: '办理人',
+            field: 'userName',
+            align: 'center',
+            key: 'blr',
+            showOverflowTooltip: true,
+            width: this.theadWidth.userName || 110
+          },
+          {
+            label: '办理人部门',
+            field: 'deptName',
+            align: 'center',
+            showOverflowTooltip: true,
+            key: 'blrbm',
+            width: this.theadWidth.deptName || 110
+          },
+          {
+            label: '状态',
+            field: 'pendstate',
+            key: 'zt',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: this.theadWidth.pendstate || 80,
+            render: (h, params) => {
+              return h('span', {
+                style: {
+                  color:
+                    params.row.pendstate == 0 || params.row.pendstate == 3
+                      ? 'red'
+                      : params.row.pendstate == 1
+                      ? 'green'
+                      : 'deepskyblue'
+                },
+                domProps: { innerHTML: params.row.querykeywords }
+              });
+            }
+          },
+          {
+            label: '办理意见',
+            field: 'doresult',
+            align: 'center',
+            width: this.theadWidth.doresult,
+            showOverflowTooltip: true,
+            key: 'blyj',
+            render: (h, params) => {
+              if (
+                params.row.doresult &&
+                (params.row.doresult.startsWith('http') ||
+                  params.row.doresult.startsWith('https'))
+              ) {
+                return h('img', {
+                  attrs: { src: params.row.doresult },
+                  style: { width: '100px', height: '100px' }
+                });
+              } else {
+                return h('span', {}, [
+                  params.row.doresult
+                    ? params.row.doresult + (params.row.handleInfo ? '&' : '')
+                    : '',
+                  h(
+                    'span',
+                    { style: { color: '#A5A5A5', marginLeft: '2px' } },
+                    params.row.handleInfo || ''
+                  )
+                ]);
+              }
+            }
+          },
+          {
+            label: '验签',
+            field: 'authTypeStr',
+            align: 'center',
+            key: 'yq',
+            showOverflowTooltip: true,
+            width: this.theadWidth.authTypeStr || 70,
+            render: (h, params) => {
+              return h(
+                'span',
+                { style: { color: 'deepskyblue' } },
+                params.row.authTypeStr
+              );
+            }
+          },
+          {
+            label: '附件',
+            key: 'fj',
+            field: 'hasAdjunct',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: this.theadWidth.hasAdjunct || 70,
+            render: (h, params) => {
+              if (params.row.hasAdjunct) {
+                return h('span', {
+                  style: _that.attachmentPaperClipCssStyle
+                    ? _that.attachmentPaperClipCssStyle
+                    : { color: 'red', fontSize: '20px' },
+                  class: 'iconfont es-icon-fujian'
+                });
+              } else {
+                return h('span', {}, '');
+              }
+            }
+          },
+          {
+            label: '时间',
+            field: 'doetime',
+            align: 'center',
+            key: 'sj',
+            showOverflowTooltip: true,
+            width: this.theadWidth.doetime || 150,
+            render: (h, params) => {
+              return h(
+                'span',
+                {},
+                params.row.doetime
+                  ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm')
+                  : ''
+              );
+            }
+          },
+          {
+            label: '代办人',
+            field: 'douserid',
+            align: 'center',
+            key: 'dbr',
+            showOverflowTooltip: true,
+            width: this.theadWidth.douserid || 80,
+            hide: _that.flowTableInfo.hasAgent != '1'
+          },
+          {
+            label: '催办',
+            field: 'pressTimes',
+            align: 'center',
+            key: 'cb',
+            showOverflowTooltip: true,
+            width: this.theadWidth.pressTimes || 150,
+            render: (h, params) => {
+              return h(
+                'span',
+                { style: 'color:deepskyblue;cursor: pointer;' },
+                params.row.pressTimes
+              );
+            }
+          },
+          {
+            title: '操作',
+            type: 'handle',
+            width: this.modify ? '130' : '100',
+            template: '',
+            events: [
+              {
+                text: '删除',
+                rules: (rows) => {
+                  return rows.canDelete;
+                }
+              }
+              // {
+              //   text: '修改',
+              //   rules: (rows) => {
+              //     return this.modify && rows.pendstate == 2;
+              //   }
+              // }
+            ]
+          }
+        ],
+        preset: this.thead,
+        splitReading: [
+          {
+            label: '经办部门',
+            field: 'deptid',
+            key: 'jbbm',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: this.theadWidth.deptid || 150
+          },
+          {
+            label: '步骤',
+            field: 'itemname',
+            align: 'center',
+            key: 'bz',
+            showOverflowTooltip: true,
+            width: this.theadWidth.itemname || 110
+          },
+          {
+            label: '办理人',
+            field: 'userName',
+            align: 'center',
+            key: 'blr',
+            showOverflowTooltip: true,
+            width: this.theadWidth.userName || 110
+          },
+          {
+            label: '状态',
+            field: 'pendstate',
+            align: 'center',
+            key: 'zt',
+            showOverflowTooltip: true,
+            width: this.theadWidth.pendstate || 80,
+            render: (h, params) => {
+              return h('span', {
+                style: {
+                  color:
+                    params.row.pendstate == 0 || params.row.pendstate == 3
+                      ? 'red'
+                      : params.row.pendstate == 1
+                      ? 'green'
+                      : 'deepskyblue'
+                },
+                domProps: { innerHTML: params.row.querykeywords }
+              });
+            }
+          },
+          {
+            label: '办理意见',
+            field: 'doresult',
+            align: 'center',
+            key: 'blyj',
+            width: this.theadWidth.doresult,
+            showOverflowTooltip: true,
+            render: (h, params) => {
+              if (
+                params.row.doresult &&
+                (params.row.doresult.startsWith('http') ||
+                  params.row.doresult.startsWith('https'))
+              ) {
+                return h('img', {
+                  attrs: { src: params.row.doresult },
+                  style: { width: '100px', height: '100px' }
+                });
+              } else {
+                return h('span', {}, [
+                  params.row.doresult
+                    ? params.row.doresult + (params.row.handleInfo ? '&' : '')
+                    : '',
+                  h(
+                    'span',
+                    { style: { color: '#A5A5A5', marginLeft: '2px' } },
+                    params.row.handleInfo || ''
+                  )
+                ]);
+              }
+            }
+          },
+          {
+            label: '验签',
+            field: 'authTypeStr',
+            align: 'center',
+            key: 'yq',
+            showOverflowTooltip: true,
+            width: this.theadWidth.authTypeStr || 70,
+            render: (h, params) => {
+              return h(
+                'span',
+                { style: { color: 'deepskyblue' } },
+                params.row.authTypeStr
+              );
+            }
+          },
+          {
+            label: '附件',
+            field: 'hasAdjunct',
+            align: 'center',
+            key: 'fj',
+            showOverflowTooltip: true,
+            width: this.theadWidth.hasAdjunct || 70,
+            render: (h, params) => {
+              if (params.row.hasAdjunct) {
+                return h('span', {
+                  style: _that.attachmentPaperClipCssStyle
+                    ? _that.attachmentPaperClipCssStyle
+                    : { color: 'red', fontSize: '20px' },
+                  class: 'iconfont es-icon-fujian'
+                });
+              } else {
+                return h('span', {}, '');
+              }
+            }
+          },
+          {
+            label: '时间',
+            field: 'doetime',
+            align: 'center',
+            key: 'sj',
+            showOverflowTooltip: true,
+            width: this.theadWidth.doetime || 150,
+            render: (h, params) => {
+              return h(
+                'span',
+                {},
+                params.row.doetime
+                  ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm')
+                  : ''
+              );
+            }
+          },
+          {
+            label: '代办人',
+            field: 'douserid',
+            align: 'center',
+            key: 'dbr',
+            showOverflowTooltip: true,
+            width: this.theadWidth.douserid || 80,
+            hide: _that.flowTableInfo.hasAgent != '1'
+          },
+          {
+            label: '催办',
+            field: 'pressTimes',
+            align: 'center',
+            key: 'cb',
+            showOverflowTooltip: true,
+            width: this.theadWidth.pressTimes || 150,
+            render: (h, params) => {
+              return h(
+                'span',
+                { style: 'color:deepskyblue;cursor: pointer;' },
+                params.row.pressTimes
+              );
+            }
+          },
+          {
+            title: '操作',
+            type: 'handle',
+            width: '100',
+            template: '',
+            events: [
+              {
+                text: '删除',
+                rules: (rows) => {
+                  return rows.canDelete;
+                }
+              }
+            ]
+          }
+        ],
+        circular: [
+          {
+            label: '发起人',
+            field: 'circularReadInitiatorName',
+            align: 'center',
+            key: 'fqr',
+            showOverflowTooltip: true,
+            width: this.theadWidth.circularReadInitiatorName || 150
+          },
+          {
+            label: '传阅部门',
+            field: 'circularReadOrgName',
+            align: 'center',
+            key: 'cybm',
+            showOverflowTooltip: true,
+            width: this.theadWidth.circularReadOrgName || 110
+          },
+          {
+            label: '传阅人',
+            field: 'userName',
+            align: 'center',
+            key: 'cyr',
+            showOverflowTooltip: true,
+            width: this.theadWidth.userName || 110
+          },
+          {
+            label: '步骤',
+            field: 'itemname',
+            align: 'center',
+            showOverflowTooltip: true,
+            key: 'bz',
+            width: this.theadWidth.itemname || 110
+          },
+          {
+            label: '状态',
+            field: 'pendstate',
+            key: 'zt',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: this.theadWidth.pendstate || 140,
+            render: (h, params) => {
+              return h('span', {
+                style: {
+                  color:
+                    params.row.pendstate == 0 || params.row.pendstate == 3
+                      ? 'red'
+                      : params.row.pendstate == 1
+                      ? 'green'
+                      : 'deepskyblue',
+                  cursor: this.hasCircularReadWithdrawAuthority
+                    ? 'pointer'
+                    : 'unset'
+                },
+                domProps: {
+                  innerHTML:
+                    params.row.querykeywords +
+                    (this.hasCircularReadWithdrawAuthority
+                      ? `<span style="color:#7AB0D5">(撤回)</span>`
+                      : '')
+                }
+              });
+            }
+          },
+          {
+            label: '送达时间',
+            field: 'createtime',
+            align: 'center',
+            key: 'sdsj',
+            showOverflowTooltip: true,
+            width: this.theadWidth.createtime || 170
+          },
+          {
+            label: '办理时间',
+            field: 'doetime',
+            align: 'center',
+            key: 'blsj',
+            showOverflowTooltip: true,
+            width: this.theadWidth.doetime || 150
+          },
+
+          {
+            label: '附件',
+            key: 'fj',
+            field: 'hasAdjunct',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: this.theadWidth.hasAdjunct || 70,
+            render: (h, params) => {
+              if (params.row.hasAdjunct) {
+                return h('span', {
+                  style: _that.attachmentPaperClipCssStyle
+                    ? _that.attachmentPaperClipCssStyle
+                    : { color: 'red', fontSize: '20px' },
+                  class: 'iconfont es-icon-fujian'
+                });
+              } else {
+                return h('span', {}, '');
+              }
+            }
+          },
+          {
+            label: '提醒',
+            field: 'pressTimes',
+            align: 'center',
+            key: 'tx',
+            showOverflowTooltip: true,
+            width: this.theadWidth.pressTimes || 150,
+            render: (h, params) => {
+              return h(
+                'span',
+                { style: 'color:deepskyblue;cursor: pointer;' },
+                params.row.pressTimes
+              );
+            }
+          },
+          {
+            label: '阅结意见 & 说明',
+            field: 'doresult',
+            align: 'center',
+            width: this.theadWidth.doresult,
+            showOverflowTooltip: true,
+            key: 'blyj',
+            render: (h, params) => {
+              if (
+                params.row.doresult &&
+                (params.row.doresult.startsWith('http') ||
+                  params.row.doresult.startsWith('https'))
+              ) {
+                return h('img', {
+                  attrs: { src: params.row.doresult },
+                  style: { width: '100px', height: '100px' }
+                });
+              } else {
+                return h('span', {}, [
+                  params.row.doresult
+                    ? params.row.doresult + (params.row.handleInfo ? '&' : '')
+                    : '',
+                  h(
+                    'span',
+                    { style: { color: '#A5A5A5', marginLeft: '2px' } },
+                    params.row.handleInfo || ''
+                  )
+                ]);
+              }
+            }
+          }
+        ]
+      };
+    },
+    content() {
+      const _that = this;
+      let newContents = JSON.parse(JSON.stringify(this.contents));
+      if (this.contents.indexOf('circular') != -1) {
+        newContents = newContents.filter((item) => item != 'splitReading');
+      }
+      let contents = newContents.map((item) => {
+        if (typeof item === 'string') {
+          let data = [];
+          if (_that.headFields.length > 0) {
+            _that.headFields.map((headFiled) => {
+              _that.theads[item].map((theadItem) => {
+                if (theadItem.field === headFiled.field) {
+                  theadItem = headFiled;
+                  data.push(theadItem);
+                }
+              });
+            });
+            _that.theads[item].map(x => {
+              if(x.type == 'handle'){
+                data.push(x);
+              }
+            })
+          }
+          return {
+            type: item,
+            toolbar: this.toolbars[item],
+            thead: data.length > 0 ? data : this.theads[item],
+            showFormBtn: false
+          };
+        } else {
+          if (!Object.prototype.hasOwnProperty.call(item, 'toolbar')) {
+            let toolbars = this.toolbars[item.type];
+            return { ...item, toolbars };
+          }
+          if (!Object.prototype.hasOwnProperty.call(item, 'thead')) {
+            let thead = this.theads[item.type];
+            return { ...item, thead };
+          }
+          return item;
+        }
+      });
+      return contents;
+    },
+    newToolbar() {
+      if (this.toolbar && this.toolbar.length > 0) {
+        return this.toolbar;
+      } else {
+        return [];
+      }
+    },
+    thead() {
+      let table = [
+        {
+          title: '步骤',
+          align: 'center',
+          width: this.theadWidth.nodeName || '100',
+          field: 'nodeName'
+        },
+        {
+          title: '预设办理人',
+          width: this.theadWidth.presetUserName || '120',
+          align: 'center',
+          field: 'presetUserName'
+        },
+        {
+          title: '是否可编辑',
+          key: 'sfkbj',
+          align: 'center',
+          width: this.theadWidth.isEdit || '100',
+          render: (h, params) => {
+            return h('span', this.getCodeValue(params.row.isEdit, 'is_edit'));
+          },
+          field: 'isEdit'
+        },
+        {
+          key: 'zt',
+          title: '状态',
+          width: this.theadWidth.statusName || '80',
+          align: 'center',
+          field: 'statusName'
+        },
+        {
+          title: '预设类型',
+          key: 'yslx',
+          width: this.theadWidth.presetType || '120',
+          align: 'center',
+          render: (h, params) => {
+            return h(
+              'span',
+              this.getCodeValue(params.row.presetType, 'preset_type')
+            );
+          },
+          field: 'presetType'
+        },
+        {
+          title: '流程名称',
+          key: 'lcmc',
+          width: this.theadWidth.processDefName,
+          align: 'center',
+          field: 'processDefName'
+        },
+        {
+          title: '上一步骤',
+          key: 'sybz',
+          align: 'center',
+          width: this.theadWidth.lastNodeName,
+          field: 'lastNodeName'
+        },
+        {
+          title: '创建步骤',
+          key: 'cjbz',
+          align: 'center',
+          width: this.theadWidth.operationNodeName,
+          field: 'operationNodeName'
+        },
+        {
+          title: '创建人',
+          key: 'cjr',
+          width: this.theadWidth.creatorName || '120',
+          align: 'center',
+          field: 'creatorName'
+        },
+        {
+          title: '创建时间',
+          width: this.theadWidth.createTime || '150',
+          key: 'cjsj',
+          align: 'center',
+          render: (h, params) => {
+            return h(
+              'span',
+              util.formatDate(params.row.createTime, 'yyyy-MM-dd HH:mm')
+            );
+          },
+          field: 'createTime'
+        },
+        {
+          title: '操作区域',
+          type: 'handle',
+          align: 'center',
+          width: '120',
+          events: [
+            {
+              text: '置为失效'
+            }
+          ]
+        }
+      ];
+      if (
+        this.presetInfoListHiddenColumns != undefined &&
+        this.presetInfoListHiddenColumns != ''
+      ) {
+        table = table.filter(
+          (items) => this.presetInfoListHiddenColumns.indexOf(items.key) == -1
+        );
+      }
+      if (!this.canDelete) table.splice(table.length - 1, 1);
+      return table;
+    }
+  },
+  mounted() {
+    this.loading = util.loading(this.$loading, '加载中...');
+    if (this.contents.indexOf('circular') != -1) {
+      this.getCircularReadList();
+    }
+    this.getFlowList();
+    this.getSysInfo('preset_type');
+    this.getSysInfo('is_edit');
+    this.getListInfo();
+  },
+
+  methods: {
+    handledraw(pendedHistoryId) {
+      let params = {
+        url: circularReadWithdraw,
+        params: { pendedHistoryId }
+      };
+      this.$confirm('是否确定撤回当前传阅', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = util.loading(this.$loading, '撤回中...');
+          util.ajax(params).then((res) => {
+            this.loading.close();
+            if (res.rCode == 0) {
+              this.$message({
+                message: '撤回成功',
+                type: 'success'
+              });
+              this.getCircularReadList();
+            }
+          });
+          // _that.subMit(res.results,type)
+        })
+        .catch(() => {});
+    },
+    getCircularReadList() {
+      let params = {
+        url: pendedhistoryListWithCircularReadJson,
+        params: { apprecordid: this.businessId }
+      };
+      util.ajax(params).then((res) => {
+        if (res.status == 'success' || res.rCode == 0) {
+          this.circularData = res.data.fyHistoryList;
+          this.hasCircularReadWithdrawAuthority =
+            res.data.hasCircularReadWithdrawAuthority;
+        }
+      });
+    },
+    returnData(type) {
+      switch (type) {
+        case 'preset':
+          return this.presetData;
+        case 'sign':
+          return this.signData;
+        case 'splitReading':
+          return this.splitReadingData;
+        case 'circular':
+          return this.circularData;
+        default:
+          return this.flowData;
+      }
+    },
+    handleCellClick(row, column) {
+      if (column.property == 'hasAdjunct' && row.hasAdjunct) {
+        this.showFile(row.wfpendingid);
+      } else if (column.property == 'pressTimes') {
+        this.goPress(row.id);
+      } else if (
+        column.property == 'pendstate' &&
+        this.hasCircularReadWithdrawAuthority
+      ) {
+        this.handledraw(row.id);
+      }
+    },
+    handleBtnClick(data) {
+      const { handle, row } = data;
+      if (handle.text == '删除') {
+        this.del(row.id);
+      }
+    },
+    /**
+     * handleFormSubmit
+     * @desc:删除节点点击事件
+     * @param {Object} formData 点击删除的form数据
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    handleFormSubmit(formData) {
+      this.delLoading = true;
+      let params = {
+        url: deleteFlow,
+        method: 'POST',
+        data: { id: this.historyId, reason: formData.reason }
+      };
+      util
+        .ajax(params)
+        .then((res) => {
+          const { status, message } = res;
+          this.delLoading = false;
+          if (status === 'success') {
+            this.$message.success('删除成功');
+            this.showDel = false;
+            this.handleChange();
+          } else {
+            this.$message.error(message || '系统错误，请联系管理员！');
+          }
+        })
+        .catch((err) => {
+          this.delLoading = false;
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    /**
+     * del
+     * @desc:展示删除弹窗
+     * @param {String} id 当前点击数据id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    del(id) {
+      this.historyId = id;
+      this.showDel = true;
+    },
+    /**
+     * handleCurrentChange
+     * @desc:监听页码变化
+     * @param {String} val 当前页
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getPressList();
+    },
+    /**
+     * handleSizeChange
+     * @desc:监听每页数据显示数量变化
+     * @param {String} val 每页展示数量
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getPressList();
+    },
+    /**
+     * sortChange
+     * @desc:监听排序变化
+     * @param {Object} info 需要排序的字段及排序方式
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    sortChange(info) {
+      let { prop, order } = info;
+      this.sidx = prop;
+      this.sord = order.replace('ending', '');
+      this.getPressList();
+    },
+    /**
+     * getPressList
+     * @desc:催办列表数据
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    getPressList() {
+      const { historyId, pageSize, sidx, sord, currentPage } = this;
+      this.pressLoading = true;
+      let params = {
+        url: pressListJson,
+        params: { historyId },
+        method: 'POST',
+        data: { page: currentPage, rows: pageSize, sidx, sord, historyId }
+      };
+      util
+        .ajax(params)
+        .then((res) => {
+          this.pressTableList = res.data;
+          this.total = res.totalrecords;
+          this.pressLoading = false;
+        })
+        .catch((err) => {
+          this.pressLoading = false;
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    /**
+     * goPress
+     * @desc:催办列表查看
+     * @param {String} id 催办列表id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    goPress(id) {
+      this.historyId = id;
+      this.showPress = true;
+      this.getPressList();
+    },
+    /**
+     * showFile
+     * @desc:附件查看
+     * @param {String} ownId 附件id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    showFile(ownId) {
+      this.wfpendingid = ownId;
+      this.showFileList = true;
+    },
+    /**
+     * handleChange
+     * @desc:切换排序方式
+     * @author liufan
+     * @date 2022年11月22日
+     **/
+    handleChange(key, value) {
+      if (value) {
+        this[key] = value;
+      }
+      // this.show = false;
+      this.loading = util.loading(this.$loading, '加载中...');
+      this.getFlowList();
+    },
+    /**
+     * getFlowList
+     * @desc:获取流程列表
+     * @author liufan
+     * @date 2022年11月22日
+     **/
+    getFlowList() {
+      let params = {
+        url: pendedhistoryListJson,
+        params: {
+          apprecordid: this.businessId,
+          pendingAttr: 0,
+          viewType: this.viewType,
+          showSuggest: this.showSuggest,
+          ...this.params
+        }
+      };
+      util
+        .ajax(params)
+        .then((res) => {
+          const {
+            status,
+            message,
+            data: {
+              adjunctCode,
+              wfHistoryList,
+              fyHistoryList,
+              hasAgent,
+              isShort,
+              modify,
+              taskReadName
+            }
+          } = res;
+          this.loading.close();
+          if (status == 'success') {
+            this.flowTableInfo.adjunctCode = adjunctCode;
+            this.flowTableInfo.hasAgent = hasAgent;
+            this.attachmentPaperClipCssStyle =
+              res.data.attachmentPaperClipCssStyle;
+            this.isShort = isShort;
+            this.taskReadName = taskReadName;
+            this.flowData = wfHistoryList;
+            this.flowData.map((x) => {
+              if (!x.deptid) {
+                x.deptid = x.deptName;
+              }
+            });
+            this.splitReadingData = fyHistoryList;
+            this.modify = modify;
+            this.show = true;
+          } else {
+            this.$message.error(message || '系统错误，请联系管理员！');
+          }
+        })
+        .catch((err) => {
+          this.loading.close();
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+          this.show = true;
+        });
+    },
+    /**
+     * handleClick
+     * @desc:表单点击事件
+     * @param {Object} val 当前点击行数据及按钮
+     * @author liufan
+     * @date 2022年11月10日
+     **/
+    handleClick(val) {
+      const {
+        handle: { text },
+        row: { id, status }
+      } = val;
+      if (text === '置为失效') {
+        if (status == 0) {
+          this.$confirm('您确定要置为失效吗?')
+            .then(() => {
+              this.loading = util.loading(this.$loading, '提交中...');
+              let param = {
+                url: deletePresetInfo,
+                headers: { Accept: 'application/json,text/plain' },
+                method: 'post',
+                params: { id }
+              };
+              util
+                .ajax(param)
+                .then((res) => {
+                  const { status, message } = res;
+                  this.loading.close();
+                  if (status === 'success') {
+                    this.$message.success('操作成功');
+                    this.getListInfo();
+                  } else {
+                    this.$message.error(message || '系统错误，请联系管理员！');
+                  }
+                })
+                .catch((err) => {
+                  this.loading.close();
+                  if (err.message && err.message !== 'canceled') {
+                    this.$message.error(err.message);
+                  }
+                });
+            })
+            .catch((e) => {
+              // on cancel
+            });
+        } else {
+          this.$message.warning('当前数据已为失效状态');
+        }
+      }
+    },
+    /**
+     * getCodeValue
+     * @desc:获取代码表过滤后的值
+     * @param {String} value 展示数据的代码值
+     * @param {String} type 代码表类型
+     * @author liufan
+     * @date 2022年11月10日
+     **/
+    getCodeValue(value, type) {
+      let val = this[type].filter((item) => item.cciValue == value);
+      return val[0].shortName;
+    },
+    /**
+     * getSysInfo
+     * @desc:获取代码表
+     * @param {String} code 编码code值
+     * @author liufan
+     * @date 2022年11月10日
+     **/
+    getSysInfo(code) {
+      let params = {
+        url: findCodeValues,
+        params: { ccCode: code }
+      };
+      util
+        .ajax(params)
+        .then((res) => {
+          const { status, message, data } = res;
+          if (status == 'success') {
+            this[code] = data;
+          } else {
+            this.$message.error(message || '系统错误，请联系管理员！');
+          }
+        })
+        .catch((e) => {});
+    },
+    /**
+     * getListInfo
+     * @desc:获取预设列表数据
+     * @author liufan
+     * @date 2022年11月10日
+     **/
+    getListInfo() {
+      let param = {
+        url: toPresetInfoListIndex,
+        params: { apprecordid: this.businessId }
+      };
+      util
+        .ajax(param)
+        .then((res) => {
+          const {
+            status,
+            message,
+            data: {
+              presetInfoList,
+              presetInfoListHiddenColumns,
+              canDelete,
+              currentUserHasPresetInfoAuth
+            }
+          } = res;
+          this.loading.close();
+          if (status == 'success') {
+            presetInfoList && (this.presetData = presetInfoList);
+            this.presetInfoListHiddenColumns = presetInfoListHiddenColumns;
+            this.currentUserHasPresetInfoAuth = currentUserHasPresetInfoAuth;
+            this.canDelete = canDelete;
+          } else {
+            this.$message.error(message || '系统错误，请联系管理员！');
+          }
+        })
+        .catch((err) => {
+          this.loading.close();
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style></style>