hxh
10 months ago
46 changed files with 1446 additions and 333 deletions
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<div> |
|||
<el-select |
|||
v-if="isMultiple" |
|||
v-model="form.dikeCodes" |
|||
placeholder="请选择堤防名称" |
|||
style="width: 100%" |
|||
v-scroll="selectSearch" |
|||
filterable |
|||
clearable |
|||
remote |
|||
reserve-keyword |
|||
:remote-method="remoteMethod" |
|||
:loading="loading" |
|||
@change="handleChange" |
|||
multiple |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
@click.native="chooseDike(dict)" |
|||
></el-option> |
|||
</el-select> |
|||
<el-select |
|||
v-else |
|||
v-model="form.dikeCode" |
|||
placeholder="请选择堤防名称" |
|||
style="width: 100%" |
|||
v-scroll="selectSearch" |
|||
filterable |
|||
:filter-method="aaaa" |
|||
clearable |
|||
remote |
|||
reserve-keyword |
|||
:remote-method="remoteMethod" |
|||
:loading="loading" |
|||
@change="handleChange" |
|||
@blur="handleChange" |
|||
> |
|||
<el-option |
|||
v-for="dict in dikeNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.dikeName" |
|||
:value="dict.dikeCode" |
|||
@click.native="chooseDike(dict)" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { listJbxx, getJbxx } from "@/api/yg/dike/jbxx"; |
|||
export default { |
|||
props: ["form", "isMultiple"], |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
dikeNameOptions: [], |
|||
// 堤防查询参数 |
|||
dikeNameQueryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
dikeName: null, |
|||
dikeCode: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
if (this.form.dikeName) { |
|||
this.dikeNameQueryParams.data.dikeName = this.form.dikeName; |
|||
} |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
console.log(111, res); |
|||
this.dikeNameOptions = res.records; |
|||
}); |
|||
}, |
|||
methods: { |
|||
aaaa(value) { |
|||
console.log(999); |
|||
return true; |
|||
}, |
|||
reset() { |
|||
this.dikeNameQueryParams = { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
dikeName: null, |
|||
dikeCode: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}; |
|||
}, |
|||
handleChange(keyWork) { |
|||
// console.log(1111, this.form); |
|||
// if (!keyWork) { |
|||
this.reset(); |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
this.dikeNameOptions = res.records; |
|||
}); |
|||
// }else{ |
|||
|
|||
// } |
|||
}, |
|||
remoteMethod(query) { |
|||
this.selectLoading = true; |
|||
if (query !== "") { |
|||
// console.log(444, query); |
|||
this.dikeNameQueryParams.data.dikeName = query; |
|||
} else { |
|||
this.reset(); |
|||
} |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
this.dikeNameOptions = res.records; |
|||
this.selectLoading = false; |
|||
}); |
|||
}, |
|||
selectSearch() { |
|||
this.dikeNameQueryParams.pageNum += 1; |
|||
listJbxx(this.dikeNameQueryParams).then((res) => { |
|||
// console.log(111, res); |
|||
this.dikeNameOptions = [...this.dikeNameOptions, ...res.records]; |
|||
// console.log(111, this.dikeNameOptions); |
|||
}); |
|||
}, |
|||
chooseDike(item) { |
|||
this.form.dikeName = item.dikeName; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<div> |
|||
<el-select |
|||
v-if="isMultiple" |
|||
v-model="form.wagaCodes" |
|||
placeholder="请选择水闸名称" |
|||
style="width: 100%" |
|||
v-scroll="selectSearch" |
|||
filterable |
|||
clearable |
|||
remote |
|||
reserve-keyword |
|||
:remote-method="remoteMethod" |
|||
:loading="loading" |
|||
@change="handleChange" |
|||
multiple |
|||
> |
|||
<el-option |
|||
v-for="dict in wagaNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.wagaName" |
|||
:value="dict.wagaCode" |
|||
@click.native="chooseDike(dict)" |
|||
></el-option> |
|||
</el-select> |
|||
<el-select |
|||
v-else |
|||
v-model="form.wagaCode" |
|||
placeholder="请选择水闸名称" |
|||
style="width: 100%" |
|||
v-scroll="selectSearch" |
|||
filterable |
|||
clearable |
|||
remote |
|||
reserve-keyword |
|||
:remote-method="remoteMethod" |
|||
:loading="loading" |
|||
@change="handleChange" |
|||
> |
|||
<el-option |
|||
v-for="dict in wagaNameOptions" |
|||
:key="dict.id" |
|||
:label="dict.wagaName" |
|||
:value="dict.wagaCode" |
|||
@click.native="chooseDike(dict)" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { listJbxx, getJbxx } from "@/api/yg/jbxx"; |
|||
export default { |
|||
props: ["form", "isMultiple"], |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
wagaNameOptions: [], |
|||
// 水闸查询参数 |
|||
wagaNameQueryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
wagaName: null, |
|||
wagaCode: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
if (this.form.wagaName) { |
|||
this.wagaNameQueryParams.data.wagaName = this.form.wagaName; |
|||
} |
|||
listJbxx(this.wagaNameQueryParams) |
|||
.then((res) => { |
|||
// console.log(111, res); |
|||
this.wagaNameOptions = res.records; |
|||
}) |
|||
.then(() => { |
|||
// if (this.form.wagaName) { |
|||
// this.wagaNameQueryParams.data.wagaName = this.form.wagaName; |
|||
// listJbxx(this.wagaNameQueryParams).then((res) => { |
|||
// let bool = this.wagaNameOptions.some( |
|||
// (item) => item.wagaCode === res.records[0]?.wagaCode |
|||
// ); |
|||
// this.wagaNameOptions = [ |
|||
// ...(bool ? [] : res.records), |
|||
// ...this.wagaNameOptions, |
|||
// ]; |
|||
// this.wagaNameQueryParams.data.wagaName = null; |
|||
// }); |
|||
// } |
|||
}); |
|||
}, |
|||
methods: { |
|||
reset() { |
|||
this.wagaNameQueryParams = { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
wagaName: null, |
|||
wagaCode: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}; |
|||
}, |
|||
handleChange(keyWork) { |
|||
// if (!keyWork) { |
|||
this.reset(); |
|||
listJbxx(this.wagaNameQueryParams).then((res) => { |
|||
this.wagaNameOptions = res.records; |
|||
}); |
|||
// }/ |
|||
}, |
|||
remoteMethod(query) { |
|||
this.selectLoading = true; |
|||
if (query !== "") { |
|||
// console.log(444, query); |
|||
this.wagaNameQueryParams.data.wagaName = query; |
|||
} else { |
|||
this.reset(); |
|||
} |
|||
listJbxx(this.wagaNameQueryParams).then((res) => { |
|||
this.wagaNameOptions = res.records; |
|||
this.selectLoading = false; |
|||
}); |
|||
}, |
|||
selectSearch() { |
|||
this.wagaNameQueryParams.pageNum += 1; |
|||
listJbxx(this.wagaNameQueryParams).then((res) => { |
|||
// console.log(111, res); |
|||
this.wagaNameOptions = [...this.wagaNameOptions, ...res.records]; |
|||
// console.log(111, this.wagaNameOptions); |
|||
}); |
|||
}, |
|||
chooseDike(item) { |
|||
this.form.wagaName = item.wagaName; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<el-upload |
|||
class="upload-demo" |
|||
action="thinking/common/upload" |
|||
:headers="headers" |
|||
:before-upload="(file) => $fileBeforeUpload(file, 'fileList')" |
|||
:on-preview="handlePreview" |
|||
:on-remove="handleRemove" |
|||
:before-remove="beforeRemove" |
|||
multiple |
|||
:on-exceed="handleExceed" |
|||
:on-success="submitUpload" |
|||
:file-list="fileList" |
|||
> |
|||
<el-button size="small" type="primary" plain> |
|||
<i class="el-icon-upload el-icon--right"></i> |
|||
点击上传 |
|||
</el-button> |
|||
<div slot="tip" class="el-upload__tip"> |
|||
支持jpg/png/pdf/word/excel文件等，不超过200M |
|||
</div> |
|||
</el-upload> |
|||
</template> |
|||
<script> |
|||
import { getToken } from "@/utils/auth"; |
|||
import { getFileStream } from "@/api/system/upload"; |
|||
export default { |
|||
props: { |
|||
fileList: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
headers: { |
|||
shuili: "water " + getToken(), |
|||
}, |
|||
// fileList:[] |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 上传意见附件 |
|||
submitUpload(_, file) { |
|||
console.log(file); |
|||
this.fileList.push({ |
|||
name: file.name, |
|||
fileName: file.response.fileName, |
|||
url: file.response.url, |
|||
uid: file.uid, |
|||
}); |
|||
console.log("this.fileList", this.fileList); |
|||
}, |
|||
handleRemove(file) { |
|||
// console.log(file, fileList1); |
|||
let index = this.fileList.findIndex((item) => item.uid === file.uid); |
|||
// 删除文件 |
|||
this.fileList.splice(index, 1); |
|||
}, |
|||
|
|||
// 点击预览的文件进行下载 |
|||
handlePreview(file) { |
|||
// console.log(file); |
|||
getFileStream({ fileName: file.fileName }).then((res) => { |
|||
const blob = new Blob([res], { |
|||
// type类型后端返回来的数据中会有，根据自己实际进行修改 |
|||
// 表格下载为 application/xlsx，压缩包为 application/zip等， |
|||
type: "application/xlsx", |
|||
}); //excel,pdf等 |
|||
const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象 |
|||
const a = document.createElement("a"); //创建a标签 |
|||
a.style.display = "none"; |
|||
a.href = href; // 指定下载链接 |
|||
a.download = file.name; //指定下载文件名 |
|||
a.click(); //触发下载 |
|||
URL.revokeObjectURL(a.href); //释放URL对象 |
|||
}); |
|||
}, |
|||
handleExceed(files, fileList) { |
|||
this.$message.warning( |
|||
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${ |
|||
files.length + fileList.length |
|||
} 个文件` |
|||
); |
|||
}, |
|||
beforeRemove(file, fileList) { |
|||
return this.$confirm(`确定移除 ${file.name}？`); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,14 @@ |
|||
export default { |
|||
scroll: { |
|||
bind (el, binding) { |
|||
const SELECTWRAP_DOM=el.querySelector(".el-select-dropdown .el-select-dropdown__wrap") |
|||
SELECTWRAP_DOM.addEventListener('scroll', function () { |
|||
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight |
|||
if (CONDITION) { |
|||
binding.value() |
|||
} |
|||
|
|||
}) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
import { getFileStream } from "@/api/system/upload"; |
|||
|
|||
export function fileBeforeUpload (file, fileListName) { |
|||
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1); |
|||
|
|||
const whiteList = ["jpg", "jpeg", "png", "doc", "docx", "xls", "xlsx", "ppt", "pptx","bmp", "gif", "html", "htm", "txt", "rar", "zip", "gz", "bz2", "pdf"]; |
|||
|
|||
if (whiteList.indexOf(fileSuffix) === -1) { |
|||
this.msgError("上传文件只能是 jpg, jpeg, png, doc, docx, xls, xlsx, ppt, pptx,bmp, gif, html, htm, txt, rar, zip, gz, bz2, pdf]格式", "error"); |
|||
// return false;
|
|||
this[fileListName] = this[fileListName].slice(0, this[fileListName].length); |
|||
} |
|||
|
|||
const isLt2M = file.size / 1024 / 1024 <200.01; |
|||
|
|||
if (!isLt2M) { |
|||
this.msgError("上传文件大小不能超过 200MB", "error"); |
|||
this[fileListName] = this[fileListName].slice(0, this[fileListName].length); |
|||
// return false;
|
|||
} |
|||
} |
|||
|
|||
export function myDownLoadFile(file) { |
|||
getFileStream({ fileName: file.fileName }).then((res) => { |
|||
const blob = new Blob([res], { |
|||
// type类型后端返回来的数据中会有，根据自己实际进行修改
|
|||
// 表格下载为 application/xlsx，压缩包为 application/zip等，
|
|||
type: "application/xlsx", |
|||
}); //excel,pdf等
|
|||
const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
|
|||
const a = document.createElement("a"); //创建a标签
|
|||
a.style.display = "none"; |
|||
a.href = href; // 指定下载链接
|
|||
a.download = file.name; //指定下载文件名
|
|||
a.click(); //触发下载
|
|||
URL.revokeObjectURL(a.href); //释放URL对象
|
|||
}); |
|||
} |
|||
Loading…
Reference in new issue