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

<template>
  <div class="h-full flex">
    <div class="p-5 w-80 pr-0" v-if="layoutSingleChoice == TABLE_VIEW">
      <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
        <div class="flex-1 p-3 overflow-y-auto scroll-bar">
          <el-form :model="searchForm">
            <el-form-item label="任务名称：" label-width="7em" prop="taskName">
              <el-input v-model="searchForm.taskName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="优先级：" label-width="7em" prop="priority">
              <el-select v-model="searchForm.priority" placeholder="请选择">
                <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="客户名称：" label-width="7em" prop="customName">
              <el-input v-model="searchForm.customName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="联系人号码：" label-width="7em" prop="contactsName">
              <el-input v-model="searchForm.contactsName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="执行人：" label-width="7em" prop="executorName">
              <el-input v-model="searchForm.executorName" placeholder="请输入" />
            </el-form-item>
            <el-form-item :label="`${businessLabel}名称`" label-width="7em" prop="businessName">
              <el-input v-model="searchForm.businessName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="销售订单：" label-width="7em" prop="orderName">
              <el-input v-model="searchForm.orderName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="线索名称：" label-width="7em" prop="clueName">
              <el-input v-model="searchForm.clueName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="任务状态：" label-width="7em" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option v-for="item in STATUS" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间：" label-width="7em" prop="startDate">
              <el-date-picker v-model="searchForm.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="截止时间：" label-width="7em" prop="endDate">
              <el-date-picker v-model="searchForm.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-form>
        </div>
        <div class="w-full flex p-3 shadow-[0_-3px_5px_0px_rgba(0,0,0,0.2)]">
          <el-button size="large" class="w-full" @click="reset()">重置</el-Button>
          <el-button type="primary" size="large" class="w-full" @click="search()">搜索</el-Button>
        </div>
      </div>
    </div>
    <div class="flex-1 p-5 overflow-auto">
      <div class="bg-white w-full h-full p-3 shadow-md rounded-md flex flex-col">
        <div class="p-3">
          <div class="flex items-center w-full justify-between">
            <div>
              <el-radio-group v-model="layoutSingleChoice" @change="viewsSwitching">
                <el-radio-button label="表格视图" :value="TABLE_VIEW" />
                <el-radio-button label="日历视图" :value="KANBAN_VIEW" />
              </el-radio-group>
            </div>
            <div class="justify-end flex">
              <el-button type="primary" v-permission="['tasksAdd']" @click="createTasks()">创建任务</el-Button>
              <el-button type="primary" v-permission="['tasksDelete']" :disabled="len == 0" :loading="btnLoading" @click="deleteTasks()">批量删除</el-Button>
              <el-button type="primary" v-permission="['tasksImport']" @click="openImportModal()">导入</el-Button>
              <!-- <el-button type="primary" :loading="btnLoading" @click="exportTasks()">导出</el-Button> -->
              <el-button type="primary" v-permission="['tasksExport']" :loading="btnLoading" @click="newExportTasks()">导出</el-Button>
            </div>
          </div>
        </div>
        <template v-if="layoutSingleChoice == TABLE_VIEW">
          <div class="flex-1 overflow-y-auto">
            <el-table :data="tableData" :show-overflow-tooltip="tableShowOverflowTooltip" style="width: 100%;height: 100%;" ref="tableRef" v-loading="loading">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="taskName" label="任务名称" header-align="center" align="center" show-overflow-tooltip
                width="200" />
              <el-table-column prop="priority" label="优先级" width="100" :sortable="true" header-align="center"
                align="center">
                <template #default="scope">
                  {{ PRIORITY.find(item => item.value == scope.row.priority)?.label }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100" header-align="center" align="center">
                <template #default="scope">
                  <el-text :type="STATUS[scope.row.status]?.type">
                    {{ STATUS[scope.row.status]?.label }}
                  </el-text>
                </template>
              </el-table-column>
              <el-table-column prop="executorNames" label="执行人" width="120" header-align="center" align="center">
                <template #default="scope">
                  <template v-for="(item, index) in (scope.row.taskExecutors || [])">
                      <TextTranslation translationTypes="userName" :translationValue="item">
                      </TextTranslation>
                      <span v-if="index < (scope.row.taskExecutors || []).length - 1">,</span>
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="startDate" label="开始时间" width="200" :sortable="true" header-align="center"
                align="center" value-format="YYYY-MM-DD" />
              <el-table-column prop="endDate" label="截止时间" width="200" :sortable="true" header-align="center"
                align="center" value-format="YYYY-MM-DD">
                <template #default="scope">
                  <div :class="`${scope.row.endDate && scope.row.endDate < dateOfTheDay ? 'text-[#F56C6C]' : '' }`">{{ scope.row.endDate }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="customName" label="客户名称" header-align="center" align="center" width="120">
                <template #default="scope">
                  <el-link :underline="false" type="primary" @click="goDetail(scope.row, 'customer', 'customId')">
                    {{ scope.row.customName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="businessName" :label="`${businessLabel}名称`" header-align="center" align="center" width="200">
                <template #default="scope">
                  <el-link :underline="false" type="primary"
                    @click="goDetail(scope.row, 'business', 'businessOpportunityId')">
                    {{ scope.row.businessName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="orderName" label="销售订单" header-align="center" align="center" width="200">
                <template #default="scope">
                  <el-link :underline="false" type="primary" @click="goDetail(scope.row, 'order', 'orderId')">
                    {{ scope.row.orderName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="clueName" label="线索名称" header-align="center" align="center" width="200">
                <template #default="scope">
                  <el-link :underline="false" type="primary" @click="goDetail(scope.row, 'thread', 'clueId')">
                    {{ scope.row.clueName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="contactsName" label="联系人名称" header-align="center" align="center" width="120">
                <template #default="scope">
                  <el-link :underline="false" type="primary" @click="goDetail(scope.row, 'contacts', 'contactsId')">
                    {{ scope.row.contactsName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="contactsTel" label="联系人号码" header-align="center" align="center" width="140" />
  
              <el-table-column fixed="right" label="操作" header-align="center" align="center" width="160" v-permission="['tasksEdit']">
  
                <template #default="scope">
                  <el-button link type="primary" @click.prevent="editRow(scope.row)">
                    编辑
                  </el-button>
                  <el-button link type="primary" v-if="scope.row.status == '2'"
                    @click.prevent="restart(scope.row)">
                    重启
                  </el-button>
                  <el-button link type="primary" v-else @click.prevent="finishRow(scope.row)">
                    完成
                  </el-button>
  
                  <el-button link type="danger" v-permission="['tasksDelete']" @click.prevent="deleteRow(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="ml-auto">
            <el-pagination layout="total, prev, pager, next, sizes" :total="totalCount"
              :current-page="searchForm.pageIndex" @size-change="sizeChage" @current-change="currentChange" />
          </div>
        </template>
        <template v-if="layoutSingleChoice == KANBAN_VIEW">
          <div class="w-full p-4 h-full overflow-auto scroll-bar">
            <taskCalendar ref="taskCalendarRef" />
          </div>
        </template>
      </div>
    </div>
    <el-dialog v-model="restartPopUpWindowVisable" title="重启任务" width="500">
      <div class="mt-8">
        <el-form :model="restartFrom">
          <el-form-item label="重启时间" label-width="7em" prop="showStartDelayData">
            <el-date-picker
              v-model="restartFrom.timesList"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm"
              format="YYYY-MM-DD HH:mm"
              style="width: 300px"
            />
          </el-form-item>
          <div class="text-[#ff4e4e] ml-8">重启任务的时间不能在今天之前</div>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="restartPopUpWindowVisable = false">取消</el-button>
          <el-button type="primary" @click="restartTaksTime">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <TaskModal :visible="taskModalVisible" :title="isEdit ? '编辑任务' : '新建任务'" :save-loading="taskLoading"
      :edit-form="taskForm" :show-log="isEdit" @close="closeTaskModal" @submit="submitForm" />
    <ImportModal :visible="importVisible" :save-loading="importLoading" @close="closeImportModal"
      @submit="importExcel" />
    <ExportModal :visible="exportVisible" :save-loading="exportLoading" @close="closeExportModal"
      @submit="exportExcel" />
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, onBeforeMount, onMounted, ref, } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';
import { MOD, PRIORITY, STATUS, defaultSearchForm, PAGE_LIST, ADD_TASK, DELETE_TASKS, UPDATE_TASK, UPDATE_TASK_STATUS, IMPORT_DATA, EXPORT_DATA, EXPORT_DATA_BY_TASK_ID, TABLE_VIEW, KANBAN_VIEW } from './api';
import { ElTable, dayjs } from 'element-plus';
import TaskModal from '@/components/TaskModal/index.vue';
import ImportModal from './ImportModal.vue';
import ExportModal from './ExportModal.vue';
import taskCalendar from './taskCalendar.vue';
import { post, uploadFile } from '@/utils/request';
import { getFromValue, confirmAction, downloadFile, createTaskFromType } from '@/utils/tools';
import { tableShowOverflowTooltip } from '@/utils/globalVariables'
import { pushMap } from './type';
const router = useRouter()
const { getFunctionList } = useStore()
const globalPopup = inject<GlobalPopup>('globalPopup')
const pagePermission = ref<any[]>();
const taskModalVisible = ref(false);
const taskForm = ref<any>();
const taskModalVisibleKey = ref<number>(1)
const isEdit = ref(false);
const len = computed(() => {
  return tableRef.value?.getSelectionRows().length
})
const taskLoading = ref<saveLoadingType>("1");
const restartPopUpWindowVisable = ref(false);
const restartFrom = ref<any>({});
const dateOfTheDay = ref<any>(dayjs().format('YYYY-MM-DD'))
const isExistBusiness = sessionStorage.getItem("isExistBusiness");
const businessLabel = isExistBusiness === "1" ? "商机" : "项目"; 
const layoutSingleChoice = ref(TABLE_VIEW) // 表格视图
// const layoutSingleChoice = ref(KANBAN_VIEW) // 日历视图

const taskCalendarRef = ref<InstanceType<typeof taskCalendar> | null>()

function viewsSwitching() {

}

function closeTaskModal() {
  taskModalVisible.value = false;
  taskForm.value = null;
}
function submitForm(data: any, isClose: boolean) {
  const { executorId, startDate, endDate, repeatEndDate } = data;
  let params = {
    ...data,
    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD HH:mm'),
    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD HH:mm'),
    repeatEndDate: repeatEndDate && dayjs(repeatEndDate).format('YYYY-MM-DD')
  }
  if (executorId) {
    params = {
      ...params,
      executorId: executorId.join(','),
      taskLogs: []
    }
  }
  taskLoading.value = "2";
  let url = isEdit.value ? UPDATE_TASK : ADD_TASK
  let msg = isEdit.value ? "修改成功" : "新建成功"
  post(url, getFromValue(params)).then(() => {
    taskLoading.value = "3";
    taskModalVisible.value = isClose;
    globalPopup?.showSuccess(msg)
    search();
  }).catch(err => {
    taskLoading.value = "4"
    globalPopup?.showError(err.msg)
  })

}
const searchForm = ref<any>();

const tableRef = ref<InstanceType<typeof ElTable>>();
const loading = ref<boolean>(false);
const totalCount = ref<number>(0);
const tableData = ref<any[]>([])

function newExportTasks() {
  btnLoading.value = true
  const { startDate, endDate } = searchForm.value;
  let params = {
    ...searchForm.value,
    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD 00:00:00'),
    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD 23:59:59')
  }
  post(EXPORT_DATA, {...getFromValue(params)}).then((res) => {
    globalPopup?.showSuccess("导出成功")
    downloadFile(res.data, "任务列表.xlsx");
  }).finally(() => {
    btnLoading.value = false
  })
}

function search() {
  loading.value = true;
  const { startDate, endDate } = searchForm.value;
  let params = {
    ...searchForm.value,
    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD 00:00'),
    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD 23:59')
  }
  post(PAGE_LIST, getFromValue(params)).then(({ data }) => {
    loading.value = false;
    const { total, record } = data;
    totalCount.value = total;
    tableData.value = record.map((item: any) => ({
      ...item,
      executorNames: item.taskExecutors?.join(',') ?? ''
    }));
  }).catch(err => {
    globalPopup?.showError(err.msg);
    loading.value = false;
  })
}
function reset() {
  searchForm.value = { ...defaultSearchForm };
}
function sizeChage(currentSize: number): void {
  searchForm.value = {
    ...searchForm.value,
    pageSize: currentSize,
    pageIndex: 1
  }
  search()
}

function currentChange(currentPage: number): void {
  searchForm.value = {
    ...searchForm.value,
    pageIndex: currentPage
  }
  search()
}

function createTasks() {
  taskModalVisible.value = true;
  // taskForm.value = null;
  taskForm.value = createTaskFromType(0);
  isEdit.value = false;
}
function deleteTasks() {
  confirmAction("确定删除所选内容吗？").then(() => {
    const taskIds = tableRef.value?.getSelectionRows()?.map((item: any) => item.id).join(",")
    post(DELETE_TASKS, {
      taskIds
    }).then(() => {
      search();
      globalPopup?.showSuccess("删除成功")
    }).catch(err => {
      globalPopup?.showError(err.msg)
    })
  });
}


const importVisible = ref(false);
const importLoading = ref<saveLoadingType>("1");
function openImportModal() {
  importVisible.value = true;
}
function closeImportModal() {
  importVisible.value = false;
}
function importExcel(data: any) {
  const formData = new FormData();
  formData.append("multipartFile", data);
  importLoading.value = "2";
  uploadFile(IMPORT_DATA, formData).then(_res => {
    globalPopup?.showSuccess("导入成功")
    importLoading.value = "3";
    if(layoutSingleChoice.value == TABLE_VIEW) {
      search();
    } else {
      taskCalendarRef.value && taskCalendarRef.value.getTaskCalendar()
    }
  }).catch(err => {
    globalPopup?.showError(err.msg)
    importLoading.value = "4";
  })
}

const exportVisible = ref(false);
const exportLoading = ref<saveLoadingType>("1");
const btnLoading = ref(false);
function exportTasks() {
  const data: any[] = tableRef.value?.getSelectionRows()
  if (data.length === 0) {
    // TODO 
    exportVisible.value = true;
    return
  }
  btnLoading.value = true;
  const taskIds = data.map((v: any) => v.id).join(",");
  post(EXPORT_DATA_BY_TASK_ID, {
    taskIds
  }).then(({ data }) => {
    downloadFile(data, "任务列表.xlsx");
    btnLoading.value = false;
  }).catch(err => {
    btnLoading.value = false;
    globalPopup?.showError(err.msg)
  })
}
function closeExportModal() {
  exportVisible.value = false;
}
function exportExcel(data: any) {
  exportLoading.value = "2";
  post(EXPORT_DATA, getFromValue(data)).then(({ data }) => {
    downloadFile(data, "任务列表.xlsx");
    exportLoading.value = "3";
    exportVisible.value = false;
  }).catch(err => {
    globalPopup?.showError(err.msg)
  })
  setTimeout(() => {

  }, 2000)
}
function editRow(row: any) {
  isEdit.value = true;
  taskModalVisible.value = true;
  let value = {
    ...row
  }
  if (value.executorId) {
    value.executorId = value.executorId.split(",")
  }
  delete value.taskLogs;
  taskForm.value = value;
}
function finishRow(item: any) {
  post(UPDATE_TASK_STATUS, {
    id: item.id,
    status: 2
  }).then(() => {
    search()
    globalPopup?.showSuccess("操作成功")
  }).catch(err => {
    globalPopup?.showError(err.msg)
  })
}

function restartTaksTime() {
  const { id, timesList } = restartFrom.value
  const date = dayjs().format("YYYY-MM-DD")
  if(timesList[0] < date) {
    globalPopup?.showInfo("开始时间不能在今天之前")
    return
  }
  post(UPDATE_TASK_STATUS, {
    id, status: 0,
    startDate: timesList[0],
    endDate: timesList[1]
  }).then(() => {
    search()
    globalPopup?.showSuccess("操作成功")
    restartPopUpWindowVisable.value = false
  }).catch(err => {
    globalPopup?.showError(err.msg)
  })
}

function restart(item: any) {
  const starDate = item.startDate ? item.startDate : dayjs().format("YYYY-MM-DD")
  const endDate = item.endDate ? item.endDate : dayjs().format("YYYY-MM-DD")
  restartFrom.value = {
    ...item,
    timesList: [starDate, endDate]
  }
  restartPopUpWindowVisable.value = true
}
function deleteRow(item: any) {
  confirmAction("确定删除吗？").then(() => {
    post(DELETE_TASKS, {
      taskIds: item.id
    }).then(() => {
      search();
      globalPopup?.showSuccess("删除成功")
    }).catch(err => {
      console.log("err", err);
      globalPopup?.showError(err.msg)
    })
  })
}
function goDetail(item: any, path: keyof pushMap, typeId: pushMap[keyof pushMap]) {
  router.push({
    path: `/${path}/detail`,
    query: {
      id: item[typeId]
    }
  })
}
onBeforeMount(() => {
  pagePermission.value = getFunctionList(MOD);
  searchForm.value = { ...defaultSearchForm };
})
onMounted(() => {
  search()
})
</script>

<style lang="scss" scoped></style>