feat: base 优化wf配置页展示效果

This commit is contained in:
caoqianming 2024-07-02 18:07:48 +08:00
parent 66142799fd
commit c20dc4dbda
3 changed files with 42 additions and 23 deletions

View File

@ -1,10 +1,6 @@
<template> <template>
<el-container> <el-container>
<el-tabs style="width: 100%; height:100%" type="border-card" v-model="activeName" id="workflowElTabs" @tab-click="handleClick"> <el-tabs style="width: 100%; height:100%" type="border-card" v-model="activeName" id="workflowElTabs" @tab-click="handleClick">
<el-tab-pane label="自定义字段" name="customField">
<field v-if="activeName==='customField'"></field>
</el-tab-pane>
<el-tab-pane label="状态" name="state"> <el-tab-pane label="状态" name="state">
<state v-if="activeName==='state'"></state> <state v-if="activeName==='state'"></state>
</el-tab-pane> </el-tab-pane>
@ -12,6 +8,10 @@
<el-tab-pane label="流转" name="transform"> <el-tab-pane label="流转" name="transform">
<transform v-if="activeName==='transform'"></transform> <transform v-if="activeName==='transform'"></transform>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="自定义字段" name="customField">
<field v-if="activeName==='customField'"></field>
</el-tab-pane>
</el-tabs> </el-tabs>
</el-container> </el-container>
</template> </template>
@ -31,7 +31,7 @@
data() { data() {
return { return {
workflow:null, workflow:null,
activeName:'customField', activeName:'state',
} }
}, },
mounted() { mounted() {

View File

@ -12,23 +12,25 @@
<el-main class="nopadding" style="height: 100%"> <el-main class="nopadding" style="height: 100%">
<scTable <scTable
ref="table" ref="table"
v-loading="listLoading"
:data="list" :data="list"
row-key="id" row-key="id"
stripe stripe
highlightCurrentRow highlightCurrentRow
hidePagination hidePagination
hideDo
> >
<el-table-column label="#" type="index"></el-table-column> <el-table-column label="#" type="index"></el-table-column>
<el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="ID" prop="id" width="160"></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="是否隐藏"> <el-table-column label="是否隐藏" width="80">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.is_hidden"></span> <span v-if="scope.row.is_hidden"></span>
<span v-else></span> <span v-else></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="顺序ID" prop="sort"></el-table-column> <el-table-column label="顺序ID" prop="sort" width="80"></el-table-column>
<el-table-column label="类型"> <el-table-column label="类型" width="100">
<template #default="scope"> <template #default="scope">
<el-tag effect="plain" v-if="scope.row.type == 0"> <el-tag effect="plain" v-if="scope.row.type == 0">
普通类型 普通类型
@ -41,23 +43,28 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="参与人类型"> <el-table-column label="参与人类型" width="100">
<template #default="scope"> <template #default="scope">
{{ options_[scope.row.participant_type] }}</template {{ options_[scope.row.participant_type] }}</template
> >
</el-table-column> </el-table-column>
<el-table-column label="分配方式"> <el-table-column label="分配方式" width="100">
<template #default="scope"> <template #default="scope">
{{ options2_[scope.row.distribute_type] }}</template {{ options2_[scope.row.distribute_type] }}</template
> >
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="create_time"></el-table-column> <el-table-column label="到达调用">
<template #default="scope">
{{ scope.row.on_reach_func }}
</template>
</el-table-column>
<el-table-column label="创建时间" prop="create_time" width="160"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="120"> <el-table-column label="操作" fixed="right" align="right" width="120">
<template #default="scope"> <template #default="scope">
<el-button link size="small" @click="handleEdit(scope.row)" <el-button link size="small" type="primary" @click="handleEdit(scope.row)"
>编辑</el-button >编辑</el-button
> >
<el-button link size="small" @click="handleDelete(scope.row)" <el-button link size="small" type="danger" @click="handleDelete(scope.row)"
>删除</el-button >删除</el-button
> >
</template> </template>
@ -378,6 +385,7 @@ export default {
data() { data() {
return { return {
id: sessionStorage.getItem("jinYuWorkflowId"), id: sessionStorage.getItem("jinYuWorkflowId"),
listLoading: false,
list: null, list: null,
type: "add", type: "add",
titleMap: { titleMap: {
@ -510,15 +518,12 @@ export default {
], ],
editId: null, editId: null,
dialogVisible: false, dialogVisible: false,
dialogInitNum: 0
}; };
}, },
mounted() { mounted() {
this.id = sessionStorage.getItem("jinYuWorkflowId"); this.id = sessionStorage.getItem("jinYuWorkflowId");
this.getList(); this.getList();
this.getUsers();
this.getRole();
this.getPost();
this.getField();
}, },
methods: { methods: {
// //
@ -552,6 +557,13 @@ export default {
handleAdd() { handleAdd() {
this.type = "add"; this.type = "add";
this.dialogVisible = true; this.dialogVisible = true;
if(this.dialogInitNum === 0){
this.getUsers();
this.getRole();
this.getPost();
this.getField();
this.dialogInitNum++;
}
}, },
async submitHandle() { async submitHandle() {
let that = this; let that = this;
@ -610,7 +622,9 @@ export default {
}); });
}, },
async getList() { async getList() {
this.listLoading = true
let res = await this.$API.wf.workflow.states.req(this.id); let res = await this.$API.wf.workflow.states.req(this.id);
this.listLoading = false
console.log(res); console.log(res);
this.list = res; this.list = res;
}, },

View File

@ -9,12 +9,12 @@
<scTable <scTable
:data="list" ref="table" :data="list" ref="table"
row-key="id" stripe highlightCurrentRow hidePagination row-key="id" stripe highlightCurrentRow hidePagination hideDo
> >
<el-table-column label="#" type="index"></el-table-column> <el-table-column label="#" type="index"></el-table-column>
<el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="ID" prop="id" width="160"></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="定时器(单位秒)" prop="timer"></el-table-column> <!-- <el-table-column label="定时器(s)" prop="timer" width="100"></el-table-column> -->
<el-table-column label="源状态"> <el-table-column label="源状态">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.source_state_">{{scope.row.source_state_.name}}</span> <span v-if="scope.row.source_state_">{{scope.row.source_state_.name}}</span>
@ -25,7 +25,12 @@
<span v-if="scope.row.destination_state_">{{scope.row.destination_state_.name}}</span> <span v-if="scope.row.destination_state_">{{scope.row.destination_state_.name}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="提交时调用">
<template #default="scope">
{{ scope.row.on_submit_func }}
</template>
</el-table-column>
<el-table-column label="创建时间" width="160">
<template #default="scope">{{ scope.row.create_time }}</template> <template #default="scope">{{ scope.row.create_time }}</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -34,7 +39,7 @@
width="220px" width="220px"
> >
<template #default="scope"> <template #default="scope">
<el-button @click="handleEdit(scope.row)" link size="small"> <el-button @click="handleEdit(scope.row)" link size="small" type="primary">
编辑 编辑
</el-button> </el-button>
<el-button <el-button