From be79ce19df6ea881de516ae0b44bfe527e90e736 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期三, 29 六月 2022 19:37:24 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut --- src/views/contingency/team/index.vue | 270 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 263 insertions(+), 7 deletions(-) diff --git a/src/views/contingency/team/index.vue b/src/views/contingency/team/index.vue index 4bb1816..bb158ac 100644 --- a/src/views/contingency/team/index.vue +++ b/src/views/contingency/team/index.vue @@ -1,13 +1,269 @@ <template> - + <div class="system-user-container"> + <el-card shadow="hover"> + <div class="system-user-search mb15"> + <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input> + <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;"> + <el-option label="公司" value="shanghai"></el-option> + <el-option label="分厂-车间" value="beijing"></el-option> + <el-option label="工序-班组等" value="beijing"></el-option> +<!-- <el-option--> +<!-- v-for="item in options"--> +<!-- :key="item.value"--> +<!-- :label="item.label"--> +<!-- :value="item.value"--> +<!-- />--> + </el-select> + <el-button size="default" type="primary" class="ml10"> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="submitReset"> + 重置 + </el-button> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button type="primary" @click="onOpenAdd"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button type="danger" plain disabled> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </div> + <div class="button_Right"> + <el-button> + <el-icon> + <Upload /> + </el-icon> + </el-button> + <el-button> + <el-icon> + <Download /> + </el-icon> + </el-button> + <el-button> + <el-icon> + <Refresh /> + </el-icon> + </el-button> + </div> + </div> + <el-table :data="tableData.data" style="width: 100%"> + <el-table-column type="index" label="序号" width="60" /> + <el-table-column prop="userName" label="队伍名称" show-overflow-tooltip></el-table-column> + <el-table-column prop="userNickname" label="队伍级别" show-overflow-tooltip></el-table-column> + <el-table-column prop="roleSign" label="队伍描述" show-overflow-tooltip></el-table-column> + <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column> + <el-table-column prop="email" label="相关附件" show-overflow-tooltip></el-table-column> + <el-table-column label="操作" width="200" align="center"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenLink(scope.row)"> + <el-icon style="margin-right: 5px;"> + <View /> + </el-icon>查看 + </el-button> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser(scope.row)"> + <el-icon style="margin-right: 5px;"> + <EditPen /> + </el-icon>修改 + </el-button> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </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> + </el-card> + <OpenLink ref="openLinRef" /> + <EditUser ref="editUserRef" /> + </div> </template> -<script> -export default { - name: "index" +<script lang="ts"> +import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; +import { ElMessageBox, ElMessage } from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + View, + EditPen, +} from '@element-plus/icons-vue' +import AddUer from '/@/views/system/user/component/addUser.vue'; +import EditUser from '/@/views/system/user/component/editUser.vue'; + +// 定义接口来定义对象的类型 +interface TableDataRow { + userName: string; + userNickname: string; + roleSign: string; + department: string[]; + phone: string; + email: string; + sex: string; + password: string; + overdueTime: Date; + describe: string; + createTime: string; } +interface TableDataState { + tableData: { + data: Array<TableDataRow>; + total: number; + loading: boolean; + param: { + pageNum: number; + pageSize: number; + }; + }; +} + +export default defineComponent({ + name: 'systemUser', + components: { AddUer, EditUser, View, EditPen, Plus, Edit, Delete, Upload, Download, Refresh }, + setup() { + const addUserRef = ref(); + const editUserRef = ref(); + const openLinRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const state = reactive<TableDataState>({ + tableData: { + data: [], + total: 0, + loading: false, + param: { + pageNum: 1, + pageSize: 10, + }, + }, + }); + // 初始化表格数据 + // const initTableData = () => [ + // { + // userName: '消防抢险组(部门级)', + // userNickname: '分厂-车间', + // roleSign: 'No. 189, Grove St, Los Angeles', + // phone: '11', + // email: 'ce', + // }, + // ] + const initTableData = () => { + const data: Array<TableDataRow> = []; + for (let i = 0; i < 2; i++) { + data.push({ + userName: i === 0 ? 'admin' : 'test', + userNickname: i === 0 ? '我是管理员' : '我是普通用户', + roleSign: i === 0 ? 'admin' : 'common', + department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'], + phone: '12345678910', + email: 'vueNextAdmin@123.com', + sex: '女', + password: '123456', + overdueTime: new Date(), + describe: i === 0 ? '不可删除' : '测试用户', + createTime: new Date().toLocaleString(), + }); + } + state.tableData.data = data; + state.tableData.total = state.tableData.data.length; + }; + //查看用户弹窗 + const OpenLink = () => { + openLinRef.value.openDialog(); + }; + // 打开新增用户弹窗 + const onOpenAddUser = () => { + addUserRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEditUser = (row: TableDataRow) => { + editUserRef.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; + }; + // 页面加载时 + onMounted(() => { + initTableData(); + }); + return { + // value, + // options, + addUserRef, + editUserRef, + OpenLink, + openLinRef, + onOpenAddUser, + onOpenEditUser, + onRowDel, + onHandleSizeChange, + onHandleCurrentChange, + ...toRefs(state), + }; + }, +}); </script> - -<style scoped> - +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ + .button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; + } </style> \ No newline at end of file -- Gitblit v1.9.2