dvcp_v2_webapp/packages/core/AppDictionary/AppDictionary.vue

<template>
  <section class="AppDictionary">
    <ai-list v-if="!showDetail">
      <ai-title slot="title" title="数据字典" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="addDict"
                       v-if="$permissions('admin_sysdictionary_add')">添加
            </el-button>
          </template>
          <template #right>
            <el-input size="small" v-model="search.condition" placeholder="数据项" clearable
                      @change="page.current=1,getDicts()" prefix-icon="iconfont iconSearch"/>
            <el-button type="primary" size="small" icon="iconfont iconSearch"
                       @click="page.current=1,getDicts()">查询
            </el-button>
            <el-button size="small" icon="el-icon-refresh-right" @click="resetSearch">重置</el-button>
          </template>
        </ai-search-bar>
        <el-table size="mini" :data="dictList" header-cell-class-name="table-header" tooltip-effect="light"
                  row-class-name="table-row" cell-class-name="table-cell" @expand-change="getDictInfo">
          <el-table-column type="expand">
            <el-row slot-scope="{row}" type="flex" align="middle" style="flex-wrap: wrap">
              <el-tag v-for="(op,i) in row.detail||[]" :key="i" style="margin: 4px">{{ op.dictValue }}｜{{ op.dictName }}
                {{ op.dictColor ? '| ' + op.dictColor : '' }}
              </el-tag>
            </el-row>
          </el-table-column>
          <el-table-column align="center" label="数据项" prop="code"/>
          <el-table-column align="center" label="数据项名称" prop="name"/>
          <el-table-column align="center" label="操作">
            <div slot-scope="{row}">
              <el-button type="text" @click="openDetail(row.id)" v-text="'编辑'"
                         v-if="$permissions('admin_sysdictionary_edit')"/>
              <el-button type="text" @click="handleDelete(row.id)" v-text="'删除'"
                         v-if="$permissions('admin_sysdictionary_del')"/>
            </div>
          </el-table-column>
          <div slot="empty" class="no-data"></div>
        </el-table>
        <div class="pagination">
          <el-pagination background :current-page.sync="page.current" :total="page.total"
                         layout="total,prev, pager, next,sizes, jumper"
                         @size-change="handleSizeChange"
                         :page-size="page.size"
                         :page-sizes="[10, 20, 50, 100,200]"
                         @current-change="getDicts"/>
        </div>
      </template>
    </ai-list>
    <dict-detail v-else :instance="instance" :permissions="permissions"/>
  </section>
</template>

<script>
import DictDetail from "./dictDetail";

export default {
  name: "AppDictionary",
  components: {DictDetail},
  label: "数据字典",
  props: {
    instance: Function,
    permissions: Function
  },
  computed: {
    showDetail() {
      return this.$route.hash == "#add"
    }
  },
  data() {
    return {
      page: {
        current: 1,
        total: 0,
        size: 10
      },
      search: {
        condition: ""
      },
      dictList: [],
      id: ''
    }
  },
  methods: {
    resetSearch() {
      this.page.current = 1;
      this.search.condition = '';
      this.getDicts();
    },
    getDicts() {
      this.instance.post("/admin/dictionary/queryDictList", null, {
        params: {
          ...this.page,
          name: this.search.condition
        }
      }).then(res => {
        this.dictList = res.data.records.map(e => {
          return {...e, detail: []}
        })
        this.page.total = res.data.total
      })
    },
    addDict() {
      this.$router.push({hash: "#add"})
    },
    handleDelete(id) {
      this.$confirm("确定要删除该数据项吗？", {
        type: "error"
      }).then(() => {
        this.instance.post("/admin/dictionary/deleteDict", null, {
          params: {id}
        }).then(res => {
          if (res?.code == 0) {
            this.getDicts();
            this.$message.success("删除成功!")
          }
        })
      }).catch(() => 0)
    },
    openDetail(id) {
      this.$router.push({query: {id}, hash: "#add"})
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.getDicts();
    },
    getDictInfo(row) {
      if (row.detail.length) {
        row.detail = []
      } else {
        this.getDict(row.id).then(res => {
          if (res && res.data) {
            row.detail = res.data.dictionaryDetails || []
          }
        })
      }
    },
    getDict(dictionaryId) {
      return this.instance.post("/admin/dictionary/queryDictDetail", null, {
        params: {dictionaryId}
      })
    },
  },
  created() {
    this.getDicts()
  },
}
</script>

<style lang="scss" scoped>
.AppDictionary {
  height: 100%;
}
</style>