feat:添加字典增删改查功能

src/api/system/client.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-export function list(queryParams:object) {
+export function listClientsWithPage(queryParams:object) {
     return request({
         url: '/youlai-admin/api/v1/oauth-clients',
         method: 'get',

src/api/system/dict.ts

@@ -83,7 +83,7 @@ export function listDictItemsWithPage(queryParams: object) {
  *
  * @param dictCode
  */
-export function listDictItems(dictCode: string) {
+export function getDictItemsByCode(dictCode: string) {
     return request({
         url: '/youlai-admin/api/v2/dict/items',
         method: 'get',

src/main.ts

@@ -16,7 +16,7 @@ import '@/permission'
 
 
 import Pagination from '@/components/Pagination/index.vue'
-import {listDictItems} from '@/api/system/dict.ts'
+import {getDictItemsByCode} from '@/api/system/dict'
 
 
 const app = createApp(App)
@@ -27,7 +27,7 @@ for (let iconName in ElIconModules) {
 }
 
 // 全局方法
-app.config.globalProperties.$listDictItems = listDictItems
+app.config.globalProperties.$getDictItemsByCode = getDictItemsByCode
 
 app
     .component('Pagination', Pagination) // 全局组件

src/views/system/client/index.vue

@@ -111,15 +111,14 @@
 </template>
 
 <script setup lang="ts">
-import {list, detail, update, add, del} from '@/api/system/client'
+import {listClientsWithPage, detail, update, add, del} from '@/api/system/client'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import {onMounted, reactive, getCurrentInstance, ref, unref} from 'vue'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus";
 
 const state = reactive({
   loading: true,
-
-
+  // 选中ID数组
   ids: [],
   // 非单个禁用
   single: true,
@@ -152,11 +151,11 @@ const state = reactive({
     clientId: [
       {required: true, message: '客户端ID不能为空', trigger: 'blur'}
     ]
-  },
+  }
 })
 
 function handleQuery() {
-  list(state.queryParams).then(response => {
+  listClientsWithPage(state.queryParams).then(response => {
     const {data, total} = response as any
     state.pageList = data
     state.total = total
@@ -201,9 +200,8 @@ function handleUpdate(row: any) {
   })
 }
 
-const dataForm = ref(ElForm)
-
 function submitForm() {
+  const dataForm = ref(ElForm)
   const form = unref(dataForm)
   form.validate((valid: any) => {
     if (valid) {
@@ -224,10 +222,6 @@ function submitForm() {
   })
 }
 
-function cancel() {
-  state.dialog.visible = false
-}
-
 function resetForm() {
   state.formData = {
     authorizedGrantTypes: [],
@@ -242,6 +236,10 @@ function resetForm() {
   }
 }
 
+function cancel() {
+  state.dialog.visible = false
+}
+
 function handleDelete(row: any) {
   const clientIds = [row.clientId || state.ids].join(',')
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
@@ -260,9 +258,9 @@ function handleDelete(row: any) {
 
 onMounted(() => {
   handleQuery()
-  // 全局方法调用
+  // 全局字典调用
   const {proxy}: any = getCurrentInstance();
-  proxy.$listDictItems('gender').then((response: any) => {
+  proxy.$getDictItemsByCode('gender').then((response: any) => {
     console.log('性别字典数据', response.data)
   })
 })

src/views/system/dict/components/Dict.vue

@@ -1,36 +1,34 @@
-<!--
 <template>
   <div class="app-container">
-    &lt;!&ndash; 搜索表单 &ndash;&gt;
+    <!-- 搜索表单 -->
     <el-form size="mini"
-             :model="queryParams"
+             :model="state.queryParams"
              ref="queryForm"
              :inline="true"
     >
       <el-form-item>
-        <el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
-        <el-button type="danger" icon="el-icon-delete" :disabled="single" @click="handleDelete">删除
+        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon="Delete" :disabled="state.single" @click="handleDelete">删除
         </el-button>
       </el-form-item>
 
       <el-form-item prop="name">
         <el-input
-            v-model="queryParams.name"
+            v-model="state.queryParams.name"
             placeholder="字典名称"
             clearable
             @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="resetForm">重置</el-button>
       </el-form-item>
     </el-form>
 
-    &lt;!&ndash; 数据表格 &ndash;&gt;
+    <!-- 数据表格 -->
     <el-table
-        ref="table"
-        :data="pageList"
-        v-loading="loading"
+        :data="state.pageList"
+        v-loading="state.loading"
         @row-click="handleRowClick"
         @selection-change="handleSelectionChange"
         border
@@ -38,24 +36,23 @@
     >
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="字典名称" prop="name" width="120"/>
-      <el-table-column label="字典编码" prop="code" />
+      <el-table-column label="字典编码" prop="code"/>
       <el-table-column label="状态" align="center" width="80">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-switch
               size="mini"
               v-model="scope.row.status"
               :active-value="1"
               :inactive-value="0"
-              @change="handleStatusChange(scope.row)"
           />
         </template>
       </el-table-column>
 
       <el-table-column label="操作" align="center" width="150">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
               type="primary"
-              icon="el-icon-edit"
+              :icon="Edit"
               size="mini"
               circle
               plain
@@ -63,7 +60,7 @@
           />
           <el-button
               type="danger"
-              icon="el-icon-delete"
+              :icon="Delete"
               size="mini"
               circle
               plain
@@ -73,219 +70,194 @@
       </el-table-column>
     </el-table>
     <pagination
-        v-show="pagination.total>0"
-        :total="pagination.total"
-        :page.sync="pagination.page"
-        :limit.sync="pagination.limit"
+        v-show="state.total>0"
+        :total="state.total"
+        :page.sync="state.queryParams.pageNum"
+        :limit.sync="state.queryParams.pageSize"
         @pagination="handleQuery"
     />
 
-    &lt;!&ndash; 弹窗表单 &ndash;&gt;
+    <!-- 弹窗表单 -->
     <el-dialog
-        :title="dialog.title"
-        :visible.sync="dialog.visible"
+        :title="state.dialog.title"
+        v-model="state.dialog.visible"
         width="500px"
-        @close="closeDialog" >
+        @close="cancel">
       <el-form
-          ref="form"
-          :model="form"
-          :rules="rules"
+          ref="dataForm"
+          :model="state.formData"
+          :rules="state.rules"
           label-width="80px">
         <el-form-item label="字典名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入字典名称"/>
+          <el-input v-model="state.formData.name" placeholder="请输入字典名称"/>
         </el-form-item>
         <el-form-item label="字典编码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入字典编码"/>
+          <el-input v-model="state.formData.code" placeholder="请输入字典编码"/>
         </el-form-item>
         <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
+          <el-radio-group v-model="state.formData.status">
             <el-radio :label="1">正常</el-radio>
             <el-radio :label="0">停用</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-input v-model="state.formData.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        <el-button @click="closeDialog">取 消</el-button>
-      </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>
   </div>
 </template>
 
 <script setup lang="ts">
-import {listDictItemsWithPage,getDictDetail,addDict,updateDict,deleteDict} from "@/api/system/dict";
+import {listDictWithPage, getDictDetail, addDict, updateDict, deleteDict} from "@/api/system/dict";
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import {onMounted, reactive, getCurrentInstance, ref, unref} from 'vue'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus";
 
-
-
-
-
-
-export default {
-  name: "Dict",
-  data() {
-    return {
-      loading: true,
-      ids: [],
-      single: true,
-      multiple: true,
-      queryParams: {
-        name: undefined
-      },
-      pagination: {
-        page: 1,
-        limit: 10,
-        total: 0
-      },
-      pageList: [],
-      dialog: {
-        title: undefined,
-        visible: false
-      },
-      form: {
-        status: 1
-      },
-      rules: {
-        name: [
-          {required: true, message: '请输入字典名称', trigger: 'blur'}
-        ],
-        code: [
-          {required: true, message: '请输入字典编码', trigger: 'blur'}
-        ]
-      }
-    }
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined
   },
-
-  created() {
-    this.handleQuery()
+  pageList: [],
+  total: 0,
+  dialog: {
+    title: '',
+    visible: false
   },
-  methods: {
-    handleQuery() {
-      this.queryParams.page = this.pagination.page
-      this.queryParams.limit = this.pagination.limit
-      getDictPageList(this.queryParams).then(response => {
-        this.pageList = response.data
-        this.pagination.total = response.total
-        this.loading = false
-      })
-    },
-    handleReset() {
-      this.pagination = {
-        page: 1,
-        limit: 10,
-        total: 0
-      }
-      this.queryParams = {
-        name: undefined,
-        queryMode: 'page'
-      }
-      this.handleQuery()
-    },
-    handleRowClick(row) {
-      this.$emit('dictClick', row)
-    },
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length != 1
-      this.multiple = !selection.length
-    },
-    handleStatusChange(row) {
-      const text = row.status === 1 ? '启用' : '停用'
-      this.$confirm('确认要"' + text + row.name + '"数据项吗?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function () {
-        return patch(row.id, 1, {status: row.status})
-      }).then(() => {
-        this.$message.success(text + '成功')
-      }).catch(function () {
-        row.status = row.status === 1 ? 0 : 1
-      })
-    },
+  formData: {
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    status: undefined,
+    remark: undefined
+  },
+  rules: {
+    clientId: [
+      {required: true, message: '客户端ID不能为空', trigger: 'blur'}
+    ]
+  }
+})
 
-    handleAdd() {
-      this.resetForm()
-      this.dialog = {
-        title: '新增字典',
-        visible: true
-      }
-    },
+function handleQuery() {
+  state.loading = true
+  listDictWithPage(state.queryParams).then(response => {
+    const {data, total} = response as any
+    state.pageList = data
+    state.total = total
+    state.loading = false
+  })
+}
 
-    handleUpdate(row) {
-      this.resetForm()
-      this.dialog = {
-        title: '修改字典',
-        visible: true
-      }
-      const id = row.id || this.ids
-      detail(id).then(response => {
-        this.form = response.data
-      })
-    },
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined
+  }
+  handleQuery()
+}
 
-    handleSubmit: function () {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          const id = this.form.id
-          if (id != undefined) {
-            update(id, this.form).then(() => {
-              this.$message.success('修改成功')
-              this.closeDialog()
-              this.handleQuery()
-            })
-          } else {
-            add(this.form).then(() => {
-              this.$message.success('新增成功')
-              this.closeDialog()
-              this.handleQuery()
-            })
-          }
-        }
-      })
-    },
 
-    handleDelete(row) {
-      const ids = [row.id || this.ids].join(',')
-      this.$confirm('确认删除已选中的数据项？', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        del(ids).then(() => {
-          this.$message.success('删除成功')
-          this.handleQuery()
-          this.$emit('resetItem')
-        })
-      }).catch(() =>
-          this.$message.info('已取消删除')
-      )
-    },
-    closeDialog() {
-      this.resetForm()
-      this.dialog = {
-        title: undefined,
-        visible: false
-      }
-    },
-    resetForm() {
-      this.form = {
-        status: 1
-      }
-      if (this.$refs['form']) {
-        this.$refs['form'].resetFields()
-      }
-    }
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: any) => item.id)
+  state.single = selection.length !== 1
+  state.multiple = !selection.length
+}
+
+function handleAdd() {
+  resetForm()
+  state.dialog = {
+    title: '添加字典',
+    visible: true,
   }
 }
-</script>
 
-<style scoped>
+function handleUpdate(row: any) {
+  resetForm()
+  state.dialog = {
+    title: '修改字典',
+    visible: true
+  }
+  const id = row.id || state.ids
+  getDictDetail(id).then(response => {
+    state.formData = response.data
+  })
+}
 
-</style>
--->
+function submitForm() {
+  const dataForm = ref(ElForm)
+  const form = unref(dataForm)
+  form.validate((valid: any) => {
+    if (valid) {
+      if (state.formData.id) {
+        updateDict(state.formData.id, state.formData).then(response => {
+          ElMessage.success('修改成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      } else {
+        addDict(state.formData).then(response => {
+          ElMessage.success('新增成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      }
+    }
+  })
+}
+
+
+function resetForm() {
+  state.formData = {
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    status: undefined,
+    remark: undefined
+  }
+}
+
+function cancel() {
+  state.dialog.visible = false
+}
+
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',')
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteDict(ids).then(() => {
+      ElMessage.success('删除成功')
+      handleQuery()
+    })
+  }).catch(() =>
+      ElMessage.info('已取消删除')
+  )
+}
+
+function handleRowClick(row: any) {
+  console.log("handleRowClick")
+}
+
+onMounted(() => {
+  handleQuery()
+})
+
+</script>