From ebe7b7b1f84714074cea82f23ba7473d0f7f70f9 Mon Sep 17 00:00:00 2001
From: lbw <wangiegie@163.com>
Date: Fri, 24 Feb 2023 16:34:22 +0800
Subject: [PATCH] =?UTF-8?q?:fire:=20=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/gen/table/edit.vue | 381 ++++++++++++++++++-----------------
 1 file changed, 191 insertions(+), 190 deletions(-)

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