From 9d65f30bd4c094cc5d1652c8ae07f7041e4d5af2 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Wed, 18 Mar 2026 18:45:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E6=88=90=E4=BB=A3=E5=8A=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sys/sysPerson.ts               |   8 ++
 src/api/todo/todoRecord.ts             |  16 +++
 src/components/DictTag/Select.vue      |  38 ++++++-
 src/components/Select/SelectPerson.vue | 103 ++++++++++++++++++
 src/components/index.ts                |   2 +
 src/views/todo/todo-record/detail.vue  | 144 +++++++++++++++++++++++++
 src/views/todo/todo-record/form.vue    | 104 ++++++------------
 src/views/todo/todo-record/index.vue   | 132 +++++++++++++++++++----
 8 files changed, 455 insertions(+), 92 deletions(-)
 create mode 100644 src/components/Select/SelectPerson.vue
 create mode 100644 src/views/todo/todo-record/detail.vue

diff --git a/src/api/sys/sysPerson.ts b/src/api/sys/sysPerson.ts
index 879bf3e..0f19498 100644
--- a/src/api/sys/sysPerson.ts
+++ b/src/api/sys/sysPerson.ts
@@ -8,6 +8,14 @@ export function fetchList(query?: Object) {
   })
 }
 
+export function select(query?: Object) {
+  return request({
+    url: '/admin/sysPerson/select',
+    method: 'get',
+    params: query
+  })
+}
+
 export function addObj(obj?: Object) {
   return request({
     url: '/admin/sysPerson',
diff --git a/src/api/todo/todoRecord.ts b/src/api/todo/todoRecord.ts
index 577da7d..9919c11 100755
--- a/src/api/todo/todoRecord.ts
+++ b/src/api/todo/todoRecord.ts
@@ -8,6 +8,22 @@ export function fetchList(query?: Object) {
   })
 }
 
+export function start(query?: Object) {
+  return request({
+    url: '/admin/todo-record/start',
+    method: 'get',
+    params: query
+  })
+}
+
+export function done(query?: Object) {
+  return request({
+    url: '/admin/todo-record/done',
+    method: 'get',
+    params: query
+  })
+}
+
 export function addObj(obj?: Object) {
   return request({
     url: '/admin/todo-record',
diff --git a/src/components/DictTag/Select.vue b/src/components/DictTag/Select.vue
index 7f2c247..5409ffc 100644
--- a/src/components/DictTag/Select.vue
+++ b/src/components/DictTag/Select.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-select :model-value="modelValue" :placeholder="placeholder" :multiple="multiple" :disabled="disabled"
+	<el-select :model-value="innerValue" :placeholder="placeholder" :multiple="multiple" :disabled="disabled"
 		:clearable="clearable" class="w-full" @update:model-value="handleChange">
 		<el-option v-for="item in dictData" :key="item.value" :label="item.label" :value="item.value" />
 	</el-select>
@@ -18,6 +18,7 @@ interface DictOption {
 
 interface Props {
 	modelValue?: string | number | (string | number)[];
+	defaultValue?: string | number | (string | number)[];
 	options?: DictOption[] | string[];
 	placeholder?: string;
 	multiple?: boolean;
@@ -28,6 +29,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
 	modelValue: undefined,
+	defaultValue: undefined,
 	options: () => [],
 	placeholder: '请选择',
 	multiple: false,
@@ -55,6 +57,23 @@ async function loadDictData() {
 
 onMounted(() => {
 	loadDictData();
+	const isUnset = (v: any) => {
+		if (props.multiple) {
+			if (Array.isArray(v)) return v.length === 0;
+			return v === undefined || v === null || v === '';
+		}
+		return v === undefined || v === null || v === '';
+	};
+	if (isUnset(props.modelValue) && props.defaultValue !== undefined) {
+		const dv = props.defaultValue;
+		if (props.multiple) {
+			const v = Array.isArray(dv) ? dv : [dv as string | number];
+			emit('update:modelValue', v);
+		} else {
+			const v = Array.isArray(dv) ? (dv[0] as string | number) : (dv as string | number);
+			emit('update:modelValue', v);
+		}
+	}
 });
 
 const dictData = computed<DictOption[]>(() => {
@@ -73,6 +92,23 @@ const dictData = computed<DictOption[]>(() => {
 	});
 });
 
+const innerValue = computed<string | number | (string | number)[] | undefined>(() => {
+	const isUnset = (v: any) => {
+		if (props.multiple) {
+			if (Array.isArray(v)) return v.length === 0;
+			return v === undefined || v === null || v === '';
+		}
+		return v === undefined || v === null || v === '';
+	};
+	if (!isUnset(props.modelValue)) return props.modelValue;
+	const dv = props.defaultValue;
+	if (props.multiple) {
+		if (dv === undefined) return [];
+		return Array.isArray(dv) ? dv : [dv as string | number];
+	}
+	return Array.isArray(dv) ? (dv?.[0] as string | number | undefined) : (dv as string | number | undefined);
+});
+
 function handleChange(value: string | number | (string | number)[]) {
 	emit('update:modelValue', value);
 	emit('change', value);
diff --git a/src/components/Select/SelectPerson.vue b/src/components/Select/SelectPerson.vue
new file mode 100644
index 0000000..1a85152
--- /dev/null
+++ b/src/components/Select/SelectPerson.vue
@@ -0,0 +1,103 @@
+<template>
+    <el-select style="width: 100%" v-model="state.selectId" :placeholder="props.placeholder"
+        :clearable="props.clearable" remote-show-suffix filterable remote :disabled="props.disabled"
+        :remote-method="remoteSearch" :loading="state.loading" @visible-change="(e: boolean) => e && getOptions()"
+        @change="change">
+        <el-option v-for="v in state.options" :key="v.id" :label="v.name" :value="v.id">
+            <div class="flex items-center">
+                <div class="color-primary">{{ v.name }}</div>
+                <div class="pl5 color-success">{{ v.phone }}</div>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts" name="SelectDuty">
+import { reactive } from "vue"
+import { useDict } from "/@/hooks/dict"
+
+import * as sysPersonApi from "/@/api/sys/sysPerson"
+
+const emit = defineEmits(["change"])
+
+const selectId = defineModel()
+
+type Props = {
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+    autoFirst?: boolean
+    apiParams?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    placeholder: "请选择",
+    disabled: false,
+    clearable: true,
+    autoFirst: false,
+    apiParams: {},
+})
+
+const queryForm = reactive<any>({
+    nameOrPhone: "",
+    current: 1,
+    size: 10,
+})
+
+const state = reactive<any>({
+    loading: true,
+    selectId: selectId,
+    options: [],
+    hardType: [],
+})
+
+watch(
+    selectId,
+    (newVal, oldValue) => {
+        if (newVal == oldValue) return
+        state.selectId = newVal
+        getOptions()
+    },
+    { immediate: true },
+)
+
+async function getOptions() {
+    try {
+        state.loading = true
+        const _pa = {
+            ...queryForm,
+            ...props.apiParams,
+        }
+        const { data } = await sysPersonApi.select(_pa)
+        state.options = data.records ?? []
+        if (props.autoFirst && state.options.length != 0 && !state.selectId) {
+            state.selectId = state.options[0].id
+            emit("change", state.selectId)
+        }
+        const { hard_type } = useDict("hard_type")
+        state.hardType = hard_type
+    } finally {
+        setTimeout(() => (state.loading = false), 500)
+    }
+}
+
+function remoteSearch(params: string) {
+    if (params != queryForm.nameOrPhone) {
+        queryForm.nameOrPhone = params
+        getOptions()
+    }
+}
+
+function clear() {
+    state.selectId = null
+    getOptions()
+}
+
+function change() {
+    emit("change", selectId)
+}
+
+onMounted(() => {
+    props.autoFirst && getOptions()
+})
+</script>
diff --git a/src/components/index.ts b/src/components/index.ts
index b308f46..99370d4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -37,6 +37,7 @@ import SelectTreeDept from "/@/components/Select/SelectTreeDept.vue"
 import SelectDeviceTree from "/@/components/Select/SelectDeviceTree.vue"
 import SelectAreaType from "/@/components/Select/SelectAreaType.vue"
 import SelectPersonCarType from "/@/components/Select/SelectPersonCarType.vue"
+import SelectPerson from "/@/components/Select/SelectPerson.vue"
 
 import ColumnBtn from "/@/components/Column/ColumnBtn.vue"
 
@@ -103,6 +104,7 @@ export default {
 		app.component('SelectDeviceTree', SelectDeviceTree);
 		app.component('SelectAreaType', SelectAreaType);
 		app.component('SelectPersonCarType', SelectPersonCarType);
+		app.component('SelectPerson', SelectPerson);
 
 		app.component('ColumnBtn', ColumnBtn);
 
diff --git a/src/views/todo/todo-record/detail.vue b/src/views/todo/todo-record/detail.vue
new file mode 100644
index 0000000..7abb4b6
--- /dev/null
+++ b/src/views/todo/todo-record/detail.vue
@@ -0,0 +1,144 @@
+<template>
+    <el-dialog :title="'详情'" width="70%" v-model="visible" :close-on-click-modal="false" draggable>
+        <div class="header">
+            <div class="title">基本信息</div>
+            <div class="info" v-loading="loading">
+                <div class="info-item">
+                    <span>标题:</span>
+                    <span>{{ form.title }}</span>
+                </div>
+                <div class="info-item">
+                    <span>状态:</span>
+                    <span>
+                        <dict-tag :options="todo_status" :value="form.status" />
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>优先级:</span>
+                    <span>
+                        <dict-tag :options="todo_priority" :value="form.priority" />
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>处理人:</span>
+                    <span>{{ form.assigneeName }}</span>
+                </div>
+                <div class="info-item">
+                    <span>预计完成时间:</span>
+                    <span v-if="form.startDate && form.dueDate">
+                        {{ form.startDate }} 至 {{ form.dueDate }}
+                    </span>
+                    <span class="color-danger" v-else>未设置</span>
+                </div>
+                <div class="info-item">
+                    <span>创建时间:</span>
+                    <span>{{ form.createTime }}</span>
+                </div>
+                <div class="info-item">
+                    <span>完成时间:</span>
+                    <span v-if="form.completedDate">{{ form.completedDate }}</span>
+                    <span class="color-danger" v-else>未完成</span>
+                </div>
+                <div class="info-item" style="grid-column: 1 / -1;">
+                    <span>描述:</span>
+                    <span v-html="form.description"></span>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="TodoRecordDetailDialog">
+import { useDict } from '/@/hooks/dict';
+import * as todoRecordApi from "/@/api/todo/todoRecord"
+
+const visible = ref(false)
+const loading = ref(false)
+
+const { todo_priority, todo_status } = useDict("todo_priority", "todo_status")
+
+const form = reactive<any>({
+    id: '',
+    title: '',
+    description: '',
+    status: '',
+    priority: '',
+    assigneeId: '',
+    assigneeName: '',
+    orgName: '',
+    startDate: '',
+    dueDate: '',
+    completedDate: '',
+    reminderTime: '',
+    remindChannel: '',
+    tags: '',
+    createTime: ''
+})
+
+const openDialog = (id: string) => {
+    visible.value = true
+    loading.value = true
+    todoRecordApi.getObj(id).then((res: any) => {
+        Object.assign(form, res.data)
+    }).finally(() => {
+        loading.value = false
+    })
+};
+
+defineExpose({
+    openDialog
+});
+</script>
+
+<style lang="scss" scoped>
+.info {
+    padding: 10px 20px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+
+    &-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        >span:first-child {
+            width: 40%;
+            color: #333;
+            font-size: 13px;
+            font-weight: 500;
+        }
+
+        >span:last-child {
+            flex: 1;
+            color: #666;
+            font-size: 13px;
+        }
+    }
+}
+
+.title {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 500;
+
+    &::before {
+        content: "";
+        display: block;
+        width: 4px;
+        height: 15px;
+        margin-right: 4px;
+        border-radius: 2px;
+        background: var(--el-color-primary);
+    }
+}
+
+.header {
+    width: 100%;
+    background: var(--el-color-white);
+    border: 1px solid var(--el-border-color-light, #ebeef5);
+    border-radius: 4px;
+}
+</style>
diff --git a/src/views/todo/todo-record/form.vue b/src/views/todo/todo-record/form.vue
index 38c2ba7..231248f 100755
--- a/src/views/todo/todo-record/form.vue
+++ b/src/views/todo/todo-record/form.vue
@@ -2,84 +2,31 @@
   <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
     <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
-        <el-col :span="12" class="mb20">
-          <el-form-item label="事项标题" prop="title">
-            <el-input v-model="form.title" placeholder="请输入事项标题" />
+        <el-col :span="24" class="mb20">
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="form.title" placeholder="请输入标题" />
           </el-form-item>
         </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="事项描述" prop="description">
-            <el-input v-model="form.description" placeholder="请输入事项描述" />
+        <el-col :span="24" class="mb20">
+          <el-form-item label="描述" prop="description">
+            <editor v-model:get-html="form.description" placeholder="请输入描述" />
           </el-form-item>
         </el-col>
-
         <el-col :span="12" class="mb20">
-          <el-form-item label="状态(pending|in_progress|completed|canceled)" prop="status">
-            <el-input v-model="form.status" placeholder="请输入状态(pending|in_progress|completed|canceled)" />
+          <el-form-item label="优先级" prop="priority">
+            <dict-select v-model="form.priority" defaultValue="1" :options="todo_priority" placeholder="请选择优先级" />
           </el-form-item>
         </el-col>
-
         <el-col :span="12" class="mb20">
-          <el-form-item label="优先级(high|medium|low)" prop="priority">
-            <el-input v-model="form.priority" placeholder="请输入优先级(high|medium|low)" />
+          <el-form-item label="处理人" prop="assigneeId">
+            <select-person v-model="form.assigneeId" placeholder="请选择处理人" />
           </el-form-item>
         </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="处理人ID" prop="assigneeId">
-            <el-input v-model="form.assigneeId" placeholder="请输入处理人ID" />
+        <el-col :span="24" class="mb20">
+          <el-form-item label="完成时间" prop="date">
+            <el-date-picker v-model="form.date" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
           </el-form-item>
         </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="处理人姓名" prop="assigneeName">
-            <el-input v-model="form.assigneeName" placeholder="请输入处理人姓名" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="所属组织" prop="orgName">
-            <el-input v-model="form.orgName" placeholder="请输入所属组织" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="开始时间" prop="startDate">
-            <el-input v-model="form.startDate" placeholder="请输入开始时间" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="截止时间" prop="dueDate">
-            <el-input v-model="form.dueDate" placeholder="请输入截止时间" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="完成时间" prop="completedDate">
-            <el-input v-model="form.completedDate" placeholder="请输入完成时间" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="提醒时间" prop="reminderTime">
-            <el-input v-model="form.reminderTime" placeholder="请输入提醒时间" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="提醒渠道(email|sms|app)" prop="remindChannel">
-            <el-input v-model="form.remindChannel" placeholder="请输入提醒渠道(email|sms|app)" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="标签(逗号分隔)" prop="tags">
-            <el-input v-model="form.tags" placeholder="请输入标签(逗号分隔)" />
-          </el-form-item>
-        </el-col>
-
       </el-row>
     </el-form>
     <template #footer>
@@ -103,9 +50,9 @@ const dataFormRef = ref();
 const visible = ref(false)
 const loading = ref(false)
 // 定义字典
-
+const { todo_priority } = useDict("todo_priority")
 // 提交表单数据
-const form = reactive({
+const form = reactive<any>({
   id: '',
   title: '',
   description: '',
@@ -114,16 +61,19 @@ const form = reactive({
   assigneeId: '',
   assigneeName: '',
   orgName: '',
-  startDate: '',
+  startDate: "",
   dueDate: '',
   completedDate: '',
   reminderTime: '',
   remindChannel: '',
   tags: '',
+  date: [],
 });
 
 // 定义校验规则
 const dataRules = ref({
+  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+  priority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
 })
 
 // 打开弹窗
@@ -134,6 +84,13 @@ const openDialog = (id: string) => {
   // 重置表单数据
   nextTick(() => {
     dataFormRef.value?.resetFields();
+    if (!id) {
+      const now = new Date();
+      const y = now.getFullYear();
+      const m = String(now.getMonth() + 1).padStart(2, '0');
+      const d = String(now.getDate()).padStart(2, '0');
+      form.date = [`${y}-${m}-${d} 00:00:00`, `${y}-${m}-${d} 23:23:23`];
+    }
   });
 
   // 获取todoRecord信息
@@ -150,7 +107,12 @@ const onSubmit = async () => {
 
   try {
     loading.value = true;
-    form.id ? await todoRecordApi.putObj(form) : await todoRecordApi.addObj(form);
+    const _params = { ...form }
+    if (_params.date && _params.date.length == 2) {
+      _params.startDate = _params.date[0]
+      _params.dueDate = _params.date[1]
+    }
+    form.id ? await todoRecordApi.putObj(_params) : await todoRecordApi.addObj(_params);
     useMessage().success(form.id ? '修改成功' : '添加成功');
     visible.value = false;
     emit('refresh');
@@ -177,4 +139,4 @@ const gettodoRecordData = (id: string) => {
 defineExpose({
   openDialog
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/todo/todo-record/index.vue b/src/views/todo/todo-record/index.vue
index 81aeaec..602864c 100755
--- a/src/views/todo/todo-record/index.vue
+++ b/src/views/todo/todo-record/index.vue
@@ -3,6 +3,33 @@
     <div class="layout-padding-auto layout-padding-view">
       <el-row>
         <div class="mb8" style="width: 100%">
+          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+            <el-form-item style="width: 250px;" label="标题" prop="title">
+              <el-input v-model="state.queryForm.title" placeholder="请输入标题" />
+            </el-form-item>
+            <el-form-item style="width: 250px;" label="状态" prop="status">
+              <dict-select v-model="state.queryForm.status" dict-type="todo_status" />
+            </el-form-item>
+            <el-form-item style="width: 250px;" label="优先级" prop="priority">
+              <dict-select v-model="state.queryForm.priority" dict-type="todo_priority" />
+            </el-form-item>
+            <el-form-item style="width: 480px;" label="代办创建时间" prop="createTimeList">
+              <el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange" />
+            </el-form-item>
+            <el-form-item style="width: 480px;" label="代办完成时间" prop="completedDateList">
+              <el-date-picker v-model="state.queryForm.completedDateList" value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange" />
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="search" type="primary" @click="getDataList">
+                {{ $t('common.queryBtn') }}
+              </el-button>
+              <el-button icon="Refresh" @click="resetQuery">
+                {{ $t('common.resetBtn') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
           <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
             v-auth="'admin_todoRecord_add'">
             新 增
@@ -20,25 +47,57 @@
         @sort-change="sortChangeHandle">
         <el-table-column type="selection" width="40" align="center" />
         <el-table-column type="index" label="#" width="40" />
-        <el-table-column prop="title" label="事项标题" show-overflow-tooltip />
-        <el-table-column prop="description" label="事项描述" show-overflow-tooltip />
-        <el-table-column prop="status" label="状态(pending|in_progress|completed|canceled)" show-overflow-tooltip />
-        <el-table-column prop="priority" label="优先级(high|medium|low)" show-overflow-tooltip />
-        <el-table-column prop="assigneeId" label="处理人ID" show-overflow-tooltip />
-        <el-table-column prop="assigneeName" label="处理人姓名" show-overflow-tooltip />
-        <el-table-column prop="orgName" label="所属组织" show-overflow-tooltip />
-        <el-table-column prop="startDate" label="开始时间" show-overflow-tooltip />
-        <el-table-column prop="dueDate" label="截止时间" show-overflow-tooltip />
-        <el-table-column prop="completedDate" label="完成时间" show-overflow-tooltip />
-        <el-table-column prop="reminderTime" label="提醒时间" show-overflow-tooltip />
-        <el-table-column prop="remindChannel" label="提醒渠道(email|sms|app)" show-overflow-tooltip />
-        <el-table-column prop="tags" label="标签(逗号分隔)" show-overflow-tooltip />
-        <el-table-column label="操作" width="150">
-          <template #default="scope">
-            <el-button icon="edit-pen" text type="primary" v-auth="'admin_todoRecord_edit'"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+        <el-table-column prop="title" label="标题" show-overflow-tooltip />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <dict-tag :options="todo_status" :value="row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="priority" label="优先级" width="100">
+          <template #default="{ row }">
+            <dict-tag :options="todo_priority" :value="row.priority" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="assigneeName" label="处理人" show-overflow-tooltip />
+        <el-table-column prop="startDate" label="预计完成时间" width="320">
+          <template #default="{ row }">
+            <div v-if="row.startDate && row.dueDate">
+              <span>{{ row.startDate }}</span>
+              <span> 至 </span>
+              <span>{{ row.dueDate }}</span>
+            </div>
+            <div class="color-danger" v-else>未设置</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column prop="completedDate" label="完成时间" width="180">
+          <template #default="{ row }">
+            <div v-if="row.completedDate">{{ row.completedDate }}</div>
+            <div class="color-danger" v-else>未完成</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="280">
+          <template #default="{ row }">
+            <el-button v-if="['1'].includes(row.status)" icon="VideoPlay" text type="primary"
+              v-auth="'admin_todoRecord_start'" @click="doStart(row)">
+              开始
+            </el-button>
+            <el-button v-if="['2', '4'].includes(row.status)" icon="CircleCheckFilled" text type="primary"
+              v-auth="'admin_todoRecord_done'" @click="doDone(row)">
+              完成
+            </el-button>
+            <el-button v-if="['3', '4'].includes(row.status)" icon="edit-pen" text type="primary"
+              v-auth="'admin_todoRecord_edit'" @click="formDialogRef.openDialog(row.id)">
+              编辑
+            </el-button>
+            <el-button v-if="!['3', '4'].includes(row.status)" icon="InfoFilled" text type="primary"
+              v-auth="'admin_todoRecord_edit'" @click="detailDialogRef.openDialog(row.id)">
+              详情
+            </el-button>
             <el-button icon="delete" text type="primary" v-auth="'admin_todoRecord_del'"
-              @click="handleDelete([scope.row.id])">删除</el-button>
+              @click="handleDelete([row.id])">
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -47,6 +106,7 @@
 
     <!-- 编辑、新增  -->
     <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <detail-dialog ref="detailDialogRef" />
 
   </div>
 </template>
@@ -59,10 +119,12 @@ import { useDict } from '/@/hooks/dict';
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const DetailDialog = defineAsyncComponent(() => import('./detail.vue'));
 // 定义查询字典
-
+const { todo_priority, todo_status } = useDict("todo_priority", "todo_status")
 // 定义变量内容
 const formDialogRef = ref()
+const detailDialogRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -121,4 +183,34 @@ const handleDelete = async (ids: string[]) => {
     useMessage().error(err.msg);
   }
 };
-</script>
\ No newline at end of file
+
+const doStart = async (row: any) => {
+  try {
+    await useMessageBox().confirm(`是否开始${row.title}?`);
+  } catch {
+    return;
+  }
+  try {
+    await todoRecordApi.start({ id: row.id })
+    getDataList();
+    useMessage().success('操作成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+}
+
+const doDone = async (row: any) => {
+  try {
+    await useMessageBox().confirm(`是否完成${row.title}?`);
+  } catch {
+    return;
+  }
+  try {
+    await todoRecordApi.done({ id: row.id })
+    getDataList();
+    useMessage().success('操作成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+}
+</script>