mirror of
https://gitee.com/log4j/pig-ui.git
synced 2025-01-03 23:42:23 +08:00
🔥 删除无用代码注释
This commit is contained in:
lbw
parent
67838e0d72
commit
ebe7b7b1f8
@ -1,118 +1,118 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <el-drawer v-model="visible" title="编辑" :size="1200" :with-header="false" :close-on-click-modal="false">-->
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="属性设置" name="field">
|
||||||
<el-tab-pane label="属性设置" name="field">
|
<vxe-table ref="fieldTable" align="center" border row-key class="sortable-row-gen" :data="fieldList"
|
||||||
<vxe-table ref="fieldTable" align="center" border row-key class="sortable-row-gen" :data="fieldList"
|
:loading="loading" :checkbox-config="{ checkStrictly: true }"
|
||||||
:loading="loading"
|
:edit-config="{ trigger: 'click', mode: 'cell' }">
|
||||||
:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
|
<vxe-column type="seq" width="60"></vxe-column>
|
||||||
<vxe-column type="seq" width="60"></vxe-column>
|
<vxe-column width="60" title="拖动">
|
||||||
<vxe-column width="60" title="拖动">
|
<template #default>
|
||||||
<template #default>
|
<span class="drag-btn">
|
||||||
<span class="drag-btn">
|
<i class="vxe-icon-sort"></i>
|
||||||
<i class="vxe-icon-sort"></i>
|
</span>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
<template #header>
|
||||||
<template #header>
|
<el-tooltip class="item" effect="dark" content="按住后可以上下拖动排序" placement="top-start">
|
||||||
<el-tooltip class="item" effect="dark" content="按住后可以上下拖动排序" placement="top-start">
|
<i class="vxe-icon-question-circle-fill"></i>
|
||||||
<i class="vxe-icon-question-circle-fill"></i>
|
</el-tooltip>
|
||||||
</el-tooltip>
|
</template>
|
||||||
</template>
|
</vxe-column>
|
||||||
</vxe-column>
|
<vxe-column field="fieldName" title="字段名"></vxe-column>
|
||||||
<vxe-column field="fieldName" title="字段名"></vxe-column>
|
<vxe-column field="fieldComment" title="说明" :edit-render="{ name: 'input' }"></vxe-column>
|
||||||
<vxe-column field="fieldComment" title="说明" :edit-render="{ name: 'input' }"></vxe-column>
|
<vxe-column field="fieldType" title="字段类型"></vxe-column>
|
||||||
<vxe-column field="fieldType" title="字段类型"></vxe-column>
|
<vxe-column field="attrName" title="属性名" :edit-render="{ name: 'input' }"></vxe-column>
|
||||||
<vxe-column field="attrName" title="属性名" :edit-render="{ name: 'input' }"></vxe-column>
|
<vxe-column field="attrType" title="属性类型">
|
||||||
<vxe-column field="attrType" title="属性类型">
|
<template #default="{ row }">
|
||||||
<template #default="{ row }">
|
<vxe-select v-model="row.attrType" @change="handleChangeRow(row)">
|
||||||
<vxe-select v-model="row.attrType" @change="handleChangeRow(row)">
|
<vxe-option v-for="item in typeList" :key="item.value" :value="item.value"
|
||||||
<vxe-option v-for="item in typeList" :key="item.value" :value="item.value"
|
:label="item.label"></vxe-option>
|
||||||
:label="item.label"></vxe-option>
|
</vxe-select>
|
||||||
</vxe-select>
|
</template>
|
||||||
</template>
|
</vxe-column>
|
||||||
</vxe-column>
|
<vxe-column field="autoFill" title="自动填充">
|
||||||
<vxe-column field="autoFill" title="自动填充">
|
<template #default="{ row }">
|
||||||
<template #default="{ row }">
|
<vxe-select v-model="row.autoFill">
|
||||||
<vxe-select v-model="row.autoFill">
|
<vxe-option v-for="item in fillList" :key="item.value" :value="item.value"
|
||||||
<vxe-option v-for="item in fillList" :key="item.value" :value="item.value"
|
:label="item.label"></vxe-option>
|
||||||
:label="item.label"></vxe-option>
|
</vxe-select>
|
||||||
</vxe-select>
|
</template>
|
||||||
</template>
|
</vxe-column>
|
||||||
</vxe-column>
|
<vxe-column field="primaryPk" title="主键" width="60">
|
||||||
<vxe-column field="primaryPk" title="主键" width="60">
|
<template #default="{ row }">
|
||||||
<template #default="{ row }">
|
<vxe-checkbox v-model="row.primaryPk"></vxe-checkbox>
|
||||||
<vxe-checkbox v-model="row.primaryPk"></vxe-checkbox>
|
</template>
|
||||||
</template>
|
</vxe-column>
|
||||||
</vxe-column>
|
<vxe-column field="fieldDict" title="字典类型" width="140">
|
||||||
<vxe-column field="fieldDict" title="字典类型" width="140">
|
<template #default="{ row }">
|
||||||
<template #default="{ row }">
|
<vxe-select v-model="row.fieldDict" filterable>
|
||||||
<vxe-select v-model="row.fieldDict" filterable>
|
<vxe-option v-for="item in fieldDictList" :key="item.value" :value="item.value"
|
||||||
<vxe-option v-for="item in fieldDictList" :key="item.value" :value="item.value"
|
:label="item.label"></vxe-option>
|
||||||
:label="item.label"></vxe-option>
|
</vxe-select>
|
||||||
</vxe-select>
|
</template>
|
||||||
</template>
|
</vxe-column>
|
||||||
</vxe-column>
|
</vxe-table>
|
||||||
</vxe-table>
|
</el-tab-pane>
|
||||||
</el-tab-pane>
|
<el-tab-pane label="列表查询" name="third">
|
||||||
<el-tab-pane label="列表查询" name="third">
|
<vxe-grid ref="gridTable" align="center" border row-key :data="fieldList" :loading="loading"
|
||||||
<vxe-grid ref="gridTable" align="center" border row-key :data="fieldList" :loading="loading" :columns="fieldListColumns"
|
:columns="fieldListColumns" :checkbox-config="{ checkStrictly: true }"
|
||||||
:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
|
:edit-config="{ trigger: 'click', mode: 'cell' }">
|
||||||
<template #gridItem="{ row }">
|
<template #gridItem="{ row }">
|
||||||
<vxe-checkbox v-model="row.gridItem"></vxe-checkbox>
|
<vxe-checkbox v-model="row.gridItem"></vxe-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<template #gridSort="{ row }">
|
<template #gridSort="{ row }">
|
||||||
<vxe-checkbox v-model="row.gridSort"></vxe-checkbox>
|
<vxe-checkbox v-model="row.gridSort"></vxe-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<template #queryFormType="{ row }">
|
<template #queryFormType="{ row }">
|
||||||
<vxe-select v-model="row.queryFormType">
|
<vxe-select v-model="row.queryFormType">
|
||||||
<vxe-option v-for="item in queryTypeList" :key="item.value" :value="item.value"
|
<vxe-option v-for="item in queryTypeList" :key="item.value" :value="item.value"
|
||||||
:label="item.label"></vxe-option>
|
:label="item.label"></vxe-option>
|
||||||
</vxe-select>
|
</vxe-select>
|
||||||
</template>
|
</template>
|
||||||
<template #queryItem="{ row }">
|
<template #queryItem="{ row }">
|
||||||
<vxe-checkbox v-model="row.queryItem"></vxe-checkbox>
|
<vxe-checkbox v-model="row.queryItem"></vxe-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<template #queryType="{ row }">
|
<template #queryType="{ row }">
|
||||||
<vxe-select v-model="row.queryType">
|
<vxe-select v-model="row.queryType">
|
||||||
<vxe-option v-for="item in queryList" :key="item.value" :value="item.value"
|
<vxe-option v-for="item in queryList" :key="item.value" :value="item.value"
|
||||||
:label="item.label"></vxe-option>
|
:label="item.label"></vxe-option>
|
||||||
</vxe-select>
|
</vxe-select>
|
||||||
</template>
|
</template>
|
||||||
</vxe-grid>
|
</vxe-grid>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="表单页面" name="form">
|
<el-tab-pane label="表单页面" name="form">
|
||||||
<vxe-table ref="formTable" align="center" border row-key :data="fieldList" :loading="loading"
|
<vxe-table ref="formTable" align="center" border row-key :data="fieldList" :loading="loading"
|
||||||
:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
|
:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
|
||||||
<vxe-column field="attrName" title="属性名"></vxe-column>
|
<vxe-column field="attrName" title="属性名"></vxe-column>
|
||||||
<vxe-column field="fieldComment" title="说明"></vxe-column>
|
<vxe-column field="fieldComment" title="说明"></vxe-column>
|
||||||
<vxe-column field="formType" title="表单类型" width="200">
|
<vxe-column field="formType" title="表单类型" width="200">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<vxe-select v-model="row.formType">
|
<vxe-select v-model="row.formType">
|
||||||
<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value"
|
<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value"
|
||||||
:label="item.label"></vxe-option>
|
:label="item.label"></vxe-option>
|
||||||
</vxe-select>
|
</vxe-select>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="formItem" title="表单显示" width="100">
|
<vxe-column field="formItem" title="表单显示" width="100">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<vxe-checkbox v-model="row.formItem"></vxe-checkbox>
|
<vxe-checkbox v-model="row.formItem"></vxe-checkbox>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="formRequired" title="表单必填" width="100">
|
<vxe-column field="formRequired" title="表单必填" width="100">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<vxe-checkbox v-model="row.formRequired"></vxe-checkbox>
|
<vxe-checkbox v-model="row.formRequired"></vxe-checkbox>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="formValidator" title="表单效验">
|
<vxe-column field="formValidator" title="表单效验">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<vxe-select v-model="row.formValidator">
|
<vxe-select v-model="row.formValidator">
|
||||||
<vxe-option v-for="item in formValidatorList" :key="item.value" :value="item.value"
|
<vxe-option v-for="item in formValidatorList" :key="item.value" :value="item.value"
|
||||||
:label="item.label"></vxe-option>
|
:label="item.label"></vxe-option>
|
||||||
</vxe-select>
|
</vxe-select>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -136,12 +136,12 @@ const gridTable = ref<VxeTableInstance>()
|
|||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
tableName: {
|
tableName: {
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
dsName: {
|
dsName: {
|
||||||
type: String
|
type: String
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
@ -194,58 +194,58 @@ const formTypeList = reactive([
|
|||||||
{ label: '复选框', value: 'checkbox' },
|
{ label: '复选框', value: 'checkbox' },
|
||||||
{ label: '日期', value: 'date' },
|
{ label: '日期', value: 'date' },
|
||||||
{ label: '日期时间', value: 'datetime' },
|
{ label: '日期时间', value: 'datetime' },
|
||||||
{ label: '文件上传', value: 'upload-file' },
|
{ label: '文件上传', value: 'upload-file' },
|
||||||
{ label: '图片上传', value: 'upload-img' }
|
{ label: '图片上传', value: 'upload-img' }
|
||||||
])
|
])
|
||||||
|
|
||||||
const queryTypeList = reactive([
|
const queryTypeList = reactive([
|
||||||
{ label: '单行文本', value: 'text' },
|
{ label: '单行文本', value: 'text' },
|
||||||
{ label: '多行文本', value: 'textarea' },
|
{ label: '多行文本', value: 'textarea' },
|
||||||
{ label: '数字', value: 'number' },
|
{ label: '数字', value: 'number' },
|
||||||
{ label: '下拉框', value: 'select' },
|
{ label: '下拉框', value: 'select' },
|
||||||
{ label: '单选按钮', value: 'radio' },
|
{ label: '单选按钮', value: 'radio' },
|
||||||
{ label: '复选框', value: 'checkbox' },
|
{ label: '复选框', value: 'checkbox' },
|
||||||
{ label: '日期', value: 'date' },
|
{ label: '日期', value: 'date' },
|
||||||
{ label: '日期时间', value: 'datetime' },
|
{ label: '日期时间', value: 'datetime' },
|
||||||
])
|
])
|
||||||
|
|
||||||
const formValidatorList = reactive([
|
const formValidatorList = reactive([
|
||||||
{ label: '数字', value: 'number' },
|
{ label: '数字', value: 'number' },
|
||||||
{ label: '字母', value: 'letter' },
|
{ label: '字母', value: 'letter' },
|
||||||
{ label: '字母和数字', value: 'letterAndNumber' },
|
{ label: '字母和数字', value: 'letterAndNumber' },
|
||||||
{ label: '手机号码', value: 'mobilePhone' },
|
{ label: '手机号码', value: 'mobilePhone' },
|
||||||
{ label: '字母开头，仅可包含数字', value: 'letterStartNumberIncluded' },
|
{ label: '字母开头，仅可包含数字', value: 'letterStartNumberIncluded' },
|
||||||
{ label: '禁止中文输入', value: 'noChinese' },
|
{ label: '禁止中文输入', value: 'noChinese' },
|
||||||
{ label: '必须中文输入', value: 'chinese' },
|
{ label: '必须中文输入', value: 'chinese' },
|
||||||
{ label: '电子邮箱', value: 'email' },
|
{ label: '电子邮箱', value: 'email' },
|
||||||
{ label: 'URL网址', value: 'url' }
|
{ label: 'URL网址', value: 'url' }
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
||||||
const propToType = reactive({
|
const propToType = reactive({
|
||||||
"tinyint":'number',
|
"tinyint": 'number',
|
||||||
"smallint":'number',
|
"smallint": 'number',
|
||||||
"mediumint":'number',
|
"mediumint": 'number',
|
||||||
"int":'number',
|
"int": 'number',
|
||||||
"integer":'number',
|
"integer": 'number',
|
||||||
"bigint":'number',
|
"bigint": 'number',
|
||||||
"float":'number',
|
"float": 'number',
|
||||||
"datetime":'datetime',
|
"datetime": 'datetime',
|
||||||
"date":'date',
|
"date": 'date',
|
||||||
"Long":'number',
|
"Long": 'number',
|
||||||
"Float":'number',
|
"Float": 'number',
|
||||||
"Double":'number',
|
"Double": 'number',
|
||||||
"BigDecimal":'number',
|
"BigDecimal": 'number',
|
||||||
"text":'textarea',
|
"text": 'textarea',
|
||||||
"longtext":'editor',
|
"longtext": 'editor',
|
||||||
"bit":'radio',
|
"bit": 'radio',
|
||||||
"char":'radio',
|
"char": 'radio',
|
||||||
"varchar":'text',
|
"varchar": 'text',
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleChangeRow = (row: any) => {
|
const handleChangeRow = (row: any) => {
|
||||||
row.queryFormType = propToType[row.attrType]
|
row.queryFormType = propToType[row.attrType]
|
||||||
row.formType = propToType[row.attrType]
|
row.formType = propToType[row.attrType]
|
||||||
}
|
}
|
||||||
|
|
||||||
const openDialog = (dName: string, tName: string) => {
|
const openDialog = (dName: string, tName: string) => {
|
||||||
@ -262,13 +262,13 @@ const openDialog = (dName: string, tName: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tableName.value = String(props.tableName)
|
tableName.value = String(props.tableName)
|
||||||
dsName.value = String(props.dsName)
|
dsName.value = String(props.dsName)
|
||||||
activeName.value = 'field'
|
activeName.value = 'field'
|
||||||
rowDrop()
|
rowDrop()
|
||||||
getTable(dsName.value, tableName.value)
|
getTable(dsName.value, tableName.value)
|
||||||
getFieldTypeList()
|
getFieldTypeList()
|
||||||
getDictList()
|
getDictList()
|
||||||
})
|
})
|
||||||
|
|
||||||
const rowDrop = () => {
|
const rowDrop = () => {
|
||||||
@ -288,17 +288,17 @@ const loading = ref(false)
|
|||||||
|
|
||||||
const getTable = (dsName: string, tableName: string) => {
|
const getTable = (dsName: string, tableName: string) => {
|
||||||
fieldList.value = [] // 避免第一次数据初始化， 表格显示历史数据
|
fieldList.value = [] // 避免第一次数据初始化， 表格显示历史数据
|
||||||
loading.value = true
|
loading.value = true
|
||||||
useTableApi(dsName, tableName).then(res => {
|
useTableApi(dsName, tableName).then(res => {
|
||||||
tableId.value = res.data.id
|
tableId.value = res.data.id
|
||||||
fieldList.value = res.data.fieldList.map(item => {
|
fieldList.value = res.data.fieldList.map(item => {
|
||||||
item.queryFormType = propToType[item.fieldType]
|
item.queryFormType = propToType[item.fieldType]
|
||||||
item.formType = propToType[item.fieldType]
|
item.formType = propToType[item.fieldType]
|
||||||
return item
|
return item
|
||||||
})
|
})
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const getFieldTypeList = async () => {
|
const getFieldTypeList = async () => {
|
||||||
@ -323,29 +323,29 @@ const getDictList = () => {
|
|||||||
|
|
||||||
// 表单提交
|
// 表单提交
|
||||||
const submitHandle = () => {
|
const submitHandle = () => {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
|
useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
|
||||||
useMessage().success(t('common.addSuccessText'))
|
useMessage().success(t('common.addSuccessText'))
|
||||||
resolve(tableId.value)
|
resolve(tableId.value)
|
||||||
// visible.value = false // 关闭弹窗
|
// visible.value = false // 关闭弹窗
|
||||||
// emit('refreshDataList')
|
// emit('refreshDataList')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const fieldListColumns = reactive([
|
const fieldListColumns = reactive([
|
||||||
{ field: 'attrName', title: '属性名' },
|
{ field: 'attrName', title: '属性名' },
|
||||||
{ field: 'fieldComment', title: '说明' },
|
{ field: 'fieldComment', title: '说明' },
|
||||||
{ field: 'gridItem', title: '列表显示', slots: { default: 'gridItem' }},
|
{ field: 'gridItem', title: '列表显示', slots: { default: 'gridItem' } },
|
||||||
{ field: 'gridSort', title: '是否排序' , slots: { default: 'gridSort' }},
|
{ field: 'gridSort', title: '是否排序', slots: { default: 'gridSort' } },
|
||||||
{ field: 'queryFormType', title: '查询表单类型' , slots: { default: 'queryFormType' }},
|
{ field: 'queryFormType', title: '查询表单类型', slots: { default: 'queryFormType' } },
|
||||||
{ field: 'queryItem', title: '查询显示', slots: { default: 'queryItem' } },
|
{ field: 'queryItem', title: '查询显示', slots: { default: 'queryItem' } },
|
||||||
{ field: 'queryType', title: '查询方式' , slots: { default: 'queryType' }},
|
{ field: 'queryType', title: '查询方式', slots: { default: 'queryType' } },
|
||||||
])
|
])
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
openDialog,
|
openDialog,
|
||||||
submitHandle
|
submitHandle
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -359,7 +359,8 @@ defineExpose({
|
|||||||
.sortable-row-gen .vxe-body--row.sortable-chosen {
|
.sortable-row-gen .vxe-body--row.sortable-chosen {
|
||||||
background-color: #dfecfb;
|
background-color: #dfecfb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vxe-select–panel {
|
.vxe-select–panel {
|
||||||
z-index: 9997 !important;
|
z-index: 9997 !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user