epmet-work-pc/src/views/modules/base/smartExcel/filling.vue

<template>
    <div class="g-main">
        <div v-show="pageType == 'list'">
            <div class="m-search">
                <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
                    <div>
                        <el-form-item label="任务主题" prop="taskTitle">
                            <el-input v-model.trim="formData.taskTitle" class="u-item-width-normal" size="small"
                                clearable placeholder="请输入">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="发布时间" prop="startTime">
                            <el-date-picker v-model.trim="formData.startTime" :picker-options="startPickerOptions"
                                class="u-item-width-daterange" size="small" type="date"
                                value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd" placeholder="开始时间">
                            </el-date-picker>
                            <span class="u-data-tag">至</span>
                            <el-date-picker v-model.trim="formData.endTime" :picker-options="endPickerOptions"
                                class="u-item-width-daterange u-data-tag" size="small" type="date"
                                value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd" placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="状态" prop="taskState">
                            <el-select class="u-item-width-normal" v-model.trim="formData.taskState" placeholder="请选择"
                                size="small" clearable>
                                <el-option v-for="item in statusArray" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="创建人" prop="createdBy">
                            <el-select class="u-item-width-normal" v-model.trim="formData.createdBy"
                                placeholder="请选择" size="small" clearable :disabled="manager">
                                <el-option v-for="item in createdByArray" :key="item.staffId" :label="item.name"
                                    :value="item.staffId">
                                </el-option>
                            </el-select>
                        </el-form-item> -->

                        <el-row>
                            <el-col :span="24" align="right">
                                <el-button style="margin-left: 30px" size="small" type="primary "
                                    @click="handleSearch">查询</el-button>
                                <el-button style="margin-left: 10px" size="small" class="diy-button--white"
                                    @click="resetSearch">重置</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>

            <div class="m-table">
                <el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="tableHeight">
                    <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
                    <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
                    <el-table-column prop="agencyName" align="center" label="发布组织" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="taskTitle" label="任务主题" min-width="140" align="center"
                        :show-overflow-tooltip="true" />

                    <el-table-column prop="taskPeriodName" align="center" width="100" label="任务周期"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{ scope.row.taskPeriodName }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="taskStateName" align="center" width="100" label="任务状态"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{ scope.row.taskStateName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createByName" align="center" width="100" label="发布人"
                        :show-overflow-tooltip="true">
                    </el-table-column>

                    <el-table-column prop="createdTime" align="center" width="140" :show-overflow-tooltip="true"
                        label="发布时间">
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" align="center" width="200px">
                        <template slot-scope="scope">
                            <el-button @click="handleInfo(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)"
                        layout="sizes, prev, pager, next, total" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div v-if="pageType == 'info'">
            <FillingInfo :taskId="taskId" @handleShowPage="handleShowPage"></FillingInfo>
        </div>



    </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from "vuex";
import FillingInfo from "./cpts/filling-info.vue";
export default {
    components: { FillingInfo },

    data() {
        let endDisabledDate = (time) => {
            //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
            let nowData = Date.now();
            if (this.formData.startTime) {
                let startTime = new Date(this.formData.startTime);
                return (
                    time.getTime() > nowData ||
                    time.getTime() < startTime ||
                    time.getTime() === startTime
                );
            } else {
                return time.getTime() > nowData;
            }
        };
        let startDisabledDate = (time) => {
            //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
            let nowData = Date.now();
            return time.getTime() > nowData;
        };

        let orgOptionProps = {
            multiple: false,
            value: 'agencyId',
            label: 'agencyName',
            children: 'subAgencyList',
            checkStrictly: true
        }
        return {
            taskId: "",
            statusArray: [
                {
                    label: '未提交',
                    value: 'deal'
                },
                {
                    label: '已提交',
                    value: 'submit',
                },
                {
                    label: '已驳回',
                    value: 'rejected',
                },
                {
                    label: '已存档',
                    value: 'archived',
                },
                {
                    label: '已取消',
                    value: 'cancel',
                },],
            pageType: "list", // 列表list 新增add 详情info
            tableData: [],
            formData: {
                orgId: '',//组织Id
                taskTitle: '',//任务主题
                taskState: '',//任务类型
                startTime: '',//开始时间
                endTime: '',//结束时间
                createdBy: ''//创建人
            },
            orgOptionProps,
            orgOptions: [],
            pageNo: 1,
            pageSize: window.localStorage.getItem("pageSize") || 20,
            total: 1,
            sarr: [],
            endPickerOptions: {
                disabledDate: endDisabledDate,
            },
            startPickerOptions: {
                disabledDate: startDisabledDate,
            },
            searchH: 180,
        };
    },
    computed: {
        tableHeight() {
            const h = this.clientHeight - this.searchH - 200 + this.iframeHeight;
            const _h = this.clientHeight - 200 - this.searchH;
            return this.$store.state.inIframe ? h : _h;
        },
        ...mapGetters(['clientHeight', 'resolution']),
    },
    watch: {
    },
    async mounted() {
        const user = this.$store.state.user;
        await this.getStafflist()
        // if (user) {
        //     if (user.roleList.findIndex(item => item === "manager") !== -1) {
        //         this.manager = false;
        //     } else {
        //         this.manager = true;
        //         this.formData.createdBy = this.createdByArray.find(item => item.mobile === user.phone).staffId
        //     }
        // }
        this.getTableData()
    },
    methods: {
        async getStafflist() {
            let parms = {
                orgId: this.$store.state.user.agencyId,
                orgType: 'agency',
                pageNo: 1,
                pageSize: 100,
            };
            let { data, code } = await requestPost('/data/aggregator/org/stafflist', parms)
            if (code === 0) {
                this.createdByArray = data.staffList;
            }
        },
        handleInfo(value) {
            console.log(value, "sd;ljkfsdlk;fj");
            this.taskId = value.id
            this.pageType = 'info'
        },
        handleChangeAgency(val) {
            this.sarr = []
            this.getLastItem(
                this.orgOptions,
                val,
                "agencyId"
            );
            this.level = this.sarr[this.sarr.length - 1].level
        },
        getLastItem(list, vals, key) {
            let LIST = list || [];
            for (let item of LIST) {
                // console.log(item[key]);
                for (let i of vals) {
                    if (item[key] === i) {
                        this.sarr.push(item);
                    } else {
                        this.getLastItem(item.subAgencyList, vals, key);
                    }
                }
            }
        },
        getOrgTreeList() {
            this.$http
                .post('/gov/org/customeragency/agencygridtree', {})
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    } else {
                        this.orgOptions = []
                        this.orgOptions.push(res.data)
                    }
                })
                .catch(() => {
                    return this.$message.error('网络错误')
                })
        },
        handleSizeChange(val) {
            this.pageSize = val;
            window.localStorage.setItem("pageSize", val);
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getTableData();
        },
        async getTableData() {
            const url = "/actual/base/communityOneTablePeriodPublish/myPageList";
            const { pageSize, pageNo, formData } = this;
            const { data, code, msg } = await requestGet(url, {
                pageSize,
                pageNo,
                ...formData,
            });
            if (code === 0) {
                this.total = data.total || 0;
                this.tableData = data.list
                    ? data.list.map((item) => {
                        return item;
                    })
                    : [];
            } else {
                this.$message.error(msg);
            }
        },
        handleShowPage() {
            this.pageType = 'list'
        },
        handleSearch() {
            this.pageNo = 1;
            this.getTableData();
        },
        async resetSearch() {
            this.$refs.ref_searchform.resetFields();
            const user = this.$store.state.user;
            if (user) {
                if (user.roleList.findIndex(item => item === "manager") !== -1) {
                    this.manager = false;
                } else {
                    this.manager = true;
                    this.formData.createdBy = this.createdByArray.find(item => item.mobile === user.phone).staffId
                }
            }
            this.pageNo = 1;
            this.getTableData();
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";

.m-search {
    .u-item-width-normal {
        width: 200px;
    }
}
</style>