refactor: template script

yudao-ui-admin-vue3/src/views/system/dept/index.vue

@@ -1,3 +1,106 @@
+<template>
+  <div class="flex">
+    <el-card class="w-1/3 dept" :gutter="12" shadow="always">
+      <template #header>
+        <div class="card-header">
+          <span>部门列表</span>
+          <XButton
+            type="primary"
+            preIcon="ep:zoom-in"
+            title="新增根节点"
+            v-hasPermi="['system:dept:create']"
+            @click="handleCreate"
+          />
+        </div>
+      </template>
+      <div class="custom-tree-container">
+        <!-- <p>部门列表</p> -->
+        <!-- 操作工具栏 -->
+        <el-input v-model="filterText" placeholder="搜索部门" />
+        <el-tree
+          ref="treeRef"
+          node-key="id"
+          :data="deptOptions"
+          :props="defaultProps"
+          :highlight-current="true"
+          default-expand-all
+          :filter-node-method="filterNode"
+          :expand-on-click-node="false"
+        >
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <span>{{ node.label }}</span>
+              <span>
+                <XTextButton
+                  preIcon="ep:zoom-in"
+                  :title="t('action.add')"
+                  v-hasPermi="['system:dept:create']"
+                  @click="handleCreate(data)"
+                />
+                <XTextButton
+                  preIcon="ep:edit"
+                  :title="t('action.edit')"
+                  v-hasPermi="['system:dept:update']"
+                  @click="handleUpdate(data)"
+                />
+                <XTextButton
+                  preIcon="ep:delete"
+                  :title="t('action.del')"
+                  v-hasPermi="['system:dept:delete']"
+                  @click="handleDelete(data)"
+                />
+              </span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </el-card>
+    <el-card class="w-2/3 dept" style="margin-left: 10px" :gutter="12" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>{{ formTitle }}</span>
+        </div>
+      </template>
+      <div v-if="!showForm">
+        <span><p>请从左侧选择部门</p></span>
+      </div>
+      <div v-if="showForm">
+        <!-- 操作工具栏 -->
+        <Form ref="formRef" :schema="modelSchema" :rules="rules">
+          <template #parentId>
+            <el-tree-select
+              node-key="id"
+              v-model="deptParentId"
+              :props="defaultProps"
+              :data="deptOptions"
+              check-strictly
+            />
+          </template>
+          <template #leaderUserId>
+            <el-select v-model="leaderUserId">
+              <el-option
+                v-for="item in userOption"
+                :key="parseInt(item.id)"
+                :label="item.nickname"
+                :value="parseInt(item.id)"
+              />
+            </el-select>
+          </template>
+        </Form>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          v-hasPermi="['system:dept:update']"
+          :loading="loading"
+          @click="submitForm()"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton :loading="loading" :title="t('dialog.close')" @click="showForm = false" />
+      </div>
+    </el-card>
+  </div>
+</template>
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElInput, ElCard, ElTree, ElTreeSelect, ElSelect, ElOption } from 'element-plus'
@@ -104,109 +207,7 @@ onMounted(async () => {
   await getUserList()
 })
 </script>
-<template>
-  <div class="flex">
-    <el-card class="w-1/3 dept" :gutter="12" shadow="always">
-      <template #header>
-        <div class="card-header">
-          <span>部门列表</span>
-          <XButton
-            type="primary"
-            preIcon="ep:zoom-in"
-            title="新增根节点"
-            v-hasPermi="['system:dept:create']"
-            @click="handleCreate"
-          />
-        </div>
-      </template>
-      <div class="custom-tree-container">
-        <!-- <p>部门列表</p> -->
-        <!-- 操作工具栏 -->
-        <el-input v-model="filterText" placeholder="搜索部门" />
-        <el-tree
-          ref="treeRef"
-          node-key="id"
-          :data="deptOptions"
-          :props="defaultProps"
-          :highlight-current="true"
-          default-expand-all
-          :filter-node-method="filterNode"
-          :expand-on-click-node="false"
-        >
-          <template #default="{ node, data }">
-            <span class="custom-tree-node">
-              <span>{{ node.label }}</span>
-              <span>
-                <XTextButton
-                  preIcon="ep:zoom-in"
-                  :title="t('action.add')"
-                  v-hasPermi="['system:dept:create']"
-                  @click="handleCreate(data)"
-                />
-                <XTextButton
-                  preIcon="ep:edit"
-                  :title="t('action.edit')"
-                  v-hasPermi="['system:dept:update']"
-                  @click="handleUpdate(data)"
-                />
-                <XTextButton
-                  preIcon="ep:delete"
-                  :title="t('action.del')"
-                  v-hasPermi="['system:dept:delete']"
-                  @click="handleDelete(data)"
-                />
-              </span>
-            </span>
-          </template>
-        </el-tree>
-      </div>
-    </el-card>
-    <el-card class="w-2/3 dept" style="margin-left: 10px" :gutter="12" shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <span>{{ formTitle }}</span>
-        </div>
-      </template>
-      <div v-if="!showForm">
-        <span><p>请从左侧选择部门</p></span>
-      </div>
-      <div v-if="showForm">
-        <!-- 操作工具栏 -->
-        <Form ref="formRef" :schema="modelSchema" :rules="rules">
-          <template #parentId>
-            <el-tree-select
-              node-key="id"
-              v-model="deptParentId"
-              :props="defaultProps"
-              :data="deptOptions"
-              check-strictly
-            />
-          </template>
-          <template #leaderUserId>
-            <el-select v-model="leaderUserId">
-              <el-option
-                v-for="item in userOption"
-                :key="parseInt(item.id)"
-                :label="item.nickname"
-                :value="parseInt(item.id)"
-              />
-            </el-select>
-          </template>
-        </Form>
-        <!-- 按钮：保存 -->
-        <XButton
-          type="primary"
-          :title="t('action.save')"
-          v-hasPermi="['system:dept:update']"
-          :loading="loading"
-          @click="submitForm()"
-        />
-        <!-- 按钮：关闭 -->
-        <XButton :loading="loading" :title="t('dialog.close')" @click="showForm = false" />
-      </div>
-    </el-card>
-  </div>
-</template>
+
 <style scoped>
 .dept {
   height: 600px;