121 lines
4.0 KiB
Vue
121 lines
4.0 KiB
Vue
<!-- 入库指令单列表 -->
|
|
<template>
|
|
<div class="table-box">
|
|
<!-- 按钮 -->
|
|
<ListBtns :selectionList="selectionList" @handleParentCallback="handleParentCallback" :ruleForm="datas.exportList" />
|
|
<Search :formData="datas.formData" :ruleForm="datas.ruleForm" @handleSearch="handleSearch" @handleReset="handleReset" />
|
|
<!-- 表格 -->
|
|
|
|
<ProTable
|
|
ref="proTable"
|
|
:columns="datas.columns"
|
|
:request-api="getSubscriptionListApi"
|
|
:init-param="datas.initParam"
|
|
:ruleForm="datas.ruleForm"
|
|
@selectionChange="selectionChange"
|
|
>
|
|
<template #customerName="scope">
|
|
<a @click="handleToDetail(scope.row)" class="break-word to-details">
|
|
{{ scope.row.customerName }}
|
|
</a>
|
|
</template>
|
|
</ProTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="subscriptionIndex">
|
|
import ListBtns from "@/components/ListBtns/index.vue";
|
|
import Search from "@/components/Search/index.vue";
|
|
import ProTable from "@/components/ProTable/index.vue";
|
|
import { cloneDeep } from "lodash-es";
|
|
import { RULEFORM, FORMDATA, COLUMNS } from "./constant/list/index";
|
|
import { getSubscriptionListApi } from "@/api/modules/subscription";
|
|
import { initSearch } from "./init/index";
|
|
import { useRefresh } from "@/stores/modules/refresh";
|
|
const refreshStore = useRefresh();
|
|
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
|
const proTable = ref<any>(null);
|
|
// 数据源
|
|
const datas = reactive({
|
|
exportList: cloneDeep(RULEFORM),
|
|
columns: COLUMNS, //列表配置项
|
|
initParam: cloneDeep(RULEFORM), // 初始化搜索条件|重置搜索条件
|
|
ruleForm: cloneDeep(RULEFORM), // 搜索条件
|
|
formData: FORMDATA, //搜索配置项
|
|
isSearchBtn: false
|
|
});
|
|
//选中表格的行
|
|
let selectionList = ref([]);
|
|
const $router = useRouter();
|
|
//初始化搜索条件
|
|
initSearch(datas);
|
|
|
|
/**
|
|
* @description 获取按钮操作结果
|
|
* @param type {string} 按钮类型
|
|
* @param result {Object} 操作结果
|
|
*/
|
|
const handleParentCallback = () => {
|
|
datas.isSearchBtn ? proTable!.value.getTableList(datas.ruleForm) : proTable!.value.getTableList(datas.initParam);
|
|
};
|
|
const handleSearch = () => {
|
|
proTable!.value.initPage(datas.ruleForm);
|
|
datas.exportList = datas.ruleForm;
|
|
datas.exportList.pageNo = proTable!.value.pageable.pageNo;
|
|
datas.exportList.pageSize = proTable!.value.pageable.pageSize;
|
|
datas.isSearchBtn = true;
|
|
};
|
|
const handleReset = () => {
|
|
datas.ruleForm = cloneDeep(RULEFORM);
|
|
datas.exportList = cloneDeep(RULEFORM);
|
|
proTable!.value.initPage(datas.initParam);
|
|
};
|
|
const selectionChange = (selection: any) => {
|
|
selectionList.value = selection;
|
|
};
|
|
//跳转到详情
|
|
const handleToDetail = (row: any) => {
|
|
$router.push({
|
|
path: "/setUp/subscription/details",
|
|
query: {
|
|
id: row.id,
|
|
type: "edit"
|
|
}
|
|
});
|
|
};
|
|
//
|
|
onActivated(() => {
|
|
//提交了,但是没有搜索,要进行初始化刷新
|
|
if (refreshStore.isRefreshSubscription && !datas.isSearchBtn) {
|
|
proTable!.value.getTableList(datas.initParam);
|
|
refreshStore.setRefreshSubscription(false);
|
|
return;
|
|
}
|
|
//搜索并且提交了
|
|
if (datas.isSearchBtn && refreshStore.isRefreshSubscription) {
|
|
proTable!.value.getTableList(datas.ruleForm);
|
|
refreshStore.setRefreshSubscription(false);
|
|
return;
|
|
}
|
|
//订阅详情提交了要刷新
|
|
if (refreshStore.isRefreshSubscription) {
|
|
proTable!.value.getTableList(datas.ruleForm);
|
|
refreshStore.setRefreshSubscription(false);
|
|
return;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scope lang="scss">
|
|
.container {
|
|
// width: 200px; 指定容器的宽度
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
|
|
white-space: nowrap; /* 不换行 */
|
|
}
|
|
.to-details {
|
|
color: #4178d5;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|