针灸质控中心平台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

417 lines
9.5 KiB

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="80px"
>
<el-form-item label="数据源key" prop="dataSourceKey">
<el-input
v-model="queryParams.param.dataSourceKey"
placeholder="请输入"
clearable
@keyup.enter.native="handleQuery"
/>
</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"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="listData"
@selection-change="handleSelectionChange"
max-height="600"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
fixed
label="类型"
align="center"
prop="name"
min-width="100"
>
<template slot-scope="scope">
<span v-if="scope.row.type == 0">MySQL</span>
<span v-if="scope.row.type == 1">Oracle</span>
</template>
</el-table-column>
<el-table-column
fixed
label="连接信息"
align="center"
prop="url"
show-overflow-tooltip
min-width="100"
>
</el-table-column>
<el-table-column
fixed
label="数据源kye"
align="center"
prop="dataSourceKey"
show-overflow-tooltip
min-width="80"
/>
<el-table-column label="创建人/创建时间" align="center" min-width="140">
<template slot-scope="scope">
<div>{{ scope.row.createBy }}</div>
<span>
{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}
</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
class-name="small-padding fixed-width"
width="200"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改公告对话框 -->
<el-dialog
class="popup"
:title="title"
:visible.sync="open"
width="780px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="140px"
class="formStep"
>
<el-form-item label="类型" prop="type">
<el-radio-group v-model="form.type">
<el-radio label="0">MySQL</el-radio>
<el-radio label="1">Oracle</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="连接信息" prop="url">
<el-input v-model="form.url" placeholder="请输入" />
</el-form-item>
<el-form-item label="数据源key" prop="dataSourceKey">
<el-input v-model="form.dataSourceKey" placeholder="请输入" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" 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>
</div>
</template>
<script>
import {
dataSourcesList,
dataSourcesAdd,
dataSourcesUpd,
dataSourcesDel,
} from "@/api/member";
export default {
name: "Notice",
dicts: ["sys_normal_disable", "sys_user_sex"],
data() {
return {
dataSourceList: [],
queryParams: {
pageNum: 1,
pageSize: 10,
param: {
name: "",
},
},
listData: [],
title: "",
open: false,
total: 0,
form: {},
loading: false,
showSearch: true,
multiple: false,
// 表单校验
rules: {
type: [
{
required: true,
message: "类型不能为空",
trigger: "blur",
},
],
url: [
{
required: true,
message: "连接信息不能为空",
trigger: "blur",
},
],
dataSourceKey: [
{
required: true,
message: "数据源key不能为空",
trigger: "blur",
},
],
username: [
{
required: true,
message: "用户名不能为空",
trigger: "blur",
},
],
password: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
],
},
};
},
created() {
this.getList();
},
methods: {
/** 查询公告列表 */
getList() {
this.loading = true;
dataSourcesList(this.queryParams).then((res) => {
this.listData = res.data.list;
this.total = res.data.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
name: "",
leader: "",
contactPhone: "",
dataSourceId: "",
status: "",
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.param = {
name: "",
};
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.open = true;
this.title = "修改数据源";
this.form = JSON.parse(JSON.stringify(row));
},
/** 诊疗档案 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
dataSourcesUpd(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
dataSourcesAdd(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const idList = row.id ? [row.id] : this.ids;
this.$modal
.confirm("是否确认删除当前选择的数据?")
.then(function () {
return dataSourcesDel({
idList: idList,
});
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
.div-title1 {
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
}
.div-title2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.div-title3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.span-but {
display: inline-block;
border-radius: 4px;
border: 1px solid #dcdfe6;
line-height: 32px;
padding: 0 15px;
margin: 5px;
}
.span-but-active {
border: 1px solid #1890ff;
}
.human-body {
display: flex;
flex-wrap: wrap;
}
.human-body >>> .el-form-item {
width: 49%;
margin-right: 2%;
}
.human-body >>> .el-form-item:nth-of-type(2n) {
margin-right: 0;
}
.formStep1 >>> .el-form-item__label {
}
.form-item-zd {
width: 100%;
text-align: left;
}
.form-item-age {
display: flex;
align-items: center;
}
.form-item-age span {
margin: 0 10px;
}
.form-item-age >>> .el-input {
width: 100px;
}
>>> .el-drawer.rtl {
width: 50% !important;
}
</style>