应急预案启动记录

13937891274

2022-07-14 5421ae90e2fb0e153037f4a2ca4741de61d04cdd

 src/components/userSelections/index.vue

@@ -18,7 +18,7 @@
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin-right: 15px;min-width:560px;">
        <el-container style="margin: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
@@ -34,28 +34,25 @@
              </el-form-item>
            </el-form>
          </el-header>
          <el-main>
            <el-scrollbar>
          <el-main style="position: relative;">
              <el-table
                  :data="tableData"
                  :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                  ref="multipleTableRef"
                  highlight-current-row
                  @row-click="rowClick"
                  @selection-change="handleCurrentChange"
              >
                <el-table-column
                  type="selection"
                  width="50"
                >
                <el-table-column align="center" width="55">
                  <template #default="scope">
                    <el-radio-group v-model="radio1" @change="radio">
                      <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属机构" width="110"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
                <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
                <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
                <el-table-column  label="状态"
                                  width="80"
                  prop="tag"
                  width="100"
                  :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
@@ -71,11 +68,33 @@
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div>
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
        <div style="width: 200px;">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
@@ -100,7 +119,7 @@

import type {
  ElTree,
  ElTable,
  // ElTable,
} from 'element-plus'

interface Tree {
@@ -108,11 +127,11 @@
  label: string
  children?: Tree[]
}
interface User {
  date: string
  name: string
  address: string
}
// interface User {
//   date: string
//   name: string
//   address: string
// }
export default defineComponent({
  name: 'userSelections',
  components: {
@@ -195,14 +214,43 @@
        ],
      },
    ]
    const item = {
      date: '龚赛健',
      name: '龚赛健',
      address: '综合办公室',
      tag: '正常',
    }
    const tableData = ref(Array.from({ length: 5 }).fill(item))

    // const item = {
    //   date: '孙刚',
    //   name: '龚赛健',
    //   address: '综合办公室',
    //   tag: '正常',
    // }
    // const tableData = ref(Array.from({ length: 7 }).fill(item))
    const tableData = [
      {
        date: '孙刚',
        name: '孙刚',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '谭柏',
        name: '谭柏',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪威',
        name: '倪威',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪玲婕',
        name: '倪玲婕',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
    ];
    // 定义表单搜索
    const formInline = reactive({
      name: '',
@@ -212,25 +260,28 @@
      console.log('submit!')
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // const currentRow = ref()

    // 当某一行被点击时会触发该事件
    // const handleRowClick = (row: any, column: any, event: Event) => {
    //   emit('row-click', row, column, event)
    // }
    // const singleTableRef = ref<InstanceType<typeof ElTable>>()
    // const setCurrent = (row?: User) => {
    //   singleTableRef.value!.setCurrentRow(row)
    // }
    // const handleCurrentChange = (val: User | undefined) => {
    //   currentRow.value = val
    // }

    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const dynamicTags = ref(['胡海涛']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('谭柏')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      openDialog,
@@ -243,12 +294,15 @@
      tableData,
      formInline,
      onSubmit,
      // currentRow,
      // setCurrent,
      multipleTableRef,
      // multipleTableRef,
      handleClose,
      dynamicTags,
      // handleCurrentChange,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      radio1,
      radio,
    };
  },
});
@@ -259,6 +313,7 @@
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
  padding: 0;
}
.layout-container-demo .el-aside {
  padding: 10px;
@@ -306,6 +361,7 @@
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
@@ -328,4 +384,44 @@
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>