从零学 spring cloud第10-2课：Ant Design Pro连接SpringCloud

接上一节的Ant Design Pro项目，做来一个简单的页面。

• 先设计一个表

-- auto-generated definition
create table epo_value_set
(
    id  int auto_increment  primary key,
    type_name  varchar(100)               not null,
    type_alias varchar(100) charset utf8  null,
    type_value varchar(4000) charset utf8 null,
    enabled    int default 1              null
)
    comment '字典配置表';

• 初始化一些数据

INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (1, 'TYPE_VALUE', '字典类型', 'TYPE_VALUE', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (2, 'TYPE_VALUE', '订单类型', 'PO_TYPE', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (20, 'PO_TYPE', '物资订单', 'GoodsPO', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (21, 'PO_TYPE', '服采订单', 'P2P', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (22, 'TYPE_VALUE', '需求类型', 'PR_TYPE', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (23, 'PR_TYPE', '礼品', 'GIFT', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (24, 'PR_TYPE', '手机', 'PHONE', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (25, 'PR_TYPE', '常规办公', 'GENERAL', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (26, 'PO_TYPE', 'IDC', 'IDC', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (27, 'PR_TYPE', 'IT设置更换', 'EXCHANGE', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (28, 'PR_TYPE', '项目申请', 'PROJECT', 1);
INSERT INTO epo.epo_value_set (id, type_name, type_alias, type_value, enabled) VALUES (29, 'PR_TYPE', '腾讯云', 'TXC', 1);

• 创建model

public class EPOValueSet {
    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column epo_value_set.id
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    private Integer id;

    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column epo_value_set.type_name
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    private String typeName;

    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column epo_value_set.type_alias
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    private String typeAlias;

    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column epo_value_set.type_value
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    private String typeValue;

    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column epo_value_set.enabled
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    private Integer enabled;

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column epo_value_set.id
     *
     * @return the value of epo_value_set.id
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public Integer getId() {
        return id;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column epo_value_set.id
     *
     * @param id the value for epo_value_set.id
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column epo_value_set.type_name
     *
     * @return the value of epo_value_set.type_name
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public String getTypeName() {
        return typeName;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column epo_value_set.type_name
     *
     * @param typeName the value for epo_value_set.type_name
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public void setTypeName(String typeName) {
        this.typeName = typeName == null ? null : typeName.trim();
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column epo_value_set.type_alias
     *
     * @return the value of epo_value_set.type_alias
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public String getTypeAlias() {
        return typeAlias;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column epo_value_set.type_alias
     *
     * @param typeAlias the value for epo_value_set.type_alias
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public void setTypeAlias(String typeAlias) {
        this.typeAlias = typeAlias == null ? null : typeAlias.trim();
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column epo_value_set.type_value
     *
     * @return the value of epo_value_set.type_value
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public String getTypeValue() {
        return typeValue;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column epo_value_set.type_value
     *
     * @param typeValue the value for epo_value_set.type_value
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public void setTypeValue(String typeValue) {
        this.typeValue = typeValue == null ? null : typeValue.trim();
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column epo_value_set.enabled
     *
     * @return the value of epo_value_set.enabled
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public Integer getEnabled() {
        return enabled;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column epo_value_set.enabled
     *
     * @param enabled the value for epo_value_set.enabled
     *
     * @mbg.generated Wed Dec 04 01:08:10 CST 2019
     */
    public void setEnabled(Integer enabled) {
        this.enabled = enabled;
    }
}

我上面的代码是用工具生成的，这些工生成工具在前面都介绍过了，这里就不说了。

• 引入分页插件

 <!-- 分页查询插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.2.1</version>
        </dependency>

这个插件的版本很重要，如果你不是这个版本，问题太多了。

• 参数类

import lombok.Builder;
import lombok.Data;

@Data
@Builder
public class EpoValueSetParam {

    private String typeAlias;
    private String typeName;
    private String typeValue;
    private String enabled ;

    private int   pageSize ;
    private int  pageNo;

}

• 产生脚本类

import org.apache.ibatis.jdbc.SQL;
import org.springframework.util.StringUtils;

public class EpoValueSetSql {

    public String getEpoValueSetCount(EpoValueSetParam epoValueSetParam) {
        String sql = new SQL() {{
            SELECT("COUNT(1)");
            FROM("epo_value_set");
            if (!StringUtils.isEmpty((epoValueSetParam.getTypeName()))) {
                WHERE("type_name=#{typeName}");
            }
            if (!StringUtils.isEmpty((epoValueSetParam.getTypeAlias()))) {
                WHERE("type_alias  like CONCAT('%' , #{typeAlias} , '%')");
            }
            if (!StringUtils.isEmpty((epoValueSetParam.getTypeValue()))) {
                WHERE("type_value  like CONCAT('%' , #{typeValue} , '%')");
            }
        }}.toString();
        System.out.println("sql :" + sql);
        return sql;
    }

    public String GetAllValueSet(EpoValueSetParam epoValueSetParam) {
        String sql = new SQL() {{
            SELECT(" id,type_name typeName,  type_alias typeAlias ,type_value typeValue,enabled enabled ");
            FROM("epo_value_set");
            if (!StringUtils.isEmpty(epoValueSetParam.getTypeName())) {
                WHERE("type_name=#{typeName}");
            }
            if (!StringUtils.isEmpty(epoValueSetParam.getTypeAlias())) {
                WHERE("type_alias like CONCAT('%' , #{typeAlias} , '%')");
            }

            if (!StringUtils.isEmpty(epoValueSetParam.getTypeValue())) {
                WHERE("type_value like CONCAT('%' , #{typeValue} , '%')");
            }

            if (!StringUtils.isEmpty(epoValueSetParam.getEnabled())) {
                if( epoValueSetParam.getEnabled().equals("1"))
                {
                    WHERE("enabled=1");
                }
                if( epoValueSetParam.getEnabled().equals("0"))
                {
                    WHERE("enabled=0");
                }
            }
        }}.toString();
        System.out.println("sql :" + sql);
        return sql;
    }

    public String GetTypeName()
    {
        String sql = new SQL() {{
            SELECT(" type_alias typeAlias ,type_value typeValue ");
            FROM("epo_value_set");
                WHERE("enabled=1 and type_name='TYPE_VALUE'");
        }}.toString();
        System.out.println("sql :" + sql);
        return sql;
    }
}

• DAO操作类

import com.epo.BizConfig.mappers.EpoValueSetParam;
import com.epo.BizConfig.mappers.EpoValueSetSql;
import com.epo.BizConfig.model.EPOValueSet;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface EPOValueSetMapper {

    @Delete("delete from epo_value_set where id=#{id}")
    int deleteByPrimaryKey(Integer id);

    @Insert("INSERT INTO epo_value_set(type_name,type_alias,type_value,enabled) VALUES(#{typeName}, #{typeAlias}, #{typeValue}, #{enabled})")
    int insert(EPOValueSet record);

    @Insert("INSERT INTO epo_value_set(type_name,type_alias,type_value,enabled) VALUES(#{typeName}, #{typeAlias}, #{typeValue}, #{enabled})")
    int insertSelective(EPOValueSet record);

    @Select("SELECT * FROM epo_value_set WHERE id = #{id}")
    EPOValueSet selectByPrimaryKey(Integer id);

    @Update("update epo_value_set set type_name=#{typeName},type_alias= #{typeAlias},type_value=#{typeValue},enabled= #{enabled} where id=#{id}")
    int updateByPrimaryKey(EPOValueSet record);

    @SelectProvider(type = EpoValueSetSql.class, method = "GetAllValueSet")
    List<EPOValueSet> GetAllValueSet(EpoValueSetParam epoValueSetParam);

    @SelectProvider(type = EpoValueSetSql.class, method = "GetTypeName")
    List<EPOValueSet> GetTypeName();
}

• 控制器类

import com.epo.BizConfig.dao.EPOValueSetMapper;
import com.epo.BizConfig.mappers.EpoValueSetParam;
import com.epo.BizConfig.model.EPOValueSet;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class EPOValueSetController {
    private EPOValueSetMapper epoValueSetMapper;

    @Autowired
    public void setUserDao(EPOValueSetMapper epoValueSetMapper) {
        this.epoValueSetMapper = epoValueSetMapper;
    }

    @RequestMapping("/GetAllValueSet")
    public PageInfo<EPOValueSet> GetAllValueSet(@RequestBody EpoValueSetParam epoValueSetParam) {
        //分页
        PageHelper.startPage(epoValueSetParam.getPageNo(), epoValueSetParam.getPageSize());
        //Page<EPOValueSet> pageInfo = PageHelper.startPage(epoValueSetParam.getPageNo(), epoValueSetParam.getPageSize());
        //并查询
        List<EPOValueSet> items = epoValueSetMapper.GetAllValueSet(epoValueSetParam);
        PageInfo<EPOValueSet> pageInfo = new PageInfo<EPOValueSet>(items);

        return pageInfo;
    }

    @RequestMapping(value = "/saveValueSet", method = {RequestMethod.POST})
    public int SaveValueSet(@RequestBody EPOValueSet valueSet) {
        if (valueSet.getId() > 0) {
            int i = epoValueSetMapper.updateByPrimaryKey(valueSet);
            return i;
        } else {
            return epoValueSetMapper.insert(valueSet);
        }
    }

    @RequestMapping(value = "/deleteValueSet", method = {RequestMethod.POST})
    public int deleteValueSet(int key) {
        if (key > 0) {
            int i = epoValueSetMapper.deleteByPrimaryKey(key);
            return i;
        }
        return 0;
    }

    @RequestMapping(value = "/getTypeName", method = {RequestMethod.POST})
    public List<EPOValueSet> getTypeName() {
      return   epoValueSetMapper.GetTypeName();
    }

}

SprindCloud基本算是完成了。
打开VUE项目
修改配置，解决跨域问题，让它能连接到我们的项目的网关

• 修改vue.config.js
  找到节点devServer，修改如下

  devServer: {
    open: true,
    port: 8000,
    proxy: {
      '/spring': {
        target: 'http://localhost:8762/',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/spring': ''
        }
      }
    }
  },

其中，8762是我们springcloud的网关的端口号。
为了不影响其他演示的页面，我们在 src/utils下新增一个springRequest.js,基本上是复制了request.js,我们只是对其做了一点点的修改，修改baseURL，让它连接到我们的网关中

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import {
  VueAxios
} from './axios'
import notification from 'ant-design-vue/es/notification'
import {
  ACCESS_TOKEN
} from '@/store/mutation-types'

// 创建 axios 实例
const service = axios.create({
  baseURL: '/spring',
  timeout: 6000 // 请求超时时间
})

const err = (error) => {
  if (error.response) {
    const data = error.response.data
    const token = Vue.ls.get(ACCESS_TOKEN)
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        message: 'Unauthorized',
        description: 'Authorization verification failed'
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }
  }
  return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use(config => {
  const token = Vue.ls.get(ACCESS_TOKEN)
  if (token) {
    config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  return config
}, err)

// response interceptor
service.interceptors.response.use((response) => {
  return response.data
}, err)

const installer = {
  vm: {},
  install (Vue) {
    Vue.use(VueAxios, service)
  }
}

export {
  installer as VueAxios,
  service as axios
}

在我们的src/api文件夹中，新增bizConfig.js文件
让它访问我们的网关

import { axios } from '@/utils/springRequest'
const api = {
  search_po: '/goodspo/searchpo',
  get_all_value_set: '/bizconfig/GetAllValueSet',
  save_value_set: '/bizconfig/saveValueSet',
  delete_value_set: '/bizconfig/deleteValueSet',
  get_type_name: '/bizconfig/getTypeName'
}
export default api
export function GetAllValueSet (data) {
  return axios({
    url: api.get_all_value_set,
    method: 'post',
    data
  })
}
export function SaveValueSet (data) {
  return axios({
    url: api.save_value_set,
    method: 'post',
    data
  })
}
export function DeleteValueSet (data) {
  return axios({
    url: api.delete_value_set,
    method: 'post',
    params: data
  })
}
export function getTypeName () {
  return axios({
    url: api.get_type_name,
    method: 'post'
  })
}

在src/views下，新增bizConfig文件，新增Search_Value_Set.vue，然后新建一个子目录modules,里面新增一个CreateForm.vue

• CreateForm

<template>
  <a-modal
    title="配置项"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="ID"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          v-show="false"
        >
          <a-input v-decorator="['id', {rules: [{required: true}]}]"/>
        </a-form-item>
        <a-form-item
          label="名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <!--          <a-input v-decorator="['typeName', {rules: [{required: true}]}]"/>-->
          <a-select showSearch v-decorator="['typeName', {rules: [{required: true}]}]">
            <a-select-option v-for="d in templateDatas" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="别名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['typeAlias', {rules: [{required: true}]}]"/>
        </a-form-item>
        <a-form-item
          label="值"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['typeValue', {rules: [{required: true}]}]"/>
        </a-form-item>
        <a-form-item
          label="状态"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator="['enabled', {rules: [{required: true}]}]">
            <a-radio :value="1">使用中</a-radio>
            <a-radio :value="0">已停用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      templateDatas: []
    }
  },
  methods: {
    add (templateDatas) {
      console.log(this.templateDatas.length)
      if (this.templateDatas.length === Number(0)) {
        templateDatas.forEach((r) => {
          this.templateDatas.push({
            value: r.value,
            text: r.text
          })
        })
      }
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id: 0, typeName: '', typeAlias: '', typeValue: '', enabled: 1
        })
      })
    },
    editRow (record, templateDatas) {
      if (this.templateDatas.length === Number(0)) {
        templateDatas.forEach((r) => {
          this.templateDatas.push({
            value: r.value,
            text: r.text
          })
        })
      }
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id: record.id,
          typeName: record.typeName,
          typeAlias: record.typeAlias,
          typeValue: record.typeValue,
          enabled: record.enabled
        })
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$emit('ok', values)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

• Search_Value_Set.vue

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :md="10" :sm="24">
            <a-form-item
              label="名称">
              <!--              <a-input v-model="queryParam.typeName" placeholder=""/>-->
              <a-select showSearch v-model="queryParam.typeName">
                <a-select-option v-for="d in templateDatas" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="别名">
              <a-input v-model="queryParam.typeAlias" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <a-form-item
              label="值">
              <a-input v-model="queryParam.typeValue" placeholder=""/>
            </a-form-item>
            <a-form-item
              label="使用状态">
              <a-select v-model="queryParam.enabled" default-Value="2" placeholder="请选择">
                <a-select-option value="2">全部</a-select-option>
                <a-select-option value="1">使用中</a-select-option>
                <a-select-option value="0">已停用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <div class="table-operator" >
            </div>
          </a-col>
          <a-col :md="10" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" icon="plus" :style="{'margin-right':'20px'}" @click="$refs.createModal.add(templateDatas)">新建</a-button>
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      hideOnSinglePage="false"
      showPagination="auto"
      :pagination="pagination">
      <template slot="operation" slot-scope="text, record">
        <span>
          <a @click="$refs.createModal.editRow(record,templateDatas)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </s-table>
    <create-form ref="createModal" @ok="handleOk"/>
  </a-card>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import CreateForm from './modules/CreateForm'
  import { GetAllValueSet, SaveValueSet, DeleteValueSet, getTypeName } from '@/api/bizConfig'

  export default {
    name: 'SearchValueSet',
    components: {
      STable,
      Ellipsis,
      CreateForm
    },
    data () {
      return {
        pagination: {
          pageSizeOptions: ['5', '10', '20', '50', '100', '200', '300'], // 每页数量选项
          showTotal: (total, range) => `范围(${range}) 共 ${total} 条` // 显示总数
        },
        mdl: {},
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '行号',
            // scopedSlots: { customRender: 'serial' }
            width: 80,
            // customRender: (text, record, index) => `${index + 1}`
            customRender: function (text, record, index) {
              return index + 1
            }
          },
          // {
          //   title: 'ID',
          //   dataIndex: 'id'
          // },
          {
            title: '名称',
            dataIndex: 'typeName'
          },
          {
            title: '别名',
            dataIndex: 'typeAlias'
          },
          {
            title: '值',
            dataIndex: 'typeValue'
          },
          {
            title: '状态',
            dataIndex: 'enabled',
            customRender: function (text) {
              if (text === 0) {
                return '已停用'
              } else if (text === 1) {
                return '使用中'
              } else {
                return text
              }
            }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return GetAllValueSet(Object.assign(parameter, this.queryParam)).then(res => {
            this.data = res.list
            this.pagination.total = res.pages
            return {
              pageSize: res.pageSize,
              pageNo: res.pageNum,
              totalCount: res.total,
              totalPage: res.pages,
              data: res.list
            }
          })
        },
        optionAlertShow: false,
        templateDatas: []
      }
    },
    filters: {
      // enabledFilter (type) {
      //   return enabledMap[type].text
      // },
      // enabledValueFilter (type) {
      //   return enabledMap[type].enabled
      // }
    },
    created () {
      this.fetchTypeNameData()
      // this.queryParam.enabled = '2'
      // getRoleList({ t: new Date() })
    },
    methods: {
      handleOk (values) {
        SaveValueSet(values).then(res => {
          this.$refs.table.refresh(true)
        })
      },
      remove (key) {
        DeleteValueSet({ 'key': key }).then(res => {
          this.$refs.table.refresh(true)
        })
      },
      fetchTypeNameData () {
        getTypeName().then((res) => {
          const result = res
          result.forEach((r) => {
            this.templateDatas.push({
              value: r.typeValue,
              text: r.typeAlias
            })
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>

在src/config下，修改router.config.js,在asyncRouterMap的节点children中，在dashboard节点后，增加代码

// 业务配置管理
      {
        path: '/bizConfig',
        name: 'bizConfig',
        component: PageView,
        redirect: '/bizConfig/search_value_set',
        meta: { title: '业务配置管理', icon: 'table', permission: [ 'table' ] },
        children: [
          {
            path: '/bizConfig/search_value_set',
            name: 'search_value_set',
            hideChildrenInMenu: true, // 强制显示 MenuItem 而不是  SubMenu
            component: () => import('@/views/bizConfig/Search_Value_Set'),
            meta: { title: '字典表配置', keepAlive: true, permission: [ 'table' ] }
          }
        ]
      },

运行我们的springcloud项目，同时运行我们的web项目

• 运行项目

npm run serve

登录后，进入菜单"字典表配置菜单",就能看到我们打开的页面了。

点击新建按钮，新增一点记录

第二页中，就可以看到我们新增的数据了。

也可以点删除，将此数据删除。
这就实现功能的查询，修改，新增，删除，分页。