monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by ww
Commit feb994e964eaa21f192265160f36c53f22ff0ae7 1 parent fe6f4438

chore: 宁夏需求;停机计划增加申请单;资源详情页增加日志插入接口;

Inline Side-by-side
Showing 12 changed files with 829 additions and 95 deletions
... ... @@ -3376,6 +3376,14 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
"provider": res.provider,
"model": res.model
};
// 增加详情页接口-记录操作日志
admin.req({
url: common.domainName + `/api-web/inspectionReportRecord/add?resId=${resId}`,
success:(res) =>{
}
});
$.ajax({
url: common.domainName + "/api-web/favorites/checkResIsExist",
async: false,
... ...
/** 采集协议基本信息 */
layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'view', 'laytpl', 'bustype', 'userlist', 'admin'], function (exports) {
layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'view', 'setStep', 'laytpl', 'bustype', 'userlist', 'admin'], function (exports) {
var $ = layui.$;
var form = layui.form;
var common = layui.common;
... ... @@ -8,6 +8,7 @@ layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'vie
var view = layui.view;
var laytpl = layui.laytpl;
var admin = layui.admin;
var setStep = layui.setStep;
//对外暴露的接口
exports('shutdownplanAdd', function (data) {
var cutoverId = data.cutoverId;
... ... @@ -29,8 +30,16 @@ layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'vie
var userSelect;
var acceptUserName = '';
setTimeout(function () {
new setStep({
content: '.stepCont-shutdownplan',
steps: ['1', '2'],
descriptionHeader: ['基本信息', '升级申请审批信息'],
showBtn: false,
pageCount: '.pageCont',
curStep: 1,//当前显示第几页
})
setTimeout(function () {
laydate.render({
elem: '#shutdownplanEditStartTime'
... ... @@ -41,6 +50,27 @@ layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'vie
elem: '#shutdownplanEditEndTime'
, type: 'datetime'
});
laydate.render({
elem: 'input[name="appDate"]'
, type: 'datetime'
});
admin.req({
url: domainName + '/inspection-report/file/document/list?id=63a5c772d6fb6c7dba6bd3d4d337315c&name=&types=&docIds=&checkAuth=true',
data: {},
success: function (res) {
if (res && res.success) {
let opt = '';
res.data.forEach(item => {
opt += `<option value="${item.id}">${item.fileName}</option>`
})
$('select[name="appDept"]').append(opt);
}
}
});
admin.req({
url: domainName + '/api-web/home/business/findAllBusType',
data: {'type': 'per'},
... ... @@ -223,8 +253,47 @@ layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'vie
}
}, 0);
form.on('submit(verifyShutdownplanBtn)', function (data) {
$('#verifyShutdownplanBtn').attr('verify-result',true);
document.querySelectorAll('#page2 input').forEach((e,i) => {
$(e).attr("lay-verify","required");
})
// 获取业务名称
let arr = busIdSelect.getValue()
// 系统名称：填写停机业务（会存在多个业务系统名称）
$('input[name="appName"]').val(arr.map(item => item.name).join(','));
// 申请日期：填写停机计划当天日期
let now = new Date();
let year = now.getFullYear(); // 获取年份
let month = now.getMonth() + 1; // 获取月份（注意，月份是从0开始计数的，所以需要加1）
let date = now.getDate(); // 获取日期
let hours = now.getHours(); // 获取小时
let minutes = now.getMinutes(); // 获取分钟
let seconds = now.getSeconds(); // 获取秒钟
$('input[name="appDate"]').val(`${year}-${month}-${date} ${hours}:${minutes}:${seconds}`);
// 升级时间：计划升级开始止结束时间
$('input[name="upgradeStartTime"]').val($('#shutdownplanEditStartTime').val());
$('input[name="upgradeEndTime"]').val($('#shutdownplanEditEndTime').val());
// 申请内容：填停机计划名称
$('input[name="appContent"]').val(data.field.cutoverName);
});
form.on('submit(saveshutdownplanBtn)', function (data) {
var bean = data.field;
delete bean['upgradeStartTime']
delete bean['upgradeEndTime']
delete bean['appName']
delete bean['upgradeEndTime']
bean.acceptUserName = acceptUserName;
var loading = layer.load(2);
$.ajax({
... ... @@ -331,4 +400,4 @@ layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'xmSelect', 'vie
}
}
});
});
\ No newline at end of file
});
... ...
... ... @@ -261,13 +261,14 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
return html
}
}, {
title: '操作', fixed: 'right', align: 'center', minWidth: 100, templet: function (d) {
title: '操作', fixed: 'right', align: 'center', minWidth: 150, templet: function (d) {
var html = '<div><button shutdownplan-data-delete="' + d.cutoverId + '" class="layui-btn layui-btn-normal layui-btn-xs" lay-tips="删除"><i class="layui-icon layui-icon-delete"></i></button>';
if (d.stopStatus == '2') {
html += '<button shutdownplan-data-stop="' + d.cutoverId + '" class="layui-btn layui-btn-normal layui-btn-xs" lay-tips="暂停"><i class="layui-icon layui-icon-pause"></i></button>'
} else if (d.stopStatus == '3') {
html += '<button shutdownplan-data-start="' + d.cutoverId + '" class="layui-btn layui-btn-normal layui-btn-xs" lay-tips="恢复"><i class="layui-icon layui-icon-play"></i></button>'
}
html += '<button shutdownplan-data-down="' + d.cutoverId + '" class="layui-btn layui-btn-normal layui-btn-xs" lay-tips="下载"><i class="layui-icon layui-icon-download-circle"></i></button>'
html += '</div>';
return html
}
... ... @@ -294,6 +295,11 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
$('[shutdownplan-data-delete]').on('click', function () {
deleteByIds($(this).attr("shutdownplan-data-delete"));
});
// 下载
$('[shutdownplan-data-down]').on('click', function () {
let id = $(this).attr("shutdownplan-data-down")
window.open(common.domainName + `/api-web/manage/cutover/docDownload?cutoverId=${id}&access_token=${accessToken}`);
});
$('[shutdownplan-data-res]').unbind('click').on('click', function () {
var $that = $(this);
var id = $that.attr("shutdownplan-data-res");
... ... @@ -521,13 +527,13 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
layer.open({
id: 'shutdownplanEditHtml',
content: laytpl(res.body).render(JSON.stringify(params)),
btn: ['保存', '取消'],
//btn: ['保存', '取消'],
btn: ['下一步','上一步', '保存', '取消'],
title: `<a class="layui-icon layui-icon-edit win_title_icon"></a>停机计划`+titleName,
type: '1',
resize: false,
area: ['80%', '90%'],
area: ['80%', '95%'],
success: function (indexm, layero) {
//start 停机模式从数据字典中获取 2022-05-24
admin.req({
url: common.domainName + '/api-web/manage/ddic/findSucDdics/shutdown_plan_mode'
, method: 'POST'
... ... @@ -545,10 +551,40 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
}).error(function (error) {
console.error(error);
});
//end lsq 2022-05-24
$('.layui-layer-btn1').hide();
$('.layui-layer-btn2').hide();
},
yes: function (index, layero) {
// 下一步
$("#verifyShutdownplanBtn").trigger("click");
let result = $('#verifyShutdownplanBtn').attr('verify-result');
if(result && result === 'true'){
$(".ystep-container-steps").find("li:nth-child(2)").trigger("click")
$('.layui-layer-btn0').hide();
$('.layui-layer-btn1').show();
$('.layui-layer-btn2').show();
}
return false;
},
btn2: function (index, layero) {
// 上一步
$(".ystep-container-steps").find("li:nth-child(1)").trigger("click")
$('.layui-layer-btn0').show();
$('.layui-layer-btn1').hide();
$('.layui-layer-btn2').hide();
document.querySelectorAll('#page2 input').forEach((e,i) => {
$(e).attr("lay-verify","");
})
$('#verifyShutdownplanBtn').attr('verify-result',false);
return false;
},
btn3: function (index, layero) {
// 保存
$("#saveshutdownplanBtn").trigger("click");
return false;
}
})
})
... ...
<article>
<div class="layui-card-body shutdownplan-base-area layui-form-pane" style="padding-top:0px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>基本信息</legend>
</fieldset>
<form class="layui-form layui-form-pane" id="shutdownplanAddForm" lay-filter="shutdownplan-add-form"
onsubmit="return false" style="max-width: 90%;margin-top: 5px;margin-left: 5%">
<input name="cutoverId" type="hidden">
<div class="layui-form-item">
<label class="layui-form-label" style="min-width: 120px!important;">计划名称<span
style="color: red">*</span>：</label>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input autocomplete="off" class="layui-input" lay-verify="required" name="cutoverName"
placeholder="停机计划" type="text">
</div>
onsubmit="return false" style="max-width: 90%;margin-left: 5%">
<div class="stepCont stepCont-shutdownplan">
<!-- 菜单导航显示-->
<div class="inspection-add-title">
<div class='ystep-container ystep-lg ystep-blue'></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">计划时间<span
style="color: red">*</span>：</label>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input class="layui-input" id="shutdownplanEditStartTime" lay-verify="required" name="startTime"
placeholder="开始时间" readonly="readonly" type="text">
<!-- 分页容器-->
<div class="pageCont">
<!--step1-->
<div class="stepPage" id="page1">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
<legend>基本信息</legend>
</fieldset>
<input name="cutoverId" type="hidden">
<div class="layui-form-item">
<label class="layui-form-label" style="min-width: 120px!important;">计划名称<span
style="color: red">*</span>：</label>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input autocomplete="off" class="layui-input" lay-verify="required"
name="cutoverName"
placeholder="停机计划" type="text">
</div>
</div>
</div>
</div>
<div class="layui-inline layui-inline--sm">-</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input class="layui-input" id="shutdownplanEditEndTime" lay-verify="required" name="endTime"
placeholder="结束时间" readonly="readonly" type="text">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">计划时间<span
style="color: red">*</span>：</label>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input class="layui-input" id="shutdownplanEditStartTime" lay-verify="required"
name="startTime"
placeholder="开始时间" readonly="readonly" type="text">
</div>
</div>
<div class="layui-inline layui-inline--sm">-</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input class="layui-input" id="shutdownplanEditEndTime" lay-verify="required"
name="endTime"
placeholder="结束时间" readonly="readonly" type="text">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">停机模式<span
style="color: red">*</span>：</label>
<div class="layui-input-block" id="shutdownDdic">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">停机业务<span
style="color: red">*</span>：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_biz"></div>
</div>
</div>
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">停机资源<span
style="color: red">*</span>：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_res"
lay-tips="停机资源必须是停机业务下的资源"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">影响业务：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_affected_biz"></div>
</div>
</div>
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">影响资源：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_affected_res"
lay-tips="影响资源必须是停机业务或影响业务下的资源"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">接收人：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_acceptUserName"></div>
</div>
</div>
</div>
<div class="layui-form-item" style="display: flex;">
<label class="layui-form-label textarea-label"
style="min-width: 120px!important;max-width: 120px!important;">描述：</label>
<div class="layui-input-block"
style="width: calc(100% - 120px)!important;margin-left: 0px!important;">
<textarea class="layui-textarea" name="cutoverDesc"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="min-width: 120px!important;max-width: 120px!important;">停机模式<span
style="color: red">*</span>：</label>
<div class="layui-input-block" id="shutdownDdic">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">停机业务<span
style="color: red">*</span>：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_biz"></div>
</div>
</div>
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">停机资源<span
style="color: red">*</span>：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_res" lay-tips="停机资源必须是停机业务下的资源"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">影响业务：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_affected_biz"></div>
</div>
</div>
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">影响资源：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_affected_res"
lay-tips="影响资源必须是停机业务或影响业务下的资源"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-inline-xm-select">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">接收人：</label>
<div class="layui-input-inline">
<div class="xm-select-demo" id="shutdown_plan_add_acceptUserName"></div>
<!--step2-->
<div class="stepPage" id="page2">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
<legend>升级申请审批信息</legend>
</fieldset>
<div class="layui-form-item" style="display: flex">
<label class="layui-form-label" style="min-width: 120px!important;">申请单位<span
style="color: red">*</span>：</label>
<div class="layui-inline" style="min-width: calc(100% - 120px)!important;">
<select name="appDept">
</select>
</div>
</div>
<div class="layui-form-item" style="display: flex">
<label class="layui-form-label" style="min-width: 120px!important;">
申请人<span style="color: red">*</span>：
</label>
<div class="layui-inline" style="min-width: calc(100% - 120px)!important;">
<input autocomplete="off" class="layui-input" name="appUser" placeholder="申请人" type="text">
</div>
</div>
<div class="layui-form-item" style="display: flex">
<label class="layui-form-label" style="min-width: 120px!important;">
联系电话<span style="color: red">*</span>：
</label>
<div class="layui-inline" style="min-width: calc(100% - 120px)!important;">
<input autocomplete="off" class="layui-input" name="appPhone" placeholder="联系电话" type="text">
</div>
</div>
<div class="layui-form-item" style="display: flex;">
<label class="layui-form-label" style="min-width: 120px!important;">版本号<span
style="color: red">*</span>：</label>
<div class="layui-inline" style="width: calc(100% - 120px)!important;margin-left: 0px!important;">
<input autocomplete="off" class="layui-input" name="appVersion" placeholder="版本号" type="text">
</div>
</div>
<div class="layui-form-item" style="display: flex;">
<label class="layui-form-label" style="min-width: 120px!important;">系统名称</label>
<div class="layui-inline" style="min-width: calc(100% - 120px)!important;">
<input autocomplete="off" class="layui-input" name="appName" readonly="readonly" placeholder="系统名称" type="text">
</div>
</div>
<div class="layui-form-item" style="display: flex;">
<label class="layui-form-label" style="min-width: 120px!important;">申请日期：</label>
<div class="layui-inline" style="min-width: calc(100% - 120px)!important;">
<input autocomplete="off" class="layui-input" name="appDate" readonly="readonly" placeholder="申请日期" type="text">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"
style="min-width: 120px!important;max-width: 120px!important;">升级日期：</label>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input class="layui-input" id="upgradeStartTime" name="upgradeStartTime"
placeholder="开始时间" readonly="readonly" type="text">
</div>
</div>
<div class="layui-inline layui-inline--sm">-</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input class="layui-input" id="upgradeEndTime" name="upgradeEndTime"
placeholder="结束时间" readonly="readonly" type="text">
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="display: flex;">
<label class="layui-form-label" style="min-width: 120px!important;">申请内容：</label>
<div class="layui-inline" style="min-width: calc(100% - 120px)!important;">
<input autocomplete="off" class="layui-input" name="appContent" readonly="readonly" placeholder="申请内容" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="display: flex;">
<label class="layui-form-label textarea-label"
style="min-width: 120px!important;max-width: 120px!important;">描述：</label>
<div class="layui-input-block" style="width: calc(100% - 120px)!important;margin-left: 0px!important;">
<textarea class="layui-textarea" name="cutoverDesc"></textarea>
</div>
</div>
<button id="saveshutdownplanBtn" lay-filter="saveshutdownplanBtn" lay-submit style="display: none"
type="submit">提交
<button id="saveshutdownplanBtn" lay-filter="saveshutdownplanBtn" lay-submit style="display: none" type="submit">
提交
</button>
<button id="verifyShutdownplanBtn" lay-filter="verifyShutdownplanBtn" lay-submit style="display: none" type="submit">
验证
</button>
</form>
</div>
... ...
<title>运维单位巡检配置</title>
<iframe class="layadmin-iframe" src="/vue3/index.html#/inspectionConfig" style="height: 99.5%!important;"/>
... ...
... ... @@ -264,3 +264,56 @@ custom-class="config-dialog"
width: 10px;
. el-scrollbar__bar . is-horizontal > div
}
/*最外层样式*/
.container {
}
.container .cm-card,.container-fluid .cm-card {
overflow-y: auto;
border-radius: 3px;
}
.container .cm-card .search,.container-fluid .cm-card .search {
padding: 6px 10px;
display: flex;
}
.container .cm-page-top-nav,.container-fluid.cm-page-top-nav{
display: flex;
justify-content: space-between;
margin-bottom: 5px;
margin-top: 5px;
border-radius: 2px;
padding-top: 10px;
height: 45px;
padding-left: 5px;
}
.container .cm-card .cm-page-body,.container-fluid .cm-card .cm-page-body {
height: calc(100% - 5px);
}
.container .cm-page-top-nav > div:nth-child(2),.container-fluid.cm-page-top-nav > div:nth-child(2){
margin-right:76px!important;
}
.container .cm-page-table-nav,.container-fluid.cm-page-table-nav{
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
padding-left: 10px;
}
.container .search-form .el-form-item,.container-fluid .search-form .el-form-item{
margin: 0px;
padding: 0px;
margin-right: 5px;
}
/*搜索框*/
.keyword-input{
width: 240px!important;
}
... ...
<div :style="{'height':height+'px','max-height':height+'px'}" :class="isFluid ? 'container-fluid' : 'container'">
<div :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}" class="cm-card">
<div class="cm-page-top-nav" v-if="showNav">
<div>
<slot name="search"></slot>
</div>
<div>
<slot name="btns"></slot>
</div>
</div>
<div v-if="showBodySplit && showNav === false" style="border-top: solid 5px var(--page-el-bg-color)!important;"></div>
<div class="cm-page-body">
<slot></slot>
</div>
</div>
</div>
... ...
export default {
name: 'pageIndex',
template: '',
components: {},
props: {
// 是否全屏
isFluid: {
type: Boolean,
default: false
},
showNav:{
type: Boolean,
default: false
},
showBodySplit:{
type: Boolean,
default: false
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 10);
return {
height
}
}
}
... ...
... ... @@ -54,6 +54,8 @@ Promise.all([
.component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')))
//菜单下拉树
.component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index')))
// cm-page
.component('cm-page', Vue.defineAsyncComponent(() => myImport('components/common/page/index')))
//机构用户下拉树
.component('cm-tree-select-org-user', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectOrgUser/index')));
... ...
... ... @@ -296,6 +296,12 @@ const routes = [{
path: '/vue3/x6/index',
name: 'operationLogUserList',
component: () => myImport('views/x6/index')
},
// 运维单位系统巡检记录报表功能
{
path: '/inspectionConfig',
name: 'inspectionConfig',
component: () => myImport('views/inspectionConfig/index')
}
];
... ...
<cm-page :showNav="true">
<template #search>
<el-form class="search-form" ref="form" :model="queryParams" label-width="80px" :inline="true">
<el-form-item>
<el-select v-model="queryParams.type" placeholder="请选巡检类型">
<el-option v-for="(item,index) in typeArr" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<template #btns>
<el-button type="primary" size="mini" @click="getList">搜索</el-button>
</template>
<template #default>
<div class="cm-page-table-nav">
<el-button type="primary" size="small" @click="addModel">新增</el-button>
<el-button size="small" @click="deleteByIds" :disabled="multiple">批量删除</el-button>
</div>
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:height="height - 163"
:loading="false"
:pageSize="queryParams.pageSize"
:showBorder="false"
:showIndex="false"
:showPage="true"
:showSelection="true"
:showTools="true"
:total="count"
:toolsWith="100"
@selectionChange="selectionChange"
@loaddata="refreshList">
<template #default="{row,prop,column}">
<div v-if="prop=='type'">
{{ getTypeLabel(row) }}
</div>
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="btn-link" @click="editModel(scope.row)">编辑</span>
<span class="btn-link" @click="deleteByIds(scope.row)">删除</span>
</div>
</template>
</cm-table-page>
<cm-dialog :showDialogVisible="showDialog" :showFooter="true" :title="title" okText="保存" @hidedialog="closeDialog" @okfunc="saveConfig"
width="80%">
<template v-slot>
<el-form ref="formRef" :model="formParams" label-width="100px" style="display: flex" v-if="formParams.id === -1">
<el-form-item label="时间范围" prop="timeRange" :rules="[{required: true,message: '请选择日期',trigger: 'blur'}]">
<el-date-picker
v-model="formParams.timeRange"
type="datetimerange"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"/>
</el-form-item>
<el-form-item label="巡检类型" prop="type" :rules="[{required: true,message: '请选择巡检类型',trigger: 'change',}]">
<el-select v-model="formParams.type" placeholder="请选择巡检类型" style="width: 100%" @change="typeChange">
<el-option v-for="(item,index) in typeArr" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-button style="margin-left: 10px" type="primary" size="mini" @click="addConfig">添加</el-button>
</el-form>
<div style="border-radius: 10px;padding: 5px;">
<div style="text-align: left;padding-left: 10px">
配置列表
</div>
<el-form ref="configFormRef" label-width="100px" >
<div v-if="configArr.length == 0">
暂无配置!
</div>
<div v-else v-for="(item,index) in configArr" style="border: 1px solid rgb(244, 235, 235);padding: 10px 5px;margin: 2px;border-radius: 5px;box-shadow: 1px 1px 5px -1px;">
<div style="display: flex;flex-direction: row;width: 100%;height: 40px;">
<el-form-item style="width: 25%;padding: 0px 10px" label="年份" prop="year" >
<el-input type="number" v-model="item.year" placeholder="年份"></el-input>
</el-form-item>
<el-form-item style="width: 25%;padding: 0px 10px" label="月份" prop="month" >
<el-input type="number" v-model="item.month" placeholder="月份"></el-input>
</el-form-item>
<el-form-item style="width: 25%;padding: 0px 10px" label="类型" prop="item.type" >
<el-select v-model="item.type" placeholder="请选巡检类型" @change="typeChange(item)">
<el-option v-for="(item,index) in typeArr" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item style="width: 25%;padding: 0px 10px" label="巡检次数" prop="item.number">
<el-input v-model="item.number" placeholder="巡检次数"></el-input>
</el-form-item>
</div>
<div style="display: flex;flex-direction: row;width: 100%;height: 40px;">
<el-form-item style="width: calc((100% - 100px)/2);padding: 0px 10px" label="日期" prop="item.days">
<el-input v-model="item.days" placeholder="日期"></el-input>
</el-form-item>
<el-form-item style="width: calc((100% - 100px)/2);padding: 0px 10px" label="巡检周期" prop="item.times" >
<el-input v-model="item.times" placeholder="巡检周期"></el-input>
</el-form-item>
<el-button v-if="formParams.id === -1" style="margin-left: 10px;width: 100px" type="danger" size="mini" @click="deleteConfig(item,index)">删除</el-button>
</div>
</div>
</el-form>
</div>
</template>
</cm-dialog>
</template>
</cm-page>
... ...
import global from "../../../src/script/global.js";
export default {
name: "algorithm",
template: "",
props: {},
setup() {
let height = Vue.ref(window.innerHeight);
const {proxy} = Vue.getCurrentInstance();
let queryParams = Vue.ref({
type: '',
pageNum: 1,
pageSize: 20,
});
let count = Vue.ref(0);
let multiple = Vue.ref(true);
let ids = [];
let typeArr = [
{label: '征期', value: 0, number: 4, times: '7:00-9:30,9:30-13:00,13:00-15:30,15:30-18:00'},
{label: '非征期', value: 1, number: 2, times: '7:00-13:00,13:00-18:00'},
{label: '节假日', value: 2, number: 1, times: '7:00-18:00'},
];
let tableData = Vue.ref({
dataList: [],
columns: [
{
prop: 'year',
label: '年份',
align: 'center',
}, {
prop: 'month',
label: '月份',
align: 'center',
}, {
prop: 'days',
label: '日期',
align: 'center',
width:300
}, {
prop: 'times',
label: '巡检时间',
align: 'center',
width:300
}, {
prop: 'type',
label: '巡检类型',
align: 'center'
}, {
prop: 'number',
label: '巡检次数',
align: 'center',
}, {
prop: 'createBy',
label: '创建人',
align: 'center',
}, {
prop: 'createTime',
label: '创建时间',
align: 'center',
width:180
}
]
})
let showDialog = Vue.ref(false);
let title = Vue.ref('新增');
let formParams = Vue.ref({
timeRange: '',
type: '',
number: 0,
times: ''
});
/**
* year: '',
* month: '',
* days: '',
* times: '',
* type: '',
* number: ''
*/
let configArr = Vue.ref([])
let formRef = Vue.ref();
let configFormRef = Vue.ref();
/**
* 加载列表
*/
const getList = () => {
proxy.$http.get( '/api-web/inspectionExcelConfig/list', queryParams.value,res => {
if(res && res.success){
count.value = res.count;
tableData.value.dataList = res.data;
}
})
}
/**
* 多选
* @param params
*/
const selectionChange = (params) => {
multiple.value = !params.length;
ids = params.map(item => item.id);
}
/**
* 刷新表格数据
* @param page
* @param limit
*/
const refreshList = ({page, limit}) => {
queryParams.value.pageNum = page;
queryParams.value.pageSize = limit;
}
/**
* 新增弹框
*/
const addModel = () => {
showDialog.value = true;
formParams.value = {
timeRange: '',
type: '',
number: 0,
times: '',
id:-1
};
configArr.value = [];
}
/**
* 关闭弹框
*/
const closeDialog = () => {
showDialog.value = false;
}
/**
* 保存
*/
const saveConfig = () => {
let arr = configArr.value;
if(arr.length > 0){
let url = '/api-web/inspectionExcelConfig/update';
if(formParams.value.id === -1){
url = '/api-web/inspectionExcelConfig/add';
}
proxy.$http.post(url,arr,res => {
if(res && res.success){
global.showMsg("操作成功！", "success");
closeDialog();
getList();
}
});
}
}
/**
* 查看详情
* @param row
*/
const editModel = (row) => {
title.value = '编辑'
showDialog.value = true;
formParams.value.id = row.id;
proxy.$http.get('/api-web/inspectionExcelConfig/info', {id:row.id},res => {
configArr.value = [res.object]
});
}
/**
* 批量删除
* @param row
*/
const deleteByIds = (row) => {
let id = ids;
if(multiple.value){
id = [row.id];
}
if (!id) {
global.showMsg("请选择要删除的数据！", "warning");
return;
}
global.confirm("确认删除吗？", function () {
proxy.$http.get('/api-web/inspectionExcelConfig/delete?idList=' + id.join(','), {},(res) => {
if (res.success) {
global.showMsg("删除成功", "success");
closeDialog()
getList();
} else {
global.showMsg("删除失败", "error");
}
})
})
}
const typeChange = (val) => {
if(typeof val === 'object'){
let typeInfo = typeArr.find(e => e.value == val.type);
val.number = typeInfo.number
val.times = typeInfo.times
return;
}
let typeInfo = typeArr.find(e => e.value == val);
formParams.value.number = typeInfo.number
formParams.value.times = typeInfo.times
}
const addConfig = () => {
formRef.value.validate((valid) => {
let data = formParams.value;
let arr = data.timeRange;
let startDate = new Date(arr[0]);
let endDate = new Date(arr[1]);
var currentDate = new Date(startDate);
while (currentDate <= endDate) {
let year = dayjs(new Date(currentDate)).format('YYYY');
let month = dayjs(new Date(currentDate)).format('MM');
let day = dayjs(new Date(currentDate)).format('DD');
let isAdd = configArr.value.find((e, i) => e.days.indexOf(day) !== -1);
if (isAdd) {
proxy.$global.showMsg("当前时间范围内存在多种巡检类型！", "warning");
return;
}
let current = configArr.value.find((e, i) => e.year === year && e.month === month && data.type === e.type);
if (current) {
if (current.days.indexOf(day) === -1) {
current.days = current.days + "," + day;
}
} else {
configArr.value.push({
year: year,
month: month,
days: day,
times: data.times,
type: data.type,
number: data.number
})
}
currentDate.setDate(currentDate.getDate() + 1);
}
formRef.value.resetFields();
formParams.value = {
id:-1
}
})
}
const deleteConfig = (item, index) => {
configArr.value.splice(index, 1);
}
const getTypeLabel = (row) => {
let typeInfo = typeArr.find(e => e.value == row.type);
if(typeInfo){
return typeInfo.label;
}
return '';
}
Vue.onMounted(() => {
getList();
})
return {
height,
// 搜索条件
typeArr, queryParams,
// 表格
tableData, count, refreshList, selectionChange, multiple, getList, editModel,
deleteByIds,
title, addModel, showDialog, closeDialog, saveConfig,
formRef, formParams, configArr, typeChange, addConfig, deleteConfig,
configFormRef,
getTypeLabel
}
}
}
... ...