<template>
<div v-show="active === flag" class="step-main">
<div class="step-content">
<
el-form ref="baseForm"
:mod
el="baseFormCurr"
:rules="rules" lab
el-width="105px">
<
el-row
:gutter="10">
<
el-col
:lg="8"
:md="12"
:sm="24"
:xl="8"
:xs="24">
<
el-form-item lab
el="表名称" prop="tableName">
<
el-input v-mod
el="baseFormCurr
.tableName" autocomplete="off"></
el-input>
</
el-form-item>
</
el-col>
<
el-col
:lg="8"
:md="12"
:sm="24"
:xl="8"
:xs="24">
<
el-form-item lab
el="表类型" prop="tableType">
<
el-s
elect v-mod
el="baseFormCurr
.tableType"
:disabled="formState
.tableType"
placeholder="请选择" style="width
: 100%"
@change="tableTypeChange">
<
el-option
v-for="item in dictCurr
.table_type"
:key="item
.dictValue"
:lab
el="item
.dictName"
:value="item
.dictValue"
></
el-option>
</
el-s
elect>
</
el-form-item>
</
el-col>
<
el-col
:lg="8"
:md="12"
:sm="24"
:xl="8"
:xs="24">
<
el-form-item lab
el="描述" prop="comments">
<
el-input v-mod
el="baseFormCurr
.comments"
autocomplete="off"
maxlength="100"
show-word-limit
></
el-input>
</
el-form-item>
</
el-col>
<
el-col
:lg="8"
:md="12"
:sm="24"
:xl="8"
:xs="24">
<
el-form-item lab
el="数据库类型" prop="jdbcType">
<
el-s
elect ref="jdbcType" v-mod
el="baseFormCurr
.jdbcType"
:disabled="formState
.jdbcType"
placeholder="请选择" style="width
: 100%"
@change="jdbcTypeChange">
<
el-option
v-for="item in dictCurr
.jdbc_type"
:key="item
.dictValue"
:lab
el="item
.dictName"
:value="item
.dictValue"
></
el-option>
</
el-s
elect>
</
el-form-item>
</
el-col>
<
el-col
:lg="8"
:md="12"
:sm="24"
:xl="8"
:xs="24">
<
el-form-item lab
el="备注" prop="remark">
<
el-input v-mod
el="baseFormCurr
.remark"
autocomplete="off"
maxlength="120"
show-word-limit
></
el-input>
</
el-form-item>
</
el-col>
</
el-row>
</
el-form>
<vab-query-form>
<vab-query-form-left-pan
el>
<
el-button
:disabled="!baseFormCurr
.jdbcType"
icon="
el-icon-plus"
type="primary"
@click="columnHandleAdd">
添加
</
el-button>
<
el-button icon="
el-icon-plus"
type="primary"
@click="dialogVisible = true">
常用字段
</
el-button>
<
el-button
:disabled="!s
electRows
.length > 0"
icon="
el-icon-d
elete"
type="danger"
@click="columnHandleD
elete"
> 删除
</
el-button>
</vab-query-form-left-pan
el>
</vab-query-form>
<
el-form ref="tableForm"
:mod
el="{'tableForm'
: tableFormCurr}">
<
el-table
:data="tableFormCurr"
:element-loading-text="
elementLoadingText"
border
@s
election-change="setS
electRows"
>
<
el-table-column show-overflow-tooltip type="s
election"></
el-table-column>
<
el-table-column
align="center"
lab
el="拖动"
show-overflow-tooltip
width="60"
>
<template v-slot="scope">
<
el-button circle
class="move-btn"
icon="
el-icon-d-caret"
></
el-button>
</template>
</
el-table-column>
<
el-table-column
lab
el="字段名称"
min-width="200"
prop="fi
eldName"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.fi
eldName'"
:rules="columnRules
.fi
eldName"
class="
el-form-item-table"
>
<
el-input v-mod
el="scope
.row
.fi
eldName"
:disabled="scope
.row
.disabled"
style="width
: 100%"/>
</
el-form-item>
</template>
</
el-table-column>
<
el-table-column
lab
el="字段类型"
min-width="180"
prop="fi
eldType"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.fi
eldType'"
:rules="columnRules
.fi
eldType"
class="
el-form-item-table"
>
<
el-s
elect v-mod
el="scope
.row
.fi
eldType"
:disabled="scope
.row
.disabled"
default-first-option="" filterable
placeholder="请选择"
style="width
: 100%">
<
el-option
v-for="item in baseDictData
.fi
eldList"
:key="item"
:lab
el="item"
:value="item"
></
el-option>
</
el-s
elect>
</
el-form-item>
</template>
</
el-table-column>
<
el-table-column
lab
el="字段长度"
min-width="140"
prop="fi
eldLength"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.fi
eldLength'"
class="
el-form-item-table"
>
<
el-input-number v-mod
el="scope
.row
.fi
eldLength"
:disabled="scope
.row
.disabled"
:max="20000"
:min="0" controls-position="right"
style="width
: 100%"
></
el-input-number>
</
el-form-item>
</template>
</
el-table-column>
<
el-table-column
lab
el="字段精度"
min-width="140"
prop="fi
eldPrecision"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.fi
eldComments'"
class="
el-form-item-table"
>
<
el-input-number v-mod
el="scope
.row
.fi
eldPrecision"
:disabled="scope
.row
.disabled"
:max="100"
:min="0" controls-position="right"
style="width
: 100%"
></
el-input-number>
</
el-form-item>
</template>
</
el-table-column>
<
el-table-column
lab
el="字段描述"
min-width="240"
prop="fi
eldComments"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.fi
eldComments'"
:rules="columnRules
.fi
eldComments"
class="
el-form-item-table"
>
<
el-input v-mod
el="scope
.row
.fi
eldComments"
:disabled="scope
.row
.disabled"
maxlength="100"
show-word-limit
style="width
: 100%"/>
</
el-form-item>
</template>
</
el-table-column>
<
el-table-column
lab
el="主键"
min-width="80"
prop="izPk"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.izPk'"
class="
el-form-item-table"
>
<
el-switch
v-mod
el="scope
.row
.izPk"
:active-value="1"
:disabled="scope
.row
.disabled"
:inactive-value="0"
@change="pKChange(scope
.row)"
>
</
el-switch>
</
el-form-item>
</template>
</
el-table-column>
<
el-table-column
lab
el="非空"
min-width="80"
prop="izNotNull"
show-overflow-tooltip
>
<template v-slot="scope">
<
el-form-item
:prop="'tableForm
.'+scope
.$index+'
.izNotNull'"
class="
el-form-item-table"
>
<
el-switch
v-mod
el="scope
.row
.izNotNull"
:active-value="1"
:disabled="scope
.row
.disabled || scope
.row
.izPk === 1"
:inactive-value="0"
>
</
el-switch>
</
el-form-item>
</template>
</
el-table-column>
</
el-table>
</
el-form>
</div>
<step-footer
ref="step-footer"
:flag="flag"
:info-data="{
obj
: this,
baseForm
: baseFormCurr,
tableForm
: tableFormCurr
}"
:max-flag="maxFlag"
:min-flag="minFlag"
></step-footer>
<!-- 选择预制字段-->
<
el-dialog
:before-close="handleClose"
:visible
.sync="dialogVisible"
append-to-body
title="选择常见字段"
width="30%">
<div>
<template v-for="item in BuiltInFi
elds">
<
el-checkbox v-mod
el="BuiltInFi
eldsS
elect"
:lab
el="item
.fi
eldName" border style="margin
: 5px"
@change="changeBuiltInFi
eldsS
elect"></
el-checkbox>
</template>
</div>
<span slot="footer" class="dialog-footer">
<
el-button @click="dialogVisible = false">取 消</
el-button>
<
el-button type="primary" @click="AddDefaultFi
elds">确 定</
el-button>
</span>
</
el-dialog>
</div>
</template>
<script>
import {isCode, isNull} from "@/utils/validate";
import StepFooter from "
./footer/StepFooter
.vue"
import {deepClone} from "@/utils/clone";
import Sortable from "sortablejs";
import {uuid} from "@/utils";
import {getFi
eldTypes, getJavaFi
eldTypesBySafety} from "@/api/generator/tableManagement";
import {isNotNull} from "@/utils/valiargs";
import { useGlobalStore } from '@/pinia/global';
let state = useGlobalStore();
export default {
name
: "TableDataStep",
components
: {Sortable, StepFooter},
props
: {
active
: {
type
: Number,
default
: () => {
return 1;
},
},
minFlag
: {
type
: Number,
default
: () => {
return 1;
},
},
maxFlag
: {
type
: Number,
default
: () => {
return 1;
},
},
baseForm
: {
type
: Object,
default
: () => {
return {};
},
},
tableForm
: {
type
: Array,
default
: () => {
return [];
},
},
dict
: {
type
: Object,
default
: () => {
return {};
},
},
baseDictData
: {
type
: Object,
default
: () => {
return {
fi
eldList
: [],
JavaFi
eldMap
: {},
};
},
}
},
data() {
const validateTableName = (rule, value, callback) => {
if (isNull(value)) {
callback(new Error("请输入表名"));
}
if (!isCode(value)) {
callback(new Error("表名只能为字母、数字或下划线"));
}
else {
callback();
}
};
const validateName = (rule, value, callback) => {
if (!isCode(value)) {
callback(new Error("只能为字母、数字或下划线"));
}
else {
callback();
}
};
return {
BuiltInFi
eldsS
elect
: [],//已选中的字段
BuiltInFi
elds
:
[
{
"encryptData"
: null,
"fi
eldName"
: "id",
"fi
eldType"
: "bigint",
"fi
eldLength"
: 19,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "唯一主键",
"izPk"
: 1,
"izNotNull"
: 1,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 0,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"encryptData"
: null,
"fi
eldName"
: "org_ids",
"fi
eldType"
: "varchar",
"fi
eldLength"
: 500,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "父级主键集合",
"izPk"
: 0,
"izNotNull"
: 0,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 1,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"encryptData"
: null,
"fi
eldName"
: "tenant_id",
"fi
eldType"
: "bigint",
"fi
eldLength"
: 19,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "多租户ID",
"izPk"
: 0,
"izNotNull"
: 0,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 8,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"encryptData"
: null,
"fi
eldName"
: "create_by",
"fi
eldType"
: "bigint",
"fi
eldLength"
: 19,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "创建者",
"izPk"
: 0,
"izNotNull"
: 1,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 10,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"encryptData"
: null,
"fi
eldName"
: "create_time",
"fi
eldType"
: "datetime",
"fi
eldLength"
: 0,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "创建时间",
"izPk"
: 0,
"izNotNull"
: 1,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 11,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"encryptData"
: null,
"fi
eldName"
: "update_by",
"fi
eldType"
: "bigint",
"fi
eldLength"
: 19,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "修改人",
"izPk"
: 0,
"izNotNull"
: 1,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 12,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"encryptData"
: null,
"fi
eldName"
: "update_time",
"fi
eldType"
: "datetime",
"fi
eldLength"
: 0,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "修改时间",
"izPk"
: 0,
"izNotNull"
: 1,
"izShowList"
: null,
"izShowForm"
: null,
"javaType"
: "String",
"showType"
: null,
"dictTypeCode"
: null,
"sort"
: 13,
"validateType"
: null,
"queryType"
: null,
"disabled"
: false
},
{
"fi
eldName"
: "d
elected",
"sort"
: 8,
"izPk"
: 0,
"izNotNull"
: 1,
"izShowList"
: 0,
"izShowForm"
: 0,
"queryType"
: "",
"fi
eldType"
: "int",
"fi
eldLength"
: 1,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "删除",
"javaType"
: "",
"validateType"
: "",
"showType"
: "",
"dictTypeCode"
: "",
"disabled"
: false
},
{
"fi
eldName"
: "version",
"sort"
: 8,
"izPk"
: 0,
"izNotNull"
: 1,
"izShowList"
: 0,
"izShowForm"
: 0,
"queryType"
: "",
"fi
eldType"
: "int",
"fi
eldLength"
: 1,
"fi
eldPrecision"
: 0,
"fi
eldComments"
: "乐观锁",
"javaType"
: "",
"validateType"
: "",
"showType"
: "",
"dictTypeCode"
: "",
"disabled"
: false
}
],
dialogVisible
: false,//选址内置字段
// 标示
flag
: 1,
title
: "数据库表设置",
dictCurr
: [],
baseFormCurr
: {},
tableFormCurr
: [],
formState
: {
jdbcType
: false,
tableType
: false,
},
rules
: {
tableName
: [
{required
: true, trigger
: "blur", validator
: validateTableName},
],
tableType
: [
{required
: true, trigger
: "change", message
: "请选择表类型"},
],
jdbcType
: [
{required
: true, trigger
: "change", message
: "请选择数据库类型"},
],
comments
: [
{required
: true, trigger
: "blur", message
: "请输入描述"},
],
},
treeName
: "parent_id",
// 新增字段模版
columnFormTemp
: {
id
: "",
sort
: 0,
izPk
: 0,
izNotNull
: 0,
izShowList
: 0,
izShowForm
: 0,
queryType
: "",
fi
eldName
: "",
fi
eldType
: "",
fi
eldLength
: 0,
fi
eldPrecision
: 0,
fi
eldComments
: "",
javaType
: "",
validateType
: "",
showType
: "",
dictTypeCode
: "",
disabled
: false,
},
columnRules
: {
fi
eldName
: [
{required
: true, message
: "请选择字段名称", trigger
: "blur"},
{required
: true, trigger
: "blur", validator
: validateName},
],
fi
eldType
: [
{required
: true, message
: "请选择字段类型", trigger
: "change"},
],
fi
eldComments
: [
{required
: true, message
: "请输入字段描述", trigger
: "blur"},
]
},
layout
: "total, sizes, prev, pager, next, jumper",
s
electRows
: "",
elementLoadingText
: "正在加载
...",
};
},
created() {
// 告诉父节点 自己的 flag 编号
this
.$emit("inform-flag", this
.flag, this
.title);
},
mounted() {
// 拷贝 props
this
.baseFormCurr = deepClone(this
.baseForm);
this
.tableFormCurr = deepClone(this
.tableForm);
this
.dictCurr = deepClone(this
.dict);
// 数据库字段类型
// this
.dictCurr
.fi
eld_type = this
.$getDictList(this
.baseFormCurr
.jdbcType + "_data_type");
// 改成自己项目的字典项获取方式
// this
.dict = state
.sysDict;
// this
.dictCurr
.fi
eld_type = state
.sysDict
.table_type;
let dataType = this
.baseFormCurr
.jdbcType + "_data_type";
// JavaScript 对象支持两种属性访问方式：1点符号：object
.propertyName ,适用于静态属性名。 2方括号符号：object[propertyName] ,适用于动态属性名，propertyName 可以是一个变量或
表达式。
this
.dictCurr
.fi
eld_type = state
.sysDict[dataType];
// 表拖动
this
.rowDrop();
// 初始化数据
this
.doGetFi
eldData();
},
watch
: {
baseForm(newV, oldV) {
this
.baseFormCurr = deepClone(newV);
},
tableForm(newV, oldV) {
this
.tableFormCurr = deepClone(newV);
},
dict(newV, oldV) {
this
.dictCurr = deepClone(newV);
// 数据库字段类型
// this
.dictCurr
.fi
eld_type = this
.$getDictList(this
.baseFormCurr
.jdbcType + "_data_type");
// 改成自己项目的字典项获取方式
// this
.dict = state
.sysDict;
// this
.dictCurr
.fi
eld_type = state
.sysDict
.table_type;
let dataType = this
.baseFormCurr
.jdbcType + "_data_type";
// JavaScript 对象支持两种属性访问方式：1点符号：object
.propertyName ,适用于静态属性名。 2方括号符号：object[propertyName] ,适用于动态属性名，propertyName 可以是一个变量或
表达式。
this
.dictCurr
.fi
eld_type = state
.sysDict[dataType];
},
},
methods
: {
handleClose() {
this
.dialogVisible = false
},
changeBuiltInFi
eldsS
elect(e) {
this
.BuiltInFi
eldsS
elect = this
.remove
ElementsFromArray(this
.BuiltInFi
eldsS
elect, this
.tableFormCurr)
},
remove
ElementsFromArray(A, B) {
A = A
.filter(a => {
let isEqual = B
.some(b => b
.fi
eldName === a);
if (isEqual) {
this
.$message
.error(`已存在字段：${a}`)
}
return !isEqual;
});
return A;
},
//添加默认字段
AddDefaultFi
elds(params) {
console
.log(this
.BuiltInFi
eldsS
elect)
for (const param of this
.BuiltInFi
eldsS
elect) {
this
.AddDefaultFi
elds2(param)
}
this
.dialogVisible = false
},
//方法2
AddDefaultFi
elds2(title) {
let temp = null
for (const temp
Element of this
.BuiltInFi
elds) {
if (temp
Element
.fi
eldName == title) {
temp = temp
Element
}
}
this
.tableFormCurr
.push(temp);
},
// 数据库类型发生改动
jdbcTypeChange(newValue) {
const _this = this;
this
.tableFormCurr
.jdbcType = this
.$refs
.jdbcType
.value;
this
.$baseConfirm("更换数据库类型将会清空当前已设字段，你确定要更换吗", null, () => {
// 改为新值
_this
.tableFormCurr
.jdbcType = newValue;
// 加载字典
// _this
.dictCurr
.fi
eld_type = _this
.$getDictList(_this
.baseFormCurr
.jdbcType + "_data_type");
// 改成自己项目的字典项获取方式
// this
.dict = state
.sysDict;
// this
.dictCurr
.fi
eld_type = state
.sysDict
.table_type;
let dataType = this
.baseFormCurr
.jdbcType + "_data_type";
// JavaScript 对象支持两种属性访问方式：1点符号：object
.propertyName ,适用于静态属性名。 2方括号符号：object[propertyName] ,适用于动态属性名，propertyName 可以是一个变量或
表达式。
this
.dictCurr
.fi
eld_type = state
.sysDict[dataType];
// 清空已有字段数据
_this
.tableFormCurr = [];
// 初始化数据
this
.doGetFi
eldData();
});
},
// 表类型发生改动
tableTypeChange(newValue) {
if (newValue === '0') {
// 删除 parent_id 字段
for (let i = this
.tableFormCurr
.length - 1; i >= 0; i--) {
let item = this
.tableFormCurr[i];
if (item
.fi
eldName === this
.treeName) {
this
.tableFormCurr
.splice(i, 1);
break;
}
}
}
else if (newValue === '1') {
// 删除 parent_id 字段
for (let i = this
.tableFormCurr
.length - 1; i >= 0; i--) {
let item = this
.tableFormCurr[i];
if (item
.fi
eldName === this
.treeName) {
this
.tableFormCurr
.splice(i, 1);
break;
}
}
// 增加 parent_id 字段
let tmp = deepClone(this
.columnFormTemp);
tmp
.disabled = true;
tmp
.fi
eldName = this
.treeName;
tmp
.fi
eldType = "bigint";
tmp
.fi
eldLength = 20;
tmp
.fi
eldComments = "上级ID";
tmp
.javaType = "Integer";
tmp
.izNotNull = 1;
this
.columnHandleAdd(tmp);
}
},
// 主键改动
pKChange(
el) {
if (!isNull(
el)) {
// 如果主键选中 则默认选中不可为空
if (
el.izPk === 1) {
el.izNotNull = 1;
}
else {
el.izNotNull = 0;
}
}
},
// ==============================
async doGetFi
eldData() {
this
.$emit("loading");
// 通知父级 锁定当前表
this
.$emit("inform-data", {
fi
eldList
: await this
.doGetFi
eldTypes(),
JavaFi
eldMap
: await this
.doGetJavaFi
eldTypesBySafety(),
});
this
.$emit("unLoading");
},
// 获得 数据类型
async doGetFi
eldTypes() {
// const { data } = await getFi
eldTypes();
// 改成自己项目的数据返回格式
const res = await getFi
eldTypes();
const data = res
.result
.opsliData
.data;
if (isNotNull(data)) {
return data;
}
return null;
},
// 获得 Java 类型 (安全兜底模式)
async doGetJavaFi
eldTypesBySafety() {
// const { data } = await getJavaFi
eldTypesBySafety();
// 改成自己项目的数据返回格式
const res = await getJavaFi
eldTypesBySafety();
const data = res
.result
.opsliData
.data;
if (isNotNull(data)) {
return data;
}
return null;
},
// 行添加
columnHandleAdd(params) {
let temp;
if (!isNull(params) && !(params instanceof MouseEvent)) {
temp = params;
}
else {
temp = deepClone(this
.columnFormTemp);
}
temp
.id = "temp_" + uuid()
if (this
.tableFormCurr == null || this
.tableFormCurr
.length === 0) {
temp
.sort = 0;
}
else {
temp
.sort = this
.tableFormCurr
.length;
}
this
.tableFormCurr
.push(temp);
},
// 行删除
columnHandleD
elete(row) {
if (row
.id) {
this
.$baseConfirm("你确定要删除当前字段吗", null, () => {
for (let i = this
.tableFormCurr
.length - 1; i >= 0; i--) {
let item = this
.tableFormCurr[i];
if (item
.id === row
.id) {
// 树装接口 不允许删除 parent_id 字段
if (this
.tableFormCurr
.tableType === '1') {
if (item
.fi
eldName !== this
.treeName) {
this
.tableFormCurr
.splice(i, 1);
}
}
else {
this
.tableFormCurr
.splice(i, 1);
}
break;
}
}
});
}
else if (this
.s
electRows
.length > 0) {
const ids = this
.s
electRows
.map((item) => item
.id);
this
.$baseConfirm("你确定要删除当前字段吗", null, () => {
for (let i = this
.tableFormCurr
.length - 1; i >= 0; i--) {
let item = this
.tableFormCurr[i];
if (ids
.indexOf(item
.id) !== -1) {
// 树装接口 不允许删除 parent_id 字段
if (this
.tableFormCurr
.tableType === '1') {
if (item
.fi
eldName !== this
.treeName) {
this
.tableFormCurr
.splice(i, 1);
}
}
else {
this
.tableFormCurr
.splice(i, 1);
}
}
}
});
}
else {
this
.$baseMessage("未选中任何行", "error");
return false;
}
},
// 行选中
setS
electRows(val) {
this
.s
electRows = val;
},
//行拖拽
rowDrop() {
const tbody = this
.$refs["tableForm"]
.$
el
.queryS
elector("
.el-table__body-wrapper tbody");
const _this = this
Sortable
.create(tbody, {
// 只能纵向拖动
axis
: "y",
// 限制触发事件只能某个元素可以触发
handle
: "
.move-btn",
// 如果设置成true，则被拖拽的元素在返回新位置时，会有一个动画效果。
revert
: true,
// 如果设置成true，则元素被拖动到页面边缘时，会自动滚动。
scroll
: true,
onEnd({oldIndex, newIndex}) {
_this
.tableFormCurr[oldIndex]
.sort = newIndex;
// 如果是 从后往前 移动 则 当前项改为newIndex 而 原newIndex 往后的所有内容全部向后顺产移动
if (oldIndex > newIndex) {
for (let i = oldIndex; i > newIndex; i--) {
_this
.tableFormCurr[i - 1]
.sort = i;
}
}
// 如果是 从前往后 移动 则 当前项改为newIndex 而 原newIndex 往后的所有内容全部向前顺产移动
else {
for (let i = oldIndex; i < newIndex; i++) {
_this
.tableFormCurr[i + 1]
.sort = i;
}
}
}
})
},
},
};
</script>
这段代码是一个vue文件， 代码语法的框架是
element-ui, 版本是2
.15
.13。我的前端项目vue版本是3
.4
.21, 框架ant-design-vue版本是4
.2
.1。现在的问题是文件内容和项目框架语法不一样， 请帮我把整个文件的代码内容修改成适配我项目框架的语法（注意：我的前端项目vue版本是3
.4
.21, 框架ant-design-vue版本是4
.2
.1，必须生成对应版本的语法）。
不要删除里边已经注释的代码, 即使有相同的代码, 你也不要省略代码, 把所有内容全部输出来, 需要保持原有的布局样式而调整转换代码。如果这个文件引入的别的文件, 不用你关心别的文件, 你不要给我生成别的文件内容, 最后生成一个vue文件给我, 如果输出内容过长而被终止截断了，请接着输出剩余的部分。转换后要求代码不报错, 按钮方法和底部方法名称要对应起来, 转换过程中不要遗漏代码，
注意
:如果之前代码有$baseConfirm, 给我替换成Modal
.confirm , 并且引入import { message, Modal } from “ant-design-vue”;
如果之前代码有$baseMessage, 给我替换成message
.success或message
.warning或message
.error。
你好好思考分析下我的需求，不是将把
Element UI组件替换为Ant Design Vue组件，你考虑转换后的版本了吗，不同版本语法api不一样，否则转换后的代码根本不能用。不要给我进行简化处理，方法内容不要给我留空，不要等着我补充，你都给我转换处理好。
本文详细介绍了EL表达式中的各种操作符，包括但不限于访问Bean属性、数组元素、执行算术运算及逻辑判断等，为读者提供了全面的操作符使用指南。
扫一扫
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
