事故管理修改

zhaojiale

2022-08-10 d8215ff56e7bf39b43c52d7f27de5e7e427e67cf

 src/components/userSelections/index.vue

@@ -5,7 +5,9 @@
        v-model="isShowDialog"
        width="1000px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
        <el-aside width="200px">
          <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
@@ -18,7 +20,7 @@
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container>
        <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,20 +36,26 @@
              </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"
                  @cell-click="radio"
              >
                <el-table-column align="center" width="55">
                  <template #default="scope">
                    <el-radio-group v-model="radio1">
                      <el-radio :label="scope.row.id" 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="130"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="130" 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' },
@@ -63,11 +71,37 @@
                  </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 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>
      </el-container>

      <template #footer>
            <span class="dialog-footer">
               <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
@@ -88,20 +122,27 @@

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

import {
  FullScreen
} from '@element-plus/icons-vue'
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
// interface User {
//   date: string
//   name: string
//   address: string
// }
export default defineComponent({
  name: 'userSelections',
  components: {
    // Search,
  },
  setup() {
  setup(props,{emit}) {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
@@ -113,6 +154,8 @@
    };
    // 取消
    const onCancel = () => {
      let obj=JSON.parse(JSON.stringify(dynamicTags.value))
      emit("SearchUser",obj[0])
      closeDialog();
    };

@@ -178,14 +221,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: '',
@@ -195,7 +267,38 @@
      console.log('submit!')
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    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}`);
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
@@ -207,7 +310,18 @@
      tableData,
      formInline,
      onSubmit,
      multipleTableRef
      // multipleTableRef,
      handleClose,
      dynamicTags,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      radio1,
      radio,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
@@ -218,6 +332,7 @@
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
  padding: 0;
}
.layout-container-demo .el-aside {
  padding: 10px;
@@ -265,14 +380,67 @@
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::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>