millionfor
5 years ago
committed by
GitHub
18 changed files with 599 additions and 126 deletions
@ -0,0 +1,46 @@
|
||||
<template> |
||||
<x-select |
||||
@on-change="_onChange" |
||||
v-model="value" |
||||
style="width: 180px"> |
||||
<x-option |
||||
v-for="item in workerGroupsList" |
||||
:key="item.id" |
||||
:value="item.id" |
||||
:label="item.name"> |
||||
</x-option> |
||||
</x-select> |
||||
</template> |
||||
<script> |
||||
import disabledState from '@/module/mixin/disabledState' |
||||
export default { |
||||
name: 'form-worker-group', |
||||
data () { |
||||
return { |
||||
workerGroupsList: [] |
||||
} |
||||
}, |
||||
mixins: [disabledState], |
||||
props: { |
||||
value: Number |
||||
}, |
||||
model: { |
||||
prop: 'value', |
||||
event: 'workerGroupsEvent' |
||||
}, |
||||
methods: { |
||||
_onChange (o) { |
||||
this.value = o.value |
||||
this.$emit('workerGroupsEvent', o.value) |
||||
} |
||||
}, |
||||
watch: { |
||||
}, |
||||
created () { |
||||
this.workerGroupsList = this.store.state.security.workerGroupsListAll || [] |
||||
if (!this.value) { |
||||
this.$emit('workerGroupsEvent', this.workerGroupsList[0].id) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,109 @@
|
||||
.form-model-model { |
||||
width: 720px; |
||||
position: relative; |
||||
.title-box { |
||||
height: 61px; |
||||
border-bottom: 1px solid #DCDEDC; |
||||
position: relative; |
||||
.name { |
||||
position: absolute; |
||||
left: 24px; |
||||
top: 18px; |
||||
font-size: 16px; |
||||
} |
||||
.go-subtask { |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 17px; |
||||
a { |
||||
font-size: 14px; |
||||
color: #0097e0; |
||||
margin-left: 10px; |
||||
i.iconfont { |
||||
font-size: 18px; |
||||
vertical-align: middle; |
||||
} |
||||
em { |
||||
color: #333; |
||||
vertical-align: middle; |
||||
font-style: normal; |
||||
vertical-align: middle; |
||||
padding-left: 2px; |
||||
} |
||||
&:hover { |
||||
em { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.bottom-box { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: right; |
||||
height: 60px; |
||||
line-height: 60px; |
||||
border-top: 1px solid #DCDEDC; |
||||
background: #fff; |
||||
.submit { |
||||
padding-right: 20px; |
||||
position: relative; |
||||
z-index: 9; |
||||
} |
||||
} |
||||
.content-box { |
||||
overflow-y: scroll; |
||||
height: calc(100vh - 61px); |
||||
padding-bottom: 60px; |
||||
} |
||||
} |
||||
.from-model { |
||||
padding-top: 26px; |
||||
>div { |
||||
clear: both; |
||||
} |
||||
.list { |
||||
position: relative; |
||||
margin-bottom: 10px; |
||||
.text-box { |
||||
width: 112px; |
||||
float: left; |
||||
text-align: right; |
||||
margin-right: 8px; |
||||
>span { |
||||
font-size: 14px; |
||||
color: #777; |
||||
display: inline-block; |
||||
padding-top: 6px; |
||||
} |
||||
} |
||||
.cont-box { |
||||
width: 580px; |
||||
float: left; |
||||
.label-box { |
||||
width: 100%; |
||||
} |
||||
.text-b { |
||||
font-size: 14px; |
||||
color: #777; |
||||
display: inline-block; |
||||
padding:0 6px 0 20px; |
||||
} |
||||
} |
||||
.add { |
||||
line-height: 32px; |
||||
a { |
||||
color: #0097e0; |
||||
} |
||||
} |
||||
&:hover { |
||||
} |
||||
.list-t { |
||||
width: 50%; |
||||
float: left; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,118 @@
|
||||
<template> |
||||
<m-popup |
||||
ref="popup" |
||||
:ok-text="item ? $t('Edit') : $t('Submit')" |
||||
:nameText="item ? '编辑Worker分组' : '创建Worker分组'" |
||||
@ok="_ok"> |
||||
<template slot="content"> |
||||
<div class="create-worker-model"> |
||||
<m-list-box-f> |
||||
<template slot="name"><b>*</b>{{$t('Group Name')}}</template> |
||||
<template slot="content"> |
||||
<x-input |
||||
type="input" |
||||
v-model="name" |
||||
:placeholder="$t('Please enter group name')"> |
||||
</x-input> |
||||
</template> |
||||
</m-list-box-f> |
||||
<m-list-box-f> |
||||
<template slot="name">IP</template> |
||||
<template slot="content"> |
||||
<x-input |
||||
:autosize="{ minRows: 4, maxRows: 6 }" |
||||
type="textarea" |
||||
v-model="ipList" |
||||
:placeholder="'请输入IP地址多个用逗号隔开'"> |
||||
</x-input> |
||||
<div class="ipt-tip"> |
||||
<span>注意：多个IP地址已逗号分割</span> |
||||
</div> |
||||
</template> |
||||
</m-list-box-f> |
||||
</div> |
||||
</template> |
||||
</m-popup> |
||||
</template> |
||||
<script> |
||||
import i18n from '@/module/i18n' |
||||
import store from '@/conf/home/store' |
||||
import mPopup from '@/module/components/popup/popup' |
||||
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||
|
||||
export default { |
||||
name: 'create-warning', |
||||
data () { |
||||
return { |
||||
store, |
||||
id: 0, |
||||
name: '', |
||||
ipList: '' |
||||
} |
||||
}, |
||||
props: { |
||||
item: Object |
||||
}, |
||||
methods: { |
||||
_ok () { |
||||
if (this._verification()) { |
||||
// Verify username |
||||
this._submit() |
||||
} |
||||
}, |
||||
_verification () { |
||||
// group name |
||||
if (!this.name) { |
||||
this.$message.warning(`${i18n.$t('Please enter group name')}`) |
||||
return false |
||||
} |
||||
if (!this.ipList) { |
||||
this.$message.warning(`IP地址不能为空`) |
||||
return false |
||||
} |
||||
return true |
||||
}, |
||||
_submit () { |
||||
let param = { |
||||
id: this.id, |
||||
name: this.name, |
||||
ipList: this.ipList |
||||
} |
||||
if (this.item) { |
||||
param.id = this.item.id |
||||
} |
||||
this.$refs['popup'].spinnerLoading = true |
||||
this.store.dispatch(`security/saveWorkerGroups`, param).then(res => { |
||||
this.$emit('onUpdate') |
||||
this.$message.success(res.msg) |
||||
setTimeout(() => { |
||||
this.$refs['popup'].spinnerLoading = false |
||||
}, 800) |
||||
}).catch(e => { |
||||
this.$message.error(e.msg || '') |
||||
this.$refs['popup'].spinnerLoading = false |
||||
}) |
||||
} |
||||
}, |
||||
watch: {}, |
||||
created () { |
||||
if (this.item) { |
||||
this.id = this.item.id |
||||
this.name = this.item.name |
||||
this.ipList = this.item.ipList |
||||
} |
||||
}, |
||||
mounted () { |
||||
}, |
||||
components: { mPopup, mListBoxF } |
||||
} |
||||
</script> |
||||
<style lang="scss" rel="stylesheet/scss"> |
||||
.create-worker-model { |
||||
.ipt-tip { |
||||
color: #999; |
||||
padding-top: 4px; |
||||
display: block; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,119 @@
|
||||
<template> |
||||
<div class="list-model"> |
||||
<div class="table-box"> |
||||
<table> |
||||
<tr> |
||||
<th> |
||||
<span>{{$t('#')}}</span> |
||||
</th> |
||||
<th> |
||||
<span>分组名称</span> |
||||
</th> |
||||
<th> |
||||
<span>IPList</span> |
||||
</th> |
||||
<th> |
||||
<span>{{$t('Create Time')}}</span> |
||||
</th> |
||||
<th> |
||||
<span>{{$t('Update Time')}}</span> |
||||
</th> |
||||
<th width="70"> |
||||
<span>{{$t('Operation')}}</span> |
||||
</th> |
||||
</tr> |
||||
<tr v-for="(item, $index) in list" :key="$index"> |
||||
<td> |
||||
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span> |
||||
</td> |
||||
<td> |
||||
<span> |
||||
<a href="javascript:" class="links">{{item.name}}</a> |
||||
</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.ipList}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.createTime | formatDate}}</span> |
||||
</td> |
||||
<td><span>{{item.updateTime | formatDate}}</span></td> |
||||
<td> |
||||
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" icon="iconfont icon-bianjixiugai" :title="$t('Edit')" @click="_edit(item)"> |
||||
</x-button> |
||||
<x-poptip |
||||
:ref="'poptip-delete-' + $index" |
||||
placement="bottom-end" |
||||
width="90"> |
||||
<p>{{$t('Delete?')}}</p> |
||||
<div style="text-align: right; margin: 0;padding-top: 4px;"> |
||||
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button> |
||||
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button> |
||||
</div> |
||||
<template slot="reference"> |
||||
<x-button type="error" shape="circle" size="xsmall" data-toggle="tooltip" icon="iconfont icon-shanchu" :title="$t('delete')"> |
||||
</x-button> |
||||
</template> |
||||
</x-poptip> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
// import _ from 'lodash' |
||||
// import i18n from '@/module/i18n' |
||||
import { mapActions } from 'vuex' |
||||
import '@/module/filter/formatDate' |
||||
import { findComponentDownward } from '@/module/util/' |
||||
|
||||
export default { |
||||
name: 'user-list', |
||||
data () { |
||||
return { |
||||
list: [] |
||||
} |
||||
}, |
||||
props: { |
||||
workerGroupList: Array, |
||||
pageNo: Number, |
||||
pageSize: Number |
||||
}, |
||||
methods: { |
||||
...mapActions('security', ['deleteWorkerGroups']), |
||||
_closeDelete (i) { |
||||
this.$refs[`poptip-delete-${i}`][0].doClose() |
||||
}, |
||||
_delete (item, i) { |
||||
this.deleteWorkerGroups({ |
||||
id: item.id |
||||
}).then(res => { |
||||
this.$refs[`poptip-delete-${i}`][0].doClose() |
||||
this.list.splice(i, 1) |
||||
this.$message.success(res.msg) |
||||
}).catch(e => { |
||||
this.$refs[`poptip-delete-${i}`][0].doClose() |
||||
this.$message.error(e.msg || '') |
||||
}) |
||||
}, |
||||
_edit (item) { |
||||
findComponentDownward(this.$root, 'worker-groups-index')._create(item) |
||||
} |
||||
}, |
||||
watch: { |
||||
workerGroupList (a) { |
||||
this.list = [] |
||||
setTimeout(() => { |
||||
this.list = a |
||||
}) |
||||
} |
||||
}, |
||||
created () { |
||||
this.list = this.workerGroupList |
||||
}, |
||||
mounted () { |
||||
}, |
||||
components: { } |
||||
} |
||||
</script> |
||||
@ -0,0 +1,114 @@
|
||||
<template> |
||||
<m-list-construction :title="'worker分组管理'"> |
||||
<template slot="conditions"> |
||||
<m-conditions @on-conditions="_onConditions"> |
||||
<template slot="button-group"> |
||||
<x-button type="ghost" size="small" @click="_create('')">创建worker分组</x-button> |
||||
</template> |
||||
</m-conditions> |
||||
</template> |
||||
<template slot="content"> |
||||
<template v-if="workerGroupList.length"> |
||||
<m-list :worker-group-list="workerGroupList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list> |
||||
<div class="page-box"> |
||||
<x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page> |
||||
</div> |
||||
</template> |
||||
<template v-if="!workerGroupList.length"> |
||||
<m-no-data></m-no-data> |
||||
</template> |
||||
<m-spin :is-spin="isLoading"></m-spin> |
||||
</template> |
||||
</m-list-construction> |
||||
</template> |
||||
<script> |
||||
import _ from 'lodash' |
||||
import { mapActions } from 'vuex' |
||||
import mList from './_source/list' |
||||
import mSpin from '@/module/components/spin/spin' |
||||
import mCreateWorker from './_source/createWorker' |
||||
import mNoData from '@/module/components/noData/noData' |
||||
import listUrlParamHandle from '@/module/mixin/listUrlParamHandle' |
||||
import mConditions from '@/module/components/conditions/conditions' |
||||
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||
|
||||
export default { |
||||
name: 'worker-groups-index', |
||||
data () { |
||||
return { |
||||
total: null, |
||||
isLoading: false, |
||||
workerGroupList: [], |
||||
searchParams: { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
searchVal: '' |
||||
} |
||||
} |
||||
}, |
||||
mixins: [listUrlParamHandle], |
||||
props: {}, |
||||
methods: { |
||||
...mapActions('security', ['getWorkerGroups']), |
||||
/** |
||||
* Inquire |
||||
*/ |
||||
_onConditions (o) { |
||||
this.searchParams = _.assign(this.searchParams, o) |
||||
this.searchParams.pageNo = 1 |
||||
}, |
||||
_page (val) { |
||||
this.searchParams.pageNo = val |
||||
}, |
||||
_create (item) { |
||||
let self = this |
||||
let modal = this.$modal.dialog({ |
||||
closable: false, |
||||
showMask: true, |
||||
escClose: true, |
||||
className: 'v-modal-custom', |
||||
transitionName: 'opacityp', |
||||
render (h) { |
||||
return h(mCreateWorker, { |
||||
on: { |
||||
onUpdate () { |
||||
self._debounceGET('false') |
||||
modal.remove() |
||||
}, |
||||
close () { |
||||
modal.remove() |
||||
} |
||||
}, |
||||
props: { |
||||
item: item |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
_getList (flag) { |
||||
this.isLoading = !flag |
||||
this.getWorkerGroups(this.searchParams).then(res => { |
||||
this.workerGroupList = [] |
||||
this.workerGroupList = res.totalList |
||||
this.total = res.total |
||||
this.isLoading = false |
||||
}).catch(e => { |
||||
this.isLoading = false |
||||
}) |
||||
} |
||||
}, |
||||
watch: { |
||||
// router |
||||
'$route' (a) { |
||||
// url no params get instance list |
||||
this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo |
||||
} |
||||
}, |
||||
created () { |
||||
}, |
||||
mounted () { |
||||
}, |
||||
components: { mList, mListConstruction, mConditions, mSpin, mNoData } |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue