hfysite/pages/manger/index/carousel.vue

<script>
import axios from "axios";
import {defineComponent} from "vue";
import fieldIsAllow from "../../../until/fieldIsAllow"
import RoundedTitle from "../../../components/public/roundedTitle.vue";
import {rCode} from "../../../map/rcodeMap_esm";
import handle from "../../../until/handle";
import ImageViewer from "../../../components/public/imageViewer.vue";
import ImageTable from "../../../components/public/imageTable.vue";
import Pop from "../../../components/public/pop.vue";
import PopCard from "../../../components/public/popCard.vue";
import InputRow from "../../../components/public/form/inputRow.vue";
import dbField_esm from "../../../map/dbField_esm";
import {apiMap} from "../../../map/apiMap";
import SearchBox from "../../../components/search/searchBox.vue";
import {pTypes} from "../../../map/productMap";
import {newsType} from "../../../map/newMap";
export default defineComponent({
  name: 'carousel',
  computed: {
    dbField_esm() {
      return dbField_esm
    },
    productTypes(){
      let arr = this.$store.getters.productTypes;
      // 添加 all
      arr.unshift({text: '全部', key: 'all' });
      return arr;
    },
    newsTypes(){// 添加 all
      let arr = this.$store.getters.allNewsTypes;
      arr.unshift({text: '全部', key: 'all' });
      return arr;
    },
  },
  components: {SearchBox, InputRow, PopCard, Pop, ImageTable, ImageViewer, RoundedTitle},
  async asyncData(ctx){
    // 加载轮播图数据
    let [err,res] = await handle(axios.get(apiMap.carouselList.path));
    if(err){
      return {};
    }
    let result = res.data;
    if(result.code === rCode.OK){
      return {carouselList: result.data}
    }else{
      this.$message.error(result.msg);
      return {}
    }
    return {}
  },
  data(){
    return {
      limit: 10,
      loading: false,
      carouselList: [],
      popShow: false,
      popLoading: false,
      carouselPopShow: false,
      carouselPopLoading: false,
      isEditCarousel: false,
      carouselData: {},
      form: {
        // 排序
        sort: {
          val:0,
          init: 0,
          msg: '',
          state: 0,
        },
        // 状态 0:禁用,1:启用
        status: {
          val: 0,
          init: 0,
          msg: '',
          state: 0,
        },
        // 轮播类型 '0:product','1:news','2:page','3:href'
        type: {
          val: 0,
          init: 0,
          msg: '',
          state: 0,
          options: [
            {label: '直接链接', value: 0,checkField: 'href'},
            {label: '内部产品', value: 1,checkField: 'productId'},
            {label: '指向新闻', value: 2,checkField: 'newsId'},
          ],
        },
        // 具体值
        value: {
          val: '',
          init: '',
          msg: '',
          state: 0,
          // 依赖字段
          depend: 'type',
          showText: '',// 展示用字段
          oldShowText: '',
        },
        // file
        fileData: {
          val: '',
          init: '',
          msg: '',
          state: 0,
          showText: '',// 展示用字段
          oldShowText: '',
        },
      },
      productSelectVisible: false,
      productSearch: {
        type: {
          val: '',
          oldVal: '',
          init: '',
          msg: '',
          options: [],
        }
      },
      newsSelectVisible: false,
      newsVisible: false,
      newsSearch: {
        type: {
          val: '',
          oldVal: '',
          init: '',
          msg: '',
          options: [],
        }
      },
      imageSelectVisible: false,

    }
  },
  mounted() {
    if(this.carouselList.length === 0){
      this.getCarouselList();
    }
  },
  methods: {
    async getCarouselList(){
      this.loading = true;
      let [err,res] = await handle(this.$axios.get(apiMap.carouselList.path));
      this.loading = false;
      if(err){
        if(this.NotificationKey){
          this.$notification.close(this.NotificationKey);
        }
        this.NotificationKey = `open${Date.now()}`;
        return this.$notification.error({
          message: '轮播数据加载失败',
          description:`异常: ${err.message}`,
          duration: 0,
          btn: h => {
            return h(
              'a-button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                on: {
                  click: () => {
                    this.$notification.close(this.NotificationKey);
                    this.getCarouselList();
                  },
                },
              },
              '重试',
            );
          },
          key:this.NotificationKey,
          onClose: close,
        });
      }
      let result = res.data;
      if(result.code === rCode.OK){
        this.carouselList = result.data;
        return {carouselList: result.data}
      }else{
        this.$message.error(result.msg);
        return {}
      }
    },
    // 搜索产品,只需要产品名等信息
    async getProductSearch(searchParam){
      console.log(searchParam)
      if(this.productSearch.type.val !== this.productSearch.type.oldVal){
        searchParam.p = 1;
      }
      searchParam.type = this.productSearch.type.val;
      searchParam.l = this.limit;
      searchParam.p = searchParam.page;
      let [err,res] = await handle(
        this.$axios.get(
          apiMap.searchProductMini.path,
          {params:searchParam})
      );
      if(err){
        console.log(err);
        return [{message:'请求数据失败'},null];
      }

      let result = res.data;
      if(result.code === rCode.OK){
        this.productSearch.type.oldVal = this.productSearch.type.val;
        // data 转换
        result.data = result.data.map(item=>{
          item.showText=item.name;
          return item;
        });
        return [null,result];
      }else{
        // 可捕获的服务器错误
        return [{message:result.msg},null];
      }
    },
    // 加载轮播默认数据
    async getNewsSearch(searchParam){
      console.log(searchParam)
      if(this.newsSearch.type.val !== this.newsSearch.type.oldVal){
        searchParam.p = 1;
      }
      searchParam.type = this.newsSearch.type.val;
      searchParam.l = this.limit;
      searchParam.p = searchParam.page;
      let [err,res] = await handle(
        this.$axios.get(
          apiMap.searchNewsMini.path,
          {params:searchParam})
      );
      if(err){
        console.log(err);
        return [{message:'请求数据失败'},null];
      }

      let result = res.data;
      if(result.code === rCode.OK){
        this.newsSearch.type.oldVal = this.newsSearch.type.val;
        // data 转换
        result.data = result.data.map(item=>{
          item.showText=item.name;
          return item;
        });
        return [null,result];
      }else{
        // 可捕获的服务器错误
        return [{message:result.msg},null];
      }
    },
    checkFormItem(field,enumOptions,reCheckField){
      let formItem = this.form[field];
      if (formItem){
        if (enumOptions){
          // 遍历枚举
          for (let i = 0; i < enumOptions.length; i++) {
            let enumOption = enumOptions[i];
            if (enumOption.value === formItem.val){
              return true;
            }
          }
          formItem.msg = '选项不在范围内';
          return false;
        }
        if(reCheckField){
          // 检查用字段
          formItem.msg = fieldIsAllow({
            [reCheckField]:formItem.val,
          })
        }else{
          formItem.msg = fieldIsAllow({
            [field]:formItem.val,
          })
        }
      }else{
        let r = true;
        for (const fieldKey in this.form) {
          formItem = this.form[fieldKey];
          let depend = this.form[formItem.depend];
          let checkField = fieldKey;

          if(formItem.reCheckField){
            checkField = formItem.reCheckField;
          }
          // 枚举值判断
          if(formItem.options){
            // 有枚举字段,只判断是否在枚举中
            if(formItem.options.findIndex(item=>item.value == formItem.val) === -1){
              formItem.msg = '选项不在范围内';
              r = false;
            }
            // 枚举值判断完毕,继续下一个字段
            continue;
          }

          // 判断是否有依赖字段
          if(depend){
            if(depend.options){
              // 依赖的对象有枚举类型,检查该枚举类型是否有有检测值
              let optionItem = depend.options.find(item=>item.value == depend.val);
              if(!optionItem){
                depend.msg = '选项不在范围内';
                formItem.msg = '该值依赖项输入异常';
                r = false;
                continue;
              }
              if(optionItem.checkField){
                console.log(`采用依赖项的检测字段${optionItem.checkField}`)
                checkField = optionItem.checkField;
              }

            }
          }

          console.log(`检测字段:${checkField},值:${formItem.val}`);
          formItem.msg = fieldIsAllow({
            [checkField]:formItem.val,
          })
          if (formItem.msg){
            r = false;
          }
        }
        return r
      }
    },
    initCarouseForm(){
      this.carouselData = {};
      let keys = Object.keys(this.form);
      for(let i = 0; i < keys.length; i++){
        let key = keys[i];
        this.form[key].val = this.form[key].init;
        this.form[key].msg = '';
        this.form[key].state = 0;
        this.form.value.showText = '';
      }
    },
    openAddCarouselModal(){
      // 初始化表单
      this.initCarouseForm();
      this.carouselPopShow = true;
      this.isEditCarousel = false;
      this.$nextTick(()=>{
        // 打开弹窗. 选择图片,填写链接地址,排序
        this.productSearch.type.options = this.productTypes;
        this.newsSearch.type.options = this.newsTypes;
        // 默认值设置
        this.productSearch.type.val = this.productTypes[0].key;
        this.productSearch.type.oldVal = this.productTypes[0].key;
        this.productSearch.type.init = this.productTypes[0].key;

        this.newsSearch.type.val = this.newsTypes[0].key;
        this.newsSearch.type.oldVal = this.newsTypes[0].key;
        this.newsSearch.type.init = this.newsTypes[0].key;


      });
    },
    onPopOkClickHandle(){
      if(this.isEditCarousel){
        console.log('保存修改后的轮播数据');
      }else{
        console.log('新增轮播图');
        this.addCarouselExecute();
      }
    },
    addCarouselExecute(){
      // 生成新数据表单
      let carouselData = {};
      let isPass = this.checkFormItem();
      if(!isPass){
        return console.log('数据验证不通过');
      }

    },



    showPop(){
      this.popShow = true;
      this.popLoading = false;
    },
    cancelPop(){
      this.imageSelectVisible = false;
    },
    okHandle(fileItem){
      console.log('文件列表');
      console.log(fileItem);
      this.cancelPop();
      this.$nextTick(()=>{
        this.form.fileData.val = fileItem.filePath;
        this.form.fileData.state = 1;
        this.form.fileData.msg = '';
        this.form.fileData.showText = fileItem.filePath;
      })
    },
    onProductSearchHandle(e){
      console.log(`onProductSearchHandle ${e}`);
      console.log(e);
      console.log(this.productSearch.type.val);
    },
    onSelectedItemHandle(item){
      console.log(`selected item ${item}`);
      console.log(item);
      this.form.value.val = item.id;
      this.form.value.showText = item.showText;
      this.form.value.msg = '';
    },
    onTypeChangeHandle(e){
      console.log(`type change ${e}`);
      // 清除其他值
      this.form.value.val = '';
      this.form.value.msg = '';
      this.form.value.showText = '';
    },

    onNewsSearchHandle(e){
      console.log(`onProductSearchHandle ${e}`);
      console.log(e);
      console.log(this.productSearch.type.val);
    },

  },

})
</script>

<template>
<div class="w-full p-2">
  <rounded-title>轮播图管理</rounded-title>
  <div class="mt-2 rounded bg-white p-2">
<!--    轮播图list , 左侧轮播图片, 右侧 轮播信息 -->
  <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>
    <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" />
      </div>

      <div
        v-for="(item,index) in carouselList"
        :key="'carouse-'+index"
        class="mt-2 rounded border flex h-72 overflow-hidden"
      >
        <div class="media w-1/2 h-full">
          <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>

      </div>
    </div>

  </div>
  </div>


  <pop :show="carouselPopShow" :loading="carouselPopLoading">
    <pop-card>
      <template slot="header" class="w-full">
        {{isEditCarousel ? '编辑轮播图' : '新增轮播图'}}
      </template>
      <template slot="close-group">
        <a-button icon="close"  @click="carouselPopShow = false"></a-button>
      </template>
      <div class="w-full">
         <input-row :msg="form.sort.msg"
                    label="排序">
           <a-input-number v-model="form.sort.val"
                           @focus="form.sort.msg=''"
                           :min="0"
                           @blur="checkFormItem('sort')"
           />
         </input-row>

<!--          轮播类型选择 -->
          <input-row :msg="form.type.msg"
                      label="轮播类型">
            <a-radio-group v-model="form.type.val" @change="onTypeChangeHandle">
              <a-radio-button v-for="opt in form.type.options"
                              :key="'cType'+opt.value"
                              :value="opt.value">
                {{ opt.label }}
              </a-radio-button>
            </a-radio-group>
          </input-row>

<!--        轮播具体值 -->
<!--        链接-->
        <input-row
          v-show="form.type.val === dbField_esm.db_base.carouselType.href"
          :msg="form.value.msg"
                    label="输入链接">
          <a-input v-model="form.value.val"
                   placeholder="输入要指向的链接地址"
                   @focus="form.value.msg=''"
                   @blur="checkFormItem('value', null,'href')"
          />
        </input-row>
<!--        产品选择-->
        <input-row
          v-show="form.type.val === dbField_esm.db_base.carouselType.production"
          :msg="form.value.msg"
          label="选择产品">
          {{ form.value.showText }}
          <a-popover  v-model="productSelectVisible" title="选择产品" trigger="click">
            <div slot="content" class="searchBox" >
              <search-box
                class="h-72"
                :loadDataApi="getProductSearch"
                :limit="limit"
                search-placeholder="请输入产品名称关键字"
                loadTip="正在搜索产品中..."
                @onSelectedItem="onSelectedItemHandle"
              >
                <div class="w-full" slot="otherSearchItem">
                  <a-radio-group v-model="productSearch.type.val"
                                 @change="onProductSearchHandle">
                    <a-radio-button v-for="opt in productSearch.type.options"
                                    :key="'cType'+opt.key"
                                    :value="opt.key">
                      {{ opt.text }}
                    </a-radio-button>
                  </a-radio-group>
                </div>
              </search-box>
            </div>
            <a-button type="primary" >
              选择产品
            </a-button>
          </a-popover>
        </input-row>
<!--        新闻选择-->
        <input-row
          v-show="form.type.val === dbField_esm.db_base.carouselType.news"
          :msg="form.value.msg"
          label="文章选择">
          {{ form.value.showText }}
          <a-popover  v-model="newsSelectVisible" title="选择你需要的文章" trigger="click">
            <div slot="content" class="searchBox" >
              <search-box
                class="h-72"
                :loadDataApi="getNewsSearch"
                :limit="limit"
                search-placeholder="请输入产品名称关键字"
                loadTip="正在搜索产品中..."
                ref="productSearch"
                @onSelectedItem="onSelectedItemHandle"
              >
                <div class="w-full" slot="otherSearchItem">
                  <a-radio-group v-model="newsSearch.type.val"
                                 @change="onNewsSearchHandle">
                    <a-radio-button v-for="opt in newsSearch.type.options"
                                    :key="'cType'+opt.key"
                                    :value="opt.key">
                      {{ opt.text }}
                    </a-radio-button>
                  </a-radio-group>
                </div>
              </search-box>
            </div>
            <a-button type="primary">
              选择产品
            </a-button>
          </a-popover>
        </input-row>

<!--        选择图片 -->
        <input-row label="轮播图片"
                   :msg="form.fileData.msg">
          <a-popover  v-model="imageSelectVisible"
                      class="w-full"
                     trigger="click">
              <image-table slot="content"
                           class="w-full h-full"
                           @cancel="imageSelectVisible = false"
                           @ok="okHandle"></image-table>

            <div class="w-full h-60 rounded relative">
              <image-viewer class="" :src="form.fileData.showText"></image-viewer>
              <div class="absolute w-full h-full left-0 top-0
              justify-center text-white bg-gray-400
              items-center text-2xl flex opacity-0 hover:opacity-70">
                点击选择图片
              </div>
            </div>

          </a-popover>
        </input-row>
      </div>
      <template class="w-full" slot="footer">
        <a-button @click="onPopOkClickHandle">{{isEditCarousel? '保存': '新增'}}</a-button>
      </template>
    </pop-card>
  </pop>
</div>
</template>

<style scoped>
.searchBox{
  width: 420px;
  height: 520px;
}
</style>