<template>
|
<div class="system-add-menu-container">
|
<el-dialog :title="title" v-model="isShowWorkDialog" append-to-body :close-on-click-modal="false" width="50%">
|
<div class="work-form">
|
<el-form :model="workForm" :rules="workFormRules" ref="workFormRef" size="default" label-width="150px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="排查类型" prop="checkWorkType">
|
<el-select class="input-add" :disabled="!disabled" v-model="workForm.checkWorkType" placeholder="请输入排查类型" clearable> <el-option v-for="item in checkWorkTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="排查名称" prop="checkWorkName">
|
<el-input class="input-add" :disabled="!disabled" v-model.trim="workForm.checkWorkName" placeholder="请输入排查名称" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="排查周期" prop="checkCycle">
|
<el-input class="input-add" :disabled="!disabled" type="number" v-model.trim="workForm.checkCycle" placeholder="请输入排查周期" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="时间单位" prop="checkCycleUnit">
|
<el-select class="input-add" :disabled="!disabled" v-model="workForm.checkCycleUnit" placeholder="请输入时间单位" clearable>
|
<el-option v-for="item in timeType" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="有效时间" prop="validTime">
|
<el-input class="input-add" :disabled="!disabled" type="number" v-model.trim="workForm.validTime" placeholder="请输入有效时间" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="时间单位" prop="validTimeUnit">
|
<el-select class="input-add" :disabled="!disabled" v-model="workForm.validTimeUnit" placeholder="请输入时间单位" clearable>
|
<el-option v-for="item in timeType" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="提醒时间" prop="noticeTime">
|
<el-input class="input-add" :disabled="!disabled" type="number" v-model.trim="workForm.noticeTime" placeholder="请输入提醒时间" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="时间单位" prop="noticeTimeUnit">
|
<el-select class="input-add" :disabled="!disabled" v-model="workForm.noticeTimeUnit" placeholder="请输入时间单位" clearable>
|
<el-option v-for="item in timeType" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="执行部门" prop="execDepId">
|
<el-cascader :disabled="!disabled" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable filterable class="input-add" v-model="workForm.execDepId"> </el-cascader>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="任务单元" prop="taskUnitId">
|
<el-select class="input-add" :disabled="!disabled" v-model="workForm.taskUnitId" placeholder="请输入任务单元" clearable filterable>
|
<el-option v-for="item in taskUnitList" :key="item.id" :label="item.taskUnitName" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
|
<el-form-item label="首次任务开始时间" prop="firstStartTime">
|
<el-date-picker :disabled="!disabled" class="input-add" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" v-model="workForm.firstStartTime" placeholder="请选择首次任务开始时间" clearable></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20" v-show="personTime">
|
<el-form-item label="创建人" prop="location">
|
<el-input class="input-add" :disabled="!disabled" v-model.trim="workForm.createByUserName" placeholder="请输入区域位置"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20" v-show="personTime">
|
<el-form-item label="创建时间" prop="location">
|
<el-input class="input-add" :disabled="!disabled" v-model.trim="workForm.gmtCreate" placeholder="请输入区域位置"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20" v-show="personTime">
|
<el-form-item label="最后修改人" prop="location">
|
<el-input class="input-add" :disabled="!disabled" v-model.trim="workForm.lastEditUserName" placeholder="请输入区域位置"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20" v-show="personTime">
|
<el-form-item label="最后修改时间" prop="location">
|
<el-input class="input-add" :disabled="!disabled" v-model.trim="workForm.gmtModitify" placeholder="请输入区域位置"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
|
<template #footer>
|
<span class="dialog-footer" v-show="disabled">
|
<el-button @click="isShowWorkDialog = !isShowWorkDialog" size="default">取 消</el-button>
|
<el-button type="primary" @click="submitWork" v-throttle size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { getUserByDepartment } from '/@/assets/methods';
|
|
interface stateType {
|
disabled: Boolean;
|
isShowWorkDialog: Boolean;
|
personTime: Boolean;
|
workForm: {
|
checkWorkType: number | null;
|
checkWorkName: string | null;
|
taskUnitId: number | null;
|
execDepId: number | null;
|
checkCycle: number | null;
|
checkCycleUnit: number | null;
|
validTime: number | null;
|
validTimeUnit: number | null;
|
noticeTime: number | null;
|
noticeTimeUnit: number | null;
|
firstStartTime: string | null;
|
};
|
title: string;
|
activeName: string;
|
checkWorkTypeList: [];
|
departmentList: [];
|
taskUnitList: [];
|
userList: [];
|
timeType: Array<timeState>;
|
workFormRules: {};
|
}
|
interface timeState {
|
id: number;
|
name: string;
|
}
|
import { reactive, toRefs, ref } from 'vue';
|
import { workApi } from '/@/api/doublePreventSystem/work';
|
import { ElMessage } from 'element-plus';
|
export default {
|
name: 'workDialog',
|
setup(props: any, context: any) {
|
const workFormRef = ref();
|
const state = reactive<stateType>({
|
title: '',
|
disabled: false,
|
personTime: false,
|
activeName: 'inspectionPoint',
|
checkWorkTypeList: [],
|
departmentList: [],
|
taskUnitList: [],
|
userList: [],
|
timeType: [
|
{ id: 1, name: '分' },
|
{ id: 2, name: '小时' },
|
{ id: 3, name: '日' },
|
{ id: 4, name: '月' },
|
{ id: 5, name: '年' }
|
],
|
isShowWorkDialog: false,
|
workForm: {
|
checkWorkType: null,
|
checkWorkName: null,
|
taskUnitId: null,
|
execDepId: null,
|
checkCycle: null,
|
checkCycleUnit: null,
|
validTime: null,
|
validTimeUnit: null,
|
noticeTime: null,
|
noticeTimeUnit: null,
|
firstStartTime: null
|
},
|
workFormRules: {
|
checkWorkType: [{ required: true, message: '请填写排查作业类型', trigger: 'change' }],
|
checkWorkName: [{ required: true, message: '请选择排查作业名称', trigger: 'blur' }],
|
taskUnitId: [{ required: true, message: '请选择任务单元', trigger: 'change' }],
|
execUserId: [{ required: true, message: '请选择执行人', trigger: 'change' }],
|
checkCycle: [{ required: true, message: '请填写排查周期', trigger: 'blur' }],
|
checkCycleUnit: [{ required: true, message: '请选择时间单位', trigger: 'change' }],
|
validTime: [{ required: true, message: '请填写有效时间', trigger: 'blur' }],
|
validTimeUnit: [{ required: true, message: '请选择时间单位', trigger: 'change' }],
|
noticeTime: [{ required: true, message: '请填写提醒时间', trigger: 'blur' }],
|
noticeTimeUnit: [{ required: true, message: '请选择时间单位', trigger: 'change' }],
|
firstStartTime: [{ required: true, message: '请填写首次排查任务开始时间', trigger: 'blur' }],
|
depId: [{ required: true, message: '请选择部门', trigger: 'change' }]
|
}
|
});
|
|
//打开模态框
|
const openWorkDialog = async (type: string, value: object, department: [], checkWorkTypeList: [], taskUnitList: []) => {
|
state.isShowWorkDialog = true;
|
state.departmentList = department;
|
state.taskUnitList = JSON.parse(JSON.stringify(taskUnitList));
|
state.checkWorkTypeList = JSON.parse(JSON.stringify(checkWorkTypeList));
|
setTimeout(() => {
|
workFormRef.value.clearValidate();
|
});
|
if (type === '新增') {
|
state.disabled = true;
|
state.personTime = false;
|
state.title = '新增排查任务';
|
state.workForm = {
|
checkWorkType: null,
|
checkWorkName: null,
|
taskUnitId: null,
|
execDepId: null,
|
checkCycle: null,
|
checkCycleUnit: null,
|
validTime: null,
|
validTimeUnit: null,
|
noticeTime: null,
|
noticeTimeUnit: null,
|
firstStartTime: null
|
};
|
} else if (type === '查看') {
|
state.disabled = false;
|
state.personTime = true;
|
state.title = '查看排查任务';
|
state.workForm = JSON.parse(JSON.stringify(value));
|
} else {
|
state.disabled = true;
|
state.personTime = false;
|
state.title = '修改排查任务';
|
state.workForm = JSON.parse(JSON.stringify(value));
|
}
|
};
|
|
//新增修改提交
|
const submitWork = async () => {
|
workFormRef.value.validate(async (valid: Boolean) => {
|
if (valid) {
|
if (state.title === '新增排查任务') {
|
let res = await workApi().addWork(state.workForm);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '排查任务新增成功',
|
duration: 2000
|
});
|
state.isShowWorkDialog = false;
|
context.emit('refreshWork');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
} else {
|
let res = await workApi().modWork(state.workForm);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '排查任务修改成功',
|
duration: 2000
|
});
|
state.isShowWorkDialog = false;
|
context.emit('refreshWork');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息'
|
});
|
}
|
});
|
};
|
|
// const achieveUserList = async () => {
|
// state.workForm.execUserId = null;
|
// const user: unknown = await getUserByDepartment(state.workForm.depId);
|
// state.userList = user as [];
|
// };
|
|
return {
|
...toRefs(state),
|
workFormRef,
|
submitWork,
|
openWorkDialog
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
::v-deep.el-divider--horizontal {
|
margin-top: 0px !important;
|
}
|
|
::v-deep.el-dialog__body {
|
padding-top: 10px !important;
|
}
|
.filter-container {
|
padding: 10px 0px;
|
}
|
:deep(.el-textarea.is-disabled .el-textarea__inner) {
|
background-color: var(--el-card-bg-color);
|
color: var(--el-input-text-color, var(--el-text-color-regular));
|
}
|
:deep(.el-input.is-disabled .el-input__inner) {
|
color: var(--el-input-text-color, var(--el-text-color-regular));
|
}
|
:deep(.el-input.is-disabled .el-input__wrapper) {
|
background-color: var(--el-card-bg-color);
|
}
|
</style>
|
