mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-22 15:21:53 +08:00
v3.6.0 增加字典标签样式回显
This commit is contained in:
YunaiV
parent
4a8129bffa
commit
986d1328e0
@ -38,6 +38,11 @@ public class DictDataBaseVO {
|
||||
// @InEnum(value = CommonStatusEnum.class, message = "修改状态必须是 {value}")
|
||||
private Integer status;
|
||||
|
||||
@ApiModelProperty(value = "颜色类型", example = "default", notes = "default、primary、success、info、warning、danger")
|
||||
private String colorType;
|
||||
@ApiModelProperty(value = "css 样式", example = "btn-visible")
|
||||
private String cssClass;
|
||||
|
||||
@ApiModelProperty(value = "备注", example = "我是一个角色")
|
||||
private String remark;
|
||||
|
||||
|
||||
@ -17,4 +17,9 @@ public class DictDataSimpleRespVO {
|
||||
@ApiModelProperty(value = "字典标签", required = true, example = "男")
|
||||
private String label;
|
||||
|
||||
@ApiModelProperty(value = "颜色类型", example = "default", notes = "default、primary、success、info、warning、danger")
|
||||
private String colorType;
|
||||
@ApiModelProperty(value = "css 样式", example = "btn-visible")
|
||||
private String cssClass;
|
||||
|
||||
}
|
||||
|
||||
@ -46,6 +46,16 @@ public class DictDataDO extends BaseDO {
|
||||
* 枚举 {@link CommonStatusEnum}
|
||||
*/
|
||||
private Integer status;
|
||||
/**
|
||||
* 颜色类型
|
||||
*
|
||||
* 对应到 element-ui 为 default、primary、success、info、warning、danger
|
||||
*/
|
||||
private String colorType;
|
||||
/**
|
||||
* css 样式
|
||||
*/
|
||||
private String cssClass;
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
|
||||
28
yudao-ui-admin/src/components/DictTag/index.vue
Normal file
28
yudao-ui-admin/src/components/DictTag/index.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(dict, index) in this.getDictDatas2(type, value)">
|
||||
<!-- 默认样式 -->
|
||||
<span v-if="dict.colorType === 'default' || dict.colorType === '' || dict.color === undefined" :key="dict.value" :index="index"
|
||||
:class="dict.cssClass">{{ dict.label }}</span>
|
||||
<!-- Tag 样式 -->
|
||||
<el-tag v-else :key="dict.value" :index="index" :type="dict.colorType" :class="dict.cssClass">
|
||||
{{ dict.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DictTag",
|
||||
props: {
|
||||
type: String,
|
||||
value: [Number, String, Array],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +36,7 @@ import RightToolbar from "@/components/RightToolbar"
|
||||
// 代码高亮插件
|
||||
// import hljs from 'highlight.js'
|
||||
// import 'highlight.js/styles/github-gist.css'
|
||||
import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict";
|
||||
import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from "@/utils/dict";
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
@ -47,6 +47,7 @@ Vue.prototype.addDateRange = addDateRange
|
||||
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime
|
||||
Vue.prototype.selectDictLabel = selectDictLabel
|
||||
Vue.prototype.getDictDatas = getDictDatas
|
||||
Vue.prototype.getDictDatas2 = getDictDatas2
|
||||
Vue.prototype.getDictDataLabel = getDictDataLabel
|
||||
Vue.prototype.DICT_TYPE = DICT_TYPE
|
||||
Vue.prototype.download = download
|
||||
@ -70,8 +71,11 @@ Vue.prototype.msgInfo = function (msg) {
|
||||
}
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag)
|
||||
Vue.component('Pagination', Pagination)
|
||||
Vue.component('RightToolbar', RightToolbar)
|
||||
// 字典标签组件
|
||||
import DictTag from '@/components/DictTag'
|
||||
// 头部标签插件
|
||||
import VueMeta from 'vue-meta'
|
||||
|
||||
|
||||
@ -68,10 +68,37 @@ export function getDictDatas(dictType) {
|
||||
// console.log(store.getters.dict_datas[dictType]);
|
||||
// debugger
|
||||
// }
|
||||
// debugger
|
||||
return store.getters.dict_datas[dictType] || []
|
||||
}
|
||||
|
||||
export function getDictDataLabel(dictType, value) {
|
||||
/**
|
||||
* 获取 dictType 对应的数据字典数组
|
||||
*
|
||||
* @param dictType 数据类型
|
||||
* @param values 数组、单个元素
|
||||
* @returns {*|Array} 数据字典数组
|
||||
*/
|
||||
export function getDictDatas2(dictType, values) {
|
||||
if (values === undefined) {
|
||||
return [];
|
||||
}
|
||||
// 如果是单个元素，则转换成数组
|
||||
if (!Array.isArray(values)) {
|
||||
values = [this.value];
|
||||
}
|
||||
// 获得字典数据
|
||||
const results = [];
|
||||
for (const value of values) {
|
||||
const dict = getDictData(dictType, value);
|
||||
if (dict) {
|
||||
results.push(dict);
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
export function getDictData(dictType, value) {
|
||||
// 获取 dictType 对应的数据字典数组
|
||||
const dictDatas = getDictDatas(dictType)
|
||||
if (!dictDatas || dictDatas.length === 0) {
|
||||
@ -81,8 +108,14 @@ export function getDictDataLabel(dictType, value) {
|
||||
value = value + '' // 强制转换成字符串，因为 DictData 小类数值，是字符串
|
||||
for (const dictData of dictDatas) {
|
||||
if (dictData.value === value) {
|
||||
return dictData.label
|
||||
return dictData;
|
||||
}
|
||||
}
|
||||
return ''
|
||||
return undefined
|
||||
}
|
||||
|
||||
export function getDictDataLabel(dictType, value) {
|
||||
const dict = getDictData(dictType, value);
|
||||
return dict ? dict.label : '';
|
||||
}
|
||||
|
||||
|
||||
@ -37,7 +37,13 @@
|
||||
<el-table-column label="字典标签" align="center" prop="label" />
|
||||
<el-table-column label="字典键值" align="center" prop="value" />
|
||||
<el-table-column label="字典排序" align="center" prop="sort" />
|
||||
<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="颜色类型" align="center" prop="colorType" />
|
||||
<el-table-column label="CSS Class" align="center" prop="cssClass" />
|
||||
<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">
|
||||
@ -59,7 +65,7 @@
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<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 ref="form" :model="form" :rules="rules" label-width="90px">
|
||||
<el-form-item label="字典类型">
|
||||
<el-input v-model="form.dictType" :disabled="true" />
|
||||
</el-form-item>
|
||||
@ -77,6 +83,14 @@
|
||||
<el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色类型" prop="colorType">
|
||||
<el-select v-model="form.colorType">
|
||||
<el-option v-for="item in colorTypeOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="CSS Class" prop="cssClass">
|
||||
<el-input v-model="form.cssClass" placeholder="请输入 CSS Class" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
@ -142,6 +156,27 @@ export default {
|
||||
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
// 数据标签回显样式
|
||||
colorTypeOptions: [{
|
||||
value: "default",
|
||||
label: "默认"
|
||||
}, {
|
||||
value: "primary",
|
||||
label: "主要"
|
||||
}, {
|
||||
value: "success",
|
||||
label: "成功"
|
||||
}, {
|
||||
value: "info",
|
||||
label: "信息"
|
||||
}, {
|
||||
value: "warning",
|
||||
label: "警告"
|
||||
}, {
|
||||
value: "danger",
|
||||
label: "危险"
|
||||
}
|
||||
],
|
||||
|
||||
// 枚举
|
||||
CommonStatusEnum: CommonStatusEnum,
|
||||
@ -178,10 +213,6 @@ export default {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
@ -195,6 +226,8 @@ export default {
|
||||
value: undefined,
|
||||
sort: 0,
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
colorType: 'default',
|
||||
cssClass: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
|
||||
2
更新日志.md
2
更新日志.md
@ -35,7 +35,7 @@
|
||||
* 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
|
||||
* 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
|
||||
* 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c)
|
||||
* 【新增】前端的 iframe 组件，方便内嵌网页 [commit]()
|
||||
* 【新增】前端的 iframe 组件，方便内嵌网页 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4a8129bffa9e3928c56333e29f5874f55a079764)
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user