ezhizao_yzbh_vue/src/views/dialog/DialogContractChoice.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: white"><i class="el-icon-document" style="color: white" /> 合同选择</span>
        <i class="el-icon-close" @click="close" />
      </div>
    </template>
    <!-- 功能按钮 -->
    <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="small" 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="46" align="center" />
        <el-table-column label="合同编号" prop="contractNo" width="100" align="center" />
        <el-table-column label="客户名称" prop="companyName" width="100" align="center" />
        <el-table-column label="备注" prop="remark" header-align="center" />
        <el-table-column v-if="!multiple" label="操作" width="50" 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 { listContract } from '@/api/business/financial/payment'
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: {
    pageNum: 1,
    pageSize: 15,
    total: 0
  },
  list: [],
  selections: [],
  options: {}
})
const { visible, query, list, selections, options } = toRefs(data)

function open(input) {
  visible.value = true;
  options.value = input == null ? {} : input
  getList()
}
function close() {
  visible.value = false;
}
const getList = () => {
  listContract({ ...query.value, ...options.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
}
// getList()
defineExpose({
  open,
  close
})
</script>