• 字典简介，为了解决前端手动枚举所带来的数据写死，代码冗余问题的解决方案

字典保存save

• 字典通过save来写入到变量中，用于后续取值。相同值不会重复获取
• 默认可传三个参数 deep,path, dicts
• deep:Boolean dicts深层解析，[{ code: 1 }] => [1]
• path:String 字典请求地址
• dicts:Array 字典数组
• 如果传入不是json而是数组那么就当成dicts解析

<template>
  <div></div>
</template>
<script>
  const { Dict } = require('db-tidy-ui/index');
  // import { Dict } from 'db-tidy-ui/index'
  Dict.setPath('/insurance-core-huanong/dict/listAllDictByDictNos') // 示例专用接口，真实项目无需设置
  export default {
    async mounted() {
      await Dict.save([1000]) // 或
      await Dict.save({
        dicts: [{
          code: 1000
        }],
        deep: true
      })
    }
  }
</script>

Expand Copy Copy

字典值获取

• getValue 通过code,value来获取当前显示值
• getIdValue 通过id，vlaue来获取当前显示值
• getValueItem 通过code, vlaue来获取值
• getIdValueItem 通过id, vlaue来获取值
• get 传参code获取对应的值
• set 传参data来覆盖已有字典
• getToList 传参code获取对应的字典列表

getValue获取的值:

getIdValue获取的值:

getValueItem获取的值:

getIdValueItem获取的值:

get获取的值:

getToList获取的值:

<template>
  <div>
    <p>getValue获取的值: {{getValue}}</p>
    <p>getIdValue获取的值: {{getIdValue}}</p>
    <p>getValueItem获取的值: {{getValueItem}}</p>
    <p>getIdValueItem获取的值: {{getIdValueItem}}</p>
    <p>get获取的值: {{get}}</p>
    <p>getToList获取的值: {{getToList}}</p>
  </div>
</template>
<script>
  const { Dict } = require('db-tidy-ui/index');
  // import { Dict } from 'db-tidy-ui/index'
  export default {
    data() {
      return {
        getValue: null,
        getIdValue: null,
        get: null,
        getValueItem: null,
        getIdValueItem: null,
        getToList: null
      }
    },
    async mounted() {
      await Dict.save([1000])
      this.getValue = Dict.getValue({
        code: 1000,
        value: 1
      })
      this.getIdValue = Dict.getIdValue({
        code: 1000,
        value: 10000025
      })
      this.getValueItem = Dict.getValueItem({
        code: 1000,
        value: 1
      })
      this.getIdValueItem = Dict.getIdValueItem({
        code: 1000,
        value: 10000025
      })
      Dict.set({
        9999: {
          1: {
            'dictValue': '这个是随便添加的',
            'id': 5
          },
          2: {
            'dictValue': '这个是随便添加的2',
            'id': 3
          }
        }
      })
      this.get = Dict.get(9999)
      this.getToList = Dict.getToList(9999) // 注意会根据id进行排序 如果是其他key 可以使用Dict.getToList(9999,{ sortName }) sortName这个参数设置
    }
  }
</script>

Expand Copy Copy

配合form等组件自动写入回显参数

• 通过create方法可以快捷生成一个满足form所需要的数据结构

<template>
  <div>
    <higher-form :list="formList" v-model="sendData"></higher-form>
  </div>
</template>
<script>
  const { Dict } = require('db-tidy-ui/index');
  // import { Dict } from 'db-tidy-ui/index'
  export default {
    data() {
      return {
        sendData: {},
        formList: [
          { // input类型
            type: 'select',
            name: 'select',
            key: 'selectValue',
            code: 1000
          }
        ]
      }
    },
    mounted() {
      Dict.save([1000]).then(res => {
        this.formList = Dict.create({
          data: this.formList
        })
      })
    }
  }
</script>

Expand Copy Copy

遇到计算属性的解决方法

• 计算属性是优于mounted进行初始化的所以直接在computed中使用Dict.create是无效的，但是可以通过计算属性的变化机制重新计算来达到效果

错误例子： 正确例子：

<template>
  <div>
    错误例子：<higher-form :list="formList" v-model="sendData"></higher-form>
    正确例子：<higher-form :list="formList2" v-model="sendData"></higher-form>
  </div>
</template>
<script>
  const { Dict } = require('db-tidy-ui/index');
  // import { Dict } from 'db-tidy-ui/index'
  export default {
    data() {
      return {
        sendData: {},
        load: false
      }
    },
    computed: {
      formList() {
        return Dict.create({
          data: [
            { // input类型
              type: 'select',
              name: 'select',
              key: 'selectValue',
              code: 1000
            }
          ]
        })
      },
      formList2() {
        return Dict.create({
          data: [
            { // input类型
              type: 'select',
              name: 'select',
              key: 'selectValue',
              code: 1000
            }
          ],
          load: this.load
        })
      }
    },
    mounted() {
      Dict.save([1000]).then(res => {
        this.load = true
      })
    }
  }
</script>

Expand Copy Copy

表格中使用字典

• 通过指定type=code,并且数据上拥有code

<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    :align="align"
  >
    <template v-slot:email="{ scope }">
      <db-tag mode="sign">{{
          dict.getValue({
            code: '1000',
            value: scope.row.content
          })
        }}</db-tag>
    </template>
  </higher-table>
</template>

<script>
const { Dict } = require('db-tidy-ui/index');
// import { Dict } from 'db-tidy-ui/index'
export default {
  data() {
    // 数据
    return {
      dict: Dict,
      align: "center",
      tableList: [],
      tableColumns: [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "自定义内容",
          type: 'slot'
        },
        {
          key: "content",
          label: "内容",
          code: '1000',
          type: 'code'
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
  mounted() {
    Dict.save([1000]).then(res => {
      this.tableList = [ // 这边是表数据请求模拟请求出来
        {
          id: "FDOSD4233234",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "2",
        },
      ]
    })
  }
};
</script>
<style>
table {
  margin: 0;
}
</style>

Expand Copy Copy