修复分页组件请求两次问题(I4SQOR)

RuoYi

2022-02-17 d734bfc34f65b6cd036b5f21b718294152fecacf

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

@@ -4,13 +4,13 @@
      <el-col :span="12">

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

          <span slot="label">生成模板</span>

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

          <el-select v-model="info.tplCategory" @change="tplSelectChange">

            <el-option label="单表（增删改查）" value="crud" />

            <el-option label="树表（增删改查）" value="tree" disabled/>

            <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="packageName">

          <span slot="label">

@@ -58,6 +58,60 @@
          <el-input v-model="info.functionName" />

        </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="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="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'">

@@ -72,8 +126,8 @@
          </span>

          <el-select v-model="info.treeCode" placeholder="请选择">

            <el-option

              v-for="column in info.columns"

              :key="column.columnName"

              v-for="(column, index) in info.columns"

              :key="index"

              :label="column.columnName + '：' + column.columnComment"

              :value="column.columnName"

            ></el-option>

@@ -90,8 +144,8 @@
          </span>

          <el-select v-model="info.treeParentCode" placeholder="请选择">

            <el-option

              v-for="column in info.columns"

              :key="column.columnName"

              v-for="(column, index) in info.columns"

              :key="index"

              :label="column.columnName + '：' + column.columnComment"

              :value="column.columnName"

            ></el-option>

@@ -108,8 +162,47 @@
          </span>

          <el-select v-model="info.treeName" placeholder="请选择">

            <el-option

              v-for="column in info.columns"

              :key="column.columnName"

              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>

@@ -119,17 +212,30 @@
    </el-row>

  </el-form>

</template>



<script>

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

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



export default {

  name: "BasicInfoForm",

  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" }

@@ -145,10 +251,49 @@
        ],

        functionName: [

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

        ]

        ],

      }

    };

  },

  created() {}

  created() {},

  watch: {

    'info.subTableName': function(val) {

      this.setSubTableColumns(val);

    }

  },

  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>