148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<template>
|
|
<ele-modal
|
|
:width="750"
|
|
:visible="visible"
|
|
:maskClosable="false"
|
|
:title="title"
|
|
:body-style="{ paddingBottom: '28px' }"
|
|
@update:visible="updateVisible"
|
|
>
|
|
<ele-pro-table
|
|
ref="tableRef"
|
|
row-key="modelId"
|
|
:datasource="datasource"
|
|
:columns="columns"
|
|
:customRow="customRow"
|
|
:striped="true"
|
|
:pagination="false"
|
|
>
|
|
<template #toolbar>
|
|
<a-input-search
|
|
allow-clear
|
|
v-model:value="searchText"
|
|
placeholder="请输入搜索关键词"
|
|
style="width: 200px"
|
|
@search="reload"
|
|
@pressEnter="reload"
|
|
/>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<a-space>
|
|
<a-button type="link">选择</a-button>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</ele-pro-table>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import {
|
|
ColumnItem,
|
|
DatasourceFunction
|
|
} from "ele-admin-pro/es/ele-pro-table/types";
|
|
import { pageProject } from "@/api/tower/project";
|
|
import { FILE_THUMBNAIL } from "@/config/setting";
|
|
import { EleProTable } from "ele-admin-pro";
|
|
import { TowerModel, TowerModelParam } from "@/api/tower/model/model";
|
|
import { Contract, ContractParam } from "@/api/tower/contract/model";
|
|
import { pageContract } from "@/api/tower/contract";
|
|
import { message } from "ant-design-vue";
|
|
|
|
defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
// 标题
|
|
title?: string;
|
|
// 修改回显的数据
|
|
data?: Contract | null;
|
|
selection?: Contract[];
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "done", data: Contract): void;
|
|
(e: "update:visible", visible: boolean): void;
|
|
}>();
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit("update:visible", value);
|
|
};
|
|
|
|
// 搜索内容
|
|
const searchText = ref(null);
|
|
|
|
// 表格实例
|
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
|
|
|
// 表格配置
|
|
const columns = ref<ColumnItem[]>([
|
|
{
|
|
key: "index",
|
|
width: 48,
|
|
align: "center",
|
|
fixed: "left",
|
|
hideInSetting: true,
|
|
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
|
},
|
|
{
|
|
title: "合同编号",
|
|
dataIndex: "contractNumber"
|
|
},
|
|
{
|
|
title: "项目名称",
|
|
dataIndex: "projectName"
|
|
},
|
|
{
|
|
title: "业务负责人",
|
|
dataIndex: "customerContact"
|
|
},
|
|
{
|
|
title: "签订日期",
|
|
dataIndex: "signDate"
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
align: "center"
|
|
}
|
|
]);
|
|
|
|
// 表格数据源
|
|
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
|
// 搜索条件
|
|
if (searchText.value) {
|
|
where.keywords = searchText.value;
|
|
}
|
|
return pageContract({
|
|
...where,
|
|
...orders,
|
|
page,
|
|
limit
|
|
});
|
|
};
|
|
|
|
/* 搜索 */
|
|
const reload = (where?: ContractParam) => {
|
|
tableRef?.value?.reload({ page: 1, where });
|
|
};
|
|
|
|
/* 自定义行属性 */
|
|
const customRow = (record: Contract) => {
|
|
return {
|
|
// 行点击事件
|
|
onClick: () => {
|
|
updateVisible(false);
|
|
if (!record.settleMethod) {
|
|
message.warning("请先设置合同结算方式");
|
|
return;
|
|
}
|
|
emit("done", record);
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
<style lang="less"></style>
|