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

743 lines
25 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="4" :xs="4">
<div class="head-container">
<el-row :gutter="10">
<el-col :span="15" :xs="15">
<el-input
size="small"
v-model="continentName"
placeholder=""
clearable
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</el-col>
<el-col :span="4" :xs="4">
<el-button
type="normal"
icon="el-icon-plus"
:disabled="false"
size="small"
@click="handleContinentAdd"
v-hasPermi="['emis:emisContinent:add']">
</el-button>
</el-col>
</el-row>
</div>
<div class="head-container">
<el-tree
ref="tree"
size="small"
class="filter-tree tree"
:data="continentIdsTree"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
>
<span slot-scope="{ node, data }"
@mouseenter="mouseenter(data)"
@mouseleave="mouseleave(data)"
style="width:100%">
<template>
<span style="font-size:14px">{{ data.label }}</span>
<span v-show="data.show && data.id > 0" style="margin-left: 10px;" >
<i @click="handleUpdateContinent(data)" class="el-icon-edit"></i>
<i @click="handleDeleteContinent(data)" class="el-icon-delete"></i>
</span>
</template>
</span>
</el-tree>
</div>
</el-col>
<el-col :span="20" :xs="20" style="border-left:1px solid rgb(248 249 251);">
<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="continentId">
<el-select
filterable
clearable
v-model="queryParams.continentId"
placeholder="所属区域"
@change="handleQuery">
<el-option v-for="item in continentIdsOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="国家名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="国家名称"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="" prop="nameEn">
<el-input
v-model="queryParams.nameEn"
placeholder="英文名称"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item> -->
<el-form-item label="国家编号" prop="code">
<el-input
v-model="queryParams.code"
placeholder="国家编号"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
<el-form-item label="二字码" prop="twoCode">
<el-input
v-model="queryParams.twoCode"
placeholder="二字码"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
</search-form>
<!-- size="mini" border-->
<xd-table
size="mini"
v-loading="loading" border
:data="emisCountryList"
:showSearch.sync="showSearch"
:total="total"
@queryTable="getList"
:queryParams="queryParams"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
v-if="tableHeight" :max-height="tableHeight + 'px'"
>
<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:emisCountry:add']"
>新增国家</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:emisCountry: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:emisCountry:export']"
>导出</el-button>
</el-col>
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="国家名称" align="left" prop="name" :sort-orders="['descending','ascending']" sortable="custom" min-width="150">
<template slot-scope="scope">
<div class="link-type" @click="handleUpdate(scope.row)">{{scope.row.name}}({{scope.row.nameEn}})</div>
</template>
</el-table-column>
<el-table-column label="国家编号" align="center" prop="code" :sort-orders="['descending','ascending']" sortable="custom" min-width="120" />
<!-- <el-table-column label="英文名称" align="center" prop="nameEn" min-width="100" /> -->
<!-- <el-table-column label="ISO代码" align="center" prop="code" :sort-orders="['descending','ascending']" sortable="custom" min-width="100" /> -->
<el-table-column label="二字码" align="center" prop="twoCode" width="80" />
<el-table-column label="三字码" align="center" prop="threeCode" min-width="80" />
<el-table-column label="所属区域" align="left" prop="continentId" width="120">
<template slot-scope="scope">
<span>{{convertToContinentName(scope.row.continentId)}}</span>
</template>
</el-table-column>
<el-table-column label="排序" align="center" prop="orderNum" width="100" :sort-orders="['descending','ascending']" sortable="custom" />
<!-- <el-table-column label="创建时间" align="center" prop="createTime" min-width="160" :sort-orders="['descending','ascending']" sortable="custom" /> -->
<el-table-column label="备注" align="center" prop="remark" width="80"/>
<el-table-column label="创建人" align="center" prop="createByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="创建网点" align="center" prop="createSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="170"/>
<el-table-column label="修改人" align="center" prop="updateByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="修改网点" align="center" prop="updateSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="修改时间" align="center" prop="updateTime" width="170"/>
<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:emisCountry:edit']"
>修改</el-button>
<!--
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['emis:emisCountry:remove']"
>删除</el-button> -->
</template>
</el-table-column>
</xd-table>
</el-col>
</el-row>
<!-- 添加或修改国家对话框 -->
<el-dialog :title="title" :visible.sync="open" width="45%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<el-row :gutter="0">
<el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
<el-col :span="24">
<el-form-item label="国家名称" prop="name">
<el-input v-model="form.name" placeholder="请输入国家名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="英文名称" prop="nameEn">
<el-input v-model="form.nameEn" placeholder="请输入英文名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="国家编码" prop="code">
<el-input v-model="form.code" placeholder="国家编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话区号" prop="telAreaCode">
<el-input v-model="form.telAreaCode" placeholder="电话区号" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="所属区域" prop="continentId">
<el-select v-model="form.continentId" placeholder="所属区域" style="width:100%" multiple clearable filterable>
<el-option
v-for="item in continentIdsOptions"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二字码" prop="twoCode">
<el-input v-model="form.twoCode" placeholder="请输入二字码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="三字码" prop="threeCode">
<el-input v-model="form.threeCode" placeholder="请输入三字码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="" />
</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-form>
</el-row>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-bottom: 10px;">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 添加或修改地球洲对话框 -->
<el-dialog :title="titleForm" :visible.sync="openForm" :destroy-on-close="true" width="500px" v-dialogDrag append-to-body>
<emisContinentForm :id="currentContinentId" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisContinentForm>
</el-dialog>
</div>
</template>
<script>
import { listEmisCountry, getEmisCountry, delEmisCountry, addEmisCountry, updateEmisCountry } from "@/api/emis/emisCountry";
import { listEmisContinent, getEmisContinent, delEmisContinent, addEmisContinent, updateEmisContinent } from "@/api/emis/emisContinent";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import emisContinentForm from '@/views/emis/emisContinent/emisContinentForm';
export default {
name: "emisCountry",
components: { elDateSimplePicker,emisContinentForm},
dicts: [
],
data() {
return {
tableHeight: 200,
activeTab: "userinfo",
continentName:"",
continentIdsTree:[],
continentIdsOptions:[],
currentContinentId:null,
continentMap:new Map(),
defaultProps: {
children: "children",
label: "label"
},
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 国家表格数据
emisCountryList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
openForm: false,
titleForm: "",
titleEmisCountry: "",
openEmisCountry: false,
// 显示编辑框更多
moreInputVisible: false,
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 删除标志(0代表存在时间范围
daterangeCreateTime: [],
// 删除标志(0代表存在时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
name: null,
nameEn: null,
code: null,
continentId:null,
telAreaCode:null,
twoCode: null,
threeCode: null,
remark: null,
delFlag: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "国家名称不能为空", trigger: "blur" }
],
nameEn: [
{ required: true, message: "英文名称不能为空", trigger: "blur" }
],
continentId: [
{ required: true, message: "区域不能为空", trigger: ["blur",'change'] }
],
code: [
{ required: true, message: "国家编码不能为空", trigger: "blur" },
{ validator: this.validateCountryCode, trigger: "blur" }
],
}
};
},
created() {
this.getContinentList();
// 调整表格的高度,不允许滚动
this.$nextTick(function() {
let queryFormEl = this.$refs.queryForm.$el;
let tableH = queryFormEl.offsetHeight+190;
this.tableHeight = window.innerHeight - tableH;
});
},
watch: {
// 根据名称筛选部门树
continentName(val) {
this.$refs.tree.filter(val);
}
},
methods: {
/** 查询国家列表 */
getList() {
this.loading = true;
if(this.queryParams.orderByColumn==null){
this.queryParams.orderByColumn = 'createTime';//查询字段是表格中字段名字
this.queryParams.isAsc = 'descending';//动态取值排序顺序
}
this.queryParams.params = {};
listEmisCountry(this.queryParams).then(response => {
this.emisCountryList = response.rows;
this.total = response.total;
this.loading = false;
});
},
validateCountryCode (rule, value, callback) {
if (!value) {
callback(new Error("请输入国家编码"));
} else if (value.length > 10) {
callback(new Error("长度为1-10"));
} else {
if (this.form.id) {
// 修改时检查账号是否重复
listEmisCountry({ code: value})
.then((res) => {
if (res.rows.length==0) {
callback();
} else {
if(res.rows[0].id != this.form.id ){
callback(new Error("国家编号重复"));
}else{
callback();
}
}
})
.catch((error) => {
callback(new Error("验证失败,请重试"));
});
} else {
// 新增时检查账号是否重复
listEmisCountry({ code: value })
.then((res) => {
if (res.rows.length==0) {
callback();
} else {
callback(new Error("国家编号重复"));
}
})
.catch((error) => {
callback(new Error("验证失败,请重试"));
});
}
}
},
getContinentList() {
this.loading = true;
this.queryParams.params = {};
this.continentIdsOptions =[];
var qParam = {};
listEmisContinent(qParam).then(response => {
this.loading = false;
this.continentIdsTree = [];
this.continentIdsOptions = [];
var continentTree={"id":"","label":"所属区域","children":[]};
var lastContinentId = -1;
response.rows.forEach(item =>{
var optItem={value:item.id,label:item.name};
this.continentIdsOptions.push(optItem)
this.continentMap[item.id]=item.name;
var treeItem={"id":item.id,"label":item.name,"show":false};
continentTree.children.push(treeItem);
lastContinentId = item.id;
});
this.continentIdsTree.push(continentTree);
this.getList();
});
},
convertToContinentName(continentId){
let str='';
if( continentId!=null && continentId!=''){
continentId.split(',').forEach((item, index) => {
str = str+this.continentMap[item]+',';
})
}
str=str.substring(0,str.length-1)
return str;
},
/** 新增按钮操作 */
handleContinentAdd(row) {
this.reset();
this.openForm = true;
this.titleForm = "新增区域";
},
handleUpdateContinent(row){
this.currentContinentId = row.id || this.ids;
this.openForm = true;
this.titleForm = "修改";
},
handleDeleteContinent(row){
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisContinent(ids);
}).then(() => {
this.getContinentList()
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 提交按钮 */
submitContinentForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateEmisContinent(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.openForm = false;
this.getContinentList();
});
} else {
addEmisContinent(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.openForm = false;
this.getContinentList();
});
}
}
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.continentId = data.id;
this.handleQuery();
},
mouseenter(data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
//cancelContinent() {
// this.openContinent = false;
//},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
nameEn: null,
code: null,
continentId: null,
orderNum:0,
twoCode: null,
telAreaCode:null,
threeCode: 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
},
handleSortChange(column) {
this.queryParams.orderByColumn = column.prop;//查询字段是表格中字段名字
this.queryParams.isAsc = column.order;//动态取值排序顺序
this.getList();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.open = true;
this.title = "新增";
},
handleShowMoreInput(){
this.moreInputVisible = !this.moreInputVisible;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getEmisCountry(id).then(response => {
this.form = response.data;
if( this.form.continentId!=null && this.form.continentId!=''){
this.form.continentId = this.form.continentId.split(',');
this.form.continentId.forEach((item, index) => {
this.form.continentId[index] = Number(item)
})
}else{
this.form.continentId = null;
}
this.open = true;
this.title = "修改";
});
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/emis/emisCountry/viewDetail', query: { id: row.id }})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if(this.form.continentId != null && this.form.continentId.length > 0){
this.form.continentId = this.form.continentId.join(",")
}
if (this.form.id != null) {
updateEmisCountry(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addEmisCountry(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleFormChanged(){
this.openForm = false;
this.getContinentList();
},
cancelForm(){
this.openForm = false;
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisCountry(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisCountry/export', {
// ...this.queryParams
// }, `emisCountry_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listEmisCountry(qParam).then(response => {
this.downloadLoading = false
if (response.code === 200) {
const curList = response.rows
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['国家名称','国家编号','国家英文名','二字码','三字码','备注'];
const filterVal = ['name','telAreaCode','nameEn','twoCode','threeCode','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>