<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'; 
 | 
const context = getCurrentInstance()?.appContext.config.globalProperties; 
 | 
  
 | 
const router = useRouter(); 
 | 
  
 | 
const TABLE_KEY = 'table-locArea'; 
 | 
let currentPage = 1; 
 | 
let pageSize = 10; 
 | 
const searchInput = ref("") 
 | 
const editChild = ref(null) 
 | 
  
 | 
let currentLocAreaType = ref(null) 
 | 
let tableData = ref([]); 
 | 
getPage(); 
 | 
  
 | 
const columns = [ 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.loc_id', '库位'), 
 | 
    dataIndex: 'locId$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.type_id', '库区类型'), 
 | 
    dataIndex: 'typeId$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.uuid', '编号'), 
 | 
    dataIndex: 'uuid', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.name', '名称'), 
 | 
    dataIndex: 'name', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.flag', '标识'), 
 | 
    dataIndex: 'flag', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.status', '状态'), 
 | 
    dataIndex: 'status$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.create_time', '添加时间'), 
 | 
    dataIndex: 'createTime$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.create_by', '添加人员'), 
 | 
    dataIndex: 'createBy$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.update_time', '修改时间'), 
 | 
    dataIndex: 'updateTime$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.update_by', '修改人员'), 
 | 
    dataIndex: 'updateBy$', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  { 
 | 
    title: formatMessage('db.man_loc_area.memo', '备注'), 
 | 
    dataIndex: 'memo', 
 | 
    width: 140, 
 | 
    ellipsis: true, 
 | 
  }, 
 | 
  
 | 
  { 
 | 
    title: formatMessage('common.operation', '操作'), 
 | 
    name: 'oper', 
 | 
    dataIndex: 'oper', 
 | 
    key: 'oper', 
 | 
    width: 140, 
 | 
  }, 
 | 
]; 
 | 
  
 | 
const state = reactive({ 
 | 
  selectedRowKeys: [], 
 | 
  loading: false, 
 | 
}); 
 | 
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; 
 | 
}; 
 | 
  
 | 
function getPage() { 
 | 
  post('/api/locArea/page', { 
 | 
    current: currentPage, 
 | 
    pageSize: pageSize, 
 | 
    condition: searchInput.value, 
 | 
    typeId: currentLocAreaType?.value, 
 | 
  }).then((resp) => { 
 | 
    let result = resp.data; 
 | 
    if (result.code == 200) { 
 | 
      let data = result.data; 
 | 
      tableData.value = data; 
 | 
    } else if (result.code === 401) { 
 | 
      message.error(result.msg); 
 | 
      logout() 
 | 
    } else { 
 | 
      message.error(result.msg); 
 | 
    } 
 | 
  }) 
 | 
} 
 | 
  
 | 
const handleEdit = (item) => { 
 | 
  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/locArea/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/locArea/export', {}).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() 
 | 
} 
 | 
  
 | 
let locAreaTypeExpandedKeys = ref([]); 
 | 
let locAreaTypeData = ref([]); 
 | 
let searchLocAreaType = ref(""); 
 | 
getLocAreaTypeData() 
 | 
function getLocAreaTypeData() { 
 | 
  post('/api/locAreaType/tree', { 
 | 
    current: currentPage, 
 | 
    pageSize: pageSize, 
 | 
    condition: searchLocAreaType.value 
 | 
  }).then((resp) => { 
 | 
    let result = resp.data; 
 | 
    if (result.code == 200) { 
 | 
      let data = result.data; 
 | 
      locAreaTypeData.value = [{ 
 | 
        id: null, 
 | 
        name: '全部', 
 | 
        children: data 
 | 
      }] 
 | 
    } else if (result.code === 401) { 
 | 
      message.error(result.msg); 
 | 
      logout() 
 | 
    } else { 
 | 
      message.error(result.msg); 
 | 
    } 
 | 
  
 | 
    locAreaTypeExpandedKeys.value = ['0-0'] 
 | 
  }) 
 | 
} 
 | 
  
 | 
const handleLocAreaTypeSelected = (selectedKeys, e) => { 
 | 
  let tmp = []; 
 | 
  if(e.node.children != null) { 
 | 
    e.node.children.forEach((item) => { 
 | 
      tmp.push(item.id); 
 | 
    }) 
 | 
  } 
 | 
  tmp.push(e.node.id) 
 | 
  currentLocAreaType.value = tmp; 
 | 
  if(e.node.id == null) { 
 | 
    currentLocAreaType.value = null; 
 | 
  } 
 | 
  getPage() 
 | 
} 
 | 
  
 | 
const handleLocAreaTypeDept = (e) => { 
 | 
  getLocAreaTypeData() 
 | 
} 
 | 
  
 | 
</script> 
 | 
  
 | 
<script> 
 | 
export default { 
 | 
  name: '库区管理' 
 | 
} 
 | 
</script> 
 | 
  
 | 
<template> 
 | 
  <div style="display: flex;"> 
 | 
    <a-card :title="formatMessage('db.man_loc_area_type.type_id', '库区类型')" style="flex: 3;margin-right: 30px;"> 
 | 
      <a-input v-model:value="searchLocAreaType" @change="handleLocAreaTypeDept" :placeholder="formatMessage('page.input', '请输入')" 
 | 
        style="margin-bottom: 8px" /> 
 | 
      <a-tree v-model:expandedKeys="locAreaTypeExpandedKeys" @select="handleLocAreaTypeSelected" :tree-data="locAreaTypeData" blockNode> 
 | 
        <template #title="{ name }"> 
 | 
          <span>{{ name }}</span> 
 | 
        </template> 
 | 
      </a-tree> 
 | 
    </a-card> 
 | 
  
 | 
    <a-card style="flex: 10;"> 
 | 
      <EditView ref="editChild" @tableReload="handleTableReload" /> 
 | 
      <div class="table-header"> 
 | 
        <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')" 
 | 
          style="width: 200px;" @search="onSearch" /> 
 | 
        <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="columns"> 
 | 
        <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> 
 | 
    </a-card> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<style></style> 
 |