|
|
@@ -1,8 +1,68 @@
|
|
|
@extends('layouts.app')
|
|
|
@section('title')快递查询-包裹管理@endsection
|
|
|
+@section('head')
|
|
|
+ <style>
|
|
|
+ /*备注容器*/
|
|
|
+ .order-package-remarks{
|
|
|
+ position:relative;
|
|
|
+ }
|
|
|
+ /*新建按钮*/
|
|
|
+ .btn-create-remark {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ background-color: rgb(92, 141, 236);
|
|
|
+ border: blue solid 1px;
|
|
|
+ color: #111;
|
|
|
+ box-shadow: 0 0 6px #4747f1;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .order-package-remarks:hover .btn-create-remark{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ /*新建输入框*/
|
|
|
+ .remark-input {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-left: 16px;
|
|
|
+ margin-left: 35px;
|
|
|
+ box-shadow: 0 0 6px #fff6a1;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ /*删除按钮*/
|
|
|
+ .order-package-remarks table .destroy {
|
|
|
+ float: right;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ padding: 0 !important;
|
|
|
+ width: 29px !important;
|
|
|
+ min-width: 30px !important;
|
|
|
+ border: 0 solid transparent !important;
|
|
|
+ }
|
|
|
|
|
|
+ .remark-created_at{
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-destroy-remark {
|
|
|
+ display: none;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ border: red solid 1px;
|
|
|
+ color: red;
|
|
|
+ box-shadow: 0 0 6px #ac4a4a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-package-remarks table:hover .btn-destroy-remark{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+@stop
|
|
|
@section('content')
|
|
|
- <div id="list" class="d-none">
|
|
|
+ <div id="list" class="d-none package-logistic-index">
|
|
|
<div class="container-fluid">
|
|
|
<div id="form_div"></div>
|
|
|
<div class="ml-3 form-inline" id="btn">
|
|
|
@@ -49,7 +109,14 @@
|
|
|
<td>
|
|
|
<input class="checkItem" type="checkbox" :value="package.logistic_number">
|
|
|
</td>
|
|
|
- <td><span>@{{ i+1 }} <span class="badge badge-danger" v-if="package.order.issue">问题件</span></span>
|
|
|
+ <td>
|
|
|
+ <span style="position:relative">
|
|
|
+ @{{ i+1 }}
|
|
|
+ <span class="badge badge-danger" v-if="package.order.issue">问题件</span>
|
|
|
+ <span
|
|
|
+ style="display: inline-block;width: 15px;height: 15px;border-radius: 50%;position: absolute;top: 2px; margin-left: 3px;box-shadow: 0 0 3px #211f1f"
|
|
|
+ :style="package.sync_routes_flag?'background-color:#4ed32d':'background-color:#e83939'"></span>
|
|
|
+ </span>
|
|
|
</td>
|
|
|
<td>
|
|
|
<select class="form-control-sm" v-model="package.exception_type"
|
|
|
@@ -90,32 +157,38 @@
|
|
|
</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
- <td @mouseover="remarkHover = package.id"
|
|
|
- @mouseleave="remarkHover=null;remark=null;isShowRemarkInput = false">
|
|
|
- @can('包裹管理-快递-客服备注')
|
|
|
- <button @click="isShowRemarkInput = true" v-if="remarkHover===package.id">新增</button>
|
|
|
- <input @keydown.enter="submitRemark(package)"
|
|
|
- v-if="isShowRemarkInput && remarkHover===package.id" type="text" v-model="remark">
|
|
|
- <div v-if="package.remark && package.remark.length>0" :id="'remark-'+i">
|
|
|
- <div v-if="showRemarkList[i]" class="text-overflow-warp-200 up">
|
|
|
- <p v-for="remark_item in package.remark">
|
|
|
- @{{ remark_item }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="text-overflow-warp-200" v-else>
|
|
|
- @{{ package.remark[0] }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div @click="showRemarkItem(i)" v-if="package.remark && package.remark.length > 1">
|
|
|
- <label class="text-center mt-0 p-0 cursor-pointer pull-left">
|
|
|
+{{-- @can('包裹管理-快递-客服备注')--}}
|
|
|
+ <td class="m-0 p-0 order-package-remarks" style="padding-left: 0 !important;padding-right: 0 !important">
|
|
|
+ <label :for="'create_remark_'+package.id" class="btn-create-remark" @click="package.input_remark=!package.input_remark">
|
|
|
+ 新
|
|
|
+ </label>
|
|
|
+ <input :id="'create_remark_'+package.id" @keyup.enter="submitRemark(package)" v-model="remark" v-show="package.input_remark" type="text" class="remark-input">
|
|
|
+ <table class="table m-0 p-0 ">
|
|
|
+ <tr v-show="package.order_package_remarks.length > 0 && package.showMoreRemark===true" v-for="(item,index) of package.order_package_remarks" :key="item.id">
|
|
|
+ <td :title="item.content" style="width: 100px;overflow:hidden !important;">@{{ item.content }}</td>
|
|
|
+ <td class="text-secondary">@{{ item.user.name }}</td>
|
|
|
+ <td class="text-secondary remark-created_at">@{{ item.created_at }}</td>
|
|
|
+ <td class="destroy"><button class="btn-destroy-remark" @click="destroyRemark(package,item.id)">删</button></td>
|
|
|
+ </tr>
|
|
|
+ <tr v-show="(!package.showMoreRemark) && package.order_package_remarks.length > 0" >
|
|
|
+ <td :title="package.order_package_remarks[0]? package.order_package_remarks[0].content:''" style="width: 100px;overflow:hidden !important;">@{{ package.order_package_remarks[0]?package.order_package_remarks[0].content:'' }}</td>
|
|
|
+ <td class="text-secondary">@{{ package.order_package_remarks[0]?package.order_package_remarks[0].user.name:'' }}</td>
|
|
|
+ <td class="text-secondary remark-created_at">@{{ package.order_package_remarks[0]?package.order_package_remarks[0].created_at:'' }}</td>
|
|
|
+ <td class="destroy"><button class="btn-destroy-remark" @click="destroyRemark(package,package.order_package_remarks[0].id)">删</button></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div
|
|
|
+ class="float-left"
|
|
|
+ @click="package.showMoreRemark = !package.showMoreRemark" v-show="package.order_package_remarks && package.order_package_remarks.length > 1">
|
|
|
+ <label class="text-center mt-0 p-0 cursor-pointer pull-left">
|
|
|
<span class="fa"
|
|
|
- :class="package.isShowRemark ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
|
|
|
- <span v-if="package.remark && showRemarkList[i]">收起</span><span
|
|
|
- v-else>展开</span> @{{ package.remark.length }} 条
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- @endcan
|
|
|
+ :class="package.showMoreRemark ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
|
|
|
+ <span v-if="package.order_package_remarks && package.showMoreRemark">收起</span><span
|
|
|
+ v-else>展开</span> @{{ package.order_package_remarks.length }} 条
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
</td>
|
|
|
+{{-- @endcan--}}
|
|
|
<td class="text-overflow-warp-200"><span v-if="package.order && package.order.issue">@{{ package.order.issue.result_explain }}</span>
|
|
|
</td>
|
|
|
<td class="text-overflow-warp-200"><span
|
|
|
@@ -250,7 +323,9 @@
|
|
|
placeholder: '是否有物流信息',
|
|
|
data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
|
|
|
},
|
|
|
+
|
|
|
{name: 'default_date', type: 'checkbox', tip: '默认15天', data: [{name: 'ture', value: '默认15天'}]},
|
|
|
+ {name: 'default_logistics', type: 'checkbox', tip: '默认承运商', data: [{name: 'ture', value: '默认承运商'}]},
|
|
|
|
|
|
], [
|
|
|
{
|
|
|
@@ -279,9 +354,9 @@
|
|
|
|
|
|
{
|
|
|
name: 'exception_type',
|
|
|
- type: 'select',
|
|
|
+ type: 'select_multiple_select',
|
|
|
tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的状态'],
|
|
|
- placeholder: '异常类型',
|
|
|
+ placeholder: ['异常类型', '定位或多选异常类型'],
|
|
|
data: [
|
|
|
{name: '疑似库内丢件', value: '疑似库内丢件'},
|
|
|
{name: '揽件异常', value: '揽件异常'},
|
|
|
@@ -292,6 +367,21 @@
|
|
|
{name: '无', value: '无'}
|
|
|
]
|
|
|
},
|
|
|
+ {
|
|
|
+ name: 'is_issue',
|
|
|
+ type: 'select',
|
|
|
+ tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的状态'],
|
|
|
+ placeholder: '是否为问题件',
|
|
|
+ data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: 'sync_routes_flag',
|
|
|
+ type: 'select',
|
|
|
+ tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的状态'],
|
|
|
+ placeholder: '是否有查询记录',
|
|
|
+ data: [{name: true, value: '是'}, {name: false, value: '否'}]
|
|
|
+ },
|
|
|
]
|
|
|
];
|
|
|
_this.form = new query({
|
|
|
@@ -390,9 +480,35 @@
|
|
|
}
|
|
|
let url = '{{url('apiLocal/package/logistic/')}}';
|
|
|
let _this = this;
|
|
|
- axios.put(url, {remark: _this.remark, orderPackageId: orderPackage.id}).then(function (response) {
|
|
|
+ tempTip.setDuration(2000);
|
|
|
+ tempTip.showSuccess('正在操作请稍后!');
|
|
|
+ axios.put(url, {remark: _this.remark, orderPackageId: orderPackage.id}).then(response=>{
|
|
|
+ if (response.data.success) {
|
|
|
+ orderPackage.order_package_remarks = response.data.data
|
|
|
+ tempTip.setDuration(2000);
|
|
|
+ tempTip.showSuccess('成功!');
|
|
|
+ _this.remark = '';
|
|
|
+ orderPackage.input_remark = false;
|
|
|
+ } else {
|
|
|
+ tempTip.setDuration(5000);
|
|
|
+ tempTip.show(response.data.fail_info);
|
|
|
+ }
|
|
|
+ }).catch(function (err) {
|
|
|
+ tempTip.setDuration(3000);
|
|
|
+ tempTip.show("网络错误:" + err)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ destroyRemark(orderPackage,remarkId) {
|
|
|
+ let url = '{{url('apiLocal/package/logistic/delete')}}';
|
|
|
+ if (!confirm('是否却认删除', false)) {
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ let _this = this;
|
|
|
+ tempTip.setDuration(2000);
|
|
|
+ tempTip.showSuccess('正在操作请稍后!');
|
|
|
+ axios.post(url, {orderPackageId: orderPackage.id,remarkId:remarkId}).then(response=>{
|
|
|
if (response.data.success) {
|
|
|
- orderPackage.remark = response.data.data
|
|
|
+ orderPackage.order_package_remarks = response.data.data
|
|
|
tempTip.setDuration(2000);
|
|
|
tempTip.showSuccess('成功!');
|
|
|
} else {
|