任务弹窗修改

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/TaskModal/index.vue

@@ -4,14 +4,15 @@
       <div class="flex justify-between items-center border-b pb-3">
         <h4 :id="titleId" :class="titleClass">{{ editForm ? '编辑任务' : '新增任务' }}</h4>
         <div>
-          <el-button v-if="!editForm" type="primary" :loading="props.saveLoading"
-            @click="submitForm(formRef, false)">保存并新建</el-button>
-          <el-button type="primary" :loading="props.saveLoading" @click="submitForm(formRef, true)">保存</el-button>
+          <el-button v-if="!editForm" type="primary" :loading="['2'].includes(props.saveLoading)"
+            @click="submitForm(formRef, true)">保存并新建</el-button>
+          <el-button type="primary" :loading="['2'].includes(props.saveLoading)"
+            @click="submitForm(formRef, false)">保存</el-button>
           <el-button @click="closeVisible()">取消</el-button>
         </div>
       </div>
     </template>
-    <div class="h-[55vh] overflow-y-auto">
+    <div class="h-[55vh] overflow-y-auto scroll-bar">
       <el-form ref="formRef" :model="form" label-width="100px" :rules="rules" class="flex flex-wrap form">
         <el-form-item label="任务名称" prop="taskName" required>
           <el-input v-model="form.taskName" type="textarea" placeholder="请输入任务名称" clearable maxlength="100"
@@ -120,44 +121,46 @@ import { get } from '@/utils/request';
 import { Delete, Plus } from "@element-plus/icons-vue"
 import { FormInstance } from 'element-plus';
 import { getFromValue } from '@/utils/tools';
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  saveLoading: {
-    type: Boolean,
-    default: false
-  },
-  editForm: {
-    type: Object,
+const props = defineProps<{
+  visible: boolean,
+  saveLoading: saveLoadingType,
+  editForm: Object
+}>()
+const emit = defineEmits(['closeModalVisible', 'submitForm'])
+watch(() => props.saveLoading, (val) => {
+  if (val == "3") {
+    formRef.value?.resetFields();
+    form.value = { ...defalutModalForm };
   }
 })
-const emit = defineEmits(['closeModalVisible', 'submitForm'])
-watch(props, (val) => {
+watch(() => props.visible, (val) => {
   formRef.value?.resetFields();
-  modalVisible.value = val.visible
-  form.value = val.editForm ? { ...val.editForm } : { ...defalutModalForm };
-  customeDate.value = (form.value.repeatDesignSameday || "").split(',').filter(Boolean);
-  if (val.visible) {
+  modalVisible.value = val
+  if (val) {
     get(CUSTOMER_FORM_URL).then(res => {
       if (Array.isArray(res.data) && res.data.length > 0) {
         generateFormData.value = JSON.parse(res.data[0].config)
       }
     })
-    if (!val.editForm) {
-      //TODO 如果是新增
-      taskTypeValueData.value = [{ label: '客户1', value: '1' }, { label: '客户2', value: '2' }];
-      contactValueData.value = [{ label: '联系人1', value: '1' }, { label: '联系人2', value: '2' }];
-      executorValueData.value = [{ label: '执行人1', value: '1' }, { label: '执行人2', value: '2' }];
-    } else {
-      //TODO 如果是编辑
-      changeTaskType(form.value.taskType)
-      contactValueData.value = [{ label: '联系人1', value: '1' }, { label: '联系人2', value: '2' }];
-      executorValueData.value = [{ label: '执行人1', value: '1' }, { label: '执行人2', value: '2' }];
-    }
   }
 })
+watch(() => props.editForm, (val) => {
+  if (!val) {
+    //TODO 如果是新增
+    form.value = { ...defalutModalForm };
+    taskTypeValueData.value = [{ label: '客户1', value: '1' }, { label: '客户2', value: '2' }];
+    contactValueData.value = [{ label: '联系人1', value: '1' }, { label: '联系人2', value: '2' }];
+    executorValueData.value = [{ label: '执行人1', value: '1' }, { label: '执行人2', value: '2' }];
+    return
+  }
+  //TODO 如果是编辑
+  form.value = { ...val };
+  customeDate.value = (form.value.repeatDesignSameday || "").split(',').filter(Boolean);
+  changeTaskType(form.value.taskType)
+  contactValueData.value = [{ label: '联系人1', value: '1' }, { label: '联系人2', value: '2' }];
+  executorValueData.value = [{ label: '执行人1', value: '1' }, { label: '执行人2', value: '2' }];
+
+})
 const rules = ref({
   taskName: [
     { required: true, message: '请输入任务名称', trigger: 'blur' }
@@ -172,7 +175,6 @@ const generateFormRef = ref<typeof GenerateForm>();
 const generateFormData = ref<any>(defaultGenerateFormData);
 
 const modalVisible = ref(false);
-const closeStatus = ref(false);
 function closeVisible() {
   generateFormData.value = defaultGenerateFormData;
   emit('closeModalVisible')
@@ -191,8 +193,7 @@ function submitForm(formEl: FormInstance | undefined, isClose: boolean) {
         ...res
       })
       console.log("submitDAata", submitData);
-      emit('submitForm', submitData)
-      closeStatus.value = isClose
+      emit('submitForm', submitData, isClose)
     }).catch((err: any) => {
       console.log(err);
     })

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/TaskModal.vue

@@ -1,141 +0,0 @@
-<template>
-  <el-dialog v-model="modalVisible" width="30%" :show-close="false" :close-on-click-modal="false">
-    <template #header="{ titleId, titleClass }">
-      <div class="flex justify-between items-center border-b pb-3">
-        <h4 :id="titleId" :class="titleClass">{{ editForm ? '编辑任务' : '新增任务' }}</h4>
-        <div>
-          <el-button type="primary" @click="submitForm(false)">保存并新建</el-button>
-          <el-button type="primary" @click="submitForm(true)">保存</el-button>
-          <el-button @click="closeVisible()">取消</el-button>
-        </div>
-      </div>
-    </template>
-    <el-form ref="formRef" :model="form" label-width="100px" :rules="rules" class="flex flex-wrap form">
-      <el-form-item label="任务名称" prop="taskName" required>
-        <el-input v-model="form.taskName" type="textarea" placeholder="请输入任务名称" clearable maxlength="100"
-          show-word-limit />
-      </el-form-item>
-      <el-form-item prop="priority" label="优先级" required>
-        <el-select v-model="form.priority" placeholder="请选择" clearable>
-          <el-option v-for="item in PRIORITY " :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="taskType" :label="form.taskType">
-        <template #label>
-          <el-select v-model="form.taskType" class="border resetSelect" style="width: 100px">
-            <el-option v-for="item in TASK_TYPE" :key="item.value" :value="item.value" :label="item.label" />
-          </el-select>
-        </template>
-        <el-select v-model="form.priority" placeholder="请选择" clearable filterable>
-          <el-option v-for="item in PRIORITY" :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="联系人" v-if="TASK_TYPE.find(v => v.value === (form.taskType || '1'))?.show">
-        <el-select v-model="form.contact" placeholder="请选择" clearable filterable>
-          <el-option v-for="item in PRIORITY" :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="执行人">
-        <el-select v-model="form.executeor" placeholder="请选择" clearable multiple filterable>
-          <el-option v-for="item in PRIORITY" :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="重复提醒">
-        <el-switch v-model="form.repeat" active-value="1" inactive-value="0" />
-      </el-form-item>
-      <template v-if="form.repeat === '1'">
-        <el-form-item label="重复类型" label-width="7em" prop="startDate">
-          <el-select v-model="form.repeatType" placeholder="请选择">
-            <el-option v-for="item in REPEAT_TYPE" :key="item.value" :value="item.value" :label="item.label" />
-          </el-select>
-        </el-form-item>
-        <template v-if="['0', '1', '2'].includes(form.repeatType)">
-          <div>
-            {{ REPEAT_TYPE[form.repeatType].label }}
-          </div>
-        </template>
-        <template v-if="['3'].includes(form.repeatType)">
-          <div>
-            {{ '自定义周期' }}
-          </div>
-        </template>
-        <template v-if="['4'].includes(form.repeatType)">
-          <div>
-            {{ '自定义日期' }}
-          </div>
-        </template>
-      </template>
-      <el-form-item label="开始时间" label-width="7em" prop="startDate" class="w50">
-        <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
-      </el-form-item>
-      <el-form-item label="截止时间" label-width="7em" prop="endDate" class="w50">
-        <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
-      </el-form-item>
-    </el-form>
-    <el-form-item label="详细描述" prop="taskName">
-      <el-input v-model="form.taskName" type="textarea" placeholder="请输入任务名称" clearable maxlength="1000" show-word-limit
-        :autosize="{ minRows: 4 }" />
-    </el-form-item>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { PRIORITY, TASK_TYPE, modalForm, REPEAT_TYPE } from "./api"
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  editForm: {
-    type: Object,
-  }
-})
-const emit = defineEmits(['closeModalVisible', 'submitForm'])
-const modalVisible = ref(false)
-const form = ref<any>({})
-const rules = ref({
-  taskName: [
-    { required: true, message: '请输入任务名称', trigger: 'blur' }
-  ],
-  priority: [
-    { required: true, message: '请选择优先级', trigger: 'blur' }
-  ]
-})
-function closeVisible() {
-  emit('closeModalVisible')
-}
-function submitForm(isClose: boolean) {
-  console.log("form", form.value, isClose);
-  // emit('submitForm', { form: form.value, isClose })
-}
-watch(props, (val) => {
-  modalVisible.value = val.visible
-  form.value = val.editForm ? { ...val.editForm } : modalForm
-})
-</script>
-
-<style lang="scss">
-.resetSelect {
-  border: 0;
-
-  .el-select__wrapper {
-    box-shadow: none;
-    padding-right: 0;
-  }
-
-  .el-select__selected-item {
-    text-align: right;
-  }
-}
-
-.el-form-item {
-  width: 100%;
-}
-
-.form {
-  .w50 {
-    @apply w-1/2;
-  }
-}
-</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/index.vue

@@ -130,18 +130,19 @@ const { getFunctionList } = useStore()
 const pagePermission = ref<any[]>();
 const taskModalVisible = ref(false);
 const taskForm = ref<any>();
-const taskLoading = ref(false);
+const taskLoading = ref<saveLoadingType>("1");
 function closeModal() {
   taskModalVisible.value = false;
   taskForm.value = null;
 }
-function submitForm(data: any) {
-  console.log("提交的数据水水水水", data);
-  taskLoading.value = true;
+function submitForm(data: any, isClose: boolean) {
+  console.log("提交的数据水水水水", data, isClose);
+  taskLoading.value = "2";
   setTimeout(() => {
-    taskLoading.value = false;
+    taskLoading.value = "4";
+    taskModalVisible.value = isClose;
   }, 2000)
-  // taskModalVisible.value = isClose;
+
 }
 const searchForm = ref<any>();
 const tableData = ref<any[]>([

fhKeeper/formulahousekeeper/customerBuler-crm/src/type.d.ts

@@ -6,8 +6,19 @@ interface GlobalPopup extends Notify {
 }
 
 interface Tree {
-  label: string
-  children?: Tree[]
+  label: string;
+  children?: Tree[];
 }
 
-type ListByCodeType = ('线索来源'|'客户级别'|'客户行业'|'客户来源'|'商机阶段'|'产品类型'|'产品单位'|'订单类型')[] 
+type ListByCodeType = (
+  | "线索来源"
+  | "客户级别"
+  | "客户行业"
+  | "客户来源"
+  | "商机阶段"
+  | "产品类型"
+  | "产品单位"
+  | "订单类型"
+)[];
+
+type saveLoadingType = "1" | "2" | "3" | "4"; //1是没有保存, 2是正在保存, 3是保存成功, 4是保存失败