2020-05-12

king

2020-05-12 d21470fe80e265cda2c355f636c3258eb0f56636

2020-05-12

 src/assets/css/table.scss

New file
@@ -0,0 +1,1485 @@
.mingke-table {
  // dust-red
  .background.dust-red-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #fff1f0;
    .baseboard {
      background: #fff1f0;
    }
  }
  .background.dust-red-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffccc7;
    .baseboard {
      background: #ffccc7;
    }
  }
  .background.dust-red-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffa39e;
    .baseboard {
      background: #ffa39e;
    }
  }
  .background.dust-red-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #ff7875;
    .baseboard {
      background: #ff7875;
    }
  }
  .background.dust-red-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #ff4d4f;
    .baseboard {
      background: #ff4d4f;
    }
  }
  .background.dust-red-6 {
    color: #ffffff;
    background: #f5222d;
    .baseboard {
      background: #f5222d;
    }
  }
  .background.dust-red-7 {
    color: #ffffff;
    background: #cf1322;
    .baseboard {
      background: #cf1322;
    }
  }
  .background.dust-red-8 {
    color: #ffffff;
    background: #a8071a;
    .baseboard {
      background: #a8071a;
    }
  }
  .background.dust-red-9 {
    color: #ffffff;
    background: #820014;
    .baseboard {
      background: #820014;
    }
  }
  .background.dust-red-10 {
    color: #ffffff;
    background: #5c0011;
    .baseboard {
      background: #5c0011;
    }
  }

  // volcano
  .background.volcano-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #fff2e8;
    .baseboard {
      background: #fff2e8;
    }
  }
  .background.volcano-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffd8bf;
    .baseboard {
      background: #ffd8bf;
    }
  }
  .background.volcano-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffbb96;
    .baseboard {
      background: #ffbb96;
    }
  }
  .background.volcano-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #ff9c6e;
    .baseboard {
      background: #ff9c6e;
    }
  }
  .background.volcano-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #ff7a45;
    .baseboard {
      background: #ff7a45;
    }
  }
  .background.volcano-6 {
    color: #ffffff;
    background: #fa541c;
    .baseboard {
      background: #fa541c;
    }
  }
  .background.volcano-7 {
    color: #ffffff;
    background: #d4380d;
    .baseboard {
      background: #d4380d;
    }
  }
  .background.volcano-8 {
    color: #ffffff;
    background: #ad2102;
    .baseboard {
      background: #ad2102;
    }
  }
  .background.volcano-9 {
    color: #ffffff;
    background: #871400;
    .baseboard {
      background: #871400;
    }
  }
  .background.volcano-10 {
    color: #ffffff;
    background: #610b00;
    .baseboard {
      background: #610b00;
    }
  }

  // orange
  .background.orange-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #fff7e6;
    .baseboard {
      background: #fff7e6;
    }
  }
  .background.orange-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffe7ba;
    .baseboard {
      background: #ffe7ba;
    }
  }
  .background.orange-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffd591;
    .baseboard {
      background: #ffd591;
    }
  }
  .background.orange-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffc069;
    .baseboard {
      background: #ffc069;
    }
  }
  .background.orange-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffa940;
    .baseboard {
      background: #ffa940;
    }
  }
  .background.orange-6 {
    color: #ffffff;
    background: #fa8c16;
    .baseboard {
      background: #fa8c16;
    }
  }
  .background.orange-7 {
    color: #ffffff;
    background: #d46b08;
    .baseboard {
      background: #d46b08;
    }
  }
  .background.orange-8 {
    color: #ffffff;
    background: #ad4e00;
    .baseboard {
      background: #ad4e00;
    }
  }
  .background.orange-9 {
    color: #ffffff;
    background: #873800;
    .baseboard {
      background: #873800;
    }
  }
  .background.orange-10 {
    color: #ffffff;
    background: #612500;
    .baseboard {
      background: #612500;
    }
  }

  // gold
  .background.gold-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #fffbe6;
    .baseboard {
      background: #fffbe6;
    }
  }
  .background.gold-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #fff1b8;
    .baseboard {
      background: #fff1b8;
    }
  }
  .background.gold-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffe58f;
    .baseboard {
      background: #ffe58f;
    }
  }
  .background.gold-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffd666;
    .baseboard {
      background: #ffd666;
    }
  }
  .background.gold-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffc53d;
    .baseboard {
      background: #ffc53d;
    }
  }
  .background.gold-6 {
    color: #ffffff;
    background: #faad14;
    .baseboard {
      background: #faad14;
    }
  }
  .background.gold-7 {
    color: #ffffff;
    background: #d48806;
    .baseboard {
      background: #d48806;
    }
  }
  .background.gold-8 {
    color: #ffffff;
    background: #ad6800;
    .baseboard {
      background: #ad6800;
    }
  }
  .background.gold-9 {
    color: #ffffff;
    background: #874d00;
    .baseboard {
      background: #874d00;
    }
  }
  .background.gold-10 {
    color: #ffffff;
    background: #613400;
    .baseboard {
      background: #613400;
    }
  }

  // yellow
  .background.yellow-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #feffe6;
    .baseboard {
      background: #feffe6;
    }
  }
  .background.yellow-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffffb8;
    .baseboard {
      background: #ffffb8;
    }
  }
  .background.yellow-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #fffb8f;
    .baseboard {
      background: #fffb8f;
    }
  }
  .background.yellow-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #fff566;
    .baseboard {
      background: #fff566;
    }
  }
  .background.yellow-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffec3d;
    .baseboard {
      background: #ffec3d;
    }
  }
  .background.yellow-6 {
    color: #ffffff;
    background: #fadb14;
    .baseboard {
      background: #fadb14;
    }
  }
  .background.yellow-7 {
    color: #ffffff;
    background: #d4b106;
    .baseboard {
      background: #d4b106;
    }
  }
  .background.yellow-8 {
    color: #ffffff;
    background: #ad8b00;
    .baseboard {
      background: #ad8b00;
    }
  }
  .background.yellow-9 {
    color: #ffffff;
    background: #876800;
    .baseboard {
      background: #876800;
    }
  }
  .background.yellow-10 {
    color: #ffffff;
    background: #614700;
    .baseboard {
      background: #614700;
    }
  }

  // lime
  .background.lime-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #fcffe6;
    .baseboard {
      background: #fcffe6;
    }
  }
  .background.lime-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #f4ffb8;
    .baseboard {
      background: #f4ffb8;
    }
  }
  .background.lime-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #eaff8f;
    .baseboard {
      background: #eaff8f;
    }
  }
  .background.lime-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #d3f261;
    .baseboard {
      background: #d3f261;
    }
  }
  .background.lime-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #bae637;
    .baseboard {
      background: #bae637;
    }
  }
  .background.lime-6 {
    color: #ffffff;
    background: #a0d911;
    .baseboard {
      background: #a0d911;
    }
  }
  .background.lime-7 {
    color: #ffffff;
    background: #7cb305;
    .baseboard {
      background: #7cb305;
    }
  }
  .background.lime-8 {
    color: #ffffff;
    background: #5b8c00;
    .baseboard {
      background: #5b8c00;
    }
  }
  .background.lime-9 {
    color: #ffffff;
    background: #3f6600;
    .baseboard {
      background: #3f6600;
    }
  }
  .background.lime-10 {
    color: #ffffff;
    background: #254000;
    .baseboard {
      background: #254000;
    }
  }

  // green
  .background.green-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #f6ffed;
    .baseboard {
      background: #f6ffed;
    }
  }
  .background.green-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #d9f7be;
    .baseboard {
      background: #d9f7be;
    }
  }
  .background.green-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #b7eb8f;
    .baseboard {
      background: #b7eb8f;
    }
  }
  .background.green-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #95de64;
    .baseboard {
      background: #95de64;
    }
  }
  .background.green-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #73d13d;
    .baseboard {
      background: #73d13d;
    }
  }
  .background.green-6 {
    color: #ffffff;
    background: #52c41a;
    .baseboard {
      background: #52c41a;
    }
  }
  .background.green-7 {
    color: #ffffff;
    background: #389e0d;
    .baseboard {
      background: #389e0d;
    }
  }
  .background.green-8 {
    color: #ffffff;
    background: #237804;
    .baseboard {
      background: #237804;
    }
  }
  .background.green-9 {
    color: #ffffff;
    background: #135200;
    .baseboard {
      background: #135200;
    }
  }
  .background.green-10 {
    color: #ffffff;
    background: #092b00;
    .baseboard {
      background: #092b00;
    }
  }

  // cyan
  .background.cyan-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #e6fffb;
    .baseboard {
      background: #e6fffb;
    }
  }
  .background.cyan-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #b5f5ec;
    .baseboard {
      background: #b5f5ec;
    }
  }
  .background.cyan-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #87e8de;
    .baseboard {
      background: #87e8de;
    }
  }
  .background.cyan-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #5cdbd3;
    .baseboard {
      background: #5cdbd3;
    }
  }
  .background.cyan-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #36cfc9;
    .baseboard {
      background: #36cfc9;
    }
  }
  .background.cyan-6 {
    color: #ffffff;
    background: #13c2c2;
    .baseboard {
      background: #13c2c2;
    }
  }
  .background.cyan-7 {
    color: #ffffff;
    background: #08979c;
    .baseboard {
      background: #08979c;
    }
  }
  .background.cyan-8 {
    color: #ffffff;
    background: #006d75;
    .baseboard {
      background: #006d75;
    }
  }
  .background.cyan-9 {
    color: #ffffff;
    background: #00474f;
    .baseboard {
      background: #00474f;
    }
  }
  .background.cyan-10 {
    color: #ffffff;
    background: #002329;
    .baseboard {
      background: #002329;
    }
  }

  // blue
  .background.blue-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #e6f7ff;
    .baseboard {
      background: #e6f7ff;
    }
  }
  .background.blue-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #bae7ff;
    .baseboard {
      background: #bae7ff;
    }
  }
  .background.blue-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #91d5ff;
    .baseboard {
      background: #91d5ff;
    }
  }
  .background.blue-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #69c0ff;
    .baseboard {
      background: #69c0ff;
    }
  }
  .background.blue-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #40a9ff;
    .baseboard {
      background: #40a9ff;
    }
  }
  .background.blue-6 {
    color: #ffffff;
    background: #1890ff;
    .baseboard {
      background: #1890ff;
    }
  }
  .background.blue-7 {
    color: #ffffff;
    background: #096dd9;
    .baseboard {
      background: #096dd9;
    }
  }
  .background.blue-8 {
    color: #ffffff;
    background: #0050b3;
    .baseboard {
      background: #0050b3;
    }
  }
  .background.blue-9 {
    color: #ffffff;
    background: #003a8c;
    .baseboard {
      background: #003a8c;
    }
  }
  .background.blue-10 {
    color: #ffffff;
    background: #002766;
    .baseboard {
      background: #002766;
    }
  }

  // geekblue
  .background.geekblue-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #f0f5ff;
    .baseboard {
      background: #f0f5ff;
    }
  }
  .background.geekblue-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #d6e4ff;
    .baseboard {
      background: #d6e4ff;
    }
  }
  .background.geekblue-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #adc6ff;
    .baseboard {
      background: #adc6ff;
    }
  }
  .background.geekblue-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #85a5ff;
    .baseboard {
      background: #85a5ff;
    }
  }
  .background.geekblue-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #597ef7;
    .baseboard {
      background: #597ef7;
    }
  }
  .background.geekblue-6 {
    color: #ffffff;
    background: #2f54eb;
    .baseboard {
      background: #2f54eb;
    }
  }
  .background.geekblue-7 {
    color: #ffffff;
    background: #1d39c4;
    .baseboard {
      background: #1d39c4;
    }
  }
  .background.geekblue-8 {
    color: #ffffff;
    background: #10239e;
    .baseboard {
      background: #10239e;
    }
  }
  .background.geekblue-9 {
    color: #ffffff;
    background: #061178;
    .baseboard {
      background: #061178;
    }
  }
  .background.geekblue-10 {
    color: #ffffff;
    background: #030852;
    .baseboard {
      background: #030852;
    }
  }
  
  // purple
  .background.purple-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #f9f0ff;
    .baseboard {
      background: #f9f0ff;
    }
  }
  .background.purple-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #efdbff;
    .baseboard {
      background: #efdbff;
    }
  }
  .background.purple-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #d3adf7;
    .baseboard {
      background: #d3adf7;
    }
  }
  .background.purple-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #b37feb;
    .baseboard {
      background: #b37feb;
    }
  }
  .background.purple-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #9254de;
    .baseboard {
      background: #9254de;
    }
  }
  .background.purple-6 {
    color: #ffffff;
    background: #722ed1;
    .baseboard {
      background: #722ed1;
    }
  }
  .background.purple-7 {
    color: #ffffff;
    background: #531dab;
    .baseboard {
      background: #531dab;
    }
  }
  .background.purple-8 {
    color: #ffffff;
    background: #391085;
    .baseboard {
      background: #391085;
    }
  }
  .background.purple-9 {
    color: #ffffff;
    background: #22075e;
    .baseboard {
      background: #22075e;
    }
  }
  .background.purple-10 {
    color: #ffffff;
    background: #120338;
    .baseboard {
      background: #120338;
    }
  }

  // magenta
  .background.magenta-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #fff0f6;
    .baseboard {
      background: #fff0f6;
    }
  }
  .background.magenta-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffd6e7;
    .baseboard {
      background: #ffd6e7;
    }
  }
  .background.magenta-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #ffadd2;
    .baseboard {
      background: #ffadd2;
    }
  }
  .background.magenta-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #ff85c0;
    .baseboard {
      background: #ff85c0;
    }
  }
  .background.magenta-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #f759ab;
    .baseboard {
      background: #f759ab;
    }
  }
  .background.magenta-6 {
    color: #ffffff;
    background: #eb2f96;
    .baseboard {
      background: #eb2f96;
    }
  }
  .background.magenta-7 {
    color: #ffffff;
    background: #c41d7f;
    .baseboard {
      background: #c41d7f;
    }
  }
  .background.magenta-8 {
    color: #ffffff;
    background: #9e1068;
    .baseboard {
      background: #9e1068;
    }
  }
  .background.magenta-9 {
    color: #ffffff;
    background: #780650;
    .baseboard {
      background: #780650;
    }
  }
  .background.magenta-10 {
    color: #ffffff;
    background: #520339;
    .baseboard {
      background: #520339;
    }
  }

  // gray
  .background.gray-1 {
    color: rgba(0, 0, 0, 0.85);
    background: #f5f5f5;
    .baseboard {
      background: #f5f5f5;
    }
  }
  .background.gray-2 {
    color: rgba(0, 0, 0, 0.85);
    background: #f0f0f0;
    .baseboard {
      background: #f0f0f0;
    }
  }
  .background.gray-3 {
    color: rgba(0, 0, 0, 0.85);
    background: #d9d9d9;
    .baseboard {
      background: #d9d9d9;
    }
  }
  .background.gray-4 {
    color: rgba(0, 0, 0, 0.85);
    background: #bfbfbf;
    .baseboard {
      background: #bfbfbf;
    }
  }
  .background.gray-5 {
    color: rgba(0, 0, 0, 0.85);
    background: #8c8c8c;
    .baseboard {
      background: #8c8c8c;
    }
  }
  .background.gray-6 {
    color: #ffffff;
    background: #595959;
    .baseboard {
      background: #595959;
    }
  }
  .background.gray-7 {
    color: #ffffff;
    background: #434343;
    .baseboard {
      background: #434343;
    }
  }
  .background.gray-8 {
    color: #ffffff;
    background: #262626;
    .baseboard {
      background: #262626;
    }
  }
  .background.gray-9 {
    color: #ffffff;
    background: #1f1f1f;
    .baseboard {
      background: #1f1f1f;
    }
  }
  .background.gray-10 {
    color: #ffffff;
    background: #141414;
    .baseboard {
      background: #141414;
    }
  }

  /* ******************************* */

  // dust-red
  .font.dust-red-1 {
    color: #fff1f0;
    background: #ffffff;
  }
  .font.dust-red-2 {
    color: #ffccc7;
    background: #ffffff;
  }
  .font.dust-red-3 {
    color: #ffa39e;
    background: #ffffff;
  }
  .font.dust-red-4 {
    color: #ff7875;
    background: #ffffff;
  }
  .font.dust-red-5 {
    color: #ff4d4f;
    background: #ffffff;
  }
  .font.dust-red-6 {
    color: #f5222d;
    background: #ffffff;
  }
  .font.dust-red-7 {
    color: #cf1322;
    background: #ffffff;
  }
  .font.dust-red-8 {
    color: #a8071a;
    background: #ffffff;
  }
  .font.dust-red-9 {
    color: #820014;
    background: #ffffff;
  }
  .font.dust-red-10 {
    color: #5c0011;
    background: #ffffff;
  }

  // volcano
  .font.volcano-1 {
    color: #fff2e8;
    background: #ffffff;
  }
  .font.volcano-2 {
    color: #ffd8bf;
    background: #ffffff;
  }
  .font.volcano-3 {
    color: #ffbb96;
    background: #ffffff;
  }
  .font.volcano-4 {
    color: #ff9c6e;
    background: #ffffff;
  }
  .font.volcano-5 {
    color: #ff7a45;
    background: #ffffff;
  }
  .font.volcano-6 {
    color: #fa541c;
    background: #ffffff;
  }
  .font.volcano-7 {
    color: #d4380d;
    background: #ffffff;
  }
  .font.volcano-8 {
    color: #ad2102;
    background: #ffffff;
  }
  .font.volcano-9 {
    color: #871400;
    background: #ffffff;
  }
  .font.volcano-10 {
    color: #610b00;
    background: #ffffff;
  }

  // orange
  .font.orange-1 {
    color: #fff7e6;
    background: #ffffff;
  }
  .font.orange-2 {
    color: #ffe7ba;
    background: #ffffff;
  }
  .font.orange-3 {
    color: #ffd591;
    background: #ffffff;
  }
  .font.orange-4 {
    color: #ffc069;
    background: #ffffff;
  }
  .font.orange-5 {
    color: #ffa940;
    background: #ffffff;
  }
  .font.orange-6 {
    color: #fa8c16;
    background: #ffffff;
  }
  .font.orange-7 {
    color: #d46b08;
    background: #ffffff;
  }
  .font.orange-8 {
    color: #ad4e00;
    background: #ffffff;
  }
  .font.orange-9 {
    color: #873800;
    background: #ffffff;
  }
  .font.orange-10 {
    color: #612500;
    background: #ffffff;
  }

  // glod
  .font.glod-1 {
    color: #fffbe6;
    background: #ffffff;
  }
  .font.glod-2 {
    color: #fff1b8;
    background: #ffffff;
  }
  .font.glod-3 {
    color: #ffe58f;
    background: #ffffff;
  }
  .font.glod-4 {
    color: #ffd666;
    background: #ffffff;
  }
  .font.glod-5 {
    color: #ffc53d;
    background: #ffffff;
  }
  .font.glod-6 {
    color: #faad14;
    background: #ffffff;
  }
  .font.glod-7 {
    color: #d48806;
    background: #ffffff;
  }
  .font.glod-8 {
    color: #ad6800;
    background: #ffffff;
  }
  .font.glod-9 {
    color: #874d00;
    background: #ffffff;
  }
  .font.glod-10 {
    color: #613400;
    background: #ffffff;
  }

  // yellow
  .font.yellow-1 {
    color: #feffe6;
    background: #ffffff;
  }
  .font.yellow-2 {
    color: #ffffb8;
    background: #ffffff;
  }
  .font.yellow-3 {
    color: #fffb8f;
    background: #ffffff;
  }
  .font.yellow-4 {
    color: #fff566;
    background: #ffffff;
  }
  .font.yellow-5 {
    color: #ffec3d;
    background: #ffffff;
  }
  .font.yellow-6 {
    color: #fadb14;
    background: #ffffff;
  }
  .font.yellow-7 {
    color: #d4b106;
    background: #ffffff;
  }
  .font.yellow-8 {
    color: #ad8b00;
    background: #ffffff;
  }
  .font.yellow-9 {
    color: #876800;
    background: #ffffff;
  }
  .font.yellow-10 {
    color: #614700;
    background: #ffffff;
  }

  // lime
  .font.lime-1 {
    color: #fcffe6;
    background: #ffffff;
  }
  .font.lime-2 {
    color: #f4ffb8;
    background: #ffffff;
  }
  .font.lime-3 {
    color: #eaff8f;
    background: #ffffff;
  }
  .font.lime-4 {
    color: #d3f261;
    background: #ffffff;
  }
  .font.lime-5 {
    color: #bae637;
    background: #ffffff;
  }
  .font.lime-6 {
    color: #a0d911;
    background: #ffffff;
  }
  .font.lime-7 {
    color: #7cb305;
    background: #ffffff;
  }
  .font.lime-8 {
    color: #5b8c00;
    background: #ffffff;
  }
  .font.lime-9 {
    color: #3f6600;
    background: #ffffff;
  }
  .font.lime-10 {
    color: #254000;
    background: #ffffff;
  }

  // green
  .font.green-1 {
    color: #f6ffed;
    background: #ffffff;
  }
  .font.green-2 {
    color: #d9f7be;
    background: #ffffff;
  }
  .font.green-3 {
    color: #b7eb8f;
    background: #ffffff;
  }
  .font.green-4 {
    color: #95de64;
    background: #ffffff;
  }
  .font.green-5 {
    color: #73d13d;
    background: #ffffff;
  }
  .font.green-6 {
    color: #52c41a;
    background: #ffffff;
  }
  .font.green-7 {
    color: #389e0d;
    background: #ffffff;
  }
  .font.green-8 {
    color: #237804;
    background: #ffffff;
  }
  .font.green-9 {
    color: #135200;
    background: #ffffff;
  }
  .font.green-10 {
    color: #092b00;
    background: #ffffff;
  }

  // cyan
  .font.cyan-1 {
    color: #e6fffb;
    background: #ffffff;
  }
  .font.cyan-2 {
    color: #b5f5ec;
    background: #ffffff;
  }
  .font.cyan-3 {
    color: #87e8de;
    background: #ffffff;
  }
  .font.cyan-4 {
    color: #5cdbd3;
    background: #ffffff;
  }
  .font.cyan-5 {
    color: #36cfc9;
    background: #ffffff;
  }
  .font.cyan-6 {
    color: #13c2c2;
    background: #ffffff;
  }
  .font.cyan-7 {
    color: #08979c;
    background: #ffffff;
  }
  .font.cyan-8 {
    color: #006d75;
    background: #ffffff;
  }
  .font.cyan-9 {
    color: #00474f;
    background: #ffffff;
  }
  .font.cyan-10 {
    color: #002329;
    background: #ffffff;
  }

  // blue
  .font.blue-1 {
    color: #e6f7ff;
    background: #ffffff;
  }
  .font.blue-2 {
    color: #bae7ff;
    background: #ffffff;
  }
  .font.blue-3 {
    color: #91d5ff;
    background: #ffffff;
  }
  .font.blue-4 {
    color: #69c0ff;
    background: #ffffff;
  }
  .font.blue-5 {
    color: #40a9ff;
    background: #ffffff;
  }
  .font.blue-6 {
    color: #1890ff;
    background: #ffffff;
  }
  .font.blue-7 {
    color: #096dd9;
    background: #ffffff;
  }
  .font.blue-8 {
    color: #0050b3;
    background: #ffffff;
  }
  .font.blue-9 {
    color: #003a8c;
    background: #ffffff;
  }
  .font.blue-10 {
    color: #002766;
    background: #ffffff;
  }

  // geekblue
  .font.geekblue-1 {
    color: #f0f5ff;
    background: #ffffff;
  }
  .font.geekblue-2 {
    color: #d6e4ff;
    background: #ffffff;
  }
  .font.geekblue-3 {
    color: #adc6ff;
    background: #ffffff;
  }
  .font.geekblue-4 {
    color: #85a5ff;
    background: #ffffff;
  }
  .font.geekblue-5 {
    color: #597ef7;
    background: #ffffff;
  }
  .font.geekblue-6 {
    color: #2f54eb;
    background: #ffffff;
  }
  .font.geekblue-7 {
    color: #1d39c4;
    background: #ffffff;
  }
  .font.geekblue-8 {
    color: #10239e;
    background: #ffffff;
  }
  .font.geekblue-9 {
    color: #061178;
    background: #ffffff;
  }
  .font.geekblue-10 {
    color: #030852;
    background: #ffffff;
  }

  // purple
  .font.purple-1 {
    color: #f9f0ff;
    background: #ffffff;
  }
  .font.purple-2 {
    color: #efdbff;
    background: #ffffff;
  }
  .font.purple-3 {
    color: #d3adf7;
    background: #ffffff;
  }
  .font.purple-4 {
    color: #b37feb;
    background: #ffffff;
  }
  .font.purple-5 {
    color: #9254de;
    background: #ffffff;
  }
  .font.purple-6 {
    color: #722ed1;
    background: #ffffff;
  }
  .font.purple-7 {
    color: #531dab;
    background: #ffffff;
  }
  .font.purple-8 {
    color: #391085;
    background: #ffffff;
  }
  .font.purple-9 {
    color: #22075e;
    background: #ffffff;
  }
  .font.purple-10 {
    color: #120338;
    background: #ffffff;
  }

  // magenta
  .font.magenta-1 {
    color: #fff0f6;
    background: #ffffff;
  }
  .font.magenta-2 {
    color: #ffd6e7;
    background: #ffffff;
  }
  .font.magenta-3 {
    color: #ffadd2;
    background: #ffffff;
  }
  .font.magenta-4 {
    color: #ff85c0;
    background: #ffffff;
  }
  .font.magenta-5 {
    color: #f759ab;
    background: #ffffff;
  }
  .font.magenta-6 {
    color: #eb2f96;
    background: #ffffff;
  }
  .font.magenta-7 {
    color: #c41d7f;
    background: #ffffff;
  }
  .font.magenta-8 {
    color: #9e1068;
    background: #ffffff;
  }
  .font.magenta-9 {
    color: #780650;
    background: #ffffff;
  }
  .font.magenta-10 {
    color: #520339;
    background: #ffffff;
  }

  // gray
  .font.gray-1 {
    color: #f5f5f5;
    background: #ffffff;
  }
  .font.gray-2 {
    color: #f0f0f0;
    background: #ffffff;
  }
  .font.gray-3 {
    color: #d9d9d9;
    background: #ffffff;
  }
  .font.gray-4 {
    color: #bfbfbf;
    background: #ffffff;
  }
  .font.gray-5 {
    color: #8c8c8c;
    background: #ffffff;
  }
  .font.gray-6 {
    color: #595959;
    background: #ffffff;
  }
  .font.gray-7 {
    color: #434343;
    background: #ffffff;
  }
  .font.gray-8 {
    color: #262626;
    background: #ffffff;
  }
  .font.gray-9 {
    color: #1f1f1f;
    background: #ffffff;
  }
  .font.gray-10 {
    color: #141414;
    background: #ffffff;
  }
}

 src/index.js

@@ -41,6 +41,7 @@
    systemApi = ''
  }

  // 业务系统连接云端时，格式化处理
  if (systemApi && systemApi === /^(http|https):\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}|(:[0-9]{1,4}))+\.?/ig.exec(options.cloudServiceApi)[0]) {
    window.GLOB.dataFormat = true
  }

 src/locales/en-US/model.js

@@ -97,7 +97,6 @@
  'header.form.text': 'Text',
  'header.form.description': '描述',
  'header.form.textarea': '多行文本',
  'header.form.contrastCol': '对比列',
  'header.form.fileupload': '文件上传',
  'header.form.funcvar': '函数变量',
  'header.form.linkForm': '关联表单',

 src/locales/zh-CN/model.js

@@ -97,7 +97,6 @@
  'header.form.text': '文本',
  'header.form.description': '描述',
  'header.form.textarea': '多行文本',
  'header.form.contrastCol': '对比列',
  'header.form.fileupload': '文件上传',
  'header.form.funcvar': '函数变量',
  'header.form.linkForm': '关联表单',

 src/store/action-type.js

@@ -34,5 +34,8 @@
// 初始化菜单权限
export const INIT_MENUPERMISSION = 'INIT_MENUPERMISSION'

// 修改会员等级
export const MODIFY_MEMBERLEVEL = 'MODIFY_MEMBERLEVEL'

// 退出
export const LOGOUT = 'LOGOUT'

 src/store/action.js

@@ -96,6 +96,14 @@
  }
}

// 初始化菜单权限
export const modifyMemberLevel = (memberLevel) => {
  return {
    type: user.MODIFY_MEMBERLEVEL,
    memberLevel: memberLevel
  }
}

// 退出重置
export const logout = () => {
  return {

 src/store/reducer.js

@@ -16,7 +16,8 @@
  permMenus: {},        // 用户三级菜单权限
  permFuncField: [],    // 系统模块
  sysRoles: [],         // 系统角色列表
  dataManager: false    // 数据管理员
  dataManager: false,   // 数据管理员
  memberLevel: 10       // 会员等级
}

// 用户消息
@@ -114,6 +115,12 @@
        ...state,
        permMenus: action.permMenus
      }
    case Type.MODIFY_MEMBERLEVEL:
      // 修改会员等级
      return {
        ...state,
        memberLevel: action.memberLevel
      }
    case Type.LOGOUT:
      return {
        selectedMainMenu: '',

 src/tabviews/commontable/index.jsx

@@ -1322,12 +1322,14 @@
                          ref="mainTable"
                          tableId="mainTable"
                          pickup={pickup}
                          config={config}
                          setting={setting}
                          columns={columns}
                          dict={this.state.dict}
                          data={this.state.data}
                          total={this.state.total}
                          MenuID={this.props.MenuID}
                          memberLevel={this.props.memberLevel}
                          loading={this.state.loading}
                          pagination={setting.laypage !== 'false'}
                          refreshdata={this.refreshbytable}
@@ -1383,12 +1385,14 @@
                        ref="mainTable"
                        tableId="mainTable"
                        pickup={pickup}
                        config={config}
                        setting={setting}
                        columns={columns}
                        dict={this.state.dict}
                        data={this.state.data}
                        total={this.state.total}
                        MenuID={this.props.MenuID}
                        memberLevel={this.props.memberLevel}
                        loading={this.state.loading}
                        pagination={setting.laypage !== 'false'}
                        refreshdata={this.refreshbytable}
@@ -1540,7 +1544,8 @@
    refreshTab: state.refreshTab,
    permAction: state.permAction,
    permMenus: state.permMenus,
    permRoles: state.permRoles
    permRoles: state.permRoles,
    memberLevel: state.memberLevel
  }
}


 src/tabviews/subtable/index.jsx

@@ -937,12 +937,14 @@
                        menuType={this.props.menuType}
                        tableId={this.props.Tab.uuid}
                        pickup={pickup}
                        config={config}
                        setting={setting}
                        columns={columns}
                        dict={this.state.dict}
                        data={this.state.data}
                        total={this.state.total}
                        MenuID={this.props.MenuID}
                        memberLevel={this.props.memberLevel}
                        loading={this.state.loading}
                        pagination={setting.laypage !== 'false'}
                        refreshdata={this.refreshbytable}
@@ -1000,12 +1002,14 @@
                      menuType={this.props.menuType}
                      tableId={this.props.Tab.uuid}
                      pickup={pickup}
                      config={config}
                      setting={setting}
                      columns={columns}
                      dict={this.state.dict}
                      data={this.state.data}
                      total={this.state.total}
                      MenuID={this.props.MenuID}
                      memberLevel={this.props.memberLevel}
                      loading={this.state.loading}
                      pagination={setting.laypage !== 'false'}
                      refreshdata={this.refreshbytable}
@@ -1063,7 +1067,8 @@
    tabviews: state.tabviews,
    permAction: state.permAction,
    permRoles: state.permRoles,
    permMenus: state.permMenus
    permMenus: state.permMenus,
    memberLevel: state.memberLevel
  }
}


 src/tabviews/subtabtable/index.jsx

@@ -712,10 +712,12 @@
                      tableId=""
                      dict={this.state.dict}
                      MenuID={this.props.MenuID}
                      config={config}
                      setting={setting}
                      columns={columns}
                      data={this.state.data}
                      total={this.state.total}
                      memberLevel={this.props.memberLevel}
                      loading={this.state.loading}
                      pagination={setting.laypage !== 'false'}
                      refreshdata={this.refreshbytable}
@@ -765,10 +767,12 @@
                    tableId=""
                    dict={this.state.dict}
                    MenuID={this.props.MenuID}
                    config={config}
                    setting={setting}
                    columns={columns}
                    data={this.state.data}
                    total={this.state.total}
                    memberLevel={this.props.memberLevel}
                    loading={this.state.loading}
                    pagination={setting.laypage !== 'false'}
                    refreshdata={this.refreshbytable}
@@ -799,7 +803,8 @@
const mapStateToProps = (state) => {
  return {
    permAction: state.permAction,
    permRoles: state.permRoles
    permRoles: state.permRoles,
    memberLevel: state.memberLevel
  }
}


 src/tabviews/zshare/normalTable/index.jsx

@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import md5 from 'md5'
import { Table, message, Affix, Button, Typography, Modal } from 'antd'
import { Table, message, Affix, Button, Typography, Modal, Icon } from 'antd'
import './index.scss'
import '@/assets/css/table.scss'

const { Paragraph } = Typography

@@ -17,6 +18,7 @@
    menuType: PropTypes.any,       // 三级菜单类型，HS需特殊处理
    tableId: PropTypes.string,     // 列表Id
    dict: PropTypes.object,        // 字典项
    config: PropTypes.object,      // 页面配置
    MenuID: PropTypes.string,      // 菜单Id
    setting: PropTypes.object,     // 表格全局设置：tableType（表格是否可选、单选、多选）、columnfixed（列固定）、actionfixed（按钮固定）
    pickup: PropTypes.any,         // 数据收起
@@ -28,6 +30,7 @@
    buttonTrigger: PropTypes.func, // 表格中按钮触发操作
    linkTrigger: PropTypes.func,   // 字段透视
    handleTableId: PropTypes.func, // 数据切换
    memberLevel: PropTypes.any,    // 会员等级
    pagination: PropTypes.any      // 数据分页
  }

@@ -37,18 +40,70 @@
    pageSize: 10,         // 每页数据条数
    columns: null,        // 显示列
    imgShow: false,       // 图片放大模态框
    imgSrc: ''            // 图片路径
    imgSrc: '',           // 图片路径
    lineMarks: null,      // 行标记
    colMap: null          // 列信息（全部）
  }

  UNSAFE_componentWillMount () {
    const { columns, menuType } = this.props
    const { menuType, config, memberLevel } = this.props
    let columns = JSON.parse(JSON.stringify(this.props.columns))
    let lineMarks = []
    let _columns = []
    let colMap = new Map() // 用于获取字段信息
    let radio = 5          // 虚化比例
    let _format = false    // 是否虚化处理

    if (window.GLOB.dataFormat && menuType !== 'HS' && memberLevel) {
      _format = true

      if (memberLevel >= 30) {
        radio = 20
      } else if (memberLevel >= 20) {
        radio = 10
      }
    }

    config.columns.forEach(col => {
      if (!col.field) return

      colMap.set(col.field, col)
    })
    
    columns.forEach((item, index) => {
      if (item.hidden === true || item.Hide === 'true') return

      if (window.GLOB.dataFormat && menuType !== 'HS' && !Math.floor(Math.random() * 5)) {
      if (_format && !Math.floor(Math.random() * radio)) {
        item.format = true
      }

      if (item.marks) {
        item.marks = item.marks.filter(mark => {
          let originField = colMap.get(mark.field)
          let contrastField = mark.contrastType === 'dynamic' ? colMap.get(mark.contrastField) : ''

          if (!originField || (mark.contrastType === 'dynamic' && !contrastField)) return false
          if (contrastField && originField.type !== contrastField.type) return false
          if (mark.contrastType === 'static') {
            if (originField.type === 'text' && typeof(mark.contrastValue) === 'number') {
              return false
            } else if (originField.type === 'number' && typeof(mark.contrastValue) === 'string') {
              return false
            } else if (!['number', 'text'].includes(originField.type)) {
              return false
            }
          }

          if (mark.signType === 'line') {
            lineMarks.push(mark)
            return false
          }
          return true
        })

        if (item.marks.length === 0) {
          item.marks = ''
        }
      }

      let cell = {
@@ -74,7 +129,9 @@
    })

    this.setState({
      columns: _columns
      columns: _columns,
      lineMarks: lineMarks,
      colMap: colMap
    })
  }

@@ -107,28 +164,110 @@
    this.props.linkTrigger(tabmenu)
  }

  getMark = (record, marks) => {
    const { colMap } = this.state
    let className = ''
    let isIcon = false
    let position = 'back'
    let icon = ''

    marks.some(mark => {
      let originType = colMap.get(mark.field).type

      let originVal = record.hasOwnProperty(mark.field) ? record[mark.field] : ''
      let contrastVal = ''
      if (mark.contrastType === 'static') {
        contrastVal = mark.contrastValue
      } else {
        contrastVal = record.hasOwnProperty(mark.contrastField) ? record[mark.contrastField] : ''
      }

      if (originType === 'text') {
        originVal = '' + originVal
        contrastVal = '' + contrastVal
      } else if (originType === 'number' && originVal !== '' && contrastVal !== '') {
        try {
          originVal = parseFloat(originVal)
          contrastVal = parseFloat(contrastVal)
          if (isNaN(originVal) || isNaN(contrastVal)) {
            originVal = ''
          }
        } catch {
          originVal = ''
        }
      }

      if (originVal === '' || contrastVal === '') return false

      if (mark.match === '=' && originVal === contrastVal) {
        className = mark.color[1]
      } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) {
        className = mark.color[1]
      } else if (mark.match === '>' && originVal > contrastVal) {
        className = mark.color[1]
      } else if (mark.match === '<' && originVal < contrastVal) {
        className = mark.color[1]
      }

      if (!className) return false

      if (mark.signType === 'font') {
        className = 'font ' + className
      } else if (mark.signType === 'background') {
        className = 'background ' + className
      } else if (mark.signType === 'icon') {
        isIcon = true
        if (mark.position === 'front') {
          position = 'front'
        }
        icon = <Icon className={'font ' + className} type={mark.icon} />
        className = ''
      }

      return true
    })

    return {
      className: className,
      isIcon: isIcon,
      position: position,
      icon: icon
    }
  }

  getContent = (item, record) => {
    if (item.type === 'text') {
      let content = ''
      let match = false
      let className = ''
      if (item.field && record.hasOwnProperty(item.field)) {
        content = `${record[item.field]}`
      }

      if (content && item.matchVal && content.indexOf(item.matchVal) > 0) {
        match = true
      content = content ? (item.prefix || '') + content + (item.postfix || '') : ''

      if (item.marks) {
        let result = this.getMark(record, item.marks)

        if (result.className) {
          className = result.className
        } else if (result.isIcon) {
          if (result.position === 'front') {
            content = <span>{result.icon} {content}</span>
          } else {
            content = <span>{content} {result.icon}</span>
          }
        }
      }

      content = (item.prefix || '') + content + (item.postfix || '')

      if (item.format) {
        className = ''
        content = md5(content)
      }

      if (item.linkThdMenu) {
        return (
          <div className={match ? item.color : ''}>
            <div className="background link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
          <div className={className}>
            <div className="baseboard link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
            <div className="content link-menu" style={{ minWidth: (item.Width || 120) + 'px' }} onDoubleClick={() => this.triggerLink(item, record)}>
              {content}
            </div>
@@ -136,8 +275,8 @@
        )
      } else {
        return (
          <div className={match ? item.color : ''}>
            <div className="background"></div>
          <div className={className}>
            <div className="baseboard"></div>
            <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
              {content}
            </div>
@@ -146,7 +285,7 @@
      }
    } else if (item.type === 'number') {
      let content = ''
      let match = false
      let className = ''

      if (item.field && record.hasOwnProperty(item.field)) {
        try {
@@ -160,26 +299,6 @@
      }

      if (content !== '') {
        if (item.match && item.matchVal) {
          if (item.match === '>') {
            if (content > item.matchVal) {
              match = true
            }
          } else if (item.match === '<') {
            if (content < item.matchVal) {
              match = true
            }
          } else if (item.match === '>=') {
            if (content >= item.matchVal) {
              match = true
            }
          } else if (item.match === '<=') {
            if (content <= item.matchVal) {
              match = true
            }
          }
        }

        if (item.format === 'percent') {
          content = content * 100
        }
@@ -193,14 +312,29 @@
        content = (item.prefix || '') + content + (item.postfix || '')
      }

      if (item.marks) {
        let result = this.getMark(record, item.marks)

        if (result.className) {
          className = result.className
        } else if (result.isIcon) {
          if (result.position === 'front') {
            content = <span>{result.icon} {content}</span>
          } else {
            content = <span>{content} {result.icon}</span>
          }
        }
      }

      if (item.format) {
        className = ''
        content = md5(content)
      }

      if (item.linkThdMenu) {
        return (
          <div className={match ? item.color : ''}>
            <div className="background link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
          <div className={className}>
            <div className="baseboard link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
            <div className="content link-menu" style={{ minWidth: (item.Width || 120) + 'px' }} onDoubleClick={() => this.triggerLink(item, record)}>
              {content}
            </div>
@@ -208,8 +342,8 @@
        )
      } else {
        return (
          <div className={match ? item.color : ''}>
            <div className={'background'}></div>
          <div className={className}>
            <div className="baseboard"></div>
            <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
              {content}
            </div>
@@ -238,24 +372,20 @@
      )
    } else if (item.type === 'textarea') {
      let content = ''
      let match = false

      if (item.field && record.hasOwnProperty(item.field)) {
        content = `${record[item.field]}`
      }

      if (content && item.matchVal && content.indexOf(item.matchVal) > 0) {
        match = true
      }

      content = (item.prefix || '') + content + (item.postfix || '')
      content = content ? (item.prefix || '') + content + (item.postfix || '') : ''

      if (item.format) {
        content = md5(content)
      }

      return (
        <div className={match ? item.color : ''}>
          <div className="background"></div>
        <div>
          <div className="baseboard"></div>
          <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
            {content ? <Paragraph copyable ellipsis={{ rows: 3, expandable: true }}>{content}</Paragraph> : null }
          </div>
@@ -308,6 +438,20 @@
            content = (col.prefix || '') + content + (col.postfix || '')
          }

          if (col.marks) {
            let result = this.getMark(record, col.marks)
    
            if (result.className && result.className.indexOf('font') > -1) {
              content = <span className={result.className}>{content}</span>
            } else if (result.isIcon) {
              if (result.position === 'front') {
                content = <span>{result.icon} {content}</span>
              } else {
                content = <span>{content} {result.icon}</span>
              }
            }
          }

          if (item.format) {
            content = md5(content)
          }
@@ -324,6 +468,32 @@
          photos.forEach(photo => {
            images.push({url: photo, scale: col.scale === 'true', maxHeight: col.maxHeight || 128})
          })
        } else if (col.type === 'text') {
          let content = record[col.field]

          if (content !== '') {
            content = (col.prefix || '') + record[col.field] + (col.postfix || '')
          }

          if (col.marks) {
            let result = this.getMark(record, col.marks)
    
            if (result.className && result.className.indexOf('font') > -1) {
              content = <span className={result.className}>{content}</span>
            } else if (result.isIcon) {
              if (result.position === 'front') {
                content = <span>{result.icon} {content}</span>
              } else {
                content = <span>{content} {result.icon}</span>
              }
            }
          }

          if (item.format) {
            content = md5(content)
          }

          contents.push(content)
        } else {
          let content = record[col.field]

@@ -528,7 +698,7 @@

  render() {
    const { setting, pickup, pagination } = this.props
    let { selectedRowKeys } = this.state
    const { selectedRowKeys, lineMarks, colMap } = this.state

    // 设置表格选择属性：单选、多选、不可选
    let rowSelection = null
@@ -573,10 +743,9 @@
        showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}`
      }
    }
    // rowClassName={(record) => record.$className || ''}

    return (
      <div className="normal-data-table">
      <div className="normal-data-table mingke-table">
        {offset && <Affix offsetTop={offset} className="fix-header">
          <Table
            size="middle"
@@ -598,6 +767,55 @@
          rowSelection={rowSelection}
          columns={this.state.columns}
          dataSource={_data}
          rowClassName={(record) => {
            if (lineMarks.length === 0) return ''

            let className = ''

            lineMarks.some(mark => {
              let originType = colMap.get(mark.field).type

              let originVal = record.hasOwnProperty(mark.field) ? record[mark.field] : ''
              let contrastVal = ''
              if (mark.contrastType === 'static') {
                contrastVal = mark.contrastValue
              } else {
                contrastVal = record.hasOwnProperty(mark.contrastField) ? record[mark.contrastField] : ''
              }

              if (originType === 'text') {
                originVal = '' + originVal
                contrastVal = '' + contrastVal
              } else if (originType === 'number' && originVal !== '' && contrastVal !== '') {
                try {
                  originVal = parseFloat(originVal)
                  contrastVal = parseFloat(contrastVal)
                  if (isNaN(originVal) || isNaN(contrastVal)) {
                    originVal = ''
                  }
                } catch {
                  originVal = ''
                }
              }

              if (originVal === '' || contrastVal === '') return false

              if (mark.match === '=' && originVal === contrastVal) {
                className = 'background ' + mark.color[1]
              } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) {
                className = 'background ' + mark.color[1]
              } else if (mark.match === '>' && originVal > contrastVal) {
                className = 'background ' + mark.color[1]
              } else if (mark.match === '<' && originVal < contrastVal) {
                className = 'background ' + mark.color[1]
              }

              if (!className) return false
              return true
            })

            return className
          }}
          loading={this.props.loading}
          scroll={{ x: '100%', y: false }}
          onRow={(record, index) => {

 src/tabviews/zshare/normalTable/index.scss

@@ -18,11 +18,14 @@
      min-width: 60px;
      max-width: 60px;
    }
    .ant-table-tbody > tr.ant-table-row-selected td {
    .ant-table-tbody > tr.ant-table-row-selected:not(.background) td {
      background-color: #c4ebfd;
    }
    .ant-table-tbody > tr.ant-table-row-selected:hover .ant-table-column-sort {
    .ant-table-tbody > tr.ant-table-row-selected:not(.background):hover .ant-table-column-sort {
      background-color: #c4ebfd;
    }
    .ant-table-tbody > tr.background td {
      background-color: unset!important;
    }
  }
  .ant-table-body {
@@ -133,7 +136,7 @@
      }
      .ant-table-tbody > tr > td.ant-table-column-has-actions {
        position: relative;
        .background {
        .baseboard {
          position: absolute;
          top: 0px;
          left: 0px;
@@ -149,36 +152,6 @@
          z-index: 1;
          word-wrap: break-word;
          word-break: break-word;
        }
        .red {
          .content {
            color: red;
          }
        }
        .redbg {
          .background {
            background: lightcoral;
          }
        }
        .orange {
          .content {
            color: orange;
          }
        }
        .orangebg {
          .background {
            background: lightsalmon;
          }
        }
        .green {
          .content {
            color: green;
          }
        }
        .greenbg {
          .background {
            background: lightgreen;
          }
        }
      }
      .ant-table-tbody > tr > td .content {

 src/templates/comtableconfig/index.jsx

@@ -1363,12 +1363,12 @@
                updatesearch={this.updatesearch}
              />
              <div className="chart-view" style={{position: 'relative'}}>
                {/* 视图组 */}
                <ChartGroupComponent
                {/* 视图组 权限 会员等级20+ */}
                {this.props.memberLevel >= 20 ? <ChartGroupComponent
                  config={config}
                  sysRoles={this.props.sysRoles}
                  updatechartgroup={this.updatechartgroup}
                />
                /> : null}
                {config.charts.map(item => {
                  if (!config.expand && chartview !== item.uuid) return ''

@@ -1445,7 +1445,8 @@
const mapStateToProps = (state) => {
  return {
    sysRoles: state.sysRoles,
    permFuncField: state.permFuncField
    permFuncField: state.permFuncField,
    memberLevel: state.memberLevel
  }
}


 src/templates/comtableconfig/source.jsx

@@ -358,12 +358,6 @@
      label: CommonDict['header.form.colspan'],
      subType: 'colspan',
      url: ''
    },
    {
      type: 'columns',
      label: '对比列',
      subType: CommonDict['header.form.contrastCol'],
      url: ''
    }
  ]


 src/templates/formtabconfig/source.jsx

@@ -11,7 +11,7 @@
    setting: {
      datatype: 'query',
      cols: '2',
      width: 100
      width: 90
    },
    tables: [],
    groups: [

 src/templates/sharecomponent/actioncomponent/dragaction/card.jsx

@@ -53,7 +53,7 @@
      <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} />
      <Icon className="edit copy" title="copy" type="copy" onClick={() => copyCard(id)} />
      <Icon className="edit close" title="close" type="close" onClick={() => delCard(id)} />
      {hasProfile ? <Icon className="edit profile" title="verify" type="profile" onClick={() => profileCard(id)} /> : null}
      {hasProfile ? <Icon className="edit profile" title="setting" type="profile" onClick={() => profileCard(id)} /> : null}
    </div>
  )
}

 src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx

@@ -197,6 +197,7 @@

  UNSAFE_componentWillMount() {
    let _verify = this.props.card.verify || {}
    _verify = JSON.parse(JSON.stringify(_verify))

    let _columns = _verify.columns || []
    _columns = _columns.map(col => {

 src/templates/sharecomponent/columncomponent/columnform/index.jsx

@@ -8,9 +8,9 @@
import './index.scss'

const columnTypeOptions = {
  text: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'matchVal', 'color', 'fieldlength', 'blacklist', 'linkmenu'],
  number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'match', 'matchVal', 'color', 'blacklist', 'linkmenu'],
  textarea: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'matchVal', 'color', 'fieldlength', 'blacklist'],
  text: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'color', 'fieldlength', 'blacklist', 'linkmenu'],
  number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'color', 'blacklist', 'linkmenu'],
  textarea: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'color', 'fieldlength', 'blacklist'],
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'fieldlength', 'blacklist', 'scale', 'maxHeight']
}

@@ -29,25 +29,24 @@
  }

  UNSAFE_componentWillMount () {
    let _type = this.props.formlist.filter(form => form.key === 'type')[0].initVal
    const { card } = this.props
    let _menulist = this.props.formlist.filter(form => form.key === 'linkmenu')[0] || ''

    let _options = JSON.parse(JSON.stringify(columnTypeOptions[_type]))
    let _options = JSON.parse(JSON.stringify(columnTypeOptions[card.type]))

    this.setState({
      menulist: _menulist.options || [],
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
        if (item.key === 'matchVal' && (_type === 'text' || _type === 'textarea')) {
          item.type = 'text'
        } else if (item.key === 'matchVal' && _type === 'number') {
          item.type = 'number'
        }

        return item
      })
    })
  }

  /**
   * @description 初次添加的显示列元素，聚焦提示文字
   */
  componentDidMount () {
    const { card } = this.props

@@ -64,38 +63,25 @@
  typeChange = (key, value) => {
    if (key === 'type') {
      let _options = JSON.parse(JSON.stringify(columnTypeOptions[value]))
      let fieldlength = 50

      if (value !== 'text') {
        fieldlength = 512
      }

      this.setState({
        formlist: this.props.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          if (item.key === 'matchVal' && (value === 'text' || value === 'textarea')) {
            item.type = 'text'
          } else if (item.key === 'matchVal' && value === 'number') {
            item.type = 'number'
            item.initVal = ''
            item.hidden = true
          } else if (item.key === 'fieldlength') {
            if (value === 'text') {
              item.initVal = 50
            } else {
              item.initVal = 512
            }
            item.hidden = true
          }

          return item
        })
      }, () => {
        this.setState({
          formlist: this.props.formlist.map(item => {
            if (item.key === 'matchVal' && value === 'number') {
              item.hidden = false
            } else if (item.key === 'fieldlength' && value !== 'number') {
              item.hidden = false
        if (this.props.form.getFieldValue('fieldlength') !== undefined) {
          this.props.form.setFieldsValue({fieldlength: fieldlength})
            }
            return item
          })
        })
      })
    } else if (key === 'format' && value === 'percent') {
      this.props.form.setFieldsValue({postfix: '%'})
    }
  }

@@ -115,7 +101,7 @@

      if (item.type === 'text') { // 文本搜索
        let rules = []
        if (item.key === 'field') {
        if (item.key === 'field' || item.key === 'contrastField') {
          rules = [{
            pattern: formRule.field.pattern,
            message: formRule.field.message
@@ -167,7 +153,8 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
              })(item.unlimit ? <InputNumber /> :
                  <InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
            </Form.Item>
          </Col>
        )
@@ -327,6 +314,7 @@
        if (!err) {
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          values.marks = this.props.card.marks || ''
          
          if ((values.type === 'text' || values.type === 'number') && values.linkmenu && values.linkmenu.length > 0) {
            let linkThdMenu = ''

 src/templates/sharecomponent/columncomponent/dragcolumn/card.jsx

@@ -3,7 +3,7 @@
import { Icon } from 'antd'
import './index.scss'

const Card = ({ id, card, showfield, moveCard, findCard, editCard, delCard, hasDrop }) => {
const Card = ({ id, card, showfield, moveCard, findCard, editCard, delCard, markCard, hasDrop }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'columns', id, originalIndex },
@@ -52,6 +52,7 @@
      </div>
      <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} />
      <Icon className="edit close" title="delete" type="close" onClick={() => delCard(id)} />
      {['text', 'number'].includes(card.type) && !card.origin ? <Icon className="edit mark" title="mark" type="ant-design" onClick={() => markCard(id)} /> : null}
    </div>
  )
}

 src/templates/sharecomponent/columncomponent/dragcolumn/index.jsx

@@ -7,7 +7,7 @@
import Card from './card'
import './index.scss'

const Container = ({list, setting, gridBtn, showfield, placeholder, handleList, handleMenu, handleGridBtn, deleteMenu }) => {
const Container = ({list, setting, gridBtn, showfield, placeholder, handleList, handleMenu, handleGridBtn, deleteMenu, markMenu }) => {
  let target = null

  const [cards, setCards] = useState(list)
@@ -31,6 +31,9 @@

  const editCard = id => {
    const { card } = findCard(id)

    delete card.focus // 兼容早期的合并列

    handleMenu(card)
  }
  
@@ -38,6 +41,11 @@
  const delCard = id => {
    const { card } = findCard(id)
    deleteMenu(card)
  }
  
  const markCard = id => {
    const { card } = findCard(id)
    markMenu(card)
  }

  const hasDrop = (item) => {
@@ -59,6 +67,7 @@
      newcard.label = 'label'
      newcard.field = ''
      newcard.Hide = 'false'
      newcard.contrastType = 'static'
      newcard.IsSort = 'true'
      newcard.type = item.subType
      newcard.Width = 120
@@ -135,6 +144,7 @@
              moveCard={moveCard}
              editCard={editCard}
              delCard={delCard}
              markCard={markCard}
              findCard={findCard}
              hasDrop={hasDrop}
            />

 src/templates/sharecomponent/columncomponent/index.jsx

@@ -13,6 +13,7 @@
import ColspanForm from './colspanform'
import GridBtnForm from './gridbtnform'
import DragElement from './dragcolumn'
import MarkColumn from './markcolumn'
import './index.scss'

const { confirm } = Modal
@@ -164,6 +165,16 @@
  }

  /**
   * @description 设置标志
   */
  markElement = (card) => {
    this.setState({
      modaltype: 'mark',
      card: card
    })
  }

  /**
   * @description 操作列编辑
   */
  handleGridBtn = () => {
@@ -205,7 +216,7 @@
   */
  handleSubmit = () => {
    const { config } = this.props
    const { modaltype } = this.state
    const { modaltype, card } = this.state

    let _columnlist = fromJS(this.state.columnlist).toJS()

@@ -248,7 +259,25 @@
          return
        }

        if (!card.focus && (card.type !== res.type || (res.field && card.field !== res.field))) {
          let refers = []
          _columnlist.forEach(column => {
            if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
              refers.push(column.label)
            }
          })

          if (refers.length > 0) {
            notification.warning({
              top: 92,
              message: '显示列《' + refers.join('、') + '》标记中含有该字段，此次修改会导致标记失效，请修改《' + refers.join('、') + '》标记设置！',
              duration: 5
            })
          }
        }

        this.setState({
          card: null,
          columnlist: _columnlist,
          modaltype: ''
        })
@@ -281,6 +310,23 @@
        let _columnlist = fromJS(_this.state.columnlist).toJS()

        _columnlist = _columnlist.filter(item => item.uuid !== card.uuid)

        if (card.field) {
          let refers = []
          _columnlist.forEach(column => {
            if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
              refers.push(column.label)
            }
          })

          if (refers.length > 0) {
            notification.warning({
              top: 92,
              message: '显示列《' + refers.join('、') + '》标记中含有该字段，删除会导致标记失效，请修改《' + refers.join('、') + '》标记设置！',
              duration: 5
            })
          }
        }

        _this.setState({
          columnlist: _columnlist
@@ -349,6 +395,33 @@
    })
  }

  markSubmit = () => {
    const { config } = this.props
    const { card } = this.state
    let _columnlist = fromJS(this.state.columnlist).toJS()
    let _marks = this.refs.markRef.state.marks

    if (_marks.length === 0) {
      _marks = ''
    }

    _columnlist = _columnlist.map(item => {
      if (item.uuid === card.uuid) {
        item.marks = _marks
      }
        
      return item
    })

    this.setState({
      card: null,
      columnlist: _columnlist,
      modaltype: ''
    })
    this.props.updatecolumn({...config, columns: _columnlist})
    
  }

  /**
   * @description 组件销毁，清除state更新
   */
@@ -378,6 +451,7 @@
          handleList={this.handleList}
          handleMenu={this.handleColumn}
          deleteMenu={this.deleteElement}
          markMenu={this.markElement}
          handleGridBtn={this.handleGridBtn}
          showfield={this.state.showField}
          placeholder={this.state.dict['header.form.column.placeholder']}
@@ -436,6 +510,26 @@
            wrappedComponentRef={(inst) => this.gridBtnFormRef = inst}
          />
        </Modal>
        {/* 按钮使用系统存储过程时，验证信息模态框 */}
        <Modal
          wrapClassName="model-table-column-mark-modal"
          title={'标记设置'}
          visible={modaltype === 'mark'}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={dict['header.submit']}
          onOk={this.markSubmit}
          onCancel={() => { this.setState({ modaltype: '' }) }}
          destroyOnClose
        >
          <MarkColumn
            ref="markRef"
            card={card}
            dict={dict}
            columns={columnlist}
          />
        </Modal>
        {this.state.loading && <Spin size="large" />}
      </div>
    )

 src/templates/sharecomponent/columncomponent/index.scss

@@ -75,6 +75,10 @@
        left: 20px;
        color: #ff4d4f;
      }
      .edit.mark {
        left: 40px;
        color: #9254de;
      }
      .ant-checkbox-inner {
        margin-top: 14px;
        margin-left: calc(50% - 8px);
@@ -90,3 +94,29 @@
    }
  }
}

.model-table-column-mark-modal {
  .ant-modal {
    top: 50px;
    padding-bottom: 5px;
    .ant-modal-body {
      max-height: calc(100vh - 190px);
      min-height: 350px;
      overflow-y: auto;
    }
    .ant-modal-body::-webkit-scrollbar {
      width: 7px;
    }
    .ant-modal-body::-webkit-scrollbar-thumb {
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
      background: rgba(0, 0, 0, 0.13);
    }
    .ant-modal-body::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.07);
      background: rgba(0, 0, 0, 0);
    }
  }
}

 src/templates/sharecomponent/columncomponent/markcolumn/index.jsx

New file
@@ -0,0 +1,240 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Table, Popconfirm, Icon } from 'antd'

import Utils from '@/utils/utils.js'

import MarkForm from './markform'
import './index.scss'
import '@/assets/css/table.scss'

class MarkColumn extends Component {
  static propTpyes = {
    columns: PropTypes.array,  // 显示列
    dict: PropTypes.object,    // 字典项
    card: PropTypes.object,
  }

  state = {
    marks: null,
    columns: null,
    markColumns: [
      {
        title: '字段',
        dataIndex: 'field',
        width: '20%',
        render: (text, record) => {
          let item = this.props.columns.filter(col => col.field === record.field)[0]
          if (item) {
            return item.label + '（' + item.field + '）'
          } else {
            return ''
          }
        }
      },
      {
        title: '对比类型',
        dataIndex: 'contrastType',
        width: '15%',
        render: (text, record) => {
          if (record.contrastType === 'static') {
            return '静态'
          } else {
            return '动态'
          }
        }
      },
      {
        title: '对比值/字段',
        dataIndex: 'contrastValue',
        width: '20%',
        render: (text, record) => {
          if (record.contrastType === 'static') {
            return '对比值: ' + text
          } else {
            let item = this.props.columns.filter(col => col.field === record.contrastField)[0]
            if (item) {
              return '字段: ' + item.label + '（' + item.field + '）'
            } else {
              return ''
            }
          }
        }
      },
      {
        title: '对比方式',
        dataIndex: 'match',
        width: '12%'
      },
      {
        title: '标记效果',
        dataIndex: 'signType',
        width: '13%',
        render: (text, record) => {
          let item = this.props.columns.filter(col => col.field === record.field)[0]
          if (!item) return ''

          let content = ''
          if (item.type === 'text') {
            content = '文本'
          } else {
            content = Math.ceil(Math.random() * 100) * 10
          }

          let _outerclass = ''
          if (record.signType === 'font') {
            _outerclass = 'font ' + record.color[1]
          } else if (record.signType === 'background') {
            _outerclass = 'background ' + record.color[1]
          } else if (record.signType === 'icon') {
            if (record.position === 'front') {
              content = <div><Icon className={'font ' + record.color[1]} type={record.icon} /> {content} </div>
            } else {
              content = <div> {content} <Icon className={'font ' + record.color[1]} type={record.icon} /> </div>
            }
          }

          return <div className={_outerclass}>
            <div className="baseboard"></div>
            <div className="content">
              {content}
            </div>
          </div>
        }
      },
      {
        title: '操作',
        align: 'center',
        dataIndex: 'operation',
        render: (text, record) =>
          (
            <div>
              <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span>
              <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
              <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
              <Popconfirm
                title={this.props.dict['header.form.query.delete']}
                okText={this.props.dict['model.confirm']}
                cancelText={this.props.dict['header.cancel']}
                onConfirm={() => this.handleDelete(record)
              }>
                <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
              </Popconfirm>
            </div>
          )
      }
    ]
  }

  UNSAFE_componentWillMount() {
    const { columns, card } = this.props

    this.setState({
      columns: columns.filter(col => col.type === 'text' || col.type === 'number'),
      marks: card.marks ? fromJS(card.marks).toJS() : []
    })
  }

  markChange = (values) => {
    let _marks = fromJS(this.state.marks).toJS()

    if (values.uuid) {
      _marks = _marks.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      values.uuid = Utils.getuuid()
      _marks.push(values)
    }

    this.setState({
      marks: _marks
    })
  }

  handleDelete = (record) => {
    const { marks } = this.state

    let _marks = marks.filter(item => item.uuid !== record.uuid)
    
    this.setState({ marks: _marks })
  }

  handleEdit = (record) => {
    this.markForm.edit(record)
    
    let node = document.getElementById('mark-column-box-modal').parentNode

    if (node && node.scrollTop) {
      let inter = Math.ceil(node.scrollTop / 10)

      let timer = setInterval(() => {
        if (node.scrollTop - inter > 0) {
          node.scrollTop = node.scrollTop - inter
        } else {
          node.scrollTop = 0
          clearInterval(timer)
        }
      }, 10)
    }
  }

  handleUpDown = (record, direction) => {
    let _marks = fromJS(this.state.marks).toJS()
    let index = 0

    _marks = _marks.filter((item, i) => {
      if (item.uuid === record.uuid) {
        index = i
      }

      return item.uuid !== record.uuid
    })
    if ((index === 0 && direction === 'up') || (index === _marks.length && direction === 'down')) {
      return
    }

    if (direction === 'up') {
      _marks.splice(index - 1, 0, record)
    } else {
      _marks.splice(index + 1, 0, record)
    }

    this.setState({
      marks: _marks
    })
  }

  render() {
    const { card } = this.props
    const { marks, markColumns, columns } = this.state

    return (
      <div id="mark-column-box-modal" className="">
        <MarkForm
          dict={this.props.dict}
          card={card}
          columns={columns}
          markChange={this.markChange}
          wrappedComponentRef={(inst) => this.markForm = inst}
        />
        <Table
          bordered
          rowKey="uuid"
          className="mingke-table"
          dataSource={marks}
          rowClassName={(record) => record.signType === 'line' ? 'mk-table-line background ' + record.color[1] : ''}
          columns={markColumns}
          pagination={false}
        />
      </div>
    )
  }
}

export default MarkColumn

 src/templates/sharecomponent/columncomponent/markcolumn/index.scss

New file
@@ -0,0 +1,58 @@
#mark-column-box-modal {
  table tr td {
    word-wrap: break-word;
    word-break: break-word;
  }
  .ant-input-number {
    width: 100%;
  }
  
  .mingke-table .ant-empty {
    margin: 20px 8px!important;
  }
  .mingke-table {
    td {
      position: relative;
    }
  }
  .errorval {
    display: inline-block;
    width: 30px;
  }
  .operation-btn {
    display: inline-block;
    font-size: 16px;
    padding: 0 5px;
    cursor: pointer;
  }
  .ant-tabs-tabpane {
    position: relative;
    .excel-col-add {
      position: absolute;
      right: 0;
      top: 90px;
    }
  }

  .ant-table-tbody tr.background td {
    background: unset!important;
  }
  .background {
    .baseboard {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .content {
      position: relative;
    }
  }

  .mk-table-line.background {
    .baseboard {
      background: unset!important;
    }
  }
}

 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx

New file
@@ -0,0 +1,560 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader } from 'antd'
import './index.scss'


class UniqueForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    card: PropTypes.object,         // 字段信息
    columns: PropTypes.array,       // 列名集合
    markChange: PropTypes.func      // 修改函数
  }

  state = {
    editItem: null, // 编辑元素
    contrastType: 'static',
    originField: this.props.card,
    signType: 'background',
    selectIcon: '',
    options: [
      {
        value: 'DustRed',
        label: '薄暮',
        children: [
          { value: 'dust-red-1', label: 'dust-red-1' },
          { value: 'dust-red-2', label: 'dust-red-2' },
          { value: 'dust-red-3', label: 'dust-red-3' },
          { value: 'dust-red-4', label: 'dust-red-4' },
          { value: 'dust-red-5', label: 'dust-red-5' },
          { value: 'dust-red-6', label: 'dust-red-6' },
          { value: 'dust-red-7', label: 'dust-red-7' },
          { value: 'dust-red-8', label: 'dust-red-8' },
          { value: 'dust-red-9', label: 'dust-red-9' },
          { value: 'dust-red-10', label: 'dust-red-10' }
        ]
      },
      {
        value: 'Volcano',
        label: '火山',
        children: [
          { value: 'volcano-1', label: 'volcano-1' },
          { value: 'volcano-2', label: 'volcano-2' },
          { value: 'volcano-3', label: 'volcano-3' },
          { value: 'volcano-4', label: 'volcano-4' },
          { value: 'volcano-5', label: 'volcano-5' },
          { value: 'volcano-6', label: 'volcano-6' },
          { value: 'volcano-7', label: 'volcano-7' },
          { value: 'volcano-8', label: 'volcano-8' },
          { value: 'volcano-9', label: 'volcano-9' },
          { value: 'volcano-10', label: 'volcano-10' }
        ],
      },
      {
        value: 'SunsetOrange',
        label: '日暮',
        children: [
          { value: 'orange-1', label: 'orange-1' },
          { value: 'orange-2', label: 'orange-2' },
          { value: 'orange-3', label: 'orange-3' },
          { value: 'orange-4', label: 'orange-4' },
          { value: 'orange-5', label: 'orange-5' },
          { value: 'orange-6', label: 'orange-6' },
          { value: 'orange-7', label: 'orange-7' },
          { value: 'orange-8', label: 'orange-8' },
          { value: 'orange-9', label: 'orange-9' },
          { value: 'orange-10', label: 'orange-10' }
        ]
      },
      {
        value: 'CalendulaGold',
        label: '金盏花',
        children: [
          { value: 'gold-1', label: 'gold-1' },
          { value: 'gold-2', label: 'gold-2' },
          { value: 'gold-3', label: 'gold-3' },
          { value: 'gold-4', label: 'gold-4' },
          { value: 'gold-5', label: 'gold-5' },
          { value: 'gold-6', label: 'gold-6' },
          { value: 'gold-7', label: 'gold-7' },
          { value: 'gold-8', label: 'gold-8' },
          { value: 'gold-9', label: 'gold-9' },
          { value: 'gold-10', label: 'gold-10' }
        ]
      },
      {
        value: 'SunriseYellow',
        label: '日出',
        children: [
          { value: 'yellow-1', label: 'yellow-1' },
          { value: 'yellow-2', label: 'yellow-2' },
          { value: 'yellow-3', label: 'yellow-3' },
          { value: 'yellow-4', label: 'yellow-4' },
          { value: 'yellow-5', label: 'yellow-5' },
          { value: 'yellow-6', label: 'yellow-6' },
          { value: 'yellow-7', label: 'yellow-7' },
          { value: 'yellow-8', label: 'yellow-8' },
          { value: 'yellow-9', label: 'yellow-9' },
          { value: 'yellow-10', label: 'yellow-10' }
        ]
      },
      {
        value: 'Lime',
        label: '青柠',
        children: [
          { value: 'lime-1', label: 'lime-1' },
          { value: 'lime-2', label: 'lime-2' },
          { value: 'lime-3', label: 'lime-3' },
          { value: 'lime-4', label: 'lime-4' },
          { value: 'lime-5', label: 'lime-5' },
          { value: 'lime-6', label: 'lime-6' },
          { value: 'lime-7', label: 'lime-7' },
          { value: 'lime-8', label: 'lime-8' },
          { value: 'lime-9', label: 'lime-9' },
          { value: 'lime-10', label: 'lime-10' }
        ]
      },
      {
        value: 'PolarGreen',
        label: '极光绿',
        children: [
          { value: 'green-1', label: 'green-1' },
          { value: 'green-2', label: 'green-2' },
          { value: 'green-3', label: 'green-3' },
          { value: 'green-4', label: 'green-4' },
          { value: 'green-5', label: 'green-5' },
          { value: 'green-6', label: 'green-6' },
          { value: 'green-7', label: 'green-7' },
          { value: 'green-8', label: 'green-8' },
          { value: 'green-9', label: 'green-9' },
          { value: 'green-10', label: 'green-10' }
        ]
      },
      {
        value: 'Cyan',
        label: '明青',
        children: [
          { value: 'cyan-1', label: 'cyan-1' },
          { value: 'cyan-2', label: 'cyan-2' },
          { value: 'cyan-3', label: 'cyan-3' },
          { value: 'cyan-4', label: 'cyan-4' },
          { value: 'cyan-5', label: 'cyan-5' },
          { value: 'cyan-6', label: 'cyan-6' },
          { value: 'cyan-7', label: 'cyan-7' },
          { value: 'cyan-8', label: 'cyan-8' },
          { value: 'cyan-9', label: 'cyan-9' },
          { value: 'cyan-10', label: 'cyan-10' }
        ]
      },
      {
        value: 'DaybreakBlue',
        label: '拂晓蓝',
        children: [
          { value: 'blue-1', label: 'blue-1' },
          { value: 'blue-2', label: 'blue-2' },
          { value: 'blue-3', label: 'blue-3' },
          { value: 'blue-4', label: 'blue-4' },
          { value: 'blue-5', label: 'blue-5' },
          { value: 'blue-6', label: 'blue-6' },
          { value: 'blue-7', label: 'blue-7' },
          { value: 'blue-8', label: 'blue-8' },
          { value: 'blue-9', label: 'blue-9' },
          { value: 'blue-10', label: 'blue-10' }
        ]
      },
      {
        value: 'GeekBlue',
        label: '极客蓝',
        children: [
          { value: 'geekblue-1', label: 'geekblue-1' },
          { value: 'geekblue-2', label: 'geekblue-2' },
          { value: 'geekblue-3', label: 'geekblue-3' },
          { value: 'geekblue-4', label: 'geekblue-4' },
          { value: 'geekblue-5', label: 'geekblue-5' },
          { value: 'geekblue-6', label: 'geekblue-6' },
          { value: 'geekblue-7', label: 'geekblue-7' },
          { value: 'geekblue-8', label: 'geekblue-8' },
          { value: 'geekblue-9', label: 'geekblue-9' },
          { value: 'geekblue-10', label: 'geekblue-10' }
        ]
      },
      {
        value: 'GoldenPurple',
        label: '酱紫',
        children: [
          { value: 'purple-1', label: 'purple-1' },
          { value: 'purple-2', label: 'purple-2' },
          { value: 'purple-3', label: 'purple-3' },
          { value: 'purple-4', label: 'purple-4' },
          { value: 'purple-5', label: 'purple-5' },
          { value: 'purple-6', label: 'purple-6' },
          { value: 'purple-7', label: 'purple-7' },
          { value: 'purple-8', label: 'purple-8' },
          { value: 'purple-9', label: 'purple-9' },
          { value: 'purple-10', label: 'purple-10' }
        ]
      },
      {
        value: 'Magenta',
        label: '法式洋红',
        children: [
          { value: 'magenta-1', label: 'magenta-1' },
          { value: 'magenta-2', label: 'magenta-2' },
          { value: 'magenta-3', label: 'magenta-3' },
          { value: 'magenta-4', label: 'magenta-4' },
          { value: 'magenta-5', label: 'magenta-5' },
          { value: 'magenta-6', label: 'magenta-6' },
          { value: 'magenta-7', label: 'magenta-7' },
          { value: 'magenta-8', label: 'magenta-8' },
          { value: 'magenta-9', label: 'magenta-9' },
          { value: 'magenta-10', label: 'magenta-10' }
        ]
      },
      {
        value: 'Gray',
        label: '中性色',
        children: [
          { value: 'gray-1', label: 'gray-1' },
          { value: 'gray-2', label: 'gray-2' },
          { value: 'gray-3', label: 'gray-3' },
          { value: 'gray-4', label: 'gray-4' },
          { value: 'gray-5', label: 'gray-5' },
          { value: 'gray-6', label: 'gray-6' },
          { value: 'gray-7', label: 'gray-7' },
          { value: 'gray-8', label: 'gray-8' },
          { value: 'gray-9', label: 'gray-9' },
          { value: 'gray-10', label: 'gray-10' }
        ]
      }
    ]
  }

  UNSAFE_componentWillMount() {
    this.setState({
      options: this.state.options.map(option => {
        option.children = option.children.map(cell => {
          cell.label = <div className={'background ' + cell.value}>{cell.value}</div>

          return cell
        })
        return option
      })
    })
  }

  edit = (record) => {
    const { columns } = this.props
    let item = columns.filter(col => col.field === record.field)[0]

    this.setState({
      originField: item || '',
      editItem: record,
      contrastType: record.contrastType || '',
      signType: record.signType || '',
      selectIcon: record.icon || ''
    }, () => {
      let fieldvalue = {}
      Object.keys(record).forEach(key => {
        if (this.props.form.getFieldValue(key) !== undefined) {
          fieldvalue[key] = record[key]
        }
      })

      this.props.form.setFieldsValue(fieldvalue)
    })
  }

  fieldChange = (value) => {
    const { columns } = this.props
    let item = columns.filter(col => col.field === value)[0]

    this.setState({
      originField: item
    })

    if (this.state.contrastType !== 'static') {
      this.props.form.setFieldsValue({contrastField: ''})
    } else {
      this.props.form.setFieldsValue({contrastValue: ''})
    }
  }

  changeType = (val) => {
    this.setState({
      contrastType: val
    })
  }

  changeSignType = (val) => {
    let _type = 'background '
    if (val === 'icon' || val === 'font') {
      _type = 'font '
    }

    let newState = {
      signType: val,
      selectIcon: ''
    }

    if (val !== 'icon') {
      newState.options = this.state.options.map(option => {
        option.children = option.children.map(cell => {
          cell.label = <div className={_type + cell.value}>{cell.value}</div>

          return cell
        })
        return option
      })
    }

    this.setState(newState)
  }

  changeIcon = (val) => {
    this.setState({
      selectIcon: val,
      options: this.state.options.map(option => {
        option.children = option.children.map(cell => {
          cell.label = <div className={'font ' + cell.value}><Icon type={val} /></div>

          return cell
        })
        return option
      })
    })
  }

  handleConfirm = () => {
    // const { columns } = this.props
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.uuid = this.state.editItem ? this.state.editItem.uuid : ''

        this.props.markChange(values)
        this.setState({
          editItem: null
        })
        this.props.form.setFieldsValue({
          field: '',
        })
        if (this.state.contrastType !== 'static') {
          this.props.form.setFieldsValue({contrastField: ''})
        } else {
          this.props.form.setFieldsValue({contrastValue: ''})
        }
      }
    })
  }

  render() {
    const { columns } = this.props
    const { originField, contrastType, signType, options, selectIcon } = this.state
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }

    let contFields = columns.filter(col => originField.field !== col.field && originField.type === col.type)

    return (
      <Form {...formItemLayout} id="model-mark-form-box" className="mingke-table">
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item label={'字段'}>
              {getFieldDecorator('field', {
                initialValue: originField.field,
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '字段!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={this.fieldChange}
                >
                  {columns.map(item => (
                    <Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
                  ))}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'对比类型'}>
              {getFieldDecorator('contrastType', {
                initialValue: 'static'
              })(
                <Radio.Group onChange={(e) => this.changeType(e.target.value)}>
                  <Radio value="static">静态</Radio>
                  <Radio value="dynamic">动态</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {contrastType === 'static' ? <Col span={6}>
            <Form.Item label={'对比值'}>
              {getFieldDecorator('contrastValue', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '对比值!'
                  }
                ]
              })(originField.type === 'number' ? <InputNumber /> : <Input placeholder="" autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {contrastType === 'dynamic' ? <Col span={6}>
            <Form.Item label={'对比字段'}>
              {getFieldDecorator('contrastField', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '对比字段!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {contFields.map(item => (
                    <Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
                  ))}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={6}>
            <Form.Item label={'对比方式'}>
              {getFieldDecorator('match', {
                initialValue: '=',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '对比方式!'
                  }
                ]
              })(
                <Select>
                  <Select.Option value="="> = </Select.Option>
                  {originField.type === 'number' ? <Select.Option value=">"> > </Select.Option> : null}
                  {originField.type === 'number' ? <Select.Option value="<"> &lt; </Select.Option> : null}
                  {originField.type === 'text' ? <Select.Option value="like"> like </Select.Option> : null}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'标记方式'}>
              {getFieldDecorator('signType', {
                initialValue: 'background',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '标记方式!'
                  }
                ]
              })(
                <Select onChange={this.changeSignType}>
                  <Select.Option value="font">单元格（文字）</Select.Option>
                  <Select.Option value="background">单元格（背景）</Select.Option>
                  <Select.Option value="line">行</Select.Option>
                  <Select.Option value="icon">图标</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          {signType === 'icon' ? <Col span={6}>
            <Form.Item label={'图标位置'}>
              {getFieldDecorator('position', {
                initialValue: 'back'
              })(
                <Radio.Group>
                  <Radio value="front">前</Radio>
                  <Radio value="back">后</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {signType === 'icon' ? <Col span={6}>
            <Form.Item label={'图标'}>
              {getFieldDecorator('icon', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '图标!'
                  }
                ]
              })(
                <Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}>
                  <Select.Option value="arrow-up"><Icon type="arrow-up" /></Select.Option>
                  <Select.Option value="arrow-down"><Icon type="arrow-down" /></Select.Option>
                  <Select.Option value="arrow-left"><Icon type="arrow-left" /></Select.Option>
                  <Select.Option value="arrow-right"><Icon type="arrow-right" /></Select.Option>
                  <Select.Option value="check-circle"><Icon type="check-circle" /></Select.Option>
                  <Select.Option value="close-circle"><Icon type="close-circle" /></Select.Option>
                  <Select.Option value="clock-circle"><Icon type="clock-circle" /></Select.Option>
                  <Select.Option value="pause-circle"><Icon type="pause-circle" /></Select.Option>
                  <Select.Option value="stop"><Icon type="stop" /></Select.Option>
                  <Select.Option value="question-circle"><Icon type="question-circle" /></Select.Option>
                  <Select.Option value="exclamation-circle"><Icon type="exclamation-circle" /></Select.Option>
                  <Select.Option value="check-square"><Icon type="check-square" /></Select.Option>
                  <Select.Option value="warning"><Icon type="warning" /></Select.Option>
                  <Select.Option value="minus-circle"><Icon type="minus-circle" /></Select.Option>
                  <Select.Option value="issues-close"><Icon type="issues-close" /></Select.Option>
                  <Select.Option value="question"><Icon type="question" /></Select.Option>
                  <Select.Option value="fall"><Icon type="fall" /></Select.Option>
                  <Select.Option value="rise"><Icon type="rise" /></Select.Option>
                  <Select.Option value="link"><Icon type="link" /></Select.Option>
                  {/* <Select.Option value="link"></Select.Option> */}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          {(signType === 'icon' && selectIcon) || signType !== 'icon' ? <Col span={6}>
            <Form.Item label="颜色">
              {getFieldDecorator('color', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '颜色!'
                  }
                ]
              })(
                <Cascader
                  options={options}
                  placeholder=""
                  displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + ' / ' + selectedOptions[1].value : ''}
                  getPopupContainer={() => document.getElementById('model-mark-form-box')}
                />
              )}
            </Form.Item>
          </Col> : null}
          <Col span={signType === 'icon' ? 24 : 12} style={{textAlign: 'right', marginBottom: 10}}>
            <Button onClick={this.handleConfirm} type="primary" className="mk-green">
              保存
            </Button>
          </Col>
        </Row>
      </Form>
    )
  }
}

export default Form.create()(UniqueForm)

 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.scss

New file
@@ -0,0 +1,26 @@
#model-mark-form-box {
  .ant-select-dropdown-menu-item {
    .anticon {
      font-size: 16px;
    }
  }
  .ant-cascader-menu {
    min-width: 120px;
    height: 300px;
  }
  .ant-cascader-menu + .ant-cascader-menu {
    min-width: 130px;
    .ant-cascader-menu-item {
      padding: 0;
      div {
        padding: 5px 12px;
        .anticon {
          font-size: 18px;
        }
      }
    }
    .ant-cascader-menu-item:hover {
      background: unset;
    }
  }
}

 src/templates/subtableconfig/index.jsx

@@ -1099,12 +1099,12 @@
                updatesearch={this.updatesearch}
              />
              <div className="chart-view" style={{position: 'relative'}}>
                {/* 视图组 */}
                <ChartGroupComponent
                {/* 视图组 权限 会员等级20+ */}
                {this.props.memberLevel >= 20 ? <ChartGroupComponent
                  config={config}
                  sysRoles={this.props.sysRoles}
                  updatechartgroup={this.updatechartgroup}
                />
                /> : null}
                {config.charts.map(item => {
                  if (!config.expand && chartview !== item.uuid) return ''

@@ -1172,7 +1172,8 @@
const mapStateToProps = (state) => {
  return {
    sysRoles: state.sysRoles,
    permFuncField: state.permFuncField
    permFuncField: state.permFuncField,
    memberLevel: state.memberLevel
  }
}


 src/templates/zshare/formconfig.jsx

@@ -1059,33 +1059,23 @@
      }, {
        value: 'textarea',
        text: Formdict['header.form.textarea']
      }, {
        value: 'contrast',
        text: Formdict['header.form.contrastCol']
      }]
    },
    {
      type: 'select',
      key: 'Align',
      label: Formdict['header.form.align'],
      initVal: card.Align,
      required: true,
      options: [{
        value: 'left',
        text: Formdict['header.form.alignLeft']
      }, {
        value: 'right',
        text: Formdict['header.form.alignRight']
      }, {
        value: 'center',
        text: Formdict['header.form.alignCenter']
      }]
      type: 'number',
      key: 'Width',
      min: 1,
      max: 1000,
      decimal: 0,
      label: Formdict['header.form.columnWidth'],
      initVal: card.Width,
      required: true
    },
    {
      type: 'radio',
      key: 'Hide',
      label: Formdict['header.form.Hide'],
      initVal: card.Hide,
      initVal: card.Hide || 'false',
      required: true,
      options: [{
        value: 'true',
@@ -1099,7 +1089,7 @@
      type: 'radio',
      key: 'IsSort',
      label: Formdict['header.form.IsSort'],
      initVal: card.IsSort,
      initVal: card.IsSort || 'true',
      required: true,
      options: [{
        value: 'true',
@@ -1110,14 +1100,21 @@
      }]
    },
    {
      type: 'number',
      key: 'Width',
      min: 1,
      max: 1000,
      decimal: 0,
      label: Formdict['header.form.columnWidth'],
      initVal: card.Width,
      required: true
      type: 'radio',
      key: 'Align',
      label: Formdict['header.form.align'],
      initVal: card.Align || 'left',
      required: true,
      options: [{
        value: 'left',
        text: Formdict['header.form.alignLeft']
      }, {
        value: 'center',
        text: Formdict['header.form.alignCenter']
      }, {
        value: 'right',
        text: Formdict['header.form.alignRight']
      }]
    },
    {
      type: 'number',
@@ -1147,6 +1144,13 @@
      required: false
    },
    {
      type: 'number',
      key: 'fieldlength',
      label: Formdict['header.form.field.length'],
      initVal: card.fieldlength || (card.type === 'text' ? 50 : 512),
      required: true
    },
    {
      type: 'text',
      key: 'prefix',
      label: Formdict['header.form.prefix'],
@@ -1162,76 +1166,6 @@
      tooltipClass: 'middle',
      required: false,
      readonly: false
    },
    {
      type: 'select',
      key: 'match',
      label: Formdict['header.form.match'],
      initVal: card.match || '',
      options: [{
        value: '',
        text: Formdict['header.form.empty']
      }, {
        value: '>',
        text: '>'
      }, {
        value: '<',
        text: '<'
      }, {
        value: '>=',
        text: '>='
      }, {
        value: '<=',
        text: '<='
      }],
      required: false
    },
    {
      type: 'text',
      key: 'matchVal',
      min: -Infinity,
      max: Infinity,
      decimal: 0,
      label: Formdict['header.form.matchVal'],
      initVal: card.matchVal || '',
      required: false,
      readonly: false
    },
    {
      type: 'select',
      key: 'color',
      label: Formdict['header.form.color'],
      initVal: card.color || '',
      options: [{
        value: '',
        text: Formdict['header.form.empty']
      }, {
        value: 'red',
        text: '红色（内容）'
      }, {
        value: 'redbg',
        text: '红色（背景）'
      }, {
        value: 'orange',
        text: '橙色（内容）'
      }, {
        value: 'orangebg',
        text: '橙色（背景）'
      }, {
        value: 'green',
        text: '绿色（内容）'
      }, {
        value: 'greenbg',
        text: '绿色（背景）'
      }],
      required: false
    },
    {
      type: 'number',
      key: 'fieldlength',
      label: Formdict['header.form.field.length'],
      initVal: card.fieldlength || (card.type === 'text' ? 50 : 512),
      required: false
    },
    {
      type: 'number',
@@ -1260,20 +1194,20 @@
      }]
    },
    {
      type: 'multiselect',
      key: 'blacklist',
      label: Formdict['header.form.blacklist'],
      initVal: card.blacklist || [],
      required: false,
      options: roleList
    },
    {
      type: 'cascader',
      key: 'linkmenu',
      label: Formdict['header.form.linkmenu'],
      initVal: card.linkmenu || [],
      required: false,
      options: menulist
    },
    {
      type: 'multiselect',
      key: 'blacklist',
      label: Formdict['header.form.blacklist'],
      initVal: card.blacklist || [],
      required: false,
      options: roleList
    }
  ]
}

 src/views/login/index.jsx

@@ -1,5 +1,6 @@
import React, {Component} from 'react'
import { message, Modal } from 'antd'
import {connect} from 'react-redux'
import md5 from 'md5'
import moment from 'moment'
import Api from '@/api'
@@ -9,6 +10,7 @@
import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import { modifyMemberLevel } from '@/store/action'
import './index.scss'

const LoginForm = asyncLoadComponent(() => import('./loginform'))
@@ -210,6 +212,12 @@
          link.href = res.titlelogo
          document.getElementsByTagName('head')[0].appendChild(link)
        }

        let memberLevel = res.member_level

        if (typeof(memberLevel) === 'number' && memberLevel > 10) {
          this.props.modifyMemberLevel(memberLevel)
        }
      } else {
        message.warning(res.message)
      }
@@ -354,4 +362,14 @@
  }
}

export default Login
const mapStateToProps = () => {
  return {}
}

const mapDispatchToProps = (dispatch) => {
  return {
    modifyMemberLevel: (memberLevel) => dispatch(modifyMemberLevel(memberLevel))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)