指数管理 静态页面完成

src/views/assess/totalIndex/component/addItem.vue

@@ -9,7 +9,7 @@
 						</el-form-item>
 					<!-- </el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> -->
-						<el-form-item label="描述" required>
+						<el-form-item label="描述">
 							<el-input width="400"  size="small" v-model="ruleForm.describe" type="textarea" placeholder="请输入描述" maxlength="150"></el-input>
 						</el-form-item>
 					<!-- </el-col> -->
@@ -19,19 +19,19 @@
 				<el-icon>
 					<ele-FolderAdd />
 				</el-icon>
-				新建
+				增加
 			</el-button>
 			<el-table border stripe :data="tableData.data" style="width: 100%">
-				<el-table-column type="index" label="序号" width="66" />
-				<el-table-column prop="userName" label="标识" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="dataType" label="数据项" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="num" label="权重(%)" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="description" label="取值范围" show-overflow-tooltip width="200" >
+				<el-table-column align="center" type="index" label="序号" width="58" />
+				<el-table-column align="center" prop="userName" label="标识" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="dataType" label="数据项" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="num" label="权重(%)" width="90" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="description" label="取值范围" show-overflow-tooltip width="200" >
 					<template #default="scope">
 						<el-tag size="small" class="mr6" v-for="(item, index) in scope.row.range.split(', ')" :key="index">{{item}}</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="153">
+				<el-table-column align="center" label="操作" width="160">
 					<template #default="scope">
 						<el-button size="small" type="text" @click="onOpenEditSign(scope.row)">编辑</el-button>
 						<el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
@@ -56,7 +56,7 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
 				</span>
 			</template>
 		</el-dialog>

src/views/assess/totalIndex/component/addSign.vue

@@ -23,7 +23,11 @@
 			</el-form>
 			<!-- 添加取值范围 -->
 			<div class="add-value-range">
-				<p>添加取值范围</p>
+				<div class="header">
+					<p>添加取值范围</p>
+					<el-button @click="addRange" size="small" plain type="primary">添加</el-button>
+
+				</div>
 				<div class="add-value-range-wrap">
 					<section class="add-value-range-item" v-for="(item, index) in ruleForm.list" :key="index">
 						<div class="left-wrap">
@@ -38,7 +42,7 @@
 							<span class="label">得分</span>
 							<el-input size="small" v-model="item.score" placeholder="请输入得分" clearable></el-input>
 						</div>
-						 <el-button :disabled="index!==ruleForm.list.length-1" @click="addRange(item)" size="default" plain type="primary">添加</el-button>
+						<el-button @click="deleteRange(index)" size="small" type="danger">删除</el-button>
 
 					</section>
 				</div>
@@ -46,7 +50,7 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -162,7 +166,16 @@ export default defineComponent({
 				score: 90
 			}]
 		};
-		const addRange = (item: RangeData) => {
+		const addRange = () => {
+			if(!state.ruleForm.list.length) {
+				state.ruleForm.list.push({
+					minVal: '',
+					maxVal: '',
+					score: ''
+				})
+				return
+			}
+			let item = state.ruleForm.list[state.ruleForm.list.length-1]
 			const { minVal, maxVal, score } = item
 			if(!minVal || !maxVal || !score.toString()) {
 				ElMessage.error('请完善表单');
@@ -174,6 +187,20 @@ export default defineComponent({
 				score: ''
 			})
 		};
+		const deleteRange = (index: number) => {
+			console.log(index)
+			state.ruleForm.list.splice(index, 1)
+			// const { minVal, maxVal, score } = item
+			// if(!minVal || !maxVal || !score.toString()) {
+			// 	ElMessage.error('请完善表单');
+			// 	return 
+			// }
+			// state.ruleForm.list.push({
+			// 	minVal: '',
+			// 	maxVal: '',
+			// 	score: ''
+			// })
+		};
 		// 页面加载时
 		onMounted(() => {
 			initTableData();
@@ -182,6 +209,7 @@ export default defineComponent({
 			openDialog,
 			closeDialog,
 			addRange,
+			deleteRange,
 			onCancel,
 			onSubmit,
 			...toRefs(state),
@@ -204,6 +232,12 @@ export default defineComponent({
 .add-value-range {
 	// background-color: pink;
 	padding: 10px 0;
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 12px;
+	}
 	.add-value-range-wrap {
 		display: flex;
 		flex-direction: column;
@@ -236,4 +270,7 @@ export default defineComponent({
 		}
 	}
 }
+::v-deep  .el-dialog__body {
+	border-top: 1px var(--el-border-color) var(--el-border-style);
+}
 </style>

src/views/assess/totalIndex/component/editItem.vue

@@ -1,95 +1,77 @@
 <template>
-	<div class="system-edit-user-container">
-		<el-dialog title="修改用户" v-model="isShowDialog" width="769px">
+	<div class="system-add-user-container">
+		<el-dialog title="编辑指标" v-model="isShowDialog" width="769px">
 			<el-form :model="ruleForm" size="default" label-width="90px">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="账户名称">
-							<el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
+				<!-- <el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> -->
+						<el-form-item label="评价名称" required>
+							<el-input size="small" v-model="ruleForm.userName" placeholder="请输入评价名称" clearable></el-input>
 						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="用户昵称">
-							<el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
+					<!-- </el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> -->
+						<el-form-item label="描述">
+							<el-input width="400"  size="small" v-model="ruleForm.describe" type="textarea" placeholder="请输入描述" maxlength="150"></el-input>
 						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="关联角色">
-							<el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
-								<el-option label="超级管理员" value="admin"></el-option>
-								<el-option label="普通用户" value="common"></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="部门">
-							<el-cascader
-								:options="deptData"
-								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
-								placeholder="请选择部门"
-								clearable
-								class="w100"
-								v-model="ruleForm.department"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.deptName }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="手机号">
-							<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="邮箱">
-							<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="性别">
-							<el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
-								<el-option label="男" value="男"></el-option>
-								<el-option label="女" value="女"></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="账户密码">
-							<el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="账户过期">
-							<el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="用户状态">
-							<el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="用户描述">
-							<el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
+					<!-- </el-col> -->
+				<!-- </el-row> -->
 			</el-form>
+			<el-button size="default" type="primary" class="mb10 mt10" @click="onOpenAddSign">
+				<el-icon>
+					<ele-FolderAdd />
+				</el-icon>
+				增加
+			</el-button>
+			<el-table border stripe :data="tableData.data" style="width: 100%">
+				<el-table-column align="center" type="index" label="序号" width="58" />
+				<el-table-column align="center" prop="userName" label="标识" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="dataType" label="数据项" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="num" label="权重(%)" width="90" show-overflow-tooltip></el-table-column>
+				<el-table-column align="center" prop="description" label="取值范围" show-overflow-tooltip width="200" >
+					<template #default="scope">
+						<el-tag size="small" class="mr6" v-for="(item, index) in scope.row.range.split(', ')" :key="index">{{item}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column align="center" label="操作" width="160">
+					<template #default="scope">
+						<el-button size="small" type="text" @click="onOpenEditSign(scope.row)">编辑</el-button>
+						<el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
+						<el-button size="small" type="text" @click="onRowDetail(scope.row)">任务接口</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination
+				@size-change="onHandleSizeChange"
+				@current-change="onHandleCurrentChange"
+				class="mt15"
+				:pager-count="5"
+				:page-sizes="[10, 20, 30]"
+				v-model:current-page="tableData.param.pageNum"
+				background
+				v-model:page-size="tableData.param.pageSize"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="tableData.total"
+			>
+			</el-pagination>
+
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
 				</span>
 			</template>
 		</el-dialog>
+		<AddSign ref="addSignRef" />
+		<SetTask ref="setTaskRef" />
 	</div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { reactive, toRefs, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import AddSign from './addSign.vue';
+import SetTask from './setTask.vue';
+
+
 
 // 定义接口来定义对象的类型
 interface DeptData {
@@ -101,29 +83,52 @@ interface DeptData {
 	id: number;
 	children?: DeptData[];
 }
-interface RuleFormRow {
+// 定义接口来定义对象的类型
+interface TableDataRow {
 	userName: string;
-	userNickname: string;
-	roleSign: string;
-	department: any;
-	phone: string;
-	email: string;
-	sex: string;
-	password: string;
-	overdueTime: string;
-	status: boolean;
-	describe: string;
+	description: string;
+	dataType: string;
+	createTime: string;
+	num: string;
+	range: string;
 }
-interface UserState {
+// 定义整个dialog的数据类型
+interface ItemState {
 	isShowDialog: boolean;
-	ruleForm: RuleFormRow;
-	deptData: Array<DeptData>;
+	ruleForm: {
+		userName: string;
+		userNickname: string;
+		roleSign: string;
+		department: any;
+		phone: string;
+		email: string;
+		sex: string;
+		password: string;
+		overdueTime: string;
+		status: boolean;
+		describe: string;
+	};
+	tableData: {
+		data: Array<TableDataRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+		};
+	};
 }
 
+
+
+
 export default defineComponent({
-	name: 'systemEditUser',
+	name: 'systemAddUser',
+	components: { AddSign, SetTask},
 	setup() {
-		const state = reactive<UserState>({
+		const addSignRef = ref();
+		const setTaskRef = ref();
+		const state = reactive<ItemState>({
 			isShowDialog: false,
 			ruleForm: {
 				userName: '', // 账户名称
@@ -138,11 +143,20 @@ export default defineComponent({
 				status: true, // 用户状态
 				describe: '', // 用户描述
 			},
-			deptData: [], // 部门数据
+			// deptData: [], // 部门数据
+			// 标识列表数据
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			}
 		});
 		// 打开弹窗
-		const openDialog = (row: RuleFormRow) => {
-			state.ruleForm = row;
+		const openDialog = () => {
 			state.isShowDialog = true;
 		};
 		// 关闭弹窗
@@ -157,40 +171,71 @@ export default defineComponent({
 		const onSubmit = () => {
 			closeDialog();
 		};
+		// 打开新增用户弹窗
+		const onOpenAddSign = () => {
+			addSignRef.value.openDialog();
+		};
+				
+		// 打开编辑弹窗
+		const onOpenEditSign = (row: TableDataRow) => {
+			addSignRef.value.openDialog(row);
+		};
+		// 打开任务接口弹窗
+		const onRowDetail = (row: TableDataRow) => {
+			setTaskRef.value.openDialog(row);
+		};
+		// 删除标识项
+		const onRowDel = (row: TableDataRow) => {
+			ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					ElMessage.success('删除成功');
+				})
+				.catch(() => {});
+		};
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
 		// 初始化部门数据
 		const initTableData = () => {
-			state.deptData.push({
-				deptName: 'vueNextAdmin',
-				createTime: new Date().toLocaleString(),
-				status: true,
-				sort: Math.random(),
-				describe: '顶级部门',
-				id: Math.random(),
-				children: [
-					{
-						deptName: 'IT外包服务',
-						createTime: new Date().toLocaleString(),
-						status: true,
-						sort: Math.random(),
-						describe: '总部',
-						id: Math.random(),
-					},
-					{
-						deptName: '资本控股',
-						createTime: new Date().toLocaleString(),
-						status: true,
-						sort: Math.random(),
-						describe: '分部',
-						id: Math.random(),
-					},
-				],
-			});
+			const data: Array<TableDataRow> = [];
+			for (let i = 0; i < 6; i++) {
+				data.push({
+					userName: '这里是标识',
+					dataType: '设备评分',
+					description: '这里是描述这里是描述这里是描述这里是描述',
+					num: '88',
+					range: '10~20, 30~40',
+					createTime: new Date().toLocaleString(),
+
+				});
+			}
+			state.tableData.data = data;
+			state.tableData.total = data.length;
 		};
 		// 页面加载时
 		onMounted(() => {
 			initTableData();
 		});
 		return {
+			setTaskRef,
+			addSignRef,
+			onOpenAddSign,// 打开添加标识项弹窗
+			onOpenEditSign,// 打开编辑某一个标识项弹窗
+			onRowDel,// 删除某一个标识项
+			onRowDetail,// 打开数据源配置接口弹窗
+
+			onHandleSizeChange,// 标识项分页每页展示条数变化
+			onHandleCurrentChange,// 标识项分页页数变化变化
+
 			openDialog,
 			closeDialog,
 			onCancel,
@@ -200,3 +245,32 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+
+
+::v-deep .el-form {
+	// display: flex;
+	// justify-self: center;
+	// flex-direction: column;
+	// align-content: center;
+	.el-form-item {
+		width: 500px;
+		margin: 8px auto;
+	}
+	::v-deep .el-input__inner,
+	::v-deep .el-textarea__inner {
+		width: 400px;
+		// flex-grow: 0;
+	}
+	::v-deep .el-input__inner {
+		padding: 1px 10px;
+	}
+	::v-deep .el-input__wrapper {
+		flex-grow: 0;
+		padding: 0
+	}
+}
+
+
+</style>

src/views/assess/totalIndex/component/setTask.vue

@@ -1,33 +1,33 @@
 <template>
 	<div class="system-add-user-container">
 		<el-dialog title="数据源配置接口" v-model="isShowDialog" width="569px">
-			<el-form :model="ruleForm" size="default" label-width="90px">
+			<el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" size="default" label-width="90px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="指标名称">
+						<el-form-item label="指标名称:">
 							{{ruleForm.userName}}
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="URL" required>
+						<el-form-item label="URL:" prop="userName">
 							<el-input v-model="ruleForm.userName" placeholder="请输入URL" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="取值项" required>
+						<el-form-item label="取值项:" prop="dataType">
 							<el-input v-model="ruleForm.dataType" placeholder="请输入取值项" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="取值周期" required>
+						<el-form-item label="取值周期:" prop="num">
 							<el-input v-model="ruleForm.num" placeholder="请输入取值周期" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="是否启用">
+						<el-form-item label="是否启用:">
 							  <el-radio-group v-model="ruleForm.isUse" class="ml-4">
-								<el-radio size="small" label="1">启用</el-radio>
-								<el-radio size="small" label="2">禁用</el-radio>
+								<el-radio size="large" label="1">启用</el-radio>
+								<el-radio size="large" label="2">禁用</el-radio>
 							</el-radio-group>
 							 <el-button style="margin-left: 20px;" size="small" type="primary">检测</el-button>
 						</el-form-item>
@@ -40,7 +40,7 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+					<el-button type="primary" @click="onSubmit(ruleFormRef)" size="default">保 存</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -48,9 +48,12 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus';
 
+
+
 // 定义接口来定义对象的类型
 interface RuleFormRow {
 	userName: string;
@@ -77,6 +80,30 @@ export default defineComponent({
 				description: '', // 取值范围
 			},
 		});
+		const formSize = ref('default')
+		const ruleFormRef = ref<FormInstance>()
+		const rules = reactive<FormRules>({
+			userName: [
+				{ required: true, message: '请输入URL', trigger: 'blur' },
+			],
+			dataType: [
+				{ required: true, message: '请输入取值项', trigger: 'blur' },
+			],
+			num: [
+				{ required: true, message: '请输入取值周期', trigger: 'blur' },
+			]
+		})
+		const onSubmit = async (formEl: FormInstance | undefined) => {
+			if (!formEl) return
+			await formEl.validate((valid, fields) => {
+				console.log(valid)
+				if (valid) {
+				console.log('submit!')
+				} else {
+				console.log('error submit!', fields)
+				}
+			})
+		}
 		// 打开弹窗
 		const openDialog = (row: RuleFormRow) => {
 			state.ruleForm = row;
@@ -92,9 +119,9 @@ export default defineComponent({
 			closeDialog();
 		};
 		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
+		// const onSubmit = () => {
+		// 	closeDialog();
+		// };
 		// 初始化部门数据
 		const initTableData = () => {
 			
@@ -104,11 +131,14 @@ export default defineComponent({
 			initTableData();
 		});
 		return {
+			rules,
 			openDialog,
 			closeDialog,
 			onCancel,
 			onSubmit,
 			...toRefs(state),
+			formSize,
+			ruleFormRef
 		};
 	},
 });

src/views/assess/totalIndex/index.vue

@@ -195,3 +195,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+::v-deep  .el-dialog__body {
+	border-top: 1px var(--el-border-color) var(--el-border-style);
+}
+</style>