tasks页面

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

@@ -0,0 +1,9 @@
+<template>
+<div>
+</div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,141 @@
+<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/api.ts

@@ -1 +1,67 @@
+import { EpPropMergeType } from "element-plus/es/utils";
+
 export const MDO = "/tasks";
+type StatusType = {
+  label: "全部" | "未开始" | "进行中" | "已完成" | "已超时";
+  value: string;
+  type: EpPropMergeType<
+    StringConstructor,
+    "" | "info" | "primary" | "success" | "danger" | "warning",
+    unknown
+  >;
+};
+export const defaultSearchForm = {
+  //默认搜索条件
+  taskName: "",
+  customerName: "",
+  tel: "",
+  priority: "",
+  status: "",
+  startDate: "",
+  endDate: "",
+  page: 1,
+  pageSize: 10,
+};
+export const modalForm = {
+  taskName: "", //任务名称
+  priority: "", //优先级
+  taskType: "1", //  任务类型
+  customerId: "0", //  客户id 0
+  businessId: "1", //商机id 1
+  orderId: "2", //  订单id 2
+  clueid: "3", //线索id 3
+  contactsId: "", //联系人id
+  executorId: "", //执行人id
+  repeat: "0", //是否重复
+  repeatType: "0", //重复类型
+  startDate: "", //开始日期
+  endDate: "", //截止日期
+  taskDesc: "", //任务描述
+};
+export const PRIORITY = [
+  //优先级
+  { label: "高", value: "0" },
+  { label: "中", value: "1" },
+  { label: "低", value: "2" },
+];
+export const STATUS: StatusType[] = [
+  //任务状态
+  { label: "未开始", value: "0", type: "info" },
+  { label: "进行中", value: "1", type: "primary" },
+  { label: "已完成", value: "2", type: "success" },
+  { label: "已超时", value: "3", type: "danger" },
+];
+export const TASK_TYPE = [
+  // 弹窗任务类型
+  { label: "客户", value: "0", show: true },
+  { label: "商机", value: "1", show: true },
+  { label: "销售订单", value: "2", show: true },
+  { label: "线索", value: "3", show: false },
+];
+export const REPEAT_TYPE = [
+  { label: "每天", value: "0" },
+  { label: "每周", value: "1" },
+  { label: "每月", value: "2" },
+  { label: "自定义周期", value: "3" },
+  { label: "自定义日期", value: "4" },
+];

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

@@ -3,40 +3,46 @@
     <div class="p-5 w-80 pr-0">
       <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
         <div class="flex-1 p-3 overflow-y-auto">
-          <el-form :model="ruleForm">
+          <el-form :model="searchForm">
             <el-form-item label="任务名称：" label-width="7em" prop="taskName">
-              <el-input v-model="ruleForm.taskName" placeholder="请输入" />
+              <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="customerName">
-              <el-input v-model="ruleForm.customerName" placeholder="请输入" />
+              <el-input v-model="searchForm.customerName" placeholder="请输入" />
             </el-form-item>
-            <el-form-item label="联系人电话：" label-width="7em" prop="tel">
-              <el-input v-model="ruleForm.tel" placeholder="请输入" />
+            <el-form-item label="联系人：" label-width="7em" prop="tel">
+              <el-input v-model="searchForm.tel" placeholder="请输入" />
             </el-form-item>
-            <el-form-item label="优先级" label-width="7em" prop="priority">
-              <el-select v-model="ruleForm.priority" placeholder="请选择">
-                <el-option label="全部" value="0" />
-                <el-option label="高" value="1" />
-                <el-option label="中" value="2" />
-                <el-option label="低" value="3" />
+            <el-form-item label="执行人：" label-width="7em" prop="tel">
+              <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="status">
-              <el-select v-model="ruleForm.status" placeholder="请选择">
-                <el-option label="全部" value="0" />
-                <el-option label="未开始" value="1" />
-                <el-option label="进行中" value="2" />
-                <el-option label="已完成" value="3" />
-                <el-option label="超时" value="4" />
+            <el-form-item label="商机名称：" label-width="7em" prop="tel">
+              <el-input v-model="searchForm.tel" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="销售订单：" label-width="7em" prop="tel">
+              <el-input v-model="searchForm.tel" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="线索名称：" label-width="7em" prop="tel">
+              <el-input v-model="searchForm.tel" 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="ruleForm.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
+            <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="ruleForm.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
+            <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)]">
@@ -45,37 +51,193 @@
         </div>
       </div>
     </div>
-    <div class="flex-1 p-5">
-      <div class="bg-white w-full h-full p-3 shadow-md rounded-md">222</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="ml-auto p-3">
+          <el-button type="primary" @click="createTasks()">创建任务</el-Button>
+          <el-button type="primary" @click="deleteTasks()">批量删除</el-Button>
+          <el-button type="primary" @click="importTasks()">导入</el-Button>
+          <el-button type="primary" @click="exportTasks()">导出</el-Button>
+        </div>
+        <div class="flex-1">
+          <el-table :data="tableData" style="width: 100%;height: 100%;">
+            <el-table-column prop="taskName" label="任务名称" header-align="center" align="center" show-overflow-tooltip
+              width="200" />
+            <el-table-column prop="priority" label="优先级" width="90" :sortable="true" header-align="center"
+              align="center">
+              <template #default="scope">
+                {{ PRIORITY[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="customerName" label="执行人" width="120" header-align="center" align="center" />
+            <el-table-column prop="startDate" label="开始时间" width="120" :sortable="true" header-align="center"
+              align="center" />
+            <el-table-column prop="endDate" label="截止时间" width="120" :sortable="true" header-align="center"
+              align="center" />
+            <el-table-column prop="contactsName" label="联系人" header-align="center" align="center" width="120" />
+            <el-table-column prop="contactsTel" label="联系人号码" header-align="center" align="center" width="140" />
+            <el-table-column prop="customerName" label="客户名称" header-align="center" align="center" width="120" />
+            <el-table-column prop="businessName" label="商机名称" header-align="center" align="center" width="200" />
+            <el-table-column prop="businessName" label="销售订单" header-align="center" align="center" width="200" />
+            <el-table-column prop="businessName" label="线索名称" header-align="center" align="center" width="200" />
+            <el-table-column fixed="right" label="操作" header-align="center" align="center" width="150">
+
+              <template #default="scope">
+                <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">
+                  编辑
+                </el-button>
+                <el-button link type="primary" size="small" v-if="scope.row.status == '3'"
+                  @click.prevent="restart(scope.$index)">
+                  重启
+                </el-button>
+                <el-button link type="primary" size="small" v-else @click.prevent="finishRow(scope.$index, scope)">
+                  完成
+                </el-button>
+
+                <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="ml-auto">
+          <el-pagination layout="total, prev, pager, next, sizes" :total="20" hide-on-single-page />
+        </div>
+      </div>
     </div>
+    <TaskModal :visible="taskModalVisible" :edit-form="taskForm" @close-modal-visible="closeModal()" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onMounted, ref } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import { useStore } from '@/store';
-import { MDO } from './api';
+import { MDO, PRIORITY, STATUS, defaultSearchForm } from './api';
+import { dayjs } from 'element-plus';
+import TaskModal from './TaskModal.vue';
 const { getFunctionList } = useStore()
-const config = ref<any>([])
-const defaultForm = {
-  taskName: '',
-  customerName: '',
-  tel: '',
-  priority: '0',
-  status: '0',
-  startDate: '',
-  endDate: '',
+
+const pagePermission = ref<any[]>();
+const taskModalVisible = ref(false);
+const taskForm = ref<any>();
+function closeModal() {
+  taskModalVisible.value = false;
+  taskForm.value = null;
+}
+
+const searchForm = ref<any>();
+const tableData = ref<any[]>([
+  {
+    taskName: '任务1111111111111111111111111',
+    contactsTel: "15100111111",
+    contactsName: "水水水水",
+    customerName: '李四',
+    status: '0',
+    priority: '0',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+    taskType: '1'
+  },
+  {
+    taskName: '任务222',
+    customerName: '张三',
+    status: '1',
+    priority: '1',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+    taskType: '2'
+  },
+  {
+    taskName: '任务333',
+    customerName: '王五',
+    status: '2',
+    priority: '2',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+    taskType: '0'
+  },
+  {
+    taskName: '任务444',
+    customerName: '赵六',
+    status: '3',
+    priority: '1',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+    taskType: '3'
+  },
+  {
+    taskName: '任务555',
+    customerName: '马六',
+    status: '1',
+    priority: '2',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+  },
+  {
+    taskName: '任务666',
+    customerName: '吴七',
+    status: '3',
+    priority: '0',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+  },
+  {
+    taskName: '任务777',
+    customerName: '钱八',
+    status: '0',
+    priority: '1',
+    startDate: dayjs().format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+  }
+])
+function search() {
+  console.log("searchForm", searchForm.value);
+}
+function reset() {
+  searchForm.value = defaultSearchForm;
+}
+function createTasks() {
+  taskModalVisible.value = true;
+  taskForm.value = null;
+}
+function deleteTasks() {
+  console.log("deleteTasks", searchForm.value);
+  console.log(dayjs().format('YYYY-MM-DD'));
+}
+
+function importTasks() {
+  console.log("importTasks", searchForm.value);
+}
+
+function exportTasks() {
+  console.log("exportTasks", searchForm.value);
+}
+
+function editRow(row: any) {
+  taskModalVisible.value = true;
+  taskForm.value = row;
+}
+function finishRow(index: any, scope: any) {
+  console.log("finishRow", index, scope);
 }
-const ruleForm = ref<any>()
-const reset = () => {
-  ruleForm.value = defaultForm;
+function restart(index: any) {
+  console.log("restart", index);
 }
-const search = () => {
-  console.log("ruleForm", ruleForm.value);
+function deleteRow(index: any) {
+  console.log("deleteRow", index);
 }
 onBeforeMount(() => {
-  config.value = getFunctionList(MDO);
-  ruleForm.value = defaultForm;
+  pagePermission.value = getFunctionList(MDO);
+  searchForm.value = defaultSearchForm;
 })
 </script>