zhangherong
6 天以前 729b38ccaa1439af3f23b8457a6ec2271d1e9c1a
src/views/lsw/LswMateriaView.vue
@@ -1,10 +1,46 @@
<template>
  <a-card
    :bordered="false"
    title="线边库物料信息"
  >
    <a-button @click="handleAdd" type="primary" icon="plus">新增物料信息-测试</a-button>
    <a-spin :spinning="confirmLoading">
    :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料编码">
              <j-input placeholder="请输入物料编码" v-model="queryParam.materialNumber"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料名称">
              <j-input placeholder="请输入物料名称" v-model="queryParam.materialName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
              <j-dict-select-tag placeholder="请选择状态" dictCode="dict_item_status"
                                 v-model="queryParam.materialStatus"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料类型">
              <j-dict-select-tag placeholder="请选择物料类型" dictCode="material_category"
                                 v-model="queryParam.materialCategory"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="2" :lg="7" :md="8" :sm="24">
            <a-form-item label="空类型">
              <a-switch v-model="queryParam.materialCategoryNull"></a-switch>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-spin :spinning="loading">
      <div>
        <!-- 主表单区域 -->
        <a-table
@@ -12,36 +48,79 @@
          size="middle"
          bordered
          rowKey="id"
          :rowClassName="tableRowClass"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{ selectedRowKeys: selectedRowKeys,
  onChange: onSelectChange,
  type: 'radio'}"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
          :customRow="customTableRow"
          @change="handleTableChange">
          <!--状态栏个性展示-->
          <span
            slot="status"
            slot-scope="text,record"
          >
          <a-badge
            v-if="record.materialStatus==='1'"
            status="success"
          />
          <span
            v-if="record.materialStatus==='1'"
            class="success"
          >启用</span>
          <a-badge
            v-if="record.materialStatus==='0'"
            status="error"
          />
          <span
            v-if="record.materialStatus==='0'"
            class="error"
          >禁用</span>
        </span>
          <span
            slot="action"
            slot-scope="text, record"
          >
          <a
            href="javascript:;"
            @click="handleEdit(record)"
          >编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item v-if="record.materialStatus === '1'">
                <a-popconfirm
                  title="确定禁用吗?"
                  @confirm="() => handleActive(record)"
                >
                  <a>禁用</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-else>
                <a-popconfirm
                  title="确定启用吗?"
                  @confirm="() => handleActive(record)"
                >
                  <a>启用</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        </a-table>
      </div>
      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="物料库存信息" :key="refKeys[0]" :forceRender="true">
          <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <span style="margin-right: 10px;">物料库存信息</span>
            <a-tag color="green" style="font-weight: bold;">
              库存总量:{{ totalInventoryQuantity }}
            </a-tag>
          </div>
          <j-vxe-table
            keep-source
            :ref="refKeys[0]"
            :loading="lswMaterialInventoryTable.loading"
            :columns="lswMaterialInventoryTable.columns"
            :dataSource="lswMaterialInventoryTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :toolbar="false"
          />
      <a-tabs v-model="activeKey">
        <a-tab-pane tab="库存明细" key="lswMaterialInventory" :forceRender="true">
          <lsw-material-inventory-list ref="lswMaterialInventory" />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
@@ -52,20 +131,16 @@
<script>
import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import LswMaterialModal from '@views/lsw/modules/LswMaterialModal.vue'
import LswMaterialInventoryList from './LswMaterialInventoryList.vue'
export default {
  name: 'LswMaterialForm',
  mixins: [JVxeTableModelMixin, JeecgListMixin],
  name: 'LswMaterialView',
  mixins: [JeecgListMixin],
  components: {
    LswMaterialModal,
    JFormContainer
    LswMaterialInventoryList
  },
  data() {
    return {
@@ -83,8 +158,6 @@
      validatorRules: {},
      selectedRowKeys: [], // 初始化为空数组(单选时存储单个key)
      selectedRowData: null,
      refKeys: ['lswMaterialInventory'],
      tableKeys: ['lswMaterialInventory'],
      activeKey: 'lswMaterialInventory',
      columns: [
        {
@@ -109,9 +182,12 @@
          dataIndex: 'materialName'
        },
        {
          title: '物料型号',
          title: '物料状态',
          align: 'center',
          dataIndex: 'materialModel'
          scopedSlots: {
            customRender: 'status'
          },
          dataIndex: 'materialStatus'
        },
        {
          title: '物料类型',
@@ -119,64 +195,24 @@
          dataIndex: 'materialCategory_dictText'
        },
        {
          title: '单位',
          title: '基本计量单位',
          align: 'center',
          dataIndex: 'materialUnit'
        },
        {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 物料库存信息
      lswMaterialInventoryTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '批次号',
            key: 'batchNumber',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '库存类型',
            key: 'inventoryCategory',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '数量',
            key: 'quantity',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '库存地ID',
            key: 'warehouseId',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '库存状态',
            key: 'inventoryStatus',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      url: {
        list: '/lswmaterial/lswMaterial/list',
        queryById: '/lswmaterial/lswMaterial/queryById',
        lswMaterialInventory: {
          list: '/lswmaterial/lswMaterial/queryLswMaterialInventoryByMainId'
        }
        list: '/lsw/lswMaterial/list',
        edit: '/lsw/lswMaterial/edit',
        active: '/lsw/lswMaterial/active',
        inactive: '/lsw/lswMaterial/inactive',
        queryById: '/lsw/lswMaterial/queryById',
      }
    }
  },
@@ -192,41 +228,116 @@
    formDisabled() {
      return this.disabled
    },
    totalInventoryQuantity() {
      if (!this.lswMaterialInventoryTable.dataSource || this.lswMaterialInventoryTable.dataSource.length === 0) {
        return '0';
      }
      return this.lswMaterialInventoryTable.dataSource.reduce((sum, item) => {
        const quantity = Number(item.quantity) || 0;
        return sum + quantity;
      }, 0);
    },
  },
  created() {
  },
  methods: {
    handleCustomAdd(){
      console.log('点击新增了')
    },
    handleTableChange() {
      console.log('test---->', this.selectedRowKeys[0])
    //禁用状态样式
    tableRowClass(record, index) {
      if (record.warehouseStatus != '1') {
        return 'frozenRowClass'
      }
      return ''
    },
    async onSelectChange(selectedRowKeys) {
      // 单选模式下,selectedRowKeys 是数组,但长度最多为1
      console.log('点击了---->')
      this.selectedRowKeys = selectedRowKeys
      // 获取选中行的完整数据
      if (selectedRowKeys.length > 0) {
        const selectedId = selectedRowKeys[0] // 选中行的id
        const lswMaterialInventoryResult = await getAction(this.url.lswMaterialInventory.list, { 'id': selectedId })
        this.lswMaterialInventoryTable.dataSource = lswMaterialInventoryResult.result
      if (selectedRowKeys.length === 1) {
        //加载库存信息
        this.$refs.lswMaterialInventory.queryParam.materialId = this.selectedRowKeys[0]
        this.$refs.lswMaterialInventory.loadData(1)
        this.$refs.lswMaterialInventory.statisticsInventory(this.selectedRowKeys[0])
      }else {
        //库存信息清空
        this.$refs.lswMaterialInventory.queryParam.materialId = 'null'
        this.$refs.lswMaterialInventory.loadData(1)
        this.$refs.lswMaterialInventory.statisticsInventory('null')
      }
    }
    },
    handleActive(record) {
      let url = this.url.active;
      if (record.materialStatus === '1') {
        url = this.url.inactive
      }
      let that = this
      getAction(url, { id: record.id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    /**
     * 自定义表格行
     * @param record 表格行信息
     * @returns {{style: {cursor: string}, on: {click: *}}} 样式对象与事件方法
     */
    customTableRow(record) {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          click: () => {
            this.onSelectChange([record.id])
          }
        }
      }
    },
  }
}
</script>
<style scoped>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.frozenRowClass {
  color: #c9c9c9;
}
.success {
  color: green;
}
.error {
  color: red;
}
.fontweight {
  font-weight: bold;
}
.ant-card-body .table-operator {
  margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.anty-row-operator button {
  margin: 0 5px;
}
/deep/ .ant-btn-danger {
  background-color: #ffffff;
}
.ant-modal-cust-warp {
  height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}
</style>