欧阳子桐 / RuoYi · 提交

转到一个项目

作者 Ricky
提交 b1413f021ee6e6f7105318af3be620633a1baeac 1 个父辈 60c22b6a

增加字典标签样式回显

内嵌 并排对比
正在显示 3 个修改的文件 包含 117 行增加 和 11 行删除
  1 +<template>
  2 + <div>
  3 + <template v-for="(item, index) in options">
  4 + <template v-if="values.includes(item.dictValue)">
  5 + <span
  6 + v-if="item.listClass == 'default' || item.listClass == ''"
  7 + :key="item.dictValue"
  8 + :index="index"
  9 + :class="item.cssClass"
  10 + >{{ item.dictLabel }}</span
  11 + >
  12 + <el-tag
  13 + v-else
  14 + :key="item.dictValue"
  15 + :index="index"
  16 + :type="item.listClass == 'primary' ? '' : item.listClass"
  17 + :class="item.cssClass"
  18 + >
  19 + {{ item.dictLabel }}
  20 + </el-tag>
  21 + </template>
  22 + </template>
  23 + </div>
  24 +</template>
  25 +
  26 +<script>
  27 +export default {
  28 + name: "DictTag",
  29 + props: {
  30 + options: {
  31 + type: Array,
  32 + default: null,
  33 + },
  34 + value: [String, Array],
  35 + },
  36 + computed: {
  37 + values() {
  38 + if (this.value) {
  39 + return Array.isArray(this.value) ? this.value : [this.value];
  40 + } else {
  41 + return [];
  42 + }
  43 + },
  44 + },
  45 +};
  46 +</script>
  47 +<style scoped>
  48 +.el-tag + .el-tag {
  49 + margin-left: 10px;
  50 +}
  51 +</style>
@@ -86,10 +86,19 @@ @@ -86,10 +86,19 @@
86 <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> 86 <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
87 <el-table-column type="selection" width="55" align="center" /> 87 <el-table-column type="selection" width="55" align="center" />
88 <el-table-column label="字典编码" align="center" prop="dictCode" /> 88 <el-table-column label="字典编码" align="center" prop="dictCode" />
89 - <el-table-column label="字典标签" align="center" prop="dictLabel" /> 89 + <el-table-column label="字典标签" align="center" prop="dictLabel">
  90 + <template slot-scope="scope">
  91 + <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
  92 + <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
  93 + </template>
  94 + </el-table-column>
90 <el-table-column label="字典键值" align="center" prop="dictValue" /> 95 <el-table-column label="字典键值" align="center" prop="dictValue" />
91 <el-table-column label="字典排序" align="center" prop="dictSort" /> 96 <el-table-column label="字典排序" align="center" prop="dictSort" />
92 - <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" /> 97 + <el-table-column label="状态" align="center" prop="status">
  98 + <template slot-scope="scope">
  99 + <dict-tag :options="statusOptions" :value="scope.row.status"/>
  100 + </template>
  101 + </el-table-column>
93 <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> 102 <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
94 <el-table-column label="创建时间" align="center" prop="createTime" width="180"> 103 <el-table-column label="创建时间" align="center" prop="createTime" width="180">
95 <template slot-scope="scope"> 104 <template slot-scope="scope">
@@ -136,9 +145,22 @@ @@ -136,9 +145,22 @@
136 <el-form-item label="数据键值" prop="dictValue"> 145 <el-form-item label="数据键值" prop="dictValue">
137 <el-input v-model="form.dictValue" placeholder="请输入数据键值" /> 146 <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
138 </el-form-item> 147 </el-form-item>
  148 + <el-form-item label="样式属性" prop="cssClass">
  149 + <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
  150 + </el-form-item>
139 <el-form-item label="显示排序" prop="dictSort"> 151 <el-form-item label="显示排序" prop="dictSort">
140 <el-input-number v-model="form.dictSort" controls-position="right" :min="0" /> 152 <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
141 </el-form-item> 153 </el-form-item>
  154 + <el-form-item label="回显样式" prop="listClass">
  155 + <el-select v-model="form.listClass">
  156 + <el-option
  157 + v-for="item in listClassOptions"
  158 + :key="item.value"
  159 + :label="item.label"
  160 + :value="item.value"
  161 + ></el-option>
  162 + </el-select>
  163 + </el-form-item>
142 <el-form-item label="状态" prop="status"> 164 <el-form-item label="状态" prop="status">
143 <el-radio-group v-model="form.status"> 165 <el-radio-group v-model="form.status">
144 <el-radio 166 <el-radio
@@ -163,9 +185,14 @@ @@ -163,9 +185,14 @@
163 <script> 185 <script>
164 import { listData, getData, delData, addData, updateData, exportData } from "@/api/system/dict/data"; 186 import { listData, getData, delData, addData, updateData, exportData } from "@/api/system/dict/data";
165 import { listType, getType } from "@/api/system/dict/type"; 187 import { listType, getType } from "@/api/system/dict/type";
  188 +// 字典标签组件（使用频繁可在全局挂载）
  189 +import DictTag from '@/components/DictTag'
166 190
167 export default { 191 export default {
168 name: "Data", 192 name: "Data",
  193 + components: {
  194 + DictTag
  195 + },
169 data() { 196 data() {
170 return { 197 return {
171 // 遮罩层 198 // 遮罩层
@@ -190,6 +217,33 @@ export default { @@ -190,6 +217,33 @@ export default {
190 title: "", 217 title: "",
191 // 是否显示弹出层 218 // 是否显示弹出层
192 open: false, 219 open: false,
  220 + // 数据标签回显样式
  221 + listClassOptions: [
  222 + {
  223 + value: "default",
  224 + label: "默认"
  225 + },
  226 + {
  227 + value: "primary",
  228 + label: "主要"
  229 + },
  230 + {
  231 + value: "success",
  232 + label: "成功"
  233 + },
  234 + {
  235 + value: "info",
  236 + label: "信息"
  237 + },
  238 + {
  239 + value: "warning",
  240 + label: "警告"
  241 + },
  242 + {
  243 + value: "danger",
  244 + label: "危险"
  245 + }
  246 + ],
193 // 状态数据字典 247 // 状态数据字典
194 statusOptions: [], 248 statusOptions: [],
195 // 类型数据字典 249 // 类型数据字典
@@ -250,10 +304,6 @@ export default { @@ -250,10 +304,6 @@ export default {
250 this.loading = false; 304 this.loading = false;
251 }); 305 });
252 }, 306 },
253 - // 数据状态字典翻译  
254 - statusFormat(row, column) {  
255 - return this.selectDictLabel(this.statusOptions, row.status);  
256 - },  
257 // 取消按钮 307 // 取消按钮
258 cancel() { 308 cancel() {
259 this.open = false; 309 this.open = false;
@@ -123,7 +123,11 @@ @@ -123,7 +123,11 @@
123 </router-link> 123 </router-link>
124 </template> 124 </template>
125 </el-table-column> 125 </el-table-column>
126 - <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" /> 126 + <el-table-column label="状态" align="center" prop="status">
  127 + <template slot-scope="scope">
  128 + <dict-tag :options="statusOptions" :value="scope.row.status"/>
  129 + </template>
  130 + </el-table-column>
127 <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> 131 <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
128 <el-table-column label="创建时间" align="center" prop="createTime" width="180"> 132 <el-table-column label="创建时间" align="center" prop="createTime" width="180">
129 <template slot-scope="scope"> 133 <template slot-scope="scope">
@@ -190,9 +194,14 @@ @@ -190,9 +194,14 @@
190 194
191 <script> 195 <script>
192 import { listType, getType, delType, addType, updateType, exportType, refreshCache } from "@/api/system/dict/type"; 196 import { listType, getType, delType, addType, updateType, exportType, refreshCache } from "@/api/system/dict/type";
  197 +// 字典标签组件（使用频繁可在全局挂载）
  198 +import DictTag from '@/components/DictTag'
193 199
194 export default { 200 export default {
195 name: "Dict", 201 name: "Dict",
  202 + components: {
  203 + DictTag
  204 + },
196 data() { 205 data() {
197 return { 206 return {
198 // 遮罩层 207 // 遮罩层
@@ -257,10 +266,6 @@ export default { @@ -257,10 +266,6 @@ export default {
257 } 266 }
258 ); 267 );
259 }, 268 },
260 - // 字典状态字典翻译  
261 - statusFormat(row, column) {  
262 - return this.selectDictLabel(this.statusOptions, row.status);  
263 - },  
264 // 取消按钮 269 // 取消按钮
265 cancel() { 270 cancel() {
266 this.open = false; 271 this.open = false;