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

<template>
  <div>
    <headerTitle title="Bom审批"></headerTitle>
    <div class="title">
      <div>
        类型：{{
          this.form.bomType == 1
            ? 'PBOM'
            : this.form.bomType == 2
            ? 'MBOM'
            : this.form.bomType == 3
            ? 'ABOM'
            : 'EBOM'
        }}
      </div>
      <div> 编码：{{ this.form.code }} </div>
      <div> 名称：{{ this.form.name }} </div>
      <div> 版本：V{{ this.form.versions }} </div>
    </div>
    <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" disabled>
            </el-input>
            <DictSelection dictName="计量单位" v-model="unit" disabled
          /></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:versions="{ row }">
        <span>V{{ row.versions }}.0</span>
      </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,
    getBomGetById
  } from '@/api/bpm/components/bomApprover';

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

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

    data() {
      return {
        visible: false,
        title: '',
        gysList: [],
        form: {},
        materielDesignationPL: null,
        supplierIdPL: null,

        baseCount: null,
        unit: 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',
            slot: '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();
      this.handBomDetails(this.businessId);
    },
    methods: {
      /* 表格数据源 */
      datasource({ where, page, limit }) {
        return getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: -1,
          id: this.businessId
        });
      },

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

      handBomDetails(id) {
        if (id) {
          getBomGetById(id).then((res) => {
            this.form = res;
            this.baseCount = res.baseCount;
            this.unit = res.category.measuringUnit;
          });
        }
      },

      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>
  .title {
    display: flex;
    > div {
      flex: 1;
    }
    margin-bottom: 15px;
    font-weight: 800;
    font-size: 16px;
  }
  :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>