优化前端代码

resources/assets/js/pages/manage.vue

@@ -187,7 +187,7 @@
         <DrawerOverlay
             v-model="allUserShow"
             placement="right"
-            :size="900">
+            :size="1100">
             <TeamManagement v-if="allUserShow"/>
         </DrawerOverlay>
 
@@ -195,7 +195,7 @@
         <DrawerOverlay
             v-model="allProjectShow"
             placement="right"
-            :size="900">
+            :size="1100">
             <ProjectManagement v-if="allProjectShow"/>
         </DrawerOverlay>
 
@@ -203,7 +203,7 @@
         <DrawerOverlay
             v-model="archivedProjectShow"
             placement="right"
-            :size="900">
+            :size="1100">
             <ProjectArchived v-if="archivedProjectShow"/>
         </DrawerOverlay>
 

resources/assets/js/pages/manage/components/ProjectArchived.vue

@@ -7,7 +7,7 @@
                 <Icon v-else type="ios-refresh" @click="refresh"/>
             </div>
         </div>
-        <div class="search-container auto">
+        <div class="search-container lr">
             <ul>
                 <li>
                     <div class="search-label">

resources/assets/js/pages/manage/components/ProjectManagement.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="project-management">
         <div class="management-title">{{$L('所有项目')}}</div>
-        <div class="search-container auto">
+        <div class="search-container lr">
             <ul>
                 <li>
                     <div class="search-label">

resources/assets/js/pages/manage/components/Report.vue

@@ -38,6 +38,7 @@ export default {
         DrawerOverlay,
         ReportEdit, ReportMy, ReportReceive, ReportDetail
     },
+
     props: {
         reportUnreadNumber: {
             type: Number,
@@ -47,6 +48,7 @@ export default {
             default: "my"
         }
     },
+
     data() {
         return {
             reportTabs: "my",
@@ -56,20 +58,27 @@ export default {
             reportId: 0
         }
     },
+
     mounted() {
         this.reportTabs = this.reportType;
     },
+
     methods: {
-        tabRebder(data) {
+        tabRebder(num) {
             return h => {
-                if (data > 0) {
+                if (num > 0) {
                     return h('div', [
                         h('span', {class: 'navbar-item-content'}, this.$L('收到的汇报')),
-                        h('Badge', {class: 'manage-box-report'}, data),
+                        h('Badge', {
+                            class: 'manage-box-report',
+                            props: {
+                                count: num
+                            }
+                        }),
                     ])
                 } else {
                     return h('div', [
-                        h('span', {class: 'navbar-item-content'},  this.$L('收到的汇报')),
+                        h('span', {class: 'navbar-item-content'}, this.$L('收到的汇报')),
                     ])
                 }
             }
@@ -83,10 +92,12 @@ export default {
                 this.$emit("read");
             }, 1500);
         },
+
         editReport(id) {
             this.reportId = id;
             this.showEditDrawer = true;
         },
+
         saveSuccess() {
             this.reportId = 0;
             this.reportTabs = "my";

resources/assets/js/pages/manage/components/ReportDetail.vue

@@ -1,12 +1,13 @@
 <template>
-
     <div class="report-detail">
         <div class="report-title">{{ data.title }}</div>
         <div class="report-detail-context">
             <div class="report-profile">
                 <Row>
                     <Col span="2">
-                        <div class="report-submitter"><p>{{ $L('汇报人') }} </p></div>
+                        <div class="report-submitter">
+                            <p>{{ $L('汇报人') }}</p>
+                        </div>
                     </Col>
                     <Col span="6">
                         <div class="report-submitter">
@@ -14,7 +15,9 @@
                         </div>
                     </Col>
                     <Col span="2">
-                        <div class="report-submitter"> <p>{{ $L('提交时间') }}</p></div>
+                        <div class="report-submitter">
+                            <p>{{ $L('提交时间') }}</p>
+                        </div>
                     </Col>
                     <Col span="6">
                         <div class="report-submitter">
@@ -22,26 +25,28 @@
                         </div>
                     </Col>
                     <Col span="2">
-                        <div class="report-submitter"><p>{{ $L('汇报对象') }}</p></div>
+                        <div class="report-submitter">
+                            <p>{{ $L('汇报对象') }}</p>
+                        </div>
                     </Col>
                     <Col span="6">
                         <div class="report-submitter">
-                            <UserAvatar v-for="item in data.receives_user" :key="item" :userid="item.userid" :size="28"/>
+                            <UserAvatar v-for="item in data.receives_user" :key="item.userid" :userid="item.userid" :size="28"/>
                         </div>
                     </Col>
                 </Row>
             </div>
             <Row class="report-main">
                 <Col span="2">
-                    <div class="report-submitter"><p>{{ $L('汇报内容') }}</p></div>
+                    <div class="report-submitter">
+                        <p>{{ $L('汇报内容') }}</p>
+                    </div>
                 </Col>
                 <Col span="22">
-                    <div class="report-content" v-html="data.content">
+                    <div class="report-content" v-html="data.content"></div>
-                    </div>
                 </Col>
             </Row>
         </div>
-
     </div>
 </template>
 
@@ -55,7 +60,6 @@ export default {
     },
     mounted() {
         if (this.data.id > 0) this.sendRead();
-        // console.log(this.data)
     },
     watch: {
         data() {

resources/assets/js/pages/manage/components/ReportEdit.vue

@@ -1,7 +1,9 @@
 <template>
     <Form class="report-box" label-position="top" @submit.native.prevent>
-        <Row class="report-row report-row-header" >
+        <Row class="report-row">
-            <Col span="2"><p class="report-titles">{{ $L("汇报类型") }}</p></Col>
+            <Col span="2">
+                <p class="report-titles">{{ $L("汇报类型") }}</p>
+            </Col>
             <Col span="12">
                 <RadioGroup type="button" button-style="solid" v-model="reportData.type" @on-change="typeChange" class="report-radiogroup" :readonly="id > 0">
                     <Radio label="weekly" :disabled="id > 0">{{ $L("周报") }}</Radio>
@@ -9,27 +11,31 @@
                 </RadioGroup>
                 <ButtonGroup class="report-buttongroup">
                     <Tooltip class="report-poptip" trigger="hover" :disabled="id > 0" :content="prevCycleText" placement="bottom">
-                        <Button  type="primary" @click="prevCycle" :disabled="id > 0">
+                        <Button type="primary" @click="prevCycle" :disabled="id > 0">
                             <Icon type="ios-arrow-back" />
                         </Button>
                     </Tooltip>
-                    <div class="report-buttongroup-shu"></div>
+                    <div class="report-buttongroup-vertical"></div>
                     <Tooltip class="report-poptip" trigger="hover" :disabled="reportData.offset >= 0 || id > 0" :content="nextCycleText" placement="bottom">
-                        <Button  type="primary" @click="nextCycle" :disabled="reportData.offset >= 0 || id > 0">
+                        <Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0 || id > 0">
                             <Icon type="ios-arrow-forward" />
                         </Button>
                     </Tooltip>
                 </ButtonGroup>
             </Col>
         </Row>
-        <Row class="report-row report-row-header">
+        <Row class="report-row">
-            <Col span="2"><p class="report-titles">{{ $L("汇报名称") }}</p></Col>
+            <Col span="2">
+                <p class="report-titles">{{ $L("汇报名称") }}</p>
+            </Col>
             <Col span="22">
-                <Input v-model="reportData.title" disabled placeholder=""></Input>
+                <Input v-model="reportData.title" disabled/>
             </Col>
         </Row>
-        <Row class="report-row report-row-header">
+        <Row class="report-row">
-            <Col span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
+            <Col span="2">
+                <p class="report-titles">{{ $L("汇报对象") }}</p>
+            </Col>
             <Col span="22">
                 <div class="report-users">
                     <UserInput
@@ -37,12 +43,16 @@
                         v-model="reportData.receive"
                         :disabledChoice="[userId]"
                         :placeholder="$L('选择接收人')" />
-                    <a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a>
+                    <a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter">
+                        <Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}
+                    </a>
                 </div>
             </Col>
         </Row>
         <Row class="report-row report-row-content">
-            <Col span="2"><p class="report-titles">{{ $L("汇报内容") }}</p></Col>
+            <Col span="2">
+                <p class="report-titles">{{ $L("汇报内容") }}</p>
+            </Col>
             <Col span="22">
                 <FormItem class="report-row-content-editor">
                     <TEditor v-model="reportData.content" height="100%"/>
@@ -52,9 +62,7 @@
         <Row class="report-row report-row-foot">
             <Col span="2"></Col>
             <Col span="4">
-                <FormItem>
+                <Button type="primary" @click="handleSubmit" class="report-bottom">提交</Button>
-                    <Button type="primary" @click="handleSubmit" class="report-bottom">提交</Button>
-                </FormItem>
             </Col>
         </Row>
     </Form>
@@ -109,6 +117,7 @@ export default {
             this.prevCycleText = this.$L("上一周");
             this.nextCycleText = this.$L("下一周");
         },
+
         handleSubmit: function () {
             let id = this.reportData.id;
             if (this.id === 0 && id > 1) {
@@ -116,6 +125,7 @@ export default {
                     title: '覆盖提交',
                     content: '是否覆盖提交',
                     loading: true,
+                    zIndex: 2000,
                     onOk: () => {
                         this.doSubmit();
                     }
@@ -125,6 +135,7 @@ export default {
             }
 
         },
+
         doSubmit() {
             this.$store.dispatch("call", {
                 url: 'report/store',
@@ -144,6 +155,7 @@ export default {
                 $A.messageError(msg);
             });
         },
+
         getTemplate() {
             this.$store.dispatch("call", {
                 url: 'report/template',
@@ -166,6 +178,7 @@ export default {
                 $A.messageError(msg);
             });
         },
+
         typeChange(value) {
             // 切换汇报类型后偏移量归零
             this.reportData.offset = 0;
@@ -180,6 +193,7 @@ export default {
             if (this.id <= 0)
                 this.getTemplate();
         },
+
         getDetail(reportId) {
             this.userInputShow = false;
             this.$store.dispatch("call", {
@@ -204,12 +218,14 @@ export default {
                 this.userInputShow = true;
             });
         },
+
         prevCycle() {
             this.reportData.offset -= 1;
             this.disabledType = false;
             this.reReportData();
             this.getTemplate();
         },
+
         nextCycle() {
             // 周期偏移量不允许大于0
             if ( this.reportData.offset < 0 ) {
@@ -219,6 +235,7 @@ export default {
             this.reReportData();
             this.getTemplate();
         },
+
         // 获取上一次接收人
         getLastSubmitter() {
             this.userInputShow = false;
@@ -236,6 +253,7 @@ export default {
                 this.userInputShow = true;
             });
         },
+
         reReportData() {
             this.reportData.title = "";
             this.reportData.content = "";

resources/assets/js/pages/manage/components/ReportMy.vue

@@ -1,39 +1,71 @@
 <template>
     <div class="report-list-wrap">
-        <Row class="reportmy-row report-row-header">
+        <div class="search-expand">
-            <Col  span="3"><Button type="primary" @click="addReport">{{ $L("新增报告") }}</Button></Col>
+            <div class="search-container lr">
-            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报类型") }}</p></Col>
+                <ul>
-            <Col span="5">
+                    <li>
-                <Select
+                        <div class="search-label">
-                    v-model="reportType"
+                            {{ $L("汇报类型") }}
-                    style="width:95%"
+                        </div>
-                    :placeholder="this.$L('全部')"
+                        <div class="search-content">
-                    @on-change="typePick"
+                            <Select
-                >
+                                v-model="reportType"
-                    <Option v-for="item in reportTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                                :placeholder="$L('全部')">
-                </Select>
+                                <Option v-for="item in reportTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-            </Col>
+                            </Select>
-            <Col  span="1"></Col>
+                        </div>
-            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报时间") }}</p></Col>
+                    </li>
-            <Col span="6">
+                    <li>
-                <DatePicker
+                        <div class="search-label">
-                    type="daterange"
+                            {{ $L("汇报时间") }}
-                    split-panels
+                        </div>
-                    :placeholder="this.$L('请选择时间')"
+                        <div class="search-content">
-                    style="width: 95%;"
+                            <DatePicker
-                    @on-change="timePick"
+                                v-model="createAt"
-                ></DatePicker>
+                                type="daterange"
-            </Col>
+                                split-panels
-            <Col  span="1"></Col>
+                                :placeholder="$L('请选择时间')"/>
-            <Col  span="4"><Button type="primary" icon="ios-search" @click="searchTab">{{ $L("搜索") }}</Button></Col>
+                        </div>
-        </Row>
+                    </li>
-        <Table class="tableFill report-row-content" ref="tableRef"
+                    <li class="search-button">
-               :columns="columns" :data="lists"
+                        <Tooltip
-               :loading="loadIng > 0"
+                            theme="light"
-               :no-data-text="$L(noDataText)" stripe></Table>
+                            placement="right"
-        <Page class="page-box report-row-foot" :total="listTotal" :current="listPage" :disabled="loadIng > 0"
+                            transfer-class-name="search-button-clear"
-              @on-change="setPage" @on-page-size-change="setPageSize" :page-size-opts="[10,20,30,50,100]"
+                            transfer>
-              placement="top" show-elevator show-sizer show-total transfer />
+                            <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="searchTab">{{$L('搜索')}}</Button>
+                            <div slot="content">
+                                <Button :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
+                            </div>
+                        </Tooltip>
+                    </li>
+                </ul>
+            </div>
+            <div class="expand-button-group">
+                <Button type="primary" icon="md-add" @click="addReport">{{ $L("新增报告") }}</Button>
+            </div>
+        </div>
+
+        <Table
+            class="tableFill report-row-content"
+            ref="tableRef"
+            :columns="columns" :data="lists"
+            :loading="loadIng > 0"
+            :no-data-text="$L(noDataText)"
+            stripe/>
+        <Page
+            class="page-box report-row-foot"
+            :total="listTotal"
+            :current="listPage"
+            :disabled="loadIng > 0"
+            @on-change="setPage"
+            @on-page-size-change="setPageSize"
+            :page-size-opts="[10,20,30,50,100]"
+            placement="top"
+            show-elevator
+            show-sizer
+            show-total
+            transfer/>
     </div>
 </template>
 
@@ -50,12 +82,8 @@ export default {
             listPageSize: 10,
             noDataText: "",
             createAt: [],
-            reportType:'',
+            reportType: '',
-            reportTypeList:[
+            reportTypeList: [],
-                {value:"",label:'全部' },
-                {value:"weekly",label:'周报' },
-                {value:"daily",label:'日报' },
-            ],
         }
     },
     mounted() {
@@ -65,37 +93,37 @@ export default {
         initLanguage() {
             this.noDataText = this.noDataText || "数据加载中.....";
             this.columns = [{
-                "title": this.$L("名称"),
+                title: this.$L("名称"),
-                "key": 'title',
+                key: 'title',
-                "sortable": true,
+                sortable: true,
-                "minWidth": 120,
+                minWidth: 120,
             }, {
-                "title": this.$L("类型"),
+                title: this.$L("类型"),
-                "key": 'type',
+                key: 'type',
-                "align": 'center',
+                align: 'center',
-                "sortable": true,
+                sortable: true,
-                "maxWidth": 80,
+                maxWidth: 80,
             }, {
-                "title": this.$L("汇报时间"),
+                title: this.$L("汇报时间"),
-                "key": 'created_at',
+                key: 'created_at',
-                "align": 'center',
+                align: 'center',
-                "sortable": true,
+                sortable: true,
-                "maxWidth": 180,
+                maxWidth: 180,
             }, {
-                "title": "操作",
+                title: this.$L("操作"),
-                "key": 'action',
+                align: 'center',
-                "align": 'right',
+                width: 100,
-                "width": 80,
+                minWidth: 100,
                 render: (h, params) => {
                     if (!params.row.id) {
                         return null;
                     }
-                    let arr = [
+                    const vNodes = [
                         h('ETooltip', {
-                            props: { content: this.$L('编辑'), transfer: true, delay: 600 }
+                            props: {content: this.$L('编辑'), transfer: true, delay: 600}
                         }, [h('Icon', {
-                            props: { type: 'md-create', size: 16 },
+                            props: {type: 'md-create', size: 16},
-                            style: { margin: '0 3px', cursor: 'pointer' },
+                            style: {margin: '0 3px', cursor: 'pointer'},
                             on: {
                                 click: () => {
                                     this.$emit("edit", params.row.id);
@@ -103,11 +131,11 @@ export default {
                             }
                         })]),
                         h('ETooltip', {
-                            props: { content: this.$L('查看'), transfer: true, delay: 600 },
+                            props: {content: this.$L('查看'), transfer: true, delay: 600},
-                            style: { position: 'relative' },
+                            style: {position: 'relative', marginLeft: '6px'},
                         }, [h('Icon', {
-                            props: { type: 'md-eye', size: 16 },
+                            props: {type: 'md-eye', size: 16},
-                            style: { margin: '0 3px', cursor: 'pointer' },
+                            style: {margin: '0 3px', cursor: 'pointer'},
                             on: {
                                 click: () => {
                                     this.$emit("detail", params.row);
@@ -115,10 +143,20 @@ export default {
                             }
                         })]),
                     ];
-                    return h('div', arr);
+                    return h('TableAction', {
+                        props: {
+                            column: params.column
+                        }
+                    }, vNodes);
                 },
             }];
+            this.reportTypeList = [
+                {value: "", label: this.$L('全部')},
+                {value: "weekly", label: this.$L('周报')},
+                {value: "daily", label: this.$L('日报')},
+            ]
         },
+
         getLists() {
             this.loadIng = 1;
             this.$store.dispatch("call", {
@@ -134,34 +172,29 @@ export default {
                 // data 结果数据
                 this.lists = data.data;
                 this.listTotal = data.total;
-                if ( this.lists.length <= 0 ) {
+                if (this.lists.length <= 0) {
                     this.noDataText = this.$L("无数据");
                 }
                 // msg 结果描述
             }).catch(({msg}) => {
                 // msg 错误原因
                 $A.messageError(msg);
-            }).finally( () => {
+            }).finally(() => {
                 this.loadIng = 0;
-            } );
+            });
         },
+
         setPage(page) {
             this.listPage = page;
             this.getLists();
         },
+
         setPageSize(size) {
             if (Math.max($A.runNum(this.listPageSize), 10) !== size) {
                 this.listPageSize = size;
                 this.getLists();
             }
         },
-        timePick(e){
-            // console.log(e)
-            this.createAt = e;
-        },
-        typePick(e){
-            // console.log(e)
-        },
 
         searchTab() {
             this.getLists();

resources/assets/js/pages/manage/components/ReportReceive.vue

@@ -1,47 +1,80 @@
 <template>
     <div class="report-list-wrap">
-        <Row class="reportmy-row report-row-header">
+        <div class="search-container lr">
-            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报人") }}</p></Col>
+            <ul>
-            <Col span="4">
+                <li>
-                <Input style="width:100%" v-model="username" :placeholder="$L('请输入用户名')"/>
+                    <div class="search-label">
-            </Col>
+                        {{ $L("汇报人") }}
-            <Col  span="1"></Col>
+                    </div>
-            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报类型") }}</p></Col>
+                    <div class="search-content">
-            <Col span="4">
+                        <Input v-model="username" :placeholder="$L('请输入用户名')"/>
-                <Select
+                    </div>
-                    v-model="reportType"
+                </li>
-                    style="width:100%"
+                <li>
-                    :placeholder="this.$L('全部')"
+                    <div class="search-label">
-                    @on-change="typePick"
+                        {{ $L("汇报类型") }}
-                >
+                    </div>
-                    <Option v-for="item in reportTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                    <div class="search-content">
-                </Select>
+                        <Select
-            </Col>
+                            v-model="reportType"
-            <Col  span="1"></Col>
+                            :placeholder="$L('全部')">
-            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报时间") }}</p></Col>
+                            <Option v-for="item in reportTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-            <Col span='4'>
+                        </Select>
-                <DatePicker
+                    </div>
-                    type="daterange"
+                </li>
-                    split-panels
+                <li>
-                    :placeholder="this.$L('请选择时间')"
+                    <div class="search-label">
-                    style="width: 100%;"
+                        {{ $L("汇报时间") }}
-                    @on-change="timePick"
+                    </div>
-                ></DatePicker>
+                    <div class="search-content">
-            </Col>
+                        <DatePicker
-            <Col  span="1"></Col>
+                            v-model="createAt"
-            <Col  span="3"><Button type="primary" icon="ios-search" @click="searchTab">{{ $L("搜索") }}</Button></Col>
+                            type="daterange"
-        </Row>
+                            split-panels
-        <Table class="tableFill report-row-content" ref="tableRef"
+                            :placeholder="$L('请选择时间')"/>
-               :columns="columns" :data="lists"
+                    </div>
-               :loading="loadIng > 0"
+                </li>
-               :no-data-text="$L(noDataText)" stripe></Table>
+                <li class="search-button">
-        <Page class="page-box report-row-foot" :total="listTotal" :current="listPage" :disabled="loadIng > 0"
+                    <Tooltip
-              @on-change="setPage" @on-page-size-change="setPageSize" :page-size-opts="[10,20,30,50,100]"
+                        theme="light"
-              placement="top" show-elevator show-sizer show-total transfer />
+                        placement="right"
+                        transfer-class-name="search-button-clear"
+                        transfer>
+                        <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="searchTab">{{$L('搜索')}}</Button>
+                        <div slot="content">
+                            <Button :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
+                        </div>
+                    </Tooltip>
+                </li>
+            </ul>
+        </div>
+
+        <Table
+            class="tableFill report-row-content"
+            ref="tableRef"
+            :columns="columns" :data="lists"
+            :loading="loadIng > 0"
+            :no-data-text="$L(noDataText)"
+            stripe/>
+        <Page
+            class="page-box report-row-foot"
+            :total="listTotal"
+            :current="listPage"
+            :disabled="loadIng > 0"
+            @on-change="setPage"
+            @on-page-size-change="setPageSize"
+            :page-size-opts="[10,20,30,50,100]"
+            placement="top"
+            show-elevator
+            show-sizer
+            show-total
+            transfer/>
     </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
     name: "ReportReceive",
     data() {
@@ -57,16 +90,15 @@ export default {
             username: '',
             reportType: '',
             createAt: [],
-            reportTypeList: [
+            reportTypeList: [],
-                {value: "", label: '全部'},
-                {value: "weekly", label: '周报'},
-                {value: "daily", label: '日报'},
-            ],
         }
     },
     mounted() {
         this.getLists();
     },
+    computed: {
+        ...mapState(['userId'])
+    },
     methods: {
         initLanguage() {
             this.noDataText = this.noDataText || "数据加载中.....";
@@ -77,7 +109,8 @@ export default {
                 "minWidth": 120,
                 render: (h, params) => {
                     let arr = []
-                    if (params.row.receives_user[0].pivot.read == 0) {
+                    const myUser = params.row.receives_user.find(({userid}) => userid == this.userId)
+                    if (myUser && myUser.pivot.read == 0) {
                         arr.push(
                             h('Tag', {
                                 props: {   //传递参数
@@ -107,15 +140,15 @@ export default {
                 "sortable": true,
                 "maxWidth": 180,
             }, {
-                "title": " ",
+                title: this.$L("操作"),
-                "key": 'action',
+                align: 'center',
-                "align": 'right',
+                width: 100,
-                "width": 40,
+                minWidth: 100,
                 render: (h, params) => {
                     if (!params.row.id) {
                         return null;
                     }
-                    let arr = [
+                    const vNodes = [
                         h('ETooltip', {
                             props: {content: this.$L('查看'), transfer: true, delay: 600},
                             style: {position: 'relative'},
@@ -125,14 +158,26 @@ export default {
                             on: {
                                 click: () => {
                                     this.$emit("detail", params.row)
-                                    this.lists[params.index].receives_user[0].pivot.read = 1
+                                    const myUser = params.row.receives_user.find(({userid}) => userid == this.userId)
+                                    if (myUser) {
+                                        this.$set(myUser, 'pivot.read', 1)
+                                    }
                                 }
                             }
                         })])
                     ];
-                    return h('div', arr);
+                    return h('TableAction', {
+                        props: {
+                            column: params.column
+                        }
+                    }, vNodes);
                 },
             }];
+            this.reportTypeList = [
+                {value: "", label: this.$L('全部')},
+                {value: "weekly", label: this.$L('周报')},
+                {value: "daily", label: this.$L('日报')},
+            ]
         },
 
         getLists() {
@@ -162,10 +207,12 @@ export default {
                 this.loadIng = 0;
             });
         },
+
         setPage(page) {
             this.listPage = page;
             this.getLists();
         },
+
         setPageSize(size) {
             if (Math.max($A.runNum(this.listPageSize), 10) !== size) {
                 this.listPageSize = size;
@@ -173,12 +220,6 @@ export default {
             }
         },
 
-        timePick(e) {
-            this.createAt = e;
-        },
-        typePick(e) {
-            // console.log(e)
-        },
         searchTab() {
             this.getLists();
         },

resources/assets/js/pages/manage/components/TaskArchived.vue

@@ -7,7 +7,7 @@
                 <Icon v-else type="ios-refresh" @click="refresh"/>
             </div>
         </div>
-        <div class="search-container auto">
+        <div class="search-container lr">
             <ul>
                 <li>
                     <div class="search-label">

resources/assets/js/pages/manage/components/TeamManagement.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="team-management">
         <div class="management-title">{{$L('团队管理')}}</div>
-        <div class="search-container">
+        <div class="search-container lr">
             <ul>
                 <li>
                     <div class="search-label">

resources/assets/sass/components/report.scss

@@ -11,7 +11,7 @@
         flex-direction: column;
         position: absolute;
 
-        .report-row-header, .report-row-foot {
+        .report-row-foot {
             flex: 0 0 auto;
         }
 
@@ -29,31 +29,9 @@
         }
     }
     .manage-box-report{
-        font-family: "Monospaced Number";
+        margin-left: 4px;
-        line-height: 1;
+        transform: scale(0.8);
-        vertical-align: middle;
+        vertical-align: top;
-        position: absolute;
-        -webkit-transform: translateX(50%);
-        -ms-transform: translateX(50%);
-        transform: translateX(50%);
-        right: 0;
-        height: 20px;
-        border-radius: 10px;
-        min-width: 20px;
-        background: #ed4014;
-        border: 1px solid transparent;
-        color: #fff;
-        line-height: 18px;
-        text-align: center;
-        padding: 0 6px;
-        font-size: 12px;
-        white-space: nowrap;
-        -webkit-transform-origin: -10% center;
-        -ms-transform-origin: -10% center;
-        transform-origin: -10% center;
-        z-index: 10;
-        -webkit-box-shadow: 0 0 0 1px #fff;
-        box-shadow: 0 0 0 1px #fff;
     }
 
     .page-box {
@@ -85,7 +63,12 @@
 }
 
 .report-detail {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
     .report-title {
+        flex-shrink: 0;
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 12px;
@@ -94,11 +77,28 @@
     }
 
     .report-detail-context {
-        padding: 12px 24px;
+        flex: 1;
+        padding: 12px 0 12px 24px;
+        display: flex;
+        flex-direction: column;
+        height: 0;
+
+        .report-main {
+            flex: 1;
+            overflow: auto;
+            margin-top: 12px;
+        }
+
+        .report-submitter {
+            p {
+                opacity: 0.8;
+            }
+        }
     }
 
     .report-profile {
         font-size: 14px;
+        padding-right: 24px;
     }
 
     .report-submitter {
@@ -130,7 +130,6 @@
     }
 
     .report-content {
-        margin-top: 12px;
         width: 100%;
 
         h2 {
@@ -155,7 +154,7 @@
     height: 100%;
     padding: 24px;
 
-    .report-row-header, .report-row-foot {
+    .report-row-foot {
         flex: 0 0 auto;
     }
 
@@ -180,6 +179,98 @@
     .report-row-foot {
         margin-bottom: 0;
     }
+
+    .report-titles {
+        line-height: 32px;
+    }
+
+    .report-poptip {
+        .ivu-tooltip-inner {
+            min-width: 60px !important;
+            font-size: 12px !important;
+        }
+    }
+
+    .report-users {
+        display: flex;
+        align-items: center;
+
+        .common-user {
+            flex: 1;
+            margin-right: 12px;
+        }
+
+        .report-row-a {
+            flex-shrink: 0;
+        }
+    }
+
+    .report-radiogroup {
+        background: #F4F5F7 !important;
+        padding: 2px !important;
+        border-radius: 4px !important;
+
+        .ivu-radio-wrapper {
+            padding: 0 30px !important;
+            background: #F4F5F7 !important;
+            color: #515A6E !important;
+            box-shadow: none !important;
+            border: none !important;
+
+            &:before {
+                width: 0 !important;
+            }
+
+            &:after {
+                width: 0 !important;
+            }
+        }
+
+        .ivu-radio-focus {
+            box-shadow: none !important;
+            border: none !important;
+
+            &:after {
+                background: none !important;
+            }
+        }
+
+        .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
+            background: #fff !important;
+            color: #8BCF70 !important;
+            box-shadow: none !important;
+            border: none !important;
+            border-radius: 4px !important;
+        }
+
+    }
+    .report-buttongroup {
+        margin-left: 20px;
+        background: #F4F5F7 !important;
+        border-radius: 4px;
+
+        .report-buttongroup-vertical {
+            position: absolute;
+            left: 47px;
+            width: 1px;
+            height: 23px;
+            background-color: #E5E5E5;
+            top: 5px;
+        }
+
+        .ivu-btn-primary {
+            background: #F4F5F7 !important;
+            box-shadow: none !important;
+            border: none !important;
+            color: #8BCF70 !important;
+            height: 36px;
+            line-height: 34px;
+
+            &[disabled] {
+                color: #515A6E !important;
+            }
+        }
+    }
 }
 
 .report-row {
@@ -197,9 +288,9 @@
     }
 
     .report-bottom {
-        height: 36px;
+        height: 38px;
-        line-height: 34px;
+        line-height: 36px;
-        min-width: 110px;
+        min-width: 120px;
     }
 
     .ivu-input[disabled] {
@@ -207,109 +298,3 @@
     }
 }
 
-.report-titles {
-    line-height: 32px;
-}
-
-.report-users {
-    display: flex;
-    align-items: center;
-
-    .common-user {
-        flex: 1;
-        margin-right: 12px;
-    }
-
-    .report-row-a {
-        flex-shrink: 0;
-    }
-}
-
-.report-radiogroup {
-    background: #F4F5F7 !important;
-    padding: 2px !important;
-    border-radius: 4px !important;
-
-    .ivu-radio-wrapper {
-        padding: 0 30px !important;
-        background: #F4F5F7 !important;
-        color: #515A6E !important;
-        box-shadow: none !important;
-        border: none !important;
-
-        &:before {
-            width: 0 !important;
-        }
-
-        &:after {
-            width: 0 !important;
-        }
-    }
-
-    .ivu-radio-focus {
-        box-shadow: none !important;
-        border: none !important;
-
-        &:after {
-            background: none !important;
-        }
-    }
-
-    .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
-        background: #fff !important;
-        color: #8BCF70 !important;
-        box-shadow: none !important;
-        border: none !important;
-        border-radius: 4px !important;
-    }
-
-}
-
-.report-buttongroup {
-    margin-left: 20px;
-    background: #F4F5F7 !important;
-    border-radius: 4px;
-
-    .report-buttongroup-shu {
-        position: absolute;
-        left: 47px;
-        width: 1px;
-        height: 23px;
-        background-color: #E5E5E5;
-        top: 5px;
-    }
-
-    .ivu-btn-primary {
-        background: #F4F5F7 !important;
-        box-shadow: none !important;
-        border: none !important;
-        color: #8BCF70 !important;
-        height: 36px;
-        line-height: 34px;
-
-        &[disabled] {
-            color: #515A6E !important;
-        }
-    }
-}
-
-.report-poptip {
-    .ivu-tooltip-inner {
-        min-width: 60px !important;
-        font-size: 12px !important;
-    }
-}
-
-.reportmy-row {
-    margin-bottom: 20px;
-
-    .reportmy-titles {
-        line-height: 32px;
-    }
-}
-
-.report-main {
-    .report-submitter {
-        padding-top: 13px;
-    }
-}

resources/assets/sass/pages/common.scss

@@ -359,14 +359,16 @@ body {
 }
 
 .search-container {
-    margin-bottom: 24px;
+    margin-bottom: 12px;
     > ul {
         display: flex;
         align-items: flex-end;
+        flex-wrap: wrap;
         > li {
             flex: 1;
             flex-shrink: 0;
             margin-right: 12px;
+            margin-bottom: 12px;
             list-style: none;
             display: flex;
             flex-direction: column;
@@ -381,18 +383,77 @@ body {
             }
             &.search-button {
                 flex: none;
+                display: flex;
+                align-items: center;
+                flex-direction: row;
+                > button + button {
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
+    &.lr {
+        > ul {
+            > li:not(.search-button) {
+                flex: none;
+                flex-direction: row;
+                align-items: center;
+                margin-right: 18px;
+                .search-label {
+                    flex-shrink: 0;
+                }
+                .search-content {
+                    margin-top: 0;
+                    margin-left: 6px;
+                    .ivu-input-wrapper,
+                    .ivu-select {
+                        width: 168px;
+                        max-width: 100%;
+                    }
+                }
             }
         }
     }
     &.auto {
-        display: flex;
         > ul {
             > li:not(.search-button) {
-                min-width: 180px;
+                flex: none;
+                .search-content {
+                    margin-top: 0;
+                    margin-left: 6px;
+                    .ivu-input-wrapper,
+                    .ivu-select {
+                        width: 150px;
+                        max-width: 100%;
+                    }
+                }
             }
         }
     }
 }
+.search-expand {
+    display: flex;
+    align-items: flex-end;
+    .search-container {
+        flex: 1;
+    }
+    .expand-button-group {
+        flex-shrink: 0;
+        margin-left: 24px;
+        margin-bottom: 24px;
+    }
+}
+.search-button-clear {
+    .ivu-tooltip-inner {
+        padding: 0;
+        display: flex;
+        align-items: center;
+        .ivu-btn {
+            min-width: 80px;
+            font-size: 13px;
+        }
+    }
+}
 
 .icon-loading {
     animation: icon-loading-load 0.6s infinite linear;