caiping/app/admin/view/project/cost_proprietor/add.html

{extend name="common/base"/}
{block name="style"}
<style>
    .footer {
        width: 100%;
        height: 25px;
        text-align: center;
        margin-bottom: 0 !important;
        display: none;
    }

    .heading th {
        text-align: center;
    }

    .form td {
        text-align: center;
    }


    /* 日志 */
    .log_top {
        padding-left: 1vw;
    }

    .log_top span {
        margin: 0 0.5vw;
    }

    /* 1,1,1 */
    .log_commentary {
        color: rgb(0, 176, 80);
    }

    .log_company {
        color: rgb(255, 33, 0);
    }

    .log_content {
        width: fit-content;

        margin: 0.3vw 1.5vw 1vw 1.5vw;
        padding: 0.5vw 0vw;
        text-indent: 1.2em;
        line-height: 2.1vh;
        background-color: rgb(255, 255, 255);
        border-radius: 0.5vw;
        box-shadow: 0.19vw 0.16vw 0.4vw 0.03vw rgba(0, 0, 0, 0.13);
    }

    .log_content_color {
        /* background-color: rgb(250,250,250); */
    }

    .log_content_img img {

        /* width: 10%; */
        height: 150px;
        border-radius: 0.5vw;
        margin: 0.3vw 0;
        padding-right: 18px;
        padding-bottom: 7px;
        padding-left: 2px;
    }

    .log_item_top {
        height: 70%;
        overflow: scroll;
    }

    .log_item_top {
        height: 60vh;

    }

    .log_item_bottom {
        display: flex;
        /* height: 17vh; */
        /* border-top: 1px solid #eee; */
        margin: 0 1.5vw;
        /* background-color: rgb(250,250,250); */
    }

    .log_input input {
        width: 55vw;
        height: 10vh;
        border: #eee 1px solid;
    }

    .log_bottom_img {
        /* height: 5vh; */
    }

    .log_bottom_img img {
        height: 4vw;
        width: 6vw;
        border-radius: 0.5vw;
        margin: 0.5vw 0vw 0.5vw 0.3vw;
    }

    .log_bottom_left {
        width: 100%;
        margin-top: 1.5vh;
    }

    .log_bottom_right {
        width: 5%;
    }

    /* 上传图片 */
    .layui-upload-drag-self {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        line-height: 4vw;
        vertical-align: top;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        outline: 0;
        margin-right: 13px;
        float: left;
    }

    .layui-input-inlines-self {
        position: relative;
        margin-left: 90px;
        min-height: 36px;
        text-align: left;
    }

    .layui-upload-drag-self .layui-icon {
        font-size: 28px;
        color: #8c939d
    }

    .layui-upload-drag-self .img {
        position: relative;
        height: 148px;
        width: 148px;
    }

    .layui-upload-img {
        width: 148px;
        height: 148px;
        border-radius: 6px;
        margin-top: -3px;
        margin-left: -2px;
    }


    .handle {
        position: absolute;
        width: 148px;
        height: 100%;
        z-index: 100;
        border-radius: 6px;
        top: 0;
        background: rgba(59, 60, 61, 0.6);
        text-align: center;
    }

    .handle .icon-myself {
        z-index: 999;
        transition: all .3s;
        cursor: pointer;
        font-size: 25px;
        width: 25px;
        color: rgba(255, 255, 255, 0.91);
        margin: 0 4px;
    }

    .log_textarea {
        width: 89vw;
        height: 8vh;
        padding: 0.5vw;
        /* margin-right: 2vw; */
        margin: 1vw;
    }

    .log_button_img {
        width: 2vw;
    }

    .log_card {
        border: none !important;
    }

    /* 点击图片放大 */
    .content_img img {
        max-width: 100%;
        cursor: pointer;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center;

        z-index: 1;
    }

    .overlay img {
        margin-top: 4%;
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    .p-4 {
        background-color: rgb(255, 255, 255);
    }


    /*表格*/
    #tabniubi {
        width: 100%;
        margin: 10px 0;
        background-color: #fff;
        color: #5f5f5f;

    }

    #tabniubi th {
        padding: 9px 15px;
        min-height: 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        /* font-size: 14px; */
        border-width: 1px;
        border-style: solid;
        border-color: #e2e2e2;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    }

    #tabniubi tr:first-child {
        padding: 0;
        min-height: 0;
        line-height: 0;
        border-width: 0;
        border-style: none;
        border-color: #fff;
        font-size: 0;
    }

    #tabniubi tr:first-child th {
        padding: 0;
        min-height: 0;
        line-height: 0;
        border-width: 0;
        border-style: none;
        border-color: #fff;
        font-size: 0;
    }

    .form-title {
        background-color: rgb(241, 241, 241);
        color: rgb(95, 95, 95);
        border-color: rgb(241, 241, 241);
        font-weight: 600;
    }


    .forleft {
        text-align: left !important;
    }

    /*  .forright{
        text-align:right  !important;
    } */

    .layui-form-select dl dd.layui-this {
        background-color: #f8f8f8;
        color: rgb(23, 145, 233);
        font-weight: 700;
    }

    .layui-input, .layui-textarea {
        /* padding-left: 3.75vw; */
        color: #5f5f5f;
    }


    .upimg {
        width: 250px;
        height: 250px;
    }

    .fujianimg img {
        height: 5.5vh;
    }

    .filelist {
        width: 100%;
        overflow: auto;
        justify-content: flex-start;
        align-content: space-between;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        display: flex;

    }

    .filelist li {
        padding: 0.5vw 0.8vw 0.5vw 0.8vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        border-right: 1px solid #e2e2e2;
        float: left;
    }


    .filelist p {
        margin: 3px 0 5px 0;
        width: 7vw;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    #filesBox2 li {
        padding: 0.5vw 0.8vw 0.5vw 0.8vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        border-right: 1px solid #e2e2e2;
        float: left;
    }

</style>
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <table id="tabniubi" cellpadding="1" cellspacing="1">
        <tr>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
        </tr>
        <tr border="1">
            <th class="form-title">项目名称 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <input type="text" name="project_name" lay-verify="required" lay-reqText="请完善项目名称" value=""
                       autocomplete="off" placeholder="请输入项目名称" class="layui-input">
            </th>

            <th class="form-title">项目编号 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <input type="text" name="project_num" lay-verify="required" lay-reqText="请完善项目编号" value=""
                       autocomplete="off" placeholder="请输入项目编号" class="layui-input">
            </th>

            <th class="form-title">项目周期 <font style="color: red !important;">*</font></th>
            <th id="date" colspan="2">
                <div class="layui-input-inline" style="width: 47%;display: inline-flex;">
                    <input type="text" id="start_time" name="project_start_time" readonly lay-verify="required"
                           lay-reqText="请选择开始时间" placeholder="请选择" class="layui-input" value="">
                </div>
                -
                <div class="layui-input-inline" style="width: 47%;display: inline-flex;">
                    <input type="text" id="end_time" name="project_end_time" readonly lay-verify="required"
                           lay-reqText="请选择结束时间" placeholder="请选择" class="layui-input" value="">
                </div>
            </th>
        </tr>

        <tr>
            <th class="form-title">项目类型<font style="color: red !important;">*</font></th>
            <th colspan="2">
                <div>
                    <select name="engineering_type1" lay-verify="required">
                        <option value="">请选择项目类型</option>
                        <option value="1">预算</option>
                        <option value="2">结算</option>
                    </select>
                </div>
            </th>
            <th class="form-title">——</th>
            <th colspan="2">
                <div>
                    <select name="engineering_type2" lay-verify="required">
                        <option value="">请选择项目类型</option>
                        <option value="1">审核</option>
                        <option value="2">编制</option>
                    </select>
                </div>
            </th>
            <th class="form-title">工程类别</th>
            <th colspan="2">
                <input type="text" name="engineering_category" value="" autocomplete="off" placeholder="请输入工程类别"
                       class="layui-input">
            </th>
        </tr>

        <tr>
            <th class="form-title">项目区域</th>
            <th colspan="2">
                <div>
                    <div class="layui-form-item"
                         style="margin-bottom: 0;display: flex;flex-direction: row;justify-content: space-between;">
                        <div class="layui-input-inline" style="width: 6.5vw;">

                            <select id="province" lay-filter="province" name="province"></select>

                        </div>
                        <div class="layui-input-inline area" style="width: 6.5vw;">

                            <select id="city" lay-filter="city" name="city"></select>

                        </div>
                        <div class="layui-input-inline area" style="width: 6.5vw;">

                            <select id="area" lay-filter="area" name="area"></select>
                        </div>
                    </div>

                </div>
            </th>
        </tr>

        <tr>
            <th class="form-title">资金性质</th>
            <th>
                <input type="radio" name="fiscal_nature" value="财政资金" title="财政资金" lay-filter="tax" checked>
                <input type="radio" name="fiscal_nature" value="非财政资金" title="非财政资金" lay-filter="tax">
            </th>


            <th class="form-title entrust_unit">委托单位 <font style="color: red !important;">*</font></th>
            <th colspan="2" class="entrust_unit">
                <input type="text" name="entrust_unit_name" autocomplete="off" readonly value=""  lay-reqText="请输入委托单位" placeholder="请输入委托单位" class="layui-input get-entrust">
                <input type="hidden" name="entrust_unit" value="">
            </th>



            <th class="form-title review_unit">评审单位 <font style="color: red !important;">*</font></th>
            <th colspan="2" class="review_unit">
                <input type="text" name="review_unit_name" autocomplete="off" readonly value=""  lay-reqText="请输入评审单位" placeholder="请输入评审单位" class="layui-input customer-picker">
                <input type="hidden" name="review_unit" value="">
            </th>


            <th class="form-title">审批人 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <select name="sent_review_approver" lay-verify="required" lay-reqText="请选择审批人">
                    <option value="">请选择审批人</option>
                    {volist name="person" id="v"}
                    <option value="{$v.id}">{$v.nickname}</option>
                    {/volist}
                </select>
            </th>

        </tr>


        <tr>
            <th colspan="9" class="forleft">相关附件
                <button class="layui-btn layui-btn-xs layui-btn-danger" style="float: right;" type="button"
                        id="uploadBtn">上传附件
                </button>
            </th>
        </tr>

        <tr>
            <th colspan="9" class="fujianimg" style="padding: 9px 0;">
                <div id="filesBox2">
                    <div class="filelist" id="filesBigBox">
                        <ul id="filesBox" style="overflow: scroll;">
                        </ul>
                    </div>
                    {empty name="$file_array" }
                    <div class="layui-data-none">暂无附件</div>
                    {/empty}
                </div>
            </th>
        </tr>

    </table>

    <div class="py-3">
        <input type="hidden" name="id" value=""/>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="add">保存</button>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">提交</button>
    </div>


</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    var moduleInit = ['tool', 'oaTool'];
    var province = '';

    if (province == '') {
        province = '广西';
        city = '南宁市';
        area = '青秀区';
    }

    function Add() {
        var input1 = 0, input2 = 0;
        input1 = parseInt(document.getElementById("sent_review_amount").value);
        input2 = parseInt(document.getElementById("authorize_amount").value);
        if (input1 && input2) {
            var aa = input2 - input1;
            var bb = aa / input1 * 100;
            bb = bb.toFixed(2);
            $('[name="review_add_reduce_amount"]').val(aa);
            $('[name="review_add_reduce_rate"]').val(bb);
            $('#review_add_reduce_amount').html(aa);
            $('#review_add_reduce_rate').html(bb)
        } else {
            $('[name="review_add_reduce_amount"]').val('');
            $('[name="review_add_reduce_rate"]').val('');
            $('#review_add_reduce_amount').html('');
            $('#review_add_reduce_rate').html('')
        }
        // 总审定金额-总送审金额

    }

    function gouguInit() {
        var form = layui.form, tool = layui.tool, oaTool = layui.oaTool;

        let adress;
        //日期选择
        layui.laydate.render({
            elem: '#date',
            range: ['#start_time', '#end_time'],
            rangeLinked: true
        });

        $(".review_unit").hide();
        //radio选择
        form.on('radio(tax)', function (data) {


            if (data.value == "财政资金") {
                console.log(1)
                $(".entrust_unit").show();
                $(".review_unit").hide();
            } else {
                $(".review_unit").show();
                $(".entrust_unit").hide();
            }
        });


        $('.customer-picker').on('click', function () {
            let that = $(this);
            let callback = function(data){
                console.log(data);
                $('[name="review_unit"]').val(data.id);
                $('[name="review_unit_name"]').val(data.title);
            }
            oaTool.customerPicker(callback);
        });
        $('.get-entrust').on('click', function () {
            let that = $(this);
            let callback = function(data){
                console.log(data);
                $('[name="entrust_unit"]').val(data.id);
                $('[name="entrust_unit_name"]').val(data.title);

            }
            oaTool.getEntrust(callback);
        });

        let c = 1;

        //监听提交
        form.on('submit(add)', function (data) {
            if(data.field.fiscal_nature=="财政资金"){
                if(data.field.entrust_unit==""&&data.field.entrust_unit_name==""){
                    layer.msg("请选择委托单位")
                    return false;
                }
            }else {
                if(data.field.review_unit==""&&data.field.review_unit_name==""){
                    layer.msg("请选择评审单位")
                    return false;
                }
            }
            if (c) {
                let callback = function (e) {
                    c = 1
                    layer.msg(e.msg);
                    if (e.code == 0) {
                        tool.sideClose(1000);
                    }
                }
                var engineering_type1 = '';
                if (data.field.engineering_type1 == 1) {
                    engineering_type1 = '预算';
                } else if (data.field.engineering_type1 == 2) {
                    engineering_type1 = '结算';
                }
                var engineering_type2 = '';
                if (data.field.engineering_type2 == 1) {
                    engineering_type2 = '审核';
                } else if (data.field.engineering_type2 == 2) {
                    engineering_type2 = '编制';
                }
                if(engineering_type1!==""&&engineering_type2!==""){
                    data.field.engineering_type = engineering_type1 + "-" + engineering_type2;
                }
                data.field.file_ids = file_ids;
                tool.post("/admin/project.cost_proprietor/add", data.field, callback);
            }

            c = 0
            return false;
        });
        form.on('submit(save)', function (data) {
            if(data.field.fiscal_nature=="财政资金"){
                if(data.field.entrust_unit==""&&data.field.entrust_unit_name==""){
                    layer.msg("请选择委托单位")
                    return false;
                }
            }else {
                if(data.field.review_unit==""&&data.field.review_unit_name==""){
                    layer.msg("请选择评审单位")
                    return false;
                }
            }
            if (c) {
                let callback = function (e) {
                    c = 1
                    layer.msg(e.msg);
                    if (e.code == 0) {
                        tool.sideClose(1000);
                    }
                }
                var engineering_type1 = '';
                if (data.field.engineering_type1 == 1) {
                    engineering_type1 = '预算';
                } else if (data.field.engineering_type1 == 2) {
                    engineering_type1 = '结算';
                }
                var engineering_type2 = '';
                if (data.field.engineering_type2 == 1) {
                    engineering_type2 = '审核';
                } else if (data.field.engineering_type2 == 2) {
                    engineering_type2 = '编制';
                }
                data.field.file_ids = file_ids;
                if(engineering_type1!==""&&engineering_type2!==""){
                    data.field.engineering_type = engineering_type1 + "-" + engineering_type2;
                }
                tool.post("/admin/project.cost_proprietor/save", data.field, callback);
            }

            c = 0
            return false;
        });
        function fileCard(item){
            var host = window.location.host;
            var li = '';
            if(item.length>0){
                for(var a=0;a<item.length;a++){

                    let image = ['jpg','jpeg','png','gif'];
                    let doc = ['doc','docx','xls','xlsx','ppt','pptx','txt','pdf','zip','rar','7z'];
                    // let down = '<a href="'+item[a].filepath+'" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="'+item[a].name+'">下载</a>';
                    let down ='<a href="' + item[a]['filepath'] + '" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="' + item[a]['name'] + '">预览</a>';
                    // 判断元素是否在数组中
                    let path='/static/home/images/icon/file.png';
                    if (image.includes(item[a].fileext)) {
                        path=item[a].filepath;
                        down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-img">预览</span>';
                    } else if (doc.includes(item[a].fileext)){
                        path='/static/home/images/icon/'+item[a].fileext+'.png';
                    }

                    if(item[a].fileext == 'pdf'){
                        down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-pdf">预览</span>';
                    }
                    li += '<li id="'+item[a].id+'" data-id="'+item[a].id+'" data-title="'+item[a].name+'" data-ext="'+item[a].fileext+'"><img src="'+path+'" alt="'+item[a].filename+
                        '" style="object-fit: contain;" class="file-item"><p title="'+item[a].name+'">'+item[a].name+
                        '</p><div class="layui-btn-group">'+ down +
                        '<span class="layui-btn layui-btn-xs layui-btn-danger file-del">删除</span></div></li>';
                }

                return li;
            }
        }

        var file_ids = [];
        $('#filesBox').on('click','.file-del',function(){
            let id = $(this).parent().parent().data('id');
            layer.confirm('确定要删除该文件吗？', { icon: 3, title: '提示' }, function () {
                layer.closeAll();
                var index = file_ids.indexOf(id);

                if (index > -1) {
                    file_ids.splice(index, 1);
                }
                if(file_ids.length == 0){
                    $("#filesBox").append('<div id="nofile" class="layui-data-none" >暂无附件</div>');
                }
                console.log(file_ids);

                $("#" + id).remove();
            });
        })

        oaTool.addFile({
            type: 1,
            isSave: true,

            ajaxSave: function (res) {

                let callback = function (e) {
                    if (e.hasOwnProperty("msg")) {
                        layer.msg(e.msg);
                    }else{
                        layer.msg('上传成功！')
                    }

                    $('#nofile').remove();
                    $("#filesBox").append(fileCard(e));
                    file_ids.push(e[0].id)

                }

                tool.post("/admin/project.api/add_file", {

                    'file_id': res.data.id,
                }, callback);

            }
        });
        $('#filesBox2').on('click', '.file-del', function () {
            let id = $(this).parent().parent().data('id');
            layer.confirm('确定要删除该文件吗？请慎重', {icon: 3, title: '提示'}, function () {

                var index = file_ids.indexOf(id);

                if (index > -1) {
                    file_ids.splice(index, 1);
                }
                if(file_ids.length == 0){
                    $("#filesBox").append('<div id="nofile" class="layui-data-none" >暂无附件</div>');
                }
                console.log(file_ids);

                $("#" + id).remove();


            });
        })
        layui.use(['form', 'jquery'], function () {


            var form = layui.form;
            const $ = layui.jquery;
            let adress;
            $.ajax({
                type: "get", //使用get方式
                url: "/static/assets/layui/adress.json", //json文件相对于这个HTML的路径
                dataType: "json",
                async: false,
                success: function (data) {
                    //这个data就是json数据
                    adress = data
                    var province = Object.keys(adress)
                    var proStrs = '<option value="">省</option>';
                    for (var i = 0; i < province.length; i++) {
                        proStrs += '<option value="' + province[i] + '">' + province[i] + '</option>';
                    }

                    $("#province").html(proStrs);
                    layui.form.render("select")

                },
                error: function () {
                    layer.alert("地址请求失败！！ ");
                }
            });

            function getFirstAttr(obj) {

                for (var k in obj) return k;
            }

            function selectOption(selectedProvince, selectedCity = '', selectedArea = '') {
                var proStr = '<option value="">省</option>', cityStr = '<option value="">市</option>',
                    areaStr = '<option value="">县</option>';
                var pro = adress[selectedProvince], ci = adress[selectedProvince][selectedCity];
                for (var province in adress) {
                    if (province == selectedProvince) proStr += '<option value="' + province + '" selected>' + province + '</option>';
                    else proStr += '<option value="' + province + '">' + province + '</option>';
                }
                $("#province").html(proStr);

                for (var city in pro) {

                    if (city == selectedCity) cityStr += '<option value="' + city + '" selected>' + city + '</option>';
                    else cityStr += '<option value="' + city + '">' + city + '</option>';
                }
                $("#city").html(cityStr);

                for (var area in ci) {
                    if (area == "remove") {
                        continue;
                    }

                    if (ci[area] == selectedArea) areaStr += '<option value="' + ci[area] + '" selected>' + ci[area] + '</option>';
                    else areaStr += '<option value="' + ci[area] + '">' + ci[area] + '</option>';
                }
                $("#area").html(areaStr);

                form.render();
            }


            /*selectOption(1,2, 3);*/

            form.on('select(province)', function (data) {
                let thisProvince = data.value;
                let thisCity = getFirstAttr(adress[thisProvince]);

                selectOption(data.value);
            });

            form.on('select(city)', function (data) {

                selectOption($("#province").val(), data.value, getFirstAttr(data.value));
            });


        })
    }
</script>
{/block}
<!-- /脚本 -->