updates

Modals/DbTableClass.cs

@@ -57,7 +57,8 @@ public class DbTableClass
         public string invoice_uid { get; set; } = "";
         public string quotation_uid { get; set; } = "";
         public string invoice_name { get; set; } = "";
-        public string invoice_month { get; set; } = "";
+        public int invoice_year { get; set; } = 2024;
+        public int invoice_month { get; set; } = 1;
         public int invoice_noTaxMoney { get; set; } = 0;
         public string invoice_revoke { get; set; } = "N";
         public int invoice_version { get; set; } = 1;
@@ -76,6 +77,7 @@ public class DbTableClass
         public string payment_uid { get; set; } = "";
         public string quotation_uid { get; set; } = "";
         public string payment_method { get; set; } = "";
+        public string payment_methodname { get; set; } = "";
         public string payment_descript { get; set; } = "";
         public string payment_revoke { get; set; } = "N";
         public int payment_version { get; set; } = 1;

Views/Home/ProjectList.cshtml

@@ -57,6 +57,8 @@
     <script src="~/assets/javascript/pages/dataTables.bootstrap.js"></script>
     <script src="~/assets/vendor/datepicker/js/bootstrap-datepicker.min.js"></script>
     <script src="~/assets/vendor/datepicker/locales/bootstrap-datepicker.zh-TW.min.js"></script>
+    <script src="~/assets/vendor/sortablejs/Sortable.min.js"></script>
+    <script src="~/assets/vendor/nestable2/jquery.nestable.min.js"></script>
     <script src="~/assets/javascript/custom/projectlist.js" asp-append-version="true"></script>
 }
 
@@ -402,10 +404,48 @@
                         </div>
                     </div><!-- /.form-group -->
                     <div class="form-group">
-                        <label for="quotation_sa">製作及維護服務協議條款 (##客戶公司##m與##我們公司## 這兩串文字請勿異動) </label>
+                        <label for="quotation_sa">製作及維護服務協議條款 (##客戶公司## 與 ##我們公司## 這兩串文字請勿異動) </label>
                         <textarea class="form-control" id="quotation_sa" rows="6" placeholder="製作及維護服務協議條款"></textarea>
                         <textarea class="form-control" id="quotation_sa_old" rows="6" style="display:none;" placeholder="製作及維護服務協議條款"></textarea>
                     </div>
+                    <!-- grid row -->
+                    <div id="payment_div" class="row">
+                        <!-- grid column -->
+                        <div class="col-lg-12">
+                            <!-- .card -->
+                            <div class="card card-fluid">
+                                <div class="card-header border-bottom-0"> 付款方式 </div><!-- .nestable -->
+                                <div id="payment_group" class="dd" data-toggle="sortable" data-max-depth="1" data-type="payment_group">
+                                    <!-- .dd-list -->
+                                    <ol class="dd-list">
+                                    </ol><!-- /.dd-list -->
+                                </div><!-- /.nestable -->
+                                <!-- .card-footer -->
+                                <div class="card-footer">
+                                    <a href="javascript: void(0);" id="addPaymentBtn" data-type="addPayment" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> 新增付款方式</span></a>
+                                </div><!-- /.card-footer -->
+                            </div><!-- /.card -->
+                        </div><!-- /grid column -->
+                    </div>
+                    <!-- grid row -->
+                    <div id="invoice_div" class="row">
+                        <!-- grid column -->
+                        <div class="col-lg-12">
+                            <!-- .card -->
+                            <div class="card card-fluid">
+                                <div class="card-header border-bottom-0"> 發票開立品項 </div><!-- .nestable -->
+                                <div id="invoice_group" class="dd" data-toggle="sortable" data-max-depth="1" data-type="payment_group">
+                                    <!-- .dd-list -->
+                                    <ol class="dd-list">
+                                    </ol><!-- /.dd-list -->
+                                </div><!-- /.nestable -->
+                                <!-- .card-footer -->
+                                <div class="card-footer">
+                                    <a href="javascript: void(0);" id="addInvoiceBtn" data-type="addInvoice" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> 新增發票 </span></a>
+                                </div><!-- /.card-footer -->
+                            </div><!-- /.card -->
+                        </div><!-- /grid column -->
+                    </div>
                 </div><!-- /.modal-body -->
                 <!-- .modal-footer -->
                 <div class="modal-footer">
@@ -516,4 +556,96 @@
             </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div>
+</form><!-- /.modal -->
+
+<!--付款方式-->
+<!-- .modal -->
+<form id="clientModelPaymentForm" name="clientModelPaymentForm">
+    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="modelPaymentModalLabel" data-backdrop="static"
+         data-keyboard="false" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="modelMainItemModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">付款方式</span> <input id="group_Payment" type="text" class="form-control form-control-lg" value="" placeholder="付款方式" readonly="readonly" required="">
+                    </h6>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="payment_method" />
+                    <input type="hidden" id="payment_uid" />
+
+                    <div class="form-group">
+                        <label for="paymentMethod_select">單位</label>
+                        <select class="custom-select custom-select-sm" id="paymentMethod_select" name="paymentMethod_select" required="">
+                            <option value="">請選擇</option>
+                            <option value="cheque">支票</option>
+                            <option value="telegraphic">電匯</option>
+                            <option value="paycash">一次付清</option>
+                            <option value="downpayment">頭期款(即期支付)</option>
+                            <option value="custom">手動輸入</option>
+
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="payment_descript" class="form-control" value="" placeholder="付款說明" maxlength="90" required=""> <label for="payment_descript">付款說明</label>
+                        </div>
+                    </div>
+
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="paymentModalDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+
+<!--發票開立品項-->
+<!-- .modal -->
+<form id="clientModelInvoiceForm" name="clientModelInvoiceForm">
+    <div class="modal fade" id="invoiceModal" tabindex="-1" role="dialog" aria-labelledby="modelInvoiceModalLabel" data-backdrop="static"
+         data-keyboard="false" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="modelInvoiceModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">發票開立品項</span> <input id="group_Invoice" type="text" class="form-control form-control-lg" value="" placeholder="發票開立品項" readonly="readonly" required="">
+                    </h6>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="invoice_method" />
+                    <input type="hidden" id="invoice_uid" />
+
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <label class="control-label" for="invoice_name">品項</label> <input id="invoice_name" maxlength="32" type="text" class="form-control" />
+                    </div><!-- /.form-group -->
+
+                    <div class="form-group">
+                        <label class="control-label" for="invoice_date">發票開立月份</label>
+                        <input id="invoice_date" type="text" class="form-control flatpickr-input active" data-toggle="flatpickr" data-date-format="m.y" data-monthselect="true" readonly="readonly">
+                    </div>
+
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <label class="control-label" for="invoice_noTaxMoney">開立金額(未稅)</label> <input id="invoice_noTaxMoney" maxlength="12" type="text" class="form-control" />
+                    </div><!-- /.form-group -->
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="invoiceModalDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
 </form><!-- /.modal -->

wwwroot/assets/javascript/custom/projectlist.js

@@ -10,6 +10,8 @@ var quotation_total;
 
 var deledMainItems = [];
 var deledSubItems = [];
+var deledPayments = [];
+var deledInvoices = [];
 
 var preSubItem_name = '';
 var hasBind = 'N';
@@ -18,6 +20,7 @@ $(document).ready(function () {
     companyList();
     loadyearmonth();
     loadQuotationTable();
+    initInvoiceSelectItem();
 
     var actualDate = new Date(); // convert to actual date
     var prevDate = new Date(actualDate.getFullYear(), actualDate.getMonth() - 13, actualDate.getDate());
@@ -49,8 +52,21 @@ $(document).ready(function () {
         ]
     });
 
-    fpStart.setDate(new Date(startTxt + '/1'))
+    const fpInvoiceDate = flatpickr("#invoice_date", {
-    fpEnd.setDate(new Date(endTxt + '/1'))
+        "locale": "zh_tw",
+        "plugins": [
+            new monthSelectPlugin({
+                shorthand: true, //defaults to false
+                dateFormat: "Y/m", //defaults to "F Y"
+                altFormat: "Y M", //defaults to "F Y"
+                theme: "light" // defaults to "light"
+            })
+        ]
+    });
+
+    fpStart.setDate(new Date(startTxt + '/1'));
+    fpEnd.setDate(new Date(endTxt + '/1'));
+    fpInvoiceDate.setDate(new Date(endTxt + '/1'));
 
     $("#quotation_range").flatpickr({
         mode: 'range',
@@ -243,6 +259,10 @@ $(document).ready(function () {
 
                     $('#modelItem_div').html(htmlCode);
 
+                    $.each(obj.modelMainItemDetails, function (i, item) {
+                        $('#nest_' + item.modelMainItem_uid).nestable();
+                    });
+
                     updateGrandTotal();
                 } else {
                     alert(data.message);
@@ -373,7 +393,7 @@ $(document).ready(function () {
             var datauid = Math.floor(Math.random() * 999999999);
             var htmlCode = '';
 
-            htmlCode += '   <li class="dd-item dd-nodrag" data-model-subitem-uid="' + datauid + '" data-method="add">';
+            htmlCode += '   <li class="dd-item" data-model-subitem-uid="' + datauid + '" data-method="add">';
             htmlCode += '       <textarea style="display:none;" data-name="subItem_uid">' + subItem_uid + '</textarea>';
             htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_uid">' + modelSubItem_uid + '</textarea>';
             htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_name">' + modelSubItem_name + '</textarea>';
@@ -421,9 +441,21 @@ $(document).ready(function () {
 
             var htmlObj = $('#modelItem_div').find('[data-uid="' + parent_data_uid + '"]').find('ol');
 
+
+
             //var htmlObj = $('#' + parent_data_uid).find('ol');
             htmlObj.append(htmlCode);
 
+            var li_count = 0;
+
+            htmlObj.find('li').each(function (i, item) {
+                li_count++;
+            });
+
+            if (li_count == 1) {
+                $('#nest_' + parent_data_uid).nestable();
+            }
+
             $('#modelSubItemModal').modal('toggle');
         }
 
@@ -486,11 +518,12 @@ $(document).ready(function () {
             htmlCode += '        </div>';
             htmlCode += '        ';
             htmlCode += '    </div>';
+            htmlCode += '        <div class="dd" id="nest_' + datauid + '" data-toggle="sortable" data-max-depth="1" >';
             htmlCode += '        <!-- .dd-list -->';
             htmlCode += '        <ol class="dd-list">';
             htmlCode += '       ';
             htmlCode += '        </ol><!-- /.dd-list -->';
-            htmlCode += ' ';
+            htmlCode += '        </div>';
             htmlCode += '    <!-- .card-footer -->';
             htmlCode += '    <div class="card-footer">';
             htmlCode += '        <a href="javascript: void(0);" onclick="addQuotationSubItem(this);" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> 添加子項目</span></a>';
@@ -499,11 +532,141 @@ $(document).ready(function () {
 
             $('#modelItem_div').append(htmlCode);
 
+            
+
             $('#modelMainItemModal').modal('toggle');
         }
 
         updateGrandTotal();
     });
+
+    //新增付款方式按鈕
+    $('#addPaymentBtn').on('click', function () {
+
+        $('#payment_method').val('add');
+        $('#paymentModal').modal('toggle');
+    });
+
+    //付款方式下拉
+    $('#paymentMethod_select').on('change', function () {
+        var payment_method = $('#paymentMethod_select').val();
+
+        switch (payment_method) {
+            case 'cheque':
+                $('#payment_descript').val('票期    天').trigger('change');
+                break;
+            case 'telegraphic':
+                $('#payment_descript').val('入帳日     年    月    日').trigger('change');
+                break;
+            case 'paycash':
+                $('#payment_descript').val('').trigger('change');
+                break;
+            case 'downpayment':
+                $('#payment_descript').val('').trigger('change');
+                break;
+            case 'custom':
+                $('#payment_descript').val('').trigger('change');
+                break;
+            default:
+                console.log(`Sorry, we are out of ${expr}.`);
+        }
+
+    });
+
+    //付款方式儲存鈕
+    $('#paymentModalDialogSaveBtn').on('click', function () {
+        var payment_method = $('#paymentMethod_select').val();
+        var payment_methodname = $("#paymentMethod_select option:selected").text();
+        var payment_descript = $('#payment_descript').val();
+
+
+
+        if (payment_method != 'paycash' && payment_method != 'downpayment') {
+            if (payment_descript == '') {
+                alert('請輸入付款資訊!');
+                return;
+            }
+        }
+
+        var payment_display = payment_methodname;
+
+        if (payment_descript != '') {
+            payment_display = payment_display + ': ' + payment_descript;
+        }
+
+        var htmlCode = '';
+
+        htmlCode += '                        <li class="list-group-item align-items-center drag-handle">\n';
+        htmlCode += '                          <textarea style="display:none;" data-name="payment_method">' + payment_method + '</textarea>';
+        htmlCode += '                          <textarea style="display:none;" data-name="payment_methodname">' + payment_methodname + '</textarea>';
+        htmlCode += '                          <textarea style="display:none;" data-name="payment_descript">' + payment_descript + '</textarea>';
+        htmlCode += '                          <span class="drag-indicator"></span>\n';
+        htmlCode += '                          <div> ' + payment_display + ' </div>\n';
+        htmlCode += '                          <div class="btn-group ml-auto">\n';
+        htmlCode += '                            <button class="btn btn-sm btn-secondary" data-method="add" onclick="delPaymentItem(this);"><i class="far fa-trash-alt"></i></button>\n';
+        htmlCode += '                          </div>\n';
+        htmlCode += '                        </li>\n';
+
+        $('#payment_group').find('ol').append(htmlCode);
+
+        $('#paymentModal').modal('toggle');
+    });
+
+    //新增發票項目
+    $('#addInvoiceBtn').on('click', function () {
+        $('#invoice_name').typeahead('destroy');
+
+        initInvoiceSelectItem();
+
+        fpInvoiceDate.setDate(new Date(endTxt + '/1'));
+        $('#invoice_method').val('add');
+        $('#invoiceModal').modal('toggle');
+    });
+
+    //儲存發票項目
+    $('#invoiceModalDialogSaveBtn').on('click', function () {
+        var invoice_method = $('#invoice_method').val();
+        var invoice_name = $("#invoice_name").val();
+        var invoice_date = $('#invoice_date').val();
+        var invoice_noTaxMoney = $('#invoice_noTaxMoney').val();
+
+        if (invoice_noTaxMoney.isNumber() == false || invoice_noTaxMoney == '') {
+            alert('發票金額得為純數字!');
+            return;
+        }
+
+        if (invoice_name == '') {
+            alert('請輸入品項名稱!');
+            return;
+        }
+
+        if (invoice_date == '') {
+            alert('請輸入發票月份!');
+            return;
+        }
+
+        var invoice_display = "開立品項: " + invoice_name + ",      開立月份: " + invoice_date + ",     金額(未稅): " + AppendComma(invoice_noTaxMoney);
+
+        var htmlCode = '';
+
+        htmlCode += '                        <li class="list-group-item align-items-center drag-handle">\n';
+        htmlCode += '                          <textarea style="display:none;" data-name="invoice_name">' + invoice_name + '</textarea>';
+        htmlCode += '                          <textarea style="display:none;" data-name="invoice_date">' + invoice_date + '</textarea>';
+        htmlCode += '                          <textarea style="display:none;" data-name="invoice_noTaxMoney">' + invoice_noTaxMoney + '</textarea>';
+        htmlCode += '                          <span class="drag-indicator"></span>\n';
+        htmlCode += '                          <span style="width: 15%;"> ' + "開立品項: " + invoice_name + ' </span>\n';
+        htmlCode += '                          <span style="width: 15%;"> ' + "開立月份: " + invoice_date + ' </span\n';
+        htmlCode += '                          <span style="width: 15%;">' + "金額(未稅): " + AppendComma(invoice_noTaxMoney) + ' </span>\n';
+        htmlCode += '                          <span style="width: 55%;"></span>';
+        htmlCode += '                          <div class="btn-group ml-auto">\n';
+        htmlCode += '                            <button class="btn btn-sm btn-secondary" data-method="add" onclick="delInvoiceItem(this);"><i class="far fa-trash-alt"></i></button>\n';
+        htmlCode += '                          </div>\n';
+        htmlCode += '                        </li>\n';
+
+        $('#invoice_group').find('ol').append(htmlCode);
+
+        $('#invoiceModal').modal('toggle');
+    });
 });
 
 function loadContactPersion() {
@@ -1097,6 +1260,7 @@ function mainItemHtml(obj) {
     htmlCode += '        </div>';
     htmlCode += '        ';
     htmlCode += '    </div>';
+    htmlCode += '        <div class="dd" id="nest_' + obj.modelMainItem_uid + '" data-toggle="sortable" data-max-depth="1" >';
     htmlCode += '        <!-- .dd-list -->';
     htmlCode += '        <ol class="dd-list">';
 
@@ -1106,7 +1270,7 @@ function mainItemHtml(obj) {
 
     htmlCode += '       ';
     htmlCode += '        </ol><!-- /.dd-list -->';
-    htmlCode += ' ';
+    htmlCode += '        </div>';
     htmlCode += '    <!-- .card-footer -->';
     htmlCode += '    <div class="card-footer">';
     htmlCode += '        <a href="javascript: void(0);" onclick="addQuotationSubItem(this);" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> 添加子項目</span></a>';
@@ -1119,7 +1283,7 @@ function mainItemHtml(obj) {
 function subItemHtml(obj) {
     var htmlCode = '';
 
-    htmlCode += '   <li class="dd-item dd-nodrag" data-model-subitem-uid="' + obj.modelSubItem_uid + '" data-method="edit">';
+    htmlCode += '   <li class="dd-item" data-model-subitem-uid="' + obj.modelSubItem_uid + '" data-method="edit">';
     htmlCode += '       <textarea style="display:none;" data-name="subItem_uid">' + obj.subItem_uid + '</textarea>';
     htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_uid">' + obj.modelSubItem_uid + '</textarea>';
     htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_name">' + obj.modelSubItem_name + '</textarea>';
@@ -1624,4 +1788,98 @@ function service_text() {
 
     return serviceTxt;
 
+}
+
+//刪除付款方式
+function delPaymentItem(obj) {
+    if (confirm('確定刪除此付款方式? ')) {
+        var data_type = $(obj).attr("data-method");
+        var payment = $(obj).parent().parent();
+
+        var payment_method = payment.find("[data-name='payment_method']").val();
+        var payment_methodname = payment.find("[data-name='payment_methodname']").val();
+        var payment_descript = payment.find("[data-name='payment_descript']").val();
+
+        if (data_type == 'edit') {
+            var payment_display = payment_methodname;
+
+            if (payment_descript != '') {
+                payment_display = payment_display + ': ' + payment_descript;
+            }
+
+            var formData = {
+                payment_method: payment_method,
+                payment_methodname: payment_methodname,
+                payment_descript: payment_descript,
+                message: '刪除了付款方式 - ' + payment_display
+            }
+
+            
+
+            deledPayments.push(formData);
+        }
+
+        payment.remove();
+    }
+}
+
+function initInvoiceSelectItem() {
+    var items = [];
+
+    items.push('網頁製作');
+    items.push('廣告服務');
+    items.push('網路服務');
+
+    var bh = new Bloodhound({
+        local: items,
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        datumTokenizer: Bloodhound.tokenizers.whitespace
+    });
+
+    var nflTeamsWithDefaults = function nflTeamsWithDefaults(q, sync) {
+        if (q === '') {
+            sync(bh.index.all());
+        } else {
+            bh.search(q, sync);
+        }
+    };
+
+    $('#invoice_name').typeahead(
+        {
+            minLength: 0,
+            highlight: false
+        },
+        {
+            source: nflTeamsWithDefaults
+        }
+    );
+}
+
+//刪除發票品項
+function delInvoiceItem(obj) {
+    if (confirm('確定刪除此發票開立品項? ')) {
+        var data_type = $(obj).attr("data-method");
+        var invoice = $(obj).parent().parent();
+
+        var invoice_name = invoice.find("[data-name='invoice_name']").val();
+        var invoice_date = invoice.find("[data-name='invoice_date']").val();
+        var invoice_noTaxMoney = invoice.find("[data-name='invoice_noTaxMoney']").val();
+
+        if (data_type == 'edit') {
+            
+
+            var formData = {
+                invoice_name: invoice_name,
+                invoice_date: invoice_date,
+                invoice_noTaxMoney: invoice_noTaxMoney,
+                message: '刪除了發票開立品項 - ' + invoice_name + '(' + invoice_date + ')  金額 ' + AppendComma(invoice_noTaxMoney)
+            }
+
+
+
+            deledInvoices.push(formData);
+        }
+
+        invoice.remove();
+    }
 }