DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流程中心表格列渲染bug修改，自适应宽度

Browse Source
This commit is contained in:
yuekuo
2023-04-14 16:18:19 +08:00
parent 4ed0752b86
commit f4da0e5edb
4 changed files with 253 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/userCenter/processCenter/finishProcess.vue
+58 -114
View File
@@ -1,129 +1,73 @@
<template> <template>
<div> <div>
<el-table <el-table :data="tableData" style="width: 100%" border
:data="tableData" :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
style="width: 100%" <el-table-column prop="processId" label="流程编号" align="center">
border </el-table-column>
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}" <el-table-column prop="processName" label="流程名称" align="center">
> </el-table-column>
<el-table-column <el-table-column prop="processPerson" label="发起人" align="center">
prop="processId" </el-table-column>
label="流程编号" <el-table-column prop="now" label="当前处理人" align="center">
width="150" </el-table-column>
align="center" <el-table-column prop="last" label="上一处理人" align="center">
> </el-table-column>
</el-table-column> <el-table-column prop="createTime" label="创建时间" sortable align="center">
<el-table-column </el-table-column>
prop="processName" <el-table-column prop="endTime" label="完成时间" sortable align="center">
label="流程名称" </el-table-column>
<el-table-column prop="status" label="状态" align="center">
align="center" </el-table-column>
> <el-table-column label="操作" width="120" align="center">
</el-table-column> <template slot-scope="scope">
<el-table-column <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
prop="processPerson" 查看
label="发起人" </el-button>
width="220" </template>
align="center" </el-table-column>
</el-table>
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope">
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:'finishProcess', name: 'finishProcess',
data() { data() {
return { return {
tableData: [{ tableData: [{
processId: '2016-05-1', processId: '2016-05-1',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1' createTime: '2023-1-1'
}, { }, {
processId: '2016-05-2', processId: '2016-05-2',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2' createTime: '2023-1-2'
}, { }, {
processId: '2016-05-3', processId: '2016-05-3',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3' createTime: '2023-1-3'
}, { }, {
processId: '2016-05-4', processId: '2016-05-4',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4' createTime: '2023-1-4'
}] }]
} }
}, },
methods: { methods: {
view(){ view() {
alert(111) alert(111)
}, },
} }
} }
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
}
</style> </style>
src/views/userCenter/processCenter/gencyProcess.vue
+63 -86
View File
@@ -1,96 +1,73 @@
<template> <template>
<div> <div>
<el-table <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
:data="tableData" background: '#DFE6EC',
style="width: 100%" fontWeight: '700',
border color: '#1F2D3D',
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}" }">
> <el-table-column prop="processId" label="流程编号" align="center">
<el-table-column
prop="processId"
label="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
align="left"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="390"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="260"
sortable
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope">
<el-button
@click.native.prevent="handle(scope.$index, tableData)"
type="text"
size="small">
办理
</el-button>
</template>
</el-table-column> </el-table-column>
</el-table> <el-table-column prop="processName" label="流程名称" align="left">
</div> </el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
办理
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'gencyProcess', name: "gencyProcess",
data() { data() {
return { return {
tableData: [{ tableData: [
processId: '2016-05-1', {
processName: '王小虎', processId: "2016-05-1",
processPerson: '上海市普陀区金沙江路 1518 弄', processName: "王小虎",
createTime:'2023-1-1' processPerson: "上海市普陀区金沙江路 1518 弄",
}, { createTime: "2023-1-1",
processId: '2016-05-2', },
processName: '王小虎', {
processPerson: '上海市普陀区金沙江路 1518 弄', processId: "2016-05-2",
createTime:'2023-1-2' processName: "王小虎",
}, { processPerson: "上海市普陀区金沙江路 1518 弄",
processId: '2016-05-3', createTime: "2023-1-2",
processName: '王小虎', },
processPerson: '上海市普陀区金沙江路 1518 弄', {
createTime:'2023-1-3' processId: "2016-05-3",
}, { processName: "王小虎",
processId: '2016-05-4', processPerson: "上海市普陀区金沙江路 1518 弄",
processName: '王小虎', createTime: "2023-1-3",
processPerson: '上海市普陀区金沙江路 1518 弄', },
createTime:'2023-1-4' {
}] processId: "2016-05-4",
} processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-4",
},
],
};
},
methods: {
handle() {
alert(111);
}, },
methods: { },
handle(){ };
alert(111)
}
}
}
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
}
</style> </style>
src/views/userCenter/processCenter/monitorProcesses.vue
+58 -116
View File
@@ -1,130 +1,72 @@
<template> <template>
<div> <div>
<el-table <el-table :data="tableData" style="width: 100%" border
:data="tableData" :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
style="width: 100%" <el-table-column prop="processId" label="流程编号" align="center">
border </el-table-column>
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}" <el-table-column prop="processName" label="流程名称" align="center">
> </el-table-column>
<el-table-column <el-table-column prop="processPerson" label="发起人" align="center">
prop="processId" </el-table-column>
label="流程编号" <el-table-column prop="now" label="当前处理人" align="center">
</el-table-column>
align="center" <el-table-column prop="last" label="上一处理人" align="center">
> </el-table-column>
</el-table-column> <el-table-column prop="createTime" label="创建时间" sortable align="center">
<el-table-column </el-table-column>
prop="processName" <el-table-column prop="endTime" label="完成时间" sortable align="center">
label="流程名称" </el-table-column>
width="220" <el-table-column prop="status" label="状态" align="center">
align="center" </el-table-column>
> <el-table-column label="操作" width="120" align="center">
</el-table-column> <template slot-scope="scope">
<el-table-column <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
prop="processPerson" 查看
label="发起人" </el-button>
width="220" </template>
align="center" </el-table-column>
</el-table>
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope" >
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small"
>
<span>查看</span>
</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:'monitorProcess', name: 'monitorProcess',
data() { data() {
return { return {
tableData: [{ tableData: [{
processId: '2016-05-1', processId: '2016-05-1',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1' createTime: '2023-1-1'
}, { }, {
processId: '2016-05-2', processId: '2016-05-2',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2' createTime: '2023-1-2'
}, { }, {
processId: '2016-05-3', processId: '2016-05-3',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3' createTime: '2023-1-3'
}, { }, {
processId: '2016-05-4', processId: '2016-05-4',
processName: '王小虎', processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄', processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4' createTime: '2023-1-4'
}] }]
} }
}, },
methods: { methods: {
view(){ view() {
alert(111) alert(111)
} }
} }
} }
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
::v-deep .el-table__fixed,.el-table__fixed-right ::before{
height: 0px !important;
}
</style> </style>
src/views/userCenter/processCenter/sentProcess.vue
+73 -129
View File
@@ -1,145 +1,89 @@
<template> <template>
<div> <div>
<el-table <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
:data="tableData" background: '#DFE6EC',
style="width: 100%" fontWeight: '700',
border color: '#1F2D3D',
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}" }">
> <el-table-column prop="processId" label="流程编号" align="center">
<el-table-column </el-table-column>
prop="processId" <el-table-column prop="processName" label="流程名称" align="center">
label="流程编号" </el-table-column>
width="150" <el-table-column prop="processPerson" label="发起人" align="center">
align="center" </el-table-column>
> <el-table-column prop="now" label="当前处理人" align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="last" label="上一处理人" align="center">
prop="processName" </el-table-column>
label="流程名称" <el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column prop="endTime" label="完成时间" sortable align="center">
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
查看
</el-button>
align="center" <el-button @click.native.prevent="back(scope.$index, tableData)" type="text" size="small"
> style="color: rgb(236, 128, 141)">
</el-table-column> 强制撤回
<el-table-column </el-button>
prop="processPerson" </template>
label="发起人" </el-table-column>
width="220" </el-table>
align="center"
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope" >
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small"
>
<span>查看</span>
</el-button>
<el-button
@click.native.prevent="back(scope.$index, tableData)"
type="text"
size="small"
>
<span>强制撤回</span>
</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:'sentProcess', name: "sentProcess",
data() { data() {
return { return {
tableData: [{ tableData: [
processId: '2016-05-1', {
processName: '王小虎', processId: "2016-05-1",
processPerson: '上海市普陀区金沙江路 1518 弄', processName: "王小虎",
createTime:'2023-1-1' processPerson: "上海市普陀区金沙江路 1518 弄",
}, { createTime: "2023-1-1",
processId: '2016-05-2', },
processName: '王小虎', {
processPerson: '上海市普陀区金沙江路 1518 弄', processId: "2016-05-2",
createTime:'2023-1-2' processName: "王小虎",
}, { processPerson: "上海市普陀区金沙江路 1518 弄",
processId: '2016-05-3', createTime: "2023-1-2",
processName: '王小虎', },
processPerson: '上海市普陀区金沙江路 1518 弄', {
createTime:'2023-1-3' processId: "2016-05-3",
}, { processName: "王小虎",
processId: '2016-05-4', processPerson: "上海市普陀区金沙江路 1518 弄",
processName: '王小虎', createTime: "2023-1-3",
processPerson: '上海市普陀区金沙江路 1518 弄', },
createTime:'2023-1-4' {
}] processId: "2016-05-4",
} processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-4",
},
],
};
}, },
methods: { methods: {
view(){ view() {
alert(111) alert(111);
}, },
back(){ back() {
alert(222) alert(222);
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.slot{ ::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
} }
</style> </style>