abp(net core)+easyui+efcore实现仓储管理系统目录

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)

 
 

在上一篇abp(net core)+easyui+efcore实现仓储管理系统——入库管理之五(四十一)文章中实现了入库管理的列表页面,并实现了控制器的代码。在今天我们学习如何在前端实现新增入库单信息界面。

入库单新增功能

1. 在Visual Studio 2017的“解决方案资源管理器”中,左键单击在展现层的“ABP.TPLMS.Web.MVC”项目中的Views目录。找到InStock\Index.cshmtl文件。在此文件中添加视图代码。代码如下。

 <!---------------------------导入货物信息弹出窗体------------------------------------------->
<div id="divImportCargo" class="easyui-dialog" closed="true" style="top:10px;"
data-options="buttons: '#dlg-buttons-cgo'">
<!--panel-->
<div data-options="region:'center',split:false" style="height:460px;">
<!--表格-->
<table id="dgCargo"></table>
</div>
</div> <div id="dlg-buttons-cgo">
<input type="submit" id="btnImportCargo" value="导入" class="btn btn-primary" />
<input type="submit" id="btnCancleCargo" value="取消" class="btn btn-info" />
</div>
<!---------------------------新增修改入库单信息------------------------------------------->
<div id="divAddUpdINO" class="easyui-dialog" closed="true" style="top:10px;"
data-options="buttons: '#dlg-buttons'">
<div id="box">
<div title="入库单">
<table>
<tr>
<td><input type="hidden" name="ID" id="IDUpdate" /></td>
</tr>
<tr>
<td>入库单号:</td>
<td><input type="text" id="UpdNO" name="UNO" class="form-control input-sm" /></td>
<td>预计送货日期:</td>
<td>
<input type="text" id="PreDeliveryTimeUpdate" name="UPreDeliveryTime"
class="form-control input-sm" /> </td>
<td> 状态:</td>
<td><input type="text" id="StatusUpdate" name="UStatus"
class="form-control input-sm" value="0" /></td> </tr>
<tr>
<td> 发货人:</td>
<td><input type="text" id="OwnerCodeUpdate" name="UOwnerCode"
class="form-control input-sm" /></td> <td colspan="2">
<input type="text" id="OwnerNameUpdate" name="UOwnerName"
class="form-control input-sm" /> </td>
<td>社会信用代码:</td>
<td>
<input type="text" id="ConsignerSccdUpdate" name="UConsignerSccd"
class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 收货人:</td>
<td><input type="text" id="CustomerCodeUpdate" name="UCustomerCode"
class="form-control input-sm" /></td>
<td colspan="2">
<input type="text" id="CustomerNameUpdate" name="UCustomerName"
class="form-control input-sm" /> </td>
<td>社会信用代码:</td>
<td>
<input type="text" id="ConsigneeSccdUpdate" name="UConsigneeSccd"
class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 经营企业:</td>
<td><input type="text" id="BizpoEtpsNoUpdate" name="UBizpoEtpsNo"
class="form-control input-sm" /></td>
<td colspan="2">
<input type="text" id="BizpoEtpsNameUpdate" name="UBizpoEtpsName"
class="form-control input-sm" />
</td>
<td>社会信用代码:</td>
<td>
<input type="text" id="BizpoEtpsSccdUpdate" name="UBizpoEtpsSccd"
class="form-control input-sm" />
</td>
</tr>
<tr>
<td>理货员:</td>
<td> <input type="text" id="ReceiverUpdate" name="UReceiver"
class="form-control input-sm" /></td>
<td>收货开始时间:</td>
<td>
<input type="text" id="ReceiveTimeUpdate" name="UReceiveTime"
class="form-control input-sm" /> </td>
<td>收货结束时间:</td>
<td>
<input type="text" id="ERcvTimeUpdate" name="UERcvTime"
class="form-control input-sm" />
</td>
</tr>
<tr>
<td>净重:</td>
<td> <input type="text" id="NwtUpdate" name="UNwt" class="form-control input-sm"
value="0" /></td>
<td>毛重:</td>
<td>
<input type="text" id="GwtUpdate" name="UGwt" class="form-control input-sm"
value="0" /> </td>
<td>件数:</td>
<td> <input type="text" id="PackageQtyUpdate" name="UPackageQty"
class="form-control input-sm" value="0" />
</td>
</tr>
<tr>
<td>仓库号:</td>
<td>
<input type="text" id="WarehouseNoUpdate" name="UWarehouseNo"
class="form-control input-sm" />
</td> <td>仓库类型:</td>
<td>
<input type="text" id="WarehouseTypeUpdate" name="UWarehouseType"
class="form-control input-sm" />
</td>
<td>核查时间:</td>
<td>
<input type="text" id="CheckTimeUpdate" name="UCheckTime"
class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 核查员:</td>
<td>
<input type="text" id="CheckerUpdate" name="UChecker"
class="form-control input-sm" />
</td>
<td>操作员:</td>
<td> <input type="text" id="OperUpdate" name="UOper" class="form-control input-sm" />
</td>
<td>创建时间:</td>
<td>
<input type="text" id="CreationTimeUpdate" name="UCreationTime"
class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 备注:</td>
<td colspan="5"><input type="text" id="RemarkUpdate" name="URemark"
class="form-control input-sm" /></td> </tr>
</table>
</div>
<div title="入库单明细">
<!--panel-->
<div data-options="region:'center',split:false" style="height:400px;">
<!--表格-->
<table id="dgINOD"></table>
</div>
</div>
</div>
</div> <div id="dlg-buttons">
<input type="submit" id="btnSave" value="保存" class="btn btn-primary" />
<input type="submit" id="btnSubmit" value="提交" class="btn btn-primary" />
<input type="submit" id="btnCancle" value="取消" class="btn btn-info" />
</div>

2. 在Visual Studio 2017的“解决方案资源管理器”中,找到表示层“ABP.TPLMS.Web.Mvc”项目中的wwwroot\view-resources\InStock目录。

3. 在InStock目录中找到Index.js文件。添加新增入库单的代码。代码如下。

//--------------系统管理-->入库单管理-------------------------//
//显示货物信息数据
function ShowCargo() {
abp.log.warn('货物信息列表日志...');
$("#dgCargo").datagrid({
url: "/Cargo/List",
title: "货物管理管理",
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
fit: true,
fitColumns: false,
loadMsg: "正在加载货物信息...",
nowarp: false,
border: false,
idField: "Id",
sortName: "Id",
sortOrder: "asc",
frozenColumns: [[//冻结列
{ field: "ck", checkbox: true, align: "left", width: 50 } ]],
columns: [[
     { title: "编号", field: "Id", width: 50, sortable: true },
     { title: "供应商", field: "SupplierId", width: 80, sortable: true },
    { title: "HSCode", field: "HSCode", width: 100, sortable: true },
    { title: "货物代码", field: "CargoCode", width: 100, sortable: true },
     { title: "货物名称", field: "CargoName", width: 80, sortable: false },
     { title: "规格型号", field: "Spcf", width: 100, sortable: false },
     { title: "产销国", field: "Country", width: 80, sortable: false },
    { title: "计量单位", field: "Unit", width: 100, sortable: false },
    { title: "包装", field: "Package", width: 100, sortable: false },
  { title: "单价", field: "Price", width: 100, sortable: false },
  { title: "币制", field: "Curr", width: 80, sortable: false },
  { title: "长宽高", field: "Length", width: 100, sortable: false, formatter: function (value, row, index) {
return row.Length + '*' + row.Width + '*' + row.Height;
}
},
{ title: "体积", field: "Vol", width: 80, sortable: false },
     { title: "备注", field: "Remark", width: 80, sortable: false },
{ title: '创建时间', field: 'CreationTime', width: 100, align: 'center' }
]]
});
abp.log.warn('3货物信息列表日志...');
} function ShowCargoInfo() {
$("#divImportCargo").dialog({
closed: false,
title: "选择货物信息",
modal: true,
width: 820,
height: 550,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true
}); ShowCargo();
$("#dgCargo").datagrid("clearChecked");
$("#dgCargo").datagrid("clearSelections");
} function reloaded() { //reload
$("#reload").click(function () {
$('#dgINSO').datagrid('reload');
});} //清空文本框 function clearAll() {
$("#divAddUpdINO input").each(function () {
$(this).val("");
});
//默认值
$("#PreDeliveryTimeUpdate").val(getNowFormatDate());
$("#StatusUpdate").val("0");
$("#NwtUpdate").val("0");
$("#GwtUpdate").val("0");
$("#PackageQtyUpdate").val("0"); } function GetNo() {
$.get(abp.appPath + "api/services/app/InStockOrder/GetNo", function (data) {
// alert(data);
// var obj = JSON.parse(data);
$("#UpdNO").val(data);
//$("#IDUpdate").val(obj.Id);
}); } //获取当前时间,格式YYYY-MM-DD
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
} if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
} //将表单数据转为json
function form2Json(id) {
var arr = $("#" + id).serializeArray()
var jsonStr = ""; jsonStr += '{';
for (var i = 0; i < arr.length; i++) {
jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
} jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
jsonStr += '}'
var json = JSON.parse(jsonStr)
return json
} function defaultTab() {
//默认显示第一个tab
$('#box').tabs('select', "入库单");
} //弹出 导入送货单的的对话框
function showInSODialog() {
$("#add").click(function () { $.messager.confirm('编辑', '您想要创建入库单吗?', function (r) {
if (r) {
//打开对话框编辑
$("#divAddUpdINO").dialog({
closed: false,
title: "新增入库单",
modal: true,
width: 820,
height: 550,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
}); }
defaultTab();
GetNo();
clearAll();
ShowDetail("");
}); }); $("#btnSave").click(function () {
//保存
var id = $("#IDUpdate").val();
if (id == "" || id == undefined) {
//验证
$.messager.confirm('确认', '您确认要保存吗?', function (r) {
if (r) {
var postData = GetINO();
if (postData.No == "" || postData.CustomerCode == "" || postData.CustomerName=="" || postData.OwnerName=="") {
$.messager.alert('提示', ' 请填写相关必填项!', 'warning');
return;
}
$.post("/InStock/Add", postData, function (data) {
if (data == "OK") {
$.messager.alert("提示", "保存成功!");
initable();
}
else if (data == "NO") {
$.messager.alert("提示", "保存失败!");
return;
}
});
}
})
}
else {
saveDetail();
}
});
} //显示明细
function ShowDetail(no) {
var lastIndex;
$("#dgINOD").datagrid({
url: "/InStock/GetDetail?no=" + no,
title: "入库单明细",
pagination: false,
fit: true,
fitColumns: false,
loadMsg: "正在加载入库单明细信息...",
toolbar: "#dg-detail-button",
nowarp: false,
border: false,
idField: "Id",
sortName: "Id",
sortOrder: "asc",
singleSelect: true,
iconCls: 'icon-edit',
columns: [[
{ title: "编号", field: "SeqNo", width: 50, sortable: true },
{ title: "入库单号", field: "InStockNo", width: 100, sortable: true },
{ title: "HSCode", field: "HSCode", width: 80, sortable: false },
{ title: "货物代码", field: "CargoCode", width: 100, sortable: true },
{ title: "货物名称", field: "CargoName", width: 160, sortable: false },
{ title: "规格型号", field: "Spcf", width: 80, sortable: false },
{ title: "数量", field: "Qty", width: 100, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 4
}
}
},
{ title: "长", field: "Length", width: 70, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 2
}
}
},
{title: "宽", field: "Width", width: 70, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 2
}
}
},
{ title: "高", field: "Height", width: 70, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 2
}
}
},
{ title: "产销国", field: "Country", width: 70, align: 'center' },
{title: "单价", field: "Price", width: 100, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 2
}
}
},
{ title: "总价", field: "TotalAmt", width: 100, align: 'center', editor: { type: 'numberbox', options: {
required: true, min: 0, precision: 2
}
}
}, { title: "包装", field: "Package", width: 70, align: 'center' },
{ title: "计量单位", field: "Unit", width: 70, align: 'center' },
{ title: "总体积", field: "Vol", width: 70, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 4
}
}
},
{ title: "品牌", field: "Brand", width: 70, align: 'center' }
]],
onClickRow: function (index, rowData) {
if (lastIndex != index) {
$('#dgINOD').datagrid('endEdit', lastIndex);
editrow(index);
}
lastIndex = index;
},
onBeginEdit: function (rowIndex, rowData) {
setEditing(rowIndex);
}
});
} //计算报价小计
function setEditing(rowIndex) {
var editors = $('#dgINOD').datagrid('getEditors', rowIndex);
var priceEditor = editors[4];
var qtyEditor = editors[0];
var lengthEditor = editors[1];
var widthEditor = editors[2];
var heightEditor = editors[3];
var totalVolEditor = editors[6];
var totalAmtEditor = editors[5];
priceEditor.target.numberbox({
onChange: function () { calculate();}
}); qtyEditor.target.numberbox({
onChange: function () {
calculate();
calculateVol();
}
}); lengthEditor.target.numberbox({
onChange: function () { calculateVol(); }
}); widthEditor.target.numberbox({
onChange: function () { calculateVol(); }
}); heightEditor.target.numberbox({
onChange: function () { calculateVol(); }
}); function calculate() {
var cost = (priceEditor.target.val()) * (qtyEditor.target.val());
console.log(cost);
totalAmtEditor.target.numberbox("setValue", cost);
} function calculateVol() {
var vol = (lengthEditor.target.val() / 100.0) * (widthEditor.target.val() / 100.0) * (heightEditor.target.val() / 100.0)*
(qtyEditor.target.val());
console.log(vol);
totalVolEditor.target.numberbox("setValue", vol);
} } function editrow(index) {
$('#dgINOD').datagrid('selectRow', index)
.datagrid('beginEdit', index);
} function endEdit() {
var rows = $('#dgINOD').datagrid('getRows');
if (rows==undefined) {
return;
}
for (var i = 0; i < rows.length; i++) {
$('#dgINOD').datagrid('endEdit', i);
}
} function saveDetail() {
endEdit();
$.messager.confirm('确认', '您确认要修改吗?', function (r) {
var effectRow = new Object();
var postData = GetINO();
if (postData.Id) {
effectRow["postdata"] = JSON.stringify(postData);
}
if ($('#dgINOD').datagrid('getChanges').length) {
var inserted = $('#dgINOD').datagrid('getChanges', "inserted");
var deleted = $('#dgINOD').datagrid('getChanges', "deleted");
var updated = $('#dgINOD').datagrid('getChanges', "updated"); if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
}
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
}
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
}
$.post("/InStock/Update", effectRow, function (data) {
// alert(data);
if (data.success) {
$.messager.alert("提示", data.result);
$('#dgINOD').datagrid('acceptChanges');
}
else {
$.messager.alert("提示", data.result);
return;
}
}, "JSON")
;
})
} function init() {
$("#PreDeliveryTimeUpdate").val(getNowFormatDate()); $("#btnCancle").click(function () {
$("#divAddUpdINO").dialog("close");
$('#dgINSO').datagrid('reload');
}); $("#btnCancleCargo").click(function () {
$("#divImportCargo").dialog("close");
$('#dgINSO').datagrid('reload');
}); $("#btnImportCargo").click(function () {
//保存
var rows = $('#dgCargo').datagrid('getSelections');
if (rows.length > 0) {
//验证
$.messager.confirm('确认', '您确认要保存所选择的货物信息吗?', function (r) {
if (r) {
var obj_No = $("#UpdNO").val();
var ids = [];//重要不是{}
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].Id);
} var postData = {
"Ids": ids.join(','),
"No": obj_No
}; $.post("/InStock/ImportCargo", postData, function (data) {
if (data == "OK") {
$.messager.alert("提示", "保存货物信息成功!");
ShowDetail(obj_No);
} else if (data == "NO") {
$.messager.alert("提示", "保存货物信息失败!");
return;
}
});
}
})
}
});
} function GetINO() {
var postData = {
"No": $("#UpdNO").val(),
"DeliveryNo": "",
"PreDeliveryTime": $("#PreDeliveryTimeUpdate").val(),
"CustomerCode": $("#CustomerCodeUpdate").val(),
"OwnerName": $("#OwnerNameUpdate").val(),
"OwnerCode": $("#OwnerCodeUpdate").val(),
"CustomerName": $("#CustomerNameUpdate").val(),
"CheckTime": $("#CheckTimeUpdate").val(),
"WarehouseType": $("#WarehouseTypeUpdate").val(),
"WarehouseNo": $("#WarehouseNoUpdate").val(),
"Oper": $("#OperUpdate").val(),
"Receiver": $("#ReceiverUpdate").val(),
"Nwt": $("#NwtUpdate").val(),
"Remark": $("#RemarkUpdate").val(),
"ReceiveTime": $("#ReceiveTimeUpdate").val(), "Status": $("#StatusUpdate").val(),
"Gwt": $("#GwtUpdate").val(),
"Checker": $("#CheckerUpdate").val(),
"PackageQty": $("PackageQtyUpdate").val(),
"LastUpdateTime": "",
"LastOper":""
}; var id = $("#IDUpdate").val();
if (!(id=="" || id==undefined)) {
postData.Id = id;
}
return postData;
} function showINO(row) {
$("#IDUpdate").val(row.Id);
$("#UpdNO").val(row.No);
$("#PreDeliveryTimeUpdate").val(row.PreDeliveryTime);
$("#CustomerCodeUpdate").val(row.CustomerCode);
$("#CustomerNameUpdate").val(row.CustomerName);
$("#OwnerCodeUpdate").val(row.OwnerCode);
$("#OwnerNameUpdate").val(row.OwnerName);
$("#CheckTimeUpdate").val(row.CheckTime);
$("#WarehouseTypeUpdate").val(row.WarehouseType);
$("#WarehouseNoUpdate").val(row.WarehouseNo);
$("#OperUpdate").val(row.Oper);
$("#ReceiverUpdate").val(row.Receiver);
$("#NwtUpdate").val(row.Nwt);
$("#RemarkUpdate").val(row.Remark);
$("#ReceiveTimeUpdate").val(row.ReceiveTime);
$("#StatusUpdate").val(row.Status);
$("#GwtUpdate").val(row.Gwt);
$("#CheckerUpdate").val(row.Checker);
} //------------系统管理-->入库单管理结束---------------//

abp(net core)+easyui+efcore实现仓储管理系统——入库管理之六(四十二)的更多相关文章

  1. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之八(四十四)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  2. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之四(四十)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之七(四十三)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之五(四十一)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  5. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之九(四十五)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  6. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十(四十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  8. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十二(四十八)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  9. abp(net core)+easyui+efcore实现仓储管理系统——出库管理之一(四十九)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

随机推荐

  1. console.log添加样式及图片

    console.log在控制台打出css样式的文字及图片 谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档 Format Specifier %s Formats the val ...

  2. Promethues配置

    # my global config global: scrape_interval: 10s # Set the scrape interval to every 15 seconds. Defau ...

  3. iOS 客户端与服务端做时间同步

    需求 我们做客户端的时候,有时会需要对客户端与服务器的时间进行同步,比如抢购活动.倒计时等.这时我们要考虑如何准备地与服务器的时间进行同步,同时防止用户本地的时间有误差时导致的问题. 分析 描述 为了 ...

  4. 使用Lucene.Net做一个简单的搜索引擎-全文索引

    Lucene.Net Lucene.net是Lucene的.net移植版本,是一个开源的全文检索引擎开发包,即它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎. ...

  5. 【Network telemetry】谈谈网络遥感技术,从主动探测与被动探测再到Netflow与INT

    [前言] [本篇为原创]网络遥感,Network telemetry,为什么叫“telemetry”呢?我个人的理解是将网络中的数据进行一种“采集”,也就是实际上是一种网络数据的采集手段.由于工作需要 ...

  6. 前端每日实战:114# 视频演示如何用纯 CSS 和混色模式创作一个 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqYroW 可交互视频 此视频是可 ...

  7. YiGo表单建立

    做一个请假单表单(下图是最后的成品图) 表单的类型 实体表单 1.可存储 2.可编辑 虚拟表单 视图(不可存储数据,只有显示功能) 不可编辑 字典 报表 备注 :一张表单是实体还是虚拟取决于其数据对象 ...

  8. ELK springboot日志收集

    一.安装elasticsearch 可以查看前篇博客 elasticsearch安装.elasticsearch-head 安装 二.安装 配置 logstash 1.安装logstash 下载地址: ...

  9. jquery 的animate 的transform

    $(function(){ var t = 1000; $("#id").animate( {borderSpacing:180}, //180 指旋转度数 { step: fun ...

  10. getBoundingClientRect的实用场景

    在用vue开发项目时候,遇到一个问题,首页有代办列表,是固定定位,滚动时候需要监听距离页面顶部的距离,如果很接近顶部则将代办列表展示,首页隐藏,如果再网上翻动则又回到首页. 因为是是fixed定位,所 ...