spfm-market-front/src/pages/main/iptv/planApproval.vue

<template>
    <fullscreen  :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
            <div class="search">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                <el-button class="btn-check" size="medium" type="primary" @click="dialogCheck(1)"
                v-if="isAuthor">新建</el-button>
            </div>
            <div class="tabbox">
                <el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
                        :row-style="tableRowClassName"
                        tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="itemName" label="申请事项" width="200"></el-table-column>
                    <el-table-column prop="planPurpose" label="策划目的" ></el-table-column>
                    <el-table-column prop="createTime" label="申请时间" width="150"></el-table-column>
                    <el-table-column prop="createName" label="申请人" width="100"></el-table-column>
                    <el-table-column prop="queryStatus" label="状态" width="100">
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain @click="dialogCheck(2,scope.row)">
                                查看
                            </el-button>
                            <el-button  v-if="scope.row.queryStatus==='待办'"
                                size="mini" type="success" plain @click="dialogCheck(3,scope.row)">
                                处理
                            </el-button>
                            <el-button  v-if="'9'.includes(scope.row.status) && scope.row.isSponsor==='1'"
                                size="mini" type="danger" plain @click="delLine(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pageBox" @current-change="currchange" layout="total, prev, pager, next" background
                               :total="total">
                </el-pagination>
            </div>
            <!---------------------------------------------  新建/浏览表单 -------------------------------------->
            <el-dialog :title="titname + '申请'"
                       :visible.sync="dialogStatus" width="70%" top="50px"
                       :show-close="true"
                       :before-close="closedia"
                       :destroy-on-close="true"
                       :modal-append-to-body="false"
                       :close-on-click-modal="false">
                <div v-loading="loading">
                    <el-form :model="infolist" ref="infolist" :rules="rules" style="height: 60vh;overflow-y: scroll;" >
                        <div class="info-line">
                            <span><i>*</i>申请事项</span>
                            <el-form-item prop="itemName" class="form-item">
                                <el-input v-if="this.formStatus!=2 && '06'.includes(infolist.status)"
                                v-model.trim="infolist.itemName" placeholder="请输入申请事项内容"
                                          :disabled="disableStatus" >
                                </el-input>
                                <div v-if="this.formStatus===2 || !'06'.includes(infolist.status)"
                                 class="el-descriptions">{{infolist.itemName}}</div>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <span><i>*</i>频道选取</span>
                            <el-form-item prop="channelName" class="form-item">
                                <el-radio-group v-if="this.formStatus!=2 && '06'.includes(infolist.status)" class="el-radio-group"
                                 v-model="infolist.channelName" @change="handleRadioChanges" >
                                    <el-radio v-for="item in channelList" :key="item.orderNumber"   :label="item.dataName">
                                    </el-radio>
                                </el-radio-group>
                                <div v-if="this.formStatus===2 || !'06'.includes(infolist.status)"
                                 class="el-descriptions">{{infolist.channelName}}</div>
                            </el-form-item>
                        </div>
                        <div class="info-line" v-if="isOther">
                            <span><i>*</i>其他频道名称</span>
                            <el-form-item prop="otherName" class="form-item">
                                <el-input v-if="this.formStatus!=2 && '06'.includes(infolist.status)"
                                 v-model.trim="infolist.otherName"
                                :disabled="disableStatus" placeholder="请输入其他频道名称"  ></el-input>
                                <div v-if="this.formStatus===2 || !'06'.includes(infolist.status)"
                                 class="el-descriptions">{{infolist.otherName}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span><i>*</i>策划目的</span>
                            <el-form-item prop="planPurpose" class="form-item">
                                <el-input v-if="this.formStatus!=2 && '06'.includes(infolist.status)"
                                 v-model="infolist.planPurpose" type="textarea" :autosize="{ minRows: 3}"
                                :disabled="disableStatus" placeholder="请输入策划目的"  ></el-input>
                                <pre v-if="this.formStatus===2 || !'06'.includes(infolist.status)"
                                 class="el-descriptions">{{infolist.planPurpose}}</pre>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span><i>*</i>策划描述</span>
                            <el-form-item prop="planDescription" class="form-item">
                                <el-input v-if="this.formStatus!=2 && '06'.includes(infolist.status)"
                                 v-model="infolist.planDescription"  type="textarea" :autosize="{ minRows: 3}"
                                :disabled="disableStatus" placeholder="请输入策划描述" ></el-input>
                                <pre v-if="this.formStatus===2 || !'06'.includes(infolist.status)"
                                 class="el-descriptions">{{infolist.planDescription}}</pre>
                            </el-form-item>
                        </div>

                        <div class="info-line"  v-if="this.formStatus!=2 && '123'.includes(infolist.status) " >
                            <span><i>{{this.isr}}</i>审批意见</span>
                            <el-form-item prop="opinions" class="form-item">
                                <el-input v-model="infolist.opinions" type="textarea" :autosize="{ minRows: 3}"
                                :disabled="disableStatus" placeholder="请输入审批意见" ></el-input>
                            </el-form-item>
                        </div>

                        <div class="info-line" v-if="this.formStatus!=2 && '0126'.includes(infolist.status) " >
                            <span><i>*</i>下一步审批人<br/>{{this.nextStep}}</span>
                            <el-form-item prop="assigneeName" class="form-item">
                                <el-input type="input" placeholder="请选择审批人" readonly @click.native="showUserTreeDlg"
                                v-model="infolist.assigneeName" style="width:500px">
                                </el-input>
                                <el-button type="primary" plain icon="el-icon-search" @click="showUserTreeDlg"></el-button>
                                <el-input type="hidden" v-show="false" v-model="infolist.assigneeNo"/>
                            </el-form-item>
                        </div>
                        <div class="info-line" style="margin-bottom: 22px">
                            <span>附件</span>
                            <div class="form-item">
                                <div class="el-descriptions" v-if="this.formStatus!=2 && '06'.includes(infolist.status)">
                                    <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo"
                                            :fileList="fileInfo.fileList"></myUpload>
                                </div>
                                <div style="el-descriptions" v-if="(disableStatus || !'06'.includes(infolist.status)) && datalist.attList.length>0">
                                    <uploadDown :datalist="datalist" :dialogStatus="uploadstatus"></uploadDown>
                                </div>
                                <div v-if="(disableStatus || !'06'.includes(infolist.status)) && datalist.attList.length===0 "
                                    class="el-descriptions">---- 无附件 ----</div>
                            </div>
                        </div>

                        <div class="info-line" v-if="this.formStatus!=1">
                            <span>审批记录</span>
                            <el-table  class="form-item"  :data="flowHistory"
                                :header-cell-style="{background:'#eee',color:'#0c1d3e',height:'20px'}"
                                 size="mini" border >
                                <el-table-column prop="step" label="流程环节" width="200"></el-table-column>
                                <el-table-column prop="handler" label="处理人" width="100"></el-table-column>
                                <el-table-column prop="time" label="处理时间" width="150"></el-table-column>
                                <el-table-column prop="flag" label="操作" width="100"></el-table-column>
                                <el-table-column prop="opinion" label="审批意见" ></el-table-column>
                            </el-table>
                        </div>
                        <div class="info-line" v-if="'458'.includes(infolist.status)" >
                            <span>执行结果</span>
                            <el-form-item prop="result" class="form-item">
                                <el-input v-if="this.formStatus!=2 && '4'.includes(infolist.status)"
                                 v-model="infolist.result" type="textarea" :autosize="{ minRows: 3}"
                                :disabled="disableStatus" placeholder="请输入执行结果" ></el-input>
                                <div v-if="this.formStatus===2 || !'458'.includes(infolist.status)"
                                 class="el-descriptions">{{infolist.result}}</div>
                            </el-form-item>
                        </div>

                    </el-form>
                    <div slot="footer" class="dialog-footer myfooter">
                        <span v-if="this.formStatus===1 || this.formStatus===3">
                        <el-button v-if="infolist.status==='0' || infolist.status==='1'"
                        type="primary" @click="dialogCli('submit')" >提 交</el-button>
                        <el-button v-if="infolist.status==='2' || infolist.status=='3'"
                        type="primary" @click="dialogCli('agree')">同 意</el-button>
                        <el-button v-if="infolist.status==='3'"
                        type="danger" @click="dialogCli('disagree')">不同意</el-button>
                        <el-button v-if="infolist.status==='2' || infolist.status=='3'"
                         type="warning" @click="dialogCli('return')">退回修改</el-button>
                        <el-button v-if="infolist.status==='4'"
                         type="primary" @click="dialogCli('exe')">已执行</el-button>
                        <el-button v-if="infolist.status==='4'"
                         type="info" @click="dialogCli('unexe')">未执行</el-button>
                        <el-button v-if="infolist.status==='6'"
                         type="primary" @click="dialogCli('submit')">重新发起</el-button>
                        <el-button v-if="infolist.status==='6'"
                         type="info" @click="dialogCli('over')">结束流程</el-button>
                        <el-button @click="dialogCli('close')">取 消</el-button>
                        </span>
                        <el-button v-if="this.formStatus===2" @click="dialogCli('close')">关 闭</el-button>
                    </div>
                </div>
            </el-dialog>
            <userDlg :visible="userTreeDlgVisual" :ns="this.nextStep" :zIndex=10 @handleSelect="handleUserSelect" @close="closeUserSelect"/>
        </div>
        <myMessage :messTit='messTit' @closeMessage="closeMessage" :centerDialogVisible="centerDialogVisible"
                   v-if="centerDialogVisible"></myMessage>
    </fullscreen>
</template>
<script>
import myUpload from '../../../components/upload'
import uploadDown from './uploadDown'
import mySearch from './search'
import toolList from '../../../components/toolList'
import myMessage from "../../../components/myMessage.vue"
import userDlg from "./userDlg.vue"


export default {
    components: {
        myUpload,
        uploadDown,
        mySearch,
        toolList,
        myMessage,
        userDlg
    },
    data() {
        const assigneeNameRule = (rule, value, callback) => {
            if (this.infolist.operation ==='return' || this.infolist.operation ==='over'){
                callback()
            }else{
                if (!this.infolist.assigneeName) {
                    callback(new Error('请选择审批人'))
                } else {
                    callback()
                }
            }
        }
        const opinionsRule = (rule, value, callback) => {
            if (this.infolist.status ==='1'){
                if (!this.infolist.opinions) {
                    callback(new Error('审批意见不能为空'))
                } else {
                    callback()
                }
            }else{
                callback()
            }
        }
        const nullRule = (rule, value, callback) => {
            if(value) {
                let  trimValue = value.replace(/^\s+|\s+$/gm,'');
                if (!trimValue) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }else{
                callback(new Error('不能为空'))
            }

        }
        const urls = {
            uploadUrl:'/market/iptv/upload',
            downfileUrl:'/market/iptv/downfile'
        }

        return {
            tooltit: '上线审批列表',
            queryListUrl:'/market/iptvPlanApproval/queryPage',
            queryInfoUrl:'/market/iptvPlanApproval/query',
            addUrl:'/market/iptvPlanApproval/add',
            updateUrl:'/market/iptvPlanApproval/update',
            delUrl: "/market/iptvPlanApproval/delByid",
            getPermUrl:"/market/iptvPlanApproval/getPermissions",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [{}],
            dialogStatus: false,
            infolist: {},
            typeOptions: [],
            titname: '',
            disableStatus: false,
            fileList: [],
            attList: [],
            searchList: [
                {
                    type: "input",
                    tit: "申请事项",
                    value: "",
                    width: "48%",
                },
                {
                    type: "sel",
                    tit: "状态",
                    value: "",
                    width: "48%",
                    options: [
                         {
                            dataCode: "待办",
                            dataName: "待办"
                        },
                        {
                            dataCode: "已办",
                            dataName: "已办"
                        },
                        {
                            dataCode: "已归档",
                            dataName: "已归档"
                        }
                    ]
                }
            ],
            rules: {
                itemName: [{
                    required: true,
                    trigger: 'change',
                    validator: nullRule
                }],
                channelName: [{
                    required: true,
                    trigger: 'change',
                    validator: nullRule
                }],
                otherName: [{
                    required: true,
                    trigger: 'change',
                    validator: nullRule
                }],
                planPurpose: [{
                    required: true,
                    trigger: 'change',
                    validator: nullRule
                }],
                planDescription: [{
                    required: true,
                    trigger: 'change',
                    validator: nullRule
                }],
                assigneeName: [{
                    required: true,
                    trigger: 'change',
                    validator: assigneeNameRule
                }],
                opinions: [{
                    required: true,
                    trigger: 'change',
                    validator: opinionsRule
                }]
            },
            fileInfo: {
                limit: 10,
                url: urls.uploadUrl,
                fileList: []
            },
            datalist: {
                url: urls.downfileUrl,
                type: 2,
                attList: []
            },
            uploadstatus: false,
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: '',
            delid: '',
            loading: false,
            channelList: [],
            flowHistory:[{}],
            isAuthor: false,
            isViewer: false,
            formStatus:1,   //页面状态1:添加,2:浏览,3:处理
            isOther:false,
            userTreeDlgVisual:false,
            firstChannel:'',
            nextStep:'',
            isr:'',
            msg:""
        }
    },
    methods: {
        //获取当前用户权限
        getPermissions(){
            this.$http({
                url: this.getPermUrl,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {},
            }).then((res) => {
                this.isAuthor = res.data.isAuthor;
                if(res.data.isAuthor){
                    this.isViewer = true;
                }else{
                    this.isViewer = res.data.isViewer;
                }
                /*if(!this.isViewer){
                    this.msg = "权限错误！";
                    this.popupMsg();
                }*/
            });
        },
        //从字典表获取‘频道名称’
         getChannelList() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'channel'
                },
            }).then((res) => {
                this.channelList = res.data;
                this.firstChannel = res.data[0].dataName;
            });
        },
        //关闭主对话框
        closedia() {
            this.infolist = {};
            this.flowHistory=[];
            this.dialogCli('close');
        },
        //提交搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? this.params.itemName = v[0] : '';
            v[1] ? this.params.queryStatus = v[1] : '';
            this.getList(this.params, this.pageSize);
        },

        /************
        * @description: 获取分页列表
        * @param  v 查询参数
        * @param  n 要展示页码
        * @return void
        *************/
        getList(p, n) {
            this.pageSize = n;
            let _this = this;
            this.tableData = [];
            this.loading = true;
            this.$http({
                url: _this.queryListUrl,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: p,
            }).then((res) => {
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
         /************
        * @description: 列表页翻页查询
        * @param  n 要展示的页码
        * @return void
        *************/
        currchange(n) {
            this.pageSize = n;
            this.getList(this.params, this.pageSize);
        },

        /************
        * @description: 展示不同状态(增、查、改)的主表单
        * @param  v 状态标识（1:增;2:查,3:改）
        * @param  row 列表行对象
        * @return void
        *************/
        dialogCheck(v, row) {
            this.infolist = {};
            this.formStatus = v;
            if (v === 1) {
                this.titname = '新建';
                this.getUser();
                this.dialogStatus = true;
                this.disableStatus = false;
                this.fileInfo.fileList = [];
                this.attList = [];
                this.formStatus = 1;   //页面状态1:添加,2:浏览,3:处理
                this.nextStep='  [频道负责人]';
                this.infolist.status = '0';
                //this.infolist.channelName = this.firstChannel;
                return
            } else if (v === 2) {
                this.titname = '查看';
                this.disableStatus = true;
                this.dialogStatus = true;
                this.formStatus = 2;
                this.loading = true;
            } else if (v === 3) {
                this.dialogStatus = true;
                this.disableStatus = false;
                this.titname = '处理';
                this.formStatus = 3;
                this.loading = true;
                this.isr = "";
            }

           // this.infolist = Object.assign({}, row); //拷贝

            this.$http({
                url: this.queryInfoUrl,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: row
            }).then((res) => {
                this.datalist.attList = res.data.attList;
                this.uploadstatus = true;
                this.infolist = res.data;
                this.fileInfo.fileList = [];
                this.attList = [];
                this.flowHistory = JSON.parse(res.data.history).history_list;
                if (res.data.attList) {
                    res.data.attList.forEach(item => {
                        this.fileInfo.fileList.push({
                            name: item.fileName,
                            url: '',
                            id: item.id,
                            fileName: item.fileName
                        });
                        this.attList.push({
                            name: item.fileName,
                            url: '',
                            id: item.id,
                            fileName: item.fileName
                        });
                    })
                }
                if(this.infolist.status==='1') {
                    this.nextStep="[科室经理]";
                    this.isr = "*";
                }
                if(this.infolist.status==='2') this.nextStep="[分管副总]";
                if(this.infolist.status==='6') this.nextStep="[频道负责人]";

                this.loading = false;
            });
        },


        /************
        * @description: 主页面按钮操作
        * @param  v 状态标识（1:新增保存;2:页面关闭,3:记录修改）
        * @return void
        *************/
        dialogCli(v) {

            if (v === "close") {
                this.datalist.attList = [];
                this.uploadstatus = false;
                this.fileInfo.fileList = [];
                this.infolist = {};
                this.dialogStatus = false;
                this.defaultList = [];
                this.isOther = false;
                return
            }

            if (this.formStatus===1){
                this.submitInfo(this.addUrl, v);
            }else{
                this.submitInfo(this.updateUrl, v);
            }

        },

        /************
        * @description: 主页面数据提交
        * @param  u 提交请求地址
        * @param  v 状态标识（1:新增保存;3:记录修改）
        * @return void
        *************/
        submitInfo(u, v) {
            let _this = this;
            this.infolist.operation = v;
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    let attList = [];

                    this.datalist.attList = [];
                    this.uploadstatus = false;
                    for (let i = 0; i < this.attList.length; i++) {
                        attList.push({
                            id: this.attList[i].id,
                            fileCode: this.attList[i].fileCode,
                            fileName: this.attList[i].fileName,
                            opName: this.attList[i].opName,
                            opNo: this.attList[i].opNo,
                            opTime: this.attList[i].opTime
                        });
                    }
                    this.infolist.attList = attList;
                    this.$http({
                        url: u,
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: this.infolist
                    }).then((res) => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: 'error'
                            });
                        } else {
                            _this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            _this.fileInfo.fileList = [];
                            _this.infolist = {};
                            _this.dialogStatus = false;
                            _this.getList(this.params, this.pageSize);
                            _this.defaultList = [];
                        }

                    });
                }
            })
        },
        //记录删除提示框
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this.$http({
                    url: _this.delUrl,
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                            id: _this.delid
                    }
                }).then((res) => {
                    if (res.data.result === 1) {
                        _this.$message({
                            message: res.data.desc,
                            type: 'error'
                        });
                    } else {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.getList(this.params, this.pageSize);
                    }
                });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = '即将删除此条数据, 是否删除?';
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
            this.attList = v;
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.infolist = {};
            this.infolist.opNo = this.userInfo.loginNo;
            this.infolist.opName = this.userInfo.loginName;
        },
        //弹出提示框
        popupMsg() {
            this.$notify.error({
            title: '错误',
            message: this.msg
            });
        },
        //频道切换触发
        handleRadioChanges(value) {
            if (value==='其他'){
                this.isOther = true;
            }else{
                this.isOther = false;
            }
        },
        showUserTreeDlg(){
                this.userTreeDlgVisual = true
        },
        handleUserSelect(v){
                this.infolist.assigneeNo = v.leaderAuditNo
                this.infolist.assigneeName = v.leaderAuditName
                this.closeUserSelect()
        },
        closeUserSelect(){
            this.userTreeDlgVisual = false;
        },
        tableRowClassName({row, rowIndex}) {
            let stylejson={}
            if (row.queryStatus === '待办') {
                stylejson.background ='oldlace';
                return stylejson;
            }
            return ''
        }
    },
    mounted() {
        this.getPermissions();
        this.getUser();
        this.getChannelList();
        this.getList(this.params, this.pageSize);

    },
    created() {

    }
}
</script>
<style scoped lang="scss">
@import "../../../assets/style";

.titbox {
    div {
        float: right;

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

  .el-table__row.to-do {
    background: rgb(248, 207, 133);
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

.tabbox {
    margin-top: 16px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}

.info-line {
    width: 100%;
    display: block;
    padding-left: 20px;

    div {
        width: 100%;
        display: inline-block;
    }

    span {
        width: 120px;
        display: inline-block;
        padding-top: 10px;
        text-align: left;
        line-height:15px;
        vertical-align: top;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;

        }
    }

    .form-item{
        width: calc(100% - 140px);
    }

    .el-select,.el-textarea,
    .el-input {
        width: 100%;
    }


    .tree
    {
        width: calc(100% - 100px);
    }

    .el-descriptions{
        border: 1px solid #ddd;
        background-color: #f5f7fa;
        color: rgb(2, 30, 58);
        padding-top: 5px;
        padding-left: 10px;
        height: 100%;
        line-height:30px;
        width: 100%;
        border-radius: 5px;
        min-height:35px;

    }

    .el-radio-group{
        border: 1px solid #ddd;
        padding-top: 12px;
        padding-left: 20px;
        height: 100%;
        line-height:30px;
        width: 100%;
        border-radius: 5px;
    }

}

.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

</style>