ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

表格封装2

Browse Source
pull/122/head
lukeyan 2 years ago
parent d912224992
commit 9e61a3bda7
3 changed files with 130 additions and 52 deletions
Show Stats Download Patch File Download Diff File

108
src/components/publicModule/lkyTable.vue
Unescape View File

@ -2,12 +2,7 @@
<template>
<!-- 本组件样式包含表格、分页 -->
<div class="table_pagination_body" :style="table_pagination_style">
<el-table
class="lky_table"
:data="table_data"
:height="table_height"
:cell-style="{ background: 'revert', 'text-align': 'center' }"
>
<el-table class="lky_table" :data="table_data" :height="table_height">
<!-- 是否需要多行选择数据 -->
<el-table-column
v-if="table_select"
@ -37,11 +32,11 @@
:width="val.width"
align="center"
>
<!-- 如果val.picture为ture时，则该列单元格可显示图片 -->
<!-- 如果val.picture为true时，则该列单元格可显示图片 -->
<template v-if="val.picture" #default="{ row }">
<!-- 二级表数据照片 -->
<el-image
:src="row.pic_child"
:src="row[val.prop]"
style="width: 42px; height: 42px"
>
<div slot="error" class="image-slot">
@ -49,6 +44,22 @@
</div>
</el-image>
</template>
<!-- 如果val.color为true时，则该列单元格字颜色按需更改 -->
<template v-else-if="val.color" #default="{ row }">
<div :style="{ color: child_style_change(row[val.prop]) }">
{{ row[val.prop] }}
</div>
</template>
<!-- 如果val.link为true时，则该列单元格文字可点击 -->
<template v-else-if="val.link" #default="{ row }">
<el-link
:underline="false"
type="primary"
@click="table_link(row)"
>
{{ row[val.prop] }}
</el-link>
</template>
</el-table-column>
</template>
</el-table-column>
@ -62,27 +73,19 @@
:width="item.width"
align="center"
>
<!-- 如果item.picture为ture时，则该列单元格可显示图片 -->
<!-- 如果item.picture为true时，则该列单元格可显示图片 -->
<template v-if="item.picture" #default="{ row }">
<el-image
:src="row.pic"
style="width: 42px; height: 42px"
>
<el-image :src="row[item.prop]" style="width: 42px; height: 42px">
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
</div>
</el-image>
</template>
<!-- 如果item.picture_two为ture时，则该列单元格可显示图片 -->
<template v-else-if="item.picture_two" #default="{ row }">
<el-image
:src="row.pic_two"
style="width: 42px; height: 42px"
>
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
<!-- 如果item.color为true时，则该列单元格字颜色按需更改 -->
<template v-else-if="item.color" #default="{ row }">
<div :style="{ color: style_change(row[item.prop]) }">
{{ row[item.prop] }}
</div>
</el-image>
</template>
</el-table-column>
</template>
@ -97,9 +100,17 @@
<el-button
size="small"
class="operation_btn"
v-if="table_operation"
@click="open(scope.row)"
>{{ operation_text }}</el-button
>
<el-button
size="small"
class="operation_btn"
v-if="table_operation_second"
@click="open(scope.row)"
>{{ operation_text_second }}</el-button
>
</template>
</el-table-column>
</el-table>
@ -153,6 +164,16 @@ export default {
type: Boolean,
default: false,
},
// 根据开发需要，二级表头如有要求对单元格文字颜色进行变换，通过该list传达判断条件
child_color_list: {
type: Array,
default: () => [],
},
// 根据开发需要，如有要求对单元格文字颜色进行变换，通过该list传达判断条件
color_list: {
type: Array,
default: () => [],
},
// 单元格名称
table_columns: {
type: Array,
@ -163,6 +184,11 @@ export default {
type: Boolean,
default: false,
},
// 操作单元格是否需要第二个按钮
table_operation_second: {
type: Boolean,
default: false,
},
// 操作单元格表头名
operation_label: {
type: String,
@ -173,6 +199,11 @@ export default {
type: String,
default: "",
},
// 第二个操作单元格按钮名称
operation_text_second: {
type: String,
default: "",
},
// 分页可选页数类型
page_sizes: {
type: Array,
@ -222,13 +253,34 @@ export default {
open(row) {
this.$emit("open_event", row);
},
// 如果二级表格需要展示照片的话
get_child_img_url(row) {
this.$emit("get_child_img_url", row);
// 二级表根据后端返回判断流程状态颜色
child_style_change(val) {
switch (val) {
case this.child_color_list[0]:
return "#3eba75";
case this.child_color_list[1]:
return "#FDA722";
case this.child_color_list[2]:
return "#2eb9ef";
case this.child_color_list[3]:
return "#e55b5b";
}
},
// 根据后端返回判断流程状态颜色
style_change(val) {
switch (val) {
case this.color_list[0]:
return "#3eba75";
case this.color_list[1]:
return "#FDA722";
case this.color_list[2]:
return "#2eb9ef";
case this.color_list[3]:
return "#e55b5b";
}
},
// 如果一级表格需要展示照片的话
get_img_url(row) {
this.$emit("get_img_url", row);
table_link(row) {
this.$emit('table_link',row)
},
// 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
handle_size_change(val) {

2
src/views/applySupermarket/personBack/index.vue
Unescape View File

@ -115,7 +115,7 @@ export default {
res.rows[i].abnormal_num = res.rows[
i
].examinationResultDetail.substring(
res.rows[i].examinationResultDetail.indexOf("正常,") + 3,
res.rows[i].examinationResultDetail.indexOf("正常，") + 3,
res.rows[i].examinationResultDetail.indexOf("人异常")
);
console.log(res.rows[i].abnormal_num);

68
src/views/module/index.vue
Unescape View File

@ -8,14 +8,19 @@
:table_height="table_height"
:table_select="table_select"
:table_index="table_index"
:color_list="color_list"
:child_color_list="child_color_list"
:table_columns="table_columns"
:table_operation="table_operation"
:table_operation_second="table_operation_second"
:operation_label="operation_label"
:operation_text="operation_text"
:operation_text_second="operation_text_second"
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
@table_link="table_link"
@open_event="open_event"
@size_change="size_change"
@num_change="num_change"
@ -26,7 +31,7 @@
export default {
data() {
return {
table_pagination_width: "60",
table_pagination_width: "75",
table_pagination_height: "60",
table_data: [
{
@ -35,8 +40,9 @@ export default {
idcard: "34567",
unit: "最小单位",
level: "一级",
pic_child:'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic_child: "https://t12.baidu.com/it/u=2944858655,3260611328&fm=58",
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
company_level: "审核通过",
},
{
company: "宁波保润石化公司",
@ -44,8 +50,9 @@ export default {
idcard: "34567",
unit: "最小单位",
level: "四级",
pic_child:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic_child: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
company_level: "审核中",
},
{
company: "宁波保润石化公司",
@ -53,8 +60,10 @@ export default {
idcard: "34567",
unit: "最小单位",
level: "一级",
pic_child:'1222.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic: "https://img2.baidu.com/it/u=1735491135,1421708020&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691514000&t=9b750206b13e5b42054a728b0e759fe5",
pic_child: "1222.png",
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
company_level: "审核中",
},
{
company: "宁波保润石化公司",
@ -62,8 +71,10 @@ export default {
idcard: "34567",
unit: "最小单位",
level: "三级",
pic_child:'1222.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic_child: "1222.png",
pic: "https://t7.baidu.com/it/u=1211026933,587530743&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=D9934B90441845C2548365530300D0BA&sec=1691514000&t=0d3b6cf3971e24bff2a9ad9909868a3e",
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
company_level: "预备审核",
},
{
company: "宁波保润石化公司",
@ -71,8 +82,9 @@ export default {
idcard: "34567",
unit: "最小单位",
level: "一级",
pic_child:'1222.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic_child: "1222.png",
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
company_level: "预备审核",
},
{
company: "宁波保润石化公司",
@ -80,14 +92,17 @@ export default {
idcard: "34567",
unit: "最小单位",
level: "二级",
pic:'1000.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic_child:'1222.png',
pic: "1000.png",
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
pic_child: "1222.png",
company_level: "审核驳回",
},
],
table_height: "592", // 表格高度根据实际场景确定高度
table_height: "550", // 表格高度根据实际场景确定高度
table_select: false,
table_index: true,
child_color_list: ["审核驳回", "预备审核", "审核中", "审核通过"],
color_list: ["一级", "二级", "三级", "四级"],
table_columns: [
{
prop: "company_all",
@ -99,7 +114,7 @@ export default {
width: "180",
},
{
prop: "personPic",
prop: "pic_child",
label: "个人照片",
width: "120",
picture: true,
@ -118,6 +133,13 @@ export default {
prop: "unit",
label: "公司单位",
width: "180",
link: true,
},
{
prop: "company_level",
label: "公司次等级",
width: "160",
color: true,
},
],
},
@ -125,6 +147,7 @@ export default {
prop: "level",
label: "公司等级",
width: "80",
color: true,
},
{
prop: "pic",
@ -133,20 +156,22 @@ export default {
picture: true,
},
{
prop: "person_pic",
prop: "pic_two",
label: "个人照片",
width: "100",
picture_two: true,
picture: true,
},
],
table_operation: true,
table_operation_second: true,
operation_label: "操作",
operation_text: "详情",
operation_text_second:'编辑',
page_sizes: [4, 6],
pageSize: 4,
pageNum: 1,
total: 8,
pagination_width: "60",
pagination_width: "75",
};
},
methods: {
@ -157,6 +182,9 @@ export default {
open_event(row) {
console.log("row456", row);
},
table_link(row) {
console.log("row777", row);
},
// 分页--每页多少条
size_change(val) {
this.pageNum = 1;
@ -171,5 +199,3 @@ export default {
},
};
</script>
<style lang="less" scoped>
</style>
Write Preview
Loading…
Cancel
Save