index.jsx 7.41 KB
Newer Older
TZW's avatar
TZW committed
1 2 3 4
/* 扩展字段
 * @Author: Li Hanlin
 * @Date: 2022-11-10 09:39:56
 * @Last Modified by: Li Hanlin
krysent's avatar
krysent committed
5
 * @Last Modified time: 2023-09-13 09:01:32
TZW's avatar
TZW committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
 */

import * as React from 'react';
import { useState, useMemo, useRef, useEffect } from 'react';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import { doFetch } from '@/utils/doFetch';
import { message, Dropdown, Menu, Layout, Button, Image, Space, Divider, Tabs } from 'antd';
import TreeRender from '@/components/TreeRender';
import { ProDescriptions } from '@ant-design/pro-components';
import InitForm from '@/components/InitForm';

const { Sider, Content } = Layout;

function Field(props) {
TZW's avatar
TZW committed
23
  let actionRef = useRef(),
TZW's avatar
TZW committed
24 25 26 27 28 29 30
    formRef = useRef(),
    [drawer, setDrawer] = useState({
      visible: false,
    }),
    [items, setitems] = useState([]),
    urlParams = {
      save: '/base/paFormField/save',
TZW's avatar
TZW committed
31
      remove: '/base/paFormField/delete',
TZW's avatar
TZW committed
32 33 34 35 36 37 38 39 40 41 42
      list: '/base/paFormField/queryPage',
      detail: '/asset/equipment/detail',
      formList: '/base/paForm/queryList',
    };

  useEffect(() => {
    const fn = async () => {
      const result = await doFetch({
        url: urlParams.formList,
        params: {},
      });
TZW's avatar
TZW committed
43
      //console.log(result);
TZW's avatar
TZW committed
44
      if (!result?.data?.dataList.length == 0) {
TZW's avatar
TZW committed
45
        await setitems(
TZW's avatar
TZW committed
46 47 48 49 50 51 52
          result?.data?.dataList.map((it, index) => {
            return {
              key: it.id,
              label: it.formName,
            };
          }),
        );
TZW's avatar
TZW committed
53
        await setDrawer((s) => ({
TZW's avatar
TZW committed
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
          ...s,
          formName: result?.data?.dataList[0]?.formName,
          formId: result?.data?.dataList[0]?.id,
        }));
      }
    };
    fn();
  }, []);
  const edit = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          onClick: () => {
            setDrawer((s) => ({
              ...s,
              visible: true,
              title: '编辑',
TZW's avatar
TZW committed
72 73
              item: {
                ...row,
TZW's avatar
TZW committed
74
                formName: s?.formName,
TZW's avatar
TZW committed
75
                fieldChar: String(row?.fieldChar),
TZW's avatar
TZW committed
76
                // formId: s?.formId,
TZW's avatar
TZW committed
77
              },
TZW's avatar
TZW committed
78 79 80 81
              fields: getcolumns(true),
              val: 'edit',
              // detailpath: urlParams.detail,
              // params: { id: row.id },
TZW's avatar
TZW committed
82 83 84
              onFinish: async (vals) => {
                let params = {
                  ...vals,
TZW's avatar
TZW committed
85
                  id: row?.id,
TZW's avatar
TZW committed
86
                  formId: drawer?.formId,
TZW's avatar
TZW committed
87
                };
TZW's avatar
TZW committed
88
                delete params.formName;
TZW's avatar
TZW committed
89 90 91 92 93
                let res = await doFetch({
                  url: urlParams.save,
                  params,
                });
                if (res.code === '0000') {
TZW's avatar
TZW committed
94
                  message.success('编辑成功!');
TZW's avatar
TZW committed
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
                  setDrawer((s) => ({
                    ...s,
                    visible: false,
                  }));
                  actionRef.current.reload();
                }
              },
            }));
          },
        }}
      >
        编辑
      </PremButton>
    );
  };

  const remove = (text, row, _, action) => {
    return (
      <PremButton
        pop={{
TZW's avatar
TZW committed
115
          title: '是否删除该字段?',
TZW's avatar
TZW committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
          okText: '确认',
          cancelText: '取消',
          onConfirm: async () => {
            let res = await doFetch({ url: urlParams.remove, params: { id: row.id } });
            if (res.code === '0000') {
              message.success('删除成功!');
              setDrawer((s) => ({
                ...s,
                visible: false,
              }));
              actionRef.current.reload();
            }
          },
        }}
        btn={{
          size: 'small',
          type: 'danger',
        }}
      >
        删除
      </PremButton>
    );
  };

  const columns = useMemo(() => {
    let defcolumn = getcolumns(setDrawer);
    return defcolumn.concat({
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, row, _, action) => [edit(text, row, _, action), remove(text, row, _, action)],
    });
TZW's avatar
TZW committed
148
  }, [drawer?.formId]);
TZW's avatar
TZW committed
149 150 151 152 153 154

  return (
    <div style={{ position: 'relative' }}>
      <div className="ant-card-head">
        <div className="ant-card-head-wrapper">
          <div className="ant-card-head-title">
TZW's avatar
TZW committed
155
            <h3 className="page-title">扩展字段</h3>
TZW's avatar
TZW committed
156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
          </div>
        </div>
      </div>
      <Layout style={{ height: '100%' }}>
        <Sider theme="light" width={300}>
          <div>
            <h3
              style={{
                paddingLeft: 24,
                paddingRight: 24,
                paddingTop: 24,
                paddingBottom: 8,
              }}
            >
              表单信息
            </h3>
            <Menu
              onClick={async (e) => {
TZW's avatar
TZW committed
174
                await setDrawer((s) => ({
TZW's avatar
TZW committed
175
                  ...s,
TZW's avatar
TZW committed
176
                  formName: items.filter((it) => it?.key == e?.key)[0].label,
TZW's avatar
TZW committed
177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
                  formId: e?.key,
                }));
              }}
              style={{
                width: '100%',
              }}
              defaultSelectedKeys={['1']}
              mode="inline"
              items={items}
            />
          </div>
        </Sider>
        <Content>
          <AutoTable
            pagetitle={<h3 style={{ marginBottom: 0, fontWeight: 400 }}>字段信息</h3>}
            columns={columns}
            path={urlParams.list}
TZW's avatar
TZW committed
194
            extraparams={{ formId: drawer?.formId }}
TZW's avatar
TZW committed
195 196 197 198 199 200 201 202 203
            actionRef={actionRef}
            pageextra={'add'}
            resizeable={false}
            addconfig={{
              // access: 'sysDepartment_save',
              btn: {
                disabled: false,
                type: 'primary',
                onClick: () => {
TZW's avatar
TZW committed
204
                  //console.log(drawer);
TZW's avatar
TZW committed
205 206 207 208 209 210 211
                  setDrawer((s) => ({
                    ...s,
                    visible: true,
                    item: {
                      fieldChar: '1',
                      formName: drawer?.formName,
                      formId: drawer?.formId,
krysent's avatar
krysent committed
212
                      sort: 0,
TZW's avatar
TZW committed
213 214 215
                    },
                    title: '新增',
                    val: 'add',
TZW's avatar
TZW committed
216
                    fields: getcolumns(false),
TZW's avatar
TZW committed
217
                    onFinish: async (vals) => {
TZW's avatar
TZW committed
218
                      //console.log(vals);
TZW's avatar
TZW committed
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262
                      let params = {
                        ...vals,
                        formId: drawer?.formId,
                      };
                      delete params.formName;
                      let res = await doFetch({
                        url: urlParams.save,
                        params,
                      });
                      if (res.code === '0000') {
                        message.success('新增成功!');
                        setDrawer((s) => ({
                          ...s,
                          visible: false,
                        }));
                        actionRef.current.reload();
                      }
                    },
                  }));
                },
              },
            }}
            // x={1500}
          />
        </Content>
      </Layout>
      <DrawerPro
        fields={columns}
        formRef={formRef}
        defaultFormValue={drawer?.item ?? {}}
        placement="right"
        onClose={() => {
          setDrawer((s) => ({
            ...s,
            visible: false,
          }));
        }}
        {...drawer}
      />
    </div>
  );
}

export default Field;