Skip to content

C
CivManage
Commit 98e3d6b5 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '方案制定优化'

parent 6bf22e2b
Pipeline #80692 waiting for manual action with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 961 additions and 900 deletions
          package.json
          View file @ 98e3d6b5
          ......@@ -99,6 +99,7 @@
          "@wisdom-map/basemap": "1.1.0-31",
          "ace-builds": "^1.4.12",
          "antd-img-crop": "^3.13.2",
          "array-move": "^4.0.0",
          "bizcharts": "^4.0.15",
          "chalk": "2.4.2",
          "compression": "1.7.4",
          ......
          src/pages/bsmanager/base/standingBook/BookConfig.jsx
          View file @ 98e3d6b5
          ......@@ -7,500 +7,499 @@ import { Form, Input, Select, Tooltip, Button, notification, Drawer, Space } fro
          import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
          import { LoadEventFields } from '@/services/tablemanager/tablemanager';
          import {
          GetCM_Ledger_LoadLedgerTable,
          GetCMLedger_QueryLedgers,
          GetCMLedger_OperateLedger,
          GetCM_Ledger_LoadLedgerTable,
          GetCMLedger_QueryLedgers,
          GetCMLedger_OperateLedger,
          } from '@/services/standingBook/api';
          import ChangeAdd from './changeAdd';
          const { Option } = Select;
          const { TextArea } = Input;
          const BookConfig = props => {
          const {
          callBackSubmit,
          type,
          formObj,
          visible,
          tableData,
          pickItem1,
          onCancel,
          data,
          maxLength,
          keepTableData,
          } = props;
          const [standingTable, setStandingTable] = useState([]);
          const [isVisible, setIsVisible] = useState(false); // 弹窗
          const [pickItem, setPickItem] = useState(''); // 选择的字段
          const [Order, setOrder] = useState(''); // 当前编辑序号
          const [filed, setFiled] = useState({}); // 传给子组件列表数据
          const [checkedList, setCheckedList] = useState([]);
          const [allFileds, setAllFileds] = useState([]); // 当前表所有的字段
          const [form] = Form.useForm();
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 5,
          },
          wrapperCol: {
          span: 19,
          },
          };
          const { Item } = Form;
          // 提交
          const onSubmit = () => {
          form.validateFields().then(validate => {
          if (validate) {
          let aa = form.getFieldsValue().Type;
          if (aa == '全部') {
          notification.warning({
          message: '提示',
          duration: 3,
          description: '分组名称不能为全部',
          });
          } else {
          let obj =
          type === 'add'
          ? { ...validate, Order: maxLength }
          : { ...validate, Order, ID: formObj.ID };
          GetCMLedger_OperateLedger(obj)
          .then(res => {
          if (res.code === 0) {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: type === 'add' ? '新增成功' : '编辑成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          })
          .catch(() => {
          notification.error({
          message: '提示',
          duration: 3,
          description: '网络异常请稍后再试',
          });
          });
          }
          }
          });
          };
          useEffect(() => {
          console.log(pickItem1);
          console.log(data[0]);
          if (visible) {
          // 获取台账表
          getTableData();
          if (type === 'edit') {
          GetCMLedger_QueryLedgers({ ledgerId: formObj.ID }).then(res => {
          if (res.code === 0) {
          form.setFieldsValue(res.data.root);
          setOrder(res.data.root.Order);
          changTable(res.data.root.TableName);
          }
          });
          } else {
          if (!pickItem1 || pickItem1 == '全部') {
          form.setFieldsValue({ Type: data[0] });
          } else {
          form.setFieldsValue({ Type: pickItem1 });
          }
          }
          const {
          callBackSubmit,
          type,
          formObj,
          visible,
          tableData,
          pickItem1,
          onCancel,
          data,
          maxLength,
          keepTableData,
          } = props;
          const [standingTable, setStandingTable] = useState([]);
          const [isVisible, setIsVisible] = useState(false); // 弹窗
          const [pickItem, setPickItem] = useState(''); // 选择的字段
          const [Order, setOrder] = useState(''); // 当前编辑序号
          const [filed, setFiled] = useState({}); // 传给子组件列表数据
          const [checkedList, setCheckedList] = useState([]);
          const [allFileds, setAllFileds] = useState([]); // 当前表所有的字段
          const [form] = Form.useForm();
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 5,
          },
          wrapperCol: {
          span: 19,
          },
          };
          const { Item } = Form;
          // 提交
          const onSubmit = () => {
          form.validateFields().then(validate => {
          if (validate) {
          let aa = form.getFieldsValue().Type;
          if (aa == '全部') {
          notification.warning({
          message: '提示',
          duration: 3,
          description: '分组名称不能为全部',
          });
          } else {
          setFiled({});
          form.resetFields();
          form.setFieldsValue({ AccountType: '台账' });
          }
          }, [visible]);
          // 获取台账表
          const getTableData = () => {
          GetCM_Ledger_LoadLedgerTable().then(res => {
          if (res.code === 0) {
          setStandingTable(res.data.root);
          }
          });
          };
          // 切换表后数据处理为对应格式
          const changTable = value => {
          LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
          if (res.data.root) {
          let fileMap = new Map();
          let initList = [];
          // 处理为子组件需要的格式
          res.data.root.forEach(item => {
          initList.push(item.fieldName);
          if (fileMap.has(item.group)) {
          let list = [...fileMap.get(item.group)];
          list.push(item.fieldName);
          fileMap.set(item.group, list);
          } else {
          fileMap.set(item.group, [item.fieldName]);
          }
          let obj =
          type === 'add'
          ? { ...validate, Order: maxLength }
          : { ...validate, Order, ID: formObj.ID };
          GetCMLedger_OperateLedger(obj)
          .then(res => {
          if (res.code === 0) {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: type === 'add' ? '新增成功' : '编辑成功',
          });
          // 给Map格式转为对象
          fileMap = Object.fromEntries(fileMap.entries());
          // 处理外部字段
          Object.keys(form.getFieldsValue()).forEach(key => {
          saveOutFieldsLength(key, initList);
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          setAllFileds(initList);
          setFiled(fileMap);
          }
          });
          };
          // 保存外部字段个数
          const saveOutFieldsLength = (key, initList) => {
          switch (key) {
          case 'Fields':
          form.setFieldsValue({ outListFileds: dealExternal(key, initList) });
          break;
          case 'SearchFields':
          form.setFieldsValue({ outSearchFields: dealExternal(key, initList) });
          break;
          case 'AddFields':
          form.setFieldsValue({ outAddFields: dealExternal(key, initList) });
          break;
          case 'EditFields':
          form.setFieldsValue({ outEditFields: dealExternal(key, initList) });
          break;
          case 'WebFields':
          form.setFieldsValue({ outWebFields: dealExternal(key, initList) });
          break;
          case 'MobileFields':
          form.setFieldsValue({ outMobileFields: dealExternal(key, initList) });
          break;
          default:
          break;
          }
          })
          .catch(() => {
          notification.error({
          message: '提示',
          duration: 3,
          description: '网络异常请稍后再试',
          });
          });
          }
          };
          // 选择字段回调函数
          const onOK = prop => {
          setIsVisible(false);
          let obj = {};
          obj[prop.pickItem] = prop.str;
          form.setFieldsValue(obj);
          saveOutFieldsLength(prop.pickItem, allFileds);
          };
          // 处理外部字段
          const dealExternal = (fileds, list) => {
          let isExternal;
          let externalLength = 0;
          if (form.getFieldValue(fileds)) {
          form
          .getFieldValue(fileds)
          .split(',')
          .forEach(item => {
          isExternal = list.some(val => val === item);
          if (!isExternal && item !== '') {
          // eslint-disable-next-line no-plusplus
          externalLength++;
          }
          });
          }
          });
          };
          useEffect(() => {
          console.log(pickItem1);
          console.log(data[0]);
          if (visible) {
          // 获取台账表
          getTableData();
          if (type === 'edit') {
          GetCMLedger_QueryLedgers({ ledgerId: formObj.ID }).then(res => {
          if (res.code === 0) {
          form.setFieldsValue(res.data.root);
          setOrder(res.data.root.Order);
          changTable(res.data.root.TableName);
          }
          });
          } else {
          if (!pickItem1 || pickItem1 == '全部') {
          form.setFieldsValue({ Type: data[0] });
          } else {
          form.setFieldsValue({ Type: pickItem1 });
          }
          }
          } else {
          setFiled({});
          form.resetFields();
          form.setFieldsValue({ AccountType: '台账' });
          }
          }, [visible]);
          return externalLength;
          };
          // 勾选字段
          const pickFiled = fileds => {
          if (!form.getFieldValue('TableName')) {
          notification.error({ message: '提示', duration: 3, description: '请选择台账表' });
          return;
          }
          // 添加外部字段
          let fil = { ...filed };
          fil['外部字段'] = [];
          let isExternal;
          let list = form.getFieldValue(fileds) ? form.getFieldValue(fileds).split(',') : [];
          list.forEach(item => {
          isExternal = allFileds.some(val => val === item);
          if (!isExternal && item !== '') {
          fil['外部字段'].push(item);
          }
          // 获取台账表
          const getTableData = () => {
          GetCM_Ledger_LoadLedgerTable().then(res => {
          if (res.code === 0) {
          setStandingTable(res.data.root);
          }
          });
          };
          // 切换表后数据处理为对应格式
          const changTable = value => {
          LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
          if (res.data.root) {
          let fileMap = new Map();
          let initList = [];
          // 处理为子组件需要的格式
          res.data.root.forEach(item => {
          initList.push(item.fieldName);
          if (fileMap.has(item.group)) {
          let list = [...fileMap.get(item.group)];
          list.push(item.fieldName);
          fileMap.set(item.group, list);
          } else {
          fileMap.set(item.group, [item.fieldName]);
          }
          });
          if (fil['外部字段'].length === 0) {
          delete fil['外部字段'];
          }
          setFiled(fil);
          setCheckedList(list);
          setPickItem(fileds);
          setIsVisible(true);
          };
          // 搜索框监听
          const onSearch = value => {
          if (value) {
          form.setFieldsValue({ Type: value });
          }
          };
          // 给Map格式转为对象
          fileMap = Object.fromEntries(fileMap.entries());
          // 处理外部字段
          Object.keys(form.getFieldsValue()).forEach(key => {
          saveOutFieldsLength(key, initList);
          });
          setAllFileds(initList);
          setFiled(fileMap);
          }
          });
          };
          // 保存外部字段个数
          const saveOutFieldsLength = (key, initList) => {
          switch (key) {
          case 'Fields':
          form.setFieldsValue({ outListFileds: dealExternal(key, initList) });
          break;
          case 'SearchFields':
          form.setFieldsValue({ outSearchFields: dealExternal(key, initList) });
          break;
          case 'AddFields':
          form.setFieldsValue({ outAddFields: dealExternal(key, initList) });
          break;
          case 'EditFields':
          form.setFieldsValue({ outEditFields: dealExternal(key, initList) });
          break;
          case 'WebFields':
          form.setFieldsValue({ outWebFields: dealExternal(key, initList) });
          break;
          case 'MobileFields':
          form.setFieldsValue({ outMobileFields: dealExternal(key, initList) });
          break;
          default:
          break;
          }
          };
          // 选择字段回调函数
          const onOK = prop => {
          setIsVisible(false);
          let obj = {};
          obj[prop.pickItem] = prop.str;
          form.setFieldsValue(obj);
          saveOutFieldsLength(prop.pickItem, allFileds);
          };
          // 处理外部字段
          const dealExternal = (fileds, list) => {
          let isExternal;
          let externalLength = 0;
          if (form.getFieldValue(fileds)) {
          form
          .getFieldValue(fileds)
          .split(',')
          .forEach(item => {
          isExternal = list.some(val => val === item);
          if (!isExternal && item !== '') {
          // eslint-disable-next-line no-plusplus
          externalLength++;
          }
          });
          }
          return (
          <Drawer
          title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
          width="500px"
          visible={visible}
          onClose={onCancel}
          destroyOnClose
          footer={
          <Space>
          <Button onClick={onCancel}>取消</Button>
          <Button onClick={onSubmit} type="primary">
          确定
          </Button>
          </Space>
          }
          return externalLength;
          };
          // 勾选字段
          const pickFiled = fileds => {
          if (!form.getFieldValue('TableName')) {
          notification.error({ message: '提示', duration: 3, description: '请选择台账表' });
          return;
          }
          // 添加外部字段
          let fil = { ...filed };
          fil['外部字段'] = [];
          let isExternal;
          let list = form.getFieldValue(fileds) ? form.getFieldValue(fileds).split(',') : [];
          list.forEach(item => {
          isExternal = allFileds.some(val => val === item);
          if (!isExternal && item !== '') {
          fil['外部字段'].push(item);
          }
          });
          if (fil['外部字段'].length === 0) {
          delete fil['外部字段'];
          }
          setFiled(fil);
          setCheckedList(list);
          setPickItem(fileds);
          setIsVisible(true);
          };
          // 搜索框监听
          const onSearch = value => {
          if (value) {
          form.setFieldsValue({ Type: value });
          }
          };
          return (
          <Drawer
          title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
          width="500px"
          visible={visible}
          onClose={onCancel}
          destroyOnClose
          footer={
          <Space>
          <Button onClick={onCancel}>取消</Button>
          <Button onClick={onSubmit} type="primary">
          确定
          </Button>
          </Space>
          }
          >
          <Form form={form} {...layout}>
          <Item label="分组" name="Type" rules={[{ required: true, message: '请选择分组' }]}>
          <Select
          showSearch
          filterOption={false}
          onSearch={onSearch}
          placeholder="请输入分组名称"
          allowClear
          >
          {data.map((item, index) => (
          <Option value={item} key={index}>
          {item}
          </Option>
          ))}
          </Select>
          </Item>
          <Item label="台账类型" name="AccountType">
          <Select placeholder="请选择台账类型">
          <Option value="台账">台账</Option>
          <Option value="反馈">反馈</Option>
          <Option value="设备">设备</Option>
          </Select>
          </Item>
          <Item
          label="台账名称"
          name="Name"
          rules={[
          {
          required: true,
          validator: (rule, value) => {
          if (
          keepTableData.find(i => i.name == form.getFieldsValue().Name) &&
          form.getFieldsValue().Name != formObj.name
          ) {
          return Promise.reject('台账名称已存在');
          } else if (form.getFieldsValue().Name == '') {
          return Promise.reject('台账名称不能为空');
          }
          return Promise.resolve();
          },
          },
          ]}
          >
          <Input placeholder="台账名称不可重复" allowClear />
          </Item>
          <Item label="台账表" name="TableName" rules={[{ required: true, message: '请选择台账表' }]}>
          <Select placeholder="" optionFilterProp="children" onChange={changTable} showSearch>
          {standingTable.map((item, index) => (
          <Option key={index} value={item.value}>
          {item.text}
          </Option>
          ))}
          </Select>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outListFileds') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outListFileds')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>台账字段</span>
          </>
          }
          name="Fields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="Fields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端详情查看字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('Fields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outSearchFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outSearchFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>检索字段</span>
          </>
          }
          name="SearchFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="SearchFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端列表检索字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('SearchFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outAddFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outAddFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>添加字段</span>
          </>
          }
          name="AddFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="AddFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端数据添加字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('AddFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outEditFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outEditFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>编辑字段</span>
          </>
          }
          name="EditFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="EditFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端可编辑字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('EditFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outWebFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outWebFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>前端字段</span>
          </>
          }
          name="WebFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="WebFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端列表展示字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('WebFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outMobileFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outMobileFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>手持字段</span>
          </>
          }
          name="MobileFields"
          >
          <Form form={form} {...layout}>
          <Item label="分组" name="Type" rules={[{ required: true, message: '请选择分组' }]}>
          <Select
          showSearch
          filterOption={false}
          onSearch={onSearch}
          placeholder="请输入分组名称"
          allowClear
          >
          {data.map((item, index) => (
          <Option value={item} key={index}>
          {item}
          </Option>
          ))}
          </Select>
          </Item>
          <Item label="台账类型" name="AccountType">
          <Select placeholder="请选择台账类型">
          <Option value="台账">台账</Option>
          <Option value="反馈">反馈</Option>
          <Option value="设备">设备</Option>
          </Select>
          </Item>
          <Item
          label="台账名称"
          name="Name"
          rules={[
          {
          required: true,
          validator: (rule, value) => {
          if (
          keepTableData.find(i => i.name == form.getFieldsValue().Name) &&
          form.getFieldsValue().Name != formObj.name
          ) {
          return Promise.reject('台账名称已存在');
          } else if (form.getFieldsValue().Name == '') {
          return Promise.reject('台账名称不能为空');
          }
          return Promise.resolve();
          },
          },
          ]}
          >
          <Input placeholder="台账名称不可重复" allowClear />
          </Item>
          <Item label="台账表" name="TableName" rules={[{ required: true, message: '请选择台账表' }]}>
          <Select placeholder="" optionFilterProp="children" onChange={changTable} showSearch>
          {standingTable.map((item, index) => (
          <Option key={index} value={item.value}>
          {item.text}
          </Option>
          ))}
          </Select>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outListFileds') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outListFileds')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>台账字段</span>
          </>
          }
          name="Fields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="Fields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端详情查看字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('Fields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outSearchFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outSearchFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>检索字段</span>
          </>
          }
          name="SearchFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="SearchFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端列表检索字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('SearchFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outAddFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outAddFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>添加字段</span>
          </>
          }
          name="AddFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="AddFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端数据添加字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('AddFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outEditFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outEditFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>编辑字段</span>
          </>
          }
          name="EditFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="EditFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端可编辑字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('EditFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outWebFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outWebFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>前端字段</span>
          </>
          }
          name="WebFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="WebFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="前端列表展示字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('WebFields');
          }}
          />
          </div>
          </Item>
          <Item
          label={
          <>
          {form.getFieldValue('outMobileFields') > 0 ? (
          <Tooltip title={`外部字段${form.getFieldValue('outMobileFields')}个`}>
          <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
          </Tooltip>
          ) : (
          ''
          )}
          <span>手持字段</span>
          </>
          }
          name="MobileFields"
          >
          <div style={{ display: 'flex' }}>
          <Form.Item name="MobileFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="手持展示字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('MobileFields');
          }}
          />
          </div>
          </Item>
          <Item label="接口配置" name="Interface">
          <Input placeholder="服务项目dll库" allowClear />
          </Item>
          </Form>
          <ChangeAdd
          visible={isVisible}
          onCancel={() => {
          setIsVisible(false);
          setCheckedList([]);
          }}
          callBackSubmit={onOK}
          newCheckedList={checkedList}
          filed={filed}
          pickItem={pickItem}
          formObj={formObj}
          <div style={{ display: 'flex' }}>
          <Form.Item name="MobileFields" style={{ marginBottom: 0, width: '100%' }}>
          <TextArea placeholder="手持展示字段" allowClear />
          </Form.Item>
          <Button
          type="dashed"
          style={{ height: '54px', width: '50px', marginLeft: '10px' }}
          icon={<PlusOutlined />}
          onClick={() => {
          pickFiled('MobileFields');
          }}
          />
          </Drawer>
          );
          </div>
          </Item>
          <Item label="接口配置" name="Interface">
          <Input placeholder="服务项目dll库" allowClear />
          </Item>
          </Form>
          <ChangeAdd
          visible={isVisible}
          onCancel={() => {
          setIsVisible(false);
          setCheckedList([]);
          }}
          callBackSubmit={onOK}
          newCheckedList={checkedList}
          filed={filed}
          pickItem={pickItem}
          formObj={formObj}
          />
          </Drawer>
          );
          };
          export default BookConfig;
          src/pages/bsmanager/patrolMaintenance/maintenance/AddModalNew.jsx
          View file @ 98e3d6b5
          ......@@ -4,6 +4,9 @@
          /* eslint-disable camelcase */
          /* eslint-disable no-unused-expressions */
          import React, { useContext, useEffect, useRef, useState } from 'react';
          import { Context } from './maintenance';
          import { arrayMoveImmutable } from 'array-move';
          import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
          import {
          Drawer,
          Form,
          ......@@ -31,13 +34,11 @@ import {
          } from 'antd';
          import {
          PlusOutlined,
          DownOutlined,
          StepForwardFilled,
          InfoCircleOutlined,
          MinusCircleOutlined,
          EditOutlined,
          MenuOutlined,
          } from '@ant-design/icons';
          import { setAutoFreeze } from 'immer';
          import styles from './maintenance.less';
          import RuleConfig from '@/components/RuleConfig';
          import { FormRender } from 'panda-xform';
          ......@@ -65,12 +66,98 @@ import RMSComponents from '@/components/RolePmSite/index';
          import ChangeAdd from './ChangeAdd';
          import logo from '@/assets/images/icons/值映射.png';
          import { objectExpression } from '@babel/types';
          const { Option } = Select;
          const EditableContext = React.createContext(null);
          const EditableRow = ({ index, ...props }) => {
          const [formFeed] = Form.useForm();
          return (
          <Form form={formFeed} component={false}>
          <EditableContext.Provider value={formFeed}>
          <tr {...props} />
          </EditableContext.Provider>
          </Form>
          );
          };
          const EditableCell = ({
          index,
          title,
          editable,
          children,
          dataIndex,
          record,
          handleSave,
          ...restProps
          }) => {
          const [editing, setEditing] = useState(false);
          const inputRef = useRef(null);
          const formBack = useContext(EditableContext);
          const { state, dispatch } = useContext(Context);
          useEffect(() => {
          if (editing && inputRef.current) {
          inputRef.current.focus();
          }
          }, [editing]);
          const toggleEdit = () => {
          setEditing(!editing);
          formBack.setFieldsValue({
          [dataIndex]: record[dataIndex],
          });
          };
          const save = async () => {
          try {
          const values = await formBack.validateFields();
          toggleEdit();
          handleSave({ ...record, ...values });
          } catch (errInfo) {
          console.log('Save failed:', errInfo);
          }
          };
          let childNode = children;
          if (editable) {
          childNode = editing ? (
          <Form.Item
          style={{
          margin: 0,
          }}
          name={dataIndex}
          rules={[
          {
          required: true,
          message: `请选择反馈名称`,
          },
          ]}
          >
          <Select ref={inputRef} showSearch onPressEnter={save} onBlur={save} onSelect={save}>
          {state.selectList
          ? state.selectList.map((item, index) => (
          <Option key={index} value={item}>
          {item}
          </Option>
          ))
          : ''}
          </Select>
          </Form.Item>
          ) : (
          <div
          className="editable-cell-value-wrap"
          style={{
          paddingRight: 24,
          }}
          onClick={toggleEdit}
          >
          {children}
          </div>
          );
          }
          return <td {...restProps}>{childNode}</td>;
          };
          const AddModal = props => {
          const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;
          const { state, dispatch } = useContext(Context);
          const [Type1, setType1] = useState('');
          const [Type2, setType2] = useState('');
          const [selectValue, setSelectValue] = useState('');
          ......@@ -113,79 +200,100 @@ const AddModal = props => {
          const { TextArea } = Input;
          const { TreeNode } = TreeSelect;
          const [characteristics1, setCharacteristics1] = useState([
          {
          name: '一日一次',
          ID: 0,
          },
          {
          name: '一周一次',
          ID: 1,
          },
          {
          name: '半月一次',
          ID: 2,
          },
          {
          name: '一月一次',
          ID: 3,
          },
          {
          name: '季度一次',
          ID: 4,
          },
          {
          name: '半年一次',
          ID: 5,
          },
          {
          name: '一年一次',
          ID: 6,
          },
          {
          name: '小时类',
          ID: 7,
          children: [
          '1小时一次',
          '2小时一次',
          '3小时一次',
          '4小时一次',
          '6小时一次',
          '8小时一次',
          '12小时一次',
          ],
          },
          ]);
          const [formJson, setFormJson] = useState(null);
          const [visibleLook, setVisibleLook] = useState(false);
          const EditableContext = React.createContext(null);
          const [dataSource, setDataSource] = useState([]);
          const [count, setCount] = useState(2);
          const [count, setCount] = useState(0);
          const SortableItem = SortableElement(props => <tr {...props} />);
          const SortableBody = SortableContainer(props => <tbody {...props} />);
          const [stateType, setStateType] = useState('edit');
          const handleDelete = key => {
          const newData = dataSource.filter(item => item.key !== key);
          setDataSource(newData);
          };
          const defaultColumns = [
          const DragHandle = SortableHandle(() => (
          <MenuOutlined
          style={{
          cursor: 'grab',
          color: '#999',
          }}
          />
          ));
          const columnsDrag = [
          {
          title: '反馈名称',
          title: '排序',
          dataIndex: 'sort',
          width: 30,
          className: 'drag-visible',
          render: r => {
          return (
          <div
          style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          }}
          onMouseEnter={() => {
          setStateType('drag');
          }}
          >
          <DragHandle />
          </div>
          );
          },
          },
          {
          title: <span style={{ marginLeft: '12px' }}>反馈名称</span>,
          dataIndex: 'name',
          width: '70%',
          width: '60%',
          className: 'drag-visible',
          editable: true,
          render: r => {
          return (
          <div
          style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          paddingLeft: stateType === 'drag' ? '12px' : '0px',
          }}
          onMouseEnter={() => {
          setStateType('edit');
          }}
          >
          {r}
          </div>
          );
          },
          },
          {
          title: '操作',
          dataIndex: 'operation',
          className: 'drag-visible',
          align: 'center',
          render: (_, record) =>
          dataSource.length >= 1 ? (
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          <span
          onClick={() => handleLook(record.name)}
          style={{ color: '#0e8ef7', cursor: 'pointer' }}
          >
          预览
          </span>
          {record.name ? (
          <span
          onClick={() => handleLook(record.name)}
          style={{ color: '#0e8ef7', cursor: 'pointer' }}
          >
          预览
          </span>
          ) : (
          <span style={{ color: '#b3b3b3', cursor: 'not-allowed' }}>预览</span>
          )}
          <span
          onClick={() => handleDelete(record.key)}
          style={{ color: '#fb8686', cursor: 'pointer' }}
          ......@@ -196,96 +304,33 @@ const AddModal = props => {
          ) : null,
          },
          ];
          const EditableRow = ({ index, ...props }) => {
          const [formFeed] = Form.useForm();
          return (
          <Form form={formFeed} component={false}>
          <EditableContext.Provider value={formFeed}>
          <tr {...props} />
          </EditableContext.Provider>
          </Form>
          );
          };
          const EditableCell = ({
          title,
          editable,
          children,
          dataIndex,
          record,
          handleSave,
          ...restProps
          }) => {
          const [editing, setEditing] = useState(false);
          const inputRef = useRef(null);
          const formBack = useContext(EditableContext);
          useEffect(() => {
          if (editing && inputRef.current) {
          inputRef.current.focus();
          }
          }, [editing]);
          const toggleEdit = () => {
          setEditing(!editing);
          formBack.setFieldsValue({
          [dataIndex]: record[dataIndex],
          });
          };
          const save = async () => {
          try {
          const values = await formBack.validateFields();
          toggleEdit();
          handleSave({
          ...record,
          ...values,
          });
          } catch (errInfo) {
          console.log('Save failed:', errInfo);
          }
          };
          let childNode = children;
          if (editable) {
          childNode = editing ? (
          <Form.Item
          style={{
          margin: 0,
          }}
          name={dataIndex}
          rules={[
          {
          required: true,
          message: `${title} is required.`,
          },
          ]}
          >
          <Select ref={inputRef} showSearch onPressEnter={save} onBlur={save}>
          {filed
          ? filed.map((item, index) => (
          <Option key={index} value={item}>
          {item}
          </Option>
          ))
          : ''}
          </Select>
          </Form.Item>
          ) : (
          <div
          className="editable-cell-value-wrap"
          style={{
          paddingRight: 24,
          }}
          onClick={toggleEdit}
          >
          {children}
          </div>
          );
          const onSortEnd = ({ oldIndex, newIndex }) => {
          if (oldIndex !== newIndex) {
          const newData = arrayMoveImmutable(dataSource.slice(), oldIndex, newIndex).filter(el => !!el);
          console.log('Sorted items: ', newData);
          setDataSource(newData);
          }
          return <td {...restProps}>{childNode}</td>;
          };
          const DraggableContainer = props => (
          <SortableBody
          useDragHandle
          disableAutoscroll
          helperClass="row-dragging"
          onSortEnd={onSortEnd}
          {...props}
          />
          );
          const DraggableBodyRow = ({ className, style, ...restProps }) => {
          const index = dataSource.findIndex(x => x.key === restProps['data-row-key']);
          return <SortableItem style={{ zIndex: 999999, height: '50px' }} index={index} {...restProps} />;
          };
          const handleAdd = () => {
          setStateType('edit');
          const newData = {
          key: count,
          name: `${filed[0]}`,
          name: ``,
          };
          setDataSource([...dataSource, newData]);
          setCount(count + 1);
          ......@@ -300,12 +345,6 @@ const AddModal = props => {
          });
          setDataSource(newData);
          };
          const components = {
          body: {
          row: EditableRow,
          cell: EditableCell,
          },
          };
          useEffect(() => {
          let list = [];
          ......@@ -316,6 +355,7 @@ const AddModal = props => {
          }
          });
          setFiled(list);
          dispatch({ type: 'SET_SELECT_LIST', data: list });
          let arr = [];
          dataSource.map(i => {
          arr.push(i.name);
          ......@@ -323,7 +363,7 @@ const AddModal = props => {
          onChangeFeed(arr.toString(), 1);
          }, [dataSource]);
          const columns = defaultColumns.map(col => {
          const columns = columnsDrag.map(col => {
          if (!col.editable) {
          return col;
          }
          ......@@ -356,6 +396,7 @@ const AddModal = props => {
          setType1('');
          setType2('');
          setFiled1({});
          setCount(0);
          } else if (type === 'edit') {
          getParentList();
          ......@@ -383,8 +424,9 @@ const AddModal = props => {
          let str = data.feedbackName?.split(',');
          let arr = [];
          str?.forEach((i, index) => {
          arr.push({ key: index + 1, name: i });
          arr.push({ key: index, name: i });
          });
          setCount(arr.length);
          setDataSource(arr);
          setVisibleChecked(data.isSubmit === '是');
          setVisibleChecked1(data.autoAssign === '是');
          ......@@ -413,6 +455,7 @@ const AddModal = props => {
          setKeepTree([]);
          setKeepData([]);
          setKeep([]);
          setCount(0);
          }
          }, [visible]);
          ......@@ -480,53 +523,58 @@ const AddModal = props => {
          dataSource.forEach(i => {
          arr.push(i.name);
          });
          obj.feedbackName = arr.toString();
          if (type === 'add') {
          CM_XWBPlan_DataEditORAdd({
          ...obj,
          mappingFields: mappingFields && JSON.stringify(mappingFields),
          }).then(res => {
          if (res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: '添加成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          });
          }
          if (type === 'edit') {
          obj.isSubmit = visibleChecked === true ? '是' : '否';
          obj.autoAssign = visibleChecked1 === true ? '是' : '否';
          CM_XWBPlan_DataEditORAdd({
          ...obj,
          id: formObj.id,
          mappingFields: mappingFields && JSON.stringify(mappingFields),
          }).then(res => {
          if (res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: '编辑成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          });
          let newArr = arr.filter(i => i !== '');
          if (newArr.length === 0) {
          message.warning('请选择填报内容');
          } else {
          obj.feedbackName = newArr.toString();
          if (type === 'add') {
          CM_XWBPlan_DataEditORAdd({
          ...obj,
          mappingFields: mappingFields && JSON.stringify(mappingFields),
          }).then(res => {
          if (res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: '添加成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          });
          }
          if (type === 'edit') {
          obj.isSubmit = visibleChecked === true ? '是' : '否';
          obj.autoAssign = visibleChecked1 === true ? '是' : '否';
          CM_XWBPlan_DataEditORAdd({
          ...obj,
          id: formObj.id,
          mappingFields: mappingFields && JSON.stringify(mappingFields),
          }).then(res => {
          if (res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: '编辑成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          });
          }
          }
          }
          });
          ......@@ -675,6 +723,7 @@ const AddModal = props => {
          arr.push(item.accountName);
          });
          setFiled(arr);
          dispatch({ type: 'SET_SELECT_LIST', data: arr });
          setKeepFeed(arr);
          }
          });
          ......@@ -1058,8 +1107,6 @@ const AddModal = props => {
          },
          ];
          const timeChange = e => {};
          return (
          <Drawer
          title="模板配置"
          ......@@ -1075,7 +1122,12 @@ const AddModal = props => {
          </Space>
          }
          >
          <Form form={form} labelCol={{ span: 7 }} style={{ overflowY: 'scroll' }}>
          <Form
          form={form}
          labelCol={{ span: 7 }}
          style={{ overflowY: 'scroll' }}
          className={styles.dragTable}
          >
          <Row>
          <Col span={24}>
          <div className={styles.titleIcon}>
          ......@@ -1252,16 +1304,6 @@ const AddModal = props => {
          }
          name="feedbackName"
          labelCol={{ span: 5 }}
          rules={[
          {
          validator: (rule, value) => {
          if (dataSource.length === 0) {
          return Promise.reject('填报内容必填');
          }
          return Promise.resolve();
          },
          },
          ]}
          style={{ marginBottom: '10px' }}
          >
          {/* <Select
          ......@@ -1288,16 +1330,36 @@ const AddModal = props => {
          >
          请选择此设备巡检后的反馈表单，来源与类型维设备反馈的台账
          </div>
          <Table
          size="small"
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          id="box"
          />
          {stateType === 'drag'
          ? dataSource.length > 0 && (
          <Table
          pagination={false}
          dataSource={dataSource}
          columns={columns}
          rowKey={record => record.key}
          components={{
          body: {
          wrapper: DraggableContainer,
          row: DraggableBodyRow,
          },
          }}
          />
          )
          : dataSource.length > 0 && (
          <Table
          pagination={false}
          dataSource={dataSource}
          columns={columns}
          rowKey={record => record.key}
          rowClassName={() => 'editable-row'}
          components={{
          body: {
          row: EditableRow,
          cell: EditableCell,
          },
          }}
          />
          )}
          </Item>
          </Col>
          <Col span={24}>
          ......@@ -1313,65 +1375,12 @@ const AddModal = props => {
          添加设备反馈
          </Button>
          </Col>
          {/* <Col span={24}>
          <Item label="执行周期" name="docycle" labelCol={{ span: 5 }}>
          <TreeSelect
          showSearch
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          placeholder="请选择执行周期"
          allowClear
          treeDefaultExpandAll
          showCheckedStrategy
          >
          {characteristics1.map(i => mapTreeSelect(i))}
          </TreeSelect>
          </Item>
          </Col> */}
          <BaseTimeConfig
          keepTimeData={keepTimeData}
          ref={timeData}
          visible={visible}
          type={type}
          />
          {/* <Col span={24}>
          <Item label="周期模式" name="docycle1" labelCol={{ span: 5 }}>
          <Radio.Group value={timeData} onChange={timeChange}>
          <Radio value={1}>按小时</Radio>
          <Radio value={2}>按日</Radio>
          <Radio value={3}>按周</Radio>
          <Radio value={4}>按月</Radio>
          <Radio value={5}>按季度</Radio>
          <Radio value={6}>按年</Radio>
          </Radio.Group>
          </Item>
          </Col>
          <Col span={24}>
          <Item label="周期设置" labelCol={{ span: 5 }} style={{ marginBottom: '0' }}>
          <Row>
          <Col span={8}>
          <Item name="docycle2">
          <InputNumber min={1} defaultValue={1} style={{ width: '50px' }} />
          </Item>
          </Col>
          <Col span={3}>
          <div style={{ marginTop: '5px', marginLeft: '2px' }}>日</div>
          </Col>
          <Col span={8}>
          <Item name="docycle3">
          <InputNumber min={1} defaultValue={1} style={{ width: '50px' }} />
          </Item>
          </Col>
          <Col span={3}>
          <div style={{ marginTop: '5px', marginLeft: '2px' }}>次</div>
          </Col>
          </Row>
          </Item>
          </Col>
          <Col span={24}>
          <Item label="执行时间" name="docycle4" labelCol={{ span: 5 }}>
          <Input />
          </Item>
          </Col> */}
          <Col span={24}>
          <div className={styles.titleIcon}>
          <div className={styles.icon} />
          ......
          src/pages/bsmanager/patrolMaintenance/maintenance/components/BaseTimeConfig.jsx
          View file @ 98e3d6b5
          ......@@ -28,7 +28,7 @@ const BaseConfig = (props, ref) => {
          const [MonthType2, setMonthType2] = useState('首');
          const [MonthType3, setMonthType3] = useState('首');
          const [MonthDayType1, setMonthDayType1] = useState('1'); // 月选择-日期
          const [MonthDayType2, setMonthDayType2] = useState('31'); // 月选择-日期
          const [MonthDayType2, setMonthDayType2] = useState('28'); // 月选择-日期
          const [cities, setCities] = useState('周一');
          const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
          const [startLen, setstartLen] = useState(1); // 开始日期
          ......@@ -123,7 +123,7 @@ const BaseConfig = (props, ref) => {
          setMonthType1('首');
          setMonthType2('首');
          setMonthDayType1('1');
          setMonthDayType2('31');
          setMonthDayType2('28');
          }
          setValue(e.target.value);
          };
          ......@@ -214,7 +214,7 @@ const BaseConfig = (props, ref) => {
          value > MonthDayType1 && setMonthDayType1(value);
          }
          if (MonthType2 === '首') {
          value > MonthDayType2 && setMonthDayType2('31');
          value > MonthDayType2 && setMonthDayType2('28');
          }
          }}
          options={[
          ......@@ -271,7 +271,7 @@ const BaseConfig = (props, ref) => {
          setMonthDayType1(startLen);
          }
          if (MonthDayType2 < startLen) {
          setMonthDayType2('31');
          setMonthDayType2('28');
          }
          } else if (value === 2) {
          if (MonthType2 === '末') {
          ......@@ -281,7 +281,7 @@ const BaseConfig = (props, ref) => {
          setMonthDayType1(startLen);
          }
          if (MonthDayType2 < startLen) {
          setMonthDayType2('31');
          setMonthDayType2('28');
          }
          }
          }
          ......
          src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.jsx
          View file @ 98e3d6b5
          /* eslint-disable no-else-return */
          /* eslint-disable react-hooks/rules-of-hooks */
          /* eslint-disable camelcase */
          import React, { useState, useEffect, useMemo } from 'react';
          import React, { useState, createContext, useEffect, useMemo, useReducer } from 'react';
          import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag, message } from 'antd';
          import {
          CM_XWBPlan_DataList,
          ......@@ -23,8 +23,11 @@ import AddModalNew from './AddModalNew';
          import OptionEditModal from './OptionEditModal';
          import SortModal from './SortModal';
          import DragTable from '@/components/DragTable/DragTable';
          import { defaultState, reducer } from './store/reducer'; // 状态管理
          export const Context = createContext();
          const maintenance = () => {
          const [state, dispatch] = useReducer(reducer, defaultState);
          const [addVisible, setAddVisible] = useState(false);
          const [addVisibleNew, setAddVisibleNew] = useState(false);
          const [optionVisible, setOptionVisible] = useState(false);
          ......@@ -791,149 +794,151 @@ const maintenance = () => {
          };
          return (
          <div className={styles.maintenanceContainer}>
          <div className={styles.contentContainers}>
          <div style={{ height: '50px', backgroundColor: 'white' }}>
          <div className={styles.tabs}>
          <div
          className={activeName === 'template' ? styles.active : ''}
          onClick={() => setActiveName('template')}
          >
          维保模板
          </div>
          <div
          className={activeName === 'configuration' ? styles.active : ''}
          onClick={() => setActiveName('configuration')}
          >
          设备库配置
          </div>
          <div
          className={activeName === 'project' ? styles.active : ''}
          onClick={() => setActiveName('project')}
          >
          方案制定
          <Context.Provider value={{ state, dispatch }}>
          <div className={styles.maintenanceContainer}>
          <div className={styles.contentContainers}>
          <div style={{ height: '50px', backgroundColor: 'white' }}>
          <div className={styles.tabs}>
          <div
          className={activeName === 'template' ? styles.active : ''}
          onClick={() => setActiveName('template')}
          >
          维保模板
          </div>
          <div
          className={activeName === 'configuration' ? styles.active : ''}
          onClick={() => setActiveName('configuration')}
          >
          设备库配置
          </div>
          <div
          className={activeName === 'project' ? styles.active : ''}
          onClick={() => setActiveName('project')}
          >
          方案制定
          </div>
          </div>
          </div>
          <span
          style={{
          float: 'right',
          marginRight: '10px',
          display: activeName === 'template' || activeName === 'project' ? 'block' : 'none',
          }}
          >
          <Button
          icon={<PlusOutlined className={styles.icon} />}
          onClick={add}
          type="primary"
          <span
          style={{
          verticalAlign: 'middle',
          marginTop: '10px',
          marginRight: '20px',
          float: 'right',
          marginRight: '10px',
          display: activeName === 'template' || activeName === 'project' ? 'block' : 'none',
          }}
          >
          <span style={{ marginTop: '-2px' }}>新增</span>
          </Button>
          {activeName === 'template' && (
          <Button
          icon={<OrderedListOutlined className={styles.icon} />}
          onClick={sort}
          icon={<PlusOutlined className={styles.icon} />}
          onClick={add}
          type="primary"
          style={{
          verticalAlign: 'middle',
          marginTop: '10px',
          marginRight: '20px',
          }}
          >
          <span style={{ marginTop: '-2px' }}>调序</span>
          <span style={{ marginTop: '-2px' }}>新增</span>
          </Button>
          )}
          </span>
          </div>
          {activeName === 'project' ? (
          <DragTable
          rowClassName={record => setRowClassName(record.id)}
          size="small"
          ItemTypes="maintenance"
          rowKey={record => record.id}
          bordered
          loading={treeLoading}
          dragCallBack={dragCallBack}
          editEventType={editEventType}
          setSelectColor={setSelectColor}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
          pagination={{
          showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          pageSizeOptions: [10, 20, 50, 100],
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
          }}
          {activeName === 'template' && (
          <Button
          icon={<OrderedListOutlined className={styles.icon} />}
          onClick={sort}
          style={{
          verticalAlign: 'middle',
          marginTop: '10px',
          }}
          >
          <span style={{ marginTop: '-2px' }}>调序</span>
          </Button>
          )}
          </span>
          </div>
          {activeName === 'project' ? (
          <DragTable
          rowClassName={record => setRowClassName(record.id)}
          size="small"
          ItemTypes="maintenance"
          rowKey={record => record.id}
          bordered
          loading={treeLoading}
          dragCallBack={dragCallBack}
          editEventType={editEventType}
          setSelectColor={setSelectColor}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
          pagination={{
          showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          pageSizeOptions: [10, 20, 50, 100],
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
          }}
          />
          ) : (
          <Table
          // rowClassName={setRowClassName}
          size="small"
          rowKey="ID"
          bordered
          loading={treeLoading}
          onRow={record => ({
          onDoubleClick: event => {
          event.stopPropagation();
          if (activeName === 'template') {
          editEventType(record);
          } else {
          editOption(record);
          }
          }, // 双击
          })}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
          pagination={{
          showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          pageSizeOptions: [10, 20, 50, 100],
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
          }}
          />
          )}
          {/* 添加事件 */}
          <AddModal
          visible={addVisible}
          type={type}
          onClose={() => setAddVisible(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          keepTableData={keepTableData}
          placement="right"
          />
          ) : (
          <Table
          // rowClassName={setRowClassName}
          size="small"
          rowKey="ID"
          bordered
          loading={treeLoading}
          onRow={record => ({
          onDoubleClick: event => {
          event.stopPropagation();
          if (activeName === 'template') {
          editEventType(record);
          } else {
          editOption(record);
          }
          }, // 双击
          })}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
          pagination={{
          showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          pageSizeOptions: [10, 20, 50, 100],
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
          }}
          <AddModalNew
          visible={addVisibleNew}
          type={type}
          onClose={() => setAddVisibleNew(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          keepTableData={keepTableData}
          placement="right"
          />
          )}
          {/* 添加事件 */}
          <AddModal
          visible={addVisible}
          type={type}
          onClose={() => setAddVisible(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          keepTableData={keepTableData}
          placement="right"
          />
          <AddModalNew
          visible={addVisibleNew}
          type={type}
          onClose={() => setAddVisibleNew(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          keepTableData={keepTableData}
          placement="right"
          />
          <OptionEditModal
          visible={optionVisible}
          onClose={() => setOptionVisible(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          placement="right"
          />
          <SortModal
          title="调整顺序"
          visible={sortVisible}
          sortData={tableData}
          onCancel={() => setSortVisible(false)}
          callBackSubmit={onOK}
          />
          <OptionEditModal
          visible={optionVisible}
          onClose={() => setOptionVisible(false)}
          callBackSubmit={onSubmit}
          formObj={formObj}
          placement="right"
          />
          <SortModal
          title="调整顺序"
          visible={sortVisible}
          sortData={tableData}
          onCancel={() => setSortVisible(false)}
          callBackSubmit={onOK}
          />
          </div>
          </div>
          </div>
          </Context.Provider>
          );
          };
          ......
          src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.less
          View file @ 98e3d6b5
          ......@@ -206,23 +206,57 @@
          display: flex;
          align-items: center;
          }
          :global {
          .editable-cell {
          position: relative;
          }
          .dragTable {
          :global {
          .editable-cell {
          position: relative;
          }
          .editable-cell-value-wrap {
          padding: 5px 12px;
          cursor: pointer;
          }
          .editable-cell-value-wrap {
          padding: 5px 12px;
          cursor: pointer;
          .editable-row:hover .editable-cell-value-wrap {
          padding: 4px 11px;
          border: 1px solid #d9d9d9;
          height: 32px;
          border-radius: 2px;
          }
          [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
          border: 1px solid #434343;
          }
          .ant-table-tbody > tr > td {
          padding: 8px 16px;
          height: 50px;
          }
          .row-dragging {
          background: #fafafa;
          border: 1px solid #ccc;
          }
          .row-dragging td {
          padding: 16px;
          }
          .row-dragging .drag-visible {
          visibility: visible;
          }
          }
          }
          // 拖拽组件拖拽行样式会丢失写全局样式解决
          :global {
          .row-dragging {
          background: #fafafa;
          border: 1px solid #ccc;
          }
          .editable-row:hover .editable-cell-value-wrap {
          padding: 4px 11px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          .row-dragging td {
          padding: 16px;
          }
          [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
          border: 1px solid #434343;
          .row-dragging .drag-visible {
          visibility: visible;
          }
          }
          src/pages/bsmanager/patrolMaintenance/maintenance/store/reducer.js 0 → 100644
          View file @ 98e3d6b5
          /* eslint-disable no-unused-expressions */
          export const defaultState = {
          selectList: [],
          };
          export const reducer = (state, action) => {
          switch (action.type) {
          case 'SET_SELECT_LIST':
          return { ...state, selectList: action.data };
          default:
          defaultState;
          }
          };
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment