@ -0,0 +1,43 @@ |
|||||
|
// 文章/评论管理api
|
||||
|
import service from '@/utils/request' |
||||
|
|
||||
|
// @Tags api
|
||||
|
// @Summary 查询文档评论 分页
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const getdiscussfilemsg = (data) => { |
||||
|
return service({ |
||||
|
url: '/archive/getdiscussfilemsg', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 文章 分页
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const archivefilelist = (data) => { |
||||
|
return service({ |
||||
|
url: '/archive/archivefilelist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,460 @@ |
|||||
|
// 数据提报
|
||||
|
import service from '@/utils/request' |
||||
|
|
||||
|
// @Tags api
|
||||
|
// @Summary 查询考核类别 分页
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const dutyclasslist = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/dutyclasslist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 添加考核类别 分页
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const adddutyclass = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/adddutyclass', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 查询考核类别详情 分页
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const getdutyclassinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/getdutyclassinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 编辑考核类别内容
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitedutyclassinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eitedutyclassinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 删除或改变考核类别状态
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const statedutyclass = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/statedutyclass', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 考核项目列表
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const assessList = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/assessList', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 添加考核项目
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const addassessinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/addassessinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 获取考核项目详情
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const getassessinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/getassessinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 修改考核项目内容
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eiteassessinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eiteassessinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 删除或变更考核项目状态
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eiteassessstate = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eiteassessstate', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 具体职责列表
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const dutylist = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/dutylist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 添加具体职责
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const adddutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/adddutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 获取具体职责详情
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const getdutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/getdutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 编辑职责详情
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitedutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eitedutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 修改状态或删除具体职责
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitedutystate = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eitedutystate', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 获取集团详情
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const grouplist = (data) => { |
||||
|
return service({ |
||||
|
url: '/group/grouplist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 获取员工列表
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const stafflist = (data) => { |
||||
|
return service({ |
||||
|
url: '/staff/stafflist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 部门考核项目列表
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const specdutylist = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/specdutylist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 添加部门考核项目
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const addspecdutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/addspecdutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 获取部门考核项目详情
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const getspecdutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/getspecdutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 编辑部门考核项目详情
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitespecdutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eitespecdutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 修改状态或删除具体部门考核项目
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitespecdutystate = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eitespecdutystate', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 添加部门考核项目详情(副本)
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const adddepartdutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/adddepartdutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 修改具体部门考核项目详情(副本)
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitedepartdutyinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/duty/eitedepartdutyinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,156 @@ |
|||||
|
// 健康上报api
|
||||
|
import service from '@/utils/request' |
||||
|
|
||||
|
// @Tags api
|
||||
|
// @Summary 获取文档栏目分类 不分页
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const archivetypelist = (data) => { |
||||
|
return service({ |
||||
|
url: 'archive/archivetypelist', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 新建栏目
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const addarchivetype = (data) => { |
||||
|
return service({ |
||||
|
url: '/archive/addarchivetype', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 获取单个栏目详细信息
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const getarchiveinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/archive/getarchiveinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 改变栏目状态
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitearchivestate = (data) => { |
||||
|
return service({ |
||||
|
url: '/archive/eitearchivestate', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 修改栏目信息
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitearchiveinfo = (data) => { |
||||
|
return service({ |
||||
|
url: '/archive/eitearchiveinfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 添加被通知人信息
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const addnoticeuser = (data) => { |
||||
|
return service({ |
||||
|
url: '/wechathealth/addnoticeuser', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 修改被通知人信息
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const eitenoticeuser = (data) => { |
||||
|
return service({ |
||||
|
url: '/wechathealth/eitenoticeuser', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
// @Tags api
|
||||
|
// @Summary 删除被通知人信息
|
||||
|
// @Security ApiKeyAuth
|
||||
|
// @accept application/json
|
||||
|
// @Produce application/json
|
||||
|
// @Param data body modelInterface.PageInfo true "分页获取用户列表"
|
||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||
|
// @Router /api/getApiList [post]
|
||||
|
// {
|
||||
|
// page int
|
||||
|
// pageSize int
|
||||
|
// }
|
||||
|
export const delnoticeuser = (data) => { |
||||
|
return service({ |
||||
|
url: '/wechathealth/delnoticeuser', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,202 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn"> |
||||
|
<bpmn:process id="test" name="test" isExecutable="true"> |
||||
|
<bpmn:startEvent id="StartEvent_1"> |
||||
|
<bpmn:outgoing>SequenceFlow_07f1sez</bpmn:outgoing> |
||||
|
</bpmn:startEvent> |
||||
|
<bpmn:exclusiveGateway id="ExclusiveGateway_0io7r1h" name="删选会员"> |
||||
|
<bpmn:incoming>SequenceFlow_07f1sez</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_15ow6gv</bpmn:outgoing> |
||||
|
<bpmn:outgoing>SequenceFlow_0d1io4v</bpmn:outgoing> |
||||
|
<bpmn:outgoing>SequenceFlow_1rcakng</bpmn:outgoing> |
||||
|
</bpmn:exclusiveGateway> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_07f1sez" sourceRef="StartEvent_1" targetRef="ExclusiveGateway_0io7r1h" /> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_15ow6gv" name="yes" sourceRef="ExclusiveGateway_0io7r1h" targetRef="ExclusiveGateway_17g4cww"> |
||||
|
<bpmn:conditionExpression xsi:type="bpmn:tFormalExpression">isTrue</bpmn:conditionExpression> |
||||
|
</bpmn:sequenceFlow> |
||||
|
<bpmn:serviceTask id="ServiceTask_tagDelegate_0bjokq0" name="添加标签" camunda:delegateExpression="addtag"> |
||||
|
<bpmn:extensionElements> |
||||
|
<camunda:properties> |
||||
|
<camunda:property name="tagnames" value="老人" /> |
||||
|
<camunda:property name="tagnames1" value="老人1" /> |
||||
|
</camunda:properties> |
||||
|
</bpmn:extensionElements> |
||||
|
<bpmn:incoming>SequenceFlow_0y1iisj</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_1gwuen1</bpmn:outgoing> |
||||
|
</bpmn:serviceTask> |
||||
|
<bpmn:endEvent id="EndEvent_0nqbnar" name="结束"> |
||||
|
<bpmn:incoming>SequenceFlow_1gwuen1</bpmn:incoming> |
||||
|
<bpmn:incoming>SequenceFlow_0dissda</bpmn:incoming> |
||||
|
</bpmn:endEvent> |
||||
|
<bpmn:exclusiveGateway id="ExclusiveGateway_17g4cww" name="筛选未发券会员"> |
||||
|
<bpmn:incoming>SequenceFlow_15ow6gv</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_0jo6785</bpmn:outgoing> |
||||
|
<bpmn:outgoing>SequenceFlow_0dissda</bpmn:outgoing> |
||||
|
</bpmn:exclusiveGateway> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_0jo6785" name="yes" sourceRef="ExclusiveGateway_17g4cww" targetRef="ServiceTask_appPushDelegate_0wulpvm"> |
||||
|
<bpmn:conditionExpression xsi:type="bpmn:tFormalExpression">sendapp</bpmn:conditionExpression> |
||||
|
</bpmn:sequenceFlow> |
||||
|
<bpmn:serviceTask id="ServiceTask_appPushDelegate_0wulpvm" name="发送指定优惠券" camunda:expression="apppush" camunda:resultVariable="app"> |
||||
|
<bpmn:extensionElements> |
||||
|
<camunda:properties> |
||||
|
<camunda:property name="tagNames" value="test" /> |
||||
|
</camunda:properties> |
||||
|
</bpmn:extensionElements> |
||||
|
<bpmn:incoming>SequenceFlow_0jo6785</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_0y1iisj</bpmn:outgoing> |
||||
|
</bpmn:serviceTask> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_0y1iisj" sourceRef="ServiceTask_appPushDelegate_0wulpvm" targetRef="ServiceTask_tagDelegate_0bjokq0" /> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_1gwuen1" sourceRef="ServiceTask_tagDelegate_0bjokq0" targetRef="EndEvent_0nqbnar" /> |
||||
|
<bpmn:exclusiveGateway id="ExclusiveGateway_19yj3fu" name="筛选发短信的会员"> |
||||
|
<bpmn:incoming>SequenceFlow_0d1io4v</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_0yptzdv</bpmn:outgoing> |
||||
|
<bpmn:outgoing>SequenceFlow_17zsv75</bpmn:outgoing> |
||||
|
</bpmn:exclusiveGateway> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_0d1io4v" name="yes" sourceRef="ExclusiveGateway_0io7r1h" targetRef="ExclusiveGateway_19yj3fu"> |
||||
|
<bpmn:conditionExpression xsi:type="bpmn:tFormalExpression">isSend</bpmn:conditionExpression> |
||||
|
</bpmn:sequenceFlow> |
||||
|
<bpmn:serviceTask id="ServiceTask_unTagDelegate_1n4e6i4" name="移除指定标签" camunda:expression="UNtag" camunda:resultVariable="UNtag"> |
||||
|
<bpmn:extensionElements> |
||||
|
<camunda:properties> |
||||
|
<camunda:property name="remove" value="true" /> |
||||
|
</camunda:properties> |
||||
|
</bpmn:extensionElements> |
||||
|
<bpmn:incoming>SequenceFlow_1rcakng</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_0w7hugc</bpmn:outgoing> |
||||
|
</bpmn:serviceTask> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_1rcakng" sourceRef="ExclusiveGateway_0io7r1h" targetRef="ServiceTask_unTagDelegate_1n4e6i4" /> |
||||
|
<bpmn:endEvent id="EndEvent_116t3md"> |
||||
|
<bpmn:incoming>SequenceFlow_0w7hugc</bpmn:incoming> |
||||
|
</bpmn:endEvent> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_0w7hugc" sourceRef="ServiceTask_unTagDelegate_1n4e6i4" targetRef="EndEvent_116t3md" /> |
||||
|
<bpmn:serviceTask id="ServiceTask_shortMessageDelegate_03kenwi" name="f发送指定短信" camunda:delegateExpression="senmessage"> |
||||
|
<bpmn:incoming>SequenceFlow_0yptzdv</bpmn:incoming> |
||||
|
<bpmn:outgoing>SequenceFlow_02m7s7p</bpmn:outgoing> |
||||
|
</bpmn:serviceTask> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_0yptzdv" name="yes" sourceRef="ExclusiveGateway_19yj3fu" targetRef="ServiceTask_shortMessageDelegate_03kenwi"> |
||||
|
<bpmn:conditionExpression xsi:type="bpmn:tFormalExpression">senmessage</bpmn:conditionExpression> |
||||
|
</bpmn:sequenceFlow> |
||||
|
<bpmn:endEvent id="EndEvent_0f4cb85"> |
||||
|
<bpmn:incoming>SequenceFlow_02m7s7p</bpmn:incoming> |
||||
|
<bpmn:incoming>SequenceFlow_17zsv75</bpmn:incoming> |
||||
|
</bpmn:endEvent> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_02m7s7p" sourceRef="ServiceTask_shortMessageDelegate_03kenwi" targetRef="EndEvent_0f4cb85" /> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_17zsv75" sourceRef="ExclusiveGateway_19yj3fu" targetRef="EndEvent_0f4cb85" /> |
||||
|
<bpmn:sequenceFlow id="SequenceFlow_0dissda" sourceRef="ExclusiveGateway_17g4cww" targetRef="EndEvent_0nqbnar" /> |
||||
|
</bpmn:process> |
||||
|
<bpmndi:BPMNDiagram id="BPMNDiagram_1"> |
||||
|
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="test"> |
||||
|
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"> |
||||
|
<dc:Bounds x="102" y="242" width="36" height="36" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNShape id="ExclusiveGateway_0io7r1h_di" bpmnElement="ExclusiveGateway_0io7r1h" isMarkerVisible="true"> |
||||
|
<dc:Bounds x="255" y="235" width="50" height="50" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="258" y="295" width="44" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_07f1sez_di" bpmnElement="SequenceFlow_07f1sez"> |
||||
|
<di:waypoint x="138" y="260" /> |
||||
|
<di:waypoint x="255" y="260" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_15ow6gv_di" bpmnElement="SequenceFlow_15ow6gv"> |
||||
|
<di:waypoint x="280" y="235" /> |
||||
|
<di:waypoint x="280" y="120" /> |
||||
|
<di:waypoint x="335" y="120" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="287" y="175" width="17" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="ServiceTask_tagDelegate_0bjokq0_di" bpmnElement="ServiceTask_tagDelegate_0bjokq0"> |
||||
|
<dc:Bounds x="660" y="80" width="80" height="80" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNShape id="EndEvent_0nqbnar_di" bpmnElement="EndEvent_0nqbnar"> |
||||
|
<dc:Bounds x="882" y="102" width="36" height="36" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="889" y="145" width="22" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNShape id="ExclusiveGateway_17g4cww_di" bpmnElement="ExclusiveGateway_17g4cww" isMarkerVisible="true"> |
||||
|
<dc:Bounds x="335" y="95" width="50" height="50" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="324" y="152" width="77" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_0jo6785_di" bpmnElement="SequenceFlow_0jo6785"> |
||||
|
<di:waypoint x="385" y="120" /> |
||||
|
<di:waypoint x="510" y="120" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="439" y="102" width="17" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="ServiceTask_appPushDelegate_0wulpvm_di" bpmnElement="ServiceTask_appPushDelegate_0wulpvm"> |
||||
|
<dc:Bounds x="510" y="80" width="80" height="80" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_0y1iisj_di" bpmnElement="SequenceFlow_0y1iisj"> |
||||
|
<di:waypoint x="590" y="120" /> |
||||
|
<di:waypoint x="660" y="120" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_1gwuen1_di" bpmnElement="SequenceFlow_1gwuen1"> |
||||
|
<di:waypoint x="740" y="120" /> |
||||
|
<di:waypoint x="882" y="120" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="ExclusiveGateway_19yj3fu_di" bpmnElement="ExclusiveGateway_19yj3fu" isMarkerVisible="true"> |
||||
|
<dc:Bounds x="405" y="235" width="50" height="50" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="386" y="211" width="88" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_0d1io4v_di" bpmnElement="SequenceFlow_0d1io4v"> |
||||
|
<di:waypoint x="305" y="260" /> |
||||
|
<di:waypoint x="405" y="260" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="347" y="242" width="17" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="ServiceTask_unTagDelegate_1n4e6i4_di" bpmnElement="ServiceTask_unTagDelegate_1n4e6i4"> |
||||
|
<dc:Bounds x="340" y="370" width="80" height="80" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_1rcakng_di" bpmnElement="SequenceFlow_1rcakng"> |
||||
|
<di:waypoint x="280" y="285" /> |
||||
|
<di:waypoint x="280" y="410" /> |
||||
|
<di:waypoint x="340" y="410" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="EndEvent_116t3md_di" bpmnElement="EndEvent_116t3md"> |
||||
|
<dc:Bounds x="462" y="392" width="36" height="36" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_0w7hugc_di" bpmnElement="SequenceFlow_0w7hugc"> |
||||
|
<di:waypoint x="420" y="410" /> |
||||
|
<di:waypoint x="462" y="410" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="ServiceTask_shortMessageDelegate_03kenwi_di" bpmnElement="ServiceTask_shortMessageDelegate_03kenwi"> |
||||
|
<dc:Bounds x="540" y="230" width="80" height="80" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_0yptzdv_di" bpmnElement="SequenceFlow_0yptzdv"> |
||||
|
<di:waypoint x="455" y="260" /> |
||||
|
<di:waypoint x="540" y="260" /> |
||||
|
<bpmndi:BPMNLabel> |
||||
|
<dc:Bounds x="489" y="242" width="17" height="14" /> |
||||
|
</bpmndi:BPMNLabel> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNShape id="EndEvent_0f4cb85_di" bpmnElement="EndEvent_0f4cb85"> |
||||
|
<dc:Bounds x="712" y="252" width="36" height="36" /> |
||||
|
</bpmndi:BPMNShape> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_02m7s7p_di" bpmnElement="SequenceFlow_02m7s7p"> |
||||
|
<di:waypoint x="620" y="270" /> |
||||
|
<di:waypoint x="712" y="270" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_17zsv75_di" bpmnElement="SequenceFlow_17zsv75"> |
||||
|
<di:waypoint x="430" y="285" /> |
||||
|
<di:waypoint x="430" y="360" /> |
||||
|
<di:waypoint x="730" y="360" /> |
||||
|
<di:waypoint x="730" y="288" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
<bpmndi:BPMNEdge id="SequenceFlow_0dissda_di" bpmnElement="SequenceFlow_0dissda"> |
||||
|
<di:waypoint x="360" y="95" /> |
||||
|
<di:waypoint x="360" y="-10" /> |
||||
|
<di:waypoint x="900" y="-10" /> |
||||
|
<di:waypoint x="900" y="102" /> |
||||
|
</bpmndi:BPMNEdge> |
||||
|
</bpmndi:BPMNPlane> |
||||
|
</bpmndi:BPMNDiagram> |
||||
|
</bpmn:definitions> |
||||
@ -0,0 +1,36 @@ |
|||||
|
body{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
/*路由切换动画*/ |
||||
|
.router-fade-enter-active { |
||||
|
transition: all 0.3s cubic-bezier(0.6, 0.5, 0.3, 0.1); |
||||
|
} |
||||
|
|
||||
|
.router-fade-leave-active { |
||||
|
transition: all 0.3s cubic-bezier(0.5, 0.5, 0.5, 0.5); |
||||
|
} |
||||
|
|
||||
|
.router-fade-enter { |
||||
|
transform: translateX(-10px); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.router-fade-leave-to { |
||||
|
transform: translateX(50px); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.fl { |
||||
|
float: left; |
||||
|
} |
||||
|
.fr { |
||||
|
float: right; |
||||
|
} |
||||
|
.tl{ |
||||
|
text-align: left; |
||||
|
} |
||||
|
.tr{ |
||||
|
text-align: right; |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
<template> |
||||
|
<!-- 复杂穿梭框(用于选择人员) --> |
||||
|
<div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,137 @@ |
|||||
|
<template> |
||||
|
<!-- 具体职责选择框 --> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-button size="small" @click="showDialog()">选择具体职责</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog title="提示" v-model="dialogVisible" width="60%" :before-close="handleClose"> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="所属考核项目"> |
||||
|
<span> |
||||
|
<el-tag v-if="childInfo.title!=''">{{childInfo.title}}</el-tag> |
||||
|
<projectDialog @checkedInfo="getCheckedInfo"></projectDialog> |
||||
|
</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="dutySearchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<el-table :data="dutyList" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column align="left" label="所属考核项目" prop="parentTitle"/> |
||||
|
<el-table-column align="left" label="具体职责名称" prop="title"/> |
||||
|
<el-table-column align="left" label="考核部门" prop="dumpTitle"/> |
||||
|
<el-table-column align="left" label="考核人" prop="username"/> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button type="primary" round @click="checked(scope.row)">选中</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="dutySearchInfo.page" |
||||
|
:page-size="dutySearchInfo.pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
dutylist, |
||||
|
} from '@/api/dataEntry' |
||||
|
import projectDialog from '@/components/projectDialog/index.vue' |
||||
|
export default { |
||||
|
components: { |
||||
|
projectDialog |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
childInfo:{ |
||||
|
title:'', |
||||
|
}, |
||||
|
total:'', |
||||
|
searchList:{ |
||||
|
page:1, |
||||
|
pagesize:10000, |
||||
|
}, |
||||
|
dutyclasslist:{}, |
||||
|
dutySearchInfo:{ |
||||
|
page: 1, |
||||
|
pageSize: 10, |
||||
|
state:1, |
||||
|
}, |
||||
|
dialogVisible: false, |
||||
|
dutyList:null, |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
this.getdutyList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取选中组件值 |
||||
|
getCheckedInfo(data){ |
||||
|
this.childInfo=data |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.dutySearchInfo.page = 1 |
||||
|
this.dutySearchInfo.pageSize = 10 |
||||
|
this.dutySearchInfo.parentId=this.childInfo.outId |
||||
|
this.getdutyList() |
||||
|
}, |
||||
|
// pagesize改变 |
||||
|
handleSizeChange(val) { |
||||
|
this.dutySearchInfo.pageSize=val |
||||
|
}, |
||||
|
// 页码改变 |
||||
|
handleCurrentChange(val) { |
||||
|
this.dutySearchInfo.page=val |
||||
|
}, |
||||
|
// 点击按钮事件 |
||||
|
showDialog(){ |
||||
|
this.dialogVisible=true; |
||||
|
}, |
||||
|
// 获取具体职责列表 |
||||
|
async getdutyList(){ |
||||
|
const res = await dutylist(this.dutySearchInfo) |
||||
|
this.dutyList=res.data.list; |
||||
|
this.dutySearchInfo.page=res.data.page; |
||||
|
this.dutySearchInfo.pageSize=res.data.pageSize; |
||||
|
this.total=res.data.total; |
||||
|
}, |
||||
|
// 选中 |
||||
|
checked(row){ |
||||
|
this.$emit('checkedInfo',row) |
||||
|
this.dialogVisible=false |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-button size="small" @click="showDialog()">选择考核项目</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog title="提示" v-model="dialogVisible" width="60%" :before-close="handleClose"> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="考核项目名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="projectSearchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="考核项目状态"> |
||||
|
<el-select v-model="projectSearchInfo.state" clearable placeholder="请选择状态"> |
||||
|
<el-option :value=1 label="正常">正常</el-option> |
||||
|
<el-option :value=2 label="禁止">禁止</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> --> |
||||
|
<el-form-item label="所属考核类别"> |
||||
|
<el-select v-model="projectSearchInfo.parentId" clearable placeholder="请选择状态"> |
||||
|
<el-option |
||||
|
v-for="item in dutyclasslist" |
||||
|
:key="item.outId" |
||||
|
:label="item.title" |
||||
|
:value="item.outId"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<!-- <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> --> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<el-table :data="assessList" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> --> |
||||
|
<el-table-column align="left" label="所属考核类别" prop="parentTitle"/> |
||||
|
<el-table-column align="left" label="考核项目名称" prop="title"/> |
||||
|
<el-table-column align="left" label="考核项目说明" prop="content"/> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button type="primary" round @click="checked(scope.row)">选中</el-button> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="projectSearchInfo.page" |
||||
|
:page-size="projectSearchInfo.pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> |
||||
|
</span> --> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
dutyclasslist, |
||||
|
assessList, |
||||
|
} from '@/api/dataEntry' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
projectTitle:'', |
||||
|
total:'', |
||||
|
searchList:{ |
||||
|
page:1, |
||||
|
pagesize:10000, |
||||
|
}, |
||||
|
dutyclasslist:{}, |
||||
|
projectSearchInfo:{ |
||||
|
page: 1, |
||||
|
pageSize: 10, |
||||
|
state:1, |
||||
|
}, |
||||
|
dialogVisible: false, |
||||
|
assessList:null, |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
this.getProjectList(); |
||||
|
this.getDutyclasslist(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
|
||||
|
this.getProjectList() |
||||
|
}, |
||||
|
// pagesize改变 |
||||
|
handleSizeChange(val) { |
||||
|
this.projectSearchInfo.pageSize=val |
||||
|
}, |
||||
|
// 页码改变 |
||||
|
handleCurrentChange(val) { |
||||
|
this.projectSearchInfo.page=val |
||||
|
}, |
||||
|
// 获取考核类别列表 |
||||
|
async getDutyclasslist(){ |
||||
|
const res = await dutyclasslist(this.searchList) |
||||
|
this.dutyclasslist=res.data.list; |
||||
|
}, |
||||
|
// 点击按钮事件 |
||||
|
showDialog(){ |
||||
|
this.dialogVisible=true; |
||||
|
}, |
||||
|
// 获取考核项目列表 |
||||
|
async getProjectList(){ |
||||
|
const res = await assessList(this.projectSearchInfo) |
||||
|
this.assessList=res.data.list; |
||||
|
this.projectSearchInfo.page=res.data.page; |
||||
|
this.projectSearchInfo.pageSize=res.data.pageSize; |
||||
|
this.total=res.data.total; |
||||
|
}, |
||||
|
// 选中 |
||||
|
checked(row){ |
||||
|
this.projectTitle=row.title; |
||||
|
this.$emit('checkedInfo',row) |
||||
|
this.dialogVisible=false |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,178 @@ |
|||||
|
<template> |
||||
|
<div id="userLayout"> |
||||
|
<div class="login_panle"> |
||||
|
<div class="login_panle_form"> |
||||
|
<div class="login_panle_form_title"> |
||||
|
<!-- <img |
||||
|
class="login_panle_form_title_logo" |
||||
|
:src="$GIN_VUE_ADMIN.appLogo" |
||||
|
alt |
||||
|
/> --> |
||||
|
<p class="login_panle_form_title_p">绩效考核用户端登录</p> |
||||
|
</div> |
||||
|
<el-form |
||||
|
ref="loginForm" |
||||
|
:model="loginForm" |
||||
|
:rules="rules" |
||||
|
@keyup.enter="submitForm" |
||||
|
> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input v-model="loginForm.username" placeholder="请输入工号"> |
||||
|
<template #suffix> |
||||
|
<i class="el-input__icon el-icon-user" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="loginForm.password" |
||||
|
:type="lock === 'lock' ? 'password' : 'text'" |
||||
|
placeholder="请输入密码" |
||||
|
> |
||||
|
<template #suffix> |
||||
|
<i |
||||
|
:class="'el-input__icon el-icon-' + lock" |
||||
|
@click="changeLock" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="position: relative" prop="captcha"> |
||||
|
<el-input |
||||
|
v-model="loginForm.captcha" |
||||
|
name="logVerify" |
||||
|
placeholder="请输入验证码" |
||||
|
style="width: 60%" |
||||
|
/> |
||||
|
<div class="vPic"> |
||||
|
<img |
||||
|
v-if="picPath" |
||||
|
:src="picPath" |
||||
|
alt="请输入验证码" |
||||
|
@click="loginVerify()" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<!-- <el-button type="primary" style="width: 46%" @click="checkInit" |
||||
|
>前往初始化</el-button |
||||
|
> --> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width: 46%; margin-left: 25%" |
||||
|
@click="submitForm" |
||||
|
>登 录</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="login_panle_right" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { mapActions } from 'vuex' |
||||
|
import { captcha } from '@/api/user' |
||||
|
import { checkDB } from '@/api/initdb' |
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
data() { |
||||
|
const checkUsername = (rule, value, callback) => { |
||||
|
if (value.length < 5) { |
||||
|
return callback(new Error('请输入正确的用户名')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const checkPassword = (rule, value, callback) => { |
||||
|
if (value.length < 6) { |
||||
|
return callback(new Error('请输入正确的密码')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
curYear: 0, |
||||
|
lock: 'lock', |
||||
|
loginForm: { |
||||
|
username: 'admin', |
||||
|
password: '123456', |
||||
|
captcha: '', |
||||
|
captchaId: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
username: [{ validator: checkUsername, trigger: 'blur' }], |
||||
|
password: [{ validator: checkPassword, trigger: 'blur' }], |
||||
|
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }, |
||||
|
{ |
||||
|
min: 5, |
||||
|
max: 6, |
||||
|
message: '验证码格式不正确', |
||||
|
trigger: 'blur', |
||||
|
}] |
||||
|
}, |
||||
|
logVerify: '', |
||||
|
picPath: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.loginVerify() |
||||
|
this.curYear = new Date().getFullYear() |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions('user', ['LoginIn']), |
||||
|
async checkInit() { |
||||
|
const res = await checkDB() |
||||
|
if (res.code === 0) { |
||||
|
if (res.data?.needInit) { |
||||
|
this.$store.commit('user/NeedInit') |
||||
|
this.$router.push({ name: 'Init' }) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已配置数据库信息,无法初始化' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
async login() { |
||||
|
return await this.LoginIn(this.loginForm) |
||||
|
}, |
||||
|
async submitForm() { |
||||
|
this.$refs.loginForm.validate(async(v) => { |
||||
|
if (v) { |
||||
|
const flag = await this.login() |
||||
|
if (!flag) { |
||||
|
this.loginVerify() |
||||
|
} |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '请正确填写登录信息', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.loginVerify() |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
changeLock() { |
||||
|
this.lock = this.lock === 'lock' ? 'unlock' : 'lock' |
||||
|
}, |
||||
|
loginVerify() { |
||||
|
captcha({}).then((ele) => { |
||||
|
this.picPath = ele.data.picPath |
||||
|
this.loginForm.captchaId = ele.data.captchaId |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/style/newLogin.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,385 @@ |
|||||
|
<template> |
||||
|
<!-- 履职尽责考核表录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="所属部门"> |
||||
|
<el-select v-model="searchInfo.workSection" clearable placeholder="请选择部门"> |
||||
|
<el-option value="1" label="a工段">煤焦分厂</el-option> |
||||
|
<el-option value="2" label="b工段">化产分厂</el-option> |
||||
|
<el-option value="2" label="b工段">甲醇分厂</el-option> |
||||
|
<el-option value="2" label="b工段">动力分厂</el-option> |
||||
|
<el-option value="2" label="b工段">生产部</el-option> |
||||
|
<el-option value="2" label="b工段">技术部</el-option> |
||||
|
<el-option value="2" label="b工段">质检中心</el-option> |
||||
|
<el-option value="2" label="b工段">安全部</el-option> |
||||
|
<el-option value="2" label="b工段">环保部</el-option> |
||||
|
<el-option value="2" label="b工段">营销部</el-option> |
||||
|
<el-option value="2" label="b工段">仓储中心</el-option> |
||||
|
<el-option value="2" label="b工段">物流中心</el-option> |
||||
|
<el-option value="2" label="b工段">人力资源部</el-option> |
||||
|
<el-option value="2" label="b工段">财务部</el-option> |
||||
|
<el-option value="2" label="b工段">综合办</el-option> |
||||
|
<el-option value="2" label="b工段">企管部</el-option> |
||||
|
<el-option value="2" label="b工段">保卫部</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-upload" @click="openDialog('addApi')">导入题库数据</el-button> |
||||
|
<el-popover v-model:visible="deleteVisible" placement="top" width="160"> |
||||
|
<p>确定要删除吗?</p> |
||||
|
<div style="text-align: right; margin-top: 8px;"> |
||||
|
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button> |
||||
|
<el-button size="mini" type="primary" @click="onDelete">确定</el-button> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<el-button icon="el-icon-delete" size="mini" :disabled="!apis.length" style="margin-left: 10px;">删除</el-button> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> |
||||
|
<el-table-column align="left" label="部门" min-width="150" prop="description"/> |
||||
|
<el-table-column align="left" label="考核类别" min-width="60" prop="ID"/> |
||||
|
<el-table-column align="left" label="权重(%)" min-width="150" prop="path"/> |
||||
|
<el-table-column align="left" label="考核项目" min-width="150" prop="apiGroup"/> |
||||
|
<el-table-column align="left" label="考核说明" min-width="150" prop="apiGroup"/> |
||||
|
<!-- <el-table-column align="left" label="创建时间" min-width="150" prop="method"> |
||||
|
<template #default="scope"> |
||||
|
<div> |
||||
|
{{ scope.row.method }} / {{ methodFiletr(scope.row.method) }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
|
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteApi(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="20%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="80px"> |
||||
|
<el-form-item label="考核类别" prop="category"> |
||||
|
<el-input v-model="form.category" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="部门" prop="department"> |
||||
|
<el-select v-model="form.department" placeholder="请选择部门" style="width:100%"> |
||||
|
<el-option value="1" label="a工段">煤焦分厂</el-option> |
||||
|
<el-option value="2" label="b工段">化产分厂</el-option> |
||||
|
<el-option value="2" label="b工段">甲醇分厂</el-option> |
||||
|
<el-option value="2" label="b工段">动力分厂</el-option> |
||||
|
<el-option value="2" label="b工段">生产部</el-option> |
||||
|
<el-option value="2" label="b工段">技术部</el-option> |
||||
|
<el-option value="2" label="b工段">质检中心</el-option> |
||||
|
<el-option value="2" label="b工段">安全部</el-option> |
||||
|
<el-option value="2" label="b工段">环保部</el-option> |
||||
|
<el-option value="2" label="b工段">营销部</el-option> |
||||
|
<el-option value="2" label="b工段">仓储中心</el-option> |
||||
|
<el-option value="2" label="b工段">物流中心</el-option> |
||||
|
<el-option value="2" label="b工段">人力资源部</el-option> |
||||
|
<el-option value="2" label="b工段">财务部</el-option> |
||||
|
<el-option value="2" label="b工段">综合办</el-option> |
||||
|
<el-option value="2" label="b工段">企管部</el-option> |
||||
|
<el-option value="2" label="b工段">保卫部</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目" prop="apiGrprojectoup"> |
||||
|
<el-input v-model="form.project" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="权重" prop="weights"> |
||||
|
<el-input placeholder="请输入内容" v-model="form.weights"> |
||||
|
<template #append>%</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核说明" prop="instruction"> |
||||
|
<el-input |
||||
|
v-model="form.instruction" |
||||
|
:rows="2" |
||||
|
type="textarea" |
||||
|
placeholder="请输入考核说明" |
||||
|
/> |
||||
|
<!-- <el-input v-model="form.instruction" autocomplete="off" /> --> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
getApiById, |
||||
|
getApiList, |
||||
|
createApi, |
||||
|
updateApi, |
||||
|
deleteApi, |
||||
|
deleteApisByIds |
||||
|
} from '@/api/api' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import warningBar from '@/components/warningBar/warningBar.vue' |
||||
|
const methodOptions = [ |
||||
|
{ |
||||
|
value: 'POST', |
||||
|
label: '创建', |
||||
|
type: 'success' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'GET', |
||||
|
label: '查看', |
||||
|
type: '' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'PUT', |
||||
|
label: '更新', |
||||
|
type: 'warning' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'DELETE', |
||||
|
label: '删除', |
||||
|
type: 'danger' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
warningBar |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
deleteVisible: false, |
||||
|
listApi: getApiList, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
path: '', |
||||
|
apiGroup: '', |
||||
|
method: '', |
||||
|
description: '' |
||||
|
}, |
||||
|
methodOptions: methodOptions, |
||||
|
type: '', |
||||
|
rules: { |
||||
|
path: [{ required: true, message: '请输入api路径', trigger: 'blur' }], |
||||
|
apiGroup: [ |
||||
|
{ required: true, message: '请输入组名称', trigger: 'blur' } |
||||
|
], |
||||
|
method: [ |
||||
|
{ required: true, message: '请选择请求方式', trigger: 'blur' } |
||||
|
], |
||||
|
description: [ |
||||
|
{ required: true, message: '请输入api介绍', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
methods: { |
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {} |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
path: '', |
||||
|
apiGroup: '', |
||||
|
method: '', |
||||
|
description: '' |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
async editApi(row) { |
||||
|
const res = await getApiById({ id: row.ID }) |
||||
|
this.form = res.data.api |
||||
|
this.openDialog('edit') |
||||
|
}, |
||||
|
async deleteApi(row) { |
||||
|
this.$confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
const res = await deleteApi(row) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
if (this.tableData.length === 1 && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
const res = await createApi(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await updateApi(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,443 @@ |
|||||
|
<template> |
||||
|
<!-- 被考核部门录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="考核类别名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="searchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> --> |
||||
|
<el-table-column align="left" label="考核类别" prop="classTitle"/> |
||||
|
<el-table-column align="left" label="考核项目" prop="assessTitle"/> |
||||
|
<el-table-column align="left" label="具体职责" prop="duryTitle"/> |
||||
|
<el-table-column align="left" label="部门名称" prop="parentTitle"> |
||||
|
<template #default="scope"> |
||||
|
{{scope.row.groupTitle}}{{scope.row.parentTitle}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" label="状态"> |
||||
|
<template #default="scope"> |
||||
|
<el-switch |
||||
|
inline-prompt |
||||
|
active-text="正常" |
||||
|
inactive-text="禁止" |
||||
|
v-model="scope.row.state" |
||||
|
active-color="#13ce66" |
||||
|
inactive-color="#ff4949" |
||||
|
:active-value=1 |
||||
|
:inactive-value=2 |
||||
|
@change="changeVal($event,scope.row.outId)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteOperate(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="20%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="150px"> |
||||
|
<el-form-item label="考核类别" prop="title"> |
||||
|
<el-select @change="getClassId" v-model="form.classId" clearable placeholder="请选择考核类别"> |
||||
|
<el-option |
||||
|
v-for="item in dutyclasslist" |
||||
|
:key="item.outId" |
||||
|
:label="item.title" |
||||
|
:value="item.outId" |
||||
|
|
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="showAssess" label="考核项目" prop="title"> |
||||
|
<el-select v-model="form.assessId" clearable placeholder="请选择考核项目" @change="getAssessId"> |
||||
|
<el-option |
||||
|
v-for="item in assessList" |
||||
|
:key="item.outId" |
||||
|
:label="item.title" |
||||
|
:value="item.outId" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="showDuty" label="具体职责" prop="title"> |
||||
|
<el-select v-model="form.dutyId" clearable placeholder="请选择具体职责"> |
||||
|
<el-option |
||||
|
v-for="item in dutylist" |
||||
|
:key="item.outId" |
||||
|
:label="item.title" |
||||
|
:value="item.outId" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="分值" prop="title"> |
||||
|
<el-input v-model="form.title" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
specdutylist, |
||||
|
addspecdutyinfo, |
||||
|
getspecdutyinfo, |
||||
|
eitespecdutyinfo, |
||||
|
dutyclasslist, |
||||
|
assessList, |
||||
|
dutylist, |
||||
|
eitespecdutystate |
||||
|
} from '@/api/dataEntry' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import warningBar from '@/components/warningBar/warningBar.vue' |
||||
|
const methodOptions = [ |
||||
|
{ |
||||
|
value: 'POST', |
||||
|
label: '创建', |
||||
|
type: 'success' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'GET', |
||||
|
label: '查看', |
||||
|
type: '' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'PUT', |
||||
|
label: '更新', |
||||
|
type: 'warning' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'DELETE', |
||||
|
label: '删除', |
||||
|
type: 'danger' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
warningBar |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
showDuty:false, |
||||
|
assessList:{}, |
||||
|
dutylist:{}, |
||||
|
showAssess:false, |
||||
|
searchList:{ |
||||
|
page:1, |
||||
|
pagesize:10000, |
||||
|
state:1, |
||||
|
}, |
||||
|
deleFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
switchFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
editFrom:{ |
||||
|
outid:'', |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
listApi: specdutylist, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
title:'', |
||||
|
}, |
||||
|
methodOptions: methodOptions, |
||||
|
type: '', |
||||
|
rules: { |
||||
|
title: [{ required: true, message: '考核类别名称', trigger: 'blur' }], |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
this.getDutyclasslist() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 监听选择考核项目 |
||||
|
async getAssessId(data){ |
||||
|
// 根据选中的考核项目请求具体职责 |
||||
|
const dutyFrom={ |
||||
|
page: 1, |
||||
|
pagesize: 10000, |
||||
|
state:1, |
||||
|
parentId:'' |
||||
|
} |
||||
|
dutyFrom.parentId=data; |
||||
|
const res = await dutylist(dutyFrom) |
||||
|
this.dutylist=res.data.list |
||||
|
if(data==""){ |
||||
|
this.showDuty=false; |
||||
|
}else{ |
||||
|
this.showDuty=true; |
||||
|
} |
||||
|
}, |
||||
|
// 监听选择考核类别 |
||||
|
async getClassId(data){ |
||||
|
// 根据选中的考核类别请求考核项目 |
||||
|
const assessFrom={ |
||||
|
page: 1, |
||||
|
pagesize: 10000, |
||||
|
state:1, |
||||
|
parentId:'' |
||||
|
} |
||||
|
assessFrom.parentId=data; |
||||
|
const res = await assessList(assessFrom) |
||||
|
this.assessList=res.data.list |
||||
|
if(data==""){ |
||||
|
this.showAssess=false; |
||||
|
}else{ |
||||
|
this.showAssess=true; |
||||
|
} |
||||
|
}, |
||||
|
// 获取考核类别列表 |
||||
|
async getDutyclasslist(){ |
||||
|
const res = await dutyclasslist(this.searchList) |
||||
|
this.dutyclasslist=res.data.list |
||||
|
}, |
||||
|
// 开关状态监听 |
||||
|
async changeVal(val,id){ |
||||
|
console.log(val) |
||||
|
this.switchFrom.outid=id |
||||
|
if (val==1) { |
||||
|
this.switchFrom.state=1; |
||||
|
const res = await eitespecdutystate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} else { |
||||
|
this.switchFrom.state=2; |
||||
|
const res = await eitespecdutystate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {} |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
async editApi(row) { |
||||
|
this.editFrom.outid=row.outId |
||||
|
const res = await getdutyclassinfo(this.editFrom) |
||||
|
this.form = res.data |
||||
|
this.openDialog('edit') |
||||
|
}, |
||||
|
//删除操作 |
||||
|
async deleteOperate(row) { |
||||
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
this.deleFrom.state=3; |
||||
|
console.log(row.outID) |
||||
|
this.deleFrom.outid=row.outId; |
||||
|
const res = await eitespecdutystate(this.deleFrom) |
||||
|
if (res.code === 0) { |
||||
|
|
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
|
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
const res = await adddutyclass(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await eitedutyclassinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,543 @@ |
|||||
|
<template> |
||||
|
<!-- 被考核部门录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="考核类别名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="searchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> --> |
||||
|
<el-table-column align="left" label="考核类别" prop="classTitle"/> |
||||
|
<el-table-column align="left" label="考核项目" prop="assessTitle"/> |
||||
|
<el-table-column align="left" label="具体职责" prop="duryTitle"/> |
||||
|
<el-table-column align="left" label="部门名称" prop="parentTitle"> |
||||
|
<template #default="scope"> |
||||
|
{{scope.row.groupTitle}}{{scope.row.parentTitle}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" label="状态"> |
||||
|
<template #default="scope"> |
||||
|
<el-switch |
||||
|
inline-prompt |
||||
|
active-text="正常" |
||||
|
inactive-text="禁止" |
||||
|
v-model="scope.row.state" |
||||
|
active-color="#13ce66" |
||||
|
inactive-color="#ff4949" |
||||
|
:active-value=1 |
||||
|
:inactive-value=2 |
||||
|
@change="changeVal($event,scope.row.outId)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" label="分值" prop="rescore"/> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteOperate(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<!-- 添加 --> |
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="30%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="150px"> |
||||
|
|
||||
|
<el-form-item label="所属考核项目"> |
||||
|
<span> |
||||
|
<el-tag v-if="addChildInfo.title!=''">{{addChildInfo.title}}</el-tag> |
||||
|
<dutyDialog @checkedInfo="getCheckedfrom"></dutyDialog> |
||||
|
</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择部门" prop="parentId"> |
||||
|
<el-cascader clearable v-model="form.parentId" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="分值" prop="score"> |
||||
|
<el-input v-model="form.score" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<!-- 编辑 --> |
||||
|
<el-dialog v-model="editDialogFormVisible" :before-close="closeEditDialog" title="编辑" width="30%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="editForm" :rules="editRules" label-width="150px"> |
||||
|
|
||||
|
<el-form-item label="所属考核项目"> |
||||
|
<span> |
||||
|
<el-tag v-if="editChildInfo.title!=''">{{editChildInfo.title}}</el-tag> |
||||
|
<dutyDialog @checkedInfo="getEditCheckedfrom"></dutyDialog> |
||||
|
</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择部门" prop="parentId"> |
||||
|
<el-cascader clearable v-model="editForm.parentId" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="分值" prop="rescore"> |
||||
|
<el-input v-model="editForm.rescore"/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeEditDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="editInfo">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
specdutylist, |
||||
|
adddepartdutyinfo, |
||||
|
getspecdutyinfo, |
||||
|
eitespecdutyinfo, |
||||
|
dutyclasslist, |
||||
|
assessList, |
||||
|
dutylist, |
||||
|
eitespecdutystate, |
||||
|
eitedepartdutyinfo |
||||
|
} from '@/api/dataEntry' |
||||
|
import { |
||||
|
getgroupdepartmap, |
||||
|
} from '@/api/group' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import dutyDialog from '@/components/dutyDialog/index.vue' |
||||
|
const methodOptions = [ |
||||
|
{ |
||||
|
value: 'POST', |
||||
|
label: '创建', |
||||
|
type: 'success' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'GET', |
||||
|
label: '查看', |
||||
|
type: '' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'PUT', |
||||
|
label: '更新', |
||||
|
type: 'warning' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'DELETE', |
||||
|
label: '删除', |
||||
|
type: 'danger' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
dutyDialog |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
editForm:{ |
||||
|
}, |
||||
|
editDialogFormVisible:false, |
||||
|
addChildInfo:{ |
||||
|
title:'' |
||||
|
}, |
||||
|
editChildInfo:{ |
||||
|
title:'' |
||||
|
}, |
||||
|
props: { |
||||
|
value: "id", |
||||
|
label: "name", |
||||
|
children: "children", |
||||
|
emitPath:false |
||||
|
}, |
||||
|
showDuty:false, |
||||
|
assessList:{}, |
||||
|
dutylist:{}, |
||||
|
showAssess:false, |
||||
|
searchList:{ |
||||
|
page:1, |
||||
|
pagesize:10000, |
||||
|
state:1, |
||||
|
}, |
||||
|
deleFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
switchFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
editFrom:{ |
||||
|
outid:'', |
||||
|
rescore:'', |
||||
|
score:Number |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
listApi: specdutylist, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
parentId:'', |
||||
|
dutyId:'', |
||||
|
}, |
||||
|
methodOptions: methodOptions, |
||||
|
type: '', |
||||
|
rules: { |
||||
|
parentId: [{ required: true, message: '请选择部门', trigger: 'blur' }], |
||||
|
score: [{ required: true, message: '请输入分值', trigger: 'blur' }], |
||||
|
}, |
||||
|
editRules: { |
||||
|
parentId: [{ required: true, message: '请选择部门', trigger: 'blur' }], |
||||
|
rescore: [{ required: true, message: '请输入分值', trigger: 'blur' }], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
this.getDutyclasslist() |
||||
|
this.getGrouplist() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 编辑提交 |
||||
|
async editInfo(){ |
||||
|
// this.editform.userid=this.editform.userid.toString(); |
||||
|
// delete this.editform.id |
||||
|
this.editForm.score=parseInt(this.editForm.rescore); |
||||
|
this.editForm.dutyId=this.editForm.dutyId.toString(); |
||||
|
this.editForm.parentId=this.editForm.parentId.toString(); |
||||
|
const res = await eitedepartdutyinfo(this.editForm) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeEditDialog() |
||||
|
}, |
||||
|
// 修改时获取选中组件值 |
||||
|
getEditCheckedfrom(data){ |
||||
|
this.editChildInfo=data |
||||
|
this.editForm.dutyId=this.editChildInfo.outId |
||||
|
}, |
||||
|
// 获取部门 |
||||
|
async getGrouplist(){ |
||||
|
const res = await getgroupdepartmap() |
||||
|
this.grouplist=res.data.list |
||||
|
|
||||
|
}, |
||||
|
// 添加获取选中组件值 |
||||
|
getCheckedfrom(data){ |
||||
|
this.addChildInfo=data |
||||
|
}, |
||||
|
// 监听选择考核项目 |
||||
|
async getAssessId(data){ |
||||
|
// 根据选中的考核项目请求具体职责 |
||||
|
const dutyFrom={ |
||||
|
page: 1, |
||||
|
pagesize: 10000, |
||||
|
state:1, |
||||
|
parentId:'' |
||||
|
} |
||||
|
dutyFrom.parentId=data; |
||||
|
const res = await dutylist(dutyFrom) |
||||
|
this.dutylist=res.data.list |
||||
|
if(data==""){ |
||||
|
this.showDuty=false; |
||||
|
}else{ |
||||
|
this.showDuty=true; |
||||
|
} |
||||
|
}, |
||||
|
// 监听选择考核类别 |
||||
|
async getClassId(data){ |
||||
|
// 根据选中的考核类别请求考核项目 |
||||
|
const assessFrom={ |
||||
|
page: 1, |
||||
|
pagesize: 10000, |
||||
|
state:1, |
||||
|
parentId:'' |
||||
|
} |
||||
|
assessFrom.parentId=data; |
||||
|
const res = await assessList(assessFrom) |
||||
|
this.assessList=res.data.list |
||||
|
if(data==""){ |
||||
|
this.showAssess=false; |
||||
|
}else{ |
||||
|
this.showAssess=true; |
||||
|
} |
||||
|
}, |
||||
|
// 获取考核类别列表 |
||||
|
async getDutyclasslist(){ |
||||
|
const res = await dutyclasslist(this.searchList) |
||||
|
this.dutyclasslist=res.data.list |
||||
|
}, |
||||
|
// 开关状态监听 |
||||
|
async changeVal(val,id){ |
||||
|
console.log(val) |
||||
|
this.switchFrom.outid=id |
||||
|
if (val==1) { |
||||
|
this.switchFrom.state=1; |
||||
|
const res = await eitespecdutystate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} else { |
||||
|
this.switchFrom.state=2; |
||||
|
const res = await eitespecdutystate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {} |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
parentId:'', |
||||
|
dutyId:'', |
||||
|
} |
||||
|
}, |
||||
|
editInitForm (){ |
||||
|
this.editForm = { |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
closeEditDialog() { |
||||
|
this.editChildInfo={ |
||||
|
title:'' |
||||
|
} |
||||
|
this.editInitForm() |
||||
|
this.editDialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
// editApi:async(row) => { |
||||
|
// this.editFrom.outid=row.outId |
||||
|
// const res = await getspecdutyinfo(this.editFrom) |
||||
|
// this.editChildInfo.title=res.data.duryTitle |
||||
|
// this.editForm = res.data |
||||
|
// this.$set(this.editForm,'rescore',res.data.rescore) |
||||
|
// this.editForm.parentId=parseInt(this.editForm.parentId); |
||||
|
// this.editDialogFormVisible=true |
||||
|
// }, |
||||
|
|
||||
|
async editApi(row) { |
||||
|
|
||||
|
this.editFrom.outid=row.outId |
||||
|
const res = await getspecdutyinfo(this.editFrom) |
||||
|
|
||||
|
this.editChildInfo.title=res.data.duryTitle |
||||
|
this.editForm = res.data |
||||
|
this.editForm.score=res.data.rescore |
||||
|
// this.editForm.rescore=this.editForm.rescore.toString(); |
||||
|
|
||||
|
this.editForm.parentId=parseInt(this.editForm.parentId); |
||||
|
console.log("editForm") |
||||
|
console.log(this.editForm) |
||||
|
this.editDialogFormVisible=true |
||||
|
}, |
||||
|
//删除操作 |
||||
|
async deleteOperate(row) { |
||||
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
this.deleFrom.state=3; |
||||
|
console.log(row.outID) |
||||
|
this.deleFrom.outid=row.outId; |
||||
|
const res = await eitespecdutystate(this.deleFrom) |
||||
|
if (res.code === 0) { |
||||
|
|
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
|
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
console.log(this.addChildInfo) |
||||
|
this.form.dutyId=this.addChildInfo.outId |
||||
|
this.form.parentId=this.form.parentId.toString() |
||||
|
this.form.score=parseInt(this.form.score); |
||||
|
const res = await adddepartdutyinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await eitedutyclassinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,373 @@ |
|||||
|
<template> |
||||
|
<!-- 考核类别录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="考核类别名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="searchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核类别状态"> |
||||
|
<el-select v-model="searchInfo.state" clearable placeholder="请选择状态"> |
||||
|
<el-option :value=1 label="正常">正常</el-option> |
||||
|
<el-option :value=2 label="禁止">禁止</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
<!-- <el-popover v-model:visible="deleteVisible" placement="top" width="160"> |
||||
|
<p>确定要删除吗?</p> |
||||
|
<div style="text-align: right; margin-top: 8px;"> |
||||
|
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button> |
||||
|
<el-button size="mini" type="primary" @click="onDelete">确定</el-button> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<el-button icon="el-icon-delete" size="mini" :disabled="!apis.length" style="margin-left: 10px;">删除</el-button> |
||||
|
</template> |
||||
|
</el-popover> --> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> --> |
||||
|
<el-table-column align="left" label="考核类别ID" prop="outId"/> |
||||
|
<el-table-column align="left" label="考核类别名称" prop="title"/> |
||||
|
<el-table-column align="left" label="考核类别状态"> |
||||
|
<template #default="scope"> |
||||
|
<el-switch |
||||
|
inline-prompt |
||||
|
active-text="正常" |
||||
|
inactive-text="禁止" |
||||
|
v-model="scope.row.state" |
||||
|
active-color="#13ce66" |
||||
|
inactive-color="#ff4949" |
||||
|
:active-value=1 |
||||
|
:inactive-value=2 |
||||
|
@change="changeVal($event,scope.row.outId)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteOperate(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="20%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="150px"> |
||||
|
<el-form-item label="考核类别名称" prop="title"> |
||||
|
<el-input v-model="form.title" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
dutyclasslist, |
||||
|
adddutyclass, |
||||
|
getdutyclassinfo, |
||||
|
eitedutyclassinfo, |
||||
|
statedutyclass |
||||
|
} from '@/api/dataEntry' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import warningBar from '@/components/warningBar/warningBar.vue' |
||||
|
const methodOptions = [ |
||||
|
{ |
||||
|
value: 'POST', |
||||
|
label: '创建', |
||||
|
type: 'success' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'GET', |
||||
|
label: '查看', |
||||
|
type: '' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'PUT', |
||||
|
label: '更新', |
||||
|
type: 'warning' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'DELETE', |
||||
|
label: '删除', |
||||
|
type: 'danger' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
warningBar |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
deleFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
switchFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
editFrom:{ |
||||
|
outid:'', |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
listApi: dutyclasslist, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
title:'', |
||||
|
}, |
||||
|
methodOptions: methodOptions, |
||||
|
type: '', |
||||
|
rules: { |
||||
|
title: [{ required: true, message: '考核类别名称', trigger: 'blur' }], |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 开关状态监听 |
||||
|
async changeVal(val,id){ |
||||
|
console.log(val) |
||||
|
this.switchFrom.outid=id |
||||
|
if (val==1) { |
||||
|
this.switchFrom.state=1; |
||||
|
const res = await statedutyclass(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} else { |
||||
|
this.switchFrom.state=2; |
||||
|
const res = await statedutyclass(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {} |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
path: '', |
||||
|
apiGroup: '', |
||||
|
method: '', |
||||
|
description: '' |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
async editApi(row) { |
||||
|
this.editFrom.outid=row.outId |
||||
|
const res = await getdutyclassinfo(this.editFrom) |
||||
|
this.form = res.data |
||||
|
this.openDialog('edit') |
||||
|
}, |
||||
|
//删除操作 |
||||
|
async deleteOperate(row) { |
||||
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
this.deleFrom.state=3; |
||||
|
console.log(row.outID) |
||||
|
this.deleFrom.outid=row.outId; |
||||
|
const res = await statedutyclass(this.deleFrom) |
||||
|
if (res.code === 0) { |
||||
|
|
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
|
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
const res = await adddutyclass(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await eitedutyclassinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,602 @@ |
|||||
|
<template> |
||||
|
<!-- 具体职责录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="所属考核项目"> |
||||
|
<span> |
||||
|
<el-tag v-if="childInfo.title!=''">{{childInfo.title}}</el-tag> |
||||
|
<projectDialog @checkedInfo="getCheckedInfo"></projectDialog> |
||||
|
</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目状态"> |
||||
|
<el-select v-model="searchInfo.state" clearable placeholder="请选择状态"> |
||||
|
<el-option :value=1 label="正常">正常</el-option> |
||||
|
<el-option :value=2 label="禁止">禁止</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="searchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> --> |
||||
|
<el-table-column align="left" label="所属考核项目" prop="parentTitle"/> |
||||
|
<el-table-column align="left" label="具体职责ID" prop="outId"/> |
||||
|
<el-table-column align="left" label="具体职责名称" prop="title"/> |
||||
|
<el-table-column align="left" label="考核部门" prop="dumpTitle"/> |
||||
|
<el-table-column align="left" label="考核人" prop="username"/> |
||||
|
<el-table-column align="left" label="具体职责状态"> |
||||
|
<template #default="scope"> |
||||
|
<el-switch |
||||
|
inline-prompt |
||||
|
active-text="正常" |
||||
|
inactive-text="禁止" |
||||
|
v-model="scope.row.state" |
||||
|
active-color="#13ce66" |
||||
|
inactive-color="#ff4949" |
||||
|
:active-value=1 |
||||
|
:inactive-value=2 |
||||
|
@change="changeVal($event,scope.row.outId)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteOperate(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<!-- 添加 --> |
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="25%"> |
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="125px"> |
||||
|
<el-form-item label="所属考核项目"> |
||||
|
<span> |
||||
|
<el-tag v-if="addChildInfo.title!=''">{{addChildInfo.title}}</el-tag> |
||||
|
<projectDialog @checkedInfo="getCheckedfrom"></projectDialog> |
||||
|
</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="具体职责名称" prop="title"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 2, maxRows: 4}" |
||||
|
placeholder="请输入内容" |
||||
|
v-model="form.title"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核部门类型" prop="type"> |
||||
|
<el-radio border size="small" v-model="form.type" :label=1>指定人</el-radio> |
||||
|
<el-radio border size="small" v-model="form.type" :label=2>指定部门</el-radio> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="form.type==2" label="选择部门" prop="userid"> |
||||
|
<el-cascader clearable v-model="form.userid" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="form.type==1" label="选择考核人" prop="userid"> |
||||
|
<el-cascader clearable v-model="form.userid" :options="grouplistBackup" :show-all-levels="false" :props="userProps"></el-cascader> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<!-- 编辑 --> |
||||
|
<el-dialog v-model="editDialogFormVisible" :before-close="closeEditDialog" title="编辑" width="25%"> |
||||
|
<el-form ref="apiForm" :model="editform" :rules="editrules" label-width="125px"> |
||||
|
<el-form-item label="所属考核项目"> |
||||
|
<span> |
||||
|
<el-tag v-if="editChildInfo.title!=''">{{editChildInfo.title}}</el-tag> |
||||
|
<projectDialog @checkedInfo="getEditCheckedfrom"></projectDialog> |
||||
|
</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="具体职责名称" prop="title"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 2, maxRows: 4}" |
||||
|
placeholder="请输入内容" |
||||
|
v-model="editform.title"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核部门类型" prop="type"> |
||||
|
<el-radio border size="small" v-model="editform.userType" :label=1>指定人</el-radio> |
||||
|
<el-radio border size="small" v-model="editform.userType" :label=2>指定部门</el-radio> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="editform.userType==2" label="选择部门" prop="userid"> |
||||
|
<el-cascader clearable v-model="editform.dump" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="editform.userType==1" label="选择考核人" prop="userid"> |
||||
|
<el-cascader clearable v-model="editform.userDumpId" :options="grouplistBackup" :show-all-levels="false" :props="userProps"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<!-- 16047344045376832 --> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeEditDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="editInfo">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
dutylist, |
||||
|
assessList, |
||||
|
adddutyinfo, |
||||
|
getdutyinfo, |
||||
|
eitedutystate, |
||||
|
eitedutyinfo |
||||
|
} from '@/api/dataEntry' |
||||
|
import { |
||||
|
getgroupdepartmap, |
||||
|
getgroupuser |
||||
|
} from '@/api/group' |
||||
|
|
||||
|
import projectDialog from '@/components/projectDialog/index.vue' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import warningBar from '@/components/warningBar/warningBar.vue' |
||||
|
const methodOptions = [ |
||||
|
{ |
||||
|
value: 'POST', |
||||
|
label: '创建', |
||||
|
type: 'success' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'GET', |
||||
|
label: '查看', |
||||
|
type: '' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'PUT', |
||||
|
label: '更新', |
||||
|
type: 'warning' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'DELETE', |
||||
|
label: '删除', |
||||
|
type: 'danger' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
warningBar, |
||||
|
projectDialog |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
editChildInfo:{ |
||||
|
title:'' |
||||
|
}, |
||||
|
editform:{}, |
||||
|
editDialogFormVisible:false, |
||||
|
props: { |
||||
|
value: "id", |
||||
|
label: "name", |
||||
|
children: "children", |
||||
|
emitPath:false |
||||
|
}, |
||||
|
userProps: { |
||||
|
value: "id", |
||||
|
label: "name", |
||||
|
children: "groupUser", |
||||
|
emitPath:false |
||||
|
}, |
||||
|
grouplist:{}, |
||||
|
grouplistBackup:{}, |
||||
|
groupListFrom:{ |
||||
|
parentid:3 |
||||
|
}, |
||||
|
childInfo:{ |
||||
|
title:'' |
||||
|
}, |
||||
|
addChildInfo:{ |
||||
|
title:'' |
||||
|
}, |
||||
|
projectTitle:'', |
||||
|
dutyclasslist:{}, |
||||
|
searchList:{ |
||||
|
page:1, |
||||
|
pagesize:10000, |
||||
|
}, |
||||
|
dutyclasslist:'', |
||||
|
deleFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
switchFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
editFrom:{ |
||||
|
outid:'', |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
listApi: dutylist, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
title:'', |
||||
|
|
||||
|
}, |
||||
|
methodOptions: methodOptions, |
||||
|
type: '', |
||||
|
rules: { |
||||
|
parentId: [{ required: true, message: '请选择所属考核类别', trigger: 'blur' }], |
||||
|
title: [{ required: true, message: '考核项目名称', trigger: 'blur' }], |
||||
|
type: [{ required: true, message: '考核部门类型', trigger: 'blur' }], |
||||
|
userid: [{ required: true, message: '考核人或部门', trigger: 'blur' }], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
// this.getDutyclasslist() |
||||
|
this.getGrouplist() |
||||
|
this.getSystemadminlist() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 添加获取选中组件值 |
||||
|
getEditCheckedfrom(data){ |
||||
|
this.editChildInfo=data |
||||
|
this.editform.parentId=this.editChildInfo.outId |
||||
|
}, |
||||
|
// 添加获取选中组件值 |
||||
|
getCheckedfrom(data){ |
||||
|
this.addChildInfo=data |
||||
|
}, |
||||
|
// 获取部门 |
||||
|
async getGrouplist(){ |
||||
|
const res = await getgroupdepartmap() |
||||
|
this.grouplist=res.data.list |
||||
|
|
||||
|
}, |
||||
|
// async getGrouplist(){ |
||||
|
// const res = await grouplist(this.groupListFrom) |
||||
|
// this.grouplist=res.data.list |
||||
|
// // 取消vue的双向绑定 |
||||
|
// this.grouplistBackup=JSON.parse(JSON.stringify(res.data.list)) |
||||
|
// this.grouplist.forEach((data) => { |
||||
|
// data.children.forEach((res) => { |
||||
|
|
||||
|
// if(res.hasOwnProperty('children')){ |
||||
|
// delete res.children |
||||
|
// } |
||||
|
// }); |
||||
|
// }); |
||||
|
// // 下是循环人员列表 |
||||
|
// this.grouplistBackup.forEach((data) => { |
||||
|
// data.children.forEach(async(res) => { |
||||
|
// const systemadminFrom = { |
||||
|
// page:1, |
||||
|
// pagesize:10000, |
||||
|
// branchFactoryId:'' |
||||
|
// } |
||||
|
// systemadminFrom.branchFactoryId=res.id |
||||
|
// const result = await stafflist(systemadminFrom) |
||||
|
|
||||
|
// res.children = result.data.list; |
||||
|
// // this.$set(res,"children", result.data.list) |
||||
|
|
||||
|
|
||||
|
// }); |
||||
|
// }); |
||||
|
// console.log("部门列表无基层") |
||||
|
// console.log(this.grouplist) |
||||
|
// console.log("员工列表") |
||||
|
// console.log(this.grouplistBackup) |
||||
|
// }, |
||||
|
// 获取员工列表 |
||||
|
async getSystemadminlist(){ |
||||
|
const res = await getgroupuser() |
||||
|
this.grouplistBackup=res.data.list |
||||
|
}, |
||||
|
// 获取选中组件值 |
||||
|
getCheckedInfo(data){ |
||||
|
this.childInfo=data |
||||
|
}, |
||||
|
// 获取考核类别列表 |
||||
|
async getDutyclasslist(){ |
||||
|
const res = await dutyclasslist(this.searchList) |
||||
|
this.dutyclasslist=res.data.list |
||||
|
}, |
||||
|
// 开关状态监听 |
||||
|
async changeVal(val,id){ |
||||
|
console.log(val) |
||||
|
this.switchFrom.outid=id |
||||
|
if (val==1) { |
||||
|
this.switchFrom.state=1; |
||||
|
const res = await eitedutystate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} else { |
||||
|
this.switchFrom.state=2; |
||||
|
const res = await eitedutystate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {}; |
||||
|
this.childInfo={ |
||||
|
title:'' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.searchInfo.parentId=this.childInfo.outId |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
} |
||||
|
}, |
||||
|
editInitForm(){ |
||||
|
this.editform = { |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.addChildInfo={ |
||||
|
title:'' |
||||
|
} |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
// 显示详情 |
||||
|
async editApi(row) { |
||||
|
this.editFrom.outid=row.outId |
||||
|
const res = await getdutyinfo(this.editFrom) |
||||
|
this.editform = res.data |
||||
|
this.editform.parentId=res.data.parentIdStr |
||||
|
this.editChildInfo.title=res.data.parentTitle |
||||
|
console.log(this.editform) |
||||
|
this.editDialogFormVisible=true |
||||
|
}, |
||||
|
//删除操作 |
||||
|
async deleteOperate(row) { |
||||
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
this.deleFrom.state=3; |
||||
|
console.log(row.outID) |
||||
|
this.deleFrom.outid=row.outId; |
||||
|
const res = await eitedutystate(this.deleFrom) |
||||
|
if (res.code === 0) { |
||||
|
|
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
|
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async editInfo(){ |
||||
|
if(this.editform.userType==1){ |
||||
|
delete this.editform.dump |
||||
|
this.editform.userid=this.editform.userDumpId |
||||
|
} |
||||
|
if(this.editform.userType==2){ |
||||
|
delete this.editform.userDumpId |
||||
|
this.editform.userid=this.editform.dump |
||||
|
} |
||||
|
this.editform.type=this.editform.userType |
||||
|
this.editform.outid=this.editform.outId |
||||
|
this.editform.userid=this.editform.userid.toString(); |
||||
|
delete this.editform.outId |
||||
|
delete this.editform.userDump |
||||
|
delete this.editform.userDumpId |
||||
|
delete this.editform.userType |
||||
|
delete this.editform.username |
||||
|
delete this.editform.username |
||||
|
// delete this.editform.id |
||||
|
delete this.editform.dump |
||||
|
delete this.editform.dumpTitle |
||||
|
delete this.editform.parentIdStr |
||||
|
delete this.editform.parentTitle |
||||
|
delete this.editform.partId |
||||
|
delete this.editform.time |
||||
|
delete this.editform.state |
||||
|
const res = await eitedutyinfo(this.editform) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeEditDialog() |
||||
|
}, |
||||
|
closeEditDialog(){ |
||||
|
this.editChildInfo={ |
||||
|
title:'' |
||||
|
} |
||||
|
this.editInitForm() |
||||
|
this.editDialogFormVisible = false |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
console.log(this.grouplistBackup) |
||||
|
console.log(this.form.userid) |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
this.form.userid=this.form.userid.toString(); |
||||
|
this.form.parentId=this.addChildInfo.outId |
||||
|
const res = await adddutyinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await eiteassessinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,395 @@ |
|||||
|
<template> |
||||
|
<!-- 考核项目录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="考核项目名称"> |
||||
|
<el-input |
||||
|
placeholder="请输入名称" |
||||
|
v-model="searchInfo.title" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目状态"> |
||||
|
<el-select v-model="searchInfo.state" clearable placeholder="请选择状态"> |
||||
|
<el-option :value=1 label="正常">正常</el-option> |
||||
|
<el-option :value=2 label="禁止">禁止</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="所属考核类别"> |
||||
|
<el-select v-model="searchInfo.parentId" clearable placeholder="请选择状态"> |
||||
|
<el-option |
||||
|
v-for="item in dutyclasslist" |
||||
|
:key="item.outId" |
||||
|
:label="item.title" |
||||
|
:value="item.outId"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
<!-- <el-popover v-model:visible="deleteVisible" placement="top" width="160"> |
||||
|
<p>确定要删除吗?</p> |
||||
|
<div style="text-align: right; margin-top: 8px;"> |
||||
|
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button> |
||||
|
<el-button size="mini" type="primary" @click="onDelete">确定</el-button> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<el-button icon="el-icon-delete" size="mini" :disabled="!apis.length" style="margin-left: 10px;">删除</el-button> |
||||
|
</template> |
||||
|
</el-popover> --> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> --> |
||||
|
<el-table-column align="left" label="所属考核类别" prop="parentTitle"/> |
||||
|
<el-table-column align="left" label="考核项目ID" prop="outId"/> |
||||
|
<el-table-column align="left" label="考核项目名称" prop="title"/> |
||||
|
<el-table-column align="left" label="考核项目说明" prop="content"/> |
||||
|
<el-table-column align="left" label="考核项目状态"> |
||||
|
<template #default="scope"> |
||||
|
<el-switch |
||||
|
inline-prompt |
||||
|
active-text="正常" |
||||
|
inactive-text="禁止" |
||||
|
v-model="scope.row.state" |
||||
|
active-color="#13ce66" |
||||
|
inactive-color="#ff4949" |
||||
|
:active-value=1 |
||||
|
:inactive-value=2 |
||||
|
@change="changeVal($event,scope.row.outId)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteOperate(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="20%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="125px"> |
||||
|
<el-form-item label="所属考核类别" prop="parentId"> |
||||
|
<el-select v-model="form.parentId" clearable placeholder="请选择考核类别"> |
||||
|
<el-option |
||||
|
v-for="item in dutyclasslist" |
||||
|
:key="item.outId" |
||||
|
:label="item.title" |
||||
|
:value="item.outId"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目名称" prop="title"> |
||||
|
<el-input v-model="form.title" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目说明" prop="content"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 2, maxRows: 4}" |
||||
|
placeholder="请输入内容" |
||||
|
v-model="form.content"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
dutyclasslist, |
||||
|
assessList, |
||||
|
addassessinfo, |
||||
|
getassessinfo, |
||||
|
eiteassessinfo, |
||||
|
eiteassessstate |
||||
|
} from '@/api/dataEntry' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import warningBar from '@/components/warningBar/warningBar.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
warningBar |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
dutyclasslist:{}, |
||||
|
searchList:{ |
||||
|
page:1, |
||||
|
pagesize:10000, |
||||
|
}, |
||||
|
deleFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
switchFrom:{ |
||||
|
outid:'', |
||||
|
state:Number |
||||
|
}, |
||||
|
editFrom:{ |
||||
|
outid:'', |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
listApi: assessList, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
title:'', |
||||
|
}, |
||||
|
|
||||
|
type: '', |
||||
|
rules: { |
||||
|
parentId: [{ required: true, message: '请选择所属考核类别', trigger: 'blur' }], |
||||
|
title: [{ required: true, message: '考核项目名称', trigger: 'blur' }], |
||||
|
content: [{ required: true, message: '考核项目说明', trigger: 'blur' }], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
this.getDutyclasslist() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取考核类别列表 |
||||
|
async getDutyclasslist(){ |
||||
|
const res = await dutyclasslist(this.searchList) |
||||
|
this.dutyclasslist=res.data.list |
||||
|
}, |
||||
|
// 开关状态监听 |
||||
|
async changeVal(val,id){ |
||||
|
console.log(val) |
||||
|
this.switchFrom.outid=id |
||||
|
if (val==1) { |
||||
|
this.switchFrom.state=1; |
||||
|
const res = await eiteassessstate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} else { |
||||
|
this.switchFrom.state=2; |
||||
|
const res = await eiteassessstate(this.switchFrom) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改状态成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getTableData() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {} |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
path: '', |
||||
|
apiGroup: '', |
||||
|
method: '', |
||||
|
description: '' |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
async editApi(row) { |
||||
|
this.editFrom.outid=row.outId |
||||
|
const res = await getassessinfo(this.editFrom) |
||||
|
this.form = res.data |
||||
|
this.form.parentId=res.data.parentIdStr |
||||
|
this.openDialog('edit') |
||||
|
}, |
||||
|
//删除操作 |
||||
|
async deleteOperate(row) { |
||||
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
this.deleFrom.state=3; |
||||
|
console.log(row.outID) |
||||
|
this.deleFrom.outid=row.outId; |
||||
|
const res = await eiteassessstate(this.deleFrom) |
||||
|
if (res.code === 0) { |
||||
|
|
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
|
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
const res = await addassessinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await eiteassessinfo(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<router-view v-slot="{ Component }"> |
||||
|
<transition mode="out-in" name="el-fade-in-linear"> |
||||
|
<keep-alive :include="$store.getters['router/keepAliveRouters']"> |
||||
|
<component :is="Component" /> |
||||
|
</keep-alive> |
||||
|
</transition> |
||||
|
</router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'performance' |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,385 @@ |
|||||
|
<template> |
||||
|
<!-- 主要考核评分指标录入 --> |
||||
|
<div> |
||||
|
<div class="gva-search-box"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchInfo"> |
||||
|
<el-form-item label="部门"> |
||||
|
<el-select v-model="searchInfo.workSection" clearable placeholder="请选择部门"> |
||||
|
<el-option value="1" label="煤焦分厂">煤焦分厂</el-option> |
||||
|
<el-option value="2" label="化产分厂">化产分厂</el-option> |
||||
|
<el-option value="3" label="甲醇分厂">甲醇分厂</el-option> |
||||
|
<el-option value="4" label="动力分厂">动力分厂</el-option> |
||||
|
<el-option value="5" label="生产部">生产部</el-option> |
||||
|
<el-option value="6" label="技术部">技术部</el-option> |
||||
|
<el-option value="7" label="质检中心">质检中心</el-option> |
||||
|
<el-option value="8" label="安全部">安全部</el-option> |
||||
|
<el-option value="9" label="环保部">环保部</el-option> |
||||
|
<el-option value="10" label="营销部">营销部</el-option> |
||||
|
<el-option value="11" label="仓储中心">仓储中心</el-option> |
||||
|
<el-option value="12" label="物流中心">物流中心</el-option> |
||||
|
<el-option value="13" label="人力资源部">人力资源部</el-option> |
||||
|
<el-option value="14" label="财务部">财务部</el-option> |
||||
|
<el-option value="15" label="综合办">综合办</el-option> |
||||
|
<el-option value="16" label="企管部">企管部</el-option> |
||||
|
<el-option value="17" label="保卫部">保卫部</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
||||
|
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="gva-table-box"> |
||||
|
<div class="gva-btn-list"> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button> |
||||
|
<el-button size="mini" type="primary" icon="el-icon-upload" @click="openDialog('addApi')">导入题库数据</el-button> |
||||
|
<el-popover v-model:visible="deleteVisible" placement="top" width="160"> |
||||
|
<p>确定要删除吗?</p> |
||||
|
<div style="text-align: right; margin-top: 8px;"> |
||||
|
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button> |
||||
|
<el-button size="mini" type="primary" @click="onDelete">确定</el-button> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<el-button icon="el-icon-delete" size="mini" :disabled="!apis.length" style="margin-left: 10px;">删除</el-button> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
</div> |
||||
|
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="55" |
||||
|
/> |
||||
|
<el-table-column align="left" label="部门" min-width="150" prop="description"/> |
||||
|
<el-table-column align="left" label="考核类别" min-width="60" prop="ID"/> |
||||
|
<el-table-column align="left" label="权重(%)" min-width="150" prop="path"/> |
||||
|
<el-table-column align="left" label="考核项目" min-width="150" prop="apiGroup"/> |
||||
|
<el-table-column align="left" label="考核说明" min-width="150" prop="apiGroup"/> |
||||
|
<!-- <el-table-column align="left" label="创建时间" min-width="150" prop="method"> |
||||
|
<template #default="scope"> |
||||
|
<div> |
||||
|
{{ scope.row.method }} / {{ methodFiletr(scope.row.method) }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
|
||||
|
<el-table-column align="left" fixed="right" label="操作" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-edit" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="editApi(scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="small" |
||||
|
type="text" |
||||
|
@click="deleteApi(scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="gva-pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="page" |
||||
|
:page-size="pageSize" |
||||
|
:page-sizes="[10, 30, 50, 100]" |
||||
|
:total="total" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="20%"> |
||||
|
|
||||
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="80px"> |
||||
|
<el-form-item label="考核类别" prop="category"> |
||||
|
<el-input v-model="form.category" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="部门" prop="department"> |
||||
|
<el-select v-model="form.department" placeholder="请选择部门" style="width:100%"> |
||||
|
<el-option value="1" label="a工段">煤焦分厂</el-option> |
||||
|
<el-option value="2" label="b工段">化产分厂</el-option> |
||||
|
<el-option value="2" label="b工段">甲醇分厂</el-option> |
||||
|
<el-option value="2" label="b工段">动力分厂</el-option> |
||||
|
<el-option value="2" label="b工段">生产部</el-option> |
||||
|
<el-option value="2" label="b工段">技术部</el-option> |
||||
|
<el-option value="2" label="b工段">质检中心</el-option> |
||||
|
<el-option value="2" label="b工段">安全部</el-option> |
||||
|
<el-option value="2" label="b工段">环保部</el-option> |
||||
|
<el-option value="2" label="b工段">营销部</el-option> |
||||
|
<el-option value="2" label="b工段">仓储中心</el-option> |
||||
|
<el-option value="2" label="b工段">物流中心</el-option> |
||||
|
<el-option value="2" label="b工段">人力资源部</el-option> |
||||
|
<el-option value="2" label="b工段">财务部</el-option> |
||||
|
<el-option value="2" label="b工段">综合办</el-option> |
||||
|
<el-option value="2" label="b工段">企管部</el-option> |
||||
|
<el-option value="2" label="b工段">保卫部</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核项目" prop="apiGrprojectoup"> |
||||
|
<el-input v-model="form.project" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="权重" prop="weights"> |
||||
|
<el-input placeholder="请输入内容" v-model="form.weights"> |
||||
|
<template #append>%</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="考核说明" prop="instruction"> |
||||
|
<el-input |
||||
|
v-model="form.instruction" |
||||
|
:rows="2" |
||||
|
type="textarea" |
||||
|
placeholder="请输入考核说明" |
||||
|
/> |
||||
|
<!-- <el-input v-model="form.instruction" autocomplete="off" /> --> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索 |
||||
|
|
||||
|
import { |
||||
|
getApiById, |
||||
|
getApiList, |
||||
|
createApi, |
||||
|
updateApi, |
||||
|
deleteApi, |
||||
|
deleteApisByIds |
||||
|
} from '@/api/api' |
||||
|
import infoList from '@/mixins/infoList' |
||||
|
import { toSQLLine } from '@/utils/stringFun' |
||||
|
import warningBar from '@/components/warningBar/warningBar.vue' |
||||
|
const methodOptions = [ |
||||
|
{ |
||||
|
value: 'POST', |
||||
|
label: '创建', |
||||
|
type: 'success' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'GET', |
||||
|
label: '查看', |
||||
|
type: '' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'PUT', |
||||
|
label: '更新', |
||||
|
type: 'warning' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'DELETE', |
||||
|
label: '删除', |
||||
|
type: 'danger' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Api', |
||||
|
components: { |
||||
|
warningBar |
||||
|
}, |
||||
|
mixins: [infoList], |
||||
|
data() { |
||||
|
return { |
||||
|
deleteVisible: false, |
||||
|
listApi: getApiList, |
||||
|
dialogFormVisible: false, |
||||
|
dialogTitle: '新增', |
||||
|
apis: [], |
||||
|
form: { |
||||
|
path: '', |
||||
|
apiGroup: '', |
||||
|
method: '', |
||||
|
description: '' |
||||
|
}, |
||||
|
methodOptions: methodOptions, |
||||
|
type: '', |
||||
|
rules: { |
||||
|
path: [{ required: true, message: '请输入api路径', trigger: 'blur' }], |
||||
|
apiGroup: [ |
||||
|
{ required: true, message: '请输入组名称', trigger: 'blur' } |
||||
|
], |
||||
|
method: [ |
||||
|
{ required: true, message: '请选择请求方式', trigger: 'blur' } |
||||
|
], |
||||
|
description: [ |
||||
|
{ required: true, message: '请输入api介绍', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
methods: { |
||||
|
methodFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.label}` |
||||
|
}, |
||||
|
tagTypeFiletr(value) { |
||||
|
const target = methodOptions.filter(item => item.value === value)[0] |
||||
|
return target && `${target.type}` |
||||
|
}, |
||||
|
// 选中api |
||||
|
handleSelectionChange(val) { |
||||
|
this.apis = val |
||||
|
}, |
||||
|
async onDelete() { |
||||
|
const ids = this.apis.forEach(item => item.ID) |
||||
|
const res = await deleteApisByIds({ ids }) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
if (this.tableData.length === ids.length && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortChange({ prop, order }) { |
||||
|
if (prop) { |
||||
|
this.searchInfo.orderKey = toSQLLine(prop) |
||||
|
this.searchInfo.desc = order === 'descending' |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
onReset() { |
||||
|
this.searchInfo = {} |
||||
|
}, |
||||
|
// 条件搜索前端看此方法 |
||||
|
onSubmit() { |
||||
|
this.page = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
initForm() { |
||||
|
this.$refs.apiForm.resetFields() |
||||
|
this.form = { |
||||
|
path: '', |
||||
|
apiGroup: '', |
||||
|
method: '', |
||||
|
description: '' |
||||
|
} |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.initForm() |
||||
|
this.dialogFormVisible = false |
||||
|
}, |
||||
|
openDialog(type) { |
||||
|
switch (type) { |
||||
|
case 'addApi': |
||||
|
this.dialogTitle = '新增' |
||||
|
break |
||||
|
case 'edit': |
||||
|
this.dialogTitle = '编辑' |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
this.type = type |
||||
|
this.dialogFormVisible = true |
||||
|
}, |
||||
|
async editApi(row) { |
||||
|
const res = await getApiById({ id: row.ID }) |
||||
|
this.form = res.data.api |
||||
|
this.openDialog('edit') |
||||
|
}, |
||||
|
async deleteApi(row) { |
||||
|
this.$confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(async() => { |
||||
|
const res = await deleteApi(row) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
if (this.tableData.length === 1 && this.page > 1) { |
||||
|
this.page-- |
||||
|
} |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async enterDialog() { |
||||
|
this.$refs.apiForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
switch (this.type) { |
||||
|
case 'addApi': |
||||
|
{ |
||||
|
const res = await createApi(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
|
||||
|
break |
||||
|
case 'edit': |
||||
|
{ |
||||
|
const res = await updateApi(this.form) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '编辑成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getTableData() |
||||
|
this.closeDialog() |
||||
|
} |
||||
|
break |
||||
|
default: |
||||
|
// eslint-disable-next-line no-lone-blocks |
||||
|
{ |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '未知操作', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.button-box { |
||||
|
padding: 10px 20px; |
||||
|
.el-button { |
||||
|
float: right; |
||||
|
} |
||||
|
} |
||||
|
.warning { |
||||
|
color: #dc143c; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,367 @@ |
|||||
|
<template> |
||||
|
<div class="logic-flow-view"> |
||||
|
<h3 class="demo-title">LogicFlow Vue demo</h3> |
||||
|
<!-- 辅助工具栏 --> |
||||
|
<Control |
||||
|
class="demo-control" |
||||
|
v-if="lf" |
||||
|
:lf="lf" |
||||
|
@catData="$_catData" |
||||
|
></Control> |
||||
|
<!-- 节点面板 --> |
||||
|
<NodePanel v-if="lf" :lf="lf" :nodeList="nodeList"></NodePanel> |
||||
|
<!-- 画布 --> |
||||
|
<div id="LF-view"></div> |
||||
|
<!-- 用户节点自定义操作面板 --> |
||||
|
<AddPanel |
||||
|
v-if="showAddPanel" |
||||
|
class="add-panel" |
||||
|
:style="addPanelStyle" |
||||
|
:lf="lf" |
||||
|
:nodeData="addClickNode" |
||||
|
@addNodeFinish="hideAddPanel" |
||||
|
> |
||||
|
</AddPanel> |
||||
|
<!-- 属性面板 --> |
||||
|
<el-drawer |
||||
|
title="设置节点属性" |
||||
|
:visible.sync="dialogVisible" |
||||
|
direction="rtl" |
||||
|
size="500px" |
||||
|
:before-close="closeDialog"> |
||||
|
<PropertyDialog |
||||
|
v-if="dialogVisible" |
||||
|
:nodeData="clickNode" |
||||
|
:lf="lf" |
||||
|
@setPropertiesFinish="closeDialog" |
||||
|
></PropertyDialog> |
||||
|
</el-drawer> |
||||
|
<!-- 数据查看面板 --> |
||||
|
<el-dialog |
||||
|
title="数据" |
||||
|
:visible.sync="dataVisible" |
||||
|
width="50%"> |
||||
|
<DataDialog :graphData="graphData"></DataDialog> |
||||
|
</el-dialog> |
||||
|
<h4>更多示例: |
||||
|
<el-button type="text" @click="goto">BpmnElement & TurboAdpter</el-button> |
||||
|
</h4> |
||||
|
<el-drawer |
||||
|
title="我是标题" |
||||
|
:visible.sync="drawer" |
||||
|
:direction="rtl"> |
||||
|
<span>我来啦!</span> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import LogicFlow from '@logicflow/core' |
||||
|
// const LogicFlow = window.LogicFlow |
||||
|
import { Menu, Snapshot } from '@logicflow/extension' |
||||
|
import '@logicflow/core/dist/style/index.css' |
||||
|
import '@logicflow/extension/lib/style/index.css' |
||||
|
import NodePanel from './LFComponents/NodePanel.vue' |
||||
|
import AddPanel from './LFComponents/AddPanel.vue' |
||||
|
import Control from './LFComponents/Control.vue' |
||||
|
import PropertyDialog from './PropertySetting/PropertyDialog.vue' |
||||
|
import DataDialog from './LFComponents/DataDialog.vue' |
||||
|
import { nodeList } from './config' |
||||
|
|
||||
|
import registerStart from './registerNode/registerStart' |
||||
|
import registerUser from './registerNode/registerUser' |
||||
|
import registerEnd from './registerNode/registerEnd' |
||||
|
import registerPush from './registerNode/registerPush' |
||||
|
import registerDownload from './registerNode/registerDownload' |
||||
|
import registerPolyline from './registerNode/registerPolyline' |
||||
|
import registerTask from './registerNode/registerTask' |
||||
|
// import registerConnect from './registerNode/registerConnect' |
||||
|
// import { |
||||
|
// registerStart, |
||||
|
// registerUser, |
||||
|
// registerEnd, |
||||
|
// registerPush, |
||||
|
// registerDownload, |
||||
|
// registerPolyline, |
||||
|
// registerTask, |
||||
|
// registerConnect, |
||||
|
// } from './registerNode' |
||||
|
const demoData = import.meta.glob('./data.json') |
||||
|
|
||||
|
export default { |
||||
|
name: 'LF', |
||||
|
components: { NodePanel, AddPanel, Control, PropertyDialog, DataDialog }, |
||||
|
data () { |
||||
|
return { |
||||
|
drawer: false, |
||||
|
lf: null, |
||||
|
showAddPanel: false, |
||||
|
addPanelStyle: { |
||||
|
top: 0, |
||||
|
left: 0 |
||||
|
}, |
||||
|
nodeData: null, |
||||
|
addClickNode: null, |
||||
|
clickNode: null, |
||||
|
dialogVisible: false, |
||||
|
graphData: null, |
||||
|
dataVisible: false, |
||||
|
config: { |
||||
|
background: { |
||||
|
color: '#f7f9ff' |
||||
|
}, |
||||
|
grid: { |
||||
|
size: 10, |
||||
|
visible: false |
||||
|
}, |
||||
|
keyboard: { |
||||
|
enabled: true |
||||
|
}, |
||||
|
style: { |
||||
|
rect: { |
||||
|
radius: 6, |
||||
|
}, |
||||
|
edgeText: { // 边文本样式 |
||||
|
background: { |
||||
|
fill: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
edgeTextDraggable: true, |
||||
|
guards: { |
||||
|
beforeClone (data) { |
||||
|
console.log('beforeClone', data) |
||||
|
return true |
||||
|
}, |
||||
|
beforeDelete (data) { |
||||
|
// 可以根据data数据判断是否允许删除,允许返回true,不允许返回false |
||||
|
// 文档: http://logic-flow.org/guide/basic/keyboard.html#%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%88%A0%E9%99%A4%E6%88%96%E8%80%85%E6%8B%B7%E8%B4%9D%E8%A1%8C%E4%B8%BA |
||||
|
console.log('beforeDelete', data) |
||||
|
// _this.$message('不允许删除', 'error') |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
moveData: {}, |
||||
|
nodeList, |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.$_initLf() |
||||
|
}, |
||||
|
methods: { |
||||
|
$_initLf () { |
||||
|
// 画布配置 |
||||
|
|
||||
|
// 使用插件 |
||||
|
LogicFlow.use(Menu) |
||||
|
LogicFlow.use(Snapshot) |
||||
|
const lf = new LogicFlow({...this.config, container: document.querySelector('#LF-view'),}) |
||||
|
this.lf = lf |
||||
|
// lf.setDefaultEdgeType('bpmn:sequenceFlow'); |
||||
|
// 菜单配置文档:http://logic-flow.org/guide/extension/extension-components.html#%E8%8F%9C%E5%8D%95 |
||||
|
// 重置,增加,节点自由配置(以user节点为示例) |
||||
|
// lf.setMenuConfig({ |
||||
|
// nodeMenu: [], |
||||
|
// edgeMenu: [] |
||||
|
// }) |
||||
|
// lf.addMenuConfig({ |
||||
|
// nodeMenu: [ |
||||
|
// { |
||||
|
// text: '分享', |
||||
|
// callback () { |
||||
|
// alert('分享成功!') |
||||
|
// } |
||||
|
// }, |
||||
|
// { |
||||
|
// text: '属性', |
||||
|
// callback (node) { |
||||
|
// alert(` |
||||
|
// 节点id:${node.id} |
||||
|
// 节点类型:${node.type} |
||||
|
// 节点坐标:(x: ${node.x}, y: ${node.y})` |
||||
|
// ) |
||||
|
// } |
||||
|
// } |
||||
|
// ], |
||||
|
// edgeMenu: [ |
||||
|
// { |
||||
|
// text: '属性', |
||||
|
// callback (edge) { |
||||
|
// alert(` |
||||
|
// 边id:${edge.id} |
||||
|
// 边类型:${edge.type} |
||||
|
// 边坐标:(x: ${edge.x}, y: ${edge.y}) |
||||
|
// 源节点id:${edge.sourceNodeId} |
||||
|
// 目标节点id:${edge.targetNodeId}` |
||||
|
// ) |
||||
|
// } |
||||
|
// } |
||||
|
// ] |
||||
|
// }) |
||||
|
// 设置主题 |
||||
|
lf.setTheme({ |
||||
|
circle: { |
||||
|
r: 20, |
||||
|
stroke: '#000000', |
||||
|
outlineColor: '#88f', |
||||
|
strokeWidth: 1 |
||||
|
}, |
||||
|
rect: { |
||||
|
outlineColor: '#88f', |
||||
|
strokeWidth: 1 |
||||
|
}, |
||||
|
polygon: { |
||||
|
strokeWidth: 1 |
||||
|
}, |
||||
|
polyline: { |
||||
|
stroke: '#000000', |
||||
|
hoverStroke: '#000000', |
||||
|
selectedStroke: '#000000', |
||||
|
outlineColor: '#88f', |
||||
|
strokeWidth: 1 |
||||
|
}, |
||||
|
nodeText: { |
||||
|
color: '#000000' |
||||
|
}, |
||||
|
edgeText: { |
||||
|
color: '#000000', |
||||
|
background: { |
||||
|
fill: '#f7f9ff' |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
this.$_registerNode() |
||||
|
}, |
||||
|
// 自定义 |
||||
|
$_registerNode () { |
||||
|
registerStart(this.lf) |
||||
|
registerUser(this.lf) |
||||
|
registerEnd(this.lf) |
||||
|
registerPush(this.lf, this.clickPlus, this.mouseDownPlus) |
||||
|
registerDownload(this.lf) |
||||
|
registerPolyline(this.lf) |
||||
|
registerTask(this.lf) |
||||
|
// registerConnect(this.lf) |
||||
|
this.$_render() |
||||
|
}, |
||||
|
$_render () { |
||||
|
this.lf.render(demoData) |
||||
|
this.$_LfEvent() |
||||
|
}, |
||||
|
$_getData () { |
||||
|
const data = this.lf.getGraphData() |
||||
|
console.log(JSON.stringify(data)) |
||||
|
}, |
||||
|
$_LfEvent () { |
||||
|
|
||||
|
this.lf.on('node:click', ({data}) => { |
||||
|
|
||||
|
console.log(data) |
||||
|
this.$data.clickNode = data |
||||
|
// console.log(this.$data.clickNode) |
||||
|
// console.log(this.$data.dialogVisible) |
||||
|
this.dialogVisible = true |
||||
|
|
||||
|
this.$data.drawer=false |
||||
|
console.log(this.$data.drawer) |
||||
|
}) |
||||
|
this.lf.on('edge:click', ({data}) => { |
||||
|
console.log('edge:click', data) |
||||
|
this.$data.clickNode = data |
||||
|
this.$data.dialogVisible = true |
||||
|
}) |
||||
|
this.lf.on('element:click', () => { |
||||
|
this.hideAddPanel() |
||||
|
}) |
||||
|
this.lf.on('edge:add', ({data}) => { |
||||
|
console.log('edge:add', data) |
||||
|
}) |
||||
|
this.lf.on('node:mousemove', ({data}) => { |
||||
|
console.log('node:mousemove') |
||||
|
this.moveData = data |
||||
|
}) |
||||
|
this.lf.on('blank:click', () => { |
||||
|
this.hideAddPanel() |
||||
|
}) |
||||
|
this.lf.on('connection:not-allowed', (data) => { |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: data.msg |
||||
|
}) |
||||
|
}) |
||||
|
this.lf.on('node:mousemove', () => { |
||||
|
console.log('on mousemove') |
||||
|
}) |
||||
|
}, |
||||
|
clickPlus (e, attributes) { |
||||
|
e.stopPropagation() |
||||
|
console.log('clickPlus', e, attributes) |
||||
|
const { clientX, clientY } = e |
||||
|
console.log(clientX, clientY) |
||||
|
this.$data.addPanelStyle.top = (clientY - 40) + 'px' |
||||
|
this.$data.addPanelStyle.left = clientX + 'px' |
||||
|
this.$data.showAddPanel = true |
||||
|
this.$data.addClickNode = attributes |
||||
|
}, |
||||
|
mouseDownPlus (e, attributes) { |
||||
|
e.stopPropagation() |
||||
|
console.log('mouseDownPlus', e, attributes) |
||||
|
}, |
||||
|
hideAddPanel () { |
||||
|
this.$data.showAddPanel = false |
||||
|
this.$data.addPanelStyle.top = 0 |
||||
|
this.$data.addPanelStyle.left = 0 |
||||
|
this.$data.addClickNode = null |
||||
|
}, |
||||
|
closeDialog () { |
||||
|
this.$data.dialogVisible = false |
||||
|
}, |
||||
|
$_catData(){ |
||||
|
console.log() |
||||
|
this.$data.graphData = this.$data.lf.getGraphData(); |
||||
|
this.$data.dataVisible = true; |
||||
|
}, |
||||
|
goto () { |
||||
|
this.$router.push('/TurboAdpter') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.logic-flow-view { |
||||
|
height: 100vh; |
||||
|
position: relative; |
||||
|
} |
||||
|
.demo-title{ |
||||
|
text-align: center; |
||||
|
margin: 20px; |
||||
|
} |
||||
|
.demo-control{ |
||||
|
position: absolute; |
||||
|
top: 50px; |
||||
|
right: 50px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
#LF-view{ |
||||
|
width: calc(100% - 100px); |
||||
|
height: 80%; |
||||
|
outline: none; |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
.time-plus{ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.add-panel { |
||||
|
position: absolute; |
||||
|
z-index: 11; |
||||
|
background-color: white; |
||||
|
padding: 10px 5px; |
||||
|
} |
||||
|
.el-drawer__body { |
||||
|
height: 80%; |
||||
|
overflow: auto; |
||||
|
margin-top: -30px; |
||||
|
z-index: 3; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,108 @@ |
|||||
|
<template> |
||||
|
<el-tabs tab-position="left"> |
||||
|
<el-tab-pane label="添加动作"> |
||||
|
<div v-for="item in nodeList" :key="item.type"> |
||||
|
<el-button class="add-node-btn" type="primary" size="mini" @click="$_addNode(item)">{{item.label}}</el-button> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="添加组"> |
||||
|
<el-button class="add-node-btn" type="primary" size="mini" @click="$_addTempalte">模板</el-button> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'AddPanel', |
||||
|
props: { |
||||
|
nodeData: Object, |
||||
|
lf: Object || String |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
nodeList: [ |
||||
|
{ |
||||
|
type: 'user', |
||||
|
label: '用户' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'push', |
||||
|
label: '推送' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
$_addNode (item) { |
||||
|
const {lf, nodeData} = this.$props |
||||
|
const { id, x, y } = nodeData |
||||
|
const nextNode = lf.addNode({ |
||||
|
type: item.type, |
||||
|
x: x + 150, |
||||
|
y: y + 150 |
||||
|
}) |
||||
|
const nextId = nextNode.id |
||||
|
lf.createEdge({sourceNodeId: id, targetNodeId: nextId}) |
||||
|
this.$emit('addNodeFinish') |
||||
|
}, |
||||
|
$_addTempalte () { |
||||
|
const {lf, nodeData} = this.$props |
||||
|
const { id, x, y } = nodeData |
||||
|
const timeNode = lf.addNode({ |
||||
|
type: 'download', |
||||
|
x, |
||||
|
y: y + 150 |
||||
|
}) |
||||
|
const userNode = lf.addNode({ |
||||
|
type: 'user', |
||||
|
x: x + 150, |
||||
|
y: y + 150 |
||||
|
}) |
||||
|
const pushNode = lf.addNode({ |
||||
|
type: 'push', |
||||
|
x: x + 150, |
||||
|
y: y + 300, |
||||
|
properties: {} |
||||
|
}) |
||||
|
const endNode = lf.addNode({ |
||||
|
type: 'end', |
||||
|
x: x + 300, |
||||
|
y: y + 150 |
||||
|
}) |
||||
|
const endNode2 = lf.addNode({ |
||||
|
type: 'end', |
||||
|
x: x + 300, |
||||
|
y: y + 300 |
||||
|
}) |
||||
|
lf.createEdge({sourceNodeId: id, targetNodeId: timeNode.id}) |
||||
|
lf.createEdge({sourceNodeId: timeNode.id, targetNodeId: userNode.id}) |
||||
|
lf.createEdge({ |
||||
|
sourceNodeId: userNode.id, |
||||
|
targetNodeId: endNode.id, |
||||
|
endPoint: {x: x + 280, y: y + 150}, |
||||
|
text: { |
||||
|
value: 'Y', |
||||
|
x: x + 230, |
||||
|
y: y + 140 |
||||
|
} |
||||
|
}) |
||||
|
lf.createEdge({ |
||||
|
sourceNodeId: userNode.id, |
||||
|
targetNodeId: pushNode.id, |
||||
|
text: { |
||||
|
value: 'N', |
||||
|
x: x + 160, |
||||
|
y: y + 230 |
||||
|
} |
||||
|
}) |
||||
|
lf.createEdge({sourceNodeId: pushNode.id, targetNodeId: endNode2.id, endPoint: {x: x + 280, y: y + 300}}) |
||||
|
this.$emit('addNodeFinish') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.add-node-btn{ |
||||
|
margin-bottom: 10px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,74 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-button-group> |
||||
|
<el-button type="plain" size="small" @click="$_zoomIn">放大</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_zoomReset">大小适应</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_translateRest">定位还原</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_reset">还原(大小&定位)</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_download">下载图片</el-button> |
||||
|
<el-button type="plain" size="small" @click="$_catData">查看数据</el-button> |
||||
|
<el-button v-if="catTurboData" type="plain" size="small" @click="$_catTurboData">查看turbo数据</el-button> |
||||
|
</el-button-group> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Control', |
||||
|
props: { |
||||
|
lf: Object || String, |
||||
|
catTurboData: Boolean |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
undoDisable: true, |
||||
|
redoDisable: true, |
||||
|
graphData: null, |
||||
|
dataVisible: false, |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => { |
||||
|
this.$data.undoDisable = !undoAble |
||||
|
this.$data.redoDisable = !redoAble |
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
$_zoomIn(){ |
||||
|
this.$props.lf.zoom(true); |
||||
|
}, |
||||
|
$_zoomOut(){ |
||||
|
this.$props.lf.zoom(false); |
||||
|
}, |
||||
|
$_zoomReset(){ |
||||
|
this.$props.lf.resetZoom(); |
||||
|
}, |
||||
|
$_translateRest(){ |
||||
|
this.$props.lf.resetTranslate(); |
||||
|
}, |
||||
|
$_reset(){ |
||||
|
this.$props.lf.resetZoom(); |
||||
|
this.$props.lf.resetTranslate(); |
||||
|
}, |
||||
|
$_undo(){ |
||||
|
this.$props.lf.undo(); |
||||
|
}, |
||||
|
$_redo(){ |
||||
|
this.$props.lf.redo(); |
||||
|
}, |
||||
|
$_download(){ |
||||
|
this.$props.lf.getSnapshot(); |
||||
|
}, |
||||
|
$_catData(){ |
||||
|
this.$emit('catData'); |
||||
|
}, |
||||
|
$_catTurboData(){ |
||||
|
this.$emit('catTurboData'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<vue-json-pretty :path="'res'" :data="graphData"> </vue-json-pretty> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import VueJsonPretty from 'vue-json-pretty'; |
||||
|
import 'vue-json-pretty/lib/styles.css'; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
graphData: Object |
||||
|
}, |
||||
|
components: { |
||||
|
VueJsonPretty, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="node-panel"> |
||||
|
<div class="node-item" |
||||
|
v-for="item in nodeList" |
||||
|
:key="item.text" |
||||
|
@mousedown="$_dragNode(item)"> |
||||
|
<div class="node-item-icon" :class="item.class"> |
||||
|
<div v-if="item.type === 'user' || item.type === 'time'" class="shape"></div> |
||||
|
</div> |
||||
|
<span class="node-label">{{item.text}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'NodePanel', |
||||
|
props: { |
||||
|
lf: Object, |
||||
|
nodeList: Array, |
||||
|
}, |
||||
|
methods: { |
||||
|
$_dragNode (item) { |
||||
|
this.$props.lf.dnd.startDrag({ |
||||
|
type: item.type, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.node-panel { |
||||
|
position: absolute; |
||||
|
top: 100px; |
||||
|
left: 50px; |
||||
|
width: 70px; |
||||
|
padding: 20px 10px; |
||||
|
background-color: white; |
||||
|
box-shadow: 0 0 10px 1px rgb(228, 224, 219); |
||||
|
border-radius: 6px; |
||||
|
text-align: center; |
||||
|
z-index: 101; |
||||
|
} |
||||
|
.node-item { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.node-item-icon { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
margin-left: 20px; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-label { |
||||
|
font-size: 12px; |
||||
|
margin-top: 5px; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.node-start{ |
||||
|
background: url('../background/start.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-rect{ |
||||
|
border: 1px solid black; |
||||
|
} |
||||
|
.node-user{ |
||||
|
background: url('../background/user.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-time{ |
||||
|
background: url('../background/time.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-push{ |
||||
|
background: url('../background/push.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-download{ |
||||
|
background: url('../background/download.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-click{ |
||||
|
background: url('../background/click.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.node-end{ |
||||
|
background: url('../background/end.png') no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.bpmn-start { |
||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==) center center no-repeat; |
||||
|
cursor: grab; |
||||
|
} |
||||
|
.bpmn-end { |
||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC) center center no-repeat; |
||||
|
cursor: grab; |
||||
|
} |
||||
|
.bpmn-user { |
||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==) center center no-repeat; |
||||
|
cursor: grab; |
||||
|
} |
||||
|
.bpmn-exclusiveGateway { |
||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=) center center no-repeat; |
||||
|
cursor: grab; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,74 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-form label-width="80px" :model="formData"> |
||||
|
<el-form-item label="文案"> |
||||
|
<el-input v-model="formData.text"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称"> |
||||
|
<el-input v-model="formData.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动区域"> |
||||
|
<el-input v-model="formData.region"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动形式"> |
||||
|
<el-input v-model="formData.type"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="A"> |
||||
|
<el-input v-model="formData.a.a1"></el-input> |
||||
|
<el-input v-model="formData.a.a2"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">保存</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: '', |
||||
|
props: { |
||||
|
nodeData: Object, |
||||
|
lf: Object || String, |
||||
|
}, |
||||
|
mounted() { |
||||
|
const { properties, text } = this.$props.nodeData |
||||
|
if (properties) { |
||||
|
this.$data.formData = Object.assign({}, this.$data.formData, properties) |
||||
|
} |
||||
|
if (text && text.value) { |
||||
|
this.$data.formData.text = text.value |
||||
|
} |
||||
|
if (text && text.value) { |
||||
|
this.$data.text = text.value |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
text: '', |
||||
|
formData: { |
||||
|
text: '', |
||||
|
name: '', |
||||
|
region: '', |
||||
|
type: '', |
||||
|
a: { |
||||
|
a1: '', |
||||
|
a2: '' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
const { id } = this.$props.nodeData |
||||
|
this.$props.lf.setProperties(id, { |
||||
|
...this.$data.formData |
||||
|
}); |
||||
|
console.log(6666, this.$data.formData); |
||||
|
this.$props.lf.updateText(id, this.$data.formData.text); |
||||
|
this.$emit('onClose') |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<div class="property-dialog"> |
||||
|
<User |
||||
|
v-if="nodeData.type === 'user'" |
||||
|
:nodeData="nodeData" |
||||
|
:lf="lf" |
||||
|
@onClose="handleClose"/> |
||||
|
<CommonProperty |
||||
|
v-else |
||||
|
:nodeData="nodeData" |
||||
|
:lf="lf" |
||||
|
@onClose="handleClose"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import CommonProperty from './CommonProperty.vue' |
||||
|
import User from './User.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PropertyDialog', |
||||
|
components: { |
||||
|
CommonProperty, |
||||
|
User |
||||
|
}, |
||||
|
props: { |
||||
|
nodeData: Object, |
||||
|
lf: Object |
||||
|
}, |
||||
|
data () { |
||||
|
return {} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClose () { |
||||
|
this.$emit('setPropertiesFinish') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.property-dialog{ |
||||
|
padding: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,90 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-form ref="form" :model="form" label-width="80px"> |
||||
|
<el-form-item label="活动名称"> |
||||
|
<el-input v-model="form.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动区域"> |
||||
|
<el-select v-model="form.region" placeholder="请选择活动区域"> |
||||
|
<el-option label="区域一" value="shanghai"></el-option> |
||||
|
<el-option label="区域二" value="beijing"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动时间"> |
||||
|
<el-col :span="11"> |
||||
|
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> |
||||
|
</el-col> |
||||
|
<el-col class="line" :span="2">-</el-col> |
||||
|
<el-col :span="11"> |
||||
|
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> |
||||
|
</el-col> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="即时配送"> |
||||
|
<el-switch v-model="form.delivery"></el-switch> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动性质"> |
||||
|
<el-checkbox-group v-model="form.type"> |
||||
|
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> |
||||
|
<el-checkbox label="地推活动" name="type"></el-checkbox> |
||||
|
<el-checkbox label="线下主题活动" name="type"></el-checkbox> |
||||
|
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="特殊资源"> |
||||
|
<el-radio-group v-model="form.resource"> |
||||
|
<el-radio label="线上品牌商赞助"></el-radio> |
||||
|
<el-radio label="线下场地免费"></el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动形式"> |
||||
|
<el-input type="textarea" v-model="form.desc"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">保存</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: '', |
||||
|
props: { |
||||
|
nodeData: Object, |
||||
|
lf: Object || String, |
||||
|
}, |
||||
|
mounted() { |
||||
|
const { properties } = this.$props.nodeData |
||||
|
if (properties) { |
||||
|
this.$data.form = Object.assign({}, this.$data.form, properties) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: { |
||||
|
name: '', |
||||
|
region: '', |
||||
|
date1: '', |
||||
|
date2: '', |
||||
|
delivery: false, |
||||
|
type: [], |
||||
|
resource: '', |
||||
|
desc: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
console.log('submit!'); |
||||
|
// const { id } = this.$props.nodeData |
||||
|
// this.$props.lf.setProperties(id, this.$data.form); |
||||
|
const nodeData = this.$props.nodeData |
||||
|
nodeData.properties = this.$data.form |
||||
|
console.log(nodeData); |
||||
|
this.$props.lf.setNodeData(nodeData); |
||||
|
this.$emit('onClose') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
测试 |
||||
|
<el-button @click="goto">流程</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Test', |
||||
|
data () { |
||||
|
return {} |
||||
|
}, |
||||
|
methods: { |
||||
|
goto () { |
||||
|
this.$router.push('/') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,167 @@ |
|||||
|
<template> |
||||
|
<div class="logic-flow-view"> |
||||
|
<h3 class="demo-title">LogicFlow Turbo Adpter</h3> |
||||
|
<!-- 辅助工具栏 --> |
||||
|
<Control |
||||
|
class="demo-control" |
||||
|
v-if="lf" |
||||
|
:lf="lf" |
||||
|
catTurboData=true |
||||
|
@catData="$_catData" |
||||
|
@catTurboData="$_catTurboData" |
||||
|
></Control> |
||||
|
<!-- 节点面板 --> |
||||
|
<NodePanel :lf="lf" :nodeList="nodeList"></NodePanel> |
||||
|
<!-- 画布 --> |
||||
|
<div id="LF-Turbo"></div> |
||||
|
<!-- 数据查看面板 --> |
||||
|
<el-dialog |
||||
|
title="数据" |
||||
|
:visible.sync="dataVisible" |
||||
|
width="50%"> |
||||
|
<DataDialog :graphData="graphData"></DataDialog> |
||||
|
</el-dialog> |
||||
|
<h4>更多示例: |
||||
|
<el-button type="text" @click="goto">LogicFlow</el-button> |
||||
|
</h4> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import LogicFlow from '@logicflow/core' |
||||
|
import { Snapshot, BpmnElement,BpmnAdapter } from '@logicflow/extension' |
||||
|
import '@logicflow/core/dist/style/index.css' |
||||
|
import '@logicflow/extension/lib/style/index.css' |
||||
|
import NodePanel from './LFComponents/NodePanel.vue' |
||||
|
import Control from './LFComponents/Control.vue' |
||||
|
import DataDialog from './LFComponents/DataDialog.vue' |
||||
|
import { toTurboData, toLogicflowData } from './Util/AdpterForTurbo'; |
||||
|
import { BpmnNode } from './config' |
||||
|
const demoData = import.meta.glob('./dataTurbo.json') |
||||
|
|
||||
|
export default { |
||||
|
name: 'LF', |
||||
|
components: { NodePanel, Control, DataDialog }, |
||||
|
data () { |
||||
|
return { |
||||
|
lf: null, |
||||
|
dialogVisible: false, |
||||
|
graphData: null, |
||||
|
dataVisible: false, |
||||
|
config: { |
||||
|
grid: true, |
||||
|
background: { |
||||
|
color: '#f7f9ff' |
||||
|
}, |
||||
|
keyboard: { |
||||
|
enabled: true |
||||
|
}, |
||||
|
}, |
||||
|
nodeList: BpmnNode, |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.$_initLf() |
||||
|
}, |
||||
|
methods: { |
||||
|
$_initLf () { |
||||
|
// 画布配置 |
||||
|
LogicFlow.use(Snapshot) |
||||
|
// 使用bpmn插件,引入bpmn元素,这些元素可以在turbo中转换后使用 |
||||
|
LogicFlow.use(BpmnElement) |
||||
|
const lf = new LogicFlow({...this.config, container: document.querySelector('#LF-Turbo')}) |
||||
|
this.lf = lf |
||||
|
// 设置边类型bpmn:sequenceFlow为默认类型 |
||||
|
lf.setDefaultEdgeType('bpmn:sequenceFlow') |
||||
|
this.$_render() |
||||
|
}, |
||||
|
$_render () { |
||||
|
|
||||
|
// Turbo数据转换为LogicFlow内部识别的数据结构 |
||||
|
const lFData = toLogicflowData(demoData) |
||||
|
|
||||
|
this.lf.render(lFData) |
||||
|
console.log("lFData") |
||||
|
console.log(lFData) |
||||
|
}, |
||||
|
closeDialog () { |
||||
|
this.$data.dialogVisible = false |
||||
|
}, |
||||
|
$_catData(){ |
||||
|
LogicFlow.use(BpmnAdapter); |
||||
|
|
||||
|
// 示例化 LogicFlow |
||||
|
const lf = new LogicFlow(); |
||||
|
lf.render(); |
||||
|
|
||||
|
// 通过 getGraphData 来获取转换后的数据 |
||||
|
this.$data.graphData =lf.getGraphData(); |
||||
|
console.log(this.$data.graphData) |
||||
|
// console.log(this.$data.lf.getGraphRawData) |
||||
|
// this.$data.graphData = this.$data.lf.getGraphData(); |
||||
|
// console.log(this.$data.graphData) |
||||
|
// this.$data.dataVisible = true; |
||||
|
}, |
||||
|
$_catTurboData(){ |
||||
|
const graphData = this.$data.lf.getGraphData(); |
||||
|
// 数据转化为Turbo识别的数据结构 |
||||
|
console.log("graphData") |
||||
|
console.log(graphData) |
||||
|
this.$data.graphData = toTurboData(graphData) |
||||
|
this.$data.dataVisible = true; |
||||
|
console.log("this.$data.graphData") |
||||
|
console.log(this.$data.graphData) |
||||
|
}, |
||||
|
$_xml(){ |
||||
|
LogicFlow.use(BpmnAdapter); |
||||
|
|
||||
|
// 示例化 LogicFlow |
||||
|
const lf = new LogicFlow(); |
||||
|
lf.render(); |
||||
|
|
||||
|
// 通过 getGraphData 来获取转换后的数据 |
||||
|
lf.getGraphData(); |
||||
|
}, |
||||
|
goto () { |
||||
|
this.$router.push('/') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.logic-flow-view { |
||||
|
height: 100vh; |
||||
|
position: relative; |
||||
|
} |
||||
|
.demo-title{ |
||||
|
text-align: center; |
||||
|
margin: 20px; |
||||
|
} |
||||
|
.demo-control{ |
||||
|
position: absolute; |
||||
|
top: 50px; |
||||
|
right: 50px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
#LF-Turbo{ |
||||
|
width: calc(100% - 100px); |
||||
|
height: 80%; |
||||
|
outline: none; |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
.time-plus{ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.add-panel { |
||||
|
position: absolute; |
||||
|
z-index: 11; |
||||
|
background-color: white; |
||||
|
padding: 10px 5px; |
||||
|
} |
||||
|
.el-drawer__body { |
||||
|
height: 80%; |
||||
|
overflow: auto; |
||||
|
margin-top: -30px; |
||||
|
z-index: 3; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,166 @@ |
|||||
|
|
||||
|
const TurboType = { |
||||
|
SEQUENCE_FLOW: 1, |
||||
|
START_EVENT : 2, |
||||
|
END_EVENT : 3, |
||||
|
USER_TASK: 4, |
||||
|
SERVICE_TASK : 5, |
||||
|
EXCLUSIVE_GATEWAY : 6, |
||||
|
} |
||||
|
|
||||
|
function getTurboType (type) { |
||||
|
switch (type) { |
||||
|
case 'bpmn:sequenceFlow': |
||||
|
return TurboType.SEQUENCE_FLOW; |
||||
|
case 'bpmn:startEvent': |
||||
|
return TurboType.START_EVENT; |
||||
|
case 'bpmn:endEvent': |
||||
|
return TurboType.END_EVENT; |
||||
|
case 'bpmn:userTask': |
||||
|
return TurboType.USER_TASK; |
||||
|
case 'bpmn:serviceTask': |
||||
|
return TurboType.SERVICE_TASK; |
||||
|
case 'bpmn:exclusiveGateway': |
||||
|
return TurboType.EXCLUSIVE_GATEWAY; |
||||
|
default: |
||||
|
return type; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function convertNodeToTurboElement(node) { |
||||
|
const { id, type, x, y, text = '', properties } = node; |
||||
|
return { |
||||
|
incoming: [], |
||||
|
outgoing: [], |
||||
|
dockers: [], |
||||
|
type: getTurboType(node.type), |
||||
|
properties: { |
||||
|
...properties, |
||||
|
name: text && text.value || '', |
||||
|
x: x, |
||||
|
y: y, |
||||
|
text, |
||||
|
logicFlowType: type, |
||||
|
}, |
||||
|
key: id, |
||||
|
}; |
||||
|
} |
||||
|
function convertEdgeToTurboElement (edge) { |
||||
|
const { |
||||
|
id, |
||||
|
type, |
||||
|
sourceNodeId, |
||||
|
targetNodeId, |
||||
|
startPoint, |
||||
|
endPoint, |
||||
|
pointsList, |
||||
|
text = '', |
||||
|
properties } = edge; |
||||
|
return { |
||||
|
incoming: [sourceNodeId], |
||||
|
outgoing: [targetNodeId], |
||||
|
type: getTurboType(type), |
||||
|
dockers: [], |
||||
|
properties: { |
||||
|
...properties, |
||||
|
name: text && text.value || '', |
||||
|
text, |
||||
|
startPoint, |
||||
|
endPoint, |
||||
|
pointsList, |
||||
|
logicFlowType: type, |
||||
|
}, |
||||
|
key: id, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export function toTurboData(data) { |
||||
|
const nodeMap = new Map(); |
||||
|
const turboData = { |
||||
|
flowElementList: [], |
||||
|
}; |
||||
|
data.nodes.forEach((node) => { |
||||
|
const flowElement = convertNodeToTurboElement(node); |
||||
|
turboData.flowElementList.push(flowElement); |
||||
|
nodeMap.set(node.id, flowElement); |
||||
|
}); |
||||
|
data.edges.forEach((edge) => { |
||||
|
const flowElement = convertEdgeToTurboElement(edge); |
||||
|
const sourceElement = nodeMap.get(edge.sourceNodeId); |
||||
|
sourceElement.outgoing.push(flowElement.key); |
||||
|
const targetElement = nodeMap.get(edge.targetNodeId); |
||||
|
targetElement.incoming.push(flowElement.key); |
||||
|
turboData.flowElementList.push(flowElement); |
||||
|
}); |
||||
|
return turboData; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function convertFlowElementToEdge(element) { |
||||
|
const { incoming, outgoing, properties, key } = element; |
||||
|
const { |
||||
|
text, |
||||
|
startPoint, |
||||
|
endPoint, |
||||
|
pointsList, |
||||
|
logicFlowType |
||||
|
} = properties; |
||||
|
const edge = { |
||||
|
id: key, |
||||
|
type: logicFlowType, |
||||
|
sourceNodeId: incoming[0], |
||||
|
targetNodeId: outgoing[0], |
||||
|
text, |
||||
|
startPoint, |
||||
|
endPoint, |
||||
|
pointsList, |
||||
|
properties: {} |
||||
|
}; |
||||
|
const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType']; |
||||
|
Object.keys(element.properties).forEach(property => { |
||||
|
if (excludeProperties.indexOf(property) === -1) { |
||||
|
edge.properties[property] = element.properties[property]; |
||||
|
} |
||||
|
}); |
||||
|
return edge; |
||||
|
} |
||||
|
|
||||
|
function convertFlowElementToNode(element) { |
||||
|
const { properties, key } = element; |
||||
|
const { x, y, text, logicFlowType } = properties; |
||||
|
const node = { |
||||
|
id: key, |
||||
|
type: logicFlowType, |
||||
|
x, |
||||
|
y, |
||||
|
text, |
||||
|
properties: {} |
||||
|
}; |
||||
|
const excludeProperties = ['x', 'y', 'text', 'logicFlowType']; |
||||
|
Object.keys(element.properties).forEach(property => { |
||||
|
if (excludeProperties.indexOf(property) === -1) { |
||||
|
node.properties[property] = element.properties[property]; |
||||
|
} |
||||
|
}); |
||||
|
return node; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
export function toLogicflowData(data) { |
||||
|
const lfData = { |
||||
|
nodes: [], |
||||
|
edges: [], |
||||
|
}; |
||||
|
const list = data.flowElementList; |
||||
|
list && list.length > 0 && list.forEach(element => { |
||||
|
if (element.type === TurboType.SEQUENCE_FLOW) { |
||||
|
const edge = convertFlowElementToEdge(element); |
||||
|
lfData.edges.push(edge); |
||||
|
} else { |
||||
|
const node = convertFlowElementToNode(element); |
||||
|
lfData.nodes.push(node); |
||||
|
} |
||||
|
}) |
||||
|
return lfData; |
||||
|
} |
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,60 @@ |
|||||
|
export const nodeList = [ |
||||
|
{ |
||||
|
text: '开始', |
||||
|
type: 'start', |
||||
|
class: 'node-start' |
||||
|
}, |
||||
|
{ |
||||
|
text: '矩形', |
||||
|
type: 'rect', |
||||
|
class: 'node-rect' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'user', |
||||
|
text: '用户', |
||||
|
class: 'node-user' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'push', |
||||
|
text: '推送', |
||||
|
class: 'node-push' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'download', |
||||
|
text: '位置', |
||||
|
class: 'node-download' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'connect', |
||||
|
text: 'Html', |
||||
|
class: 'node-push' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'end', |
||||
|
text: '结束', |
||||
|
class: 'node-end' |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export const BpmnNode = [ |
||||
|
{ |
||||
|
type: 'bpmn:startEvent', |
||||
|
text: '开始', |
||||
|
class: 'bpmn-start' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'bpmn:endEvent', |
||||
|
text: '结束', |
||||
|
class: 'bpmn-end' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'bpmn:exclusiveGateway', |
||||
|
text: '网关', |
||||
|
class: 'bpmn-exclusiveGateway' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'bpmn:userTask', |
||||
|
text: '用户', |
||||
|
class: 'bpmn-user' |
||||
|
}, |
||||
|
] |
||||
@ -0,0 +1,346 @@ |
|||||
|
{ |
||||
|
"nodes": [ |
||||
|
{ |
||||
|
"id": "742356ea-762b-4899-b96a-bd567e3c4361", |
||||
|
"type": "start", |
||||
|
"x": 220, |
||||
|
"y": 170, |
||||
|
"text": { |
||||
|
"x": 350, |
||||
|
"y": 190, |
||||
|
"value": "sdfasf" |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"baseType": "node" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "dacda6b6-48d3-4dff-911d-287704eb23d8", |
||||
|
"type": "rect", |
||||
|
"x": 350, |
||||
|
"y": 170, |
||||
|
"properties": {}, |
||||
|
"baseType": "node", |
||||
|
"text": { |
||||
|
"x": 350, |
||||
|
"y": 170, |
||||
|
"value": "基础节点" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "49106603-2b88-4b2c-b1e8-723c1f2210bd", |
||||
|
"type": "user", |
||||
|
"x": 530, |
||||
|
"y": 170, |
||||
|
"properties": {}, |
||||
|
"baseType": "node", |
||||
|
"text": { |
||||
|
"x": 530, |
||||
|
"y": 220, |
||||
|
"value": "自定义节点" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "647fa2bc-98ee-40cf-99c5-4756c0bc130d", |
||||
|
"type": "push", |
||||
|
"x": 690, |
||||
|
"y": 170, |
||||
|
"properties": {}, |
||||
|
"baseType": "node", |
||||
|
"text": { |
||||
|
"x": 690, |
||||
|
"y": 220, |
||||
|
"value": "自定义节点 可添加下一个节点/节点组" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "37e7bac3-8804-4237-abe9-7b6065c207e9", |
||||
|
"type": "download", |
||||
|
"x": 690, |
||||
|
"y": 320, |
||||
|
"properties": {}, |
||||
|
"baseType": "node" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "6bb4396f-54c9-4b1c-b34c-87ef004f2e29", |
||||
|
"type": "user", |
||||
|
"x": 840, |
||||
|
"y": 320, |
||||
|
"properties": {}, |
||||
|
"baseType": "node" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "abf76937-63b8-493c-a978-a4a58bc4f6b8", |
||||
|
"type": "push", |
||||
|
"x": 840, |
||||
|
"y": 470, |
||||
|
"properties": {}, |
||||
|
"baseType": "node" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "b119f24f-2669-4a90-a837-afd853b2ffcc", |
||||
|
"type": "end", |
||||
|
"x": 990, |
||||
|
"y": 320, |
||||
|
"properties": {}, |
||||
|
"baseType": "node" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "60326ad9-cae2-4a85-ae98-d340fb7bd67f", |
||||
|
"type": "end", |
||||
|
"x": 990, |
||||
|
"y": 470, |
||||
|
"properties": {}, |
||||
|
"baseType": "node" |
||||
|
}, |
||||
|
{ |
||||
|
"id": "414fe028-3609-4450-b0f4-e5aca7705e8c", |
||||
|
"type": "download", |
||||
|
"x": 860, |
||||
|
"y": 170, |
||||
|
"properties": {}, |
||||
|
"baseType": "node", |
||||
|
"text": { |
||||
|
"x": 860, |
||||
|
"y": 220, |
||||
|
"value": "自定义节点-设置颜色" |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"edges": [ |
||||
|
{ |
||||
|
"id": "00f55245-513e-43a2-9cb0-adb61b01adc8", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "742356ea-762b-4899-b96a-bd567e3c4361", |
||||
|
"targetNodeId": "dacda6b6-48d3-4dff-911d-287704eb23d8", |
||||
|
"startPoint": { |
||||
|
"x": 240, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 300, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 240, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 300, |
||||
|
"y": 170 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "bbf9754f-603e-48e4-85fe-84ed44459a6a", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "dacda6b6-48d3-4dff-911d-287704eb23d8", |
||||
|
"targetNodeId": "49106603-2b88-4b2c-b1e8-723c1f2210bd", |
||||
|
"startPoint": { |
||||
|
"x": 400, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 495, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 400, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 495, |
||||
|
"y": 170 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "12bb443b-4070-4a08-ad4d-2755ee856f0d", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "49106603-2b88-4b2c-b1e8-723c1f2210bd", |
||||
|
"targetNodeId": "647fa2bc-98ee-40cf-99c5-4756c0bc130d", |
||||
|
"startPoint": { |
||||
|
"x": 565, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 655, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 565, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 655, |
||||
|
"y": 170 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "33fa3c09-9c29-4cb7-8373-67d537b8b623", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "647fa2bc-98ee-40cf-99c5-4756c0bc130d", |
||||
|
"targetNodeId": "37e7bac3-8804-4237-abe9-7b6065c207e9", |
||||
|
"startPoint": { |
||||
|
"x": 690, |
||||
|
"y": 205 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 690, |
||||
|
"y": 295 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 690, |
||||
|
"y": 205 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 690, |
||||
|
"y": 295 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "2b5a5e89-005e-4fda-9a44-dc795050534f", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "37e7bac3-8804-4237-abe9-7b6065c207e9", |
||||
|
"targetNodeId": "6bb4396f-54c9-4b1c-b34c-87ef004f2e29", |
||||
|
"startPoint": { |
||||
|
"x": 715, |
||||
|
"y": 320 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 805, |
||||
|
"y": 320 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 715, |
||||
|
"y": 320 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 805, |
||||
|
"y": 320 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "62b54f8a-bcfd-494b-9144-5aeb09ca77a1", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "6bb4396f-54c9-4b1c-b34c-87ef004f2e29", |
||||
|
"targetNodeId": "b119f24f-2669-4a90-a837-afd853b2ffcc", |
||||
|
"startPoint": { |
||||
|
"x": 875, |
||||
|
"y": 320 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 970, |
||||
|
"y": 320 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"text": { |
||||
|
"x": 920, |
||||
|
"y": 310, |
||||
|
"value": "Y" |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 875, |
||||
|
"y": 320 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 970, |
||||
|
"y": 320 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "ba816d4a-5785-4911-9f78-03933f1463a1", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "6bb4396f-54c9-4b1c-b34c-87ef004f2e29", |
||||
|
"targetNodeId": "abf76937-63b8-493c-a978-a4a58bc4f6b8", |
||||
|
"startPoint": { |
||||
|
"x": 840, |
||||
|
"y": 355 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 840, |
||||
|
"y": 435 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"text": { |
||||
|
"x": 850, |
||||
|
"y": 400, |
||||
|
"value": "N" |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 840, |
||||
|
"y": 355 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 840, |
||||
|
"y": 435 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "2b3007ed-7a13-4db7-a1ea-6691d7564c34", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "abf76937-63b8-493c-a978-a4a58bc4f6b8", |
||||
|
"targetNodeId": "60326ad9-cae2-4a85-ae98-d340fb7bd67f", |
||||
|
"startPoint": { |
||||
|
"x": 875, |
||||
|
"y": 470 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 970, |
||||
|
"y": 470 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 875, |
||||
|
"y": 470 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 970, |
||||
|
"y": 470 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "262e2263-6c8c-4a38-b223-97848e9b5767", |
||||
|
"type": "polyline", |
||||
|
"sourceNodeId": "647fa2bc-98ee-40cf-99c5-4756c0bc130d", |
||||
|
"targetNodeId": "414fe028-3609-4450-b0f4-e5aca7705e8c", |
||||
|
"startPoint": { |
||||
|
"x": 725, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 835, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
"properties": {}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 725, |
||||
|
"y": 170 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 835, |
||||
|
"y": 170 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,214 @@ |
|||||
|
{ |
||||
|
"nodes": [ |
||||
|
{ |
||||
|
"id": "Event_1d42u4p", |
||||
|
"type": "bpmn:startEvent", |
||||
|
"x": 280, |
||||
|
"y": 200, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "开始" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 280, |
||||
|
"y": 200, |
||||
|
"value": "开始" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Event_08p8i6q", |
||||
|
"type": "bpmn:endEvent", |
||||
|
"x": 920, |
||||
|
"y": 200, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "结束" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 920, |
||||
|
"y": 200, |
||||
|
"value": "结束" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Gateway_1fngqgj", |
||||
|
"type": "bpmn:exclusiveGateway", |
||||
|
"x": 580, |
||||
|
"y": 200, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "网关" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 580, |
||||
|
"y": 200, |
||||
|
"value": "网关" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Activity_2mgtaia", |
||||
|
"type": "bpmn:userTask", |
||||
|
"x": 420, |
||||
|
"y": 200, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "用户" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 420, |
||||
|
"y": 200, |
||||
|
"value": "用户" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Activity_1sp8qc8", |
||||
|
"type": "bpmn:serviceTask", |
||||
|
"x": 760, |
||||
|
"y": 200, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "服务" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 760, |
||||
|
"y": 200, |
||||
|
"value": "服务" |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"edges": [ |
||||
|
{ |
||||
|
"id": "Flow_33inf2k", |
||||
|
"type": "bpmn:sequenceFlow", |
||||
|
"sourceNodeId": "Event_1d42u4p", |
||||
|
"targetNodeId": "Activity_2mgtaia", |
||||
|
"startPoint": { |
||||
|
"x": 298, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 370, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"properties": { |
||||
|
"name": "边" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 331, |
||||
|
"y": 200, |
||||
|
"value": "边" |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 298, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 370, |
||||
|
"y": 200 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Flow_0pfouf0", |
||||
|
"type": "bpmn:sequenceFlow", |
||||
|
"sourceNodeId": "Activity_2mgtaia", |
||||
|
"targetNodeId": "Gateway_1fngqgj", |
||||
|
"startPoint": { |
||||
|
"x": 470, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 555, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"properties": { |
||||
|
"name": "边2" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 507, |
||||
|
"y": 200, |
||||
|
"value": "边2" |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 470, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 555, |
||||
|
"y": 200 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Flow_3918lhh", |
||||
|
"type": "bpmn:sequenceFlow", |
||||
|
"sourceNodeId": "Gateway_1fngqgj", |
||||
|
"targetNodeId": "Activity_1sp8qc8", |
||||
|
"startPoint": { |
||||
|
"x": 605, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 710, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"properties": { |
||||
|
"name": "边3" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 664, |
||||
|
"y": 200, |
||||
|
"value": "边3" |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 605, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 710, |
||||
|
"y": 200 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"id": "Flow_379e0o9", |
||||
|
"type": "bpmn:sequenceFlow", |
||||
|
"sourceNodeId": "Activity_1sp8qc8", |
||||
|
"targetNodeId": "Event_08p8i6q", |
||||
|
"startPoint": { |
||||
|
"x": 810, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 902, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"properties": { |
||||
|
"name": "边4" |
||||
|
}, |
||||
|
"text": { |
||||
|
"x": 871, |
||||
|
"y": 200, |
||||
|
"value": "边4" |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 810, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 902, |
||||
|
"y": 200 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,240 @@ |
|||||
|
{ |
||||
|
"flowElementList": [ |
||||
|
{ |
||||
|
"incoming": [], |
||||
|
"outgoing": ["Flow_33inf2k"], |
||||
|
"dockers": [], |
||||
|
"type": 2, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "开始", |
||||
|
"x": 280, |
||||
|
"y": 200, |
||||
|
"text": { |
||||
|
"x": 280, |
||||
|
"y": 200, |
||||
|
"value": "开始" |
||||
|
}, |
||||
|
"logicFlowType": "bpmn:startEvent" |
||||
|
}, |
||||
|
"key": "Event_1d42u4p" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Flow_379e0o9"], |
||||
|
"outgoing": [], |
||||
|
"dockers": [], |
||||
|
"type": 3, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "结束", |
||||
|
"x": 920, |
||||
|
"y": 200, |
||||
|
"text": { |
||||
|
"x": 920, |
||||
|
"y": 200, |
||||
|
"value": "结束" |
||||
|
}, |
||||
|
"logicFlowType": "bpmn:endEvent" |
||||
|
}, |
||||
|
"key": "Event_08p8i6q" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Flow_0pfouf0"], |
||||
|
"outgoing": ["Flow_3918lhh"], |
||||
|
"dockers": [], |
||||
|
"type": 6, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "网关", |
||||
|
"x": 580, |
||||
|
"y": 200, |
||||
|
"text": { |
||||
|
"x": 580, |
||||
|
"y": 200, |
||||
|
"value": "网关" |
||||
|
}, |
||||
|
"logicFlowType": "bpmn:exclusiveGateway" |
||||
|
}, |
||||
|
"key": "Gateway_1fngqgj" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Flow_33inf2k"], |
||||
|
"outgoing": ["Flow_0pfouf0"], |
||||
|
"dockers": [], |
||||
|
"type": 4, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "用户", |
||||
|
"x": 420, |
||||
|
"y": 200, |
||||
|
"text": { |
||||
|
"x": 420, |
||||
|
"y": 200, |
||||
|
"value": "用户" |
||||
|
}, |
||||
|
"logicFlowType": "bpmn:userTask" |
||||
|
}, |
||||
|
"key": "Activity_2mgtaia" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Flow_3918lhh"], |
||||
|
"outgoing": ["Flow_379e0o9"], |
||||
|
"dockers": [], |
||||
|
"type": 5, |
||||
|
"properties": { |
||||
|
"a": "efrwe", |
||||
|
"b": "wewe", |
||||
|
"name": "服务", |
||||
|
"x": 760, |
||||
|
"y": 200, |
||||
|
"text": { |
||||
|
"x": 760, |
||||
|
"y": 200, |
||||
|
"value": "服务" |
||||
|
}, |
||||
|
"logicFlowType": "bpmn:serviceTask" |
||||
|
}, |
||||
|
"key": "Activity_1sp8qc8" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Event_1d42u4p"], |
||||
|
"outgoing": ["Activity_2mgtaia"], |
||||
|
"type": 1, |
||||
|
"dockers": [], |
||||
|
"properties": { |
||||
|
"name": "边", |
||||
|
"text": { |
||||
|
"x": 331, |
||||
|
"y": 200, |
||||
|
"value": "边" |
||||
|
}, |
||||
|
"startPoint": { |
||||
|
"x": 298, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 370, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 298, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 370, |
||||
|
"y": 200 |
||||
|
} |
||||
|
], |
||||
|
"logicFlowType": "bpmn:sequenceFlow" |
||||
|
}, |
||||
|
"key": "Flow_33inf2k" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Activity_2mgtaia"], |
||||
|
"outgoing": ["Gateway_1fngqgj"], |
||||
|
"type": 1, |
||||
|
"dockers": [], |
||||
|
"properties": { |
||||
|
"name": "边2", |
||||
|
"text": { |
||||
|
"x": 507, |
||||
|
"y": 200, |
||||
|
"value": "边2" |
||||
|
}, |
||||
|
"startPoint": { |
||||
|
"x": 470, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 555, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 470, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 555, |
||||
|
"y": 200 |
||||
|
} |
||||
|
], |
||||
|
"logicFlowType": "bpmn:sequenceFlow" |
||||
|
}, |
||||
|
"key": "Flow_0pfouf0" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Gateway_1fngqgj"], |
||||
|
"outgoing": ["Activity_1sp8qc8"], |
||||
|
"type": 1, |
||||
|
"dockers": [], |
||||
|
"properties": { |
||||
|
"name": "边3", |
||||
|
"text": { |
||||
|
"x": 664, |
||||
|
"y": 200, |
||||
|
"value": "边3" |
||||
|
}, |
||||
|
"startPoint": { |
||||
|
"x": 605, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 710, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 605, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 710, |
||||
|
"y": 200 |
||||
|
} |
||||
|
], |
||||
|
"logicFlowType": "bpmn:sequenceFlow" |
||||
|
}, |
||||
|
"key": "Flow_3918lhh" |
||||
|
}, |
||||
|
{ |
||||
|
"incoming": ["Activity_1sp8qc8"], |
||||
|
"outgoing": ["Event_08p8i6q"], |
||||
|
"type": 1, |
||||
|
"dockers": [], |
||||
|
"properties": { |
||||
|
"name": "边4", |
||||
|
"text": { |
||||
|
"x": 871, |
||||
|
"y": 200, |
||||
|
"value": "边4" |
||||
|
}, |
||||
|
"startPoint": { |
||||
|
"x": 810, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"endPoint": { |
||||
|
"x": 902, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
"pointsList": [ |
||||
|
{ |
||||
|
"x": 810, |
||||
|
"y": 200 |
||||
|
}, |
||||
|
{ |
||||
|
"x": 902, |
||||
|
"y": 200 |
||||
|
} |
||||
|
], |
||||
|
"logicFlowType": "bpmn:sequenceFlow" |
||||
|
}, |
||||
|
"key": "Flow_379e0o9" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<div class="connect"> |
||||
|
<p>{{name}}</p> |
||||
|
<p>您好,请问需要买保险吗?</p> |
||||
|
<div class="button-list"> |
||||
|
<button @mousedown.stop="done(1)">有保险了</button> |
||||
|
<button @mousedown.stop="done(2)">不需要</button> |
||||
|
<button @mousedown.stop="done(3)">需要</button> |
||||
|
<button @mousedown.stop="done(4)">特殊</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
name: String |
||||
|
}, |
||||
|
methods: { |
||||
|
done(type) { |
||||
|
this.$emit('select-button', type) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.connect { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #FFF; |
||||
|
border: 1px solid #9a9a9b; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.connect p { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.button-list { |
||||
|
position: absolute; |
||||
|
bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
|
||||
|
// svg png 图片资源来自阿里字体库
|
||||
|
// [阿里字体库](https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4)
|
||||
|
// svg图标建议使用自己创建的
|
||||
|
import registerStart from './registerStart' |
||||
|
import registerUser from './registerUser' |
||||
|
import registerEnd from './registerEnd' |
||||
|
import registerPush from './registerPush' |
||||
|
import registerDownload from './registerDownload' |
||||
|
import registerPolyline from './registerPolyline' |
||||
|
import registerTask from './registerTask' |
||||
|
import registerConnect from './registerConnect' |
||||
|
export { registerStart, registerUser, registerEnd, registerPush, registerDownload, registerPolyline, registerTask, registerConnect } |
||||
@ -0,0 +1,58 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Connect from './Connect.vue' |
||||
|
|
||||
|
export default function registerConnect (lf) { |
||||
|
lf.register('connect', ({ HtmlNode, HtmlNodeModel }) => { |
||||
|
class ConnectNode extends HtmlNode { |
||||
|
shouldUpdate() { |
||||
|
const { properties } = this.getAttributes(); |
||||
|
if (this.currrentProperties && this.currrentProperties === JSON.stringify(properties)) return false; |
||||
|
this.currrentProperties = JSON.stringify(properties) |
||||
|
return true; |
||||
|
} |
||||
|
setHtml(rootEl) { |
||||
|
// todo: 和react不一样,还没有找到合适的利用vue内置的diff算法来计算节点是否需要更新。
|
||||
|
if (!this.shouldUpdate()) return; |
||||
|
const { properties } = this.getAttributes(); |
||||
|
const el = document.createElement('div'); |
||||
|
rootEl.innerHTML = ''; |
||||
|
rootEl.appendChild(el); |
||||
|
const Profile = Vue.extend({ |
||||
|
render: function (h) { |
||||
|
return h(Connect, { |
||||
|
props: { |
||||
|
name: properties.name |
||||
|
}, |
||||
|
on: { |
||||
|
'select-button': (type) => { |
||||
|
console.log('select-button', type) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
new Profile().$mount(el) |
||||
|
} |
||||
|
} |
||||
|
class ConnectNodeModel extends HtmlNodeModel { |
||||
|
setAttributes() { |
||||
|
this.text.editable = false; |
||||
|
const width = 300; |
||||
|
const height = 150; |
||||
|
this.width = width; |
||||
|
this.height = height; |
||||
|
|
||||
|
this.anchorsOffset = [ |
||||
|
[width / 2, 0], |
||||
|
[0, height / 2], |
||||
|
[-width / 2, 0], |
||||
|
[0, -height/2], |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: ConnectNode, |
||||
|
model: ConnectNodeModel |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,92 @@ |
|||||
|
const NODE_COLOR = '#9932CC' |
||||
|
export default function registerDownload(lf) { |
||||
|
lf.register('download', ({ PolygonNode, PolygonNodeModel, h }) => { |
||||
|
class Node extends PolygonNode { |
||||
|
getIconShape () { |
||||
|
return h( |
||||
|
'svg', |
||||
|
{ |
||||
|
x: 14, |
||||
|
y: 13, |
||||
|
width: 23, |
||||
|
height: 23, |
||||
|
viewBox: '0 0 1024 1024' |
||||
|
}, |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: NODE_COLOR, |
||||
|
d: 'M831.513034 319.863005h-95.945189c-17.662265 0-31.980365 14.3181-31.980365 31.980365 0 17.662265 14.3181 31.980365 31.980365 31.980366h64.218604c17.520025 0 31.722492 14.202467 31.722492 31.722492V863.786065c0 17.520025-14.202467 31.722492-31.722492 31.722492H159.66442c-17.520025 0-31.722492-14.202467-31.722493-31.722492V415.546228c0-17.520025 14.202467-31.722492 31.722493-31.722492h64.218603c17.662265 0 31.980365-14.3181 31.980366-31.980366 0-17.662265-14.3181-31.980365-31.980366-31.980365H127.937834c-35.322483 0-63.956637 28.634154-63.956637 63.956637v511.693008c0 35.322483 28.634154 63.956637 63.956637 63.956638h703.5752c35.322483 0 63.956637-28.634154 63.956638-63.956638V383.819642c0-35.32146-28.634154-63.956637-63.956638-63.956637z' |
||||
|
} |
||||
|
), |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: NODE_COLOR, |
||||
|
d: 'M310.382073 521.036817c-12.388145-12.388145-32.473599-12.388145-44.862767 0l-0.364297 0.364297c-12.388145 12.388145-12.388145 32.473599 0 44.862767l190.186573 190.186574c5.818519 6.813173 14.465456 11.137665 24.126491 11.137664h0.515746c9.662057 0 18.307971-4.324492 24.12649-11.137664L694.296883 566.263881c12.388145-12.388145 12.388145-32.473599 0-44.862767l-0.364297-0.364297c-12.388145-12.388145-32.473599-12.388145-44.862767 0L511.706311 658.400325V95.743598c0-17.520025-14.202467-31.722492-31.722492-31.722492h-0.515746c-17.520025 0-31.722492 14.202467-31.722493 31.722492v562.656727L310.382073 521.036817z' |
||||
|
} |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
getShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
width, |
||||
|
height, |
||||
|
x, |
||||
|
y, |
||||
|
fill, |
||||
|
fillOpacity, |
||||
|
strokeWidth, |
||||
|
stroke, |
||||
|
strokeOpacity, |
||||
|
points |
||||
|
} = attributes |
||||
|
const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})` |
||||
|
const pointsPath = points.map(point => point.join(',')).join(' ') |
||||
|
return h( |
||||
|
'g', |
||||
|
{ |
||||
|
transform |
||||
|
}, |
||||
|
[ |
||||
|
h( |
||||
|
'polygon', |
||||
|
{ |
||||
|
points: pointsPath, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth, |
||||
|
strokeOpacity, |
||||
|
fillOpacity |
||||
|
} |
||||
|
), |
||||
|
this.getIconShape() |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
class Model extends PolygonNodeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
data.text = { |
||||
|
value: (data.text && data.text.value) || '', |
||||
|
x: data.x, |
||||
|
y: data.y + 50 |
||||
|
} |
||||
|
super(data, graphModel) |
||||
|
const lenght = 25 |
||||
|
this.points = [ |
||||
|
[lenght, 0], |
||||
|
[lenght * 2, lenght], |
||||
|
[lenght, lenght * 2], |
||||
|
[0, lenght] |
||||
|
] |
||||
|
this.stroke = NODE_COLOR |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: Node, |
||||
|
model: Model |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,101 @@ |
|||||
|
export default function registerEnd (lf) { |
||||
|
lf.register('end', ({ CircleNode, CircleNodeModel, h }) => { |
||||
|
class EndNode extends CircleNode { |
||||
|
getIconShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
x, |
||||
|
y, |
||||
|
width, |
||||
|
height |
||||
|
} = attributes |
||||
|
const stroke = '#404040' |
||||
|
return h( |
||||
|
'svg', |
||||
|
{ |
||||
|
x: x - width / 2, |
||||
|
y: y - height / 2, |
||||
|
width: 40, |
||||
|
height: 40, |
||||
|
viewBox: '0 0 1024 1024' |
||||
|
}, |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: stroke, |
||||
|
d: 'M212.992 526.336 212.992 526.336 212.992 526.336 215.04 526.336 212.992 526.336Z' |
||||
|
} |
||||
|
), |
||||
|
// 圆形外框隐藏
|
||||
|
// h(
|
||||
|
// 'path',
|
||||
|
// {
|
||||
|
// fill: stroke,
|
||||
|
// d: 'M817.152 202.752 817.152 202.752C737.28 122.88 628.736 75.776 509.952 75.776c-118.784 0-229.376 49.152-307.2 126.976l0 0c-77.824 77.824-126.976 186.368-126.976 307.2 0 118.784 49.152 229.376 126.976 307.2 77.824 79.872 188.416 126.976 307.2 126.976 120.832 0 229.376-49.152 307.2-126.976 79.872-77.824 126.976-186.368 126.976-307.2C946.176 389.12 897.024 280.576 817.152 202.752zM770.048 770.048c-65.536 65.536-157.696 108.544-260.096 108.544-102.4 0-194.56-40.96-260.096-108.544C184.32 704.512 141.312 612.352 141.312 509.952s40.96-194.56 108.544-260.096C317.44 184.32 409.6 141.312 509.952 141.312c100.352 0 192.512 40.96 258.048 106.496l2.048 2.048c65.536 65.536 108.544 157.696 108.544 260.096S837.632 704.512 770.048 770.048z'
|
||||
|
// }
|
||||
|
// ),
|
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: stroke, |
||||
|
d: 'M724.992 296.96 724.992 296.96 296.96 296.96 296.96 724.992 724.992 724.992 724.992 296.96Z' |
||||
|
} |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
getShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
x, |
||||
|
y, |
||||
|
r, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth |
||||
|
} = attributes |
||||
|
return h( |
||||
|
'g', |
||||
|
{ |
||||
|
}, |
||||
|
[ |
||||
|
h( |
||||
|
'circle', |
||||
|
{ |
||||
|
cx: x, |
||||
|
cy: y, |
||||
|
r, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth |
||||
|
} |
||||
|
), |
||||
|
this.getIconShape() |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
class EndModel extends CircleNodeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
data.text = { |
||||
|
value: (data.text && data.text.value) || '', |
||||
|
x: data.x, |
||||
|
y: data.y + 35 |
||||
|
} |
||||
|
super(data, graphModel) |
||||
|
} |
||||
|
getConnectedSourceRules () { |
||||
|
const rules = super.getConnectedSourceRules() |
||||
|
const notAsTarget = { |
||||
|
message: '终止节点不能作为连线的起点', |
||||
|
validate: () => false |
||||
|
} |
||||
|
rules.push(notAsTarget) |
||||
|
return rules |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: EndNode, |
||||
|
model: EndModel |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
export default function registerPolyline (lf) { |
||||
|
lf.register('polyline', ({ PolylineEdge, PolylineEdgeModel }) => { |
||||
|
class ConnnectionModel extends PolylineEdgeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
super(data, graphModel) |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: PolylineEdge, |
||||
|
model: ConnnectionModel |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,139 @@ |
|||||
|
export default function registerPush (lf, clickPlus, mouseDownPlus) { |
||||
|
lf.register('push', ({ PolygonNode, PolygonNodeModel, h }) => { |
||||
|
class Node extends PolygonNode { |
||||
|
getIconShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
stroke |
||||
|
} = attributes |
||||
|
return h( |
||||
|
'svg', |
||||
|
{ |
||||
|
x: 18, |
||||
|
y: 18, |
||||
|
width: 30, |
||||
|
height: 30, |
||||
|
viewBox: '0 0 1024 1024' |
||||
|
}, |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: stroke, |
||||
|
d: 'M866.461538 39.384615H393.846154c-43.323077 0-78.769231 35.446154-78.769231 78.769231v1.969231c0 13.784615 7.876923 27.569231 19.692308 35.446154 5.907692 3.938462 80.738462 78.769231 80.738461 78.769231 5.907692 5.907692 15.753846 0 15.753846-7.876924 0-15.753846 13.784615-31.507692 29.538462-31.507692h334.769231c15.753846 0 31.507692 15.753846 31.507692 31.507692v531.692308c0 15.753846-15.753846 27.569231-31.507692 27.569231h-334.769231c-15.753846 0-27.569231-11.815385-27.569231-27.569231v-1.969231c0-7.876923-9.846154-11.815385-15.753846-5.907692 0 0-74.830769 74.830769-82.707692 78.769231-11.815385 7.876923-19.692308 19.692308-19.692308 35.446154v39.384615c0 43.323077 33.476923 78.769231 76.8 78.769231h472.615385c43.323077 0 80.738462-35.446154 80.738461-78.769231V118.153846c0-43.323077-35.446154-78.769231-78.769231-78.769231zM630.153846 945.230769c-33.476923 0-59.076923-25.6-59.076923-59.076923s25.6-59.076923 59.076923-59.076923 59.076923 25.6 59.076923 59.076923-25.6 59.076923-59.076923 59.076923z m-86.646154-474.584615L297.353846 224.492308c-11.815385-11.815385-29.538462-11.815385-41.353846 0l-41.353846 41.353846c-11.815385 11.815385-11.815385 29.538462 0 41.353846l90.584615 90.584615c11.815385 11.815385 3.938462 33.476923-13.784615 33.476923H29.538462c-15.753846 1.969231-29.538462 15.753846-29.538462 31.507693v59.076923c0 15.753846 13.784615 29.538462 29.538462 29.538461h259.938461c17.723077 0 25.6 21.661538 13.784615 33.476923l-90.584615 90.584616c-11.815385 11.815385-11.815385 29.538462 0 41.353846l41.353846 41.353846c11.815385 11.815385 29.538462 11.815385 41.353846 0L543.507692 512c9.846154-9.846154 9.846154-29.538462 0-41.353846z' |
||||
|
} |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
getPulsShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
// 判断当前节点是否子节点
|
||||
|
const graphData = lf.getGraphData() |
||||
|
const edges = graphData.edges |
||||
|
let hasChildNode = false |
||||
|
edges.some(item => { |
||||
|
if (item.sourceNodeId === attributes.id) { |
||||
|
hasChildNode = true |
||||
|
return true |
||||
|
} |
||||
|
}) |
||||
|
if (hasChildNode) { |
||||
|
return |
||||
|
} |
||||
|
return h( |
||||
|
'svg', |
||||
|
{ |
||||
|
x: 70, |
||||
|
y: 20, |
||||
|
width: 30, |
||||
|
height: 30, |
||||
|
viewBox: '0 0 1024 1024', |
||||
|
class: 'time-plus', |
||||
|
onClick: (e) => clickPlus(e, attributes), |
||||
|
onMousedown: (e) => mouseDownPlus(e, attributes), |
||||
|
onMouseUp: (e) => mouseDownPlus(e, attributes) |
||||
|
}, |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: '#f17611', |
||||
|
d: 'M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z' |
||||
|
} |
||||
|
), |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: '#ffffff', |
||||
|
d: 'M448 298.666667h128v426.666666h-128z' |
||||
|
} |
||||
|
), |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: '#ffffff', |
||||
|
d: 'M298.666667 448h426.666666v128H298.666667z' |
||||
|
} |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
getShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
width, |
||||
|
height, |
||||
|
x, |
||||
|
y, |
||||
|
fill, |
||||
|
fillOpacity, |
||||
|
strokeWidth, |
||||
|
stroke, |
||||
|
strokeOpacity, |
||||
|
points |
||||
|
} = attributes |
||||
|
const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})` |
||||
|
const pointsPath = points.map(point => point.join(',')).join(' ') |
||||
|
return h( |
||||
|
'g', |
||||
|
{ |
||||
|
transform |
||||
|
}, |
||||
|
[ |
||||
|
h( |
||||
|
'polygon', |
||||
|
{ |
||||
|
points: pointsPath, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth, |
||||
|
strokeOpacity, |
||||
|
fillOpacity |
||||
|
} |
||||
|
), |
||||
|
this.getIconShape(), |
||||
|
this.getPulsShape() |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
class Model extends PolygonNodeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
data.text = { |
||||
|
value: (data.text && data.text.value) || '', |
||||
|
x: data.x, |
||||
|
y: data.y + 50 |
||||
|
} |
||||
|
super(data, graphModel) |
||||
|
const lenght = 35 |
||||
|
this.points = [ |
||||
|
[lenght, 0], |
||||
|
[lenght * 2, lenght], |
||||
|
[lenght, lenght * 2], |
||||
|
[0, lenght] |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: Node, |
||||
|
model: Model |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
export default function registerStart (lf) { |
||||
|
lf.register('start', ({ CircleNode, CircleNodeModel, h }) => { |
||||
|
class StartNode extends CircleNode { |
||||
|
getLabelShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
x, |
||||
|
y |
||||
|
} = attributes |
||||
|
return h( |
||||
|
'text', |
||||
|
{ |
||||
|
fill: '#000000', |
||||
|
fontSize: 12, |
||||
|
x: x - 12, |
||||
|
y: y + 4, |
||||
|
width: 50, |
||||
|
height: 25 |
||||
|
}, |
||||
|
'Start' |
||||
|
) |
||||
|
} |
||||
|
getShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
x, |
||||
|
y, |
||||
|
r, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth |
||||
|
} = attributes |
||||
|
return h( |
||||
|
'g', |
||||
|
{ |
||||
|
}, |
||||
|
[ |
||||
|
h( |
||||
|
'circle', |
||||
|
{ |
||||
|
cx: x, |
||||
|
cy: y, |
||||
|
r, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth |
||||
|
} |
||||
|
), |
||||
|
this.getLabelShape() |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
class StartModel extends CircleNodeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
data.text = { |
||||
|
value: (data.text && data.text.value) || '', |
||||
|
x: data.x, |
||||
|
y: data.y + 35, |
||||
|
dragable: false, |
||||
|
editable: true |
||||
|
} |
||||
|
super(data, graphModel) |
||||
|
} |
||||
|
getConnectedTargetRules () { |
||||
|
const rules = super.getConnectedTargetRules() |
||||
|
const notAsTarget = { |
||||
|
message: '起始节点不能作为连线的终点', |
||||
|
validate: () => false |
||||
|
} |
||||
|
rules.push(notAsTarget) |
||||
|
return rules |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: StartNode, |
||||
|
model: StartModel |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
export default function registerTask (lf) { |
||||
|
lf.register('task', ({ RectNode, RectNodeModel, h }) => { |
||||
|
class View extends RectNode { |
||||
|
getShape() { |
||||
|
const style = this.getShapeStyle(); |
||||
|
console.log(style); |
||||
|
const { width, height } = style; |
||||
|
const { x, y } = this.getAttributes(); |
||||
|
const position = { |
||||
|
x: x - width / 2, |
||||
|
y: y- height / 2, |
||||
|
} |
||||
|
return h("rect", { |
||||
|
...style, |
||||
|
...position, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
class Model extends RectNodeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
super(data, graphModel) |
||||
|
this.radius = 20; |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: View, |
||||
|
model: Model |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,112 @@ |
|||||
|
export default function registerUser (lf) { |
||||
|
lf.register('user', ({ PolygonNode, PolygonNodeModel, h }) => { |
||||
|
class Node extends PolygonNode { |
||||
|
getIconShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
stroke |
||||
|
} = attributes |
||||
|
return h( |
||||
|
'svg', |
||||
|
{ |
||||
|
x: 20, |
||||
|
y: 18, |
||||
|
width: 30, |
||||
|
height: 30, |
||||
|
viewBox: '0 0 1126 1024' |
||||
|
}, |
||||
|
h( |
||||
|
'path', |
||||
|
{ |
||||
|
fill: stroke, |
||||
|
d: 'M792.576 379.392a25.6 25.6 0 0 0 25.2928 25.8048h283.2384A25.6 25.6 0 0 0 1126.4 379.392a25.6 25.6 0 0 0-25.2928-25.8048h-283.2384a25.6 25.6 0 0 0-25.344 25.8048z m303.9232 80.7424H761.856c-16.5376 0-29.9008 11.6224-29.9008 25.7536 0 14.1824 13.312 25.7536 29.9008 25.7536h334.6432c16.4864 0 29.9008-11.5712 29.9008-25.7536 0-14.1312-13.4144-25.7536-29.9008-25.7536z m4.608 106.496h-283.2384a25.6 25.6 0 0 0-25.344 25.7536 25.6 25.6 0 0 0 25.344 25.7536h283.2384A25.6 25.6 0 0 0 1126.4 592.384a25.6 25.6 0 0 0-25.2928-25.8048zM543.0272 1024H341.6576C150.8352 1024 0 1024 0 923.648v-20.1216c0-188.16 153.2928-341.1968 341.7088-341.1968h201.2672c188.416 0 341.76 153.0368 341.76 341.1968v20.0704C884.6848 1024 726.3232 1024 542.976 1024z m-203.1616-405.1456c-158.464 0-287.4368 128.4096-287.4368 286.208v20.48c0 40.9088 166.0928 40.9088 287.4368 40.9088h204.9536c100.4544 0 287.4368 0 287.4368-40.96v-20.3776c0-157.8496-128.9728-286.208-287.4368-286.208H339.8656z m92.416-76.7488a271.4112 271.4112 0 0 1-271.2064-271.0528A271.36 271.36 0 0 1 432.2816 0a271.36 271.36 0 0 1 271.2064 271.0528 271.4624 271.4624 0 0 1-271.2064 271.0528z m-215.3472-271.872c0 118.1696 96.6144 214.3232 215.3472 214.3232 118.784 0 215.3984-96.1536 215.3984-214.3232 0-118.2208-96.6144-214.3232-215.3984-214.3232S216.9344 152.0128 216.9344 270.2336z' |
||||
|
} |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
getShape () { |
||||
|
const attributes = this.getAttributes() |
||||
|
const { |
||||
|
width, |
||||
|
height, |
||||
|
x, |
||||
|
y, |
||||
|
fill, |
||||
|
fillOpacity, |
||||
|
strokeWidth, |
||||
|
stroke, |
||||
|
strokeOpacity, |
||||
|
points |
||||
|
} = attributes |
||||
|
const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})` |
||||
|
const pointsPath = points.map(point => point.join(',')).join(' ') |
||||
|
return h( |
||||
|
'g', |
||||
|
{ |
||||
|
transform |
||||
|
}, |
||||
|
[ |
||||
|
h( |
||||
|
'polygon', |
||||
|
{ |
||||
|
points: pointsPath, |
||||
|
fill, |
||||
|
stroke, |
||||
|
strokeWidth, |
||||
|
strokeOpacity, |
||||
|
fillOpacity |
||||
|
} |
||||
|
), |
||||
|
this.getIconShape() |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
class Model extends PolygonNodeModel { |
||||
|
constructor (data, graphModel) { |
||||
|
data.text = { |
||||
|
value: (data.text && data.text.value) || '', |
||||
|
x: data.x, |
||||
|
y: data.y + 50 |
||||
|
} |
||||
|
super(data, graphModel) |
||||
|
const lenght = 35 |
||||
|
this.points = [ |
||||
|
[lenght, 0], |
||||
|
[lenght * 2, lenght], |
||||
|
[lenght, lenght * 2], |
||||
|
[0, lenght] |
||||
|
] |
||||
|
// 右键菜单自由配置,也可以通过边的properties或者其他属性条件更换不同菜单
|
||||
|
this.menu = [ |
||||
|
{ |
||||
|
className: 'lf-menu-delete', |
||||
|
text: 'delete', |
||||
|
callback (node) { |
||||
|
// const comfirm = window.confirm('你确定要删除吗?')
|
||||
|
lf.deleteNode(node.id) |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: 'edit', |
||||
|
className: 'lf-menu-item', |
||||
|
callback (node) { |
||||
|
lf.editNodeText(node.id) |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: 'copy', |
||||
|
className: 'lf-menu-item', |
||||
|
callback (node) { |
||||
|
lf.cloneNode(node.id) |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
view: Node, |
||||
|
model: Model |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
import translate from '../bpmn1/translate'; |
||||
|
|
||||
|
|
||||
|
export default function customTranslate(template, replacements) { |
||||
|
replacements = replacements || {}; |
||||
|
|
||||
|
// Translate
|
||||
|
template = translate[template] || template; |
||||
|
|
||||
|
// Replace
|
||||
|
return template.replace(/{([^}]+)}/g, function(_, key) { |
||||
|
|
||||
|
var str=replacements[key]; |
||||
|
if(translate[replacements[key]]!=null&&translate[replacements[key]]!='undefined'){ |
||||
|
str=translate[replacements[key]]; |
||||
|
} |
||||
|
return str || '{' + key + '}'; |
||||
|
|
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,210 @@ |
|||||
|
<template> |
||||
|
<div class="processDrawBody"> |
||||
|
<el-button-group> |
||||
|
<el-button size="mini" @click="showProcessInfo">xml数据</el-button> |
||||
|
<el-button type="primary" size="mini" @click="handleUndo">撤销</el-button> |
||||
|
<el-button type="success" size="mini" @click="handleRedo">恢复</el-button> |
||||
|
<el-button type="warning" size="mini" @click="handleDownload">下载</el-button> |
||||
|
<el-upload |
||||
|
style="display: inline-block;" |
||||
|
:file-list="fileList" |
||||
|
class="upload-demo" |
||||
|
action="" |
||||
|
:auto-upload="false" |
||||
|
:show-file-list="false" |
||||
|
:http-request="httpRequest" |
||||
|
:on-change="handleOnchangeFile" |
||||
|
:on-remove="handleRemove" |
||||
|
:before-remove="beforeRemove" |
||||
|
> |
||||
|
<el-button type="danger" size="mini">导入</el-button> |
||||
|
</el-upload> |
||||
|
</el-button-group> |
||||
|
<div class="containerBox" style="position: relative;"> |
||||
|
<div id="container"> |
||||
|
</div> |
||||
|
<div id="js-properties-panel" class="panel"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import CustomTranslate from '../bpmn1/CustomTranslate'; |
||||
|
|
||||
|
import { markRaw } from 'vue'; |
||||
|
// bpmn-js相关 |
||||
|
import 'bpmn-js/dist/assets/diagram-js.css'; |
||||
|
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'; |
||||
|
import BpmnModeler from 'bpmn-js/lib/Modeler'; |
||||
|
// bpmn-js-properties-panel相关 |
||||
|
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' |
||||
|
import propertiesPanelModule from 'bpmn-js-properties-panel' |
||||
|
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda' |
||||
|
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda' |
||||
|
// 其他 |
||||
|
// import { processDeployment, getProcessXml } from "@/api/index.js"; |
||||
|
export default { |
||||
|
props: ['deploymentId'], |
||||
|
data() { |
||||
|
return { |
||||
|
containerEl: null, |
||||
|
bpmnModeler: null, |
||||
|
fileList: [] |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 初始化流程图 |
||||
|
this.init(); |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 初始化流程图 |
||||
|
*/ |
||||
|
init() { |
||||
|
// 汉化 |
||||
|
var customTranslate = { |
||||
|
translate: ['value', CustomTranslate] |
||||
|
}; |
||||
|
this.containerEl = document.getElementById('container'); |
||||
|
// 加markRaw去除双向绑定作用域 |
||||
|
this.bpmnModeler = markRaw(new BpmnModeler({ |
||||
|
container: this.containerEl, |
||||
|
// 添加控制板 |
||||
|
propertiesPanel: { |
||||
|
parent: '#js-properties-panel' |
||||
|
}, |
||||
|
// 右侧属性面板 |
||||
|
additionalModules: [ |
||||
|
|
||||
|
propertiesPanelModule, |
||||
|
propertiesProviderModule, |
||||
|
customTranslate |
||||
|
], |
||||
|
moddleExtensions: { |
||||
|
camunda: camundaModdleDescriptor |
||||
|
} |
||||
|
})); |
||||
|
this.bpmnModeler.createDiagram(() => { |
||||
|
this.bpmnModeler.get('canvas').zoom('fit-viewport'); |
||||
|
}); |
||||
|
let _this = this; |
||||
|
// 如果deploymentId存在,则为编辑,导入xml信息 |
||||
|
if (_this.deploymentId) { |
||||
|
getProcessXml({"deploymentId":_this.deploymentId}) |
||||
|
.then((res) => { |
||||
|
_this.bpmnModeler.importXML(res.data, (err) => { |
||||
|
this.$message.success('加载成功!'); |
||||
|
}); |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
this.$message.error('获取流程信息失败'); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
handleRemove(file) { |
||||
|
for (let i = 0; i < this.fileList.length; i++) { |
||||
|
if (file.name === this.fileList[i].name) { |
||||
|
this.fileList.splice(i, 1); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
beforeRemove(file) { |
||||
|
return this.$confirm(`确定移除 ${file.name}?`); |
||||
|
}, |
||||
|
// 后退 |
||||
|
handleUndo() { |
||||
|
this.bpmnModeler.get('commandStack').undo(); |
||||
|
}, |
||||
|
// 前进 |
||||
|
handleRedo() { |
||||
|
this.bpmnModeler.get('commandStack').redo(); |
||||
|
}, |
||||
|
// 下载 |
||||
|
handleDownload() { |
||||
|
this.bpmnModeler.saveXML({format: true}, (err, data) => { |
||||
|
const dataTrack = 'bpmn'; |
||||
|
const a = document.createElement('a'); |
||||
|
const name = `diagram.${dataTrack}`; |
||||
|
a.setAttribute( |
||||
|
'href', |
||||
|
`data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}` |
||||
|
); |
||||
|
a.setAttribute('target', '_blank'); |
||||
|
a.setAttribute('dataTrack', `diagram:download-${dataTrack}`); |
||||
|
a.setAttribute('download', name); |
||||
|
document.body.appendChild(a); |
||||
|
a.click(); |
||||
|
document.body.removeChild(a); |
||||
|
}); |
||||
|
}, |
||||
|
// 导入成功回调 |
||||
|
handleOnchangeFile(file) { |
||||
|
const reader = new FileReader(); |
||||
|
let data = ''; |
||||
|
reader.readAsText(file.raw); |
||||
|
reader.onload = (event) => { |
||||
|
data = event.target.result; |
||||
|
this.bpmnModeler.importXML(data, (err) => { |
||||
|
debugger |
||||
|
if (err) { |
||||
|
this.$message.info('导入失败'); |
||||
|
} else { |
||||
|
this.$message.success('导入成功'); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
}, |
||||
|
// 取xml信息 |
||||
|
showProcessInfo() { |
||||
|
this.bpmnModeler.saveXML({format: true}, (err, data) => { |
||||
|
alert(data); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* 保存 |
||||
|
*/ |
||||
|
save() { |
||||
|
this.bpmnModeler.saveXML({format: true}, (err, data) => { |
||||
|
let processInfo = {}; |
||||
|
processInfo.xml = data.replace(/camunda/ig,"activiti"); |
||||
|
processInfo.processId = document.getElementById("camunda-id").value; |
||||
|
processInfo.processName = document.getElementById("camunda-name").innerHTML; |
||||
|
processDeployment(processInfo) |
||||
|
.then((res) => { |
||||
|
console.log(res); |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
console.log(error); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.processDrawBody { |
||||
|
height: 100%; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.containerBox { |
||||
|
height: 600px; |
||||
|
} |
||||
|
.containerBox #container { |
||||
|
height: 100%; |
||||
|
border: 1px solid rgb(121, 121, 121); |
||||
|
} |
||||
|
.bpp-properties-panel [type=text] { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.panel { |
||||
|
width: 400px; |
||||
|
position: absolute; |
||||
|
top: 1px; |
||||
|
right: 1px; |
||||
|
height:100%; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
/* 右下角logo */ |
||||
|
.bjs-powered-by { |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,258 @@ |
|||||
|
export default { |
||||
|
'Activate the global connect tool': '激活全局连接工具', |
||||
|
'Append {type}': '添加 {type}', |
||||
|
'Add Lane above': '在上面添加道', |
||||
|
'Divide into two Lanes': '分割成两个道', |
||||
|
'Divide into three Lanes': '分割成三个道', |
||||
|
'Add Lane below': '在下面添加道', |
||||
|
'Append compensation activity': '追加补偿活动', |
||||
|
'Change type': '修改类型', |
||||
|
'Connect using Association': '使用关联连接', |
||||
|
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接', |
||||
|
'Connect using DataInputAssociation': '使用数据输入关联连接', |
||||
|
'Remove': '移除', |
||||
|
'Activate the hand tool': '激活抓手工具', |
||||
|
'Activate the lasso tool': '激活套索工具', |
||||
|
'Activate the create/remove space tool': '激活创建/删除空间工具', |
||||
|
'Create expanded SubProcess': '创建扩展子过程', |
||||
|
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件', |
||||
|
'Create Pool/Participant': '创建池/参与者', |
||||
|
'Create Group':'创建组', |
||||
|
'Parallel Multi Instance': '并行多重事件', |
||||
|
'Sequential Multi Instance': '时序多重事件', |
||||
|
'DataObjectReference': '数据对象参考', |
||||
|
'DataStoreReference': '数据存储参考', |
||||
|
'Loop': '循环', |
||||
|
'Ad-hoc': '即席', |
||||
|
'Create {type}': '创建 {type}', |
||||
|
'Task': '任务', |
||||
|
'Send Task': '发送任务', |
||||
|
'Receive Task': '接收任务', |
||||
|
'User Task': '用户任务', |
||||
|
'Manual Task': '手工任务', |
||||
|
'Business Rule Task': '业务规则任务', |
||||
|
'Service Task': '服务任务', |
||||
|
'Script Task': '脚本任务', |
||||
|
'Call Activity': '调用活动', |
||||
|
'Sub Process (collapsed)': '子流程(折叠的)', |
||||
|
'Sub Process (expanded)': '子流程(展开的)', |
||||
|
'Start Event': '开始事件', |
||||
|
'StartEvent': '开始事件', |
||||
|
'Intermediate Throw Event': '中间事件', |
||||
|
'End Event': '结束事件', |
||||
|
'EndEvent': '结束事件', |
||||
|
'Create Gateway': '创建网关', |
||||
|
'Create ExclusiveGateway': '创建互斥网关', |
||||
|
'Create ParallelGateway': '创建并行网关', |
||||
|
'Create InclusiveGateway': '创建相容网关', |
||||
|
'Create ComplexGateway': '创建复杂网关', |
||||
|
'Create EventbasedGateway': '创建事件网关', |
||||
|
'Create Intermediate/Boundary Event': '创建中间/边界事件', |
||||
|
'Message Start Event': '消息开始事件', |
||||
|
'Timer Start Event': '定时开始事件', |
||||
|
'Conditional Start Event': '条件开始事件', |
||||
|
'Signal Start Event': '信号开始事件', |
||||
|
'Error Start Event': '错误开始事件', |
||||
|
'Escalation Start Event': '升级开始事件', |
||||
|
'Compensation Start Event': '补偿开始事件', |
||||
|
'Message Start Event (non-interrupting)': '消息开始事件(非中断)', |
||||
|
'Timer Start Event (non-interrupting)': '定时开始事件(非中断)', |
||||
|
'Conditional Start Event (non-interrupting)': '条件开始事件(非中断)', |
||||
|
'Signal Start Event (non-interrupting)': '信号开始事件(非中断)', |
||||
|
'Escalation Start Event (non-interrupting)': '升级开始事件(非中断)', |
||||
|
'Message Intermediate Catch Event': '消息中间捕获事件', |
||||
|
'Message Intermediate Throw Event': '消息中间抛出事件', |
||||
|
'Timer Intermediate Catch Event': '定时中间捕获事件', |
||||
|
'Escalation Intermediate Throw Event': '升级中间抛出事件', |
||||
|
'Conditional Intermediate Catch Event': '条件中间捕获事件', |
||||
|
'Link Intermediate Catch Event': '链接中间捕获事件', |
||||
|
'Link Intermediate Throw Event': '链接中间抛出事件', |
||||
|
'Compensation Intermediate Throw Event': '补偿中间抛出事件', |
||||
|
'Signal Intermediate Catch Event': '信号中间捕获事件', |
||||
|
'Signal Intermediate Throw Event': '信号中间抛出事件', |
||||
|
'Message End Event': '消息结束事件', |
||||
|
'Escalation End Event': '定时结束事件', |
||||
|
'Error End Event': '错误结束事件', |
||||
|
'Cancel End Event': '取消结束事件', |
||||
|
'Compensation End Event': '补偿结束事件', |
||||
|
'Signal End Event': '信号结束事件', |
||||
|
'Terminate End Event': '终止结束事件', |
||||
|
'Message Boundary Event': '消息边界事件', |
||||
|
'Message Boundary Event (non-interrupting)': '消息边界事件(非中断)', |
||||
|
'Timer Boundary Event': '定时边界事件', |
||||
|
'Timer Boundary Event (non-interrupting)': '定时边界事件(非中断)', |
||||
|
'Escalation Boundary Event': '升级边界事件', |
||||
|
'Escalation Boundary Event (non-interrupting)': '升级边界事件(非中断)', |
||||
|
'Conditional Boundary Event': '条件边界事件', |
||||
|
'Conditional Boundary Event (non-interrupting)': '条件边界事件(非中断)', |
||||
|
'Error Boundary Event': '错误边界事件', |
||||
|
'Cancel Boundary Event': '取消边界事件', |
||||
|
'Signal Boundary Event': '信号边界事件', |
||||
|
'Signal Boundary Event (non-interrupting)': '信号边界事件(非中断)', |
||||
|
'Compensation Boundary Event': '补偿边界事件', |
||||
|
'Exclusive Gateway': '互斥网关', |
||||
|
'Parallel Gateway': '并行网关', |
||||
|
'Inclusive Gateway': '相容网关', |
||||
|
'Complex Gateway': '复杂网关', |
||||
|
'Event based Gateway': '事件网关', |
||||
|
'Transaction': '转运', |
||||
|
'Sub Process': '子流程', |
||||
|
'Event Sub Process': '事件子流程', |
||||
|
'Collapsed Pool': '折叠池', |
||||
|
'Expanded Pool': '展开池', |
||||
|
|
||||
|
// Errors
|
||||
|
'no parent for {element} in {parent}': '在{parent}里,{element}没有父类', |
||||
|
'no shape type specified': '没有指定的形状类型', |
||||
|
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类', |
||||
|
'out of bounds release': 'out of bounds release', |
||||
|
'more than {count} child lanes': '子道大于{count} ', |
||||
|
'element required': '元素不能为空', |
||||
|
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范', |
||||
|
'no diagram to display': '没有可展示的流程图', |
||||
|
'no process or collaboration to display': '没有可展示的流程/协作', |
||||
|
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制', |
||||
|
'already rendered {element}': '{element} 已被渲染', |
||||
|
'failed to import {element}': '导入{element}失败', |
||||
|
'Id must be a valid QName.':'编号必须以字母或下划线开头', |
||||
|
'Element must have an unique id.':'元素必须具有唯一的id', |
||||
|
|
||||
|
//属性面板的参数
|
||||
|
'zjId': '自己编号', |
||||
|
'Id': '编号', |
||||
|
'Name': '名称', |
||||
|
'General': '常规', |
||||
|
'Details': '详情', |
||||
|
'Message Name': '消息名称', |
||||
|
'Message': '消息', |
||||
|
'Initiator': '创建者', |
||||
|
'Asynchronous Continuations': '持续异步', |
||||
|
'Asynchronous Before': '异步前', |
||||
|
'Asynchronous After': '异步后', |
||||
|
'Job Configuration': '工作配置', |
||||
|
'Exclusive': '排除', |
||||
|
'Job Priority': '工作优先级', |
||||
|
'Retry Time Cycle': '重试时间周期', |
||||
|
'Documentation': '文档', |
||||
|
'Element Documentation': '元素文档', |
||||
|
'History Configuration': '历史配置', |
||||
|
'History Time To Live': '历史的生存时间', |
||||
|
'Forms': '表单', |
||||
|
'Form Key': '表单key', |
||||
|
'Form Fields': '表单字段', |
||||
|
'Business Key': '业务key', |
||||
|
'Form Field': '表单字段', |
||||
|
'ID': '编号', |
||||
|
'Type': '类型', |
||||
|
'Label': '名称', |
||||
|
'Default Value': '默认值', |
||||
|
'Validation': '校验', |
||||
|
'Add Constraint': '添加约束', |
||||
|
'Config': '配置', |
||||
|
'Properties': '属性', |
||||
|
'Add Property': '添加属性', |
||||
|
'Value': '值', |
||||
|
'Listeners': '监听器', |
||||
|
'Execution Listener': '执行监听', |
||||
|
'Event Type': '事件类型', |
||||
|
'Listener Type': '监听器类型', |
||||
|
'Java Class': 'Java类', |
||||
|
'Expression': '表达式', |
||||
|
'Must provide a value': '必须提供一个值', |
||||
|
'Delegate Expression': '代理表达式', |
||||
|
'Script': '脚本', |
||||
|
'Script Format': '脚本格式', |
||||
|
'Script Type': '脚本类型', |
||||
|
'Inline Script': '内联脚本', |
||||
|
'External Script': '外部脚本', |
||||
|
'Resource': '资源', |
||||
|
'Field Injection': '字段注入', |
||||
|
'Extensions': '扩展', |
||||
|
'Input/Output': '输入/输出', |
||||
|
'Input Parameters': '输入参数', |
||||
|
'Output Parameters': '输出参数', |
||||
|
'Parameters': '参数', |
||||
|
'Output Parameter': '输出参数', |
||||
|
'Timer Definition Type': '定时器定义类型', |
||||
|
'Timer Definition': '定时器定义', |
||||
|
'Date': '日期', |
||||
|
'Duration': '持续', |
||||
|
'Cycle': '循环', |
||||
|
'Signal': '信号', |
||||
|
'Signal Name': '信号名称', |
||||
|
'Escalation': '升级', |
||||
|
'Error': '错误', |
||||
|
'Link Name': '链接名称', |
||||
|
'Condition': '条件名称', |
||||
|
'Variable Name': '变量名称', |
||||
|
'Variable Event': '变量事件', |
||||
|
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开', |
||||
|
'Wait for Completion': '等待完成', |
||||
|
'Activity Ref': '活动参考', |
||||
|
'Version Tag': '版本标签', |
||||
|
'Executable': '可执行文件', |
||||
|
'External Task Configuration': '扩展任务配置', |
||||
|
'Task Priority': '任务优先级', |
||||
|
'External': '外部', |
||||
|
'Connector': '连接器', |
||||
|
'Must configure Connector': '必须配置连接器', |
||||
|
'Connector Id': '连接器编号', |
||||
|
'Implementation': '实现方式', |
||||
|
'Field Injections': '字段注入', |
||||
|
'Fields': '字段', |
||||
|
'Result Variable': '结果变量', |
||||
|
'Topic': '主题', |
||||
|
'Configure Connector': '配置连接器', |
||||
|
'Input Parameter': '输入参数', |
||||
|
'Assignee': '代理人', |
||||
|
'Candidate Users': '候选用户', |
||||
|
'Candidate Groups': '候选组', |
||||
|
'Due Date': '到期时间', |
||||
|
'Follow Up Date': '跟踪日期', |
||||
|
'Priority': '优先级', |
||||
|
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式,如: ${someDate} ,或者一个ISO标准日期,如:2015-06-26T09:54:00', |
||||
|
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式,如: ${someDate} ,或者一个ISO标准日期,如:2015-06-26T09:54:00', |
||||
|
'Variables': '变量', |
||||
|
'Create DataObjectReference': '创建数据对象', |
||||
|
'Create Task': '创建任务', |
||||
|
'Create SendTask': '创建发送任务', |
||||
|
'Create ReceiveTask': '创建接收任务', |
||||
|
'Create UserTask': '创建用户任务', |
||||
|
'Create ManualTask': '创建手工任务', |
||||
|
'Create BusinessRuleTask': '创建业务规则任务', |
||||
|
'Create ServiceTask': '创建服务任务', |
||||
|
'Create ScriptTask': '创建脚本任务', |
||||
|
'Create CallActivityTask': '创建调用活动', |
||||
|
'Create SubProcessCollapsed': '创建子流程(折叠的)', |
||||
|
'Create SubProcessExpanded': '创建子流程(展开的)', |
||||
|
'Create StartEvent': '创建开始事件', |
||||
|
'Create EndEvent': '创建结束事件', |
||||
|
'Create DataStoreReference': '创建数据存储引用', |
||||
|
'Tasklist Configuration': '任务列表配置', |
||||
|
'Candidate Starter Configuration': '候选启动程序配置', |
||||
|
'Candidate Starter Groups': '候选启动组', |
||||
|
'Candidate Starter Users': '候选启动器用户', |
||||
|
'Specify more than one group as a comma separated list.':'将多个组指定为逗号分隔的列表。', |
||||
|
'Specify more than one user as a comma separated list.':'将多个用户指定为逗号分隔的列表。', |
||||
|
'This maps to the process definition key.':'映射到流程定义键。', |
||||
|
'Startable':'可启动', |
||||
|
'TextAnnotation':'文本批注', |
||||
|
'Append Intermediate/Boundary Event':'追加中间/边界事件', |
||||
|
'Append EndEvent':'附加事件', |
||||
|
'Append Gateway':'附加网关', |
||||
|
'Append Task':'追加任务', |
||||
|
'Parameter must have a name':'参数必须有名称', |
||||
|
'CallActivity Type':'调用活动类型', |
||||
|
'In Mapping':'在映射中', |
||||
|
'Out Mapping':'输出映射', |
||||
|
'Case Ref':'参考案例', |
||||
|
'Binding':'捆绑', |
||||
|
'Tenant Id':'机构ID', |
||||
|
'deployment':'调度。', |
||||
|
'Source':'来源', |
||||
|
'Target':'目标', |
||||
|
'Mapping must have a source':'映射必须有一个源', |
||||
|
'Mapping must have a target':'映射必须有一个目标', |
||||
|
'Task Listener':'任务侦听器', |
||||
|
}; |
||||
|
|
||||
@ -0,0 +1,201 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="header"> |
||||
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> |
||||
|
<el-menu-item index="/layout/baseSetup" @click="to('/layout/baseSetup')">基础设置</el-menu-item> |
||||
|
<el-menu-item index="/layout/formDesign" @click="to('/layout/formDesign')">表单设计</el-menu-item> |
||||
|
<el-menu-item index="/layout/processDesign" @click="to('/layout/processDesign')">流程设计</el-menu-item> |
||||
|
<el-menu-item index="/layout/seniorSetup" @click="to('/layout/seniorSetup')">高级设置</el-menu-item> |
||||
|
</el-menu> |
||||
|
<div class="publish"> |
||||
|
<el-button size="mini" @click="preview"><i class="el-icon-view"></i>预览</el-button> |
||||
|
<el-button size="mini" type="primary" @click="publish"><i class="el-icon-s-promotion"></i>发布</el-button> |
||||
|
</div> |
||||
|
<div class="back"> |
||||
|
<el-button @click="exit" size="medium" icon="el-icon-arrow-left" circle></el-button> |
||||
|
<span> |
||||
|
<i :class="setup.icon" :style="'background:' + setup.background"></i> |
||||
|
<span>{{setup.name}}</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog title="请使用手机扫码预览" :visible.sync="viewCode" width="300px" :close-on-click-modal="false" center> |
||||
|
<img src="../assets/image/code.png" width="250" height="250"> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<div class="layout-body"> |
||||
|
<transition name="router-fade" mode="out-in"> |
||||
|
<router-view v-if="!$route.meta.keepAlive"/> |
||||
|
</transition> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import {updateFormDetail, updateTemplate} from '@/api/setting' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
activeIndex: '/layout/baseSetup', |
||||
|
viewCode: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed:{ |
||||
|
setup() { |
||||
|
return this.$store.state.template.baseSetup; |
||||
|
}, |
||||
|
template() { |
||||
|
return this.$store.state.template; |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.check() |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.activeIndex = this.$route.path |
||||
|
console.log(document.body.offsetWidth) |
||||
|
if (document.body.offsetWidth <= 970){ |
||||
|
this.$msgbox.alert("本设计器未适配中小屏幕,建议您在PC电脑端浏览器进行操作") |
||||
|
} |
||||
|
this.listener() |
||||
|
}, |
||||
|
methods: { |
||||
|
publish() { |
||||
|
this.$confirm('您确定审批流程已配置完毕,并需要将其发布,发布后立即生效,是否继续?', '提示', { |
||||
|
confirmButtonText: '发布', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
console.log(this.setup) |
||||
|
let template = { |
||||
|
templateId: this.template.id, |
||||
|
templateName: this.setup.name, |
||||
|
icon: this.setup.icon, |
||||
|
group: this.setup.group, |
||||
|
background: this.setup.background, |
||||
|
whoCommit: JSON.stringify(this.setup.whoCommit.map( |
||||
|
wc => {return {id: wc.id, type: wc.type, name: wc.name}})), |
||||
|
whoEdit: JSON.stringify(this.setup.whoEdit.map( |
||||
|
wc => {return {id: wc.id, type: wc.type, name: wc.name}})), |
||||
|
whoExport: JSON.stringify(this.setup.whoExport.map( |
||||
|
wc => {return {id: wc.id, type: wc.type, name: wc.name}})), |
||||
|
formItems: JSON.stringify(this.template.form), |
||||
|
remark: this.setup.remark, |
||||
|
process: JSON.stringify(this.template.process), |
||||
|
} |
||||
|
if (this.valid()){ |
||||
|
// updateFormDetail(template).then(rsp => { |
||||
|
// let isAdd = this.template.id === undefined |
||||
|
// let params = {templateId: isAdd ? this.template.id:rsp.data, |
||||
|
// type:'move', groupId: this.setup.group} |
||||
|
// updateTemplate(params).then(rsp => { |
||||
|
// this.$message.success(rsp.data) |
||||
|
// this.$store.commit('clearTemplate') |
||||
|
// this.$router.push('/formListPanel') |
||||
|
// }).catch(err => this.$message.error(err.response.data)) |
||||
|
// }).catch(err => this.$message.error(err.response.data)) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
preview() { |
||||
|
this.viewCode = true; |
||||
|
}, |
||||
|
valid(){ |
||||
|
if (!this.$isNotEmpty(this.setup.group)){ |
||||
|
this.$message.warning('请选择分组') |
||||
|
this.$router.push('/layout/baseSetup') |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
exit(){ |
||||
|
this.$confirm('未发布的内容将不会被保存,是否直接退出 ?', '提示', { |
||||
|
confirmButtonText: '退出', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
//sessionStorage.setItem('router-path','/formListPanel') |
||||
|
//window.location.reload() |
||||
|
this.$store.commit('clearTemplate') |
||||
|
this.$router.push('/formListPanel') |
||||
|
}) |
||||
|
}, |
||||
|
to(path) { |
||||
|
if (path !== this.$route.path){ |
||||
|
this.$router.push(path); |
||||
|
} |
||||
|
}, |
||||
|
handleSelect(key, keyPath) { |
||||
|
console.log(key, keyPath); |
||||
|
}, |
||||
|
listener(){ |
||||
|
window.onunload = this.closeBefore() |
||||
|
window.onbeforeunload = this.closeBefore() |
||||
|
//window.on('beforeunload',this.closeBefore()) |
||||
|
}, |
||||
|
closeBefore(){ |
||||
|
//alert("您将要离开本页") |
||||
|
return false |
||||
|
}, |
||||
|
check(){ |
||||
|
if(this.$store.state.isEdit === null){ |
||||
|
this.$router.push("/workPanel"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import "@/assets/global"; |
||||
|
|
||||
|
.layout-body{ |
||||
|
min-width: 980px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .header { |
||||
|
min-width: 980px; |
||||
|
position: relative; |
||||
|
.el-menu { |
||||
|
top: 0; |
||||
|
z-index: 999; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.publish { |
||||
|
position: absolute; |
||||
|
top: 15px; |
||||
|
right: 20px; |
||||
|
z-index: 1000; |
||||
|
|
||||
|
i { |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
border-radius: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.back{ |
||||
|
position: absolute; |
||||
|
z-index: 1000; |
||||
|
top: 10px; |
||||
|
left: 20px; |
||||
|
font-size: small; |
||||
|
span{ |
||||
|
i{ |
||||
|
border-radius: 10px; |
||||
|
padding: 7.8px; |
||||
|
font-size: 20px; |
||||
|
color: #ffffff; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<div style="height:auto;"> |
||||
|
<iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe"> |
||||
|
</iframe> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'turnoverfamily', |
||||
|
data(){ |
||||
|
return{ |
||||
|
bdTokenUrl : 'http://localhost:88/workPanel' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// this.getUrl(); |
||||
|
this.$nextTick(()=>{ |
||||
|
this.getCode(); |
||||
|
}); |
||||
|
}, |
||||
|
mounted(){ |
||||
|
/** |
||||
|
* iframe-宽高自适应显示 |
||||
|
*/ |
||||
|
const oIframe = document.getElementById('bdIframe'); |
||||
|
const deviceWidth = document.documentElement.clientWidth; |
||||
|
const deviceHeight = document.documentElement.clientHeight; |
||||
|
oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值 |
||||
|
oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差 |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 获取-外部接口信息 |
||||
|
*/ |
||||
|
// getUrl() { |
||||
|
// let that = this |
||||
|
// let bdUrl = {queryurl: this.$paths.bdpath+'/locate'}; |
||||
|
// this.$api.getBdToken(bdUrl,function(res) { |
||||
|
// that.bdTokenUrl = res.data.data; |
||||
|
// }) |
||||
|
// }, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<router-view v-slot="{ Component }"> |
||||
|
<transition mode="out-in" name="el-fade-in-linear"> |
||||
|
<keep-alive :include="$store.getters['router/keepAliveRouters']"> |
||||
|
<component :is="Component" /> |
||||
|
</keep-alive> |
||||
|
</transition> |
||||
|
</router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Process' |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,182 @@ |
|||||
|
<template> |
||||
|
<div class="containers" ref="content"> |
||||
|
<!-- 画布 --> |
||||
|
<div class="canvas" ref="canvas"></div> |
||||
|
<!-- 面板 --> |
||||
|
<div id="js-properties-panel" class="panel"></div> |
||||
|
<!-- 下载图 --> |
||||
|
<ul class="buttons"> |
||||
|
<li>下载</li> |
||||
|
<li> |
||||
|
<a ref="saveDiagram" href="javascript:" title="下载BPMN图">BPMN图</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a ref="saveSvg" href="javascript:" title="下载SVG图">SVG图</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 引入组件 |
||||
|
import VueBpmn from "vue-bpmn"; |
||||
|
// 渲染器 |
||||
|
import BpmnModeler from "bpmn-js/lib/Modeler"; |
||||
|
// 左边工具栏 |
||||
|
import propertiesPanelModule from "bpmn-js-properties-panel"; |
||||
|
// 右边工具栏,扩展属性 |
||||
|
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda"; |
||||
|
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda"; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// bpmn建模器 |
||||
|
bpmnModeler: null, |
||||
|
container: null, |
||||
|
canvas: null, |
||||
|
xmlStr: null, |
||||
|
processName: "" |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
// 获取到属性ref为“content”的dom节点 |
||||
|
this.container = this.$refs.content; |
||||
|
// 获取到属性ref为“canvas”的dom节点 |
||||
|
const canvas = this.$refs.canvas; |
||||
|
// 建模,官方文档这里讲的很详细 |
||||
|
this.bpmnModeler = new BpmnModeler({ |
||||
|
container: canvas, |
||||
|
// 添加控制板 |
||||
|
// propertiesPanel: { |
||||
|
// parent: '#js-properties-panel' |
||||
|
// }, |
||||
|
additionalModules: [ |
||||
|
// 左边工具栏以及节点 |
||||
|
propertiesProviderModule, |
||||
|
// 右边的工具栏 |
||||
|
propertiesPanelModule |
||||
|
], |
||||
|
moddleExtensions: { |
||||
|
camunda: camundaModdleDescriptor |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 下载画图 |
||||
|
let _this = this |
||||
|
// 获取a标签dom节点 |
||||
|
const downloadLink = this.$refs.saveDiagram |
||||
|
const downloadSvgLink = this.$refs.saveSvg |
||||
|
const modeler = new BpmnModeler({container: '#modeler'}) |
||||
|
// 给图绑定事件,当图有发生改变就会触发这个事件 |
||||
|
modeler.on('commandStack.changed', function () { |
||||
|
_this.saveSVG(function (err, svg) { |
||||
|
_this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg) |
||||
|
}) |
||||
|
// 保存图 |
||||
|
_this.saveDiagram(function (err, xml) { |
||||
|
_this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml) |
||||
|
}) |
||||
|
}) |
||||
|
// 创建新图 |
||||
|
this.createNewDiagram(this.bpmnModeler) |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
createNewDiagram() { |
||||
|
const bpmnXmlStr = |
||||
|
'<?xml version="1.0" encoding="UTF-8"?>\n' + |
||||
|
'<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">\n' + |
||||
|
' <bpmn2:process id="Process_1" isExecutable="false">\n' + |
||||
|
' <bpmn2:startEvent id="StartEvent_1"/>\n' + |
||||
|
" </bpmn2:process>\n" + |
||||
|
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' + |
||||
|
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' + |
||||
|
' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' + |
||||
|
' <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' + |
||||
|
" </bpmndi:BPMNShape>\n" + |
||||
|
" </bpmndi:BPMNPlane>\n" + |
||||
|
" </bpmndi:BPMNDiagram>\n" + |
||||
|
"</bpmn2:definitions>"; |
||||
|
// 将字符串转换成图显示出来 |
||||
|
this.bpmnModeler.importXML(bpmnXmlStr, function(err) { |
||||
|
if (err) { |
||||
|
console.error(err); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 下载为SVG格式,done是个函数,调用的时候传入的 |
||||
|
saveSVG(done) { |
||||
|
// 把传入的done再传给bpmn原型的saveSVG函数调用 |
||||
|
this.bpmnModeler.saveSVG(done); |
||||
|
}, |
||||
|
// 下载为SVG格式,done是个函数,调用的时候传入的 |
||||
|
saveDiagram(done) { |
||||
|
// 把传入的done再传给bpmn原型的saveXML函数调用 |
||||
|
this.bpmnModeler.saveXML({ format: true }, function(err, xml) { |
||||
|
done(err, xml); |
||||
|
}); |
||||
|
}, |
||||
|
// 当图发生改变的时候会调用这个函数,这个data就是图的xml |
||||
|
setEncoded(link, name, data) { |
||||
|
// 把xml转换为URI,下载要用到的 |
||||
|
const encodedData = encodeURIComponent(data); |
||||
|
// 获取到图的xml,保存就是把这个xml提交给后台 |
||||
|
this.xmlStr = data; |
||||
|
// 下载图的具体操作,改变a的属性,className令a标签可点击,href令能下载,download是下载的文件的名字 |
||||
|
if (data) { |
||||
|
link.className = "active"; |
||||
|
link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData; |
||||
|
link.download = name; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
// 最外层容器 |
||||
|
.containers{ |
||||
|
position: absolute; |
||||
|
background-color: #ffffff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
// 画布 |
||||
|
.canvas{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
// 面板 |
||||
|
.panel{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
width: 300px; |
||||
|
} |
||||
|
// 下载按钮 |
||||
|
.buttons{ |
||||
|
position: absolute; |
||||
|
left: 20px; |
||||
|
bottom: 20px; |
||||
|
&>li{ |
||||
|
display:inline-block;margin: 5px; |
||||
|
&>a{ |
||||
|
color: #999; |
||||
|
background: #eee; |
||||
|
cursor: not-allowed; |
||||
|
padding: 8px; |
||||
|
border: 1px solid #ccc; |
||||
|
&.active{ |
||||
|
color: #333; |
||||
|
background: #fff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,23 @@ |
|||||
|
/*explain:背景配置;@author: wxm; @version: 1.0; date: 2021/5/19;*/ |
||||
|
export const BackgroundConfig = { |
||||
|
// image:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2920685919,2017597770&fm=26&gp=0.jpg",
|
||||
|
opacity:0.2, |
||||
|
size:"100%", |
||||
|
repeat:"no-repeat", |
||||
|
} |
||||
|
|
||||
|
// export type BackgroundConfig = {
|
||||
|
// image?: string; // 背景图片地址
|
||||
|
// color?: string; // 背景色
|
||||
|
// repeat?: string; // 背景图片重复
|
||||
|
// position?: string; // 背景图片位置
|
||||
|
// size?: string; // 背景图片尺寸
|
||||
|
// opacity?: number; // 背景透明度 1-0
|
||||
|
// };
|
||||
|
|
||||
|
// repeat
|
||||
|
// repeat 默认。背景图像将在垂直方向和水平方向重复。
|
||||
|
// repeat-x 背景图像将在水平方向重复。
|
||||
|
// repeat-y 背景图像将在垂直方向重复。
|
||||
|
// no-repeat 背景图像将仅显示一次。
|
||||
|
// inherit 规定应该从父元素继承 background-repeat 属性的设置。
|
||||
@ -0,0 +1,18 @@ |
|||||
|
/*explain:网格配置;@author: wxm; @version: 1.0; date: 2021/5/19;*/ |
||||
|
export const GridOptionsConfig = { |
||||
|
size:20, |
||||
|
visible:true, |
||||
|
type:'dot', |
||||
|
config:{ |
||||
|
color:'Black', |
||||
|
thickness:1, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// size?: number // 栅格
|
||||
|
// visible?: boolean, // 是否可见,false则隐藏网格线但是保留栅格效果
|
||||
|
// type?: 'dot' | 'mesh', // 网格样式,目前内置支持点状'dot'和网格'mesh'
|
||||
|
// config?: {
|
||||
|
// color: string, // 网格颜色
|
||||
|
// thickness?: number, // 网格线宽度
|
||||
|
// }
|
||||
@ -0,0 +1,35 @@ |
|||||
|
/*explain:组件样式配置;@author: wxm; @version: 1.0; date: 2021/5/19;*/ |
||||
|
export const StyleConfig = { |
||||
|
rect: { // 矩形样式
|
||||
|
width: 100, |
||||
|
height: 50, |
||||
|
radius: 6, |
||||
|
fill: '#34415b', |
||||
|
strokeWidth: 0 |
||||
|
}, |
||||
|
circle: { // 圆形样式
|
||||
|
r: 40, |
||||
|
fill: '#34415b', |
||||
|
strokeWidth: 0 |
||||
|
}, |
||||
|
ellipse: { //椭圆样式
|
||||
|
fill: '#34415b', |
||||
|
}, |
||||
|
polygon: { //多边形样式
|
||||
|
fill: '#34415b', |
||||
|
}, |
||||
|
text: { //文本样式
|
||||
|
fill: '#34415b', |
||||
|
}, |
||||
|
nodeText: { // 节点文本样式
|
||||
|
fontSize: 16, |
||||
|
//color: '#ffffff'
|
||||
|
}, |
||||
|
edgeText: { // 边文本样式
|
||||
|
fontSize: 16, |
||||
|
color: '#34415b' |
||||
|
}, |
||||
|
anchor: { // 锚点样式
|
||||
|
fill: "#6edd97" |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,357 @@ |
|||||
|
<!--@author: wxm; @version: 1.0; date: 2021/5/15;--> |
||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<el-container style="height: 100%"> |
||||
|
<!--工具栏--> |
||||
|
<!-- <el-header style="position: absolute;right: 0;top:20px;height: 40px; z-index: 101;">--> |
||||
|
<!-- <el-button @click="methods.zoom(true)">放大</el-button>--> |
||||
|
<!-- <el-button @click="methods.zoom(false)">缩小</el-button>--> |
||||
|
<!-- <el-button @click="methods.resetZoom()">还原大小</el-button>--> |
||||
|
<!-- <el-button @click="methods.focusOn()">位置还原</el-button>--> |
||||
|
<el-button @click="methods.getGraphData()">获取数据</el-button> |
||||
|
<!-- <el-button @click="methods.undo()">上一步</el-button>--> |
||||
|
<!-- <el-button @click="methods.redo()">下一步</el-button>--> |
||||
|
<!-- </el-header>--> |
||||
|
<el-button @click="methods.downloadImg()">下载</el-button> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<el-container style="height: 100%"> |
||||
|
<!--组件栏--> |
||||
|
<div class="node-panel"> |
||||
|
<div class="node-item" @mousedown='methods.mouseDownHandle(item)' v-for="(item,index) in shapeList" :key="index"> |
||||
|
<div class="node-item-icon" :class="item.class"> |
||||
|
<span class="node-label">{{item.text}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--内容区--> |
||||
|
<el-main id="graph" style="height: 100%;"></el-main> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {toRefs,reactive,onMounted} from 'vue' |
||||
|
|
||||
|
import LogicFlow from '@logicflow/core'; |
||||
|
import '@logicflow/core/dist/style/index.css'; |
||||
|
//插件库 |
||||
|
import { NodeResize, Menu } from '@logicflow/extension'; |
||||
|
import '@logicflow/extension/lib/style/index.css' |
||||
|
|
||||
|
// 右键菜单 |
||||
|
LogicFlow.use(Menu); |
||||
|
|
||||
|
//节点缩放 |
||||
|
// 样式不要 |
||||
|
// NodeResize.style.outline = { |
||||
|
// style: { |
||||
|
// outline: { |
||||
|
// stroke: '#000000', |
||||
|
// strokeWidth: 1, |
||||
|
// strokeDasharray: '3,3', |
||||
|
// }, |
||||
|
// controlPoint: { |
||||
|
// width: 7, |
||||
|
// height: 7, |
||||
|
// fill: '#FFFFFF', |
||||
|
// stroke: '#000000', |
||||
|
// }, |
||||
|
// }, |
||||
|
// ...NodeResize.style.outline, |
||||
|
// stroke: '#1E90FF', |
||||
|
// strokeDasharray: '', |
||||
|
// } |
||||
|
LogicFlow.use(NodeResize); |
||||
|
NodeResize.step = 4; |
||||
|
LogicFlow.use(NodeResize); |
||||
|
|
||||
|
//框选 |
||||
|
import {SelectionSelect} from '@logicflow/extension'; |
||||
|
LogicFlow.use(SelectionSelect); |
||||
|
//SelectionSelect.open(); 此事件无效 |
||||
|
|
||||
|
//迷你地图 |
||||
|
// import {MiniMap} from '@logicflow/extension'; |
||||
|
// LogicFlow.use(MiniMap); |
||||
|
|
||||
|
//控制面板 |
||||
|
// import {Control} from '@logicflow/extension'; |
||||
|
// LogicFlow.use(Control ) |
||||
|
|
||||
|
//图片导出 |
||||
|
import { Snapshot } from '@logicflow/extension'; |
||||
|
LogicFlow.use(Snapshot); |
||||
|
|
||||
|
|
||||
|
import {BackgroundConfig} from './config/BackgroundConfig' |
||||
|
import {GridOptionsConfig} from './config/GridOptionsConfig' |
||||
|
import {StyleConfig} from './config/StyleConfig' |
||||
|
|
||||
|
import {registerMyRectNodeModel} from './node/myRectNode' |
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
components:{ |
||||
|
}, |
||||
|
setup(){ |
||||
|
onMounted(()=>{ |
||||
|
methods.init(); |
||||
|
window.onkeydown = function (){ |
||||
|
let key = window.event.keyCode; |
||||
|
if (key === 46) { |
||||
|
methods.deleteNode(); |
||||
|
} |
||||
|
console.log(key) |
||||
|
} |
||||
|
}); |
||||
|
const data = reactive({ |
||||
|
lf:null, |
||||
|
logicFlowData:{ |
||||
|
nodes:[ |
||||
|
{id: 1,type: 'rect', x: 400, y: 400, text: '矩形节点',width:200,height:200,}, |
||||
|
{id: 2,type: 'circle', x: 120, y: 80, text: {value: '圆形节点',x: 120, y: 80,},}, |
||||
|
{id: 3,type: 'ellipse', x: 200, y: 310, text: '椭圆节点',}, |
||||
|
{id: 5,type: 'ellipse', x: 250, y: 310, text: '椭圆节点',}, |
||||
|
{id: 4,type: 'my-rect', x: 250, y: 500, text: '自定义',}, |
||||
|
] |
||||
|
}, |
||||
|
shapeList: [ |
||||
|
{type: 'rect', text: '矩形',class:'node-rect'}, |
||||
|
{type: 'diamond', text: '菱形',class:'node-diamond'}, |
||||
|
{type: 'circle', text: '圆形',class:'node-circle'}, |
||||
|
{type: 'ellipse', text: '椭圆',class:'node-ellipse'}, |
||||
|
{type: 'my-rect', text: '自定义',class:'node-rect'}, |
||||
|
// {type: 'chatBubble', text: 'chatBubble',class:'node-polygon'}, |
||||
|
// {type: 'text=1', text: 'text=1',class:'node-polygon'}, |
||||
|
], |
||||
|
clickNodeId:'', |
||||
|
clickEdgeId:'', |
||||
|
}); |
||||
|
const methods = { |
||||
|
/** |
||||
|
* 初始化画板 |
||||
|
*/ |
||||
|
init : function () { |
||||
|
data.lf = new LogicFlow({ |
||||
|
// 容器配置 |
||||
|
container: document.querySelector('#graph'), |
||||
|
background: BackgroundConfig, |
||||
|
grid: GridOptionsConfig, |
||||
|
textEdit: true, //是否开启文本编辑 |
||||
|
isSilentMode: false, //仅浏览不可编辑模式,默认不开启 |
||||
|
edgeType: 'polyline', //line 直线 polyline 折线 bezier 贝塞尔曲线 |
||||
|
snapline: true, //是否启用节点辅助对齐线 |
||||
|
style: StyleConfig,//样式 |
||||
|
keyboard: {//cv快捷键 |
||||
|
enabled: true |
||||
|
}, |
||||
|
metaKeyMultipleSelected:true,//metaKeyMultipleSelected Boolean false - 是否开启功能键按住多选 |
||||
|
}); |
||||
|
|
||||
|
//注册自定义组件 |
||||
|
methods.registerNode(); |
||||
|
data.lf.render(data.logicFlowData); |
||||
|
//监听事件 |
||||
|
methods.monitorEvent(); |
||||
|
|
||||
|
//开启多选模式 |
||||
|
data.lf.updateEditConfig({ |
||||
|
stopMoveGraph: true |
||||
|
}) |
||||
|
|
||||
|
//开启地图 |
||||
|
//MiniMap.show(1000,100); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 注册自定义组件 |
||||
|
**/ |
||||
|
registerNode : function(){ |
||||
|
registerMyRectNodeModel(data.lf); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 拖拽 |
||||
|
* @param item 拖拽属性 |
||||
|
*/ |
||||
|
mouseDownHandle : function (item) { |
||||
|
//生成ID |
||||
|
let id = data.logicFlowData.nodes[data.logicFlowData.nodes.length -1].id + 1; |
||||
|
console.log(item,id) |
||||
|
data.lf.dnd.startDrag({ |
||||
|
id: id.toString(), |
||||
|
type:item.type, |
||||
|
text:item.text, |
||||
|
properties:{} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 放大或缩小画布 isZoomIn:boolean |
||||
|
zoom : function (isZoomIn){ |
||||
|
data.lf.zoom(isZoomIn); |
||||
|
}, |
||||
|
//还原 |
||||
|
resetZoom : function (){ |
||||
|
data.lf.resetZoom(); |
||||
|
}, |
||||
|
//等比缩小 size:number |
||||
|
setZoomMiniSize :function(size){ |
||||
|
data.lf.setZoomMiniSize(size) |
||||
|
}, |
||||
|
//等比放大 size:number |
||||
|
setZoomMaxSize : function (size){ |
||||
|
data.lf.setZoomMaxSize(size); |
||||
|
}, |
||||
|
|
||||
|
// 将图形移动到画布中心 focusOnArgs:{id:"内容ID",coordinate: {x: 11,y: 22}} |
||||
|
focusOn : function (){ |
||||
|
data.lf.focusOn({coordinate: {x: 180,y: 280}}); |
||||
|
}, |
||||
|
|
||||
|
//返回值,如果是应用了adapter插件,且设置为adapterOut,返回为转换后的数据格式,否则为默认的格式 |
||||
|
getGraphData : function (){ |
||||
|
console.log(data.lf.getGraphData()) |
||||
|
}, |
||||
|
|
||||
|
//撤销一步 |
||||
|
undo : function (){ |
||||
|
data.lf.undo(); |
||||
|
}, |
||||
|
|
||||
|
// 向前一步 |
||||
|
redo : function (){ |
||||
|
data.lf.redo(); |
||||
|
}, |
||||
|
|
||||
|
//监听事件 |
||||
|
monitorEvent : function (){ |
||||
|
//点击节点将 节点ID记录下来 |
||||
|
data.lf.on('element:click', (callback) => { |
||||
|
console.log('节点/线点击事件:' + 'element:click',callback) |
||||
|
//有连线起始节点的id 说明是线 |
||||
|
if (callback.data.sourceNodeId){ |
||||
|
data.clickEdgeId = callback.data.id; |
||||
|
//清除节点的 |
||||
|
data.clickNodeId = ''; |
||||
|
}else{ |
||||
|
data.clickNodeId = callback.data.id; |
||||
|
//清除线 |
||||
|
data.clickEdgeId = ''; |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
//点击画板 将记录下来的节点和线ID进行删除 |
||||
|
data.lf.on('blank:mousedown',() =>{ |
||||
|
console.log('画板点击事件:' + 'blank:mousedown') |
||||
|
data.clickNodeId = '' |
||||
|
data.clickEdgeId = '' |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//删除节点 |
||||
|
deleteNode : function (){ |
||||
|
if (data.clickNodeId){ |
||||
|
console.log("删除节点") |
||||
|
data.lf.deleteNode(data.clickNodeId); |
||||
|
//重置data.clickDataId |
||||
|
data.clickNodeId = null; |
||||
|
}else if (data.clickEdgeId){ |
||||
|
console.log("删除线") |
||||
|
data.lf.deleteEdge(data.clickEdgeId); |
||||
|
//重置data.clickEdgeId |
||||
|
data.clickEdgeId = ''; |
||||
|
}else{ |
||||
|
console.log("批量删除"); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//下载图片 |
||||
|
downloadImg : function (){ |
||||
|
data.lf.getSnapshot() |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
return { |
||||
|
...toRefs(data), |
||||
|
methods, |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
>>>.el-main{ |
||||
|
padding: 10px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
#app { |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.node-panel { |
||||
|
width: 70px; |
||||
|
padding: 20px 0; |
||||
|
background-color: white; |
||||
|
box-shadow: 0 0 10px 1px rgb(228, 224, 219); |
||||
|
border-radius: 6px; |
||||
|
text-align: center; |
||||
|
z-index: 101; |
||||
|
} |
||||
|
.node-item { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.node-item-icon { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
margin-left: 20px; |
||||
|
background-size: cover; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.node-label { |
||||
|
font-size: 12px; |
||||
|
margin-top: 5px; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.node-rect{ |
||||
|
width: 40px; |
||||
|
height: 30px; |
||||
|
border: 2px solid black; |
||||
|
} |
||||
|
.node-circle{ |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
border: 2px solid black; |
||||
|
} |
||||
|
.node-ellipse{ |
||||
|
border: 2px solid black; |
||||
|
border-radius: 60%; |
||||
|
width: 40px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
.node-polygon{ |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border: 2px solid black; |
||||
|
transform:rotate(45deg); |
||||
|
} |
||||
|
.node-diamond{ |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border: 2px solid black; |
||||
|
transform:rotate(45deg); |
||||
|
} |
||||
|
/*css 设置*/ |
||||
|
.lf-menu-delete .lf-menu-item-icon{ |
||||
|
display: inline-block; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
background: url('./img/delete.jpg') no-repeat; |
||||
|
background-size: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,84 @@ |
|||||
|
/*explain:;@author: wxm; @version: 1.0; date: 2021/6/9;*/ |
||||
|
import { h } from '@logicflow/core'; |
||||
|
import { RectResize } from '@logicflow/extension'; |
||||
|
|
||||
|
// 自定义节点的 model
|
||||
|
class Model extends RectResize.model{ |
||||
|
//自定义节点的样式
|
||||
|
setAttributes() { |
||||
|
const size = 100; |
||||
|
this.width = size; //width number ✅ 节点宽度
|
||||
|
this.height = size; //height number ✅ 节点高度
|
||||
|
this.fill = '#5F9EA0'; //fill color ✅ 节点填充颜色
|
||||
|
this.fillOpacity = 1; //fillOpacity number ✅ 节点填充颜色透明度
|
||||
|
this.stroke = "#588811"; // stroke color ✅ 节点边框颜色
|
||||
|
this.strokeOpacity = 1; //strokeOpacity number ✅ 节点边框颜色透明度
|
||||
|
this.strokeWidth = 1; // strokeWidth number ✅ 节点边框宽度
|
||||
|
this.opacity = 1; //opacity number ✅ 节点整体透明度
|
||||
|
this.outlineColor = '#00008B' //outlineColor color ✅ 外框颜色
|
||||
|
this.hoverOutlineColor = '#008000' // hoverOutlineColor color ✅ hover外边框颜色
|
||||
|
this.outlineStrokeDashArray = ''; //控制用来描外边框的点划线的图案范式, 设置为空是为实线
|
||||
|
this.hoverOutlineStrokeDashArray = ''; //控制用来描hover外边框的点划线的图案范式, 设置为空是为实线
|
||||
|
|
||||
|
//矩形节点特有
|
||||
|
this.radius = 5;//radius number ✅ 矩形圆角
|
||||
|
|
||||
|
//矩形节点特有
|
||||
|
this.radius = 5;//radius number ✅ 矩形圆角
|
||||
|
|
||||
|
// 设置自定义锚点
|
||||
|
// 只需要为每个锚点设置相对于节点中心的偏移量
|
||||
|
this.anchorsOffset = [ |
||||
|
[size / 2, 0], // x 轴上偏移 size / 2
|
||||
|
[-size / 2, 0], // x 轴上偏移 -size / 2
|
||||
|
]; |
||||
|
} |
||||
|
//设置连线规则
|
||||
|
getConnectedTargetRules() { |
||||
|
const rules = super.getConnectedTargetRules(); |
||||
|
const notAsTarget = { |
||||
|
message: '禁止自己连自己', |
||||
|
validate: (source,target) => { |
||||
|
return source.id !== target.id; |
||||
|
}, |
||||
|
}; |
||||
|
rules.push(notAsTarget); |
||||
|
return rules; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 自定义节点的 view
|
||||
|
class View extends RectResize.view{ |
||||
|
getResizeShape() { |
||||
|
// 通过 getAttributes 获取 model 中的属性
|
||||
|
const { x, y, width, height, fill, stroke, strokeWidth, radius } = this.getAttributes(); |
||||
|
const attrs = { |
||||
|
// rect 标签的 x,y 对应的是图形的左上角
|
||||
|
// 所以我们要将矩形的中心移动到 x,y
|
||||
|
x: x - width / 2, |
||||
|
y: y - height / 2, |
||||
|
width, |
||||
|
height, |
||||
|
stroke, |
||||
|
fill, |
||||
|
strokeWidth, |
||||
|
rx: radius, |
||||
|
ry: radius, |
||||
|
} |
||||
|
// getShape 的返回值是一个通过 h 方法创建的 svg 元素
|
||||
|
return h("g", {}, [ |
||||
|
h("rect", { ...attrs }), |
||||
|
h( |
||||
|
'svg', |
||||
|
{x: x - width / 2 + 5, y: y - height / 2 + 5, width: 25, height: 25, viewBox: "0 0 1274 1024",}, |
||||
|
h('path', {fill: stroke, d: "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"}) |
||||
|
), |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function registerMyRectNodeModel(lf){ |
||||
|
lf.register({type:"my-rect",view:View,model:Model}) |
||||
|
} |
||||