yudao-web/src/views/task/createEnterprise2.vue

<template>

  <el-dialog
    v-model="visible"
    title="筛选企业"
    width="1200px"
    style="padding: 40px; "
    :close-on-click-modal="false"
    append-to-body
  >
    <template #header >
      <span style="font-size: 20px; font-weight: bold;">筛选企业</span>
    </template>
    <div class="enterprise-container">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form
          :model="enterprise.queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="0"
          size="large"
          class="search-form"
        >
          <div class="form-container">
            <el-form-item label="" prop="region" class="form-item">
              <el-select v-model="enterprise.queryParams.region" placeholder="请选择所属区域" clearable>
                <el-option
                  v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                
                />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="type" class="form-item">
              <el-select v-model="enterprise.queryParams.hy" placeholder="请选择行业" clearable>
                <el-option
                  v-for="dict in hyList"
                  :key="dict.id"
                  :label="dict.tagName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="region" class="form-item">
              <el-select v-model="enterprise.queryParams.st" placeholder="请选择生态" clearable>
                <el-option
                  v-for="dict in stList"
                  :key="dict.id"
                  :label="dict.tagName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="type" class="form-item">
              <el-select v-model="enterprise.queryParams.wr" placeholder="请选择污染程度" clearable>
                <el-option
                  v-for="dict in wrList"
                  :key="dict.id"
                  :label="dict.tagName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="type" class="form-item">
              <el-select v-model="enterprise.queryParams.userId" placeholder="请选择执法人员" filterable clearable>
                <el-option
                  v-for="dict in userList"
                  :key="dict.id"
                  :label="dict.deptName +'_'+ dict.realName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="enterprisesName" class="form-item">
              <el-input v-model="enterprise.queryParams.enterprisesName" placeholder="请输入企业名称" />
            </el-form-item>

            <el-form-item class="form-item">
              <el-button @click="handleQuery" type="primary" plain>
                <Icon icon="ep:search" class="mr-5px" /> 搜索
              </el-button>
              <el-button @click="resetQuery" class="mr-10px" type="primary" plain> 
                <Icon icon="ep:refresh" class="mr-5px" /> 重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table
        ref="multipleTableRef"
        :data="enterprise.list"
        @select="handleSelectionChange"
        @select-all="selectAll"
        style="width: 100%; border: 1px solid #ebeef5"
        :cell-style="{ borderBottom: '1px solid #EBEEF5',  textAlign: 'left'}"
        height="400px" 
        row-key="id"
        :header-cell-style="{
          borderBottom: '1px solid #EBEEF5',
          backgroundColor: '#F5F7FA'
        }"
      >
        <el-table-column type="selection" :reserve-selection="true" />

        <el-table-column property="enterprisesName" label="企业名称" />
        <el-table-column property="region" label="区域">
          <template #default="scope">
            {{
              getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA).find(
                (dict) => dict.value == scope.row.region
              )?.label || '未知区域'
            }}
          </template>
        </el-table-column>
        <el-table-column property="enterprisesName" label="行业">
          <template #default="scope">
            {{
              scope.row.tagListName &&
              scope.row.tagListName
                .filter((item) => item.value == 1)
                .map((item) => item.label)
                .join(', ')
            }}
          </template>
        </el-table-column>
        <el-table-column property="enterprisesName" label="生态">
          <template #default="scope">
            {{
              scope.row.tagListName &&
              scope.row.tagListName
                .filter((item) => item.value == 2)
                .map((item) => item.label)
                .join(', ')
            }}
          </template>
        </el-table-column>
        <el-table-column property="enterprisesName" label="类型">
          <template #default="scope">
            {{
              scope.row.tagListName &&
              scope.row.tagListName
                .filter((item) => item.value == 4)
                .map((item) => item.label)
                .join(', ')
            }}
          </template>
        </el-table-column>
        <el-table-column property="inviterName" label="执法人员" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <div class="selected">已选择 {{ selectedEnterprises.length }} / {{ enterprise.total }}</div>
        <el-pagination
          v-show="enterprise.total > 0"
          :total="enterprise.total"
          :show-page-size="false"
          layout="total, prev, pager, next"
          size="small"
          v-model:current-page="enterprise.queryParams.pageNo"
          @update:current-page="getEnterPriseList"
          v-model:page-size="enterprise.queryParams.pageSize" 
          @pagination="getEnterPriseList"
        />
      </div>

      <!-- 底部按钮 -->
      <div class="footer">
        <el-button type="primary" @click="confirmSelect">确认选择</el-button>
        <el-button @click="handleClose">关闭窗口</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises'
import { TagLibraryVO, TagLibraryApi } from '@/api/system/taglibrary'
import { getSimpleUserZGList } from '@/api/system/user'
const loading = ref(true) // 列表的加载中
const emit = defineEmits(['update:modelValue', 'success'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const enterprise = ref({
  list: ref<EnterprisesVO[]>(),
  queryParams: reactive({
    pageNo: 1,
    pageSize: 20,
    enterprisesName: undefined,
    region: undefined,
    hy: undefined,
    st: undefined,
    wr: undefined,
    inviterName: undefined,
    id: undefined,
    userId: undefined,
    tagList: []
  }),
  total: ref(0)
})
const queryParams = ref({
  enterprisesName: undefined,
  hy: undefined,
  st: undefined,
  wr: undefined,
  region: undefined,
  userId: undefined,
  // registrationNumber: undefined,
  id: undefined
})

// 控制弹窗显示
const visible = ref(false) // 弹窗的是否展示
// ... 其他变量保持不变 ...
// 关闭弹窗
const handleClose = () => {
  visible.value = false
}
const selectedEnterprises = ref<EnterprisesVO[]>([])
const handleSelectionChange = (selectedItems: EnterprisesVO[]) => {
  selectedEnterprises.value = selectedItems
}

const selectAll = (selection) => {
  selectedEnterprises.value = selection
}

//确认选择
const confirmSelect = () => {
  emit('success', selectedEnterprises.value)
}


// 分页数据选中事件
// const handleSelectionChange = (selection) => {
//   const currentPageIds = selection.map(item => item.id);
//   currentPageIds.forEach(id => selectedIds.value.add(id));
// };

/**
 * 获取企业列表
 */
async function getEnterPriseList() {
  loading.value = true

  console.log('enterprise.value.queryParams', enterprise.value.queryParams)

  if (enterprise.value.queryParams.hy || 
    enterprise.value.queryParams.st ||
    enterprise.value.queryParams.wr
  ) {
    enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.hy)
    enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.st)
    enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.wr)
  }


  try {
    const data = await EnterprisesApi.getEnterpriseByUserId(enterprise.value.queryParams)
    enterprise.value.list = data.list
    enterprise.value.total = data.total
  } finally {
    loading.value = false
    enterprise.value.queryParams.tagList = []
  }
}
// 打开弹窗时的初始化
const open = async () => {
  // TODO: 初始化数据，例如获取列表等
  visible.value = true
}

/** 搜索按钮操作 */
const handleQuery = () => {
  enterprise.value.queryParams.pageNo = 1
  getEnterPriseList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  // queryFormRef.value.resetFields()
  // handleQuery()
}

//行业
const hyList: any = ref([])
//生态
const stList: any = ref([])
//污染程度
const wrList: any = ref([])
//执法人员列表
const userList:any = ref()

async function init() {
  try {
    const codeList = 'codeList=hy&codeList=st&codeList=wr'
    const data = await TagLibraryApi.tagLibraryList(codeList)
    hyList.value = data[0].children
    stList.value = data[1].children
    wrList.value = data[2].children
  } finally {
  }

  const userData = await getSimpleUserZGList()

  userList.value = userData

}


getEnterPriseList()
onMounted(() => {
  init()
})
defineExpose({ open })
</script>
<style scoped lang="scss">

::v-deep(.el-dialog) {
  padding: 40px;
}

::v-deep(.el-dialog__title) {
  font-weight: bold !important;
  font-size: 20px;
}
 
.enterprise-container {
  // ... 样式保持不变 ...
  .search-form {
    background-color: #fff;
    padding: 20px 20px 0px 0;
    border-radius: 4px;
    position: relative;
    .form-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 20px;
    }

    .form-item {
      margin: 0;
      width: 100%;

      :deep(.el-input),
      :deep(.el-select) {
        width: 100%;
      }
    }
    .action-buttons {
      position: absolute;
      right: 10px;
      bottom: 0px;
    }

    .button-container {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
  }
  .pagination-container {
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    margin-top: 20px; // 确保分页和按钮之间有间距

    .selected {
      font-size: 12px;
      margin-left: 10px;
      font-weight: bold;
    }
  }
  .footer {
    display: flex;
    justify-content: center; // 将按钮居中
    gap: 8px; // 按钮之间的间距
    padding-top: 20px;
    margin-top: 20px; // 添
  }
}
</style>