Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut

Your Name

2022-07-11 7b9c91f9feb33f901aa09174fbbf119ee3ebcb24

 src/components/userSelections/index.vue

对比新文件
@@ -0,0 +1,331 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="用户选择"
        v-model="isShowDialog"
        width="1000px"
        draggable
    >
      <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
        <el-aside width="200px">
          <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
          <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin-right: 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" class="ml10" @click="onSubmit">
                  查询
                </el-button>
                <el-button size="default" class="ml10" @click="submitReset">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </el-header>
          <el-main>
            <el-scrollbar>
              <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>
                <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  label="状态"
                  prop="tag"
                  width="100"
                  :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                        :filter-method="filterTag"
                        filter-placement="bottom-end">
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.tag === 'Home' ? '' : 'success'"
                        disable-transitions
                    >{{ scope.row.tag }}</el-tag
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </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)">
            {{ tag }}
          </el-tag>
        </div>
      </el-container>
      <template #footer>
            <span class="dialog-footer">
               <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
            </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  watch,
  reactive,
} from 'vue';

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

interface Tree {
  id: number
  label: string
  children?: Tree[]
}
interface User {
  date: string
  name: string
  address: string
}
export default defineComponent({
  name: 'userSelections',
  components: {
    // Search,
  },
  setup() {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };


    const filterText = ref('')
    const treeRef = ref<InstanceType<typeof ElTree>>()  //实例化

    const defaultProps = {
      children: 'children',
      label: 'label',
    }

    // 监听搜索关键字改变
    watch(filterText, (val) => {
      treeRef.value!.filter(val)
    })

    // 节点过滤模糊搜索
    const filterNode = (value: string, data: Tree) => {
      if (!value) return true
      return data.label.includes(value)
    }

    // 树形结构内容
    const data: Tree[] = [
      {
        id: 1,
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            id: 4,
            label: '经营班子',
            children: []
          },
        ],
      },
      {
        id: 2,
        label: '生产运行部',
        children: [
          {
            id: 5,
            label: '工艺二班',
          },
          {
            id: 6,
            label: '灌装一班',
          },
        ],
      },
      {
        id: 3,
        label: '设备部',
        children: [
          {
            id: 7,
            label: '仪表班',
          },
          {
            id: 8,
            label: '机修班',
          },
        ],
      },
    ]
    const item = {
      date: '龚赛健',
      name: '龚赛健',
      address: '综合办公室',
      tag: '正常',
    }
    const tableData = ref(Array.from({ length: 5 }).fill(item))

    // 定义表单搜索
    const formInline = reactive({
      name: '',
    })
    // 搜索按钮
    const onSubmit = () => {
      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 dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      defaultProps,
      filterNode,
      data,
      tableData,
      formInline,
      onSubmit,
      // currentRow,
      // setCurrent,
      multipleTableRef,
      handleClose,
      dynamicTags,
      // handleCurrentChange,
    };
  },
});
</script>
<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
}
.layout-container-demo .el-aside {
  padding: 10px;
  border: 1px solid #ebeef5;
  color: var(--el-text-color-primary);
}
::v-deep .el-input--large .el-input__inner {
  height: 32px!important;
  line-height: 32px!important;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-input--large{
  //width: 178px;
  height: 32px;
}
.el-tree{
  overflow: auto;
}
::-webkit-scrollbar {
  height: 1px;

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 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%;
}
</style>