You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298 lines
8.6 KiB
298 lines
8.6 KiB
<template>
|
|
<el-row :gutter="15">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-col :span="8">
|
|
<el-form-item label="标志名称" prop="markName">
|
|
<el-input v-model="form.markName" placeholder="请输入标志名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="标识位置" prop="markLocation">
|
|
<el-input v-model="form.markLocation" placeholder="请输入标识位置" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="标识类型" prop="markType">
|
|
<el-select
|
|
v-model="form.markType"
|
|
placeholder="请选择标识类型"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="dict in markTypeOptions"
|
|
:key="dict.dictValue"
|
|
:label="dict.dictLabel"
|
|
:value="dict.dictValue"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="上传图片" prop="photo">
|
|
<!-- <el-input v-model="form.photo" placeholder="请输入上传图片" /> -->
|
|
<el-upload
|
|
class="upload-demo"
|
|
action="thinking/common/upload"
|
|
:headers="headers"
|
|
:on-preview="handleOpinionPreview"
|
|
:on-remove="(file) => handleOpinionRemove(file, 'fileList')"
|
|
:before-remove="beforeOpinionRemove"
|
|
multiple
|
|
:on-exceed="handleOpinionExceed"
|
|
:on-success="
|
|
(_, fileList) => submitOpinionUpload(fileList, 'fileList')
|
|
"
|
|
: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文件等，不超过100M
|
|
</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-button-group>
|
|
<el-button icon="el-icon-plus" @click="addFormFarther"></el-button>
|
|
<el-button
|
|
icon="el-icon-minus"
|
|
@click="delFormFarther"
|
|
v-if="!isFirst"
|
|
></el-button>
|
|
</el-button-group>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
</template>
|
|
<script>
|
|
import { getToken } from "@/utils/auth";
|
|
import { getFileStream } from "@/api/system/upload";
|
|
export default {
|
|
props: {
|
|
formName: {
|
|
default() {
|
|
return "form";
|
|
},
|
|
},
|
|
// firstForm: {
|
|
// default() {
|
|
// return {};
|
|
// },
|
|
// },
|
|
// form: {
|
|
// default() {
|
|
// return {};
|
|
// },
|
|
// },
|
|
rules: {
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
markTypeOptions: {
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
isFirst: {
|
|
default() {
|
|
return false;
|
|
},
|
|
},
|
|
addForm: {
|
|
type: Function,
|
|
default: () => {
|
|
console.log(777);
|
|
},
|
|
},
|
|
index: {},
|
|
type: {},
|
|
editItem: {},
|
|
status: {},
|
|
comForm: {},
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
valid: false,
|
|
// 请求头
|
|
headers: {
|
|
shuili: "water " + getToken(),
|
|
},
|
|
fileList: [],
|
|
};
|
|
},
|
|
created() {
|
|
// 判断打开的弹出框，是新增还是编辑
|
|
if (this.status) {
|
|
this.form = this.editItem;
|
|
|
|
this.form.type = this.type;
|
|
this.form.embankmentName = this.comForm.embankmentName;
|
|
this.form.embankmentCode = this.comForm.embankmentCode;
|
|
this.form.adcd = this.comForm.adcd;
|
|
if (this.form.photo) {
|
|
this.fileList = JSON.parse(this.form.photo);
|
|
}
|
|
} else {
|
|
this.form = {
|
|
id: null,
|
|
adcd: null,
|
|
embankmentCode: null,
|
|
markName: null,
|
|
embankmentName: null,
|
|
markLocation: null,
|
|
type: null,
|
|
markType: null,
|
|
photo: null,
|
|
markCode: null,
|
|
proNo: null,
|
|
proCode: null,
|
|
createUid: null,
|
|
updateUid: null,
|
|
createTime: null,
|
|
updateTime: null,
|
|
owerDept: null,
|
|
remark: null,
|
|
};
|
|
this.form.type = this.type;
|
|
// console.log(7777777777, this.comForm);
|
|
this.form.embankmentName = this.comForm.embankmentName;
|
|
this.form.embankmentCode = this.comForm.embankmentCode;
|
|
this.form.adcd = this.comForm.adcd;
|
|
}
|
|
console.log("this.form in components", this.form);
|
|
// 当时是第一个表单时，form有父组件传入
|
|
// if (this.isFirst) {
|
|
// this.form = this.firstForm;
|
|
// console.log(" this.firstForm;", this.firstForm);
|
|
// }
|
|
// console.log("isFirst", this.isFirst);
|
|
// console.log("markTypeOptions", this.markTypeOptions);
|
|
},
|
|
watch: {
|
|
editItem: {
|
|
deep: true,
|
|
handler(newVal, oldVal) {
|
|
// 表单内点击减号时，重新赋值刷新显示
|
|
this.form = newVal;
|
|
// console.log("新的name", newVal);
|
|
},
|
|
},
|
|
"comForm.embankmentName": {
|
|
// deep: true, //深度监听设置为 true
|
|
handler(newVal, oldVal) {
|
|
// console.log("新的name", newVal);
|
|
// console.log("旧的name", oldVal);
|
|
this.form.embankmentName = newVal;
|
|
// this.form.embankmentCode = newVal;
|
|
},
|
|
},
|
|
"comForm.embankmentCode": {
|
|
// deep: true, //深度监听设置为 true
|
|
handler(newVal, oldVal) {
|
|
// console.log("新的code", newVal);
|
|
// console.log("旧的code", oldVal);
|
|
// this.form.embankmentName = newVal;
|
|
this.form.embankmentCode = newVal;
|
|
},
|
|
},
|
|
"comForm.adcd": {
|
|
// deep: true, //深度监听设置为 true
|
|
handler(newVal, oldVal) {
|
|
// console.log("新的code", newVal);
|
|
// console.log("旧的code", oldVal);
|
|
// this.form.sluiceName = newVal;
|
|
this.form.adcd = newVal;
|
|
},
|
|
},
|
|
// status: function (n, o) {
|
|
// if (!n) {
|
|
// this.form = {
|
|
// id: null,
|
|
// adcd: null,
|
|
// embankmentCode: null,
|
|
// markName: null,
|
|
// suliceName: null,
|
|
// markLocation: null,
|
|
// type: "0",
|
|
// markType: null,
|
|
// photo: null,
|
|
// markCode: null,
|
|
// proNo: null,
|
|
// proCode: null,
|
|
// createUid: null,
|
|
// updateUid: null,
|
|
// createTime: null,
|
|
// updateTime: null,
|
|
// owerDept: null,
|
|
// remark: null,
|
|
// };
|
|
// } else {
|
|
// console.log(this.type, this.editItem);
|
|
// this.form = this.editItem;
|
|
// }
|
|
// },
|
|
},
|
|
methods: {
|
|
addFormFarther() {
|
|
this.addForm(this.index, this.type, this.formName);
|
|
},
|
|
delFormFarther() {
|
|
this.$emit("delForm", this.form.id, this.type, this.index);
|
|
},
|
|
validateForm() {
|
|
this.$refs.form.validate((valid) => (this.valid = valid));
|
|
},
|
|
// 上传意见附件
|
|
submitOpinionUpload(fileList, name) {
|
|
console.log(name, fileList);
|
|
this[name].push({
|
|
name: fileList.name,
|
|
fileName: fileList.response.fileName,
|
|
url: fileList.response.url,
|
|
uid: fileList.uid,
|
|
});
|
|
console.log(name, this[name]);
|
|
},
|
|
handleOpinionRemove(file, name) {
|
|
// console.log(file, fileList1);
|
|
let index = this[name].findIndex((item) => item.uid === file.uid);
|
|
// 删除文件
|
|
this[name].splice(index, 1);
|
|
},
|
|
|
|
// 点击预览的文件进行下载
|
|
handleOpinionPreview(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对象
|
|
});
|
|
},
|
|
handleOpinionExceed(files, fileList) {
|
|
this.$message.warning(
|
|
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
files.length + fileList.length
|
|
} 个文件`
|
|
);
|
|
},
|
|
beforeOpinionRemove(file, fileList) {
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|