ezhizao_yzbh_vue/src/views/business/crm/company/migrationView.vue

<template>
  <div class="el-drawer__wrapper">
    <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
      <div class="page-container form-container">
        <div class="form-btns-container" style="display: flex;">
          <span class="title-label"><el-icon>
              <Document />
            </el-icon>
            客户迁移信息</span>

        <div style="position: absolute;top: 3px;left: 105px;">
          <el-button type="primary" @click="openMigrationDialog()" size="small">新增</el-button>
        </div>
        <div class="close-btn" @click="cancel">
          <i class="fa fa-times" aria-hidden="true" />
        </div>
      </div>
        <div class="Y-scrollbar" style="
            position: absolute;
            top: 32px;
            bottom: 0;
            width: 100%;
            overflow: auto;
          "></div>
        <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true" label-width="70px">
          <el-form-item label="客户名称：" prop="companyName">
            <el-input v-model="queryParams.companyName" size="small"  placeholder="请输入客户名称" clearable style="width: 120px"
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="目标门店：" prop="fromTenantName">
            <el-input v-model="queryParams.fromTenantName" size="small" placeholder="请输入目标门店" clearable style="width: 120px"
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="状态：" prop="migratStatus">
            <el-select v-model="queryParams.migratStatus" size="small" style="width: 120px" multiple>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item  label="发起时间：" prop="startDateFilter">
            <el-date-picker v-model="queryParams.startDateFilter" size="small" type="daterange" clearable
                            format="YYYY - MM - DD " value-format="YYYY-MM-DD" range-separator="至" start-placeholder="发起时间"
                            end-placeholder="发起时间" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item  label="完成时间：" prop="endDateFilter">
            <el-date-picker v-model="queryParams.endDateFilter" size="small" type="daterange" clearable
                            format="YYYY - MM - DD " value-format="YYYY-MM-DD" range-separator="至" start-placeholder="完成时间"
                            end-placeholder="完成时间" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <div style="display: flex; margin-right: 46px; justify-content: flex-end">
            <el-button type="primary" icon="Search" @click="handleQuery" size="small">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery" size="small">重置</el-button>
          </div>
        </el-form>
        <el-table v-loading="loading" :data="DataList" size="small" border height="100%">
          <el-table-column label="序号" type="index" width="55" align="center"/>
          <el-table-column label="客户名称" align="center" prop="companyName">
          </el-table-column>
          <el-table-column label="税号" align="center" prop="socialCreditCode">
          </el-table-column>
          <el-table-column label="目标门店" align="center" prop="fromTenantName">
          </el-table-column>
          <el-table-column label="发起人" align="center" prop="originator">
          </el-table-column>
          <el-table-column label="发起时间" align="center" prop="startDate">
          </el-table-column>
          <el-table-column label="迁移时间" align="center" prop="endDate">
          </el-table-column>
          <el-table-column label="审核人" align="center" prop="verifyName">
          </el-table-column>
          <el-table-column label="状态" align="center" prop="migratStatus">
          </el-table-column>

        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-drawer>
    <migrationDialog ref="migrationDialogRef" :get-list="getList"></migrationDialog>
  </div>

</template>

<script setup lang="ts">

import {getCurrentInstance, ref, toRefs} from "vue";
import {Document} from "@element-plus/icons-vue";
import migrationDialog from "@/views/business/crm/company/migrationDialog"
const { proxy } = getCurrentInstance();
const title = ref('');
const visible = ref(false);
const queryFalg = ref();
const total = ref(0);
const loading = ref(false);
const migrationDialogRef = ref();
const options = ref([
  {
    label: "等待接收",
    value: 1,
  },
  {
    label: "已接收",
    value: 2,
  },
  {
    label: "已拒绝",
    value: 3,
  },
]);
interface quertParmsEntity {
  pageNum: number,
  pageSize: number,
  orderByColumn: string,
  companyName?:string,
  endDateFilter?:Array<Date>,
  fromTenantName?:string,
  startDateFilter?:Array<Date>,
  migratStatus?:number
}
interface dataEntity {
  companyName?:string,
  socialCreditCode?:string,
  fromTenantName?:string,
  originator?:string,
  startDate?:Date,
  endDate?:Date,
  verifyName?:string,
  migratStatus?:number
}
const queryParams = ref<quertParmsEntity>({
  pageNum: 1,
  pageSize: 20,
  orderByColumn: "create_time"
});
const DataList = ref<Array<dataEntity>>();
const queryRef = ref();
const props = defineProps({
  getComList: {
    type: Function,
    default: () => {},
  },
});
const { getComList } = toRefs(props);

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
function resetQuery() {
  proxy.$refs.queryForm.resetFields();
  handleQuery();
}
const open = (falg) => {
  queryFalg.value = falg;
  visible.value = true;
}
/** 取消按钮 */
function cancel() {
  visible.value = false;
}
const getList = () =>{

}
const openMigrationDialog = () =>{
  migrationDialogRef.value.openView()
}
defineExpose({
  open,
});
</script>