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

295 lines
9.2 KiB
Vue

<template>
<div>
<el-row :gutter="0" type='flex' style="min-height: 400px;">
<el-col :span="14" :xs="14" style="border-right: 1px solid #f3f3f3;padding-right: 5px;">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
plain
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['emis:emisQuoteSendArea: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:emisQuoteSendArea: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:emisQuoteSendArea:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
size="mini"
:disabled="single"
@click="handleSelect"
>使用选中区域</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
plain
type="primary"
size="mini"
:disabled="single"
@click="handleAddSite"
v-hasPermi="['emis:emisQuoteSendArea:edit']"
>追加网点</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:emisQuoteSendArea:export']"
>导出</el-button>
</el-col> -->
</el-row>
<el-form style="text-align: right;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="区域名称" prop="areaName" style="margin-bottom:5px">
<el-input
v-model="queryParams.areaName"
placeholder="区域名称"
clearable
size="mini"
@input="handleQuery"
/>
</el-form-item>
</el-form>
<el-table
size="mini"
ref="areaTable1"
border
highlight-current-row
v-loading="loading"
:data="emisQuoteSendAreaList"
@selection-change="handleSelectionChange"
@row-click="handleSelectArea"
max-height="350px"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('报价区域名称')" align="center" prop="areaName" min-width="100" />
<el-table-column :label="$t('所属网点')" align="center" prop="useSite" min-width="100" />
<!-- <el-table-column :label="$t('使用站点代码')" align="center" prop="useSiteCode" min-width="100" /> -->
<!-- <el-table-column :label="$t('区域站点列表')" align="center" prop="areaSite" min-width="100" /> -->
<!-- <el-table-column :label="$t('费用类型')" align="center" prop="feeType" min-width="100" /> -->
<el-table-column :label="$t('费用类型')" align="center" prop="feeType" width="100" >
<template slot-scope="scope">
<dict-tag :options="dict.type.emis_fee_type" :value="scope.row.feeType"/>
</template>
</el-table-column>
<el-table-column :label="$t('区域类型')" align="center" prop="areaType" min-width="80" >
<template slot-scope="scope">
<span v-if="scope.row.areaType == -1">全部</span>
<span v-else>网点</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="10" :xs="10" >
<emisQuoteSendAreaForm :useSiteCode="useSiteCode" :feeType="feeType" :useSiteName="useSiteName" :areaObj="currentArea" :opType="formOpType" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisQuoteSendAreaForm>
</el-col>
</el-row>
</div>
</template>
<script>
import { listEmisQuoteSendArea, getEmisQuoteSendArea, delEmisQuoteSendArea, addEmisQuoteSendArea, updateEmisQuoteSendArea } from "@/api/emis/emisQuoteSendArea";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import emisQuoteSendAreaForm from '@/views/emis/emisQuoteSendArea/emisQuoteSendAreaForm';
export default {
name: "emisQuoteSendArea",
props:{
useSiteCode:{
type:String
},
useSiteName:{
type:String
},
feeType:{
type:String
}
},
components: { elDateSimplePicker,emisQuoteSendAreaForm },
dicts: ['emis_fee_type'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 寄件区域表格数据
emisQuoteSendAreaList: [],
formOpType:null,
currentId:null,
currentArea:null,
openForm: false,
titleForm: "",
// 弹出展示层
areaId:null,
// 更新网点时间范围
daterangeCreateTime: [],
// 更新网点时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 1000,
areaName: null,
useSite: null,
useSiteCode: this.useSiteCode,
areaSite: null,
feeType: this.feeType,
areaType: null,
sync: null,
status: null,
remark: null,
delFlag: null,
},
};
},
watch: {
useSiteCode(newVal){
this.getList();
},
feeType(newVal){
this.getList();
},
},
created() {
this.getList();
},
methods: {
/** 查询寄件区域列表 */
getList() {
this.loading = true;
listEmisQuoteSendArea(this.queryParams).then(response => {
this.emisQuoteSendAreaList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleSelectArea(row, event, column){
this.currentId=row.areaId;
this.currentArea = row;
this.ids=[row.areaId]
this.single=false;
this.multiple=false;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.areaId)
this.currentId=this.ids.slice(-1)*1;
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.currentId=null;
this.formOpType = 1;
},
handleSelect(){
this.$emit("on-changed",this.currentId);
},
handleAddSite(){
this.formOpType = 3;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.currentId= row.areaId;
this.formOpType = 2;
},
handleFormChanged(){
this.getList();
},
cancelForm(){
this.formOpType = 0;
},
/** 删除按钮操作 */
handleDelete(row) {
const areaIds = row.areaId || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisQuoteSendArea(areaIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 列索引函数 */
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>