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="请输入查找内容"
          :disabled="!queryType"
        />
      </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-tree-select
          v-model="queryDeptName"
          :data="props.departmentList"
          :render-after-expand="false"
          :default-expand-all="true"
          check-strictly
          placeholder="请选择组织"
          class="protocal-select"
        />
        <!-- <el-select v-model="queryDeptName" placeholder="请选择组织" class="protocal-select">
          <el-option
            v-for="item in props.departmentList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptName"
          />
        </el-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 { queryTypeSelect } from '../constant';
  import useSelectContent from '../hooks/use-user-para';
  import useUser from '../hooks/use-user';
  import { storeToRefs } from 'pinia';

  interface Props {
  departmentList: any[];
}

const props = defineProps<Props>();

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

  const useUserDetail = useUser();
  const {
    queryType,
    queryTypeContent,
    queryStaffNo,
    queryNickname,
    queryMobile,
    queryRoleName,
    queryDeptName,
  } = storeToRefs(useUserDetail);
  const { conditionSearch } = useUserDetail;



  // 重置查询条件
  const resetSearch = () => {
    queryType.value = '';
    queryTypeContent.value = '';
    queryRoleName.value = '';
    queryDeptName.value = '';
    queryStaffNo.value = '';
    queryNickname.value = '';
    queryMobile.value = '';
  };
</script>

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

  .protocal-select {
    width: 160px;
  }

  .query-head {
    padding: 24px 57px 18px 21px;
  }

  .protocal-select {
    width: 160px;
  }
</style>