/* eslint-disable no-unused-expressions */ /* eslint-disable no-lonely-if */ /* eslint-disable no-else-return */ /* eslint-disable prefer-promise-reject-errors */ /* eslint-disable camelcase */ import React, { useState, useEffect, useRef } from 'react'; import { Form, Input, Select, Tooltip, Button, notification, Drawer, Space, Modal, Row, Col, Switch, Checkbox, } from 'antd'; import { PlusOutlined, InfoCircleOutlined, EyeOutlined } from '@ant-design/icons'; import { GetCM_Ledger_LoadLedgerTable, GetCMLedger_QueryLedgers, Ledger_ReloadLedgerFields, Ledger_QueryLedger, Ledger_SaveLedger, Ledger_ParentLedgers, } from '@/services/standingBook/api'; import { Account } from 'panda-xform'; import SelectFiled from './SelectFiled'; import EditTable from './EditTable'; import styles from './BookConfigNew.less'; const isObject = (obj) => typeof obj === 'object' const pagingOptions = [ { label: '20条/页', value: 20 }, { label: '50条/页', value: 50 }, { label: '100条/页', value: 100 }, { label: '200条/页', value: 200 }, { label: '500条/页', value: 500 }, ] const widgetData = { TextInput: { name: '文本', type: '文本控件', }, TextArea: { name: '多行文本', type: '文本控件', }, NumberInput: { name: '数值', type: '文本控件', }, RichText: { name: '富文本', type: '文本控件', }, Coding: { name: '编码', type: '文本控件', }, SearchLocation: { name: '地址位置', type: '文本控件', }, ComboBox: { name: '下拉框', type: '选择器控件', }, RadioButton: { name: '单选框', type: '选择器控件', }, CheckBox: { name: '复选框', type: '选择器控件', }, SwitchSelector: { name: '开关按钮', type: '选择器控件', }, RelevanceSelect: { name: '关联选择', type: '选择器控件', }, CascadeSelector: { name: '联级选择', type: '选择器控件', }, PersonSelector: { name: '人员选择', type: '业务控件', }, DeptSelector: { name: '部门选择', type: '业务控件', }, AccountSelector: { name: '台账选择', type: '业务控件', }, DateTime: { name: '日期选择', type: '时间控件', }, Time: { name: '时间选择', type: '时间控件', }, FileUpload: { name: '附件', type: '附件控件', }, Coordinate: { name: '地图坐标', type: 'GIS控件', }, DrawPath: { name: '路径控件', type: 'GIS控件', }, DrawArea: { name: '区域控件', type: 'GIS控件', }, Device: { name: '设备选择', type: 'GIS控件', }, RelationForm: { name: '关联表单', type: '高级控件', }, AutoCalculate: { name: '自动计算', type: '高级控件', }, }; const getFieldInfo = (formJson) => { let obj = {}; let parent = formJson?.properties; if (isObject(parent)) { for (let v in parent) { let child = parent[v]?.properties; if (isObject(child)) { for (let s in child) { obj[s] = { ...child[s], ...widgetData[(child?.[s]?.widget)] }; } } } } return obj; }; const { Option } = Select; const { TextArea } = Input; const BookConfigNew = 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 [tbData, setTbData] = useState([]); // 当前表所有的字段 const [tableShow, setTableShow] = useState(false); // 当前表所有的字段 const [allData, setAllData] = useState([]); // 当前表所有的字段 const [formJosn, setFormJosn] = useState([]); // 形态解析 const [accountVisile, setAccountVisile] = useState(false); // 表单预览弹窗 const [submitObj, setSubmitObj] = useState({}); // 表单预览弹窗 const [modalLoading, setModalLoading] = useState(false); // 提交数据 const [viewModalLoading, setViewModalLoading] = useState(false); // 表单预览弹窗 const [parentData, setParentData] = useState([]); // 父级台账下拉框数据 const [currentId, setCurrentId] = useState(''); // 新增成功后保存的ID const [EnableImportExport, setEnableImportExport] = useState(false) //是否导入导出 const [EnableSiteFilter, setEnableSiteFilter] = useState(false) //是否站点过滤 const [defaultOrder, setDefaultOrder] = useState({}) const [form] = Form.useForm(); const tableRef = useRef(null); const accountRef = useRef(null); const desabledArr = [ 'FileUpload', 'Coordinate', 'DrawPath', 'DrawArea', 'Device', 'RelationForm', ]; const layout = { layout: 'horizontal', labelCol: { span: 5, }, wrapperCol: { span: 19, }, }; const formItemLayout = { labelCol: { span: 5, }, wrapperCol: { span: 19, }, }; const itemLayout = { labelCol: { span: 10, }, wrapperCol: { span: 14, }, }; const switchLayout = { labelCol: { span: 10, }, wrapperCol: { span: 14, }, }; const { Item } = Form; // 提交 const onSubmit = () => { setModalLoading(true); form.validateFields().then(validate => { // return; if (validate) { let aa = form.getFieldsValue().Type; if (aa == '全部') { notification.warning({ message: '提示', duration: 3, description: '分组名称不能为全部', }); } else { let datas = JSON.parse(JSON.stringify(validate)); for (let key in datas) { if (datas[key] === false) { datas[key] = 0; } else if (datas[key] === true) { datas[key] = 1; } } let obj = type === 'add' ? { ...datas, Order: maxLength } : { ...datas, Order, ID: formObj.ID }; obj.LedgerFieids = tableRef.current.onFinish(); obj.DefaultSortFields = defaultOrder.DefaultSortFields || '' obj.SortOrder = defaultOrder.SortOrder || '' obj.LedgerFieids.forEach(i => { if (i.ColumnCalculationRule === '无') { i.ColumnCalculationRule = 0; } else if (i.ColumnCalculationRule === '合计') { i.ColumnCalculationRule = 1; } else if (i.ColumnCalculationRule === '平均') { i.ColumnCalculationRule = 2; } else if (i.ColumnCalculationRule === '计数') { i.ColumnCalculationRule = 3; } }); currentId ? (obj.ID = currentId) : ''; setSubmitObj(obj); console.log('obj', obj) Ledger_SaveLedger(obj) .then(res => { setModalLoading(false); if (res.code === 0) { // form.resetFields(); // callBackSubmit(); notification.success({ message: '提示', duration: 3, description: type === 'add' ? (currentId ? '编辑成功' : '新增成功') : '编辑成功', }); if (type === 'add') { setCurrentId(res.data); } setAccountVisile(true); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(() => { notification.error({ message: '提示', duration: 3, description: '网络异常请稍后再试', }); }); } } }); }; // 预览提交 const viewSubmit = () => { setViewModalLoading(true); let arr = accountRef.current.getTableColumns(); let viewArr = tableRef.current.onFinish(); arr.map(item => { viewArr.map(ele => { if (item.dataIndex === ele.FieldName) { ele.ColumnWidth = item.width; } if (ele.ColumnCalculationRule === '无') { ele.ColumnCalculationRule = 0; } else if (ele.ColumnCalculationRule === '合计') { ele.ColumnCalculationRule = 1; } else if (ele.ColumnCalculationRule === '平均') { ele.ColumnCalculationRule = 2; } else if (ele.ColumnCalculationRule === '计数') { ele.ColumnCalculationRule = 3; } }); }); let obj = { ...submitObj, LedgerFieids: viewArr }; currentId ? (obj.ID = currentId) : ''; Ledger_SaveLedger(obj) .then(res => { setViewModalLoading(false); if (res.code === 0) { setAccountVisile(false); 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(() => { if (visible) { // 获取台账表 getTableData(); if (type === 'edit') { Ledger_QueryLedger({ ledgerId: formObj.ID }).then(res => { if (res.code === 0) { form.setFieldsValue({ ...res.data }); setDefaultOrder({ DefaultSortFields: res.data.DefaultSortFields, SortOrder: res.data.SortOrder }) setEnableImportExport(res.data.EnableImportExport) setEnableSiteFilter(res.data.EnableSiteFilter) setOrder(res.data.Order); let editArr = res.data.LedgerFieids; changTable(res.data.TableName, editArr); } }); } else { setEnableImportExport(true) form.setFieldsValue({ EnableTimeFilter: true, EnableQuickSearch: true, EnableBatchOperation: true, EnableImportExport: true, EnableSiteIDFilter: false, Type: (!pickItem1 || pickItem1 == '全部') ? data[0] : pickItem1, PageSize: 20 }) setEnableImportExport(true) setEnableSiteFilter(false) } getParentData({ ledgerId: type === 'edit' ? formObj.ID : '0' }); } else { setCurrentId(''); setFiled({}); form.resetFields(); form.setFieldsValue({ AccountType: '台账' }); setTbData([]); setAllData([]); } }, [visible]); // 获取父台账表 const getParentData = params => { Ledger_ParentLedgers(params).then(res => { if (res.code === 0) { setParentData(res.data); } else { setParentData([]); } }); }; // 获取台账表 const getTableData = () => { GetCM_Ledger_LoadLedgerTable().then(res => { if (res.code === 0) { setStandingTable(res.data.root); if (type !== 'edit') { tableRef.current.setTableData(false, []); } } }); }; const isObject = obj => typeof obj === 'object'; // 切换表后数据处理为对应格式 const changTable = (value, editArr = []) => { Ledger_ReloadLedgerFields({ tableName: value }).then(res => { if (res.data.LedgerFieids) { let fileMap = new Map(); let initList = []; // 处理为子组件需要的格式 res.data.LedgerFieids.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]); } }); const FormJson = getFieldInfo(JSON.parse(res.data.FormJson)); let arr = res.data.LedgerFieids; arr.forEach(item => { item.Shape = FormJson[item.FieldName]?.name || item.Shape; item.widget = FormJson[item.FieldName]?.widget || 'TextInput'; if (desabledArr.includes(item.widget)) { item.IsSort = 0; item.AccurateSearch = 0; item.LikeSearch = 0; } }); if (editArr.length) { editArr.forEach(item => { item.Shape = FormJson[item.FieldName] ? FormJson[item.FieldName].name : item.Shape; item.widget = FormJson[item.FieldName]?.widget || 'TextInput'; item.type = FormJson[item.FieldName]?.type || '文本控件'; if (desabledArr.includes(item.widget)) { item.IsSort = 0; item.AccurateSearch = 0; item.LikeSearch = 0; } if (item.ColumnCalculationRule === 0) { item.ColumnCalculationRule = '无'; } else if (item.ColumnCalculationRule === 1) { item.ColumnCalculationRule = '合计'; } else if (item.ColumnCalculationRule === 2) { item.ColumnCalculationRule = '平均'; } else if (item.ColumnCalculationRule === 3) { item.ColumnCalculationRule = '计数'; } }); tableRef.current.setTableData(false, editArr); } else { // Fields 切换表后清空台账字段和表数据 form.setFieldsValue({ Fields: [] }); tableRef.current.setTableData(false, []); } setFormJosn(FormJson); setAllData(arr); // FormJson // 给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; let allArr = prop.str.split(','); let showArr = prop.str.split(','); let editArr = tableRef.current.onFinish().map(item => { return item.FieldName; }); showArr = showArr.filter(item => { return !editArr.includes(item); }); let tableArr = tableRef.current.onFinish().concat( allData.filter(item => { return showArr.includes(item.FieldName); }), ); let arr = []; allArr.map(item => { tableArr.map(ele => { if (item === ele.FieldName) { if (ele.ColumnCalculationRule === 0) { ele.ColumnCalculationRule = '无'; } else if (ele.ColumnCalculationRule === 1) { ele.ColumnCalculationRule = '合计'; } else if (ele.ColumnCalculationRule === 2) { ele.ColumnCalculationRule = '平均'; } else if (ele.ColumnCalculationRule === 3) { ele.ColumnCalculationRule = '计数'; } arr.push(ele); } }); }); tableRef.current.setTableData( false, // tableArr.filter(item => { // return allArr.includes(item.FieldName); // }), arr, ); form.setFieldsValue(obj); saveOutFieldsLength(prop.pickItem, allFileds); }; // 处理外部字段 const dealExternal = (fileds, list) => { let isExternal; let externalLength = 0; if (form.getFieldValue(fileds).length) { form .getFieldValue(fileds) .split(',') .forEach(item => { isExternal = list.some(val => val === item); if (!isExternal && item !== '') { // eslint-disable-next-line no-plusplus externalLength++; } }); } return externalLength; }; // 勾选字段 const pickFiled = fileds => { const { TableName, Fields } = form.getFieldsValue(true) if (!TableName) { notification.error({ message: '提示', duration: 3, description: '请选择台账表' }); return; } // 添加外部字段 let fil = { ...filed }; fil['外部字段'] = []; let isExternal; let list = Fields.length ? Fields.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 }); } }; // 表单值监听 const handleValuesChange = (changedValues, allValues) => { if ('TableName' in changedValues) { let AccountType = standingTable.filter(item => { return item.value === changedValues.TableName; })[0].text; form.setFieldsValue({ AccountType }); } if ('EnableImportExport' in changedValues) { setEnableImportExport(changedValues['EnableImportExport']) } if ('EnableSiteFilter' in changedValues) { setEnableSiteFilter(changedValues['EnableSiteFilter']) if (!changedValues['EnableSiteFilter']) { form.setFieldsValue({ EnableSiteIDFilter: false }) } } }; return ( <Modal title={ <div className={styles.modalTitle}> <div>{type === 'add' ? '台账配置' : '台账编辑'}</div> </div> } visible={visible} destroyOnClose onOk={onSubmit} onCancel={onCancel} centered bodyStyle={{ width: '100%', height: '800px', overflowY: 'scorll' }} width="1600px" getContainer={false} confirmLoading={modalLoading} okText="保存并查看" > <div className={styles.top}> <Form form={form} {...layout} onValuesChange={handleValuesChange}> <Row> <Col span={8}> <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> </Col> <Col span={8}> <Item label="父级台账" name="PreName" > <Select showSearch placeholder="请选择父级台账" allowClear> {parentData.map((item, index) => ( <Option value={item.name} key={index}> {item.name} </Option> ))} </Select> </Item> </Col> <Col span={4}> <Item label="台账分组" name="Type" rules={[{ required: true, message: '请选择分组' }]} {...itemLayout} > <Select showSearch onSearch={onSearch} placeholder="请输入分组名称" allowClear> {data.map((item, index) => ( <Option value={item} key={index}> {item} </Option> ))} </Select> </Item> </Col> <Col span={4}> <Item label="台账类型" name="AccountType" rules={[{ required: true, message: '请选择类型' }]} {...itemLayout} > <Select placeholder="请选择台账类型" disabled> <Option value="台账">台账</Option> <Option value="反馈">反馈</Option> <Option value="设备">设备</Option> </Select> </Item> </Col> <Col span={8}> <Item label="台账主表" name="TableName" rules={[{ required: true, message: '请选择台账表' }]} > <Select placeholder="" optionFilterProp="children" onChange={changTable} showSearch disabled={type !== 'add'} > {standingTable.map((item, index) => ( <Option key={index} value={item.value}> {item.value} </Option> ))} </Select> </Item> </Col> <Col span={8}> <Item {...formItemLayout} label={ <> {form.getFieldValue('outListFileds') > 0 ? ( <Tooltip title={`外部字段${form.getFieldValue('outListFileds')}个`}> <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} /> </Tooltip> ) : ( '' )} <span>台账字段</span> </> } name="Fields" rules={[{ required: true, message: '请选择台账字段' }]} > <div style={{ display: 'flex' }}> <Form.Item name="Fields" style={{ marginBottom: 0, width: '100%' }}> <TextArea placeholder="前端详情查看字段" allowClear style={{ height: '32px' }} /> </Form.Item> <Button type="dashed" style={{ width: '50px', marginLeft: '10px' }} icon={<PlusOutlined />} onClick={() => { pickFiled('Fields'); }} /> </div> </Item> </Col> <Col span={8}> <Item label="接口配置" name="Interface"> <Input placeholder="服务项目dll库" allowClear /> </Item> </Col> </Row> <Row style={{ marginLeft: '40px' }}> <Col span={2}> <Form.Item {...switchLayout} labelCol={15} valuePropName="checked" label="导入导出" name="EnableImportExport" > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </Col> <Col span={6} style={{ position: 'relative', left: '-28px' }}> <Form.Item {...switchLayout} label="导出模板名称" name="ExportTemplateName" > <Input disabled={!EnableImportExport} placeholder='请输入导出模板名称' /> </Form.Item> </Col> <Col span={4}> <Form.Item {...switchLayout} label="分页默认数量" name="PageSize" > <Select style={{ width: 100 }} options={pagingOptions} /> </Form.Item> </Col> <Col span={3}> <Form.Item {...switchLayout} valuePropName="checked" label="时间筛选" name="EnableTimeFilter" > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </Col> <Col span={3}> <Form.Item {...switchLayout} valuePropName="checked" label="批量操作" name="EnableBatchOperation" > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </Col> <Col span={3}> <Form.Item {...switchLayout} valuePropName="checked" label="站点过滤" name="EnableSiteFilter" > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </Col> <Col span={3} style={{ display: EnableSiteFilter ? 'block' : 'none' }}> <Form.Item {...switchLayout} valuePropName="checked" label="" name="EnableSiteIDFilter" > <Checkbox value={true} style={{ lineHeight: '32px' }} > 站点ID过滤 </Checkbox> </Form.Item> </Col> {/* <Col span={4}> <Form.Item {...switchLayout} valuePropName="checked" label="打印功能" name="EnablePrint" > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </Col> */} </Row> <Row> <Col span={8}> <Form.Item label="SQL过滤" name="SqlFilter" > <Input.TextArea placeholder="示例:部门 = 'XX部门'" /> </Form.Item> </Col> </Row> </Form> <SelectFiled visible={isVisible} onCancel={() => { setIsVisible(false); setCheckedList([]); }} defaultOrder={defaultOrder} setDefaultOrder={setDefaultOrder} callBackSubmit={onOK} newCheckedList={checkedList} filed={filed} pickItem={pickItem} formObj={formObj} /> </div> <div className={styles.bottom}> <EditTable visible={tableShow} ref={tableRef} tbData={tbData} formObj={formObj} /> </div> <Modal title="台账预览" visible={accountVisile} destroyOnClose onOk={viewSubmit} onCancel={() => { setAccountVisile(false); callBackSubmit(); }} centered bodyStyle={{ width: '100%', height: '800px', overflowY: 'scorll' }} width="1600px" confirmLoading={viewModalLoading} > <Account ref={accountRef} accountName={form.getFieldValue('Name')} notUse={'other,edit,add,del'} /> </Modal> </Modal> ); }; export default BookConfigNew;