hitch-sb-antd/src/views/repair/application-form/modules/SchemeLibrary.vue

<template>
  <a-modal
    title="方案库"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
  >
    <div v-show="show">
      <div>
        <a-form layout="inline">
          <a-row >
            <a-col :md="8" :sm="24">
              <a-form-item label="关键字">
                <a-input style="width: 100%" v-model="keyword" placeholder="请输入关键字！"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="故障类别">
                <a-select style="width: 200px" v-model="errorTypeId">
                  <a-select-option v-for="item in errorType" :key="item.id" :value="item.id">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getInfo">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :defaultExpandAllRows="true"
      >
        <template v-slot:index="text,record,index">
          {{ index+1 }}
        </template>
        <template v-slot:errorTypeId="text,record">
          {{ errorType.find(item=>item.id===text).title }}
        </template>
        <template v-slot:action="text,record">
          <a-button type="link" @click="addRepairSchemes(record)"> 获取 </a-button>
          <a-button type="link" @click="handleViewRepairResolve(record)"> 查看</a-button>
        </template>
      </a-table>
    </div>
    <resolve-detail ref="resolveDetail" @ok="handleOk"/>
  </a-modal>
</template>

<script>
import { getRepairSchemePage, addRepairSchemes, getRepairType, fetchRepairScheme } from '@/api/repair/repair'
import ResolveDetail from '@/views/repair/repair/modules/Detail'

export default {
  name: 'LongYanSelectSpareForm',
  data () {
    return {
      model: null,
      visible: false,
      show: true,
      confirmLoading: false,
      keyword: '',
      errorTypeId: '',
      dataSource: [],
      errorType: [],
      columns: [
        {
          title: '序号',
          key: 'index',
          align: 'center',
          width: 50,
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '故障描述',
          width: 150,
          dataIndex: 'errorContent'
        },
        {
          title: '方案描述',
          dataIndex: 'opinion',
          width: 150
        },
        {
          title: '故障类别',
          dataIndex: 'errorTypeId',
          width: 100,
          scopedSlots: { customRender: 'errorTypeId' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  components: {
    ResolveDetail
  },
  props: {
  },
  created () {
    // 下拉框map
  },
  methods: {
    base (record) {
      getRepairType().then(res => {
        this.errorType = res.data
      })
      this.visible = true
      this.model = record
      console.log(record)
      this.getInfo()
    },
    getInfo () {
      getRepairSchemePage({
        keyword: this.keyword,
        errorTypeId: this.errorTypeId,
        dataScope: {
          sortBy: 'desc',
          sortName: 'created_time'
        }
      }).then(res => {
        this.dataSource = res.data.rows
      })
    },
    resetSearchForm () {
      this.keyword = ''
      this.errorTypeId = ''
      this.getInfo()
    },
    handleViewRepairResolve (record) {
      this.show = false
      fetchRepairScheme({ id: record.id }).then(res => {
        const modal = this.$refs.resolveDetail
        modal.base(res.data)
      })
    },
    addRepairSchemes (val) {
      addRepairSchemes({
        id: val.id,
        repairId: this.model.id
      }).then(res => {
        this.$message.success('添加成功！')
        this.handleCancel()
      })
    },
    handleOk () {
      this.show = true
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.keyword = ''
      this.errorTypeId = ''
      this.$emit('ok')
    }
  }
}
</script>