使用vue-data-dict简化数据字典使用

2021-09-17 15:38:06 +08:00 · 2021-09-17 15:38:06 +08:00 · 047e62e6a0
commit 047e62e6a0
parent 9700d4a59a
4 changed files with 73 additions and 97 deletions
--- a/src/main/java/com/ruoyi/project/tool/gen/util/VelocityUtils.java
+++ b/src/main/java/com/ruoyi/project/tool/gen/util/VelocityUtils.java
@ -58,6 +58,7 @@ public class VelocityUtils
        velocityContext.put("permissionPrefix", getPermissionPrefix(moduleName, businessName));
        velocityContext.put("columns", genTable.getColumns());
        velocityContext.put("table", genTable);
+        velocityContext.put("dicts", getDicts(genTable));
        setMenuVelocityContext(velocityContext, genTable);
        if (GenConstants.TPL_TREE.equals(tplCategory))
        {
@ -259,6 +260,27 @@ public class VelocityUtils
        return importList;
    }

+    /**
+     * 根据列类型获取字典组
+     * 
+     * @param genTable 业务表对象
+     * @return 返回字典组
+     */
+    public static String getDicts(GenTable genTable)
+    {
+        List<GenTableColumn> columns = genTable.getColumns();
+        List<String> dicts = new ArrayList<String>();
+        for (GenTableColumn column : columns)
+        {
+            if (!column.isSuperColumn() && StringUtils.isNotEmpty(column.getDictType()) && StringUtils.equalsAny(
+                    column.getHtmlType(), new String[] { GenConstants.HTML_SELECT, GenConstants.HTML_RADIO }))
+            {
+                dicts.add("'" + column.getDictType() + "'");
+            }
+        }
+        return StringUtils.join(dicts, ", ");
+    }
+
    /**
     * 获取权限前缀
     * 
--- a/src/main/resources/vm/java/mapper.java.vm
+++ b/src/main/resources/vm/java/mapper.java.vm
@ -69,7 +69,7 @@ public interface ${ClassName}Mapper
     * @param ${pkColumn.javaField}s 需要删除的数据主键集合
     * @return 结果
     */
-    public int delete${subClassName}By${pkColumn.capJavaField}s(${pkColumn.javaType}[] ${pkColumn.javaField}s);
+    public int delete${subClassName}By${subTableFkClassName}s(${pkColumn.javaType}[] ${pkColumn.javaField}s);
    
    /**
     * 批量新增${subTable.functionName}
--- a/src/main/resources/vm/vue/index-tree.vue.vm
+++ b/src/main/resources/vm/vue/index-tree.vue.vm
@ -25,10 +25,10 @@
      <el-form-item label="${comment}" prop="${column.javaField}">
        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
          <el-option
-            v-for="dict in ${column.javaField}Options"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
+            v-for="dict in dict.type.${dictType}"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
          />
        </el-select>
      </el-form-item>
@ -106,7 +106,11 @@
        </template>
      </el-table-column>
 #elseif($column.list && "" != $column.dictType)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" :formatter="${javaField}Format" />
+      <el-table-column label="${comment}" align="center" prop="${javaField}">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
+        </template>
+      </el-table-column>
 #elseif($column.list && "" != $javaField)
 #if(${foreach.index} == 1)
      <el-table-column label="${comment}" prop="${javaField}" />
@ -180,10 +184,10 @@
        <el-form-item label="${comment}" prop="${field}">
          <el-select v-model="form.${field}" placeholder="请选择${comment}">
            <el-option
-              v-for="dict in ${field}Options"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.dictValue)"#else:value="dict.dictValue"#end
+              v-for="dict in dict.type.${dictType}"
+              :key="dict.value"
+              :label="dict.label"
+              #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end

            ></el-option>
          </el-select>
@ -198,10 +202,10 @@
        <el-form-item label="${comment}">
          <el-checkbox-group v-model="form.${field}">
            <el-checkbox
-              v-for="dict in ${field}Options"
-              :key="dict.dictValue"
-              :label="dict.dictValue">
-              {{dict.dictLabel}}
+              v-for="dict in dict.type.${dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
@ -215,11 +219,11 @@
        <el-form-item label="${comment}">
          <el-radio-group v-model="form.${field}">
            <el-radio
-              v-for="dict in ${field}Options"
-              :key="dict.dictValue"
-              #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.dictValue)"#else:label="dict.dictValue"#end
+              v-for="dict in dict.type.${dictType}"
+              :key="dict.value"
+              #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end

-            >{{dict.dictLabel}}</el-radio>
+            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
 #elseif($column.htmlType == "radio" && $dictType)
@ -261,6 +265,9 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";

 export default {
  name: "${BusinessName}",
+#if(${dicts} != '')
+  dicts: [${dicts}],
+#end
  components: {
    Treeselect
  },
@ -279,16 +286,7 @@ export default {
      // 是否显示弹出层
      open: false,
 #foreach ($column in $columns)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if(${column.dictType} != '')
-      // $comment字典
-      ${column.javaField}Options: [],
-#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
      // $comment时间范围
      daterange${AttrName}: [],
@ -326,13 +324,6 @@ export default {
  },
  created() {
    this.getList();
-#foreach ($column in $columns)
-#if(${column.dictType} != '')
-    this.getDicts("${column.dictType}").then(response => {
-      this.${column.javaField}Options = response.data;
-    });
-#end
-#end
  },
  methods: {
    /** 查询${functionName}列表 */
@ -378,20 +369,6 @@ export default {
        this.${businessName}Options.push(data);
      });
    },
-#foreach ($column in $columns)
-#if(${column.dictType} != '')
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-    // $comment字典翻译
-    ${column.javaField}Format(row, column) {
-      return this.selectDictLabel#if($column.htmlType == "checkbox")s#end(this.${column.javaField}Options, row.${column.javaField});
-    },
-#end
-#end
    // 取消按钮
    cancel() {
      this.open = false;
--- a/src/main/resources/vm/vue/index.vue.vm
+++ b/src/main/resources/vm/vue/index.vue.vm
@ -25,10 +25,10 @@
      <el-form-item label="${comment}" prop="${column.javaField}">
        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
          <el-option
-            v-for="dict in ${column.javaField}Options"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
+            v-for="dict in dict.type.${dictType}"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
          />
        </el-select>
      </el-form-item>
@ -135,7 +135,11 @@
        </template>
      </el-table-column>
 #elseif($column.list && "" != $column.dictType)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" :formatter="${javaField}Format" />
+      <el-table-column label="${comment}" align="center" prop="${javaField}">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
+        </template>
+      </el-table-column>
 #elseif($column.list && "" != $javaField)
      <el-table-column label="${comment}" align="center" prop="${javaField}" />
 #end
@ -202,10 +206,10 @@
        <el-form-item label="${comment}" prop="${field}">
          <el-select v-model="form.${field}" placeholder="请选择${comment}">
            <el-option
-              v-for="dict in ${field}Options"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.dictValue)"#else:value="dict.dictValue"#end
+              v-for="dict in dict.type.${dictType}"
+              :key="dict.value"
+              :label="dict.label"
+              #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end

            ></el-option>
          </el-select>
@ -220,10 +224,10 @@
        <el-form-item label="${comment}">
          <el-checkbox-group v-model="form.${field}">
            <el-checkbox
-              v-for="dict in ${field}Options"
-              :key="dict.dictValue"
-              :label="dict.dictValue">
-              {{dict.dictLabel}}
+              v-for="dict in dict.type.${dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
@ -237,11 +241,11 @@
        <el-form-item label="${comment}">
          <el-radio-group v-model="form.${field}">
            <el-radio
-              v-for="dict in ${field}Options"
-              :key="dict.dictValue"
-              #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.dictValue)"#else:label="dict.dictValue"#end
+              v-for="dict in dict.type.${dictType}"
+              :key="dict.value"
+              #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end

-            >{{dict.dictLabel}}</el-radio>
+            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
 #elseif($column.htmlType == "radio" && $dictType)
@ -313,6 +317,9 @@ import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${Busin

 export default {
  name: "${BusinessName}",
+#if(${dicts} != '')
+  dicts: [${dicts}],
+#end
  data() {
    return {
      // 遮罩层
@ -344,16 +351,7 @@ export default {
      // 是否显示弹出层
      open: false,
 #foreach ($column in $columns)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if(${column.dictType} != '')
-      // $comment字典
-      ${column.javaField}Options: [],
-#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
      // $comment时间范围
      daterange${AttrName}: [],
@ -393,13 +391,6 @@ export default {
  },
  created() {
    this.getList();
-#foreach ($column in $columns)
-#if(${column.dictType} != '')
-    this.getDicts("${column.dictType}").then(response => {
-      this.${column.javaField}Options = response.data;
-    });
-#end
-#end
  },
  methods: {
    /** 查询${functionName}列表 */
@ -426,20 +417,6 @@ export default {
        this.loading = false;
      });
    },
-#foreach ($column in $columns)
-#if(${column.dictType} != '')
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-    // $comment字典翻译
-    ${column.javaField}Format(row, column) {
-      return this.selectDictLabel#if($column.htmlType == "checkbox")s#end(this.${column.javaField}Options, row.${column.javaField});
-    },
-#end
-#end
    // 取消按钮
    cancel() {
      this.open = false;