<script setup>  
 | 
import { getCurrentInstance, ref, computed, reactive } from 'vue';  
 | 
import { useRouter } from "vue-router";  
 | 
import { get, post, postBlob } from '@/utils/request.js'  
 | 
import { message, Modal } from 'ant-design-vue';  
 | 
import { logout } from '@/config.js';  
 | 
import EditView from './edit.vue'  
 | 
import { formatMessage } from '@/utils/localeUtils.js';  
 | 
import useTableSearch from '@/utils/tableUtils.jsx';  
 | 
const context = getCurrentInstance()?.appContext.config.globalProperties;  
 | 
const router = useRouter();  
 | 
  
 | 
const TABLE_KEY = 'table-locDetl';  
 | 
let currentPage = 1;  
 | 
let pageSize = 10;  
 | 
const searchInput = ref("")  
 | 
const searchParam = ref({  
 | 
  locNo: null,  
 | 
  matnr: null,  
 | 
  orderNo: null,  
 | 
  batch: null,  
 | 
  tagId: null,  
 | 
  orderType: null,  
 | 
})  
 | 
const editChild = ref(null)  
 | 
const state = reactive({  
 | 
  selectedRowKeys: [],  
 | 
  loading: false,  
 | 
  columns: [],  
 | 
});  
 | 
  
 | 
let tableData = ref([]);  
 | 
getColumns();  
 | 
getPage();  
 | 
  
 | 
const {  
 | 
  getColumnSearchProps,  
 | 
  handleResizeColumn,  
 | 
} = useTableSearch();  
 | 
  
 | 
  
 | 
const hasSelected = computed(() => state.selectedRowKeys.length > 0);  
 | 
const start = () => {  
 | 
  state.loading = true;  
 | 
  // ajax request after empty completing  
 | 
  setTimeout(() => {  
 | 
    state.loading = false;  
 | 
    state.selectedRowKeys = [];  
 | 
  }, 1000);  
 | 
};  
 | 
const onSelectChange = selectedRowKeys => {  
 | 
  // console.log('selectedRowKeys changed: ', selectedRowKeys);  
 | 
  state.selectedRowKeys = selectedRowKeys;  
 | 
};  
 | 
  
 | 
state.columns = [  
 | 
  // {  
 | 
  //   title: formatMessage('db.man_loc_detl.loc_id', '库位'),  
 | 
  //   dataIndex: 'locId$',  
 | 
  //   width: 140,  
 | 
  //   ellipsis: true,  
 | 
  //   ...getColumnSearchProps('locId$'),  
 | 
  // },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.loc_no', '库位号'),  
 | 
    dataIndex: 'locNo',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('locNo'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.loc_type', '库位类型'),  
 | 
    dataIndex: 'type$',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('type$'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.matnr', '商品编号'),  
 | 
    dataIndex: 'matnr',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('matnr'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.maktx', '商品名称'),  
 | 
    dataIndex: 'maktx',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('maktx'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.specs', '规格'),  
 | 
    dataIndex: 'specs',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('specs'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.model', '型号'),  
 | 
    dataIndex: 'model',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('model'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.matnr', '品类'),  
 | 
    dataIndex: 'tagId$',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('tagId$'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.maktx', '颜色'),  
 | 
    dataIndex: 'color',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('color'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.model', '品牌'),  
 | 
    dataIndex: 'brand',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('brand'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.model', '产地'),  
 | 
    dataIndex: 'origin',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('origin'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.dewell', '入库时间'),  
 | 
    dataIndex: 'dewell$',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('dewell$'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.order_no', '订单号'),  
 | 
    dataIndex: 'orderNo',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('orderNo'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.batch', '批号'),  
 | 
    dataIndex: 'batch',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('batch'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.anfme', '数量'),  
 | 
    dataIndex: 'anfme',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('anfme'),  
 | 
  },  
 | 
  // {  
 | 
  //   title: formatMessage('db.man_loc_detl.freeze', '是否冻结'),  
 | 
  //   dataIndex: 'freeze$',  
 | 
  //   width: 140,  
 | 
  //   ellipsis: true,  
 | 
  //   ...getColumnSearchProps('freeze$'),  
 | 
  // },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.status', '状态'),  
 | 
    dataIndex: 'status$',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('status$'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.update_time', '修改时间'),  
 | 
    dataIndex: 'updateTime$',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('updateTime$'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.update_by', '修改人员'),  
 | 
    dataIndex: 'updateBy$',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('updateBy$'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('db.man_loc_detl.memo', '备注'),  
 | 
    dataIndex: 'memo',  
 | 
    width: 140,  
 | 
    ellipsis: true,  
 | 
    ...getColumnSearchProps('memo'),  
 | 
  },  
 | 
  {  
 | 
    title: formatMessage('common.operation', '操作'),  
 | 
    name: 'oper',  
 | 
    dataIndex: 'oper',  
 | 
    key: 'oper',  
 | 
    width: 140,  
 | 
    fixed: 'right',  
 | 
  },  
 | 
];  
 | 
  
 | 
//加载扩展字段  
 | 
async function getColumns() {  
 | 
  let fieldResp = await post('/api/matField/list', {  
 | 
    unique: 1,  
 | 
    fieldType: 1  
 | 
  })  
 | 
  let fieldResult = fieldResp.data;  
 | 
  let tmp = state.columns;  
 | 
  if (fieldResult.code == 200) {  
 | 
    let data = fieldResult.data;  
 | 
  
 | 
    data.forEach((item) => {  
 | 
      tmp.push({  
 | 
        title: formatMessage(item.language, item.describe),  
 | 
        name: item.name,  
 | 
        dataIndex: item.name,  
 | 
        key: item.name,  
 | 
        width: 140,  
 | 
      })  
 | 
    })  
 | 
    state.columns = tmp;  
 | 
  } else if (result.code === 401) {  
 | 
    message.error(result.msg);  
 | 
    logout()  
 | 
  } else {  
 | 
    message.error(result.msg);  
 | 
  }  
 | 
}  
 | 
  
 | 
function getPage() {  
 | 
  state.loading = true;  
 | 
  post('/api/locDetl/page', {  
 | 
    current: currentPage,  
 | 
    pageSize: pageSize,  
 | 
    condition: searchInput.value,  
 | 
    _param: searchParam.value,  
 | 
  }).then((resp) => {  
 | 
    let result = resp.data;  
 | 
    if (result.code == 200) {  
 | 
      let data = result.data;  
 | 
      tableData.value = data;  
 | 
  
 | 
      state.loading = false;  
 | 
    } else if (result.code === 401) {  
 | 
      message.error(result.msg);  
 | 
      logout()  
 | 
    } else {  
 | 
      message.error(result.msg);  
 | 
    }  
 | 
  })  
 | 
}  
 | 
  
 | 
const handleEdit = (item) => {  
 | 
  let content = "是否确认生成-->出库任务!!"  
 | 
  let type = 2  
 | 
  if (item?.locNo.indexOf("B") >= 0 || item?.locNo.indexOf("C") >= 0) {  
 | 
    content = "是否确认生成-->拣货单!!"  
 | 
    type = 1  
 | 
  }  
 | 
  Modal.confirm({  
 | 
    title: formatMessage('page.delete', '出库'),  
 | 
    content: formatMessage('page.delete.confirm', content),  
 | 
    maskClosable: true,  
 | 
    onOk: async () => {  
 | 
      const hide = message.loading(formatMessage('common.loading', '请求中'));  
 | 
      try {  
 | 
        let params = {  
 | 
          outType: type,  
 | 
          locDetls: [item]  
 | 
        }  
 | 
        post('/api/out/locs/stock', params).then(resp => {  
 | 
          let result = resp.data;  
 | 
          if (result.code === 200) {  
 | 
            console.log(result);  
 | 
            message.success(result.msg);  
 | 
          } else {  
 | 
            message.error(result.msg);  
 | 
          }  
 | 
          getPage()  
 | 
          hide()  
 | 
        })  
 | 
      } catch (error) {  
 | 
        message.error(formatMessage('common.fail', '请求失败'));  
 | 
      }  
 | 
    },  
 | 
  });  
 | 
  
 | 
  // editChild.value.open = true;  
 | 
  // editChild.value.formData = item == null ? editChild.value.initFormData : JSON.parse(JSON.stringify(item));  
 | 
  // editChild.value.isSave = item == null;  
 | 
}  
 | 
  
 | 
const handleDel = (rows) => {  
 | 
  Modal.confirm({  
 | 
    title: formatMessage('page.delete', '删除'),  
 | 
    content: formatMessage('page.delete.confirm', '确定删除该项吗?'),  
 | 
    maskClosable: true,  
 | 
    onOk: async () => {  
 | 
      const hide = message.loading(formatMessage('common.loading', '请求中'));  
 | 
      try {  
 | 
        post('/api/locDetl/remove/' + rows.map((row) => row.id).join(','), {}).then(resp => {  
 | 
          let result = resp.data;  
 | 
          if (result.code === 200) {  
 | 
            message.success(result.msg);  
 | 
          } else {  
 | 
            message.error(result.msg);  
 | 
          }  
 | 
          getPage()  
 | 
          hide()  
 | 
        })  
 | 
      } catch (error) {  
 | 
        message.error(formatMessage('common.fail', '请求失败'));  
 | 
      }  
 | 
    },  
 | 
  });  
 | 
}  
 | 
  
 | 
const handleExport = async (intl) => {  
 | 
  postBlob('/api/locDetl/export', {  
 | 
    condition: searchInput.value,  
 | 
    _param: searchParam.value,  
 | 
  }).then(result => {  
 | 
    const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });  
 | 
    window.location.href = window.URL.createObjectURL(blob);  
 | 
    return true;  
 | 
  })  
 | 
};  
 | 
  
 | 
const onSearch = () => {  
 | 
  // console.log('search');  
 | 
  getPage()  
 | 
}  
 | 
  
 | 
const onPageChange = (page, size) => {  
 | 
  currentPage = page;  
 | 
  pageSize = size;  
 | 
  getPage();  
 | 
}  
 | 
  
 | 
function handleTableReload(value) {  
 | 
  getPage()  
 | 
}  
 | 
  
 | 
</script>  
 | 
  
 | 
<script>  
 | 
export default {  
 | 
  name: '库存明细'  
 | 
}  
 | 
</script>  
 | 
  
 | 
<template>  
 | 
  <div>  
 | 
    <EditView ref="editChild" @tableReload="handleTableReload" />  
 | 
    <div class="table-header">  
 | 
      <div>  
 | 
        <a-input v-model:value="searchParam.locNo" :placeholder="formatMessage('page.locDetl.locNo.input', '请输入库位号')"  
 | 
          style="width: 140px;margin-right: 10px;" />  
 | 
        <a-input v-model:value="searchParam.matnr" :placeholder="formatMessage('page.locDetl.matnr.input', '请输入商品编号')"  
 | 
          style="width: 140px;margin-right: 10px;" />  
 | 
        <a-input v-model:value="searchParam.maktx" :placeholder="formatMessage('page.locDetl.maktx.input', '请输入商品名称')"  
 | 
          style="width: 140px;margin-right: 10px;" />  
 | 
        <a-input v-model:value="searchParam.orderNo"  
 | 
          :placeholder="formatMessage('page.locDetl.orderNo.input', '请输入订单号')"  
 | 
          style="width: 140px;margin-right: 10px;" />  
 | 
        <a-input v-model:value="searchParam.batch" :placeholder="formatMessage('page.locDetl.batch.input', '请输入批号')"  
 | 
          style="width: 140px;margin-right: 10px;" />  
 | 
        <a-select v-model:value="searchParam.orderType" :placeholder="formatMessage('page.locDetl.orderNo.input', '仓库类型')"  
 | 
          :options="[  
 | 
           { label: '全部', value: null },  { label: '立库', value: 1 }, { label: '平库', value: 2 }]" style="width: 140px;margin-right: 10px;">  
 | 
        </a-select>  
 | 
        <a-select v-model:value="searchParam.tagId" :placeholder="formatMessage('page.locDetl.orderNo.input', '请选择品类')"  
 | 
          :options="[  
 | 
            { label: '默认分类', value: 10 }, { label: '机油', value: 11 }, { label: '变速箱油', value: 17 }, { label: '火花塞', value: 18 },  
 | 
            { label: '养护品', value: 25 }, { label: '油漆耗材', value: 26 }, { label: '球头摆臂', value: 27 }, { label: '砂纸类', value: 31 },  
 | 
            { label: '菜瓜布', value: 32 }, { label: '遮蔽类', value: 33 }, { label: '抛光类', value: 34 }, { label: '除尘类', value: 35 },  
 | 
            { label: '漏斗类', value: 36 }, { label: '防护类', value: 37 }, { label: '烤房保养类', value: 38 }, { label: '调漆罐', value: 39 },  
 | 
            { label: '喷枪', value: 40 }, { label: '费斯托系列', value: 41 },]" style="width: 140px;margin-right: 10px;">  
 | 
        </a-select>  
 | 
        <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"  
 | 
          style="width: 200px;" @search="onSearch" />  
 | 
      </div>  
 | 
      <div class="table-header-right">  
 | 
        <a-button @click="handleEdit(null)" type="primary">{{ formatMessage('page.add', '添加') }}</a-button>  
 | 
        <a-button @click="handleExport">{{ formatMessage('page.export', '导出') }}</a-button>  
 | 
      </div>  
 | 
    </div>  
 | 
    <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"  
 | 
      :data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"  
 | 
      :pagination="{ total: tableData.total, onChange: onPageChange }"  
 | 
      :scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="state.columns" @resizeColumn="handleResizeColumn"  
 | 
      :loading="state.loading">  
 | 
      <template #bodyCell="{ column, text, record }">  
 | 
        <template v-if="column.dataIndex === 'oper'">  
 | 
          <div style="display: flex;justify-content: space-evenly;">  
 | 
            <a-button type="link" primary @click="handleEdit(record)">{{ formatMessage('page.edit', '手动出库')  
 | 
            }}</a-button>  
 | 
            <!-- <a-button type="link" danger @click="handleDel([record])">{{ formatMessage('page.delete', '删除')}}</a-button> -->  
 | 
          </div>  
 | 
        </template>  
 | 
      </template>  
 | 
    </a-table>  
 | 
  </div>  
 | 
</template>  
 | 
  
 | 
<style></style>  
 |