对接

shj

2022-09-06 d1a430e88df40d76558a14f890ac0dbd3181f3a0

 src/components/userCheckbox/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="请输入组织机构过滤" />
@@ -15,14 +17,15 @@
              :data="data"
              :props="defaultProps"
              default-expand-all
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
          />
        </el-aside>
        <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 :inline="true" :model="ruleForm" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
                <el-input size="default" v-model="ruleForm.name" placeholder="登录名"> </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" class="ml10" @click="onSubmit">
@@ -38,29 +41,37 @@
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                @cell-click="checkbox"
            >
              <el-table-column type="selection" width="55"/>
              <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="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"
                                :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                                :filter-method="filterTag"
                                filter-placement="bottom-end">
              <el-table-column type="selection"  width="55">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.tag === 'Home' ? '' : 'success'"
                      disable-transitions
                  >{{ scope.row.tag }}</el-tag
                  >
                  <el-checkbox-group v-model="checkbox1">
                    <el-checkbox :label="scope.row.uid" size="large">{{ null }}</el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column prop="realName" label="登录名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="username" label="用户名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属部门" width="115" show-overflow-tooltip sortable/>
              <el-table-column align="center" prop="type" label="状态" />
<!--              <el-table-column  label="状态"-->
<!--                                width="80"-->
<!--                                prop="tag"-->
<!--                                :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>
            <div class="pages">
              <el-pagination
@@ -68,11 +79,8 @@
                  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"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
@@ -80,9 +88,19 @@
          </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 v-if="dynamicTags[0]==''?false:true">
            <el-tag
                v-for="tag in dynamicTags"
                :key="tag"
                class="mx-1"
                style="margin: 5px"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
            >
              {{ tag.realName }}
            </el-tag>
          </div>
        </div>
      </el-container>
      <template #footer>
@@ -101,13 +119,20 @@
  defineComponent,
  watch,
  reactive,
  onMounted,
} from 'vue';

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

import {
  ElMessage,
} from 'element-plus';
import {
  FullScreen
} from '@element-plus/icons-vue'
import {goalManagementApi} from "/@/api/goalManagement";
interface Tree {
  id: number
  label: string
@@ -123,10 +148,11 @@
  components: {
    // Search,
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
    const openDialog = (type:any) => {
      types.value=type
      isShowDialog.value = true;
    };
    // 关闭弹窗
@@ -138,68 +164,62 @@
      closeDialog();
    };


    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            }
          });
    };
    const defaultProps = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    }
    //部门树查询
    const filterText = ref('')
    const treeRef = ref<InstanceType<typeof ElTree>>()  //实例化

    const defaultProps = {
      children: 'children',
      label: 'label',
    watch(filterText, (val) => {
      treeRef.value!.filter(val);
    });
    // 节点过滤模糊搜索
    const filterNode = (depName: string, data: Tree) => {
      if (!depName) return true
      return data.depName.includes(depName)
    }
    onMounted(() => {
      department();
    });
    //左边树形部分点击获取回调
    const names = ref<any>();
    const handleNodeClick = (data: Tree) => {
      goalManagementApi()
          .getManName(data.depId)
          .then((res) => {
            if (res.data.code == 200) {
              tableData.value=res.data.data
            }else{
              ElMessage.error(res.data.msg);
            }
          });
    };


    // 监听搜索关键字改变
    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 data = ref()




    // const item = {
    //   date: '孙刚',
    //   name: '龚赛健',
@@ -207,52 +227,31 @@
    //   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({
    const ruleForm = reactive({
      name: '',
    })
    const types=ref()
    // 搜索按钮
    const onSubmit = () => {
      console.log('submit!')
      let obj = JSON.parse(JSON.stringify(dynamicTags.value));
      emit('SearchUser', obj[0],types.value);
      isShowDialog.value = false;
    }

    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    const dynamicTags = ref(['']);
    const handleClose = () => {
      dynamicTags.value.push(checkbox1.value)
      // dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      checkbox1.value = '';
    };

    const checkbox1 = ref('');
    const checkbox = (event: any) => {
      dynamicTags.value[0] = event;
    };
    const tableData = ref();
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
@@ -264,6 +263,15 @@
    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,
@@ -273,7 +281,7 @@
      filterNode,
      data,
      tableData,
      formInline,
      ruleForm,
      onSubmit,
      // multipleTableRef,
      handleClose,
@@ -282,6 +290,14 @@
      handleCurrentChange,
      pageIndex,
      pageSize,
      toggleFullscreen,
      FullScreen,
      full,
      names,
      handleNodeClick,
      types,
      checkbox1,
      checkbox,
    };
  },
});