update element-plus 升级 2.7.1 并适配代码

疯狂的狮子Li

2024-04-20 e2bdae5bf2a2acf562ac985c8607700912a9e3a3

 src/views/tool/gen/genInfoForm.vue

@@ -1,76 +1,3 @@
<script setup lang="ts">
import { listMenu } from '@/api/system/menu';
import { ComponentInternalInstance, PropType } from 'vue';

interface MenuOptionsType {
  menuId: number;
  menuName: string;
  children: MenuOptionsType[] | undefined;
}

const subColumns = ref<any>([]);
const menuOptions = ref<Array<MenuOptionsType>>([]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const props = defineProps({
  info: {
    type: Object as PropType<any>,
    default: null
  },
  tables: {
    type: Array as PropType<any[]>,
    default: null
  }
});

const infoForm = computed(() => props.info);

const table = computed(() => props.tables);

// 表单校验
const rules = ref({
  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" }]
});
const subSelectChange = () => {
  infoForm.value.subTableFkName = "";
}
const tplSelectChange = (value: string) => {
  if (value !== "sub") {
    infoForm.value.subTableName = "";
    infoForm.value.subTableFkName = "";
  }
}
const setSubTableColumns = (value: string) => {
  table.value.forEach(item => {
    const name = item.tableName;
    if (value === name) {
      subColumns.value = item.columns;
      return;
    }
  })
}
/** 查询菜单下拉树结构 */
const getMenuTreeselect = async () => {
  const res = await listMenu();
  const data = proxy?.handleTree<MenuOptionsType>(res.data, "menuId");
  if (data) {
    menuOptions.value = data
  }
}

watch(() => props.info.subTableName, val => {
  setSubTableColumns(val);
});

onMounted(() => {
  getMenuTreeselect();
})
</script>

<template>
  <el-form ref="genInfoForm" :model="infoForm" :rules="rules" label-width="150px">
    <el-row>
@@ -140,11 +67,17 @@
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <tree-select
            v-model:value="infoForm.parentMenuId"
            :options="menuOptions"
            :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
            placeholder="请选择系统菜单"
          <el-tree-select
            v-model="infoForm.parentMenuId"
            :data="menuOptions"
            :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
            value-key="menuId"
            node-key="menuId"
            placeholder="选择上级菜单"
            check-strictly
            filterable
            clearable
            highlight-current
          />
        </el-form-item>
      </el-col>
@@ -157,12 +90,12 @@
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-radio v-model="infoForm.genType" label="0">zip压缩包</el-radio>
          <el-radio v-model="infoForm.genType" label="1">自定义路径</el-radio>
          <el-radio v-model="infoForm.genType" value="0">zip压缩包</el-radio>
          <el-radio v-model="infoForm.genType" value="1">自定义路径</el-radio>
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="infoForm.genType == '1'">
      <el-col v-if="infoForm.genType == '1'" :span="24">
        <el-form-item prop="genPath">
          <template #label>
            自定义路径
@@ -287,3 +220,76 @@
    </template>
  </el-form>
</template>

<script setup lang="ts">
import { listMenu } from '@/api/system/menu';
import { propTypes } from '@/utils/propTypes';

interface MenuOptionsType {
  menuId: number | string;
  menuName: string;
  children?: MenuOptionsType[];
}
const { proxy } = getCurrentInstance();

const subColumns = ref<any>([]);
const menuOptions = ref<Array<MenuOptionsType>>([]);

const props = defineProps({
  info: propTypes.any.isRequired,
  tables: propTypes.any.isRequired
});

const infoForm = computed(() => props.info);

const table = computed(() => props.tables);

// 表单校验
const rules = ref({
  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' }]
});
const subSelectChange = () => {
  infoForm.value.subTableFkName = '';
};
const tplSelectChange = (value: string) => {
  if (value !== 'sub') {
    infoForm.value.subTableName = '';
    infoForm.value.subTableFkName = '';
  }
};
const setSubTableColumns = (value: string) => {
  table.value.forEach((item: any) => {
    const name = item.tableName;
    if (value === name) {
      subColumns.value = item.columns;
      return;
    }
  });
};

/** 查询菜单下拉树结构 */
const getMenuTreeselect = async () => {
  const res = await listMenu();
  res.data.forEach((m) => (m.menuId = m.menuId.toString()));
  const data = proxy?.handleTree<MenuOptionsType>(res.data, 'menuId');

  if (data) {
    menuOptions.value = data;
  }
};

watch(
  () => props.info.subTableName,
  (val) => {
    setSubTableColumns(val);
  }
);

onMounted(() => {
  getMenuTreeselect();
});
</script>