From 0c14d2b2ded9639eeb1b3ffb0283bbefe1fe74a7 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 29 八月 2024 17:01:54 +0800
Subject: [PATCH] use query table

---
 src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue |  391 +++++++++++++++++++++++++++++++------------------------
 1 files changed, 222 insertions(+), 169 deletions(-)

diff --git a/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue b/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue
index 8afb1d5..6c8adcc 100644
--- a/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue
+++ b/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue
@@ -1,183 +1,236 @@
 <template>
-	<div class="h-full flex flex-col">
-		<div class="grid grid-cols-2 gap-2 h-2/3 flex-0">
-			<div class="h-full overflow-auto">
-				<el-table
-					:data="tableData"
-					row-class-name="cursor-pointer"
-					class="h-full"
-					highlight-current-row
-					@current-change="dockRowChange"
-				>
-					<el-table-column prop="date" label="Date" width="180" />
-					<el-table-column prop="name" label="Name" width="180" />
-					<el-table-column prop="address" label="Address" />
-				</el-table>
-				<!-- <codemirror
-					v-model="dockCode"
-					:style="{ height: '100%' }"
-					:autofocus="true"
-					:indent-with-tab="true"
-					:tab-size="2"
-					:extensions="dockEditorExtensions"
-					@change="log('change', $event)"
-					@focus="log('focus', $event)"
-					@blur="log('blur', $event)"
-				/> -->
-			</div>
-			<div class="h-full overflow-auto">
-				<codemirror
-					class="h-full overflow-auto"
-					v-model="sqlCode"
-					:style="{ height: '100%' }"
-					:autofocus="true"
-					:indent-with-tab="true"
-					:tab-size="2"
-					:extensions="sqlEditorExtensions"
-					@change="log('change', $event)"
-					@focus="log('focus', $event)"
-					@blur="log('blur', $event)"
-				/>
-			</div>
-		</div>
-		<div class="flex-auto overflow-auto mt-3">
-			<codemirror
-				disabled
-				class="h-full overflow-auto"
-				v-model="jsonCode"
-				:style="{ height: '100%' }"
-				:autofocus="true"
-				:indent-with-tab="true"
-				:tab-size="2"
-				:extensions="jsonEditorExtensions"
-				@change="log('change', $event)"
-				@focus="log('focus', $event)"
-				@blur="log('blur', $event)"
-			/>
-		</div>
-	</div>
+	<HMContainer type="card">
+		<template #header>
+			<el-form ref="queryFormRef" :inline="true" :model="queryParams">
+				<el-form-item label="鍚嶇О" prop="title">
+					<el-input v-model="queryParams.title" style="width: 226.4px" placeholder="鍚嶇О" clearable />
+				</el-form-item>
+				
+				<el-form-item>
+					<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 鏌ヨ </el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button>
+					<el-button icon="ele-Plus" @click="openOperateDialog()"> 澧炲姞 </el-button>
+				</el-form-item>
+						</el-form>
+		</template>
+		<template #main>
+			<el-table
+				v-loading="tableLoading"
+				ref="draggableTableRef"
+				class="h100"
+				border
+				row-key="ID"
+				:tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
+				:expand-row-keys="treeTableExpandKeys"
+				@expand-change="tableExpandChange"
+				:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
+				:cell-style="tableCellCenterExceptColumn()"
+				:header-cell-style="{ textAlign: 'center' }"
+				:data="displayTableData"
+				highlight-current-row
+			>
+				<el-table-column prop="id" label="id" width="220" fixed="left" show-overflow-tooltip> </el-table-column>
+				<el-table-column prop="title" label="鍚嶇О" width="220" fixed="left" show-overflow-tooltip> </el-table-column>
+
+				<!-- <el-table-column prop="Code" label="缂栫爜" show-overflow-tooltip> </el-table-column>
+				<el-table-column prop="Description" label="璇存槑" width="550" show-overflow-tooltip> </el-table-column> -->
+				<el-table-column label="鎿嶄綔" width="150" fixed="right" show-overflow-tooltip>
+					<template #default="scope">
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateDialog(scope.row)">  </el-button>
+						<el-button
+							icon="ele-Delete"
+							size="small"
+							text
+							type="danger"
+							
+						>
+							
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</template>
+		<ywDialog
+			v-model="dialogIsShow"
+			:headerIcon="dialogHeaderIcon"
+			:title="dialogTitle"
+			width="400"
+			@dlgClosed="closeDialog"
+			@submit="submitFormValue"
+		>
+			<el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="55">
+				<el-form-item label="鐖剁骇" prop="ParentID" v-if="!isEditDialog">
+					<el-tree-select
+						filterable
+						style="width: 100%"
+						v-model="dialogFormValue.ParentID"
+						:props="{
+							id: 'ID',
+							label: 'Name',
+							children: 'Children',
+						}"
+						:data="tableTreeData"
+						node-key="ID"
+						:clearable="true"
+						:accordion="true"
+						:expandNode="false"
+						:check-strictly="true"
+					>
+					</el-tree-select>
+				</el-form-item>
+				<el-form-item label="undefined" prop="ParentID">
+					<el-input v-model="dialogFormValue.ParentID"></el-input>
+				</el-form-item>
+				<el-form-item label="鍚嶇О" prop="Name">
+					<el-input v-model="dialogFormValue.Name"></el-input>
+				</el-form-item>
+				<el-form-item label="缂栫爜" prop="Code">
+					<el-input v-model="dialogFormValue.Code"></el-input>
+				</el-form-item>
+				<el-form-item label="璇存槑" prop="Description">
+					<el-input v-model="dialogFormValue.Description" type="textarea" :rows="3"></el-input>
+				</el-form-item>
+			</el-form>
+		</ywDialog>
+	</HMContainer>
 </template>
 
 <script setup lang="ts">
-import { json } from '@codemirror/lang-json';
-import { sql } from '@codemirror/lang-sql';
-import { xml } from '@codemirror/lang-xml';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import { ref } from 'vue';
-import { Codemirror } from 'vue-codemirror';
-import * as codeExample from './testData';
-import _ from 'lodash';
-const log = console.log;
-const jsonCode = ref(codeExample.jsonCode);
-const dockCode = ref(codeExample.dockCode);
-const sqlCode = ref(codeExample.sqlCode);
-const tableData = [
-	{
-		date: '2016-05-03',
-		name: 'Tom',
-		address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-		date: '2016-05-02',
-		name: 'Tom',
-		address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-		date: '2016-05-04',
-		name: 'Tom',
-		address: 'No. 189, Grove St, Los Angeles',
-	},
-	{
-		date: '2016-05-01',
-		name: 'Tom',
-		address: 'No. 189, Grove St, Los Angeles',
-	},
-];
-const jsonEditorExtensions = [json(), vscodeDark];
-const sqlEditorExtensions = [sql(), vscodeDark];
-const dockEditorExtensions = [xml(), vscodeDark];
+import type { FormInstance, FormRules } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-const dockRowChange = (row) => {};
-/** @description 璺緞鍒嗛殧绗� */
-const PATH_SEPARATOR = '/';
-/** @description 1 閫�鍑烘墍鏈夊惊鐜� -1閫�鍑哄綋娆″惊鐜� 0鎴栧叾浠栧�肩户缁� */
-const travelObj = (obj, callBack?: (key?: string, value?: any, path?: string) => 1 | -1 | undefined | void | 0, path = '') => {
-	let entry = Object.entries(obj);
-	// if (entry[0] && !entry[0]['isRoot']) {
-	// 	entry = entry.map((item) => {
-	// 		item['isRoot'] = true;
-	// 		item['path'] = '';
-	// 		return item;
-	// 	});
-	// }
-	let res = null;
+import { computed, onMounted, ref } from 'vue';
+import ywDialog from '/@/components/dialog/yw-dialog.vue';
+import HMContainer from '/@/components/layout/HMContainer.vue';
+import { usePageDisplay } from '/@/hooks/usePageDisplay';
+import { useQueryTable } from '/@/hooks/useQueryTable';
+// import { useTableSort } from '/@/hooks/useTableSort';
+// import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
+import { deepClone } from '/@/utils/other';
+import { deleteCurrentRow } from '/@/utils/util';
 
-	iterate: for (const item of entry) {
-		const [key, value] = item;
-		const currentPath = path + key;
-		res = callBack?.(key, value, currentPath);
-		switch (res) {
-			case 1:
-				break iterate;
-			case -1:
-				continue iterate;
-			default:
-				break;
-		}
-		if (!value) {
-			continue;
-		}
-		if (_.isObjectLike(value)) {
-			res = travelObj(value, callBack, currentPath);
-			switch (res) {
-				case 1:
-					break iterate;
-				case -1:
-					continue iterate;
-				default:
-					break;
-			}
-		}
+import * as supervisorAdminApi from '/@/api/supervisorAdmin';
+import { convertListToTree, tableCellCenterExceptColumn } from '/@/utils/util';
+const tableTreeData = computed(() => convertListToTree(tableData.value));
+
+//#region ====================== 琛ㄦ牸鏁版嵁锛宼able init ======================
+const tableLoading = ref(false);
+const tableData = ref([]);
+const isDragStatus = ref(false);
+const getTableData = async () => {
+	tableLoading.value = true;
+	const res = await supervisorAdminApi.getSupervisorList().finally(() => {
+		tableLoading.value = false;
+	});
+	tableData.value = res.values||[];
+};
+//#endregion
+
+//#region ====================== 琛ㄦ牸鏌ヨ銆佹帓搴忥紝search form init ======================
+
+const queryParams = ref({
+	title: '',
+});
+const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, ()=>{
+	displayTableData.value = tableData.value;
+});
+
+
+
+//#endregion
+
+//#region ====================== 澧炲姞銆佷慨鏀硅褰曟搷浣�, dialog init======================
+const isEditDialog = ref(false);
+const dialogTitle = computed(() => {
+	return isEditDialog.value ? '淇敼鍒嗙粍' : '娣诲姞鍒嗙粍';
+});
+const dialogHeaderIcon = computed(() => {
+	return isEditDialog.value ? 'ele-Edit' : 'ele-Plus';
+});
+const dialogFormValue = ref(null);
+const dialogIsShow = ref(false);
+const dialogFormRef = ref<FormInstance>(null);
+
+
+
+const dialogFormRules = ref<FormRules>({
+	ParentID: [{ required: true, message: '璇烽�夋嫨undefined', trigger: 'change' }],
+	Name: [{ required: true, message: '璇疯緭鍏ュ悕绉�', trigger: 'blur' }],
+});
+const openOperateDialog = (row?) => {
+	if (row) {
+		isEditDialog.value = true;
+		const { ID, ParentID, Name, Code, Description } = row;
+
+		dialogFormValue.value = deepClone({ ID, ParentID, Name, Code, Description });
+	} else {
+		isEditDialog.value = false;
+
+		dialogFormValue.value = { ParentID: '', Name: '', Code: '', Description: '' };
 	}
-	return res;
+	dialogIsShow.value = true;
+};
+const closeDialog = () => {
+	dialogIsShow.value = false;
+	dialogFormRef.value.clearValidate();
 };
 
-const enum AmisDockType {
-	Api,
-}
-type AmisDockApi = string;
-type AmisDockValue = AmisDockApi;
-type AmisDockConfig = {
-	type: AmisDockType;
-	value: AmisDockValue;
-};
-const parseJSONData = (json: string) => {
-	if (!json) return;
-	const obj = JSON.parse(json);
-	const configList: AmisDockConfig[] = [];
-	travelObj(
-		{
-			id: 'u:7d4e7d100425',
-			body: [
-				{
-					id: 'u:3e0a8e524d99',
-				},
-			],
-		},
-		(key, value, path) => {
-			console.log('馃殌 ~ key:', key);
-			console.log('馃殌 ~ value:', value);
-			console.log('馃殌 ~ path:', path);
+const submitFormValue = async () => {
+	const valid = await dialogFormRef.value.validate().catch(() => {});
+	if (!valid) return;
 
-			// if (key === 'api') {
-			// 	configList.push({
-			// 		type: AmisDockType.Api,
-			// 		value: value.url,
-			// 	});
-			// }
+	if (isEditDialog.value) {
+		const res = await supervisorAdminApi.UpdateADictGroup(dialogFormValue.value);
+		const resData = res.Data;
+		if (resData) {
+			getTableData();
+			closeDialog();
+			ElMessage.success('淇敼鍒嗙粍鎴愬姛');
+		} else {
+			ElMessage.error('淇敼鍒嗙粍澶辫触');
 		}
-	);
+	} else {
+		const res = await supervisorAdminApi.InsertADictGroup(dialogFormValue.value);
+		const resData = res.Data;
+		if (resData === '0') {
+			ElMessage.error('娣诲姞鍒嗙粍澶辫触');
+			return;
+		}
+		getTableData();
+		closeDialog();
+		ElMessage.success('娣诲姞鍒嗙粍鎴愬姛');
+	}
 };
 
-parseJSONData(codeExample.jsonCode);
+//#endregion
+//#region ====================== 鏌ヨ蹇嵎閿� ======================
+const queryFormRef = ref(null);
+const pressEnterSearch = (ev: KeyboardEvent) => {
+	if (ev.key === 'Enter') {
+		handleQueryTable();
+	}
+};
+usePageDisplay(
+	() => {
+		queryFormRef.value.$el.addEventListener('keypress', pressEnterSearch);
+	},
+	() => {
+		queryFormRef.value?.$el.removeEventListener('keypress', pressEnterSearch);
+	}
+);
+//#endregion
+//#region ====================== 瑙ｅ喅鎷栨嫿灞曞紑鐘舵�佸け鏁堥棶棰� ======================
+const treeTableExpandKeys = ref([]);
+const tableExpandChange = (row, expanded) => {
+	if (expanded) {
+		treeTableExpandKeys.value.push(row.ID);
+	} else {
+		const idx = treeTableExpandKeys.value.indexOf(row.ID);
+		treeTableExpandKeys.value.splice(idx, 1);
+	}
+}; //#endregion
+onMounted(() => {
+	getTableData();
+});
 </script>
+<style scoped lang="scss"></style>

--
Gitblit v1.9.3