803 lines
23 KiB
Vue
803 lines
23 KiB
Vue
<template>
|
||
<div class="box">
|
||
<!-- 查询 -->
|
||
<div class="inquire">
|
||
<span>地区</span>
|
||
<el-select v-model="inquire.partitionId" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in inquire.partitionArr"
|
||
:key="item.id"
|
||
:label="item.desc"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="inquire">
|
||
<span>名称</span>
|
||
<el-input v-model="inquire.name" placeholder="" class="input"></el-input>
|
||
</div>
|
||
<div class="inquire">
|
||
<span>状态</span>
|
||
<el-select v-model="inquire.status" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in inquire.options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- 查询按钮 -->
|
||
<el-button class="primary" type="primary" @click="getData()"
|
||
>查询</el-button
|
||
>
|
||
<!-- 新增按钮 -->
|
||
<el-button
|
||
class="primary"
|
||
type="primary"
|
||
@click="
|
||
operationValue.partitionVal = [];
|
||
operationValue.nameZh = '';
|
||
operationValue.nameEn = '';
|
||
operationValue.nameAr = '';
|
||
operationValue.nameTr = '';
|
||
operationValue.price = '';
|
||
operationValue.day = '';
|
||
operationValue.imageUrl = '';
|
||
operationValue.status = '';
|
||
operationType = 1;
|
||
filePreview: null; // 文件预览 URL
|
||
isImage = false;
|
||
isVideo = false;
|
||
isSVGA = false;
|
||
operationDialogTitle = '新增';
|
||
operationDialog = true;
|
||
"
|
||
>新增</el-button
|
||
>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%; margin-top: 25px"
|
||
>
|
||
<el-table-column prop="id" align="center" label="id" />
|
||
<el-table-column prop="partitionFlag" align="center" label="地区">
|
||
<template v-slot="scope">
|
||
{{ partitionDesc(scope.row.partitionFlag) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="中文名称">
|
||
<template v-slot="scope">
|
||
{{ jsonFun(scope.row.name).zh }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="阿语名称">
|
||
<template v-slot="scope">
|
||
{{ jsonFun(scope.row.name).ar }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="英语名称"
|
||
><template v-slot="scope">
|
||
{{ jsonFun(scope.row.name).en }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="土耳其名称"
|
||
><template v-slot="scope">
|
||
{{ jsonFun(scope.row.name).tr }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="图片">
|
||
<template v-slot="scope">
|
||
<el-image
|
||
:src="scope.row.pic"
|
||
:zoom-rate="1.1"
|
||
:preview-src-list="[scope.row.pic]"
|
||
fit="contain"
|
||
preview-teleported="true"
|
||
hide-on-click-modal="true"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="装扮动效图片类型">
|
||
<template v-slot="scope">
|
||
{{
|
||
scope.row.effectType == 0
|
||
? "无"
|
||
: scope.row.effectType == 1
|
||
? "MP4"
|
||
: "SVGA"
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop=""
|
||
width="300"
|
||
max-height="100"
|
||
align="center"
|
||
label="装扮动效图片"
|
||
>
|
||
<template v-slot="scope">
|
||
<div v-if="scope.row.effectType == 0">无</div>
|
||
<!-- 视频预览 -->
|
||
<video
|
||
v-if="scope.row.effectType == 1"
|
||
:src="scope.row.effect"
|
||
controls
|
||
style="width: 300px; max-height: 300px; display: block"
|
||
></video>
|
||
<!-- SVGA 预览 -->
|
||
<div
|
||
v-if="scope.row.effectType == 2"
|
||
:id="`svga-player${scope.row.id}`"
|
||
style="width: 300px; max-height: 300px; display: block"
|
||
>
|
||
{{
|
||
scope.row.effect && scope.row.id
|
||
? initSVGAList(scope.row.effect, scope.row.id)
|
||
: ""
|
||
}}
|
||
<!-- <img style="width: 100px; height: 100px; display: block" src="/Uploads/article/original_img/1487053722.jpg" alt="">
|
||
<el-image src=""></el-image> -->
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="" align="center" label="状态">
|
||
<template v-slot="scope">
|
||
{{ scope.row.status == 1 ? "有效" : "无效" }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" align="center" label="贵族限定">
|
||
<template v-slot="scope">
|
||
{{ scope.row.type == 1 ? "普通" : "贵族" }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="updateTime" align="center" label="操作时间" />
|
||
<el-table-column align="center" label="操作" width="300">
|
||
<template v-slot="scope">
|
||
<el-button
|
||
@click="
|
||
operationValue.partitionVal = partitionIdArr(
|
||
scope.row.partitionFlag
|
||
);
|
||
operationValue.nameZh = jsonFun(scope.row.name).zh;
|
||
operationValue.nameEn = jsonFun(scope.row.name).en;
|
||
operationValue.nameAr = jsonFun(scope.row.name).ar;
|
||
operationValue.nameTr = jsonFun(scope.row.name).tr;
|
||
operationValue.imageUrl = scope.row.pic;
|
||
operationValue.status = scope.row.status;
|
||
operationType = 2;
|
||
operationValueId = scope.row.id;
|
||
operationDialogTitle = '编辑';
|
||
filePreview: scope.row.effect; // 文件预览 URL
|
||
scope.row.effectType == 1
|
||
? (isVideo = true)
|
||
: scope.row.effectType == 2
|
||
? (isSVGA = true)
|
||
: (isImage = true);
|
||
operationValue.effectType = scope.row.effectType;
|
||
initSVGA(scope.row.effect);
|
||
operationDialog = true;
|
||
"
|
||
class="primary"
|
||
type="primary"
|
||
size="default"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
@click="
|
||
sendDialog = true;
|
||
sendObj.erbanNos = send.days = send.remark = null;
|
||
sendObj.personalBackgroundId = scope.row.id;
|
||
"
|
||
class="primary"
|
||
type="primary"
|
||
size="default"
|
||
>赠送</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 新增&编辑弹窗 -->
|
||
<el-dialog
|
||
v-model="operationDialog"
|
||
:title="operationDialogTitle"
|
||
width="28%"
|
||
center
|
||
>
|
||
<!-- <div class="operation">
|
||
<span style="margin-right: 20px">地区</span>
|
||
<el-select v-model="operationValue.partitionId" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in operationValue.partitionArr"
|
||
:key="item.id"
|
||
:label="item.desc"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div> -->
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">地区</span>
|
||
<el-checkbox-group
|
||
v-model="operationValue.partitionVal"
|
||
v-for="(val, i) in inquire.partitionArr"
|
||
:key="i"
|
||
>
|
||
<el-checkbox style="margin-right: 10px" :label="val.id">{{
|
||
val.desc
|
||
}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">华语名称</span>
|
||
<el-input
|
||
v-model="operationValue.nameZh"
|
||
style="width: 200px"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">英语名称</span>
|
||
<el-input
|
||
v-model="operationValue.nameEn"
|
||
style="width: 200px"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">阿拉伯名称</span>
|
||
<el-input
|
||
v-model="operationValue.nameAr"
|
||
style="width: 200px"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">土耳其名称</span>
|
||
<el-input
|
||
v-model="operationValue.nameTr"
|
||
style="width: 200px"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<!-- <div class="operation">
|
||
<span style="margin-right: 20px">价格</span>
|
||
<el-input
|
||
v-model="operationValue.price"
|
||
style="width: 200px"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">有效天数</span>
|
||
<el-input
|
||
v-model="operationValue.day"
|
||
style="width: 200px"
|
||
class="input"
|
||
></el-input>
|
||
</div> -->
|
||
<div class="operation">
|
||
<span class="left" style="margin-right: 20px">图片</span>
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="/admin/tencent/cos/upload/file"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-error="handleAvatarError"
|
||
>
|
||
<img
|
||
v-if="operationValue.imageUrl"
|
||
:src="operationValue.imageUrl"
|
||
class="avatar"
|
||
/>
|
||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||
</el-upload>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">装扮动效图片类型</span>
|
||
<el-select v-model="operationValue.effectType" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in operationValue.effectTypeArr"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="operation">
|
||
<span class="left" style="margin-right: 20px">装扮动效图片</span>
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="/admin/tencent/cos/upload/file"
|
||
accept="image/*,.mp4,.svga"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess1"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-error="handleAvatarError"
|
||
>
|
||
<!-- 文件预览 -->
|
||
<div style="margin-top: 20px">
|
||
<!-- 图片预览 -->
|
||
<img
|
||
v-if="isImage"
|
||
:src="filePreview"
|
||
alt="Uploaded Image"
|
||
style="max-width: 300px"
|
||
/>
|
||
|
||
<!-- 视频预览 -->
|
||
<video
|
||
v-else-if="isVideo"
|
||
:src="filePreview"
|
||
controls
|
||
style="max-width: 300px"
|
||
></video>
|
||
|
||
<!-- SVGA 预览 -->
|
||
<div
|
||
v-else-if="isSVGA"
|
||
:id="`svga-player`"
|
||
style="width: 200px; height: 200px"
|
||
></div>
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">状态</span>
|
||
<el-select v-model="operationValue.status" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in operationValue.options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button
|
||
@click="
|
||
operationDialog = false;
|
||
isImage = false;
|
||
isVideo = false;
|
||
isSVGA = false;
|
||
"
|
||
>取消</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
@click="operation(type == 1 ? null : operationValueId)"
|
||
>
|
||
确认
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
style="margin-top: 10px"
|
||
class="paginationClass"
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
|
||
layout="sizes, prev, pager, next"
|
||
:total="total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
<!-- 赠送 -->
|
||
<el-dialog v-model="sendDialog" title="赠送" width="28%" center>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">用户平台ID</span>
|
||
<el-input
|
||
v-model="sendObj.erbanNos"
|
||
style="width: 200px"
|
||
class="input"
|
||
placeholder="多个请用英文“,”隔开"
|
||
></el-input>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">天数</span>
|
||
<el-input
|
||
v-model="sendObj.days"
|
||
style="width: 200px"
|
||
class="input"
|
||
placeholder=""
|
||
></el-input>
|
||
</div>
|
||
<div class="operation">
|
||
<span style="margin-right: 20px">备注</span>
|
||
<el-input
|
||
v-model="sendObj.remark"
|
||
style="width: 200px"
|
||
class="input"
|
||
placeholder=""
|
||
></el-input>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="sendDialog = false">取消</el-button>
|
||
<el-button type="primary" @click="send()"> 确认 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
listPartitionInfo,
|
||
pesonalBackgroundListByPage,
|
||
pesonalBackgroundSaveOrUpdate,
|
||
pesonalBackgroundListSend,
|
||
} from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||
// @ts-ignore
|
||
import { dateFormat } from "@/utils/system-helper";
|
||
import { partitionDesc, partitionIdArr } from "@/utils/partitionDesc.js";
|
||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||
// @ts-ignore
|
||
import { ElMessage } from "element-plus";
|
||
import SVGA from "svgaplayerweb";
|
||
export default {
|
||
name: "personalHomepageResourceManagement",
|
||
setup() {
|
||
// 响应式数据
|
||
const file = ref(null);
|
||
const filePreview = ref(null);
|
||
const isImage = ref(false);
|
||
const isVideo = ref(false);
|
||
const isSVGA = ref(false);
|
||
const loading = ref(false);
|
||
|
||
const inquire = reactive({
|
||
partitionId: "",
|
||
partitionArr: [],
|
||
name: "",
|
||
status: "",
|
||
options: [
|
||
{ label: "有效", value: 1 },
|
||
{ label: "无效", value: 2 },
|
||
{ label: "全部", value: 3 },
|
||
],
|
||
});
|
||
|
||
const operationDialog = ref(false);
|
||
const operationType = ref(null);
|
||
const operationDialogTitle = ref("新增%编辑");
|
||
const operationValueId = ref(null);
|
||
|
||
const operationValue = reactive({
|
||
partitionVal: [],
|
||
nameZh: "",
|
||
nameEn: "",
|
||
nameAr: "",
|
||
nameTr: "",
|
||
price: "",
|
||
day: "",
|
||
imageUrl: "",
|
||
status: "",
|
||
options: [
|
||
{ label: "有效", value: 1 },
|
||
{ label: "无效", value: 2 },
|
||
],
|
||
effectType: "",
|
||
effectTypeArr: [
|
||
{ label: "无", value: 0 },
|
||
{ label: "MP4", value: 1 },
|
||
{ label: "SVGA", value: 2 },
|
||
],
|
||
});
|
||
|
||
const sendDialog = ref(false);
|
||
const sendObj = reactive({
|
||
erbanNos: null,
|
||
days: null,
|
||
personalBackgroundId: null,
|
||
remark: null,
|
||
});
|
||
|
||
const tableData = ref([]);
|
||
const total = ref(0); // 总页数
|
||
const currentPage = ref(1); // 页码
|
||
const pageSize = ref(10); // 条数
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
console.log("组件已挂载");
|
||
listPartitionInfo().then((res) => {
|
||
inquire.partitionArr = operationValue.partitionArr = res.data;
|
||
inquire.partitionId = inquire.partitionArr[0].id;
|
||
getData();
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
console.log("组件已卸载");
|
||
});
|
||
|
||
// 查询接口
|
||
const getData = () => {
|
||
loading.value = true;
|
||
pesonalBackgroundListByPage({
|
||
partitionId: inquire.partitionId,
|
||
name: inquire.name,
|
||
status: inquire.status,
|
||
page: currentPage.value,
|
||
pageSize: pageSize.value,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
loading.value = false;
|
||
total.value = res.data.total;
|
||
tableData.value = res.data.list;
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const operation = (id) => {
|
||
const obj = {
|
||
partitionFlag: operationValue.partitionVal.reduce(
|
||
(accumulator, currentValue) => accumulator + currentValue,
|
||
0
|
||
),
|
||
name: JSON.stringify({
|
||
ar: operationValue.nameAr,
|
||
zh: operationValue.nameZh,
|
||
en: operationValue.nameEn,
|
||
tr: operationValue.nameTr,
|
||
}),
|
||
pic: operationValue.imageUrl,
|
||
effectType: operationValue.effectType,
|
||
effect: filePreview.value,
|
||
status: operationValue.status,
|
||
type: 1, // 资料卡类型 1：普通 2：贵族
|
||
id,
|
||
};
|
||
console.log(obj);
|
||
pesonalBackgroundSaveOrUpdate(obj).then((res) => {
|
||
if (res.code == 200) {
|
||
operationDialog.value = false;
|
||
getData();
|
||
isImage.value = false;
|
||
isVideo.value = false;
|
||
isSVGA.value = false;
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const send = () => {
|
||
pesonalBackgroundListSend(sendObj).then((res) => {
|
||
if (res.code == 200) {
|
||
sendDialog.value = false;
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "赠送成功",
|
||
type: "success",
|
||
});
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const beforeAvatarUpload = () => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传中可能较慢，请等待上传成功后在进行下一步~",
|
||
type: "warning",
|
||
});
|
||
};
|
||
|
||
const handleAvatarError = () => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传失败！",
|
||
type: "error",
|
||
});
|
||
};
|
||
|
||
const handleAvatarSuccess = (res, file) => {
|
||
console.log(file);
|
||
operationValue.imageUrl = file.response.data;
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功！",
|
||
type: "success",
|
||
});
|
||
};
|
||
|
||
const handleAvatarSuccess1 = (res, files) => {
|
||
console.log(files.raw);
|
||
const selectedFile = files.raw;
|
||
if (!selectedFile) return;
|
||
// 清除旧的预览数据
|
||
// resetFile();
|
||
const fileType = selectedFile.type;
|
||
const fileName = selectedFile.name;
|
||
// 创建预览 URL
|
||
filePreview.value = res.data;
|
||
file.value = selectedFile;
|
||
// 根据文件类型判断
|
||
if (fileType.startsWith("image/")) {
|
||
isImage.value = true;
|
||
} else if (fileType === "video/mp4") {
|
||
isVideo.value = true;
|
||
} else if (fileName.endsWith(".svga")) {
|
||
isSVGA.value = true;
|
||
initSVGA(res.data);
|
||
}
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功！",
|
||
type: "success",
|
||
});
|
||
};
|
||
|
||
// const resetFile = () => {
|
||
// nextTick(() => {
|
||
// file.value = null;
|
||
// filePreview.value = null;
|
||
// isImage.value = false;
|
||
// isVideo.value = false;
|
||
// isSVGA.value = false;
|
||
// // 清除 SVGA 容器内容
|
||
// const svgaPlayer = document.getElementById("svga-player");
|
||
// if (svgaPlayer) {
|
||
// svgaPlayer.innerHTML = "";
|
||
// }
|
||
// });
|
||
// };
|
||
|
||
const initSVGA = (url) => {
|
||
nextTick(() => {
|
||
setTimeout(function () {
|
||
const container = document.getElementById("svga-player");
|
||
if (container) {
|
||
const player = new SVGA.Player(container);
|
||
const parser = new SVGA.Parser();
|
||
parser.load(
|
||
url,
|
||
(videoItem) => {
|
||
player.setVideoItem(videoItem);
|
||
player.startAnimation();
|
||
},
|
||
(error) => {
|
||
console.log("SVGA失败", error);
|
||
}
|
||
);
|
||
}
|
||
}, 10);
|
||
});
|
||
};
|
||
const initializedIds = new Set();
|
||
const initSVGAList = (url, id) => {
|
||
if (initializedIds.has(id)) return; // 避免重复初始化
|
||
console.log('SVGASVGASVGASVGASVGASVGA',url,id);
|
||
nextTick(() => {
|
||
const container = document.getElementById("svga-player" + id);
|
||
if (!container) {
|
||
console.error(`SVGA container for ID ${id} not found`);
|
||
return;
|
||
}
|
||
try {
|
||
const player = new SVGA.Player(container);
|
||
const parser = new SVGA.Parser();
|
||
parser.load(url, (videoItem) => {
|
||
player.setVideoItem(videoItem);
|
||
player.startAnimation();
|
||
});
|
||
initializedIds.add(id); // 标记已初始化
|
||
} catch (error) {
|
||
console.error("SVGA initialization failed:", error);
|
||
}
|
||
});
|
||
};
|
||
|
||
const jsonFun = (val) => JSON.parse(val);
|
||
|
||
// 分页导航
|
||
const handleSizeChange = () => {
|
||
getData();
|
||
};
|
||
|
||
const handleCurrentChange = () => {
|
||
getData();
|
||
};
|
||
|
||
return {
|
||
partitionDesc,
|
||
partitionIdArr,
|
||
file,
|
||
filePreview,
|
||
isImage,
|
||
isVideo,
|
||
isSVGA,
|
||
loading,
|
||
inquire,
|
||
operationDialog,
|
||
operationType,
|
||
operationDialogTitle,
|
||
operationValueId,
|
||
operationValue,
|
||
sendDialog,
|
||
sendObj,
|
||
tableData,
|
||
total,
|
||
currentPage,
|
||
pageSize,
|
||
getData,
|
||
operation,
|
||
send,
|
||
beforeAvatarUpload,
|
||
handleAvatarError,
|
||
handleAvatarSuccess,
|
||
handleAvatarSuccess1,
|
||
// resetFile,
|
||
initSVGA,
|
||
initSVGAList,
|
||
jsonFun,
|
||
handleSizeChange,
|
||
handleCurrentChange,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
padding-top: 20px;
|
||
background: #ecf0f5;
|
||
.inquire {
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
span {
|
||
margin-right: 10px;
|
||
}
|
||
.input {
|
||
width: 180px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.dialogTableVisibleBut {
|
||
display: block;
|
||
margin: 30px 0 0 830px;
|
||
}
|
||
.paginationClass {
|
||
margin: 15px 0 5px 0px;
|
||
}
|
||
}
|
||
.operation {
|
||
margin-bottom: 20px;
|
||
width: 55%;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
}
|
||
.avatar {
|
||
width: 100%;
|
||
}
|
||
</style>
|