qms/src/views/modules/managementCenter/joinEightDiscipline.vue

179 lines
4.3 KiB
Vue

<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__user">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick">
<el-badge :value="5" class="item">
<el-button type="primary" size="small" @click="searchsClick">条件搜索</el-button>
</el-badge>
</search-bar>
<base-table
:table-props="tableProps"
:page="listQuery.page"
:limit="listQuery.limit"
:table-data="tableData"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="70"
:label="$t('handle')"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
<pagination
:limit.sync="listQuery.limit"
:page.sync="listQuery.page"
:total="listQuery.total"
@pagination="getDataList"
/>
<!-- 弹窗, 条件搜索-->
<base-dialog
:dialogTitle="searchsTitle"
:dialogVisible="searchsVisible"
@cancel="searchsCancel"
@confirm="searchsConfirm"
:before-close="searchsCancel"
>
<searchs ref="searchsRef" :show-obj=showObj @refreshDataList="searchsSubmit"></searchs>
</base-dialog>
<!-- 弹窗, 新增 / 修改 -->
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width=80%
>
<add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
</base-dialog>
</div>
</el-card>
</template>
<script>
import AddOrUpdate from "./components/eightDisciplineList-detail";
import Searchs from "./components/searchs";
import basicPage from "@/mixins/basic-page";
import codeFilter from "@/filters/code-filter";
import { timeFormatter } from "@/filters/code-filter";
import i18n from "@/i18n";
const tableProps = [
{
prop: "title",
label: i18n.t("code.title"),
align: "center",
},
{
prop: "occurrenceDate",
label: i18n.t("code.occurrenceDate"),
align: "center",
filter: timeFormatter,
},
{
prop: "productName",
label: "产品",
align: "center",
},
{
prop: "customName",
label: "客户",
align: "center",
},
{
prop: "description",
label: i18n.t("code.description"),
align: "center",
},
{
prop: "userName",
label: "启动人",
align: "center",
},
];
const tableBtn = [
{
type: "detail",
btnName: "详情",
},
];
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: "/code/startEightDiscipline/participate/eight/page",
},
tableProps,
tableBtn,
tableData: [],
showObj: {
role: true
},
formConfig: [
{
type: "button",
btnName: "搜索",
name: "search",
color: "primary",
},
],
};
},
components: {
AddOrUpdate,
Searchs,
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.$http
.post(this.urlOptions.getDataListURL, this.listQuery)
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.tableData = [];
this.listQuery.total = 0;
return this.$message.error(res.msg);
}
this.tableData = res.data.list;
this.listQuery.total = res.data.total;
})
.catch(() => {
this.dataListLoading = false;
});
},
//search-bar点击
searchsClick() {
this.searchsTitle = "条件搜索";
this.searchsHandle();
},
buttonClick(val) {
switch (val.btnName) {
case "search":
this.listQuery = {};
this.listQuery.page = 1;
this.listQuery.limit = 10;
this.listQuery.total = 1;
this.getDataList();
break;
case "export":
this.exportHandle("工厂管理");
break;
default:
console.log(val);
}
},
otherMethods(val) {
this.addOrEditTitle = "详情";
this.addOrUpdateVisible = true;
this.addOrUpdateHandle(val.data.id);
},
},
};
</script>