320 lines
8.5 KiB
Vue
320 lines
8.5 KiB
Vue
<template>
|
|
<a-card :bordered="false">
|
|
<!-- 搜索栏 -->
|
|
<search-form :items="formItems" v-model="queryParam" @search="searchQuery">
|
|
<a-space style="float: right" class="btn-group" slot="additional">
|
|
<a-button @click="onAdd" type="primary">
|
|
<img src="@/assets/images/global/add.png" alt="" />
|
|
Add
|
|
</a-button>
|
|
<a-button @click="onEdit" type="primary">
|
|
<img src="@/assets/images/global/edit.png" alt="" />
|
|
Edit
|
|
</a-button>
|
|
<a-button @click="onDel" type="primary">
|
|
<img src="@/assets/images/global/delete.png" alt="" />
|
|
Delete
|
|
</a-button>
|
|
</a-space>
|
|
</search-form>
|
|
<!-- 搜索栏结束 -->
|
|
<!-- 列表 -->
|
|
<div>
|
|
<custom-table
|
|
size="middle"
|
|
rowKey="detectorId"
|
|
:columns="columns"
|
|
:list="dataSource"
|
|
:pagination="ipagination"
|
|
:loading="loading"
|
|
@change="handleTableChange"
|
|
:selectedRowKeys.sync="selectedRowKeys"
|
|
:scroll="{ y: 'calc(100vh - 365px)' }"
|
|
>
|
|
<template slot="index" slot-scope="{ index }">
|
|
{{ index + 1 }}
|
|
</template>
|
|
<template slot="roles" slot-scope="{ text }">
|
|
<span v-for="role of text" :key="role.id">
|
|
{{ role.roleName }}
|
|
</span>
|
|
</template>
|
|
</custom-table>
|
|
</div>
|
|
<!-- 列表结束 -->
|
|
<!-- 新增/编辑 -->
|
|
<custom-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :width="475" :okHandler="submit">
|
|
<a-form-model
|
|
ref="form"
|
|
layout="horizontal"
|
|
:model="model"
|
|
:rules="rules"
|
|
:colon="false"
|
|
:labelCol="{ style: { width: '115px' } }"
|
|
:wrapperCol="{ style: { width: '300px' } }"
|
|
>
|
|
<a-form-model-item label="Detector Id" prop="detectorId">
|
|
<a-input v-model="model.detectorId" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Detector Code" prop="detectorCode">
|
|
<a-input v-model="model.detectorCode"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Lon" prop="lon">
|
|
<a-input v-model="model.lon" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Lat" prop="lat">
|
|
<a-input v-model="model.lat" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Type" prop="type">
|
|
<a-input v-model="model.type"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Channels" prop="channels">
|
|
<a-input v-model="model.channels" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Rated Efficiency" prop="ratedEfficiency">
|
|
<a-input v-model="model.ratedEfficiency" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Rated Resolution" prop="ratedResolution">
|
|
<a-input v-model="model.ratedResolution" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Ecal Range Max" prop="ecalRangeMax">
|
|
<a-input v-model="model.ecalRangeMax" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Description" prop="description">
|
|
<a-textarea v-model="model.description" :rows="3"></a-textarea>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Moddate" prop="moddate">
|
|
<a-date-picker v-model="model.moddate" :rows="3"></a-date-picker>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Status" prop="status">
|
|
<j-dict-select-tag v-model="model.status" dictCode="STATION_STATUS"></j-dict-select-tag>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</custom-modal>
|
|
<!-- 新增/编辑 结束 -->
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
import FormMixin from '@/mixins/FormMixin'
|
|
import { cloneDeep } from 'lodash'
|
|
import moment from 'moment'
|
|
import { getAction } from '../../api/manage'
|
|
|
|
const columns = [
|
|
{
|
|
title: 'NO',
|
|
align: 'center',
|
|
width: 100,
|
|
scopedSlots: {
|
|
customRender: 'index'
|
|
}
|
|
},
|
|
{
|
|
title: 'DETECTOR ID',
|
|
align: 'center',
|
|
dataIndex: 'detectorId',
|
|
width: 100
|
|
},
|
|
{
|
|
title: 'DETECTOR CODE',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'detectorCode'
|
|
},
|
|
{
|
|
title: 'LON',
|
|
align: 'center',
|
|
width: 80,
|
|
dataIndex: 'lon'
|
|
},
|
|
{
|
|
title: 'LAT',
|
|
align: 'center',
|
|
width: 80,
|
|
dataIndex: 'lat'
|
|
},
|
|
{
|
|
title: 'TYPE',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'type'
|
|
},
|
|
{
|
|
title: 'CHANNELS',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'channels'
|
|
},
|
|
{
|
|
title: 'RATED EFFICIENCY',
|
|
align: 'center',
|
|
width: 120,
|
|
dataIndex: 'ratedEfficiency'
|
|
},
|
|
{
|
|
title: 'RATED RESOLUTION',
|
|
align: 'center',
|
|
width: 120,
|
|
dataIndex: 'ratedResolution'
|
|
},
|
|
{
|
|
title: 'ECAL RANGE MAX',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'ecalRangeMax'
|
|
},
|
|
{
|
|
title: 'DESCRIPTION',
|
|
width: 100,
|
|
dataIndex: 'description'
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'status'
|
|
}
|
|
]
|
|
|
|
export default {
|
|
mixins: [JeecgListMixin, FormMixin],
|
|
data() {
|
|
this.columns = columns
|
|
const validateDetectorCode = (_, value, callback) => {
|
|
if (!value) {
|
|
callback(new Error('Please Enter Detector Code'))
|
|
} else {
|
|
if (value.length > 9) {
|
|
callback(new Error('Detector Code Limit 9'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
queryParam: {},
|
|
rules: {
|
|
detectorId: [{ required: true, message: 'Please Enter Detector Id' }],
|
|
detectorCode: [{ required: true, validator: validateDetectorCode }],
|
|
moddate: [{ required: true, message: 'Please Select Moddate' }]
|
|
},
|
|
url: {
|
|
list: '/gardsDetectors/findPage',
|
|
delete: '/gardsDetectors/deleteById',
|
|
add: '/gardsDetectors/create',
|
|
edit: '/gardsDetectors/update'
|
|
},
|
|
typeList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getTypeList()
|
|
},
|
|
methods: {
|
|
async getTypeList() {
|
|
try {
|
|
const res = await getAction('/gardsDetectors/findType')
|
|
this.typeList = res.filter(item => item).map(item => ({ label: item, value: item }))
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
},
|
|
|
|
filterOption(input, option) {
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
},
|
|
|
|
onAdd() {
|
|
this.isAdd = true
|
|
this.model = {}
|
|
this.visible = true
|
|
},
|
|
onEdit() {
|
|
if (this.selectedRowKeys && this.selectedRowKeys.length) {
|
|
this.isAdd = false
|
|
this.visible = true
|
|
const find = this.dataSource.find(item => item.detectorId === this.selectedRowKeys[0])
|
|
this.model = cloneDeep(find)
|
|
} else {
|
|
this.$message.warn('Please Select An Item To Edit')
|
|
}
|
|
},
|
|
onDel() {
|
|
if (this.selectedRowKeys && this.selectedRowKeys.length) {
|
|
this.$confirm({
|
|
title: 'Do You Want To Delete This Item?',
|
|
okText: 'OK',
|
|
cancelText: 'Cancel',
|
|
onOk: () => {
|
|
this.handleDelete(this.selectedRowKeys[0])
|
|
}
|
|
})
|
|
} else {
|
|
this.$message.warn('Please Select An Item To Delete')
|
|
}
|
|
},
|
|
|
|
beforeSubmit() {
|
|
this.model.moddate = moment(this.model.moddate).format('yyyy-MM-DD HH:mm:ss')
|
|
}
|
|
},
|
|
computed: {
|
|
formItems() {
|
|
return [
|
|
{
|
|
label: 'Detector Code',
|
|
type: 'a-input',
|
|
name: 'detectorCode',
|
|
props: {
|
|
allowClear: true
|
|
},
|
|
style: {
|
|
width: '310px'
|
|
}
|
|
},
|
|
{
|
|
label: 'Type',
|
|
type: 'custom-select',
|
|
name: 'type',
|
|
props: {
|
|
options: this.typeList,
|
|
allowClear: true,
|
|
showSearch: true,
|
|
filterOption: this.filterOption
|
|
},
|
|
style: {
|
|
width: '310px'
|
|
}
|
|
},
|
|
{
|
|
label: 'Status',
|
|
type: 'j-dict-select-tag',
|
|
name: 'status',
|
|
props: {
|
|
dictCode: 'STATION_STATUS',
|
|
getPopupContainer: () => {
|
|
return document.body
|
|
}
|
|
},
|
|
style: {
|
|
width: '310px'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.btn-group {
|
|
img {
|
|
margin-right: 12px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
</style>
|