feat: Data Base页除去搜索部分
This commit is contained in:
parent
bb55f090ee
commit
5d59dbeff1
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<a-table
|
||||
class="custom-table"
|
||||
v-bind="$attrs"
|
||||
:data-source="list"
|
||||
:columns="columns"
|
||||
|
|
@ -84,4 +85,12 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang=""></style>
|
||||
<style lang="less" scoped>
|
||||
.custom-table {
|
||||
::v-deep {
|
||||
.ant-table-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="search-form">
|
||||
<a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
|
||||
<a-row :gutter="20">
|
||||
<a-row :gutter="20" style="margin-right: 0 !important;">
|
||||
<a-col
|
||||
class="search-form-item"
|
||||
v-for="(item, index) in items"
|
||||
|
|
@ -67,6 +67,7 @@ export default {
|
|||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
margin-bottom: 18px;
|
||||
background-color: rgba(12, 235, 201, .05);
|
||||
&-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
@updateMenuTitle="handleUpdateMenuTitle"
|
||||
/>
|
||||
<div class="global-content">
|
||||
<div class="top-border">
|
||||
<div class="content-top-border">
|
||||
<img src="@/assets/images/content/top.png" alt="">
|
||||
</div>
|
||||
<div class="content-main">
|
||||
<div class="left-border">
|
||||
<div class="content-left-border">
|
||||
<img src="@/assets/images/content/left.png" alt="">
|
||||
</div>
|
||||
<!-- layout content -->
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
<slot></slot>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
<div class="right-border">
|
||||
<div class="content-right-border">
|
||||
<img src="@/assets/images/content/left.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-border">
|
||||
<div class="content-bottom-border">
|
||||
<img src="@/assets/images/content/bottom.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -739,11 +739,11 @@
|
|||
padding-right: 5px;
|
||||
}
|
||||
.has-submenu {
|
||||
height: calc(100% - 56px);
|
||||
height: calc(100% - 65px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-border {
|
||||
.content-top-border {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 0;
|
||||
|
|
@ -753,7 +753,7 @@
|
|||
height: 21px;
|
||||
}
|
||||
}
|
||||
.bottom-border {
|
||||
.content-bottom-border {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
img {
|
||||
|
|
@ -761,22 +761,23 @@
|
|||
height: 21px;
|
||||
}
|
||||
}
|
||||
.left-border {
|
||||
.content-left-border {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
margin-left: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right-border {
|
||||
.content-right-border {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
margin-right: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.left-border,
|
||||
.right-border {
|
||||
.content-left-border,
|
||||
.content-right-border {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
119
src/style.less
119
src/style.less
|
|
@ -12,6 +12,7 @@
|
|||
|
||||
body {
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
|
|
@ -29,7 +30,7 @@ body {
|
|||
padding: 0;
|
||||
color: #fff;
|
||||
}
|
||||
&-body {
|
||||
&-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +110,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
// 日历
|
||||
// 日期选择
|
||||
.ant-calendar {
|
||||
border-color: @formInputBorderColor;
|
||||
border-radius: 0;
|
||||
|
|
@ -163,6 +164,82 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-month {
|
||||
&-panel {
|
||||
background-color: @modalBg;
|
||||
&-header {
|
||||
border-bottom: 1px solid @formInputBorderColor;
|
||||
}
|
||||
&-year-select-content {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 日历
|
||||
.ant-fullcalendar {
|
||||
border-spacing: 0;
|
||||
&-column-header {
|
||||
background-color: #126b82;
|
||||
border-left: 1px solid #126b82 !important;
|
||||
padding: 0 !important;
|
||||
line-height: 34px;
|
||||
&-inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 10px;
|
||||
height: 98px;
|
||||
background-color: rgba(140, 255, 229, .1);
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-date {
|
||||
padding: 20px 10px 10px !important;
|
||||
margin: 0 !important;
|
||||
height: 159px !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
&-value {
|
||||
font-size: 24px;
|
||||
font-family: Arial;
|
||||
color: #ade6ee !important;
|
||||
}
|
||||
|
||||
&-last-month-cell,
|
||||
&-next-month-btn-day {
|
||||
.ant-fullcalendar-value {
|
||||
color: rgba(173, 230, 238, .1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-calendar-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&-cell {
|
||||
border-top: 1px solid #25454e !important;
|
||||
border-left: 1px solid #25454e !important;
|
||||
&:last-child {
|
||||
border-right: 1px solid #25454e !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-tbody {
|
||||
border-bottom: 1px solid #25454e;
|
||||
}
|
||||
|
||||
&-selected-day &-date,
|
||||
&-date:hover {
|
||||
background-color: #072f32 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@formInputBgColor: #03353f;
|
||||
|
|
@ -361,6 +438,14 @@ body {
|
|||
|
||||
// 树形结构
|
||||
.ant-tree {
|
||||
&-checkbox-inner {
|
||||
background-color: #03353f;
|
||||
border-color: #0a544e;
|
||||
border-radius: 0;
|
||||
}
|
||||
&-node-content-wrapper {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮
|
||||
|
|
@ -582,6 +667,32 @@ body {
|
|||
background-color: #15494c !important;
|
||||
}
|
||||
|
||||
// 穿梭框样式
|
||||
.ant-transfer {
|
||||
&-list {
|
||||
border-radius: 0;
|
||||
border-color: #224852;
|
||||
&-header {
|
||||
background-color: #08363c;
|
||||
border-radius: 0;
|
||||
border-bottom-color: #224852;
|
||||
}
|
||||
}
|
||||
&-operation {
|
||||
.ant-btn {
|
||||
background-color: #1397a3;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #fff;
|
||||
&:disabled {
|
||||
background-color: #4f7578;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#userLayout {
|
||||
.container {
|
||||
background-color: @modalBg !important;
|
||||
|
|
@ -607,3 +718,7 @@ body {
|
|||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #15494c !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #15494c;
|
||||
}
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
</search-form>
|
||||
<custom-table
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
rowKey="sampleId"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
:selectedRowKeys.sync="selectedRowKeys"
|
||||
:scroll="{ y: 'calc(100vh - 405px)' }"
|
||||
:scroll="{ x: true, y: 'calc(100vh - 405px)' }"
|
||||
>
|
||||
<template slot="index" slot-scope="{ index }">
|
||||
{{ index + 1 }}
|
||||
|
|
@ -28,80 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
|
||||
const formItems = [
|
||||
{
|
||||
label: 'SampleID',
|
||||
type: 'a-input',
|
||||
name: 'sampleID',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
label: 'Station',
|
||||
type: 'custom-select',
|
||||
name: 'station',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'ALL',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
label: 'Detector',
|
||||
type: 'custom-select',
|
||||
name: 'detector',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'ALL',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
label: 'From',
|
||||
type: 'a-date-picker',
|
||||
name: 'from',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'To',
|
||||
type: 'a-date-picker',
|
||||
name: 'to',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
},
|
||||
style: {
|
||||
paddingRight: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
type: 'a-checkbox-group',
|
||||
props: {
|
||||
options: [
|
||||
{ label: 'Collect Stop', value: 'collectStop' },
|
||||
{ label: 'Acq.Start', value: 'acqDotStart' },
|
||||
{ label: 'SampleData', value: 'sampleData' },
|
||||
{ label: 'AutoResults', value: 'autoResults' },
|
||||
{ label: 'Reviewed Results', value: 'reviewedResults' }
|
||||
]
|
||||
},
|
||||
style: {
|
||||
width: '600px'
|
||||
}
|
||||
}
|
||||
]
|
||||
import { getAction } from '../../api/manage'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -116,30 +43,30 @@ const columns = [
|
|||
title: 'SITE DET CODE',
|
||||
align: 'center',
|
||||
dataIndex: 'siteDetCode',
|
||||
width: 100
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'STATION ID',
|
||||
title: 'SAMPLE ID',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'stationId'
|
||||
dataIndex: 'sampleId'
|
||||
},
|
||||
{
|
||||
title: 'STATION',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'station'
|
||||
dataIndex: 'stationName'
|
||||
},
|
||||
{
|
||||
title: 'DETECTOR',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'detector'
|
||||
dataIndex: 'detectorsName'
|
||||
},
|
||||
{
|
||||
title: 'SAMPLE TYPE',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
width: 120,
|
||||
dataIndex: 'sampleType'
|
||||
},
|
||||
{
|
||||
|
|
@ -158,20 +85,67 @@ const columns = [
|
|||
title: 'QUALIFIE',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'qualifie'
|
||||
dataIndex: 'spectralQualifie'
|
||||
},
|
||||
{
|
||||
title: 'TRANSMIT DTG',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
width: 150,
|
||||
dataIndex: 'transmitDtg'
|
||||
},
|
||||
{
|
||||
title: 'COLLECT START',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
dataIndex: 'collectStart'
|
||||
},
|
||||
{
|
||||
title: 'COLLECT STOP',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
dataIndex: 'collectStop'
|
||||
},
|
||||
{
|
||||
title: 'ACQ.START',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
dataIndex: 'acquisitionStart'
|
||||
},
|
||||
{
|
||||
title: 'ACQ.STOP',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
dataIndex: 'acquisitionStop'
|
||||
},
|
||||
{
|
||||
title: 'ACQ.REAL(S)',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'acquisitionRealSec'
|
||||
},
|
||||
{
|
||||
title: 'ACQ.LIVE(S)',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'acquisitionLiveSec'
|
||||
},
|
||||
{
|
||||
title: 'QUANTITY',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'quantity'
|
||||
},
|
||||
{
|
||||
title: 'STATUS',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'status'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [JeecgListMixin],
|
||||
data() {
|
||||
this.formItems = formItems
|
||||
this.columns = columns
|
||||
return {
|
||||
queryParam: {
|
||||
|
|
@ -179,12 +153,54 @@ export default {
|
|||
detector: ''
|
||||
},
|
||||
url: {
|
||||
list: '/sys/user/list',
|
||||
delete: ''
|
||||
}
|
||||
list: '/gardsSampleData/findPage',
|
||||
delete: '/gardsSampleData/deleteById'
|
||||
},
|
||||
stationList: [],
|
||||
detectorList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getStationList()
|
||||
this.getDetectorList()
|
||||
},
|
||||
methods: {
|
||||
async getStationList() {
|
||||
try {
|
||||
const { success, result, message } = await getAction('/gardsStations/findPage', {
|
||||
pageIndex: 1,
|
||||
pageSize: 10000
|
||||
})
|
||||
if (success) {
|
||||
this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
async getDetectorList() {
|
||||
try {
|
||||
const { success, result, message } = await getAction('/gardsDetectors/findPage', {
|
||||
pageIndex: 1,
|
||||
pageSize: 10000
|
||||
})
|
||||
if (success) {
|
||||
this.detectorList = result.records.map(record => ({ label: record.detectorCode, value: record.detectorId }))
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
|
||||
onDel() {
|
||||
if (this.selectedRowKeys && this.selectedRowKeys.length) {
|
||||
this.$confirm({
|
||||
|
|
@ -192,13 +208,96 @@ export default {
|
|||
okText: 'OK',
|
||||
cancelText: 'Cancel',
|
||||
onOk: () => {
|
||||
this.handleDelete(this.selectedRowKeys[0])
|
||||
this.handleDelete(this.selectedRowKeys[0], 'sampleId')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warn('Please Select An Item To Delete')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formItems() {
|
||||
return [
|
||||
{
|
||||
label: 'SampleID',
|
||||
type: 'a-input',
|
||||
name: 'sampleID',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
label: 'Station',
|
||||
type: 'custom-select',
|
||||
name: 'stationId',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'ALL',
|
||||
value: ''
|
||||
},
|
||||
...this.stationList
|
||||
],
|
||||
showSearch: true,
|
||||
filterOption: this.filterOption
|
||||
},
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
label: 'Detector',
|
||||
type: 'custom-select',
|
||||
name: 'detectorId',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'ALL',
|
||||
value: ''
|
||||
},
|
||||
...this.detectorList
|
||||
],
|
||||
showSearch: true,
|
||||
filterOption: this.filterOption
|
||||
},
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
label: 'From',
|
||||
type: 'a-date-picker',
|
||||
name: 'from',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'To',
|
||||
type: 'a-date-picker',
|
||||
name: 'to',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
},
|
||||
style: {
|
||||
paddingRight: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
type: 'a-checkbox-group',
|
||||
props: {
|
||||
options: [
|
||||
{ label: 'Collect Stop', value: 'collectStop' },
|
||||
{ label: 'Acq.Start', value: 'acqDotStart' },
|
||||
{ label: 'SampleData', value: 'sampleData' },
|
||||
{ label: 'AutoResults', value: 'autoResults' },
|
||||
{ label: 'Reviewed Results', value: 'reviewedResults' }
|
||||
]
|
||||
},
|
||||
style: {
|
||||
width: '600px'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user