|
|
@@ -15,6 +15,8 @@ import {apiMap} from "../../../map/apiMap";
|
|
|
import SearchBox from "../../../components/search/searchBox.vue";
|
|
|
import {pTypes} from "../../../map/productMap";
|
|
|
import {newsType} from "../../../map/newMap";
|
|
|
+import {toNumber} from "../../../until/typeTool";
|
|
|
+import {isEmpty} from "../../../server/tools/typeTool_cjs";
|
|
|
export default defineComponent({
|
|
|
name: 'carousel',
|
|
|
computed: {
|
|
|
@@ -69,11 +71,15 @@ export default defineComponent({
|
|
|
state: 0,
|
|
|
},
|
|
|
// 状态 0:禁用,1:启用
|
|
|
- status: {
|
|
|
- val: 0,
|
|
|
- init: 0,
|
|
|
+ state: {
|
|
|
+ val: dbField_esm.db_base.carouselState.disable,
|
|
|
+ init: dbField_esm.db_base.carouselState.disable,
|
|
|
msg: '',
|
|
|
state: 0,
|
|
|
+ options: [
|
|
|
+ {label: '禁用', value: dbField_esm.db_base.carouselState.disable},
|
|
|
+ {label: '启用', value: dbField_esm.db_base.carouselState.enable},
|
|
|
+ ]
|
|
|
},
|
|
|
// 轮播类型 '0:product','1:news','2:page','3:href'
|
|
|
type: {
|
|
|
@@ -141,7 +147,7 @@ export default defineComponent({
|
|
|
methods: {
|
|
|
async getCarouselList(){
|
|
|
this.loading = true;
|
|
|
- let [err,res] = await handle(this.$axios.get(apiMap.carouselList.path));
|
|
|
+ let [err,res] = await handle(this.$axios.get(apiMap.carouselAllList.path));
|
|
|
this.loading = false;
|
|
|
if(err){
|
|
|
if(this.NotificationKey){
|
|
|
@@ -249,6 +255,7 @@ export default defineComponent({
|
|
|
return [{message:result.msg},null];
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
checkFormItem(field,enumOptions,reCheckField){
|
|
|
let formItem = this.form[field];
|
|
|
if (formItem){
|
|
|
@@ -359,26 +366,115 @@ export default defineComponent({
|
|
|
onPopOkClickHandle(){
|
|
|
if(this.isEditCarousel){
|
|
|
console.log('保存修改后的轮播数据');
|
|
|
+ this.updateCarouselExecute();
|
|
|
}else{
|
|
|
console.log('新增轮播图');
|
|
|
this.addCarouselExecute();
|
|
|
}
|
|
|
},
|
|
|
- addCarouselExecute(){
|
|
|
+ async addCarouselExecute(){
|
|
|
// 生成新数据表单
|
|
|
let carouselData = {};
|
|
|
let isPass = this.checkFormItem();
|
|
|
if(!isPass){
|
|
|
return console.log('数据验证不通过');
|
|
|
}
|
|
|
+ console.log('开始生成新数据表单');
|
|
|
+ carouselData.sort = this.form.sort.val;
|
|
|
+ carouselData.type = this.form.type.val;
|
|
|
+ carouselData.value = this.form.value.val;
|
|
|
+ carouselData.fileId = this.form.fileData.val;
|
|
|
+ carouselData.state = this.form.state.val;
|
|
|
+ // 生成新数据表单完毕
|
|
|
+ console.log('生成新数据表单完毕');
|
|
|
+ this.carouselPopLoading = true;
|
|
|
+ let [err,res] = await handle(this.$axios.put(apiMap.baseAddCarousel.path,carouselData));
|
|
|
+ this.carouselPopLoading = false;
|
|
|
+ if(err){
|
|
|
+ console.log(err);
|
|
|
+ return this.$message.error('新增轮播图失败');
|
|
|
+ }
|
|
|
+ this.$message.success('新增轮播成功');
|
|
|
+ this.carouselPopShow = false;
|
|
|
+ await this.getCarouselList();
|
|
|
|
|
|
},
|
|
|
+ async updateCarouselExecute(){
|
|
|
+ let carouselData = {};
|
|
|
+ let isPass = this.checkFormItem();
|
|
|
+ if(!isPass){
|
|
|
+ return console.log('数据验证不通过');
|
|
|
+ }
|
|
|
+ // 获取更新项
|
|
|
+ console.log(`获取更新项`);
|
|
|
+ let updateItems = {};
|
|
|
+ console.log(this.carouselData);
|
|
|
+ let carouselId = this.carouselData.id;
|
|
|
+ if(this.form.sort.val != toNumber(this.carouselData.sort)){
|
|
|
+ updateItems.sort = this.form.sort.val;
|
|
|
+ }
|
|
|
+ if(this.form.type.val != toNumber(this.carouselData.type)){
|
|
|
+ updateItems.type = this.form.type.val;
|
|
|
+ }
|
|
|
+ if(this.form.value.val != this.carouselData.value){
|
|
|
+ updateItems.value = this.form.value.val;
|
|
|
+ }
|
|
|
+ if(toNumber(this.form.fileData.val) != this.carouselData.fileId){
|
|
|
+ updateItems.fileId = this.form.fileData.val;
|
|
|
+ }
|
|
|
+ if(this.form.state.val != this.carouselData.state){
|
|
|
+ updateItems.state = this.form.state.val;
|
|
|
+ }
|
|
|
+ if(isEmpty(updateItems)){
|
|
|
+ return this.$message.warn('未修改任何数据');
|
|
|
+ }
|
|
|
+ console.log(`更新轮播数据,更新数量: ${Object.keys(updateItems).length} 更新字段: [${Object.keys(updateItems).join(',')}]`);
|
|
|
+ this.carouselPopLoading = true;
|
|
|
+ let [err,res] = await handle(this.$axios.post(apiMap.baseUpdateCarousel.path,{
|
|
|
+ carouselId,
|
|
|
+ updateItems
|
|
|
+ }));
|
|
|
+ this.carouselPopLoading = false;
|
|
|
+ if(err){
|
|
|
+ console.log(err);
|
|
|
+ return this.$message.error('更新轮播图失败');
|
|
|
+ }
|
|
|
+ let result = res.data;
|
|
|
+ if (result.code === rCode.OK){
|
|
|
+ this.$message.success('更新轮播成功');
|
|
|
+ this.carouselPopShow = false;
|
|
|
+ await this.getCarouselList();
|
|
|
+ }else{
|
|
|
+ this.$message.error(`更新轮播失败,${result.msg}`);
|
|
|
+ }
|
|
|
|
|
|
+ },
|
|
|
|
|
|
-
|
|
|
- showPop(){
|
|
|
- this.popShow = true;
|
|
|
- this.popLoading = false;
|
|
|
+ getCarouselTypeText(type){
|
|
|
+ type = toNumber(type);
|
|
|
+ let typeText = '';
|
|
|
+ if(type === dbField_esm.db_base.carouselType.production){
|
|
|
+ typeText = '产品';
|
|
|
+ }else if(type === dbField_esm.db_base.carouselType.news){
|
|
|
+ typeText = '文章';
|
|
|
+ }else if(type === dbField_esm.db_base.carouselType.href){
|
|
|
+ typeText = '直接链接';
|
|
|
+ }else{
|
|
|
+ typeText = '暂未支持类型';
|
|
|
+ }
|
|
|
+ return typeText
|
|
|
+ },
|
|
|
+ getCarouselStateText(state){
|
|
|
+ // state = toNumber(state);
|
|
|
+ let typeText = '';
|
|
|
+ if(state === dbField_esm.db_base.carouselState.enable){
|
|
|
+ typeText = '启用';
|
|
|
+ }else if(state === dbField_esm.db_base.carouselState.disable){
|
|
|
+ typeText = '禁用';
|
|
|
+ }else{
|
|
|
+ typeText = '未知状态';
|
|
|
+ }
|
|
|
+ return typeText
|
|
|
},
|
|
|
cancelPop(){
|
|
|
this.imageSelectVisible = false;
|
|
|
@@ -388,7 +484,7 @@ export default defineComponent({
|
|
|
console.log(fileItem);
|
|
|
this.cancelPop();
|
|
|
this.$nextTick(()=>{
|
|
|
- this.form.fileData.val = fileItem.filePath;
|
|
|
+ this.form.fileData.val = fileItem.fileId;
|
|
|
this.form.fileData.state = 1;
|
|
|
this.form.fileData.msg = '';
|
|
|
this.form.fileData.showText = fileItem.filePath;
|
|
|
@@ -419,6 +515,34 @@ export default defineComponent({
|
|
|
console.log(e);
|
|
|
console.log(this.productSearch.type.val);
|
|
|
},
|
|
|
+ onClickEditHandle(item){
|
|
|
+ console.log(`点击编辑轮播图`);
|
|
|
+ console.log(item);
|
|
|
+ if(!item || !item.id){
|
|
|
+ return this.$message.warn('轮播数据获取异常,已经取消编辑');
|
|
|
+ }
|
|
|
+ this.initCarouseForm();
|
|
|
+
|
|
|
+ this.isEditCarousel = true;
|
|
|
+ this.carouselData = item;
|
|
|
+ this.carouselPopShow = true;
|
|
|
+ this.carouselPopLoading = true;
|
|
|
+ this.form.sort.val = toNumber(item.sort);
|
|
|
+ this.form.sort.init = toNumber(item.sort);
|
|
|
+ this.form.type.val = toNumber(item.type);
|
|
|
+ this.form.type.init = toNumber(item.type);
|
|
|
+ this.form.value.val = item.value;
|
|
|
+ this.form.value.init = item.value;
|
|
|
+ this.form.value.showText = item.valueShowText;
|
|
|
+ this.form.value.oldShowText = item.oldShowText;
|
|
|
+ this.form.fileData.val = item.fileId;
|
|
|
+ this.form.fileData.init = item.fileId;
|
|
|
+ this.form.fileData.showText = item.filePath;
|
|
|
+ this.form.fileData.oldShowText = item.filePath;
|
|
|
+ this.form.state.val = item.state;
|
|
|
+ this.carouselPopLoading = false;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
|
|
|
@@ -433,11 +557,16 @@ export default defineComponent({
|
|
|
<div class="mt-2 rounded bg-white p-2">
|
|
|
<div class="py-1 border-b border-cyan-300 flex justify-between">
|
|
|
点击下方快进行管理轮播图数据,一次性不要添加过多轮播图
|
|
|
-<!-- 新增按钮-->
|
|
|
- <a-button type="primary" class="ant-icon-btn" icon="plus" @click="openAddCarouselModal" :loading="loading"></a-button>
|
|
|
-<!-- 刷新按钮-->
|
|
|
- <a-button type="primary" class="ant-icon-btn" icon="reload" @click="getCarouselList" :loading="loading"></a-button>
|
|
|
+ <div class="px-2 flex">
|
|
|
+
|
|
|
+ <!-- 新增按钮-->
|
|
|
+ <a-button type="primary" class="ant-icon-btn mr-2" icon="plus" @click="openAddCarouselModal" :loading="loading"></a-button>
|
|
|
+ <!-- 刷新按钮-->
|
|
|
+ <a-button type="primary" class="ant-icon-btn " icon="reload" @click="getCarouselList" :loading="loading"></a-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="w-full h-auto transition">
|
|
|
<div v-show="loading" class="w-full h-64 flex justify-center items-center ">
|
|
|
<a-spin size="large" />
|
|
|
@@ -452,9 +581,17 @@ export default defineComponent({
|
|
|
<image-viewer :src="item.filePath"></image-viewer>
|
|
|
</div>
|
|
|
<div class="w-1/2 h-full box-border pl-2">
|
|
|
- <a-button @click="showPop">编辑</a-button>
|
|
|
- 排序{{item.sort}},数字越小越靠前
|
|
|
- 链接地址: {{item.href}}
|
|
|
+ <div class="w-full py-2 border-bottom border-gray-400">
|
|
|
+ 排序: {{item.sort}}
|
|
|
+ </div>
|
|
|
+ <div class="w-full py-2 border-bottom border-gray-400">
|
|
|
+ {{getCarouselTypeText(item.type)}}: {{item.valueShowText}}
|
|
|
+ </div>
|
|
|
+ <div class="w-full py-2 border-bottom border-gray-400">
|
|
|
+ 状态: {{getCarouselStateText(item.state)}}
|
|
|
+ </div>
|
|
|
+ <a-button @click="onClickEditHandle(item)">编辑</a-button>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -482,6 +619,17 @@ export default defineComponent({
|
|
|
/>
|
|
|
</input-row>
|
|
|
|
|
|
+ <input-row :msg="form.state.msg"
|
|
|
+ label="状态">
|
|
|
+ <a-radio-group v-model="form.state.val">
|
|
|
+ <a-radio-button v-for="opt in form.state.options"
|
|
|
+ :key="'cState'+opt.value"
|
|
|
+ :value="opt.value">
|
|
|
+ {{ opt.label }}
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </input-row>
|
|
|
+
|
|
|
<!-- 轮播类型选择 -->
|
|
|
<input-row :msg="form.type.msg"
|
|
|
label="轮播类型">
|
|
|
@@ -569,7 +717,7 @@ export default defineComponent({
|
|
|
</search-box>
|
|
|
</div>
|
|
|
<a-button type="primary">
|
|
|
- 选择产品
|
|
|
+ 选择文章
|
|
|
</a-button>
|
|
|
</a-popover>
|
|
|
</input-row>
|