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

2021-12-11 19:23:51 +08:00
parent f113f8518a
commit f94e14e61c
10 changed files with 360 additions and 66 deletions
--- 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",
--- 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"
--- 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;
      }
    }
--- 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])
 }
--- a/src/styles/element-plus.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;
+}
--- 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 {
--- 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) {
--- 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>
+</script>
--- 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>
+</style>
--- 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>