猿实战16——承运商之搭建你的运费基石
时间:2022-07-25
本文章向大家介绍猿实战16——承运商之搭建你的运费基石，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
上几个章节，猿人君教会了你如何去实现前台类目的后台管理功能，今天我们一起来学习，如何实现承运商管理。
功能概览
承运商管理的功能虽然相对简单，主要用于维护供应商的一些基础信息，为之后要实现的运费模板提供数据支撑，是运费计算的基础信息。承运商管理功能，主要提供承运商信息列表以及新增/修改/启用/停用承运商功能。
数据库设计
基于之前的设计文章，我们可以快速的整理承运商的基本信息，并落地为数据库表，如上图所示。
后端功能实现
承运商管理的功能相对传统，提供新增/修改/删除/停用/启用/分页列表的功能。
值得注意的是，删除功能，我们是通过状态位来做的逻辑删除。之前有新手朋友似乎不明白什么是逻辑删除的含义，这里猿人君就稍微提这么一句了。所谓物理删除通常指的是通过delete语句删除表里的数据（其实并没有真正的物理掉，先不深究了），而逻辑删除又叫业务删除，通过给与数据一个“删除”状态，在之后的访问中，不访问删除状态的数据就可以了。
/**
* Copyright(c) 2004-2020 pangzi
* com.pz.basic.mall.controller.freight.MallLogisticsController.java
*/
package com.pz.basic.mall.controller.freight;
import com.pz.basic.mall.domain.base.Result;
import com.pz.basic.mall.domain.base.enums.DataStatusEnum;
import com.pz.basic.mall.domain.freight.MallLogistics;
import com.pz.basic.mall.domain.freight.query.QueryMallLogistics;
import com.pz.basic.mall.service.freight.MallLogisticsService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
*
* @author pangzi
* @date 2020-06-22 20:47:27
*
*
*/
@RestController
@RequestMapping("/logistics")
public class MallLogisticsController {
private MallLogisticsService mallLogisticsService;
public void setMallLogisticsService(MallLogisticsService mallLogisticsService) {
this.mallLogisticsService = mallLogisticsService;
}
/**
* 新增物流供应商
* @param mallLogistics
* @return
*/
@RequestMapping("/addMallLogistics")
public Result<MallLogistics> addMallLogistics(@RequestBody MallLogistics mallLogistics){
try{
return mallLogisticsService.addMallLogistics(mallLogistics);
}catch(Exception e){
e.printStackTrace();
return new Result(false);
}
}
/**
* 修改物流供应商
* @param mallLogistics
* @return
*/
@RequestMapping("/updateMallLogistics")
public Result updateMallLogistics(@RequestBody MallLogistics mallLogistics){
try{
return mallLogisticsService.updateMallLogisticsById(mallLogistics);
}catch(Exception e){
e.printStackTrace();
return new Result(false);
}
}
/**
* 启用物流供应商
* @param mallLogistics
* @return
*/
@RequestMapping("/enableMallLogistics")
public Result enableMallLogistics(@RequestBody MallLogistics mallLogistics){
try{
MallLogistics modifiedData =new MallLogistics ();
modifiedData.setId(mallLogistics.getId());
modifiedData.setStatus(DataStatusEnum.STATUS_ENABLE.getStatusValue());
return mallLogisticsService.updateMallLogisticsById(modifiedData);
}catch(Exception e){
e.printStackTrace();
return new Result(false);
}
}
/**
* 停用物流供应商
* @param mallLogistics
* @return
*/
@RequestMapping("/disableMallLogistics")
public Result disableMallLogistics(@RequestBody MallLogistics mallLogistics){
try{
MallLogistics modifiedData =new MallLogistics ();
modifiedData.setId(mallLogistics.getId());
modifiedData.setStatus(DataStatusEnum.STATUS_DISABLE.getStatusValue());
return mallLogisticsService.updateMallLogisticsById(modifiedData);
}catch(Exception e){
e.printStackTrace();
return new Result(false);
}
}
/**
* 删除物流供应商
* @param mallLogistics
* @return
*/
@RequestMapping("/deleteMallLogistics")
public Result deleteMallLogistics(@RequestBody MallLogistics mallLogistics){
try{
MallLogistics modifiedData =new MallLogistics ();
modifiedData.setId(mallLogistics.getId());
modifiedData.setStatus(DataStatusEnum.STATUS_DELETED.getStatusValue());
return mallLogisticsService.updateMallLogisticsById(modifiedData);
}catch(Exception e){
e.printStackTrace();
return new Result(false);
}
}
/**
* 分页返回物流供应商列表
* @param queryMallLogistics
* @return
*/
@RequestMapping("/findByPage")
public Result<List<MallLogistics>> findByPage(@RequestBody QueryMallLogistics queryMallLogistics){
return mallLogisticsService.getMallLogisticssByPage(queryMallLogistics);
}
}考虑到很多朋友编写mapper文件比较困难，这个章节的mapper就先给到你吧，不过做人不要太懒了，domain 和dao 以及service的实现，还是自己动手搞一下吧。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.pz.basic.mall.dao.freight.MallLogisticsDao">
<resultMap id="ResultMap" type="MallLogistics">
<id property="id" column="id"/>
<id property="logisticsCode" column="logistics_code"/>
<id property="logisticsName" column="logistics_name"/>
<id property="logisticsIcon" column="logistics_icon"/>
<id property="logisticsUrl" column="logistics_url"/>
<id property="logisticsRemark" column="logistics_remark"/>
<id property="freightLimit" column="freight_limit"/>
<id property="customFeeLimit" column="custom_fee_limit"/>
<id property="customTimeLimit" column="custom_time_limit"/>
<id property="showLimit" column="show_limit"/>
<id property="status" column="status"/>
<id property="createUser" column="create_user"/>
<id property="modifyUser" column="modify_user"/>
<id property="created" column="created"/>
<id property="modified" column="modified"/>
</resultMap>
<sql id="ALL_TABLE_COLOUM">
id,
logistics_code,
logistics_name,
logistics_icon,
logistics_url,
logistics_remark,
freight_limit,
custom_fee_limit,
custom_time_limit,
show_limit,
status,
create_user,
modify_user,
created,
modified
</sql>
<sql id="Query_Where_Clause" >
<where >
status>-1
<if test="id != null and id != ''">
and id = #{id}
</if>
<if test="logisticsCode != null and logisticsCode != ''">
and logistics_code = #{logisticsCode}
</if>
<if test="logisticsName != null and logisticsName != ''">
and logistics_name = #{logisticsName}
</if>
<if test="logisticsIcon != null and logisticsIcon != ''">
and logistics_icon = #{logisticsIcon}
</if>
<if test="logisticsUrl != null and logisticsUrl != ''">
and logistics_url = #{logisticsUrl}
</if>
<if test="logisticsRemark != null and logisticsRemark != ''">
and logistics_remark = #{logisticsRemark}
</if>
<if test="freightLimit != null and freightLimit != ''">
and freight_limit = #{freightLimit}
</if>
<if test="customFeeLimit != null and customFeeLimit != ''">
and custom_fee_limit = #{customFeeLimit}
</if>
<if test="customTimeLimit != null and customTimeLimit != ''">
and custom_time_limit = #{customTimeLimit}
</if>
<if test="showLimit != null and showLimit != ''">
and show_limit = #{showLimit}
</if>
<if test="status != null and status != ''">
and status = #{status}
</if>
<if test="createUser != null and createUser != ''">
and create_user = #{createUser}
</if>
<if test="modifyUser != null and modifyUser != ''">
and modify_user = #{modifyUser}
</if>
<if test="created != null and created != ''">
and created = #{created}
</if>
<if test="modified != null and modified != ''">
and modified = #{modified}
</if>
<if test="logisticsNameLike != null and created != ''">
and logistics_name like concat(#{logisticsNameLike},'%')
</if>
<if test="logisticsCodeLike != null and modified != ''">
and logistics_code like concat(#{logisticsCodeLike},'%')
</if>
</where>
</sql>
<select id="selectMallLogisticsByQuery" resultMap="ResultMap" parameterType="QueryMallLogistics" >
select
<include refid="ALL_TABLE_COLOUM" />
from mall_logistics
<if test="page != null" >
<include refid="Query_Where_Clause" />
</if>
</select>
<select id="selectMallLogisticsByPage" resultMap="ResultMap" parameterType="QueryMallLogistics" >
select
<include refid="ALL_TABLE_COLOUM" />
from mall_logistics
<if test="page != null" >
<include refid="Query_Where_Clause" />
</if>
LIMIT #{startRow},#{pageSize}
</select>
<select id="selectMallLogisticsById" resultMap="ResultMap" parameterType="long" >
select
<include refid="ALL_TABLE_COLOUM" />
from mall_logistics
where id = #{id}
</select>
<delete id="deleteMallLogisticsById" parameterType="long" >
delete from mall_logistics
where id = #{id}
</delete>
<delete id="deleteMallLogisticsByQuery" parameterType= "QueryMallLogistics" >
delete from mall_logistics
<if test="page != null" >
<include refid="Query_Where_Clause" />
</if>
</delete>
<insert id="insertMallLogistics" parameterType="MallLogistics" >
INSERT INTO
mall_logistics(id,logistics_code,logistics_name,logistics_icon,logistics_url,logistics_remark,freight_limit,custom_fee_limit,custom_time_limit,show_limit,status,create_user,modify_user,created,modified)
VALUES(#{id},#{logisticsCode},#{logisticsName},#{logisticsIcon},#{logisticsUrl},#{logisticsRemark},#{freightLimit},#{customFeeLimit},#{customTimeLimit},#{showLimit},#{status},#{createUser},#{modifyUser},#{created},#{modified})
<selectKey resultType="long" keyProperty="id">
SELECT @@IDENTITY AS ID
</selectKey>
</insert>
<insert id="insertMallLogisticsModified" parameterType="MallLogistics" >
insert into mall_logistics
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="logisticsCode != null" >
logistics_code,
</if>
<if test="logisticsName != null" >
logistics_name,
</if>
<if test="logisticsIcon != null" >
logistics_icon,
</if>
<if test="logisticsUrl != null" >
logistics_url,
</if>
<if test="logisticsRemark != null" >
logistics_remark,
</if>
<if test="freightLimit != null" >
freight_limit,
</if>
<if test="customFeeLimit != null" >
custom_fee_limit,
</if>
<if test="customTimeLimit != null" >
custom_time_limit,
</if>
<if test="showLimit != null" >
show_limit,
</if>
<if test="status != null" >
status,
</if>
<if test="createUser != null" >
create_user,
</if>
<if test="modifyUser != null" >
modify_user,
</if>
<if test="created == null" >
created,
</if>
<if test="modified == null" >
modified,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id},
</if>
<if test="logisticsCode != null" >
#{logisticsCode},
</if>
<if test="logisticsName != null" >
#{logisticsName},
</if>
<if test="logisticsIcon != null" >
#{logisticsIcon},
</if>
<if test="logisticsUrl != null" >
#{logisticsUrl},
</if>
<if test="logisticsRemark != null" >
#{logisticsRemark},
</if>
<if test="freightLimit != null" >
#{freightLimit},
</if>
<if test="customFeeLimit != null" >
#{customFeeLimit},
</if>
<if test="customTimeLimit != null" >
#{customTimeLimit},
</if>
<if test="showLimit != null" >
#{showLimit},
</if>
<if test="status != null" >
#{status},
</if>
<if test="createUser != null" >
#{createUser},
</if>
<if test="modifyUser != null" >
#{modifyUser},
</if>
<if test="created == null" >
now(),
</if>
<if test="modified == null" >
now(),
</if>
</trim>
<selectKey resultType="long" keyProperty="id">
SELECT @@IDENTITY AS ID
</selectKey>
</insert>
<select id="countByQuery" parameterType="QueryMallLogistics" resultType="java.lang.Long" >
select count(*) from mall_logistics
<if test="page != null" >
<include refid="Query_Where_Clause" />
</if>
</select>
<update id="updateMallLogisticsByIdModified" parameterType="MallLogistics" >
update mall_logistics
<set >
<if test="logisticsCode != null" >
logistics_code = #{logisticsCode},
</if>
<if test="logisticsName != null" >
logistics_name = #{logisticsName},
</if>
<if test="logisticsIcon != null" >
logistics_icon = #{logisticsIcon},
</if>
<if test="logisticsUrl != null" >
logistics_url = #{logisticsUrl},
</if>
<if test="logisticsRemark != null" >
logistics_remark = #{logisticsRemark},
</if>
<if test="freightLimit != null" >
freight_limit = #{freightLimit},
</if>
<if test="customFeeLimit != null" >
custom_fee_limit = #{customFeeLimit},
</if>
<if test="customTimeLimit != null" >
custom_time_limit = #{customTimeLimit},
</if>
<if test="showLimit != null" >
show_limit = #{showLimit},
</if>
<if test="status != null" >
status = #{status},
</if>
<if test="createUser != null" >
create_user = #{createUser},
</if>
<if test="modifyUser != null" >
modify_user = #{modifyUser},
</if>
<if test="created != null" >
created = #{created},
</if>
<if test="modified != null" >
modified=now(),
</if>
</set>
where id = #{id}
</update>
</mapper>前端功能实现
功能的实现，主要还是基于element-ui来实现的。这里提几个关键的点，最后也会把源代码给到你的。
列表展示：
主要是通过el-table组件实现的，属性data用于绑定需要展现的数据。需要你定义和操作。
新增/编辑弹框
弹框展示的标题和展示，通过页面定义的数据来控制。
表单中的下拉选项，通过el-select组件来实现。
注意使用的v-for指令，以及你需要在页面上定义你的选项数据。
关键点已经都告诉你了，最后，将页面的源码送你吧，不过还是希望你仅仅作为参考，自己动手去实现一次。
<template>
<div>
<el-form ref="listQuery" :model="listQuery" :inline="true">
<el-form-item label="供应商名称" prop="logisticsName">
<el-input v-model="listQuery.logisticsNameLike" placeholder="请输供应商名称" clearable />
</el-form-item>
<el-form-item label="供应商编码" prop="logisticsName">
<el-input v-model="listQuery.logisticsCodeLike" placeholder="请输供应商名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<el-button icon="el-icon-s-tools" @click="resetForm('listQuery')">重置</el-button>
<el-button type="primary" icon="el-icon-edit" @click="addLogistics()">新增</el-button>
</el-form-item>
</el-form>
<div style="margin-top:25px">
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
style="width: 100%"
border
>
<el-table-column label="供应商名称" min-width="25%">
<template slot-scope="scope">
{{ scope.row.logisticsName }}
</template>
</el-table-column>
<el-table-column label="供应商编码" min-width="25%">
<template slot-scope="scope">
{{ scope.row.logisticsCode }}
</template>
</el-table-column>
<el-table-column label="icon">
<template slot-scope="scope"><img style="width: 200px; height: 100px" :src="scope.row.logisticsIcon" alt=""></template>
</el-table-column>
<el-table-column label="运单查询地址">
<template slot-scope="scope">{{ scope.row.logisticsUrl }}</template>
</el-table-column>
<el-table-column label="有运费限制" min-width="15%">
<template slot-scope="scope">
{{ scope.row.freightLimit===1?'是':'否' }}
</template>
</el-table-column>
<el-table-column label="可设置自定义运费" min-width="15%">
<template slot-scope="scope">
{{ scope.row.customFeeLimit===1?'是':'否' }}
</template>
</el-table-column>
<el-table-column label="可设置自定义运达时间" min-width="15%">
<template slot-scope="scope">
{{ scope.row.customTimeLimit===1?'是':'否' }}
</template>
</el-table-column>
<el-table-column label="前台显示" min-width="15%">
<template slot-scope="scope">
{{ scope.row.showLimit===1?'是':'否' }}
</template>
</el-table-column>
<el-table-column label="状态" min-width="15%">
<template slot-scope="scope">
{{ scope.row.status===0 ?'停用':'启用' }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
<el-button
v-if="scope.row.status===1"
type="primary"
size="mini"
@click="handleDisable(scope.$index, scope.row)"
>停用
</el-button>
<el-button
v-if="scope.row.status===0"
type="primary"
size="mini"
@click="handleEnable(scope.$index, scope.row)"
>启用
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
<!-- 新增/编辑弹框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 500px; margin-left:50px;">
<el-form-item label="供应商名称:" prop="logisticsName">
<el-input v-model="temp.logisticsName" maxlength="20" />
</el-form-item>
<el-form-item label="供应商编码:" prop="logisticsCode">
<el-input v-model="temp.logisticsCode" maxlength="50" oninput="value=value.replace(/[^d]/g,'')" alt="只能是数字" />
</el-form-item>
<el-form-item label="运单查询地址:" prop="logisticsUrl">
<el-input v-model="temp.logisticsUrl" maxlength="256" />
</el-form-item>
<el-form-item label="运费限制:" prop="freightLimit">
<el-select v-model="temp.freightLimit" placeholder="请选择">
<el-option
v-for="(item,index) in isabled"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="自定义运费:" prop="customFeeLimit">
<el-select v-model="temp.customFeeLimit" placeholder="请选择">
<el-option
v-for="(item,index) in isabled"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="自定义送达时间:" prop="customTimeLimit">
<el-select v-model="temp.customTimeLimit" placeholder="请选择">
<el-option
v-for="(item,index) in customTimeLimitList"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="前台展示:" prop="showLimit">
<el-select v-model="temp.showLimit" placeholder="请选择">
<el-option
v-for="(item,index) in showLimitList"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="状态:" prop="status">
<el-select v-model="temp.status" placeholder="请选择">
<el-option
v-for="(item,index) in statusList"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-upload
ref="upload"
:file-list="imgList"
action="http://127.0.0.1:9201/upload/uploadFile?moudle=logistics"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="handleSuccess"
:headers="uploadHeader"
accept="image/jpeg,image/gif,image/png,image/bmp"
>
<i />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogFormVisible = false">
取消
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
确定
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { getLogisticsList, createLogistics, updateLogistics, enableLogistics, disableLogistics, deleteLogistics } from '@/api/freightManage/carrier'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getToken } from '@/utils/auth'
export default {
components: { Pagination },
data() {
return {
listLoading: false,
uploadHeader: { 'X-Token': getToken() },
rules: {
logisticsName: [{ required: true, message: '请输入供应商名称', trigger: 'change' }],
logisticsCode: [{ required: true, message: '请输入供应商编码', trigger: 'change' }]
},
listQuery: {
// logisticsType: 1,
// status: 1,
page: 1,
pageSize: 10
},
temp: {
id: undefined,
// 物流供应商编码
logisticsCode: '',
// 物流供应商名称L
logisticsName: '',
logisticsIcon: '',
logisticsRemark: '',
freightLimit: 1,
customFeeLimit: 1,
customTimeLimit: 1,
showLimit: 1,
status: 1
},
imgList: [],
dialogStatus: '',
textMap: {
update: '编辑物流供应商',
create: '新增供应商'
},
dialogImageUrl: '',
dialogVisible: false,
// 弹框是否显示
dialogFormVisible: false,
// 分页
total: 0,
// table集合
list: null,
isabled: [
{
code: 1,
name: '是'
},
{
code: 0,
name: '否'
}
],
customTimeLimitList: [
{
code: 1,
name: '是'
},
{
code: 0,
name: '否'
}
],
showLimitList: [
{
code: 1,
name: '是'
},
{
code: 0,
name: '否'
}],
logisticsTypeList: [
{
code: 1,
name: '快递服务'
},
{
code: 2,
name: '标准服务'
},
{
code: 3,
name: '经济服务'
}
],
statusList: [
{
code: 1,
name: '启用'
},
{
code: 2,
name: '停用'
}
]
}
},
created() {
this.getList()
},
methods: {
// 更新保存方法
updateData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
const tempData = Object.assign({}, this.temp)
updateLogistics(tempData).then(() => {
const index = this.list.findIndex(v => v.id === this.temp.id)
this.list.splice(index, 1, this.temp)
this.dialogFormVisible = false
this.$notify({
title: 'Success',
message: 'Update Successfully',
type: 'success',
duration: 2000
})
})
}
})
},
// 创建保存方法
createData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
createLogistics(this.temp).then((res) => {
this.temp.id = res.model.id
this.list.unshift(this.temp)
this.dialogFormVisible = false
this.$notify({
title: 'Success',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
})
}
})
},
// 编辑
handleUpdate(row) {
this.imgList = []
this.temp = Object.assign({}, row) // copy obj
if (row.logisticsIcon !== null && row.logisticsIcon !== '') {
const obj = {}
obj.url = row.logisticsIcon
this.imgList.push(obj)
}
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
// 启用
handleEnable(index, row) {
console.log(row)
enableLogistics(Object.assign({}, row)).then((res) => {
this.$notify({
title: 'Success',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
this.getList()
})
},
// 停用
handleDisable(index, row) {
disableLogistics(row).then((res) => {
this.$notify({
title: 'Success',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
this.getList()
})
},
// 删除
handleDelete(index, row) {
deleteLogistics(row).then((res) => {
this.$notify({
title: 'Success',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
this.getList()
})
},
resetTemp() {
this.temp = {
id: undefined,
// 物流供应商编码
logisticsCode: '',
// 物流供应商名称L
logisticsName: '',
logisticsIcon: '',
logisticsRemark: '',
freightLimit: 1,
customFeeLimit: 1,
customTimeLimit: 1,
showLimit: 1,
status: 1
}
this.dialogVisible = false
this.imgList = []
},
// 新增
addLogistics() {
this.resetTemp()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
// 查询方法
fetchData() {
this.listQuery.page = 1
this.listQuery.pageSize = 10
// this.listQuery.limit = 10
this.getList()
},
// 重置表单
resetForm(formName) {
this.$refs[formName].resetFields()
},
// 列表方法查询
getList() {
this.listLoading = true
getLogisticsList(this.listQuery).then(response => {
this.list = response.model
this.total = response.totalItem
console.log(response)
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
},
handleSuccess(res, file, fileList) {
this.temp.logisticsIcon = res.model
console.log(this.temp.logo)
}
}
}
</script>
<style scoped>
a, a:focus, a:hover {
cursor: pointer;
color: rgb(67, 149, 255);
text-decoration: none;
margin: 10px;
}
</style>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux中Centos7的LVM磁盘扩容问题
- 如何禁止网站内容被搜索引擎收录的几种方法讲解
- Apache由http自动跳转到https的多种方法
- CentOS服务器中安装FFmpeg的完整步骤
- linux中Centos7增加swap分区详解
- CentOS7如何重置root密码的方法
- Linux下RPM打包制作过程
- linux ssh端口转发的三种方式
- 学习Centos7软raid5的挂载
- linux中crw brw lrw等等文件属性是什么
- centos中文件与权限的基本操作教程
- 在Linux中使用tcpdump命令捕获与分析数据包详解
- easyswoole一键安装脚本及宝塔安装错误问题
- CentOS7系统增加swap的操作方法实例
- iOS逆向之OpenSSH登录iPhone