hz_crm_web/src/views/ficc_manage/chapterVariety.vue

<template>
  <div class="classify-page">
    <div class="content-box">
      <el-tree
        :data="list"
        node-key="ReportChapterTypeId"
        :props="{
          label: 'ReportChapterTypeName',
          children: 'Child',
        }"
        check-strictly
        empty-text="暂无数据"
        draggable
        :allow-drop="canDropHandle"
        @node-drop="dropOverHandle"
      >
        <div class="classify-item-wrap" slot-scope="{ data }">
          <div>
            <span :class="['tag', data.Enabled == 1 ? 'open' : 'close']">{{
              data.Enabled == 1 ? "启用" : "禁用"
            }}</span>
            <span>{{ data.ReportChapterTypeName }}</span>
          </div>

          <div class="opt-box">
            <span
              style="cursor: pointer; color: #409eff"
              @click.stop="handleShowEdit(data)"
              >小程序配置</span
            >
          </div>
        </div>
      </el-tree>
    </div>

    <!-- 分类弹窗 -->
    <m-dialog title="小程序配置" :show.sync="aeForm.show" width="650px">
      <div style="padding-left: 50px">
        <el-form
          :model="aeForm"
          :rules="aerules"
          ref="aeForm"
          label-position="left"
          hide-required-asterisk
          label-width="100px"
        >
          <el-form-item
            label="未选中icon"
            prop="UnselectedIcon"
          >
            <input
              type="file"
              size="small"
              name="file"
              @change="fileSelected(1)"
              id="file1"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="aeForm.UnselectedIcon"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <el-button
                slot="append"
                type="primary"
                size="mini"
                @click.native="clickinput(1)"
                >选择图片</el-button
              >
            </el-input>
          </el-form-item>
          <el-form-item
            label="选中icon"
            prop="selectedIcon"
          >
            <input
              type="file"
              size="small"
              name="file"
              @change="fileSelected(2)"
              id="file2"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="aeForm.selectedIcon"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <el-button
                slot="append"
                type="primary"
                size="mini"
                @click.native="clickinput(2)"
                >选择图片</el-button
              >
            </el-input>
          </el-form-item>
          <el-form-item
            label="带字icon"
            prop="wordIcon"
          >
            <input
              type="file"
              size="small"
              name="file3"
              @change="fileSelected(3)"
              id="file3"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="aeForm.wordIcon"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <el-button
                slot="append"
                type="primary"
                size="mini"
                @click.native="clickinput(3)"
                >选择图片</el-button
              >
            </el-input>
          </el-form-item>
          <el-form-item
            label="章节配图"
            prop="bgImg"
          >
            <input
              type="file"
              size="small"
              name="file4"
              @change="fileSelected(4)"
              id="file4"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="aeForm.bgImg"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <el-button
                slot="append"
                type="primary"
                size="mini"
                @click.native="clickinput(4)"
                >选择图片</el-button
              >
            </el-input>
          </el-form-item>
          <el-form-item
            label="小程序端隐藏"
            prop="IsShow"
          >
            <el-switch
              v-model="aeForm.IsShow"
              inactive-color="#ededed"
            ></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="margin-top: 20px">
        <el-button @click="aeForm.show=false" style="width: 132px; height: 40px"
          >取消</el-button
        >
        <el-button
          @click="setClassifyHandle"
          type="primary"
          style="width: 132px; height: 40px"
          >保存</el-button
        >
      </div>
    </m-dialog>
  </div>
</template>

<script>
import mDialog from '@/components/mDialog.vue';
import { bannerupload, getchapterTypeList,editChapterType } from 'api/api.js';
export default {
    components: { mDialog },
  beforeRouteEnter(to, from, next) {
    if (to.query.reportType == 'day') {
      to.matched[1].name = '晨报章节设置'
    } else {
      to.matched[1].name = '周报章节设置'
    }
    next()
  },
  data() {
    return {
      list: [],
      aeForm: {
        show: false,
        id:0,
        UnselectedIcon:'',
        selectedIcon:'',
        wordIcon:'',
        bgImg:'',
        IsShow:false
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      getchapterTypeList({ ReportType: this.$route.query.reportType == 'week' ? 'week' : 'day' }).then(res => {
        if (res.Ret === 200) {
          this.list = res.Data.List || []
        }
      })
    },
    handleShowEdit(data) {
      this.aeForm = {
        show: true,
        id:data.ReportChapterTypeId,
        UnselectedIcon:data.UnselectedImage,
        selectedIcon:data.SelectedImage,
        wordIcon:data.WordsImage,
        bgImg:data.EditImgUrl,
        IsShow:data.IsShow==0?true: false
      }
    },

    setClassifyHandle(){
        this.$refs.aeForm.validate((valid)=>{
            if(valid){
                let params={
                    ReportChapterTypeId:this.aeForm.id,
                    SelectedImage:this.aeForm.selectedIcon,
                    UnselectedImage:this.aeForm.UnselectedIcon,
                    WordsImage:this.aeForm.wordIcon,
                    EditImgUrl:this.aeForm.bgImg,
                    IsShow:this.aeForm.IsShow?0:1
                }
                editChapterType(params).then(res=>{
                    if(res.Ret===200){
                        this.$message.success( res.Msg );
						this.getList();
						this.aeForm.show=false;
                    }
                })
            }
        })
    },

    clickinput(type) {  //上传模拟点击
      $(`#file${type}`).click();
    },
    fileSelected(type) {  //选择文件上传
      const that = this;
      if (document.getElementById('file' + type).files[0]) {
        let hostfile = document.getElementById('file' + type).files[0];
        let size = Math.floor(hostfile.size / 1024 / 1024);
        if (size > 200) {
          that.$message.error('上传文件大小不能大于200M！');
          hostfile = {};
          return false
        }
        if (hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg')) {
          let form = new FormData();
          form.append('file', hostfile);  //hostfile.name
          that.uploadloading = true;
          bannerupload(form).then((res) => {
            if (res.Ret === 200) {
              if (type == 1) {
                that.aeForm.UnselectedIcon = res.Data.ResourceUrl;
              } else if (type == 2) {
                that.aeForm.selectedIcon = res.Data.ResourceUrl;
              } else if (type == 3) {
                that.aeForm.wordIcon = res.Data.ResourceUrl
              } else if (type == 4) {
                that.aeForm.bgImg = res.Data.ResourceUrl
              }
            }
            $("#file" + type).val('');
            hostfile = {};
          });
        } else {
          that.$message.error('上传文件格式不正确！');
        }
      }
    },
  },
}
</script>

<style lang="scss">
.el-cascader .el-input {
  width: 100%;
}
.classify-page {
  .content-box {
    .el-tree-node__content {
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #c8cdd9;
    }
  }
}
</style>
<style lang="scss" scoped>
.top-wrap {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 4px;
  padding: 20px;
}
.content-box {
  padding: 20px;
  margin-top: 20px;
  height: calc(100vh - 260px);
  overflow-y: auto;
  background-color: #ffffff;
  .classify-item-wrap {
    flex: 1;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tag {
      display: inline-block;
      min-width: 76px;
      line-height: 30px;
      text-align: center;
      &.open {
        background-color: #ecf2fe;
        color: #0052d9;
      }
      &.close {
        background-color: #0052d9;
        color: #fff;
      }
    }
    .opt-box {
      .icon-drag,
      .icon-set {
        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
    }
  }
}
</style>