编号组成交互的完成

pc4mobx/organization/components/branchNumSetting/components/numberComposition.js

@@ -2,48 +2,23 @@
  * Author: 黎永顺
  * Description:
  * Date: 2022-05-17 16:02:56
- * LastEditTime: 2022-05-17 18:30:57
+ * LastEditTime: 2022-05-18 13:46:29
  */
 import React, { Component, Fragment } from "react";
-import { Button } from "antd";
+import { Button, Modal } from "antd";
 import {
   WeaTableEdit,
   WeaDialog,
   WeaMoreButton,
   WeaFormItem,
   WeaSelect,
+  WeaInput,
 } from "ecCom";
+import Preview from "./preview";
 import { i18n } from "../../../public/i18n";
 import _ from "lodash";
 
-const columns = [
-  {
-    title: "",
-    dataIndex: "numFieldName",
-    key: "numFieldName",
-    colSpan: 1,
-    com: [{ label: "", type: "TEXT" }],
-    width: "20%",
-  },
-  {
-    title: "",
-    dataIndex: "value",
-    useRecord: true,
-    key: "value",
-    com: [{ label: "", type: "INPUT", viewAttr: 2, key: "value" }],
-    colSpan: 1,
-    width: "70%",
-  },
-];
 const dataSource = [
-  // {
-  //   com: {
-  //     value: [{ key: "value", label: "", type: "TEXT" }],
-  //   },
-  //   value: "",
-  //   numFieldName: "字符串",
-  //   numField: "string",
-  // },
   {
     value: "",
     numFieldName: "字符串",
@@ -81,22 +56,32 @@ class NumberComposition extends Component {
     };
   }
 
+  /**
+   * name:复选框禁用
+   * param undefined
+   * return {*}
+   */
   getRowSelection = (rowSelection) => {
+    const { dataSource } = this.state;
+    const hasMonthNum = dataSource.some((item) => item.numField === "month");
+    const hasDayNum = dataSource.some((item) => item.numField === "day");
     const sel = { ...rowSelection };
     sel.getCheckboxProps = (record) => {
-      return { disabled: record.numField === "number" };
+      return {
+        disabled:
+          record.numField === "number" ||
+          (hasMonthNum && record.numField === "year") ||
+          (hasDayNum && record.numField === "month"),
+      };
     };
     return sel;
   };
-
+  /**
-  handleAddTable = () => {
+   * name: 字段保存
-    this.setState({
+   * return {*}
-      visible: true,
+   */
-    });
-  };
   handleSave = () => {
     const { numField, numFieldName, dataSource } = this.state;
-
     const objWrite = {
       value: "",
       numFieldName,
@@ -110,22 +95,159 @@ class NumberComposition extends Component {
       numFieldName,
       numField,
     };
-    this.setState({
+    if (numField === "year" || numField === "month" || numField === "day") {
-      visible: false,
+      const hasYearOrMonthOrDay = _.some(
-      numField: "string",
+        dataSource,
-      numFieldName: "字符串",
+        (it) => it.numField === numField
-      dataSource:
+      );
-        numField === "year" || numField === "month" || numField === "day"
+      const hasYearNum = dataSource.some((item) => item.numField === "year");
-          ? [...dataSource, objView]
+      const hasMonthNum = dataSource.some((item) => item.numField === "month");
-          : [...dataSource, objWrite],
+      if (!hasYearOrMonthOrDay) {
+        if (numField === "month" && !hasYearNum) {
+          Modal.warning({
+            title: "信息确认",
+            content: `添加【${numFieldName}】时，请先添加【当前年份】！`,
+            onOk() {},
+            okText: "确认",
+          });
+          return;
+        }
+        if (numField === "day" && (!hasYearNum || !hasMonthNum)) {
+          Modal.warning({
+            title: "信息确认",
+            content: `添加【${numFieldName}】时，请先添加【当前年份】和【当前月份】！`,
+            onOk() {},
+            okText: "确认",
+          });
+          return;
+        }
+        this.setState({
+          visible: false,
+          numField: "string",
+          numFieldName: "字符串",
+          dataSource: [...dataSource, objView],
+        });
+      } else {
+        this.showConfirm();
+      }
+    } else {
+      this.setState({
+        visible: false,
+        numField: "string",
+        numFieldName: "字符串",
+        dataSource: [...dataSource, objWrite],
+      });
+    }
+  };
+  /**
+   * name:年月日字段重复提示
+   * return {*}
+   */
+  showConfirm = () => {
+    const { numFieldName } = this.state;
+    Modal.warning({
+      title: "信息确认",
+      content: `已经添加过一个${numFieldName}，请选择其他编号字段！`,
+      footer: [],
+      onOk() {},
+      okText: "确认",
     });
   };
+  /**
+   * name: 编号字段删除
+   * return {*}
+   */
   handleDeleteTable = (keys, datas) => {
-    console.log("handleDeleteTable", keys, datas);
+    const { dataSource } = this.state;
+    const stringRow = _.filter(dataSource, (it) => it.numField === "string");
+    const yearRow = _.filter(dataSource, (it) => it.numField === "year");
+    const monthRow = _.filter(dataSource, (it) => it.numField === "month");
+    const dayRow = _.filter(dataSource, (it) => it.numField === "day");
+    const disableRow = _.filter(dataSource, (it) => it.numField === "number");
+    const tmpV = [
+      ...stringRow,
+      ...yearRow,
+      ...monthRow,
+      ...dayRow,
+      ...disableRow,
+    ];
+    this.setState({
+      dataSource: _.filter(tmpV, (it, idx) => !keys.includes(idx)),
+    });
+  };
+
+  handleChangeInput = (value, index) => {
+    const { dataSource } = this.state;
+    const stringRow = _.filter(dataSource, (it) => it.numField === "string");
+    const yearRow = _.filter(dataSource, (it) => it.numField === "year");
+    const monthRow = _.filter(dataSource, (it) => it.numField === "month");
+    const dayRow = _.filter(dataSource, (it) => it.numField === "day");
+    const disableRow = _.filter(dataSource, (it) => it.numField === "number");
+    const tmpV = _.map(
+      [...stringRow, ...yearRow, ...monthRow, ...dayRow, ...disableRow],
+      (it, idx) => ({ ...it, key: idx })
+    );
+    this.setState({
+      dataSource: _.map(tmpV, (it) => {
+        if (it.key === index) {
+          return {
+            ...it,
+            value,
+          };
+        }
+        return { ...it };
+      }),
+    });
   };
 
   render() {
     const { visible, numField, dataSource } = this.state;
+    const columns = [
+      {
+        title: "",
+        dataIndex: "numFieldName",
+        key: "numFieldName",
+        colSpan: 1,
+        com: [{ label: "", type: "TEXT" }],
+        width: "20%",
+      },
+      {
+        title: "",
+        useRecord: true,
+        dataIndex: "custom",
+        key: "custom",
+        com: [
+          {
+            type: "custom",
+            key: "custom",
+            render: (text, record, index) => {
+              const { numField } = record;
+              if (
+                numField === "year" ||
+                numField === "month" ||
+                numField === "day"
+              ) {
+                return <span></span>;
+              }
+              return (
+                <WeaInput
+                  id="custom"
+                  value={record.value}
+                  onChange={(value) =>
+                    this.handleChangeInput(value, index, record)
+                  }
+                />
+              );
+            },
+          },
+        ],
+        // dataIndex: "value",
+        // key: "value",
+        // com: [{ label: "", type: "INPUT", viewAttr: 2, key: "value" }],
+        colSpan: 1,
+        width: "70%",
+      },
+    ];
     const buttons = [
       <Button
         ecId={`${(this && this.props && this.props.ecId) || ""}_Button@jd6baw`}
@@ -171,9 +293,23 @@ class NumberComposition extends Component {
           btnsType="inline"
           deleteConfirm
           addType="func"
-          addFunc={this.handleAddTable}
+          addFunc={() =>
+            this.setState({
+              visible: true,
+            })
+          }
           onDelete={this.handleDeleteTable}
         />
+        {/* 预览 */}
+        <Preview
+          dataSource={[
+            ...stringRow,
+            ...yearRow,
+            ...monthRow,
+            ...dayRow,
+            ...disableRow,
+          ]}
+        />
         {/* 新增弹框 */}
         <WeaDialog
           onCancel={() =>

pc4mobx/organization/components/branchNumSetting/components/preview.js

@@ -0,0 +1,47 @@
+/*
+ * Author: 黎永顺
+ * Description: 编号设置预览
+ * Date: 2022-05-18 10:21:09
+ * LastEditTime: 2022-05-18 13:26:11
+ */
+import React, { Component } from "react";
+
+class Preview extends Component {
+  render() {
+    const { dataSource } = this.props;
+    return (
+      <div className="preview">
+        <span className="label">预览</span>
+        <div className="content">
+          {_.map(
+            _.map(dataSource, (item) => {
+              const { numField, numFieldName } = item;
+              if (
+                numField === "year" ||
+                numField === "month" ||
+                numField === "day"
+              ) {
+                return {
+                  ...item,
+                  value: numFieldName,
+                };
+              }
+              return { ...item };
+            }),
+            (it, idx) => {
+              const { numFieldName, value } = it;
+              return (
+                <div className="item" key={idx}>
+                  <div title={numFieldName}>{numFieldName}</div>
+                  <div>{value}</div>
+                </div>
+              );
+            }
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Preview;

pc4mobx/organization/components/branchNumSetting/index.less

@@ -5,6 +5,7 @@
 
   .branch-content {
     flex: 1;
+    overflow: hidden auto;
 
     .switch-wrapper {
       width: 100%;
@@ -15,6 +16,48 @@
       background: #f7fbfe;
     }
 
+    .numberComposition {
+      .preview {
+        margin-top: 20px;
+        padding-left: 5%;
+        overflow-x: auto;
+        width: 100%;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+
+        .content {
+          vertical-align: middle;
+          margin-left: 30px;
+          white-space: nowrap;
+
+          .item {
+            display: inline-block;
+            text-align: center;
+
+            &>div {
+              border: 1px solid #0070c0;
+              margin-left: -1px;
+              min-width: 100px;
+              max-width: 200px;
+              line-height: 30px;
+              height: 30px;
+              white-space: nowrap;
+              overflow: hidden;
+              -o-text-overflow: ellipsis;
+              text-overflow: ellipsis;
+              color: #0070c0;
+            }
+
+            &>div:last-child {
+              margin-top: -1px;
+              color: #c63;
+            }
+          }
+        }
+      }
+    }
+
     .startReservedNumberSet {
       .icon-coms-Flow-setting {
         font-size: 16px;