kmkf-work-order-service-component 0.3.9 → 0.4.0-alpha.10

package/dist/esm/{WorkOrder/components/CustomizeWorkOrderList/components/CustomizeFormModal → FormRender}/index.js

@@ -32,85 +32,153 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { Drawer, Form, Spin, ConfigProvider, Button, message, Space } from 'antd';
-import { LeftOutlined } from '@ant-design/icons';
-import { get, find, some, set, debounce } from 'lodash';
+import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
+import { Spin, ConfigProvider, Form, message, Cascader } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
-import moment from 'moment';
+import { get, find, some, set, last } from 'lodash';
 import 'moment/locale/zh-cn';
-import { calcWorkOrderList, submitDataTransOldFormat, orderBack, getReplaceWarnValues, COMPONENT_MAP_NAME } from "../../../../../common/utils/tools";
-import { factory } from "../../../Widget";
-import { queryTemplateDetail, addWorkOrder, queryWorkOrderDetail, updateWorkOrder, replaceCheck } from "../../../../../model/servers/api";
-import { selectorFormModalVisible } from "../../../../../model/customizeWorkOrder/selector";
-import { setFormModalVisible } from "../../../../../model/customizeWorkOrder";
-import { selectorCurrentCustomizeRecord } from "../../../../../model/customizeWorkOrder/selector";
+import { calcWorkOrderList, submitDataTransOldFormat, orderBack, getReplaceWarnValues, COMPONENT_MAP_NAME } from "../common/utils/tools";
+import express from "../common/utils/express";
+import formatAddrData from "../common/utils/formatAddrData";
+import { queryTemplateDetail, addWorkOrder, queryWorkOrderDetail, updateWorkOrder, replaceCheck } from "../model/servers/api";
+import { getPlatList } from "../model/customizeWorkOrder/api";
+import { factory } from "../WorkOrder/components/Widget";
+import ShopList from "../ShopList";
 import "./index.less";
-moment.locale('zh-cn');
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var ShopName = function ShopName(_ref) {
+  var shopList = _ref.shopList,
+      platIconList = _ref.platIconList,
+      workOrderId = _ref.workOrderId,
+      look = _ref.look,
+      handleChangeShopId = _ref.handleChangeShopId;
+  return /*#__PURE__*/_jsx("div", {
+    className: "form-item--wrap",
+    style: {
+      position: 'relative'
+    },
+    children: /*#__PURE__*/_jsx(Form.Item, {
+      name: "shopId",
+      label: "\u5E97\u94FA\u540D\u79F0",
+      className: "form-item-label--index",
+      rules: [{
+        required: true,
+        message: '请选择店铺名称'
+      }],
+      children: /*#__PURE__*/_jsx(ShopList, {
+        shopList: shopList,
+        platIconList: platIconList,
+        disabled: !!workOrderId || look,
+        setShopId: handleChangeShopId,
+        placeholder: "\u8BF7\u9009\u62E9\u5E97\u94FA\u540D\u79F0",
+        showSearch: true,
+        optionFilterProp: "label"
+      })
+    })
+  }, 'shopId');
+};
 
-var CustomizeFormModal = function CustomizeFormModal(props) {
+var FormRender = function FormRender(props, ref) {
   var shopList = props.shopList,
       templateId = props.templateId,
-      onSuccess = props.onSuccess,
       look = props.look,
-      width = props.width,
       currentShopId = props.shopId,
       orderNo = props.orderNo,
       buyerId = props.buyerId,
       buyerNick = props.buyerNick,
-      platform = props.platform;
+      platform = props.platform,
+      record = props.record,
+      templateList = props.templateList,
+      onFormSubmitSuccess = props.onFormSubmitSuccess,
+      onTemplateChange = props.onTemplateChange,
+      _props$formProps = props.formProps,
+      formProps = _props$formProps === void 0 ? {} : _props$formProps;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       loading = _useState2[0],
       setLoading = _useState2[1];
 
-  var record = useSelector(selectorCurrentCustomizeRecord);
   var workOrderId = record === null || record === void 0 ? void 0 : record.id;
 
-  var _useState3 = useState({}),
+  var _useState3 = useState(templateId),
       _useState4 = _slicedToArray(_useState3, 2),
-      templateDetail = _useState4[0],
-      setTemplateDetail = _useState4[1];
+      templateIdState = _useState4[0],
+      setTemplateId = _useState4[1];
 
   var _useState5 = useState({}),
       _useState6 = _slicedToArray(_useState5, 2),
-      workOrderDetail = _useState6[0],
-      setWorkOrderDetail = _useState6[1];
+      templateDetail = _useState6[0],
+      setTemplateDetail = _useState6[1];
 
   var _useState7 = useState({}),
       _useState8 = _slicedToArray(_useState7, 2),
-      replaceValue = _useState8[0],
-      setReplaceValue = _useState8[1]; //字段重复校验
+      workOrderDetail = _useState8[0],
+      setWorkOrderDetail = _useState8[1];
+
+  var _useState9 = useState({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      replaceValue = _useState10[0],
+      setReplaceValue = _useState10[1]; //字段重复校验
+
 
+  var _useState11 = useState(currentShopId),
+      _useState12 = _slicedToArray(_useState11, 2),
+      shopId = _useState12[0],
+      setShopId = _useState12[1];
 
-  var visible = useSelector(selectorFormModalVisible);
+  var _useState13 = useState([]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      platIcon = _useState14[0],
+      setPlatIcon = _useState14[1];
+
+  useEffect(function () {
+    express.initData();
+    formatAddrData.initData();
+  }, []);
+  useEffect(function () {
+    if (!currentShopId) {
+      getPlatList().then(function (list) {
+        return setPlatIcon(list);
+      });
+    }
+  }, [currentShopId]);
+  useEffect(function () {
+    setShopId(currentShopId);
+  }, [currentShopId]);
 
   var _Form$useForm = Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
       form = _Form$useForm2[0];
 
-  var dispatch = useDispatch();
-  var time = useRef();
-  useEffect(function () {
-    if (visible) {
-      queryDetail({
-        templateId: templateId,
-        workOrderId: workOrderId,
-        shopId: currentShopId,
-        shopList: shopList,
-        record: record,
-        orderNo: orderNo,
-        buyerId: buyerId,
-        buyerNick: buyerNick
-      });
-      setReplaceValue({});
+  var time = useRef(); //表单额外校验
+
+  var verifyHandle = function verifyHandle(data, templateDetail) {
+    var _templateDetail$compo, _templateDetail$compo2, _data$paymentUniqueKe, _data$paymentUniqueKe2;
+
+    var res = {
+      success: true,
+      message: ''
+    };
+    var tradeIdUniqueKey = (_templateDetail$compo = templateDetail.componentDtoList.find(function (item) {
+      return item.workOrderComponentType === 'TRADE_ID_INPUT';
+    })) === null || _templateDetail$compo === void 0 ? void 0 : _templateDetail$compo.uniqueKey;
+    var paymentUniqueKey = (_templateDetail$compo2 = templateDetail.componentDtoList.find(function (item) {
+      return item.workOrderComponentType === 'ENTERPRISE_PAYMENT';
+    })) === null || _templateDetail$compo2 === void 0 ? void 0 : _templateDetail$compo2.uniqueKey;
+
+    if (tradeIdUniqueKey && paymentUniqueKey && data[tradeIdUniqueKey] && (_data$paymentUniqueKe = data[paymentUniqueKey]) !== null && _data$paymentUniqueKe !== void 0 && _data$paymentUniqueKe.enterprisePaymentTid && data[tradeIdUniqueKey] != ((_data$paymentUniqueKe2 = data[paymentUniqueKey]) === null || _data$paymentUniqueKe2 === void 0 ? void 0 : _data$paymentUniqueKe2.enterprisePaymentTid)) {
+      res.success = false;
+      res.message = '订单组件和打款组件的订单号必须一致';
     }
-  }, [visible, templateId, workOrderId, currentShopId]);
+
+    return res;
+  };
 
   var asyncDoSave = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(workOrderDetail, templateDetail) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(workOrderDetail, templateDetail) {
       var data, res, params, submitData, _yield$updateWorkOrde, success, result, platformMap, _params, hasEnterPrisePayment, getEnterPrisePaymentData, uniqueKey, componentConfig, _yield$addWorkOrder, _success, _result;
 
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -118,35 +186,36 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              _context.next = 3;
+              debugger;
+              _context.next = 4;
               return form.validateFields();
 
-            case 3:
+            case 4:
               data = _context.sent;
               console.debug('表单内容', data);
               console.debug('templateDetail内容', templateDetail);
               res = verifyHandle(data, templateDetail);
 
               if (res.success) {
-                _context.next = 10;
+                _context.next = 11;
                 break;
               }
 
               message.error(res.message);
               return _context.abrupt("return");
 
-            case 10:
+            case 11:
               if (!workOrderId) {
-                _context.next = 22;
+                _context.next = 23;
                 break;
               }
 
               params = {
                 apiName: 'updateWorkOrder',
-                shopId: currentShopId,
-                uniqueKey: templateId,
+                shopId: shopId,
+                uniqueKey: last(templateIdState),
                 accessToken: get(find(shopList, function (s) {
-                  return s.shopId === currentShopId;
+                  return s.shopId === shopId;
                 }), 'accessToken', ''),
                 workOrderUpdateKeyVos: {
                   workOrderId: workOrderId,
@@ -157,46 +226,45 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
               params.workOrderUpdateKeyVos.workOrderUpdateKeySupVos = submitData.reduce(function (nex, cur) {
                 return nex.concat(cur === null || cur === void 0 ? void 0 : cur.contentVoList);
               }, []);
-              _context.next = 16;
+              _context.next = 17;
               return updateWorkOrder(params);
 
-            case 16:
+            case 17:
               _yield$updateWorkOrde = _context.sent;
               success = _yield$updateWorkOrde.success;
               result = _yield$updateWorkOrde.data;
 
-              if (success && typeof onSuccess === 'function') {
-                closeModal();
-                form.resetFields();
+              if (success && typeof onFormSubmitSuccess === 'function') {
                 message.success('编辑成功');
-                onSuccess({
+                onFormSubmitSuccess({
                   type: 'EDIT',
                   result: result,
                   id: workOrderId
                 });
               }
 
-              _context.next = 35;
+              _context.next = 36;
               break;
 
-            case 22:
+            case 23:
               platformMap = {
                 tb: '淘宝',
                 fxg: '抖音',
                 ks: '快手',
                 pdd: '拼多多',
                 jd: '京东',
-                xiaozhi: '小智'
+                xiaozhi: '小智',
+                pc: 'PC'
               };
               _params = {
                 apiName: 'addWorkOrder',
-                shopId: currentShopId,
-                uniqueKey: templateId,
+                shopId: shopId,
+                uniqueKey: last(templateIdState),
                 workOrderComponentVos: [],
                 accessToken: get(find(shopList, function (s) {
-                  return s.shopId === currentShopId;
+                  return s.shopId === shopId;
                 }), 'accessToken', ''),
-                source: platformMap[platform] || '工单通'
+                source: get(platformMap, "".concat(platform), '工单通')
               };
               _params.workOrderComponentVos = submitDataTransOldFormat(data, templateDetail, !!workOrderId, workOrderDetail, _params);
               hasEnterPrisePayment = some(templateDetail === null || templateDetail === void 0 ? void 0 : templateDetail.componentDtoList, function (item) {
@@ -216,38 +284,36 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
                   tid: get(data, "".concat(uniqueKey, ".enterprisePaymentTid"), ''),
                   alipayNick: get(data, "".concat(uniqueKey, ".enterprisePaymentAlipayNick"), ''),
                   alipayNo: get(data, "".concat(uniqueKey, ".enterprisePaymentAlipayNo"), ''),
-                  templateId: templateId,
+                  templateId: last(templateIdState),
                   templateName: templateDetail.name,
                   required: get(componentConfig, 'required')
                 };
               }
 
               console.debug('增加数据参数', _params);
-              _context.next = 31;
+              _context.next = 32;
               return addWorkOrder(_params);
 
-            case 31:
+            case 32:
               _yield$addWorkOrder = _context.sent;
               _success = _yield$addWorkOrder.success;
               _result = _yield$addWorkOrder.data;
 
-              if (_success && typeof onSuccess === 'function') {
-                closeModal();
-                form.resetFields();
+              if (_success && typeof onFormSubmitSuccess === 'function') {
                 message.success('添加成功');
-                onSuccess({
+                onFormSubmitSuccess({
                   type: 'ADD',
                   result: _result === null || _result === void 0 ? void 0 : _result.data
                 });
               }
 
-            case 35:
+            case 36:
               console.groupEnd();
-              _context.next = 41;
+              _context.next = 42;
               break;
 
-            case 38:
-              _context.prev = 38;
+            case 39:
+              _context.prev = 39;
               _context.t0 = _context["catch"](0);
 
               // 表单校验失败错误时，将错误第一项滚动到可视区域
@@ -263,125 +329,60 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
                 }, 0);
               }
 
-            case 41:
+            case 42:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 38]]);
+      }, _callee, null, [[0, 39]]);
     }));
 
     return function asyncDoSave(_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }(); //表单额外校验
-
-
-  var verifyHandle = function verifyHandle(data, templateDetail) {
-    var _templateDetail$compo, _templateDetail$compo2, _data$paymentUniqueKe, _data$paymentUniqueKe2;
-
-    var res = {
-      success: true,
-      message: ''
+      return _ref2.apply(this, arguments);
     };
-    var tradeIdUniqueKey = (_templateDetail$compo = templateDetail.componentDtoList.find(function (item) {
-      return item.workOrderComponentType === 'TRADE_ID_INPUT';
-    })) === null || _templateDetail$compo === void 0 ? void 0 : _templateDetail$compo.uniqueKey;
-    var paymentUniqueKey = (_templateDetail$compo2 = templateDetail.componentDtoList.find(function (item) {
-      return item.workOrderComponentType === 'ENTERPRISE_PAYMENT';
-    })) === null || _templateDetail$compo2 === void 0 ? void 0 : _templateDetail$compo2.uniqueKey;
-
-    if (tradeIdUniqueKey && paymentUniqueKey && data[tradeIdUniqueKey] && (_data$paymentUniqueKe = data[paymentUniqueKey]) !== null && _data$paymentUniqueKe !== void 0 && _data$paymentUniqueKe.enterprisePaymentTid && data[tradeIdUniqueKey] != ((_data$paymentUniqueKe2 = data[paymentUniqueKey]) === null || _data$paymentUniqueKe2 === void 0 ? void 0 : _data$paymentUniqueKe2.enterprisePaymentTid)) {
-      res.success = false;
-      res.message = '订单组件和打款组件的订单号必须一致';
-    }
-
-    return res;
-  };
+  }();
 
   var handleSubmit = useCallback(function () {
     return asyncDoSave(workOrderDetail, templateDetail);
-  }, [workOrderDetail, templateDetail]); // 切换店铺
-
-  var newRenderColumnItem = function newRenderColumnItem(effects) {
-    return function (item, formItemIndex) {
-      // 录入工单表头的序号，默认算入了店铺名称的行，所以之后的序列+2
-      formItemIndex += 2;
-
-      if (look) {
-        item.componentConfig = _objectSpread(_objectSpread({}, item.componentConfig), {}, {
-          disabled: true
-        });
-      }
-
-      var instance = factory(item.workOrderComponentType, {
-        id: item.uniqueKey,
-        name: item.name,
-        componentConfig: item.componentConfig,
-        effects: effects,
-        formItemIndex: formItemIndex
-      });
-      return instance.editRender({
-        formItemIndex: formItemIndex,
-        onBlur: componentOnBlur
-      });
+  }, [workOrderDetail, templateDetail, shopId, workOrderId, templateIdState]);
+  useImperativeHandle(ref, function () {
+    return {
+      save: handleSubmit
     };
-  }; //组件失焦事件
-
-
-  var componentOnBlur = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value, type) {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (value) {
-                _context2.next = 3;
-                break;
-              }
+  }, [workOrderDetail, templateDetail]); //带*参数提示清空
 
-              setReplaceValue(function (prev) {
-                return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, type, 0));
-              });
-              return _context2.abrupt("return");
-
-            case 3:
-              queryReplaceCount(_defineProperty({}, type, value));
-
-              if (type === 'tradeId' || type === 'enterprisePaymentTid') {
-                changeHandle(value);
-              }
-
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
+  var filterStarValues = function filterStarValues() {
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var obj = {};
+    Object.keys(params).forEach(function (key) {
+      var _params$key;
 
-    return function componentOnBlur(_x3, _x4) {
-      return _ref2.apply(this, arguments);
-    };
-  }(); //查询重复数量
+      if (params[key] && ((_params$key = params[key]) === null || _params$key === void 0 ? void 0 : _params$key.indexOf('*')) > -1) {
+        obj[key] = 0;
+      }
+    });
+    setReplaceValue(function (value) {
+      return _objectSpread(_objectSpread({}, value), obj);
+    });
+  }; //查询重复数量
 
 
   var queryReplaceCount = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(componentValue) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(componentValue) {
       var needCheckComponentList, params, _yield$replaceCheck, resultList, resultParams;
 
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              _context3.next = 2;
+              _context2.next = 2;
               return filterStarValues(componentValue);
 
             case 2:
               needCheckComponentList = getReplaceWarnValues(templateDetail, componentValue);
 
               if (!needCheckComponentList.length) {
-                _context3.next = 11;
+                _context2.next = 11;
                 break;
               }
 
@@ -390,11 +391,11 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
                 workOrderUniqueKey: workOrderDetail === null || workOrderDetail === void 0 ? void 0 : workOrderDetail.uniqueKey,
                 needCheckComponentList: needCheckComponentList
               };
-              _context3.next = 7;
+              _context2.next = 7;
               return replaceCheck(params);
 
             case 7:
-              _yield$replaceCheck = _context3.sent;
+              _yield$replaceCheck = _context2.sent;
               resultList = _yield$replaceCheck.data.resultList;
               resultParams = (resultList || []).reduce(function (prv, next) {
                 var _next$componentKey$sp = next.componentKey.split('_'),
@@ -411,53 +412,16 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
 
             case 11:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
         }
-      }, _callee3);
+      }, _callee2);
     }));
 
-    return function queryReplaceCount(_x5) {
+    return function queryReplaceCount(_x3) {
       return _ref3.apply(this, arguments);
     };
-  }(); //带*参数提示清空
-
-
-  var filterStarValues = function filterStarValues() {
-    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var obj = {};
-    Object.keys(params).forEach(function (key) {
-      var _params$key;
-
-      if (params[key] && ((_params$key = params[key]) === null || _params$key === void 0 ? void 0 : _params$key.indexOf('*')) > -1) {
-        obj[key] = 0;
-      }
-    });
-    setReplaceValue(function (value) {
-      return _objectSpread(_objectSpread({}, value), obj);
-    });
-  }; //订单返填
-
-
-  var changeHandle = function changeHandle(order_no) {
-    if (!order_no) return;
-
-    if (time.current) {
-      clearTimeout(time.current);
-    }
-
-    time.current = setTimeout(function () {
-      orderBack({
-        order_no: order_no,
-        form: form,
-        shopId: currentShopId,
-        shopList: shopList,
-        templateDetail: templateDetail,
-        type: !!workOrderId ? 'edit' : 'add',
-        callback: orderBackReplace
-      });
-    }, 1000);
-  }; //自动返填重复校验
+  }(); //自动返填重复校验
 
 
   var orderBackReplace = function orderBackReplace(value) {
@@ -473,40 +437,39 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
       alipayAccount: alipayAccount,
       expressLogisticsCode: expressLogisticsCode
     });
-  };
+  }; // 切换模板
 
-  var finalFormItems = useMemo(function () {
-    var otherItems = get(templateDetail, 'componentDtoList', []).map(newRenderColumnItem({
-      form: form,
-      shopList: shopList,
-      shopId: currentShopId,
-      isEditing: !!workOrderId,
-      workOrderDetail: workOrderDetail,
-      templateDetail: templateDetail
-    }));
-    return _toConsumableArray(otherItems);
-  }, [templateDetail, shopList, currentShopId, workOrderDetail]);
+
+  var handleChangeTemplateId = function handleChangeTemplateId(value, selectedOptions) {
+    setTemplateId(value);
+
+    if (typeof onTemplateChange === 'function' && selectedOptions.length > 0) {
+      var _selectedOptions;
+
+      onTemplateChange((_selectedOptions = selectedOptions[selectedOptions.length - 1]) === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.label);
+    }
+  };
 
   var queryDetail = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(_ref4) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref4) {
       var templateId, workOrderId, shopId, shopList, record, orderNo, buyerId, buyerNick, _workOrderDetail2, _workOrderDetail2$dat, _workOrderDetail2$dat2, _workOrderDetail, _templateDetail, _workOrderDetail3, _templateDetail$data, transData, _templateDetail$data2, _templateDetail$data3, jsonMap, _transData, antFormEl;
 
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
               templateId = _ref4.templateId, workOrderId = _ref4.workOrderId, shopId = _ref4.shopId, shopList = _ref4.shopList, record = _ref4.record, orderNo = _ref4.orderNo, buyerId = _ref4.buyerId, buyerNick = _ref4.buyerNick;
               form.resetFields();
-              _context4.prev = 2;
+              _context3.prev = 2;
               setLoading(true);
               _workOrderDetail = {};
 
               if (!workOrderId) {
-                _context4.next = 9;
+                _context3.next = 9;
                 break;
               }
 
-              _context4.next = 8;
+              _context3.next = 8;
               return queryWorkOrderDetail({
                 checkIsAllowedExport: false,
                 shopId: shopId,
@@ -514,16 +477,16 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
               });
 
             case 8:
-              _workOrderDetail = _context4.sent;
+              _workOrderDetail = _context3.sent;
 
             case 9:
-              _context4.next = 11;
+              _context3.next = 11;
               return queryTemplateDetail({
                 uniqueKey: templateId || ((_workOrderDetail2 = _workOrderDetail) === null || _workOrderDetail2 === void 0 ? void 0 : (_workOrderDetail2$dat = _workOrderDetail2.data) === null || _workOrderDetail2$dat === void 0 ? void 0 : (_workOrderDetail2$dat2 = _workOrderDetail2$dat.jsonMap) === null || _workOrderDetail2$dat2 === void 0 ? void 0 : _workOrderDetail2$dat2.templateId)
               });
 
             case 11:
-              _templateDetail = _context4.sent;
+              _templateDetail = _context3.sent;
               setTemplateDetail(_templateDetail.data);
               setWorkOrderDetail(_workOrderDetail.data);
 
@@ -573,97 +536,175 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
 
               antFormEl = document.getElementsByClassName('ant-form');
               (antFormEl === null || antFormEl === void 0 ? void 0 : antFormEl.length) > 0 && set(antFormEl, '0.scrollTop', 0);
-              _context4.next = 23;
+              _context3.next = 23;
               break;
 
             case 20:
-              _context4.prev = 20;
-              _context4.t0 = _context4["catch"](2);
-              console.error('获取模板信息错误', _context4.t0);
+              _context3.prev = 20;
+              _context3.t0 = _context3["catch"](2);
+              console.error('获取模板信息错误', _context3.t0);
 
             case 23:
-              _context4.prev = 23;
+              _context3.prev = 23;
               setLoading(false);
-              return _context4.finish(23);
+              return _context3.finish(23);
 
             case 26:
             case "end":
-              return _context4.stop();
+              return _context3.stop();
           }
         }
-      }, _callee4, null, [[2, 20, 23, 26]]);
+      }, _callee3, null, [[2, 20, 23, 26]]);
     }));
 
-    return function queryDetail(_x6) {
+    return function queryDetail(_x4) {
       return _ref5.apply(this, arguments);
     };
   }();
 
-  var closeModal = function closeModal() {
-    dispatch(setFormModalVisible(false));
-    form.resetFields();
-  };
+  useEffect(function () {
+    if (!templateIdState) return;
+    queryDetail({
+      templateId: last(templateIdState),
+      workOrderId: workOrderId,
+      shopId: shopId,
+      shopList: shopList,
+      record: record,
+      orderNo: orderNo,
+      buyerId: buyerId,
+      buyerNick: buyerNick
+    });
+  }, [templateIdState, workOrderId]); //订单返填
 
-  var renderFooter = function renderFooter() {
-    var btnGroup = [];
+  var changeHandle = function changeHandle(order_no) {
+    if (!order_no) return;
 
-    if (look) {
-      btnGroup = /*#__PURE__*/React.createElement(Space, {
-        style: {
-          float: 'right'
-        }
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: function onClick() {
-          closeModal();
-        }
-      }, "\u5173\u95ED"));
-    } else {
-      btnGroup = /*#__PURE__*/React.createElement(Space, {
-        style: {
-          float: 'right'
-        }
-      }, /*#__PURE__*/React.createElement(Button, {
-        onClick: function onClick() {
-          return closeModal();
-        }
-      }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: debounce(handleSubmit, 300)
-      }, "\u786E\u5B9A"));
+    if (time.current) {
+      clearTimeout(time.current);
     }
 
-    return btnGroup;
+    time.current = setTimeout(function () {
+      orderBack({
+        order_no: order_no,
+        form: form,
+        shopId: shopId,
+        shopList: shopList,
+        templateDetail: templateDetail,
+        type: !!workOrderId ? 'edit' : 'add',
+        callback: orderBackReplace
+      });
+    }, 1000);
+  }; //组件失焦事件
+
+
+  var componentOnBlur = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(value, type) {
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              if (value) {
+                _context4.next = 3;
+                break;
+              }
+
+              setReplaceValue(function (prev) {
+                return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, type, 0));
+              });
+              return _context4.abrupt("return");
+
+            case 3:
+              queryReplaceCount(_defineProperty({}, type, value));
+
+              if (type === 'tradeId' || type === 'enterprisePaymentTid') {
+                changeHandle(value);
+              }
+
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function componentOnBlur(_x5, _x6) {
+      return _ref6.apply(this, arguments);
+    };
+  }(); // 切换店铺
+
+
+  var newRenderColumnItem = function newRenderColumnItem(effects) {
+    return function (item) {
+      if (look) {
+        item.componentConfig = _objectSpread(_objectSpread({}, item.componentConfig), {}, {
+          disabled: true
+        });
+      }
+
+      var instance = factory(item.workOrderComponentType, {
+        id: item.uniqueKey,
+        name: item.name,
+        componentConfig: item.componentConfig,
+        effects: effects
+      });
+      return instance.editRender({
+        onBlur: componentOnBlur
+      });
+    };
   };
 
-  return /*#__PURE__*/React.createElement(Drawer, {
-    closeIcon: /*#__PURE__*/React.createElement(LeftOutlined, null),
-    title: (templateDetail === null || templateDetail === void 0 ? void 0 : templateDetail.name) || '工单录入',
-    width: width,
-    open: visible,
-    onClose: closeModal,
-    footer: renderFooter(),
-    destroyOnClose: true
-  }, /*#__PURE__*/React.createElement(Spin, {
-    spinning: loading
-  }, /*#__PURE__*/React.createElement(ConfigProvider, {
-    locale: zhCN
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "tipBox"
-  }, Object.keys(replaceValue).map(function (key) {
-    return replaceValue[key] > 0 && /*#__PURE__*/React.createElement("div", null, "\u63D0\u793A\uFF1A\u8BE5", COMPONENT_MAP_NAME[key], "\u9488\u5BF9\u6B64\u6A21\u677F\u5DF2\u521B\u5EFA\u8FC7", replaceValue[key], "\u6761\u5DE5\u5355\uFF01");
-  })), /*#__PURE__*/React.createElement(Form, {
-    form: form,
-    labelCol: {
-      span: 6
-    },
-    wrapperCol: {
-      span: 18
-    },
-    className: "customizeFormModalClassName",
-    style: {// maxHeight: '500px',
+  var finalFormItems = useMemo(function () {
+    var otherItems = get(templateDetail, 'componentDtoList', []).map(newRenderColumnItem({
+      form: form,
+      shopList: shopList,
+      shopId: shopId,
+      isEditing: !!workOrderId,
+      workOrderDetail: workOrderDetail,
+      templateDetail: templateDetail
+    }));
+
+    if (!currentShopId) {
+      return [ShopName].concat(_toConsumableArray(otherItems));
     }
-  }, finalFormItems))));
+
+    return otherItems;
+  }, [templateDetail, shopList, shopId, workOrderDetail, currentShopId]);
+  return /*#__PURE__*/_jsx(Spin, {
+    spinning: loading,
+    children: /*#__PURE__*/_jsxs(ConfigProvider, {
+      locale: zhCN,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "tipBox",
+        children: Object.keys(replaceValue).map(function (key) {
+          return replaceValue[key] > 0 && /*#__PURE__*/_jsxs("div", {
+            children: ["\u63D0\u793A\uFF1A\u8BE5", COMPONENT_MAP_NAME[key], "\u9488\u5BF9\u6B64\u6A21\u677F\u5DF2\u521B\u5EFA\u8FC7", replaceValue[key], "\u6761\u5DE5\u5355\uFF01"]
+          });
+        })
+      }), /*#__PURE__*/_jsxs(Form, _objectSpread(_objectSpread({
+        form: form
+      }, formProps), {}, {
+        children: [!templateId && /*#__PURE__*/_jsx(Form.Item, {
+          label: "\u6A21\u677F\u540D\u79F0",
+          required: true,
+          children: /*#__PURE__*/_jsx(Cascader, {
+            options: templateList,
+            placeholder: "\u8BF7\u9009\u62E9\u6A21\u7248",
+            showSearch: true,
+            value: templateIdState,
+            onChange: handleChangeTemplateId,
+            allowClear: false
+          })
+        }), !currentShopId && /*#__PURE__*/_jsx(ShopName, {
+          shopList: shopList,
+          platIconList: platIcon,
+          workOrderId: workOrderId,
+          look: look,
+          handleChangeShopId: setShopId
+        }), finalFormItems]
+      }))]
+    })
+  });
 };
 
-export default CustomizeFormModal;
+export default /*#__PURE__*/forwardRef(FormRender);