296 lines
10 KiB
Vue
296 lines
10 KiB
Vue
<template>
|
||
<div class="app-container"><!--从这一层开始嵌入页面-->
|
||
|
||
<el-card>
|
||
<el-form label-width="80px">
|
||
<div class="search">
|
||
<div class="sl">
|
||
<el-form-item label="流程标题">
|
||
<el-input 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>
|
||
</el-form-item>
|
||
<el-form-item label="发起时间">
|
||
<el-date-picker 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>
|
||
</div>
|
||
</div><!--search 搜索-->
|
||
</el-form><!--el-form-->
|
||
</el-card><!--el-card-->
|
||
|
||
<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">
|
||
<template slot-scope="scope">
|
||
<span :class="getClassName(scope.row.prop2)"><a @click="drawer2 = true">{{ scope.row.prop2 }}</a></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 label="操作" width="100" >
|
||
<el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
|
||
</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>
|
||
</el-card><!--el-card-->
|
||
|
||
<el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
|
||
<template #title>
|
||
<span>申请使用</span>
|
||
<div class="drawer-head-btn">
|
||
<el-button @click="drawer2 = true">流程监控</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-->
|
||
</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 流程监控-抽屉-->
|
||
|
||
</div><!--app-container-->
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'apply',
|
||
data() {
|
||
return {
|
||
drawer1: false,
|
||
drawer2: false,
|
||
activeName1: 'first',
|
||
activeName2: 'second',
|
||
radio1: '',
|
||
tableData1: [
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '进行中',
|
||
prop3: '直接领导审核',
|
||
prop4: '赵宇',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '已办结',
|
||
prop3: '直接领导审核',
|
||
prop4: '钱多多',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '进行中',
|
||
prop3: '直接领导审核',
|
||
prop4: '赵宇',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '已办结',
|
||
prop3: '直接领导审核',
|
||
prop4: '钱多多',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '进行中',
|
||
prop3: '直接领导审核',
|
||
prop4: '赵宇',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '已办结',
|
||
prop3: '直接领导审核',
|
||
prop4: '钱多多',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '进行中',
|
||
prop3: '直接领导审核',
|
||
prop4: '赵宇',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '已办结',
|
||
prop3: '直接领导审核',
|
||
prop4: '钱多多',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '进行中',
|
||
prop3: '直接领导审核',
|
||
prop4: '赵宇',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
},
|
||
{
|
||
prop1: '使用申请',
|
||
prop2: '已办结',
|
||
prop3: '直接领导审核',
|
||
prop4: '钱多多',
|
||
prop5: '2024/02/09 12:00',
|
||
prop6: '2024/02/09 12:00',
|
||
}
|
||
],
|
||
tableData2: [
|
||
{
|
||
prop1: '0021',
|
||
prop2: '工具名称1',
|
||
prop3: '人力资源部/培训组',
|
||
prop4: '赵宇',
|
||
prop5: '网络工具',
|
||
},
|
||
{
|
||
prop1: '0022',
|
||
prop2: '工具名称2',
|
||
prop3: '人力资源部/招聘组',
|
||
prop4: '钱多多',
|
||
prop5: '网络工具',
|
||
},
|
||
{
|
||
prop1: '0023',
|
||
prop2: '工具名称3',
|
||
prop3: '人力资源部/薪资组',
|
||
prop4: '孙瑶',
|
||
prop5: '网络工具',
|
||
}
|
||
],
|
||
tableData3: [
|
||
{
|
||
prop1: '部门领导审核',
|
||
prop2: '张宇',
|
||
prop3: '管理员审核 ',
|
||
prop4: '赵定',
|
||
prop5: '同意',
|
||
prop6: '2024/02/09 12:00',
|
||
prop7: '2024/02/09 12:03',
|
||
prop8: '耗时0天',
|
||
prop9: '已完成',
|
||
},
|
||
{
|
||
prop1: '管理员审核',
|
||
prop2: '赵定',
|
||
prop3: '直接领导审核 ',
|
||
prop4: '钱多多',
|
||
prop5: '同意',
|
||
prop6: '2024/02/09 12:00',
|
||
prop7: '2024/02/09 12:03',
|
||
prop8: '耗时0天',
|
||
prop9: '已完成',
|
||
}
|
||
],
|
||
tableData4: [
|
||
{
|
||
prop1: '部门领导审核',
|
||
prop2: '张宇',
|
||
prop3: '管理员审核 ',
|
||
prop4: '赵定',
|
||
prop5: '同意',
|
||
prop6: '2024/02/09 12:00',
|
||
prop7: '2024/02/09 12:03',
|
||
prop8: '耗时0天',
|
||
prop9: '已完成',
|
||
},
|
||
{
|
||
prop1: '管理员审核',
|
||
prop2: '赵定',
|
||
prop3: '直接领导审核 ',
|
||
prop4: '钱多多',
|
||
prop5: '同意',
|
||
prop6: '2024/02/09 12:00',
|
||
prop7: '2024/02/09 12:03',
|
||
prop8: '耗时0天',
|
||
prop9: '已完成',
|
||
}
|
||
],
|
||
}
|
||
},
|
||
methods: {
|
||
getClassName(prop2) {
|
||
// 根据不同的文本内容返回不同的类名
|
||
if (prop2 === '进行中') {
|
||
return 'blue';
|
||
} else if (prop2 === '已办结') {
|
||
return 'green';
|
||
}else if (prop2 === '不通过') {
|
||
return 'red';
|
||
} else if (prop2 === '通过') {
|
||
return 'green';
|
||
}
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|