ahdevicemgt-ui/src/views/purchase/receive/components/receive-detail.vue

<template>
    <!-- 往来单位 新增、编辑 表单组件 -->
    <div>
      <TableModel
        :formLabel="formLabel"
        :columnsList="columnsList"
        ref="tableRef"
        style="display: flex; flex-direction: column"
        :send-params="transObj"
        :request-api="queryPurchaseReceiveInnerListApi"
        @transIdList="getIdList"
      >
        <template slot="btn" slot-scope="{ queryParams }">
          <el-button type="success" @click="multiQualify"
          >合格</el-button>
          <el-button type="danger"
          >不合格</el-button>
        </template>
        <template slot="purchasePrice" slot-scope="{ data }">
          {{ data.purchasePrice / 100 }}
        </template>
        <template slot="notaxPrice" slot-scope="{ data }">
          {{ data.notaxPrice / 100 }}
        </template>
        <template slot="purchaseNum" slot-scope="{ data }">
          {{ data.purchaseNum / 1000 }}
        </template>
        <template slot="status" slot-scope="{ data }">
          {{ data.statusName }}
        </template>
        <template slot="files" slot-scope="{ data }">
          <span
            style="color: #02A7F0; cursor: pointer;"
          >报告管理</span>
        </template>
        <template slot="handle" slot-scope="{ data }">
          <!--                <el-button
                            type="warning"
                            size="mini"
                          >解绑</el-button
                          >-->
          <el-button
            type="success"
            size="mini"
            @click="toggleQualified(data.purchaseId)"
          >合格</el-button>
          <el-button
            type="danger"
            size="mini"
          >不合格</el-button
          >
          <!--                <el-button
                              type="danger"
                              size="mini"
                              @click="handleDeleteData(data.id, delStorageConfigListApi)"
                              >删除</el-button
                          >-->
        </template>
      </TableModel>
    </div>
</template>

<script>
import { columnsList } from '../config-receive-detail'
import {
  queryPurchaseReceiveInnerListApi,
  qualifyReceiveInnerApi
} from '@/api/purchase/receive'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'FormStorage',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
        sendParams: {
          type: Object,
          default: () => null,
        },
        sendRange: {
          type: Array,
          default: () => null
        },
        sendCascader: {
          type: Array,
          default: () => null
        }
    },
    components: { Treeselect },
    created() {
      console.log(this.sendParams)
      this.transObj = { ['id']: this.sendParams['id'] }
    },
    mounted() {

    },
    data() {
        return {
          formLabel: [
            { f_label: '类型规格', f_model: 'typeId', f_type: 'selCas', f_selList: this.sendCascader },
            { f_label: '机具厂家', f_model: 'supplierId', f_type: 'sel', f_selList: this.sendRange },
            { f_label: '出厂日期', f_model: 'productDate', f_type: 'date' },
          ],
          columnsList,
          transObj: {},
          multiQualifyList: []
        }
    },
    methods: {
      queryPurchaseReceiveInnerListApi,
      getIdList(list) {
        console.log(list)
        this.multiQualifyList = list
      },
      // 单个通过
      toggleQualified(purchaseId) {
        console.log(purchaseId)
        qualifyReceiveInnerApi({
          purchaseId
        }).then(res => {
          console.log(res)
          this.$modal.msgSuccess('提交成功')
          this.$refs.tableRef.getTableList()
        }).catch(err => {})
      },
      // 批量通过
      multiQualify() {
        if(this.multiQualifyList.length === 0) {
          this.$modal.msgError('请选择需要批量通过的数据')
        } else {
          let subList = []
          this.multiQualifyList.forEach(item => {
            subList.push(item.purchaseId)
          })
          // 请求
          subList = subList.join()
          qualifyReceiveInnerApi({
            purchaseId: subList
          }).then(res => {
            console.log(res)
            this.$modal.msgSuccess('提交成功')
            this.$refs.tableRef.getTableList()
          }).catch(err => {})
        }
      }
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>