智慧园区web后台管理-vue
zrj
2024-10-26 269b2da9f9a2d1dde4988fe64f79091e2fbcd659
src/views/tool/code.vue
@@ -7,7 +7,7 @@
      ref="crud"
      v-model="form"
      :permission="permissionList"
      v-model:page="page"
      :page.sync="page"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
@@ -23,122 +23,416 @@
      <template #menu-left>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          v-if="permission.code_delete"
          plain
          @click="handleDelete"
          >删 除
        </el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="将选中的多重配置集合批量生成代码"
          placement="top"
        >
          <el-button type="primary" plain icon="el-icon-refresh" @click="handleBuild"
            >代码批量生成
          </el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="不通过多重配置直接生成最简化的CRUD代码"
          placement="top"
        >
          <el-button type="info" plain icon="el-icon-cpu" @click="handleCodeGen"
            >代码快速生成
          </el-button>
        </el-tooltip>
        <el-button type="primary" size="small" plain icon="el-icon-refresh" @click="handleBuild"
          >代码生成
        </el-button>
      </template>
      <template #menu-right>
        <el-tooltip
          class="item"
          effect="dark"
          content="配置代码生成的默认参数后自动绑定"
          placement="top"
        >
          <el-button
            plain
            v-if="userInfo.role_name.includes('administrator')"
            icon="el-icon-message-box"
            @click="handleCodeSetting"
            >默认配置管理
          </el-button>
        </el-tooltip>
      </template>
      <template #menu="scope">
      <template #menu>
        <el-button
          type="primary"
          text
          type="text"
          :size="size"
          icon="el-icon-document-copy"
          v-if="permission.code_edit"
          class="none-border"
          @click.stop="handleCopy(scope.row)"
          @click.stop="handleCopy(row)"
          >复制
        </el-button>
        <el-button
          type="primary"
          text
          icon="el-icon-refresh"
          v-if="userInfo.role_name.includes('administrator')"
          class="none-border"
          @click.stop="handleBuildSingle(scope.row)"
          >生成
        </el-button>
      </template>
    </avue-crud>
    <el-drawer title="代码快速生成" append-to-body v-model="codeGenBox" direction="rtl" size="50%">
      <avue-form :option="genOption" v-model="genForm" @submit="handleCodeGenSubmit" />
    </el-drawer>
    <el-drawer
      title="默认配置管理"
      append-to-body
      v-model="codeSettingBox"
      direction="rtl"
      size="1000px"
    >
      <code-setting></code-setting>
    </el-drawer>
  </basic-container>
</template>
<script>
import { getList, getCode, build, remove, add, update, copy, buildFast } from '@/api/tool/code';
import { getEnableDetail } from '@/api/tool/codesetting';
import {
  getDetail as modelDetail,
  getTableInfoByName,
  getTableList,
  prototypeDetail,
} from '@/api/tool/model';
import { codeOption, genOption } from '@/option/tool/code';
import { validatejson, validatenull } from '@/utils/validate';
import { getList, getCode, build, remove, add, update, copy } from '@/api/tool/code';
import { getDetail as modelDetail, prototypeDetail } from '@/api/tool/model';
import { templateDic } from '@/const/tool/model';
import { validatenull } from '@/utils/validate';
import { mapGetters } from 'vuex';
import { getMenuTree } from '@/api/system/menu';
export default {
  data() {
    return {
      form: {},
      genForm: {},
      selectionList: [],
      loading: true,
      loadingOption: {
        lock: true,
        text: '物理表读取中',
        background: 'rgba(0, 0, 0, 0.7)',
      },
      codeGenBox: false,
      codeSettingBox: false,
      codeSetting: {},
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: codeOption,
      genOption: genOption,
      option: {
        labelWidth: 120,
        searchLabelWidth: 96,
        searchShow: true,
        searchMenuSpan: 3,
        menuWidth: 280,
        height: 'auto',
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogClickModal: false,
        tabs: true,
        column: [
          {
            label: '模块名',
            prop: 'codeName',
            searchLabelWidth: 60,
            searchSpan: 4,
            search: true,
            display: false,
          },
          {
            label: '模版类型',
            prop: 'templateType',
            type: 'select',
            dicData: templateDic,
            display: false,
          },
          {
            label: '表名',
            prop: 'tableName',
            searchLabelWidth: 66,
            searchSpan: 4,
            search: true,
            display: false,
          },
          {
            label: '服务名',
            prop: 'serviceName',
            searchLabelWidth: 80,
            searchSpan: 4,
            search: true,
            display: false,
          },
          {
            label: '包名',
            prop: 'packageName',
            display: false,
          },
        ],
        group: [
          {
            label: '模型配置',
            prop: 'modelSetting',
            icon: 'el-icon-tickets',
            column: [
              {
                label: '数据模型',
                prop: 'modelId',
                search: true,
                span: 24,
                type: 'select',
                dicUrl: '/api/blade-develop/model/select',
                props: {
                  label: 'modelName',
                  value: 'id',
                },
                rules: [
                  {
                    required: true,
                    message: '请选择数据模型',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '模块名',
                prop: 'codeName',
                search: true,
                rules: [
                  {
                    required: true,
                    message: '请输入模块名',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '服务名',
                prop: 'serviceName',
                search: true,
                rules: [
                  {
                    required: true,
                    message: '请输入服务名',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '表名',
                prop: 'tableName',
                rules: [
                  {
                    required: true,
                    message: '请输入表名',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '表前缀',
                prop: 'tablePrefix',
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请输入表前缀',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '主键名',
                prop: 'pkName',
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请输入主键名',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '包名',
                prop: 'packageName',
                overHidden: true,
                rules: [
                  {
                    required: true,
                    message: '请输入包名',
                    trigger: 'blur',
                  },
                ],
              },
            ],
          },
          {
            label: '模版配置',
            prop: 'templateSetting',
            icon: 'el-icon-copy-document',
            column: [
              {
                label: '模版类型',
                prop: 'templateType',
                type: 'select',
                dicData: templateDic,
                value: 'crud',
                rules: [
                  {
                    required: true,
                    message: '请选择模版类型',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '作者信息',
                prop: 'author',
                value: 'BladeX',
                rules: [
                  {
                    required: true,
                    message: '请输入作者',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '子表模型',
                prop: 'subModelId',
                type: 'select',
                dicUrl: '/api/blade-develop/model/select',
                props: {
                  label: 'modelName',
                  value: 'id',
                },
                display: false,
                hide: true,
              },
              {
                label: '子表外键',
                prop: 'subFkId',
                display: false,
                hide: true,
              },
              {
                label: '树主键字段',
                prop: 'treeId',
                type: 'select',
                dicData: [],
                props: {
                  label: 'jdbcComment',
                  value: 'jdbcName',
                },
                display: false,
                hide: true,
              },
              {
                label: '树父主键字段',
                prop: 'treePid',
                type: 'select',
                dicData: [],
                props: {
                  label: 'jdbcComment',
                  value: 'jdbcName',
                },
                display: false,
                hide: true,
              },
              {
                label: '树名称字段',
                prop: 'treeName',
                type: 'select',
                dicData: [],
                props: {
                  label: 'jdbcComment',
                  value: 'jdbcName',
                },
                display: false,
                hide: true,
              },
            ],
          },
          {
            label: '生成配置',
            prop: 'codingSetting',
            icon: 'el-icon-printer',
            column: [
              {
                label: '基础业务',
                labelTip: '配置是否使用BladeX封装的BaseService解锁更多功能',
                prop: 'baseMode',
                type: 'radio',
                dicUrl: '/api/blade-system/dict/dictionary?code=yes_no',
                props: {
                  label: 'dictValue',
                  value: 'dictKey',
                },
                value: 2,
                dataType: 'number',
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请选择基础业务',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '包装器',
                labelTip: '配置是否使用Wrapper包装器来拓展Controller返回列表的字段',
                prop: 'wrapMode',
                type: 'radio',
                dicUrl: '/api/blade-system/dict/dictionary?code=yes_no',
                props: {
                  label: 'dictValue',
                  value: 'dictKey',
                },
                value: 2,
                dataType: 'number',
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请选择包装器',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '远程调用',
                labelTip: '配置是否使用Feign远程调用',
                prop: 'feignMode',
                type: 'radio',
                dicUrl: '/api/blade-system/dict/dictionary?code=yes_no',
                props: {
                  label: 'dictValue',
                  value: 'dictKey',
                },
                value: 1,
                dataType: 'number',
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请选择基础业务',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '代码风格',
                labelTip: '选择不同底层实现的代码模版',
                prop: 'codeStyle',
                type: 'radio',
                dicData: [
                  {
                    label: 'saber',
                    value: 'saber',
                  },
                  {
                    label: 'element',
                    value: 'element',
                  },
                ],
                value: 'saber',
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请选择代码风格',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '后端生成路径',
                prop: 'apiPath',
                span: 24,
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请输入后端生成路径',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '前端生成路径',
                prop: 'webPath',
                span: 24,
                hide: true,
                rules: [
                  {
                    required: true,
                    message: '请输入前端生成路径',
                    trigger: 'blur',
                  },
                ],
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
@@ -150,28 +444,27 @@
          const result = res.data;
          if (result.success) {
            const { modelName, modelTable, modelCode } = result.data;
            const lowerModelCode = modelCode.toLowerCase();
            //if (validatenull(this.form.tablePrefix)) {
            this.form.tablePrefix = modelTable.split('_')[0] + '_';
            //}
            //if (validatenull(this.form.tableName)) {
            this.form.tableName = modelTable;
            //}
            //if (validatenull(this.form.codeName)) {
            this.form.codeName = modelName;
            //}
            if (validatenull(this.form.tablePrefix)) {
              this.form.tablePrefix = modelTable.split('_')[0] + '_';
            }
            if (validatenull(this.form.tableName)) {
              this.form.tableName = modelTable;
            }
            if (validatenull(this.form.codeName)) {
              this.form.codeName = modelName;
            }
            if (validatenull(this.form.serviceName)) {
              this.form.serviceName = `blade-${lowerModelCode}`;
              this.form.serviceName = `blade-${modelCode}`;
            }
            //if (validatenull(this.form.pkName)) {
            this.form.pkName = 'id';
            //}
            if (validatenull(this.form.pkName)) {
              this.form.pkName = 'id';
            }
            if (validatenull(this.form.packageName)) {
              this.form.packageName = `org.springblade.${lowerModelCode}`;
              this.form.packageName = `org.springblade.modules.${modelCode}`;
            }
            //if (validatenull(this.form.subFkId) && !validatenull(this.form.tablePrefix)) {
            this.form.subFkId = modelTable.replace(this.form.tablePrefix, '') + '_id';
            //}
            if (validatenull(this.form.subFkId) && !validatenull(this.form.tablePrefix)) {
              this.form.subFkId = modelTable.replace(this.form.tablePrefix, '') + '_id';
            }
            // 获取数据原型信息
            prototypeDetail(this.form.modelId).then(res => {
@@ -207,72 +500,15 @@
      columnTreePid.display = type === 'tree';
      columnTreeName.display = type === 'tree';
    },
    'genForm.datasourceId'() {
      if (!validatenull(this.genForm.datasourceId)) {
        const fullLoading = this.$loading(this.loadingOption);
        getTableList(this.genForm.datasourceId)
          .then(res => {
            const column = this.findObject(this.genOption.column, 'modelTable');
            column.dicData = res.data.data;
            fullLoading.close();
          })
          .catch(() => {
            fullLoading.close();
          });
      }
    },
    'genForm.modelTable'() {
      if (!validatenull(this.genForm.modelTable)) {
        const fullLoading = this.$loading(this.loadingOption);
        getTableInfoByName(this.genForm.modelTable, this.genForm.datasourceId)
          .then(res => {
            const result = res.data;
            if (result.success) {
              // 赋默认值
              const { comment, entityName } = result.data;
              this.genForm.modelClass = entityName;
              this.genForm.modelCode = entityName.replace(/^\S/, s => s.toLowerCase());
              const lowerModelCode = this.genForm.modelCode.toLowerCase();
              this.genForm.tablePrefix = this.genForm.modelTable.split('_')[0] + '_';
              this.genForm.tableName = this.genForm.modelTable;
              this.genForm.codeName = comment;
              this.genForm.pkName = 'id';
              if (validatenull(this.genForm.serviceName)) {
                this.genForm.serviceName = `blade-${lowerModelCode}`;
              }
              if (validatenull(this.genForm.packageName)) {
                this.genForm.packageName = `org.springblade.${lowerModelCode}`;
              }
              // 字段显隐
              const columnModelClass = this.findObject(this.genOption.column, 'modelClass');
              const columnModelCode = this.findObject(this.genOption.column, 'modelCode');
              const columnTablePrefix = this.findObject(this.genOption.column, 'tablePrefix');
              const columnTableName = this.findObject(this.genOption.column, 'tableName');
              const columnCodeName = this.findObject(this.genOption.column, 'codeName');
              const columnPkName = this.findObject(this.genOption.column, 'pkName');
              columnModelClass.display = true;
              columnModelCode.display = true;
              columnTablePrefix.display = true;
              columnTableName.display = true;
              columnCodeName.display = true;
              columnPkName.display = true;
              fullLoading.close();
            }
          })
          .catch(() => {
            fullLoading.close();
          });
      }
    },
  },
  computed: {
    ...mapGetters(['userInfo', 'permission']),
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.code_add, false),
        viewBtn: this.validData(this.permission.code_view, false),
        delBtn: this.validData(this.permission.code_delete, false),
        editBtn: this.validData(this.permission.code_edit, false),
        addBtn: true,
        viewBtn: true,
        delBtn: true,
        editBtn: true,
      };
    },
    ids() {
@@ -284,60 +520,6 @@
    },
  },
  methods: {
    initData() {
      getMenuTree().then(res => {
        const column = this.findObject(this.option.group, 'menuId');
        column.dicData = res.data.data;
      });
    },
    initGenData() {
      getMenuTree().then(res => {
        const column = this.findObject(this.genOption.column, 'menuId');
        column.dicData = res.data.data;
      });
      getEnableDetail().then(res => {
        if (validatejson(res.data.data.settings)) {
          this.codeSetting = JSON.parse(res.data.data.settings);
          this.genForm = {
            menuId: this.codeSetting.menuId,
            serviceName: this.codeSetting.serviceName,
            packageName: this.codeSetting.packageName,
            baseMode: this.codeSetting.baseMode,
            wrapMode: this.codeSetting.wrapMode,
            feignMode: this.codeSetting.feignMode,
            codeStyle: this.codeSetting.codeStyle,
            apiPath: this.codeSetting.apiPath,
            webPath: this.codeSetting.webPath,
          };
          this.$message({
            type: 'success',
            message: '默认配置加载成功',
          });
        }
      });
    },
    initSetting() {
      getEnableDetail().then(res => {
        if (validatejson(res.data.data.settings)) {
          this.codeSetting = JSON.parse(res.data.data.settings);
          this.form = {
            menuId: this.codeSetting.menuId,
            serviceName: this.codeSetting.serviceName,
            packageName: this.codeSetting.packageName,
            baseMode: this.codeSetting.baseMode,
            wrapMode: this.codeSetting.wrapMode,
            feignMode: this.codeSetting.feignMode,
            codeStyle: this.codeSetting.codeStyle,
            apiPath: this.codeSetting.apiPath,
            webPath: this.codeSetting.webPath,
          };
          this.$message({
            type: 'success',
            message: '默认配置加载成功',
          });
        }
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
@@ -386,13 +568,6 @@
            message: '操作成功!',
          });
        });
    },
    handleCodeGen() {
      this.initGenData();
      this.codeGenBox = true;
    },
    handleCodeSetting() {
      this.codeSettingBox = true;
    },
    searchReset() {
      this.query = {};
@@ -443,8 +618,11 @@
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        return build(this.ids).then(() => {
      })
        .then(() => {
          return build(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
@@ -452,40 +630,6 @@
          });
          this.$refs.crud.toggleSelection();
        });
      });
    },
    handleBuildSingle(row) {
      this.$confirm(`是否生成选中模块 [${row.codeName}] 的代码?`, {
        title: '代码生成确认',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        return build(row.id).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
      });
    },
    handleCodeGenSubmit(form, done, loading) {
      buildFast(form).then(
        () => {
          this.$message({
            type: 'success',
            message: '代码生成成功!',
          });
          done();
          this.codeGenBox = false;
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    handleCopy(row) {
      copy(row.id).then(() => {
@@ -497,12 +641,6 @@
      });
    },
    beforeOpen(done, type) {
      if (['add'].includes(type)) {
        this.initSetting();
      }
      if (['add', 'edit'].includes(type)) {
        this.initData();
      }
      if (['edit', 'view'].includes(type)) {
        getCode(this.form.id).then(res => {
          this.form = res.data.data;