src/pages/admin/Stand/StandGroup/components/EditModal.tsx

import React, { useState, useEffect, useRef } from 'react';
import { Modal, Button, message, Form, Input, Switch, Select, Tag } from 'antd';
import {useStore} from '../index';
import { authShopRoleListApi } from '@/common/api';
import { List, saveStandGroupApi } from '../api';
import { debounce } from 'lodash';
import ShopSelect from '@/components/ShopSelect';
const Option = Select.Option;
interface RoleShop {
  roleCode?: string // 角色编码
  roleName?: string // 角色名称
  shopId?: number // 门店id
  shopName?: string // 门店名称
}
export default function DetailModal() {
  const { visible, setVisible, shopList, roleList, setLoading: setPageLoading, currentItem, setCurrentItem } = useStore();
  const [loading, setLoading] = useState<boolean>(false);
  const [staffList, setStaffList] = useState<any>([]);
  const [roleShop, setRoleShop] = useState<RoleShop>({});
  const [form] = Form.useForm();
  const resetRef = useRef<any>(true);
  // const [shopValue, setShopValue] = useState<any>();
  useEffect(() => {
    if (visible && currentItem.id) {
      const _staff = currentItem?.staffList?.map((i:any) => ({value: i.staffId, label: i.staffName}));
      // setShopValue([{value: currentItem.shopId, label: currentItem.shopName}]);
      form.setFieldsValue({
        name: currentItem.name,
        roleCode: currentItem.roleCode,
        roleName: currentItem.roleName,
        shop: [{value: currentItem.shopId, label: currentItem.shopName}],
        staff: _staff,
      });
      setRoleShop({roleCode: currentItem.roleCode, roleName: currentItem.roleName, shopId: currentItem.shopId, shopName: currentItem.shopName});
    }
  }, [visible]);
  useEffect(() => {
    if (roleShop.roleCode && roleShop.shopId) {
      getStaffList(roleShop);
      // 编辑首次进入不重置表单人员
      if (!(currentItem.id && resetRef.current)) {
        form.setFieldsValue({staff: []});
      }
      resetRef.current = false;
    } else {
      setStaffList([]);
      form.setFieldsValue({staff: []});
    }
  }, [roleShop.roleCode, roleShop.shopId]);
  // 获取员工列表
  function getStaffList(params: any) {
    authShopRoleListApi({rangeValue: params.shopId, roleCode: params.roleCode})
    .then(res => {
      setStaffList(res.data || []);
    })
    .catch(e => message.error(e.message));
  }
  function handleCancel() {
    setVisible(false);
    resetStatus();
  }
  // 重置页面数据
  function resetStatus() {
    form.resetFields();
    setStaffList([]);
    setRoleShop({});
    setCurrentItem({});
    resetRef.current = true;
  }
  async function onFinish() {
    const params = await form.validateFields();
    setLoading(true);
    const _staff = params.staff.map((v:any) => {
      const k = {
        staffId: v.value,
        staffName: v.label
      };
      return k;
    });
    const _params: List = {
      shopId: Array.isArray(params.shop)? params.shop[0].value: params.shop.value,
      shopName: Array.isArray(params.shop)? params.shop[0].label: params.shop.label,
      roleCode: params.roleCode,
      roleName: roleShop.roleName,
      staffList: _staff,
      name: params.name
    };
    if (currentItem.id) {
      _params.id = currentItem.id;
    }
    saveStandGroupApi(_params)
    .then(res => {
      message.success(res.result);
      setLoading(false);
      setVisible(false);
      resetStatus();
      setPageLoading(true);
    })
    .catch(e => {
      message.error(e.message);
      setLoading(false);
    });
  }
  return (
    <Modal
      destroyOnClose
      forceRender
      title={currentItem.id ? "编辑站岗小组" : "新增站岗小组"}
      visible={visible}
      maskClosable={false}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel} style={{ marginLeft: 10 }}>
          取消
        </Button>,
        <Button
          key="submit"
          onClick={debounce(() => onFinish(), 380)}
          type="primary"
          htmlType="submit"
          loading={loading}
        >
          确认
        </Button>,
      ]}
    >
      <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
        <Form.Item
          label="小组名称"
          rules={[{ required: true, message: "请输入小组名称!" }]}
          name="name"
        >
          <Input placeholder="请输入小组名称" allowClear />
        </Form.Item>
        <Form.Item
          label="门店"
          name="shop"
          rules={[{ required: true, message: "请选择门店！" }]}
        >
          {/* <Select
            placeholder="门店"
            allowClear
            showSearch
            optionFilterProp="children"
            onChange={(value, option: any) => setRoleShop({...roleShop, shopId: value || undefined, shopName: option.children || undefined})}
          >
            {shopList.length && shopList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
          </Select> */}
          <ShopSelect
            labelInValue
            onChange={(item: any) => setRoleShop({
                ...roleShop,
                shopId: item.value || undefined,
                shopName: item.label || undefined,
              })}
            // value={shopValue}
          />
        </Form.Item>
        <Form.Item
          label="角色名称"
          name="roleName"
          rules={[{ required: true, message: "请选择角色！" }]}
        >
          <Select
            placeholder="角色编码"
            allowClear
            showSearch
            optionFilterProp="children"
            onChange={(value, option: any) => {
              setRoleShop({
                ...roleShop,
                roleCode: value || undefined,
                roleName: option.children || undefined,
              });
              form.setFieldsValue({ roleCode: value || undefined });
            }}
          >
            {roleList.length &&
              roleList.map((item) => (
                <Option key={item.roleCode} value={item.roleCode}>
                  {item.roleName}
                </Option>
              ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="角色码"
          rules={[{ required: true, message: "请选择角色!" }]}
          name="roleCode"
        >
          <Input placeholder="请选择角色" allowClear disabled />
        </Form.Item>
        <Form.Item
          label="员工"
          name="staff"
          rules={[{ required: true, message: "请选择员工！" }]}
        >
          <Select
            placeholder="请选择员工"
            allowClear
            showSearch
            mode="multiple"
            showArrow={false}
            optionFilterProp="children"
            labelInValue
          >
            {staffList.length &&
              staffList.map((item: any) => (
                <Option key={item.userId} value={item.userId}>
                  {item.userName}
                </Option>
              ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
}