封装流程属性面板：结束节点、子流程。流程分类相关接口对接
parent
5efd729366
commit
1f81dbe44b
|
|
@ -0,0 +1,51 @@
|
|||
// WFSchemeInfo 流程模版基本信息
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
import {SchemeListParams,GetSchemeModel,AddParams,
|
||||
DeleteParams,UpdateParams,StateParams,HistoryParams,GetHistoryModel} from './model/wfSchemeInfoModel'
|
||||
enum Api {
|
||||
// 流程模板基本信息
|
||||
LoadPage = '/api/WFSchemeInfo/LoadPage',
|
||||
Add = '/api/WFSchemeInfo/Add',
|
||||
Update = '/api/WFSchemeInfo/Update',
|
||||
Delete = '/api/WFSchemeInfo/Delete',
|
||||
UpDateState = '/api/WFSchemeInfo/UpDateState',
|
||||
// 流程模板详细信息
|
||||
loadHistoryPage= '/api/WFScheme/LoadPage'
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: getLoadPage 模板列表
|
||||
*/
|
||||
export function getLoadPage(params?: SchemeListParams) {
|
||||
return defHttp.get<GetSchemeModel>({ url: Api.LoadPage, params });
|
||||
}
|
||||
/**
|
||||
* @description: postAdd
|
||||
*/
|
||||
export function postAdd( params?:AddParams) {
|
||||
return defHttp.post(
|
||||
{
|
||||
url: Api.Add,
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export function update(params:UpdateParams) {
|
||||
return defHttp.post({
|
||||
url: Api.Update,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
export function del(params:DeleteParams) {
|
||||
return defHttp.post({ url: Api.Delete + "?id=" + params.id });
|
||||
}
|
||||
|
||||
export function updateState(params:StateParams){
|
||||
return defHttp.post({ url: Api.UpDateState + "?id=" + params.id +"&state="+params.state});
|
||||
}
|
||||
|
||||
export function getLoadHistoryPage(params?:HistoryParams){
|
||||
return defHttp.get<GetHistoryModel>({url:Api.loadHistoryPage,params})
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/**
|
||||
* @description: 字典明细接口区分参数
|
||||
*/
|
||||
export interface CodeParams {
|
||||
code: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 字典明细添加参数
|
||||
*/
|
||||
export interface AddParams {
|
||||
itemName: string;
|
||||
itemValue: string;
|
||||
sortCode: number;
|
||||
enabledMark: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 字典明细更新参数
|
||||
*/
|
||||
export interface UpdateParams {
|
||||
itemDetailId:string;
|
||||
itemName: string;
|
||||
itemValue: string;
|
||||
sortCode: number;
|
||||
enabledMark: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description: 分类明细删除参数
|
||||
*/
|
||||
export interface DeleteParams {
|
||||
id: string ;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 获取分类明细返回值
|
||||
*/
|
||||
export interface GetSysDataItemDetailModel {
|
||||
itemDetailId: string;
|
||||
itemId: string;
|
||||
parentId: string;
|
||||
itemCode: string;
|
||||
itemName: string;
|
||||
itemValue: string;
|
||||
quickQuery: string;
|
||||
simpleSpelling: string;
|
||||
isDefault: string;
|
||||
sortCode: number;
|
||||
deleteMark: number;
|
||||
enabledMark: number;
|
||||
description: string;
|
||||
createDate: string;
|
||||
createUserName: string;
|
||||
modifyDate: string;
|
||||
modifyUserId: string;
|
||||
modifyUserName: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* @description: 流程模板基本信息参数
|
||||
*/
|
||||
export interface SchemeListParams {
|
||||
key: string;
|
||||
page: number;
|
||||
limit: number;
|
||||
category: string;
|
||||
ids?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 流程模板添加参数
|
||||
*/
|
||||
export interface AddParams {
|
||||
schemeinfo: {
|
||||
id: string,
|
||||
code: string,
|
||||
name: string,
|
||||
category: string,
|
||||
color: string,
|
||||
icon: string,
|
||||
schemeId: string,
|
||||
enabledMark: 0,
|
||||
mark: 0,
|
||||
isInApp: 0,
|
||||
authType: 0,
|
||||
description: string,
|
||||
type: 0,
|
||||
createDate: string,
|
||||
createUserId: string,
|
||||
createUserName: string
|
||||
},
|
||||
schemeAuthList: [
|
||||
{
|
||||
id: string,
|
||||
schemeInfoId: string,
|
||||
objName: string,
|
||||
objId: string,
|
||||
objType: 0
|
||||
}
|
||||
],
|
||||
scheme: {
|
||||
id: string,
|
||||
schemeInfoId: string,
|
||||
type: 0,
|
||||
createDate: string,
|
||||
createUserId: string,
|
||||
createUserName: string,
|
||||
content: string
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 字典明细更新参数
|
||||
*/
|
||||
export interface UpdateParams {
|
||||
schemeinfo: {
|
||||
id: string,
|
||||
code: string,
|
||||
name: string,
|
||||
category: string,
|
||||
color: string,
|
||||
icon: string,
|
||||
schemeId: string,
|
||||
enabledMark: 0,
|
||||
mark: 0,
|
||||
isInApp: 0,
|
||||
authType: 0,
|
||||
description: string,
|
||||
type: 0,
|
||||
createDate: string,
|
||||
createUserId: string,
|
||||
createUserName: string
|
||||
},
|
||||
schemeAuthList: [
|
||||
{
|
||||
id: string,
|
||||
schemeInfoId: string,
|
||||
objName: string,
|
||||
objId: string,
|
||||
objType: 0
|
||||
}
|
||||
],
|
||||
scheme: {
|
||||
id: string,
|
||||
schemeInfoId: string,
|
||||
type: 0,
|
||||
createDate: string,
|
||||
createUserId: string,
|
||||
createUserName: string,
|
||||
content: string
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description: 分类明细删除参数
|
||||
*/
|
||||
export interface DeleteParams {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface StateParams{
|
||||
id:string;
|
||||
state:number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 获取分类明细返回值
|
||||
*/
|
||||
export interface GetSchemeModel {
|
||||
itemDetailId: string;
|
||||
itemId: string;
|
||||
parentId: string;
|
||||
itemCode: string;
|
||||
itemName: string;
|
||||
itemValue: string;
|
||||
quickQuery: string;
|
||||
simpleSpelling: string;
|
||||
isDefault: string;
|
||||
sortCode: number;
|
||||
deleteMark: number;
|
||||
enabledMark: number;
|
||||
description: string;
|
||||
createDate: string;
|
||||
createUserName: string;
|
||||
modifyDate: string;
|
||||
modifyUserId: string;
|
||||
modifyUserName: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 历史记录查询参数
|
||||
*/
|
||||
export interface HistoryParams{
|
||||
key: string;
|
||||
page: number;
|
||||
limit: number;
|
||||
id?: string;
|
||||
}
|
||||
/**
|
||||
* @description: 历史记录返回值
|
||||
*/
|
||||
export interface GetHistoryModel{
|
||||
id: string,
|
||||
schemeInfoId: string,
|
||||
type: number,
|
||||
createDate: string,
|
||||
createUserId: string,
|
||||
createUserName: string,
|
||||
content: string
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
// sysDataItemDetail 字典明细接口api
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
import {CodeParams,AddParams,UpdateParams ,DeleteParams,GetSysDataItemDetailModel} from './model/sysDataItemDetailModel'
|
||||
enum Api {
|
||||
Load = '/api/SysDataItemDetail/Load',
|
||||
Add = '/api/SysDataItemDetail/Add',
|
||||
Update = '/api/SysDataItemDetail/Update',
|
||||
Delete = '/api/SysDataItemDetail/Delete',
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: postAdd
|
||||
*/
|
||||
export function postAdd(code:CodeParams, params:AddParams) {
|
||||
return defHttp.post(
|
||||
{
|
||||
url: Api.Add + "?code=" + code,
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: getLoad
|
||||
*/
|
||||
export function getLoad(params: CodeParams) {
|
||||
return defHttp.get<GetSysDataItemDetailModel>({ url: Api.Load, params });
|
||||
}
|
||||
|
||||
export function update(params?:UpdateParams) {
|
||||
console.log(params)
|
||||
return defHttp.post({
|
||||
url: Api.Update,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
export function del(params:DeleteParams) {
|
||||
return defHttp.post({ url: Api.Delete + "?id=" + params.id });
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -13,9 +13,12 @@
|
|||
<a-tab-pane key="4" tab="审核节点">
|
||||
<user-task-option ref="task"></user-task-option>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="结束节点">
|
||||
<a-tab-pane key="5" tab="结束节点">
|
||||
<end-event-option ref="end" :element="data.elementData"></end-event-option>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6" tab="子流程">
|
||||
<subprocess-option ref="subprocess" :element="data.elementData"></subprocess-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">
|
||||
|
|
@ -53,7 +56,7 @@
|
|||
// 审核节点
|
||||
import userTaskOption from './userTask/index.vue'
|
||||
// 结束节点
|
||||
import endEventOption from './config/endEvent.vue'
|
||||
import endEventOption from './endEvent/index.vue'
|
||||
// 网关和
|
||||
import gatewayAndOption from './config/gatewayAnd.vue'
|
||||
// 网关包容
|
||||
|
|
@ -63,7 +66,7 @@
|
|||
// 脚本任务
|
||||
import scriptTaskOption from './config/scriptTask.vue'
|
||||
// 子流程
|
||||
import subprocessOption from './config/subprocess.vue'
|
||||
import subprocessOption from './subprocess/index.vue'
|
||||
// 线
|
||||
import mylineOption from './config/myline.vue'
|
||||
/**
|
||||
|
|
@ -91,7 +94,7 @@
|
|||
|
||||
provide('prefix', props.prefix)
|
||||
provide('width', props.width)
|
||||
const activeKey = ref("5")
|
||||
const activeKey = ref("6")
|
||||
const data = reactive({
|
||||
configActiveName: 'tab02',
|
||||
currentWfNode: undefined,
|
||||
|
|
|
|||
|
|
@ -1,32 +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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'end-event-option',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
node(){
|
||||
return this.wfdesign.currentWfNode;
|
||||
}
|
||||
},
|
||||
inject: ["wfdesign"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,70 +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.isAsync">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程模版">
|
||||
<l-select :disabled="disabled" v-model="node.wfschemeId" :options="list">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程版本">
|
||||
<l-select :disabled="disabled" v-model="node.wfVersionId" :options="verisons">
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// const api = window.$api.workflow.scheme
|
||||
|
||||
export default {
|
||||
name:'subprocess-option',
|
||||
props:{
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
asyncComputed:{
|
||||
list:{
|
||||
async get(){
|
||||
const data = []
|
||||
// const data = await this.$awaitWraper(api.getList())
|
||||
const res = data || []
|
||||
return res.filter(t=>t.f_Id != this.wfdesign.schemeinfoId).map(t=>{return {label:t.f_Name,value:t.f_Id}})
|
||||
}
|
||||
},
|
||||
verisons:{
|
||||
async get(){
|
||||
let res = []
|
||||
if(!this.$validatenull(this.node.wfschemeId)){
|
||||
// res = await this.$awaitWraper(api.getHistoryList(this.node.wfschemeId))
|
||||
}
|
||||
return (res || []).map(t=>{return { label:this.lr_dateFormat(t.f_CreateDate),value:t.f_Id }})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
node(){
|
||||
return this.wfdesign.currentWfNode;
|
||||
}
|
||||
},
|
||||
inject: ["wfdesign"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="end-event">
|
||||
<a-form ref="formRef" :model="node" 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
const node = reactive({
|
||||
id: ""
|
||||
})
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="subprocess">
|
||||
<a-form ref="formRef" :model="node" 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.isAsync" />
|
||||
</a-form-item>
|
||||
<a-form-item label="流程模版">
|
||||
<a-select v-model:value="node.wfschemeId" :options="data.list">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="流程版本">
|
||||
<a-select v-model:value="node.wfVersionId" :options="data.verisons">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
element: Object
|
||||
})
|
||||
const node = reactive({
|
||||
id:''
|
||||
})
|
||||
const data = reactive({
|
||||
list: [],
|
||||
verisons: []
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
async function editMenu(node: Recordable) {
|
||||
async function editMenu(node) {
|
||||
var query = {
|
||||
id: node.id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="历史记录" width="60%" @ok="handleSubmit">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="[
|
||||
{
|
||||
icon: 'clarity:info-standard-line',
|
||||
tooltip: '查看历史记录',
|
||||
onClick: handleHistory.bind(null, record),
|
||||
}
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</BasicTable>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, reactive, onMounted } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
|
||||
import {columnsHistory} from './scheme.data'
|
||||
import { getLoadHistoryPage } from '@/api/sys/WFSchemeInfo';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
|
||||
defineOptions({ name: 'HistoryDrawer' });
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const rowId = ref('');
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
searchInfo.id = data.record.id
|
||||
});
|
||||
const [registerTable, { reload, getPaginationRef, }] = useTable({
|
||||
api: getLoadHistoryPage,
|
||||
columns: columnsHistory,
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
tableSetting: { fullScreen: true },
|
||||
showIndexColumn: false,
|
||||
isCanResizeParent: true,
|
||||
rowKey: 'id',
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
function handleHistory(record){
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
});
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
let query = values
|
||||
// 调用接口
|
||||
if (!unref(isUpdate)) {
|
||||
const data = await addRole(query);
|
||||
} else {
|
||||
const data = await updateRole(query);
|
||||
}
|
||||
|
||||
|
||||
setModalProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
closeModal();
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -9,14 +9,14 @@
|
|||
import { formSchema } from './scheme.data';
|
||||
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
|
||||
|
||||
import { getMenuList, addMenu, editMenu, addButton, editButton } from '@/api/demo/system';
|
||||
import { postAdd, update } from '@/api/sys/sysDataItemDetail';
|
||||
|
||||
defineOptions({ name: 'SchemeDrawer' });
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const isUpdate = ref(true);
|
||||
|
||||
const detail = ref({})
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
||||
labelWidth: 90,
|
||||
baseColProps: { span: 24 },
|
||||
|
|
@ -25,24 +25,17 @@
|
|||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
console.log(data)
|
||||
resetFields();
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
detail.value = data.record
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
const treeData = await getMenuList();
|
||||
updateSchema({
|
||||
field: 'parentId',
|
||||
componentProps: { treeData },
|
||||
});
|
||||
updateSchema({
|
||||
field: 'moduleId',
|
||||
componentProps: { treeData },
|
||||
});
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
|
||||
|
|
@ -51,28 +44,20 @@
|
|||
try {
|
||||
const values = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
console.log(values)
|
||||
if (values.type == '1') {
|
||||
console.log("新增菜单")
|
||||
delete values.type
|
||||
// 新增菜单
|
||||
if (!unref(isUpdate)) {
|
||||
const data = await addMenu(values);
|
||||
} else {
|
||||
const data = await editMenu(values);
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
console.log(values)
|
||||
console.log(detail.value)
|
||||
var querys = detail.value
|
||||
querys.description = values.description
|
||||
querys.enabledMark = values.enabledMark
|
||||
querys.itemName = values.itemName
|
||||
querys.itemValue = values.itemValue
|
||||
querys.sortCode = values.sortCode
|
||||
const data = await update(querys);
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
} else {
|
||||
console.log("新增按钮")
|
||||
// 新增按钮
|
||||
delete values.type
|
||||
if (!unref(isUpdate)) {
|
||||
const data = await addButton(values);
|
||||
} else {
|
||||
const data = await editButton(values);
|
||||
}
|
||||
const data = await postAdd('FlowSort', values);
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,43 @@
|
|||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree ref="asyncExpandTreeRef" title="流程分类" toolbar search
|
||||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
|
||||
:renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||||
:defaultExpandAll="true" @select="handleSelect" />
|
||||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
|
||||
:renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData"
|
||||
:fieldNames="{ key: 'itemDetailId', title: 'itemName' }" :defaultExpandAll="true" @select="handleSelect" />
|
||||
<BasicModal @register="register" title="删除" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
|
||||
确认要删除流程分类吗？
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, h, nextTick, unref } from 'vue';
|
||||
import { onMounted, ref, h, nextTick, unref, createVNode } from 'vue';
|
||||
import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
|
||||
import { getMenuList, deleteMenu } from '@/api/demo/system';
|
||||
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { Card, Row, Col, Spin } from 'ant-design-vue';
|
||||
import { getLoad, del } from '@/api/sys/sysDataItemDetail';
|
||||
import { PlusOutlined, FormOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Card, Row, Col, Spin, Modal } from 'ant-design-vue';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { router } from '@/router';
|
||||
const [register, { closeModal, openModal }] = useModal();
|
||||
defineOptions({ name: 'DeptTree' });
|
||||
|
||||
const emit = defineEmits(['select', 'edit']);
|
||||
const emit = defineEmits(['select', 'edit', 'success']);
|
||||
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
let selectItemId = ref('')
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
const treeLoading = ref(false);
|
||||
async function handleSubmit() {
|
||||
var query = [selectItemId.value]
|
||||
const data = await deleteMenu(query);
|
||||
closeModal();
|
||||
|
||||
var query = {
|
||||
id: selectItemId.value
|
||||
}
|
||||
console.log(query)
|
||||
const data = await del(query);
|
||||
emit('success')
|
||||
}
|
||||
|
||||
async function fetch() {
|
||||
treeLoading.value = true;
|
||||
treeData.value = (await getMenuList()) as unknown as TreeItem[];
|
||||
treeData.value = (await getLoad({ code: 'FlowSort' })) as unknown as TreeItem[];
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
treeLoading.value = false;
|
||||
|
|
@ -44,12 +46,19 @@
|
|||
}
|
||||
|
||||
function handleSelect(keys) {
|
||||
emit('select', keys[0]);
|
||||
var itemDetailId = keys[0]
|
||||
var itemName
|
||||
treeData.value.forEach(element => {
|
||||
if (itemDetailId == element.itemDetailId) {
|
||||
itemName = element.itemName
|
||||
}
|
||||
});
|
||||
emit('select', itemName);
|
||||
}
|
||||
const btnList = router.currentRoute.value.meta.elements
|
||||
const actionList: TreeActionItem[] = []
|
||||
btnList.forEach(element => {
|
||||
if(element.domId=='btnAdd'){
|
||||
if (element.domId == 'btnAdd') {
|
||||
actionList.push({
|
||||
render: (node) => {
|
||||
return h(PlusOutlined, {
|
||||
|
|
@ -60,13 +69,19 @@
|
|||
});
|
||||
},
|
||||
})
|
||||
}else if (element.domId == 'btnEdit') {
|
||||
} else if (element.domId == 'btnEdit') {
|
||||
actionList.push({
|
||||
render: (node) => {
|
||||
let data = {}
|
||||
treeData.value.forEach(element => {
|
||||
if (element.itemDetailId == node.itemDetailId) {
|
||||
data = element
|
||||
}
|
||||
});
|
||||
return h(FormOutlined, {
|
||||
class: 'ml-2',
|
||||
onClick: () => {
|
||||
emit('edit', node);
|
||||
emit('edit', data);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
|
@ -77,9 +92,21 @@
|
|||
return h(DeleteOutlined, {
|
||||
class: 'ml-2',
|
||||
onClick: () => {
|
||||
selectItemId.value = node.id
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
selectItemId.value = node.itemDetailId
|
||||
Modal.confirm({
|
||||
title: '删除?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '你确定要删除当前流程分类吗',
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
handleSubmit()
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="editMenu" @add='handleCreate'/>
|
||||
<SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="classifyEdit" @add='handleCreate' @success="handleSuccess"/>
|
||||
<BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" @fetch-success="onFetchSuccess"
|
||||
:searchInfo="searchInfo">
|
||||
<template #toolbar>
|
||||
|
|
@ -9,20 +9,19 @@
|
|||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
<TableAction :actions="[
|
||||
{
|
||||
icon: 'clarity:info-standard-line',
|
||||
tooltip: '查看历史记录',
|
||||
onClick: handleView.bind(null, record),
|
||||
onClick: handleHistory.bind(null, record),
|
||||
}
|
||||
]"
|
||||
/>
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</BasicTable>
|
||||
<SchemeDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
<HistoryDrawer @register="registerHistoryDrawer" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
|
||||
</template>
|
||||
|
|
@ -30,17 +29,19 @@
|
|||
import { reactive, nextTick, ref } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getMenuList, getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
|
||||
import { getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
|
||||
import { getLoadPage } from '@/api/sys/WFSchemeInfo';
|
||||
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import SchemeTree from './SchemeTree.vue';
|
||||
|
||||
import { useDrawer } from '@/components/Drawer';
|
||||
import SchemeDrawer from './SchemeDrawer.vue';
|
||||
|
||||
import HistoryDrawer from './HistoryDrawer.vue'
|
||||
import { columns, searchFormSchema } from './scheme.data';
|
||||
import PermissionBtn from '@/components/PermissionBtn/index.vue'
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createConfirm,createMessage } = useMessage();
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
import { useGo } from '@/hooks/web/usePage';
|
||||
const go = useGo();
|
||||
|
|
@ -48,12 +49,13 @@
|
|||
defineOptions({ name: 'SchemeManagement' });
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
|
||||
const [registerHistoryDrawer, { openDrawer:openHistoryDrawer }] = useDrawer();
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
const [registerTable, { reload, expandAll, getSelectRows,clearSelectedRowKeys }] = useTable({
|
||||
const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '模板列表',
|
||||
api: getButtonList,
|
||||
api: getLoadPage,
|
||||
columns,
|
||||
rowKey:'id',
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
|
|
@ -87,9 +89,16 @@
|
|||
function handleView(record: Recordable) {
|
||||
go('/dashboard/scheme_preview/' + record.id);
|
||||
}
|
||||
// 查看历史记录
|
||||
function handleHistory(record){
|
||||
console.log(record)
|
||||
openHistoryDrawer(true,{
|
||||
record
|
||||
})
|
||||
}
|
||||
function handleEdit() {
|
||||
let rows = getSelectRows();
|
||||
if(rows.length == 0){
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请选择一个按钮进行编辑');
|
||||
}
|
||||
const record = rows[0]
|
||||
|
|
@ -99,25 +108,20 @@
|
|||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
async function editMenu(node: Recordable) {
|
||||
var query = {
|
||||
id: node.id
|
||||
}
|
||||
const record = await getMenuDetail(query);
|
||||
record.type = '1'
|
||||
async function classifyEdit(record) {
|
||||
openDrawer(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
function handleSelect(ModuleId = '') {
|
||||
searchInfo.ModuleId = ModuleId;
|
||||
function handleSelect(category = '') {
|
||||
searchInfo.category = category;
|
||||
clearSelectedRowKeys()
|
||||
reload();
|
||||
}
|
||||
async function handleDelete(record: Recordable) {
|
||||
let rows = getSelectRows();
|
||||
if(rows.length == 0){
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请选择一个按钮进行删除');
|
||||
}
|
||||
const query = [rows[0].id]
|
||||
|
|
@ -146,7 +150,7 @@
|
|||
console.log(domId)
|
||||
switch (domId) {
|
||||
case 'btnAdd':
|
||||
go('/dashboard/scheme_preview/add');
|
||||
go('/dashboard/scheme_preview/add');
|
||||
break;
|
||||
case 'btnEdit':
|
||||
handleEdit()
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import { Tag,Switch } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
import {updateState} from '@/api/sys/WFSchemeInfo'
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'domId',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
|
|
@ -14,11 +16,50 @@ export const columns: BasicColumn[] = [
|
|||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'category',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
title: '状态',
|
||||
dataIndex: 'enabledMark',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
if (!record.type) {
|
||||
const color = 'blue';
|
||||
const text = '草稿';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
} else {
|
||||
return h(Switch, {
|
||||
checked: record.enabledMark === 1,
|
||||
checkedChildren: '启用',
|
||||
unCheckedChildren: '停用',
|
||||
loading: record.pendingStatus,
|
||||
onChange(checked) {
|
||||
record.pendingStatus = true;
|
||||
const newStatus = checked ? 1 : 0;
|
||||
const { createMessage } = useMessage();
|
||||
updateState({ id: record.id, state: newStatus })
|
||||
.then((data) => {
|
||||
record.enabledMark = newStatus;
|
||||
createMessage.success(data.message);
|
||||
})
|
||||
.catch((err) => {
|
||||
createMessage.error(err.message);
|
||||
})
|
||||
.finally(() => {
|
||||
record.pendingStatus = false;
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createUserName',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createDate',
|
||||
},
|
||||
|
||||
];
|
||||
|
|
@ -38,30 +79,30 @@ export const searchFormSchema: FormSchema[] = [
|
|||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
field: 'itemDetailId',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
ifShow:false
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
field: 'itemName',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'value',
|
||||
field: 'itemValue',
|
||||
label: '值',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'sortNo',
|
||||
field: 'sortCode',
|
||||
label: '排序',
|
||||
component: 'InputNumber',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
field: 'enabledMark',
|
||||
label: '是否有效',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: 1,
|
||||
|
|
@ -73,8 +114,71 @@ export const formSchema: FormSchema[] = [
|
|||
},
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
field: 'description',
|
||||
label: '备注',
|
||||
component: 'InputTextArea',
|
||||
},
|
||||
];
|
||||
// 历史记录表头
|
||||
export const columnsHistory: BasicColumn[] = [
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createUserName',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createDate',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'type',
|
||||
customRender: ({ record }) => {
|
||||
if (record.type == 1) {
|
||||
const color = 'green';
|
||||
const text = '正式';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
} else {
|
||||
const color = 'blue';
|
||||
const text = '草稿';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// title: '当前版本',
|
||||
// dataIndex: 'enabledMark',
|
||||
// width: 80,
|
||||
// customRender: ({ record }) => {
|
||||
// if (!record.type) {
|
||||
// const color = 'blue';
|
||||
// const text = '草稿';
|
||||
// return h(Tag, { color: color }, () => text);
|
||||
// } else {
|
||||
// return h(Switch, {
|
||||
// checked: record.enabledMark === 1,
|
||||
// checkedChildren: '启用',
|
||||
// unCheckedChildren: '停用',
|
||||
// loading: record.pendingStatus,
|
||||
// onChange(checked) {
|
||||
// record.pendingStatus = true;
|
||||
// const newStatus = checked ? 1 : 0;
|
||||
// const { createMessage } = useMessage();
|
||||
// updateState({ id: record.id, state: newStatus })
|
||||
// .then((data) => {
|
||||
// record.enabledMark = newStatus;
|
||||
// createMessage.success(data.message);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// createMessage.error(err.message);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// record.pendingStatus = false;
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
|
||||
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue