|
@@ -1,189 +1,218 @@
|
|
|
<!-- 综合事项记录 -->
|
|
|
<template>
|
|
|
- <div class='zhsx-box'>
|
|
|
- <div class='zhsx-top'>
|
|
|
- <div>
|
|
|
- <el-tabs v-model='activeName' @tab-click='handleClick'>
|
|
|
- <el-tab-pane v-for='(item,index) in everySystem' :key='index' :label='`${item.label}`' :name='`${item.type}`'>
|
|
|
- <!-- 综合记录事项 -->
|
|
|
- <div v-if='item.type==1'>
|
|
|
- <zhsx-other-table1 ref='tableZhsx1'></zhsx-other-table1>
|
|
|
- </div>
|
|
|
- <!-- 第三方检测事项 -->
|
|
|
- <div v-if='item.type==2'>
|
|
|
- <zhsx-other-table2 ref='tableZhsx2'></zhsx-other-table2>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <div class="zhsx-box">
|
|
|
+ <div class="zhsx-top">
|
|
|
+ <div>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item,index) in everySystem"
|
|
|
+ :key="index"
|
|
|
+ :label="`${item.label}`"
|
|
|
+ :name="`${item.type}`"
|
|
|
+ >
|
|
|
+ <!-- 综合记录事项 -->
|
|
|
+ <div v-if="item.type==1">
|
|
|
+ <zhsx-other-table1 ref="tableZhsx1"></zhsx-other-table1>
|
|
|
</div>
|
|
|
- <div class='zhsx-img' @click='zhsxLog'>
|
|
|
- <img src='../../assets/imgs/zy1.png' alt />
|
|
|
+ <!-- 第三方检测事项 -->
|
|
|
+ <div v-if="item.type==2">
|
|
|
+ <zhsx-other-table2 ref="tableZhsx2"></zhsx-other-table2>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <zhsx-dialog ref='Dialog' :tableData='tableData'></zhsx-dialog>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="zhsx-img" @click="zhsxLog">
|
|
|
+ <img src="../../assets/imgs/zy1.png" alt />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <zhsx-dialog ref="Dialog" :tableData="tableData"></zhsx-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import moment from 'moment'
|
|
|
-import { Select } from 'meri-design'
|
|
|
+import moment from "moment";
|
|
|
+import { Select } from "meri-design";
|
|
|
// import Select from '@/components/Select/Select.vue'
|
|
|
-import ZhsxDialog from './zhsxDialog'
|
|
|
-import zhsxOtherTable1 from './zhsxOtherTable1'
|
|
|
-import zhsxOtherTable2 from './zhsxOtherTable2'
|
|
|
-import { queryZhsxjl } from '@/api/other.js'
|
|
|
+import ZhsxDialog from "./zhsxDialog";
|
|
|
+import zhsxOtherTable1 from "./zhsxOtherTable1";
|
|
|
+import zhsxOtherTable2 from "./zhsxOtherTable2";
|
|
|
+import { queryZhsxjl } from "@/api/other.js";
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activeName: '1',
|
|
|
- tableData: []
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: "1",
|
|
|
+ tableData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: ["everySystem"],
|
|
|
+ components: { ZhsxDialog, Select, zhsxOtherTable1, zhsxOtherTable2 },
|
|
|
+ methods: {
|
|
|
+ zhsxLog() {
|
|
|
+ let params = {
|
|
|
+ getParams: {}
|
|
|
+ };
|
|
|
+ queryZhsxjl(params).then(res => {
|
|
|
+ let arr = [];
|
|
|
+ let newdata = this.compIndex(res.data);
|
|
|
+ //console.log('综合事项弹框', res)
|
|
|
+ this.tableData = newdata || [];
|
|
|
+ // 将tableData中的第三项都设置为相同的数据
|
|
|
+ this.tableData.map(item => {
|
|
|
+ arr.push(item.jlsx);
|
|
|
+ });
|
|
|
+ arr = [...new Set(arr)];
|
|
|
+ this.tableData.map(item => {
|
|
|
+ item.jlsx = arr.join("\n\r");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.$refs.Dialog.open();
|
|
|
},
|
|
|
- props: ['everySystem'],
|
|
|
- components: { ZhsxDialog, Select, zhsxOtherTable1, zhsxOtherTable2 },
|
|
|
- methods: {
|
|
|
- zhsxLog() {
|
|
|
- let params = {
|
|
|
- getParams: {}
|
|
|
- }
|
|
|
- queryZhsxjl(params).then(res => {
|
|
|
- let arr = []
|
|
|
- //console.log('综合事项弹框', res)
|
|
|
- this.tableData = res.data || []
|
|
|
- // 将tableData中的第三项都设置为相同的数据
|
|
|
- this.tableData.map(item => {
|
|
|
- arr.push(item.jlsx)
|
|
|
- })
|
|
|
- arr = [...new Set(arr)]
|
|
|
- this.tableData.map(item => {
|
|
|
- item.jlsx = arr.join('\n\r')
|
|
|
- })
|
|
|
- console.log(' this.tableData', this.tableData)
|
|
|
- })
|
|
|
- this.$refs.Dialog.open()
|
|
|
- },
|
|
|
- handleClick(tab) {
|
|
|
- if (tab.index == '0') {
|
|
|
- this.$refs.tableZhsx1[0].getZhjl()
|
|
|
- } else if (tab.index == '1') {
|
|
|
- this.$refs.tableZhsx2[0].dsfjc()
|
|
|
- }
|
|
|
+ compIndex(ary) {
|
|
|
+ var res = [];
|
|
|
+ ary.sort();
|
|
|
+ var num = 1;
|
|
|
+ for (var i = 0; i < ary.length; ) {
|
|
|
+ var count = 0;
|
|
|
+ for (var j = i; j < ary.length; j++) {
|
|
|
+ if (ary[i]["jcsx"] == ary[j]["jcsx"]) {
|
|
|
+ count++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ res.push([ary[i]["jcsx"], num]);
|
|
|
+ num = num + 1;
|
|
|
+ i += count;
|
|
|
+ }
|
|
|
+ for (var i = 0; i < ary.length; i++) {
|
|
|
+ for (var j = 0; j < res.length; j++) {
|
|
|
+ if (ary[i]["jcsx"] == res[j][0]) {
|
|
|
+ ary[i]["num"] = res[j][1];
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ return ary
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.$refs.tableZhsx1[0].getZhjl()
|
|
|
- }
|
|
|
-}
|
|
|
+ handleClick(tab) {
|
|
|
+ if (tab.index == "0") {
|
|
|
+ this.$refs.tableZhsx1[0].getZhjl();
|
|
|
+ } else if (tab.index == "1") {
|
|
|
+ this.$refs.tableZhsx2[0].dsfjc();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$refs.tableZhsx1[0].getZhjl();
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.zhsx-box {
|
|
|
- height: 100%;
|
|
|
- padding: 66px 50px 38px 50px;
|
|
|
- .zhsx-top {
|
|
|
- position: relative;
|
|
|
- .zhsx-img {
|
|
|
- position: absolute;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- left: 260px;
|
|
|
- top: 3px;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .tab-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ padding: 66px 50px 38px 50px;
|
|
|
+ .zhsx-top {
|
|
|
+ position: relative;
|
|
|
+ .zhsx-img {
|
|
|
+ position: absolute;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ left: 260px;
|
|
|
+ top: 3px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .zhsx-bottom {
|
|
|
- margin-top: 12px;
|
|
|
- background: #ffffff;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 73px;
|
|
|
- .footer {
|
|
|
- height: 32px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-top: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .zhsx-bottom {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 73px;
|
|
|
+ .footer {
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
.zhsx-box {
|
|
|
- .el-dialog__header {
|
|
|
- padding: 16px 50px;
|
|
|
- }
|
|
|
- .el-dialog__title {
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .el-dialog__body {
|
|
|
- padding: 0 24px;
|
|
|
- height: 90%;
|
|
|
- }
|
|
|
- .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
|
|
|
- .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
|
|
|
- .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
|
|
|
- .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
|
|
- padding-left: 16px;
|
|
|
- }
|
|
|
- .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
|
|
|
- .el-tabs--bottom .el-tabs__item.is-top:last-child,
|
|
|
- .el-tabs--top .el-tabs__item.is-bottom:last-child,
|
|
|
- .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
- padding-right: 16px;
|
|
|
- }
|
|
|
- .el-tabs__nav-wrap::after {
|
|
|
- height: 0;
|
|
|
- }
|
|
|
- .el-tabs__item {
|
|
|
- padding: 5px 16px;
|
|
|
- height: 30px;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- border: 1px solid rgba(195, 199, 203, 1);
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- /deep/.el-tabs__item:nth-child(2) {
|
|
|
- border-radius: 4px 0 0 4px;
|
|
|
- }
|
|
|
- /deep/.el-tabs__item:last-child {
|
|
|
- border-radius: 0 4px 4px 0;
|
|
|
- }
|
|
|
- .el-tabs,
|
|
|
- .el-tabs__content {
|
|
|
- height: 94%;
|
|
|
- }
|
|
|
- .el-tabs__active-bar {
|
|
|
- background-color: transparent !important;
|
|
|
- }
|
|
|
- .is-active {
|
|
|
- color: #025baa;
|
|
|
- border-color: #025baa;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- .el-tabs__header {
|
|
|
- margin: 0 0 12px;
|
|
|
- }
|
|
|
- .el-table td,
|
|
|
- .el-table th {
|
|
|
- padding: 8px 0;
|
|
|
- }
|
|
|
- .el-input--suffix .el-input__inner {
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
- @media screen and (max-width: 1366px) {
|
|
|
- /deep/ .el-table td {
|
|
|
- padding: 3px 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 16px 50px;
|
|
|
+ }
|
|
|
+ .el-dialog__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0 24px;
|
|
|
+ height: 90%;
|
|
|
+ }
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
|
|
|
+ .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
|
|
|
+ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-top:last-child,
|
|
|
+ .el-tabs--top .el-tabs__item.is-bottom:last-child,
|
|
|
+ .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
+ padding-right: 16px;
|
|
|
+ }
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ .el-tabs__item {
|
|
|
+ padding: 5px 16px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ /deep/.el-tabs__item:nth-child(2) {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ /deep/.el-tabs__item:last-child {
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ }
|
|
|
+ .el-tabs,
|
|
|
+ .el-tabs__content {
|
|
|
+ height: 94%;
|
|
|
+ }
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ color: #025baa;
|
|
|
+ border-color: #025baa;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .el-tabs__header {
|
|
|
+ margin: 0 0 12px;
|
|
|
+ }
|
|
|
+ .el-table td,
|
|
|
+ .el-table th {
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ .el-input--suffix .el-input__inner {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1366px) {
|
|
|
+ /deep/ .el-table td {
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|