update 首页

2023-12-27 14:56:05 +08:00
parent edf71c4708
commit 83e7d90b2b
5 changed files with 451 additions and 22 deletions
@@ -0,0 +1,145 @@
+<template>
+  <j-modal
+    :title="$t('dashboard.quickEnter.custom')"
+    :visible="visible"
+    :width="1000"
+    switchFullscreen
+    @ok="handleOk"
+    :confirmLoading="loading"
+    @cancel="close"
+    :cancelText="$t('close')">
+      <a-spin :spinning="loading">
+        <a-transfer
+          class="transfer"
+          :data-source="dataSource"
+          :titles="titles"
+          :show-search="true"
+          :filter-option="filterOption"
+          :target-keys="targetKeys"
+          :row-key="item => item.id"
+          :render="item => item.name"
+          :listStyle="listStyle"
+          :locale="locale"
+          @change="handleChange"
+        />
+      </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { getQuickEntryList, saveQuickEntryModuleList } from '@api/dashboard'
+
+export default {
+  name: 'MenuManageModal',
+  data () {
+    return {
+      loading: false,
+      // 穿梭框两侧样式
+      listStyle: {
+        textAlign: 'left',
+        width: '40%',
+        height: '100%'
+      },
+      visible: false,
+      // 可选数据和个人展示模块
+      titles: [this.$t('dashboard.quickEnter.optionModules'), this.$t('dashboard.quickEnter.personalDisplayModule')],
+      // 可选数据
+      dataSource: [],
+      // 已选数据id
+      targetKeys: [],
+      // 多语言
+      locale: {
+        itemUnit: this.$t('dashboard.quickEnter.itemUnit'),
+        itemsUnit: this.$t('dashboard.quickEnter.itemsUnit'),
+        notFoundContent: this.$t('dashboard.quickEnter.listEmpty'),
+        searchPlaceholder: this.$t('dashboard.quickEnter.pleaseEnterSearchContent')
+      }
+    }
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @param ids - 已经选择的ids
+     */
+    show (ids) {
+      this.visible = true
+      // 清空之前的数据，然后重新请求
+      this.dataSource = []
+      this.targetKeys = ids || []
+      this.getMenuList()
+    },
+    // 获取菜单列表
+    getMenuList () {
+      this.loading = true
+      getQuickEntryList().then(res => {
+        if (res.success) {
+          // 穿梭框需要这个格式否则会报错
+          this.dataSource = res.result || []
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      })
+    },
+    // 确定
+    handleOk () {
+      // 最多选择9个模块
+      if (this.targetKeys.length > 9) {
+        this.$message.warning(this.$t('dashboard.quickEnter.maxSelectedNine'))
+        return
+      }
+      this.loading = true
+      saveQuickEntryModuleList({
+        permissionIds: this.targetKeys.join(',')
+      }).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.$emit('ok')
+          this.close()
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 关闭
+    close () {
+      this.visible = false
+    },
+    // 穿梭框改变
+    handleChange (targetKeys, direction, moveKeys) {
+      console.log(targetKeys, direction, moveKeys)
+      this.targetKeys = targetKeys
+    },
+    // 搜索过滤
+    filterOption (inputValue, option) {
+      return option.description.indexOf(inputValue) > -1
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.transfer {
+  height: 50vh;
+  text-align: center;
+  /deep/ .ant-transfer-operation button {
+    margin: 20px 0;
+    border-radius: 50%;
+  }
+  /deep/ .ant-transfer-list-header-selected {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    width: 94%;
+
+    .ant-transfer-list-header-title {
+      position: static;
+    }
+  }
+}
+</style>