gtqtOut.git - Gitblit

对比新文件
			@@ -0,0 +1,208 @@
			<template>
			<div>
			<el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
			<el-row>
			<el-col :span="4">
			<el-form-item>
			<el-input v-model="ruleForm.name" placeholder="请选择被奖惩者">
			<template #append> <el-button :icon="Search" @click="openSearch" /> </template
			></el-input>
			</el-form-item>
			</el-col>
			<!-- <el-col :span="4">
			<el-form-item>
			<el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
			</el-form-item>
			</el-col> -->
			<el-col :span="4">
			<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
			</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			<div class="minCenter">
			<div class="btns">
			<div>
			<el-button type="primary" :icon="Plus" @click="openD">新建</el-button>
			<el-button type="warning" plain :icon="EditPen">修改</el-button>
			<el-button type="danger" :icon="Delete" plain>删除</el-button>
			</div>
			<div>
			<el-button :icon="Download"></el-button>
			<el-button :icon="Refresh"></el-button>
			</div>
			</div>
			<el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
			<el-table-column type="selection" align="center" width="55" />
			<el-table-column label="奖惩日期" align="center" sortable>
			<template #default="scope">{{ scope.row.date }}</template>
			</el-table-column>
			<el-table-column property="name" align="center" label="奖惩类型" sortable />
			<el-table-column property="name" align="center" label="被奖惩者" sortable />
			<el-table-column property="address" label="奖惩内容" align="center" sortable show-overflow-tooltip />
			<el-table-column property="address" label="奖惩依据" align="center" sortable show-overflow-tooltip />
			<!-- <el-table-column property="address" label="指标级别" align="center" sortable show-overflow-tooltip />
			<el-table-column property="address" label="完成期限" align="center" sortable show-overflow-tooltip />
			<el-table-column property="address" label="状态" align="center" sortable show-overflow-tooltip /> -->
			<el-table-column label="操作" align="center" style="width:300px">
			<template #default>
			<el-button link type="primary" size="default" :icon="View">查看</el-button>
			<el-button link type="primary" size="default" :icon="EditPen">修改</el-button>
			<el-button link type="primary" size="default" :icon="Delete">删除</el-button>
			</template>
			</el-table-column>
			</el-table>
			<div class="pages">
			<el-pagination
			v-model:currentPage="currentPage4"
			v-model:page-size="pageSize4"
			:page-sizes="[100, 200, 300, 400]"
			:small="small"
			:disabled="disabled"
			:background="background"
			layout="total, sizes, prev, pager, next, jumper"
			:total="400"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			/>
			</div>
			<DailogAdd ref="openAdd"></DailogAdd>
			<DailogSearchUser ref="openUser"></DailogSearchUser>
			</div>
			</div>
			</template>
			<script lang="ts">
			import DailogAdd from './component/DailogAdd.vue'
			import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
			import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
			import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
			import { Plus, Delete, Upload, Download, Refresh, View,EditPen,Search} from '@element-plus/icons-vue';
			interface User {
			date: string;
			name: string;
			address: string;
			}
			import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
			export default defineComponent({
			components: { ElButton, ElInput,DailogAdd,DailogSearchUser },
			setup() {
			// 搜索条件
			const ruleForm = reactive({
			pass: '',
			checkPass: '',
			});

			const formatter = (row: User, column: TableColumnCtx<User>) => {
			return row.address;
			};

			const tableData: User[] = [
			{
			date: '2016-05-03',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			{
			date: '2016-05-02',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			{
			date: '2016-05-04',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			{
			date: '2016-05-01',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			{
			date: '2016-05-08',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			{
			date: '2016-05-06',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			{
			date: '2016-05-07',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
			},
			];
			const currentPage4 = ref(4);
			const pageSize4 = ref(100);
			const small = ref(false);
			const disabled = ref(false);
			const background = ref(false);
			const handleSizeChange = (val: number) => {
			console.log(`${val} items per page`);
			};
			const handleCurrentChange = (val: number) => {
			console.log(`current page: ${val}`);
			};
			// 弹窗
			const openAdd = ref();
			const openD = () => {
			openAdd.value.openDailog();
			};
			const openUser =ref();
			const openSearch=()=>{
			openUser.value.openDailog()
			}
			return {

			tableData,
			formatter,
			currentPage4,
			pageSize4,
			handleSizeChange,
			handleCurrentChange,
			openAdd,
			openD,
			small,
			disabled,
			background,
			ruleForm,
			openUser,
			openSearch,
			Plus,
			Delete,
			Upload,
			Download,
			Refresh,
			View,
			EditPen,
			Search
			};
			},
			});
			</script>
			<style scoped>
			.minCenter {
			width: 100%;
			background-color: #fff;
			margin-top: 10px;
			padding: 0 20px;
			}
			.topTitle {
			background-color: #fff;
			padding: 20px 0px 20px 0px;
			margin-bottom:10px ;
			}
			.btns {
			padding: 10px 0px 10px 0px;
			display: flex;
			justify-content: space-between;
			}
			.pages {
			padding: 20px 0;
			display: flex;
			justify-content: right;
			}
			</style>