emis-frontend/src/views/emis/emisDestination/index.vue
2024-01-11 14:45:47 +08:00

717 lines
24 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">
<el-row :gutter="20" type='flex'>
<el-col :span="5" :xs="5">
<div class="head-container">
<el-row :gutter="10">
<el-col :span="15" :xs="15">
<el-input
v-model="countryName"
placeholder="国家名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</el-col>
</el-row>
</div>
<div class="head-container">
<el-tree
ref="tree"
class="filter-tree tree"
:data="countryTree"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
>
</el-tree>
</div>
</el-col>
<el-col :span="20" :xs="20">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="" prop="destName">
<el-input
v-model="queryParams.destName"
placeholder="目的地名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="destCode">
<el-input
v-model="queryParams.destCode"
placeholder="目的地编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="country">
<el-select v-model="queryParams.country" placeholder="国家" clearable>
<el-option
v-for="dict in countryIdsOptions"
:key="dict.label"
:label="dict.label"
:value="dict.label"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="siteCode">
<el-select v-model="queryParams.siteCode" placeholder="服务网点" clearable>
<!-- <el-option
v-for="dict in dict.type.emis_region_level_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/> -->
</el-select>
</el-form-item>
<el-form-item label="" prop="isHinterland">
<el-select v-model="queryParams.isHinterland" placeholder="是否偏远地区" clearable>
<el-option
v-for="dict in dict.type.emis_is_hinterland"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="status">
<el-select v-model="queryParams.status" placeholder="是否启用" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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:emisDestination: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:emisDestination: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:emisDestination: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:emisDestination:export']"
>导出</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="emisDestinationList" @selection-change="handleSelectionChange">
<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="目的地编码" align="center" prop="destCode" min-width="100" /> -->
<!-- <el-table-column label="目的地名称" align="center" prop="destName" min-width="100" /> -->
<el-table-column label="目的地" align="left" prop="destName" min-width="180">
<template slot-scope="scope">
<div class="link-type" @click="handleView(scope.row)">{{scope.row.destName}}({{scope.row.destCode}})</div>
</template>
</el-table-column>
<!-- <el-table-column label="英文名称" align="center" prop="destNameEn" min-width="100" /> -->
<el-table-column label="所属国家" align="center" prop="country" min-width="100" />
<el-table-column label="服务网点编号" align="center" prop="siteCode" min-width="100" />
<el-table-column label="服务网点名称" align="center" prop="siteName" min-width="100" />
<el-table-column label="省市区" align="left" prop="province" min-width="180">
<template slot-scope="scope">
<div>{{scope.row.province}}/{{scope.row.city}}/{{scope.row.county}}/{{scope.row.town}}</div>
</template>
</el-table-column>
<!-- <el-table-column label="省" align="center" prop="province" min-width="100" /> -->
<!-- <el-table-column label="市" align="center" prop="city" min-width="100" /> -->
<!-- <el-table-column label="区" align="center" prop="county" min-width="100" /> -->
<!-- <el-table-column label="乡镇" align="center" prop="town" min-width="100" /> -->
<el-table-column label="是否偏远地区" align="center" prop="isHinterland" min-width="100" >
<template slot-scope="scope">
<dict-tag :options="dict.type.emis_is_hinterland" :value="scope.row.isHinterland"/>
</template>
</el-table-column>
<el-table-column label="启用状态" align="center" prop="status" min-width="100" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" min-width="100" />
<el-table-column label="操作" 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:emisDestination:edit']"
>修改</el-button>
<!--
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['emis:emisDestination:remove']"
>删除</el-button> -->
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page-sizes="[20,50,100,300,500,1000,2000,5000]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:page-size="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改目的地对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false" append-to-body>
<el-row :gutter="0">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-col :span="24">
<el-form-item label="目的地编码" prop="destCode">
<el-input v-model="form.destCode" placeholder="请输入目的地编码" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="目的地名称" prop="destName">
<el-input v-model="form.destName" placeholder="请输入目的地名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="英文名称" prop="destNameEn">
<el-input v-model="form.destNameEn" placeholder="请输入英文名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属国家" prop="country">
<el-select v-model="form.country" placeholder="所属国家" clearable filterable>
<el-option
v-for="item in countryIdsOptions"
v-bind:key="item.label"
v-bind:label="item.label"
v-bind:value="item.label"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="服务网点名称" prop="siteName">
<el-input v-model="form.siteName" placeholder="请输入服务网点名称" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="省" prop="province">
<el-input v-model="form.province" placeholder="请输入省" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="市" prop="city">
<el-input v-model="form.city" placeholder="请输入市" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区" prop="county">
<el-input v-model="form.county" placeholder="请输入区" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="乡镇" prop="town">
<el-input v-model="form.town" placeholder="请输入乡镇" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否偏远区" prop="isHinterland">
<el-radio-group v-model="form.isHinterland">
<el-radio
v-for="dict in dict.type.emis_is_hinterland"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" 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" append-to-body>
<emisDestinationForm :id="currentId" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisDestinationForm>
</el-dialog>
<el-dialog :title="titleView" :visible.sync="openView" width="60%" :close-on-click-modal="false" append-to-body>
<emisDestinationView :id="id" ></EmisDestinationView>
</el-dialog>
</el-col>
</el-row>
</div>
</template>
<script>
import { listEmisDestination, getEmisDestination, delEmisDestination, addEmisDestination, updateEmisDestination, changeDescStatus } from "@/api/emis/emisDestination";
import { listEmisCountry, getEmisCountry, delEmisCountry, addEmisCountry, updateEmisCountry } from "@/api/emis/emisCountry";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import emisDestinationView from '@/views/emis/emisDestination/emisDestinationView';
import emisDestinationForm from '@/views/emis/emisDestination/emisDestinationForm';
export default {
name: "emisDestination",
components: { elDateSimplePicker,emisDestinationView,emisDestinationForm },
dicts: [
'sys_normal_disable','emis_is_hinterland'
],
data() {
return {
// 遮罩层
loading: true,
currentId:null,
countryName:null,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 目的地表格数据
emisDestinationList: [],
countryTree:[],
countryIdsOptions:[],
// 弹出层标题
title: "",
defaultProps: {
children: "children",
label: "label"
},
// 是否显示弹出层
open: false,
openForm: false,
titleForm: "",
titleEmisDestination: "",
openEmisDestination: false,
// 显示编辑框更多
moreInputVisible: false,
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 备注时间范围
daterangeCreateTime: [],
// 备注时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
destCode: null,
destName: null,
status: null,
transLineCode: null,
siteCode: null,
province: null,
city: null,
county: null,
town: null,
remark: null,
countryId:null,
country:null,
},
// 表单参数
form: {},
// 表单校验
rules: {
destCode: [
{ required: true, message: "目的地编码不能为空", trigger: "blur" }
],
destName: [
{ required: true, message: "目的地名称不能为空", trigger: "blur" }
],
destNameEn: [
{ required: true, message: "英文名称不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "启用状态不能为空", trigger: "blur" }
],
country: [
{ required: true, message: "所属国家不能为空", trigger: "blur" }
],
transLineCode: [
{ required: true, message: "所属线路不能为空", trigger: "change" }
],
transLine: [
{ required: true, message: "所属线路名称不能为空", trigger: "change" }
],
siteCode: [
{ required: true, message: "服务网点编号不能为空", trigger: "change" }
],
siteName: [
{ required: true, message: "服务网点名称不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
this.getCountryList();
},
watch: {
// 根据名称筛选部门树
countryName(val) {
this.$refs.tree.filter(val);
}
},
methods: {
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.lineName + '"目的地吗?').then(function() {
//改变线路的启用状态
return changeDescStatus(row.id, row.status);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === "0" ? "1" : "0";
});
},
/** 查询目的地列表 */
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];
}
listEmisDestination(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
this.emisDestinationList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getCountryList() {
this.loading = true;
listEmisCountry(this.queryParams).then(response => {
this.loading = false;
this.countryTree = [];
this.countryIdsOptions = [];
var cTree={"id":"","label":"国家列表","children":[]};
cTree.children.push({"id":40,"label":"中国"});
this.countryIdsOptions.push({"value":40,"label":"中国"})
//var lastContinentId = -1;
response.rows.forEach(item =>{
if(item.id != 40){
var optItem={value:item.id,label:item.name};
this.countryIdsOptions.push(optItem)
var treeItem={"id":item.id,"label":item.name};
cTree.children.push(treeItem);
}
//lastContinentId = item.id;
});
this.queryParams.countryId = this.currentCountryId;
this.countryTree.push(cTree);
//this.getAreaList();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.country = data.label;
this.handleQuery();
},
// 表单重置
reset() {
this.form = {
id: null,
destCode: null,
destName: null,
destNameEn: null,
status: null,
country: null,
transLineCode: null,
transLine: null,
siteCode: null,
siteName: null,
province: null,
city: null,
county: null,
town: null,
remark: null,
tenantId: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: 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
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.open = true;
this.title = "新增";
// 子组件打开模式
// if(row != undefined){
// this.currentParentId = row.id
// }
// this.openEmisDestination = true;
// this.titleEmisDestination = "新增";
},
handleShowMoreInput(){
this.moreInputVisible = !this.moreInputVisible;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getEmisDestination(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改";
});
// 子组件打开模式
// this.currentId= row.id || this.ids;
// this.openEmisDestination = true;
// this.titleEmisDestination = "修改";
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/emis/emisDestination/viewDetail', query: { id: row.id }})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateEmisDestination(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addEmisDestination(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 delEmisDestination(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisDestination/export', {
// ...this.queryParams
// }, `emisDestination_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listEmisDestination(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','删除标志(0代表存在','创建者','创建时间','更新者','更新时间',];
const filterVal = ['id','destCode','destName','destNameEn','status','country','transLineCode','transLine','siteCode','siteName','province','city','county','town','remark','tenantId','delFlag','createBy','createTime','updateBy','updateTime',];
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>