TemplateManage.jsx 15.5 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1 2 3 4 5 6
/* eslint-disable array-callback-return */
/* eslint-disable eqeqeq */
/* eslint-disable no-shadow */
/* eslint-disable spaced-comment */
/* eslint-disable import/first */
import React, { useEffect, useState } from 'react';
7
import {
皮倩雯's avatar
皮倩雯 committed
8 9 10 11 12 13 14 15 16 17 18
  // Tree,
  Table,
  Space,
  Input,
  Button,
  Select,
  Popconfirm,
  message,
  Tooltip,
  notification,
  Spin,
19
} from 'antd';
皮倩雯's avatar
皮倩雯 committed
20
import { PlusCircleOutlined, EditTwoTone, DeleteOutlined } from '@ant-design/icons';
21 22 23

const { Search } = Input;
const { Option } = Select;
皮倩雯's avatar
皮倩雯 committed
24 25 26 27 28 29 30 31
import EditModal from './components/EditModal';
import AddModal from './components/AddModal';
import {
  GetMessageTemplate,
  UpdateMessageTemplate,
  DeleteMessageTemplate,
  InsertMessageTemplate,
  GetThirdpartyTemplates,
32
  GetMessageVersion,
邓超's avatar
邓超 committed
33
} from '@/services/messagemanage/messagemanage';
皮倩雯's avatar
皮倩雯 committed
34
import styles from './TemplateManage.less';
35 36

const TemplateManage = () => {
皮倩雯's avatar
皮倩雯 committed
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
  const [visibleParams, setvisibleParams] = useState({
    addVisible: false, // 新增弹窗
    delVisible: false, // 删除弹窗
    editVisible: false, // 修改弹窗
    spinLoading: false, // 加载弹窗
    btnLoading: false,
    loading: false,
    checkBoxLoading: false,
  });
  const [currentTemplate, setCurrentTempalte] = useState({});
  const [data, setData] = useState([]);
  const [flag, setFlag] = useState(0);
  const [option, setOption] = useState([]); // 下拉列表数据
  const [treeLoading, setTreeLoading] = useState(false);
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
  const [value, setValue] = useState('');
  const [currentType, setCurrentType] = useState('全部');
54
  const [messageVersion, setMessageVersion] = useState('');
55

皮倩雯's avatar
皮倩雯 committed
56 57 58
  useEffect(() => {
    getTemplateList();
    selectFocus();
59
    getMessageVersion();
皮倩雯's avatar
皮倩雯 committed
60
  }, [flag]);
皮倩雯's avatar
皮倩雯 committed
61

62 63 64 65 66 67
  const getMessageVersion = () => {
    GetMessageVersion().then(res => {
      console.log(res.data);
      setMessageVersion(res.data);
    });
  };
皮倩雯's avatar
皮倩雯 committed
68 69 70 71 72 73 74 75 76 77 78 79 80
  const getTemplateList = obj => {
    setTreeLoading(true);
    GetMessageTemplate(obj)
      .then(res => {
        setTreeLoading(false);
        let list = [];
        if (res.code === 0) {
          res.data.map((item, index) => {
            list.push({
              key: item.Id,
              Id: item.Id,
              name: item.LikeName,
              type: item.Type,
81 82 83 84 85 86 87
              third_name: item.Name,
              third_id: item.No,
              template_params2: item.ParsingParams, //模板参数2.0
              template_params1: item.TParameters, //模板参数1.0
              analysis_params: item.ParsingRules, //模板解析
              desc: item.ParsingDescription, //模板参数说明
              weixin: item.WorkWeiXinId, //企业微信ID
皮倩雯's avatar
皮倩雯 committed
88
            });
皮倩雯's avatar
皮倩雯 committed
89 90 91 92 93 94 95 96
          });
          setData(list);
        }
      })
      .catch(e => {
        setTreeLoading(false);
      });
  };
97

皮倩雯's avatar
皮倩雯 committed
98 99 100 101 102 103
  const selectFocus = obj => {
    GetThirdpartyTemplates(obj)
      .then(res => {
        if (res.msg === 'Ok') {
          console.log(res.data);
          setOption(res.data);
皮倩雯's avatar
皮倩雯 committed
104
        } else {
皮倩雯's avatar
皮倩雯 committed
105 106 107
          notification.error({
            message: '提示',
            duration: 15,
108
            description: res.msg,
皮倩雯's avatar
皮倩雯 committed
109
          });
皮倩雯's avatar
皮倩雯 committed
110
        }
皮倩雯's avatar
皮倩雯 committed
111 112 113 114 115
      })
      .catch(err => {
        console.error(err);
      });
  };
皮倩雯's avatar
皮倩雯 committed
116

皮倩雯's avatar
皮倩雯 committed
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
  const columns = [
    {
      title: '编号',
      dataIndex: 'Id',
      key: 'Id',
      align: 'center',
      width: 80,
      render: text => <a>{text}</a>,
    },
    {
      title: '模板名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: item => searchStyle(item),
    },
    {
      title: '模板类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
138
      render: text => <span>{text == null || !text ? '-' : text}</span>,
皮倩雯's avatar
皮倩雯 committed
139 140 141 142 143 144
    },
    {
      title: '第三方模板名称',
      dataIndex: 'third_name',
      key: 'third_name',
      align: 'center',
145
      render: text => <span>{text == null || !text ? '-' : text}</span>,
皮倩雯's avatar
皮倩雯 committed
146 147 148 149 150 151
    },
    {
      title: '企业微信ID',
      dataIndex: 'weixin',
      key: 'weixin',
      align: 'center',
152 153 154 155 156 157 158 159 160 161 162
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: (text, record) => (
        <span>
163
          {text === null || !text ? (
164 165 166 167 168 169 170 171
            '-'
          ) : (
            <Tooltip placement="topLeft" title={text}>
              {text}
            </Tooltip>
          )}
        </span>
      ),
皮倩雯's avatar
皮倩雯 committed
172 173 174 175 176 177
    },
    {
      title: '第三方模版编号',
      dataIndex: 'third_id',
      key: 'third_id',
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
178 179 180 181 182 183 184 185 186 187
      width: 150,
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
188 189
      render: (text, record) => (
        <span>
190
          {text === null || !text ? (
191 192 193 194 195 196 197
            '-'
          ) : (
            <Tooltip placement="topLeft" title={text}>
              {text}
            </Tooltip>
          )}
        </span>
皮倩雯's avatar
皮倩雯 committed
198
      ),
皮倩雯's avatar
皮倩雯 committed
199 200
    },
    {
201
      title: '模板参数',
皮倩雯's avatar
皮倩雯 committed
202 203 204
      dataIndex: 'template_params1',
      key: 'template_params1',
      align: 'center',
205 206 207 208 209 210 211 212 213 214 215
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: (text, record) => (
        <span>
216
          {text === null || !text ? (
217 218 219 220 221 222 223 224
            '-'
          ) : (
            <Tooltip placement="topLeft" title={text}>
              {text}
            </Tooltip>
          )}
        </span>
      ),
皮倩雯's avatar
皮倩雯 committed
225 226
    },
    {
227
      title: '解析参数',
皮倩雯's avatar
皮倩雯 committed
228 229 230
      dataIndex: 'template_params2',
      key: 'template_params2',
      align: 'center',
231 232 233 234 235 236 237 238 239 240 241
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: (text, record) => (
        <span>
242
          {text === null || !text ? (
243 244 245 246 247 248 249 250
            '-'
          ) : (
            <Tooltip placement="topLeft" title={text}>
              {text}
            </Tooltip>
          )}
        </span>
      ),
皮倩雯's avatar
皮倩雯 committed
251 252 253 254 255 256
    },
    {
      title: '模板参数说明',
      dataIndex: 'desc',
      key: 'desc',
      align: 'center',
257 258 259 260 261 262 263 264 265 266 267
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: (text, record) => (
        <span>
268
          {text === null || !text ? (
269 270 271 272 273 274 275 276
            '-'
          ) : (
            <Tooltip placement="topLeft" title={text}>
              {text}
            </Tooltip>
          )}
        </span>
      ),
皮倩雯's avatar
皮倩雯 committed
277 278 279 280 281 282
    },
    {
      title: '解析规则',
      dataIndex: 'analysis_params',
      key: 'analysis_params',
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
283 284 285 286 287 288 289 290 291 292
      width: 150,
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
293 294
      render: (text, record) => (
        <span>
295
          {text === null || !text ? (
296 297 298 299 300 301 302
            '-'
          ) : (
            <Tooltip placement="topLeft" title={text}>
              {text}
            </Tooltip>
          )}
        </span>
皮倩雯's avatar
皮倩雯 committed
303
      ),
皮倩雯's avatar
皮倩雯 committed
304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align: 'center',
      width: 150,
      ellipsis: true,
      render: (text, record) => (
        <Space>
          <Tooltip title="编辑">
            <EditTwoTone
              type="primary"
              size="small"
              onClick={() => {
                changeDesc(record);
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
          <Tooltip title="删除">
            <div onClick={e => e.stopPropagation()}>
              <Popconfirm
                placement="bottomRight"
                title="是否删除该模板?"
                okText="确认"
                cancelText="取消"
                onConfirm={() => {
                  delTemplate(record);
                }}
              >
皮倩雯's avatar
皮倩雯 committed
335
                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
皮倩雯's avatar
皮倩雯 committed
336 337 338 339 340 341 342 343 344 345 346 347
              </Popconfirm>
            </div>
          </Tooltip>
        </Space>
      ),
    },
  ];

  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
皮倩雯's avatar
皮倩雯 committed
348
      n = val.replace(new RegExp(value, 'g'), `<span style='color:red'>${value}</span>`);
皮倩雯's avatar
皮倩雯 committed
349 350
    } else {
      n = val;
皮倩雯's avatar
皮倩雯 committed
351
    }
皮倩雯's avatar
皮倩雯 committed
352 353 354 355 356 357
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  const placeholder = '请输入模板名称';
  const handleSearch = value => {
    setValue(value);
358 359 360 361 362
    if (currentType == '全部') {
      getTemplateList({ queryInfo: value });
    } else {
      getTemplateList({ queryInfo: value, tempType: currentType });
    }
皮倩雯's avatar
皮倩雯 committed
363 364 365 366 367 368 369 370 371 372 373 374 375
    setShowSearchStyle(true);
  };
  const handleReset = () => {
    setCurrentType('全部');
    getTemplateList();
    setValue('');
    setShowSearchStyle(false);
  };
  const handleChange = e => {
    setValue(e.target.value);
  };
  const handleSelectType = value => {
    if (value === '全部') {
376
      setCurrentType('全部');
皮倩雯's avatar
皮倩雯 committed
377 378 379 380
      getTemplateList();
    } else {
      getTemplateList({ tempType: value });
      setCurrentType(value);
381
    }
皮倩雯's avatar
皮倩雯 committed
382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426
  };
  const changeDesc = record => {
    setCurrentTempalte(record);
    handleShowModal('editVisible', true);
  };
  const AddTemplate = () => {
    handleShowModal('addVisible', true);
  };
  const delTemplate = record => {
    DeleteMessageTemplate({
      id: record.Id,
    }).then(res => {
      if (res.code === 0) {
        message.success('模板删除成功!');
        setFlag(flag + 1);
      } else {
        message.warn('模板删除失败!');
      }
    });
  };
  // 弹出模态框
  const handleShowModal = (key, value) => {
    setvisibleParams({ ...visibleParams, [key]: value });
  };
  //编辑
  const editModal = () => {
    handleShowModal('editVisible', false);
  };
  const onSubmit = result => {
    if (result.type == '企业微信') {
      UpdateMessageTemplate({
        Id: result.Id,
        Type: result.type,
        LikeName: result.name,
        Name: result.third_name,
        ParsingRules: result.analysis_params,
        ParsingDescription: result.desc,
        TParameters: result.params,
        ParsingParams: result.param1,
        WorkWeiXinId: result.weixin,
      }).then(res => {
        if (res.code === 0) {
          message.success('模板保存成功!');
          handleShowModal('editVisible', false);
          setFlag(flag + 1);
427
        } else {
皮倩雯's avatar
皮倩雯 committed
428
          message.warn('模板保存失败!');
429
        }
皮倩雯's avatar
皮倩雯 committed
430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448
      });
    } else {
      UpdateMessageTemplate({
        Id: result.Id,
        Type: result.type,
        LikeName: result.name,
        Name: result.third_name,
        No: result.third_id,
        ParsingRules: result.analysis_params,
        ParsingDescription: result.desc,
        TParameters: result.params,
        ParsingParams: result.param1,
      }).then(res => {
        if (res.code === 0) {
          message.success('模板保存成功!');
          handleShowModal('editVisible', false);
          setFlag(flag + 1);
        } else {
          message.warn('模板保存失败!');
449
        }
皮倩雯's avatar
皮倩雯 committed
450
      });
451
    }
皮倩雯's avatar
皮倩雯 committed
452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493
  };
  //新增
  const addModal = () => {
    handleShowModal('editVisible', false);
  };
  const onAddSubmit = result => {
    if (result.type == '企业微信') {
      InsertMessageTemplate({
        Type: result.type,
        LikeName: result.name,
        Name: result.third_name,
        ParsingRules: result.analysis_params,
        ParsingDescription: result.desc,
        TParameters: result.params,
        ParsingParams: result.param1,
        WorkWeiXinId: result.weixin,
      }).then(res => {
        if (res.code === 0) {
          message.success('模板添加成功!');
          handleShowModal('addVisible', false);
          setFlag(flag + 1);
        } else {
          message.warn('模板添加失败!');
        }
      });
    } else {
      InsertMessageTemplate({
        Type: result.type,
        LikeName: result.name,
        Name: result.third_name,
        No: result.third_id,
        ParsingRules: result.analysis_params,
        ParsingDescription: result.desc,
        TParameters: result.params,
        ParsingParams: result.param1,
      }).then(res => {
        if (res.code === 0) {
          message.success('模板添加成功!');
          handleShowModal('addVisible', false);
          setFlag(flag + 1);
        } else {
          message.warn('模板添加失败!');
494
        }
皮倩雯's avatar
皮倩雯 committed
495
      });
496
    }
皮倩雯's avatar
皮倩雯 committed
497
  };
498

皮倩雯's avatar
皮倩雯 committed
499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541
  const pagenation = {
    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
    pageSizeOptions: [10, 20, 50, 100],
    defaultPageSize: '10',
    showQuickJumper: true,
    showSizeChanger: true,
  };
  return (
    <div className={styles.template_container}>
      <Spin tip="loading..." spinning={treeLoading}>
        <div className={styles.operate_bar}>
          <div className={styles.template_type}>
            <div className={styles.title}>模板类型</div>
            <Select
              placeholder="请选择是否!"
              value={currentType}
              style={{ width: '150px' }}
              onChange={handleSelectType}
              className={styles.select}
            >
              <Option value="全部">全部</Option>
              <Option value="公众号">公众号</Option>
              <Option value="短信">短信</Option>
              <Option value="APP">APP</Option>
              <Option value="WEB">WEB</Option>
              <Option value="企业微信">企业微信</Option>
            </Select>
          </div>
          <div className={styles.fast_search}>
            <div className={styles.title}>快速检索</div>
            <Search
              allowClear
              placeholder={placeholder}
              onSearch={handleSearch}
              onChange={e => handleChange(e)}
              enterButton
              style={{ width: '300px' }}
              value={value}
            />
          </div>
          <Button type="primary" onClick={handleReset}>
            重置
          </Button>
shaoan123's avatar
shaoan123 committed
542

皮倩雯's avatar
皮倩雯 committed
543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559
          <Button
            type="primary"
            style={{ marginLeft: '10px' }}
            icon={<PlusCircleOutlined style={{ verticalAlign: 'middle' }} />}
            onClick={AddTemplate}
          >
            <span style={{ marginTop: '-3px' }}>新增</span>
          </Button>
        </div>
        <div className={styles.list_view}>
          <Table
            columns={columns}
            dataSource={data}
            bordered
            pagination={pagenation}
            scroll={{ y: '500px' }}
          />
560
        </div>
皮倩雯's avatar
皮倩雯 committed
561 562 563 564 565 566 567
        <EditModal
          visible={visibleParams.editVisible}
          template={currentTemplate}
          onCancel={() => handleShowModal('editVisible', false)}
          option={option}
          confirmModal={editModal}
          onSubmit={onSubmit}
568
          messageVersion={messageVersion}
皮倩雯's avatar
皮倩雯 committed
569 570 571 572 573 574 575 576
        />
        <AddModal
          visible={visibleParams.addVisible}
          template={currentTemplate}
          onCancel={() => handleShowModal('addVisible', false)}
          option={option}
          confirmModal={addModal}
          onSubmit={onAddSubmit}
577
          messageVersion={messageVersion}
皮倩雯's avatar
皮倩雯 committed
578 579 580 581 582 583
        />
      </Spin>
    </div>
  );
};
export default TemplateManage;