|
@@ -0,0 +1,350 @@
|
|
|
|
+/*
|
|
|
|
+ * @Author: code4eat awesomedema@gmail.com
|
|
|
|
+ * @Date: 2023-03-03 11:30:33
|
|
|
|
+ * @LastEditors: code4eat awesomedema@gmail.com
|
|
|
|
+ * @LastEditTime: 2023-04-11 09:16:54
|
|
|
|
+ * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicTypeMana/index.tsx
|
|
|
|
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
|
+ */
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+import BMSPagecontainer from '@/components/BMSPageContainer';
|
|
|
|
+import { BMSTable } from '@/components/BMSTable';
|
|
|
|
+import { createFromIconfontCN } from '@ant-design/icons';
|
|
|
|
+
|
|
|
|
+import { ActionType, ProFormRadio } from '@ant-design/pro-components';
|
|
|
|
+import { ModalForm, ProFormDependency, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
|
|
|
|
+import { ProColumns } from '@ant-design/pro-table';
|
|
|
|
+import { Input, message, Popconfirm } from 'antd';
|
|
|
|
+import { useEffect, useRef, useState } from 'react';
|
|
|
|
+
|
|
|
|
+import { addData, delData, editData, getManaIndic, getReportListTableData, getReportListType } from './service';
|
|
|
|
+
|
|
|
|
+import './style.less';
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const IconFont = createFromIconfontCN({
|
|
|
|
+ scriptUrl: '//at.alicdn.com/t/c/font_1927152_4nm5kxbv4m3.js',
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+export default function ReportNavSet() {
|
|
|
|
+
|
|
|
|
+ const [tableDataFilterParams, set_tableDataFilterParams] = useState<any | undefined>();
|
|
|
|
+ const [tableDataSearchKeywords, set_tableDataSearchKeywords] = useState<string>('');
|
|
|
|
+ const tableRef = useRef<ActionType>();
|
|
|
|
+
|
|
|
|
+ const columns: ProColumns[] = [
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '列名称',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '列标题',
|
|
|
|
+ dataIndex: 'headerText',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '列类型',
|
|
|
|
+ dataIndex: 'columnTypeName',
|
|
|
|
+ // render:(_:any)=>_ == 1?'指标':'自定义SQL'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '取数类型',
|
|
|
|
+ dataIndex: 'dataSource',
|
|
|
|
+ render: (_: any) => _ == 1 ? '指标' : '自定义SQL'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '取数来源',
|
|
|
|
+ width: 300,
|
|
|
|
+ ellipsis: true,
|
|
|
|
+ dataIndex: 'sql',
|
|
|
|
+ render: (_: any, record: any) => {
|
|
|
|
+
|
|
|
|
+ if (record.sql) return record.sql;
|
|
|
|
+ if (record.indicatorCodeName) return record.indicatorCodeName
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ key: 'option',
|
|
|
|
+ width: 120,
|
|
|
|
+ valueType: 'option',
|
|
|
|
+ render: (_: any, record: any) => {
|
|
|
|
+ return [
|
|
|
|
+ <UpDataActBtn key={'act'} record={record} type='EDIT' />,
|
|
|
|
+ <Popconfirm
|
|
|
|
+ title="是否确认删除?"
|
|
|
|
+ key="del"
|
|
|
|
+ onConfirm={() => delTableData(record)}
|
|
|
|
+ >
|
|
|
|
+ <a>删除</a>
|
|
|
|
+ </Popconfirm>
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ ]
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ const getTableData = async (params: any) => {
|
|
|
|
+ const resp = await getReportListTableData(params);
|
|
|
|
+ if (resp) {
|
|
|
|
+ return {
|
|
|
|
+ data: resp.list,
|
|
|
|
+ success: true,
|
|
|
|
+ total: resp.totalCount,
|
|
|
|
+ pageSize: resp.pageSize,
|
|
|
|
+ totalPage: resp.totalPage,
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return []
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const delTableData = async (record: any) => {
|
|
|
|
+ const resp = await delData(record.id);
|
|
|
|
+ if (resp) {
|
|
|
|
+ message.success('操作成功!');
|
|
|
|
+ tableRef.current?.reload();
|
|
|
|
+ // message.success('操作成功!');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const updateTable = async (formVal: any, type: 'EDIT' | "ADD") => {
|
|
|
|
+
|
|
|
|
+ if (type == 'ADD') {
|
|
|
|
+ if (formVal.dataSource == 1) {
|
|
|
|
+ //
|
|
|
|
+ let result = {
|
|
|
|
+ name: formVal.name,
|
|
|
|
+ headerText: formVal.headerText,
|
|
|
|
+ dataSource: formVal.dataSource,
|
|
|
|
+ columnType: formVal.columnType,
|
|
|
|
+ sql:'',
|
|
|
|
+ indicatorCode: formVal.indicatorCode.key,
|
|
|
|
+ indicatorCodeName: formVal.indicatorCode.label,
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const resp = await addData({ ...result });
|
|
|
|
+ if (resp) {
|
|
|
|
+ tableRef.current?.reload();
|
|
|
|
+ message.success('操作成功!');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ if(formVal.dataSource == 2){
|
|
|
|
+ //sql
|
|
|
|
+ let result = {
|
|
|
|
+ name: formVal.name,
|
|
|
|
+ headerText: formVal.headerText,
|
|
|
|
+ dataSource: formVal.dataSource,
|
|
|
|
+ columnType: formVal.columnType,
|
|
|
|
+ sql: formVal.sql,
|
|
|
|
+ indicatorCode:'',
|
|
|
|
+ indicatorCodeName:''
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const resp = await addData({ ...result });
|
|
|
|
+ if (resp) {
|
|
|
|
+ tableRef.current?.reload();
|
|
|
|
+ message.success('操作成功!');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ if (type == 'EDIT') {
|
|
|
|
+
|
|
|
|
+ if (formVal.dataSource == 1){
|
|
|
|
+ //指标
|
|
|
|
+ const result = {
|
|
|
|
+ id: formVal.id,
|
|
|
|
+ name: formVal.name,
|
|
|
|
+ headerText: formVal.headerText,
|
|
|
|
+ dataSource: formVal.dataSource,
|
|
|
|
+ columnType: formVal.columnType,
|
|
|
|
+ sql:'',
|
|
|
|
+ indicatorCode: formVal.indicatorCode.key,
|
|
|
|
+ indicatorCodeName: formVal.indicatorCode.label,
|
|
|
|
+ }
|
|
|
|
+ const resp = await editData({ ...result });
|
|
|
|
+ if (resp) {
|
|
|
|
+ tableRef.current?.reload();
|
|
|
|
+ message.success('操作成功!');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if(formVal.dataSource == 2){
|
|
|
|
+ //sql
|
|
|
|
+ const result = {
|
|
|
|
+ id: formVal.id,
|
|
|
|
+ name: formVal.name,
|
|
|
|
+ headerText: formVal.headerText,
|
|
|
|
+ dataSource: formVal.dataSource,
|
|
|
|
+ columnType: formVal.columnType,
|
|
|
|
+ sql: formVal.sql,
|
|
|
|
+ indicatorCode:'',
|
|
|
|
+ indicatorCodeName:''
|
|
|
|
+ }
|
|
|
|
+ const resp = await editData({ ...result });
|
|
|
|
+ if (resp) {
|
|
|
|
+ tableRef.current?.reload();
|
|
|
|
+ message.success('操作成功!');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ return true;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const formRef = useRef();
|
|
|
|
+
|
|
|
|
+ const UpDataActBtn = ({ record, type }: { record: any, type: 'EDIT' | 'ADD' }) => {
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <ModalForm
|
|
|
|
+ title={`${type == 'EDIT' ? '编辑' : '新增'}报表列`}
|
|
|
|
+ width={352}
|
|
|
|
+ formRef={formRef}
|
|
|
|
+ initialValues={type == 'EDIT' ? { ...record, indicatorCode: { label: record.indicatorCodeName, value: record.indicatorCode } } : {}}
|
|
|
|
+ trigger={
|
|
|
|
+ type == 'EDIT' ? <a key="edit" >编辑</a> : <span className='add'>新增</span>
|
|
|
|
+ }
|
|
|
|
+ onFinish={(val) => {
|
|
|
|
+ console.log({ val });
|
|
|
|
+ return updateTable(type == 'EDIT' ? { ...record, ...val, sql: val.sql ? val.sql : '', } : { ...val }, type);
|
|
|
|
+ }}
|
|
|
|
+ colProps={{ span: 24 }}
|
|
|
|
+ grid
|
|
|
|
+ >
|
|
|
|
+
|
|
|
|
+ <ProFormText
|
|
|
|
+ name="name"
|
|
|
|
+ label="列名称:"
|
|
|
|
+ placeholder="请输入"
|
|
|
|
+ rules={[{ required: true, message: '列名称不能为空!' }]}
|
|
|
|
+ />
|
|
|
|
+ <ProFormText
|
|
|
|
+ name="headerText"
|
|
|
|
+ label="列标题:"
|
|
|
|
+ placeholder="请输入"
|
|
|
|
+ rules={[{ required: true, message: '列标题不能为空!' }]}
|
|
|
|
+ />
|
|
|
|
+ <ProFormSelect
|
|
|
|
+ name="columnType"
|
|
|
|
+ label="列类型:"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ request={async () => {
|
|
|
|
+ const resp = await getReportListType();
|
|
|
|
+ if (resp) {
|
|
|
|
+ return resp.list.map((a: any) => ({ label: a.name, value: a.code }))
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
|
|
+ rules={[{ required: true, message: '列类型不能为空!' }]}
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <ProFormSelect
|
|
|
|
+ name="dataSource"
|
|
|
|
+ label="取数类型:"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ options={[
|
|
|
|
+ { label: '指标', value: 1 },
|
|
|
|
+ { label: '自定义SQL', value: 2 }
|
|
|
|
+ ]}
|
|
|
|
+ rules={[{ required: true, message: '取数类型不能为空!' }]}
|
|
|
|
+ />
|
|
|
|
+ <ProFormDependency name={['dataSource']}>
|
|
|
|
+ {
|
|
|
|
+ ({ dataSource }) => dataSource == 1 && (
|
|
|
|
+ <ProFormSelect
|
|
|
|
+ name="indicatorCode"
|
|
|
|
+ label="取数来源:"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ fieldProps={{
|
|
|
|
+ labelInValue: true
|
|
|
|
+ }}
|
|
|
|
+ request={async () => {
|
|
|
|
+ const resp = await getManaIndic();
|
|
|
|
+ if (resp) {
|
|
|
|
+ return resp.map((a: any) => ({ label: a.name, value: a.code }))
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
|
|
+ rules={[{ required: true, message: '数据来源不能为空!' }]}
|
|
|
|
+ />
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ </ProFormDependency>
|
|
|
|
+ <ProFormDependency name={['dataSource']}>
|
|
|
|
+ {
|
|
|
|
+ ({ dataSource }) => dataSource == 2 && (
|
|
|
|
+ <ProFormTextArea name={'sql'} label='SQL:' rules={[{ required: true, message: 'SQL不能为空!' }]} />
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ </ProFormDependency>
|
|
|
|
+
|
|
|
|
+ </ModalForm>
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const tableDataSearchHandle = (paramName: string) => {
|
|
|
|
+
|
|
|
|
+ set_tableDataFilterParams({
|
|
|
|
+ ...tableDataFilterParams,
|
|
|
|
+ [`${paramName}`]: tableDataSearchKeywords
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+
|
|
|
|
+ }, [])
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <BMSPagecontainer className='ReportNavSet' title={false}>
|
|
|
|
+ <div className='toolBar'>
|
|
|
|
+ <div className='filter'>
|
|
|
|
+ <div className='filterItem'>
|
|
|
|
+ <span className='label' style={{ whiteSpace: 'nowrap' }}> 检索:</span>
|
|
|
|
+ <Input placeholder={'请输入列标题'} allowClear
|
|
|
|
+ suffix={
|
|
|
|
+ <IconFont type="iconsousuo" onClick={() => tableDataSearchHandle('columnName')} />
|
|
|
|
+ }
|
|
|
|
+ onChange={(e) => {
|
|
|
|
+ set_tableDataSearchKeywords(e.target.value);
|
|
|
|
+ if (e.target.value.length == 0) {
|
|
|
|
+ set_tableDataFilterParams({
|
|
|
|
+ ...tableDataFilterParams,
|
|
|
|
+ columnName: ''
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
|
|
+ onPressEnter={(e) => {
|
|
|
|
+
|
|
|
|
+ set_tableDataFilterParams({
|
|
|
|
+ ...tableDataFilterParams,
|
|
|
|
+ columnName: (e.target as HTMLInputElement).value
|
|
|
|
+ });
|
|
|
|
+ }}
|
|
|
|
+
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div className='btnGroup'>
|
|
|
|
+ <UpDataActBtn record type='ADD' />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div style={{ marginTop: 16 }}>
|
|
|
|
+ <BMSTable columns={columns as ProColumns[]} actionRef={tableRef} rowKey='id' params={tableDataFilterParams} request={(params) => getTableData(params)} />
|
|
|
|
+ </div>
|
|
|
|
+ </BMSPagecontainer>
|
|
|
|
+ )
|
|
|
|
+}
|