You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udiwms-vue-frame/src/views/dev/devicePlan.vue

434 lines
19 KiB
Vue

2 years ago
<template>
<div>
<el-card>
<el-form :model="query" v-if="showSearch" label-width="auto">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="计划名称">
<el-input v-model.trim="query.name" clearable/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责部门">
<deptSelect :value.sync="query.chargeDeptCode"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="top-right-btn">
<el-button-group>
<el-button icon="el-icon-view" type="primary" @click="showSearch = !showSearch">显示/隐藏搜索栏</el-button>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
>重置
</el-button>
<el-button type="primary" icon="el-icon-search" @click="search"
>查询
</el-button>
<el-button type="primary" icon="el-icon-plus" @click="openCreate(null)"
>新增
</el-button>
</el-button-group>
</div>
<el-divider style="margin: 15px"></el-divider>
<el-table :data="list" @row-click="rowClick" v-loading="loading" click-row-light
highlight-current-row>
<el-table-column label="序号" width="50" type="index"/>
<el-table-column label="计划名称" width="150" prop="name"/>
<el-table-column label="负责部门" width="150" prop="chargeDeptName"/>
<el-table-column label="设备数量" width="150" prop="deviceCount"/>
<el-table-column label="执行情况" width="150" prop="chargeDeptName">
<template scope="scope">
<el-tag v-if="scope.row.isActive==true" type="success"></el-tag>
<el-tag v-if="scope.row.isActive==false" type="info"></el-tag>
</template>
</el-table-column>
<el-table-column label="开始日期" width="150" prop="startDate"/>
<el-table-column label="结束日期" width="150" prop="endDate"/>
<el-table-column label="执行周期(次)" width="160" prop="frequency">
<template scope="scope">
{{ `${scope.row.frequency}` }}
</template>
</el-table-column>
<el-table-column label="已执行次数" width="200" prop="execCount"/>
<el-table-column label="备注" width="200" prop="remark"/>
<el-table-column label="操作" width="240" fixed="right">
<template scope="scope">
<el-button type="text" @click.stop="openCreate(scope.row.planId)">
编辑
</el-button>
<el-button type="text" @click.stop="openCreate(scope.row.planId,null,1)">
添加巡检设备
</el-button>
<el-button type="text" @click.stop="delplan(scope.row)">
删除
</el-button>
<el-button type="text" @click="deviceCheckGenFunc(scope.row)"
>生成任务单
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="query.page"
:limit.sync="query.limit"
@pagination="getList"
/>
</el-card>
<el-card>
<div slot="header" class="clearfix">
<div class="fl">
{{ `计划详情 ${clickRow ? '——' + clickRow.name : ''}` }}
</div>
<div class="fr" v-if="clickRow">
<el-button type="primary" @click="openCreate(clickRow.planId,null,1)"></el-button>
<el-button type="" @click="getDetailList"></el-button>
</div>
</div>
<el-table :data="detailList" v-loading="detailLoading" ref="table" row-key="productId"
@row-click="(row)=>{$refs.table.toggleRowExpansion(row)}" @expand-change="handleExpendRow"
:expandRowKeys="expandRowKeys">
<el-table-column type="expand">
<template slot-scope="scope">
<el-card class="mb10" v-if="scope.row.detailData!=null">
<el-form :model="scope.row.detailData.query" inline>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="设备编号">
<el-input v-model="scope.row.detailData.query.deviceCode" clearable/>
</el-form-item>
<el-button-group>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
>重置
</el-button>
<el-button type="primary" icon="el-icon-search"
@click="scope.row.detailData.query.page=1;getRowDetailList(scope.row.detailData)"
>查询
</el-button>
</el-button-group>
</el-col>
</el-row>
</el-form>
<el-table :data="scope.row.detailData.list"
v-loading="scope.row.detailData.loading">
<el-table-column label="序号" width="50" type="index"/>
<el-table-column label="科室名称" prop="deptName"/>
<el-table-column label="设备编号" prop="deviceCode"/>
<el-table-column label="最小销售标识" prop="nameCode"/>
<el-table-column label="名称" prop="productName"/>
<el-table-column label="规格型号" prop="ggxh"/>
<el-table-column label="计量单位" prop="measname"/>
<el-table-column label="生产企业" prop="manufactory"/>
<el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
<el-table-column label="操作" width="120">
<template scope="prop">
<el-button type="text" @click="openCreate(prop.row.planId,prop.row,2,true)"
>巡检项目
</el-button>
<el-button type="text" @click="delDetail(prop.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="scope.row.detailData.total>0"
:total="scope.row.detailData.total"
:page.sync="scope.row.detailData.query.page"
:limit.sync="scope.row.detailData.query.limit"
@pagination="getRowDetailList(scope.row.detailData)"
/>
</el-card>
</template>
</el-table-column>
<el-table-column label="序号" width="50" type="index"/>
<el-table-column label="最小销售标识" prop="nameCode"/>
<el-table-column label="名称" prop="productName"/>
<el-table-column label="规格型号" prop="ggxh"/>
<el-table-column label="计量单位" prop="measname"/>
<el-table-column label="数量" prop="count"/>
<el-table-column label="生产企业" prop="manufactory"/>
<el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
<el-table-column label="操作" width="120">
<template scope="scope">
<el-button type="text" @click.stop="openCreate(scope.row.planId,scope.row,2)"
>巡检项目
</el-button>
<el-button type="text" @click.stop="delDetail(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="detailTotal>0"
:total="detailTotal"
:page.sync="detailQuery.page"
:limit.sync="detailQuery.limit"
@pagination="getDetailList"
/>
</el-card>
<el-dialog
:title="`编辑巡检计划信息${planData.planId?'--('+planData.name+')':''}`"
:visible="true"
v-if="createFlag"
@close="createFlag = false"
width="80%"
>
<el-card>
<div slot="header" class="clearfix">
<div class="fl"><span style="color: red;">* 巡检任务单将于执行周期的00:05分生成</span></div>
<div class="fr">
<el-button v-if="createActive==0" @click="changeActive(true)" type="primary"></el-button>
<el-button v-else @click="changeActive(false)" type="primary">上一步</el-button>
<el-button @click="createFlag = false;query.page=1;getList()">关闭</el-button>
<el-button type="success" v-if="createActive==2" @click="changeActive(false)"></el-button>
</div>
</div>
<div>
<el-steps align-center :active="createActive" finish-status="success" process-status="finish">
<el-step title="基础信息"/>
<el-step title="选择设备"/>
<el-step title="选择巡检项目" :description="createActive==2?itemQuery.title:''"/>
</el-steps>
</div>
<el-form v-if="createActive==0" :model="planData" :rules="formRule" ref="saveForm" label-width="auto">
<el-row :gutter="20">
<el-col>
<el-form-item label="计划名称" prop="name">
<el-input v-model.trim="planData.name" show-word-limit maxlength="100" clearable/>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="负责部门" prop="chargeDeptCode">
<deptSelect :value.sync="planData.chargeDeptCode"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="执行区间" prop="dateInterval">
<el-date-picker
style="width: 100%"
v-model.trim="planData.dateInterval"
type="daterange"
align="right"
editable
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col>
<el-form-item prop="frequency">
<template slot="label">
执行周期
<el-tooltip class="item" effect="dark" content="执行周期每30天执行一次"
placement="top">
<el-icon class="el-icon-question"/>
</el-tooltip>
</template>
<el-input-number :min="1" :max="999999" v-model.trim="planData.frequency"/>
<span class="ml10"></span>
<span class="ml10">快捷选项</span>
<el-button type="" @click="planData.frequency=30"></el-button>
<el-button type="" @click="planData.frequency=30*3"></el-button>
<el-button type="" @click="planData.frequency=30*6"></el-button>
<el-button type="" @click="planData.frequency=365"></el-button>
<el-button type="" @click="planData.frequency=365*2"></el-button>
<el-button type="" @click="planData.frequency=365*3"></el-button>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="备注">
<el-input type="textarea" v-model.trim="planData.remark" resize="none" :autosize="{minRows:8,maxRows:8}"
show-word-limit maxlength="500" clearable/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-card v-show="createActive==1">
<div slot="header" class="clearfix">
<div class="fr">
<el-button type="primary" @click="chooseDeviceFlag=true"></el-button>
<el-button type="" @click="getDetailList"></el-button>
</div>
</div>
<el-table :data="detailList" v-loading="detailLoading" ref="dialogTable"
:row-key="row=>{return row.productId+'_'+row.planId}"
@row-click="(row)=>{$refs.dialogTable.toggleRowExpansion(row)}" @expand-change="handleExpendRow"
:expandRowKeys="dialogExpandRowKeys">
<el-table-column type="expand">
<template slot-scope="scope">
<el-card class="mb10" v-if="scope.row.detailData">
<el-form :model="scope.row.detailData.query" inline>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="设备编号">
<el-input v-model="scope.row.detailData.query.deviceCode" clearable/>
</el-form-item>
<el-button-group>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
>重置
</el-button>
<el-button type="primary" icon="el-icon-search"
@click="scope.row.detailData.query.page=1;getRowDetailList(scope.row.detailData)"
>查询
</el-button>
</el-button-group>
</el-col>
</el-row>
</el-form>
<el-table :data="scope.row.detailData.list"
v-loading="scope.row.detailData.loading" row-key="deviceCode">
<el-table-column label="序号" width="50" type="index"/>
<el-table-column label="科室名称" prop="deptName"/>
<el-table-column label="设备编号" prop="deviceCode"/>
<el-table-column label="最小销售标识" prop="nameCode"/>
<el-table-column label="名称" prop="productName"/>
<el-table-column label="规格型号" prop="ggxh"/>
<el-table-column label="计量单位" prop="measname"/>
<el-table-column label="生产企业" prop="manufactory"/>
<el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
<el-table-column label="操作" width="120">
<template scope="prop">
<el-button type="text" @click="openCreate(prop.row.planId,prop.row,2,true)"
>巡检项目
</el-button>
<el-button type="text" @click="delDetail(prop.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="scope.row.detailData.total>0"
:total="scope.row.detailData.total"
:page.sync="scope.row.detailData.query.page"
:limit.sync="scope.row.detailData.query.limit"
@pagination="getRowDetailList(scope.row.detailData)"
/>
</el-card>
</template>
</el-table-column>
<el-table-column label="序号" width="50" type="index"/>
<el-table-column label="最小销售标识" prop="nameCode"/>
<el-table-column label="名称" prop="productName"/>
<el-table-column label="规格型号" prop="ggxh"/>
<el-table-column label="计量单位" prop="measname"/>
<el-table-column label="数量" prop="count"/>
<el-table-column label="生产企业" prop="manufactory"/>
<el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
<el-table-column label="操作" width="120">
<template scope="scope">
<el-button type="text" @click.stop="changeActive(true,scope.row)"
>巡检项目
</el-button>
<el-button type="text" @click.stop="delDetail(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="detailTotal>0"
:total="detailTotal"
:page.sync="detailQuery.page"
:limit.sync="detailQuery.limit"
@pagination="getDetailList"
/>
</el-card>
<el-card v-show="createActive == 2">
<div slot="header" class="clearfix">
<div class="fr">
<el-button type="primary" @click="chooseItemList=[];chooseDetailItemFlag=true"></el-button>
<el-button type="" @click="getDetailItemList"></el-button>
</div>
</div>
<el-table :data="itemList" ref="itemTable" v-loading="itemLoading" row-key="itemCode">
<el-table-column label="序号" width="50" type="index"/>
<el-table-column label="项目编码" width="150" prop="itemCode"/>
<el-table-column label="项目名称" width="150" prop="name"/>
<el-table-column label="项目内容" width="500" prop="content"/>
<el-table-column label="操作" width="50">
<template scope="scope">
<el-button type="text"
v-if="!itemQuery.deviceCode&&!scope.row.deviceCode || itemQuery.deviceCode&&scope.row.deviceCode"
@click="delDetailItem(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="itemTotal>0"
:total="itemTotal"
:page.sync="itemQuery.page"
:limit.sync="itemQuery.limit"
@pagination="getDetailItemList"
/>
</el-card>
</el-card>
</el-dialog>
<el-dialog width="80%" title="选择设备"
:visible="true"
v-if="chooseDeviceFlag"
@close="chooseDeviceFlag = false"
>
<el-card>
<div class="align-right" v-if="chooseDeviceList&&chooseDeviceList.length>0">
<el-button class="mr20" style="font-size: 20px" type="primary" @click="chooseDevice"></el-button>
</div>
<planChooseDevice style="margin: 0" :planId="detailQuery.planId" :selectChangeFunc="deviceSelectChangFunc"/>
</el-card>
</el-dialog>
<el-dialog width="80%" title="选择巡检项目"
:visible="true"
v-if="chooseDetailItemFlag"
@close="chooseDetailItemFlag = false"
>
<el-card>
<div class="align-right" v-if="chooseItemList&&chooseItemList.length>0">
<el-button class="mr20" style="font-size: 20px" type="primary" @click="chooseDetailItem"></el-button>
</div>
<DeviceCheckItemDict style="margin: 0" :is-choose="true" :selectChangFunc="itemSelectChangFunc"/>
</el-card>
</el-dialog>
</div>
</template>
<script src="./js/devicePlan.js"/>
<style scoped>
/deep/ .el-dialog__body {
padding: 0 0 20px 0;
}
</style>