From f94e14e61c1cc055ccc43e988fa2351380265a11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Sat, 11 Dec 2021 19:23:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(Dict.vue):=20=E5=AD=97=E5=85=B8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=94=B9=E9=80=A0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 src/components/Pagination/index.vue           |   4 +-
 src/layout/components/Sidebar/SidebarItem.vue |  19 +-
 src/main.ts                                   |   1 +
 .../{element-ui.scss => element-plus.scss}    |   5 +
 src/styles/index.scss                         |   2 +-
 src/views/system/client/index.vue             |   4 +-
 src/views/system/dict/components/Dict.vue     |  43 +--
 src/views/system/dict/components/DictItem.vue | 299 +++++++++++++++++-
 src/views/system/dict/index.vue               |  46 ++-
 10 files changed, 360 insertions(+), 66 deletions(-)
 rename src/styles/{element-ui.scss => element-plus.scss} (87%)

diff --git a/package.json b/package.json
index 292aeca6..7c9f6b26 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index a535c799..de745cd2 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -2,8 +2,8 @@
   <div :class="{'hidden':hidden}" class="pagination-container">
     <el-pagination
         :background="background"
-        :current-page.sync="currentPage"
-        :page-size.sync="pageSize"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
         :layout="layout"
         :page-sizes="pageSizes"
         :total="total"
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 566ab683..fa6a9bfa 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,7 +1,9 @@
 <template>
-  <div v-if="!item.meta || !item.meta.hidden" :class="[
-      isCollapse ? 'simple-mode' : 'full-mode',
-      {'first-level': !isNest}]">
+  <div
+      v-if="!item.meta || !item.meta.hidden"
+      :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;
       }
     }
diff --git a/src/main.ts b/src/main.ts
index 4ddff738..9ceb772e 100644
--- a/src/main.ts
+++ b/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])
 }
diff --git a/src/styles/element-ui.scss b/src/styles/element-plus.scss
similarity index 87%
rename from src/styles/element-ui.scss
rename to src/styles/element-plus.scss
index 00624119..1eadd51a 100644
--- a/src/styles/element-ui.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e63d7642..282e4c80 100644
--- a/src/styles/index.scss
+++ b/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 {
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
index 02a6eca0..2301c4f7 100644
--- a/src/views/system/client/index.vue
+++ b/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) {
diff --git a/src/views/system/dict/components/Dict.vue b/src/views/system/dict/components/Dict.vue
index 296285cb..11463f87 100644
--- a/src/views/system/dict/components/Dict.vue
+++ b/src/views/system/dict/components/Dict.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
-    <el-form size="mini"
-             :model="state.queryParams"
-             ref="queryForm"
-             :inline="true"
+    <el-form
+        size="mini"
+        :model="state.queryParams"
+        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
-              size="mini"
-              v-model="scope.row.status"
-              :active-value="1"
-              :inactive-value="0"
-          />
+          <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>
 
@@ -69,11 +67,12 @@
         </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"
+        v-model:page="state.queryParams.pageNum"
+        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: [
-      {required: true, message: '客户端ID不能为空', trigger: 'blur'}
+    name: [
+      {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>
\ No newline at end of file
+</script>
diff --git a/src/views/system/dict/components/DictItem.vue b/src/views/system/dict/components/DictItem.vue
index a0224e3a..345ba335 100644
--- a/src/views/system/dict/components/DictItem.vue
+++ b/src/views/system/dict/components/DictItem.vue
@@ -1,18 +1,303 @@
 <template>
-<div>
-  dictItem
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <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>
-export default {
-  name: "DictItem"
+<script setup lang="ts">
+import {
+  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>
\ No newline at end of file
+</style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 1bbf76a7..c52c9cfd 100644
--- a/src/views/system/dict/index.vue
+++ b/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 {
-  name: "index",
-  components: {Dict, DictItem},
-  data() {
-    return {
-      dict: {
-        name: undefined
-      }
-    }
-  },
-  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()
-    }
-  }
+import {reactive} from 'vue'
+
+const state = reactive({
+  dictCode: '',
+  dictName: ''  // 字典名称，用于字典项组件回显
+})
+
+const handleDictClick = (dictRow: any) => {
+  state.dictName = dictRow.name
+  state.dictCode = dictRow.code
 }
+
 </script>
 
 <style scoped>