上传图片相关

modules/bills_lib/controllers/bills_permissionController.js

@@ -3,6 +3,14 @@
  */
 let billsController = require("./bills_lib_controllers");
 import baseController from "../../common/base/base_controller";
+import fs from 'fs';
+import path from 'path';
+import multiparty from 'multiparty';
+const uuidV1 = require('uuid/v1');
+
+const shareDir = 'public/share/images';
+const imgTriggers = ['billsRecharge', 'rationExplanation', 'rationRuleText'];
+
 
 class billsPermContr extends baseController{
     getCurrentUniqId(req, res){
@@ -59,8 +67,110 @@ class billsPermContr extends baseController{
     isUsed(req, res){
         billsController.isUsed(req, res);
     }
+    /*
+    *上传图片
+    * */
     uploadImg(req, res){
+        let uploadDir = path.join(req.app.locals.rootDir, shareDir);
+        let form = new multiparty.Form({uploadDir: uploadDir});
+        form.parse(req, async function(err, fields, files){
+            try {
+                const file = typeof files.file !== 'undefined' ? files.file[0] : null;
+                if(err || !file) {
+                    throw '上传失败';
+                }
+                //触发上传图片的地方
+                const trigger = typeof fields.trigger !== 'undefined' && fields.trigger.length > 0 ? fields.trigger[0] : null;
+                if (!trigger || !imgTriggers.includes(trigger)) {
+                    throw '该操作没有上传权限'
+                }
+                //根据触发源放置文件到相关文件夹
+                let triggerPath = path.join(uploadDir, trigger);
+                if (!fs.existsSync(triggerPath)) {
+                    fs.mkdirSync(triggerPath);
+                }
+                //文件后缀
+                let px = file.originalFilename.split('.').pop();
+                //时间戳重命名图片并移动文件
+                let newFileName = Date.now() + '.' + px;
+                if (fs.existsSync(newPath)) {
+                    newFileName += uuidV1();
+                }
+                let newPath = path.join(triggerPath, newFileName);
+                fs.renameSync(file.path, newPath);
+                //返回图片域名后的url
+                res.json({error: 0, data: `${shareDir}/${trigger}/${newFileName}`, message: 'success'});
+            } catch (err) {
+                console.log(err);
+                res.json({error: 1, data: null, message: err});
+            }
+        });
+    }
+    /*
+    * 删除图片
+    * */
+    delImg(req, res){
+        try {
+            let data = JSON.parse(req.body.data),
+                trigger = data.trigger,
+                url = data.url;
+            if (!imgTriggers.includes(trigger)) {
+                throw '该操作没有权限';
+            }
+            //拼接完整的删除路径
+            let delUrl = path.join(req.app.locals.rootDir, url);
+            fs.unlinkSync(delUrl);
+            res.json({error: 0, data: null, message: 'success'});
+        } catch(err) {
+            res.json({error: 1, data: null, message: err});
+        }
+    }
+    /*
+     *  根据页码加载图片
+     *  返回总页码和当前页码的图片信息
+     * */
+    loadImgs(req, res){
+        try {
+            let data = JSON.parse(req.body.data),
+                trigger = data.trigger,
+                page = data.page;
+            if (!imgTriggers.includes(trigger)) {
+                throw '该操作没有权限';
+            }
+            //每页显示的图片数
+            const perImgs = 3;
+            //总的图片信息
+            let triggerPath = path.join(req.app.locals.rootDir, shareDir, trigger);
+            if (!fs.existsSync(triggerPath)) {
+                fs.mkdirSync(triggerPath);
+            }
+            let allImgs = fs.readdirSync(triggerPath);
+            //将图片按照时间排序,降序
+            allImgs.sort(function (a, b) {
+                let aV = a.split('.')[0],
+                    bV = b.split('.')[0];
+                    if(aV > bV) {
+                        return -1;
+                    } else if(aV < bV) {
+                        return 1;
+                    }
+                    return 0;
+            });
+            let pageCount = Math.ceil(allImgs.length / perImgs) || 1;
+            //当前页图片信息
+            let startIdx = (page - 1) * perImgs,
+                endIdx = startIdx + 3,
+                currentPageArr = allImgs.slice(startIdx, endIdx),
+                currentImgsUrl = [];
+            for (let img of currentPageArr){
+                currentImgsUrl.push(`${shareDir}/${trigger}/${img}`);
+            }
+            res.json({error: 0, data: {pageCount: pageCount, currentImgsUrl: currentImgsUrl}, message: 'success'});
 
+        } catch (err) {
+            console.log(err);
+            res.json({error: 1, data: {pageCount: 1, currentImgsUrl: []}, message: err});
+        }
     }
 
 }

modules/bills_lib/routes/bills_lib_routes.js

@@ -31,6 +31,10 @@ module.exports =function (app) {
     billsRouter.post("/getStdBillsLibName", billsLibContr.auth, billsLibContr.init, billsLibContr.getStdBillsLibName);
     //上传图片
     billsRouter.post('/uploadImg', billsContr.uploadImg);
+    //删除图片
+    billsRouter.post('/delImg', billsContr.delImg);
+    //加载图片
+    billsRouter.post('/loadImgs', billsContr.loadImgs);
 
     billsRouter.post("/upMove", billsContr.auth, billsContr.init, billsContr.upMove);
     billsRouter.post("/downMove", billsContr.auth, billsContr.init, billsContr.downMove);

public/web/PerfectLoad.js

@@ -3,6 +3,9 @@
  */
 
 jQuery.bootstrapLoading = {
+    isLoading: function () {
+        return $('#loadingPage').is(':visible');
+    },
     start: function (options) {
         var defaults = {
             opacity: 0.5,

web/common/html/uploadImg.html

@@ -15,7 +15,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="row">
+                <div class="row" id="imgsDiv">
                     <div class="col-4">
                         <div class="card">
                             <img class="card-img-top" src="" alt="Card image cap" height="180px">
@@ -41,9 +41,9 @@
                         </div>
                     </div>
                     <div class="btn-group ml-3 mt-3">
-                        <button class="btn btn-sm btn-secondary" disabled="">上一页</button>
-                        <button class="btn btn-sm btn-secondary disabled">1 / 3</button>
-                        <button class="btn btn-sm btn-secondary">下一页</button>
+                        <button id="prevPage" class="btn btn-sm btn-secondary" disabled="">上一页</button>
+                        <button id="pageInfo" class="btn btn-sm btn-secondary disabled">1 / 3</button>
+                        <button id="nextPage" class="btn btn-sm btn-secondary">下一页</button>
                     </div>
                 </div>
             </div>

web/common/js/uploadImg.js

@@ -8,35 +8,132 @@
  * @version
  */
 
+$(document).ready(function () {
+    //每页显示的图片数（后端也进行了控制）
+    const perImgs = 3;
+    /*
+     * 上传图片，清单规则、定额说明、定额工程量计算规则共用
+     * 通过各自的上传图片按钮value值判定触发来源
+     * 根据触发来源放置图片位置，一个来源一个文件夹，便于管理
+     * */
+    let curTrigger = '';
+    //同一页面中的所有触发器（定额中的说明和工程量计算规则都能上传图片）
+    let allTriggers = $('.uploadImgTrigger');
+    for(let theTrigger of allTriggers){
+        //点击上传图片
+        $(theTrigger).click(function () {
+            curTrigger = $(theTrigger).attr('trigger');
+            loadImges(curTrigger, 1);
+        });
+    }
+    $('#uploadImgFile').change(function(){
+        let file = $(this)[0],
+            img = file.files[0],
+            trigger = curTrigger;//触发源
+        if(img){
+            let formData = new FormData();
+            formData.append('file', img);
+            formData.append('trigger', trigger);
+            $.ajax({
+                url: '/stdBillsEditor/uploadImg',
+                type: 'POST',
+                data: formData,
+                cache: false,
+                contentType: false,
+                processData: false,
+                beforeSend: function() {
+                    $.bootstrapLoading.start();
+                },
+                success: function(response){
+                    loadImges(trigger, 1);
+                },
+                error: function(){
+                    alert('上传失败');
+                    $.bootstrapLoading.end();
+                }
+            });
+        }
+    });
 
-/*
-* 上传图片，清单规则、定额说明、定额工程量计算规则共用
-* 通过各自的上传图片按钮value值判定触发来源
-* 根据触发来源放置图片位置，一个来源一个文件夹，便于管理
-* */
-$('#uploadImgFile').change(function(){
-    let file = $(this)[0],
-        img = file.files[0],
-        trigger = $('#uploadImgTrigger').val();//触发源
-    if(img){
-        let formData = new FormData();
-        formData.append('img', img);
-        formData.append('trigger', trigger);
-        $.ajax({
-            url: '/stdBillsEditor/uploadImg',
-            type: 'POST',
-            data: formData,
-            cache: false,
-            contentType: false,
-            beforeSend: function() {
-                $.bootstrapLoading.start();
-            },
-            success: function(response){
+    /*
+     * 根据触发源和页码，按时间大小降序加载图片
+     * @param {String}trigger(触发源，同源同文件夹) {Number}page(要展示的页码)
+     * */
+    function loadImges(trigger, page) {
+        if(!$.bootstrapLoading.isLoading()){
+            $.bootstrapLoading.start();
+        }
+        CommonAjax.post('/stdBillsEditor/loadImgs', {trigger, page}, function (rstData) {
+            initImgsDiv(page, rstData.pageCount, rstData.currentImgsUrl);
+            if($.bootstrapLoading.isLoading){
                 $.bootstrapLoading.end();
-            },
-            error: function(){
+            }
+        }, function () {
+            if($.bootstrapLoading.isLoading){
                 $.bootstrapLoading.end();
             }
         });
     }
-});
+
+    /*
+     * 根据图片路径删除图片
+     * @param {String}trigger(操作源) {String}url(要删除图片的url)
+     * */
+    function delImg(trigger, url) {
+        $.bootstrapLoading.start();
+        CommonAjax.post('/stdBillsEditor/delImg', {trigger, url}, function (rstData) {
+            let curPage = parseInt($('#pageInfo').text().trim().split('/')[0]);
+            loadImges(trigger, curPage);
+        }, function () {
+            $.bootstrapLoading.end();
+        });
+    }
+
+    /*
+    * 设置图片展示DIV
+    * @param {Number}curPage(当前页码) {Number}pageCount(页面总数) {Array}imgsUrl(所要展示图片的Url域后片段)
+    * @return{void}
+    * */
+    function initImgsDiv(curPage, pageCount, imgsUrl) {
+        let origin = window.location.origin;
+        let trigger = curTrigger;
+        $('#prevPage').removeAttr('disabled');
+        $('#nextPage').removeAttr('disabled');
+        if(curPage <= 1){
+            $('#prevPage').attr('disabled', '');
+        }
+        if(curPage == pageCount){
+            $('#nextPage').attr('disabled', '');
+        }
+        $('#pageInfo').text(`${curPage} / ${pageCount}`);
+        $('#imgsDiv').find('.card').remove();
+        for(let imgUrl of imgsUrl){
+            let idx = imgsUrl.indexOf(imgUrl);
+            if(idx < perImgs){
+                //时间戳转化成时间显示
+                let date = new Date(parseInt(imgUrl.split('/').pop().split('.')[0])).toLocaleString();
+                date = date.replace(new RegExp('/', 'g'), '-').split(' ')[0];
+                let cardHtml = `<div class="card"><img class="card-img-top" src="${origin}/${imgUrl}" alt="Card image cap" height="180px"><div class="card-block"><p class="card-text">
+                                <input class="form-control form-control-sm" value="<img src='${origin}/${imgUrl}'>" readonly="readonly"><small class="mr-2">${date} 上传</small>
+                                <a href="javascript:void(0);" class="text-danger" delUrl="${imgUrl}" id="del${idx}">删除</a></p></div></div>`;
+                $('#imgsDiv').find(`.col-4:eq(${idx})`).html(cardHtml);
+                //删除图片
+                $(`#del${idx}`).click(function () {
+                    delImg(trigger, $(this).attr('delUrl'));
+                });
+            }
+        }
+    }
+    //上一页
+    $('#prevPage').click(function () {
+        let curPage = parseInt($('#pageInfo').text().trim().split('/')[0]) - 1;
+        //加载图片
+        loadImges(curTrigger, curPage);
+    });
+    //下一页
+    $('#nextPage').click(function () {
+        let curPage = parseInt($('#pageInfo').text().trim().split('/')[0]) + 1;
+        //加载图片
+        loadImges(curTrigger, curPage);
+    });
+});

web/maintain/bills_lib/html/qingdan.html

@@ -85,7 +85,7 @@
                   </div>-->
                   <div class="form-group">
                       <a class="pull-right" href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写？</a>
-                      <!--<a id="uploadImgTrigger" value="billsRecharge" class="pull-right mr-3" href="javacript:void(0);" data-toggle="modal" data-target="#uploadimg" ><i class="fa fa-image"></i>上传图片</a>-->
+                      <a trigger="billsRecharge" class="pull-right mr-3 uploadImgTrigger" href="javacript:void(0);" data-toggle="modal" data-target="#uploadimg" ><i class="fa fa-image"></i>上传图片</a>
                       <label for="exampleTextarea">补注：</label>
                       <textarea class="form-control" id="exampleTextarea" rows="8"></textarea>
                   </div>
@@ -352,6 +352,8 @@
     <script src="/lib/tether/tether.min.js"></script>
     <script src="/lib/bootstrap/bootstrap.min.js"></script>
     <script src="/web/maintain/bills_lib/scripts/global.js"></script>
+    <script src="/public/web/PerfectLoad.js"></script>
+    <script src="/public/web/common_ajax.js"></script>
     <script src="/public/web/sheet/sheet_common.js"></script>
     <script src="/web/maintain/bills_lib/scripts/set_sheets.js"></script>
     <script src="/web/maintain/bills_lib/scripts/bills_lib_ajax.js"></script>

web/maintain/ration_repository/dinge.html

@@ -124,7 +124,7 @@
                             <div class="tab-pane" id="tsm" role="tabpanel">
                                 <div class="main-data">
                                 <div class="main-content m-2">
-                                    <p class="ml-3 mt-3"><a href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写？</a></p>
+                                    <a trigger="rationExplanation" class="mr-3 uploadImgTrigger" href="javacript:void(0);" data-toggle="modal" data-target="#uploadimg" ><i class="fa fa-image"></i>上传图片</a><a href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写？</a></p>
                                     <textarea id="explanationShow" name="editor" class="form-control "></textarea>
                                     <!--<h5>说明</h5>
                                     <textarea id="explanationShow" class="form-control" style="background: white;"></textarea>-->
@@ -136,7 +136,7 @@
                                 <div class="main-data">
                                     <!--         <div class="m-2"><a href="javacript:void(0);" data-toggle="modal" data-target="#editTjs" title="编辑">编辑计算规则</a></div>-->
                                     <div class="main-content m-2">
-                                        <p class="ml-3 mt-3"><a href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写？</a></p>
+                                        <a trigger="rationRuleText" class="mr-3 uploadImgTrigger" href="javacript:void(0);" data-toggle="modal" data-target="#uploadimg" ><i class="fa fa-image"></i>上传图片</a><a href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写？</a></p>
                                         <textarea id="ruleTextShow" name="editor" class="form-control "></textarea>
                                         <!--<h5>计算规则</h5>
                                         <textarea id="ruleTextShow" class="form-control" style="background: white;"></textarea>-->
@@ -172,7 +172,7 @@
                                 </div>
                             </div>
                         </div>
-                    </div i>
+                    </div>
                     <div class="main-side col-3 p-0" id="zmhsContent" style="display: none">
                         <div class="main-data-top-fluid" id="mainSpread">
                         </div>
@@ -538,6 +538,7 @@
                 </div>
             </div>
         </div>
+        <%include ../../common/html/uploadImg.html %>
         <!--弹出html填写帮助-->
         <div class="modal fade" id="help" style="display: none;" aria-hidden="true">
             <div class="modal-dialog" role="document">
@@ -626,6 +627,7 @@
         <script src="/lib/bootstrap/bootstrap.min.js"></script>
         <script src="/lib/lodash/lodash.js"></script>
         <script type="text/javascript" src="/web/maintain/ration_repository/js/global.js"></script>
+        <script src="/public/web/PerfectLoad.js"></script>
         <!-- zTree -->
         <script type="text/javascript" src="/lib/ztree/jquery.ztree.core.js"></script>
         <script type="text/javascript" src="/lib/ztree/jquery.ztree.excheck.js"></script>
@@ -657,6 +659,7 @@
         <script type="text/javascript" src="/web/maintain/ration_repository/js/coe.js"></script>
         <script src="/lib/codemirror/codemirror.js"></script>
         <script src="/lib/codemirror/xml.js"></script>
+        <script src="/web/common/js/uploadImg.js"></script>
         <script type="text/javascript">
             var exEditor = CodeMirror.fromTextArea(document.getElementById("explanationShow"), {
                 mode: "text/html",