fix: 字典页面

main
wx-jincw 4 days ago
parent 5efd904a86
commit 4ed4cdcfc8

@ -1,7 +1,7 @@
import Vue from 'vue'
import store from '@/store'
import DataDict from '@/utils/dict'
import { sysdicttypeTypesApi } from '@/api/system/dict/data'
import { sysdicttypeTypesApi } from '@/api/sysdicttype'
function searchDictByKey(dict, key) {
if (key == null && key == "") {

@ -61,6 +61,9 @@ import * as selfUtil from '@/utils/ZBKJIutil.js';
import SettingMer from "@/utils/settingMer";
import plugins from './plugins'
import directive from './directive' //directive
import DictData from '@/components/DictData'
// 字典标签组件
import DictTag from '@/components/DictTag'
Vue.use(VueLazyload, {
preLoad: 1.3,
@ -77,7 +80,9 @@ Vue.use(articleFrom)
Vue.use(VueAwesomeSwiper)
Vue.use(plugins)
Vue.use(directive)
DictData.install()
Vue.component('DictTag', DictTag)
Vue.component('attrFrom', attrFrom)
Vue.component('UploadIndex', UploadIndex)
Vue.component('SelfUpload', SelfUpload)

@ -21,6 +21,15 @@ const operationRouter = {
roles: ['admin']
},
children: [
{
path: 'dictdata/:dictId(\\d+)',
name: 'dictdata',
component: () => import('@/views/dict/data'),
meta: {
title: '字典数据',
icon: 'clipboard'
}
},
{
path: 'setting',
name: 'setting',

@ -72,9 +72,9 @@ const actions = {
router.addRoutes(routes); // 动态添加可访问路由表
console.log('routes-end',routes);
menusAll = formatRoutes(menusAll)
console.log('menusAll',menusAll);
const _routerResult = comRouter(menusAll, asyncRoutes)
console.log('_routerResult',_routerResult);
accessedRoutes = filterAsyncRoutes(_routerResult)
// todo 这里控制是否过滤路由,经测试有些菜单不能予以设置,比如系统设置等等
this.state.settings.showSettings = false
@ -131,14 +131,20 @@ function findRoutes(menus, level = 0, prePath = '/') {
const newPath = components.join('/');
const tempRoute = findRoute(newPath, tempRoutes) || {};
let component = tempRoute.component || (level === 0 ? Layout : loadView(newPath));
let component = level === 0 ? Layout : loadView(newPath);
let path = newPath;
if (newPath.startsWith(prePath)) {
path = newPath.replace(prePath, '');
}
if (tempRoute.path) {
path = tempRoute.path;
}
if (path.startsWith('/')) {
path = path.replace('/', '');
}
const route = {
path: tempRoute.path || (level === 0 ? '/' + path : path), // 路由地址
path: level === 0 ? '/' + path : path, // 路由地址
component,
name: tempRoute.name || components[components.length - 1], // 路由名称
meta: {
@ -153,7 +159,7 @@ function findRoutes(menus, level = 0, prePath = '/') {
if (menu.childList && menu.childList.length > 0) {
route.children = findRoutes(menu.childList, level + 1, prePath + path + '/');
}
if (!tempRoute.component &&level > 0 && route.children && route.children.length > 0) {
if (level > 0 && route.children && route.children.length > 0) {
route.component = ParentView;
}
@ -179,6 +185,10 @@ function combineRoutes(routers, fromRoutes) {
combineRoutes(routers[findex].children, frouter.children);
}
}
routers[findex].component = frouter.component;
routers[findex].path = frouter.path;
routers[findex].name = frouter.name;
routers[findex].meta = frouter.meta;
} else {
routers.push(frouter);
}

@ -8,8 +8,8 @@ export default class DictData {
constructor(label, value, raw) {
this.label = label
this.value = value
this.sort = raw?.dictSort
this.code = raw?.dictCode
this.sort = raw ? raw.dictSort : 0
this.code = raw ? raw.dictCode : ''
this.raw = raw; //保存原始数据
}
}

@ -0,0 +1,415 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!-- <el-form-item label="字典名称" prop="dictType">
<el-select v-model="queryParams.dictType">
<el-option
v-for="item in typeOptions"
:key="item.dictId"
:label="item.dictName"
:value="item.dictType"
/>
</el-select>
</el-form-item> -->
<el-form-item label="字典标签" prop="dictLabel">
<el-input
v-model="queryParams.dictLabel"
placeholder="请输入字典标签"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="数据状态" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:dict:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:dict:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:dict:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:dict:export']"
>导出</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-close"
size="mini"
@click="handleClose"
>关闭</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典编码" align="center" prop="dictCode" />
<el-table-column label="字典标签" align="center" prop="dictLabel">
<template slot-scope="scope">
<span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
</template>
</el-table-column>
<el-table-column label="字典键值" align="center" prop="dictValue" />
<el-table-column label="字典排序" align="center" prop="dictSort" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:dict:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dict:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 30, 40]"
:page-size="queryParams.limit"
:current-page="queryParams.page"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="handlePageChange"
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典类型">
<el-input v-model="form.dictType" :disabled="true" />
</el-form-item>
<el-form-item label="数据标签" prop="dictLabel">
<el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
</el-form-item>
<el-form-item label="数据键值" prop="dictValue">
<el-input v-model="form.dictValue" placeholder="请输入数据键值" />
</el-form-item>
<el-form-item label="样式属性" prop="cssClass">
<el-input v-model="form.cssClass" placeholder="请输入样式属性" />
</el-form-item>
<el-form-item label="显示排序" prop="dictSort">
<el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="回显样式" prop="listClass">
<el-select v-model="form.listClass">
<el-option
v-for="item in listClassOptions"
:key="item.value"
:label="item.label + '(' + item.value + ')'"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
sysdictdataListApi as listData,
sysdictdataDetailApi as getData,
sysdictdataDeleteApi as delData,
sysdictdataCreateApi as addData,
sysdictdataUpdateApi as updateData
} from "@/api/sysdictdata";
import {
sysdicttypeDetailApi as getType,
} from "@/api/sysdicttype";
export default {
name: "Data",
dicts: ['sys_normal_disable'],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
dataList: [],
//
defaultDictType: "",
//
title: "",
//
open: false,
//
listClassOptions: [
{
value: "default",
label: "默认"
},
{
value: "primary",
label: "主要"
},
{
value: "success",
label: "成功"
},
{
value: "info",
label: "信息"
},
{
value: "warning",
label: "警告"
},
{
value: "danger",
label: "危险"
}
],
//
typeOptions: [],
//
queryParams: {
page: 1,
limit: 10,
dictName: undefined,
dictType: undefined,
status: undefined
},
//
form: {},
//
rules: {
dictLabel: [
{ required: true, message: "数据标签不能为空", trigger: "blur" }
],
dictValue: [
{ required: true, message: "数据键值不能为空", trigger: "blur" }
],
dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
]
}
};
},
created() {
const dictId = this.$route.params && this.$route.params.dictId;
this.getType(dictId);
this.getTypeList();
},
methods: {
/** 查询字典类型详细 */
getType(dictId) {
getType(dictId).then(response => {
this.queryParams.dictType = response.data.dictType;
this.defaultDictType = response.data.dictType;
this.getList();
});
},
/** 查询字典类型列表 */
getTypeList() {
// getDictOptionselect().then(response => {
// this.typeOptions = response.data;
// });
},
handlePageChange(val) {
this.queryParams.page = val;
this.getList();
},
/** 查询字典数据列表 */
getList() {
this.loading = true;
listData(this.queryParams).then(response => {
this.dataList = response.list;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
dictCode: undefined,
dictLabel: undefined,
dictValue: undefined,
cssClass: undefined,
listClass: 'default',
dictSort: 0,
status: "0",
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.page = 1;
this.getList();
},
/** 返回按钮操作 */
// handleClose() {
// const obj = { path: "/system/dict" };
// this.$tab.closeOpenPage(obj);
// },
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.dictType = this.defaultDictType;
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加字典数据";
this.form.dictType = this.queryParams.dictType;
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.dictCode)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const dictCode = row.dictCode || this.ids
getData(dictCode).then(response => {
this.form = response;
this.open = true;
this.title = "修改字典数据";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.dictCode != undefined) {
updateData(this.form).then(response => {
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addData(this.form).then(response => {
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const dictCodes = row.dictCode || this.ids;
this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?').then(function() {
return delData(dictCodes);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/dict/data/export', {
...this.queryParams
}, `data_${new Date().getTime()}.xlsx`)
}
}
};
</script>

@ -0,0 +1,377 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="字典名称" prop="dictName">
<el-input
v-model="queryParams.dictName"
placeholder="请输入字典名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="字典类型" prop="dictType">
<el-input
v-model="queryParams.dictType"
placeholder="请输入字典类型"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="字典状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:dict:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:dict:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:dict:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:dict:export']"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-refresh"
size="mini"
@click="handleRefreshCache"
v-hasPermi="['system:dict:remove']"
>刷新缓存</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典编号" align="center" prop="dictId" />
<el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<router-link :to="'/sys/operation/dictdata/' + scope.row.dictId" class="link-type">
<span>{{ scope.row.dictType }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:dict:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dict:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 30, 40]"
:page-size="queryParams.limit"
:current-page="queryParams.page"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="dictName">
<el-input v-model="form.dictName" placeholder="请输入字典名称" />
</el-form-item>
<el-form-item label="字典类型" prop="dictType">
<el-input v-model="form.dictType" placeholder="请输入字典类型" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
sysdicttypeListApi as listType,
sysdicttypeDetailApi as getType,
sysdicttypeDeleteApi as delType,
sysdicttypeCreateApi as addType,
sysdicttypeUpdateApi as updateType,
// refreshCache
} from "@/api/sysdicttype";
export default {
name: "Dict",
dicts: ['sys_normal_disable'],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
typeList: [],
//
title: "",
//
open: false,
//
dateRange: [],
//
queryParams: {
page: 1,
limit: 10,
dictName: undefined,
dictType: undefined,
status: undefined
},
//
form: {},
//
rules: {
dictName: [
{ required: true, message: "字典名称不能为空", trigger: "blur" }
],
dictType: [
{ required: true, message: "字典类型不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
addDateRange(params, dateRange, propName) {
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
},
/** 查询字典类型列表 */
getList() {
this.loading = true;
listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.typeList = response.list;
this.total = response.total;
this.loading = false;
}
);
},
handleSizeChange(val) {
this.queryParams.limit = val;
this.getList();
},
handlePageChange(val) {
this.queryParams.page = val;
this.getList();
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
dictId: undefined,
dictName: undefined,
dictType: undefined,
status: "0",
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.page = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加字典类型";
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.dictId)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const dictId = row.dictId || this.ids
getType(dictId).then(response => {
this.form = response;
this.open = true;
this.title = "修改字典类型";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.dictId != undefined) {
updateType(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addType(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const dictIds = row.dictId || this.ids;
this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?').then(function() {
return delType(dictIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/dict/type/export', {
...this.queryParams
}, `type_${new Date().getTime()}.xlsx`)
},
/** 刷新缓存按钮操作 */
handleRefreshCache() {
// refreshCache().then(() => {
// this.$modal.msgSuccess("");
// this.$store.dispatch('dict/cleanDict');
// });
}
}
};
</script>

@ -1,246 +0,0 @@
<template>
<div class="divBox">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="字典主键">
<el-input v-model="dataForm.dictId" placeholder="请输入字典主键" clearable></el-input>
</el-form-item>
<el-form-item label="字典名称">
<el-input v-model="dataForm.dictName" placeholder="请输入字典名称" clearable></el-input>
</el-form-item>
<el-form-item label="字典类型">
<el-input v-model="dataForm.dictType" placeholder="请输入字典类型" clearable></el-input>
</el-form-item>
<el-form-item label="状态0正常 1停用">
<el-input v-model="dataForm.status" placeholder="请输入状态0正常 1停用" clearable></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="dataForm.remark" placeholder="请输入备注" clearable></el-input>
</el-form-item>
<el-form-item label="是否为报关字典">
<el-input v-model="dataForm.isBill" placeholder="请输入是否为报关字典" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()"></el-button>
<el-button @click="resetForm()"></el-button>
<el-button v-hasPermi="['autogencode:sysdicttype:save']" type="primary" @click="addOrUpdateHandle()"></el-button>
<el-button v-hasPermi="['autogencode:sysdicttype:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0"></el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="dictId"
header-align="center"
align="center"
label="字典主键">
</el-table-column>
<el-table-column
prop="dictName"
header-align="center"
align="center"
label="字典名称">
</el-table-column>
<el-table-column
prop="dictType"
header-align="center"
align="center"
label="字典类型">
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="状态0正常 1停用">
</el-table-column>
<el-table-column
prop="createBy"
header-align="center"
align="center"
label="创建者">
</el-table-column>
<el-table-column
prop="createTime"
header-align="center"
align="center"
label="创建时间">
</el-table-column>
<el-table-column
prop="updateBy"
header-align="center"
align="center"
label="更新者">
</el-table-column>
<el-table-column
prop="updateTime"
header-align="center"
align="center"
label="更新时间">
</el-table-column>
<el-table-column
prop="remark"
header-align="center"
align="center"
label="备注">
</el-table-column>
<el-table-column
prop="isBill"
header-align="center"
align="center"
label="是否为报关字典">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.dictId)">{{ '' }}</el-button>
<el-button v-hasPermi="['autogencode:sysdicttype:delete']" type="text" size="small" @click="deleteHandle(scope.row.dictId)" style="color: #f56c6c;"></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 表单弹窗, 新增数据和修改数据 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './sysdicttype-add-and-update'
import * as api from '@/api/sysdicttype.js'
export default {
data () {
return {
dataForm: {
dictId: '',
dictName: '',
dictType: '',
status: '',
remark: '',
isBill: '',
},
//
resetForm() {
this.dataForm = {
dictId: '',
dictName: '',
dictType: '',
status: '',
remark: '',
isBill: '',
}
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
},
activated () {
this.getDataList()
},
methods: {
//
getDataList () {
this.dataListLoading = true
// SysDictTypeControllerPageParamRequest
const params = {
page: this.pageIndex,
limit: this.pageSize
}
//
if (this.dataForm.dictId) params.dictId = this.dataForm.dictId;
if (this.dataForm.dictName) params.dictName = this.dataForm.dictName;
if (this.dataForm.dictType) params.dictType = this.dataForm.dictType;
if (this.dataForm.status) params.status = this.dataForm.status;
if (this.dataForm.remark) params.remark = this.dataForm.remark;
if (this.dataForm.isBill) params.isBill = this.dataForm.isBill;
api.sysdicttypeListApi(params).then(res => {
this.dataListLoading = false
this.dataList = res.list || [];
this.totalPage = res.total;
}).catch(e => {
this.dataListLoading = false
})
},
//
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
//
selectionChangeHandle (val) {
this.dataListSelections = val
},
// /
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
//
deleteHandle (id) {
let ids = []
let idText = ''
// id
if (id) {
ids = [id]
idText = id
} else {
//
ids = this.dataListSelections.map(item => {
return item.dictId
})
idText = ids.join(',')
}
this.$confirm(`确定进行删除操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// API
api.sysdicttypeDeleteApi(ids).then(res => {
this.$message.success('删除成功')
this.getDataList()
})
})
},
}
}
</script>

@ -1,100 +0,0 @@
<template>
<!-- 基于 Element UI 新增和修改弹窗 -->
<el-dialog
:title="!dataForm.dictId ? '添加' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<!-- 新增和修改表单 -->
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px">
<el-form-item label="字典名称" prop="dictName">
<el-input v-model="dataForm.dictName" placeholder="字典名称"></el-input>
</el-form-item>
<el-form-item label="字典类型" prop="dictType">
<el-input v-model="dataForm.dictType" placeholder="字典类型"></el-input>
</el-form-item>
<el-form-item label="状态0正常 1停用" prop="status">
<el-input v-model="dataForm.status" placeholder="状态0正常 1停用"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
</el-form-item>
<el-form-item label="是否为报关字典" prop="isBill">
<el-input v-model="dataForm.isBill" placeholder="是否为报关字典"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataSubmit()"></el-button>
</span>
</el-dialog>
</template>
<script>
import * as api from '@/api/sysdicttype.js'
export default {
data () {
return {
visible: false,
dataForm: {
dictId: 0,
dictName: '' ,
dictType: '' ,
status: '' ,
remark: '' ,
isBill: ''
},
dataRule: {
dictName: [
{ required: true, message: '字典名称 为必填项', trigger: 'blur' }
],
dictType: [
{ required: true, message: '字典类型 为必填项', trigger: 'blur' }
],
status: [
{ required: true, message: '状态0正常 1停用 为必填项', trigger: 'blur' }
],
remark: [
{ required: true, message: '备注 为必填项', trigger: 'blur' }
],
isBill: [
{ required: true, message: '是否为报关字典 为必填项', trigger: 'blur' }
]
}
}
},
methods: {
init (id) { //
this.dataForm.dictId = id || 0
this.visible = true
this.$nextTick(function() {
this.$refs['dataForm'].resetFields()
if (this.dataForm.dictId) {
api.sysdicttypeDetailApi(id).then(function(res) {
this.dataForm = res;
}.bind(this))
}
}.bind(this))
},
//
dataSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (this.dataForm.dictId) {
api.sysdicttypeUpdateApi(this.dataForm).then(function(res) {
this.$message.success('保存成功')
this.visible = false
this.$emit('refreshDataList')
}.bind(this));
} else {
api.sysdicttypeCreateApi(this.dataForm).then(function(res) {
this.$message.success('新增成功')
this.visible = false
this.$emit('refreshDataList')
}.bind(this));
}
}
})
}
}
}
</script>
Loading…
Cancel
Save