ezhizao_yzbh_vue/src/views/dialog/DialogCustomerChoice.vue

<template>
  <el-dialog v-model="visible" width="680px" append-to-body draggable :close-on-click-modal = "false">
    <template #header>
      <div class="dialog-title-container">
        <span class="title-label" style="color: #fff"
          ><i class="el-icon-document" /> 客户选择</span
        >
        <i class="el-icon-close" @click="close" />
      </div>
    </template>
    <el-form
      class="list-search-container"
      size="small"
      :model="query"
      ref="queryRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="客户名称：" prop="keyword">
        <el-input
          v-model="query.keyword"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 功能按钮 -->
    <div v-if="multiple" class="form-btns-container">
      <el-button type="success" size="small" @click="handleMultipleSelected"
        ><i class="fa fa-floppy-o" aria-hidden="true" /> 确定选择</el-button
      >
    </div>
    <div class="dialog-list-container">
      <el-table
        :data="list"
        size=""
        border
        height="400px"
        header-row-class-name="list-header-row"
        row-class-name="list-row"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="multiple"
          type="selection"
          width="40"
          align="center"
        />
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="客户名称" prop="name" align="center" />
        <el-table-column label="备注" prop="remark" header-align="center" />
        <el-table-column
          v-if="!multiple"
          label="操作"
          width="60"
          align="center"
        >
          <template #default="scope">
            <el-button
              link
              type="success"
              size="small"
              @click="handleSimpleSelected(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="pagination-container"> -->
    <pagination
      v-show="query.total > 0"
      :total="query.total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="getList"
      style="background-color: rgba(0, 0, 0, 0)"
    />
    <!-- </div> -->
  </el-dialog>
</template>
<script setup>
import { toRef } from "vue";
import { listCompany } from "@/api/business/crm/company";
const props = defineProps({
  width: {
    type: String,
    default: "800px",
  },
  multiple: {
    type: Boolean,
    default: () => false,
  },
});

const emit = defineEmits(["choice"]);
const { width, multiple } = toRefs(props);
const data = reactive({
  visible: false,
  query: {
    pn: 1,
    size: 15,
    total: 0,
  },
  list: [],
  selections: [],
});
const { visible, query, list, selections } = toRefs(data);

function open() {
  visible.value = true;
  getList();
}
function close() {
  visible.value = false;
}
const handlePageChange = (val) => {
  query.value.pn = val;
  getList();
};
const handlesizeChange = (val) => {
  query.value.size = val;
  getList();
};
const getList = () => {
  listCompany(query.value)
    .then((res) => {
      query.value.total = res.total;
      list.value = res.rows;
    })
    .catch((err) => {
      console.log(err);
    });
};

const handleMultipleSelected = () => {
  emit("choice", selections.value);
  close();
};

const handleSimpleSelected = (row) => {
  emit("choice", row);
  close();
};
const handleSelectionChange = (choiceSelections) => {
  selections.value = choiceSelections;
};

const resetQuery = () => {
  query.value = {
    pn: 1,
    size: 15,
    total: 0,
  };
  getList();
};

const handleQuery = () => {
  query.value.pageNum = 1;
  getList();
};
// getList()
defineExpose({
  open,
  close,
});
</script>