orgin 2023-05-16 09:33:59 +08:00
commit d61cb58da7
15 changed files with 856 additions and 37 deletions

View File

@ -1,5 +1,5 @@
NODE_ENV=development
VUE_APP_API_BASE_URL=http://localhost:8080/jeecg-boot
VUE_APP_API_BASE_URL=http://182.92.183.230:8080/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

View File

@ -55,13 +55,13 @@ export default {
// /
customRow(record) {
return {
class: this.innerSelectedRowKeys.includes(record.id) ? 'ant-table-row-selected' : '',
class: this.innerSelectedRowKeys.includes(record[this.rowKey]) ? 'ant-table-row-selected' : '',
on: {
click: () => {
if (this.innerSelectedRowKeys.includes(record.id)) {
if (this.innerSelectedRowKeys.includes(record[this.rowKey])) {
this.innerSelectedRowKeys = []
} else {
this.innerSelectedRowKeys = [record.id]
this.innerSelectedRowKeys = [record[this.rowKey]]
}
this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
}

View File

@ -2,7 +2,13 @@
<div class="search-form">
<a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
<a-row :gutter="20">
<a-col class="search-form-item" v-for="(item, index) in items" :key="index" :span="item.span || 6">
<a-col
class="search-form-item"
v-for="(item, index) in items"
:key="index"
:span="item.span || 6"
:style="item.style"
>
<a-form-model-item :label="item.label" :prop="item.name" :labelCol="item.labelCol">
<component :is="item.type" v-bind="item.props" v-model="formModel[item.name]" v-on="item.on"></component>
</a-form-model-item>

View File

@ -39,4 +39,9 @@
}
},
}
</script>
</script>
<style lang="less" scoped>
.main {
height: 100%;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<global-layout @dynamicRouterShow="dynamicRouterShow">
<div>
<div style="height: 100%;">
<!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
<keep-alive v-if="multipage">
<router-view v-if="reloadFlag"/>

View File

@ -727,11 +727,13 @@
overflow: hidden;
.ant-layout-content {
flex: 1;
overflow: hidden;
margin-top: 34px;
margin-bottom: 34px;
.real-content {
height: 100%;
overflow: hidden auto;
padding-right: 5px;
}
.has-submenu {
height: calc(100% - 56px);
@ -766,7 +768,14 @@
width: 3px;
height: 100%;
margin-right: 14px;
margin-left: 10px;
margin-left: 5px;
}
.left-border,
.right-border {
img {
height: 100%;
}
}
}
</style>

View File

@ -54,6 +54,8 @@ import { rules } from '@/utils/rules'
import SearchForm from '@/components/SearchForm'
import CustomSelect from '@/components/CustomSelect'
import CustomTable from '@/components/CustomTable'
import CustomModal from '@/components/CustomModal'
Vue.prototype.rules = rules
Vue.config.productionTip = false
@ -71,6 +73,7 @@ Vue.use(VueAreaLinkage);
Vue.component('search-form', SearchForm)
Vue.component('custom-select', CustomSelect)
Vue.component('custom-table', CustomTable)
Vue.component('custom-modal', CustomModal)
SSO.init(() => {
main()

View File

@ -1,7 +1,47 @@
import { postAction, putAction } from '@/api/manage'
export default {
data() {
return {
visible: false,
isAdd: false,
model: {}
}
},
methods: {
async submit() {
if (!this.$refs.form) {
throw new Error('form表单引用为空')
}
if (!(this.url && this.url.add && this.url.edit)) {
throw new Error('链接配置为空')
}
await this.$refs.form.validate()
if (this.beforeSubmit && typeof this.beforeSubmit === 'function') {
this.beforeSubmit()
}
let method = putAction
let url = this.url.edit
let successMsg = 'Edit Success'
let failMsg = 'Edit Fail'
if (this.isAdd) {
method = postAction
url = this.url.add
successMsg = 'Add Success'
failMsg = 'Add Fail'
}
const { success, message } = await method(url, this.model)
if (success) {
this.$message.success(successMsg)
this.loadData()
} else {
this.$message.error(failMsg)
throw new Error(message)
}
}
},
watch: {
visible(val) {
if(val && this.$refs.form) {
if (val && this.$refs.form) {
this.$refs.form.resetFields()
}
}

View File

@ -198,13 +198,13 @@ export const JeecgListMixin = {
});
}
},
handleDelete: function (id) {
handleDelete: function (id, propertyName) {
if(!this.url.delete){
this.$message.error("请设置url.delete属性!")
return
}
var that = this;
deleteAction(that.url.delete, {id: id}).then((res) => {
deleteAction(that.url.delete, {[propertyName || 'id']: id}).then((res) => {
if (res.success) {
//重新计算分页问题
that.reCalculatePage(1)

View File

@ -25,7 +25,11 @@ body {
// 卡片样式
.ant-card {
background-color: transparent;
.ant-card-body {
&-head {
padding: 0;
color: #fff;
}
&-body {
padding: 0;
}
}
@ -34,12 +38,13 @@ body {
.ant-table {
color: #ade6ee;
&-thead {
tr {
> tr {
th {
background-color: #126b82 !important;
color: #fff;
padding: 6px 8px !important;
border-bottom: none;
border-radius: 0 !important;
}
}
}
@ -174,6 +179,14 @@ body {
&:focus {
box-shadow: none;
}
&-number {
background-color: transparent;
}
&-group {
&-addon {
background-color: transparent;
}
}
}
// 单选样式
@ -394,16 +407,19 @@ body {
}
&-item {
width: 26px;
min-width: 26px;
height: 26px !important;
line-height: 26px !important;
border-radius: 50%;
border-radius: 13px;
&-active {
background-color: #00bded;
a {
color: #fff !important;
}
}
&-ellipsis {
color: #ade6ee !important;
}
}
.ant-pagination-item-link {
@ -517,8 +533,24 @@ body {
}
}
.ant-notification {
&-notice {
background-color: @modalBg;
&-message {
color: #fff;
}
}
}
// 抽屉
.ant-drawer {
&-header {
background-color: @modalBg;
}
&-title,
&-close {
color: #fff;
}
&-content {
background-color: @modalBg;
}
@ -547,12 +579,22 @@ body {
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #15494c !important;
}
::-webkit-scrollbar-track {
background-color: #011b1f;
background-color: #15494c !important;
}
::-webkit-scrollbar-thumb {
background-color: #007f9a;
background-color: #007f9a !important;
}
::-webkit-scrollbar-button {
background-color: #15494c !important;
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #15494c !important;
}

View File

@ -1,7 +1,12 @@
<template>
<div>
<search-form :items="formItems" v-model="queryParam" @search="searchQuery">
<div style="float: right" class="btn-group" slot="additional"></div>
<div style="float: right" class="btn-group" slot="additional">
<a-button type="primary" @click="onDel">
<img src="@/assets/images/global/delete.png" alt="" />
Delete
</a-button>
</div>
</search-form>
<custom-table
size="middle"
@ -12,6 +17,7 @@
:loading="loading"
@change="handleTableChange"
:selectedRowKeys.sync="selectedRowKeys"
:scroll="{ y: 'calc(100vh - 405px)' }"
>
<template slot="index" slot-scope="{ index }">
{{ index + 1 }}
@ -74,6 +80,9 @@ const formItems = [
props: {
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm'
},
style: {
paddingRight: 0
}
},
{
@ -87,6 +96,9 @@ const formItems = [
{ label: 'AutoResults', value: 'autoResults' },
{ label: 'Reviewed Results', value: 'reviewedResults' }
]
},
style: {
width: '600px'
}
}
]
@ -167,11 +179,35 @@ export default {
detector: ''
},
url: {
list: '/sys/user/list'
list: '/sys/user/list',
delete: ''
}
}
},
methods: {
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')
}
}
}
}
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.btn-group {
img {
margin-right: 12px;
height: 18px;
}
}
</style>

View File

@ -0,0 +1,252 @@
<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' } }"
autocomplete="off"
>
<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'
const formItems = []
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: 100,
dataIndex: 'lon'
},
{
title: 'LAT',
align: 'center',
width: 100,
dataIndex: 'lat'
},
{
title: 'TYPE',
align: 'center',
width: 100,
dataIndex: 'type'
},
{
title: 'CHANNELS',
align: 'center',
width: 100,
dataIndex: 'channels'
},
{
title: 'RATED_EFFICIENCY',
width: 100,
dataIndex: 'ratedEfficiency'
},
{
title: 'RATED_RESOLUTION',
width: 100,
dataIndex: 'ratedResolution'
},
{
title: 'ECAL_RANGE_MAX',
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.formItems = formItems
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: {
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'
}
}
},
methods: {
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')
}
}
}
</script>
<style lang="less" scoped>
.btn-group {
img {
margin-right: 12px;
height: 18px;
}
}
</style>

View File

@ -0,0 +1,186 @@
<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="facilityId"
: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' } }"
>
<a-form-model-item label="Facility Name" prop="facilityName">
<a-input v-model="model.facilityName"></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="Location" prop="location">
<a-input v-model="model.location"></a-input>
</a-form-model-item>
<a-form-model-item label="Longitude" prop="longitude">
<a-input v-model="model.longitude"></a-input>
</a-form-model-item>
<a-form-model-item label="Latitude" prop="latitude">
<a-input v-model="model.latitude"></a-input>
</a-form-model-item>
<a-form-model-item label="Status" prop="status">
<j-dict-select-tag v-model="model.status" dictCode="NUCLEARFACILITY_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'
const formItems = []
const columns = [
{
title: 'NO',
align: 'center',
width: 100,
scopedSlots: {
customRender: 'index'
}
},
{
title: 'FACILITY ID',
align: 'center',
dataIndex: 'facilityId',
width: 100
},
{
title: 'FACILITY NAME',
align: 'center',
width: 100,
dataIndex: 'facilityName'
},
{
title: 'TYPE',
align: 'center',
width: 100,
dataIndex: 'type'
},
{
title: 'LOCATION',
align: 'center',
width: 100,
dataIndex: 'location'
},
{
title: 'LONGITUDE',
align: 'center',
width: 100,
dataIndex: 'longitude'
},
{
title: 'LATITUDE',
align: 'center',
width: 100,
dataIndex: 'latitude'
},
{
title: 'STATUS',
align: 'center',
width: 100,
dataIndex: 'status'
}
]
export default {
mixins: [JeecgListMixin, FormMixin],
data() {
this.formItems = formItems
this.columns = columns
return {
queryParam: {},
rules: {
facilityName: [{ required: true, message: 'Please Enter Facility Name' }]
},
url: {
list: '/gardsNuclearfacility/findPage',
delete: '/gardsNuclearfacility/deleteById',
add: '/gardsNuclearfacility/create',
edit: '/gardsNuclearfacility/update'
}
}
},
methods: {
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.id === this.selectedRowKeys[0])
this.model = cloneDeep(find)
} else {
this.$message.warn('Please Select An Item To Edit')
}
},
onDel() {}
}
}
</script>
<style lang="less" scoped>
.btn-group {
img {
margin-right: 12px;
height: 18px;
}
}
</style>

View File

@ -33,10 +33,16 @@
: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>
<!-- 列表结束 -->
@ -50,6 +56,7 @@
:labelCol="{ style: { width: '80px' } }"
:wrapperCol="{ style: { width: '300px' } }"
autocomplete="off"
:colon="false"
>
<a-form-model-item label="User" prop="username">
<a-input v-model="accountModel.username"></a-input>
@ -58,7 +65,7 @@
<a-input type="text" v-model="accountModel.realname"></a-input>
</a-form-model-item>
<a-form-model-item label="Role">
<custom-select :options="roleOptions" mode="multiple" v-model="accountModel.selectedroles"></custom-select>
<custom-select :options="roleOptions" mode="multiple" v-model="accountModel.selectedRoles"></custom-select>
</a-form-model-item>
<a-form-model-item label="E-Mail">
<a-input v-model="accountModel.email"></a-input>
@ -74,7 +81,6 @@
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CustomModal from '@/components/CustomModal'
import { queryall, addUser, editUser, changePassword } from '@/api/api'
import { cloneDeep } from 'lodash'
import FormMixin from '@/mixins/FormMixin'
@ -82,9 +88,6 @@ import FormMixin from '@/mixins/FormMixin'
export default {
name: 'UserList',
mixins: [JeecgListMixin, FormMixin],
components: {
CustomModal
},
data() {
return {
queryParam: {
@ -115,7 +118,10 @@ export default {
title: 'ROLE',
align: 'center',
width: 100,
dataIndex: 'roleCode'
dataIndex: 'roles',
scopedSlots: {
customRender: 'roles'
}
},
{
title: 'PHONE',
@ -182,8 +188,9 @@ export default {
this.isAdd = false
const find = this.dataSource.find(item => item.id === this.selectedRowKeys[0])
this.accountModel = cloneDeep(find)
this.accountModel.selectedRoles = this.accountModel.roles.map(role => role.id)
} else {
this.$message.warn('Please select an item you want to edit')
this.$message.warn('Please Select An Item To Edit')
}
},
@ -191,7 +198,8 @@ export default {
async onSubmit() {
await this.$refs.form.validate()
const request = this.isAdd ? addUser : editUser
const { success, message } = await request(this.accountModel)
const selectedroles = this.accountModel.selectedRoles.join(',')
const { success, message } = await request(Object.assign({ selectedroles }, this.accountModel))
if (success) {
this.$message.success(`${this.isAdd ? 'Add' : 'Edit'} Success`)
this.loadData()
@ -203,7 +211,7 @@ export default {
onDel() {
if (this.selectedRowKeys && this.selectedRowKeys.length) {
this.$confirm({
title: 'Do you want to delete this item?',
title: 'Do You Want To Delete This Item?',
okText: 'OK',
cancelText: 'Cancel',
onOk: () => {
@ -211,30 +219,29 @@ export default {
}
})
} else {
this.$message.warn('Please select an item you want to delete')
this.$message.warn('Please Select An Item To Delete')
}
},
handleReset() {
if (this.selectedRowKeys && this.selectedRowKeys.length) {
const find = this.dataSource.find(item => item.id === this.selectedRowKeys[0])
this.$confirm({
title: 'Do you want to reset password?',
title: 'Do You Want To Reset Password?',
okText: 'OK',
cancelText: 'Cancel',
onOk: async () => {
const { success, message } = await changePassword({
username: find.username
})
if(success) {
if (success) {
this.$message.success('Reset Success')
}
else {
} else {
this.$message.error('Reset Fail')
}
}
})
} else {
this.$message.warn('Please select an item you want to reset password')
this.$message.warn('Please Select An Item To Reset')
}
}
},

View File

@ -1,3 +1,236 @@
<template>
<div>日志管理警页面</div>
</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 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'
const formItems = []
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.formItems = formItems
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: {
stationCode: [{ required: true, validator: validateStationCode }],
countryCode: [{ validator: validateCountryCode }]
},
url: {
list: '/gardsStations/findPage',
delete: '/gardsStations/deleteById',
add: '/gardsStations/create',
edit: '/gardsStations/update'
}
}
},
methods: {
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')
}
}
}
}
</script>
<style lang="less" scoped>
.btn-group {
img {
margin-right: 12px;
height: 18px;
}
}
</style>