You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

154 lines
5.2 KiB

<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-form
:inline="true"
class="demo-form-inline"
label-position="right"
label-width="90px"
label-suffix=""
>
<el-form-item label="编码/名称">
<el-input
v-model="query.region_code"
clearable
placeholder="编码/名称"
style="width: 180px;"
@keyup.enter.native="crud.toQuery"
/>
</el-form-item>
<rrOperation />
</el-form>
</div>
<!--如果想在工具栏加入更多按钮,可以使用插槽方式, slot = 'left' or 'right'-->
<crudOperation :permission="permission" />
<!--表单组件-->
<el-dialog
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="crud.status.cu > 0"
:title="crud.status.title"
width="500px"
>
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="120px" label-suffix=":">
<el-form-item label="区域编码" prop="region_code">
<el-input v-model="form.region_code" clearable style="width: 300px;" />
</el-form-item>
<el-form-item label="区域名称" prop="region_name">
<el-input v-model="form.region_name" clearable style="width: 300px;" />
</el-form-item>
<el-form-item label="点位类型说明">
<el-input v-model="form.point_type_explain" type="textarea" clearable style="width: 300px;" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" clearable style="width: 300px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="info" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table
ref="table"
v-loading="crud.loading"
:data="crud.data"
size="mini"
style="width: 100%;"
@selection-change="crud.selectionChangeHandler"
>
<el-table-column v-if="false" prop="region_id" label="区域标识" />
<el-table-column prop="region_code" label="区域编码" :min-width="flexWidth('region_code',crud.data,'区域编码')" />
<el-table-column prop="region_name" label="区域名称" :min-width="flexWidth('region_name',crud.data,'区域名称')" />
<el-table-column prop="point_type_explain" label="点位类型说明" :min-width="flexWidth('point_type_explain',crud.data,'点位类型说明')" />
<el-table-column prop="remark" label="备注" :min-width="flexWidth('remark',crud.data,'备注')" show-overflow-tooltip />
<el-table-column prop="create_name" label="创建人" :min-width="flexWidth('create_name',crud.data,'创建人')" />
<el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
<el-table-column v-permission="[]" label="操作" width="120px" align="center" fixed="right">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</div>
</template>
<script>
import crudRegion from '@/api/wms/sch/region'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = {
region_id: null,
region_code: null,
region_name: null,
point_type_explain: null,
remark: null,
create_id: null,
create_name: null,
create_time: null,
update_optid: null,
update_optname: null,
update_time: null
}
export default {
name: 'Region',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
cruds() {
return CRUD({
title: '区域',
url: 'api/region',
idField: 'region_id',
sort: 'region_id,desc',
crudMethod: { ...crudRegion },
optShow: {
add: true,
edit: false,
del: false,
download: false,
reset: true
}
})
},
data() {
return {
permission: {},
rules: {
region_code: [
{ required: true, message: '区域编码不能为空', trigger: 'blur' }
],
region_name: [
{ required: true, message: '区域名称不能为空', trigger: 'blur' }
],
region_type: [
{ required: true, message: '区域类型不能为空', trigger: 'blur' }
]
}
}
},
methods: {
// 钩子:在获取表格数据之前执行,false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
}
}
}
</script>
<style scoped>
</style>