kd-aiot-frontend-aps/src/views/productionPlan/components/stockDetailDialog.vue

<template>
  <ele-modal
    width="80vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    row-key="code"
    custom-class="ele-dialog-form"
    :title="'库存详情'"
    :maxable="true"
    append-to-body
  >
    <div class="form-wrapper">
      <!--      <el-form :model="requestData" label-width="0" :show-message="false">-->
      <!--        <el-descriptions title="" :column="2" border>-->
      <!--          <el-descriptions-item label="计划编号">-->
      <!--            {{ formData.code }}</el-descriptions-item-->
      <!--          >-->

      <!--          <el-descriptions-item label="产品编码">{{-->
      <!--            formData.productCode-->
      <!--            }}</el-descriptions-item>-->

      <!--          <el-descriptions-item label="产品名称">{{-->
      <!--            formData.productName-->
      <!--            }}</el-descriptions-item>-->

      <!--          <el-descriptions-item label="牌号|型号">-->
      <!--            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item-->
      <!--          >-->

      <!--          <el-descriptions-item label="批次号">{{-->
      <!--            formData.batchNo-->
      <!--            }}</el-descriptions-item>-->

      <!--          <el-descriptions-item label="工艺路线">{{-->
      <!--            formData.produceRoutingName-->
      <!--            }}</el-descriptions-item>-->

      <!--          <el-descriptions-item label="要求生产数量">{{-->
      <!--            formData.requiredFormingNum-->
      <!--            }}</el-descriptions-item>-->
      <!--          <el-descriptions-item label="要求完成日期">{{-->
      <!--            formData.reqMoldTime-->
      <!--            }}</el-descriptions-item>-->
      <!--        </el-descriptions>-->
      <!--      </el-form>-->

      <!--      <headerTitle title="剩余拆批" class="mt20"> </headerTitle>-->
      <el-form ref="form" :model="form" :rules="rules">
        <!--        <ele-pro-table-->
        <!--          ref="table"-->
        <!--          :needPage="false"-->
        <!--          :columns="columns"-->
        <!--          :datasource="form.surplusUnpack"-->
        <!--        >-->
        <!--          <template v-slot:toolbar>-->
        <!--            <el-button-->
        <!--              size="small"-->
        <!--              type="primary"-->
        <!--              icon="el-icon-plus"-->
        <!--              class="ele-btn-icon"-->
        <!--              :disabled="requiredFormingNum == 0 ? true : false"-->
        <!--              @click="openUnpack"-->
        <!--            >-->
        <!--              拆批-->
        <!--            </el-button>-->
        <!--          </template>-->

        <!--          <template v-slot:requiredFormingNum="scope">-->
        <!--            <el-form-item-->
        <!--              v-if="requiredFormingNum != 0"-->
        <!--              :prop="'surplusUnpack.' + scope.$index + '.requiredFormingNum'"-->
        <!--              :rules="[-->
        <!--                {-->
        <!--                  required: true,-->
        <!--                  message: '请输入要求生产数量',-->
        <!--                  trigger: 'change'-->
        <!--                },-->
        <!--                {-->
        <!--                  pattern: /^\d+(\.{0,1}\d+){0,1}$/,-->
        <!--                  message: '拆批数超过生产数量',-->
        <!--                  trigger: ['blur', 'change']-->
        <!--                }-->
        <!--              ]"-->
        <!--            >-->
        <!--              <el-input-->
        <!--                disabled-->
        <!--                v-model="requiredFormingNum"-->
        <!--                placeholder="请输入"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->

        <!--            <el-form-item v-else> 工单已全部拆完 </el-form-item>-->
        <!--          </template>-->

        <!--          <template v-slot:splitResidue="scope">-->
        <!--            {{ formData.splitResidue }}-->
        <!--          </template>-->

        <!--        </ele-pro-table>-->

        <!--        <headerTitle title="拆批" class="mt20"> </headerTitle>-->

        <ele-pro-table
          ref="table"
          :needPage="true"
          :columns="columns"
          :datasource="datasource"
          :init-load="false"
        >
          <!--          <template v-slot:requiredFormingNum="scope">-->
          <!--            <el-form-item-->
          <!--              :prop="'unpackList.' + scope.$index + '.requiredFormingNum'"-->
          <!--              :rules="{-->
          <!--                required: true,-->
          <!--                message: '请输入要求生产数量',-->
          <!--                trigger: 'change'-->
          <!--              }"-->
          <!--            >-->
          <!--              <el-input-number-->
          <!--                type="number"-->
          <!--                @change="changeNum(scope.$index)"-->
          <!--                :min="0"-->
          <!--                v-model="scope.row.requiredFormingNum"-->
          <!--                placeholder="请输入"-->
          <!--              ></el-input-number>-->
          <!--            </el-form-item>-->
          <!--          </template>-->

          <!--          <template v-slot:reqMoldTime="scope">-->
          <!--            <el-form-item-->
          <!--              :prop="'unpackList.' + scope.$index + '.reqMoldTime'"-->
          <!--              :rules="{-->
          <!--                required: true,-->
          <!--                message: '请选择开始计划时间',-->
          <!--                trigger: 'change'-->
          <!--              }"-->
          <!--            >-->
          <!--              <el-date-picker-->
          <!--                class="w100"-->
          <!--                v-model="scope.row.reqMoldTime"-->
          <!--                type="date"-->
          <!--                value-format="yyyy-MM-dd"-->
          <!--              ></el-date-picker>-->
          <!--            </el-form-item>-->
          <!--          </template>-->

          <template v-slot:action="{ $index }">
            <!--            <el-popconfirm-->
            <!--              class="ele-action"-->
            <!--              title="确定要删除此子单吗？"-->
            <!--              @confirm="remove($index)"-->
            <!--            >-->
            <!--              <template v-slot:reference>-->
            <!--                <el-link type="danger" :underline="false" icon="el-icon-delete">-->
            <!--                  删除-->
            <!--                </el-link>-->
            <!--              </template>-->
            <!--            </el-popconfirm>-->
            <el-link type="primary" :underline="false" icon="el-icon-view">
              库存
            </el-link>
            <el-link type="primary" :underline="false" icon="el-icon-view">
              在途
            </el-link>
          </template>
        </ele-pro-table>
      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getStockList } from '@/api/productionPlan/index.js';
  export default {
    components: {},
    data() {
      return {
        visible: false,

        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,

        form: {
          stockList: []
        },

        rules: {},

        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'level',
            label: '级别',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'measureQuantity',
            label: '计量数量',
            align: 'center',
            minWidth: 100
          }
        ],
        activeName: 'first',
        selection: [],
        request: {
          categoryCode: ''
        }
      };
    },
    methods: {
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getStockList({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      handleSelectionChange(list) {
        if (list.length > 1) {
          let _list = [];
          list.forEach((e) => {
            if (e.childList.length > 0 && e.splitBatch != 2) {
              _list.push(...e.childList);
            } else {
              _list.push(e);
            }
          });
          this.selection = _list;
        } else {
          this.selection = [];
        }
      },
      /* 数据转为树形结构 */
      parseData(data) {
        return {
          ...data,
          list: this.$util.toTreeData({
            data: data.list,
            count: data.total,

            idField: 'code',
            parentIdField: 'joinPlanCode'
          })
        };
      },
      onSortChange(e) {
        let sort = {
          orderBy: e.order,
          sortName: e.prop
        };
        this.sort = sort;
        this.reload();
      },
      open(row) {
        this.visible = true;
        this.reload({ categoryCode: row.bomCode });
      },
      cancel() {
        this.formData = {};
        this.visible = false;
      },

      confirm() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }
</style>