iailab-plat-ui-vue2.git

houzhongjian

2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2

提交 \| 用户 \| 时间
759b1c	1	<template>
H	2	<div class="app-container">
	3	<!-- 搜索工作栏 -->
	4	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	5	<el-form-item label="配置名" prop="name">
	6	<el-input v-model="queryParams.name" placeholder="请输入配置名" clearable @keyup.enter.native="handleQuery"/>
	7	</el-form-item>
	8	<el-form-item label="存储器" prop="storage">
	9	<el-select v-model="queryParams.storage" placeholder="请选择存储器" clearable>
	10	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_FILE_STORAGE)"
	11	:key="dict.value" :label="dict.label" :value="dict.value"/>
	12	</el-select>
	13	</el-form-item>
	14	<el-form-item label="创建时间" prop="createTime">
	15	<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
	16	range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
	17	</el-form-item>
	18	<el-form-item>
	19	<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
	20	<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
	21	</el-form-item>
	22	</el-form>
	23
	24	<!-- 操作工具栏 -->
	25	<el-row :gutter="10" class="mb8">
	26	<el-col :span="1.5">
	27	<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
	28	v-hasPermi="['infra:file-config:create']">新增</el-button>
	29	</el-col>
	30	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	31	</el-row>
	32
	33	<!-- 列表 -->
	34	<el-table v-loading="loading" :data="list">
	35	<el-table-column label="编号" align="center" prop="id" />
	36	<el-table-column label="配置名" align="center" prop="name" />
	37	<el-table-column label="存储器" align="center" prop="storage">
	38	<template v-slot="scope">
	39	<dict-tag :type="DICT_TYPE.INFRA_FILE_STORAGE" :value="scope.row.storage" />
	40	</template>
	41	</el-table-column>
	42	<el-table-column label="备注" align="center" prop="remark" />
	43	<el-table-column label="主配置" align="center" prop="primary">
	44	<template v-slot="scope">
	45	<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
	46	</template>
	47	</el-table-column>
	48	<el-table-column label="创建时间" align="center" prop="createTime" width="180">
	49	<template v-slot="scope">
	50	<span>{{ parseTime(scope.row.createTime) }}</span>
	51	</template>
	52	</el-table-column>
	53	<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
	54	<template v-slot="scope">
	55	<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
	56	v-hasPermi="['infra:file-config:update']">修改</el-button>
	57	<el-button size="mini" type="text" icon="el-icon-attract" @click="handleMaster(scope.row)"
	58	:disabled="scope.row.master" v-hasPermi="['infra:file-config:update']">主配置</el-button>
	59	<el-button size="mini" type="text" icon="el-icon-share" @click="handleTest(scope.row)">测试</el-button>
	60	<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
	61	v-hasPermi="['infra:file-config:delete']">删除</el-button>
	62	</template>
	63	</el-table-column>
	64	</el-table>
	65	<!-- 分页组件 -->
	66	<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
	67	@pagination="getList"/>
	68
	69	<!-- 对话框(添加 / 修改) -->
	70	<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
	71	<el-form ref="form" :model="form" :rules="rules" label-width="120px">
	72	<el-form-item label="配置名" prop="name">
	73	<el-input v-model="form.name" placeholder="请输入配置名" />
	74	</el-form-item>
	75	<el-form-item label="备注" prop="remark">
	76	<el-input v-model="form.remark" placeholder="请输入备注" />
	77	</el-form-item>
	78	<el-form-item label="存储器" prop="storage">
	79	<el-select v-model="form.storage" placeholder="请选择存储器" :disabled="form.id !== undefined">
	80	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_FILE_STORAGE)"
	81	:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
	82	</el-select>
	83	</el-form-item>
	84	<!-- DB -->
	85	<!-- Local / FTP / SFTP -->
	86	<el-form-item v-if="form.storage >= 10 && form.storage <= 12" label="基础路径" prop="config.basePath">
	87	<el-input v-model="form.config.basePath" placeholder="请输入基础路径" />
	88	</el-form-item>
	89	<el-form-item v-if="form.storage >= 11 && form.storage <= 12" label="主机地址" prop="config.host">
	90	<el-input v-model="form.config.host" placeholder="请输入主机地址" />
	91	</el-form-item>
	92	<el-form-item v-if="form.storage >= 11 && form.storage <= 12" label="主机端口" prop="config.port">
	93	<el-input-number :min="0" v-model="form.config.port" placeholder="请输入主机端口" />
	94	</el-form-item>
	95	<el-form-item v-if="form.storage >= 11 && form.storage <= 12" label="用户名" prop="config.username">
	96	<el-input v-model="form.config.username" placeholder="请输入密码" />
	97	</el-form-item>
	98	<el-form-item v-if="form.storage >= 11 && form.storage <= 12" label="密码" prop="config.password">
	99	<el-input v-model="form.config.password" placeholder="请输入密码" />
	100	</el-form-item>
	101	<el-form-item v-if="form.storage === 11" label="连接模式" prop="config.mode">
	102	<el-radio-group v-model="form.config.mode">
	103	<el-radio key="Active" label="Active">主动模式</el-radio>
	104	<el-radio key="Passive" label="Passive">被动模式</el-radio>
	105	</el-radio-group>
	106	</el-form-item>
	107	<!-- S3 -->
	108	<el-form-item v-if="form.storage === 20" label="节点地址" prop="config.endpoint">
	109	<el-input v-model="form.config.endpoint" placeholder="请输入节点地址" />
	110	</el-form-item>
	111	<el-form-item v-if="form.storage === 20" label="存储 bucket" prop="config.bucket">
	112	<el-input v-model="form.config.bucket" placeholder="请输入 bucket" />
	113	</el-form-item>
	114	<el-form-item v-if="form.storage === 20" label="accessKey" prop="config.accessKey">
	115	<el-input v-model="form.config.accessKey" placeholder="请输入 accessKey" />
	116	</el-form-item>
	117	<el-form-item v-if="form.storage === 20" label="accessSecret" prop="config.accessSecret">
	118	<el-input v-model="form.config.accessSecret" placeholder="请输入 accessSecret" />
	119	</el-form-item>
	120	<!-- 通用 -->
	121	<el-form-item v-if="form.storage === 20" label="自定义域名"> <!-- 无需参数校验，所以去掉 prop -->
	122	<el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
	123	</el-form-item>
	124	<el-form-item v-else-if="form.storage" label="自定义域名" prop="config.domain">
	125	<el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
	126	</el-form-item>
	127	</el-form>
	128	<div slot="footer" class="dialog-footer">
	129	<el-button type="primary" @click="submitForm">确定</el-button>
	130	<el-button @click="cancel">取消</el-button>
	131	</div>
	132	</el-dialog>
	133	</div>
	134	</template>
	135
	136	<script>
	137	import {
	138	createFileConfig,
	139	updateFileConfig,
	140	deleteFileConfig,
	141	getFileConfig,
	142	getFileConfigPage,
	143	testFileConfig, updateFileConfigMaster
	144	} from "@/api/infra/fileConfig";
	145
	146	export default {
	147	name: "InfraFileConfig",
	148	components: {
	149	},
	150	data() {
	151	return {
	152	// 遮罩层
	153	loading: true,
	154	// 显示搜索条件
	155	showSearch: true,
	156	// 总条数
	157	total: 0,
	158	// 文件配置列表
	159	list: [],
	160	// 弹出层标题
	161	title: "",
	162	// 是否显示弹出层
	163	open: false,
	164	// 查询参数
	165	queryParams: {
	166	pageNo: 1,
	167	pageSize: 10,
	168	name: null,
	169	storage: null,
	170	createTime: []
	171	},
	172	// 表单参数
	173	form: {
	174	storage: undefined,
	175	config: {}
	176	},
	177	// 表单校验
	178	rules: {
	179	name: [{ required: true, message: "配置名不能为空", trigger: "blur" }],
	180	storage: [{ required: true, message: "存储器不能为空", trigger: "change" }],
	181	config: {
	182	basePath: [{ required: true, message: "基础路径不能为空", trigger: "blur" }],
	183	host: [{ required: true, message: "主机地址不能为空", trigger: "blur" }],
	184	port: [{ required: true, message: "主机端口不能为空", trigger: "blur" }],
	185	username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
	186	password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
	187	mode: [{ required: true, message: "连接模式不能为空", trigger: "change" }],
	188	endpoint: [{ required: true, message: "节点地址不能为空", trigger: "blur" }],
	189	bucket: [{ required: true, message: "存储 bucket 不能为空", trigger: "blur" }],
	190	accessKey: [{ required: true, message: "accessKey 不能为空", trigger: "blur" }],
	191	accessSecret: [{ required: true, message: "accessSecret 不能为空", trigger: "blur" }],
	192	domain: [{ required: true, message: "自定义域名不能为空", trigger: "blur" }],
	193	},
	194	}
	195	};
	196	},
	197	created() {
	198	this.getList();
	199	},
	200	methods: {
	201	/** 查询列表 */
	202	getList() {
	203	this.loading = true;
	204	// 执行查询
	205	getFileConfigPage(this.queryParams).then(response => {
	206	this.list = response.data.list;
	207	this.total = response.data.total;
	208	this.loading = false;
	209	});
	210	},
	211	/** 取消按钮 */
	212	cancel() {
	213	this.open = false;
	214	this.reset();
	215	},
	216	/** 表单重置 */
	217	reset() {
	218	this.form = {
	219	id: undefined,
	220	name: undefined,
	221	storage: undefined,
	222	remark: undefined,
	223	config: {},
	224	};
	225	this.resetForm("form");
	226	},
	227	/** 搜索按钮操作 */
	228	handleQuery() {
	229	this.queryParams.pageNo = 1;
	230	this.getList();
	231	},
	232	/** 重置按钮操作 */
	233	resetQuery() {
	234	this.resetForm("queryForm");
	235	this.handleQuery();
	236	},
	237	/** 新增按钮操作 */
	238	handleAdd() {
	239	this.reset();
	240	this.open = true;
	241	this.title = "添加文件配置";
	242	},
	243	/** 修改按钮操作 */
	244	handleUpdate(row) {
	245	this.reset();
	246	const id = row.id;
	247	getFileConfig(id).then(response => {
	248	this.form = response.data;
	249	this.open = true;
	250	this.title = "修改文件配置";
	251	});
	252	},
	253	/** 提交按钮 */
	254	submitForm() {
	255	this.$refs["form"].validate(valid => {
	256	if (!valid) {
	257	return;
	258	}
	259	// 修改的提交
	260	if (this.form.id != null) {
	261	updateFileConfig(this.form).then(response => {
	262	this.$modal.msgSuccess("修改成功");
	263	this.open = false;
	264	this.getList();
	265	});
	266	return;
	267	}
	268	// 添加的提交
	269	createFileConfig(this.form).then(response => {
	270	this.$modal.msgSuccess("新增成功");
	271	this.open = false;
	272	this.getList();
	273	});
	274	});
	275	},
	276	/** 删除按钮操作 */
	277	handleDelete(row) {
	278	const id = row.id;
	279	this.$modal.confirm('是否确认删除文件配置编号为"' + id + '"的数据项?').then(function() {
	280	return deleteFileConfig(id);
	281	}).then(() => {
	282	this.getList();
	283	this.$modal.msgSuccess("删除成功");
	284	}).catch(() => {});
	285	},
	286	/** 主配置按钮操作 */
	287	handleMaster(row) {
	288	const id = row.id;
	289	this.$modal.confirm('是否确认修改配置编号为"' + id + '"的数据项为主配置?').then(function() {
	290	return updateFileConfigMaster(id);
	291	}).then(() => {
	292	this.getList();
	293	this.$modal.msgSuccess("修改成功");
	294	}).catch(() => {});
	295	},
	296	/** 测试按钮操作 */
	297	handleTest(row) {
	298	testFileConfig(row.id).then((response) => {
	299	this.$modal.alert("测试通过，上传文件成功！访问地址：" + response.data);
	300	}).catch(() => {});
	301	},
	302	}
	303	};
	304	</script>