<template>
  <section class="bpmn">
    <div class="task-nav">
      <div
        class="task-nav-item task-nav-left"
        style="display: flex;align-items: baseline;"
      >
        <!--        <el-button  size="mini" @click="goBack">返回</el-button>-->
        <div
          slot="taskTemplateName"
          name="taskTemplateName"
          class="task-template-name"
        >
          <span>{{ testName }}</span>
        </div>
      </div>
      <div class="task-nav-item" style="text-align: right">
        <!--        <el-button type="primary" size="mini" @click="download">导出bpmn</el-button>-->
        <el-upload
          ref="upload"
          class="save-btn"
          action="/"
          :on-change="onChange"
          :file-list="fileList"
          :show-file-list="false"
          :auto-upload="false"
        >
          <!--          <el-button slot="trigger" type="primary" size="mini" @click="download">导入bpmn</el-button>-->
        </el-upload>
        <el-button style="margin-right: 14px;" size="mini" @click="saveAll">确 定</el-button>
        <!--<a-button class="save-btn" @click="preview" v-if="processIndex == 2">预览 </a-button>-->
      </div>
    </div>
    <div id="canvas" ref="canvas" class="canvas-platform" />
    <!--userTask 的 Panel-->
    <div v-if="showPanel" class="custom-panel">
      <div class="element-name">
        {{ currentElementName }}
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="审批人设置" name="person">
          <el-form ref="showPanelOne" label-width="110px" label-position="left" class="person-form">
            <el-form-item
              label="节点属性"
            >
              <el-select v-model="togetherSign" size="small" placeholder="请选择" @change="togetherSignChange">
                <el-option
                  v-for="item in signOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="是否是审批节点"
            >
              <el-radio-group v-model="isApprove">
                <el-radio :label="'1'">是</el-radio>
                <el-radio :label="'0'">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="isApprove === '1'"
              label="审批变量"
            >
              <el-input v-model.trim="countersignCount" size="small" :maxlength="30" style="width: 80%" placeholder="请输入内容" show-word-limit />
            </el-form-item>
            <el-form-item
              v-if="togetherSign === 'multiple'"
              label="会签变量"
            >
              <el-input v-model.trim="theSign" v-alphabet size="small" :maxlength="30" style="width: 80%" placeholder="请输入内容" show-word-limit />
            </el-form-item>
            <div class="person-type">
              <el-radio-group v-model="personType" @change="personTypeChange">
                <el-radio label="people">选择用户</el-radio>
                <el-radio label="role" :disabled="togetherSign === 'multiple'">选择角色</el-radio>
              </el-radio-group>
            </div>
            <el-form-item
              v-if="personType === 'people'"
              label="选择用户"
            >
              <el-button class="blue-btn" @click="dialogPeopleVisible = true,getList()">选择</el-button>
              <div class="select-string" :title="selectedPeopleString">{{ selectedPeopleString }}</div>
            </el-form-item>
            <el-form-item
              v-if="personType === 'role'"
              label="选择角色"
            >
              <el-button class="blue-btn" @click="dialogRoleVisible = true,getList()">选择</el-button>
              <div class="select-string" :title="selectedRoleString">{{ selectedRoleString }}</div>
            </el-form-item>
            <el-form-item
              v-if="personType === 'role'"
              label="指定数据权限"
            >
              <el-select v-model="deptOption" size="small" placeholder="请选择" @change="selectedDept=[]">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="deptOption === '4' && personType === 'role'"
              label="指定部门"
            >
              <el-button class="blue-btn" @click="dialogDeptVisible = true,getTreeselect()">选择</el-button>
              <div class="select-string" :title="selectedDeptString">{{ selectedDeptString }}</div>
            </el-form-item>
            <!--<el-form-item
              :label="
                processData.pmsProcess.templateType === 'project'
                  ? '项目阶段'
                  : processData.pmsProcess.templateType === 'business'
                  ? '项目阶段'
                  : '业务阶段'
              "
            >
              <el-select v-model="stageSelect" placeholder="请选择">
                <el-option
                  v-for="item in stageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>-->
            <!--<el-form-item label="外部接口">
              <el-select v-model="extralApi" multiple placeholder="请选择">
                <el-option
                  v-for="item in trhrdSystemApiJs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>-->
            <!--<el-form-item
              label="启动业务线"
              v-if="
                processData.pmsProcess.templateType == 'project' ||
                  processData.pmsProcess.templateType == 'business'
              "
            >
              <el-select v-model="processIdS" multiple placeholder="请选择">
                <el-option
                  v-for="item in serviceProcess"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>-->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="工单权限设置" name="power">
          <el-button
            class="opt-button"
            type="success"
            size="mini"
            @click="setAllIsEadit('1')"
          >全部可编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="setAllIsEadit('0')"
          >全部为只读</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="setAllIsFlag('1')"
          >全部为显示</el-button>
          <el-button
            type="info"
            size="mini"
            @click="setAllIsFlag('0')"
          >全部为隐藏</el-button>
          <el-table
            :data="tableData"
            style="width: 100%;max-height: 60vh;overflow-y: auto;"
            :tree-props="{ children: 'fieldDefault' }"
            row-key="fieldId"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            />
            <el-table-column label="控件名称" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time" />
                <span style="margin-left: 10px">{{ scope.row.fieldName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="可编辑" width="180">
              <template slot-scope="scope">
                <el-select
                  v-if="scope.row.isEdit !== '2'"
                  v-model="scope.row.isEdit"
                  size="small"
                  placeholder="请选择"
                  @change="GroupReadOnlyDeal(scope.row, scope.row.isEdit)"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-input v-else v-model="isEditText" disabled />
              </template>
            </el-table-column>
            <el-table-column label="显示隐藏">
              <template slot-scope="scope">
                <el-radio-group
                  v-model="scope.row.isRead"
                  @change="GroupHideDeal(scope.row, scope.row.isRead)"
                >
                  <el-radio :label="'1'">显示</el-radio>
                  <el-radio :label="'0'">隐藏</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--line 的 Panel-->
    <div v-if="showPanel2" class="custom-panel">
      <el-form label-width="80px" style="margin-top: 80px">
        <el-form-item label="表达式">
          <el-input v-model.trim="expression" size="small" placeholder="请输入表达式" />
        </el-form-item>
      </el-form>
    </div>
    <!--edn 的 Panel-->
    <div v-if="showPanel3" class="custom-panel">
      <el-form label-width="80px" style="margin-top: 80px">
        <el-form-item label="结束事件">
          <el-input v-model="listenEntityPath" :maxlength="100" show-word-limit size="small" placeholder="请输入结束事件" />
        </el-form-item>
      </el-form>
    </div>
    <!--    人员选择弹出框-->
    <el-dialog
      class="consumer-dialog"
      title="用户信息"
      :visible.sync="dialogPeopleVisible"
      :show-close="true"
      :destroy-on-close="true"
      @close="currentPage=1,searchForm.userName = ''"
    >
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model.trim="searchForm.userName" clearable placeholder="请输入姓名" :maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPeopleByuserName">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="peopleSelectTable"
        :data="peopleTableData.rows"
        @select="peopleSelectionChange"
        @select-all="peopleSelectionChangeAll"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column width="55" type="index" label="序号" />
        <el-table-column property="userName" label="姓名" />
        <!--        <el-table-column property="nickName" label="用户昵称" />-->
        <el-table-column label="部门">
          <template slot-scope="scope">
            {{ scope.row.deptName || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <section class="laypage-group">
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="peopleTableData.total"
          @current-change="handleCurrentChange"
        />
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button class="info-btn" @click="dialogPeopleVisible = false">取 消</el-button>
        <el-button class="blue-btn" @click="peopleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!--    角色选择弹出框-->
    <el-dialog
      class="consumer-dialog"
      title="角色信息"
      :visible.sync="dialogRoleVisible"
      :show-close="true"
      :destroy-on-close="true"
      @close="currentPage=1,searchForm.roleName=''"
    >
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model.trim="searchForm.roleName" clearable placeholder="请输入角色名称" :maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPeopleByuserName">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="roleSelectTable"
        :data="roleTableData.rows"
        @select="roleSelectionChange"
        @select-all="roleSelectionChangeAll"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column
          property="roleId"
          width="150"
          label="角色编号"
        />
        <el-table-column property="roleName" label="角色名称" />
      </el-table>
      <!--分页-->
      <section class="laypage-group">
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="roleTableData.total"
          @current-change="handleCurrentChange"
        />
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button class="info-btn" @click="dialogRoleVisible = false">取 消</el-button>
        <el-button class="blue-btn" type="primary" @click="roleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!--    部门弹出框-->
    <el-dialog
      class="consumer-dialog"
      title="数据权限信息"
      :visible.sync="dialogDeptVisible"
      :show-close="false"
      :destroy-on-close="true"
    >
      <el-tree
        ref="tree"
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :show-checkbox="true"
        default-expand-all
        node-key="id"
        :default-checked-keys="checkedKey"
        @check-change="handleNodeClick"
      />
      <span slot="footer" class="dialog-footer">
        <el-button class="info-btn" @click="dialogDeptVisible = false">取 消</el-button>
        <el-button class="blue-btn" @click="dialogDeptVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import { queryWfProcessDetail, saveWfProcess, queryUserByPage, queryRoleByPage } from '@/api/workflow'
// import tempJson from './tempJson'
// ("./tempJson"); //临时数据后续可删
import trhrdSystemApi from '@/assets/js/thirdSystemApi.js' // 临时数据后续可删
// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
// import BpmnModdle from 'bpmn-js'; // 默认入口是Viewer.js文件，只有预览流程图的功能；
import BpmnModdle from 'bpmn-js/lib/Modeler' // 如果手动引入bpmn-js/lib/Modeler，则具备左侧工具栏，可以编辑流程图
// 国际化
import customTranslate from './customTranslate/customTranslate'
// 自定义控件
import customControlsModule from './customControls'
/* import { listUser } from '@/api/system/user'
import { listRole } from '@/api/system/role'*/
import { treeselect } from '@/api/system/dept'
import Template from '../../views/instance/Template'
// import item from '../formDesigner/fieldItem/fields/Group/item'
// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
const HIGH_PRIORITY = 1500 // 优先级设置
export default {
  name: 'Bpmn',
  directives: {
    alphabet: {
      inserted: function(el) {
        const input = el.querySelector('.el-input__inner')
        input.onkeyup = function(e) {
          input.value = input.value.replace(/[^A-Za-z]/g, '')
        }
        input.onblur = function(e) {
          input.value = input.value.replace(/[^A-Za-z]/g, '')
        }
      }
    }
  },
  props: {},
  data() {
    return {
      searchForm: {
        userName: '',
        roleName: ''
      },
      isEditText: '否', // isedit提示字
      listenEntityPath: '',
      countersignCount: '', // 审批变量
      theSign: '', // 会签变量
      isApprove: '0', // 是否是审批节点
      signOptions: [
        {
          value: 'normal',
          label: '普通'
        },
        {
          value: 'add',
          label: '加签'
        },
        {
          value: 'multiple',
          label: '会签'
        }
      ],
      togetherSign: 'normal', // 是否会签标识符
      personType: 'people',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 部门树选项
      deptOptions: [],
      peopleTableData: [], // 存放人员分页数据
      roleTableData: [], // 存放角色分页数据
      pageSize: 5, // 每页的数据条数
      currentPage: 1,
      dialogPeopleVisible: false,
      dialogRoleVisible: false,
      dialogDeptVisible: false,
      fileList: [], // 导入文件列表
      templateId: '', // 模板id
      serviceProcess: [], // 已发布的业务线
      processIdS: [], // 保存已选择的业务线
      extralApi: [], // 保存的外部接口
      trhrdSystemApiJs: trhrdSystemApi, // 外部接口对照表
      expression: '', // 表达式默认值
      testName: '',
      viewer: null,
      container: null,
      bpmnText: '',
      processData: {}, // 流程图设计集合
      bpmnXml: '', // 流程图数据
      modeler: null,
      isErro: false,
      processId: '',
      currentElement: null, // 当前选中的节点id
      currentElementType: null, // 当前选中节点的类型
      currentElementName: null, // 当前选中节点的名称
      currentElementObj: null,
      elementsObj: null, // 节点数据整合
      activeName: 'person', // userTask 的 Panel默认选择
      approver: [],
      deptOption: '', // 部门制定情况
      stageSelect: '', // 阶段
      tableData: [
        {
          fieldName: '2016-05-02',
          isEdit: '1',
          permission: 0
        }
      ],
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      roleOptions: [
        {
          label: '无限制',
          value: '1'
        },
        {
          label: '本部门',
          value: '2'
        },
        {
          label: '直属部门',
          value: '3'
        },
        {
          label: '指定部门',
          value: '4'
        },
        {
          label: '特殊部门',
          value: '5'
        }
      ], // 可选角色
      stageOptions: [], // 可选阶段
      processGatewayList: [], // 表达式集合
      fullScreenLoading: null,
      selectedPeople: [], // 选择用户集合
      selectedRole: [], // 选择角色集合
      selectedPeopleTable: [], // 选择用户集合
      selectedRoleTable: [], // 选择角色集合
      selectedDept: [], // 部门集合
      watchFlag: false, // 是否进行监听
      selectedRoleName: '', // 回显选中人/角色名
      selectedPeopleName: '' // 回显选中人/角色名
    }
  },
  computed: {
    checkedKey() {
      return this.selectedDept.map(item => {
        return item.id
      })
    },
    selectedPeopleString() {
      const array = this.selectedPeople.map(item => {
        return item.userName
      })
      if (array[0]) {
        return array.toString()
      } else {
        return (this.personType === 'people' ? this.selectedPeopleName : '')
      }
    },
    selectedPeopleIdString() {
      return this.selectedPeople.map(item => {
        return item.userId
      }).toString()
    },
    selectedDeptString() {
      return this.selectedDept.map(item => {
        return item.label
      }).toString()
    },
    selectedRoleString() {
      const array = this.selectedRole.map(item => {
        return item.roleName
      })
      if (array[0]) {
        return array.toString()
      } else {
        return (this.personType === 'role' ? this.selectedRoleName : '')
      }
    },
    selectedRoleIdString() {
      return this.selectedRole.map(item => {
        return item.roleId
      }).toString()
    },
    showPanel() {
      // 是否展示 userTask 的 Panel
      let temp = this.currentElementType === 'bpmn:UserTask'
      if (this.$refs['showPanelOne']) {
        if (this.isApprove === '1' && this.countersignCount === '') {
          this.$message.error('请填写审批变量')
          temp = true
        } else if (this.togetherSign === 'multiple' && this.theSign === '') {
          this.$message.error('请填写会签变量')
          temp = true
        }
      }
      return temp
    },
    showPanel2() {
      // 是否展示 line 的 Panel
      const flag = this.currentElementType === 'bpmn:SequenceFlow'
      return flag
    },
    showPanel3() {
      // 是否展示 end 的 Panel
      const flag = this.currentElementType === 'bpmn:EndEvent'
      return flag
    }
  },
  watch: {
    listenEntityPath: {
      handler(newValue, oldValue) {
        this.saveRoles()
      },
      deep: true
    },
    togetherSign: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    isApprove: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    countersignCount: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    theSign: {
      handler(newValue, oldValue) {
        this.theSign = newValue.replace(/[^A-Za-z]/g, '')
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    selectedPeople: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    selectedRole: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    selectedDept: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.saveRoles()
        }
      },
      deep: true
    },
    tableData: {
      handler(newValue, oldValue) {
        if (this.watchFlag) {
          this.savePower()
        }
      },
      deep: true
    },
    expression: {
      handler(newValue, oldValue) {
        this.saveExpression()
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.initProcessInfo()
  },
  methods: {
    peopleSubmit() {
      this.dialogPeopleVisible = false
      this.selectedPeople = []
      this.selectedPeopleName = ''
      this.selectedPeopleTable.forEach(item => {
        this.selectedPeople.push(item)
      })
    },
    roleSubmit() {
      this.dialogRoleVisible = false
      this.selectedRole = []
      this.selectedRoleName = ''
      this.selectedRoleTable.forEach(item => {
        this.selectedRole.push(item)
      })
    },
    /**
     * 人员类型变化回调,清除所有已选择数据
     * */
    personTypeChange() {
      // 清除选择用户
      this.selectedPeople = []
      this.selectedPeopleTable = []
      // 清除选择角色
      this.selectedRole = []
      this.selectedRoleTable = []
      this.selectedRoleName = ''
      this.selectedPeopleName = ''
      // 清除部门集合
      this.selectedDept = []
      this.deptOption = ''
    },
    /**
     * 节点类型变化回调,清除所有已选择数据
     * */
    togetherSignChange() {
      // 清除选择用户
      this.selectedPeople = []
      this.selectedPeopleTable = []
      // 清除选择角色
      this.selectedRole = []
      this.selectedRoleTable = []
      this.selectedRoleName = ''
      this.selectedPeopleName = ''
      // 清除部门集合
      this.selectedDept = []
      this.deptOption = ''
      if (this.togetherSign === 'multiple') {
        this.personType = 'people'
      }
    },
    peopleSelectionChangeAll(data) {
      this.selectedPeopleTable = []
      data.forEach(item => {
        this.peopleSelectionChange(data, item)
      })
    },
    /**
     * 人员选择回调函数
     * */
    peopleSelectionChange(data, row) {
      let tempFlag = false
      data.forEach(item => {
        if (item.userId === row.userId) {
          tempFlag = true
        }
      })
      if (tempFlag) {
        this.selectedPeopleTable.push(row)
      } else {
        let tempIndex = ''
        for (let i = 0; i < this.selectedPeopleTable.length; i++) {
          if (this.selectedPeopleTable[i].userId === row.userId) {
            tempIndex = i
            break
          }
        }
        this.selectedPeopleTable.splice(tempIndex, 1)
      }
    },
    roleSelectionChangeAll(data) {
      this.selectedRoleTable = []
      data.forEach(item => {
        this.roleSelectionChange(data, item)
      })
    },
    /**
     * 角色选择回调函数
     * */
    roleSelectionChange(data, row) {
      let tempFlag = false
      data.forEach(item => {
        if (item.roleId === row.roleId) {
          tempFlag = true
        }
      })
      if (tempFlag) {
        this.selectedRoleTable.push(row)
      } else {
        let tempIndex = ''
        for (let i = 0; i < this.selectedRoleTable.length; i++) {
          if (this.selectedRoleTable[i].roleId === row.roleId) {
            tempIndex = i
            break
          }
        }
        this.selectedRoleTable.splice(tempIndex, 1)
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = []
        this.deptOptions = this.deptOptions.concat(response.data)
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data, checked) {
      if (checked) {
        this.selectedDept.push(data)
      } else {
        this.selectedDept = this.selectedDept.filter(item => {
          if (data.id !== item.id) {
            return true
          }
        })
      }
    },
    getPeopleByuserName() {
      this.currentPage = 1
      this.getList()
    },
    // 获取分页数据
    getList() {
      // 发起数据获取请求
      const that = this
      const params = { page: this.currentPage, rows: this.pageSize }
      if (this.dialogPeopleVisible) {
        const userIdList = that.selectedPeople.map(item => {
          return item.userId
        })
        if (this.searchForm.userName) {
          params['userName'] = this.searchForm.userName
        }
        if (userIdList.length > 0) {
          params['persionId'] = userIdList
        }
        queryUserByPage(params).then(res => {
          that.peopleTableData = res
          that.$nextTick(() => {
            if (that.selectedPeople.length > 0) {
              that.selectedPeople.forEach(row => {
                that.peopleTableData.rows.forEach(item => {
                  if (row.userId === item.userId) {
                    that.$refs.peopleSelectTable.toggleRowSelection(item)
                    row['userName'] = item.userName
                  }
                })
              })
            }
          })
        })
      } else {
        const roleIdList = that.selectedRole.map(item => {
          return item.roleId
        })
        if (this.searchForm.roleName) {
          params['userName'] = this.searchForm.roleName
        }
        if (roleIdList.length > 0) {
          params['persionId'] = roleIdList
        }
        queryRoleByPage(params).then(res => {
          that.roleTableData = res
          that.$nextTick(() => {
            if (that.selectedRole.length > 0) {
              that.selectedRole.forEach(row => {
                that.roleTableData.rows.forEach(item => {
                  if (row.roleId === item.roleId) {
                    that.$refs.roleSelectTable.toggleRowSelection(item)
                    row['roleName'] = item.roleName
                  }
                })
              })
            }
          })
        })
      }
    },
    // 页容量
    handleSizeChange: function(size) {
      this.pageSize = size
      this.getList()
      // this.getListE();
    },
    // 点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getList()
      // this.getListE();
    },
    // 多选数据
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (const i in val) {
        this.multipleSelection.push(val[i].businessId)
      }
    },
    openFullScreenLoading(content) {
      this.fullScreenLoading = this.$loading({
        lock: true,
        text: content || '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    closeFullScreenLoading() {
      if (this.fullScreenLoading) {
        this.fullScreenLoading.close()
      }
    },
    initProcessInfo() {
      const that = this
      const params = {
        businessId: this.$route.query.businessId
      }
      this.openFullScreenLoading()
      queryWfProcessDetail(params).then((res) => {
        that.processData = res.data
        that.testName = that.processData.pmsProcess.processName
        that.processId = that.processData.pmsProcess.businessId
        that.templateId = that.processData.pmsProcess.templateId
        that.processData.activitiml.pmsProcessFieldInfoResDTO = that
          .processData.activitiml.pmsProcessFieldInfoResDTO
          ? that.processData.activitiml.pmsProcessFieldInfoResDTO
          : []
        that.processData.activitiml.pmsProcessRoles = that.processData
          .activitiml.pmsProcessRoles
          ? that.processData.activitiml.pmsProcessRoles
          : []
        if (that.processData.activitiml.pmsProcessFieldInfoResDTO.length === 0) {
          that.processData.activitiml.pmsProcessRoles = []
        }
        that.elementsObj = that.processData.activitiml.pmsProcessRoles.filter(
          (item) => {
            that.processData.activitiml.pmsProcessFieldInfoResDTO.forEach(
              (x) => {
                if (x.taskId === item.taskId) {
                  item['pmsProcessFieldResults'] = x.pmsProcessFieldResults
                  return item
                }
              }
            )
            return item
          }
        )
        that.processGatewayList = that.processData.activitiml
          .processGatewayList
          ? that.processData.activitiml.processGatewayList
          : []
        that.bpmnXml = res.data.activitiml.xmlPath
        this.closeFullScreenLoading()
        this.createNewDiagram()
      })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
          this.closeFullScreenLoading()
          this.createNewDiagram()
        })
    },
    // group 中的显示隐藏变化时 子字段全部跟着变化
    GroupHideDeal(row, val) {
      if (row.fieldType === 'group') {
        for (let i = 0, l = row.fieldDefault.length; i < l; i++) {
          row.fieldDefault[i].isRead = val
        }
      }
    },
    GroupReadOnlyDeal(row, val) {
      if (row.fieldType === 'group') {
        for (let i = 0, l = row.fieldDefault.length; i < l; i++) {
          row.fieldDefault[i].isEdit = val
        }
      }
    },
    setAllIsEadit(val) {
      const tableData = this.tableData
      for (let i = 0, k = tableData.length; i < k; i++) {
        if (tableData[i].isEdit !== '2') {
          tableData[i].isEdit = val
        }
        // eslint-disable-next-line no-mixed-spaces-and-tabs
        if (tableData[i].fieldType === 'group') {
          // eslint-disable-next-line no-mixed-spaces-and-tabs
          for (let m = 0, n = tableData[i].fieldDefault.length; m < n; m++) {
            if (tableData[i].fieldDefault[m].isEdit !== '2') {
              tableData[i].fieldDefault[m].isEdit = val
            }
          }
        }
      }
    },
    setAllIsFlag(val) {
      const tableData = this.tableData
      for (let i = 0, k = tableData.length; i < k; i++) {
        tableData[i].isRead = val
        // eslint-disable-next-line no-mixed-spaces-and-tabs
        if (tableData[i].fieldType === 'group') {
          // eslint-disable-next-line no-mixed-spaces-and-tabs
          for (let m = 0, n = tableData[i].fieldDefault.length; m < n; m++) {
            tableData[i].fieldDefault[m].isRead = val
          }
        }
      }
    },
    onChange(file) {
      const reader = new FileReader()
      const that = this
      reader.readAsText(file.raw)
      reader.onload = function() {
        if (this.result) {
          that.bpmnXml = this.result
          that.openDiagram(this.result)
        }
      }
    },
    download() {
      // const that = this
      this.modeler.saveXML({ format: true }, function(err, xml) {
        if (err) {
          return 'could not save BPMN 2.0 diagram' + err
        }
        if (xml) {
          var a = document.createElement('a')
          a.href =
            'data:application/bpmn20-xml;charset=UTF-8,' +
            encodeURIComponent(xml)
          a.download = 'diagram.bpmn'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          a = null
        }
      })
    },
    // 保存表达式
    saveExpression() {
      const that = this
      this.processGatewayList.forEach((item) => {
        if (item.transitionId === that.currentElement) {
          item.conditions = that.expression
        }
      })
    },
    // 保存工单权限
    savePower() {
      const that = this
      this.elementsObj.forEach((item) => {
        if (item.taskId === that.currentElement) {
          item.pmsProcessFieldResults = []
          item.pmsProcessFieldResults.splice(0, 0, ...that.tableData)
        }
      })
    },
    // 保存审批人
    saveRoles() {
      const that = this
      this.elementsObj.forEach((item) => {
        if (item.taskId === that.currentElement) {
          // 根据personType的选择 0人 1角色
          item['isRole'] = that.personType === 'people' ? '0' : '1'
          item['personId'] = that.personType === 'people' ? that.selectedPeopleIdString : that.selectedRoleIdString
          item['isDept'] = that.deptOption ? that.deptOption : '1'
          item['deptId'] = that.checkedKey.toString()
          item['taskName'] = that.currentElementName
          item['processIdS'] = that.processIdS.toString()
          let array = []
          if (that.personType === 'people') {
            array = this.selectedPeople.map(item => {
              return item.userName
            })
          } else {
            array = this.selectedRole.map(item => {
              return item.roleName
            })
          }
          if (array[0]) {
            item['name'] = array.toString()
          }
          item['countersignCount'] = ''
          item['theSign'] = ''
          item['listenEntityPath'] = that.listenEntityPath
          if (that.togetherSign === 'add') {
            item['isCountersign'] = '2'
          } else if (that.togetherSign === 'multiple') {
            item['isCountersign'] = '1'
          } else {
            item['isCountersign'] = '0'
          }
          item['isApprove'] = that.isApprove
          item['countersignCount'] = that.countersignCount
          item['theSign'] = that.theSign
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    // 保存xml
    saveAll() {
      let temp = true
      if (this.$refs['showPanelOne']) {
        if (this.isApprove === '1' && this.countersignCount === '') {
          temp = false
          this.$message.error('请填写审批变量')
        } else if (this.togetherSign === 'multiple' && this.theSign === '') {
          temp = false
          this.$message.error('请填写会签变量')
        }
      }
      if (temp) {
        this.openFullScreenLoading('流程模型正在存储,请稍后...')
        this.modeler.saveXML({ format: true }, (err, xml) => {
          if (err) {
            this.closeFullScreenLoading()
            alert('could not save BPMN 2.0 diagram' + err)
            return 'could not save BPMN 2.0 diagram' + err
          }
          this.bpmnXml = xml
          const parser = new DOMParser()
          const xmlDoc = parser.parseFromString(xml, 'text/xml')
          // 提取数据
          const countrys = xmlDoc.getElementsByTagName('userTask')
          const actidArray = []
          for (let key = 0; key < countrys.length; key++) {
            actidArray.push(countrys[key].id)
          }
          const tempEleArray = []
          for (let i = 0; i < this.elementsObj.length; i++) {
            for (let k = 0; k < actidArray.length; k++) {
              if (this.elementsObj[i].taskId === actidArray[k]) {
                tempEleArray.push(this.elementsObj[i])
              }
            }
            if (this.elementsObj[i].taskId.indexOf('Event') > -1 || this.elementsObj[i].taskId.indexOf('Flow') > -1) {
              tempEleArray.push(this.elementsObj[i])
            }
          }
          this.elementsObj = tempEleArray
          this.toSaveProccess()
          return xml
        })
      }
    },
    toSaveProccess() {
      if (!this.fullScreenLoading) {
        this.openFullScreenLoading()
      }
      const that = this
      const roleList = []
      const permissionJson = []
      this.elementsObj.forEach((item) => {
        if (item.processIdS) {
          roleList.push({
            processId: item.processId,
            taskId: item.taskId,
            taskName: item.taskName,
            isRole: item.isRole,
            personId: item.personId,
            isDept: item.isDept,
            deptId: item.deptId,
            isApprove: item.isApprove,
            isCountersign: item.isCountersign,
            countersignCount: item.countersignCount,
            theSign: item.theSign,
            processIdS: item.processIdS,
            listenEntityPath: item.listenEntityPath
          })
        } else {
          roleList.push({
            processId: item.processId,
            taskId: item.taskId,
            taskName: item.taskName,
            isRole: item.isRole,
            personId: item.personId,
            isDept: item.isDept,
            isApprove: item.isApprove,
            isCountersign: item.isCountersign,
            countersignCount: item.countersignCount,
            theSign: item.theSign,
            deptId: item.deptId,
            listenEntityPath: item.listenEntityPath
          })
        }
        // 处理每个任务节点的字段配置
        if (item.pmsProcessFieldResults) {
          item.pmsProcessFieldResults.forEach((t) => {
            permissionJson.push({
              processId: t.processId,
              taskId: t.taskId,
              fieldId: t.fieldId,
              isEdit: t.isEdit,
              isRead: t.isRead
            })
            // 如果该字段为分组字段，则处理其子字段
            if (t.fieldDefault && t.fieldDefault instanceof Array) {
              t.fieldDefault.forEach((son) => {
                permissionJson.push({
                  processId: son.processId,
                  taskId: son.taskId,
                  fieldId: son.fieldId,
                  isEdit: son.isEdit,
                  isRead: son.isRead
                })
              })
            }
          })
        }
      })
      const params = {
        businessId: this.processData.pmsProcess.businessId,
        xmlJson: this.bpmnXml,
        roleList: JSON.stringify(roleList),
        permissionJson: JSON.stringify(permissionJson),
        gatewayList: that.processGatewayList.length > 0 ? JSON.stringify(that.processGatewayList) : ''
      }
      saveWfProcess(params).then((res) => {
        that.closeFullScreenLoading()
        that.$message({
          message: res.message || '保存成功',
          type: 'success'
        })
        that.$router.go(-1)
      })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
          that.closeFullScreenLoading()
        })
    },
    /**
     * 获取所有角色
     * */
    getAllRole() {
      const params = {}
      const that = this
      this.$axios
        .get('/task/tb-role/getRoleAll', {
          params,
          baseURL: process.env.VUE_APP_API2
        })
        .then((res) => {
          const tempArr = []
          res.data[0].roles.forEach((item) => {
            tempArr.push({ label: item.name, value: item.id })
          })
          that.roleOptions = []
          that.roleOptions.splice(0, 0, ...tempArr)
          // this.$router.push("/templates")
        })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
        })
    },
    /**
     * 获取所有阶段
     * */
    getAllStage() {
      const params = {
        businessId: this.templateId
      }
      const that = this
      // let getApi = that.processData.pmsProcess.templateType === 'service' ? '/sdictionary/getServiceStage' : '/sdictionary/getProjectStage'
      this.$axios
        .get('/sdictionary/getStageByTemplateType', {
          params,
          baseURL: process.env.VUE_APP_API2
        })
        .then((res) => {
          const tempArr = []
          res.data.forEach((item) => {
            tempArr.push({ label: item.name, value: item.value })
          })
          that.stageOptions = []
          that.stageOptions.splice(0, 0, ...tempArr)
          // this.$router.push("/templates")
        })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
        })
    },
    /**
     * 初始化工作流
     */
    createNewDiagram() {
      var customTranslateModule = {
        translate: ['value', customTranslate]
      }
      this.container = this.$refs.canvas
      this.modeler = new BpmnModdle({
        container: '#canvas',
        additionalModules: [customTranslateModule, customControlsModule]
      })
      let defaultXml = `<?xml version="1.0" encoding="UTF-8"?>
          <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
            <bpmn2:process id="p${this.processId}" isExecutable="true">
              <bpmn2:startEvent id="StartEvent_1"/>
            </bpmn2:process>
            <bpmndi:BPMNDiagram id="BPMNDiagram_1">
              <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
                <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
                  <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
                </bpmndi:BPMNShape>
              </bpmndi:BPMNPlane>
            </bpmndi:BPMNDiagram>
          </bpmn2:definitions>`
      if (this.bpmnXml) {
        // 有数据
        defaultXml = this.bpmnXml
      }
      this.openDiagram(defaultXml)
    },
    /**
     * 建模器导入xml
     * @param xml
     * @param callback
     */
    openDiagram(xml, callback) {
      this.modeler.importXML(xml, (err) => {
        if (err) {
          this.isErro = true
          this.container
            .getElementsByClassName('error')
            .getElementsByTagName('pre').innerText = err.message
          console.error(err)
        } else {
          this.isErro = false
          // 添加事件监听
          this.elementClickHandler()
          if (callback) {
            callback()
          }
        }
      })
    },
    /**
     * 添加bpmn-element click 事件
     */
    elementClickHandler() {
      const self = this
      // 单击点图关闭
      this.modeler.on('element.click', HIGH_PRIORITY, (event) => {
        event.originalEvent.preventDefault()
        event.originalEvent.stopPropagation()
        const { element } = event
        let temp = false
        if (this.$refs['showPanelOne']) {
          if (this.isApprove === '1' && this.countersignCount === '') {
            temp = true
            this.$message.error('请填写审批变量')
          } else if (this.togetherSign === 'multiple' && this.theSign === '') {
            temp = true
            this.$message.error('请填写会签变量')
          }
        }
        if (element.type === 'bpmn:Process' && !temp) {
          self.currentElement = element.id
          self.currentElementType = element.type
          self.currentElementName = element.businessObject.name
          self.currentElementObj = element
        }
      })
      this.modeler.on('shape.removed', HIGH_PRIORITY, (event) => {
        let tempIndex = ''
        for (let i = 0; i < this.elementsObj.length; i++) {
          if (this.elementsObj[i].taskId === event.id) {
            tempIndex = i
            break
          }
        }
        this.elementsObj.splice(tempIndex, 1)
      })
      // 双击触发事件
      this.modeler.on('element.dblclick', HIGH_PRIORITY, (event) => {
        event.originalEvent.preventDefault()
        event.originalEvent.stopPropagation()
        const { element } = event
        let temp = false
        if (this.$refs['showPanelOne']) {
          if (this.isApprove === '1' && this.countersignCount === '') {
            temp = true
            this.$message.error('请填写审批变量')
          } else if (this.togetherSign === 'multiple' && this.theSign === '') {
            temp = true
            this.$message.error('请填写会签变量')
          }
        }
        if (!temp) {
          self.watchFlag = false // 不允许监听
          self.currentElement = element.id
          self.currentElementType = element.type
          self.currentElementName = element.businessObject.name
          self.currentElementObj = element
          if (element.type === 'bpmn:UserTask') {
            self.watchFlag = true // 允许监听
            let fieldList = self.elementsObj.find(
              (item) => item.taskId === self.currentElement
            )
            // 开始结点首次点击时，赋值表单数据为 只读
            if (self.currentElementType === 'bpmn:UserTask' && !fieldList) {
              this.elementSetValue('0', '1')
              fieldList = self.elementsObj.find(
                (item) => item.taskId === self.currentElement
              )
            }/* else {
           /!* fieldList.pmsProcessFieldResults = self.dealGroup(
              fieldList.pmsProcessFieldResults
            )*!/
          }*/
            self.selectedRole = []
            self.selectedRoleTable = []
            self.selectedDept = []
            self.deptOption = ''
            self.personType = 'people'
            self.selectedPeople = []
            self.selectedPeopleTable = []
            self.togetherSign = 'normal'
            self.isApprove = '0'
            self.countersignCount = ''
            self.theSign = ''

            if (fieldList.isApprove !== undefined && fieldList.isApprove !== null) {
              self.isApprove = fieldList.isApprove.toString()
            }
            if (fieldList.countersignCount !== undefined && fieldList.countersignCount !== null) {
              self.countersignCount = fieldList.countersignCount
            }
            if (fieldList.theSign !== undefined && fieldList.theSign !== null) {
              self.theSign = fieldList.theSign
            }
            if (fieldList.isCountersign !== undefined && fieldList.isCountersign !== null) {
              if (fieldList.isCountersign.toString() === '2') {
                self.togetherSign = 'add'
              } else if (fieldList.isCountersign.toString() === '1') {
                self.togetherSign = 'multiple'
              } else {
                self.togetherSign = 'normal'
              }
            }
            // 判断选人还是角色 1角色 0用户
            if (fieldList.isRole === '1') {
              // 角色默认值赋值
              self.personType = 'role'
              self.selectedRoleName = fieldList.name
              if (fieldList.personId) {
                const tempRole = fieldList.personId.split(',').map(item => {
                  return { roleId: parseInt(item) }
                })
                self.selectedRole.splice(0, 0, ...tempRole)
                self.selectedRoleTable.splice(0, 0, ...tempRole)
              }
              if (fieldList.deptId) {
                const tempDept = fieldList.deptId.split(',').map(item => {
                  return { id: parseInt(item) }
                })
                self.selectedDept.splice(0, 0, ...tempDept)
              }
              if (fieldList.isDept !== null && fieldList.isDept !== undefined) {
                self.deptOption = fieldList.isDept
              }
            } else if (fieldList.isRole === '0') {
              // 人员默认值
              self.personType = 'people'
              self.selectedPeopleName = fieldList.name
              if (fieldList.personId) {
                const tempUser = fieldList.personId.split(',').map(item => {
                  return { userId: parseInt(item) }
                })
                self.selectedPeople.splice(0, 0, ...tempUser)
                self.selectedPeopleTable.splice(0, 0, ...tempUser)
              }
            }
            self.tableData = []
            self.tableData.splice(0, 0, ...fieldList.pmsProcessFieldResults)
          } else if (element.type === 'bpmn:SequenceFlow') {
            let lineList = self.processGatewayList.find(
              (item) => item.transitionId === self.currentElement
            )
            if (!lineList) {
              self.processGatewayList.push({
                transitionId: self.currentElement,
                processId: self.processId,
                conditions: ''
              })
              lineList = self.processGatewayList.find(
                (item) => item.transitionId === self.currentElement
              )
            }
            self.expression = lineList.conditions
          } else if (element.type === 'bpmn:EndEvent') {
            let endList = self.elementsObj.find(
              (item) => item.taskId === self.currentElement
            )
            if (!endList) {
              this.elementSetValue('0', '1')
              endList = self.elementsObj.find(
                (item) => item.taskId === self.currentElement
              )
            }
            if (endList.listenEntityPath !== undefined && endList.listenEntityPath !== null) {
              self.listenEntityPath = endList.listenEntityPath
            }
          }
        }
      })
    },
    // 处理分组
    dealGroup(fields) {
      const groupMap = {}
      const topFields = []
      const resultArray = []
      fields.sort((a, b) => {
        return a.fieldOrder - b.fieldOrder
      })
      // 遍历 自身的字段数组parentPmsFields，剔除掉所有group子字段（parentId有值）、并放入映射中
      fields.forEach((field, index) => {
        // 将group字段中value未修改前放入 一个字段数组中、方便“更新保存”时比对“group字段本身（不包括子字段）”是否改变
        if (field.parentId) {
          if (!groupMap[field.parentId]) {
            groupMap[field.parentId] = []
          }
          // 分组内的子字段去除field.fieldDefault，以免熏染table报错
          delete field.fieldDefault
          groupMap[field.parentId].push(field)
        } else {
          topFields.push(field)
        }
      })
      topFields.forEach((field) => {
        if (field.fieldType === 'group') {
          // field.value中存放的应该是groupId ,然后从映射groupMap去除该id下的group子字段数组
          // 如果topFields中已处理好分组字段，则groupMap中可能为空对象，所以此处要添加判断
          if (
            field.fieldDefault instanceof Array &&
            field.fieldDefault.length > 0
          ) {
            // 此时为，可能fields中已处理好数组
          } else {
            field.fieldDefault = groupMap[field.fieldDefault] || []
          }
        } else {
          field.fieldDefault = []
        }
        if (
          field.fieldDefault &&
          field.fieldDefault instanceof Array &&
          field.fieldDefault.length > 0
        ) {
          field.children = field.fieldDefault
        }
        resultArray.push(field)
      })
      return resultArray
    },
    /**
     * 节点初始化赋值
     */
    elementSetValue(edit, flag) {
      const that = this
      const pmsFiedlList = JSON.parse(
        JSON.stringify(this.processData.pmsFieldList)
      )
      const groupDealArray = this.dealGroup(pmsFiedlList)
      const initData = groupDealArray.map((field) => {
        if (
          field.fieldDefault instanceof Array &&
          field.fieldDefault.length > 0
        ) {
          field.fieldDefault.forEach((item, index) => {
            field.fieldDefault[index] = {
              fieldId: item.businessId,
              fieldName: item.fieldName,
              fieldType: item.fieldType,
              isEdit: field.isEdit || edit,
              isRead: flag,
              taskId: that.currentElement,
              processId: that.processId
            }
          })
        } else {
          delete field.fieldDefault
        }
        return {
          fieldDefault: field.fieldDefault,
          fieldId: field.businessId,
          fieldName: field.fieldName,
          fieldType: field.fieldType,
          isEdit: field.isEdit || edit,
          isRead: flag,
          taskId: that.currentElement,
          processId: that.processId
        }
      })
      const data = {
        processId: this.processId,
        taskId: this.currentElement,
        pmsProcessFieldResults: initData
      }
      const pmsProcessRoleData = {
        processId: this.processId,
        taskId: this.currentElement,
        taskName: this.currentElementName
      }
      this.processData.activitiml.pmsProcessFieldInfoResDTO.push(data)
      this.processData.activitiml.pmsProcessRoles.push(pmsProcessRoleData)
      that.elementsObj = that.processData.activitiml.pmsProcessRoles.filter(
        (item) => {
          that.processData.activitiml.pmsProcessFieldInfoResDTO.forEach((x) => {
            if (x.taskId === item.taskId) {
              item['pmsProcessFieldResults'] = x.pmsProcessFieldResults
              return item
            }
          })
          return item
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  .opt-button{
    margin: 10px 0;
  }
  .select-string{
    display: block;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  .person-type{
    margin-bottom: 16px;
    /*margin-left: 26px;*/
  }
  .laypage-group{
    text-align: right;
  }
.task-nav {
  z-index: 997;
  width: 100%;
  height: 60px;
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0;
  background-color: $color-theme !important;
  position: relative;
}
.return-btn {
  margin-left: 20px;
}

.save-btn {
  margin-right: 20px;
  display: inline-block;
}
.task-nav-item {
  width: 100%;
}
.task-template-name {
  font-weight: bolder;
  color: #ffffff;
  padding-left: 10px;
}
.canvas-platform {
  height: calc(100vh - 150px);
  background: #f4f4f4;
}
.custom-panel {
  position: absolute;
  top: 60px;
  bottom: 0;
  right: 15px;
  width: 35vw;
  z-index: 101;
  border-left: 1px solid #ccc;
  /*height: 85%;*/
  background-color: #ffffff;
  padding-left: 1vw;
  padding-top: 1vh;
}
.element-name {
  background-color: #fff;
  height: 30px;
  line-height: 22px;
  display: flex;
  align-items: center;
  padding: 20px 0px;
}

.custom-panel-btn {
  /* position: relative;
       bottom: 20px;*/
  width: calc(100% - 50px);
  text-align: center;
}

.custom-panel-field-list {
  overflow: auto;
  height: 100%;
  width: 550px;
}
  .laypage-group{
    margin: 10px 0;
  }
  .person-form{
    margin-top: 10px;
  }
</style>
<style lang="stylus">
  .bpmn-icon-lasso-tool.entry,.bpmn-icon-space-tool.entry,.bpmn-icon-intermediate-event-none.entry,.bpmn-icon-task.entry,.bpmn-icon-subprocess-expanded.entry,.bpmn-icon-group.entry,.bpmn-icon-participant.entry,.bpmn-icon-data-store.entry,.bpmn-icon-data-object.entry,.bpmn-icon-service-task.entry,.entry.bpmn-icon-text-annotation,.bjs-powered-by{
    display: none;
  }
  .entry.bpmn-icon-start-event-message,.entry.bpmn-icon-start-event-timer,.entry.bpmn-icon-start-event-condition,.entry.bpmn-icon-start-event-signal,.djs-popup-header,.entry.bpmn-icon-send,.entry.bpmn-icon-receive,.entry.bpmn-icon-manual,.entry.bpmn-icon-business-rule,.entry.bpmn-icon-service,.entry.bpmn-icon-script,.entry.bpmn-icon-call-activity,.entry.bpmn-icon-subprocess-collapsed,.entry.bpmn-icon-gateway-or,.entry.bpmn-icon-gateway-complex,.entry.bpmn-icon-gateway-eventbased,.entry.bpmn-icon-end-event-message,.entry.bpmn-icon-end-event-escalation,.entry.bpmn-icon-end-event-error,.entry.bpmn-icon-end-event-compensation,.entry.bpmn-icon-end-event-signal,.entry.bpmn-icon-end-event-terminate{
    display: none;
  }
  .bpmn{
    .el-table th{
      background-color: rgba(159,223,252,0.2);
      color: #333333;
      font-size 14px
      font-weight: bold;
      height 44px
      padding: 6px 0;
    }
    .el-table td{
      color: #333333;
      font-size 14px
      padding: 6px 0;
    }
    .el-dialog__wrapper{
      .el-form .el-form-item {
        margin-bottom: 16px;
      }
    }
    .el-tabs__header{
      margin 0
    }
    .el-dialog__body{
      padding: 10px 25px 0px 25px;
    }
  }
</style>
