<template>
|
<div class="free-payment">
|
<SearchCondition
|
:info="info"
|
ref="condRef"
|
:conForm="conForm"
|
:isShowDetail="isShowDetail"
|
:screenWidth="screenWidth"
|
@handleOnSeach="handleOnSeach"
|
@handleOnRest="handleOnRest"
|
@handleClick="isShowDetail = !isShowDetail"
|
/>
|
<el-row class="add-button">
|
<el-col :span="24">
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="handleAddPage"
|
class="add-btn"
|
>新增</el-button
|
>
|
</el-col>
|
</el-row>
|
<ProTable
|
:pageInfo="pageInfo"
|
@doAction="doAction"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isAutoIndex="true"
|
:list="records"
|
:header="tableHeader"
|
:loading="loading"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
PROFREEREPAYMENTCOND,
|
PROFREEREPAYMENTDEF
|
} from "../utils/condtionConfig";
|
import { PROFREEREPAYMENTCOLUMN } from "../utils/columnConfig";
|
import {
|
qryCondition,
|
qryCustomerPaymentTypeList
|
} from "../api/productManage.api";
|
import ProTable from "../components/ProTable.vue";
|
import CreateForms from "../components/CreateForms.vue";
|
import SearchCondition from "../components/SearchCondition.vue";
|
export default {
|
props: {},
|
data() {
|
return {
|
info: [...PROFREEREPAYMENTCOND],
|
conForm: { ...PROFREEREPAYMENTDEF },
|
tableHeader: [...PROFREEREPAYMENTCOLUMN],
|
loading: false,
|
isShowDetail: false,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
condtionValue: {},
|
records: [],
|
screenWidth: document.body.offsetWidth
|
};
|
},
|
created() {
|
// 状态：IsInUse
|
this.getCondition("status", "IsInUse");
|
},
|
mounted() {
|
window.addEventListener("resize", this.getScreenWidth);
|
this.$router.afterEach((to, from, next) => {
|
window.scrollTo(0, 0);
|
});
|
this.getCustomerPaymentTypeList();
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.getScreenWidth);
|
},
|
watch: {},
|
methods: {
|
// 表单事件回调
|
async doAction(name, item, { key, label }) {
|
if (key === "edit") {
|
this.$router.push({
|
name: "editProFreePayment",
|
query: {
|
serialno: item.serialno,
|
type: "edit"
|
}
|
});
|
}
|
if (key === "details") {
|
this.$router.push({
|
name: "proFreePaymentDetail",
|
query: {
|
serialno: item.serialno,
|
type: "edit"
|
}
|
});
|
}
|
},
|
/**
|
* 获取下拉选择项
|
*/
|
async getCondition(name, conditionName) {
|
const params = { conditionName };
|
const re = await qryCondition(params);
|
if (re.code && re.code === "00") {
|
const options = re.result;
|
this.setOrGetFormInfo(name, { options }, "settingDef");
|
}
|
},
|
// 更新表单数据或查找某项数据
|
setOrGetFormInfo(nameKey, newInfo, def) {
|
const { info } = this;
|
const index = info.findIndex(({ name }) => name === nameKey);
|
if (!isNaN(index)) {
|
this.$set(this.info, index, { ...info[index], ...newInfo });
|
}
|
},
|
async getCustomerPaymentTypeList() {
|
const { currentPage, pageSize } = this.pageInfo;
|
const {
|
paymentno,
|
paymentname,
|
status,
|
componenremark,
|
effectBeginTime,
|
effectEndTime,
|
failureBeginTime,
|
failureEndTime
|
} = this.condtionValue;
|
const loading = this.$loading({
|
lock: true,
|
text: "",
|
background: "hsla(0,0%,100%,.9)"
|
});
|
setTimeout(() => {
|
loading.close();
|
}, 1500);
|
const params = {
|
componenremark,
|
currentPage,
|
effectdate: {
|
begintime: effectBeginTime,
|
endtime: effectEndTime
|
},
|
failuredate: {
|
begintime: failureBeginTime,
|
endtime: failureEndTime
|
},
|
pageSize,
|
paymentname,
|
paymentno,
|
status
|
};
|
const listRes = await qryCustomerPaymentTypeList(params);
|
loading.close();
|
if (listRes.code && listRes.code === "00") {
|
const list =
|
listRes.result &&
|
listRes.result.records.map(item => {
|
const newitem = { ...item };
|
newitem.operationOption = [
|
{ key: "edit", label: "修改", value: true },
|
{ key: "details", label: "详情", value: true }
|
];
|
return newitem;
|
});
|
this.$set(this, "records", list);
|
this.$set(
|
this.pageInfo,
|
"total",
|
listRes.result && listRes.result.total
|
);
|
}
|
},
|
getScreenWidth() {
|
this.$set(this, "screenWidth", document.body.offsetWidth);
|
},
|
// 搜索列表
|
handleOnSeach() {
|
const conRef = this.$refs.condRef;
|
this.$set(this, "condtionValue", conRef.$refs["conform"].model);
|
this.$set(this, "pageInfo", { currentPage: 1, pageSize: 10, total: 0 });
|
this.getCustomerPaymentTypeList();
|
},
|
// 重置
|
handleOnRest(proListForm) {
|
this.$set(this, "condtionValue", {});
|
},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.getCustomerPaymentTypeList();
|
},
|
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.getCustomerPaymentTypeList();
|
},
|
handleAddPage() {
|
this.$router.push({ name: "newProFreePayment" });
|
}
|
},
|
components: {
|
SearchCondition,
|
ProTable
|
}
|
};
|
</script>
|
|
<style lang="stylus" scoped>
|
.free-payment {
|
padding: 16px 0px 0 20px;
|
& .add-button {
|
padding: 2px 0 30px 0;
|
}
|
}
|
</style>
|
