<h3 align="center"></h3>
<div class="fill">
  <el-button type="primary" @click="fillin()" style="margin-left: 85%"><i class="fa fa-plus-square"></i></el-button>
</div>
<el-table :data="tableData" v-loading="loading" border>
  <el-table-column prop="product_name" label="" align="center"></el-table-column>
  <el-table-column prop="base_type_name" label="" align="center"></el-table-column>
  <el-table-column prop="breed_type" label="" align="center">
    <template slot-scope="scope">
      {{enumBreedType[scope.row.breed_type]}}
    </template>
  </el-table-column>
  <el-table-column prop="scale" label="" align="center"></el-table-column>
  <el-table-column prop="uscale" label="" align="center"></el-table-column>
  <el-table-column prop="input_date" label="" align="center"></el-table-column>
  <el-table-column label="" align="center">
    <el-table-column prop="current_year_output" :label=" yearlabel + """ align="center"></el-table-column>
    <el-table-column prop="last_year_output" :label=" yearlabel-1 + """ align="center"></el-table-column>
    <el-table-column prop="llast_year_output" :label=" yearlabel-2 + """ align="center"></el-table-column>
    <el-table-column prop="output_unit" label="" align="center"></el-table-column>
  </el-table-column>
  <el-table-column label="" align="center">
    <template slot-scope="scope">
      {{enumBrandType[scope.row.brand_type]}}
    </template>
  </el-table-column>
  <el-table-column label="" align="center">
    <template slot-scope="scope">
      {{enumBrandPowerType[scope.row.brand_power_type]}}
    </template>
  </el-table-column>
  <el-table-column label="" align="center">
    <template slot-scope="scope">
      <img :src="scope.row.product_images" width="60px" height="80px">
    </template>
  </el-table-column>
  <el-table-column label="" align="center" width="80px">
    <template slot-scope="scope">
        <el-button type="text" icon="el-icon-edit" style="font-size: 20px" @click="showPutview(scope.row)"></el-button>
        <el-button type="text" icon="el-icon-delete" @click="deleteInfo(scope.row.id)" style="font-size: 20px;color:red;"></el-button>
    </template>
  </el-table-column>
</el-table>
<div class="query-pagination">
  <el-pagination class="pull-right"
                 @current-change="getData"
                 :current-page.sync="params.index"
                 :page-size="params.size"
                 layout="total, prev, pager, next, jumper"
                 :total="tableTotal">
  </el-pagination>
</div>

<el-dialog width="96%" :visible.sync="fillVisible" :before-close="CloseDialog">
  <h3 align="center"></h3>
  <el-table :data="industData" v-loading="industloading" border>
    <el-table-column label="" align="center" width="120px">
      <template slot-scope="scope">
        <el-input placeholder="" v-model="scope.row.product_name"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="120px">
      <template slot-scope="scope">
      <SelectFarmCategory v-model="scope.row.base_type" @input="CategoryChang" @change="Typename(scope.$index)" :clearable="true"></SelectFarmCategory>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="90px">
      <template slot-scope="scope">
        <el-select placeholder="" v-model="scope.row.breed_type" :clearable="true" @change="Resetscale(scope.row.breed_type, scope.$index)">
        <el-option key="1" label="" value="1"></el-option>
        <el-option key="2" label="" value="2"></el-option>
        <el-option key="3" label="" value="3"></el-option>
        <el-option key="4" label="" value="4"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="120px">
      <template slot-scope="scope">
        <el-input placeholder="" v-model="scope.row.scale"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="120px">
      <template slot-scope="scope">
        <el-input placeholder="" v-model="scope.row.moderate_scale" :disabled="scope.row.breed_type === "1" || scope.row.breed_type === "2""></el-input>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="90px">
      <template slot-scope="scope">
          <el-autocomplete
            class="inline-input" v-model="scope.row.uscale" :fetch-suggestions="querySearch"
            placeholder=""></el-autocomplete>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="140px">
      <template slot-scope="scope">
        <el-date-picker
          :clearable="true"
          v-model="scope.row.input_date"
          type="date"
          style="width: 140px"
          value-format="yyyy-MM-dd"
          placeholder="">
        </el-date-picker>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="490px">
      <el-table-column :label=" yearlabel + """ width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number  :min="0" :controls="false" style="width: 110px" v-model="scope.row.current_year_output"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column :label=" yearlabel-1 + """ width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number  :min="0" :controls="false" style="width: 110px" v-model="scope.row.last_year_output"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column :label=" yearlabel-2 + """ width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number  :min="0" :controls="false"style="width: 110px" v-model="scope.row.llast_year_output"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="" align="center" width="90px">
        <template slot-scope="scope">
            <el-autocomplete
              class="inline-input" v-model="scope.row.output_unit" :fetch-suggestions="querySearch"
              placeholder=""></el-autocomplete>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column label="" align="center" width="130px">
      <template slot-scope="scope">
        <el-select multiple placeholder="" v-model="scope.row.brand_type" value-key="key" :clearable="true">
          <el-option v-for="(val, key) in enumBrandType" :key="key" :label="val" :value="val"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="" align="center" width="140px">
      <template slot-scope="scope">
        <el-select placeholder="" v-model="scope.row.brand_power_type" :clearable="true">
        <el-option key="1" label="/," value="1"></el-option>
        <el-option key="2" label="/" value="2"></el-option>
        <el-option key="3" label=",/" value="3"></el-option>
        <el-option key="4" label="," value="4"></el-option>
        <el-option key="5" label="," value="5"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="" align="center">
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="pupload(scope.$index)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="mt-3">
    <el-row :gutter="20">
      <el-col :span="2"><el-button @click="CloseDialog" style="width: 100%"></el-button></el-col>
      <el-col :span="2"><el-button @click="onsubmit"  style="width: 100%" :loading="postloading"><span v-if="!isput"></span><span v-else></span></el-button></el-col>
      <el-col :span="3" :offset="16"><el-button @click="industData.push({})" style="width: 100%" v-if="!isput"></el-button></el-col>
    </el-row>
  </div>
</el-dialog>

<el-dialog width="60%" :visible.sync="puploadVisible" :before-close="handleClose">
  <div class="fill">
    <h3 align="center"></h3>
    <el-form>
      <el-form-item label="" style="margin-left: 30px"><br>
        <upload-oss ref="attachment"
                    listType="picture-card"
                    accept="image/*"
                    :on-complete="handleComplete"
                    :file-list="attachmentFileList"><i class="el-icon-plus" slot="trigger"></i></upload-oss>
      </el-form-item>
      <el-form-item label="" style="margin-left: 30px"><br>
        <upload-oss single-image
                    ref="product"
                    accept="image/*"
                    :on-complete="handleComplete1"
                    :file-list="fileList"></upload-oss>
      </el-form-item>
    </el-form>
    <div>
      <el-button @click="handleClose" style="margin-left: 15%"></el-button>
      <el-button style="margin-left: 10%" @click="PostrowImages" :loading="imageloading"></el-button>
    </div>
  </div>
</el-dialog>

< / div >
< / template >

< script >
import {getIndustif, postIndustif, deleteIndustif, putIndustif} from"@ / api/credit"
import SelectFarmCategory from"@ / components/SelectFarmCategory"
import UploadOss from"@ / components/UploadOss"
import {enumBreedType, enumBrandPowerType, enumBrandType} from"@ / utils/enum"
export default {

components: {
  SelectFarmCategory,
  UploadOss
},

props: {},

data() {
  return {
    enumBrandPowerType,
    enumBrandType,
    enumBreedType,
    params: {
      index: 1,
      size: 10
    },
    yearlabel: "",
    tableData: [],
    form: {},
    tableTotal: 0,
    Typelabel: "",
    loading: false,
    // 
    industData: [{}, {}],
    imagesIndex: "",
    images: "",
    productimages: "",
    attachmentFileList: [],
    fileList: [],
    restaurants: [{value: ""}, {value: ""}, {value: ""}, {value: ""}, {value: ""}, {value: ""}],
    isput: false,
    imageloading: false,
    postloading: false,
    industloading: false,
    fillVisible: false,
    puploadVisible: false
  }
},

computed: {},
watch: {},

created() {
  // Object.keys(enumBrandType).forEach(key => {
  //   this.brand_type.push(enumBrandType[key])
  // })
  this.init()
  this.getData()
},

mounted() {
},

methods: {
  querySearch(queryString, cb) {
    var restaurants = this.restaurants
    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //  callback 
    cb(results)
  },
  createFilter(queryString) {
    return (restaurant) => {
      return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
    }
  },
  Resetscale(val, index) {
    this.industData[index].moderate_scale = ""
    if (val === "1") {
      this.industData[index].moderate_scale = "200"
    } else if (val === "2") {
      this.industData[index].moderate_scale = "1000"
    }
  },
  handleComplete(images) {
    this.images = "["" + images.map(img => img.url).join("","") + ""]"
    let index = this.imagesIndex
    this.industData[index].attachment = this.images
    this.$refs.product.submit()
  },
  handleComplete1(images) {
    this.productimages = images.length ? `${images[0].url}` : ""
    let index = this.imagesIndex
    this.industData[index].product_images = this.productimages
    this.handleClose()
  },
  showPutview(data) {
    this.isput = true
    this.fillVisible = true
    this.industData = []
    this.industData.push({...data})
  },
  init() {
    this.form = JSON.parse(localStorage.getItem("detail"))
    this.yearlabel = new Date().getFullYear()
  },
  getData() {
    this.loading = true
    getIndustif({
      index: this.params.index,
      size: this.params.size,
      service_id: this.form.service_id,
      customer_id: this.form.customer_id,
      customer_related_id: this.form.id
    }, {}).then(res => {
      if (res) {
        this.tableData = res.data.data
        this.tableTotal = res.data.totalCount
      }
    }).catch(err => {
      console.log(err)
    }).then(() => {
      this.loading = false
    })
  },
  PostrowImages () {
    this.imageloading = true
    this.$refs.attachment.submit()
  },
  Typename(index) {
    this.industData[index].base_type_name = this.Typelabel
  },
  CategoryChang(val, name) {
    this.Typelabel = name
  },
  onsubmit() {
    this.postloading = true
    let i = 1
    for (let t = 0; t < this.industData.length; tPP) {
      if (this.industData[t].base_type || this.industData[t].product_name) {
        if (this.industData[t].base_type && this.industData[t].product_name) {
          this.industData[t].customer_id = this.form.customer_id
          this.industData[t].customer_related_id = this.form.id
          this.industData[t].customer_name = this.form.farm_name
          this.industData[t].service_id = this.form.service_id
        } else if (this.industData[t].base_type) {
          this.$message.warning("")
          i = 0
          this.postloading = false
          return
        } else {
          this.$message.warning("")
          i = 0
          this.postloading = false
          return
        }
      } else {
        if (this.industData.length > 1) {
          this.industData.splice(t, 1)
          t--
        } else {
          i = 2
          this.postloading = false
          this.$message.warning("")
        }
      }
    }
    if (i === 2) {
      this.fillData = [{}, {}]
    }
    if (i === 1) {
      if (!this.isput) {
        postIndustif(this.industData).then(res => {
          if (res.data) {
            this.$message.success("")
            this.getData()
            this.CloseDialog()
          } else {
            this.$message.error("")
          }
        }).catch(err => {
          console.log(err)
          this.$message.error("")
        })
      } else {
        for (let p of this.industData) {
          putIndustif(p.id, p).then(res => {
            if (res.data) {
              this.$message.success("")
              this.getData()
              this.CloseDialog()
            } else {
              this.$message.error("")
            }
          }).catch(err => {
            console.log(err)
            this.$message.error("")
          })
        }
      }
    }
  },
  CloseDialog() {
    this.fillVisible = false
    this.isput = false
    this.postloading = false
    this.getData()
    this.industData = [{}, {}]
  },
  handleClose() {
    this.puploadVisible = false
    this.images = ""
    this.attachmentFileList = []
    this.imageloading = false
  },
  fillin() {
    this.fillVisible = true
  },
  pupload(val) {
    this.imagesIndex = val
    this.attachmentFileList = this.$utils.photoList(this.industData[val].attachment)
    this.fileList = [{url: this.industData[val].product_images, name: ""}]
    this.puploadVisible = true
  },
  deleteInfo(id) {
    this.loading = true
    deleteIndustif(id).then(res => {
      if (res.data) {
        this.$message.success("")
        this.getData()
      }
    }).catch(err => {
      console.log(err)
      this.$message.error("")
    })
  }
}

}
< / script >

< style scoped >
.fill {

border: 1px solid -sharpebeef5;

}
< / style >

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

what happens when you can write all this