437 lines
12 KiB
Vue
Raw Normal View History

2023-10-19 10:34:26 +08:00
<template>
<div class="edit-popup">
2023-12-19 11:43:25 +08:00
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
2023-10-19 10:34:26 +08:00
<!-- <el-form-item label="任务角色" prop="extend.task_role">
<el-select
v-model="formData.extend.task_role"
clearable
:disabled="mode != 'add'"
placeholder="请选择任务角色"
@change="changeTaskRole"
style="width: 100%"
>
<el-option
v-for="item in taskRoleRow"
:key="item.key"
:value="item.key"
:label="item.value"
/>
</el-select>
</el-form-item> -->
2023-12-19 11:43:25 +08:00
<el-form-item label="任务模板" prop="type">
<el-select v-model="taskTempId" clearable :disabled="mode != 'add'" placeholder="请输入任务类型"
@change="changeTaskTypeFn">
<el-option v-for="item in taskTempList" :key="item.id" :value="item.id" :label="item.title" />
</el-select>
</el-form-item>
2023-10-19 10:34:26 +08:00
<el-form-item label="任务类型" prop="type">
2023-12-19 11:43:25 +08:00
<el-select v-model="formData.type" clearable :disabled="true" placeholder="请选择任务类型"
@change="changeTaskType" style="width: 100%">
<el-option v-for="item in datalist" :key="item.label" :value="item.id" :label="item.name" />
2023-10-19 10:34:26 +08:00
</el-select>
</el-form-item>
<el-form-item label="阶段类型" prop="types">
<div style="width: 100%">
2023-12-19 11:43:25 +08:00
<el-select v-model="formData.types" clearable :disabled="true" placeholder="请选择阶段类型"
style="width: 100%">
<el-option v-for="item in [
{ label: 1, name: '循环' },
{ label: 2, name: '长期' },
{ label: 3, name: '单次' },
]" :key="item.label" :value="item.label" :label="item.name" />
2023-10-19 10:34:26 +08:00
</el-select>
2023-12-19 11:43:25 +08:00
<div v-if="formData.types == 3" style="color: #e6a23c; font-size: 12px">
2023-10-19 10:34:26 +08:00
提示 : 单次任务不会每日结算,而是按阶段合计天数结算
</div>
</div>
</el-form-item>
2023-10-20 11:28:39 +08:00
<el-form-item v-if="showTarget" label="目标数" prop="extend.target">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.extend.target" clearable placeholder="请输入目标数" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
</el-input>
2023-10-20 11:28:39 +08:00
</el-form-item>
2023-10-19 10:34:26 +08:00
<el-form-item label="一阶段天数">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.stage_day_one" clearable placeholder="请输入天数" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
<el-form-item label="一阶段金额">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.money" clearable placeholder="请输入金额" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
2023-12-19 11:43:25 +08:00
<el-form-item v-if="showTow && formData.type_value != 'town_task_type_5'" label="二阶段天数">
<el-input v-model="formData.stage_day_two" clearable placeholder="请输入天数" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
2023-12-19 11:43:25 +08:00
<el-form-item v-if="showTow && formData.type_value != 'town_task_type_5'" label="二阶段金额">
<el-input v-model="formData.money_two" clearable placeholder="请输入金额" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
<el-form-item v-if="showThree" label="三阶段天数">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.stage_day_three" clearable placeholder="请输入天数" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
<el-form-item v-if="showThree" label="三阶段金额">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.new_money_three" clearable placeholder="请输入金额" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
<el-form-item label="长期金额" v-if="+formData.types == 2">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.money_three" clearable placeholder="请输入金额" :disabled="true" type="number">
2023-10-19 10:34:26 +08:00
<template #append></template>
</el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="任务描述" prop="content">
2023-12-19 11:43:25 +08:00
<el-input v-model="formData.content" clearable placeholder="请输入任务描述" :disabled="true" type="textarea" autosize />
2023-10-19 10:34:26 +08:00
</el-form-item>
</el-form>
2023-12-19 11:43:25 +08:00
<el-dialog v-model="personnelShow" ref="personnelRef" title="选择负责人" width="60%">
<personnelPopup @custom-event="changePersonner" :company_id="formData.company_id"></personnelPopup>
2023-10-19 10:34:26 +08:00
</el-dialog>
</popup>
</div>
</template>
2023-12-19 11:43:25 +08:00
<script lang="ts" setup name="taskTemplateEdit">
2023-10-19 10:34:26 +08:00
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import {
apiTaskTemplateAdd,
apiTaskTemplateEdit,
apiTaskTemplateDetail,
apiTaskTypeList,
} from "@/api/task_template";
import { timeFormat } from "@/utils/util";
import type { PropType } from "vue";
import { dictDataLists } from "@/api/setting/dict";
import taskMap from "./map.vue";
import personnelPopup from "./dialog_index_personnel.vue";
2023-12-19 11:43:25 +08:00
import { apiSelectList, apiCreatetaskTypeInfo } from '@/api/create_task_template'
2023-10-19 10:34:26 +08:00
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({}),
},
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const datalist = ref([]);
const route = useRoute();
const taskType = ref("village_task_type");
const taskRoleRow = ref([
{ key: 1, value: "负责人" },
{ key: 2, value: "市场部长" },
{ key: 3, value: "服务部长" },
]);
// 弹窗标题
const popupTitle = computed(() => {
return mode.value == "edit" ? "编辑任务安排" : "新增任务安排";
});
// 表单数据
const formData = reactive({
id: "",
// task_role: 1,
task_scheduling: 0,
company_id: "",
title: "",
admin_id: "",
type: "", // 任务类型
type_value: "",
status: "",
content: "",
stage_day_one: 0,
money: 0, // 一阶段金额
stage_day_two: 0,
money_two: 0, // 二阶段金额
stage_day_three: 0,
new_money_three: 0, // 三阶段金额
money_three: 0, // 长期金额
types: "", //阶段类型
task_admin: "", //任务负责人
task_admin_name: "", //任务负责人
recharge: "",
extend: {
task_role: "", // 任务角色
target: "", //目标数量
},
});
if (route.query.id) {
formData.task_scheduling = route.query.id;
}
2023-10-20 11:28:39 +08:00
// 显示目标数的任务类型
2023-10-23 13:47:50 +08:00
const showTargetTypeList = [
2023-12-19 11:43:25 +08:00
"village_task_type_1",
"village_task_type_4",
2023-10-23 13:47:50 +08:00
"village_task_type_5"
];
2023-10-20 11:28:39 +08:00
const showTarget = computed(() => {
let flag = false;
if (showTargetTypeList.includes(formData.type_value)) flag = true;
return flag;
});
2023-10-19 10:34:26 +08:00
// 不显示第二阶段的任务类型
const noShowTowTypeList = ["village_task_type_2"];
const showTow = computed(() => {
let flag = true;
if (noShowTowTypeList.includes(formData.type_value)) flag = false;
return flag;
});
// 不显示第三阶段的任务类型
const noShowThreeTypeList = [
"village_task_type_1",
"village_task_type_2",
"village_task_type_3",
"village_task_type_4",
"village_task_type_5",
"village_task_type_6",
];
const showThree = computed(() => {
let flag = true;
if (noShowThreeTypeList.includes(formData.type_value)) flag = false;
return flag;
});
2023-12-19 11:43:25 +08:00
// 任务模板
const taskTempList = reactive([])
const taskTempId = ref('')
const getTaskTempFn = () => {
apiSelectList(
{
task_role_id: 4
}
).then(res => {
res.forEach(item => {
taskTempList.push(item)
})
})
}
const changeTaskTypeFn = () => {
let i
taskTempList.forEach((item, index) => {
if (item.id == taskTempId.value) {
i = index
}
})
setFormData(taskTempList[i])
formData.type = String(formData.type)
console.log(formData)
// console.log(taskTempId.value)
}
getTaskTempFn()
2023-10-19 10:34:26 +08:00
// 表单验证
const formRules = reactive<any>({
title: [
{
required: true,
message: "请输入任务名称",
trigger: ["blur"],
},
],
"extend.task_role": [
{
required: true,
message: "请选择任务角色",
trigger: ["blur"],
},
],
admin_id: [
{
required: true,
message: "请输入创建人",
trigger: ["blur"],
},
],
type: [
{
required: true,
message: "请选择任务类型",
trigger: ["blur"],
},
],
status: [
{
required: true,
message: "请选择状态",
trigger: ["blur"],
},
],
types: [
{
required: true,
message: "请选择阶段类型",
trigger: ["blur"],
},
],
task_admin: [
{
required: true,
message: "请选择负责人",
trigger: ["blur"],
},
],
recharge: [
{
required: true,
// message: "请输入充值金额",
validator: (rule: any, value: any, callback: any) => {
if (value <= 0) callback(new Error("充值金额不能小于0"));
else callback();
},
trigger: ["blur"],
},
],
2023-10-20 11:28:39 +08:00
"extend.target": [
{
required: true,
// message: "请输入目标数",
validator: (rule: any, value: any, callback: any) => {
2023-10-20 17:17:10 +08:00
if (value <= 0) callback(new Error("不能小于0"));
2023-10-20 11:28:39 +08:00
else callback();
},
trigger: ["blur"],
},
],
2023-10-19 10:34:26 +08:00
});
// 获取详情
const setFormData = async (data: Record<any, any>) => {
2023-10-20 17:22:20 +08:00
//任务类型接口
apiTaskTypeList({ type_value: taskType.value }).then((res) => {
datalist.value = res.lists;
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
2023-10-20 17:17:10 +08:00
}
2023-10-20 17:22:20 +08:00
}
if (formData.type) {
datalist.value.forEach((item: any) => {
if (item.id == formData.type) {
formData.title = item.name;
formData.type_value = item.value;
}
});
}
});
2023-10-19 10:34:26 +08:00
};
const getDetail = async (row: Record<string, any>) => {
const data = await apiTaskTemplateDetail({
id: row.id,
});
setFormData(data);
};
// 地图控件
const mapShow = ref(false);
const mapRef = shallowRef<InstanceType<typeof taskMap>>();
// 选择任务类型
const changeTaskType = async (e: any) => {
datalist.value.forEach((item: any) => {
if (item.id == e) {
formData.title = item.name;
formData.type_value = item.value;
}
});
};
// 选择任务角色
const changeTaskRole = async (e: any) => {
// 负责人
if (e == 1) {
taskType.value = "town_task_type_master";
}
// 市场部长
if (e == 2) {
taskType.value = "town_task_type_marketing_director";
}
// 服务部长
if (e == 3) {
taskType.value = "town_task_type";
}
apiTaskTypeList({ type_value: taskType.value }).then((res) => {
datalist.value = res.lists;
datalist.value.forEach((item: any) => {
if (item.id == formData.type) {
formData.type_value = item.value;
}
});
});
};
const setMap = (e: any) => {
formData.extend[mapType.value] = e[0];
};
// 选择负责人
const personnelShow = ref(false);
const personnelRef = shallowRef<InstanceType<typeof personnelPopup>>();
const changePersonner = (e: any) => {
formData.task_admin = e.id;
formData.task_admin_name = e.nickname;
personnelShow.value = false;
};
const clickTaskAdmin = async () => {
personnelShow.value = true;
};
// 提交按钮
const handleSubmit = async () => {
await formRef.value?.validate();
const data = { ...formData };
mode.value == "edit"
? await apiTaskTemplateEdit(data)
: await apiTaskTemplateAdd(data);
popupRef.value?.close();
emit("success");
};
//打开弹窗
const open = (type = "add") => {
mode.value = type;
popupRef.value?.open();
// if (type == "add") {
2023-10-19 10:34:26 +08:00
// apiTaskTypeList({ type_value: taskType.value }).then((res) => {
// datalist.value = res.lists;
// });
// }
};
// 关闭回调
const handleClose = () => {
emit("close");
};
defineExpose({
open,
setFormData,
getDetail,
});
</script>