diff --git a/src/views/components/dictData.vue b/src/views/components/dictData.vue
index 4c66b7b..79ef921 100644
--- a/src/views/components/dictData.vue
+++ b/src/views/components/dictData.vue
@@ -1,363 +1,344 @@
 <template>
-  <div>
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-      <el-form-item label="字典名称" prop="dictType">
-        <el-select v-model="queryParams.dictType">
-          <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
+  <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+    <el-form-item label="字典名称" prop="dictType">
+      <el-select v-model="queryParams.dictType">
+        <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="状态" prop="status">
+      <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
+        <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+      <el-button icon="refresh" @click="resetQuery">重置</el-button>
+    </el-form-item>
+  </el-form>
+
+  <el-row :gutter="10" class="mb8">
+    <el-col :span="1.5">
+      <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增数据</el-button>
+    </el-col>
+  </el-row>
+  <el-table :data="dataList">
+    <el-table-column type="selection" width="55" align="center" />
+    <el-table-column label="字典编码" align="center" prop="dictCode" />
+    <el-table-column label="字典标签" align="center" prop="dictLabel">
+      <template #default="scope">
+        <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</span>
+        <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }} </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="字典键值" align="center" prop="dictValue" />
+    <el-table-column label="字典排序" align="center" prop="dictSort" />
+    <el-table-column label="状态" align="center" prop="status">
+      <template #default="scope">
+        <dict-tag :options="statusOptions" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+    <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <template #default="scope">
+        <el-button type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">编辑</el-button>
+        <el-button type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+  <!-- 添加或修改参数配置对话框 -->
+  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="字典类型">
+        <el-input v-model="form.dictType" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="数据标签" prop="dictLabel">
+        <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+      </el-form-item>
+      <el-form-item label="数据键值" prop="dictValue">
+        <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+      </el-form-item>
+      <el-form-item label="样式属性" prop="cssClass">
+        <!-- <el-input v-model="form.cssClass" placeholder="请输入样式属性" /> -->
+        <el-select v-model="form.cssClass" clearable="">
+          <el-option v-for="dict in cssClassOptions" :class="dict.value" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="显示排序" prop="dictSort">
+        <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+      </el-form-item>
+      <el-form-item label="回显样式" prop="listClass">
+        <el-select v-model="form.listClass">
+          <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
-          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-        </el-select>
+        <el-radio-group v-model="form.status">
+          <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
+        </el-radio-group>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-        <el-button icon="refresh" @click="resetQuery">重置</el-button>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
       </el-form-item>
     </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增数据</el-button>
-      </el-col>
-    </el-row>
-    <el-table :data="dataList">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典编码" align="center" prop="dictCode" />
-      <el-table-column label="字典标签" align="center" prop="dictLabel">
-        <template #default="scope">
-          <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'" :class="scope.row.cssClass">{{scope.row.dictLabel}}</span>
-          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{scope.row.dictLabel}}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="字典键值" align="center" prop="dictValue" />
-      <el-table-column label="字典排序" align="center" prop="dictSort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :options="statusOptions" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">编辑</el-button>
-          <el-button type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="字典类型">
-          <el-input v-model="form.dictType" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="数据标签" prop="dictLabel">
-          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
-        </el-form-item>
-        <el-form-item label="数据键值" prop="dictValue">
-          <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
-        </el-form-item>
-        <el-form-item label="样式属性" prop="cssClass">
-          <!-- <el-input v-model="form.cssClass" placeholder="请输入样式属性" /> -->
-          <el-select v-model="form.cssClass" clearable="">
-            <el-option v-for="dict in cssClassOptions" :class="dict.value" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="显示排序" prop="dictSort">
-          <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="回显样式" prop="listClass">
-          <el-select v-model="form.listClass">
-            <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
-<script>
-import {
-  listData,
-  getData,
-  delData,
-  addData,
-  updateData,
-} from "@/api/system/dict/data";
-import { listType, getType } from "@/api/system/dict/type";
-export default {
-  name: "dictData",
-  props: {
-    dictId: {
-      type: Number,
-      default: 0,
-    },
+<script setup name="dictData">
+import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data'
+import { listType, getType } from '@/api/system/dict/type'
+const { proxy } = getCurrentInstance()
+const props = defineProps({
+  dictId: {
+    type: Number,
+    default: 0,
   },
-  watch: {
-    dictId: {
-      handler(newVal, oldVal) {
-        // this.dictId = newVal;
-        if (newVal) {
-          this.getType(newVal);
-          this.getTypeList();
-          this.getDicts("sys_normal_disable").then((response) => {
-            this.statusOptions = response.data;
-          });
-        }
-      },
-      immediate: true,
-      deep: true,
-    },
+})
+watch(
+  () => props.dictId,
+  (newVal, oldValue) => {
+    console.log(`监控new=${newVal},old${oldValue}`)
+    if (newVal) {
+      getTypeInfo(newVal)
+      getTypeList()
+      proxy.getDicts('sys_normal_disable').then((response) => {
+        statusOptions.value = response.data
+      })
+    }
   },
-  data() {
-    return {
-      // 总条数
-      total: 0,
-      // 字典表格数据
-      dataList: [],
-      // 默认字典类型
-      defaultDictType: "",
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 数据标签回显样式
-      listClassOptions: [
-        {
-          value: "default",
-          label: "默认",
-        },
-        {
-          value: "primary",
-          label: "主要",
-        },
-        {
-          value: "success",
-          label: "成功",
-        },
-        {
-          value: "info",
-          label: "信息",
-        },
-        {
-          value: "warning",
-          label: "警告",
-        },
-        {
-          value: "danger",
-          label: "危险",
-        },
-      ],
-      cssClassOptions: [
-        {
-          value: "text-primary",
-          label: "primary",
-        },
-        {
-          value: "text-navy",
-          label: "text-navy",
-        },
-        {
-          value: "text-success",
-          label: "成功",
-        },
-        {
-          value: "text-info",
-          label: "信息",
-        },
-        {
-          value: "text-warning",
-          label: "警告",
-        },
-        {
-          value: "text-danger",
-          label: "危险",
-        },
-        {
-          value: "text-orange",
-          label: "橘红色",
-        },
-        {
-          value: "text-hotpink",
-          label: "粉红色",
-        },
-        {
-          value: "text-green",
-          label: "绿色",
-        },
-        {
-          value: "text-greenyellow",
-          label: "黄绿色",
-        },
-      ],
-      // 状态数据字典
-      statusOptions: [],
-      // 类型数据字典
-      typeOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dictName: undefined,
-        dictType: undefined,
-        status: undefined,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        dictLabel: [
-          { required: true, message: "数据标签不能为空", trigger: "blur" },
-        ],
-        dictValue: [
-          { required: true, message: "数据键值不能为空", trigger: "blur" },
-        ],
-        dictSort: [
-          { required: true, message: "数据顺序不能为空", trigger: "blur" },
-        ],
-      },
-    };
+  {
+    immediate: true,
+    deep: true,
   },
-  created() {
-    // const dictId = this.$route.params && this.$route.params.dictId;
+)
+
+const ids = ref()
+const loading = ref(false)
+// 总条数
+const total = ref(0)
+// 字典表格数据
+const dataList = ref([])
+// 默认字典类型
+const defaultDictType = ref('')
+// 弹出层标题
+const title = ref('')
+// 是否显示弹出层
+const open = ref(false)
+// 数据标签回显样式
+const listClassOptions = ref([
+  {
+    value: 'default',
+    label: '默认',
   },
-  mounted() {},
-  methods: {
-    /** 查询字典类型详细 */
-    getType(dictId) {
-      getType(dictId).then((response) => {
-        this.queryParams.dictType = response.data.dictType;
-        this.defaultDictType = response.data.dictType;
-        this.getList();
-      });
-    },
-    /** 查询字典类型列表 */
-    getTypeList() {
-      listType().then((response) => {
-        this.typeOptions = response.data.result;
-      });
-    },
-    /** 查询字典数据列表 */
-    getList() {
-      this.loading = true;
-      listData(this.queryParams).then((response) => {
-        this.dataList = response.data.result;
-        this.total = response.data.totalNum;
-        this.loading = false;
-      });
-    },
-    // 数据状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        dictCode: undefined,
-        dictLabel: undefined,
-        dictValue: undefined,
-        dictSort: 0,
-        status: "0",
-        remark: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.queryParams.dictType = this.defaultDictType;
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加字典数据";
-      this.form.dictType = this.queryParams.dictType;
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.dictCode);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const dictCode = row.dictCode || this.ids;
-      getData(dictCode).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改字典数据";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.dictCode != undefined) {
-            updateData(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addData(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const dictCodes = row.dictCode || this.ids;
-      this.$confirm(
-        '是否确认删除字典编码为"' + dictCodes + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(function () {
-          return delData(dictCodes);
+  {
+    value: 'primary',
+    label: '主要',
+  },
+  {
+    value: 'success',
+    label: '成功',
+  },
+  {
+    value: 'info',
+    label: '信息',
+  },
+  {
+    value: 'warning',
+    label: '警告',
+  },
+  {
+    value: 'danger',
+    label: '危险',
+  },
+])
+
+const cssClassOptions = ref([
+  {
+    value: 'text-primary',
+    label: 'primary',
+  },
+  {
+    value: 'text-navy',
+    label: 'text-navy',
+  },
+  {
+    value: 'text-success',
+    label: '成功',
+  },
+  {
+    value: 'text-info',
+    label: '信息',
+  },
+  {
+    value: 'text-warning',
+    label: '警告',
+  },
+  {
+    value: 'text-danger',
+    label: '危险',
+  },
+  {
+    value: 'text-orange',
+    label: '橘红色',
+  },
+  {
+    value: 'text-hotpink',
+    label: '粉红色',
+  },
+  {
+    value: 'text-green',
+    label: '绿色',
+  },
+  {
+    value: 'text-greenyellow',
+    label: '黄绿色',
+  },
+])
+// 状态数据字典
+const statusOptions = ref([])
+// 类型数据字典
+const typeOptions = ref([])
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  dictName: undefined,
+  dictType: undefined,
+  status: undefined,
+})
+// 表单参数
+
+const formRef = ref()
+const state = reactive({
+  form: {},
+  rules: {
+    dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+    dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+    dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
+  },
+})
+
+const { form, rules } = toRefs(state)
+/** 查询字典类型详细 */
+function getTypeInfo(dictId) {
+  getType(dictId).then((response) => {
+    queryParams.dictType = response.data.dictType
+    defaultDictType.value = response.data.dictType
+    getList()
+  })
+}
+/** 查询字典类型列表 */
+function getTypeList() {
+  listType().then((response) => {
+    typeOptions.value = response.data.result
+  })
+}
+
+/** 查询字典数据列表 */
+function getList() {
+  loading.value = true
+  listData(queryParams).then((response) => {
+    dataList.value = response.data.result
+    total.value = response.data.totalNum
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+// 表单重置
+function reset() {
+  form.value = {
+    dictCode: undefined,
+    dictLabel: undefined,
+    dictValue: undefined,
+    dictSort: 0,
+    status: '0',
+    remark: undefined,
+  }
+  proxy.resetForm('formRef')
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm('queryForm')
+  queryParams.dictType = defaultDictType.value
+  handleQuery()
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = '添加字典数据'
+  form.value.dictType = queryParams.dictType
+}
+// 多选框选中数据
+// function handleSelectionChange(selection) {
+//   this.ids = selection.map((item) => item.dictCode)
+//   this.single = selection.length != 1
+//   this.multiple = !selection.length
+// }
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const dictCode = row.dictCode || ids.value
+  getData(dictCode).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改字典数据'
+  })
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.dictCode != undefined) {
+        updateData(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
         })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        });
-    },
-  },
-};
+      } else {
+        addData(form.value).then((response) => {
+          proxy.$modal.msgSuccess('新增成功')
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const dictCodes = row.dictCode || ids.value
+  proxy
+    .$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return delData(dictCodes)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
 </script>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index af4da9d..9c0a5be 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -2,10 +2,10 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="参数名称" prop="configName">
-        <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable  @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="参数键名" prop="configKey">
-        <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable  @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="系统内置" prop="configType">
         <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
@@ -13,8 +13,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="创建时间">
-        <el-date-picker v-model="dateRange" type="daterange" range-separator="-"
-          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" size="small" @click="handleQuery">搜索</el-button>
@@ -27,12 +26,10 @@
         <el-button type="primary" plain icon="plus" size="small" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']">
-          修改</el-button>
+        <el-button type="success" plain icon="edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']"> 修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">删除
-        </el-button>
+        <el-button type="danger" plain icon="delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">删除 </el-button>
       </el-col>
       <!-- <el-col :span="1.5">
         <el-button type="danger" plain icon="refresh" size="small" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
@@ -54,14 +51,13 @@
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template #default="scope">
-          <span>{{scope.row.createTime}}</span>
+          <span>{{ scope.row.createTime }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button size="small" type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button>
-          <el-button size="small" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除
-          </el-button>
+          <el-button size="small" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除 </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -70,7 +66,7 @@
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="参数名称" prop="configName">
           <el-input v-model="form.configName" placeholder="请输入参数名称" />
         </el-form-item>
@@ -82,7 +78,7 @@
         </el-form-item>
         <el-form-item label="系统内置" prop="configType">
           <el-radio-group v-model="form.configType">
-            <el-radio v-for="dict in sysYesNoOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+            <el-radio v-for="dict in sysYesNoOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -99,176 +95,153 @@
   </div>
 </template>
 
-<script>
-import {
-  listConfig,
-  getConfig,
-  delConfig,
-  addConfig,
-  updateConfig,
-  // exportConfig,
-  refreshCache,
-} from "@/api/system/config";
+<script setup name="config">
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config'
 
-export default {
-  name: "config",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 参数表格数据
-      configList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 日期范围
-      dateRange: [],
-      // 系统是否
-      sysYesNoOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        configName: undefined,
-        configKey: undefined,
-        configType: undefined,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        configName: [
-          { required: true, message: "参数名称不能为空", trigger: "blur" },
-        ],
-        configKey: [
-          { required: true, message: "参数键名不能为空", trigger: "blur" },
-        ],
-        configValue: [
-          { required: true, message: "参数键值不能为空", trigger: "blur" },
-        ],
-      },
-    };
+// 遮罩层
+const loading = ref(true)
+// 导出遮罩层
+const exportLoading = ref(false)
+// 选中数组
+const ids = ref([])
+// 非单个禁用
+const single = ref(true)
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 参数表格数据
+const configList = ref([])
+// 弹出层标题
+const title = ref('')
+// 是否显示弹出层
+const open = ref(false)
+// 日期范围
+const dateRange = ref([])
+// 系统是否
+const sysYesNoOptions = ref([])
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  configName: undefined,
+  configKey: undefined,
+  configType: undefined,
+})
+const state = reactive({
+  form: {},
+  rules: {
+    configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+    configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+    configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
   },
-  created() {
-    this.getDicts("sys_yes_no").then((response) => {
-      this.sysYesNoOptions = response.data;
-    });
-    this.getList();
-  },
-  methods: {
-    /** 查询参数列表 */
-    getList() {
-      this.loading = true;
-      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(
-        (response) => {
-          this.configList = response.data.result;
-          this.total = response.data.totalNum;
-          this.loading = false;
-        }
-      );
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        configId: undefined,
-        configName: undefined,
-        configKey: undefined,
-        configValue: undefined,
-        configType: "Y",
-        remark: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加参数";
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.configId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const configId = row.configId || this.ids;
-      getConfig(configId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改参数";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.configId != undefined) {
-            updateConfig(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addConfig(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const configIds = row.configId || this.ids;
-      this.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项？')
-        .then(function () {
-          return delConfig(configIds);
+})
+const formRef = ref()
+const { form, rules } = toRefs(state)
+const { proxy } = getCurrentInstance()
+
+/** 查询参数列表 */
+function getList() {
+  loading.value = true
+  listConfig(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
+    configList.value = response.data.result
+    total.value = response.data.totalNum
+    loading.value = false
+  })
+}
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+// 表单重置
+function reset() {
+  form.value = {
+    configId: undefined,
+    configName: undefined,
+    configKey: undefined,
+    configValue: undefined,
+    configType: 'Y',
+    remark: undefined,
+  }
+  proxy.resetForm('formRef')
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = '添加参数'
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.configId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const configId = row.configId || ids.value
+  getConfig(configId).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改参数'
+  })
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.configId != undefined) {
+        updateConfig(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
         })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
+      } else {
+        addConfig(form.value).then((response) => {
+          proxy.$modal.msgSuccess('新增成功')
+          open.value = false
+          getList()
         })
-        .catch(() => {});
-    },
-    /** 刷新缓存按钮操作 */
-    handleRefreshCache() {
-      refreshCache().then(() => {
-        this.$modal.msgSuccess("刷新成功");
-      });
-    },
-  },
-};
+      }
+    }
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const configIds = row.configId || ids.value
+  proxy
+    .$confirm('是否确认删除参数编号为"' + configIds + '"的数据项？')
+    .then(function () {
+      return delConfig(configIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
+}
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess('刷新成功')
+  })
+}
+proxy.getDicts('sys_yes_no').then((response) => {
+  sysYesNoOptions.value = response.data
+})
+getList()
 </script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 7a28fe2..4504895 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -26,8 +26,14 @@
       <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId" :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="deptList"
+      row-key="deptId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
       <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
       <el-table-column prop="leader" label="负责人" width="100"></el-table-column>
       <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
@@ -45,15 +51,14 @@
         <template #default="scope">
           <el-button type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:update']">修改</el-button>
           <el-button type="text" icon="plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
-          <el-button v-if="scope.row.parentId != 0" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除
-          </el-button>
+          <el-button v-if="scope.row.parentId != 0" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除 </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-row :gutter="20">
           <el-col :lg="24" v-if="form.parentId !== 0">
             <el-form-item label="上级部门" prop="parentId">
@@ -88,7 +93,7 @@
           <el-col :lg="12">
             <el-form-item label="部门状态">
               <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -100,193 +105,168 @@
           <el-button type="primary" @click="submitForm">确 定</el-button>
         </div>
       </template>
-
     </el-dialog>
   </div>
 </template>
 
-<script>
-import {
-  listDept,
-  getDept,
-  delDept,
-  addDept,
-  updateDept,
-  listDeptExcludeChild,
-} from "@/api/system/dept";
-
-export default {
-  name: "dept",
-  // components: { Treeselect },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 表格树数据
-      deptList: [],
-      // 是否展开，默认全部折叠
-      isExpandAll: false,
-      // 重新渲染表格状态
-      refreshTable: true,
-      // 部门树选项
-      deptOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 状态数据字典
-      statusOptions: [],
-      // 查询参数
-      queryParams: {
-        deptName: undefined,
-        status: undefined,
+<script setup name="dept">
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept'
+// 遮罩层
+const loading = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 表格树数据
+const deptList = ref([])
+// 是否展开，默认全部折叠
+const isExpandAll = ref(false)
+// 重新渲染表格状态
+const refreshTable = ref(true)
+// 部门树选项
+const deptOptions = ref([])
+// 弹出层标题
+const title = ref('')
+// 是否显示弹出层
+const open = ref(false)
+// 状态数据字典
+const statusOptions = ref([])
+// 查询参数
+const queryParams = reactive({
+  deptName: undefined,
+  status: undefined,
+})
+const state = reactive({
+  // 表单参数
+  form: {},
+  // 表单校验
+  rules: {
+    parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+    deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+    orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+    email: [
+      {
+        type: 'email',
+        message: '请输入正确的邮箱地址',
+        trigger: ['blur', 'change'],
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        parentId: [
-          { required: true, message: "上级部门不能为空", trigger: "blur" },
-        ],
-        deptName: [
-          { required: true, message: "部门名称不能为空", trigger: "blur" },
-        ],
-        orderNum: [
-          { required: true, message: "显示排序不能为空", trigger: "blur" },
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"],
-          },
-        ],
-        phone: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur",
-          },
-        ],
+    ],
+    phone: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: '请输入正确的手机号码',
+        trigger: 'blur',
       },
-    };
+    ],
   },
-  created() {
-    this.getList();
-    this.getDicts("sys_normal_disable").then((response) => {
-      this.statusOptions = response.data;
-    });
-  },
-  methods: {
-    /** 查询部门列表 */
-    getList() {
-      this.loading = true;
-      listDept(this.queryParams).then((response) => {
-        this.deptList = this.handleTree(response.data, "deptId");
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        deptId: undefined,
-        parentId: undefined,
-        deptName: undefined,
-        orderNum: undefined,
-        leader: undefined,
-        phone: undefined,
-        email: undefined,
-        status: "0",
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      if (row != undefined) {
-        this.form.parentId = row.deptId;
-      }
-      this.open = true;
-      this.title = "添加部门";
-      listDept().then((response) => {
-        this.deptOptions = this.handleTree(response.data, "deptId");
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      getDept(row.deptId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改部门";
-      });
-      listDeptExcludeChild(row.deptId).then((response) => {
-        this.deptOptions = this.handleTree(response.data, "deptId");
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.deptId != undefined) {
-            updateDept(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addDept(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$confirm(
-        '是否确认删除名称为"' + row.deptName + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(function () {
-          return delDept(row.deptId);
+})
+const formRef = ref()
+const { form, rules } = toRefs(state)
+const { proxy } = getCurrentInstance()
+/** 查询部门列表 */
+function getList() {
+  loading.value = true
+  listDept(queryParams).then((response) => {
+    deptList.value = proxy.handleTree(response.data, 'deptId')
+    loading.value = false
+  })
+}
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+// 表单重置
+function reset() {
+  form.value = {
+    deptId: undefined,
+    parentId: undefined,
+    deptName: undefined,
+    orderNum: undefined,
+    leader: undefined,
+    phone: undefined,
+    email: undefined,
+    status: '0',
+  }
+  proxy.resetForm('formRef')
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  if (row != undefined) {
+    form.value.parentId = row.deptId
+  }
+  open.value = true
+  title.value = '添加部门'
+  listDept().then((response) => {
+    deptOptions.value = proxy.handleTree(response.data, 'deptId')
+  })
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  getDept(row.deptId).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改部门'
+  })
+  listDeptExcludeChild(row.deptId).then((response) => {
+    deptOptions.value = proxy.handleTree(response.data, 'deptId')
+  })
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.deptId != undefined) {
+        updateDept(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
         })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        });
-    },
-    //展开/折叠操作
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
-    },
-  },
-};
+      } else {
+        addDept(form.value).then((response) => {
+          proxy.$modal.msgSuccess('新增成功')
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy
+    .$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return delDept(row.deptId)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+//展开/折叠操作
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+getList()
+proxy.getDicts('sys_normal_disable').then((response) => {
+  statusOptions.value = response.data
+})
 </script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 84f2a2a..340cb87 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -31,8 +31,7 @@
         <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改
-        </el-button>
+        <el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改 </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button>
@@ -43,9 +42,9 @@
       <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table :data="typeList" border @selection-change="handleSelectionChange">
+    <el-table :data="typeList" v-loading="loading" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典编号" align="center" prop="dictId" width="80" />
+      <el-table-column label="字典编号" align="center" prop="dictId" width="100" sortable/>
       <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
         <template #default="scope">
           <el-button type="text" @click="showDictData(scope.row)">{{ scope.row.dictType }}</el-button>
@@ -75,7 +74,7 @@
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称" />
         </el-form-item>
@@ -84,12 +83,12 @@
         </el-form-item>
         <el-form-item label="字典状态" prop="status">
           <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+            <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="系统内置" prop="type">
           <el-radio-group v-model="form.type">
-            <el-radio v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+            <el-radio v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -102,215 +101,189 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
-
     </el-dialog>
 
     <el-dialog v-model="dictDataVisible" width="60%" :lock-scroll="false">
       <dict-data v-model:dictId="dictId"></dict-data>
     </el-dialog>
-
   </div>
 </template>
 
-<script>
-import dictData from "@/views/components/dictData";
+<script setup name="dict">
+import dictData from '@/views/components/dictData'
+import { listType, getType, delType, addType, updateType, exportType } from '@/api/system/dict/type'
+import { getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+// 遮罩层
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非单个禁用
+const single = ref(true)
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 字典表格数据
+const typeList = ref([])
+// 弹出层标题
+const title = ref('')
+// 是否显示弹出层
+const open = ref(false)
+// 字典弹出层
+const dictDataVisible = ref(false)
+// 状态数据字典
+const statusOptions = ref([])
+// 是否内置
+const typeOptions = ref([])
+// 日期范围
+const dateRange = ref([])
+// 查询参数
 
-import {
-  listType,
-  getType,
-  delType,
-  addType,
-  updateType,
-  exportType,
-} from "@/api/system/dict/type";
-export default {
-  name: "dict",
-  components: { dictData },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 字典表格数据
-      typeList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 字典弹出层
-      dictDataVisible: false,
-      // 状态数据字典
-      statusOptions: [],
-      // 是否内置
-      typeOptions: [],
-      // 日期范围
-      dateRange: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dictName: undefined,
-        dictType: undefined,
-        status: undefined,
-      },
-      // 字典Id传值给子组件
-      dictId: 0,
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        dictName: [
-          { required: true, message: "字典名称不能为空", trigger: "blur" },
-        ],
-        dictType: [
-          { required: true, message: "字典类型不能为空", trigger: "blur" },
-        ],
-      },
-    };
+const formRef = ref()
+// 字典Id传值给子组件
+const dictId = ref(0)
+
+const state = reactive({
+  rules: {
+    dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+    dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
   },
-  created() {
-    this.getList();
-    this.getDicts("sys_normal_disable").then((response) => {
-      this.statusOptions = response.data;
-    });
-    this.getDicts("sys_yes_no").then((response) => {
-      this.typeOptions = response.data;
-    });
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: undefined,
+    dictType: undefined,
+    status: undefined,
   },
-  methods: {
-    /** 查询字典类型列表 */
-    getList() {
-      this.loading = true;
-      listType(this.addDateRange(this.queryParams, this.dateRange)).then(
-        (response) => {
-          this.typeList = response.data.result;
-          this.total = response.data.totalNum;
-          this.loading = false;
-        }
-      );
-    },
-    // 字典状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        dictId: undefined,
-        dictName: undefined,
-        dictType: undefined,
-        status: "0",
-        type: "N",
-        remark: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加字典类型";
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.dictId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const dictId = row.dictId || this.ids;
-      getType(dictId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改字典类型";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.dictId != undefined) {
-            updateType(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addType(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const dictIds = row.dictId || this.ids;
-      this.$confirm(
-        '是否确认删除字典编号为"' + dictIds + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(function () {
-          return delType(dictIds);
+})
+const { rules, form, queryParams } = toRefs(state)
+
+/** 查询字典类型列表 */
+function getList() {
+  loading.value = true
+  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
+    typeList.value = response.data.result
+    total.value = response.data.totalNum
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+// 表单重置
+function reset() {
+  form.value = {
+    dictId: undefined,
+    dictName: undefined,
+    dictType: undefined,
+    status: '0',
+    type: 'N',
+    remark: undefined,
+  }
+  proxy.resetForm('formRef')
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = '添加字典类型'
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.dictId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const dictId = row.dictId || ids.value
+  getType(dictId).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改字典类型'
+  })
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.dictId != undefined) {
+        updateType(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
         })
-        .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有类型数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportType(queryParams);
+      } else {
+        addType(form.value).then((response) => {
+          proxy.$modal.msgSuccess('新增成功')
+          open.value = false
+          getList()
         })
-        .then((response) => {
-          this.download(response.data.path);
-        });
-    },
-    showDictData(row) {
-      this.dictId = row.dictId;
-      this.dictDataVisible = true;
-    },
-  },
-};
+      }
+    }
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const dictIds = row.dictId || ids.value
+  proxy
+    .$confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return delType(dictIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有类型数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return exportType(queryParams.value)
+    })
+    .then((response) => {
+      proxy.download(response.data.path)
+    })
+}
+function showDictData(row) {
+  dictId.value = row.dictId
+  dictDataVisible.value = true
+}
+
+getList()
+proxy.getDicts('sys_normal_disable').then((response) => {
+  statusOptions.value = response.data
+})
+proxy.getDicts('sys_yes_no').then((response) => {
+  typeOptions.value = response.data
+})
 </script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index fdbd5b2..948ab78 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -25,8 +25,15 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" border
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="menuList"
+      row-key="menuId"
+      :default-expand-all="isExpandAll"
+      border
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
       <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
         <template #default="scope">
@@ -41,7 +48,7 @@
           <el-tag type="warning" v-else-if="scope.row.menuType == 'F'">按钮</el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column>
       <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="visible" label="显示" width="70">
@@ -74,8 +81,19 @@
         <el-row>
           <el-col :lg="24">
             <el-form-item label="上级菜单">
-              <tree-select v-model:value="form.parentId" :options="menuOptions" :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
-                placeholder="选择上级菜单" />
+              <el-cascader
+                class="w100"
+                :options="menuOptions"
+                :props="{ checkStrictly: true, value: 'menuId', label: 'menuName', emitPath: false }"
+                placeholder="请选择上级菜单"
+                clearable
+                v-model="form.parentId"
+              >
+                <template #default="{ node, data }">
+                  <span>{{ data.menuName }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
             </el-form-item>
           </el-col>
           <el-col :lg="24">
@@ -146,7 +164,6 @@
           <el-col :lg="12" v-if="form.menuType == 'C'">
             <el-form-item prop="component">
               <template #label>
-
                 <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
@@ -170,7 +187,7 @@
               </template>
             </el-form-item>
           </el-col>
-          <el-col :lg="12" v-if="form.menuType == 'C'">
+          <!-- <el-col :lg="12" v-if="form.menuType == 'C'">
             <el-form-item>
               <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
               <template #label>
@@ -182,11 +199,10 @@
                 路由参数
               </template>
             </el-form-item>
-          </el-col>
+          </el-col> -->
           <el-col :lg="12" v-if="form.menuType == 'C'">
-            <el-form-item>
+            <el-form-item prop="isCache">
               <template #label>
-
                 <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
@@ -201,9 +217,8 @@
             </el-form-item>
           </el-col>
           <el-col :lg="12" v-if="form.menuType != 'F'">
-            <el-form-item>
+            <el-form-item prop="visible">
               <template #label>
-
                 <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
@@ -243,14 +258,8 @@
   </div>
 </template>
 
-<script setup name="menu">
-import {
-  addMenu,
-  delMenu,
-  getMenu,
-  listMenu,
-  updateMenu,
-} from '@/api/system/menu'
+<script setup name="sysmenu">
+import { addMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu'
 import SvgIcon from '@/components/SvgIcon'
 import IconSelect from '@/components/IconSelect'
 
@@ -287,13 +296,10 @@ const data = reactive({
     visible: undefined,
   },
   rules: {
-    menuName: [
-      { required: true, message: '菜单名称不能为空', trigger: 'blur' },
-    ],
-    orderNum: [
-      { required: true, message: '菜单顺序不能为空', trigger: 'blur' },
-    ],
+    menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+    orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
     path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
+    visible: [{ required: true, message: '显示状态不能为空', trigger: 'blur' }],
   },
 })
 
@@ -303,16 +309,16 @@ const { queryParams, form, rules } = toRefs(data)
 function getList() {
   loading.value = true
   listMenu(queryParams.value).then((response) => {
-    menuList.value = response.data // proxy.handleTree(response.data, "menuId");
+    menuList.value = response.data
     loading.value = false
   })
 }
 /** 查询菜单下拉树结构 */
-async function getTreeselect() {
-  menuOptions.value = []
-  await listMenu().then((response) => {
-    const menu = { menuId: 0, menuName: '主类目', children: [] }
-    //menu.children = proxy.handleTree(response.data, "menuId");
+function getTreeselect() {
+  listMenu().then((response) => {
+    menuOptions.value = []
+    const menu = { menuId: 0, menuName: '根菜单', children: [] }
+
     menu.children = response.data
     menuOptions.value.push(menu)
   })
@@ -325,7 +331,7 @@ function cancel() {
 /** 表单重置 */
 function reset() {
   form.value = {
-    menuId: undefined,
+    menuId: 0,
     parentId: 0,
     menuName: undefined,
     icon: undefined,
@@ -358,10 +364,10 @@ function resetQuery() {
   handleQuery()
 }
 /** 新增按钮操作 */
-async function handleAdd(row) {
+function handleAdd(row) {
   reset()
-  await getTreeselect()
-  if (row != null && row.menuId) {
+  getTreeselect()
+  if (row != null && row.menuId != undefined) {
     form.value.parentId = row.menuId
   } else {
     form.value.parentId = 0
@@ -380,7 +386,7 @@ function toggleExpandAll() {
 /** 修改按钮操作 */
 async function handleUpdate(row) {
   reset()
-  await getTreeselect()
+  getTreeselect()
   getMenu(row.menuId).then((response) => {
     form.value = response.data
     open.value = true
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index b43d42a..83bcf70 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -81,7 +81,7 @@
           <el-col :span="24">
             <el-form-item label="状态">
               <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -104,14 +104,9 @@
 
 <script setup name="notice">
 // 富文本组件
-import Editor from "@/components/Editor";
-import {
-  listNotice,
-  getNotice,
-  delNotice,
-  addNotice,
-  updateNotice,
-} from '@/api/system/notice'
+import Editor from '@/components/Editor'
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice'
+import { getCurrentInstance } from 'vue';
 
 const { proxy } = getCurrentInstance()
 const noticeList = ref([])
@@ -123,6 +118,7 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
+const noticeRef = ref()
 
 const data = reactive({
   form: {},
@@ -134,12 +130,8 @@ const data = reactive({
     status: undefined,
   },
   rules: {
-    noticeTitle: [
-      { required: true, message: '公告标题不能为空', trigger: 'blur' },
-    ],
-    noticeType: [
-      { required: true, message: '公告类型不能为空', trigger: 'change' },
-    ],
+    noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
+    noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }],
   },
 })
 const statusOptions = ref([])
@@ -213,7 +205,6 @@ function handleUpdate(row) {
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs['noticeRef'].validate((valid) => {
-		console.log(valid)
     if (valid) {
       if (form.value.noticeId != undefined) {
         updateNotice(form.value).then((response) => {
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 78efe51..db481ac 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -22,7 +22,7 @@
       <el-col :span="1.5">
         <el-button type="primary" plain icon="plus" size="small" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
       </el-col>
-      <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="roleList" highlight-current-row @selection-change="handleSelectionChange">
@@ -33,8 +33,7 @@
       <el-table-column label="权限范围" prop="dataScope" :formatter="dataScopeFormat"></el-table-column>
       <el-table-column label="状态" align="center" width="90">
         <template #default="scope">
-          <el-switch v-model="scope.row.status" :disabled="scope.row.roleKey == 'admin'" active-value="0" inactive-value="1"
-            @change="handleStatusChange(scope.row)"></el-switch>
+          <el-switch v-model="scope.row.status" :disabled="scope.row.roleKey == 'admin'" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="用户个数" align="center" prop="userNum" width="90" />
@@ -43,13 +42,10 @@
       <el-table-column label="操作" align="center" width="200">
         <template #default="scope">
           <div v-if="scope.row.roleKey != 'admin'">
-            <el-button size="small" type="text" icon="edit" @click.stop="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">修改
-            </el-button>
-            <el-button size="small" type="text" icon="delete" @click.stop="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除
-            </el-button>
+            <el-button size="small" type="text" icon="edit" @click.stop="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">修改 </el-button>
+            <el-button size="small" type="text" icon="delete" @click.stop="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除 </el-button>
 
-            <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)"
-              v-hasPermi="['system:role:edit', 'system:role:authorize', 'system:roleusers:list']">
+            <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit', 'system:role:authorize', 'system:roleusers:list']">
               <span class="el-dropdown-link">
                 更多
                 <el-icon class="el-icon--right">
@@ -76,14 +72,23 @@
           <el-input placeholder="请输入关键字进行过滤" v-model="searchText"></el-input>
         </el-form-item>
         <el-form-item label="权限字符">
-          {{form.roleKey}}
+          {{ form.roleKey }}
         </el-form-item>
         <el-form-item label="数据权限">
           <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
           <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
           <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly"
-            empty-text="加载中，请稍后" :filter-node-method="menuFilterNode" :props="defaultProps"></el-tree>
+          <el-tree
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            ref="menuRef"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍后"
+            :filter-node-method="menuFilterNode"
+            :props="defaultProps"
+          ></el-tree>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -96,7 +101,7 @@
 
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :lg="12">
             <el-form-item label="角色名称" prop="roleName">
@@ -132,8 +137,17 @@
               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-              <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="dept" node-key="id"
-                :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
+              <el-tree
+                class="tree-border"
+                :data="deptOptions"
+                show-checkbox
+                default-expand-all
+                ref="deptRef"
+                node-key="id"
+                :check-strictly="!form.deptCheckStrictly"
+                empty-text="加载中，请稍候"
+                :props="defaultProps"
+              ></el-tree>
             </el-form-item>
           </el-col>
           <el-col :lg="24">
@@ -150,453 +164,427 @@
         </div>
       </template>
     </el-dialog>
-
   </div>
 </template>
 
-<script>
-import {
-  listRole,
-  getRole,
-  delRole,
-  addRole,
-  updateRole,
-  exportRole,
-  dataScope,
-  changeRoleStatus,
-} from '@/api/system/role'
-import {
-  treeselect as menuTreeselect,
-  roleMenuTreeselect,
-} from '@/api/system/menu'
-import {
-  treeselect as deptTreeselect,
-  roleDeptTreeselect,
-} from '@/api/system/dept'
+<script setup name="role">
+import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from '@/api/system/role'
+import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
+import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
 
-export default {
-  name: 'role',
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 表格高度
-      tableHeight: window.innerHeight,
-      // 总条数
-      total: 0,
-      // 角色表格数据
-      roleList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
-      menuExpand: true,
-      menuNodeAll: false,
-      deptExpand: true,
-      deptNodeAll: false,
-      // 日期范围
-      dateRange: [],
-      // 状态数据字典
-      statusOptions: [],
-      // 是否显示下拉菜单分配
-      showRoleScope: false,
-      // 数据范围选项
-      dataScopeOptions: [
-        {
-          dictValue: '1',
-          dictLabel: '全部',
-        },
-        {
-          dictValue: '2',
-          dictLabel: '自定义',
-        },
-        {
-          dictValue: '3',
-          dictLabel: '本部门',
-        },
-        {
-          dictValue: "4",
-          dictLabel: "本部门及以下数据权限",
-        },
-        {
-          dictValue: '5',
-          dictLabel: '仅本人',
-        },
-      ],
-      // 菜单列表
-      menuOptions: [],
-      // 部门列表
-      deptOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        roleName: undefined,
-        roleKey: undefined,
-        status: undefined,
-      },
-      searchText: '',
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-      // 表单校验
-      rules: {
-        roleName: [
-          { required: true, message: '角色名称不能为空', trigger: 'blur' },
-        ],
-        roleKey: [
-          { required: true, message: '权限字符不能为空', trigger: 'blur' },
-        ],
-        roleSort: [
-          { required: true, message: '角色顺序不能为空', trigger: 'blur' },
-        ],
-      },
-    }
+const { proxy } = getCurrentInstance()
+
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非单个禁用
+const single = ref(true)
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 角色表格数据
+const roleList = ref([])
+// 弹出层标题
+const title = ref('')
+// 是否显示弹出层
+const open = ref(false)
+const menuExpand = ref(true)
+const menuNodeAll = ref(false)
+const deptExpand = ref(true)
+const deptNodeAll = ref(false)
+// 日期范围
+const dateRange = ref([])
+// 状态数据字典
+const statusOptions = ref([])
+// 是否显示下拉菜单分配
+const showRoleScope = ref(false)
+// 数据范围选项
+const dataScopeOptions = ref([
+  {
+    dictValue: '1',
+    dictLabel: '全部',
   },
-  watch: {
-    searchText(val) {
-      this.$refs.menu.filter(val)
-    },
+  {
+    dictValue: '2',
+    dictLabel: '自定义',
   },
-  created() {
-    this.getList()
-    this.getDicts('sys_normal_disable').then((response) => {
-      this.statusOptions = response.data
+  {
+    dictValue: '3',
+    dictLabel: '本部门',
+  },
+  {
+    dictValue: '4',
+    dictLabel: '本部门及以下',
+  },
+  {
+    dictValue: '5',
+    dictLabel: '仅本人',
+  },
+])
+// 菜单列表
+const menuOptions = ref([])
+// 部门列表
+const deptOptions = ref([])
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleName: undefined,
+  roleKey: undefined,
+  status: undefined,
+})
+const searchText = ref('')
+
+const state = reactive({
+  form: {},
+  rules: {
+    roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
+    roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }],
+  },
+  defaultProps: {
+    children: 'children',
+    label: 'label',
+  },
+})
+const menuRef = ref()
+const deptRef = ref()
+const formRef = ref()
+const { form, rules, defaultProps } = toRefs(state)
+
+watch(searchText, (val) => {
+  proxy.$refs.menuRef.filter(val)
+})
+
+/** 查询角色列表 */
+function getList() {
+  loading.value = true
+
+  listRole(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
+    roleList.value = response.data.result
+    total.value = response.data.totalNum
+    loading.value = false
+  })
+}
+
+/** 查询菜单树结构 */
+// function getMenuTreeselect() {
+//   menuTreeselect().then((response) => {
+//     menuOptions.value = response.data
+//   })
+// }
+
+/** 查询部门树结构 */
+function getDeptTreeselect() {
+  deptTreeselect().then((response) => {
+    deptOptions.value = response.data
+  })
+}
+// 所有菜单节点数据
+function getMenuAllCheckedKeys() {
+  // 目前被选中的菜单节点
+  const checkedKeys = proxy.$refs.menuRef.getCheckedKeys()
+  // 半选中的菜单节点
+  const halfCheckedKeys = proxy.$refs.menuRef.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+// 所有部门节点数据
+function getDeptAllCheckedKeys() {
+  // 目前被选中的部门节点
+  const checkedKeys = proxy.$refs.deptRef.getCheckedKeys()
+  // 半选中的部门节点
+  const halfCheckedKeys = proxy.$refs.deptRef.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+/** 根据角色ID查询菜单树结构 */
+function getRoleMenuTreeselect(roleId) {
+  return roleMenuTreeselect(roleId).then((response) => {
+    menuOptions.value = response.data.menus
+    return response
+  })
+}
+/** 根据角色ID查询部门树结构 */
+function getRoleDeptTreeselect(roleId) {
+  return roleDeptTreeselect(roleId).then((response) => {
+    deptOptions.value = response.data.depts
+    return response
+  })
+}
+// 角色状态修改
+function handleStatusChange(row) {
+  const text = row.status === '0' ? '启用' : '停用'
+
+  proxy
+    .$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
     })
-  },
-  methods: {
-    /** 查询角色列表 */
-    getList() {
-      this.loading = true
+    .then(function () {
+      return changeRoleStatus(row.roleId, row.status)
+    })
+    .then(() => {
+      proxy.$modal.msgSuccess(text + '成功')
+    })
+    .catch(function () {
+      row.status = row.status === '0' ? '1' : '0'
+    })
+}
+// 取消按钮
+function cancel() {
+  open.value = false
+  showRoleScope.value = false
+  reset()
+}
+// 表单重置
+function reset() {
+  if (proxy.$refs.menuRef != undefined) {
+    proxy.$refs.menuRef.setCheckedKeys([])
+  }
+  ;(menuExpand.value = false),
+    (menuNodeAll.value = false),
+    (deptExpand.value = true),
+    (deptNodeAll.value = false),
+    (form.value = {
+      roleId: undefined,
+      roleName: undefined,
+      roleKey: undefined,
+      roleSort: 99,
+      status: '0',
+      menuIds: [],
+      deptIds: [],
+      dataScope: '1',
+      menuCheckStrictly: true,
+      deptCheckStrictly: true,
+      remark: undefined,
+    })
+  proxy.resetForm('form')
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.roleId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+// 更多操作触发
+function handleCommand(command, row) {
+  switch (command) {
+    case 'handleDataScope':
+      handleDataScope(row)
+      break
+    case 'handleAuthUser':
+      handleAuthUser(row)
+      break
+    default:
+      break
+  }
+}
+// 树权限（展开/折叠）
+function handleCheckedTreeExpand(value, type) {
+  if (type == 'menu') {
+    const treeList = menuOptions.value
+    for (let i = 0; i < treeList.length; i++) {
+      proxy.$refs.menuRef.store.nodesMap[treeList[i].id].expanded = value
+    }
+  } else if (type == 'dept') {
+    const treeList = deptOptions.value
+    for (let i = 0; i < treeList.length; i++) {
+      proxy.$refs.deptRef.store.nodesMap[treeList[i].id].expanded = value
+    }
+  }
+}
 
-      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
-        (response) => {
-          this.roleList = response.data.result
-          this.total = response.data.totalNum
-          this.loading = false
-        }
-      )
-    },
-    /** 查询菜单树结构 */
-    getMenuTreeselect() {
-      menuTreeselect().then((response) => {
-        this.menuOptions = response.data
-      })
-    },
-    /** 查询部门树结构 */
-    getDeptTreeselect() {
-      deptTreeselect().then((response) => {
-        this.deptOptions = response.data
-      })
-    },
-    // 所有菜单节点数据
-    getMenuAllCheckedKeys() {
-      // 目前被选中的菜单节点
-      const checkedKeys = this.$refs.menu.getCheckedKeys()
-      // 半选中的菜单节点
-      const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
-      return checkedKeys
-    },
-    // 所有部门节点数据
-    getDeptAllCheckedKeys() {
-      // 目前被选中的部门节点
-      const checkedKeys = this.$refs.dept.getCheckedKeys()
-      // 半选中的部门节点
-      const halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
-      return checkedKeys
-    },
-    /** 根据角色ID查询菜单树结构 */
-    getRoleMenuTreeselect(roleId) {
-      return roleMenuTreeselect(roleId).then((response) => {
-        this.menuOptions = response.data.menus
-        return response
-      })
-    },
-    /** 根据角色ID查询部门树结构 */
-    getRoleDeptTreeselect(roleId) {
-      return roleDeptTreeselect(roleId).then((response) => {
-        console.log('角色', response)
-        this.deptOptions = response.data.depts
-        return response
-      })
-    },
-    // 角色状态修改
-    handleStatusChange(row) {
-      const text = row.status === '0' ? '启用' : '停用'
+// 树权限（全选/全不选）
+function handleCheckedTreeNodeAll(value, type) {
+  if (type == 'menu') {
+    proxy.$refs.menuRef.setCheckedNodes(value ? menuOptions.value : [])
+  } else if (type == 'dept') {
+    proxy.$refs.deptRef.setCheckedNodes(value ? deptOptions.value : [])
+  }
+}
 
-      this.$confirm(
-        '确认要"' + text + '""' + row.roleName + '"角色吗?',
-        '警告',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        }
-      )
-        .then(function () {
-          return changeRoleStatus(row.roleId, row.status)
-        })
-        .then(() => {
-          this.$modal.msgSuccess(text + '成功')
-        })
-        .catch(function () {
-          row.status = row.status === '0' ? '1' : '0'
-        })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.showRoleScope = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      if (this.$refs.menu != undefined) {
-        this.$refs.menu.setCheckedKeys([])
-      }
-      ;(this.menuExpand = false),
-        (this.menuNodeAll = false),
-        (this.deptExpand = true),
-        (this.deptNodeAll = false),
-        (this.form = {
-          roleId: undefined,
-          roleName: undefined,
-          roleKey: undefined,
-          roleSort: 99,
-          status: '0',
-          menuIds: [],
-          deptIds: [],
-          dataScope: '1',
-          menuCheckStrictly: true,
-          deptCheckStrictly: true,
-          remark: undefined,
-        })
-      this.resetForm('form')
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = []
-      this.resetForm('queryForm')
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.roleId)
-      this.single = selection.length != 1
-      this.multiple = !selection.length
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case 'handleDataScope':
-          this.handleDataScope(row)
-          break
-        case 'handleAuthUser':
-          this.handleAuthUser(row)
-          break
-        default:
-          break
-      }
-    },
-    // 树权限（展开/折叠）
-    handleCheckedTreeExpand(value, type) {
-      if (type == 'menu') {
-        const treeList = this.menuOptions
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
-        }
-      } else if (type == 'dept') {
-        const treeList = this.deptOptions
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
-        }
-      }
-    },
-    // 树权限（全选/全不选）
-    handleCheckedTreeNodeAll(value, type) {
-      if (type == 'menu') {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
-      } else if (type == 'dept') {
-        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
-      }
-    },
-    // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
-      if (type == 'menu') {
-        this.form.menuCheckStrictly = !!value
-      } else if (type == 'dept') {
-        this.form.deptCheckStrictly = !!value
-      }
-    },
-    // 菜单筛选
-    menuFilterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.getDeptTreeselect()
-      this.open = true
-      this.title = '添加角色'
-      this.showRoleScope = false
-    },
-    /** 修改按钮操作 ok */
-    handleUpdate(row) {
-      this.reset()
-      this.showRoleScope = false
-      const roleId = row.roleId || this.ids
-      const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
-      getRole(roleId).then((response) => {
-        this.form = response.data
-        this.open = true
-        this.title = '修改角色'
+// 树权限（父子联动）
+function handleCheckedTreeConnect(value, type) {
+  if (type == 'menu') {
+    form.value.menuCheckStrictly = !!value
+  } else if (type == 'dept') {
+    form.value.deptCheckStrictly = !!value
+  }
+}
 
-        this.$nextTick(() => {
-          roleDeptTreeselect.then((res) => {
-            this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
-          })
-        })
-      })
-    },
-    /** 选择角色权限范围触发 */
-    dataScopeSelectChange(value) {
-      if (value !== '2') {
-        this.$refs.dept.setCheckedKeys([])
-      }
-    },
-    // 数据权限
-    dataScopeFormat(row, column) {
-      return this.selectDictLabel(this.dataScopeOptions, row.dataScope)
-    },
-    /** 分配角色权限按钮操作 */
-    // 新增 和上面代码基本相同
-    handleDataScope(row) {
-      if (row.roleId == 1) {
-        this.showRoleScope = false
-        return
-      }
-      this.reset()
-      this.showRoleScope = true
-      const roleId = row.roleId || this.ids
-      const roleMenu = this.getRoleMenuTreeselect(roleId)
+// 菜单筛选
+function menuFilterNode(value, data) {
+  if (!value) return true
+  return data.label.indexOf(value) !== -1
+}
 
-      roleMenu.then((res) => {
-        const checkedKeys = res.data.checkedKeys
-        checkedKeys.forEach((v) => {
-          this.$nextTick(() => {
-            this.$refs.menu.setChecked(v, true, false)
-          })
-        })
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  getDeptTreeselect()
+  open.value = true
+  title.value = '添加角色'
+  showRoleScope.value = false
+}
+
+/** 修改按钮操作 ok */
+function handleUpdate(row) {
+  reset()
+  showRoleScope.value = false
+  const roleId = row.roleId || ids.value
+  const roleDeptTreeselect = getRoleDeptTreeselect(row.roleId)
+  getRole(roleId).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改角色'
+
+    nextTick(() => {
+      roleDeptTreeselect.then((res) => {
+        proxy.$refs.deptRef.setCheckedKeys(res.data.checkedKeys)
       })
-      this.form = {
-        roleId: row.roleId,
-        roleName: row.roleName,
-        roleKey: row.roleKey,
-        menuCheckStrictly: row.menuCheckStrictly,
-      }
-    },
-    /** 分配用户操作 */
-    handleAuthUser: function (row) {
-      const roleId = row.roleId
-      this.$router.push({ path: '/system/roleusers', query: { roleId } })
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          if (this.form.roleId != undefined && this.form.roleId > 0) {
-            this.form.type = 'edit'
-            this.form.deptIds = this.getDeptAllCheckedKeys()
-            updateRole(this.form).then((response) => {
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getList()
-            })
-          } else {
-            this.form.type = 'add'
-            this.form.deptIds = this.getDeptAllCheckedKeys()
-            addRole(this.form).then((response) => {
-              this.open = false
-              if (response.code == 200) {
-                this.$modal.msgSuccess('新增成功')
-                this.getList()
-              } else {
-                this.msgInfo(response.msg)
-              }
-            })
-          }
-        }
+    })
+  })
+}
+/** 选择角色权限范围触发 */
+function dataScopeSelectChange(value) {
+  if (value !== '2') {
+    proxy.$refs.deptRef.setCheckedKeys([])
+  }
+}
+// 数据权限
+function dataScopeFormat(row, column) {
+  return proxy.selectDictLabel(dataScopeOptions.value, row.dataScope)
+}
+/** 分配角色权限按钮操作 */
+// 新增 和上面代码基本相同
+function handleDataScope(row) {
+  if (row.roleId == 1) {
+    showRoleScope.value = false
+    return
+  }
+  reset()
+  showRoleScope.value = true
+  const roleId = row.roleId || ids.value
+  const roleMenu = getRoleMenuTreeselect(roleId)
+
+  roleMenu.then((res) => {
+    const checkedKeys = res.data.checkedKeys
+    checkedKeys.forEach((v) => {
+      nextTick(() => {
+        proxy.$refs.menuRef.setChecked(v, true, false)
       })
-    },
-    /** 提交按钮（菜单数据权限） */
-    submitDataScope: function () {
-      if (this.form.roleId != undefined) {
-        this.form.menuIds = this.getMenuAllCheckedKeys()
-        dataScope(this.form).then((response) => {
-          this.$modal.msgSuccess('修改成功')
-          this.getList()
-          this.cancel()
+    })
+  })
+  form.value = {
+    roleId: row.roleId,
+    roleName: row.roleName,
+    roleKey: row.roleKey,
+    menuCheckStrictly: row.menuCheckStrictly,
+  }
+}
+const router = useRouter()
+/** 分配用户操作 */
+function handleAuthUser(row) {
+  const roleId = row.roleId
+  router.push({ path: '/system/roleusers', query: { roleId } })
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.roleId != undefined && form.value.roleId > 0) {
+        form.value.type = 'edit'
+        form.value.deptIds = getDeptAllCheckedKeys()
+        updateRole(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
         })
       } else {
-        this.$modal.msgError('请选择角色')
+        form.value.type = 'add'
+        form.value.deptIds = getDeptAllCheckedKeys()
+        addRole(form.value).then((response) => {
+          open.value = false
+          if (response.code == 200) {
+            proxy.$modal.msgSuccess('新增成功')
+            getList()
+          } else {
+            proxy.$modal.msgError(response.msg)
+          }
+        })
       }
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const roleIds = row.roleId || this.ids
-      this.$confirm(
-        '是否确认删除角色编号为"' + roleIds + '"的数据项?',
-        '警告',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        }
-      )
-        .then(function () {
-          return delRole(roleIds)
-        })
-        .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('删除成功')
-        })
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams
-      this.$confirm('是否确认导出所有角色数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(function () {
-          return exportRole(queryParams)
-        })
-        .then((response) => {
-          this.download(response.data.path)
-        })
-    },
-  },
+    }
+  })
 }
+
+/** 提交按钮（菜单数据权限） */
+function submitDataScope() {
+  if (form.value.roleId != undefined) {
+    form.value.menuIds = getMenuAllCheckedKeys()
+    dataScope(form.value).then((response) => {
+      proxy.$modal.msgSuccess('修改成功')
+      getList()
+      cancel()
+    })
+  } else {
+    proxy.$modal.msgError('请选择角色')
+  }
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const roleIds = row.roleId || ids.value
+  proxy
+    .$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return delRole(roleIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有角色数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return exportRole(queryParams)
+    })
+    .then((response) => {
+      proxy.download(response.data.path)
+    })
+}
+
+getList()
+proxy.getDicts('sys_normal_disable').then((response) => {
+  statusOptions.value = response.data
+})
 </script>
 <style scoped>
 /* tree border */
@@ -616,4 +604,4 @@ export default {
 .el-dropdown {
   vertical-align: middle;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/system/roleusers/index.vue b/src/views/system/roleusers/index.vue
index 9599dbb..6276c09 100644
--- a/src/views/system/roleusers/index.vue
+++ b/src/views/system/roleusers/index.vue
@@ -1,13 +1,5 @@
 <template>
   <div class="app-container">
-
-    <!-- <el-col :span="4" :xs="24">
-      <el-table ref="roleTable" v-loading="loadingRole" highlight-current-row :data="dataRoleTable" border :height="tableHeight-135"
-        @row-click="handleRoleTableSelection">
-        <el-table-column prop="roleName" label="请选择角色名称" />
-      </el-table>
-    </el-col> -->
-
     <el-form :inline="true" @submit.prevent>
       <el-form-item label="角色名">
         <el-input v-model="roleUserQueryParams.roleName" disabled />
@@ -16,7 +8,7 @@
         <el-input v-model="roleUserQueryParams.roleKey" disabled />
       </el-form-item>
       <el-form-item label="用户名">
-        <el-input v-model="roleUserQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="el-icon-search" @keyup.enter="searchRoleUser" />
+        <el-input v-model="roleUserQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search" @keyup.enter="searchRoleUser" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" @click="searchRoleUser">搜索</el-button>
@@ -26,24 +18,21 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户
-        </el-button>
+        <el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户 </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']">
-          批量取消授权</el-button>
+        <el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']"> 批量取消授权</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="close" @click="handleClose">关闭</el-button>
       </el-col>
     </el-row>
 
-    <el-table ref="roleUserTable" v-loading="loadingRoleUser" :data="dataRoleUserTable" row-key="userId" stripe border>
+    <el-table ref="roleUserTableRef" v-loading="loading" :data="roleUserList" @selection-change="handleCancelSelectionChange" row-key="userId" stripe border>
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column prop="userId" align="center" label="用户Id" width="150" />
       <el-table-column prop="userName" align="center" label="用户名" width="150" />
       <el-table-column prop="nickName" align="center" label="用户昵称" width="150" />
-      <el-table-column prop="email" align="center" label="邮箱" />
       <el-table-column prop="status" align="center" label="账号状态" width="80">
         <template #default="scope">
           <dict-tag :options="statusOptions" :value="scope.row.status" />
@@ -52,25 +41,33 @@
       <el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" />
       <el-table-column align="center" label="操作">
         <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1"
-            v-hasPermi="['system:roleusers:del']">取消授权</el-button>
+          <el-button type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1" v-hasPermi="['system:roleusers:del']">
+            取消授权
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination v-model:total="dataRoleUserCount" v-model:page="roleUserQueryParams.pageNum" v-model:limit="roleUserQueryParams.pageSize" @pagination="getRoleUser" />
+    <pagination v-model:total="roleUserCount" v-model:page="roleUserQueryParams.pageNum" v-model:limit="roleUserQueryParams.pageSize" @pagination="getRoleUser" />
 
     <!-- 添加或修改菜单对话框 -->
     <el-dialog title="添加用户" v-model="open" append-to-body @close="cancel">
       <el-form :inline="true" @submit.prevent>
         <el-form-item>
-          <el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search"
-            @keyup.enter="handleSearchRoleUser" />
+          <el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search" @keyup.enter="handleSearchRoleUser" />
         </el-form-item>
       </el-form>
       <el-row>
         <el-col>
-          <el-table ref="userTable" v-loading="loadingUser" :data="dataUserTable" @selection-change="handleSelectionChange" row-key="userId" stripe
-            border :height="tableHeight*0.5">
+          <el-table
+            ref="userTable"
+            v-loading="loadingUser"
+            :data="dataUserTable"
+            @selection-change="handleSelectionChange"
+            row-key="userId"
+            stripe
+            border
+            :height="tableHeight * 0.5"
+          >
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column prop="userId" align="center" label="用户编号" width="150" />
             <el-table-column prop="userName" align="center" label="用户名称" width="150" />
@@ -93,203 +90,175 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup name="roleusers">
 // import { listRole } from "@/api/system/role";
-import { getRole } from "@/api/system/role";
-import {
-  getRoleUsers,
-  createRoleUsers,
-  deleteRoleUsers,
-  getExcludeUsers,
-} from "@/api/system/userRoles";
-export default {
-  name: "roleusers",
-  data() {
-    return {
-      // 遮罩层
-      loadingRole: false,
-      loadingUser: false,
-      loadingRoleUser: false,
-      // 表格高度
-      tableHeight: window.innerHeight,
-      // 角色列表
-      dataRoleTable: [],
-      // 已添加用户列表
-      dataRoleUserTable: [],
-      dataRoleUserCount: 0,
-      // 未添加用户列表
-      dataUserTable: [],
-      dataUserCount: 0,
-      // 勾选添加用户列表
-      addSelections: [],
-      // 勾选删除用户列表
-      delSelections: [],
-      // 过滤查询
-      search: "",
-      // 角色id
-      roleId: "",
-      // 是否显示弹出层
-      open: false,
-      // 角色用户查询参数
-      roleUserQueryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        roleId: undefined,
-        userName: undefined,
-        roleName: undefined,
-        roleKey: undefined,
-      },
-      userQueryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        roleId: undefined,
-        userName: undefined,
-      },
-      // 状态字典
-      statusOptions: [],
-    };
-  },
-  created() {
-    // 获取角色列表
-    // this.loadingRole = true;
-    // listRole({ pageSize: 50 }).then((response) => {
-    //   this.dataRoleTable = response.data.result;
-    //   // this.handleRoleTableSelection(this.dataRoleTable[0]);
-    //   // this.$refs.roleTable.setCurrentRow(this.dataRoleTable[0]);
-    //   this.loadingRole = false;
-    // });
-    this.getDicts("sys_normal_disable").then((response) => {
-      this.statusOptions = response.data;
-    });
-    var roleId = this.$route.query.roleId;
-    console.log(roleId);
-    if (roleId) {
-      this.roleId = roleId;
-      this.searchRoleUser();
+import { getRole } from '@/api/system/role'
+import { getRoleUsers, createRoleUsers, deleteRoleUsers, getExcludeUsers } from '@/api/system/userRoles'
 
-      getRole(roleId).then((response) => {
-        const { code, data } = response;
-        if (code == 200) {
-          this.roleUserQueryParams.roleName = data.roleName;
-          this.roleUserQueryParams.roleKey = data.roleKey;
-        }
-      });
-    } else {
-      this.msgError("请升级数据库");
+const loadingUser = ref(false)
+const loading = ref(false)
+// 表格高度
+const tableHeight = ref(window.innerHeight)
+// 已添加用户列表
+const roleUserList = ref([])
+const roleUserCount = ref(0)
+// 未添加用户列表
+const dataUserTable = ref([])
+const dataUserCount = ref(0)
+// 勾选添加用户列表
+const addSelections = ref([])
+// 勾选删除用户列表
+const delSelections = ref([])
+// 是否显示弹出层
+const open = ref(false)
+const roleUserTableRef = ref()
+// 角色用户查询参数
+const roleUserQueryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: undefined,
+  userName: undefined,
+  roleName: undefined,
+  roleKey: undefined,
+})
+const userQueryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: undefined,
+  userName: undefined,
+})
+// 状态字典
+const statusOptions = ref([])
+
+const { proxy } = getCurrentInstance()
+const route = useRoute()
+proxy.getDicts('sys_normal_disable').then((response) => {
+  statusOptions.value = response.data
+})
+const role_id = route.query.roleId
+roleUserQueryParams.roleId = role_id
+userQueryParams.roleId = role_id
+function init() {
+  searchRoleUser()
+
+  getRole(roleUserQueryParams.roleId).then((response) => {
+    const { code, data } = response
+    if (code == 200) {
+      roleUserQueryParams.roleName = data.roleName
+      roleUserQueryParams.roleKey = data.roleKey
     }
-  },
-  methods: {
-    searchRoleUser() {
-      this.roleUserQueryParams.pageNum = 1;
-      this.getRoleUser();
-    },
-    // 获取角色用户
-    getRoleUser() {
-      this.loadingRoleUser = true;
-      this.roleUserQueryParams.roleId = this.roleId;
-      getRoleUsers(this.roleUserQueryParams).then((response) => {
-        this.dataRoleUserTable = response.data.result;
-        this.dataRoleUserCount = response.data.totalNum;
-        this.loadingRoleUser = false;
-      });
-    },
-    // 返回按钮
-    handleClose() {
-      const obj = { path: "/system/role" };
-      this.$tab.closeOpenPage(obj);
-    },
-    // 批量删除角色用户
-    cancelAuthUserAll() {
-      this.delSelections = [];
-      this.$refs.roleUserTable.selection.forEach((element) => {
-        this.delSelections.push(element.userId);
-      });
-      if (this.delSelections.length === 0) {
-        this.$modal.msgError("请选择要删除的用户");
-        return;
-      }
-      this.$confirm(
-        "是否确认删除选中的 " + this.delSelections.length + " 条数据?",
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(() => {
-          deleteRoleUsers({
-            roleId: this.roleId,
-            userIds: this.delSelections,
-          }).then((response) => {
-            if (response.code === 200) {
-              this.$message({
-                message: "成功删除" + response.data + "条数据",
-                type: "success",
-              });
-              this.getRoleUser();
-            }
-          });
-        })
-        .catch(() => {});
-    },
-    // 取消授权
-    handleCancelPerm(row) {
-      this.delSelections = [];
-      this.delSelections.push(row.userId);
+  })
+}
 
+function searchRoleUser() {
+  roleUserQueryParams.pageNum = 1
+  getRoleUser()
+}
+// 获取角色用户
+function getRoleUser() {
+  loading.value = true
+  getRoleUsers(roleUserQueryParams).then((response) => {
+    roleUserList.value = response.data.result
+    roleUserCount.value = response.data.totalNum
+    loading.value = false
+  })
+}
+// 返回按钮
+function handleClose() {
+  const obj = { path: '/system/role' }
+  proxy.$tab.closeOpenPage(obj)
+}
+function handleCancelSelectionChange(selection) {
+  delSelections.value = selection.map((item) => item.userId)
+}
+// 批量删除角色用户
+function cancelAuthUserAll() {
+  if (delSelections.value.length === 0) {
+    proxy.$modal.msgError('请选择要删除的用户')
+    return
+  }
+  proxy
+    .$confirm('是否确认删除选中的 ' + delSelections.value.length + ' 条数据?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
       deleteRoleUsers({
-        roleId: this.roleId,
-        userIds: this.delSelections,
+        roleId: role_id,
+        userIds: delSelections.value,
       }).then((response) => {
         if (response.code === 200) {
-          this.$message({
-            message: "成功删除" + response.data + "条数据",
-            type: "success",
-          });
-          this.getRoleUser();
+          proxy.$message({
+            message: '成功删除' + response.data + '条数据',
+            type: 'success',
+          })
+          getRoleUser()
         }
-      });
-    },
-    // 选中角色
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.addSelections = selection.map((item) => item.userId);
-    },
-    handleSearchRoleUser() {
-      this.userQueryParams.pageNum = 1;
-      this.handleGetUserTable();
-    },
-    // 获取未添加角色列表
-    handleGetUserTable() {
-      this.open = true;
-      this.loadingUser = true;
-      this.userQueryParams.roleId = this.roleId;
-      getExcludeUsers(this.userQueryParams).then((response) => {
-        this.dataUserTable = response.data.result;
-        this.dataUserCount = response.data.totalNum;
-        this.loadingUser = false;
-      });
-    },
-    // 新增用户角色
-    handleSubmit() {
-      createRoleUsers({
-        roleId: this.roleId,
-        userIds: this.addSelections,
-      }).then((response) => {
-        if (response.code === 200) {
-          this.$message({
-            message: "成功添加" + response.data + "条数据",
-            type: "success",
-          });
-          this.getRoleUser();
-          this.open = false;
-        }
-      });
-    },
-    cancel() {
-      this.open = false;
-    },
-  },
-};
+      })
+    })
+    .catch(() => {})
+}
+// 取消授权
+function handleCancelPerm(row) {
+  delSelections.value = []
+  delSelections.value.push(row.userId)
+
+  deleteRoleUsers({
+    roleId: role_id,
+    userIds: delSelections.value,
+  }).then((response) => {
+    if (response.code === 200) {
+      proxy.$message({
+        message: '成功删除' + response.data + '条数据',
+        type: 'success',
+      })
+      getRoleUser()
+    }
+  })
+}
+// 选中角色
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  addSelections.value = selection.map((item) => item.userId)
+}
+
+function handleSearchRoleUser() {
+  userQueryParams.pageNum = 1
+  handleGetUserTable()
+}
+// 获取未添加角色列表
+function handleGetUserTable() {
+  open.value = true
+  loadingUser.value = true
+  getExcludeUsers(userQueryParams).then((response) => {
+    dataUserTable.value = response.data.result
+    dataUserCount.value = response.data.totalNum
+    loadingUser.value = false
+  })
+}
+// 新增用户角色
+function handleSubmit() {
+  if (addSelections.value.length <= 0) {
+    proxy.$modal.msgError('请选择要添加的用户')
+    return
+  }
+  createRoleUsers({
+    roleId: role_id,
+    userIds: addSelections.value,
+  }).then((response) => {
+    if (response.code === 200) {
+      proxy.$message({
+        message: '成功添加' + response.data + '条数据',
+        type: 'success',
+      })
+      getRoleUser()
+      open.value = false
+    }
+  })
+}
+function cancel() {
+  open.value = false
+}
+init()
 </script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e1da6df..13c45b1 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -7,8 +7,15 @@
           <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="el-icon-search" style="margin-bottom: 20px" />
         </div>
         <div class="head-container">
-          <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
-            :filter-node-method="filterNode" ref="deptTreeRef" default-expand-all @node-click="handleNodeClick" />
+          <el-tree
+            :data="deptOptions"
+            :props="{ label: 'label', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="deptTreeRef"
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
         </div>
       </el-col>
       <!--用户数据-->
@@ -26,8 +33,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="创建时间">
-            <el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期"
-              end-placeholder="结束日期"></el-date-picker>
+            <el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
@@ -70,12 +76,9 @@
           <el-table-column label="创建时间" align="center" prop="createTime" width="160"></el-table-column>
           <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
             <template #default="scope">
-              <el-button v-if="scope.row.userId !== 1" type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">
-              </el-button>
-              <el-button v-if="scope.row.userId !== 1" type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">
-              </el-button>
-              <el-button v-if="scope.row.userId !== 1" type="text" icon="Key" @click="handleResetPwd(scope.row)"
-                v-hasPermi="['system:user:resetPwd']"></el-button>
+              <el-button v-if="scope.row.userId !== 1" type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"> </el-button>
+              <el-button v-if="scope.row.userId !== 1" type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"> </el-button>
+              <el-button v-if="scope.row.userId !== 1" type="text" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -86,7 +89,7 @@
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
       <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
-        <el-row v-if="form.userId == undefined">
+        <el-row :gutter="20">
           <el-col :lg="12">
             <el-form-item label="用户名" prop="userName">
               <el-input :disabled="form.userId != undefined" v-model="form.userName" placeholder="请输入用户名(用于登陆)" />
@@ -97,20 +100,22 @@
               <el-input :disabled="form.userId != undefined" v-model="form.password" placeholder="请输入用户密码" type="password" />
             </el-form-item>
           </el-col>
-
           <el-col :lg="12">
             <el-form-item label="用户昵称" prop="nickName">
               <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :lg="12">
             <el-form-item label="归属部门" prop="deptId">
-              <tree-select v-model:value="form.deptId" :show-count="true" :options="deptOptions" placeholder="请选择归属部门"
-                :objMap="{ value: 'id', label: 'label', children: 'children' }" />
+              <tree-select
+                v-model:value="form.deptId"
+                :show-count="true"
+                :options="deptOptions"
+                placeholder="请选择归属部门"
+                :objMap="{ value: 'id', label: 'label', children: 'children' }"
+              />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :lg="12">
             <el-form-item label="手机号码" prop="phonenumber">
               <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
@@ -121,13 +126,11 @@
               <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :lg="12">
             <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择用户性别">
-                <el-option v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
-              </el-select>
+              <el-radio-group v-model="form.sex" placeholder="请选择用户性别">
+                <el-radio v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
+              </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :lg="12">
@@ -137,26 +140,20 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :lg="12">
+          <el-col :lg="24">
             <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择">
-                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1">
-                </el-option>
+              <el-select v-model="form.postIds" multiple placeholder="请选择" class="w100">
+                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"> </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :lg="24">
             <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择" style="width:100%" @change="selectRole($event)">
-                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1">
-                </el-option>
+              <el-select v-model="form.roleIds" multiple placeholder="请选择" style="width: 100%" @change="selectRole($event)">
+                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"> </el-option>
               </el-select>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :lg="24">
             <el-form-item label="备注">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
@@ -172,36 +169,21 @@
       </template>
     </el-dialog>
 
-    <!-- 用户导入对话框 -->
-    <!-- <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
-      <el-upload name="file" ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip text-center">
-            <div class="el-upload__tip">
-              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
-            </div>
-            <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
-          </div>
-        </template>
-      </el-upload>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitFileForm">确 定</el-button>
-          <el-button @click="upload.open = false">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog> -->
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
-      <el-upload name="file" ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <!-- <i class="el-icon-upload"></i> -->
+      <el-upload
+        name="file"
+        ref="uploadRef"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
         <el-icon class="el-icon--upload">
           <upload-filled />
         </el-icon>
@@ -212,7 +194,7 @@
               <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
             </div> -->
             <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
           </div>
         </template>
       </el-upload>
@@ -222,7 +204,6 @@
           <el-button @click="upload.open = false">取 消</el-button>
         </div>
       </template>
-
     </el-dialog>
   </div>
 </template>
@@ -230,18 +211,8 @@
 <script setup name="user">
 import { getToken } from '@/utils/auth'
 import { treeselect } from '@/api/system/dept'
-import {
-  changeUserStatus,
-  listUser,
-  resetUserPwd,
-  delUser,
-  getUser,
-  updateUser,
-  addUser,
-  exportUser,
-} from '@/api/system/user'
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, exportUser } from '@/api/system/user'
 
-const router = useRouter()
 const { proxy } = getCurrentInstance()
 
 const statusOptions = ref([])
@@ -252,10 +223,6 @@ proxy.getDicts('sys_normal_disable').then((response) => {
 proxy.getDicts('sys_user_sex').then((response) => {
   sexOptions.value = response.data
 })
-// proxy.getConfigKey("sys.user.initPassword").then((response) => {
-//   initPassword.value = response.data;
-// });
-
 const userList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -284,7 +251,7 @@ const upload = reactive({
   // 设置上传的请求头部
   headers: { Authorization: 'Bearer ' + getToken() },
   // 上传的地址
-  url: import.meta.env.VITE_APP_BASE_API + 'system/user/importData',
+  url: import.meta.env.VITE_APP_BASE_API + '/system/user/importData',
 })
 // 列显隐信息
 const columns = ref([
@@ -317,9 +284,7 @@ const data = reactive({
         trigger: 'blur',
       },
     ],
-    nickName: [
-      { required: true, message: '用户昵称不能为空', trigger: 'blur' },
-    ],
+    nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
     password: [
       { required: true, message: '用户密码不能为空', trigger: 'blur' },
       {
@@ -331,8 +296,9 @@ const data = reactive({
     ],
     email: [
       {
+        required: true,
         type: 'email',
-        message: "'请输入正确的邮箱地址",
+        message: '请输入正确的邮箱地址',
         trigger: ['blur', 'change'],
       },
     ],
@@ -348,6 +314,10 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
+proxy.getConfigKey('sys.user.initPassword').then((response) => {
+  initPassword.value = response.data
+})
+
 /** 通过条件过滤节点  */
 const filterNode = (value, data) => {
   if (!value) return true
@@ -366,13 +336,11 @@ function getTreeselect() {
 /** 查询用户列表 */
 function getList() {
   loading.value = true
-  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
-    (res) => {
-      loading.value = false
-      userList.value = res.data.result
-      total.value = res.data.totalNum
-    }
-  )
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
+    loading.value = false
+    userList.value = res.data.result
+    total.value = res.data.totalNum
+  })
 }
 /** 节点单击事件 */
 function handleNodeClick(data) {
@@ -439,24 +407,6 @@ function handleStatusChange(row) {
       row.status = row.status === '0' ? '1' : '0'
     })
 }
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case 'handleResetPwd':
-      handleResetPwd(row)
-      break
-    case 'handleAuthRole':
-      handleAuthRole(row)
-      break
-    default:
-      break
-  }
-}
-/** 跳转角色分配 */
-function handleAuthRole(row) {
-  const userId = row.userId
-  router.push('/system/user-auth/role/' + userId)
-}
 /** 重置密码按钮操作 */
 function handleResetPwd(row) {
   proxy
@@ -487,11 +437,6 @@ function handleImport() {
 }
 /** 下载模板操作 */
 function importTemplate() {
-  // proxy.download(
-  //   "system/user/importTemplate",
-  //   {},
-  //   `user_template_${new Date().getTime()}.xlsx`
-  // );
   proxy.download('/system/user/importTemplate', '用户数据导入模板')
 }
 /**文件上传中处理 */
@@ -503,13 +448,7 @@ const handleFileSuccess = (response, file, fileList) => {
   upload.open = false
   upload.isUploading = false
   proxy.$refs['uploadRef'].clearFiles()
-  proxy.$alert(
-    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
-      response.msg +
-      '</div>',
-    '导入结果',
-    { dangerouslyUseHTMLString: true }
-  )
+  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
   getList()
 }
 /** 提交上传文件 */
@@ -535,7 +474,7 @@ function reset() {
     password: undefined,
     phonenumber: undefined,
     email: undefined,
-    sex: undefined,
+    sex: '2',
     status: '0',
     remark: undefined,
     postIds: [],
@@ -557,7 +496,7 @@ function handleAdd() {
     roleOptions.value = response.data.roles
     open.value = true
     title.value = '添加用户'
-    // form.password.value = initPassword.value;
+    form.value.password = initPassword.value
   })
 }
 /** 修改按钮操作 */
diff --git a/src/views/system/user/profile/index.vue b/src/views/system/user/profile/index.vue
index 6053248..28792d3 100644
--- a/src/views/system/user/profile/index.vue
+++ b/src/views/system/user/profile/index.vue
@@ -32,7 +32,7 @@
               <li class="list-group-item">
                 <svg-icon icon-class="peoples" />所属角色
                 <div class="pull-right">
-                  <span v-for="item in state.roles" :key="item">{{item}}</span>
+                  <span v-for="item in state.roles" :key="item">{{ item }}</span>
                 </div>
               </li>
               <li class="list-group-item">
@@ -119,4 +119,4 @@ getUser()
 .pull-right {
   float: right !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/system/user/profile/operLog.vue b/src/views/system/user/profile/operLog.vue
index 96b949e..09830fb 100644
--- a/src/views/system/user/profile/operLog.vue
+++ b/src/views/system/user/profile/operLog.vue
@@ -45,8 +45,6 @@
 <script setup name="operlog">
 import { list as queryLog } from '@/api/monitor/operlog'
 
-import { getCurrentInstance } from 'vue-demi'
-
 // 遮罩层
 const loading = ref(true)
 // 总条数
diff --git a/src/views/system/user/profile/resetPwd.vue b/src/views/system/user/profile/resetPwd.vue
index 97bf23e..14bec9c 100644
--- a/src/views/system/user/profile/resetPwd.vue
+++ b/src/views/system/user/profile/resetPwd.vue
@@ -17,47 +17,47 @@
 </template>
 
 <script setup>
-import { updateUserPwd } from "@/api/system/user";
+import { updateUserPwd } from '@/api/system/user'
 
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
 
 const user = reactive({
   oldPassword: undefined,
   newPassword: undefined,
   confirmPassword: undefined,
-});
+})
 
 const equalToPassword = (rule, value, callback) => {
   if (user.newPassword !== value) {
-    callback(new Error("两次输入的密码不一致"));
+    callback(new Error('两次输入的密码不一致'))
   } else {
-    callback();
+    callback()
   }
-};
+}
 const rules = ref({
-  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
+  oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
   newPassword: [
-    { required: true, message: "新密码不能为空", trigger: "blur" },
-    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
+    { required: true, message: '新密码不能为空', trigger: 'blur' },
+    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
   ],
   confirmPassword: [
-    { required: true, message: "确认密码不能为空", trigger: "blur" },
-    { required: true, validator: equalToPassword, trigger: "blur" },
+    { required: true, message: '确认密码不能为空', trigger: 'blur' },
+    { required: true, validator: equalToPassword, trigger: 'blur' },
   ],
-});
+})
 
 /** 提交按钮 */
 function submit() {
   proxy.$refs.pwdRef.validate((valid) => {
     if (valid) {
       updateUserPwd(user.oldPassword, user.newPassword).then((response) => {
-        proxy.$modal.msgSuccess("修改成功");
-      });
+        proxy.$modal.msgSuccess('修改成功')
+      })
     }
-  });
+  })
 }
 /** 关闭按钮 */
 function close() {
-  proxy.$tab.closePage();
+  proxy.$tab.closePage()
 }
 </script>
diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue
index c65fdf6..581dee1 100644
--- a/src/views/system/user/profile/userAvatar.vue
+++ b/src/views/system/user/profile/userAvatar.vue
@@ -1,12 +1,23 @@
 <template>
-  <div class="user-info-head" @click="editCropper()"><img :src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+  <div class="user-info-head" @click="editCropper()">
+    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+  </div>
   <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
     <el-row>
-      <el-col :xs="24" :md="12" :style="{height: '350px'}">
-        <vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth"
-          :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox" @realTime="realTime" v-if="visible" />
+      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+        <vue-cropper
+          ref="cropper"
+          :img="options.img"
+          :info="true"
+          :autoCrop="options.autoCrop"
+          :autoCropWidth="options.autoCropWidth"
+          :autoCropHeight="options.autoCropHeight"
+          :fixedBox="options.fixedBox"
+          @realTime="realTime"
+          v-if="visible"
+        />
       </el-col>
-      <el-col :xs="24" :md="12" :style="{height: '350px'}">
+      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <div class="avatar-upload-preview">
           <img :src="options.previews.url" :style="options.previews.img" />
         </div>
@@ -24,19 +35,19 @@
           </el-button>
         </el-upload>
       </el-col>
-      <el-col :lg="{span: 1, offset: 2}" :md="2">
+      <el-col :lg="{ span: 1, offset: 2 }" :md="2">
         <el-button icon="Plus" @click="changeScale(1)"></el-button>
       </el-col>
-      <el-col :lg="{span: 1, offset: 1}" :md="2">
+      <el-col :lg="{ span: 1, offset: 1 }" :md="2">
         <el-button icon="Minus" @click="changeScale(-1)"></el-button>
       </el-col>
-      <el-col :lg="{span: 1, offset: 1}" :md="2">
+      <el-col :lg="{ span: 1, offset: 1 }" :md="2">
         <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
       </el-col>
-      <el-col :lg="{span: 1, offset: 1}" :md="2">
+      <el-col :lg="{ span: 1, offset: 1 }" :md="2">
         <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
       </el-col>
-      <el-col :lg="{span: 2, offset: 6}" :md="2">
+      <el-col :lg="{ span: 2, offset: 6 }" :md="2">
         <el-button type="primary" @click="uploadImg()">提 交</el-button>
       </el-col>
     </el-row>
@@ -44,10 +55,9 @@
 </template>
 
 <script>
-import "vue-cropper/dist/index.css";
-import { VueCropper } from "vue-cropper";
-import { uploadAvatar } from "@/api/system/user";
-import { reactive, ref, getCurrentInstance } from "vue";
+import 'vue-cropper/dist/index.css'
+import { VueCropper } from 'vue-cropper'
+import { uploadAvatar } from '@/api/system/user'
 
 export default {
   components: {
@@ -60,12 +70,12 @@ export default {
     },
   },
   setup() {
-    const store = useStore();
-    const { proxy } = getCurrentInstance();
+    const store = useStore()
+    const { proxy } = getCurrentInstance()
 
-    const open = ref(false);
-    const visible = ref(false);
-    const title = ref("修改头像");
+    const open = ref(false)
+    const visible = ref(false)
+    const title = ref('修改头像')
 
     //图片裁剪数据
     const options = reactive({
@@ -75,67 +85,65 @@ export default {
       autoCropHeight: 200, // 默认生成截图框高度
       fixedBox: true, // 固定截图框大小 不允许改变
       previews: {}, //预览数据
-    });
+    })
 
     /** 编辑头像 */
     function editCropper() {
-      open.value = true;
+      open.value = true
     }
     /** 打开弹出层结束时的回调 */
     function modalOpened() {
-      visible.value = true;
+      visible.value = true
     }
     /** 覆盖默认上传行为 */
     function requestUpload() {}
     /** 向左旋转 */
     function rotateLeft() {
-      proxy.$refs.cropper.rotateLeft();
+      proxy.$refs.cropper.rotateLeft()
     }
     /** 向右旋转 */
     function rotateRight() {
-      proxy.$refs.cropper.rotateRight();
+      proxy.$refs.cropper.rotateRight()
     }
     /** 图片缩放 */
     function changeScale(num) {
-      num = num || 1;
-      proxy.$refs.cropper.changeScale(num);
+      num = num || 1
+      proxy.$refs.cropper.changeScale(num)
     }
     /** 上传预处理 */
     function beforeUpload(file) {
-      if (file.type.indexOf("image/") == -1) {
-        proxy.$modal.msgError(
-          "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
-        );
+      if (file.type.indexOf('image/') == -1) {
+        proxy.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
       } else {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
         reader.onload = () => {
-          options.img = reader.result;
-        };
+          options.img = reader.result
+        }
       }
     }
     /** 上传图片 */
     function uploadImg() {
       proxy.$refs.cropper.getCropBlob((data) => {
-        let formData = new FormData();
-        formData.append("picture", data);
+        let formData = new FormData()
+        formData.append('picture', data)
         uploadAvatar(formData).then((response) => {
-          open.value = false;
-          options.img = response.data.imgUrl;;
-          store.commit("SET_AVATAR", options.img);
-          proxy.$modal.msgSuccess("修改成功");
-          visible.value = false;
-        });
-      });
+          open.value = false
+          options.img = response.data.imgUrl
+          store.commit('SET_AVATAR', options.img)
+          proxy.$modal.msgSuccess('修改成功')
+          visible.value = false
+        })
+      })
     }
     /** 实时预览 */
     function realTime(data) {
-      options.previews = data;
+      options.previews = data
     }
     /** 关闭窗口 */
     function closeDialog() {
-      options.img = store.getters.avatar;
-      options.visible = false;
+      options.img = store.getters.avatar
+      options.visible = false
     }
 
     return {
@@ -143,7 +151,7 @@ export default {
       visible,
       title,
       options,
-			requestUpload,
+      requestUpload,
       modalOpened,
       rotateRight,
       rotateLeft,
@@ -153,21 +161,25 @@ export default {
       uploadImg,
       realTime,
       closeDialog,
-    };
+    }
   },
-};
+}
 </script>
 
-
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .user-info-head {
   position: relative;
   display: inline-block;
+  width: 120px;
   height: 120px;
+
+  img {
+    width: 100%;
+  }
 }
 
 .user-info-head:hover:after {
-  content: "+";
+  content: '+';
   position: absolute;
   left: 0;
   right: 0;
@@ -180,7 +192,7 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   cursor: pointer;
-  line-height: 110px;
+  line-height: 120px;
   border-radius: 50%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/system/user/profile/userInfo.vue b/src/views/system/user/profile/userInfo.vue
index db6b188..06f7b5c 100644
--- a/src/views/system/user/profile/userInfo.vue
+++ b/src/views/system/user/profile/userInfo.vue
@@ -23,48 +23,48 @@
 </template>
 
 <script setup>
-import { updateUserProfile } from "@/api/system/user";
+import { updateUserProfile } from '@/api/system/user'
 
 const props = defineProps({
   user: {
     type: Object,
   },
-});
+})
 
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
 
 const rules = ref({
-  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
   email: [
-    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
+    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
     {
-      type: "email",
+      type: 'email',
       message: "'请输入正确的邮箱地址",
-      trigger: ["blur", "change"],
+      trigger: ['blur', 'change'],
     },
   ],
   phonenumber: [
-    { required: true, message: "手机号码不能为空", trigger: "blur" },
+    { required: true, message: '手机号码不能为空', trigger: 'blur' },
     {
       pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-      message: "请输入正确的手机号码",
-      trigger: "blur",
+      message: '请输入正确的手机号码',
+      trigger: 'blur',
     },
   ],
-});
+})
 
 /** 提交按钮 */
 function submit() {
   proxy.$refs.userRef.validate((valid) => {
     if (valid) {
       updateUserProfile(props.user).then((response) => {
-        proxy.$modal.msgSuccess("修改成功");
-      });
+        proxy.$modal.msgSuccess('修改成功')
+      })
     }
-  });
+  })
 }
 /** 关闭按钮 */
 function close() {
-  proxy.$tab.closePage();
+  proxy.$tab.closePage()
 }
 </script>