【vue】数据字典和 模块设计

<template>
  <el-main>
    <h1>数据字典</h1>

    <div class="search-box" style="overflow:hidden">
      <div style="float:right">
        <el-button type="primary" size="small" @click="showDialog('add')">新增字典</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%;margin-top:15px">
      <el-table-column prop="id" label="字典ID" width="70"> </el-table-column>
      <el-table-column prop="dic_name" label="字典名称" width="180"> </el-table-column>
      <el-table-column prop="dic_field" label="对应字段" width="180"> </el-table-column>
      <el-table-column prop="dic_data" label="字典项">
        <template slot-scope="{ row }">{{ dic_data_string(row) }} </template>
      </el-table-column>
      <el-table-column prop="dic_type" label="字典类型"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="showDialog('edit', row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteBtn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/修改字典 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="字典名称">
          <el-input v-model="form.dic_name"></el-input>
        </el-form-item>
        <el-form-item label="对应字段">
          <el-input v-model="form.dic_field"></el-input>
        </el-form-item>
        <el-form-item label="字典项">
          <el-row v-for="item in form.son" :key="item.key" style="margin-top:10px">
            <el-col :span="3" style="margin-right:15px">
              <el-input v-model="item.data_id" placeholder="序号"></el-input>
            </el-col>
            <el-col :span="9" style="margin-right:15px">
              <el-input v-model="item.data_name" placeholder="名称"></el-input>
            </el-col>
            <el-button @click.prevent="removeDomain(item)" type="danger" size="small">删除</el-button>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDictionaries" type="success" size="small">新增</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
import { dictList, addDict, editDict, deleteDict } from '@/api/dictionaries'

export default {
  name: 'Dictionaries',
  data() {
    return {
      loading: false,
      tableData: [],
      dialogFormVisible: false,
      title: '新增字典',
      addEdit: false,
      form: {
        son: [
          {
            data_id: '',
            data_name: '',
          },
        ],
      },
    }
  },
  computed: {
    dic_data_string() {
      return function(data) {
        return data.dic_data
          .map((dic) => {
            return `${dic.data_id}:${dic.data_name}`
          })
          .join(' ')
      }
    },
  },
  created() {
    this.getDictList()
  },
  methods: {
    // 获取字典数据
    async getDictList() {
      this.loading = true
      try {
        const { code, message, data } = await dictList()
        if (code !== 200) return this.$message.fail(message)
        this.tableData = data
        this.loading = false
      } catch (err) {
        throw new Error(err)
      }
    },
    // 显示编辑/添加弹框
    showDialog(type, row = { son: [{}] }) {
      this.addEdit = type === 'edit'
      this.dialogFormVisible = true
      this.form = row
      row.id && (this.form.son = row.dic_data)
      type === 'edit' ? (this.title = '编辑字典') : (this.title = '新增字典')
    },
    // 删除字典项
    removeDomain(val) {
      this.loading = true
      var index = this.form.dic_data.indexOf(val)
      if (index !== -1) {
        this.form.dic_data.splice(index, 1)
      }
      this.loading = false
    },
    // 新增字典项
    addDictionaries() {
      this.loading = true
      this.form.son.push({
        data_id: '',
        data_name: '',
      })
      this.loading = false
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false
      this.form = {
        son: [{}],
      }
    },
    // 提交修改/新增数据
    async submit() {
      this.loading = true
      const flag = this.addEdit === false
      const { dic_data, ...editForm } = this.form
      try {
        const { code, data, message } = await (flag
          ? addDict({ update_json: JSON.stringify(this.form) })
          : editDict({ update_json: JSON.stringify(editForm) }))
        console.log(code, data, message)
        if (code !== 200) return this.$message.fail(message)
        this.loading = false
        this.$message.success(message)
        this.closeDialog()
      } catch (err) {
        throw new Error(err.message)
        this.loading = false
      }
    },
    deleteBtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          this.loading = true
          const { code, message, data } = await deleteDict({ id })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.loading = false
          this.getDictList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>