spfm-market-front/src/pages/main/terminal/advertincrease.vue

<template>
    <div>
        <div class="container">
            <el-form :model="infolist" ref="infolist" :rules="rules" class="container-box">
                <h2 style="display: block;margin-bottom: 20px;">广告申请</h2>
                <div style="height: calc(100% - 160px);overflow-y: scroll;">
                    <div class="info-line">
                        <el-form-item prop="tit">
                            <span>文件标题</span>
                            <el-input v-model="infolist.tit" placeholder="文件标题" :disabled="disableStatus"></el-input>
                        </el-form-item>
                        <el-form-item prop="dept">
                            <span>申请部门</span>
                            <el-input v-model="infolist.dept" placeholder="申请部门"></el-input>
                            <!-- <el-select clearable v-model="infolist.dept" placeholder="申请部门">
                                <el-option v-for="items in terminalopt" :key="items.procId" :label="items.procName"
                                    :value="items.procId">
                                </el-option>
                            </el-select> -->
                        </el-form-item>
                        <el-form-item prop="opName">
                            <span>申请人</span>
                            <el-input v-model="infolist.opName" placeholder="申请人"></el-input>
                        </el-form-item>
                        <el-form-item prop="phone">
                            <span>联系电话</span>
                            <el-input v-model="infolist.phone" placeholder="联系电话"></el-input>
                        </el-form-item>
                        <!-- <el-form-item prop="time">
                            <span>申请时间</span>
                            <el-date-picker v-model="infolist.time" type="date" placeholder="申请时间">
                            </el-date-picker>
                        </el-form-item> -->
                        <el-form-item prop="num">
                            <span>文件编号</span>
                            <el-input v-model="infolist.num" placeholder="文件编号" :disabled="disableStatus"></el-input>
                        </el-form-item>
                        <el-form-item prop="overtime">
                            <span>完成时间</span>
                            <el-date-picker v-model="infolist.overtime" type="date" placeholder="完成时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item prop="urgent">
                            <span>紧急程度</span>
                            <el-select :popper-append-to-body="false" clearable v-model="infolist.urgent"
                                placeholder="紧急程度">
                                <el-option v-for="items in fireopt" :key="items.dataCode" :label="items.dataName"
                                    :value="items.dataCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="materType">
                            <span>素材类型</span>
                            <el-select :popper-append-to-body="false" clearable v-model="infolist.materType"
                                placeholder="素材类型">
                                <el-option v-for="items in materTypeopt" :key="items.dataCode" :label="items.dataName"
                                    :value="items.dataCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="tgqd">
                        <span class="qd-tit">推广渠道</span>
                        <div class="qd-box">
                            <div class="zy">
                                <span>自有渠道</span>
                                <div style="display: flex;">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox label="实体渠道"></el-checkbox>
                                        <el-checkbox label="门户网站"></el-checkbox>
                                        <el-checkbox label="移动旗舰店app"></el-checkbox>
                                        <el-checkbox label="官方网站"></el-checkbox>
                                        <el-checkbox label="官方微信"></el-checkbox>
                                        <el-checkbox label="电视营业厅(魔百和)"></el-checkbox>
                                        <el-checkbox label="其他"></el-checkbox>
                                    </el-checkbox-group>
                                    <el-input v-model="checkList1" size="mini" style="margin-left: 20px;"></el-input>
                                </div>
                            </div>
                            <div class="zy">
                                <span>外部渠道</span>
                                <div>
                                    <el-checkbox-group v-model="checkList2">
                                        <el-checkbox label="广播"></el-checkbox>
                                        <el-checkbox label="电视"></el-checkbox>
                                        <el-checkbox label="报纸"></el-checkbox>
                                        <el-checkbox label="互联网"></el-checkbox>
                                        <el-checkbox label="户外"></el-checkbox>
                                        <el-checkbox label="社会渠道"></el-checkbox>
                                        <el-checkbox label="手机卖场"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                            <div class="zy">
                                <span style="width: 60px;text-align: right;">其他</span>
                                <div>
                                    <el-input v-model="checkList3" size="mini"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>

                    <el-form-item class="info-line online" prop="propaganda">
                        <span>产品及卖点</span>
                        <el-input v-model="infolist.propaganda" placeholder="产品及卖点" type="textarea" :rows="3">
                        </el-input>
                    </el-form-item>
                    <el-form-item class="info-line online" prop="explain">
                        <span>宣传内容</span>
                        <el-input v-model="infolist.explain" placeholder="宣传内容" type="textarea" :rows="3"></el-input>
                    </el-form-item>
                    <div style="padding-left: 80px">
                        <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
                        </myUpload>
                    </div>
                </div>
                <div class="t-footer">
                    <el-button type="primary" @click="checkexa = true">确 定</el-button>
                    <el-button @click="dialogCli(1)">取 消</el-button>
                </div>
            </el-form>
        </div>
        <el-dialog title="选择审批人" :visible.sync="checkexa" width="50%" :destroy-on-close="true"
        	:modal-append-to-body="false" :close-on-click-modal="false">
        	<div>

        		<el-form :model="infolist" ref="infolist" :rules="rules">
        			<el-form-item prop="visiblec" class="info-line online">
        				<span>审批人员</span>
        				<deptTreeOnly class="tree" @treeCheck="treeCheckonly" :defaultList="defaultList"
        					:type="depttype" :closeList="closeList"></deptTreeOnly>
        				<div class="tree treeUser">
        					<p>{{treeListonly.leaderAuditName}}
        						<i v-if="treeListonly.leaderAuditName" @click="deletes()"
        							class="el-icon-error"></i>
        					</p>
        				</div>
        			</el-form-item>
        		</el-form>

        		<div slot="footer" style="text-align: right;padding-bottom: 20px;">
        			<el-button type="primary" @click="dialogCli(2)">确 定</el-button>
        			<el-button @click="checkexa = false">取 消</el-button>
        		</div>
        	</div>
        </el-dialog>
    </div>
</template>
<script>
    import mySearch from "../../../components/search.vue";
    import myUpload from "../../../components/upload.vue";
    import deptTreeOnly from "../../../components/deptTreeOnly.vue"

    export default {
        components: {
            mySearch,
            myUpload,
            deptTreeOnly
        },
        data() {
            const tit = (rule, value, callback) => {
                if (!this.infolist.tit) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const dept = (rule, value, callback) => {
                if (!this.infolist.dept) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const opName = (rule, value, callback) => {
                if (!this.infolist.opName) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const phone = (rule, value, callback) => {
                if (!this.infolist.phone) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const time = (rule, value, callback) => {
                if (!this.infolist.time) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const num = (rule, value, callback) => {
                if (!this.infolist.num) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const overtime = (rule, value, callback) => {
                if (!this.infolist.overtime) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const urgent = (rule, value, callback) => {
                if (!this.infolist.urgent) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const materType = (rule, value, callback) => {
                if (!this.infolist.materType) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const propaganda = (rule, value, callback) => {
                if (!this.infolist.propaganda) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const explain = (rule, value, callback) => {
                if (!this.infolist.explain) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            return {
                rules: {
                    tit: [{
                        required: true,
                        trigger: 'blur',
                        validator: tit
                    }],
                    dept: [{
                        required: true,
                        trigger: 'blur',
                        validator: dept
                    }],
                    opName: [{
                        required: true,
                        trigger: 'blur',
                        validator: opName
                    }],
                    phone: [{
                        required: true,
                        trigger: 'blur',
                        validator: phone
                    }],
                    time: [{
                        required: true,
                        trigger: 'change',
                        validator: time
                    }],
                    num: [{
                        required: true,
                        trigger: 'blur',
                        validator: num
                    }],
                    overtime: [{
                        required: true,
                        trigger: 'change',
                        validator: overtime
                    }],
                    urgent: [{
                        required: true,
                        trigger: 'change',
                        validator: urgent
                    }],
                    materType: [{
                        required: true,
                        trigger: 'change',
                        validator: materType
                    }],
                    propaganda: [{
                        required: true,
                        trigger: 'blur',
                        validator: propaganda
                    }],
                    explain: [{
                        required: true,
                        trigger: 'blur',
                        validator: explain
                    }],
                },
                fullscreen: false,
                total: 0,
                pageSize: 1,
                tableData: [{}],
                disableStatus: false,
                titname: '终端',
                infolist: {
                    tit: '',
                    terminal: '',
                    dept: '',
                    opName: '',
                    time: '',
                    phone: '',
                    overtime: '',
                    propaganda: '',
                    explain: '',
                },
                terminal: '688225294361509888',
                terminalopt: [{
                    procId: '111',
                    procName: '1111',
                }],
                userInfo: {},
                params: {},
                infoApply: [],
                options: [],
                fireopt: [],
                typeopt: [],

                materTypeopt: [],
                attList: [],
                fileInfo: {
                    type: 'img',
                    limit: 50,
                    url: '/bpm/api/upload',
                    fileList: []
                },
                checkList:[],
                checkList1:'',
                checkList2:[],
                checkList3:'',
                checkexa: false,
                treeListonly: {},
                defaultList: [],
                closeList: false,
                visionchonly: false,
                depttype: 0,
            }
        },
        methods: {
            deletes() {
            	this.treeListonly = {};
            	this.closeList = !this.closeList;
            },
            treeCheckonly(v) {
            	this.treeListonly = v;
            },
            //添加
            dialogCli(v) {
                if (v === 1) {
                    this.fileInfo.fileList = [];
                    this.infolist = {};
                    return
                }
                let _this = this;
                let info = {};
                info.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD");
                info.opNo = this.userInfo.loginNo;
                info.opName = this.userInfo.loginName;
                info.woTitle = this.infolist.tit;

                this.infolist.time = info.opTime;

                info.params = {};
                info.params.terminalRes = this.infolist;
                for (let i = 0; i < this.checkList.length; i++) {
                    this.checkList[i] == '其他';
                    this.checkList[i]=this.checkList1;
                }
                info.params.terminalRes.checkList = this.checkList;
                info.params.terminalRes.checkList2 = this.checkList2;
                info.params.terminalRes.checkList3 = this.checkList3;

                info.procId = this.terminal;
                for (let i = 0; i < this.options.length; i++) {
                    if (this.terminal == this.options[i].procId) {
                        info.procName = this.options[i].procName;
                        info.procVersion = this.options[i].procVersion;
                    }
                }

                let attList = [];
                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,
                        woNo: this.infolist.woNo,
                        attchFileId: this.attList[i].attchFileId,
                    });
                }

                info.params.assigneeNo = this.treeListonly.leaderAuditNo;
                info.params.assigneeName = this.treeListonly.leaderAuditName;

                info.params.attList = JSON.stringify(attList)
                info.params.terminalRes = JSON.stringify(info.params.terminalRes)

                this.submitInfo("/bpm/api/startProc", info);
            },
            submitInfo(u, v) {
                let _this = this;
                this.$refs.infolist.validate(valid => {
                    if (valid) {
                        this.$http({
                            url: u,
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: v,
                        }).then((res) => {
                            if (res.data.result === 1) {
                                _this.$message({
                                    message: res.data.desc,
                                    type: 'error'
                                });
                            } else {
                                _this.$message({
                                    message: '成功',
                                    type: 'success'
                                });
                                _this.$router.push({
                                    path: "/advcheck",
                                    query:{
                                        type:0
                                    }
                                });
                                // _this.setabList("广告管理列表", "/advcheck?type="+0);
                            }

                        });
                    }
                })
            },
            //流程
            getTermianl() {
                this.$http({
                    url: "/bpm/api/queryBpmProcList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
                    },
                    data: {},
                }).then((res) => {
                    this.options = res.data.data;
                });
            },
            getlist() {
                this.$http({
                    url: "/sysmgr/cfgDataDicts/queryMap",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCodePks: 'materType,jjcd,tgqd'
                    },
                }).then((res) => {
                    this.materTypeopt = res.data.body.materType;
                    this.fireopt = res.data.body.jjcd;
                    this.extensionopt = res.data.body.tgqd;
                });
            },
            getUser() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.infolist.opName = this.userInfo.loginName
                this.infolist.phone = this.userInfo.phoneNo
                this.infolist.dept = this.userInfo.groupName
            },
            uploadBack(v) {
                this.attList = v;
            },
        },
        mounted() {
            this.getTermianl();
            this.getUser();
            this.getlist();
        },
        created() {

        }
    }
</script>
<style scoped lang="scss">
    .t-footer {
        text-align: right;
        padding-right: 20px;
        margin-top: 20px;
    }

    .onetab {
        padding: 20px;
        height: calc(100% - 180px);
    }

    .titbox {
        div {
            float: right;

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

    .tabbox {
        margin-top: 15px;
    }

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

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

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

        span {
            width: 80px;
            display: inline-block;
            text-align: left;

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

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

        .el-checkbox-group {
            border: 1px solid #ddd;
            padding-left: 20px;
            height: 40px;
            width: calc(100% - 100px);
            border-radius: 5px;
        }
    }

    .online {
        width: 100%;

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

        span {
            vertical-align: top;
        }

        .el-textarea {
            width: calc(100% - 100px);
        }
        .tree {
        	width: calc(50% - 60px);
        	display: inline-block;
        	margin-right: 20px;
        	height: 300px;
        	overflow-y: scroll;

        	.el-icon-error {
        		float: right;
        		font-size: 20px;
        		margin-top: 9px;
        		cursor: pointer;
        	}
        }

        .treeUser {
        	margin: 0;
        	border: 1px solid #ddd;

        	p {
        		background: #f4f4f4;
        		padding: 0 20px;
        		margin-bottom: 5px;
        	}
        }

        .treeUserb {
            width: calc(100% - 100px);
            border: 1px solid #ddd;
            background: #f4f4f4;
            border-radius: 3px;
            height: auto;
            overflow: hidden;

            p {
                display: inline-block;
                padding: 0 20px;
                margin-bottom: 5px;
            }
        }
    }

    .tgqd {
        margin-bottom: 20px;

        .qd-tit {
            display: inline-block;
            width: 100px;
            padding-left: 20px;
            vertical-align: top;
        }

        .qd-box {
            border: 1px solid #ddd;
            border-radius: 5px;
            display: inline-block;
            width: calc(100% - 120px);
            min-height: 120px;
            .zy{
                display: flex;
                line-height: 40px;
                span{
                    display: inline-block;
                    margin: 0 20px;
                }
                .el-input{
                    width: 200px;
                }
            }
        }
    }
</style>