diff --git a/app.platform/build.gradle b/app.platform/build.gradle
index 218a0cf3..e6e470a4 100644
--- a/app.platform/build.gradle
+++ b/app.platform/build.gradle
@@ -12,7 +12,7 @@ dependencies {
 dependencies {
     implementation (
         project(":io.sc.platform.app"),
-		//project(":io.sc.platform.developer"),
+		project(":io.sc.platform.developer"),
 
 		//project(":io.sc.platform.job.core"),
 		//project(":io.sc.platform.job.executor"),
diff --git a/gradle.properties b/gradle.properties
index c5efa8d0..6879ef20 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -38,7 +38,7 @@ application_version=1.0.0
 platform_group=io.sc
 platform_version=8.1.20
 platform_plugin_version=8.1.13
-platform_core_frontend_version=8.1.55
+platform_core_frontend_version=8.1.59
 
 ###########################################################
 # dependencies version
diff --git a/io.sc.platform.core.frontend/.eslintrc.cjs b/io.sc.platform.core.frontend/.eslintrc.cjs
index 0974c576..3e35007c 100644
--- a/io.sc.platform.core.frontend/.eslintrc.cjs
+++ b/io.sc.platform.core.frontend/.eslintrc.cjs
@@ -7,11 +7,6 @@ module.exports = {
         "vue/setup-compiler-macros": true,
     },
 
-    parserOptions:{
-        ecmaVersion: 2022,
-        sourceType:"module",
-    },
-
     extends:[
       "eslint:recommended",
       "plugin:vue/vue3-recommended",
@@ -24,6 +19,9 @@ module.exports = {
       ecmaVersion: 2022,
       parser: "@typescript-eslint/parser",
       sourceType: "module",
+      ecmaFeatures: {
+        jsx : false
+      }
     },
 
     rules:{
diff --git a/io.sc.platform.core.frontend/babel.config.cjs b/io.sc.platform.core.frontend/babel.config.cjs
index 26c581b4..0ff56db5 100644
--- a/io.sc.platform.core.frontend/babel.config.cjs
+++ b/io.sc.platform.core.frontend/babel.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread",
+    "@vue/babel-plugin-jsx",
   ]
 }
diff --git a/io.sc.platform.core.frontend/package.json b/io.sc.platform.core.frontend/package.json
index 0ed0ca84..10115101 100644
--- a/io.sc.platform.core.frontend/package.json
+++ b/io.sc.platform.core.frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.56",
+  "version": "8.1.60",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",
@@ -64,6 +64,7 @@
     "@typescript-eslint/eslint-plugin": "6.17.0",
     "@typescript-eslint/parser": "6.17.0",
     "@vue/compiler-sfc": "3.4.3",
+    "@vue/babel-plugin-jsx": "1.1.5",
     "@webpack-cli/serve": "2.0.5",
     "autoprefixer": "10.4.16",
     "babel-loader": "9.1.3",
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/PlatformForm.vue b/io.sc.platform.core.frontend/src/platform/components/form/PlatformForm.vue
deleted file mode 100644
index fcd93cef..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/PlatformForm.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<template>
-  <q-form ref="formRef" v-bind="extractFormProps(formProps)">
-    <div class="grid gap-2" :class="formLayoutComputed">
-      <template v-for="(field, index) in formFields as any" :key="String(index)">
-        <q-input
-          v-if="field.type === 'dateRange' && index < queryFormShowFieldNumber"
-          v-show="!field.hasOwnProperty('hide') || !field.hide"
-          v-model="formData[field.fmtModelName]"
-          :label="field.required ? '* ' + field.label : field.label"
-          :rules="fieldRulesFun(field.required, field)"
-          v-bind="extractFormItemComponentProps(field.type, field)"
-          :readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false"
-          @update:model-value="field.changeFun"
-        >
-          <template #append>
-            <q-icon :name="PlatformIconEnum.日期范围" class="cursor-pointer">
-              <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                <q-date
-                  v-model="formData[field.modelName]"
-                  range
-                  :mask="field.mask ? field.mask : 'YYYY-MM-DD'"
-                  :readonly="formStatus === 'view' || field.readonly ? true : false"
-                >
-                  <div class="row items-center justify-end">
-                    <q-btn v-close-popup label="关闭" color="primary" flat />
-                  </div>
-                </q-date>
-              </q-popup-proxy>
-            </q-icon>
-          </template>
-        </q-input>
-        <q-input
-          v-else-if="field.type === 'date' && index < queryFormShowFieldNumber"
-          v-show="!field.hasOwnProperty('hide') || !field.hide"
-          v-model="formData[field.modelName]"
-          :label="field.required ? '* ' + field.label : field.label"
-          :rules="fieldRulesFun(field.required, field)"
-          v-bind="extractFormItemComponentProps(field.type, field)"
-          :readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false"
-          @update:model-value="field.changeFun"
-        >
-          <template #append>
-            <q-icon :name="PlatformIconEnum.日期" class="cursor-pointer">
-              <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                <q-date
-                  v-model="formData[field.modelName]"
-                  today-btn
-                  :mask="field.mask ? field.mask : 'YYYY-MM-DD'"
-                  :readonly="formStatus === 'view' || field.readonly ? true : false"
-                >
-                  <div class="row items-center justify-end">
-                    <q-btn v-close-popup label="关闭" color="primary" flat />
-                  </div>
-                </q-date>
-              </q-popup-proxy>
-            </q-icon>
-          </template>
-        </q-input>
-        <q-select
-          v-else-if="field.type === 'select' && index < queryFormShowFieldNumber"
-          v-show="!field.hasOwnProperty('hide') || !field.hide"
-          v-model="formData[field.modelName]"
-          :label="field.required ? '* ' + field.label : field.label"
-          :rules="fieldRulesFun(field.required, field)"
-          v-bind="extractFormItemComponentProps(field.type, field)"
-          :readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false"
-          @update:model-value="field.changeFun"
-          @filter="field.filterFun"
-          @focus="field.focusFun"
-        >
-          <template v-if="field.afterButton" #after>
-            <q-btn
-              :round="field.afterButton.round"
-              :dense="field.afterButton.dense"
-              :flat="field.afterButton.flat"
-              :unelevated="field.afterButton.unelevated"
-              :outline="field.afterButton.outline"
-              :color="field.afterButton.color"
-              :icon="field.afterButton.icon"
-              :label="field.afterButton.label"
-              :disable="formStatus === PageStatusEnum.查看 || field.afterButton.disable ? true : false"
-              @click="field.afterButton.click"
-            />
-          </template>
-        </q-select>
-        <q-checkbox
-          v-else-if="field.type === 'checkbox' && index < queryFormShowFieldNumber"
-          v-show="!field.hasOwnProperty('hide') || !field.hide"
-          v-model="formData[field.modelName]"
-          :label="field.required ? '* ' + field.label : field.label"
-          v-bind="extractFormItemComponentProps(field.type, field)"
-          :readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false"
-          @update:model-value="field.changeFun"
-        />
-        <div
-          v-else-if="field.type === 'optionGroup' && index < queryFormShowFieldNumber"
-          v-show="!field.hasOwnProperty('hide') || !field.hide"
-          class="border-solid border"
-        >
-          <span class="p-2.5">{{ field.label }}</span>
-          <q-option-group
-            v-model="formData[field.modelName]"
-            v-bind="extractFormItemComponentProps(field.type, field)"
-            :readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false"
-            @update:model-value="field.changeFun"
-          />
-        </div>
-        <q-input
-          v-else-if="index < queryFormShowFieldNumber"
-          v-show="!field.hasOwnProperty('hide') || !field.hide"
-          v-model="formData[field.modelName]"
-          :label="field.required ? '* ' + field.label : field.label"
-          :rules="fieldRulesFun(field.required, field)"
-          v-bind="extractFormItemComponentProps(field.type, field)"
-          :readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false"
-          @update:model-value="field.changeFun"
-        >
-          <template v-if="field.afterButton" #after>
-            <q-btn
-              round
-              dense
-              flat
-              :disable="formStatus === PageStatusEnum.查看 || field.afterButton.disable ? true : false"
-              :icon="field.afterButton.icon"
-              @click="field.afterButton.click"
-            />
-          </template>
-        </q-input>
-      </template>
-    </div>
-    <slot></slot>
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, watch, computed, toRaw, defineProps } from 'vue';
-import {
-  extractFormProps,
-  extractFormItemComponentProps,
-  arrayToMap,
-  PlatformIconEnum,
-  FormComponentValidateEnum,
-  PageStatusEnum,
-  isEmpty,
-} from '@/platform/components/utils';
-
-const props = defineProps({
-  formProps: {
-    type: Object,
-    default: () => {
-      return { autofocus: false, greedy: true };
-    },
-  },
-  formColsNumber: { type: Number, default: 3 },
-  formColsAuto: { type: Boolean, default: true },
-  formFields: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  queryFormShowFieldNumber: { type: Number, default: 999 },
-});
-
-const formRef = ref();
-const formStatus = ref('add');
-const formFieldsMap = arrayToMap('modelName', props.formFields);
-
-// 由于采用字符串拼接 class 名称，tailwind 无法生效，模板文件中必须出现完整的类名，最终构建的css文件中才会包含进去。
-const formLayoutComputed = computed(() => {
-  let className = '';
-  switch (props.formColsNumber) {
-    case 1:
-      className = !props.formColsAuto ? 'grid-cols-1' : 'xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
-      break;
-    case 2:
-      className = !props.formColsAuto ? 'grid-cols-2' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
-      break;
-    case 4:
-      className = !props.formColsAuto ? 'grid-cols-4' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-6';
-      break;
-    case 5:
-      className = !props.formColsAuto ? 'grid-cols-5' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-6';
-      break;
-    case 6:
-      className = !props.formColsAuto ? 'grid-cols-6' : 'xs:grid-cols-1 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-6 xl:grid-cols-6';
-      break;
-    case 7:
-      className = !props.formColsAuto ? 'grid-cols-7' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-7 xl:grid-cols-7';
-      break;
-    case 8:
-      className = !props.formColsAuto ? 'grid-cols-8' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-8 lg:grid-cols-8 xl:grid-cols-8';
-      break;
-    case 9:
-      className = !props.formColsAuto ? 'grid-cols-9' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-9 lg:grid-cols-9 xl:grid-cols-9';
-      break;
-    case 10:
-      className = !props.formColsAuto ? 'grid-cols-10' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-10';
-      break;
-    case 11:
-      className = !props.formColsAuto ? 'grid-cols-11' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-11 lg:grid-cols-11 xl:grid-cols-11';
-      break;
-    case 12:
-      className = !props.formColsAuto ? 'grid-cols-12' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12';
-      break;
-    default:
-      className = !props.formColsAuto ? 'grid-cols-3' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6';
-  }
-  return className;
-});
-
-const selectDefaultValue = (field) => {
-  if (field.hasOwnProperty('defaultValue') && field.defaultValue !== null) {
-    if (typeof field.defaultValue === 'string' || typeof field.defaultValue === 'boolean' || typeof field.defaultValue === 'number') {
-      const dftValue = field.options.filter((item) => {
-        return item.value === field.defaultValue;
-      });
-      if (dftValue && dftValue.length > 0) {
-        return field.multiple ? [dftValue[0]] : dftValue[0];
-      } else {
-        return field.multiple ? [] : '';
-      }
-    } else if (Array.isArray(field.defaultValue)) {
-      const dftValue = field.options.filter((item) => {
-        return field.defaultValue.filter((val) => {
-          return val === item.value;
-        });
-      });
-      return field.multiple ? dftValue : dftValue[0];
-    }
-  } else {
-    return field.multiple ? [] : '';
-  }
-};
-
-const numberDefaultValue = (field) => {
-  if (field.hasOwnProperty('defaultValue') && typeof field.defaultValue === 'number') {
-    return field.defaultValue;
-  } else {
-    return '';
-  }
-};
-
-const checkboxDefaultValue = (field) => {
-  if (field.hasOwnProperty('defaultValue')) {
-    return field.defaultValue;
-  } else {
-    return false;
-  }
-};
-
-const optionGroupDefaultValue = (field) => {
-  if (field.hasOwnProperty('defaultValue')) {
-    return field.defaultValue;
-  } else if (field.optionGroupType && field.optionGroupType === 'checkbox') {
-    return [];
-  } else {
-    return '';
-  }
-};
-
-const textDefaultValue = (field) => {
-  if (field.hasOwnProperty('defaultValue')) {
-    return field.defaultValue;
-  } else {
-    return '';
-  }
-};
-
-const formModel: any = {};
-for (const field of props.formFields as any) {
-  if (field.type === 'dateRange') {
-    formModel[field.fmtModelName] = '';
-  } else if (field.type === 'select') {
-    formModel[field.modelName] = selectDefaultValue(field);
-  } else if (field.type === 'number') {
-    formModel[field.modelName] = numberDefaultValue(field);
-  } else if (field.type === 'checkbox') {
-    formModel[field.modelName] = checkboxDefaultValue(field);
-  } else if (field.type === 'optionGroup') {
-    formModel[field.modelName] = optionGroupDefaultValue(field);
-  } else {
-    formModel[field.modelName] = textDefaultValue(field);
-  }
-}
-const formData = reactive(formModel);
-for (const field of props.formFields as any) {
-  if (field.type === 'dateRange') {
-    watch(
-      () => formData[field.modelName],
-      (newVal, oldVal) => {
-        if (!newVal || newVal.from === '') {
-          formData[field.fmtModelName] = '';
-        } else {
-          formData[field.fmtModelName] = newVal.from + ' 至 ' + newVal.to;
-        }
-      },
-    );
-  }
-}
-
-const isNumber = (num) => {
-  return !isNaN(parseFloat(num)) && isFinite(num);
-};
-
-const fieldRulesFun = (required, field) => {
-  let resultRules = <any>[];
-  if (field.type === 'select' && field.multiple && required) {
-    resultRules.push((val) => {
-      if (val !== null && val.length > 0) {
-        return true;
-      } else {
-        return '该字段为必填项';
-      }
-    });
-  } else if (required) {
-    resultRules.push((val) => (val !== null && val !== '') || '该字段为必填项');
-  }
-  if (field.rules && field.rules.length > 0) {
-    field.rules.forEach((rule) => {
-      if (typeof rule === 'string' && rule === FormComponentValidateEnum.字符串不能包含空格校验) {
-        // 字符串不能包含空格校验
-        resultRules.push((val) => {
-          if (isEmpty(val) || val.indexOf(' ') === -1) {
-            return true;
-          } else {
-            return '不能包含空格';
-          }
-        });
-      } else if (typeof rule === 'string' && rule === FormComponentValidateEnum.默认日期格式校验) {
-        resultRules.push((val) => {
-          if (isEmpty(val) || /^(\d{4})-(\d{2})-(\d{2})$/.test(val)) {
-            return true;
-          } else {
-            return '日期格式校验未通过';
-          }
-        });
-      } else if (typeof rule === 'string' && rule === FormComponentValidateEnum.必须为整数校验) {
-        // 必须为整数校验
-        resultRules.push((val) => {
-          const tmp = String(val);
-          if (val === null || (tmp.indexOf('.') === -1 && Number.isInteger(parseInt(tmp)))) {
-            return true;
-          } else {
-            return '只能输入整数';
-          }
-        });
-      } else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.字符串最大长度校验) {
-        // 字符串最大长度校验
-        resultRules.push((val) => {
-          const tmp = String(val);
-          if (val === null || tmp.length <= rule.value) {
-            return true;
-          } else {
-            return '最大允许输入的长度为：' + rule.value;
-          }
-        });
-      } else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.最大小数位数校验) {
-        // 最大小数位数校验
-        resultRules.push((val) => {
-          const tmp = String(val);
-          if (val === null || tmp.indexOf('.') === -1 || tmp.substring(tmp.indexOf('.') + 1).length <= rule.value) {
-            return true;
-          } else {
-            return '最大允许输入的小数位数为：' + rule.value;
-          }
-        });
-      } else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.数字最小值校验) {
-        // 数字最小值校验
-        resultRules.push((val) => {
-          const tmp = String(val);
-          if (val === null || parseFloat(tmp) >= rule.value) {
-            return true;
-          } else {
-            return '最小允许输入的值为：' + rule.value;
-          }
-        });
-      } else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.数字最大值校验) {
-        // 数字最大值校验
-        resultRules.push((val) => {
-          const tmp = String(val);
-          if (val === null || parseFloat(tmp) <= rule.value) {
-            return true;
-          } else {
-            return '最大允许输入的值为：' + rule.value;
-          }
-        });
-      } else {
-        resultRules.push(rule);
-      }
-    });
-  }
-  return resultRules;
-};
-
-const formValidateFun = async () => {
-  const v = await formValidate();
-  return v;
-};
-const formValidate = async () => {
-  let validate = false;
-  await formRef.value.validate().then((success) => {
-    if (success) {
-      validate = true;
-    }
-  });
-  return validate;
-};
-
-const getFormDataFun = () => {
-  const data = { ...toRaw(formData) };
-  const selectFields = props.formFields.filter((item: any) => {
-    return item.type === 'select';
-  });
-  selectFields.forEach((item: any) => {
-    let selectValues = '';
-    if (item.multiple && data[item.modelName] && data[item.modelName].length > 0) {
-      data[item.modelName].forEach((val) => {
-        selectValues = selectValues + ',' + val.value;
-      });
-      selectValues = selectValues.substring(1, selectValues.length);
-    } else if (data[item.modelName]) {
-      selectValues = data[item.modelName].value ?? data[item.modelName];
-    }
-    data[item.modelName] = selectValues;
-  });
-  return data;
-};
-
-const setFormDataFun = (record) => {
-  for (const field of props.formFields as any) {
-    if (field.type === 'select') {
-      if (field.multiple && record[field.modelName].indexOf(',') > -1) {
-        const recordSelectValues = record[field.modelName].split(',');
-        const selectValues = <any>[];
-        recordSelectValues.forEach((item) => {
-          selectValues.push(setSelectValue(field.options, item));
-        });
-        formData[field.modelName] = selectValues;
-      } else {
-        formData[field.modelName] = setSelectValue(field.options, record[field.modelName]);
-      }
-    } else if (field.type === 'optionGroup') {
-      if (record[field.modelName]) {
-        formData[field.modelName] = record[field.modelName];
-      } else {
-        formData[field.modelName] = [];
-      }
-    } else {
-      formData[field.modelName] = record[field.modelName];
-    }
-  }
-};
-
-const setSelectValue = (options, val) => {
-  const opt = options.filter((option) => {
-    return option.value === val;
-  });
-  if (opt && opt.length > 0) {
-    return opt[0];
-  } else {
-    return val;
-  }
-};
-
-const setFieldValueFun = (fieldName, value) => {
-  const field = formFieldsMap.get(fieldName);
-  if (field.type === 'select') {
-    if (field.multiple && Array.isArray(value)) {
-      const selectValues = <any>[];
-      value.forEach((item) => {
-        selectValues.push(setSelectValue(field.options, item));
-      });
-      formData[field.modelName] = selectValues;
-    } else {
-      formData[field.modelName] = setSelectValue(field.options, value);
-    }
-  } else {
-    formData[field.modelName] = value;
-  }
-};
-const getFieldValueFun = (fieldName) => {
-  return formData[fieldName];
-};
-
-const resetFormDataFun = () => {
-  Object.keys(formData).forEach((key) => {
-    switch (typeof formData[key]) {
-      case 'string':
-        formData[key] = '';
-        break;
-      case 'boolean':
-        formData[key] = false;
-        break;
-      case 'number':
-        formData[key] = '';
-        break;
-      default:
-        formData[key] = undefined;
-        break;
-    }
-  });
-};
-
-const setFormStatusFun = (status) => {
-  formStatus.value = status;
-};
-
-const getFormStatusFun = () => {
-  return toRaw(formStatus.value);
-};
-
-const getFormFieldMapFun = () => {
-  return formFieldsMap;
-};
-
-defineExpose({
-  formValidateFun,
-  getFormDataFun,
-  setFormDataFun,
-  getFormStatusFun,
-  setFormStatusFun,
-  resetFormDataFun,
-  setFieldValueFun,
-  getFieldValueFun,
-  getFormFieldMapFun,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
index 03c245cd..fa372782 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
@@ -9,8 +9,8 @@
               (field.colspan === 'full'
                 ? ' col-span-' + screenColsNumComputed
                 : field.colspan && screenColsNumComputed >= field.colspan
-                ? ' col-span-' + field.colspan
-                : ' col-span-1')
+                  ? ' col-span-' + field.colspan
+                  : ' col-span-1')
             "
           >
             <component
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue b/io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue
deleted file mode 100644
index 53b19fc5..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <q-icon v-if="value" :name="IconEnum.是状态" color="green" size="sm"> </q-icon>
-    <q-icon v-else-if="!value && showNoEnable" :name="IconEnum.否状态" color="red" size="sm"> </q-icon>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { IconEnum } from '@/platform/enums';
-
-const props = defineProps({
-  value: { type: Boolean, default: false }, // 值
-  showNoEnable: { type: Boolean, default: false }, // 不可用是否显示
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/PlatformGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/PlatformGrid.vue
deleted file mode 100644
index 4b57e5c1..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/PlatformGrid.vue
+++ /dev/null
@@ -1,2473 +0,0 @@
-<template>
-  <div>
-    <q-table
-      ref="tableRef"
-      v-bind="extractTableProps(tableProps)"
-      v-model:pagination="table.pagination"
-      v-model:selected="table.selected"
-      :selection="tableSelection"
-      :separator="tableSeparator"
-      :rows="table.rows"
-      :columns="extractTableColumns"
-      :row-key="tableRowKey"
-      :hide-bottom="table.hideBottom"
-      :dense="tableDense"
-      :rows-per-page-options="props.tablePagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
-      :loading="table.loading"
-      :no-data-label="table.noDataLabel"
-      :loading-label="table.loadingLabel"
-      :class="tableTitleClassComputed"
-      :table-style="tableHeightComputed"
-      @request="onRequest"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @fullscreen="tableFullscreenFun"
-      @selection="selection"
-    >
-      <template #top="scope">
-        <q-resize-observer @resize="onResize" />
-        <div class="col">
-          <PlatformForm
-            ref="queryFormRef"
-            :form-cols-number="queryFormColsNumber"
-            :form-cols-auto="queryFormColsAuto"
-            :form-fields="queryFormFields"
-            :query-form-show-field-number="queryFormShowFieldNumberComputed"
-          >
-            <template #default>
-              <div class="pt-2.5 flex justify-between">
-                <div class="_table-title text-[18px] pt-[9px]">{{ tableTitle }}</div>
-                <div class="flex justify-end gap-4">
-                  <template v-for="(btn, index) in tableButtons as any" :key="index">
-                    <q-btn-dropdown
-                      v-if="typeof btn === 'string' && btn === 'query' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      split
-                      :icon="PlatformIconEnum.查询"
-                      label="查询"
-                      unelevated
-                      outline
-                      @click="onSubmit"
-                    >
-                      <q-list>
-                        <q-item v-close-popup clickable :disable="!showMoreQueryBtnComputed">
-                          <q-item-section>
-                            <q-item-label @click="btnMoreClick"><q-icon :name="PlatformIconEnum.更多查询"></q-icon> 更多查询</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
-                    <q-btn
-                      v-else-if="typeof btn === 'string' && btn === 'reset' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      label="重置"
-                      :icon="PlatformIconEnum.重置"
-                      unelevated
-                      outline
-                      @click="onReset"
-                    />
-                    <q-btn
-                      v-else-if="typeof btn === 'string' && btn === 'add' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      label="新增"
-                      :icon="PlatformIconEnum.新增"
-                      unelevated
-                      outline
-                      @click="onAdd"
-                    ></q-btn>
-                    <q-btn
-                      v-else-if="typeof btn === 'string' && btn === 'edit' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      label="编辑"
-                      :icon="PlatformIconEnum.编辑"
-                      :disable="btnDisableComputed"
-                      unelevated
-                      outline
-                      @click="onEdit"
-                    ></q-btn>
-                    <q-btn
-                      v-else-if="typeof btn === 'string' && btn === 'delete' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      label="删除"
-                      :icon="PlatformIconEnum.删除"
-                      :disable="btnDisableComputed"
-                      unelevated
-                      outline
-                      @click="onDelete"
-                    ></q-btn>
-                    <q-btn
-                      v-else-if="typeof btn === 'string' && btn === 'view' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      label="查看"
-                      :icon="PlatformIconEnum.查看"
-                      :disable="btnDisableComputed"
-                      unelevated
-                      outline
-                      @click="onView"
-                    ></q-btn>
-                    <q-btn
-                      v-else-if="typeof btn === 'string' && btn === 'export' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      label="导出"
-                      icon="file_download"
-                      unelevated
-                      outline
-                      @click="onExport"
-                    ></q-btn>
-                    <q-btn
-                      v-else-if="typeof btn === 'object' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      :label="btn.label"
-                      :icon="btn.icon"
-                      :disable="btn.enableIf ? !btn.enableIf(table.selected) : false"
-                      :dense="btn.dense"
-                      :size="btn.size"
-                      unelevated
-                      outline
-                      @click="btn.click(table.selected)"
-                    ></q-btn>
-                    <q-separator
-                      v-else-if="typeof btn === 'string' && btn === 'separator' && index < screenShowBtnsNumComputed + screenShowSeparatorComputed"
-                      vertical
-                    />
-                  </template>
-                  <q-btn-dropdown v-if="showMoreBtnComputed" label="更多" unelevated outline>
-                    <q-list>
-                      <q-item
-                        v-if="screenShowBtnsNumComputed < 1 && props.queryFormFields.length > 0"
-                        v-close-popup
-                        clickable
-                        :disable="!showMoreQueryBtnComputed"
-                      >
-                        <q-item-section>
-                          <q-item-label @click="btnMoreClick"><q-icon :name="PlatformIconEnum.更多查询"></q-icon> 更多查询</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                      <template v-for="(btn, index) in tableButtonsComputed as any" :key="index">
-                        <q-item
-                          v-if="typeof btn === 'string' && btn === 'query' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onSubmit"><q-icon :name="PlatformIconEnum.查询"></q-icon> 查询</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item
-                          v-else-if="typeof btn === 'string' && btn === 'reset' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onReset"><q-icon :name="PlatformIconEnum.重置"></q-icon> 重置</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item
-                          v-else-if="typeof btn === 'string' && btn === 'add' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onAdd"><q-icon :name="PlatformIconEnum.新增"></q-icon> 新增</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item
-                          v-else-if="typeof btn === 'string' && btn === 'edit' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onEdit"><q-icon :name="PlatformIconEnum.编辑"></q-icon> 编辑</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item
-                          v-else-if="typeof btn === 'string' && btn === 'delete' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onDelete"><q-icon :name="PlatformIconEnum.删除"></q-icon> 删除</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item
-                          v-else-if="typeof btn === 'string' && btn === 'view' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onView"><q-icon :name="PlatformIconEnum.查看"></q-icon> 查看</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item
-                          v-else-if="typeof btn === 'string' && btn === 'export' && index >= tableButtonsComputed.length - moreBtnListNumberComputed"
-                          v-close-popup
-                          clickable
-                        >
-                          <q-item-section>
-                            <q-item-label @click="onExport"><q-icon name="file_download"></q-icon> 导出</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                        <q-item v-else-if="typeof btn === 'object' && index >= tableButtonsComputed.length - moreBtnListNumberComputed" v-close-popup clickable>
-                          <q-item-section>
-                            <q-item-label @click="btn.click(table.selected)"><q-icon :name="btn.icon"></q-icon> {{ btn.label }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </template>
-                    </q-list>
-                  </q-btn-dropdown>
-                  <template v-for="(btn, index) in tableButtons" :key="index">
-                    <q-btn
-                      v-if="typeof btn === 'string' && btn === 'inFullscreen'"
-                      :icon="scope.inFullscreen ? PlatformIconEnum.退出全屏 : PlatformIconEnum.全屏"
-                      unelevated
-                      outline
-                      @click="scope.toggleFullscreen"
-                    >
-                      <q-tooltip transition-show="rotate" transition-hide="rotate">
-                        {{ scope.inFullscreen ? '退出全屏' : '全屏' }}
-                      </q-tooltip>
-                    </q-btn>
-                  </template>
-                </div>
-              </div>
-            </template>
-          </PlatformForm>
-        </div>
-      </template>
-      <template #header="scope">
-        <template v-if="columnTitleState.columnTitleRowNum > 1">
-          <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
-            <q-th
-              v-if="rIndex === 0 && props.tableSelection !== 'none'"
-              :rowspan="columnTitleState.columnTitleRowNum"
-              :style="moreColumnTitleTableSelectionStyle"
-            >
-            </q-th>
-            <q-th v-if="rIndex === 0 && props.tableShowSortNo" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle">
-              序号
-            </q-th>
-            <q-th
-              v-for="c in r"
-              :key="c.name"
-              :rowspan="c.rowspan"
-              :colspan="c.colspan"
-              :style="thStyleHandler(c, scope)"
-              :class="c.classes"
-              :props="titleScopeHandler(c, scope)"
-            >
-              {{ c.label }}
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-else>
-          <q-tr :props="scope">
-            <q-th v-if="props.tableSelection !== 'none'"></q-th>
-            <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
-              {{ col.label }}
-            </q-th>
-          </q-tr>
-        </template>
-      </template>
-      <template v-if="tableRowDrag" #body-cell="scope">
-        <q-td
-          :props="scope"
-          draggable="true"
-          @dragenter="onDragEnter($event, scope)"
-          @dragleave="onDragLeave"
-          @dragover="onDragOver($event, scope)"
-          @drop="onDrop($event, scope)"
-          @dragstart="onDragStart($event, scope)"
-        >
-          <template v-if="scope.col.field === '_sortNo_'">{{ scope.rowIndex + 1 }}</template>
-          <template v-else>
-            {{ scope.value }}
-            <q-tooltip v-if="scope.col.classes?.indexOf('truncate') > -1">
-              {{ scope.value }}
-            </q-tooltip>
-          </template>
-        </q-td>
-      </template>
-      <template v-else #body-cell="scope">
-        <q-td :props="scope">
-          <template v-if="scope.col.field === '_sortNo_'">{{ scope.rowIndex + 1 }}</template>
-          <template v-else>
-            {{ scope.value }}
-            <q-tooltip v-if="scope.col.classes?.indexOf('truncate') > -1">
-              {{ scope.value }}
-            </q-tooltip>
-          </template>
-        </q-td>
-      </template>
-      <template #loading>
-        <q-inner-loading :showing="table.loading" style="z-index: 999">
-          <q-spinner-gears size="50px" color="primary" />
-        </q-inner-loading>
-      </template>
-      <template #pagination="scope">
-        <template v-if="props.tablePagination.rowsPerPage">
-          <template v-if="table.refHeightWidth.middleWidth > 600">
-            <q-pagination
-              v-model="table.pagination.page"
-              :boundary-links="table.pagination.config.boundaryLinks"
-              :boundary-numbers="table.pagination.config.boundaryNumbers"
-              :direction-links="table.pagination.config.directionLinks"
-              :ellipses="table.pagination.config.ellipses"
-              :max-pages="table.pagination.config.maxPages"
-              :min="1"
-              :max="scope.pagesNumber"
-              @update:model-value="pageChange"
-            />
-          </template>
-          <template v-else>
-            <q-pagination
-              v-model="table.pagination.page"
-              :boundary-links="table.pagination.config.boundaryLinks"
-              :boundary-numbers="table.pagination.config.boundaryNumbers"
-              :direction-links="table.pagination.config.directionLinks"
-              :ellipses="table.pagination.config.ellipses"
-              :max-pages="3"
-              :min="1"
-              :max="scope.pagesNumber"
-              @update:model-value="pageChange"
-            />
-          </template>
-          <span>共 {{ table.pagination.rowsNumber }} 条记录</span>
-        </template>
-        <template v-else> 当前未启用分页，共 {{ table.pagination.rowsNumber }} 条记录 </template>
-      </template>
-      <template v-if="!props.hideBottom" #no-data="{ message }">
-        <div class="full-width row flex-center text-dark q-gutter-sm" :style="`height:` + noDataBottomHeightComputed">
-          <q-icon size="2em" :name="PlatformIconEnum.提示" />
-          <span>
-            {{ message }}
-          </span>
-        </div>
-      </template>
-    </q-table>
-    <PlatformDialog
-      ref="dialogRef"
-      :dialog-props="dialog.dialogProps"
-      :dialog-title="dialog.dialogTitle"
-      :dialog-init-width="dialog.dialogInitWidth"
-      :dialog-init-height="dialog.dialogInitHeight"
-      :dialog-maximized="dialog.dialogMaximized"
-      :dialog-buttons="dialog.dialogButtons"
-    >
-      <template #content>
-        <PlatformForm
-          ref="dialogFormRef"
-          :form-props="addFormProps.formProps"
-          :form-cols-number="addFormProps.formColsNumber"
-          :form-cols-auto="addFormProps.formColsAuto"
-          :form-fields="addFormProps.formFields"
-        >
-        </PlatformForm>
-      </template>
-    </PlatformDialog>
-    <PlatformDrawer
-      ref="drawerRef"
-      :drawer-props="drawer.drawerProps"
-      :drawer-title="drawer.drawerTitle"
-      :drawer-init-width="drawer.drawerInitWidth"
-      :drawer-maximized="drawer.drawerMaximized"
-    >
-      <template #content>
-        <PlatformInfo :info-array="viewInfo.infoArray" :label-align="viewInfo.labelAlign" :value-align="viewInfo.valueAlign"> </PlatformInfo>
-      </template>
-    </PlatformDrawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, computed, onMounted, nextTick, toRaw } from 'vue';
-import { axios, Environment } from '@/platform';
-import { useQuasar, getCssVar, exportFile } from 'quasar';
-import PlatformDialog from '@/platform/components/dialog/PlatformDialog.vue';
-import PlatformDrawer from '@/platform/components/drawer/PlatformDrawer.vue';
-import PlatformInfo from '@/platform/components/panel/PlatformInfo.vue';
-import PlatformForm from '@/platform/components/form/PlatformForm.vue';
-import {
-  extractTableProps,
-  extractTableColumnsProps,
-  getQueryFormColsNumberByScreen,
-  arrayToMap,
-  PlatformIconEnum,
-  platformNotify,
-  OperatorTypeEnum,
-  isEmpty,
-  PageStatusEnum,
-  PlatformNotifyTypeEnum,
-} from '@/platform/components/utils';
-import '@/css/tailwind.css';
-
-const gc = Environment.getConfigure();
-const darkBgColor = getCssVar('dark');
-const tableHeadBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.headBgColor || '#f5f7fa';
-const tableBorderColor = gc.theme?.grid?.borderColor || 'rgba(0, 0, 0, 0.12)';
-const stickyBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.stickyBgColor || '#ffffff';
-
-const props = defineProps({
-  tableProps: {
-    type: Object,
-    default: () => {
-      return {
-        flat: true, // 应用“平面”设计（无默认阴影）
-        bordered: true, // 外层边框
-      };
-    },
-  },
-  tableSelection: { type: String, default: 'single' }, // 单选模式, 包含：multiple, single, none
-  tableSeparator: { type: String, default: 'cell' }, // 表格分割线，包含：horizontal、vertical、cell、none
-  tableHeight: { type: Number, default: 0 },
-  tableSpaceHeight: { type: Number, default: 14 },
-  tableTitle: { type: String, default: '' },
-  tableRowKey: { type: String, default: '' },
-  tableInitLoadData: { type: Boolean, default: true },
-  tableRowDrag: { type: Boolean, default: false },
-  hideBottom: { type: Boolean, default: false },
-  templateGridId: { type: String, default: '' },
-  tableDataUrl: { type: String, default: '' },
-  deleteDataUrl: { type: String, default: '' },
-  tableDense: { type: Boolean, default: false }, // 表格数据显示区域紧凑模式
-  tableColumnTitleDense: { type: Boolean, default: false }, // 表格列标题紧凑模式
-  tableShowSortNo: { type: Boolean, default: false },
-  tableColumns: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  tableLeftColumnStickyNumber: { type: Number, default: 0 },
-  queryFormColsNumber: { type: Number, default: 3 },
-  queryFormColsAuto: { type: Boolean, default: true },
-  queryFormRowsNumber: { type: Number, default: 1 },
-  queryFormFields: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  tableButtons: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  tablePagination: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  addFormProps: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  onRowClick: {
-    type: Function,
-    default: null,
-  }, // 监听使用，不要传递覆盖！！！
-  onRowDbClick: {
-    type: Function,
-    default: null,
-  }, // 监听使用，不要传递覆盖！！！
-  onSelection: {
-    type: Function,
-    default: null,
-  },
-});
-const emit = defineEmits<{
-  (
-    e: 'rowClick', // 行点击事件
-    evt: Event, // 第一个参数，JS 事件对象
-    row: any, // 第二个参数, 点击的行对象
-    index: number, // 第三个参数, 当前页中行的索引
-  ): void;
-  (
-    e: 'rowDbClick', // 行双击事件
-    evt: Event, // 第一个参数，JS 事件对象
-    row: any, // 第二个参数, 点击的行对象
-    index: number, // 第三个参数, 当前页中行的索引
-  ): void;
-  (
-    e: 'selection', // 行选择事件
-    details: any, // 第一个参数
-  ): void;
-  (
-    e: 'requestDataBefore', // 表格请求数据前触发事件
-    requestParams: URLSearchParams | any, // 第一个参数，请求参数
-    callback: any, // 回调函数
-  ): void;
-  (
-    e: 'requestDataAfter', // 表格请求数据完成后触发事件
-    responseResult: any, // 第一个参数，请求响应结果
-  ): void;
-  (
-    e: 'addEditDataSubmitBefore', // 内置新增编辑功能数据提交前触发事件
-    data: any, // 第一个参数，提交的数据对象
-    callback: any,
-  ): void; // 返回值：处理完成后的数据对象
-  (
-    e: 'addEditDataSubmitAfter', // 内置新增编辑功能数据提交完成后触发事件
-    responseResult: any, // 第一个参数，请求响应结果
-  ): void;
-  (
-    e: 'deleteDataBefore', // 内置删除功能提交完成前回调函数
-    data: Array<any | string>, // 第一个参数，删除提交的数据
-    callback: any,
-  ): void; // 返回值：处理完成后的数据
-  (
-    e: 'deleteDataAfter', // 内置删除功能提交完成后回调函数
-    responseResult: any, // 第一个参数，删除提交的数据
-  ): void;
-  (
-    e: 'addDialogOpenAfter', // 新增窗口打开之后
-  ): void;
-  (
-    e: 'editDialogOpenAfter', // 编辑窗口打开之后
-    editData: any, // 第一个参数，编辑对应的数据
-  ): void;
-  (
-    e: 'rowDragDropAfter', // 行拖拽完成后
-  ): void;
-}>();
-
-const extractTableColumns = extractTableColumnsProps(props);
-// 多表头插槽传入的 props 处理
-const titleScopeHandler = (column: any, scope: any) => {
-  if (extractTableColumns && extractTableColumns.length > 0) {
-    const i = extractTableColumns.findIndex((item) => item.name === column.name);
-    if (i > -1) {
-      return scope;
-    }
-  }
-  return undefined;
-};
-
-const $q = useQuasar();
-const queryFormRef = ref();
-const tableRef = ref();
-const dialogRef = ref();
-const drawerRef = ref();
-const dialogFormRef = ref();
-const queryFormFieldsMap = arrayToMap('modelName', props.queryFormFields);
-const tableColumnsMap = arrayToMap('name', props.tableColumns);
-
-const table = reactive({
-  selected: <any>[],
-  noDataLabel: '没有可用数据',
-  hideBottom: props.hideBottom,
-  loading: false,
-  loadingLabel: '数据加载中',
-  pagination: {
-    config: {
-      boundaryLinks: true, // 显示边界按钮链接
-      boundaryNumbers: false, // 始终显示第一页和最后一页按钮（如果不使用“输入”）
-      directionLinks: false, // 显示方向按钮
-      ellipses: false, // 页面可用时显示省略号
-      maxPages: 5, // 一次显示的最大页面链接数；0表示无限
-    },
-    sortBy: props.tablePagination.sortBy ? props.tablePagination.sortBy : '',
-    descending: props.tablePagination.descending ? props.tablePagination.descending : false,
-    reqPageStart: Object.hasOwnProperty.call(props.tablePagination, 'reqPageStart') ? props.tablePagination.reqPageStart : 1,
-    page: 1,
-    rowsPerPage: props.tablePagination.rowsPerPage ? props.tablePagination.rowsPerPage : 0,
-    rowsNumber: 10,
-    rowsPerPageOptions: [5, 10, 20, 50, 100],
-  },
-  rows: <any>[],
-  // 表格响应式高宽
-  refHeightWidth: {
-    yLocation: 0, // 表格当前所在Y轴位置
-    topHeight: 0, // 表格当前top区域高度（表格列头上方区域）
-    bottomHeight: 0, // 表格当前bottom区域高度（无可用数据、分页那块区域）
-    middleWidth: 0, // 表格当前middle区域宽度（表格列头及数据行区域）
-    middleScrollWidth: 0, // 表格出现滚动条时的宽度，若无滚动条则与 middleWidth 一致
-    middleHeight: 0, // 表格当前middle区域高度(表格列头及数据行区域)
-    columnHeadHeight: 0, // 表格当前列头高度
-    tableTitleWidth: 0, // 当前表格title宽度
-  },
-  inFullscreen: false, // 表格当前是否为全屏模式
-});
-
-const dialog = reactive({
-  dialogProps: {
-    persistent: true,
-  },
-  dialogTitle: '新增',
-  dialogInitWidth: props.addFormProps.dialogInitWidth ?? '80%',
-  dialogInitHeight: props.addFormProps.dialogInitHeight ?? '80%',
-  dialogMaximized: true,
-  dialogButtons: [
-    {
-      icon: PlatformIconEnum.提交,
-      label: '提交',
-      loading: false,
-      click: () => {
-        save();
-      },
-    },
-  ],
-});
-
-const drawer = reactive({
-  drawerProps: {
-    persistent: false,
-    position: 'right',
-  },
-  drawerTitle: '查看',
-  drawerInitWidth: '50vw',
-  drawerMaximized: true,
-});
-
-const viewInfo = reactive({
-  infoArray: <any>[],
-  labelAlign: 'left',
-  valueAlign: 'left',
-});
-
-const queryField = reactive({
-  showStatus: false,
-});
-
-// 多行列标题相关变量
-const columnTitleState = reactive({
-  columnTitleRowNum: 1, // 多行列标题总行数
-  columnTitleArr: <any>[], // 多行列标题集合
-});
-// 多行列标题的处理类型
-type MoreColumnTitleType = {
-  name: string; // 列模型的name
-  label: string; // 列模型的label
-  parentLevel: number; // 父层级数
-  childrenLevel: number; // 子层级数
-  rowspan: number; // 跨行数
-  colspan: number; // 跨列数
-  rowIndex: number; // 列模型所处的行下标
-  style: any; // 列模型配置的内嵌样式
-  classes: any; // 列模型配置的 classes
-  parents: any; // 列模型的父name集合
-};
-// 多行列标题的记录 map
-const moreColumnTitleMap = new Map<string, MoreColumnTitleType>();
-const allColumnMap = new Map();
-
-// 将所有列转换到 map 中
-const columnToMap = (column: any) => {
-  if (column && column.childrenColumns && column.childrenColumns.length > 0) {
-    allColumnMap.set(column.name, column);
-    moreColumnTitleMap.set(column.name, {
-      name: column.name,
-      label: column.label,
-      parentLevel: 0,
-      childrenLevel: 0,
-      rowspan: 0,
-      colspan: 0,
-      rowIndex: 0,
-      style: column.style,
-      classes: column.classes,
-      parents: [],
-    });
-    column.childrenColumns.forEach((item) => {
-      columnToMap(item);
-    });
-  } else {
-    allColumnMap.set(column.name, column);
-    moreColumnTitleMap.set(column.name, {
-      name: column.name,
-      label: column.label,
-      parentLevel: 0,
-      childrenLevel: 0,
-      rowspan: 0,
-      colspan: 0,
-      rowIndex: 0,
-      style: column.style,
-      classes: column.classes,
-      parents: [],
-    });
-  }
-};
-let tmpChildrenLevel = 0;
-let tmpColspan = 0;
-const getChildrenLevel = (column) => {
-  if (column && column.childrenColumns && column.childrenColumns.length > 0) {
-    tmpChildrenLevel += 1;
-    column.childrenColumns.forEach((item) => {
-      getChildrenLevel(item);
-    });
-  } else if (column) {
-    tmpColspan += 1;
-  }
-};
-
-// 根据子找所有父,返回值不包含查找的对象
-function findParents(arrData: any, name: any) {
-  if (arrData.length == 0) return;
-  for (let i = 0; i < arrData.length; i++) {
-    if (arrData[i].name == name) {
-      return [];
-    } else {
-      if (arrData[i].childrenColumns) {
-        const res = findParents(arrData[i].childrenColumns, name);
-        if (res !== undefined) {
-          return res.concat(arrData[i].name).reverse();
-        }
-      }
-    }
-  }
-}
-
-const handlerMoreRowColumnTitle = () => {
-  props.tableColumns.forEach((tableColumn: any) => {
-    columnToMap(tableColumn);
-  });
-  let maxColumnChildrenLevel = 0;
-  for (let key of allColumnMap.keys()) {
-    // 处理列的 childrenLevel
-    getChildrenLevel(allColumnMap.get(key));
-    moreColumnTitleMap.get(key)!.childrenLevel = tmpChildrenLevel;
-    if (tmpChildrenLevel > 0 && tmpChildrenLevel > maxColumnChildrenLevel) {
-      maxColumnChildrenLevel = tmpChildrenLevel;
-    }
-    tmpChildrenLevel = 0;
-    // 处理列的 colspan
-    moreColumnTitleMap.get(key)!.colspan = tmpColspan;
-    tmpColspan = 0;
-
-    // 处理列的 parent
-    const parent = findParents(props.tableColumns, key);
-    moreColumnTitleMap.get(key)!.parents = parent;
-
-    // 处理列的 parentLevel
-    moreColumnTitleMap.get(key)!.parentLevel = parent.length;
-
-    // 处理列的 rowIndex
-    moreColumnTitleMap.get(key)!.rowIndex = parent.length;
-  }
-  if (maxColumnChildrenLevel > 0) {
-    // 更改列头总行数 = 最大子层级数 + 1
-    columnTitleState.columnTitleRowNum = maxColumnChildrenLevel + 1;
-  }
-
-  const map = new Map<number, [any]>();
-  for (let key of moreColumnTitleMap.keys()) {
-    const value: any = moreColumnTitleMap.get(key);
-    // 得到列头总行数后处理列的 rowspan
-    if (value.parentLevel === 0 && value.childrenLevel === 0) {
-      value.rowspan = columnTitleState.columnTitleRowNum;
-    } else if (value.parentLevel === 0) {
-      value.rowspan = 1;
-    } else {
-      // 总行数 - 父层级数 - 子层级数
-      value.rowspan = columnTitleState.columnTitleRowNum - value.parentLevel - value.childrenLevel;
-    }
-    if (map.has(value.rowIndex)) {
-      (map.get(value.rowIndex) as any).push(value);
-    } else {
-      map.set(value.rowIndex, [value]);
-    }
-  }
-  const arr = Array.from(map);
-
-  arr.sort((a, b) => a[0] - b[0]);
-  arr.forEach((item) => {
-    columnTitleState.columnTitleArr.push(item[1]);
-  });
-};
-
-const btnDisableComputed = computed(() => {
-  if (table.selected && table.selected.length > 0) {
-    return false;
-  }
-  return true;
-});
-// 表格按钮排除分隔符、全屏后的有效数量
-const tableButtonsComputed = computed(() => {
-  const btns = props.tableButtons.filter((item) => {
-    return typeof item !== 'string' || (item !== 'separator' && item !== 'inFullscreen');
-  });
-  return btns;
-});
-// 是否显示更多查询按钮
-const showMoreQueryBtnComputed = computed(() => {
-  if (props.queryFormFields.length > queryFormColsNumberComputed.value) {
-    return true;
-  } else {
-    return false;
-  }
-});
-// 是否显示更多按钮
-const showMoreBtnComputed = computed(() => {
-  // 当前屏幕按钮显示个数 - 表格按钮排除分隔符、全屏后的有效数量 - 更多按钮自身需要占一个位置
-  if (screenShowBtnsMaxNumberComputed.value - tableButtonsComputed.value.length - 1 < 0) {
-    return true;
-  } else {
-    return false;
-  }
-});
-// 更多按钮中需要显示的按钮数量
-const moreBtnListNumberComputed = computed(() => {
-  // 更多按钮中需要显示的 = 按钮总数 - 当前正常显示数量
-  const needShowNum = tableButtonsComputed.value.length - screenShowBtnsNumComputed.value;
-  return needShowNum;
-});
-// 当前屏幕排除【更多、全屏】可以显示的按钮数
-const screenShowBtnsNumComputed = computed(() => {
-  const inFullscreen = props.tableButtons.filter((item) => {
-    return typeof item === 'string' && item === 'inFullscreen';
-  });
-  // 当前屏幕排除【更多、全屏】可以显示的按钮数 = 当前屏幕按钮最大显示数 - 更多按钮本身（该按钮出现时需要占一个位置） - 全屏按钮（如果配置了该按钮，该按钮任何场屏幕下都显示）
-  const showNum = screenShowBtnsMaxNumberComputed.value - (showMoreBtnComputed.value ? 1 : 0) - (inFullscreen.length > 0 ? 1 : 0);
-  return showNum;
-});
-const screenShowSeparatorComputed = computed(() => {
-  // 获取按钮数组中下标0至当前屏幕排除【更多、全屏】可以显示的按钮数的数据，若其中有分隔符，长度+1
-  const separator = props.tableButtons.filter((item, index) => {
-    return typeof item === 'string' && item === 'separator' && index <= screenShowBtnsNumComputed.value;
-  });
-  return separator.length;
-});
-// 当前屏幕按钮最大显示数
-const screenShowBtnsMaxNumberComputed = computed(() => {
-  const btnUsedWidth = table.refHeightWidth.middleWidth - table.refHeightWidth.tableTitleWidth;
-  if (btnUsedWidth && btnUsedWidth > 0) {
-    // 一个按钮大概占用100长度，得到最终个数还需 - 2预留点空白。
-    return Math.floor(btnUsedWidth / 100) - 2;
-  } else {
-    return 0;
-  }
-});
-// 当前查询表单应该显示的字段数
-const queryFormColsNumberComputed = computed(() => {
-  if (props.queryFormColsAuto) {
-    return getQueryFormColsNumberByScreen(props.queryFormColsNumber, $q.screen.name) * props.queryFormRowsNumber;
-  } else {
-    return props.queryFormColsNumber * props.queryFormRowsNumber;
-  }
-});
-// 当前查询表单实际显示的字段数量，当点击了更多查询时，全部显示，否则显示应该显示的字段数量
-const queryFormShowFieldNumberComputed = computed(() => {
-  return queryField.showStatus ? 999 : queryFormColsNumberComputed.value;
-});
-
-const tableHeightComputed = computed(() => {
-  // 浏览器可视区域高度
-  const screenHeight = $q.screen.height;
-  // 系统底部高度（一般用来显示XX版权所有那一层）
-  const footerHeight = gc.theme.footer.enable ? gc.theme.footer.height : 0;
-  // 其他高度，边框，用户自定义留白等，默认 4px
-  const otherHeight = props.tableSpaceHeight || 4;
-  const resultHeight =
-    screenHeight -
-    table.refHeightWidth.yLocation -
-    (table.refHeightWidth.topHeight || 0) -
-    (table.refHeightWidth.bottomHeight || 0) -
-    footerHeight -
-    otherHeight;
-  if ((table.rows && table.rows.length > 0) || props.hideBottom) {
-    return {
-      height: props.tableHeight > 0 ? props.tableHeight + 'px' : resultHeight + 'px',
-    };
-  } else {
-    return {
-      height: table.refHeightWidth.middleHeight + 'px',
-    };
-  }
-});
-const noDataBottomHeightComputed = computed(() => {
-  // 浏览器可视区域高度
-  const screenHeight = $q.screen.height;
-  // 系统底部高度（一般用来显示XX版权所有那一层）
-  const footerHeight = gc.theme.footer.enable ? gc.theme.footer.height : 0;
-  // 其他高度，边框，用户自定义留白等，默认 4px
-  const otherHeight = props.tableSpaceHeight || 4;
-  const resultHeight =
-    screenHeight - table.refHeightWidth.yLocation - table.refHeightWidth.topHeight - table.refHeightWidth.middleHeight - footerHeight - otherHeight;
-  if (table.rows && table.rows.length > 0) {
-    return '0px';
-  } else {
-    return table.inFullscreen ? resultHeight + 'px' : props.tableHeight > 0 ? props.tableHeight + 'px' : resultHeight + 'px';
-  }
-});
-
-// 表格进入全屏模式时所在Y轴会变成0，退出时也无法准确获得，最终导致出现滚动条，需要在进入全屏时记录Y轴位置。
-let tableY = 0;
-const tableFullscreenFun = (value) => {
-  table.inFullscreen = !table.inFullscreen;
-  if (value) {
-    tableY = table.refHeightWidth.yLocation;
-  } else {
-    table.refHeightWidth.yLocation = tableY;
-    tableY = 0;
-  }
-};
-
-const rowClick = (evt: any, row: any, index: any) => {
-  if (props.onRowClick) {
-    emit('rowClick', evt, row, index);
-  } else {
-    rowClickFun(row);
-  }
-};
-const rowClickFun = (row: any) => {
-  // 设置单击表格行选中记录
-  if (props.tableSelection && props.tableSelection === 'single') {
-    table.selected = [];
-    table.selected.push(row);
-  } else if (props.tableSelection && props.tableSelection === 'multiple') {
-    table.selected.push(row);
-  }
-};
-const rowDbClick = (evt, row, index) => {
-  if (props.onRowDbClick) {
-    emit('rowDbClick', evt, row, index);
-  } else {
-    onView();
-  }
-};
-const selection = (details) => {
-  if (props.onSelection) {
-    emit('selection', details);
-  }
-};
-const tableSortFun = (dragRowIndex, dropRowIndex) => {
-  if (dragRowIndex !== dropRowIndex) {
-    const dragRow = table.rows[dragRowIndex];
-    const dropRow = table.rows[dropRowIndex];
-    table.rows.splice(dragRowIndex, 1);
-    table.rows.splice(dropRowIndex, 0, dragRow);
-    emit('rowDragDropAfter');
-  }
-};
-
-const onResize = () => {
-  if (tableRef.value) {
-    table.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect().y;
-    table.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
-    table.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
-    table.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
-    table.refHeightWidth.columnHeadHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.clientHeight;
-    // 判断是否有数据，没数据修改 middleHeight
-    if ((table.rows && table.rows.length > 0) || props.hideBottom) {
-      table.refHeightWidth.middleHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-    } else {
-      let scrollHeight = 0;
-      if (table.refHeightWidth.middleScrollWidth - table.refHeightWidth.middleWidth > 0) {
-        scrollHeight = 15;
-      }
-      table.refHeightWidth.middleHeight = table.refHeightWidth.columnHeadHeight + scrollHeight;
-    }
-    table.refHeightWidth.tableTitleWidth = tableRef.value.$el.getElementsByClassName('_table-title')[0]?.clientWidth;
-  }
-};
-
-type CriteriaType = {
-  fieldName: string;
-  operator: OperatorTypeEnum;
-  value: any;
-};
-
-// 构建 criteria 查询
-const buildQueryCriterias = (reqParams) => {
-  const urlSearchParams = new URLSearchParams(reqParams);
-  if (queryFormRef.value) {
-    const queryFormData = queryFormRef.value.getFormDataFun();
-    Object.keys(queryFormData).forEach((item) => {
-      if (!isEmpty(queryFormData[item])) {
-        const criteria = <CriteriaType>{
-          fieldName: item,
-          operator: queryFormFieldsMap.get(item)?.hasOwnProperty.call('queryOperator') ? queryFormFieldsMap.get(item).queryOperator : OperatorTypeEnum.contains,
-          value: queryFormData[item],
-        };
-        urlSearchParams.append('criteria', JSON.stringify(criteria));
-      }
-    });
-  }
-  return urlSearchParams;
-};
-// 构建普通实体查询
-const buildQueryEntity = (reqParams) => {
-  const urlSearchParams = new URLSearchParams(reqParams);
-  if (queryFormRef.value) {
-    const queryFormData = queryFormRef.value.getFormDataFun();
-    Object.keys(queryFormData).forEach((item) => {
-      if (!isEmpty(queryFormData[item])) {
-        urlSearchParams.append(item, queryFormData[item]);
-      }
-    });
-  }
-  return urlSearchParams;
-};
-
-const pageChange = (value) => {
-  table.pagination.page = value;
-  onRequest(table);
-};
-const requestHandle = async (ops) => {
-  const reqParams: any = {};
-  if (props.tablePagination.rowsPerPage) {
-    reqParams.page = ops.pagination.page;
-    reqParams.size = ops.pagination.rowsPerPage;
-  }
-  if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
-    if (ops.pagination.descending) {
-      reqParams.sortBy = props.templateGridId ? ops.pagination.sortBy : '-' + ops.pagination.sortBy;
-      reqParams.descending = ops.pagination.descending;
-    } else {
-      reqParams.sortBy = ops.pagination.sortBy;
-    }
-  }
-
-  if (props.templateGridId) {
-    // 根据表格模板进行数据库表查询
-    reqParams.templateGridId = props.templateGridId;
-    let queryFormDataJson = {};
-    if (queryFormRef.value) {
-      const queryFormData = queryFormRef.value.getFormDataFun();
-      Object.keys(queryFormData).forEach((item) => {
-        if (!isEmpty(queryFormData[item])) {
-          queryFormDataJson[item] = queryFormData[item];
-        }
-      });
-    }
-    emit('requestDataBefore', queryFormDataJson, (handlerRequestParams: URLSearchParams | any) => {
-      queryFormDataJson = handlerRequestParams;
-    });
-    reqParams.params = JSON.stringify(queryFormDataJson);
-    const resp = await axios.post(props.tableDataUrl || Environment.apiContextPath('api/jdbc/list'), reqParams).catch((error) => {
-      table.loading = false;
-    });
-    return resp;
-  } else {
-    // 后台 RestCrudController 查询
-    // TODO 当前后端 criteria 查询尚未开发完成，只能使用普通实体查询，待后续开发完成替换即可。
-    let urlSearchParams = buildQueryCriterias(reqParams);
-    // const urlSearchParams = buildQueryEntity(reqParams);
-    emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
-      urlSearchParams = handlerRequestParams;
-    });
-    const resp = await axios.get(props.tableDataUrl, { params: urlSearchParams }).catch((error) => {
-      console.info('error-------------', error);
-      table.loading = false;
-    });
-    return resp;
-  }
-};
-const onRequest = async (ops: any) => {
-  table.loading = true;
-  const resp: any = await requestHandle(ops);
-  table.loading = false;
-  // const result = platformRequestResultHandle($q, resp.data);
-  if (resp && resp.data) {
-    const responseData = resp.data;
-    if (props.tablePagination.rowsPerPage) {
-      table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
-      table.pagination.rowsPerPage = responseData.size;
-    }
-    table.pagination.rowsNumber = responseData.totalElements;
-    table.pagination.sortBy = ops.pagination.sortBy;
-    table.pagination.descending = ops.pagination.descending;
-    table.rows = responseData.content;
-  }
-  stickyHeaderColumn();
-};
-
-const onAdd = () => {
-  if (dialogRef.value) {
-    dialog.dialogTitle = '新增';
-    dialogRef.value.dialogShow();
-    nextTick(() => {
-      dialogFormRef.value.setFormStatusFun(PageStatusEnum.新增);
-      emit('addDialogOpenAfter');
-    });
-  }
-};
-const onEdit = () => {
-  if (!table.selected || table.selected.length <= 0) {
-    platformNotify($q, '请选择要编辑的数据');
-  } else {
-    if (dialogRef.value && dialogFormRef) {
-      dialogRef.value.dialogShow();
-      dialog.dialogTitle = '编辑';
-      nextTick(() => {
-        dialogFormRef.value.setFormStatusFun(PageStatusEnum.编辑);
-        dialogFormRef.value.setFormDataFun(table.selected[0]);
-        emit('editDialogOpenAfter', table.selected[0]);
-      });
-    }
-  }
-};
-const save = async () => {
-  dialog.dialogButtons[0].loading = true;
-  const formStatus = dialogFormRef.value.getFormStatusFun();
-  const validate = await dialogFormRef.value.formValidateFun();
-  if (validate) {
-    let dialogFormData = dialogFormRef.value.getFormDataFun();
-    if (table.selected && table.selected.length > 0) {
-      dialogFormData[props.tableRowKey] = table.selected[0][props.tableRowKey];
-    }
-    let submitFlag = true;
-    emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => {
-      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-        submitFlag = false;
-      } else {
-        dialogFormData = handlerRequestParams;
-      }
-    });
-    if (submitFlag) {
-      let requestParams = {
-        method: formStatus === PageStatusEnum.新增 ? 'POST' : 'PUT',
-        headers: { 'content-type': 'application/json;charset=utf-8;' },
-        data: props.addFormProps.formDataToJsonStr ? JSON.stringify(dialogFormData) : dialogFormData,
-        url:
-          formStatus === PageStatusEnum.新增
-            ? props.addFormProps.addFormUrl
-              ? props.addFormProps.addFormUrl
-              : props.tableDataUrl
-            : (props.addFormProps.editFormUrl ? props.addFormProps.editFormUrl : props.tableDataUrl) + '/' + table.selected[0][props.tableRowKey],
-      };
-      if (props.templateGridId) {
-        requestParams = {
-          method: 'POST',
-          headers: { 'content-type': 'application/json;charset=utf-8;' },
-          data: dialogFormData,
-          url:
-            formStatus === PageStatusEnum.新增
-              ? (props.addFormProps.addFormUrl ? props.addFormProps.addFormUrl : Environment.apiContextPath('api/jdbc/add')) + '/' + props.templateGridId
-              : (props.addFormProps.editFormUrl ? props.addFormProps.editFormUrl : Environment.apiContextPath('api/jdbc/edit')) +
-                '/' +
-                props.templateGridId +
-                '/' +
-                props.tableRowKey +
-                '/' +
-                table.selected[0][props.tableRowKey],
-        };
-      }
-      dialog.dialogButtons[0].loading = false;
-      axios(requestParams)
-        .then((resp) => {
-          dialog.dialogButtons[0].loading = false;
-          emit('addEditDataSubmitAfter', resp.data);
-          platformNotify($q, '操作成功', PlatformNotifyTypeEnum.成功);
-          dialogRef.value.dialogHide();
-          onRequest({ pagination: table.pagination });
-          table.selected = [];
-        })
-        .catch((error) => {
-          console.info('error====', error);
-          dialog.dialogButtons[0].loading = false;
-          platformNotify($q, '操作失败', PlatformNotifyTypeEnum.错误);
-        });
-    } else {
-      dialog.dialogButtons[0].loading = false;
-    }
-  } else {
-    dialog.dialogButtons[0].loading = false;
-  }
-};
-const onView = () => {
-  if (!table.selected || table.selected.length <= 0) {
-    platformNotify($q, '请选择要查看的数据');
-  } else {
-    if (drawerRef.value) {
-      viewInfo.infoArray = <any>[];
-      for (let item of tableColumnsMap) {
-        if (item[1].format) {
-          viewInfo.infoArray.push({ label: item[1].label, value: item[1].format(table.selected[0][item[0]]) });
-        } else {
-          viewInfo.infoArray.push({ label: item[1].label, value: table.selected[0][item[0]] });
-        }
-      }
-      drawerRef.value.drawerShow();
-    }
-  }
-};
-const onDelete = () => {
-  if (!table.selected || table.selected.length <= 0) {
-    platformNotify($q, '请选择要删除的数据');
-  } else {
-    $q.dialog({
-      title: '询问',
-      message: '您确认要删除所选记录吗？',
-      cancel: true,
-      persistent: true,
-    }).onOk(() => {
-      let requestParams: any = {
-        method: 'DELETE',
-        url: (props.deleteDataUrl ? props.deleteDataUrl : props.tableDataUrl) + '/' + table.selected[0][props.tableRowKey],
-      };
-      if (props.templateGridId) {
-        const data = <any>[];
-        table.selected.forEach((item) => {
-          data.push(item[props.tableRowKey]);
-        });
-        requestParams = {
-          method: 'POST',
-          url:
-            (props.deleteDataUrl ? props.deleteDataUrl : Environment.apiContextPath('api/jdbc/delete')) + '/' + props.templateGridId + '/' + props.tableRowKey,
-          data: data,
-        };
-      }
-      axios(requestParams)
-        .then((resp) => {
-          table.selected = [];
-          platformNotify($q, '操作成功', PlatformNotifyTypeEnum.成功);
-          onRequest({ pagination: table.pagination });
-        })
-        .catch((error) => {
-          console.info('error====', error);
-          platformNotify($q, '操作失败', PlatformNotifyTypeEnum.错误);
-        });
-    });
-  }
-};
-
-const wrapCsvValue = (val, formatFn, row) => {
-  let formatted = formatFn !== void 0 ? formatFn(val, row) : val;
-
-  formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
-
-  formatted = formatted.split('"').join('""');
-  /**
-   * Excel accepts \n and \r in strings, but some other CSV parsers do not
-   * Uncomment the next two lines to escape new lines
-   */
-  // .split('\n').join('\\n')
-  // .split('\r').join('\\r')
-
-  return `"${formatted}"`;
-};
-
-const onExport = () => {
-  const content = [props.tableColumns.map((col) => wrapCsvValue(col.label))]
-    .concat(
-      table.rows.map((row) =>
-        props.tableColumns
-          .map((col) => wrapCsvValue(typeof col.field === 'function' ? col.field(row) : row[col.field === void 0 ? col.name : col.field], col.format, row))
-          .join(','),
-      ),
-    )
-    .join('\r\n');
-
-  const status = exportFile('table-export.csv', content, {
-    encoding: 'utf-8',
-    mimeType: 'text/csv',
-    byteOrderMark: '\uFEFF', // 解决乱码问题
-  });
-
-  if (status !== true) {
-    platformNotify($q, '导出失败', PlatformNotifyTypeEnum.错误);
-  }
-};
-
-const onSubmit = () => {
-  onRequest({
-    pagination: table.pagination,
-  });
-};
-const onReset = () => {
-  queryFormRef.value.resetFormDataFun();
-};
-
-const btnMoreClick = () => {
-  queryField.showStatus = !queryField.showStatus;
-};
-
-// 替换全部行
-const replaceRowsFun = (rows: any) => {
-  table.rows = rows;
-};
-// 替换单行数据
-const replaceRowFun = (row) => {
-  for (let i = 0; i < table.rows.length; i++) {
-    if (row[props.tableRowKey] === table.rows[i][props.tableRowKey]) {
-      table.rows[i] = { ...table.rows[i], ...row };
-      break;
-    }
-  }
-};
-// 删除选中数据
-const deleteRowsFun = (rows) => {
-  rows.forEach((item) => {
-    table.rows.splice(
-      table.rows.findIndex((v) => {
-        return v[props.tableRowKey] === item[props.tableRowKey];
-      }),
-      1,
-    );
-  });
-  table.selected.splice(0, table.selected.length);
-};
-// 新增一行数据
-const addRowFun = (row, index) => {
-  if (!index || index >= table.rows.length) {
-    table.rows.push(row);
-  } else {
-    table.rows.splice(index, 0, row);
-  }
-};
-
-const getSelectedRows = () => {
-  return table.selected;
-};
-
-const getQueryFormRefFun = () => {
-  return queryFormRef;
-};
-const getAddEditFormRefFun = () => {
-  return dialogFormRef;
-};
-
-const getRowsFun = () => {
-  return toRaw(table.rows);
-};
-
-const refreshTable = () => {
-  onRequest({
-    pagination: table.pagination,
-  });
-};
-
-const stickyHeaderColumn = () => {
-  setTimeout(() => {
-    // 延迟处理锁定列及表格宽高的获取
-    if (tableRef.value) {
-      table.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect()?.y;
-      table.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
-      table.refHeightWidth.bottomHeight = tableRef.value.$el.getElementsByClassName('q-table__bottom')[0]?.clientHeight;
-      table.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
-      table.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
-      table.refHeightWidth.columnHeadHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.clientHeight;
-      table.refHeightWidth.tableTitleWidth = tableRef.value.$el.getElementsByClassName('_table-title')[0]?.clientWidth;
-      // 判断是否有数据，没数据修改 middleHeight
-      if ((table.rows && table.rows.length > 0) || props.hideBottom) {
-        table.refHeightWidth.middleHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-      } else {
-        let scrollHeight = 0;
-        if (table.refHeightWidth.middleScrollWidth - table.refHeightWidth.middleWidth > 0) {
-          scrollHeight = 15;
-        }
-        table.refHeightWidth.middleHeight = table.refHeightWidth.columnHeadHeight + scrollHeight;
-      }
-
-      const tableDom = tableRef.value.$el.getElementsByTagName('table')[0];
-      if (props.tableLeftColumnStickyNumber > 0) {
-        if (columnTitleState.columnTitleRowNum > 1) {
-          const theadDom = tableDom.getElementsByTagName('thead')[0];
-          const theadTrDom = theadDom.getElementsByTagName('tr');
-          tableDom.style.setProperty('--columnWidth' + '-' + 0 + '-' + 0, 0 + 'px');
-          for (let i = 0; i < theadDom.getElementsByTagName('tr').length; i++) {
-            const theadThDom = theadTrDom[i].getElementsByTagName('th');
-            for (let k = 0; k < theadThDom.length; k++) {
-              tableDom.style.setProperty('--columnWidth' + '-' + (i + 1) + '-' + (k + 1), theadThDom[k].offsetWidth + 'px');
-            }
-          }
-        }
-
-        let column1Width = tableDom.getElementsByTagName('td')[0]?.offsetWidth;
-        let column2Width = tableDom.getElementsByTagName('td')[1]?.offsetWidth;
-        let column3Width = tableDom.getElementsByTagName('td')[2]?.offsetWidth;
-        let column4Width = tableDom.getElementsByTagName('td')[3]?.offsetWidth;
-        let column5Width = tableDom.getElementsByTagName('td')[4]?.offsetWidth;
-        let column6Width = tableDom.getElementsByTagName('td')[5]?.offsetWidth;
-        let column7Width = tableDom.getElementsByTagName('td')[6]?.offsetWidth;
-        let column8Width = tableDom.getElementsByTagName('td')[7]?.offsetWidth;
-        let column9Width = tableDom.getElementsByTagName('td')[8]?.offsetWidth;
-
-        tableDom.style.setProperty('--column1Width', column1Width + 'px');
-        tableDom.style.setProperty('--column2Width', column1Width + column2Width + 'px');
-        tableDom.style.setProperty('--column3Width', column1Width + column2Width + column3Width + 'px');
-        tableDom.style.setProperty('--column4Width', column1Width + column2Width + column3Width + column4Width + 'px');
-        tableDom.style.setProperty('--column5Width', column1Width + column2Width + column3Width + column4Width + column5Width + 'px');
-        tableDom.style.setProperty('--column6Width', column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + 'px');
-        tableDom.style.setProperty(
-          '--column7Width',
-          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + 'px',
-        );
-        tableDom.style.setProperty(
-          '--column8Width',
-          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + 'px',
-        );
-        tableDom.style.setProperty(
-          '--column9Width',
-          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + column9Width + 'px',
-        );
-      }
-      const titleTotalHeight = tableDom.getElementsByTagName('thead')[0].offsetHeight;
-      const titleRowHeight = titleTotalHeight / columnTitleState.columnTitleRowNum;
-      if (columnTitleState.columnTitleRowNum > 1) {
-        const row1Height = titleRowHeight * 1;
-        const row2Height = titleRowHeight * 2;
-        const row3Height = titleRowHeight * 3;
-        const row4Height = titleRowHeight * 4;
-        const row5Height = titleRowHeight * 5;
-        const row6Height = titleRowHeight * 6;
-        const row7Height = titleRowHeight * 7;
-        const row8Height = titleRowHeight * 8;
-        const row9Height = titleRowHeight * 9;
-        tableDom.style.setProperty('--row1Height', row1Height + 'px');
-        tableDom.style.setProperty('--row2Height', row2Height + 'px');
-        tableDom.style.setProperty('--row3Height', row3Height + 'px');
-        tableDom.style.setProperty('--row4Height', row4Height + 'px');
-        tableDom.style.setProperty('--row5Height', row5Height + 'px');
-        tableDom.style.setProperty('--row6Height', row6Height + 'px');
-        tableDom.style.setProperty('--row7Height', row7Height + 'px');
-        tableDom.style.setProperty('--row8Height', row8Height + 'px');
-        tableDom.style.setProperty('--row9Height', row9Height + 'px');
-      }
-    }
-  }, 500);
-
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', tableHeadBgColor);
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', stickyBgColor);
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', tableBorderColor);
-  if (props.tableColumnTitleDense) {
-    tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', '28px');
-  } else {
-    tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', '48px');
-  }
-};
-
-const excludeColumnNum = computed(() => {
-  let num = 0;
-  if (props.tableSelection !== 'none') {
-    num += 1;
-  }
-  if (props.tableShowSortNo) {
-    num += 1;
-  }
-  return num;
-});
-
-// 获取多行的列标题下标
-const getMoreRowColumnTitleIndex = (name: any) => {
-  let trIndex = -1;
-  let tdIndex = -1;
-  for (let tr = 0; tr < columnTitleState.columnTitleArr.length; tr++) {
-    const tdArr = columnTitleState.columnTitleArr[tr];
-    let flag = false;
-    for (let td = 0; td < tdArr.length; td++) {
-      if (name === tdArr[td].name) {
-        trIndex = tr + 1;
-        tdIndex = td + 1;
-        flag = true;
-        break;
-      }
-    }
-    if (flag) {
-      break;
-    }
-  }
-  return { trIndex: trIndex, tdIndex: tdIndex };
-};
-
-const handlerStickyChildrenColumn = (item, columns) => {
-  columns.push(item);
-  if (item.childrenColumns && item.childrenColumns.length > 0) {
-    item.childrenColumns.forEach((children) => {
-      handlerStickyChildrenColumn(children, columns);
-    });
-  }
-};
-const getStickyColumn = () => {
-  const columns = props.tableColumns.filter((item, index) => {
-    return index < props.tableLeftColumnStickyNumber;
-  });
-  const arr = [];
-  columns.forEach((item) => {
-    handlerStickyChildrenColumn(item, arr);
-  });
-  return arr;
-};
-const stickyColumnArr = getStickyColumn();
-
-const moreColumnTitleTableSelectionStyle = computed(() => {
-  if (props.tableSelection !== 'none' && props.tableLeftColumnStickyNumber > 0) {
-    return 'border-right-width: 1px;z-index: 3;position: sticky;left: 0px;';
-  }
-  return '';
-});
-const moreColumnTitleTableSortNoStyle = computed(() => {
-  if (props.tableShowSortNo && props.tableLeftColumnStickyNumber > 0) {
-    return 'border-right-width: 1px;z-index: 3;position: sticky;left: var(--columnWidth-1-1);';
-  }
-  return '';
-});
-const thStyleHandler = (c: any, scope: any) => {
-  let style = '';
-  if (!isEmpty(c.style)) {
-    if (c.style.substr(-1) !== ';') {
-      style = c.style + ';';
-    }
-    style = c.style;
-  }
-  if (
-    props.tableLeftColumnStickyNumber > 0 &&
-    stickyColumnArr.findIndex((item: any) => {
-      return item.name === c.name;
-    }) > -1
-  ) {
-    const stickyThArr = <any>[];
-    const trtdIndex = getMoreRowColumnTitleIndex(c.name);
-    if (c.parents && c.parents.length > 0) {
-      // 存在父级节点，得到父级节点的列下标
-      // 找到parent相同且tdIndex小于其的一共多少列
-      for (let tr = 0; tr < trtdIndex.trIndex; tr++) {
-        const tdArr = columnTitleState.columnTitleArr[tr];
-        for (let td = 0; td < trtdIndex.tdIndex - 1; td++) {
-          if (tdArr[td].parents && tdArr[td].parents.length > 0) {
-            const result =
-              tdArr[td].parents.length === c.parents.length &&
-              tdArr[td].parents.every((a) => c.parents.some((b) => a === b)) &&
-              c.parents.every((_b) => tdArr[td].parents.some((_a) => _a === _b));
-            if (result) {
-              if (tr === 0) {
-                stickyThArr.push({ trIndex: tr + 1, tdIndex: td + excludeColumnNum.value + 1 });
-              } else {
-                stickyThArr.push({ trIndex: tr + 1, tdIndex: td + 1 });
-              }
-            }
-          }
-        }
-      }
-      c.parents.forEach((parent) => {
-        const parentTrtdIndex = getMoreRowColumnTitleIndex(parent);
-        if (moreColumnTitleMap.get(parent)!.parents && moreColumnTitleMap.get(parent)!.parents.length > 0) {
-          const tdArr = columnTitleState.columnTitleArr[parentTrtdIndex.trIndex - 1];
-          for (let td = 0; td < parentTrtdIndex.tdIndex - 1; td++) {
-            const result =
-              tdArr[td].parents.length === moreColumnTitleMap.get(parent)!.parents.length &&
-              tdArr[td].parents.every((a) => moreColumnTitleMap.get(parent)!.parents.some((b) => a === b)) &&
-              moreColumnTitleMap.get(parent)!.parents.every((_b) => tdArr[td].parents.some((_a) => _a === _b));
-            if (result) {
-              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + 1 });
-            }
-          }
-        } else {
-          const tdArr = columnTitleState.columnTitleArr[parentTrtdIndex.trIndex - 1];
-          for (let td = 0; td < parentTrtdIndex.tdIndex - 1; td++) {
-            if (
-              tdArr[td].parents &&
-              tdArr[td].parents.length > 0 &&
-              tdArr[td].parents.findIndex((item) => {
-                return item === parent;
-              }) > -1
-            ) {
-              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + excludeColumnNum.value + 1 });
-            } else {
-              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + excludeColumnNum.value + 1 });
-            }
-          }
-        }
-      });
-      if (trtdIndex.tdIndex === 1 && stickyThArr.length === 0) {
-        stickyThArr.push({ trIndex: 0, tdIndex: 0 });
-      }
-    } else {
-      if (trtdIndex.tdIndex === 1) {
-        if (excludeColumnNum.value === 2) {
-          return (style += 'border-right-width: 1px;z-index: 3;position: sticky;left: calc(var(--columnWidth-1-1) + var(--columnWidth-1-2));');
-        } else if (excludeColumnNum.value === 1) {
-          return (style += 'border-right-width: 1px;z-index: 3;position: sticky;left: var(--columnWidth-1-1);');
-        } else {
-          return (style += 'border-right-width: 1px;z-index: 3;position: sticky;left: 0px;');
-        }
-      } else {
-        for (let i = 1; i < trtdIndex.tdIndex; i++) {
-          stickyThArr.push({ trIndex: 1, tdIndex: i + excludeColumnNum.value });
-        }
-      }
-    }
-    if (excludeColumnNum.value === 2) {
-      stickyThArr.push({ trIndex: 1, tdIndex: 1 });
-      stickyThArr.push({ trIndex: 1, tdIndex: 2 });
-    } else if (excludeColumnNum.value === 1) {
-      stickyThArr.push({ trIndex: 1, tdIndex: 1 });
-    }
-    if (stickyThArr && stickyThArr.length > 0) {
-      let left = '';
-      stickyThArr.forEach((item) => {
-        left += '+ var(--columnWidth-' + item.trIndex + '-' + item.tdIndex + ') ';
-      });
-      if (left) {
-        style += 'border-right-width: 1px;z-index: 3;position: sticky;left: calc(' + left.substring(1) + ')' + ';';
-      }
-    }
-  }
-  return style;
-};
-
-const tableTitleClassComputed = computed(() => {
-  const classArr = <string[]>['sticky-header-column-table'];
-  if (props.tableLeftColumnStickyNumber && props.tableLeftColumnStickyNumber > 0) {
-    if (columnTitleState.columnTitleRowNum > 1) {
-      // 存在多行列头
-      const stickyColumn = props.tableColumns.filter((item, index) => {
-        return index < props.tableLeftColumnStickyNumber;
-      });
-      let tdNum = excludeColumnNum.value;
-      stickyColumn.forEach((item: any, index: number) => {
-        tdNum += moreColumnTitleMap.get(item.name)!.colspan;
-      });
-      // 处理表格数据列锁定
-      if (tdNum > 0) {
-        for (let n = 1; n <= tdNum; n++) {
-          classArr.push('sticky-header-column-table-td-' + n);
-        }
-      }
-    } else {
-      // 不存在多行列头
-      if (excludeColumnNum.value === 2) {
-        classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
-        classArr.push('sticky-header-column-table-tr-1' + '-' + 2);
-        classArr.push('sticky-header-column-table-td-' + 1);
-        classArr.push('sticky-header-column-table-td-' + 2);
-      } else if (excludeColumnNum.value === 1) {
-        classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
-        classArr.push('sticky-header-column-table-td-' + 1);
-      }
-      for (let i = 1; i <= props.tableLeftColumnStickyNumber; i++) {
-        classArr.push('sticky-header-column-table-tr-1' + '-' + (i + excludeColumnNum.value));
-        classArr.push('sticky-header-column-table-td-' + (i + excludeColumnNum.value));
-      }
-    }
-  }
-  return classArr;
-});
-
-// 拖拽开始
-let dragRowIndex;
-const onDragStart = (e, scope) => {
-  dragRowIndex = scope.rowIndex;
-  e.dataTransfer.dropEffect = 'move';
-};
-const addDragTopStyle = (e) => {
-  e.target.parentNode.style.borderTopWidth = '2px';
-  e.target.parentNode.style.borderTopStyle = 'dashed';
-  e.target.parentNode.style.borderTopColor = 'orange';
-};
-const removeDragTopStyle = (e) => {
-  e.target.parentNode.style.borderTopWidth = '';
-  e.target.parentNode.style.borderTopStyle = '';
-  e.target.parentNode.style.borderTopColor = '';
-};
-const addDragBottomStyle = (e) => {
-  e.target.parentNode.style.borderBottomWidth = '2px';
-  e.target.parentNode.style.borderBottomStyle = 'dashed';
-  e.target.parentNode.style.borderBottomColor = 'orange';
-};
-const removeDragBottomStyle = (e) => {
-  e.target.parentNode.style.borderBottomWidth = '';
-  e.target.parentNode.style.borderBottomStyle = '';
-  e.target.parentNode.style.borderBottomColor = '';
-};
-// 拖拽至可放置区域触发
-const onDragEnter = (e, scope) => {
-  if (dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
-    // 最后一行
-    addDragBottomStyle(e);
-  } else if (dragRowIndex !== scope.rowIndex) {
-    addDragTopStyle(e);
-  }
-};
-// 拖拽至不可放置区域触发
-const onDragLeave = (e) => {
-  removeDragTopStyle(e);
-  removeDragBottomStyle(e);
-};
-// 拖拽过程触发
-const onDragOver = (e, scope) => {
-  if (e.offsetY >= 24 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
-    removeDragTopStyle(e);
-    addDragBottomStyle(e);
-  } else if (e.offsetY < 24 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
-    removeDragBottomStyle(e);
-    addDragTopStyle(e);
-  }
-  e.preventDefault();
-};
-// 拖拽放置时触发
-const onDrop = (e, scope) => {
-  e.preventDefault();
-  if (dragRowIndex === scope.rowIndex) {
-    return;
-  }
-  const dragRow = table.rows[dragRowIndex];
-  if (e.offsetY < 24 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
-    table.rows.splice(dragRowIndex, 1);
-    table.rows.splice(scope.rowIndex - 1, 0, dragRow);
-  } else {
-    table.rows.splice(dragRowIndex, 1);
-    table.rows.splice(scope.rowIndex, 0, dragRow);
-  }
-  removeDragTopStyle(e);
-  removeDragBottomStyle(e);
-};
-
-onMounted(() => {
-  if (extractTableColumns && extractTableColumns.length > props.tableColumns.length) {
-    handlerMoreRowColumnTitle();
-  }
-  if (props.tableInitLoadData) {
-    onRequest({
-      pagination: table.pagination,
-    });
-  } else {
-    stickyHeaderColumn();
-  }
-});
-
-defineExpose({
-  onView,
-  onDelete,
-  getSelectedRows,
-  refreshTable,
-  replaceRowsFun,
-  replaceRowFun,
-  rowClickFun,
-  getRowsFun,
-  deleteRowsFun,
-  addRowFun,
-  getQueryFormRefFun,
-  getAddEditFormRefFun,
-});
-</script>
-
-<style scoped lang="css">
-:deep(.q-table) {
-  border-collapse: collapse;
-}
-
-/** 表格最后一行数据底部边框没有，通过强制覆盖组件样式增加底部边框 */
-.q-table--vertical-separator td,
-.q-table--vertical-separator th,
-.q-table--cell-separator td,
-.q-table--cell-separator th {
-  border-bottom-width: 1px !important;
-}
-
-.sticky-header-column-table thead tr {
-  height: var(--tableColumnTitleHeight);
-}
-
-/** 通过插槽设置表格多行列头后会导致部分跨行跨列的单元格没有左边框，给其增加左边框及边框色 */
-.sticky-header-column-table th:first-child {
-  border-left-width: 1px;
-  border-left-style: solid;
-  border-left-color: var(--tableBorderColor);
-}
-
-/** 表格所有th固定、设置默认index、背景设置 */
-.sticky-header-column-table tr th {
-  position: sticky;
-  z-index: 2;
-  background: var(--tableHeadBgColor);
-}
-
-/** 固定表头后，修改top距离，第一行top为0，从第二行开始，每增加一行，top增加相应高度，由于紧凑模式与常规模式列头高度不一致，需要计算得出  */
-.sticky-header-column-table thead tr:first-child th {
-  top: 0;
-}
-.sticky-header-column-table thead tr:nth-child(2) th {
-  top: var(--row1Height);
-}
-.sticky-header-column-table thead tr:nth-child(3) th {
-  top: var(--row2Height);
-}
-.sticky-header-column-table thead tr:nth-child(4) th {
-  top: var(--row3Height);
-}
-.sticky-header-column-table thead tr:nth-child(5) th {
-  top: var(--row4Height);
-}
-.sticky-header-column-table thead tr:nth-child(6) th {
-  top: var(--row5Height);
-}
-.sticky-header-column-table thead tr:nth-child(7) th {
-  top: var(--row6Height);
-}
-.sticky-header-column-table thead tr:nth-child(8) th {
-  top: var(--row7Height);
-}
-.sticky-header-column-table thead tr:nth-child(9) th {
-  top: var(--row8Height);
-}
-.sticky-header-column-table thead tr:nth-child(10) th {
-  top: var(--row9Height);
-}
-
-.sticky-header-column-table-tr-1-1 tr:first-child th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-1-2 tr:first-child th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-1-3 tr:first-child th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-1-4 tr:first-child th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-1-5 tr:first-child th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-1-6 tr:first-child th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-1-7 tr:first-child th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-1-8 tr:first-child th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-1-9 tr:first-child th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-1-10 tr:first-child th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-2-1 tr:nth-child(2) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-2-2 tr:nth-child(2) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-2-3 tr:nth-child(2) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-2-4 tr:nth-child(2) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-2-5 tr:nth-child(2) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-2-6 tr:nth-child(2) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-2-7 tr:nth-child(2) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-2-8 tr:nth-child(2) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-2-9 tr:nth-child(2) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-2-10 tr:nth-child(2) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-3-1 tr:nth-child(3) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-3-2 tr:nth-child(3) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-3-3 tr:nth-child(3) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-3-4 tr:nth-child(3) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-3-5 tr:nth-child(3) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-3-6 tr:nth-child(3) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-3-7 tr:nth-child(3) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-3-8 tr:nth-child(3) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-3-9 tr:nth-child(3) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-3-10 tr:nth-child(3) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-4-1 tr:nth-child(4) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-4-2 tr:nth-child(4) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-4-3 tr:nth-child(4) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-4-4 tr:nth-child(4) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-4-5 tr:nth-child(4) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-4-6 tr:nth-child(4) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-4-7 tr:nth-child(4) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-4-8 tr:nth-child(4) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-4-9 tr:nth-child(4) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-4-10 tr:nth-child(4) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-5-1 tr:nth-child(5) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-5-2 tr:nth-child(5) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-5-3 tr:nth-child(5) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-5-4 tr:nth-child(5) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-5-5 tr:nth-child(5) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-5-6 tr:nth-child(5) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-5-7 tr:nth-child(5) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-5-8 tr:nth-child(5) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-5-9 tr:nth-child(5) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-5-10 tr:nth-child(5) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-6-1 tr:nth-child(6) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-6-2 tr:nth-child(6) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-6-3 tr:nth-child(6) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-6-4 tr:nth-child(6) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-6-5 tr:nth-child(6) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-6-6 tr:nth-child(6) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-6-7 tr:nth-child(6) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-6-8 tr:nth-child(6) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-6-9 tr:nth-child(6) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-6-10 tr:nth-child(6) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-7-1 tr:nth-child(7) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-7-2 tr:nth-child(7) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-7-3 tr:nth-child(7) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-7-4 tr:nth-child(7) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-7-5 tr:nth-child(7) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-7-6 tr:nth-child(7) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-7-7 tr:nth-child(7) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-7-8 tr:nth-child(7) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-7-9 tr:nth-child(7) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-7-10 tr:nth-child(7) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-8-1 tr:nth-child(8) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-8-2 tr:nth-child(8) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-8-3 tr:nth-child(8) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-8-4 tr:nth-child(8) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-8-5 tr:nth-child(8) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-8-6 tr:nth-child(8) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-8-7 tr:nth-child(8) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-8-8 tr:nth-child(8) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-8-9 tr:nth-child(8) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-8-10 tr:nth-child(8) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-9-1 tr:nth-child(9) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-9-2 tr:nth-child(9) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-9-3 tr:nth-child(9) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-9-4 tr:nth-child(9) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-9-5 tr:nth-child(9) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-9-6 tr:nth-child(9) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-9-7 tr:nth-child(9) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-9-8 tr:nth-child(9) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-9-9 tr:nth-child(9) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-9-10 tr:nth-child(9) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-10-1 tr:nth-child(10) th:first-child {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-10-2 tr:nth-child(10) th:nth-child(2) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-10-3 tr:nth-child(10) th:nth-child(3) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-10-4 tr:nth-child(10) th:nth-child(4) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-10-5 tr:nth-child(10) th:nth-child(5) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-10-6 tr:nth-child(10) th:nth-child(6) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-10-7 tr:nth-child(10) th:nth-child(7) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-10-8 tr:nth-child(10) th:nth-child(8) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-10-9 tr:nth-child(10) th:nth-child(9) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-10-10 tr:nth-child(10) th:nth-child(10) {
-  border-right-width: 1px;
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-td-1 td:first-child {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-td-2 td:nth-child(2) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-td-3 td:nth-child(3) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-td-4 td:nth-child(4) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-td-5 td:nth-child(5) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-td-6 td:nth-child(6) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-td-7 td:nth-child(7) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-td-8 td:nth-child(8) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-td-9 td:nth-child(9) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-td-10 td:nth-child(10) {
-  background-color: var(--stickyBgColor);
-  border-right-width: 1px;
-  z-index: 1;
-  position: sticky;
-  left: var(--column9Width);
-}
-</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/PlatformGridTdDrag.vue b/io.sc.platform.core.frontend/src/platform/components/grid/PlatformGridTdDrag.vue
deleted file mode 100644
index 30a64299..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/PlatformGridTdDrag.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div :ref="(node) => drag(drop(node as any))" :class="borderClass">
-    <q-icon v-if="typeof tdValue[0] === 'boolean' && tdValue[0]" :name="PlatformIconEnum.是状态" color="green" size="sm"> </q-icon>
-    <template v-else-if="typeof tdValue[0] === 'boolean' && !tdValue[0]"> </template>
-    <template v-else>
-      {{ tdValue[0] }}
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, unref } from 'vue';
-import { toRefs } from '@vueuse/core';
-import { PlatformIconEnum } from '@/platform/components/utils';
-
-const props = defineProps({
-  tdValue: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  rowIndex: { type: Number, default: 0 },
-});
-const emit = defineEmits(['tableSortFun']);
-
-export interface DropResult {
-  name: string;
-}
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TableAction.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TableAction.vue
deleted file mode 100644
index b97c270f..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TableAction.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <div class="flex flex-nowrap py-2">
-    <div ref="titleContainerRef" class="flex items-end text-subtitle2 text-no-wrap">{{ title }}</div>
-    <q-space />
-    <div ref="actionContainerRef" class="flex flex-nowrap">
-      <!-- baseActions -->
-      <template v-for="(action, index) in baseActions" :key="'baseAction_' + index">
-        <q-separator
-          v-if="action.separator"
-          vertical
-          class="class-action-item"
-          :style="{
-            'margin-left': '5px',
-            'margin-right': '5px',
-          }"
-        />
-        <q-btn
-          v-else
-          v-bind="action"
-          :id="action.name"
-          :disable="action.enableIf ? !action.enableIf() : false"
-          no-wrap
-          class="class-action-item"
-          :style="{
-            'margin-left': '5px',
-            'margin-right': '5px',
-          }"
-          @click="action.click"
-        />
-      </template>
-
-      <!-- moreActions -->
-      <q-btn-dropdown v-if="moreActions && moreActions.length > 0" :label="$t('more')" class="class-action-item" style="margin-left: 5px">
-        <q-list>
-          <template v-for="(action, index) in moreActions" :key="'moreAction_' + index">
-            <q-separator v-if="action.separator" />
-            <q-item v-else v-close-popup clickable @click="action.click">
-              <q-item-section avatar style="min-width: 28px; padding-right: 0px">
-                <q-icon :name="action.icon" size="20px" />
-              </q-item-section>
-              <q-item-section>
-                <q-item-label :v-bind="action">{{ action.label }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-list>
-      </q-btn-dropdown>
-    </div>
-    <q-resize-observer @resize="onResize" />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Tools } from '@/platform/utils';
-
-const props = defineProps({
-  title: { type: String, default: '' },
-  noActionIcon: { type: Boolean, default: false },
-  actions: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-});
-
-const titleContainerRef = ref();
-const actionContainerRef = ref();
-
-const actions = props.actions;
-if (actions && actions.length > 0 && props.noActionIcon) {
-  for (const action of actions) {
-    action.icon = undefined;
-  }
-}
-const baseActions = ref(actions);
-const moreActions = ref([]);
-const isActionWidthInitializedRef = ref(false);
-const moreActionWidth = 100;
-
-const onResize = (size) => {
-  if (Tools.isUndefinedOrNull(titleContainerRef.value) || Tools.isUndefinedOrNull(actionContainerRef.value)) {
-    return;
-  }
-
-  if (!isActionWidthInitializedRef.value) {
-    const nodes = actionContainerRef.value.getElementsByClassName('class-action-item');
-    for (let i = 0; i < actions.length; i++) {
-      actions[i].width = nodes[i].clientWidth + 10;
-    }
-    isActionWidthInitializedRef.value = true;
-  }
-
-  const _baseActions = [];
-  const _moreActions = [];
-  const length = actions.length;
-  let availableWidth = size.width - titleContainerRef.value.clientWidth;
-  let width = 0;
-  let index = 0;
-
-  for (; index < length; index++) {
-    if (width + actions[index].width > availableWidth) {
-      availableWidth -= moreActionWidth;
-      while (width > availableWidth) {
-        index--;
-        width -= actions[index].width;
-        _baseActions.pop();
-      }
-      break;
-    } else {
-      _baseActions.push(actions[index]);
-      width += actions[index].width;
-    }
-  }
-
-  for (; index < length; index++) {
-    _moreActions.push(actions[index]);
-  }
-
-  baseActions.value = _baseActions;
-  moreActions.value = _moreActions;
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TableRow.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TableRow.vue
deleted file mode 100644
index ca612980..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TableRow.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <q-tr>
-    <q-td v-for="(col, index) in cols" :key="col.name" :style="{ 'padding-left': index == 0 ? '2px' : '7px' }">
-      <div class="flex flex-nowrap items-center">
-        <template v-if="index == 0">
-          <!--层级占位符-->
-          <span :style="`width:${27 * props.level}px;`"></span>
-          <!--展开按钮-->
-          <q-btn
-            v-if="data.children && data.children.length > 0"
-            flat
-            size="16px"
-            dense
-            padding="0px 0px"
-            :icon="data.expand ? 'bi-dash' : 'bi-plus'"
-            @click="data.expand = !data.expand"
-          />
-          <!--展开按钮占位符-->
-          <span v-else style="width: 27px"></span>
-          <!--选择框-->
-          <q-checkbox v-model="data.selected" flat size="40px" dense />
-          <!--文件夹图标-->
-          <q-icon v-if="data.children && data.children.length > 0" name="sym_o_folder_open" size="20px" class="px-1"></q-icon>
-          <!--文件图标-->
-          <q-icon v-else name="bi-file-earmark" size="16px" class="px-1"></q-icon>
-        </template>
-        <div v-dompurify-html="col.format ? col.format(data[col.name], data) : col.value"></div>
-      </div>
-    </q-td>
-  </q-tr>
-  <template v-for="child in data.children" :key="child.id">
-    <TableRow v-if="data.expand" :cols="cols" :data="child" :level="props.level + 1"></TableRow>
-  </template>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-  level: { type: Number, default: 0 },
-  cols: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  data: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-const cols = props.cols;
-const data = props.data;
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WListGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WListGrid.vue
deleted file mode 100644
index 2c1113ef..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WListGrid.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<template>
-  <div>
-    <div class="row q-gutter-x-md q-gutter-y-sm">
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense :options="['ksdjlfsd', 'sdkjfklsd']" />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-      <q-input label="loginName" outlined dense />
-    </div>
-    <TableAction title="User List" :no-action-icon="props.noActionIcon" :actions="tableActions"></TableAction>
-
-    <q-table flat bordered separator="cell" :rows="data" :columns="columns" row-key="name">
-      <template #header="headerProps">
-        <q-tr :props="headerProps">
-          <q-th v-for="col in headerProps.cols" :key="col.name" :props="headerProps">
-            {{ col.label }}
-          </q-th>
-        </q-tr>
-      </template>
-
-      <template #body="bodyProps">
-        <TableRow :cols="bodyProps.cols" :data="bodyProps.row"></TableRow>
-      </template>
-    </q-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { axios, Tools, TreeBuilder } from '@/platform';
-import TableAction from './TableAction.vue';
-import TableRow from './TableRow.vue';
-
-const props = defineProps({
-  tree: { type: Boolean, default: false },
-  title: { type: String, default: '' },
-  noActionIcon: { type: Boolean, default: false },
-  targetObjectName: { type: String, default: '' },
-  actions: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  columns: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  autoFetchData: { type: Boolean, default: false },
-  dataUrl: { type: String, default: undefined },
-  fetchDataUrl: { type: String, default: undefined },
-  addDataUrl: { type: String, default: undefined },
-  removeDataUrl: { type: String, default: undefined },
-  updateDataUrl: { type: String, default: undefined },
-});
-
-const { t } = useI18n();
-
-const defaultTableActions = {
-  separator: {
-    separator: true,
-  },
-  query: {
-    name: 'query',
-    label: t('query'),
-    icon: 'bi-search',
-    click: () => {
-      console.log('query');
-    },
-  },
-  refresh: {
-    name: 'refresh',
-    label: t('refresh'),
-    icon: 'bi-arrow-clockwise',
-    click: () => {
-      console.log('refresh');
-    },
-  },
-  add: {
-    name: 'add',
-    label: t('addNew'),
-    icon: 'bi-plus-lg',
-    click: () => {
-      console.log('add');
-    },
-  },
-  clone: {
-    name: 'clone',
-    label: t('clone'),
-    icon: 'content_copy',
-    click: () => {
-      console.log('clone');
-    },
-  },
-  edit: {
-    name: 'edit',
-    label: t('edit'),
-    icon: 'bi-pencil-square',
-    click: () => {
-      console.log('edit');
-    },
-  },
-  remove: {
-    name: 'remove',
-    label: t('delete'),
-    icon: 'bi-x-lg',
-    click: () => {
-      console.log('remove');
-    },
-  },
-  removeAll: {
-    name: 'removeAll',
-    label: t('deleteAll'),
-    click: () => {
-      console.log('removeAll');
-    },
-  },
-  detail: {
-    name: 'detail',
-    label: t('detail'),
-    icon: 'bi-info-circle',
-    click: () => {
-      console.log('detail');
-    },
-  },
-  expandAll: {
-    name: 'expandAll',
-    label: t('expandAll'),
-    icon: 'bi-plus-square',
-    click: () => {
-      console.log('expandAll');
-    },
-  },
-  selectAll: {
-    name: 'selectAll',
-    label: t('selectAll'),
-    icon: 'bi-check-square',
-    click: () => {
-      console.log('selectAll');
-    },
-  },
-  addTop: {
-    name: 'addTop',
-    label: t('addTop', { object: props.targetObjectName }),
-    icon: 'addTop',
-    click: () => {
-      console.log('addTop');
-    },
-  },
-  addChild: {
-    name: 'addChild',
-    label: t('addChild', { object: props.targetObjectName }),
-    icon: 'addChild',
-    click: () => {
-      console.log('addChild');
-    },
-  },
-};
-
-const tableActions = [];
-if (props.actions && props.actions.length > 0) {
-  for (const action of props.actions) {
-    if (Tools.isString(action)) {
-      tableActions.push(defaultTableActions[action]);
-    } else if (Tools.isObject(action)) {
-      tableActions.push(action);
-    }
-  }
-}
-
-const data = ref([]);
-if (props.autoFetchData) {
-  axios.get(props.fetchDataUrl ? props.fetchDataUrl : props.dataUrl).then((response) => {
-    if (props.tree) {
-      data.value = TreeBuilder.build(response.data);
-    }
-  });
-}
-
-const selected = ref([]);
-const val2 = ref(true);
-
-const rows = ref([
-  {
-    name: 'Frozen Yogurt',
-    calories: 159,
-    fat: 6.0,
-    carbs: 24,
-    protein: 4.0,
-    sodium: 87,
-    calcium: '14%',
-    iron: '1%',
-    selected: true,
-    children: [
-      {
-        name: 'Ice cream sandwich3',
-        calories: 237,
-        fat: 9.0,
-        carbs: 37,
-        protein: 4.3,
-        sodium: 129,
-        calcium: '8%',
-        iron: '1%',
-      },
-    ],
-  },
-  {
-    name: 'Ice cream sandwich',
-    calories: 237,
-    fat: 9.0,
-    carbs: 37,
-    protein: 4.3,
-    sodium: 129,
-    calcium: '8%',
-    iron: '1%',
-  },
-  {
-    name: 'Eclair',
-    calories: 262,
-    fat: 16.0,
-    carbs: 23,
-    protein: 6.0,
-    sodium: 337,
-    calcium: '6%',
-    iron: '7%',
-  },
-  {
-    name: 'Cupcake',
-    calories: 305,
-    fat: 3.7,
-    carbs: 67,
-    protein: 4.3,
-    sodium: 413,
-    calcium: '3%',
-    iron: '8%',
-  },
-  {
-    name: 'Gingerbread',
-    calories: 356,
-    fat: 16.0,
-    carbs: 49,
-    protein: 3.9,
-    sodium: 327,
-    calcium: '7%',
-    iron: '16%',
-  },
-  {
-    name: 'Jelly bean',
-    calories: 375,
-    fat: 0.0,
-    carbs: 94,
-    protein: 0.0,
-    sodium: 50,
-    calcium: '0%',
-    iron: '0%',
-  },
-  {
-    name: '<span style="color: red">This should be red.</span>',
-    calories: 392,
-    fat: 0.2,
-    carbs: 98,
-    protein: 0,
-    sodium: 38,
-    calcium: '0%',
-    iron: '2%',
-  },
-  {
-    name: 'Honeycomb',
-    calories: 408,
-    fat: 3.2,
-    carbs: 87,
-    protein: 6.5,
-    sodium: 562,
-    calcium: '0%',
-    iron: '45%',
-  },
-  {
-    name: 'Donut',
-    calories: 452,
-    fat: 25.0,
-    carbs: 51,
-    protein: 4.9,
-    sodium: 326,
-    calcium: '2%',
-    iron: '22%',
-  },
-  {
-    name: 'KitKat',
-    calories: 518,
-    fat: 26.0,
-    carbs: 65,
-    protein: 7,
-    sodium: 54,
-    calcium: '12%',
-    iron: '6%',
-  },
-]);
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/index.ts b/io.sc.platform.core.frontend/src/platform/components/index.ts
index dc7918e1..9ffd34dd 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -10,11 +10,8 @@ import WCodemirror from './widget/codemirror/WCodemirror.vue';
 import WTreeGrid from './tree/WTreeGrid.vue';
 
 import WDialog from './dialog/WDialog.vue';
-import PlatformDialog from './dialog/PlatformDialog.vue';
-import PlatformDrawer from './drawer/PlatformDrawer.vue';
 import WDrawer from './drawer/WDrawer.vue';
 
-import PlatformForm from './form/PlatformForm.vue';
 import WForm from './form/WForm.vue';
 import WText from './form/elements/WText.vue';
 import WNumber from './form/elements/WNumber.vue';
@@ -27,10 +24,7 @@ import WPassword from './form/elements/WPassword.vue';
 
 import WInfoPanel from './panel/WInfoPanel.vue';
 
-import PlatformGrid from './grid/PlatformGrid.vue';
 import WGrid from './grid/WGrid.vue';
-import PlatformGridTdDrag from './grid/PlatformGridTdDrag.vue';
-
 import WToolbar from './toolbar/WToolbar.vue';
 
 export default {
@@ -47,9 +41,7 @@ export default {
     app.component('WTreeGrid', WTreeGrid);
 
     app.component('WDialog', WDialog);
-    app.component('PlatformDialog', PlatformDialog);
     app.component('WDrawer', WDrawer);
-    app.component('PlatformDrawer', PlatformDrawer);
     app.component('WForm', WForm);
     app.component('WText', WText);
     app.component('WNumber', WNumber);
@@ -61,11 +53,7 @@ export default {
 
     app.component('WInfoPanel', WInfoPanel);
 
-    app.component('PlatformForm', PlatformForm);
-    app.component('PlatformGrid', PlatformGrid);
     app.component('WGrid', WGrid);
-    app.component('PlatformGridTdDrag', PlatformGridTdDrag);
-
     app.component('WToolbar', WToolbar);
   },
 };
@@ -81,10 +69,7 @@ export {
   WSelect,
   WTreeGrid,
   WDialog,
-  PlatformDialog,
-  PlatformDrawer,
   WDrawer,
-  PlatformForm,
   WForm,
   WText,
   WNumber,
@@ -93,9 +78,7 @@ export {
   WCheckbox,
   WTextBtn,
   WPassword,
-  PlatformGrid,
   WGrid,
-  PlatformGridTdDrag,
   WToolbar,
 };
 
diff --git a/io.sc.platform.core.frontend/src/platform/index.ts b/io.sc.platform.core.frontend/src/platform/index.ts
index 8d0287ed..6ce9fa61 100644
--- a/io.sc.platform.core.frontend/src/platform/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/index.ts
@@ -92,27 +92,12 @@ export { JavascriptLoader } from './utils';
 export { QuasarTools } from './utils';
 export { Tools } from './utils';
 export { TreeBuilder } from './utils';
+export { VueTools } from './utils';
 
 /**
  * 导出 UI 组件
  */
-export {
-  WPlatformPage,
-  WIconEmpty,
-  WHScreenDiv,
-  WColorInput,
-  WColorInputPalette,
-  WPosition,
-  WCodemirror,
-  WSelect,
-  // WListGrid,
-  WTreeGrid,
-  PlatformDialog,
-  PlatformDrawer,
-  PlatformForm,
-  PlatformGrid,
-  PlatformGridTdDrag,
-} from './components';
+export { WPlatformPage, WIconEmpty, WHScreenDiv, WColorInput, WColorInputPalette, WPosition, WCodemirror, WSelect, WGrid, WTreeGrid } from './components';
 
 export { PlatformIconEnum } from './components';
 export { PageStatusEnum } from './components';
diff --git a/io.sc.platform.core.frontend/src/platform/layout/sub-layout/Topper.vue b/io.sc.platform.core.frontend/src/platform/layout/sub-layout/Topper.vue
index cf47e4db..aa0fb897 100644
--- a/io.sc.platform.core.frontend/src/platform/layout/sub-layout/Topper.vue
+++ b/io.sc.platform.core.frontend/src/platform/layout/sub-layout/Topper.vue
@@ -128,6 +128,11 @@
             </q-item-section>
           </q-item>
           <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section>
+              <q-item-label><q-icon name="verified_user" left size="20px"></q-icon>{{ t('changePassword') }}</q-item-label>
+            </q-item-section>
+          </q-item>
           <q-item v-close-popup clickable>
             <q-item-section>
               <q-item-label><q-icon name="group" left size="20px"></q-icon>{{ t('changeRole') }}</q-item-label>
diff --git a/io.sc.platform.core.frontend/src/platform/utils/VueTools.ts b/io.sc.platform.core.frontend/src/platform/utils/VueTools.ts
new file mode 100644
index 00000000..52005c05
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/utils/VueTools.ts
@@ -0,0 +1,20 @@
+import { Tools } from '.';
+
+class VueTools {
+  /**
+   * 将 vue 组件导出的方法和属性直接挂接到 vue 组件的实例上, 便于使用
+   * @param instance vue 组件实例对象
+   */
+  public static expose2Instance(instance: any): void {
+    const exposeds = instance.exposed || {};
+    for (const exposed in exposeds) {
+      if (Tools.isUndefinedOrNull(instance[exposed])) {
+        instance[exposed] = exposeds[exposed];
+      } else {
+        console.warn(exposed + ' already exists in component insatance!');
+      }
+    }
+  }
+}
+
+export { VueTools };
diff --git a/io.sc.platform.core.frontend/src/views/Select.vue b/io.sc.platform.core.frontend/src/views/Select.vue
index 146e45e6..69fb1bba 100644
--- a/io.sc.platform.core.frontend/src/views/Select.vue
+++ b/io.sc.platform.core.frontend/src/views/Select.vue
@@ -4,13 +4,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { BackendTools } from '@/platform';
+import { EnumTools } from '@/platform';
+import { QBtn } from 'quasar';
 
 const { t } = useI18n();
-const model = ref('value-2');
+const model = ref('value');
 const options = ref();
 
-BackendTools.enmus('io.sc.platform.flowable.enums.ProcessStatus', t).then((data) => {
+EnumTools.fetch('io.sc.platform.flowable.enums.ProcessStatus', t).then((data) => {
   console.log(data.map);
   options.value = data.map;
 });
diff --git a/io.sc.platform.core.frontend/src/views/likm/Grid.vue b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
index d17d5e80..0fa7b083 100644
--- a/io.sc.platform.core.frontend/src/views/likm/Grid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <component :is="aaa"></component>
     <w-grid
       :title="testGrid.title"
       draggable
@@ -19,7 +20,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted, nextTick, h } from 'vue';
+import { QBtn } from 'quasar';
 import { axios, Environment } from '@/platform';
 import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
 import { IconEnum } from '@/platform/enums';
@@ -101,7 +103,14 @@ const testGrid = {
       label: '用户信息',
       childrenColumns: [
         { name: 'loginName', label: '登录名', align: 'right' },
-        { name: 'userName', label: '用户名' },
+        {
+          name: 'userName',
+          label: '用户名',
+          format: () => {
+            const a = h(QBtn, { label: 'ok' }, 'OK');
+            console.log(a);
+          },
+        },
       ],
     },
     {
diff --git a/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue b/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
index d6079daa..578ed353 100644
--- a/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
@@ -10,7 +10,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import TableRow from '@/platform/components/grid/TableRow.vue';
 
 const columns = [
   {
diff --git a/io.sc.platform.core.frontend/template-project/.eslintrc.cjs b/io.sc.platform.core.frontend/template-project/.eslintrc.cjs
index 0974c576..3e35007c 100644
--- a/io.sc.platform.core.frontend/template-project/.eslintrc.cjs
+++ b/io.sc.platform.core.frontend/template-project/.eslintrc.cjs
@@ -7,11 +7,6 @@ module.exports = {
         "vue/setup-compiler-macros": true,
     },
 
-    parserOptions:{
-        ecmaVersion: 2022,
-        sourceType:"module",
-    },
-
     extends:[
       "eslint:recommended",
       "plugin:vue/vue3-recommended",
@@ -24,6 +19,9 @@ module.exports = {
       ecmaVersion: 2022,
       parser: "@typescript-eslint/parser",
       sourceType: "module",
+      ecmaFeatures: {
+        jsx : false
+      }
     },
 
     rules:{
diff --git a/io.sc.platform.core.frontend/template-project/babel.config.cjs b/io.sc.platform.core.frontend/template-project/babel.config.cjs
index 26c581b4..0ff56db5 100644
--- a/io.sc.platform.core.frontend/template-project/babel.config.cjs
+++ b/io.sc.platform.core.frontend/template-project/babel.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread",
+    "@vue/babel-plugin-jsx",
   ]
 }
diff --git a/io.sc.platform.core.frontend/template-project/package.json b/io.sc.platform.core.frontend/template-project/package.json
index e80effff..4cc91b3d 100644
--- a/io.sc.platform.core.frontend/template-project/package.json
+++ b/io.sc.platform.core.frontend/template-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.56",
+  "version": "8.1.60",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "private": false,
   "keywords": [],
@@ -36,6 +36,7 @@
     "@typescript-eslint/eslint-plugin": "6.17.0",
     "@typescript-eslint/parser": "6.17.0",
     "@vue/compiler-sfc": "3.4.3",
+    "@vue/babel-plugin-jsx": "1.1.5",
     "@webpack-cli/serve": "2.0.5",
     "autoprefixer": "10.4.16",
     "babel-loader": "9.1.3",
@@ -91,7 +92,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.56",
+    "platform-core": "8.1.60",
     "quasar": "2.14.2",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
diff --git a/io.sc.platform.core.frontend/template-project/src/views/Select.vue b/io.sc.platform.core.frontend/template-project/src/views/Select.vue
index a37b4e60..6c791fa5 100644
--- a/io.sc.platform.core.frontend/template-project/src/views/Select.vue
+++ b/io.sc.platform.core.frontend/template-project/src/views/Select.vue
@@ -4,13 +4,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { BackendTools } from 'platform-core';
+import { EnumTools } from 'platform-core';
+import { QBtn } from 'quasar';
 
 const { t } = useI18n();
-const model = ref('value-2');
+const model = ref('value');
 const options = ref();
 
-BackendTools.enmus('io.sc.platform.flowable.enums.ProcessStatus', t).then((data) => {
+EnumTools.fetch('io.sc.platform.flowable.enums.ProcessStatus', t).then((data) => {
   console.log(data.map);
   options.value = data.map;
 });
diff --git a/io.sc.platform.core.frontend/template-project/tsconfig.json b/io.sc.platform.core.frontend/template-project/tsconfig.json
index 99341915..c23c83d1 100644
--- a/io.sc.platform.core.frontend/template-project/tsconfig.json
+++ b/io.sc.platform.core.frontend/template-project/tsconfig.json
@@ -5,6 +5,7 @@
     "module": "node16",
     "strict": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "noEmit": true,
     "allowImportingTsExtensions": true,
     "noImplicitAny": false,
diff --git a/io.sc.platform.core.frontend/tsconfig.json b/io.sc.platform.core.frontend/tsconfig.json
index cfcc9bc6..ba796da5 100644
--- a/io.sc.platform.core.frontend/tsconfig.json
+++ b/io.sc.platform.core.frontend/tsconfig.json
@@ -12,6 +12,7 @@
     "module": "node16",                                     /* Specify what module code is generated. */
     "strict": true,                                         /* Enable all strict type-checking options. */
     "jsx": "preserve",                                      /* Specify what JSX code is generated. */
+    "jsxImportSource": "vue",
     "noEmit":true,                                          /* Disable emitting files from a compilation. */
     "allowImportingTsExtensions":true,                      /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
     "noImplicitAny": false,                                 /* Enable error reporting for expressions and declarations with an implied 'any' type. */
diff --git a/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words.properties b/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words.properties
index 6ab524df..c28b0a39 100644
--- a/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words.properties
+++ b/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words.properties
@@ -10,6 +10,7 @@ bottom-right=Bottom Right
 bottom=Bottom
 cancel=Cancel
 center=Center
+changePassword=Change Password
 changeRole=Change Role
 className=Class
 clone=Clone
@@ -18,6 +19,8 @@ code=Code
 confirm=Confirm
 confirmPassword=Confirm Password
 content=Content
+corporation=Corporation
+corporationCode=Corporation Code
 createDate=Create Date
 creator=Creator
 dataComeFrom=Data Come From
@@ -26,6 +29,7 @@ delete=Delete
 deleteAll=Delete All
 description=Description
 detail=Detail
+disable=Disable
 displayValue=Display Value
 download=Download
 edit=Edit
@@ -82,6 +86,7 @@ newValue=New Value
 next=Next
 nextPage=Next Page
 no=No
+normal=Normal
 oldValue=Old Value
 order=Order
 org=Org
diff --git a/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_tw_CN.properties b/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_tw_CN.properties
index 98b9d023..8e7092af 100644
--- a/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_tw_CN.properties
+++ b/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_tw_CN.properties
@@ -10,6 +10,7 @@ bottom-right=\u53F3\u4E0B
 bottom=\u4E0B\u908A
 cancel=\u53D6\u6D88
 center=\u4E2D\u5FC3
+changePassword=\u4FEE\u6539\u767B\u9304\u5BC6\u78BC
 changeRole=\u5207\u63DB\u89D2\u8272
 className=\u985E\u540D
 clone=\u8907\u88FD
@@ -18,6 +19,8 @@ code=\u4EE3\u78BC
 confirm=\u78BA\u5B9A
 confirmPassword=\u78BA\u8A8D\u5BC6\u78BC
 content=\u5167\u5BB9
+corporation=\u6CD5\u4EBA
+corporationCode=\u6CD5\u4EBA\u4EE3\u78BC
 createDate=\u5275\u5EFA\u65E5\u671F
 creator=\u5275\u5EFA\u4EBA
 dataComeFrom=\u6578\u64DA\u4F86\u6E90
@@ -26,6 +29,7 @@ delete=\u522A\u9664
 deleteAll=\u522A\u9664\u5168\u90E8
 description=\u63CF\u8FF0
 detail=\u8A73\u60C5
+disable=\u7981\u7528
 displayValue=\u986F\u793A\u503C
 download=\u4E0B\u8F09
 edit=\u7DE8\u8F2F
@@ -82,6 +86,7 @@ newValue=\u65B0\u503C
 next=\u4E0B\u4E00
 nextPage=\u4E0B\u4E00\u9801
 no=\u5426
+normal=\u6B63\u5E38
 oldValue=\u539F\u503C
 order=\u9806\u5E8F
 org=\u6A5F\u69CB
diff --git a/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_zh_CN.properties b/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_zh_CN.properties
index 9ebecdfd..a7cf418b 100644
--- a/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_zh_CN.properties
+++ b/io.sc.platform.core/src/main/resources/io/sc/platform/core/i18n/words_zh_CN.properties
@@ -10,6 +10,7 @@ bottom-right=\u53F3\u4E0B
 bottom=\u4E0B\u8FB9
 cancel=\u53D6\u6D88
 center=\u4E2D\u5FC3
+changePassword=\u4FEE\u6539\u767B\u5F55\u5BC6\u7801
 changeRole=\u5207\u6362\u89D2\u8272
 className=\u7C7B\u540D
 clone=\u590D\u5236
@@ -18,6 +19,8 @@ code=\u4EE3\u7801
 confirm=\u786E\u5B9A
 confirmPassword=\u786E\u8BA4\u5BC6\u7801
 content=\u5185\u5BB9
+corporation=\u6CD5\u4EBA
+corporationCode=\u6CD5\u4EBA\u4EE3\u7801
 createDate=\u521B\u5EFA\u65E5\u671F
 creator=\u521B\u5EFA\u4EBA
 dataComeFrom=\u6570\u636E\u6765\u6E90
@@ -26,6 +29,7 @@ delete=\u522A\u9664
 deleteAll=\u5220\u9664\u5168\u90E8
 description=\u63CF\u8FF0
 detail=\u8BE6\u60C5
+disable=\u7981\u7528
 displayValue=\u663E\u793A\u503C
 download=\u4E0B\u8F7D
 edit=\u7F16\u8F91
@@ -82,6 +86,7 @@ newValue=\u65B0\u503C
 next=\u4E0B\u4E00
 nextPage=\u4E0B\u4E00\u9875
 no=\u5426
+normal=\u6B63\u5E38
 oldValue=\u539F\u503C
 order=\u987A\u5E8F
 org=\u673A\u6784
diff --git a/io.sc.platform.developer.frontend/babel.config.cjs b/io.sc.platform.developer.frontend/babel.config.cjs
index 26c581b4..0ff56db5 100644
--- a/io.sc.platform.developer.frontend/babel.config.cjs
+++ b/io.sc.platform.developer.frontend/babel.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread",
+    "@vue/babel-plugin-jsx",
   ]
 }
diff --git a/io.sc.platform.developer.frontend/package.json b/io.sc.platform.developer.frontend/package.json
index 33767969..9a5cebe2 100644
--- a/io.sc.platform.developer.frontend/package.json
+++ b/io.sc.platform.developer.frontend/package.json
@@ -64,7 +64,8 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-merge": "5.10.0"
+    "webpack-merge": "5.10.0",
+    "@vue/babel-plugin-jsx": "1.1.5"
   },
   "dependencies": {
     "@quasar/extras": "1.16.9",
@@ -77,7 +78,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.55",
+    "platform-core": "8.1.59",
     "quasar": "2.14.2",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
diff --git a/io.sc.platform.developer.frontend/tsconfig.json b/io.sc.platform.developer.frontend/tsconfig.json
index 99341915..b63b8eb5 100644
--- a/io.sc.platform.developer.frontend/tsconfig.json
+++ b/io.sc.platform.developer.frontend/tsconfig.json
@@ -15,6 +15,7 @@
       "@/*": [
         "src/*"
       ]
-    }
+    },
+    "jsxImportSource": "vue"
   }
 }
\ No newline at end of file
diff --git a/io.sc.platform.lcdp.frontend/babel.config.cjs b/io.sc.platform.lcdp.frontend/babel.config.cjs
index 26c581b4..0ff56db5 100644
--- a/io.sc.platform.lcdp.frontend/babel.config.cjs
+++ b/io.sc.platform.lcdp.frontend/babel.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread",
+    "@vue/babel-plugin-jsx",
   ]
 }
diff --git a/io.sc.platform.lcdp.frontend/package.json b/io.sc.platform.lcdp.frontend/package.json
index 0e9809e9..be566f63 100644
--- a/io.sc.platform.lcdp.frontend/package.json
+++ b/io.sc.platform.lcdp.frontend/package.json
@@ -64,7 +64,8 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-merge": "5.10.0"
+    "webpack-merge": "5.10.0",
+    "@vue/babel-plugin-jsx": "1.1.5"
   },
   "dependencies": {
     "@codemirror/autocomplete": "6.11.1",
@@ -90,7 +91,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.55",
+    "platform-core": "8.1.59",
     "quasar": "2.14.2",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
diff --git a/io.sc.platform.lcdp.frontend/tsconfig.json b/io.sc.platform.lcdp.frontend/tsconfig.json
index 99341915..b63b8eb5 100644
--- a/io.sc.platform.lcdp.frontend/tsconfig.json
+++ b/io.sc.platform.lcdp.frontend/tsconfig.json
@@ -15,6 +15,7 @@
       "@/*": [
         "src/*"
       ]
-    }
+    },
+    "jsxImportSource": "vue"
   }
 }
\ No newline at end of file
diff --git a/io.sc.platform.mvc.frontend/babel.config.cjs b/io.sc.platform.mvc.frontend/babel.config.cjs
index 26c581b4..0ff56db5 100644
--- a/io.sc.platform.mvc.frontend/babel.config.cjs
+++ b/io.sc.platform.mvc.frontend/babel.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread",
+    "@vue/babel-plugin-jsx",
   ]
 }
diff --git a/io.sc.platform.mvc.frontend/package.json b/io.sc.platform.mvc.frontend/package.json
index 696d274b..3304b53a 100644
--- a/io.sc.platform.mvc.frontend/package.json
+++ b/io.sc.platform.mvc.frontend/package.json
@@ -64,7 +64,8 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-merge": "5.10.0"
+    "webpack-merge": "5.10.0",
+    "@vue/babel-plugin-jsx": "1.1.5"
   },
   "dependencies": {
     "@quasar/extras": "1.16.9",
@@ -77,7 +78,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.55",
+    "platform-core": "8.1.59",
     "quasar": "2.14.2",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
diff --git a/io.sc.platform.mvc.frontend/tsconfig.json b/io.sc.platform.mvc.frontend/tsconfig.json
index 99341915..b63b8eb5 100644
--- a/io.sc.platform.mvc.frontend/tsconfig.json
+++ b/io.sc.platform.mvc.frontend/tsconfig.json
@@ -15,6 +15,7 @@
       "@/*": [
         "src/*"
       ]
-    }
+    },
+    "jsxImportSource": "vue"
   }
 }
\ No newline at end of file
diff --git a/io.sc.platform.security.frontend/package.json b/io.sc.platform.security.frontend/package.json
index 0d8ec5f1..4035b752 100644
--- a/io.sc.platform.security.frontend/package.json
+++ b/io.sc.platform.security.frontend/package.json
@@ -99,6 +99,6 @@
         "vue-dompurify-html": "5.0.1",
         "vue-i18n": "9.8.0",
         "vue-router": "4.2.5",
-        "platform-core": "8.1.55"
+        "platform-core": "8.1.59"
     }
 }
\ No newline at end of file
diff --git a/io.sc.platform.system.frontend/babel.config.cjs b/io.sc.platform.system.frontend/babel.config.cjs
index 26c581b4..0ff56db5 100644
--- a/io.sc.platform.system.frontend/babel.config.cjs
+++ b/io.sc.platform.system.frontend/babel.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread",
+    "@vue/babel-plugin-jsx",
   ]
 }
diff --git a/io.sc.platform.system.frontend/package.json b/io.sc.platform.system.frontend/package.json
index 856230aa..7f376df8 100644
--- a/io.sc.platform.system.frontend/package.json
+++ b/io.sc.platform.system.frontend/package.json
@@ -64,7 +64,8 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-merge": "5.10.0"
+    "webpack-merge": "5.10.0",
+    "@vue/babel-plugin-jsx": "1.1.5"
   },
   "dependencies": {
     "@quasar/extras": "1.16.9",
@@ -77,7 +78,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.56",
+    "platform-core": "8.1.60",
     "quasar": "2.14.2",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
diff --git a/io.sc.platform.system.frontend/src/i18n/messages.json b/io.sc.platform.system.frontend/src/i18n/messages.json
index 936d7a6a..0abe591e 100644
--- a/io.sc.platform.system.frontend/src/i18n/messages.json
+++ b/io.sc.platform.system.frontend/src/i18n/messages.json
@@ -45,7 +45,9 @@
   "system.monitor.log.tab.download":"Log Download",
   "system.monitor.log.tab.level":"Log Level",
 
-
+  "rawPassword": "Raw Password",
+  "newPassword": "New Password",
+  "confirmNewPassword": "Confirm New Password",
   "accountExpired": "Expired",
   "accountLocked": "Locked",
   "credentialsExpired": "Credentials Expired",
diff --git a/io.sc.platform.system.frontend/src/i18n/messages_tw_CN.json b/io.sc.platform.system.frontend/src/i18n/messages_tw_CN.json
index de99218e..41b1aa77 100644
--- a/io.sc.platform.system.frontend/src/i18n/messages_tw_CN.json
+++ b/io.sc.platform.system.frontend/src/i18n/messages_tw_CN.json
@@ -44,9 +44,12 @@
   "system.monitor.log.tab.download":"日誌下載",
   "system.monitor.log.tab.level":"日誌級別",
 
-  "accountExpired": "是否過期",
-  "accountLocked": "是否鎖定",
-  "credentialsExpired": "是否密碼過期",
+  "rawPassword": "原密碼",
+  "newPassword": "新密碼",
+  "confirmNewPassword": "確認新密碼",
+  "accountExpired": "過期",
+  "accountLocked": "鎖定",
+  "credentialsExpired": "密碼過期",
 
   "parameter.system":"系統",
   "parameter.system.homePage":"首頁",
diff --git a/io.sc.platform.system.frontend/src/i18n/messages_zh_CN.json b/io.sc.platform.system.frontend/src/i18n/messages_zh_CN.json
index 37f8edbe..5344042a 100644
--- a/io.sc.platform.system.frontend/src/i18n/messages_zh_CN.json
+++ b/io.sc.platform.system.frontend/src/i18n/messages_zh_CN.json
@@ -45,9 +45,12 @@
   "system.monitor.log.tab.level":"日志级别",
 
 
-  "accountExpired": "是否过期",
-  "accountLocked": "是否锁定",
-  "credentialsExpired": "是否密码过期",
+  "rawPassword": "原密码",
+  "newPassword": "新密码",
+  "confirmNewPassword": "确认新密码",
+  "accountExpired": "过期",
+  "accountLocked": "锁定",
+  "credentialsExpired": "密码过期",
 
   "parameter.system":"系统",
   "parameter.system.homePage":"首页",
diff --git a/io.sc.platform.system.frontend/src/views/user/Ok.vue b/io.sc.platform.system.frontend/src/views/user/Ok.vue
new file mode 100644
index 00000000..3ffd860e
--- /dev/null
+++ b/io.sc.platform.system.frontend/src/views/user/Ok.vue
@@ -0,0 +1,34 @@
+<template>
+  <q-btn label="OK" @click="click"></q-btn>
+</template>
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+import { VueTools } from 'platform-core';
+
+const emit = defineEmits<{
+  (
+    e: 'wsp', // 行点击事件
+    evt: Event, // 第一个参数，JS 事件对象
+    row: any, // 第二个参数, 点击的行对象
+    index: number, // 第三个参数, 当前页中行的索引
+  ): void;
+}>();
+
+const click = () => {
+  emit('wsp', instance, 'kdsjlfj');
+};
+
+const ok = () => {
+  return 'ok';
+};
+
+const hello = 'hello';
+
+defineExpose({
+  ok,
+  hello,
+});
+
+const instance = getCurrentInstance();
+VueTools.expose2Instance(instance);
+</script>
diff --git a/io.sc.platform.system.frontend/src/views/user/User.vue b/io.sc.platform.system.frontend/src/views/user/User.vue
index efd3e0d1..ba13ae92 100644
--- a/io.sc.platform.system.frontend/src/views/user/User.vue
+++ b/io.sc.platform.system.frontend/src/views/user/User.vue
@@ -1,63 +1,101 @@
 <template>
+  <Ok @wsp="wsp"></Ok>
   <q-splitter :model-value="70" class="w-full h-full">
     <template #before>
-      <w-grid
-        ref="userGridRef"
-        :title="userGrid.title"
-        :query-form-fields="userGrid.queryFormFields"
-        :toolbar-actions="userGrid.actions"
-        :data-url="userGrid.dataUrl"
-        :columns="userGrid.columns"
-        :row-key="userGrid.rowKey"
-        :editor="userGrid.editor"
-        :viewer="userGrid.viewer"
-        @row-click="userGrid.rowClick"
-      ></w-grid>
+      <div class="px-1">
+        <w-grid
+          ref="userGridRef"
+          :title="userGrid.title"
+          selection="multiple"
+          :query-form-fields="userGrid.queryFormFields"
+          :toolbar-actions="userGrid.toolbarActions"
+          :toolbar-configure="userGrid.toolbarConfigure"
+          :data-url="userGrid.dataUrl"
+          :columns="userGrid.columns"
+          :row-key="userGrid.rowKey"
+          :editor="userGrid.editor"
+          :viewer="userGrid.viewer"
+          @row-click="userGrid.rowClick"
+        ></w-grid>
+      </div>
     </template>
     <template #after>
-      <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
-        <q-tab name="role" icon="bi-people" :label="$t('role')" />
-        <q-tab name="org" icon="bi-diagram-3" :label="$t('org')" />
-      </q-tabs>
+      <div class="px-1">
+        <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
+          <q-tab name="role" icon="bi-people" :label="$t('role')" />
+          <q-tab name="org" icon="bi-diagram-3" :label="$t('org')" />
+        </q-tabs>
 
-      <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
-        <q-tab-panel name="role">
-          <platform-grid
-            ref="roleGridRef"
-            :table-props="{ borderded: false, flat: true }"
-            :query-form-cols-number="roleConfigure.queryFormColsNumber"
-            :hide-bottom="roleConfigure.hideBottom"
-            :query-form-cols-auto="roleConfigure.queryFormColsAuto"
-            :table-title="roleConfigure.tableTitle"
-            :table-row-key="roleConfigure.tableRowKey"
-            :table-init-load-data="roleConfigure.tableInitLoadData"
-            :table-data-url="roleConfigure.tableDataUrl"
-            :table-show-sort-no="false"
-            :table-columns="roleConfigure.tableColumns"
-            :table-left-column-sticky-number="roleConfigure.tableLeftColumnStickyNumber"
-            :table-buttons="roleConfigure.tableButtons"
-            :query-form-fields="roleConfigure.queryFormFields"
-            :table-pagination="roleConfigure.tablePagination"
-            table-selection="multiple"
-            :table-dense="false"
-          >
-          </platform-grid>
-        </q-tab-panel>
-        <q-tab-panel name="org">
-          <w-tree-grid ref="orgTreeGridRef" label-key="name" :actions="orgConfigure.actions" tick-strategy="leaf" />
-        </q-tab-panel>
-      </q-tab-panels>
+        <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
+          <q-tab-panel name="role">
+            <platform-grid
+              ref="roleGridRef"
+              :table-props="{ borderded: false, flat: true }"
+              :query-form-cols-number="roleConfigure.queryFormColsNumber"
+              :hide-bottom="roleConfigure.hideBottom"
+              :query-form-cols-auto="roleConfigure.queryFormColsAuto"
+              :table-title="roleConfigure.tableTitle"
+              :table-row-key="roleConfigure.tableRowKey"
+              :table-init-load-data="roleConfigure.tableInitLoadData"
+              :table-data-url="roleConfigure.tableDataUrl"
+              :table-show-sort-no="false"
+              :table-columns="roleConfigure.tableColumns"
+              :table-left-column-sticky-number="roleConfigure.tableLeftColumnStickyNumber"
+              :table-buttons="roleConfigure.tableButtons"
+              :query-form-fields="roleConfigure.queryFormFields"
+              :table-pagination="roleConfigure.tablePagination"
+              table-selection="multiple"
+              :table-dense="false"
+            >
+            </platform-grid>
+          </q-tab-panel>
+          <q-tab-panel name="org">
+            <w-tree-grid ref="orgTreeGridRef" label-key="name" :actions="orgConfigure.actions" tick-strategy="leaf" />
+          </q-tab-panel>
+        </q-tab-panels>
+      </div>
     </template>
     <SelectRoleDialog ref="selectRoleDialog" title="可选角色列表" :maximized="false" width="50%" height="500px"></SelectRoleDialog>
-    <ChangePasswordDialog ref="changePasswordDialog" title="修改密码" :maximized="false" width="450px" height="350px"></ChangePasswordDialog>
+    <w-dialog
+      ref="changePasswordDialogRef"
+      title="修改密码"
+      width="500px"
+      height="250px"
+      :buttons="[
+        {
+          label: $t('submit'),
+          click: () => {
+            console.log(changePasswordFormRef.getData());
+            axios.post(Environment.apiContextPath('/api/system/user/changePassword'), changePasswordFormRef.getData()).then(() => {
+              changePasswordDialogRef.hide();
+            });
+          },
+        },
+      ]"
+    >
+      <w-form
+        ref="changePasswordFormRef"
+        :cols-num="1"
+        :fields="[
+          { name: 'rawPassword', label: $t('rawPassword'), type: 'password' },
+          { name: 'newPassword', label: $t('newPassword'), type: 'password' },
+          { name: 'confirmNewPassword', label: $t('confirmNewPassword'), type: 'password' },
+        ]"
+        class="p-2"
+      ></w-form>
+    </w-dialog>
+    <ChangePasswordDialog ref="changePasswordDialog2" title="修改密码" :maximized="false" width="450px" height="350px"></ChangePasswordDialog>
   </q-splitter>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QBtn } from 'quasar';
 import { Environment, axios, EnumTools } from 'platform-core';
 import SelectRoleDialog from './SelectRoleDialog.vue';
 import ChangePasswordDialog from './ChangePasswordDialog.vue';
+import UserStatusTag from './UserStatusTag.vue';
+import Ok from './Ok.vue';
 
 const { t } = useI18n();
 
@@ -66,49 +104,44 @@ const roleGridRef = ref();
 const orgTreeGridRef = ref();
 
 const selectRoleDialog = ref();
-const changePasswordDialog = ref();
+const changePasswordDialogRef = ref();
+const changePasswordFormRef = ref();
 
 const selectedTabRef = ref('role');
 
 const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom', t);
+const YesNoEnum = EnumTools.yesno(t);
+
+const wsp = (v1, ss) => {
+  console.log(v1.ok(), v1.hello, ss);
+};
 
 const userGrid = {
   title: t('system.user.gridTitle'),
   queryFormFields: [
     { name: 'loginName', label: t('loginName'), type: 'text' },
     { name: 'userName', label: t('userName'), type: 'text' },
-    {
-      name: 'enable',
-      label: t('enable'),
-      type: 'select',
-      options: [
-        { value: true, label: '是' },
-        { value: false, label: '否' },
-      ],
-    },
-    {
-      name: 'dataComeFrom',
-      label: t('dataComeFrom'),
-      type: 'select',
-      options: DataComeFromEnum.list,
-    },
+    { name: 'enable', label: t('isEnable'), type: 'select', options: YesNoEnum.list },
+    { name: 'dataComeFrom', label: t('dataComeFrom'), type: 'select', options: DataComeFromEnum.list },
   ],
-  actions: [
+  toolbarConfigure: { noIcon: false },
+  toolbarActions: [
     'query',
     'refresh',
     'separator',
     'add',
     'edit',
-    'clone',
     'remove',
     'separator',
     {
       name: 'setPassword',
       label: t('system.user.action.setPassword'),
       icon: 'bi-shield-exclamation',
-      enableIf: function () {},
+      enableIf: function (selected) {
+        return selected.length > 0;
+      },
       click: function () {
-        changePasswordDialog.value.show();
+        changePasswordDialogRef.value.show();
       },
     },
     'view',
@@ -117,174 +150,83 @@ const userGrid = {
   dataUrl: Environment.apiContextPath('/api/system/user'),
   rowKey: 'id',
   columns: [
-    { width: 100, name: 'loginName', label: t('loginName') },
-    { width: '100%', name: 'userName', label: t('userName') },
-    { width: 100, name: 'enable', label: t('isEnable'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 100, name: 'dataComeFrom', label: t('dataComeFrom'), format: (value) => (value ? DataComeFromEnum.map[value] : '') },
-    { width: 100, name: 'accountExpired', label: t('accountExpired'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 100, name: 'accountLocked', label: t('accountLocked'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 120, name: 'credentialsExpired', label: t('credentialsExpired'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 110, name: 'lastModifier', label: t('lastModifier') },
-    { width: 115, name: 'lastModifyDate', label: t('lastModifyDate') },
+    { name: 'loginName', label: t('loginName') },
+    { name: 'userName', label: t('userName') },
+    //{ width: 100, name: 'enable', label: t('isEnable'), align: 'center', format: (value) => YesNoEnum.map[value] },
+    //{ width: 100, name: 'accountExpired', label: t('accountExpired'), format: (value) => YesNoEnum.map[value] },
+    //{ width: 100, name: 'accountLocked', label: t('accountLocked'), format: (value) => YesNoEnum.map[value] },
+    //{ width: 160, name: 'credentialsExpired', label: t('credentialsExpired'), format: (value) => YesNoEnum.map[value] },
+    {
+      name: 'status',
+      label: t('status'),
+      format: (value, row) => {
+        return {
+          componentType: UserStatusTag,
+          attrs: row,
+        };
+      },
+    },
+    { name: 'dataComeFrom', label: t('dataComeFrom'), format: (value) => DataComeFromEnum.map[value] },
+    { name: 'lastModifier', label: t('lastModifier') },
+    { name: 'lastModifyDate', label: t('lastModifyDate') },
   ],
   editor: {
     dialog: {},
     form: {
-      colsNum: 1,
+      colsNum: 2,
       fields: [
         { name: 'loginName', label: t('loginName'), type: 'text', required: true },
         { name: 'userName', label: t('userName'), type: 'text', required: true },
+        { name: 'description', label: t('description'), type: 'textarea', colspan: 2, rows: 1 },
         { name: 'password', label: t('password'), type: 'password' },
         { name: 'confirmPassword', label: t('confirmPassword'), type: 'password' },
-        { name: 'description', label: t('description'), type: 'textarea' },
-        { name: 'email', label: t('email'), type: 'text' },
-        { name: 'phone', label: t('phone'), type: 'text' },
         { name: 'mobile', label: t('mobile'), type: 'text' },
+        { name: 'phone', label: t('phone'), type: 'text' },
+        { name: 'email', label: t('email'), type: 'text' },
         { name: 'weixin', label: t('weixin'), type: 'text' },
         { name: 'qq', label: t('qq'), type: 'text' },
-        { name: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true },
-        { name: 'accountExpired', label: t('accountExpired'), type: 'checkbox' },
-        { name: 'accountLocked', label: t('accountLocked'), type: 'checkbox' },
-        { name: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox' },
+        { name: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true, colsFirst: true },
+        { name: 'accountExpired', label: t('accountExpired'), type: 'checkbox', defaultValue: false, colsFirst: true },
+        { name: 'accountLocked', label: t('accountLocked'), type: 'checkbox', defaultValue: false, colsFirst: true },
+        { name: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox', defaultValue: false, colsFirst: true },
       ],
     },
   },
   viewer: {
     panel: {
-      columnNum: 2,
+      columnNum: 1,
       fields: [
+        { name: 'id', label: t('id') },
         { name: 'loginName', label: t('loginName') },
         { name: 'userName', label: t('userName') },
-        { name: 'password', label: t('password') },
-        { name: 'confirmPassword', label: t('confirmPassword') },
         { name: 'description', label: t('description') },
+        { name: 'enable', label: t('enable') },
+        { name: 'accountExpired', label: t('accountExpired') },
+        { name: 'accountLocked', label: t('accountLocked') },
+        { name: 'credentialsExpired', label: t('credentialsExpired') },
         { name: 'email', label: t('email') },
         { name: 'phone', label: t('phone') },
         { name: 'mobile', label: t('mobile') },
         { name: 'weixin', label: t('weixin') },
         { name: 'qq', label: t('qq') },
-        { name: 'enable', label: t('enable') },
-        { name: 'accountExpired', label: t('accountExpired') },
-        { name: 'accountLocked', label: t('accountLocked') },
-        { name: 'credentialsExpired', label: t('credentialsExpired') },
+        { name: 'dataComeFrom', label: t('dataComeFrom'), format: (value) => DataComeFromEnum.map[value] },
+        { name: 'creator', label: t('creator') },
+        { name: 'createDate', label: t('createDate') },
+        { name: 'lastModifier', label: t('lastModifier') },
+        { name: 'lastModifyDate', label: t('lastModifyDate') },
+        { name: 'corporationCode', label: t('corporationCode') },
       ],
     },
   },
   rowClick: (evt, row, index) => {
     if (roleGridRef.value) {
       axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id).then((response) => {
-        roleGridRef.value.replaceRowsFun(response.data.content);
-      });
-    }
-    if (orgTreeGridRef.value) {
-      axios.get(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id).then((response) => {
-        orgTreeGridRef.value.setNodes(response.data);
-      });
-    }
-  },
-};
-
-const userConfigure = {
-  queryFormColsNumber: 4,
-  queryFormColsAuto: false,
-  queryFormFields: [
-    { label: t('loginName'), modelName: 'loginName', type: 'text' },
-    { label: t('userName'), modelName: 'userName', type: 'text' },
-    {
-      label: t('enable'),
-      modelName: 'enable',
-      type: 'select',
-      options: [
-        { value: true, label: '是' },
-        { value: false, label: '否' },
-      ],
-    },
-    {
-      label: t('dataComeFrom'),
-      modelName: 'dataComeFrom',
-      type: 'select',
-      options: [
-        { value: 'INPUT', label: t('io.sc.platform.orm.api.enums.DataComeFrom.INPUT') },
-        { value: 'IMPORT', label: t('io.sc.platform.orm.api.enums.DataComeFrom.IMPORT') },
-      ],
-    },
-  ],
-  hideBottom: false,
-  tableInitLoadData: true,
-  tableLeftColumnStickyNumber: 0,
-  tableTitle: t('system.user.gridTitle'),
-  tableRowKey: 'id',
-  tableDataUrl: Environment.apiContextPath('/api/system/user'),
-  tablePagination: {
-    sortBy: 'lastModifyDate',
-    descending: true,
-    reqPageStart: 0,
-    rowsPerPage: 10,
-  },
-  tableButtons: [
-    'query',
-    'reset',
-    'separator',
-    'refresh',
-    'add',
-    'edit',
-    'delete',
-    'separator',
-    'view',
-    'separator',
-    {
-      name: 'setPassword',
-      label: t('system.user.action.setPassword'),
-      icon: 'bi-shield-exclamation',
-      enableIf: function () {},
-      click: function () {
-        changePasswordDialog.value.show();
-      },
-    },
-    'inFullscreen',
-  ],
-  tableColumns: [
-    { width: 100, name: 'loginName', label: t('loginName') },
-    { width: 100, name: 'userName', label: t('userName') },
-    { width: 100, name: 'enable', label: t('isEnable'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 100, name: 'dataComeFrom', label: t('dataComeFrom'), format: (value) => DataComeFromEnum.map.get(value) },
-    { width: 100, name: 'accountExpired', label: t('accountExpired'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 100, name: 'accountLocked', label: t('accountLocked'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 120, name: 'credentialsExpired', label: t('credentialsExpired'), format: (value) => (value ? t('yes') : t('no')) },
-    { width: 110, name: 'lastModifier', label: t('lastModifier') },
-    { width: 115, name: 'lastModifyDate', label: t('lastModifyDate') },
-  ],
-  addFormProps: {
-    dialogInitWidth: '50%',
-    dialogInitHeight: '90%',
-    formColsNumber: 1,
-    formColsAuto: false,
-    formFields: [
-      { modelName: 'loginName', label: t('loginName'), type: 'text', required: true },
-      { modelName: 'userName', label: t('userName'), type: 'text', required: true },
-      { modelName: 'password', label: t('password'), type: 'password' },
-      { modelName: 'confirmPassword', label: t('confirmPassword'), type: 'password' },
-      { modelName: 'description', label: t('description'), type: 'textarea' },
-      { modelName: 'email', label: t('email'), type: 'text' },
-      { modelName: 'phone', label: t('phone'), type: 'text' },
-      { modelName: 'mobile', label: t('mobile'), type: 'text' },
-      { modelName: 'weixin', label: t('weixin'), type: 'text' },
-      { modelName: 'qq', label: t('qq'), type: 'text' },
-      { modelName: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true },
-      { modelName: 'accountExpired', label: t('accountExpired'), type: 'checkbox' },
-      { modelName: 'accountLocked', label: t('accountLocked'), type: 'checkbox' },
-      { modelName: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox' },
-    ],
-  },
-  rowClickFun: (evt, row, index) => {
-    if (roleGridRef.value) {
-      axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id).then((response) => {
-        roleGridRef.value.replaceRowsFun(response.data.content);
+        //roleGridRef.value.replaceRows(response.data.content);
       });
     }
     if (orgTreeGridRef.value) {
       axios.get(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id).then((response) => {
-        orgTreeGridRef.value.setNodes(response.data);
+        //orgTreeGridRef.value.setNodes(response.data);
       });
     }
   },
diff --git a/io.sc.platform.system.frontend/src/views/user/UserStatusTag.vue b/io.sc.platform.system.frontend/src/views/user/UserStatusTag.vue
new file mode 100644
index 00000000..3940b924
--- /dev/null
+++ b/io.sc.platform.system.frontend/src/views/user/UserStatusTag.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <q-chip v-if="enable && !accountExpired && !accountLocked && !credentialsExpired" color="green" text-color="white" :label="$t('normal')" dense></q-chip>
+    <q-chip v-if="!enable" color="red" text-color="white" :label="$t('disable')" dense></q-chip>
+    <q-chip v-if="accountExpired" color="red" text-color="white" :label="$t('accountExpired')" dense></q-chip>
+    <q-chip v-if="accountLocked" color="red" text-color="white" :label="$t('accountLocked')" dense></q-chip>
+    <q-chip v-if="credentialsExpired" color="red" text-color="white" :label="$t('credentialsExpired')" dense></q-chip>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  enable: { type: Boolean, default: true },
+  accountExpired: { type: Boolean, default: false },
+  accountLocked: { type: Boolean, default: false },
+  credentialsExpired: { type: Boolean, default: false },
+});
+</script>
diff --git a/io.sc.platform.system.frontend/tsconfig.json b/io.sc.platform.system.frontend/tsconfig.json
index 99341915..c23c83d1 100644
--- a/io.sc.platform.system.frontend/tsconfig.json
+++ b/io.sc.platform.system.frontend/tsconfig.json
@@ -5,6 +5,7 @@
     "module": "node16",
     "strict": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "noEmit": true,
     "allowImportingTsExtensions": true,
     "noImplicitAny": false,