|
|
@@ -69,7 +69,30 @@
|
|
|
<div class="soft-content" v-else>
|
|
|
<div class="content-left">
|
|
|
<div class="table-scroll" @dragover.prevent @drop="handleDrop">
|
|
|
- <vxe-table v-show="menuIndex == '1'"
|
|
|
+
|
|
|
+ <vxe-table fit v-show="menuIndex == '1'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
|
|
|
+ :data="imgList" @cell-click="selectTabCrop">
|
|
|
+ <vxe-column field="name" width="220" show-overflow>
|
|
|
+ <template #default="{ row, rowIndex }">
|
|
|
+ <div style="display: flex;flex-wrap: nowrap;justify-content: space-between; font-size: 14px;">
|
|
|
+ <el-image style="width: 60px; height: 60px; background-color: #eee;" :src="row.path" fit="contain" :title="row.name"></el-image>
|
|
|
+ <div style="width: calc(100% - 60px);">
|
|
|
+ <p style="font-weight:600; padding: 0 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="row.name">{{row.name}}</p>
|
|
|
+ <p>大小:{{row.size}}</p>
|
|
|
+ <el-progress :percentage="row.percent"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <vxe-button type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex)"></vxe-button> -->
|
|
|
+
|
|
|
+ <!-- <div class="img-mid-progress" v-if="row.percent > 0">
|
|
|
+ <el-progress :percentage="row.percent"></el-progress>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ </vxe-table>
|
|
|
+
|
|
|
+ <!-- <vxe-table v-show="menuIndex == '1'"
|
|
|
show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
|
|
|
:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
|
|
|
:edit-config="{trigger: 'click', mode: 'cell'}" :data="imgList" :scroll-y="{enabled: true}">
|
|
|
@@ -91,7 +114,7 @@
|
|
|
<i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delFile(rowIndex)"></i>
|
|
|
</template>
|
|
|
</vxe-column>
|
|
|
- </vxe-table>
|
|
|
+ </vxe-table> -->
|
|
|
|
|
|
<vxe-table v-show="menuIndex == '2'"
|
|
|
show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
|
|
|
@@ -179,104 +202,132 @@
|
|
|
<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :min="1" :max="100" :step="1" style="width: 120px;"></el-input-number> %
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+ <template v-if="handleData.watermarkType == '2'">
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">上传图片：</label>
|
|
|
+ <el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
|
|
|
+ <el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width: 165px;" ></el-input>
|
|
|
+ <i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">缩放比例：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">不透明度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 文字水印 -->
|
|
|
- <div v-if="handleData.watermarkType == '1'">
|
|
|
- <div class="handle-item" v-if="menuIndex != '3'">
|
|
|
- <label class="handle-label">旋转角度：</label>
|
|
|
- <el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 120px;"></el-input-number>
|
|
|
- </div>
|
|
|
- <div class="handle-item">
|
|
|
- <label class="handle-label">文字字体：</label>
|
|
|
- <el-select size="small" v-model="handleData.fonts" style="width:170px;" @change="handleImg">
|
|
|
- <el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :label="item.name"></el-option>
|
|
|
- </el-select>
|
|
|
- <vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时，请选择中文字体！', type:'warning'})"></vxe-button>
|
|
|
- </div>
|
|
|
- <template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
|
|
|
- <div class="handle-item" style="overflow: hidden;">
|
|
|
- <label class="handle-label">水印密度：</label>
|
|
|
- <div class="line-density">
|
|
|
- <label class="density-label">行数</label>
|
|
|
- <el-input-number size="small" style="width: 120px;margin-right: 4px;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
|
|
|
- <label class="density-label">列数</label>
|
|
|
- <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
|
|
|
+ <!-- 第二列 -->
|
|
|
+ <div>
|
|
|
+ <!-- 文字水印 -->
|
|
|
+ <template v-if="handleData.watermarkType == '1'">
|
|
|
+ <div class="handle-item" v-if="menuIndex != '3'">
|
|
|
+ <label class="handle-label">旋转角度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 120px;"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">文字字体：</label>
|
|
|
+ <el-select size="small" v-model="handleData.fonts" style="width:170px;" @change="handleImg">
|
|
|
+ <el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :label="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时，请选择中文字体！', type:'warning'})"></vxe-button>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">水印位置：</label>
|
|
|
+ <el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
|
|
|
+ <el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div style="display: inline-block;float: right;">
|
|
|
+ <div style="padding: 6px 0;">
|
|
|
+ <label class="">水平边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="">垂直边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
|
|
|
+ <div class="handle-item" style="overflow: hidden;">
|
|
|
+ <label class="handle-label">水印密度：</label>
|
|
|
+ <div class="line-density">
|
|
|
+ <label class="density-label">行数</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;margin-right: 4px;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
|
|
|
+ <label class="density-label">列数</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="menuIndex == '3'">
|
|
|
+ <div class="handle-item" style="overflow: hidden;">
|
|
|
+ <label class="handle-label">动态滚动：</label>
|
|
|
+ <div class="line-density" style="vertical-align:middle">
|
|
|
+ <label class="density-label">方向</label>
|
|
|
+ <el-select size="small" v-model="handleData.direction" style="width:140px;" @change="handleImg">
|
|
|
+ <el-option value="0" label="无"></el-option>
|
|
|
+ <el-option value="left2right" label="从左往右"></el-option>
|
|
|
+ <el-option value="right2left" label="从右往左"></el-option>
|
|
|
+ <el-option value="top2bottom" label="从上往下"></el-option>
|
|
|
+ <el-option value="bottom2top" label="从下往上"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <template v-if="handleData.direction != 0">
|
|
|
+ <div style="margin-top: 5px;">
|
|
|
+ <label class="density-label">速度</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 60px;"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- <template v-if="menuIndex == '3'">
|
|
|
- <div class="handle-item" style="overflow: hidden;">
|
|
|
- <label class="handle-label">动态滚动：</label>
|
|
|
- <div class="line-density" style="vertical-align:middle">
|
|
|
- <label class="density-label">方向</label>
|
|
|
- <el-select size="small" v-model="handleData.direction" style="width:140px;" @change="handleImg">
|
|
|
- <el-option value="0" label="无"></el-option>
|
|
|
- <el-option value="left2right" label="从左往右"></el-option>
|
|
|
- <el-option value="right2left" label="从右往左"></el-option>
|
|
|
- <el-option value="top2bottom" label="从上往下"></el-option>
|
|
|
- <el-option value="bottom2top" label="从下往上"></el-option>
|
|
|
- </el-select>
|
|
|
- <template v-if="handleData.direction != 0">
|
|
|
- <div style="margin-top: 5px;">
|
|
|
- <label class="density-label">速度</label>
|
|
|
- <el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 60px;"></el-input-number>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+
|
|
|
+ <!-- 图片水印 -->
|
|
|
+ <template v-if="handleData.watermarkType == '2'">
|
|
|
+ <div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != '3'">
|
|
|
+ <label class="handle-label">旋转角度：</label>
|
|
|
+ <el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">水印位置1：</label>
|
|
|
+ <el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
|
|
|
+ <el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div style="display: inline-block;float: right;">
|
|
|
+ <div style="padding: 6px 0;">
|
|
|
+ <label class="">水平边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="">垂直边距</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
|
|
|
+ <div class="handle-item">
|
|
|
+ <label class="handle-label">水印密度：</label>
|
|
|
+ <div class="line-density">
|
|
|
+ <label class="density-label">行数</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
|
|
|
+ <label class="density-label">列数</label>
|
|
|
+ <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- </div>
|
|
|
- <!-- 图片水印 -->
|
|
|
- <div v-if="handleData.watermarkType == '2'">
|
|
|
- <div class="handle-item">
|
|
|
- <label class="handle-label">上传图片：</label>
|
|
|
- <el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
|
|
|
- <el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width: 165px;" ></el-input>
|
|
|
- <i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- <div class="handle-item">
|
|
|
- <label class="handle-label">缩放比例：</label>
|
|
|
- <el-input-number size="small" v-model="handleData.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
|
|
|
- </div>
|
|
|
- <div class="handle-item">
|
|
|
- <label class="handle-label">不透明度：</label>
|
|
|
- <el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- <div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != '3'">
|
|
|
- <label class="handle-label">旋转角度：</label>
|
|
|
- <el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
|
|
|
- </div>
|
|
|
- <div class="handle-item">
|
|
|
- <label class="handle-label">水印位置：</label>
|
|
|
- <el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
|
|
|
- <el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <div style="display: inline-block;float: right;">
|
|
|
- <div style="padding: 6px 0;">
|
|
|
- <label class="">水平边距</label>
|
|
|
- <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label class="">垂直边距</label>
|
|
|
- <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template v-if="handleData.watermarkType == '2' && handleData.watermarkStyle == 2 && menuIndex != '3'">
|
|
|
- <div class="handle-item">
|
|
|
- <label class="handle-label">水印密度：</label>
|
|
|
- <div class="line-density">
|
|
|
- <label class="density-label">行数</label>
|
|
|
- <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
|
|
|
- <label class="density-label">列数</label>
|
|
|
- <el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
<!-- 多个水印 -->
|
|
|
<template v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2' && this.handleData.watermarkStyle == 3" >
|
|
|
@@ -326,14 +377,16 @@
|
|
|
</template>
|
|
|
|
|
|
|
|
|
- <!-- <div>
|
|
|
+ <div>
|
|
|
<span>保存目录：</span>
|
|
|
<el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:180px;" prefix-icon="el-icon-folder"></el-input>
|
|
|
<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
|
|
|
<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
|
|
|
</el-popover>
|
|
|
- <el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
|
|
|
- </div> -->
|
|
|
+ <div>
|
|
|
+ <el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
