pms-iot-vue/src/views/pms/device/CustomerList.vue

<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 1100px;max-height: 800px">
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label-width="90px" label="客商名称" prop="name" >
        <el-input
          @keyup.enter="handleQuery"
          v-model="queryParams.name"
          placeholder="请输入名称"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label-width="90px" label="客商编号" prop="code" >
        <el-input
          @keyup.enter="handleQuery"
          v-model="queryParams.code"
          placeholder="请输入名称"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
      <el-table-column width="60" label="选择">
        <template #default="{ row }">
          <el-radio
            :model-value="selectedRow?.id"
            :label="row.id"
            @click.stop="selectRow(row)"
            class="no-label-radio"
          />
        </template>
      </el-table-column>
      <el-table-column label="客商名称" align="center" prop="name" />
      <el-table-column label="客商编号" align="center" prop="code" />
      <el-table-column label="客商分类" align="center" prop="classification" >
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.SUPPLIER_TYPE" :value="scope.row.classification" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.SUPPLIER_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
        :formatter="dateFormatter"
      />
<!--      <el-table-column label="操作" align="center">-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--            link-->
<!--            type="primary"-->
<!--            @click="choose(scope.row)"-->
<!--          >-->
<!--            选择-->
<!--          </el-button>-->

<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
    </Dialog>
</template>

<script setup lang="ts">
  import {DictDataVO} from "@/api/system/dict/dict.data";
  import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
  import {dateFormatter} from "@/utils/formatTime";
  import {Api, SupplierVO} from '@/api/supplier/base'
  import { propTypes } from '@/utils/propTypes'
  const emit = defineEmits(['choose']) // 定义 success 事件，用于操作成功后的回调
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的是否展示
  const customerType = ref('') // 弹窗的是否展示
  const loading = ref(true) // 列表的加载中
  const queryFormRef = ref() // 搜索的表单
  const list = ref<SupplierVO[]>([]) // 列表的数据
  const total = ref(0) // 列表的总页数
  // const props = defineProps({
  //   type: propTypes.bool.def(), // 是否作为详情组件
  // })
  const selectedRow = ref(null);

  // 处理单选逻辑
  const selectRow = (row) => {
    selectedRow.value = selectedRow.value?.id === row.id ? null : row;
    emit('choose', row)
    dialogVisible.value = false
  };

  // 点击整行选中
  const handleRowClick = (row) => {
    selectRow(row);
  };
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    customerNature: undefined,
    code: undefined,
    name: undefined,
    classification: undefined,
    type: undefined,
    nature: undefined,
    creditCode: undefined,
    tin: undefined,
    corporation: undefined,
    incorporationDate: [],
    address: undefined,
    bizScope: undefined,
    registeredCapital: undefined,
    annualTurnove: undefined,
    size: undefined,
    status: undefined,
    remark: undefined,
    createTime: [],
    customerNature: ''
  })
  const open = async (type: string) => {
    dialogVisible.value = true

  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
  const getList = async () => {
    loading.value = true
    try {
      console.log(JSON.stringify(queryParams))
      const data = await Api.getPage(queryParams)
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  const choose = (row: DictDataVO) => {
    emit("choose", row);
    dialogVisible.value = false;
  }
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }
  onMounted(async ()=>{
    selectedRow.value = null
    // customerType.value = type
    //
    // dialogTitle.value = type==='supplier'?'供应商':'制造商';
    await getList();
  })
</script>
<style scoped lang="scss">

</style>