feat(Dict.vue): 字典页面改造完成

package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
-    "element-plus": "^1.2.0-beta.3",
+    "element-plus": "^1.2.0-beta.6",
+    "@element-plus/icons": "0.0.11",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",

src/components/Pagination/index.vue

@@ -2,8 +2,8 @@
   <div :class="{'hidden':hidden}" class="pagination-container">
     <el-pagination
         :background="background"
-        :current-page.sync="currentPage"
+        v-model:current-page="currentPage"
-        :page-size.sync="pageSize"
+        v-model:page-size="pageSize"
         :layout="layout"
         :page-sizes="pageSizes"
         :total="total"

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,7 +1,9 @@
 <template>
-  <div v-if="!item.meta || !item.meta.hidden" :class="[
+  <div
-      isCollapse ? 'simple-mode' : 'full-mode',
+      v-if="!item.meta || !item.meta.hidden"
-      {'first-level': !isNest}]">
+      :class="[isCollapse ? 'simple-mode' : 'full-mode',
+      {'first-level': !isFirstLevel}]"
+  >
     <template
         v-if="!alwaysShowParent && onlyOneChild && !onlyOneChild.children"
     >
@@ -11,7 +13,7 @@
       >
         <el-menu-item
             :index="resolvePath(onlyOneChild.path)"
-            :class="{'submenu-title-noDropdown':!isNest}"
+            :class="{'submenu-title-noDropdown':!isFirstLevel}"
         >
           <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
           <template v-if="onlyOneChild.meta && onlyOneChild.meta.title" #title>{{ onlyOneChild.meta.title }}</template>
@@ -33,7 +35,7 @@
             :key="child.path"
             :item="child"
             :is-collapse="isCollapse"
-            :is-nest="true"
+            :is-first-level="false"
             :base-path="resolvePath(child.path)"
             class="nest-menu"
         />
@@ -62,7 +64,7 @@ export default defineComponent({
       type: Boolean,
       required: false
     },
-    isNest: {
+    isFirstLevel: {
       type: Boolean,
       required: false
     },
@@ -180,10 +182,11 @@ export default defineComponent({
       padding: 0 !important;
       position: relative;
 
-      & > span{
+      & > span {
         display: none;
       }
-      & > svg{
+
+      & > svg {
         margin-left: 20px;
       }
     }

src/main.ts

@@ -22,6 +22,7 @@ import {getDictItemsByCode} from '@/api/system/dict'
 const app = createApp(App)
 
 // 统一注册el-icon图标
+// @link https://blog.csdn.net/Alloom/article/details/119415984
 for (let iconName in ElIconModules) {
     app.component(iconName, (ElIconModules as any)[iconName])
 }

src/styles/element-plus.scss

@@ -47,3 +47,8 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+// select row color
+.el-table__body tr.current-row td {
+  background-color: #e1f3d8b5 !important;
+}

src/styles/index.scss

@@ -1,7 +1,7 @@
 @import './variables.scss';
 @import './mixin.scss';
 @import './transition.scss';
-@import './element-ui.scss';
+@import 'src/styles/element-plus';
 @import './sidebar.scss';
 
 body {

src/views/system/client/index.vue

@@ -49,7 +49,7 @@
         <template #default="scope">
           <el-button
               type="primary"
-              :icon="Plus"
+              :icon="Edit"
               size="mini"
               circle
               plain
@@ -200,8 +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) {

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

@@ -1,10 +1,11 @@
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
-    <el-form size="mini"
+    <el-form
-             :model="state.queryParams"
+        size="mini"
-             ref="queryForm"
+        :model="state.queryParams"
-             :inline="true"
+        ref="queryForm"
+        :inline="true"
     >
       <el-form-item>
         <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
@@ -27,6 +28,7 @@
 
     <!-- 数据表格 -->
     <el-table
+        highlight-current-row
         :data="state.pageList"
         v-loading="state.loading"
         @row-click="handleRowClick"
@@ -39,12 +41,8 @@
       <el-table-column label="字典编码" prop="code"/>
       <el-table-column label="状态" align="center" width="80">
         <template #default="scope">
-          <el-switch
+          <el-tag v-if="scope.row.status===1" type="success" size="mini">启用</el-tag>
-              size="mini"
+          <el-tag v-else type="info" size="mini">禁用</el-tag>
-              v-model="scope.row.status"
-              :active-value="1"
-              :inactive-value="0"
-          />
         </template>
       </el-table-column>
 
@@ -69,11 +67,12 @@
         </template>
       </el-table-column>
     </el-table>
+
     <pagination
         v-show="state.total>0"
         :total="state.total"
-        :page.sync="state.queryParams.pageNum"
+        v-model:page="state.queryParams.pageNum"
-        :limit.sync="state.queryParams.pageSize"
+        v-model:limit="state.queryParams.pageSize"
         @pagination="handleQuery"
     />
 
@@ -104,7 +103,7 @@
           <el-input v-model="state.formData.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
-      <template  #footer>
+      <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
@@ -117,9 +116,11 @@
 <script setup lang="ts">
 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 {onMounted, reactive, ref, unref, defineEmits} from 'vue'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus";
 
+const emit = defineEmits(['dictClick'])
+
 const state = reactive({
   loading: true,
   // 选中ID数组
@@ -147,8 +148,11 @@ const state = reactive({
     remark: undefined
   },
   rules: {
-    clientId: [
+    name: [
-      {required: true, message: '客户端ID不能为空', trigger: 'blur'}
+      {required: true, message: '请输入字典名称', trigger: 'blur'}
+    ],
+    code: [
+      {required: true, message: '请输入字典编码', trigger: 'blur'}
     ]
   }
 })
@@ -199,8 +203,9 @@ function handleUpdate(row: any) {
   })
 }
 
+const dataForm = ref(ElForm)
+
 function submitForm() {
-  const dataForm = ref(ElForm)
   const form = unref(dataForm)
   form.validate((valid: any) => {
     if (valid) {
@@ -253,11 +258,11 @@ function handleDelete(row: any) {
 }
 
 function handleRowClick(row: any) {
-  console.log("handleRowClick")
+  emit('dictClick', row)
 }
 
 onMounted(() => {
   handleQuery()
 })
 
-</script>
+</script>

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

@@ -1,18 +1,303 @@
 <template>
-<div>
+  <div class="app-container">
-  dictItem
+    <!-- 搜索表单 -->
+    <el-form
+        :model="state.queryParams"
+        ref="queryForm"
+        :inline="true"
+        size="mini"
+    >
+      <el-form-item>
+        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除</el-button>
+      </el-form-item>
+      <el-form-item prop="name">
+        <el-input
+            v-model="state.queryParams.name"
+            placeholder="字典项名称"
+            clearable/>
+      </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>
 
-</div>
+    <!-- 数据表格 -->
+    <el-table
+        :data="state.pageList"
+        v-loading="state.loading"
+        border
+        @selection-change="handleSelectionChange"
+        size="mini"
+    >
+      <el-table-column type="selection" min-width="5%"/>
+      <el-table-column label="字典项名称" prop="name"/>
+      <el-table-column label="字典项值" prop="value"/>
+      <el-table-column label="状态" align="center">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status===1" type="success" size="mini">启用</el-tag>
+          <el-tag v-else type="info" size="mini">禁用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+              type="primary"
+              :icon="Edit"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleUpdate(scope.row)"
+          />
+          <el-button
+              type="danger"
+              :icon="Delete"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleDelete(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
 
+    <pagination
+        v-show="state.total>0"
+        :total="state.total"
+        :page.sync="state.queryParams.pageNum"
+        :limit.sync="state.queryParams.pageSize"
+        @pagination="handleQuery"
+    />
 
+    <!-- 表单弹窗 -->
+    <el-dialog
+        :title="state.dialog.title"
+        v-model="state.dialog.visible"
+        width="500px"
+        @close="cancel"
+    >
+      <el-form
+          ref="dataForm"
+          :model="state.formData"
+          :rules="state.rules"
+          label-width="100px"
+      >
+        <el-form-item label="字典名称">
+          <el-input v-model="props.dictName" :disabled="true"/>
+        </el-form-item>
+        <el-form-item label="字典项名称" prop="name">
+          <el-input v-model="state.formData.name" placeholder="请输入字典项名称"/>
+        </el-form-item>
+        <el-form-item label="字典项值" prop="value">
+          <el-input v-model="state.formData.value" placeholder="请输入字典项值"/>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="state.formData.sort" style="width: 80px;" controls-position="right" :min="0"/>
+        </el-form-item>
+        <el-form-item label="状态" prop="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="state.formData.remark" type="textarea"></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>
 
-<script>
+<script setup lang="ts">
-export default {
+import {
-  name: "DictItem"
+  listDictItemsWithPage,
+  getDictItemDetail,
+  addDictItem,
+  updateDictItem,
+  deleteDictItem
+} from "@/api/system/dict";
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons';
+import {onMounted, computed, reactive, ref, unref, watch} from 'vue'
+import {ElForm, ElMessage, ElMessageBox} from "element-plus";
+
+const props = defineProps({
+  dictCode: {
+    type: String,
+    default: false
+  },
+  dictName: {
+    type: String,
+    default: false
+  }
+})
+
+watch(() => props.dictCode, (newVal, oldVal) => {
+  state.queryParams.dictCode = newVal
+  handleQuery()
+})
+
+
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined,
+    dictCode: ''
+  },
+  pageList: [],
+  total: 0,
+  dialog: {
+    title: '',
+    visible: false
+  },
+  formData: {
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    status: undefined,
+    remark: undefined
+  },
+  rules: {
+    name: [
+      {required: true, message: '请输入字典项名称', trigger: 'blur'}
+    ],
+    value: [
+      {required: true, message: '请输入字典项值', trigger: 'blur'}
+    ]
+  }
+})
+
+function handleQuery() {
+  if (state.queryParams.dictCode) {
+    state.loading = true
+    listDictItemsWithPage(state.queryParams).then(response => {
+      const {data, total} = response as any
+      state.pageList = data
+      state.total = total
+      state.loading = false
+    })
+  } else {
+    state.loading = false
+    state.pageList = []
+    state.total = 0
+    state.queryParams.pageNum = 1
+  }
 }
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined,
+    dictCode: ''
+  }
+  handleQuery()
+}
+
+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,
+  }
+}
+
+function handleUpdate(row: any) {
+  resetForm()
+  state.dialog = {
+    title: '修改字典项',
+    visible: true
+  }
+  const id = row.id || state.ids
+  getDictItemDetail(id).then(response => {
+    state.formData = response.data
+  })
+}
+
+const dataForm = ref(ElForm)
+
+function submitForm() {
+  const form = unref(dataForm)
+  form.validate((valid: any) => {
+    if (valid) {
+      if (state.formData.id) {
+        updateDictItem(state.formData.id, state.formData).then(response => {
+          ElMessage.success('修改成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      } else {
+        addDictItem(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(() => {
+    deleteDictItem(ids).then(() => {
+      ElMessage.success('删除成功')
+      handleQuery()
+    })
+  }).catch(() =>
+      ElMessage.info('已取消删除')
+  )
+}
+
+function handleRowClick(row: any) {
+  console.log("handleRowClick")
+}
+
+onMounted(() => {
+  handleQuery()
+})
 </script>
 
 <style scoped>
 
-</style>
+</style>

src/views/system/dict/index.vue

@@ -4,51 +4,45 @@
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
           <div class="clearfix" slot="header">
-            <span>字典列表</span>
+            <b>字典列表</b>
           </div>
           <!-- 字典列表子组件 -->
-          <dict @dictClick="dictClick" @resetItem="resetItem" ref="dict"></dict>
+          <dict @dictClick="handleDictClick"/>
         </el-card>
       </el-col>
 
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
           <div class="clearfix" slot="header">
-            <span>{{ dict.name }}数据项</span>
+            <b  v-if=" state.dictCode" style="margin-right: 5px">字典</b>
+            <el-tag type="success" v-if=" state.dictCode" ><b>{{ state.dictName }}</b></el-tag>
+            <b  v-if=" state.dictCode" style="margin-left: 5px">数据项</b>
+            <el-tag type="warning"  v-if=" !state.dictCode">未选择字典</el-tag>
           </div>
-          <!-- 字典数据项子组件 -->
+          <!-- 字典项组件 -->
-          <dict-item ref="dictItem"></dict-item>
+          <dict-item :dictName="state.dictName" :dictCode='state.dictCode'/>
         </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import Dict from './components/Dict.vue'
 import DictItem from './components/DictItem.vue'
 
-export default {
+import {reactive} from 'vue'
-  name: "index",
+
-  components: {Dict, DictItem},
+const state = reactive({
-  data() {
+  dictCode: '',
-    return {
+  dictName: ''  // 字典名称，用于字典项组件回显
-      dict: {
+})
-        name: undefined
+
-      }
+const handleDictClick = (dictRow: any) => {
-    }
+  state.dictName = dictRow.name
-  },
+  state.dictCode = dictRow.code
-  methods: {
-    dictClick(row) {
-      this.dict.name = row.name ? '【' + row.name + '】' : undefined
-      this.$refs.dictItem.dictClick(row)
-    },
-    resetItem() {
-      this.dict.name = undefined
-      this.$refs.dictItem.dictClick()
-    }
-  }
 }
+
 </script>
 
 <style scoped>