cd-work-flow-web/src/views/activiti/ProcessModelList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="流程名称">
              <a-input placeholder="请输入搜索关键词" v-model="queryParam.lcmc"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="流程标识">
              <a-input placeholder="请输入搜索关键词" v-model="queryParam.lckey"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="是否最新">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                defaultChecked
                v-model="queryParam.zx"
              />
            </a-form-item>
          </a-col>
          <!--<a-col :md="6" :sm="10">
            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                style="width: 210px"
                v-model="queryParam.createTimeRange"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>-->

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="8" :sm="12">
              <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px;left: 10px"
              >重置</a-button>
              <a-button @click="editFormsOnline" style="margin-left: 8px;left: 10px;">在线编辑表单</a-button>
            </a-col>
          </span>
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="12" :sm="12">
              <!--                <a-button type="primary"  style="left: 10px" @click="createObj.visible=true" icon="search">创建流程模型</a-button>-->
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <a-table
      :scroll="{x:2250,y:500}"
      bordered
      ref="table"
      size="small"
      rowKey="id"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <a-table-column title="#" :width="50" fixed="left" key="a">
        <template slot-scope="t,r,i">
          <span>{{i+1}}</span>
        </template>
      </a-table-column>
      <a-table-column title="流程名称" data-index="name" :width="200" align="center" fixed="left">
        <template slot-scope="t,r,i">
          <span>{{t}}</span>
        </template>
      </a-table-column>
      <a-table-column title="流程标识" data-index="processKey" :width="200" align="center">
        <template slot-scope="t,r,i">
          <span>{{t}}</span>
        </template>
      </a-table-column>
      <a-table-column
        title="版本"
        data-index="version"
        key="asa"
        :width="100"
        align="center"
        :sorter="(a, b) => a.version - b.version"
      >
        <template slot-scope="t,r,i">
          <span>v.{{t}}</span>
        </template>
      </a-table-column>
      <a-table-column
        title="图标"
        data-index="iconAddress"
        key="iconAddress"
        :width="100"
        align="center"
      >
        <template slot-scope="t,r,i">
          <span><a-avatar
                        shape="square"
                        :src="t"
                      /></span>
        </template>
      </a-table-column>
      <a-table-column
        title="所属分类"
        data-index="categoryId"
        :width="200"
        align="center"
        key="categoryId_"
        :filters="lcTypeF"
        @filter="filter_categoryId"
      >
        <template slot-scope="t,r,i">
          <span>{{filterDictText(dictOptions, t)}}</span>
        </template>
      </a-table-column>
      <a-table-column title="流程图片" data-index="diagramName" :width="200" align="center">
        <template slot-scope="t,r,i">
          <span @click="showResource(r)" style="color: blue;cursor: pointer;">{{t}}</span>
        </template>
      </a-table-column>
      <a-table-column title="表单路由" data-index="routeName" :width="200" align="center">
        <template slot-scope="t,r,i">
          <span @click="viewForm(r)" style="color: blue;cursor: pointer;">
            <!-- {{getFormComponent(t).text}}  -->
            预览表单
          </span>
        </template>
      </a-table-column>
      <a-table-column title="状态" data-index="status" :width="200" align="center">
        <template slot-scope="t,r,i">
          <span v-if="t==1" style="color: #00A0E9;">已启用</span>
          <span v-if="t!=1" style="color: #999;">未启用</span>
        </template>
      </a-table-column>
      <a-table-column title="备注说明" data-index="description" :width="200" align="center">
        <template slot-scope="t,r,i">
          <j-ellipsis :value="t" :length="10" />
        </template>
      </a-table-column>
      <a-table-column title="部署时间" data-index="createTime" :width="200" align="center">
        <template slot-scope="t,r,i">
          <span>{{t}}</span>
        </template>
      </a-table-column>
      <a-table-column title="更新时间" data-index="updateTime" :width="200" align="center">
        <template slot-scope="t,r,i">
          <span>{{t}}</span>
        </template>
      </a-table-column>
      <a-table-column title="操作" data-index align="center" :width="250" fixed="right">
        <template slot-scope="t,r,i">
          <a
            href="javascript:void(0);"
            v-if="r.status!=1"
            @click="editStatus(1,r)"
            style="color: rgb(144,96,255);"
          >启用</a>
          <a
            href="javascript:void(0);"
            v-if="r.status==1"
            @click="editStatus(0,r)"
            style="color: #cb892d"
          >禁用</a>
          <a-divider type="vertical" />
          <a href="javascript:void(0);" @click="getNodeData(r)">节点设置</a>
          <a-divider type="vertical" />
          <!-- <a href="javascript:void(0);" @click="convertToModel(r)" >转为模型</a> -->

          <a href="javascript:void(0);" @click="edit(r)">编辑</a>
          <a-divider type="vertical" />
          <br />
          <!-- 是自定义的表单才显示 -->
          <a
            v-if="r.routeName!=null&&r.routeName.indexOf('自定义')!=-1"
            href="javascript:void(0);"
            @click="editFrom(r)"
          >编辑表单</a>
          <a-divider v-if="r.routeName!=null&&r.routeName.indexOf('自定义')!=-1" type="vertical" />

          <a href="javascript:void(0);" style="color: red;" @click="remove(r)">删除</a>
        </template>
      </a-table-column>
    </a-table>
    <!-- table区域-end -->
    <!--编辑-->
    <a-modal
      :confirmLoading="confirmLoading"
      title="编辑流程"
      :visible="editObj.visible"
      @ok="editObjOk"
      @cancel="editObj.visible = false"
    >
      <a-form :form="editForm" v-if="editObj.visible">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="流程分类">
          <component
            :is="LcDict"
            :trigger-change="true"
            v-decorator="[ 'categoryId', {initialValue:editObj.categoryId, rules: [{ required: true, message: '不能为空' }] },]"
            placeholder="请选择流程分类"
            dictCode="bpm_process_type"
          ></component>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="关联表单">
          <a-select
            @change="change_routeName"
            placeholder="请选择关联表单"
            :trigger-change="true"
            v-decorator="[ 'routeName', {initialValue:editObj.routeName, rules: [{ required: true, message: '不能为空' }] },]"
          >
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item, i) in allFormComponent"
              :key="item.routeName"
              :value="item.routeName"
            >
              <span style="display: inline-block;width: 100%" :title=" item.text">{{ item.text}}</span>
            </a-select-option>
          </a-select>
          <!-- <a href="javascrip:void(0)" @click="viewForm">预览表单</a> -->
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="图标">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/jeecg-boot/sys/common/uploadFile"
            @change="imgHandleChange"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
              <a-icon type="plus" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="角色授权">
          <j-select-role
            placeholder="不选择则所有人可用"
            v-decorator="[ 'roles', {initialValue:editObj.roles, rules: []}]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="备注描述">
          <a-textarea
            v-decorator="[ 'description', {initialValue:editObj.description, rules: []}]"
            placeholder="备注描述"
            :autoSize="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!--节点设置-->
    <a-modal
      title="编辑流程节点"
      width="900px"
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      :visible="showProcessNodeEdit"
      :footer="null"
      @cancel="closeNode"
    >
      <a-row>
        <a-col :md="4" :sm="4" style="border-right: 1px solid #999">
          <!--          选择流程节点-->
          <a-steps direction="vertical" :current="current" size="small">
            <template v-for="item,i in nodeList" >
              <a-step
                style="cursor: pointer;"
                :title="item.title"
                :description="item.description"
                :status="i==current?'process':'wait'"
                @click="change_steps(item,i)"
              />
            </template>
          </a-steps>
        </a-col>
        <a-col :md="20" :sm="20">
          <a-alert message="温馨提示：若流程运行至未分配审批人员的审批节点时，流程将自动中断取消！" banner />
          <span></span>
          <a-form :form="nodeForm" v-if="showProcessNodeEdit">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="节点名称">
              <span class="nodespan">{{editNode.title}}</span>
            </a-form-item>
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="节点类型">
              <span class="nodespan">{{dictNodeType[editNode.type]}}</span>
            </a-form-item>
          <a-alert v-if="editNode.type!=2&&!confirmLoading" message="温馨提示：若每步流程填写表单的内容不同则需要选择关联表单，相同则不需要选择！" banner /><br/>
          <a-form-item v-if="editNode.type!=2&&!confirmLoading" :label-col="labelCol" :wrapper-col="wrapperCol" label="关联表单">
            <a-select
              placeholder="请选择关联表单"
              v-model="spry.tbTableInfoId"
            >
              <a-select-option
                v-for="(item, i) in tableByBusinessTableList"
                :key="item.id"
                :value="item.id"
              >
                <span style="display: inline-block;width: 100%" :title="item.stepMemo">{{ item.stepMemo}}</span>
              </a-select-option>
            </a-select>
          </a-form-item>
            <a-alert type="info" message="每个节点设置，如有修改都请保存一次，跳转节点后数据不会自动保存！" banner />
            <br />
            <a-form-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="审批人员"
              v-show="editNode.type==1"
            >
              <a-checkbox-group @change="spryType" v-model="spryTypes">
                <!-- 0角色 1用户 2部门 3发起人 4发起人的部门负责人-->
                <a-checkbox value="0">根据角色选择</a-checkbox>
                <a-checkbox value="1">直接选择人员</a-checkbox>
                <a-checkbox value="2">部门负责人</a-checkbox>
                <a-checkbox value="3">
                  发起人
                  <a-tooltip placement="topLeft" title="自动获取发起人">
                    <a-icon type="exclamation-circle" />
                  </a-tooltip>
                </a-checkbox>
                <a-checkbox value="4">
                  发起人的部门负责人
                  <a-tooltip
                    placement="topLeft"
                    title="自动获取发起人所在部门的负责人，即其上级领导。（如果其本身就是部门负责人，则指向发起人自己。）"
                  >
                    <a-icon type="exclamation-circle" />
                  </a-tooltip>
                </a-checkbox>
                <a-checkbox value="5">上级部门负责人</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <!--            0角色 1用户 2部门 3发起人 4发起人的部门负责人-->
            <a-form-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="选择角色"
              v-if="spryTypes.indexOf('0')>-1"
            >
              <j-select-role v-model="spry.roleIds" />
            </a-form-item>
            <a-form-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="选择人员"
              v-if="spryTypes.indexOf('1')>-1"
            >
              <!--  通过部门选择用户控件 -->
              <j-select-user-by-dep v-model="spry.userIds" :multi="true"></j-select-user-by-dep>
            </a-form-item>
            <a-form-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="选择部门"
              v-if="spryTypes.indexOf('2')>-1"
            >
              <j-select-depart v-model="spry.departmentIds" :multi="true"></j-select-depart>
            </a-form-item>
            <!--btn-->
            <!-- :disabled="editNode.type==0||editNode.type==2||confirmLoading" -->
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
              <a-button
                @click="sprySubmit"
                type="primary"
                html-type="submit"
                :disabled="editNode.type==2||confirmLoading"
              >提交并保存</a-button>

              <a-button @click="closeNode" style="margin-left: 10px">关闭</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-modal>
    
    <!--查看图片-->
    <a-modal
      :title="viewTitle"
      width="90%"
      :visible="viewImage"
      :footer="null"
      @cancel="viewImage = false"
    >
      <div style="min-height: 400px">
        <img :src="diagramUrl" :alt="viewTitle" />
      </div>
    </a-modal>
    <!-- 表单编辑器 -->
    <a-drawer
      title="编辑器"
       width="100%"
       style="top:0%;height: 100%;"
       :visible="editorVisible"
       @close="editFromClose"
    >
      <iframe :src="editorJumpUrl" width="100%" height="800" frameborder="0" scrolling="auto" id="iframename" name="iframename"></iframe>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="editFromClose">
          关闭
        </a-button>
      </div>
    </a-drawer>
    <!--流程表单 预览-->
    <!-- <a-modal  :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%">
      <component :is="lcModa.formComponent" :disabled="true"></component>
    </a-modal>-->
    <a-modal
      :title="lcModa.title"
      v-model="lcModa.visible"
      :footer="null"
      :maskClosable="false"
      width="80%"
    >
      <component
        :disabled="lcModa.disabled"
        v-if="lcModa.visible"
        :is="lcModa.formComponent"
        :processData="lcModa.processData"
        :isNew="lcModa.isNew"
        @close="lcModa.visible=false,lcModa.disabled = false"
      ></component>
    </a-modal>
  </a-card>
</template>

<script>
import { filterObj } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import { deleteAction, getAction, downFile,postFormAction2 } from '@/api/manage'
import pick from 'lodash.pick'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JSelectRole from '@/components/jeecgbiz/JSelectRole'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import {getEditorJumpUrl}from '../../../url.config'
import { queryList,updateTbTableInfo } from '@/api/api'
export default {
  name: 'ProcessModelList',
  mixins: [activitiMixin, JeecgListMixin],
  components: {
    JEllipsis,
    JSelectUserByDep,
    JSelectRole,
    JSelectDepart,
    JTreeSelect
  },
  data() {
    return {
      tableByBusinessTableList:[],//节点关联表单下拉集合
      imageUrl:"",
      viewImage: false,
      editorVisible:false,
      editorJumpUrl:"",
      viewTitle: '',
      diagramUrl: '',
      /*编辑流程*/
      editObj: {
        visible: false
      },
      editForm: this.$form.createForm(this),

      description: '已部署模型',
      // 查询条件
      queryParam: {
        createTimeRange: [],
        keyWord: ''
      },
      tabKey: '1',
      // 表头
      labelCol: {
        xs: { span: 4 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 20 }
      },
      confirmLoading: false,
      current: 0,
      nodeForm: this.$form.createForm(this),
      dictOptions: [],
      nodeList: [],
      editNode: {},
      showProcessNodeEdit: false,
      dictNodeType: {
        '0': '开始节点',
        '1': '审批节点',
        '2': '结束节点'
      },
      spryTypes: [],
      url: {
        list: '/activiti_process/listData',
        img: '/activiti/models/export',
        updateStatus: '/activiti_process/updateStatus',
        delByIds: '/activiti_process/delByIds',
        convertToModel: '/activiti_process/convertToModel',
        updateInfo: '/activiti_process/updateInfo',
        updateInfo2: '/activiti_process/updateInfo2',
        getProcessNode: '/activiti_process/getProcessNode',
        editNodeUser: '/activiti_process/editNodeUser'
      },
      spry: {
        //选中的用户
        userIds: '',
        roleIds: '',
        departmentIds: '',
        chooseSponsor: false,
        chooseDepHeader: false,
        headSuperiorDepartment:false,
        tbTableInfoId:null
      },
      lcModa: {
        title: '',
        disabled: false,
        visible: false,
        formComponent: null,
        isNew: false
      },
      lcTypeF: [],
      dataList: [],
      allFormComponent2: []
    }
  },
  computed: {
    //可行性测试，根据文件路径动态加载组件
    LcDict: function() {
      var myComponent = () => import(`@/components/dict/JDictSelectTag`)
      return myComponent
    }
  },
  created() {
    // getAction("/actBusiness/getTableInfoList").then(res=>{
    //     this.allFormComponent2=res.result;
    //   })
    //获取关联表下拉数据
    this.getTableList()
  },
  methods: {
    initDictConfig() {
      //初始化字典 - 流程分类
      initDictOptions('bpm_process_type').then(res => {
        if (res.success) {
          var lcTypes = []
          this.dictOptions = res.result || []
          for (const dict of this.dictOptions) {
            lcTypes.push({ text: dict.text, value: dict.value })
          }
          this.lcTypeF = lcTypes
          console.log(lcTypes)
        }
      })
    },
    filterDictText(dictOptions, text) {
      if (dictOptions instanceof Array) {
        for (let dictItem of dictOptions) {
          if (text === dictItem.value) {
            return dictItem.text
          }
        }
      }
      return text
    },
    closeNode() {
      ;(this.showProcessNodeEdit = false), (this.current = 0), (this.spryTypes = []), (this.spry = {})
    },
    /*编辑流程节点*/

    change_steps(node, index) {
      this.spryTypes = []
      console.log('onChange:', node)
      this.current = index
      this.editNode = node
      /* 0角色 1用户 2部门 3发起人 4发起人的部门负责人 5上级部门负责人*/
      this.spry.headSuperiorDepartment=node.headSuperiorDepartment||false
      if(this.spry.headSuperiorDepartment) this.spryTypes.push('5')
      this.spry.chooseDepHeader = node.chooseDepHeader || false
      if (this.spry.chooseDepHeader) this.spryTypes.push('4')
      this.spry.chooseSponsor = node.chooseSponsor || false
      if (this.spry.chooseSponsor) this.spryTypes.push('3')
      var userIds = []
      for (const user of node.users || []) {
        userIds.push(user.username)
      }
      this.spry.userIds = userIds.join(',')
      if (userIds.length > 0) this.spryTypes.push('1')
      var roleIds = []
      for (const role of node.roles || []) {
        roleIds.push(role.roleCode)
      }
      this.spry.roleIds = roleIds.join(',')
      if (roleIds.length > 0) this.spryTypes.push('0')
      var departmentIds = []
      for (const department of node.departments || []) {
        departmentIds.push(department.id)
      }
      this.spry.departmentIds = departmentIds.join(',')
      if (departmentIds.length > 0) this.spryTypes.push('2')
      //关联表单
      var tbTableInfoId=null;
      if(node.tbTableInfoId){
        tbTableInfoId=node.tbTableInfoId
      }
      this.spry.tbTableInfoId=tbTableInfoId;
     
      console.log('回显this.spry', this.spry)
    },
    spryType(types) {
      /* 0角色 1用户 2部门 3发起人 4发起人的部门负责人*/
      // this.spryTypes = types;
      if (this.spryTypes.indexOf('0') == -1) this.spry.roleIds = ''
      if (this.spryTypes.indexOf('1') == -1) this.spry.userIds = ''
      if (this.spryTypes.indexOf('2') == -1) this.spry.departmentIds = ''
      //是否选中发起人
      this.spry.chooseSponsor = this.spryTypes.indexOf('3') > -1
      //是否选中发起人的部门领导
      this.spry.chooseDepHeader = this.spryTypes.indexOf('4') > -1
      //是否选中上级部门负责人
      this.spry.headSuperiorDepartment = this.spryTypes.indexOf('5') > -1
      console.log('this.spry', this.spry)
    },
    sprySubmit() {
      var _this = this
      //开始节点 选择初始提交表单
      if(this.editNode.type==0){
        let where={id:this.spry.tbTableInfoId,isInitial:"1"}
        updateTbTableInfo(where).then((res)=>{
          if(res.success){
            _this.$message.success('操作成功')
          }else{
            _this.$message.error('操作失败')
          }
        });
      }else{
        //修改关联表单信息
        // let where={id:this.spry.tbTableInfoId,isInitial:"1"}
        // updateTbTableInfo(where).then((res)=>{
        //   if(res.success){
        //     _this.$message.success('操作成功')
        //   }else{
        //     _this.$message.error('操作失败')
        //     return;
        //   }
        // });
        if (this.spryTypes.length == 0) {
          _this.$message.error('必须选择审批人！')
          return
        }
        _this.confirmLoading = true
        this.spry.nodeId = this.editNode.id
        this.postFormAction(_this.url.editNodeUser, this.spry)
          .then(res => {
            if (res.success) {
              _this.$message.success('操作成功')
              // _this.getData();
            } else {
              _this.$message.error(res.message)
            }
          })
          .finally(() => (_this.confirmLoading = false))
      }
    },
    getNodeData(row) {
      //查询节点关联表单下拉数据
      const where={businessTable:row.businessTable}
      queryList(where).then((res)=>{
        this.tableByBusinessTableList=res.result;
      })
      var _this = this
      _this
        .postFormAction(_this.url.getProcessNode, {
          id: row.id
        })
        .then(res => {
          if (res.success) {
            // 转换null为""
            _this.nodeList = res.result || []
            console.log('_this.nodeList', _this.nodeList)
            if (_this.nodeList.length > 0) {
              _this.editNode = _this.nodeList[0]
              _this.showProcessNodeEdit = true
              if(_this.nodeList[0].tbTableInfoId){
                this.spry.tbTableInfoId=_this.nodeList[0].tbTableInfoId;
              }
            }
          } else {
            _this.$message.error(res.message)
          }
        })
    },
    /*编辑流程信息*/
    edit(row) {
      //获取关联表下拉数据
      this.getTableList()
      this.editObj = Object.assign(this.editObj, row)
      this.imageUrl=this.editObj.iconAddress
      this.editObj.visible = true
    },
    editObjOk() {
      var _this = this
      this.editForm.validateFields((err, values) => {
        if (!err) {
          let formData = Object.assign(this.editObj, values)
          console.log('formData', formData)
          formData.iconAddress=this.imageUrl;
          this.confirmLoading = true
          postFormAction2(this.url.updateInfo2, formData)
            .then(res => {
              if (res.success) {
                _this.$message.success('操作成功')
                _this.loadData()
                _this.editObj.visible = false
              } else {
                _this.$message.error(res.message)
              }
            })
            .finally(() => (_this.confirmLoading = false))
        }
      })
    },
    change_routeName(event) {
      this.$nextTick(() => {
        let routeName = this.editForm.getFieldValue('routeName')
        console.log('routeName', routeName)
        var route = this.getFormComponent(routeName)
        this.editObj.businessTable = route.businessTable
        this.editObj.routeName = route.routeName
        console.log('this.editObj', this.editObj)
      })
    },
    viewForm(r) {
      // if (!routeName) routeName = this.editObj.routeName;
      // if (!routeName) {
      //   this.$message.warning(
      //     "请先选择表单！"
      //   );
      //   return;
      // }
      // let formComponent = this.getFormComponent(routeName);
      // this.lcModa.formComponent = formComponent.component;
      // this.lcModa.title = '流程表单预览：'+formComponent.text;
      // this.lcModa.visible = true;
      if (r.routeName.indexOf('外部表单') != -1) {
        alert('调用其他项目页面')
      } else if (r.routeName.indexOf('自定义') != -1) {
        //自定义表单展开
        this.lcModa.disabled = true
        let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
        this.lcModa.formComponent = com.component
        this.lcModa.title = '流程表单预览'
        this.lcModa.isNew = true
        this.lcModa.processData = { businessTable: r.businessTable }
        this.lcModa.visible = true
      } else {
        //自带表单展开
        this.lcModa.disabled = true
        this.lcModa.formComponent = this.getFormComponent(r.routeName).component
        this.lcModa.title = '流程表单预览'
        this.lcModa.isNew = true
        this.lcModa.processData = r
        this.lcModa.visible = true
      }
    },
    convertToModel(row) {
      let that = this
      this.$confirm({
        title: '确认转化',
        content: '您确认要转化流程 ' + row.name + ' 为模型?',
        loading: true,
        onOk: () => {
          that.postFormAction(`${that.url.convertToModel}`, { id: row.id }).then(res => {
            if (res.success) {
              setTimeout(function() {
                that.$message.success('转化成功')
              }, 300)
            } else {
              that.$message.error(res.message)
            }
          })
        }
      })
    },
    remove(row) {
      var _this = this
      _this.$confirm({
        title: '确认删除',
        content: '您确认要删除流程 ' + row.name + ' ?',
        loading: true,
        onOk: () => {
          _this.postFormAction(_this.url.delByIds, { ids: row.id }).then(res => {
            if (res.success) {
              _this.$message.success('操作成功')
              _this.loadData()
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
    editStatus(status, row) {
      var _this = this
      let operation = ''
      if (status == 0) {
        operation = '不启用'
      } else {
        operation = '启用'
      }
      this.$confirm({
        title: '确认' + operation + '?',
        content: `您确认要${operation}流程${row.name}?`,
        onOk() {
          let params = {
            status: status,
            id: row.id
          }
          _this.postFormAction(_this.url.updateStatus, params).then(res => {
            if (res.success) {
              _this.$message.success('操作成功')
              _this.loadData()
            } else {
              _this.$message.error(res.message)
            }
          })
        },
        onCancel() {}
      })
    },
    /*查看流程图片*/
    showResource(row) {
      this.viewTitle = '流程图片预览(' + row.diagramName + ')'
      this.diagramUrl = `${this.doMian}${this.url.img}?id=${row.id}`
      this.viewImage = true
    },
    /*删除模型*/
    deletelc(y, row) {
      console.log(y, row)
      if (y) {
        getAction(this.url.delete + row.id).then(res => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
          this.loadData()
        })
      }
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      console.log(pagination, filters, sorter)
      /*if (Object.keys(filters).length>0&&this.dataList.length>0){
          for (const filterField in filters) {
            let fiterVals = filters[filterField]||[];

          }
        }*/
      // this.loadData();
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params).then(res => {
        if (res.success) {
          let records = res.result || []
          this.dataSource = records
          this.dataList = records
          this.ipagination.total = records.length
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    getQueryParams() {
      var param = Object.assign({}, this.queryParam, this.isorter)
      delete param.createTimeRange // 时间参数不传递后台
      return filterObj(param)
    },

    // 重置
    searchReset() {
      var that = this
      var logType = that.queryParam.logType
      that.queryParam = {} //清空查询区域参数
      that.queryParam.logType = logType
      that.loadData(this.ipagination.current)
    },
    onDateChange: function(value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    onDateOk(value) {
      console.log(value)
    },

    filter_categoryId(v, r) {
      // console.log(v,r)
      return r.categoryId == v
    },
    editFormsOnline() {
      //在线编辑表单
      // window.location.href = 'http://localhost:8080/#/formDesign'
      // window.open('http://localhost:8080/#/formDesign', '_blank')
      // window.open('http://106.15.206.14:8089/#/formDesign', '_blank')//测试地址
      // window.open(getEditorJumpUrl()+'/#/formDesign', '_blank')
      this.editorVisible=true;
      this.editorJumpUrl=getEditorJumpUrl()+'/#/formDesign';
    },
    //编辑表单
    editFrom(r) {
      // window.open('http://localhost:8080/#/formDesign?tableName=' + r.businessTable, '_blank')
      // window.open('http://106.15.206.14:8089/#/formDesign?tableName='+r.businessTable, '_blank')//测试地址
      this.editorVisible=true;
      // window.open(getEditorJumpUrl()+'/#/formDesign?tableName='+r.businessTable, '_blank')//测试地址
      this.editorJumpUrl=getEditorJumpUrl()+'/#/formDesign?tableName='+r.businessTable;
    },
    //编辑表单弹框关闭按钮
    editFromClose(){
      this.editorVisible=false;
      this.editorJumpUrl="";
    },
    imgHandleChange(info){
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.editObj.iconAddress=imageUrl
           console.log(this.editObj.iconAddress)
          this.loading = false;
        });
      }
     
    }
  }
}
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.nodespan {
  color: #999;
}
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
  margin-right: 8px;
}
</style>