product_platform/wms-ui-admin
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新项目

Browse Source
This commit is contained in:
guoxing
2024-05-06 09:48:37 +08:00
parent fb97c504ef
commit 30d7c5611e
442 changed files with 41092 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/components/AreaPicker/index.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>

133
src/components/Tinymce/components/editorImage.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<div class="upload-container">
<el-button
icon="el-icon-upload"
size="mini"
:style="{background:color,borderColor:color}"
type="primary"
@click=" dialogVisible=true"
>上传图片
</el-button>
<el-dialog append-to-body :visible.sync="dialogVisible">
<el-upload
class="editor-slide-upload"
:action="uploadAction"
:headers="accessToken"
:data="dataObj"
:multiple="true"
:file-list="fileList"
:show-file-list="true"
list-type="picture-card"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</el-dialog>
</div>
</template>
<script>
import { policy } from '@/api/oss'
import { getStorage } from '@/utils/auth.js'
export default {
name: 'EditorSlideUpload',
props: {
color: {
type: String,
default: '#1890ff'
}
},
data() {
return {
uploadAction: process.env.VUE_APP_BASE_API + '/file/upload',
accessToken: null,
dialogVisible: false,
listObj: {},
fileList: [],
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
}
}
},
created() {
this.accessToken = {
token: getStorage()
}
},
methods: {
checkAllSuccess() {
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
},
handleSubmit() {
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
if (!this.checkAllSuccess()) {
this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
return
}
console.log(arr)
this.$emit('successCBK', arr)
this.listObj = {}
this.fileList = []
this.dialogVisible = false
},
handleSuccess(response, file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
// this.listObj[objKeyArr[i]].url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name
this.listObj[objKeyArr[i]].url = response.data.fullUrl
this.listObj[objKeyArr[i]].hasSuccess = true
return
}
}
},
handleRemove(file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
delete this.listObj[objKeyArr[i]]
return
}
}
},
beforeUpload(file) {
// const _self = this
// const fileName = file.uid;
// this.listObj[fileName] = {};
// return new Promise((resolve, reject) => {
// policy().then(response => {
// _self.dataObj.policy = response.data.policy;
// _self.dataObj.signature = response.data.signature;
// _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
// _self.dataObj.key = response.data.dir + '/${filename}';
// _self.dataObj.dir = response.data.dir;
// _self.dataObj.host = response.data.host;
// _self.listObj[fileName] = {hasSuccess: false, uid: file.uid, width: this.width, height: this.height};
// resolve(true)
// }).catch(err => {
// console.log(err)
// reject(false)
// })
// })
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.upload-container .editor-slide-upload{
margin-bottom: 20px;
}
</style>

163
src/components/Tinymce/index.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<div class="tinymce-container editor-container">
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
</div>
</div>
</template>
<script>
import editorImage from './components/editorImage'
import './zh_CN'
const plugins = [
`advlist anchor autolink autosave code codesample colorpicker colorpicker
contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime
legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace
spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`
]
const toolbar = [
`bold italic underline strikethrough alignleft aligncenter
alignright outdent indent blockquote undo redo removeformat`,
`hr bullist numlist link image charmap preview anchor pagebreak
fullscreen insertdatetime media table forecolor backcolor`
]
export default {
name: 'Tinymce',
components: { editorImage },
props: {
id: {
type: String
},
value: {
type: String,
default: ''
},
toolbar: {
type: Array,
required: false,
default() {
return []
}
},
menubar: {
default: 'file edit insert view format table'
},
height: {
type: Number,
required: false,
default: 360
},
width: {
type: Number,
required: false,
default: 720
}
},
data() {
return {
hasChange: false,
hasInit: false,
tinymceId: this.id || 'vue-tinymce-' + +new Date()
}
},
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
}
}
},
mounted() {
this.initTinymce()
},
activated() {
this.initTinymce()
},
deactivated() {
this.destroyTinymce()
},
destroyed() {
this.destroyTinymce()
},
methods: {
initTinymce() {
const _this = this
window.tinymce.init({
selector: `#${this.tinymceId}`,
width: this.width,
height: this.height,
language: 'zh_CN',
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
menubar: false,
plugins: plugins,
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true
this.$emit('input', editor.getContent())
})
}
})
},
destroyTinymce() {
if (window.tinymce.get(this.tinymceId)) {
window.tinymce.get(this.tinymceId).destroy()
}
},
setContent(value) {
window.tinymce.get(this.tinymceId).setContent(value)
},
getContent() {
window.tinymce.get(this.tinymceId).getContent()
},
imageSuccessCBK(arr) {
const _this = this
arr.forEach(v => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
})
}
}
}
</script>
<style scoped>
.tinymce-container {
position: relative;
}
.tinymce-container >>> .mce-fullscreen {
z-index: 10000;
}
.tinymce-textarea {
visibility: hidden;
z-index: -1;
}
.editor-custom-btn-container {
position: absolute;
right: 10px;
top: 2px;
/*z-index: 2005;*/
}
.editor-upload-btn {
display: inline-block;
}
</style>

230
src/components/Tinymce/zh_CN.js Normal file
View File

@@ -0,0 +1,230 @@
tinymce.addI18n('zh_CN',{
"Cut": "\u526a\u5207",
"Heading 5": "\u6807\u98985",
"Header 2": "\u6807\u98982",
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5bf9\u526a\u8d34\u677f\u7684\u8bbf\u95ee\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u952e\u8fdb\u884c\u590d\u5236\u7c98\u8d34\u3002",
"Heading 4": "\u6807\u98984",
"Div": "Div\u533a\u5757",
"Heading 2": "\u6807\u98982",
"Paste": "\u7c98\u8d34",
"Close": "\u5173\u95ed",
"Font Family": "\u5b57\u4f53",
"Pre": "\u9884\u683c\u5f0f\u6587\u672c",
"Align right": "\u53f3\u5bf9\u9f50",
"New document": "\u65b0\u6587\u6863",
"Blockquote": "\u5f15\u7528",
"Numbered list": "\u7f16\u53f7\u5217\u8868",
"Heading 1": "\u6807\u98981",
"Headings": "\u6807\u9898",
"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
"Formats": "\u683c\u5f0f",
"Headers": "\u6807\u9898",
"Select all": "\u5168\u9009",
"Header 3": "\u6807\u98983",
"Blocks": "\u533a\u5757",
"Undo": "\u64a4\u6d88",
"Strikethrough": "\u5220\u9664\u7ebf",
"Bullet list": "\u9879\u76ee\u7b26\u53f7",
"Header 1": "\u6807\u98981",
"Superscript": "\u4e0a\u6807",
"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
"Font Sizes": "\u5b57\u53f7",
"Subscript": "\u4e0b\u6807",
"Header 6": "\u6807\u98986",
"Redo": "\u91cd\u590d",
"Paragraph": "\u6bb5\u843d",
"Ok": "\u786e\u5b9a",
"Bold": "\u7c97\u4f53",
"Code": "\u4ee3\u7801",
"Italic": "\u659c\u4f53",
"Align center": "\u5c45\u4e2d",
"Header 5": "\u6807\u98985",
"Heading 6": "\u6807\u98986",
"Heading 3": "\u6807\u98983",
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
"Header 4": "\u6807\u98984",
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
"Underline": "\u4e0b\u5212\u7ebf",
"Cancel": "\u53d6\u6d88",
"Justify": "\u4e24\u7aef\u5bf9\u9f50",
"Inline": "\u6587\u672c",
"Copy": "\u590d\u5236",
"Align left": "\u5de6\u5bf9\u9f50",
"Visual aids": "\u7f51\u683c\u7ebf",
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
"Square": "\u65b9\u5757",
"Default": "\u9ed8\u8ba4",
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
"Circle": "\u7a7a\u5fc3\u5706",
"Disc": "\u5b9e\u5fc3\u5706",
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
"Name": "\u540d\u79f0",
"Anchor": "\u951a\u70b9",
"Id": "\u6807\u8bc6\u7b26",
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
"Special character": "\u7279\u6b8a\u7b26\u53f7",
"Source code": "\u6e90\u4ee3\u7801",
"Language": "\u8bed\u8a00",
"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
"B": "B",
"R": "R",
"G": "G",
"Color": "\u989c\u8272",
"Right to left": "\u4ece\u53f3\u5230\u5de6",
"Left to right": "\u4ece\u5de6\u5230\u53f3",
"Emoticons": "\u8868\u60c5",
"Robots": "\u673a\u5668\u4eba",
"Document properties": "\u6587\u6863\u5c5e\u6027",
"Title": "\u6807\u9898",
"Keywords": "\u5173\u952e\u8bcd",
"Encoding": "\u7f16\u7801",
"Description": "\u63cf\u8ff0",
"Author": "\u4f5c\u8005",
"Fullscreen": "\u5168\u5c4f",
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
"General": "\u666e\u901a",
"Advanced": "\u9ad8\u7ea7",
"Source": "\u5730\u5740",
"Border": "\u8fb9\u6846",
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
"Image description": "\u56fe\u7247\u63cf\u8ff0",
"Style": "\u6837\u5f0f",
"Dimensions": "\u5927\u5c0f",
"Insert image": "\u63d2\u5165\u56fe\u7247",
"Image": "\u56fe\u7247",
"Zoom in": "\u653e\u5927",
"Contrast": "\u5bf9\u6bd4\u5ea6",
"Back": "\u540e\u9000",
"Gamma": "\u4f3d\u9a6c\u503c",
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
"Resize": "\u8c03\u6574\u5927\u5c0f",
"Sharpen": "\u9510\u5316",
"Zoom out": "\u7f29\u5c0f",
"Image options": "\u56fe\u7247\u9009\u9879",
"Apply": "\u5e94\u7528",
"Brightness": "\u4eae\u5ea6",
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
"Edit image": "\u7f16\u8f91\u56fe\u7247",
"Color levels": "\u989c\u8272\u5c42\u6b21",
"Crop": "\u88c1\u526a",
"Orientation": "\u65b9\u5411",
"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
"Invert": "\u53cd\u8f6c",
"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
"Remove link": "\u5220\u9664\u94fe\u63a5",
"Url": "\u5730\u5740",
"Text to display": "\u663e\u793a\u6587\u5b57",
"Anchors": "\u951a\u70b9",
"Insert link": "\u63d2\u5165\u94fe\u63a5",
"Link": "\u94fe\u63a5",
"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
"None": "\u65e0",
"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
"Target": "\u6253\u5f00\u65b9\u5f0f",
"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
"Media": "\u5a92\u4f53",
"Alternative source": "\u955c\u50cf",
"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
"Insert video": "\u63d2\u5165\u89c6\u9891",
"Poster": "\u5c01\u9762",
"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
"Embed": "\u5185\u5d4c",
"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
"Page break": "\u5206\u9875\u7b26",
"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
"Preview": "\u9884\u89c8",
"Print": "\u6253\u5370",
"Save": "\u4fdd\u5b58",
"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
"Replace": "\u66ff\u6362",
"Next": "\u4e0b\u4e00\u4e2a",
"Whole words": "\u5168\u5b57\u5339\u914d",
"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
"Replace with": "\u66ff\u6362\u4e3a",
"Find": "\u67e5\u627e",
"Replace all": "\u5168\u90e8\u66ff\u6362",
"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
"Prev": "\u4e0a\u4e00\u4e2a",
"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
"Finish": "\u5b8c\u6210",
"Ignore all": "\u5168\u90e8\u5ffd\u7565",
"Ignore": "\u5ffd\u7565",
"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
"Rows": "\u884c",
"Height": "\u9ad8",
"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
"Border color": "\u8fb9\u6846\u989c\u8272",
"Column group": "\u5217\u7ec4",
"Row": "\u884c",
"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
"Row type": "\u884c\u7c7b\u578b",
"Insert table": "\u63d2\u5165\u8868\u683c",
"Body": "\u8868\u4f53",
"Caption": "\u6807\u9898",
"Footer": "\u8868\u5c3e",
"Delete row": "\u5220\u9664\u884c",
"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
"Scope": "\u8303\u56f4",
"Delete table": "\u5220\u9664\u8868\u683c",
"H Align": "\u6c34\u5e73\u5bf9\u9f50",
"Top": "\u9876\u90e8\u5bf9\u9f50",
"Header cell": "\u8868\u5934\u5355\u5143\u683c",
"Column": "\u5217",
"Row group": "\u884c\u7ec4",
"Cell": "\u5355\u5143\u683c",
"Middle": "\u5782\u76f4\u5c45\u4e2d",
"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
"Copy row": "\u590d\u5236\u884c",
"Row properties": "\u884c\u5c5e\u6027",
"Table properties": "\u8868\u683c\u5c5e\u6027",
"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
"V Align": "\u5782\u76f4\u5bf9\u9f50",
"Header": "\u8868\u5934",
"Right": "\u53f3\u5bf9\u9f50",
"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
"Cols": "\u5217",
"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
"Width": "\u5bbd",
"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
"Left": "\u5de6\u5bf9\u9f50",
"Cut row": "\u526a\u5207\u884c",
"Delete column": "\u5220\u9664\u5217",
"Center": "\u5c45\u4e2d",
"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
"Insert template": "\u63d2\u5165\u6a21\u677f",
"Templates": "\u6a21\u677f",
"Background color": "\u80cc\u666f\u8272",
"Custom...": "\u81ea\u5b9a\u4e49...",
"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
"No color": "\u65e0",
"Text color": "\u6587\u5b57\u989c\u8272",
"Table of Contents": "\u5185\u5bb9\u5217\u8868",
"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
"Words: {0}": "\u5b57\u6570\uff1a{0}",
"Insert": "\u63d2\u5165",
"File": "\u6587\u4ef6",
"Edit": "\u7f16\u8f91",
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
"Tools": "\u5de5\u5177",
"View": "\u89c6\u56fe",
"Table": "\u8868\u683c",
"Format": "\u683c\u5f0f"
});

109
src/components/Upload/multiUpload.vue Normal file
View File

@@ -0,0 +1,109 @@
<template> 
<div>
<el-upload
action="http://yxt-sc.oss-cn-huhehaote.aliyuncs.com/"
:data="dataObj"
list-type="picture-card"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview"
:limit="maxCount"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import {policy} from '@/api/oss'
export default {
name: 'multiUpload',
props: {
//图片属性数组
value: Array,
//最大上传图片数量
maxCount:{
type:Number,
default:5
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false,
dialogImageUrl:null
};
},
computed: {
fileList() {
let fileList=[];
for(let i=0;i<this.value.length;i++){
fileList.push({url:this.value[i]});
}
return fileList;
}
},
methods: {
emitInput(fileList) {
let value=[];
for(let i=0;i<fileList.length;i++){
value.push(fileList[i].url);
}
this.$emit('input', value)
},
handleRemove(file, fileList) {
this.emitInput(fileList);
},
handlePreview(file) {
this.dialogVisible = true;
this.dialogImageUrl=file.url;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir + '/${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handleUploadSuccess(res, file) {
this.fileList.push({url: file.name,url:this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name});
this.emitInput(this.fileList);
},
handleExceed(files, fileList) {
this.$message({
message: '最多只能上传'+this.maxCount+'张图片',
type: 'warning',
duration:1000
});
},
}
}
</script>
<style>
</style>

107
src/components/Upload/singleUpload-oss.vue Normal file
View File

@@ -0,0 +1,107 @@
<template> 
<div>
<el-upload
action="http://yxt-sc.oss-cn-huhehaote.aliyuncs.com/"
:data="dataObj"
list-type="picture"
:multiple="false" :show-file-list="showFileList"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="fileList[0].url" alt="">
</el-dialog>
</div>
</template>
<script>
import {policy} from '@/api/oss'
export default {
name: 'singleUpload',
props: {
value: String
},
computed: {
imageUrl() {
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf("/") + 1);
} else {
return null;
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function () {
return this.value !== null && this.value !== ''&& this.value!==undefined;
},
set: function (newValue) {
}
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false
};
},
methods: {
emitInput(val) {
this.$emit('input', val)
},
handleRemove(file, fileList) {
this.emitInput('');
},
handlePreview(file) {
this.dialogVisible = true;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir + '/${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handleUploadSuccess(res, file) {
this.showFileList = true;
this.fileList.pop();
this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name});
this.emitInput(this.fileList[0].url);
}
}
}
</script>
<style>
</style>

118
src/components/Upload/singleUpload.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div>
<el-upload
:action="uploadAction"
:headers="accessToken"
:data="dataObj"
list-type="picture"
:multiple="false"
:show-file-list="showFileList"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="fileList[0].url" alt="">
</el-dialog>
</div>
</template>
<script>
import { policy } from '@/api/oss'
import { getStorage } from '@/utils/auth.js'
export default {
name: 'SingleUpload',
props: {
value: String
},
data() {
return {
uploadAction: process.env.VUE_APP_BASE_API + '/file/upload',
accessToken: null,
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false
}
},
computed: {
imageUrl() {
return this.value
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf('/') + 1)
} else {
return null
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function() {
return this.value !== null && this.value !== '' && this.value !== undefined
},
set: function(newValue) {
}
}
},
created() {
this.accessToken = {
token: getStorage()
}
},
methods: {
emitInput(val) {
this.$emit('input', val)
},
handleRemove(file, fileList) {
this.emitInput('')
},
handlePreview(file) {
this.dialogVisible = true
},
beforeUpload(file) {
// const _self = this
// return new Promise((resolve, reject) => {
// policy().then(response => {
// _self.dataObj.policy = response.data.policy;
// _self.dataObj.signature = response.data.signature;
// _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
// _self.dataObj.key = response.data.dir + '/${filename}';
// _self.dataObj.dir = response.data.dir;
// _self.dataObj.host = response.data.host;
// resolve(true)
// }).catch(err => {
// console.log(err)
// reject(false)
// })
// })
},
handleUploadSuccess(res, file) {
this.showFileList = true
this.fileList.pop()
// this.fileList.push({ name: file.name, url: this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name })
this.fileList.push({ name: file.name, url: res.data.fullUrl })
this.emitInput(this.fileList[0].url)
}
}
}
</script>
<style>
</style>

368
src/components/VehicleConfigurationSub/vehicleconfiguration.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>