当前位置: 首页 > article >正文

监听-追溯

‘info.moduleNameSub’: {
handler(newVal, oldVal) {
if (newVal) {
const newPrefix = newVal.charAt(0).toUpperCase() + newVal.slice(1);
let currentBusinessName = this.info.businessName || ‘’;
// 替换旧前缀(如果有)
if (oldVal) {
const oldPrefix = oldVal.charAt(0).toUpperCase() + oldVal.slice(1);
currentBusinessName = currentBusinessName.replace(oldPrefix, ‘’);
}
this.info.businessName = newPrefix + currentBusinessName;
}
},
immediate: true // 初始化时立即执行

<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <span slot="label">生成模板</span>
          <el-select v-model="info.tplCategory" @change="tplSelectChange">
            <el-option label="单表(增删改查)" value="crud"/>
            <el-option label="树表(增删改查)" value="tree"/>
            <el-option label="主子表(增删改查)" value="sub"/>
          </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-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="packageName">
          <span slot="label">
            生成包路径
            <el-tooltip content="基础的根路径,在配置文件中定义" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.packageName"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="entityPath">
          <span slot="label">
            实体类根路径
            <el-tooltip content="基础的根路径,在配置文件中定义" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.entityPath"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="mapperPath">
          <span slot="label">
            业务根路径
            <el-tooltip content="三层代码(controller,service,mapper)生成在哪个java包下,计算得出" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.mapperPath"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <span slot="label">
            生成业务名
            <el-tooltip content="功能英文名,用来组成文件命名" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.businessName"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <span slot="label">
            生成模块名
            <el-tooltip content="功能英文名,用来组成分包命名" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.moduleName"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <span slot="label">
            生成子模块名
            <el-tooltip content="用于切分子文件夹,防止文件过多导致阅读性下降,比如MesModuleDbcRelIn的模块名是tms,子模块名是mes" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.moduleNameSub"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <span slot="label">
            生成功能名
            <el-tooltip content="用作类描述,例如 用户" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.functionName"/>
        </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>

      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            上级菜单
            <el-tooltip content="分配到指定菜单下,例如 系统管理" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <treeselect
            :append-to-body="true"
            v-model="info.parentMenuId"
            :options="menus"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择系统菜单"
          />
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="info.genType == '1'">
        <el-form-item prop="genPath">
          <span slot="label">
            自定义路径
            <el-tooltip content="填写磁盘绝对路径,若不填写,则生成到当前Web项目下" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.genPath">
            <el-dropdown slot="append">
              <el-button type="primary">
                最近路径快速选择
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-show="info.tplCategory == 'tree'">
      <h4 class="form-header">其他信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树编码字段
            <el-tooltip content="树显示的编码字段名, 如:dept_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + ':' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树父编码字段
            <el-tooltip content="树显示的父编码字段名, 如:parent_Id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeParentCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + ':' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树名称字段
            <el-tooltip content="树节点的显示名称字段名, 如:dept_name" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeName" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + ':' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="info.tplCategory == 'sub'">
      <h4 class="form-header">关联信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            关联子表的表名
            <el-tooltip content="关联子表的表名, 如:sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
            <el-option
              v-for="(table, index) in tables"
              :key="index"
              :label="table.tableName + ':' + table.tableComment"
              :value="table.tableName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            子表关联的外键名
            <el-tooltip content="子表关联的外键名, 如:user_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableFkName" placeholder="请选择">
            <el-option
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + ':' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  props: {
    info: {
      type: Object,
      default: null,
    },
    tables: {
      type: Array,
      default: null,
    },
    menus: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      subColumns: [],
      rules: {
        tplCategory: [
          { required: true, message: "请选择生成模板", trigger: "blur" },
        ],
        packageName: [
          { required: true, message: "请输入生成包路径", trigger: "blur" },
        ],
        moduleName: [
          { required: true, message: "请输入生成模块名", trigger: "blur" },
        ],
        businessName: [
          { required: true, message: "请输入生成业务名", trigger: "blur" },
        ],
        functionName: [
          { required: true, message: "请输入生成功能名", trigger: "blur" },
        ],
        entityPath: [
          { required: true, message: "请输入实体类根路径", trigger: "blur" },
        ],
        mapperPath: [
          { required: true, message: "请输入业务根路径", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    "info.subTableName": function(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;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
    /** 选择子表名触发 */
    subSelectChange(value) {
      this.info.subTableFkName = "";
    },
    /** 选择生成模板触发 */
    tplSelectChange(value) {
      if (value !== "sub") {
        this.info.subTableName = "";
        this.info.subTableFkName = "";
      }
    },
    /** 设置关联外键 */
    setSubTableColumns(value) {
      for (var item in this.tables) {
        const name = this.tables[item].tableName;
        if (value === name) {
          this.subColumns = this.tables[item].columns;
          break;
        }
      }
    },
  },
};
</script>


http://www.kler.cn/a/576162.html

相关文章:

  • 光路科技将携最新TSN交换机亮相高速展,展示智慧交通创新解决方案
  • AI 实战 - pytorch框架基于retinaface实现face检测
  • 游戏引擎学习第143天
  • Nginx多服务器转发接口数据,实现单接口多服务器处理数据,达到数据共享
  • 【微信小程序】uniapp开发微信小程序
  • 网络安全区划分
  • 使用PHP实现微服务架构:挑战与解决方案
  • SQL-labs13-16闯关记录
  • Docker Desktop常见问题记录
  • 微信小程序+SpringBoot的单词学习小程序平台(程序+论文+讲解+安装+修改+售后)
  • 【计算机网络】计算机网络的性能指标——时延、时延带宽积、往返时延、信道利用率
  • Java 面试篇-SSM 框架专题(什么是 AOP?Spring 中事务时如何实现的?事务失效的场景?Spring 中循环引用怎么解决?Springboot 的自动配置原理?Spring 常见注解?)
  • BFS(八)515. 在每个树行中找最大值 中等
  • OpenCV计算摄影学(14)实现对比度保留去色(Contrast Preserving Decolorization)的函数decolor()
  • SpringBoot知识点及其源码解析(1)
  • 发行基础:热销商品榜单
  • 图形界面控件编程(iOS)
  • 机器学习——回归树
  • linux-mysql
  • C语言【进阶篇】之结构体 —— 从基础声明到复杂应用的进阶之路