ToolTech/tool-tech-front
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
hanjian
2024-09-02 08:40:29 +08:00
parent 40525f5b49
commit b689f6a51d
10 changed files with 464 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
src/views/workstuff/apply/index.vue
View File

@@ -2,25 +2,34 @@
<div class="app-container"><!--从这一层开始嵌入页面-->
<el-card>
<el-form label-width="80px">
<el-form ref="queryForm" label-width="80px">
<div class="search">
<div class="sl">
<el-form-item label="流程标题">
<el-input placeholder="输入流程标题"></el-input>
<el-input v-model="queryParams.procTitle" placeholder="输入流程标题"></el-input>
</el-form-item>
<el-form-item label="流程状态">
<el-select placeholder="请选择">
<el-option label="进行中" value=""></el-option>
<el-option label="已办结" value=""></el-option>
<el-select placeholder="请选择" v-model="queryParams.recordStatus" @change="handleQuery">
<el-option label="全部" value=""></el-option>
<el-option label="审核中" value="doing"></el-option>
<el-option label="已审核" value="done"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发起时间">
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</div>
<div class="sr">
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button icon="el-icon-refresh-left">重置</el-button>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
</div>
</div><!--search 搜索-->
</el-form><!--el-form-->
@@ -28,95 +37,166 @@
<el-card>
<el-table :data="tableData1" style="width: 100%" height="529">
<el-table-column prop="prop1" label="申请类型"></el-table-column>
<el-table-column prop="prop2" label="流程标题">【使用申请】工具名称11</el-table-column>
<el-table-column prop="prop2" label="流程状态" width="150">
<el-table-column label="申请类型">
<template slot-scope="scope">
<span :class="getClassName(scope.row.prop2)"><a @click="drawer2 = true">{{ scope.row.prop2 }}</a></span>
<span v-if="scope.row.applyType === 'publish'">发布申请</span>
<span v-if="scope.row.applyType === 'use'">使用申请</span>
</template>
</el-table-column>
<el-table-column prop="prop5" label="发起时间"></el-table-column>
<el-table-column prop="prop6" label="结束时间"></el-table-column>
<el-table-column prop="procTitle" label="流程标题"></el-table-column>
<el-table-column label="流程状态" width="150">
<template slot-scope="scope">
<el-tag v-if="scope.row.recordStatus === 'doing'">审核中</el-tag>
<el-tag type="success" v-if="scope.row.recordStatus === 'done'">已审核</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="发起时间"></el-table-column>
<el-table-column prop="endTime" label="结束时间"></el-table-column>
<el-table-column label="操作" width="100" >
<el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
<template slot-scope="scope">
<el-button type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table><!--el-table-->
<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getListData"
/>
</el-card><!--el-card-->
<el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
<el-drawer :visible.sync="drawer1" size="75%" :show-close="false">
<template #title>
<span>申请使用</span>
<div class="drawer-head-btn">
<el-button @click="drawer2 = true">流程监控</el-button>
<el-button type="primary" @click="handleMonitor"><i class="el-icon-data-line"></i> 流程监控</el-button>
<el-button @click="drawer1 = false"><i class="el-icon-close"></i> 关闭</el-button>
</div><!--drawer-head-btn 抽屉顶部按钮区域-->
</template>
<el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane label="信息内容" name="first">
<div class="el-form-border">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="24">
<el-form-item label="申请人">张莹</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="申请部门">信息部</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="申请理由">
<el-input type="textarea" maxlength="1000" placeholder="工作需要额外申请，请批准！" :disabled="true"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
<div class="divide double"></div><!--divide 分隔-->
<div class="tboper">
<div class="tit">申请工具</div>
</div><!--tboper 标题与操作按钮-->
<el-table :data="tableData2" style="width: 100%">
<el-table-column prop="prop1" label="工具编号"></el-table-column>
<el-table-column prop="prop2" label="工具名称"></el-table-column>
<el-table-column prop="prop3" label="归属单位" width="200"> </el-table-column>
<el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
<el-table-column prop="prop5" label="工具类别" ></el-table-column>
</el-table><!--el-table-->
<div class="divide double"></div><!--divide 分隔-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="审批记录" name="second">
<el-table :data="tableData3" style="width: 100%">
<el-table-column prop="prop4" label="处理人"></el-table-column>
<el-table-column prop="prop3" label="处理环节"> </el-table-column>
<el-table-column prop="prop2" label="接收人"></el-table-column>
<el-table-column prop="prop1" label="接收环节"></el-table-column>
<el-table-column prop="prop7" label="处理时间" ></el-table-column>
<el-table-column prop="prop5" label="审批意见" ></el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
<div class="tboper">
<div class="tit">基本信息</div>
</div><!--tboper 标题与操作按钮-->
<div class="el-form-border">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="24">
<el-form-item label="申请人">{{applyDetail.nickName}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="申请部门">{{applyDetail.deptName}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="申请理由">
<el-input type="textarea" maxlength="1000" :placeholder="applyDetail.reason" :disabled="true"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
<div class="divide double"></div><!--divide 分隔-->
<div class="tboper">
<div class="tit">申请工具</div>
</div><!--tboper 标题与操作按钮-->
<div class="el-form-border">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item label="工具编号">{{applyToolDetail.toolCode}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工具名称">{{applyToolDetail.toolName}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人">{{applyToolDetail.toolPrincipalsName}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门">{{applyToolDetail.toolRespDept}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工具来源">{{applyToolDetail.toolSource}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工具用途">{{applyToolDetail.toolUse}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工具类别">{{applyToolDetail.toolType}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">{{applyToolDetail.status}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="测试情况">{{applyToolDetail.testSituation}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="功能描述">{{applyToolDetail.functionDesc}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="适用条件">{{applyToolDetail.applyCondition}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="操作说明">{{applyToolDetail.operateExplain}}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注">{{applyToolDetail.remark}}</el-form-item>
</el-col>
</el-row>
</el-form><!--el-form-->
</div>
<div class="divide double"></div><!--divide 分隔-->
</el-drawer><!--el-drawer 申请详情-抽屉-->
<el-drawer :visible.sync="drawer2" :direction="direction" :before-close="handleClose" size="75%">
<template #title>
<span>流程监控</span>
</template>
<div class="lctitle">流程标题：【申请使用】工具名称1 ，流程定义名称：申请使用流程</div><!--lctitle-->
<img style="width:auto; max-width: 100%;" src="../../../../public/images/lcjk1.jpg" />
</el-drawer><!--el-drawer 流程监控-抽屉-->
<el-drawer
:visible.sync="drawerShow"
direction="rtl"
size="90%"
:with-header="false"
:wrapperClosable="false"
:show-close="false"
modal-append-to-body
:destroy-on-close="true"
>
<main-component ref="mainComponent" :code="path + code" :data="data" @close="handleClose"></main-component>
</el-drawer>
<monitor-drawer
v-if="drawer2"
ref="monitorDrawer"
></monitor-drawer>
</div><!--app-container-->
</template>
<script>
import { listApply } from "@/api/tool/toolApply";
import { getTool } from "@/api/tool/tool";
import DealDrawer from '@/components/DealDrawer/index.vue'
import mainComponent from '@/components/mainComponent/index.vue'
export default {
name: 'apply',
components: { mainComponent, DealDrawer },
data() {
return {
drawer1: false,
drawer2: false,
activeName1: 'first',
activeName2: 'second',
radio1: '',
drawerShow: false,
path: 'views/workflowList/addWorkflow/',
code: '',
data: undefined,
// 日期范围
dateRange: [],
pageSizes: [10,20,50,100],
// 总条数
total: 0,
// 查询参数
queryParams: {
pageNumber: 1,
pageSize: 10,
procTitle: "",
recordStatus: "",
},
applyDetail: {},
applyToolDetail: {},
tableData1: [
{
prop1: '使用申请',
@@ -272,20 +352,72 @@
],
}
},
created() {
// 初始化获取待办清单
this.getListData()
},
methods: {
getClassName(prop2) {
// 根据不同的文本内容返回不同的类名
if (prop2 === '进行中') {
return 'blue';
} else if (prop2 === '已办结') {
return 'green';
}else if (prop2 === '不通过') {
return 'red';
} else if (prop2 === '通过') {
return 'green';
}
handleDeal(row) {
this.dealDrawerShow = true;
let flowUrl = this.buildFlowUrl(row)
this.$nextTick(() => {
this.$refs.dealDrawer.init(flowUrl);
});
},
/** 查询列表 */
getListData() {
this.loading = true;
this.tableData1 = [];
listApply(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
this.total = response.total;
this.tableData1 = response.rows;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getListData();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.procTitle = "";
this.queryParams.recordStatus = "";
this.handleQuery();
},
showDetail(row){
getTool(row.toolId).then((response) => {
this.applyToolDetail = response.data;
});
this.drawer1 = true;
this.applyDetail = row;
},
handleOpen(row){
let _this = this
_this.code = row.type
_this.data = row
_this.drawerShow = true
},
handleDetail(row) {
let _this = this
if(row.applyType === 'use'){
_this.handleOpen({type:'use_apply', procInstId:row.procInstId, status:'2'})
} else {
_this.handleOpen({type:'tool_release', procInstId:row.procInstId, status:'2'})
}
},
handleClose(){
this.drawerShow = false
},
handleMonitor() {
this.drawer2 = true;
this.$nextTick(() => {
this.$refs.monitorDrawer.init(this.applyDetail.procInstId);
});
},
},
}
</script>

30
src/views/workstuff/dispose/index.vue
View File

@@ -14,7 +14,7 @@
<el-card>
<el-tabs v-model="activeName" @tab-click="state">
<el-tab-pane :label="'待办('+ statustotal+')'" name="taskToDo">
<el-table :data="postList" style="width: 100%" height="529">
<el-table :data="postList" style="width: 100%" height="529" v-loading="loading">
<el-table-column prop="procDefName" label="流程类型"></el-table-column>
<el-table-column prop="title" label="流程标题"></el-table-column>
<el-table-column prop="curActDefName" label="当前环节"></el-table-column>
@@ -32,10 +32,16 @@
</template>
</el-table-column>
</el-table><!--el-table-->
<el-pagination @current-change="getListData" v-show="total > 0" :current-page="queryParams.pageNumber" :page-sizes="pageSizes" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getListData"
/>
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane :label="'已办('+doneTotal+')'" name="taskDealed">
<el-table :data="postList" style="width: 100%" height="529">
<el-table :data="postList" style="width: 100%" height="529" v-loading="loading">
<el-table-column prop="procDefName" label="流程类型"></el-table-column>
<el-table-column prop="title" label="流程标题"></el-table-column>
<el-table-column prop="curActDefName" label="处理环节"></el-table-column>
@@ -53,10 +59,16 @@
</template>
</el-table-column>
</el-table><!--el-table-->
<el-pagination @current-change="getListData" v-show="total > 0" :current-page="queryParams.pageNumber" :page-sizes="pageSizes" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getListData"
/>
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane :label="'办结('+finishedTotal+')'" name="taskFinish">
<el-table :data="postList" style="width: 100%" height="529">
<el-table :data="postList" style="width: 100%" height="529" v-loading="loading">
<el-table-column prop="procDefName" label="流程类型"></el-table-column>
<el-table-column prop="title" label="流程标题"></el-table-column>
<el-table-column prop="startUserName" label="发起人"></el-table-column>
@@ -76,7 +88,13 @@
</template>
</el-table-column>
</el-table><!--el-table-->
<el-pagination @current-change="getListData" v-show="total > 0" :current-page="queryParams.pageNumber" :page-sizes="pageSizes" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getListData"
/>
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
</el-card>