<template>
    <div class="app-container">
        <!-- 查询表单 -->
        <el-form :model="listQuery" size="small" :inline="true" label-position="top">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="供应商名称">
                        <el-input clearable placeholder="供应商名称" v-model="listQuery.supplierName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商编号">
                        <el-input clearable placeholder="供应商编号" v-model="listQuery.supplierNum"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="申请部门">
                        <treeselect 
                            v-model="listQuery.responsibleDept" 
                            :options="categoryOptions"
                            :normalizer="normalizer" 
                            placeholder="申请部门" 
                            style="width: 100%" 
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否启用">
                        <el-select v-model="listQuery.isEnable" clearable placeholder="是否启用" style="width: 100%">
                            <el-option :key="item.type" v-for="item in goodsStatusList" 
                                :label="item.name" :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="搜索">
                        <el-button style="width: 100%;" type="primary" icon="el-icon-search"
                            @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="重置">
                        <el-button style="width: 100%;" icon="el-icon-refresh" type="primary"
                            @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 操作按钮 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" class="editButton" size="small" icon="el-icon-plus"
                    @click="handleAdd">添加</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownLoad">导出</el-button>
            </el-col>
        </el-row>

        <!-- 查询结果 -->
        <div class="border-card">
            <el-table height="450" size="small" :data="list" v-loading="listLoading" 
                element-loading-text="正在查询中。。。" border fit highlight-current-row>
                <el-table-column type="index" label="序号" header-align="center" align="center">
                </el-table-column>
                <el-table-column align="center" min-width="120px" label="供应商编号" prop="supplierNum">
                </el-table-column>
                <el-table-column align="center" min-width="200px" label="供应商名称" prop="supplierName">
                </el-table-column>
                <el-table-column align="center" min-width="80px" label="地域" prop="supplierPurchasAddress">
                </el-table-column>
                <el-table-column align="center" min-width="80px" label="联系人" prop="supplierContact">
                </el-table-column>
                <el-table-column align="center" min-width="80px" label="申请部门" prop="deptName">
                </el-table-column>
                <el-table-column align="center" min-width="180px" label="登记时间" prop="addTime">
                </el-table-column>
                <el-table-column align="center" min-width="80px" label="是否启用">
                    <template slot-scope="props">
                        <span v-if="props.row.isEnable == 0" style="color: #67C23A;font-weight: bold;">启用</span>
                        <span v-if="props.row.isEnable == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" class="editText" size="small" 
                            @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.isEnable == 1" type="text" icon="el-icon-circle-check" 
                            class="openText" size="small" @click="changeState(scope.row.id, scope.row.isEnable)">启用</el-button>
                        <el-button v-if="scope.row.isEnable == 0" type="text" icon="el-icon-circle-close" 
                            class="closeText" size="small" @click="changeState(scope.row.id, scope.row.isEnable)">停用</el-button>
                        <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" 
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"
            width="70%">
            <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left"
                label-width="100px" style='margin: 0 50px;'>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基础信息" name="first">
                        <el-form-item label="供应商名称" prop="supplierName">
                            <el-input v-model="dataForm.supplierName" placeholder="请输入供应商名称"></el-input>
                        </el-form-item>
                        <el-form-item v-if="dataForm.supplierNum" label="供应商编号" prop="supplierNum">
                            <el-input disabled v-model="dataForm.supplierNum"></el-input>
                        </el-form-item>
                        <el-form-item label="类别" prop="typeId">
                            <el-select style="width: 100%" v-model="dataForm.typeId" filterable placeholder="请选择类别">
                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" 
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地域" prop="supplierPurchasAddress">
                            <el-input v-model="dataForm.supplierPurchasAddress" placeholder="请输入地域"></el-input>
                        </el-form-item>
                        <el-form-item label="注册资本金" prop="registeredCapital">
                            <el-input v-model="dataForm.registeredCapital" placeholder="请输入注册资本金 (万元)"></el-input>
                        </el-form-item>
                        <el-form-item label="银行卡号" prop="bankCardNo">
                            <el-input v-model="dataForm.bankCardNo" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" 
                                placeholder="请输入银行卡号"></el-input>
                        </el-form-item>
                        <el-form-item label="银行名称" prop="bankCardName">
                            <el-input v-model="dataForm.bankCardName" placeholder="请输入银行名称"></el-input>
                        </el-form-item>
                        <el-form-item label="纳税性质" prop="nature">
                            <el-select style="width: 100%" v-model="dataForm.nature" filterable placeholder="请选择纳税性质">
                                <el-option value="一般纳税人">一般纳税人</el-option>
                                <el-option value="小规模纳税人">小规模纳税人</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="税率" prop="taxrate">
                            <el-select style="width: 100%" v-model="dataForm.taxrate" filterable placeholder="请选择税率">
                                <el-option value="0%">0%</el-option>
                                <el-option value="1%">1%</el-option>
                                <el-option value="3%">3%</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系人" prop="supplierContact">
                            <el-input v-model="dataForm.supplierContact" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="supplierPhone">
                            <el-input v-model="dataForm.supplierPhone" 
                                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" 
                                placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                        <el-form-item label="单位地址" prop="supplierAddress">
                            <el-input v-model="dataForm.supplierAddress" placeholder="请输入单位地址"></el-input>
                        </el-form-item>
                        <el-form-item label="申请部门" prop="responsibleDept">
                            <treeselect default-expand-all v-model="dataForm.responsibleDept" 
                                :options="categoryOptions" :normalizer="normalizer" 
                                placeholder="请选择申请部门" style="width: 100%" />
                        </el-form-item>
                        <el-form-item label="申请事由" prop="supplierRemark">
                            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入申请事由" v-model="dataForm.supplierRemark">
                            </el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="营业执照" name="second">
                        <el-form-item label="名称" prop="businessName">
                            <el-input v-model="dataForm.businessName" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="开始日期" prop="businessStartTime">
                            <el-date-picker style="width: 100%;" v-model="dataForm.businessStartTime" type="date" 
                                value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束日期" prop="businessEndTime">
                            <el-date-picker style="width: 100%;" v-model="dataForm.businessEndTime" type="date" 
                                value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item style="width: 800px" label="附件" prop="businessFile">
                            <el-upload :limit="1" :action="fileImgUrl" list-type="picture-card"
                                :file-list="dataForm.businessFiles" 
                                :on-success="(response, file, fileList) => {return handleImgSucess(response, file, fileList, 'businessFiles')}" 
                                :on-exceed="handleExceed"
                                :before-upload="beforeUploadImg" 
                                :on-remove="(file, fileList) => {return handleRemoveImg(file, fileList, 'businessFiles')}">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="财务报表/审计报告" name="third">
                        <el-form-item label="财务报表" prop="financeFileId">
                            <el-upload :limit="1" :action="fileImgUrl" :file-list="dataForm.financeFiles" 
                                :on-success="(response, file, fileList) => {return handleFileSuccess(response, file, fileList, 'financeFiles')}"
                                :before-upload="beforeUploadFile" 
                                :on-remove="(file, fileList) => {return handleRemoveFile(file, fileList, 'financeFiles')}">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="审计报告" prop="auditFileId">
                            <el-upload :limit="1" :action="fileImgUrl" :file-list="dataForm.auditFiles" 
                                :on-success="(response, file, fileList) => {return handleFileSuccess(response, file, fileList, 'auditFiles')}"
                                :before-upload="beforeUploadFile" 
                                :on-remove="(file, fileList) => {return handleRemoveFile(file, fileList, 'auditFiles')}">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="供应商资质信息" name="fourth">
                        <el-form-item label="名称" prop="qualifiedName">
                            <el-input v-model="dataForm.qualifiedName" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="开始日期" prop="qualifiedStartTime">
                            <el-date-picker style="width: 100%;" v-model="dataForm.qualifiedStartTime" type="date" 
                                value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束日期" prop="qualifiedEndTime">
                            <el-date-picker style="width: 100%;" v-model="dataForm.qualifiedEndTime" type="date" 
                                value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item style="width: 800px" label="附件" prop="qualifiedFile">
                            <el-upload :limit="1" :action="fileImgUrl" list-type="picture-card"
                                :file-list="dataForm.qualifiedFiles" 
                                :on-success="(response, file, fileList) => {return handleImgSucess(response, file, fileList, 'qualifiedFiles')}" 
                                :on-exceed="handleExceed"
                                :before-upload="beforeUploadImg" 
                                :on-remove="(file, fileList) => {return handleRemoveImg(file, fileList, 'qualifiedFiles')}">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { createSupplier, updateSupplier, listSupplier, deleteSupplier, typeListSupplier, setStateSupplier } from '@/api/supplier'
import { listDept } from '@/api/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import waves from '@/directive/waves'

export default {
  components: { Treeselect },
  directives: { waves },
  data() {
    return {
      categoryOptions: [],
      activeName: 'first',
      brandOptions: [],
      goodsStatusList: [
        { type: 0, name: '启用' },
        { type: 1, name: '停用' }
      ],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        supplierName: '',
        supplierNum: '',
        typeId: '',
        responsibleDept: undefined,
        isEnable: ''
      },
      dataForm: {
        supplierName: undefined,
        supplierNum: undefined,
        typeId: undefined,
        supplierPurchasAddress: undefined,
        registeredCapital: undefined,
        bankCardNo: undefined,
        bankCardName: undefined,
        nature: undefined,
        taxrate: undefined,
        supplierContact: undefined,
        supplierPhone: undefined,
        supplierAddress: undefined,
        responsibleDept: undefined,
        supplierRemark: undefined,
        businessName: undefined,
        businessStartTime: undefined,
        businessEndTime: undefined,
        businessFile: undefined,
        businessFiles: [],
        financeFileId: undefined,
        financeFiles: [],
        auditFileId: undefined,
        auditFiles: [],
        qualifiedName: undefined,
        qualifiedStartTime: undefined,
        qualifiedEndTime: undefined,
        qualifiedFile: undefined,
        qualifiedFiles: []
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑供应商',
        create: '添加供应商'
      },
      rules: {
        supplierName: [{ required: true, message: '请填写供应商名称', trigger: 'blur' }],
        typeId: [{ required: true, message: '请选择供应商类别', trigger: 'blur' }],
        supplierPurchasAddress: [{ required: true, message: '请填写地域', trigger: 'blur' }],
        registeredCapital: [
          { required: true, message: '请填写注册资本金', trigger: 'blur' },
          { pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/, message: '请输入合法的金额数字，最多两位小数', trigger: 'blur' }
        ],
        bankCardNo: [{ required: true, message: '请填写银行卡号', trigger: 'blur' }],
        bankCardName: [{ required: true, message: '请填写银行名称', trigger: 'blur' }],
        nature: [{ required: true, message: '请选择纳税性质', trigger: 'blur' }],
        taxrate: [{ required: true, message: '请选择税率', trigger: 'blur' }],
        supplierContact: [{ required: true, message: '请填写联系人', trigger: 'blur' }],
        supplierPhone: [{ required: true, message: '请填写联系电话', trigger: 'blur' }],
        supplierAddress: [{ required: true, message: '请填写单位地址', trigger: 'blur' }],
        responsibleDept: [{ required: true, message: '请选择申请部门', trigger: 'blur' }],
        supplierRemark: [{ required: true, message: '请填写申请事由', trigger: 'blur' }],
        businessName: [{ required: true, message: '请填写营业执照名称', trigger: 'blur' }],
        businessStartTime: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
        businessEndTime: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
        businessFile: [{ required: true, message: '请上传营业执照', trigger: 'blur' }]
      },
      fileImgUrl: this.upLoadUrl
    }
  },
  created() {
    this.getListDept()
    this.getTypeList()
    this.getList()
  },
  methods: {
    handleDownLoad() {
      window.location.href = process.env.BASE_API + '/supplier-info/export'
    },
    changeState(id, isEnable) {
      setStateSupplier({ id: id, isEnable: isEnable }).then(response => {
        this.$notify({ title: '成功', message: '状态修改成功', type: 'success', duration: 2000 })
        this.getList()
      })
    },
    getListDept() {
      listDept().then(response => {
        this.categoryOptions = this.handleTree(response.data.data, 'deptId')
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return { id: node.deptId, label: node.deptName, children: node.children }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleRemoveFile(file, fileList, type) {
      if (type == 'financeFiles') {
        const financeFiles = []
        for (const i in fileList) {
          const id = fileList[i].response.data.id
          financeFiles.push(id)
        }
        this.dataForm.financeFileId = financeFiles.join(',')
      } else {
        const auditFiles = []
        for (const i in fileList) {
          const id = fileList[i].response.data.id
          auditFiles.push(id)
        }
        this.dataForm.auditFileId = auditFiles.join(',')
      }
    },
    beforeUploadFile(file) {
      const size = file.size / 1024 / 1024
      if (size > 10) {
        this.$message.error('文件大小不能超过 10MB！')
        return false
      }
    },
    handleFileSuccess(res, file, fileList, type) {
      if (type == 'financeFiles') {
        const financeFiles = []
        for (const i in fileList) {
          const response = fileList[i].response
          if (response.errno && response.errno != '0') {
            this.$message.error('该文件上传失败，已被移除，请重新上传!')
            financeFiles.splice(i, 1)
          } else {
            const id = fileList[i].response.data.id
            financeFiles.push(id)
          }
        }
        this.dataForm.financeFileId = financeFiles.join(',')
      } else {
        const auditFiles = []
        for (const i in fileList) {
          const response = fileList[i].response
          if (response.errno && response.errno != '0') {
            this.$message.error('该文件上传失败，已被移除，请重新上传!')
            auditFiles.splice(i, 1)
          } else {
            const id = fileList[i].response.data.id
            auditFiles.push(id)
          }
        }
        this.dataForm.auditFileId = auditFiles.join(',')
      }
    },
    handleRemoveImg(file, fileList, type) {
      if (type == 'qualifiedFiles') {
        const qualifiedFiles = []
        for (const i in fileList) {
          const id = fileList[i].response.data.id
          qualifiedFiles.push(id)
        }
        this.dataForm.qualifiedFile = qualifiedFiles.join(',')
      } else {
        const businessFiles = []
        for (const i in fileList) {
          const id = fileList[i].response.data.id
          businessFiles.push(id)
        }
        this.dataForm.businessFile = businessFiles.join(',')
      }
    },
    beforeUploadImg(file) {
      const isJPGs = file.type === 'image/jpeg'
      console.log(isJPGs)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件！，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleImgSucess(res, file, fileList, type) {
      if (type == 'qualifiedFiles') {
        const qualifiedFiles = []
        for (const i in fileList) {
          const response = fileList[i].response
          if (response.errno && response.errno != '0') {
            this.$message.error('该图片上传失败，已被移除，请重新上传!')
            fileList.splice(i, 1)
          } else {
            const id = fileList[i].response.data.id
            qualifiedFiles.push(id)
          }
        }
        this.dataForm.qualifiedFile = qualifiedFiles.join(',')
      } else {
        const businessFiles = []
        for (const i in fileList) {
          const response = fileList[i].response
          if (response.errno && response.errno != '0') {
            this.$message.error('该图片上传失败，已被移除，请重新上传!')
            businessFiles.splice(i, 1)
          } else {
            const id = fileList[i].response.data.id
            businessFiles.push(id)
          }
        }
        this.dataForm.businessFile = businessFiles.join(',')
      }
    },
    resetForm() {
      this.dataForm = {
        supplierName: undefined,
        supplierNum: undefined,
        typeId: undefined,
        supplierPurchasAddress: undefined,
        registeredCapital: undefined,
        bankCardNo: undefined,
        bankCardName: undefined,
        nature: undefined,
        taxrate: undefined,
        supplierContact: undefined,
        supplierPhone: undefined,
        supplierAddress: undefined,
        responsibleDept: undefined,
        supplierRemark: undefined,
        businessName: undefined,
        businessStartTime: undefined,
        businessEndTime: undefined,
        businessFile: undefined,
        businessFiles: [],
        financeFileId: undefined,
        financeFiles: [],
        auditFileId: undefined,
        auditFiles: [],
        qualifiedName: undefined,
        qualifiedStartTime: undefined,
        qualifiedEndTime: undefined,
        qualifiedFile: undefined,
        qualifiedFiles: []
      }
    },
    handleAdd() {
      this.activeName = 'first'
      this.resetForm()
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createSupplier(this.dataForm).then((response) => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({ title: '成功', message: '创建成功', type: 'success', duration: 2000 })
            this.reload()
          }).catch(() => { })
        }
      })
    },
    handleUpdate(row) {
      this.activeName = 'first'
      this.dataForm = Object.assign({}, row)
      if (this.dataForm.businessFiles) {
        const files = this.dataForm.businessFiles
        this.dataForm.businessFiles = []
        for (const i in files) {
          this.dataForm.businessFiles.push({
            name: files[i].oldName,
            url: files[i].url,
            response: { error: '0', data: { url: files[i].url, id: files[i].id }}
          })
        }
      }
      if (this.dataForm.qualifiedFiles) {
        const files = this.dataForm.qualifiedFiles
        this.dataForm.qualifiedFiles = []
        for (const i in files) {
          this.dataForm.qualifiedFiles.push({
            name: files[i].oldName,
            url: files[i].url,
            response: { error: '0', data: { url: files[i].url, id: files[i].id }}
          })
        }
      }
      if (this.dataForm.financeFiles) {
        const files = this.dataForm.financeFiles
        this.dataForm.financeFiles = []
        for (const i in files) {
          this.dataForm.financeFiles.push({
            name: files[i].oldName,
            url: files[i].url,
            response: { error: '0', data: { url: files[i].url, id: files[i].id }}
          })
        }
      }
      if (this.dataForm.auditFiles) {
        const files = this.dataForm.auditFiles
        this.dataForm.auditFiles = []
        for (const i in files) {
          this.dataForm.auditFiles.push({
            name: files[i].oldName,
            url: files[i].url,
            response: { error: '0', data: { url: files[i].url, id: files[i].id }}
          })
        }
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateSupplier(this.dataForm).then(() => {
            this.dialogFormVisible = false
            this.$notify({ title: '成功', message: '更新成功', type: 'success', duration: 2000 })
            this.getList()
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(() => {
          deleteSupplier({ id: row.id }).then(response => {
            this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
            this.getList()
          })
        }).catch(() => { })
    },
    getTypeList() {
      typeListSupplier().then(response => {
        this.brandOptions = response.data.data.map((item) => {
          return { value: item.typeId, label: item.typeName }
        })
      }).catch(() => {
        this.brandOptions = []
      })
    },
    getList() {
      this.listLoading = true
      listSupplier(this.listQuery).then(response => {
        this.list = response.data.data.items
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => { })
    },
    handleQuery() {
      this.listQuery.page = 1
      this.getList()
    },
    resetQuery() {
      this.listQuery = {
        page: 1,
        limit: 10,
        supplierName: '',
        supplierNum: '',
        typeId: '',
        responsibleDept: '',
        isEnable: ''
      }
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>

<style>
.good-img {
    width: 50px;
    height: 50px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>