mkm/TaskSystem-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
mkm 2023-08-14 16:17:01 +08:00
parent 7c5614a142
commit 6d52c2d2db
1 changed files with 161 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

325
src/views/task/editTow.vue
View File

@ -1,207 +1,204 @@
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup <popup
ref="popupRef" ref="popupRef"
:title="title" :title="title"
:async="true" :async="true"
width="800px" width="800px"
@confirm="handleSubmit" @confirm="handleSubmit"
@close="handleClose" @close="handleClose"
:clickModalClose="mode == 'show'" :clickModalClose="mode == 'show'"
:button="mode != 'show'" :button="mode != 'show'"
> >
<el-form <el-form
ref="formRef" ref="formRef"
:rules="rules" :rules="rules"
class="formdata" class="formdata"
:model="formData" :model="formData"
label-width="120px" label-width="120px"
> >
<el-form-item v-if="formData.id" required label="任务ID" prop="id"> <el-form-item v-if="formData.id" required label="任务ID" prop="id">
<el-input <el-input
:disabled="true" :disabled="true"
v-model="formData.id" v-model="formData.id"
clearable clearable
placeholder="请输入任务模板" placeholder="请输入任务模板"
/> />
</el-form-item> </el-form-item>
<el-form-item required label="任务日期" prop="datetime"> <el-form-item required label="任务日期" prop="datetime">
<el-date-picker <el-date-picker
:disabled="isDisabled" :disabled="isDisabled"
v-model="formData.datetime" v-model="formData.datetime"
name="datetime" name="datetime"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
@change="changeDateTime" @change="changeDateTime"
/> />
</el-form-item> </el-form-item>
<el-form-item required label="任务模板" prop="template_id"> <el-form-item required label="任务模板" prop="template_id">
<el-input <el-input
:disabled="isDisabled" :disabled="isDisabled"
v-model="formData.template_name" v-model="formData.template_name"
@click="isShow = true" @click="isShow = true"
name="template_id" name="template_id"
clearable clearable
placeholder="请输入任务模板" placeholder="请输入任务模板"
/> />
</el-form-item> </el-form-item>
<el-form-item v-if="mode == 'show'" label=""> <el-form-item v-if="mode == 'show'" label="">
<el-button type="primary" @click="clickUpdate"> 修改 </el-button> <el-button type="primary" @click="clickUpdate"> 修改 </el-button>
<el-button type="danger" @click="clickDelete"> 删除 </el-button> <el-button type="danger" @click="clickDelete"> 删除 </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</popup> </popup>
<el-dialog v-model="isShow" title="选择任务" width="60%"> <el-dialog v-model="isShow" title="选择任务" width="60%">
<DialogIndex @customEvent="customEvent" /> <DialogIndex @customEvent="customEvent" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang="ts" setup name="taskEidt"> <script lang="ts" setup name="taskEidt">
import type { FormInstance, FormRules } from "element-plus"; import type { FormInstance, FormRules } from 'element-plus'
import Popup from "@/components/popup/index.vue"; import Popup from '@/components/popup/index.vue'
import { apiTaskAdd, apiTaskEdit, apiTaskDelete } from "@/api/task"; import { apiTaskAdd, apiTaskEdit, apiTaskDelete } from '@/api/task'
import { reactive, onUpdated, type PropType } from "vue"; import { reactive, onUpdated, type PropType } from 'vue'
import DialogIndex from "@/views/task_template/list_two.vue"; import DialogIndex from '@/views/task_template/list_two.vue'
import { timeFormat } from "@/utils/util"; import { timeFormat } from '@/utils/util'
import feedback from "@/utils/feedback"; import feedback from '@/utils/feedback'
const route = useRoute(); const route = useRoute()
const emit = defineEmits(["success", "close"]); const emit = defineEmits(['success', 'close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>(); const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref("add"); const mode = ref('add')
const detailsdt = ref({}); const detailsdt = ref({})
const isShow = ref(false); const isShow = ref(false)
const title = ref("创建日程安排"); const title = ref('创建日程安排')
const changeDateTime = (e: any) => { const changeDateTime = (e: any) => {
formData.start_time = timeFormat(e[0]); formData.start_time = timeFormat(e[0])
formData.end_time = timeFormat(e[1]); formData.end_time = timeFormat(e[1])
}; }
// 表单数据 // 表单数据
const formData = reactive({ const formData = reactive({
id: "", id: '',
create_user_id: "", create_user_id: '',
status: "", status: '',
template_id: "", template_id: '',
scheduling_id: "", scheduling_id: '',
template_name: "", template_name: '',
start_time: "", start_time: '',
end_time: "", end_time: '',
datetime: "", datetime: ''
}); })
interface RuleForm { interface RuleForm {
datetime: Date | String; datetime: Date | string
template_id: String; template_id: string
} }
const rules = reactive<FormRules<RuleForm>>({ const rules = reactive<FormRules<RuleForm>>({
datetime: { required: true, message: "请选择时间范围", trigger: "blur" }, datetime: { required: true, message: '请选择时间范围', trigger: 'blur' },
template_id: { template_id: {
required: true, required: true,
message: "请选择任务模板", message: '请选择任务模板',
trigger: "change", trigger: 'change'
}, }
}); })
function customEvent(data: any) { function customEvent(data: any) {
isShow.value = false; isShow.value = false
formData.template_id = data.id; formData.template_id = data.id
formData.template_name = data.title; formData.template_name = data.title
}
if (route.query.id) {
formData.scheduling_id = route.query.id.toString();
} }
const formRef = ref(null); const formRef = ref(null)
const props = defineProps({ const props = defineProps({
task: { task: {
type: Object, type: Object,
defualt: () => { defualt: () => {
null; null
}, }
}, }
}); })
const isDisabled = ref(false); const isDisabled = ref(false)
const updatedForm = async () => { const updatedForm = async () => {
if (mode.value == "show") { if (mode.value == 'show') {
title.value = "查看日程安排"; title.value = '查看日程安排'
isDisabled.value = true; isDisabled.value = true
Object.keys(formData).forEach((key: any) => { Object.keys(formData).forEach((key: any) => {
if (props.task[key] != null && props.task[key] != undefined) if (props.task[key] != null && props.task[key] != undefined)
formData[key] = props.task[key]; formData[key] = props.task[key]
}); })
formData.datetime = [ formData.datetime = [formData.start_time.split(' ')[0], formData.end_time.split(' ')[0]]
formData.start_time.split(" ")[0], } else {
formData.end_time.split(" ")[0], isDisabled.value = false
]; Object.keys(formData).forEach((key: any) => {
} else { formData[key] = ''
isDisabled.value = false; })
Object.keys(formData).forEach((key: any) => { }
formData[key] = ""; await nextTick()
}); formRef.value.resetFields()
} }
await nextTick();
formRef.value.resetFields();
};
const clickUpdate = () => { const clickUpdate = () => {
mode.value = "edit"; mode.value = 'edit'
isDisabled.value = false; isDisabled.value = false
}; }
// 删除 // 删除
const clickDelete = () => { const clickDelete = () => {
feedback.confirm("确定要删除吗?").then(async (e) => { feedback.confirm('确定要删除吗?').then(async (e) => {
if (e == "confirm") { if (e == 'confirm') {
await apiTaskDelete({ id: formData.id }); await apiTaskDelete({ id: formData.id })
popupRef.value?.close(); popupRef.value?.close()
emit("success"); emit('success')
} }
}); })
}; }
// 提交按钮 // 提交按钮
const handleSubmit = () => { const handleSubmit = () => {
if (mode.value == "show") return popupRef.value?.close(); if (mode.value == 'show') return popupRef.value?.close()
else else
formRef.value.validate(async (e: Boolean) => { formRef.value.validate(async (e: boolean) => {
if (e) { if (e) {
const data = { ...formData }; const data = { ...formData }
mode.value == "edit" ? await apiTaskEdit(data) : await apiTaskAdd(data); if (route.query.id) {
popupRef.value?.close(); data.scheduling_id = route.query.id.toString()
emit("success"); }
} mode.value == 'edit' ? await apiTaskEdit(data) : await apiTaskAdd(data)
}); popupRef.value?.close()
}; emit('success')
}
})
}
//打开弹窗 //打开弹窗
const open = (type = "add") => { const open = (type = 'add') => {
mode.value = type; mode.value = type
popupRef.value?.open(); popupRef.value?.open()
}; }
// 关闭回调 // 关闭回调
const handleClose = () => { const handleClose = () => {
emit("close"); emit('close')
}; }
defineExpose({ defineExpose({
open, open,
updatedForm, updatedForm
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.formdata { .formdata {
.el-form-item { .el-form-item {
.el-date-picker { .el-date-picker {
width: 100%; width: 100%;
}
} }
}
} }
</style> </style>