Commit dc9cf569 authored by MrShi's avatar MrShi

dev_ssz分支,小区列表模块

parent f0ace35b
...@@ -211,16 +211,41 @@ export default defineConfig({ ...@@ -211,16 +211,41 @@ export default defineConfig({
name: 'communitymanagement', name: 'communitymanagement',
icon:'HddOutlined', icon:'HddOutlined',
routes: [ routes: [
{ /* {
path: './CellList', path: './CellList',
name: 'celllist', name: 'celllist',
component:'./runTest/Template' component:'./runTest/Template'
},*/
{
path: './housingList',
name: 'celllist',
routes: [
{ path: './', component: './CommunityManagement/housingList/HousingList' },
{ path: './Create', component: './CommunityManagement/housingList/HousingCreate' },
{ path: './Edit', component: './CommunityManagement/housingList/HousingEdit' },
{ path: './Detail', component: './CommunityManagement/housingList/HousingDetail' },
]
}, },
{ {
path: './CommunityAnnouncement', path: './CommunityAnnouncement',
name: 'communityannouncement', name: 'communityannouncement',
component:'./runTest/Template' component:'./runTest/Template'
}, },
/*{
path: './CommunityAnnouncement',
name: 'communityannouncement',
routes: [
{ path: './', component: './CommunityAnnouncement/communityNotice/CommunityNotice' },
{ path: './Create', component: './CommunityAnnouncement/communityNotice/CommunityNoticeCreate' },
{ path: './Edit', component: './CommunityAnnouncement/communityNotice/CommunityNoticeEdit' },
{ path: './Detail', component: './CommunityAnnouncement/communityNotice/CommunityNoticeDetail' },
]
},*/
{ {
path: './FacilityBookings', path: './FacilityBookings',
name: 'facilitybookings', name: 'facilitybookings',
......
import { getAllDevice,saveDevice,delDevice,getDeviceNum,getNewAddBug,importUserDeviceListExcel,
getUserDevice,saveUserDevice,getTargetKeys,getNewAdd,importUserListExcel,getDeviceDetails } from '@/services/communityNotice';
import { getRegion,getRegionList } from '@/services/region';
export default{
namespace: 'communityNoticeModel',
state: {
data: [],
},
effects: {
*getAllDevice({callback,payload},{ call, put }) {
const response = yield call(getAllDevice,payload);
yield put({
type: "getAll",
});
if(callback) callback(response);
},
*getRegion({callback,payload},{ call, put }) {
const response = yield call(getRegion,payload);
yield put({
type: "getRegions",
});
if(callback) callback(response);
},
*saveDevice({callback,payload},{ call, put }) {
const response = yield call(saveDevice,payload);
yield put({
type: "save",
});
if(callback) callback(response);
},
*delDevice({callback,payload},{ call, put }) {
const response = yield call(delDevice,payload);
yield put({
type: "del",
});
if(callback) callback(response);
},
*getRegionList({callback,payload},{ call, put }) {
const response = yield call(getRegionList,payload);
yield put({
type: "regionList",
});
if(callback) callback(response);
},
*getDeviceNum({callback,payload},{ call, put }) {
const response = yield call(getDeviceNum,payload);
yield put({
type: "num",
});
if(callback) callback(response);
},
*getUserDevice({callback,payload},{ call, put }) {
const response = yield call(getUserDevice,payload);
yield put({
type: "userDevice",
});
if(callback) callback(response);
},
*saveUserDevice({callback,payload},{ call, put }) {
const response = yield call(saveUserDevice,payload);
yield put({
type: "userDeviceSave",
});
if(callback) callback(response);
},
*getTargetKeys({callback,payload},{ call, put }) {
const response = yield call(getTargetKeys,payload);
yield put({
type: "targetKeys",
});
if(callback) callback(response);
},
*getNewAdd({callback,payload},{ call, put }) {
const response = yield call(getNewAdd,payload);
yield put({
type: "newAdd",
});
if(callback) callback(response);
},
*getNewAddBug({callback,payload},{ call, put }) {
const response = yield call(getNewAddBug,payload);
yield put({
type: "newAddBug",
});
if(callback) callback(response);
},
*importUserListExcel({callback,payload},{ call, put }) {
const response = yield call(importUserListExcel,payload);
yield put({
type: "importListExcel",
});
if(callback) callback(response);
},
*importUserDeviceListExcel({callback,payload},{ call, put }) {
const response = yield call(importUserDeviceListExcel,payload);
yield put({
type: "importDeviceListExcel",
});
if(callback) callback(response);
},
*getDeviceDetails({callback,payload},{ call, put }) {
const response = yield call(getDeviceDetails,payload);
yield put({
type: "deviceDetails",
});
if(callback) callback(response);
},
},
reducers: {
getAll(state, action) {
return {
...state,
data:action.payload || {},
};
},
getRegions(state, action) {
return {
...state,
data:action.payload || {},
};
},
save(state, action) {
return {
...state,
data:action.payload || {},
};
},
del(state, action) {
return {
...state,
data:action.payload || {},
};
},
regionList(state, action) {
return {
...state,
data:action.payload || {},
};
},
num(state, action) {
return {
...state,
data:action.payload || {},
};
},
userDevice(state, action) {
return {
...state,
data:action.payload || {},
};
},
userDeviceSave(state, action) {
return {
...state,
data:action.payload || {},
};
},
targetKeys(state, action) {
return {
...state,
data:action.payload || {},
};
},
newAdd(state, action) {
return {
...state,
data:action.payload || {},
};
},
newAddBug(state, action) {
return {
...state,
data:action.payload || {},
};
},
importListExcel(state, action) {
return {
...state,
data:action.payload || {},
};
},
importDeviceListExcel(state, action) {
return {
...state,
data:action.payload || {},
};
},
deviceDetails(state, action) {
return {
...state,
data:action.payload || {},
};
},
},
};
import { getAllDevice,saveDevice,delDevice,getDeviceNum,getNewAddBug,importUserDeviceListExcel,
getUserDevice,saveUserDevice,getTargetKeys,getNewAdd,importUserListExcel,getDeviceDetails } from '@/services/housingList';
import { getRegion,getRegionList } from '@/services/region';
export default{
namespace: 'housingListModel',
state: {
data: [],
},
effects: {
*getAllDevice({callback,payload},{ call, put }) {
const response = yield call(getAllDevice,payload);
yield put({
type: "getAll",
});
if(callback) callback(response);
},
*getRegion({callback,payload},{ call, put }) {
const response = yield call(getRegion,payload);
yield put({
type: "getRegions",
});
if(callback) callback(response);
},
*saveDevice({callback,payload},{ call, put }) {
const response = yield call(saveDevice,payload);
yield put({
type: "save",
});
if(callback) callback(response);
},
*delDevice({callback,payload},{ call, put }) {
const response = yield call(delDevice,payload);
yield put({
type: "del",
});
if(callback) callback(response);
},
*getRegionList({callback,payload},{ call, put }) {
const response = yield call(getRegionList,payload);
yield put({
type: "regionList",
});
if(callback) callback(response);
},
*getDeviceNum({callback,payload},{ call, put }) {
const response = yield call(getDeviceNum,payload);
yield put({
type: "num",
});
if(callback) callback(response);
},
*getUserDevice({callback,payload},{ call, put }) {
const response = yield call(getUserDevice,payload);
yield put({
type: "userDevice",
});
if(callback) callback(response);
},
*saveUserDevice({callback,payload},{ call, put }) {
const response = yield call(saveUserDevice,payload);
yield put({
type: "userDeviceSave",
});
if(callback) callback(response);
},
*getTargetKeys({callback,payload},{ call, put }) {
const response = yield call(getTargetKeys,payload);
yield put({
type: "targetKeys",
});
if(callback) callback(response);
},
*getNewAdd({callback,payload},{ call, put }) {
const response = yield call(getNewAdd,payload);
yield put({
type: "newAdd",
});
if(callback) callback(response);
},
*getNewAddBug({callback,payload},{ call, put }) {
const response = yield call(getNewAddBug,payload);
yield put({
type: "newAddBug",
});
if(callback) callback(response);
},
*importUserListExcel({callback,payload},{ call, put }) {
const response = yield call(importUserListExcel,payload);
yield put({
type: "importListExcel",
});
if(callback) callback(response);
},
*importUserDeviceListExcel({callback,payload},{ call, put }) {
const response = yield call(importUserDeviceListExcel,payload);
yield put({
type: "importDeviceListExcel",
});
if(callback) callback(response);
},
*getDeviceDetails({callback,payload},{ call, put }) {
const response = yield call(getDeviceDetails,payload);
yield put({
type: "deviceDetails",
});
if(callback) callback(response);
},
},
reducers: {
getAll(state, action) {
return {
...state,
data:action.payload || {},
};
},
getRegions(state, action) {
return {
...state,
data:action.payload || {},
};
},
save(state, action) {
return {
...state,
data:action.payload || {},
};
},
del(state, action) {
return {
...state,
data:action.payload || {},
};
},
regionList(state, action) {
return {
...state,
data:action.payload || {},
};
},
num(state, action) {
return {
...state,
data:action.payload || {},
};
},
userDevice(state, action) {
return {
...state,
data:action.payload || {},
};
},
userDeviceSave(state, action) {
return {
...state,
data:action.payload || {},
};
},
targetKeys(state, action) {
return {
...state,
data:action.payload || {},
};
},
newAdd(state, action) {
return {
...state,
data:action.payload || {},
};
},
newAddBug(state, action) {
return {
...state,
data:action.payload || {},
};
},
importListExcel(state, action) {
return {
...state,
data:action.payload || {},
};
},
importDeviceListExcel(state, action) {
return {
...state,
data:action.payload || {},
};
},
deviceDetails(state, action) {
return {
...state,
data:action.payload || {},
};
},
},
};
import React from 'react';
import {connect, routerRedux} from 'dva';
import {Table, Button, Input, Select, Modal, Tooltip, Upload, Icon, Checkbox, Row, Radio, Tag} from "antd";
import styles from './style.less';
import {ConnectState} from "@/models/connect";
import XLSX from "@/pages/account/xlsx.core.min";
import {router} from "umi";
import 'moment/locale/zh-cn';
class CommunityNotice extends React.Component {
//构造
constructor(props) {
super(props);
this.state = {
data: [],
province: undefined,
city: undefined,
district: undefined,
street: undefined,
total: 1,
name: '',
model: '',
status: undefined,
statusList: [{label:"在线",value:"1"}, {label:"故障",value:"3"},{label:"未激活",value:"4"}],
provinceList: [],
cityList: [{name: "未选择省"}],
districtList: [{name: "未选择市"}],
streetList: [{name: "未选择区"}],
delData: [],
visible: false,
deviceStatus: '',
selectedRowKeys: [],
used: null,
newAdd: null,
strList: [],
newList:[],
authorityList:[
{
"children": [
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 5,
"name": "组织架构",
"parentid": 1,
"sort": 10,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 6,
"name": "员工管理",
"parentid": 1,
"sort": 20,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 11,
"name": "角色管理",
"parentid": 1,
"sort": 30,
"state": "",
"is_checked": false
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 17,
"name": "企业设置",
"parentid": 1,
"sort": 2,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 26,
"name": "员工管理",
"parentid": 1,
"sort": 1,
"state": "",
"is_checked": false
}
],
"hasChildren": true,
"is_admin": 1,
"menuid": 1,
"name": "企业",
"parentid": 0,
"sort": 20,
"state": "closed",
"is_checked": true
},
{
"children": [
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 12,
"name": "供应商订单",
"parentid": 4,
"sort": 10,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 15,
"name": "供应商管理",
"parentid": 4,
"sort": 20,
"state": "",
"is_checked": false
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 16,
"name": "成为供应商",
"parentid": 4,
"sort": 30,
"state": "",
"is_checked": true
}
],
"hasChildren": true,
"is_admin": 1,
"menuid": 4,
"name": "供应商",
"parentid": 0,
"sort": 11,
"state": "closed",
"is_checked": true
}
],
}
}
/*----------------- 方法集 ------------------*/
//重置
reset = () => {
this.setState({
province: undefined,
city: undefined,
district: undefined,
street: undefined,
status: undefined,
name: '',
},() => {
this.getDevice();
});
};
//模态框相关
showModal = () => {
let flag = 0;
const nowUser = this.props.currentUser;
if(nowUser.permission!=null){
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="4"){
if(this.state.delData==null||this.state.delData.length<=0){
alert("未选中删除项!");
return;
}
flag = 1;
this.setState({
visible: true,
});
}
}
}else{
// alert("找不到用户权限记录!");
// return;
}
if(flag == 0){
alert("缺少设备删除权限!");
}
};
handleOk = () => {
this.del();
this.setState({
visible: false,
});
};
handleCancel = () => {
this.setState({
visible: false,
});
};
//获取所有设备
getDevice = () => {
const params = {
// address: (this.state.province == undefined ? '' : this.state.province.label) +
// (this.state.city == undefined ? '' : '-' + this.state.city.label) +
// (this.state.district == undefined ? '' : '-' + this.state.district.label) +
// (this.state.street == undefined ? '' : '-' + this.state.street.label),
name: this.state.name,
model: this.state.model,
status: this.state.status,
id: this.props.currentUser.userid,
userPhone:"18813787835"
};
this.props.dispatch({
type: 'tUModel/getTosUser',
payload: params,
callback: (res) => {
if (res) {
this.setState({
data: res.rows,
total: res.total,
})
// if(res.error_code == "0000"){
// this.setState({
// data: res.data.rows,
// total: res.data.total,
// })
// }
if(res.error_code == "0001"){
alert(res.error_msg);
}else if(res.error_code == "0002"){
alert(res.error_msg);
}else if(res.error_code == "0008"){
alert(res.error_msg);
window.location.href = '/';
router.replace('/');
}
// else{
// alert("Tos查询出错!未知错误!");
// }
}
}
});
};
//跳转到编辑页面
edit = (params) => {
let flag = 0;
const nowUser = this.props.currentUser;
if(nowUser.permission!=null){
if(params==null){
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="3"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: '/communityNotice/Create',
query: params,
}))
}
}
}else{
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="2"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: '/communityNotice/Edit',
query: params,
}))
}
}
}
}else{
// alert("找不到用户权限记录!");
// return;
}
if(flag == 0){
if(params==null){
alert("缺少设备添加权限!");
}else{
alert("缺少设备修改权限!");
}
}
};
//跳转到编辑页面
edit2 = (params) => {
let flag = 0;
const nowUser = this.props.currentUser;
if(nowUser.permission!=null){
if(params==null){
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="3"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: 'tosUser/edit',
query: params,
}))
}
}
}else{
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="2"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: '/tosUser/edit',
query: params,
}))
}
}
}
}else{
// alert("找不到用户权限记录!");
// return;
}
if(flag == 0){
if(params==null){
alert("缺少设备添加权限!");
}else{
alert("缺少设备修改权限!");
}
}
};
//跳转到详情页面
details = (params) => {
this.props.dispatch(routerRedux.push({
pathname: '/communityNotice/Detail',
query: params,
}))
};
//设备状态变更
statusChange = (e) => {
this.setState({status: e == undefined ? undefined : e});
};
//设备名称和型号修改
nameAndModelChange = (e) => {
this.setState({name: e.target.value});
};
//加载省
provinceload = (code) => {
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: code,},
callback: (res) => {
if (res) {
this.setState({
provinceList: res.data,
});
}
}
});
};
//省变更
provinceChange = (e) => {
if (e == undefined) {
this.setState({
cityList: [{name: "未选择省"}],
districtList: [{name: "未选择市"}],
streetList: [{name: "未选择区"}],
province: undefined,
city: undefined,
district: undefined,
street: undefined,
})
} else {
this.setState({province: {label: e.label,}});
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: e.key,},
callback: (res) => {
if (res) {
this.setState({
cityList: res.data,
city: undefined,
district: undefined,
street: undefined,
});
}
}
});
}
};
//市变更
cityChange = (e) => {
if (e == undefined) {
this.setState({
districtList: [{name: "未选择市"}],
streetList: [{name: "未选择区"}],
city: undefined,
district: undefined,
street: undefined,
})
} else {
this.setState({city: {label: e.label,}});
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: e.key,},
callback: (res) => {
if (res) {
this.setState({
districtList: res.data,
district: undefined,
street: undefined,
});
}
}
});
}
};
//区变更
districtChange = (e) => {
if (e == undefined) {
this.setState({
streetList: [{name: "未选择区"}],
district: undefined,
street: undefined,
})
} else {
this.setState({district: {label: e.label,}});
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: e.key,},
callback: (res) => {
if (res) {
this.setState({
streetList: res.data,
street: undefined,
});
}
}
});
}
};
//批量删除
del() {
this.props.dispatch({
type: 'deviceModel/delDevice',
payload: this.state.delData,
callback: (res) => {
if (res) {
if (res.error_code == "0000") {
alert(res.error_msg);
this.getDevice();
} else if(res.error_code == "0001") {
alert(res.error_msg);
} else if(res.error_code == "0002"){
alert(res.error_msg);
} else if(res.error_code == "0008"){
alert(res.error_msg);
window.location.href = '/';
router.replace('/');
} else {
alert("删除失败!未知错误!");
}
}
}
});
};
//显示信息
info() {
const { used, newAdd, strList} = this.state;
const strSelect = strList.map((item) => (
<p>{item}</p>
));
Modal.info({
title: '批量导入结果',
content: (
<div>
<p>绑定<span style={{color:"lightgreen",fontSize:24}}>{newAdd}</span>台设备,
以下<span style={{color:"red",fontSize:24}}>{used}</span>台设备已被占用</p>
{strSelect}
</div>
),
onOk() {},
});
}
//初始化
componentDidMount() {
// this.provinceload(0);
this.getDevice();
}
/*--------------------------------------*/
//表格列名
columns = [
{
title: 'User Name',
dataIndex: 'owerName',
key: 'owerName',
},
{
title: 'Project',
dataIndex: 'owerPhone',
key: 'owerPhone',
},
{
title: 'Affiliated Unit',
dataIndex: 'buildingNumber',
key: 'buildingNumber',
},
{
title: 'User Status',
dataIndex: 'enable',
key: 'enable',
render: (text, record) => (
<span>{record.enable == '1' ? "注册" : "未注册"}</span>
),
/* render: (text, record) => (
<>
{record.map(enable => {
let color = 'green';
if (enable === '1') {
color = 'volcano';
}
if (enable === '0') {
color = 'geekblue';
}
return (
<Tag color={color} key={enable}>
{enable.toUpperCase()}
</Tag>
);
}
</>
),*/
},
/*{
title: '用户类型',
dataIndex: 'deviceRegisterTime',
key: 'deviceRegisterTime',
},
{
title: '状态',
dataIndex: 'deviceWorking',
key: 'deviceWorking',
render: (text, record) => (
<span>{record.deviceWorking == '1' ? "正常" :
(record.deviceWorking == '2' ? "离线" :
(record.deviceWorking == '3' ? "故障" : "未激活"))}</span>
)
},*/
{
title: 'Actions',
dataIndex: 'action',
key: 'action',
render: (text, record) => (
<span>
<Button style={{background: 'transparent', border: 0, color: '#1890FF'}}
onClick={() => this.details(record)}>Details</Button>
<Button style={{background: 'transparent', border: 0, color: '#1890FF'}}
onClick={() => this.edit(record)}>Edit</Button>
</span>
),
},
];
//行选择
rowSelection = {
onChange: (selectedRowKeys , selectedRows) => {
this.setState({
delData: selectedRows
});
},
};
//渲染
render() {
const {
data, total, statusList, provinceList, cityList, districtList,
province, city, district, status, name,newList,authorityList
} = this.state;
const uploadprops = {
// 这里我们只接受excel2007以后版本的文件,accept就是指定文件选择框的文件类型
accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
name: 'file',
headers: {
authorization: 'authorization-text',
},
showUploadList: false,
// 把excel的处理放在beforeUpload事件,否则要把文件上传到通过action指定的地址去后台处理
// 这里我们没有指定action地址,因为没有传到后台
beforeUpload: (file, fileList) => {
const rABS = true;
const f = fileList[0];
const reader = new FileReader();
reader.onload = e => {
let dataResult = e.target.result;
if (!rABS) dataResult = new Uint8Array(dataResult);
const workbook = XLSX.read(dataResult, {
type: rABS ? 'binary' : 'array',
});
// 假设我们的数据在第一个标签
const firstWorksheet = workbook.Sheets[workbook.SheetNames[0]];
// XLSX自带了一个工具把导入的数据转成json
const jsonArr = XLSX.utils.sheet_to_json(firstWorksheet, {header: 1});
// 通过自定义的方法处理Json,得到Excel原始数据传给后端,后端统一处理
const oldDeviceList = [];
for (let i = 0; i < jsonArr.length; i++) {
//去重
if (!oldDeviceList.includes(jsonArr[i][0]) && jsonArr[i][0] != '' && jsonArr[i][0] != null && jsonArr[i][0] != undefined) {
oldDeviceList.push(jsonArr[i][0]);
}
}
this.props.dispatch({
type: 'deviceModel/importUserDeviceListExcel',
payload: {
jsonArr: oldDeviceList,
userID: this.props.currentUser.userid,
},
callback: (res) => {
if (res) {
this.setState({
used: res.data.used,
newAdd: res.data.integer,
strList: res.data.strList,
},() => {
this.getDevice();
this.info();
});
}
}
});
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
return false;
},
};
/* const statusSelect = statusList.map((item) => (
<Select.Option value={item.value} label={item.label}>{item.label}</Select.Option>
));
const provinceSelect = provinceList.map((item) => (
<Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
));
const citySelect = cityList.map((item) => (
<Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
));
const districtSelect = districtList.map((item) => (
<Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
));*/
return (
<div className={styles.body}>
<div className={styles.inputBox}>
<Input className={styles.input}
placeholder="User Name"
value={name}
onChange={(e) => this.nameAndModelChange(e)}/>
{/*<Select className={styles.input}*/}
{/* placeholder="设备状态"*/}
{/* onChange={(e) => this.statusChange(e)}*/}
{/* allowClear={true}*/}
{/* value={status != undefined ? status: undefined}>{statusSelect}</Select>*/}
{/*<Select className={styles.downButton}*/}
{/* placeholder="省"*/}
{/* onChange={(e) => this.provinceChange(e)}*/}
{/* allowClear={true}*/}
{/* labelInValue={true}*/}
{/* value={province}>*/}
{/* {provinceSelect}*/}
{/*</Select>*/}
{/*<Select className={styles.downButton}*/}
{/* placeholder="市"*/}
{/* onChange={(e) => this.cityChange(e)}*/}
{/* allowClear={true}*/}
{/* labelInValue={true}*/}
{/* value={city}>*/}
{/* {citySelect}*/}
{/*</Select>*/}
{/*<Select className={styles.downButton}*/}
{/* placeholder="区"*/}
{/* onChange={(e) => this.districtChange(e)}*/}
{/* allowClear={true}*/}
{/* labelInValue={true}*/}
{/* value={district}>*/}
{/* {districtSelect}*/}
{/*</Select>*/}
</div>
<div>
<Button className={styles.button1} onClick={() => this.getDevice()}>Search</Button>
{/*<Button className={styles.button} onClick={() => this.reset()}>重置</Button>*/}
<Button className={styles.button2} onClick={() => this.edit(null)}>Create Notice</Button>
<Upload {...uploadprops}>
<Tooltip title="">
<Button className={styles.button2}
style={{width: 150}}>
<Icon type="upload"/>Batch Upload
</Button>
</Tooltip>
</Upload>
</div>
<div>
<Table
rowKey={record => record.deviceID}
className={styles.table}
rowSelection={this.rowSelection}
columns={this.columns}
dataSource={data}
size="small"
pagination={{showQuickJumper: true, pageSize: 10, total: total}}
/>
<Button className={styles.button3} onClick={() => this.showModal()}>Delete</Button>
</div>
<Modal
title="确认删除?"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<div style={{textAlign: "center"}}><p style={{fontSize: 18}}>删除信息将不可恢复</p></div>
</Modal>
</div>
);
}
}
export default connect(({user}: ConnectState) => ({
currentUser: user.currentUser,
}))(CommunityNotice);
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>CommunityNotice Create</div>
<button className={styles.item3}>返回</button>
</div>
{/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
<SelectOptions list={["A1 Project","B1 Project","C1 Project","D1 Project","E1 Project","F1 Project"
,"G1 Project","H1 Project","I1 Project","J1 Project","K1 Project","L1 Project","M1 Project","N1 Project"
,"O1 Project","P1 Project","Q1 Project","R1 Project","S1 Project","T1 Project","U1 Project","V1 Project"
,"W1 Project","X1 Project","Y1 Project","Z1 Project"]} onSubmit={printContent}/>
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>CommunityNotice Detail</div>
<button className={styles.item3}>返回</button>
</div>
{/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
<SelectOptions list={["A1 Project","B1 Project","C1 Project","D1 Project","E1 Project","F1 Project"
,"G1 Project","H1 Project","I1 Project","J1 Project","K1 Project","L1 Project","M1 Project","N1 Project"
,"O1 Project","P1 Project","Q1 Project","R1 Project","S1 Project","T1 Project","U1 Project","V1 Project"
,"W1 Project","X1 Project","Y1 Project","Z1 Project"]} onSubmit={printContent}/>
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>CommunityNotice Edit</div>
<button className={styles.item3}>返回</button>
</div>
{/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
<SelectOptions list={["A1 Project","B1 Project","C1 Project","D1 Project","E1 Project","F1 Project"
,"G1 Project","H1 Project","I1 Project","J1 Project","K1 Project","L1 Project","M1 Project","N1 Project"
,"O1 Project","P1 Project","Q1 Project","R1 Project","S1 Project","T1 Project","U1 Project","V1 Project"
,"W1 Project","X1 Project","Y1 Project","Z1 Project"]} onSubmit={printContent}/>
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 320px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
margin-top: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 206px;
}
.box2{
width: 100%;
height: 120px;
position: relative;
margin-bottom: 17px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 206px;
}
.box3{
padding-left: 206px;
margin-bottom: 28px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 206px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
@import '~antd/lib/style/themes/default.less';
.pre {
margin: 12px 0;
padding: 12px 20px;
background: @input-bg;
box-shadow: @card-shadow;
}
.input {
width:200px;
height:34px;
border:1px solid rgba(229, 229, 229, 1);
border-radius:5px;
margin: 0px 10px;
}
.input1 {
width:200px;
height:34px;
border:1px solid rgba(229, 229, 229, 1);
border-radius:5px;
margin: 0px 120px 10px;
}
.body {
background:rgba(255,255,255,1);
border:1px solid rgba(229, 229, 229, 1);
}
.inputBox {
width:1250px;
height:50px;
padding-top: 10px;
}
.downIcon {
position: relative;
left: 80px;
}
.downButton {
width:120px;
height:34px;
border:1px solid rgba(229, 229, 229, 1);
border-radius:5px;
margin: 0px 10px;
text-align: left;
}
.button11 {
width:82px;
height:34px;
background:rgba(234,244,255,1);
border:1px solid rgba(178, 215, 255, 1);
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(66,159,255,1);
line-height:34px;
margin:20px 20px 7px 10px;
float: left;
}
.button1 {
width:150px;
height:34px;
background:rgba(234,244,255,1);
border:1px solid rgba(178, 215, 255, 1);
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(66,159,255,1);
line-height:34px;
margin: 7px 10px;
float: right;
}
.button2 {
width:150px;
height:34px;
background:rgba(24,144,255,1);
border-radius:4px;
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:34px;
margin: 7px 10px;
float: left;
}
.button3 {
position: relative;
bottom: 52px;
width:72px;
height:32px;
background:rgba(255,255,255,1);
border:1px solid rgba(229, 229, 229, 1);
border-radius:4px;
margin: 10px 10px;
}
.table {
margin-right: 10px;
}
.detailsTitle {
display: inline-block;
font-size:18px;
font-family:PingFang SC;
font-weight:400;
color:rgba(73,73,73,1);
margin: 0px 30px;
}
.detailsContent {
display: inline-block;
font-size:15px;
width: 100px;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
margin: 10px 10px;
}
.detailsContent2 {
display: inline-block;
font-size:18px;
width: 200px;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.detailsBox {
border-top: 1px solid rgba(229, 229, 229, 1);
margin: 10px 30px;
}
.font1 {
.detailsContent {
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
margin: 5px 10px;
}
.backBox{
border: 1px solid rgb(0, 12, 23);
font-size: 2em;
margin: 50px ;
background: #1153ff;
}
.allCheckbox{
}
.subCheckbox{
}
}
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Housing Create</div>
<button className={styles.item3}>返回</button>
</div>
{/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Housing Detail</div>
<button className={styles.item3}>返回</button>
</div>
{/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Housing Edit</div>
<button className={styles.item3}>返回</button>
</div>
{/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
import React from 'react';
import {connect, routerRedux} from 'dva';
import {Table, Button, Input, Select, Modal, Tooltip, Upload, Icon, Checkbox, Row, Radio, Tag} from "antd";
import styles from './style.less';
import {ConnectState} from "@/models/connect";
/*import XLSX from "@/pages/account/xlsx.core.min";*/
import {router} from "umi";
import SelectOptions from '../../../components/SelectOptions/index';
class HousingList extends React.Component {
//构造
constructor(props) {
super(props);
this.state = {
data: [],
province: undefined,
city: undefined,
district: undefined,
street: undefined,
total: 1,
name: '',
model: '',
status: undefined,
statusList: [{label:"在线",value:"1"}, {label:"故障",value:"3"},{label:"未激活",value:"4"}],
provinceList: [],
cityList: [{name: "未选择省"}],
districtList: [{name: "未选择市"}],
streetList: [{name: "未选择区"}],
delData: [],
visible: false,
deviceStatus: '',
selectedRowKeys: [],
used: null,
newAdd: null,
strList: [],
newList:[],
authorityList:[
{
"children": [
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 5,
"name": "组织架构",
"parentid": 1,
"sort": 10,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 6,
"name": "员工管理",
"parentid": 1,
"sort": 20,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 11,
"name": "角色管理",
"parentid": 1,
"sort": 30,
"state": "",
"is_checked": false
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 17,
"name": "企业设置",
"parentid": 1,
"sort": 2,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 26,
"name": "员工管理",
"parentid": 1,
"sort": 1,
"state": "",
"is_checked": false
}
],
"hasChildren": true,
"is_admin": 1,
"menuid": 1,
"name": "企业",
"parentid": 0,
"sort": 20,
"state": "closed",
"is_checked": true
},
{
"children": [
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 12,
"name": "供应商订单",
"parentid": 4,
"sort": 10,
"state": "",
"is_checked": true
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 15,
"name": "供应商管理",
"parentid": 4,
"sort": 20,
"state": "",
"is_checked": false
},
{
"children": [],
"hasChildren": false,
"is_admin": 1,
"menuid": 16,
"name": "成为供应商",
"parentid": 4,
"sort": 30,
"state": "",
"is_checked": true
}
],
"hasChildren": true,
"is_admin": 1,
"menuid": 4,
"name": "供应商",
"parentid": 0,
"sort": 11,
"state": "closed",
"is_checked": true
}
],
}
}
/*----------------- 方法集 ------------------*/
//重置
reset = () => {
this.setState({
province: undefined,
city: undefined,
district: undefined,
street: undefined,
status: undefined,
name: '',
},() => {
this.getDevice();
});
};
//模态框相关
showModal = () => {
let flag = 0;
const nowUser = this.props.currentUser;
if(nowUser.permission!=null){
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="4"){
if(this.state.delData==null||this.state.delData.length<=0){
alert("未选中删除项!");
return;
}
flag = 1;
this.setState({
visible: true,
});
}
}
}else{
//alert("找不到用户权限记录!");
//return;;
}
if(flag == 0){
alert("缺少设备删除权限!");
}
};
handleOk = () => {
this.del();
this.setState({
visible: false,
});
};
handleCancel = () => {
this.setState({
visible: false,
});
};
//获取所有设备
getDevice = () => {
const params = {
// address: (this.state.province == undefined ? '' : this.state.province.label) +
// (this.state.city == undefined ? '' : '-' + this.state.city.label) +
// (this.state.district == undefined ? '' : '-' + this.state.district.label) +
// (this.state.street == undefined ? '' : '-' + this.state.street.label),
name: this.state.name,
model: this.state.model,
status: this.state.status,
id: this.props.currentUser.userid,
userPhone:"18813787835"
};
this.props.dispatch({
type: 'tUModel/getTosUser',
payload: params,
callback: (res) => {
if (res) {
this.setState({
data: res.rows,
total: res.total,
})
// if(res.error_code == "0000"){
// this.setState({
// data: res.data.rows,
// total: res.data.total,
// })
// }
if(res.error_code == "0001"){
alert(res.error_msg);
}else if(res.error_code == "0002"){
alert(res.error_msg);
}else if(res.error_code == "0008"){
alert(res.error_msg);
window.location.href = '/';
router.replace('/');
}
// else{
// alert("Tos查询出错!未知错误!");
// }
}
}
});
};
//跳转到编辑页面
edit = (params) => {
let flag = 0;
const nowUser = this.props.currentUser;
if(nowUser.permission!=null){
if(params==null){
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="3"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: '/CommunityManagement/housingList/Create',
query: params,
}))
}
}
}else{
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="2"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: '/CommunityManagement/housingList/Edit',
query: params,
}))
}
}
}
}else{
//alert("找不到用户权限记录!");
//return;;
}
if(flag == 0){
if(params==null){
alert("缺少设备添加权限!");
}else{
alert("缺少设备修改权限!");
}
}
};
//跳转到编辑页面
edit2 = (params) => {
let flag = 0;
const nowUser = this.props.currentUser;
if(nowUser.permission!=null){
if(params==null){
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="3"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: 'tosUser/edit',
query: params,
}))
}
}
}else{
for(let i=0;i<nowUser.permission.length;i++){
if(nowUser.permission[i]=="2"){
flag = 1;
this.props.dispatch(routerRedux.push({
pathname: '/tosUser/edit',
query: params,
}))
}
}
}
}else{
//alert("找不到用户权限记录!");
//return;;
}
if(flag == 0){
if(params==null){
alert("缺少设备添加权限!");
}else{
alert("缺少设备修改权限!");
}
}
};
//跳转到详情页面
details = (params) => {
this.props.dispatch(routerRedux.push({
pathname: '/CommunityManagement/housingList/Detail',
query: params,
}))
};
//设备状态变更
statusChange = (e) => {
this.setState({status: e == undefined ? undefined : e});
};
//设备名称和型号修改
nameAndModelChange = (e) => {
this.setState({name: e.target.value});
};
//加载省
provinceload = (code) => {
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: code,},
callback: (res) => {
if (res) {
this.setState({
provinceList: res.data,
});
}
}
});
};
//省变更
provinceChange = (e) => {
if (e == undefined) {
this.setState({
cityList: [{name: "未选择省"}],
districtList: [{name: "未选择市"}],
streetList: [{name: "未选择区"}],
province: undefined,
city: undefined,
district: undefined,
street: undefined,
})
} else {
this.setState({province: {label: e.label,}});
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: e.key,},
callback: (res) => {
if (res) {
this.setState({
cityList: res.data,
city: undefined,
district: undefined,
street: undefined,
});
}
}
});
}
};
//市变更
cityChange = (e) => {
if (e == undefined) {
this.setState({
districtList: [{name: "未选择市"}],
streetList: [{name: "未选择区"}],
city: undefined,
district: undefined,
street: undefined,
})
} else {
this.setState({city: {label: e.label,}});
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: e.key,},
callback: (res) => {
if (res) {
this.setState({
districtList: res.data,
district: undefined,
street: undefined,
});
}
}
});
}
};
//区变更
districtChange = (e) => {
if (e == undefined) {
this.setState({
streetList: [{name: "未选择区"}],
district: undefined,
street: undefined,
})
} else {
this.setState({district: {label: e.label,}});
this.props.dispatch({
type: 'deviceModel/getRegion',
payload: {code: e.key,},
callback: (res) => {
if (res) {
this.setState({
streetList: res.data,
street: undefined,
});
}
}
});
}
};
//批量删除
del() {
this.props.dispatch({
type: 'deviceModel/delDevice',
payload: this.state.delData,
callback: (res) => {
if (res) {
if (res.error_code == "0000") {
alert(res.error_msg);
this.getDevice();
} else if(res.error_code == "0001") {
alert(res.error_msg);
} else if(res.error_code == "0002"){
alert(res.error_msg);
} else if(res.error_code == "0008"){
alert(res.error_msg);
window.location.href = '/';
router.replace('/');
} else {
alert("删除失败!未知错误!");
}
}
}
});
};
//显示信息
info() {
const { used, newAdd, strList} = this.state;
const strSelect = strList.map((item) => (
<p>{item}</p>
));
Modal.info({
title: '批量导入结果',
content: (
<div>
<p>绑定<span style={{color:"lightgreen",fontSize:24}}>{newAdd}</span>台设备,
以下<span style={{color:"red",fontSize:24}}>{used}</span>台设备已被占用</p>
{strSelect}
</div>
),
onOk() {},
});
}
//初始化
componentDidMount() {
// this.provinceload(0);
this.getDevice();
}
/*--------------------------------------*/
//表格列名
columns = [
{
title: 'User Name',
dataIndex: 'owerName',
key: 'owerName',
},
{
title: 'Project',
dataIndex: 'owerPhone',
key: 'owerPhone',
},
{
title: 'Affiliated Unit',
dataIndex: 'buildingNumber',
key: 'buildingNumber',
},
{
title: 'User Status',
dataIndex: 'enable',
key: 'enable',
render: (text, record) => (
<span>{record.enable == '1' ? "注册" : "未注册"}</span>
),
/* render: (text, record) => (
<>
{record.map(enable => {
let color = 'green';
if (enable === '1') {
color = 'volcano';
}
if (enable === '0') {
color = 'geekblue';
}
return (
<Tag color={color} key={enable}>
{enable.toUpperCase()}
</Tag>
);
}
</>
),*/
},
/*{
title: '用户类型',
dataIndex: 'deviceRegisterTime',
key: 'deviceRegisterTime',
},
{
title: '状态',
dataIndex: 'deviceWorking',
key: 'deviceWorking',
render: (text, record) => (
<span>{record.deviceWorking == '1' ? "正常" :
(record.deviceWorking == '2' ? "离线" :
(record.deviceWorking == '3' ? "故障" : "未激活"))}</span>
)
},*/
{
title: 'Actions',
dataIndex: 'action',
key: 'action',
render: (text, record) => (
<span>
<Button style={{background: 'transparent', border: 0, color: '#1890FF'}}
onClick={() => this.details(record)}>Details</Button>
<Button style={{background: 'transparent', border: 0, color: '#1890FF'}}
onClick={() => this.edit(record)}>Edit</Button>
</span>
),
},
];
//行选择
rowSelection = {
onChange: (selectedRowKeys , selectedRows) => {
this.setState({
delData: selectedRows
});
},
};
//渲染
render() {
const printContent = (comment: any)=>{
console.log(comment)
}
const {
data, total, statusList, provinceList, cityList, districtList,
province, city, district, status, name,newList,authorityList
} = this.state;
const uploadprops = {
// 这里我们只接受excel2007以后版本的文件,accept就是指定文件选择框的文件类型
accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
name: 'file',
headers: {
authorization: 'authorization-text',
},
showUploadList: false,
// 把excel的处理放在beforeUpload事件,否则要把文件上传到通过action指定的地址去后台处理
// 这里我们没有指定action地址,因为没有传到后台
beforeUpload: (file, fileList) => {
const rABS = true;
const f = fileList[0];
const reader = new FileReader();
reader.onload = e => {
let dataResult = e.target.result;
if (!rABS) dataResult = new Uint8Array(dataResult);
const workbook = XLSX.read(dataResult, {
type: rABS ? 'binary' : 'array',
});
// 假设我们的数据在第一个标签
const firstWorksheet = workbook.Sheets[workbook.SheetNames[0]];
// XLSX自带了一个工具把导入的数据转成json
const jsonArr = XLSX.utils.sheet_to_json(firstWorksheet, {header: 1});
// 通过自定义的方法处理Json,得到Excel原始数据传给后端,后端统一处理
const oldDeviceList = [];
for (let i = 0; i < jsonArr.length; i++) {
//去重
if (!oldDeviceList.includes(jsonArr[i][0]) && jsonArr[i][0] != '' && jsonArr[i][0] != null && jsonArr[i][0] != undefined) {
oldDeviceList.push(jsonArr[i][0]);
}
}
this.props.dispatch({
type: 'deviceModel/importUserDeviceListExcel',
payload: {
jsonArr: oldDeviceList,
userID: this.props.currentUser.userid,
},
callback: (res) => {
if (res) {
this.setState({
used: res.data.used,
newAdd: res.data.integer,
strList: res.data.strList,
},() => {
this.getDevice();
this.info();
});
}
}
});
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
return false;
},
};
/* const statusSelect = statusList.map((item) => (
<Select.Option value={item.value} label={item.label}>{item.label}</Select.Option>
));
const provinceSelect = provinceList.map((item) => (
<Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
));
const citySelect = cityList.map((item) => (
<Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
));
const districtSelect = districtList.map((item) => (
<Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
));*/
return (
<div className={styles.body}>
<div className={styles.inputBox}>
<Input className={styles.input}
placeholder="User Name"
value={name}
onChange={(e) => this.nameAndModelChange(e)}/>
{/*<Select className={styles.input}*/}
{/* placeholder="设备状态"*/}
{/* onChange={(e) => this.statusChange(e)}*/}
{/* allowClear={true}*/}
{/* value={status != undefined ? status: undefined}>{statusSelect}</Select>*/}
{/*<Select className={styles.downButton}*/}
{/* placeholder="省"*/}
{/* onChange={(e) => this.provinceChange(e)}*/}
{/* allowClear={true}*/}
{/* labelInValue={true}*/}
{/* value={province}>*/}
{/* {provinceSelect}*/}
{/*</Select>*/}
{/*<Select className={styles.downButton}*/}
{/* placeholder="市"*/}
{/* onChange={(e) => this.cityChange(e)}*/}
{/* allowClear={true}*/}
{/* labelInValue={true}*/}
{/* value={city}>*/}
{/* {citySelect}*/}
{/*</Select>*/}
{/*<Select className={styles.downButton}*/}
{/* placeholder="区"*/}
{/* onChange={(e) => this.districtChange(e)}*/}
{/* allowClear={true}*/}
{/* labelInValue={true}*/}
{/* value={district}>*/}
{/* {districtSelect}*/}
{/*</Select>*/}
</div>
{/* <div>
{
authorityList.map((item,key) => {
return (
<CheckGroup
key={key}
checkId={key}
checkAll={newList[1]['checkAll'+1]}
checkAllId={newList[1]['checkAllId'+1]}
allListId={newList[1]['allListId'+1]}
checkedList={newList[1]['checkedList'+1]}
checkAllValue={item.menuid}
checkAllLable={item.name}
hasChildren={item.hasChildren}
children={item.children}
onChangeGroup={this.selectCheckbox}/>
)
})
}
</div>*/}
<div>
<h1>Hello World</h1>
<SelectOptions list={["A1 Project","B1 Project","C1 Project","D1 Project","E1 Project","F1 Project"
,"G1 Project","H1 Project","I1 Project","J1 Project","K1 Project","L1 Project","M1 Project","N1 Project"
,"O1 Project","P1 Project","Q1 Project","R1 Project","S1 Project","T1 Project","U1 Project","V1 Project"
,"W1 Project","X1 Project","Y1 Project","Z1 Project"]} onSubmit={printContent}/>
</div>
<div>
<Button className={styles.button1} onClick={() => this.getDevice()}>Search</Button>
{/*<Button className={styles.button} onClick={() => this.reset()}>重置</Button>*/}
<Button className={styles.button2} onClick={() => this.edit(null)}>Create cell</Button>
{/* <Upload {...uploadprops}>
<Tooltip title="">
<Button className={styles.button2}
style={{width: 150}}>
<Icon type="upload"/>Batch Upload
</Button>
</Tooltip>
</Upload>*/}
</div>
<div>
<Table
rowKey={record => record.deviceID}
className={styles.table}
rowSelection={this.rowSelection}
columns={this.columns}
dataSource={data}
size="small"
pagination={{showQuickJumper: true, pageSize: 10, total: total}}
/>
<Button className={styles.button3} onClick={() => this.showModal()}>Delete</Button>
</div>
<Modal
title="确认删除?"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<div style={{textAlign: "center"}}><p style={{fontSize: 18}}>删除信息将不可恢复</p></div>
</Modal>
</div>
);
}
}
export default connect(({user}: ConnectState) => ({
currentUser: user.currentUser,
}))(HousingList);
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 320px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
margin-top: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 206px;
}
.box2{
width: 100%;
height: 120px;
position: relative;
margin-bottom: 17px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 206px;
}
.box3{
padding-left: 206px;
margin-bottom: 28px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 206px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
@import '~antd/lib/style/themes/default.less';
.pre {
margin: 12px 0;
padding: 12px 20px;
background: @input-bg;
box-shadow: @card-shadow;
}
.input {
width:200px;
height:34px;
border:1px solid rgba(229, 229, 229, 1);
border-radius:5px;
margin: 0px 10px;
}
.input1 {
width:200px;
height:34px;
border:1px solid rgba(229, 229, 229, 1);
border-radius:5px;
margin: 0px 120px 10px;
}
.body {
background:rgba(255,255,255,1);
border:1px solid rgba(229, 229, 229, 1);
}
.inputBox {
width:1250px;
height:50px;
padding-top: 10px;
}
.downIcon {
position: relative;
left: 80px;
}
.downButton {
width:120px;
height:34px;
border:1px solid rgba(229, 229, 229, 1);
border-radius:5px;
margin: 0px 10px;
text-align: left;
}
.button11 {
width:82px;
height:34px;
background:rgba(234,244,255,1);
border:1px solid rgba(178, 215, 255, 1);
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(66,159,255,1);
line-height:34px;
margin:20px 20px 7px 10px;
float: left;
}
.button1 {
width:150px;
height:34px;
background:rgba(234,244,255,1);
border:1px solid rgba(178, 215, 255, 1);
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(66,159,255,1);
line-height:34px;
margin: 7px 10px;
float: right;
}
.button2 {
width:150px;
height:34px;
background:rgba(24,144,255,1);
border-radius:4px;
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:34px;
margin: 7px 10px;
float: left;
}
.button3 {
position: relative;
bottom: 52px;
width:72px;
height:32px;
background:rgba(255,255,255,1);
border:1px solid rgba(229, 229, 229, 1);
border-radius:4px;
margin: 10px 10px;
}
.table {
margin-right: 10px;
}
.detailsTitle {
display: inline-block;
font-size:18px;
font-family:PingFang SC;
font-weight:400;
color:rgba(73,73,73,1);
margin: 0px 30px;
}
.detailsContent {
display: inline-block;
font-size:15px;
width: 100px;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
margin: 10px 10px;
}
.detailsContent2 {
display: inline-block;
font-size:18px;
width: 200px;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.detailsBox {
border-top: 1px solid rgba(229, 229, 229, 1);
margin: 10px 30px;
}
.font1 {
.detailsContent {
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
margin: 5px 10px;
}
.backBox{
border: 1px solid rgb(0, 12, 23);
font-size: 2em;
margin: 50px ;
background: #1153ff;
}
.allCheckbox{
}
.subCheckbox{
}
}
import request from '@/utils/request';
export interface LoginParamsType {
userName: string;
password: string;
mobile: string;
captcha: string;
}
export async function fakeAccountLogin(params: LoginParamsType) {
return request('/api/tos/user/login/', {
method: 'POST',
data: params,
});
}
export async function logoutAccount() {
return request('/api/users/logout/', {
method: 'POST',
});
}
export async function getFakeCaptcha(mobile: string) {
return request(`/api/login/captcha?mobile=${mobile}`);
}
import request from '@/utils/request';
export interface LoginParamsType {
userName: string;
password: string;
mobile: string;
captcha: string;
}
export async function fakeAccountLogin(params: LoginParamsType) {
return request('/api/tos/user/login/', {
method: 'POST',
data: params,
});
}
export async function logoutAccount() {
return request('/api/users/logout/', {
method: 'POST',
});
}
export async function getFakeCaptcha(mobile: string) {
return request(`/api/login/captcha?mobile=${mobile}`);
}
import request from '@/utils/request';
export async function getRegion(params) {
return request('/api/device/getRegion', {
method: 'POST',
data: params,
});
}
export async function getRegionList(params) {
return request('/api/device/getRegionList', {
method: 'POST',
data: params,
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment