Commit 5dc80d7e authored by miaojiale's avatar miaojiale

修改页面去除view-design,兼容不同窗口比例

parent f0d29149
...@@ -36,7 +36,6 @@ ...@@ -36,7 +36,6 @@
"qrcodejs2": "^0.0.2", "qrcodejs2": "^0.0.2",
"qs": "^6.9.4", "qs": "^6.9.4",
"screenfull": "^5.0.2", "screenfull": "^5.0.2",
"view-design": "^4.7.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-count-to": "^1.0.13", "vue-count-to": "^1.0.13",
"vue-router": "^3.3.4", "vue-router": "^3.3.4",
......
<template>
<div id="customTable">
<Table
:columns="tableHeader"
:height="600"
:data="tableData"
:loading="loading"
></Table>
<div style="margin: 10px">
<Page
:total="page.total"
:current="page.current"
show-elevator
:page-size="page.size"
show-sizer
show-total
class="fr"
@on-change="changePage"
@on-page-size-change="changePageSize"
></Page>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
props: {
tableHeader: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
page: {
type: Object,
default: () => {},
},
},
data() {
return {
loading: false,
fontSize: ["12px", "14px", "16px"],
}
},
computed: {
...mapGetters({
fontIndex: "table/fontIndex",
}),
},
watch: {
fontIndex: {
handler(v) {
this.$nextTick(() => {
document.querySelector(".ivu-table").style.fontSize = this.fontSize[
this.fontIndex
]
})
},
immediate: true,
deep: true,
},
},
mounted() {},
methods: {
changePage(v) {
this.loading = true
// this.current = v
let obj = {
type: "current",
value: v,
}
this.$emit("changePage", obj)
},
changePageSize(v) {
let obj = {
type: "size",
value: v,
}
this.$emit("changePage", obj)
},
},
}
</script>
<style lang="scss" scoped>
#customTable {
margin-top: 20px;
width: 100%;
// background: pink;
flex: 1;
}
::v-deep {
th .ivu-table-cell {
white-space: nowrap;
}
.ivu-table-wrapper {
border-color: #eff0f3;
.ivu-table-header,
.ivu-table-fixed-header {
thead {
height: 60px;
background: #f6f6f6;
}
}
}
.ivu-page-item-active {
background: #1890ff;
a {
color: #fff;
}
}
.ivu-page-options {
// display: flex;
.ivu-select-selection {
border-radius: 6px;
border: 1px solid #d9d9d9;
}
}
.ivu-page-options-elevator {
// display: flex;
input {
width: 50px;
}
}
}
</style>
<template>
<el-row class="el-table-self">
<el-table
:max-height="maxHeight || maxTableHeight"
:height="tableHeight"
ref="selftab"
v-loading="listLoading"
:data="tableData"
:show-overflow-tooltip="true"
:highlight-current-row="highLight"
:header-row-class-name="headerClass"
style="width: 100%"
>
<template v-for="(column, index) in columns">
<template v-if="!column.type && !column.operType">
<el-table-column
:key="column.value"
:show-overflow-tooltip="true"
:fixed="column.fixed"
:prop="column.value"
:label="column.label"
:width="column.width"
:min-width="column.minWidth"
align="center"
:sortable="column.sortable"
:formatter="column.formatter"
:class-name="column.className"
:label-class-name="column.labelClassName"
>
<!-- 表头插槽 -->
<template slot="header" slot-scope="scope">
<span :style="{ fontSize: fontSize[fontIndex] }">{{
column.label
}}</span>
</template>
<!-- 表内容插槽 -->
<template slot-scope="scope">
<span :style="{ fontSize: fontSize[fontIndex] }">
{{ scope.row[column.value] }}</span
>
</template>
</el-table-column>
</template>
<template v-else>
<el-table-column
:key="index"
:fixed="column.fixed"
:prop="column.value"
:label="column.label"
:sortable="column.sortable"
:width="column.width"
:min-width="column.minWidth"
align="center"
>
<!-- 表头插槽 -->
<template slot="header" slot-scope="scope">
<span :style="{ fontSize: fontSize[fontIndex] }">{{
column.label
}}</span>
</template>
<!-- 表内容插槽 -->
<template slot-scope="scope">
<!-- 按钮 -->
<template
v-if="column.type === 'button' || column.operType === 'button'"
>
<!-- 按钮数组 -->
<template v-for="(op, opIndex) in column.operations">
<el-button
:key="opIndex"
:disabled="
op.formatter ? op.formatter(scope.row).disabled : false
"
:style="{ fontSize: fontSize[fontIndex] }"
:type="
op.formatter
? op.formatter(scope.row).type
: op.type || ''
"
:icon="op.icon"
@click="op.func(scope.row, scope.$index)"
>
{{
op.formatter
? op.formatter(scope.row).label
: op.label
? op.label
: scope.row[column.value]
}}
</el-button>
</template>
</template>
<!-- html -->
<template v-if="column.type === 'html'">
<div v-html="scope.row[column.value]" class="highlight"></div>
</template>
</template>
</el-table-column>
</template>
</template>
</el-table>
<!-- 分页 -->
<div v-if="pageSize && totalCounts > 0" class="pagination-footer">
<!-- <span class="description">{{ description }}</span> -->
<el-pagination
background
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCounts"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</el-row>
</template>
<script>
import resize from "../TabComponents/resize.js"
import { mapGetters } from "vuex"
export default {
props: {
tableHeight: Number, // 表格的高度
maxHeight: Number, // 表格的最大高度
listLoading: Boolean, // table 加载层
pageSizes: Array, // 决定每页显示的条数[10,15,20,25]
pageSize: Number,
totalCount: [Number, String], // 表格数据总数
currentPage: { type: Number, default: 1 },
highLight: { type: Boolean, default: true },
headerClass: { type: String, default: "default" }, // 头部背景色Class名称,默认default
columns: Array, // 表格列配置数据,{vlaue:对应数据对象中的属性,label:对应的是标题文字,fixed:列是否固定,width:列宽, sortable:是否可排序,formatter:列格式化, className:对应的是列的样式类名}
tableData: Array, // 表格数据
},
mixins: [resize],
data() {
return {
fontSize: ["12px", "14px", "16px"],
}
},
computed: {
...mapGetters({
fontIndex: "table/fontIndex",
}),
totalCounts() {
return this.totalCount - 0
},
},
watch: {},
mounted() {},
methods: {
// 切换页面显示条数
handleSizeChange(val) {
this.$emit("pageSizeChange", val)
},
// 跳转页码
handleCurrentChange(val) {
this.$emit("currentPageChange", val)
},
},
}
</script>
<style lang="scss" scoped>
.el-table__empty-block {
position: relative;
min-height: 60px;
text-align: center;
width: 100%;
height: 100%;
}
.el-table__empty-text {
position: absolute;
left: 50%;
width: 110px;
height: 110px;
top: 50%;
line-height: 220px;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #5e7382;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
...@@ -206,11 +206,10 @@ ...@@ -206,11 +206,10 @@
:style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }" :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
@click="changeModified" @click="changeModified"
> >
<Icon <i
:style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }" :style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
type="md-checkmark" class="el-icon-check"
class="check" ></i>
/>
<span :style="{ color: modifiedFlag ? '#fff' : '#000' }" <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
>待修改({{ btn.tobeModified }}</span >待修改({{ btn.tobeModified }}</span
> >
...@@ -369,7 +368,7 @@ export default { ...@@ -369,7 +368,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.check { .el-icon-check {
font-size: 18px; font-size: 18px;
margin-right: 8px; margin-right: 8px;
} }
......
<template> <template>
<div style="min-width: 1440px; overflow: overlay"> <div style="min-width: 1440px; overflow: overlay">
<Layout> <header class="layout-header">
<Header class="layout-header">
<div class="logotitle"> <div class="logotitle">
<div class="leftLogo"></div> <div class="leftLogo"></div>
<div class="rightText"> <div class="rightText">
...@@ -11,33 +10,37 @@ ...@@ -11,33 +10,37 @@
<div v-if="!allianceToken" class="login"> <div v-if="!allianceToken" class="login">
<div class="login_title text-center"> <div class="login_title text-center">
筛查随访数据库登录 筛查随访数据库登录
<Form ref="form" :model="form" :rules="rules" inline> <el-form
<FormItem prop="username" label="登录名:"> ref="form"
<Input label-position="top"
:model="form"
label-suffix=":"
label-width="100%"
:rules="rules"
>
<el-form-item prop="username" label="登录名">
<el-input
v-model="form.username" v-model="form.username"
type="text"
placeholder="请输入登录名" placeholder="请输入登录名"
> ></el-input>
</Input> </el-form-item>
</FormItem> <el-form-item prop="password" label="密码">
<FormItem prop="password" label="密码:"> <el-input
<Input
v-model="form.password" v-model="form.password"
type="password" type="password"
placeholder="请输入密码" placeholder="请输入密码"
> ></el-input>
</Input> </el-form-item>
</FormItem> <el-form-item>
<FormItem> <el-button
<Button
type="primary" type="primary"
class="login_button" class="login_button"
:loading="loading" :loading="loading"
@click="handleSubmit('form')" @click="handleSubmit('form')"
>登录</Button >登录</el-button
> >
</FormItem> </el-form-item>
</Form> </el-form>
</div> </div>
</div> </div>
<div v-if="allianceToken" class="userInfo"> <div v-if="allianceToken" class="userInfo">
...@@ -45,29 +48,32 @@ ...@@ -45,29 +48,32 @@
<div class="text">欢迎,LIXid胡</div> <div class="text">欢迎,LIXid胡</div>
<div class="exit" @click="logout">退出</div> <div class="exit" @click="logout">退出</div>
</div> </div>
</Header> </header>
<div class="sider"> <div class="sider">
<Menu mode="horizontal" :active-name="currentRoute" class="siderMenu"> <el-menu
<MenuItem mode="horizontal"
:default-active="currentRoute"
class="siderMenu"
router
>
<el-menu-item
v-for="(item, index) in menuList" v-for="(item, index) in menuList"
:key="index" :key="index"
:name="item.route" :index="item.route"
:to="item.route"
style="width: 10%; text-align: center; min-width: 120px" style="width: 10%; text-align: center; min-width: 120px"
> >
{{ item.name }} {{ item.name }}
</MenuItem> </el-menu-item>
</Menu> </el-menu>
</div> </div>
<Content style="overflow: hidden; padding: 32px 10%; background: #f3f3f3"> <section style="overflow: hidden; padding: 32px 10%; background: #f3f3f3">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<router-view></router-view> <router-view></router-view>
</transition> </transition>
</Content> </section>
<Footer class="layout-footer-center text-center" <footer class="layout-footer-center text-center">
>copyright@ 联盟信息等</Footer copyright@ 联盟信息等
> </footer>
</Layout>
</div> </div>
</template> </template>
<script> <script>
...@@ -184,7 +190,7 @@ export default { ...@@ -184,7 +190,7 @@ export default {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
display: flex; display: flex;
padding-right: 10%; padding: 0 10% 0 5%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.logotitle { .logotitle {
...@@ -263,20 +269,14 @@ export default { ...@@ -263,20 +269,14 @@ export default {
width: 100%; width: 100%;
height: 108px; height: 108px;
background: #efefef; background: #efefef;
line-height: 68px; line-height: 108px;
} }
::v-deep { .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.ivu-form { .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
.ivu-form-item { background-color: transparent;
display: block; }
margin-bottom: 10px; .el-form-item {
} text-align: left;
.ivu-form-item-label {
font-size: 14px;
font-family: AlibabaPuHuiTiR;
color: #333333;
}
}
} }
/* fade-transform */ /* fade-transform */
.fade-transform-leave-active, .fade-transform-leave-active,
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div <div
v-if="[0, 1, 2].includes(curSelectedIndex)" v-show="curSelectedIndex != -1"
class="community" class="community"
@click="openModalFlag" @click="openModalFlag"
> >
...@@ -32,12 +32,12 @@ ...@@ -32,12 +32,12 @@
<img src="~@/assets/img/DataCenter/user.png" alt="" /> <img src="~@/assets/img/DataCenter/user.png" alt="" />
<avatar></avatar> <avatar></avatar>
</div> </div>
<Badge :count="messageCount" :class-name="'badge'"> <el-badge :value="messageCount" :class-name="'badge'">
<div class="user"> <div class="user">
<img src="~@/assets/img/DataCenter/message.png" alt="" /> <img src="~@/assets/img/DataCenter/message.png" alt="" />
消息 消息
</div> </div>
</Badge> </el-badge>
</div> </div>
</div> </div>
</template> </template>
...@@ -234,61 +234,5 @@ export default { ...@@ -234,61 +234,5 @@ export default {
} }
} }
} }
// .right-panel {
// display: flex;
// align-content: center;
// align-items: center;
// justify-content: flex-end;
// height: 74px;
// ::v-deep {
// .user-avatar {
// margin-top: 2px;
// margin-right: 5px;
// font-weight: 600;
// cursor: pointer;
// }
// .user-name {
// position: relative;
// margin-right: 35px;
// margin-left: 5px;
// font-weight: 600;
// cursor: pointer;
// }
// .user-name + i {
// position: absolute;
// top: 4px;
// right: 15px;
// }
// svg {
// width: 1em;
// height: 1em;
// margin-right: 20px;
// font-size: $base-font-size-big;
// color: $base-color-gray;
// cursor: pointer;
// fill: $base-color-gray;
// }
// button {
// svg {
// margin-right: 0;
// color: $base-color-white;
// cursor: pointer;
// fill: $base-color-white;
// }
// }
// .el-badge {
// margin-right: 20px;
// padding: 0 5px;
// svg {
// margin-right: 0px;
// }
// }
// }
// }
} }
</style> </style>
...@@ -43,13 +43,13 @@ ...@@ -43,13 +43,13 @@
</div> </div>
</div> </div>
<back-to-top transition-name="fade"></back-to-top> <back-to-top transition-name="fade"></back-to-top>
<Modal <el-dialog
v-model="modalFlag" :title="''"
:mask-closable="false" :visible="modalFlag"
:closable="false" :close-on-click-modal="false"
footer-hide :close-on-press-escape="false"
:show-close="false"
width="70%" width="70%"
:styles="{ minWidth: '1008px' }"
> >
<div class="modalContent"> <div class="modalContent">
<div class="title">请选择您的筛查填报场景</div> <div class="title">请选择您的筛查填报场景</div>
...@@ -82,12 +82,12 @@ ...@@ -82,12 +82,12 @@
</li> </li>
</ul> </ul>
<div class="submit"> <div class="submit">
<Button type="primary" class="btn" @click="setSelectedIndex" <el-button type="primary" class="btn" @click="setSelectedIndex"
>保存</Button >保存</el-button
> >
</div> </div>
</div> </div>
</Modal> </el-dialog>
</div> </div>
</template> </template>
...@@ -324,7 +324,9 @@ export default { ...@@ -324,7 +324,9 @@ export default {
height: calc(100vh - 90px); height: calc(100vh - 90px);
} }
} }
::v-deep .el-dialog__header {
display: none;
}
.modalContent { .modalContent {
padding: 60px; padding: 60px;
.title { .title {
...@@ -363,8 +365,8 @@ export default { ...@@ -363,8 +365,8 @@ export default {
} }
} }
.ItemIamge { .ItemIamge {
width: 268px; width: 90%;
height: 180px; // height: 180px;
margin-top: 14px; margin-top: 14px;
img { img {
width: 100%; width: 100%;
......
...@@ -6,12 +6,9 @@ import store from "./store" ...@@ -6,12 +6,9 @@ import store from "./store"
import router from "./router" import router from "./router"
import "./plugins" import "./plugins"
import "./mixins" import "./mixins"
import iView from "view-design"
import "view-design/dist/styles/iview.css"
import "@/assets/style/common.scss" import "@/assets/style/common.scss"
// const { mockXHR } = require("../mock/static") // const { mockXHR } = require("../mock/static")
// mockXHR() // mockXHR()
Vue.use(iView)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
......
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<video :src="videoSrc" controls class="video" /> <video :src="videoSrc" controls class="video" />
</div> </div>
<div class="right box tabbox"> <div class="right box tabbox">
<Tabs :value="curTab"> <el-tabs v-model="curTab">
<TabPane <el-tab-pane
v-for="(e, index) in tabList" v-for="(e, index) in tabList"
:key="index" :key="index"
:label="e.title" :label="e.title"
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
</div> </div>
</li> </li>
</ul> </ul>
</TabPane> </el-tab-pane>
</Tabs> </el-tabs>
</div> </div>
</div> </div>
<!-- 数据分析 --> <!-- 数据分析 -->
......
...@@ -10,87 +10,86 @@ ...@@ -10,87 +10,86 @@
{{ item }} {{ item }}
</div> </div>
</div> </div>
<custom-table <customs-table
ref="customTable" ref="table"
:table-header="tableHeader"
:table-data="tableData" :table-data="tableData"
:page="page" :columns="columns"
@changePage="changePage" :header-class="'newHeader'"
></custom-table> :list-loading="listLoading"
:current-page="pageIndex"
:total-count="total"
:page-sizes="pageSizes"
:page-size="pageSize"
@pageSizeChange="handleSizeChange"
@currentPageChange="handleCurrentChange"
/>
</div> </div>
</template> </template>
<script> <script>
import CustomTable from "@/components/CustomTable" import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
export default { export default {
// 数据概览 // 数据概览
name: "", name: "",
components: { components: {
CustomTable, CustomsTable,
}, },
mixins: [paginationMixin],
data() { data() {
return { return {
listLoading: false,
selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0, selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0,
headList: ["社区筛查", "医院筛查", "体检筛查"], headList: ["社区筛查", "医院筛查", "体检筛查"],
tableHeader: [ columns: [
{ {
title: "医联体", label: "医联体",
minWidth: 40, minWidth: 120,
key: "name", value: "name",
align: "center",
}, },
{ {
title: "累计上报量", label: "累计上报量",
minWidth: 60, minWidth: 120,
key: "1", value: "1",
align: "center",
}, },
{ {
title: "最近一季度上报量", label: "最近一季度上报量",
minWidth: 96, minWidth: 120,
key: "2", value: "2",
align: "center",
}, },
{ {
title: "累计审核合格量", label: "累计审核合格量",
minWidth: 84, minWidth: 120,
key: "3", value: "3",
align: "center",
}, },
{ {
title: "高风险", label: "高风险",
minWidth: 30, minWidth: 120,
key: "4", value: "4",
align: "center",
}, },
{ {
title: "中风险", label: "中风险",
minWidth: 30, minWidth: 120,
key: "5", value: "5",
align: "center",
}, },
{ {
title: "低风险", label: "低风险",
minWidth: 30, minWidth: 120,
key: "6", value: "6",
align: "center",
}, },
{ {
title: "胃癌", label: "胃癌",
minWidth: 30, minWidth: 120,
key: "7", value: "7",
align: "center",
}, },
{ {
title: "早期胃癌", label: "早期胃癌",
minWidth: 40, minWidth: 120,
key: "8", value: "8",
align: "center",
}, },
{ {
title: "食道癌", label: "食道癌",
minWidth: 30, minWidth: 120,
key: "9", value: "9",
align: "center",
}, },
], ],
tableData: [ tableData: [
...@@ -99,11 +98,6 @@ export default { ...@@ -99,11 +98,6 @@ export default {
1: 2, 1: 2,
}, },
], ],
page: {
current: 1,
size: 10,
total: 20,
},
} }
}, },
watch: {}, watch: {},
...@@ -114,11 +108,6 @@ export default { ...@@ -114,11 +108,6 @@ export default {
this.selectedIndex = i this.selectedIndex = i
sessionStorage.setItem("homeSelectedIndex", this.selectedIndex) sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
}, },
changePage(v) {
this.page[v.type] = v.value
console.log(this.page)
this.$refs.customTable.loading = false
},
}, },
} }
</script> </script>
...@@ -130,6 +119,7 @@ export default { ...@@ -130,6 +119,7 @@ export default {
flex-direction: column; flex-direction: column;
.header { .header {
display: flex; display: flex;
margin-bottom: 20px;
.btn { .btn {
cursor: pointer; cursor: pointer;
width: 112px; width: 112px;
......
...@@ -2,133 +2,169 @@ ...@@ -2,133 +2,169 @@
<div class="screeningSearch"> <div class="screeningSearch">
<div class="top"> <div class="top">
<form-components :forms="formList"></form-components> <form-components :forms="formList"></form-components>
<!-- <div class="keyword">
<div class="label">关键词:</div>
<Input
v-model="keyword"
placeholder="请输入医联体/姓名/身份证"
clearable
style="width: 224px"
/>
<Button class="btn">搜索</Button>
</div> -->
<!-- <div
class="tobeModified"
:style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
@click="changeModified"
>
<Icon
:style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
type="md-checkmark"
class="check"
/>
<span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
>待修改({{ tobeModified }}</span
>
</div> -->
</div> </div>
<div class="bot"> <div class="bot">
<custom-table <customs-table
ref="customTable" ref="table"
:table-header="tableHeader"
:table-data="tableData" :table-data="tableData"
:page="page" :columns="columns"
@changePage="changePage" :header-class="'newHeader'"
></custom-table> :list-loading="listLoading"
:current-page="pageIndex"
:total-count="total"
:page-sizes="pageSizes"
:page-size="pageSize"
@pageSizeChange="handleSizeChange"
@currentPageChange="handleCurrentChange"
/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import CustomTable from "@/components/CustomTable"
import FormComponents from "@/components/FormComponents" import FormComponents from "@/components/FormComponents"
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
export default { export default {
components: { components: {
CustomTable,
FormComponents, FormComponents,
CustomsTable,
}, },
mixins: [paginationMixin],
data() { data() {
return { return {
listLoading: false,
keyword: "", keyword: "",
modifiedFlag: false, modifiedFlag: false,
tableHeader: [ columns: [
{ {
title: "医联体", label: "医联体",
key: "name", minWidth: 120,
align: "center", value: "groupName",
width: 100,
}, },
{ {
title: "姓名", label: "姓名",
width: 100, minWidth: 120,
key: "1", value: "name",
align: "center",
}, },
{ {
title: "性别", label: "性别",
minWidth: 60, minWidth: 120,
key: "2", value: "sex",
align: "center",
}, },
{ {
title: "身份证", label: "身份证",
width: 160, minWidth: 120,
key: "3", value: "idCard",
align: "center",
}, },
{ {
title: "年龄", label: "年龄",
minWidth: 60, minWidth: 120,
align: "center", value: "age",
}, },
{ {
title: "筛查时间", label: "筛查时间",
width: 100, minWidth: 120,
key: "5", value: "screenTime",
align: "center",
}, },
{ {
title: "风险评估结果", label: "风险评估结果",
width: 180, minWidth: 120,
key: "6", value: "result",
align: "center",
}, },
{ {
title: "上次随访时间", label: "上次随访时间",
width: 180, minWidth: 120,
key: "7", value: "targetFieldCode",
align: "center",
}, },
{ {
title: "筛查审核状态", label: "筛查审核状态",
key: "8", minWidth: 180,
minWidth: 140, value: "createTime",
align: "center",
}, },
{ {
title: "操作", label: "操作",
width: 140, width: 220,
key: "action",
fixed: "right", fixed: "right",
align: "center", operType: "button",
render: (h, params) => { operations: [
return h(
"a",
{ {
on: { func: this.rowOpration,
click: () => { formatter(row) {
console.log(params.row) return {
}, label: " 录入",
}, type: "text",
}
}, },
"修改"
)
}, },
],
}, },
], ],
tableData: [ tableData: [
{ {
name: "1", groupName: "第一个",
1: 2, },
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第十个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第一个",
},
{
groupName: "第十个",
},
{
groupName: "第一个",
},
{
groupName: "第er一个",
}, },
], ],
formList: [ formList: [
...@@ -196,15 +232,12 @@ export default { ...@@ -196,15 +232,12 @@ export default {
], ],
}, },
], ],
page: {
current: 1,
size: 10,
total: 20,
},
} }
}, },
watch: {}, watch: {},
mounted() {}, mounted() {
this.total = 20
},
methods: { methods: {
changeModified() { changeModified() {
this.modifiedFlag = !this.modifiedFlag this.modifiedFlag = !this.modifiedFlag
...@@ -214,14 +247,15 @@ export default { ...@@ -214,14 +247,15 @@ export default {
this.selectedIndex = i this.selectedIndex = i
sessionStorage.setItem("homeSelectedIndex", this.selectedIndex) sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
}, },
changePage(v) { handleSizeChange(v) {
this.page[v.type] = v.value console.log(v)
console.log(this.page)
this.$refs.customTable.loading = false
}, },
onSearch() { onSearch() {
console.log(123456) console.log(123456)
}, },
rowOpration(row, index) {
console.log(row, index)
},
}, },
} }
</script> </script>
...@@ -239,4 +273,14 @@ export default { ...@@ -239,4 +273,14 @@ export default {
padding: 0 24px; padding: 0 24px;
} }
} }
::v-deep {
.el-table {
thead {
.newHeader {
height: 60px;
background: #f6f6f6;
}
}
}
}
</style> </style>
...@@ -2,136 +2,105 @@ ...@@ -2,136 +2,105 @@
<div class="screeningSearch"> <div class="screeningSearch">
<div class="top"> <div class="top">
<form-components :forms="formList"></form-components> <form-components :forms="formList"></form-components>
<!-- <div class="keyword">
<div class="label">关键词:</div>
<Input
v-model="keyword"
placeholder="请输入医联体/姓名/身份证"
clearable
style="width: 224px"
/>
<Button class="btn">搜索</Button>
</div> -->
<!-- <div
class="tobeModified"
:style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
@click="changeModified"
>
<Icon
:style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
type="md-checkmark"
class="check"
/>
<span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
>待修改({{ tobeModified }}</span
>
</div> -->
</div> </div>
<div class="bot"> <div class="bot">
<custom-table <customs-table
ref="customTable" ref="table"
:table-header="tableHeader"
:table-data="tableData" :table-data="tableData"
:page="page" :columns="columns"
@changePage="changePage" :header-class="'newHeader'"
></custom-table> :list-loading="listLoading"
:current-page="pageIndex"
:total-count="total"
:page-sizes="pageSizes"
:page-size="pageSize"
@pageSizeChange="handleSizeChange"
@currentPageChange="handleCurrentChange"
/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import CustomTable from "@/components/CustomTable"
import FormComponents from "@/components/FormComponents" import FormComponents from "@/components/FormComponents"
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
export default { export default {
components: { components: {
CustomTable, CustomsTable,
FormComponents, FormComponents,
}, },
mixins: [paginationMixin],
data() { data() {
return { return {
listLoading: false,
keyword: "", keyword: "",
modifiedFlag: false, modifiedFlag: false,
tableHeader: [ columns: [
{ {
title: "医联体", label: "医联体",
key: "name", value: "name",
align: "center", minWidth: 120,
width: 100,
}, },
{ {
title: "姓名", label: "姓名",
width: 100, value: "1",
key: "1", minWidth: 120,
align: "center",
}, },
{ {
title: "性别", label: "性别",
minWidth: 60, value: "2",
ellipsis: true, minWidth: 120,
key: "2",
align: "center",
}, },
{ {
title: "身份证", label: "身份证",
width: 160, value: "3",
key: "3", minWidth: 120,
align: "center",
}, },
{ {
title: "年龄", label: "年龄",
minWidth: 60, minWidth: 120,
align: "center",
}, },
{ {
title: "筛查时间", label: "筛查时间",
width: 100, value: "5",
key: "5", minWidth: 120,
align: "center",
}, },
{ {
title: "风险评估结果", label: "风险评估结果",
width: 180, value: "6",
key: "6", minWidth: 120,
align: "center",
}, },
{ {
title: "上次随访时间", label: "上次随访时间",
width: 180, value: "7",
key: "7", minWidth: 120,
align: "center",
}, },
{ {
title: "随访进度", label: "随访进度",
width: 100, value: "8",
key: "8", minWidth: 120,
align: "center",
}, },
{ {
title: "计划随访时间", label: "计划随访时间",
width: 140, value: "9",
key: "9", minWidth: 120,
ellipsis: true,
align: "center",
}, },
{ {
title: "操作", label: "操作",
width: 80, width: 220,
key: "action", fixed: "right",
// fixed: "right", operType: "button",
ellipsis: true, operations: [
align: "center",
render: (h, params) => {
return h(
"a",
{ {
on: { func: this.rowOpration,
click: () => { formatter(row) {
console.log(params.row) return {
}, label: " 录入",
}, type: "text",
}
}, },
"修改"
)
}, },
],
}, },
], ],
tableData: [ tableData: [
...@@ -209,11 +178,6 @@ export default { ...@@ -209,11 +178,6 @@ export default {
], ],
}, },
], ],
page: {
current: 1,
size: 10,
total: 20,
},
} }
}, },
watch: {}, watch: {},
......
...@@ -2042,11 +2042,6 @@ async-limiter@~1.0.0: ...@@ -2042,11 +2042,6 @@ async-limiter@~1.0.0:
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd" resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ== integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
async-validator@^3.3.0:
version "3.5.2"
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz#68e866a96824e8b2694ff7a831c1a25c44d5e500"
integrity sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==
async-validator@~1.8.1: async-validator@~1.8.1:
version "1.8.5" version "1.8.5"
resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0" resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
...@@ -2203,11 +2198,6 @@ base@^0.11.1: ...@@ -2203,11 +2198,6 @@ base@^0.11.1:
mixin-deep "^1.2.0" mixin-deep "^1.2.0"
pascalcase "^0.1.1" pascalcase "^0.1.1"
batch-processor@1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
batch@0.6.1: batch@0.6.1:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16" resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
...@@ -3655,11 +3645,6 @@ deepmerge@^1.2.0, deepmerge@^1.5.2: ...@@ -3655,11 +3645,6 @@ deepmerge@^1.2.0, deepmerge@^1.5.2:
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ== integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
deepmerge@^2.2.1:
version "2.2.1"
resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
default-gateway@^4.2.0: default-gateway@^4.2.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b" resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
...@@ -3954,13 +3939,6 @@ electron-to-chromium@^1.3.649: ...@@ -3954,13 +3939,6 @@ electron-to-chromium@^1.3.649:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.704.tgz#894205a237cbe0097d63da8f6d19e605dd13ab51" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.704.tgz#894205a237cbe0097d63da8f6d19e605dd13ab51"
integrity sha512-6cz0jvawlUe4h5AbfQWxPzb+8LzVyswGAWiGc32EJEmfj39HTQyNPkLXirc7+L4x5I6RgRkzua8Ryu5QZqc8cA== integrity sha512-6cz0jvawlUe4h5AbfQWxPzb+8LzVyswGAWiGc32EJEmfj39HTQyNPkLXirc7+L4x5I6RgRkzua8Ryu5QZqc8cA==
element-resize-detector@^1.2.0:
version "1.2.4"
resolved "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
dependencies:
batch-processor "1.0.0"
element-ui@^2.15.2: element-ui@^2.15.2:
version "2.15.3" version "2.15.3"
resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.3.tgz#55108ab82a3bcc646e7b0570871c48ba96300652" resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.3.tgz#55108ab82a3bcc646e7b0570871c48ba96300652"
...@@ -6271,11 +6249,6 @@ js-base64@^2.1.9: ...@@ -6271,11 +6249,6 @@ js-base64@^2.1.9:
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
js-calendar@^1.2.3:
version "1.2.3"
resolved "https://registry.npmmirror.com/js-calendar/-/js-calendar-1.2.3.tgz#a583b0644b4e695ba394f344d103dbcc7a7a7d3e"
integrity sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw==
js-cookie@^2.2.1: js-cookie@^2.2.1:
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8" resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
...@@ -6644,11 +6617,6 @@ lodash.memoize@^4.1.2: ...@@ -6644,11 +6617,6 @@ lodash.memoize@^4.1.2:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
lodash.transform@^4.6.0: lodash.transform@^4.6.0:
version "4.6.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0" resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
...@@ -8110,11 +8078,6 @@ pnp-webpack-plugin@^1.6.4: ...@@ -8110,11 +8078,6 @@ pnp-webpack-plugin@^1.6.4:
dependencies: dependencies:
ts-pnp "^1.1.6" ts-pnp "^1.1.6"
popper.js@^1.14.6:
version "1.16.1"
resolved "https://registry.npmmirror.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
portfinder@^1.0.26: portfinder@^1.0.26:
version "1.0.28" version "1.0.28"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
...@@ -10318,11 +10281,6 @@ timsort@^0.3.0: ...@@ -10318,11 +10281,6 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tinycolor2@^1.4.1:
version "1.4.2"
resolved "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
title-case@^2.1.0: title-case@^2.1.0:
version "2.1.1" version "2.1.1"
resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa" resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
...@@ -10774,11 +10732,6 @@ uuid@^3.3.2, uuid@^3.4.0: ...@@ -10774,11 +10732,6 @@ uuid@^3.3.2, uuid@^3.4.0:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
v-click-outside-x@^3.7.1:
version "3.7.1"
resolved "https://registry.npmmirror.com/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz#aa03eaa0e41e44cb5207dcf86c2d9f0dd64084c1"
integrity sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg==
v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0: v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
...@@ -10836,20 +10789,6 @@ vfile@^4.0.0: ...@@ -10836,20 +10789,6 @@ vfile@^4.0.0:
unist-util-stringify-position "^2.0.0" unist-util-stringify-position "^2.0.0"
vfile-message "^2.0.0" vfile-message "^2.0.0"
view-design@^4.7.0:
version "4.7.0"
resolved "https://registry.npmmirror.com/view-design/-/view-design-4.7.0.tgz#98c4ec18ed70d1b58157007f8107a77158334846"
integrity sha512-WRvVRfsZciN0aJYlz+6b1zxs5G8tLFb4OUKOu+PiN0QyIGmdgWVziEyEmioYtJahQpueWiQpRYGzyxrpz3UkWQ==
dependencies:
async-validator "^3.3.0"
deepmerge "^2.2.1"
element-resize-detector "^1.2.0"
js-calendar "^1.2.3"
lodash.throttle "^4.1.1"
popper.js "^1.14.6"
tinycolor2 "^1.4.1"
v-click-outside-x "^3.7.1"
vm-browserify@^1.0.1: vm-browserify@^1.0.1:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment