2025-03-JS-SDK-CLI/src/views/Query/BasicQuery/materialStockedQuery/index.vue

<!--
  功能：物料在库查询
  作者：李文虎
  邮箱：1439135148@qq.com
  时间：2024年05月15日 15:02:29
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="vue-element-page-wrap" ref="tableContainer">
    <el-row class="page-search" justify="space-between" align="middle">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row :gutter="20">
          <span class="CommonStyle2">物料编号</span>
          <el-col :span="6" class="col-height">
            <el-form-item label="" prop="params.account">
              <el-Input v-model="queryParams.params.MATERIALSPECNAME" placeholder="请输入物料编号" clearable />
            </el-form-item>
          </el-col>
          <span class="CommonStyle2">阶段</span>
          <el-col :span="6" class="col-height">
            <el-form-item label="" prop="params.account">
              <el-Input v-model="queryParams.params.PHASE" placeholder="请输入入库单" clearable />
            </el-form-item>
          </el-col>
          <!-- <span class="CommonStyle2">组织</span>
          <el-col :span="6" class="col-height">
            <el-form-item label="" prop="params.account">
              <el-Input v-model="queryParams.params.ERPFACTORY" placeholder="请输入组织号！" clearable />
            </el-form-item>
          </el-col> -->
          <span class="CommonStyle2">规格</span>
          <el-col :span="6" class="col-height">
            <el-form-item label="" prop="params.account">
              <el-Input v-model="queryParams.params.SPECNAME" placeholder="请输入SDK规格" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <br />
        <el-row :gutter="20">
          
          <span class="CommonStyle2">仓库</span>
          <el-col :span="6" class="col-height">
            <el-form-item label="" prop="params.account">
              <el-Input v-model="queryParams.params.ERPLOCATION" placeholder="请输入ERP仓库" clearable />
            </el-form-item>
          </el-col>
          <span class="CommonStyle2">货位</span>
          <el-col :span="6" class="col-height">
            <el-form-item label="" prop="params.account">
              <el-Input v-model="queryParams.params.LOCATIONNAME" placeholder="请输入货位" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="page-search-btns">
        <el-button type="primary" @click="handleQueryInfo">搜索</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>
      </div>
    </el-row>

    <div class="vue-element-page-table">

      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row :gutter="5">
          <el-col :span="15">
            <div class="vue-element-page-table">
              <div class="page-table-operate">
                <div class="page-table-title">
                  <span>库存信息</span>
                </div>
                <div class="page-table-operateBtns">
                  <el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
                    <template #reference>
                      <el-button class="operateBtns-setting">
                        <svg-icon icon-class="table_title" width="16px" height="16px" />
                      </el-button>
                    </template>
                    <ConfigTable :list="materialTableConfig.column" @updateList="updateList" />
                  </el-popover>
                </div>
              </div>
              <el-table border v-loading="loading" :data="pageList" highlight-current-row row-key="id"
                style="width: 100% " :height="tableHeight" @row-click="handle">
                <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                ></el-table-column>
                <template v-for="(col, index) in materialTableConfig.column" :key="index">
                  <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
                    <template #default="scope">
                      <span v-if="col.field === 'status'">
                        <span v-if="scope.row[col.field]" class="table-status-active">启用</span>
                        <span v-else class="table-status-inActive">禁用</span>
                      </span>
                      <span v-else>{{ scope.row[col.field] }}</span>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:empty>
                  <svg-icon icon-class="noData" width="160px" height="160px" />
                </template>
              </el-table>
              <pagination v-if="total > 0" :total="total" v-model:pageNumTo="queryParams.pageNum"
                v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
            </div>
          </el-col>
          <el-col :span="9">
            <div class="vue-element-page-table">
              <div class="page-table-operate">
                <div class="page-table-title">
                  <span class="CommonStyle">批次信息列表</span>
                </div>
                <div class="page-table-operateBtns">
                  <el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
                    <template #reference>
                      <el-button class="operateBtns-setting">
                        <svg-icon icon-class="table_title" width="16px" height="16px" />
                      </el-button>
                    </template>
                    <ConfigTable :list="state.materialTableConfig.column" @updateList="updateList" />
                  </el-popover>
                </div>
              </div>
              <el-table border v-loading="loading" :data="pageList2" highlight-current-row row-key="id"
                style="width: 100% " :height="tableHeight">
                <template v-for="(col, index) in column2" :key="index">
                  <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
                    <template #default="scope">
                      <span v-if="col.field === 'status'">
                        <span v-if="scope.row[col.field]" class="table-status-active">启用</span>
                        <span v-else class="table-status-inActive">禁用</span>
                      </span>
                      <span v-else>{{ scope.row[col.field] }}</span>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:empty>
                  <svg-icon icon-class="noData" width="160px" height="160px" />
                </template>
              </el-table>
              <pagination v-if="total1 > 0" :total1="total1" v-model:pageNumTo="queryParams.pageNum"
                v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
            </div>
          </el-col>
        </el-row>
      </el-form>

    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'materialStockedQuery'
};
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance, nextTick } from 'vue';
import { ElForm, ElMessageBox, ElTable } from 'element-plus';
import { getQueryList, getQueryPageList } from '@/api/common';
import { addStorage, updateStorage, deleteStorage } from '@/api/basics/storage';
import { msToDate } from '@/utils/CommonUtil'
import { localStorage } from "@/utils/storage";
import exportDataToExcel from "@/utils/export-excel";
import { bTableHeight } from "../../../../composables/calcTableHeight";

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(270);
const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);
const { proxy }: any = getCurrentInstance();

const roleTableRef = ref<InstanceType<typeof ElTable>>();
const value = ref('')
const materialTableConfig = ref({
  loading: false,
  column: [] as any,
  data: [],
})
const state = reactive({
  storageFParams: '',
  queryParams: {
    queryId: 'GetMATERIALRECEIVEACTList',
    version: 'WEB00003',
    params: {
      SPECNAME: '',
      PHASE: '',
      MATERIALSPECNAME: '',
      ERPFACTORY: '',
      ERPLOCATION: '',
      LOCATIONNAME : '',
      SITENAME: localStorage.get('siteName') || 'SDK'
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParams2: {
    queryId: 'GetEMaterialpackingList',
    version: '00002',
    params: {
      SDK_ID: '',
      SPECNAME: '',
      PHASE: '',
      MATERIALSPECNAME: '',
      ERPFACTORY: '',
      ERPLOCATION: '',
      LOCATIONNAME : '',
      SITENAME: localStorage.get('siteName') || 'SDK'
    },
    pageNum: 1,
    pageSize: 10
  },

  total: 0,
  total1: 0,
  loading: false,
  pageList: [] as any,
  pageList2: [] as any,
  dialog: {
    title: '新增库位',
    visible: false
  },
  formData: {
    account: '',
    name: '',
    pwd: '',
    phone: '',
    email: '',
    jobNo: ''
  } as any,
  rules: {
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  },
  column: [] as any,
  column1: [] as any,
  column2: [] as any,
  selectItem: undefined as any,
  currentTime: '',
  storageFList: [] as any,
  storageSList: [] as any,
  valueF: undefined as any,
  values: undefined as any
})
const {
  queryParams,
  queryParams2,
  total,
  total1,
  loading,
  pageList,
  pageList2,
  dialog,
  formData,
  rules,
  column,
  column2,
  selectItem,
  currentTime,
  storageFList,
  storageFParams,
  storageSList,
  valueF,
  values
} = toRefs(state);

onMounted(() => {
  materialTableConfig.value.column = [

    { header: '组织', field: 'ERPFACTORY', hide: true },
    { header: '组织(CN)', field: 'ORGNAME', hide: false },
    { header: '仓库', field: 'ERPLOCATION', hide: false },
    { header: '仓库(CN)', field: 'BS_ERPLOCATIONNAME', hide: false },
    { header: '货位', field: 'LOCATIONNAME', hide: false },
    { header: '货位(CN)', field: 'LOCATIONNAMEDESC', hide: false },
    { header: '物料编号', field: 'MATERIALSPECNAME', hide: false },
    { header: '品名', field: 'DESC_CN', hide: false },
    { header: '阶段', field: 'PHASE', hide: false },
    { header: 'SDK规格', field: 'SPECNAME', hide: false },
    { header: '数量', field: 'MATERIALQUANTITY', hide: false },
    { header: '单位', field: 'FNAME', hide: false },
    { header: 'SDK_ID', field: 'SDK_ID', hide: true }
  ]

  state.column2 = [
    { header: '标签', field: 'MATERIALPACKINGNAME', hide: true },
    { header: '批次', field: 'CHARGE', hide: false },
    { header: '供应商批次', field: 'SUPPLIERCHARGE', hide: false },
    { header: '数量', field: 'MATERIALQUANTITY', hide: false },
    { header: '入库时间', field: 'RECEIVETIME', hide: false }

  ]

  let pwd: any = localStorage.get('remeberPwd');
  state.queryParams.params.ERPFACTORY = JSON.parse(localStorage.get('orgNo')) || '';
  handleQuery();
  updateTableHeight();
  window.addEventListener('resize', handleResize);
  //storageFQuery();
});
//formdata时间设置
const size = ref<'default' | 'large' | 'small'>('default');
const updateList = (col: any) => {
  materialTableConfig.value.column = col
}
// 更新列
// function updateList(col: any) {
//   state.column = col;
// }
//点击触发下面表********
function handle(row: any, event: any, column: any) {
  state.queryParams2.params.MATERIALSPECNAME = row.MATERIALSPECNAME;
  state.queryParams2.params.ERPFACTORY = row.ERPFACTORY;
  state.queryParams2.params.ERPLOCATION = row.ERPLOCATION;
  state.queryParams2.params.PHASE = row.PHASE;
  state.queryParams2.params.SDK_ID = row.SDK_ID;
  state.queryParams2.params.LOCATIONNAME = row.LOCATIONNAME;
  getQueryPageList(state.queryParams2)
    .then((res: any) => {
      state.pageList2 = res.data.list;
      state.total1 = res.data.total;
      showCurrentTime();
    })
}
function exportExcel() {
  getQueryList(state.queryParams).then((res: any) => {
    if (res.data.length > 0) {
      exportDataToExcel(res.data, '库存查询')
    } else {
      proxy.$ElMessage.warning('当前查询没有数据可以导出');
    }
  });
}
function handleQueryInfo() {
  state.queryParams.pageNum = 1
  handleQuery()
}
//*****
function handleQuery() {
  // let arr = state.queryParams.params.DateValue.toString().split(",");
  // let str1 = msToDate(arr[0]);
  // let str2 = msToDate(arr[1]);
  // state.queryParams.params.FROMDATE = str1.withoutTime;
  // state.queryParams.params.TODATE = str2.withoutTime;
  // console.log(state.queryParams.params);
  state.pageList = []
  state.pageList2 = [];
  state.total1 = 0;
  getQueryPageList(state.queryParams).then((res: any) => {
    state.pageList = res.data.list;
    state.total = res.data.total;
    showCurrentTime();
  })
}
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}
function showCurrentTime() {
  let date = new Date()
  state.currentTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ":" +
    (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
}
function storageFQuery() {
  getQueryList(state.storageFParams)
    .then((res: any) => {
      console.log(res.data);
      state.storageFList = res.data;
    })
    .catch(() => { });
}

/**
 * 新增 dialog
 */
function handleAdd() {
  selectItem.value = undefined;
  dialog.value = {
    title: '新增库位',
    visible: true
  };
}

/**
 * 删除 dialog
 */
function handleDelete(row: any) {

  const params = {
    siteName: row.SITENAME
  } as any;
  deleteStorage(params).then((res: any) => {
    if (res.code === '0') {
      proxy.$ElMessage.success('删除成功');
    }
    handleQuery();
  });
}
/**
 * 修改库位 dialog
 */
function handleUpdate(row: any) {
  state.dialog = {
    title: '修改库位',
    visible: true
  };
  state.selectItem = row;
}

function dialogOpend() {
  formDataRef.value.resetFields();
  if (state.selectItem) {
    state.formData = {
      account: state.selectItem.account,
      name: state.selectItem.name,
      pwd: state.selectItem.pwd,
      phone: state.selectItem.phone,
      email: state.selectItem.email,
      jobNo: state.selectItem.jobNo,
    }
  }
}

/**
 * 取消关闭弹窗
 */
function cancel() {
  state.dialog.visible = false;
}

/**
 * 保存
 */
function submitForm() {
  formDataRef.value.validate((isValid: boolean) => {
    if (isValid) {
      if (state.selectItem) {// 编辑
        let params = {
          dataId: state.selectItem.dataId,
          ...state.formData
        }
        updateStorage(params).then((res: any) => {
          if (res.code === '0') {
            proxy.$ElMessage.success('修改成功');
          }
          cancel();
          handleQuery();
        });
      } else {
        addStorage(state.formData).then((res: any) => {

          if (res.code === '0') {
            proxy.$ElMessage.success('新增成功');
          }

          cancel();
          handleQuery();
        });
      }
    }
  });
}
</script>

<style scoped lang="scss">
.CommonStyle {
  width: 60px;
  height: 5px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #323233;
  text-align: center;
  line-height: 30px;
  font-weight: 400;
}

.CommonStyle2 {
  width: 72px;
  height: 3.5px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #323233;
  text-align: center;
  line-height: 30px;
  font-weight: 400;
}

.col-height {
  padding-top: 2px;
  padding-bottom: 2px;
}
</style>