<template>
|
<div class="school-main">
|
<TableList
|
ref="commontable"
|
:condtionConfig="condtionConfig"
|
:columnConfig="columnConfig"
|
:condformdefConfig="condformdefConfig"
|
:operateBtns="operateBtns"
|
:userDefined="true"
|
:isAutoIndex="false"
|
:isMultipleSelect="true"
|
:buttonsArr="buttonsArr"
|
rowKeyName="serialNo"
|
@handleSelectionChange="handleSelectionChange"
|
@handleBtnClick="handleBtnClick"
|
listApiName="qrySchoolDistrictHousingList"
|
delApiName="deleteSchoolDistrictHousingList"
|
deleteKey="serialNo"
|
:delcontentKey="[
|
'province',
|
'city',
|
'county',
|
'buildingName',
|
'buildingNo'
|
]"
|
/>
|
<el-dialog
|
title="批量导入"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
width="450"
|
center
|
custom-class="school_dialog_footer_set"
|
>
|
<el-upload
|
class="upload-main"
|
drag
|
action=""
|
:headers="uploadHeader"
|
:http-request="handleUpload"
|
:show-file-list="true"
|
>
|
<i class="el-icon-upload pl_import"></i>
|
<div class="el-upload__text">上传本地文件</div>
|
<div class="el-upload__tip" slot="tip">
|
<a @click="downloadFile">学区房管理导入模板.xls</a>
|
</div>
|
</el-upload>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button @click="dialogVisible = false" type="primary"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="批量删除确认"
|
:visible.sync="delDialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
width="450"
|
center
|
custom-class="school_dialog_footer_set del_dialog"
|
>
|
<div style="text-align: center">
|
请确认是否删除勾选的学区房
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="delDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="deleteListItem">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters, mapActions } from "vuex";
|
import TableList from "../../components/TableList.vue";
|
import {
|
SCHOOLHOUSELISTCOND,
|
SCHOOLHOUSELISTCONDDEF
|
} from "../config/condtion.config";
|
import { SCHOOLHOUSELISTCOLUMN } from "../config/column.config";
|
import {
|
downloadUploadFile,
|
schoolDistrictHousingUploadExcel,
|
batchDeleteSchoolDistrictHousingList
|
} from "@/http/api";
|
import { Message } from "element-ui";
|
export default {
|
props: {},
|
provide() {
|
return {
|
getconfigInfo: this.getconfigInfo,
|
getconfigForm: () => {
|
return null;
|
}
|
};
|
},
|
data() {
|
return {
|
condtionConfig: [...SCHOOLHOUSELISTCOND],
|
columnConfig: [...SCHOOLHOUSELISTCOLUMN],
|
condformdefConfig: { ...SCHOOLHOUSELISTCONDDEF },
|
optionsArr: ["IsDelete", "cities"],
|
buttonsArr: [
|
{ type: "import", value: "批量导入", icon: "el-icon-upload" },
|
{ type: "delete", value: "批量删除", icon: "el-icon-delete-solid" }
|
],
|
operateBtns: [{ label: "删除", type: "DELETE", value: true }],
|
selecteData: [],
|
optionsData: [],
|
dialogVisible: false,
|
delDialogVisible: false,
|
uploadHeader: {
|
"Content-Type": "multipart/form-data; boundary=ReaquestHeader"
|
}
|
};
|
},
|
watch: {
|
optionsMap: {
|
handler(options) {
|
this.optionsData = options;
|
this.getconfigInfo(options);
|
},
|
deep: true
|
}
|
},
|
computed: {
|
// 获取state值
|
...mapState("rlc", {
|
optionsMap: state => state.OPTIONSMAP
|
}),
|
// 通过getters获取值
|
...mapGetters("rlc", ["getOptionsMap"])
|
},
|
async created() {
|
this.getOptionsData(this.optionsArr);
|
this.getUserInfo();
|
},
|
mounted() {},
|
methods: {
|
...mapActions("rlc", [
|
// 将 `this.setOptionsMap()` 映射为 `this.$store.dispatch('setOptionsMap')`
|
"getOptionsData",
|
"getUserInfo"
|
]),
|
getconfigInfo(options = this.optionsData) {
|
const items = {
|
city: "cities",
|
isDelete: "IsDelete"
|
};
|
this.condtionConfig = [...SCHOOLHOUSELISTCOND].map(form => {
|
const newForm = { ...form };
|
if (newForm.type === "select") {
|
newForm.options = options[items[newForm.name]];
|
}
|
return newForm;
|
});
|
},
|
operateHandleClick() {
|
this.$router.push({ name: "addImageDataConfig" });
|
},
|
handleBtnClick(type) {
|
if (type === "import") {
|
this.dialogVisible = true;
|
}
|
if (type === "delete") {
|
const { selecteData } = this;
|
if (selecteData.length < 1) {
|
this.$message.warning("请选择需要删除的楼盘！");
|
return false;
|
}
|
this.delDialogVisible = true;
|
}
|
},
|
async deleteListItem() {
|
const { selecteData } = this;
|
const deleteSelectRes = await batchDeleteSchoolDistrictHousingList({
|
qrySchoolDistrictHousingRspList: selecteData
|
});
|
if (deleteSelectRes && deleteSelectRes.code === "00") {
|
this.$refs.commontable.getTableList();
|
this.delDialogVisible = false;
|
this.$message.success("删除成功");
|
}
|
},
|
handleSelectionChange(val) {
|
this.selecteData = val;
|
},
|
async handleUpload(file) {
|
if (file.file) {
|
const formData = new FormData();
|
formData.append("file", file.file);
|
await schoolDistrictHousingUploadExcel(formData).then(res => {
|
if (res.code === "00") {
|
this.$message.success("导入成功");
|
// this.dialogVisible = false;
|
this.$refs.commontable.getTableList();
|
}
|
});
|
}
|
},
|
handleUploadFile() {},
|
async downloadFile() {
|
await downloadUploadFile({ fileName: "批量导入楼盘信息模板" });
|
Message.closeAll();
|
}
|
},
|
components: { TableList }
|
};
|
</script>
|
|
<style lang="less">
|
.school-main {
|
& .pl_import {
|
font-size: 67px;
|
color: #409eff;
|
}
|
& .el-upload__tip {
|
color: #409eff;
|
text-align: center;
|
& a {
|
cursor: pointer;
|
}
|
}
|
& .school_dialog_footer_set {
|
width: 400px;
|
& .el-dialog__footer {
|
& .dialog-footer {
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
& .el-button--primary {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
background: #0081f0;
|
border-color: #0081f0;
|
border-radius: 4px;
|
margin-left: 40px;
|
}
|
}
|
}
|
}
|
& .del_dialog {
|
width: 450px;
|
}
|
}
|
</style>
|
