我的待办列表

llj

2026-03-06 d5fb8aec3919e8b442b0d73535d4b62b08d78d77

我的待办列表

 components/ZWDB/HItem.vue

New file
@@ -0,0 +1,101 @@
<template>
    <li class="todo-item">
        <checkbox-group @change="onRadioChange" v-model="checkedIds">
            <label class="radio-option" v-for="(item, index) in todoItem" :key="item.HID" v-show="item.是否启用">
                <checkbox  @change="onCheckboxChange(item.HID)"/>
                <text class="item-text" >{{item.代码项目}}</text>
                <button class="delete-btn" @click="deleteItem(item)">删除</button>
            </label>
        </checkbox-group>
    </li>
</template>

<script>


export default {
    props: {
        todoItem: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            checkedIds: [] ,
        }
    },
    methods: {
        deleteItem(item)
        {
            uni.$emit("deleteItem", item.HID);
            console.log("删除项ID:", item.HID);
        },
    },
	
}
</script>

<style scoped>
.todo-item {
    list-style: none;           /* 去掉默认列表符号 */
    margin: 12px 0;             /* 上下间距 */
    padding: 0;                 /* 由内部元素控制内边距 */
    background-color: #fff;     /* 白色背景 */
    border-radius: 12px;        /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* 轻微阴影 */
    overflow: hidden;           /* 保证圆角裁剪内容 */
}

.radio-option {
    display: flex;              /* 弹性布局 */
    align-items: center;        /* 垂直居中 */
    padding: 14px 16px;         /* 内边距 */
    border-bottom: 1px solid #f0f0f0; /* 分割线（最后一项可去掉） */
    transition: background 0.2s;
}

.radio-option:last-child {
    border-bottom: none;        /* 最后一项去掉分割线 */
}

.radio-option:hover {
    background-color: #fafafa;  /* 悬停效果（仅H5） */
}

radio {
    transform: scale(0.9);      /* 适当缩小单选框（可选） */
    margin-right: 8px;           /* 与文字间距 */
}

.item-text {
    flex: 1;                    /* 占用剩余宽度，把按钮挤到右边 */
    font-size: 16px;
    color: #333;
    word-break: break-word;     /* 长文本换行 */
}

.delete-btn {
    background-color: #ff5a5f;   /* 红色删除按钮 */
    color: white;
    border: none;
    border-radius: 20px;         /* 胶囊样式 */
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(255, 90, 95, 0.3);
    transition: opacity 0.2s;
    cursor: pointer;             /* 鼠标手型（H5） */
}

.delete-btn:active {
    opacity: 0.7;                /* 点击反馈 */
}

/* 针对不同平台微调（可选） */
/* 微信小程序中 button 有默认样式，需要重置 */
button.delete-btn::after {
    border: none;
}
</style>我希望通过watch获取到所有勾选的HID

 components/ZWDB/HList.vue

New file
@@ -0,0 +1,48 @@
<template>
    <view class="todo-list">
        <ul>
            <HItem  :todoItem="todoList"/>
        </ul>
    </view>
</template>

<script>

import HItem from '../../components/ZWDB/HItem.vue';
export default {
    props: {
        todoList: {
            type: Array,
            default: () => []
        }
    },
    components: {
        HItem
    },
    data() {
        return {
        }
    },
    methods: {
        addMission() {
			
        }
    }
}
</script>

<style scoped>
.todo-list {
  padding: 20px;
  background: #fafafa;
  border-top: 1px solid #e5e5e5;
}
.todo-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.todo-list li {
  margin-bottom: 5px;
}
</style>

 components/ZWDB/Header.vue

New file
@@ -0,0 +1,51 @@
<template>
  <view class="form">
    <input 
      type="text" 
      placeholder="请输入内容，按下回车确认" 
      v-model="inputValue"
      @confirm="addMission"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      ContentID: 0,
      inputValue: ''   
    }
  },
  methods: {
    addMission(event) {
      const value = this.inputValue.trim();
      if (value === '') {
        uni.showToast({
          title: '请输入内容',
          icon: 'none'
        });
        return;
      }
      this.inputValue = '';      
      this.$emit("missionAdded", value);
    }
  }
}
</script>

<style scoped>
.form {
  background: #f7f7f7;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.form input {
  width: 90%;
  padding: 8px;
  /* box-sizing: border-box; */
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

 components/ZWDB/Hfooter.vue

New file
@@ -0,0 +1,36 @@
<template>
    <view class="todo-footer">
    <radio-group>

            <radio />
            <span><span>已完成{{ completedCount }}</span>/总共{{ total }}</span>
            <button @click="clearAllobj">清除已完成</button>

    </radio-group>
    </view>
</template>

<script>
export default {
    data() {
        return {
            completedCount: 0,
            total: 0,
        }
    },
    computed: {
        // completedCount() {
        //     return this.todoList.filter(item => item.completed).length;
        // },
        // total() {
        //     return this.todoList.length;
        // }
    },
    methods: {
		
    }
}
</script>

<style>
</style>

 pages.json

@@ -1916,6 +1916,13 @@
            {
                "navigationBarTitleText" : "器具维修入库单"
            }
        },
        {
            "path" : "pages/ziwodaiban/todoMain",
            "style" : 
            {
                "navigationBarTitleText" : "我的待办列表"
            }
        }
    ],
    "tabBar": {

 pages/index/mine.vue

@@ -71,6 +71,12 @@
                  text:'我的工资（预估）',
                  url:'/pages/gongxuOut/moneystatistics',
                  id:4
              },
              {
                  img:'../../static/icon05.png',
                  text:'我的待办',
                  url:'/pages/ziwodaiban/todoMain',
                  id:5
              }
              ]
            }

 pages/ziwodaiban/todoMain.vue

New file
@@ -0,0 +1,173 @@
<template >
    <view class="form" id="todoMain">
        <Header @missionAdded="onMissionAdded"></Header>

        <HList :todoList="contentList"></HList>
        <Hfooter></Hfooter>
    </view>
</template>

<script>
    import getDateTime from '@/utils/getdateTime.js';
    import {
        getUserInfo
    } from "@/utils/auth.js";
    import {
        CommonUtils
    } from '@/utils/common';
import Header from '../../components/ZWDB/Header.vue';
import Hfooter from '../../components/ZWDB/Hfooter.vue';
import HList from '../../components/ZWDB/HList.vue';
export default {
    components: {
        Header,
        Hfooter,
        HList
    },
    data() {
        return {
            userInfo: null,
            // dateTime: getDateTime(),
            todoList: [],
            contentList: [],
            loading: false,
            empty: false,
            HForm:{
                HID:0,
                代码项目:'',
                是否禁用:0,
                是否启用:1,
                是否可编辑:1,
            }
        }
    },
    onLoad() {
        this.userInfo = getUserInfo();
        this.getTodoList();
    },
    methods: {
        getTodoList() {
            this.loading = true;
            let res = CommonUtils.doRequest2Sync({
                                url: '/ZWDBController/GetLIST',
                                data: {
                                    user: localStorage.getItem('HUserName'),
                                    OrgIDs: 100038
                                },
                            }).then(res => {
                this.loading = false;
                if (res.data.code === "1") {
                    this.todoList = res.data.data || [];
                    this.contentList=this.todoList.map(element => {
                        return {
                            HID: element.HItemID,
                            代码项目: element.代码项目,
                            是否启用: element.是否启用,
                            是否可编辑: element.是否可编辑,
                            是否禁用: element.是否禁用,
                        };
                    });
                    this.empty = this.todoList.length === 0;
					
					
                    console.log(this.contentList);
                } else {
                    uni.showToast({
                                title: '接口请求失败',
                                icon: 'none'
                            })
                }
            }).catch(() => {
                this.loading = false;
                uni.showToast({
                                title: '接口请求失败',
                                icon: 'none'
                            })
            });
		
        },
         onMissionAdded(inputValue) {
            let res= CommonUtils.doRequest2Sync({
                url: '/ZWDBController/insertTODOS',
				
                data: {
                    user: localStorage.getItem('HUserName'),
                    contents: inputValue
                    },
				
            }).then(res => {
                this.loading = false;
                if (res.data.code === "1") {
                    this.ContentID = res.data.data.HItemID;
                    uni.showToast({
                        title: '添加成功',
                        icon: 'success'
                    });
                    this.getTodoList();
                } else {
                    uni.showToast({
                        title: '接口请求失败',
                        icon: 'none'
                    })
                }
            }).catch(() => {
                this.loading = false;
                uni.showToast({
                        title: '接口请求失败',
                        icon: 'none'
                    })
            });
		
        },
        deleteMission(deleteID) {
            let res= CommonUtils.doRequest2Sync({
                url: '/ZWDBController/deleteTODOS',
                data: {
                    user: localStorage.getItem('HUserName'),
                    HID: deleteID
                    },
				
            }).then(res => {
                this.loading = false;
                if (res.data.code === "1") {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success'
                    });
                    this.getTodoList();
                } else {
                    uni.showToast({
                        title: '接口请求失败',
                        icon: 'none'
                    })
                }
            }).catch(() => {
                this.loading = false;
                uni.showToast({
                        title: '接口请求失败',
                        icon: 'none'
                    })
            });
            console.log("删除项ID:", deleteID);
        },
        itemChanged(checkedID)
        {

            console.log("状态变化项ID:", checkedID);
        }

    },
    mounted() {
        uni.$on("deleteItem", this.deleteMission);
        uni.$on("changeItem", this.itemChanged);
    },
    beforeDestroy() {
        uni.$off("deleteItem", this.deleteMission);
        uni.$off("changeItem", this.itemChanged);
    },
}
</script>

<style>
	
</style>