yjhtgl-web/src/views/riskPrevention/SafetyProductionManagement/BusinessPortraits.vue

<!--企业画像-->
<template>
  <div>
    <div v-show="!BussinessAddState.show && !BussinessEditState.show " class="app-container">
      <div>
        <transition name="fade">
          <div v-show="showSearch" class="mb-[10px]">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item :span="5" label="辖区县：" prop="area_code" label-width="auto">
                <el-select v-model="queryParams.area_code" placeholder="全部" clearable>
                  <el-option v-for="item in county" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item  :span="5"  prop="keyword" label-width="auto">
                <el-input
                  v-model="queryParams.keyword"
                  placeholder="请输入企业名称/企业负责人"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" icon="Plus" @click="handleAdd">新建</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="danger" plain :disabled="selected === 0" icon="Delete" @click="handleDelete(selectedRow)"> 删除 </el-button>
              </el-col>
            </el-row>
          </div>
        </transition>
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border :max-height="maxHeight" style="width: 96%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="企业名称" align="center" prop="company_name" fixed />
          <el-table-column label="辖区省" align="center" prop="province" />
          <el-table-column label="辖区市" align="center" prop="city" />
          <el-table-column label="辖区县" align="center" prop="district" />
          <el-table-column label="企业地址" align="center" prop="company_address" />
          <el-table-column label="企业负责人" align="center" prop="responsible_person" />
          <el-table-column label="移动电话" align="center" prop="phone" />
          <el-table-column label="企业类型" align="center" prop="company_type" />
          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button type="text" class="common-btn-text-primary" @click="handleedit(scope.row)">编辑</el-button>
              <el-button type="text" class="common-btn-text-danger" @click="handleDelete(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="fetchWorkrData"
        />
      </div>
    </div>
    <BussinessAdd v-if="BussinessAddState.show"  @close="handleCancel" />
    <BussinessEdit v-if="BussinessEditState.show" :event-id="BussinessEditState.eventId"  @close="handleCancel" />
  </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted, onBeforeUnmount } from "vue";
import {companyDelete, getCompanyList} from "@/api/riskPrevention/BusinessPortraits";
import BussinessAdd from "@/views/riskPrevention/SafetyProductionManagement/BussinessAdd.vue";
import BussinessEdit from "./BussinessEdit.vue";
import {to} from "await-to-js";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const showSearch = ref(true);
const tableData = ref();
const multiple = ref(true);
const ids = ref<Array<number | string>>([]);
const single = ref(true);
// 定义响应式变量
const loading = ref(false);
const maxHeight = ref(window.innerHeight * 0.8);
const total = ref();
const selectedRow = ref();
const selected = ref(0);
// 处理窗口大小变化
const handleResize = () => {
  maxHeight.value = window.innerHeight * 0.8;
};
const initFormData = reactive({
  company_name: '',
  province: '',
  city: '',
  district: '',
  company_address: '',
  responsible_person: '',
  phone: '',
  company_type: ''
});
const data =reactive({
  form: {...initFormData},
  queryParams:{
    page: '1',
    pageSize: '10',
    area_code: '',
    keycode: ''
  }
})

const { queryParams, form } = toRefs(data);

const county = [
  { value: '', label: '全部' },
  { value: '0', label: '茂南区' },
  { value: '1', label: '电白区' },
  { value: '2', label: '高州市' },
  { value: '3', label: '化州市' },
  { value: '4', label: '信宜市' },
];

const handleQuery = () => {
  queryParams.value.page = 1;
  fetchWorkrData();
};
const resetQuery = () => {
  queryParams.value = { page: 1, pageSize: 10, area_code: '', keycode: '' };
  handleQuery();
};
const BussinessAddState = reactive({
  show: false, // 初始化show为false
});

const BussinessEditState = reactive({
  show:false
});

const handleAdd = () => {
  BussinessAddState.show = true;
};

const handleDelete = async (row) => {
  let id = [];
  if (row) {
    id = [row.id];
  } else {
    id = ids.value;
  }
  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的数据项？') as any);
  if (!err) {
    await companyDelete(id);
    proxy.$modal.msgSuccess('删除成功');
    fetchWorkrData();
  }
};
const handleedit = (row) => {
  BussinessEditState.eventId = row.id + "";
  BussinessEditState.show = true;
  fetchWorkrData();
};

const handleCancel = () => {
  BussinessAddState.show = false;
  BussinessEditState.show =false;
  fetchWorkrData();
};

const fetchWorkrData = () => {
  loading.value = true;
  getCompanyList(queryParams.value)
    .then((res) => {
      res.data.forEach(item => {
        if (item.company_type === '1') {
          item.company_type = "危化企业";
        } else if (item.company_type === '2') {
          item.company_type = "非煤矿山";
        } else {
          item.company_type = "工贸";
        }
      })
      tableData.value = res.data;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
  selectedRow.value = selection.length === 1 ? selection[0] : null;
  selected.value = selection.length;
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
  fetchWorkrData();
});

// 在组件卸载前移除窗口大小变化监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);

});
</script>

<style lang="scss" scoped></style>