代码模板，列顺序

snowy-admin-web/src/views/gen/config.vue

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