工时管家——移动端项目管理

fhKeeper/formulahousekeeper/timesheet_h5/src/main.js

@@ -11,10 +11,13 @@ import store from "./store/index";
 
 import "@/components/Vant";
 
-import { Form , Toast , Grid, GridItem , DatetimePicker , Picker , Dialog , NumberKeyboard , Sticky , Skeleton , Panel , Divider } from 'vant';
+import { Form , Toast , Grid, GridItem , DatetimePicker ,
+Picker , Dialog , NumberKeyboard , Sticky , Skeleton ,
+Panel , Divider , List , pullRefresh , SwipeCell } from 'vant';
+
 Vue.use(Form).use(Toast).use(Grid).use(GridItem).use(DatetimePicker)
 .use(Picker).use(Dialog).use(NumberKeyboard).use(Sticky).use(Skeleton)
-.use(Panel).use(Divider);
+.use(Panel).use(Divider).use(List).use(pullRefresh).use(SwipeCell);
 
 // rem
 import "amfe-flexible";

fhKeeper/formulahousekeeper/timesheet_h5/src/router/index.js

@@ -53,6 +53,13 @@ const router = new Router({
         },
         component: () => import("@/views/review/index")
     },
+    {
+        path: "/project",
+        meta: {
+            title: "项目管理"
+        },
+        component: () => import("@/views/project/index")
+    },
     {
         path: "/my",
         component: () => import("@/views/my/index"),

fhKeeper/formulahousekeeper/timesheet_h5/src/views/index/index.vue

@@ -6,7 +6,7 @@
             </van-swipe-item>
         </van-swipe>
         <van-grid :column-num="3">
-            <van-grid-item v-for="(item,index) in routers" v-show="index==2?user.role==2?false:true:true" :key="index" :icon="item.icon" :text="item.name" :to="item.url"/>
+            <van-grid-item v-for="(item,index) in routers" v-show="(index==2||index==3)?(user.role==0?false:true):true" :key="index" :icon="item.icon" :text="item.name" :to="item.url"/>
             </van-grid-item>
         </van-grid>
         <div class="tip">
@@ -45,6 +45,11 @@
                         url: '/review',
                         icon: 'todo-list-o'
                     },
+                    {
+                        name: '项目管理',
+                        url: '/project',
+                        icon: 'label-o'
+                    },
                     {
                         name: '暂无更多',
                         url: '',

fhKeeper/formulahousekeeper/timesheet_h5/src/views/project/index.vue

@@ -0,0 +1,208 @@
+<template>
+    <div>
+        <van-nav-bar title="项目管理" left-text="返回" @click-left="back" right-text="新增项目" @click-right="openDialog(-1)" fixed left-arrow/>
+        
+        <div class="login_form">
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :error.sync="error" error-text="请求失败，点击重新加载" @load="getProject">
+                    <van-swipe-cell v-for="(item,index) in list" :key="index">
+                        <van-cell :border="false" :title="item.projectName"/>
+                        <template slot="right">
+                            <van-button square type="info" text="编辑" @click="openDialog(index)"/>
+                            <van-button square type="danger" text="删除" @click="delPro(index)"/>
+                        </template>
+                    </van-swipe-cell>
+                </van-list>
+            </van-pull-refresh>
+
+            <van-dialog v-model="show" :title="title" show-cancel-button :beforeClose="chargeBtn">
+                <van-form style="margin: 0.4rem 0;">
+                    <van-field v-model="form.projectName" name="项目名称" label="项目名称" placeholder="请填写项目名称" :rules="[{ required: true, message: '请填写项目名称' }]"/>
+                </van-form>
+            </van-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                user: JSON.parse(sessionStorage.userInfo),
+                
+                total: 0,
+                page: 1,
+                size: 20,
+                list: [],
+                loading: false,
+                finished: false,
+                error: false,
+                refreshing: false,
+
+                show: false,
+                title: "标题",
+                form: {
+                    id: null,
+                    projectName: "",
+                }
+            };
+        },
+        created() {
+        },
+        methods: {
+            // 返回
+            back() {
+                history.back();
+            },
+
+            // 获取项目
+            getProject() {
+                if (this.refreshing) {
+                    this.list = [];
+                    this.refreshing = false;
+                }
+                if(this.total == this.list.length && this.list.length != 0) {
+                    this.loading = false;
+                    this.finished = true;
+                    return false;
+                }
+                this.$axios.post("/project/getProjectPage", {
+                    pageIndex: this.page,
+                    pageSize: this.size,
+                })
+                .then(res => {
+                    if(res.code == "ok") {
+                        this.loading = false;
+                        for(var i in res.data.records) {
+                            this.list.push(res.data.records[i])
+                        }
+                        this.total = res.data.total;
+                    } else {
+                        this.$toast.fail('获取失败');
+                    }
+                }).catch(err=> {toast.clear();});
+            },
+
+            onRefresh() {
+                this.finished = false;
+                this.loading = true;
+                this.page = 1;
+                this.getProject();
+            },
+
+            // 新增、编辑项目
+            openDialog(i) {
+                if(i == -1) {
+                    this.form = {
+                        id: null,
+                        projectName: "",
+                    }
+                } else {
+                    this.form = {
+                        id: this.list[i].id,
+                        projectName: this.list[i].projectName,
+                    }
+                }
+                this.show = true;
+            },
+
+            chargeBtn(action, done) {
+                if (action === 'confirm') {
+                    this.show = false;
+                    const toast = this.$toast.loading({
+                        forbidClick: true,
+                        duration: 0
+                    });
+                    let form = {
+                        name: this.form.projectName
+                    }
+                    if(this.form.id != null) {
+                        form.id = this.form.id;
+                    }
+                    this.$axios.post("/project/editProject", form)
+                    .then(res => {
+                        if(res.code == "ok") {
+                            toast.clear();
+                            this.$toast.success(this.form.id==null?'新增成功':'修改成功');
+                            this.list = [];
+                            this.page = 1;
+                            this.getProject();
+                        } else {
+                            toast.clear();
+                            this.$toast.fail(this.form.id==null?'新增失败':'修改失败');
+                        }
+                    }).catch(err=> {toast.clear();});
+                } else {
+                    this.show = false;
+                }
+                done();
+            },
+
+            // 删除项目
+            delPro(i) {
+                this.$dialog.confirm({
+                    title: '删除项目',
+                    message: '确定要项目'+this.list[i].projectName+'吗?'
+                }).then(() => {
+                    const toast = this.$toast.loading({
+                        forbidClick: true,
+                        duration: 0
+                    });
+                    this.$axios.post("/project/deleteProject", {id: this.list[i].id})
+                    .then(res => {
+                        if(res.code == "ok") {
+                            toast.clear();
+                            this.$toast.success('删除成功');
+                            this.list = [];
+                            this.page = 1;
+                            this.getProject();
+                        } else {
+                            toast.clear();
+                            this.$toast.fail('删除失败');
+                        }
+                    }).catch(err=> {toast.clear();});
+                }).catch(() => {});
+            },
+
+        },
+
+        mounted() {
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .login_form {
+        margin-top: 46px;
+    }
+
+    .one_report {
+        margin-bottom: 15px;
+    }
+
+    .form_text {
+        margin: 15px 0 30px;
+        padding: 0 12px;
+    }
+    
+    .form_btn {
+        text-align: right;
+    }
+
+    .form_btn button {
+        margin-left: 10px;
+    }
+
+    .one_report_data {
+        margin-bottom: 20px;
+        padding: 0 22px;
+        div {
+            line-height: 30px;
+        }
+    }
+</style>
+<style lang="less">
+    .van-nav-bar .van-icon , .van-nav-bar__text {
+        color: #20a0ff;
+    }
+</style>

fhKeeper/formulahousekeeper/timesheet_h5/src/views/review/index.vue

@@ -9,7 +9,7 @@
             <van-popup v-model="showPicker" position="bottom">
                 <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="changeTime" @cancel="showPicker = false"/>
             </van-popup>
-            <van-skeleton v-if="report.length!=0" v-for="(item,index) in report" title avatar :row="3" :loading="false">
+            <van-skeleton v-if="report.length!=0" v-for="(item,index) in report" :key="index" title avatar :row="3" :loading="false">
                 <van-panel class="one_report" :title="item.name" :status="item.state==0?'待审核':item.state==1?'已通过':'已驳回'">
                     <div class="form_text">
                         <span style="margin-right:20px;">
@@ -19,7 +19,7 @@
                         </span>
                         <span>系统智能统计：{{item.calculateTime}}h</span>
                     </div>
-                    <div v-for="(item1,index1) in item.data" class="one_report_data">
+                    <div v-for="(item1,index1) in item.data" :key="index1" class="one_report_data">
                         <div class="project_title">项目：{{item1.project}}</div>
                         <div class="project_time">时长：{{item1.time}}h</div>
                         <div class="project_content">事项：<span v-html="item1.content"></span></div>