add: 添加仙工AGV,流量限制界面;实现流量限制国际化

This commit is contained in:
yanps
2024-01-22 19:31:00 +08:00
parent 37ac298f91
commit 47b3889c5b
49 changed files with 2174 additions and 101 deletions

View File

@@ -0,0 +1,303 @@
<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-form-item>
<el-form-item
:label="$t('regional.table.target_region')"
prop="next_regional"
>
<el-input v-model="form.next_regional" :disabled="crud.status.edit" style="width: 370px;" />
</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: [],
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
})
})
},
methods: {
// 钩子在获取表格数据之前执行false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
},
reload() {
crudAcsRegional.reload().then(res => {
this.crud.toQuery()
}).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>