|
@@ -112,12 +112,23 @@
|
|
|
>查看</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
- v-if="checkPrivilege('link', 'ConvertImage')"
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'ConvertImage') && !scope.row.imageUrls
|
|
|
+ "
|
|
|
class="btn-primary"
|
|
|
type="text"
|
|
|
@click="toConvertImage(scope.row)"
|
|
|
>生成图片</el-button
|
|
|
>
|
|
|
+ <el-button
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'ConvertImage') && scope.row.imageUrls
|
|
|
+ "
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toPreviewImage(scope.row)"
|
|
|
+ >预览图片</el-button
|
|
|
+ >
|
|
|
<el-button
|
|
|
v-if="checkPrivilege('link', 'delete')"
|
|
|
class="btn-danger"
|
|
@@ -136,7 +147,9 @@
|
|
|
>编辑题卡</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
- v-if="checkPrivilege('link', 'edit')"
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'edit') && scope.row.type !== 'CUSTOM'
|
|
|
+ "
|
|
|
class="btn-primary"
|
|
|
type="text"
|
|
|
@click="toEditInfo(scope.row)"
|
|
@@ -169,6 +182,13 @@
|
|
|
></modify-card-info>
|
|
|
<!-- ModifyCard -->
|
|
|
<modify-card ref="ModifyCard" @modified="getList"></modify-card>
|
|
|
+ <!-- image-preview -->
|
|
|
+ <simple-image-preview
|
|
|
+ :cur-image="curImage"
|
|
|
+ @on-prev="toPrevImage"
|
|
|
+ @on-next="toNextImage"
|
|
|
+ ref="SimpleImagePreview"
|
|
|
+ ></simple-image-preview>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -178,10 +198,11 @@ import { cardListPage, deleteCard, convertCardImage } from "../api";
|
|
|
import ModifyCardInfo from "../components/ModifyCardInfo";
|
|
|
import pickerOptions from "@/constants/datePickerOptions";
|
|
|
import ModifyCard from "../../card/components/ModifyCard";
|
|
|
+import SimpleImagePreview from "@/components/SimpleImagePreview";
|
|
|
|
|
|
export default {
|
|
|
name: "card-manage",
|
|
|
- components: { ModifyCardInfo, ModifyCard },
|
|
|
+ components: { ModifyCardInfo, ModifyCard, SimpleImagePreview },
|
|
|
data() {
|
|
|
return {
|
|
|
filter: {
|
|
@@ -198,7 +219,11 @@ export default {
|
|
|
curCard: {},
|
|
|
// date-picker
|
|
|
createTime: [],
|
|
|
- pickerOptions
|
|
|
+ pickerOptions,
|
|
|
+ // image-preview
|
|
|
+ imageList: [],
|
|
|
+ curImage: {},
|
|
|
+ curImageIndex: 0
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -275,6 +300,37 @@ export default {
|
|
|
async toConvertImage(row) {
|
|
|
await convertCardImage(row.id);
|
|
|
this.$message.success("操作成功!");
|
|
|
+ },
|
|
|
+ // image-preview
|
|
|
+ toPreviewImage(row) {
|
|
|
+ this.imageList = row.imageUrls;
|
|
|
+ this.curImageIndex = 0;
|
|
|
+ this.selectImage(0);
|
|
|
+ this.$refs.SimpleImagePreview.open();
|
|
|
+ },
|
|
|
+ selectImage(index) {
|
|
|
+ this.curImage = {
|
|
|
+ url: this.imageList[index],
|
|
|
+ filename: Math.floor(index / 2) + 1 + "-" + ((index % 2) + 1)
|
|
|
+ };
|
|
|
+ },
|
|
|
+ toPrevImage() {
|
|
|
+ if (this.curImageIndex === 0) {
|
|
|
+ this.curImageIndex = this.imageList.length - 1;
|
|
|
+ } else {
|
|
|
+ this.curImageIndex--;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectImage(this.curImageIndex);
|
|
|
+ },
|
|
|
+ toNextImage() {
|
|
|
+ if (this.curImageIndex === this.imageList.length - 1) {
|
|
|
+ this.curImageIndex = 0;
|
|
|
+ } else {
|
|
|
+ this.curImageIndex++;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectImage(this.curImageIndex);
|
|
|
}
|
|
|
}
|
|
|
};
|