优化状态型字典显示

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

@@ -6,9 +6,6 @@
           <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 size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
           <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
@@ -27,10 +24,20 @@
     </el-row>
     <el-table :data="dataList">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典标签" align="center" prop="dictLabel" />
+      <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" :formatter="statusFormat" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="statusOptions" :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" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -53,9 +60,17 @@
         <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" :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 statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
@@ -84,15 +99,15 @@ import { listType, getType } from "@/api/system/dict/type";
 export default {
   name: "dictData",
   props: {
-    dict: {
+    dictId: {
       type: Number,
       default: 0,
     },
   },
   watch: {
-    dict: {
+    dictId: {
       handler(newVal, oldVal) {
-        this.dict = newVal;
+        this.dictId = newVal;
         if (newVal) {
           console.log(newVal);
 
@@ -119,6 +134,33 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 数据标签回显样式
+      listClassOptions: [
+        {
+          value: "default",
+          label: "默认",
+        },
+        {
+          value: "primary",
+          label: "主要",
+        },
+        {
+          value: "success",
+          label: "成功",
+        },
+        {
+          value: "info",
+          label: "信息",
+        },
+        {
+          value: "warning",
+          label: "警告",
+        },
+        {
+          value: "danger",
+          label: "危险",
+        },
+      ],
       // 状态数据字典
       statusOptions: [],
       // 类型数据字典