标签

src/components/NewInitForm/EditTable/index.jsx

+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState, memo, useMemo } from 'react';
+import { EditableProTable } from '@ant-design/pro-components';
+import { Tooltip } from 'antd';
+import { doFetch } from '@/utils/doFetch';
+
+const EditTable = (props) => {
+  const {
+    actionRef, //表格动作
+    formRef, //表单Ref
+    rowKey, // key
+    columns = [], //columns
+    style, //style
+    path, //接口地址
+    extraparams, //额外参数
+    pageSize, //修改默认pageSize
+    pagination, //分页设置
+    x, //横向滚动
+    refreshDep, //依赖刷新 （已废弃）
+    getDefaultSelected, //存在默认选中向上返回选中值
+    dataSource,
+  } = props;
+
+  const actionRefs = actionRef ?? useRef(),
+    formRefs = formRef ?? useRef(),
+    ifspagination = pagination == 'false' || pagination === false,
+    [size, setsize] = useState('small');
+
+  //调用接口
+  const request = async (params, sort, filter) => {
+    if (!path)
+      return {
+        data: dataSource ?? [],
+        success: true,
+        total: dataSource?.length ?? 0,
+      };
+    let newparams = {
+      ...params,
+      ...extraparams, //父组件传参
+      pageIndex: params.current,
+      pageSize: params.pageSize || pageSize,
+    };
+    delete newparams.current;
+    if (ifspagination) {
+      delete newparams.pageIndex;
+      delete newparams.pageSize;
+    }
+    const result = await doFetch({ url: path, params: newparams });
+    //分页结果
+    let data = result?.data?.page?.list,
+      success = true,
+      total = result?.data?.page?.total;
+    //不带分页获取结果
+    if (ifspagination || !data) {
+      data = result?.data?.dataList;
+      total = result?.data?.dataList?.length;
+    }
+    //存在默认选中向上返回选中值
+    getDefaultSelected && getDefaultSelected(result?.data);
+    return {
+      data,
+      success,
+      total,
+    };
+  };
+
+  let columncs = useMemo(() => {
+    return columns.map((item, index) => {
+      let it = { ...item };
+      let itemwidth = it.width ? it.width : 'auto';
+      let options = {};
+      if (it.valueType == 'select' || it.valueType == 'checkbox') {
+        if (Array.isArray(it.options)) {
+          options = {
+            fieldProps: {
+              ...it?.fieldProps,
+              options: [...it.options],
+            },
+          };
+        } else if (it.options) {
+          options = {
+            request: async (params) => {
+              let list = await doFetch({ url: it?.options?.path, params: it?.options?.params });
+              return list.data.dataList;
+            },
+          };
+        }
+      }
+      if (it.valueType == 'option') {
+        options = {
+          key: 'option',
+          dataIndex: 'option',
+          fixed: 'right',
+        };
+      }
+      if (!it.render) {
+        options = {
+          ...options,
+          render: (text, row) => {
+            return (
+              <Tooltip title={row[it.dataIndex]} placement="topLeft">
+                <span className="table-cell">{row[it.dataIndex] ?? '-'}</span>
+              </Tooltip>
+            );
+          },
+        };
+      }
+
+      options = {
+        ...options,
+        width: itemwidth,
+      };
+
+      delete it.formItemProps;
+      return {
+        ...it,
+        ...options,
+      };
+    });
+  }, [columns]);
+
+  return (
+    <EditableProTable
+      {...props}
+      recordCreatorProps={false}
+      size={size}
+      onSubmit={(params) => {
+        //console.log(params, 'onSubmit');
+      }}
+      onSizeChange={(size) => {
+        localStorage.setItem('size', size); //设置全局表格规格缓存
+        setsize(size);
+      }}
+      columns={columncs ?? []}
+      style={style || {}}
+      actionRef={actionRefs}
+      formRef={formRefs}
+      rowKey={rowKey ?? 'id'} //表格每行数据的key
+      dateFormatter="string"
+      request={request}
+      scroll={
+        x
+          ? {
+            x: x,
+          }
+          : {}
+      }
+      pagination={
+        ifspagination
+          ? false
+          : {
+            showTotal: (total, range) => <span>共{total}条</span>,
+            showQuickJumper: true,
+            showSizeChanger: true,
+            pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
+            defaultPageSize: pageSize || 15,
+          }
+      }
+      editable={{
+        type: 'multiple',
+        editableKeys: props?.rowSelection?.selectedRowKeys ?? [],
+        ...props?.editable,
+      }}
+      search={{
+        filterType: 'light', //轻量模式
+        placement: 'bottomLeft'
+      }}
+    />
+  );
+};
+
+export default memo(EditTable);

src/components/NewInitForm/index.css

+.title {
+  position: relative;
+  width: 100%;
+  margin-bottom: 8px;
+  padding-left: 16px;
+  font-weight: bolder;
+  font-size: 16px;
+}
+.title::before {
+  position: absolute;
+  top: 4px;
+  left: 7px;
+  width: 3px;
+  height: 16px;
+  background-color: #3d8ad7;
+  border-radius: 4px;
+  content: '';
+}
+.title::after {
+  position: absolute;
+  top: 14px;
+  right: 0px;
+  width: calc(100% - 160px);
+  height: 1px;
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  content: '';
+}

src/components/NewInitForm/index.jsx

+import React, { createElement, memo, useRef, useState } from "react";
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormSelect,
+  ProFormText,
+  ProFormGroup,
+  ProFormList,
+  ProCard,
+} from "@ant-design/pro-components";
+import { doFetch } from "@/utils/doFetch";
+import styles from "./index.less";
+import FormItems from "./FormItems";
+
+function upperCase(str) {
+  const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
+  return newStr;
+}
+
+let FormRender = memo(({ fields = [], colProps, proformRef }) => {
+  return (
+    <>
+      {fields
+        .filter((it) => it.hideInForm !== true)
+        .map((item, index) => {
+          let key = item?.valueType ? upperCase(item?.valueType) : "Input";
+          let { hideInForm } = item;
+          item.formItemProps = item.formItemProps ?? { rules: [] };
+          if (item.valueType == "split") {
+            return (
+              <div
+                className={styles.title}
+                style={{ borderWidth: index == 0 ? 0 : 1 }}
+              >
+                {item.title}
+              </div>
+            );
+          }
+          if (hideInForm && Object.keys(hideInForm)) {
+            return (
+              <ProFormDependency name={Object.keys(hideInForm)}>
+                {(params) => {
+                  let ifs = true;
+                  let res = Object.keys(hideInForm).map((its) => {
+                    let val =
+                      JSON.stringify(params[its]) === "[]" ? "[]" : params[its];
+                    if (Array.isArray(hideInForm[its])) {
+                      return !hideInForm[its].includes(val);
+                    } else {
+                      let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
+                      return vals.indexOf(val) != -1;
+                    }
+                  });
+                  ifs = res.includes(false);
+                  if (ifs) {
+                    return;
+                  } else {
+                    return (
+                      <>
+                        {createElement(FormItems[key], {
+                          item: item,
+                          colProps: colProps,
+                          key: item.dataIndex,
+                          formRef: proformRef,
+                        })}
+                      </>
+                    );
+                  }
+                }}
+              </ProFormDependency>
+            );
+          } else {
+            return (
+              <>
+                {createElement(FormItems[key], {
+                  item: item,
+                  colProps: colProps,
+                  key: item.dataIndex,
+                  formRef: proformRef,
+                })}
+              </>
+            );
+          }
+        })}
+    </>
+  );
+});
+
+function InitForm({
+  formRef,
+  onFinish = (vals) => {
+    // console.log(vals);
+  },
+  formKey,
+  params = {},
+  detailpath = "",
+  defaultFormValue = {},
+  submitter,
+  fields,
+  colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
+  onValuesChange = (changedValues, allValues) => {
+    // console.log(changedValues, allValues);
+  },
+  ptree = false,
+  children,
+}) {
+  let proformRef = useRef();
+  proformRef = formRef ?? proformRef;
+
+  return (
+    <ProForm
+      style={{ overflow: "hidden" }}
+      formRef={proformRef}
+      onFinish={onFinish}
+      formKey={formKey ?? parseInt(Math.random() * 1000000)}
+      params={params}
+      submitter={submitter ?? true}
+      grid={true}
+      rowProps={{
+        gutter: 12,
+      }}
+      request={async (params) => {
+        if (detailpath) {
+          let res = await doFetch({ url: detailpath, params });
+          return {
+            ...(res?.data?.data ?? {}),
+            ...defaultFormValue,
+          };
+        } else {
+          return {
+            ...defaultFormValue,
+          };
+        }
+      }}
+      autoFocusFirstInput
+      onValuesChange={(changedValues, allValues) => {
+        onValuesChange?.(changedValues, allValues);
+      }}
+    >
+      <FormRender
+        fields={fields?.filter((it) => it?.valueType != "option")}
+        colProps={colProps}
+        proformRef={proformRef}
+      />
+      {ptree && children}
+    </ProForm>
+  );
+}
+
+export default InitForm;

src/components/NewInitForm/index.less

+.title {
+  position: relative;
+  width: 100%;
+  margin-bottom: 8px;
+  padding-left: 16px;
+  font-weight: bolder;
+  font-size: 16px;
+  &::before {
+    position: absolute;
+    top: 4px;
+    left: 7px;
+    width: 3px;
+    height: 16px;
+    background-color: #3d8ad7;
+    border-radius: 4px;
+    content: '';
+  }
+  &::after {
+    position: absolute;
+    top: 14px;
+    right: 0px;
+    width: calc(100% - 160px);
+    height: 1px;
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    content: '';
+  }
+}

src/pages/Printer/fields.js

-import {
-  factorySelect,
-  shopSelectByFactory,
-  productionLineSelectByShop,
-  sectionSelectByShop,
-} from "@/services/system";
-export default {
-  stationNo: {
-    value: null,
-    type: "input",
-    title: "工位编号",
-    name: ["stationNo"],
-    required: true,
+export default [
+  {
+    title: "物料（名称+编码）",
+    key: "wlid",
+    dataIndex: "wlid",
   },
-  stationName: {
-    value: null,
-    type: "input",
-    title: "工位名称",
-    name: ["stationName"],
-    required: true,
+  {
+    title: "规格型号",
+    key: "specificationModel",
+    dataIndex: "specificationModel",
   },
-  factoryId: {
-    value: null,
-    type: "select",
-    title: "所属工厂",
-    name: ["factoryId"],
-    required: true,
-    options: {
-      database: factorySelect,
-      params: {},
-    },
-    linked: true,
+  {
+    title: "牌号",
+    key: "shopSign",
+    dataIndex: "shopSign",
   },
-  status: {
-    value: null,
-    type: "select",
-    title: "启用状态",
-    name: ["status"],
-    required: true,
-    options: [
-      {
-        label: "启用",
-        value: 1,
-      },
-      {
-        label: "禁用",
-        value: 0,
-      },
-    ],
+  {
+    title: "铁损",
+    key: "ironLoss",
+    dataIndex: "ironLoss",
   },
-  remark: {
-    value: null,
-    type: "textarea",
-    title: "描述",
-    name: ["remark"],
-    required: false,
-
-    col: { span: 24 },
+  {
+    title: "片厚",
+    key: "sheetThickness",
+    dataIndex: "sheetThickness",
   },
-};
+  {
+    title: "其他信息",
+    key: "split",
+    dataIndex: "split",
+    valueType:'split'
+  },
+  {
+    title: "供应商",
+    key: "supplierId",
+    dataIndex: "supplierId",
+  },
+  
+];

src/pages/Printer/index.jsx

@@ -10,11 +10,10 @@ import {
   message,
 } from "antd";
 import AutoTable from "@/components/AutoTable";
-import getPrem from "@/utils/getPrem"; //权限判断fn
 import { useRequest } from "umi";
-import defaultFields from "./fields";
+import defaultFields from "./fields.js";
 import { doFetch } from "@/utils/doFetch";
-import InitForm from "@/components/InitForm";
+import InitForm from "@/components/NewInitForm";
 import { start } from "@/utils/printHandle.js";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 const { confirm } = Modal;
@@ -174,9 +173,9 @@ const Station = (props) => {
       console.log(selectedRowKeys, selectedRows);
       setselectIds(selectedRowKeys);
     },
-    preserveSelectedRowKeys:true
+    preserveSelectedRowKeys: true,
   };
-
+  console.log(defaultFields);
   return (
     <div>
       <AutoTable
@@ -193,7 +192,7 @@ const Station = (props) => {
       ></AutoTable>
       <Drawer
         title={drawer?.title}
-        visible={drawer?.visible}
+        open={drawer?.visible}
         onClose={() => setDrawer((v) => ({ ...v, visible: false }))}
         footer={false}
         destroyOnClose={true}
@@ -208,20 +207,18 @@ const Station = (props) => {
           actions={() => {
             return null;
           }}
+          submitter={false}
         ></InitForm>
         <Button
-          style={{ width: "100%" }}
           type="primary"
-          size="large"
           //   loading={loading || !vs}
+          style={{ marginRight: 16 }}
           onClick={() => saveData()}
         >
           保存
         </Button>
         <Button
-          style={{ width: "100%" }}
           type="primary"
-          size="large"
           //   loading={loading || !vs}
           onClick={() => saveData()}
         >