<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>