cnhis-design-vue 3.1.14-beta.8 → 3.1.15-beta.0

package/es/packages/big-table/src/components/edit-form/edit-time.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    col: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    row: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    index: {
+        type: (NumberConstructor | ObjectConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "formChange"[], "formChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    col: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    row: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    index: {
+        type: (NumberConstructor | ObjectConstructor)[];
+        default: number;
+    };
+}>> & {
+    onFormChange?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
+    col: Record<string, any>;
+    row: Record<string, any>;
+    index: number | Record<string, any>;
+}>;
+export default _default;

package/es/packages/big-table/src/components/edit-form/edit-time.js

@@ -0,0 +1,52 @@
+import { defineComponent, createVNode, mergeProps } from 'vue';
+import { NTimePicker } from 'naive-ui';
+
+var editTime = defineComponent({
+  name: "EditTime",
+  inheritAttrs: false,
+  components: {
+    NTimePicker
+  },
+  props: {
+    type: {
+      type: String,
+      default: "input"
+    },
+    col: {
+      type: Object,
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: [Number, Object],
+      default: 0
+    }
+  },
+  emits: ["formChange"],
+  setup(props, {
+    attrs,
+    emit
+  }) {
+    const onUpdateValue = (value) => {
+      emit("formChange", {
+        value,
+        row: props.row,
+        column: props.col,
+        index: props.index
+      });
+    };
+    const config = {
+      placeholder: props.col.placeholder || "\u8BF7\u9009\u62E9",
+      valueFormat: props.col.valueFormat || "HH:mm",
+      ...props.col.componentProps || {}
+    };
+    return () => createVNode(NTimePicker, mergeProps(attrs, config, {
+      "onUpdateValue": onUpdateValue
+    }), null);
+  }
+});
+
+export { editTime as default };

package/es/packages/big-table/src/components/input-button.js

@@ -1,4 +1,35 @@
-import script from './input-button.vue_vue_type_script_setup_true_lang.js';
-export { default } from './input-button.vue_vue_type_script_setup_true_lang.js';
+import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, createTextVNode } from 'vue';
+import { NInput, NButton } from 'naive-ui';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
-script.__file = "packages/big-table/src/components/input-button.vue";
+const _hoisted_1 = /* @__PURE__ */ createTextVNode("\u641C\u7D22");
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "input-button",
+  setup(__props) {
+    const content = ref("");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NInput), {
+        value: content.value,
+        "onUpdate:value": _cache[1] || (_cache[1] = ($event) => content.value = $event),
+        placeholder: "\u5B57\u6BB5\u641C\u7D22",
+        class: "check-seach-input"
+      }, {
+        suffix: withCtx(() => [
+          createVNode(unref(NButton), {
+            text: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("trigger", content.value))
+          }, {
+            default: withCtx(() => [
+              _hoisted_1
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["value"]);
+    };
+  }
+});
+var InputButtonScript = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "input-button.vue"]]);
+
+export { InputButtonScript as default };

package/es/packages/big-table/src/components/separate.js

@@ -1,4 +1,30 @@
-import script from './separate.vue_vue_type_script_setup_true_lang.js';
-export { default } from './separate.vue_vue_type_script_setup_true_lang.js';
+import { defineComponent, computed, openBlock, createElementBlock, createTextVNode, toDisplayString, unref, createElementVNode } from 'vue';
+import { useSeparateMap } from '../../../../packages/big-table/src/hooks/useSeparateRow';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
-script.__file = "packages/big-table/src/components/separate.vue";
+const _hoisted_1 = { class: "big-table__separate" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "big-table__separatePlaceholder" }, "p", -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "separate",
+  props: {
+    col: { type: Object, required: true },
+    row: { type: Object, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { separateDataMap } = useSeparateMap();
+    const displayContent = computed(() => {
+      const target = separateDataMap.value.get(props.row);
+      return target ? target.separateData[props.col.field] : "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createTextVNode(toDisplayString(unref(displayContent)) + " ", 1),
+        _hoisted_2
+      ]);
+    };
+  }
+});
+var Separate = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "separate.vue"]]);
+
+export { Separate as default };

package/es/packages/big-table/src/components/separate.vue.d.ts

@@ -1,9 +1,8 @@
 import { AnyObject } from '../../../../../es/src/types';
 import { PropType } from 'vue';
-import { VxeTableDefines } from 'vxe-table';
 declare const _default: import("vue").DefineComponent<{
     col: {
-        type: PropType<VxeTableDefines.ColumnInfo>;
+        type: PropType<AnyObject>;
         required: true;
     };
     row: {
@@ -13,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         col: {
-            type: PropType<VxeTableDefines.ColumnInfo>;
+            type: PropType<AnyObject>;
             required: true;
         };
         row: {
@@ -32,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     displayContent: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     col: {
-        type: PropType<VxeTableDefines.ColumnInfo>;
+        type: PropType<AnyObject>;
         required: true;
     };
     row: {

package/es/packages/big-table/src/hooks/useColumnConfigAdaptor.js

@@ -1,4 +1,5 @@
-import { isObject, cloneDeep, isString, isFunction, isArray } from 'lodash-es';
+import { cloneDeep, isString, isFunction, isArray } from 'lodash-es';
+import { isObject } from '@vue/shared';
 
 const REMOVE_PROPERTY = Symbol("remove property");
 function useColumnConfigAdaptor() {
@@ -23,21 +24,59 @@ function useColumnConfigAdaptor() {
         ["1", 1]
       ]);
       const htmlTypeValueMap = new Map([
-        ...["RADIO", "RADIO_BLOCK", "CHECKBOX", "CHECKBOX_BLOCK", "SELECT"].map((type) => [type, "select"]),
+        ...["RADIO", "RADIO_BLOCK", "CHECKBOX", "CHECKBOX_BLOCK", "SELECT", "SWITCH_COMPONENT"].map((type) => [
+          type,
+          "select"
+        ]),
         ...["INPUT"].map((type) => [type, "input"]),
         ...["DIGITAL"].map((type) => [type, "number"])
       ]);
-      const settingMap = /* @__PURE__ */ new Map([
-        ["multi_select_value", { property: "multiple", valueMap: multipleValueMap }],
-        [
-          "is_null",
-          (value, result, _fieldItem, _editRules) => {
-            if (value === "0")
-              return;
-            if (value === "1")
-              _editRules[_fieldItem.elementId] = [{ required: true, message: "\u5FC5\u586B" }];
+      const isNullHandler = (value, result, _fieldItem, _editRules) => {
+        if (value === "1")
+          return;
+        if (value === "0")
+          _editRules[_fieldItem.val_key] = [{ required: true, message: "\u5FC5\u586B" }];
+      };
+      const validateHandler = (value, result) => {
+        if (!isObject(value))
+          return;
+        result.componentProps = Object.assign({}, result.comonentProps, {
+          maxlength: value.max_length,
+          minlength: value.min_length,
+          max: value.max_value,
+          min: value.min_value,
+          precision: value.decimal_length
+        });
+      };
+      const dateRangeValidate = (value, result) => {
+        if (!isObject(value))
+          return;
+        result.isDateDisabled = (ts, row) => {
+          if (!isObject(row))
+            return;
+          const { startDate, endDate } = value;
+          let invalid = false;
+          if (startDate) {
+            invalid = new Date(row[startDate]).getTime() > ts;
           }
-        ],
+          if (endDate) {
+            invalid = invalid || new Date(row[endDate]).getTime() < ts;
+          }
+          return invalid;
+        };
+      };
+      const switchOptionHandler = (value, result) => {
+        if (!isObject(value))
+          return;
+        const option = { label: value.describe, ...value };
+        result.options = isArray(result.options) ? [...result.options, option] : [option];
+      };
+      const settingMap = new Map([
+        ["multi_select_value", { property: "multiple", valueMap: multipleValueMap }],
+        ["is_null", isNullHandler],
+        ["validate", validateHandler],
+        ["dateValidate", dateRangeValidate],
+        ...["open", "close"].map((key) => [key, switchOptionHandler]),
         ["is_edit", { property: "isEdit", valueMap: isEditValueMap }],
         ["html_type", { property: "formType", valueMap: htmlTypeValueMap }],
         ["option", { property: "options", fieldMap: /* @__PURE__ */ new Map([["text", "label"]]) }]

package/es/packages/big-table/src/hooks/useEdit.d.ts

@@ -150,9 +150,51 @@ export declare const comps: {
         row: Record<string, any>;
         index: number | Record<string, any>;
     }>;
+    time: import("vue").DefineComponent<{
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        col: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        row: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        index: {
+            type: (NumberConstructor | ObjectConstructor)[];
+            default: number;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "formChange"[], "formChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        col: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        row: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        index: {
+            type: (NumberConstructor | ObjectConstructor)[];
+            default: number;
+        };
+    }>> & {
+        onFormChange?: ((...args: any[]) => any) | undefined;
+    }, {
+        type: string;
+        col: Record<string, any>;
+        row: Record<string, any>;
+        index: number | Record<string, any>;
+    }>;
     separate: import("vue").DefineComponent<{
         col: {
-            type: import("vue").PropType<import("vxe-table").VxeTableDefines.ColumnInfo>;
+            type: import("vue").PropType<import("../../../../src/types").AnyObject>;
             required: true;
         };
         row: {
@@ -166,7 +208,7 @@ export declare const comps: {
     }, {
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             col: {
-                type: import("vue").PropType<import("vxe-table").VxeTableDefines.ColumnInfo>;
+                type: import("vue").PropType<import("../../../../src/types").AnyObject>;
                 required: true;
             };
             row: {
@@ -192,26 +234,22 @@ export declare const comps: {
         updateShow: (show: boolean) => void;
         style: import("vue").CSSProperties;
         SlotRender: import("vue").DefineComponent<{
-            functional: BooleanConstructor;
             renderer: {
-                type: (StringConstructor | FunctionConstructor)[];
+                type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("../../../../src/types").Func<any[], any>>;
                 required: true;
             };
             rootSlots: {
                 type: import("vue").PropType<Record<string, import("../../../../src/types").Func<any[], any>>>;
             };
         }, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-            functional: BooleanConstructor;
             renderer: {
-                type: (StringConstructor | FunctionConstructor)[];
+                type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("../../../../src/types").Func<any[], any>>;
                 required: true;
             };
             rootSlots: {
                 type: import("vue").PropType<Record<string, import("../../../../src/types").Func<any[], any>>>;
             };
-        }>>, {
-            functional: boolean;
-        }>;
+        }>>, {}>;
         NPopover: import("vue").DefineComponent<{
             internalOnAfterLeave: import("vue").PropType<() => void>;
             internalRenderBody: import("vue").PropType<import("naive-ui/es/popover/src/interface").InternalRenderBody>;
@@ -1362,7 +1400,7 @@ export declare const comps: {
         }>;
         Separate: import("vue").DefineComponent<{
             col: {
-                type: import("vue").PropType<import("vxe-table").VxeTableDefines.ColumnInfo>;
+                type: import("vue").PropType<import("../../../../src/types").AnyObject>;
                 required: true;
             };
             row: {
@@ -1372,7 +1410,7 @@ export declare const comps: {
         }, {
             props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                 col: {
-                    type: import("vue").PropType<import("vxe-table").VxeTableDefines.ColumnInfo>;
+                    type: import("vue").PropType<import("../../../../src/types").AnyObject>;
                     required: true;
                 };
                 row: {
@@ -1391,7 +1429,7 @@ export declare const comps: {
             displayContent: import("vue").ComputedRef<string>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
             col: {
-                type: import("vue").PropType<import("vxe-table").VxeTableDefines.ColumnInfo>;
+                type: import("vue").PropType<import("../../../../src/types").AnyObject>;
                 required: true;
             };
             row: {
@@ -1401,7 +1439,7 @@ export declare const comps: {
         }>>, {}>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "formChange"[], "formChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         col: {
-            type: import("vue").PropType<import("vxe-table").VxeTableDefines.ColumnInfo>;
+            type: import("vue").PropType<import("../../../../src/types").AnyObject>;
             required: true;
         };
         row: {

package/es/packages/big-table/src/hooks/useEdit.js

@@ -1,15 +1,16 @@
+import EditTime from '../../../../packages/big-table/src/components/edit-form/edit-time';
 import EditInput from '../components/edit-form/edit-input.js';
 import EditSelect from '../components/edit-form/edit-select.js';
 import EditDate from '../components/edit-form/edit-date.js';
-import '../components/edit-form/edit-separate.js';
-import script from '../components/edit-form/edit-separate.vue_vue_type_script_setup_true_lang.js';
+import EditSeparate from '../components/edit-form/edit-separate.js';
 
 const comps = {
   input: EditInput,
   number: EditInput,
   select: EditSelect,
   date: EditDate,
-  separate: script
+  time: EditTime,
+  separate: EditSeparate
 };
 const useEdit = (props, state, emit, xGrid) => {
   const initEditTable = async () => {

package/es/packages/big-table/src/hooks/useFormat.js

@@ -133,7 +133,14 @@ const useFormat = (state) => {
                 item[key] = temp.change_text;
               } else {
                 if (temp.background != "#ffffff") {
-                  item[key] = `<span class="field-span" style="color:${temp.background}"><span class="${temp.icon}"></span>${temp.change_text || ""}</span>`;
+                  const reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
+                  let color = temp.background;
+                  let iconHtml = `<span class="${temp.icon}"></span>`;
+                  if (reg.test(temp.icon)) {
+                    color = temp.icon;
+                    iconHtml = `<span class="icon-dot-custom" style="--table-icon-color:${temp.icon};--table-icon-shadow:${temp.icon}80"></span>`;
+                  }
+                  item[key] = `<span class="field-span" style="color:${color}">${iconHtml}${temp.change_text || ""}</span>`;
                 } else {
                   item[key] = temp.change_text;
                 }

package/es/packages/big-table/src/hooks/useSeparateRow.js

@@ -37,15 +37,15 @@ const getStringWidth = /* @__PURE__ */ useMemoize(function(str) {
       return width + 4;
     }
     if (/[\u4e00-\u9fa5]/.test(char)) {
-      return width + 16;
+      return width + 15;
     }
     if (/-/.test(char)) {
       return width + 4;
     }
-    if (/（|）/.test(char)) {
+    if (/[（）]/.test(char)) {
       return width + 14;
     }
-    if (/\(|\)/.test(char)) {
+    if (/[)(]/.test(char)) {
       return width + 5;
     }
     if (/-/.test(char)) {
@@ -136,7 +136,7 @@ function useSeparateRow(getColumnConfig, getFieldItem, $VXETable) {
       });
     if (!isString(value) || !isNumber(width))
       return [value];
-    width -= 20;
+    width -= 24;
     return [...value].reduce((res, char) => {
       const latestString = res[res.length - 1];
       if (getStringWidth(latestString + char) > width) {

package/es/packages/big-table/src/utils.js

@@ -418,7 +418,7 @@ const setFilterStatus = (state, props) => {
         state.filterFields[item.field_key]["CONVERT"] = [];
         return false;
       }
-      const value = item.value.map((item2) => JSON.stringify(item2));
+      const value = item.value;
       state.filterFields[item.field_key]["CONVERT"] = value;
     }
   });
@@ -599,6 +599,7 @@ const setTableConfig = (config, state) => {
   state.openOnly = config.openOnly;
   state.isExpand = config.spreadAllBtn;
   state.levelLazyLoadSetting = Object.assign({}, config.levelLazyLoadSetting);
+  state.checkWidth = Object.assign({}, state.checkWidth, config.checkWidth);
 };
 const setTreeGroupTitle = (formatList, key, GROUP_TITLE_KEY) => {
   formatList.forEach((row) => {

package/es/packages/big-table/style/index.css

@@ -18,7 +18,7 @@
   margin-top: 6px;
 }
 .big-table-filter-wrap .sort-item {
-  line-height: 32px;
+  height: 32px;
   padding: 0 13px;
   display: flex;
   align-items: center;
@@ -97,7 +97,7 @@
 }
 .big-table-filter-wrap .checkbox-btn-wrap {
   display: flex;
-  padding: 9px 10px 19px 14px;
+  padding: 9px 10px 9px 14px;
 }
 .big-table-filter-wrap .checkbox-btn-wrap .checkbox-btn {
   width: 56px;
@@ -131,6 +131,16 @@
   width: 25px;
   height: 20px;
 }
+.big-table__separate {
+  padding: 4px;
+}
+.big-table__separatePlaceholder {
+  display: inline-block;
+  visibility: hidden;
+  max-width: 0;
+  word-break: keep-all;
+  width: 0;
+}
 body > .vxe-table--tooltip-wrapper {
   display: none !important;
 }
@@ -379,12 +389,156 @@ body > .vxe-table--tooltip-wrapper {
 }
 .custom-big-table .domPropsInnerHTML-span {
   height: 100%;
+  /*         老版图标样式              */
 }
 .custom-big-table .domPropsInnerHTML-span img {
   display: inline-block;
   height: var(--tableImageHeight);
   width: var(--tableImageWidth);
 }
+.custom-big-table .domPropsInnerHTML-span .icon-dot-custom {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: var(--table-icon-color);
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px var(--table-icon-shadow);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-red {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: red;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(255, 0, 0, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-blue {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: blue;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 255, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-green {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: green;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 128, 0, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-gray {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: gray;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(128, 128, 128, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-yellow {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: yellow;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(255, 255, 0, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-resolved {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #36be8c;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(54, 190, 140, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-huifu {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #42d0f6;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(66, 208, 246, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-close {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #718391;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(113, 131, 145, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-audit {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #f4ba32;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(244, 186, 50, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-design {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #927ce1;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(146, 124, 225, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-develop {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #4eb0ef;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(78, 176, 239, 0.5);
+}
+.custom-big-table .domPropsInnerHTML-span .icon-dot-develop-complete {
+  width: 8px;
+  height: 8px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background: #6381f9;
+  display: inline-block;
+  margin-right: 6px;
+  box-shadow: 0px 2px 4px 0px rgba(99, 129, 249, 0.5);
+}
 .no-data-tip {
   display: flex;
   flex-direction: column;