优化字典数据显示

ZR.Vue/src/views/components/dictData.vue

@@ -27,8 +27,8 @@
       <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>
+          <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'" :class="scope.row.cssClass">{{scope.row.dictLabel}}</span>
+          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{scope.row.dictLabel}}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="字典键值" align="center" prop="dictValue" />
@@ -61,7 +61,10 @@
           <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
         </el-form-item>
         <el-form-item label="样式属性" prop="cssClass">
-          <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+          <!-- <el-input v-model="form.cssClass" placeholder="请输入样式属性" /> -->
+          <el-select v-model="form.cssClass" clearable="">
+            <el-option v-for="dict in cssClassOptions" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="显示排序" prop="dictSort">
           <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
@@ -161,6 +164,36 @@ export default {
           label: "危险",
         },
       ],
+      cssClassOptions: [
+        {
+          value: "text-primary",
+          label: "primary",
+        },
+        {
+          value: "text-navy",
+          label: "text-navy",
+        },
+        {
+          value: "text-success",
+          label: "成功",
+        },
+        {
+          value: "text-info",
+          label: "信息",
+        },
+        {
+          value: "text-warning",
+          label: "警告",
+        },
+        {
+          value: "text-danger",
+          label: "危险",
+        },
+        {
+          value: "text-orange",
+          label: "橘红色",
+        },
+      ],
       // 状态数据字典
       statusOptions: [],
       // 类型数据字典