init: 初始化 hgmj 后台管理项目
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:label-width="labelWidth"
|
||||
label-position="right"
|
||||
size="medium"
|
||||
:model="formData"
|
||||
inline
|
||||
:rules="rules"
|
||||
:inline-message="false"
|
||||
>
|
||||
<el-form-item
|
||||
v-for="(item, i) in formItems"
|
||||
:key="i"
|
||||
:style="{ width: item.width }"
|
||||
:label="item.label"
|
||||
:prop="item.key"
|
||||
>
|
||||
<div :style="{ width: item.contentWidth || contentWidth }">
|
||||
<el-date-picker
|
||||
v-if="item.type === 'date'"
|
||||
v-model="formData[item.key]"
|
||||
type="date"
|
||||
size="normal"
|
||||
placeholder="请选择日期"
|
||||
></el-date-picker>
|
||||
<el-input-number
|
||||
v-else-if="item.type === 'number'"
|
||||
:style="{ width: item.width || '192px' }"
|
||||
v-model="formData[item.key]"
|
||||
size="small"
|
||||
:min="0"
|
||||
:placeholder="placeholderWidthFormItem(item)"
|
||||
></el-input-number>
|
||||
<el-switch
|
||||
v-else-if="item.type === 'switch'"
|
||||
v-model="formData[item.key]"
|
||||
:disabled="item.disabled"
|
||||
></el-switch>
|
||||
<el-select
|
||||
v-else-if="item.type === 'select'"
|
||||
v-model="formData[item.key]"
|
||||
:disabled="item.disabled"
|
||||
:placeholder="placeholderWidthFormItem(item)"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(option, index) in item.options"
|
||||
:key="index"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<base-upload
|
||||
v-else-if="item.type === 'image'"
|
||||
v-model="formData[item.key]"
|
||||
:cover="formData[item.key]"
|
||||
:hide="true"
|
||||
width="100px"
|
||||
height="100px"
|
||||
@successCallback="(res) => {formData[item.key] = res.data.coverImg}"
|
||||
></base-upload>
|
||||
<imgs-upload
|
||||
ref="imgsUpload"
|
||||
v-else-if="item.type === 'images'"
|
||||
v-model="formData[item.key]"
|
||||
:hide="true"
|
||||
width="100px"
|
||||
height="100px"
|
||||
></imgs-upload>
|
||||
<el-input
|
||||
v-else
|
||||
:type="item.type"
|
||||
v-model="formData[item.key]"
|
||||
:placeholder="item.placeholder || placeholderWidthFormItem(item)"
|
||||
clearable
|
||||
size="small"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<slot></slot>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseUpload from "../baseUpload.vue";
|
||||
import ImgsUpload from "../imgsUpload.vue";
|
||||
|
||||
export default {
|
||||
name: "ConfigForms",
|
||||
components: { baseUpload, ImgsUpload },
|
||||
props: {
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: "80px"
|
||||
},
|
||||
contentWidth: {
|
||||
type: String,
|
||||
default: "200px"
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Array<FormItem>
|
||||
* FormItem:
|
||||
* - label: string
|
||||
* - key: string | number
|
||||
* - required: bool
|
||||
* - type?: 'select' | 'date' | 'text' | 'textarea' | 'number' | 'tags'
|
||||
* - options?: FormOption[]
|
||||
*
|
||||
*
|
||||
* FormOption:
|
||||
* - label: string
|
||||
* - value: string | number
|
||||
*/
|
||||
formItems: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
tagList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
const rs = {};
|
||||
this.formItems.forEach((item) => {
|
||||
rs[item.key] = [
|
||||
{
|
||||
required: !!item.required,
|
||||
message: this.placeholderWidthFormItem(item)
|
||||
}
|
||||
];
|
||||
});
|
||||
return rs;
|
||||
},
|
||||
containTags() {
|
||||
return this.formItems.findIndex((v) => v.type === "tags") >= 0;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formItems: {
|
||||
handler() {
|
||||
this.setFormDataDefault();
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
data: {
|
||||
handler(val, oldVal) {
|
||||
let isSame = false;
|
||||
if (val && oldVal) {
|
||||
isSame = val.id === oldVal.id;
|
||||
}
|
||||
if (this.$refs.imgsUpload && !isSame) {
|
||||
this.$refs.imgsUpload.forEach((el) => el.clearImg());
|
||||
}
|
||||
if (val && Object.keys(val).length) {
|
||||
this.assign(this.formData, val, "entry");
|
||||
} else {
|
||||
Object.keys(this.formData).forEach(
|
||||
(key) => (this.formData[key] = null)
|
||||
);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
formData: {
|
||||
handler(val) {
|
||||
this.$emit("change", val);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
async validate() {
|
||||
await this.$refs.form.validate();
|
||||
const data = {};
|
||||
this.assign(data, this.formData, "output");
|
||||
return data;
|
||||
},
|
||||
assign(target, source, type) {
|
||||
Object.keys(source).forEach((key) => {
|
||||
const itemVal = source[key];
|
||||
const config = this.formItems.find((v) => v.key === key);
|
||||
if (config) {
|
||||
const func = config[type];
|
||||
target[key] = func ? func(itemVal) : itemVal;
|
||||
} else {
|
||||
target[key] = itemVal;
|
||||
}
|
||||
});
|
||||
},
|
||||
placeholderWidthFormItem(item) {
|
||||
const prefix = {
|
||||
select: "请选择",
|
||||
date: "请选择",
|
||||
text: "请输入",
|
||||
number: "请输入",
|
||||
tags: "请选择",
|
||||
switch: "请选择",
|
||||
image: "请上传",
|
||||
images: "请上传"
|
||||
};
|
||||
const cur = prefix[item.type] || "请输入";
|
||||
return cur + item.label;
|
||||
},
|
||||
|
||||
setFormDataDefault() {
|
||||
this.formItems.forEach((v) => {
|
||||
this.$set(this.formData, v.key, null);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="config-table">
|
||||
<!-- search area -->
|
||||
<el-form class="config-table__search" size="mini" inline>
|
||||
<el-form-item
|
||||
v-for="item in searchConfig"
|
||||
:key="item.key"
|
||||
:label="item.label"
|
||||
>
|
||||
<el-input
|
||||
v-if="item.type === 'input'"
|
||||
size="small"
|
||||
v-model="params[item.key]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
@blur="inputBlur"
|
||||
@focus="inputFocus"
|
||||
></el-input>
|
||||
<el-input-number
|
||||
v-else-if="item.type === 'number'"
|
||||
:style="{ width: item.width || '192px' }"
|
||||
v-model="params[item.key]"
|
||||
size="small"
|
||||
:min="item.min"
|
||||
:max="item.max"
|
||||
:placeholder="item.placeholder"
|
||||
></el-input-number>
|
||||
<el-select
|
||||
v-else-if="item.type === 'select'"
|
||||
size="small"
|
||||
v-model="params[item.key]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="op in item.options"
|
||||
:key="op.value"
|
||||
:value="op.value"
|
||||
:label="op.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-if="item.type.startsWith('date')"
|
||||
v-model="params[item.key]"
|
||||
:type="item.type"
|
||||
size="small"
|
||||
:placeholder="item.placeholder"
|
||||
:start-placeholder="item.startPlaceholder"
|
||||
:end-placeholder="item.endPlaceholder"
|
||||
:clearable="item.clearable === undefined ? true : item.clearable"
|
||||
></el-date-picker>
|
||||
<el-button
|
||||
v-else-if="item.type === 'button' && !item.hidden"
|
||||
:disabled="item.isBatch && !isBatchButtonEnable"
|
||||
type="primary"
|
||||
:icon="`el-icon-${item.icon}`"
|
||||
size="small"
|
||||
@click="buttonAction(item)"
|
||||
>{{ item.placeholder }}</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- table area -->
|
||||
<div class="config-table__table">
|
||||
<el-table
|
||||
height="100%"
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
border
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="isSelection"
|
||||
type="selection"
|
||||
width="40"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.id"
|
||||
:min-width="column.width || 160"
|
||||
align="center"
|
||||
:label="column.name"
|
||||
:prop="column.key"
|
||||
:fixed="column.fixed"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="column.actions" class="table-column-actions">
|
||||
<div v-for="(action, i) in column.actions" :key="i">
|
||||
<el-button
|
||||
:class="{ isNullText: !action.text }"
|
||||
v-if="action.hidden ? !action.hidden(scope.row) : true"
|
||||
:type="action | getTagStyle"
|
||||
:icon="`el-icon-${action.key || action}`"
|
||||
size="mini"
|
||||
@click="rowAction(action, scope.row)"
|
||||
>{{ action.text }}</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="column.component">
|
||||
<component
|
||||
:is="column.component"
|
||||
v-bind="
|
||||
typeof column.props === 'function'
|
||||
? column.props(scope.row[column.key], scope.row)
|
||||
: column.props
|
||||
"
|
||||
>
|
||||
{{
|
||||
column.valueHandler
|
||||
? column.valueHandler(
|
||||
scope.row[column.key],
|
||||
scope.row,
|
||||
column.key
|
||||
)
|
||||
: scope.row[column.key]
|
||||
}}</component
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{
|
||||
column.valueHandler
|
||||
? column.valueHandler(
|
||||
scope.row[column.key],
|
||||
scope.row,
|
||||
column.key
|
||||
)
|
||||
: typeof scope.row[column.key] == "number"
|
||||
? scope.row[column.key]
|
||||
: scope.row[column.key] || "-"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- pagination area -->
|
||||
<div v-if="this.params.pageSize" class="pagination-footer">
|
||||
<el-pagination
|
||||
:page-sizes="pageSizes"
|
||||
:current-page.sync="params.pageNumber"
|
||||
:page-size.sync="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from "lodash";
|
||||
|
||||
export default {
|
||||
name: "ConfigTable",
|
||||
props: {
|
||||
searchConfig: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableColumns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [5, 10, 15, 20, 50, 100];
|
||||
},
|
||||
},
|
||||
selection: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
defaultParams: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
...this.defaultParams,
|
||||
},
|
||||
selectedData: [],
|
||||
isInputFocus: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// Object.keys(this.defaultParams).forEach(key => {
|
||||
// this.$set(this.params, key, this.defaultParams[key])
|
||||
// })
|
||||
},
|
||||
computed: {
|
||||
isSelection() {
|
||||
return (
|
||||
this.selection || this.searchConfig.findIndex((v) => v.isBatch) > -1
|
||||
);
|
||||
},
|
||||
isBatchButtonEnable() {
|
||||
return this.selectedData.length > 0;
|
||||
},
|
||||
// clearSelection 用于多选表格，清空用户的选择 —
|
||||
// toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected
|
||||
// toggleAllSelection 用于多选表格，切换所有行的选中状态 -
|
||||
// toggleRowExpansion 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） row, expanded
|
||||
// setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 row
|
||||
// clearSort 用于清空排序条件，数据会恢复成未排序的状态 —
|
||||
// clearFilter 用于清空过滤条件，数据会恢复成未过滤的状态 —
|
||||
// doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 —
|
||||
// sort 手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。 prop: string, order: string
|
||||
// name 说明
|
||||
// append 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。
|
||||
table() {
|
||||
return this.$refs.table;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
// / 输入框改变做防抖处理
|
||||
// this.isInputFocus ? this.debounceSearch() : this.search()
|
||||
this.debounceSearch();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
const params = {};
|
||||
Object.keys(this.params).forEach((key) => {
|
||||
params[key] = this.params[key];
|
||||
if (Array.isArray(this.params[key])) {
|
||||
const config = this.searchConfig.find((v) => v.key === key);
|
||||
if (config && Array.isArray(config.keys)) {
|
||||
config.keys.forEach((k, i) => (params[k] = this.params[key][i]));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit("change", params);
|
||||
},
|
||||
add() {
|
||||
this.$emit("add");
|
||||
},
|
||||
debounceSearch: debounce(function() {
|
||||
this.search();
|
||||
}, 500),
|
||||
inputFocus() {
|
||||
this.isInputFocus = true;
|
||||
},
|
||||
inputBlur() {
|
||||
this.isInputFocus = false;
|
||||
},
|
||||
buttonAction(item) {
|
||||
if (this.buttonLocakTimeout) {
|
||||
clearTimeout(this.buttonLocakTimeout);
|
||||
}
|
||||
this.buttonLocakTimeout = setTimeout(() => {
|
||||
this.buttonLock = false;
|
||||
}, 500);
|
||||
if (this.buttonLock) return;
|
||||
this.buttonLock = true;
|
||||
|
||||
if (item.isBatch) {
|
||||
this.rowAction(item.key, this.selectedData);
|
||||
} else {
|
||||
this.rowAction(item.key);
|
||||
}
|
||||
},
|
||||
rowAction(action, row) {
|
||||
if (typeof this[action] === "function") {
|
||||
// eslint-disable-next-line no-useless-call
|
||||
return this[action].call(this, row);
|
||||
}
|
||||
this.$emit(action.action || action, row);
|
||||
},
|
||||
selectChange(e) {
|
||||
this.selectedData = e;
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
getTagStyle(idx) {
|
||||
idx = idx.key || idx;
|
||||
if (idx === "edit") return "success";
|
||||
if (idx === "delete") return "danger";
|
||||
return "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.config-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 140px);
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__table {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
/deep/ .el-button--mini {
|
||||
padding: 7px 11px !important;
|
||||
font-weight: normal !important;
|
||||
&.isNullText {
|
||||
span {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-column-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-footer {
|
||||
z-index: 100;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #ebe5e1;
|
||||
|
||||
/deep/ .el-pagination {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item" v-show="i === 0" v-for="(src, i) in srcList" :key="i">
|
||||
<DecryptImg
|
||||
:src="src"
|
||||
:initial-index="i"
|
||||
:i-preview-src-list="previewBlobs"
|
||||
@load="onImgLoad(i, $event)"
|
||||
></DecryptImg>
|
||||
</div>
|
||||
<div v-if="srcList.length > 1" class="tag">
|
||||
<span>共{{ srcList.length }}张</span>
|
||||
</div>
|
||||
<div v-else-if="srcList.length < 1">
|
||||
<span>-</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DecryptImg from "@/components/decrypt-img";
|
||||
|
||||
export default {
|
||||
name: "Gallery",
|
||||
props: ["list"],
|
||||
components: { DecryptImg },
|
||||
computed: {
|
||||
srcList() {
|
||||
const list = (Array.isArray(this.list) ? this.list : [this.list]).filter(
|
||||
(v) => !!v
|
||||
);
|
||||
return list;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
timer: null,
|
||||
previewBlobs: [],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
activated() {},
|
||||
deactivated() {},
|
||||
methods: {
|
||||
onImgLoad(i, e) {
|
||||
const arr = Object.assign([], this.previewBlobs);
|
||||
arr[i] = e.blob;
|
||||
this.previewBlobs = arr;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gallery {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0px 8px;
|
||||
background-color: #0009;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="long-text">
|
||||
<span ref="textDom" class="ellipsis2" v-html="text || '-'"></span>
|
||||
<el-button v-if="(text && isEllipsis)" type="text" plain @click="view" icon="el-icon-zoom-in"></el-button>
|
||||
<rich-preview ref="rich"></rich-preview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RichPreview from "@/components/rich-preview";
|
||||
|
||||
export default {
|
||||
name: "LongText",
|
||||
props: ["text", "previewAlways"],
|
||||
components: { RichPreview },
|
||||
data() {
|
||||
return {
|
||||
isEllipsis: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
text() {
|
||||
this.updatePreviewMore();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updatePreviewMore();
|
||||
},
|
||||
methods: {
|
||||
async updatePreviewMore() {
|
||||
await this.$nextTick();
|
||||
const textDom = this.$refs.textDom;
|
||||
this.isEllipsis = textDom.scrollHeight > textDom.offsetHeight;
|
||||
},
|
||||
view() {
|
||||
const { isDialogDetail, sessionId } = this.$attrs;
|
||||
if (isDialogDetail) this.$refs.dialog.open({ id: sessionId });
|
||||
else this.$refs.rich.open(this.text);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@mixin multi-ellipsis($lines) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: $lines;
|
||||
line-break: anywhere;
|
||||
|
||||
/* autoprefixer: ignore next */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
@include multi-ellipsis(1);
|
||||
}
|
||||
|
||||
.ellipsis2 {
|
||||
@include multi-ellipsis(2);
|
||||
}
|
||||
|
||||
.ellipsis3 {
|
||||
@include multi-ellipsis(3);
|
||||
}
|
||||
|
||||
.long-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&__detail {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
align="center"
|
||||
:visible.sync="dialogVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body>
|
||||
<div :data="myData" class="my_data">
|
||||
<span>视频高度:{{ this.myData.height }}</span>
|
||||
<span>视频宽度:{{ this.myData.width }}</span>
|
||||
<span>视频时长:{{ this.myData.playTime + "s" }}</span>
|
||||
</div>
|
||||
<!-- <div class="media-box" id="media-box"></div> -->
|
||||
<div v-if="mediaUrl" style="width: 400px; heigth: 130px; background: red;margin-top:10px">
|
||||
<DPlayer
|
||||
ref="player"
|
||||
:video="{
|
||||
url: mediaUrl,
|
||||
type: type === 'mp4' ? '' : 'hls',
|
||||
pic: '',
|
||||
}"
|
||||
hotkey
|
||||
:autoplay="true"
|
||||
@playing="onPlayerPlay"
|
||||
@pause="onPlayerPause"
|
||||
@loadeddata="onPlayerLoadeddata"
|
||||
@error="onPlayerError"
|
||||
@ended="onPlayerEnded"
|
||||
@waiting="onPlayerWaiting"></DPlayer>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DPlayer from '../VueDplayerHls/index'
|
||||
|
||||
export default {
|
||||
name: 'ShowVideo',
|
||||
components: {
|
||||
DPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
mediaUrl: '',
|
||||
title: '封面图查看',
|
||||
params: {},
|
||||
myData: {},
|
||||
type: undefined,
|
||||
domain: '/api/web/media/m3u8/' // 存放图片的域名
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
token() {
|
||||
return this.$store.state.user.token
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// / 监听视频播放的回调函数
|
||||
onPlayerPlay() {},
|
||||
// / 监听暂停播放的回调函数
|
||||
onPlayerPause() {},
|
||||
// / 监听当前视频数据加载完成
|
||||
onPlayerLoadeddata() {},
|
||||
// / 监听当前视频数据加载失败
|
||||
onPlayerError() {},
|
||||
// / 监听当前视频数据加载ing
|
||||
onPlayerWaiting() {},
|
||||
// / 监听当前视频播放完成
|
||||
onPlayerEnded() {},
|
||||
handleClose() {
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
}
|
||||
this.dialogVisible = false
|
||||
this.mediaUrl = ''
|
||||
},
|
||||
open(url, data) {
|
||||
console.log(url);
|
||||
|
||||
this.myData = { ...data }
|
||||
this.dialogVisible = true
|
||||
this.title = '视频查看'
|
||||
// this.mediaUrl = this.domain + (url.match(RegExp(/.m3u8/)) ? url : url + '.m3u8')
|
||||
if (url.indexOf('mp4') !== -1) {
|
||||
this.mediaUrl = this.$store.getters.getSystemConfig.mp4Url + url
|
||||
this.type = 'mp4'
|
||||
} else {
|
||||
this.mediaUrl = (url.startsWith('http') ? '' : this.domain) + (url.match(RegExp(/.m3u8/)) ? url : url + '.m3u8')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.media-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
#my-video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div id="dplayer" ref="dplayer"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DPlayer from 'dplayer'
|
||||
import Hls from 'hls.js';
|
||||
window.Hls = Hls;
|
||||
export default {
|
||||
props: {
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
theme: { // 主题色
|
||||
type: String,
|
||||
default: '#FADFA3'
|
||||
},
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lang: {
|
||||
type: String,
|
||||
default: 'zh'
|
||||
},
|
||||
screenshot: { // 是否开启截图
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hotkey: { // 是否开启热键
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
preload: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
contextmenu: { // 自定义右键菜单
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
logo: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
video: {
|
||||
type: Object, // 可选值：‘auto’,'hls','flv','dash','webtorrent','normal'
|
||||
required: true,
|
||||
validator(value) {
|
||||
return typeof value.url === 'string'
|
||||
}
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dp: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
video(val) {
|
||||
if (this.dp) {
|
||||
this.dp.switchVideo(val) // 切换到其他视频
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.dp) {
|
||||
this.dp.destroy()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const player = (this.dp = new DPlayer({
|
||||
...{
|
||||
container: this.$refs.dplayer,
|
||||
autoplay: false,
|
||||
theme: this.theme,
|
||||
loop: this.loop,
|
||||
lang: this.lang,
|
||||
screenshot: this.screenshot,
|
||||
hotkey: this.hotkey,
|
||||
preload: this.preload,
|
||||
contextmenu: this.contextmenu,
|
||||
logo: this.logo,
|
||||
video: {
|
||||
url: this.video.url,
|
||||
pic: this.video.pic,
|
||||
type: this.video.type
|
||||
}
|
||||
},
|
||||
...this.option
|
||||
}))
|
||||
player.video.muted = true
|
||||
player.on('play', () => {
|
||||
this.$emit('play')
|
||||
})
|
||||
player.on('playing', () => {
|
||||
this.$emit('playing')
|
||||
})
|
||||
player.on('pause', () => {
|
||||
this.$emit('pause')
|
||||
})
|
||||
player.on('canplay', () => {
|
||||
this.$emit('canplay')
|
||||
})
|
||||
player.on('ended', () => {
|
||||
this.$emit('ended')
|
||||
})
|
||||
player.on('error', () => {
|
||||
this.$emit('error')
|
||||
})
|
||||
player.on('loadeddata', () => {
|
||||
this.$emit('loadeddata')
|
||||
if (this.autoplay) {
|
||||
player.play()
|
||||
player.video.muted = false
|
||||
}
|
||||
})
|
||||
player.on('loadedmetadata', () => {
|
||||
this.$emit('loadedmetadata')
|
||||
})
|
||||
player.on('waiting', () => {
|
||||
this.$emit('waiting')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#dplayer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Executable
+274
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="upload-img-box" @paste="onPaste">
|
||||
<el-upload class="avatar-uploader" action="#" name="upload" :show-file-list="false"
|
||||
:on-success="handleAvatarSuccess" :on-error="uploadError" :before-upload="beforeUpload"
|
||||
:http-request="handleUpload" accept="image/jpeg, image/png, image/jpg, image/gif, image/webp"
|
||||
:style="{ width: width, height: height }" ref="multipleUpload" list-type="picture"
|
||||
:disabled="uploading">
|
||||
<div v-if="cover" class="preview-box">
|
||||
<decrypt-img :src="imgUrl + cover" class="avatar" @click.stop="preview" @load="onImgLoad" />
|
||||
<div class="hover-cover">
|
||||
<i class="el-icon-view" @click.stop="preview"></i>
|
||||
<i class="el-icon-upload"></i>
|
||||
</div>
|
||||
</div>
|
||||
<i v-else-if="uploading" class="el-icon-loading avatar-uploader-icon" :style="{ lineHeight: height }"></i>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" :style="{ lineHeight: height }"></i>
|
||||
</el-upload>
|
||||
<p class="desc" v-if="isShow">
|
||||
<slot name="desc">
|
||||
<span>图片大小最好不要超过1M,且宽高度最好为{{ wSize + '*' + hSize }}</span>
|
||||
</slot>
|
||||
</p>
|
||||
</div>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<media-popup ref="mediaPopup"></media-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MediaPopup from '@/components/media-popup'
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import api from '@/api'
|
||||
// import { compressImage } from '@/utils/compressImage'
|
||||
export default {
|
||||
components: { MediaPopup },
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
cropperModel: false,
|
||||
// 当前选中的文件（未压缩裁剪之前）
|
||||
checkedFile: "",
|
||||
// 传递到裁剪框中的图片路径
|
||||
imgFile: "",
|
||||
lockImg: '',
|
||||
decryptBlob: null,
|
||||
uploading: false,
|
||||
};
|
||||
},
|
||||
props: ["cover", "width", "height", "id", "wSize", "hSize", "hide", "customPreview"],
|
||||
computed: {
|
||||
isShow() {
|
||||
return this.hide ? false : true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
const validTypes = [
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/webp',
|
||||
]
|
||||
if (!validTypes.includes(file.type)) {
|
||||
this.$message.error('仅支持 jpg、png、gif、webp 格式')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
async handleUpload({ file }) {
|
||||
this.uploading = true
|
||||
try {
|
||||
// const compressed = await compressImage(file)
|
||||
const formData = new FormData()
|
||||
formData.append('upload', file, file.name)
|
||||
if (this.id) {
|
||||
formData.append('id', this.id)
|
||||
}
|
||||
const res = await api.uploadImg(formData)
|
||||
if (res.code === 200) {
|
||||
return res
|
||||
}
|
||||
this.$message.error('上传封面图失败')
|
||||
throw new Error(res.msg || '上传失败')
|
||||
} catch (error) {
|
||||
this.$message.error('上传封面图失败')
|
||||
throw error
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 视频封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
if (!res || res.code !== 200) {
|
||||
this.$message.error("上传封面图失败");
|
||||
return
|
||||
}
|
||||
this.$emit("successCallback", res);
|
||||
},
|
||||
|
||||
onPaste(event) {
|
||||
const items = (event.clipboardData || window.clipboardData).items
|
||||
let file = null
|
||||
if (!items || items.length === 0) {
|
||||
this.$message.error('当前浏览器不支持本地')
|
||||
return
|
||||
}
|
||||
// 搜索剪切板items
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
file = items[i].getAsFile()
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!file) {
|
||||
this.$message.error('粘贴内容非图片')
|
||||
return
|
||||
}
|
||||
// 此时file就是我们的剪切板中的图片对象
|
||||
this.file = file
|
||||
this.uploadPlans()
|
||||
},
|
||||
|
||||
// 粘贴图片上传
|
||||
async uploadPlans() {
|
||||
const file = this.file
|
||||
if (!file) {
|
||||
this.$message.error('请粘贴图片后上传')
|
||||
return
|
||||
}
|
||||
this.uploading = true
|
||||
try {
|
||||
// const compressed = await compressImage(file)
|
||||
const form = new FormData()
|
||||
form.append('upload', file, file.name)
|
||||
if (this.id) {
|
||||
form.append('id', this.id)
|
||||
}
|
||||
const res = await api.uploadImg(form)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('上传成功!')
|
||||
this.lockImg = res.data.coverImg
|
||||
this.changeImgUrl()
|
||||
this.$emit('successCallback', res)
|
||||
} else {
|
||||
this.$message.error('上传失败!')
|
||||
this.lockImg = ''
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('上传失败!')
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
},
|
||||
|
||||
changeImgUrl() {
|
||||
this.$emit('changeImgUrl', this.lockImg)
|
||||
},
|
||||
|
||||
// 图片上传错误
|
||||
uploadError() {
|
||||
this.$message.error("上传封面图失败");
|
||||
},
|
||||
|
||||
preview() {
|
||||
if (this.customPreview) {
|
||||
this.$emit('preview')
|
||||
return
|
||||
}
|
||||
this.$refs.mediaPopup.open(this.decryptBlob, 'img')
|
||||
},
|
||||
onImgLoad(e) {
|
||||
this.decryptBlob = e.blob;
|
||||
this.$emit('load', e)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-popup {
|
||||
.el-dialog {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-img-box {
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.el-icon-plus {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.hover-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0008;
|
||||
opacity: 0;
|
||||
transition: all 0.25s ease-in;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover-cover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
line-height: 1;
|
||||
margin-top: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+203
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="upload-img-box" @paste="onPaste">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="uploadUrl"
|
||||
name="upload"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="uploadError"
|
||||
accept="image/jpeg, image/png, image/jpg, image/gif, image/webp"
|
||||
:style="{ width: width, height: height }"
|
||||
ref="multipleUpload"
|
||||
list-type="picture"
|
||||
:headers="header"
|
||||
:data="id ? { id: id } : {}"
|
||||
>
|
||||
<decrypt-img v-if="cover" :src="imgUrl + cover" :iPreviewSrcList="[]" class="avatar" @load="$emit('load', $event)" />
|
||||
<i
|
||||
v-else
|
||||
class="el-icon-plus avatar-uploader-icon"
|
||||
:style="{ lineHeight: height }"
|
||||
></i>
|
||||
</el-upload>
|
||||
<p class="desc" v-if="isShow">
|
||||
图片大小最好不要超过500kb,且宽高度最好为{{
|
||||
wSize + "*" + hSize
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { mapGetters } from 'vuex'
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import api from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
uploadUrl: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
cropperModel: false,
|
||||
// 当前选中的文件（未压缩裁剪之前）
|
||||
checkedFile: "",
|
||||
// 传递到裁剪框中的图片路径
|
||||
imgFile: "",
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
lockImg: "",
|
||||
};
|
||||
},
|
||||
props: [
|
||||
"cover",
|
||||
"width",
|
||||
"height",
|
||||
"id",
|
||||
"wSize",
|
||||
"hSize",
|
||||
"hide",
|
||||
"groupIndex",
|
||||
"index",
|
||||
],
|
||||
computed: {
|
||||
isShow() {
|
||||
return this.hide ? false : true;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// // 图片上传前验证
|
||||
// beforeAvatarUpload(file) {
|
||||
// const isLt3M = file.size / 1024 / 1024 < 0.5;
|
||||
// if (!isLt3M) {
|
||||
// this.$message.error("封面上传大小不能超过500kb");
|
||||
// return false
|
||||
// }
|
||||
// },
|
||||
// 视频封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
if (res.code === 200) {
|
||||
let obj = {
|
||||
res: res,
|
||||
groupIndex: this.groupIndex,
|
||||
index: this.index,
|
||||
};
|
||||
this.$emit("successCallback", obj);
|
||||
} else {
|
||||
this.$message.error("上传封面图失败");
|
||||
}
|
||||
},
|
||||
|
||||
onPaste(event) {
|
||||
const items = (event.clipboardData || window.clipboardData).items;
|
||||
let file = null;
|
||||
if (!items || items.length === 0) {
|
||||
this.$message.error("当前浏览器不支持本地");
|
||||
return;
|
||||
}
|
||||
// 搜索剪切板items
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf("image") !== -1) {
|
||||
file = items[i].getAsFile();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!file) {
|
||||
this.$message.error("粘贴内容非图片");
|
||||
return;
|
||||
}
|
||||
// 此时file就是我们的剪切板中的图片对象
|
||||
this.file = file;
|
||||
this.uploadPlans();
|
||||
},
|
||||
|
||||
// 上传文件成功后回调
|
||||
uploadPlans() {
|
||||
const file = this.file;
|
||||
if (!file) {
|
||||
this.$message.error("请粘贴图片后上传");
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
const form = new FormData();
|
||||
form.append("upload", file);
|
||||
form.append("type", this.type);
|
||||
api.uploadImg(form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "上传成功!",
|
||||
});
|
||||
this.lockImg = res.data.coverImg;
|
||||
this.changeImgUrl();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "上传失败!",
|
||||
});
|
||||
this.lockImg = "";
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
changeImgUrl() {
|
||||
this.$emit("changeImgUrl", this.lockImg);
|
||||
},
|
||||
|
||||
// 图片上传错误
|
||||
uploadError() {
|
||||
this.$message.error("上传封面图失败");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.dialog-popup {
|
||||
.el-dialog {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
.upload-img-box {
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-icon-plus {
|
||||
height: 100% !important;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
line-height: 1;
|
||||
margin-top: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+198
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="upload-img-box">
|
||||
<el-upload class="avatar-uploader" action="'string'" name="upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="uploadError" accept="image/jpeg,image/png,image/jpg, image/gif, image/webp" :on-change="handleCrop" :style="{width: width,height: height}" :auto-upload="false" :http-request="upload" ref="multipleUpload" list-type="picture">
|
||||
<img v-if="cover" :src="imgUrl + cover" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" :style="{lineHeight: height}"></i>
|
||||
</el-upload>
|
||||
<p class="desc">图片大小不能超过1M,且宽高度为{{wSize + '*' + hSize}}</p>
|
||||
<el-dialog :visible.sync="cropperModel" width="1100px" class="dialog-popup" append-to-body :title="'图片裁剪大小' + wSize + '*' + hSize">
|
||||
<Cropper :img-file="imgFile" ref="vueCropper" :fixedNumber="[wSize,hSize]" @upload="upload">
|
||||
</Cropper>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { mapGetters } from 'vuex'
|
||||
import baseConfig from '@/utils/serverUrlConfig'
|
||||
import Cropper from './cropper'
|
||||
import api from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
cropperModel: false,
|
||||
// 当前选中的文件（未压缩裁剪之前）
|
||||
checkedFile: '',
|
||||
// 传递到裁剪框中的图片路径
|
||||
imgFile: '',
|
||||
}
|
||||
},
|
||||
props: ['cover', 'action', 'width', 'height', 'id', 'wSize', 'hSize'],
|
||||
components: {
|
||||
Cropper
|
||||
},
|
||||
methods: {
|
||||
// 图片选择过后
|
||||
handleCrop(file) {
|
||||
this.cropperModel = true
|
||||
this.imgFile = URL.createObjectURL(file.raw)
|
||||
this.checkedFile = file
|
||||
},
|
||||
// 图片上传前验证
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt3M = file.size / 1024 / 1024 < 1.024;
|
||||
if (!isLt3M) {
|
||||
this.$message.error("封面上传大小不能超过1M");
|
||||
return false
|
||||
}
|
||||
//const isSize = new Promise(function (resolve, reject) {
|
||||
// let width = this.wSize;
|
||||
// let height = this.hSize;
|
||||
// let _URL = window.URL || window.webkitURL;
|
||||
// let img = new Image();
|
||||
// img.onload = function () {
|
||||
// let valid = img.width === width && img.height === height;
|
||||
// valid ? resolve() : reject();
|
||||
// }
|
||||
// img.src = _URL.createObjectURL(file);
|
||||
//}).then(() => {
|
||||
// return file;
|
||||
//}, () => {
|
||||
// this.$message.error('上传的图片宽高必须为' + this.wSize + '*' + this.hSize + '!');
|
||||
// return Promise.reject();
|
||||
//});
|
||||
//return isSize;
|
||||
},
|
||||
// 视频封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
if (res.code === 200) {
|
||||
this.$emit("successCallback", res)
|
||||
} else {
|
||||
this.$message.error('上传封面图失败')
|
||||
}
|
||||
},
|
||||
// 图片上传错误
|
||||
uploadError() {
|
||||
this.$message.error('上传封面图失败')
|
||||
},
|
||||
// 图片上传
|
||||
upload(data) {
|
||||
this.cropperModel = false;
|
||||
let img = new Image();
|
||||
img.src = data;
|
||||
img.onload = async () => {
|
||||
// 将base64转换成blob
|
||||
let blob = this.dataURItoBlob(data);
|
||||
let formData = new FormData();
|
||||
formData.append('upload', blob, this.checkedFile.name); // 有的后台需要传文件名，不然会报错
|
||||
if (this.id) {
|
||||
formData.append('id', this.id)
|
||||
}
|
||||
// 判断图片大小 超过500kb自动打包
|
||||
if (formData.get('upload').size / 1024 / 1024 > 1.024) {
|
||||
this.compress(img)
|
||||
} else {
|
||||
this.imgUpload(formData);
|
||||
}
|
||||
};
|
||||
},
|
||||
async imgUpload(formData) {
|
||||
api.uploadImg(formData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$emit("successCallback", res)
|
||||
this.$message({
|
||||
message: '上传成功',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message.error('上传失败');
|
||||
}
|
||||
this.uploading = false;
|
||||
this.$refs.vueCropper.flag = false;
|
||||
}).catch(() => {
|
||||
this.uploading = false;
|
||||
this.$message.error('上传失败');
|
||||
});
|
||||
},
|
||||
// 压缩图片
|
||||
compress(img) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let ctx = canvas.getContext('2d');
|
||||
// let initSize = img.src.length;
|
||||
let width = img.width;
|
||||
let height = img.height;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
// 铺底色
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
// 进行压缩
|
||||
let ndata = canvas.toDataURL('image/jpeg', 0.98);
|
||||
this.upload(ndata)
|
||||
},
|
||||
// base64转成bolb对象
|
||||
dataURItoBlob(base64Data) {
|
||||
let byteString;
|
||||
if (base64Data.split(',')[0].indexOf('base64') >= 0) { byteString = atob(base64Data.split(',')[1]); } else { byteString = unescape(base64Data.split(',')[1]); }
|
||||
let mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
|
||||
let ia = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
return new Blob([ia], { type: mimeString });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.dialog-popup {
|
||||
.el-dialog {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
.upload-img-box {
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-icon-plus {
|
||||
height: 100% !important;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
line-height: 1;
|
||||
margin-top: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Executable
+152
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'标签编辑'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="editParam" label-width="100px">
|
||||
<el-form-item label="标签:" prop="tags">
|
||||
<tag-selector
|
||||
v-model="editParam.tags"
|
||||
:tagList="tagList"
|
||||
></tag-selector>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新状态:" prop="overwrite">
|
||||
<el-select
|
||||
v-model="editParam.overwrite"
|
||||
size="small"
|
||||
placeholder="请选择更新状态"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in overwriteOptions"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitTag" size="small"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import TagSelector from "@/components/tagSelector";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TagSelector,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
tagList: [],
|
||||
editParam: {
|
||||
ids: [],
|
||||
tags: [],
|
||||
overwrite: true,
|
||||
},
|
||||
overwriteOptions: [
|
||||
{
|
||||
label: "覆盖写入",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "追加写入",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开弹窗并赋值需要修改
|
||||
open(videoIds) {
|
||||
this.getTagList();
|
||||
this.dialogVisible = true;
|
||||
this.editParam.ids = videoIds || [];
|
||||
},
|
||||
getTagList() {
|
||||
const params = {};
|
||||
API.queryTagList(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tagList = res.data.list;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
// 提交tags
|
||||
submitTag() {
|
||||
// const tags = this.editParam.tags.filter(
|
||||
// (item) => this.tagList.map((e) => e.name).indexOf(item) === -1
|
||||
// );
|
||||
// if (tags.length > 0) {
|
||||
// this.$confirm(
|
||||
// `标签${tags.join(",")}不属于常用标签，确定修改？`,
|
||||
// "提示",
|
||||
// {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning",
|
||||
// }
|
||||
// )
|
||||
// .then(() => {
|
||||
// this.editTags();
|
||||
// })
|
||||
// .catch(() => {
|
||||
// return false;
|
||||
// });
|
||||
// } else {
|
||||
this.editTags();
|
||||
// }
|
||||
},
|
||||
editTags() {
|
||||
if (!this.editParam.tags.length)
|
||||
return this.$message.error("请至少选择一个标签");
|
||||
API.batchEditTags(this.editParam)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerClose");
|
||||
} else {
|
||||
this.$message.error("编辑失败！");
|
||||
}
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div v-on:paste="handlePaste">
|
||||
<img-load
|
||||
v-if="lockImg"
|
||||
ref="preview"
|
||||
:src="imgUrl + lockImg"
|
||||
alt=""
|
||||
style="width:400px;height:300px;"
|
||||
></img-load>
|
||||
<div
|
||||
v-else
|
||||
style="width:300px;height:300px;border:1px solid;padding:20px;"
|
||||
>
|
||||
<div style="text-indent:2em;">
|
||||
将图片按<span style="color:red">cmd+C复制</span>到粘贴板，<span
|
||||
style="color:red"
|
||||
>cmd+V粘贴</span
|
||||
>至此处；
|
||||
</div>
|
||||
<div style="text-indent:2em;">
|
||||
或者<span style="color:red">Ctrl+Shift+cmd+4截图</span
|
||||
>保存在粘贴板，<span style="color:red">cmd+V粘贴</span>至此处
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import api from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
lockImg: "",
|
||||
};
|
||||
},
|
||||
props: {
|
||||
img: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
img: function(val, oldval) {
|
||||
this.lockImg = val;
|
||||
window.console.log(oldval);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.img) {
|
||||
this.lockImg = this.img;
|
||||
} else {
|
||||
this.lockImg = "";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePaste(event) {
|
||||
const items = (event.clipboardData || window.clipboardData).items;
|
||||
let file = null;
|
||||
if (!items || items.length === 0) {
|
||||
this.$message.error("当前浏览器不支持本地");
|
||||
return;
|
||||
}
|
||||
// 搜索剪切板items
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf("image") !== -1) {
|
||||
file = items[i].getAsFile();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!file) {
|
||||
this.$message.error("粘贴内容非图片");
|
||||
return;
|
||||
}
|
||||
// 此时file就是我们的剪切板中的图片对象
|
||||
this.file = file;
|
||||
this.uploadPlans();
|
||||
},
|
||||
// 上传文件成功后回调
|
||||
uploadPlans() {
|
||||
const file = this.file;
|
||||
if (!file) {
|
||||
this.$message.error("请粘贴图片后上传");
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
const form = new FormData();
|
||||
form.append("upload", file);
|
||||
form.append("type", this.type);
|
||||
api.uploadImg(form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "上传成功!",
|
||||
});
|
||||
this.lockImg = res.data.coverImg;
|
||||
this.changeImgUrl();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "上传失败!",
|
||||
});
|
||||
this.lockImg = "";
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
changeImgUrl() {
|
||||
this.$emit("changeImgUrl", this.lockImg);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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: 148px;
|
||||
height: 148px;
|
||||
line-height: 148px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户ID:" prop="toUserID">
|
||||
<el-input
|
||||
v-model.number="params.toUserID"
|
||||
size="small"
|
||||
placeholder="请输入用户ID"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容:" prop="content">
|
||||
<el-input
|
||||
v-model="params.content"
|
||||
type="textarea"
|
||||
rows="3"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="图片:"
|
||||
prop="image"
|
||||
style="width: 480px"
|
||||
>
|
||||
<base-upload
|
||||
:cover="params.image"
|
||||
:action="uploadUrl"
|
||||
@successCallback="uploadImg"
|
||||
:width="'120px'"
|
||||
:height="'120px'"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="sendComment()"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 封面上传地址
|
||||
uploadUrl: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
dialogVisible: false,
|
||||
title: "评论",
|
||||
// 提交状态
|
||||
flag: false,
|
||||
id: "",
|
||||
// 回复评论的参数
|
||||
params: {
|
||||
objID: "",
|
||||
cid: "",
|
||||
rid: "",
|
||||
level: 2,
|
||||
content: "",
|
||||
image: "",
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
content: [
|
||||
{ required: true, message: "请输入评论内容", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 图上传成功
|
||||
uploadImg(res) {
|
||||
this.params.image = res.data.coverImg;
|
||||
},
|
||||
sendComment() {
|
||||
const params = Object.assign({}, this.params);
|
||||
API.replyComment(params)
|
||||
.then((res) => {
|
||||
(res.code === 200 &&
|
||||
(this.$message.success("评论成功！"),
|
||||
this.handleClose(),
|
||||
this.$emit("handleList"))) ||
|
||||
this.$message.error("操作失败，请重试");
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error("操作失败，请重试");
|
||||
})
|
||||
.finally(() => {
|
||||
this.params.content = "";
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
objID: "",
|
||||
cid: "",
|
||||
rid: "",
|
||||
level: 2,
|
||||
content: "",
|
||||
image: "",
|
||||
};
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(data) {
|
||||
this.dialogVisible = true;
|
||||
this.params = {
|
||||
objID: data.objID,
|
||||
cid: data.cid || "",
|
||||
rid: data.level == 2 ? data.rid : undefined,
|
||||
level: data.level || 2,
|
||||
content: "",
|
||||
image: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Executable
+186
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="cropper-content">
|
||||
<!-- 剪裁框 -->
|
||||
<div class="cropper">
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="this.imgFile"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
:info="true"
|
||||
:full="option.full"
|
||||
:canMove="option.canMove"
|
||||
:canMoveBox="option.canMoveBox"
|
||||
:original="option.original"
|
||||
:autoCrop="option.autoCrop"
|
||||
:autoCropWidth="fixedNumber[0]"
|
||||
:autoCropHeight="fixedNumber[1]"
|
||||
:fixedBox="option.fixedBox"
|
||||
@realTime="realTime"
|
||||
:fixed="option.fixed"
|
||||
:fixedNumber="fixedNumber"
|
||||
></vueCropper>
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
></vueCropper>
|
||||
</div>
|
||||
<!-- 预览框 -->
|
||||
<div class="show-preview">
|
||||
<div :style="previews.div" class="preview">
|
||||
<img :src="previews.url" :style="previews.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-btn">
|
||||
<!-- 确认上传按钮 -->
|
||||
<div class="upload-btn">
|
||||
<!-- <el-button type="primary" @click="uploadImg('blob')">上传</el-button> -->
|
||||
<el-button type="primary" @click="uploadImg('base64')" :loading="flag">
|
||||
{{flag ? '正在上传' : '点击上传'}}
|
||||
<i class="el-icon-upload el-icon--right"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueCropper } from "vue-cropper";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
previews: {}, // 预览数据
|
||||
flag: false,
|
||||
option: {
|
||||
img: "", // 裁剪图片的地址 (默认：空)
|
||||
outputSize: 1, // 裁剪生成图片的质量 (默认:1)
|
||||
full: false, // 是否输出原图比例的截图 选true生成的图片会非常大 (默认:false)
|
||||
outputType: "png", // 裁剪生成图片的格式 (默认:jpg)
|
||||
canMove: true, // 上传图片是否可以移动 (默认:true)
|
||||
original: false, // 上传图片按照原始比例渲染 (默认:false)
|
||||
canMoveBox: true, // 截图框能否拖动 (默认:true)
|
||||
autoCrop: true, // 是否默认生成截图框 (默认:false)
|
||||
fixedBox: true, // 固定截图框大小 不允许改变 (默认:false)
|
||||
fixed: false, // 是否开启截图框宽高固定比例 (默认:true)
|
||||
fixedNumber: [1, 1], // 截图框比例 (默认:[1:1])
|
||||
enlarge: 1
|
||||
},
|
||||
downImg: "#"
|
||||
};
|
||||
},
|
||||
props: ["imgFile", "fixedNumber", "flags"],
|
||||
methods: {
|
||||
changeScale(num) {
|
||||
// 图片缩放
|
||||
num = num || 1;
|
||||
this.$refs.cropper.changeScale(num);
|
||||
},
|
||||
rotateLeft() {
|
||||
// 向左旋转
|
||||
this.$refs.cropper.rotateLeft();
|
||||
},
|
||||
rotateRight() {
|
||||
// 向右旋转
|
||||
this.$refs.cropper.rotateRight();
|
||||
},
|
||||
Update() {
|
||||
// this.file = this.imgFile
|
||||
this.option.img = this.imgFile;
|
||||
},
|
||||
realTime(data) {
|
||||
this.previews = data;
|
||||
},
|
||||
uploadImg() {
|
||||
// 将剪裁好的图片回传给父组件
|
||||
this.flag = true;
|
||||
event.preventDefault();
|
||||
let that = this;
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
that.$emit("upload", data);
|
||||
});
|
||||
}
|
||||
},
|
||||
components: { VueCropper }
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.cropper-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
}
|
||||
.cropper-content .cropper {
|
||||
width: 500px;
|
||||
height: 780px;
|
||||
}
|
||||
.cropper-content .show-preview {
|
||||
flex: 1;
|
||||
width: 500px;
|
||||
height: 780px;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
-webkit-flex: 1;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid #cccccc;
|
||||
background: #cccccc;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.preview {
|
||||
overflow: hidden;
|
||||
border: 1px solid #cccccc;
|
||||
background: black;
|
||||
}
|
||||
.footer-btn {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
}
|
||||
.footer-btn .scope-btn {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
}
|
||||
.footer-btn .upload-btn {
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
}
|
||||
.footer-btn .btn {
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
-webkit-transition: 0.1s;
|
||||
transition: 0.1s;
|
||||
font-weight: 500;
|
||||
padding: 8px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background-color: #67c23a;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="decrypt-img">
|
||||
<el-image class="decrypt-img"
|
||||
v-if="decryptBlob"
|
||||
:src="decryptBlob"
|
||||
:preview-src-list="previewSrcList"
|
||||
fit="contain"
|
||||
@load="onImgLoad"
|
||||
v-bind="$attrs"
|
||||
lazy
|
||||
></el-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { decryptTool } from "./tool";
|
||||
|
||||
export default {
|
||||
name: "LongText",
|
||||
props: ["src", "origin", "iPreviewSrcList"],
|
||||
emit: ["load"],
|
||||
data() {
|
||||
return {
|
||||
decryptBlob: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
previewSrcList() {
|
||||
if (this.iPreviewSrcList) return this.iPreviewSrcList;
|
||||
if (this.decryptBlob) return [this.decryptBlob];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src: {
|
||||
async handler(val) {
|
||||
const url = val.startsWith('http') ? val : this.$imgUrl + "/" + val;
|
||||
this.decryptBlob = !this.origin
|
||||
? await decryptTool.imgDecypt(url)
|
||||
: this.src;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onImgLoad(e) {
|
||||
this.$emit("load", {
|
||||
event: e,
|
||||
blob: this.decryptBlob,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.decrypt-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
export const decryptTool = {
|
||||
decryptKey: "2019ysapp7527",
|
||||
cachedBlobs: {},
|
||||
// 并发控制
|
||||
maxConcurrency: 10,
|
||||
activeCount: 0,
|
||||
queue: [],
|
||||
/**
|
||||
* @description 图片解密
|
||||
* @param url 需要解密的url
|
||||
* @returns 解密过后的图片链接
|
||||
*/
|
||||
async imgDecypt(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const task = async () => {
|
||||
try {
|
||||
const r = await fetch(url);
|
||||
const rb = await r.arrayBuffer();
|
||||
const blobUrl = this.imgEncrypt(rb);
|
||||
resolve(blobUrl);
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
} finally {
|
||||
// 任务完成，减少计数并尝试启动下一个队列任务
|
||||
this.activeCount = Math.max(0, this.activeCount - 1);
|
||||
if (this.queue.length > 0) {
|
||||
const next = this.queue.shift();
|
||||
this.activeCount++;
|
||||
next();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (this.activeCount < this.maxConcurrency) {
|
||||
this.activeCount++;
|
||||
task();
|
||||
} else {
|
||||
this.queue.push(task);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 图片解密
|
||||
* @param buffer buffer
|
||||
* @returns
|
||||
*/
|
||||
imgEncrypt(buffer) {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
const encoder = new TextEncoder();
|
||||
const KEY = encoder.encode(this.decryptKey);
|
||||
for (let i = 0; i < 100; i++) {
|
||||
bytes[i] ^= KEY[i % KEY.length];
|
||||
}
|
||||
const blob = new Blob([bytes], {
|
||||
type: "image/png",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
return url;
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div id="global-uploader" ref="gUploader">
|
||||
<!-- 上传 -->
|
||||
<uploader
|
||||
ref="uploader"
|
||||
:options="options"
|
||||
:autoStart="false"
|
||||
@file-added="onFileAdded"
|
||||
@file-success="onFileSuccess"
|
||||
@file-progress="onFileProgress"
|
||||
class="uploader-app"
|
||||
>
|
||||
<uploader-unsupport></uploader-unsupport>
|
||||
|
||||
<uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn"
|
||||
>选择文件</uploader-btn
|
||||
>
|
||||
<uploader-list></uploader-list>
|
||||
<uploader-list v-show="panelShow">
|
||||
<div
|
||||
class="file-panel"
|
||||
slot-scope="props"
|
||||
:class="{ collapse: collapse }"
|
||||
>
|
||||
<div class="file-title">
|
||||
<h2>文件列表</h2>
|
||||
<div class="operate">
|
||||
<el-button
|
||||
@click="fileListShow"
|
||||
type="text"
|
||||
:title="collapse ? '展开' : '折叠'"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="collapse ? 'inuc-fullscreen' : 'inuc-minus-round'"
|
||||
></i>
|
||||
</el-button>
|
||||
<el-button @click="close" type="text" title="关闭">
|
||||
<i class="iconfont icon-close"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="file-list" ref="fList">
|
||||
<li v-for="file in props.fileList" :key="file.id">
|
||||
<uploader-file
|
||||
:class="'file_' + file.id"
|
||||
ref="files"
|
||||
:file="file"
|
||||
:list="true"
|
||||
></uploader-file>
|
||||
</li>
|
||||
<div class="no-file" v-if="!props.fileList.length">
|
||||
<i class="iconfont icon-empty-file"></i> 暂无待上传文件
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</uploader-list>
|
||||
</uploader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 全局上传插件
|
||||
* 调用方法：Bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数
|
||||
* 监听函数：Bus.$on('fileAdded', fn); 文件选择后的回调
|
||||
* Bus.$on('fileSuccess', fn); 文件上传成功的回调
|
||||
*/
|
||||
import { ACCEPT_CONFIG } from "@/utils/uploadConfig";
|
||||
import Bus from "@/utils/eventBus.js";
|
||||
import SparkMD5 from "spark-md5";
|
||||
import local from "@/utils/localStroage.js";
|
||||
import { safeJsonParse } from "@/utils/safeJsonParse";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import api from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
target: baseConfig.baseServerUrl + "/vid/uploadDotStream",
|
||||
chunkSize: "2048000",
|
||||
fileParameterName: "upfile",
|
||||
maxChunkRetries: 3,
|
||||
testChunks: true, //是否开启服务器分片校验
|
||||
// 服务器分片校验函数，秒传及断点续传基础
|
||||
checkChunkUploadedByResponse: function (chunk, message) {
|
||||
const objMessage = safeJsonParse(message, {});
|
||||
if (objMessage.skipUpload) {
|
||||
return true;
|
||||
}
|
||||
return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0;
|
||||
},
|
||||
headers: {
|
||||
Authorization: local.get("userInfo")
|
||||
? local.get("userInfo").token
|
||||
: "",
|
||||
},
|
||||
query() { },
|
||||
},
|
||||
attrs: {
|
||||
accept: ACCEPT_CONFIG.getAll(),
|
||||
},
|
||||
panelShow: false, //选择文件后，展示上传panel
|
||||
collapse: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Bus.$on("openUploader", (query) => {
|
||||
this.params = query || {};
|
||||
if (this.$refs.uploadBtn) {
|
||||
document.getElementById("global-uploader-btn").click();
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
//Uploader实例
|
||||
uploader() {
|
||||
return this.$refs.uploader.uploader;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onFileAdded(file) {
|
||||
this.panelShow = true;
|
||||
this.computeMD5(file);
|
||||
Bus.$emit("fileAdded");
|
||||
},
|
||||
onFileProgress(rootFile, file, chunk) {
|
||||
window.console.log(
|
||||
`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024
|
||||
}`
|
||||
);
|
||||
},
|
||||
onFileSuccess(rootFile, file, response) {
|
||||
const res = safeJsonParse(response, null);
|
||||
if (!res) {
|
||||
this.$message({ message: "上传响应解析失败", type: "error" });
|
||||
this.statusSet(file.id, "failed");
|
||||
return;
|
||||
}
|
||||
// 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
|
||||
if (!res.result) {
|
||||
this.$message({ message: res.message, type: "error" });
|
||||
// 文件状态设为“失败”
|
||||
this.statusSet(file.id, "failed");
|
||||
return;
|
||||
}
|
||||
// 如果服务端返回需要合并
|
||||
if (res.needMerge) {
|
||||
// 文件状态设为“合并中”
|
||||
this.statusSet(file.id, "merging");
|
||||
api
|
||||
.mergeSimpleUpload({
|
||||
tempName: res.tempName,
|
||||
fileName: file.name,
|
||||
...this.params,
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.then((res) => {
|
||||
// 文件合并成功
|
||||
Bus.$emit("fileSuccess");
|
||||
this.statusRemove(file.id);
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.catch((e) => { });
|
||||
// 不需要合并
|
||||
} else {
|
||||
Bus.$emit("fileSuccess");
|
||||
window.console.log("上传成功");
|
||||
}
|
||||
},
|
||||
// onFileError(rootFile, file, response, chunk) {
|
||||
// this.$message({
|
||||
// message: response,
|
||||
// type: 'error'
|
||||
// })
|
||||
// },
|
||||
/**
|
||||
* 计算md5，实现断点续传及秒传
|
||||
* @param file
|
||||
*/
|
||||
computeMD5(file) {
|
||||
let fileReader = new FileReader();
|
||||
let time = new Date().getTime();
|
||||
let blobSlice =
|
||||
File.prototype.slice ||
|
||||
File.prototype.mozSlice ||
|
||||
File.prototype.webkitSlice;
|
||||
let currentChunk = 0;
|
||||
const chunkSize = 10 * 1024 * 1000;
|
||||
let chunks = Math.ceil(file.size / chunkSize);
|
||||
let spark = new SparkMD5.ArrayBuffer();
|
||||
// 文件状态设为"计算MD5"
|
||||
this.statusSet(file.id, "md5");
|
||||
file.pause();
|
||||
loadNext();
|
||||
fileReader.onload = (e) => {
|
||||
spark.append(e.target.result);
|
||||
if (currentChunk < chunks) {
|
||||
currentChunk++;
|
||||
loadNext();
|
||||
// 实时展示MD5的计算进度
|
||||
this.$nextTick(() => {
|
||||
document.getElementsByClassName(
|
||||
`myStatus_${file.id}`
|
||||
).innerText = `校验MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%`;
|
||||
});
|
||||
} else {
|
||||
let md5 = spark.end();
|
||||
this.computeMD5Success(md5, file);
|
||||
window.console.log(
|
||||
`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size
|
||||
} 用时：${new Date().getTime() - time} ms`
|
||||
);
|
||||
}
|
||||
};
|
||||
fileReader.onerror = function () {
|
||||
this.error(`文件${file.name}读取出错，请检查该文件`);
|
||||
file.cancel();
|
||||
};
|
||||
function loadNext() {
|
||||
let start = currentChunk * chunkSize;
|
||||
let end =
|
||||
start + chunkSize >= file.size ? file.size : start + chunkSize;
|
||||
fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
|
||||
}
|
||||
},
|
||||
computeMD5Success(md5, file) {
|
||||
// 将自定义参数直接加载uploader实例的opts上
|
||||
Object.assign(this.uploader.opts, {
|
||||
query: {
|
||||
...this.params,
|
||||
},
|
||||
});
|
||||
file.uniqueIdentifier = md5;
|
||||
file.resume();
|
||||
this.statusRemove(file.id);
|
||||
},
|
||||
fileListShow() {
|
||||
let gUploader = this.$refs.gUploader;
|
||||
let fList = this.$refs.fList;
|
||||
let list = Object.assign({ ...gUploader, ...fList });
|
||||
if (list.is(":visible")) {
|
||||
list.slideUp();
|
||||
this.collapse = true;
|
||||
} else {
|
||||
list.slideDown();
|
||||
this.collapse = false;
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.uploader.cancel();
|
||||
this.panelShow = false;
|
||||
},
|
||||
/**
|
||||
* 新增的自定义的状态: 'md5'、'transcoding'、'failed'
|
||||
* @param id
|
||||
* @param status
|
||||
*/
|
||||
statusSet(id, status) {
|
||||
let statusMap = {
|
||||
md5: {
|
||||
text: "校验MD5",
|
||||
bgc: "#fff",
|
||||
},
|
||||
merging: {
|
||||
text: "合并中",
|
||||
bgc: "#e2eeff",
|
||||
},
|
||||
transcoding: {
|
||||
text: "转码中",
|
||||
bgc: "#e2eeff",
|
||||
},
|
||||
failed: {
|
||||
text: "上传失败",
|
||||
bgc: "#e2eeff",
|
||||
},
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
document
|
||||
.getElementsByClassName(`myStatus_${id}`)
|
||||
.appendChild(`.file_${id} .uploader-file-status`)
|
||||
.css({
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
right: "0",
|
||||
bottom: "0",
|
||||
zIndex: "1",
|
||||
backgroundColor: statusMap[status].bgc,
|
||||
})
|
||||
.text(statusMap[status].text);
|
||||
});
|
||||
},
|
||||
statusRemove(id) {
|
||||
this.$nextTick(() => {
|
||||
document.getElementsByClassName(`myStatus_${id}`).removeChild();
|
||||
});
|
||||
},
|
||||
error(msg) {
|
||||
this.$notify({
|
||||
title: "错误",
|
||||
message: msg,
|
||||
type: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
destroyed() {
|
||||
Bus.$off("openUploader");
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#global-uploader {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
.uploader-app {
|
||||
width: 520px;
|
||||
}
|
||||
.file-panel {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 7px 7px 0 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
.file-title {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.operate {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.file-list {
|
||||
position: relative;
|
||||
height: 240px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
> li {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&.collapse {
|
||||
.file-title {
|
||||
background-color: #e7ecf2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-file {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 16px;
|
||||
}
|
||||
// /deep/.uploader-file-icon {
|
||||
// &:before {
|
||||
// content: '' !important;
|
||||
// }
|
||||
// &[icon=image] {
|
||||
// background: url(./images/image-icon.png);
|
||||
// }
|
||||
// &[icon=video] {
|
||||
// background: url(./images/video-icon.png);
|
||||
// }
|
||||
// &[icon=document] {
|
||||
// background: url(./images/text-icon.png);
|
||||
// }
|
||||
// }
|
||||
/deep/.uploader-file-actions > span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
/* 隐藏上传按钮 */
|
||||
#global-uploader-btn {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
Executable
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="img-wrap">
|
||||
<decrypt-img :src="src" class="cover" :style="{width: width, height: height}">
|
||||
<div slot="placeholder" class="image-slot" :style="{width: width, height: height, lineHeight: height}">
|
||||
<i class="el-icon-loading"></i>加载中
|
||||
</div>
|
||||
</decrypt-img>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<media-popup ref="mediaPopup" ></media-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MediaPopup from '@/components/media-popup'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MediaPopup,
|
||||
},
|
||||
props: ['width', 'height', 'src'],
|
||||
// created() {
|
||||
// console.log(this.src)
|
||||
// },
|
||||
methods: {
|
||||
// 查看媒体
|
||||
checkMedia(url, type) {
|
||||
this.$refs.mediaPopup.open(url, type)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
.image-slot {
|
||||
background: #f5f7fa;
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
.el-image__error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="upload-imgs-box">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
:action="uploadUrl"
|
||||
name="upload[]"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="uploadError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
accept="image/jpeg, image/png, image/jpg, image/gif, image/webp"
|
||||
:on-exceed="handleExceed"
|
||||
list-type="picture-card"
|
||||
multiple
|
||||
:limit="150"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
class="btnPics"
|
||||
type="success"
|
||||
@click="submitUpload"
|
||||
>选取图片</el-button
|
||||
>
|
||||
<!-- <el-button size="small" type="success" @click="submitUpload">上传</el-button> -->
|
||||
<div slot="tip" v-if="!notLimit">
|
||||
只能上传jpg、png、gif格式，大小不超过1M的图片
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import { decryptTool } from "@/components/decrypt-img/tool";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
SeriesCover: [],
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
uploadUrl: baseConfig.baseServerUrl + "/vid/uploadStaticBatch",
|
||||
cropperModel: false,
|
||||
// 当前选中的文件（未压缩裁剪之前）
|
||||
checkedFile: "",
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
};
|
||||
},
|
||||
props: [
|
||||
"cover",
|
||||
"width",
|
||||
"height",
|
||||
"id",
|
||||
"wSize",
|
||||
"hSize",
|
||||
"hide",
|
||||
"notLimit",
|
||||
],
|
||||
beforeDestroy() {
|
||||
this.revokePreviewUrls();
|
||||
},
|
||||
methods: {
|
||||
getImgBaseUrl() {
|
||||
let imgApi = this.$imgUrl || this.imgUrl || "";
|
||||
if (imgApi.slice(-1) === "/") {
|
||||
imgApi = imgApi.slice(0, -1);
|
||||
}
|
||||
return imgApi;
|
||||
},
|
||||
buildImageUrl(path) {
|
||||
if (!path) return "";
|
||||
if (/^https?:\/\//.test(path) || /^blob:/.test(path)) return path;
|
||||
const imgApi = this.getImgBaseUrl();
|
||||
const normalized = path.startsWith("/") ? path : `/${path}`;
|
||||
return `${imgApi}${normalized}`;
|
||||
},
|
||||
revokePreviewUrls() {
|
||||
this.fileList.forEach((file) => {
|
||||
if (file.url && file.url.startsWith("blob:")) {
|
||||
URL.revokeObjectURL(file.url);
|
||||
}
|
||||
});
|
||||
},
|
||||
//移除图片
|
||||
handleRemove(file, fileList) {
|
||||
if (file.url && file.url.startsWith("blob:")) {
|
||||
URL.revokeObjectURL(file.url);
|
||||
}
|
||||
this.fileList = fileList;
|
||||
const paths = fileList.map((f) => f.originalPath).filter(Boolean);
|
||||
this.SeriesCover = paths;
|
||||
this.$emit("successCallback", paths);
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
handlePreview(file) {},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 150 个文件，本次选择了 ${
|
||||
files.length
|
||||
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
||||
);
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
// 图片上传前验证
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt3M = file.size / 1024 / 1024 < 1.024;
|
||||
if (!isLt3M && !this.notLimit) {
|
||||
// this.fileList.pop()
|
||||
this.$message.error("图片上传大小不能超过1M");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
//图片上传成功回调
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
handleAvatarSuccess(response, file, fileList) {
|
||||
this.SeriesCover = [];
|
||||
this.$refs.upload.uploadFiles.forEach((e) => {
|
||||
if (e.response && e.response.data && e.response.data.filePath) {
|
||||
const originalPath = e.response.data.filePath[0];
|
||||
this.SeriesCover.push(originalPath);
|
||||
e.originalPath = originalPath;
|
||||
}
|
||||
});
|
||||
this.$emit("successCallback", this.SeriesCover);
|
||||
},
|
||||
//图片上传错误
|
||||
uploadError() {
|
||||
this.$message.error("上传封面图失败");
|
||||
},
|
||||
submitUpload() {
|
||||
let { uploadFiles } = this.$refs.upload;
|
||||
let form = new FormData();
|
||||
let status = "success";
|
||||
// 在这里对每一张图片进行大小的校验，如果不符合则提示，所有不符合的都提示，校验完成后只要有不符合条件的就不执行下面的操作
|
||||
uploadFiles.forEach((item) => {
|
||||
const size = item.raw.size / 1024 <= 1024;
|
||||
if (!size && !this.notLimit) {
|
||||
this.$message.error(`${item.raw.name}大小超过1M`);
|
||||
status = "failed";
|
||||
return;
|
||||
}
|
||||
form.append("upload[]", item.raw);
|
||||
});
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
// 符合条件后再将这个FormData对象传递给后端
|
||||
//调取接口上传form参数
|
||||
},
|
||||
|
||||
// 只要列表中状态改变on-change就会被调用
|
||||
uploadChange(file, fileList) {
|
||||
window.console.log(fileList);
|
||||
if (
|
||||
this.$refs.upload.uploadFiles.filter((i) => {
|
||||
return i.status !== "success";
|
||||
}).length === 0
|
||||
) {
|
||||
fileList = this.SeriesCover;
|
||||
this.fileList = [...this.fileList, ...this.SeriesCover];
|
||||
}
|
||||
},
|
||||
|
||||
ImageRequest(file) {
|
||||
this.formData.append("upload[]", file.file);
|
||||
},
|
||||
|
||||
// 清除图片
|
||||
clearImg() {
|
||||
this.revokePreviewUrls();
|
||||
this.fileList = [];
|
||||
this.SeriesCover = [];
|
||||
if (this.$refs.upload) {
|
||||
this.$refs.upload.clearFiles();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取回显图片（加密图需解密后展示）
|
||||
async getFileList(imgArr) {
|
||||
const list = Array.isArray(imgArr) ? imgArr.filter(Boolean) : [];
|
||||
this.revokePreviewUrls();
|
||||
this.SeriesCover = [...list];
|
||||
if (!list.length) {
|
||||
this.fileList = [];
|
||||
return;
|
||||
}
|
||||
const files = await Promise.all(
|
||||
list.map(async (path, index) => {
|
||||
const originalPath = path;
|
||||
try {
|
||||
const displayUrl = await decryptTool.imgDecypt(this.buildImageUrl(path));
|
||||
return {
|
||||
name: `image-${index + 1}`,
|
||||
url: displayUrl,
|
||||
status: "success",
|
||||
originalPath,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("img decrypt error:", error);
|
||||
return {
|
||||
name: `image-${index + 1}`,
|
||||
url: this.buildImageUrl(path),
|
||||
status: "success",
|
||||
originalPath,
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
this.fileList = files;
|
||||
},
|
||||
// submitUpload () {
|
||||
// this.formData = new FormData()
|
||||
// // 手动触发上传
|
||||
// this.$refs.upload.submit()
|
||||
// // 此时所有的钩子已经执行完了formData 中存的是通过校验的数据
|
||||
// // 此时在调用接口上传该数据
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.upload-imgs-box {
|
||||
width: 100%;
|
||||
.el-upload {
|
||||
width: 200px !important;
|
||||
height: 100px !important;
|
||||
.btnPics {
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+173
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div v-show="dialogVisible">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
align="center"
|
||||
:visible.sync="dialogVisible"
|
||||
top="5vh"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="true"
|
||||
append-to-body
|
||||
:modal-append-to-body="true"
|
||||
custom-class="media-preview-dialog"
|
||||
>
|
||||
<div class="media-box" v-if="videoShow">
|
||||
<video
|
||||
ref="videoEl"
|
||||
class="preview-video"
|
||||
controls
|
||||
preload="auto"
|
||||
playsinline
|
||||
></video>
|
||||
</div>
|
||||
<div class="media-box" id="img-box" v-if="imgShow">
|
||||
<decrypt-img :src="mediaUrl" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Hls from "hls.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import previewImages from "../utils/previewImages";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgShow: true,
|
||||
mediaUrl: "",
|
||||
videoShow: false,
|
||||
title: "封面图查看",
|
||||
myData: [],
|
||||
hls: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
token() {
|
||||
return this.$store.state.token;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyPlayer();
|
||||
},
|
||||
methods: {
|
||||
destroyPlayer() {
|
||||
if (this.hls) {
|
||||
this.hls.destroy();
|
||||
this.hls = null;
|
||||
}
|
||||
const video = this.$refs.videoEl;
|
||||
if (video) {
|
||||
video.pause();
|
||||
video.removeAttribute("src");
|
||||
video.load();
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.destroyPlayer();
|
||||
this.dialogVisible = false;
|
||||
this.imgShow = false;
|
||||
this.videoShow = false;
|
||||
this.mediaUrl = "";
|
||||
},
|
||||
initHlsPlayer(src) {
|
||||
const video = this.$refs.videoEl;
|
||||
if (!video || !src) return;
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
this.hls = new Hls({
|
||||
enableWorker: true,
|
||||
maxBufferLength: 15,
|
||||
maxMaxBufferLength: 180
|
||||
});
|
||||
this.hls.loadSource(src);
|
||||
this.hls.attachMedia(video);
|
||||
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
video.play().catch(() => {});
|
||||
});
|
||||
this.hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
if (!data.fatal || !this.hls) return;
|
||||
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
this.hls.startLoad();
|
||||
} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
|
||||
this.hls.recoverMediaError();
|
||||
} else {
|
||||
this.destroyPlayer();
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Safari 等原生 HLS
|
||||
if (video.canPlayType("application/vnd.apple.mpegurl")) {
|
||||
video.src = src;
|
||||
video.addEventListener(
|
||||
"loadedmetadata",
|
||||
() => {
|
||||
video.play().catch(() => {});
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
},
|
||||
open(url, type) {
|
||||
if (type === "img") {
|
||||
previewImages([url]);
|
||||
} else {
|
||||
this.destroyPlayer();
|
||||
this.dialogVisible = true;
|
||||
this.imgShow = false;
|
||||
this.videoShow = true;
|
||||
this.title = "视频查看";
|
||||
this.mediaUrl =
|
||||
baseConfig.baseServerUrl +
|
||||
baseConfig.playVideoUrl +
|
||||
url +
|
||||
"?token=" +
|
||||
this.token;
|
||||
this.$nextTick(() => {
|
||||
const dialog = document.querySelector(".media-preview-dialog");
|
||||
const wrapper = dialog && dialog.parentElement;
|
||||
if (wrapper) {
|
||||
wrapper.style.zIndex = "4000";
|
||||
}
|
||||
const modals = document.querySelectorAll(".v-modal");
|
||||
const modal = modals[modals.length - 1];
|
||||
if (modal) {
|
||||
modal.style.zIndex = "3999";
|
||||
}
|
||||
this.initHlsPlayer(this.mediaUrl);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.media-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.preview-video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: #000;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tag size="middle" style="margin: 0 5px;" closable v-for="(item,index) in value" :key="index"
|
||||
@close="closeTag(item)"
|
||||
>{{item.name}}</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputVisible"
|
||||
v-model="inputValue"
|
||||
ref="saveTagInput"
|
||||
size="small"
|
||||
@keyup.enter.native="$event.target.blur"
|
||||
@blur="handleInputConfirm"
|
||||
>
|
||||
</el-input>
|
||||
<el-card style="width: 500px;max-height: 200px;overflow-y: scroll;" v-if="tagList.length > 0">
|
||||
<el-button size="small" v-for="item in tagList" @click="clickTag(item.name, item.id)" :key="item.id"
|
||||
:type="item.name | valueClassFilter(tagStr)"
|
||||
:disabled="item.name | valueFilter(tagStr)"
|
||||
>{{item.name}}</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
filters: {
|
||||
valueFilter(tag, tagStr){
|
||||
return tagStr.indexOf(tag) >= 0 ? true : false
|
||||
},
|
||||
valueClassFilter(tag,tagStr){
|
||||
return tagStr.indexOf(tag) >= 0 ? 'info' : 'success'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tagList: {
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
value: {
|
||||
required: true,
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.value.length > 0) {
|
||||
for (const t of this.value) {
|
||||
this.tagStr.push(t.name)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputVisible: false,
|
||||
inputValue: '',
|
||||
tagStr: [],
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.tagStr = [];
|
||||
},
|
||||
methods: {
|
||||
clickTag(tag, id){
|
||||
if(this.value.length >= 5) {
|
||||
this.$message.error('帖子关联标签最多5个');
|
||||
return false
|
||||
}
|
||||
let arr = [...this.value]
|
||||
arr.push({"id": id, "name": tag})
|
||||
this.tagStr.push(tag)
|
||||
this.$emit('input', arr)
|
||||
},
|
||||
closeTag(item) {
|
||||
let arr = [...this.value]
|
||||
if (arr.length > 0) {
|
||||
for (const a of arr) {
|
||||
if (a.tag === item.tag) {
|
||||
arr.splice(this.value.indexOf(a.tag), 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
let tagStr = [...this.tagStr];
|
||||
tagStr.splice(this.tagStr.indexOf(item.tag), 1);
|
||||
this.tagStr = tagStr;
|
||||
this.$emit('input', arr)
|
||||
},
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
handleInputConfirm() {
|
||||
let inputValue = this.inputValue;
|
||||
if(this.value.length >= 5) {
|
||||
this.$message.error('帖子关联标签最多5个');
|
||||
this.inputVisible = false;
|
||||
this.inputValue = '';
|
||||
return false
|
||||
}
|
||||
if (inputValue) {
|
||||
let arr = [...this.value]
|
||||
arr.push(inputValue);
|
||||
this.$emit('input', arr)
|
||||
}
|
||||
this.inputVisible = false;
|
||||
this.inputValue = '';
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<!--渠道选择弹窗-->
|
||||
<el-dialog :title="'渠道选择'" :visible.sync="dialogVisible1" width="800px" :before-close="handleClose1" :close-on-click-modal="false" append-to-body>
|
||||
<div class="action-bar">
|
||||
<el-input size="small" placeholder="请输入渠道" style="width: 200px;" v-model="transParams.channel" clearable @keyup.enter.native="getNumberList('status')"></el-input>
|
||||
<el-button type="primary" size="small" class="checked" @click="getNumberList('status')">搜索</el-button>
|
||||
</div>
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border v-loading="loading" element-loading-text="拼命加载中" @selection-change="handleSelectionChange" @select="handleSelectionChange" ref="multipleTable"> -->
|
||||
<el-table :data="tableData" style="width: 100%" border v-loading="loading" element-loading-text="拼命加载中" @select="handleSelectionChange" ref="multipleTable" :row-key="(row)=>row.id">
|
||||
<el-table-column type="selection" width="55" reserve-selection></el-table-column>
|
||||
<el-table-column prop="channel" label="渠道" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.channel || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="device" label="设备" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.device || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-box" style="width:100%;height:70px">
|
||||
<el-pagination :page-sizes="[5]" :current-page="transParams.pageNumber" :page-size="transParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose1" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="checkedNumber()" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 内层弹出框
|
||||
dialogVisible1: false,
|
||||
// 内层弹窗表格加载状态
|
||||
loading: false,
|
||||
// 编辑是选中的渠道
|
||||
checkedChannel: [],
|
||||
selectedData: [],
|
||||
// 分页总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
tableData: [],
|
||||
// 渠道input框绑定值
|
||||
channel: '',
|
||||
// 请求渠道列表参数
|
||||
transParams: {
|
||||
channel: '',
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开表格选择弹窗
|
||||
open(data) {
|
||||
this.checkedChannel = data.split(',') || []
|
||||
this.dialogVisible1 = true;
|
||||
this.transParams.pageNumber = 1;
|
||||
this.getNumberList();
|
||||
},
|
||||
// 获取渠道列表
|
||||
getNumberList(type) {
|
||||
if (type === 'status') {
|
||||
this.transParams.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.getNumberList(this.transParams)
|
||||
.then(res => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
/// 添加默认选项
|
||||
this.tableData.find(item => {
|
||||
if (this.checkedChannel.includes(item.channel)) {
|
||||
this.$refs.multipleTable.toggleRowSelection(item, true)
|
||||
this.checkedChannel.splice(this.checkedChannel.indexOf(item.channel), 1)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.transParams.pageSize = size;
|
||||
this.transParams.pageNumber = 1;
|
||||
this.getNumberList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.transParams.pageNumber = pageNumber;
|
||||
this.getNumberList();
|
||||
},
|
||||
// 确认选中渠道
|
||||
checkedNumber() {
|
||||
if (!this.selectedData) {
|
||||
this.$message.error('请至少选择一个渠道！');
|
||||
return false;
|
||||
}
|
||||
this.handleClose1()
|
||||
let data = this.selectedData.map(res => res.channel).join(',')
|
||||
if (this.checkedChannel.length > 0) {
|
||||
data = data + ',' + this.checkedChannel.join(',')
|
||||
}
|
||||
this.$emit('onChange', data)
|
||||
},
|
||||
// 获取选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedData = selection;
|
||||
},
|
||||
// 内侧弹窗关闭
|
||||
handleClose1() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.transParams = {
|
||||
channel: '',
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
}
|
||||
this.dialogVisible1 = false;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
agent-action-box {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<!--渠道选择弹窗-->
|
||||
<el-dialog :title="'渠道选择'" :visible.sync="dialogVisible1" width="800px" :before-close="handleClose1" :close-on-click-modal="false" append-to-body>
|
||||
<div class="action-bar">
|
||||
<el-input size="small" placeholder="请输入渠道" style="width: 200px;" v-model="transParams.channel" clearable @keyup.enter.native="getNumberList('status')"></el-input>
|
||||
<el-button type="primary" size="small" class="checked" @click="getNumberList('status')">搜索</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" style="width: 100%" border v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" highlight-current-row @current-change="handleSelectionChange" ref="multipleTable">
|
||||
<!-- DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候在DOM对象上创建。
|
||||
如果在TAG对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。 -->
|
||||
<el-table-column prop="channel" label="渠道" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.channel || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="device" label="设备" align="center" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.device || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-box" style="width:100%;height:70px">
|
||||
<el-pagination :page-sizes="[5]" :current-page="transParams.pageNumber" :page-size="transParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose1" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="checkedNumber()" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 内层弹出框
|
||||
dialogVisible1: false,
|
||||
// 内层弹窗表格加载状态
|
||||
loading: false,
|
||||
// 编辑是选中的渠道
|
||||
checkedChannel: '',
|
||||
selectedData: null,
|
||||
// 分页总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
tableData: [],
|
||||
// 渠道input框绑定值
|
||||
channel: '',
|
||||
// 请求渠道列表参数
|
||||
transParams: {
|
||||
channel: '',
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开表格选择弹窗
|
||||
open(data) {
|
||||
this.checkedChannel = data
|
||||
this.dialogVisible1 = true;
|
||||
this.transParams.pageNumber = 1;
|
||||
this.getNumberList();
|
||||
},
|
||||
// 获取渠道列表
|
||||
getNumberList(type) {
|
||||
if (type === 'status') {
|
||||
this.transParams.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.getNumberList(this.transParams)
|
||||
.then(res => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
/// 添加默认选项
|
||||
this.tableData.find(item => {
|
||||
if (item.channel === this.checkedChannel) {
|
||||
this.$refs.multipleTable.setCurrentRow(item)
|
||||
return true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.transParams.pageSize = size;
|
||||
this.transParams.pageNumber = 1;
|
||||
this.getNumberList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.transParams.pageNumber = pageNumber;
|
||||
this.getNumberList();
|
||||
},
|
||||
// 确认选中渠道
|
||||
checkedNumber() {
|
||||
if (!this.selectedData) {
|
||||
this.$message.error('请选择一个渠道！');
|
||||
return false;
|
||||
}
|
||||
this.handleClose1()
|
||||
let data = this.selectedData.channel
|
||||
this.$emit('onChange', data)
|
||||
},
|
||||
// 获取选中数据
|
||||
handleSelectionChange(val) {
|
||||
this.selectedData = val;
|
||||
},
|
||||
// 内侧弹窗关闭
|
||||
handleClose1() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.transParams = {
|
||||
channel: '',
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
}
|
||||
this.dialogVisible1 = false;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
agent-action-box {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="reason-action-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" align="center" :close-on-click-modal="false" class="el-dialogs">
|
||||
<el-form label-width="0px" class="form-inline" align="left">
|
||||
<el-form-item>
|
||||
<el-button type="danger" :disabled="isEdit" icon="el-icon-plus" @click="handlerAdd">新增原因</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="tableData" :loading="loading" border>
|
||||
<el-table-column prop="content" label="驳回原因" width="370" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.content">{{ scope.row.content }}</span>
|
||||
<div v-else class="inline-item">
|
||||
<el-form :model="params" :inline="true" ref="form" label-width="0px" class="form-inline" align="center" size="mini">
|
||||
<el-form-item prop="content" style="width: 180px; margin-bottom: 0;">
|
||||
<el-input v-model="params.content" type="textarea" :placeholder="scope.row._placeholder" size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 60px">
|
||||
<el-button type="success" :loading="flag" size="small" @click="submitReason(scope.row)">确认</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 60px">
|
||||
<el-button type="primary" size="small" @click="handlerCancel()">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="small" @click="handlerEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="delReason(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="total>pageSize" class="table-pagination">
|
||||
<el-pagination :current-page.sync="pageNum" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 弹窗标题
|
||||
title: '原因列表',
|
||||
// 原因类型
|
||||
type: '',
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 表格加载状态
|
||||
loading: false,
|
||||
isEdit: false,
|
||||
// 新增帖子请求参数
|
||||
params: {
|
||||
content: ''
|
||||
},
|
||||
tableData: [],
|
||||
pageSize: 5,
|
||||
pageNum: 1,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 获取驳回原因列表
|
||||
getReasonList() {
|
||||
this.loading = true
|
||||
const params = Object.assign({}, {
|
||||
type: this.type,
|
||||
page: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
// content: this.params.content
|
||||
})
|
||||
API.getReasonList(params).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.total = res.data.total
|
||||
this.tableData = res.data.list || []
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
window.console.log(`每页 ${val} 条`)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val
|
||||
this.getReasonList()
|
||||
},
|
||||
handlerAdd() {
|
||||
this.tableData.unshift({ id: 'add', content: '', _placeholder: '请输入新增原因' })
|
||||
this.isEdit = true
|
||||
},
|
||||
handlerEdit(row) {
|
||||
if (this.isEdit) {
|
||||
this.$message.error('请先完成新增或其他列的修改！')
|
||||
return false
|
||||
}
|
||||
row._placeholder = row.content
|
||||
row.content = ''
|
||||
this.isEdit = true
|
||||
},
|
||||
handlerCancel() {
|
||||
this.isEdit = false
|
||||
this.params.content = ''
|
||||
this.getReasonList()
|
||||
},
|
||||
submitReason(row) {
|
||||
this.isEdit = false
|
||||
if (row.id === 'add') {
|
||||
this.addReason()
|
||||
} else {
|
||||
this.editReason(row)
|
||||
}
|
||||
this.params.content = ""
|
||||
},
|
||||
editReason(row) {
|
||||
this.flag = true
|
||||
const params = Object.assign({}, {
|
||||
id: row.id,
|
||||
content: this.params.content
|
||||
})
|
||||
API.editReasonList(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '编辑成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handlerCancel();
|
||||
} else {
|
||||
this.$message.error('编辑失败！')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.$message.error('编辑失败！')
|
||||
})
|
||||
},
|
||||
addReason() {
|
||||
this.flag = true
|
||||
const params = {
|
||||
type: this.type,
|
||||
content: this.params.content,
|
||||
}
|
||||
API.addReasonList(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '添加成功！',
|
||||
type: 'success'
|
||||
})
|
||||
this.params.content = ''
|
||||
this.pageNum = 1
|
||||
} else {
|
||||
this.$message.error('新增失败！');
|
||||
}
|
||||
this.flag = false
|
||||
this.getReasonList()
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false
|
||||
this.$message.error('添加失败！')
|
||||
})
|
||||
},
|
||||
delReason(row) {
|
||||
this.$confirm('您确定要删除当前原因吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const params = Object.assign({}, {
|
||||
ids: [row.id],
|
||||
})
|
||||
API.delReasonList(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.getReasonList()
|
||||
} else {
|
||||
this.$message.error('删除失败！');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false
|
||||
this.getReasonList()
|
||||
this.$message.error('删除失败！')
|
||||
})
|
||||
})
|
||||
},
|
||||
// 数据提交验证
|
||||
// submitForm() {
|
||||
// this.$refs.form.validate(valid => {
|
||||
// if (valid) {
|
||||
// this.flag = true
|
||||
// this.rejectPosts()
|
||||
// } else {
|
||||
// return false
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.params = {
|
||||
content: ''
|
||||
}
|
||||
this.isEdit = false
|
||||
this.tableData = []
|
||||
// this.$refs.form.resetFields()
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type) {
|
||||
this.dialogVisible = true
|
||||
this.type = type
|
||||
this.getReasonList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reason-action-box {
|
||||
.inline-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="富文本配置"
|
||||
width="50%"
|
||||
top="2%"
|
||||
:visible.sync="dialogVisible"
|
||||
@close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- <el-button type="warning" size="medium" @click="openAddImg"
|
||||
>图片上传</el-button
|
||||
> -->
|
||||
<el-button type="success" size="medium" @click="openLook"
|
||||
>预览页面</el-button
|
||||
>
|
||||
<el-button type="danger" size="medium" @click="handleCope"
|
||||
>复制图文</el-button
|
||||
>
|
||||
<el-button type="primary" size="medium" @click="handleSubmit"
|
||||
>保存</el-button
|
||||
>
|
||||
<br /><br />
|
||||
<div ref="content" id="wangEditor" class="wangEditor"></div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="上传图片"
|
||||
:visible.sync="dialogVisibleAddImg"
|
||||
width="800px"
|
||||
@close="handleAddImgClose"
|
||||
:close-on-click-modal="false"
|
||||
style="height:500px"
|
||||
>
|
||||
<el-form ref="form" :model="editParam" label-width="300px">
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="" prop="cover">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
name="upload"
|
||||
accept="image/jpeg, image/png, image/jpg, image/gif, image/webp"
|
||||
:action="action"
|
||||
:headers="header"
|
||||
:on-success="imageUploadSuccess"
|
||||
:on-error="imageUploadFail"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<decrypt-img
|
||||
v-if="editParam.cover"
|
||||
style="height: 100px"
|
||||
:src="setImage(editParam.cover)"
|
||||
:preview-src-list="[setImage(editParam.cover)]"
|
||||
>
|
||||
</decrypt-img>
|
||||
</el-form-item>
|
||||
</div>
|
||||
图片地址:
|
||||
<span>{{ editParam.cover ? setImage(editParam.cover) : null }}</span>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<rich-preview ref="preview"></rich-preview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入 wangEditor
|
||||
import wangEditor from "wangeditor";
|
||||
import RichPreview from "../rich-preview/index.vue";
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import { decryptTool } from "../decrypt-img/tool";
|
||||
|
||||
const isBlobUrl = (url) => /^blob:(https?|file):/.test(url);
|
||||
const observedElements = [];
|
||||
let observer = null;
|
||||
|
||||
export default {
|
||||
components: { RichPreview },
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogVisibleLook: false,
|
||||
dialogVisibleAddImg: false,
|
||||
editor: null,
|
||||
editorData: "",
|
||||
id: "",
|
||||
richText: "",
|
||||
cope_rich_text: "",
|
||||
data: "",
|
||||
video: null, //视频对象
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
editParam: {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
cover: "",
|
||||
},
|
||||
copySrc: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
this.observeEntry(entry);
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
},
|
||||
mounted() {
|
||||
// 监听 copy 事件
|
||||
// document.addEventListener("copy", this.handleCopy);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unobserveImages();
|
||||
observer.disconnect();
|
||||
// 移除事件监听
|
||||
// document.removeEventListener("copy", this.handleCopy);
|
||||
},
|
||||
methods: {
|
||||
handleCopy(event) {
|
||||
const newHtml = event.target.outerHTML;
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(newHtml, "text/html");
|
||||
if (
|
||||
doc.getElementsByTagName("img") &&
|
||||
doc.getElementsByTagName("img").length
|
||||
) {
|
||||
this.copySrc = doc.getElementsByTagName("img")[0].getAttribute("alt");
|
||||
} else {
|
||||
this.copySrc = "";
|
||||
}
|
||||
},
|
||||
createEditor() {
|
||||
const editor = new wangEditor(`#wangEditor`);
|
||||
editor.config.uploadImgServer = this.action;
|
||||
editor.config.uploadImgHeaders = this.header;
|
||||
editor.config.uploadFileName = "upload";
|
||||
editor.config.pasteFilterStyle = false;
|
||||
editor.config.pasteIgnoreImg = false;
|
||||
editor.config.customAlert = () => {};
|
||||
editor.config.uploadImgHooks = {
|
||||
customInsert: async (insertImgFn, result) => {
|
||||
if (result.code === 200) {
|
||||
// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
|
||||
insertImgFn(result.data.coverImg, "");
|
||||
this.handleDynamicElements();
|
||||
}
|
||||
},
|
||||
};
|
||||
editor.config.height = 700;
|
||||
// 配置 onchange 回调函数，将数据同步到 vue 中
|
||||
editor.config.onchange = (newHtml) => {
|
||||
this.editorData = newHtml;
|
||||
};
|
||||
// 粘贴的钩子
|
||||
editor.config.pasteTextHandle = (newHtml) => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(newHtml, "text/html");
|
||||
const images = doc.getElementsByTagName("img");
|
||||
for(let i = 0; i < images.length; i++) {
|
||||
let src = images[i].getAttribute("src");
|
||||
let originSrc = images[i].getAttribute("alt");
|
||||
setTimeout(() => {
|
||||
this.processImages(src, originSrc);
|
||||
}, 500);
|
||||
}
|
||||
return newHtml;
|
||||
};
|
||||
// 创建编辑器
|
||||
editor.create();
|
||||
if (this.richText != "" && this.richText != "") {
|
||||
editor.txt.html(this.richText);
|
||||
}
|
||||
this.editor = editor;
|
||||
this.handleDynamicElements();
|
||||
},
|
||||
processImages(src, originSrc) {
|
||||
const images = this.$refs.content.querySelectorAll("img[src]");
|
||||
images.forEach((img) => {
|
||||
if (img.getAttribute("src") == src) {
|
||||
img.setAttribute("origin-src", originSrc);
|
||||
img.setAttribute("alt", originSrc);
|
||||
}
|
||||
});
|
||||
},
|
||||
// **** 图片解密处理图片 start！！！
|
||||
async handleDynamicElements() {
|
||||
await this.$nextTick();
|
||||
const imgs = this.$refs.content.getElementsByTagName("img");
|
||||
this.observeImages(imgs);
|
||||
},
|
||||
observeImages(imgs) {
|
||||
// 先移除原来的监听
|
||||
this.unobserveImages();
|
||||
if (!imgs) return;
|
||||
for (let index = 0; index < imgs.length; index++) {
|
||||
const element = imgs[index];
|
||||
if (element.getAttribute("origin-src")) continue;
|
||||
element.setAttribute("alt", "");
|
||||
observer.observe(element);
|
||||
observedElements.push(element);
|
||||
}
|
||||
},
|
||||
async observeEntry(entry) {
|
||||
const { intersectionRatio } = entry;
|
||||
if (intersectionRatio <= 0) return;
|
||||
const target = entry.target;
|
||||
const tempSrc = target.getAttribute("src");
|
||||
if (!tempSrc) {
|
||||
// 没有临时路径，清除监听
|
||||
this.unobserveEntry(entry);
|
||||
return;
|
||||
}
|
||||
// 是完整url，无需解密直接src加载
|
||||
if (isBlobUrl(tempSrc)) {
|
||||
// target.style.minHeight = target.style.minHeight || "auto";
|
||||
// target.setAttribute("src", tempSrc);
|
||||
// target.setAttribute("origin-src", tempSrc);
|
||||
// target.setAttribute("title", tempSrc);
|
||||
this.unobserveEntry(entry);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
let imgApi = this.$imgUrl;
|
||||
if (imgApi.slice(-1) != "/") {
|
||||
imgApi = imgApi + "/";
|
||||
}
|
||||
const url = await decryptTool.imgDecypt(imgApi + tempSrc);
|
||||
target.style.minHeight = target.style.minHeight || "auto";
|
||||
target.style.maxWidth = "100%";
|
||||
target.setAttribute("src", url);
|
||||
target.setAttribute("origin-src", tempSrc);
|
||||
target.setAttribute("alt", tempSrc);
|
||||
this.unobserveEntry(entry);
|
||||
} catch (error) {
|
||||
console.error("img decypt error:", error);
|
||||
}
|
||||
},
|
||||
unobserveImages() {
|
||||
observedElements.forEach((v) => observer.unobserve(v));
|
||||
observedElements.splice(0);
|
||||
},
|
||||
unobserveImage(img) {
|
||||
observer.unobserve(img);
|
||||
const idx = observedElements.indexOf(img);
|
||||
if (idx >= 0) {
|
||||
observedElements.splice(idx, 1);
|
||||
}
|
||||
},
|
||||
unobserveEntry(entry) {
|
||||
this.unobserveImage(entry.target);
|
||||
},
|
||||
// **** 图片解密处理图片 end！！！
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
async open(video) {
|
||||
this.dialogVisible = true;
|
||||
this.video = video;
|
||||
this.id = video.id;
|
||||
if (video.richText && video.richText != "") {
|
||||
this.richText = video.richText;
|
||||
// this.richText = video.richText.replace(
|
||||
// /<img src="/g,
|
||||
// `<img src="${ resourceHost }`
|
||||
// );
|
||||
}
|
||||
//处理复制图文业务
|
||||
var cope_rich_text = "<p>";
|
||||
if (video.title !== "") {
|
||||
cope_rich_text += video.title;
|
||||
cope_rich_text += "<br/><br/>";
|
||||
}
|
||||
if (video.content !== "") {
|
||||
cope_rich_text += video.content;
|
||||
}
|
||||
if (video.seriesCover !== "") {
|
||||
var seriesCover = video.seriesCover || [];
|
||||
if (seriesCover.length > 0);
|
||||
for (const p of seriesCover) {
|
||||
cope_rich_text += `<br/><br/><img src="`;
|
||||
cope_rich_text += p;
|
||||
cope_rich_text += '"/><br/><br/>';
|
||||
}
|
||||
}
|
||||
if (cope_rich_text !== "<p>") {
|
||||
this.cope_rich_text = cope_rich_text;
|
||||
}
|
||||
await this.$nextTick();
|
||||
this.createEditor();
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.editor && this.editor.destroy();
|
||||
this.editor = null;
|
||||
this.cleanData();
|
||||
},
|
||||
handleAddImgClose() {
|
||||
this.dialogVisibleAddImg = false;
|
||||
this.data = "";
|
||||
this.editParam = {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
cover: "",
|
||||
};
|
||||
},
|
||||
openAddImg() {
|
||||
this.dialogVisibleAddImg = true;
|
||||
},
|
||||
cleanData() {
|
||||
this.id = "";
|
||||
this.richText = "";
|
||||
this.cope_rich_text = "";
|
||||
this.video = null;
|
||||
},
|
||||
openLook() {
|
||||
this.dialogVisibleLook = true;
|
||||
this.data = this.editor.txt.html();
|
||||
this.$refs.preview.open(this.richText, false);
|
||||
},
|
||||
handleSubmit() {
|
||||
this.data = this.editor.txt.html();
|
||||
if (!this.data) {
|
||||
alert("保存内容为空");
|
||||
return;
|
||||
}
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(this.data, "text/html");
|
||||
const images = doc.getElementsByTagName("img");
|
||||
for (const img of Array.from(images)) {
|
||||
const src = img.getAttribute("alt");
|
||||
if (src) {
|
||||
img.setAttribute("src", src);
|
||||
img.removeAttribute("origin-src");
|
||||
}
|
||||
img.setAttribute("alt", "");
|
||||
}
|
||||
this.data = doc.body.innerHTML;
|
||||
this.submitDate();
|
||||
},
|
||||
async handleCope() {
|
||||
this.richText = this.cope_rich_text;
|
||||
this.editor.destroy();
|
||||
this.editor = null;
|
||||
this.$nextTick();
|
||||
this.createEditor();
|
||||
},
|
||||
// 保存
|
||||
submitDate() {
|
||||
if (this.data == null || this.data == "") {
|
||||
alert("保存内容为空");
|
||||
return;
|
||||
}
|
||||
if (this.video == null || this.video == "") {
|
||||
alert("保存内容异常");
|
||||
return;
|
||||
}
|
||||
if (this.id == null || this.id == "") {
|
||||
alert("编辑帖子id异常！");
|
||||
return;
|
||||
}
|
||||
//编辑
|
||||
const params = {};
|
||||
params.id = this.id;
|
||||
params.richText = this.data;
|
||||
params.type = 2;
|
||||
API.editVideoInfo(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerLoadList");
|
||||
} else {
|
||||
this.$message.error(res.msg || res.tip || "保存失败！");
|
||||
}
|
||||
this.handleClose();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
async updateFile(file) {
|
||||
const form = new FormData();
|
||||
form.append("upload", file.file);
|
||||
const { data } = await API.fileUpload(form);
|
||||
this.editParam.cover = data.coverImg;
|
||||
},
|
||||
imageUploadSuccess(res) {
|
||||
if (res.code === 200) {
|
||||
this.editParam.cover = res.data.coverImg;
|
||||
} else {
|
||||
this.$message.error(res.data);
|
||||
}
|
||||
},
|
||||
imageUploadFail(res) {
|
||||
this.$message.error(res.message);
|
||||
},
|
||||
setImage(val) {
|
||||
return this.editParam.imgUrl + val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wangEditor {
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="rich-preview">
|
||||
<div
|
||||
ref="content"
|
||||
class="content"
|
||||
v-html="html"
|
||||
@click="onElementClick"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { decryptTool } from "../decrypt-img/tool";
|
||||
|
||||
const observedElements = [];
|
||||
let observer = null;
|
||||
const isBlobUrl = (url) => /^blob:(https?|file):/.test(url);
|
||||
export default {
|
||||
props: {
|
||||
text: String,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
html() {
|
||||
this.$nextTick(this.handleDynamicElements);
|
||||
return this.replaceImageSrc(this.text || "");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleDynamicElements() {
|
||||
const imgs = this.$refs.content.getElementsByTagName("img");
|
||||
this.observeImages(imgs);
|
||||
},
|
||||
onElementClick(e) {
|
||||
const ele = e.target;
|
||||
const aTag = this.findNearestElement("a", ele);
|
||||
if (aTag) {
|
||||
const href = aTag.getAttribute("href");
|
||||
console.log(href);
|
||||
}
|
||||
},
|
||||
findNearestElement(nodeName, element) {
|
||||
const upperNodeName = nodeName.toUpperCase();
|
||||
if (!element) return null;
|
||||
if (element.nodeName === upperNodeName) return element;
|
||||
return this.findNearestElement(upperNodeName, element.parentElement);
|
||||
},
|
||||
observeImages(imgs) {
|
||||
// 先移除原来的监听
|
||||
this.unobserveImages();
|
||||
if (!imgs) return;
|
||||
for (let index = 0; index < imgs.length; index++) {
|
||||
const element = imgs[index];
|
||||
observer.observe(element);
|
||||
observedElements.push(element);
|
||||
}
|
||||
},
|
||||
unobserveImages() {
|
||||
observedElements.forEach((v) => observer.unobserve(v));
|
||||
observedElements.splice(0);
|
||||
},
|
||||
unobserveImage(img) {
|
||||
observer.unobserve(img);
|
||||
const idx = observedElements.indexOf(img);
|
||||
if (idx >= 0) {
|
||||
observedElements.splice(idx, 1);
|
||||
}
|
||||
},
|
||||
unobserveEntry(entry) {
|
||||
this.unobserveImage(entry.target);
|
||||
},
|
||||
replaceImageSrc(htmlContent) {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(htmlContent, "text/html");
|
||||
const images = doc.getElementsByTagName("img");
|
||||
for (const img of Array.from(images)) {
|
||||
let imgSrc = img.getAttribute("src") || "";
|
||||
// img.setAttribute("src", placeholderImage);
|
||||
img.setAttribute("temp-src", imgSrc);
|
||||
img.setAttribute("alt", "");
|
||||
}
|
||||
return doc.documentElement.outerHTML;
|
||||
},
|
||||
async observeEntry(entry) {
|
||||
const { intersectionRatio } = entry;
|
||||
if (intersectionRatio <= 0) return;
|
||||
const target = entry.target;
|
||||
const tempSrc = target.getAttribute("temp-src");
|
||||
if (!tempSrc) {
|
||||
// 没有临时路径，清除监听
|
||||
this.unobserveEntry(entry);
|
||||
return;
|
||||
}
|
||||
// 是完整url，无需解密直接src加载
|
||||
if (isBlobUrl(tempSrc)) {
|
||||
target.style.minHeight = target.style.minHeight || "auto";
|
||||
target.setAttribute("src", tempSrc);
|
||||
target.removeAttribute("temp-src");
|
||||
this.unobserveEntry(entry);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
let imgApi = this.$imgUrl;
|
||||
if (imgApi.slice(-1) != "/") {
|
||||
imgApi = imgApi + "/";
|
||||
}
|
||||
const url = await decryptTool.imgDecypt(imgApi + tempSrc);
|
||||
target.style.minHeight = target.style.minHeight || "auto";
|
||||
target.setAttribute("src", url);
|
||||
target.removeAttribute("temp-src");
|
||||
this.unobserveEntry(entry);
|
||||
} catch (error) {
|
||||
console.error("img decypt error:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
this.observeEntry(entry);
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unobserveImages();
|
||||
observer.disconnect();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.rich-preview {
|
||||
.content {
|
||||
margin: 0 0 10px 0;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
white-space: pre-line;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
object-fit: scale-down;
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
:before-handleClose="handleClose"
|
||||
:handleClose-on-click-modal="false"
|
||||
class="look-dialog"
|
||||
>
|
||||
<div class="look-one">
|
||||
<Content :text="text"></Content>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import Content from "./content.vue";
|
||||
|
||||
export default {
|
||||
components: { Content },
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "预览",
|
||||
text: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(text) {
|
||||
this.dialogVisible = true;
|
||||
this.text = text;
|
||||
},
|
||||
},
|
||||
updated() {
|
||||
// if (!this.dialogVisible) {
|
||||
// return;
|
||||
// }
|
||||
// var dom = document.getElementById("look");
|
||||
// dom.style.width = "414px";
|
||||
// //img数量
|
||||
// var li = dom.getElementsByTagName("img").length;
|
||||
// //循环动态更新图片宽度
|
||||
// for (let index = 0; index < li; index++) {
|
||||
// dom.getElementsByTagName("img")[index].style.width = "414px";
|
||||
// }
|
||||
// //p数量
|
||||
// var lp = dom.getElementsByTagName("p").length;
|
||||
// //循环动态更新段落宽度
|
||||
// for (let index = 0; index < lp; index++) {
|
||||
// dom.getElementsByTagName("p")[index].style.width = "414px";
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.look-dialog {
|
||||
z-index: 999999 !important;
|
||||
|
||||
/deep/ .el-dialog__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.look-one {
|
||||
border: 2px solid;
|
||||
color: #121327;
|
||||
border-radius: 12px;
|
||||
width: 500px;
|
||||
margin-left: 30px;
|
||||
padding: 10px;
|
||||
|
||||
.look {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="reason-action-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" align="center" :close-on-click-modal="false" class="el-dialogs">
|
||||
<!-- <el-form label-width="0px" class="form-inline" align="left" v-if="type == 'vid'">
|
||||
<el-form-item>
|
||||
<el-button size="small" type="success" round @click="addReason">新增原因</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
<el-form ref="form" :model="params" :rules="rules" :label-position="labelPosition" label-width="100px">
|
||||
<el-form-item label="原因列表:" prop="content" align="left">
|
||||
<!-- <span>原因列表</span> -->
|
||||
<el-table ref="table" :data="tableData" border highlight-current-row @current-change="handlerSelect">
|
||||
<el-table-column prop="content" label="原因" align="center" />
|
||||
</el-table>
|
||||
<el-input type="textarea" placeholder="请输入原因" style="margin-top: 10px" clearable v-model="vidContent" v-if="type == 'vid'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="截图:" prop="lockImg" v-if="type!=='vid'">
|
||||
<UploadImgPaste @changeImgUrl='changeImgUrl' :img='params.lockImg'></UploadImgPaste>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div v-if="total>pageSize" class="table-pagination">
|
||||
<el-pagination :current-page.sync="pageNum" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" :loading="flag" size="small" @click="submitForm('form')">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { reasonList, rejectPost } from '@/api/video/post'
|
||||
import API from "@/api";
|
||||
import baseConfig from '@/utils/serverUrlConfig'
|
||||
import UploadImgPaste from './clipboardPic.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: '',
|
||||
labelPosition: 'left',
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 弹窗标题
|
||||
title: '原因',
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 内层弹窗表格加载状态
|
||||
loading: false,
|
||||
// 编辑id
|
||||
id: '',
|
||||
// 新增帖子请求参数
|
||||
params: {
|
||||
content: '',
|
||||
lockImg: ''
|
||||
},
|
||||
vidContent: '',
|
||||
tableData: [],
|
||||
pageSize: 5,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
action: baseConfig.baseServerUrl + '/vid/uploadStatic',
|
||||
// 验证规则
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
components:{UploadImgPaste},
|
||||
methods: {
|
||||
addReason() {
|
||||
this.$prompt("请输入新增原因", "新增原因", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /.+/,
|
||||
inputErrorMessage: "原因不能为空"
|
||||
}).then(({ value }) => {
|
||||
const params = Object.assign({}, {
|
||||
type: this.type,
|
||||
content: value
|
||||
})
|
||||
API.addReasonList(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.getReasonList()
|
||||
} else {
|
||||
this.$message.error('新增失败！')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error('新增失败！')
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "取消输入"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlerSelect(currentRow) {
|
||||
if (currentRow) {
|
||||
this.params.content = currentRow.content
|
||||
} else {
|
||||
this.params.content = ''
|
||||
}
|
||||
},
|
||||
// 获取驳回原因列表
|
||||
getReasonList() {
|
||||
this.loading = true
|
||||
const params = Object.assign({}, {
|
||||
type: this.type,
|
||||
page: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
API.getReasonList(params).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.total = res.data.total
|
||||
this.tableData = res.data.list || []
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
window.console.log(`每页 ${val} 条`)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val
|
||||
this.getReasonList()
|
||||
},
|
||||
// 数据提交验证
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let content = this.vidContent || this.params.content;
|
||||
if(content.trim() == '') {
|
||||
this.$message.warning('原因不能为空！')
|
||||
return;
|
||||
}
|
||||
this.flag = true
|
||||
switch(this.type){
|
||||
case 'user':
|
||||
this.handleLock()
|
||||
break
|
||||
case 'upload':
|
||||
this.udpateForbid()
|
||||
break
|
||||
case 'vid':
|
||||
this.examineVideo()
|
||||
break
|
||||
default:
|
||||
this.$message.error('操作失败,请重试')
|
||||
return false
|
||||
}
|
||||
this.handleClose()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
examineVideo() {
|
||||
const params = Object.assign({}, {
|
||||
ids: [this.id],
|
||||
pass: 2,
|
||||
reason: this.vidContent || this.params.content
|
||||
})
|
||||
API.examineVideo(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handleList')
|
||||
} else {
|
||||
this.$message.error('操作失败！')
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
}).catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
this.$message.error('操作失败！')
|
||||
})
|
||||
},
|
||||
// 禁止用户上传文件
|
||||
udpateForbid(){
|
||||
const params = Object.assign({}, {
|
||||
uidList: [this.id],
|
||||
enable: true,
|
||||
reason: this.vidContent || this.params.content
|
||||
})
|
||||
API.resetForbid(params)
|
||||
.then(res => {
|
||||
res.code === 200 && (
|
||||
this.$message.success('修改用户禁止上传文件状态成功！'),this.$emit('handleList')
|
||||
)
|
||||
this.handleClose()
|
||||
this.flag = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('操作失败，请重试')
|
||||
this.handleClose()
|
||||
this.flag = false
|
||||
})
|
||||
},
|
||||
// 封禁用户
|
||||
handleLock() {
|
||||
const params = Object.assign({}, {
|
||||
uid: this.id,
|
||||
enable: true,
|
||||
reason: this.vidContent || this.params.content,
|
||||
lockImg: this.params.lockImg
|
||||
})
|
||||
API.getUserLock(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
if (params.enable) {
|
||||
this.$message({
|
||||
message: "封禁用户成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit('handleList')
|
||||
} else {
|
||||
this.$message({
|
||||
message: "解封用户成功",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
// this.search();
|
||||
}
|
||||
this.handleClose()
|
||||
this.flag = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('封禁失败！')
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
});
|
||||
},
|
||||
// 图片上传成功回调
|
||||
// successCallback1(res) {
|
||||
// this.params.lockImg = res.data.coverImg
|
||||
// },
|
||||
changeImgUrl(data) {
|
||||
this.params.lockImg = data
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$refs.table.setCurrentRow()
|
||||
this.params = {
|
||||
content: '',
|
||||
}
|
||||
this.pageSize = 10
|
||||
this.pageNum = 1
|
||||
this.flag = false
|
||||
this.$refs.form.resetFields();
|
||||
this.params.lockImg = '';
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(data, type) {
|
||||
this.dialogVisible = true
|
||||
this.type = type
|
||||
// window.console.log(data)
|
||||
// window.console.log(type,'type')
|
||||
this.id = parseInt( data.uid || data.userID)||data.id
|
||||
this.getReasonList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reason-action-box {
|
||||
.inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/.el-table__body tr.current-row > td {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tag
|
||||
size="middle"
|
||||
style="margin: 0 5px;"
|
||||
closable
|
||||
v-for="(item, index) in value"
|
||||
:key="index"
|
||||
@close="closeTag(item)"
|
||||
>{{ item }}</el-tag
|
||||
>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputVisible"
|
||||
v-model="inputValue"
|
||||
ref="saveTagInput"
|
||||
size="small"
|
||||
@keyup.enter.native="$event.target.blur"
|
||||
@blur="handleInputConfirm"
|
||||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput"
|
||||
>+ New Tag</el-button
|
||||
>
|
||||
<el-card
|
||||
style="width: 500px;max-height: 200px;overflow-y: scroll;"
|
||||
v-if="tagList.length > 0"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
v-for="item in tagList"
|
||||
@click="clickTag(item.name)"
|
||||
:key="item.id"
|
||||
:type="item.name | valueClassFilter(value)"
|
||||
:disabled="item.name | valueFilter(value)"
|
||||
>{{ item.name }}</el-button
|
||||
>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
filters: {
|
||||
valueFilter(tag, value) {
|
||||
return value.indexOf(tag) >= 0 ? true : false;
|
||||
},
|
||||
valueClassFilter(tag, value) {
|
||||
return value.indexOf(tag) >= 0 ? "info" : "success";
|
||||
},
|
||||
},
|
||||
props: {
|
||||
tagList: {
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
value: {
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
quantity: {
|
||||
require: false,
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputVisible: false,
|
||||
inputValue: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickTag(tag) {
|
||||
if (this.value.length >= this.quantity) {
|
||||
this.$message.error(`帖子关联标签最多${this.quantity}个`);
|
||||
return false;
|
||||
}
|
||||
let arr = [...this.value];
|
||||
arr.push(tag);
|
||||
this.$emit("input", arr);
|
||||
},
|
||||
closeTag(tag) {
|
||||
let arr = [...this.value];
|
||||
arr.splice(this.value.indexOf(tag), 1);
|
||||
this.$emit("input", arr);
|
||||
// 如果关闭的标签是客服标签，则提示是否关闭
|
||||
// const tagBool = this.tagList.map(item => item.name).indexOf(tag)
|
||||
// if(tagBool === -1) {
|
||||
// this.$confirm('此操作将删除视频自带标签?', '提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// arr.splice(this.value.indexOf(tag), 1);
|
||||
// this.$emit('input', arr)
|
||||
// }).catch(() => {
|
||||
// return false
|
||||
// });
|
||||
// } else {
|
||||
// }
|
||||
},
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
handleInputConfirm() {
|
||||
let inputValue = this.inputValue;
|
||||
if (this.value.length >= this.quantity) {
|
||||
this.$message.error(`帖子关联标签最多${this.quantity}个`);
|
||||
this.inputVisible = false;
|
||||
this.inputValue = "";
|
||||
return false;
|
||||
}
|
||||
if (inputValue) {
|
||||
let arr = [...this.value];
|
||||
arr.push(inputValue);
|
||||
this.$emit("input", arr);
|
||||
}
|
||||
this.inputVisible = false;
|
||||
this.inputValue = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user