sepax-products-web/src/views/application/components/addNotes.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="$route.meta.title" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:application_type_id>
        <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>Application Samples：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" filterable multiple collapse-tags v-model="form.application_type_id" placeholder="Please Select">
              <el-option v-for="item in appCategoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:category_id>
        <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 collapse-tags style="width:100%" v-model="form.category_id" placeholder="Please Select">
              <el-option v-for="(item,index) in productCategoryList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:number>
        <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>Application Id：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="Please Input" style="width:100%" v-model="form.number"></el-input>
          </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:is_top>
        <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>Top：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" v-model="form.is_top"
              placeholder="Please Select">
              <el-option v-for="item in [{id:0,value:'No'},{id:1,value:'Yes'}]" :key="item.id" :label="item.value"
                :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template> -->
      <template v-slot:keywords>
        <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>Keywords：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="Please Input" type="textarea" style="width:100%" v-model="form.keywords"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:separation>
        <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>Separation Mode：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" multiple filterable collapse-tags v-model="form.separation"
              placeholder="Please Select">
              <el-option v-for="item in separationModeList" :key="item.id" :label="item.value"
                :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:branch>
        <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>Brand：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" multiple filterable collapse-tags v-model="form.branch"
              placeholder="Please Select">
              <el-option v-for="item in brandList" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:topic>
        <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>Topic：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" multiple filterable collapse-tags v-model="form.topic"
              placeholder="Please Select">
              <el-option v-for="item in topicList" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:equipment>
        <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>Equipment：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" multiple filterable collapse-tags v-model="form.equipment"
              placeholder="Please Select">
              <el-option v-for="item in equipmentList" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
     <!-- <template v-slot:tag_ids>
        <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>Tags：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" multiple filterable collapse-tags v-model="form.tag_ids"
              placeholder="Please Select">
              <el-option v-for="item in tagsList" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template> -->

      <template v-slot:file_ids>
        <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>Files：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" :limit="1" class='upload-demo' multiple :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:application_details>
        <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>Column：
          </div>
          <div class="xy-table-item-content">
            <el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">Add Row</el-button>
            <xy-table style="width:850px" :list="form.application_details" :isPage="false" :height="350"
              :table-item="detail_item">
              <template v-slot:key>
                <el-table-column align='left' label="key" width="340">
                  <template slot-scope="scope">
                    <el-input placeholder="Please Input" style="width:100%" v-model="scope.row.key"></el-input>

                  </template>
                </el-table-column>
              </template>
              <template v-slot:value>
                <el-table-column align='left' label="value" width="340">
                  <template slot-scope="scope">
                    <el-input placeholder="Please Input" style="width:100%" v-model="scope.row.value"></el-input>
                  </template>
                </el-table-column>
              </template>
              <template v-slot:btns>
                <el-table-column align='left' fixed="right" label="operate" width="120" header-align="center">
                  <template slot-scope="scope">
                    <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
                      @confirm="delRow(scope.row,scope.$index)" title="Are you sure to delete it?">
                      <el-button type="danger" size="small" slot="reference">delete</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </template>
            </xy-table>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show
  } from "@/api/application/index.js"
  import {
    getToken
  } from '@/utils/auth'
  import
  applicationMixin
  from "@/mixin/application.js"
  import {
    index as getCategory
  } from "@/api/product/category.js"
  export default {
    mixins: [applicationMixin],
    data() {
      return {
        isShow: false,
        id: '',
        type: 'add',
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        filesList: [],
        appCategoryList: [],
        productCategoryList: [],
        detail_item: [{
          type: 'index',
          width: 50
        }, {
          prop: 'key',
          label: 'key',
          width: 340
        }, {
          prop: 'value',
          label: 'value',
          width: 340
        }],
        form: {
          application_type_id: [],
          category_id: [],
          number: '',
          title: "",
          // is_top:0,
          keywords:'',
          separation: [],
          branch: [],
          topic: [],
          equipment: [],
          tag_ids: [],
          file_ids: '',
          application_details: [],
        },
        rules: {
          title: [{
            required: true,
            message: 'Please Input'
          }],
          number: [{
            required: true,
            message: 'Please Input'
          }],
          application_type_id: [{
            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
      },
      addRow() {
        var len = this.form.application_details.length;
        this.form.application_details.push({
          key: '',
          value: ''
        })
      },
      delRow(obj, index) {
        this.form.application_details.splice(index, 1);
      },
      async getCategoryList() {
        const res = await getCategory({
          page_size: 999,
          page: 1,
          sort_type: 'ASC',
          sort_name: 'sort',
          type: 2
        })
        this.productCategoryList = 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.file_ids = _files
        } else {
          this.form.file_ids = []
        }
        console.log("this.form", this.form)
        // return
        save({
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: 'Success'
          })
          this.isShow = false
          this.$emit('refresh')
        })

      },

      getDetail() {
        show({
          id: this.id,
          show_relation: ['applicationDetails']
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.application_details = res.application_details ? res.application_details : [],
          this.form.tag_ids = res.tag_ids?res.tag_ids:[],
          this.form.category_id = res.category_id?res.category_id:[],
          this.form.application_type_id = res.application_type_id?res.application_type_id:[],
          // this.form.is_top = res.is_top?res.is_top:0
          this.form.separation = res.separation?res.separation:[]
          this.form.branch = res.branch?res.branch:[]
          this.form.topic = res.topic?res.topic:[]
          this.form.equipment = res.equipment?res.equipment:[]
          if (res.files && res.files.length > 0) {
            this.filesList = []
            res.files.map(item => {
              this.filesList.push({
                name: item.original_name,
                id: item.id,
                url: item.url
              })
            })
          }
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.filesList = []
          this.form = {
            application_type_id: [],
            category_id: [],
            number: '',
            title: "",
            // is_top:0,
            keywords:'',
            separation: [],
            branch: [],
            topic: [],
            equipment: [],
            tag_ids: [],
            file_ids: '',
            application_details: [],
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .file_ids,
  ::v-deep .application_details {
    flex-basis: 100%;
  }
</style>