315 lines
8.2 KiB
Vue
315 lines
8.2 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="stationId"
|
|
: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: '105px' } }"
|
|
:wrapperCol="{ style: { width: '300px' } }"
|
|
autocomplete="off"
|
|
>
|
|
<a-form-model-item label="Station Id" prop="stationId">
|
|
<a-input v-model="model.stationId" type="number"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Station Code" prop="stationCode">
|
|
<a-input v-model="model.stationCode"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Country Code" prop="countryCode">
|
|
<a-input v-model="model.countryCode"></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="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="Elevation" prop="elevation">
|
|
<a-input v-model="model.elevation" 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="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 { getAction } from '../../api/manage'
|
|
|
|
const columns = [
|
|
{
|
|
title: 'NO',
|
|
align: 'center',
|
|
width: 100,
|
|
scopedSlots: {
|
|
customRender: 'index'
|
|
}
|
|
},
|
|
{
|
|
title: 'STATION ID',
|
|
align: 'center',
|
|
dataIndex: 'stationId',
|
|
width: 100
|
|
},
|
|
{
|
|
title: 'STATION CODE',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'stationCode'
|
|
},
|
|
{
|
|
title: 'COUNTRY CODE',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'countryCode'
|
|
},
|
|
{
|
|
title: 'TYPE',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'type'
|
|
},
|
|
{
|
|
title: 'LON',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'lon'
|
|
},
|
|
{
|
|
title: 'LAT',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'lat'
|
|
},
|
|
{
|
|
title: 'ELEVATION',
|
|
width: 100,
|
|
dataIndex: 'elevation'
|
|
},
|
|
{
|
|
title: 'DESCRIPTION',
|
|
width: 100,
|
|
dataIndex: 'description'
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'status'
|
|
}
|
|
]
|
|
|
|
export default {
|
|
mixins: [JeecgListMixin, FormMixin],
|
|
data() {
|
|
this.columns = columns
|
|
const validateStationCode = (_, value, callback) => {
|
|
if (!value) {
|
|
callback(new Error('Please Enter Station Code'))
|
|
} else {
|
|
if (value.length > 5) {
|
|
callback(new Error('Station Code Limit 5 Charactor'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
}
|
|
|
|
const validateCountryCode = (_, value, callback) => {
|
|
if (value && value.length > 2) {
|
|
callback(new Error('Country Code Limit 2 Char'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
queryParam: {},
|
|
rules: {
|
|
stationId: [{ required: true, message: 'Please Enter Station Id' }],
|
|
stationCode: [{ required: true, validator: validateStationCode }],
|
|
countryCode: [{ validator: validateCountryCode }]
|
|
},
|
|
url: {
|
|
list: '/gardsStations/findPage',
|
|
delete: '/gardsStations/deleteById',
|
|
add: '/gardsStations/create',
|
|
edit: '/gardsStations/update'
|
|
},
|
|
countryCodeList: [],
|
|
typeList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getTypeList()
|
|
this.getCountryCodeList()
|
|
},
|
|
methods: {
|
|
async getTypeList() {
|
|
try {
|
|
const res = await getAction('/gardsStations/findType')
|
|
this.typeList = res.filter(item => item).map(item => ({ label: item, value: item }))
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
},
|
|
|
|
async getCountryCodeList() {
|
|
try {
|
|
const res = await getAction('/gardsStations/findCountryCode')
|
|
this.countryCodeList = 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.stationId === 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], 'stationId')
|
|
}
|
|
})
|
|
} else {
|
|
this.$message.warn('Please Select An Item To Delete')
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
formItems() {
|
|
return [
|
|
{
|
|
label: 'Country Code',
|
|
type: 'custom-select',
|
|
name: 'countryCode',
|
|
props: {
|
|
options: this.countryCodeList,
|
|
allowClear: true,
|
|
showSearch: true,
|
|
filterOption: this.filterOption
|
|
},
|
|
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>
|