四维尔：增加 容器库存组件 四维尔：包装容器出库编辑页面增加查看库存

duhe

2 天以前 c1a80b121735cd6e43e7e3eafa98e7152c161092

四维尔：增加 容器库存组件
四维尔：包装容器出库编辑页面增加查看库存

 src/views/component/ICInventory_Mould/index.vue

New file
@@ -0,0 +1,272 @@
<template>
  <div class="barcode-detail">
    <el-dialog
      :visible.sync="dialogVisible"
      title="容器库存即时报表"
      width="90%"
      top="5vh"
      :close-on-click-modal="false"
      @closed="handleClosed"
    >
      <el-card>
        <div class="dialog-content">
          <div class="table-toolbar">
            <el-button size="mini" @click="handleColumnSetting">
              <i class="el-icon-setting"></i> 列设置
            </el-button>
          </div>
          <el-table ref="mainTable"  border stripe style="width: 100%" 
            :data="tableData" @selection-change="handleSelectionChange" :loading="loading"
            show-summary :summary-method="getSummaries"
          >
            <el-table-column type="selection" width="55" fixed="left" />
            <el-table-column v-for="column in tableColumns"
              :key="column.field"
              :prop="column.field"
              :label="column.title"
              :width="column.width"
              :align="column.align"
              :fixed="column.fixed"
              :sortable="column.sortable"
              :show-overflow-tooltip="true"
            >
              <template v-if="column.editable" #default="scope">
                <el-input v-model="scope.row[column.field]" size="mini" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-dialog>

    <el-dialog :visible.sync="columnDialogVisible" title="隐藏列设置" width="50%" >
      <div class="column-setting">
        <el-checkbox-group v-model="selectedColumns">
          <el-checkbox v-for="column in allColumns" :key="column.field" :label="column.field" >
            {{ column.title }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer">
        <el-button @click="columnDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="applyColumnSettings">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Kf_ICInventory_Mould',
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,                                //后端接口前缀
      dialogVisible: false,                                                 //弹窗显示标记
      columnDialogVisible: false,                                           //列设置显示标记
      loading: false,                                                       //table表格加载标记
      formData: {                                                           //表头数据
        HInterID: '',
        HBillNo: '',
        HBillType: ''
      },
      tableData: [],                                                        //table表格数据
      tableColumns: [],                                                     //table表格列数据
      allColumns: [],                                                       //列设置table表格
      selectedColumns: [],
      selectedRows: [],                                                     //选中行记录数据
    }
  },
  methods: {
    open(record) {
      if (!record) {
        this.$message.warning('请选择要查看库存的容器')
        return
      }

      const HMaterID = record.HMaterID;       //容器ID
      const HWHID = record.HWHID;             //仓库ID
      const HSPID = record.HSPID;             //仓位ID

      this.dialogVisible = true
      this.$nextTick(() => {
        this.loadData(HMaterID, HWHID , HSPID);
      })
    },

    //#region 合计行计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }

        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
      })

      return sums
    },
    //#endregion

    //#region 页面初始化 加载数据
    async loadData(HMaterID, HWHID , HSPID) {
      this.loading = true
      var sWhere = "' and HMaterID = " + HMaterID + " '";
      var sql = "exec h_p_Kf_ICInventory_Mould " + sWhere;
      var ModRightNameCheck = "";
      axios.get(this.$baseUrl + "/CommonModel/searchMethod", {
        params: { 
          "sql": sql
          , "user": sessionStorage["HUserName"]
          , "ModRightNameCheck": ModRightNameCheck
        }
      }).then(response => {
        var data1 = response.data
        if (data1.count == 1) {
          this.generateTableColumns(data1.list);
          this.tableData = data1.data || [];
          this.applyColumnSettingsFromStorage();
          this.loading = false;
        }
        else {
          this.$message.error('获取条码明细数据失败');
          this.loading = false;
        }
      });
    },
    //#endregion

    //#region 对查询数据进行处理，为渲染table、列设置table提供数据
    generateTableColumns(columnList) {
      const columns = []                                      //table表格列数据
      const allColumns = []                                   //列设置table表格数据

      //增加复选框列
      columns.push({
        type: 'selection',
        width: 55,
        fixed: 'left'
      })

      //遍历列数据
      columnList.forEach((item, index) => {
        const colName = item.ColmCols
        let columnConfig = {
          field: colName,
          title: colName,
          width: 200,
          align: 'center',
          sortable: true
        }

        //对指定列进行设置
        switch (colName) {
          case '数量':
            columnConfig.total = true
            break
        }

        columns.push(columnConfig)                             //table表格列数据 添加数据
        allColumns.push({ ...columnConfig })                   //列设置table表格数据 添加数据
      })

      this.tableColumns = columns
      this.allColumns = allColumns
      this.selectedColumns = allColumns.map(col => col.field)
    },
    //#endregion

    //#region table选中行监听变更，获取选中行数据
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    //#endregion

    //#region 列设置按钮点击事件监听
    handleColumnSetting() {
      this.columnDialogVisible = true
    },
    //#endregion

    //#region 列设置保存
    saveColumnSettings() {

    },
    //#endregion

    //#region 列设置确定按钮点击事件监听
    applyColumnSettings() {
      this.tableColumns = [
        this.tableColumns[0],
        ...this.allColumns.filter(col => this.selectedColumns.includes(col.field))
      ]
      this.columnDialogVisible = false
      this.saveColumnSettings()
    },
    //#endregion

    //#region 列设置 根据列设置显示table列
    applyColumnSettingsFromStorage() {

    },
    //#endregion
    
    //#region 页面关闭监听事件
    handleClosed() {
      this.tableData = []
      this.tableColumns = []
      this.selectedRows = []
    }
    //#endregion
  }
}
</script>

<style scoped>
.barcode-detail {
  font-family: "Microsoft YaHei", sans-serif;
}

.form-container {
  margin-bottom: 16px;
}

.table-toolbar {
  margin-bottom: 12px;
}

.column-setting {
  max-height: 400px;
  overflow-y: auto;
}

.column-setting .el-checkbox {
  display: block;
  margin-bottom: 8px;
}

:deep(.el-dialog__body) {
  padding: 10px 20px;
}

:deep(.el-card__body) {
  padding: 12px;
}
</style>

 src/views/scMould/warehouse/Sc_MouldProdOutBillEdit.vue

@@ -206,6 +206,7 @@
              size="mini">上移</el-button>
            <el-button type="success" plain icon="el-icon-arrow-down" @click="handleMoveRowDown(zbSelForm)"
              size="mini">下移</el-button>
            <el-button type="success" plain icon="el-icon-printer" @click="get_ICInventoryMould(zbSelForm)">容器库存</el-button>
          </div>
          <el-table :data="editData" style="width: 100%" height="300" width="100%" ref="zbTable"
            @selection-change="handleTableZbEdit" :row-class-name="rowSysZbIndex" show-summary border>
@@ -361,6 +362,8 @@
    <el-dialog title="隐藏列设置" :visible.sync="openRowHide" width="816px" append-to-body>
      <RowSettings :colName="btResList" :HModName="HModName" @rowEditClose="rowSetClose" v-if="rowHideShow" />
    </el-dialog>
    <!-- 容器库存 -->
    <ICInventoryMould :visible.sync="ICInventoryMouldShow" ref="ICInventoryMould"/>
  </div>
</template>

@@ -375,11 +378,12 @@
import GyMould from '@/views/scMould/basicModeling/Gy_MouldFileList.vue'
import GyStockPlace from '@/views/basic/gyStockPlace/gyStockPlace.vue'
import ScMouldOut from '@/views/scMould/warehouse/component/Sc_MouldOutRequestBill.vue'
import ICInventoryMould from '@/views/component/ICInventory_Mould'               //容器库存组件
import moment from 'moment';

export default {
  name: 'Sc_MouldProdOutBillEdit',
  components: { Dept, Warehouse, RowSettings, GyEmployee,GySupplier,GyCustomer,GyMould,GyStockPlace,ScMouldOut },
  components: { Dept, Warehouse, RowSettings, GyEmployee,GySupplier,GyCustomer,GyMould,GyStockPlace,ScMouldOut,ICInventoryMould },
  props: {
    OperationType: { type: Number, },
    linterid: { type: Number, },
@@ -422,6 +426,7 @@
      ifOrganizationEdit: false,
      subDisabled: false,//编辑页面保存按钮是否禁用(true禁用，false可用)
      // OperationType: this.$route.query.OperationType,//保存类型（新增1修改2）
      ICInventoryMouldShow:false, //容器库存组件显示标记
      HInterID: 0,
      baseURL: process.env.VUE_APP_BASE_API,
      checkedSysZb: [],
@@ -1131,6 +1136,21 @@
        this.$refs.zbTable.toggleRowSelection(del_row, false) //设置这一行取消选中
      }
    },

    //#region 查看容器库存
    get_ICInventoryMould(zbSelForm) {
      if (!this.zbIndex) {
        this.$modal.msgError("请选择一行数据")
      } else {
        var index = zbSelForm.index-1;
        this.ICInventoryMouldShow = true
        this.$nextTick(() => {
          this.$refs.ICInventoryMould.open(this.editData[index]);
        })
      }
    },
    //#endregion
    
    // 编辑提交保存
    submitForm() {
      this.$refs["form"].validate(valid => {