TypeScript前端代码生成模板同步到最新

RuoYi

2026-03-12 b0ff5a01a132d7badf935f60b6aa14fa00dce5b0

 ruoyi-ui/src/views/tool/gen/genInfoForm.vue

@@ -11,7 +11,16 @@
          </el-select>

        </el-form-item>

      </el-col>



      <el-col :span="12">

        <el-form-item prop="tplWebType">

          <span slot="label">前端类型</span>

          <el-select v-model="info.tplWebType">

            <el-option label="Vue2 Element UI 模版" value="element-ui" />

            <el-option label="Vue3 Element Plus 模版" value="element-plus" />

            <el-option label="Vue3 Element Plus TypeScript 模版" value="element-plus-typescript" />

          </el-select>

        </el-form-item>

      </el-col>

      <el-col :span="12">

        <el-form-item prop="packageName">

          <span slot="label">

@@ -61,6 +70,19 @@
      </el-col>



      <el-col :span="12">

        <el-form-item prop="genType">

          <span slot="label">

            生成代码方式

            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">

              <i class="el-icon-question"></i>

            </el-tooltip>

          </span>

          <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>

          <el-radio v-model="info.genType" label="1">自定义路径</el-radio>

        </el-form-item>

      </el-col>



      <el-col :span="12">

        <el-form-item>

          <span slot="label">

            上级菜单

@@ -76,19 +98,6 @@
            :show-count="true"

            placeholder="请选择系统菜单"

          />

        </el-form-item>

      </el-col>



      <el-col :span="12">

        <el-form-item prop="genType">

          <span slot="label">

            生成代码方式

            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">

              <i class="el-icon-question"></i>

            </el-tooltip>

          </span>

          <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>

          <el-radio v-model="info.genType" label="1">自定义路径</el-radio>

        </el-form-item>

      </el-col>



@@ -213,12 +222,12 @@
    </el-row>

  </el-form>

</template>



<script>

import Treeselect from "@riophae/vue-treeselect";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import Treeselect from "@riophae/vue-treeselect"

import "@riophae/vue-treeselect/dist/vue-treeselect.css"



export default {

  name: "BasicInfoForm",

  components: { Treeselect },

  props: {

    info: {

@@ -232,7 +241,7 @@
    menus: {

      type: Array,

      default: []

    },

    }

  },

  data() {

    return {

@@ -252,49 +261,53 @@
        ],

        functionName: [

          { required: true, message: "请输入生成功能名", trigger: "blur" }

        ],

        ]

      }

    };

    }

  },

  created() {},

  watch: {

    'info.subTableName': function(val) {

      this.setSubTableColumns(val);

      this.setSubTableColumns(val)

    },

    'info.tplWebType': function(val) {

      if (val === '') {

        this.info.tplWebType = "element-ui"

      }

    }

  },

  methods: {

    /** 转换菜单数据结构 */

    normalizer(node) {

      if (node.children && !node.children.length) {

        delete node.children;

        delete node.children

      }

      return {

        id: node.menuId,

        label: node.menuName,

        children: node.children

      };

      }

    },

    /** 选择子表名触发 */

    subSelectChange(value) {

      this.info.subTableFkName = '';

      this.info.subTableFkName = ''

    },

    /** 选择生成模板触发 */

    tplSelectChange(value) {

      if(value !== 'sub') {

        this.info.subTableName = '';

        this.info.subTableFkName = '';

        this.info.subTableName = ''

        this.info.subTableFkName = ''

      }

    },

    /** 设置关联外键 */

    setSubTableColumns(value) {

      for (var item in this.tables) {

        const name = this.tables[item].tableName;

        const name = this.tables[item].tableName

        if (value === name) {

          this.subColumns = this.tables[item].columns;

          break;

          this.subColumns = this.tables[item].columns

          break

        }

      }

    }

  }

};

}

</script>