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

<template>
  <el-dialog
  v-model="visible"
  title="新增企业"
  width="1200px"
  :close-on-click-modal="false"
  append-to-body
  >
    <div class="enterprise-container">      
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form :model="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="queryParams.region"
                placeholder="请选择所属区域"
              >
                <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="queryParams.hy"
                placeholder="请选择行业"
              >
                <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="queryParams.st"
                placeholder="请选择生态"
              >
                <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="queryParams.wr"
                placeholder="请选择污染程度"
              >
                <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="queryParams.inviterName"
                placeholder="请选择执法人员"
              >
                <el-option
                  v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>


            <el-form-item label="" prop="enterprisesName" class="form-item">
              <el-input
                v-model="queryParams.enterprisesName"
                placeholder="请输入企业名称"
              />
            </el-form-item>
            
            
            
            
            <el-form-item  class="form-item">
              <el-button @click="handleQuery">
                <Icon icon="ep:search" class="mr-5px" /> 搜索
              </el-button>
              <el-button @click="resetQuery" class="mr-10px">
                <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
  
      <!-- 表格区域 -->
      <el-table
          ref="multipleTableRef"
          :data="enterprise.list"
          @selection-change="handleSelectionChange"
          style="width: 100%; border: 1px solid #EBEEF5"
          :cell-style="{ borderBottom: '1px solid #EBEEF5' }"
          :header-cell-style="{ 
            borderBottom: '1px solid #EBEEF5',
            backgroundColor: '#F5F7FA'
          }"
          >
            <el-table-column type="selection" />
            <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">
        <pagination
          v-show="enterprise.total > 0"
          :total="enterprise.total"
          :show-page-size="false"
          size="small"
          v-model:page="enterprise.queryParams.pageNo"
          v-model:limit="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 { array } from 'vue-types'
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: 9,
    enterprisesName: undefined,
    type: undefined,
    region: undefined,
    registrationNumber: undefined,
    id:undefined
  }),
  total: ref(0)
})
const queryParams = ref({
  enterprisesName: undefined,
  hy: undefined,
  st: undefined,
  wr: undefined,
  region: undefined,
  inviterName: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 confirmSelect = () => {
  emit('success', selectedEnterprises.value)
}
// 确认选择
const handleConfirm = () => {
  // TODO: 处理选择逻辑
  visible.value = false

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

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

  try {
    const data = await EnterprisesApi.getEnterpriseByUserId(enterprise.value.queryParams)
    enterprise.value.list = data.list
    enterprise.value.total = data.total
  } finally {
    loading.value = false
  }
}
// 打开弹窗时的初始化
const open = async () => {
  // TODO: 初始化数据，例如获取列表等
  visible.value = true
  queryParams.value = {
    enterprisesName: undefined,
    type: undefined, // 确保这里是 undefined
    region: undefined,
    registrationNumber: undefined,
    id: undefined
  }
}

/** 搜索按钮操作 */
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([])

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 {

  }

}

getEnterPriseList()
onMounted(()=>{
	init()
})
defineExpose({ open })
</script>
<style scoped lang="scss">
.enterprise-container {
  // ... 样式保持不变 ...
  .search-form {
    background-color: #fff;
    padding: 20px 20px 0px 20px;
    border-radius: 4px;
    position: relative;
    margin: 0 20px;  // 改用 margin 控制间距
    .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;
    justify-content: right;
    margin-top: 20px; // 确保分页和按钮之间有间距
  }
  .footer {
    display: flex;
    justify-content: center; // 将按钮居中
    gap: 8px; // 按钮之间的间距
    padding-top: 20px;
    margin-top: 20px; // 添
  }
}
</style>