From a9d15eb968668116f25c5af8b42f8d86c692a733 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Thu, 27 Jul 2023 13:34:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=BB=E5=8A=A1=E6=97=A5?=
 =?UTF-8?q?=E7=A8=8B,=E4=BB=BB=E5=8A=A1=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/task.ts                     |  14 ++
 src/views/task/dialog_index_man.vue |  83 ++++++++++
 src/views/task/edit.vue             | 243 ++++++++++++++++++++++++++++
 src/views/task/index.vue            | 161 ++++++++++++++++++
 src/views/task/taskList.vue         | 159 ++++++++++++++++++
 5 files changed, 660 insertions(+)
 create mode 100644 src/api/task.ts
 create mode 100644 src/views/task/dialog_index_man.vue
 create mode 100644 src/views/task/edit.vue
 create mode 100644 src/views/task/index.vue
 create mode 100644 src/views/task/taskList.vue

diff --git a/src/api/task.ts b/src/api/task.ts
new file mode 100644
index 0000000..b9b2fda
--- /dev/null
+++ b/src/api/task.ts
@@ -0,0 +1,14 @@
+import request from "@/utils/request";
+//任务详情
+export function apiTaskView(params: any) {
+  return request.get({ url: "/task/view", params });
+}
+//任务列表
+export function apiTaskIndex(params: any) {
+  return request.get({ url: "/task/index", params });
+}
+//添加和修改
+export function apiTaskCreat(params: any) {
+  return request.post({ url: "/task/create", params });
+}
+
diff --git a/src/views/task/dialog_index_man.vue b/src/views/task/dialog_index_man.vue
new file mode 100644
index 0000000..54a25f0
--- /dev/null
+++ b/src/views/task/dialog_index_man.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <el-card class="!border-none" shadow="never">
+            <el-form class="mb-[-16px]" :model="queryParams" inline>
+                <el-form-item label="人员名称" prop="name">
+                    <el-input
+                        class="w-[280px]"
+                        v-model="queryParams.name"
+                        clearable
+                        placeholder="请输入人员名称"
+                    />
+                </el-form-item>
+                <el-form-item label="请选择人员角色" prop="role_id">
+                    <el-select class="w-[280px]" v-model="queryParams.role_id">
+            <el-option label="全部" value />
+            <el-option
+              v-for="(item, index) in optionsData.role"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button @click="resetParams">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+            <div class="mt-4">
+         <el-table :data="pager.lists" @cell-click="handleCurrentChange">
+          <el-table-column label="账号" prop="account" min-width="120" />
+          <el-table-column label="名称" prop="name" min-width="100" />
+          <el-table-column label="角色" prop="role_name" min-width="100" show-tooltip-when-overflow />
+          <el-table-column label="部门" prop="dept_name" min-width="100" show-tooltip-when-overflow />
+          <el-table-column label="创建时间" prop="create_time" min-width="180" />
+          <el-table-column label="最近登录时间" prop="login_time" min-width="180" />
+          <el-table-column label="最近登录IP" prop="login_ip" min-width="120" />
+        </el-table>
+            </div>
+            <div class="flex mt-4 justify-end">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts" setup name="taskLists">
+import { usePaging } from '@/hooks/usePaging'
+import { roleAll } from "@/api/perms/role";
+import { useDictData,useDictOptions } from '@/hooks/useDictOptions'
+import { adminLists} from "@/api/perms/admin";
+import { defineEmits } from 'vue'
+const { optionsData } = useDictOptions<{
+  role: any[];
+}>({
+  role: {
+    api: roleAll,
+  },
+});
+// 查询条件
+const queryParams = reactive({
+    name: "",
+    role_id: "",
+})
+
+// 选中数据
+const emits = defineEmits(['customEvent'])
+
+// 选中数据子父传递
+const handleCurrentChange = (value: any) => {
+    emits('customEvent', value)
+}
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: adminLists,
+    params: queryParams
+})
+
+getLists()
+</script>
diff --git a/src/views/task/edit.vue b/src/views/task/edit.vue
new file mode 100644
index 0000000..df00433
--- /dev/null
+++ b/src/views/task/edit.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="edit-popup">
+    <popup ref="popupRef" :title="popupTitle" :async="true" width="1000px" @confirm="handleSubmit" @close="handleClose">
+      <el-form ref="formRef" :model="formData" label-width="84px">
+        <el-col class="pt-6 !border-none">
+          <el-row>
+            <el-col :span="16">
+              <el-form-item label="任务主题" prop="title">
+                <el-input v-model="formData.title" placeholder="请输入任务主题" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="优先级" prop="name">
+                <el-select v-model="formData.priority" placeholder="请输入优先级">
+                  <el-option v-for="item in priorityList" :key="item.value" :value="item.value" :label="item.label"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="工作类型" prop="icon">
+                <el-select v-model="formData.type" placeholder="请选择工作类型" >
+                  <el-option v-for="item in taskTypeList" :key="item.label" :value="item.value" :label="item.label"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="是否为修复BUG" label-width="auto" prop="icon">
+                <el-radio-group v-model="formData.is_bug">
+                  <el-radio :label="1">是</el-radio>
+                  <el-radio :label="0">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="负责人" prop="icon">
+                <el-input v-model="formData.director_name" placeholder="请选择负责人" clearable @click="isMan = true"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="协作人" prop="icon">
+                <el-input v-model="formData.assist_admin_names" placeholder="请选择协作人" clearable
+                  @click="isManTow = true"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审查人" prop="icon">
+                <el-input v-model="formData.assist_check_names" placeholder="请选择审查人" clearable @click="isManThe = true"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="开始时间" prop="icon">
+                <el-date-picker type="date" placeholder="开始时间" value-format="YYYY-MM-DD" v-model="formData.start_time" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="结束时间" prop="icon">
+                <el-date-picker type="date" placeholder="预计结束时间" value-format="YYYY-MM-DD" v-model="formData.end_time" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="验收时间" prop="icon">
+                <el-date-picker type="date" placeholder="预计验收时间" value-format="YYYY-MM-DD" v-model="formData.check_time" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="详细描述" prop="icon">
+                <editor v-model="formData.content" :height="500" />
+              </el-form-item></el-col>
+          </el-row>
+        </el-col>
+      </el-form>
+      <el-dialog v-model="isMan" title="选择负责人" width="60%">
+        <DialogIndexMan @customEvent="customEvent" />
+      </el-dialog>
+      <el-dialog v-model="isManTow" title="选择协作人" width="60%">
+        <DialogIndexMan @customEvent="customEventMan" />
+      </el-dialog>
+      <el-dialog v-model="isManThe" title="选择审查人" width="60%">
+        <DialogIndexMan @customEvent="customEventManThe" />
+      </el-dialog>
+    </popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="taskEidt">
+import type { FormInstance } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import { apiTaskCreat } from "@/api/task";
+import { timeFormat } from "@/utils/util";
+import { reactive, onMounted, type PropType } from "vue";
+import DialogIndexMan from './dialog_index_man.vue'
+const props = defineProps({
+  dictData: {
+    type: Object as PropType<Record<string, any[]>>,
+    default: () => ({}),
+  },
+  dateValue:{
+    type: Date,
+    default: () => (null),
+  }
+});
+const emit = defineEmits(["success", "close"]);
+const formRef = shallowRef<FormInstance>();
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const mode = ref("add");
+
+// 弹窗标题
+const popupTitle = computed(() => {
+  return mode.value == "edit" ? "编辑任务" : "新增任务";
+});
+
+onMounted(()=>{
+  props.dateValue?.toDateString()?formData.start_time = props.dateValue.toDateString():null;
+})
+
+const priorityList = reactive([
+  {
+    value: 1,
+    label: "低"
+  },
+  {
+    value: 2,
+    label: "中"
+  },
+  {
+    value: 3,
+    label: "高"
+  },
+  {
+    value: 4,
+    label: "紧急"
+  }
+])
+
+const taskTypeList = reactive([
+  {
+    value: 0,
+    label: "测试"
+  },
+  {
+    value: 1,
+    label: "修复"
+  },
+  {
+    value: 2,
+    label: "新增"
+  }
+])
+
+// const timeList = reactive([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24])
+
+// 表单数据
+const formData = reactive({
+  id: "",
+  title: "",//任务名称
+  priority: "",//任务优先级
+  type: "",//任务类型
+  is_bug: "",//是否为修复bug
+  start_time: "",//预计开始时间
+  end_time: "",//预计结束时间
+  check_time: "",//预计验收时间
+  director_name: "",//负责人
+  director_uid: "",//负责人id
+  assist_admin_names: "",//协作人
+  assist_admin_ids: "",//协作人id
+  assist_check_names: "",//审查人
+  assist_check_ids: "",//审查人id
+  content: "",//任务描述
+  project_id: ""//项目id
+});
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+const getDetail = async (row: Record<string, any>) => {
+  const data = await apiFlowTypeDetail({
+    id: row.id,
+  });
+  setFormData(data);
+};
+
+// 选择负责人
+const isMan = ref(false);
+// 选择协作人
+const isManTow = ref(false);
+// 选择审查人
+const isManThe = ref(false);
+function customEvent(data: any) {
+  isMan.value = false
+  formData.director_name = data.name;
+  formData.director_uid = data.id;
+}
+function customEventMan(data: any) {
+  isManTow.value = false
+  formData.assist_admin_names = data.name;
+  formData.assist_admin_ids = data.id;
+}
+function customEventManThe(data: any) {
+  isManThe.value = false
+  formData.assist_check_names = data.name;
+  formData.assist_check_ids = data.id;
+}
+
+// 提交按钮
+const handleSubmit = async () => {
+  const data = { ...formData };
+  mode.value == "edit" ? await apiTaskCreat(data) : await apiTaskCreat(data);
+  popupRef.value?.close();
+  emit("success");
+};
+
+//打开弹窗
+const open = (type = "add") => {
+  mode.value = type;
+  popupRef.value?.open();
+};
+
+// 关闭回调
+const handleClose = () => {
+  emit("close");
+};
+
+defineExpose({
+  open,
+  setFormData,
+  getDetail,
+});
+</script>
diff --git a/src/views/task/index.vue b/src/views/task/index.vue
new file mode 100644
index 0000000..35a688c
--- /dev/null
+++ b/src/views/task/index.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <el-card class="!border-none" v-loading="loading" shadow="never">
+            <el-button v-perms="['flow_type/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <div class="mt-4">
+                <el-calendar v-model="dateValue" >
+                    <template #dateCell="{ data }">
+                        <div style="width: 100%;height: 100%;" @click="test(data)">
+                            <p :class="data.isSelected ? 'is-selected' : ''">
+                                {{ data.day.split('-').slice(1).join('-') }}
+                                <!-- {{ data.isSelected ? '✔️' : '' }} -->
+                            </p>
+                            <div class="task" :class="{'fou': item.priority==4,'tow':item.priority==2,'the':item.priority==3}"
+                                v-if="taskList[data.day]"
+                                v-for="(item, index) in taskList[data.day]"
+                                :key="index"
+                            >
+                                {{ item.title }}
+                            </div>
+                        </div>
+                        <!-- <div class="task" style="color: var(--el-color-primary);">完成BUG测试</div>
+                        <div class="task" style="color: var(--el-color-danger);">完成BUG测试</div> -->
+                    </template>
+                </el-calendar>
+            </div>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" :dateValue="dateValue" @success="loadTask" @close="showEdit = false" />
+    </div>
+</template>
+  
+<script lang="ts" setup name="task">
+import { useDictData } from "@/hooks/useDictOptions";
+import { apiTaskIndex } from "@/api/task";
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+// import { getRoutePath } from "router";
+import EditPopup from "./edit.vue";
+import { reactive, watch } from "vue";
+
+const dateValue = ref(new Date());
+
+watch(
+    () => dateValue,
+    (newValue, oldValue) => {
+        initShowDate(timeFormat(newValue.value.getTime()))
+    },{deep: true}
+);
+
+
+const test = (e:any)=>{
+    console.log(e);
+    
+}
+
+// 加载
+const loading = ref(true);
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
+// 是否显示编辑框
+const showEdit = ref(false);
+
+// 查询条件
+const queryParams = reactive({
+    start_time: "",
+    end_time: "",
+    day: 1,
+    page_no: 1,
+    pageSize: 150
+});
+
+const taskList = ref<any>([])
+
+// 查询
+const loadTask = async ()=>{
+    let res:any = await apiTaskIndex(queryParams);
+    taskList.value = res.lists;
+    // console.log(taskList.value);
+    loading.value = false;
+}
+
+
+
+const start_date = ref('');
+const end_date = ref('');
+// 计算当前显示的第一天和最后一天
+const initShowDate = (dateStr='')=>{
+    const currentDate = dateStr ? new Date(dateStr): new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    const lastDay = new Date(currentYear, currentMonth + 1, 0).getDay();//获取第一天星期
+    const startDay = new Date(currentYear, currentMonth, 1).getDay();//获取最后一天星期
+    // console.log(new Date(currentYear, currentMonth, 1-startDay).getDate());
+    // console.log(new Date(currentYear, currentMonth + 1, 6-lastDay).getDate());
+    start_date.value = timeFormat(new Date(currentYear, currentMonth, 1-startDay).getTime());//获取第一天时间
+    end_date.value = timeFormat(new Date(currentYear, currentMonth + 1, 6-lastDay).getTime());//获取最后一天时间
+    if(queryParams.start_time!=start_date.value){
+        queryParams.start_time = start_date.value;
+        queryParams.end_time = end_date.value;
+        loading.value = true;
+        loadTask();
+    }
+}
+initShowDate()
+
+// 获取字典数据
+const { dictData } = useDictData("");
+
+// 添加
+const handleAdd = async () => {
+    showEdit.value = true;
+    await nextTick();
+    editRef.value?.open("add");
+};
+
+// 编辑
+const handleEdit = async (data: any) => {
+    showEdit.value = true;
+    await nextTick();
+    editRef.value?.open("edit");
+    editRef.value?.setFormData(data);
+};
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+    await feedback.confirm("确定要删除？");
+    await apiFlowTypeDelete({ id });
+    getLists();
+};
+
+// getLists();
+</script>
+  
+<style lang="scss">
+.is-selected {
+    color: #1989fa;
+}
+.el-calendar-table .el-calendar-day{
+    height: 6.2rem;
+}
+.task{
+    font-size: 0.8rem;
+    color: #F7BA2A;
+    white-space: nowrap;  /* 设置文本不换行 */
+    overflow: hidden;     /* 隐藏溢出的部分 */
+    text-overflow: ellipsis;  /* 在溢出的部分显示省略号 */
+}
+.the{
+    color: #ff5100;
+}
+.tow{
+    color: #f38200;
+}
+.fou{
+    color: red;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/task/taskList.vue b/src/views/task/taskList.vue
new file mode 100644
index 0000000..77866d1
--- /dev/null
+++ b/src/views/task/taskList.vue
@@ -0,0 +1,159 @@
+<template>
+    <div>
+      <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+        <el-button v-perms="['flow_type/add']" type="primary" @click="handleAdd">
+          <template #icon>
+            <icon name="el-icon-Plus" />
+          </template>
+          新增
+        </el-button>
+        <!-- <el-button
+          v-perms="['flow_type/delete']"
+          :disabled="!selectData.length"
+          @click="handleDelete(selectData)"
+        >
+          删除
+        </el-button> -->
+        <div class="mt-4">
+          <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+            {{ pager }}
+            <el-table-column
+              label="id"
+              prop="id"
+              show-overflow-tooltip
+              width="60"
+            />
+            <el-table-column label="名称" prop="title" show-overflow-tooltip />
+            <el-table-column label="优先级" prop="title" width="90" show-overflow-tooltip >
+              <template #default="{ row }">
+                <span :class="{'one':row.priority==1,'tow':row.priority==2,'the':row.priority==3,'fou':row.priority==4}">{{row.priority_name}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="负责人" prop="director_name" width="90" show-overflow-tooltip />
+            <el-table-column label="协作人" prop="assist_admin_names" width="90" show-overflow-tooltip />
+            <el-table-column label="审查人" prop="assist_check_names" width="90" show-overflow-tooltip />
+            <el-table-column label="开始时间" prop="start_time" show-overflow-tooltip />
+            <el-table-column label="结束时间" prop="end_time" show-overflow-tooltip />
+            <el-table-column label="审查时间" prop="check_time" show-overflow-tooltip />
+            <el-table-column label="状态" prop="status" show-overflow-tooltip>
+              <template #default="{ row }">
+                <span v-if="row.status == 1" style="color: #67c23a">正常</span>
+                <span v-else style="color: #fe0000">禁用</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              align="center"
+              width="auto"
+              fixed="right"
+            >
+              <template #default="{ row }">
+                <el-button
+                  v-perms="['flow/edit']"
+                  type="primary"
+                  link
+                  @click="handleEdit(row)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-perms="['flow/delete']"
+                  type="danger"
+                  link
+                  @click="handleDelete(row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="flex mt-4 justify-end">
+          <pagination v-model="pager" @change="getLists" />
+        </div>
+      </el-card>
+      <edit-popup
+        v-if="showEdit"
+        ref="editRef"
+        :dict-data="dictData"
+        @success="getLists"
+        @close="showEdit = false"
+      />
+    </div>
+  </template>
+  
+  <script lang="ts" setup name="flowTypeLists">
+  import { usePaging } from "@/hooks/usePaging";
+  import { useDictData } from "@/hooks/useDictOptions";
+  import { apiTaskIndex } from "@/api/task";
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+// import { getRoutePath } from "router";
+import EditPopup from "./edit.vue";
+  
+  const editRef = shallowRef<InstanceType<typeof EditPopup>>();
+  // 是否显示编辑框
+  const showEdit = ref(false);
+  
+  // 查询条件
+  const queryParams = reactive({
+    
+  });
+  
+  // 选中数据
+  const selectData = ref<any[]>([]);
+  
+  // 表格选择后回调事件
+  const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id);
+  };
+  
+  // 获取字典数据
+  const { dictData } = useDictData("");
+  
+  // 分页相关
+  const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiTaskIndex,
+    params: queryParams,
+  });
+  
+  // 添加
+  const handleAdd = async () => {
+    showEdit.value = true;
+    await nextTick();
+    editRef.value?.open("add");
+  };
+  
+  // 编辑
+  const handleEdit = async (data: any) => {
+    showEdit.value = true;
+    await nextTick();
+    editRef.value?.open("edit");
+    editRef.value?.setFormData(data);
+  };
+  
+  // 删除
+  const handleDelete = async (id: number | any[]) => {
+    await feedback.confirm("确定要删除？");
+    await apiFlowTypeDelete({ id });
+    getLists();
+  };
+  
+  getLists();
+  </script>
+
+  <style lang="scss">
+.one{
+    color: #F7BA2A;
+}
+.the{
+    color: #ff5100;
+}
+.tow{
+    color: #f38200;
+}
+.fou{
+    color: red;
+}
+</style>
+  
\ No newline at end of file