sl-sfy-safety/src/views/system/user/component/UserQuery.vue

<template>
  <div class="flex items-center query-head">
    <el-space alignment="center" :size="50">
      <div>
        <el-select v-model="queryType" placeholder="选择类型" class="type-select">
          <el-option
            v-for="item in queryTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          :style="{ width: '180px' }"
          v-model="queryTypeContent"
          clearable
          placeholder="请输入查找内容"
        />
      </div>
      <div>
        <span>请选择角色：</span>
        <el-select v-model="queryRoleName" placeholder="请选择角色" class="protocal-select">
          <el-option
            v-for="item in roleList!"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleName"
          />
        </el-select>
      </div>
      <div>
        <span>请选择组织：</span>
        <el-select v-model="queryDeptName" placeholder="请选择组织" class="protocal-select">
          <el-option
            v-for="item in departmentList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptName"
          />
        </el-select>
        <!-- <el-tree-select
          v-model="queryWorkSpace"
          :data="scenesTree"
          :render-after-expand="false"
          :default-expand-all="true"
          check-strictly
          placeholder="请选择场景"
          class="protocal-select"
        /> -->
      </div>
    </el-space>
    <div class="flex-1 flex justify-end">
      <el-button type="primary" @click="conditionSearch"> 查询 </el-button>
      <el-button @click="resetSearch"> 重置 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { queryTypeSelect } from '../constant';
  import useSelectContent from '../hooks/use-user-para';
  import useUser from '../hooks/use-user';
  import { storeToRefs } from 'pinia';

  const selectContent = useSelectContent();
  const { roleList, departmentList } = selectContent;

  const useUserDetail = useUser();
  const {
    queryType,
    queryTypeContent,
    queryStaffNo,
    queryNickname,
    queryMobile,
    queryRoleName,
    queryDeptName,
    userList,
    page,
    pageSize,
    totalCount,
  } = storeToRefs(useUserDetail);
  const { conditionSearch, getList, singleUserAdd, multipleUserAdd, userDel, userUpdate } =
    useUserDetail;

  //   const queryType = ref<string>('');
  //   const;

  //   const sceneInfos = useSceneInfos();
  //   const { scenesTree, getScenesTree } = sceneInfos;

  //   const cameraOverview = useCameraOverview();
  //   const { queryType, queryTypeContent, queryCameraType, queryWorkSpace } =
  //     storeToRefs(cameraOverview);
  //   const { getCameraItems } = cameraOverview;

  // 重置查询条件
  const resetSearch = () => {
    queryType.value = '';
    queryTypeContent.value = '';
    queryRoleName.value = '';
    queryDeptName.value = '';
  };
  const getUserItems = () => {};

  onMounted(() => {
    // getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name' });
  });
</script>

<style scoped>
  .type-select {
    width: 100px;
  }

  .protocal-select {
    width: 160px;
  }

  .query-head {
    padding: 24px 57px 18px 21px;
  }
</style>