|
|
|
|
@ -1,9 +1,13 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- 筛选搜索区域 -->
|
|
|
|
|
<el-card class="filter-container" shadow="never">
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 搜索图标 -->
|
|
|
|
|
<i class="el-icon-search"></i>
|
|
|
|
|
<!-- 筛选搜索文本 -->
|
|
|
|
|
<span>筛选搜索</span>
|
|
|
|
|
<!-- 查询按钮 -->
|
|
|
|
|
<el-button
|
|
|
|
|
style="float:right"
|
|
|
|
|
type="primary"
|
|
|
|
|
@ -11,6 +15,7 @@
|
|
|
|
|
size="small">
|
|
|
|
|
查询搜索
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 重置按钮 -->
|
|
|
|
|
<el-button
|
|
|
|
|
style="float:right;margin-right: 15px"
|
|
|
|
|
@click="handleResetSearch()"
|
|
|
|
|
@ -18,11 +23,14 @@
|
|
|
|
|
重置
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 表单布局，用于输入筛选条件 -->
|
|
|
|
|
<div style="margin-top: 15px">
|
|
|
|
|
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
|
|
|
|
|
<!-- 广告名称筛选项 -->
|
|
|
|
|
<el-form-item label="广告名称：">
|
|
|
|
|
<el-input v-model="listQuery.name" class="input-width" placeholder="广告名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 广告位置筛选项 -->
|
|
|
|
|
<el-form-item label="广告位置：">
|
|
|
|
|
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
|
|
|
|
|
<el-option v-for="item in typeOptions"
|
|
|
|
|
@ -32,6 +40,7 @@
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 到期时间筛选项 -->
|
|
|
|
|
<el-form-item label="到期时间：">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
class="input-width"
|
|
|
|
|
@ -44,36 +53,48 @@
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 操作区域 -->
|
|
|
|
|
<el-card class="operate-container" shadow="never">
|
|
|
|
|
<!-- 操作图标 -->
|
|
|
|
|
<i class="el-icon-tickets"></i>
|
|
|
|
|
<!-- 数据列表文本 -->
|
|
|
|
|
<span>数据列表</span>
|
|
|
|
|
<!-- 添加广告按钮 -->
|
|
|
|
|
<el-button size="mini" class="btn-add" @click="handleAdd()">添加广告</el-button>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 表格展示区域 -->
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
<el-table ref="homeAdvertiseTable"
|
|
|
|
|
:data="list"
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
v-loading="listLoading" border>
|
|
|
|
|
<!-- 选择框列 -->
|
|
|
|
|
<el-table-column type="selection" width="60" align="center"></el-table-column>
|
|
|
|
|
<!-- 编号列 -->
|
|
|
|
|
<el-table-column label="编号" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.id}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 广告名称列 -->
|
|
|
|
|
<el-table-column label="广告名称" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.name}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 广告位置列 -->
|
|
|
|
|
<el-table-column label="广告位置" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.type | formatType}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 广告图片列 -->
|
|
|
|
|
<el-table-column label="广告图片" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 时间列 -->
|
|
|
|
|
<el-table-column label="时间" width="220" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<p>开始时间：{{scope.row.startTime | formatTime}}</p>
|
|
|
|
|
<p>到期时间：{{scope.row.endTime | formatTime}}</p>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 上线/下线状态列 -->
|
|
|
|
|
<el-table-column label="上线/下线" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-switch
|
|
|
|
|
@ -84,18 +105,23 @@
|
|
|
|
|
</el-switch>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 点击次数列 -->
|
|
|
|
|
<el-table-column label="点击次数" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.clickCount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 生成订单列 -->
|
|
|
|
|
<el-table-column label="生成订单" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.orderCount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 操作列 -->
|
|
|
|
|
<el-table-column label="操作" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!-- 编辑按钮 -->
|
|
|
|
|
<el-button size="mini"
|
|
|
|
|
type="text"
|
|
|
|
|
@click="handleUpdate(scope.$index, scope.row)">编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 删除按钮 -->
|
|
|
|
|
<el-button size="mini"
|
|
|
|
|
type="text"
|
|
|
|
|
@click="handleDelete(scope.$index, scope.row)">删除
|
|
|
|
|
@ -104,10 +130,13 @@
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 这是一个包含批量操作和分页功能的容器 div -->
|
|
|
|
|
<div class="batch-operate-container">
|
|
|
|
|
<!-- el-select 组件，用于选择批量操作的类型，设置了 small 尺寸，并使用 v-model 双向绑定数据到 operateType 变量，placeholder 用于显示默认提示文本 -->
|
|
|
|
|
<el-select
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="operateType" placeholder="批量操作">
|
|
|
|
|
<!-- 使用 v-for 循环遍历 operates 数组来生成 el-option 选项，每个选项的 key 根据 item.value 来设置，label 显示文本取自 item.label，value 值取自 item.value -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in operates"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
@ -115,6 +144,7 @@
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<!-- el-button 组件，是一个按钮，设置了左边距为 20 像素，添加了 search-button 类名，绑定了点击事件 handleBatchOperate()，按钮类型为 primary（通常是主要操作按钮的样式），尺寸为 small -->
|
|
|
|
|
<el-button
|
|
|
|
|
style="margin-left: 20px"
|
|
|
|
|
class="search-button"
|
|
|
|
|
@ -124,6 +154,7 @@
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 这是一个用于分页功能展示的容器 div -->
|
|
|
|
|
<div class="pagination-container">
|
|
|
|
|
<el-pagination
|
|
|
|
|
background
|
|
|
|
|
@ -139,169 +170,200 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {fetchList,updateStatus,deleteHomeAdvertise} from '@/api/homeAdvertise';
|
|
|
|
|
import {formatDate} from '@/utils/date';
|
|
|
|
|
const defaultListQuery = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 5,
|
|
|
|
|
name: null,
|
|
|
|
|
type: null,
|
|
|
|
|
endTime:null
|
|
|
|
|
};
|
|
|
|
|
const defaultTypeOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: 'PC首页轮播',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'APP首页轮播',
|
|
|
|
|
value: 1
|
|
|
|
|
// 从'@/api/homeAdvertise'模块导入获取列表、更新状态、删除广告相关的函数
|
|
|
|
|
import {fetchList, updateStatus, deleteHomeAdvertise} from '@/api/homeAdvertise';
|
|
|
|
|
// 从'@/utils/date'模块导入日期格式化函数
|
|
|
|
|
import {formatDate} from '@/utils/date';
|
|
|
|
|
|
|
|
|
|
// 默认的列表查询参数对象，包含页码、每页数量、名称、类型、结束时间等属性初始值
|
|
|
|
|
const defaultListQuery = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 5,
|
|
|
|
|
name: null,
|
|
|
|
|
type: null,
|
|
|
|
|
endTime: null
|
|
|
|
|
};
|
|
|
|
|
// 默认的广告类型选项数组，包含PC首页轮播、APP首页轮播等类型及对应值
|
|
|
|
|
const defaultTypeOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: 'PC首页轮播',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'APP首页轮播',
|
|
|
|
|
value: 1
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'homeAdvertiseList',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 当前列表查询参数，初始为默认值副本
|
|
|
|
|
listQuery: Object.assign({}, defaultListQuery),
|
|
|
|
|
// 广告类型选项，初始为默认值副本
|
|
|
|
|
typeOptions: Object.assign({}, defaultTypeOptions),
|
|
|
|
|
// 广告列表数据，初始为null
|
|
|
|
|
list: null,
|
|
|
|
|
// 广告数据总条数，初始为null
|
|
|
|
|
total: null,
|
|
|
|
|
// 列表数据加载状态，初始为false
|
|
|
|
|
listLoading: false,
|
|
|
|
|
// 多选选中的广告记录，初始为空数组
|
|
|
|
|
multipleSelection: [],
|
|
|
|
|
// 批量操作选项，目前只有“删除”
|
|
|
|
|
operates: [
|
|
|
|
|
{
|
|
|
|
|
label: "删除",
|
|
|
|
|
value: 0
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// 当前选择的批量操作类型，初始为null
|
|
|
|
|
operateType: null
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
export default {
|
|
|
|
|
name: 'homeAdvertiseList',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
listQuery: Object.assign({}, defaultListQuery),
|
|
|
|
|
typeOptions: Object.assign({}, defaultTypeOptions),
|
|
|
|
|
list: null,
|
|
|
|
|
total: null,
|
|
|
|
|
listLoading: false,
|
|
|
|
|
multipleSelection: [],
|
|
|
|
|
operates: [
|
|
|
|
|
{
|
|
|
|
|
label: "删除",
|
|
|
|
|
value: 0
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
operateType: null
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 组件创建时调用，获取广告列表数据
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
// 格式化广告类型显示文本的过滤器
|
|
|
|
|
formatType(type) {
|
|
|
|
|
if (type === 1) {
|
|
|
|
|
return 'APP首页轮播';
|
|
|
|
|
} else {
|
|
|
|
|
return 'PC首页轮播';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 格式化时间显示文本的过滤器
|
|
|
|
|
formatTime(time) {
|
|
|
|
|
if (time == null || time === '') {
|
|
|
|
|
return 'N/A';
|
|
|
|
|
}
|
|
|
|
|
let date = new Date(time);
|
|
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 重置搜索条件的方法
|
|
|
|
|
handleResetSearch() {
|
|
|
|
|
this.listQuery = Object.assign({}, defaultListQuery);
|
|
|
|
|
},
|
|
|
|
|
// 处理搜索列表的方法，重置页码后获取列表数据
|
|
|
|
|
handleSearchList() {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
filters:{
|
|
|
|
|
formatType(type){
|
|
|
|
|
if(type===1){
|
|
|
|
|
return 'APP首页轮播';
|
|
|
|
|
}else{
|
|
|
|
|
return 'PC首页轮播';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
formatTime(time){
|
|
|
|
|
if(time==null||time===''){
|
|
|
|
|
return 'N/A';
|
|
|
|
|
}
|
|
|
|
|
let date = new Date(time);
|
|
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
|
|
|
|
},
|
|
|
|
|
// 处理多选选择改变的方法，更新多选选中的记录
|
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleResetSearch() {
|
|
|
|
|
this.listQuery = Object.assign({}, defaultListQuery);
|
|
|
|
|
},
|
|
|
|
|
handleSearchList() {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
handleSelectionChange(val){
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.listQuery.pageSize = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.listQuery.pageNum = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
handleUpdateStatus(index,row){
|
|
|
|
|
this.$confirm('是否要修改上线/下线状态?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
updateStatus(row.id,{status:row.status}).then(response=>{
|
|
|
|
|
this.getList();
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '修改成功!'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
// 处理每页显示数量改变的方法，重置页码，更新每页数量后获取列表数据
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.listQuery.pageSize = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// 处理当前页码改变的方法，更新页码后获取列表数据
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.listQuery.pageNum = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// 处理更新广告状态的方法，确认后调用接口更新状态，成功则重新获取列表数据并提示
|
|
|
|
|
handleUpdateStatus(index, row) {
|
|
|
|
|
this.$confirm('是否要修改上线/下线状态?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
updateStatus(row.id, {status: row.status}).then(response => {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '已取消操作!'
|
|
|
|
|
message: '修改成功!'
|
|
|
|
|
});
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleDelete(index,row){
|
|
|
|
|
this.deleteHomeAdvertise(row.id);
|
|
|
|
|
},
|
|
|
|
|
handleBatchOperate(){
|
|
|
|
|
if (this.multipleSelection < 1) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请选择一条记录',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let ids = [];
|
|
|
|
|
for (let i = 0; i < this.multipleSelection.length; i++) {
|
|
|
|
|
ids.push(this.multipleSelection[i].id);
|
|
|
|
|
}
|
|
|
|
|
if(this.operateType===0){
|
|
|
|
|
//删除
|
|
|
|
|
this.deleteHomeAdvertise(ids);
|
|
|
|
|
}else {
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '已取消操作!'
|
|
|
|
|
});
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 处理删除单个广告的方法，调用删除广告的接口
|
|
|
|
|
handleDelete(index, row) {
|
|
|
|
|
this.deleteHomeAdvertise(row.id);
|
|
|
|
|
},
|
|
|
|
|
// 处理批量操作的方法，先判断是否有选中记录，有则根据操作类型执行相应操作
|
|
|
|
|
handleBatchOperate() {
|
|
|
|
|
if (this.multipleSelection < 1) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请选择一条记录',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let ids = [];
|
|
|
|
|
for (let i = 0; i < this.multipleSelection.length; i++) {
|
|
|
|
|
ids.push(this.multipleSelection[i].id);
|
|
|
|
|
}
|
|
|
|
|
if (this.operateType === 0) {
|
|
|
|
|
// 删除
|
|
|
|
|
this.deleteHomeAdvertise(ids);
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请选择批量操作类型',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 处理添加广告的方法，跳转到添加广告的路由页面
|
|
|
|
|
handleAdd() {
|
|
|
|
|
this.$router.push({path: '/sms/addAdvertise'})
|
|
|
|
|
},
|
|
|
|
|
// 处理更新广告的方法，跳转到更新广告的路由页面并传递广告id
|
|
|
|
|
handleUpdate(index, row) {
|
|
|
|
|
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
|
|
|
|
|
},
|
|
|
|
|
// 获取广告列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
|
|
|
|
|
getList() {
|
|
|
|
|
this.listLoading = true;
|
|
|
|
|
fetchList(this.listQuery).then(response => {
|
|
|
|
|
this.listLoading = false;
|
|
|
|
|
this.list = response.data.list;
|
|
|
|
|
this.total = response.data.total;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 删除广告的方法，确认后调用接口删除，成功则重新获取列表数据并提示
|
|
|
|
|
deleteHomeAdvertise(ids) {
|
|
|
|
|
this.$confirm('是否要删除该广告?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
let params = new URLSearchParams();
|
|
|
|
|
params.append("ids", ids);
|
|
|
|
|
deleteHomeAdvertise(params).then(response => {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请选择批量操作类型',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleAdd(){
|
|
|
|
|
this.$router.push({path: '/sms/addAdvertise'})
|
|
|
|
|
},
|
|
|
|
|
handleUpdate(index,row){
|
|
|
|
|
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
|
|
|
|
|
},
|
|
|
|
|
getList() {
|
|
|
|
|
this.listLoading = true;
|
|
|
|
|
fetchList(this.listQuery).then(response => {
|
|
|
|
|
this.listLoading = false;
|
|
|
|
|
this.list = response.data.list;
|
|
|
|
|
this.total = response.data.total;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
deleteHomeAdvertise(ids){
|
|
|
|
|
this.$confirm('是否要删除该广告?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
let params=new URLSearchParams();
|
|
|
|
|
params.append("ids",ids);
|
|
|
|
|
deleteHomeAdvertise(params).then(response=>{
|
|
|
|
|
this.getList();
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功!'
|
|
|
|
|
});
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功!'
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.input-width {
|
|
|
|
|
width: 203px;
|
|
|
|
|
}
|
|
|
|
|
<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件 -->
|
|
|
|
|
.input-width {
|
|
|
|
|
<!-- 定义类选择器样式，设置宽度为203px -->
|
|
|
|
|
width: 203px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
