init
This commit is contained in:
liupopo
151
src/components/AreaPicker/index.vue
Normal file
151
src/components/AreaPicker/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="AreaPicker">
|
||||
<el-select v-model="form.province"
|
||||
@change="changeProvince(form.province)"
|
||||
filterable
|
||||
placeholder="请选择省份"
|
||||
:loading="loading == 'province'">
|
||||
<el-option
|
||||
v-for="item in province_list"
|
||||
:key="item.sid"
|
||||
:label="item.name"
|
||||
:value="item.sid"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="form.city"
|
||||
@change='changeCity(form.city)'
|
||||
filterable
|
||||
placeholder="请选择市"
|
||||
:loading="loading == 'city'"
|
||||
style="margin-left: 8px;">
|
||||
<el-option
|
||||
v-for="item in city_list"
|
||||
:key="item.sid"
|
||||
:label="item.name"
|
||||
:value="item.sid">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="form.county"
|
||||
@change='changeCounty(form.county)'
|
||||
filterable
|
||||
:loading="loading == 'county'"
|
||||
placeholder="请选择县/区"
|
||||
style="margin-left: 8px;">
|
||||
<el-option
|
||||
v-for="item in county_list"
|
||||
:key="item.sid"
|
||||
:label="item.name"
|
||||
:value="item.sid">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProvince,
|
||||
getCity,
|
||||
getCounty
|
||||
} from '@/api/Common/areaPicker.js'
|
||||
export default {
|
||||
props:{
|
||||
province:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
city:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
county:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
province_list: [],
|
||||
city_list: [],
|
||||
county_list: [],
|
||||
form:{
|
||||
province: this.province,
|
||||
city: this.city,
|
||||
county: this.county
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
province:function(newVal,oldVal){
|
||||
this.form.province = newVal
|
||||
},
|
||||
city:function(newVal,oldVal){
|
||||
this.form.city = newVal
|
||||
},
|
||||
county:function(newVal,oldVal){
|
||||
this.form.county = newVal
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let provincelist = await getProvince()
|
||||
this.province_list = provincelist.data
|
||||
if(this.province){
|
||||
let citylist = await getCity({ sid: this.province })
|
||||
this.city_list = citylist.data
|
||||
}
|
||||
if(this.city){
|
||||
let countylist = await getCounty({ sid: this.city })
|
||||
this.county_list = countylist.data
|
||||
}
|
||||
this.loading = false
|
||||
},
|
||||
methods: {
|
||||
changeProvince(val){
|
||||
console.log(val)
|
||||
getCity({ sid: val }).then(res => {
|
||||
this.city_list = res.data
|
||||
this.loading = false
|
||||
})
|
||||
let obj = {};
|
||||
obj = this.province_list.find((item)=>{
|
||||
return item.sid === val;//筛选出匹配数据
|
||||
});
|
||||
console.log(obj)
|
||||
this.form.city = ''
|
||||
this.form.county = ''
|
||||
this.city_list = []
|
||||
this.county_list = []
|
||||
this.loading = 'city'
|
||||
this.$emit('areaPicker', obj.sidPath)
|
||||
},
|
||||
changeCity(val){
|
||||
let obj = {};
|
||||
obj = this.city_list.find((item)=>{
|
||||
return item.sid === val;//筛选出匹配数据
|
||||
});
|
||||
console.log(obj)
|
||||
this.form.county = ''
|
||||
this.county_list = []
|
||||
this.loading = 'county'
|
||||
this.$emit('areaPicker', obj.sidPath)
|
||||
getCounty({ sid: val }).then(res => {
|
||||
this.county_list = res.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
changeCounty(val){
|
||||
let obj = {};
|
||||
obj = this.county_list.find((item)=>{
|
||||
return item.sid === val;//筛选出匹配数据
|
||||
});
|
||||
this.$emit('areaPicker', obj.sidPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
78
src/components/Breadcrumb/index.vue
Normal file
78
src/components/Breadcrumb/index.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
levelList: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
|
||||
const first = matched[0]
|
||||
|
||||
if (!this.isDashboard(first)) {
|
||||
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
|
||||
}
|
||||
|
||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
},
|
||||
isDashboard(route) {
|
||||
const name = route && route.name
|
||||
if (!name) {
|
||||
return false
|
||||
}
|
||||
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
|
||||
},
|
||||
pathCompile(path) {
|
||||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
|
||||
const { params } = this.$route
|
||||
var toPath = pathToRegexp.compile(path)
|
||||
return toPath(params)
|
||||
},
|
||||
handleLink(item) {
|
||||
const { redirect, path } = item
|
||||
if (redirect) {
|
||||
this.$router.push(redirect)
|
||||
return
|
||||
}
|
||||
this.$router.push(this.pathCompile(path))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
margin-left: 8px;
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
src/components/ButtonBar/index.vue
Normal file
122
src/components/ButtonBar/index.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<!--标题按钮部分开始-->
|
||||
<div class="tab-header webtop">
|
||||
<!--标题-->
|
||||
<div>{{ viewTitle }}</div>
|
||||
<!--start 按钮部分开始 :icon="item.icon"-->
|
||||
<div>
|
||||
<el-button v-for="item in btnList" :key="item.btnKey" :type="item.type" :size="item.size" :disabled="btndisabled" @click="btnHandle(item.btnKey)">
|
||||
<svg-icon v-if="item.icon" :iconClass="item.icon"/>{{ item.btnLabel }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!--end 按钮部分结束-->
|
||||
</div>
|
||||
<!--标题按钮部分结束-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonBar',
|
||||
props: {
|
||||
viewTitle: String,
|
||||
btndisabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPath: this.$route.path,
|
||||
userSid: this.$store.getters.userInfo ? this.$store.getters.userInfo.userSid : '',
|
||||
btnList: [
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
icon: 'plus',
|
||||
btnKey: 'toAdd',
|
||||
btnLabel: '新增'
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
icon: 'edit',
|
||||
btnKey: 'toEdit',
|
||||
btnLabel: '编辑'
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
icon: 'submit',
|
||||
btnKey: 'doSubmit',
|
||||
btnLabel: '提交'
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
size: 'small',
|
||||
icon: 'del',
|
||||
btnKey: 'doDel',
|
||||
btnLabel: '删除'
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
size: 'small',
|
||||
icon: 'Import',
|
||||
btnKey: 'doImport',
|
||||
btnLabel: '导入'
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
size: 'small',
|
||||
icon: 'export',
|
||||
btnKey: 'build',
|
||||
btnLabel: '导出'
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
size: 'small',
|
||||
icon: 'cross',
|
||||
btnKey: 'doClose',
|
||||
btnLabel: '关闭'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.initPermission()
|
||||
},
|
||||
methods: {
|
||||
initPermission() {
|
||||
console.log('*******************当前路径 ' + this.currentPath)
|
||||
console.log('*******************当前用户 ' + this.userSid)
|
||||
const params = {
|
||||
currentPath: this.currentPath,
|
||||
userSid: this.userSid
|
||||
}
|
||||
// req
|
||||
// .buttonPermission(params)
|
||||
// .then(resp => {
|
||||
// if (resp.success) {
|
||||
// this.btnList = resp.data
|
||||
// }
|
||||
// })
|
||||
// .catch(e => {
|
||||
// console.log('请求权限按钮组出错：' + e)
|
||||
// })
|
||||
},
|
||||
btnHandle(btnKey) {
|
||||
this.$emit('btnhandle', btnKey)
|
||||
},
|
||||
setButtonList(value) {
|
||||
this.btnList = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.16em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
45
src/components/E-image/index.vue
Normal file
45
src/components/E-image/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-image
|
||||
:preview-src-list="[url]"
|
||||
class="block-img"
|
||||
:src="url"
|
||||
@click.stop="handleClickItem"></el-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickItem() {
|
||||
// 获取遮罩层dom
|
||||
let domImageMask = document.querySelector(".el-image-viewer__mask");
|
||||
if (!domImageMask) {
|
||||
return;
|
||||
}
|
||||
domImageMask.addEventListener("click", () => {
|
||||
// 点击遮罩层时调用关闭按钮的 click 事件
|
||||
document.querySelector(".el-image-viewer__close").click();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.block-img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.el-icon-circle-close{
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
279
src/components/Editor/index.vue
Normal file
279
src/components/Editor/index.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-error="handleUploadError"
|
||||
name="file"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
style="display: none"
|
||||
ref="upload"
|
||||
v-if="this.type == 'url'"
|
||||
>
|
||||
</el-upload>
|
||||
<div class="editor" ref="editor" :style="styles"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Quill from "quill";
|
||||
import "quill/dist/quill.core.css";
|
||||
import "quill/dist/quill.snow.css";
|
||||
import "quill/dist/quill.bubble.css";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
name: "Editor",
|
||||
props: {
|
||||
/* 编辑器的内容 */
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
/* 高度 */
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
/* 最小高度 */
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
/* 只读 */
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 上传文件大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
/* 类型（base64格式、url格式） */
|
||||
type: {
|
||||
type: String,
|
||||
default: "url",
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken()
|
||||
},
|
||||
Quill: null,
|
||||
currentValue: "",
|
||||
options: {
|
||||
theme: "snow",
|
||||
bounds: document.body,
|
||||
debug: "warn",
|
||||
modules: {
|
||||
// 工具栏配置
|
||||
toolbar: [
|
||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||
["blockquote", "code-block"], // 引用 代码块
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
["clean"], // 清除文本格式
|
||||
["link", "image", "video"] // 链接、图片、视频
|
||||
],
|
||||
},
|
||||
placeholder: "请输入内容",
|
||||
readOnly: this.readOnly,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let style = {};
|
||||
if (this.minHeight) {
|
||||
style.minHeight = `${this.minHeight}px`;
|
||||
}
|
||||
if (this.height) {
|
||||
style.height = `${this.height}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val !== this.currentValue) {
|
||||
this.currentValue = val === null ? "" : val;
|
||||
if (this.Quill) {
|
||||
this.Quill.pasteHTML(this.currentValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.Quill = null;
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const editor = this.$refs.editor;
|
||||
this.Quill = new Quill(editor, this.options);
|
||||
// 如果设置了上传地址则自定义图片上传事件
|
||||
if (this.type == 'url') {
|
||||
let toolbar = this.Quill.getModule("toolbar");
|
||||
toolbar.addHandler("image", (value) => {
|
||||
this.uploadType = "image";
|
||||
if (value) {
|
||||
this.$refs.upload.$children[0].$refs.input.click();
|
||||
} else {
|
||||
this.quill.format("image", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.Quill.pasteHTML(this.currentValue);
|
||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||
const html = this.$refs.editor.children[0].innerHTML;
|
||||
const text = this.Quill.getText();
|
||||
const quill = this.Quill;
|
||||
this.currentValue = html;
|
||||
this.$emit("input", html);
|
||||
this.$emit("on-change", { html, text, quill });
|
||||
});
|
||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||
this.$emit("on-text-change", delta, oldDelta, source);
|
||||
});
|
||||
this.Quill.on("selection-change", (range, oldRange, source) => {
|
||||
this.$emit("on-selection-change", range, oldRange, source);
|
||||
});
|
||||
this.Quill.on("editor-change", (eventName, ...args) => {
|
||||
this.$emit("on-editor-change", eventName, ...args);
|
||||
});
|
||||
},
|
||||
// 上传前校检格式和大小
|
||||
handleBeforeUpload(file) {
|
||||
// 校检文件大小
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
handleUploadSuccess(res, file) {
|
||||
// 获取富文本组件实例
|
||||
let quill = this.Quill;
|
||||
// 如果上传成功
|
||||
// if (res.code == 200) {
|
||||
// // 获取光标所在位置
|
||||
// let length = quill.getSelection().index;
|
||||
// // 插入图片 res.url为服务器返回的图片地址
|
||||
// quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
||||
// // 调整光标到最后
|
||||
// quill.setSelection(length + 1);
|
||||
if (res.code == "200") {
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片 res.url为服务器返回的图片地址
|
||||
quill.insertEmbed(length, "image", res.data.fullUrl);
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
} else {
|
||||
this.$message.error("图片插入失败");
|
||||
}
|
||||
},
|
||||
handleUploadError() {
|
||||
this.$message.error("图片插入失败");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.editor, .ql-toolbar {
|
||||
white-space: pre-wrap !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
.quill-img {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
||||
content: "请输入链接地址:";
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||
border-right: 0px;
|
||||
content: "保存";
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
||||
content: "请输入视频地址:";
|
||||
}
|
||||
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: "14px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||
content: "10px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
||||
content: "18px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
||||
content: "32px";
|
||||
}
|
||||
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||
content: "文本";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||
content: "标题1";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||
content: "标题2";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||
content: "标题3";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||
content: "标题4";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||
content: "标题5";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||
content: "标题6";
|
||||
}
|
||||
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||
content: "标准字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
||||
content: "衬线字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||
content: "等宽字体";
|
||||
}
|
||||
</style>
|
||||
78
src/components/ErrorLog/index.vue
Normal file
78
src/components/ErrorLog/index.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div v-if="errorLogs.length>0">
|
||||
<el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
|
||||
<el-button style="padding: 8px 10px;" size="small" type="danger">
|
||||
<svg-icon icon-class="bug" />
|
||||
</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
|
||||
<div slot="title">
|
||||
<span style="padding-right: 10px;">Error Log</span>
|
||||
<el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
|
||||
</div>
|
||||
<el-table :data="errorLogs" border>
|
||||
<el-table-column label="Message">
|
||||
<template slot-scope="{row}">
|
||||
<div>
|
||||
<span class="message-title">Msg:</span>
|
||||
<el-tag type="danger">
|
||||
{{ row.err.message }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<span class="message-title" style="padding-right: 10px;">Info: </span>
|
||||
<el-tag type="warning">
|
||||
{{ row.vm.$vnode.tag }} error in {{ row.info }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<span class="message-title" style="padding-right: 16px;">Url: </span>
|
||||
<el-tag type="success">
|
||||
{{ row.url }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Stack">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.err.stack }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ErrorLog',
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
errorLogs() {
|
||||
return this.$store.getters.errorLogs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearAll() {
|
||||
this.dialogTableVisible = false
|
||||
this.$store.dispatch('errorLog/clearErrorLog')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
44
src/components/Hamburger/index.vue
Normal file
44
src/components/Hamburger/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Hamburger',
|
||||
props: {
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleClick() {
|
||||
this.$emit('toggleClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.hamburger.is-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
59
src/components/Screenfull/index.vue
Normal file
59
src/components/Screenfull/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Screenfull',
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy()
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
if (!screenfull.enabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle()
|
||||
},
|
||||
change() {
|
||||
this.isFullscreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screenfull-svg {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
fill: #5a5e66;;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: 10px;
|
||||
}
|
||||
</style>
|
||||
57
src/components/SizeSelect/index.vue
Normal file
57
src/components/SizeSelect/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleSetSize">
|
||||
<div>
|
||||
<svg-icon class-name="size-icon" icon-class="size" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
|
||||
{{
|
||||
item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeOptions: [
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Medium', value: 'medium' },
|
||||
{ label: 'Small', value: 'small' },
|
||||
{ label: 'Mini', value: 'mini' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
size() {
|
||||
return this.$store.getters.size
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetSize(size) {
|
||||
this.$ELEMENT.size = size
|
||||
this.$store.dispatch('app/setSize', size)
|
||||
this.refreshView()
|
||||
this.$message({
|
||||
message: 'Switch Size Success',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
refreshView() {
|
||||
// In order to make the cached page re-rendered
|
||||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
|
||||
|
||||
const { fullPath } = this.$route
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
62
src/components/SvgIcon/index.vue
Normal file
62
src/components/SvgIcon/index.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
|
||||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
|
||||
<use :xlink:href="iconName" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'SvgIcon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isExternal() {
|
||||
return isExternal(this.iconClass)
|
||||
},
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return 'svg-icon ' + this.className
|
||||
} else {
|
||||
return 'svg-icon'
|
||||
}
|
||||
},
|
||||
styleExternalIcon() {
|
||||
return {
|
||||
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
|
||||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-external-icon {
|
||||
background-color: currentColor;
|
||||
mask-size: cover!important;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
175
src/components/ThemePicker/index.vue
Normal file
175
src/components/ThemePicker/index.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<el-color-picker
|
||||
v-model="theme"
|
||||
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
|
||||
class="theme-picker"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const version = require('element-ui/package.json').version // element-ui version from node_modules
|
||||
const ORIGINAL_THEME = '#409EFF' // default color
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chalk: '', // content of theme-chalk css
|
||||
theme: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultTheme() {
|
||||
return this.$store.state.settings.theme
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
defaultTheme: {
|
||||
handler: function(val, oldVal) {
|
||||
this.theme = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
async theme(val) {
|
||||
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
|
||||
if (typeof val !== 'string') return
|
||||
const themeCluster = this.getThemeCluster(val.replace('#', ''))
|
||||
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
|
||||
console.log(themeCluster, originalCluster)
|
||||
|
||||
const $message = this.$message({
|
||||
message: ' Compiling the theme',
|
||||
customClass: 'theme-message',
|
||||
type: 'success',
|
||||
duration: 0,
|
||||
iconClass: 'el-icon-loading'
|
||||
})
|
||||
|
||||
const getHandler = (variable, id) => {
|
||||
return () => {
|
||||
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
|
||||
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
|
||||
|
||||
let styleTag = document.getElementById(id)
|
||||
if (!styleTag) {
|
||||
styleTag = document.createElement('style')
|
||||
styleTag.setAttribute('id', id)
|
||||
document.head.appendChild(styleTag)
|
||||
}
|
||||
styleTag.innerText = newStyle
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.chalk) {
|
||||
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
|
||||
await this.getCSSString(url, 'chalk')
|
||||
}
|
||||
|
||||
const chalkHandler = getHandler('chalk', 'chalk-style')
|
||||
|
||||
chalkHandler()
|
||||
|
||||
const styles = [].slice.call(document.querySelectorAll('style'))
|
||||
.filter(style => {
|
||||
const text = style.innerText
|
||||
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
|
||||
})
|
||||
styles.forEach(style => {
|
||||
const { innerText } = style
|
||||
if (typeof innerText !== 'string') return
|
||||
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
|
||||
})
|
||||
|
||||
this.$emit('change', val)
|
||||
|
||||
$message.close()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateStyle(style, oldCluster, newCluster) {
|
||||
let newStyle = style
|
||||
oldCluster.forEach((color, index) => {
|
||||
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
|
||||
})
|
||||
return newStyle
|
||||
},
|
||||
|
||||
getCSSString(url, variable) {
|
||||
return new Promise(resolve => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
|
||||
resolve()
|
||||
}
|
||||
}
|
||||
xhr.open('GET', url)
|
||||
xhr.send()
|
||||
})
|
||||
},
|
||||
|
||||
getThemeCluster(theme) {
|
||||
const tintColor = (color, tint) => {
|
||||
let red = parseInt(color.slice(0, 2), 16)
|
||||
let green = parseInt(color.slice(2, 4), 16)
|
||||
let blue = parseInt(color.slice(4, 6), 16)
|
||||
|
||||
if (tint === 0) { // when primary color is in its rgb space
|
||||
return [red, green, blue].join(',')
|
||||
} else {
|
||||
red += Math.round(tint * (255 - red))
|
||||
green += Math.round(tint * (255 - green))
|
||||
blue += Math.round(tint * (255 - blue))
|
||||
|
||||
red = red.toString(16)
|
||||
green = green.toString(16)
|
||||
blue = blue.toString(16)
|
||||
|
||||
return `#${red}${green}${blue}`
|
||||
}
|
||||
}
|
||||
|
||||
const shadeColor = (color, shade) => {
|
||||
let red = parseInt(color.slice(0, 2), 16)
|
||||
let green = parseInt(color.slice(2, 4), 16)
|
||||
let blue = parseInt(color.slice(4, 6), 16)
|
||||
|
||||
red = Math.round((1 - shade) * red)
|
||||
green = Math.round((1 - shade) * green)
|
||||
blue = Math.round((1 - shade) * blue)
|
||||
|
||||
red = red.toString(16)
|
||||
green = green.toString(16)
|
||||
blue = blue.toString(16)
|
||||
|
||||
return `#${red}${green}${blue}`
|
||||
}
|
||||
|
||||
const clusters = [theme]
|
||||
for (let i = 0; i <= 9; i++) {
|
||||
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
|
||||
}
|
||||
clusters.push(shadeColor(theme, 0.1))
|
||||
return clusters
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.theme-message,
|
||||
.theme-picker-dropdown {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.theme-picker .el-color-picker__trigger {
|
||||
height: 26px !important;
|
||||
width: 26px !important;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.theme-picker-dropdown .el-color-dropdown__link-btn {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
368
src/components/VehicleConfigurationSub/vehicleconfiguration.vue
Normal file
368
src/components/VehicleConfigurationSub/vehicleconfiguration.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="listconadd">
|
||||
<el-form ref="dataForm" :model="formobj" class="formaddcopy02">
|
||||
<!-- <div class="headtitle"><span>系列：{{ formobj.productLineValue }}<span style="margin-left: 20px">驱动：{{ formobj.driveFormValue }}<span style="margin-left: 20px">功能：{{ formobj.vehicleTypeValue }}<span style="margin-left: 20px">马力：{{ formobj.powerValue }}</span></span></span></span></div>-->
|
||||
<div class="headtitle_con">
|
||||
<div class="headtitle">
|
||||
{{ formobj.vehicleAlias }}
|
||||
<div class="headtitle_jia">销售指导价:<span>{{ guidedPrice }} 万元</span></div>
|
||||
<div class="icon_sty" @click="changeDown(false)" v-show="isDown">
|
||||
<i class="el-icon-arrow-down"/>
|
||||
<span>展开</span>
|
||||
</div>
|
||||
<div class="icon_sty" @click="changeUp(true)" v-show="!isDown">
|
||||
<i class="el-icon-arrow-up"/>
|
||||
<span>收起</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>品牌</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.brandName }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>功能</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.vehicleTypeValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>系列</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.productLineValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>驱动</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.driveFormValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="span-sty"><span>马力</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.powerValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>版本</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.vehicleVersionValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>燃料</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.fuelTypeValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="span-sty"><span>变速箱</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.gearboxTypeValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="more_content" v-show="!isDown">
|
||||
<div class="headline">车型信息</div>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>排放标准</span></div>
|
||||
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.emissionStandardValue }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>发动机型号</span></div>
|
||||
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.engineTypeValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>细分市场</span></div>
|
||||
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.marketSegmentsValue }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>规格型号</span></div>
|
||||
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.specifications }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="span-sty"><span>系别</span></div>
|
||||
<el-form-item><span class="addinputInfo addinputwTwo">{{ formobj.departmentValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="headline">常用配置</div>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>后桥</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.rearAxleValue }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>速比</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.rearAxleRatio }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>轴距</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.wheelbase }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>悬架</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.suspension }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="span-sty"><span>鞍座</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.saddle }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>颜色</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.carColor }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>驾驶室</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.specification }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>保险杠</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.bumper }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>燃料箱</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.fuelTank }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="span-sty"><span>导流罩</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.baffleModel }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>独立热源</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.independentSources }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>缓速器</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.slowMachine }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>护轮罩</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.tireCover }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>后视镜</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.rearViewMirror }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="span-sty"><span>轮胎</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.tireSize }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>轮毂材质</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.hubMaterial }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>空调</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.airConditioner }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>座椅</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.seat }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="span-sty"><span>多媒体</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.multimedia }}</span></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="span-sty"><span>配置包</span></div>
|
||||
<el-form-item><span class="addinputInfo">{{ formobj.configuringBao }}</span></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="headline">
|
||||
更多配置
|
||||
<div class="icon_sty" @click="changeDownOtherConfig(false)" v-show="isDownOther">
|
||||
<i class="el-icon-arrow-down"/>
|
||||
<span>展开</span>
|
||||
</div>
|
||||
<div class="icon_sty" @click="changeUpOtherConfig(true)" v-show="!isDownOther">
|
||||
<i class="el-icon-arrow-up"/>
|
||||
<span>收起</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-row v-show="!isDownOther">
|
||||
<el-col :span="24">
|
||||
<el-form-item>{{ formobj.otherConfig }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectExiCarConfig } from '@/api/vehicleModel/vehicleconfiguration.js'
|
||||
|
||||
export default {
|
||||
name: 'chexingpeizhibiaozhun',
|
||||
props: {
|
||||
params: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
FormLoading: false,
|
||||
priceValidity: '',
|
||||
guidedPrice: '',
|
||||
formobj: {},
|
||||
isDown: true,
|
||||
isDownOther: true,
|
||||
sid_list: {
|
||||
modelSid: '',
|
||||
configSid: '',
|
||||
vehModelConfigSid: '',
|
||||
userSid: window.sessionStorage.getItem('userSid')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
deep: true,
|
||||
immediate: false,
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal.configSid !== '' && newVal.modelSid !== '') {
|
||||
this.guidedPrice = newVal.guidedPrice
|
||||
selectExiCarConfig({
|
||||
modelSid: newVal.modelSid,
|
||||
configSid: newVal.configSid,
|
||||
vehModelConfigSid: newVal.vehModelConfigSid
|
||||
}).then((response) => {
|
||||
this.FormLoading = false
|
||||
if (response.success) {
|
||||
this.formobj = response.data
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '查看失败！',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.formobj = {}
|
||||
this.guidedPrice = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 控制标题展开和收起
|
||||
changeDown(val) {
|
||||
this.isDown = val
|
||||
},
|
||||
changeUp(val) {
|
||||
this.isDown = val
|
||||
},
|
||||
// 控制更多配置展开和收起
|
||||
changeDownOtherConfig(val) {
|
||||
this.isDownOther = val
|
||||
},
|
||||
changeUpOtherConfig(val) {
|
||||
this.isDownOther = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 标题头部的样式 */
|
||||
.headtitle {
|
||||
padding: 9px;
|
||||
/*font-weight: bold;*/
|
||||
font-size: 20px;
|
||||
background-color: #0294d7;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 内容头部的样式 */
|
||||
.headline {
|
||||
padding: 9px;
|
||||
/*font-weight: bold;*/
|
||||
font-size: 16px;
|
||||
background-color: #0294d7;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 标题中内容的样式 */
|
||||
.formaddcopy02 .headtitle_con .span-sty {
|
||||
font-size: 16px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.formaddcopy02 .headtitle_con .addinputInfo {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.formaddcopy02 .headtitle_con /deep/ .el-form-item__content {
|
||||
font-size: 16px;
|
||||
line-height: 15px !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 内容部分中内容的样式 */
|
||||
.formaddcopy02 .more_content .span-sty {
|
||||
font-size: 16px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.formaddcopy02 .more_content /deep/ .el-form-item__content {
|
||||
font-size: 16px;
|
||||
line-height: 15px !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.formaddcopy02 .headtitle_con .headtitle .icon_sty .el-icon-arrow-down, .el-icon-arrow-up {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 标题部分的展开与收起按钮*/
|
||||
.formaddcopy02 .headtitle_con .headtitle .icon_sty {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
top: 14px;
|
||||
right: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 销售指导价的样式 */
|
||||
.formaddcopy02 .headtitle_con .headtitle .headtitle_jia {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 70px;
|
||||
/*color: #d00000;*/
|
||||
}
|
||||
|
||||
/* 内容部分的展开与收起按钮 */
|
||||
.formaddcopy02 .headline .icon_sty {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
font-weight: bolder;
|
||||
right: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 更多配置一行的内边距 */
|
||||
.formaddcopy02 .more_content /deep/ .el-col-24 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 更多配置一行的行高 */
|
||||
.formaddcopy02 .more_content .el-col-24 /deep/ .el-form-item__content {
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
224
src/components/amap/amap.vue
Normal file
224
src/components/amap/amap.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
|
||||
<div class="amap-page-container">
|
||||
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
|
||||
<div class="toolbar">
|
||||
<span>当前坐标: {{ lng }}, {{ lat }}</span>
|
||||
<span>地址: {{ address }}</span>
|
||||
<el-button type="primary" @click="select" class="btn">确定</el-button>
|
||||
|
||||
</div>
|
||||
<el-amap
|
||||
class="amap-demo"
|
||||
vid="amapDemo2"
|
||||
:zoom="zoom"
|
||||
:center="mapCenter"
|
||||
:events="events"
|
||||
:plugin="plugin"
|
||||
>
|
||||
<el-amap-marker v-for="(marker,index) in markers"
|
||||
:key="index"
|
||||
:position="marker"
|
||||
:events="markerEvents"
|
||||
/>
|
||||
<!-- <el-amap-marker v-for="marker in markers" :position="marker" /> -->
|
||||
</el-amap>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AMapManager } from 'vue-amap'
|
||||
export default {
|
||||
name: 'AmapPage',
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
address:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
makerPosition: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
const self = this
|
||||
return {
|
||||
zoom: 14,
|
||||
mapCenter: [114.508905, 38.004099],
|
||||
searchOption: {
|
||||
city: '石家庄',
|
||||
citylimit: false
|
||||
},
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
loaded: false,
|
||||
plugin: [{
|
||||
pName: 'Geolocation',
|
||||
resizeEnable: true, //是否使用高精度定位，默认:true
|
||||
timeout: 100, //超过10秒后停止定位，默认：无穷大
|
||||
events: {
|
||||
init(o) {
|
||||
// o 是高德地图定位插件实例
|
||||
o.getCurrentPosition((status, result) => {
|
||||
if (result && result.position) {
|
||||
if (self.makerPosition.length == 0) {
|
||||
self.$emit('update:address', result.formattedAddress)
|
||||
// 设置经度
|
||||
self.lng = result.position.lng;
|
||||
// 设置维度
|
||||
self.lat = result.position.lat;
|
||||
// 设置坐标
|
||||
self.mapCenter = [self.lng, self.lat];
|
||||
}else{
|
||||
let maker = self.makerPosition.split(",")
|
||||
self.lng = maker[0]
|
||||
self.lat = maker[1]
|
||||
}
|
||||
// load
|
||||
self.loaded = true
|
||||
// 页面渲染好后
|
||||
self.$nextTick()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
events: {
|
||||
click(e) {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
markerEvents:{ // marker点点击事件
|
||||
click: e => {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
// self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
markers: {
|
||||
get: function () {
|
||||
return [[this.lng, this.lat]]
|
||||
},
|
||||
set: function (newValue) {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearchResult(pois) {
|
||||
let latSum = 0
|
||||
let lngSum = 0
|
||||
let _self = this
|
||||
this.markers = []
|
||||
if (pois.length > 0) {
|
||||
const { lng, lat } = pois[0]
|
||||
_self.lng = lng
|
||||
_self.lat = lat
|
||||
_self.mapCenter = [lng, lat];
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], (status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
_self.$emit('update:address', address)
|
||||
_self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$nextTick(() => {
|
||||
done()
|
||||
})
|
||||
},
|
||||
select() {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$emit('update:makerPosition', this.markers[0].toString())
|
||||
this.$emit('update:address', this.address)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.amap-demo {
|
||||
height: 450px;
|
||||
}
|
||||
.search-box {
|
||||
z-index: 999;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 100px;
|
||||
}
|
||||
.amap-page-container {
|
||||
position: relative;
|
||||
}
|
||||
.toolbar{
|
||||
padding-bottom: 10px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
.btn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
span{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
src/components/imgCodeRole/index.vue
Normal file
149
src/components/imgCodeRole/index.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
id="BigBox"
|
||||
v-loading="loading"
|
||||
class="big-box"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
>
|
||||
<img class="codeimg" :src="imgCodeUrl" alt="">
|
||||
<div class="click-box" @click="clickBox" />
|
||||
</div>
|
||||
<div class="wordList">
|
||||
请在上图依次点击:
|
||||
<i>{{ wordList[0] }}</i>
|
||||
<i>{{ wordList[1] }}</i>
|
||||
<i>{{ wordList[2] }}</i>
|
||||
<span class="restcode" @click="getCodeImage">换一换</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rndNum: '', // 随机数
|
||||
imgCodeUrl: '', // 图片地址
|
||||
cssCode: '', // 验证码样式
|
||||
isSubmit: true, // 提交开关
|
||||
zuobiaoNum: 0, // 点击数
|
||||
zuobiaoArr: [], // 坐标数组
|
||||
tempElement: [], // 记录追加标签，删除时使用
|
||||
wordList: [], // 要选择的文字
|
||||
uuid: '',
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getCodeImage() //获取验证码
|
||||
},
|
||||
methods: {
|
||||
// 获取图片验证码
|
||||
getCodeImage() {
|
||||
// this.zuobiaoNum = 0
|
||||
// this.zuobiaoArr = []
|
||||
// const BigBox = document.getElementById('BigBox')
|
||||
// for (let i = 0; i < this.tempElement.length; i++) {
|
||||
// BigBox.removeChild(this.tempElement[i])
|
||||
// }
|
||||
// this.tempElement = []
|
||||
// axios.get('api/portal/v1/captcha/clickWord', { params: { _t: Date.parse(new Date()) / 1000 }}).then(res => {
|
||||
// console.log(res)
|
||||
// this.loading = false
|
||||
// this.imgCodeUrl = 'data:image/gif;base64,' + res.data.data.dataVO.originalImageBase64
|
||||
// this.wordList = res.data.data.dataVO.wordList
|
||||
// this.uuid = res.data.data.uuid
|
||||
// })
|
||||
// this.rndNum = this.getRndNum()
|
||||
},
|
||||
// 获取随机数,
|
||||
getRndNum() {
|
||||
return Math.random()
|
||||
.toString()
|
||||
.split('.')[1]
|
||||
},
|
||||
clickBox(event) {
|
||||
this.zuobiaoArr[this.zuobiaoNum] = event.offsetX + ',' + event.offsetY
|
||||
this.zuobiaoArr[this.zuobiaoNum] = { 'x': parseInt(event.offsetX) - 20, 'y': parseInt(event.offsetY) - 20 }
|
||||
this.zuobiaoNum++
|
||||
|
||||
const BigBox = document.getElementById('BigBox')
|
||||
const addSpan = document.createElement('span')
|
||||
addSpan.innerText = this.zuobiaoNum
|
||||
addSpan.setAttribute('style', 'left: ' + event.offsetX + 'px; top:' + event.offsetY + 'px;')
|
||||
|
||||
BigBox.appendChild(addSpan)
|
||||
this.tempElement.push(addSpan)
|
||||
|
||||
if (this.zuobiaoNum == 3) {
|
||||
let data = {
|
||||
uuid: this.uuid,
|
||||
verifyCode: '['
|
||||
}
|
||||
for (var i = 0; i < this.zuobiaoArr.length; i++) {
|
||||
data.verifyCode += "{'x':" + this.zuobiaoArr[i].x + ",'y':" + this.zuobiaoArr[i].y + '}'
|
||||
}
|
||||
data.verifyCode = data.verifyCode + ']'
|
||||
console.log(this.zuobiaoArr, data)
|
||||
this.$emit('login', data)
|
||||
data = qs.stringify(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.big-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.codeimg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.click-box {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 92;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
.wordList{
|
||||
font-size: 18px;
|
||||
padding-top: 5px;
|
||||
i{
|
||||
padding: 0 8px;
|
||||
color: #018ad2;
|
||||
}
|
||||
.restcode{
|
||||
float: right;
|
||||
color: #018ad2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/components/pagination/index.vue
Normal file
136
src/components/pagination/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container e-pagination">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="current"
|
||||
:page-size.sync="Size"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* props 参数
|
||||
* @total 默认数据总数
|
||||
* @page 默认开始页面
|
||||
* @limit 每页的数据条数
|
||||
* @pageSizes 分组
|
||||
* */
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [5, 10, 15, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'prev, pager, next, sizes, total, jumper'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
/**
|
||||
* page-size 每页显示条目个数，支持 .sync 修饰符
|
||||
* current-page 当前页数，支持 .sync 修饰符
|
||||
* */
|
||||
computed: {
|
||||
current: {
|
||||
get() {
|
||||
return this.page
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
}
|
||||
},
|
||||
Size: {
|
||||
get() {
|
||||
return this.limit
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* pagination 父定义请求函数 getList
|
||||
* */
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.$emit('pagination', { pageNum: this.curren, pageSize: val })
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { pageNum: val, pageSize: this.Size })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pagination-container.pagesize{
|
||||
float: right;
|
||||
padding: 0;
|
||||
}
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0 16px;
|
||||
float: right;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
}
|
||||
.el-pagination {
|
||||
white-space: nowrap;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
height: 28px;
|
||||
}
|
||||
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
|
||||
padding: 0 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.e-pagination{
|
||||
.el-icon-arrow-left:before,
|
||||
.el-icon-arrow-right:before{
|
||||
content: '下一页';
|
||||
color: #727272;
|
||||
}
|
||||
.el-icon-arrow-left:before{
|
||||
content: '上一页';
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
142
src/components/pagination/pageye.vue
Normal file
142
src/components/pagination/pageye.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container e-pagination">
|
||||
<!-- <el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="current"
|
||||
:page-size.sync="Size"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/> -->
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="current"
|
||||
:page-size.sync="Size"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* props 参数
|
||||
* @total 默认数据总数
|
||||
* @page 默认开始页面
|
||||
* @limit 每页的数据条数
|
||||
* @pageSizes 分组
|
||||
* */
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [5, 10, 15, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
// default: 'prev, pager, next, sizes, total, jumper'
|
||||
default: 'sizes'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
/**
|
||||
* page-size 每页显示条目个数，支持 .sync 修饰符
|
||||
* current-page 当前页数，支持 .sync 修饰符
|
||||
* */
|
||||
computed: {
|
||||
current: {
|
||||
get() {
|
||||
return this.page
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
}
|
||||
},
|
||||
Size: {
|
||||
get() {
|
||||
return this.limit
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* pagination 父定义请求函数 getList
|
||||
* */
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.$emit('pagination', { pageNum: this.curren, pageSize: val })
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { pageNum: val, pageSize: this.Size })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pagination-container.pagesize{
|
||||
float: right;
|
||||
padding: 0;
|
||||
}
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0 16px;
|
||||
float: right;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
}
|
||||
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
|
||||
padding: 0 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.e-pagination{
|
||||
.el-icon-arrow-left:before,
|
||||
.el-icon-arrow-right:before{
|
||||
content: '下一页';
|
||||
color: #727272;
|
||||
}
|
||||
.el-icon-arrow-left:before{
|
||||
content: '上一页';
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
70
src/components/passwordSafe/index.vue
Normal file
70
src/components/passwordSafe/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input :type="type" v-model="localValue" @input="onInput" :placeholder="placeholder" autocomplete="off"
|
||||
:maxlength="maxlength" show-password>
|
||||
</el-input>
|
||||
<div class="pasTips" v-if="pastips">
|
||||
<span :class="{'opcity':isopcity == 1}">弱</span> <span :class="{'opcity':isopcity == 2}">中</span> <span :class="{'opcity':isopcity == 3}">强</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "passwordInput",
|
||||
props: {
|
||||
//传进来的value值，只显示不修改
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength:{
|
||||
type: Number,
|
||||
default: 18
|
||||
},
|
||||
pastips:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 获取props中value的值，并与el-input绑定，过程中不修改props中value的值，保证了单向数据流原则
|
||||
localValue: this.value,
|
||||
isopcity: 0,
|
||||
type: 'password'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
this.$emit('input', e)
|
||||
let $test = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,30}$/;
|
||||
let $test1 = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/; // 弱：纯数字，纯字母，纯特殊字符
|
||||
let $test2 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/; //中：字母+数字，字母+特殊字符，数字+特殊字符
|
||||
let $test3 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/; //强：字母+数字+特殊字符
|
||||
if(e.length < 1){ this.isopcity = 0; return;}
|
||||
if($test1.test(e)){
|
||||
this.isopcity = 1
|
||||
if($test.test(e)){
|
||||
if($test2.test(e)){
|
||||
this.isopcity = 2
|
||||
if($test3.test(e)){
|
||||
this.isopcity = 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}else{//没满足 弱 条件就依旧显示红色
|
||||
this.isopcity = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
82
src/components/tab-search/index.vue
Normal file
82
src/components/tab-search/index.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="tab-header">
|
||||
<div class="tab-btn clearfix">
|
||||
<div class="search-from">
|
||||
<slot name="from" />
|
||||
</div>
|
||||
<div class="search-bth">
|
||||
<slot name="btn" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
showsearch: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~@/styles/variables.scss";
|
||||
.tab-header {
|
||||
background-color: $search-bg;
|
||||
padding: 5px 20px;
|
||||
.tab-search{
|
||||
padding: 9px 0;
|
||||
}
|
||||
.tab-btn{
|
||||
.search-from{
|
||||
float: left;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.search-bth{
|
||||
float: right;
|
||||
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 0px;
|
||||
.el-input__icon,
|
||||
.el-form-item__content{
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-form-item__label {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.el-select .el-input.is-focus .el-input__inner {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
//.el-button{
|
||||
// padding: 8px 20px;
|
||||
// background-color: $color-primary;
|
||||
// color: $text-color-inverse;
|
||||
//}
|
||||
.el-select {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
src/components/uploadFile/FaImages.vue
Normal file
166
src/components/uploadFile/FaImages.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
|
||||
:action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card"
|
||||
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
|
||||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile, deleteFilesOss } from '@/api/portal/Upload'
|
||||
import { getStorage } from '@/utils/auth.js'
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
console.log('aaaa2', oldVal)
|
||||
this.files = newVal
|
||||
if (this.stateName === 'xunidingjinAdd') {
|
||||
if (this.files.length > 1) {
|
||||
this.files.splice(0, 1)
|
||||
}
|
||||
}
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.stateName = 'xunidingjinAdd'
|
||||
this.files = imgList
|
||||
console.log('回显图片', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size,
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
deleteFilesOss(file.url).then((res) => {
|
||||
if (res.success) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogVisible = true
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
165
src/components/uploadFile/FileUpload.vue
Normal file
165
src/components/uploadFile/FileUpload.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload class="upload-demo" :data="datas" :accept="accept" :on-success="uploadImgSuccess"
|
||||
:on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:http-request="uploadSectionFile">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/api/business/beiAn'
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px',
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx',
|
||||
},
|
||||
// 文件列表
|
||||
files: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datas: null,
|
||||
name:null,
|
||||
accessToken: {},
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
idsz: '',
|
||||
file_catch: '',
|
||||
files_list: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token',
|
||||
]),
|
||||
},
|
||||
watch: {
|
||||
files: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.pageLoad(val, '')
|
||||
},
|
||||
},
|
||||
},
|
||||
creatd() {
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
// this.Init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
// 1. 文件上传用token
|
||||
// this.accessToken = {
|
||||
// token: this.token,
|
||||
// }
|
||||
this.pageLoad(this.files)
|
||||
},
|
||||
handleChange(file, fileList) {},
|
||||
// 传入数据并绑定
|
||||
pageLoad(files) {
|
||||
// console.log('传入：' + files)
|
||||
if (files !== null && files !== '') {
|
||||
this.files_list = JSON.parse(files)
|
||||
var ids = ''
|
||||
this.fileList_FuJian = []
|
||||
// 1. 回显页面
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
var body = {
|
||||
name: this.files_list[i].name,
|
||||
url: '',
|
||||
status: 'finished',
|
||||
}
|
||||
this.fileList_FuJian.push(body)
|
||||
ids = ids + this.files_list[i].id + ','
|
||||
}
|
||||
// 2. 回存文件id
|
||||
if (ids !== '') {
|
||||
ids = ids.substring(0, ids.length - 1)
|
||||
}
|
||||
this.enclosure = ids
|
||||
this.file_catch = ids
|
||||
} else {
|
||||
this.file_add = ''
|
||||
this.file_catch = ''
|
||||
this.enclosure = ''
|
||||
this.files_list = []
|
||||
this.fileList_FuJian = []
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess(response, file, fileList) {
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
if (this.idsz != '') {
|
||||
this.$emit('handleRemove', this.idsz)
|
||||
}
|
||||
},
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
const file = params.file
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData()
|
||||
// console.log('77777777777777',form)
|
||||
// 文件对象
|
||||
form.append('file', file)
|
||||
// 项目封装的请求方法，下面做简单介绍
|
||||
uploadFile(form).then((res) => {
|
||||
// 自行处理各种情况
|
||||
if (res.code === '200') {
|
||||
let a = ''
|
||||
a = res.data.filePath
|
||||
this.idsz = a
|
||||
this.$emit('handleSuccess', res)
|
||||
}
|
||||
if (res.msg == '操作成功') {
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
// 如果等于备案,就调备案图片上传接口
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
131
src/components/uploadFile/ImageUpload.vue
Normal file
131
src/components/uploadFile/ImageUpload.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
|
||||
<el-upload ref="upload" class="avatar-uploader" action="imageUrl" :show-file-list="true" list-type="picture-card" :data="datas" :on-change="uploadchangeFile" :http-request="uploadSectionFile" :on-remove="onRemove">
|
||||
<i class="el-icon-plus" />
|
||||
<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
|
||||
</el-upload>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imgUploadz } from '@/api/jichuxinxi/baseaffiliatcompany'
|
||||
export default {
|
||||
model: {
|
||||
prop: 'types',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
tip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
types: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
files: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
FrontPhoto: '',
|
||||
datas: null,
|
||||
imgId: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.datas = { type: this.types }
|
||||
console.log(this.datas, 111111111111)
|
||||
},
|
||||
methods: {
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
// console.log(params, 111111111111)
|
||||
const file = params.file
|
||||
const fileType = file.type
|
||||
const isImage = fileType.indexOf('image') != -1
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
// console.log(params)
|
||||
// 这里常规检验，看项目需求而定
|
||||
if (!isImage) {
|
||||
this.$message.error('只能上传图片格式png、jpg、gif、jpeg!')
|
||||
return
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('只能上传图片大小小于2M')
|
||||
return
|
||||
}
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData()
|
||||
// console.log(form)
|
||||
// 文件对象
|
||||
form.append('file', file)
|
||||
imgUploadz(form).then((res) => {
|
||||
// 自行处理各种情况
|
||||
if (res.code === '200') {
|
||||
this.imgId = ''
|
||||
res.data.attachType = this.types
|
||||
this.imgId = res.data.filePath
|
||||
this.$emit('imgdata', res)
|
||||
}
|
||||
// this.FrontPhoto = res.fullUrl
|
||||
if (res.msg == '操作成功') {
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
// 如果等于备案,就调备案图片上传接口
|
||||
},
|
||||
onRemove() {
|
||||
if (this.imgId != '') {
|
||||
this.$emit('removeIds', this.imgId)
|
||||
}
|
||||
},
|
||||
uploadchangeFile(file) {
|
||||
this.FrontPhoto = URL.createObjectURL(file.raw)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.el-upload__tip {
|
||||
line-height: 25px;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
159
src/components/uploadFile/ImageUploadChe.vue
Normal file
159
src/components/uploadFile/ImageUploadChe.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
|
||||
<el-upload ref="upload" class="avatar-uploader" action="imageUrl" :show-file-list="true" list-type="picture-card" :data="datas" :on-change="uploadchangeFile" :http-request="uploadSectionFile" :on-remove="onRemove">
|
||||
<i class="el-icon-plus" />
|
||||
<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
|
||||
</el-upload>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imageUpload } from '@/api/portal/Upload.js'
|
||||
import { imgUploadz } from '@/api/jichuxinxi/baseaffiliatcompany' // 这个没用着
|
||||
export default {
|
||||
props: {
|
||||
tip: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
types: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
linkChange: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
FrontPhoto: '',
|
||||
imageUrl: imgUploadz,
|
||||
datas: null,
|
||||
imgId: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.datas = { type: this.types }
|
||||
console.log(this.linkChange, 111111111111)
|
||||
|
||||
// console.log(this.datas, 11)
|
||||
},
|
||||
methods: {
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
// console.log(params, 111111111111)
|
||||
const file = params.file
|
||||
const fileType = file.type
|
||||
const isImage = fileType.indexOf('image') != -1
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
// console.log(params)
|
||||
// 这里常规检验，看项目需求而定
|
||||
if (!isImage) {
|
||||
this.$message.error('只能上传图片格式png、jpg、gif、jpeg!')
|
||||
return
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('只能上传图片大小小于2M')
|
||||
return
|
||||
}
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData()
|
||||
// console.log(form)
|
||||
// 文件对象
|
||||
form.append('file', file)
|
||||
|
||||
// 如果等于'', 就调挂靠公司图片上传的接口
|
||||
// 项目封装的请求方法，下面做简单介绍
|
||||
if (this.linkChange == '') {
|
||||
imageUpload(form)
|
||||
.then((res) => {
|
||||
// 自行处理各种情况
|
||||
if (res.code === '200') {
|
||||
this.imgId = ''
|
||||
res.data.attachType = this.types
|
||||
this.imgId = res.data.filePath
|
||||
this.$emit('imgdata', res)
|
||||
}
|
||||
// this.FrontPhoto = res.fullUrl
|
||||
if (res.msg == '操作成功') {
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
// 如果等于备案,就调备案图片上传接口
|
||||
}
|
||||
// else if (this.linkChange == 'keepOnRecord') {
|
||||
// imageUpload(form)
|
||||
// .then((res) => {
|
||||
// // 自行处理各种情况
|
||||
// if (res.code === '200') {
|
||||
// this.imgId = ''
|
||||
// res.data.attachType = this.types
|
||||
// this.imgId = res.data.filePath
|
||||
// this.$emit('imgdata', res)
|
||||
// }
|
||||
// // this.FrontPhoto = res.fullUrl
|
||||
// if (res.msg == '操作成功') {
|
||||
// this.$message({
|
||||
// message: '上传成功！',
|
||||
// type: 'success',
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log(err)
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onRemove() {
|
||||
if (this.imgId != '') {
|
||||
this.$emit('removeIds', this.imgId)
|
||||
}
|
||||
},
|
||||
uploadchangeFile(file) {
|
||||
this.FrontPhoto = URL.createObjectURL(file.raw)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.el-upload__tip {
|
||||
line-height: 25px;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
214
src/components/uploadFile/ManyImageUpload.vue
Normal file
214
src/components/uploadFile/ManyImageUpload.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
|
||||
:action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card"
|
||||
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview" :on-progress="uploadProgrees"
|
||||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<!-- <button @click="test()">test</button> -->
|
||||
</div>
|
||||
<el-dialog :visible.sync="showpicture" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/api/portal/Upload.js'
|
||||
import {
|
||||
getStorage
|
||||
} from '@/utils/auth.js'
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
export default {
|
||||
model: {
|
||||
prop: 'imageFileList',
|
||||
event: 'fileListChange'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
// 图片路径--全路径
|
||||
imageFileList: {
|
||||
type: Array,
|
||||
required: []
|
||||
},
|
||||
num: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
files: [],
|
||||
showpicture: false,
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
imageFileList: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
// debugger
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = []
|
||||
this.$nextTick(() => {
|
||||
for (var i = 0; i < newVal.length; i++) {
|
||||
// debugger
|
||||
this.files.push({
|
||||
name: newVal[i],
|
||||
url: newVal[i],
|
||||
// fullUrl: newVal[i]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
'token': getStorage()
|
||||
}
|
||||
console.log('token', this.accessToken)
|
||||
// console.log('imageFileList', this.imageFileList)
|
||||
},
|
||||
methods: {
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
// 1. 文件上传用token
|
||||
// this.accessToken = {
|
||||
// token: this.token
|
||||
// }
|
||||
//
|
||||
console.log('aaaa2', this.imageFileList)
|
||||
if (this.imageFileList !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.imageFileList.length; i++) {
|
||||
// console.log('aaaa', i)
|
||||
this.files.push({
|
||||
name: this.imageFileList[i],
|
||||
url: this.imageFileList[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
}, // 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, ImageFileList) {
|
||||
console.log('上传成功!')
|
||||
// debugger
|
||||
this.loadding = false
|
||||
if (file.response.code === '200') {
|
||||
// debugger
|
||||
// 返显图片
|
||||
this.dialogImageUrl = file.response.data.fullUrl
|
||||
var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
// url: file.response.data.fullUrl,
|
||||
// fullUrl: file.response.data.fullUrl,
|
||||
// size: file.response.data.size,
|
||||
// sourceFileName: file.response.data.sourceFileName
|
||||
})
|
||||
const imgFiles = []
|
||||
this.files.forEach(o => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileListChange', imgFiles)
|
||||
console.log('上传成功：' + JSON.stringify(this.files))
|
||||
// this.$emit('fileChange', this.files)
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
console.log('删除照片',file)
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
console.log('删除照片',this.files)
|
||||
const imgFiles = []
|
||||
this.files.forEach(o => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files,imgFiles)
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
// this.dialogImageUrl = file.url
|
||||
// this.dialogImageUrl = file.fullUrl
|
||||
this.dialogImageUrl = file.url
|
||||
this.showpicture = true
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
// console.log('event:', event)
|
||||
},
|
||||
test() {
|
||||
console.log('aaa', this.files)
|
||||
this.$set(this.files, this.files)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 250px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: block;
|
||||
// float: left;
|
||||
}
|
||||
</style>
|
||||
116
src/components/uploadFile/index.vue
Normal file
116
src/components/uploadFile/index.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-upload class="avatar-uploader" ref="upload" :action="fakeaction" :show-file-list="false" :on-change="uploadchangeFile" :http-request="uploadSectionFile">
|
||||
<!-- <el-button size="small" type="primary">点击上传</el-button> -->
|
||||
<img v-if="Photo" :src="Photo" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imageUpload } from '@/api/Common/Upload.js'
|
||||
export default {
|
||||
props: {
|
||||
tip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
FrontPhoto: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Photo: this.FrontPhoto,
|
||||
loading: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen2() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
},
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
const file = params.file,
|
||||
fileType = file.type,
|
||||
isImage = fileType.indexOf('image') != -1,
|
||||
isLt2M = file.size / 1024 / 1024 < 10
|
||||
this.openFullScreen2()
|
||||
console.log(params)
|
||||
// 这里常规检验，看项目需求而定
|
||||
if (!isImage) {
|
||||
this.$message.error('只能上传图片格式png、jpg、gif!')
|
||||
this.loading.close()
|
||||
return
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('只能上传图片大小小于10M')
|
||||
this.loading.close()
|
||||
return
|
||||
}
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData()
|
||||
console.log(form)
|
||||
// 文件对象
|
||||
form.append('file', file)
|
||||
|
||||
// 项目封装的请求方法，下面做简单介绍
|
||||
imageUpload(form)
|
||||
.then((res) => {
|
||||
//自行处理各种情况
|
||||
console.log(res)
|
||||
this.$emit('imgUrl', res.data)
|
||||
this.Photo = res.data.fullUrl
|
||||
if (res.code == 200) {
|
||||
this.loading.close()
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
uploadchangeFile(file) {
|
||||
// this.Photo = URL.createObjectURL(file.raw)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
252
src/components/uploadFile/upload.vue
Normal file
252
src/components/uploadFile/upload.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-upload class="upload-demo" :data="datas" :accept="accept" :on-success="uploadImgSuccess"-->
|
||||
<!-- :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian"-->
|
||||
<!-- :http-request="uploadSectionFile">-->
|
||||
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
|
||||
<!-- <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div>-->
|
||||
<!-- </el-upload>-->
|
||||
<!-- <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">-->
|
||||
<!-- <i class="el-icon-plus"></i>-->
|
||||
<!-- </el-upload>-->
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<!-- <el-button v-show="isview" size="small" type="primary" @click="view()">查看</el-button> -->
|
||||
<!-- <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div> -->
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
// if (this.stateName = 'xunidingjinAdd') {
|
||||
// if (this.files.length > 1) {
|
||||
// this.files.splice(0, 1)
|
||||
// }
|
||||
// }
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.stateName = 'xunidingjinAdd'
|
||||
this.files = imgList
|
||||
console.log('回显图片', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
244
src/components/uploadFile/uploadImg.vue
Normal file
244
src/components/uploadFile/uploadImg.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
|
||||
:action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card"
|
||||
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
|
||||
:on-progress="uploadProgrees"
|
||||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
// if (this.stateName = 'xunidingjinAdd') {
|
||||
// if (this.files.length > 1) {
|
||||
// this.files.splice(0, 1)
|
||||
// }
|
||||
// }
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.stateName = 'xunidingjinAdd'
|
||||
this.files = imgList
|
||||
console.log('回显图片', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
229
src/components/uploadFile/upload_changjiatuku.vue
Normal file
229
src/components/uploadFile/upload_changjiatuku.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview" :show-file-list="false" :multiple="true">
|
||||
<el-button size="mini" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadimg_tuiku } from '@/api/Common/Upload'
|
||||
import { getStorage } from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.JPG,.JPEG'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadimg_tuiku,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadimg_tuiku // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
showImg(sid) {
|
||||
// this.uploadData.sid = sid
|
||||
},
|
||||
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
// this.getUrl()
|
||||
// SaveList(this.tempInfo).then(response => {
|
||||
// if (response.success) {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
242
src/components/uploadFile/upload_chexing.vue
Normal file
242
src/components/uploadFile/upload_chexing.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div><!---->
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview" :show-file-list="false">
|
||||
<el-button size="mini" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/portal/Upload_chexing.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import {
|
||||
SaveList
|
||||
} from '@/api/cheliang/basevehiclemodel'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
showImg(sid) {
|
||||
// this.uploadData.sid = sid
|
||||
},
|
||||
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('eett', this.files)
|
||||
this.$emit('change', this.files)
|
||||
// this.getUrl()
|
||||
// SaveList(this.tempInfo).then(response => {
|
||||
// if (response.success) {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
234
src/components/uploadFile/upload_cunfang.vue
Normal file
234
src/components/uploadFile/upload_cunfang.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div><!---->
|
||||
<el-upload class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian" list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview" :multiple="true">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile_yanchejiancha } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js' // token
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.JPG,.JPEG,'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile_yanchejiancha,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile_yanchejiancha // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
showImg(sid) {
|
||||
// this.uploadData.sid = sid
|
||||
},
|
||||
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
const files = []
|
||||
files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', files)
|
||||
this.$emit('eett', files)
|
||||
// this.getUrl()
|
||||
// SaveList(this.tempInfo).then(response => {
|
||||
// if (response.success) {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogVisible = true
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
242
src/components/uploadFile/upload_diaoche.vue
Normal file
242
src/components/uploadFile/upload_diaoche.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div><!---->
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview" :show-file-list="false">
|
||||
<el-button size="mini" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadImgFileList } from '@/api/portal/Upload_chexing.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import {
|
||||
SaveList
|
||||
} from '@/api/cheliang/basevehiclemodel'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadImgFileList,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadImgFileList // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
showImg(sid) {
|
||||
// this.uploadData.sid = sid
|
||||
},
|
||||
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
// this.getUrl()
|
||||
// SaveList(this.tempInfo).then(response => {
|
||||
// if (response.success) {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
237
src/components/uploadFile/upload_jianchabiao.vue
Normal file
237
src/components/uploadFile/upload_jianchabiao.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview" :show-file-list="false">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
// if (this.stateName = 'xunidingjinAdd') {
|
||||
// if (this.files.length > 1) {
|
||||
// this.files.splice(0, 1)
|
||||
// }
|
||||
// }
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.stateName = 'xunidingjinAdd'
|
||||
this.files = imgList
|
||||
console.log('回显图片', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push(file.response.data.fullUrl)
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
243
src/components/uploadFile/upload_maiduan.vue
Normal file
243
src/components/uploadFile/upload_maiduan.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
|
||||
:action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card"
|
||||
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
|
||||
:on-progress="uploadProgrees"
|
||||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
if (this.files.length > 1) {
|
||||
this.files.splice(0, 1)
|
||||
}
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.stateName = 'xunidingjinAdd'
|
||||
this.files = imgList
|
||||
console.log('回显图片', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
165
src/components/uploadFile/upload_morebypicture.vue
Normal file
165
src/components/uploadFile/upload_morebypicture.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" :limit="limit" list-type="picture-card" :file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview" :on-progress="uploadProgrees" :on-error="uploadError" :on-success="uploadImgSuccess_FuJian" :multiple="multiple">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile_yanchejiancha } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: '.jpg,.jpeg,.png,.JPG,.JPEG,'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile_yanchejiancha,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile_yanchejiancha // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.files = imgList
|
||||
console.log('123123123', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
console.log(this.name, 78788)
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
console.log(this.file)
|
||||
this.dialogVisible = true
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
// console.log('event:', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
245
src/components/uploadFile/upload_picture.vue
Normal file
245
src/components/uploadFile/upload_picture.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
|
||||
:action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card"
|
||||
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
|
||||
:on-progress="uploadProgrees"
|
||||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/portal/Upload.js'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.JPG,.JPEG'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
// if (this.stateName = 'xunidingjinAdd') {
|
||||
// if (this.files.length > 1) {
|
||||
// this.files.splice(0, 1)
|
||||
// }
|
||||
// }
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.stateName = 'xunidingjinAdd'
|
||||
this.files = imgList
|
||||
console.log('回显图片', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
filePath: file.response.data.filePath,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
230
src/components/uploadFile/upload_yanchejiancha.vue
Normal file
230
src/components/uploadFile/upload_yanchejiancha.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview" :show-file-list="false" :multiple="true">
|
||||
<el-button size="mini" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile_yanchejiancha } from '@/api/portal/Upload'
|
||||
import { getStorage } from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.JPG,.JPEG'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile_yanchejiancha,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile_yanchejiancha // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
showImg(sid) {
|
||||
// this.uploadData.sid = sid
|
||||
},
|
||||
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
const files = []
|
||||
files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', files)
|
||||
this.$emit('eett', files)
|
||||
// this.getUrl()
|
||||
// SaveList(this.tempInfo).then(response => {
|
||||
// if (response.success) {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
227
src/components/uploadFile/upload_yanchejianchaTuBiao.vue
Normal file
227
src/components/uploadFile/upload_yanchejianchaTuBiao.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :limit="limit" :headers="accessToken" :action="uploadFile"
|
||||
:accept="accept" list-type="picture-card" :file-list="files" :on-remove="removeImage"
|
||||
:on-preview="handlePictureCardPreview" :on-progress="uploadProgrees"
|
||||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/api/portal/Upload'
|
||||
import {
|
||||
getStorage
|
||||
} from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: ''
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: '.jpg,.jpeg,.png,.JPG,.JPEG,'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.files = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.files = imgList
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogVisible = true
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
this.$emit('change', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
// console.log('event:', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
104
src/components/uploadFileimg/index.vue
Normal file
104
src/components/uploadFileimg/index.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-upload class="avatar-uploader" ref="upload" action="fakeaction"
|
||||
:show-file-list="false"
|
||||
:on-change="uploadchangeFile"
|
||||
:http-request="uploadSectionFile">
|
||||
<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imageUpload } from '@/api/Upload.js'
|
||||
export default {
|
||||
props:{
|
||||
tip:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
FrontPhoto: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
const file = params.file,
|
||||
fileType = file.type,
|
||||
isImage = fileType.indexOf("image") != -1,
|
||||
isLt2M = file.size / 1024 / 1024 < 2;
|
||||
console.log(params)
|
||||
// 这里常规检验，看项目需求而定
|
||||
if (!isImage) {
|
||||
this.$message.error("只能上传图片格式png、jpg、gif!");
|
||||
return;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("只能上传图片大小小于2M");
|
||||
return;
|
||||
}
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData();
|
||||
console.log(form)
|
||||
// 文件对象
|
||||
form.append("file", file);
|
||||
|
||||
// 项目封装的请求方法，下面做简单介绍
|
||||
imageUpload(form).then(res => {
|
||||
//自行处理各种情况
|
||||
console.log(res)
|
||||
this.$emit('imgUrl',res.filePath)
|
||||
// this.FrontPhoto = res.fullUrl
|
||||
if(res.msg == '操作成功'){
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
});
|
||||
},
|
||||
uploadchangeFile(file){
|
||||
this.FrontPhoto = URL.createObjectURL(file.raw)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.el-upload__tip{
|
||||
line-height: 25px;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
242
src/components/uploadFileimg/upload.vue
Normal file
242
src/components/uploadFileimg/upload.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div><!---->
|
||||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
|
||||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||||
:on-preview="handlePictureCardPreview" :show-file-list="false">
|
||||
<el-button size="mini" type="primary">上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api/Common/Upload'
|
||||
import { getStorage } from '@/utils/auth.js' //token
|
||||
import {
|
||||
SaveList
|
||||
} from '@/api/cheliang/basevehiclemodel'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'departmentCode',
|
||||
'departmentLevel',
|
||||
'departmentType',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
showImg(sid) {
|
||||
// this.uploadData.sid = sid
|
||||
},
|
||||
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
// this.getUrl()
|
||||
// SaveList(this.tempInfo).then(response => {
|
||||
// if (response.success) {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
55
src/components/viewerjs/index.vue
Normal file
55
src/components/viewerjs/index.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div id="index">
|
||||
<ul>
|
||||
<li v-for="(item,index) of imgArr"><img :src="item" alt="图片描述"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Viewer from 'viewerjs';
|
||||
import 'viewerjs/dist/viewer.css';
|
||||
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data() {
|
||||
return {
|
||||
imgArr:[
|
||||
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181711937,4147085500&fm=26&gp=0.jpg',
|
||||
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1403641414,3238219543&fm=26&gp=0.jpg',
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
const ViewerDom = document.getElementById('index');
|
||||
const viewer = new Viewer(ViewerDom, {
|
||||
// 相关配置项,详情见下面
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
/* ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
ul li{
|
||||
width:265px;
|
||||
height: 180px;
|
||||
list-style: none;
|
||||
border:2px solid #CCC;
|
||||
border-radius: 3px;
|
||||
padding: 1px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
} */
|
||||
ul li img{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user