偏好设置增加系统设置功能

src/views/model/index.vue

@@ -209,13 +209,13 @@
     <!-- 运行弹窗 -->
     <RunDialog ref="RunDialogRef" :runData="arrobj"/>
 
-    <!-- 单元系统弹窗 -->
+    <!-- 单位系统弹窗 -->
     <SystemUnitDialog
       :visible="showSystemUnitDialog"
       @update:visible="showSystemUnitDialog = $event"
       @confirm="handleSystemUnitConfirm"
     />
-    <!-- 个人单元弹窗 -->
+    <!-- 个人单位系统弹窗 -->
     <PersonUnitDialog
       :visible="showPersonUnitDialog"
       @update:visible="showPersonUnitDialog = $event"
@@ -298,13 +298,11 @@ const handleNodeClick = ({ node, data, event }) => {
 
 // 单元系统弹窗确认事件
 const handleSystemUnitConfirm = () => {
-  console.log('System Unit Dialog confirmed');
   showSystemUnitDialog.value = false;
 };
 
 // 个人单元弹窗确认事件
 const handlePersonUnitConfirm = () => {
-  console.log('Person Unit Dialog confirmed');
   showPersonUnitDialog.value = false;
 };
 

src/views/preference/index.vue

@@ -8,9 +8,9 @@
           </div>
         </template>
         <div class="preference-content">
-          <el-form label-width="80px">
+          <el-form label-width="110px">
             <el-row :gutter="20">
-              <el-col :span="24">
+              <el-col :span="8">
                 <el-form-item :label="`${$t('preferences.language')}：`">
                   <el-select v-model="currentLang" placeholder="Select Language">
                     <el-option
@@ -23,12 +23,37 @@
                 </el-form-item>
               </el-col>
             </el-row>
+            <el-row :gutter="24">
+              <el-col :span="3">
+                <el-form-item :label="`${$t('treeData.systemSetup')}：`">
+                  <el-button type="primary" plain @click="systemDialogVisable">{{ $t('treeData.systemUnitView') }}</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="3">
+                <el-form-item>
+                  <el-button type="primary" plain @click="personDialogVisable">{{ $t('treeData.personUnitSetting') }}</el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
         </div>
       </el-card>
     </div>
 
   </div>
+
+          <!-- 单位系统弹窗 -->
+    <SystemUnitDialog
+      :visible="showSystemUnitDialog"
+      @update:visible="showSystemUnitDialog = $event"
+      @confirm="handleSystemUnitConfirm"
+    />
+    <!-- 个人单位系统弹窗 -->
+    <PersonUnitDialog
+      :visible="showPersonUnitDialog"
+      @update:visible="showPersonUnitDialog = $event"
+      @confirm="handlePersonUnitConfirm"
+    />
 </template>
 
 <script setup>
@@ -38,6 +63,8 @@ import { useI18n } from 'vue-i18n'
 // import { loadLocaleMessages } from '@/utils/i18n'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import en from 'element-plus/dist/locale/en.mjs'
+import SystemUnitDialog from '@/components/SystemUnitDialog.vue';
+import PersonUnitDialog from '@/components/PersonUnitDialog.vue';
 
 const { appContext } = getCurrentInstance()
 const { locale } = useI18n()
@@ -48,6 +75,10 @@ const languages = [
   { value: 'en', label: 'English' }
 ]
 
+// 单元系统的弹窗显示控制
+const showSystemUnitDialog = ref(false);
+const showPersonUnitDialog = ref(false);
+
 // public放中英文时
 // watch(currentLang, async (newVal) => {
 //   try {
@@ -72,6 +103,24 @@ watch(currentLang, (newVal) => {
     appContext.config.globalProperties.$ELEMENT = { locale: elementLocale }
 })
 
+const systemDialogVisable = () => {
+  showSystemUnitDialog.value = true;
+};
+
+const personDialogVisable = () => {
+  showPersonUnitDialog.value = true;
+};
+
+// 单元系统弹窗确认事件
+const handleSystemUnitConfirm = () => {
+  showSystemUnitDialog.value = false;
+};
+
+// 个人单元弹窗确认事件
+const handlePersonUnitConfirm = () => {
+  showPersonUnitDialog.value = false;
+};
+
 
 </script>
 
@@ -94,7 +143,7 @@ watch(currentLang, (newVal) => {
 }
 
 .preference-content{
-  width: 20%;
+  width: 100%;
 }
 
 </style>