[JavaScript知识库] 接收数据展示，渲染后台返回的状态颜色

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 接收数据展示，渲染后台返回的状态颜色 -> 正文阅读

[JavaScript知识库]接收数据展示，渲染后台返回的状态颜色

在这里插入图片描述
原本我们正常的接口调取和渲染列表就没啥事了，现在需要优化一下，看着好看点，那我们就封装一下，让其他域的也能调用我们的封装，写个公共组件引用就OK了。

我们以react 项目为例
在我们需要改变状态颜色的页面引入我们的公共颜色配置就搞定了

import { statusMap } from '@/utils';

{
  title: '核销状态',
  align: 'center',
  dataIndex: 'verStateName',
  render: (text, record) => (
    <span
      style={{ color: statusMap.get(`VERIFY_STATUS_${record.verState}`) }} //看你后端返回你的是啥东西，一般都是在查询页面搜索条件里，假设是一个状态，那么这个状态肯定是下拉框的形式，那么他的key名前缀肯定一样，我这里叫VERIFY_STATUS_ 。
    >
      {text}
    </span>
  )
},

在这里插入图片描述
好了我们来封装一下数据
在src 文件夹下创建一个 utils 文件夹在这个文件夹里创建我们想要的js 文件，你自己命名，导出在用的引入就行。我这里叫做 stateMap.tsx文件

/*
  在对应的 颜色数组里面添加自己的编码。格式为 udcCode_udcVal 比如
  GR_STATUS_CL
  GR_STATUS : udcCode
  CL : udcVal

  例子
  import { statusMap } from '@/utils';
  render: (text, record) => (
    <span style={{ color: statusMap.get(`GR_STATUS_${record.docStatus}`) }}>
      {text}
    </span>
  )
*/
/*
udcCode: "PAYMENT_STATE", udcVal: "FAILED", valDesc: "付款失败", es1: ""}
1: {domainCode: "FIN", udcCode: "PAYMENT_STATE", udcVal: "PARTIAL", valDesc: "部分付款成功", es1: ""}
2: {domainCode: "FIN", udcCode: "PAYMENT_STATE", udcVal: "SUCCESS", valDesc: "全部付款成功", es1: ""}*/

const black = [
  'VERIFY_STATUS_AWAIT', // 待核销
  'APPLY_STATUS_DRAFT', //草稿
];
const green = [
  'RED_STATE_SUCCESS', // 红冲完成
  'VERIFY_STATUS_YES', // 完全核销
  'APPLY_STATUS_COMPLETE', // 审批通过
];
const yellow = [
  'VERIFY_STATUS_PART', // 部分核销
  'APPLY_STATUS_REJECTED', //审批拒绝
];
const red = [
  'APPLY_STATUS_VOID', //作废
];
const blue = [
  'RED_STATE_AWAIT', // 待红冲
  'VERIFY_STATUS_NO', // 无需核销
  'APPLY_STATUS_DOING', // 审批中
];

const statusMap = new Map();

// 黑色 #333333
black.forEach((v) => {
  statusMap.set(v, '#333333');
});
// 绿色 #4FC217
green.forEach((v) => {
  statusMap.set(v, '#4FC217');
});
// 黄色 #FAAB0F
yellow.forEach((v) => {
  statusMap.set(v, '#FAAB0F');
});
// 红色 #FF474A
red.forEach((v) => {
  statusMap.set(v, '#FF474A');
});
// 蓝色 #2A4791
blue.forEach((v) => {
  statusMap.set(v, '#2A4791');
});

export default statusMap;

搞定，你学废了吗。哈哈