|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <el-dialog title="添加人员信息" :visible.sync="dialogVisible" width="1200px" append-to-body>
|
|
|
+ <div class="c-div">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col class="box" :span="12">
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="top">
|
|
|
+ <el-form ref="form" :model="form" :inline="true" style="float: left; height: 45px">
|
|
|
+ <el-form-item label="姓名" label-width="auto">
|
|
|
+ <el-input v-model="form.name" size="small" placeholder="请输入姓名" style="width: 180px;" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="职务" label-width="auto">
|
|
|
+ <el-input v-model="form.duty" size="small" placeholder="请输入职务" style="width: 180px;" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="auto">
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="small" style="margin-top: 4px;">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <el-table ref="multipleTable" :data="tableData" :style="{ width: '100%' }" height="300px"
|
|
|
+ :header-cell-style="{background: 'rgba(250,250,250)', color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}"
|
|
|
+ style="width: 100%" @select="rowSelect">
|
|
|
+ <template slot="empty">
|
|
|
+ <img src="@/assets/icon/null.png" alt="" />
|
|
|
+ <p class="empty-p">暂无数据</p>
|
|
|
+ </template>
|
|
|
+ <el-table-column type="selection" align="center" width="50"></el-table-column>
|
|
|
+ <el-table-column prop="dept" align="center" label="部门"></el-table-column>
|
|
|
+ <el-table-column prop="name" align="center" label="姓名"></el-table-column>
|
|
|
+ <el-table-column prop="duty" align="center" label="职务"></el-table-column>
|
|
|
+ <el-table-column prop="phone" align="center" label="联系电话"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
|
|
|
+ :page-sizes="[5,20, 30, 40, 50, 100, 200]" :page-size="pagination.size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" small>
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="box" :span="12">
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="top">
|
|
|
+ <div class="h-title">已选人员</div>
|
|
|
+ </div>
|
|
|
+ <el-table :data="selectTableData" :style="{ width: '100%' }" height="332px" :header-cell-style="{background: 'rgba(250,250,250)',
|
|
|
+ color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" style="width: 100%">
|
|
|
+ <template slot="empty">
|
|
|
+ <img src="@/assets/icon/null.png" alt="" />
|
|
|
+ <p class="empty-p">暂无数据</p>
|
|
|
+ </template>
|
|
|
+ <el-table-column prop="dept" align="center" label="部门"></el-table-column>
|
|
|
+ <el-table-column prop="name" align="center" label="姓名"></el-table-column>
|
|
|
+ <el-table-column prop="duty" align="center" label="职务"></el-table-column>
|
|
|
+ <el-table-column prop="phone" align="center" label="联系电话"></el-table-column>
|
|
|
+ <el-table-column align="center" label="操作">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-button type="text" icon="el-icon-delete" style="color:#f40;padding:0" @click="removeItem(row)"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button size="small" @click="dialogVisible = false;selectTableData=[]">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="selectSubmit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getEmergencyStaff } from '@/api/mbsys/watersupply'
|
|
|
+export default {
|
|
|
+ props: ['visible'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ tableData: [],
|
|
|
+ selectTableData: [],
|
|
|
+ form: {},
|
|
|
+ pagination: { current: 1, size: 20, total: 0 }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible(val, oldVal) {
|
|
|
+ this.dialogVisible = this.visible
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getEmergencyStaff()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取人员列表
|
|
|
+ */
|
|
|
+ getEmergencyStaff() {
|
|
|
+ let params1 = JSON.parse(JSON.stringify(this.form));
|
|
|
+ let params2 = JSON.parse(JSON.stringify(this.pagination));
|
|
|
+ let params3 = { ...params1, ...params2 };
|
|
|
+ getEmergencyStaff(params3).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.tableData = res.result.records;
|
|
|
+ this.pagination.total = res.result.total;
|
|
|
+ // 回显已经选择的
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.tableData.forEach(row => {
|
|
|
+ // 检查是否已经选择
|
|
|
+ const selected = this.selectTableData.some(item => {
|
|
|
+ if (item.id == row.id) return true
|
|
|
+ })
|
|
|
+ if (selected) this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSizeChange(size) {
|
|
|
+ this.pagination.size = size;
|
|
|
+ this.getEmergencyStaff();
|
|
|
+ },
|
|
|
+ handleCurrentChange(current) {
|
|
|
+ this.pagination.current = current;
|
|
|
+ this.getEmergencyStaff();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 选择
|
|
|
+ */
|
|
|
+ rowSelect(selection, row) {
|
|
|
+ // 判断是否选中
|
|
|
+ const checked = selection.some(item => {
|
|
|
+ if (item.id == row.id) return true
|
|
|
+ })
|
|
|
+ if (checked) {
|
|
|
+ this.selectTableData.push(row)
|
|
|
+ } else {
|
|
|
+ this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 移除行
|
|
|
+ */
|
|
|
+ removeItem(row) {
|
|
|
+ this.selectTableData = this.selectTableData.filter(item => item.id != row.id)
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ */
|
|
|
+ selectSubmit(){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.el-dialog__wrapper {
|
|
|
+ >>> .box {
|
|
|
+ // border: 1px solid #ccc;
|
|
|
+ padding: 0 5px !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ // line-height: 45px;
|
|
|
+ }
|
|
|
+ .box-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #e2e2e2;
|
|
|
+ border-radius: 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ .el-table--border::after,
|
|
|
+ .el-table--group::after,
|
|
|
+ .el-table::before {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .h-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 18px;
|
|
|
+ vertical-align: sub;
|
|
|
+ background-color: #70b603;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ >>> .el-button span {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
tengmingxue