<template>
|
<div class="image-list-main">
|
<SearchCondition
|
:info="info"
|
ref="condRef"
|
:conForm="conForm"
|
:buttonsList="[1, 2, 3]"
|
:isShowDetail="isShowDetail"
|
:screenWidth="screenWidth"
|
@handleOnSeach="handleOnSeach"
|
@handleOnRest="handleOnRest"
|
@handleClick="isShowDetail = !isShowDetail"
|
/>
|
<ProTable
|
ref="tableRef"
|
:pageInfo="pageInfo"
|
:isAutoIndex="isView"
|
:isMultipleSelect="!isView"
|
:reserveSelection="!isView"
|
rowKeyName="docno"
|
:list="records"
|
:header="tableHeader"
|
:loading="loading"
|
@handleSelect="handleSelect"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSelectionChange="handleSelectionChange"
|
@handleSizeChange="handleSizeChange"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import { IMAGELISTCOLUMN } from "../../config/column.config";
|
import { IMAGELISTCONDDEF, IMAGELISTCOND } from "../../config/condtion.config";
|
import ProTable from "../../../components/ProTable";
|
import SearchCondition from "../../../components/SearchCondition";
|
import { qryConfigLibrary, saveImageConfig } from "@/http/api";
|
export default {
|
props: {
|
isView: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
info: [...IMAGELISTCOND],
|
records: [], // 影像资料table数据
|
allData: [],
|
isShowBorder: true,
|
loading: false,
|
isShowDetail: false,
|
screenWidth: document.body.offsetWidth,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
selectedData: [],
|
condtionValue: {}, // 表单value集合
|
restFormItems: [...IMAGELISTCOND],
|
tableHeader: [...IMAGELISTCOLUMN],
|
conForm: { ...IMAGELISTCONDDEF }
|
};
|
},
|
computed: {},
|
created() {},
|
mounted() {
|
this.getConfigLibrary();
|
},
|
watch: {},
|
methods: {
|
// 获取列表
|
async getConfigLibrary() {
|
const { dirno } = this.$parent._data;
|
if (!dirno) {
|
return false;
|
}
|
const params = {
|
dirno
|
};
|
const listRes = await qryConfigLibrary(params);
|
if (listRes && listRes.code === "00") {
|
const checkedData = listRes.result.filter(item => item.checked);
|
const noCheacdData = listRes.result.filter(item => !item.checked);
|
const allList = [...checkedData, ...noCheacdData];
|
if (this.isView) {
|
this.allData = checkedData.map(row => {
|
return { ...row, checked: false };
|
});
|
this.records = checkedData
|
.map(row => {
|
return { ...row, checked: false };
|
})
|
.slice(0, 10);
|
this.$set(this.pageInfo, "total", checkedData && checkedData.length);
|
} else {
|
this.allData = allList;
|
this.records = allList.slice(0, 10);
|
this.$set(
|
this.pageInfo,
|
"total",
|
listRes.result && listRes.result.length
|
);
|
}
|
const tableRefs = this.$refs.tableRef;
|
tableRefs.$refs["proTable"].clearSelection();
|
if (checkedData && checkedData.length > 0) {
|
checkedData.forEach(row => {
|
tableRefs.$refs["proTable"].toggleRowSelection(row);
|
});
|
} else {
|
tableRefs.$refs["proTable"].clearSelection();
|
}
|
}
|
},
|
// 保存维护数据
|
async saveImageConfig() {
|
const { dirno } = this.$parent._data;
|
const docnos = this.selectedData.map(({ docno }) => docno);
|
if (!dirno || !docnos || docnos.length < 1) {
|
return false;
|
}
|
const params = {
|
dirno,
|
docnos
|
};
|
const saveRes = await saveImageConfig(params);
|
if (saveRes && saveRes.code === "00") {
|
// this.$message.success("保存成功");
|
// this.$router.go(-1);
|
}
|
},
|
handleSelectionChange(val) {
|
this.selectedData = val;
|
},
|
handleSelect(row) {
|
const newCheckData = [...this.allData].map(item => {
|
const newItem = { ...item };
|
if (newItem.docno === row.docno) {
|
newItem.checked = !newItem.checked;
|
}
|
return newItem;
|
});
|
this.allData = newCheckData;
|
this.filterTable();
|
},
|
filterTable(filters) {
|
const { pageSize, currentPage } = this.pageInfo;
|
const { allData } = this;
|
if (!filters) {
|
this.records = allData.slice(
|
(currentPage - 1) * pageSize,
|
currentPage * pageSize
|
);
|
}
|
},
|
// 搜索列表
|
handleOnSeach() {
|
const conRef = this.$refs.condRef;
|
this.$set(this, "condtionValue", conRef.$refs["conform"].model);
|
// conRef.$refs["conform"].model 用于搜索的表单数据
|
console.log(conRef.$refs["conform"].model);
|
const { docno, docname, remark } = conRef.$refs["conform"].model;
|
if (!docno && !docname && !remark) {
|
this.getConfigLibrary()
|
} else {
|
const searchParams = {
|
docno,
|
docname,
|
remark
|
};
|
this.handleSearchTable(searchParams);
|
}
|
},
|
handleSearchTable(searchParams) {
|
const { docno = "", docname = "", remark = "" } = searchParams;
|
let { allData } = this;
|
if (docno && !docname && !remark) {
|
allData = allData.filter(
|
item => item.docno === docno || item.docno.indexOf(docno) !== -1
|
);
|
}
|
if (!docno && docname && !remark) {
|
allData = allData.filter(
|
item =>
|
item.docname === docname || item.docname.indexOf(docname) !== -1
|
);
|
}
|
if (!docno && !docname && remark) {
|
allData = allData.filter(
|
item => item.remark === remark || item.remark.indexOf(remark) !== -1
|
);
|
}
|
if (docno && docname && !remark) {
|
allData = allData.filter(
|
item =>
|
(item.docno === docno || item.docno.indexOf(docno) !== -1) &&
|
(item.docname === docname || item.docname.indexOf(docname) !== -1)
|
);
|
}
|
if (docno && !docname && remark) {
|
allData = allData.filter(
|
item =>
|
(item.docno === docno || item.docno.indexOf(docno) !== -1) &&
|
(item.remark === remark || item.remark.indexOf(remark) !== -1)
|
);
|
}
|
if (!docno && docname && remark) {
|
allData = allData.filter(
|
item =>
|
(item.docname === docname || item.docname.indexOf(docname) !== -1) &&
|
(item.remark === remark || item.remark.indexOf(remark) !== -1)
|
);
|
}
|
if (docno && docname && remark) {
|
allData = allData.filter(
|
item =>
|
(item.docname === docname || item.docname.indexOf(docname) !== -1) &&
|
(item.remark === remark || item.remark.indexOf(remark) !== -1) &&
|
(item.docno === docno || item.docno.indexOf(docno) !== -1)
|
);
|
}
|
this.$set(
|
this.pageInfo,
|
"total",
|
allData.length
|
);
|
this.records = allData.slice(0,10)
|
},
|
// 重置
|
handleOnRest() {
|
this.$set(this, "condtionValue", {});
|
},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.filterTable();
|
},
|
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.filterTable();
|
}
|
},
|
components: { ProTable, SearchCondition }
|
};
|
</script>
|
|
<style lang="less">
|
.image-list-main {
|
background: #fff;
|
padding: 20px;
|
}
|
</style>
|
