kd-aiot-frontend-wt/src/views/bpm/handleTask/components/bomApproverJSdevice/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 class="toolbar_box">
          <div>
            <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: 200px"
                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>
          </div>

          <div
            ><span>基本数量</span>
            <el-input placeholder="请输入" v-model.number="baseCount">
            </el-input>
            <DictSelection dictName="计量单位" v-model="unit"
          /></div>
        </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,index) in gysList"
           :key="item.id + index"  
            :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: [],
        baseCount:'',
        unit:'',
        materielDesignationPL: null,
        supplierIdPL: null,
        
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'categoryCode',
            label: '编码',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '名称',
            showOverflowTooltip: true
          },

          {
            prop: 'brandNum',
            label: '牌号'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            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;
  }

  .toolbar_box {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      > span {
        width: 150px;
      }
      > div {
        margin-left: 10px;
      }
    }
  }
</style>