emis-frontend/src/views/emis/emisWaybillFeeitem/index.vue
2024-06-24 09:22:55 +08:00

548 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<search-form :model="queryParams" ref="queryForm" size="small" :maxShow="3" label-width="68px" v-show="showSearch" @search="handleQuery" @reset="resetQuery">
<el-form-item label="" prop="feeId">
<el-input
v-model="queryParams.feeId"
:placeholder="$t('费用编号')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="feeName">
<el-input
v-model="queryParams.feeName"
:placeholder="$t('费用名称')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="fee">
<el-input
v-model="queryParams.fee"
:placeholder="$t('费用值')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="currency">
<el-input
v-model="queryParams.currency"
:placeholder="$t('费用币种')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="waybillId">
<el-input
v-model="queryParams.waybillId"
:placeholder="$t('运单id')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="orderNum">
<el-input
v-model="queryParams.orderNum"
:placeholder="$t('排序名称')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="remark">
<el-input
v-model="queryParams.remark"
:placeholder="$t('备注')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</search-form>
<xd-table v-loading="loading"
border
size="small"
:data="emisWaybillFeeitemList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="total"
@queryTable="getList"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['emis:emisWaybillFeeitem:add']"
>新增</el-button>
</el-col>
<!--
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['emis:emisWaybillFeeitem:edit']"
>修改</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['emis:emisWaybillFeeitem:remove']"
>删除</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['emis:emisWaybillFeeitem:export']"
>导出</el-button>
</el-col> -->
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<!--
<el-table-column label="序号" align="center" min-width="60">
<template slot-scope="scope">
<span v-text="getIndex(scope.$index)"> </span>
</template>
</el-table-column>
<el-table-column label="xxx" align="left" prop="xxx" min-width="180">
<template slot-scope="scope">
<div class="link-type" @click="handleView(scope.row)">{{scope.row.orderSn}}</div>
</template>
</el-table-column>
<el-table-column label="结算状态" align="center" prop="settleStatus" :sort-orders="['descending','ascending']" sortable="custom" min-width="80">
<template slot-scope="scope">
<div v-if="scope.row.settleStatus == 0" style="color:red;">
<span class="el-tag el-tag--info">未结算</span>
</div>
<div v-if="scope.row.settleStatus == 10" style="color:red;">
<span class="el-tag">待确认</span>
</div>
<div v-if="scope.row.settleStatus == 11" style="color:green;">
<span class="el-tag el-tag--success el-tag--light">已确认</span>
</div>
<div v-if="scope.row.settleStatus == 20" >
<span class="el-tag el-tag--warning el-tag--light">待打款</span>
</div>
<div v-if="scope.row.settleStatus == 21" style="color:green;">
<span class="el-tag el-tag--success el-tag--light">已打款</span>
</div>
<div v-if="scope.row.settleStatus == 40" style="color:red;">
<span class="el-tag el-tag--danger">已拒绝</span>
</div>
</template>
</el-table-column>
-->
<el-table-column :label="$t('费用编号')" align="center" prop="feeId" min-width="100" />
<el-table-column :label="$t('费用名称')" align="center" prop="feeName" min-width="100" />
<el-table-column :label="$t('费用值')" align="center" prop="fee" min-width="100" />
<el-table-column :label="$t('费用币种')" align="center" prop="currency" min-width="100" />
<el-table-column :label="$t('运单id')" align="center" prop="waybillId" min-width="100" />
<el-table-column :label="$t('排序名称')" align="center" prop="orderNum" min-width="100" />
<el-table-column :label="$t('备注')" align="center" prop="remark" min-width="100" />
<el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['emis:emisWaybillFeeitem:edit']"
>修改</el-button>
<!--
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['emis:emisWaybillFeeitem:remove']"
>删除</el-button> -->
</template>
</el-table-column>
</xd-table>
<!-- 添加或修改运单费用条目对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag :close-on-click-modal="false" append-to-body>
<el-row :gutter="0">
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
<el-col :span="24">
<el-form-item :label="$t('费用编号')" prop="feeId">
<el-input v-model="form.feeId" placeholder="请输入费用编号" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('费用名称')" prop="feeName">
<el-input v-model="form.feeName" placeholder="请输入费用名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('费用值')" prop="fee">
<el-input v-model="form.fee" placeholder="请输入费用值" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('费用币种')" prop="currency">
<el-input v-model="form.currency" placeholder="请输入费用币种" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('运单id')" prop="waybillId">
<el-input v-model="form.waybillId" placeholder="请输入运单id" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('排序名称')" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('备注')" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-col>
<!--
<el-col :span="24" v-show="moreInputVisible" > </el-col>
<el-col :span="24">
<el-divider content-position="right" @click="handleShowMoreInput" >更多信息[+]</el-divider>
</el-col>
-->
</el-form>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!--
<el-dialog :title="titleForm" :visible.sync="openForm" width="500px" v-dialogDrag append-to-body>
<emisWaybillFeeitemForm :id="currentId" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisWaybillFeeitemForm>
</el-dialog>
-->
<!--
<el-dialog :title="titleView" :visible.sync="openView" width="60%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<emisWaybillFeeitemView :id="id" ></EmisWaybillFeeitemView>
</el-dialog>
-->
</div>
</template>
<script>
import { listEmisWaybillFeeitem, getEmisWaybillFeeitem, delEmisWaybillFeeitem, addEmisWaybillFeeitem, updateEmisWaybillFeeitem } from "@/api/emis/emisWaybillFeeitem";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import emisWaybillFeeitemView from '@/views/emis/emisWaybillFeeitem/emisWaybillFeeitemView';
import emisWaybillFeeitemForm from '@/views/emis/emisWaybillFeeitem/emisWaybillFeeitemForm';
export default {
name: "emisWaybillFeeitem",
components: { elDateSimplePicker,emisWaybillFeeitemView,emisWaybillFeeitemForm },
dicts: [
],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 运单费用条目表格数据
emisWaybillFeeitemList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
openForm: false,
titleForm: "",
titleEmisWaybillFeeitem: "",
openEmisWaybillFeeitem: false,
// 显示编辑框更多
moreInputVisible: false,
// 弹出展示层
currentId:null,
id:null,
titleView:"",
openView: false,
// 备注时间范围
daterangeCreateTime: [],
// 备注时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
feeId: null,
feeName: null,
fee: null,
currency: null,
waybillId: null,
orderNum: null,
remark: null
},
// 表单参数
form: {},
// 表单校验
rules: {
id: [
{ required: true, message: "id不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询运单费用条目列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
}
if (null != this.daterangeUpdateTime && '' != this.daterangeUpdateTime) {
this.queryParams.params["beginUpdateTime"] = this.daterangeUpdateTime[0];
this.queryParams.params["endUpdateTime"] = this.daterangeUpdateTime[1];
}
listEmisWaybillFeeitem(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
this.emisWaybillFeeitemList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
feeId: null,
feeName: null,
fee: null,
currency: null,
waybillId: null,
orderNum: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
// 排序 查询字段是表格中字段名字 动态取值排序顺序
handleSortChange(column) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.open = true;
this.title = "新增";
// 子组件打开模式
// if(row != undefined){
// this.currentParentId = row.id
// }
// this.openEmisWaybillFeeitem = true;
// this.titleEmisWaybillFeeitem = "新增";
},
handleShowMoreInput(){
this.moreInputVisible = !this.moreInputVisible;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getEmisWaybillFeeitem(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改";
});
// 子组件打开模式
// this.currentId= row.id || this.ids;
// this.openEmisWaybillFeeitem = true;
// this.titleEmisWaybillFeeitem = "修改";
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/emis/emisWaybillFeeitem/viewDetail', query: { id: row.id }})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateEmisWaybillFeeitem(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addEmisWaybillFeeitem(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleFormChanged(){
this.openForm = false;
this.getList();
},
cancelForm(){
this.openForm = false;
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisWaybillFeeitem(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisWaybillFeeitem/export', {
// ...this.queryParams
// }, `emisWaybillFeeitem_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listEmisWaybillFeeitem(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
this.downloadLoading = false
if (response.code === 200) {
const curList = response.rows
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['id','费用编号','费用名称','费用值','费用币种','运单id','排序名称','删除标志(0代表存在','创建者','创建时间','更新者','更新时间','备注',];
const filterVal = ['id','feeId','feeName','fee','currency','waybillId','orderNum','delFlag','createBy','createTime','updateBy','updateTime','remark',];
const data = this.formatJson(filterVal, curList, response.rows)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '运单费用条目',
autoWidth: true
})
loadingInstance.close()
})
}
});
},
formatJson(filterVal, jsonData, resData) {
let index = 0
return jsonData.map(v => filterVal.map(j => {
if (j === 'index') {
return ++index
}
if (j === 'status') {
var statusStr='xxx'
if(v[j] == 10){
statusStr='xxx'
}
return statusStr;
}
return v[j]
}))
},
/** 列索引函数 */
getIndex($index) {
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
},
/** 时间搜索响应函数 */
dateTimeChange(value){
this.dateTimeRange=value;
},
}
};
</script>
<style scoped>
.el-divider{
margin-top: 0px;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
.el-divider__text {
color: #0955ee;
cursor: pointer;
}
</style>