wans

src/components/Jsplumb/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="main">
+    <div class="scale">
+      <a-space>
+        <a-button shape="circle" icon="minus" @click="minus" />
+        {{ scale }}%
+        <a-button shape="circle" icon="plus" @click="plus" />
+      </a-space>
+    </div>
+    <div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
+      <slot name="default">
+
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+// import jsPlumb from 'jsplumb'
+import Node from './modules/Node.vue'
+import { newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
+export default {
+  components: {
+    Node,
+    BaseForm,
+  },
+  props: {
+    details: {
+      type: Array,
+      default: () => [
+        // {
+        //   name: '发起人',
+        //   id: '1',
+        //   type: 1,
+        //   y: 100,
+        //   x: 500,
+        //   children: [],
+        // },
+      ],
+    },
+  },
+  data() {
+    return {
+      jsPlumb: null,
+      instance: null,
+      scale: 100,
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  created() {},
+  methods: {
+    init() {
+      const that = this
+      // 初始化节点
+      this.instance = newInstance({
+        container: this.$refs.container,
+        dragOptions: {
+          containmentPadding: 10,
+          grid: { w: 20, h: 20 },
+        },
+      })
+      this.instance.importDefaults({
+        anchor: 'Continuous',
+        connectionsDetachable: false,
+        // 连接器类型，这里设置为Flowchart
+        connector: {
+          type: 'Flowchart',
+        },
+        paintStyle: { stroke: '#666', strokeWidth: 1 },
+        hoverPaintStyle: { stroke: '#1890ff', strokeWidth: 2 },
+        connectionOverlays: [
+          {
+            type: 'Arrow',
+            options: {
+              width: 13,
+              length: 13,
+              location: 1,
+            },
+          },
+          // {
+          //   type: 'Custom',
+          //   options: {
+          //     create: (component) => {
+          //       const d = document.createElement('button')
+          //       d.innerHTML = '+'
+          //       d.className = 'plus_btn'
+          //       console.log(d)
+          //       return d
+          //     },
+          //     location: [5, 0],
+          //     events: {
+          //       tap: (e, o) => {
+          //         console.log('tap', e, o)
+          //       }
+          //     }
+          //   }
+          // }
+        ],
+        // 添加两个标签和箭头
+      })
+      this.instance.addSourceSelector('.bottom')
+      this.instance.addTargetSelector('.top')
+      this.details.forEach((item) => {
+        if (item.children.length) {
+          item.children.forEach((children) => {
+            that.instance.connect({
+              // 获取节点1和节点2的引用
+              source: this.$refs[item.id][0].$el,
+              target: this.$refs[children][0].$el,
+              // 连接方式，这里设置为连续
+              // paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
+              anchor: 'AutoDefault',
+              // 连接器类型，这里设置为Flowchart
+              connector: 'Flowchart',
+              // 添加两个标签和箭头
+            })
+          })
+        } else {
+          // instance.addEndpoint(this.$refs[item.name][0].$el, { target: false, source: false })
+        }
+      })
+      // this.$refs.node.forEach((item) => {
+      //   console.log(item)
+      // })
+
+      // 连接三个端点
+      // instance.connect({
+      //   // 获取节点1和节点2的引用
+      //   source: this.$refs.node1,
+      //   target: this.$refs.node2,
+      //   // 连接方式，这里设置为连续
+      //   anchor: 'AutoDefault',
+      //   // 连接器类型，这里设置为Flowchart
+      //   connector: 'Flowchart',
+      //   // 添加两个标签和箭头
+      //   overlays: [
+      //     { type: 'Label', options: { label: 'Connection 1', location: 0.5 } },
+      //     { type: 'Arrow', options: { location: 1 } },
+      //   ],
+      // })
+      // instance.connect({
+      //   source: this.$refs.node2,
+      //   target: this.$refs.node3,
+      //   connector: 'Flowchart',
+      //   anchor: 'AutoDefault',
+      //   overlays: [
+      //     { type: 'Label', options: { label: 'Connection 2', location: 0.5 } },
+      //     { type: 'Arrow', options: { location: 1 } },
+      //   ],
+      // })
+      //拖拽
+      this.instance.bind(EVENT_DRAG_STOP, (val) => {
+        console.log(val.el.__vue__)
+        console.log(3)
+        val.el.__vue__.setPosition(val.elements[0].pos)
+      })
+      // 建立链接
+      this.instance.bind(EVENT_CONNECTION, (val) => {
+        console.log(val)
+        console.log(2)
+      })
+      // 删除连接
+      this.instance.bind(EVENT_CONNECTION_DBL_CLICK, (conn) => {
+        this.$confirm({
+          title: '确定删除所点击的链接吗？',
+          onOk() {
+            that.instance.deleteConnection(conn)
+          },
+        })
+      })
+      this.$forceUpdate()
+    },
+    minus() {
+      if (this.scale > 50) {
+        this.scale -= 10
+      }
+      this.instance.setZoom(this.scale / 100)
+    },
+    plus() {
+      if (this.scale < 150) {
+        this.scale += 10
+      }
+      this.instance.setZoom(this.scale / 100)
+    },
+    add(record, type) {
+      const newVal = {
+        name: type === 2 ? '条件分支' : '审核人',
+        id: +new Date(),
+      }
+      if (record.children.length > 0) {
+        const children = this.details
+          .filter((detail) => {
+            return record.children.includes(detail.id)
+          })
+          .reduce((pre, item) => {
+            if (item.x > pre.x) {
+              pre = item
+            }
+            return pre
+          })
+        record.children.push(newVal.id)
+        this.details.push({
+          x: children.x + 240,
+          y: children.y,
+          type,
+          children: [],
+          ...newVal,
+        })
+      } else {
+        record.children.push(newVal.id)
+        this.details.push({
+          x: record.x,
+          y: record.y + 250,
+          type,
+          children: [],
+          ...newVal,
+        })
+      }
+      this.$nextTick(() => {
+        this.instance.connect({
+          // 获取节点1和节点2的引用
+          source: this.$refs[record.id][0].$el,
+          target: this.$refs[newVal.id][0].$el,
+          // 连接方式，这里设置为连续
+          // paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
+          anchor: 'AutoDefault',
+          // 连接器类型，这里设置为Flowchart
+          connector: 'Flowchart',
+          // 添加两个标签和箭头
+        })
+      })
+      // this.details.push()
+    },
+    //删除节点
+
+    handleDelete(record) {
+      this.instance.unmanage(this.$refs[record.id][0].$el, true)
+      this.details = this.details.filter((item) => {
+        return item.id !== record.id
+      })
+    },
+    edit(record) {
+      this.$refs.baseModal.base(record)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+  // transform: scale(0.5);
+}
+.title {
+  width: 100%;
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  h3 {
+    padding: 0;
+    margin: 0;
+  }
+}
+/deep/ .plus_btn {
+  padding: 0;
+  margin: 0;
+  background: #1890ff !important;
+  color: #fff !important;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border: #1890ff 1px solid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+}
+/deep/.jtk-overlay {
+  color: #1890ff;
+  font-size: 18px;
+  z-index: 9;
+}
+.main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 100px);
+  width: 100%;
+}
+.scale {
+  position: absolute;
+  bottom: 20px;
+  right: 30px;
+  z-index: 9999;
+}
+</style>

src/views/test/Test1.vue

@@ -1,16 +1,28 @@
 <template>
-  <div class="main">
-    <div class="scale">
+  <div>
+    <div class="title">
+      <h3>编辑</h3>
       <a-space>
-        <a-button shape="circle" icon="minus" @click="minus" />
-        {{ scale }}%
-        <a-button shape="circle" icon="plus" @click="plus" />
+        <div>
+          流程名称：<a-input style="width:200px" v-model="name" />
+        </div>
+        <a-button type="primary" @click="save">保存</a-button>
+        <a-button>返回</a-button>
       </a-space>
     </div>
-    <div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
-      <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.id" @add="add" @edit="edit" @delete="handleDelete" />
+    <div class="main">
+      <div class="scale">
+        <a-space>
+          <a-button shape="circle" icon="minus" @click="minus" />
+          {{ scale }}%
+          <a-button shape="circle" icon="plus" @click="plus" />
+        </a-space>
+      </div>
+      <div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
+        <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.id" @add="add" @edit="edit" @delete="handleDelete" />
+      </div>
+      <BaseForm ref="baseModal" />
     </div>
-    <BaseForm ref="baseModal" />
   </div>
 </template>
 
@@ -29,6 +41,7 @@ export default {
       jsPlumb: null,
       instance: null,
       scale: 100,
+      name: '',
       details: [
         {
           name: '发起人',
@@ -245,7 +258,6 @@ export default {
       // this.details.push()
     },
     //删除节点
-
     handleDelete(record) {
       this.instance.unmanage(this.$refs[record.id][0].$el, true)
       this.details = this.details.filter((item) => {
@@ -255,6 +267,7 @@ export default {
     edit(record) {
       this.$refs.baseModal.base(record)
     },
+    save() {},
   },
 }
 </script>
@@ -268,6 +281,19 @@ export default {
   transform-origin: 0 0;
   // transform: scale(0.5);
 }
+.title {
+  width: 100%;
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  h3 {
+    padding: 0;
+    margin: 0;
+  }
+}
 /deep/ .plus_btn {
   padding: 0;
   margin: 0;

src/views/test/modules/BaseForm.vue

@@ -1,8 +1,18 @@
 <template>
   <a-drawer title="编辑" placement="right" :closable="false" :visible="visible" @close="onClose">
-    <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-      <a-form-item label="名称">
-        <a-input v-decorator="['name']" />
+    <a-form :form="form">
+      <a-form-item label="节点名称">
+        <a-input v-decorator="['name', {rules: [{required: true, message: '节点名称不能为空'}]}]" />
+      </a-form-item>
+      <a-form-item label="所属部门">
+        <a-tree-select v-decorator="['deptId', {rules: [{required: true, message: '审核人不能为空'}]}]" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :replaceFields="replaceFields" :tree-data="treeData" placeholder="请选择" tree-default-expand-all>
+        </a-tree-select>
+      </a-form-item>
+      <a-form-item label="审核人">
+        <a-select v-decorator="['verifier', {rules: [{required: true, message: '审核人不能为空'}]}]" placeholder="请选择">
+          <a-select-option v-for="{realName, userId} in verifierList" :key="userId" :label="realName" :value="userId">{{ realName }}
+          </a-select-option>
+        </a-select>
       </a-form-item>
       <!-- <a-form-item label="描述">
         <a-input v-decorator="['seatNumber']" />
@@ -17,7 +27,7 @@
 
 <script>
 import pick from 'lodash.pick'
-
+import { getDeptTree } from '@/api/upms/dept'
 export default {
   data() {
     return {
@@ -25,8 +35,18 @@ export default {
       confirmLoading: false,
       form: this.$form.createForm(this),
       record: {},
+      replaceFields: {
+        key: 'id',
+      },
+      verifierList: [],
+      treeData: [],
     }
   },
+  created() {
+    getDeptTree().then((res) => {
+      this.treeData = res.data
+    })
+  },
   methods: {
     base(record) {
       this.visible = true

src/views/test/modules/Node.vue

@@ -178,5 +178,9 @@ export default {
 .audit {
   background: #e99e09;
   border: #e99e09 solid 1px;
+  &:hover {
+    background: #f7b737;
+    border: #f7b737 solid 1px;
+  }
 }
 </style>

src/views/workflow/workflow/Workflow.vue

@@ -1,256 +1,250 @@
 <template>
-    <a-card :bordered="false">
-        <div v-show="visible">
-            <div class="table-page-search-wrapper"  @keyup.enter="handleEnter">
-                <a-form layout="inline">
-                    <a-row :gutter="48" v-show="advanced">
-                        <a-col :md="6" :sm="24">
-                            <a-form-item label="关键字">
-                                <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称"/>
-                            </a-form-item>
-                        </a-col>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </a-row>
-                    <a-row :gutter="48">
-                        <a-col :md="24 || 24" :sm="24" style="text-align: right">
-                            <span class="table-page-search-submitButtons">
-                              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-                              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
-                              <a @click="()=>{ this.advanced = !this.advanced}" style="margin-left: 8px">
-                                  {{ advanced ? '收起' : '展开' }}
-                                  <a-icon :type="advanced ? 'up' : 'down'"/>
-                              </a>
-                            </span>
-                        </a-col>
-                    </a-row>
-                </a-form>
-            </div>
+  <a-card :bordered="false">
+    <div v-show="visible">
+      <div class="table-page-search-wrapper" @keyup.enter="handleEnter">
+        <a-form layout="inline">
+          <a-row :gutter="48" v-show="advanced">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="关键字">
+                <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="48">
+            <a-col :md="24 || 24" :sm="24" style="text-align: right">
+              <span class="table-page-search-submitButtons">
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+                <a @click="()=>{ this.advanced = !this.advanced}" style="margin-left: 8px">
+                  {{ advanced ? '收起' : '展开' }}
+                  <a-icon :type="advanced ? 'up' : 'down'" />
+                </a>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
 
-            <div class="table-operator" style="margin-bottom: 8px;">
-                <a-row>
-                    <a-col :md="16">
-                        <a-button v-if="$auth('workflow-workflow-add')" type="primary" icon="plus" @click="handleAdd()">新增</a-button>
-                        <a-button style="margin-left: 8px" v-if="$auth('workflow-workflow-export')" type="primary" icon="download" @click="doExport">导出</a-button>
-                        <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 && $auth('workflow-workflow-del')">
-                            <a-menu slot="overlay">
-                                <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
-                                    <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
-                                </a-popconfirm>
-                            </a-menu>
-                            <a-button style="margin-left: 8px">
-                                批量操作 <a-icon type="down" />
-                            </a-button>
-                        </a-dropdown>
-                    </a-col>
-                </a-row>
-            </div>
+      <div class="table-operator" style="margin-bottom: 8px;">
+        <a-row>
+          <a-col :md="16">
+            <a-button v-if="$auth('workflow-workflow-add')" type="primary" icon="plus" @click="handleAdd()">新增</a-button>
+            <a-button style="margin-left: 8px" v-if="$auth('workflow-workflow-export')" type="primary" icon="download" @click="doExport">导出</a-button>
+            <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 && $auth('workflow-workflow-del')">
+              <a-menu slot="overlay">
+                <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
+                  <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
+                </a-popconfirm>
+              </a-menu>
+              <a-button style="margin-left: 8px">
+                批量操作 <a-icon type="down" />
+              </a-button>
+            </a-dropdown>
+          </a-col>
+        </a-row>
+      </div>
 
-            <s-table
-                    ref="table"
-                    size="default"
-                    rowKey="id"
-                    :columns="columns"
-                    :data="loadData"
-                    :alert="options.alert"
-                    :rowSelection="options.rowSelection"
-                    showPagination="auto"
-            >
-                <span slot="action" slot-scope="record">
-                  <template>
-                    <a @click="handleView(record)">查看</a>
-                    <operation-button
-                            v-if="$auth('workflow-workflow-edit')" @click="handleEdit(record)"
-                          >修改</operation-button>
-                    <operation-button
-                            v-if="$auth('workflow-workflow-del')"
-                            :type="2"
-                            title="是否要删除该条数据？"
-                            @confirm="batchDelete(record.id)">删除</operation-button>
-                  </template>
-                </span>
-            </s-table>
-        </div>
-        <base-form ref="baseModal" @ok="handleOk"/>
-        <detail ref="detailModal" @ok="handleOk"/>
-    </a-card>
+      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :alert="options.alert" :rowSelection="options.rowSelection" showPagination="auto">
+        <span slot="action" slot-scope="record">
+          <template>
+            <a @click="handleView(record)">查看</a>
+            <operation-button v-if="$auth('workflow-workflow-edit')" @click="handleEdit(record)">修改</operation-button>
+            <operation-button v-if="$auth('workflow-workflow-del')" :type="2" title="是否要删除该条数据？" @confirm="batchDelete(record.id)">删除</operation-button>
+          </template>
+        </span>
+      </s-table>
+    </div>
+    <base-form ref="baseModal" @ok="handleOk" />
+    <detail ref="detailModal" @ok="handleOk" />
+  </a-card>
 </template>
 
 <script>
-    import { STable, Ellipsis } from '@/components'
-    import BaseForm from './modules/BaseForm'
-    import Detail from './modules/Detail'
-    import { getWorkflowPage, deleteWorkflows, fetchWorkflow, exportWorkflow } from '@/api/workflow/workflow'
+import { STable, Ellipsis } from '@/components'
+import BaseForm from './modules/BaseForm'
+import Detail from './modules/Detail'
+import { getWorkflowPage, deleteWorkflows, fetchWorkflow, exportWorkflow } from '@/api/workflow/workflow'
 
-    export default {
-        name: 'WorkflowList',
-        components: {
-            STable,
-            Ellipsis,
-            BaseForm,
-            Detail
+export default {
+  name: 'WorkflowList',
+  components: {
+    STable,
+    Ellipsis,
+    BaseForm,
+    Detail,
+  },
+  data() {
+    return {
+      advanced: false,
+      visible: true,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          customRender: (text, record, index) => {
+            return `${
+              (this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1
+            }`
+          },
         },
-        data () {
-            return {
-                advanced: false,
-                visible: true,
-                // 查询参数
-                queryParam: {
-                },
-                // 表头
-                columns: [
-                    {
-                        title: '序号',
-                        dataIndex: 'index',
-                        customRender: (text, record, index) => {
-                            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
-                        }
-                    },
-                                                                                                                                                                                                                                        {
-                                title: '添加时间',
-                                dataIndex: 'createdTime'
-                            },
-                                                                                                                                                                                                    {
-                                title: '创建人',
-                                dataIndex: 'createdUserName'
-                            },
-                                                                                                                                                                                                    {
-                                title: '流程名称',
-                                dataIndex: 'name'
-                            },
-                                                                                                                                                        {
-                                title: '流程总节点数',
-                                dataIndex: 'totalNode'
-                            },
-                                                                                                                                                        {
-                                title: '层级节点数',
-                                dataIndex: 'levelNode'
-                            },
-                                                                                            {
-                        title: '操作',
-                        key: 'action',
-                        width: '200px',
-                        align: 'center',
-                        scopedSlots: { customRender: 'action' }
-                    }
-                ],
-                // 下拉框map
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            // 加载数据方法 必须为 Promise 对象
-                loadData: parameter => {
-                    parameter = {
-                        ...parameter,
-                        ...this.queryParam,
-                        dataScope: {
-                            sortBy: 'desc',
-                            sortName: 'update_time'
-                        }
-                    }
-                    return getWorkflowPage(Object.assign(parameter, this.queryParam))
-                            .then(res => {
-                                return res.data
-                            })
-                },
-                selectedRowKeys: [],
-                selectedRows: [],
+        {
+          title: '添加时间',
+          dataIndex: 'createdTime',
+        },
+        {
+          title: '创建人',
+          dataIndex: 'createdUserName',
+        },
+        {
+          title: '流程名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '流程总节点数',
+          dataIndex: 'totalNode',
+        },
+        {
+          title: '层级节点数',
+          dataIndex: 'levelNode',
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: '200px',
+          align: 'center',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+      // 下拉框map
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (parameter) => {
+        parameter = {
+          ...parameter,
+          ...this.queryParam,
+          dataScope: {
+            sortBy: 'desc',
+            sortName: 'update_time',
+          },
+        }
+        return getWorkflowPage(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res.data
+        })
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
 
-                options: {
-                    alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
-                    rowSelection: {
-                        selectedRowKeys: this.selectedRowKeys,
-                        onChange: this.onSelectChange
-                    }
-                },
-                optionAlertShow: false
-            }
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
         },
-        created () {
-            // 下拉框map
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            this.tableOption()
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange,
         },
-        methods: {
-            tableOption () {
-                if (!this.optionAlertShow) {
-                    this.options = {
-                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
-                        rowSelection: {
-                            selectedRowKeys: this.selectedRowKeys,
-                            onChange: this.onSelectChange,
-                            getCheckboxProps: record => ({
-                                props: {
-                                    disabled: false,
-                                    name: record.id
-                                }
-                            })
-                        }
-                    }
-                    this.optionAlertShow = true
-                } else {
-                    this.options = {
-                        alert: false,
-                        rowSelection: null
-                    }
-                    this.optionAlertShow = false
-                }
-            },
-            batchDelete (id) {
-                let ids = []
-                if (this.BaseTool.String.isBlank(id)) {
-                    const length = this.selectedRows.length
-                    if (length === 0) {
-                        this.$message.info('请选择要删除的记录')
-                                return
-                    }
-                    ids = this.selectedRows.map(item => item.id)
-                } else {
-                    ids = [id]
-                }
-                deleteWorkflows(ids).then(res => {
-                    this.$message.info('删除成功')
-                    this.handleOk()
-                    this.$refs.table.clearSelected()
-                })
-            },
-            handleAdd () {
-                this.visible = false
-                const modal = this.$refs.baseModal
-                modal.base()
-            },
-            handleEdit (record) {
-                this.visible = false;
-                fetchWorkflow({ id: record.id }).then(res => {
-                    const modal = this.$refs.baseModal
-                    modal.base(res.data)
-                })
-            },
-            handleView (record) {
-                this.visible = false;
-                fetchWorkflow({ id: record.id }).then(res => {
-                    const modal = this.$refs.detailModal
-                    modal.base(res.data)
-                })
-            },
-            handleOk (values) {
-                this.visible = true
-                this.$refs.table.refresh()
-            },
-            onSelectChange (selectedRowKeys, selectedRows) {
-                this.selectedRowKeys = selectedRowKeys
-                this.selectedRows = selectedRows
-            },
-            resetSearchForm () {
-                this.queryParam = {
-                }
-                this.$refs.table.refresh(true)
-            },
-            doExport () {
-                const parameter = {
-                    ...this.queryParam
-                }
-                exportWorkflow(parameter).then(file => {
-                    this.BaseTool.Util.downLoadExportExcel(file)
-                })
-            },
-            handleEnter () {
-                this.$refs.table.refresh(true)
-            }
-                                                                                                                                                                                                                                                                                                                                                                                                                            }
+      },
+      optionAlertShow: false,
     }
+  },
+  created() {
+    // 下拉框map
+    this.tableOption()
+  },
+  methods: {
+    tableOption() {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+            getCheckboxProps: (record) => ({
+              props: {
+                disabled: false,
+                name: record.id,
+              },
+            }),
+          },
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null,
+        }
+        this.optionAlertShow = false
+      }
+    },
+    batchDelete(id) {
+      let ids = []
+      if (this.BaseTool.String.isBlank(id)) {
+        const length = this.selectedRows.length
+        if (length === 0) {
+          this.$message.info('请选择要删除的记录')
+          return
+        }
+        ids = this.selectedRows.map((item) => item.id)
+      } else {
+        ids = [id]
+      }
+      deleteWorkflows(ids).then((res) => {
+        this.$message.info('删除成功')
+        this.handleOk()
+        this.$refs.table.clearSelected()
+      })
+    },
+    handleAdd() {
+      this.visible = false
+      const modal = this.$refs.baseModal
+      modal.base()
+    },
+    handleEdit(record) {
+      this.visible = false
+      fetchWorkflow({ id: record.id }).then((res) => {
+        const modal = this.$refs.baseModal
+        modal.base(res.data)
+      })
+    },
+    handleView(record) {
+      this.visible = false
+      fetchWorkflow({ id: record.id }).then((res) => {
+        const modal = this.$refs.detailModal
+        modal.base(res.data)
+      })
+    },
+    handleOk(values) {
+      this.visible = true
+      this.$refs.table.refresh()
+    },
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    resetSearchForm() {
+      this.queryParam = {}
+      this.$refs.table.refresh(true)
+    },
+    doExport() {
+      const parameter = {
+        ...this.queryParam,
+      }
+      exportWorkflow(parameter).then((file) => {
+        this.BaseTool.Util.downLoadExportExcel(file)
+      })
+    },
+    handleEnter() {
+      this.$refs.table.refresh(true)
+    },
+  },
+}
 </script>