封装流程属性面板组件：流程属性、发起权限、开始节点。封装全局组件：选择角色和选择账号。
parent
7caecfbac7
commit
1a51ad1c7b
|
|
@ -7,7 +7,7 @@
|
|||
'connection.changed'
|
||||
]" @element-click="elementClick" @init-finished="initModeler" @event="handlerEvent" @save="onSaveProcess" />
|
||||
<!-- 属性面板 -->
|
||||
<bmpn-process-penal :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel" />
|
||||
<bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
body {
|
||||
overflow: auto !important;
|
||||
margin: 0;
|
||||
|
|
@ -108,4 +108,7 @@
|
|||
-webkit-border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.process-panel{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
|
||||
import { h,provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
|
||||
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
|
||||
// 生产环境时优化
|
||||
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||
|
|
@ -150,6 +150,8 @@
|
|||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||
props.events.forEach(event => {
|
||||
EventBus.on(event, function (eventObj) {
|
||||
console.log(eventObj)
|
||||
provide('wfdesign',eventObj)
|
||||
let eventName = event.replace(/\./g, "-");
|
||||
let element = eventObj ? eventObj.element : null;
|
||||
emit(eventName, element, eventObj);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,26 @@
|
|||
<!--
|
||||
* @Author: 刘妍
|
||||
* @Date: 2024-03-05 17:09:44
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-07 14:48:08
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="process-panel__container" :style="{ width: `${props.width}px` }">
|
||||
属性面板
|
||||
<div :class="prefixCls" :style="{ width: `${props.width}px` }">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="流程属性">
|
||||
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="发起权限" force-render>
|
||||
<auth-config ref="auth"></auth-config>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="开始节点">
|
||||
<start-event-option ref="start" :element="data.elementData"></start-event-option>
|
||||
</a-tab-pane>
|
||||
<!-- <a-tab-pane key="4" tab="审核节点">
|
||||
<user-task-option ref="task"></user-task-option>
|
||||
</a-tab-pane> -->
|
||||
</a-tabs>
|
||||
<!-- <el-tabs v-model="configActiveName" :stretch="true">
|
||||
<el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
|
||||
<component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
|
||||
|
|
@ -17,38 +37,32 @@
|
|||
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
|
||||
</Tabs.TabPane>
|
||||
</Tabs> -->
|
||||
<!-- <Tabs>
|
||||
<template v-for="item in achieveList" :key="item.key">
|
||||
<Tabs.TabPane :tab="item.name">
|
||||
<component :is="tabs[item.component]" />
|
||||
<component :is="ElementBaseInfo" />
|
||||
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="data.elementBusinessObject"
|
||||
:type="data.elementType" />
|
||||
</Tabs.TabPane>
|
||||
</template>
|
||||
</Tabs> -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref } from 'vue';
|
||||
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
|
||||
import { Tabs } from 'ant-design-vue';
|
||||
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
const { prefixCls } = useDesign('process-property');
|
||||
|
||||
|
||||
// 流程属性
|
||||
import shcemeinfoConfig from './config/shcemeInfo.vue'
|
||||
import shcemeinfoConfig from './shcemeInfo/index.vue'
|
||||
// 发起权限
|
||||
import authConfig from './auth/index.vue'
|
||||
// 开始节点
|
||||
import startEventOption from './config/startEvent.vue'
|
||||
import startEventOption from './startEvent/index.vue'
|
||||
// 审核节点
|
||||
import userTaskOption from './userTask/index.vue'
|
||||
// 结束节点
|
||||
import endEventOption from './config/endEvent.vue'
|
||||
|
||||
import gatewayAndOption from './config/gatewayAnd.vue'
|
||||
import gatewayInclusiveOption from './config/gatewayInclusive.vue'
|
||||
import gatewayXorOption from './config/gatewayXor.vue'
|
||||
import scriptTaskOption from './config/scriptTask.vue'
|
||||
import subprocessOption from './config/subprocess.vue'
|
||||
import userTaskOption from './config/userTask.vue'
|
||||
import mylineOption from './config/myline.vue'
|
||||
/**
|
||||
* 侧边栏
|
||||
|
|
@ -64,16 +78,18 @@
|
|||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 480
|
||||
default: 520
|
||||
},
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
element: Object
|
||||
})
|
||||
console.log(props)
|
||||
|
||||
provide('prefix', props.prefix)
|
||||
provide('width', props.width)
|
||||
const activeKey = ref("1")
|
||||
const data = reactive({
|
||||
configActiveName: 'tab02',
|
||||
currentWfNode: undefined,
|
||||
|
|
@ -88,8 +104,14 @@
|
|||
subprocess: '子流程',
|
||||
myline: '线条'
|
||||
},
|
||||
|
||||
elementData:{}
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
data.elementData = newVal
|
||||
}
|
||||
)
|
||||
const achieveList = ref([
|
||||
{
|
||||
key: '1',
|
||||
|
|
@ -107,4 +129,22 @@
|
|||
startEventOption,
|
||||
};
|
||||
|
||||
</script>
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-process-property';
|
||||
|
||||
.@{prefix-cls} {
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
::v-deep .ant-tabs {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .ant-tabs-content-holder {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<!--
|
||||
* @Author: 刘妍
|
||||
* @Date: 2024-03-05 17:09:44
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-07 10:46:55
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-config">
|
||||
<a-tabs v-model:activeKey="f_AuthType" type="card" size="small">
|
||||
<a-tab-pane key="1" tab="所有成员">
|
||||
<a-alert message="权限说明" description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。" type="info" show-icon />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="指定成员">
|
||||
<a-space>
|
||||
<a-radio-group>
|
||||
<a-radio-button value="1" @click="handlePostClick">岗位</a-radio-button>
|
||||
<a-radio-button value="2" @click="handleRoleClick">角色</a-radio-button>
|
||||
<a-radio-button value="3" @click="handleAccountClick">用户</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button danger :size="size">清空</a-button>
|
||||
</a-space>
|
||||
<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<a-popconfirm v-if="dataSource.length" title="Sure to delete?"
|
||||
@confirm="onDelete(record.key)">
|
||||
<a>Delete</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-modal width="60%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
|
||||
<BasicTree ref="asyncExpandTreeRef" title="部门和职级列表" toolbar
|
||||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :clickRowToExpand="false"
|
||||
:treeData="treeData" :fieldNames="{ key: 'id', title: 'name' ,disabled:'disabled'}"
|
||||
:defaultExpandAll="true" :checkable="true" :checkStrictly="true" @check="handleSelect" />
|
||||
|
||||
</a-modal>
|
||||
<a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
|
||||
<SelectRole ref="roleRef"></SelectRole>
|
||||
</a-modal>
|
||||
<a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
|
||||
<SelectAccount ref="accountRef"></SelectAccount>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted, nextTick, unref } from 'vue';
|
||||
const f_AuthType = ref("1")
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import { BasicTree, TreeItem } from '@/components/Tree';
|
||||
import SelectRole from '@/components/SelectRole/index.vue';
|
||||
import SelectAccount from '@/components/SelectAccount/index.vue';
|
||||
import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
},
|
||||
|
||||
];
|
||||
const dataSource = [
|
||||
{
|
||||
id: 0,
|
||||
name: "王五",
|
||||
type: "管理员",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "王五",
|
||||
type: "管理员",
|
||||
},
|
||||
]
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
const data = reactive({
|
||||
postOpen: false,
|
||||
roleOpen: false,
|
||||
accountOpen: false,
|
||||
})
|
||||
// 岗位
|
||||
function handlePostClick() {
|
||||
data.postOpen = true;
|
||||
}
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
const posData = ref([])
|
||||
function treeIterator(tree) {
|
||||
tree.forEach((node) => {
|
||||
if (node.key == 0) {
|
||||
node.name = "部门--" + node.name
|
||||
node.disableCheckbox = true
|
||||
} else {
|
||||
node.name = "职级--" + node.name
|
||||
// 需要拼接parentName
|
||||
posData.value.push(node)
|
||||
}
|
||||
node.children && treeIterator(node.children)
|
||||
})
|
||||
}
|
||||
async function fetch() {
|
||||
const data = (await getOrgPositonTree()) as unknown as TreeItem[];
|
||||
treeIterator(data)
|
||||
treeData.value = await data
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
let orgList = ref([])
|
||||
let posList = ref([])
|
||||
function handleSelect(checkedKeys, e: { checked: bool, checkedNodes, node, event }) {
|
||||
const list = e.checkedNodes
|
||||
console.log(e.node)
|
||||
console.log(checkedKeys)
|
||||
orgList.value = []
|
||||
posList.value = []
|
||||
list.forEach(element => {
|
||||
if (element.key > 0) {
|
||||
posList.value.push({
|
||||
orgId: Number(element.tag),
|
||||
posId: element.id,
|
||||
})
|
||||
} else {
|
||||
orgList.value.push({
|
||||
orgId: element.id,
|
||||
posId: 0,
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
function postHandleOk() {
|
||||
console.log(posData.value)
|
||||
console.log(unref(asyncExpandTreeRef)?.getCheckedKeys())
|
||||
}
|
||||
// 角色
|
||||
const roleRef = ref < any > ()
|
||||
|
||||
function handleRoleClick() {
|
||||
data.roleOpen = true;
|
||||
}
|
||||
function roleHandleOk() {
|
||||
console.log(roleRef.value.getRow())
|
||||
}
|
||||
// 用户
|
||||
const accountRef = ref < any > ()
|
||||
|
||||
function handleAccountClick() {
|
||||
data.accountOpen = true;
|
||||
}
|
||||
function accountHandleOk() {
|
||||
console.log(accountRef.value.getRow())
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.site-space-compact-wrapper {
|
||||
width: 100%;
|
||||
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-tabs {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
<template>
|
||||
<l-layout >
|
||||
<template #top>
|
||||
<div style="text-align: center;padding-top:16px;" >
|
||||
<el-radio-group v-model="formData.f_AuthType" size="mini">
|
||||
<el-radio-button label="1">所有成员</el-radio-button>
|
||||
<el-radio-button label="2">指定成员</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="formData.f_AuthType == 1" style="padding:0 16px;">
|
||||
<el-alert
|
||||
title="权限说明"
|
||||
type="info"
|
||||
description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。"
|
||||
show-icon
|
||||
:closable="false"
|
||||
>
|
||||
</el-alert>
|
||||
</div>
|
||||
<template v-else-if="formData.f_AuthType == 2" >
|
||||
<l-layout :top="40">
|
||||
<template #top>
|
||||
<div style="padding-left:8px;float:left;" >
|
||||
<el-button-group>
|
||||
<el-button size="mini" icon="el-icon-plus" @click="handlePostClick">{{$t('岗位')}}</el-button>
|
||||
<el-button size="mini" icon="el-icon-plus" @click="handleRoleClick">{{$t('角色')}}</el-button>
|
||||
<el-button size="mini" icon="el-icon-plus" @click="handleUserClick">{{$t('用户')}}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div style="padding-right:8px;float:right;">
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{$t('清空')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<l-table :columns="columns" :dataSource="tableData" >
|
||||
<template v-slot:type="scope" >
|
||||
{{typeFormat(scope.row.type)}}
|
||||
</template>
|
||||
<l-table-btns :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
|
||||
</l-table>
|
||||
</l-layout>
|
||||
|
||||
</template>
|
||||
<l-dialog
|
||||
:title="$t('添加岗位')"
|
||||
:visible.sync="selectPostVisible"
|
||||
:height="480"
|
||||
width="1024px"
|
||||
|
||||
@ok="handlePostSelectOk"
|
||||
@closed="handlePostSelectClosed"
|
||||
>
|
||||
<l-post-select-panel ref="postSelectPanel" ></l-post-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
<l-dialog
|
||||
:title="$t('添加角色')"
|
||||
:visible.sync="selectRoleVisible"
|
||||
:height="480"
|
||||
width="800px"
|
||||
|
||||
@ok="handleRoleSelectOk"
|
||||
@closed="handleRoleSelectClosed"
|
||||
>
|
||||
<l-role-select-panel ref="roleSelectPanel" ></l-role-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
<l-dialog
|
||||
:title="$t('用户岗位')"
|
||||
:visible.sync="selectUserVisible"
|
||||
:height="480"
|
||||
width="1024px"
|
||||
|
||||
@ok="handleUserSelectOk"
|
||||
@closed="handleUserSelectClosed"
|
||||
>
|
||||
<l-user-select-panel ref="userSelectPanel" ></l-user-select-panel>
|
||||
</l-dialog>
|
||||
</l-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'auth-config',
|
||||
data () {
|
||||
return {
|
||||
columns:[
|
||||
{label:'类型',prop:'type',width:'60', align: 'center'},
|
||||
{label:'名称',prop:'name',minWidth:'100'},
|
||||
],
|
||||
tableBtns:[
|
||||
{prop:'Delete',label:'删除'}
|
||||
],
|
||||
tableData:[],
|
||||
formData:{
|
||||
f_AuthType:1
|
||||
},
|
||||
selectPostVisible:false,
|
||||
selectRoleVisible:false,
|
||||
selectUserVisible:false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
},
|
||||
created () {
|
||||
this.lr_loadDblink()
|
||||
},
|
||||
methods: {
|
||||
handlePostClick(){
|
||||
this.selectPostVisible = true;
|
||||
},
|
||||
handlePostSelectClosed(){
|
||||
this.$refs.postSelectPanel.resetForm();
|
||||
},
|
||||
handlePostSelectOk(){
|
||||
let selectData = this.$refs.postSelectPanel.getForm().map(t=>{return {type:1,id:t.f_PostId,name:t.name} });
|
||||
this.addTableData(selectData);
|
||||
this.selectPostVisible = false;
|
||||
},
|
||||
|
||||
handleRoleClick(){
|
||||
this.selectRoleVisible = true;
|
||||
},
|
||||
handleRoleSelectClosed(){
|
||||
this.$refs.roleSelectPanel.resetForm();
|
||||
},
|
||||
handleRoleSelectOk(){
|
||||
let selectData = this.$refs.roleSelectPanel.getForm().map(t=>{return {type:2,id:t.f_RoleId,name:t.f_FullName} });
|
||||
this.addTableData(selectData);
|
||||
this.selectRoleVisible = false;
|
||||
},
|
||||
|
||||
handleUserClick(){
|
||||
this.selectUserVisible = true;
|
||||
},
|
||||
handleUserSelectClosed(){
|
||||
this.$refs.userSelectPanel.resetForm();
|
||||
},
|
||||
handleUserSelectOk(){
|
||||
let selectData = this.$refs.userSelectPanel.getForm().map(t=>{return {type:3,id:t.f_UserId,name:t.name} });
|
||||
this.addTableData(selectData);
|
||||
this.selectUserVisible = false;
|
||||
},
|
||||
|
||||
|
||||
addTableData(selectData){
|
||||
let addData = selectData.filter(t=>this.tableData.findIndex(t2=>t2.id == t.id) == -1 );
|
||||
this.tableData = this.tableData.concat(addData);
|
||||
},
|
||||
handleTableBtnClick(btn){
|
||||
this.tableData.splice(btn.rowIndex,1);
|
||||
},
|
||||
handleClearClick(){
|
||||
this.tableData = [];
|
||||
},
|
||||
typeFormat(type){
|
||||
switch(type){
|
||||
case 1:
|
||||
return '岗位'
|
||||
case 2:
|
||||
return '角色'
|
||||
case 3:
|
||||
return '用户'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
resetForm(){
|
||||
this.$refs.form && this.$refs.form.resetFields();
|
||||
this.tableData = [];
|
||||
},
|
||||
// 校验表单
|
||||
validateForm(callback){
|
||||
this.$refs.form.validate((valid) => {
|
||||
if(valid){
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
setForm(data){
|
||||
this.formData.f_AuthType = data.f_AuthType;
|
||||
this.tableData = data.authData;
|
||||
},
|
||||
getForm(){
|
||||
return {
|
||||
f_AuthType:this.formData.f_AuthType,
|
||||
authData:this.tableData
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
<template>
|
||||
<el-form class="l-form-config" label-width="96px" label-position="left" size="mini" :model="formData" :rules="rules"
|
||||
ref="form">
|
||||
<el-form-item v-if="!disabled" label="模板编号" prop="f_Code">
|
||||
<el-input v-model="formData.f_Code" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled" label="模板名称" prop="f_Name">
|
||||
<el-input v-model="formData.f_Name" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled" label="模板图标" prop="f_Icon">
|
||||
<l-input-icon onlyFirst v-model="formData.f_Icon"></l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled" label="图标颜色" prop="f_Color">
|
||||
<l-input-color v-model="formData.f_Color" placeholder="请输入"></l-input-color>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled" label="模板分类" prop="f_Category">
|
||||
<el-select v-model="formData.f_Category" placeholder="请选择">
|
||||
<el-option v-for="item in lr_dataItem['FlowSort']" :key="item.f_ItemValue" :label="item.f_ItemName"
|
||||
:value="item.f_ItemValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--<el-form-item label="任务命名规则" prop="titleRules">
|
||||
<el-input v-model="formData.titleRules" readonly="readonly"
|
||||
placeholder="请输入任务命名规则">
|
||||
<el-button slot="append" icon="el-icon-setting" @click="handleTitleRulesClick"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>-->
|
||||
<el-form-item v-if="!disabled" label="我的任务创建" prop="f_Mark">
|
||||
<l-radio v-model="formData.f_Mark" :options="optionsNotOrOk"></l-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled" label="移动端创建" prop="f_IsInApp">
|
||||
<l-radio v-model="formData.f_IsInApp" :options="optionsNotOrOk"></l-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled" prop="f_Description" label-width="0">
|
||||
<el-input type="textarea" rows="4" v-model="formData.f_Description" placeholder="请填写备注"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>撤销操作</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;">
|
||||
<el-radio-group v-model="formData.undoType" size="mini" :disabled="disabled">
|
||||
<el-radio-button label="1">执行SQL</el-radio-button>
|
||||
<el-radio-button label="2">.NET方法</el-radio-button>
|
||||
<el-radio-button label="3">第三方接口</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--执行SQL-->
|
||||
<div v-if="formData.undoType == '1'">
|
||||
<el-form-item prop="undoDbCode" label-width="0">
|
||||
<el-select :disabled="disabled" v-model="formData.undoDbCode" placeholder="请选择执行SQL数据库">
|
||||
<el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
|
||||
<el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="undoDbSQL" label-width="0">
|
||||
<el-input :readonly="disabled" type="textarea" v-model="formData.undoDbSQL" rows="8"
|
||||
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!--.NET方法-->
|
||||
<div v-else-if="formData.undoType == '2'">
|
||||
<el-form-item prop="undoIOCName" label-width="0">
|
||||
<el-input :readonly="disabled" v-model="formData.undoIOCName" placeholder="请填写.NET方法IOC别名"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!--第三方接口-->
|
||||
<div v-else-if="formData.undoType == '3'">
|
||||
<el-form-item prop="undoUrl" label-width="0">
|
||||
<el-input :readonly="disabled" type="textarea" rows="4" v-model="formData.undoUrl"
|
||||
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider>作废操作</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;">
|
||||
<el-radio-group v-model="formData.deleteType" size="mini" :disabled="disabled">
|
||||
<el-radio-button label="1">执行SQL</el-radio-button>
|
||||
<el-radio-button label="2">.NET方法</el-radio-button>
|
||||
<el-radio-button label="3">第三方接口</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--执行SQL-->
|
||||
<div v-if="formData.deleteType == '1'">
|
||||
<el-form-item prop="deleteDbCode" label-width="0">
|
||||
<el-select v-model="formData.deleteDbCode" placeholder="请选择执行SQL数据库" :disabled="disabled">
|
||||
<el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
|
||||
<el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="deleteDbSQL" label-width="0">
|
||||
<el-input :readonly="disabled" type="textarea" v-model="formData.deleteDbSQL" rows="8"
|
||||
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!--.NET方法-->
|
||||
<div v-else-if="formData.deleteType == '2'">
|
||||
<el-form-item prop="deleteIOCName" label-width="0">
|
||||
<el-input :readonly="disabled" v-model="formData.deleteIOCName" placeholder="请填写.NET方法IOC别名"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!--第三方接口-->
|
||||
<div v-else-if="formData.deleteType == '3'">
|
||||
<el-form-item prop="deleteUrl" label-width="0">
|
||||
<el-input :readonly="disabled" type="textarea" rows="4" v-model="formData.deleteUrl"
|
||||
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider>删除草稿</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;">
|
||||
<el-radio-group v-model="formData.deleteDraftType" size="mini" :disabled="disabled">
|
||||
<el-radio-button label="1">执行SQL</el-radio-button>
|
||||
<el-radio-button label="2">.NET方法</el-radio-button>
|
||||
<el-radio-button label="3">第三方接口</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--执行SQL-->
|
||||
<div v-if="formData.deleteDraftType == '1'">
|
||||
<el-form-item prop="deleteDbCode" label-width="0">
|
||||
<el-select v-model="formData.deleteDraftDbCode" placeholder="请选择执行SQL数据库" :disabled="disabled">
|
||||
<el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
|
||||
<el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="deleteDraftDbSQL" label-width="0">
|
||||
<el-input :readonly="disabled" type="textarea" v-model="formData.deleteDraftDbSQL" rows="8"
|
||||
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!--.NET方法-->
|
||||
<div v-else-if="formData.deleteDraftType == '2'">
|
||||
<el-form-item prop="deleteDraftIOCName" label-width="0">
|
||||
<el-input :readonly="disabled" v-model="formData.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!--第三方接口-->
|
||||
<div v-else-if="formData.deleteDraftType == '3'">
|
||||
<el-form-item prop="deleteDraftUrl" label-width="0">
|
||||
<el-input :readonly="disabled" type="textarea" rows="4" v-model="formData.deleteDraftUrl"
|
||||
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
<l-dialog :title="$t('流程任务命名规则配置')" :visible.sync="titleRulesVisible" :height="480" width="600px">
|
||||
<div class="l-rblock" style="padding:8px">
|
||||
<el-alert :title="titleRules" type="info" :closable="false" v-if="!$validatenull(titleRules)">
|
||||
</el-alert>
|
||||
<draggable :list="titleRulesList" :group="{ name: 'dic' }" ghost-class="set-item-ghost"
|
||||
handle=".l-drag-item">
|
||||
<div v-for="(item, index) in titleRulesList" class="l-set-item" :key="index">
|
||||
<i class="l-drag-item el-icon-rank"></i>
|
||||
<l-select style="width:26%;margin-right:1%;" size="mini" v-model="item.F_FiledValueType"
|
||||
:placeholder="$t('字段值类型')" :options="vTypeOptions" @change="handleChangeVType(item)">
|
||||
</l-select>
|
||||
<el-input :readonly="item.F_FiledValueType != 1 && item.F_FiledValueType != 10 "
|
||||
style="width:26%;" size="mini" v-model="item.F_FiledValue" placeholder="字段值"></el-input>
|
||||
<el-button @click="handleRemoveConditions(index)" circle plain type="danger" size="mini"
|
||||
icon="el-icon-minus" class="l-delete-item" style="padding: 4px;"></el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="padding-left:22px;">
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline"
|
||||
@click="handleAddTitleRulesList">添加流程任务命名规则配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</l-dialog>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref } from 'vue';
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const data = reactive({
|
||||
optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
|
||||
formData: {
|
||||
f_Code: '',
|
||||
f_Name: '',
|
||||
f_Category: '',
|
||||
f_Mark: 1,
|
||||
f_IsInApp: 2,
|
||||
f_Description: '',
|
||||
|
||||
titleRules: '',
|
||||
|
||||
undoType: 1,
|
||||
undoDbCode: '',
|
||||
undoDbSQL: '',
|
||||
undoIOCName: '',
|
||||
undoUrl: '',
|
||||
|
||||
deleteType: 1,
|
||||
deleteDbCode: '',
|
||||
deleteDbSQL: '',
|
||||
deleteIOCName: '',
|
||||
deleteUrl: '',
|
||||
|
||||
deleteDraftType: 1,
|
||||
deleteDraftDbCode: '',
|
||||
deleteDraftDbSQL: '',
|
||||
deleteDraftIOCName: '',
|
||||
deleteDraftUrl: '',
|
||||
|
||||
f_Icon: 'learun-icon-stars',
|
||||
f_Color: '#409EFF',
|
||||
|
||||
|
||||
},
|
||||
rules: {
|
||||
f_Code: [
|
||||
{ required: true, message: '请输入模板编号' },
|
||||
{ validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
|
||||
],
|
||||
f_Name: [
|
||||
{ required: true, message: '请输入模板名称' }
|
||||
],
|
||||
f_Category: [
|
||||
{ required: true, message: '请选择模板分类' }
|
||||
],
|
||||
f_Icon: [
|
||||
{ required: true, message: '请选择图标' }
|
||||
],
|
||||
f_Color: [
|
||||
{ required: true, message: '请选择颜色' }
|
||||
],
|
||||
},
|
||||
titleRulesVisible: false,
|
||||
titleRules: '',
|
||||
titleRulesList: []
|
||||
})
|
||||
function handleTitleRulesClick() {
|
||||
data.titleRulesVisible = true;
|
||||
}
|
||||
function handleAddTitleRulesList() {
|
||||
data.titleRulesList.push({ type: 1, value: '' });
|
||||
}
|
||||
function handleRemoveConditions() {
|
||||
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
data.formData.f_Id = ''
|
||||
data.formData.f_SchemeId = ''
|
||||
this.$refs.form && this.$refs.form.resetFields()
|
||||
}
|
||||
// 校验表单
|
||||
function validateForm() {
|
||||
return new Promise((resolve) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
resolve(valid)
|
||||
})
|
||||
})
|
||||
}
|
||||
function setForm(data) {
|
||||
data.formData = data
|
||||
}
|
||||
function getForm() {
|
||||
return this.$deepClone(data.formData)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
lr_loadDblink();
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,283 +0,0 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<el-form class="l-form-config" label-width="88px" label-position="left" size="mini">
|
||||
<el-form-item label="节点标识">
|
||||
<el-input v-model="node.id" readonly></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="下一审核人">
|
||||
<el-switch :disabled="disabled" v-model="node.isNextAuditor">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="自定义标题">
|
||||
<el-switch :disabled="disabled" v-model="node.isCustmerTitle">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="通知策略">
|
||||
<l-checkbox :disabled="disabled" v-model="node.messageType"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]">
|
||||
</l-checkbox>
|
||||
</el-form-item>
|
||||
<el-divider>表单添加</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;">
|
||||
<el-radio-group :disabled="disabled" v-model="node.formType" size="mini" @change="handleFormTypeChange">
|
||||
<el-radio-button label="1">自定义表单</el-radio-button>
|
||||
<el-radio-button label="2">系统表单</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-show="node.formType === '1'">
|
||||
<el-form-item label-width="0px">
|
||||
<l-custmerform-select v-model="node.formCode" @change="custmerformChange" :disabled="disabled">
|
||||
</l-custmerform-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<l-select v-model="node.formVerison" :disabled="disabled" :options="formVerisons"
|
||||
@change="custmerformVerisonChange" placeholder="请选择表单版本">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<l-select v-model="node.formRelationId" :disabled="disabled" :options="node.formRelations"
|
||||
placeholder="请选择流程关联字段">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-show="node.formType === '2'">
|
||||
<el-form-item label-width="0px">
|
||||
<el-input v-model="node.formUrl" placeholder="请输入PC端表单地址" :readonly="disabled">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<el-input v-model="node.formAppUrl" placeholder="请输入APP端表单地址" :readonly="disabled">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider>表单字段权限</el-divider>
|
||||
<template v-if="node.formType === '1'">
|
||||
<l-table height="notset" :isShowNum="false" :columns="columns" :dataSource="node.authFields" ref="authField">
|
||||
<template v-slot:required="scope">
|
||||
<el-switch v-model="scope.row.required" :disabled="disabled || scope.row.type == 'grid'">
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-slot:isEdit="scope">
|
||||
<el-switch v-model="scope.row.isEdit" :disabled="disabled || scope.row.type == 'gridrequired'">
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-slot:isLook="scope">
|
||||
<el-switch v-model="scope.row.isLook"
|
||||
:disabled="disabled || scope.row.type == 'grid' || scope.row.type == 'gridrequired'">
|
||||
</el-switch>
|
||||
</template>
|
||||
</l-table>
|
||||
</template>
|
||||
<template v-else>
|
||||
<l-edit-table addBtnText="添加字段" :dataSource="node.authFields" :isShowNum="false" @addRow="handleAddAuthField"
|
||||
@deleteRow="handleDeleteAuthField">
|
||||
<el-table-column prop="label" label="名称" minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" size="mini" v-model="scope.row.label" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="field" label="字段" minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" size="mini" v-model="scope.row.field" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="required" label="必填" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.required" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isEdit" label="编辑" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isEdit" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isLook" label="查看" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isLook" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取的接口，core\modules\custmerForm\api\scheme.js
|
||||
// const apiForm = window.$api.custmerForm.scheme
|
||||
|
||||
export default {
|
||||
name: 'start-event-option',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ label: '名称', prop: 'label', minWidth: '100' },
|
||||
{ label: '字段', prop: 'field', minWidth: '100' },
|
||||
{ label: '必填', prop: 'required', width: '64', align: 'center' },
|
||||
{ label: '编辑', prop: 'isEdit', width: '64', align: 'center' },
|
||||
{ label: '查看', prop: 'isLook', width: '64', align: 'center' },
|
||||
],
|
||||
tableBtns: [
|
||||
{ prop: 'Delete', label: '删除' }
|
||||
],
|
||||
formRelations: []
|
||||
}
|
||||
},
|
||||
asyncComputed: {
|
||||
formVerisons: {
|
||||
async get() {
|
||||
let res = []
|
||||
if (!this.$validatenull(this.node.formCode) && this.node.formType == '1') {
|
||||
// res = await this.$awaitWraper(apiForm.getHistoryList(this.node.formCode))
|
||||
}
|
||||
return (res || []).map(t => { return { label: this.lr_dateFormat(t.f_CreateDate), value: t.f_Id } })
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
node() {
|
||||
return this.wfdesign.currentWfNode;
|
||||
}
|
||||
},
|
||||
inject: ["wfdesign"],
|
||||
methods: {
|
||||
async custmerformChange(val) {
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
if (val == null) {
|
||||
this.node.authFields = [];
|
||||
this.node.formVerison = ''
|
||||
return;
|
||||
}
|
||||
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
|
||||
// const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
|
||||
if (this.node.formCode == f_SchemeInfoId) {
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
|
||||
}
|
||||
this.node.formVerison = val.f_SchemeId
|
||||
},
|
||||
async custmerformVerisonChange(val) {
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
if (this.$validatenull(val)) {
|
||||
this.node.authFields = []
|
||||
return
|
||||
}
|
||||
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
|
||||
// const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
|
||||
if (this.node.formVerison == f_Id) {
|
||||
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
|
||||
}
|
||||
},
|
||||
loadFormScheme(strScheme) {
|
||||
const scheme = JSON.parse(strScheme)
|
||||
const fields = []
|
||||
const rfields = []
|
||||
scheme.formInfo.tabList.forEach(tab => {
|
||||
tab.components.forEach(component => {
|
||||
if (['guid'].includes(component.type)) {
|
||||
rfields.push({ label: component.label, value: component.prop })
|
||||
}
|
||||
|
||||
if (!['gridtable', 'divider'].includes(component.type) && component.display) {
|
||||
fields.push({
|
||||
prop: component.prop,
|
||||
field: component.field,
|
||||
label: component.label,
|
||||
table: component.table,
|
||||
required: component.required,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
})
|
||||
}
|
||||
else if (['gridtable'].includes(component.type)) {
|
||||
fields.push({
|
||||
prop: `${component.prop}_add`,
|
||||
label: `${component.label || '表格'}-添加按钮`,
|
||||
required: false,
|
||||
isEdit: true,
|
||||
isLook: false,
|
||||
type: 'grid'
|
||||
})
|
||||
fields.push({
|
||||
prop: `${component.prop}_remove`,
|
||||
label: `${component.label || '表格'}-删除按钮`,
|
||||
required: false,
|
||||
isEdit: true,
|
||||
isLook: false,
|
||||
type: 'grid'
|
||||
})
|
||||
|
||||
fields.push({
|
||||
prop: `${component.prop}_required`,
|
||||
label: `${component.label || '表格'}-数据`,
|
||||
required: component.required,
|
||||
isEdit: false,
|
||||
isLook: false,
|
||||
type: 'gridrequired'
|
||||
})
|
||||
fields.push(...component.children.filter(t => t.display).map(t => {
|
||||
return {
|
||||
gridprop: component.prop,
|
||||
prop: t.prop,
|
||||
field: t.field,
|
||||
label: `${component.label || '表格'}-${t.label}`,
|
||||
table: component.table,
|
||||
required: t.required,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
this.node.formRelations = rfields
|
||||
this.node.authFields = fields
|
||||
|
||||
},
|
||||
handleFormTypeChange() {
|
||||
this.node.formCode = ''
|
||||
this.node.formUrl = ''
|
||||
this.node.formAppUrl = ''
|
||||
this.node.authFields = []
|
||||
this.node.formRelations = []
|
||||
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
|
||||
},
|
||||
handleAddAuthField() {
|
||||
this.node.authFields.push({
|
||||
field: '',
|
||||
label: '',
|
||||
required: true,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
})
|
||||
},
|
||||
handleDeleteAuthField({ index }) {
|
||||
this.node.authFields.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,805 +0,0 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<el-form
|
||||
label-width="96px"
|
||||
label-position="left"
|
||||
size="mini"
|
||||
>
|
||||
<el-collapse v-model="activeNames" accordion>
|
||||
<el-collapse-item :title="$t('基础配置')" name="1">
|
||||
<div style="padding:0 16px;">
|
||||
<el-form-item label="节点标识">
|
||||
<el-input v-model="node.id" readonly ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="继承表单">
|
||||
<el-switch :disabled="disabled" v-model="node.isInherit">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许加签">
|
||||
<el-switch :disabled="disabled" v-model="node.isAddSign">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许转移">
|
||||
<el-switch :disabled="disabled" v-model="node.isTransfer">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许批量审核">
|
||||
<el-switch :disabled="disabled" v-model="node.isBatchAudit">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动同意规则">
|
||||
<l-select multiple :disabled="disabled" v-model="node.autoAgree" :options="atuoAgreeOptions" >
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="无对应处理人">
|
||||
<l-select :disabled="disabled" v-model="node.noAuditor" :options="noAuditorOptions" >
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="驳回策略">
|
||||
<l-radio :disabled="disabled" v-model="node.rejectType" :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]" >
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="通知策略">
|
||||
<l-checkbox :disabled="disabled" v-model="node.messageType" :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" >
|
||||
</l-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('审核人员设置')" name="2">
|
||||
<el-button-group style="padding:0 0 8px 8px" v-if="!disabled" >
|
||||
<el-button size="mini" @click="handlePostClick(false)" >{{$t('岗位')}}</el-button>
|
||||
<el-button size="mini" @click="handleRoleClick(false)" >{{$t('角色')}}</el-button>
|
||||
<el-button size="mini" @click="handleUserClick(false)" >{{$t('用户')}}</el-button>
|
||||
<el-button size="mini" @click="handleLevelClick(false)">{{$t('上下级')}}</el-button>
|
||||
<el-button size="mini" @click="handleNodeAuditorClick(false)">{{$t('节点执行人')}}</el-button>
|
||||
<el-button size="mini" @click="handleAuditorSqlClick(false)" >{{$t('表字段')}}</el-button>
|
||||
</el-button-group>
|
||||
<l-table height="notset" :isShowNum="false" :columns="userColumns" :dataSource="node.auditUsers" >
|
||||
<template v-slot:type="scope" >
|
||||
{{typeFormat(scope.row.type)}}
|
||||
</template>
|
||||
<template v-slot:condition="scope" >
|
||||
<l-select :disabled="disabled" size="mini" v-if="scope.row.type == '2'" :options="conditionOptions" v-model="scope.row.condition" ></l-select>
|
||||
</template>
|
||||
<l-table-btns v-if="!disabled" :isFixed="false" :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
|
||||
</l-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('传阅人员设置')" name="3">
|
||||
<el-button-group style="padding:0 0 8px 8px" v-if="!disabled" >
|
||||
<el-button size="mini" @click="handlePostClick(true)" >{{$t('岗位')}}</el-button>
|
||||
<el-button size="mini" @click="handleRoleClick(true)">{{$t('角色')}}</el-button>
|
||||
<el-button size="mini" @click="handleUserClick(true)">{{$t('用户')}}</el-button>
|
||||
<el-button size="mini" @click="handleLevelClick(true)">{{$t('上下级')}}</el-button>
|
||||
<el-button size="mini" @click="handleNodeAuditorClick(true)">{{$t('节点执行人')}}</el-button>
|
||||
<el-button size="mini" @click="handleAuditorSqlClick(true)">{{$t('表字段')}}</el-button>
|
||||
</el-button-group>
|
||||
<l-table height="notset" :isShowNum="false" :columns="userColumns" :dataSource="node.lookUsers" >
|
||||
<template v-slot:type="scope" >
|
||||
{{typeFormat(scope.row.type)}}
|
||||
</template>
|
||||
<template v-slot:condition="scope" >
|
||||
<l-select :disabled="disabled" size="mini" v-if="scope.row.type == '2'" :options="conditionOptions" v-model="scope.row.condition" ></l-select>
|
||||
</template>
|
||||
<l-table-btns v-if="!disabled" :isFixed="false" :btns="tableBtns" @click="handleTableBtnClick2" ></l-table-btns>
|
||||
</l-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-if="!node.isInherit" :title="$t('表单设置')" name="4">
|
||||
<div style="padding:0 16px;">
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group :disabled="disabled" v-model="node.formType" size="mini" @change="handleFormTypeChange">
|
||||
<el-radio-button label="1">自定义表单</el-radio-button>
|
||||
<el-radio-button label="2">系统表单</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-show="node.formType === '1'" >
|
||||
<el-form-item label-width="0px">
|
||||
<l-custmerform-select
|
||||
v-model="node.formCode"
|
||||
@change="custmerformChange"
|
||||
|
||||
:disabled="disabled"
|
||||
>
|
||||
</l-custmerform-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<l-select
|
||||
v-model="node.formVerison"
|
||||
:disabled="disabled"
|
||||
:options="formVerisons"
|
||||
@change="custmerformVerisonChange"
|
||||
|
||||
placeholder="请选择表单版本"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<l-select
|
||||
v-model="node.formRelationId"
|
||||
:disabled="disabled"
|
||||
:options="node.formRelations"
|
||||
|
||||
placeholder="请选择流程关联字段"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
<div v-show="node.formType === '2'" >
|
||||
<el-form-item label-width="0px">
|
||||
<el-input
|
||||
v-model="node.formUrl"
|
||||
placeholder="请输入PC端表单地址"
|
||||
|
||||
:readonly="disabled"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<el-input
|
||||
v-model="node.formAppUrl"
|
||||
placeholder="请输入APP端表单地址"
|
||||
|
||||
:readonly="disabled"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider>表单字段权限</el-divider>
|
||||
<template v-if="node.formType === '1'">
|
||||
<l-table height="notset" :isShowNum="false" :columns="columns" :dataSource="node.authFields" ref="authField" >
|
||||
<template v-slot:required="scope" >
|
||||
<el-switch
|
||||
v-model="scope.row.required"
|
||||
:disabled="disabled || scope.row.type == 'grid'"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-slot:isEdit="scope" >
|
||||
<el-switch
|
||||
v-model="scope.row.isEdit"
|
||||
:disabled="disabled || scope.row.type == 'gridrequired'"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-slot:isLook="scope" >
|
||||
<el-switch
|
||||
v-model="scope.row.isLook"
|
||||
:disabled="disabled || scope.row.type == 'grid' || scope.row.type == 'gridrequired'"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</l-table>
|
||||
</template>
|
||||
<template v-else>
|
||||
<l-edit-table
|
||||
addBtnText="添加字段"
|
||||
:dataSource="node.authFields"
|
||||
|
||||
:isShowNum="false"
|
||||
|
||||
:isAddBtn="!disabled"
|
||||
:isRemoveBtn="!disabled"
|
||||
|
||||
@addRow="handleAddAuthField"
|
||||
@deleteRow="handleDeleteAuthField"
|
||||
>
|
||||
<el-table-column
|
||||
prop="label"
|
||||
label="名称"
|
||||
minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" size="mini" v-model="scope.row.label" placeholder="请输入名称" ></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="field"
|
||||
label="字段"
|
||||
minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" size="mini" v-model="scope.row.field" placeholder="请输入字段"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="required"
|
||||
label="必填"
|
||||
width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.required"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isEdit"
|
||||
label="编辑"
|
||||
width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isEdit"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isLook"
|
||||
label="查看"
|
||||
width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isLook"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table >
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('按钮设置')" name="5">
|
||||
<l-edit-table
|
||||
addBtnText="添加按钮"
|
||||
:dataSource="node.btnlist"
|
||||
:isShowNum="false"
|
||||
:hasDeleteBtn="hasBtnsDeleteBtn"
|
||||
|
||||
:isAddBtn="!disabled"
|
||||
:isRemoveBtn="!disabled"
|
||||
|
||||
@addRow="handleAddBtns"
|
||||
@deleteRow="handleDeleteBtns"
|
||||
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="名称"
|
||||
minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" v-if="!scope.row.isSys" size="mini" v-model="scope.row.name" placeholder="请输入名称" ></el-input>
|
||||
<span v-else >{{scope.row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
label="编码"
|
||||
minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" v-if="!scope.row.isSys" size="mini" v-model="scope.row.code" placeholder="请输入编码"></el-input>
|
||||
<span v-else >{{scope.row.code}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="hidden"
|
||||
label="隐藏"
|
||||
width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.hidden"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="isSign"
|
||||
label="签章"
|
||||
width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isSign"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="isNextAuditor"
|
||||
label="下一审核人"
|
||||
width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-if="scope.row.code != 'disagree'"
|
||||
v-model="scope.row.isNextAuditor"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table >
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('会签设置')" name="6">
|
||||
<div style="padding:0 16px" >
|
||||
<el-form-item label="是否会签">
|
||||
<el-switch v-model="node.isCountersign" :disabled="disabled">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<template v-if="node.isCountersign">
|
||||
<el-form-item label="审核方式">
|
||||
<l-radio :disabled="disabled" v-model="node.countersignType" :options="[{value:'1',label:'并行'},{value:'2',label:'串行'}]" >
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="node.countersignType == '1'" label="是否等待"><!--并行才有这个设置-->
|
||||
<el-switch v-model="node.isCountersignAll" :disabled="disabled">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="node.countersignType == '1'" label="通过百分比">
|
||||
<el-input-number :disabled="disabled" :min="1" :max="100" v-model="node.countersignAllType">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="再次审核">
|
||||
<l-radio :disabled="disabled" v-model="node.countersignAgian" :options="[{value:'1',label:'已同意不需要审核'},{value:'2',label:'已同意需要审核'}]" >
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('超时设置')" name="7">
|
||||
<div style="padding:0 16px" >
|
||||
<el-form-item label="超时通知">
|
||||
<el-switch :disabled="disabled" v-model="node.isOvertimeMessage">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<template v-if="node.isOvertimeMessage" >
|
||||
|
||||
<el-form-item label="第一次通知(时)">
|
||||
<el-input-number :disabled="disabled" :min="1" v-model="node.overtimeMessageStart">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="通知间隔(时)">
|
||||
<el-input-number :disabled="disabled" :min="1" v-model="node.overtimeMessageInterval">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="超时流转时间(时)">
|
||||
<el-input-number :disabled="disabled" :min="1" v-model="node.overtimeGo">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="超时通知策略">
|
||||
<l-checkbox :disabled="disabled" v-model="node.overtimeMessageType" :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" >
|
||||
</l-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
|
||||
<l-dialog
|
||||
:title="$t('添加岗位')"
|
||||
:visible.sync="selectPostVisible"
|
||||
:height="480"
|
||||
width="1024px"
|
||||
|
||||
@ok="handlePostSelectOk"
|
||||
@closed="handlePostSelectClosed"
|
||||
>
|
||||
<l-post-select-panel ref="postSelectPanel" ></l-post-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
<l-dialog
|
||||
:title="$t('添加角色')"
|
||||
:visible.sync="selectRoleVisible"
|
||||
:height="480"
|
||||
width="800px"
|
||||
|
||||
@ok="handleRoleSelectOk"
|
||||
@closed="handleRoleSelectClosed"
|
||||
>
|
||||
<l-role-select-panel ref="roleSelectPanel" ></l-role-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
|
||||
<l-dialog
|
||||
:title="$t('添加用户')"
|
||||
:visible.sync="selectUserVisible"
|
||||
:height="480"
|
||||
width="1024px"
|
||||
|
||||
@ok="handleUserSelectOk"
|
||||
@closed="handleUserSelectClosed"
|
||||
>
|
||||
<l-user-select-panel ref="userSelectPanel" ></l-user-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
<!--上下级选择-->
|
||||
<l-dialog
|
||||
:title="$t('上下级选择')"
|
||||
:visible.sync="levelVisible"
|
||||
:height="200"
|
||||
width="500px"
|
||||
|
||||
@ok="handleLevelOk"
|
||||
@closed="handleLevelClosed"
|
||||
>
|
||||
<auditor-level-form ref="auditorLevelForm" ></auditor-level-form>
|
||||
</l-dialog>
|
||||
|
||||
<!--流程节点选择-->
|
||||
<l-dialog
|
||||
:title="$t('流程节点选择')"
|
||||
:visible.sync="nodeAuditorVisible"
|
||||
:height="200"
|
||||
width="500px"
|
||||
|
||||
@ok="handleNodeAuditorOk"
|
||||
@closed="handleNodeAuditorClosed"
|
||||
@opened="handleNodeAuditorOpened"
|
||||
>
|
||||
<node-auditor-form ref="nodeAuditorForm" ></node-auditor-form>
|
||||
</l-dialog>
|
||||
|
||||
<!--流程节点选择-->
|
||||
<l-dialog
|
||||
:title="$t('数据表字段选择')"
|
||||
:visible.sync="auditorSqlVisible"
|
||||
width="500px"
|
||||
:height="300"
|
||||
|
||||
@ok="handleAuditorSqlOk"
|
||||
@closed="handleAuditorSqlClosed"
|
||||
>
|
||||
<auditor-sql-form ref="auditorSqlForm" ></auditor-sql-form>
|
||||
</l-dialog>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// const apiForm = window.$api.custmerForm.scheme
|
||||
|
||||
import auditorLevelForm from './auditorLevel.vue'
|
||||
import nodeAuditorForm from './auditorNode.vue'
|
||||
import auditorSqlForm from './auditorSql.vue'
|
||||
|
||||
export default {
|
||||
name:'user-task-option',
|
||||
props:{
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
components:{
|
||||
auditorLevelForm,
|
||||
nodeAuditorForm,
|
||||
auditorSqlForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
columns:[
|
||||
{label:'名称',prop:'label',minWidth:'100'},
|
||||
{label:'字段',prop:'field',minWidth:'100'},
|
||||
{label:'必填',prop:'required',width:'64',align:'center'},
|
||||
{label:'编辑',prop:'isEdit',width:'64',align:'center'},
|
||||
{label:'查看',prop:'isLook',width:'64',align:'center'},
|
||||
],
|
||||
tableBtns:[
|
||||
{prop:'Delete',label:'删除'}
|
||||
],
|
||||
atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
|
||||
noAuditorOptions: [{ value: '1', label: '超级管理员处理' }, { value: '2', label: '跳过此步骤' }, { value: '3', label: '不能提交' }],
|
||||
userColumns:[
|
||||
{label:'类型',prop:'type',width:'64'},
|
||||
{label:'名称',prop:'name',minWidth:'100'},
|
||||
{label:'附加条件',prop:'condition',minWidth:'100'}
|
||||
],
|
||||
|
||||
conditionOptions:[{ value: '1', label: '同一个部门' }, { value: '2', label: '同一个公司' }, { value: '3', label: '发起人上级' }, { value: '4', label: '发起人下级' }],
|
||||
|
||||
selectPostVisible:false,
|
||||
selectRoleVisible:false,
|
||||
selectUserVisible:false,
|
||||
levelVisible:false,
|
||||
nodeAuditorVisible:false,
|
||||
auditorSqlVisible:false,
|
||||
|
||||
isLooker:false,
|
||||
|
||||
}
|
||||
},
|
||||
asyncComputed:{
|
||||
formVerisons:{
|
||||
async get(){
|
||||
let res = []
|
||||
if(!this.$validatenull(this.node.formCode) && this.node.formType =='1'){
|
||||
// res = await this.$awaitWraper(apiForm.getHistoryList(this.node.formCode))
|
||||
}
|
||||
return (res || []).map(t=>{return { label:this.lr_dateFormat(t.f_CreateDate),value:t.f_Id }})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
node(){
|
||||
return this.wfdesign.currentWfNode;
|
||||
}
|
||||
},
|
||||
inject: ["wfdesign"],
|
||||
methods:{
|
||||
async custmerformChange(val){
|
||||
this.$set(this.node,'formRelationId','')
|
||||
if(val == null){
|
||||
this.node.authFields = [];
|
||||
this.node.formVerison = ''
|
||||
return;
|
||||
}
|
||||
if(this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])){
|
||||
// const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
|
||||
const {f_SchemeInfoId,f_Scheme,f_Id} = {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = {f_Scheme}
|
||||
if(this.node.formCode == f_SchemeInfoId){
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
|
||||
}
|
||||
this.node.formVerison = val.f_SchemeId
|
||||
},
|
||||
async custmerformVerisonChange(val){
|
||||
this.$set(this.node,'formRelationId','')
|
||||
if(this.$validatenull(val)){
|
||||
this.node.authFields = []
|
||||
return
|
||||
}
|
||||
if(this.$validatenull(this.wfdesign.custmerformSchemes[val.value])){
|
||||
// const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
|
||||
const {f_Scheme,f_Id} = {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = {f_Scheme}
|
||||
if(this.node.formVerison == f_Id){
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
|
||||
}
|
||||
},
|
||||
loadFormScheme(strScheme){
|
||||
const scheme = JSON.parse(strScheme)
|
||||
const fields = []
|
||||
const rfields = []
|
||||
scheme.formInfo.tabList.forEach(tab => {
|
||||
tab.components.forEach(component =>{
|
||||
if(['guid'].includes(component.type)){
|
||||
rfields.push({label:component.label,value:component.prop})
|
||||
}
|
||||
|
||||
if(!['gridtable','divider'].includes(component.type) && component.display){
|
||||
fields.push({
|
||||
prop:component.prop,
|
||||
field:component.field,
|
||||
label:component.label,
|
||||
table:component.table,
|
||||
required:component.required,
|
||||
isEdit:true,
|
||||
isLook:true
|
||||
})
|
||||
}
|
||||
else if(['gridtable'].includes(component.type)){
|
||||
fields.push({
|
||||
prop:`${component.prop}_add`,
|
||||
label:`${component.label || '表格'}-添加按钮`,
|
||||
required:false,
|
||||
isEdit:true,
|
||||
isLook:false,
|
||||
type:'grid'
|
||||
})
|
||||
fields.push({
|
||||
prop:`${component.prop}_remove`,
|
||||
label:`${component.label || '表格'}-删除按钮`,
|
||||
required:false,
|
||||
isEdit:true,
|
||||
isLook:false,
|
||||
type:'grid'
|
||||
})
|
||||
|
||||
fields.push({
|
||||
prop:`${component.prop}_required`,
|
||||
label:`${component.label || '表格'}-数据`,
|
||||
required:component.required,
|
||||
isEdit:false,
|
||||
isLook:false,
|
||||
type:'gridrequired'
|
||||
})
|
||||
fields.push(...component.children.filter(t=>t.display).map(t=>{
|
||||
return {
|
||||
gridprop:component.prop,
|
||||
prop:t.prop,
|
||||
field:t.field,
|
||||
label:`${component.label || '表格'}-${t.label}`,
|
||||
table:component.table,
|
||||
required:t.required,
|
||||
isEdit:true,
|
||||
isLook:true
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
this.node.formRelations = rfields
|
||||
this.node.authFields = fields
|
||||
|
||||
},
|
||||
handleFormTypeChange(){
|
||||
this.node.formCode = ''
|
||||
this.node.formUrl = ''
|
||||
this.node.formAppUrl = ''
|
||||
this.node.authFields = []
|
||||
this.node.formRelations = []
|
||||
|
||||
this.$set(this.node,'formRelationId','')
|
||||
|
||||
},
|
||||
handleAddAuthField(){
|
||||
this.node.authFields.push({
|
||||
field:'',
|
||||
label:'',
|
||||
required:true,
|
||||
isEdit:true,
|
||||
isLook:true
|
||||
})
|
||||
},
|
||||
handleDeleteAuthField(row){
|
||||
this.node.authFields.splice(row.index,1);
|
||||
},
|
||||
|
||||
handleTableBtnClick(btn){
|
||||
this.node.auditUsers.splice(btn.rowIndex,1);
|
||||
},
|
||||
handleTableBtnClick2(btn){
|
||||
this.node.lookUsers.splice(btn.rowIndex,1);
|
||||
},
|
||||
|
||||
typeFormat(type){
|
||||
switch(type){
|
||||
case '1':
|
||||
return '岗位'
|
||||
case '2':
|
||||
return '角色'
|
||||
case '3':
|
||||
return '用户'
|
||||
case '4':
|
||||
return '上下级'
|
||||
case '5':
|
||||
return '节点'
|
||||
case '6':
|
||||
return '表字段'
|
||||
}
|
||||
},
|
||||
addTableData(selectData){
|
||||
if(this.isLooker){
|
||||
let addData2 = selectData.filter(t=>this.node.lookUsers.findIndex(t2=>t2.id == t.id && t2.type == t.type) == -1 );
|
||||
this.node.lookUsers = this.node.lookUsers.concat(addData2);
|
||||
}
|
||||
else{
|
||||
let addData = selectData.filter(t=>this.node.auditUsers.findIndex(t2=>t2.id == t.id && t2.type == t.type) == -1 );
|
||||
this.node.auditUsers = this.node.auditUsers.concat(addData);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
handlePostClick(isLooker){
|
||||
this.selectPostVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handlePostSelectClosed(){
|
||||
this.$refs.postSelectPanel.resetForm();
|
||||
},
|
||||
handlePostSelectOk(){
|
||||
let selectData = this.$refs.postSelectPanel.getForm().map(t=>{return {type:'1',id:t.f_PostId,name:t.name}});
|
||||
this.addTableData(selectData);
|
||||
this.selectPostVisible = false;
|
||||
},
|
||||
|
||||
handleRoleClick(isLooker){
|
||||
this.selectRoleVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleRoleSelectClosed(){
|
||||
this.$refs.roleSelectPanel.resetForm();
|
||||
},
|
||||
handleRoleSelectOk(){
|
||||
let selectData = this.$refs.roleSelectPanel.getForm().map(t=>{return {type:'2',id:t.f_RoleId,name:t.f_FullName,condition:''} });
|
||||
this.addTableData(selectData);
|
||||
this.selectRoleVisible = false;
|
||||
},
|
||||
|
||||
handleUserClick(isLooker){
|
||||
this.selectUserVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleUserSelectClosed(){
|
||||
this.$refs.userSelectPanel.resetForm();
|
||||
},
|
||||
handleUserSelectOk(){
|
||||
let selectData = this.$refs.userSelectPanel.getForm().map(t=>{return {type:'3',id:t.f_UserId,name:t.name} });
|
||||
this.addTableData(selectData);
|
||||
this.selectUserVisible = false;
|
||||
},
|
||||
|
||||
|
||||
handleLevelClick(isLooker){
|
||||
this.levelVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleLevelClosed(){
|
||||
this.$refs.auditorLevelForm.resetForm();
|
||||
},
|
||||
handleLevelOk(){
|
||||
this.$refs.auditorLevelForm.validateForm(()=>{
|
||||
let data = this.$refs.auditorLevelForm.getForm();
|
||||
this.addTableData([data]);
|
||||
this.levelVisible = false;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
handleNodeAuditorClick(isLooker){
|
||||
this.nodeAuditorVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleNodeAuditorOk(){
|
||||
this.$refs.nodeAuditorForm.validateForm(()=>{
|
||||
let data = this.$refs.nodeAuditorForm.getForm();
|
||||
this.addTableData([data]);
|
||||
this.nodeAuditorVisible = false;
|
||||
});
|
||||
},
|
||||
handleNodeAuditorClosed(){
|
||||
this.$refs.nodeAuditorForm.resetForm();
|
||||
},
|
||||
handleNodeAuditorOpened(){
|
||||
let wfdata = this.wfdesign.handleGetWFData();
|
||||
this.$refs.nodeAuditorForm.setForm(wfdata.filter(t=>t.type = 'userTask' && t.id != this.node.id ));
|
||||
},
|
||||
|
||||
|
||||
handleAuditorSqlClick(isLooker){
|
||||
this.auditorSqlVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleAuditorSqlOk(){
|
||||
this.$refs.auditorSqlForm.validateForm(()=>{
|
||||
let data = this.$refs.auditorSqlForm.getForm();
|
||||
data.name = `${data.table}【${data.auditorField}】`
|
||||
this.addTableData([data]);
|
||||
this.auditorSqlVisible = false;
|
||||
});
|
||||
},
|
||||
handleAuditorSqlClosed(){
|
||||
this.$refs.auditorSqlForm.resetForm();
|
||||
},
|
||||
|
||||
hasBtnsDeleteBtn(row){
|
||||
if(row.isSys){
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
return true;
|
||||
}
|
||||
},
|
||||
handleAddBtns(){
|
||||
this.node.btnlist.push({code:'',name:'',hidden:false,isNextAuditor:false,isSign:false})
|
||||
},
|
||||
handleDeleteBtns(row){
|
||||
this.node.btnlist.splice(row.index,1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div class="shceme-info">
|
||||
<a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="模板编号" name="f_Code">
|
||||
<a-input v-model:value="formState.f_Code" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item label="模板名称" name="f_Name">
|
||||
<a-input v-model:value="formState.f_Name" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item label="模板图标" name="f_Icon">
|
||||
<IconPicker :value="formState.f_Icon" />
|
||||
</a-form-item>
|
||||
<a-form-item label="图标颜色" name="f_Color">
|
||||
<a-input type="color" v-model="formState.f_Color" placeholder="请输入"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="模板分类" name="f_Category">
|
||||
<a-select v-model:value="formState.f_Category" placeholder="please select your zone">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="我的任务创建">
|
||||
<a-radio-group v-model:value="formState.f_Mark" name="radioGroup">
|
||||
<a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="移动端创建">
|
||||
<a-radio-group v-model:value="formState.f_IsInApp" name="radioGroup">
|
||||
<a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-textarea v-model:value="formState.f_Description" placeholder="请填写备注"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
|
||||
|
||||
<a-divider plain="true">撤销操作</a-divider>
|
||||
<a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
|
||||
<a-tab-pane key="1" tab="执行SQL">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.undoDbSQL"
|
||||
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab=".NET方法">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.undoIOCName" placeholder="请填写.NET方法IOC别名"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="第三方接口">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.undoUrl"
|
||||
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-divider plain="true">作废操作</a-divider>
|
||||
<a-tabs v-model:activeKey="formState.deleteType" type="card" size="small" centered="true">
|
||||
<a-tab-pane key="1" tab="执行SQL">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.deleteDbSQL"
|
||||
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab=".NET方法">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.deleteIOCName" placeholder="请填写.NET方法IOC别名"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="第三方接口">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.undoUrl"
|
||||
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-divider plain="true">删除草稿</a-divider>
|
||||
<a-tabs v-model:activeKey="formState.deleteDraftType" type="card" size="small" centered="true">
|
||||
<a-tab-pane key="1" tab="执行SQL">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.deleteDraftDbSQL"
|
||||
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab=".NET方法">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="第三方接口">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-textarea v-model:value="formState.undoUrl"
|
||||
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
|
||||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { reactive, ref, toRaw } from 'vue';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { IconPicker } from '/@/components/Icon';
|
||||
const formRef = ref();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const activeKey = ref('1')
|
||||
const data = reactive({
|
||||
optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
|
||||
|
||||
})
|
||||
const formState = reactive({
|
||||
f_Code: '',
|
||||
f_Name: '',
|
||||
f_Category: '',
|
||||
f_Mark: 1,
|
||||
f_IsInApp: 2,
|
||||
f_Description: '',
|
||||
|
||||
titleRules: '',
|
||||
|
||||
undoType: "1",
|
||||
undoDbCode: '',
|
||||
undoDbSQL: '',
|
||||
undoIOCName: '',
|
||||
undoUrl: '',
|
||||
|
||||
deleteType: "1",
|
||||
deleteDbCode: '',
|
||||
deleteDbSQL: '',
|
||||
deleteIOCName: '',
|
||||
deleteUrl: '',
|
||||
|
||||
deleteDraftType: "1",
|
||||
deleteDraftDbCode: '',
|
||||
deleteDraftDbSQL: '',
|
||||
deleteDraftIOCName: '',
|
||||
deleteDraftUrl: '',
|
||||
f_Icon: '',
|
||||
f_Color: '#409EFF',
|
||||
});
|
||||
const rules: Record<string, Rule[]> = {
|
||||
f_Code: [
|
||||
{ required: true, message: '请输入模板编号' },
|
||||
// { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
|
||||
],
|
||||
f_Name: [
|
||||
{ required: true, message: '请输入模板名称' }
|
||||
],
|
||||
f_Category: [
|
||||
{ required: true, message: '请选择模板分类' }
|
||||
],
|
||||
f_Icon: [
|
||||
{ required: true, message: '请选择图标' }
|
||||
],
|
||||
f_Color: [
|
||||
{ required: true, message: '请选择颜色' }
|
||||
],
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.site-space-compact-wrapper {
|
||||
width: 100%;
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-tabs {
|
||||
padding: 0!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="start-event">
|
||||
|
||||
<a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-form-item label="下一审核人">
|
||||
<a-switch v-model:checked="node.isNextAuditor" />
|
||||
</a-form-item>
|
||||
<a-form-item label="自定义标题">
|
||||
<a-switch v-model:checked="node.isCustmerTitle" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通知策略" name="f_Color">
|
||||
<a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider plain="true">表单添加</a-divider>
|
||||
<a-tabs v-model:activeKey="node.formType" type="card" size="small" centered="true">
|
||||
<a-tab-pane key="1" tab="自定义表单">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="node.formVerison" placeholder="请选择表单版本">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="系统表单">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-divider plain="true">表单字段权限</a-divider>
|
||||
<a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false"
|
||||
v-if="node.formType == 1">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['label', 'field'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-switch v-model:checked="record[column.dataIndex]" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false" v-else>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['label', 'field'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-switch v-model:checked="record[column.dataIndex]" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<delete-outlined two-tone-color='#eb2f96' @click='handleDeleteAuthField(record.field)' />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<a-divider plain="true"></a-divider>
|
||||
<a-space v-if="node.formType!=1">
|
||||
<a-button @click="handleAddAuthField" width="100%" type="dashed" danger :icon="h(PlusOutlined)">添加字段</a-button>
|
||||
</a-space>
|
||||
<!-- <a-table :columns="data.columns" :data-source="node.authField" bordered :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-input
|
||||
v-model:value="text"
|
||||
style="margin: -5px 0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<a>删除</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table> -->
|
||||
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
element: Object
|
||||
})
|
||||
const data = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'label',
|
||||
},
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'field',
|
||||
},
|
||||
{
|
||||
title: '必填',
|
||||
dataIndex: 'required',
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
dataIndex: 'isEdit',
|
||||
},
|
||||
{
|
||||
title: '查看',
|
||||
dataIndex: 'isLook',
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
formRelations: [],
|
||||
elementData: props.element
|
||||
})
|
||||
const node = reactive({
|
||||
id: data.elementData.id,
|
||||
type: data.elementData.type,
|
||||
isNextAuditor: false,
|
||||
isCustmerTitle: false,
|
||||
formRelations: [],
|
||||
formType: "1",
|
||||
formCode: "",
|
||||
formVerison: "",
|
||||
formRelationId: "",
|
||||
formUrl: "",
|
||||
formAppUrl: "",
|
||||
authFields: [
|
||||
{
|
||||
label: '测试',
|
||||
field: 'ceshi',
|
||||
required: true,
|
||||
isEdit: true,
|
||||
isLook: true,
|
||||
}
|
||||
],
|
||||
messageType: "",
|
||||
isInit: true
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
data.elementData = newVal
|
||||
node.id = data.elementData.id
|
||||
node.type = data.elementData.type
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => node.formType,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal == 1) {
|
||||
data.columns = data.columns.filter(item => item.dataIndex !== 'operation');
|
||||
} else {
|
||||
data.columns.push({
|
||||
title: '',
|
||||
dataIndex: 'operation',
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
async function custmerformChange(val) {
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
if (val == null) {
|
||||
this.node.authFields = [];
|
||||
this.node.formVerison = ''
|
||||
return;
|
||||
}
|
||||
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
|
||||
// const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
|
||||
if (this.node.formCode == f_SchemeInfoId) {
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
|
||||
}
|
||||
this.node.formVerison = val.f_SchemeId
|
||||
}
|
||||
async function custmerformVerisonChange(val) {
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
if (this.$validatenull(val)) {
|
||||
this.node.authFields = []
|
||||
return
|
||||
}
|
||||
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
|
||||
// const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
|
||||
if (this.node.formVerison == f_Id) {
|
||||
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
|
||||
}
|
||||
}
|
||||
function loadFormScheme(strScheme) {
|
||||
const scheme = JSON.parse(strScheme)
|
||||
const fields = []
|
||||
const rfields = []
|
||||
scheme.formInfo.tabList.forEach(tab => {
|
||||
tab.components.forEach(component => {
|
||||
if (['guid'].includes(component.type)) {
|
||||
rfields.push({ label: component.label, value: component.prop })
|
||||
}
|
||||
|
||||
if (!['gridtable', 'divider'].includes(component.type) && component.display) {
|
||||
fields.push({
|
||||
prop: component.prop,
|
||||
field: component.field,
|
||||
label: component.label,
|
||||
table: component.table,
|
||||
required: component.required,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
})
|
||||
}
|
||||
else if (['gridtable'].includes(component.type)) {
|
||||
fields.push({
|
||||
prop: `${component.prop}_add`,
|
||||
label: `${component.label || '表格'}-添加按钮`,
|
||||
required: false,
|
||||
isEdit: true,
|
||||
isLook: false,
|
||||
type: 'grid'
|
||||
})
|
||||
fields.push({
|
||||
prop: `${component.prop}_remove`,
|
||||
label: `${component.label || '表格'}-删除按钮`,
|
||||
required: false,
|
||||
isEdit: true,
|
||||
isLook: false,
|
||||
type: 'grid'
|
||||
})
|
||||
|
||||
fields.push({
|
||||
prop: `${component.prop}_required`,
|
||||
label: `${component.label || '表格'}-数据`,
|
||||
required: component.required,
|
||||
isEdit: false,
|
||||
isLook: false,
|
||||
type: 'gridrequired'
|
||||
})
|
||||
fields.push(...component.children.filter(t => t.display).map(t => {
|
||||
return {
|
||||
gridprop: component.prop,
|
||||
prop: t.prop,
|
||||
field: t.field,
|
||||
label: `${component.label || '表格'}-${t.label}`,
|
||||
table: component.table,
|
||||
required: t.required,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
this.node.formRelations = rfields
|
||||
this.node.authFields = fields
|
||||
|
||||
}
|
||||
function handleFormTypeChange() {
|
||||
this.node.formCode = ''
|
||||
this.node.formUrl = ''
|
||||
this.node.formAppUrl = ''
|
||||
this.node.authFields = []
|
||||
this.node.formRelations = []
|
||||
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
|
||||
}
|
||||
function handleAddAuthField() {
|
||||
node.authFields.push({
|
||||
field: '',
|
||||
label: '',
|
||||
required: true,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
})
|
||||
}
|
||||
function handleDeleteAuthField(key) {
|
||||
node.authFields = node.authFields.filter(item => item.field !== key);
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.site-space-compact-wrapper {
|
||||
width: 100%;
|
||||
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-tabs {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .ant-space {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
|
||||
.ant-space-item {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,673 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<el-form label-width="96px" label-position="left" size="mini">
|
||||
<el-collapse v-model="activeNames" accordion>
|
||||
<el-collapse-item :title="$t('基础配置')" name="1">
|
||||
<div style="padding:0 16px;">
|
||||
<el-form-item label="节点标识">
|
||||
<el-input v-model="node.id" readonly></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="继承表单">
|
||||
<el-switch :disabled="disabled" v-model="node.isInherit">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许加签">
|
||||
<el-switch :disabled="disabled" v-model="node.isAddSign">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许转移">
|
||||
<el-switch :disabled="disabled" v-model="node.isTransfer">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许批量审核">
|
||||
<el-switch :disabled="disabled" v-model="node.isBatchAudit">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动同意规则">
|
||||
<l-select multiple :disabled="disabled" v-model="node.autoAgree" :options="atuoAgreeOptions">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="无对应处理人">
|
||||
<l-select :disabled="disabled" v-model="node.noAuditor" :options="noAuditorOptions">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="驳回策略">
|
||||
<l-radio :disabled="disabled" v-model="node.rejectType"
|
||||
:options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]">
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="通知策略">
|
||||
<l-checkbox :disabled="disabled" v-model="node.messageType"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]">
|
||||
</l-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('审核人员设置')" name="2">
|
||||
<el-button-group style="padding:0 0 8px 8px" v-if="!disabled">
|
||||
<el-button size="mini" @click="handlePostClick(false)">{{$t('岗位')}}</el-button>
|
||||
<el-button size="mini" @click="handleRoleClick(false)">{{$t('角色')}}</el-button>
|
||||
<el-button size="mini" @click="handleUserClick(false)">{{$t('用户')}}</el-button>
|
||||
<el-button size="mini" @click="handleLevelClick(false)">{{$t('上下级')}}</el-button>
|
||||
<el-button size="mini" @click="handleNodeAuditorClick(false)">{{$t('节点执行人')}}</el-button>
|
||||
<el-button size="mini" @click="handleAuditorSqlClick(false)">{{$t('表字段')}}</el-button>
|
||||
</el-button-group>
|
||||
<l-table height="notset" :isShowNum="false" :columns="userColumns" :dataSource="node.auditUsers">
|
||||
<template v-slot:type="scope">
|
||||
{{typeFormat(scope.row.type)}}
|
||||
</template>
|
||||
<template v-slot:condition="scope">
|
||||
<l-select :disabled="disabled" size="mini" v-if="scope.row.type == '2'"
|
||||
:options="conditionOptions" v-model="scope.row.condition"></l-select>
|
||||
</template>
|
||||
<l-table-btns v-if="!disabled" :isFixed="false" :btns="tableBtns" @click="handleTableBtnClick">
|
||||
</l-table-btns>
|
||||
</l-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('传阅人员设置')" name="3">
|
||||
<el-button-group style="padding:0 0 8px 8px" v-if="!disabled">
|
||||
<el-button size="mini" @click="handlePostClick(true)">{{$t('岗位')}}</el-button>
|
||||
<el-button size="mini" @click="handleRoleClick(true)">{{$t('角色')}}</el-button>
|
||||
<el-button size="mini" @click="handleUserClick(true)">{{$t('用户')}}</el-button>
|
||||
<el-button size="mini" @click="handleLevelClick(true)">{{$t('上下级')}}</el-button>
|
||||
<el-button size="mini" @click="handleNodeAuditorClick(true)">{{$t('节点执行人')}}</el-button>
|
||||
<el-button size="mini" @click="handleAuditorSqlClick(true)">{{$t('表字段')}}</el-button>
|
||||
</el-button-group>
|
||||
<l-table height="notset" :isShowNum="false" :columns="userColumns" :dataSource="node.lookUsers">
|
||||
<template v-slot:type="scope">
|
||||
{{typeFormat(scope.row.type)}}
|
||||
</template>
|
||||
<template v-slot:condition="scope">
|
||||
<l-select :disabled="disabled" size="mini" v-if="scope.row.type == '2'"
|
||||
:options="conditionOptions" v-model="scope.row.condition"></l-select>
|
||||
</template>
|
||||
<l-table-btns v-if="!disabled" :isFixed="false" :btns="tableBtns" @click="handleTableBtnClick2">
|
||||
</l-table-btns>
|
||||
</l-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-if="!node.isInherit" :title="$t('表单设置')" name="4">
|
||||
<div style="padding:0 16px;">
|
||||
<div style="text-align: center;margin-bottom:16px;">
|
||||
<el-radio-group :disabled="disabled" v-model="node.formType" size="mini"
|
||||
@change="handleFormTypeChange">
|
||||
<el-radio-button label="1">自定义表单</el-radio-button>
|
||||
<el-radio-button label="2">系统表单</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-show="node.formType === '1'">
|
||||
<el-form-item label-width="0px">
|
||||
<l-custmerform-select v-model="node.formCode" @change="custmerformChange"
|
||||
:disabled="disabled">
|
||||
</l-custmerform-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<l-select v-model="node.formVerison" :disabled="disabled" :options="formVerisons"
|
||||
@change="custmerformVerisonChange" placeholder="请选择表单版本">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<l-select v-model="node.formRelationId" :disabled="disabled" :options="node.formRelations"
|
||||
placeholder="请选择流程关联字段">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
<div v-show="node.formType === '2'">
|
||||
<el-form-item label-width="0px">
|
||||
<el-input v-model="node.formUrl" placeholder="请输入PC端表单地址" :readonly="disabled">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0px">
|
||||
<el-input v-model="node.formAppUrl" placeholder="请输入APP端表单地址" :readonly="disabled">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider>表单字段权限</el-divider>
|
||||
<template v-if="node.formType === '1'">
|
||||
<l-table height="notset" :isShowNum="false" :columns="columns" :dataSource="node.authFields"
|
||||
ref="authField">
|
||||
<template v-slot:required="scope">
|
||||
<el-switch v-model="scope.row.required"
|
||||
:disabled="disabled || scope.row.type == 'grid'">
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-slot:isEdit="scope">
|
||||
<el-switch v-model="scope.row.isEdit"
|
||||
:disabled="disabled || scope.row.type == 'gridrequired'">
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-slot:isLook="scope">
|
||||
<el-switch v-model="scope.row.isLook"
|
||||
:disabled="disabled || scope.row.type == 'grid' || scope.row.type == 'gridrequired'">
|
||||
</el-switch>
|
||||
</template>
|
||||
</l-table>
|
||||
</template>
|
||||
<template v-else>
|
||||
<l-edit-table addBtnText="添加字段" :dataSource="node.authFields" :isShowNum="false"
|
||||
:isAddBtn="!disabled" :isRemoveBtn="!disabled" @addRow="handleAddAuthField"
|
||||
@deleteRow="handleDeleteAuthField">
|
||||
<el-table-column prop="label" label="名称" minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" size="mini" v-model="scope.row.label"
|
||||
placeholder="请输入名称"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="field" label="字段" minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" size="mini" v-model="scope.row.field"
|
||||
placeholder="请输入字段"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="required" label="必填" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.required" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isEdit" label="编辑" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isEdit" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isLook" label="查看" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isLook" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('按钮设置')" name="5">
|
||||
<l-edit-table addBtnText="添加按钮" :dataSource="node.btnlist" :isShowNum="false"
|
||||
:hasDeleteBtn="hasBtnsDeleteBtn" :isAddBtn="!disabled" :isRemoveBtn="!disabled"
|
||||
@addRow="handleAddBtns" @deleteRow="handleDeleteBtns">
|
||||
<el-table-column prop="name" label="名称" minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" v-if="!scope.row.isSys" size="mini" v-model="scope.row.name"
|
||||
placeholder="请输入名称"></el-input>
|
||||
<span v-else>{{scope.row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="code" label="编码" minWidth="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input :readonly="disabled" v-if="!scope.row.isSys" size="mini" v-model="scope.row.code"
|
||||
placeholder="请输入编码"></el-input>
|
||||
<span v-else>{{scope.row.code}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="hidden" label="隐藏" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.hidden" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="isSign" label="签章" width="64">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isSign" :disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="isNextAuditor" label="下一审核人" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-if="scope.row.code != 'disagree'" v-model="scope.row.isNextAuditor"
|
||||
:disabled="disabled">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('会签设置')" name="6">
|
||||
<div style="padding:0 16px">
|
||||
<el-form-item label="是否会签">
|
||||
<el-switch v-model="node.isCountersign" :disabled="disabled">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<template v-if="node.isCountersign">
|
||||
<el-form-item label="审核方式">
|
||||
<l-radio :disabled="disabled" v-model="node.countersignType"
|
||||
:options="[{value:'1',label:'并行'},{value:'2',label:'串行'}]">
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="node.countersignType == '1'" label="是否等待">
|
||||
<!--并行才有这个设置-->
|
||||
<el-switch v-model="node.isCountersignAll" :disabled="disabled">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="node.countersignType == '1'" label="通过百分比">
|
||||
<el-input-number :disabled="disabled" :min="1" :max="100" v-model="node.countersignAllType">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="再次审核">
|
||||
<l-radio :disabled="disabled" v-model="node.countersignAgian"
|
||||
:options="[{value:'1',label:'已同意不需要审核'},{value:'2',label:'已同意需要审核'}]">
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('超时设置')" name="7">
|
||||
<div style="padding:0 16px">
|
||||
<el-form-item label="超时通知">
|
||||
<el-switch :disabled="disabled" v-model="node.isOvertimeMessage">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<template v-if="node.isOvertimeMessage">
|
||||
|
||||
<el-form-item label="第一次通知(时)">
|
||||
<el-input-number :disabled="disabled" :min="1" v-model="node.overtimeMessageStart">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="通知间隔(时)">
|
||||
<el-input-number :disabled="disabled" :min="1" v-model="node.overtimeMessageInterval">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="超时流转时间(时)">
|
||||
<el-input-number :disabled="disabled" :min="1" v-model="node.overtimeGo">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="超时通知策略">
|
||||
<l-checkbox :disabled="disabled" v-model="node.overtimeMessageType"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]">
|
||||
</l-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
|
||||
<l-dialog :title="$t('添加岗位')" :visible.sync="selectPostVisible" :height="480" width="1024px"
|
||||
@ok="handlePostSelectOk" @closed="handlePostSelectClosed">
|
||||
<l-post-select-panel ref="postSelectPanel"></l-post-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
<l-dialog :title="$t('添加角色')" :visible.sync="selectRoleVisible" :height="480" width="800px"
|
||||
@ok="handleRoleSelectOk" @closed="handleRoleSelectClosed">
|
||||
<l-role-select-panel ref="roleSelectPanel"></l-role-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
|
||||
<l-dialog :title="$t('添加用户')" :visible.sync="selectUserVisible" :height="480" width="1024px"
|
||||
@ok="handleUserSelectOk" @closed="handleUserSelectClosed">
|
||||
<l-user-select-panel ref="userSelectPanel"></l-user-select-panel>
|
||||
</l-dialog>
|
||||
|
||||
<!--上下级选择-->
|
||||
<l-dialog :title="$t('上下级选择')" :visible.sync="levelVisible" :height="200" width="500px" @ok="handleLevelOk"
|
||||
@closed="handleLevelClosed">
|
||||
<!-- <auditor-level-form ref="auditorLevelForm"></auditor-level-form> -->
|
||||
</l-dialog>
|
||||
|
||||
<!--流程节点选择-->
|
||||
<l-dialog :title="$t('流程节点选择')" :visible.sync="nodeAuditorVisible" :height="200" width="500px"
|
||||
@ok="handleNodeAuditorOk" @closed="handleNodeAuditorClosed" @opened="handleNodeAuditorOpened">
|
||||
<!-- <node-auditor-form ref="nodeAuditorForm"></node-auditor-form> -->
|
||||
</l-dialog>
|
||||
|
||||
<!--流程节点选择-->
|
||||
<l-dialog :title="$t('数据表字段选择')" :visible.sync="auditorSqlVisible" width="500px" :height="300"
|
||||
@ok="handleAuditorSqlOk" @closed="handleAuditorSqlClosed">
|
||||
<!-- <auditor-sql-form ref="auditorSqlForm"></auditor-sql-form> -->
|
||||
</l-dialog>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// const apiForm = window.$api.custmerForm.scheme
|
||||
|
||||
// import auditorLevelForm from './auditorLevel.vue'
|
||||
// import nodeAuditorForm from './auditorNode.vue'
|
||||
// import auditorSqlForm from './auditorSql.vue'
|
||||
|
||||
export default {
|
||||
name: 'user-task-option',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
// auditorLevelForm,
|
||||
// nodeAuditorForm,
|
||||
// auditorSqlForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
columns: [
|
||||
{ label: '名称', prop: 'label', minWidth: '100' },
|
||||
{ label: '字段', prop: 'field', minWidth: '100' },
|
||||
{ label: '必填', prop: 'required', width: '64', align: 'center' },
|
||||
{ label: '编辑', prop: 'isEdit', width: '64', align: 'center' },
|
||||
{ label: '查看', prop: 'isLook', width: '64', align: 'center' },
|
||||
],
|
||||
tableBtns: [
|
||||
{ prop: 'Delete', label: '删除' }
|
||||
],
|
||||
atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
|
||||
noAuditorOptions: [{ value: '1', label: '超级管理员处理' }, { value: '2', label: '跳过此步骤' }, { value: '3', label: '不能提交' }],
|
||||
userColumns: [
|
||||
{ label: '类型', prop: 'type', width: '64' },
|
||||
{ label: '名称', prop: 'name', minWidth: '100' },
|
||||
{ label: '附加条件', prop: 'condition', minWidth: '100' }
|
||||
],
|
||||
|
||||
conditionOptions: [{ value: '1', label: '同一个部门' }, { value: '2', label: '同一个公司' }, { value: '3', label: '发起人上级' }, { value: '4', label: '发起人下级' }],
|
||||
|
||||
selectPostVisible: false,
|
||||
selectRoleVisible: false,
|
||||
selectUserVisible: false,
|
||||
levelVisible: false,
|
||||
nodeAuditorVisible: false,
|
||||
auditorSqlVisible: false,
|
||||
|
||||
isLooker: false,
|
||||
|
||||
}
|
||||
},
|
||||
asyncComputed: {
|
||||
formVerisons: {
|
||||
async get() {
|
||||
let res = []
|
||||
if (!this.$validatenull(this.node.formCode) && this.node.formType == '1') {
|
||||
// res = await this.$awaitWraper(apiForm.getHistoryList(this.node.formCode))
|
||||
}
|
||||
return (res || []).map(t => { return { label: this.lr_dateFormat(t.f_CreateDate), value: t.f_Id } })
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
node() {
|
||||
return this.wfdesign.currentWfNode;
|
||||
}
|
||||
},
|
||||
inject: ["wfdesign"],
|
||||
methods: {
|
||||
async custmerformChange(val) {
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
if (val == null) {
|
||||
this.node.authFields = [];
|
||||
this.node.formVerison = ''
|
||||
return;
|
||||
}
|
||||
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
|
||||
// const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
|
||||
const { f_SchemeInfoId, f_Scheme, f_Id } = {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
|
||||
if (this.node.formCode == f_SchemeInfoId) {
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
|
||||
}
|
||||
this.node.formVerison = val.f_SchemeId
|
||||
},
|
||||
async custmerformVerisonChange(val) {
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
if (this.$validatenull(val)) {
|
||||
this.node.authFields = []
|
||||
return
|
||||
}
|
||||
if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
|
||||
// const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
|
||||
const { f_Scheme, f_Id } = {}
|
||||
this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
|
||||
if (this.node.formVerison == f_Id) {
|
||||
this.loadFormScheme(f_Scheme)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
|
||||
}
|
||||
},
|
||||
loadFormScheme(strScheme) {
|
||||
const scheme = JSON.parse(strScheme)
|
||||
const fields = []
|
||||
const rfields = []
|
||||
scheme.formInfo.tabList.forEach(tab => {
|
||||
tab.components.forEach(component => {
|
||||
if (['guid'].includes(component.type)) {
|
||||
rfields.push({ label: component.label, value: component.prop })
|
||||
}
|
||||
|
||||
if (!['gridtable', 'divider'].includes(component.type) && component.display) {
|
||||
fields.push({
|
||||
prop: component.prop,
|
||||
field: component.field,
|
||||
label: component.label,
|
||||
table: component.table,
|
||||
required: component.required,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
})
|
||||
}
|
||||
else if (['gridtable'].includes(component.type)) {
|
||||
fields.push({
|
||||
prop: `${component.prop}_add`,
|
||||
label: `${component.label || '表格'}-添加按钮`,
|
||||
required: false,
|
||||
isEdit: true,
|
||||
isLook: false,
|
||||
type: 'grid'
|
||||
})
|
||||
fields.push({
|
||||
prop: `${component.prop}_remove`,
|
||||
label: `${component.label || '表格'}-删除按钮`,
|
||||
required: false,
|
||||
isEdit: true,
|
||||
isLook: false,
|
||||
type: 'grid'
|
||||
})
|
||||
|
||||
fields.push({
|
||||
prop: `${component.prop}_required`,
|
||||
label: `${component.label || '表格'}-数据`,
|
||||
required: component.required,
|
||||
isEdit: false,
|
||||
isLook: false,
|
||||
type: 'gridrequired'
|
||||
})
|
||||
fields.push(...component.children.filter(t => t.display).map(t => {
|
||||
return {
|
||||
gridprop: component.prop,
|
||||
prop: t.prop,
|
||||
field: t.field,
|
||||
label: `${component.label || '表格'}-${t.label}`,
|
||||
table: component.table,
|
||||
required: t.required,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
this.node.formRelations = rfields
|
||||
this.node.authFields = fields
|
||||
|
||||
},
|
||||
handleFormTypeChange() {
|
||||
this.node.formCode = ''
|
||||
this.node.formUrl = ''
|
||||
this.node.formAppUrl = ''
|
||||
this.node.authFields = []
|
||||
this.node.formRelations = []
|
||||
|
||||
this.$set(this.node, 'formRelationId', '')
|
||||
|
||||
},
|
||||
handleAddAuthField() {
|
||||
this.node.authFields.push({
|
||||
field: '',
|
||||
label: '',
|
||||
required: true,
|
||||
isEdit: true,
|
||||
isLook: true
|
||||
})
|
||||
},
|
||||
handleDeleteAuthField(row) {
|
||||
this.node.authFields.splice(row.index, 1);
|
||||
},
|
||||
|
||||
handleTableBtnClick(btn) {
|
||||
this.node.auditUsers.splice(btn.rowIndex, 1);
|
||||
},
|
||||
handleTableBtnClick2(btn) {
|
||||
this.node.lookUsers.splice(btn.rowIndex, 1);
|
||||
},
|
||||
|
||||
typeFormat(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '岗位'
|
||||
case '2':
|
||||
return '角色'
|
||||
case '3':
|
||||
return '用户'
|
||||
case '4':
|
||||
return '上下级'
|
||||
case '5':
|
||||
return '节点'
|
||||
case '6':
|
||||
return '表字段'
|
||||
}
|
||||
},
|
||||
addTableData(selectData) {
|
||||
if (this.isLooker) {
|
||||
let addData2 = selectData.filter(t => this.node.lookUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
|
||||
this.node.lookUsers = this.node.lookUsers.concat(addData2);
|
||||
}
|
||||
else {
|
||||
let addData = selectData.filter(t => this.node.auditUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
|
||||
this.node.auditUsers = this.node.auditUsers.concat(addData);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
handlePostClick(isLooker) {
|
||||
this.selectPostVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handlePostSelectClosed() {
|
||||
this.$refs.postSelectPanel.resetForm();
|
||||
},
|
||||
handlePostSelectOk() {
|
||||
let selectData = this.$refs.postSelectPanel.getForm().map(t => { return { type: '1', id: t.f_PostId, name: t.name } });
|
||||
this.addTableData(selectData);
|
||||
this.selectPostVisible = false;
|
||||
},
|
||||
|
||||
handleRoleClick(isLooker) {
|
||||
this.selectRoleVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleRoleSelectClosed() {
|
||||
this.$refs.roleSelectPanel.resetForm();
|
||||
},
|
||||
handleRoleSelectOk() {
|
||||
let selectData = this.$refs.roleSelectPanel.getForm().map(t => { return { type: '2', id: t.f_RoleId, name: t.f_FullName, condition: '' } });
|
||||
this.addTableData(selectData);
|
||||
this.selectRoleVisible = false;
|
||||
},
|
||||
|
||||
handleUserClick(isLooker) {
|
||||
this.selectUserVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleUserSelectClosed() {
|
||||
this.$refs.userSelectPanel.resetForm();
|
||||
},
|
||||
handleUserSelectOk() {
|
||||
let selectData = this.$refs.userSelectPanel.getForm().map(t => { return { type: '3', id: t.f_UserId, name: t.name } });
|
||||
this.addTableData(selectData);
|
||||
this.selectUserVisible = false;
|
||||
},
|
||||
|
||||
|
||||
handleLevelClick(isLooker) {
|
||||
this.levelVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleLevelClosed() {
|
||||
this.$refs.auditorLevelForm.resetForm();
|
||||
},
|
||||
handleLevelOk() {
|
||||
this.$refs.auditorLevelForm.validateForm(() => {
|
||||
let data = this.$refs.auditorLevelForm.getForm();
|
||||
this.addTableData([data]);
|
||||
this.levelVisible = false;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
handleNodeAuditorClick(isLooker) {
|
||||
this.nodeAuditorVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleNodeAuditorOk() {
|
||||
this.$refs.nodeAuditorForm.validateForm(() => {
|
||||
let data = this.$refs.nodeAuditorForm.getForm();
|
||||
this.addTableData([data]);
|
||||
this.nodeAuditorVisible = false;
|
||||
});
|
||||
},
|
||||
handleNodeAuditorClosed() {
|
||||
this.$refs.nodeAuditorForm.resetForm();
|
||||
},
|
||||
handleNodeAuditorOpened() {
|
||||
let wfdata = this.wfdesign.handleGetWFData();
|
||||
this.$refs.nodeAuditorForm.setForm(wfdata.filter(t => t.type = 'userTask' && t.id != this.node.id));
|
||||
},
|
||||
|
||||
|
||||
handleAuditorSqlClick(isLooker) {
|
||||
this.auditorSqlVisible = true;
|
||||
this.isLooker = isLooker;
|
||||
},
|
||||
handleAuditorSqlOk() {
|
||||
this.$refs.auditorSqlForm.validateForm(() => {
|
||||
let data = this.$refs.auditorSqlForm.getForm();
|
||||
data.name = `${data.table}【${data.auditorField}】`
|
||||
this.addTableData([data]);
|
||||
this.auditorSqlVisible = false;
|
||||
});
|
||||
},
|
||||
handleAuditorSqlClosed() {
|
||||
this.$refs.auditorSqlForm.resetForm();
|
||||
},
|
||||
|
||||
hasBtnsDeleteBtn(row) {
|
||||
if (row.isSys) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
handleAddBtns() {
|
||||
this.node.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
|
||||
},
|
||||
handleDeleteBtns(row) {
|
||||
this.node.btnlist.splice(row.index, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
padding: 5px 0 10px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
.my-process-designer__header {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<!--
|
||||
* @Author: 刘妍
|
||||
* @Date: 2024-03-07 10:43:34
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-07 10:49:15
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree title="部门列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||||
:clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { BasicTree, TreeItem } from '@/components/Tree';
|
||||
import { getDeptList } from '@/api/demo/system';
|
||||
|
||||
defineOptions({ name: 'DeptTree' });
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDeptList()) as unknown as TreeItem[];
|
||||
}
|
||||
|
||||
function handleSelect(keys) {
|
||||
emit('select', keys[0]);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* @Author: 刘妍
|
||||
* @Date: 2024-03-07 10:43:34
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-07 10:48:39
|
||||
* @Description:
|
||||
*/
|
||||
import { getAllRoleList, isAccountExist } from '@/api/demo/system';
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
|
||||
/**
|
||||
* transform mock data
|
||||
* {
|
||||
* 0: '华东分部',
|
||||
* '0-0': '华东分部-研发部'
|
||||
* '0-1': '华东分部-市场部',
|
||||
* ...
|
||||
* }
|
||||
*/
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'account',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'organizations',
|
||||
// customRender: ({ value }) => {
|
||||
// return deptMap[value];
|
||||
// },
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'account',
|
||||
label: '用户名',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'nickname',
|
||||
label: '昵称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!--
|
||||
* @Author: 刘妍
|
||||
* @Date: 2024-03-07 10:43:34
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-07 10:56:46
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> -->
|
||||
<div class="select-account">
|
||||
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
|
||||
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo"> </BasicTable>
|
||||
</div>
|
||||
<!-- </PageWrapper> -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getAccountList, deleteAccount } from '@/api/demo/system';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import DeptTree from './DeptTree.vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
|
||||
import { columns, searchFormSchema } from './account.data';
|
||||
|
||||
defineOptions({ name: 'AccountManagement' });
|
||||
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
const [registerTable, { reload, updateTableDataRecord, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '账号列表',
|
||||
api: getAccountList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
},
|
||||
rowSelection: {//多选框
|
||||
type: 'checkbox',
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
bordered: true,
|
||||
tableSetting: { fullScreen: true },
|
||||
isCanResizeParent: true,
|
||||
handleSearchInfoFn(info) {
|
||||
console.log('handleSearchInfoFn', info);
|
||||
return info;
|
||||
},
|
||||
});
|
||||
function getRow() {
|
||||
let rows = getSelectRows();
|
||||
return rows
|
||||
}
|
||||
defineExpose({
|
||||
getRow
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.select-account{
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!--
|
||||
* @Author: 刘妍
|
||||
* @Date: 2024-03-07 10:00:26
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-07 10:50:39
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo"> </BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getRoleListByPage, deleteRole } from '@/api/demo/system';
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
// 表格名称
|
||||
title: '角色列表',
|
||||
// 获取数据的接口
|
||||
api: getRoleListByPage,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columns: [
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
],
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: [{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
}],
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: false,
|
||||
// 是否显示表格边框
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 勾选列
|
||||
rowSelection: {//多选框
|
||||
type: 'checkbox',
|
||||
},
|
||||
tableSetting: { fullScreen: true },
|
||||
isCanResizeParent: true,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
function getRow() {
|
||||
let rows = getSelectRows();
|
||||
return rows
|
||||
}
|
||||
defineExpose({
|
||||
getRow
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: 刘妍
|
||||
* @Date: 2024-01-13 13:04:15
|
||||
* @LastEditors: Do not edit
|
||||
* @LastEditTime: 2024-03-02 16:11:00
|
||||
* @LastEditTime: 2024-03-06 10:56:44
|
||||
* @Description:
|
||||
*/
|
||||
import 'uno.css';
|
||||
|
|
@ -32,9 +32,10 @@ import "mars3d/dist/mars3d.css"
|
|||
import 'bpmn-js/dist/assets/diagram-js.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
||||
|
||||
|
||||
import Antd from "ant-design-vue"
|
||||
async function bootstrap() {
|
||||
const app = createApp(App);
|
||||
app.use(Antd)
|
||||
|
||||
// Configure store
|
||||
// 配置 store
|
||||
|
|
|
|||
Loading…
Reference in New Issue