sepax-products-web/src/views/resource/components/addFiles.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" :type="'form'" :title="$route.meta.title" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:category_ids v-if="table_name==='posters' || table_name==='flyers'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Product Phase：
          </div>
          <div class="xy-table-item-content">
            <el-select multiple filterable style="width:100%" v-model="form.category_ids" placeholder="Please Select">
              <el-option v-for="(item,index) in categoryList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>Title：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="Please Input" style="width:100%" v-model="form.title"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:files>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>File：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
              :auto-upload="true" :data="uploadOther" :on-success="handlesuccess" :on-remove="handleRemove">
              <el-button size="small" type="primary">upload</el-button>
            </el-upload>
          </div>
        </div>
      </template>

      <template v-slot:content v-if="table_name==='technical_newsletters'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Content：
          </div>
          <div class="xy-table-item-content">
            <!-- <wangEditor :isShow="isShow" v-show="showWang" :value="form.content" @change="changeEditor"></wangEditor> -->
            <my-tinymce v-if="showWang" @input="changeEditor" :value="form.content"></my-tinymce>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show
  } from "@/api/system/baseForm.js"
  import {
    getToken
  } from '@/utils/auth'
  import {
    index as getCategory
  } from "@/api/product/category.js"
  export default {
    data() {
      return {
        table_name: 'product_selections',
        isShow: false,
        id: '',
        type: 'add',
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        filesList: [],
        categoryList: [],
        showWang:false,
        form: {
          category_ids: '',
          title: "",
          files: [],
          content:''
        },
        rules: {
          title: [{
            required: true,
            message: 'Please Input'
          }]
        }
      }
    },
    created() {
      this.uploadOther.token = getToken();
      this.getCategoryList()
    },
    methods: {
      handleRemove(file, fileList) {
        this.filesList = fileList
      },
      handlesuccess(response, file, fileList) {
        if (response && response.hasOwnProperty('errcode')) {
          this.$Message.warning(response.errmsg || '')
          this.filesList = []
          return
        }
        this.filesList = fileList
      },
      changeEditor(e) {
        this.form.content = e
      },
      async getCategoryList() {
        const res = await getCategory({
          page_size: 999,
          page: 1,
          sort_type: 'ASC',
          sort_name: 'sort',
          type:2
        })
          this.categoryList = res.data

      },
      submit() {

        if (this.id) {
          this.form.id = this.id
        } else {
          this.form.id = ''
        }
        let _files = []
        if (this.filesList.length > 0) {
          for (var h of this.filesList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.files = _files
        } else {
          this.form.files = []
        }
        console.log("this.form", this.form)
        // return
        save({
          table_name: this.table_name,
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: 'Success'
          })
          this.isShow = false
          this.$emit('refresh')
        })

      },

      getDetail() {
        show({
          table_name: this.table_name,
          id: this.id,
          json_data_fields: ['files']
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          if(table_name==='technical_newsletters'){
            this.form.content = res.content ? res.content : ''
            this.showWang = true
          }

          if (res.files_details && res.files_details.length > 0) {
            this.filesList = []
            res.files_details.map(item => {
              this.filesList.push({
                name: item.original_name,
                id: item.id,
                url: item.url
              })
            })
          }
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if(this.table_name==='technical_newsletters'){
            this.showWang = true
          }
          if (this.type === 'editor') {
            this.getDetail()
          }

        } else {
          this.id = ''
          this.filesList = []
          this.form = {
            category_ids: '',
            title: "",
            files: [],
            content:''
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .category_ids,
  ::v-deep .title,
  ::v-deep .files,
    ::v-deep .content{
    flex-basis: 100%;
  }
</style>