kd-aiot-frontend-wt/src/views/bpm/handleTask/components/bomApproverJSYY/detailDialog.vue

<template>
  <div>
    <headerTitle title="Bom审批"></headerTitle>
    <BOMSearch @search="reload" :statusOpt="statusOpt" />

    <ele-pro-table
      ref="table"
      :columns="columns"
      :need-page="false"
      height="calc(80vh - 350px)"
      :datasource="datasource"
      class="dict-table"
      tool-class="ele-toolbar-actions"
    >
      <template v-slot:toolbar>
        <div v-if="taskDefinitionKey == 'Activity_0uypakw'">
          <el-input
            size="mini"
            v-model="materielDesignationPL"
            placeholder="请输入物料代号"
            style="width: 220px"
          ></el-input>
          <el-button
            size="mini"
            type="primary"
            style="margin-left: 20px"
            @click="handMaterPL"
            >批量</el-button
          >
        </div>

        <div
          v-if="
            taskDefinitionKey == 'Activity_021lrxj' ||
            taskDefinitionKey == 'Activity_1q7btlc'
          "
        >
          <el-select
            v-model="supplierIdPL"
            size="mini"
            clearable
            style="width: 100%"
            filterable
            placeholder="请选择供应商"
          >
            <el-option
              v-for="item in gysList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
          <el-button
            size="mini"
            type="primary"
            style="margin-left: 20px"
            @click="handMaterPL2"
            >批量</el-button
          >
        </div>
      </template>

      <template v-slot:supplierName="{ row }">
        <el-select
          v-model="row.supplierId"
          size="mini"
          clearable
          style="width: 100%"
          filterable
          placeholder="请选择供应商"
          :disabled="
            taskDefinitionKey != 'Activity_021lrxj' ||
            taskDefinitionKey != 'Activity_1q7btlc'
          "
        >
          <el-option
            v-for="item in gysList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </template>

      <template v-slot:materielDesignation="{ row }">
        <el-input
          size="mini"
          v-model="row.materielDesignation"
          placeholder="请输入物料代号"
          :disabled="taskDefinitionKey != 'Activity_0uypakw'"
        ></el-input>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  import BOMSearch from './BOM-search.vue';
  import {
    getBomPageCategoryId,
    contactList
  } from '@/api/bpm/components/bomApprover';

  export default {
    components: {
      BOMSearch
    },
    props: {
      businessId: {
        default: ''
      },

      taskDefinitionKey: {
        default: ''
      }
    },
    mixins: [],

    data() {
      return {
        visible: false,
        title: '',
        gysList: [],

        materielDesignationPL: null,
        supplierIdPL: null,

        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: 'BOM编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: 'BOM名称',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '产品编码',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '产品名称',
            showOverflowTooltip: true
          },
          {
            prop: 'dosage',
            label: '用量',
            showOverflowTooltip: true
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true
          },
          {
            prop: 'versions',
            label: '版本'
          },

          {
            prop: 'materielDesignation',
            slot: 'materielDesignation',
            minWidth: 180,
            label: '物料代号'
          },

          {
            prop: 'supplierName',
            slot: 'supplierName',
            minWidth: 180,
            label: '供应商'
          },

          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },
          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            showOverflowTooltip: true
          }
        ],
        statusOpt: {
          '': '全部',
          0: '已停用',
          1: '已发布'
        }
      };
    },
    created() {
      this.getContactList();
    },
    methods: {
      /* 表格数据源 */
      datasource({ where, page, limit }) {
        return getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: -1,
          id: this.businessId
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },

      getContactList() {
        let param = {
          pageNum: 1,
          type: 2,
          size: -1,
          status: 1
        };
        contactList(param).then((res) => {
          this.gysList = res.list;
        });
      },

      handMaterPL() {
        let _arr = this.$refs.table.getData() || [];
        _arr.forEach((f) => {
          this.$set(f, 'materielDesignation', this.materielDesignationPL);
        });
        this.$refs.table.setData(_arr || []);
      },

      handMaterPL2() {
        let _arr = this.$refs.table.getData() || [];
        _arr.forEach((f) => {
          this.$set(f, 'supplierId', this.supplierIdPL);
        });
        this.$refs.table.setData(_arr || []);
      },

      getTableValue() {
        return this.$refs.table.getData() || [];
      },


    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-table__expanded-cell) {
    padding-bottom: 30px !important;
    border-bottom: 12px solid #ccffcc !important;
  }
</style>