spfm-market-front/src/pages/main/achievements/issueList.vue

<template>
    <!-- <div style="height: 95%"> -->
    <div class="container" style="margin: 15px 0 0 0">
        <fullscreen
            :fullscreen.sync="fullscreen"
            class="container-box"
            style="margin: 0 !important; padding: 0 !important"
        >
            <div class="titbox">
                <h2>下发管理</h2>
                <div>
                    <i class="el-icon-refresh" @click="iconCli(1)"></i>
                    <i class="el-icon-full-screen" @click="iconCli(2)"></i>
                </div>
            </div>
            <div class="search">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
            </div>

            <div class="tabbox">
                <el-table
                    height="calc(100% - 40px)"
                    v-loading="loading"
                    class="com-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    size="small"
                    border
                    style="width: 100%"
                >
                    <el-table-column align="center" prop="kpiTempName" show-overflow-tooltip
                                     label="模板名称"></el-table-column>
                    <el-table-column align="center" prop="woTitle" show-overflow-tooltip label="标题"></el-table-column>
                    <el-table-column align="center" prop="sendName" show-overflow-tooltip label="派发人"></el-table-column>
                    <el-table-column align="center" prop="requiredTime" show-overflow-tooltip
                                     label="反馈时间"></el-table-column>
                    <el-table-column align="center" prop="needReply" show-overflow-tooltip
                                     label="是否需要回复"></el-table-column>
                    <el-table-column align="center" prop="hotline" width="200" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain
                                       @click="detailes(scope.row)">查看
                            </el-button>
                            <el-button size="mini" type="danger" plain
                                       v-show="scope.row.sts != '3' && scope.row.isNew == '1' && scope.row.needReply == '是'"
                                       @click="discontinue(scope.row)">中止
                            </el-button>
                            <el-button size="mini" type="primary" plain
                                       v-show="scope.row.isNew == '1' && scope.row.needReply == '是' && scope.row.sts != '3'"
                                       @click="updatesDialog(scope.row)">修改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pageBox"
                    @current-change="currchange"
                    layout="prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination>
            </div>
            <myMessage
                :messTit="messTit"
                @closeMessage="closeMessage"
                :centerDialogVisible="centerDialogVisible"
                v-if="centerDialogVisible"
            ></myMessage>
        </fullscreen>
        <el-dialog
            title="修改"
            :visible.sync="dialogStatus"
            width="50%"
            :close-on-press-escape="false"
            :show-close="false"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
        >
            <el-form ref="issueForm" :rules="rules" :model="infolist" label-width="80px">
                <el-form-item label="反馈时间" prop="requiredTime">
                    <el-date-picker
                        style="width: 100%"
                        v-model="infolist.requiredTime"
                        type="datetime"
                        placeholder="选择反馈时间"
                        value-format="yyyy-MM-01 HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('issueForm')">取 消</el-button>
                <el-button @click="updates('issueForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import mySearch from "../../../components/search";
import myMessage from "../../../components/myMessage.vue";

export default {
    components: {
        mySearch,
        myMessage,
    },
    data() {
        return {
            infolist:{
                woNo: "",
                requiredTime: "",
            },
            centerDialogVisible: false,
            messTit: "",
            dialogStatus: false,
            rules: {
                requiredTime: [
                    {
                        required: true,
                        message: "请选择反馈时间",
                        trigger: 'blur',
                    },
                ],
            },
            headers: {
                agileauthtoken: sessionStorage.agileauthtoken.replace(/"/g, ""),
            },
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            searchList: [
                {
                    type: "input",
                    tit: "模板名称",
                    value: "",
                    width: "100%",
                    options: [],
                },
            ],
            params: {
                preTempName: "",
            },
            loading: false,
        };
    },
    methods: {
        detailes(val) {
            if (val.needReply == '是') {
                this.$router.push("/kpiRecall?status=see&id=" + val.woNo + "");
            } else {
                this.$router.push("/kpiNoRecall?status=see&id=" + val.woNo + "");
            }
        },
        updates(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = this.infolist;
                    this.$http({
                        url: "/market/kpiWo/updates",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: data,
                    }).then((res) => {
                        if (res.data.result == 0) {
                            this.$message({
                                type: "success",
                                message: "修改成功",
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.desc,
                            });
                        }
                        this.resetForm(formName);
                        this.closeDialog();
                        this.getList(this.params, this.pageSize);
                    });
                }
            });
        },
        // 取消提交
        resetForm(formName) {
            //this.$refs[formName].resetFields();
            this.woNo = "";
            this.requiredTime = "";
            this.closeDialog();
        },
        showDialog() {
            this.dialogStatus = true;
        },
        closeDialog() {
            this.dialogStatus = false;
        },
        updatesDialog(val) {
            this.infolist.woNo = val.woNo;
            this.infolist.requiredTime = val.requiredTime;
            this.showDialog();
        },
        discontinue(val) {
            this.centerDialogVisible = true;
            this.messTit = "中止后将不能修改回复，是否确定中止？";
            this.infolist.woNo = val.woNo;
        },
        closeMessage(v) {
            this.centerDialogVisible = false;
            if (v === 1) {
                this.$http({
                    url: "/market/kpiWo/discontinue",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {woNo: this.infolist.woNo},
                }).then((res) => {
                    if (res.data.result == "0") {
                        this.$message({message: "中止成功", type: "success"});
                        this.getList(this.params, this.pageSize);
                    } else {
                        this.$message({message: res.data.desc, type: 'error'});
                    }
                });
            }
        },
        //搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? (this.params.preTempName = v[0]) : "";
            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.loading = true;
            this.pageSize = n;
            this.$http({
                url: "/market/kpiWo/querySMkKpiWoPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}',
                },
                data: v,
            }).then((res) => {
                this.loading = false;
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
            });
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },

    },
    mounted() {
        this.getList(this.params, this.pageSize);
    },
    watch: {
        $route() {
            this.getList(this.params, this.pageSize);
        },
    },
};
</script>
<style scoped>
.el-upload-list {
    float: right;
}

.el-input__suffix {
    cursor: pointer;
}

.container .el-upload {
    width: auto !important;
}
</style>
<style scoped lang="scss">
.btn-default {
    display: inline;
    margin-left: 10px;
}

.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}
</style>