hhqtest/application/admin/view/quality_task/add.html

{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>{$meta_title}</h5>
                <div class="ibox-tools">
                    <a class="toback" href="{:url('index')}">
                        返回上一页
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <form method="post" action="{:url('add')}" class="form-horizontal">
                    <input type="hidden" name="id" value="{$info['id']|default='0'}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">任务名称<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="title" value="{$info.title|default=''}" placeholder="请输入任务名称">
                        </div>
                    </div>
                    <div id="vue-plan">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">检查内容<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <button class="btn btn-sm btn-primary" type="button" @click="addGroup">添加检查内容</button>
                                <!--                                <button class="btn btn-sm btn-primary" type="button" @click="selectAddr()">添加地点</button>-->
                                <!--                                <button class="btn btn-sm btn-primary" type="button" @click="selectForm()">设置检查内容</button>-->
                                <!--                                <button class="btn btn-sm btn-danger" type="button" @click="delAddrs">移除</button>-->
                                <!--                                <button class="btn btn-sm btn-primary" type="button" @click="sortAddrs">确定排序</button>-->


                            </div>
                            <div class="col-sm-12">
                                <input type="hidden" name="group" value="{$info.addrForms_json|default=''}" id="groupbox">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th style="width: 25%">检查内容</th>
                                        <th style="width: 25%">检查项</th>
                                        <th style="width: 15%">关联业务</th>
                                        <th style="width: 25%">业务项</th>
                                        <th style="width: 10%" class="text-center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in groups" :key="index">
                                        <td>
                                            <textarea v-model="item.title" rows="1" class="form-control" style="height: 100%"></textarea>
                                        </td>
                                        <td>
                                            <button type="button" :id="`formsbtn${index}`" :url="`{:url('QualityForm/selectforms',[],false,false)}/idx/${index}`" onclick="selectForms(this)" class="btn btn-sm btn-primary">选择表单项</button>
                                            <div v-if="item.forms.length > 0">
                                                <div v-for="(vo,idx) in item.forms" :key="idx" class="alert alert-success alert-dismissable" style="padding: 5px;margin-bottom: 5px;width: 90%;">
                                                    <button class="close" @click="delForms(index,vo.id)" type="button">×</button>
                                                    <span v-if="Number(vo.type) == 1">
                                                        [选择框]{{vo.title}}
                                                    </span>
                                                    <span v-if="Number(vo.type) == 0">
                                                        [输入框]{{vo.title}}
                                                    </span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <select v-model="item.type" class="form-control" @change="changeType(index,item)">
                                                <option value="0">不关联业务</option>
                                                <option value="1">巡更</option>
                                                <option value="2">巡视</option>
                                                <option value="3">巡查</option>
                                                <option value="4">巡检</option>
                                                <option value="5">日常工作</option>
                                                <option value="6">设备台账</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" :id="`bussbtn${index}`" :url="`{:url('QualityPlan/buslist',[],false,false)}/idx/${index}/type/${item.type}`" onclick="selectBuss(this)" class="btn btn-sm btn-primary">选择关联项</button>
                                            <div  v-if="item.buss.length > 0">
                                                <div v-for="(vo,idx) in item.buss" :key="idx" class="alert alert-success alert-dismissable" style="padding: 5px;margin-bottom: 5px;width: 90%;">
                                                    <button class="close" @click="delBuss(index,vo.id)" type="button">×</button>
                                                    {{vo.title}}
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <a href="javascript:;" @click="delGroup(index)" class="btn btn-danger btn-sm">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                            <!--<label class="col-sm-2 control-label">地点<span class="text-danger">*</span></label>-->
                            <!--<div class="col-sm-8">-->
                                <!--<input type="hidden" name="addrs" value="" id="addrForms">-->
                                <!--<button class="btn btn-sm btn-primary" type="button" @click="selectAddr()">添加检查项</button>-->
<!--&lt;!&ndash;                                <button class="btn btn-sm btn-primary" type="button" @click="selectForm()">设置检查项</button>&ndash;&gt;-->
                                <!--<button class="btn btn-sm btn-danger" type="button" @click="delAddrs">移除</button>-->
                                <!--<button class="btn btn-sm btn-primary" type="button" @click="sortAddrs">确定排序</button>-->

                                <!--<el-table-->
                                        <!--v-if="tableData.length > 0"-->
                                        <!--:data="tableData"-->
                                        <!--height="250"-->
                                        <!--border-->
                                        <!--@selection-change="handleSelectionChange"-->
                                        <!--style="width: 100%">-->
                                    <!--<el-table-column-->
                                            <!--type="selection"-->
                                            <!--width="60">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                            <!--prop="addrTitle"-->
                                            <!--label="检查项">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column prop="sorts" label="排序">-->
                                        <!--<template slot-scope="scope">-->
                                            <!--<input type="number" step="1" class="form-control" v-model="scope.row.sorts">-->
                                        <!--</template>-->
                                    <!--</el-table-column>-->
                                <!--</el-table>-->

                                <!--<el-dialog-->
                                        <!--title="选择地点"-->
                                        <!--:visible.sync="dialogVisibleAddr"-->
                                        <!--width="500px"-->
                                        <!--:before-close="handleClose"-->
                                <!--&gt;-->
                                    <!--<el-input-->
                                            <!--placeholder="请输入"-->
                                            <!--v-model="addrkeyword"-->
                                            <!--@input="searchAddr"-->
                                            <!--clearable>-->
                                    <!--</el-input>-->
                                    <!--<el-table-->
                                            <!--ref="singleTable"-->
                                            <!--:data="addrs"-->
                                            <!--height="200"-->
                                            <!--@selection-change="handleSelectionChangeAddr"-->
                                            <!--style="width: 100%">-->
                                        <!--<el-table-column-->
                                                <!--type="selection"-->
                                                <!--width="60">-->
                                        <!--</el-table-column>-->
                                        <!--<el-table-column-->
                                                <!--property="title"-->
                                                <!--label="名称"-->
                                        <!--&gt;-->
                                        <!--</el-table-column>-->
                                    <!--</el-table>-->
                                    <!--<span slot="footer" class="dialog-footer">-->
                                    <!--<el-button @click="dialogVisibleAddr = false">取 消</el-button>-->
                                    <!--<el-button type="primary" @click="saveAddr">确 定</el-button>-->
                                <!--</span>-->
                                <!--</el-dialog>-->

                                <!--<el-dialog-->
                                        <!--title="选择检查项"-->
                                        <!--:visible.sync="dialogVisibleForm"-->
                                        <!--width="500px"-->
                                        <!--:before-close="handleCloseForm"-->
                                <!--&gt;-->
                                    <!--<el-input-->
                                            <!--placeholder="请输入"-->
                                            <!--v-model="formkeyword"-->
                                            <!--@input="searchForm"-->
                                            <!--clearable>-->
                                    <!--</el-input>-->
                                    <!--<el-table-->
                                            <!--ref="singleTable2"-->
                                            <!--:data="forms"-->
                                            <!--height="200"-->
                                            <!--@selection-change="handleCurrentChange"-->
                                            <!--style="width: 100%">-->
                                        <!--<el-table-column-->
                                                <!--type="selection"-->
                                                <!--width="60">-->
                                        <!--</el-table-column>-->
                                        <!--<el-table-column-->
                                                <!--property="title"-->
                                                <!--label="名称"-->
                                        <!--&gt;-->
                                        <!--</el-table-column>-->
                                    <!--</el-table>-->
                                    <!--<span slot="footer" class="dialog-footer">-->
                                    <!--<el-button @click="dialogVisibleAddr = false">取 消</el-button>-->
                                    <!--<el-button type="primary" @click="saveForm">确 定</el-button>-->
                                <!--</span>-->
                                <!--</el-dialog>-->
                            <!--</div>-->
                        <!--</div>-->


                    </div>


                    <div class="form-group">
                        <label class="col-sm-2 control-label">检查人员<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            {:widget_view('common/multiselect',['name'=>'user_ids','lists' =>$user, 'val' =>isset($info)?$info['task_user']:[]])}
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">开始时间<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input  class="form-control" id="date" readonly name="start_time" value="{$info.start_time|default=$start}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">结束时间<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input class="form-control" id="date-one" readonly name="end_time" value="{$info.end_time|default=$end}">
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-2">
                            <button class="btn btn-primary ajax-post" data-layer_c="1" target-form="form-horizontal" type="submit">确 定</button>
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/layDate-v5.0.9/laydate.js"></script>
<script>
    var time =new Date();


    //日期时间选择器
    laydate.render({
        elem: '#date',
        type: 'datetime',
        format:'yyyy-MM-dd HH:mm',
        trigger: 'click' ,
        theme:'#148d8f'
        // value:dateFormat(),
    });
    laydate.render({
        elem: '#date-one',
        type: 'datetime',
        trigger: 'click' ,
        format:'yyyy-MM-dd HH:mm',
        theme:'#148d8f'

        // value:dateFormatH(),

    });

    //当前日期格式化
    function dateFormat() {
        var  year=time.getFullYear();
        var  mouth=time.getMonth()+ 1;
        if(mouth < 10){
            var  mouths='0'+mouth;
        }else {
            var  mouths=mouth;
        }
        var  day=time.getDate();
        if(day < 10){
            var  days='0'+day;
        }else {
            var  days=day;
        }
        var  hour=time.getHours();
        if(hour < 10){
            var  hours='0'+hour;
        }else {
            var  hours=hour;
        }
        var minute=time.getMinutes();
        if(minute < 10){
            var  minutes='0'+minute;
        }else {
            var  minutes=minute;
        }
        var dateStr=year+'-'+mouths+'-'+days+' '+hours+':'+minutes;
        return dateStr;
    }
    function dateFormatH() {
        var  year=time.getFullYear();
        var  mouth=time.getMonth()+ 1;
        if(mouth < 10){
            var  mouths='0'+mouth;
        }else {
            var  mouths=mouth;
        }
        var  day=time.getDate();
        if(day < 10){
            var  days='0'+day;
        }else {
            var  days=day;
        }
        var  hour=time.getHours();
        if(hour < 10){
            var  hours='0'+hour;
        }else {
            var  hours=hour;
        }
        var minute=time.getMinutes()+20;
        var dateStr=year+'-'+mouths+'-'+days+' '+hours+':'+minute;
        return dateStr;
    }


    var ads = {:json_encode($patrolForm)};
    var frs = [];
    var addrForms = {:json_encode($info['addrForms'])};
    var lis = [];
    var vm = new Vue({
        el: '#vue-plan',
        data: function() {
            return {
                title: '',
                dialogVisible: false,
                step: 0,
                date: '',
                tableData: addrForms,
                groups: addrForms,
                selAddrForms: [], // 选择的地址表单
                addrs: ads,
                selAddrs:[], // 选择地址
                dialogVisibleAddr: false,
                addrkeyword: '',
                forms: frs,
                selForm: null,
                formkeyword: '',
                dialogVisibleForm: false,
                lines: lis,
                inOrder: 0
            }
        },
        watch: {
            nTableData(){
                console.log('nTableData1111');
                $('#addrForms').val(JSON.stringify(this.tableData));
            },
            nLines(){
                $('#addrFormsLines').val(JSON.stringify(this.lines));
            },
            inOrder(){
                $('#inOrder').val(this.inOrder);
            },
            addrIds() { // 以保存的地址id
                console.log('tableData',this.tableData);
                let lines1 = [];
                if(this.tableData.length >= 2){
                    for (let i in this.tableData){
                        if(i < this.tableData.length - 1){
                            lines1.push({
                                s: this.tableData[i].addrId,
                                st: this.tableData[i].addrTitle,
                                e: this.tableData[Number(i)+1].addrId,
                                et: this.tableData[Number(i)+1].addrTitle,
                                kd: 0,
                                fd: 0,
                            })
                        }
                    }
                }

                this.lines = JSON.parse(JSON.stringify(lines1));
                console.log('lines2222',this.lines);
            },
            allgroups(){
                if(this.groups.length > 0){
                    $('#groupbox').val(JSON.stringify(this.groups));
                }else{
                    $('#groupbox').val('');
                }
            }
        },
        computed: {
            addrIds() { // 以保存的地址id
                console.log('111ssss');
                let ids = [];
                this.tableData.forEach((item) => {
                    ids.push(item.addrId);
                });
                return ids;
            },
            allgroups() {
                return JSON.parse(JSON.stringify(this.groups));
            },
            nTableData() { // 以保存的地址id
                return JSON.parse(JSON.stringify(this.tableData));
            },
            nLines() { // 以保存的地址id
                return JSON.parse(JSON.stringify(this.lines));
            },
        },
        created(){
            // this.tableData = addrForms;
            // this.lines = lis;
            $('#addrForms').val(JSON.stringify(this.tableData));
            // $('#addrFormsLines').val(JSON.stringify(this.lines));
            // $('#inOrder').val(this.inOrder);
        },
        methods: {
            handleSelectionChange(val){
                console.log(val);
                this.selAddrForms = val;
            },
            handleClose(){
                this.dialogVisibleAddr = false;
            },
            handleSelectionChangeAddr(val){
                console.log(val);
                this.selAddrs = val;
            },
            selectAddr(){
                console.log('aaaaaaaaaaa');
                this.dialogVisibleAddr = true;
                this.addrkeyword = '';
                this.addrs = ads.filter((item) => {
                    return !this.addrIds.includes(item.id);
                });
                this.selAddrs = [];
                console.log('bbbbbbbbb',this.addrs);
            },
            sortAddrs(){
                let ll = JSON.parse(JSON.stringify(this.tableData));
                ll.sort((a, b) => {
                    return Number(a.sorts) > Number(b.sorts) ? 1 : -1;
                });
                this.tableData = [];
                this.$nextTick(() => {
                    this.tableData = JSON.parse(JSON.stringify(ll));
                });
            },
            searchAddr(){
                this.addrs= [];
                this.$nextTick(() => {
                    if(this.addrkeyword){
                        this.addrs = ads.filter((item) => {
                            return item.title.indexOf(this.addrkeyword) !== -1;
                        });
                    }else{
                        this.addrs = ads;
                    }
                });
            },
            saveAddr(){
                const tbs = this.tableData;
                this.selAddrs.forEach((item) => {
                    if(!this.addrIds.includes(item.id)){
                        tbs.push({
                            'addrId': item.id,
                            'addrTitle': item.title,
                            'sorts': 0,
                        });
                    }
                });
                this.dialogVisibleAddr = false;
                this.$nextTick(() => {
                    this.tableData = tbs;
                });
            },
            moveUp(idx,obj){
                console.log(idx,obj);
                if(idx > 0){
                    let old = JSON.parse(JSON.stringify(this.tableData[idx]));
                    let up = JSON.parse(JSON.stringify(this.tableData[idx - 1]));
                    let tbs = this.tableData;
                    this.tableData = [];
                    this.$nextTick(() => {
                        tbs[idx] = up;
                        tbs[idx - 1] = old;
                        this.tableData = tbs;
                    })
                }
                console.log(this.tableData);
            },
            moveDown(idx,obj){ // 下移
                console.log(idx,obj);
                let length = this.tableData.length;
                if(idx < length - 1){
                    let old = JSON.parse(JSON.stringify(this.tableData[idx]));
                    let up = JSON.parse(JSON.stringify(this.tableData[idx + 1]));
                    let tbs = this.tableData;
                    this.tableData = [];
                    this.$nextTick(() => {
                        tbs[idx] = up;
                        tbs[idx + 1] = old;
                        this.tableData = tbs;
                    })
                }
            },
            delBuss(idx,bidx){
                console.log(idx,bidx);
                let ggs = JSON.parse(JSON.stringify(this.groups));
                let ng = [];
                ggs.forEach((item,index) => {
                    if(Number(idx) == Number(index)){
                    let fggs = JSON.parse(JSON.stringify(item.buss));
                    let fng = [];
                    fggs.forEach((item2,index2) => {
                        if(Number(bidx) != Number(item2.id)){
                        fng.push(item2);
                    }
                });
                    item.buss = JSON.parse(JSON.stringify(fng));
                }
                ng.push(item);
            });
                this.groups = JSON.parse(JSON.stringify(ng));
            },
            delAddrs(){ // 移除
                let sids = [];
                this.selAddrForms.forEach((item) => {
                    sids.push(item.addrId);
                });
                if(sids.length == 0){
                    this.$message.error('未选择地点');
                    return false;
                }
                let tbs = this.tableData;
                this.tableData = [];
                this.$nextTick(() => {
                    this.tableData = tbs.filter((item) => {
                        return !sids.includes(item.addrId);
                    });
                    this.selAddrForms = [];
                });

                console.log(this.selAddrForms,sids,this.tableData);
            },
            handleCurrentChange(val){ // 选中检查项
                console.log(val);
                this.selForm = val;
            },
            handleCloseForm(){
                this.dialogVisibleForm = false;
            },
            searchForm(){
                this.forms= [];
                this.$nextTick(() => {
                    if(this.formkeyword){
                        this.forms = frs.filter((item) => {
                            return item.title.indexOf(this.formkeyword) !== -1;
                        });
                    }else{
                        this.forms = frs;
                    }
                });
            },
            saveForm(){
                console.log('1111');
                const tbs = this.tableData;
                this.tableData = [];

                let sids = [];
                this.selAddrForms.forEach((item) => {
                    sids.push(item.addrId);
                });
                tbs.forEach((item) => {
                    if(sids.includes(item.addrId)){
                        // item.formId = this.selForm?this.selForm.id:0;
                        // item.formTitle = this.selForm?this.selForm.title:'';
                        const ffs = [];
                        this.selForm.forEach((fitem) => {
                            ffs.push({
                                id: fitem.id,
                                title: fitem.title
                            });
                        });
                        item.forms = JSON.parse(JSON.stringify(ffs));
                    }
                });

                this.dialogVisibleForm = false;
                this.$nextTick(() => {
                    this.tableData = tbs;
                });
            },
            selectForm(idx,obj){
                console.log(111);

                console.log(idx,obj,this.groups);
                this.groups.forEach((item,index) => {
                    if(Number(idx) == Number(index)){
                    item.forms = obj;
                    console.log(idx,index);
                }
                    });
                        let ids = [];
                        obj.forEach((item) => {
                            ids.push(item.id.toString());
                    });
                if(ids.length > 0){
                    $('#formsbtn'+idx).attr('data-ids',JSON.stringify(ids));
                }else{
                    $('#formsbtn'+idx).attr('data-ids','');
                }
                localStorage.removeItem("selectids");
            },
            selectBuss(idx,obj){
                console.log(idx,obj,this.groups);
                this.groups.forEach((item,index) => {
                    if(Number(idx) == Number(index)){
                    item.buss = obj;
                    console.log(idx,index,item);
                }
            });
                let ids = [];
                obj.forEach((item) => {
                    ids.push(item.id.toString());
            });
                if(ids.length > 0){
                    $('#bussbtn'+idx).attr('data-ids',JSON.stringify(ids));
                }else{
                    $('#bussbtn'+idx).attr('data-ids','');
                }
                localStorage.removeItem("selectids");
            },
            changeType(idx,obj){
                let url = "{:url('QualityPlan/buslist',[],false,false)}/idx/"+idx+"/type/"+obj.type;
                console.log(obj);
                this.groups.forEach((item,index) => {
                    if(Number(idx) == Number(index)){
                    item.buss = [];
                }
            });
                $('#bussbtn'+idx).attr('data-ids','');

                $('#bussbtn'+idx).attr('url',url);
            },
            delGroup(idx){
                let ggs = JSON.parse(JSON.stringify(this.groups));
                let ng = [];
                ggs.forEach((item,index) => {
                    if(Number(idx) != Number(index)){
                    ng.push(item);
                }
            });
                this.groups = JSON.parse(JSON.stringify(ng));
            },
            addGroup(){
                this.groups.push({
                    title: '',
                    forms: [],
                    type: 0,
                    buss: []
                });
            },
            delForms(idx,fidx){
                console.log(idx,fidx);
                let ggs = JSON.parse(JSON.stringify(this.groups));
                let ng = [];
                ggs.forEach((item,index) => {
                    if(Number(idx) == Number(index)){
                    let fggs = JSON.parse(JSON.stringify(item.forms));
                    let fng = [];
                    fggs.forEach((item2,index2) => {
                        if(Number(fidx) != Number(item2.id)){
                        fng.push(item2);
                    }
                });
                    item.forms = JSON.parse(JSON.stringify(fng));
                }
                ng.push(item);
            });
                this.groups = JSON.parse(JSON.stringify(ng));
            },
            getDateAll(starDay, endDay) { // 获取两个时间段的所有日期
                var arr = [];
                var dates = [];
                // 设置两个日期UTC时间
                var db = new Date(starDay);
                var de = new Date(endDay);
                // 获取两个日期GTM时间
                var s = db.getTime() - 24 * 60 * 60 * 1000;
                var d = de.getTime() - 24 * 60 * 60 * 1000;
                // 获取到两个日期之间的每一天的毫秒数
                for (var i = s; i <= d; ) {
                    i = i + 24 * 60 * 60 * 1000;
                    arr.push(parseInt(i));
                }
                // 获取每一天的时间  YY-MM-DD
                for (var j in arr) {
                    var time = new Date(arr[j]);
                    var year = time.getFullYear(time);
                    var mouth =
                        time.getMonth() + 1 >= 10
                            ? time.getMonth() + 1
                            : "0" + (time.getMonth() + 1);
                    var day =
                        time.getDate() >= 10
                            ? time.getDate()
                            : "0" + time.getDate();
                    var YYMMDD = year + "-" + mouth + "-" + day;
                    dates.push(YYMMDD);
                }
                return dates;
            },
            getWeekByDay(dateString,t=0) { // 获取某天是周几
                var dateArray = dateString.split("-");
                date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
                if(t == 1){
                    return "周" + "日一二三四五六".charAt(date.getDay());
                }else{
                    return date.getDay();
                }
            }
        }
    })
    function selectBuss(_self) {
        let ids = $(_self).attr('data-ids');
        if(ids){
            localStorage.setItem("selectids", ids);
        }else{
            localStorage.removeItem("selectids");
        }

        let url = $(_self).attr('url');
        if(!url){
            layer.msg('请选择关联业务');
            return false;
        }
        layer_open(_self,0);
    }
    function selectForms(_self) {
        let ids = $(_self).attr('data-ids');
        if(ids){
            localStorage.setItem("selectids", ids);
        }else{
            localStorage.removeItem("selectids");
        }
        layer_open(_self,0);
    }
</script>

{/block}