|
@@ -1,9 +1,12 @@
|
|
|
import React, { Component } from "react";
|
|
|
import { BirdGrid } from "components/Grid";
|
|
|
import { Modal, Tabs, message, Input, Button } from "antd";
|
|
|
+import request from "utils/request";
|
|
|
import AutoForm from "components/Grid/BirdGridForm";
|
|
|
import config from "utils/config";
|
|
|
import "antd/dist/antd.css";
|
|
|
+import { throws } from "assert";
|
|
|
+
|
|
|
// import { Button } from "antd/lib/radio";
|
|
|
|
|
|
const { APIV3Auth , WXMpAPI} = config;
|
|
@@ -13,26 +16,51 @@ class AddminiFans extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- //设置列分组
|
|
|
- listVisiable: false,
|
|
|
- listConfirmLoading: false,
|
|
|
- listSecret: { group: "" },
|
|
|
- //设置总分组
|
|
|
- totalVisiable: false,
|
|
|
- totalConfirmLoading: false,
|
|
|
- totalSecret: {},
|
|
|
+ type : '1',
|
|
|
+ mode : '',
|
|
|
+ editType : '1',
|
|
|
+ //编辑模态框
|
|
|
+ editVisiable: false,
|
|
|
+ editConfirmLoading: false,
|
|
|
+ editSecret: {},
|
|
|
//宽度
|
|
|
formOption: [],
|
|
|
formOption2: [],
|
|
|
formOption3: [],
|
|
|
+ formOption4: [],
|
|
|
+ formOption5: [],
|
|
|
+ formOption6: [],
|
|
|
formWidth: 520,
|
|
|
formConfirmLoading: false,
|
|
|
formOption: { modal: "", title: "" },
|
|
|
formOption2: { modal: "", title: "" },
|
|
|
- formOption3: { modal: "", title: "" }
|
|
|
+ formOption3: { modal: "", title: "" },
|
|
|
+ formOption4: { modal: "", title: "" },
|
|
|
+ formOption5: { modal: "", title: "" },
|
|
|
+ formOption6: { modal: "", title: "" }
|
|
|
};
|
|
|
}
|
|
|
-
|
|
|
+ //点击编辑
|
|
|
+ changeEdit = data =>{
|
|
|
+ this.setState({
|
|
|
+ editVisiable: true,
|
|
|
+ editConfirmLoading: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 编辑弹出框取消事件 */
|
|
|
+ editCancelClick(){
|
|
|
+ this.setState({
|
|
|
+ editVisiable: false,
|
|
|
+ editConfirmLoading: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 编辑弹出框确认事件 */
|
|
|
+ editClick(){
|
|
|
+ this.setState({
|
|
|
+ editVisiable: false,
|
|
|
+ editConfirmLoading: false
|
|
|
+ });
|
|
|
+ }
|
|
|
/* 弹出框取消事件 */
|
|
|
cancelClick() {
|
|
|
this.setState({
|
|
@@ -41,23 +69,57 @@ class AddminiFans extends Component {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- callback(key) {
|
|
|
+ callback(_this,key) {
|
|
|
+ console.log(_this);
|
|
|
console.log(key);
|
|
|
+ this.setState({ type: key });
|
|
|
}
|
|
|
|
|
|
saveClick(callback) {
|
|
|
let self = this;
|
|
|
- let form = this.refs.autoForm;
|
|
|
+ let add_type = this.state.type;
|
|
|
+ let edit_type = this.state.editType;
|
|
|
+
|
|
|
+
|
|
|
+ let form ;
|
|
|
+ if('0' == this.state.mode ){
|
|
|
+ //新增
|
|
|
+ if(add_type == '1'){
|
|
|
+ form =this.refs.autoForm1
|
|
|
+ }else if(add_type == '2'){
|
|
|
+ form =this.refs.autoForm2
|
|
|
+ }else if(add_type == '3'){
|
|
|
+ form =this.refs.autoForm3
|
|
|
+ }
|
|
|
+ if(add_type == '1'){ // 公众号新增配置增加默认添加方式为 0:参数配置
|
|
|
+ dto['addWay'] = '0';
|
|
|
+ }
|
|
|
+ }else if('1' == this.state.mode){
|
|
|
+ //编辑
|
|
|
+ if(edit_type == '1'){
|
|
|
+ form =this.refs.autoForm4
|
|
|
+ }else if(edit_type == '2'){
|
|
|
+ form =this.refs.autoForm5
|
|
|
+ }else if(edit_type == '3'){
|
|
|
+ form =this.refs.autoForm6
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
if (!form.validate()) return;
|
|
|
|
|
|
let dto = form.state.initValue;
|
|
|
-
|
|
|
+ if('0' == this.state.mode ){
|
|
|
+ dto['type'] = add_type; //根据当前所处页面添加公众号...
|
|
|
+ }else if('1' == this.state.mode){
|
|
|
+ dto['type'] = edit_type; //根据当前所处页面添加公众号...
|
|
|
+ }
|
|
|
+ console.log(form.state.extraParams)
|
|
|
let extraParams = form.state.extraParams;
|
|
|
for (let extra of extraParams) {
|
|
|
dto[extra.field] = extra.value;
|
|
|
}
|
|
|
request({
|
|
|
- url: "/web/auth/add",
|
|
|
+ url: WXMpAPI + "/wx/port/save",
|
|
|
method: "post",
|
|
|
data: dto
|
|
|
}).then(function(result) {
|
|
@@ -75,7 +137,8 @@ class AddminiFans extends Component {
|
|
|
formVisiable: false,
|
|
|
formConfirmLoading: false
|
|
|
});
|
|
|
- self.refs.tg.getGrid().reload();
|
|
|
+ //self.refs.tg.getGrid().reload();
|
|
|
+ //self.refs.gridOptionResource.reload;
|
|
|
});
|
|
|
}
|
|
|
render() {
|
|
@@ -88,30 +151,38 @@ class AddminiFans extends Component {
|
|
|
url: {
|
|
|
read: WXMpAPI + "/wx/port/getAll",
|
|
|
// add: APIV3Auth + "/ums/resource/addResource",
|
|
|
- //edit: APIV3Auth + "/ums/resource/update"
|
|
|
+ // edit: APIV3Auth + "/ums/resource/update"
|
|
|
},
|
|
|
afterSave: function() {
|
|
|
console.log(self.refs.gridResource);
|
|
|
},
|
|
|
afterQuery: function(resultout, filters) {
|
|
|
- if(self.state.hasInitFilters){
|
|
|
+ if(!self.state.hasInitFilters){
|
|
|
return;
|
|
|
}
|
|
|
+ self.refs.gridResource.setState({
|
|
|
+ filterRules:[{
|
|
|
+ field:"portName",
|
|
|
+ operate:"contains",
|
|
|
+ value:"",
|
|
|
+ },{
|
|
|
+ field:"typeName",
|
|
|
+ operate:"equal",
|
|
|
+ value:"",
|
|
|
+ }]
|
|
|
+ },() => {
|
|
|
+ self.setState({hasInitFilters:false});
|
|
|
+ });
|
|
|
},
|
|
|
- dataSource: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- headImg:
|
|
|
- "https://axhub.im/ax9/152bb62cb584111a/images/%E7%AB%AF%E5%8F%A3%E7%AE%A1%E7%90%86/u90.svg",
|
|
|
- name: "小红"
|
|
|
- }
|
|
|
- ],
|
|
|
columns: [
|
|
|
{ title: "端口ID", data: "id", type: "number" },
|
|
|
- { title: "端口名称", data: "port_name", operate:"or" , type: "text",query: true,editor: {}},
|
|
|
- { title: "端口类型", data: "type",type: "text",query: false,editor: {}},
|
|
|
- { title: "绑定端口图标", data: "head_img", type: "img", query: false, editor: {}, hide: true },
|
|
|
- { title: "绑定端口图标", data: "head_img", render: (text, row, index) => (
|
|
|
+ { title: "端口名称", data: "portName", type: "text",query: true,editor: {}},
|
|
|
+ { title: "端口类型", data: "typeName",type: "dropdown",source:{multi:true,data:[
|
|
|
+ {label:'企业微信',value:'0'},
|
|
|
+ {label:'公众号',value:'1'}
|
|
|
+ ]}, query: true,editor: {}},
|
|
|
+ { title: "绑定端口图标", data: "headImg", type: "img", query: false, editor: {}, hide: true },
|
|
|
+ { title: "绑定端口图标", data: "headImg", render: (text, row, index) => (
|
|
|
<div key={index}>
|
|
|
<div>
|
|
|
<img
|
|
@@ -122,33 +193,70 @@ class AddminiFans extends Component {
|
|
|
marginLeft: "30px",
|
|
|
marginTop: "10px"
|
|
|
}}
|
|
|
- src={row.head_img}
|
|
|
+ src={row.headImg}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
},
|
|
|
- { title: "绑定端口名称", data: "name", type: "text", query: false, editor: {} },
|
|
|
- { title: "绑定端口AppId", data: "appId", operate:"or", type: "text", query: true, editor: {} },
|
|
|
- { title: "绑定状态", data: "state", type: "text", query: false, editor: {} },
|
|
|
- { title: "操作选项", type: "command" ,actions: [
|
|
|
- {
|
|
|
- name: "编辑",
|
|
|
- onClick: data => {
|
|
|
-
|
|
|
- }
|
|
|
+ { title: "绑定端口名称", data: "name", type: "text", query: false, editor: { ap: 'hide', ep: 'hide' } },
|
|
|
+ { title: "绑定端口AppId", data: "appId",type: "text", query: true, editor: {} },
|
|
|
+ { title: "绑定状态", data: "stateName", type: "text", query: false, editor: {} },
|
|
|
+ // { title: "操作选项", type: "head_img" ,render: (text, row, index) => (
|
|
|
+ // <div key={index}>
|
|
|
+ // <div>
|
|
|
+ // <button onClick={this.changeEdit(row)}>编辑</button>
|
|
|
+ // </div>
|
|
|
+ // </div>
|
|
|
+ // )}
|
|
|
+ {title: "操作选项", type: "command", actions: [{
|
|
|
+ name: '编辑',
|
|
|
+ onClick: (data) => {
|
|
|
+ this.changeEdit(data)
|
|
|
+
|
|
|
+ const fields = [{ title: "端口名称", data: "portName" ,type: "text", editor: { tips: "填写一个方便记忆的名称,以免公众号/企业微信等同名" },query: true},
|
|
|
+ { title: "公众号图标",data: "headImg", type: "img", editor: { tips: "请上传1:1尺寸的图标" }, query: true },
|
|
|
+ { title: "公众号名称",data: "name", type: "text", editor: { tips: "微信公众号名称"}, query: true},
|
|
|
+ { title: "AppID", data: "appId", type: "text", editor: { tips: "微信公众号AppID" }, query: true },
|
|
|
+ { title: "AppSecret", data: "secret", type: "text", editor: { tips: "微信公众号AppSecret" },query: true },
|
|
|
+ { title: "token", data: "token", type: "text", editor: { tips: "微信公众号token" }, query: true },
|
|
|
+ { title: "aesKey", data: "aesKey", type: "text", editor: { tips: "微信公众号aesKey" },query: true }
|
|
|
+ ];
|
|
|
+ const fields2 = [ { title: "端口名称",data: "text4",type: "text",editor: {},query: true} ];
|
|
|
+ const fields3 = [ { title: "端口名称",data: "text5",type: "text",editor: {},query: true},
|
|
|
+ { title: "企业微信图标", data: "imgIcon2", type: "img", editor: { tips: "请上传1:1尺寸的图标" }, query: true },
|
|
|
+ { title: "企业微信名称", data: "text6", type: "text", editor: { tips: "企业微信名称" }, query: true },
|
|
|
+ { title: "企业ID", data: "text7", type: "text", editor: { tips: "企业微信后台,“我的企业”中的企业ID,也叫corpid" }, query: true },
|
|
|
+ { title: "客户联系", data: "text8", type: "text", editor: { tips: "企业微信后台,“客户联系”中获取" }, query: true },
|
|
|
+ { title: "通讯录同步",data: "text9",type: "text", editor: {tips: "企业微信后台,“管理工具-通讯录同步”中获取"},query: true},
|
|
|
+ { title: "客户信息查询",data: "text10",type: "text",editor: { tips: "企业微信后台,“应用管理-自建-客户信息查询”中获取" }, query: true }
|
|
|
+ ];
|
|
|
+ let formOption4 = { model: "update",title: "添加端口", fields: fields, value: data, extraParams: [] };
|
|
|
+ let formOption5 = { model: "update", title: "基础设置", fields: fields2, value: {}, extraParams: [] };
|
|
|
+ let formOption6 = { model: "update", title: "基础设置", fields: fields3, value: {}, extraParams: [] };
|
|
|
+ self.setState({
|
|
|
+ editVisiable: true,
|
|
|
+ formOption4: formOption4,
|
|
|
+ formOption5: formOption5,
|
|
|
+ formOption6: formOption6,
|
|
|
+ mode: '1'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 查询请求
|
|
|
}
|
|
|
- ]}
|
|
|
+ }]}
|
|
|
],
|
|
|
actions: [
|
|
|
{
|
|
|
name: "添加端口",
|
|
|
onClick: function() {
|
|
|
- const fields = [{ title: "端口名称", data: "field-text", type: "text", editor: { tips: "填写一个方便记忆的名称,以免公众号/企业微信等同名" },query: true},
|
|
|
- { title: "公众号图标",data: "imgIcon", type: "img", editor: { tips: "请上传1:1尺寸的图标" }, query: true },
|
|
|
- { title: "公众号名称",data: "text1", type: "text", editor: { tips: "微信公众号名称"}, query: true},
|
|
|
- { title: "AppID", data: "text2", type: "text", editor: { tips: "微信公众号AppID" }, query: true },
|
|
|
- { title: "AppSecret", data: "text3", type: "text", editor: { tips: "微信公众号AppSecret" },query: true }
|
|
|
+ const fields = [{ title: "端口名称", data: "portName", type: "text", editor: { tips: "填写一个方便记忆的名称,以免公众号/企业微信等同名" },query: true},
|
|
|
+ { title: "公众号图标",data: "headImg", type: "img", editor: { tips: "请上传1:1尺寸的图标" }, query: true },
|
|
|
+ { title: "公众号名称",data: "name", type: "text", editor: { tips: "微信公众号名称"}, query: true},
|
|
|
+ { title: "AppID", data: "appId", type: "text", editor: { tips: "微信公众号AppID" }, query: true },
|
|
|
+ { title: "AppSecret", data: "secret", type: "text", editor: { tips: "微信公众号AppSecret" },query: true },
|
|
|
+ { title: "token", data: "token", type: "text", editor: { tips: "微信公众号token" }, query: true },
|
|
|
+ { title: "aesKey", data: "aesKey", type: "text", editor: { tips: "微信公众号aesKey" },query: true }
|
|
|
];
|
|
|
const fields2 = [ { title: "端口名称",data: "text4",type: "text",editor: {},query: true} ];
|
|
|
const fields3 = [ { title: "端口名称",data: "text5",type: "text",editor: {},query: true},
|
|
@@ -166,7 +274,8 @@ class AddminiFans extends Component {
|
|
|
formVisiable: true,
|
|
|
formOption: formOption,
|
|
|
formOption2: formOption2,
|
|
|
- formOption3: formOption3
|
|
|
+ formOption3: formOption3,
|
|
|
+ mode: '0'
|
|
|
});
|
|
|
}
|
|
|
}
|
|
@@ -185,18 +294,41 @@ class AddminiFans extends Component {
|
|
|
onCancel={() => this.cancelClick()}
|
|
|
confirmLoading={this.state.formConfirmLoading}
|
|
|
>
|
|
|
- <Tabs defaultActiveKey="1">
|
|
|
+ <Tabs ActiveKey="1" activeKey={self.state.type} onChange={(key)=>{
|
|
|
+ this.setState({ type: key });
|
|
|
+ }}>
|
|
|
<TabPane tab="公众号" key="1">
|
|
|
- <AutoForm formOption={this.state.formOption} ref="autoForm" />
|
|
|
+ <AutoForm formOption={this.state.formOption} ref="autoForm1" />
|
|
|
</TabPane>
|
|
|
<TabPane tab="小程序" key="2">
|
|
|
- <AutoForm formOption={this.state.formOption2} ref="autoForm" />
|
|
|
+ <AutoForm formOption={this.state.formOption2} ref="autoForm2" />
|
|
|
</TabPane>
|
|
|
<TabPane tab="企业微信" key="3">
|
|
|
- <AutoForm formOption={this.state.formOption3} ref="autoForm" />
|
|
|
+ <AutoForm formOption={this.state.formOption3} ref="autoForm3" />
|
|
|
</TabPane>
|
|
|
</Tabs>
|
|
|
</Modal>
|
|
|
+ <Modal
|
|
|
+ title="编辑"
|
|
|
+ width={this.state.formWidth}
|
|
|
+ visible={this.state.editVisiable}
|
|
|
+ onOk={() => this.saveClick()}
|
|
|
+ onCancel={() => this.editCancelClick()}
|
|
|
+ >
|
|
|
+ <Tabs ActiveKey="1" activeKey={self.state.type} onChange={(key)=>{
|
|
|
+ this.setState({ type: key });
|
|
|
+ }}>
|
|
|
+ <TabPane tab="公众号" key="1">
|
|
|
+ <AutoForm formOption={this.state.formOption4} ref="autoForm4" />
|
|
|
+ </TabPane>
|
|
|
+ <TabPane tab="小程序" key="2">
|
|
|
+ <AutoForm formOption={this.state.formOption5} ref="autoForm5" />
|
|
|
+ </TabPane>
|
|
|
+ <TabPane tab="企业微信" key="3">
|
|
|
+ <AutoForm formOption={this.state.formOption6} ref="autoForm6" />
|
|
|
+ </TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </Modal>
|
|
|
</div>
|
|
|
);
|
|
|
}
|