From f18059d2968f7851e14444457d06323659820a78 Mon Sep 17 00:00:00 2001 From: linwenling <3256558519@qq.com> Date: 星期二, 25 四月 2023 17:52:02 +0800 Subject: [PATCH] 新增家庭收支台账 --- ruoyi-ui/src/views/note/propertyInfo.vue | 404 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 404 insertions(+), 0 deletions(-) diff --git a/ruoyi-ui/src/views/note/propertyInfo.vue b/ruoyi-ui/src/views/note/propertyInfo.vue new file mode 100644 index 0000000..3f4b563 --- /dev/null +++ b/ruoyi-ui/src/views/note/propertyInfo.vue @@ -0,0 +1,404 @@ +<template> + <div class="app-container"> + <div class="form-header mt"> + <h4 class="dt h4">璧勪骇璇︾粏淇℃伅 </h4> + <el-button type="primary" class="pt" icon="el-icon-edit" @click="handleEdit()" :disabled="btn">缂栬緫</el-button> + </div> + + <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"> + <el-form-item label="id" prop="id"> + <el-input v-model="formData.id" placeholder="璇疯緭鍏d" :maxlength="11" show-word-limit :disabled="true" + clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input> + </el-form-item> + <el-form-item label="绫诲埆" prop="type"> + <el-select v-model="formData.type" placeholder="璇烽�夋嫨绫诲埆" clearable :style="{width: '100%'}" :disabled="dsb" > + <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" + :disabled="item.disabled"></el-option> + </el-select> + </el-form-item> + <el-form-item label="鏍囬" prop="title"> + <el-input v-model="formData.title" placeholder="璇疯緭鍏ユ爣棰�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + <el-form-item label="瀛樺偍鍦板潃" prop="location"> + <el-input v-model="formData.location" placeholder="璇疯緭鍏ュ瓨鍌ㄥ湴鍧�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="鎸佹湁浜�" prop="holder"> + <el-input v-model="formData.holder" placeholder="璇疯緭鍏ユ寔鏈変汉" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="鍏蜂綋浣嶇疆" prop="address"> + <el-input v-model="formData.address" placeholder="璇疯緭鍏ュ叿浣撲綅缃�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="澶囨敞" prop="remark"> + <el-input v-model="formData.remark" placeholder="璇疯緭鍏ュ娉�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + + <h4 class="form-header">鐩稿叧鍥剧墖 </h4> + <el-upload + action="#" + list-type="picture-card" + multiple + :http-request="requestUpload" + :file-list="fileList" + > + <i slot="default" class="el-icon-plus"></i> + <div slot="file" slot-scope="{file}"> + <img + class="el-upload-list__item-thumbnail" + :src="file.url" + alt="" + style="width: 147px; height: 147px" + fit="cover" + :preview-src-list="[file.url]" + > + <span class="el-upload-list__item-actions"> + <span + class="el-upload-list__item-preview" + @click="handlePictureCardPreview(file)" + > + <i class="el-icon-zoom-in"></i> + </span> + <span + v-if="!disabled" + class="el-upload-list__item-delete" + @click="handleDownload(file.url)" + > + <i class="el-icon-download"></i> + </span> + <span + v-if="!disabled" + class="el-upload-list__item-delete" + @click="handleRemove(file)" + > + <i class="el-icon-delete"></i> + </span> + </span> + + + </div> + </el-upload> + + <h4 class="form-header">鍏朵粬闄勪欢 </h4> + <el-upload + action="" + :file-list="fileListOther" + class="upload-demo" + multiple + list-type="picture-card" + :on-preview="handleFileCardPreview" + :on-remove="handleRemove" + :http-request="requestUpload" + :show-file-list="true" + > + + <i slot="default" class="el-icon-plus"></i> + <div slot="file" slot-scope="{file}"> + <img + class="el-upload-list__item-thumbnail" + src="../../assets/401_images/401.gif" + alt="" + style="width: 147px; height: 147px" + fit="cover" + > + <span class="el-upload-list__item-actions"> + <span + class="el-upload-list__item-preview" + @click="handleFileCardPreview(file)" + > + <i class="el-icon-zoom-in"></i> + </span> + <span + v-if="!disabled" + @click="handleRemove(file)" + class="el-upload-list__item-delete" + + > + <i class="el-icon-download"></i> + </span> + <span + v-if="!disabled" + class="el-upload-list__item-delete" + @click="handleRemove(file)" + > + <i class="el-icon-delete"></i> + </span> + </span> + + + </div> + + + </el-upload> + + <el-form-item size="large"> + <el-button type="primary" @click="submitForm" :disabled="dsb">淇敼</el-button> + </el-form-item> + </el-form> + + <el-dialog :visible.sync="dialogVisible"> + <img w-full :src="dialogImageUrl" alt="Preview Image" /> + </el-dialog> + </div> +</template> +<script> +import {getPropertyInfo, updateProperty, uploadPic, download, getCategory} from "@/api/note/index"; +import {addRole, updateRole} from "@/api/system/role"; +import {blobValidate} from "@/utils/ruoyi"; +import errorCode from "@/utils/errorCode"; +import {Message} from "element-ui"; + +export default { + components: {}, + props: [], + data() { + return { + cdi:"璧勪骇璇︾粏淇℃伅", + udi:"璧勪骇淇℃伅淇敼", + fot:[".jpg",".jif",".png"], + fileList:[ + ], + fileListOther:[ + + ], + dsb:true, + btn:false, + formData: { + id: undefined, + type: undefined, + title: undefined, + location: undefined, + holder: undefined, + address: undefined, + remark: undefined, + url: undefined, + }, + desurl:'', + dialogImageUrl: '', + dialogVisible: false, + disabled: false, + rules: { + id: [{ + required: true, + message: '璇疯緭鍏d', + trigger: 'blur' + }], + type: [{ + required: true, + message: '璇烽�夋嫨绫诲埆', + trigger: 'change' + }], + title: [{ + required: true, + message: '璇疯緭鍏ユ爣棰�', + trigger: 'blur' + }], + location: [{ + required: true, + message: '璇疯緭鍏ュ瓨鍌ㄥ湴鍧�', + trigger: 'blur' + }], + holder: [{ + required: true, + message: '璇疯緭鍏ユ寔鏈変汉', + trigger: 'blur' + }], + address: [{ + required: true, + message: '璇疯緭鍏ュ叿浣撲綅缃�', + trigger: 'blur' + }], + remark: [{ + required: true, + message: '璇疯緭鍏ュ娉�', + trigger: 'blur' + }], + + }, + typeOptions: [], + } + }, + computed: {}, + watch: {}, + created() { + const id = this.$route.params && this.$route.params.id; + let jd; + if(this.$route.query.detail!=undefined) + { + jd = this.$route.query.detail + this.btn= jd + this.dsb = !jd + document.title = "淇敼璧勪骇璇︾粏淇℃伅"; + this.$route.meta.title = "淇敼璧勪骇璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� + } + else{ + document.title = "鏌ョ湅璧勪骇璇︾粏淇℃伅"; + this.$route.meta.title = "鏌ョ湅璧勪骇璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� + } + + let _this = this + if (id) { + this.loading = true; + getPropertyInfo(id).then((response) => { + this.formData = response.data; + let paths = response.data.url.split(","); + for(let i = 0; i < paths.length; i++) + { + if(paths[i]!="") { + + let pth = paths[i].substr(paths[i].length - 4, paths[i].length) + + if (_this.fot.includes(pth) === true) + _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i]}) + else { + // alert(paths[i]) + let nms = paths[i].split("\/") + let nm = nms[nms.length - 1] + _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i]}) + } + } + } + this.loading = false; + }); + this.getCateInfor() + + } + }, + mounted() {}, + methods: { + /** 鏌ヨ绫诲埆淇℃伅 */ + getCateInfor() + { + let _this = this + getCategory().then(response=>{ + + response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{ + _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]}) + }) + }) + }, + submitForm() { + let ul = this.fileList.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + let uls = this.fileListOther.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + this.formData.url = ul+","+uls + + this.$refs['elForm'].validate(valid => { + + + if (valid) { + if (this.formData.id != undefined) { + updateProperty(this.formData).then(response => { + this.$modal.msgSuccess("淇敼鎴愬姛"); + // this.open = false; + this.btn=false + }); + } else { + this.$modal.msgSuccess("淇敼澶辫触"); + + } + } + }) + }, + resetForm() { + this.$refs['elForm'].resetFields() + }, + handleFileCardPreview(file){ + this.dialogFileUrl = file.url; + const Base64 = require('js-base64').Base64 + this.desurl = process.env.VUE_APP_BASE_OTHER_API+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl)); + myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300'); + }, + handlePreview(file) + { + let formData = {'path':"/"+file.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")}; + let lens = formData.path.split(".") + let suffix = lens[lens.length-1] + download(formData).then(async (response) => { + const isLogin = await blobValidate(response); + let nt = new Date().getTime() + let filename = 'property_'+nt+'.'+suffix + const blob = new Blob([response]) + saveAs(blob, filename) + }) + }, + handleRemoveFile(file) { + for(let i = 0; i < this.fileListOther.length; i++) + { + if(this.fileListOther[i].url==file.url) + this.$delete(this.fileListOther,i); + } + }, + handleRemove(file) { + for(let i = 0; i < this.fileList.length; i++) + { + if(this.fileList[i].url==file.url) + this.$delete(this.fileList,i); + } + }, + handlePictureCardPreview(file) { + this.dialogImageUrl = file.url; + this.dialogVisible = true; + }, + handleDownload(url) { + var formData = {'path':"/"+url.replace(process.env.VUE_APP_BASE_TRUE_API,"")}; + + let lens = formData.path.split(".") + let suffix = lens[lens.length-1] + download(formData).then(async (response) => { + const isLogin = await blobValidate(response); + let nt = new Date().getTime() + let filename = 'property_'+nt+'.'+suffix + const blob = new Blob([response]) + saveAs(blob, filename) + }) + }, + handleEdit() + { + this.dsb = false + this.btn = true + }, + requestUpload(params) + { + var file = params.file; + var formData = new FormData(); + formData.append('uploadFile', file); + let _this = this + + uploadPic(formData).then(response => { + let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length) + if(_this.fot.indexOf(pth) !== -1) + { + _this.fileList.push({"name":response.data.fileName, "url":response.data.url}) + } + else{ + _this.fileListOther.push({"name":response.data.fileName, "url":response.data.url}) + } + }) + + } + + } +} + +</script> +<style> +.mt +{ + position: relative; +} +.dt{ + display: block; + +} +.pt{ + right: 10px; + top:-3px; + display: block; + position: absolute; +} +</style> -- Gitblit v1.9.1