152 changed files with 299 additions and 9110 deletions
@ -1,122 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
async function getPatrolPlan(ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
const { limit, page } = ctx.query; |
|||
let options = { |
|||
include: [{ |
|||
required: true, |
|||
model: models.User, |
|||
attributes: ['id', 'name'], |
|||
include: [{ |
|||
required: true, |
|||
model: models.Department, |
|||
attributes: ['id', 'name'], |
|||
}] |
|||
}, { |
|||
required: true, |
|||
model: models.Project, |
|||
attributes: ['id', 'name'], |
|||
}] |
|||
}; |
|||
if (limit) { |
|||
options.limit = Number(limit); |
|||
} |
|||
if (page && limit) { |
|||
options.offset = Number(page) * Number(limit); |
|||
} |
|||
let res = await models.PatrolPlan.findAndCountAll(options); |
|||
ctx.status = 200; |
|||
ctx.body = res; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": "获取巡检计划失败" |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function createPatrolPlan(ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
const data = ctx.request.body; |
|||
const { name, way, structureId, startTime, endTime, frequency, points, userId } = data; |
|||
|
|||
let plan = { name, way, structureId, startTime, endTime, frequency, points, userId }; |
|||
|
|||
await models.PatrolPlan.create(plan); |
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": '新增巡检计划失败' |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function updatePatrolPlan(ctx, next) { |
|||
try { |
|||
let errMsg = '修改巡检计划失败'; |
|||
const models = ctx.fs.dc.models; |
|||
const data = ctx.request.body; |
|||
const { name, way, structureId, startTime, endTime, frequency, points, userId } = data; |
|||
|
|||
let plan = { name, way, structureId, startTime, endTime, frequency, points, userId }; |
|||
|
|||
if (data && data.id) { |
|||
await models.PatrolPlan.update(plan, { |
|||
where: { id: data.id } |
|||
}) |
|||
} else { |
|||
errMsg = '请传入巡检计划id'; |
|||
throw errMsg; |
|||
} |
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": errMsg |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function delPatrolPlan(ctx, next) { |
|||
try { |
|||
let errMsg = '删除巡检计划失败'; |
|||
|
|||
const models = ctx.fs.dc.models; |
|||
const { id } = ctx.params; |
|||
|
|||
const record = await models.PatrolRecord.findOne({ |
|||
where: { patrolPlanId: id } |
|||
}); |
|||
|
|||
if (record) { |
|||
errMsg = '不能删除有巡检记录的计划'; |
|||
throw errMsg; |
|||
} |
|||
|
|||
await models.PatrolPlan.destroy({ |
|||
where: { id } |
|||
}) |
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { message: error } |
|||
} |
|||
} |
|||
|
|||
module.exports = { |
|||
getPatrolPlan, |
|||
createPatrolPlan, |
|||
updatePatrolPlan, |
|||
delPatrolPlan, |
|||
} |
|||
@ -1,113 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
async function findPatrolRecord(ctx, next) { |
|||
let rslt = []; |
|||
let error = { name: 'FindError', message: '获取巡检记录失败' }; |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
const { startTime, endTime, alarm, patrolPlanId, pointId } = ctx.params; |
|||
// patrolPlanId传all查所有
|
|||
if (patrolPlanId == 'all') { |
|||
/* 如果有startTime && endTime，查询所有符合条件的数据 */ |
|||
if (startTime !== 'null' && endTime !== 'null') { |
|||
if (pointId !== 'null') { |
|||
if (alarm == 'null') { |
|||
rslt = await models.PatrolRecord.findAll({ |
|||
where: { inspectionTime: { $between: [startTime, endTime] }, pointId: { $in: pointId.split(',') } }, |
|||
}); |
|||
} else { |
|||
rslt = await models.PatrolRecord.findAll({ |
|||
where: { alarm, inspectionTime: { $between: [startTime, endTime] }, pointId: { $in: pointId.split(',') } }, |
|||
}); |
|||
} |
|||
} else { |
|||
if (alarm == 'null') { |
|||
rslt = await models.PatrolRecord.findAll({ |
|||
where: { inspectionTime: { $between: [startTime, endTime] } }, |
|||
}); |
|||
} else { |
|||
rslt = await models.PatrolRecord.findAll({ |
|||
where: { alarm, inspectionTime: { $between: [startTime, endTime] } }, |
|||
}); |
|||
} |
|||
} |
|||
} else { |
|||
/* 如果没有startTime && endTime，查询每个点位最新一条符合条件的数据 */ |
|||
let a = [] |
|||
if (pointId !== 'null') { |
|||
a = await models.PatrolRecord.findAll({ |
|||
where: { pointId: { $in: pointId.split(',') } }, |
|||
}); |
|||
} |
|||
rslt = pointId.split(',').map(i => { |
|||
return a.filter(t => t.pointId == i).sort((a, b) => b.id - a.id)[0] || null |
|||
}) |
|||
} |
|||
} else { |
|||
if (startTime !== 'null' && endTime !== 'null') { |
|||
if (pointId !== 'null') { |
|||
rslt = await models.PatrolRecord.findAll({ |
|||
where: { patrolPlanId: { $in: patrolPlanId.split(',') }, alarm, inspectionTime: { $between: [startTime, endTime] }, pointId: { $in: pointId.split(',') } }, |
|||
}); |
|||
} else { |
|||
rslt = await models.PatrolRecord.findAll({ |
|||
where: { patrolPlanId: { $in: patrolPlanId.split(',') }, alarm, inspectionTime: { $between: [startTime, endTime] } }, |
|||
}); |
|||
} |
|||
|
|||
} else { |
|||
let a = [] |
|||
/* 如果没有startTime && endTime，查询每个点位最新一条符合条件的数据 */ |
|||
if (pointId !== 'null') { |
|||
a = await models.PatrolRecord.findAll({ |
|||
where: { patrolPlanId: { $in: patrolPlanId.split(',') }, pointId: { $in: pointId.split(',') } }, |
|||
}); |
|||
} else { |
|||
a = await models.PatrolRecord.findAll({ |
|||
where: { patrolPlanId: { $in: patrolPlanId.split(',') } }, |
|||
}); |
|||
} |
|||
|
|||
rslt = pointId.split(',').map(i => { |
|||
return a.filter(t => t.pointId == i).sort((a, b) => b.id - a.id)[0] || null |
|||
}) |
|||
} |
|||
} |
|||
|
|||
ctx.status = 200; |
|||
ctx.body = rslt; |
|||
error = null |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": "获取巡检记录失败" |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function addPatrolRecord(ctx, next) { |
|||
let error = { name: 'addError', message: '新增巡检记录失败' }; |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
const data = ctx.request.body; |
|||
let { patrolPlanId, lastInspectionTime, inspectionTime, points, alarm, pointId } = data |
|||
let record = { patrolPlanId, lastInspectionTime, inspectionTime, points, alarm, pointId } |
|||
|
|||
await models.PatrolRecord.create(record); |
|||
|
|||
ctx.status = 204; |
|||
error = null |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": '新增巡检计划失败' |
|||
} |
|||
} |
|||
} |
|||
|
|||
module.exports = { |
|||
findPatrolRecord, |
|||
addPatrolRecord, |
|||
} |
|||
@ -1,431 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
|
|||
async function projectList (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const { limit, page, name, justStructure } = ctx.query; |
|||
|
|||
let options = { |
|||
where: { |
|||
|
|||
}, |
|||
// include: [{
|
|||
// as: 'company',
|
|||
// model: models.Company,
|
|||
// attributes: ['id', 'name'],
|
|||
// },],
|
|||
} |
|||
if (limit) { |
|||
options.limit = Number(limit) |
|||
} |
|||
if (page && limit) { |
|||
options.offset = Number(page) * Number(limit) |
|||
} |
|||
if (name) { |
|||
options.where.name = { $like: `%${name}%` } |
|||
} |
|||
|
|||
let res = [] |
|||
if (justStructure) { |
|||
res = await models.Project.findAndCountAll({ |
|||
attributes: ['id', 'name'], |
|||
}) |
|||
} else { |
|||
res = await models.Project.findAndCountAll(options) |
|||
} |
|||
|
|||
ctx.status = 200; |
|||
ctx.body = res |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": "获取结构列表失败" |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
async function postAddProject (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const data = ctx.request.body; |
|||
const { img, longitude, latitude, name, type, describe } = data |
|||
|
|||
let errMsg = data.id ? '结构物编辑失败' : '结构物新增失败' |
|||
let project = { img, longitude, latitude, name, type, describe, userId: userInfo.id } |
|||
|
|||
const alikeProject = await models.Project.findOne({ |
|||
where: { |
|||
name: name, |
|||
} |
|||
}) |
|||
|
|||
if ((!data.id && alikeProject) || (alikeProject && alikeProject.id !== data.id)) { |
|||
errMsg = '已有相同结构物名称' |
|||
throw errMsg |
|||
} |
|||
if (data && data.id) { |
|||
await models.Project.update(project, { |
|||
where: { |
|||
id: data.id |
|||
} |
|||
}) |
|||
} else { |
|||
await models.Project.create(project) |
|||
} |
|||
|
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`) |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": errMsg |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function delProject (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const { id } = ctx.params |
|||
|
|||
//删除结构物
|
|||
await models.Project.destroy({ |
|||
where: { |
|||
id, |
|||
} |
|||
}) |
|||
const pointId = [] |
|||
const pointLIst = await models.Point.findAll({ |
|||
where: { |
|||
projectId: id, |
|||
}, |
|||
attributes: ['id'], |
|||
}) |
|||
pointLIst.map(v => pointId.push(v.id)) |
|||
|
|||
//点位
|
|||
await models.Point.destroy({ |
|||
where: { |
|||
projectId: id |
|||
} |
|||
}) |
|||
|
|||
|
|||
//巡检计划
|
|||
const planId = [] |
|||
const planLIst = await models.PatrolPlan.findAll({ |
|||
where: { |
|||
structureId: id, |
|||
}, |
|||
attributes: ['id'], |
|||
}) |
|||
planLIst.map(v => planId.push(v.id)) |
|||
await models.PatrolPlan.destroy({ |
|||
where: { |
|||
structureId: id |
|||
} |
|||
}) |
|||
|
|||
//巡检记录
|
|||
await models.PatrolRecord.destroy({ |
|||
where: { |
|||
pointId: { $in: pointId }, |
|||
patrolPlanId: { $in: planId } |
|||
} |
|||
}) |
|||
|
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`) |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": '删除结构物失败' |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function addPosition (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const data = ctx.request.body; |
|||
const { longitude, latitude, name, describe, qrCode, projectId, } = data |
|||
|
|||
let errMsg = data.id ? '点位编辑失败' : '点位新增失败' |
|||
let pointData = { longitude, latitude, name, describe, qrCode, projectId } |
|||
|
|||
const alikeProject = await models.Point.findOne({ |
|||
where: { |
|||
id: data.id, |
|||
} |
|||
}) |
|||
|
|||
if (data && data.id) { |
|||
if (qrCode) { |
|||
await models.Point.update({ ...alikeProject, qrCode }, { |
|||
where: { |
|||
id: data.id, |
|||
} |
|||
}) |
|||
} else { |
|||
await models.Point.update({ pointData }, { |
|||
where: { |
|||
id: data.id, |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} else { |
|||
await models.Point.create(pointData) |
|||
} |
|||
|
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`) |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": errMsg |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function position (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const { limit, page, projectId } = ctx.query; |
|||
|
|||
let options = { |
|||
where: { |
|||
id: projectId |
|||
}, |
|||
include: [{ |
|||
model: models.Point, |
|||
},], |
|||
} |
|||
if (limit) { |
|||
options.limit = Number(limit) |
|||
} |
|||
if (page && limit) { |
|||
options.offset = Number(page) * Number(limit) |
|||
} |
|||
|
|||
let res = await models.Project.findAndCountAll(options) |
|||
ctx.status = 200; |
|||
ctx.body = res |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": "获取结构列表失败" |
|||
} |
|||
} |
|||
} |
|||
|
|||
async function delPosition (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const { id } = ctx.params |
|||
|
|||
const pointOne = await models.Point.findOne({ |
|||
where: { |
|||
id |
|||
}, |
|||
attributes: ['projectId'], |
|||
}) |
|||
if (pointOne) { |
|||
const patrolPlanLIst = await models.PatrolPlan.findAll({ |
|||
where: { |
|||
structureId: pointOne.projectId, |
|||
}, |
|||
}) |
|||
|
|||
for (var u of patrolPlanLIst) { |
|||
const points = [] |
|||
u.points.map(r => { |
|||
if (r.id == id) { |
|||
} else { |
|||
points.push(r) |
|||
} |
|||
}) |
|||
u.points = points |
|||
|
|||
await models.PatrolRecord.destroy({ |
|||
where: { |
|||
pointId: id, |
|||
patrolPlanId: u.id |
|||
} |
|||
}) |
|||
|
|||
if (points.length > 0) { |
|||
let data = { |
|||
name: u.dataValues.name, |
|||
way: u.dataValues.way, |
|||
structureId: u.dataValues.structureId, |
|||
startTime: u.dataValues.startTime, |
|||
endTime: u.dataValues.endTime, |
|||
frequency: u.dataValues.frequency, |
|||
points: u.dataValues.points, |
|||
userId: u.dataValues.userId, |
|||
patrolCount: u.dataValues.patrolCount |
|||
} |
|||
await models.PatrolPlan.update(data,{ |
|||
where: { |
|||
id: u.dataValues.id |
|||
} |
|||
}) |
|||
} else { |
|||
await models.PatrolPlan.destroy({ |
|||
where: { |
|||
id: u.id |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
await models.Point.destroy({ |
|||
where: { |
|||
id, |
|||
} |
|||
}) |
|||
|
|||
|
|||
ctx.status = 204; |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`) |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": '删除点位失败' |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
async function qrCodeShow (ctx, next) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
let userInfo = ctx.fs.api.userInfo; |
|||
const { projectId, name } = ctx.query; |
|||
|
|||
let options = { |
|||
where: { |
|||
qrCode: { $ne: null } |
|||
}, |
|||
} |
|||
if (projectId) { |
|||
options.where.projectId = projectId |
|||
} |
|||
if (name) { |
|||
options.where.name = { $like: `%${name}%` } |
|||
} |
|||
|
|||
let res = await models.Point.findAndCountAll(options) |
|||
ctx.status = 200; |
|||
ctx.body = res |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
"message": "获取二维码列表失败" |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
async function q (ctx) { |
|||
// let error = {
|
|||
// name: 'FindError',
|
|||
// message: "获取失败!"
|
|||
// };
|
|||
// const models = ctx.fs.dc.models;
|
|||
// const { devices } = ctx.request.body
|
|||
// const attachment = ctx.app.fs.qn_attachment
|
|||
|
|||
// try {
|
|||
|
|||
// if (!Array.isArray(devices)) {
|
|||
// error = { name: 'paramsError', message: '参数不能为空' };
|
|||
// ctx.throw(400);
|
|||
// }
|
|||
// const devicesArr = await models.Device.findAll({
|
|||
// attributes: ['deviceNo', 'periodCode', 'qrSrc'],
|
|||
// where: { deviceNo: { $in: devices } }
|
|||
// })
|
|||
|
|||
// let ids = [], idsMap = {}, qnImages = []
|
|||
// devicesArr.forEach(d => {
|
|||
// const qrSrc = d.qrSrc
|
|||
// const deviceNo = d.deviceNo
|
|||
// const periodCode = d.periodCode
|
|||
// if (qrSrc) {
|
|||
// if (/^\d+$/.test(qrSrc)) {
|
|||
// ids.push(qrSrc)
|
|||
// idsMap[qrSrc] = { deviceNo, periodCode }
|
|||
// } else {
|
|||
// let domain = globalCache.getQnDomain()
|
|||
// let imgUrl = `${domain}/${qrSrc}`
|
|||
// qnImages.push({ src: imgUrl, deviceNo, periodCode })
|
|||
// }
|
|||
// }
|
|||
// })
|
|||
|
|||
// const docs = await models.QrcodePng.findAll({
|
|||
// where: {
|
|||
// id: { $in: ids }
|
|||
// },
|
|||
// attributes: ["id", "base64"]
|
|||
// })
|
|||
|
|||
// let pics = []
|
|||
|
|||
// if (docs.length > 0) {
|
|||
// pics = docs.map((d) => {
|
|||
// let { deviceNo, periodCode } = idsMap[d.id] || {}
|
|||
// let base64 = d.base64.replace(/^data:image\/\w+;base64,/, '')
|
|||
// return {
|
|||
// url: Buffer.from(base64, 'base64'),
|
|||
// name: deviceNo,
|
|||
// periodCode
|
|||
// }
|
|||
// })
|
|||
// }
|
|||
|
|||
// if (qnImages.length > 0) {
|
|||
// let qns = await downloadImgsAsBase64(qnImages)
|
|||
// pics = pics.concat(qns)
|
|||
// }
|
|||
|
|||
// let fileUrl = await downLoadImageBiz(pics, { zipName: "二维码_" + moment().format("YYYY-MM-DD-HH-mm-ss"), attachment })
|
|||
// add2CleanCache(fileUrl, attachment)
|
|||
// ctx.status = 200
|
|||
// ctx.body = { fileUrl }
|
|||
|
|||
// } catch (err) {
|
|||
// ctx.fs.logger.error(err);
|
|||
// ctx.status = 400;
|
|||
// ctx.body = error;
|
|||
// }
|
|||
} |
|||
|
|||
module.exports = { |
|||
projectList, |
|||
postAddProject, |
|||
delProject, |
|||
addPosition, |
|||
position, |
|||
delPosition, |
|||
qrCodeShow, |
|||
q |
|||
} |
|||
@ -1,17 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
const patrolPlan = require('../../controllers/patrolPlan/patrolPlan'); |
|||
|
|||
module.exports = function (app, router, opts) { |
|||
app.fs.api.logAttr['GET/patrolPlan'] = { content: '获取巡检计划', visible: false }; |
|||
router.get('/patrolPlan', patrolPlan.getPatrolPlan); |
|||
|
|||
app.fs.api.logAttr['POST/patrolPlan'] = { content: '新增巡检计划', visible: true }; |
|||
router.post('/patrolPlan', patrolPlan.createPatrolPlan); |
|||
|
|||
app.fs.api.logAttr['PUT/patrolPlan'] = { content: '修改巡检计划', visible: true }; |
|||
router.put('/patrolPlan', patrolPlan.updatePatrolPlan); |
|||
|
|||
app.fs.api.logAttr['DELETE/patrolPlan/:id'] = { content: '删除巡检计划', visible: true }; |
|||
router.del('/patrolPlan/:id', patrolPlan.delPatrolPlan); |
|||
}; |
|||
@ -1,12 +0,0 @@ |
|||
'use strict'; |
|||
const patrolRecord = require('../../controllers/patrolRecord/patrolRecord'); |
|||
|
|||
module.exports = function (app, router, opts) { |
|||
app.fs.api.logAttr['GET/patrolRecord/:patrolPlanId/:startTime/:endTime/:alarm/:pointId'] = { content: '获取巡检记录', visible: true }; |
|||
// web端、小程序端查数据:patrolPlanId为all，不需要传pointId
|
|||
// 小程序端查点位最新一条数据：startTime、endTime、alarm不传
|
|||
router.get('/patrolRecord/:patrolPlanId/:startTime/:endTime/:alarm/:pointId', patrolRecord.findPatrolRecord); |
|||
|
|||
app.fs.api.logAttr['POST/patrolRecord/add'] = { content: '新增巡检记录', visible: true } |
|||
router.post('/patrolRecord/add', patrolRecord.addPatrolRecord); |
|||
}; |
|||
@ -1,31 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
const projectSituation = require('../../controllers/projectRegime/projectSituation'); |
|||
|
|||
module.exports = function (app, router, opts) { |
|||
|
|||
app.fs.api.logAttr['GET/projectList'] = { content: '获取结构物列表', visible: false }; |
|||
router.get('/projectList', projectSituation.projectList); |
|||
|
|||
app.fs.api.logAttr['POST/addProject'] = { content: '新增修改结构物', visible: false }; |
|||
router.post('/addProject', projectSituation.postAddProject); |
|||
|
|||
app.fs.api.logAttr['DEL/delProject/:id'] = { content: '删除结构物', visible: false }; |
|||
router.del('/delProject/:id', projectSituation.delProject); |
|||
|
|||
app.fs.api.logAttr['POST/position'] = { content: '新增修改点位', visible: false }; |
|||
router.post('/position', projectSituation.addPosition); |
|||
|
|||
app.fs.api.logAttr['GET/position'] = { content: '获取点位列表', visible: false }; |
|||
router.get('/position', projectSituation.position); |
|||
|
|||
app.fs.api.logAttr['DEL/delPosition/:id'] = { content: '删除点位', visible: false }; |
|||
router.del('/delPosition/:id', projectSituation.delPosition); |
|||
|
|||
app.fs.api.logAttr['GET/qrCodeShow'] = { content: '获取二维码列表', visible: false }; |
|||
router.get('/qrCodeShow', projectSituation.qrCodeShow); |
|||
|
|||
app.fs.api.logAttr['GET/q'] = { content: '获取二维码列表', visible: false }; |
|||
router.get('/q', projectSituation.q); |
|||
|
|||
} |
|||
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 725 B |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 169 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 524 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 873 B |
|
Before Width: | Height: | Size: 206 KiB |
|
Before Width: | Height: | Size: 150 B |
|
Before Width: | Height: | Size: 950 B |
|
Before Width: | Height: | Size: 873 B |
|
Before Width: | Height: | Size: 815 B |
|
Before Width: | Height: | Size: 193 B |
|
Before Width: | Height: | Size: 147 B |
|
Before Width: | Height: | Size: 999 B |
|
Before Width: | Height: | Size: 648 B |
|
Before Width: | Height: | Size: 932 B |
|
Before Width: | Height: | Size: 646 KiB |
|
Before Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 23 KiB |
@ -1,316 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import React, { Component } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Upload, message, Modal, Card, Button } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons'; |
|||
|
|||
class Uploads extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.ApiRoot = localStorage.getItem('tyApiRoot') |
|||
this.state = { |
|||
fileUploading: false, |
|||
fileList: [], |
|||
curPreviewPic: '', |
|||
delPicIng: false, |
|||
removeFilesList: [] |
|||
}; |
|||
} |
|||
|
|||
dealName = (uploaded) => { |
|||
let realName = uploaded.split('/')[2] |
|||
let x1 = realName.split('.') |
|||
let x2 = x1[0].split('_') |
|||
let showName = `${x2[0]}.${x1[1]}` |
|||
return showName |
|||
} |
|||
|
|||
// setFileList = (value) => {
|
|||
// let defaultFileList = [];
|
|||
// defaultFileList = value.map((u, index) => {
|
|||
// let fileUrl = `${this.ApiRoot}/${u.url}`;
|
|||
// return {
|
|||
// uid: -index - 1,
|
|||
// name: this.dealName(u.url),
|
|||
// status: 'done',
|
|||
// storageUrl: u.url,
|
|||
// url: fileUrl
|
|||
// };
|
|||
// });
|
|||
// onChange(defaultFileList)
|
|||
// this.setState({
|
|||
// fileList: defaultFileList
|
|||
// });
|
|||
// };
|
|||
|
|||
componentDidMount() { |
|||
const { value } = this.props; |
|||
if (value) { |
|||
this.setState(value); |
|||
} |
|||
} |
|||
|
|||
componentWillReceiveProps(np) { |
|||
const { dispatch, value: thisEditData, onChange } = this.props; |
|||
const { value: nextEditData } = np; |
|||
|
|||
const setFileList = () => { |
|||
let defaultFileList = []; |
|||
defaultFileList = nextEditData.map((u, index) => { |
|||
let fileUrl = `${this.ApiRoot}/${u.storageUrl}`; |
|||
return { |
|||
uid: -index - 1, |
|||
name: this.dealName(u.storageUrl), |
|||
status: 'done', |
|||
storageUrl: u.storageUrl, |
|||
url: fileUrl, |
|||
size: u.size || -1 |
|||
}; |
|||
}); |
|||
this.setState({ |
|||
fileList: defaultFileList |
|||
}); |
|||
}; |
|||
|
|||
if (nextEditData && nextEditData.length) { |
|||
if (!thisEditData || !this.state.fileList.length) { |
|||
setFileList(); |
|||
} else if (nextEditData.length != thisEditData.length) { |
|||
setFileList(); |
|||
} else { |
|||
let repeat = true; |
|||
for (let i = 0; i < thisEditData.length; i++) { |
|||
if (thisEditData[i] != nextEditData[i]) { |
|||
repeat = false; |
|||
break; |
|||
} |
|||
} |
|||
if (!repeat) { |
|||
setFileList(); |
|||
} |
|||
} |
|||
} |
|||
// else{
|
|||
// this.setState({
|
|||
// fileList:[],
|
|||
// })
|
|||
// }
|
|||
} |
|||
|
|||
render() { |
|||
const UploadPath = { |
|||
project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'png', 'jpg', 'rar', 'zip'], |
|||
report: ['doc', 'docx', 'xls', 'xlsx', 'pdf'], |
|||
data: ['txt', 'xls', 'xlsx'], |
|||
image: ['png', 'jpg', 'svg', 'jpeg'], |
|||
three: ['js'], |
|||
video: ['mp4'] |
|||
}; |
|||
/** |
|||
* uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准；默认 project； |
|||
* disabled 【boolean】 上传是否可用 |
|||
* maxFilesNum 【number】 最大上传数量 |
|||
* fileTypes 【array[string]】 可允许上传的文件类型； |
|||
* maxFileSize 【number】 单个文件最大大小 M |
|||
* listType 【antd】 upload 组件的属性 |
|||
* onChange 【function】 文件数量变化时候回调 返回文件 |
|||
* value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] |
|||
* onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } |
|||
*/ |
|||
const { |
|||
uploadType, |
|||
disabled, |
|||
maxFilesNum, |
|||
fileTypes, |
|||
maxFileSize, |
|||
listType, |
|||
onChange, |
|||
value, |
|||
showUploadList, |
|||
onStateChange |
|||
} = this.props; |
|||
const { fileList, curPreviewPic, delPicIng, removeFilesList } = this.state; |
|||
const that = this; |
|||
let uploadType_ = uploadType || 'project'; |
|||
let maxFilesNum_ = maxFilesNum || 1; |
|||
let defaultFileTypes = fileTypes || UploadPath[uploadType_]; |
|||
const uploadProps = { |
|||
name: 'checkFile_', |
|||
multiple: false, |
|||
showUploadList: showUploadList || true, |
|||
action: `${this.ApiRoot}/attachments/${uploadType_}`, |
|||
listType: listType || 'text', |
|||
disabled: disabled, |
|||
beforeUpload: (file) => { |
|||
if (fileList.length >= maxFilesNum_) { |
|||
message.warning(`最多选择${maxFilesNum_}个文件上传`); |
|||
return false; |
|||
} |
|||
if (file.name.length > 60) { |
|||
message.warning(`文件名过长(大于60字符)，请修改后上传`); |
|||
return false; |
|||
} |
|||
const extNames = file.name.split('.'); |
|||
var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/; |
|||
if (!reg.exec(file.name)) { |
|||
message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符，请修改后上传`); |
|||
return false; |
|||
} |
|||
let isDAE = false; |
|||
if (extNames.length > 0) { |
|||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
|||
isDAE = defaultFileTypes.some((f) => f == fileType); |
|||
} |
|||
if (!isDAE) { |
|||
message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); |
|||
return false; |
|||
} |
|||
const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); |
|||
if (!isLt) { |
|||
message.error(`文件必须小于${maxFileSize || 3}MB!`); |
|||
return false; |
|||
} |
|||
this.setState({ |
|||
fileUploading: true |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: true }); |
|||
} |
|||
}, |
|||
onChange(info) { |
|||
const status = info.file.status; |
|||
if (status === 'uploading') { |
|||
that.setState({ |
|||
fileList: info.fileList |
|||
}); |
|||
} |
|||
if (status === 'done') { |
|||
let { uploaded, url } = info.file.response; |
|||
let size = info.file.size; |
|||
let nextFileList = fileList; |
|||
nextFileList[nextFileList.length - 1] = { |
|||
uid: -moment().unix(), |
|||
name: that.dealName(uploaded), |
|||
status: 'done', |
|||
storageUrl: uploaded, |
|||
url: url, |
|||
size: size |
|||
}; |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileUploading: false, |
|||
fileList: nextFileList |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} else if (status === 'error') { |
|||
that.setState({ |
|||
fileUploading: false |
|||
}); |
|||
message.error(`${info.file.name} 上传失败，请重试`); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} |
|||
}, |
|||
onRemove(file) { |
|||
let nextFileList = []; |
|||
fileList.map((f, i) => { |
|||
if (f.uid != file.uid) { |
|||
nextFileList.push(f); |
|||
} |
|||
}); |
|||
let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); |
|||
if (curPreviewPic == file.url) { |
|||
that.setState({ |
|||
curPreviewPic: '' |
|||
}); |
|||
} |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileList: nextFileList, |
|||
removeFilesList: nextRemoveFiles |
|||
}); |
|||
}, |
|||
onPreview(file) { |
|||
let filePostfix = file.url.split('.').pop(); |
|||
filePostfix = filePostfix.toLowerCase(); |
|||
if (UploadPath.image.some((img) => img == filePostfix)) { |
|||
that.setState({ |
|||
curPreviewPic: file.url |
|||
}); |
|||
} else { |
|||
message.warn('仅支持图片预览'); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
let fileList_ = fileList |
|||
// .map(f => {
|
|||
// if (f.storageUrl) {
|
|||
// let realName = f.storageUrl.split('/').pop()
|
|||
// if (f.name != realName) {
|
|||
// f.name = realName
|
|||
// }
|
|||
// }
|
|||
// return f
|
|||
// })
|
|||
|
|||
return ( |
|||
<div> |
|||
<Spin spinning={delPicIng}> |
|||
<Upload {...uploadProps} fileList={fileList_}> |
|||
{ |
|||
disabled ? ( |
|||
'' |
|||
) : |
|||
listType == 'picture-card' ? |
|||
( |
|||
fileList.length >= maxFilesNum_ ? null : ( |
|||
<div style={{}}> |
|||
<PlusOutlined /> |
|||
<div>上传图片</div> |
|||
</div> |
|||
) |
|||
) : ( |
|||
<Button disabled={fileList.length >= maxFilesNum_} icon={<UploadOutlined />}> 文件上传 </Button> |
|||
) |
|||
} |
|||
</Upload> |
|||
{ |
|||
curPreviewPic ? ( |
|||
<Card |
|||
bodyStyle={{ |
|||
padding: 8 |
|||
}} |
|||
> |
|||
<div style={{ marginBottom: 8 }} > |
|||
<span>文件预览</span> |
|||
<span |
|||
style={{ float: 'right' }} |
|||
onClick={() => { this.setState({ curPreviewPic: '' }); }} |
|||
> |
|||
<CloseOutlined style={{ fontSize: 20 }} /> |
|||
</span> |
|||
</div> |
|||
<img style={{ width: '100%' }} src={curPreviewPic}></img> |
|||
</Card> |
|||
) : '' |
|||
} |
|||
</Spin> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth } = state |
|||
return { |
|||
user: auth.user |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Uploads); |
|||
@ -1,389 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import React, { Component } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Upload, message, Modal, Card, Button } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons'; |
|||
|
|||
class Uploads extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.ApiRoot = localStorage.getItem('tyApiRoot') |
|||
this.qnDomain = localStorage.getItem('qnDomain'); |
|||
this.aliAdmin = localStorage.getItem('aliAdmin'); |
|||
this.state = { |
|||
fileUploading: false, |
|||
fileList: [], |
|||
curPreviewPic: '', |
|||
curPreviewVideo: '', |
|||
delPicIng: false, |
|||
removeFilesList: [] |
|||
}; |
|||
} |
|||
|
|||
dealName = (uploaded) => { |
|||
let realName = uploaded.split('/')[2] |
|||
// let x1 = realName.split('.')
|
|||
// let postfix = x1.pop()
|
|||
// let allName = x1.join('.')
|
|||
// let x2 = allName.split('_')
|
|||
// let showName = `${x2[0]}.${postfix}`
|
|||
return realName |
|||
} |
|||
|
|||
// setFileList = (value) => {
|
|||
// let defaultFileList = [];
|
|||
// defaultFileList = value.map((u, index) => {
|
|||
// let fileUrl = `${this.ApiRoot}/${u.url}`;
|
|||
// return {
|
|||
// uid: -index - 1,
|
|||
// name: this.dealName(u.url),
|
|||
// status: 'done',
|
|||
// storageUrl: u.url,
|
|||
// url: fileUrl
|
|||
// };
|
|||
// });
|
|||
// onChange(defaultFileList)
|
|||
// this.setState({
|
|||
// fileList: defaultFileList
|
|||
// });
|
|||
// };
|
|||
|
|||
setFileList = (nextEditData, isQiniu, isAli) => { |
|||
let defaultFileList = []; |
|||
defaultFileList = nextEditData.map((u, index) => { |
|||
let fileUrl = |
|||
isQiniu ? `/_file-server/${u.storageUrl}` |
|||
: isAli ? `/_file-ali-server/${u.storageUrl}` |
|||
: `${this.ApiRoot}/${u.storageUrl}`; |
|||
|
|||
return { |
|||
uid: -index - 1, |
|||
name: this.dealName(u.storageUrl), |
|||
status: 'done', |
|||
storageUrl: u.storageUrl, |
|||
url: fileUrl, |
|||
size: u.size || -1 |
|||
}; |
|||
}); |
|||
this.setState({ |
|||
fileList: defaultFileList |
|||
}); |
|||
}; |
|||
|
|||
componentDidMount() { |
|||
const { value, defaultValue, isQiniu, isAli } = this.props; |
|||
if (defaultValue) { |
|||
this.setFileList(defaultValue, isQiniu, isAli) |
|||
} |
|||
} |
|||
|
|||
UNSAFE_componentWillReceiveProps(np) { |
|||
const { dispatch, value: thisEditData, onChange } = this.props; |
|||
const { value: nextEditData, isQiniu, isAli } = np; |
|||
// this.setFileList(nextEditData, isQiniu)
|
|||
// const setFileList = () => {
|
|||
// let defaultFileList = [];
|
|||
// defaultFileList = nextEditData.map((u, index) => {
|
|||
// let fileUrl = isQiniu ? `/_file-server/${u.storageUrl}` : `${this.ApiRoot}/${u.storageUrl}`;
|
|||
// return {
|
|||
// uid: -index - 1,
|
|||
// name: this.dealName(u.storageUrl),
|
|||
// status: 'done',
|
|||
// storageUrl: u.storageUrl,
|
|||
// url: fileUrl,
|
|||
// size: u.size || -1
|
|||
// };
|
|||
// });
|
|||
// this.setState({
|
|||
// fileList: defaultFileList
|
|||
// });
|
|||
// };
|
|||
if (nextEditData && nextEditData.length) { |
|||
if (!thisEditData || !this.state.fileList.length) { |
|||
this.setFileList(nextEditData, isQiniu, isAli); |
|||
} else if (nextEditData.length != thisEditData.length) { |
|||
this.setFileList(nextEditData, isQiniu, isAli); |
|||
} else { |
|||
let repeat = true; |
|||
for (let i = 0; i < thisEditData.length; i++) { |
|||
if (thisEditData[i] != nextEditData[i]) { |
|||
repeat = false; |
|||
break; |
|||
} |
|||
} |
|||
if (!repeat) { |
|||
this.setFileList(nextEditData, isQiniu, isAli); |
|||
} |
|||
} |
|||
} |
|||
// else{
|
|||
// this.setState({
|
|||
// fileList:[],
|
|||
// })
|
|||
// }
|
|||
} |
|||
|
|||
render() { |
|||
const UploadPath = { |
|||
project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'pdf', 'pptx', 'png', 'jpg', 'svg', 'jpeg', 'rar', 'zip', 'jpeg', 'mp4'], |
|||
report: ['doc', 'docx', 'xls', 'xlsx', 'csv', 'pdf'], |
|||
data: ['txt', 'xls', 'xlsx', 'csv'], |
|||
image: ['png', 'jpg', 'svg', 'jpeg'], |
|||
three: ['js'], |
|||
video: ['mp4'] |
|||
}; |
|||
/** |
|||
* uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准；默认 project； |
|||
* disabled 【boolean】 上传是否可用 |
|||
* maxFilesNum 【number】 最大上传数量 |
|||
* fileTypes 【array[string]】 可允许上传的文件类型； |
|||
* maxFileSize 【number】 单个文件最大大小 M |
|||
* listType 【antd】 upload 组件的属性 |
|||
* onChange 【function】 文件数量变化时候回调 返回文件 |
|||
* value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] |
|||
* onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } |
|||
*/ |
|||
const { |
|||
uploadType, |
|||
disabled, |
|||
maxFilesNum, |
|||
fileTypes, |
|||
maxFileSize, |
|||
listType, |
|||
onChange = () => { }, |
|||
value, |
|||
showUploadList, |
|||
onStateChange, |
|||
isQiniu, |
|||
isAli, |
|||
} = this.props; |
|||
const { fileList, curPreviewPic, curPreviewVideo, delPicIng, removeFilesList } = this.state; |
|||
const that = this; |
|||
let uploadType_ = uploadType || 'project'; |
|||
let maxFilesNum_ = maxFilesNum || 1; |
|||
let defaultFileTypes = fileTypes || UploadPath[uploadType_]; |
|||
// debugger
|
|||
const uploadProps = { |
|||
name: 'checkFile_', |
|||
multiple: false, |
|||
showUploadList: showUploadList || true, |
|||
action: |
|||
isQiniu ? `/_upload/attachments/${uploadType_}` |
|||
: isAli ? `/_upload/attachments/ali/${uploadType_}` |
|||
: `${this.ApiRoot}/attachments/${uploadType_}`, |
|||
listType: listType || 'text', |
|||
disabled: disabled, |
|||
beforeUpload: (file) => { |
|||
if (fileList.length >= maxFilesNum_) { |
|||
message.warning(`最多选择${maxFilesNum_}个文件上传`); |
|||
return false; |
|||
} |
|||
if (file.name.length > 60) { |
|||
message.warning(`文件名过长(大于60字符)，请修改后上传`); |
|||
return false; |
|||
} |
|||
const extNames = file.name.split('.'); |
|||
// var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/;
|
|||
// if (!reg.exec(file.name)) {
|
|||
// message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符，请修改后上传`);
|
|||
// return false;
|
|||
// }
|
|||
let isDAE = false; |
|||
if (extNames.length > 0) { |
|||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
|||
isDAE = defaultFileTypes.some((f) => f == fileType); |
|||
} |
|||
if (!isDAE) { |
|||
message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); |
|||
return false; |
|||
} |
|||
const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); |
|||
if (!isLt) { |
|||
message.error(`文件必须小于${maxFileSize || 3}MB!`); |
|||
return false; |
|||
} |
|||
this.setState({ |
|||
fileUploading: true |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: true }); |
|||
} |
|||
}, |
|||
onChange(info) { |
|||
const status = info.file.status; |
|||
if (status === 'uploading') { |
|||
that.setState({ |
|||
fileList: info.fileList |
|||
}); |
|||
} |
|||
if (status === 'done') { |
|||
let { uploaded, url } = info.file.response; |
|||
let size = info.file.size; |
|||
let nextFileList = fileList; |
|||
nextFileList[nextFileList.length - 1] = { |
|||
uid: -moment().unix(), |
|||
name: that.dealName(uploaded), |
|||
status: 'done', |
|||
storageUrl: uploaded, |
|||
url: |
|||
isQiniu ? '/_file-server/' + uploaded : |
|||
isAli ? `/_file-ali-server/${uploaded}` : |
|||
url, |
|||
size: size |
|||
}; |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileUploading: false, |
|||
fileList: nextFileList |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} else if (status === 'error') { |
|||
that.setState({ |
|||
fileUploading: false |
|||
}); |
|||
message.error(`${info.file.name} 上传失败，请重试`); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} |
|||
}, |
|||
onRemove(file) { |
|||
let nextFileList = []; |
|||
fileList.map((f, i) => { |
|||
if (f.uid != file.uid) { |
|||
nextFileList.push(f); |
|||
} |
|||
}); |
|||
let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); |
|||
if (curPreviewPic == file.url) { |
|||
that.setState({ |
|||
curPreviewPic: '' |
|||
}); |
|||
} |
|||
if (curPreviewVideo == file.url) { |
|||
that.setState({ |
|||
curPreviewVideo: '' |
|||
}); |
|||
} |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileList: nextFileList, |
|||
removeFilesList: nextRemoveFiles |
|||
}); |
|||
}, |
|||
onPreview(file) { |
|||
let filePostfix = file.url.split('.').pop(); |
|||
filePostfix = filePostfix.toLowerCase(); |
|||
if (UploadPath.image.some((img) => img == filePostfix)) { |
|||
that.setState({ |
|||
curPreviewPic: file.url |
|||
}); |
|||
} else if (UploadPath.video.some((img) => img == filePostfix)) { |
|||
that.setState({ |
|||
curPreviewVideo: file.url |
|||
}); |
|||
} else { |
|||
//message.warn('仅支持图片预览');
|
|||
preview(file.storageUrl) |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const preview = (url) => { |
|||
let link = isQiniu ? encodeURI(`${this.qnDomain}/${url}`) : |
|||
isAli ? encodeURI(`${this.aliAdmin}/${url}`) : '' |
|||
if (link) |
|||
if (url.indexOf("pdf") !== -1 || url.indexOf("csv") !== -1) { |
|||
window.open(link) |
|||
} else { |
|||
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${link}`) |
|||
} |
|||
} |
|||
|
|||
let fileList_ = fileList |
|||
// .map(f => {
|
|||
// if (f.storageUrl) {
|
|||
// let realName = f.storageUrl.split('/').pop()
|
|||
// if (f.name != realName) {
|
|||
// f.name = realName
|
|||
// }
|
|||
// }
|
|||
// return f
|
|||
// })
|
|||
//下载文件
|
|||
const handleDownload = (file) => { |
|||
saveAs(file) |
|||
}; |
|||
const saveAs = (file) => { |
|||
const link = document.createElement('a'); |
|||
link.href = file.url; |
|||
link.download = file.name; |
|||
link.style.display = 'none'; |
|||
link.click(); |
|||
} |
|||
//自定义下载
|
|||
return ( |
|||
<div> |
|||
<Spin spinning={delPicIng}> |
|||
<Upload {...uploadProps} fileList={fileList_} showUploadList={{ showDownloadIcon: true }} onDownload={handleDownload}> |
|||
{ |
|||
disabled ? ( |
|||
'' |
|||
) : |
|||
listType == 'picture-card' ? |
|||
( |
|||
fileList.length >= maxFilesNum_ ? null : ( |
|||
<div style={{}}> |
|||
<PlusOutlined /> |
|||
<div>添加附件</div> |
|||
</div> |
|||
) |
|||
) : ( |
|||
<Button disabled={fileList.length >= maxFilesNum_} icon={<UploadOutlined />}> 文件上传 </Button> |
|||
) |
|||
} |
|||
</Upload> |
|||
{ |
|||
curPreviewPic ? ( |
|||
<Card bodyStyle={{ padding: 8 }}> |
|||
<div style={{ marginBottom: 8 }} > |
|||
<span>图片预览</span> |
|||
<span style={{ float: 'right' }} onClick={() => { this.setState({ curPreviewPic: '' }) }}> |
|||
<CloseOutlined style={{ fontSize: 20 }} /> |
|||
</span> |
|||
</div> |
|||
<img style={{ width: '100%' }} src={curPreviewPic} /> |
|||
</Card> |
|||
) : '' |
|||
} |
|||
{ |
|||
curPreviewVideo ? (<Card bodyStyle={{ padding: 8 }}> |
|||
<div style={{ marginBottom: 8 }} > |
|||
<span>视频预览</span> |
|||
<span style={{ float: 'right' }} onClick={() => { this.setState({ curPreviewVideo: '' }) }}> |
|||
<CloseOutlined style={{ fontSize: 20 }} /> |
|||
</span> |
|||
</div> |
|||
<video controls style={{ width: '100%' }}> |
|||
<source src={curPreviewVideo} type="video/mp4"></source> |
|||
</video> |
|||
</Card>) : '' |
|||
} |
|||
</Spin> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth } = state |
|||
return { |
|||
user: auth.user |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Uploads); |
|||
@ -1,683 +0,0 @@ |
|||
/** |
|||
* Created by Xumeng 2020/04/22. |
|||
*/ |
|||
|
|||
import React, { useState, useEffect } from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
import { |
|||
Row, Col, Space, Button, message, notification, Form, Input, Tooltip, Menu, Dropdown, |
|||
} from 'antd'; |
|||
import moment from 'moment'; |
|||
import XLSX from 'xlsx'; |
|||
import { fromJS } from 'immutable'; |
|||
import { Request } from '@peace/utils'; |
|||
import FileSaver from 'file-saver'; |
|||
import './index.less'; |
|||
|
|||
// 通用前端导入导出组件 使用方法查看底部propTypes
|
|||
function ExportAndImport(props) { |
|||
const [form] = Form.useForm(); |
|||
const [exportLoading, setExportLoading] = useState(false); |
|||
const [importLoading, setImportLoading] = useState(false); |
|||
const { |
|||
importDataCallback, onImportSucess, handelData, importMethod = 'post', |
|||
} = props; |
|||
|
|||
useEffect(() => () => { |
|||
// 只有unmount 时调用
|
|||
notification.close('import-notification'); |
|||
}); |
|||
const importExcel = (file, type) => { |
|||
setImportLoading(true); |
|||
// 获取上传的文件对象
|
|||
const { files } = file.target; |
|||
// 判断xls、xlsx格式
|
|||
if (files[0].type.indexOf('sheet') > -1 || files[0].type.indexOf('ms-excel') > -1) { |
|||
// 通过FileReader对象读取文件
|
|||
const fileReader = new FileReader(); |
|||
fileReader.onload = (event) => { |
|||
try { |
|||
const { importRequest = true, importUrl, importQuery } = props; |
|||
if (importRequest && !importUrl) { |
|||
message.error('获取导入接口失败！'); |
|||
form.resetFields(); |
|||
return; |
|||
} |
|||
const { result } = event.target; |
|||
// 以二进制流方式读取得到整份excel表格对象
|
|||
const workbook = XLSX.read(result, { type: 'binary', cellDates: true }); |
|||
let data = []; // 存储获取到的数据
|
|||
// 遍历每张工作表进行读取（这里默认只读取第一张表）
|
|||
for (const sheet in workbook.Sheets) { |
|||
if (workbook.Sheets.hasOwnProperty(sheet)) { |
|||
// 利用 sheet_to_json 方法将 excel 转成 json 数据
|
|||
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); |
|||
break; // 如果只取第一张表，就取消注释这行
|
|||
} |
|||
} |
|||
if (data.length > 10000) { |
|||
message.error('一次最多导入10000条数据，请分批导入！'); |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
return; |
|||
} |
|||
if (importRequest) { |
|||
message.success('获取文件数据成功，开始处理导入...'); |
|||
const importData = handelData ? handelData(data) : data; |
|||
Request[importMethod](importUrl, { data: importData }, importQuery || {}).then((res) => { |
|||
message.success('导入数据成功'); |
|||
form.resetFields(); |
|||
notification.close('import-notification'); |
|||
setImportLoading(false); |
|||
onImportSucess && onImportSucess(); |
|||
}, (err) => { |
|||
if (err.status === 500) { |
|||
message.error('数据导入出错,导入失败'); |
|||
} else if (err.status === 400) { |
|||
message.error(err.body.message || '数据验证出错,请检查数据格式是否正确'); |
|||
} else { |
|||
message.error('导入失败'); |
|||
} |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
}); |
|||
} else { |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
importDataCallback && importDataCallback(data, type); |
|||
notification.close('import-notification'); |
|||
} |
|||
} catch (e) { |
|||
console.log(e); |
|||
// 这里可以抛出文件类型错误不正确的相关提示
|
|||
message.error('文件格式不正确！'); |
|||
setImportLoading(false); |
|||
form.resetFields(); |
|||
} |
|||
}; |
|||
// fileReader.onloadend = (event) => {
|
|||
// console.log(event)
|
|||
// }
|
|||
// 以二进制方式打开文件
|
|||
fileReader.readAsBinaryString(files[0]); |
|||
} else { |
|||
message.error('文件格式不正确！'); |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const loop = (data, keypath, values) => { // deal with array
|
|||
const dkey = keypath.slice(0, 1)[0]; |
|||
console.log(dkey); |
|||
if (dkey) { |
|||
const dvalue = data[dkey]; |
|||
const otherKeypath = keypath.slice(1); |
|||
if (Array.isArray(dvalue)) { |
|||
if (otherKeypath.length) { |
|||
const immutableData = fromJS(data); |
|||
for (let index = 0; index < dvalue.length; index++) { |
|||
const tmp = immutableData.getIn([dkey, index]).toJS(); |
|||
loop(tmp, otherKeypath, values); |
|||
} |
|||
} |
|||
} else { |
|||
values.push(dvalue); |
|||
} |
|||
} |
|||
return values; |
|||
}; |
|||
const getColumnData = (opts) => { |
|||
const { |
|||
data, keypath, render, spliter, rawdata, |
|||
} = opts; |
|||
let v = null; |
|||
const outer = data[keypath[0]]; |
|||
|
|||
if (Array.isArray(outer)) { |
|||
const values = loop(data, keypath, []); |
|||
v = rawdata ? values : values.join(spliter || '，'); |
|||
} else { |
|||
v = fromJS(data).getIn(keypath); |
|||
} |
|||
// 处理render
|
|||
if (render && typeof render === 'function') { |
|||
v = render(outer, data); |
|||
} |
|||
return v; |
|||
}; |
|||
const getDataSource = (attrs, filterData) => { |
|||
// let token = JSON.parse(sessionStorage.getItem('user')).token;
|
|||
const dataSource = filterData.map((item) => { |
|||
const record = {}; |
|||
attrs.forEach((attr) => { |
|||
const { |
|||
key, dataIndex, render, child, |
|||
} = attr; |
|||
if (child) { |
|||
record[key] = getDataSource(child, item[key]); |
|||
} else { |
|||
const v = getColumnData({ |
|||
data: item, |
|||
keypath: dataIndex || [key], |
|||
render: render || null, |
|||
}); |
|||
record[key] = v; |
|||
} |
|||
}); |
|||
|
|||
return record; |
|||
}); |
|||
return dataSource; |
|||
}; |
|||
// 暂时只处理两层
|
|||
const getFlatData = (attrs, filterData, dataToAoa, deep = 0) => { |
|||
filterData.map((item) => { |
|||
let cur = dataToAoa[deep]; |
|||
if (!cur) { |
|||
cur = dataToAoa[deep] = []; |
|||
} |
|||
attrs.map((attr, index) => { |
|||
const { key, child } = attr; |
|||
if (child) { |
|||
if (Array.isArray(item[key])) { |
|||
// getFlatData(child,item[key],dataToAoa,deep)
|
|||
|
|||
item[key].map((s, i) => { |
|||
if (i == 0) { |
|||
child.map((c) => { |
|||
cur.push(s[c.key]); |
|||
}); |
|||
} else { |
|||
deep++; |
|||
const childCur = dataToAoa[deep] = []; |
|||
pushNull(childCur, index); |
|||
child.map((c) => { |
|||
childCur.push(s[c.key]); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} else { |
|||
cur.push(item[key]); |
|||
} |
|||
}); |
|||
deep++; |
|||
}); |
|||
}; |
|||
|
|||
const getHeader = (headers, excelHeader, deep, perOffset) => { |
|||
let offset = 0; |
|||
let cur = excelHeader[deep]; |
|||
if (!cur) { |
|||
cur = excelHeader[deep] = []; |
|||
} |
|||
pushNull(cur, perOffset - cur.length); |
|||
for (let i = 0; i < headers.length; i++) { |
|||
const head = headers[i]; |
|||
cur.push(head.name); |
|||
if (head.hasOwnProperty('child') && Array.isArray(head.child) && head.child.length > 0) { |
|||
const childOffset = getHeader(head.child, excelHeader, deep + 1, cur.length - 1); |
|||
pushNull(cur, childOffset - 1); |
|||
offset += childOffset; |
|||
} else { |
|||
offset++; |
|||
} |
|||
} |
|||
return offset; |
|||
}; |
|||
|
|||
const pushNull = (arr, count) => { |
|||
for (let i = 0; i < count; i++) { |
|||
arr.push(null); |
|||
} |
|||
}; |
|||
const fillNull = (arr) => { |
|||
const max = Math.max(...(arr.map((a) => a.length))); |
|||
arr.filter((e) => e.length < max).forEach((e) => pushNull(e, max - e.length)); |
|||
}; |
|||
const doMerges = (arr) => { |
|||
// 要么横向合并 要么纵向合并
|
|||
const deep = arr.length; |
|||
const merges = []; |
|||
for (let y = 0; y < deep; y++) { |
|||
// 先处理横向合并
|
|||
const row = arr[y]; |
|||
let colSpan = 0; |
|||
for (let x = 0; x < row.length; x++) { |
|||
if (row[x] === null) { |
|||
colSpan++; |
|||
if (((x + 1) === row.length) && (colSpan > 0 && x > colSpan)) { |
|||
merges.push({ s: { r: y, c: x - colSpan }, e: { r: y, c: x } }); |
|||
} |
|||
} else if (colSpan > 0 && x > colSpan) { |
|||
merges.push({ s: { r: y, c: x - colSpan - 1 }, e: { r: y, c: x - 1 } }); |
|||
colSpan = 0; |
|||
} else { |
|||
colSpan = 0; |
|||
} |
|||
} |
|||
} |
|||
// 再处理纵向合并
|
|||
const colLength = arr[0].length; |
|||
for (let x = 0; x < colLength; x++) { |
|||
let rowSpan = 0; |
|||
for (let y = 0; y < deep; y++) { |
|||
if (arr[y][x] != null) { |
|||
rowSpan = 0; |
|||
} else { |
|||
rowSpan++; |
|||
} |
|||
} |
|||
if (rowSpan > 0) { |
|||
merges.push({ s: { r: deep - rowSpan - 1, c: x }, e: { r: deep - 1, c: x } }); |
|||
} |
|||
} |
|||
return merges; |
|||
}; |
|||
// 内容暂只出了纵向合并
|
|||
const doContetMerges = (arr, headerLength) => { |
|||
const deep = arr.length; |
|||
const merges = []; |
|||
// 处理纵向合并
|
|||
const colLength = arr[0].length; |
|||
for (let x = 0; x < colLength; x++) { |
|||
let rowSpan = 0; |
|||
const mergY = 0; |
|||
for (let y = 0; y < deep; y++) { |
|||
if (rowSpan > 0) { |
|||
// 如果还有null 继续加
|
|||
if (arr[y][x] === null) { |
|||
rowSpan += 1; |
|||
} else { |
|||
// 不为null 增加merge
|
|||
merges.push({ s: { r: headerLength + (y - rowSpan - 1), c: x }, e: { r: headerLength + y - 1, c: x } }); |
|||
rowSpan = 0; |
|||
} |
|||
} else if (arr[y][x] === null) { |
|||
rowSpan += 1; |
|||
} |
|||
} |
|||
if (rowSpan > 0) { |
|||
merges.push({ s: { r: headerLength + (deep - rowSpan - 1), c: x }, e: { r: headerLength + deep - 1, c: x } }); |
|||
rowSpan = 0; |
|||
} |
|||
} |
|||
return merges; |
|||
}; |
|||
const exportMergeExcel = async () => { |
|||
setExportLoading(true); |
|||
const { |
|||
column, data, fileName, exportUrl, exportQuery, exportBody, requestType, header, showYearMouth, |
|||
} = props || {}; |
|||
|
|||
let resultData = []; |
|||
if (exportUrl) { |
|||
resultData = requestType == 'post' ? await Request.post(exportUrl, exportBody || {}, exportQuery || {}).then((data) => { |
|||
// 数据接口返回的结果 如果是对象 必须把返回数组放入rows
|
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败，导出失败！'); |
|||
}) : await Request.get(exportUrl, exportQuery || {}).then((data) => { |
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败，导出失败！'); |
|||
}); |
|||
if (!resultData) { |
|||
return; |
|||
} |
|||
} else { |
|||
resultData = data; |
|||
} |
|||
const excelHeader = []; |
|||
getHeader(column, excelHeader, 0, 0); |
|||
fillNull(excelHeader); |
|||
|
|||
// console.log(excelHeader);
|
|||
|
|||
const loopData = getDataSource(column, resultData); |
|||
// console.log(loopData)
|
|||
|
|||
const dataToAoa = []; |
|||
getFlatData(column, loopData, dataToAoa, 0); |
|||
fillNull(dataToAoa); |
|||
// console.log(dataToAoa);
|
|||
|
|||
const aoa = [].concat(excelHeader, dataToAoa); |
|||
// console.log(aoa)
|
|||
|
|||
const headerMerges = doMerges(excelHeader); |
|||
const contentMerages = doContetMerges(dataToAoa, excelHeader.length); |
|||
const merges = [].concat(headerMerges, contentMerages); |
|||
// console.log(contentMerages)
|
|||
|
|||
// let opts = {
|
|||
// defaultCellStyle: {
|
|||
// font: { name: "宋体", sz: 11, color: { auto: 1 } },
|
|||
// border: {
|
|||
// color: { auto: 1 }
|
|||
// },
|
|||
// alignment: {
|
|||
// /// 自动换行
|
|||
// wrapText: 1,
|
|||
// // 居中
|
|||
// horizontal: "center",
|
|||
// vertical: "center",
|
|||
// indent: 0
|
|||
// }
|
|||
// }
|
|||
// }
|
|||
const sheet = XLSX.utils.aoa_to_sheet(aoa); |
|||
// let newSheet = {};
|
|||
// for (let [key, value] of Object.entries(sheet)) {
|
|||
// if(key == '!ref'){
|
|||
// newSheet[key] = value
|
|||
// }else if(typeof value === 'object'){
|
|||
// newSheet[key] = {
|
|||
// ...value,
|
|||
// s: opts.defaultCellStyle
|
|||
// }
|
|||
// }
|
|||
// }
|
|||
const wpx = column.map((c) => ({ |
|||
wpx: Number.parseInt(c.wpx) ? Number.parseInt(c.wpx) : 100, |
|||
})); |
|||
sheet['!cols'] = wpx; |
|||
sheet['!merges'] = merges; |
|||
|
|||
// 构建 workbook 对象
|
|||
const workbook = XLSX.utils.book_new(); |
|||
|
|||
const time = moment().format('YYYY-MM-DD'); |
|||
|
|||
XLSX.utils.book_append_sheet(workbook, sheet, 'mySheet'); |
|||
// 导出 Excel
|
|||
XLSX.writeFile(workbook, fileName ? `${fileName}-${time}.xlsx` : '导出数据.xlsx'); |
|||
setExportLoading(false); |
|||
// message.success(`成功导出了 ${loopData.length || 0} 条数据`);
|
|||
}; |
|||
|
|||
const exportProExcel = async () => { |
|||
setExportLoading(true); |
|||
const { |
|||
column, data, fileName, exportUrl, exportQuery, exportBody, requestType, showYearMouth, |
|||
} = props || {}; |
|||
let resultData = []; |
|||
if (exportUrl) { |
|||
resultData = requestType == 'post' ? await Request.post(exportUrl, exportBody || {}, exportQuery || {}).then((data) => { |
|||
// 数据接口返回的结果 如果是对象 必须把返回数组放入rows
|
|||
if (typeof data === 'object') { |
|||
return data.data ? data.data : data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败，导出失败！'); |
|||
}) : await Request.get(exportUrl, exportQuery || {}).then((data) => { |
|||
if (showYearMouth) { |
|||
|
|||
} |
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败，导出失败！'); |
|||
}); |
|||
if (!resultData) { |
|||
return; |
|||
} |
|||
} else { |
|||
resultData = data; |
|||
} |
|||
|
|||
const loopData = getDataSource(column, resultData); |
|||
|
|||
let content = ''; |
|||
let header = '<tr>'; |
|||
// header += `<th><div>序号</div></th>`;
|
|||
column.map((colum) => { |
|||
header += `<th><div>${colum.name}</div></th>`; |
|||
}); |
|||
header += '</tr>'; |
|||
loopData.map((data) => { |
|||
content += '<tr>'; |
|||
column.map((c) => { |
|||
if (c.style) { |
|||
content += `<th style="${c.style}"><div>${data[c.dataIndex || c.key]}</div></th>`; |
|||
} else { |
|||
content += `<th><div>${data[c.dataIndex || c.key]}</div></th>`; |
|||
} |
|||
}); |
|||
content += '</tr>'; |
|||
}); |
|||
|
|||
const exportTable = `\uFEFF
|
|||
<table style='text-alagin:center' border="1"> |
|||
${header} |
|||
${content} |
|||
</table> |
|||
`;
|
|||
const time = moment().format('YYYY-MM-DD'); |
|||
const tempStrs = new Blob([exportTable], { type: 'text/xls' }); |
|||
FileSaver.saveAs(tempStrs, fileName ? `${fileName}-${time}.xls` : '导出数据.xls'); |
|||
setExportLoading(false); |
|||
// message.success(`成功导出了 ${loopData.length || 0} 条数据`);
|
|||
}; |
|||
|
|||
const exportExcel = async () => { |
|||
setExportLoading(true); |
|||
const { |
|||
column, data, fileName, exportUrl, exportQuery, exportBody, requestType, |
|||
} = props || {}; |
|||
const _headers = column |
|||
.map((item, i) => ({ key: item.key, title: item.name, position: String.fromCharCode(65 + i) + 1 })) |
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { key: next.key, v: next.title } }), {}); |
|||
let resultData = []; |
|||
if (exportUrl) { |
|||
resultData = requestType == 'post' ? await Request.post(exportUrl, exportBody || {}, exportQuery || {}).then((data) => { |
|||
// 数据接口返回的结果 如果是对象 必须把返回数组放入rows
|
|||
|
|||
if (typeof data === 'object' && (data.rows || data.data)) { |
|||
return data.data ? data.data : data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败，导出失败！'); |
|||
}) : await Request.get(exportUrl, exportQuery || {}).then((data) => { |
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败，导出失败！'); |
|||
}); |
|||
if (!resultData) { |
|||
return; |
|||
} |
|||
} else { |
|||
resultData = data; |
|||
} |
|||
|
|||
const loopDate = getDataSource(column, resultData); |
|||
|
|||
const wpx = column.map((c) => ({ |
|||
wpx: Number.parseInt(c.wpx) ? Number.parseInt(c.wpx) : 100, |
|||
})); |
|||
if (!(loopDate.length > 0)) { |
|||
setExportLoading(false); |
|||
return; |
|||
} |
|||
const _data = loopDate |
|||
.map((item, i) => column.map((key, j) => ({ content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) |
|||
// 对刚才的结果进行降维处理（二维数组变成一维数组）
|
|||
.reduce((prev, next) => prev.concat(next)) |
|||
// 转换成 worksheet 需要的结构
|
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { v: next.content } }), {}); |
|||
|
|||
// 合并 column 和 data
|
|||
const output = { ..._headers, ..._data }; |
|||
// 获取所有单元格的位置
|
|||
const outputPos = Object.keys(output); |
|||
// 计算出范围 ,["A1",..., "H2"]
|
|||
const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; |
|||
|
|||
// 构建 workbook 对象
|
|||
const workbook = { |
|||
SheetNames: ['mySheet'], |
|||
Sheets: { |
|||
mySheet: { |
|||
|
|||
...output, |
|||
'!ref': ref, |
|||
'!cols': wpx, |
|||
}, |
|||
}, |
|||
}; |
|||
const time = moment().format('YYYY-MM-DD'); |
|||
// 导出 Excel
|
|||
XLSX.writeFile(workbook, fileName ? `${fileName}-${time}.xlsx` : '导出数据.xlsx'); |
|||
setExportLoading(false); |
|||
// message.success(`成功导出了 ${loopDate.length || 0} 条数据`);
|
|||
}; |
|||
|
|||
const exportTemplete = async () => { |
|||
const { importTemColumn, importTemData, fileName } = props || {}; |
|||
const _headers = importTemColumn |
|||
.map((item, i) => { |
|||
let group = 0; // 用于处理Z1的时候，重计算AA1
|
|||
if (parseInt(i / 26) > group) { |
|||
group = parseInt(i / 26); |
|||
} |
|||
if (group > 0) { // AA1 BA1 CA1
|
|||
const position = String.fromCharCode(65 + (group - 1)); |
|||
return { key: item.key, title: item.name, position: position + String.fromCharCode(65 + (i % 26)) + 1 }; |
|||
} return { key: item.key, title: item.name, position: String.fromCharCode(65 + i) + 1 }; |
|||
}) |
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { key: next.key, v: next.title } }), {}); |
|||
|
|||
const loopDate = getDataSource(importTemColumn, importTemData); |
|||
|
|||
const wpx = importTemColumn.map((c) => ({ |
|||
wpx: Number.parseInt(c.wpx) ? Number.parseInt(c.wpx) : 100, |
|||
})); |
|||
const _data = loopDate.length ? loopDate |
|||
.map((item, i) => importTemColumn.map((key, j) => ({ content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) |
|||
// 对刚才的结果进行降维处理（二维数组变成一维数组）
|
|||
.reduce((prev, next) => prev.concat(next)) |
|||
// 转换成 worksheet 需要的结构
|
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { v: next.content } }), {}) : []; |
|||
// 合并 column 和 data
|
|||
const output = { ..._headers, ..._data }; |
|||
// 获取所有单元格的位置
|
|||
const outputPos = Object.keys(output); |
|||
// 计算出范围 ,["A1",..., "H2"]
|
|||
const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; |
|||
|
|||
// 构建 workbook 对象
|
|||
const workbook = { |
|||
SheetNames: ['mySheet'], |
|||
Sheets: { |
|||
mySheet: { |
|||
|
|||
...output, |
|||
'!ref': ref, |
|||
'!cols': wpx, |
|||
}, |
|||
}, |
|||
}; |
|||
// 导出 Excel
|
|||
XLSX.writeFile(workbook, fileName ? `${fileName}-导入模板.xlsx` : '导入模板.xlsx'); |
|||
}; |
|||
const tips = (type) => { |
|||
const { tips, templeteBth = true } = props; |
|||
const description = ( |
|||
<div className="export-import"> |
|||
{tips && tips} |
|||
<Row gutter={16}> |
|||
<Col span={12}> |
|||
<Form form={form} initialValues={{}}> |
|||
<Form.Item name="import-file"> |
|||
<Input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={(e) => importExcel(e, type)} /> |
|||
<Button style={props.btnStyle} className={props.btnClass} loading={importLoading}> |
|||
选择文件 |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</Col> |
|||
{templeteBth && ( |
|||
<Col span={12}> |
|||
<Button style={props.btnStyle} className={props.btnClass} onClick={exportTemplete}> |
|||
模板下载 |
|||
</Button> |
|||
</Col> |
|||
)} |
|||
</Row> |
|||
</div> |
|||
); |
|||
|
|||
notification.info({ |
|||
message: '支持 .xlsx、.xls 格式的文件', |
|||
description, |
|||
key: 'import-notification', |
|||
duration: null, |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<Space> |
|||
{ |
|||
props.import && ( |
|||
<Button style={props.btnStyle} className={props.btnClass} loading={importLoading} onClick={tips}> |
|||
{props.importBtnName || '导入'} |
|||
</Button> |
|||
) |
|||
} |
|||
{ |
|||
props.export && ( |
|||
<Tooltip placement="top" title={props.exportBtnTips || '默认导出所有数据'}> |
|||
<Button style={props.btnStyle} className={props.btnClass} loading={exportLoading} onClick={props.exportType === 'pro' ? exportProExcel : exportExcel}> |
|||
{props.exportBtnName || '导出'} |
|||
</Button> |
|||
</Tooltip> |
|||
) |
|||
} |
|||
</Space> |
|||
); |
|||
} |
|||
|
|||
ExportAndImport.propTypes = { |
|||
export: PropTypes.bool, // 是否显示导出按钮
|
|||
exportBtnName: PropTypes.string, // 导出按钮文字
|
|||
importBtnName: PropTypes.string, // 导入按钮文字
|
|||
import: PropTypes.bool, // 是否显示导入按钮
|
|||
variedImport: PropTypes.bool, // 是否显示多样导入
|
|||
variedImportDisable: PropTypes.bool, // 多样导入禁用
|
|||
variedImportBtnName: PropTypes.string, // 多样导入文字
|
|||
column: PropTypes.array, // 导出显示的header数组 兼容antd column 可直接拿table的column使用 注：column每列的属性wpx设置导出的execl每列的宽度值 默认 100
|
|||
data: PropTypes.array, // 导出的数据 兼容antd table 数组嵌套处理
|
|||
exportUrl: PropTypes.string, // 导出数据从接口获取的url地址 返回的数据1、数组必须支持column的设置 ，2、如果是对象，数组需放在rows属性上
|
|||
exportBody: PropTypes.object, // 导出数据接口body参数
|
|||
exportQuery: PropTypes.object, // 导出数据从接口获取的url地址上的参数
|
|||
exportBtnTips: PropTypes.string, // 导出按钮tips文字提示
|
|||
importUrl: PropTypes.string, // 导入接口url
|
|||
importQuery: PropTypes.object, // 导入接口url地址上的参数
|
|||
btnClass: PropTypes.string, // 按钮className
|
|||
btnStyle: PropTypes.object, // 按钮style
|
|||
tips: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), // 上传文件提示的信息
|
|||
onImportSucess: PropTypes.func, // 上传成功后 返回处理函数
|
|||
importTemColumn: PropTypes.array, // 导入模板设置 头部字段数组
|
|||
importTemData: PropTypes.array, // 导入模板默认数据
|
|||
requestType: PropTypes.string, // 请求类型
|
|||
importDataCallback: PropTypes.func, // 上传后数据返回
|
|||
templeteBth: PropTypes.bool, // 模板按钮
|
|||
importRequest: PropTypes.bool, // 请求导入接口，false时搭配importDataCallback,
|
|||
exportType: PropTypes.string, // 导出执行的函数名
|
|||
}; |
|||
|
|||
export default ExportAndImport; |
|||
@ -1,13 +0,0 @@ |
|||
.export-import { |
|||
.file-uploader { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
outline: none; |
|||
opacity: 0; |
|||
background-color: transparent; |
|||
z-index: 10; |
|||
} |
|||
} |
|||
@ -1,74 +0,0 @@ |
|||
'use strict'; |
|||
import React, { Component } from 'react'; |
|||
import { Table } from 'antd'; |
|||
import './index.less'; |
|||
import moment from 'moment'; |
|||
|
|||
class FlowRecordTable extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
isRequesting: false, |
|||
pagination: { |
|||
showTotal: total => `共${total}条`, |
|||
responsive: true, |
|||
defaultPageSize: 10, |
|||
}, |
|||
data: [] |
|||
} |
|||
this.token = JSON.parse(sessionStorage.getItem('user')).token; |
|||
} |
|||
|
|||
|
|||
getPagination = () => { |
|||
const { pagination, data } = this.state; |
|||
const { actiPage } = this.props; |
|||
pagination.total = data.length > 0 ? data.length : 0; |
|||
pagination.current = actiPage; |
|||
return pagination; |
|||
}; |
|||
|
|||
onTableChange = (pagination, filters, sorter) => { |
|||
this.props.onPageChange(pagination.current) |
|||
} |
|||
componentDidMount() { |
|||
} |
|||
render() { |
|||
const { flowRecord } = this.props; |
|||
const tableColumnAttrs = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'id', |
|||
width: '12%', |
|||
render: (text, record, index) => { return index + 1 } |
|||
}, |
|||
{ |
|||
title: '操作人', |
|||
dataIndex: 'processBy', |
|||
width: '25%', |
|||
}, |
|||
{ |
|||
title: '操作时间', |
|||
dataIndex: 'processAt', |
|||
width: '25%', |
|||
render: (text, record, index) => { return moment(text).format('YYYY-MM-DD HH:mm') } |
|||
}, { |
|||
title: '操作内容', |
|||
dataIndex: 'processContent', |
|||
width: '38%', |
|||
}, |
|||
]; |
|||
return ( |
|||
<Table |
|||
rowKey="id" |
|||
className={'fs-table'} |
|||
dataSource={flowRecord} |
|||
columns={tableColumnAttrs} |
|||
onChange={this.onTableChange} |
|||
pagination={this.getPagination()} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default FlowRecordTable; |
|||
@ -1,27 +1,10 @@ |
|||
|
|||
'use strict'; |
|||
|
|||
import Upload from './Upload'; |
|||
import Uploads from './Uploads'; |
|||
import NoResource from './no-resource'; |
|||
import LimitTextArea from './limit-textarea'; |
|||
// import ProcessForm from './process_form'
|
|||
import FlowRecordTable from './flowRecordTable' |
|||
import Table from './table' |
|||
import Search from './search' |
|||
import SketchColor from './sketchColor' |
|||
import ExportAndImport from './export' |
|||
// import Upload from './Upload';
|
|||
|
|||
|
|||
export { |
|||
Upload, |
|||
Uploads, |
|||
NoResource, |
|||
LimitTextArea, |
|||
// ProcessForm,
|
|||
FlowRecordTable, |
|||
Table, |
|||
Search, |
|||
SketchColor, |
|||
ExportAndImport, |
|||
|
|||
|
|||
}; |
|||
|
|||
@ -1,70 +0,0 @@ |
|||
import React, { PureComponent } from 'react'; |
|||
import { Input } from 'antd'; |
|||
const { TextArea } = Input; |
|||
import './index.less'; |
|||
|
|||
/*** |
|||
* 显示最大输入字符数 |
|||
* maxLength：300（默认） |
|||
*/ |
|||
class LimitTextArea extends PureComponent { |
|||
|
|||
constructor(props) { |
|||
super(props) |
|||
this.state = { |
|||
len: 0, |
|||
maxLength: 300, |
|||
isvalid: true, // 是否显示最大字符数
|
|||
} |
|||
// 若需要覆盖onChange时，value必填
|
|||
if (props.onChange && !props.hasOwnProperty('value')) { |
|||
this.state.isvalid = false |
|||
console.warn('LimitTextArea：绑定onChange时，value属性必填，否则显示最大输入字符数将失效!') |
|||
} |
|||
} |
|||
|
|||
// 若外部定义了onChange事件，handleChange将会被覆盖
|
|||
handleChange = (e) => { |
|||
const { sep } = this.props |
|||
const val = e.target.value |
|||
const arr = (val || '').split(sep) |
|||
this.setState({ |
|||
len: arr.length |
|||
}) |
|||
} |
|||
|
|||
render () { |
|||
const { maxLength: defaultMax, isvalid } = this.state |
|||
const { sep, maxLength, value, ...restProps } = this.props |
|||
const max = maxLength > 0 ? maxLength : defaultMax |
|||
/** form组件中，value有值 */ |
|||
const arr = (value || '').split(sep) |
|||
let len = value ? arr.length : this.state.len |
|||
len = len > max ? max : len |
|||
/**截取最大字符串 */ |
|||
const val = arr.slice(0, len).join(sep) |
|||
const n = val ? len : 0 |
|||
const suffix = `${n}/${max}` |
|||
|
|||
return isvalid ? ( |
|||
<div className={'block'}> |
|||
<TextArea |
|||
onChange={ e => this.handleChange(e) } |
|||
value={val} |
|||
{ ...restProps } |
|||
/> |
|||
<span className={'counter'}>{suffix}</span> |
|||
</div> |
|||
) : <TextArea { ...this.props } /> |
|||
} |
|||
} |
|||
|
|||
LimitTextArea.defaultProps = { |
|||
/** 分割符 |
|||
* 可以是个字符串，如：'\n' |
|||
* 也可以是个正则表达式，如：/\n\r/ |
|||
*/ |
|||
sep: '' |
|||
} |
|||
|
|||
export default LimitTextArea; |
|||
@ -1,10 +0,0 @@ |
|||
.block { |
|||
position: relative; |
|||
.counter { |
|||
position: absolute; |
|||
bottom: 5px; |
|||
right: 15px; |
|||
color: #adadad; |
|||
z-index: 2; |
|||
} |
|||
} |
|||
@ -1,21 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import React from 'react'; |
|||
import { Result} from 'antd'; |
|||
import { MehOutlined } from '@ant-design/icons'; |
|||
class NoResource extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
} |
|||
render() { |
|||
const title = this.props.title ? this.props.title : "抱歉，没有可访问的资源！" |
|||
return ( |
|||
<Result |
|||
icon={<MehOutlined />} |
|||
title={title} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default NoResource; |
|||
@ -1,217 +0,0 @@ |
|||
/** |
|||
* Created by Xumeng 2020/04/01. |
|||
*/ |
|||
'use strict'; |
|||
|
|||
import React, { useState } from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
import { Space, Row, Col, Form, DatePicker, Input, Select, Button } from 'antd'; |
|||
import { DownOutlined, UpOutlined } from '@ant-design/icons'; |
|||
//import { fromJS } from 'immutable';
|
|||
import { Constans } from '$utils'; |
|||
import moment from 'moment'; |
|||
import './index.less'; |
|||
const FormItem = Form.Item; |
|||
const { RangePicker } = DatePicker; |
|||
|
|||
//通用搜索栏组件 使用方法查看底部propTypes
|
|||
|
|||
const Search = (props) => { |
|||
const [expand, setExpand] = useState(false); |
|||
const [form] = Form.useForm(); |
|||
const { colSpan } = props; |
|||
//初始化表单数据
|
|||
const getinitialValues = () => { |
|||
const { formList } = props; |
|||
let obj = {}; |
|||
formList.forEach((v) => { |
|||
const { field, initialValue } = v; |
|||
if (initialValue) { |
|||
obj[field] = initialValue; |
|||
} |
|||
}); |
|||
|
|||
return obj; |
|||
}; |
|||
//获取表单项
|
|||
const getFields = () => { |
|||
const formItemList = []; |
|||
const { formList, showNumber, offset } = props; |
|||
let showNum = showNumber ? showNumber : 3; |
|||
let offsetNum = offset ? offset : 0; |
|||
const span = Number.parseInt((24 - offsetNum) / showNum); |
|||
if (formList && formList.length > 0) { |
|||
formList.forEach((item, index) => { |
|||
const { label, field, type, placeholder, style, labelSpan, showTime, optionName, list, rules, itemProps } = item; |
|||
let num = 0; |
|||
if (index === 0 && offsetNum) { |
|||
num = offsetNum; |
|||
} |
|||
switch (type) { |
|||
case 'TIME': |
|||
const TIMES = ( |
|||
<Col offset={num} span={labelSpan || span} key={`${field}-${index}`}> |
|||
<FormItem label={label || '选择日期'} name={field} rules={rules}> |
|||
<DatePicker |
|||
getPopupContainer={(triggerNode) => triggerNode.parentNode} |
|||
//showTime={showTime ? showTime : false}
|
|||
style={style ? style : {}} |
|||
placeholder={placeholder || '选择日期'} |
|||
format='YYYY-MM-DD' |
|||
{...itemProps} |
|||
/> |
|||
</FormItem> |
|||
</Col> |
|||
); |
|||
formItemList.push(TIMES); |
|||
break; |
|||
case 'RANGETIME': |
|||
const RANGETIMES = ( |
|||
<Col offset={num} span={labelSpan || span} key={`${field}-${index}`}> |
|||
<FormItem label={label || '选择日期时间段'} name={field} rules={rules}> |
|||
<RangePicker |
|||
getPopupContainer={(triggerNode) => triggerNode.parentNode} |
|||
showTime={showTime ? showTime : false} |
|||
style={style ? style : {}} |
|||
//placeholder={placeholder || '选择日期时间段'}
|
|||
format={showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'} |
|||
{...itemProps} |
|||
/> |
|||
</FormItem> |
|||
</Col> |
|||
); |
|||
formItemList.push(RANGETIMES); |
|||
break; |
|||
case 'SELECT': |
|||
const SELECT = ( |
|||
<Col offset={num} span={labelSpan || span} key={`${field}-${index}`}> |
|||
<FormItem label={label || '请选择'} name={field} rules={rules}> |
|||
<Select |
|||
style={style ? style : {}} |
|||
getPopupContainer={(triggerNode) => triggerNode.parentNode} |
|||
placeholder={placeholder || '请选择'} |
|||
{...itemProps} |
|||
> |
|||
{getOptionList(list, optionName)} |
|||
</Select> |
|||
</FormItem> |
|||
</Col> |
|||
); |
|||
formItemList.push(SELECT); |
|||
break; |
|||
default: |
|||
const INPUT = ( |
|||
<Col offset={num} span={labelSpan || span} key={`${field}-${index}`}> |
|||
<FormItem label={label || '关键字'} name={field} rules={rules}> |
|||
<Input style={style ? style : {}} placeholder={placeholder || '请输入关键字'} {...itemProps} /> |
|||
</FormItem> |
|||
</Col> |
|||
); |
|||
formItemList.push(INPUT); |
|||
break; |
|||
} |
|||
}); |
|||
} |
|||
//默认显示个数处理
|
|||
return expand ? formItemList : formItemList.slice(0, showNum); |
|||
}; |
|||
|
|||
const onFinish = (values) => { |
|||
const { formList } = props; |
|||
let obj = Object.assign({}, values); |
|||
//处理时间
|
|||
formList.forEach((v) => { |
|||
if (v.type == 'TIME' && obj.hasOwnProperty(v.field)) { |
|||
if (obj[v.field]) { |
|||
obj[v.field] = [ |
|||
moment(obj[v.field]).startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|||
moment(obj[v.field]).endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
]; |
|||
} |
|||
} |
|||
if (v.type == 'RANGETIME' && obj.hasOwnProperty(v.field)) { |
|||
if (Array.isArray(obj[v.field])) { |
|||
obj[v.field] = v.showTime |
|||
? [moment(obj[v.field][0]).format('YYYY-MM-DD HH:mm:ss'), moment(obj[v.field][1]).format('YYYY-MM-DD HH:mm:ss')] |
|||
: [ |
|||
moment(obj[v.field][0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|||
moment(obj[v.field][1]).endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
]; |
|||
} |
|||
} |
|||
//处理undefind
|
|||
if (obj[v.field] === undefined) { |
|||
obj[v.field] = null; |
|||
} |
|||
}); |
|||
|
|||
props.onSearch(obj); |
|||
}; |
|||
|
|||
const getOptionList = (data, name) => { |
|||
if (!data) { |
|||
return []; |
|||
} |
|||
return data.map((item) => ( |
|||
<Select.Option disabled={item.disabled || false} value={item.value} key={item.key || item.value}> |
|||
{item[`${name}`]} |
|||
</Select.Option> |
|||
)); |
|||
}; |
|||
|
|||
return ( |
|||
<Form |
|||
form={form} |
|||
name='smart_seal_search' |
|||
className='smart-seal-search-form' |
|||
onFinish={onFinish} |
|||
initialValues={getinitialValues()} |
|||
validateMessages={Constans.defaultValidateMessages} |
|||
> |
|||
<Row gutter={16}> |
|||
<Col span={colSpan ? colSpan.label : 18}> |
|||
<Row gutter={16}>{getFields()}</Row> |
|||
</Col> |
|||
<Col span={colSpan ? colSpan.button : 6}> |
|||
<Space> |
|||
<Button htmlType='submit' className='smart-seal-default-btn'> |
|||
查询 |
|||
</Button> |
|||
{props.showRest && ( |
|||
<Button |
|||
onClick={() => { |
|||
form.resetFields(); |
|||
}} |
|||
className='smart-seal-default-btn' |
|||
> |
|||
重置 |
|||
</Button> |
|||
)} |
|||
{props.formList.length > props.showNumber && ( |
|||
<a |
|||
style={{ marginLeft: 8, fontSize: 12 }} |
|||
onClick={() => { |
|||
setExpand(!expand); |
|||
}} |
|||
> |
|||
{expand ? <UpOutlined /> : <DownOutlined />} {expand ? '收起' : '展开'} |
|||
</a> |
|||
)} |
|||
</Space> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
); |
|||
}; |
|||
|
|||
Search.propTypes = { |
|||
//查询配置数组 [{label, field, type[TIME,RANGETIME,SELECT,INPUT], initialValue, placeholder, width, list(select使用) optionName(select使用) , showTime(是否显示时间) }]
|
|||
formList: PropTypes.array.isRequired, |
|||
showNumber: PropTypes.number, //默认展示几个item ，其余展开按钮控制
|
|||
offset: PropTypes.number, //设置第一个item的偏移值
|
|||
onSearch: PropTypes.func.isRequired, //查询提交函数
|
|||
showRest: PropTypes.bool, //是否显示重置按钮
|
|||
colSpan: PropTypes.object // 搜索栏整体布局 默认 {label: 18 : button: 6}
|
|||
}; |
|||
|
|||
export default Search; |
|||
@ -1,3 +0,0 @@ |
|||
.ant-form-horizontal .ant-form-item-control { |
|||
flex: 1 1 0%; |
|||
} |
|||
@ -1,82 +0,0 @@ |
|||
'use strict' |
|||
import React from 'react'; |
|||
import { SketchPicker } from 'react-color'; |
|||
|
|||
class SketchColor extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
displayColorPicker: false, |
|||
color: "#fff", |
|||
}; |
|||
|
|||
} |
|||
componentDidMount() { |
|||
const { color } = this.props; |
|||
|
|||
color && this.setState({ |
|||
color: color |
|||
}) |
|||
|
|||
} |
|||
handleClick = () => { |
|||
this.setState({ displayColorPicker: !this.state.displayColorPicker }) |
|||
}; |
|||
|
|||
handleClose = () => { |
|||
this.setState({ displayColorPicker: false }) |
|||
}; |
|||
|
|||
handleChange = (color) => { |
|||
const {onChangeComplete} = this.props; |
|||
this.setState({ color: color.hex }); |
|||
onChangeComplete && onChangeComplete(color) |
|||
}; |
|||
|
|||
render() { |
|||
const { color } = this.state; |
|||
const styles = { |
|||
color: { |
|||
width: '36px', |
|||
height: '14px', |
|||
borderRadius: '2px', |
|||
background: color, |
|||
}, |
|||
swatch: { |
|||
padding: '5px', |
|||
background: '#fff', |
|||
borderRadius: '1px', |
|||
boxShadow: '0 0 0 1px rgba(0,0,0,.1)', |
|||
display: 'inline-block', |
|||
cursor: 'pointer', |
|||
}, |
|||
popover: { |
|||
position: 'absolute', |
|||
zIndex: '2', |
|||
}, |
|||
cover: { |
|||
position: 'fixed', |
|||
top: '0px', |
|||
right: '0px', |
|||
bottom: '0px', |
|||
left: '0px', |
|||
}, |
|||
|
|||
}; |
|||
|
|||
return ( |
|||
<div> |
|||
<div style={ styles.swatch } onClick={ this.handleClick }> |
|||
<div style={ styles.color } /> |
|||
</div> |
|||
{ this.state.displayColorPicker ? <div style={ styles.popover }> |
|||
<div style={ styles.cover } onClick={ this.handleClose }/> |
|||
<SketchPicker width={300} color={ color } onChange={ this.handleChange } /> |
|||
</div> : null } |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default SketchColor |
|||
@ -1,259 +0,0 @@ |
|||
'use strict'; |
|||
import React, { Component } from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
import { Table as AntdTable, Divider, Dropdown, Menu, Spin, Popconfirm } from 'antd'; |
|||
import { DownOutlined } from '@ant-design/icons'; |
|||
import { fromJS } from 'immutable'; |
|||
import './index.less'; |
|||
|
|||
const loop = (data, keypath, values) => { |
|||
// deal with array
|
|||
let dkey = keypath.slice(0, 1)[0]; |
|||
if (dkey) { |
|||
let dvalue = data[dkey]; |
|||
let otherKeypath = keypath.slice(1); |
|||
if (Array.isArray(dvalue)) { |
|||
if (otherKeypath.length) { |
|||
let immutableData = fromJS(data); |
|||
for (let index = 0; index < dvalue.length; index++) { |
|||
let tmp = immutableData.getIn([dkey, index]).toJS(); |
|||
loop(tmp, otherKeypath, values); |
|||
} |
|||
} |
|||
} else { |
|||
values.push(dvalue); |
|||
} |
|||
} |
|||
return values; |
|||
}; |
|||
|
|||
//通用table组件 使用方法查看底部propTypes
|
|||
class Table extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
selectedRowKeys: [], |
|||
pagination: { |
|||
showTotal: (total) => `共${total}条`, |
|||
showSizeChanger: true, |
|||
showQuickJumper: true, |
|||
responsive: true, |
|||
pageSizeOptions: ['10', '20', '30', '40'], |
|||
defaultPageSize: 10 |
|||
}, |
|||
visible: {}, |
|||
current: 1 |
|||
}; |
|||
this.token = JSON.parse(sessionStorage.getItem('user')).token; |
|||
} |
|||
handleMenuClick = (e) => { |
|||
//TODO 点击删除
|
|||
}; |
|||
|
|||
UNSAFE_componentWillReceiveProps() { |
|||
this.setState({ |
|||
visible: {} |
|||
}); |
|||
} |
|||
|
|||
handleVisibleChange = (flag, key) => { |
|||
let visible = this.state.visible; |
|||
visible[key] = flag; |
|||
this.setState({ visible }); |
|||
}; |
|||
|
|||
getColumns = () => { |
|||
let columns = this.props.attrs.map((attr) => { |
|||
const { dataIndex, key, name, render, width, ellipsis, fixed } = attr; |
|||
let obj = { |
|||
title: name, |
|||
dataIndex: dataIndex || key, |
|||
key: key, |
|||
ellipsis: ellipsis == undefined ? true : ellipsis, |
|||
width: width |
|||
}; |
|||
if (render) { |
|||
obj.render = render; |
|||
} |
|||
if (fixed) { |
|||
obj.fixed = fixed; |
|||
} |
|||
return obj; |
|||
}); |
|||
|
|||
if (!this.props.actions) { |
|||
return columns; |
|||
} |
|||
|
|||
columns.push({ |
|||
title: '操作', |
|||
key: 'action', |
|||
className: 'fs-table-column-action', |
|||
render: (text, record) => { |
|||
let actions = this.props.actions; |
|||
if (record && record.actions) actions = actions.filter((act) => record.actions.includes(act.key)); |
|||
|
|||
return ( |
|||
<span style={{ whiteSpace: 'normal' }}> |
|||
{actions.reduce((p, c, i) => { |
|||
const { key, name, handler, dom, style, dropdown, hidden, popconfirm, getPopTitleFun, definedTitle } = c; |
|||
if (typeof hidden === 'function') { |
|||
let unVisiable = hidden(record); |
|||
if (unVisiable) return p; |
|||
} |
|||
|
|||
if (dropdown && Array.isArray(dropdown)) { |
|||
// 操作按钮 下拉菜单处理
|
|||
const menus = ( |
|||
<Menu onClick={this.handleMenuClick}> |
|||
{dropdown.map((m) => { |
|||
if (m.popconfirm) { |
|||
return ( |
|||
<Menu.Item key={m.key}> |
|||
<Popconfirm |
|||
placement='left' |
|||
title={m.title ? m.title : `确认${m.name}？`} |
|||
onConfirm={() => { |
|||
m.handler && m.handler(record); |
|||
}} |
|||
> |
|||
<a onClick={(e) => e.preventDefault()}>{m.name}</a> |
|||
</Popconfirm> |
|||
</Menu.Item> |
|||
); |
|||
} else { |
|||
return ( |
|||
<Menu.Item key={m.key}> |
|||
<a onClick={(e) => m.handler && m.handler(record)}>{m.name}</a> |
|||
</Menu.Item> |
|||
); |
|||
} |
|||
})} |
|||
</Menu> |
|||
); |
|||
p.push( |
|||
<Dropdown |
|||
overlay={menus} |
|||
onVisibleChange={(e) => this.handleVisibleChange(e, text.id)} |
|||
visible={this.state.visible ? this.state.visible[text.id] : false} |
|||
key={key} |
|||
> |
|||
<a style={style ? style : { display: 'inline-block' }} onClick={(e) => e.preventDefault()}> |
|||
{name} <DownOutlined /> |
|||
</a> |
|||
</Dropdown> |
|||
); |
|||
} else { |
|||
if (dom) { |
|||
popconfirm |
|||
? p.push( |
|||
<Popconfirm placement='left' title={`确认${name}吗？`} onConfirm={() => handler(record)} key={key}> |
|||
<span |
|||
style={style ? style : { display: 'inline-block' }} |
|||
key={key} |
|||
onClick={(e) => e.preventDefault()} |
|||
> |
|||
{dom} |
|||
</span> |
|||
</Popconfirm> |
|||
) |
|||
: p.push( |
|||
<span style={style ? style : { display: 'inline-block' }} key={key} onClick={(e) => handler(record)}> |
|||
{dom} |
|||
</span> |
|||
); |
|||
} else { |
|||
popconfirm |
|||
? p.push( |
|||
<Popconfirm placement='left' title={definedTitle && getPopTitleFun ? getPopTitleFun(record) : `确认${name}吗？`} onConfirm={() => handler(record)} key={key}> |
|||
<a |
|||
style={style ? style : { display: 'inline-block' }} |
|||
key={key} |
|||
onClick={(e) => e.preventDefault()} |
|||
> |
|||
{name} |
|||
</a> |
|||
</Popconfirm> |
|||
) |
|||
: p.push( |
|||
<a style={style ? style : { display: 'inline-block' }} key={key} onClick={(e) => handler(record)}> |
|||
{name} |
|||
</a> |
|||
); |
|||
} |
|||
} |
|||
|
|||
if (i < actions.length - 1) p.push(<Divider key={`divider${i}`} type='vertical' />); |
|||
return p; |
|||
}, [])} |
|||
</span> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
return columns; |
|||
}; |
|||
|
|||
getColumnData = (opts) => { |
|||
const { data, keypath, spliter, rawdata } = opts; |
|||
let v = null; |
|||
let outer = data[keypath[0]]; |
|||
if (Array.isArray(outer)) { |
|||
let values = loop(data, keypath, []); |
|||
v = rawdata ? values : values.join(spliter || '，'); |
|||
} else { |
|||
v = fromJS(data).getIn(keypath); |
|||
} |
|||
return v; |
|||
}; |
|||
|
|||
getPagination = () => { |
|||
const { total, curpage } = this.props; |
|||
const { pagination, current } = this.state; |
|||
pagination.total = total ? total : 0; |
|||
pagination.current = curpage ? curpage : current; |
|||
return pagination; |
|||
}; |
|||
//暂时只支持分页远程处理
|
|||
handleTableChange = (pagination, filters, sorter) => { |
|||
this.setState({ |
|||
current: pagination.current |
|||
}); |
|||
if (this.props.onTableChange) { |
|||
let limit = Number.parseInt(pagination.pageSize); |
|||
let offset = limit * (Number.parseInt(pagination.current) - 1); |
|||
this.props.onTableChange(limit, offset, pagination.current); |
|||
} |
|||
}; |
|||
render() { |
|||
const { scroll, rowSelection, data, isRequesting, showHeader, noShowPagination, rowKey } = this.props; |
|||
return ( |
|||
<AntdTable |
|||
className={'fs-table'} |
|||
id='fs-smart-seal-table' |
|||
dataSource={data} |
|||
loading={isRequesting} |
|||
showHeader={showHeader} |
|||
scroll={scroll ? scroll : {}} |
|||
rowKey={rowKey ? rowKey : 'id'} |
|||
rowSelection={rowSelection ? rowSelection : null} |
|||
columns={this.getColumns()} |
|||
onChange={this.handleTableChange} |
|||
pagination={noShowPagination ? false : this.getPagination()} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
Table.propTypes = { |
|||
data: PropTypes.array.isRequired, //数据资源
|
|||
attrs: PropTypes.array.isRequired, //属性数组用于colums {key,name,|render|isImg|nullable}
|
|||
actions: PropTypes.array, //操作栏数组 { key,name,style,handler,dropdown,dom}
|
|||
scroll: PropTypes.object, //同antd 用法
|
|||
rowSelection: PropTypes.object, //表格行是否可选择 配置项同antd
|
|||
onTableChange: PropTypes.func, //onChange触发函数
|
|||
showHeader: PropTypes.bool, //是否显示表头
|
|||
noShowPagination: PropTypes.bool, //是否显示分页器,
|
|||
showLessItems: PropTypes.bool, //是否显示较少页面内容,
|
|||
rowKey: PropTypes.string//表格记录的key
|
|||
}; |
|||
export default Table; |
|||
@ -1,34 +0,0 @@ |
|||
//宽度小于1920px |
|||
@media screen and (max-width:1920px) { |
|||
.fs-table :global(.ant-table tbody > tr > td) { |
|||
border: none; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #666; |
|||
} |
|||
.fs-table :global(.ant-table thead > tr > th) { |
|||
border: none; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
//宽度大于等于1920px |
|||
@media screen and (min-width:1920px) { |
|||
.fs-table :global(.ant-table tbody > tr > td) { |
|||
border: none; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #666; |
|||
} |
|||
.fs-table :global(.ant-table thead > tr > th) { |
|||
border: none; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
|
|||
// .fs-table :global(.fs-table-column-action) { |
|||
// font-size: 16px; |
|||
// } |
|||
@ -0,0 +1,26 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
|
|||
const Basis = ({ user, module, setModule }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ width: '100%', heigh: '100%' }}> |
|||
基础信息 |
|||
|
|||
</div > |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Basis); |
|||
@ -0,0 +1,26 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
import Title from 'antd/lib/skeleton/Title'; |
|||
|
|||
const Capacity = ({ user, }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ width: '100%', heigh: '100%' }}> |
|||
能耗监测 |
|||
</div > |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Capacity); |
|||
@ -0,0 +1,27 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
import Title from 'antd/lib/skeleton/Title'; |
|||
|
|||
const Electrical = ({ user, module, setModule }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ width: '100%', heigh: '100%' }}> |
|||
电排远控 |
|||
|
|||
</div > |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Electrical); |
|||
@ -0,0 +1,75 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
import Title from 'antd/lib/skeleton/Title'; |
|||
|
|||
const Header = ({ user, module, setModule }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ width: '100%', heigh: '100%' }}> |
|||
<div style={{ |
|||
width: '100%', height: 130, |
|||
backgroundImage: 'url(/assets/images/monitor/header-bg.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center', |
|||
display: 'flex', |
|||
justifyContent: 'space-between', |
|||
}}> |
|||
<div style={{ width: 140 }}>天气</div> |
|||
<div style={{ |
|||
width: 424, lineHeight: '136px', |
|||
fontFamily: 'YouSheBiaoTiHei', fontSize: 43, color: '#E2F8FF', letterSpacing: 4, fontWeight: 600 |
|||
}}>泵站自动化控制系统</div> |
|||
<div> |
|||
<div style={{ |
|||
width: 140, height: 52, |
|||
backgroundImage: 'url(/assets/images/monitor/user.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}}>{user?.name} |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|||
<div style={{ |
|||
width: '45%', height: 44, textAlign: 'center', |
|||
backgroundImage: 'url(/assets/images/monitor/strip.png)', |
|||
backgroundSize: '100% 25%', |
|||
backgroundPosition: 'center', |
|||
backgroundRepeat: 'no-repeat', |
|||
display: 'flex', |
|||
alignItems: 'flex-end', justifyContent: 'space-around', |
|||
}}> |
|||
{[{ title: '基础信息', key: 'basis' }, |
|||
{ title: '能耗监测', key: 'capacity' }, |
|||
{ title: '电排远控', key: 'electrical ' }, |
|||
{ title: '实时监测', key: 'realTime' },].map(v => { |
|||
return <div key={v.key} style={{ |
|||
width: 80, height: 30, lineHeight: '30px', |
|||
backgroundImage: `url(/assets/images/monitor/${module == v.key ? 'pitch-on' : 'chose-none'}.png)`, |
|||
backgroundSize: 'center', |
|||
backgroundPosition: 'center', |
|||
color: 'white', |
|||
}} onClick={() => setModule(v.key)}>{v.title}</div> |
|||
})} |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div > |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Header); |
|||
@ -0,0 +1,26 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
import Title from 'antd/lib/skeleton/Title'; |
|||
|
|||
const RealTime = ({ user, module, setModule }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ width: '100%', heigh: '100%' }}> |
|||
实时监测 |
|||
</div > |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(RealTime); |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
import SystemManagement from './systemManagement'; |
|||
|
|||
export { SystemManagement }; |
|||
@ -0,0 +1,50 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { FormOutlined, DeleteOutlined } from '@ant-design/icons'; |
|||
import { Spin, Tooltip, Button, Popconfirm, Row, Col, Tree, Card, Switch } from 'antd'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDept, updateDept, delDept } from '../actions/user'; |
|||
import Header from '../components/header'; |
|||
import Basis from '../components/basis'; |
|||
import Capacity from '../components/capacity'; |
|||
import Electrical from '../components/electrical'; |
|||
import RealTime from '../components/realTime'; |
|||
|
|||
const TreeNode = Tree.TreeNode; |
|||
|
|||
const SystemManagement = ({ clientHeight, user }) => { |
|||
|
|||
const [module, setModule] = useState('basis') |
|||
useEffect(() => { |
|||
|
|||
}, []) |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return ( |
|||
<div style={{ |
|||
width: '100vw', height: '100vh', |
|||
backgroundImage: 'url(/assets/images/monitor/screen-bg.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}}> |
|||
<Header module={module} setModule={setModule} /> |
|||
{module == 'basis' ? <Basis /> : ""} |
|||
{module == 'capacity' ? <Capacity /> : ""} |
|||
{module == 'electrical' ? <Electrical /> : ""} |
|||
{module == 'realTime' ? <RealTime /> : ""} |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(SystemManagement); |
|||
@ -0,0 +1,22 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { SettingOutlined } from '@ant-design/icons'; |
|||
|
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
// if (!Func.isAuthorized("ORG_MANAGE")) {
|
|||
// return null
|
|||
// }
|
|||
return (<></> |
|||
// <SubMenu key="organization" icon={<SettingOutlined />} title={'组织管理'}>
|
|||
// <Menu.Item key="userManage">
|
|||
// <Link to="/organization/user">部门成员</Link>
|
|||
// </Menu.Item>
|
|||
// <Menu.Item key="authority">
|
|||
// <Link to="/organization/authority">权限配置</Link>
|
|||
// </Menu.Item>
|
|||
// </SubMenu>
|
|||
); |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
'use strict'; |
|||
import { SystemManagement } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'outer', |
|||
route: { |
|||
path: '/systemManagement', |
|||
key: 'systemManagement', |
|||
breadcrumb: '泵站大屏', |
|||
component: SystemManagement, |
|||
// menuSelectKeys: ['userManage'],
|
|||
// menuOpenKeys: ['organization'],
|
|||
// childRoutes: [{
|
|||
// path: '/user',
|
|||
// key: 'userManage',
|
|||
// menuSelectKeys: ['userManage'],
|
|||
// component: UserManage,
|
|||
// breadcrumb: '部门成员',
|
|||
// }, {
|
|||
// path: '/authority',
|
|||
// key: 'authority',
|
|||
// component: Authority,
|
|||
// menuSelectKeys: ['authority'],
|
|||
// breadcrumb: '权限配置',
|
|||
// }]
|
|||
} |
|||
}]; |
|||
@ -1,88 +0,0 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { ProFormText, ModalForm, ProFormSelect } from '@ant-design/pro-form'; |
|||
|
|||
const DeptModal = (props) => { |
|||
const { visible, modalType, onVisibleChange, onConfirm, editData, depts } = props |
|||
let deptOptions = [], sonArr = []; |
|||
depts.map(d => { |
|||
deptOptions.push({ |
|||
value: d.id, |
|||
label: d.name |
|||
}); |
|||
|
|||
d.subordinate.map(ds => { |
|||
sonArr.push({ |
|||
value: ds.id, |
|||
label: ds.name |
|||
}) |
|||
}) |
|||
}) |
|||
const onFinish = (values) => { |
|||
if (onConfirm) { |
|||
if (modalType === 'edit') { |
|||
values.contract.parentDeptId = values.contract.parentDeptId || null |
|||
onConfirm(values) |
|||
} else { |
|||
onConfirm(values); |
|||
} |
|||
} |
|||
} |
|||
|
|||
const checkName = (rule, value, callback) => { |
|||
const list = modalType == 'edit' ? deptOptions.concat(sonArr).filter(g => g.value != editData.id) : deptOptions.concat(sonArr) |
|||
if (list.filter(s => s.label == value).length) { |
|||
callback('该名称已存在'); |
|||
} else { |
|||
callback(); |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<ModalForm |
|||
width={400} |
|||
title={modalType == 'edit' ? '编辑部门' : '新建部门'} |
|||
visible={visible} |
|||
onVisibleChange={onVisibleChange} |
|||
onFinish={onFinish} |
|||
destroyOnClose |
|||
initialValues={ |
|||
modalType == 'edit' ? |
|||
{ |
|||
contract: editData |
|||
} : |
|||
{ |
|||
contract: { |
|||
enable: true |
|||
} |
|||
} |
|||
} |
|||
> |
|||
<ProFormText |
|||
name={['contract', 'name']} |
|||
maxLength={24} |
|||
width="md" |
|||
label="部门名称" |
|||
required |
|||
placeholder="请输入部门名称" |
|||
rules={[{ required: true, message: '请输入部门名称' }, { validator: checkName }]} |
|||
/> |
|||
<ProFormSelect |
|||
name={['contract', 'dependence']} |
|||
label="上级部门" |
|||
request={async () => { |
|||
let t = modalType === 'edit' ? deptOptions.filter(i => i.value !== editData.id) : deptOptions |
|||
return t |
|||
}} |
|||
disabled={modalType === 'edit' ? editData.subordinate?.length === 0 ? false : true : false} |
|||
/> |
|||
</ModalForm> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
return { |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(DeptModal); |
|||
@ -1,74 +0,0 @@ |
|||
import React, { useRef, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
|
|||
const ResetPwd = (props) => { |
|||
const { visible, onVisibleChange, onConfirm } = props; |
|||
const formRef = useRef(); |
|||
|
|||
const onFinish = (values) => { |
|||
if (onConfirm) { |
|||
onConfirm(values); |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Spin spinning={false}> |
|||
<ModalForm |
|||
title={'重置密码'} |
|||
visible={visible} |
|||
onVisibleChange={onVisibleChange} |
|||
onFinish={onFinish} |
|||
formRef={formRef} |
|||
destroyOnClose |
|||
> |
|||
<ProFormText.Password |
|||
name={['password']} |
|||
width="md" |
|||
label="新密码" |
|||
required |
|||
placeholder="请输入密码" |
|||
fieldProps={{ |
|||
autocomplete: 'new-password' |
|||
}} |
|||
rules={[ |
|||
{ required: true, message: '请填写密码' }, |
|||
{ min: 6, message: '请填写至少6位密码' }, |
|||
]} |
|||
/> |
|||
<ProFormText.Password |
|||
name={['checkPassword']} |
|||
width="md" |
|||
label="确认密码" |
|||
required |
|||
autocomplete='off' |
|||
placeholder="请输入密码" |
|||
rules={[ |
|||
{ required: true, message: '请再次填写密码' }, |
|||
{ min: 6, message: '请填写至少6位密码' }, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
const pwd = formRef.current.getFieldValue('password'); |
|||
if (!value) { |
|||
callback(); |
|||
} |
|||
if (pwd == value) { |
|||
callback(); |
|||
} else { |
|||
callback('两次输入的密码不一致'); |
|||
} |
|||
} |
|||
} |
|||
]} |
|||
/> |
|||
</ModalForm> |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
return {}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(ResetPwd); |
|||
@ -1,121 +0,0 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { Checkbox, Table } from 'antd'; |
|||
import { useState } from 'react'; |
|||
|
|||
const CheckboxGroup = Checkbox.Group; |
|||
|
|||
const Resource = props => { |
|||
const { roleData, userRole, userSelected, setResCode, userType } = props; |
|||
const [indeterminate, setIndeterminate] = useState({}); |
|||
const [roleCheck, setRoleCheck] = useState({});//一级权限码
|
|||
const [parentRoleCheck, setParentRoleCheck] = useState({}); //二级权限码
|
|||
|
|||
const roleDatas=roleData.slice(0) |
|||
useEffect(() => { |
|||
const check = {} |
|||
const parentCheck = {} |
|||
const initInd = {} |
|||
roleData && roleData.map && roleData.map(r => { |
|||
let currentInd = false; |
|||
let sum = 0; |
|||
if (r.resources) { |
|||
check[r.code] = [] |
|||
r.resources.map(child => { |
|||
if (userRole.find(code => code.resourceId == child.code)) { |
|||
currentInd = true; |
|||
sum++; |
|||
check[r.code].push(child.code); |
|||
} |
|||
}) |
|||
} |
|||
parentCheck[r.code] = r.resources.length === sum |
|||
initInd[r.code] = parentCheck[r.code] ? false : currentInd |
|||
}); |
|||
setParentRoleCheck(parentCheck) |
|||
setRoleCheck(check); |
|||
setIndeterminate(initInd); |
|||
}, [userRole]); |
|||
|
|||
const setResData = (role) => { |
|||
let codes = []; |
|||
// Object.keys(partRole).map(r => {
|
|||
// if (partRole[r]) codes.push(r)
|
|||
// })
|
|||
Object.keys(role).map(r => { |
|||
if (role[r].length) { |
|||
codes.push(r); |
|||
} |
|||
codes = codes.concat(role[r]) |
|||
}) |
|||
setResCode(codes) |
|||
} |
|||
return ( |
|||
<Table |
|||
bordered |
|||
pagination={false} |
|||
dataSource={roleDatas} |
|||
columns={[{ |
|||
title: '功能', |
|||
key: 'name', |
|||
dataIndex: 'name', |
|||
render: (text, record) => { |
|||
const parentCode = record.code |
|||
return <Checkbox |
|||
|
|||
indeterminate={indeterminate[parentCode]} |
|||
onChange={(e) => { |
|||
const currentParCheck = JSON.parse(JSON.stringify(parentRoleCheck)); |
|||
currentParCheck[parentCode] = e.target.checked; |
|||
const currentCode = JSON.parse(JSON.stringify(roleCheck)); |
|||
currentCode[parentCode] = e.target.checked ? roleData.find(r => r.code == parentCode).resources.map(r => r.code) : [] |
|||
const currentInd = JSON.parse(JSON.stringify(indeterminate)); |
|||
currentInd[parentCode] = false; |
|||
|
|||
setParentRoleCheck(currentParCheck); |
|||
setRoleCheck(currentCode); |
|||
setIndeterminate(currentInd); |
|||
setResData(currentCode) |
|||
}} |
|||
checked={parentRoleCheck[parentCode] || false} |
|||
disabled={userSelected === "SuperAdmin" || userType === 4} |
|||
options={''} |
|||
> |
|||
{text} |
|||
</Checkbox> |
|||
} |
|||
}, { |
|||
title: '列表', |
|||
key: 'resources', |
|||
dataIndex: 'resources', |
|||
render: (text, record) => { |
|||
let data = []; |
|||
console.log() |
|||
text.map(s => { s.name !== "整治汇总编辑" ? data.push({ label: s.name, value: s.code }) : '' }) |
|||
let parentCode = record.code; |
|||
|
|||
return <CheckboxGroup |
|||
disabled={userSelected === "SuperAdmin" || userType === 4} |
|||
options={data} |
|||
value={roleCheck[parentCode] || []} |
|||
onChange={value => { |
|||
const checkArr = JSON.parse(JSON.stringify(roleCheck)); |
|||
const parentCheck = JSON.parse(JSON.stringify(parentRoleCheck)); |
|||
const ind = JSON.parse(JSON.stringify(indeterminate)); |
|||
const currentCode = roleData.find(r => r.code == parentCode) || {} |
|||
|
|||
checkArr[parentCode] = value; |
|||
ind[parentCode] = !!value.length && value.length < currentCode.resources.length |
|||
parentCheck[parentCode] = value.length === currentCode.resources.length |
|||
|
|||
setRoleCheck(checkArr); |
|||
setIndeterminate(ind); |
|||
setParentRoleCheck(parentCheck); |
|||
setResData(checkArr) |
|||
}} |
|||
/> |
|||
} |
|||
}]} |
|||
></Table > |
|||
) |
|||
} |
|||
export default Resource |
|||
@ -1,171 +0,0 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
|
|||
const UserModal = (props) => { |
|||
const { visible, modalType, depData, onVisibleChange, onConfirm, editData } = props |
|||
const reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/; |
|||
const onFinish = (values) => { |
|||
if (onConfirm) { |
|||
onConfirm(values); |
|||
} |
|||
} |
|||
const mobile = (value) => { |
|||
if (reg_tel.test(value)) { |
|||
return |
|||
} |
|||
return message('请输入姓名') |
|||
} |
|||
return ( |
|||
<Spin spinning={false}> |
|||
<ModalForm |
|||
title={modalType == 'edit' ? '编辑用户' : '新建用户'} |
|||
visible={visible} |
|||
onVisibleChange={onVisibleChange} |
|||
onFinish={onFinish} |
|||
destroyOnClose |
|||
initialValues={ |
|||
modalType == 'edit' ? |
|||
{ |
|||
contract: editData |
|||
} : |
|||
{ |
|||
contract: { |
|||
enable: true |
|||
} |
|||
} |
|||
} |
|||
> |
|||
<ProForm.Group> |
|||
<ProFormText |
|||
name={['contract', 'name']} |
|||
maxLength={24} |
|||
width="md" |
|||
label="姓名" |
|||
required |
|||
placeholder="请输入姓名" |
|||
rules={[{ required: true, message: '请输入姓名' }]} |
|||
/> |
|||
<ProFormText |
|||
name={['contract', 'phone']} |
|||
width="md" |
|||
label="用户名(手机号)" |
|||
required |
|||
fieldProps={{ |
|||
maxLength: 11, |
|||
}} |
|||
getValueFromEvent={(event) => { |
|||
return event.target.value.replace(/\D/g, '') |
|||
}} |
|||
placeholder="请输入用户名(手机号)" |
|||
rules={[ |
|||
{ required: true, valueType: Number, max: 11 }, { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: "请输入正确的手机号" } |
|||
]} |
|||
/> |
|||
</ProForm.Group> |
|||
<ProForm.Group> |
|||
<ProFormTreeSelect |
|||
name={['contract', 'departmentId']} |
|||
placeholder="请选择所属部门" |
|||
width="md" |
|||
label="所属部门" |
|||
required |
|||
fieldNames={{ |
|||
title: 'name', |
|||
key: 'id', |
|||
children: 'subordinate' |
|||
}} |
|||
onSelect={(selectedKeys, { selected, selectedNodes }) => { |
|||
if (selected) { |
|||
setDepSelectedKeys(selectedKeys) |
|||
setDepSelected(selectedNodes[0].name || "") |
|||
dispatch(getDepUser(selectedKeys[0])) |
|||
} |
|||
}} |
|||
fieldProps={{ |
|||
fieldNames: { |
|||
label: 'title', |
|||
}, |
|||
treeDefaultExpandAll: false, |
|||
}} |
|||
rules={[{ required: true, message: '请选择所属部门' }]} |
|||
request={async () => { |
|||
console.log(depData); |
|||
return depData |
|||
}} |
|||
expandedKeys={["title"]} |
|||
/> |
|||
< ProFormText |
|||
name={['contract', 'post']} |
|||
width="md" |
|||
label="职位" |
|||
// required
|
|||
placeholder="请输入职位" |
|||
/> |
|||
</ProForm.Group> |
|||
<ProForm.Group> |
|||
<ProFormText |
|||
name={['contract', 'email']} |
|||
width="md" |
|||
label="邮箱" |
|||
// required
|
|||
placeholder="请输入邮箱" |
|||
rules={[ |
|||
// { required: true, message: '请输入邮箱' },
|
|||
{ type: 'email', message: '请输入正确格式的邮箱' }, |
|||
]} |
|||
/> |
|||
{modalType == 'edit' ? null : <ProFormText.Password |
|||
name={['contract', 'password']} |
|||
width="md" |
|||
label="密码" |
|||
required |
|||
placeholder="请输入密码" |
|||
fieldProps={{ |
|||
autocomplete: 'new-password' |
|||
}} |
|||
rules={[ |
|||
{ required: true, message: '请填写密码' }, |
|||
{ min: 6, message: '请填写至少6位密码' }, |
|||
]} |
|||
/>} |
|||
</ProForm.Group> |
|||
<ProForm.Group> |
|||
<ProFormSwitch |
|||
name={['contract', 'enable']} |
|||
width="md" |
|||
label="是否启用" |
|||
placeholder="请选择" |
|||
// defaultChecked
|
|||
valuePropName="checked" |
|||
/> |
|||
</ProForm.Group> |
|||
</ModalForm> |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { depMessage } = state; |
|||
|
|||
const pakData = (dep) => { |
|||
// console.log(dep);
|
|||
return dep.map((d) => { |
|||
return { |
|||
title: d.name, |
|||
value: d.id, |
|||
// key: d.id,
|
|||
children: pakData(d.subordinate) |
|||
} |
|||
}) |
|||
} |
|||
let depData = pakData(depMessage.data || []) |
|||
|
|||
return { |
|||
loading: depMessage.isRequesting, |
|||
depData, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(UserModal); |
|||
@ -1,149 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Row, Col, Card, Button, Tree, Empty } from 'antd'; |
|||
import { getDepMessage, getDepUser } from '../actions/user'; |
|||
import { getResource, getUserResource, postUserRes } from '../actions/authority'; |
|||
import Resource from '../components/resource'; |
|||
|
|||
const Authority = (props) => { |
|||
const { dispatch, loading, depMessage, depUser, resource, userResource, clientHeight } = props |
|||
const [depSelectedKeys, setDepSelectedKeys] = useState([]) |
|||
const [userSelectedKeys, setUserSelectedKeys] = useState([]) |
|||
const [depSelected, setDepSelected] = useState() |
|||
const [userSelected, setUserSelected] = useState() |
|||
const [resCode, setResCode] = useState({}) |
|||
const [useName, setUseName] = useState()// 选中名字
|
|||
const [userType, setUserType] = useState() |
|||
console.log(resource) |
|||
useEffect(() => { |
|||
dispatch(getResource()) |
|||
if (!(depMessage && depMessage.length)) { |
|||
dispatch(getDepMessage()) |
|||
} |
|||
|
|||
}, []) |
|||
useEffect(() => { |
|||
if (depMessage.length) { |
|||
setDepSelectedKeys([depMessage[0].id]) |
|||
setDepSelected([depMessage[0].name]) |
|||
dispatch(getDepUser(depMessage[0].id)) |
|||
} |
|||
|
|||
}, [depMessage]) |
|||
useEffect(() => { |
|||
if (depUser.length) { |
|||
setUserSelectedKeys([depUser[0].id]) |
|||
setUserSelected(depUser[0].username) |
|||
dispatch(getUserResource(depUser[0].id)) |
|||
setUseName(depUser[0].name) |
|||
} |
|||
console.log(depUser, 'depUser') |
|||
}, [depUser]) |
|||
|
|||
const handleSave = () => { |
|||
dispatch(postUserRes({ userId: userSelectedKeys[0], resCode: resCode })).then(res => { |
|||
if (res.success) { |
|||
dispatch(getUserResource(userSelectedKeys[0])) |
|||
} |
|||
}) |
|||
} |
|||
return ( |
|||
<Spin spinning={loading}> |
|||
<Row gutter={16}> |
|||
<Col span={4} style={{ height: '100%' }}> |
|||
<Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}> |
|||
{ |
|||
depMessage.length ? |
|||
<Tree |
|||
height={clientHeight - 100} |
|||
defaultExpandedKeys={[depMessage[0].id]} |
|||
selectedKeys={depSelectedKeys} |
|||
onSelect={(selectedKeys, { selected, selectedNodes, node }) => { |
|||
setUserType(selectedNodes[0].type) |
|||
if (selected) { |
|||
setDepSelectedKeys(selectedKeys) |
|||
setDepSelected(selectedNodes[0].name || "") |
|||
dispatch(getDepUser(selectedKeys[0])) |
|||
} |
|||
|
|||
}} |
|||
treeData={depMessage} |
|||
fieldNames={{ |
|||
title: 'name', |
|||
key: 'id', |
|||
children: 'subordinate' |
|||
}} |
|||
/> : '' |
|||
} |
|||
</Card> |
|||
</Col> |
|||
<Col span={4} style={{ height: '100%', }}> |
|||
<Card title={(depSelected ? `[${depSelected}]` : "") + '用户列表'} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}> |
|||
{ |
|||
depUser.length ? |
|||
<Tree |
|||
height={clientHeight - 100} |
|||
defaultSelectedKeys={[depUser[0].id]} |
|||
selectedKeys={userSelectedKeys} |
|||
onSelect={(selectedKeys, { selected, selectedNodes, node, event }) => { |
|||
const name = node.name |
|||
setUseName(name) |
|||
|
|||
if (selected) { |
|||
setUserSelectedKeys(selectedKeys) |
|||
setUserSelected(selectedNodes[0].username || '') |
|||
dispatch(getUserResource(selectedKeys[0])) |
|||
} |
|||
|
|||
}} |
|||
treeData={depUser} |
|||
fieldNames={{ |
|||
title: 'name', |
|||
key: 'id' |
|||
}} |
|||
/> : <Empty /> |
|||
} |
|||
</Card> |
|||
</Col> |
|||
<Col span={16} style={{ height: '100%', }}> |
|||
{depUser.length ? |
|||
<Card title={`[${useName ? useName : '管理员'}] 功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}> |
|||
<Resource |
|||
userSelected={userSelected} |
|||
roleData={resource} |
|||
userRole={userResource} |
|||
setResCode={setResCode} |
|||
userType={userType} |
|||
/> |
|||
<Row type="flex" justify="center" style={{ marginBottom: 16, marginTop: 16, textAlign: 'center' }}> |
|||
<Col span="24"> |
|||
<Button |
|||
disabled={userSelected === "SuperAdmin" || userType === 4} |
|||
onClick={handleSave} |
|||
style={{ width: '60%' }} |
|||
type='primary'>保存修改</Button> |
|||
</Col></Row> |
|||
</Card> |
|||
: <Card title={`[]功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}> |
|||
<Empty /> |
|||
</Card> |
|||
} |
|||
</Col> |
|||
</Row> |
|||
</Spin > |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { userResource, resource, depMessage, depUser, global } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
loading: depMessage.isRequesting || depUser.isRequesting || resource.isRequesting, |
|||
userResource: userResource.data || [], |
|||
resource: resource.data || [], |
|||
depMessage: depMessage.data || [], |
|||
depUser: depUser.data || [] |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Authority); |
|||
@ -1,6 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import Authority from './authority'; |
|||
import UserManage from './user'; |
|||
|
|||
export { Authority, UserManage }; |
|||
@ -1,332 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { FormOutlined, DeleteOutlined } from '@ant-design/icons'; |
|||
import { Spin, Tooltip, Button, Popconfirm, Row, Col, Tree, Card, Switch } from 'antd'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDept, updateDept, delDept } from '../actions/user'; |
|||
import UserModal from '../components/userModal'; |
|||
import ResetPwd from '../components/resetPwd'; |
|||
import DeptModal from '../components/deptModal'; |
|||
|
|||
const TreeNode = Tree.TreeNode; |
|||
|
|||
const UserManage = (props) => { |
|||
const user = JSON.parse(sessionStorage.getItem('user')); |
|||
|
|||
const { dispatch, loading, depMessage, depUser, clientHeight } = props; |
|||
// 部门
|
|||
const [deptModalVisible, setDeptModalVisible] = useState(false); |
|||
const [deptModalType, setDeptModalType] = useState(); |
|||
const [deptModalRecord, setDeptModalRecord] = useState(); |
|||
|
|||
// 成员
|
|||
const [modalVisible, setModalVisible] = useState(false); |
|||
const [modalType, setModalType] = useState(); |
|||
const [modalRecord, setModalRecord] = useState(); |
|||
const [pwdModalVisible, setPwdModalVisible] = useState(false); |
|||
const [depSelectedKeys, setDepSelectedKeys] = useState([]) |
|||
const [rowSelected, setRowSelected] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
dispatch(getDepMessage()) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (depMessage.length) { |
|||
setDepSelectedKeys([depMessage[0].id]) |
|||
dispatch(getDepUser(depMessage[0].id)) |
|||
} |
|||
}, [depMessage]) |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'name', |
|||
}, { |
|||
title: '用户名(手机号)', |
|||
dataIndex: 'username', |
|||
}, |
|||
{ |
|||
title: '职位', |
|||
dataIndex: 'post', |
|||
}, { |
|||
title: '邮箱', |
|||
dataIndex: 'email', |
|||
}, { |
|||
title: '启用状态', |
|||
dataIndex: 'enable', |
|||
render: (_, r) => { |
|||
return <Switch checkedChildren="启用" unCheckedChildren="禁用" disabled defaultChecked={r.enable} /> |
|||
} |
|||
}, { |
|||
title: '操作', |
|||
dataIndex: 'action', |
|||
render: (dom, record) => { |
|||
|
|||
return record.username == 'SuperAdmin' ? '' : [ |
|||
<Button type="link" onClick={() => { openModal('edit', record) }}>编辑</Button>, |
|||
<Popconfirm |
|||
title="确认删除?" |
|||
onConfirm={() => { |
|||
delUsers([record.id]) |
|||
}} |
|||
> |
|||
<Button type="link">删除</Button> |
|||
</Popconfirm>, |
|||
<Button |
|||
type="link" |
|||
onClick={() => { |
|||
setModalRecord(record); |
|||
setPwdModalVisible(true); |
|||
}} |
|||
>重置密码</Button> |
|||
] |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
//弹窗确认
|
|||
const onConfirm = (values) => { |
|||
if (modalType == 'edit') { |
|||
dispatch(updateUser(modalRecord.id, values.contract)).then(res => { |
|||
if (res.success) { |
|||
setModalVisible(false); |
|||
dispatch(getDepUser(depSelectedKeys[0])); |
|||
} |
|||
}); |
|||
} else { |
|||
dispatch(createUser(values.contract)).then(res => { |
|||
if (res.success) { |
|||
setModalVisible(false); |
|||
dispatch(getDepUser(depSelectedKeys[0])); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
|
|||
//打开弹窗
|
|||
const openModal = (type, record) => { |
|||
setModalVisible(true); |
|||
setModalType(type); |
|||
if (type == 'edit') { |
|||
setModalRecord(record); |
|||
} else { |
|||
setModalRecord(null); |
|||
} |
|||
} |
|||
|
|||
//删除用户
|
|||
const delUsers = (ids, type) => { |
|||
dispatch(delUser(ids)).then(res => { |
|||
dispatch(getDepUser(depSelectedKeys[0])); |
|||
if (type == 'batch') { |
|||
setRowSelected([]); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
//重置密码
|
|||
const onPwdConfirm = (values) => { |
|||
dispatch(resetPwd(modalRecord.id, { password: values.password })).then(res => { |
|||
if (res.success) { |
|||
setPwdModalVisible(false); |
|||
dispatch(getDepUser(depSelectedKeys[0])); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
const openDeptModal = (type, record) => { |
|||
console.log(type, record, 'type, record') |
|||
|
|||
setDeptModalVisible(true); |
|||
setDeptModalType(type); |
|||
if (type === 'edit') { |
|||
setDeptModalRecord(record); |
|||
} else { |
|||
setDeptModalRecord(null); |
|||
} |
|||
} |
|||
const onDeptConfirm = (values) => { |
|||
if (deptModalType === 'edit') { |
|||
dispatch(updateDept(deptModalRecord.id, values.contract)).then(res => { |
|||
if (res.success) { |
|||
setDeptModalVisible(false); |
|||
dispatch(getDepMessage()) |
|||
} |
|||
}); |
|||
} else { |
|||
dispatch(createDept(values.contract)).then(res => { |
|||
if (res.success) { |
|||
setDeptModalVisible(false); |
|||
dispatch(getDepMessage()) |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
const delDepartment = (id) => { |
|||
dispatch(delDept(id)).then(res => { |
|||
if (res.success) { |
|||
dispatch(getDepMessage()) |
|||
} |
|||
}); |
|||
} |
|||
|
|||
const renderTree = (item, id) => { |
|||
// let cannotDel = item.users.length || item.subordinate?.filter(is => is.users.length).length;//自己下面有成员 或者下级部门下有成员 不能删除
|
|||
return <div style={{ display: 'flex', width: '6vw', justifyContent: 'space-between' }}> |
|||
<Tooltip title={item.name}> |
|||
<div style={{ width: '70%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div> |
|||
</Tooltip> |
|||
<div style={{ width: '30%' }} > |
|||
{ |
|||
depSelectedKeys == id && user.username === "SuperAdmin" ? |
|||
<> |
|||
<FormOutlined onClick={() => { |
|||
setDeptModalRecord(item) |
|||
setDeptModalVisible(true) |
|||
setDeptModalType('edit') |
|||
}} /> |
|||
{ |
|||
<Popconfirm title='是否确认删除?' onConfirm={() => { delDepartment(id) }}> |
|||
<DeleteOutlined style={{ marginLeft: 5 }} /> |
|||
</Popconfirm> |
|||
} |
|||
</> : null |
|||
} |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
return (<div > |
|||
<Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */> |
|||
<Row gutter={16} /* style={{ overflow: "scroll" }} */> |
|||
<Col flex="260px" style={{ height: '100%' }}> |
|||
<Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24, }}> |
|||
{ |
|||
user.username === "SuperAdmin" && <Button |
|||
type="primary" |
|||
key="primary" |
|||
style={{ margin: '16px 0px' }} |
|||
onClick={() => openDeptModal('create')} |
|||
>新建部门</Button> |
|||
} |
|||
{ |
|||
depMessage.length ? |
|||
<Tree |
|||
height={clientHeight - 95} |
|||
defaultExpandedKeys={[depMessage[0].id]} |
|||
selectedKeys={depSelectedKeys} |
|||
onSelect={(selectedKeys, e) => { |
|||
if (e.selected) { |
|||
setDepSelectedKeys(selectedKeys) |
|||
dispatch(getDepUser(selectedKeys[0])) |
|||
} |
|||
}} |
|||
// treeData={depMessage}
|
|||
// fieldNames={{
|
|||
// title: 'name',
|
|||
// key: 'id',
|
|||
// children: 'subordinate'
|
|||
// }}
|
|||
> |
|||
{ |
|||
depMessage.map((s, index) => { |
|||
return <TreeNode title={renderTree(s, s.id)} key={s.id} > |
|||
{ |
|||
s.subordinate.map(k => { |
|||
return <TreeNode title={renderTree(k, k.id)} key={k.id} onMouseOver={() => { setIShowIcon(k.id) }} onMouseOut={() => { setIShowIcon(null) }}> |
|||
</TreeNode> |
|||
}) |
|||
} |
|||
</TreeNode> |
|||
}) |
|||
} |
|||
</Tree> : '' |
|||
} |
|||
</Card> |
|||
</Col> |
|||
|
|||
<Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}> |
|||
<Card title="用户" bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}> |
|||
<ProTable |
|||
columns={columns} |
|||
dataSource={depUser} |
|||
style={{ width: "100% ", height: clientHeight - 95, overflow: "auto" }} |
|||
rowSelection={{ |
|||
selectedRowKeys: rowSelected, |
|||
onChange: (selectedRowKeys) => { |
|||
setRowSelected(selectedRowKeys); |
|||
|
|||
}, |
|||
getCheckboxProps: (record) => { |
|||
return { |
|||
disabled: record.username === 'SuperAdmin', |
|||
} |
|||
}, |
|||
}} |
|||
options={false} |
|||
search={false} |
|||
rowKey="id" |
|||
toolBarRender={() => [ |
|||
<span> |
|||
<Button |
|||
type="primary" |
|||
key="primary" |
|||
style={{ marginRight: 10 }} |
|||
onClick={() => openModal('create')} |
|||
>新建用户</Button> |
|||
<Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button> |
|||
<Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }}> |
|||
<Button>批量删除</Button> |
|||
</Popconfirm> |
|||
</span> |
|||
]} |
|||
/> |
|||
</Card> |
|||
{ |
|||
deptModalVisible ? |
|||
<DeptModal |
|||
visible={deptModalVisible} |
|||
onVisibleChange={setDeptModalVisible} |
|||
modalType={deptModalType} |
|||
onConfirm={onDeptConfirm} |
|||
editData={deptModalRecord} |
|||
depts={depMessage} |
|||
/> |
|||
: '' |
|||
} |
|||
{ |
|||
depMessage.length && modalVisible ? |
|||
<UserModal |
|||
visible={modalVisible} |
|||
onVisibleChange={setModalVisible} |
|||
modalType={modalType} |
|||
onConfirm={onConfirm} |
|||
editData={modalRecord} |
|||
/> |
|||
: '' |
|||
} |
|||
{pwdModalVisible ? <ResetPwd visible={pwdModalVisible} |
|||
onVisibleChange={setPwdModalVisible} |
|||
onConfirm={onPwdConfirm} /> : ''} |
|||
|
|||
</Col> |
|||
</Row> |
|||
</Spin> |
|||
</div> |
|||
|
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { depMessage, depUser, global } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
loading: depMessage.isRequesting, |
|||
depMessage: depMessage.data || [], |
|||
depUser: depUser.data || [] |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(UserManage); |
|||
@ -1,22 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { SettingOutlined } from '@ant-design/icons'; |
|||
|
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
// if (!Func.isAuthorized("ORG_MANAGE")) {
|
|||
// return null
|
|||
// }
|
|||
return ( |
|||
<SubMenu key="organization" icon={<SettingOutlined />} title={'组织管理'}> |
|||
<Menu.Item key="userManage"> |
|||
<Link to="/organization/user">部门成员</Link> |
|||
</Menu.Item> |
|||
<Menu.Item key="authority"> |
|||
<Link to="/organization/authority">权限配置</Link> |
|||
</Menu.Item> |
|||
</SubMenu> |
|||
); |
|||
} |
|||
@ -1,26 +0,0 @@ |
|||
'use strict'; |
|||
import { UserManage, Authority } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/organization', |
|||
key: 'organization', |
|||
breadcrumb: '组织管理', |
|||
menuSelectKeys: ['userManage'], |
|||
menuOpenKeys: ['organization'], |
|||
childRoutes: [{ |
|||
path: '/user', |
|||
key: 'userManage', |
|||
menuSelectKeys: ['userManage'], |
|||
component: UserManage, |
|||
breadcrumb: '部门成员', |
|||
}, { |
|||
path: '/authority', |
|||
key: 'authority', |
|||
component: Authority, |
|||
menuSelectKeys: ['authority'], |
|||
breadcrumb: '权限配置', |
|||
}] |
|||
} |
|||
}]; |
|||
@ -1,9 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import * as plan from './plan' |
|||
import * as record from './record' |
|||
|
|||
export default { |
|||
...plan, |
|||
...record, |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function getPatrolPlan() { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_PATROL_PLAN', |
|||
url: ApiTable.patrolPlan, |
|||
msg: { error: '获取巡检计划失败' }, |
|||
}); |
|||
} |
|||
|
|||
export function createPatrolPlan(data) { |
|||
return dispatch => basicAction({ |
|||
type: 'post', |
|||
data, |
|||
dispatch: dispatch, |
|||
actionType: 'CREATE_PATROL_PLAN', |
|||
url: ApiTable.patrolPlan, |
|||
msg: { error: '新增巡检计划失败' }, |
|||
}); |
|||
} |
|||
|
|||
export function delPatrolPlan(id) { |
|||
return dispatch => basicAction({ |
|||
type: 'del', |
|||
dispatch: dispatch, |
|||
actionType: 'DEL_PATROL_PLAN', |
|||
url: ApiTable.delPatrolPlan.replace('{id}', id), |
|||
msg: { error: '删除巡检计划失败' }, |
|||
}); |
|||
} |
|||
|
|||
export function updatePatrolPlan(data) { |
|||
return dispatch => basicAction({ |
|||
type: 'put', |
|||
data, |
|||
dispatch: dispatch, |
|||
actionType: 'UPDATE_PATROL_PLAN', |
|||
url: ApiTable.patrolPlan, |
|||
msg: { error: '修改巡检计划失败' }, |
|||
}); |
|||
} |
|||
|
|||
export function getUserList() { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_USER_LIST', |
|||
url: ApiTable.getDepUser.replace('{depId}', null), |
|||
msg: { error: '获取人员列表失败' }, |
|||
reducer: { name: 'userList' } |
|||
}); |
|||
} |
|||
|
|||
export function getProjectList(query) { |
|||
return (dispatch) => basicAction({ |
|||
type: 'get', |
|||
query, |
|||
dispatch, |
|||
actionType: 'GET_PROJEECT_LIST', |
|||
url: ApiTable.getProjectList, |
|||
msg: { error: '获取结构物列表失败', }, |
|||
reducer: { name: 'structureList' } |
|||
}); |
|||
} |
|||
|
|||
export function positionList(query) { |
|||
return (dispatch) => basicAction({ |
|||
type: 'get', |
|||
query, |
|||
dispatch, |
|||
actionType: 'POSITION_LIST', |
|||
url: ApiTable.position, |
|||
msg: { error: '获取点位列表失败', }, |
|||
}); |
|||
} |
|||
@ -1,17 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
|
|||
export const GET_PATROL_RECORD_LIST = 'GET_PATROL_RECORD_LIST'; |
|||
export const GET_PATROL_RECORD_LIST_SUCCESS = 'GET_PATROL_RECORD_LIST_SUCCESS'; |
|||
export const GET_PATROL_RECORD_LIST_ERROR = 'GET_PATROL_RECORD_LIST_ERROR'; |
|||
export function records(url) { |
|||
return (dispatch) => basicAction({ |
|||
type: 'get', |
|||
dispatch, |
|||
actionType: GET_PATROL_RECORD_LIST, |
|||
url: url, |
|||
msg: { error: '获取巡检记录失败', }, |
|||
reducer: { name: 'record' } |
|||
}); |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue