Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

谐波普测-普测计划新增&终端退运-历史记录

Browse Source
This commit is contained in:
zhujiyan
2024-06-03 09:17:00 +08:00
parent c7025c615f
commit d9f02ef5ff
15 changed files with 1009 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/process-boot/generalTest.ts
View File

@@ -175,3 +175,15 @@ export function cancel(data: any) {
data
})
}
//新版普测计划管理新增
export function addSurveyPlan(data: any) {
return createAxios({
url: '/supervision-boot/surveyPlan/add',
method: 'POST',
data
})
}

4
src/components/form/datePicker/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div style="width: 600px;">
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
@@ -7,7 +7,7 @@
v-model="timeValue"
type="daterange"
:disabled="disabledPicker"
style="width: 230px; margin-right: 10px"
style="width: 210px; margin-right: 10px"
unlink-panels
:clearable="false"
range-separator="至"

9
src/components/table/header/index.vue
View File

@@ -2,19 +2,20 @@
<div ref="tableHeader" class="cn-table-header">
<div class="table-header ba-scroll-style">
<el-form
style="flex: 1; height: 34px; overflow: hidden; margin-right: 20px"
style="flex:1;height: 34px; margin-right: 20px; display: flex;flex-wrap:wrap;"
ref="headerForm"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
:inline="true"
>
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 600px;">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="区域" v-if="area">
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
</el-form-item>
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<slot name="select"></slot>
</el-form>
<template v-if="$slots.select || datePicker || showSearch">

207
src/views/pqs/supervise/harmonicSurvey/components/planAdd.vue
View File

@@ -1,47 +1,62 @@
<template>
<el-dialog draggable :title="title" v-model="planAddition" width="65%" :before-close="cancelFn">
<el-form
:model="formdata"
ref="formRef"
:rules="rules"
label-width="auto"
class="form-two"
>
<el-form-item for="-" label="普测负责单位:">
<Area v-model="formdata.orgNo" />
<el-dialog draggable :title="title" v-model="planAddition" width="500px" :before-close="cancelFn">
<el-form :model="form" ref="formRef" :rules="rules" label-width="auto" scroll-to-error :validate-on-rule-change="false" class="form-one">
<el-form-item for="-" label="普测负责单位:">
<Area v-model="form.deptId" />
</el-form-item>
<el-form-item for="-" label="计划名称:" prop="planName">
<el-input v-model="formdata.planName" placeholder="请输入计划名称"></el-input>
<el-form-item for="-" label="计划名称:" prop="planName">
<el-input v-model="form.planName" placeholder="请输入计划名称"></el-input>
</el-form-item>
<el-form-item for="-" label="计划开始时间:" prop="planStartTime">
<el-form-item for="-" label="计划开始时间:" prop="planStartTime">
<el-date-picker
v-model="formdata.planStartTime"
v-model="form.planStartTime"
type="date"
placeholder="选择计划开始时间"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item for="-" label="计划结束时间:" prop="planEndTime">
<el-form-item for="-" label="计划结束时间:" prop="planEndTime">
<el-date-picker
v-model="formdata.planEndTime"
v-model="form.planEndTime"
type="date"
placeholder="选择计划结束时间"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item for="-" label="实际完成时间:" prop="planComplateTime">
<!-- <el-form-item for="-" label="实际完成时间:" prop="planComplateTime">
<el-date-picker
v-model="formdata.planComplateTime"
v-model="form.planComplateTime"
type="date"
placeholder="选择实际完成时间"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item> -->
<!-- <el-form-item for="-" label="测试负责人:" prop="leader">
<el-input v-model="form.leader" placeholder="请输入测试负责人"></el-input>
</el-form-item> -->
<el-form-item for="-" label="系统电站：" prop="customSubstationFlag">
<!-- 默认值 开启 -->
<el-radio-group v-model="form.customSubstationFlag" @change="changeSubstationFlag">
<el-radio value="0">是</el-radio>
<el-radio value="1">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item for="-" label="测试负责人:" prop="leader">
<el-input v-model="formdata.leader" placeholder="请输入测试负责人"></el-input>
</el-form-item>
<el-form-item for="-" label="关联电站:" prop="subIds" style="display: flex;align-items: center;">
<el-cascader v-model="formdata.subIds" :options="treeList" :props="defaultProps" clearable filterable />
<el-form-item
for="-"
label="关联电站:"
v-if="form.customSubstationFlag == '0'"
prop="substation"
style="display: flex; align-items: center"
>
<el-cascader
v-model="form.substation"
:options="treeList"
:props="defaultProps"
clearable
filterable
collapse-tags
placeholder="请选择关联电站"
/>
<!-- <el-tree-select
accordion
ref="treeRef"
@@ -52,15 +67,18 @@
readonly
node-key="id"
:props="defaultProps"
v-model="formdata.subIds"
v-model="form.substation"
:data="treeList"
:render-after-expand="false"
/> -->
</el-form-item>
<!-- <el-form :model="formdata" label-width="auto"> -->
<el-form-item for="-" class="uploadFile" label="普测报告:" prop="fileList">
<el-form-item for="-" label="关联电站:" v-if="form.customSubstationFlag == '1'" prop="substation">
<el-input v-model="form.substation" placeholder="请输入关联电站"></el-input>
</el-form-item>
<!-- <el-form :model="form" label-width="auto"> -->
<!-- <el-form-item for="-" class="uploadFile" label="普测报告:" prop="fileList">
<el-upload
v-model:file-list="formdata.fileList"
v-model:file-list="form.fileList"
ref="upload"
action=""
:limit="5"
@@ -72,7 +90,7 @@
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
</el-form-item> -->
<!-- </el-form> -->
</el-form>
<!-- <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">添加电站</el-divider> -->
@@ -80,7 +98,7 @@
<!-- <div
v-if="
(title == '查看计划' || title == '计划审核') &&
(title == '计划审核' || formdata.status == 1 || formdata.status == 3 || formdata.status == 4)
(title == '计划审核' || form.status == 1 || form.status == 3 || form.status == 4)
"
>
<el-divider content-position="left" style="font-size: 18px; font-weight: bolder">审核意见</el-divider>
@@ -88,7 +106,7 @@
:disabled="title != '计划审核'"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="formdata.checkComment"
v-model="form.checkComment"
></el-input>
</div> -->
<template #footer v-if="title != '查看计划'">
@@ -102,7 +120,7 @@
<script setup lang="ts">
import generalTestTree from '@/components/tree/pqs/generalTestTree.vue'
import { ref, reactive, nextTick } from 'vue'
import { addSurvey, auditSurvey } from '@/api/process-boot/generalTest'
import { addSurvey, auditSurvey, addSurveyPlan } from '@/api/process-boot/generalTest'
import Area from '@/components/form/area/index.vue'
import { ElMessage, UploadProps } from 'element-plus'
import { uploadFile, getFileNameAndFilePath } from '@/api/system-boot/file'
@@ -118,34 +136,52 @@ const defaultProps = ref({
checkStrictly: true,
emitPath: false,
expandTrigger: 'hover' as const,
multiple: true
})
const formdata: any = ref({
orgName: '',
orgNo: dictData.state.area[0].id,
const obj = {
customSubstationFlag: '0',
deptId: '0d52f9f6e43ec0ee83013cd32da93f66',
planEndTime: '2024-05-31',
planName: '5.31计划',
planStartTime: '2024-05-01',
substation: '3c175083dbc1e870365dd12d79c837ec,5487bd33c24007aad7af4882b455203b'
}
const form: any = ref({
// orgName: '',
deptId: dictData.state.area[0].id,
planStartTime: '',
planEndTime: '',
planName: '',
rgeneralSurveyPlanDetailAddParm: [],
subCount: '',
busCount: '',
subIds: '',
fileList: [],
checkComment: '',
filePath: ''
// fileList: [],
// checkComment: '',
// filePath: '',
substation: '', //关联电站
customSubstationFlag: '0' //电站类型
})
const props = {
expandTrigger: 'hover' as const
}
const formRef = ref()
const treeRef = ref()
const rules = {
const rules = ref({
planStartTime: [{ required: true, message: '选择计划开始时间', trigger: 'change' }],
planEndTime: [{ required: true, message: '选择计划结束时间', trigger: 'change' }],
planComplateTime: [{ required: true, message: '选择实际完成时间 ', trigger: 'change' }],
planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
leader: [{ required: true, message: '请输入测试负责人', trigger: 'blur' }],
subIds: [{ required: true, message: '请选择关联电站', trigger: 'change' }],
fileList: [{ required: true, message: '请上传文件', trigger: 'change' }]
substation: [{ required: true, message: '请选择关联电站', trigger: 'change' }]
// fileList: [{ required: true, message: '请上传文件', trigger: 'change' }],
})
const changeSubstationFlag = () => {
console.log(form.value.customSubstationFlag)
//处理所属变电站手都输入1/下拉数据0
if (form.value.customSubstationFlag == '0') {
rules.value.substation[0].message = '请选择关联电站'
form.value.substation = ''
} else {
rules.value.substation[0].message = '请输入关联电站'
form.value.substation = []
}
}
const cancelFn = () => {
formRef.value.resetFields()
@@ -159,42 +195,54 @@ const loadData = () => {
console.log(treeList.value)
})
}
loadData()
// 提交
const submitFn = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
let filePath = ''
// formdata.value.subIds = treeRef.value.treeRef.getCheckedKeys(false)
formdata.value.subIds= typeof(formdata.value.subIds)=='string'?[formdata.value.subIds]:formdata.value.subIds
if (formdata.value.fileList.length == 0) {
audit(filePath)
} else {
for (let i = 0; i < formdata.value.fileList.length; i++) {
if (formdata.value.fileList[i].raw) {
await uploadFile(formdata.value.fileList[i].raw, 'supervision/').then(res => {
filePath = filePath + res.data.name + ','
})
} else {
filePath = filePath + formdata.value.fileList[i].supervision + ','
}
if (i == formdata.value.fileList.length - 1) {
audit(filePath)
}
}
}
audit(filePath)
// form.value.substation = treeRef.value.treeRef.getCheckedKeys(false)
// form.value.substation = typeof form.value.substation == 'string' ? [form.value.substation] : form.value.substation
// if (form.value.fileList.length == 0) {
// audit(filePath)
// } else {
// for (let i = 0; i < form.value.fileList.length; i++) {
// if (form.value.fileList[i].raw) {
// await uploadFile(form.value.fileList[i].raw, 'supervision/').then(res => {
// filePath = filePath + res.data.name + ','
// })
// } else {
// filePath = filePath + form.value.fileList[i].supervision + ','
// }
// if (i == form.value.fileList.length - 1) {
// audit(filePath)
// }
// }
// }
}
})
}
const audit = (filePath: any) => {
//选择系统变电站
const addForm = JSON.parse(JSON.stringify(form.value))
if (form.value.customSubstationFlag == '0') {
addForm.substation = addForm.substation.join(',')
}
console.log(addForm, '提交')
addSurveyPlan(addForm).then(res => {
cancelFn()
emit('onsubmit')
console.log(res, '新增普测计划')
})
return
if (title.value == '普测计划新增') {
addSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
addSurvey({ ...form.value, filePath: filePath }).then((res: any) => {
ElMessage.success('新增成功!')
cancelFn()
emit('onsubmit')
})
} else if (title.value == '重新发起计划') {
auditSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
auditSurvey({ ...form.value, filePath: filePath }).then((res: any) => {
ElMessage.success('重新发起计划成功!')
cancelFn()
emit('onsubmit')
@@ -207,37 +255,36 @@ const handleExceed: UploadProps['onExceed'] = (): void => {
ElMessage.error(`上传文件数量不能超过5个!`)
}
//移除文件上传
const removeFile = (file: any,uploadFiles:any) => {
const removeFile = (file: any, uploadFiles: any) => {
console.log(file, uploadFiles)
}
const open = (text: string, row?: any) => {
formdata.value = Object.assign({
orgName: '',
orgNo: dictData.state.area[0].id,
loadData()
form.value = Object.assign({
// orgName: '',
deptId: dictData.state.area[0].id,
planStartTime: '',
planEndTime: '',
planName: '',
rgeneralSurveyPlanDetailAddParm: [],
subCount: '',
busCount: '',
subIds: [],
checkComment: '',
fileList: [],
filePath: []
substation: '', //关联电站
// fileList: [],
// checkComment: '',
// filePath: '',
customSubstationFlag: '0' //电站类型
})
title.value = text
planAddition.value = true
formRef.value?.resetFields()
// if (row) {
// formdata.value = JSON.parse(JSON.stringify(row))
// form.value = JSON.parse(JSON.stringify(row))
// nextTick(() => {
// formdata.value.fileList = []
// form.value.fileList = []
// treeRef.value.loadData()
// treeRef.value.setKey(row.subIds || [], text)
// treeRef.value.setKey(row.substation || [], text)
// let arr = row.filePath.split(',')
// arr.slice(0, -1).forEach((item: any) => {
// getFileNameAndFilePath({ filePath: item }).then((res: any) => {
// formdata.value.fileList.push({
// form.value.fileList.push({
// name: res.data.fileName,
// supervision: res.data.name,
// url: res.data.url

1
src/views/pqs/supervise/harmonicSurvey/components/planAudits.vue
View File

@@ -4,7 +4,6 @@
<TableHeader area datePicker ref="TableHeaderRef" />
<Table ref="tableRef" />
<!-- 审核 -->
<planAdd ref="planAddRef" @onsubmit="tableStore.index()" />
</div>
</div>

28
src/views/pqs/supervise/harmonicSurvey/components/planManage.vue
View File

@@ -1,6 +1,5 @@
<template>
<TableHeader area datePicker ref="TableHeaderRef">
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增计划</el-button>
<!-- <el-button icon="el-icon-Download" type="primary" @click="exportFn">导出</el-button> -->
@@ -9,9 +8,6 @@
<Table ref="tableRef" />
<!-- 新增 -->
<planAdd ref="planAddRef" @onsubmit="tableStore.index()" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
@@ -22,19 +18,15 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { cancel } from '@/api/process-boot/generalTest'
import planAdd from './planAdd.vue'
import { useRouter } from 'vue-router'
import { queryPlan,removeSurvey } from '@/api/process-boot/generalTest'
import { queryPlan, removeSurvey } from '@/api/process-boot/generalTest'
import { getUserByRoleType } from '@/api/user-boot/user'
const { push } = useRouter()
const dialogVisible=ref(false)
const dialogVisible = ref(false)
const tableRef = ref()
const planAddRef = ref()
const TableHeaderRef = ref()
const auditList:any = ref([])
const auditList: any = ref([])
const auditUser = ref('')
const tableStore = new TableStore({
url: '/supervision-boot/surveyPlan/surveyPlanPage',
publicHeight: 65,
@@ -47,12 +39,21 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'deptName', title: '普测负责单位' },
{
field: 'deptName',
title: '普测负责单位'
},
{
field: 'substation',
title: '变电站',
formatter: (row: any) => {
return row.cellValue
}
},
{
field: 'planName',
title: '普测计划名称'
},
{ field: 'substation', title: '变电站' },
{ field: 'planStartTime', title: '计划开始时间' },
{ field: 'planEndTime', title: '计划结束时间' },
{
@@ -125,7 +126,6 @@ const tableStore = new TableStore({
})
tableStore.table.params.status = ''
provide('tableStore', tableStore)
// 新增计划
const add = () => {

100
src/views/pqs/supervise/harmonicSurvey/components/planTest.vue
View File

@@ -1,48 +1,48 @@
<template>
<el-dialog draggable :title="title" v-model="planAddition" width="65%" :before-close="cancelFn">
<el-dialog draggable :title="title" v-model="planAddition" width="500px" :before-close="cancelFn">
<el-form
:model="formdata"
:model="form"
:disabled="title == '查看计划' || title == '计划审核'"
ref="formRef"
:rules="rules"
label-width="auto"
class="form-two"
class="form-one"
>
<el-form-item for="-" label="普测负责单位:">
<Area v-model="formdata.orgNo" disabled />
<el-form-item for="-" label="普测负责单位:">
<Area v-model="form.orgNo" disabled />
</el-form-item>
<el-form-item for="-" label="计划名称:" prop="planName">
<el-input v-model="formdata.planName" placeholder="请输入计划名称"></el-input>
<el-form-item for="-" label="计划名称:" prop="planName">
<el-input v-model="form.planName" placeholder="请输入计划名称"></el-input>
</el-form-item>
<el-form-item for="-" label="计划开始时间:" prop="planStartTime">
<el-form-item for="-" label="计划开始时间:" prop="planStartTime">
<el-date-picker
v-model="formdata.planStartTime"
v-model="form.planStartTime"
type="date"
placeholder="选择计划开始时间"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item for="-" label="计划结束时间:" prop="planEndTime">
<el-form-item for="-" label="计划结束时间:" prop="planEndTime">
<el-date-picker
v-model="formdata.planEndTime"
v-model="form.planEndTime"
type="date"
placeholder="选择计划结束时间"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item for="-" label="实际完成时间:" prop="planComplateTime">
<el-form-item for="-" label="实际完成时间:" prop="planComplateTime">
<el-date-picker
v-model="formdata.planComplateTime"
v-model="form.planComplateTime"
type="date"
placeholder="选择实际完成时间"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item for="-" label="测试负责人:" prop="leader">
<el-input v-model="formdata.leader" placeholder="请输入测试负责人"></el-input>
<el-form-item for="-" label="测试负责人:" prop="leader">
<el-input v-model="form.leader" placeholder="请输入测试负责人"></el-input>
</el-form-item>
<el-form-item for="-" label="关联电站:" prop="subIds" style="display: flex;align-items: center;">
<el-cascader v-model="formdata.subIds" :options="treeList" :props="defaultProps" clearable filterable />
<el-form-item for="-" label="关联电站:" prop="subIds" style="display: flex; align-items: center">
<el-cascader v-model="form.subIds" :options="treeList" :props="defaultProps" clearable filterable />
<!-- <el-tree-select
accordion
ref="treeRef"
@@ -53,15 +53,25 @@
readonly
node-key="id"
:props="defaultProps"
v-model="formdata.subIds"
v-model="form.subIds"
:data="treeList"
:render-after-expand="false"
/> -->
</el-form-item>
<!-- <el-form :model="formdata" label-width="auto"> -->
<el-form-item for="-" class="uploadFile" label="普测报告:" prop="fileList">
<el-form-item for="-" label="测试是否有问题：" prop="isQuesition">
<!-- 默认值 否 -->
<el-radio-group v-model="form.isQuesition">
<el-radio value="0">否</el-radio>
<el-radio value="1">是</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item style="width: 100%" for="-" label="问题描述:" prop="resion" v-if="form.isQuesition == '1'">
<el-input type="textarea" v-model="form.resion" placeholder="请输入问题描述"></el-input>
</el-form-item>
<!-- <el-form :model="form" label-width="auto"> -->
<el-form-item for="-" class="uploadFile" label="普测报告:" prop="fileList">
<el-upload
v-model:file-list="formdata.fileList"
v-model:file-list="form.fileList"
ref="upload"
action=""
:limit="5"
@@ -80,7 +90,7 @@
<!-- <div
v-if="
(title == '查看计划' || title == '计划审核') &&
(title == '计划审核' || formdata.status == 1 || formdata.status == 3 || formdata.status == 4)
(title == '计划审核' || form.status == 1 || form.status == 3 || form.status == 4)
"
>
<el-divider content-position="left" style="font-size: 18px; font-weight: bolder">审核意见</el-divider>
@@ -88,7 +98,7 @@
:disabled="title != '计划审核'"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="formdata.checkComment"
v-model="form.checkComment"
></el-input>
</div> -->
<template #footer v-if="title != '查看计划'">
@@ -117,9 +127,9 @@ const defaultProps = ref({
value: 'id',
checkStrictly: true,
emitPath: false,
expandTrigger: 'hover' as const,
expandTrigger: 'hover' as const
})
const formdata: any = ref({
const form: any = ref({
orgName: '',
orgNo: dictData.state.area[0].id,
planStartTime: '',
@@ -133,7 +143,9 @@ const formdata: any = ref({
subIds: '',
fileList: [],
checkComment: '',
filePath: ''
filePath: '',
resion: '', //测试问题
isQuesition: '0' //是否有问题
})
const props = {
expandTrigger: 'hover' as const
@@ -147,7 +159,9 @@ const rules = {
planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
leader: [{ required: true, message: '请输入测试负责人', trigger: 'blur' }],
subIds: [{ required: true, message: '请选择关联电站', trigger: 'change' }],
fileList: [{ required: true, message: '请上传文件', trigger: 'change' }]
fileList: [{ required: true, message: '请上传文件', trigger: 'change' }],
isQuesition: [{ required: true, message: '请选择测试是否有问题', trigger: 'change' }],
resion: [{ required: true, message: '请输入测试问题', trigger: 'blur' }],
}
const cancelFn = () => {
formRef.value.resetFields()
@@ -167,20 +181,20 @@ const submitFn = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
let filePath = ''
// formdata.value.subIds = treeRef.value.treeRef.getCheckedKeys(false)
formdata.value.subIds= typeof(formdata.value.subIds)=='string'?[formdata.value.subIds]:formdata.value.subIds
if (formdata.value.fileList.length == 0) {
// form.value.subIds = treeRef.value.treeRef.getCheckedKeys(false)
form.value.subIds = typeof form.value.subIds == 'string' ? [form.value.subIds] : form.value.subIds
if (form.value.fileList.length == 0) {
audit(filePath)
} else {
for (let i = 0; i < formdata.value.fileList.length; i++) {
if (formdata.value.fileList[i].raw) {
await uploadFile(formdata.value.fileList[i].raw, 'supervision/').then(res => {
for (let i = 0; i < form.value.fileList.length; i++) {
if (form.value.fileList[i].raw) {
await uploadFile(form.value.fileList[i].raw, 'supervision/').then(res => {
filePath = filePath + res.data.name + ','
})
} else {
filePath = filePath + formdata.value.fileList[i].supervision + ','
filePath = filePath + form.value.fileList[i].supervision + ','
}
if (i == formdata.value.fileList.length - 1) {
if (i == form.value.fileList.length - 1) {
audit(filePath)
}
}
@@ -190,13 +204,13 @@ const submitFn = () => {
}
const audit = (filePath: any) => {
if (title.value == '普测计划新增') {
addSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
addSurvey({ ...form.value, filePath: filePath }).then((res: any) => {
ElMessage.success('新增成功!')
cancelFn()
emit('onsubmit')
})
} else if (title.value == '重新发起计划') {
auditSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
auditSurvey({ ...form.value, filePath: filePath }).then((res: any) => {
ElMessage.success('重新发起计划成功!')
cancelFn()
emit('onsubmit')
@@ -209,7 +223,7 @@ const handleExceed: UploadProps['onExceed'] = (): void => {
ElMessage.error(`上传文件数量不能超过5个!`)
}
const open = (text: string, row?: any) => {
formdata.value = Object.assign({
form.value = Object.assign({
orgName: '',
orgNo: dictData.state.area[0].id,
planStartTime: '',
@@ -223,21 +237,23 @@ const open = (text: string, row?: any) => {
subIds: [],
checkComment: '',
fileList: [],
filePath: []
filePath: [],
resion: '', //测试问题
isQuesition: '0' //是否有问题
})
title.value = text
planAddition.value = true
formRef.value?.resetFields()
// if (row) {
// formdata.value = JSON.parse(JSON.stringify(row))
// form.value = JSON.parse(JSON.stringify(row))
// nextTick(() => {
// formdata.value.fileList = []
// form.value.fileList = []
// treeRef.value.loadData()
// treeRef.value.setKey(row.subIds || [], text)
// let arr = row.filePath.split(',')
// arr.slice(0, -1).forEach((item: any) => {
// getFileNameAndFilePath({ filePath: item }).then((res: any) => {
// formdata.value.fileList.push({
// form.value.fileList.push({
// name: res.data.fileName,
// supervision: res.data.name,
// url: res.data.url

15
src/views/pqs/supervise/harmonicSurvey/components/testManage.vue
View File

@@ -1,6 +1,5 @@
<template>
<TableHeader area datePicker ref="TableHeaderRef">
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增计划</el-button>
<!-- <el-button icon="el-icon-Download" type="primary" @click="exportFn">导出</el-button> -->
@@ -8,7 +7,7 @@
</TableHeader ref="tableRef">
<Table ref="tableRef" />
<!-- 新增 -->
<planAdd ref="planAddRef" @onsubmit="tableStore.index()" />
<planTest ref="planTestRef" @onsubmit="tableStore.index()" />
<!-- 选择审核人 -->
<el-dialog draggable v-model="dialogVisible" title="审核" width="300" :before-close="handleClose">
@@ -34,7 +33,7 @@ import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { submitAuditUser,cancel } from '@/api/process-boot/generalTest'
import planAdd from './planAdd.vue'
import planTest from './planTest.vue'
import { useRouter } from 'vue-router'
import { useDictData } from '@/stores/dictData'
@@ -46,7 +45,7 @@ const dialogVisible=ref(false)
const tableRef = ref()
const planAddRef = ref()
const planTestRef = ref()
const TableHeaderRef = ref()
const auditList:any = ref([])
const auditUser = ref('')
@@ -98,7 +97,7 @@ const tableStore = new TableStore({
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
// planAddRef.value.open('查看计划', row)
// planTestRef.value.open('查看计划', row)
handleAudit(row.processInstanceId)
}
},
@@ -113,7 +112,7 @@ const tableStore = new TableStore({
},
click: row => {
// deviceQuitPopup.value.open('重新发起退运', row)
planAddRef.value.open('重新发起计划', row)
planTestRef.value.open('重新发起计划', row)
}
},
{
@@ -139,7 +138,7 @@ const tableStore = new TableStore({
// icon: 'el-icon-Plus',
// render: 'basicButton',
// click: async row => {
// planAddRef.value.open('编辑计划', row)
// planTestRef.value.open('编辑计划', row)
// }
// },
// {
@@ -179,7 +178,7 @@ provide('tableStore', tableStore)
// 新增计划
const add = () => {
// title.value = '普测计划新增'
planAddRef.value.open('普测计划新增')
planTestRef.value.open('普测计划新增')
}
// 提交审核

1
src/views/pqs/supervise/harmonicSurvey/index.vue
View File

@@ -16,7 +16,6 @@ import { onMounted, reactive, ref, provide } from 'vue'
import planManage from './components/planManage.vue'
import testManage from './components/testManage.vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'supervision/harmonicmanagement'
})

45
src/views/pqs/supervise/retire/deviceQuitPopup.vue
View File

@@ -4,21 +4,21 @@
class="cn-operate-dialog"
v-model="dialogVisible"
:title="title"
style="max-width: 450px; "
style="max-width: 450px"
top="30vh"
>
<el-scrollbar>
<el-form :inline="false" :model="formData" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="设备类型" prop="deviceType">
<el-radio-group v-model="formData.deviceType" @change="changeType">
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<!-- <el-form-item label="设备类型" prop="deviceType">
<el-radio-group v-model="form.deviceType" :disabled="title == '监测点退运'" @change="changeType">
<el-radio border label="1">监测装置</el-radio>
<el-radio border label="2">监测点</el-radio>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<el-form-item label="设备" prop="deviceId">
<el-tree-select
v-model="formData.deviceId"
v-model="form.deviceId"
:data="data"
filterable
:default-expand-all="true"
@@ -28,7 +28,7 @@
<el-form-item label="退役原因" prop="propertyNo">
<!-- <el-input
v-model='formData.propertyNo'
v-model='form.propertyNo'
clearable
placeholder='请输入退役原因'
/> -->
@@ -37,7 +37,7 @@
clearable
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入退役原因"
v-model="formData.propertyNo"
v-model="form.propertyNo"
></el-input>
</el-form-item>
</el-form>
@@ -69,10 +69,10 @@ const formRef = ref()
const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const formData = reactive({
const form = ref({
id: '',
deviceId: '',
deviceType: '',
deviceType: '1',
propertyNo: ''
})
@@ -90,7 +90,6 @@ const resetForm = () => {
const open = async (text: string, tempData?: any) => {
title.value = text
if (tempData) {
if (tempData.deviceType == 1) {
//先加载装置数据并赋值
@@ -118,28 +117,30 @@ const open = async (text: string, tempData?: any) => {
data.value = lineList.value
}
// 表单赋值
for (let key in formData) {
formData[key] = tempData[key]
for (let key in form.value) {
form.value[key] = tempData[key]
}
formData.deviceType = formData.deviceType + ''
form.value.deviceType = form.value.deviceType + ''
} else {
//终端
await getTerminalSelectTree(4).then(res => {
deviceList.value = res.data
})
//监测点
getTerminalSelectTree(6).then(res => {
await getTerminalSelectTree(6).then(res => {
lineList.value = res.data
})
sourceData.value = deviceList.value
data.value = deviceList.value
resetForm()
// 在此处恢复默认表单
for (let key in formData) {
formData[key] = ''
for (let key in form.value) {
form.value[key] = ''
}
formData.deviceType = '1'
form.value.deviceType = '1'
}
form.value.deviceType = text == '监测点退运' ? '2' : '1'
changeType(form.value.deviceType)
dialogVisible.value = true
}
@@ -149,13 +150,13 @@ const open = async (text: string, tempData?: any) => {
const submit = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
if (formData.id) {
await quitRunningDeviceUpdate(formData)
if (form.value.id) {
await quitRunningDeviceUpdate(form.value)
ElMessage.success('重新发起成功')
tableStore.index()
dialogVisible.value = false
} else {
await addRunningDevice(formData)
await addRunningDevice(form.value)
//查询进线数据，避免一直处于loading状态
ElMessage.success('申请成功')
tableStore.index()
@@ -175,7 +176,7 @@ const changeType = (event: any) => {
} else {
sourceData.value = lineList.value
}
formData.deviceId = ''
form.value.deviceId = ''
data.value = sourceData.value
}

217
src/views/pqs/supervise/retire/index.vue
View File

@@ -1,201 +1,38 @@
<!--待办事项列表-->
<template>
<div class='default-main'>
<TableHeader date-picker>
<template v-slot:select>
<!-- <el-form-item label='任务名称'>-->
<!-- <el-input-->
<!-- v-model='tableStore.table.params.searchValue'-->
<!-- clearable-->
<!-- placeholder='请输入任务名称'-->
<!-- />-->
<!-- </el-form-item>-->
</template>
<template #operation>
<el-button icon='el-icon-Plus' type='primary' @click='add'>新增</el-button>
</template>
</TableHeader>
<!--表格-->
<Table ref='tableRef'></Table>
<!--弹框-->
<device-quit-popup ref='deviceQuitPopup' />
<div class="default-main">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="终端状态管理" name="0">
<terminal v-if="activeName == '0'" />
</el-tab-pane>
<el-tab-pane label="监测点退运" name="1">
<monitor v-if="activeName == '1'" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus/es'
import { cancelQuitRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'
<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
import terminal from './terminal.vue'
import monitor from './monitor.vue'
defineOptions({
name: 'supervision/retire'
})
const { push } = useRouter()
const deviceQuitPopup = ref()
const tableStore = new TableStore({
url: '/supervision-boot/quitRunningDevice/list',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{
title: '设备类型', field: 'deviceType', minWidth: 130,
render: 'tag',
custom: {
1: 'primary',
2: 'primary'
},
replaceValue: {
1: '装置',
2: '监测点'
}
},
{ title: '供电公司', field: 'gdName', minWidth: 130 },
{ title: '变电站', field: 'subName', minWidth: 130 },
{ title: '设备名称', field: 'deviceName', minWidth: 130 },
{ title: '退役原因', field: 'propertyNo', minWidth: 130 },
{
title: '设备状态', field: 'deviceStatus', minWidth: 130,
render: 'tag',
custom: {
0: 'success',
1: 'warning',
2: 'danger',
3: 'warning',
4: 'info'
},
replaceValue: {
0: '运行',
1: '检修',
2: '停运',
3: '调试',
4: '退运'
}
},
{
field: 'status', title: '审核状态', minWidth: 100,
render: 'tag',
custom: {
1: 'primary',
2: 'success',
3: 'danger',
4: 'warning'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消'
}
},
{ field: 'createTime', title: '开始时间', minWidth: 170 },
{
title: '操作',
align: 'center',
minWidth: '150',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'productSetting',
title: '流程详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
handleAudit(row.processInstanceId,row.historyInstanceId)
}
},
{
name: 'edit',
title: '重新发起',
type: 'warning',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status !== 3
},
click: row => {
deviceQuitPopup.value.open('重新发起退运', row)
}
},
{
name: 'cancel',
title: '取消',
type: 'danger',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status == 3 || row.status == 2 || row.status == 4
},
click: row => {
cancelLeave(row)
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
onMounted(() => {
// 加载数据
tableStore.index()
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
//新增退运设备信息
const add = () => {
deviceQuitPopup.value.open('新增退运')
}
/** 流程实例详情 */
const handleAudit = (instanceId: string,historyIds:string) => {
push({
name: 'BpmProcessInstanceDetail',
query: {
id: instanceId,
historyIds:historyIds
}
})
}
/**取消流程操作*/
const cancelLeave = async (row: any) => {
// 二次确认
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空'
})
// 发起取消
let data = {
id: row.id,
processInstanceId: row.processInstanceId,
reason: value
}
await cancelQuitRunningDevice(data)
ElMessage.success('取消成功')
// 加载数据
tableStore.index()
}
const activeName = ref('1')
const layout = mainHeight(63) as any
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
:deep(.el-tabs__content) {
height: v-bind('layout.height');
overflow-y: auto;
}
</style>

201
src/views/pqs/supervise/retire/monitor.vue Normal file
View File

@@ -0,0 +1,201 @@
<!--待办事项列表-->
<template>
<div class='default-main'>
<TableHeader date-picker>
<template v-slot:select>
<!-- <el-form-item label='任务名称'>-->
<!-- <el-input-->
<!-- v-model='tableStore.table.params.searchValue'-->
<!-- clearable-->
<!-- placeholder='请输入任务名称'-->
<!-- />-->
<!-- </el-form-item>-->
</template>
<template #operation>
<el-button icon='el-icon-Plus' type='primary' @click='add'>新增</el-button>
</template>
</TableHeader>
<!--表格-->
<Table ref='tableRef'></Table>
<!--弹框-->
<device-quit-popup ref='deviceQuitPopup' />
</div>
</template>
<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus/es'
import { cancelQuitRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'
defineOptions({
name: 'supervision/retire'
})
const { push } = useRouter()
const deviceQuitPopup = ref()
const tableStore = new TableStore({
url: '/supervision-boot/quitRunningDevice/list',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{
title: '设备类型', field: 'deviceType', minWidth: 130,
render: 'tag',
custom: {
1: 'primary',
2: 'primary'
},
replaceValue: {
1: '装置',
2: '监测点'
}
},
{ title: '供电公司', field: 'gdName', minWidth: 130 },
{ title: '变电站', field: 'subName', minWidth: 130 },
{ title: '设备名称', field: 'deviceName', minWidth: 130 },
{ title: '退役原因', field: 'propertyNo', minWidth: 130 },
{
title: '设备状态', field: 'deviceStatus', minWidth: 130,
render: 'tag',
custom: {
0: 'success',
1: 'warning',
2: 'danger',
3: 'warning',
4: 'info'
},
replaceValue: {
0: '运行',
1: '检修',
2: '停运',
3: '调试',
4: '退运'
}
},
{
field: 'status', title: '审核状态', minWidth: 100,
render: 'tag',
custom: {
1: 'primary',
2: 'success',
3: 'danger',
4: 'warning'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消'
}
},
{ field: 'createTime', title: '开始时间', minWidth: 170 },
{
title: '操作',
align: 'center',
minWidth: '150',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'productSetting',
title: '流程详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
handleAudit(row.processInstanceId,row.historyInstanceId)
}
},
{
name: 'edit',
title: '重新发起',
type: 'warning',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status !== 3
},
click: row => {
deviceQuitPopup.value.open('重新发起退运', row)
}
},
{
name: 'cancel',
title: '取消',
type: 'danger',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status == 3 || row.status == 2 || row.status == 4
},
click: row => {
cancelLeave(row)
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
onMounted(() => {
// 加载数据
tableStore.index()
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
//新增退运设备信息
const add = () => {
deviceQuitPopup.value.open('监测点退运')
}
/** 流程实例详情 */
const handleAudit = (instanceId: string,historyInstanceId:string) => {
push({
name: 'BpmProcessInstanceDetail',
state: {
id: instanceId,
historyInstanceId
}
})
}
/**取消流程操作*/
const cancelLeave = async (row: any) => {
// 二次确认
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空'
})
// 发起取消
let data = {
id: row.id,
processInstanceId: row.processInstanceId,
reason: value
}
await cancelQuitRunningDevice(data)
ElMessage.success('取消成功')
// 加载数据
tableStore.index()
}
</script>

201
src/views/pqs/supervise/retire/terminal.vue Normal file
View File

@@ -0,0 +1,201 @@
<!--待办事项列表-->
<template>
<div class='default-main'>
<TableHeader date-picker>
<template v-slot:select>
<!-- <el-form-item label='任务名称'>-->
<!-- <el-input-->
<!-- v-model='tableStore.table.params.searchValue'-->
<!-- clearable-->
<!-- placeholder='请输入任务名称'-->
<!-- />-->
<!-- </el-form-item>-->
</template>
<template #operation>
<el-button icon='el-icon-Plus' type='primary' @click='add'>新增</el-button>
</template>
</TableHeader>
<!--表格-->
<Table ref='tableRef'></Table>
<!--弹框-->
<device-quit-popup ref='deviceQuitPopup' />
</div>
</template>
<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus/es'
import { cancelQuitRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'
defineOptions({
name: 'supervision/retire'
})
const { push } = useRouter()
const deviceQuitPopup = ref()
const tableStore = new TableStore({
url: '/supervision-boot/quitRunningDevice/list',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{
title: '设备类型', field: 'deviceType', minWidth: 130,
render: 'tag',
custom: {
1: 'primary',
2: 'primary'
},
replaceValue: {
1: '装置',
2: '监测点'
}
},
{ title: '供电公司', field: 'gdName', minWidth: 130 },
{ title: '变电站', field: 'subName', minWidth: 130 },
{ title: '设备名称', field: 'deviceName', minWidth: 130 },
{ title: '退役原因', field: 'propertyNo', minWidth: 130 },
{
title: '设备状态', field: 'deviceStatus', minWidth: 130,
render: 'tag',
custom: {
0: 'success',
1: 'warning',
2: 'danger',
3: 'warning',
4: 'info'
},
replaceValue: {
0: '运行',
1: '检修',
2: '停运',
3: '调试',
4: '退运'
}
},
{
field: 'status', title: '审核状态', minWidth: 100,
render: 'tag',
custom: {
1: 'primary',
2: 'success',
3: 'danger',
4: 'warning'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消'
}
},
{ field: 'createTime', title: '开始时间', minWidth: 170 },
{
title: '操作',
align: 'center',
minWidth: '150',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'productSetting',
title: '流程详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
handleAudit(row.processInstanceId,row.historyInstanceId)
}
},
{
name: 'edit',
title: '重新发起',
type: 'warning',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status !== 3
},
click: row => {
deviceQuitPopup.value.open('重新发起退运', row)
}
},
{
name: 'cancel',
title: '取消',
type: 'danger',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status == 3 || row.status == 2 || row.status == 4
},
click: row => {
cancelLeave(row)
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
onMounted(() => {
// 加载数据
tableStore.index()
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
//新增退运设备信息
const add = () => {
deviceQuitPopup.value.open('新增退运')
}
/** 流程实例详情 */
const handleAudit = (instanceId: string,historyInstanceId:string) => {
push({
name: 'BpmProcessInstanceDetail',
state: {
id: instanceId,
historyInstanceId
}
})
}
/**取消流程操作*/
const cancelLeave = async (row: any) => {
// 二次确认
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空'
})
// 发起取消
let data = {
id: row.id,
processInstanceId: row.processInstanceId,
reason: value
}
await cancelQuitRunningDevice(data)
ElMessage.success('取消成功')
// 加载数据
tableStore.index()
}
</script>

328
src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue
View File

@@ -1,98 +1,97 @@
<template>
<el-card v-loading="loading" class="box-card">
<template #header>
<span class="el-icon-picture-outline">审批记录</span>
</template>
<el-col :offset="3" :span="17">
<div class="block">
<el-timeline>
<el-timeline-item
v-if="processInstance.endTime"
:type="getProcessInstanceTimelineItemType(processInstance)"
>
<p style="font-weight: 700">
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
<el-tag :type='getTaskTimelineItemType(processInstance.status)'>
{{getTaskNameItemType(processInstance.status)}}
</el-tag>
</p>
</el-timeline-item>
<el-timeline-item
v-for="(item, index) in tasks"
:key="index"
:type="getTaskTimelineItemType(item)"
>
<p style="font-weight: 700;margin: 8px">
审批任务：{{ item.name }}
<el-tag :type='getTaskTimelineItemType(item.status)'>
{{getTaskNameItemType(item.status)}}
</el-tag>
<el-button
class="ml-10px"
v-if="!isEmpty(item.children)"
@click="openChildrenTask(item)"
size="small"
>
<Icon icon="ep:memo" /> 子任务
</el-button>
<el-button
class="ml-10px"
size="small"
v-if="item.formId > 0"
@click="handleFormDetail(item)"
>
<Icon icon="ep:document" /> 查看表单
</el-button>
</p>
<el-card :body-style="{ padding: '10px' }">
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
审批人：{{ item.assigneeUser.name }}
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
</label>
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
<label style="font-weight: normal; color: #8a909c">
{{ formatDate(item?.createTime) }}
</label>
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
审批时间：
</label>
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
{{ formatDate(item?.endTime) }}
</label>
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
耗时：
</label>
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
{{ formatPast2(item?.durationInMillis) }}
</label>
<p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
</el-card>
</el-timeline-item>
<el-timeline-item type="success">
<p style="font-weight: 700">
发起流程：【{{ processInstance.startUser?.name }}】在
{{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
</p>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
<!-- 弹窗：子任务 -->
<TaskSignList ref="taskSignListRef" @success="refresh" />
<!-- 弹窗：表单 -->
<el-dialog title="表单详情" v-model="taskFormVisible" width="600">
<form-create
ref="fApi"
v-model="taskForm.value"
:option="taskForm.option"
:rule="taskForm.rule"
/>
</el-dialog>
<el-card v-loading="loading" class="box-card">
<el-col :offset="3" :span="17">
<div class="block">
<el-timeline>
<el-timeline-item
v-if="processInstance.endTime"
:type="getProcessInstanceTimelineItemType(processInstance)"
>
<p style="font-weight: 700">
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
<el-tag :type="getTaskTimelineItemType(processInstance.status)">
{{ getTaskNameItemType(processInstance.status) }}
</el-tag>
</p>
</el-timeline-item>
<div class="return_send" v-for="(item, index) in tasksList" :key="index">
<!-- 最后一条不显示重新发起 -->
<el-timeline-item type="success" v-if="index != 0">
<p style="font-weight: 700">
重新发起：【{{ item.processInstance.startUser?.name }}】在
{{ formatDate(item?.createTime) }} 重新发起【 {{ item.processInstance.name }} 】流程
</p>
</el-timeline-item>
<el-timeline-item :type="getTaskTimelineItemType(item)">
<p style="font-weight: 700; margin: 8px">
审批任务：{{ item.name }}
<el-tag :type="getTaskTimelineItemType(item.status)">
{{ getTaskNameItemType(item.status) }}
</el-tag>
<el-button
class="ml-10px"
v-if="!isEmpty(item.children)"
@click="openChildrenTask(item)"
size="small"
>
<Icon icon="ep:memo" />
子任务
</el-button>
<el-button
class="ml-10px"
size="small"
v-if="item.formId > 0"
@click="handleFormDetail(item)"
>
<Icon icon="ep:document" />
查看表单
</el-button>
</p>
<el-card :body-style="{ padding: '10px' }">
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
审批人：{{ item.assigneeUser.name }}
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
</label>
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
<label style="font-weight: normal; color: #8a909c">
{{ formatDate(item?.createTime) }}
</label>
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
审批时间：
</label>
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
{{ formatDate(item?.endTime) }}
</label>
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
耗时：
</label>
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
{{ formatPast2(item?.durationInMillis) }}
</label>
<p v-if="item.reason">审批建议：{{ item.reason }}</p>
</el-card>
</el-timeline-item>
</div>
<el-timeline-item type="success">
<p style="font-weight: 700">
发起流程：【{{ tasksList[tasksList.length - 1]?.processInstance.startUser?.name }}】在
{{ formatDate(tasksList[tasksList.length - 1]?.createTime) }} 发起【
{{ tasksList[tasksList.length - 1]?.processInstance.name }} 】流程
</p>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
<!-- 弹窗：子任务 -->
<TaskSignList ref="taskSignListRef" @success="refresh" />
<!-- 弹窗：表单 -->
<el-dialog title="表单详情" v-model="taskFormVisible" width="600">
<form-create ref="fApi" v-model="taskForm.value" :option="taskForm.option" :rule="taskForm.rule" />
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref,nextTick } from 'vue'
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDate, formatPast2 } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
@@ -104,91 +103,120 @@ import { setConfAndFields2 } from '@/utils/formCreate'
defineOptions({ name: 'BpmProcessInstanceTaskList' })
defineProps({
loading: propTypes.bool, // 是否加载中
processInstance: propTypes.object, // 流程实例
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
const props = defineProps({
loading: propTypes.bool, // 是否加载中
processInstance: propTypes.object, // 流程实例
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
})
const tasksList:any=ref([])
watch(
() => props.tasks,
(val, oldVal) => {
if (val&&val.length!=0) {
tasksList.value =JSON.parse(JSON.stringify( val)).sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return sortYMDHMS(a.endTime) - sortYMDHMS(b.endTime)
}
else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
}
else {
return sortYMDHMS(a.createTime) - sortYMDHMS(b.createTime)
}
}).reverse()
console.log(JSON.parse(JSON.stringify( val)),tasksList.value, '传递过来的task任务数据')
}
},
{
immediate:true,
deep:true
}
)
const sortYMDHMS = val => {
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
}
/** 获得流程实例对应的颜色 */
const getProcessInstanceTimelineItemType = (item: any) => {
if (item.status === 2) {
return 'success'
}
if (item.status === 3) {
return 'danger'
}
if (item.status === 4) {
return 'warning'
}
return ''
if (item.status === 2) {
return 'success'
}
if (item.status === 3) {
return 'danger'
}
if (item.status === 4) {
return 'warning'
}
return ''
}
/** 获得任务对应的颜色 */
const getTaskTimelineItemType = (itemStatus: any) => {
if ([0, 1, 6, 7].includes(itemStatus)) {
if ([0, 1, 6, 7].includes(itemStatus)) {
return 'primary'
}
if (itemStatus === 2) {
return 'success'
}
if (itemStatus === 3) {
return 'danger'
}
if (itemStatus === 4) {
return 'info'
}
if (itemStatus === 5) {
return 'warning'
}
return 'primary'
}
if (itemStatus === 2) {
return 'success'
}
if (itemStatus === 3) {
return 'danger'
}
if (itemStatus === 4) {
return 'info'
}
if (itemStatus === 5) {
return 'warning'
}
return 'primary'
}
const getTaskNameItemType = (itemStatus: any) => {
if (itemStatus === 1) {
if (itemStatus === 1) {
return '审批中'
}
if (itemStatus === 2) {
return '审批通过'
}
if (itemStatus === 3) {
return '审批不通过'
}
if (itemStatus === 4) {
return '已取消'
}
return '审批中'
}
if (itemStatus === 2) {
return '审批通过'
}
if (itemStatus === 3) {
return '审批不通过'
}
if (itemStatus === 4) {
return '已取消'
}
return '审批中'
}
/** 子任务 */
const taskSignListRef = ref()
const openChildrenTask = (item: any) => {
taskSignListRef.value.open(item)
taskSignListRef.value.open(item)
}
/** 查看表单 */
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
const taskForm = ref({
rule: [],
option: {},
value: {}
rule: [],
option: {},
value: {}
}) // 流程任务的表单详情
const taskFormVisible = ref(false)
const handleFormDetail = async (row) => {
// 设置表单
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
// 弹窗打开
taskFormVisible.value = true
// 隐藏提交、重置按钮，设置禁用只读
await nextTick()
fApi.value.fapi.btn.show(false)
fApi.value?.fapi?.resetBtn.show(false)
fApi.value?.fapi?.disabled(true)
const handleFormDetail = async row => {
// 设置表单
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
// 弹窗打开
taskFormVisible.value = true
// 隐藏提交、重置按钮，设置禁用只读
await nextTick()
fApi.value.fapi.btn.show(false)
fApi.value?.fapi?.resetBtn.show(false)
fApi.value?.fapi?.disabled(true)
}
/** 刷新数据 */
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
const refresh = () => {
emit('refresh')
emit('refresh')
}
</script>

245
src/views/system/bpm/processInstance/detail/index.vue
View File

@@ -1,55 +1,55 @@
<!-- 流程详情页面 tab切换 -->
<template>
<div class='default-main' style='overflow: hidden;'>
<div class="default-main" style="overflow: hidden">
<!--返回按钮-->
<back-component style='margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px' />
<el-tabs type='border-card' v-model='tab' @tab-click='handleClickTab'>
<el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length > 0'>
<back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
<el-tabs type="border-card" v-model="tab" @tab-click="handleClickTab">
<el-tab-pane label="流程审核" name="流程审核" v-if="runningTasks.length > 0">
<el-card
v-for='(item, index) in runningTasks'
:key='index'
v-loading='processInstanceLoading'
class='box-card'
v-for="(item, index) in runningTasks"
:key="index"
v-loading="processInstanceLoading"
class="box-card"
>
<template #header>
<span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
<span class="el-icon-picture-outline">当前任务【{{ item.name }}】</span>
</template>
<el-col :offset='6' :span='16'>
<el-col :offset="6" :span="16">
<el-form
:ref="'form' + index"
:model='auditForms[index]'
:rules='auditRule'
label-width='100px'
:model="auditForms[index]"
:rules="auditRule"
label-width="100px"
>
<el-form-item v-if='processInstance && processInstance.name' label='流程名'>
<el-form-item v-if="processInstance && processInstance.name" label="流程名">
{{ processInstance.name }}
</el-form-item>
<el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
<el-form-item v-if="processInstance && processInstance.startUser" label="发起人">
{{ processInstance?.startUser.name }}
</el-form-item>
<el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
<el-form-item v-if="processInstance && processInstance.startUser" label="发起部门">
{{ processInstance?.startUser.deptName }}
</el-form-item>
<el-card v-if='runningTasks[index].formId != null' class='mb-15px !-mt-10px'>
<el-card v-if="runningTasks[index].formId != null" class="mb-15px !-mt-10px">
<template #header>
<span class='el-icon-picture-outline'>
<span class="el-icon-picture-outline">
{{ runningTasks[index]?.formName }}
</span>
</template>
<form-create
v-model='approveForms[index].value'
v-model:api='approveFormFApis[index]'
:option='approveForms[index].option'
:rule='approveForms[index].rule'
v-model="approveForms[index].value"
v-model:api="approveFormFApis[index]"
:option="approveForms[index].option"
:rule="approveForms[index].rule"
/>
</el-card>
<el-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
<el-form-item label="审批建议" prop="reason" style="margin-top: 15px">
<el-input
v-model='auditForms[index].reason'
placeholder='请输入审批建议'
type='textarea'
v-model="auditForms[index].reason"
placeholder="请输入审批建议"
type="textarea"
/>
</el-form-item>
<!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
@@ -63,11 +63,9 @@
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form>
<div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
<el-button type='success' :icon='Select' @click='handleAudit(item, true)'>通过</el-button>
<el-button type='danger' :icon='Close' @click='handleAudit(item, false)'>不通过</el-button>
<div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
<el-button type="success" :icon="Select" @click="handleAudit(item, true)">通过</el-button>
<el-button type="danger" :icon="Close" @click="handleAudit(item, false)">不通过</el-button>
<!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
<!-- <Icon icon='ep:edit' />-->
<!-- 转办-->
@@ -85,60 +83,60 @@
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label='申请信息' name='申请信息'>
<el-tab-pane label="申请信息" name="申请信息">
<!-- 申请信息 -->
<el-card v-loading='processInstanceLoading' class='box-card'>
<el-card v-loading="processInstanceLoading" class="box-card">
<template #header>
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
</template>
<!-- 情况一：流程表单 -->
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
<el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
<form-create
v-model='detailForm.value'
v-model:api='fApi'
:option='detailForm.option'
:rule='detailForm.rule'
v-model="detailForm.value"
v-model:api="fApi"
:option="detailForm.option"
:rule="detailForm.rule"
/>
</el-col>
<!-- 情况二：业务表单 -->
<div v-if='processInstance?.processDefinition?.formType === 20'>
<BusinessFormComponent :id='processInstance.businessKey' :applyTitle='processInstance.name' />
<div v-if="processInstance?.processDefinition?.formType === 20">
<BusinessFormComponent :id="processInstance.businessKey" :applyTitle="processInstance.name" />
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label='审批记录' name='审批记录'>
<el-tab-pane label="审批记录" name="审批记录">
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading='tasksLoad'
:process-instance='processInstance'
:tasks='tasks'
@refresh='getTaskList'
:loading="tasksLoad"
:process-instance="processInstance"
:tasks="tasks"
@refresh="getTaskList"
/>
</el-tab-pane>
<el-tab-pane label='流程图' name='流程图'>
<el-tab-pane label="流程图" name="流程图">
<ProcessInstanceBpmnViewer
ref='mapRef'
:id='`${id}`'
:bpmn-xml='bpmnXml'
:loading='processInstanceLoading'
:process-instance='processInstance'
:tasks='tasks'
ref="mapRef"
:id="`${id}`"
:bpmn-xml="bpmnXml"
:loading="processInstanceLoading"
:process-instance="processInstance"
:tasks="tasks"
/>
</el-tab-pane>
</el-tabs>
<ContentWrap>
<!-- 弹窗：转派审批人 -->
<TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
<TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
<!-- 弹窗：回退节点 -->
<TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
<TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
<!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
<TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
<!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
<TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
<TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
</ContentWrap>
</div>
</template>
<script lang='ts' setup>
<script lang="ts" setup>
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick, markRaw } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
@@ -165,11 +163,12 @@ defineOptions({ name: 'BpmProcessInstanceDetail' })
const { query } = useRoute() // 查询参数
const { proxy } = getCurrentInstance() as any
const states = history.state
const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id // 当前登录的编号
const id = (states.id as unknown as string) || query.id // 流程实例的编号
const historyInstanceId = states.historyInstanceId as unknown as string // 历史流程实例的编号
const id = query.id as unknown as string // 流程实例的编号
const todo = query.todo // 是否存在待办事项
const todo = states.todo // 是否存在待办事项
const processInstanceLoading = ref(false) // 流程实例的加载中
const processInstance = ref({}) // 流程实例
const bpmnXml = ref('') // BPMN XML
@@ -270,6 +269,7 @@ const handleSign = async (task: any) => {
const getDetail = () => {
// 1. 获得流程实例相关
getProcessInstance()
//获取历史流程
// 2. 获得流程任务列表（审批记录）
getTaskList()
}
@@ -283,6 +283,9 @@ const handleClickTab = (tab: any, event: any) => {
/** 加载流程实例 */
const BusinessFormComponent = ref(null) // 异步组件
const historyInstanceIdList: any = ref([])
//查询流程数据
const getProcessInstance = async () => {
try {
processInstanceLoading.value = true
@@ -315,49 +318,71 @@ const getProcessInstance = async () => {
await getProcessDefinitionById(processDefinition.id).then(res => {
bpmnXml.value = res.data?.bpmnXml
})
console.log(bpmnXml.value, '流程图数据')
// console.log(bpmnXml.value, '流程图数据')
} finally {
processInstanceLoading.value = false
}
}
const sortYMDHMS = val => {
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
}
/** 加载任务列表 */
let stepList = ref([])
const getTaskList = async () => {
historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : []
runningTasks.value = []
auditForms.value = []
approveForms.value = []
approveFormFApis.value = []
tasks.value = []
stepList.value = []
try {
// 获得未取消的任务
tasksLoad.value = true
let data
await getTaskListByProcessInstanceId(id).then(res => {
data = res.data
})
tasks.value = []
// 1.1 移除已取消的审批
data.forEach(task => {
if (task.status !== 4) {
tasks.value.push(task)
}
})
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
tasks.value.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return b.endTime - a.endTime
} else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
} else {
return b.createTime - a.createTime
}
})
//根据历史实例id查询历史任务日志数据
// 获得需要自己审批的任务
loadRunningTask(tasks.value)
// 把最新的id加进去
historyInstanceIdList.value.push(id)
// if (historyInstanceIdList.value && historyInstanceIdList.value.length != 0) {
//轮询
await historyInstanceIdList.value?.map((item: any, index: any) => {
getTaskListByProcessInstanceId(item).then(res => {
res.data.map(vv => {
stepList.value.push(vv)
})
})
tasks.value=[]
})
// }
// await getTaskListByProcessInstanceId(id).then(res => {
// data = res.data
// })
//历史数据添加进tasks数据中
// 1.1 移除已取消的审批
// data.map(task => {
// if (task.status !== 4) {
// tasks.value.push(task)
// }
// })
// // 1.2 排序，将未完成的排在前面，已完成的排在后面；
// let list = Array.from(tasks.value)?.sort((a, b) => {
// // 有已完成的情况，按照完成时间倒序
// if (a.endTime && b.endTime) {
// return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
// } else if (a.endTime) {
// return 1
// } else if (b.endTime) {
// return -1
// // 都是未完成，按照创建时间倒序
// } else {
// return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
// }
// })
// console.log(list, '打印处理好的数据', list.length)
// // 获得需要自己审批的任务
// await loadRunningTask(list)
} finally {
tasksLoad.value = false
}
@@ -367,7 +392,8 @@ const getTaskList = async () => {
* 设置 runningTasks 中的任务
*/
const loadRunningTask = tasks => {
tasks.forEach(task => {
// tasks.length = 1
tasks?.forEach(task => {
if (!isEmpty(task.children)) {
loadRunningTask(task.children)
}
@@ -385,7 +411,6 @@ const loadRunningTask = tasks => {
reason: '',
copyUserIds: []
})
console.log(runningTasks.value)
// 2.4 处理 approve 表单
if (task.formId && task.formConf) {
const approveForm = {}
@@ -401,6 +426,42 @@ const tab = ref('')
/** 初始化 */
const userOptions = ref([]) // 用户列表
//监听历史流程实例数据
watch(
() => stepList.value,
(val, oldVal) => {
if (val&&val.length!=0 ) {
tasks.value=[]
val.map(task => {
if (task.status !== 4) {
tasks.value.push(task)
}
})
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
let list = Array.from(tasks.value)?.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return sortYMDHMS(b.endTime) - sortYMDHMS(a.endTime)
} else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
} else {
return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
}
})
let newList=[]
// 获得需要自己审批的任务
loadRunningTask(newList)
}
},
{
immediate:true,
deep:true,
}
)
onMounted(async () => {
getDetail()
// 获得用户列表
@@ -414,7 +475,7 @@ onMounted(async () => {
}
})
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
::v-deep .el-tab-pane {
height: calc(100vh - 200px) !important;
overflow: auto !important;