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-18 14:19:49 +08:00
parent afe8fd1d72
commit cd6c6eb787
1 changed files with 241 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

502
src/views/task_template/edit.vue
View File

@ -1,301 +1,281 @@
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup <popup
ref="popupRef" ref="popupRef"
:title="popupTitle" :title="popupTitle"
:async="true" :async="true"
width="550px" width="550px"
@confirm="handleSubmit" @confirm="handleSubmit"
@close="handleClose" @close="handleClose"
> >
<el-form <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
ref="formRef" <el-form-item label="任务名称" prop="title">
:model="formData" <el-input v-model="formData.title" clearable placeholder="请输入任务名称" />
label-width="90px" </el-form-item>
:rules="formRules" <el-form-item label="阶段类型" prop="types">
> <el-select v-model="formData.types" clearable placeholder="请输入阶段类型">
<el-form-item label="任务名称" prop="title"> <el-option
<el-input v-for="item in [
v-model="formData.title" { label: 1, name: '循环' },
clearable { label: 2, name: '长期' },
placeholder="请输入任务名称" { label: 3, name: '单次' }
/> ]"
</el-form-item> :key="item.label"
<el-form-item label="阶段类型" prop="types"> :value="item.label"
<el-select :label="item.name"
v-model="formData.types" />
clearable </el-select>
placeholder="请输入阶段类型" </el-form-item>
> <el-form-item label="一阶段天数">
<el-option <el-input
v-for="item in [ v-model="formData.stage_day_one"
{ label: 1, name: '循环' }, clearable
{ label: 2, name: '长期' }, placeholder="请输入天数"
{ label: 3, name: '单次' }, type="number"
]" >
:key="item.label" <template #append>天</template>
:value="item.label" </el-input>
:label="item.name" </el-form-item>
/> <el-form-item label="一阶段金额">
</el-select> <el-input
</el-form-item> v-model="formData.money"
<el-form-item label="一阶段天数"> clearable
<el-input placeholder="请输入金额"
v-model="formData.stage_day_one" type="number"
clearable >
placeholder="请输入天数" <template #append>元</template>
type="number" </el-input>
> </el-form-item>
<template #append>天</template> <el-form-item label="二阶段天数">
</el-input> <el-input
</el-form-item> v-model="formData.stage_day_two"
<el-form-item label="一阶段金额"> clearable
<el-input placeholder="请输入天数"
v-model="formData.money" type="number"
clearable >
placeholder="请输入金额" <template #append>天</template>
type="number" </el-input>
> </el-form-item>
<template #append>元</template>
</el-input>
</el-form-item>
<el-form-item label="二阶段天数">
<el-input
v-model="formData.stage_day_two"
clearable
placeholder="请输入天数"
type="number"
>
<template #append>天</template>
</el-input>
</el-form-item>
<el-form-item label="二阶段金额"> <el-form-item label="二阶段金额">
<el-input <el-input
v-model="formData.money_two" v-model="formData.money_two"
clearable clearable
placeholder="请输入金额" placeholder="请输入金额"
type="number" type="number"
> >
<template #append>元</template> <template #append>元</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="长期金额" v-if="+formData.types == 2"> <el-form-item label="长期金额" v-if="+formData.types == 2">
<el-input <el-input
v-model="formData.money_three" v-model="formData.money_three"
clearable clearable
placeholder="请输入金额" placeholder="请输入金额"
type="number" type="number"
> >
<template #append>元</template> <template #append>元</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="任务类型" prop="type"> <el-form-item label="任务类型" prop="type">
<el-select <el-select
v-model="formData.type" v-model="formData.type"
clearable clearable
placeholder="请输入任务类型" placeholder="请输入任务类型"
@change="changeTaskType" @change="changeTaskType"
> >
<el-option <el-option
v-for="item in datalist" v-for="item in datalist"
:key="item.label" :key="item.label"
:value="item.id" :value="item.id"
:label="item.name" :label="item.name"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="formData.type == 32" label="起点"> <el-form-item v-if="formData.type == 32" label="起点">
<el-input <el-input
placeholder="请点击上方地图选择地点" placeholder="请点击上方地图选择地点"
readonly readonly
:value="formData.extend[0]?.address" :value="formData.extend[0]?.address"
/> />
</el-form-item> </el-form-item>
<el-form-item v-if="formData.type == 32" label="中转点"> <el-form-item v-if="formData.type == 32" label="中转点">
<el-input <el-input
placeholder="请点击上方地图选择地点" placeholder="请点击上方地图选择地点"
readonly readonly
:value="formData.extend[1]?.address" :value="formData.extend[1]?.address"
/> />
</el-form-item> </el-form-item>
<el-form-item v-if="formData.type == 32" label="终点"> <el-form-item v-if="formData.type == 32" label="终点">
<el-input <el-input
placeholder="请点击上方地图选择地点" placeholder="请点击上方地图选择地点"
readonly readonly
:value="formData.extend[2]?.address" :value="formData.extend[2]?.address"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status"> <el-radio-group v-model="formData.status">
<el-radio :label="1">显示</el-radio> <el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio> <el-radio :label="0">隐藏</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="任务描述" prop="content"> <el-form-item label="任务描述" prop="content">
<el-input <el-input v-model="formData.content" clearable placeholder="请输入任务描述" />
v-model="formData.content" </el-form-item>
clearable </el-form>
placeholder="请输入任务描述" <taskMap
/> v-if="mapShow"
</el-form-item> ref="mapRef"
</el-form> @success="setMap"
<taskMap @close="mapShow = false"
v-if="mapShow" ></taskMap>
ref="mapRef" </popup>
@success="setMap" </div>
@close="mapShow = false"
></taskMap>
</popup>
</div>
</template> </template>
<script lang="ts" setup name="taskTemplateEdit"> <script lang="ts" setup name="taskTemplateEdit">
import type { FormInstance } from "element-plus"; import type { FormInstance } from 'element-plus'
import Popup from "@/components/popup/index.vue"; import Popup from '@/components/popup/index.vue'
import { import { apiTaskTemplateAdd, apiTaskTemplateEdit, apiTaskTemplateDetail } from '@/api/task_template'
apiTaskTemplateAdd, import { timeFormat } from '@/utils/util'
apiTaskTemplateEdit, import type { PropType } from 'vue'
apiTaskTemplateDetail, import { dictDataLists } from '@/api/setting/dict'
} from "@/api/task_template"; import taskMap from './map.vue'
import { timeFormat } from "@/utils/util";
import type { PropType } from "vue";
import { dictDataLists } from "@/api/setting/dict";
import taskMap from "./map.vue";
defineProps({ defineProps({
dictData: { dictData: {
type: Object as PropType<Record<string, any[]>>, type: Object as PropType<Record<string, any[]>>,
default: () => ({}), default: () => ({})
}, }
}); })
const emit = defineEmits(["success", "close"]); const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>(); const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>(); const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref("add"); const mode = ref('add')
const datalist = ref([]); const datalist = ref([])
const route = useRoute()
// 弹窗标题 // 弹窗标题
const popupTitle = computed(() => { const popupTitle = computed(() => {
return mode.value == "edit" ? "编辑任务模板" : "新增任务模板"; return mode.value == 'edit' ? '编辑任务模板' : '新增任务模板'
}); })
// 表单数据 // 表单数据
const formData = reactive({ const formData = reactive({
id: "", id: '',
company_id: "", company_id: '',
title: "", title: '',
admin_id: "", admin_id: '',
type: "", type: '',
status: "", status: '',
content: "", content: '',
stage_day_one: 0, stage_day_one: 0,
money: 0, // 一阶段金额 money: 0, // 一阶段金额
stage_day_two: 0, stage_day_two: 0,
money_two: 0, // 二阶段金额 money_two: 0, // 二阶段金额
money_three: 0, // 长期金额 money_three: 0, // 长期金额
types: "", //阶段类型 types: '', //阶段类型
extend: {}, extend: {},
}); task_scheduling: 0
})
if (route.query.id) {
formData.task_scheduling = route.query.id
}
//任务类型接口 //任务类型接口
dictDataLists({ type_id: 10 }).then((res) => { dictDataLists({ type_id: 10 }).then((res) => {
datalist.value = res.lists; datalist.value = res.lists
}); })
// 表单验证 // 表单验证
const formRules = reactive<any>({ const formRules = reactive<any>({
title: [ title: [
{ {
required: true, required: true,
message: "请输入任务名称", message: '请输入任务名称',
trigger: ["blur"], trigger: ['blur']
}, }
], ],
admin_id: [ admin_id: [
{ {
required: true, required: true,
message: "请输入创建人", message: '请输入创建人',
trigger: ["blur"], trigger: ['blur']
}, }
], ],
type: [ type: [
{ {
required: true, required: true,
message: "请输入任务类型", message: '请输入任务类型',
trigger: ["blur"], trigger: ['blur']
}, }
], ],
status: [ status: [
{ {
required: true, required: true,
message: "请选择状态", message: '请选择状态',
trigger: ["blur"], trigger: ['blur']
}, }
], ]
}); })
// 获取详情 // 获取详情
const setFormData = async (data: Record<any, any>) => { const setFormData = async (data: Record<any, any>) => {
for (const key in formData) { for (const key in formData) {
if (data[key] != null && data[key] != undefined) { if (data[key] != null && data[key] != undefined) {
//@ts-ignore //@ts-ignore
formData[key] = data[key]; formData[key] = data[key]
}
} }
} }
};
const getDetail = async (row: Record<string, any>) => { const getDetail = async (row: Record<string, any>) => {
const data = await apiTaskTemplateDetail({ const data = await apiTaskTemplateDetail({
id: row.id, id: row.id
}); })
setFormData(data); setFormData(data)
}; }
// 地图控件 // 地图控件
const mapShow = ref(false); const mapShow = ref(false)
const mapRef = shallowRef<InstanceType<typeof taskMap>>(); const mapRef = shallowRef<InstanceType<typeof taskMap>>()
// 选择任务类型 // 选择任务类型
const changeTaskType = async (e: any) => { const changeTaskType = async (e: any) => {
if (e == 32) { if (e == 32) {
mapShow.value = true; //为三轮车时 mapShow.value = true //为三轮车时
await nextTick(); await nextTick()
console.log(mapRef.value); console.log(mapRef.value)
mapRef.value?.open(); mapRef.value?.open()
} }
}; }
const setMap = (e: any) => { const setMap = (e: any) => {
formData.extend = e; formData.extend = e
console.log("选择了地区", formData.extend); console.log('选择了地区', formData.extend)
}; }
// 提交按钮 // 提交按钮
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate(); await formRef.value?.validate()
if (formData.extend.length < 3) return ElMessage.error("请先选择三个地点"); if (formData.extend.length < 3) return ElMessage.error('请先选择三个地点')
const data = { ...formData }; const data = { ...formData }
mode.value == "edit" mode.value == 'edit' ? await apiTaskTemplateEdit(data) : await apiTaskTemplateAdd(data)
? await apiTaskTemplateEdit(data) popupRef.value?.close()
: await apiTaskTemplateAdd(data); emit('success')
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,
setFormData, setFormData,
getDetail, getDetail
}); })
</script> </script>