You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
7.1 KiB
237 lines
7.1 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-09-14 09:47:27
|
|
@ 备注: 编辑表单字段
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { gogoBackFormTabelStruct } from "@/api/DesignForm/type";
|
|
import { formFieldHandle,editFormField } from '@/api/DesignForm/requestapi'
|
|
const fieldType = ["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double","char","varchar","binary","varbinary","enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"];
|
|
const props = defineProps({
|
|
isEditFormField:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
formname:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
formtablecont:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
})
|
|
|
|
const unsignedIsShow = ref(false); //符号
|
|
const decimalIsShow = ref(false); //小数点
|
|
const fieldLenghtIsShow = ref(false); //字段长度
|
|
const isNull = ref(false); //是否显示空置
|
|
const butLoad = ref(false);
|
|
|
|
const formTableField = reactive<gogoBackFormTabelStruct>({
|
|
formname:props.formname,
|
|
field:"",
|
|
type:"",
|
|
attribute:"",
|
|
collation:"",
|
|
null:"",
|
|
key:"",
|
|
default:"",
|
|
extra:"",
|
|
privileges:"",
|
|
comment:"",
|
|
integer:"",
|
|
decimal:"",
|
|
})
|
|
const dialogTitle = ref<string>()
|
|
const isEditOk = ref(false)
|
|
|
|
const emits = defineEmits(["update:isEditFormField","refreshtable","xxxxx"]);
|
|
const isShow = computed({
|
|
get: () => props.isEditFormField,
|
|
set: (val) => {
|
|
emits("update:isEditFormField", val);
|
|
emits("refreshtable");
|
|
},
|
|
});
|
|
|
|
watch(()=>props.isEditFormField,()=>{
|
|
// console.log("监听状态----->",props.isEditFormField,props.formtablecont)
|
|
if(props.isEditFormField){
|
|
if(props.formtablecont.comment != null && props.formtablecont.comment != ""){
|
|
dialogTitle.value = "编辑<"+props.formtablecont.field+">字段(PS:"+props.formtablecont.comment+")"
|
|
}else{
|
|
dialogTitle.value = "编辑<"+props.formtablecont.field+">字段"
|
|
}
|
|
formFieldHandle(props.formtablecont)
|
|
.then(({data})=>{
|
|
// console.log("监听状态---1-->",data)
|
|
formTableField.formname=props.formname
|
|
formTableField.field = data.field;
|
|
formTableField.type = data.type;
|
|
formTableField.attribute = data.attribute;
|
|
formTableField.collation = data.collation;
|
|
formTableField.null = data.null;
|
|
formTableField.key = data.key;
|
|
formTableField.default = data.default;
|
|
formTableField.extra = data.extra;
|
|
formTableField.privileges = data.privileges;
|
|
formTableField.comment = data.comment;
|
|
formTableField.integer = data.integer;
|
|
formTableField.decimal = data.decimal;
|
|
if(["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double"].indexOf(data.type) != -1){
|
|
unsignedIsShow.value = true
|
|
}else{
|
|
unsignedIsShow.value = false
|
|
}
|
|
if(["decimal", "float", "double"].indexOf(data.type) != -1){
|
|
decimalIsShow.value = true
|
|
}else{
|
|
decimalIsShow.value = false
|
|
}
|
|
if(["enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"].indexOf(data.type) != -1){
|
|
fieldLenghtIsShow.value = false
|
|
}else{
|
|
fieldLenghtIsShow.value = true
|
|
}
|
|
})
|
|
// formTableField.value = props.formtablecont
|
|
}else{
|
|
if(isEditOk.value){
|
|
emits("refreshtable")
|
|
}
|
|
initData()
|
|
// formTableField.value=new Value(props.formtablecont)
|
|
}
|
|
})
|
|
//初始化数据
|
|
function initData(){
|
|
formTableField.formname="";
|
|
formTableField.field = ""; //field;
|
|
formTableField.type = ""; //type;
|
|
formTableField.attribute = ""; //attribute;
|
|
formTableField.collation = ""; //collation;
|
|
formTableField.null = ""; //null;
|
|
formTableField.key = ""; //key;
|
|
formTableField.default = ""; //default;
|
|
formTableField.extra = ""; //extra;
|
|
formTableField.privileges = ""; //privileges;
|
|
formTableField.comment = ""; //comment;
|
|
formTableField.integer = ""; //integer;
|
|
formTableField.decimal = ""; //decimal;
|
|
unsignedIsShow.value = false;
|
|
decimalIsShow.value = false;
|
|
fieldLenghtIsShow.value = false;
|
|
}
|
|
/**
|
|
* 关闭弹窗
|
|
*/
|
|
function closeDialog() {
|
|
isShow.value = false;
|
|
emits("update:isEditFormField", false);
|
|
initData();
|
|
}
|
|
//提交表单
|
|
function sendFormData(){
|
|
butLoad.value=true;
|
|
// console.log("提交数据--->",props.formname,formTableField)
|
|
editFormField(formTableField)
|
|
.then((data)=>{
|
|
// console.log("提交数据--1->",data)
|
|
ElMessage.success('成功')
|
|
isEditOk.value=true;
|
|
})
|
|
.finally(()=>{
|
|
butLoad.value=false;
|
|
closeDialog();
|
|
})
|
|
}
|
|
//判断数据类型
|
|
const judgeFieldType = (typeStr:string) => {
|
|
if(["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double"].indexOf(typeStr) != -1){
|
|
unsignedIsShow.value = true
|
|
formTableField.attribute = "unsigned"
|
|
formTableField.integer = "3"
|
|
formTableField.decimal = ""
|
|
}else{
|
|
unsignedIsShow.value = false
|
|
formTableField.attribute = ""
|
|
}
|
|
if(["decimal", "float", "double"].indexOf(typeStr) != -1){
|
|
decimalIsShow.value = true
|
|
}else{
|
|
decimalIsShow.value = false
|
|
}
|
|
if(["enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"].indexOf(typeStr) != -1){
|
|
fieldLenghtIsShow.value = false
|
|
formTableField.integer = ""
|
|
formTableField.decimal = ""
|
|
}else{
|
|
fieldLenghtIsShow.value = true
|
|
}
|
|
if(["char","varchar","binary","varbinary"].indexOf(typeStr) != -1){
|
|
formTableField.integer = "255"
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<el-dialog
|
|
v-model="isShow"
|
|
width="550"
|
|
:title="dialogTitle"
|
|
append-to-body
|
|
draggable
|
|
@close="closeDialog"
|
|
>
|
|
<el-form :model="formTableField" label-width="80px" border>
|
|
<el-form-item label="字段">
|
|
{{ formTableField.field }}
|
|
</el-form-item>
|
|
<el-form-item label="类型">
|
|
<el-select v-model="formTableField.type" class="m-2" placeholder="请选择数据类型" @change="judgeFieldType(formTableField.type)">
|
|
<el-option
|
|
v-for="item in fieldType"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="unsignedIsShow" label="无符号">
|
|
<el-radio-group v-model="formTableField.attribute" class="ml-4">
|
|
<el-radio label="unsigned" size="large">正数</el-radio>
|
|
<el-radio label="" size="large">区分正负</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="不是Null">
|
|
<el-radio-group v-model="formTableField.null" class="ml-4">
|
|
<el-radio label="YES" size="large">YES</el-radio>
|
|
<el-radio label="NO" size="large">NO</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="fieldLenghtIsShow" label="长度">
|
|
<el-input v-model="formTableField.integer" />
|
|
</el-form-item>
|
|
<el-form-item v-if="decimalIsShow" label="小数点">
|
|
<el-input v-model="formTableField.decimal" />
|
|
</el-form-item>
|
|
<el-form-item label="默认值">
|
|
<el-input v-model="formTableField.default" />
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="formTableField.comment" type="textarea" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeDialog">取消</el-button>
|
|
<el-button type="primary" @click="sendFormData">提交</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|
|
|