Browse Source

代码模板,列顺序

CzRger 1 year ago
parent
commit
13832e6a7c
1 changed files with 409 additions and 376 deletions
  1. 409 376
      snowy-admin-web/src/views/gen/config.vue

+ 409 - 376
snowy-admin-web/src/views/gen/config.vue

@@ -8,9 +8,9 @@
 			:showPagination="false"
 			:showPagination="false"
 			bordered
 			bordered
 		>
 		>
-			<template #bodyCell="{ column, record }">
+			<template #bodyCell="{ column, record, index }">
 				<template v-if="column.dataIndex === 'fieldRemark'">
 				<template v-if="column.dataIndex === 'fieldRemark'">
-					<a-input v-model:value="record.fieldRemark" />
+					<a-input v-model:value="record.fieldRemark"/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'fieldJavaType'">
 				<template v-if="column.dataIndex === 'fieldJavaType'">
 					<a-select
 					<a-select
@@ -46,20 +46,20 @@
 					<a-checkbox v-model:checked="record.whetherTable" @change="whetherTableChange(record)"/>
 					<a-checkbox v-model:checked="record.whetherTable" @change="whetherTableChange(record)"/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'whetherRetract'">
 				<template v-if="column.dataIndex === 'whetherRetract'">
-					<a-checkbox v-model:checked="record.whetherRetract" :disabled="!record.whetherTable" />
+					<a-checkbox v-model:checked="record.whetherRetract" :disabled="!record.whetherTable"/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'whetherSort'">
 				<template v-if="column.dataIndex === 'whetherSort'">
-					<a-checkbox v-model:checked="record.whetherSort" :disabled="!record.whetherTable" />
+					<a-checkbox v-model:checked="record.whetherSort" :disabled="!record.whetherTable"/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'whetherFixed'">
 				<template v-if="column.dataIndex === 'whetherFixed'">
-				  <a-radio-group v-model:value="record.whetherFixed" button-style="solid" size="small">
+					<a-radio-group v-model:value="record.whetherFixed" button-style="solid" size="small">
-            <a-radio-button :value="1">左</a-radio-button>
+						<a-radio-button :value="1">左</a-radio-button>
-            <a-radio-button :value="0">默认</a-radio-button>
+						<a-radio-button :value="0">默认</a-radio-button>
-            <a-radio-button :value="2">右</a-radio-button>
+						<a-radio-button :value="2">右</a-radio-button>
-				  </a-radio-group>
+					</a-radio-group>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'whetherAddUpdate'">
 				<template v-if="column.dataIndex === 'whetherAddUpdate'">
-					<a-checkbox v-model:checked="record.whetherAddUpdate" :disabled="toFieldEstimate(record)" />
+					<a-checkbox v-model:checked="record.whetherAddUpdate" :disabled="toFieldEstimate(record)"/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'whetherRequired'">
 				<template v-if="column.dataIndex === 'whetherRequired'">
 					<a-checkbox
 					<a-checkbox
@@ -68,7 +68,7 @@
 					/>
 					/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'queryWhether'">
 				<template v-if="column.dataIndex === 'queryWhether'">
-					<a-switch v-model:checked="record.queryWhether" :disabled="toQueryWhetherDisabled(record)" />
+					<a-switch v-model:checked="record.queryWhether" :disabled="toQueryWhetherDisabled(record)"/>
 				</template>
 				</template>
 				<template v-if="column.dataIndex === 'queryType'">
 				<template v-if="column.dataIndex === 'queryType'">
 					<a-select
 					<a-select
@@ -81,399 +81,432 @@
 					<span v-else-if="record.effectType === 'datepicker' && record.queryWhether === true">时间段</span>
 					<span v-else-if="record.effectType === 'datepicker' && record.queryWhether === true">时间段</span>
 					<span v-else>无</span>
 					<span v-else>无</span>
 				</template>
 				</template>
+				<template v-if="column.dataIndex === 'move'">
+					<a-button type="primary" shape="circle" v-if="index !== 0" @click="rowMove(true, index)"
+							  :style="{marginRight: index > 0 ? '10px' : 0}">
+						<template #icon>
+							<ArrowUpOutlined/>
+						</template>
+					</a-button>
+					<a-button type="primary" shape="circle" v-if="index < tableData.length - 1"
+							  @click="rowMove(false, index)">
+						<template #icon>
+							<ArrowDownOutlined/>
+						</template>
+					</a-button>
+				</template>
 			</template>
 			</template>
 		</s-table>
 		</s-table>
 	</a-card>
 	</a-card>
 </template>
 </template>
 
 
 <script setup name="genConfig">
 <script setup name="genConfig">
-	import tool from '@/utils/tool'
+import tool from '@/utils/tool'
-	import genConfigApi from '@/api/gen/genConfigApi'
+import genConfigApi from '@/api/gen/genConfigApi'
-	import { cloneDeep } from 'lodash-es'
+import {cloneDeep} from 'lodash-es'
 
 
-	const tableRef = ref()
+const tableRef = ref()
-	const recordData = ref()
+const recordData = ref()
-	const tableData = ref()
+const tableData = ref()
 
 
-	const columns = [
+const columns = [
-		{
+	{
-			title: '字段',
+		title: '字段',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'fieldName',
+		dataIndex: 'fieldName',
-			ellipsis: true
+		ellipsis: true
-		},
+	},
-		{
+	{
-			title: '注释',
+		title: '注释',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'fieldRemark',
+		dataIndex: 'fieldRemark',
-			ellipsis: true
+		ellipsis: true
-		},
+	},
-		{
+	{
-			title: '类型',
+		title: '类型',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'fieldType',
+		dataIndex: 'fieldType',
-			ellipsis: true
+		ellipsis: true
-		},
+	},
-		{
+	{
-			title: '实体类型',
+		title: '实体类型',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'fieldJavaType',
+		dataIndex: 'fieldJavaType',
-			ellipsis: true
+		ellipsis: true
-		},
+	},
-		{
+	{
-			title: '作用类型',
+		title: '作用类型',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'effectType',
+		dataIndex: 'effectType',
-			ellipsis: true
+		ellipsis: true
-		},
+	},
-		{
+	{
-			title: '字典',
+		title: '字典',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'dictTypeCode',
+		dataIndex: 'dictTypeCode',
-			width: 140
+		width: 140
-		},
+	},
-		{
+	{
-			title: '列表显示',
+		title: '列表显示',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'whetherTable',
+		dataIndex: 'whetherTable',
-			width: 80
+		width: 80
-		},
+	},
-		{
+	{
-			title: '列省略',
+		title: '列省略',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'whetherRetract',
+		dataIndex: 'whetherRetract',
-			width: 80
+		width: 80
-		},
+	},
-		{
+	{
-			title: '列排序',
+		title: '列排序',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'whetherSort',
+		dataIndex: 'whetherSort',
-			width: 80
+		width: 80
-		},
+	},
-		{
+	{
-			title: '列固定',
+		title: '列固定',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'whetherFixed',
+		dataIndex: 'whetherFixed',
-			width: 140
+		width: 140
-		},
+	},
-		{
+	{
-			title: '增改',
+		title: '增改',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'whetherAddUpdate',
+		dataIndex: 'whetherAddUpdate',
-			width: 80
+		width: 80
-		},
+	},
-		{
+	{
-			title: '必填',
+		title: '必填',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'whetherRequired',
+		dataIndex: 'whetherRequired',
-			width: 80
+		width: 80
-		},
+	},
-		{
+	{
-			title: '查询',
+		title: '查询',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'queryWhether',
+		dataIndex: 'queryWhether',
-			width: 80
+		width: 80
-		},
+	},
-		{
+	{
-			title: '查询方式',
+		title: '查询方式',
-			align: 'center',
+		align: 'center',
-			dataIndex: 'queryType'
+		dataIndex: 'queryType'
-		}
+	},
-	]
+	{
-	const onOpen = (record) => {
+		title: '移动',
-		recordData.value = record
+		align: 'center',
-		nextTick(() => {
+		dataIndex: 'move',
-			tableRef.value.refresh()
+		width: 120
-		})
 	}
 	}
-	// 表格查询 返回 Promise 对象
+]
-	const loadDate = (parameter) => {
+const onOpen = (record) => {
-		if (recordData.value) {
+	recordData.value = record
-			parameter.basicId = recordData.value.id
+	nextTick(() => {
-			return genConfigApi.configList(parameter).then((data) => {
+		tableRef.value.refresh()
-				tableData.value = JSON.parse(JSON.stringify(data))
+	})
-				let deleteIndex = []
+}
-				tableData.value.forEach((item, index) => {
+// 表格查询 返回 Promise 对象
-					for (const key in item) {
+const loadDate = (parameter) => {
-						if (item[key] === 'Y') {
+	if (recordData.value) {
-							item[key] = true
+		parameter.basicId = recordData.value.id
-						}
+		return genConfigApi.configList(parameter).then((data) => {
-						if (item[key] === 'N') {
+			tableData.value = JSON.parse(JSON.stringify(data))
-							item[key] = false
+			let deleteIndex = []
-						}
+			tableData.value.forEach((item, index) => {
-					}
+				for (const key in item) {
-					// 如果是主键,我们不提供主键的配置,也用不到
+					if (item[key] === 'Y') {
-					if (item.isTableKey) {
+						item[key] = true
-						deleteIndex.push(index)
 					}
 					}
-					// 去掉删除标识
+					if (item[key] === 'N') {
-					if (item.fieldName.toLowerCase().indexOf('delete_flag') > -1) {
+						item[key] = false
-						deleteIndex.push(index)
 					}
 					}
-					// 让默认的变成设置的
-					fieldJavaTypeChange(item)
-				})
-				if (deleteIndex) {
-					deleteIndex.forEach((item, index) => {
-						if (index > 0) {
-							item = item - 1
-						}
-						delete tableData.value.splice(item, 1)
-					})
 				}
 				}
-				return tableData.value
+				// 如果是主键,我们不提供主键的配置,也用不到
-			})
+				if (item.isTableKey) {
-		} else {
+					deleteIndex.push(index)
-			return new Promise((resolve, reject) => {
+				}
-				resolve([])
+				// 去掉删除标识
+				if (item.fieldName.toLowerCase().indexOf('delete_flag') > -1) {
+					deleteIndex.push(index)
+				}
+				// 让默认的变成设置的
+				fieldJavaTypeChange(item)
 			})
 			})
-		}
+			if (deleteIndex) {
+				deleteIndex.forEach((item, index) => {
+					if (index > 0) {
+						item = item - 1
+					}
+					delete tableData.value.splice(item, 1)
+				})
+			}
+			return tableData.value
+		})
+	} else {
+		return new Promise((resolve, reject) => {
+			resolve([])
+		})
 	}
 	}
-	// 实体类型
+}
-	const fieldJavaTypeOptions = ref([
+// 实体类型
-		{
+const fieldJavaTypeOptions = ref([
-			label: 'Integer',
+	{
-			value: 'Integer'
+		label: 'Integer',
-		},
+		value: 'Integer'
-		{
+	},
-			label: 'Long',
+	{
-			value: 'Long'
+		label: 'Long',
-		},
+		value: 'Long'
-		{
+	},
-			label: 'String',
+	{
-			value: 'String'
+		label: 'String',
-		},
+		value: 'String'
-		{
+	},
-			label: 'Boolean',
+	{
-			value: 'Boolean'
+		label: 'Boolean',
-		},
+		value: 'Boolean'
-		{
+	},
-			label: 'Float',
+	{
-			value: 'Float'
+		label: 'Float',
-		},
+		value: 'Float'
-		{
+	},
-			label: 'Double',
+	{
-			value: 'Double'
+		label: 'Double',
-		},
+		value: 'Double'
-		{
+	},
-			label: 'Date',
+	{
-			value: 'Date'
+		label: 'Date',
-		},
+		value: 'Date'
-		{
+	},
-			label: 'BigDecimal',
+	{
-			value: 'BigDecimal'
+		label: 'BigDecimal',
-		}
+		value: 'BigDecimal'
-	])
-	// 类型
-	const effectTypeOptions = ref([
-		{
-			label: '输入框',
-			value: 'input'
-		},
-		{
-			label: '文本框',
-			value: 'textarea'
-		},
-		{
-			label: '下拉框',
-			value: 'select'
-		},
-		{
-			label: '单选框',
-			value: 'radio'
-		},
-		{
-			label: '复选框',
-			value: 'checkbox'
-		},
-		{
-			label: '日期选择器',
-			value: 'datepicker'
-		},
-		{
-			label: '时间选择器',
-			value: 'timepicker'
-		},
-		{
-			label: '数字输入框',
-			value: 'inputNumber'
-		},
-		{
-			label: '滑动数字条',
-			value: 'slider'
-		},
-		{
-			label: '图片上传',
-			value: 'imageUpload'
-		},
-		{
-			label: '文件上传',
-			value: 'fileUpload'
-		},
-		{
-			label: '富文本',
-			value: 'editor'
-		}
-	])
-	// 字典数据
-	const dictTypeCodeOptions = tool.dictDataAll().map((item) => {
-		return {
-			label: item.name,
-			value: item.dictValue
-		}
-	})
-	// 查询方式
-	const queryTypeOptions = ref([
-		{
-			label: '模糊包含',
-			value: 'like'
-		},
-		{
-			label: '模糊不包含',
-			value: 'notLike'
-		},
-		{
-			label: '等于',
-			value: 'eq'
-		},
-		{
-			label: '不等于',
-			value: 'ne'
-		},
-		{
-			label: '大于',
-			value: 'gt'
-		},
-		{
-			label: '大于等于',
-			value: 'ge'
-		},
-		{
-			label: '小于',
-			value: 'lt'
-		},
-		{
-			label: '小于等于',
-			value: 'le'
-		}
-	])
-	const emit = defineEmits({ successful: null }, { close: null })
-	const toFieldEstimate = (data) => {
-		if (
-			data.fieldName.toLowerCase().indexOf('create_user') > -1 ||
-			data.fieldName.toLowerCase().indexOf('create_time') > -1 ||
-			data.fieldName.toLowerCase().indexOf('update_user') > -1 ||
-			data.fieldName.toLowerCase().indexOf('update_time') > -1 ||
-			data.fieldName.toLowerCase().indexOf('delete_flag') > -1 ||
-			data.isTableKey === true
-		) {
-			return true
-		}
-		return false
 	}
 	}
-	// 通用字段是否可选
+])
-	const toCommonFieldEstimate = (record) => {
+// 类型
-		if (
+const effectTypeOptions = ref([
-			record.fieldName.toLowerCase().indexOf('create_user') > -1 ||
+	{
-			record.fieldName.toLowerCase().indexOf('update_user') > -1
+		label: '输入框',
-		) {
+		value: 'input'
-			return true
+	},
-		}
+	{
-		return false
+		label: '文本框',
+		value: 'textarea'
+	},
+	{
+		label: '下拉框',
+		value: 'select'
+	},
+	{
+		label: '单选框',
+		value: 'radio'
+	},
+	{
+		label: '复选框',
+		value: 'checkbox'
+	},
+	{
+		label: '日期选择器',
+		value: 'datepicker'
+	},
+	{
+		label: '时间选择器',
+		value: 'timepicker'
+	},
+	{
+		label: '数字输入框',
+		value: 'inputNumber'
+	},
+	{
+		label: '滑动数字条',
+		value: 'slider'
+	},
+	{
+		label: '图片上传',
+		value: 'imageUpload'
+	},
+	{
+		label: '文件上传',
+		value: 'fileUpload'
+	},
+	{
+		label: '富文本',
+		value: 'editor'
 	}
 	}
-	// 设置该下拉框是否能选
+])
-	const toFieldSelectEstimate = (record) => {
+// 字典数据
-		if (record.fieldJavaType === 'Date' && record.effectType === 'datepicker') {
+const dictTypeCodeOptions = tool.dictDataAll().map((item) => {
-			return true
+	return {
-		}
+		label: item.name,
-		return false
+		value: item.dictValue
 	}
 	}
-	// 选择作用类型触发-这里只负责字段类型的赋值,至于禁用是每一个字段自己的
+})
-	const effectTypeChange = (record) => {
+// 查询方式
-		// 图片跟文件不可设置查询跟查询方式
+const queryTypeOptions = ref([
-		if (record.effectType === 'imageUpload' || record.effectType === 'fileUpload') {
+	{
-			record.queryWhether = 'N'
+		label: '模糊包含',
-			record.queryType = null
+		value: 'like'
-		}
+	},
-		// 富文本只能模糊包含跟模糊不包含
+	{
-		if (record.effectType === 'editor') {
+		label: '模糊不包含',
-			record.whetherTable = false
+		value: 'notLike'
-			record.whetherRetract = false
+	},
-			record.whetherSort = false
+	{
-			record.whetherFixed = 0
+		label: '等于',
-			record.queryWhether = 'N'
+		value: 'eq'
-			record.queryType = null
+	},
-		}
+	{
+		label: '不等于',
+		value: 'ne'
+	},
+	{
+		label: '大于',
+		value: 'gt'
+	},
+	{
+		label: '大于等于',
+		value: 'ge'
+	},
+	{
+		label: '小于',
+		value: 'lt'
+	},
+	{
+		label: '小于等于',
+		value: 'le'
 	}
 	}
-	// 点击列表显示,处理
+])
-	const whetherTableChange = (record) => {
+const emit = defineEmits({successful: null}, {close: null})
-		// 如果去除了勾选,清理部分数据
+const toFieldEstimate = (data) => {
-		if (!record.whetherTable) {
+	if (
-			record.queryWhether = 'N'
+		data.fieldName.toLowerCase().indexOf('create_user') > -1 ||
-			record.queryType = null
+		data.fieldName.toLowerCase().indexOf('create_time') > -1 ||
-		}
+		data.fieldName.toLowerCase().indexOf('update_user') > -1 ||
+		data.fieldName.toLowerCase().indexOf('update_time') > -1 ||
+		data.fieldName.toLowerCase().indexOf('delete_flag') > -1 ||
+		data.isTableKey === true
+	) {
+		return true
 	}
 	}
-	// 查询条件是否可用
+	return false
-	const toQueryWhetherDisabled = (record) => {
+}
-		// 去掉了列表显示、图片上传、文件上传是不让生成搜索的
+// 通用字段是否可选
-		return !record.whetherTable || record.effectType === 'imageUpload' || record.effectType === 'fileUpload'
+const toCommonFieldEstimate = (record) => {
+	if (
+		record.fieldName.toLowerCase().indexOf('create_user') > -1 ||
+		record.fieldName.toLowerCase().indexOf('update_user') > -1
+	) {
+		return true
 	}
 	}
-	// 实体类型选择触发
+	return false
-	const fieldJavaTypeChange = (record) => {
+}
-		if (record.fieldJavaType === 'Date') {
+// 设置该下拉框是否能选
-			record.effectType = 'datepicker'
+const toFieldSelectEstimate = (record) => {
-		}
+	if (record.fieldJavaType === 'Date' && record.effectType === 'datepicker') {
+		return true
 	}
 	}
-	// 提交
+	return false
-	const onSubmit = (recordData) => {
+}
-		let submitParam = cloneDeep(tableData.value)
+// 选择作用类型触发-这里只负责字段类型的赋值,至于禁用是每一个字段自己的
-		let errStatus = 100
+const effectTypeChange = (record) => {
-		submitParam.forEach((item) => {
+	// 图片跟文件不可设置查询跟查询方式
-			// 必填那一项转换
+	if (record.effectType === 'imageUpload' || record.effectType === 'fileUpload') {
-			for (const key in item) {
+		record.queryWhether = 'N'
-				if (item[key] === true) {
+		record.queryType = null
-					item[key] = 'Y'
+	}
-				}
+	// 富文本只能模糊包含跟模糊不包含
-				if (item[key] === false) {
+	if (record.effectType === 'editor') {
-					item[key] = 'N'
+		record.whetherTable = false
-				}
+		record.whetherRetract = false
+		record.whetherSort = false
+		record.whetherFixed = 0
+		record.queryWhether = 'N'
+		record.queryType = null
+	}
+}
+// 点击列表显示,处理
+const whetherTableChange = (record) => {
+	// 如果去除了勾选,清理部分数据
+	if (!record.whetherTable) {
+		record.queryWhether = 'N'
+		record.queryType = null
+	}
+}
+// 查询条件是否可用
+const toQueryWhetherDisabled = (record) => {
+	// 去掉了列表显示、图片上传、文件上传是不让生成搜索的
+	return !record.whetherTable || record.effectType === 'imageUpload' || record.effectType === 'fileUpload'
+}
+// 实体类型选择触发
+const fieldJavaTypeChange = (record) => {
+	if (record.fieldJavaType === 'Date') {
+		record.effectType = 'datepicker'
+	}
+}
+// 提交
+const onSubmit = (recordData) => {
+	let submitParam = cloneDeep(tableData.value)
+	let errStatus = 100
+	submitParam.forEach((item, index) => {
+		// 必填那一项转换
+		for (const key in item) {
+			if (item[key] === true) {
+				item[key] = 'Y'
 			}
 			}
-			if (item.queryWhether === 'Y' && !item.queryType) {
+			if (item[key] === false) {
-				// 排除掉时间选择
+				item[key] = 'N'
-				if (item.fieldJavaType !== 'Date' && item.effectType !== 'checkbox') {
-					errStatus++
-				}
 			}
 			}
-			if (
+		}
-				(item.effectType === 'select' || item.effectType === 'radio' || item.effectType === 'checkbox') &&
+		if (item.queryWhether === 'Y' && !item.queryType) {
-				!item.dictTypeCode
+			// 排除掉时间选择
-			) {
+			if (item.fieldJavaType !== 'Date' && item.effectType !== 'checkbox') {
 				errStatus++
 				errStatus++
 			}
 			}
+		}
+		if (
+			(item.effectType === 'select' || item.effectType === 'radio' || item.effectType === 'checkbox') &&
+			!item.dictTypeCode
+		) {
+			errStatus++
+		}
+		// 排序码重新生成,+1补位ID
+		item.sortCode = index + 1
+	})
+	return new Promise((resolve, reject) => {
+		if (errStatus > 100) {
+			reject('校验失败,请选择对应的下拉框选项')
+			return
+		}
+		genConfigApi
+		.configEditBatch(submitParam)
+		.then((data) => {
+			resolve(data)
 		})
 		})
-		return new Promise((resolve, reject) => {
+		.catch((err) => {
-			if (errStatus > 100) {
+			reject(err)
-				reject('校验失败,请选择对应的下拉框选项')
-				return
-			}
-			genConfigApi
-				.configEditBatch(submitParam)
-				.then((data) => {
-					resolve(data)
-				})
-				.catch((err) => {
-					reject(err)
-				})
 		})
 		})
-	}
-	// 抛出钩子
-	defineExpose({
-		onOpen,
-		onSubmit
 	})
 	})
+}
+const rowMove = (flag, index) => {
+	if (flag) {
+		let temp = tableData.value[index - 1]
+		tableData.value[index - 1] = tableData.value[index]
+		tableData.value[index] = temp
+	} else {
+		let temp = tableData.value[index + 1]
+		tableData.value[index + 1] = tableData.value[index]
+		tableData.value[index] = temp
+	}
+}
+// 抛出钩子
+defineExpose({
+	onOpen,
+	onSubmit
+})
 </script>
 </script>
 <style scoped>
 <style scoped>
-	.table-wrapper {
+.table-wrapper {
-		margin-top: -16px !important;
+	margin-top: -16px !important;
-	}
+}
 </style>
 </style>