tenant-Platform/src/views/quoteConfig/agreement/components/orderAccount.vue

<!-- 模板区域 -->
<template>
  <div>
    <el-dialog v-model="props.orderAccount" title="选择出单账号" width="50%" @close="close">
      <div class="flex a-c j-s ">
        <div class="flex a-c">
          <el-input v-model="searchValue" style="width: 240px;margin-right: 10px;" clearable
            placeholder="输入用户名，简称，保险公司查找" />
          <el-button type="primary" @click="refresh">查询</el-button>
        </div>
        <div>
          <el-button type="default" @click="addAccount">添加账号
            <template #icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-button>
          <el-button type="default" @click="refresh">刷新</el-button>
        </div>
      </div>
      <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="false"
        :showOperation="false" :pageInfo="pageInfo" :maxHeight="400" @getList="getList" :highlightCurrentRow="true"
        :loading="loding" @currentChange="currentChange">
      </ComplexTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save" :disabled="!activeInfo">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref,  } from 'vue'
import api from '@/api'
import {  useRouter } from "vue-router";
import { defineProps, defineEmits } from "vue";
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 100,
});
const router = useRouter();
const props = defineProps<{
  orderAccount: boolean,
}>();
const emits = defineEmits(["cancel", 'save']);
const searchValue = ref();
const activeInfo = ref();//选中对象
const tableData = ref([
]);
const loding = ref(false);
const columns = [
  {
    prop: "createTime", label: "创建时间", align: 'left',
  },
  {
    prop: "username", label: "账号信息", align: 'left', formatter: (row: any) => {
      return `用户名：${row.username}\n简称：${row.userAbbr}`
    }
  },
  {
    prop: "insCompanyName", label: "保险公司",
  },
  { prop: "url", label: "系统", },
  { prop: "deptName", label: "归属", },
];
//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};
onMounted(() => {
  findpage();
})
//数据查询
function findpage() {
  api.insuranceApi.getAgreementAttributionList({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, username: searchValue.value }).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
    } else {
    }
  });
}
const currentChange = (info: object) => {
  console.log(info)
  activeInfo.value = info;
}
const cancel = () => {
  emits("cancel")
}
const close = () => {
  emits('cancel')
}
const save = () => {
  emits('save', activeInfo.value.id, activeInfo.value.username, activeInfo.value.userAbbr)
}
//打开新标签页
const addAccount = () => {
  const url = router.resolve({
    name: 'InsuranceAccountAdd',
  }).href; // 获取目标路由的完整 URL
  window.open(url, '_blank'); // 在新标签页中打开

}
const refresh = () => {
  loding.value = true;
  api.insuranceApi.getAgreementAttributionList({ pages: 1, size: 20, username: searchValue.value }).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
      loding.value = false;

    }
  });
}
</script>