|
@@ -23,7 +23,10 @@
|
|
<!-- 轮播图列表 -->
|
|
<!-- 轮播图列表 -->
|
|
<div class="common-card a-card-margin-top basic-information-box">
|
|
<div class="common-card a-card-margin-top basic-information-box">
|
|
<div class="basic-information-title">轮播图列表</div>
|
|
<div class="basic-information-title">轮播图列表</div>
|
|
- <div class="carousel-list">
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-if="carouselList && carouselList.length > 0"
|
|
|
|
+ class="carousel-list"
|
|
|
|
+ >
|
|
<div
|
|
<div
|
|
:class="{
|
|
:class="{
|
|
'carousel-item': true,
|
|
'carousel-item': true,
|
|
@@ -33,15 +36,23 @@
|
|
:key="index"
|
|
:key="index"
|
|
>
|
|
>
|
|
<img class="carousel-item-img" :src="item.url" fit="contain" />
|
|
<img class="carousel-item-img" :src="item.url" fit="contain" />
|
|
|
|
+ <a title="绑定文章">
|
|
|
|
+ <a-icon
|
|
|
|
+ class="carousel-item-icon carousel-item-reddit"
|
|
|
|
+ type="reddit"
|
|
|
|
+ @click="handleShowDialog(item)"
|
|
|
|
+ />
|
|
|
|
+ </a>
|
|
<a title="删除">
|
|
<a title="删除">
|
|
<a-icon
|
|
<a-icon
|
|
- class="carousel-item-delete"
|
|
|
|
|
|
+ class="carousel-item-icon carousel-item-delete"
|
|
type="delete"
|
|
type="delete"
|
|
@click="handleDeleteCarousel(item)"
|
|
@click="handleDeleteCarousel(item)"
|
|
/>
|
|
/>
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div v-else class="carousel-list-none">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</a-spin>
|
|
<!-- <div class="company-info">
|
|
<!-- <div class="company-info">
|
|
@@ -49,11 +60,100 @@
|
|
copyright © 浮游科技有限公司出品
|
|
copyright © 浮游科技有限公司出品
|
|
</span>
|
|
</span>
|
|
</div> -->
|
|
</div> -->
|
|
|
|
+ <a-modal
|
|
|
|
+ class="article-carousel-bind-modal"
|
|
|
|
+ :title="carouselTitle"
|
|
|
|
+ width="80%"
|
|
|
|
+ v-model="isVisible"
|
|
|
|
+ centered
|
|
|
|
+ :maskClosable="false"
|
|
|
|
+ @cancel="handleCloseDialog"
|
|
|
|
+ >
|
|
|
|
+ <div>
|
|
|
|
+ <!-- 过滤条件栏目 -->
|
|
|
|
+ <div>
|
|
|
|
+ <div class="filter-condition-box">
|
|
|
|
+ <span>文章类型:</span>
|
|
|
|
+ <ul>
|
|
|
|
+ <li
|
|
|
|
+ :class="{
|
|
|
|
+ checkedExamQuestionType: articleArticleType === item.id,
|
|
|
|
+ }"
|
|
|
|
+ v-for="(item, index) in articleTypeList"
|
|
|
|
+ :key="index"
|
|
|
|
+ @click="handleArticleTypeParent(item)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="filter-condition-box a-card-margin-top">
|
|
|
|
+ <span>所属子类:</span>
|
|
|
|
+ <ul>
|
|
|
|
+ <li
|
|
|
|
+ :class="{
|
|
|
|
+ checkedExamQuestionType:
|
|
|
|
+ checkedArticleTypeChildren === item.id,
|
|
|
|
+ }"
|
|
|
|
+ v-for="(item, index) in articleTypeChildrenList"
|
|
|
|
+ :key="index"
|
|
|
|
+ @click="handleArticleTypeChildren(item)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class="border-line"></div> -->
|
|
|
|
+ <div class="filter-other-box a-card-margin-top">
|
|
|
|
+ <span class="filter-other-title">其它选项:</span>
|
|
|
|
+ <span class="filter-other-item-title">工种:</span>
|
|
|
|
+ <a-select
|
|
|
|
+ v-model="engineeringWorkChooseValue"
|
|
|
|
+ @change="handleChangeEngineeringWorkValue"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option
|
|
|
|
+ v-for="(item, index) in engineeringWorkList"
|
|
|
|
+ :key="index"
|
|
|
|
+ :value="item.id"
|
|
|
|
+ >{{ item.name }}</a-select-option
|
|
|
|
+ >
|
|
|
|
+ </a-select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="a-card-margin-top">
|
|
|
|
+ <a-table
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :row-key="(record) => record.id"
|
|
|
|
+ :data-source="tableData"
|
|
|
|
+ :pagination="false"
|
|
|
|
+ >
|
|
|
|
+ <a
|
|
|
|
+ slot="action"
|
|
|
|
+ slot-scope="text, record"
|
|
|
|
+ @click="handleArticleBindCarousel(record)"
|
|
|
|
+ >绑定</a
|
|
|
|
+ >
|
|
|
|
+ </a-table>
|
|
|
|
+ <!-- 分页 -->
|
|
|
|
+ <div class="a-pagination-display">
|
|
|
|
+ <a-pagination
|
|
|
|
+ v-model="pagination.current"
|
|
|
|
+ :pageSize="pagination.pageSize"
|
|
|
|
+ :total.sync="pagination.total"
|
|
|
|
+ show-less-items
|
|
|
|
+ show-quick-jumper
|
|
|
|
+ @change="onChangePagesize"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { formatePathParams } from '@/filters';
|
|
|
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
|
+import { formatePathParams, formateEngineeringWork } from '@/filters';
|
|
export default {
|
|
export default {
|
|
name: 'examQuestionBatchImport',
|
|
name: 'examQuestionBatchImport',
|
|
props: {},
|
|
props: {},
|
|
@@ -64,39 +164,82 @@ export default {
|
|
headers: {
|
|
headers: {
|
|
authorization: 'authorization-text',
|
|
authorization: 'authorization-text',
|
|
},
|
|
},
|
|
- carouselList: [
|
|
|
|
|
|
+ carouselTitle: '绑定文章', // 轮播图绑定文章弹框标题
|
|
|
|
+ carouselList: [], // 已有轮播图列表
|
|
|
|
+ toBindCarouselData: null, // 将要绑定文章的轮播图信息
|
|
|
|
+ isVisible: false, // 弹框是否可见
|
|
|
|
+ articleTypeList: [], // 文章类型列表
|
|
|
|
+ articleArticleType: '', // 所选文章类型
|
|
|
|
+ articleTypeChildrenList: [], // 所属子类
|
|
|
|
+ checkedArticleTypeChildren: '', // 所选试题类型
|
|
|
|
+ engineeringWorkList: [], // 工种数据列表
|
|
|
|
+ engineeringWorkChooseValue: '', // 所选工种
|
|
|
|
+ tableData: [], // 文章列表数据
|
|
|
|
+ pagination: {
|
|
|
|
+ pageSize: 7,
|
|
|
|
+ current: 1,
|
|
|
|
+ total: 0,
|
|
|
|
+ }, // 分页参数
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.initDataFun(); //初始化数据
|
|
|
|
+ },
|
|
|
|
+ mounted() {},
|
|
|
|
+ beforeDestroy() {},
|
|
|
|
+ watch: {},
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters([
|
|
|
|
+ 'GET_ENGINEERING_WORK_LIST',
|
|
|
|
+ 'GET_EXAM_QUESTION_TYPE_CONDITION_PARENT',
|
|
|
|
+ ]),
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //初始化数据
|
|
|
|
+ initDataFun() {
|
|
|
|
+ // 工种类别
|
|
|
|
+ this.engineeringWorkList = [
|
|
|
|
+ { name: '全部', id: '' },
|
|
|
|
+ ...this.GET_ENGINEERING_WORK_LIST,
|
|
|
|
+ ];
|
|
|
|
+ this.engineeringWorkChooseValue = this.engineeringWorkList[0].id;
|
|
|
|
+ this.getArticleTypeFun(); // 查询:文章分类-父类
|
|
|
|
+ this.columns = [
|
|
|
|
+ {
|
|
|
|
+ title: '文章名字',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ key: 'name',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ key: 'action',
|
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
|
+ width: 150,
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ this.getCarouselListFun(); // 查询:轮播图列表
|
|
|
|
+ this.carouselList = [
|
|
{
|
|
{
|
|
- id: 1,
|
|
|
|
url:
|
|
url:
|
|
- 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/f843e819a41048f3b21a86eea4d61120.png',
|
|
|
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/d2ccf0b6099f4a7c80a0217705f04c86.png',
|
|
materialId: '',
|
|
materialId: '',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- id: 2,
|
|
|
|
url:
|
|
url:
|
|
- 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/f843e819a41048f3b21a86eea4d61120.png',
|
|
|
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/d2ccf0b6099f4a7c80a0217705f04c86.png',
|
|
materialId: '',
|
|
materialId: '',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- id: 3,
|
|
|
|
url:
|
|
url:
|
|
- 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/f843e819a41048f3b21a86eea4d61120.png',
|
|
|
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/d2ccf0b6099f4a7c80a0217705f04c86.png',
|
|
materialId: '',
|
|
materialId: '',
|
|
},
|
|
},
|
|
- ], // 已有轮播图列表
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.initDataFun(); //初始化数据
|
|
|
|
- },
|
|
|
|
- mounted() {},
|
|
|
|
- beforeDestroy() {},
|
|
|
|
- watch: {},
|
|
|
|
- computed: {},
|
|
|
|
- methods: {
|
|
|
|
- //初始化数据
|
|
|
|
- initDataFun() {
|
|
|
|
- // this.getCarouselListFun(); // 查询:轮播图列表
|
|
|
|
|
|
+ {
|
|
|
|
+ url:
|
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/d2ccf0b6099f4a7c80a0217705f04c86.png',
|
|
|
|
+ materialId: '',
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
},
|
|
},
|
|
// 查询:轮播图列表
|
|
// 查询:轮播图列表
|
|
getCarouselListFun() {
|
|
getCarouselListFun() {
|
|
@@ -106,7 +249,6 @@ export default {
|
|
this.$_http
|
|
this.$_http
|
|
.get(this.$_API.INTERFACE_GET_CAROUSELS_LIST, { params })
|
|
.get(this.$_API.INTERFACE_GET_CAROUSELS_LIST, { params })
|
|
.then((res) => {
|
|
.then((res) => {
|
|
- console.log(res);
|
|
|
|
this.carouselList = res.data;
|
|
this.carouselList = res.data;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
})
|
|
})
|
|
@@ -116,7 +258,6 @@ export default {
|
|
},
|
|
},
|
|
// 上传前的校验
|
|
// 上传前的校验
|
|
beforeUpload(file) {
|
|
beforeUpload(file) {
|
|
- console.log(file);
|
|
|
|
let isJpgOrPng =
|
|
let isJpgOrPng =
|
|
file.type === 'image/jpeg' ||
|
|
file.type === 'image/jpeg' ||
|
|
file.type === 'image/png' ||
|
|
file.type === 'image/png' ||
|
|
@@ -133,7 +274,6 @@ export default {
|
|
},
|
|
},
|
|
// 确认上传图片
|
|
// 确认上传图片
|
|
uploadFileFun(data) {
|
|
uploadFileFun(data) {
|
|
- console.log(data);
|
|
|
|
this.loading = true;
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
const formData = new FormData();
|
|
formData.append('image-file', data.file);
|
|
formData.append('image-file', data.file);
|
|
@@ -144,69 +284,229 @@ export default {
|
|
},
|
|
},
|
|
})
|
|
})
|
|
.then((res) => {
|
|
.then((res) => {
|
|
- console.log(res);
|
|
|
|
this.loading = false;
|
|
this.loading = false;
|
|
- // this.carouselAddFun(res.data); // 新增一个轮播图
|
|
|
|
|
|
+ this.handleShowDialog(res.data); // 操作:打开弹框
|
|
})
|
|
})
|
|
.catch((err) => {
|
|
.catch((err) => {
|
|
this.$message.error(`${err.response.data}`);
|
|
this.$message.error(`${err.response.data}`);
|
|
this.loading = false;
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- // 新增一个轮播图
|
|
|
|
- carouselAddFun(item) {
|
|
|
|
- if (!item || !item.url) {
|
|
|
|
|
|
+ // 操作:打开弹框
|
|
|
|
+ handleShowDialog(data) {
|
|
|
|
+ if (!data || !data.url) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- let params = {
|
|
|
|
- materialId: '',
|
|
|
|
- imageUrl: item.url,
|
|
|
|
- };
|
|
|
|
|
|
+ this.toBindCarouselData = data.url;
|
|
|
|
+ this.getArticleListFun(); // 查询:文章列表数据
|
|
|
|
+ this.isVisible = true;
|
|
|
|
+ },
|
|
|
|
+ // 操作:关闭弹框
|
|
|
|
+ handleCloseDialog() {
|
|
|
|
+ this.toBindCarouselData = null;
|
|
|
|
+ this.articleArticleType = this.articleTypeList[0].id;
|
|
|
|
+ this.articleTypeChildrenList = [{ name: '全部', id: '' }];
|
|
|
|
+ this.initPagination(); // 初始化分页参数
|
|
|
|
+ this.isVisible = false;
|
|
|
|
+ },
|
|
|
|
+ // 查询:文章分类-父类
|
|
|
|
+ getArticleTypeFun() {
|
|
|
|
+ this.$_http.get(this.$_API.INTERFACE_GET_CATEGORIES).then((res) => {
|
|
|
|
+ this.articleTypeList = [{ name: '全部', id: '' }, ...res.data];
|
|
|
|
+ this.articleArticleType = this.articleTypeList[0].id;
|
|
|
|
+ this.articleTypeChildrenList = [{ name: '全部', id: '' }];
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 查询:文章分类-子类
|
|
|
|
+ getArticleTypeChildrenFun() {
|
|
|
|
+ if (!this.articleArticleType) {
|
|
|
|
+ this.articleTypeChildrenList = [{ name: '全部', id: '' }];
|
|
|
|
+ this.checkedArticleTypeChildren = this.articleTypeChildrenList[0].id;
|
|
|
|
+ this.initPagination(); // 初始化分页参数
|
|
|
|
+ this.getArticleListFun(); // 查询:文章列表数据
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let params = { categoryId: this.articleArticleType };
|
|
this.$_http
|
|
this.$_http
|
|
- .post(this.$_API.INTERFACE_POST_CAROUSELS_ADD, params)
|
|
|
|
|
|
+ .get(
|
|
|
|
+ formatePathParams(
|
|
|
|
+ this.$_API.INTERFACE_GET_CATEGORIES_CATEGROYID,
|
|
|
|
+ params
|
|
|
|
+ )
|
|
|
|
+ )
|
|
.then((res) => {
|
|
.then((res) => {
|
|
- if (res.success && res.data) {
|
|
|
|
- this.$message.success(`成功上传一张轮播图`);
|
|
|
|
- } else {
|
|
|
|
- this.$message.error(`${res.data || res.message}`);
|
|
|
|
- }
|
|
|
|
|
|
+ this.articleTypeChildrenList = res.data;
|
|
|
|
+ this.checkedArticleTypeChildren = this.articleTypeChildrenList[0].id;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
|
|
+ this.initPagination(); // 初始化分页参数
|
|
|
|
+ this.getArticleListFun(); // 查询:文章列表数据
|
|
})
|
|
})
|
|
- .catch((err) => {
|
|
|
|
- this.$message.error(`${err.response.data}`);
|
|
|
|
|
|
+ .catch(() => {
|
|
this.loading = false;
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- // 操作:删除一个轮播图
|
|
|
|
- handleDeleteCarousel(item) {
|
|
|
|
- console.log(item);
|
|
|
|
- if (!item || !item.id) {
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
+ // 查询:文章列表数据
|
|
|
|
+ getArticleListFun() {
|
|
|
|
+ this.loading = true;
|
|
let params = {
|
|
let params = {
|
|
- carouselId: item.id,
|
|
|
|
|
|
+ categoryid: this.checkedArticleTypeChildren,
|
|
|
|
+ engineertypeid: this.engineeringWorkChooseValue, // 工种ID
|
|
|
|
+ page: this.pagination.current - 1,
|
|
|
|
+ size: this.pagination.pageSize,
|
|
};
|
|
};
|
|
this.$_http
|
|
this.$_http
|
|
- .delete(
|
|
|
|
- formatePathParams(
|
|
|
|
- this.$_API.INTERFACE_DELETE_CAROUSELS_DELETE,
|
|
|
|
- params
|
|
|
|
- )
|
|
|
|
- )
|
|
|
|
|
|
+ .get(this.$_API.INTERFACE_GET_ARTICLE_LIST, { params })
|
|
.then((res) => {
|
|
.then((res) => {
|
|
- console.log(res);
|
|
|
|
|
|
+ let resData = res.data.content;
|
|
|
|
+ resData.forEach((item) => {
|
|
|
|
+ this.GET_ENGINEERING_WORK_LIST.forEach((it) => {
|
|
|
|
+ if (item.id === it.id) {
|
|
|
|
+ item.engineeringWorkTxt = it.name;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ // 工种
|
|
|
|
+ if (item.engineerTypes) {
|
|
|
|
+ let findItem = formateEngineeringWork(
|
|
|
|
+ this.engineeringWorkList,
|
|
|
|
+ item.engineerTypes[0]
|
|
|
|
+ );
|
|
|
|
+ item.engineerTypeTxt = findItem ? findItem.name : '';
|
|
|
|
+ } else {
|
|
|
|
+ item.engineerTypeTxt = '不限';
|
|
|
|
+ }
|
|
|
|
+ if (item.contents && item.contents.length > 200) {
|
|
|
|
+ item.contentsShow = item.contents.slice(0, 199) + '...';
|
|
|
|
+ } else {
|
|
|
|
+ item.contentsShow = item.contents;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.tableData = [...resData];
|
|
|
|
+ this.pagination.total = res.data.totalElements;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
})
|
|
})
|
|
.catch(() => {
|
|
.catch(() => {
|
|
this.loading = false;
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ // 操作:选择某个文章类型-父类
|
|
|
|
+ handleArticleTypeParent(item) {
|
|
|
|
+ if (this.articleArticleType === item.id) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.articleArticleType = item.id;
|
|
|
|
+ this.getArticleTypeChildrenFun(); // 查询:文章分类-子类
|
|
|
|
+ },
|
|
|
|
+ // 初始化分页参数
|
|
|
|
+ initPagination() {
|
|
|
|
+ this.pagination.current = 1;
|
|
|
|
+ this.pagination.pageSize = 7;
|
|
|
|
+ this.pagination.total = 0;
|
|
|
|
+ },
|
|
|
|
+ // 操作:选择某个文章类型-子类
|
|
|
|
+ handleArticleTypeChildren(item) {
|
|
|
|
+ if (this.checkedArticleTypeChildren === item.id) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.checkedArticleTypeChildren = item.id;
|
|
|
|
+ this.initPagination(); // 初始化分页参数
|
|
|
|
+ this.getArticleListFun(); // 查询:文章列表数据
|
|
|
|
+ },
|
|
|
|
+ // 操作:选择了某个工种
|
|
|
|
+ handleChangeEngineeringWorkValue() {
|
|
|
|
+ this.initPagination(); // 初始化分页参数
|
|
|
|
+ this.getArticleListFun(); // 查询:文章列表数据
|
|
|
|
+ },
|
|
|
|
+ // 操作:切换页码
|
|
|
|
+ onChangePagesize() {
|
|
|
|
+ this.getArticleListFun(); // 查询:文章列表数据
|
|
|
|
+ },
|
|
|
|
+ // 操作:绑定文章
|
|
|
|
+ handleArticleBindCarousel(record) {
|
|
|
|
+ if (!record || !record.id) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let that = this;
|
|
|
|
+ that.$confirm({
|
|
|
|
+ title: '轮播图绑定文章',
|
|
|
|
+ content: `确认绑定文章 ${record.name} 吗?`,
|
|
|
|
+ okText: '确认',
|
|
|
|
+ cancelText: '取消',
|
|
|
|
+ onOk() {
|
|
|
|
+ let params = {
|
|
|
|
+ materialId: record.id,
|
|
|
|
+ imageUrl: that.toBindCarouselData.url,
|
|
|
|
+ };
|
|
|
|
+ that.$_http
|
|
|
|
+ .post(that.$_API.INTERFACE_POST_CAROUSELS_ADD, params)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ if (res.success && res.data) {
|
|
|
|
+ if (that.toBindCarouselData.id) {
|
|
|
|
+ that.$message.success(`绑定文章成功`);
|
|
|
|
+ } else {
|
|
|
|
+ that.$message.success(`成功上传一张轮播图并绑定了文章`);
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ that.$message.error(`${res.data || res.message}`);
|
|
|
|
+ }
|
|
|
|
+ that.loading = false;
|
|
|
|
+ that.handleCloseDialog(); // 操作:关闭弹框
|
|
|
|
+ that.getCarouselListFun(); // 查询:轮播图列表
|
|
|
|
+ })
|
|
|
|
+ .catch((err) => {
|
|
|
|
+ that.$message.error(`${err.response.data}`);
|
|
|
|
+ that.loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ onCancel() {},
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 操作:删除一个轮播图
|
|
|
|
+ handleDeleteCarousel(item) {
|
|
|
|
+ if (!item || !item.id) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let that = this;
|
|
|
|
+ that.$confirm({
|
|
|
|
+ title: '删除轮播图',
|
|
|
|
+ content: `确认删除这张轮播图吗?`,
|
|
|
|
+ okText: '确认',
|
|
|
|
+ cancelText: '取消',
|
|
|
|
+ onOk() {
|
|
|
|
+ that.loading = true;
|
|
|
|
+ let params = {
|
|
|
|
+ carouselId: item.id,
|
|
|
|
+ };
|
|
|
|
+ that.$_http
|
|
|
|
+ .delete(
|
|
|
|
+ formatePathParams(
|
|
|
|
+ that.$_API.INTERFACE_DELETE_CAROUSELS_DELETE,
|
|
|
|
+ params
|
|
|
|
+ )
|
|
|
|
+ )
|
|
|
|
+ .then(() => {
|
|
|
|
+ that.loading = false;
|
|
|
|
+ that.$message.success('成功删除一张轮播图');
|
|
|
|
+ that.getCarouselListFun(); // 查询:轮播图列表
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ that.loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ onCancel() {},
|
|
|
|
+ });
|
|
|
|
+ },
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
@import '~@/styles/common/variable.less';
|
|
@import '~@/styles/common/variable.less';
|
|
|
|
+.article-carousel-bind-modal {
|
|
|
|
+ width: 80%;
|
|
|
|
+ .ant-modal-footer {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@@ -219,23 +519,47 @@ export default {
|
|
.carousel-item {
|
|
.carousel-item {
|
|
width: 32%;
|
|
width: 32%;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ margin-bottom: @paddingMarginVal;
|
|
|
|
+ &:hover {
|
|
|
|
+ .carousel-item-reddit,
|
|
|
|
+ .carousel-item-delete {
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ .carousel-item-img {
|
|
|
|
+ border-color: @mainColorBlueNormal;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.carousel-item-img {
|
|
.carousel-item-img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 300px;
|
|
height: 300px;
|
|
|
|
+ border: 1px dashed @mainColorBorder;
|
|
}
|
|
}
|
|
- .carousel-item-delete {
|
|
|
|
|
|
+ .carousel-item-icon {
|
|
padding: 3px 3px;
|
|
padding: 3px 3px;
|
|
border-radius: 3px;
|
|
border-radius: 3px;
|
|
border: 1px solid @mainColorBorder;
|
|
border: 1px solid @mainColorBorder;
|
|
background-color: @mainColorWhite;
|
|
background-color: @mainColorWhite;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: @mainColorBlack65;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ .carousel-item-reddit {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: @paddingMarginVal;
|
|
|
|
+ left: @paddingMarginVal;
|
|
|
|
+ &:hover {
|
|
|
|
+ color: @mainColorBlueNormal;
|
|
|
|
+ border-color: @mainColorBlueNormal;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .carousel-item-delete {
|
|
position: absolute;
|
|
position: absolute;
|
|
right: @paddingMarginVal;
|
|
right: @paddingMarginVal;
|
|
top: @paddingMarginVal;
|
|
top: @paddingMarginVal;
|
|
- font-size: 20px;
|
|
|
|
- color: @mainColorBlack25;
|
|
|
|
- cursor: pointer;
|
|
|
|
&:hover {
|
|
&:hover {
|
|
color: @mainColorBlueNormal;
|
|
color: @mainColorBlueNormal;
|
|
|
|
+ border-color: @mainColorBlueNormal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -243,5 +567,11 @@ export default {
|
|
margin-right: 2%;
|
|
margin-right: 2%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .carousel-list-none {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 150px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 150px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|