Merge branch 'master' of http://192.168.1.41:3000/outaozhen/cldV2react

src/basic/css/common.scss

@@ -1,490 +0,0 @@
-@import './variable.scss';
-
-/** 背景颜色 */
-.zh-bg-success {
-  background-color: $zh-green;
-}
-
-.zh-bg-gray {
-  background-color: $zh-light-gray;
-}
-
-.zh-bg-blue {
-  background-color: $zh-blue;
-}
-
-.zh-bg-red {
-  background-color: $zh-red;
-}
-
-.zh-bg-yellow {
-  background-color: $zh-yellow;
-}
-
-.zh-bg-green {
-  background-color: $zh-green;
-}
-
-.zh-bg-white {
-  background-color: $zh-white;
-}
-
-
-/** 字体颜色 */
-.zh-gray {
-  color: $zh-gray;
-}
-
-.zh-red {
-  color: $zh-red;
-}
-
-.zh-blue {
-  color: $zh-blue;
-}
-
-.zh-green {
-  color: $zh-green;
-}
-
-.zh-yellow {
-  color: $zh-yellow;
-}
-
-.zh-muted {
-  color: $zh-muted;
-}
-
-.zh-primary {
-  color: $zh-primary;
-}
-
-/** 文本水平对齐方向 */
-.zh-text-center {
-  text-align: center;
-}
-
-.zh-text-left {
-  text-align: left;
-}
-
-.zh-text-right {
-  text-align: right;
-}
-
-
-.zh-width-100P {
-  width: 100%;
-}
-
-.zh-height-100P {
-  height: 100%;
-}
-
-/** 字体粗细 */
-@for $i from 1 through 9 {
-  .zh-fw-#{$i * 100} {
-    font-weight: $i * 100;
-  }
-}
-
-/* 预设常用样式 */
-@for $i from 1 through 50 {
-  /* font-size */
-  .zh-fz-#{$i} {
-    font-size: 1px * $i;
-  }
-
-  /* padding */
-  .zh-pd-#{$i} {
-    padding: 1px * $i;
-  }
-  .zh-pd-top-#{$i} {
-    padding-top: 1px * $i;
-  }
-  .zh-pd-right-#{$i} {
-    padding-right: 1px * $i;
-  }
-  .zh-pd-bottom-#{$i} {
-    padding-bottom: 1px * $i;
-  }
-  .zh-pd-left-#{$i} {
-    padding-left: 1px * $i;
-  }
-  .zh-pd-tb-#{$i} {
-    padding-top: 1px * $i;
-    padding-bottom: 1px * $i;
-  }
-  .zh-pd-lr-#{$i} {
-    padding-right: 1px * $i;
-    padding-left: 1px * $i;
-  }
-
-  /* margin */
-  .zh-mg-#{$i} {
-    margin: 1px * $i;
-  }
-  .zh-mg-top-#{$i} {
-    margin-top: 1px * $i;
-  }
-  .zh-mg-right-#{$i} {
-    margin-right: 1px * $i;
-  }
-  .zh-mg-bottom-#{$i} {
-    margin-bottom: 1px * $i;
-  }
-  .zh-mg-left-#{$i} {
-    margin-left: 1px * $i;
-  }
-  .zh-mg-tb-#{$i} {
-    margin-top: 1px * $i;
-    margin-bottom: 1px * $i;
-  }
-  .zh-mg-lr-#{$i} {
-    margin-right: 1px * $i;
-    margin-left: 1px * $i;
-  }
-  // width & height
-  .zh-width-#{$i} {
-    width: 1px * $i;
-  }
-  .zh-height-#{$i} {
-    height: 1px * $i;
-  }
-
-  // radius
-  .zh-radius-#{$i} {
-    border-radius: 1px * $i;
-  }
-
-  // line-height
-  .zh-lh-#{$i} {
-    line-height: 1px * $i;
-  }
-}
-
-.zh-block {
-  display:inline-block;
-}
-
-/** flex布局 */
-.zh-flex {
-  display: flex;
-}
-
-.zh-flex-wrap {
-  @extend .zh-flex;
-
-  flex-wrap: wrap;
-}
-
-.zh-flex-row {
-  @extend .zh-flex;
-
-  flex-direction: row;
-}
-
-.zh-flex-column {
-  @extend .zh-flex;
-
-  flex-direction: column;
-}
-
-.zh-flex-sub {
-  flex: 1;
-}
-
-.zh-flex-twice {
-  flex: 2;
-}
-
-.zh-flex-treble {
-  flex: 3;
-}
-
-.zh-flex-quadruple {
-  flex: 4;
-}
-
-.zh-flex-quintuple {
-  flex: 5;
-}
-.zh-align-start {
-  @extend .zh-flex;
-
-  align-items: flex-start;
-}
-
-.zh-align-end {
-  @extend .zh-flex;
-
-  align-items: flex-end;
-}
-
-.zh-align-center {
-  @extend .zh-flex;
-
-  align-items: center;
-}
-
-.zh-align-stretch {
-  @extend .zh-flex;
-
-  align-items: stretch;
-}
-
-.zh-align-baseline {
-  @extend .zh-flex;
-
-  align-items: baseline;
-}
-
-.zh-self-start {
-  @extend .zh-flex;
-
-  align-self: flex-start;
-}
-
-.zh-self-center {
-  @extend .zh-flex;
-
-  align-self: flex-center;
-}
-
-.zh-self-end {
-  @extend .zh-flex;
-
-  align-self: flex-end;
-}
-
-.zh-self-stretch {
-  @extend .zh-flex;
-
-  align-self: stretch;
-}
-
-.zh-justify-start {
-  @extend .zh-flex;
-
-  justify-content: flex-start;
-}
-
-.zh-justify-end {
-  @extend .zh-flex;
-
-  justify-content: flex-end;
-}
-
-.zh-justify-center {
-  @extend .zh-flex;
-
-  justify-content: center;
-}
-
-.zh-justify-between {
-  @extend .zh-flex;
-
-  justify-content: space-between;
-}
-
-.zh-justify-around {
-  @extend .zh-flex;
-
-  justify-content: space-around;
-}
-
-.zh-flex-row-center {
-  @extend .zh-flex-row;
-  @extend .zh-justify-center;
-  @extend .zh-align-center;
-}
-
-.zh-flex-column-center {
-  @extend .zh-flex-column;
-  @extend .zh-justify-center;
-  @extend .zh-align-center;
-}
-
-
-// grid布局
-.zh-grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-@mixin multi-border($n) {
-  &.zh-grid-border {
-    & > div {
-      @include zh-border;
-      &:not(:nth-last-child(-n + #{$n})) {
-        &::after {
-          border-bottom: 1px solid $zh-line-color;
-        }
-      }
-      &:not(:nth-child(#{$n}n)) {
-        &::after {
-          border-right: 1px solid $zh-line-color;
-        }
-      }
-    }
-  }
-}
-
-.zh-grid.zh-col-2 {
-  & > div {
-    width: 50%;
-  }
-
-  @include multi-border(2);
-}
-
-.zh-grid.zh-col-3 {
-  & > div {
-    width: calc(100% / 3);
-  }
-
-  @include multi-border(3);
-}
-
-@mixin space-calc($i, $n) {
-  & > div {
-    width: calc((100% - #{($n - 1) * $i}px) / #{$n});
-    &:not(:nth-last-child(-n + #{$n})) {
-      margin-bottom: #{$i}px;
-    }
-    &:not(:nth-child(#{$n}n)) {
-      margin-right: #{$i}px;
-    }
-  }
-}
-
-// 处理列之间需要有空隙情况
-@for $i from 1 through 50 {
-  .zh-grid.zh-col-1.zh-col-space-#{$i} {
-    & > div {
-      margin-bottom: #{$i}px;
-    }
-  }
-  .zh-grid.zh-col-2.zh-col-space-#{$i} {
-    @include space-calc($i, 2);
-  }
-  .zh-grid.zh-col-3.zh-col-space-#{$i} {
-    @include space-calc($i, 3);
-  }
-  .zh-grid.zh-col-4.zh-col-space-#{$i} {
-    @include space-calc($i, 4);
-  }
-  .zh-grid.zh-col-5.zh-col-space-#{$i} {
-    @include space-calc($i, 5);
-  }
-  .zh-grid.zh-col-6.zh-col-space-#{$i} {
-    @include space-calc($i, 6);
-  }
-}
-
-/** 省略号 */
-@for $i from 1 through 2 {
-  .zh-ellipsis-#{$i} {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: #{$i};
-    overflow: hidden;
-  }
-}
-
-/** 鼠标手 */
-.zh-pointer {
-  cursor: pointer;
-}
-
-/** 线条 */
-@for $i from 1 through 5 {
-  .zh-border-top-#{$i} {
-    border-top: 1px * $i solid #f3f3f3;
-  }
-}
-
-/** 布局 */
-.wrap-container {
-  @extend .zh-width-100P;
-  @extend .zh-height-100P;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  background: white;
-}
-
-/** 滚动条自定义 */
-::-webkit-scrollbar{
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track{
-  background: rgb(239, 239, 239);
-  border-radius: 2px;
-}
-::-webkit-scrollbar-thumb{
-  background: #bfbfbf;
-  border-radius: 10px;
-}
-::-webkit-scrollbar-thumb:hover{
-  background: #636363;
-}
-
-
-// 弹窗左右结构
-.sheet-box {
-  overflow: hidden;
-  .sheet-box-left {
-    height: calc( 100vh );
-    // height: calc(100vh - 15px);
-    padding: 24px 0 24px 24px;
-    overflow-y: auto;
-    .sheet-left-panel {
-      overflow-x: hidden;
-    }
-  }
-  .sheet-box-right {
-    padding: 24px 24px 24px 0;
-    // margin: 0 -24px -24px;
-    background-color: #fafafa;
-    border-left: 1px solid #eaeaea;
-  }
-}
-.sheet-right-panel,.sheet-panel-record {
-  height: calc((100vh - 48px - 92px - 64px) / 2);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.sheet-btns {
-  height: 54px;
-}
-.sheet-right-panel .ant-card,.sheet-right-panel .ant-table{
-  background: #fafafa;
-}
-.sheet-right-panel .ant-table-tbody > tr.ant-table-placeholder > td {
-  border-bottom: none;
-}
-.sheet-right-panel .ant-table-tbody > tr.ant-table-placeholder:hover > td{
-  background: none !important;
-}
-.zh-circle-icon {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.zh-square-icon {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-}
-
-.zh-container {
-  height: calc(100vh - 48px - 48px);
-  overflow: hidden;
-  background-color: #ffffff;
-}

src/basic/css/variable.scss

@@ -1,64 +0,0 @@
-$zh-font-size: 12px !default;
-$zh-green: #28a745 !default;
-$zh-gray: #757575 !default;
-$zh-muted: #6c757d !default;
-$zh-light-gray: #bbbbbb !default;
-$zh-blue: #007bff !default;
-$zh-red: #dc3545 !default;
-$zh-yellow: #ffc170 !default;
-$zh-white: #ffffff !default;
-$zh-line-color: rgba(0, 0, 0, 0.125) !default;
-$zh-danger: #fd3995 !default;
-$zh-warning: #ffc241 !default;
-$zh-success: #1dc9b7 !default;
-$zh-primary: #886ab5 !default;
-// 实现0.5px的效果
-@mixin zh-border {
-  position: relative;
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    content: ' ';
-    pointer-events: none;
-  }
-}
-
-.auto-scroll-y {
-  height: 100%;
-  .ant-spin-nested-loading,
-  .ant-spin-container,
-  .ant-table,
-  .ant-table-scroll,
-  .ant-table-body-inner,
-  .ant-table-fixed-left,
-  .ant-table-content {
-    height: 100%;
-  }
-  .ant-table-content {
-    position: relative;
-  }
-  .ant-table-body,
-  .ant-table-body-inner {
-    overflow-y: auto !important;
-  }
-  .ant-table-header {
-    overflow-y: hidden !important;
-  }
-  .ant-table-body {
-    height: 580px;
-    overflow-y: auto;
-  }
-  .ant-table-body-outer {
-    height: 580px;
-    overflow-y: auto;
-  }
-  .ant-table-body-inner {
-    overflow-x: hidden;
-  }
-}

src/global.jsx

@@ -2,7 +2,6 @@ import { Button, message, notification } from 'antd'
 import React from 'react'
 import { useIntl } from 'umi'
 import defaultSettings from '../config/defaultSettings'
-import './basic/css/common.scss'
 import 'windi.css'
 import '@icon-park/react/styles/index.less'
 

src/global.less

@@ -104,3 +104,59 @@ input:-webkit-autofill:active {
 .ant-picker {
   width: 100%;
 }
+
+// 弹窗左右结构
+.sheet-box {
+  overflow: hidden;
+  .sheet-box-left {
+    height: calc(100vh);
+    // height: calc(100vh - 15px);
+    padding: 24px 0 24px 24px;
+    overflow-y: auto;
+    .sheet-left-panel {
+      overflow-x: hidden;
+    }
+  }
+  .sheet-box-right {
+    padding: 24px 24px 24px 0;
+    // margin: 0 -24px -24px;
+    background-color: #fafafa;
+    border-left: 1px solid #eaeaea;
+  }
+}
+.sheet-right-panel,
+.sheet-panel-record {
+  height: calc((100vh - 48px - 92px - 64px) / 2);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.sheet-btns {
+  height: 54px;
+}
+.sheet-right-panel .ant-card,
+.sheet-right-panel .ant-table {
+  background: #fafafa;
+}
+.sheet-right-panel .ant-table-tbody > tr.ant-table-placeholder > td {
+  border-bottom: none;
+}
+.sheet-right-panel .ant-table-tbody > tr.ant-table-placeholder:hover > td {
+  background: none !important;
+}
+
+/** 滚动条自定义 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: rgb(239, 239, 239);
+  border-radius: 2px;
+}
+::-webkit-scrollbar-thumb {
+  background: #bfbfbf;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #636363;
+}

src/pages/Customer/Client/index.jsx

@@ -51,7 +51,7 @@ const Client = props => {
         text: (
           <>
             <span
-              className="zh-circle-icon zh-mg-right-3"
+              className="w-12px h-12px inline-block rounded-1/2 mr-3px"
               style={{ backgroundColor: personTagColorMap[item.id] }}
             />
             <span>{item.name}</span>
@@ -66,7 +66,7 @@ const Client = props => {
         text: (
           <>
             <span
-              className="zh-square-icon zh-mg-right-3"
+              className="w-12px h-12px inline-block mr-3px"
               style={{ backgroundColor: teamTagColorMap[item.id] }}
             />
             <span>{item.name}</span>

src/pages/Product/Lock/Lockstore/components/LocksDetail/LockTabList.jsx

@@ -63,7 +63,7 @@ const LockTabList = props => {
                         {servicelogEnum[item.status]} <a>{item.client}</a>
                         <br />
                         <a>@{item.operator}</a>{' '}
-                        <span className="zh-gray">
+                        <span className="text-gray-500">
                           {dayjsFormat(item.updatetime, 'MM-DD HH:mm')}
                         </span>
                         {/* <List.Item.Meta
@@ -86,7 +86,7 @@ const LockTabList = props => {
           type="primary"
           ghost
           size="small"
-          className="zh-mg-right-3"
+          className="mr-3px"
           onClick={() =>
             setAddLonglelog({ ...setAddLonglelog, visible: true, type: lockTypeEnum.SALE })
           }>

src/pages/Product/Lock/Lockstore/index.jsx

@@ -19,7 +19,7 @@ export const ProductLabel = ({ data }) => {
   return (
     <div>
       {newData.map((item, index) => (
-        <span key={index} className="zh-mg-bottom-5 zh-block">
+        <span key={index} className="mb-5px block">
           <Tag color="#886ab5">{item}</Tag>
         </span>
       ))}

src/pages/Staff/Employee/components/AddStaff/index.jsx

@@ -1,4 +1,5 @@
-import { ModalForm } from '@ant-design/pro-form'
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import { Plus } from '@ant-design/icons'
 import { Button, Row, Col } from 'antd'
 import React from 'react'
 
@@ -14,7 +15,7 @@ const AddStaff = props => {
       title="添加员工"
       trigger={
         <Button key="button" type="primary" size="small" className="flex items-center">
-          <Plus className="zh-mg-right-5" />
+          <Plus className="mr-5px" />
           员工
         </Button>
       }

src/pages/Staff/Employee/components/StaffModal/index.jsx

@@ -94,7 +94,7 @@ const StaffModal = ({ id, onSelect, postUrl }) => {
               <span className="w-1/6">{item.username}</span>
               <span className="w-1/6">{item.departmentName}</span>
               <span className="w-1/6">{item.position}</span>
-              <span className="w-1/2 zh-justify-between">
+              <span className="w-1/2 flex justify-between">
                 <span>{item.emergencyContacts}</span>
                 <Button type="primary" size="small" onClick={() => connectStaff(item.id)}>
                   关联