emis-frontend/src/views/system/sysTenantDomainApply/index.vue
2023-11-27 16:29:42 +08:00

543 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">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="" prop="tenantId">
<el-select v-model="queryParams.tenantId" placeholder="选择租户" clearable filterable >
<el-option
v-for="item in tenantIdsOptions"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="domainId">
<el-select v-model="queryParams.domainId" placeholder="选择应用域" clearable filterable>
<el-option
v-for="item in domainIdsOptions"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="" prop="validDate">
<el-date-picker clearable
v-model="queryParams.validDate"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="生效时间">
</el-date-picker>
</el-form-item>
<el-form-item label="过期时间" prop="expireDate">
<el-date-picker clearable
v-model="queryParams.expireDate"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="过期时间">
</el-date-picker>
</el-form-item> -->
<el-form-item label="" prop="applyStatus">
<el-select v-model="queryParams.applyStatus" placeholder="申请状态" clearable>
<el-option
v-for="dict in dict.type.biz_apply_status"
: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="['system:sysTenantDomainApply: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="['system:sysTenantDomainApply: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="['system:sysTenantDomainApply: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="['system:sysTenantDomainApply:export']"
>导出</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="sysTenantDomainApplyList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="#" align="center" width="40">
<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="left" prop="tenantName" min-width="150" />
<el-table-column label="订购应用域" align="left" prop="domainName" min-width="150" />
<el-table-column label="生效时间" align="center" prop="validDate" min-width="170" />
<el-table-column label="失效时间" align="center" prop="expireDate" min-width="170" />
<el-table-column label="申请状态" align="center" prop="applyStatus" min-width="100" >
<template slot-scope="scope">
<dict-tag :options="dict.type.biz_apply_status" :value="scope.row.applyStatus"/>
</template>
</el-table-column>
<!-- <el-table-column label="审核时间" align="center" prop="auditTime" min-width="100" /> -->
<!-- <el-table-column label="帐号状态" align="center" prop="status" min-width="100" >
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column> -->
<el-table-column label="订购时间" align="center" prop="createTime" min-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="['system:sysTenantDomainApply:edit']"
>修改</el-button>
<!--
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:sysTenantDomainApply: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="500px" :close-on-click-modal="false" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" >
<el-form-item label="租户ID" prop="tenantId">
<el-select v-model="form.tenantId" placeholder="租户ID" clearable filterable >
<el-option
v-for="item in tenantIdsOptions"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="应用域" prop="domainId">
<el-select v-model="form.domainId" placeholder="所属域" clearable filterable>
<el-option
v-for="item in domainIdsOptions"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="生效时间" prop="validDate">
<el-date-picker clearable
v-model="form.validDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择生效时间">
</el-date-picker>
</el-form-item>
<el-form-item label="过期时间" prop="expireDate">
<el-date-picker clearable
v-model="form.expireDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择过期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<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="titleView" :visible.sync="openView" width="60%" :close-on-click-modal="false" append-to-body>
<SysTenantDomainApplyDetail :id="id" ></SysTenantDomainApplyDetail>
</el-dialog>
</div>
</template>
<script>
import { listSysTenantDomainApply, getSysTenantDomainApply, delSysTenantDomainApply, addSysTenantDomainApply, updateSysTenantDomainApply } from "@/api/system/sysTenantDomainApply";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import SysTenantDomainApplyDetail from '@/views/system/sysTenantDomainApply/view';
import { listSysDomain } from "@/api/system/domain";
import { listSysTenant } from "@/api/system/tenant";
export default {
name: "sysTenantDomainApply",
components: { elDateSimplePicker,SysTenantDomainApplyDetail },
dicts: [
'biz_apply_status',
'sys_normal_disable',
'sys_delflag',
],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 搜索下拉
// itemOptions:[],
// 下拉枚举
// xxStatusOtions: [
// {value: '0', label: 'xx1'},
// {value: '10', label: 'xxx'},
// ],
// 总条数
total: 0,
// 租户应用域申请表表格数据
sysTenantDomainApplyList: [],
domainIdsOptions:[],
tenantIdsOptions:[],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 备注时间范围
daterangeValidDate: [],
// 备注时间范围
daterangeExpireDate: [],
// 备注时间范围
daterangeAuditTime: [],
// 备注时间范围
daterangeCreateTime: [],
// 备注时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
id: null,
tenantId: null,
tenantName: null,
domainId: null,
domainName: null,
validDate: null,
expireDate: null,
applyStatus: null,
auditTime: null,
status: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
},
// 表单参数
form: {},
// 表单校验
rules: {
tenantId: [
{ required: true, message: "租户ID不能为空", trigger: "blur" }
],
domainId: [
{ required: true, message: "域ID不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
this.initDomainList();
this.initTenantList();
},
methods: {
/** 查询租户应用域申请表列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeValidDate && '' != this.daterangeValidDate) {
this.queryParams.params["beginValidDate"] = this.daterangeValidDate[0];
this.queryParams.params["endValidDate"] = this.daterangeValidDate[1];
}
if (null != this.daterangeExpireDate && '' != this.daterangeExpireDate) {
this.queryParams.params["beginExpireDate"] = this.daterangeExpireDate[0];
this.queryParams.params["endExpireDate"] = this.daterangeExpireDate[1];
}
if (null != this.daterangeAuditTime && '' != this.daterangeAuditTime) {
this.queryParams.params["beginAuditTime"] = this.daterangeAuditTime[0];
this.queryParams.params["endAuditTime"] = this.daterangeAuditTime[1];
}
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];
}
listSysTenantDomainApply(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
this.sysTenantDomainApplyList = response.rows;
this.total = response.total;
this.loading = false;
});
},
initDomainList() {
let q={};
listSysDomain(q).then(response => {
response.rows.forEach(item =>{
var optItem={value:item.id,label:item.name};
this.domainIdsOptions.push(optItem)
});
});
},
initTenantList() {
let q={};
listSysTenant(q).then(response => {
response.rows.forEach(item =>{
var optItem={value:item.tenantId,label:item.simpleName};
this.tenantIdsOptions.push(optItem)
});
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
tenantId: null,
tenantName: null,
domainId: null,
domainName: null,
validDate: null,
expireDate: null,
applyStatus: null,
auditTime: null,
status: 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
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSysTenantDomainApply(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改";
});
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/system/sysTenantDomainApply/viewDetail', query: { id: row.id }})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateSysTenantDomainApply(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
this.form.applyStatus="0";
addSysTenantDomainApply(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delSysTenantDomainApply(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// this.download('system/sysTenantDomainApply/export', {
// ...this.queryParams
// }, `sysTenantDomainApply_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listSysTenantDomainApply(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-初始 1-审核通过 2-审核拒绝','审核时间','帐号状态(0正常 1停用)','删除标志(0代表存在 2代表删除)','创建者','创建时间','更新者','更新时间','备注',];
const filterVal = ['id','tenantId','tenantName','domainId','domainName','validDate','expireDate','applyStatus','auditTime','status','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>