You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
611 lines
19 KiB
611 lines
19 KiB
2 years ago
|
<template>
|
||
|
<basic-container>
|
||
|
<div class="avue-crud">
|
||
|
<el-row :hidden="!search" style="padding:6px 18px">
|
||
|
<!-- 查询模块 -->
|
||
|
<el-form :inline="true" :model="query">
|
||
|
<el-form-item label="地址:">
|
||
|
<!-- <el-input v-model="query.province" placeholder="请输入省"></el-input>-->
|
||
|
<el-cascader :options="optioner">
|
||
|
<template #default="{ node, data }">
|
||
|
<span>{{ data.label }}</span>
|
||
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||
|
</template>
|
||
|
</el-cascader>
|
||
|
</el-form-item>
|
||
|
<!-- <el-form-item label="市:">-->
|
||
|
<!-- <el-input v-model="query.city" placeholder="请输入市"></el-input>-->
|
||
|
<!-- </el-form-item>-->
|
||
|
<!-- <el-form-item label="区/县:">-->
|
||
|
<!-- <el-input v-model="query.district" placeholder="请输入区/县"></el-input>-->
|
||
|
<!-- </el-form-item>-->
|
||
|
<el-form-item label="品牌:">
|
||
|
<el-input v-model="query.brand" placeholder="请输入品牌"></el-input>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="费用类型:">
|
||
|
<!-- <el-input v-model="query.freightMark" placeholder="请输入费用标识"></el-input>-->
|
||
|
<el-select v-model="query.freightMark" class="m-2" placeholder="请选择客户类型" >
|
||
|
<el-option
|
||
|
v-for="item in clientType"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
/>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="末端仓:">
|
||
|
<el-input v-model="query.goalGranary" placeholder="请输入末端仓"></el-input>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="状态:">
|
||
|
<el-input v-model="query.condition" placeholder="请输入状态"></el-input>
|
||
|
</el-form-item>
|
||
|
<!-- 查询按钮 -->
|
||
|
<el-form-item>
|
||
|
<el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
|
||
|
<el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
|
||
|
</el-form-item>
|
||
|
</el-form>
|
||
|
</el-row>
|
||
|
<el-row>
|
||
|
<div class="avue-crud__header">
|
||
|
<!-- 头部左侧按钮模块 -->
|
||
|
<div class="avue-crud__left">
|
||
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
|
||
|
<el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>
|
||
|
</div>
|
||
|
<!-- 头部右侧按钮模块 -->
|
||
|
<div class="avue-crud__right">
|
||
|
<el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
|
||
|
<el-button icon="el-icon-search" @click="searchHide" circle></el-button>
|
||
|
</div>
|
||
|
</div>
|
||
|
</el-row>
|
||
|
<el-row>
|
||
|
<!-- 列表模块 -->
|
||
|
<el-table ref="table" v-loading="loading"
|
||
|
@selection-change="selectionChange"
|
||
|
:data="data"
|
||
|
:height="height"
|
||
|
style="width: 100%"
|
||
|
:border="option.border">
|
||
|
<el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>
|
||
|
<el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
|
||
|
<el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">
|
||
|
</el-table-column>
|
||
|
<template v-for="(item,index) in option.column">
|
||
|
<!-- table字段 -->
|
||
|
<el-table-column v-if="item.hide!==true"
|
||
|
:prop="item.prop"
|
||
|
:label="item.label"
|
||
|
|
||
|
:key="index" align="center">
|
||
|
</el-table-column>
|
||
|
</template>
|
||
|
<!-- 操作栏模块 -->
|
||
|
<el-table-column prop="menu" label="操作" :width="220" align="center">
|
||
|
<template #="{row}">
|
||
|
<el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>
|
||
|
<el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
|
||
|
<el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
</el-table>
|
||
|
</el-row>
|
||
|
<el-row>
|
||
|
<div class="avue-crud__pagination" style="width:100%">
|
||
|
<!-- 分页模块 -->
|
||
|
<el-pagination align="right"
|
||
|
background
|
||
|
@size-change="sizeChange"
|
||
|
@current-change="currentChange"
|
||
|
:current-page="page.currentPage"
|
||
|
:page-sizes="[10, 20, 30, 40, 50, 100]"
|
||
|
:page-size="page.pageSize"
|
||
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
:total="page.total">
|
||
|
</el-pagination>
|
||
|
</div>
|
||
|
</el-row>
|
||
|
<!-- 表单模块 -->
|
||
|
<el-dialog :title="title"
|
||
|
v-model="box"
|
||
|
width="50%"
|
||
|
:before-close="beforeClose"
|
||
|
append-to-body>
|
||
|
<el-form :disabled="view" ref="form" :model="form" label-width="80px">
|
||
|
<!-- 表单字段 -->
|
||
|
<el-form-item label="省" prop="province">
|
||
|
<el-input v-model="form.province" placeholder="请输入省"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="市" prop="city">
|
||
|
<el-input v-model="form.city" placeholder="请输入市"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="区/县" prop="district">
|
||
|
<el-input v-model="form.district" placeholder="请输入区/县"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="品牌" prop="brand">
|
||
|
<el-input v-model="form.brand" placeholder="请输入品牌"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="费用类型" prop="freightMark">
|
||
|
<el-input v-model="form.freightMark" placeholder="请输入费用标识;1 运费 2 送货费用 3提货费用 4仓库管理费用 5 仓储费用 6装卸费用 7 其他费用 8仓储时间端费用"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="费用" prop="cost">
|
||
|
<el-input v-model="form.cost" placeholder="请输入费用"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="仓储时间端状态" prop="warehousingTimeStatus">
|
||
|
<el-input v-model="form.warehousingTimeStatus" placeholder="请输入仓储时间端状态;1 0-30天 2 0-60天 3 60天以上"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="仓储时间端费用" prop="warehousingTimeCharge">
|
||
|
<el-input v-model="form.warehousingTimeCharge" placeholder="请输入仓储时间端费用"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="末端仓" prop="goalGranary">
|
||
|
<el-input v-model="form.goalGranary" placeholder="请输入末端仓"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="标识" prop="identification">
|
||
|
<el-input v-model="form.identification" placeholder="请输入标识"/>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="状态" prop="condition">
|
||
|
<el-input v-model="form.condition" placeholder="请输入状态"/>
|
||
|
</el-form-item>
|
||
|
</el-form>
|
||
|
<!-- 表单按钮 -->
|
||
|
<template #footer>
|
||
|
<span v-if="!view" class="dialog-footer">
|
||
|
<el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit">提 交</el-button>
|
||
|
<el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
|
||
|
</span>
|
||
|
</template>
|
||
|
</el-dialog>
|
||
|
</div>
|
||
|
</basic-container>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { getList, getDetail, add, update, remove } from "@/api/basicdata/basicZonePrice";
|
||
|
import option from "@/option/basicdata/basicZonePrice";
|
||
|
import { mapGetters } from "vuex";
|
||
|
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
height: 0,
|
||
|
// 弹框标题
|
||
|
title: '',
|
||
|
// 是否展示弹框
|
||
|
box: false,
|
||
|
// 是否显示查询
|
||
|
search: true,
|
||
|
// 加载中
|
||
|
loading: true,
|
||
|
// 是否为查看模式
|
||
|
view: false,
|
||
|
// 查询信息
|
||
|
query: {},
|
||
|
clientType:[],
|
||
|
// 分页信息
|
||
|
page: {
|
||
|
currentPage: 1,
|
||
|
pageSize: 10,
|
||
|
total: 40
|
||
|
},
|
||
|
// 表单数据
|
||
|
form: {},
|
||
|
// 选择行
|
||
|
selectionList: [],
|
||
|
// 表单配置
|
||
|
option: option,
|
||
|
// 表单列表
|
||
|
data: [],
|
||
|
optioner:[
|
||
|
{
|
||
|
value: 'guide',
|
||
|
label: 'Guide',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'disciplines',
|
||
|
label: 'Disciplines',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'consistency',
|
||
|
label: 'Consistency',
|
||
|
},
|
||
|
{
|
||
|
value: 'feedback',
|
||
|
label: 'Feedback',
|
||
|
},
|
||
|
{
|
||
|
value: 'efficiency',
|
||
|
label: 'Efficiency',
|
||
|
},
|
||
|
{
|
||
|
value: 'controllability',
|
||
|
label: 'Controllability',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'navigation',
|
||
|
label: 'Navigation',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'side nav',
|
||
|
label: 'Side Navigation',
|
||
|
},
|
||
|
{
|
||
|
value: 'top nav',
|
||
|
label: 'Top Navigation',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'component',
|
||
|
label: 'Component',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'basic',
|
||
|
label: 'Basic',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'layout',
|
||
|
label: 'Layout',
|
||
|
},
|
||
|
{
|
||
|
value: 'color',
|
||
|
label: 'Color',
|
||
|
},
|
||
|
{
|
||
|
value: 'typography',
|
||
|
label: 'Typography',
|
||
|
},
|
||
|
{
|
||
|
value: 'icon',
|
||
|
label: 'Icon',
|
||
|
},
|
||
|
{
|
||
|
value: 'button',
|
||
|
label: 'Button',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'form',
|
||
|
label: 'Form',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'radio',
|
||
|
label: 'Radio',
|
||
|
},
|
||
|
{
|
||
|
value: 'checkbox',
|
||
|
label: 'Checkbox',
|
||
|
},
|
||
|
{
|
||
|
value: 'input',
|
||
|
label: 'Input',
|
||
|
},
|
||
|
{
|
||
|
value: 'input-number',
|
||
|
label: 'InputNumber',
|
||
|
},
|
||
|
{
|
||
|
value: 'select',
|
||
|
label: 'Select',
|
||
|
},
|
||
|
{
|
||
|
value: 'cascader',
|
||
|
label: 'Cascader',
|
||
|
},
|
||
|
{
|
||
|
value: 'switch',
|
||
|
label: 'Switch',
|
||
|
},
|
||
|
{
|
||
|
value: 'slider',
|
||
|
label: 'Slider',
|
||
|
},
|
||
|
{
|
||
|
value: 'time-picker',
|
||
|
label: 'TimePicker',
|
||
|
},
|
||
|
{
|
||
|
value: 'date-picker',
|
||
|
label: 'DatePicker',
|
||
|
},
|
||
|
{
|
||
|
value: 'datetime-picker',
|
||
|
label: 'DateTimePicker',
|
||
|
},
|
||
|
{
|
||
|
value: 'upload',
|
||
|
label: 'Upload',
|
||
|
},
|
||
|
{
|
||
|
value: 'rate',
|
||
|
label: 'Rate',
|
||
|
},
|
||
|
{
|
||
|
value: 'form',
|
||
|
label: 'Form',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'data',
|
||
|
label: 'Data',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'table',
|
||
|
label: 'Table',
|
||
|
},
|
||
|
{
|
||
|
value: 'tag',
|
||
|
label: 'Tag',
|
||
|
},
|
||
|
{
|
||
|
value: 'progress',
|
||
|
label: 'Progress',
|
||
|
},
|
||
|
{
|
||
|
value: 'tree',
|
||
|
label: 'Tree',
|
||
|
},
|
||
|
{
|
||
|
value: 'pagination',
|
||
|
label: 'Pagination',
|
||
|
},
|
||
|
{
|
||
|
value: 'badge',
|
||
|
label: 'Badge',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'notice',
|
||
|
label: 'Notice',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'alert',
|
||
|
label: 'Alert',
|
||
|
},
|
||
|
{
|
||
|
value: 'loading',
|
||
|
label: 'Loading',
|
||
|
},
|
||
|
{
|
||
|
value: 'message',
|
||
|
label: 'Message',
|
||
|
},
|
||
|
{
|
||
|
value: 'message-box',
|
||
|
label: 'MessageBox',
|
||
|
},
|
||
|
{
|
||
|
value: 'notification',
|
||
|
label: 'Notification',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'navigation',
|
||
|
label: 'Navigation',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'menu',
|
||
|
label: 'Menu',
|
||
|
},
|
||
|
{
|
||
|
value: 'tabs',
|
||
|
label: 'Tabs',
|
||
|
},
|
||
|
{
|
||
|
value: 'breadcrumb',
|
||
|
label: 'Breadcrumb',
|
||
|
},
|
||
|
{
|
||
|
value: 'dropdown',
|
||
|
label: 'Dropdown',
|
||
|
},
|
||
|
{
|
||
|
value: 'steps',
|
||
|
label: 'Steps',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'others',
|
||
|
label: 'Others',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'dialog',
|
||
|
label: 'Dialog',
|
||
|
},
|
||
|
{
|
||
|
value: 'tooltip',
|
||
|
label: 'Tooltip',
|
||
|
},
|
||
|
{
|
||
|
value: 'popover',
|
||
|
label: 'Popover',
|
||
|
},
|
||
|
{
|
||
|
value: 'card',
|
||
|
label: 'Card',
|
||
|
},
|
||
|
{
|
||
|
value: 'carousel',
|
||
|
label: 'Carousel',
|
||
|
},
|
||
|
{
|
||
|
value: 'collapse',
|
||
|
label: 'Collapse',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'resource',
|
||
|
label: 'Resource',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'axure',
|
||
|
label: 'Axure Components',
|
||
|
},
|
||
|
{
|
||
|
value: 'sketch',
|
||
|
label: 'Sketch Templates',
|
||
|
},
|
||
|
{
|
||
|
value: 'docs',
|
||
|
label: 'Design Documentation',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
}
|
||
|
},
|
||
|
mounted () {
|
||
|
this.init();
|
||
|
this.onLoad(this.page);
|
||
|
},
|
||
|
computed: {
|
||
|
...mapGetters(["permission"]),
|
||
|
ids () {
|
||
|
let ids = [];
|
||
|
this.selectionList.forEach(ele => {
|
||
|
ids.push(ele.id);
|
||
|
});
|
||
|
return ids.join(",");
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
init () {
|
||
|
this.height = this.setPx(document.body.clientHeight - 340);
|
||
|
},
|
||
|
searchHide () {
|
||
|
this.search = !this.search;
|
||
|
},
|
||
|
searchChange () {
|
||
|
this.onLoad(this.page);
|
||
|
},
|
||
|
searchReset () {
|
||
|
this.query = {};
|
||
|
this.page.currentPage = 1;
|
||
|
this.onLoad(this.page);
|
||
|
},
|
||
|
handleSubmit () {
|
||
|
if (!this.form.id) {
|
||
|
add(this.form).then(() => {
|
||
|
this.box = false;
|
||
|
this.onLoad(this.page);
|
||
|
this.$message({
|
||
|
type: "success",
|
||
|
message: "操作成功!"
|
||
|
});
|
||
|
});
|
||
|
} else {
|
||
|
update(this.form).then(() => {
|
||
|
this.box = false;
|
||
|
this.onLoad(this.page);
|
||
|
this.$message({
|
||
|
type: "success",
|
||
|
message: "操作成功!"
|
||
|
});
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
handleAdd () {
|
||
|
this.title = '新增'
|
||
|
this.form = {}
|
||
|
this.box = true
|
||
|
},
|
||
|
handleEdit (row) {
|
||
|
this.title = '编辑'
|
||
|
this.box = true
|
||
|
getDetail(row.id).then(res => {
|
||
|
this.form = res.data.data;
|
||
|
});
|
||
|
},
|
||
|
handleView (row) {
|
||
|
this.title = '查看'
|
||
|
this.view = true;
|
||
|
this.box = true;
|
||
|
getDetail(row.id).then(res => {
|
||
|
this.form = res.data.data;
|
||
|
});
|
||
|
},
|
||
|
handleDelete () {
|
||
|
if (this.selectionList.length === 0) {
|
||
|
this.$message.warning("请选择至少一条数据");
|
||
|
return;
|
||
|
}
|
||
|
this.$confirm("确定将选择数据删除?", {
|
||
|
confirmButtonText: "确定",
|
||
|
cancelButtonText: "取消",
|
||
|
type: "warning"
|
||
|
})
|
||
|
.then(() => {
|
||
|
return remove(this.ids);
|
||
|
})
|
||
|
.then(() => {
|
||
|
this.selectionClear();
|
||
|
this.onLoad(this.page);
|
||
|
this.$message({
|
||
|
type: "success",
|
||
|
message: "操作成功!"
|
||
|
});
|
||
|
});
|
||
|
},
|
||
|
rowDel (row) {
|
||
|
this.$confirm("确定将选择数据删除?", {
|
||
|
confirmButtonText: "确定",
|
||
|
cancelButtonText: "取消",
|
||
|
type: "warning"
|
||
|
})
|
||
|
.then(() => {
|
||
|
return remove(row.id);
|
||
|
})
|
||
|
.then(() => {
|
||
|
this.onLoad(this.page);
|
||
|
this.$message({
|
||
|
type: "success",
|
||
|
message: "操作成功!"
|
||
|
});
|
||
|
});
|
||
|
},
|
||
|
beforeClose (done) {
|
||
|
done()
|
||
|
this.form = {};
|
||
|
this.view = false;
|
||
|
},
|
||
|
selectionChange (list) {
|
||
|
this.selectionList = list;
|
||
|
},
|
||
|
selectionClear () {
|
||
|
this.selectionList = [];
|
||
|
this.$refs.table.clearSelection();
|
||
|
},
|
||
|
currentChange (currentPage) {
|
||
|
this.page.currentPage = currentPage;
|
||
|
this.onLoad(this.page);
|
||
|
},
|
||
|
sizeChange (pageSize) {
|
||
|
this.page.pageSize = pageSize;
|
||
|
this.onLoad(this.page);
|
||
|
},
|
||
|
onLoad (page, params = {}) {
|
||
|
this.loading = true;
|
||
|
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
||
|
const data = res.data.data;
|
||
|
this.page.total = data.total;
|
||
|
this.data = data.records;
|
||
|
this.loading = false;
|
||
|
this.selectionClear();
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
</script>
|