346 lines
11 KiB
Vue
346 lines
11 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!--工具栏-->
|
||
<div class="head-container">
|
||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||
<crudOperation :permission="permission">
|
||
<!-- <el-button
|
||
slot="right"
|
||
class="filter-item"
|
||
size="mini"
|
||
type="primary"
|
||
icon="el-icon-refresh"
|
||
@click="reload"
|
||
>
|
||
{{ $t('auto.common.synchronous') }}
|
||
</el-button> -->
|
||
</crudOperation>
|
||
<!--表单组件-->
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
:before-close="crud.cancelCU"
|
||
:visible.sync="crud.status.cu"
|
||
:title="crud.status.title"
|
||
width="650px"
|
||
>
|
||
<el-form
|
||
ref="form"
|
||
:model="form"
|
||
:rules="rules"
|
||
size="small"
|
||
label-width="160px"
|
||
>
|
||
<el-form-item
|
||
v-if="false"
|
||
label="id标识"
|
||
>
|
||
<el-input v-model="form.id" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('regional.table.origin_region')"
|
||
prop="start_regional"
|
||
>
|
||
<!-- <el-input v-model="form.start_regional" :disabled="crud.status.edit" style="width: 370px;" /> -->
|
||
<el-select
|
||
v-model="form.start_regional"
|
||
filterable
|
||
clearable
|
||
reserve-keyword
|
||
:placeholder="$t('auto.common.please')"
|
||
style="width: 370px;"
|
||
>
|
||
<el-option
|
||
v-for="item in deviceRegion"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('regional.table.target_region')"
|
||
>
|
||
<!-- <el-input v-model="form.next_regional" :disabled="crud.status.edit" style="width: 370px;" /> prop="next_regional" -->
|
||
<el-select
|
||
v-model="form.next_regional"
|
||
filterable
|
||
clearable
|
||
reserve-keyword
|
||
:placeholder="$t('auto.common.please')"
|
||
style="width: 370px;"
|
||
>
|
||
<el-option
|
||
v-for="item in deviceRegion"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('regional.table.origin_region_excluded_devices')"
|
||
>
|
||
<el-select
|
||
v-model="form.startExcludeDevice"
|
||
filterable
|
||
clearable
|
||
reserve-keyword
|
||
multiple
|
||
:placeholder="$t('auto.common.please')"
|
||
style="width: 370px;"
|
||
>
|
||
<el-option
|
||
v-for="item in deviceList"
|
||
:key="item.device_code"
|
||
:label="item.device_code"
|
||
:value="item.device_code"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('regional.table.target_region_excluded_devices')"
|
||
>
|
||
<el-select
|
||
v-model="form.nextExcludeDevice"
|
||
filterable
|
||
clearable
|
||
reserve-keyword
|
||
multiple
|
||
:placeholder="$t('auto.common.please')"
|
||
style="width: 370px;"
|
||
>
|
||
<el-option
|
||
v-for="item in deviceList"
|
||
:key="item.device_code"
|
||
:label="item.device_code"
|
||
:value="item.device_code"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('regional.table.maximum_quantity')"
|
||
prop="max_num"
|
||
>
|
||
<el-input v-model="form.max_num" style="width: 370px;" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="text" @click="crud.cancelCU">{{ $t('task.select.Cancel') }}</el-button>
|
||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">{{ $t('task.select.Confirm') }}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!--表格渲染-->
|
||
<el-table
|
||
ref="table"
|
||
v-loading="crud.loading"
|
||
:data="crud.data"
|
||
size="small"
|
||
style="width: 100%;"
|
||
@selection-change="crud.selectionChangeHandler"
|
||
>
|
||
<el-table-column type="selection" width="55" />
|
||
<el-table-column
|
||
v-if="false"
|
||
prop="id"
|
||
label="id标识"
|
||
/>
|
||
<el-table-column
|
||
prop="start_regional"
|
||
:label="$t('regional.table.origin_region')"
|
||
:min-width="flexWidth('start_regional',crud.data,$t('regional.table.origin_region'))"
|
||
/>
|
||
<el-table-column
|
||
prop="next_regional"
|
||
:label="$t('regional.table.target_region')"
|
||
:min-width="flexWidth('next_regional',crud.data,$t('regional.table.target_region'))"
|
||
/>
|
||
<el-table-column
|
||
prop="start_exclude_device"
|
||
:label="$t('regional.table.origin_region_excluded_devices')"
|
||
:min-width="flexWidth('start_exclude_device',crud.data,$t('regional.table.origin_region_excluded_devices'))"
|
||
/>
|
||
<el-table-column
|
||
prop="next_exclude_device"
|
||
:label="$t('regional.table.target_region_excluded_devices')"
|
||
:min-width="flexWidth('next_exclude_device',crud.data,$t('regional.table.target_region_excluded_devices'))"
|
||
/>
|
||
<el-table-column
|
||
prop="max_num"
|
||
:label="$t('regional.table.maximum_quantity')"
|
||
:min-width="flexWidth('max_num',crud.data,$t('regional.table.maximum_quantity'))"
|
||
/>
|
||
<el-table-column
|
||
prop="is_active"
|
||
:label="$t('angle.table.is_on')"
|
||
:min-width="flexWidth('is_active',crud.data,$t('angle.table.is_on'))"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.is_active"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
@change="updateIsOn(scope.row.id,scope.row.is_active)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="create_by"
|
||
:label="$t('angle.table.create_by')"
|
||
:min-width="flexWidth('create_by',crud.data,$t('angle.table.create_by'))"
|
||
/>
|
||
<el-table-column
|
||
prop="create_time"
|
||
:label="$t('angle.table.create_time')"
|
||
:min-width="flexWidth('create_time',crud.data,$t('angle.table.create_time'))"
|
||
/>
|
||
<el-table-column
|
||
prop="update_by"
|
||
:label="$t('angle.table.update_by')"
|
||
:min-width="flexWidth('update_by',crud.data,$t('angle.table.update_by'))"
|
||
/>
|
||
<el-table-column
|
||
prop="update_time"
|
||
:label="$t('angle.table.update_time')"
|
||
:min-width="flexWidth('update_time',crud.data,$t('angle.table.update_time'))"
|
||
/>
|
||
<el-table-column
|
||
v-permission="['admin','acsRegional:edit','acsRegional:del']"
|
||
:label="$t('angle.table.operate')"
|
||
width="150px"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<udOperation
|
||
:data="scope.row"
|
||
:permission="permission"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--分页组件-->
|
||
<pagination />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||
import crudOperation from '@crud/CRUD.operation'
|
||
import udOperation from '@crud/UD.operation'
|
||
import pagination from '@crud/Pagination'
|
||
import crudAcsRegional from '@/api/acs/regional/acsRegional'
|
||
import deviceCrud from '@/api/acs/device/device'
|
||
import i18n from '@/i18n'
|
||
|
||
const defaultForm = {
|
||
id: null,
|
||
start_regional: null,
|
||
next_regional: null,
|
||
start_exclude_device: [],
|
||
startExcludeDevice: [],
|
||
next_exclude_device: [],
|
||
nextExcludeDevice: [],
|
||
max_num: null,
|
||
remark: null,
|
||
is_active: null,
|
||
create_by: null,
|
||
create_time: null,
|
||
update_by: null,
|
||
update_time: null
|
||
}
|
||
export default {
|
||
name: 'AcsRegional',
|
||
components: { pagination, crudOperation, udOperation },
|
||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||
cruds() {
|
||
return CRUD({
|
||
title: i18n.t('regional.table.data_limit'),
|
||
url: 'api/acsRegional',
|
||
idField: 'id',
|
||
sort: 'id,desc',
|
||
crudMethod: { ...crudAcsRegional }
|
||
})
|
||
},
|
||
data() {
|
||
return {
|
||
deviceList: [],
|
||
deviceRegion: [],
|
||
permission: {
|
||
add: ['admin', 'acsRegional:add'],
|
||
edit: ['admin', 'acsRegional:edit'],
|
||
del: ['admin', 'acsRegional:del']
|
||
},
|
||
rules: {
|
||
is_active: [
|
||
{
|
||
required: true,
|
||
message: '是否启用不能为空',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
start_regional: [
|
||
{ required: true, message: this.$t('regional.table.origin_region_cannot_be_empty'), trigger: 'blur' }
|
||
],
|
||
next_regional: [
|
||
{ required: true, message: this.$t('regional.table.destination_region_cannot_be_empty'), trigger: 'blur' }
|
||
],
|
||
max_num: [
|
||
{ required: true, message: this.$t('regional.table.maximum_number_cannot_be_empty'), trigger: 'blur' }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.$nextTick(() => {
|
||
deviceCrud.selectDeviceList().then(data => {
|
||
this.deviceList = data
|
||
})
|
||
})
|
||
this.deviceByRegions()
|
||
},
|
||
methods: {
|
||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||
[CRUD.HOOK.beforeRefresh]() {
|
||
return true
|
||
},
|
||
reload() {
|
||
crudAcsRegional.reload().then(res => {
|
||
this.crud.toQuery()
|
||
}).catch(err => {
|
||
console.log(err.response.data.message)
|
||
})
|
||
},
|
||
deviceByRegions() {
|
||
console.log('-=================================')
|
||
crudAcsRegional.deviceByRegion()
|
||
.then(res => {
|
||
console.log(res)
|
||
this.deviceRegion = res
|
||
})
|
||
.catch(err => {
|
||
console.log(err.response.data.message)
|
||
})
|
||
},
|
||
updateIsOn(id, is_active) {
|
||
var msg = this.$t('regional.table.disabled')
|
||
if (is_active === '1') {
|
||
msg = this.$t('regional.table.enabled')
|
||
}
|
||
crudAcsRegional.updateOn(id, is_active)
|
||
.then(res => {
|
||
this.crud.notify(msg + ' ' + this.$t('Inst.table.succeed'), CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||
})
|
||
.catch(err => {
|
||
console.log(err.response.data.message)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|